/* ===================== Root & Reset ===================== */
:root{
  --bg-deep:#0a0e1a;
  --bg-deep-2:#0d1326;
  --glass-bg: rgba(255,255,255,0.055);
  --glass-bg-strong: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.12);
  --glass-border-soft: rgba(255,255,255,0.08);
  --text-primary:#f3f5fb;
  --text-muted:#9aa4ba;
  --text-dim:#6b7589;
  --accent-1:#8b5cf6;
  --accent-2:#06b6d4;
  --accent-3:#ec4899;
  --accent-grad: linear-gradient(135deg,#8b5cf6 0%, #6366f1 45%, #06b6d4 100%);
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.35);
  --sidebar-w:264px;
  --topbar-h:76px;
  font-size:16px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }

body{
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--text-primary);
  background: var(--bg-deep);
  min-height:100vh;
  overflow-x:hidden;
}

/* ===================== Animated Aurora Background ===================== */
.aurora-bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background: radial-gradient(ellipse at top, #10152b 0%, var(--bg-deep) 60%);
}
.aurora-bg .blob{
  position:absolute; border-radius:50%; filter: blur(90px); opacity:0.45;
  animation: float 22s ease-in-out infinite;
}
.aurora-bg .blob1{ width:520px; height:520px; background:#8b5cf6; top:-140px; left:-100px; animation-duration:26s; }
.aurora-bg .blob2{ width:460px; height:460px; background:#06b6d4; bottom:-160px; right:-80px; animation-duration:30s; animation-delay:-6s; }
.aurora-bg .blob3{ width:380px; height:380px; background:#ec4899; top:40%; left:60%; animation-duration:24s; animation-delay:-12s; opacity:0.3; }
.aurora-bg .blob4{ width:300px; height:300px; background:#10b981; top:60%; left:5%; animation-duration:28s; animation-delay:-3s; opacity:0.22; }

@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(60px,-40px) scale(1.08); }
  66%{ transform: translate(-40px,30px) scale(0.95); }
}

.noise-overlay{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================== Glass Utility ===================== */
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}
.glass-strong{
  background: var(--glass-bg-strong);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.15); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.25); }

/* ===================== Login Page ===================== */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  width:100%; max-width:420px; padding:44px 38px; text-align:center;
  animation: cardIn 0.6s cubic-bezier(.2,.8,.2,1);
}
@keyframes cardIn{ from{ opacity:0; transform: translateY(24px) scale(0.98);} to{opacity:1; transform:none;} }

.login-logo{
  width:68px; height:68px; margin:0 auto 18px; border-radius:20px;
  background: var(--accent-grad); display:flex; align-items:center; justify-content:center;
  font-size:30px; box-shadow: 0 10px 30px rgba(139,92,246,0.45);
}
.login-card h1{ font-size:24px; font-weight:800; letter-spacing:-0.02em; margin-bottom:6px; }
.login-card p.subtitle{ color:var(--text-muted); font-size:14px; margin-bottom:30px; }

