:root {
  --bg: #f8fafc; --fg:#232526; --primary:#179eb9; --secondary:#fd7e14; --accent:#6f42c1;
  --btn1:#17a2b8; --btn2:#28a745; --btn3:#fd7e14; --btn4:#fdc106; --white:#fff; --muted:#7b858e; --shadow:0 2px 18px #e4e4e4;
}

html.dark, body.dark, .dark {
  --bg: #23263A; --fg:#f3f3f3; --primary:#49e0e9; --secondary:#fd7e14; --muted:#bdbdbd; --accent:#ae82ff;
  --btn1:#49e0e9; --btn2:#2ed47a; --btn3:#ffd452; --btn4:#db9fff; --white:#22242f; --shadow:0 2px 16px #1a1c26;
  background:var(--bg) !important; color:var(--fg) !important;
}
html, body { background:var(--bg); color:var(--fg); font-family:'Segoe UI',Arial,sans-serif; font-size:17px; min-height:100vh; margin:0;padding:0; transition:.3s;}
/* Disable text select/drag/copy */
body, html, .site-logo, .stylish-brand, input, button, h1, a, p, ul, li, div, span {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
}
.cs-navbar-top { display:flex; align-items:center; justify-content:space-between; padding:16px 32px 0 32px; min-height:54px; width:100%; max-width:1120px; margin:auto; }
.cs-left-brand { display:flex; align-items:center; }
.site-logo {
  width: 46px; height: 46px; border-radius: 13px; object-fit: cover; background: #fff;
  margin-right: 16px; box-shadow: 0 0 2px #b6b6b6; display:inline-block;
}
.stylish-brand {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 2.17rem;
  font-weight: 800; letter-spacing: 2px; text-decoration: none;
  background: linear-gradient(90deg, #3f51b5 20%, #6f42c1 38%, #1fd1f9 70%, #ffc93e 96%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-fill-color: transparent;
  padding: 0; line-height: 1.15; margin-top: 4px; margin-left: 5px; display:inline-block;
  filter: drop-shadow(0 1px 1px #fff2); transition: text-shadow .2s;
}
.stylish-brand:hover { text-shadow:0 3px 13px #95fffd60; opacity:0.89; }
.cs-right-btns-top {display: flex; gap: 16px; align-items: center;}
.dark-toggle {cursor:pointer;background:var(--muted);color:#fff;font-size:15px;border:none;
  border-radius:15px;padding:7px 21px;height:39px;}
.cs-nav-btn {padding:10px 22px;border-radius:6px;background:var(--accent);color:#fff;
  border:none;cursor:pointer;font-size:1rem;text-decoration:none;transition:.2s;}
.cs-nav-btn:hover {background:var(--secondary);}
.container { background:var(--white); box-shadow:var(--shadow); margin:28px auto 17px auto; padding:36px 24px 18px 24px; border-radius:15px; max-width:490px; text-align:center;}
h1 {color:var(--primary); font-size:2rem; margin-bottom:12px;}
input[type="file"]{margin-bottom:14px;}
.btn {padding:14px 28px;font-size:1rem;margin:8px 7px 12px 7px;border-radius:7px;border:none;cursor:pointer;font-weight:600;outline:none;transition:.2s;}
.btn1 {background:var(--btn1);color:#fff;}
.btn1:hover {background:#148ea1;}
.btn2 {background:var(--btn2);color:#fff;}
.btn2:hover {background:#218838;}
.btn3 {background:var(--btn3);color:#fff;}
.btn3:hover {background:#e37716;}
.btn4 {background:var(--btn4);color:#333;}
.btn4:hover {background:#ebc114;}
.msg {color:#28a745;font-size:.99em;padding-bottom:5px;}
.error {color:#dc3545;font-size:.97em;padding-bottom:4px;}
.desc-blk{margin:36px auto 34px auto;max-width:1040px;background:var(--bg);border-radius:9px;
  padding:25px 50px 20px 50px;box-shadow:0 2px 12px #ececec;color:var(--fg);font-size:1.08rem;text-align:center;}
.features-list, .feat-card, .desc-list, .desc-perfect, .cs-contact-btn {margin-top: 1.7rem;}
ul, li {text-align:left;}
.cs-contact-btn { display:inline-block; margin-top:22px; color:#fff; background:var(--primary); padding:11px 30px; border-radius:8px; text-decoration:none; font-size:1.11rem; }
.cs-contact-btn:hover {background:var(--accent);}
::-webkit-scrollbar { width:8px; background: #edf0f6;}
::-webkit-scrollbar-thumb {background: #c1c6cc; border-radius: 7px;}
@media (max-width:600px){
  .cs-navbar-top,.cs-left-brand {flex-direction:column;gap:6px;align-items:flex-start;}
  .container { padding:22px 2px 13px 2px; }
  .desc-blk {padding:13px 4vw 8px 4vw;}
  .site-logo {width:36px;height:36px;}
}
