/**
 * KTC Server Status - Public Status Page Styles
 * Extracted from ktc-server-status.html mockup
 */

*{margin:0;padding:0;box-sizing:border-box;}
:root{--font:'Plus Jakarta Sans',sans-serif;--mono:'JetBrains Mono',monospace;--radius:10px;--transition:.2s ease;}

/* DARK THEME */
[data-theme="dark"]{
  --bg:#09090b;--bg2:#111113;--surface:#18181b;--card:#1c1c20;--card2:#222226;
  --border:#27272a;--border2:#3f3f46;
  --text:#fafafa;--text2:#a1a1aa;--text3:#71717a;
  --accent:#3b82f6;--accent-bg:rgba(59,130,246,.08);--accent-border:rgba(59,130,246,.15);
  --green:#22c55e;--green-bg:rgba(34,197,94,.08);--green-border:rgba(34,197,94,.15);
  --yellow:#eab308;--yellow-bg:rgba(234,179,8,.08);--yellow-border:rgba(234,179,8,.15);
  --red:#ef4444;--red-bg:rgba(239,68,68,.08);--red-border:rgba(239,68,68,.15);
  --purple:#a855f7;--purple-bg:rgba(168,85,247,.08);--purple-border:rgba(168,85,247,.15);
  --orange:#f97316;--shadow:0 1px 3px rgba(0,0,0,.4);
}

/* LIGHT THEME */
[data-theme="light"]{
  --bg:#f8fafc;--bg2:#f1f5f9;--surface:#ffffff;--card:#ffffff;--card2:#f8fafc;
  --border:#e2e8f0;--border2:#cbd5e1;
  --text:#0f172a;--text2:#475569;--text3:#94a3b8;
  --accent:#2563eb;--accent-bg:rgba(37,99,235,.05);--accent-border:rgba(37,99,235,.12);
  --green:#16a34a;--green-bg:rgba(22,163,74,.05);--green-border:rgba(22,163,74,.12);
  --yellow:#ca8a04;--yellow-bg:rgba(202,138,4,.05);--yellow-border:rgba(202,138,4,.12);
  --red:#dc2626;--red-bg:rgba(220,38,38,.05);--red-border:rgba(220,38,38,.12);
  --purple:#7c3aed;--purple-bg:rgba(124,58,237,.05);--purple-border:rgba(124,58,237,.12);
  --orange:#ea580c;--shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
}

body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;transition:background var(--transition),color var(--transition);}
.wrap{max-width:920px;margin:0 auto;padding:20px 24px;}

/* HEADER */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 0 20px;margin-bottom:20px;border-bottom:1px solid var(--border);}
.hdr-left{display:flex;align-items:center;gap:14px;}
.hdr-logo{width:40px;height:40px;background:linear-gradient(135deg,#2563eb,#06b6d4);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;letter-spacing:-.5px;box-shadow:0 2px 12px rgba(37,99,235,.25);}
.hdr-name{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.1;}
.hdr-name span{font-size:12px;font-weight:500;color:var(--text3);display:block;margin-top:1px;}
.hdr-right{display:flex;align-items:center;gap:8px;}

/* Buttons */
.btn{padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--font);transition:all .12s;}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 6px rgba(37,99,235,.25);}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--border2);color:var(--text);}
.btn-sm{padding:6px 12px;font-size:12px;}

/* Theme Toggle */
.theme-toggle{width:38px;height:22px;border-radius:11px;background:var(--border);cursor:pointer;position:relative;transition:background var(--transition);border:none;padding:0;}
.theme-toggle::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--transition);box-shadow:0 1px 3px rgba(0,0,0,.2);}
[data-theme="light"] .theme-toggle{background:var(--accent);}
[data-theme="light"] .theme-toggle::after{transform:translateX(16px);}
.theme-label{font-size:10px;color:var(--text3);display:flex;align-items:center;gap:6px;}

/* View Toggle */
.view-tog{display:flex;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:3px;}
.vt{padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;border:none;background:transparent;font-family:var(--font);transition:all .12s;}
.vt.on{background:var(--accent);color:#fff;box-shadow:0 1px 4px rgba(37,99,235,.2);}

/* STATUS HERO */
.hero{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin-bottom:16px;position:relative;overflow:hidden;box-shadow:var(--shadow);}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--green);opacity:.8;}
.hero.degraded::before{background:var(--yellow);}
.hero.outage::before{background:var(--red);}
.hero-top{display:flex;align-items:center;justify-content:space-between;}
.hero-stat{display:flex;align-items:center;gap:10px;}
.hero-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(34,197,94,.4);animation:pulse 2.5s ease-in-out infinite;}
.hero.degraded .hero-dot{background:var(--yellow);box-shadow:0 0 10px rgba(234,179,8,.4);}
.hero.outage .hero-dot{background:var(--red);box-shadow:0 0 10px rgba(239,68,68,.4);}
@keyframes pulse{0%,100%{box-shadow:0 0 6px rgba(34,197,94,.3)}50%{box-shadow:0 0 16px rgba(34,197,94,.6)}}
.hero-label{font-size:18px;font-weight:800;letter-spacing:-.3px;}
.hero-time{font-size:10px;color:var(--text3);font-family:var(--mono);}
.hero-msg{font-size:14px;color:var(--text2);margin-top:8px;}

