:root{
  /* Светло-серая тема */
  --bg:#d7dadf; --panel:#eceef1; --panel2:#e6e8ec; --panel3:#cdd1d8;
  --border:#c3c8d0; --border2:#b6bcc6; --border3:#aab1bc;
  --text:#14161a; --text2:#2c3138; --muted:#5c626c; --muted2:#7a808a;
  --accent:#1ea866; --accent-glow:#22c56f; --accent-dim:#178a53;
  --red:#d64541; --orange:#e08a2b;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Space Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--accent-dim);text-decoration:none;}
a:hover{color:var(--accent);}
::selection{background:rgba(30,168,102,.22);}
input:focus,textarea:focus,select:focus{outline:none;}
button{color:inherit; font-family:inherit;}
.mono{font-family:'JetBrains Mono',monospace;}

/* фоновая сетка (светлая) */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(30,168,102,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,168,102,.05) 1px,transparent 1px),
    radial-gradient(circle at 15% 12%,rgba(30,168,102,.10),transparent 42%),
    radial-gradient(circle at 85% 88%,rgba(0,0,0,.04),transparent 45%);
  background-size:40px 40px,40px 40px,100% 100%,100% 100%;
}

/* шапка */
header.top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 22px; background:rgba(236,238,241,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:12px; cursor:pointer;}
.brand .name{font-size:19px; font-weight:700; letter-spacing:.2px; line-height:1;}
.brand .name span{color:var(--accent);}
.brand .sub{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted2); margin-top:3px; letter-spacing:1px;}
@keyframes tongueFlick{0%,100%{transform:scaleY(1); opacity:.9;}50%{transform:scaleY(.5); opacity:.5;}}
.tongue{transform-origin:center top; animation:tongueFlick 1.6s ease-in-out infinite;}

