/* ═══════════════════════════════════════════════════════════
   gateway — "Signal"
   A clean instrument for LLM inference.
   Dual-theme: dark (default) + light.
   ═══════════════════════════════════════════════════════════ */

/* ─── Tokens: Dark (default) ───────────────────────────── */

:root {
    --bg-root:       #0d1117;
    --bg-surface:    #161b22;
    --bg-elevated:   #1c2333;
    --bg-field:      #0d1117;
    --border-subtle: #21262d;
    --border:        #30363d;
    --border-focus:  #6b7fff;
    --text-primary:  #e6edf3;
    --text-secondary:#7d8590;
    --text-muted:    #484f58;
    --accent:        #6b7fff;
    --accent-dim:    #4b5fd0;
    --accent-glow:   rgba(107,127,255,0.12);
    --warm:          #e09050;
    --warm-dim:      #a06030;
    --warm-glow:     rgba(224,144,80,0.12);
    --danger:        #f85149;
    --danger-dim:    #a03030;
    --success:       #3fb950;
    --shadow-sm:     0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:     0 8px 24px rgba(0,0,0,0.5);
    --radius-sm:     6px;
    --radius:        8px;
    --radius-lg:     12px;
    --mono:          "JetBrains Mono","Fira Code","Cascadia Code",ui-monospace,monospace;
    --sans:          "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    --ease:          200ms ease;
    --transition-theme: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ─── Tokens: Light ────────────────────────────────────── */

:root.light {
    --bg-root:       #f6f8fa;
    --bg-surface:    #ffffff;
    --bg-elevated:   #f0f2f5;
    --bg-field:      #f6f8fa;
    --border-subtle: #d0d7de;
    --border:        #d0d7de;
    --border-focus:  #4b63e0;
    --text-primary:  #1f2328;
    --text-secondary:#656d76;
    --text-muted:    #8b949e;
    --accent:        #4b63e0;
    --accent-dim:    #3a4fc0;
    --accent-glow:   rgba(75,99,224,0.1);
    --warm:          #c87030;
    --warm-dim:      #905020;
    --warm-glow:     rgba(200,112,48,0.1);
    --danger:        #cf222e;
    --danger-dim:    #a01020;
    --success:       #1a7f37;
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:     0 8px 24px rgba(0,0,0,0.08);
}

/* ─── Reset ────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
    font-family:var(--sans);
    background:var(--bg-root);
    color:var(--text-primary);
    height:100vh;overflow:hidden;
    -webkit-font-smoothing:antialiased;
    font-size:14px;line-height:1.6;
    transition:var(--transition-theme);
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ─── Theme toggle ─────────────────────────────────────── */

.theme-toggle{
    background:none;border:1px solid var(--border);color:var(--text-secondary);
    width:32px;height:32px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;transition:var(--transition-theme);
}
.theme-toggle:hover{color:var(--text-primary);border-color:var(--border-focus)}

/* ═════════════════════════════════════════════════════════
   LOGIN
   ═════════════════════════════════════════════════════════ */

#login-page{
    display:flex;align-items:center;justify-content:center;
    height:100vh;background:var(--bg-root);
    transition:var(--transition-theme);
}
.login-container{
    width:380px;max-width:92vw;padding:44px 40px 36px;
    background:var(--bg-surface);border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);text-align:center;
    box-shadow:var(--shadow-md);transition:var(--transition-theme);
}
.login-mark{color:var(--accent);margin-bottom:20px;display:inline-block;opacity:.85}
.login-title{
    font-family:var(--sans);font-size:20px;font-weight:600;
    color:var(--text-primary);letter-spacing:-0.01em;margin-bottom:4px;
}
.login-sub{
    font-size:13px;color:var(--text-secondary);margin-bottom:36px;
}
#login-page .form-group{margin-bottom:18px;text-align:left}
#login-page .form-group label{
    display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:8px;
}
#login-page .form-group input{
    width:100%;background:var(--bg-field);color:var(--text-primary);
    border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;
    font-size:14px;font-family:var(--sans);transition:var(--transition-theme);
}
#login-page .form-group input:focus{
    outline:none;border-color:var(--border-focus);
    box-shadow:0 0 0 3px var(--accent-glow);
}
#login-page .form-group input::placeholder{color:var(--text-muted)}
#login-page .btn-full{width:100%;margin-top:8px}

