@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
--bg:#f4f4f6;
--bg-elevated:#ffffff;
--surface:#ffffff;
--surface-subtle:#f9f9fb;
--surface-hover:#f1f2f6;
--border:rgba(15,23,42,0.07);
--border-strong:rgba(15,23,42,0.12);
--text:#09090b;
--text2:#52525b;
--text3:#a1a1aa;
--accent:#09090b;
--accent-brand:#2563eb;
--accent-brand-soft:rgba(37,99,235,0.08);
--success:#10b981;
--success-soft:rgba(16,185,129,0.1);
--warn:#f59e0b;
--warn-soft:rgba(245,158,11,0.1);
--danger:#ef4444;
--danger-soft:rgba(239,68,68,0.1);
--purple:#7c3aed;
--purple-soft:rgba(124,58,237,0.08);
--radius-xl:20px;
--radius-lg:16px;
--radius:12px;
--radius-sm:9px;
--radius-xs:7px;
--radius-pill:9999px;
--shadow-xs:0 1px 2px rgba(0,0,0,0.03);
--shadow-sm:0 2px 8px -2px rgba(0,0,0,0.05),0 1px 2px -1px rgba(0,0,0,0.03);
--shadow-md:0 10px 30px -5px rgba(0,0,0,0.06),0 2px 6px -1px rgba(0,0,0,0.03);
--shadow-lg:0 24px 48px -12px rgba(0,0,0,0.12),0 4px 12px -2px rgba(0,0,0,0.05);
--font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;
--font-mono:'JetBrains Mono','SF Mono','Consolas',monospace;
--ease:cubic-bezier(0.16,1,0.3,1);
}

::selection{background:var(--text);color:#fff}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:9999px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.24)}

html{font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font);color:var(--text);background:var(--bg);letter-spacing:-0.011em}

a{color:inherit;text-decoration:none}
h1{font-size:1.45rem;font-weight:700;letter-spacing:-0.03em;color:var(--text);line-height:1.2}
h2{font-size:1.15rem;font-weight:600;letter-spacing:-0.025em;color:var(--text)}
h3{font-size:0.95rem;font-weight:600;letter-spacing:-0.015em;color:var(--text)}
small,.text-sm{font-size:0.8125rem}
.mono{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:-0.02em}

.hidden{display:none!important}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.mb-24{margin-bottom:24px}
.gap-6{gap:6px}
.gap-8{gap:8px}
.gap-10{gap:10px}
.gap-12{gap:12px}
.gap-16{gap:16px}
.gap-20{gap:20px}
.text-2{color:var(--text2)}
.text-3{color:var(--text3)}
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.flex-1{flex:1}
.wrap{flex-wrap:wrap}
.text-center{text-align:center}
.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}

.login-body{
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:#f5f5f7;
background-image:
  radial-gradient(at 20% 15%, rgba(37,99,235,0.07) 0px, transparent 50%),
  radial-gradient(at 80% 85%, rgba(124,58,237,0.06) 0px, transparent 50%),
  radial-gradient(at 50% 50%, rgba(255,255,255,0.9) 0px, transparent 100%);
position:relative;
padding:24px;
}
.login-grid-bg{
position:fixed;inset:0;
background-size:36px 36px;
background-image:
  linear-gradient(to right, rgba(0,0,0,0.025) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(0,0,0,0.025) 1px, transparent 1px);
mask-image:radial-gradient(ellipse at center, black 35%, transparent 75%);
-webkit-mask-image:radial-gradient(ellipse at center, black 35%, transparent 75%);
pointer-events:none;
}

.login-wrap{width:100%;max-width:410px;position:relative;z-index:2;animation:fadeUp 0.5s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.login-status-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:5px 12px;
background:rgba(255,255,255,0.8);
border:1px solid var(--border);
border-radius:var(--radius-pill);
font-size:0.75rem;
font-weight:500;
color:var(--text2);
box-shadow:var(--shadow-xs);
margin-bottom:20px;
backdrop-filter:blur(12px);
}

