/* ═══ VARIABLES ═══════════════════════════════════════════════════════════════ */
:root {
  --bg:       #06060f;
  --surface:  #0e0e1a;
  --surface2: #12121f;
  --surface3: #1a1a2e;
  --border:   rgba(99,102,241,0.12);
  --border2:  rgba(255,255,255,0.06);
  --blue:     #3b82f6;
  --blue2:    #6366f1;
  --purple:   #7c3aed;
  --green:    #22c55e;
  --red:      #ef4444;
  --yellow:   #f59e0b;
  --text:     #e2e8f0;
  --text2:    #94a3b8;
  --text3:    #475569;
  --glow-blue: rgba(59,130,246,0.3);
  --glow-purple: rgba(124,58,237,0.3);
  /* ── Системные переменные перехода и скруглений ── */
  --t-fast:   .15s ease;
  --t-base:   .2s ease;
  --t-slow:   .3s ease;
  --r-xs:     8px;
  --r-sm:     10px;
  --r-md:     12px;
  --r-lg:     16px;
  --r-xl:     20px;
  --r-2xl:    24px;
  --r-pill:   99px;
}

/* ═══ RESET & BASE ════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;-webkit-font-smoothing:antialiased}
/* ── Доступный фокус-стиль (замена outline:none) ── */
:focus-visible{outline:2px solid rgba(99,102,241,0.7);outline-offset:2px;border-radius:4px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.nav-btn:focus-visible{outline:2px solid rgba(99,102,241,0.7);outline-offset:2px}
html,body{margin:0;padding:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif;overflow:hidden}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(99,102,241,0.2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(99,102,241,0.4)}

/* ═══ TEXTURE OVERLAY ════════════════════════════════════════════════════════ */
body::before {
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(59,130,246,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 110%, rgba(124,58,237,0.05) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect width='1' height='1' x='0' y='0' fill='rgba(255,255,255,0.012)'/%3E%3C/svg%3E");
  background-size:100% 100%, 100% 100%, 32px 32px;
}

/* ═══ LOGIN ══════════════════════════════════════════════════════════════════ */
#login-screen{position:fixed;inset:0;background:var(--bg);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{
  background:linear-gradient(145deg, rgba(14,14,26,0.95) 0%, rgba(10,10,20,0.95) 100%);
  padding:40px 36px;border-radius:28px;
  border:1px solid rgba(99,102,241,0.2);
  width:100%;max-width:360px;text-align:center;
  box-shadow:0 32px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative;overflow:hidden;
}
.login-card::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(ellipse at center, rgba(99,102,241,0.04) 0%, transparent 60%);
  pointer-events:none;
}
.login-logo{font-size:30px;font-weight:900;font-style:italic;margin-bottom:4px;letter-spacing:-1px}
.login-logo span{background:linear-gradient(135deg,#3b82f6,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.login-sub{font-size:8px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:3px;margin-bottom:28px}
.login-card input{
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border2);
  color:var(--text);padding:13px 16px;border-radius:14px;margin-bottom:10px;
  font-size:14px;font-weight:500;transition:.2s;font-family:inherit;
}
.login-card input:focus{border-color:rgba(99,102,241,0.4);background:rgba(99,102,241,0.06);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}
.login-card input::placeholder{color:var(--text3)}
.login-card button{
  width:100%;
  background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  color:#fff;border:none;padding:14px;border-radius:14px;
  font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;
  transition:.2s;font-family:inherit;
  box-shadow:0 4px 20px rgba(99,102,241,0.4);
}
.login-card button:hover{filter:brightness(1.12);box-shadow:0 4px 30px rgba(99,102,241,0.6)}
.login-card button:active{transform:scale(.98)}
.login-err{min-height:18px;font-size:11px;margin-bottom:10px;font-weight:600;padding:7px 12px;border-radius:10px;display:none}
.login-err.show{display:block}
.login-err.error{color:var(--red);background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2)}
.login-err.warning{color:var(--yellow);background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2)}

/* ═══ APP SHELL ══════════════════════════════════════════════════════════════ */
#app{width:100%;height:100%;display:none;flex-direction:column;overflow:hidden;position:relative;z-index:1}
.card{
  background:linear-gradient(145deg, rgba(14,14,26,0.9) 0%, rgba(10,10,20,0.9) 100%);
  border:1px solid var(--border);border-radius:18px;overflow:hidden;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}

/* ═══ HEADER v8.6.0 — single band ═══════════════════════════════════════════ */
.panel-header{
  flex-shrink:0;display:flex;align-items:center;gap:12px;
  padding:9px 16px;margin:10px 10px 0;
  border-radius:18px;
}

/* Logo zone */
.hdr-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;min-width:0}
.hdr-logo-icon{
  width:36px;height:36px;flex-shrink:0;border-radius:11px;
  background:linear-gradient(135deg,#6366f1,#4f46e5);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#fff;
  box-shadow:0 4px 14px rgba(99,102,241,.4);
}
.hdr-brand-text{min-width:0}
.logo-text{font-size:17px;font-weight:900;font-style:italic;letter-spacing:-.5px;line-height:1;white-space:nowrap}
.logo-text span{background:linear-gradient(135deg,#3b82f6,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-ver{font-size:8px;color:var(--text3);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:2px}

/* Center zone: status + controls + stats */
.hdr-center{display:flex;align-items:center;gap:9px;flex:1;min-width:0;flex-wrap:wrap}
.status-pill{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.4);padding:5px 10px;border-radius:99px;border:1px solid var(--border2);flex-shrink:0}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);flex-shrink:0;transition:.4s}
.status-dot.online{background:var(--green);box-shadow:0 0 8px var(--green)}
.status-text{font-size:8px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;white-space:nowrap}
.ctrl-group{display:flex;align-items:center;gap:5px;flex-shrink:0}

/* Stats mini-bars */
.hdr-stats{display:flex;align-items:center;gap:8px;flex-shrink:0}
.stat-block{display:flex;flex-direction:column;align-items:center;gap:2px}
.stat-label{font-size:8px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.stat-bar-wrap{width:42px;height:24px;background:rgba(0,0,0,.5);border-radius:7px;border:1px solid var(--border2);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.stat-fill{position:absolute;bottom:0;left:0;width:100%;height:0%;transition:height .6s ease;opacity:.38;border-radius:1px}
.stat-val{position:relative;z-index:1;font-size:9px;font-weight:800;color:var(--text)}

/* Right zone: expiry + user + logout */
.hdr-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.expiry-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:9px;font-weight:700;white-space:nowrap;border:1px solid transparent;transition:.3s;cursor:default;flex-shrink:0}
.expiry-chip.eternal{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.22);color:#818cf8}
.expiry-chip.active{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.22);color:var(--green)}
.expiry-chip.expiring{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.22);color:var(--yellow)}
.expiry-chip.expired{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.22);color:var(--red)}

/* ═══ HORIZONTAL TAB NAV ═════════════════════════════════════════════════════ */
.tab-nav{
  flex-shrink:0;margin:6px 10px 0;padding:5px 8px;
  border-radius:16px;overflow:hidden;
}
.tab-nav-scroll{
  display:flex;align-items:center;gap:2px;
  overflow-x:auto;scrollbar-width:none;
}
.tab-nav-scroll::-webkit-scrollbar{display:none}