.auth-toggle{
    margin-top:20px;font-size:12px;color:var(--text-muted);text-align:center;
}
.auth-toggle .btn-link{
    background:none;border:none;color:var(--accent);cursor:pointer;
    font-size:12px;font-weight:500;padding:2px 4px;margin-left:2px;
}
.auth-toggle .btn-link:hover{text-decoration:underline}

/* ═════════════════════════════════════════════════════════
   APP LAYOUT
   ═════════════════════════════════════════════════════════ */

#app-page{display:flex;flex-direction:column;height:100vh}

.app-header{
    display:flex;align-items:center;gap:20px;
    padding:0 20px;height:52px;
    background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);
    flex-shrink:0;transition:var(--transition-theme);
    position:relative;
}
/* Signature: subtle gradient rule at top */
.app-header::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--accent),var(--warm),var(--accent));
    opacity:.6;
}

.app-home{
    display:flex;align-items:center;gap:8px;
    color:var(--accent);text-decoration:none;
    font-weight:600;font-size:14px;letter-spacing:-0.01em;
}
.app-home svg{opacity:.8}

.tab-nav{display:flex;gap:2px;flex:1}
.tab-btn{
    background:none;border:none;color:var(--text-muted);
    padding:6px 16px;border-radius:var(--radius);cursor:pointer;
    font-size:13px;font-weight:500;transition:var(--transition-theme);
}
.tab-btn:hover{color:var(--text-primary);background:var(--bg-elevated)}
.tab-btn.active{color:var(--accent);background:var(--accent-glow);font-weight:600}

.header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.current-user{font-size:12px;color:var(--text-secondary)}

/* ═════════════════════════════════════════════════════════
   BUTTONS
   ═════════════════════════════════════════════════════════ */

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:var(--bg-elevated);color:var(--text-secondary);
    border:1px solid var(--border);padding:8px 16px;border-radius:var(--radius);
    cursor:pointer;font-size:13px;font-weight:500;
    transition:var(--transition-theme);white-space:nowrap;
}
.btn:hover{background:var(--border);color:var(--text-primary)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dim);border-color:var(--accent-dim)}
.btn-danger{background:transparent;border-color:var(--danger-dim);color:var(--danger)}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted)}
.btn-ghost:hover{color:var(--text-primary);background:var(--bg-elevated)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-full{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}

/* ═════════════════════════════════════════════════════════
   FORMS
   ═════════════════════════════════════════════════════════ */

.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:6px}
.form-group input,.form-group select{
    width:100%;background:var(--bg-field);color:var(--text-primary);
    border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;
    font-size:14px;font-family:var(--sans);transition:var(--transition-theme);
}
.form-group input:focus,.form-group select:focus{
    outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow);
}
.form-group input::placeholder{color:var(--text-muted)}
.form-group select{
    cursor:pointer;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b949e' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
.error-message{
    color:var(--danger);font-size:13px;margin-bottom:16px;padding:8px 12px;
    background:rgba(248,81,73,.08);border:1px solid rgba(248,81,73,.15);border-radius:var(--radius);
}

/* ═════════════════════════════════════════════════════════
   TAB CONTENT
   ═════════════════════════════════════════════════════════ */

.tab-content{display:none;flex:1;overflow:hidden}
.tab-content.active{display:flex;flex-direction:column}

/* ═════════════════════════════════════════════════════════
   CHAT
   ═════════════════════════════════════════════════════════ */

.chat-layout{display:flex;flex:1;overflow:hidden}

.chat-sidebar{
    width:260px;background:var(--bg-surface);border-right:1px solid var(--border-subtle);
    display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;
    transition:var(--transition-theme);
}
.sidebar-header{padding:14px}
.sidebar-header .btn{padding:9px 16px}

.model-selector{padding:10px 14px;border-bottom:1px solid var(--border-subtle)}
.model-selector select{
    width:100%;background:var(--bg-field);color:var(--text-primary);
    border:1px solid var(--border);border-radius:var(--radius);
    padding:8px 32px 8px 10px;font-size:13px;font-family:var(--sans);cursor:pointer;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b949e' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;
    transition:var(--transition-theme);
}

.engine-status{
    padding:6px 10px;font-family:var(--mono);font-size:10px;
    color:var(--text-muted);letter-spacing:.03em;
    border-top:1px solid var(--border-subtle);
}

.conversation-list{flex:1;overflow-y:auto;padding:6px 8px}

.conv-item{
    padding:9px 12px;border-radius:var(--radius);cursor:pointer;
    font-size:13px;color:var(--text-secondary);margin-bottom:1px;
    display:flex;justify-content:space-between;align-items:center;
    transition:var(--transition-theme);
    border:1px solid transparent;
}
.conv-item:hover{background:var(--bg-elevated);color:var(--text-primary)}
.conv-item.active{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border)}