.login-card{
background:rgba(255,255,255,0.88);
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%);
border:1px solid rgba(255,255,255,0.9);
box-shadow:0 20px 50px -12px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.06);
border-radius:22px;
padding:38px 34px 34px;
}

.login-brand{
display:flex;
flex-direction:column;
align-items:center;
margin-bottom:28px;
}
.login-glyph{
width:48px;height:48px;
border-radius:14px;
background:linear-gradient(145deg,#18181b,#09090b);
display:flex;align-items:center;justify-content:center;
color:#fff;
box-shadow:0 8px 20px -4px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
margin-bottom:16px;
}
.login-logo{
font-size:1.35rem;
font-weight:700;
letter-spacing:-0.03em;
color:var(--text);
}
.login-sub{
color:var(--text2);
font-size:0.84rem;
margin-top:4px;
text-align:center;
}

.otp-grid{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:8px;
margin:14px 0 18px;
width:100%;
}
.otp-digit{
width:100%;
min-width:0;
height:46px;
padding:0;
text-align:center;
font-family:var(--font-mono);
font-size:1.15rem;
font-weight:600;
border:1px solid var(--border-strong);
border-radius:var(--radius-sm);
background:var(--surface-subtle);
color:var(--text);
outline:none;
transition:all 0.15s var(--ease);
}
.otp-digit:focus{
background:#fff;
border-color:var(--accent-brand);
box-shadow:0 0 0 3px rgba(37,99,235,0.12);
transform:translateY(-1px);
}

.code-timer{
display:flex;
align-items:center;
justify-content:space-between;
font-size:0.78rem;
color:var(--text2);
background:var(--surface-subtle);
border:1px solid var(--border);
border-radius:var(--radius-sm);
padding:8px 12px;
margin-bottom:14px;
font-variant-numeric:tabular-nums;
}

.login-footer{
margin-top:22px;
text-align:center;
font-size:0.75rem;
color:var(--text3);
display:flex;
align-items:center;
justify-content:center;
gap:14px;
}

.input{
width:100%;
height:40px;
border:1px solid var(--border-strong);
border-radius:var(--radius-sm);
padding:0 13px;
font-size:0.875rem;
font-family:var(--font);
background:var(--surface);
color:var(--text);
outline:none;
transition:all 0.15s var(--ease);
box-shadow:var(--shadow-xs);
}
.input:hover{border-color:rgba(15,23,42,0.22)}
.input:focus{border-color:var(--accent-brand);box-shadow:0 0 0 3px rgba(37,99,235,0.12)}
.input::placeholder{color:var(--text3)}
textarea.input{height:auto;padding:10px 13px;resize:vertical;min-height:84px}

.input-group{position:relative;margin-bottom:14px}
.input-group .input{padding-left:38px;height:42px}
.input-icon{
position:absolute;left:13px;top:50%;transform:translateY(-50%);
color:var(--text3);pointer-events:none;display:flex;align-items:center;
}

select.input{
appearance:none;
cursor:pointer;
padding-right:34px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
height:40px;
border:1px solid transparent;
border-radius:var(--radius-sm);
padding:0 16px;
font-size:0.84rem;
font-weight:500;
font-family:var(--font);
cursor:pointer;
transition:all 0.15s var(--ease);
white-space:nowrap;
user-select:none;
}
.btn:active{transform:scale(0.985)}
.btn:disabled{opacity:0.45;pointer-events:none}

.btn-primary{
background:linear-gradient(180deg,#18181b 0%,#09090b 100%);
color:#fff;
box-shadow:0 1px 2px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.14);
}
.btn-primary:hover{
background:linear-gradient(180deg,#27272a 0%,#18181b 100%);
box-shadow:0 4px 12px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.18);
}

.btn-brand{
background:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%);
color:#fff;
box-shadow:0 1px 2px rgba(37,99,235,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-brand:hover{background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%)}

.btn-secondary{
background:var(--surface);
color:var(--text);
border-color:var(--border-strong);
box-shadow:var(--shadow-xs);
}
.btn-secondary:hover{background:var(--surface-subtle);border-color:rgba(15,23,42,0.2)}

.btn-danger{
background:var(--danger-soft);
color:#dc2626;
border-color:rgba(239,68,68,0.2);
}
.btn-danger:hover{background:var(--danger);color:#fff}

.btn-small{height:32px;padding:0 11px;font-size:0.78rem;border-radius:var(--radius-xs)}
.btn-icon{height:30px;width:30px;padding:0;border-radius:var(--radius-xs);background:transparent;color:var(--text2);border:1px solid transparent}
.btn-icon:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border)}
.btn-full{width:100%;height:42px}

