:root{
  --navy-950:#081b1e;
  --teal-600:#0f8b8d;
  --teal-500:#14a3a6;
  --paper:#f2f7f7;
  --ink:#0b1e20;
  --ink-soft:#4a6265;
  --ink-faint:#8aa0a2;
  --line:rgba(11,30,32,.12);
  --ok:#1d7d4c;
  --ok-bg:#e6f6ee;
  --warn:#a9660d;
  --warn-bg:#fdf1de;
  --err:#b3261e;
  --err-bg:#fce8e6;
  --sidebar-w:260px;
  --header-h:60px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;line-height:1.55}
a{color:var(--teal-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 8px;font-weight:700}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

.app-shell{min-height:100vh}
.app-topheader{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:30;
  background:var(--navy-950);color:#fff;display:flex;align-items:center;gap:14px;padding:0 18px;
}
.app-brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:1.05rem}
.app-brand span{color:var(--teal-500)}
.sidebar-toggle{display:none;background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer}
.header-spacer{flex:1}
.header-user{display:flex;align-items:center;gap:10px}
.header-avatar{width:34px;height:34px;border-radius:50%;background:var(--teal-600);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem}
.header-user-name{font-size:.86rem;font-weight:600}
.logout-link{color:#cfe; font-size:.78rem}

.app-body{display:flex;padding-top:var(--header-h)}
.app-sidebar{width:var(--sidebar-w);flex:none;background:#fff;border-right:1px solid var(--line);min-height:calc(100vh - var(--header-h));padding:18px 12px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--ink-soft);font-size:.9rem;font-weight:600;margin-bottom:2px}
.nav-item.active,.nav-item:hover{background:var(--paper);color:var(--teal-600);text-decoration:none}
.app-main{flex:1;padding:26px 28px;min-width:0}

.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:20px;box-shadow:0 1px 2px rgba(11,30,32,.04)}
.sub{color:var(--ink-soft);font-size:.88rem}

.btn{display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:.88rem;padding:.6em 1.1em;border-radius:8px;border:1.5px solid transparent;cursor:pointer;background:var(--teal-600);color:#fff}
.btn:hover{background:var(--teal-500)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--teal-600);color:var(--teal-600)}
.btn.danger{background:var(--err)}
.btn.small{padding:.4em .8em;font-size:.8rem}
.btn:disabled{opacity:.6;cursor:not-allowed}

input,select{font-family:inherit;font-size:.9rem;padding:.55em .7em;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);margin-top:4px;width:100%}
label{font-size:.78rem;font-weight:600;color:var(--ink-soft);display:block;margin-top:12px}

table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}

.pill{display:inline-flex;align-items:center;gap:5px;padding:.25em .7em;border-radius:99px;font-size:.76rem;font-weight:600}
.pill::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor}
.status-pill.online{background:var(--ok-bg);color:var(--ok)}
.status-pill.offline{background:var(--err-bg);color:var(--err)}
.status-pill.provisioning{background:var(--warn-bg);color:var(--warn)}

.msg{margin-top:10px;font-size:.85rem;display:none}
.msg.show{display:block}
.msg.show.ok{color:var(--ok)}
.msg.show.err{color:var(--err)}
.empty-state{padding:30px;text-align:center;color:var(--ink-faint);font-size:.88rem}

.back-link{display:inline-block;margin-bottom:14px;font-size:.85rem;font-weight:600}

@media (max-width:860px){
  .sidebar-toggle{display:block}
  .app-sidebar{position:fixed;left:-280px;top:var(--header-h);bottom:0;z-index:25;transition:left .2s;box-shadow:2px 0 10px rgba(0,0,0,.08)}
  .app-sidebar.show{left:0}
  .app-main{padding:18px}
}