/* Stat Cards */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.stats.four{grid-template-columns:repeat(4,1fr);}
.sc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.sc.bl::before{background:var(--accent);}
.sc.gr::before{background:var(--green);}
.sc.pu::before{background:var(--purple);}
.sc.or::before{background:var(--orange);}
.sc-v{font-size:24px;font-weight:800;font-family:var(--mono);letter-spacing:-.5px;}
.sc-l{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;font-weight:600;margin-top:2px;}

/* Maintenance Banner */
.maint{background:var(--yellow-bg);border:1px solid var(--yellow-border);border-radius:var(--radius);padding:14px 18px;margin-bottom:16px;display:flex;gap:12px;}
.maint i.fa-wrench{color:var(--yellow);margin-top:2px;}
.maint-t{font-size:12px;font-weight:700;color:var(--yellow);}
.maint-d{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.4;}
.maint-tm{font-size:10px;color:var(--text3);font-family:var(--mono);margin-top:3px;}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow);}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--border);font-size:14px;font-weight:700;}
.card-h i{margin-right:5px;font-size:12px;}
.card-b{padding:16px 18px;}

/* Badges */
.badge{padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.3px;}
.b-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.b-yellow{background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow-border);}
.b-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);}
.b-blue{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);}
.b-purple{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-border);}
.b-muted{background:var(--bg2);color:var(--text3);border:1px solid var(--border);}

/* Server Groups */
.srv-group{margin-bottom:14px;}
.srv-group-h{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;cursor:pointer;transition:background .1s;}
.srv-group-h:hover{background:var(--card2);}
.srv-group-h .sg-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0;}
.srv-group-h .sg-name{flex:1;}
.srv-group-h .sg-name strong{font-size:14px;display:block;}
.srv-group-h .sg-name span{font-size:10px;color:var(--text3);}
.srv-group-h .sg-uptime{font-family:var(--mono);font-size:14px;font-weight:700;margin-right:8px;}
.srv-group-body{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);overflow:hidden;}
.srv-row{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 52px;border-bottom:1px solid var(--border);font-size:12px;transition:background .08s;}
.srv-row:last-child{border-bottom:none;}
.srv-row:hover{background:var(--bg2);}
.srv-row .sr-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.srv-row .sr-dot.ok{background:var(--green);box-shadow:0 0 6px rgba(34,197,94,.3);}
.srv-row .sr-dot.warn{background:var(--yellow);}
.srv-row .sr-dot.err{background:var(--red);}
.srv-row .sr-name{flex:1;font-weight:500;}
.srv-row .sr-val{font-family:var(--mono);font-size:12px;color:var(--text2);min-width:50px;text-align:right;}

/* Uptime Bars */
.up-row{display:flex;gap:2px;margin:8px 0 4px;}
.up-bar{flex:1;height:26px;border-radius:3px;transition:opacity .1s;cursor:pointer;}
.up-bar:hover{opacity:.75;}
.up-bar.up{background:var(--green);}
.up-bar.deg{background:var(--yellow);}
.up-bar.dn{background:var(--red);}
.up-bar.na{background:var(--border);}
.up-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);font-family:var(--mono);}
.up-pct{text-align:center;font-size:28px;font-weight:800;font-family:var(--mono);color:var(--green);margin:6px 0;}

/* Tabs */
.tabs{display:flex;gap:2px;margin-bottom:14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:4px;}
.tab{flex:1;text-align:center;padding:9px 10px;border-radius:8px;font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;transition:all .12s;border:none;background:transparent;font-family:var(--font);}
.tab.on{background:var(--card);color:var(--text);box-shadow:var(--shadow);}
.tab:hover:not(.on){color:var(--text2);}
.tab-pane{display:none;}.tab-pane.on{display:block;}

/* Sub Tabs */
.sub-tabs{display:flex;gap:6px;margin-bottom:14px;}
.sub-tab{padding:8px 18px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);color:var(--text2);background:transparent;font-family:var(--font);transition:all .12s;display:flex;align-items:center;gap:6px;}
.sub-tab:hover{border-color:var(--border2);color:var(--text);}
.sub-tab.on{background:var(--accent);color:#fff;border-color:var(--accent);}

/* Forms */
.fg{margin-bottom:14px;}
.fl{font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;display:block;}
.fi{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:14px;color:var(--text);font-family:var(--font);outline:none;transition:border-color .12s;}
.fi:focus{border-color:var(--accent);}
textarea.fi{resize:vertical;min-height:70px;}
select.fi{cursor:pointer;}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{padding:7px 16px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid var(--border);color:var(--text3);cursor:pointer;transition:all .1s;background:transparent;font-family:var(--font);display:inline-flex;align-items:center;gap:5px;}
.chip:hover{border-color:var(--accent);color:var(--accent);}
.chip.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);}