.app-body{display:flex;min-height:100vh;background:var(--bg)}

.sidebar{
position:fixed;left:12px;top:12px;bottom:12px;
width:244px;
background:rgba(255,255,255,0.86);
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border:1px solid var(--border);
border-radius:18px;
display:flex;
flex-direction:column;
z-index:100;
box-shadow:var(--shadow-sm);
transition:transform 0.25s var(--ease);
}

.sidebar-logo{
padding:18px 18px 14px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--border);
}
.sidebar-brand{display:flex;align-items:center;gap:10px}
.logo-mark{
width:30px;height:30px;
border-radius:9px;
background:linear-gradient(145deg,#18181b,#09090b);
display:flex;align-items:center;justify-content:center;
color:#fff;
font-size:0.75rem;
font-weight:800;
letter-spacing:0.03em;
box-shadow:0 2px 6px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.2);
}
.logo-text{
font-size:0.92rem;
font-weight:700;
color:var(--text);
letter-spacing:-0.02em;
}
.logo-version{
font-family:var(--font-mono);
font-size:0.68rem;
padding:2px 6px;
border-radius:5px;
background:var(--surface-subtle);
border:1px solid var(--border);
color:var(--text2);
font-weight:500;
}

.sidebar-section-label{
font-size:0.68rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--text3);
padding:14px 12px 6px;
}

.sidebar-nav{flex:1;padding:6px 10px;overflow-y:auto}
.nav-item{
display:flex;
align-items:center;
justify-content:space-between;
padding:8px 11px;
border-radius:9px;
color:var(--text2);
font-size:0.84rem;
font-weight:500;
cursor:pointer;
transition:all 0.14s var(--ease);
margin-bottom:2px;
border:1px solid transparent;
}
.nav-item-left{display:flex;align-items:center;gap:10px}
.nav-item:hover{
background:var(--surface-hover);
color:var(--text);
}
.nav-item.active{
background:var(--text);
color:#fff;
box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.nav-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;opacity:0.75}
.nav-item.active .nav-icon{opacity:1}
.nav-kbd{
font-family:var(--font-mono);
font-size:0.66rem;
opacity:0.45;
padding:1px 5px;
border-radius:4px;
border:1px solid currentColor;
}

