/* ==========================================================================
   AKUNMART UI SYSTEM v1.2
   Responsive, theme-driven, maintenance-ready.
   ========================================================================== */

:root {
  --bg: #f5f7fc;
  --bg-elevated: #ffffff;
  --panel: #ffffff;
  --panel-2: #f8faff;
  --text: #111827;
  --text-strong: #0b1220;
  --muted: #647084;
  --line: #dce3ee;
  --line-strong: #cbd5e1;
  --accent: #635bff;
  --accent-2: #00bfa6;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --success: #078a70;
  --danger: #d92d20;
  --warning: #a15c00;
  --shadow-sm: 0 8px 24px rgba(16, 24, 40, .055);
  --shadow-md: 0 18px 50px rgba(16, 24, 40, .09);
  --shadow-lg: 0 30px 90px rgba(16, 24, 40, .13);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --page-max: 1260px;
  --content-pad: clamp(14px, 2.2vw, 28px);
  --section-gap: clamp(20px, 3vw, 34px);
  --transition: 180ms cubic-bezier(.2,.75,.25,1);
  /* Compatibility aliases used by later component additions. */
  --surface: var(--panel);
  --surface-2: var(--panel-2);
  --shadow: var(--shadow-md);
}

html[data-theme="dark"] {
  --bg: #080d17;
  --bg-elevated: #0d1422;
  --panel: #111a2a;
  --panel-2: #0d1625;
  --text: #edf3fb;
  --text-strong: #ffffff;
  --muted: #9ba9bc;
  --line: #233148;
  --line-strong: #334560;
  --shadow-sm: 0 9px 28px rgba(0,0,0,.18);
  --shadow-md: 0 20px 58px rgba(0,0,0,.27);
  --shadow-lg: 0 34px 100px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 30%),
    radial-gradient(circle at 8% 86%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 28%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(127,127,127,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(127,127,127,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
img { max-width: 100%; }

/* --------------------------------------------------------------------------
   App chrome
   -------------------------------------------------------------------------- */
.top {
  position: sticky;
  top: 0;
  z-index: 70;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  backdrop-filter: blur(18px) saturate(135%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 850;
  letter-spacing: -.025em;
}
.brand > span:last-child { min-width: 0; }
.brand small {
  display: block;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: .21em;
  margin-top: 2px;
}
.brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  font-size: 11px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: 0 9px 26px color-mix(in srgb, var(--accent) 22%, transparent);
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.navlinks::-webkit-scrollbar { display:none; }
.navlinks a {
  flex: 0 0 auto;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  transition: all var(--transition);
}
.navlinks a:hover {
  color: var(--text);
  border-color: var(--line);
  background: var(--panel);
  transform: translateY(-1px);
}

.theme, .menu-trigger {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
}
.theme:hover, .menu-trigger:hover { border-color: var(--accent); transform: translateY(-1px); }
.menu-trigger { display:none; }

.container {
  width: min(var(--page-max), calc(100% - 2 * var(--content-pad)));
  max-width:var(--page-max);
  margin-inline: auto;
  padding: clamp(20px, 3.4vw, 38px) 0 18px;
  position: relative;
  min-width:0;
}
main.container { width: min(var(--page-max), calc(100% - 2 * var(--content-pad))); }
.section { margin-top: var(--section-gap); }
.section:first-child { margin-top: 0; }

/* Admin application shell */
.admin-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
}
.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 18px 14px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 91%, var(--bg));
}
.admin-sidebar .brand { padding: 4px 7px 18px; }
.admin-side-nav { display: grid; gap: 5px; }
.admin-side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  transition: all var(--transition);
}
.admin-side-nav a:hover {
  color: var(--text);
  background: var(--panel-2);
  border-color: var(--line);
}
.admin-nav-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
}
.admin-sidebar-footer {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
}
.admin-stage { min-width: 0; }
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  padding: 10px var(--content-pad);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(140%);
}
.admin-mobile-brand { display:none; }
.admin-container { padding-top: clamp(22px, 3.2vw, 36px); }
.admin-context { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:11px; font-weight:750; }

/* --------------------------------------------------------------------------
   Typography / common components
   -------------------------------------------------------------------------- */