.conv-item-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-item-delete{
    background:none;border:none;color:var(--text-muted);cursor:pointer;
    opacity:0;font-size:16px;padding:0 2px 0 8px;transition:opacity .15s;
}
.conv-item:hover .conv-item-delete{opacity:.5}
.conv-item-delete:hover{opacity:1!important;color:var(--danger)}

/* Chat main */
.chat-main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-root);transition:var(--transition-theme)}
.chat-messages{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:18px}
.chat-welcome{text-align:center;color:var(--text-muted);margin-top:18vh}
.welcome-icon{color:var(--accent-dim);opacity:.5;margin-bottom:16px}
.chat-welcome h2{font-size:18px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;letter-spacing:-0.01em}
.chat-welcome p{font-size:13px;color:var(--text-muted)}

/* Message bubbles */
.message{max-width:80%;padding:12px 16px;border-radius:var(--radius-lg);line-height:1.65;font-size:14px;animation:msgIn .2s ease-out}
.message.user{font-family:var(--sans)}
.message.assistant{font-family:var(--sans)}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.message.user{
    align-self:flex-end;background:var(--accent);color:#fff;
    border-bottom-right-radius:4px;
}
.message.assistant{
    align-self:flex-start;background:var(--bg-surface);
    border:1px solid var(--border);border-bottom-left-radius:4px;
    transition:var(--transition-theme);
}
/* Markdown */
.message.assistant .message-content p{margin-bottom:10px}
.message.assistant .message-content p:last-child{margin-bottom:0}
.message.assistant .message-content pre{
    background:var(--bg-root);border:1px solid var(--border-subtle);
    border-radius:var(--radius);padding:12px 16px;overflow-x:auto;margin:10px 0;
}
.message.assistant .message-content code{font-family:var(--mono);font-size:12px}
.message.assistant .message-content :not(pre)>code{
    background:var(--bg-root);padding:2px 6px;border-radius:3px;font-size:12px;
}
.message.assistant .message-content ul,.message.assistant .message-content ol{margin:6px 0;padding-left:20px}
.message.assistant .message-content li{margin-bottom:4px}
.message.assistant .message-content blockquote{
    border-left:2px solid var(--accent);padding-left:12px;margin:8px 0;color:var(--text-secondary);
}
.message.assistant .message-content h1,.message.assistant .message-content h2,.message.assistant .message-content h3{
    font-weight:600;margin:12px 0 6px;color:var(--text-primary);
}
.message.assistant .message-content table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px}
.message.assistant .message-content th,.message.assistant .message-content td{
    border:1px solid var(--border);padding:6px 10px;text-align:left;
}
.message.assistant .message-content th{background:var(--bg-field)}