.sidebar-bottom{
padding:12px;
border-top:1px solid var(--border);
background:rgba(249,249,251,0.6);
border-radius:0 0 18px 18px;
}
.user-card{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:6px 8px;
margin-bottom:8px;
}
.user-card-left{display:flex;align-items:center;gap:9px;min-width:0}
.user-avatar{
width:28px;height:28px;
border-radius:8px;
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:0.75rem;font-weight:700;
flex-shrink:0;
}
.sidebar-user{
font-size:0.8125rem;
font-weight:600;
color:var(--text);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.sidebar-role{font-size:0.7rem;color:var(--text3);text-transform:capitalize}

.btn-sidebar-logout{
width:100%;
height:34px;
background:var(--surface);
color:var(--text2);
border:1px solid var(--border-strong);
border-radius:8px;
font-size:0.78rem;
font-weight:500;
cursor:pointer;
transition:all 0.15s var(--ease);
font-family:var(--font);
display:flex;align-items:center;justify-content:center;gap:6px;
}
.btn-sidebar-logout:hover{background:var(--danger-soft);color:#dc2626;border-color:rgba(239,68,68,0.2)}

.main-wrap{
margin-left:268px;
flex:1;
display:flex;
flex-direction:column;
min-height:100vh;
padding-right:16px;
}

.topbar{
margin:12px 0 18px;
padding:14px 22px;
background:rgba(255,255,255,0.82);
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border:1px solid var(--border);
border-radius:16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
position:sticky;
top:12px;
z-index:50;
box-shadow:var(--shadow-xs);
}
.topbar-left{display:flex;flex-direction:column;gap:2px}
.topbar-crumb{
font-size:0.72rem;
color:var(--text3);
font-weight:500;
display:flex;
align-items:center;
gap:6px;
}
.topbar h1{font-size:1.25rem;font-weight:700}
.topbar-actions{display:flex;gap:10px;align-items:center}

.content{padding:0 0 36px;flex:1}

.card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:20px 22px;
box-shadow:var(--shadow-sm);
transition:box-shadow 0.2s var(--ease);
}
.card-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:16px;
padding-bottom:12px;
border-bottom:1px solid var(--border);
}
.card-title-group{display:flex;align-items:center;gap:8px}
.card-sub{font-size:0.76rem;color:var(--text3);font-weight:400}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:18px 20px;
box-shadow:var(--shadow-sm);
display:flex;
flex-direction:column;
justify-content:space-between;
gap:12px;
position:relative;
overflow:hidden;
transition:all 0.2s var(--ease);
}
.stat-card:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-md);
border-color:var(--border-strong);
}
.stat-top{display:flex;align-items:center;justify-content:space-between}
.stat-label{font-size:0.78rem;color:var(--text2);font-weight:500}
.stat-icon{
width:34px;height:34px;
border-radius:9px;
display:flex;align-items:center;justify-content:center;
background:var(--surface-subtle);
border:1px solid var(--border);
color:var(--text);
}
.stat-icon.blue{background:var(--accent-brand-soft);color:var(--accent-brand);border-color:rgba(37,99,235,0.15)}
.stat-icon.green{background:var(--success-soft);color:var(--success);border-color:rgba(16,185,129,0.18)}
.stat-icon.amber{background:var(--warn-soft);color:var(--warn);border-color:rgba(245,158,11,0.18)}
.stat-icon.purple{background:var(--purple-soft);color:var(--purple);border-color:rgba(124,58,237,0.15)}

.stat-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.stat-num{font-size:1.75rem;font-weight:700;letter-spacing:-0.035em;line-height:1;font-variant-numeric:tabular-nums}
.stat-trend{
font-size:0.72rem;
font-weight:500;
padding:2px 7px;
border-radius:var(--radius-pill);
background:var(--surface-subtle);
color:var(--text2);
border:1px solid var(--border);
}

.telemetry-bars{
display:grid;
grid-template-columns:repeat(24,1fr);
gap:5px;
align-items:end;
height:68px;
padding:10px 4px 2px;
}
.t-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.t-bar{
width:100%;
border-radius:4px;
background:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%);
opacity:0.82;
transition:all 0.2s var(--ease);
min-height:6px;
}
.t-bar:hover{opacity:1;transform:scaleY(1.06)}
.t-bar.idle{background:var(--surface-hover);opacity:1}