nav.mainnav{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
nav.mainnav a{
  padding:8px 13px; border-radius:12px; font-size:13px; font-weight:600; color:var(--muted);
  border:1px solid transparent; transition:all .15s;
}
nav.mainnav a:hover{color:var(--text); background:var(--panel3);}
nav.mainnav a.active{color:var(--accent-dim); border-color:var(--border2); background:#dfeee6;}

.stat-pill{display:flex; align-items:center; gap:7px; padding:7px 12px; background:var(--panel3); border:1px solid var(--border2); border-radius:14px;}
.stat-pill .val{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14px;}

/* макет */
.wrap{position:relative; z-index:1; max-width:960px; margin:0 auto; padding:34px 18px 90px;}
.wrap-narrow{max-width:560px;}
h1.page{margin:0 0 4px; font-size:30px; font-weight:700; letter-spacing:-.3px;}
.page-sub{margin:6px 0 26px; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--muted);}

/* карточки */
.card{background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:22px; box-shadow:0 1px 2px rgba(0,0,0,.03);}
.card + .card{margin-top:16px;}

/* кнопки — светло-серые */
.btn{
  padding:11px 22px; border-radius:14px; cursor:pointer;
  font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700;
  background:#c6cbd3; color:var(--text); border:1px solid var(--border2); transition:all .15s;
}
.btn:hover{background:#b9bfc9; transform:translateY(-1px);}
.btn:disabled{background:#dde0e4; color:var(--muted2); cursor:not-allowed; transform:none;}
@keyframes btnShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.btn.primary{
  color:#fff; border-color:transparent;
  background:linear-gradient(90deg,#178a53 0%,#3ee88a 25%,#178a53 50%,#3ee88a 75%,#178a53 100%);
  background-size:200% 100%; animation:btnShimmer 2.4s linear infinite;
  box-shadow:0 2px 10px rgba(30,168,102,.30);
}
.btn.primary:hover{filter:brightness(1.08); box-shadow:0 4px 18px rgba(30,168,102,.5);}
.btn.primary:disabled{animation:none; background:#dde0e4; color:var(--muted2); border-color:var(--border2); box-shadow:none;}
.btn.ghost{background:#dee1e6; color:var(--muted); border:1px solid var(--border);}
.btn.ghost:hover{background:#d3d7dd; color:var(--text);}
.btn.danger{background:transparent; color:var(--red); border:1px solid rgba(214,69,65,.45);}
.btn.danger:hover{background:rgba(214,69,65,.10);}
.btn.sm{padding:7px 13px; font-size:12.5px; border-radius:11px;}

/* формы */
label.fld{display:block; margin-bottom:14px;}
label.fld .lbl{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); letter-spacing:.5px; display:block; margin-bottom:7px;}
input.inp,textarea.inp,select.inp{
  width:100%; padding:13px 15px; background:#f5f6f8; border:2px solid var(--border2); border-radius:14px;
  color:var(--text); font-family:'JetBrains Mono',monospace; font-size:14px; transition:border-color .15s;
}
textarea.inp{resize:vertical; min-height:80px; line-height:1.55;}
input.inp:focus,textarea.inp:focus,select.inp:focus{border-color:var(--accent);}
.err{color:var(--red); font-family:'JetBrains Mono',monospace; font-size:13px; margin-top:10px; min-height:18px;}
.ok{color:var(--accent-dim); font-family:'JetBrains Mono',monospace; font-size:13px; margin-top:10px;}

pre.code{
  margin:0 0 16px; padding:14px 15px; background:#f1f3f5; border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:12px; overflow-x:auto; font-family:'JetBrains Mono',monospace; font-size:13.5px; line-height:1.6; color:#155e3b; white-space:pre;
}

/* таблицы */
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px;}
table.tbl th{text-align:left; padding:11px 12px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.5px; color:var(--muted); text-transform:uppercase; border-bottom:1px solid var(--border);}
table.tbl td{padding:11px 12px; border-bottom:1px solid #d9dde2; color:var(--text2);}
table.tbl tr:hover td{background:rgba(30,168,102,.05);}
.tag{display:inline-block; padding:2px 9px; border-radius:8px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;}
.tag.green{background:rgba(30,168,102,.16); color:var(--accent-dim);}
.tag.red{background:rgba(214,69,65,.15); color:var(--red);}
.tag.gray{background:#d3d7dd; color:var(--muted);}

/* прогресс-бар */
.pbar{height:12px; background:#c7ccd3; border-radius:8px; overflow:hidden; border:1px solid var(--border2);}
.pbar > div{height:100%; border-radius:8px; background:linear-gradient(90deg,var(--accent-dim),var(--accent-glow)); box-shadow:0 0 10px rgba(30,168,102,.45); transition:width .5s ease;}

.grid-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;}
.metric{background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:18px 20px;}
.metric .num{font-family:'JetBrains Mono',monospace; font-size:28px; font-weight:700; color:var(--accent-dim);}
.metric .cap{font-size:12.5px; color:var(--muted); margin-top:4px;}

.muted{color:var(--muted);}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.between{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.section-title{display:flex; align-items:center; gap:9px; margin:0 0 16px;}
.section-title h2{margin:0; font-size:15px; font-weight:600; letter-spacing:1px; color:var(--text2); text-transform:uppercase;}
.dot{width:9px; height:9px; border-radius:3px; background:var(--accent); box-shadow:0 0 8px rgba(30,168,102,.6);}
.dot.orange{background:var(--orange); box-shadow:0 0 8px rgba(224,138,43,.5);}

/* модальное окно */
.overlay{position:fixed; inset:0; z-index:50; background:rgba(20,22,26,.45); backdrop-filter:blur(4px); display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:40px 16px;}
.overlay.show{display:flex;}
.modal{background:var(--panel); border:1px solid var(--border); border-radius:22px; padding:24px; width:100%; max-width:640px; box-shadow:0 20px 60px rgba(0,0,0,.25);}
.modal h3{margin:0 0 18px; font-size:20px;}

/* спиннер загрузки */
@keyframes spin{to{transform:rotate(360deg);}}
.spinner{width:38px; height:38px; border-radius:50%; border:4px solid var(--border2); border-top-color:var(--accent); animation:spin .8s linear infinite; margin:0 auto;}
.loading-wrap{padding:70px 0; text-align:center;}
.loading-wrap .cap{margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--muted);}

/* магазин */
.shop-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px;}
.shop-item{background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:8px;}
.shop-item .ico{font-size:34px;}
.shop-item .nm{font-weight:700; font-size:16px;}
.shop-item .ds{font-size:13px; color:var(--muted); line-height:1.5; flex:1;}
.shop-item .price{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--accent-dim);}

/* ============ ТЁМНАЯ ТЕМА (старый неон) ============ */
[data-theme="dark"]{
  --bg:#0e1013; --panel:#15181d; --panel2:#14171c; --panel3:#181c22;
  --border:#262b33; --border2:#2a2f37; --border3:#2f353d;
  --text:#d7dce3; --text2:#c2c8d0; --muted:#8b919b; --muted2:#6b7178;
  --accent:#3fe08a; --accent-glow:#3fe08a; --accent-dim:#2bbf74; --red:#ff4d4d; --orange:#ff9c3b;
}
[data-theme="dark"] a{color:#3fe08a;}
[data-theme="dark"] a:hover{color:#6bf0aa;}
[data-theme="dark"] .bg-grid{
  background-image:
    linear-gradient(rgba(63,224,138,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,224,138,.045) 1px,transparent 1px),
    radial-gradient(circle at 15% 12%,rgba(63,224,138,.10),transparent 42%),
    radial-gradient(circle at 85% 88%,rgba(255,59,59,.07),transparent 45%);
}
[data-theme="dark"] header.top{background:rgba(19,22,27,.82);}
[data-theme="dark"] nav.mainnav a.active{background:#181c22; color:#3fe08a;}
[data-theme="dark"] .card{box-shadow:none;}
[data-theme="dark"] .btn{background:#20242b; color:var(--text); border-color:#2a2f37;}
[data-theme="dark"] .btn:hover{background:#272c34;}
[data-theme="dark"] .btn.primary{color:#0e1013; border-color:transparent;
  background:linear-gradient(90deg,#2bbf74 0%,#6bf0aa 25%,#2bbf74 50%,#6bf0aa 75%,#2bbf74 100%);
  background-size:200% 100%; box-shadow:0 0 16px rgba(63,224,138,.35);}
[data-theme="dark"] .btn.primary:hover{filter:brightness(1.08); box-shadow:0 0 26px rgba(63,224,138,.6);}
[data-theme="dark"] .btn.primary:disabled{animation:none; background:#20242b; color:var(--muted2); border-color:#2a2f37; box-shadow:none;}
[data-theme="dark"] .btn.ghost{background:#181c22; color:var(--muted); border-color:#2a2f37;}
[data-theme="dark"] .btn.ghost:hover{background:#20242b; color:var(--text);}
[data-theme="dark"] .btn:disabled{background:#181c22; color:var(--muted2);}
[data-theme="dark"] input.inp,[data-theme="dark"] textarea.inp,[data-theme="dark"] select.inp{background:#0c0e11; color:var(--text);}
[data-theme="dark"] pre.code{background:#0c0e11; border-color:#23272f; color:#9fe8c0;}
[data-theme="dark"] table.tbl td{border-bottom-color:#1e2229;}
[data-theme="dark"] .pbar{background:#0e1013; border-color:#22262d;}
[data-theme="dark"] .tag.gray{background:#22262d; color:var(--muted);}
[data-theme="dark"] .modal{background:#14171c;}
[data-theme="dark"] .spinner{border-color:#2a2f37; border-top-color:var(--accent);}
