:root{
  --bg-900:#0c0f14; --bg-800:#121722; --bg-700:#1a2130;
  --border:#2b3344; --text:#d8e1ff; --muted:#9aa7c0;
  --accent:#00d4ff; --accent-2:#9d7cff; --danger:#ff4d6d;
  --card:#141a24; --card-2:#0f141d; --white-90:rgba(255,255,255,.9);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg-900); color:var(--text);
  font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

a{color:var(--accent); text-decoration:none}
a:hover{opacity:.9}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:var(--bg-800); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; font-size:16px}
.logo-dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:inline-block}

.topnav .btn{
  background:var(--card); border:1px solid var(--border); padding:6px 10px; border-radius:10px; color:var(--text)
}

.layout{display:grid; grid-template-columns:240px 1fr; min-height:calc(100vh - 48px)}
.sidebar{
  background:var(--bg-800); border-right:1px solid var(--border);
  padding:12px; position:sticky; top:0; height:calc(100vh - 48px); overflow:auto;
}
.sidebar ul{list-style:none; padding:0; margin:0}
.sidebar li{margin:6px 0}
.sidebar a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  color:var(--text); background:transparent; border:1px solid transparent;
}
.sidebar a:hover{background:var(--card); border-color:var(--border)}
.content{padding:18px}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.form{max-width:420px; margin:40px auto}
.input{
  width:100%; padding:10px 12px; background:var(--card-2); color:var(--text);
  border:1px solid var(--border); border-radius:12px; outline:none;
}
.input:focus{border-color:var(--accent)}
.btn-primary{
  width:100%; padding:10px 12px; border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#081018; font-weight:700;
}
.btn-muted{
  padding:8px 12px; border:1px solid var(--border); background:var(--card-2);
  color:var(--text); border-radius:10px;
}

.flash{padding:10px 12px; border-radius:10px; margin:8px 0; border:1px solid var(--border); background:var(--card)}
.flash.error{border-color:var(--danger); color:#ffd7de}
.flash.success{border-color:#2dd4bf; color:#d1fff7}

.footer{
  border-top:1px solid var(--border); background:var(--bg-800);
  padding:10px 16px; text-align:center;
}

/* Login page centering */
.page-login{
  display:grid; place-items:center; min-height:100vh;
}
.login-box{width:100%; max-width:420px}
.login-title{margin-bottom:10px; text-align:center; font-size:20px}