.badge{
display:inline-flex;
align-items:center;
gap:5px;
border-radius:var(--radius-pill);
padding:3px 9px;
font-size:0.72rem;
font-weight:600;
letter-spacing:-0.01em;
border:1px solid transparent;
}
.badge-green{background:var(--success-soft);color:#047857;border-color:rgba(16,185,129,0.2)}
.badge-red{background:var(--danger-soft);color:#b91c1c;border-color:rgba(239,68,68,0.2)}
.badge-orange{background:var(--warn-soft);color:#b45309;border-color:rgba(245,158,11,0.2)}
.badge-blue{background:var(--accent-brand-soft);color:#1d4ed8;border-color:rgba(37,99,235,0.18)}
.badge-gray{background:var(--surface-subtle);color:var(--text2);border-color:var(--border)}

.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot-green{background:var(--success);box-shadow:0 0 0 3px var(--success-soft)}
.dot-red{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.dot-pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}

.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:0.82rem}
thead th{
text-align:left;
padding:10px 14px;
font-weight:600;
font-size:0.7rem;
text-transform:uppercase;
letter-spacing:0.05em;
color:var(--text3);
background:var(--surface-subtle);
border-bottom:1px solid var(--border);
white-space:nowrap;
}
tbody tr{transition:background 0.12s var(--ease)}
tbody tr:hover{background:var(--surface-subtle)}
tbody td{
padding:11px 14px;
border-bottom:1px solid var(--border);
color:var(--text2);
vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none}
.table-actions{display:flex;gap:4px;justify-content:flex-end}

.host-cell{display:flex;align-items:center;gap:10px}
.host-avatar{
width:30px;height:30px;
border-radius:8px;
background:var(--surface-subtle);
border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
color:var(--text2);
flex-shrink:0;
}
.host-primary{font-weight:600;color:var(--text);font-size:0.83rem}
.host-secondary{font-size:0.72rem;color:var(--text3);font-family:var(--font-mono)}

.search-bar{
display:flex;
align-items:center;
gap:8px;
background:var(--surface);
border:1px solid var(--border-strong);
border-radius:var(--radius-sm);
padding:0 12px;
height:34px;
min-width:240px;
transition:all 0.15s var(--ease);
}
.search-bar:focus-within{border-color:var(--accent-brand);box-shadow:0 0 0 3px rgba(37,99,235,0.12)}
.search-bar input{border:none;outline:none;font-size:0.8125rem;flex:1;font-family:var(--font);background:transparent;color:var(--text)}
.search-bar .search-icon{color:var(--text3);display:flex;align-items:center}

.tabs{
display:inline-flex;
gap:4px;
background:var(--surface-subtle);
border:1px solid var(--border);
padding:4px;
border-radius:11px;
margin-bottom:18px;
overflow-x:auto;
}
.tab{
padding:7px 14px;
font-size:0.8rem;
font-weight:500;
color:var(--text2);
cursor:pointer;
border-radius:8px;
transition:all 0.15s var(--ease);
white-space:nowrap;
background:transparent;
border:none;
font-family:var(--font);
display:inline-flex;align-items:center;gap:6px;
}
.tab:hover{color:var(--text)}
.tab.active{
background:var(--surface);
color:var(--text);
box-shadow:var(--shadow-xs);
font-weight:600;
}
.tab.tab-locked,
.tab:disabled{
opacity:0.45;
cursor:not-allowed;
color:var(--text3);
pointer-events:none;
}
.tab.tab-locked:hover,
.tab:disabled:hover{color:var(--text3)}

.modal-backdrop{
position:fixed;inset:0;
background:rgba(9,9,11,0.35);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
z-index:200;
display:flex;align-items:center;justify-content:center;
animation:fadeIn 0.15s;
}
.modal{
background:var(--surface);
border:1px solid var(--border-strong);
border-radius:18px;
box-shadow:var(--shadow-lg);
width:92%;
max-width:460px;
max-height:85vh;
overflow-y:auto;
animation:slideUp 0.2s var(--ease);
}
.modal-header{
padding:18px 22px 14px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--border);
}
.modal-header h3{font-size:0.98rem}
.modal-close{
background:var(--surface-subtle);
border:1px solid var(--border);
width:28px;height:28px;
border-radius:8px;
font-size:15px;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
color:var(--text2);
transition:all 0.15s;
}
.modal-close:hover{background:var(--surface-hover);color:var(--text)}
.modal-body{padding:18px 22px}
.modal-footer{padding:12px 22px 18px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--border)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}

.toast-wrap{
position:fixed;
bottom:20px;right:20px;
z-index:300;
display:flex;
flex-direction:column;
gap:8px;
pointer-events:none;
}
.toast{
pointer-events:auto;
background:rgba(255,255,255,0.95);
backdrop-filter:blur(16px);
border:1px solid var(--border-strong);
border-radius:12px;
box-shadow:var(--shadow-md);
padding:11px 15px;
font-size:0.8125rem;
font-weight:500;
display:flex;
align-items:center;
gap:10px;
animation:slideIn 0.22s var(--ease);
min-width:250px;
max-width:360px;
color:var(--text);
}
.toast.removing{animation:slideOut 0.2s forwards}
.toast-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;flex-shrink:0}
.toast-success .toast-icon{background:var(--success-soft);color:var(--success)}
.toast-error .toast-icon{background:var(--danger-soft);color:var(--danger)}
.toast-warn .toast-icon{background:var(--warn-soft);color:var(--warn)}
.toast-info .toast-icon{background:var(--accent-brand-soft);color:var(--accent-brand)}