.nav-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:10px;
  cursor:pointer;font-size:11px;font-weight:600;color:var(--text3);
  transition:.15s;white-space:nowrap;flex-shrink:0;user-select:none;
  border:1px solid transparent;
}
.nav-btn i{font-size:12px;flex-shrink:0}
.nav-btn span{font-size:11px}
.nav-btn:hover{background:rgba(255,255,255,.05);color:var(--text2);border-color:var(--border2)}
.nav-btn.active{
  background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(99,102,241,.16));
  color:#818cf8;border-color:rgba(99,102,241,.25);
  box-shadow:0 2px 10px rgba(99,102,241,.15);
}
.nav-btn.admin-btn{color:#d97706}
.nav-btn.admin-btn.active{
  background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(217,119,6,.18));
  color:var(--yellow);border-color:rgba(245,158,11,.3);
  box-shadow:0 2px 10px rgba(245,158,11,.2);
}
.tnav-sep{width:1px;height:20px;background:var(--border2);margin:0 3px;flex-shrink:0}
.kill-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:10px;
  cursor:pointer;font-size:11px;font-weight:600;color:var(--red);
  transition:.15s;white-space:nowrap;flex-shrink:0;user-select:none;
  border:1px solid rgba(239,68,68,.15);
  margin-left:auto;
}
.kill-tab i{font-size:12px}
.kill-tab:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}

/* ═══ MAIN LAYOUT ════════════════════════════════════════════════════════════ */
.main-wrap{flex:1;padding:6px 10px 10px;min-height:0;overflow:hidden}

/* ═══ PANES ══════════════════════════════════════════════════════════════════ */
.content{height:100%;position:relative;overflow:hidden}
.pane{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden}
.pane.active{display:flex;animation:paneIn .15s ease}
@keyframes paneIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.pane-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px}