/* Chat input */
.chat-input-area{
    padding:16px 20px;border-top:1px solid var(--border-subtle);
    background:var(--bg-surface);transition:var(--transition-theme);
}
.balance-warning{
    display:flex;align-items:center;gap:8px;padding:8px 14px;margin-bottom:10px;
    background:rgba(248,81,73,.08);border:1px solid rgba(248,81,73,.15);
    border-radius:var(--radius);font-size:12px;color:var(--danger);
}
#chat-form{display:flex;gap:8px;align-items:flex-end}
#chat-input{
    flex:1;background:var(--bg-field);color:var(--text-primary);
    border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;
    font-size:14px;font-family:var(--sans);resize:none;
    max-height:150px;line-height:1.5;transition:var(--transition-theme);
}
#chat-input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}
#chat-input:disabled{opacity:.4}
#chat-input::placeholder{color:var(--text-muted)}
#btn-send{padding:10px 14px;flex-shrink:0}
#btn-send svg{opacity:.8}

.streaming-indicator{
    display:flex;align-items:center;gap:8px;font-size:12px;
    color:var(--accent);margin-bottom:10px;
}
.pulse{width:7px;height:7px;background:var(--accent);border-radius:50%;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.streaming-indicator .shimmer{
    background-size:200% auto;
    background-image:linear-gradient(to right,var(--text-muted) 0%,var(--accent) 50%,var(--text-muted) 100%);
    background-clip:text;-webkit-background-clip:text;color:transparent;
    animation:shimmer 2.5s linear infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.streaming-cursor{
    display:inline-block;width:2px;height:1em;background:var(--accent);
    margin-left:1px;vertical-align:text-bottom;animation:cursor-blink .7s step-end infinite;
}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}

/* ═════════════════════════════════════════════════════════
   SYSTEM MONITOR
   ═════════════════════════════════════════════════════════ */

.sys-container{flex:1;overflow-y:auto;padding:28px 32px 36px}
.sys-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.sys-header h2{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin-bottom:2px}
.sys-subtitle{font-size:12px;color:var(--text-muted)}

.sys-summary{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap}
.sys-summary-item{
    flex:1;min-width:110px;background:var(--bg-surface);
    border:1px solid var(--border-subtle);border-radius:var(--radius);
    padding:14px 16px;text-align:center;transition:var(--transition-theme);
    box-shadow:var(--shadow-sm);
}
.sys-summary-label{display:block;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;font-weight:500}
.sys-summary-value{font-family:var(--mono);font-size:16px;font-weight:600}
.sys-summary-value.warn{color:var(--warm)}.sys-summary-value.crit{color:var(--danger)}

.sys-section-title{
    font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:var(--text-muted);margin:28px 0 14px;padding-bottom:8px;
    border-bottom:1px solid var(--border-subtle);
}

.gpu-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:20px}
.gpu-card{
    background:var(--bg-surface);border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);overflow:hidden;position:relative;
    transition:var(--transition-theme);box-shadow:var(--shadow-sm);
}
.gpu-card::before{
    content:'';display:block;height:3px;background:var(--border);
    transition:background .3s ease,box-shadow .3s ease;
}
.gpu-card.load-low::before{background:var(--accent-dim);box-shadow:0 0 8px var(--accent-glow)}
.gpu-card.load-mid::before{background:var(--warm-dim);box-shadow:0 0 10px var(--warm-glow)}
.gpu-card.load-high::before{background:var(--warm);box-shadow:0 0 14px var(--warm-glow)}
.gpu-card-inner{padding:20px}
.gpu-card .gpu-name{
    font-size:14px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.gpu-card .gpu-name .gpu-index{
    background:var(--bg-elevated);color:var(--text-muted);border:1px solid var(--border);
    width:28px;height:28px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:12px;font-weight:600;
}

.gpu-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.gpu-stat{
    background:var(--bg-elevated);border:1px solid var(--border-subtle);
    border-radius:var(--radius);padding:14px;transition:var(--transition-theme);
}
.gpu-stat-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;font-weight:500}
.gpu-stat-value{font-family:var(--mono);font-size:22px;font-weight:600}
.gpu-stat-value.warn{color:var(--warm)}.gpu-stat-value.crit{color:var(--danger)}

