/* ExpelHost — Clean Black & White theme, no AI gradients. Light/Dark toggle. */
:root{
  --bg:#ffffff; --bg2:#f5f5f5; --card:#ffffff; --text:#111111; --muted:#6b6b6b;
  --border:#e5e5e5; --btn-bg:#111111; --btn-text:#ffffff; --code:#f0f0f0;
  --shadow:0 8px 30px rgba(0,0,0,.08);
}
[data-theme="dark"]{
  --bg:#0d0d0d; --bg2:#141414; --card:#161616; --text:#f5f5f5; --muted:#a3a3a3;
  --border:#2a2a2a; --btn-bg:#f5f5f5; --btn-text:#111111; --code:#222222;
  --shadow:0 8px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);transition:background .3s,color .3s;min-height:100vh}
.bg-grid{position:fixed;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:32px 32px;mask-image:radial-gradient(ellipse at 50% 0%,black 30%,transparent 75%)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--border);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);z-index:10}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:40px;height:40px;border-radius:10px;background:var(--btn-bg);color:var(--btn-text);display:grid;place-items:center;font-weight:900;font-size:22px;animation:pop .5s ease}
.brand-name{font-weight:900;letter-spacing:2px}
.brand-sub{font-size:12px;color:var(--muted)}
.container{max-width:1080px;margin:0 auto;padding:24px 16px 60px;position:relative}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow);animation:rise .45s ease}
.login-card{max-width:420px;margin:6vh auto}
h1,h2{margin:0 0 8px}
.muted{color:var(--muted);font-size:14px}
label{display:block;font-size:13px;margin:12px 0 6px;font-weight:600}
input,select{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--text);outline:none;transition:.2s}
input:focus,select:focus{border-color:var(--text);transform:translateY(-1px)}
.btn{padding:11px 16px;border-radius:10px;border:1px solid var(--text);cursor:pointer;font-weight:700;transition:.2s;background:transparent;color:var(--text)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn.primary{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg)}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px;font-size:13px}
.btn.danger{border-color:#c00;color:#c00}
.btn.full{width:100%;margin-top:14px}
.error{color:#c00;min-height:18px}
.hint{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.6}
.hidden{display:none!important}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat{text-align:center;padding:14px}
.stat-num{font-size:28px;font-weight:900}
.stat-label{font-size:13px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-grid .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.steps{font-size:14px;line-height:1.9}
code{background:var(--code);padding:2px 7px;border-radius:6px;font-size:13px}
.ssh-box{margin-top:12px;border:1px dashed var(--border);border-radius:10px;padding:12px}
.ssh-cmd{font-family:monospace;font-weight:700;margin:6px 0 10px;word-break:break-all}
.vps-list{display:grid;gap:14px;margin-top:12px}
.vps{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--bg2);animation:rise .35s ease}
.vps2{border:1px solid var(--border);border-radius:16px;padding:18px;background:var(--bg2);animation:rise .35s ease;box-shadow:var(--shadow)}
.vps2-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.vps2-title{display:flex;gap:12px;align-items:center}
.srv-ico{width:44px;height:44px;border-radius:12px;background:var(--btn-bg);color:var(--btn-text);display:grid;place-items:center;font-size:22px}
.vps2-name{font-weight:900;font-size:19px;letter-spacing:.2px}
.vps2-sub{font-size:12px;color:var(--muted);margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;padding:6px 14px;border-radius:99px;border:1px solid var(--text);text-transform:uppercase;letter-spacing:.6px}
.pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.running{background:#0f7b3d;border-color:#0f7b3d;color:#fff}
.pill.running .dot{animation:blink 1.4s infinite}
.pill.stopped{opacity:.65}
@keyframes blink{50%{opacity:.3}}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:99px;border:1px solid var(--border);background:var(--card)}
.chip.b{border-color:var(--text)}
.ipgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:10px}
.ipbox{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--card)}
.ipbox label{margin:0 0 4px;font-size:10.5px;letter-spacing:1px;color:var(--muted)}
.ipval{font-weight:800;font-size:14px;word-break:break-all}
.ipval.small{font-size:12.5px}
.keys-box{width:min(560px,100%)}
.keyrow{display:flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--bg2);margin:8px 0}
.keyrow code{flex:1;font-size:13px;word-break:break-all;background:none;padding:0}
.keyrow a{flex:1;font-size:13px;word-break:break-all}
.keylabel{font-size:11px;letter-spacing:1px;font-weight:800;color:var(--muted);margin-top:10px}
.small-exit{padding:7px 16px;font-size:13px}
.spin{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.prov{border:1px solid #b58900;background:#fff8e1;color:#5c4300;border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:10px}
[data-theme="dark"] .prov{background:#2a2200;color:#ffe082;border-color:#b58900}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}
.tmrow{display:flex;gap:8px;align-items:center;background:var(--card);border:1px dashed var(--text);border-radius:12px;padding:10px 12px;margin-bottom:8px;flex-wrap:wrap}
.tmrow code{flex:1;font-size:12.5px;word-break:break-all;background:var(--code);border-radius:8px;padding:6px 8px}
.tlabel{font-size:12.5px;font-weight:800}
.sshstat{font-size:12.5px;font-weight:800;margin:2px 0 6px}
.sshstat.ok{color:#0f7b3d}
.sshstat.bad{color:#b3261e}
.sshbtns{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.sshrow{display:flex;gap:8px;align-items:center;background:#0d0d0d;border-radius:12px;padding:10px 12px;margin-bottom:8px}
[data-theme="dark"] .sshrow{background:#000}
.sshrow code{flex:1;color:#fff;font-size:13px;word-break:break-all;background:none;padding:0}
.fwdrow{font-size:13px;margin-bottom:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.userow{margin:8px 0}
.bars{margin-top:8px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--card)}
.bar{display:grid;grid-template-columns:110px 1fr 170px;gap:10px;align-items:center;margin:6px 0;font-size:12.5px}
.blabel{font-weight:800}
.track{height:10px;border-radius:99px;background:var(--code);overflow:hidden}
.fill{height:100%;width:0;background:var(--btn-bg);border-radius:99px;transition:width .5s}
.bval{font-weight:700;text-align:right}
.vps-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.vps-name{font-weight:800;font-size:17px}
@media(max-width:640px){.bar{grid-template-columns:90px 1fr;}.bval{grid-column:2;text-align:left}}
.badge{font-size:12px;padding:3px 10px;border-radius:99px;border:1px solid var(--text)}
.badge.running{background:#111;color:#fff}
[data-theme="dark"] .badge.running{background:#fff;color:#111}
.badge.stopped{opacity:.6}
.vps-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px;margin:10px 0;font-size:13px}
.vps-actions{display:flex;gap:8px;flex-wrap:wrap}
.sshline{font-family:monospace;background:var(--code);border-radius:8px;padding:8px 10px;margin:8px 0;font-size:13px;word-break:break-all}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:50;padding:12px}
.modal-box{width:min(1100px,100%);background:#111;border:1px solid #333;border-radius:14px;overflow:hidden;animation:pop .25s ease}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;color:#fff;border-bottom:1px solid #333;flex-wrap:wrap}
#terminal{height:min(70vh,640px);background:#000;padding:6px}
#terminal .xterm-screen{width:100%!important}
#terminal .xterm-viewport{width:100%!important;overflow-x:hidden}
footer{text-align:center;color:var(--muted);font-size:13px;padding:18px}
.top-actions{display:flex;gap:8px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.fade-in{animation:rise .4s ease}
.slide-up{animation:rise .5s ease}
.tabs{position:relative;display:flex;gap:0;margin-bottom:16px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:4px;overflow:hidden}
.tab{position:relative;z-index:1;flex:1;padding:11px;border-radius:10px;border:none;background:transparent;color:var(--muted);font-weight:800;cursor:pointer;transition:color .3s}
.tab.active{color:var(--btn-text)}
.tab-slider{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--btn-bg);border-radius:10px;transition:transform .38s cubic-bezier(.32,.72,.28,1);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.tabs.register .tab-slider{transform:translateX(100%)}
.auth-pane{animation:none}
.auth-pane.anim-left{animation:authLeft .38s cubic-bezier(.32,.72,.28,1)}
.auth-pane.anim-right{animation:authRight .38s cubic-bezier(.32,.72,.28,1)}
@keyframes authLeft{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes authRight{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
.modal-box.light{background:var(--card);border-color:var(--border)}
.modal-head.dark-text{color:var(--text);border-bottom:1px solid var(--border)}
.pf-body{padding:16px;color:var(--text)}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.pf-item{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:10px;padding:8px 10px;margin-top:8px;font-size:13px;background:var(--bg2)}
.term-actions{display:flex;gap:8px;align-items:center}
.btn-exit{background:#e11d1d;border:1px solid #e11d1d;color:#fff;font-weight:900;padding:7px 18px;border-radius:10px;cursor:pointer;font-size:14px;letter-spacing:.5px;transition:.2s}
.btn-exit:hover{filter:brightness(1.15);transform:translateY(-1px)}
.btn.newtab{background:#fff;color:#111;border:1px solid #fff;font-weight:800}
[data-theme="light"] .btn.newtab{background:#111;color:#fff;border-color:#111}
.assign-row{display:flex;gap:8px;margin-top:8px}
.assign-row input{flex:1}
@media(max-width:800px){.grid2{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.row3{grid-template-columns:1fr}}