.field{ text-align:left; margin-bottom:16px; position:relative; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--text-muted); margin-bottom:7px; letter-spacing:0.02em; text-transform:uppercase; }
.input, select.input, textarea.input{
  width:100%; padding:13px 16px; border-radius:var(--radius-md); border:1px solid var(--glass-border);
  background: rgba(255,255,255,0.04); color:var(--text-primary); font-size:14.5px; font-family:inherit;
  outline:none; transition: all 0.2s ease;
}
.input:focus, select.input:focus, textarea.input:focus{
  border-color: var(--accent-1); background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 4px rgba(139,92,246,0.15);
}
.input::placeholder{ color:var(--text-dim); }
textarea.input{ resize:vertical; min-height:80px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12.5px 22px; border-radius:var(--radius-md); border:none; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:700; letter-spacing:0.01em;
  transition: all 0.2s ease; white-space:nowrap;
}
.btn-primary{ background: var(--accent-grad); color:#fff; box-shadow: 0 8px 22px rgba(99,102,241,0.35); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(99,102,241,0.48); }
.btn-primary:active{ transform: translateY(0); }
.btn-ghost{ background: rgba(255,255,255,0.06); color:var(--text-primary); border:1px solid var(--glass-border); }
.btn-ghost:hover{ background: rgba(255,255,255,0.11); }
.btn-danger{ background: rgba(239,68,68,0.15); color:#fca5a5; border:1px solid rgba(239,68,68,0.3); }
.btn-danger:hover{ background: rgba(239,68,68,0.25); }
.btn-sm{ padding:7px 13px; font-size:12.5px; border-radius:10px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; transform:none !important; }
.btn-icon{ width:38px; height:38px; padding:0; border-radius:12px; }

.login-error{
  background: rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.3); color:#fca5a5;
  padding:10px 14px; border-radius:12px; font-size:13px; margin-bottom:16px; display:none;
}
.login-foot{ margin-top:22px; font-size:12.5px; color:var(--text-dim); }
.demo-accounts{ margin-top:18px; padding-top:18px; border-top:1px solid var(--glass-border-soft); text-align:left; }
.demo-accounts summary{ cursor:pointer; font-size:12.5px; color:var(--text-muted); font-weight:600; }
.demo-list{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.demo-item{ font-size:12px; color:var(--text-dim); display:flex; justify-content:space-between; background:rgba(255,255,255,0.03); padding:6px 10px; border-radius:8px; cursor:pointer; }
.demo-item:hover{ background:rgba(255,255,255,0.07); color:var(--text-primary); }

/* ===================== App Shell ===================== */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); position:fixed; top:16px; left:16px; bottom:16px; z-index:40;
  display:flex; flex-direction:column; padding:22px 16px; transition: transform 0.3s ease;
}
.sidebar-brand{ display:flex; align-items:center; gap:12px; padding:0 8px 22px; border-bottom:1px solid var(--glass-border-soft); margin-bottom:18px; }
.sidebar-brand .logo-box{ width:40px; height:40px; border-radius:13px; background:var(--accent-grad); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.sidebar-brand .brand-text{ line-height:1.2; }
.sidebar-brand .brand-text strong{ font-size:15.5px; font-weight:800; display:block; }
.sidebar-brand .brand-text span{ font-size:11px; color:var(--text-dim); }

.nav-section-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); font-weight:700; padding:14px 12px 8px; }

