/* ============================================================
   Multi-domain CMS — Glassmorphism UI
   Theme colours are injected per-domain as CSS variables on <html>.
   ============================================================ */

:root{
  --radius: 20px;
  --radius-sm: 14px;
  --glass: rgba(255,255,255,.55);
  --glass-strong: rgba(255,255,255,.72);
  --glass-brd: rgba(255,255,255,.65);
  --ink: #1f2440;
  --ink-soft: #5b6178;
  --ink-faint:#8a90a6;
  --shadow: 0 10px 40px -12px rgba(31,36,64,.28);
  --shadow-sm: 0 6px 20px -8px rgba(31,36,64,.25);
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 600px at 12% -5%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 60%),
    radial-gradient(900px 600px at 105% 10%, color-mix(in srgb, var(--primary) 32%, transparent), transparent 55%),
    radial-gradient(800px 700px at 50% 120%, color-mix(in srgb, var(--bg3) 28%, transparent), transparent 60%),
    linear-gradient(135deg,#eef1f9,#f6f7fc 55%,#eef0f7);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}

/* ---------- App shell ---------- */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;padding:22px 16px;
  display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg1) 92%, transparent), color-mix(in srgb, var(--bg2) 90%, transparent));
  color:#eef0ff;border-right:1px solid rgba(255,255,255,.08);
}
.brand{display:flex;align-items:center;gap:12px;padding:6px 10px 18px}
.brand .logo{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--primary) 70%, transparent);
}
.brand b{font-size:15px;letter-spacing:.2px}
.brand small{display:block;color:rgba(255,255,255,.55);font-weight:500;font-size:11px}
.nav-group{margin-top:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:4px 12px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  color:rgba(255,255,255,.78);font-size:14px;font-weight:500;transition:.15s;
}
.nav a svg{width:18px;height:18px;opacity:.85;flex:none}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sidebar .spacer{flex:1}

.main{min-width:0;padding:22px 26px 40px}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:16px;margin-bottom:22px;
}
.topbar .hello b{font-size:19px}
.topbar .hello span{display:block;color:var(--ink-soft);font-size:13px}
.topbar .grow{flex:1}
.search{
  display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--glass-brd);
  padding:9px 14px;border-radius:999px;backdrop-filter:blur(12px);min-width:230px;box-shadow:var(--shadow-sm)
}
.search input{border:0;background:transparent;outline:0;font-size:13px;color:var(--ink);width:100%}
.iconbtn{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);
  position:relative;color:var(--ink-soft)
}
.iconbtn:hover{color:var(--primary-600)}
.iconbtn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid #fff}
.avatar{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:grid;place-items:center;font-weight:700;cursor:pointer}

/* ---------- Glass cards ---------- */
.glass{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow);
}
.grid{display:grid;gap:18px}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:2fr 1fr}
.pad{padding:18px}
.pad-lg{padding:22px}

