/* ═══ FONTS ═══ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap');

/* ═══ TOKENS ═══ */
:root {
  --accent: #3b82f6;
  --accent2: #8b5cf6;
  --glow: rgba(59,130,246,.15);
  --ok: #10b981;
  --warn: #f59e0b;
  --err: #ef4444;
  --ff: 'Roboto', sans-serif;
  --fm: 'Roboto Mono', monospace;
  --fd: 'Roboto', sans-serif;
  --r: 10px;
  --rl: 16px;
  --rs: 6px;
  --ease: .18s cubic-bezier(.4,0,.2,1);
}
[data-theme=dark] {
  --bg: #080c14; --bg2: #0d1424; --bg3: #111827;
  --sur: #141d2e; --sur2: #1a2540;
  --bd: rgba(255,255,255,.07); --bd2: rgba(255,255,255,.13);
  --tx: #f1f5f9; --tx2: #94a3b8; --tx3: #475569;
  --sbg: #0a1020; --sbd: rgba(255,255,255,.05);
  --topbg: rgba(8,12,20,.92);
}
[data-theme=light] {
  --bg: #f0f4fb; --bg2: #e8edf8; --bg3: #dde5f5;
  --sur: #fff; --sur2: #f5f8ff;
  --bd: rgba(0,0,0,.07); --bd2: rgba(0,0,0,.12);
  --tx: #0f172a; --tx2: #475569; --tx3: #94a3b8;
  --sbg: #fff; --sbd: rgba(0,0,0,.06);
  --topbg: rgba(255,255,255,.92);
}

/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--ff); background: var(--bg); color: var(--tx); min-height: 100vh; line-height: 1.5; transition: background var(--ease), color var(--ease); }
button { font-family: var(--ff); cursor: pointer; border: none; outline: none; }
input, textarea, select { font-family: var(--ff); }
a { text-decoration: none; color: inherit; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 3px; }

/* ═══ LAYOUT ═══ */
.shell { display: flex; min-height: 100vh; }

