:root{font-family:Inter,system-ui,sans-serif;color:#e8eef8;background:#09111f}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}

.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,#17345d,#09111f 55%);padding:16px}
.card{width:min(420px,100%);padding:34px;border:1px solid #263854;border-radius:18px;background:#101c2e;box-shadow:0 24px 80px #0008}
.logo{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:#3976ff;font-weight:900}
.card h1{margin-bottom:6px}
.card p,small{color:#91a2bb}
.card label{display:grid;gap:7px;margin:18px 0;font-size:13px}

input,select,textarea{width:100%;padding:11px;border:1px solid #344760;border-radius:9px;background:#0b1627;color:#eef4ff;font-size:16px}
textarea{font-family:inherit}

button{padding:10px 14px;border:0;border-radius:9px;background:#3976ff;color:white;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;transition:opacity .15s}
button:disabled{opacity:.6;cursor:not-allowed}
button:hover:not(:disabled){filter:brightness(1.08)}

#login-btn{width:100%}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.error{color:#ff8b9b;margin-top:12px;min-height:18px;font-size:13px}

#portal{min-height:100vh;display:grid;grid-template-columns:230px 1fr}
aside{position:sticky;top:0;height:100vh;padding:22px 14px;background:#0d1828;border-right:1px solid #23334a;
  display:flex;flex-direction:column;gap:7px;overflow-y:auto}
aside button{text-align:left;background:transparent;color:#9caec6;justify-content:flex-start}
aside button:hover:not(:disabled){background:#182942;color:white}
.brand{font-size:21px;font-weight:900;padding:5px 10px 24px}
.brand span{color:#55c7ff}
.bottom{margin-top:auto}

.nav-toggle{display:none;position:fixed;top:14px;left:14px;z-index:20;width:42px;height:42px;
  background:#101d30;border:1px solid #263954;color:#e8eef8;font-size:18px;border-radius:9px}

main{padding:26px 32px;min-width:0}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
header h1{margin:4px 0 24px}
#identity{color:#9caec6;font-size:13px}

.grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px}
.panel,.metric{border:1px solid #263954;background:#101d30;border-radius:14px;padding:18px}
.metric strong{font-size:30px;display:block;margin-top:8px}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;min-width:480px}
.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid #263954;font-size:13px;white-space:nowrap}
.table td code{white-space:normal;word-break:break-all}

.pill{padding:4px 8px;border-radius:999px;background:#163d35;color:#73e6bc;font-size:12px}
.off{background:#48242d;color:#ff9dac}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .wide{grid-column:1/-1}

.notice{padding:12px;border-radius:9px;background:#123956;margin-bottom:14px;font-size:13px}
.notice.error-notice{background:#3a1a22;color:#ff9dac}

dialog{max-width:600px;width:92vw;border:1px solid #345070;border-radius:14px;background:#101d30;color:white;padding:24px}
dialog textarea{height:110px}
.dialog-actions{display:flex;gap:10px;margin-top:14px}

@media(max-width:850px){
  #portal{grid-template-columns:1fr}
  .nav-toggle{display:block}
  aside{position:fixed;left:0;top:0;bottom:0;width:230px;z-index:15;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:0 0 40px #000a}
  aside.open{transform:translateX(0)}
  main{padding:70px 16px 24px}
  .grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
}

@media(max-width:480px){
  .card{padding:24px 20px}
  .grid{grid-template-columns:1fr}
  header h1{font-size:20px}
}