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

/* ===== Reset ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#f4f4f5;color:#09090b;font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}

/* ===== Shell ===== */
.shell{width:1440px;margin:0 auto;background:#ffffff;min-height:100vh;display:grid;grid-template-columns:248px 1fr}
.main-full{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f4f4f5}

/* ===== Sidebar ===== */
.sidebar{position:sticky;top:0;height:100vh;border-right:1px solid #e4e4e7;background:#fafafa;display:flex;flex-direction:column;z-index:20}
.brand{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid #e4e4e7}
.brand-mark{width:30px;height:30px;border-radius:8px;background:#2563eb;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;letter-spacing:-.02em}
.brand-name{font-weight:600;font-size:14px;letter-spacing:-.01em}
.brand-sub{font-size:11px;color:#71717a;margin-top:1px}

.nav{padding:14px 12px;flex:1;overflow:auto}
.nav-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#a1a1aa;padding:10px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font-size:13.5px;color:#3f3f46;margin-bottom:1px;cursor:pointer;border:1px solid transparent;transition:background .1s,color .1s}
.nav-item:hover{background:#f4f4f5;color:#09090b}
.nav-item.active{background:#ffffff;color:#09090b;font-weight:500;border:1px solid #e4e4e7;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.nav-item svg{width:16px;height:16px;color:#71717a;flex-shrink:0}
.nav-item.active svg{color:#2563eb}
.nav-item .badge{margin-left:auto;font-size:11px;background:#e4e4e7;color:#52525b;padding:1px 6px;border-radius:999px;font-weight:500}
.nav-item.active .badge{background:#dbeafe;color:#1d4ed8}

.side-foot{border-top:1px solid #e4e4e7;padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;position:relative}
.side-foot svg{margin-left:auto;color:#a1a1aa;flex-shrink:0}
.avatar{width:30px;height:30px;border-radius:999px;background:linear-gradient(135deg,#60a5fa,#2563eb);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600;flex-shrink:0}
.user-name{font-size:13px;font-weight:500}
.user-role{font-size:11px;color:#71717a}

.user-dropdown{position:absolute;bottom:100%;left:14px;right:14px;background:#fff;border:1px solid #e4e4e7;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);padding:4px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s}
.user-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
.user-dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;font-size:13px;color:#3f3f46;cursor:pointer}
.user-dropdown-item:hover{background:#f4f4f5;color:#09090b}
.user-dropdown-item svg{width:14px;height:14px}

/* ===== Header ===== */
.header{height:60px;border-bottom:1px solid #e4e4e7;display:flex;align-items:center;gap:14px;padding:0 28px;background:#fff;position:sticky;top:0;z-index:10}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:#71717a}
.crumbs strong{color:#09090b;font-weight:500}
.crumbs svg{width:12px;height:12px}
.search{margin-left:auto;width:320px;height:36px;border:1px solid #e4e4e7;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#fafafa;font-size:13px;color:#71717a;position:relative}
.search input{border:none;outline:none;background:none;flex:1;font-size:13px;color:#09090b}
.search input::placeholder{color:#a1a1aa}
.kbd{font-family:'JetBrains Mono',monospace;font-size:10px;color:#71717a;border:1px solid #e4e4e7;background:#fff;padding:1px 5px;border-radius:4px}
.search-hint{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e4e4e7;border-radius:8px;padding:12px;font-size:13px;color:#71717a;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.08);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.search-hint.show{opacity:1;visibility:visible}
.icon-btn{width:36px;height:36px;border:1px solid #e4e4e7;border-radius:8px;display:grid;place-items:center;color:#52525b;background:#fff;position:relative;transition:background .1s}
.icon-btn:hover{background:#fafafa}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;background:#ef4444;border:2px solid #fff;border-radius:999px}
.header-dropdown{position:absolute;top:52px;right:28px;background:#fff;border:1px solid #e4e4e7;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);padding:4px;min-width:140px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:20}
.header-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
.header-dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;font-size:13px;color:#3f3f46;cursor:pointer}
.header-dropdown-item:hover{background:#f4f4f5;color:#09090b}
.header-dropdown-item svg{width:14px;height:14px}

/* ===== Page ===== */
.page{padding:28px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.h1{font-size:24px;font-weight:600;letter-spacing:-.02em}
.sub{font-size:14px;color:#71717a;margin-top:4px}
.actions{display:flex;gap:8px}
.btn{height:36px;padding:0 14px;border-radius:8px;border:1px solid #e4e4e7;background:#fff;font-size:13px;font-weight:500;color:#09090b;display:inline-flex;align-items:center;gap:7px;transition:background .1s,transform .1s}
.btn:hover{background:#fafafa}
.btn:active{transform:scale(0.97)}
.btn.primary{background:#2563eb;color:#fff;border-color:#2563eb}
.btn.primary:hover{background:#1d4ed8}
.btn svg{width:14px;height:14px}
.btn.spinning svg{animation:spin .5s linear}

/* ===== Stats ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat{border:1px solid #e4e4e7;border-radius:10px;padding:16px 18px;background:#fff;animation:fadeSlideUp .35s ease both}
.stat:nth-child(2){animation-delay:50ms}
.stat:nth-child(3){animation-delay:100ms}
.stat:nth-child(4){animation-delay:150ms}
.stat-label{font-size:12px;color:#71717a;display:flex;align-items:center;gap:6px}
.stat-val{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:6px;display:flex;align-items:baseline;gap:8px}
.stat-val small{font-size:12px;font-weight:500;color:#16a34a;background:#dcfce7;padding:2px 6px;border-radius:4px}
.stat-val small.muted{color:#71717a;background:#f4f4f5}
.stat-meta{font-size:12px;color:#a1a1aa;margin-top:4px}

/* ===== Tabs ===== */
.tabs-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tabs{display:inline-flex;background:#f4f4f5;border:1px solid #e4e4e7;border-radius:8px;padding:3px}
.tab{padding:6px 14px;font-size:13px;font-weight:500;color:#52525b;border-radius:6px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.tab:hover{color:#09090b}
.tab.active{background:#fff;color:#09090b;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tab .count{font-size:11px;color:#71717a;background:#e4e4e7;padding:1px 6px;border-radius:999px;transition:background .1s,color .1s}
.tab.active .count{background:#dbeafe;color:#1d4ed8}
.tab svg{width:13px;height:13px}
.view-toggle{display:inline-flex;border:1px solid #e4e4e7;border-radius:8px;padding:3px;background:#fff}
.view-toggle button{padding:5px 10px;font-size:12px;color:#71717a;border-radius:5px;display:inline-flex;align-items:center;gap:5px;transition:background .1s,color .1s}
.view-toggle button:hover{color:#09090b}
.view-toggle button.on{background:#f4f4f5;color:#09090b}

/* ===== Split layout ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;animation:fadeIn .2s ease}
.card{border:1px solid #e4e4e7;border-radius:12px;background:#fff;overflow:hidden;animation:fadeIn .2s ease}
.card-head{padding:14px 18px;border-bottom:1px solid #e4e4e7;display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:14px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.card-title .pip{width:7px;height:7px;border-radius:999px;background:#2563eb}
.card-title .pip.amber{background:#f59e0b}
.card-meta{font-size:12px;color:#71717a}

/* ===== Table ===== */
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:#71717a;text-align:left;padding:10px 18px;background:#fafafa;border-bottom:1px solid #e4e4e7;cursor:pointer;user-select:none;position:relative}
thead th:hover{color:#09090b}
.sort-ind{font-size:10px;color:#a1a1aa;margin-left:2px}
tbody td{padding:11px 18px;border-bottom:1px solid #f4f4f5;color:#27272a;vertical-align:middle}
tbody tr{transition:background .1s}
tbody tr:hover{background:#fafafa}
tbody tr:last-child td{border-bottom:none}
.mono{font-family:'JetBrains Mono',monospace;font-size:12.5px}
.name-cell{display:flex;align-items:center;gap:9px;white-space:nowrap}
.ava-sm{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:10px;font-weight:600;color:#fff;flex-shrink:0}
.loc{display:inline-flex;align-items:center;gap:5px;color:#52525b;white-space:nowrap}
.loc svg{width:11px;height:11px;color:#a1a1aa;flex-shrink:0}

.temp{font-weight:500}
.temp.hot{color:#dc2626}
.temp.cold{color:#2563eb}

.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:500;border:1px solid transparent;white-space:nowrap}
.chip .d{width:5px;height:5px;border-radius:999px;flex-shrink:0}
.chip.ok{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.chip.ok .d{background:#16a34a}
.chip.warn{background:#fffbeb;color:#b45309;border-color:#fde68a}
.chip.warn .d{background:#f59e0b}
.chip.repl{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.chip.repl .d{background:#2563eb}

.equip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#3f3f46;white-space:nowrap}
.equip svg{width:13px;height:13px;color:#71717a;flex-shrink:0}

.note{color:#52525b;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;display:block}

.card-foot{padding:10px 18px;border-top:1px solid #e4e4e7;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#71717a;background:#fafafa}
.pager{display:flex;gap:4px}
.pager button{height:26px;min-width:26px;padding:0 8px;border:1px solid #e4e4e7;background:#fff;border-radius:6px;font-size:12px;color:#52525b;cursor:pointer;transition:background .1s,transform .1s}
.pager button:hover:not(:disabled):not(.on){background:#f4f4f5}
.pager button:active:not(:disabled){transform:scale(0.97)}
.pager button.on{background:#09090b;color:#fff;border-color:#09090b}
.pager button:disabled{opacity:.4;cursor:default}

/* ===== Filter pills ===== */
.filter-row{padding:10px 18px;border-bottom:1px solid #e4e4e7;display:flex;gap:8px;align-items:center;background:#fff}
.pill{font-size:12px;color:#52525b;padding:4px 10px;border:1px solid #e4e4e7;border-radius:999px;background:#fff;display:inline-flex;align-items:center;gap:5px;cursor:pointer;transition:background .1s,color .1s,border-color .1s}
.pill:hover:not(.on){background:#f4f4f5}
.pill.on{background:#09090b;color:#fff;border-color:#09090b}
.pill svg{width:11px;height:11px}

/* ===== Footer ===== */
.footer{border-top:1px solid #e4e4e7;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#71717a;margin-top:28px}
.footer .links{display:flex;gap:18px}
.footer .status{display:inline-flex;align-items:center;gap:6px}
.footer .status .d{width:7px;height:7px;border-radius:999px;background:#16a34a;box-shadow:0 0 0 3px #dcfce7;flex-shrink:0}
.footer-link{cursor:pointer;transition:color .1s}
.footer-link:hover{color:#09090b}

/* ===== Login ===== */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%;background:#f4f4f5}
.login-container{background:#fff;border:1px solid #e4e4e7;border-radius:16px;padding:40px;width:400px;box-shadow:0 4px 24px rgba(0,0,0,.06);animation:fadeSlideUp .35s ease both}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.login-title{font-size:18px;font-weight:600;letter-spacing:-.01em}
.login-subtitle{font-size:12px;color:#71717a;margin-top:1px}
.login-heading{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.login-desc{font-size:14px;color:#71717a;margin-bottom:20px}
.login-cards{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.login-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e4e4e7;border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.login-card:hover{border-color:#d4d4d8;background:#fafafa}
.login-card.selected{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 3px #dbeafe}
.login-avatar{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:600;flex-shrink:0}
.login-card-info{flex:1}
.login-card-name{font-size:14px;font-weight:500}
.login-card-role{font-size:12px;color:#71717a;margin-top:1px}
.login-card svg{color:#a1a1aa;flex-shrink:0}
.login-card.selected svg{color:#2563eb}
.login-btn{width:100%;justify-content:center;height:40px;font-size:14px}
.login-btn:disabled{opacity:.5;cursor:not-allowed}

/* ===== Toast ===== */
#toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column-reverse;gap:8px;z-index:9999;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;background:#fff;border:1px solid #e4e4e7;box-shadow:0 4px 16px rgba(0,0,0,.1);font-size:13px;font-weight:500;color:#09090b;pointer-events:auto;opacity:0;transform:translateX(20px);transition:opacity .25s,transform .25s}
.toast.toast-show{opacity:1;transform:translateX(0)}
.toast.toast-hide{opacity:0;transform:translateX(20px)}
.toast-icon{display:flex;flex-shrink:0}
.toast-success .toast-icon{color:#16a34a}
.toast-info .toast-icon{color:#2563eb}
.toast-error .toast-icon{color:#ef4444}
.toast-warning .toast-icon{color:#f59e0b}

/* ===== Animations ===== */
@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.page-enter{animation:fadeIn .2s ease}