.gpu-bar{margin-top:12px}.gpu-bar:first-of-type{margin-top:0}
.gpu-bar-label{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-bottom:6px}
.gpu-bar-track{height:5px;background:var(--bg-field);border-radius:3px;overflow:hidden}
.gpu-bar-fill{height:100%;border-radius:3px;transition:width .6s ease,background .6s ease;background:var(--accent)}
.gpu-bar-fill.warn{background:var(--warm)}.gpu-bar-fill.crit{background:var(--danger)}

.sys-panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:18px 20px;transition:var(--transition-theme);box-shadow:var(--shadow-sm)}
.sys-panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:14px}
.sys-metric-label{display:block;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-weight:500}
.sys-metric-value{font-family:var(--mono);font-size:13px;font-weight:600}
.sys-metric-value.warn{color:var(--warm)}.sys-metric-value.crit{color:var(--danger)}
.sys-metric-row{padding:8px 0;border-bottom:1px solid var(--border-subtle)}
.sys-metric-row:last-child{border-bottom:0}

.core-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px 10px;margin-top:14px}
.core-bar-wrap{display:flex;align-items:center;gap:4px}
.core-label{font-family:var(--mono);font-size:9px;color:var(--text-muted);width:18px;text-align:right}
.core-val{font-family:var(--mono);font-size:9px;width:26px;text-align:right;color:var(--text-secondary)}
.core-val.warn{color:var(--warm)}.core-val.crit{color:var(--danger)}
.core-bar-track{flex:1;height:6px;background:var(--bg-field);border-radius:3px;overflow:hidden}
.core-bar-fill{height:100%;border-radius:3px;transition:width .6s ease;background:var(--accent)}
.core-bar-fill.warn{background:var(--warm)}.core-bar-fill.crit{background:var(--danger)}

.sys-empty{text-align:center;color:var(--text-muted);padding:40px 20px;font-size:12px}

/* ═════════════════════════════════════════════════════════
   USAGE
   ═════════════════════════════════════════════════════════ */

.usage-container{flex:1;overflow-y:auto;padding:28px 32px 36px}
.usage-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.usage-header h2{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin-bottom:2px}
.usage-subtitle{font-size:12px;color:var(--text-muted)}

.usage-summary{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap}
.usage-card{
    flex:1;min-width:150px;background:var(--bg-surface);
    border:1px solid var(--border-subtle);border-radius:var(--radius);
    padding:18px 20px;transition:var(--transition-theme);box-shadow:var(--shadow-sm);
}
.usage-card-label{display:block;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;font-weight:500}
.usage-card-value{font-family:var(--mono);font-size:28px;font-weight:600;color:var(--accent)}
.usage-card-sub{display:block;font-family:var(--mono);font-size:10px;color:var(--text-muted);margin-top:4px}

.usage-charts{margin-bottom:28px}
.usage-chart-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:20px;transition:var(--transition-theme);box-shadow:var(--shadow-sm)}
.usage-chart-card h3{font-size:13px;font-weight:600;margin-bottom:4px;color:var(--text-secondary)}
.usage-chart-card h3 span{color:var(--text-muted);font-size:12px}
.usage-chart{margin-top:12px}

.chart-grid{stroke:var(--border-subtle);stroke-width:1}
.chart-label{font-family:var(--mono);font-size:9px;fill:var(--text-muted)}
.chart-area{fill:var(--accent-glow)}
.chart-line{fill:none;stroke:var(--accent);stroke-width:2}
.chart-dot{fill:var(--accent)}