/* Timeline */
.tl{padding:12px 0;border-bottom:1px solid var(--border);display:flex;gap:12px;}
.tl:last-child{border-bottom:none;}
.tl-d{width:7px;height:7px;border-radius:50%;margin-top:6px;flex-shrink:0;}
.tl-d.ok{background:var(--green);}.tl-d.warn{background:var(--yellow);}.tl-d.err{background:var(--red);}.tl-d.info{background:var(--accent);}
.tl-b{flex:1;}.tl-t{font-size:12px;font-weight:600;}.tl-desc{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.4;}
.tl-time{font-size:10px;color:var(--text3);font-family:var(--mono);flex-shrink:0;margin-top:3px;}

/* Locked Overlay */
.locked{position:relative;min-height:100px;overflow:hidden;}
.locked::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent,var(--bg) 70%);z-index:2;}
.lock-cta{position:absolute;bottom:16px;left:0;right:0;z-index:3;text-align:center;}
.lock-cta i{font-size:16px;color:var(--accent);display:block;margin-bottom:4px;}
.lock-cta p{font-size:12px;color:var(--text3);margin-bottom:8px;}

/* Login Banner */
.login-ban{background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:var(--radius);padding:16px 20px;margin-bottom:14px;display:flex;align-items:center;gap:14px;}
.login-ban i.fa-lock{font-size:16px;color:var(--accent);}
.login-ban p{font-size:12px;color:var(--text2);line-height:1.5;flex:1;}
.login-ban strong{color:var(--text);}

/* Trending Item */
.trend{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border);transition:background .08s;}
.trend:last-child{border-bottom:none;}
.trend:hover{background:var(--bg2);}
.trend-votes{text-align:center;min-width:40px;}
.trend-votes .tv{font-size:16px;font-weight:800;font-family:var(--mono);color:var(--accent);}
.trend-votes .tvl{font-size:7px;color:var(--text3);text-transform:uppercase;}
.trend-info{flex:1;}
.trend-info strong{font-size:12px;display:flex;align-items:center;gap:5px;}
.trend-info span{font-size:10px;color:var(--text3);display:block;margin-top:1px;}

/* Footer */
.ftr{padding:20px 0;border-top:1px solid var(--border);margin-top:20px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text3);}
.ftr a{color:var(--accent);text-decoration:none;}

/* Troubleshooter */
.ts-step{margin-bottom:0;animation:tsIn .25s ease;}
@keyframes tsIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.ts-q{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border);}
.ts-step:last-child .ts-q,.ts-step:only-child .ts-q{border-bottom:none;}
.ts-num{width:30px;height:30px;background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--accent);flex-shrink:0;font-family:var(--mono);}
.ts-body{flex:1;min-width:0;}
.ts-title{font-size:14px;font-weight:700;margin-bottom:2px;}
.ts-desc{font-size:12px;color:var(--text3);margin-bottom:10px;}
.ts-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.ts-opt{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);cursor:pointer;text-align:left;font-family:var(--font);transition:all .12s;font-size:12px;font-weight:500;}
.ts-opt:hover{border-color:var(--accent);background:var(--accent-bg);}
.ts-opt.picked{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);}
.ts-opt.dimmed{opacity:.35;pointer-events:none;}
.ts-opt i{font-size:14px;color:var(--text3);width:18px;text-align:center;}
.ts-opt.picked i{color:var(--accent);}
.ts-opt span{display:block;font-size:10px;color:var(--text3);font-weight:400;margin-top:1px;}
.ts-action{margin:8px 0 12px;}
.ts-action-card{display:flex;gap:12px;padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);}
.ts-action-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.ts-action-text{flex:1;}
.ts-action-text strong{font-size:14px;display:block;margin-bottom:2px;}
.ts-action-text span{font-size:12px;color:var(--text2);line-height:1.5;display:block;}
.ts-resolve{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);}
.ts-resolve-btns{display:flex;gap:6px;}
.ts-yes,.ts-no{padding:7px 16px;border-radius:8px;font-size:12px;font-weight:600;border:none;cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;gap:5px;transition:all .1s;}
.ts-yes{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.ts-yes:hover{background:var(--green);color:#fff;}
.ts-no{background:var(--bg2);color:var(--text2);border:1px solid var(--border);}
.ts-no:hover{border-color:var(--border2);color:var(--text);}

/* FAQ */
.faq-item{border-bottom:1px solid var(--border);cursor:pointer;transition:background .08s;}
.faq-item:last-child{border-bottom:none;}
.faq-item:hover{background:var(--bg2);}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;}
.faq-q span{font-size:14px;font-weight:600;}
.faq-q i{font-size:10px;color:var(--text3);transition:transform .2s;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-a{display:none;padding:0 18px 14px;font-size:12px;color:var(--text2);line-height:1.6;}
.faq-item.open .faq-a{display:block;}

/* Responsive */
@media(max-width:640px){
  .stats{grid-template-columns:1fr 1fr;}
  .stats.four{grid-template-columns:1fr 1fr;}
  .srv-row .sr-val{display:none;}
  .hdr{flex-direction:column;gap:12px;}
  .sub-tabs{flex-wrap:wrap;}
  .ts-opts{grid-template-columns:1fr !important;}
}