/* ─── Sidebar ─── */
.sb {
  width: 232px; flex-shrink: 0; background: var(--sbg);
  border-right: 1px solid var(--sbd);
  display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 200;
  overflow: hidden;
  transition: transform var(--ease);
}
.sb-nav {
  flex: 1; overflow-y: auto; scrollbar-width: thin;
}
.sb-logo { padding: 18px 16px 14px; border-bottom: 1px solid var(--sbd); display: flex; align-items: center; gap: 10px; }
.li { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg,var(--accent),var(--accent2)); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-size: 13px; font-weight: 800; color: #fff; }
.ln { font-family: var(--fd); font-size: 14px; font-weight: 700; letter-spacing: -.3px; }
.lbadge { margin-left: auto; font-size: 9px; font-weight: 700; background: linear-gradient(135deg,var(--accent),var(--accent2)); color: #fff; padding: 2px 7px; border-radius: 50px; }
.lbadge.u { background: linear-gradient(135deg,var(--ok),#059669); }

.sb-sec { padding: 14px 14px 4px; font-size: 9.5px; font-weight: 700; color: var(--tx3); letter-spacing: 1.2px; text-transform: uppercase; }

.ni { display: flex; align-items: center; gap: 9px; padding: 8px 12px; margin: 1px 6px; border-radius: var(--rs); font-size: 12.5px; font-weight: 500; color: var(--tx2); cursor: pointer; transition: all var(--ease); position: relative; }
.ni:hover { background: var(--sur2); color: var(--tx); }
.ni.on { background: var(--glow); color: var(--accent); font-weight: 600; }
.ni.on::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--accent); border-radius: 0 2px 2px 0; }
.ni.err:hover { background: rgba(239,68,68,.1); color: var(--err); }
.nic { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
.nbadge { margin-left: auto; font-size: 9.5px; font-weight: 700; background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 50px; }

.ng-h { display: flex; align-items: center; gap: 9px; padding: 8px 12px; margin: 1px 6px; border-radius: var(--rs); font-size: 12.5px; font-weight: 500; color: var(--tx2); cursor: pointer; transition: all var(--ease); }
.ng-h:hover { background: var(--sur2); color: var(--tx); }
.ng-arr { margin-left: auto; font-size: 9px; transition: transform var(--ease); }
.ng-sub { display: none; margin: 0 6px 2px; }
.ng:hover .ng-sub { display: block; }
.ng:hover .ng-arr { transform: rotate(90deg); }
.ng.op .ng-sub { display: block; }
.ng.op .ng-arr { transform: rotate(90deg); }
.nsi { display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 34px; border-radius: var(--rs); font-size: 12px; color: var(--tx2); cursor: pointer; transition: all var(--ease); }
.nsi:hover { background: var(--sur2); color: var(--tx); }
.nsi.on { color: var(--accent); background: var(--glow); }

.sb-foot { margin-top: auto; padding: 10px; border-top: 1px solid var(--sbd); }
.uc { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--r); background: var(--sur2); cursor: pointer; transition: all var(--ease); }
.uc:hover { background: var(--bg2); }
.ua { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,var(--accent),var(--accent2)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.ua.u { background: linear-gradient(135deg,var(--ok),#059669); }
.un { font-size: 11.5px; font-weight: 600; }
.ur { font-size: 10px; color: var(--tx3); }

/* ─── Main area ─── */
.main { flex: 1; margin-left: 232px; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 100; padding: 0 22px; height: 56px; display: flex; align-items: center; justify-content: space-between; background: var(--topbg); border-bottom: 1px solid var(--bd); backdrop-filter: blur(20px); }
.tb-l { display: flex; align-items: center; gap: 10px; }
.tb-title { font-family: var(--fd); font-size: 14px; font-weight: 700; }
.tb-bc { font-size: 11px; color: var(--tx3); }
.tb-r { display: flex; align-items: center; gap: 8px; }
.content { flex: 1; padding: 24px 24px 32px; }
/* admin-footer nằm ngoài .shell để trải full width (cả phần sidebar lẫn content) */
.admin-footer { padding: 14px 24px; font-size: 11px; color: var(--tx3); border-top: 1px solid var(--bd); text-align: center; width: 100%; }

/* ═══ CARDS ═══ */
.card { background: var(--sur); border: 1px solid var(--bd); border-radius: var(--rl); padding: 20px; }
.card + .card, .card.mt { margin-top: 14px; }
.ch { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.ct { font-family: var(--fd); font-size: 14px; font-weight: 700; }
.cs { font-size: 11.5px; color: var(--tx2); margin-top: 3px; }

/* ═══ GRID ═══ */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.mb { margin-bottom: 14px; }
.mt { margin-top: 14px; }

/* ═══ STAT CARDS ═══ */
.stat { background: var(--sur); border: 1px solid var(--bd); border-radius: var(--rl); padding: 16px 18px; position: relative; overflow: hidden; }
.stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,var(--accent),var(--accent2)); opacity: .5; }
.stat-ic { font-size: 18px; margin-bottom: 8px; }
.stat-lb { font-size: 10.5px; color: var(--tx2); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.stat-v { font-family: var(--fd); font-size: 22px; font-weight: 800; }
.stat-ch { font-size: 10.5px; color: var(--ok); margin-top: 3px; }

/* ═══ TABLE ═══ */
.tw { overflow-x: auto; overflow-y: auto; max-height: 520px; border-radius: 0 0 var(--rl) var(--rl); }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; padding: 9px 12px; font-size: 10.5px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--bd); white-space: nowrap; position: sticky; top: 0; background: var(--sur); z-index: 2; }
td { padding: 11px 12px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--sur2); }
.tc { text-align: center; }
/* Scrollable log list (change logs) */
.log-scroll { max-height: 520px; overflow-y: auto; }

/* ═══ BADGES ═══ */
.b { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 50px; font-size: 10.5px; font-weight: 600; }
.b-bl { background: rgba(59,130,246,.15); color: #60a5fa; }
.b-gr { background: rgba(16,185,129,.15); color: #34d399; }
.b-re { background: rgba(239,68,68,.15); color: #f87171; }
.b-am { background: rgba(245,158,11,.15); color: #fbbf24; }
.b-pu { background: rgba(139,92,246,.15); color: #a78bfa; }
.b-gy { background: rgba(100,116,139,.15); color: #94a3b8; }

/* ═══ BUTTONS ═══ */
.btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: var(--r); font-size: 12px; font-weight: 500; cursor: pointer; transition: all var(--ease); border: 1px solid transparent; }
.btn-s { padding: 5px 10px; font-size: 11px; }
.btn-ac { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(59,130,246,.25); }
.btn-ac:hover { background: #2563eb; transform: translateY(-1px); }
.btn-gh { background: transparent; border-color: var(--bd2); color: var(--tx2); }
.btn-gh:hover { background: var(--sur2); color: var(--tx); }
.btn-ok { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.2); color: var(--ok); }
.btn-ok:hover { background: rgba(16,185,129,.2); }
.btn-er { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.2); color: var(--err); }
.btn-er:hover { background: rgba(239,68,68,.2); }
.btn-wa { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.2); color: var(--warn); }

/* ═══ FORM ═══ */
.fl { display: block; font-size: 10.5px; font-weight: 700; color: var(--tx2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; }
.fi { width: 100%; padding: 8px 11px; background: var(--bg2); border: 1px solid var(--bd2); border-radius: var(--r); font-size: 13px; color: var(--tx); transition: all var(--ease); }
.fi:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.fi::placeholder { color: var(--tx3); }
/* ── Password eye toggle ── */
.pw-wrap { position: relative; }
.pw-wrap .fi { padding-right: 38px; box-sizing: border-box; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; color: var(--tx3); padding: 4px; line-height: 1; transition: color var(--ease); }
.pw-eye:hover { color: var(--tx); }
/* ── Password strength hint ── */
.pw-hint { font-size: 11px; color: var(--tx3); margin-top: 5px; line-height: 1.5; }
.pw-hint span.ok  { color: var(--ok,#22c55e); }
.pw-hint span.bad { color: var(--tx3); }
select.fi { cursor: pointer; }
textarea.fi { resize: vertical; min-height: 80px; }
.fr { display: grid; gap: 12px; margin-bottom: 12px; }
.fc2 { grid-template-columns: 1fr 1fr; }
.fc3 { grid-template-columns: 1fr 1fr 1fr; }
.fg { margin-bottom: 12px; }

/* ═══ FIELD LABEL (stacked) ═══ */
.fi-label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--tx2); font-weight: 500; }
.fi-label > .sw { align-self: flex-start; }

/* ═══ TOGGLE ═══ */
.sw { position: relative; width: 42px; height: 22px; flex-shrink: 0; display: inline-block; }
.sw input { opacity: 0; width: 0; height: 0; }
.sl { position: absolute; inset: 0; background: var(--bd2); border: 1px solid var(--bd); border-radius: 50px; cursor: pointer; transition: all var(--ease); }
.sl::before { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; left: 3px; top: 3px; transition: all var(--ease); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.sw input:checked + .sl { background: var(--accent); }
.sw input:checked + .sl::before { transform: translateX(20px); }
.tr { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--bd); }
.tr:last-child { border-bottom: none; }
.tr-lb { font-size: 12.5px; font-weight: 500; }
.tr-ds { font-size: 11px; color: var(--tx2); margin-top: 2px; }

/* ═══ SECTION ═══ */
.sec { display: none; }
.sec.on { display: block; }

/*
 * .sec-full — Section full-width, không bọc trong .card
 * Dùng cho bảng lớn (Users, Login Logs, Change Logs) để chiếm
 * toàn bộ chiều ngang của .content (trừ padding 24px hai bên).
 * Kết hợp với .sec-hd cho phần header, .tw-full / .log-scroll-full
 * cho phần nội dung có scroll.
 */

/* Header của section full-width: title bên trái, actions bên phải */
.sec-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 0 16px 0; border-bottom: 1px solid var(--bd); margin-bottom: 0; }

/*
 * .tw-full — Scroll container cho bảng trong sec-full
 * max-height dùng vh để tận dụng chiều cao màn hình thực tế,
 * thay vì giá trị cứng 520px.
 * border-radius chỉ áp ở dưới vì không có card box bao quanh.
 */
.tw-full { overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 200px); }

/*
 * .log-scroll-full — Scroll container cho change logs trong sec-full
 * Tương tự tw-full nhưng dùng cho danh sách log (div, không phải table)
 */
.log-scroll-full { max-height: calc(100vh - 200px); overflow-y: auto; }

/* ═══ TABS ═══ */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bd); margin-bottom: 18px; }
.tab { padding: 8px 14px; font-size: 12px; font-weight: 500; color: var(--tx2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--ease); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.tab:hover:not(.on) { color: var(--tx); }
.tab-pane { display: none; }
.tab-pane.on { display: block; }

/* ═══ PANEL TYPES ═══ */
.ptg { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
.ptc { padding: 12px; border-radius: var(--r); border: 1px solid var(--bd2); cursor: pointer; transition: all var(--ease); text-align: center; background: var(--sur2); }
.ptc:hover, .ptc.on { border-color: var(--accent); background: var(--glow); }
.ptc.on { box-shadow: 0 0 0 3px var(--glow); }
.ptic { font-size: 20px; margin-bottom: 5px; }
.ptnm { font-size: 11px; font-weight: 700; }
.ptds { font-size: 9.5px; color: var(--tx2); margin-top: 2px; }

/* ═══ FIELD PERMS ═══ */
.fp-block { border: 1px solid var(--bd); border-radius: var(--r); margin-bottom: 6px; overflow: hidden; background: var(--sur2); }
.fp-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; cursor: pointer; }
.fp-head:hover { background: var(--sur); }
.fp-block.op .fp-head { background: var(--sur); border-bottom: 1px solid var(--bd); }
.fp-body { display: none; padding: 12px; }
.fp-block.op .fp-body { display: block; }
.fp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.fp-name { font-size: 12.5px; font-weight: 500; flex: 1; }
.fp-path { font-size: 10.5px; color: var(--tx3); font-family: var(--fm); }
.perm-opts { display: flex; gap: 4px; flex-wrap: wrap; }
.perm-btn { padding: 3px 9px; border-radius: 50px; font-size: 11px; font-weight: 500; cursor: pointer; border: 1px solid var(--bd2); background: transparent; color: var(--tx2); transition: all var(--ease); }
.perm-btn:hover { background: var(--sur); }
.perm-btn.pe { background: #E1F5EE; border-color: #5DCAA5; color: #085041; }
.perm-btn.pv { background: #E6F1FB; border-color: #85B7EB; color: #0C447C; }
.perm-btn.pr { background: #FAEEDA; border-color: #EF9F27; color: #633806; }
.perm-btn.ph { background: #FCEBEB; border-color: #F09595; color: #791F1F; }
.d-edit { background: #1D9E75; }
.d-view { background: #378ADD; }
.d-readonly { background: #BA7517; }
.d-hidden { background: #E24B4A; }
.ptag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 50px; font-size: 10px; font-weight: 600; }
.t-edit { background: #E1F5EE; color: #085041; }
.t-view { background: #E6F1FB; color: #0C447C; }
.t-readonly { background: #FAEEDA; color: #633806; }
.t-hidden { background: #FCEBEB; color: #791F1F; }

/* ═══ MENU TREE ═══ */
.tree { padding: 4px; }
.tn { margin-bottom: 3px; }
.tnr { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: var(--rs); border: 1px solid var(--bd); background: var(--sur2); cursor: default; transition: all var(--ease); }
.tnr:hover { border-color: var(--bd2); }
.tnr.drag-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--sur2)); }
.tdrag { color: var(--tx3); font-size: 10px; cursor: grab; }
.tname { font-size: 12.5px; font-weight: 500; flex: 1; }
.tmeta { font-size: 10px; color: var(--tx3); font-family: var(--fm); }
.ind1 { padding-left: 18px; margin-top: 3px; }
.ind2 { padding-left: 36px; margin-top: 3px; }

/* ═══ LOGS ═══ */
.le { padding: 10px 12px; border-radius: var(--r); border-left: 3px solid var(--bd2); background: var(--sur2); margin-bottom: 5px; display: flex; gap: 10px; align-items: flex-start; }
.le.up { border-color: var(--accent); }
.le.cr { border-color: var(--ok); }
.le.dl { border-color: var(--err); }
.le.lg { border-color: var(--warn); }
.le.lo { border-color: var(--accent2); }
.lt { font-family: var(--fm); font-size: 10px; color: var(--tx3); flex-shrink: 0; padding-top: 1px; white-space: nowrap; }
.lc { flex: 1; }
.la { font-size: 12px; font-weight: 500; }
.ld { font-size: 10.5px; color: var(--tx2); margin-top: 2px; }

/* ═══ IP ITEMS ═══ */
.ipi { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--sur2); border-radius: var(--r); margin-bottom: 5px; border: 1px solid var(--bd); }
.ipa { font-family: var(--fm); font-size: 12px; font-weight: 500; flex: 1; }
.ipl { font-size: 10.5px; color: var(--tx2); }

/* ═══ CODE ═══ */
.cpre { background: var(--bg2); border: 1px solid var(--bd2); border-radius: var(--r); padding: 10px 12px; font-family: var(--fm); font-size: 11px; color: var(--tx2); line-height: 1.7; overflow-x: auto; white-space: pre; }

/* ═══ MODAL ═══ */
.mbk { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 5000; align-items: center; justify-content: center; padding: 20px; }
.mbk.open { display: flex; }
.modal { background: var(--sur); border: 1px solid var(--bd2); border-radius: var(--rl); width: min(560px,100%); max-height: 85vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,.5); animation: mup .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes mup { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.mh { padding: 18px 20px 0; display: flex; align-items: flex-start; justify-content: space-between; }
.mt2 { font-family: var(--fd); font-size: 15px; font-weight: 700; }
.ms { font-size: 11.5px; color: var(--tx2); margin-top: 3px; }
.mc { width: 26px; height: 26px; border-radius: 50%; background: var(--sur2); border: 1px solid var(--bd2); display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; color: var(--tx2); flex-shrink: 0; }
.mb2 { padding: 16px 20px; }
.mf { padding: 0 20px 18px; display: flex; gap: 8px; }

/* ═══ AVATAR ═══ */
.av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,var(--accent),var(--accent2)); display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: #fff; flex-shrink: 0; }
.av.gr { background: linear-gradient(135deg,var(--ok),#059669); }
.av.am { background: linear-gradient(135deg,var(--warn),#d97706); }
.av.gy { background: linear-gradient(135deg,#64748b,#475569); }

/* ═══ PERM MATRIX ═══ */
.pm { width: 100%; border-collapse: collapse; }
.pm th { text-align: left; padding: 8px 10px; font-size: 10.5px; font-weight: 700; color: var(--tx3); text-transform: uppercase; border-bottom: 1px solid var(--bd); }
.pm td { padding: 9px 10px; border-bottom: 1px solid var(--bd); font-size: 12px; vertical-align: middle; }
.pm tr:last-child td { border-bottom: none; }
.pm tr:hover td { background: var(--sur2); }
.pck { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }

/* ═══ TOAST ═══ */
.toast { position: fixed; top: 18px; right: 18px; z-index: 10000; background: var(--sur); border: 1px solid var(--bd2); border-radius: var(--r); padding: 11px 16px; display: flex; align-items: center; gap: 9px; box-shadow: 0 8px 32px rgba(0,0,0,.3); font-size: 12.5px; font-weight: 500; min-width: 220px; transform: translateX(130%); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.toast.show { transform: translateX(0); }
.tdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ═══ DIVIDER ═══ */
.div { border: none; border-top: 1px solid var(--bd); margin: 14px 0; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .sb { transform: translateX(-100%); }
  .sb.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .fc2, .fc3 { grid-template-columns: 1fr; }
  .ptg { grid-template-columns: repeat(2,1fr); }
  .ham { display: flex !important; }
}
.ham { display: none; width: 36px; height: 36px; border-radius: var(--r); background: var(--sur2); border: 1px solid var(--bd2); align-items: center; justify-content: center; font-size: 16px; cursor: pointer; }

/* ═══ PLANE SWITCH (theme toggle) ═══ */
.plane-switch{--dot:#fff;--street:#6B6D76;--street-line:#A8AAB4;--street-line-mid:#C0C2C8;--sky-1:#60A7FA;--sky-2:#2F8EFC;--light-1:rgba(255,233,0,1);--light-2:rgba(255,233,0,.3);cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;}
.plane-switch input{display:none;}
.plane-switch input+div{-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black);position:relative;overflow:hidden;width:50px;height:25px;padding:1px;border-radius:13px;background:linear-gradient(90deg,var(--street) 0%,var(--street) 25%,var(--sky-1) 75%,var(--sky-2) 100%) left var(--p,0%) top 0;background-position-x:var(--p,0%);background-size:400% auto;transition:background-position 0.6s;}
.plane-switch input+div:before,.plane-switch input+div:after{content:"";display:block;position:absolute;transform:translateX(var(--s,0));transition:transform 0.3s;}
.plane-switch input+div:before{width:42px;right:2px;top:4px;height:1px;background:var(--street-line);box-shadow:0 16px 0 0 var(--street-line);}
.plane-switch input+div:after{width:2px;height:2px;border-radius:50%;left:23px;top:1px;animation:lights2 2s linear infinite;box-shadow:inset 0 0 0 2px var(--light-1),0 21px 0 var(--light-1),8px 0 0 var(--light-2),8px 21px 0 var(--light-2),16px 0 0 var(--light-2),16px 21px 0 var(--light-2);}
.plane-switch input+div span{display:block;position:absolute;}
.plane-switch input+div span.street-middle{top:12px;left:21px;width:3px;height:1px;transform:translateX(var(--s,0));background:var(--street-line-mid);box-shadow:5px 0 0 var(--street-line-mid),10px 0 0 var(--street-line-mid),15px 0 0 var(--street-line-mid),20px 0 0 var(--street-line-mid),25px 0 0 var(--street-line-mid);transition:transform 0.3s;}
.plane-switch input+div span.cloud{width:12px;height:4px;border-radius:2px;background:#fff;position:absolute;top:var(--ct,8px);left:100%;opacity:var(--co,0);transition:opacity 0.3s;animation:clouds2 2s linear infinite var(--cd,0s);}
.plane-switch input+div span.cloud:before,.plane-switch input+div span.cloud:after{content:"";position:absolute;transform:translateX(var(--cx,0));border-radius:50%;width:var(--cs,5px);height:var(--cs,5px);background:#fff;bottom:1px;left:1px;}
.plane-switch input+div span.cloud:after{--cs:6px;--cx:4px;}
.plane-switch input+div span.cloud.two{--ct:20px;--cd:1s;opacity:var(--co-2,0);}
.plane-switch input+div div{display:table;position:relative;z-index:1;padding:5px;border-radius:50%;background:var(--dot);transform:translateX(var(--x,0));transition:transform 0.6s cubic-bezier(0.2,0.8,0.35,1.2);}
.plane-switch input+div div svg{width:13px;height:13px;display:block;color:var(--c,var(--street));transition:color 0.6s;}
.plane-switch input:checked+div{--p:100%;--x:25px;--s:-50px;--c:var(--sky-2);--co:.8;--co-2:.6;}
@keyframes lights2{20%,30%{box-shadow:inset 0 0 0 2px var(--light-2),0 21px 0 var(--light-2),8px 0 0 var(--light-1),8px 21px 0 var(--light-1),16px 0 0 var(--light-2),16px 21px 0 var(--light-2);}55%,65%{box-shadow:inset 0 0 0 2px var(--light-2),0 21px 0 var(--light-2),8px 0 0 var(--light-2),8px 21px 0 var(--light-2),16px 0 0 var(--light-1),16px 21px 0 var(--light-1);}90%,100%{box-shadow:inset 0 0 0 2px var(--light-1),0 21px 0 var(--light-1),8px 0 0 var(--light-2),8px 21px 0 var(--light-2),16px 0 0 var(--light-2),16px 21px 0 var(--light-2);}}
@keyframes clouds2{97%{transform:translateX(-72px);visibility:visible;}98%,100%{visibility:hidden;}99%{transform:translateX(-72px);}100%{transform:translateX(0);}}