.usage-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.usage-col h3{font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:10px}
.usage-col table{width:100%}
.usage-col th,.usage-col td{font-family:var(--mono);font-size:11px;padding:7px 10px;text-align:left;border-bottom:1px solid var(--border-subtle)}
.usage-col th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.usage-col td{color:var(--text-secondary)}

.usage-empty{text-align:center;color:var(--text-muted);padding:40px 20px;font-size:12px}

/* ═════════════════════════════════════════════════════════
   API KEYS
   ═════════════════════════════════════════════════════════ */

.apikeys-container{flex:1;overflow-y:auto;padding:28px 32px 36px}
.apikeys-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.apikeys-header h2{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin-bottom:2px}
.apikeys-subtitle{font-size:12px;color:var(--text-muted)}

.apikeys-desc{
    font-size:12px;color:var(--text-secondary);margin-bottom:28px;line-height:1.7;
    padding:14px 18px;background:var(--bg-surface);border:1px solid var(--border-subtle);
    border-radius:var(--radius);transition:var(--transition-theme);
}
.apikeys-desc code{background:var(--bg-field);color:var(--accent);padding:2px 6px;border-radius:3px;font-size:11px;font-family:var(--mono)}

.apikeys-list{display:flex;flex-direction:column;gap:8px}
.key-item{
    background:var(--bg-surface);border:1px solid var(--border-subtle);
    border-radius:var(--radius);padding:16px 20px;display:flex;
    justify-content:space-between;align-items:center;
    transition:var(--transition-theme);box-shadow:var(--shadow-sm);
}
.key-item:hover{border-color:var(--border)}
.key-info .key-name{font-size:14px;font-weight:600;margin-bottom:5px}
.key-meta{font-size:11px;color:var(--text-muted);display:flex;gap:18px;flex-wrap:wrap}
.key-actions{display:flex;gap:8px;flex-shrink:0}

/* ═════════════════════════════════════════════════════════
   ADMIN
   ═════════════════════════════════════════════════════════ */

.admin-container{flex:1;overflow-y:auto;padding:28px 32px 36px}
.admin-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.admin-header h2{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin-bottom:2px}
.admin-subtitle{font-size:12px;color:var(--text-muted)}

.admin-users table{width:100%;border-collapse:collapse}
.admin-users th,.admin-users td{font-size:13px;padding:10px 14px;text-align:left;border-bottom:1px solid var(--border-subtle)}
.admin-users th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:500;font-size:10px}
.admin-users td{color:var(--text-secondary)}
.admin-users tr:hover td{background:var(--bg-elevated)}
.admin-username{color:var(--text-primary);font-weight:600}
.admin-userid{color:var(--text-muted);font-size:10px;margin-left:6px}
.admin-balance-zero{color:var(--danger)}
.admin-empty{text-align:center;color:var(--text-muted);padding:40px 20px;font-size:12px}

/* ═════════════════════════════════════════════════════════
   MODAL
   ═════════════════════════════════════════════════════════ */

