/* Vanilla Ukraine — v2 theme.
   Loaded after style.css / stage3.css; overrides palette and adds
   the shared component + public page classes. No inline styles.

   Palette: warm charcoal + muted sage, with a honey secondary.
   Deliberately low-glare: no neon fills, soft borders, gentle depth. */

:root{
  --bg:#131210;
  --card:#1b1a15;
  --card2:#232019;
  --line:rgba(232,224,200,.09);
  --text:#e3ded1;
  --muted:#9e9784;
  --accent:#b8cc86;          /* muted sage-lime */
  --accent2:#d8b57a;         /* warm honey (secondary) */
  --accent-ink:#191a11;
  --blue:#8fb4dc;
  --yellow:#b8cc86;
  --red:#e08a86;
  --amber:#d7ac63;
  --green:#86c39c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 620px at 82% -12%, rgba(184,204,134,.07), transparent 60%),
    radial-gradient(950px 520px at -6% 6%, rgba(216,181,122,.05), transparent 55%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(184,204,134,.3);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--card2);color:var(--accent);border:1px solid var(--line);padding:10px 16px;border-radius:0 0 10px 0;font-weight:800;text-decoration:none}
.skip:focus{left:0}

/* ---------- header / nav ---------- */
header{position:sticky;top:0;z-index:40;background:rgba(19,18,16,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand img{display:block;border-radius:7px}
header nav a{color:var(--text);transition:color .15s}
header nav a:hover{color:var(--accent)}
.nav-toggle{display:none;flex-direction:column;gap:5px;justify-content:center;width:44px;height:44px;padding:0 11px;background:transparent;border:1px solid var(--line);border-radius:11px;cursor:pointer}
.nav-toggle i{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:transform .2s,opacity .2s}
body.nav-open .nav-toggle i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle i:nth-child(2){opacity:0}
body.nav-open .nav-toggle i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- buttons: cream primary, no neon fills ---------- */
.button{background:#e7e1d2;color:#1b1a12;transition:transform .12s,background .15s,box-shadow .15s;box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.button:hover{transform:translateY(-1px);background:#f1ebdd}
.button.small{padding:8px 14px}
.button.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.button.ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(232,224,200,.18)}
.button.copied{background:var(--green);color:#151a14}

/* ---------- generic text helpers ---------- */
.muted{color:var(--muted)}
.mono{font-family:Consolas,ui-monospace,SFMono-Regular,monospace}
.inline-link{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.inline-link:hover{border-bottom-color:var(--accent)}
code{font-family:Consolas,ui-monospace,SFMono-Regular,monospace;background:rgba(232,224,200,.07);color:#d9d2c1;padding:1px 6px;border-radius:6px;font-size:.92em}
.mt{margin-top:18px}
.mb{margin-bottom:18px}
.wrap{white-space:normal}
.tight{gap:6px}

/* ---------- notices ---------- */
.notice{background:rgba(134,195,156,.12);border:1px solid rgba(134,195,156,.28);color:var(--text);transition:opacity .5s,transform .5s}
.notice.error{background:rgba(224,138,134,.12);border-color:rgba(224,138,134,.3)}
.notice.fade{opacity:0;transform:translateY(-6px)}

/* ---------- forms (public) ---------- */
input,textarea,select{transition:border-color .15s,outline-color .15s}
input:focus,textarea:focus{outline-color:var(--accent)}
input{background:#141310;border:1px solid var(--line);border-radius:8px;color:var(--text);padding:13px;font:inherit;width:100%}
input:focus{outline:2px solid rgba(184,204,134,.55);border-color:transparent}
textarea{width:100%;background:#141310;border:1px solid var(--line);border-radius:8px;color:var(--text);padding:13px;font:inherit;min-height:120px;resize:vertical}
.pw-row{display:flex;gap:8px;align-items:stretch}
.pw-row input{flex:1;min-width:0}
.pw-eye{border:1px solid var(--line);background:var(--card2);color:var(--muted);border-radius:8px;padding:0 13px;cursor:pointer;font-size:1rem;line-height:1}
.pw-eye:hover{background:#2b281f;color:var(--text)}
.strength{font-size:12px;color:var(--muted);margin-top:6px;min-height:1em;display:block}
.strength.s1{color:var(--red)}
.strength.s2{color:#dda06b}
.strength.s3{color:var(--amber)}
.strength.s4{color:#a9c97f}
.strength.s5{color:var(--green)}

/* ---------- hero / live status ---------- */
.server-card{background:linear-gradient(180deg,var(--card),#191712)}
.status-head{display:flex;align-items:center;gap:10px}
.status-count{display:flex;align-items:baseline;gap:8px}
.status-count b{font-size:2.6rem;line-height:1;font-weight:900}
.status-count small{color:var(--muted)}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.dot.online{background:var(--green);box-shadow:0 0 0 0 rgba(134,195,156,.45);animation:pulse 2.6s infinite}
.dot.offline{background:var(--red)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(134,195,156,.35)}50%{box-shadow:0 0 0 6px rgba(134,195,156,0)}}

/* ---------- sections / steps ---------- */
.section{padding:90px 0 15px}
.section:first-of-type{padding-top:40px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps article{background:linear-gradient(180deg,var(--card),#191712);border:1px solid var(--line);border-radius:16px;padding:28px}
.steps b{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:rgba(184,204,134,.14);border:1px solid rgba(184,204,134,.34);color:var(--accent);font-weight:900;margin-bottom:14px}
.step-link{color:var(--accent);text-decoration:none;font-weight:700;display:inline-block;margin-top:12px}
.step-link:hover{text-decoration:underline}

/* ---------- news ---------- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.news-list{display:flex;flex-direction:column;gap:16px;max-width:900px}
.news-card{background:linear-gradient(180deg,var(--card),#191712);border:1px solid var(--line);border-radius:16px;padding:24px;transition:transform .15s,border-color .15s}
.news-card:hover{transform:translateY(-3px);border-color:rgba(184,204,134,.3)}
.news-card h3{margin:6px 0 10px;font-size:1.25rem}
.news-card p{color:var(--muted);margin:0;white-space:pre-line}
.news-meta{color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:0}
.pin{color:var(--accent2);font-weight:700}

/* ---------- rules ---------- */
.rules-page{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:start}
.rules-page .sp-card{margin-bottom:0}
.rule-list{margin:0;padding-left:22px;color:var(--muted);display:flex;flex-direction:column;gap:9px}
.rule-list.ok{color:var(--text)}
.rule-list li::marker{color:var(--accent);font-weight:800}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.team-card{background:linear-gradient(180deg,var(--card),#191712);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.team-card strong{font-size:1.05rem}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:10px;max-width:820px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 18px}
.faq details[open]{border-color:rgba(184,204,134,.3)}
.faq summary{cursor:pointer;padding:16px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:800;font-size:1.2rem}
.faq details[open] summary::after{content:"\2013"}
.faq details p{color:var(--muted);margin:0 0 16px}

/* ---------- dashboard ---------- */
.dashboard .panel{max-width:none;margin:0;width:auto;align-self:start}
.dashboard h2{font-size:clamp(2rem,6vw,3rem);margin:10px 0 30px}
.pun-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pun-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:rgba(224,138,134,.08);border-left:3px solid var(--red)}
.pun-list li.is-mute{background:rgba(215,172,99,.08);border-left-color:var(--amber)}
.pun-list li div{display:flex;flex-direction:column;gap:2px}
.pun-list li small{color:var(--muted)}

/* ---------- shared panel components (public + dashboard) ---------- */
.sp-card{background:linear-gradient(180deg,var(--card),#191712);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:16px}
.sp-card h3{margin:0 0 8px;font-size:1.15rem}
.sp-sub{color:var(--muted);font-size:.9rem;margin:0 0 14px;line-height:1.5}
.sp-empty{color:var(--muted);margin:0}

.sp-tbl{width:100%;border-collapse:collapse;font-size:13px}
.sp-tbl thead th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 10px 10px;border-bottom:1px solid var(--line);font-weight:700}
.sp-tbl tbody td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.sp-tbl tbody tr:last-child td{border-bottom:none}
.sp-tbl tbody tr:hover{background:rgba(232,224,200,.03)}
.sp-nick{font-weight:600}
.sp-meta{color:var(--muted);font-size:12px;white-space:nowrap}
.sp-meta.wrap{white-space:normal}

/* badges: translucent, low-glare, readable */
.sp-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:1px solid transparent}
.sp-badge.b{background:rgba(224,138,134,.16);color:#f0aaa6;border-color:rgba(224,138,134,.32)}
.sp-badge.m{background:rgba(215,172,99,.16);color:#e6c583;border-color:rgba(215,172,99,.32)}
.sp-badge.g{background:rgba(134,195,156,.16);color:#a7d8b7;border-color:rgba(134,195,156,.3)}
.sp-badge.w{background:rgba(195,155,240,.16);color:#cbb0f0;border-color:rgba(195,155,240,.3)}
.sp-badge.gr{background:rgba(157,151,132,.14);color:#c3bda9;border-color:rgba(157,151,132,.28)}

.rank-tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);color:var(--text);background:rgba(232,224,200,.04)}
.rank-tag.vi{color:#b7d9bd;border-color:rgba(183,217,189,.45)}
.rank-tag.pr{color:#a7c6e6;border-color:rgba(167,198,230,.45)}
.rank-tag.de{color:#ccb6e8;border-color:rgba(204,182,232,.45)}
.rank-tag.he{color:#e6cfa3;border-color:rgba(230,207,163,.45)}
.rank-tag.mod{color:#a4d6cd;border-color:rgba(164,214,205,.45)}
.rank-tag.adm{color:var(--accent);border-color:rgba(184,204,134,.5)}

.sp-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.sp-chips.mb{margin-top:0;margin-bottom:12px}

.sp-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp-actions.mt{margin-top:14px}
.sp-actions.tight{gap:6px}
.sp-inline{display:inline-flex;align-items:center;gap:6px;margin:0}

.sp-btn{border:1px solid var(--line);background:var(--card2);border-radius:10px;padding:7px 13px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
.sp-btn:hover{background:#2c2920;border-color:rgba(232,224,200,.18)}
.sp-btn.dark{background:#e7e1d2;color:#1b1a12;border-color:transparent;font-weight:700}
.sp-btn.dark:hover{background:#f1ebdd}
.sp-btn.danger{background:rgba(224,138,134,.13);color:#eda9a5;border-color:rgba(224,138,134,.3)}
.sp-btn.danger:hover{background:rgba(224,138,134,.2);border-color:rgba(224,138,134,.5)}

.sp-field{width:100%;background:#141310;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--text)}
.sp-field:focus{border-color:rgba(184,204,134,.5)}
textarea.sp-field{min-height:140px;resize:vertical}
select.sp-field{width:auto;max-width:140px;cursor:pointer}
.sp-form{display:flex;flex-direction:column;gap:12px}
.sp-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.05em}
.sp-form label input{font-weight:500;letter-spacing:0}
.sp-form label.sp-check{flex-direction:row;align-items:center;gap:8px}
.sp-check input{width:auto}
.sp-search{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sp-search input{flex:1;min-width:160px}

.sp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.sp-stat{background:linear-gradient(180deg,var(--card),#191712);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.sp-stat small{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.sp-stat strong{font-size:26px;font-weight:800;line-height:1}
.sp-stat i{font-style:normal;font-size:12px}
.sp-stat i.u{color:var(--blue)}.sp-stat i.b{color:var(--red)}.sp-stat i.m{color:var(--amber)}
.sp-stat i.w{color:#c3a8e0}.sp-stat i.d{color:var(--green)}

.sp-grid{margin-bottom:20px}
.sp-grid.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}

.sp-pro-main{flex:1;min-width:0}
.sp-mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 18px;margin-top:14px}
.sp-mgrid div{display:flex;flex-direction:column;gap:2px}
.sp-mgrid small{color:var(--muted);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.sp-mgrid b{font-weight:600;font-size:13px}
.sp-mgrid .mono{font-family:Consolas,ui-monospace,monospace}

.sp-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--accent-ink);background:linear-gradient(135deg,#c3d693,#98ad6b);flex:0 0 40px;text-transform:uppercase;font-size:13px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:28px 24px;color:var(--muted)}
footer span{color:var(--text)}
footer a{color:var(--accent);text-decoration:none}
footer a:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .steps{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav-toggle{display:flex}
  header nav{position:absolute;top:82px;left:16px;right:16px;flex-direction:column;align-items:stretch;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;display:none;z-index:50;box-shadow:0 24px 60px rgba(0,0,0,.55)}
  body.nav-open header nav{display:flex}
  header nav a,header nav a:not(.button){display:block;padding:11px 12px;border-radius:10px}
  header nav a:hover{background:rgba(232,224,200,.05)}
  header nav .button{margin-top:4px;text-align:center}
}
@media (max-width:760px){
  .steps,.news-grid,.news-list,.rules-page,.team-grid,.sp-grid.cols2{grid-template-columns:1fr}
  .sp-grid.cols2{display:grid}
  .section{padding:60px 0 10px}
  .hero{gap:22px}
  .server-card{padding:22px}
}