/* ========== 1. Nexus — dashboard modern (tampilan default, sedikit token) ========== */
html[data-template="nexus"]{
  --radius: 12px;
  --radius-sm: 9px;
}

/* ========== 2. Terminal — konsol fosfor, monospace, sudut lancip ========== */
html[data-template="terminal"]{
  color-scheme: dark;
  --page:#03140a; --surface-1:#061c10; --surface-2:#0a2816;
  --text-primary:#b7ffc8; --text-secondary:#6fbf86; --text-muted:#3d7a52;
  --gridline:#134422; --baseline:#1a5a32; --border:#1f7a40;
  --good:#39ff14; --warning:#d6ff4a; --serious:#ffb347; --critical:#ff4d4d;
  --success-text:#39ff14;
  --blue:#39ff14; --green:#39ff14; --magenta:#9dffb0; --yellow:#d6ff4a;
  --aqua:#2ee59d; --orange:#ffb347; --violet:#7dff9a; --red:#ff4d4d;
  --shadow: none;
  --radius: 0; --radius-sm: 0;
}
html[data-template="terminal"][data-theme="light"]{
  color-scheme: light;
  --page:#eef8ef; --surface-1:#f7fff8; --surface-2:#ffffff;
  --text-primary:#063816; --text-secondary:#1f6b38; --text-muted:#4a7d5a;
  --gridline:#c5e4cc; --baseline:#9ecfae; --border:#7bb88c;
  --good:#0a7a22; --blue:#0a7a22; --success-text:#0a7a22;
}
html[data-template="terminal"] body{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.01em;
}
html[data-template="terminal"] body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:80;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  opacity:.35;
}
html[data-template="terminal"] .login-card,
html[data-template="terminal"] .topbar,
html[data-template="terminal"] .sidenav,
html[data-template="terminal"] .panel,
html[data-template="terminal"] .kpi-card,
html[data-template="terminal"] .btn,
html[data-template="terminal"] .icon-btn,
html[data-template="terminal"] .toast,
html[data-template="terminal"] .confirm-modal,
html[data-template="terminal"] .chart-box,
html[data-template="terminal"] .search-input,
html[data-template="terminal"] .field input,
html[data-template="terminal"] .field select{
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-template="terminal"] #login-screen{
  background: #020a05;
}
html[data-template="terminal"] .login-logo{ text-transform:uppercase; letter-spacing:.14em; font-size:15px; }
html[data-template="terminal"] .topbar{ border-bottom:1px solid var(--good); }
html[data-template="terminal"] .sidenav{ border-right:1px solid var(--good); }
html[data-template="terminal"] .nav-item.active{ background:transparent; color:var(--good); outline:1px solid var(--good); }
html[data-template="terminal"] .btn-primary{ background:transparent; color:var(--good); border:1px solid var(--good); width:100%; }
html[data-template="terminal"] .kpi-value{ font-size:20px; }
html[data-template="terminal"] .kpi-card{ border:1px dashed var(--border); }
html[data-template="terminal"] .mode-pill, html[data-template="terminal"] .chip, html[data-template="terminal"] .badge, html[data-template="terminal"] .role-badge, html[data-template="terminal"] .lamp-badge{ border-radius:0; }