.modal{
    position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;
    z-index:1000;backdrop-filter:blur(4px);
}
.modal-content{
    background:var(--bg-surface);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:24px;width:460px;max-width:92vw;
    box-shadow:var(--shadow-md);transition:var(--transition-theme);
}
.modal-content h3{font-size:15px;font-weight:600;margin-bottom:18px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.key-result-text{font-size:12px;color:var(--success);margin-bottom:10px}
.key-display{
    background:var(--bg-root);border:1px solid var(--border);
    border-radius:var(--radius);padding:12px;margin-top:10px;
    display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.key-display code{font-family:var(--mono);font-size:12px;word-break:break-all;color:var(--accent)}

/* ═════════════════════════════════════════════════════════
   MOBILE
   ═════════════════════════════════════════════════════════ */

.hamburger{display:none}
.sidebar-overlay{display:none}

@media(max-width:768px){
    /* ── Header ───────────────────────────────── */
    .app-header{padding:0 10px;gap:8px;height:48px}
    .hamburger{
        display:flex;align-items:center;justify-content:center;
        background:none;border:none;color:var(--text-secondary);
        font-size:20px;width:40px;height:40px;cursor:pointer;border-radius:var(--radius);
        flex-shrink:0;
    }
    .hamburger:hover{background:var(--bg-elevated)}
    .app-home-label{display:none}
    .tab-nav{overflow-x:auto;gap:1px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .tab-nav::-webkit-scrollbar{display:none}
    .tab-btn{font-size:12px;padding:5px 10px;white-space:nowrap;flex-shrink:0}
    .header-right{gap:6px}
    .current-user{display:none}
    .theme-toggle{width:28px;height:28px;font-size:14px}

    /* ── Sidebar overlay ──────────────────────── */
    .chat-sidebar{
        position:fixed;top:48px;left:0;bottom:0;z-index:51;
        width:280px;max-width:85vw;
        transform:translateX(-100%);
        transition:transform .25s ease;
        box-shadow:var(--shadow-md);
    }
    .chat-sidebar.open{transform:translateX(0)}
    .sidebar-overlay{
        display:none;position:fixed;top:48px;left:0;right:0;bottom:0;
        background:rgba(0,0,0,.4);z-index:50;
    }
    .sidebar-overlay.open{display:block}

    /* ── Chat ─────────────────────────────────── */
    .chat-main{min-width:0}
    .chat-messages{padding:14px 12px;gap:12px}
    .message{max-width:92%;font-size:13px;padding:10px 14px}
    .chat-input-area{padding:10px 12px}
    #chat-input{font-size:13px;padding:10px 12px}
    #btn-send{padding:10px 12px}

    /* ── Login ────────────────────────────────── */
    .login-container{width:100%;max-width:100vw;padding:32px 24px 28px;border-radius:0;min-height:100vh}
    #login-page{align-items:flex-start;padding-top:10vh}

    /* ── System monitor ───────────────────────── */
    .sys-container,.usage-container,.apikeys-container,.admin-container{padding:16px 12px 24px}
    .sys-header,.usage-header,.apikeys-header,.admin-header{flex-direction:column;gap:12px}
    .sys-summary,.usage-summary{gap:6px;flex-wrap:wrap}
    .sys-summary-item,.usage-card{min-width:90px;padding:10px 12px;flex:1 1 45%}
    .sys-summary-value{font-size:14px}
    .usage-card-value{font-size:22px}
    .gpu-cards{grid-template-columns:1fr;gap:12px}
    .gpu-stats{grid-template-columns:1fr 1fr;gap:8px}
    .gpu-stat{padding:10px 12px}
    .gpu-stat-value{font-size:18px}
    .sys-panel-grid{grid-template-columns:1fr}
    .core-grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px 6px}

    /* ── Tables: horizontal scroll ────────────── */
    .admin-users,.usage-col,.apikeys-list{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .admin-users table,.usage-col table,.key-item{min-width:500px}
    .usage-breakdown{grid-template-columns:1fr;gap:16px}

    /* ── API keys ─────────────────────────────── */
    .key-item{flex-direction:column;align-items:flex-start;gap:10px}
    .key-meta{flex-direction:column;gap:4px}
    .key-actions{align-self:flex-end}

    /* ── Modal ────────────────────────────────── */
    .modal-content{width:96vw;padding:20px}

    /* ── Buttons, touch targets ───────────────── */
    .btn,.btn-primary,.btn-danger,.btn-ghost{min-height:40px;padding:8px 14px}
    .btn-sm{min-height:32px;padding:4px 8px}
    .conv-item{padding:10px 12px;font-size:12px}

    /* ── GPU card adjustment ──────────────────── */
    .gpu-card-inner{padding:14px}
}