/* ===== TOKENS ===== */
:root {
  --bg:       #07111d;
  --bg-card:  #0f1b2a;
  --panel:    #0f1b2a;
  --panel-2:  #132235;
  --line:     #223750;
  --text:     #e8f0ff;
  --muted:    #93a7c2;
  --accent:   #3b82f6;
  --accent-2: #38bdf8;
  --ok:       #22c55e;
  --warn:     #f59e0b;
  --danger:   #ef4444;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== ADMIN SHELL ===== */
.admin-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  display: block;
  padding: 20px 18px 14px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--accent-2);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.sidebar .brand:hover {
  color: var(--text);
}
.sidebar-user {
  padding: 10px 18px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.sidebar-role {
  display: block;
  font-size: 11px;
  margin-top: 2px;
  opacity: .6;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sidebar-nav { flex: 1; padding: 10px 0; }
.sidebar-nav .nav-group {
  padding: 14px 18px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.sidebar-nav a {
  display: block;
  padding: 8px 18px;
  color: var(--text);
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s;
}
.sidebar-nav a:hover { background: var(--panel-2); text-decoration: none; }
.sidebar-nav a.is-active {
  background: var(--panel-2);
  border-left-color: var(--accent);
  color: var(--accent-2);
  font-weight: 600;
}
.sidebar-nav a.is-disabled {
  opacity: .4;
  pointer-events: none;
}
.sidebar-nav .nav-sep {
  height: 1px;
  background: var(--line, rgba(255,255,255,.08));
  margin: 6px 18px;
}
.sidebar-bottom {
  margin-top: auto;
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
}
.sidebar-bottom a {
  display: block;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.sidebar-bottom a:hover { background: var(--panel-2); color: var(--text); }
.sidebar-bottom a.is-active { color: var(--accent-2); border-color: var(--accent); background: var(--panel-2); }
.sidebar-logout {
  display: block;
  margin: 10px 14px 16px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.sidebar-logout:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }

/* hamburger / mobile top bar */
.hamburger { display: none; }
.top-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.top-bar-title { font-weight: 700; font-size: 16px; }

.main { flex: 1; padding: 28px 28px 60px; min-width: 0; }

/* ===== TYPOGRAPHY ===== */
h1 { font-size: 28px; margin: 0 0 6px; }
h2 { font-size: 20px; margin: 0 0 8px; }
h3 { font-size: 16px; margin: 0 0 6px; }
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-head > div { flex: 1; }
.subhead { color: var(--muted); font-size: 14px; margin-top: 4px; }
.help { color: var(--muted); font-size: 13px; margin: 4px 0 0; }

/* ===== CARDS ===== */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* ===== FLASH MESSAGES ===== */
.flash {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}
.flash.success { background: rgba(34,197,94,.12);  border: 1px solid rgba(34,197,94,.3);  color: #86efac; }
.flash.error   { background: rgba(239,68,68,.12);   border: 1px solid rgba(239,68,68,.3);   color: #fca5a5; }
.flash.info    { background: rgba(59,130,246,.12);  border: 1px solid rgba(59,130,246,.3);  color: #93c5fd; }
.flash.warn    { background: rgba(245,158,11,.12);  border: 1px solid rgba(245,158,11,.3);  color: #fde68a; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, background .15s;
  text-decoration: none;
}
.btn:hover { opacity: .85; text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ok      { background: rgba(34,197,94,.2);  color: #86efac; border: 1px solid rgba(34,197,94,.3); }
.btn-danger  { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-warn    { background: rgba(245,158,11,.15); color: #fde68a; border: 1px solid rgba(245,158,11,.3); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

/* ===== PILLS ===== */
.pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
}
button.pill {
  font-family: inherit;
  cursor: pointer;
  line-height: inherit;
}
button.pill:hover { filter: brightness(1.2); }
.pill.ok     { background: rgba(34,197,94,.15);  border-color: rgba(34,197,94,.4);  color: #86efac; }
.pill.warn   { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.4); color: #fde68a; }
.pill.danger { background: rgba(239,68,68,.15);  border-color: rgba(239,68,68,.4);  color: #fca5a5; }
.pill.accent { background: rgba(59,130,246,.15); border-color: rgba(59,130,246,.4); color: #93c5fd; }

/* ===== TABLES ===== */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.table td { padding: 9px 12px; border-bottom: 1px solid rgba(34,55,80,.5); vertical-align: middle; }
.table tr:hover td { background: rgba(255,255,255,.025); }
.table .truncate { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* compact action buttons inside tables */
.table .btn-sm {
  display: inline-flex;
  width: auto;
  min-width: 0;
  padding: 5px 10px;
  white-space: nowrap;
}
.table td:last-child { width: 1%; white-space: nowrap; }

/* ===== FORMS ===== */
label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
input[type=text], input[type=number], input[type=email], input[type=password],
input[type=date], input[type=search], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  transition: border-color .15s;
}
input[list] { width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { min-height: 90px; resize: vertical; }

/* catch-all: bare <input> without explicit type (single line — no descendant combinator) */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=image]):not([type=color]):not([type=range]) { background: var(--bg); color: var(--text); }
/* hidden inputs must never be visible regardless of other rules */
input[type=hidden] { display: none !important; }
/* prevent browser autofill white-box globally */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
}
.form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-group { margin-bottom: 14px; }
.checkline { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.checkline input { margin-top: 3px; }

/* ===== TOGGLE SWITCH ===== */
.toggle-wrap { display: flex; align-items: center; gap: 12px; }
.toggle { position: relative; width: 48px; height: 26px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background .2s;
}
.toggle-slider::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::after { transform: translateX(22px); }
.toggle-label { font-size: 15px; font-weight: 600; }

/* ===== RANGE SLIDER ===== */
.range-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.range-row label { margin: 0; min-width: 80px; white-space: nowrap; }
.range-row input[type=range] {
  flex: 1;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  accent-color: var(--accent);
}
.range-val { width: 44px; text-align: right; font-weight: 700; font-size: 14px; color: var(--accent-2); }

/* ===== PAIR BUTTONS (50:50) ===== */
.pair-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.pair-btn {
  padding: 18px 10px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pair-btn:hover { border-color: var(--accent); background: rgba(59,130,246,.12); }
.pair-btn.is-selected { border-color: var(--accent); background: rgba(59,130,246,.2); color: var(--accent-2); }

/* ===== SLIDE PANEL (questions.php) ===== */
.slide-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 100;
  display: none;
}
.slide-panel-overlay.open { display: block; }
.slide-panel {
  position: fixed;
  top: 0;
  right: -640px;
  width: 620px;
  max-width: 100vw;
  height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--line);
  z-index: 101;
  display: flex;
  flex-direction: column;
  transition: right .25s ease;
  overflow: hidden;
}
.slide-panel.open { right: 0; }
.slide-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.slide-panel-head h2 { margin: 0; }
.slide-panel-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.slide-panel-close:hover { background: var(--panel-2); color: var(--text); }
.slide-panel-body { flex: 1; overflow-y: auto; padding: 20px; }
.slide-panel-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  display: flex;
  gap: 10px;
}

/* answer radio group inside slide panel */
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.answer-item { display: flex; flex-direction: column; gap: 4px; }
.answer-item > label { display: flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; color: var(--text); }
.answer-item input[type=text] { font-size: 14px; }

/* ===== SEARCH BAR ===== */
.search-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.search-bar input[type=search] { flex: 1; min-width: 180px; }
.search-bar select { width: auto; }

/* mass action bar */
.mass-bar {
  position: sticky;
  bottom: 0;
  background: var(--panel-2);
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.mass-bar.visible { display: flex; }

/* ===== INFO BOX ===== */
.info-box {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
}
.info-box .label { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.info-box .value { font-weight: 700; font-size: 15px; }

/* ===== DASHBOARD QUICK ACTIONS ===== */
.qaction-group { margin-bottom: 20px; }
.qaction-group h3 {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.qaction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.qaction-btn {
  display: block;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .15s, background .15s;
}
.qaction-btn:hover { border-color: var(--accent); background: rgba(59,130,246,.1); text-decoration: none; }

/* ===== LOGIN / SETUP STANDALONE ===== */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  max-width: 420px;
}
.login-card h1 { font-size: 24px; margin-bottom: 4px; }
.login-brand { color: var(--accent-2); font-size: 13px; margin-bottom: 24px; }

/* ===== MISC LEGACY COMPAT ===== */
/* keep existing .wrap / .grid / .grid-2 etc. for pages not yet migrated */
.wrap { max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }
.grid   { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.section-title { margin: 0 0 4px; font-size: 22px; }
.list-tight { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.code { font-family: ui-monospace, Consolas, monospace; background: #08111a; border: 1px solid #203246; padding: 3px 7px; border-radius: 9px; }
.radio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.radio-card { border: 1px solid #29415d; border-radius: 14px; padding: 12px; background: #0b1521; }
.radio-card input { margin-right: 8px; }
.kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.kpi { padding: 18px; border-radius: 18px; background: #0a1521; border: 1px solid #223750; }
.kpi .label { font-size: 13px; color: var(--muted); }
.kpi .value { font-size: 36px; font-weight: 800; margin-top: 6px; }
.progress { height: 10px; background: #08111a; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--ok)); }

/* ===== LICENSE MANAGEMENT ===== */
/* top 2-column layout: stats left, registration right */
.lic-top-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 18px; align-items: start; margin-bottom: 18px; }
.lic-top-grid > .card { margin: 0; }
/* stats tiles */
.lic-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lic-stat { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lic-stat .ls-label { font-size: 12px; color: var(--muted); }
.lic-stat .ls-val   { font-size: 22px; font-weight: 800; line-height: 1; }
.ls-val-ok     { color: var(--ok); }
.ls-val-warn   { color: var(--warn); }
.ls-val-danger { color: var(--danger); }

/* ── Live-Save Status ─────────────────────────────────────── */
.ls-status           { font-size: 12px; display: inline-block; margin-top: 8px; min-height: 16px; transition: color .15s; }
.ls-status.ls-saving { color: var(--muted); }
.ls-status.ls-ok     { color: var(--ok); }
.ls-status.ls-err    { color: var(--danger); }
/* registration steps */
.lic-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.lic-step { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.lic-step .ls-num { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-2); margin-bottom: 3px; }
.lic-step strong { font-size: 13px; }
/* license cards */
.lic-list { display: flex; flex-direction: column; gap: 14px; }
.lic-card { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 14px; background: var(--panel-2); overflow: hidden; }
.lic-card-active  { border-left-color: rgba(34,197,94,.7); }
.lic-card-master  { border-left-color: rgba(245,158,11,.7); }
.lic-card-blocked { border-left-color: rgba(239,68,68,.6); }
.lic-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.15); }
.lic-card-id   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lic-num       { font-weight: 800; font-size: 16px; }
.lic-card-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lic-card-btns form { margin: 0; }
.lic-card-body { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.3fr); }
.lic-identity  { padding: 14px 16px; border-right: 1px solid var(--line); }
.lic-serial    { font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: 11px; color: var(--accent-2); word-break: break-all; margin-bottom: 8px; letter-spacing: .5px; }
.lic-owner     { font-weight: 700; font-size: 15px; }
.lic-sub       { font-size: 12px; color: var(--muted); margin-top: 3px; }
.lic-master-note { padding: 14px 16px; font-size: 13px; color: var(--muted); display: flex; align-items: center; }
.lic-tech      { padding: 14px 16px; font-size: 12px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-content: start; align-items: baseline; }
.lf-key { color: var(--muted); white-space: nowrap; }
.lf-val { color: var(--text); }
.lic-mono { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
/* mail templates */
.mailgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mailgrid textarea { min-height: 220px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
details.lic-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 0; }
details.lic-details > summary:hover { color: var(--text); }
details.lic-details > summary::before { content: "▶"; font-size: 10px; transition: transform .15s; }
details.lic-details[open] > summary::before { transform: rotate(90deg); }
details.mail-tpl > summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; display: flex; align-items: center; gap: 8px; }
details.mail-tpl > summary::before { content: "▶"; font-size: 11px; color: var(--muted); transition: transform .15s; }
details.mail-tpl[open] > summary::before { transform: rotate(90deg); }
details.mail-tpl .mail-tpl-inner { margin-top: 16px; }

/* ===== MOBILE ===== */
@media (max-width: 979px) {
  .admin-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; display: none; }
  .sidebar.mob-open { display: flex; }
  .top-bar { display: flex; }
  .hamburger { display: block; background: none; border: none; color: var(--text); font-size: 22px; cursor: pointer; padding: 0; }
  .main { padding: 16px; }
  .form-row, .form-row3, .grid-2, .grid-3, .kpis, .radio-grid { grid-template-columns: 1fr; }
  .pair-grid { grid-template-columns: repeat(3, 1fr); }
  .slide-panel { width: 100vw; }
  .table td:last-child { width: auto; white-space: normal; }
  .lic-top-grid { grid-template-columns: 1fr; }
  .lic-card-body { grid-template-columns: 1fr; }
  .lic-identity { border-right: none; border-bottom: 1px solid var(--line); }
  .lic-steps { grid-template-columns: 1fr 1fr; }
  .mailgrid { grid-template-columns: 1fr; }
}


/* ===== QUESTIONS PAGE ===== */

  .search-bar{display:grid;grid-template-columns:1fr repeat(3,180px);gap:10px;margin-bottom:14px}
  @media(max-width:900px){.search-bar{grid-template-columns:1fr}}
  .mass-bar{position:fixed;bottom:0;left:220px;right:0;background:var(--panel);border-top:1px solid var(--line);padding:12px 24px;display:flex;align-items:center;gap:10px;transform:translateY(100%);transition:transform .2s;z-index:50}
  .mass-bar.visible{transform:none}
  @media(max-width:900px){.mass-bar{left:0}}
  .slide-panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s}
  .slide-panel-overlay.open{opacity:1;pointer-events:auto}
  .slide-panel{position:fixed;top:0;right:-520px;width:520px;max-width:100vw;height:100vh;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;z-index:91;transition:right .25s}
  .slide-panel.open{right:0}
  .slide-panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);flex-shrink:0}
  .slide-panel-head h2{margin:0;font-size:17px}
  .slide-panel-close{background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;padding:0 4px;line-height:1}
  .slide-panel-body{flex:1;overflow-y:auto;padding:20px}
  .slide-panel-foot{padding:16px 20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-shrink:0}
  .form-group{margin-bottom:14px}
  .form-group>label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
  .form-group textarea,.form-group input,.form-group select{width:100%;box-sizing:border-box}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .answer-item{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}
  .answer-item label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;white-space:nowrap}
  .truncate{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab-nav{display:flex;gap:2px;margin-bottom:20px;border-bottom:1px solid var(--line)}
  .tab-btn{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-size:14px;font-weight:500;padding:8px 18px;cursor:pointer;margin-bottom:-1px;transition:color .15s,border-color .15s}
  .tab-btn.active{color:var(--text);border-bottom-color:var(--accent)}
  .tab-btn:hover:not(.active){color:var(--text)}
  .tab-pane{display:none}
  .tab-pane.active{display:block}
  .pill-red{background:#c0392b;color:#fff;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:500}
  .pill-green{background:#27ae60;color:#fff;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:500}
  .pill-yellow{background:#e67e22;color:#fff;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:500}
  .data-table{width:100%;border-collapse:collapse;font-size:14px}
  .data-table th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--line);color:var(--muted);font-weight:600;font-size:13px}
  .data-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
  .data-table tr:last-child td{border-bottom:none}
  .af-search-bar{display:grid;grid-template-columns:1fr 200px;gap:10px;margin-bottom:14px}
  @media(max-width:700px){.af-search-bar{grid-template-columns:1fr}}
  .af-mass-bar{position:fixed;bottom:0;left:220px;right:0;background:var(--panel);border-top:1px solid var(--line);padding:12px 24px;display:flex;align-items:center;gap:10px;transform:translateY(100%);transition:transform .2s;z-index:50}
  .af-mass-bar.visible{transform:none}
  @media(max-width:900px){.af-mass-bar{left:0}}

/* ===== LOGS PAGE ===== */

  .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 18px}
  .stat{padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2)}
  .stat .label{font-size:13px;color:var(--muted)}
  .stat .value{font-size:26px;font-weight:800;margin-top:4px}
  .filter-grid{display:grid;grid-template-columns:1.1fr .8fr 1fr auto;gap:12px;align-items:end;margin-bottom:16px}
  .log-list{display:grid;gap:12px;margin-top:14px}
  .log-entry{position:relative;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2)}
  .log-entry.is-info{border-color:rgba(34,197,94,.35)}
  .log-entry.is-warn{border-color:rgba(245,158,11,.38)}
  .log-entry.is-error{border-color:rgba(239,68,68,.40)}
  .log-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
  .log-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;font-size:14px;font-weight:800}
  .is-info .log-badge{background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.35);color:#9ff0b7}
  .is-warn .log-badge{background:rgba(245,158,11,.18);border:1px solid rgba(245,158,11,.35);color:#ffd37d}
  .is-error .log-badge{background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.35);color:#ffb4b4}
  .log-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:12px}
  .log-title{font-weight:700;color:var(--text)}
  .log-message{color:var(--text);font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
  .log-context{margin-top:10px;padding:12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#c9d7eb;white-space:pre-wrap;word-break:break-word}
  .legend{display:flex;gap:12px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:13px}
  .empty{padding:18px;border-radius:12px;border:1px dashed var(--line);background:var(--bg);color:var(--muted)}
  @media(max-width:980px){.stats{grid-template-columns:1fr 1fr}.filter-grid{grid-template-columns:1fr}}

/* ===== VARIANTS PAGE ===== */

  .fieldrow{display:grid;grid-template-columns:1fr 180px;gap:14px}
  .money-tree{display:flex;flex-direction:column;gap:8px;margin-top:14px}
  .money-row{display:grid;grid-template-columns:70px minmax(170px,1fr) 160px 190px;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
  .money-row.empty{border-style:dashed;opacity:.85}
  .money-row .level{font-weight:800;font-size:15px}
  .money-row .state{font-size:12px}
  .money-row.empty .state{color:#fbbf24;font-weight:700}
  .money-row.filled .state{color:#86efac}
  .money-row input[type="text"]{font-size:15px;font-weight:700}
  .clone-panel,.delete-panel{display:none;margin-top:10px;padding:10px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
  .clone-panel.open,.delete-panel.open{display:block}
  .actions-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .summary-line{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .noticebox{border:1px solid rgba(59,130,246,.35);background:rgba(29,78,216,.12);border-radius:12px;padding:12px;margin:14px 0}
  .dangerbox{border:1px solid rgba(248,113,113,.45);background:rgba(127,29,29,.18);border-radius:12px;padding:12px;margin:14px 0}
  .categorybox{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .table-clean{width:100%;border-collapse:collapse}
  .table-clean th,.table-clean td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
  .table-clean th{color:var(--muted);font-weight:700}
  .table-clean th:nth-child(3){width:40%}
  @media(max-width:900px){.fieldrow,.money-row{grid-template-columns:1fr}.money-row{gap:8px}.table-clean th:nth-child(3){width:auto}}

/* ===== CATEGORY PAGE ===== */

  .category-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:18px }
  .category-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
  .category-chip { border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:8px 11px; color:var(--text); cursor:pointer }
  .category-chip.active { border-color:rgba(34,197,94,.55); background:rgba(34,197,94,.14) }
  .big-status { font-size:24px; font-weight:800; margin:8px 0 }
  .reset-zone { border:1px solid var(--line); background:var(--bg); border-radius:12px; padding:14px; margin-top:16px }
  @media(max-width:900px) { .category-layout { grid-template-columns:1fr } }

/* ===== SWITCH PAGE ===== */

  .switch-answers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .answer-pill{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px}
  .step-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;font-size:13px;margin-right:8px;flex-shrink:0}
  @media(max-width:900px){.switch-answers{grid-template-columns:1fr}}

/* ===== SCREEN TEXTS PAGE ===== */

  .text-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .preview-red{background:linear-gradient(180deg,#7c1017,#5a0a10);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:16px;margin-top:10px}
  .preview-red strong{display:block;font-size:20px;margin-bottom:8px}
  .group-title{margin:8px 0 14px;font-size:18px;font-weight:700}
  @media(max-width:900px){.text-layout{grid-template-columns:1fr}}

/* ===== ADBREAK PAGE ===== */

    .block-radio { display: none; gap: .6rem; flex-wrap: wrap; }
    .block-radio.visible { display: flex; }

    /* adbreak.php page-specific styles */
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
    .hint{font-size:13px;line-height:1.5;color:var(--muted)}
    .actions{display:flex;gap:12px;align-items:center;margin-top:8px}
    .tool-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;font-size:14px}
    .tool-btn:hover{border-color:var(--accent)}
    .status-box{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.22);border-radius:12px;padding:14px 16px;margin-bottom:16px}
    .status-box.warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.25)}
    .status-box strong{display:block;margin-bottom:8px;font-size:18px}
    .status-list{margin:0;padding-left:18px}
    .status-list li{margin:4px 0}
    .preview{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:16px}
    .preview h3{margin:0 0 10px;font-size:18px}
    .muted{color:var(--muted)}
    .checklist{border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:10px 12px;max-height:320px;overflow:auto}
    .checkitem{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
    .checkitem:last-child{border-bottom:0}
    .checkitem input{margin-top:3px}
    .path{word-break:break-word;font-family:Consolas,monospace;font-size:13px}
    .empty-state{border:1px dashed var(--line);border-radius:10px;padding:14px;color:var(--muted);background:var(--bg)}
    .disabled-block{opacity:.52;pointer-events:none;filter:grayscale(.18)}
    .mode-note{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.5}
    .toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
    .selection-summary{margin:10px 0 0;font-size:13px;color:var(--muted)}
    .active-summary{margin-top:10px;padding:12px;border-radius:10px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.18)}
    .active-summary.warn{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.22)}
    .hidden{display:none !important}
    .save-panel{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
    .save-panel .hint{margin:0}
    .save-panel .actions{margin:0;flex-shrink:0}
    .ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#86efac;border-radius:10px;padding:14px 16px;margin-top:16px;font-weight:700}
    .err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#fca5a5;border-radius:10px;padding:14px 16px;margin-top:16px;font-weight:700}
    .preview-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
    .preview-stage{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
    .preview-surface{position:relative;min-height:360px;border-radius:14px;background:radial-gradient(circle at top,#0e2237,#060d15 60%,#03070d);border:1px solid var(--line);overflow:hidden}
    .preview-video-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px}
    .preview-video{width:100%;height:100%;max-height:320px;border-radius:12px;background:#000;display:none}
    .preview-placeholder{max-width:620px;text-align:center;color:var(--muted);line-height:1.6;padding:18px}
    .preview-badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);font-weight:700}
    .redbox-preview{position:absolute;right:18px;bottom:18px;width:min(460px,calc(100% - 36px));background:linear-gradient(180deg,#7c1017,#5a0a10);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:16px 18px;display:none}
    .redbox-title{font-size:22px;font-weight:800;letter-spacing:.03em;margin:0 0 10px;text-transform:uppercase}
    .redbox-line{font-size:16px;line-height:1.45;margin:3px 0}
    .redbox-line.small{font-size:14px;color:#ffe7e7}
    button[type="submit"]{border:0;border-radius:8px;background:var(--accent);color:#fff;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer}
    @media(max-width:980px){.grid{grid-template-columns:1fr}.preview-stage{grid-template-columns:1fr}}

/* ===== EMAIL TEMPLATES PAGE ===== */

.tpl-card { padding: 0; overflow: hidden; }

.tpl-trigger {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 20px;
  background: rgba(56,189,248,.05);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.tpl-trigger-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--accent-2);
}

.tpl-split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 0;
}
.tpl-editor {
  padding: 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tpl-preview-col {
  padding: 20px;
  background: var(--panel-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tpl-preview-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--muted);
}
.tpl-preview-subj {
  font-size: 12px;
  color: var(--accent-2);
  min-height: 16px;
  word-break: break-all;
  font-style: italic;
}
.tpl-preview-frame {
  flex: 1;
  width: 100%;
  min-height: 460px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #07111d;
}

.tpl-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.1);
}

.tpl-chips-group { margin-bottom: 16px; }
.tpl-chips-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 7px;
}
.tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.22);
  color: #93c5fd;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.tpl-chip:hover {
  background: rgba(59,130,246,.22);
  border-color: rgba(59,130,246,.45);
  color: #bfdbfe;
}
.tpl-chip-var {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px;
  opacity: .6;
}

textarea.tpl-body {
  width: 100%;
  min-height: 280px;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}

@media(max-width:900px) {
  .tpl-split { grid-template-columns: 1fr; }
  .tpl-editor { border-right: none; border-bottom: 1px solid var(--line); }
  .tpl-preview-frame { min-height: 340px; }
}

/* ===== PHONE PAGE ===== */

  .phone-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:900px){.phone-two{grid-template-columns:1fr}}
  details.card>summary{cursor:pointer;font-weight:700;color:var(--accent);list-style:none;padding:2px 0}
  details.card>summary::before{content:"▶ ";font-size:12px}
  details.card[open]>summary::before{content:"▼ "}

/* ===== VARIANT LIFELINES PAGE ===== */

  .lifeline-row{display:grid;grid-template-columns:1.5fr .4fr 1.5fr;gap:12px;align-items:end;padding:12px 0;border-bottom:1px solid var(--line)}
  .lifeline-row:last-of-type{border-bottom:none}
  .lifeline-check{display:flex;align-items:center;gap:8px}
  @media(max-width:900px){.lifeline-row{grid-template-columns:1fr}}

/* ===== VARIANT EDIT PAGE ===== */

  .variant-form{display:grid;gap:14px}
  .check-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .check-row:last-of-type{border-bottom:none}

/* ===== MASTER LICENSE PAGE ===== */

  .serial{font-family:ui-monospace,Consolas,monospace;font-size:22px;font-weight:900;word-break:break-all;background:#07111f;border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0}
  .fieldline{margin:6px 0}
  .fieldline b{color:#dbeafe}
  .dangerzone{border-color:rgba(239,68,68,.5)!important}
  .form-stack{display:grid;gap:12px}
  .form-stack input{width:100%;box-sizing:border-box}
  .helpbox{border:1px solid var(--line);border-radius:12px;background:rgba(8,21,37,.72);padding:16px;margin-top:12px}
  .kpi-mini{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:14px}
  .kpi-mini .label{font-size:13px;color:var(--muted)}
  .kpi-mini .value{font-weight:800;margin-top:4px}
  .pill.info{border-color:#38bdf8;color:#bae6fd;background:rgba(56,189,248,.12)}
  .warning{border-color:rgba(245,158,11,.55)!important;background:rgba(245,158,11,.10)!important}
  @media(max-width:820px){.grid{grid-template-columns:1fr}}

/* ===== SYSTEM SETTINGS PAGE ===== */

  .danger-zone{border-color:rgba(239,68,68,.42);background:rgba(80,20,24,.15)}
  .warning-box{border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.09);border-radius:10px;padding:14px;margin:14px 0;color:#f8d69a}
  .readonly-box{border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:13px}
  .readonly-box .label{font-size:12px;color:var(--muted);margin-bottom:4px}
  .readonly-box .value{font-weight:800;word-break:break-all}
  .compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}
  .confirm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .big-input{font-size:17px;font-weight:700}
  .small-muted{font-size:13px;color:var(--muted)}
  .code-phrase{font-family:ui-monospace,Consolas,monospace;background:#08111a;border:1px solid #203246;border-radius:8px;padding:4px 8px;color:#fff}
  .effect-list{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.7}
  @media(max-width:900px){.compare-grid,.confirm-grid{grid-template-columns:1fr}}

/* ── Camera Settings ── */
.cam-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    cursor: pointer;
    border-bottom: 1px solid #2a2a40;
    transition: background .15s;
    font-size: 15px;
    color: #d8d8ee;
    user-select: none;
}
.cam-row:last-child  { border-bottom: none; }
.cam-row:hover       { background: #1a1a38; }
.cam-row.cam-active  { background: #0d1a40; color: #fff; font-weight: 600; }
.cam-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid #556;
    flex-shrink: 0;
    transition: border-color .15s, background .15s;
}
.cam-row.cam-active .cam-dot { background: #5566ff; border-color: #5566ff; }
.cam-badge {
    margin-left: auto;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #1a3a1a;
    color: #6d6;
    border: 1px solid #2a5a2a;
    white-space: nowrap;
    flex-shrink: 0;
}