.nav-list{ list-style:none; display:flex; flex-direction:column; gap:4px; flex:1; overflow-y:auto; }
.nav-item{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:14px; cursor:pointer;
  color:var(--text-muted); font-size:14px; font-weight:600; transition: all 0.18s ease; position:relative;
}
.nav-item i{ width:18px; text-align:center; font-size:15px; }
.nav-item:hover{ background: rgba(255,255,255,0.06); color:var(--text-primary); }
.nav-item.active{ background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(6,182,212,0.18)); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.nav-item .nav-badge{ margin-left:auto; background:var(--danger); color:#fff; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:20px; }

.sidebar-foot{ padding-top:14px; border-top:1px solid var(--glass-border-soft); margin-top:12px; }
.sidebar-user{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:14px; cursor:pointer; transition:0.2s; }
.sidebar-user:hover{ background: rgba(255,255,255,0.06); }
.sidebar-user .meta{ overflow:hidden; }
.sidebar-user .meta strong{ display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.sidebar-user .meta span{ font-size:11px; color:var(--text-dim); }

.avatar{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:#fff; flex-shrink:0; border:2px solid rgba(255,255,255,0.15);
}
.avatar-sm{ width:30px; height:30px; font-size:12px; }
.avatar-lg{ width:64px; height:64px; font-size:22px; }

/* Main area */
.main-area{ margin-left: calc(var(--sidebar-w) + 32px); flex:1; padding: 0 24px 40px; min-height:100vh; }

.topbar{
  position:sticky; top:16px; z-index:30; height:var(--topbar-h); margin-bottom:24px;
  display:flex; align-items:center; justify-content:space-between; padding:0 24px;
}
.topbar-left h2{ font-size:19px; font-weight:800; letter-spacing:-0.01em; }
.topbar-left p{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }

.topbar-right{ display:flex; align-items:center; gap:14px; }

.clock-box{ text-align:right; padding-right:14px; border-right:1px solid var(--glass-border-soft); }
.clock-time{ font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:0.02em; }
.clock-date{ font-size:11px; color:var(--text-dim); margin-top:1px; }

.icon-btn{
  width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.05); border:1px solid var(--glass-border); cursor:pointer; position:relative;
  color:var(--text-primary); font-size:16px; transition: all 0.18s ease;
}
.icon-btn:hover{ background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.icon-btn .dot{ position:absolute; top:7px; right:7px; width:9px; height:9px; border-radius:50%; background:var(--danger); border:2px solid var(--bg-deep); display:none; }
.icon-btn .dot.show{ display:block; }

.topbar-profile{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:5px 12px 5px 5px; border-radius:40px; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); }
.topbar-profile:hover{ background:rgba(255,255,255,0.1); }
.topbar-profile .meta strong{ font-size:13px; display:block; }
.topbar-profile .meta span{ font-size:10.5px; color:var(--text-dim); }

/* Dropdowns */
.dropdown{ position:relative; }
.dropdown-panel{
  position:absolute; top:calc(100% + 10px); right:0; width:340px; max-height:440px; overflow-y:auto;
  z-index:60; padding:10px; opacity:0; visibility:hidden; transform: translateY(-8px); transition: all 0.2s ease;
}
.dropdown-panel.open{ opacity:1; visibility:visible; transform:none; }
.dropdown-header{ display:flex; justify-content:space-between; align-items:center; padding:8px 10px 12px; border-bottom:1px solid var(--glass-border-soft); margin-bottom:6px; }
.dropdown-header h4{ font-size:14px; font-weight:800; }
.dropdown-header a{ font-size:11.5px; color:var(--accent-2); cursor:pointer; font-weight:700; }

.notif-item{ display:flex; gap:10px; padding:11px 10px; border-radius:12px; cursor:pointer; transition:0.15s; }
.notif-item:hover{ background: rgba(255,255,255,0.06); }
.notif-item.unread{ background: rgba(139,92,246,0.08); }
.notif-icon{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; }
.notif-body strong{ font-size:12.5px; display:block; }
.notif-body p{ font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.4; }
.notif-body time{ font-size:10px; color:var(--text-dim); }
.notif-empty{ text-align:center; padding:30px 10px; color:var(--text-dim); font-size:13px; }

.profile-menu-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--text-muted); }
.profile-menu-item:hover{ background:rgba(255,255,255,0.07); color:var(--text-primary); }
.profile-menu-item i{ width:16px; }
.profile-menu-item.danger{ color:#fca5a5; }

/* ===================== Content ===================== */
.tab-content{ display:none; animation: fadeUp 0.35s ease; }
.tab-content.active{ display:block; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

.grid{ display:grid; gap:20px; }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
@media(max-width:1100px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:720px){ .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} }

.stat-card{ padding:22px; position:relative; overflow:hidden; }
.stat-card .stat-icon{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px; }
.stat-card .stat-value{ font-size:28px; font-weight:800; letter-spacing:-0.02em; }
.stat-card .stat-label{ font-size:12.5px; color:var(--text-muted); margin-top:4px; font-weight:600; }
.stat-card .stat-trend{ font-size:11.5px; margin-top:10px; display:flex; align-items:center; gap:4px; font-weight:700; }

.section-card{ padding:24px; margin-bottom:22px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.section-head h3{ font-size:16.5px; font-weight:800; display:flex; align-items:center; gap:9px; }
.section-head p.sub{ font-size:12px; color:var(--text-dim); margin-top:3px; }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-size:11px; font-weight:700; }
.badge-dot{ width:6px; height:6px; border-radius:50%; }

.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; background:rgba(255,255,255,0.07); border:1px solid var(--glass-border); font-size:11.5px; font-weight:600; }

/* Task list / cards */
.task-row{
  display:flex; align-items:center; gap:14px; padding:16px; border-radius:16px; background: rgba(255,255,255,0.03);
  border:1px solid var(--glass-border-soft); margin-bottom:10px; transition: all 0.2s ease;
}
.task-row:hover{ background: rgba(255,255,255,0.06); transform: translateX(2px); }
.task-priority-bar{ width:4px; align-self:stretch; border-radius:4px; flex-shrink:0; }
.task-main{ flex:1; min-width:0; }
.task-main h4{ font-size:14.5px; font-weight:700; margin-bottom:4px; }
.task-main .task-desc{ font-size:12.5px; color:var(--text-muted); margin-bottom:8px; max-width:600px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--text-dim); align-items:center; }
.task-meta span{ display:flex; align-items:center; gap:5px; }
.task-actions{ display:flex; gap:8px; align-items:center; flex-shrink:0; }

.select-sm{ padding:7px 10px; font-size:12px; border-radius:10px; background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); color:var(--text-primary); cursor:pointer; }

.progress-track{ width:100%; height:9px; border-radius:20px; background: rgba(255,255,255,0.08); overflow:hidden; }
.progress-fill{ height:100%; border-radius:20px; background: var(--accent-grad); transition: width 0.6s ease; }

.empty-state{ text-align:center; padding:50px 20px; color:var(--text-dim); }
.empty-state i{ font-size:38px; margin-bottom:14px; opacity:0.4; }
.empty-state p{ font-size:13.5px; }