.stat{padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px}
.stat .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--primary) 16%, #fff);color:var(--primary-600)}
.stat .ic svg{width:20px;height:20px}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1}
.stat .l{color:var(--ink-soft);font-size:13px}
.stat .chip{align-self:flex-start;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.chip.up{background:#dcfce7;color:#166534}.chip.down{background:#fee2e2;color:#991b1b}
.chip.neutral{background:#eef2ff;color:#3730a3}

.sec-title{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px}
.sec-title h3{margin:0;font-size:15px}
.sec-title .muted{color:var(--ink-faint);font-size:12px}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-weight:600;font-size:13px;
  padding:10px 16px;border-radius:12px;background:var(--glass-strong);border:1px solid var(--glass-brd);color:var(--ink);transition:.15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-600));color:#fff;border:0;
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--primary) 80%, transparent)}
.btn-ghost{background:transparent;border:1px solid var(--glass-brd)}
.btn-danger{background:linear-gradient(135deg,#f87171,#dc2626);color:#fff;border:0}
.btn-sm{padding:7px 12px;font-size:12px;border-radius:10px}

.seg{display:inline-flex;background:color-mix(in srgb,var(--ink) 6%, #fff);border-radius:12px;padding:4px;gap:2px}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:9px;font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer}
.seg button.active{background:#fff;color:var(--primary-600);box-shadow:var(--shadow-sm)}

/* ---------- Tables / lists ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;color:var(--ink-faint);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;padding:10px 12px}
.tbl td{padding:12px;border-top:1px solid rgba(31,36,64,.07)}
.tbl tr:hover,.tbl tbody tr:hover{background:rgba(255,255,255,.4)}
.badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;display:inline-block}
.badge.published{background:#dcfce7;color:#166534}
.badge.draft{background:#fef9c3;color:#854d0e}
.badge.scheduled{background:#dbeafe;color:#1e40af}
.badge.pending{background:#fef3c7;color:#92400e}
.badge.approved{background:#dcfce7;color:#166534}
.badge.spam{background:#fee2e2;color:#991b1b}

.rowitem{display:flex;align-items:center;gap:12px;padding:11px 4px;border-top:1px solid rgba(31,36,64,.06)}
.rowitem:first-child{border-top:0}
.rowitem .ava{width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--primary) 18%,#fff);
  color:var(--primary-600);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.rowitem .t{font-weight:600;font-size:13.5px}
.rowitem .s{color:var(--ink-faint);font-size:12px}

input.f,textarea.f,select.f{
  width:100%;padding:11px 13px;border-radius:12px;border:1px solid rgba(31,36,64,.14);
  background:rgba(255,255,255,.7);outline:0;font-size:14px;color:var(--ink);font-family:inherit
}
input.f:focus,textarea.f:focus,select.f:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%, transparent)}
label.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin:0 0 6px}
.field{margin-bottom:16px}
.help{color:var(--ink-faint);font-size:12px;margin-top:5px}
.err{color:var(--bad);font-size:12px;margin-top:5px}

.flash{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:13.5px;font-weight:500;
  background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.flash.error{background:#fee2e2;color:#991b1b;border-color:#fecaca}

.notconnect{display:flex;align-items:center;gap:10px;color:var(--ink-faint);font-size:13px;
  padding:14px;border:1px dashed rgba(31,36,64,.2);border-radius:14px;justify-content:center}

.progress{height:9px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,#fff);overflow:hidden}
.progress>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent))}

.ring{position:relative;width:150px;height:150px;margin:0 auto}
.ring .num{position:absolute;inset:0;display:grid;place-items:center;flex-direction:column;text-align:center}
.ring .num b{font-size:28px;font-weight:800}
.ring .num span{font-size:11px;color:var(--ink-faint)}

/* ---------- Login (reference image 2) ---------- */
.login-wrap{
  min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 700px at 20% 25%, color-mix(in srgb,var(--bg3) 70%, transparent), transparent 60%),
    radial-gradient(900px 700px at 85% 75%, color-mix(in srgb,var(--accent) 55%, transparent), transparent 60%),
    linear-gradient(135deg,var(--bg1),var(--bg2) 55%,var(--bg1));
}
.login-wrap::before{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 400px at 70% 20%, color-mix(in srgb,var(--primary) 40%, transparent), transparent 70%);
  filter:blur(20px);opacity:.8}
.login-card{
  position:relative;width:min(420px,92vw);padding:42px 36px 34px;border-radius:30px;text-align:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55);color:#fff;
}
.login-card .face{
  width:92px;height:92px;border-radius:50%;margin:0 auto 26px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)
}
.login-card .face svg{width:46px;height:46px;color:rgba(255,255,255,.85)}
.login-field{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.45);padding:8px 2px;margin-bottom:26px}
.login-field svg{width:18px;height:18px;color:rgba(255,255,255,.85);flex:none}
.login-field input{flex:1;border:0;background:transparent;outline:0;color:#fff;font-size:15px}
.login-field input::placeholder{color:rgba(255,255,255,.7)}
.login-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.85);margin-bottom:26px}
.login-row a{color:rgba(255,255,255,.9)}
.login-row label{display:flex;align-items:center;gap:7px;cursor:pointer}
.btn-login{width:100%;padding:14px;border:0;border-radius:14px;cursor:pointer;color:#fff;font-weight:700;letter-spacing:1px;font-size:14px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--bg1) 60%, #000), var(--primary));
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6);transition:.15s}
.btn-login:hover{transform:translateY(-1px);filter:brightness(1.08)}
.login-brand{position:relative;margin-bottom:8px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.login-err{background:rgba(220,38,38,.25);border:1px solid rgba(254,202,202,.5);color:#fff;padding:10px;border-radius:12px;font-size:13px;margin-bottom:18px}

/* ---------- Responsive ---------- */
.mobile-only{display:none}
@media(max-width:1100px){.cols-4{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:1fr 1fr}.cols-2{grid-template-columns:1fr}}
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:50;width:260px;left:-280px;transition:.25s;box-shadow:0 0 60px rgba(0,0,0,.4)}
  .sidebar.open{left:0}
  .mobile-only{display:grid}
  .search{min-width:0;flex:1}
  .main{padding:16px}
}
@media(max-width:560px){.cols-4,.cols-3{grid-template-columns:1fr}.hello b{font-size:16px}}
.scrim{display:none}
@media(max-width:860px){.scrim.show{display:block;position:fixed;inset:0;background:rgba(10,12,30,.4);z-index:40}}