*{box-sizing:border-box}
.dash-root{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.dash-alert{
  margin:8px 16px;
  padding:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:#cbd5e1;
}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:#e5e7eb;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(900px 600px at 50% 90%, rgba(244,63,94,.10), transparent 60%),
    #050b16;
}
a{color:#93c5fd}
.wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.card{
  width:min(520px, 100%);
  border-radius:18px;
  padding:18px;
  background:rgba(2,6,23,.55);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
}
.brand{text-align:center}
.brand-title{font-size:26px;font-weight:900}
.brand-sub{color:#94a3b8;font-size:12px;margin-top:6px}
.copy{margin-top:14px;color:#94a3b8;font-size:12px;text-align:center}
label{display:block;margin-top:10px;color:#cbd5e1;font-size:12px}
input{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(17,24,39,.35);
  color:#e5e7eb;
  outline:none;
}
button{
  width:100%;
  margin-top:12px;
  padding:12px;
  border:0;
  border-radius:14px;
  color:white;
  font-weight:800;
  background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(6,182,212,.85));
  cursor:pointer;
}
button:hover{filter:brightness(1.05)}
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  color:#cbd5e1;
  font-size:12px;
  background: rgba(2,6,23,.25);
}
.chip:hover{filter:brightness(1.06)}
.lang-row{margin-top:10px; display:flex; gap:8px; justify-content:center}
.alert{margin:10px 0; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:12px; color:#cbd5e1}
.alert-item{margin:4px 0}

/* Wide layout */
.wrap-wide{align-items:stretch}
.card-wide{width:min(1200px,100%); padding:16px}

/* Dashboard layout */
.dash{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:0;
  align-items:stretch;
  min-height:100vh;
  flex:1;
}
.side{
  border-right:1px solid rgba(255,255,255,.08);
  border-radius:0;
  background:rgba(10,15,30,.70);
  padding:20px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.side-title{font-weight:900; font-size:18px}
.side-sub{color:#94a3b8; font-size:12px; margin-top:6px}
.side-nav{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.side-link{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  color:#cbd5e1;
  text-decoration:none;
  font-size:13px;
  text-align:center;
}
.side-link:hover{filter:brightness(1.06)}
.side-link.active{border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.10)}
.side-link.danger{border-color: rgba(239,68,68,.25); color:#fecaca}

.side-block{margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.10)}
.side-block-title{font-weight:800; font-size:12px; color:#cbd5e1; margin-bottom:8px}
.cat-list{display:flex; flex-wrap:wrap; gap:8px}
.cat-chip{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  color:#cbd5e1;
  text-decoration:none;
  font-size:12px;
  background: rgba(2,6,23,.25);
}
.cat-chip.on{border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.12)}

/* Main */
.main{
  background:rgba(5,11,22,.30);
  padding:24px 28px;
  overflow-y:auto;
  min-height:100vh;
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.35);
}
.top-title{font-size:20px; font-weight:900}
.top-sub{margin-top:6px; color:#94a3b8; font-size:12px}
.pill-row{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.pill{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  color:#cbd5e1;
  font-size:12px;
  background: rgba(2,6,23,.28);
}
.pill-btn{cursor:pointer}
.pill-btn:hover{filter:brightness(1.08)}
.pill-btn:active{transform: translateY(1px)}

.panel{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.28);
}
.panel-title{margin:0; font-size:16px}
.panel-sub{margin-top:6px; color:#94a3b8; font-size:12px; line-height:1.7}

.quick-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top:10px}
.quick-card{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,39,.40);
  text-decoration:none;
  color:#e5e7eb;
  font-weight:900;
  text-align:center;
}
.quick-card:hover{filter:brightness(1.06)}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.span2{grid-column:1 / -1}
.hint{margin-top:6px; color:#94a3b8; font-size:12px}

/* Vault */
.vault-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px}
.vault-card{
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,39,.45);
}
.vault-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.vault-site{font-weight:900}
.vault-meta{color:#94a3b8; font-size:12px; margin-top:4px}
.mini{color:#94a3b8; font-size:12px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.vault-actions{display:flex; gap:8px; align-items:center; margin-top:12px}
.btn-danger{
  width:auto;
  margin:0;
  padding:8px 10px;
  border-radius:10px;
  background: linear-gradient(90deg, rgba(239,68,68,.9), rgba(244,63,94,.9));
}

/* Generator */
.gen-row{display:grid; grid-template-columns: 260px 1fr; gap:12px}
.gen-box{
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,39,.40);
}
.checks{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.check{display:flex; gap:10px; align-items:center; color:#cbd5e1; font-size:13px}
.check input{width:auto}

.gen-pass{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(59,130,246,.25);
  background: rgba(2,6,23,.35);
  font-weight:900;
  word-break: break-all;
}
.gen-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.metric{
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.28);
}
.metric-k{color:#94a3b8; font-size:12px}
.metric-v{margin-top:6px; font-weight:900}
.metric-v.weak{color:#fca5a5}
.metric-v.medium{color:#fde68a}
.metric-v.strong{color:#86efac}
.feed{margin-top:10px; padding:10px; border-radius:14px; border:1px solid rgba(255,255,255,.10)}
.feed-title{font-weight:900; margin-bottom:6px}
.feed-list{margin:0; padding-inline-start:18px; color:#cbd5e1; font-size:13px; line-height:1.7}

/* Tips */
.tips{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px}
.tip{
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,39,.35);
  color:#cbd5e1;
  font-size:13px;
  line-height:1.7;
}

/* Watchtower */
.wt-head{display:grid; grid-template-columns: 180px 1fr; gap:14px; align-items:center}
.wt-score{padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(17,24,39,.45); text-align:center}
.wt-num{font-size:44px; font-weight:900}
.wt-label{color:#94a3b8; font-size:12px; margin-top:6px}
.wt-bar{height:18px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(2,6,23,.28); overflow:hidden}
.wt-bar-fill{height:100%; background: linear-gradient(90deg, rgba(34,197,94,.9), rgba(250,204,21,.85), rgba(239,68,68,.9));}
.wt-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px}
.wt-card{padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(17,24,39,.45)}
.wt-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.wt-site{font-weight:900}
.wt-meta{color:#94a3b8; font-size:12px}
.wt-row{display:flex; justify-content:space-between; gap:10px; margin-top:10px; align-items:center}
.tag{padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); font-size:12px}
.tag.weak{color:#fecaca; border-color: rgba(239,68,68,.25)}
.tag.medium{color:#fde68a; border-color: rgba(250,204,21,.25)}
.tag.strong{color:#86efac; border-color: rgba(34,197,94,.25)}
.warn{color:#fca5a5; font-weight:900}

/* Light theme */
body.theme-light{
  background: #eef2ff !important;
  color:#0f172a;
}
body.theme-light .card,
body.theme-light .main,
body.theme-light .side,
body.theme-light .panel,
body.theme-light .vault-card,
body.theme-light .gen-box,
body.theme-light .metric,
body.theme-light .tip,
body.theme-light .wt-score,
body.theme-light .wt-card{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(15,23,42,.12) !important;
}
body.theme-light .brand-sub,
body.theme-light .copy,
body.theme-light .panel-sub,
body.theme-light .side-sub,
body.theme-light .mini,
body.theme-light .vault-meta,
body.theme-light .wt-meta,
body.theme-light .metric-k{
  color: rgba(15,23,42,.65) !important;
}
body.theme-light .side-link,
body.theme-light .chip,
body.theme-light .cat-chip,
body.theme-light .pill{
  color:#0f172a !important;
  border-color: rgba(15,23,42,.12) !important;
}
body.theme-light input{
  background: rgba(15,23,42,.05);
  color:#0f172a;
  border-color: rgba(15,23,42,.12);
}

/* Responsive */
@media (max-width: 900px){
  .dash{grid-template-columns: 1fr}
  .side{position:relative; top:auto}
  .vault-grid{grid-template-columns:1fr}
  .gen-row{grid-template-columns:1fr}
  .gen-metrics{grid-template-columns:1fr}
  .tips{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr}
  .wt-grid{grid-template-columns:1fr}
  .wt-head{grid-template-columns:1fr}
}
/* ---------- Fix links inside panels (no ugly blue) ---------- */
.status-panel a,
.status-panel a:visited{
  color:#cbd5e1;
  text-decoration:none;
}
.status-panel a:hover{ filter: brightness(1.08); }

/* ---------- Profile panel ---------- */
.profile-panel{ padding:14px; }
.profile-row{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.avatar{
  width:52px;
  height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(2,6,23,.35);
}
.profile-info{ min-width: 260px; }
.profile-name{ font-size:18px; font-weight:900; }
.profile-email{ margin-top:4px; color:#94a3b8; font-size:12px; }
.profile-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.profile-switches{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* ---------- Status panel ---------- */
.status-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.status-title{ font-size:16px; font-weight:900; }
.status-sub{ margin-top:6px; color:#94a3b8; font-size:12px; }
.status-open{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,39,.35);
}
.status-body{ margin-top:12px; }
.status-box{
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,39,.30);
}
.status-k{ font-weight:900; }
.status-v{ margin-top:6px; color:#cbd5e1; font-size:13px; line-height:1.7; }

/* ---------- Quick buttons (Passwords / Watchtower / Tools) ---------- */
.quick-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.quick-btn{
  text-align:center;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.28);
  color:#e5e7eb;
  text-decoration:none;
  font-weight:800;
}
.quick-btn:hover{ filter: brightness(1.06); }

/* ---------- Tags ---------- */
.tag-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.tag-chip{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.22);
  color:#cbd5e1;
  text-decoration:none;
  font-size:13px;
}
.tag-chip:hover{ filter: brightness(1.06); }

/* ---------- Light mode refinements ---------- */
body.theme-light{
  color:#0f172a;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(34,211,238,.12), transparent 60%),
    #eef2ff !important;
}
body.theme-light .card,
body.theme-light .main,
body.theme-light .side,
body.theme-light .panel,
body.theme-light .vault-card,
body.theme-light .gen-box,
body.theme-light .metric,
body.theme-light .tip,
body.theme-light .status-open,
body.theme-light .quick-btn,
body.theme-light .tag-chip,
body.theme-light input{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(15,23,42,.12) !important;
  color:#0f172a !important;
}
body.theme-light .sub,
body.theme-light .mini,
body.theme-light .panel-sub,
body.theme-light .side-sub,
body.theme-light .hint,
body.theme-light .vault-date,
body.theme-light .metric-k,
body.theme-light .profile-email,
body.theme-light .status-sub{
  color: rgba(15,23,42,.65) !important;
}
body.theme-light a{ color:#1d4ed8; }
body.theme-light .quick-btn,
body.theme-light .tag-chip,
body.theme-light .status-open{
  color:#0f172a !important;
}
body.theme-light .status-panel a,
body.theme-light .status-panel a:visited{
  color:#0f172a !important;
}
/* ===== Generator UX upgrades ===== */
.len-row{
  display:grid;
  grid-template-columns: 1fr 90px;
  gap:10px;
  align-items:center;
  margin-top:6px;
}
.len-row input[type="range"]{ width:100%; }

.gen-out{
  width:100%;
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(59,130,246,.25);
  background: rgba(2,6,23,.35);
  color:#e5e7eb;
  font-weight:900;
  letter-spacing:.2px;
}

.out-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.out-title{ font-weight:900; }
.out-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.btn-primary{
  width:100%;
  margin-top:12px;
  padding:12px;
  border:0;
  border-radius:14px;
  color:white;
  font-weight:900;
  background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(6,182,212,.85));
  cursor:pointer;
}
.btn-mini{
  width:auto;
  margin:0;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,39,.35);
  color:#e5e7eb;
  font-weight:800;
  cursor:pointer;
}
.btn-mini:hover{ filter:brightness(1.06); }
.btn-mini.ghost{
  background: rgba(2,6,23,.25);
  color:#cbd5e1;
}

.strength{
  margin-top:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.20);
}
.strength-label{ color:#cbd5e1; font-size:12px; }
.strength-bar{
  margin-top:8px;
  height:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.28);
  overflow:hidden;
}
.strength-fill{ height:100%; width:70%; }
.strength-fill.weak{ width:33%; background: rgba(239,68,68,.85); }
.strength-fill.medium{ width:66%; background: rgba(250,204,21,.85); }
.strength-fill.strong{ width:100%; background: rgba(34,197,94,.85); }

.copy-note{
  margin-top:10px;
  color:#94a3b8;
  font-size:12px;
}

.mini-link{
  color:#93c5fd;
  text-decoration:n
.btn-mini{
  width:auto;
  margin:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,39,.35);
  color:#e5e7eb;
  font-weight:900;
  cursor:pointer;
}
.btn-mini:hover{ filter:brightness(1.06); }

body.theme-light .btn-mini{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(15,23,42,.12) !important;
  color:#0f172a !important;
}
.vault-pass{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  outline: none;
}
/* passwords page row style (like screenshot) */
.vault-list{display:flex; flex-direction:column; gap:12px}

.vault-row{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,24,39,.45);
}

.vault-row-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.vault-fields{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}

.field input{margin-top:6px}

@media (max-width: 900px){
  .vault-fields{grid-template-columns:1fr}
}

/* --- New UI Enhancements --- */
.brand-icon {
  font-size: 48px;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.title {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sub {
  color: #94a3b8;
  font-size: 14px;
  margin-bottom: 25px;
  text-align: center;
}

.input-group {
  margin-bottom: 18px;
  text-align: left;
}
[dir="rtl"] .input-group { text-align: right; }

.input-group label {
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, #2563eb, #0891b2);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.footer {
  margin-top: 25px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}

.footer-register {
  margin-top: 10px;
  font-size: 14px;
}

.link-primary { color: #60a5fa; text-decoration: none; font-weight: 700; }
.link-secondary { color: #94a3b8; text-decoration: none; font-size: 13px; }

/* Admin Stats Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.stat-card {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: transform 0.2s;
}

.stat-card:hover { transform: translateY(-3px); }

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.stat-icon.users { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.stat-icon.vault { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stat-icon.logs { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.stat-k { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-v { font-size: 24px; font-weight: 800; margin-top: 4px; }

.btn-link {
  font-size: 14px;
  color: #3b82f6;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.side-link i { margin-right: 10px; width: 20px; text-align: center; }
[dir="rtl"] .side-link i { margin-right: 0; margin-left: 10px; }

/* General Layout Fixes */
.topbar { padding: 20px; }
.main { padding: 20px; }

/* Dashboard specific styles */
.profile-panel {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.avatar {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile-name { font-size: 20px; font-weight: 800; }
.profile-email { color: #94a3b8; font-size: 14px; margin-top: 4px; }

.quick-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 10px;
}

.quick-btn {
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  transition: all 0.2s;
}

.quick-btn i { font-size: 24px; color: #3b82f6; }
.quick-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-3px);
}

.insight {
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.insight.warning { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #fca5a5; }
.insight.subtle { background: rgba(148, 163, 184, 0.05); border: 1px solid rgba(148, 163, 184, 0.1); color: #94a3b8; }
.insight.tip { background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.2); color: #67e8f9; }


/* --- Enhanced Button Styles --- */
.btn-primary:active { transform: translateY(0); }

/* Panel Enhancements */
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.panel-title {
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Table Enhancements */
.table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 15px;
}

.thead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  padding: 12px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 12px 12px 0 0;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: #94a3b8;
  border-bottom: 2px solid rgba(59, 130, 246, 0.2);
}

.trow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  align-items: center;
  transition: background 0.2s;
}

.trow:hover { background: rgba(59, 130, 246, 0.05); }

.cell {
  font-size: 13px;
  color: #cbd5e1;
  word-break: break-word;
}

.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge.ok { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.badge.muted { background: rgba(148, 163, 184, 0.1); color: #cbd5e1; }

/* Form Enhancements */
.perms {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.chk {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #cbd5e1;
}

.chk input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #3b82f6;
}

.sep {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 8px 0;
}

.perm-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

/* Generator Styles */
.gen-pass {
  font-size: 14px;
  line-height: 1.8;
  padding: 16px;
  background: rgba(30, 41, 59, 0.6);
}

.metric-v.weak { color: #fca5a5; }
.metric-v.medium { color: #fde68a; }
.metric-v.strong { color: #86efac; }

/* Responsive Adjustments */
@media (max-width: 768px) {
  .cards-grid { grid-template-columns: 1fr; }
  .quick-row { grid-template-columns: 1fr; }
  .stat-card { flex-direction: column; text-align: center; }
  .thead, .trow { grid-template-columns: 1fr; }
}

/* Smooth Transitions */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

button, a { transition: transform 0.2s ease, box-shadow 0.2s ease; }


/* === Login & Register Redesign === */
.login-container, .register-container {
  max-width: 100%;
}

.login-header, .register-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-form, .register-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  position: relative;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 12px;
  color: #3b82f6;
  font-size: 14px;
  pointer-events: none;
}

[dir="rtl"] .input-icon {
  left: auto;
  right: 12px;
}

.input-wrapper input {
  padding-left: 40px;
  width: 100%;
}

[dir="rtl"] .input-wrapper input {
  padding-left: 12px;
  padding-right: 40px;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
}

.login-footer, .register-footer {
  text-align: center;
  margin-top: 20px;
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.divider {
  color: #94a3b8;
}

.link-primary {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.link-secondary {
  color: #94a3b8;
  text-decoration: none;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 25px;
  padding: 12px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
  color: #6ee7b7;
  font-size: 12px;
  font-weight: 600;
}

.security-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 12px;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 600;
}

.feature i {
  font-size: 20px;
}

.btn-large {
  padding: 14px 20px;
  font-size: 16px;
  margin-top: 20px;
}

/* === Admin Panel Redesign === */
.side-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.side-avatar {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: white;
  margin-bottom: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.stat-card {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.2s;
}

.stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.3);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-icon.users { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.stat-icon.vault { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stat-icon.logs { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.stat-info {
  flex: 1;
}

.stat-k {
  font-size: 12px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.stat-v {
  font-size: 24px;
  font-weight: 800;
  margin-top: 4px;
}

.btn-link {
  color: #3b82f6;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.settings-form {
  display: flex;
  gap: 15px;
  align-items: flex-end;
}

.form-row {
  display: flex;
  gap: 15px;
  align-items: flex-end;
  width: 100%;
}

.form-group {
  flex: 1;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(17,24,39,.35);
  color: #e5e7eb;
}

/* Users Table */
.users-table {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}

.user-card {
  background: rgba(17,24,39,.35);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 15px;
  transition: all 0.2s;
}

.user-card:hover {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(30, 41, 59, 0.5);
}

.user-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.user-avatar {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: white;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: 700;
  font-size: 14px;
}

.user-email {
  color: #94a3b8;
  font-size: 12px;
  margin-top: 2px;
}

.user-date {
  color: #64748b;
  font-size: 11px;
  margin-top: 4px;
}

.user-status {
  display: flex;
  gap: 8px;
}

.perms-form {
  margin: 15px 0;
}

.perms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 15px;
}

.perm-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #cbd5e1;
  padding: 10px;
  border-radius: 10px;
  transition: all 0.2s;
}

.perm-check:hover {
  background: rgba(59, 130, 246, 0.1);
}

.perm-check input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #3b82f6;
  margin: 0;
}

.user-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.user-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.role-select {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(17,24,39,.35);
  color: #e5e7eb;
  font-size: 13px;
}

/* Logs Table */
.logs-table {
  margin-top: 15px;
}

.logs-header {
  display: grid;
  grid-template-columns: 150px 180px 120px 150px 100px;
  gap: 12px;
  padding: 12px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 12px 12px 0 0;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: #94a3b8;
  border-bottom: 2px solid rgba(59, 130, 246, 0.2);
}

.log-row {
  display: grid;
  grid-template-columns: 150px 180px 120px 150px 100px;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  align-items: center;
  transition: background 0.2s;
}

.log-row:hover {
  background: rgba(59, 130, 246, 0.05);
}

.log-col-time, .log-col-actor, .log-col-action, .log-col-target, .log-col-ip {
  font-size: 13px;
  color: #cbd5e1;
  word-break: break-word;
}

.log-time {
  color: #94a3b8;
  font-family: monospace;
  font-size: 12px;
}

.log-action-badge {
  display: inline-block;
  padding: 6px 10px;
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.log-meta {
  grid-column: 1 / -1;
  padding: 8px 12px;
  background: rgba(17,24,39,.35);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 12px;
}

/* Button Styles */
.btn-primary {
  background: linear-gradient(135deg, #2563eb, #0891b2);
  color: white;
  border: 0;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-sm {
  padding: 8px 12px;
  font-size: 12px;
  width: auto;
  margin: 0;
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: #cbd5e1;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
}

.btn-ghost:hover {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.1);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #f43f5e);
  color: white;
}

.btn-danger:hover {
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* Light Mode Improvements */
body.theme-light {
  background: linear-gradient(135deg, #f8fafc, #eef2ff) !important;
  color: #0f172a;
}

body.theme-light .card,
body.theme-light .main,
body.theme-light .side,
body.theme-light .panel,
body.theme-light .user-card,
body.theme-light .stat-card {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(15,23,42,.15) !important;
}

body.theme-light input,
body.theme-light .form-group input,
body.theme-light .role-select {
  background: rgba(15,23,42,.05) !important;
  color: #0f172a !important;
  border-color: rgba(15,23,42,.12) !important;
}

body.theme-light .side-link,
body.theme-light .chip,
body.theme-light .btn-ghost {
  color: #0f172a !important;
  border-color: rgba(15,23,42,.12) !important;
}

body.theme-light .btn-ghost:hover {
  background: rgba(59, 130, 246, 0.08) !important;
}

body.theme-light .brand-sub,
body.theme-light .copy,
body.theme-light .side-sub,
body.theme-light .top-sub,
body.theme-light .hint,
body.theme-light .log-time,
body.theme-light .stat-k {
  color: rgba(15,23,42,.65) !important;
}

body.theme-light .user-email,
body.theme-light .user-date {
  color: rgba(15,23,42,.55) !important;
}

body.theme-light .logs-header {
  background: rgba(15,23,42,.08) !important;
  border-color: rgba(15,23,42,.12) !important;
}

body.theme-light .log-row:hover {
  background: rgba(59, 130, 246, 0.08) !important;
}

body.theme-light .security-badge {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.15) !important;
  color: #059669 !important;
}

body.theme-light .feature {
  background: rgba(59, 130, 246, 0.08) !important;
  color: #1e40af !important;
}

/* Responsive */
@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .side { position: relative; top: auto; }
  .stats-grid { grid-template-columns: 1fr; }
  .logs-header, .log-row { grid-template-columns: 1fr; }
  .perms-grid { grid-template-columns: 1fr; }
  .security-features { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
  .user-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .side { padding: 12px; }
  .user-card { padding: 12px; }
  .stat-card { flex-direction: column; text-align: center; }
}


/* === Verification Pages === */
.verification-container {
  max-width: 100%;
}

.verification-header {
  text-align: center;
  margin-bottom: 30px;
}

.verification-icon {
  font-size: 48px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  margin-bottom: 15px;
}

.verification-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 25px;
}

.code-input-wrapper {
  position: relative;
}

.code-input-wrapper input {
  font-size: 24px;
  letter-spacing: 8px;
  text-align: center;
  font-weight: 700;
  font-family: monospace;
  padding: 16px 12px;
}

.verification-options,
.verification-fallback {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.option-title,
.fallback-title {
  color: #94a3b8;
  font-size: 13px;
  margin-bottom: 10px;
}

.verification-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
  padding: 12px;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 12px;
  color: #67e8f9;
  font-size: 12px;
  font-weight: 600;
}

/* Passkey Options */
.passkey-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.passkey-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 25px;
  background: rgba(17,24,39,.35);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  margin: 0;
}

.passkey-btn:hover {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.1);
  transform: translateY(-3px);
}

.passkey-btn i {
  font-size: 32px;
  color: #3b82f6;
}

.passkey-btn span {
  font-weight: 700;
  font-size: 14px;
}

.passkey-btn small {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}

/* Device Info Box */
.device-info-box {
  background: rgba(17,24,39,.35);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.device-detail {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
}

.device-detail i {
  font-size: 20px;
  color: #3b82f6;
  width: 30px;
  text-align: center;
}

.detail-label {
  color: #94a3b8;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.detail-value {
  color: #e5e7eb;
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
}

.device-actions {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #cbd5e1;
  font-size: 13px;
}

.checkbox-option input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #3b82f6;
  margin: 0;
}

/* Light Mode for Verification */
body.theme-light .verification-icon {
  -webkit-text-fill-color: #1e40af;
}

body.theme-light .verification-info {
  background: rgba(34, 211, 238, 0.08) !important;
  border-color: rgba(34, 211, 238, 0.15) !important;
  color: #0891b2 !important;
}

body.theme-light .device-info-box,
body.theme-light .passkey-btn {
  background: rgba(15,23,42,.05) !important;
  border-color: rgba(15,23,42,.12) !important;
}

body.theme-light .device-detail {
  background: rgba(15,23,42,.08) !important;
}

body.theme-light .passkey-btn:hover {
  background: rgba(59, 130, 246, 0.08) !important;
}

body.theme-light .detail-label {
  color: rgba(15,23,42,.65) !important;
}

body.theme-light .detail-value {
  color: #0f172a !important;
}

@media (max-width: 600px) {
  .passkey-options {
    grid-template-columns: 1fr;
  }
  
  .device-detail {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* === Theme Toggle Button === */
.brand-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 15px;
}

.theme-toggle {
  width: auto;
  padding: 10px 12px;
  margin: 0;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 10px;
  color: #93c5fd;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
  transform: scale(1.1) rotate(180deg);
}

.theme-toggle:active {
  transform: scale(0.95);
}

body.theme-light .theme-toggle {
  background: rgba(15, 23, 42, 0.1);
  border-color: rgba(15, 23, 42, 0.2);
  color: #1e40af;
}

body.theme-light .theme-toggle:hover {
  background: rgba(15, 23, 42, 0.15);
  border-color: rgba(15, 23, 42, 0.3);
}

/* Smooth Theme Transition */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Enhanced Light Mode Colors */
body.theme-light {
  color: #0f172a;
}

body.theme-light .title {
  color: #0f172a;
}

body.theme-light .sub {
  color: rgba(15, 23, 42, 0.65);
}

body.theme-light .link-primary {
  color: #1e40af;
}

body.theme-light .link-secondary {
  color: rgba(15, 23, 42, 0.55);
}

body.theme-light .btn-primary {
  background: linear-gradient(135deg, #1e40af, #0369a1);
}

body.theme-light .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(30, 64, 175, 0.3);
}

body.theme-light .form-group label {
  color: #0f172a;
}

body.theme-light .hint {
  color: rgba(15, 23, 42, 0.65);
}

body.theme-light .panel-title {
  color: #0f172a;
}

body.theme-light .topbar {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.12);
}

body.theme-light .top-title {
  color: #0f172a;
}

body.theme-light .top-sub {
  color: rgba(15, 23, 42, 0.65);
}

body.theme-light .side-title {
  color: #0f172a;
}

body.theme-light .user-name {
  color: #0f172a;
}

body.theme-light .perm-check {
  color: #0f172a;
}

body.theme-light .perm-check:hover {
  background: rgba(59, 130, 246, 0.08);
}

body.theme-light .log-col-time,
body.theme-light .log-col-actor,
body.theme-light .log-col-action,
body.theme-light .log-col-target,
body.theme-light .log-col-ip {
  color: #0f172a;
}

body.theme-light .log-action-badge {
  background: rgba(59, 130, 246, 0.08);
  color: #1e40af;
}

body.theme-light .passkey-btn {
  color: #0f172a;
}

body.theme-light .passkey-btn span {
  color: #0f172a;
}

body.theme-light .passkey-btn small {
  color: rgba(15, 23, 42, 0.65);
}

body.theme-light .option-title,
body.theme-light .fallback-title {
  color: rgba(15, 23, 42, 0.65);
}

/* Smooth Transitions for Theme */
body {
  transition: background 0.3s ease, color 0.3s ease;
}

.card, .main, .side, .panel, .user-card, .stat-card, .device-info-box {
  transition: background 0.3s ease, border-color 0.3s ease;
}

input, button, a {
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

/* ── Extra styles ── */
.side-divider { border-top: 1px solid rgba(255,255,255,.1); margin: .5rem 0; }
.side-profile  { padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: .5rem; }
.stats-grid    { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.8rem; margin-bottom:1rem; }
.stat-card     { background:rgba(255,255,255,.06); border-radius:12px; padding:.9rem 1rem; display:flex; gap:.8rem; align-items:center; transition:.2s; }
.stat-card:hover { background:rgba(255,255,255,.1); }
.stat-card.stat-warn { border-left:3px solid #ff9800; }
.stat-card.stat-ok   { border-left:3px solid #4caf50; }
.stat-card.stat-users     { border-left:3px solid #2196f3; }
.stat-card.stat-passwords { border-left:3px solid #9c27b0; }
.stat-icon { font-size:1.4rem; opacity:.8; }
.stat-k    { font-size:.75rem; opacity:.6; margin-bottom:.2rem; }
.stat-v    { font-size:1.4rem; font-weight:700; }
.insight   { padding:.6rem .9rem; border-radius:8px; margin-bottom:.5rem; font-size:.85rem; }
.insight.warning { background:rgba(255,152,0,.15); border-left:3px solid #ff9800; }
.insight.ok      { background:rgba(76,175,80,.15);  border-left:3px solid #4caf50; }
.gen-out { background:rgba(255,255,255,.08); border-radius:8px; padding:.8rem 1rem; font-family:monospace; font-size:1rem; word-break:break-all; cursor:pointer; transition:.2s; border:1px solid rgba(255,255,255,.1); }
.gen-out:hover { background:rgba(255,255,255,.14); }
.panel-title { font-size:1rem; font-weight:600; margin-bottom:.8rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

/* ─── Sidebar utilities ─── */
.side-btn{
  background:none;
  border:1px solid rgba(255,255,255,.10);
  color:#cbd5e1;
  text-align:left;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  padding:12px 12px;
  border-radius:14px;
  width:100%;
  margin-top:0;
}
[dir="rtl"] .side-btn{text-align:right}
.side-btn:hover{filter:brightness(1.1)}

.side-divider{
  border-top:1px solid rgba(255,255,255,.08);
  margin:8px 0;
}
.side-profile{
  padding:0 0 14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:4px;
}
.side-profile .avatar{
  width:42px;height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:18px;
  margin-bottom:10px;
}
/* ─── Topbar ─── */
.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.top-title{font-size:22px;font-weight:900}
.top-sub{color:#94a3b8;font-size:13px;margin-top:4px}

/* Page modes */
body.page-wide { margin:0; padding:0; }
body.page-narrow { }
.dash-alert{
  margin:8px 16px;
  padding:10px 14px;
  border:1px solid rgba(255,200,0,.25);
  border-radius:10px;
  color:#fde68a;
  background:rgba(255,200,0,.07);
  font-size:13px;
}