/* Table */
.data-table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.data-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-dim); padding:0 14px 8px; font-weight:700; }
.data-table td{ padding:14px; background: rgba(255,255,255,0.03); border-top:1px solid var(--glass-border-soft); border-bottom:1px solid var(--glass-border-soft); font-size:13.5px; }
.data-table tr td:first-child{ border-left:1px solid var(--glass-border-soft); border-radius:14px 0 0 14px; }
.data-table tr td:last-child{ border-right:1px solid var(--glass-border-soft); border-radius:0 14px 14px 0; }
.data-table tr:hover td{ background: rgba(255,255,255,0.055); }

/* Modal */
.modal-overlay{
  position:fixed; inset:0; background: rgba(5,7,15,0.65); backdrop-filter: blur(6px); z-index:100;
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition: all 0.25s ease; padding:20px;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-box{ width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:30px; transform: scale(0.94) translateY(10px); transition: transform 0.25s ease; }
.modal-overlay.open .modal-box{ transform:none; }
.modal-box.wide{ max-width:720px; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.modal-head h3{ font-size:18px; font-weight:800; }
.modal-close{ width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); }
.modal-close:hover{ color:#fff; background:rgba(255,255,255,0.12); }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:560px){ .form-row-2{grid-template-columns:1fr;} }

.checkbox-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.check-chip{ display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); cursor:pointer; font-size:12.5px; font-weight:600; transition:0.15s; }
.check-chip input{ accent-color: var(--accent-1); }
.check-chip.checked{ background: rgba(139,92,246,0.18); border-color: rgba(139,92,246,0.5); }

/* Toast */
.toast-wrap{ position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast{ padding:14px 18px; border-radius:14px; display:flex; align-items:center; gap:12px; min-width:280px; animation: toastIn 0.3s ease; }
@keyframes toastIn{ from{opacity:0; transform:translateX(40px);} to{opacity:1; transform:none;} }
.toast i{ font-size:17px; }
.toast.success i{ color: var(--success); }
.toast.error i{ color: var(--danger); }
.toast.info i{ color: var(--accent-2); }
.toast span{ font-size:13px; font-weight:600; }

/* Role / user cards */
.role-card{ padding:22px; }
.role-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.role-card-icon{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:19px; color:#fff; flex-shrink:0; }
.role-card h4{ font-size:15.5px; font-weight:800; }
.role-card .role-count{ font-size:11.5px; color:var(--text-dim); }
.role-card p.role-desc{ font-size:12.5px; color:var(--text-muted); margin-bottom:14px; line-height:1.5; min-height:38px; }
.role-card .can-assign-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-dim); font-weight:700; margin-bottom:8px; }
.role-card-foot{ display:flex; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--glass-border-soft); }

/* Target gauge */
.gauge-wrap{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.gauge-ring{ position:relative; width:150px; height:150px; flex-shrink:0; }
.gauge-ring svg{ transform:rotate(-90deg); }
.gauge-ring .gauge-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge-ring .gauge-pct{ font-size:26px; font-weight:800; }
.gauge-ring .gauge-sub{ font-size:10.5px; color:var(--text-dim); }

.link-card{ display:flex; align-items:center; gap:14px; padding:18px; transition:0.2s; cursor:pointer; }
.link-card:hover{ background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.link-card .link-icon{ width:42px; height:42px; border-radius:12px; background: var(--accent-grad); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.link-card .link-text h4{ font-size:14px; font-weight:700; margin-bottom:2px; }
.link-card .link-text p{ font-size:11.5px; color:var(--text-dim); }

/* Login role tag colors fallback */
.text-dim{ color:var(--text-dim); }
.text-muted{ color:var(--text-muted); }
.mt-2{margin-top:8px;} .mt-3{margin-top:14px;} .mb-2{margin-bottom:8px;}
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;} .gap-2{gap:8px;} .gap-3{gap:12px;}
.w-full{width:100%;}
.hidden{display:none !important;}

.sidebar-toggle{ display:none; }
.overlay-bg{ display:none; }

@media(max-width:980px){
  :root{ --sidebar-w:250px; }
  .sidebar{ transform: translateX(-120%); }
  .sidebar.open{ transform:none; }
  .main-area{ margin-left:0; padding:0 16px 40px; }
  .sidebar-toggle{ display:flex; }
  .topbar{ padding:0 16px; }
  .clock-box{ display:none; }
  .overlay-bg.show{ display:block; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:35; }
}
@media(max-width:600px){
  .topbar-profile .meta{ display:none; }
  .login-card{ padding:32px 22px; }
}