*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0f;
  --bg2:#111118;
  --bg3:#1a1a24;
  --card:#16161f;
  --border:#2a2a3a;
  --border2:#3a3a50;
  --text:#e8e8f0;
  --text2:#9090a8;
  --text3:#5a5a78;
  --accent:#6c63ff;
  --accent2:#8b85ff;
  --accent-glow:rgba(108,99,255,.25);
  --red:#ff4757;
  --green:#2ed573;
  --amber:#ffa502;
  --blue:#1e90ff;
  --radius:12px;
  --radius-sm:8px;
  --font:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  min-height:100vh;
  line-height:1.5;
}

.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{
  background:var(--bg2);
  border-right:1px solid var(--border);
  padding:24px 16px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.main{padding:32px;width:100%}

.logo{font-size:18px;font-weight:700;color:var(--text);margin-bottom:32px;display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-icon{width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--text2);text-decoration:none;font-size:14px;margin-bottom:4px;transition:all .15s}
.nav a:hover,.nav a.active{background:var(--bg3);color:var(--text)}
.nav a .icon{width:18px;text-align:center;font-size:15px}
.sidebar-section{font-size:11px;font-weight:600;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;padding:16px 12px 8px;margin-top:16px}
.acct-avatar{width:24px;height:24px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.acct-avatar img{width:100%;height:100%;object-fit:cover}
.acct-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;color:var(--text2);margin-bottom:4px}
.acct-item:hover{background:var(--bg3);color:var(--text)}

.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;border:none;text-decoration:none;transition:all .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2);box-shadow:0 0 20px var(--accent-glow)}
.btn-ghost{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border2);color:var(--text)}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.page-title{font-size:26px;font-weight:700;letter-spacing:-.02em}

.form-input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;color:var(--text);font-size:14px;font-family:inherit}
.form-input:focus{outline:none;border-color:var(--accent)}

.flash{padding:12px 16px;background:rgba(46,213,115,.1);border:1px solid rgba(46,213,115,.3);color:var(--green);border-radius:var(--radius-sm);margin-bottom:20px;font-size:14px}
.flash.error{background:rgba(255,71,87,.12);border-color:rgba(255,71,87,.3);color:var(--red)}

@media (max-width: 960px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;overflow:visible;border-right:none;border-bottom:1px solid var(--border)}
  .main{padding:20px}
}