/* Layout helpers used by the public home page and fresh installer. */
.hero {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%, 360px),1fr));
  gap:16px;
  align-items:stretch;
  width:100%;
  min-width:0;
}
.hero > * { min-width:0; width:100%; }
.auth-page {
  min-height:100vh;
}
.desktop-only {
  display:inline;
}
.requirement-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.kicker {
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 900;
}
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 {
  margin: 0 0 12px;
  color: var(--text-strong);
  font-size: clamp(30px, 4.8vw, 52px);
  line-height: 1.03;
  letter-spacing: -.045em;
}
h2 { margin: 0 0 10px; color: var(--text-strong); font-size: clamp(20px, 2.3vw, 28px); line-height:1.1; letter-spacing:-.03em; }
h3 { margin:0 0 7px; font-size:16px; }
p { margin-top:0; }
.muted { color: var(--muted); }
.mini { color: var(--muted); font-size: 10px; line-height:1.45; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.panel, .hero-card, .stat, .product-card, .auth-card, .side {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.panel { padding: clamp(16px, 2.1vw, 24px); }
.hero-card { padding: clamp(20px, 3.2vw, 38px); overflow:hidden; }

.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.two-col { display:grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr); gap:16px; }

.toolbar, .split {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.toolbar { flex-wrap:wrap; margin-bottom:14px; }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field { margin-bottom:14px; min-width:0; }
.full { grid-column:1/-1; }
label { display:block; margin-bottom:7px; font-size:12px; font-weight:800; color:var(--text); }
.input, .select, .textarea {
  width:100%;
  min-width:0;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel-2);
  color:var(--text);
  padding:12px 13px;
  outline:none;
  transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.input:focus, .select:focus, .textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}
.textarea { min-height:120px; resize:vertical; }
input[type="file"] { padding:10px; }
input[type="checkbox"], input[type="radio"] { accent-color:var(--accent); }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
  color:var(--text);
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  transition:all var(--transition);
}
.btn:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn-primary { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 20%, transparent); }
.btn-primary:hover { border-color:transparent; box-shadow:0 15px 34px color-mix(in srgb,var(--accent) 27%, transparent); }
.btn-danger { color:var(--danger); background:color-mix(in srgb, #fff 92%, var(--danger) 8%); border-color:color-mix(in srgb, var(--danger) 22%, var(--line)); }
.btn-sm { min-height:34px; padding:7px 10px; font-size:11px; border-radius:10px; }
.actions { display:flex; gap:7px; flex-wrap:wrap; }
.check { display:flex; align-items:center; gap:8px; }

.alert { padding:12px 14px; margin-bottom:14px; border:1px solid transparent; border-radius:13px; font-size:12px; font-weight:750; }
.alert.success { color:var(--success); background:color-mix(in srgb, var(--accent-2) 9%, var(--panel)); border-color:color-mix(in srgb, var(--accent-2) 20%, var(--line)); }
.alert.error { color:var(--danger); background:color-mix(in srgb, var(--danger) 8%, var(--panel)); border-color:color-mix(in srgb, var(--danger) 20%, var(--line)); }
.alert.info { color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 18%, var(--line)); }
.notice { padding:13px 14px; border:1px dashed var(--line-strong); border-radius:14px; color:var(--muted); background:var(--panel-2); }

.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 8px;
  border:1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.badge.ok { color:var(--success); background:color-mix(in srgb, var(--accent-2) 10%, transparent); border-color:color-mix(in srgb, var(--accent-2) 20%, transparent); }
.badge.warn { color:var(--warning); background:color-mix(in srgb, #ffb84d 12%, transparent); }
.badge.danger { color:var(--danger); background:color-mix(in srgb, var(--danger) 9%, transparent); }
.chip { display:inline-flex; align-items:center; padding:3px 7px; border-radius:8px; background:var(--accent-soft); color:var(--muted); font-size:9px; font-weight:750; }

/* Dashboard / stats */
.dashboard-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}
.dashboard-head-copy { min-width:0; }
.dashboard-actions { display:flex; gap:8px; flex-wrap:wrap; flex:0 0 auto; }
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.stat {
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:15px;
  overflow:hidden;
}
.stat::after {
  content:"";
  position:absolute; right:-28px; bottom:-36px; width:100px; height:100px; border:1px solid color-mix(in srgb, var(--accent) 9%, transparent); border-radius:30px; transform:rotate(18deg);
}
.stat-icon {
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:13px;
  border:1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
  background:var(--accent-soft); color:var(--accent);
  font-size:13px;
}
.stat-label { color:var(--muted); font-size:10px; font-weight:750; line-height:1.3; }
.stat strong { display:block; margin-top:3px; font-size:clamp(17px,2vw,22px); line-height:1.1; color:var(--text-strong); }
.stat small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.9fr); gap:16px; margin-top:16px; }
.quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.section-panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.section-panel-title > div { min-width:0; }