.loader-wrap{display:flex;align-items:center;justify-content:center;padding:70px 0}
.spinner{
width:24px;height:24px;
border:2px solid var(--border-strong);
border-top-color:var(--text);
border-radius:50%;
animation:spin 0.65s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.skeleton{
background:linear-gradient(90deg,var(--surface-subtle) 25%,var(--surface-hover) 50%,var(--surface-subtle) 75%);
background-size:200% 100%;
animation:shimmer 1.5s infinite;
border-radius:var(--radius-xs);
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-line{height:14px;margin-bottom:12px}
.skel-card{height:76px}

.term-window{
border-radius:14px;
overflow:hidden;
border:1px solid rgba(0,0,0,0.18);
box-shadow:var(--shadow-md);
background:#0c0c0e;
}
.term-titlebar{
background:#18181b;
padding:10px 14px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid rgba(255,255,255,0.07);
}
.term-dots{display:flex;gap:7px}
.term-dots span{width:11px;height:11px;border-radius:50%;display:inline-block}
.term-dots span:nth-child(1){background:#ff5f56}
.term-dots span:nth-child(2){background:#ffbd2e}
.term-dots span:nth-child(3){background:#27c93f}
.term-title{font-family:var(--font-mono);font-size:0.74rem;color:#a1a1aa}
.term{
background:#0c0c0e;
color:#e4e4e7;
font-family:var(--font-mono);
font-size:0.8rem;
padding:16px;
min-height:320px;
max-height:480px;
overflow-y:auto;
line-height:1.65;
white-space:pre-wrap;
word-break:break-all;
}
.term-input{
display:flex;
background:#121215;
border-top:1px solid rgba(255,255,255,0.07);
}
.term-input span{
color:#10b981;
padding:0 8px 0 14px;
font-family:var(--font-mono);
font-size:0.8rem;
display:flex;align-items:center;
height:40px;
}
.term-input input{
flex:1;
background:transparent;
color:#f4f4f5;
border:none;
padding:0 12px 0 4px;
height:40px;
font-family:var(--font-mono);
font-size:0.8rem;
outline:none;
}

.file-list{list-style:none}
.file-item{
display:flex;
align-items:center;
gap:12px;
padding:9px 12px;
border-radius:var(--radius-xs);
cursor:pointer;
transition:background 0.12s;
font-size:0.82rem;
border-bottom:1px solid var(--border);
}
.file-item:last-child{border-bottom:none}
.file-item:hover{background:var(--surface-subtle)}
.file-icon{width:28px;height:28px;border-radius:7px;background:var(--surface-subtle);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);flex-shrink:0}
.file-name{flex:1;font-weight:500;color:var(--text)}
.file-size{color:var(--text3);font-size:0.75rem;font-family:var(--font-mono)}

.breadcrumb{
display:flex;
align-items:center;
gap:4px;
font-size:0.78rem;
color:var(--text3);
margin-bottom:12px;
flex-wrap:wrap;
background:var(--surface-subtle);
padding:7px 12px;
border-radius:8px;
border:1px solid var(--border);
}
.breadcrumb span{cursor:pointer;color:var(--text);font-weight:500}
.breadcrumb span:hover{color:var(--accent-brand)}
.breadcrumb .sep{color:var(--text3);cursor:default}

.screen-view{
background:#09090b;
border-radius:12px;
overflow:hidden;
position:relative;
border:1px solid var(--border-strong);
aspect-ratio:16/9;
display:flex;align-items:center;justify-content:center;
}
.screen-view canvas{width:100%;height:100%;object-fit:contain;display:block;cursor:crosshair}

.bot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.bot-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:16px 18px;
cursor:pointer;
transition:all 0.18s var(--ease);
box-shadow:var(--shadow-xs);
}
.bot-card:hover{
border-color:var(--border-strong);
box-shadow:var(--shadow-md);
transform:translateY(-2px);
}
.bot-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.bot-card-name{font-weight:600;font-size:0.88rem;color:var(--text);display:flex;align-items:center;gap:8px}
.bot-card-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:10px;border-top:1px solid var(--border);font-size:0.74rem;color:var(--text2)}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px}
.tool-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:16px;
cursor:pointer;
transition:all 0.16s var(--ease);
display:flex;
flex-direction:column;
gap:10px;
box-shadow:var(--shadow-xs);
}
.tool-card:hover{
border-color:var(--accent-brand);
box-shadow:var(--shadow-md);
transform:translateY(-2px);
}
.tool-icon{
width:36px;height:36px;
border-radius:9px;
background:var(--surface-subtle);
border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
color:var(--text);
}
.tool-card:hover .tool-icon{background:var(--accent-brand-soft);color:var(--accent-brand);border-color:rgba(37,99,235,0.2)}
.tool-name{font-size:0.83rem;font-weight:600;color:var(--text)}
.tool-desc{font-size:0.72rem;color:var(--text3);line-height:1.4}

.arch-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.arch-card{
border:1.5px solid var(--border-strong);
border-radius:12px;
padding:16px;
cursor:pointer;
background:var(--surface);
transition:all 0.16s var(--ease);
display:flex;
flex-direction:column;
gap:6px;
}
.arch-card:hover{border-color:rgba(15,23,42,0.3)}
.arch-card.active{
border-color:var(--accent-brand);
background:rgba(37,99,235,0.03);
box-shadow:0 0 0 3px rgba(37,99,235,0.1);
}
.arch-card-top{display:flex;align-items:center;justify-content:space-between}
.arch-title{font-weight:600;font-size:0.88rem;color:var(--text)}
.arch-desc{font-size:0.76rem;color:var(--text2);line-height:1.45}

.toggle{
position:relative;
width:38px;height:21px;
background:#e4e4e7;
border-radius:9999px;
cursor:pointer;
transition:background 0.18s var(--ease);
border:none;
}
.toggle.on{background:var(--success)}
.toggle::after{
content:'';
position:absolute;
width:17px;height:17px;
border-radius:50%;
background:#fff;
top:2px;left:2px;
transition:transform 0.18s var(--ease);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.toggle.on::after{transform:translateX(17px)}

.form-group{margin-bottom:15px}
.form-label{
display:block;
font-size:0.74rem;
font-weight:600;
color:var(--text2);
margin-bottom:6px;
}

.collapsible-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 12px;
background:var(--surface-subtle);
border:1px solid var(--border);
border-radius:var(--radius-sm);
cursor:pointer;
font-weight:500;
font-size:0.8rem;
color:var(--text2);
margin-bottom:10px;
}
.collapsible-header .arrow{transition:transform 0.2s;font-size:10px;color:var(--text3)}
.collapsible-header.open .arrow{transform:rotate(90deg)}
.collapsible-body{overflow:hidden;max-height:0;transition:max-height 0.3s var(--ease)}
.collapsible-body.open{max-height:none;overflow:visible;padding-top:6px}

.empty-state{
text-align:center;
padding:40px 20px;
color:var(--text3);
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}
.empty-state-icon{
width:42px;height:42px;
border-radius:12px;
background:var(--surface-subtle);
border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
color:var(--text3);
margin-bottom:4px;
}
.empty-state-title{font-size:0.86rem;font-weight:600;color:var(--text2)}
.empty-state-text{font-size:0.78rem;color:var(--text3);max-width:280px}

.pagination{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:16px}
.page-btn{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
border:1px solid transparent;border-radius:7px;
background:transparent;
font-size:0.78rem;font-weight:500;
cursor:pointer;transition:all 0.15s;
font-family:var(--font);color:var(--text2);
}
.page-btn:hover{background:var(--surface-hover);color:var(--text)}
.page-btn.active{background:var(--text);color:#fff}
.page-btn:disabled{opacity:0.3;pointer-events:none}

.hamburger{
display:none;
position:fixed;
top:18px;left:16px;
z-index:150;
background:var(--surface);
color:var(--text);
border:1px solid var(--border-strong);
width:36px;height:36px;
border-radius:9px;
cursor:pointer;
align-items:center;
justify-content:center;
box-shadow:var(--shadow-sm);
}
.sidebar-overlay{
display:none;
position:fixed;inset:0;
background:rgba(0,0,0,0.3);
z-index:90;
backdrop-filter:blur(4px);
}

.file-upload-area{
border:2px dashed var(--border);
border-radius:10px;
padding:24px;
text-align:center;
cursor:pointer;
transition:border-color .15s,background .15s;
}
.file-upload-area:hover,.file-upload-area.drag-over{
border-color:var(--accent);
background:rgba(99,102,241,0.04);
}
.file-upload-icon{color:var(--text3);margin-bottom:6px}
.file-upload-text{color:var(--text2);font-size:0.82rem;font-weight:500}
.file-upload-hint{color:var(--text3);font-size:0.72rem;margin-top:4px}
.file-preview{
display:flex;
align-items:center;
gap:12px;
padding:10px 14px;
background:var(--bg2);
border-radius:8px;
margin-top:6px;
}
.chat-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:520px}
.chat-split-left{min-height:0;overflow:hidden}
.chat-split-right{min-height:0;overflow:hidden}
.chat-wrap{display:flex;flex-direction:column;height:100%}
.chat-msgs{flex:1;overflow-y:auto;padding:8px;background:var(--bg1);border-radius:8px;font-size:0.8rem;font-family:var(--mono);white-space:pre-wrap;color:var(--text2);border:1px solid var(--border)}
.chat-input-row{display:flex;gap:8px;margin-top:8px}
.chat-input-row input{flex:1}
.chat-bubble{margin:4px 0;padding:6px 10px;border-radius:8px;max-width:80%;font-size:0.82rem;word-break:break-word}
.chat-bubble.op{background:var(--accent);color:#fff;margin-left:auto;text-align:right;border-bottom-right-radius:2px}
.chat-bubble.them{background:var(--bg3);color:var(--text);border-bottom-left-radius:2px}
.debug-modal-body{max-height:500px;overflow-y:auto;font-size:0.74rem;font-family:var(--mono);white-space:pre-wrap;color:var(--text2);background:var(--bg1);padding:12px;border-radius:8px;border:1px solid var(--border)}
.search-bar{display:flex;gap:8px;margin-bottom:16px}
.search-bar input{flex:1}
.debug-btn{
width:26px;height:26px;border-radius:6px;border:1px solid var(--border);
background:var(--bg2);color:var(--accent);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
padding:0;transition:background .15s;
}
.debug-btn:hover{background:var(--accent);color:#fff}

@media(max-width:1100px){
.stat-grid{grid-template-columns:repeat(2,1fr)}
.grid-2{grid-template-columns:1fr}
.chat-split{grid-template-columns:1fr;height:auto}
.chat-split-left{height:400px}
.chat-split-right{height:300px}
}

@media(max-width:768px){
.sidebar{left:0;top:0;bottom:0;border-radius:0;transform:translateX(-100%)}
.sidebar.open{transform:translateX(0)}
.main-wrap{margin-left:0;padding:0 12px}
.hamburger{display:flex}
.sidebar-overlay.show{display:block}
.topbar{padding-left:52px}
.stat-grid,.arch-grid{grid-template-columns:1fr}
}