/* ========== 3. Aurora — navigasi horizontal, kaca, rounded besar ========== */
html[data-template="aurora"]{
  --page:#eef4ff; --surface-1:rgba(255,255,255,.78); --surface-2:rgba(255,255,255,.94);
  --text-primary:#1b2040; --text-secondary:#5a6288; --text-muted:#8b92b3;
  --gridline:rgba(90,98,136,.16); --baseline:#c9d0ea; --border:rgba(110,90,200,.18);
  --good:#12b886; --warning:#f59f00; --serious:#fd7e14; --critical:#e03131;
  --success-text:#0b7a56;
  --blue:#5b5bd6; --green:#12b886; --magenta:#e64980; --yellow:#fab005;
  --aqua:#15aabf; --orange:#fd7e14; --violet:#7950f2; --red:#fa5252;
  --shadow: 0 18px 50px rgba(70,60,160,.12);
  --radius: 28px; --radius-sm: 18px;
}
html[data-template="aurora"][data-theme="dark"]{
  --page:#121528; --surface-1:rgba(28,32,58,.78); --surface-2:rgba(36,42,72,.9);
  --text-primary:#f4f2ff; --text-secondary:#b8b4d8; --text-muted:#8a86ad;
  --gridline:rgba(255,255,255,.08); --border:rgba(180,160,255,.2);
  --success-text:#63e6be;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
}
html[data-template="aurora"] body{ font-family: Outfit, system-ui, sans-serif; }
html[data-template="aurora"] #login-screen{
  background:
    radial-gradient(circle at 10% 20%, #c5b8ff 0, transparent 40%),
    radial-gradient(circle at 90% 80%, #9af0d8 0, transparent 42%),
    var(--page);
}
html[data-template="aurora"] .login-card{
  border-radius:32px; backdrop-filter: blur(18px); max-width:420px; padding:32px;
}
html[data-template="aurora"] .topbar, html[data-template="aurora"] .panel, html[data-template="aurora"] .kpi-card, html[data-template="aurora"] .sidenav{
  backdrop-filter: blur(16px); border-radius: var(--radius);
}
html[data-template="aurora"] .topbar{ margin:10px 12px 0; border:1px solid var(--border); }
html[data-template="aurora"] .shell-body{ flex-direction:column; }
html[data-template="aurora"] .sidenav{
  width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px;
  border-right:none; margin:10px 12px 0; padding:8px 10px;
}
html[data-template="aurora"] .sidenav .nav-sep{ display:none; }
html[data-template="aurora"] .sidenav .nav-item{
  width:auto; border-radius:999px; padding:8px 14px;
}
html[data-template="aurora"] .main-view{ padding:20px 22px 88px; }
html[data-template="aurora"] .kpi-grid{ gap:16px; }
html[data-template="aurora"] .kpi-card{ border-radius:24px; }
html[data-template="aurora"] .btn, html[data-template="aurora"] .icon-btn, html[data-template="aurora"] .chip{ border-radius:999px; }
@media (max-width: 860px){
  html[data-template="aurora"] .sidenav{ display:none; }
  html[data-template="aurora"] .topbar{ margin:0; border-radius:0; }
}

/* ========== 4. Civic — portal instansi, navy + emas, kertas resmi ========== */
html[data-template="civic"]{
  color-scheme: light;
  --page:#f3efe4; --surface-1:#fffdf6; --surface-2:#ffffff;
  --text-primary:#1a2744; --text-secondary:#4a5568; --text-muted:#7a7466;
  --gridline:#ddd4c2; --baseline:#c9bea8; --border:#c5b48a;
  --good:#2f6b3a; --warning:#c49212; --serious:#b85c2a; --critical:#9b1c1c;
  --success-text:#2f6b3a;
  --blue:#1b3a6b; --green:#2f6b3a; --magenta:#8c3d5b; --yellow:#c9a227;
  --aqua:#2d6a6a; --orange:#b85c2a; --violet:#3d2f6b; --red:#9b1c1c;
  --shadow: 0 1px 0 #fff, 0 2px 8px rgba(26,39,68,.08);
  --radius: 4px; --radius-sm: 3px;
}
html[data-template="civic"][data-theme="dark"]{
  color-scheme: dark;
  --page:#121826; --surface-1:#1b2436; --surface-2:#222d44;
  --text-primary:#f3efe4; --text-secondary:#c9c0a8; --text-muted:#8f866f;
  --gridline:#2c364c; --border:#c9a227;
  --success-text:#c9a227;
  --blue:#d4b45a;
}
html[data-template="civic"] body{ font-family: "Source Sans 3", "Segoe UI", sans-serif; }
html[data-template="civic"] h1, html[data-template="civic"] .login-logo, html[data-template="civic"] .brand, html[data-template="civic"] .view-header h1{
  font-family: Merriweather, Georgia, serif;
}
html[data-template="civic"] #login-screen{
  background: linear-gradient(#1b3a6b, #1b3a6b 42%, #f3efe4 42%);
}
html[data-template="civic"] .login-card{ border-top:6px solid #c9a227; border-radius:4px; }
html[data-template="civic"] .topbar{
  background:#1b3a6b; color:#fff; border-bottom:4px solid #c9a227;
}
html[data-template="civic"] .topbar .brand, html[data-template="civic"] .mode-pill, html[data-template="civic"] .icon-btn{
  color:#fff;
}
html[data-template="civic"] .mode-pill, html[data-template="civic"] .icon-btn{
  background:#143056; border-color:#c9a227;
}
html[data-template="civic"] .sidenav{ background:#efe8d6; border-right:1px solid #c5b48a; }
html[data-template="civic"][data-theme="dark"] .sidenav{ background:#161e2e; }
html[data-template="civic"] .nav-item.active{ background:#1b3a6b; color:#fff; border-radius:4px; }
html[data-template="civic"] .kpi-card, html[data-template="civic"] .panel{
  border-radius:4px; border-top:3px solid #1b3a6b; box-shadow: var(--shadow);
}
html[data-template="civic"] .btn{ border-radius:4px; text-transform:uppercase; letter-spacing:.04em; font-size:12.5px; }
html[data-template="civic"] .btn-primary{ background:#1b3a6b; }

/* ========== 5. Metro Grid — pusat komando, rail ikon, aksen oranye ========== */
html[data-template="metro"]{
  color-scheme: dark;
  --page:#0c0c0e; --surface-1:#161618; --surface-2:#1e1e22;
  --text-primary:#f5f5f0; --text-secondary:#b4b4aa; --text-muted:#7c7c74;
  --gridline:#2a2a2e; --baseline:#3a3a40; --border:#ff6a00;
  --good:#3ddc84; --warning:#ffd100; --serious:#ff6a00; --critical:#ff2d2d;
  --success-text:#3ddc84;
  --blue:#ff6a00; --green:#3ddc84; --magenta:#ff4d8d; --yellow:#ffd100;
  --aqua:#00d4c8; --orange:#ff6a00; --violet:#a78bfa; --red:#ff2d2d;
  --shadow: 8px 8px 0 rgba(255,106,0,.18);
  --radius: 2px; --radius-sm: 2px;
}
html[data-template="metro"][data-theme="light"]{
  color-scheme: light;
  --page:#f2f0ea; --surface-1:#ffffff; --surface-2:#fff7ef;
  --text-primary:#161616; --text-secondary:#4a4a46; --text-muted:#7a7a74;
  --gridline:#e4dfd4; --border:#ff6a00;
  --success-text:#0f7a45;
  --shadow: 6px 6px 0 rgba(255,106,0,.2);
}
html[data-template="metro"] body{
  font-family: "Roboto Condensed", "Segoe UI", sans-serif;
  background-image:
    linear-gradient(rgba(255,106,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,106,0,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
html[data-template="metro"] h1, html[data-template="metro"] .brand, html[data-template="metro"] .kpi-value, html[data-template="metro"] .login-logo{
  font-family: Oswald, Impact, sans-serif; text-transform:uppercase;
}
html[data-template="metro"] #login-screen{ background:#0c0c0e; }
html[data-template="metro"] .login-card{ border:2px solid #ff6a00; border-radius:2px; box-shadow: 10px 10px 0 #ff6a00; }
html[data-template="metro"] .topbar{
  min-height:58px; background:#111; border-bottom:3px solid #ff6a00;
}
html[data-template="metro"] .sidenav{
  width:76px; padding:10px 6px; background:#111; border-right:3px solid #ff6a00;
}
html[data-template="metro"] .sidenav .nav-sep{ display:none; }
html[data-template="metro"] .sidenav .nav-item{
  flex-direction:column; gap:2px; padding:10px 4px; width:100%; text-align:center; font-size:9.5px;
  border-radius:2px;
}
html[data-template="metro"] .sidenav .nav-item .ic{ font-size:20px; width:auto; }
html[data-template="metro"] .nav-item.active{ background:#ff6a00; color:#111; }
html[data-template="metro"] .kpi-grid{ grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; }
html[data-template="metro"] .kpi-card{
  border-radius:2px; border:2px solid #ff6a00; border-left-width:8px; box-shadow: var(--shadow);
}
html[data-template="metro"] .kpi-value{ font-size:32px; }
html[data-template="metro"] .panel{ border-radius:2px; border:2px solid var(--gridline); }
html[data-template="metro"] .btn{ border-radius:2px; text-transform:uppercase; }
html[data-template="metro"] .btn-primary{ background:#ff6a00; color:#111; }
@media (max-width: 860px){
  html[data-template="metro"] .sidenav{ display:none; }
}

/* ========== 6. Horizon — Horizon UI / Next.js (ungu, kartu 20px) ========== */
html[data-template="horizon"]{
  color-scheme: light;
  --page:#F4F7FE; --surface-1:#ffffff; --surface-2:#F4F7FE;
  --text-primary:#1B2559; --text-secondary:#707EAE; --text-muted:#A3AED0;
  --gridline:#E9EDF7; --baseline:#C9D4EA; --border:#E0E5F2;
  --good:#05CD99; --warning:#FFB547; --serious:#EE5D50; --critical:#E31A1A;
  --success-text:#01B574;
  --blue:#4318FF; --green:#05CD99; --magenta:#EE5D50; --yellow:#FFCE20;
  --aqua:#6AD2FF; --orange:#FF865B; --violet:#868CFF; --red:#E31A1A;
  --shadow: 14px 17px 40px 4px rgba(112,144,176,.08);
  --radius: 20px; --radius-sm: 14px;
}
html[data-template="horizon"][data-theme="dark"]{
  color-scheme: dark;
  --page:#0B1437; --surface-1:#111C44; --surface-2:#1B254B;
  --text-primary:#FFFFFF; --text-secondary:#A3AED0; --text-muted:#707EAE;
  --gridline:#1B254B; --baseline:#2B3674; --border:#2B3674;
  --success-text:#01B574;
  --blue:#7551FF;
  --shadow: 0 18px 40px rgba(0,0,0,.35);
}
html[data-template="horizon"] body{ font-family: "DM Sans", system-ui, sans-serif; }
html[data-template="horizon"] #login-screen{
  background:
    radial-gradient(circle at 12% 18%, rgba(67,24,255,.22), transparent 42%),
    radial-gradient(circle at 88% 80%, rgba(106,210,255,.28), transparent 40%),
    #F4F7FE;
}
html[data-template="horizon"][data-theme="dark"] #login-screen{ background:#0B1437; }
html[data-template="horizon"] .login-card{
  border:none; border-radius:20px; box-shadow:var(--shadow); padding:32px 28px;
}
html[data-template="horizon"] .topbar{
  background:transparent; border-bottom:none; margin:4px 12px 0;
}
html[data-template="horizon"] .sidenav{
  width:230px; margin:12px 0 16px 16px; padding:16px 12px; border:none;
  border-radius:30px; box-shadow:var(--shadow);
}
html[data-template="horizon"] .nav-item{ border-radius:16px; font-weight:700; }
html[data-template="horizon"] .nav-item.active{ background:#4318FF; color:#fff; }
html[data-template="horizon"][data-theme="dark"] .nav-item.active{ background:#7551FF; color:#fff; }
html[data-template="horizon"] .main-view{ padding:12px 22px 88px; }
html[data-template="horizon"] .kpi-card, html[data-template="horizon"] .panel, html[data-template="horizon"] .chart-box{
  border:none; border-radius:20px; box-shadow:var(--shadow);
}
html[data-template="horizon"] .btn, html[data-template="horizon"] .icon-btn, html[data-template="horizon"] .search-input{
  border-radius:14px;
}
html[data-template="horizon"] .btn-primary{ background:#4318FF; }
html[data-template="horizon"] .chip, html[data-template="horizon"] .filter-combo, html[data-template="horizon"] .mode-pill{
  border-radius:999px;
}
html[data-template="horizon"] .view-header h1{ font-size:28px; font-weight:700; letter-spacing:-.02em; }
@media (max-width: 860px){
  html[data-template="horizon"] .sidenav{ display:none; }
  html[data-template="horizon"] .topbar{ margin:0; }
}

/* ========== 7. MatDash — Material Next (sidebar navy, aksen 5D87FF) ========== */
html[data-template="matdash"]{
  color-scheme: light;
  --page:#F6F9FC; --surface-1:#ffffff; --surface-2:#F2F6FA;
  --text-primary:#2A3547; --text-secondary:#5A6A85; --text-muted:#7C8FAC;
  --gridline:#EAEFF4; --baseline:#D6DEE8; --border:#E5EAF2;
  --good:#13DEB9; --warning:#FFAE1F; --serious:#FA896B; --critical:#FA896B;
  --success-text:#13DEB9;
  --blue:#5D87FF; --green:#13DEB9; --magenta:#FA896B; --yellow:#FFAE1F;
  --aqua:#49BEFF; --orange:#FA8E42; --violet:#6A5AF9; --red:#FA896B;
  --shadow: 0 8px 24px rgba(19,37,71,.06);
  --radius: 12px; --radius-sm: 8px;
}
html[data-template="matdash"][data-theme="dark"]{
  color-scheme: dark;
  --page:#202936; --surface-1:#2A3547; --surface-2:#333F55;
  --text-primary:#EAEFF4; --text-secondary:#7C8FAC; --text-muted:#5A6A85;
  --gridline:#333F55; --border:#3a465c;
  --success-text:#13DEB9;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
}
html[data-template="matdash"] body{ font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
html[data-template="matdash"] #login-screen{
  background: linear-gradient(160deg, #5D87FF 0%, #49BEFF 55%, #F6F9FC 55%);
}
html[data-template="matdash"][data-theme="dark"] #login-screen{
  background: linear-gradient(160deg, #2A3547 0%, #5D87FF 48%, #202936 48%);
}
html[data-template="matdash"] .login-card{ border:none; border-radius:12px; box-shadow:0 20px 40px rgba(42,53,71,.16); }
html[data-template="matdash"] .topbar{
  background:#fff; border-bottom:none; box-shadow:0 2px 12px rgba(19,37,71,.05);
}
html[data-template="matdash"][data-theme="dark"] .topbar{ background:#2A3547; }
html[data-template="matdash"] .sidenav{
  width:250px; background:#2A3547; border-right:none; padding:18px 14px; color:#fff;
}
html[data-template="matdash"][data-theme="dark"] .sidenav{ background:#1c2430; }
html[data-template="matdash"] .nav-sep{ color:#7C8FAC; }
html[data-template="matdash"] .nav-item{ color:#7C8FAC; border-radius:8px; }
html[data-template="matdash"] .nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
html[data-template="matdash"] .nav-item.active{ background:#5D87FF; color:#fff; }
html[data-template="matdash"] .kpi-card, html[data-template="matdash"] .panel{
  border:none; border-radius:12px; box-shadow:var(--shadow);
}
html[data-template="matdash"] .btn{ border-radius:8px; }
html[data-template="matdash"] .btn-primary{ background:#5D87FF; }
html[data-template="matdash"] .icon-btn, html[data-template="matdash"] .search-input{ border-radius:8px; }
html[data-template="matdash"] .kpi-value{ font-weight:700; letter-spacing:-.02em; }
@media (max-width: 860px){
  html[data-template="matdash"] .sidenav{ display:none; }
}

/* ========== 8. Mantis — Vue / Ant Design (biru 1677FF, sudut 8px) ========== */
html[data-template="mantis"]{
  color-scheme: light;
  --page:#f8f9fa; --surface-1:#ffffff; --surface-2:#fafafa;
  --text-primary:#121926; --text-secondary:#5b6b79; --text-muted:#8c9bab;
  --gridline:#f0f0f0; --baseline:#d9d9d9; --border:#e6ebf1;
  --good:#52c41a; --warning:#faad14; --serious:#fa8c16; --critical:#ff4d4f;
  --success-text:#389e0d;
  --blue:#1677ff; --green:#52c41a; --magenta:#eb2f96; --yellow:#faad14;
  --aqua:#13c2c2; --orange:#fa8c16; --violet:#722ed1; --red:#ff4d4f;
  --shadow: 0 1px 2px rgba(0,0,0,.03), 0 1px 3px rgba(0,0,0,.04);
  --radius: 8px; --radius-sm: 6px;
}
html[data-template="mantis"][data-theme="dark"]{
  color-scheme: dark;
  --page:#121212; --surface-1:#1e1e1e; --surface-2:#2a2a2a;
  --text-primary:#f5f5f5; --text-secondary:#b0b0b0; --text-muted:#8a8a8a;
  --gridline:#2c2c2c; --border:#333333;
  --success-text:#73d13d;
  --blue:#4096ff;
  --shadow: 0 1px 3px rgba(0,0,0,.45);
}
html[data-template="mantis"] body{ font-family: "Public Sans", system-ui, sans-serif; }
html[data-template="mantis"] #login-screen{ background:#f0f2f5; }
html[data-template="mantis"][data-theme="dark"] #login-screen{ background:#121212; }
html[data-template="mantis"] .login-card{
  border:1px solid var(--border); border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
html[data-template="mantis"] .topbar{
  background:#fff; border-bottom:1px solid #e6ebf1; min-height:60px;
}
html[data-template="mantis"][data-theme="dark"] .topbar{ background:#1e1e1e; border-bottom-color:#333; }
html[data-template="mantis"] .sidenav{
  width:260px; background:#fff; border-right:1px solid #e6ebf1; padding:12px 10px;
}
html[data-template="mantis"][data-theme="dark"] .sidenav{ background:#1e1e1e; border-right-color:#333; }
html[data-template="mantis"] .nav-item{ border-radius:8px; font-weight:500; }
html[data-template="mantis"] .nav-item.active{ background:#e6f4ff; color:#1677ff; }
html[data-template="mantis"][data-theme="dark"] .nav-item.active{ background:rgba(22,119,255,.16); color:#4096ff; }
html[data-template="mantis"] .kpi-card, html[data-template="mantis"] .panel{
  border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow);
}
html[data-template="mantis"] .btn{ border-radius:8px; font-weight:600; }
html[data-template="mantis"] .btn-primary{ background:#1677ff; }
html[data-template="mantis"] .icon-btn, html[data-template="mantis"] .search-input, html[data-template="mantis"] .field input, html[data-template="mantis"] .field select{
  border-radius:8px;
}
html[data-template="mantis"] .chip, html[data-template="mantis"] .filter-combo{ border-radius:8px; }
html[data-template="mantis"] .view-header h1{ font-size:20px; font-weight:600; }
@media (max-width: 860px){
  html[data-template="mantis"] .sidenav{ display:none; }
}

/* kartu pilih template */
.template-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px; }
.template-card{
  border:1px solid var(--border); background:var(--surface-2); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.template-card.is-active{ outline:2px solid var(--blue); }
.template-preview{ height:92px; position:relative; }
.template-preview span{ position:absolute; inset:10px; border:1px solid rgba(255,255,255,.25); }
.template-card-body{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.template-card-body h3{ margin:0; font-size:16px; }
.template-card-body p{ margin:0; font-size:12.5px; color:var(--text-secondary); line-height:1.45; flex:1; }
.template-tag{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.preview-nexus{ background: linear-gradient(135deg,#0d0d0d,#1a1a19 55%, #3987e5); }
.preview-terminal{ background: repeating-linear-gradient(#03140a, #03140a 6px, #0a2816 6px 7px); }
.preview-terminal::after{ content:"█ READY"; position:absolute; left:12px; bottom:12px; color:#39ff14; font: 700 12px monospace; }
.preview-aurora{ background: linear-gradient(120deg,#c5b8ff,#9af0d8 55%,#eef4ff); }
.preview-civic{ background: linear-gradient(#1b3a6b 0 42%, #c9a227 42% 48%, #f3efe4 48% 100%); }
.preview-metro{ background: #0c0c0e; background-image: linear-gradient(#ff6a00 0 8px, transparent 8px), linear-gradient(90deg, rgba(255,106,0,.25) 1px, transparent 1px); background-size: auto, 16px 16px; }
.preview-horizon{ background: linear-gradient(135deg,#4318FF 0 28%, #F4F7FE 28% 100%); }
.preview-horizon::after{ content:""; position:absolute; right:18px; top:22px; width:46px; height:46px; border-radius:16px; background:#fff; box-shadow:0 8px 16px rgba(67,24,255,.2); }
.preview-matdash{ background: linear-gradient(90deg,#2A3547 0 32%, #F6F9FC 32% 100%); }
.preview-matdash::after{ content:""; position:absolute; right:16px; top:20px; width:52%; height:52px; border-radius:10px; background:#5D87FF; opacity:.85; }
.preview-mantis{ background: linear-gradient(#ffffff 0 22%, #f8f9fa 22% 100%); }
.preview-mantis::after{ content:""; position:absolute; left:14px; top:32px; width:36px; height:48px; border-radius:6px; background:#1677ff; }