/* Tables */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:15px; background:var(--panel); }
.table { width:100%; border-collapse:collapse; table-layout:auto; }
.table th, .table td {
  padding:11px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:11px;
  vertical-align:top;
}
.table th { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.table tr:last-child td { border-bottom:0; }
.table tbody tr:hover td { background:color-mix(in srgb, var(--accent) 2.5%, transparent); }

/* Products */
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.product-card { overflow:hidden; transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.product-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.product-img { aspect-ratio:1.32; display:grid; place-items:center; overflow:hidden; background:var(--panel-2); }
.product-img img { width:100%; height:100%; object-fit:cover; }
.product-body { padding:14px; }
.product-title { color:var(--text-strong); font-weight:850; line-height:1.25; }
.price { margin:7px 0; color:var(--text-strong); font-size:21px; font-weight:950; letter-spacing:-.02em; }

.product-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
.big-img { aspect-ratio:1/1; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow-sm); }
.big-img img { width:100%; height:100%; object-fit:cover; }

/* Auth / footer */
.auth-wrap { min-height:calc(100vh - 150px); display:grid; place-items:center; padding:24px 0; }
.auth-card { width:min(470px,100%); padding:clamp(20px,4vw,30px); }
.footer { width:min(var(--page-max), calc(100% - 2 * var(--content-pad))); margin:0 auto; padding:20px 0 44px; color:var(--muted); font-size:10px; }
.empty { padding:40px 16px; text-align:center; color:var(--muted); }
.pager { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:18px; }
.pager a { padding:8px 11px; border:1px solid var(--line); border-radius:10px; font-size:11px; }
.pager a.active { color:#fff; background:var(--accent); border-color:var(--accent); }

/* Center modal / popup */
.site-modal { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:16px; }
.site-modal.is-open { display:flex; }
.site-modal-backdrop { position:absolute; inset:0; background:rgba(3,7,16,.64); backdrop-filter:blur(12px) saturate(120%); }
.site-modal-card {
  position:relative; width:min(560px,100%); max-height:min(84vh,760px); overflow:auto;
  padding:24px;
  border:1px solid color-mix(in srgb,var(--accent) 70%,var(--line));
  border-radius:calc(var(--radius) + 5px);
  background:var(--panel); color:var(--text);
  box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent);
  animation:modalIn .2s ease-out;
}
.modal-close { position:absolute; top:11px; right:11px; width:36px; height:36px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); color:var(--text); cursor:pointer; }
.modal-menu { display:grid; gap:8px; margin-top:12px; }
.modal-menu a { padding:13px 14px; border:1px solid var(--line); border-radius:13px; background:var(--panel-2); color:var(--text); font-weight:850; transition:all var(--transition); }
.modal-menu a:hover { border-color:var(--accent); transform:translateX(2px); }

/* --------------------------------------------------------------------------
   Full-layer templates. Every template changes shape, density, surfaces and
   animation behavior. Colors remain only one part of the design system.
   -------------------------------------------------------------------------- */

html[data-template="neo-pulse"] { --accent:#675cff; --accent-2:#00d9b2; --radius:18px; --shadow-md:0 22px 60px rgba(94,83,255,.11); }
html[data-template="neo-pulse"] .panel, html[data-template="neo-pulse"] .stat, html[data-template="neo-pulse"] .product-card { backdrop-filter:blur(8px); }
html[data-template="neo-pulse"] body::after { opacity:.24; }

html[data-template="aurorax"] { --accent:#9b7cff; --accent-2:#27d9ff; --radius:23px; --bg:#080b14; --panel:#101626; --panel-2:#0c1321; --text:#f4f7ff; --text-strong:#fff; --muted:#a7b2c7; --line:#28334b; --line-strong:#3a4763; }
html[data-template="aurorax"] body::before { background:radial-gradient(circle at 15% 10%,rgba(155,124,255,.18),transparent 30%),radial-gradient(circle at 84% 75%,rgba(39,217,255,.14),transparent 28%); animation:auroraDrift 12s ease-in-out infinite alternate; }
html[data-template="aurorax"] .panel, html[data-template="aurorax"] .stat, html[data-template="aurorax"] .product-card { background:linear-gradient(145deg,rgba(17,22,38,.96),rgba(14,26,42,.95)); box-shadow:0 24px 65px rgba(0,0,0,.22); }

html[data-template="velvetgrid"] { --accent:#c54dff; --accent-2:#ff7f50; --radius:16px; }
html[data-template="velvetgrid"] .panel, html[data-template="velvetgrid"] .stat, html[data-template="velvetgrid"] .product-card { background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--accent) 5%,var(--panel))); border-radius:calc(var(--radius) + 2px); }
html[data-template="velvetgrid"] .container { padding-top:32px; }
html[data-template="velvetgrid"] .product-card:hover { transform:translateY(-6px) rotate(-.25deg); }