/* ═══ CONSOLE ════════════════════════════════════════════════════════════════ */
#pane-console{flex-direction:column;background:linear-gradient(rgba(2,2,8,0.72),rgba(2,2,8,0.86)),url(/img/bg/console.png) center/cover no-repeat}
#pane-players{background:linear-gradient(rgba(3,6,3,0.68),rgba(3,6,3,0.83)),url(/img/bg/players.png) center/cover no-repeat}
#pane-props{background:linear-gradient(rgba(4,2,10,0.70),rgba(4,2,10,0.84)),url(/img/bg/props.png) center/cover no-repeat}
#pane-scheduler{background:linear-gradient(rgba(8,5,2,0.68),rgba(6,4,2,0.83)),url(/img/bg/scheduler.png) center/cover no-repeat}
#pane-settings{background:linear-gradient(rgba(3,3,8,0.70),rgba(3,3,8,0.84)),url(/img/bg/settings.png) center/cover no-repeat}
#pane-ftp{background:linear-gradient(rgba(5,4,2,0.70),rgba(5,4,2,0.84)),url(/img/bg/ftp.png) center/cover no-repeat}
#pane-updates{background:linear-gradient(rgba(2,4,8,0.68),rgba(2,4,8,0.83)),url(/img/bg/updates.png) center/cover no-repeat}
#pane-admin{background:linear-gradient(rgba(7,3,2,0.70),rgba(7,3,2,0.85)),url(/img/bg/admin.png) center/cover no-repeat}
#pane-plugins{background:linear-gradient(rgba(2,5,10,0.70),rgba(2,5,10,0.85)),var(--surface)}
#log{
  flex:1;overflow-y:auto;
  padding:10px 14px 6px;
  font-family:'JetBrains Mono','Fira Code','Cascadia Code',monospace;
  font-size:11px;line-height:1.75;
  display:flex;flex-direction:column;gap:1px;
}
/* Шапка консоли */
.console-header{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:rgba(2,2,10,0.7);
  border-bottom:1px solid rgba(99,102,241,0.1);
  flex-shrink:0;
}
.console-header-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 8px #ef4444;transition:.4s}
.console-header-dot.live{background:#22c55e;box-shadow:0 0 8px #22c55e;animation:console-dot-pulse 2s ease-in-out infinite}
@keyframes console-dot-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.console-header-label{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
.console-header-status{font-size:9px;color:var(--text3);margin-left:auto}
/* Строки лога */
.log-line{
  display:flex;align-items:baseline;gap:7px;
  padding:2px 6px;border-radius:5px;
  transition:background .1s;
  white-space:pre-wrap;word-break:break-word;
}
.log-line:hover{background:rgba(255,255,255,0.025)}
.log-ts{font-size:9px;color:var(--text3);flex-shrink:0;opacity:.65;user-select:none}
.log-badge{
  display:inline-block;font-size:8px;font-weight:800;
  padding:1px 5px;border-radius:3px;
  letter-spacing:.09em;text-transform:uppercase;
  flex-shrink:0;line-height:1.6;
}
.log-badge-error{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.log-badge-warn {background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}
.log-badge-info {background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
.log-badge-done {background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
.log-badge-system{background:rgba(99,102,241,.12);color:#818cf8;border:1px solid rgba(99,102,241,.25)}
.log-msg{flex:1;min-width:0;font-size:11px;line-height:1.7}
.log-error .log-msg{color:#fca5a5}
.log-warn  .log-msg{color:#fcd34d}
.log-info  .log-msg{color:#86efac}
.log-done  .log-msg{color:#6ee7b7}
.log-system .log-msg{color:#a5b4fc}
.log-default .log-msg{color:#cbd5e1}
/* Fade-in для новых строк (только opacity+transform → GPU) */
@keyframes apanel-log-in{
  from{opacity:0;transform:translateX(-6px)}
  to  {opacity:1;transform:translateX(0)}
}
.log-in{animation:apanel-log-in .18s ease-out forwards}
/* Нижняя строка ввода */
.console-footer{
  padding:10px 14px;
  background:rgba(2,2,8,0.85);
  border-top:1px solid rgba(255,255,255,0.04);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.console-footer-prompt{color:rgba(99,102,241,.6);font-family:monospace;font-size:13px;font-weight:700;flex-shrink:0;user-select:none}
.console-footer input{flex:1;background:transparent;border:none;color:#818cf8;font-size:12px;font-weight:600;font-family:'JetBrains Mono',monospace;min-width:0;caret-color:#6366f1}
.console-footer input::placeholder{color:var(--text3)}
.console-footer button{
  background:rgba(255,255,255,0.04);border:1px solid var(--border2);color:var(--text3);
  padding:5px 10px;border-radius:8px;font-size:9px;font-weight:700;cursor:pointer;
  white-space:nowrap;flex-shrink:0;font-family:inherit;transition:.15s;
}
.console-footer button:hover{background:rgba(255,255,255,0.08);color:var(--text2)}


/* ═══ PLUGIN MANAGER ═════════════════════════════════════════════════════════ */
.pm-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.pm-tab{padding:7px 16px;border-radius:11px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;cursor:pointer;border:1px solid var(--border2);background:rgba(255,255,255,0.03);color:var(--text3);transition:.15s;font-family:inherit}
.pm-tab.active{background:linear-gradient(135deg,rgba(59,130,246,0.2),rgba(99,102,241,0.2));color:var(--blue);border-color:rgba(59,130,246,0.25)}
.pm-plat-btn{padding:5px 13px;border-radius:9px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;border:1px solid var(--border2);background:rgba(255,255,255,0.03);color:var(--text3);transition:.15s;font-family:inherit}
.pm-plat-btn.active{background:linear-gradient(135deg,rgba(139,92,246,0.2),rgba(59,130,246,0.15));color:#a78bfa;border-color:rgba(139,92,246,0.3)}
.pm-plat-btn:hover:not(.active){background:rgba(255,255,255,0.06);color:var(--text2)}
.pm-search-wrap{display:flex;gap:8px;margin-bottom:14px}
.pm-search-wrap input{flex:1}
.pm-plugin-list{display:flex;flex-direction:column;gap:8px}
.pm-plugin-item{
  background:rgba(255,255,255,0.025);border:1px solid var(--border2);border-radius:14px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;transition:.15s;
}
.pm-plugin-item:hover{border-color:rgba(99,102,241,0.2);background:rgba(99,102,241,0.04)}
.pm-plugin-icon{width:42px;height:42px;border-radius:10px;object-fit:cover;background:rgba(99,102,241,0.1);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--blue2);font-size:18px}
.pm-plugin-icon img{width:42px;height:42px;border-radius:10px;object-fit:cover}
.pm-plugin-info{flex:1;min-width:0}
.pm-plugin-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-plugin-desc{font-size:10px;color:var(--text3);margin-top:2px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pm-plugin-meta{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}
.pm-plugin-tag{font-size:8px;font-weight:700;padding:2px 7px;border-radius:5px;background:rgba(99,102,241,0.1);color:#818cf8;letter-spacing:.04em;text-transform:uppercase}
.pm-plugin-downloads{font-size:9px;color:var(--text3)}
.pm-plugin-actions{display:flex;flex-direction:column;gap:5px;flex-shrink:0;align-items:flex-end}
.pm-local-size{font-size:9px;color:var(--text3);margin-top:3px;text-align:right}
.pm-empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:12px;opacity:.7}
.pm-loading{text-align:center;padding:30px;color:var(--text3);font-size:12px}
.pm-pagination{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:8px;flex-wrap:wrap}
.pm-pagination-info{font-size:10px;color:var(--text3)}
/* Versions Modal */
#modal-plugin-versions .modal{max-width:480px}
.ver-list{display:flex;flex-direction:column;gap:7px;max-height:320px;overflow-y:auto}
.ver-item{background:rgba(255,255,255,0.025);border:1px solid var(--border2);border-radius:11px;padding:10px 13px;display:flex;align-items:center;gap:10px;transition:.15s}
.ver-item:hover{border-color:rgba(59,130,246,0.25)}
.ver-item-info{flex:1;min-width:0}
.ver-item-name{font-size:12px;font-weight:700;color:var(--text)}
.ver-item-meta{font-size:9px;color:var(--text3);margin-top:2px}

/* ═══ FORM ELEMENTS ══════════════════════════════════════════════════════════ */
.form-label{font-size:11px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px;display:block}
.form-input{
  background:rgba(255,255,255,0.03);border:1px solid var(--border2);color:var(--text);
  padding:10px 13px;border-radius:12px;width:100%;font-size:13px;font-weight:500;transition:.18s;font-family:inherit;
}
.form-input:focus{border-color:rgba(99,102,241,0.4);background:rgba(99,102,241,0.05);box-shadow:0 0 0 3px rgba(99,102,241,0.08)}
.form-input:disabled{opacity:.3;cursor:not-allowed;color:var(--text3)}
.form-input::placeholder{color:var(--text3)}
.form-select{
  background:rgba(255,255,255,0.03);border:1px solid var(--border2);color:var(--text);
  padding:10px 13px;border-radius:12px;width:100%;font-size:13px;font-weight:500;font-family:inherit;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2364748b' d='M5.5 7.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:32px;
}
.form-select option{background:#0e0e1a}

.prop-row{background:rgba(255,255,255,0.025);border:1px solid var(--border2);border-radius:12px;padding:10px 14px;margin-bottom:7px;transition:.15s}
.prop-row:hover{border-color:rgba(99,102,241,0.15)}
.prop-row label{display:block;font-size:7px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px}
.prop-row input{background:transparent;border:none;color:var(--text);width:100%;font-size:12px;font-weight:500;font-family:inherit}
.prop-row.locked{opacity:.4}
.prop-row.locked input{cursor:not-allowed;color:var(--text3)}

/* ═══ BUTTONS ════════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 15px;border-radius:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;border:none;transition:.18s;font-family:inherit;white-space:nowrap;flex-shrink:0}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;box-shadow:0 3px 14px rgba(99,102,241,0.3)}
.btn-primary:hover{filter:brightness(1.1);box-shadow:0 4px 20px rgba(99,102,241,0.45)}
.btn-danger{background:transparent;border:1px solid rgba(239,68,68,.25);color:var(--red)}
.btn-danger:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.4)}
.btn-ghost{background:rgba(255,255,255,0.04);border:1px solid var(--border2);color:var(--text2)}
.btn-ghost:hover{background:rgba(255,255,255,0.08);color:var(--text)}
.btn-warning{background:linear-gradient(135deg,#f59e0b,#d97706);color:#000;box-shadow:0 3px 12px rgba(245,158,11,.3)}
.btn-warning:hover{filter:brightness(1.08)}
.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);color:#000;box-shadow:0 3px 12px rgba(34,197,94,.3)}
.btn-success:hover{filter:brightness(1.08)}
.btn-purple{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;box-shadow:0 3px 12px rgba(124,58,237,.3)}
.btn-purple:hover{filter:brightness(1.08)}
.btn-sm{padding:6px 12px;font-size:9px}
.btn-xs{padding:4px 8px;font-size:8px;border-radius:9px}

/* ═══ PANE HEADER ════════════════════════════════════════════════════════════ */
.pane-title{font-size:11px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:18px;display:flex;align-items:center;gap:7px}
.pane-title i{color:var(--blue);opacity:.8}

/* ═══ PLAYER CARDS ═══════════════════════════════════════════════════════════ */
.player-card{
  background:rgba(255,255,255,0.025);border:1px solid var(--border2);border-radius:14px;
  padding:12px;display:flex;align-items:center;gap:9px;transition:.15s;
}
.player-card:hover{border-color:rgba(99,102,241,0.2);background:rgba(99,102,241,0.04)}
.player-avatar{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,rgba(59,130,246,0.15),rgba(99,102,241,0.15));
  display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:14px;flex-shrink:0;
  border:1px solid rgba(99,102,241,0.15);
}
.player-name{font-size:12px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══ ADMIN TABLE ════════════════════════════════════════════════════════════ */
.admin-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:-4px;padding:4px}
.admin-table{width:100%;border-collapse:separate;border-spacing:0 4px;min-width:900px}
.admin-table th{font-size:10px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:0 10px 8px;text-align:left;white-space:nowrap}
.admin-table td{
  background:rgba(255,255,255,0.025);padding:10px 10px;font-size:11px;font-weight:500;
  border:1px solid transparent;white-space:nowrap;transition:.15s;
}
.admin-table tr:hover td{background:rgba(99,102,241,0.04)}
.admin-table td:first-child{border-radius:12px 0 0 12px;border-left:1px solid var(--border2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}
.admin-table td:last-child{border-radius:0 12px 12px 0;border-right:1px solid var(--border2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}
.admin-table td:not(:first-child):not(:last-child){border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}

.role-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.role-admin{background:rgba(245,158,11,.1);color:var(--yellow);border:1px solid rgba(245,158,11,.2)}
.role-user{background:rgba(59,130,246,.08);color:var(--blue);border:1px solid rgba(59,130,246,.18)}

.status-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:99px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.status-active{background:rgba(34,197,94,.08);color:var(--green);border:1px solid rgba(34,197,94,.18)}
.status-blocked{background:rgba(239,68,68,.08);color:var(--red);border:1px solid rgba(239,68,68,.18)}
.status-expired{background:rgba(245,158,11,.08);color:var(--yellow);border:1px solid rgba(245,158,11,.18)}

.port-badge{
  display:inline-block;padding:2px 8px;border-radius:7px;font-size:10px;font-weight:700;
  font-family:'JetBrains Mono',monospace;
  background:rgba(99,102,241,0.08);border:1px solid rgba(99,102,241,0.15);color:#818cf8;
}

.cpu-badge{
  display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:7px;font-size:9px;font-weight:700;
  background:rgba(124,58,237,0.1);border:1px solid rgba(124,58,237,0.2);color:#a78bfa;
  font-family:'JetBrains Mono',monospace;
}

/* ═══ TOGGLE ═════════════════════════════════════════════════════════════════ */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.toggle-row:last-child{border-bottom:none}
.toggle-label{font-size:12px;font-weight:600;color:var(--text)}
.toggle-sub{font-size:10px;color:var(--text3);margin-top:2px}
input[type="checkbox"].toggle{width:36px;height:20px;appearance:none;background:rgba(255,255,255,0.08);border:1px solid var(--border2);border-radius:99px;cursor:pointer;position:relative;transition:.22s;flex-shrink:0}
input[type="checkbox"].toggle:checked{background:linear-gradient(135deg,#3b82f6,#6366f1);border-color:transparent;box-shadow:0 0 10px rgba(99,102,241,0.4)}
input[type="checkbox"].toggle::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.22s;box-shadow:0 1px 4px rgba(0,0,0,.4)}
input[type="checkbox"].toggle:checked::after{left:18px}

/* ═══ FTP ════════════════════════════════════════════════════════════════════ */
.ftp-info{background:rgba(255,255,255,0.025);border:1px solid var(--border2);border-radius:16px;padding:20px;margin-bottom:14px}
.ftp-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);gap:10px}
.ftp-row:last-child{border-bottom:none}
.ftp-key{font-size:11px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.8px;flex-shrink:0}
.ftp-val{font-size:12px;font-weight:700;color:var(--text);font-family:'JetBrains Mono',monospace;word-break:break-all;text-align:right}

/* ═══ FILE MANAGER ════════════════════════════════════════════════════════════ */
.fm-wrap{display:flex;flex-direction:column;height:100%;overflow:hidden}
.fm-toolbar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:rgba(0,0,0,0.35);border-bottom:1px solid var(--border2);flex-shrink:0;flex-wrap:wrap}
.fm-breadcrumb{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow:hidden;font-size:11px;font-weight:600;font-family:'JetBrains Mono',monospace;color:var(--text2)}
.fm-crumb{color:var(--blue);cursor:pointer;white-space:nowrap;transition:.15s}
.fm-crumb:hover{color:#fff}
.fm-crumb-sep{color:var(--text3);user-select:none}
.fm-crumb-cur{color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-list{flex:1;overflow-y:auto;padding:8px 14px 14px}
.fm-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;border:1px solid transparent;transition:.15s;cursor:default;position:relative}
.fm-item:hover{background:rgba(255,255,255,0.04);border-color:var(--border2)}
.fm-item-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.fm-item-icon.dir{background:rgba(245,158,11,0.12);color:#f59e0b}
.fm-item-icon.file{background:rgba(99,102,241,0.1);color:#818cf8}
.fm-item-icon.zip{background:rgba(34,197,94,0.1);color:#22c55e}
.fm-item-icon.jar{background:rgba(239,68,68,0.1);color:#ef4444}
.fm-item-icon.phar{background:rgba(124,58,237,0.12);color:#a78bfa}
.fm-item-icon.img{background:rgba(59,130,246,0.1);color:#60a5fa}
.fm-item-icon.cfg{background:rgba(148,163,184,0.1);color:#94a3b8}
.fm-item-name{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.fm-item-name.dir-name:hover{color:var(--yellow)}
.fm-item-meta{font-size:9px;color:var(--text3);white-space:nowrap;flex-shrink:0;text-align:right;line-height:1.6}
.fm-actions{display:flex;gap:4px;flex-shrink:0;opacity:0;transition:.15s}
.fm-item:hover .fm-actions{opacity:1}
/* На тач-устройствах кнопки файлового менеджера всегда видны */
@media(hover:none){.fm-actions{opacity:1}}
.fm-act-btn{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border2);background:rgba(255,255,255,0.03);color:var(--text3);cursor:pointer;font-size:11px;transition:.15s}
.fm-act-btn:hover{background:rgba(255,255,255,0.09);color:var(--text)}
.fm-act-btn.del:hover{background:rgba(239,68,68,0.15);color:var(--red);border-color:rgba(239,68,68,.2)}
.fm-empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:12px}
.fm-empty i{font-size:28px;margin-bottom:10px;opacity:.3;display:block}
.fm-drop-zone{border:2px dashed rgba(99,102,241,0.3);border-radius:14px;padding:20px;text-align:center;color:var(--text3);font-size:11px;margin:10px 0;transition:.2s;cursor:pointer}
.fm-drop-zone:hover,.fm-drop-zone.drag-over{border-color:rgba(99,102,241,0.7);background:rgba(99,102,241,0.06);color:var(--text2)}
.fm-upload-progress{height:3px;background:rgba(255,255,255,0.07);border-radius:2px;margin-top:6px;overflow:hidden;display:none}
.fm-upload-progress-bar{height:100%;background:linear-gradient(90deg,#3b82f6,#7c3aed);width:0%;transition:width .3s;border-radius:2px}
.fm-section-title{font-size:8px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;padding:10px 14px 6px;flex-shrink:0}
.fm-ftp-collapse{cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 14px;color:var(--text3);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;flex-shrink:0;border-top:1px solid var(--border2);transition:.15s;margin-top:4px}
.fm-ftp-collapse:hover{color:var(--text2);background:rgba(255,255,255,0.02)}
.fm-ftp-panel{padding:0 14px 14px;display:none;flex-shrink:0}

/* ═══ UPDATE ═════════════════════════════════════════════════════════════════ */
.upd-card{background:rgba(255,255,255,0.025);border:1px solid var(--border2);border-radius:16px;padding:20px}
.ver-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.ver-row:last-child{border-bottom:none}
.ver-key{font-size:9px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.ver-tag{font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;background:rgba(99,102,241,0.08);padding:3px 10px;border-radius:7px;border:1px solid rgba(99,102,241,0.15);color:#818cf8}
.progress-wrap{width:100%;height:4px;background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden;margin-top:16px;display:none}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#3b82f6,#7c3aed);transition:width .3s;border-radius:99px}

/* ═══ MODAL ══════════════════════════════════════════════════════════════════ */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:2000;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(12px)}
.modal-bg.open{display:flex}
.modal{
  background:linear-gradient(145deg, rgba(14,14,26,0.98) 0%, rgba(8,8,18,0.98) 100%);
  border:1px solid rgba(99,102,241,0.2);
  border-radius:24px;padding:26px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;
  box-shadow:0 32px 80px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  animation:modalIn .15s ease;
}
@keyframes modalIn{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.modal-footer{display:flex;gap:8px;margin-top:20px;justify-content:flex-end;flex-wrap:wrap}
.form-row{margin-bottom:13px}

/* ═══ PERMISSIONS ════════════════════════════════════════════════════════════ */
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.perm-item{background:rgba(255,255,255,0.025);border:1px solid var(--border2);border-radius:12px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;transition:.15s}
.perm-item:hover{border-color:rgba(99,102,241,0.2)}
.perm-name{font-size:11px;font-weight:600;color:var(--text)}
.time-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ═══ SETTINGS SECTION ═══════════════════════════════════════════════════════ */
.settings-section{
  background:rgba(255,255,255,0.025);border:1px solid var(--border2);border-radius:16px;padding:20px;margin-bottom:13px;
  transition:.15s;
}
.settings-section:hover{border-color:rgba(99,102,241,0.15)}
.settings-section-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;display:flex;align-items:center;gap:6px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}

/* ═══ EXPIRY BANNER ══════════════════════════════════════════════════════════ */
.expiry-banner{padding:10px 15px;border-radius:12px;font-size:11px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.expiry-banner.active{background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.18);color:var(--green)}
.expiry-banner.expiring{background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.18);color:var(--yellow)}
.expiry-banner.eternal{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.18);color:#818cf8}
.expiry-banner.expired-b{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.18);color:var(--red)}

/* ═══ LANGUAGE SWITCHER ══════════════════════════════════════════════════════ */
.lang-btn-group{display:flex;gap:6px}
.lang-btn{padding:6px 14px;border-radius:10px;font-size:10px;font-weight:700;cursor:pointer;border:1px solid var(--border2);background:rgba(255,255,255,0.03);color:var(--text3);transition:.18s;font-family:inherit}
.lang-btn.active{background:linear-gradient(135deg,rgba(59,130,246,0.15),rgba(99,102,241,0.15));border-color:rgba(99,102,241,0.3);color:var(--blue)}
.lang-btn:hover{border-color:rgba(99,102,241,0.2);color:var(--text2)}

/* ═══ DISK QUOTA BAR ═════════════════════════════════════════════════════════ */
.quota-bar-wrap{height:6px;background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden;margin-top:7px}
.quota-bar-fill{height:100%;border-radius:99px;transition:width .5s ease}
.quota-info{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin-top:4px}
.smtp-test-result{margin-top:9px;font-size:11px;font-weight:600;padding:7px 12px;border-radius:9px;display:none}
.smtp-test-result.ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:var(--green)}
.smtp-test-result.err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:var(--red)}

/* ═══ CPU PRESET BUTTONS ═════════════════════════════════════════════════════ */
.cpu-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.cpu-preset{
  padding:5px 11px;border-radius:9px;font-size:9px;font-weight:700;cursor:pointer;
  border:1px solid rgba(124,58,237,0.2);background:rgba(124,58,237,0.07);color:#a78bfa;
  transition:.15s;font-family:inherit;text-transform:uppercase;letter-spacing:.05em;
}
.cpu-preset:hover{background:rgba(124,58,237,0.15);border-color:rgba(124,58,237,0.4)}
.cpu-preset.active{background:linear-gradient(135deg,rgba(124,58,237,0.3),rgba(99,102,241,0.3));border-color:rgba(124,58,237,0.5);color:#c4b5fd}

/* ═══ MOBILE BOTTOM NAV ══════════════════════════════════════════════════════ */
.mobile-nav{display:none;flex-shrink:0}
.mobile-nav-inner{
  display:flex;align-items:stretch;
  background:linear-gradient(0deg, rgba(12,12,22,0.98) 0%, rgba(8,8,18,0.96) 100%);
  border-top:1px solid var(--border2);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.mobile-nav-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:10px 4px;cursor:pointer;color:var(--text3);
  font-size:17px;transition:.18s;flex:1;user-select:none;min-width:0;
}
.mobile-nav-btn span{font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.mobile-nav-btn.active{color:#818cf8}
.mobile-nav-btn.admin-mobile{color:#d97706}
.mobile-nav-btn.admin-mobile.active{color:var(--yellow)}
.mobile-kill-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:10px 4px;cursor:pointer;color:var(--red);
  font-size:17px;flex:1;user-select:none;
  border-left:1px solid rgba(239,68,68,.1);
}
.mobile-kill-btn span{font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}

/* ═══ TOAST ══════════════════════════════════════════════════════════════════ */
.toast{
  position:fixed;
  bottom:20px;
  right:16px;z-index:9999;
  padding:10px 18px;border-radius:13px;font-size:12px;font-weight:700;max-width:300px;
  box-shadow:0 8px 30px rgba(0,0,0,.7);
  animation:toastIn .2s ease;pointer-events:none;
  backdrop-filter:blur(12px);
}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ═══ USERNAME LABEL ═════════════════════════════════════════════════════════ */
.header-username{font-size:10px;font-weight:700;color:var(--text3);white-space:nowrap;flex-shrink:0}

/* ═══ LOGOUT BTN ═════════════════════════════════════════════════════════════ */
.logout-btn{
  background:rgba(239,68,68,0.06);border:1px solid rgba(239,68,68,0.15);color:rgba(239,68,68,0.6);
  padding:6px 10px;border-radius:10px;font-size:9px;font-weight:700;cursor:pointer;
  white-space:nowrap;flex-shrink:0;font-family:inherit;transition:.18s;
}
.logout-btn:hover{background:rgba(239,68,68,0.12);color:var(--red);border-color:rgba(239,68,68,0.3)}

/* ═══ INFO BANNER ════════════════════════════════════════════════════════════ */
.info-banner{
  background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.18);border-radius:12px;
  padding:10px 13px;font-size:10px;color:var(--yellow);margin-bottom:12px;line-height:1.6;
}

/* ═══ RESPONSIVE — LARGE DESKTOP ════════════════════════════════════════════ */
@media(min-width:1200px){
  .tab-nav{margin:6px 10px 0}
}

/* ═══ RESPONSIVE — TABLET ════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .hdr-stats{gap:6px}
  .stat-bar-wrap{width:38px!important}
  .pane-scroll{padding:14px}
}
@media(max-width:900px){
  .logo-ver{display:none}
  .hdr-stats{display:none}
  .nav-btn span{font-size:10px}
}
@media(max-width:780px){
  .nav-btn span{display:none}
  .kill-tab span{display:none}
  .nav-btn{padding:7px 10px}
  .kill-tab{padding:7px 10px}
  .status-text{display:none}
  .header-username{font-size:9px}
}

/* ═══ RESPONSIVE — MOBILE (<600px) ══════════════════════════════════════════ */
@media(max-width:600px){
  html,body{overflow:hidden;height:100dvh}
  #app{height:100dvh;padding:0;gap:0}
  .panel-header{
    margin:6px 6px 0;padding:8px 10px;gap:8px;border-radius:14px;
  }
  .hdr-logo-icon{width:30px;height:30px;font-size:14px;border-radius:9px}
  .logo-text{font-size:15px}
  .logo-ver{display:none}
  .hdr-stats{display:none}
  .header-username{display:none}
  .hdr-right{gap:6px}
  .expiry-chip span{display:none}
  .tab-nav{display:none}
  .main-wrap{flex:1;min-height:0;padding:6px 6px 0}
  .content{border-radius:14px 14px 0 0}
  .pane-scroll{padding:12px}
  #log{font-size:10px;padding:10px 12px;line-height:1.7}
  .mobile-nav{display:block}
  .settings-grid{grid-template-columns:1fr}
  .perm-grid{grid-template-columns:1fr}
  .time-grid{grid-template-columns:1fr 1fr}
  .admin-table-wrap{overflow-x:auto}
  .toast{bottom:calc(64px + env(safe-area-inset-bottom,0px));right:10px;left:10px;max-width:none;text-align:center}
  .console-footer input{font-size:11px}
}

@media(max-width:400px){
  .login-card{padding:24px 16px}
  .logo-text{font-size:13px}
  .panel-header{padding:6px 8px}
  .mobile-nav-btn{font-size:15px}
}

@media(max-width:900px) and (orientation:landscape) and (max-height:480px){
  .panel-header{margin:4px 6px 0;padding:5px 10px;border-radius:12px}
  .tab-nav{display:none}
  .mobile-nav{display:block}
  .mobile-nav-btn,.mobile-kill-btn{padding:5px 4px}
  .mobile-nav-btn span,.mobile-kill-btn span{display:none}
  .pane-scroll{padding:8px 12px}
  #log{font-size:9px;padding:8px 10px}
  .main-wrap{padding:4px 6px 0}
  .content{border-radius:10px 10px 0 0}
}

/* ═══ PANEL LOADING OVERLAY ══════════════════════════════════════════════════ */
#panel-loading{
  position:fixed;inset:0;z-index:900;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;
  transition:opacity .35s ease, visibility .35s ease;
}
#panel-loading.hidden{opacity:0;visibility:hidden;pointer-events:none}
.pl-logo{font-size:26px;font-weight:900;font-style:italic;letter-spacing:-1px;margin-bottom:4px}
.pl-logo span{background:linear-gradient(135deg,#3b82f6,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pl-bar-wrap{width:220px;height:3px;background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden}
.pl-bar{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#3b82f6,#7c3aed);transition:width .4s ease;box-shadow:0 0 12px rgba(99,102,241,0.6)}
.pl-step{font-size:10px;color:var(--text3);font-weight:600;letter-spacing:.08em;min-height:16px;text-align:center}
.pl-skeleton{display:flex;gap:10px;width:min(92vw,540px);margin-top:8px}
.pl-skel-side{width:44px;flex-shrink:0;display:flex;flex-direction:column;gap:8px}
.pl-skel-box{background:rgba(255,255,255,0.04);border-radius:10px;animation:plPulse 1.6s ease-in-out infinite}
.pl-skel-main{flex:1;display:flex;flex-direction:column;gap:8px}
.pl-skel-header{height:36px;border-radius:10px}
.pl-skel-card{border-radius:12px}
@keyframes plPulse{
  0%,100%{opacity:.35}
  50%{opacity:.7}
}

/* ═══ SERVER STATUS BADGES (admin table) ═════════════════════════════════════ */
.srv-online{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:99px;font-size:8px;font-weight:700;background:rgba(34,197,94,.1);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
.srv-online i{font-size:6px;animation:srvPulse 2s ease-in-out infinite}
.srv-offline{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:99px;font-size:8px;font-weight:700;background:rgba(100,116,139,.08);color:var(--text3);border:1px solid rgba(100,116,139,.15)}
@keyframes srvPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ═══ TARIFF TEMPLATES ═══════════════════════════════════════════════════════ */
.tariff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px}
.tariff-card{
  border-radius:12px;padding:10px 8px;cursor:pointer;text-align:center;
  border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);
  transition:.18s;user-select:none;
}
.tariff-card:hover{background:rgba(99,102,241,0.1);border-color:rgba(99,102,241,0.3);transform:translateY(-1px)}
.tariff-card.selected{background:rgba(99,102,241,0.18);border-color:rgba(99,102,241,0.5);box-shadow:0 0 16px rgba(99,102,241,0.25)}
.tariff-card.free-plan{border-color:rgba(34,197,94,0.25)}
.tariff-card.free-plan.selected{background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.5);box-shadow:0 0 16px rgba(34,197,94,0.2)}
.tariff-name{font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px}
.tariff-price{font-size:13px;font-weight:900;margin-bottom:5px;line-height:1}
.tariff-price sup{font-size:8px;vertical-align:super}
.tariff-price span{font-size:7px;color:var(--text3);font-weight:500;vertical-align:baseline}
.tariff-specs{font-size:7px;color:var(--text3);line-height:1.6}
.tariff-specs b{color:var(--text2)}

/* ═══ AD BANNER ══════════════════════════════════════════════════════════════ */
#ad-banner{
  display:none;flex-shrink:0;
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(99,102,241,0.1);
  cursor:pointer;
}
#ad-banner.visible{display:block}
#ad-banner img{width:100%;height:auto;display:block;max-height:120px;object-fit:cover}
#ad-banner .ad-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(2,2,6,0.85) 100%);
  display:flex;align-items:flex-end;padding:8px 12px;gap:8px;
}
#ad-banner .ad-label{
  background:rgba(99,102,241,0.25);border:1px solid rgba(99,102,241,0.35);
  color:#818cf8;font-size:7px;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;padding:2px 7px;border-radius:99px;flex-shrink:0;
}
#ad-banner .ad-text{font-size:10px;color:var(--text2);font-weight:500;line-height:1.3}
#ad-banner .ad-close{
  position:absolute;top:6px;right:8px;
  background:rgba(0,0,0,0.5);border:none;color:var(--text3);
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9px;cursor:pointer;transition:.15s;
}
#ad-banner .ad-close:hover{background:rgba(239,68,68,0.3);color:var(--red)}

/* ═══ ADMIN SUB-TABS ════════════════════════════════════════════════════════ */
.admin-subtabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--border2);padding-bottom:8px;flex-wrap:wrap}
.admin-subtab{background:none;border:1px solid transparent;border-radius:8px;padding:5px 14px;font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;transition:.15s;display:flex;align-items:center;gap:5px}
.admin-subtab:hover{background:rgba(99,102,241,0.08);color:var(--text2)}
.admin-subtab.active{background:rgba(99,102,241,0.12);border-color:rgba(99,102,241,0.3);color:var(--blue)}


/* ═══ SHOP ════════════════════════════════════════════════════════════════════ */
/* Shop cards use .shop-tariff-card to avoid conflict with admin .tariff-card */
.shop-tariff-card{background:linear-gradient(145deg,rgba(14,14,26,0.95),rgba(10,10,20,0.95));border:1px solid rgba(99,102,241,0.15);border-radius:20px;padding:24px;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.shop-tariff-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.4)}
.shop-tariff-card.selected{box-shadow:0 0 0 2px var(--accent-color,var(--green))}
.shop-tariff-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-color,#22c55e)}
.shop-tariff-price{font-size:32px;font-weight:800;line-height:1}
.shop-tariff-period{font-size:12px;color:var(--text3)}
.shop-tariff-feature{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);padding:4px 0}
.order-card{background:rgba(14,14,26,0.8);border:1px solid rgba(99,102,241,0.12);border-radius:14px;padding:16px;margin-bottom:10px}
.order-status-pending{color:#f59e0b;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.2);padding:2px 10px;border-radius:99px;font-size:10px;font-weight:700}
.order-status-confirmed{color:#22c55e;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2);padding:2px 10px;border-radius:99px;font-size:10px;font-weight:700}
.order-status-rejected{color:#ef4444;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);padding:2px 10px;border-radius:99px;font-size:10px;font-weight:700}

/* ═══ ADS TABLE ════════════════════════════════════════════════════════════ */
.ads-thumb{width:80px;height:22px;object-fit:cover;border-radius:4px;vertical-align:middle;border:1px solid var(--border2)}
.ad-status-badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.ad-status-badge.on{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.ad-status-badge.off{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.2)}

/* ═══ A-PANEL ANIMATIONS — GPU-Optimised ════════════════════════════════════
   Правило: анимируем ТОЛЬКО transform и opacity.
   Они выполняются на compositor-thread без перерисовки (repaint/layout).
   box-shadow, border-color, color — НЕ анимируем напрямую в keyframes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────────────────────────────── */

/* Вращение градиента рамки (compositor: transform) */
@keyframes apanel-spin {
  to { transform: rotate(1turn); }
}

/* Шиммер логотипа (compositor: background-position) */
@keyframes apanel-shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* Универсальное появление/исчезание свечения (compositor: opacity) */
@keyframes apanel-glow {
  0%,100% { opacity: 0;    }
  50%      { opacity: 1;    }
}

/* Мягкое свечение карточек — чуть приглушённее */
@keyframes apanel-card-glow {
  0%,100% { opacity: 0;    }
  50%      { opacity: 0.55; }
}

/* ── Вращающаяся рамка логин-карточки ─────────────────────────────────────── */
.login-border-wrap {
  position: relative;
  border-radius: 30px;
  padding: 2px;
  overflow: hidden;
  width: 100%;
  max-width: 364px;
  /* Изолируем перекраску внутри блока */
  contain: layout style paint;
}

/* Слой 1 — основной вращающийся конический градиент */
.login-border-wrap::before {
  content: '';
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #3b82f6  0deg,
    #6366f1  60deg,
    #a855f7 144deg,
    #ec4899 180deg,
    #a855f7 216deg,
    #6366f1 288deg,
    #3b82f6 360deg
  );
  animation: apanel-spin 6s linear infinite;
  will-change: transform;
  z-index: 0;
}

/* Слой 2 — размытый гало-эффект (статический blur, меняется только opacity) */
.login-border-wrap::after {
  content: '';
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #3b82f6, #a855f7, #ec4899, #a855f7, #3b82f6
  );
  filter: blur(18px);
  opacity: 0;
  animation: apanel-spin 6s linear infinite,
             apanel-glow  3s ease-in-out infinite;
  will-change: transform, opacity;
  z-index: 0;
}

/* Контент поверх обоих слоёв */
.login-border-wrap .login-card {
  position: relative;
  z-index: 1;
  border: none;
  width: 100%;
  max-width: none;
}

/* ── Шиммер логотипа ────────────────────────────────────────────────────────
   display:inline-block нужен, чтобы background-position работало корректно */
.login-logo span,
.logo-text span {
  display: inline-block;
  background: linear-gradient(
    90deg,
    #3b82f6  0%,
    #818cf8 20%,
    #a855f7 40%,
    #ec4899 50%,
    #a855f7 60%,
    #818cf8 80%,
    #3b82f6 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: apanel-shimmer 3.5s linear infinite;
  will-change: background-position;
}

/* ── Активная кнопка меню — свечение через opacity на ::after слое ──────────
   box-shadow статичен (рисуется один раз), меняется только opacity → 0 repaint */
.nav-btn {
  isolation: isolate; /* создаём stacking context, чтобы ::after не вылезал */
}
.nav-btn.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Статичный итоговый glow — браузер растрирует его один раз */
  box-shadow:
    0 0 0 1.5px rgba(99,102,241,.65),
    0 4px 22px   rgba(99,102,241,.45),
    0 0  50px    rgba(99,102,241,.18);
  opacity: 0;
  animation: apanel-glow 2.8s ease-in-out infinite;
  will-change: opacity;
  pointer-events: none;
  z-index: -1;
}

/* Admin-кнопка — янтарное свечение */
.nav-btn.admin-btn.active::after {
  box-shadow:
    0 0 0 1.5px rgba(245,158,11,.65),
    0 4px 22px   rgba(245,158,11,.4),
    0 0  50px    rgba(245,158,11,.18);
}

/* ── Карточки — статичная светящаяся рамка ──────────────────────────────── */
.card {
  background: linear-gradient(145deg,rgba(14,14,26,0.93) 0%,rgba(10,10,20,0.93) 100%) !important;
  border: 1px solid rgba(99,102,241,0.22) !important;
}

/* ── Уважаем системную настройку «уменьшить движение» ──────────────────────
   Пользователи с epilepsy / motion-sensitivity получат статичный UI          */
@media (prefers-reduced-motion: reduce) {
  .login-border-wrap::before,
  .login-border-wrap::after,
  .nav-btn.active::after,
  .nav-btn.admin-btn.active::after,
  .card { border-color: rgba(99,102,241,0.3) !important; }
  .login-logo span,
  .logo-text span {
    animation: none;
    background-position: 0 center;
  }
}

/* ═══ SNAKE BORDER ANIMATION ════════════════════════════════════════════════ */

/* ═══ TUTORIAL OVERLAY ═══════════════════════════════════════════════════════ */
#tutorial-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.82);z-index:9000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#tutorial-card{background:linear-gradient(145deg,rgba(14,14,30,0.98),rgba(8,8,20,0.98));border:1px solid rgba(99,102,241,0.35);border-radius:20px;width:min(680px,92vw);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,0.7),0 0 0 1px rgba(99,102,241,0.1)}
#tutorial-img-wrap{position:relative;height:200px;overflow:hidden}
#tutorial-img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .4s}
#tutorial-img-overlay{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(8,8,20,0.98) 100%)}
#tutorial-icon-badge{position:absolute;bottom:16px;left:20px;display:flex;align-items:center;gap:10px}
#tutorial-icon-badge .tut-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid rgba(255,255,255,0.15)}
#tutorial-icon-badge .tut-name{font-size:18px;font-weight:800;color:#e2e8f0;letter-spacing:-.3px}
#tutorial-body{padding:20px 24px 24px}
#tutorial-step-dots{display:flex;gap:7px;margin-bottom:14px}
.tut-dot{width:28px;height:4px;border-radius:2px;background:rgba(99,102,241,0.2);transition:.3s}
.tut-dot.active{background:#6366f1;width:40px}
.tut-dot.done{background:rgba(99,102,241,0.5)}
#tutorial-desc{font-size:14px;color:#94a3b8;line-height:1.65;margin-bottom:22px;min-height:60px}
#tutorial-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
#tutorial-skip{background:none;border:none;color:rgba(100,116,139,0.7);font-size:13px;cursor:pointer;padding:8px;transition:.2s;font-family:inherit}
#tutorial-skip:hover{color:#94a3b8}
#tutorial-next{background:linear-gradient(135deg,#4f46e5,#7c3aed);border:none;color:#fff;border-radius:12px;padding:11px 28px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;font-family:inherit;box-shadow:0 4px 20px rgba(99,102,241,0.35)}
#tutorial-next:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(99,102,241,0.45)}
#tutorial-counter{font-size:12px;color:rgba(100,116,139,0.6);font-weight:600}


/* ═══ SHOP OVERLAY ═══════════════════════════════════════════════════════════ */
.shop-overlay{display:none;position:fixed;inset:0;z-index:2000;background:rgba(4,4,12,0.97);overflow-y:auto;padding:20px}
.shop-overlay.open{display:block}
.shop-inner{max-width:1100px;margin:0 auto}
.shop-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid rgba(99,102,241,0.15)}
.shop-heading{font-size:22px;font-weight:800;color:#e2e8f0;letter-spacing:-.5px}
.shop-heading-sub{font-size:13px;color:#64748b;margin-top:4px}
.shop-close-btn{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.25);color:#ef4444;border-radius:10px;padding:8px 16px;cursor:pointer;font-size:13px;font-weight:600}
.shop-form-card{background:linear-gradient(145deg,rgba(14,14,26,0.95),rgba(10,10,20,0.95));border:1px solid rgba(99,102,241,0.2);border-radius:20px;padding:28px}
.shop-back-btn{background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);color:#94a3b8;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:12px}
.shop-form-title{font-size:16px;font-weight:700;color:#e2e8f0}
.shop-selected-info{border-radius:12px;padding:14px;margin-bottom:20px;background:rgba(34,197,94,0.06);border:1px solid rgba(34,197,94,0.15)}
.shop-field-label{font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px}
.shop-text-input{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(99,102,241,0.2);border-radius:10px;padding:10px 14px;color:#e2e8f0;font-size:13px;box-sizing:border-box;font-family:inherit}
.shop-text-input:focus{border-color:rgba(99,102,241,0.5);outline:none;box-shadow:0 0 0 3px rgba(99,102,241,0.1)}
.shop-payment-card{border-radius:12px;padding:16px;background:rgba(59,130,246,0.07);border:1px solid rgba(59,130,246,0.2);margin-bottom:0}
.shop-payment-title{font-size:11px;font-weight:700;color:#3b82f6;text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px}
.shop-payment-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:rgba(255,255,255,0.04);border-radius:8px;margin-bottom:6px}
.shop-payment-key{font-size:12px;color:#64748b}
.shop-payment-val{font-size:13px;font-weight:700;color:#e2e8f0}
.shop-payment-phone{font-size:14px;font-weight:800;color:#22c55e;cursor:pointer}
.shop-payment-note{margin-top:10px;font-size:11px;color:#64748b;line-height:1.5}
.shop-upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed rgba(99,102,241,0.25);border-radius:12px;padding:20px;cursor:pointer;color:#64748b;font-size:12px;transition:.2s}
.shop-upload-label:hover{border-color:rgba(99,102,241,0.5);background:rgba(99,102,241,0.04)}
.shop-upload-icon{font-size:20px;color:#6366f1}
.shop-upload-name{color:#22c55e;font-weight:600}
.shop-error{display:none;color:#ef4444;font-size:12px;padding:8px 12px;background:rgba(239,68,68,0.08);border-radius:8px;border:1px solid rgba(239,68,68,0.2)}
.shop-submit-btn{width:100%;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;color:#fff;border-radius:12px;padding:13px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;box-shadow:0 4px 16px rgba(34,197,94,0.25)}
.shop-submit-btn:hover{filter:brightness(1.08)}
.shop-submit-btn:disabled{opacity:.5;cursor:not-allowed}
.shop-success{display:none;text-align:center;padding:60px 20px}
.shop-success-icon{font-size:56px;margin-bottom:16px}
.shop-success-title{font-size:22px;font-weight:800;color:#e2e8f0;margin-bottom:8px}
.shop-success-text{font-size:14px;color:#64748b;max-width:400px;margin:0 auto 24px}
.shop-success-close{background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.3);color:#22c55e;border-radius:12px;padding:10px 24px;cursor:pointer;font-size:14px;font-weight:600}

/* ═══ RENEWAL OVERLAY ════════════════════════════════════════════════════════ */
.renewal-overlay{display:none;position:fixed;inset:0;z-index:2000;background:rgba(4,4,12,0.97);overflow-y:auto;padding:20px}
.renewal-overlay.open{display:block}
.renewal-inner{max-width:780px;margin:0 auto}
.renewal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid rgba(99,102,241,0.15)}
.renewal-heading{font-size:22px;font-weight:800;color:#e2e8f0;letter-spacing:-.5px}
.renewal-heading-sub{font-size:13px;color:#64748b;margin-top:4px}
.renewal-close-btn{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.25);color:#ef4444;border-radius:10px;padding:8px 16px;cursor:pointer;font-size:13px;font-weight:600}
.renewal-section-label{font-size:12px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px}
.renewal-payment-card{border-radius:14px;padding:18px;background:rgba(59,130,246,0.07);border:1px solid rgba(59,130,246,0.2);margin-bottom:18px}
.renewal-payment-title{font-size:11px;font-weight:700;color:#3b82f6;text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px}
.renewal-payment-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:rgba(255,255,255,0.04);border-radius:8px;margin-bottom:6px}
.renewal-payment-key{font-size:12px;color:#64748b}
.renewal-payment-val{font-size:13px;font-weight:700;color:#e2e8f0}
.renewal-payment-phone{font-size:14px;font-weight:800;color:#22c55e;cursor:pointer}
.renewal-price-hint{padding:10px 12px;background:rgba(99,102,241,0.08);border-radius:8px;border:1px solid rgba(99,102,241,0.2);font-size:13px;font-weight:700;color:#818cf8;text-align:center;display:none}
.renewal-payment-note{margin-top:10px;font-size:11px;color:#64748b;line-height:1.5}
.renewal-upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed rgba(99,102,241,0.25);border-radius:12px;padding:20px;cursor:pointer;color:#64748b;font-size:12px;transition:.2s}
.renewal-upload-label:hover{border-color:rgba(99,102,241,0.5);background:rgba(99,102,241,0.04)}
.renewal-upload-icon{font-size:20px;color:#6366f1}
.renewal-upload-name{color:#22c55e;font-weight:600}
.renewal-error{display:none;color:#ef4444;font-size:12px;padding:8px 12px;background:rgba(239,68,68,0.08);border-radius:8px;border:1px solid rgba(239,68,68,0.2);margin-bottom:12px}
.renewal-submit-btn{width:100%;background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;color:#fff;border-radius:12px;padding:13px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;box-shadow:0 4px 16px rgba(99,102,241,0.3)}
.renewal-submit-btn:hover{filter:brightness(1.08)}
.renewal-submit-btn:disabled{opacity:.5;cursor:not-allowed}
.renewal-success{display:none;text-align:center;padding:60px 20px}
.renewal-success-icon{font-size:56px;margin-bottom:16px}
.renewal-success-title{font-size:22px;font-weight:800;color:#e2e8f0;margin-bottom:8px}
.renewal-success-text{font-size:14px;color:#64748b;max-width:400px;margin:0 auto 24px}
.renewal-success-close{background:rgba(99,102,241,0.15);border:1px solid rgba(99,102,241,0.3);color:#818cf8;border-radius:12px;padding:10px 24px;cursor:pointer;font-size:14px;font-weight:600}