:root{
  --bg: #f4f6f8;
  --accent: #2d7cf6;
  --muted: #666;
  --sidebar: #ffffff;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;background:var(--bg);color:#222}
.centered{display:flex;align-items:center;justify-content:center;height:100vh}
.card{background:#fff;padding:20px;border-radius:10px;box-shadow:var(--shadow);width:320px}
input[type="text"],input[type="password"]{width:100%;padding:10px;border:1px solid #e6e9ee;border-radius:8px;margin-top:8px}
button{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
button.btn{background:transparent;color:inherit;border:none;font-size:16px;cursor:pointer}
.hide{display:none}
.topbar{position:fixed;top:0;left:0;right:0;height:56px;background:#fff;display:flex;align-items:center;padding:0 16px;box-shadow:var(--shadow);z-index:60}
.brand{font-weight:700;margin-left:12px}
.spacer{flex:1}
.sidebar{position:fixed;top:56px;left:0;bottom:0;width:220px;background:var(--sidebar);padding:16px;box-shadow:var(--shadow);overflow:auto;transition:transform .25s ease}
.sidebar.hidden{transform:translateX(-100%)}
.main{margin-top:56px;margin-left:220px;padding:24px;transition:margin-left .25s ease}
.main.full{margin-left:0}
.fixed-section{background:#fff;padding:12px;border-radius:8px;margin-bottom:16px;box-shadow:var(--shadow);position:sticky;top:64px}
.content .async-area{margin-top:12px}
.navlink{display:block;padding:8px 10px;color:var(--muted);text-decoration:none;border-radius:6px;margin-bottom:6px}
.navlink.active{background:rgba(45,124,246,0.08);color:var(--accent);font-weight:600}
.loader{padding:12px;background:#fff;border-radius:8px;box-shadow:var(--shadow)}
.news{background:#fff;padding:12px;border-radius:8px;margin-bottom:8px;box-shadow:var(--shadow)}
@media (max-width:700px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.visible{transform:none}
  .main{margin-left:0}
}