html[data-template="lumina"] { --accent:#ff6b35; --accent-2:#ffd166; --radius:25px; --shadow-md:0 28px 76px rgba(255,107,53,.1); }
html[data-template="lumina"] .hero-card { padding-block:42px; box-shadow:0 30px 95px rgba(255,107,53,.11); }
html[data-template="lumina"] .panel, html[data-template="lumina"] .product-card { box-shadow:0 14px 36px rgba(255,107,53,.08); }
html[data-template="lumina"] .product-card:hover { transform:translateY(-4px) scale(1.008); }

html[data-template="noirflux"] { --accent:#d9a441; --accent-2:#f1deb0; --radius:14px; --bg:#0b0c10; --panel:#131419; --panel-2:#101116; --text:#f5f1e8; --text-strong:#fffaf0; --muted:#aaa69a; --line:#302f2a; --line-strong:#49463d; }
html[data-template="noirflux"] .panel, html[data-template="noirflux"] .stat, html[data-template="noirflux"] .product-card { background:linear-gradient(145deg,#14151a,#1a1918); border-color:#34332d; }
html[data-template="noirflux"] .product-card { transition:box-shadow .34s ease, transform .34s ease, border-color .34s ease; }
html[data-template="noirflux"] .product-card:hover { box-shadow:0 24px 70px rgba(218,164,65,.1); transform:translateY(-4px); border-color:rgba(218,164,65,.34); }

html[data-template="zenithx"] { --accent:#00a8ff; --accent-2:#7c4dff; --radius:20px; }
html[data-template="zenithx"] body::after { background-size:42px 42px; opacity:.28; }
html[data-template="zenithx"] .stat:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 20px 55px rgba(0,168,255,.12); }
html[data-template="zenithx"] .btn-primary { background:linear-gradient(105deg,var(--accent),var(--accent-2),var(--accent)); background-size:220% 100%; animation:gradientSweep 7s linear infinite; }

html[data-template="eclipse"] { --accent:#ff315c; --accent-2:#7b61ff; --radius:13px; --bg:#090a0f; --panel:#11121a; --panel-2:#0d0f16; --text:#f5f6fb; --text-strong:#fff; --muted:#a7adbd; --line:#272b3a; --line-strong:#373d50; }
html[data-template="eclipse"] .hero-card { background:radial-gradient(circle at 72% 24%,rgba(255,49,92,.18),transparent 28%),linear-gradient(145deg,#141520,#10111a); border-color:rgba(255,49,92,.28); }
html[data-template="eclipse"] .stat::after { animation:eclipsePulse 4s ease-in-out infinite; }

html[data-template="prismatica"] { --accent:#ff3cac; --accent-2:#2b86ff; --radius:26px; }
html[data-template="prismatica"] body::before { background:conic-gradient(from 160deg at 50% 20%,rgba(255,60,172,.13),rgba(43,134,255,.12),rgba(0,224,184,.1),rgba(255,60,172,.13)); filter:blur(26px); animation:prismRotate 18s linear infinite; }
html[data-template="prismatica"] .panel, html[data-template="prismatica"] .stat, html[data-template="prismatica"] .product-card { border-image:linear-gradient(135deg,color-mix(in srgb,var(--accent) 32%,transparent),color-mix(in srgb,var(--accent-2) 32%,transparent)) 1; }

html[data-template="obsidianflow"] { --accent:#f0b35a; --accent-2:#d46bff; --radius:21px; --bg:#07080c; --panel:#101116; --panel-2:#0c0e14; --text:#f7f7f9; --text-strong:#fff; --muted:#aaaeba; --line:#262a35; --line-strong:#373d4a; }
html[data-template="obsidianflow"] .panel, html[data-template="obsidianflow"] .product-card, html[data-template="obsidianflow"] .stat { background:linear-gradient(145deg,#11131a,#17121c); border-color:rgba(240,179,90,.18); }
html[data-template="obsidianflow"] .hero-card { background:linear-gradient(145deg,#11131a,#1b1320); border-color:rgba(240,179,90,.28); }
html[data-template="obsidianflow"] .product-card:hover { box-shadow:0 26px 85px rgba(212,107,255,.12); }

html[data-template="stellaris"] { --accent:#00c6ff; --accent-2:#0072ff; --radius:18px; }
html[data-template="stellaris"] .panel, html[data-template="stellaris"] .stat, html[data-template="stellaris"] .product-card { background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 93%,var(--accent) 7%),var(--panel)); }
html[data-template="stellaris"] body::after { background-size:48px 48px; opacity:.22; animation:starGrid 16s linear infinite; }
html[data-template="stellaris"] .stat:hover { transform:translateY(-4px); border-color:var(--accent); }

/* Maintenance screen */
.maintenance-screen { min-height:100svh; display:grid; place-items:center; padding:22px; overflow:hidden; }
.maintenance-shell { width:min(1040px,100%); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:18px; align-items:stretch; }
.maintenance-copy, .maintenance-panel { position:relative; padding:clamp(22px,4vw,42px); overflow:hidden; border:1px solid var(--line); border-radius:calc(var(--radius) + 6px); background:var(--panel); box-shadow:var(--shadow-lg); }
.maintenance-copy::before, .maintenance-panel::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 82% 12%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 32%); }
.maintenance-banner { position:relative; aspect-ratio:16/8.5; overflow:hidden; border:1px solid var(--line); border-radius:calc(var(--radius) - 2px); background:var(--panel-2); margin-bottom:20px; }
.maintenance-banner img { width:100%; height:100%; object-fit:cover; display:block; }
.maintenance-banner::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.34)); pointer-events:none; }
.maintenance-clock { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px; }
.maintenance-unit { padding:13px 10px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); text-align:center; }
.maintenance-value { display:block; color:var(--text-strong); font-size:clamp(26px,5vw,42px); font-weight:950; letter-spacing:-.05em; line-height:1; }
.maintenance-label { display:block; margin-top:5px; color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.maintenance-status { margin-top:14px; padding:12px 14px; border-radius:13px; background:var(--accent-soft); color:var(--text); border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line)); font-size:11px; font-weight:750; }
.maintenance-screen[data-template="aurorax"] .maintenance-copy { animation:maintenanceAurora 9s ease-in-out infinite alternate; }
.maintenance-screen[data-template="neo-pulse"] .maintenance-panel { animation:templateFloat 7s ease-in-out infinite; }
.maintenance-screen[data-template="lumina"] .maintenance-banner { animation:luminaBreathe 8s ease-in-out infinite; }
.maintenance-screen[data-template="prismatica"] .maintenance-banner { animation:prismGlow 7s ease-in-out infinite; }
.maintenance-screen[data-template="eclipse"] .maintenance-panel { animation:eclipsePulse 4s ease-in-out infinite; }
.maintenance-screen[data-template="obsidianflow"] .maintenance-copy::after { content:""; position:absolute; width:180px; height:500px; top:-120px; left:-100px; transform:rotate(24deg); background:linear-gradient(180deg,transparent,rgba(240,179,90,.10),transparent); animation:obsidianSweep 9s linear infinite; }
.maintenance-screen[data-template="stellaris"] .maintenance-copy::after { content:""; position:absolute; inset:-1px; pointer-events:none; opacity:.2; background-image:radial-gradient(circle,#fff 1px,transparent 1px); background-size:38px 38px; animation:starGrid 12s linear infinite; }

/* Template selector */
.template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.template-option { position:relative; display:block; }
.template-option input { position:absolute; opacity:0; pointer-events:none; }
.template-card { padding:13px; border:1px solid var(--line); border-radius:15px; background:var(--panel-2); cursor:pointer; transition:all var(--transition); min-height:96px; }
.template-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.template-option input:checked + .template-card { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent), var(--shadow-sm); }
.template-swatch { display:flex; gap:5px; margin-bottom:10px; }
.template-swatch span { width:25px; height:9px; border-radius:999px; }
.template-title { color:var(--text-strong); font-size:12px; font-weight:900; }
.template-subtitle { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.35; }
.template-preview-neo { background:linear-gradient(90deg,#675cff,#00d9b2); }
.template-preview-aurora { background:linear-gradient(90deg,#9b7cff,#27d9ff); }
.template-preview-velvet { background:linear-gradient(90deg,#c54dff,#ff7f50); }
.template-preview-lumina { background:linear-gradient(90deg,#ff6b35,#ffd166); }
.template-preview-noir { background:linear-gradient(90deg,#d9a441,#f1deb0); }
.template-preview-zenith { background:linear-gradient(90deg,#00a8ff,#7c4dff); }
.template-preview-eclipse { background:linear-gradient(90deg,#ff315c,#7b61ff); }
.template-preview-prism { background:linear-gradient(90deg,#ff3cac,#2b86ff,#00e0b8); }
.template-preview-obsidian { background:linear-gradient(90deg,#f0b35a,#d46bff); }
.template-preview-stellaris { background:linear-gradient(90deg,#00c6ff,#0072ff); }

/* Animation library */
@keyframes modalIn { from{opacity:0;transform:translateY(10px) scale(.985)} to{opacity:1;transform:none} }
@keyframes templateFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes auroraDrift { 0%{transform:translate3d(-2%,0,0) scale(1)} 100%{transform:translate3d(2%,2%,0) scale(1.04)} }
@keyframes gradientSweep { to{background-position:220% center} }
@keyframes eclipsePulse { 0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)} 50%{box-shadow:0 0 45px color-mix(in srgb,var(--accent) 14%,transparent)} }
@keyframes prismRotate { to{transform:rotate(360deg)} }
@keyframes starGrid { to{background-position:48px 48px} }
@keyframes maintenanceAurora { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes luminaBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.012)} }
@keyframes prismGlow { 0%,100%{box-shadow:0 0 0 0 transparent} 50%{box-shadow:0 0 55px color-mix(in srgb,var(--accent) 14%,transparent)} }
@keyframes obsidianSweep { 0%{transform:translateX(-70%) rotate(24deg)} 100%{transform:translateX(560%) rotate(24deg)} }

/* --------------------------------------------------------------------------
   Responsive sizing
   -------------------------------------------------------------------------- */
@media (max-width:1180px) {
  .admin-shell { grid-template-columns:220px minmax(0,1fr); }
  .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:1100px) {
  .hero { grid-template-columns:1fr !important; }
  .hero > * { width:100%; min-width:0; }
  .admin-shell { display:block; }
  .admin-sidebar { display:none; }
  .admin-mobile-brand { display:flex; align-items:center; }
  .admin-topbar .menu-trigger { display:grid; }
  .admin-container { width:min(var(--page-max), calc(100% - 2 * var(--content-pad))); }
  .dashboard-grid, .two-col { grid-template-columns:1fr; }
  .maintenance-shell { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .desktop-only { display:none !important; }
  .requirement-grid { grid-template-columns:1fr; }
  :root { --content-pad:14px; --section-gap:22px; --radius:16px; }
  .desktop-nav { display:none !important; }
  .menu-trigger { display:grid; }
  .top { min-height:62px; padding-block:8px; }
  .brand-mark { width:38px; height:38px; flex-basis:38px; }
  .container { padding-top:20px; }
  .dashboard-head { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:16px; }
  .dashboard-actions { width:100%; }
  .dashboard-actions .btn { flex:1; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .stat { padding:12px; gap:9px; border-radius:14px; }
  .stat-icon { width:37px; height:37px; border-radius:11px; }
  .stat strong { font-size:17px; }
  .stat-label { font-size:9px; }
  .quick-grid { grid-template-columns:1fr; }
  .form-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .full { grid-column:auto; }
  .toolbar { align-items:stretch; }
  .toolbar > * { max-width:100%; }
  .search { width:100%; min-width:0; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .product-body { padding:11px; }
  .product-title { font-size:12px; }
  .price { font-size:18px; }
  .product-detail { grid-template-columns:1fr; }
  .panel { padding:15px; }
  .table th, .table td { padding:9px 7px; font-size:10px; }
  .table th { font-size:8px; }
  .auth-card { padding:20px; }
  .site-modal { padding:11px; }
  .site-modal-card { padding:20px 16px; max-height:88vh; }
  .template-grid { grid-template-columns:1fr; }
}

@media (max-width:440px) {
  .brand { gap:8px; }
  .brand small { font-size:7px; }
  .top { gap:8px; }
  .theme, .menu-trigger { width:36px; height:36px; flex-basis:36px; border-radius:11px; }
  .stats-grid { gap:8px; }
  .stat { grid-template-columns:34px minmax(0,1fr); padding:10px; }
  .stat-icon { width:34px; height:34px; }
  .stat strong { font-size:15px; }
  .product-grid { grid-template-columns:1fr; }
  .maintenance-screen { padding:12px; }
  .maintenance-clock { grid-template-columns:repeat(4,1fr); }
  .maintenance-clock { grid-template-columns:repeat(2,1fr); }
  .maintenance-value { font-size:26px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* v1.3 role/payment UI */
.payment-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.payment-choice{position:relative;display:flex;gap:12px;align-items:flex-start;padding:15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}.payment-choice:hover{transform:translateY(-2px);border-color:var(--accent)}.payment-choice input{margin-top:3px;accent-color:var(--accent)}.payment-choice span{display:grid;gap:4px}.payment-choice small{color:var(--muted)}.role-access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.access-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid var(--line)}.access-row span{display:grid;gap:3px}.access-row small{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.access-row input{width:20px;height:20px;accent-color:var(--accent)}.channel-list{display:grid;gap:8px;max-height:360px;overflow:auto}.channel-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}.channel-row>span:first-child{display:flex;align-items:center;gap:10px;min-width:0}.channel-row img{width:34px;height:24px;object-fit:contain;border-radius:6px}.reseller-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:24px;border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);background:linear-gradient(135deg,var(--surface),var(--surface-2));box-shadow:var(--shadow)}.reseller-rank{min-width:120px;text-align:right;display:grid;gap:5px}.reseller-rank b{font-size:20px;color:var(--accent)}.reseller-stats{margin-top:18px}.reseller-product{overflow:hidden}.installer-card{max-width:760px!important}.installer-card h1{font-size:clamp(30px,5vw,48px);margin:22px 0 8px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.btn-danger{border-color:rgba(255,70,90,.4)}
@media(max-width:760px){.payment-choice-grid,.role-access-grid{grid-template-columns:1fr}.reseller-hero{display:grid}.reseller-rank{text-align:left}.reseller-stats{grid-template-columns:1fr 1fr}.payment-choice{padding:13px}}
@media(max-width:480px){.reseller-stats{grid-template-columns:1fr}.installer-card{padding:18px!important}}


/* v1.5.1 — Homepage campaign system */
.hero-banner-section{margin-top:4px}.banner-slider{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);box-shadow:var(--shadow-lg);aspect-ratio:1280/720;min-height:220px}.banner-track{height:100%;position:relative}.banner-slide{position:absolute;inset:0;opacity:0;transform:scale(1.025);transition:opacity .7s ease,transform 1.2s ease;pointer-events:none}.banner-slide.is-active{opacity:1;transform:scale(1);pointer-events:auto;z-index:2}.banner-media,.banner-media img{position:absolute;inset:0;width:100%;height:100%}.banner-media img{object-fit:cover}.banner-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,8,20,.82),rgba(4,8,20,.35) 55%,rgba(4,8,20,.05))}.banner-content{position:absolute;z-index:3;left:clamp(20px,5vw,72px);top:50%;transform:translateY(-50%);max-width:min(620px,70%);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.2)}.banner-content h2{font-size:clamp(25px,4vw,52px);line-height:1.02;margin:12px 0 10px}.banner-content p{margin:0 0 18px;color:rgba(255,255,255,.84);font-size:clamp(12px,1.5vw,16px)}.banner-fallback{height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(25px,6vw,80px);background:radial-gradient(circle at 80% 20%,rgba(0,191,166,.5),transparent 35%),linear-gradient(120deg,#101a45,#635bff 48%,#00bfa6)}.banner-fallback strong{font-size:clamp(26px,5vw,58px);line-height:.98;color:#fff;max-width:760px}.banner-fallback span:last-child{color:rgba(255,255,255,.78);max-width:650px}.banner-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.28);backdrop-filter:blur(10px);color:#fff;border-radius:50%;font-size:30px;display:grid;place-items:center;cursor:pointer}.banner-prev{left:16px}.banner-next{right:16px}.banner-arrow:hover{background:rgba(0,0,0,.5);transform:translateY(-50%) scale(1.05)}.banner-dots{position:absolute;z-index:6;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:7px}.banner-dot{width:8px;height:8px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.5);cursor:pointer;transition:all .2s}.banner-dot.is-active{width:24px;border-radius:8px;background:#fff}.announcement-bar{display:flex;align-items:center;gap:10px;margin:10px 0 0;width:100%;max-width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:14px;background:linear-gradient(90deg,var(--surface),var(--surface-2));box-shadow:var(--shadow-sm);overflow:hidden}.announcement-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);font-size:17px;animation:announcePulse 1.8s ease-in-out infinite}.announcement-window{min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.announcement-track{display:flex;width:max-content;animation:announceMarquee 28s linear infinite}.announcement-item{display:inline-flex;align-items:center;gap:8px;padding-right:70px;white-space:nowrap;color:var(--text);font-size:12px}.announcement-item b{color:var(--accent)}.announcement-bar:hover .announcement-track{animation-play-state:paused}@keyframes announceMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes announcePulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 20%,transparent)}50%{transform:scale(1.06);box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}}
.flash-sale-section{position:relative;overflow:hidden;padding:clamp(18px,3vw,30px);border-radius:var(--radius-lg);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--panel)),var(--panel));border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));box-shadow:var(--shadow-md)}.flash-sale-section:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;top:-130px;background:color-mix(in srgb,var(--accent) 14%,transparent);animation:flashGlow 4s ease-in-out infinite}.flash-sale-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.flash-sale-head h2{margin:5px 0;font-size:clamp(25px,4vw,38px)}.flash-countdown{display:flex;align-items:center;gap:5px;padding:9px 12px;border-radius:14px;background:var(--text-strong);color:#fff;font-variant-numeric:tabular-nums;font-weight:900;box-shadow:0 10px 25px rgba(0,0,0,.14);animation:countdownPulse 1s ease-in-out infinite}.flash-countdown span{min-width:28px;text-align:center}.flash-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.flash-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.flash-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--accent)}.flash-card .product-img{aspect-ratio:1.5/1}.flash-card .product-body{padding:13px}.flash-ribbon{position:absolute;z-index:3;top:10px;left:-29px;transform:rotate(-45deg);width:105px;text-align:center;padding:4px 0;font-size:9px;font-weight:950;letter-spacing:.12em;color:#fff;background:var(--danger);box-shadow:0 3px 8px rgba(0,0,0,.18);animation:ribbonShimmer 2.5s infinite}.flash-price{font-size:21px;font-weight:950;color:var(--danger);margin-top:8px}.flash-old-price{font-size:11px;color:var(--muted);text-decoration:line-through}.flash-progress{height:5px;background:var(--line);border-radius:8px;overflow:hidden;margin:10px 0 7px}.flash-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--danger),var(--accent));border-radius:8px;animation:progressGlow 1.6s ease-in-out infinite}.flash-price-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}.flash-price-row del{color:var(--muted);font-size:13px}@keyframes flashGlow{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.25);opacity:1}}@keyframes countdownPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes ribbonShimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}@keyframes progressGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
@media(max-width:1100px){.flash-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.banner-slider{border-radius:18px;min-height:220px}.banner-content{left:20px;max-width:78%}.banner-content h2{font-size:28px}.banner-arrow{width:36px;height:36px;font-size:24px}.flash-sale-head{align-items:flex-start;flex-direction:column}.flash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.announcement-bar{width:100%;max-width:100%}}@media(max-width:440px){.banner-content p{display:none}.banner-content h2{font-size:23px}.flash-grid{grid-template-columns:1fr}.flash-countdown span{min-width:24px}.announcement-item{padding-right:45px}}

/* v1.5.3 responsive hardening: prevent half-width homepage columns on mobile/tablet */
.hero, .hero-banner-section, .announcement-bar, .flash-sale-section, .section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.hero > .hero-card { width: 100%; min-width: 0; }
@media (max-width:1100px) {
  .hero { grid-template-columns: 1fr !important; }
  .hero-card { width: 100% !important; }
}
@media (max-width:760px) {
  .container, main.container, .admin-container { width: calc(100% - 28px) !important; max-width: none !important; }
}