/* LocalGov CMS — Admin stylesheet (modern). Colours from theme.php variables. */
:root{
  --side-w: 264px;
  --line:#e8edf3; --muted:#697586; --ink:#1a2233; --bg:#eef1f7;
  --card-radius:18px;
  --shadow-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-2: 0 6px 16px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);
  --shadow-3: 0 18px 40px rgba(16,24,40,.12);
}
*{ box-sizing:border-box; }
/* UIcons inline alignment (match old Bootstrap-Icon baseline) */
i.fi, span.fi{ display:inline-flex; align-items:center; vertical-align:-.125em; line-height:1; }
body{
  margin:0; font-family:var(--site-font); color:var(--ink); font-size:1rem;
  background:
    radial-gradient(1100px 480px at 100% -8%, rgba(var(--primary-rgb),.08), transparent 60%),
    radial-gradient(900px 420px at -6% 0%, rgba(var(--secondary-rgb),.07), transparent 55%),
    var(--bg);
  min-height:100vh;
}
a{ color:var(--primary); text-decoration:none; } a:hover{ text-decoration:underline; }
.fw-600{ font-weight:600; }

/* ---------- layout ---------- */
.admin-wrap{ display:flex; min-height:100vh; }

/* ---------- sidebar ---------- */
.sidebar{
  width:var(--side-w); flex:0 0 var(--side-w);
  /* theme-tinted dark gradient — follows the selected theme colour */
  background:
    linear-gradient(180deg, rgba(var(--primary-rgb),.34), rgba(var(--primary-rgb),.06) 42%, rgba(var(--primary-rgb),.16)),
    linear-gradient(180deg, #13203b 0%, #0a1020 100%);
  color:#c0cad8; position:fixed; inset:0 auto 0 0; height:100vh; overflow-y:auto;
  transition:transform .25s; z-index:1040; border-right:1px solid rgba(var(--primary-rgb),.18);
}
.sidebar::-webkit-scrollbar{ width:7px; } .sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:9px; }
.sidebar .brand{
  display:flex; align-items:center; gap:.7rem; padding:1.15rem 1.15rem;
  background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); color:#fff;
  position:sticky; top:0; z-index:2; box-shadow:0 8px 20px rgba(0,0,0,.18);
  margin-bottom:.85rem;
}
.sidebar .brand i{ font-size:1.7rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.sidebar .brand .t{ font-weight:700; line-height:1.15; font-size:1.02rem; }
.sidebar .brand .v{ font-size:.68rem; opacity:.85; letter-spacing:.04em; }
.side-sec{ padding:1rem 1.25rem .3rem; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:#586073; font-weight:600; }
.side-link{
  display:flex; align-items:center; gap:.75rem; margin:.12rem .6rem; padding:.6rem .7rem;
  color:#aeb9cc; font-size:.94rem; border-radius:11px; position:relative; transition:.15s;
}
.side-link i{ font-size:1.08rem; width:1.25rem; text-align:center; opacity:.9; }
.side-link:hover{ background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.side-link.active{
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.95), rgba(var(--primary-rgb),.72));
  color:#fff; box-shadow:0 6px 16px rgba(var(--primary-rgb),.35);
}
.side-link.active i{ opacity:1; }
.side-link .badge2{ margin-left:auto; background:#ef4444; color:#fff; border-radius:999px; font-size:.68rem; padding:.08rem .45rem; box-shadow:0 2px 6px rgba(239,68,68,.5); }

/* ---------- main / topbar ---------- */
.main{ flex:1; margin-left:var(--side-w); min-width:0; display:flex; flex-direction:column; }
.topbar{
  background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line); padding:.65rem 1.4rem; display:flex; align-items:center; gap:1rem;
  position:sticky; top:0; z-index:1030; box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.topbar .menu-btn{ display:none; background:transparent; border:0; font-size:1.4rem; cursor:pointer; color:var(--ink); }
.topbar .page-t{ font-weight:600; font-size:1.05rem; letter-spacing:-.01em; }
.topbar .spacer{ margin-left:auto; }
.topbar .tb-link{ color:var(--muted); font-size:.95rem; position:relative; display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .5rem; border-radius:9px; }
.topbar .tb-link:hover{ background:#f1f4f9; text-decoration:none; color:var(--ink); }
.topbar .tb-link .dot{ position:absolute; top:-2px; right:-4px; background:#ef4444; color:#fff; border-radius:999px; font-size:.62rem; padding:0 .32rem; box-shadow:0 2px 6px rgba(239,68,68,.5); }
.topbar .user{ display:flex; align-items:center; gap:.5rem; }
.avatar{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:0 4px 10px rgba(var(--primary-rgb),.35); }

.content{ padding:1.6rem; flex:1; max-width:1400px; width:100%; }
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; flex-wrap:wrap; }
.page-head h1{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin:0; display:flex; align-items:center; gap:.55rem; }
.page-head h1 i{ color:var(--primary); }

/* ---------- cards ---------- */
.card-x{ background:#fff; border:1px solid var(--line); border-radius:var(--card-radius); box-shadow:var(--shadow-1); transition:box-shadow .18s, transform .18s; }
.card-x .card-bd{ padding:1.25rem; }
a.card-x:hover, .card-x.hoverable:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); text-decoration:none; }

/* stat cards */
.stat{ display:flex; align-items:center; gap:1rem; padding:1.25rem; }
.stat .ic{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.55rem; color:#fff; flex:0 0 auto; box-shadow:0 8px 18px rgba(16,24,40,.16); }
.stat .n{ font-size:1.85rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.stat .l{ color:var(--muted); font-size:.9rem; margin-top:.15rem; }
a.card-x .stat .n{ color:var(--ink); }

/* buttons */
.btn{ font-family:inherit; border-radius:11px; }
.btn-brand{ background:var(--primary); background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); border:0; color:#fff; box-shadow:0 6px 16px rgba(var(--primary-rgb),.32); }
.btn-brand:hover{ filter:brightness(1.06); color:#fff; box-shadow:0 8px 20px rgba(var(--primary-rgb),.4); }
.btn-outline-secondary{ border-radius:11px; }
.text-brand{ color:var(--primary)!important; }
.badge-soft{ background:var(--accent); color:var(--primary); font-weight:600; }

/* tables */
.table thead th{ background:transparent; border-bottom:1px solid var(--line); font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; padding-top:.9rem; padding-bottom:.7rem; }
.table td{ vertical-align:middle; border-color:var(--line); }
.table> :not(caption)>*>*{ padding:.85rem .75rem; }
.tbl-actions a, .tbl-actions button{ color:var(--muted); padding:.2rem .35rem; }
.tbl-actions a:hover{ color:var(--primary); }

/* appearance swatches */
.theme-card{ cursor:pointer; border:2px solid var(--line); border-radius:14px; overflow:hidden; transition:.15s; background:#fff; }
.theme-card:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.theme-card.sel{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(var(--primary-rgb),.18); }
.theme-prev{ height:56px; }
.theme-name{ font-size:.82rem; padding:.45rem .5rem; text-align:center; font-weight:500; }
.font-card{ cursor:pointer; border:2px solid var(--line); border-radius:13px; padding:.8rem; transition:.15s; background:#fff; }
.font-card:hover{ box-shadow:var(--shadow-2); }
.font-card.sel{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(var(--primary-rgb),.18); }

/* ---------- colour-mode cards (โหมดสีของเว็บ) ---------- */
.cmode-card{ position:relative; cursor:pointer; border:2px solid var(--line); border-radius:15px; background:#fff; padding:.55rem; transition:.16s; height:100%; }
.cmode-card:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.cmode-card.sel{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(var(--primary-rgb),.18); }
.cmode-prev{ height:60px; border-radius:10px;
  background:linear-gradient(90deg,#ff5b5b,#ff9d2f,#ffe14d,#43d65f,#3aa0ff,#9a6bff); }
.cmode-name{ font-weight:700; font-size:.92rem; text-align:center; margin-top:.5rem; }
.cmode-desc{ font-size:.74rem; color:var(--muted); text-align:center; line-height:1.3; min-height:2rem; }
.cmode-check{ position:absolute; top:.7rem; right:.7rem; width:24px; height:24px; border-radius:50%;
  background:var(--primary); color:#fff; display:none; align-items:center; justify-content:center; font-size:.9rem; box-shadow:0 3px 8px rgba(var(--primary-rgb),.45); z-index:2; }
.cmode-card.sel .cmode-check{ display:flex; }

/* ---------- appearance: website skeleton preview ---------- */
.wf{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow-2); }
.wf-topbar{ height:9px; background:#0d1b2a; }
.wf-head{ display:flex; align-items:center; gap:8px; padding:9px 11px; background:#fff; border-bottom:2px solid var(--primary); }
.wf-logo{ width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); flex:0 0 auto; }
.wf-titles{ display:flex; flex-direction:column; gap:3px; }
.wf-t{ width:120px; height:7px; border-radius:3px; background:var(--primary); }
.wf-s{ width:80px; height:5px; border-radius:3px; background:#cbd5e1; }
.wf-nav{ display:flex; gap:12px; padding:8px 11px; background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); }
.wf-nav i{ width:34px; height:6px; border-radius:3px; background:rgba(255,255,255,.85); }
.wf-hero{ height:62px; background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); position:relative; padding:14px; filter:brightness(.96); }
.wf-hero span{ display:block; width:130px; height:9px; border-radius:4px; background:rgba(255,255,255,.9); }
.wf-hero span.sm{ width:90px; height:6px; margin-top:6px; background:rgba(255,255,255,.6); }
.wf-content{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:11px; background:var(--accent); }
.wf-card{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:7px; }
.wf-thumb{ height:26px; border-radius:5px; background:var(--accent); margin-bottom:6px; }
.wf-badge{ width:34px; height:9px; border-radius:999px; background:var(--secondary); margin-bottom:5px; }
.wf-line{ height:5px; border-radius:3px; background:#d6dde6; margin-bottom:4px; }
.wf-line.sm{ width:70%; }
.wf-btn{ width:44px; height:11px; border-radius:5px; background:var(--primary); margin-top:5px; }
.wf-foot{ height:24px; background:#0d1b2a; }
.wf-legend{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:.7rem; font-size:.78rem; color:var(--muted); }
.wf-legend span{ display:inline-flex; align-items:center; gap:.35rem; }
.wf-legend i{ width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid rgba(0,0,0,.08); }

/* ---------- appearance: compact font grid ---------- */
.font-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.5rem; }
.font-chip{ border:2px solid var(--line); border-radius:11px; padding:.5rem .6rem; cursor:pointer; transition:.14s; background:#fff; }
.font-chip:hover{ border-color:var(--primary); box-shadow:var(--shadow-1); }
.font-chip.sel{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.18); }
.font-chip .fc-name{ font-weight:700; font-size:.92rem; line-height:1.2; }
.font-chip .fc-sample{ font-size:.8rem; color:var(--muted); }

/* ---------- appearance: branding drop ---------- */
.brand-drop{ width:150px; height:150px; margin:0 auto; border:2px dashed var(--line); border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--accent); }
.brand-drop.sm{ width:90px; height:90px; }
.brand-drop img{ max-width:100%; max-height:100%; object-fit:contain; }
.brand-drop .bd-ph{ font-size:2.4rem; color:var(--primary); opacity:.5; }

/* ---------- customizable widget dashboard ---------- */
.dash-row{ display:flex; align-items:center; gap:.5rem; padding:.55rem .2rem; border-bottom:1px dashed var(--line); color:var(--ink); font-size:.93rem; }
.dash-row:last-child{ border-bottom:0; }
.dash-row:hover{ color:var(--primary); text-decoration:none; }
.widget-slot{ position:relative; }
.widget-tools{ position:absolute; top:10px; right:18px; z-index:5; display:none; gap:.25rem; }
body.dash-editing .widget-tools{ display:flex; }
body.dash-editing .widget-slot .card-x{ outline:2px dashed rgba(var(--primary-rgb),.4); outline-offset:2px; }
body.dash-editing .widget-slot{ cursor:default; }
.wt-drag, .wt-remove{ width:28px; height:28px; border-radius:8px; border:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-1); }
.wt-drag{ background:var(--primary); color:#fff; cursor:grab; }
.wt-remove{ background:#dc2626; color:#fff; }
.wt-ghost{ opacity:.5; }
.palette-chip{ border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:.4rem .9rem; font-size:.88rem; font-family:inherit; cursor:pointer; transition:.14s; display:inline-flex; align-items:center; gap:.3rem; }
.palette-chip:hover{ border-color:var(--primary); color:var(--primary); }
.palette-chip .added-ic{ display:none; }
.palette-chip.added{ background:var(--accent); color:var(--primary); border-color:transparent; opacity:.85; cursor:default; }
.palette-chip.added .add-ic{ display:none; } .palette-chip.added .added-ic{ display:inline; }
[data-ui="dark"] .palette-chip{ background:#0e1830; color:var(--ink); }

/* ---------- settings (vertical nav) ---------- */
.settings-shell{ display:flex; min-height:440px; }
.settings-nav{ width:230px; flex:0 0 230px; border-right:1px solid var(--line); padding:1rem .7rem; display:flex; flex-direction:column; gap:.25rem; }
.snav{ display:flex; align-items:center; gap:.7rem; padding:.65rem .8rem; border:0; background:transparent; border-radius:11px; color:var(--ink); font-size:.95rem; font-family:inherit; cursor:pointer; text-align:left; transition:.14s; width:100%; }
.snav i{ font-size:1.1rem; color:var(--muted); width:1.3rem; text-align:center; }
.snav:hover{ background:var(--accent); }
.snav.active{ background:linear-gradient(135deg,rgba(var(--primary-rgb),.95),rgba(var(--primary-rgb),.75)); color:#fff; box-shadow:0 6px 14px rgba(var(--primary-rgb),.3); }
.snav.active i{ color:#fff; }
.snav-badge{ margin-left:auto; font-size:.62rem; font-weight:700; padding:.05rem .4rem; border-radius:999px; background:#9aa5b5; color:#fff; }
.snav-badge.on{ background:#16a34a; }
.snav.active .snav-badge{ background:rgba(255,255,255,.3); }
.settings-main{ flex:1; padding:1.6rem 1.8rem; min-width:0; }
.spane{ display:none; }
.spane.active{ display:block; animation:fadeIn .2s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.spane-head{ margin-bottom:1.2rem; }
.spane-head h5{ margin:0; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.spane-head p{ margin:.25rem 0 0; color:var(--muted); font-size:.9rem; }
.settings-foot{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line); }
[data-ui="dark"] .settings-nav{ border-right-color:var(--line); }
[data-ui="dark"] .snav{ color:var(--ink); }
@media (max-width: 768px){
  .settings-shell{ flex-direction:column; }
  .settings-nav{ width:100%; flex:none; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }
  .snav{ flex:0 0 auto; } .snav span:not(.snav-badge){ display:none; }
  .settings-main{ padding:1.2rem; }
}

/* ---------- Quill / Tom Select / flatpickr integration ---------- */
.ql-toolbar.ql-snow{ border-radius:11px 11px 0 0; border-color:var(--line); background:#fafbfd; }
.ql-container.ql-snow{ border-radius:0 0 11px 11px; border-color:var(--line); font-family:inherit; font-size:1rem; }
.ql-editor{ min-height:160px; }
.ts-wrapper.form-control, .ts-control{ border-radius:11px!important; border-color:var(--line)!important; }
.ts-control{ min-height:calc(2.5rem + 2px); padding:.45rem .8rem; }
.ts-dropdown{ border-radius:11px; box-shadow:var(--shadow-2); border-color:var(--line); }
.ts-dropdown .active{ background:var(--accent); color:var(--primary); }
input.flatpickr-th{ background-image:none; }
[data-ui="dark"] .ql-toolbar.ql-snow{ background:#0e1830; border-color:#27344f; }
[data-ui="dark"] .ql-toolbar.ql-snow .ql-stroke{ stroke:#cbd5e1; }
[data-ui="dark"] .ql-toolbar.ql-snow .ql-fill{ fill:#cbd5e1; }
[data-ui="dark"] .ql-toolbar.ql-snow .ql-picker{ color:#cbd5e1; }
[data-ui="dark"] .ql-container.ql-snow{ border-color:#27344f; }
[data-ui="dark"] .ql-editor{ color:var(--ink); }
[data-ui="dark"] .ts-control{ background:#0e1830!important; color:var(--ink); }
[data-ui="dark"] .ts-dropdown{ background:#0e1830; color:var(--ink); border-color:#27344f; }
[data-ui="dark"] .ts-dropdown .active{ background:#16233c; color:#fff; }
[data-ui="dark"] .flatpickr-calendar{ background:#111b2e; color:#e6ebf4; box-shadow:var(--shadow-3); }
[data-ui="dark"] .flatpickr-day{ color:#cbd5e1; } [data-ui="dark"] .flatpickr-day.selected{ background:var(--primary); border-color:var(--primary); }
[data-ui="dark"] .flatpickr-months .flatpickr-month, [data-ui="dark"] .flatpickr-weekday{ color:#cbd5e1; }

/* ---------- homepage builder ---------- */
.sec-row{ display:flex; align-items:center; gap:.8rem; padding:.7rem .8rem; border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:.6rem; transition:.15s; }
.sec-row:hover{ box-shadow:var(--shadow-1); }
.sec-row.dragging{ opacity:.4; }
.sec-grip{ cursor:grab; color:var(--muted); font-size:1.2rem; }
.sec-ico{ width:40px; height:40px; border-radius:11px; background:var(--accent); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex:0 0 auto; }
.sec-info{ flex:1; min-width:0; }
.sec-name{ font-weight:600; }
.sec-desc{ font-size:.82rem; color:var(--muted); }
.sec-actions{ display:flex; align-items:center; gap:.4rem; }
.sec-switch{ position:relative; display:inline-block; width:40px; height:22px; cursor:pointer; margin:0; }
.sec-switch input{ display:none; }
.sec-switch span{ position:absolute; inset:0; background:#cbd5e1; border-radius:999px; transition:.2s; }
.sec-switch span::after{ content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.sec-switch input:checked + span{ background:var(--primary); }
.sec-switch input:checked + span::after{ transform:translateX(18px); }
.palette-add{ display:flex; align-items:center; width:100%; border:1px solid var(--line); background:#fff; border-radius:11px; padding:.55rem .7rem; font-size:.9rem; color:var(--ink); cursor:pointer; font-family:inherit; transition:.14s; }
.palette-add:hover{ border-color:var(--primary); color:var(--primary); background:var(--accent); }
[data-ui="dark"] .sec-row, [data-ui="dark"] .palette-add{ background:#0e1830; }

/* ---------- AI assist ---------- */
.ai-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; padding:.5rem .7rem; border-radius:12px;
  background:linear-gradient(135deg, rgba(124,58,237,.10), rgba(var(--primary-rgb),.08)); border:1px solid rgba(124,58,237,.18); }
.ai-bar-label{ font-size:.82rem; font-weight:600; color:#7c3aed; margin-right:.2rem; }
.btn-ai{ background:linear-gradient(135deg,#7c3aed,#5b8def); border:0; color:#fff; font-size:.82rem; }
.btn-ai:hover{ filter:brightness(1.08); color:#fff; }
.btn-ai:disabled{ opacity:.7; }
[data-ui="dark"] .ai-bar{ background:linear-gradient(135deg, rgba(124,58,237,.22), rgba(var(--primary-rgb),.16)); border-color:rgba(124,58,237,.35); }

/* ---------- themed confirm/alert modal ---------- */
.lg-modal-ov{ position:fixed; inset:0; z-index:3000; background:rgba(13,21,38,.5); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; transition:opacity .18s; }
.lg-modal-ov.show{ opacity:1; }
.lg-modal{ background:#fff; border-radius:18px; box-shadow:var(--shadow-3); width:100%; max-width:420px; padding:1.5rem;
  transform:translateY(12px) scale(.98); transition:transform .2s; }
.lg-modal-ov.show .lg-modal{ transform:none; }
.lg-modal-title{ font-weight:700; font-size:1.1rem; display:flex; align-items:center; gap:.5rem; }
.lg-modal-title i{ color:var(--primary); }
.lg-modal.danger .lg-modal-title i{ color:#dc2626; }
.lg-modal-msg{ color:var(--muted); margin:.7rem 0 1.3rem; line-height:1.6; }
.lg-modal-foot{ display:flex; justify-content:flex-end; gap:.6rem; }
[data-ui="dark"] .lg-modal{ background:#111b2e; color:var(--ink); }
[data-ui="dark"] .lg-modal-msg{ color:#94a3b8; }

/* ---------- toast ---------- */
.lg-toast{ position:fixed; right:18px; bottom:18px; z-index:2000; background:#0d1b2a; color:#fff; padding:.6rem 1rem;
  border-radius:12px; box-shadow:var(--shadow-3); font-size:.92rem; display:flex; align-items:center; gap:.4rem;
  opacity:0; transform:translateY(10px); pointer-events:none; transition:.22s; }
.lg-toast.show{ opacity:1; transform:translateY(0); }
.lg-toast i{ color:#4ade80; } .lg-toast.err i{ color:#f87171; }
[data-ui="dark"] .font-chip, [data-ui="dark"] .wf-card{ background:#0e1830; }
[data-ui="dark"] .wf-head, [data-ui="dark"] .wf{ background:#0e1830; }

/* login */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); position:relative; overflow:hidden; }
.login-wrap::before{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:rgba(255,255,255,.08); top:-160px; right:-120px; }
.login-card{ background:#fff; border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.35); width:100%; max-width:420px; padding:2.4rem; position:relative; }
.login-card .form-control{ border-radius:11px; }

/* updater log */
.log-line{ padding:.45rem .75rem; border-radius:10px; margin-bottom:.4rem; font-size:.9rem; display:flex; gap:.5rem; align-items:flex-start; }
.log-line.ok{ background:#dcfce7; color:#166534; } .log-line.error{ background:#fee2e2; color:#991b1b; }
.log-line.warning{ background:#fef9c3; color:#854d0e; }

/* misc refinements */
.alert{ border-radius:13px; border:0; box-shadow:var(--shadow-1); }
.form-control, .form-select{ border-radius:11px; border-color:var(--line); }
.form-control:focus, .form-select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15); }
.modal-content{ border:0; border-radius:18px; box-shadow:var(--shadow-3); }
.nav-pills .nav-link{ border-radius:11px; color:var(--muted); }
.nav-pills .nav-link.active{ background:var(--primary); }

/* ---------- account mega menu ---------- */
.mega-menu{ width:320px; max-width:92vw; border:0; border-radius:18px; box-shadow:var(--shadow-3); overflow:hidden; margin-top:.5rem; }
.mega-head{ display:flex; align-items:center; gap:.75rem; padding:1rem 1.1rem; background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); color:#fff; }
.avatar.lg{ width:48px; height:48px; font-size:1.3rem; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.mega-head .mm-name{ font-weight:700; line-height:1.2; }
.mega-head .mm-sub{ font-size:.78rem; opacity:.9; }
.mega-body{ padding:.9rem 1.1rem .4rem; }
.mm-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; margin:.55rem 0 .35rem; }
.mm-seg{ display:flex; gap:.35rem; margin-bottom:.4rem; }
.mm-seg button{ flex:1; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:10px; padding:.4rem .2rem; font-size:.82rem; font-family:inherit; cursor:pointer; transition:.14s; display:flex; align-items:center; justify-content:center; gap:.25rem; }
.mm-seg button:hover{ border-color:var(--primary); color:var(--primary); }
.mm-seg button.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 4px 10px rgba(var(--primary-rgb),.3); }
.mega-links{ border-top:1px solid var(--line); padding:.4rem; }
.mm-link{ display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:10px; color:var(--ink); font-size:.92rem; }
.mm-link i{ font-size:1.05rem; color:var(--muted); width:1.2rem; text-align:center; }
.mm-link:hover{ background:#f1f4f9; text-decoration:none; }
.mm-link.danger{ color:#dc2626; } .mm-link.danger i{ color:#dc2626; }
.mm-saved{ position:absolute; top:.6rem; right:.7rem; font-size:.7rem; color:#16a34a; opacity:0; transition:.2s; }
.mm-saved.show{ opacity:1; }

/* ---------- profile page ---------- */
.profile-hero{ display:flex; align-items:center; gap:1.2rem; padding:1.6rem; border-radius:var(--card-radius); color:#fff;
  background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); box-shadow:var(--shadow-2); position:relative; overflow:hidden; }
.profile-hero::after{ content:""; position:absolute; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.1); right:-70px; top:-90px; }
.profile-hero .avatar{ width:84px; height:84px; font-size:2.4rem; background:rgba(255,255,255,.18); box-shadow:0 8px 22px rgba(0,0,0,.25); position:relative; z-index:1; }
.profile-hero .ph-name{ font-size:1.5rem; font-weight:800; line-height:1.1; position:relative; z-index:1; }
.profile-hero .ph-meta{ opacity:.92; position:relative; z-index:1; }
.profile-hero .ph-role{ display:inline-block; background:rgba(255,255,255,.2); border-radius:999px; padding:.1rem .7rem; font-size:.8rem; margin-top:.4rem; }

/* ---------- dark UI mode (admin only) ---------- */
[data-ui="dark"]{ --bg:#0a1120; --ink:#e6ebf4; --muted:#93a1b8; --line:#1d2840; --accent:#16233c;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 22px rgba(0,0,0,.45); --shadow-3:0 22px 50px rgba(0,0,0,.6); }
[data-ui="dark"] body{ color:var(--ink);
  background:
    radial-gradient(1100px 480px at 100% -8%, rgba(var(--primary-rgb),.14), transparent 60%),
    radial-gradient(900px 420px at -6% 0%, rgba(var(--secondary-rgb),.1), transparent 55%),
    #0a1120; }
[data-ui="dark"] .card-x{ background:#111b2e; border-color:var(--line); }
[data-ui="dark"] .topbar{ background:rgba(13,21,38,.85); border-bottom-color:var(--line); }
[data-ui="dark"] .topbar .page-t{ color:var(--ink); }
[data-ui="dark"] .topbar .menu-btn{ color:var(--ink); }
[data-ui="dark"] .topbar .tb-link:hover{ background:#16233c; color:var(--ink); }
[data-ui="dark"] .page-head h1{ color:var(--ink); }
[data-ui="dark"] .stat .n{ color:var(--ink)!important; }
[data-ui="dark"] .table{ color:var(--ink); --bs-table-bg:transparent; --bs-table-color:var(--ink); }
[data-ui="dark"] .table thead th{ border-bottom-color:var(--line); }
[data-ui="dark"] .table td, [data-ui="dark"] .table th{ border-color:var(--line); }
[data-ui="dark"] .form-control, [data-ui="dark"] .form-select{ background:#0e1830; border-color:#27344f; color:var(--ink); }
[data-ui="dark"] .form-control::placeholder{ color:#5e6c84; }
[data-ui="dark"] .form-control:disabled{ background:#16223a; }
[data-ui="dark"] .modal-content{ background:#111b2e; color:var(--ink); }
[data-ui="dark"] .dropdown-menu{ background:#111b2e; border-color:var(--line); }
[data-ui="dark"] .mm-seg button{ background:#0e1830; border-color:#27344f; color:var(--ink); }
[data-ui="dark"] .mm-link{ color:var(--ink); } [data-ui="dark"] .mm-link:hover{ background:#16233c; }
[data-ui="dark"] .theme-card, [data-ui="dark"] .font-card, [data-ui="dark"] .cmode-card{ background:#0e1830; }
[data-ui="dark"] .nav-pills .nav-link{ color:var(--muted); }
[data-ui="dark"] .alert-info{ background:#16233c; color:#cfe0ff; }
[data-ui="dark"] .btn-outline-secondary{ color:var(--ink); border-color:#34425e; }
[data-ui="dark"] .btn-outline-secondary:hover{ background:#1c2a44; color:#fff; }
[data-ui="dark"] code{ color:#f0a; color:#ff8fb3; }
[data-ui="dark"] .text-muted{ color:var(--muted)!important; }

@media (max-width: 992px){
  .sidebar{ transform:translateX(-100%); } .sidebar.open{ transform:translateX(0); box-shadow:var(--shadow-3); }
  .main{ margin-left:0; } .topbar .menu-btn{ display:block; }
}