/* ════════════════════════════════════════════════════════════════════════
   PREMIUM DESIGN SYSTEM - High-End SaaS Aesthetic
   Light Theme: Apple-Premium | Dark Theme: Landing-Page Navy
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ LIGHT THEME (Default) - Apple Premium Style ═══ */
:root {
  /* ─── Colors ─── */
  --bg: #FAFBFD;
  --card: #FFFFFF;
  --inp: #F1F5F9;
  --hov: #F8FAFC;
  --t1: #0F172A;
  --t2: #64748B;
  --t3: #94A3B8;
  --br: #2563EB;
  --brh: #1D4ED8;
  --brl: #DBEAFE;
  --brll: #EFF6FF;
  --ok: #10B981;
  --okl: #D1FAE5;
  --wa: #F59E0B;
  --wal: #FEF3C7;
  --dan: #EF4444;
  --danl: #FEE2E2;
  --ai: #8B5CF6;
  --ail: #EDE9FE;

  /* ─── Borders & Shadows ─── */
  --bo: #E8ECF1;
  --sh: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
  --shm: 0 4px 12px -2px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.03);
  --shl: 0 20px 40px -8px rgba(0,0,0,.08);

  /* ─── Radius ─── */
  --r: 10px;
  --rl: 14px;

  /* ─── Layout ─── */
  --sw: 260px;
  --th: 56px;

  /* ─── Glass Effects ─── */
  --glass: rgba(255, 255, 255, .85);
  --glass-bo: rgba(255, 255, 255, .6);
  --sidebar-bg: rgba(255, 255, 255, .75);
  --sidebar-blur: 20px;
  --header-bg: rgba(255, 255, 255, .8);
  --header-blur: 16px;

  /* ─── Glow & Gradients ─── */
  --glow: rgba(37, 99, 235, .12);
  --glow-strong: rgba(37, 99, 235, .2);
  --grad-hero: linear-gradient(135deg, #2563EB, #7C3AED);
  --grad-ai: linear-gradient(135deg, #8B5CF6, #F59E0B);
  --grad-ok: linear-gradient(135deg, #10B981, #059669);

  /* ─── Animations ─── */
  --card-hover-lift: -3px;
  --transition-speed: .2s;
}

/* ═══ DARK THEME - Landing Page Navy Style (#0F172A) ═══ */
[data-theme="dark"] {
  /* ─── Colors ─── */
  --bg: #0F172A;
  --card: #1E293B;
  --inp: #1E293B;
  --hov: #334155;
  --t1: #F1F5F9;
  --t2: #CBD5E1;
  --t3: #94A3B8;
  --br: #3B82F6;
  --brh: #60A5FA;
  --brl: rgba(59, 130, 246, .2);
  --brll: rgba(59, 130, 246, .08);
  --ok: #34D399;
  --okl: rgba(16, 185, 129, .15);
  --wa: #FBBF24;
  --wal: rgba(245, 158, 11, .15);
  --dan: #F87171;
  --danl: rgba(239, 68, 68, .15);
  --ai: #A78BFA;
  --ail: rgba(139, 92, 246, .15);

  /* ─── Borders & Shadows ─── */
  --bo: #334155;
  --sh: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shm: 0 4px 12px -2px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
  --shl: 0 20px 40px -8px rgba(0,0,0,.5);

  /* ─── Glass Effects ─── */
  --glass: rgba(30, 41, 59, .8);
  --glass-bo: rgba(51, 65, 85, .6);
  --sidebar-bg: rgba(15, 23, 42, .92);
  --sidebar-blur: 20px;
  --header-bg: rgba(15, 23, 42, .85);
  --header-blur: 16px;

  /* ─── Glow & Gradients ─── */
  --glow: rgba(59, 130, 246, .15);
  --glow-strong: rgba(59, 130, 246, .3);
  --grad-hero: linear-gradient(135deg, #3B82F6, #7C3AED);
  --grad-ai: linear-gradient(135deg, #A78BFA, #F59E0B);
  --grad-ok: linear-gradient(135deg, #34D399, #10B981);
}

/* ═══ GLOBAL STYLES ═══ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--t1);
  line-height: 1.5;
  font-size: 14px;

/* ═══ GLOBAL DARK MODE OVERRIDES ═══
   Forces dark styling on elements with hardcoded inline colors */

/* --- Form elements: inputs, selects, textareas --- */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--inp) !important;
  color: var(--t1) !important;
  border-color: var(--bo) !important;
}
/* --- docForm: force light theme on ALL children (printed document) --- */
[data-theme="dark"] #docForm,
[data-theme="dark"] #docForm * {
  color: #111 !important;
}
[data-theme="dark"] #docForm {
  background: #fff !important;
  border-color: #111 !important;
}
[data-theme="dark"] #docForm input,
[data-theme="dark"] #docForm select,
[data-theme="dark"] #docForm textarea {
  background: transparent !important;
  color: #111 !important;
  border-color: inherit !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--t3) !important;
}
[data-theme="dark"] #docForm input::placeholder,
[data-theme="dark"] #docForm textarea::placeholder {
  color: #999 !important;
}
[data-theme="dark"] select option {
  background: var(--card);
  color: var(--t1);
}

/* --- Override hardcoded light backgrounds inside section cards --- */
[data-theme="dark"] .ss div[style*="background:#f9f9f9"],
[data-theme="dark"] .ss div[style*="background: #f9f9f9"],
[data-theme="dark"] .ss div[style*="background:#f8fafc"],
[data-theme="dark"] .ss div[style*="background: #f8fafc"],
[data-theme="dark"] .ss div[style*="background:#f1f5f9"],
[data-theme="dark"] .ss div[style*="background: #f1f5f9"] {
  background: rgba(30,41,59,.5) !important;
  border-color: var(--bo) !important;
  color: var(--t1) !important;
}

/* --- Override hardcoded border colors --- */
[data-theme="dark"] .ss div[style*="border:1px solid #eee"],
[data-theme="dark"] .ss div[style*="border:1px solid #ddd"],
[data-theme="dark"] .ss div[style*="border:1px solid #ccc"],
[data-theme="dark"] .ss div[style*="border-top:1px solid #ddd"] {
  border-color: var(--bo) !important;
}

/* --- Override hardcoded text colors --- */
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color:#555"] {
  color: var(--t1) !important;
}
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #666"] {
  color: var(--t2) !important;
}
[data-theme="dark"] [style*="color:#999"],
[data-theme="dark"] [style*="color: #999"] {
  color: var(--t3) !important;
}

/* --- Make form labels brighter in dark mode --- */
[data-theme="dark"] .sfl label {
  color: var(--t1) !important;
}
/* --- Ensure ALL text inside .ss cards is readable in dark mode --- */
[data-theme="dark"] .ss label,
[data-theme="dark"] .ss span,
[data-theme="dark"] .ss p,
[data-theme="dark"] .ss h3,
[data-theme="dark"] .ss h4,
[data-theme="dark"] .ss div {
  color: inherit;
}
/* --- Light-background containers inside dark mode: force readable text --- */
[data-theme="dark"] div[style*="background:#F8FAFC"],
[data-theme="dark"] div[style*="background: #F8FAFC"],
[data-theme="dark"] div[style*="background:#F0FDF4"],
[data-theme="dark"] div[style*="background: #F0FDF4"],
[data-theme="dark"] div[style*="background:#FFF7ED"],
[data-theme="dark"] div[style*="background: #FFF7ED"],
[data-theme="dark"] div[style*="background:#FAFAFA"],
[data-theme="dark"] div[style*="background:#f0f7ff"],
[data-theme="dark"] div[style*="background:#f8fafc"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#FEF2F2"],
[data-theme="dark"] div[style*="background:#e8f5e9"],
[data-theme="dark"] div[style*="background:#fff3e0"] {
  background: var(--card) !important;
  color: var(--t1) !important;
  border-color: var(--bo) !important;
}
/* --- Gradient light backgrounds in dark mode --- */
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#F0FDF4"],
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#F0F9FF"],
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#EFF6FF"],
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#FFF7ED"],
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#F5F3FF"] {
  background: var(--inp) !important;
  color: var(--t1) !important;
}
/* --- Table headers with light backgrounds in dark mode --- */
[data-theme="dark"] th[style*="background:#E2E8F0"],
[data-theme="dark"] th[style*="background: #E2E8F0"],
[data-theme="dark"] th[style*="background:#F1F5F9"],
[data-theme="dark"] th[style*="background: #F1F5F9"],
[data-theme="dark"] th[style*="background:#f0f4ff"],
[data-theme="dark"] td[style*="background:#F8FAFC"],
[data-theme="dark"] td[style*="background: #F8FAFC"],
[data-theme="dark"] td[style*="background:#dcfce7"] {
  background: rgba(30,41,59,.5) !important;
  color: var(--t1) !important;
}

/* --- Additional light backgrounds missed by earlier rules --- */
[data-theme="dark"] div[style*="background:#FEF3C7"],
[data-theme="dark"] div[style*="background:#fef3c7"],
[data-theme="dark"] div[style*="background:#FEE2E2"],
[data-theme="dark"] div[style*="background:#fee2e2"],
[data-theme="dark"] div[style*="background:#EEF2FF"],
[data-theme="dark"] div[style*="background:#ECFDF5"],
[data-theme="dark"] div[style*="background:#ecfdf5"],
[data-theme="dark"] div[style*="background:#DBEAFE"],
[data-theme="dark"] div[style*="background:#dbeafe"],
[data-theme="dark"] div[style*="background:#EDE9FE"],
[data-theme="dark"] div[style*="background:#D1FAE5"],
[data-theme="dark"] div[style*="background:#D1E9FF"],
[data-theme="dark"] div[style*="background:#F5F3FF"],
[data-theme="dark"] div[style*="background:#F0F9FF"],
[data-theme="dark"] div[style*="background:#F1F5F9"],
[data-theme="dark"] div[style*="background:#f1f5f9"],
[data-theme="dark"] div[style*="background:#FED7AA"],
[data-theme="dark"] div[style*="background:#FFFBF5"],
[data-theme="dark"] div[style*="background:#f0f4ff"],
[data-theme="dark"] span[style*="background:#FEF3C7"],
[data-theme="dark"] span[style*="background:#FEE2E2"],
[data-theme="dark"] span[style*="background:#DBEAFE"],
[data-theme="dark"] span[style*="background:#EDE9FE"],
[data-theme="dark"] span[style*="background:#D1FAE5"],
[data-theme="dark"] span[style*="background:#FEF2F2"],
[data-theme="dark"] span[style*="background:#ECFDF5"],
[data-theme="dark"] span[style*="background:#EEF2FF"],
[data-theme="dark"] span[style*="background:#FFF7ED"] {
  background: var(--card) !important;
  color: var(--t1) !important;
  border-color: var(--bo) !important;
}

/* --- Additional hardcoded dark text colors --- */
[data-theme="dark"] :not(#docForm) > [style*="color:#334155"],
[data-theme="dark"] :not(#docForm) > [style*="color:#1E293B"],
[data-theme="dark"] :not(#docForm) > [style*="color:#1e293b"],
[data-theme="dark"] :not(#docForm) > [style*="color:#0F172A"],
[data-theme="dark"] :not(#docForm) > [style*="color:#0f172a"],
[data-theme="dark"] :not(#docForm) > [style*="color:#1a1a1a"],
[data-theme="dark"] :not(#docForm) > [style*="color:#374151"],
[data-theme="dark"] :not(#docForm) > [style*="color:#1a1a2e"] {
  color: var(--t1) !important;
}
[data-theme="dark"] :not(#docForm) > [style*="color:#64748B"],
[data-theme="dark"] :not(#docForm) > [style*="color:#64748b"],
[data-theme="dark"] :not(#docForm) > [style*="color:#475569"],
[data-theme="dark"] :not(#docForm) > [style*="color:#92400E"],
[data-theme="dark"] :not(#docForm) > [style*="color:#92400e"],
[data-theme="dark"] :not(#docForm) > [style*="color:#9A3412"],
[data-theme="dark"] :not(#docForm) > [style*="color:#6D28D9"],
[data-theme="dark"] :not(#docForm) > [style*="color:#1E40AF"],
[data-theme="dark"] :not(#docForm) > [style*="color:#0369A1"] {
  color: var(--t2) !important;
}

/* --- Gradient backgrounds in lasercalc & auth --- */
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#EDE9FE"],
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#DBEAFE"],
[data-theme="dark"] div[style*="background:linear-gradient(135deg,rgba(245,158,11"] {
  background: var(--inp) !important;
  color: var(--t1) !important;
}

/* --- Disclaimer popup dark mode fix --- */
[data-theme="dark"] #disclaimerOverlay div {
  color: var(--t1) !important;
}
[data-theme="dark"] #disclaimerOverlay strong {
  color: var(--t1) !important;
}
[data-theme="dark"] #disclaimerOverlay label {
  color: var(--t1) !important;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
  transition: background .3s ease;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #475569;
}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sparkle {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.2); opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes laserPulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sbExpandPulse {
  0%, 100% { box-shadow: var(--shm); }
  50% { box-shadow: 0 0 12px rgba(37, 99, 235, .3); }
}

@keyframes bbGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(139, 92, 246, .3), 0 0 12px rgba(139, 92, 246, .15); }
  50% { box-shadow: 0 0 14px rgba(139, 92, 246, .55), 0 0 28px rgba(139, 92, 246, .25); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══ LAYOUT STRUCTURE ═══ */
.app {
  display: flex;
  min-height: 100vh;
}

/* ─── SIDEBAR ─── */
.sb {
  width: var(--sw);
  background: var(--card);
  border-right: 1px solid var(--bo);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .3s, border-color .3s;
}

/* Light theme: subtle glass effect */
.sb {
  background: var(--sidebar-bg);
  backdrop-filter: blur(var(--sidebar-blur));
  -webkit-backdrop-filter: blur(var(--sidebar-blur));
  border-color: rgba(232, 236, 241, .6);
}

/* Dark theme: dark glass */
[data-theme="dark"] .sb {
  background: var(--sidebar-bg);
  backdrop-filter: blur(var(--sidebar-blur));
  -webkit-backdrop-filter: blur(var(--sidebar-blur));
  border-color: rgba(255, 255, 255, .05);
}

.sb.collapsed {
  transform: translateX(-100%);
  pointer-events: none;
}

.sb-h {
  padding: 20px;
  border-bottom: 1px solid var(--bo);
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-theme="dark"] .sb-h {
  border-color: rgba(255, 255, 255, .06);
}

.sb-l {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.li {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--br), #7C3AED);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .2);
}

.lt {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.lt span {
  color: var(--br);
}

.lv {
  font-size: 10px;
  color: var(--t3);
  font-weight: 500;
  letter-spacing: .3px;
}

.sn {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
}

/* ─── SECTION LABELS ─── */
.sl {
  font-size: 11px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 12px 12px 6px;
  margin-top: 12px;
}

.sl:first-of-type {
  margin-top: 0;
}

/* ─── NAV ITEMS ─── */
.ni {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r);
  color: var(--t2);
  cursor: pointer;
  transition: all .2s ease;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  margin-bottom: 4px;
}

.ni:hover {
  background: var(--hov);
  color: var(--t1);
  transform: translateX(2px);
}

.ni.a {
  background: var(--brll);
  color: var(--br);
  font-weight: 600;
}

.ni.a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--br);
}

.ni i {
  width: 20px;
  text-align: center;
  transition: transform .2s ease;
  flex-shrink: 0;
}

.ni:hover i {
  transform: scale(1.08);
}

[data-theme="dark"] .ni.a {
  background: rgba(59, 130, 246, .12);
  color: var(--br);
}

[data-theme="dark"] .ni:hover {
  background: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .ni.locked {
  opacity: .5;
}

.nb {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.nb.s {
  background: var(--inp);
  color: var(--t3);
}

.nb.c {
  background: var(--brl);
  color: var(--br);
}

/* ─── USER CARD (Footer) ─── */
.sf {
  padding: 16px;
  border-top: 1px solid var(--bo);
  margin-top: auto;
}

[data-theme="dark"] .sf {
  border-color: rgba(255, 255, 255, .06);
}

.su {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .2s ease;
}

.su:hover {
  background: var(--hov);
}

.ua {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--br), #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.un {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
}

.ur {
  font-size: 11px;
  color: var(--t3);
}

/* ─── MAIN CONTENT ─── */
.mn {
  flex: 1;
  margin-left: var(--sw);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  transition: margin-left .3s cubic-bezier(.4, 0, .2, 1);
}

.mn.sb-collapsed {
  margin-left: 0;
}

.ct {
  flex: 1;
  padding: 32px 32px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  animation: fadeIn .3s ease;
}

/* ═══ HEADER / TOOLBAR ═══ */
.tb {
  height: var(--th);
  background: var(--header-bg);
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
  border-bottom: 1px solid var(--bo);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  transition: all .3s ease;
}

.tb {
  border-color: rgba(232, 236, 241, .5);
}

[data-theme="dark"] .tb {
  background: var(--header-bg);
  border-color: rgba(255, 255, 255, .04);
}

.tbc {
  font-size: 13px;
  color: var(--t3);
}

.tbc span {
  color: var(--t2);
  font-weight: 500;
}

.tsp {
  flex: 1;
}

/* ─── SEARCH BAR ─── */
.tbs {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--inp);
  border: 1px solid var(--bo);
  border-radius: 20px;
  padding: 0 14px;
  height: 36px;
  width: 280px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.tbs:focus-within {
  border-color: var(--br);
  box-shadow: 0 0 0 3px var(--glow);
  background: var(--card);
  width: 340px;
}

.tbs i {
  color: var(--t3);
  font-size: 13px;
  flex-shrink: 0;
}

.tbs input {
  border: none;
  background: none;
  outline: none;
  font-size: 13px;
  color: var(--t1);
  width: 100%;
  font-family: inherit;
  font-weight: 500;
}

.tbs input::placeholder {
  color: var(--t3);
}

[data-theme="dark"] .tbs {
  background: rgba(30, 41, 59, .8);
  border-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .tbs:focus-within {
  background: rgba(15, 23, 42, .9);
  box-shadow: 0 0 0 3px var(--glow);
}

/* ─── TOOLBAR BUTTONS ─── */
.tbb {
  height: 36px;
  border-radius: 20px;
  border: 1px solid var(--bo);
  background: var(--card);
  color: var(--t2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
  padding: 0 14px;
  font-weight: 600;
  font-size: 12px;
  font-family: inherit;
  flex-shrink: 0;
}

.tbb:hover {
  background: var(--hov);
  color: var(--br);
  border-color: var(--br);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--glow);
}

[data-theme="dark"] .tbb {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(30, 41, 59, .6);
}

[data-theme="dark"] .tbb:hover {
  background: rgba(59, 130, 246, .12);
  border-color: var(--br);
  color: var(--br);
}

/* ─── THEME TOGGLE ─── */
.theme-toggle {
  height: 36px;
  width: 36px;
  border-radius: var(--r);
  border: 1px solid var(--bo);
  background: var(--card);
  color: var(--t2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .25s ease;
  font-size: 15px;
  position: relative;
  overflow: hidden;
}

.theme-toggle:hover {
  background: var(--hov);
  color: var(--br);
  border-color: var(--br);
  transform: scale(1.05);
}

.theme-toggle .fa-sun,
.theme-toggle .fa-moon {
  transition: all .3s ease;
}

[data-theme="dark"] .theme-toggle {
  border-color: rgba(59, 130, 246, .3);
  background: rgba(59, 130, 246, .08);
}

[data-theme="dark"] .theme-toggle:hover {
  background: rgba(59, 130, 246, .15);
  color: #60A5FA;
}

/* ═══ PAGE HEADER ═══ */
.ph {
  margin-bottom: 32px;
}

.ph h1 {
  background: linear-gradient(135deg, var(--t1) 30%, var(--br));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin-bottom: 6px;
}

[data-theme="dark"] .ph h1 {
  background: linear-gradient(135deg, #F1F5F9 30%, #60A5FA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ph p {
  color: var(--t2);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

/* ─── LASER ACCENT BEAM ─── */
.laser-accent {
  height: 3px;
  background: linear-gradient(90deg, var(--br), var(--ai), var(--br));
  border-radius: 2px;
  margin: 16px 0 24px;
  opacity: .6;
  animation: laserPulse 3s ease-in-out infinite;
}

/* ═══ STAT CARDS & CARDS ═══ */
.sr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.sc {
  background: var(--card);
  border: 1px solid var(--bo);
  border-radius: var(--rl);
  padding: 22px;
  box-shadow: var(--sh);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.sc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--br), var(--ai));
  opacity: 0;
  transition: opacity .3s ease;
}

.sc:hover {
  box-shadow: var(--shm);
  transform: translateY(-3px);
  border-color: var(--br);
}

.sc:hover::before {
  opacity: 1;
}

[data-theme="dark"] .sc {
  border-color: rgba(255, 255, 255, .06);
  background: rgba(30, 41, 59, .65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .sc:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  border-color: rgba(59, 130, 246, .3);
}

.si {
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.si.b { background: var(--brl); color: var(--br); }
.si.g { background: var(--okl); color: var(--ok); }
.si.o { background: var(--wal); color: var(--wa); }
.si.p { background: var(--ail); color: var(--ai); }

.sv {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.sla {
  font-size: 12px;
  color: var(--t2);
  margin-top: 6px;
}

/* ─── GLASS CARD ─── */
.glass-card {
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-bo);
  border-radius: var(--rl);
  box-shadow: var(--shm);
}

/* ═══ SECTION CARDS ═══ */
.ss {
  background: var(--card);
  border: 1px solid var(--bo);
  border-radius: var(--rl);
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: var(--sh);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.ss:hover {
  box-shadow: var(--shm);
  border-color: rgba(37, 99, 235, .2);
}

[data-theme="dark"] .ss {
  border-color: rgba(255, 255, 255, .06);
  background: rgba(30, 41, 59, .65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .ss:hover {
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}

/* ─── SECTION TITLE ─── */
.stt {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--t1);
}

.stt i {
  color: var(--br);
  font-size: 14px;
}

/* ─── FILTER GRID ─── */
.sg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
  margin-bottom: 24px;
}

.sfl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sfl label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* ─── SELECT DROPDOWNS ─── */
select.sel {
  width: 100%;
  padding: 10px 14px;
  background: var(--inp);
  border: 1px solid var(--bo);
  border-radius: var(--r);
  color: var(--t1);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

select.sel:hover:not(:disabled) {
  border-color: var(--br);
  box-shadow: 0 2px 8px var(--glow);
}

select.sel:focus {
  outline: none;
  border-color: var(--br);
  box-shadow: 0 0 0 3px var(--glow);
  background: var(--card);
}

select.sel:disabled {
  opacity: .4;
  cursor: not-allowed;
}

[data-theme="dark"] select.sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  border-color: rgba(255, 255, 255, .08);
  background-color: rgba(30, 41, 59, .8);
}

[data-theme="dark"] select.sel:focus {
  background: rgba(30, 41, 59, .8);
  box-shadow: 0 0 0 3px var(--glow);
}

/* ═══ BUTTONS ═══ */
.sbtn {
  width: 100%;
  margin-top: 20px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--br), #4F46E5);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  box-shadow: 0 4px 12px var(--glow);
}

.sbtn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--brh), #4338CA);
  box-shadow: 0 6px 20px var(--glow-strong);
  transform: translateY(-2px);
}

.sbtn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.bo {
  padding: 10px 18px;
  border: 1px solid var(--bo);
  border-radius: var(--r);
  background: var(--card);
  color: var(--t2);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.bo:hover {
  background: var(--hov);
  color: var(--br);
  border-color: var(--br);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--glow);
}

[data-theme="dark"] .bo {
  border-color: rgba(255, 255, 255, .1);
  background: #1e293b;
  color: #94A3B8;
}

[data-theme="dark"] .bo:hover {
  background: rgba(59, 130, 246, .12);
  border-color: var(--br);
  color: var(--br);
}

/* ═══ CALLOUT BOXES ═══ */
.co {
  padding: 14px 18px;
  border-radius: var(--r);
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  line-height: 1.6;
  backdrop-filter: blur(4px);
  border: 1px solid;
}

.co.w {
  background: var(--wal);
  color: #92400E;
  border-color: #FDE68A;
}

.co.i {
  background: var(--brll);
  color: #1E40AF;
  border-color: var(--brl);
}

.co i {
  margin-top: 2px;
  flex-shrink: 0;
}

[data-theme="dark"] .co.w {
  background: rgba(245, 158, 11, .08);
  color: #FBBF24;
  border-color: rgba(245, 158, 11, .25);
}

[data-theme="dark"] .co.i {
  background: rgba(59, 130, 246, .08);
  color: #93C5FD;
  border-color: rgba(59, 130, 246, .25);
}

/* ═══ RESULT CARDS ═══ */
.rc {
  background: var(--card);
  border: 1px solid var(--bo);
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--sh);
  margin-bottom: 24px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.rc:hover {
  box-shadow: var(--shm);
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, .2);
}

[data-theme="dark"] .rc {
  border-color: rgba(255, 255, 255, .06);
  background: #1a2236;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .rc:hover {
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

.rc.ai {
  border-color: var(--ai);
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .1);
}

[data-theme="dark"] .rc.ai {
  box-shadow: 0 0 24px rgba(139, 92, 246, .15);
  border-color: rgba(139, 92, 246, .4);
}

.rh {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--bo);
  flex-wrap: wrap;
  gap: 12px;
}

.rt {
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
}

.rsu {
  font-size: 12px;
  color: var(--t2);
}

.rb {
  padding: 24px;
}

.rf {
  padding: 16px 24px;
  border-top: 1px solid var(--bo);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ─── RESULT GRID ─── */
.rg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.rp {
  padding: 16px;
  background: var(--bg);
  border-radius: var(--r);
  border: 1px solid var(--bo);
  transition: all .2s ease;
}

.rp:hover {
  border-color: var(--br);
  box-shadow: 0 2px 8px var(--glow);
}

.rpl {
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 6px;
}

.rpv {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.rpu {
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  margin-left: 2px;
}

/* ─── STATUS BADGES ─── */
.cb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.cb.ex { background: var(--okl); color: #059669; }
.cb.ip { background: var(--wal); color: #D97706; }
.cb.ai { background: var(--ail); color: var(--ai); }

[data-theme="dark"] .cb.ex { background: rgba(16, 185, 129, .15); color: #34D399; }
[data-theme="dark"] .cb.ip { background: rgba(245, 158, 11, .15); color: #FBBF24; }
[data-theme="dark"] .cb.ai { background: rgba(139, 92, 246, .15); color: #A78BFA; }

/* ─── AI BANNER ─── */
.ab {
  background: linear-gradient(90deg, #EDE9FE, #FEF3C7);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #6D28D9;
  font-weight: 500;
  border-radius: var(--r);
  border: 1px solid #E9D5FF;
}

.ab i {
  font-size: 16px;
  animation: sparkle 2s ease infinite;
}

/* ═══ EMPTY STATE ═══ */
.we {
  text-align: center;
  padding: 60px 40px;
  background: var(--card);
  border: 1px solid var(--bo);
  border-radius: var(--rl);
  box-shadow: var(--sh);
}

.wi {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--br), #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px var(--glow);
}

.we h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--t1);
}

.we p {
  color: var(--t2);
  max-width: 480px;
  margin: 0 auto;
}

/* ═══ MOBILE MENU ─── */
.mbb {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  border: 1px solid var(--bo);
  background: var(--card);
  color: var(--t2);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all .2s ease;
}

.mbb:hover {
  background: var(--hov);
  color: var(--br);
}

.ov {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .3);
  z-index: 99;
}

.ov.op {
  display: block;
}

.sb-toggle {
  display: flex;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--bo);
  background: var(--card);
  color: var(--t3);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all .15s ease;
  flex-shrink: 0;
}

.sb-toggle:hover {
  color: var(--br);
  border-color: var(--br);
  background: var(--brll);
}

.sb-expand-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 101;
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  border: 1px solid var(--bo);
  background: var(--card);
  color: var(--t2);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  box-shadow: var(--shm);
  transition: all .2s ease;
  animation: sbExpandPulse 2s ease-in-out 1;
}

.sb-expand-btn:hover {
  color: var(--br);
  border-color: var(--br);
  transform: scale(1.08);
}

.sb-expand-btn.vis {
  display: flex;
}

/* ═══ DASHBOARD STYLES ═══ */
.db-hero {
  position: relative;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
  border-radius: var(--rl);
  padding: 28px 32px;
  margin-bottom: 28px;
  overflow: hidden;
  color: #fff;
}

.db-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(37, 99, 235, .15), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, .1), transparent 50%);
  pointer-events: none;
}

:root .db-hero {
  background: linear-gradient(135deg, #1E293B 0%, #334155 50%, #1E293B 100%);
}

.db-hero h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #fff 30%, #60A5FA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.db-hero p {
  color: #94A3B8;
  font-size: 14px;
  position: relative;
}

/* ─── LIVE CLOCK WIDGET ─── */
.db-clock-widget {
  text-align: right;
  position: relative;
  flex-shrink: 0;
}
.db-clock-time {
  font-size: 40px;
  font-weight: 200;
  letter-spacing: 2px;
  line-height: 1;
  font-family: 'Inter', monospace;
}
.db-clock-digit {
  color: #fff;
}
.db-clock-sep {
  color: #60A5FA;
  margin: 0 1px;
}
.db-clock-sec {
  font-size: 22px;
  color: #64748B;
  vertical-align: baseline;
}
.db-clock-blink {
  animation: clockBlink 1s step-end infinite;
}
.db-clock-date {
  font-size: 12px;
  color: #64748B;
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: .3px;
}
@keyframes clockBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@media (max-width: 600px) {
  .db-clock-widget { display: none; }
}

/* ─── STAT CARDS ─── */
.db-stat {
  background: var(--card);
  border: 1px solid var(--bo);
  border-radius: var(--rl);
  padding: 20px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.db-stat::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0 0 var(--rl) var(--rl);
  transition: opacity .3s ease;
  opacity: 0;
}

.db-stat:hover {
  box-shadow: var(--shm);
  transform: translateY(-2px);
}

.db-stat:hover::after {
  opacity: 1;
}

.db-stat.blue::after { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
.db-stat.green::after { background: linear-gradient(90deg, #10B981, #34D399); }
.db-stat.purple::after { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
.db-stat.orange::after { background: linear-gradient(90deg, #F59E0B, #FBBF24); }

[data-theme="dark"] .db-stat {
  background: rgba(30, 41, 59, .65);
  border-color: rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px);
}

[data-theme="dark"] .db-stat:hover {
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
}

/* ─── QUICK ACTION CARDS ─── */
.db-quick {
  background: var(--card);
  border: 1px solid var(--bo);
  border-radius: 14px;
  padding: 18px 20px;
  cursor: pointer;
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
}

.db-quick::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, var(--glow));
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.db-quick:hover {
  transform: translateY(-3px);
  box-shadow: var(--shm);
  border-color: var(--br);
}

.db-quick:hover::before {
  opacity: 1;
}

[data-theme="dark"] .db-quick {
  background: rgba(30, 41, 59, .5);
  border-color: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .db-quick:hover {
  border-color: rgba(59, 130, 246, .3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}

/* ─── ALERT BOXES ─── */
.db-alert-overdue {
  background: linear-gradient(135deg, rgba(239, 68, 68, .08), rgba(239, 68, 68, .03));
  border: 1px solid rgba(239, 68, 68, .2);
  border-radius: 8px;
  padding: 10px 12px;
  transition: all .2s ease;
}

.db-alert-overdue:hover {
  border-color: rgba(239, 68, 68, .4);
}

.db-alert-warn {
  background: linear-gradient(135deg, rgba(245, 158, 11, .08), rgba(245, 158, 11, .03));
  border: 1px solid rgba(245, 158, 11, .2);
  border-radius: 8px;
  padding: 10px 12px;
  transition: all .2s ease;
}

.db-alert-warn:hover {
  border-color: rgba(245, 158, 11, .4);
}

.db-alert-ok {
  background: linear-gradient(135deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .03));
  border: 1px solid rgba(16, 185, 129, .2);
  border-radius: 8px;
  padding: 10px 12px;
  transition: all .2s ease;
}

/* ─── MACHINE CARD ─── */
.db-machine {
  background: var(--card);
  border: 1px solid var(--bo);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  cursor: pointer;
}

.db-machine:hover {
  box-shadow: var(--shm);
  transform: translateY(-1px);
  border-color: var(--br);
}

[data-theme="dark"] .db-machine {
  background: rgba(30, 41, 59, .5);
  border-color: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .db-machine:hover {
  border-color: var(--br);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}

/* ═══ PICKER / SELECTION CARDS ═══ */
.mt {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.mc {
  flex: 1;
  min-width: 200px;
  padding: 16px 20px;
  background: var(--card);
  border: 2px solid var(--bo);
  border-radius: var(--rl);
  cursor: pointer;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.mc:hover {
  border-color: var(--br);
  box-shadow: var(--shm);
  transform: translateY(-1px);
}

.mc.a {
  border-color: var(--br);
  background: var(--brll);
}

.mi {
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  background: var(--inp);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.mc.a .mi {
  background: var(--brl);
}

.mm {
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
}

.md {
  font-size: 12px;
  color: var(--t2);
}

/* ─── PICKER SYSTEM CARDS ─── */
.pk-sys-card {
  padding: 16px 20px;
  border: 2px solid var(--bo);
  border-radius: var(--rl);
  cursor: pointer;
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
  background: var(--card);
  display: flex;
  align-items: center;
  gap: 14px;
}

.pk-sys-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--card-accent, var(--bo));
  transition: all .3s ease;
}

.pk-sys-card:hover {
  border-color: var(--card-accent, var(--br));
  box-shadow: var(--shm);
  transform: translateY(-1px);
}

.pk-sys-card.sel {
  border-color: var(--card-accent, var(--br));
  background: var(--brll);
}

.pk-sys-card.sel::before {
  background: var(--card-accent, var(--br));
}

[data-theme="dark"] .pk-sys-card {
  border-color: rgba(255, 255, 255, .06);
  background: rgba(30, 41, 59, .5);
}

[data-theme="dark"] .pk-sys-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .pk-sys-card.sel {
  background: rgba(59, 130, 246, .1);
  border-color: var(--br);
}

/* ─── FILTER BADGES ─── */
.gfb {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--bo);
  background: var(--card);
  color: var(--t2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.gfb:hover {
  border-color: var(--br);
  color: var(--br);
  background: var(--brll);
  transform: translateY(-1px);
}

.gfb.a {
  background: linear-gradient(135deg, var(--br), #4F46E5);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px var(--glow);
}

/* ─── CATEGORY BADGES ─── */
.pk-cat {
  padding: 8px 18px;
  border-radius: 20px;
  border: 2px solid var(--bo);
  background: var(--card);
  color: var(--t1);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.pk-cat:hover {
  border-color: var(--br);
  color: var(--br);
  transform: translateY(-1px);
}

.pk-cat.a {
  background: linear-gradient(135deg, var(--br), #4F46E5);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px var(--glow);
}

/* ─── ITEM PILLS ─── */
.pk-pill {
  padding: 10px 18px;
  border-radius: 10px;
  border: 2px solid var(--bo);
  background: var(--card);
  color: var(--t1);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
  line-height: 1.3;
  white-space: nowrap;
}

.pk-pill:hover {
  border-color: var(--br);
  background: var(--brll);
  transform: translateY(-1px);
  box-shadow: var(--sh);
}

.pk-pill.sel {
  border-color: var(--br);
  background: var(--brll);
  color: var(--br);
  font-weight: 600;
}

[data-theme="dark"] .pk-pill:hover,
[data-theme="dark"] .pk-pill.sel {
  box-shadow: 0 0 12px var(--glow);
}

/* ─── STRIP CARDS ─── */
.pk-strip {
  padding: 10px 18px 10px 22px;
  border-radius: 10px;
  border: 2px solid var(--bo);
  background: var(--card);
  color: var(--t1);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
  line-height: 1.3;
  position: relative;
  overflow: hidden;
}

.pk-strip:hover {
  border-color: var(--br);
  box-shadow: var(--shm);
  transform: translateY(-1px);
}

.pk-strip.sel {
  border-color: var(--br);
  background: var(--br);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .25);
}
.pk-strip.sel::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #fff;
  border-radius: 0 2px 2px 0;
}

[data-theme="dark"] .pk-strip.sel {
  background: var(--br);
  border-color: var(--br);
  color: #fff;
  box-shadow: 0 0 12px var(--glow);
}

/* ═══ GUIDE CARDS ═══ */
.gg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.gc {
  background: var(--card);
  border: 1px solid var(--bo);
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--sh);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.gc:hover {
  box-shadow: var(--shm);
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, .2);
}

[data-theme="dark"] .gc {
  border-color: rgba(255, 255, 255, .06);
  background: rgba(30, 41, 59, .6);
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .gc:hover {
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

.gc-h {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--bo);
  background: var(--bg);
  cursor: pointer;
  transition: background .2s ease;
}

.gc-h:hover {
  background: var(--hov);
}

.gc-ic {
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.gc-ic.bl { background: var(--brl); color: var(--br); }
.gc-ic.gr { background: var(--okl); color: var(--ok); }
.gc-ic.or { background: var(--wal); color: var(--wa); }
.gc-ic.pu { background: var(--ail); color: var(--ai); }
.gc-ic.rd { background: var(--danl); color: var(--dan); }

.gc-ti {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
}

.gc-su {
  font-size: 12px;
  color: var(--t2);
  margin-top: 2px;
}

.gc-bd {
  padding: 16px;
  background: var(--bg);
  font-size: 13px;
  line-height: 1.6;
  color: var(--t2);
}

[data-theme="dark"] .gc-bd {
  background: var(--bg);
}

.gc-img {
  width: 100%;
  max-height: 200px;
  display: block;
  border-radius: var(--r);
  object-fit: contain;
}

.gc-cmp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.gc-side {
  padding: 16px;
  border-top: 1px solid var(--bo);
}

.gc-side.ok h4 { color: var(--ok); }
.gc-side.bad h4 { color: var(--dan); }

[data-theme="dark"] .gc-side.ok h4 { color: var(--ok); }
[data-theme="dark"] .gc-side.bad h4 { color: var(--dan); }

.gc-toggle {
  background: var(--bg);
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  margin-top: 8px;
}

.gc-toggle:hover {
  background: var(--hov);
}

[data-theme="dark"] .gc-toggle {
  background: var(--bg);
}

[data-theme="dark"] .gc-toggle:hover {
  background: rgba(59, 130, 246, .1);
}

.gc-tip {
  background: rgba(59, 130, 246, .08);
  border-top: 2px solid rgba(59, 130, 246, .2);
  padding: 12px;
  margin-top: 12px;
  border-radius: 6px;
  color: #1E40AF;
  font-size: 12px;
  line-height: 1.5;
}

[data-theme="dark"] .gc-tip {
  background: rgba(59, 130, 246, .08);
  border-top-color: rgba(59, 130, 246, .2);
  color: #93C5FD;
}

/* ═══ BEAMBUDDY PANEL ═══ */
.bb-btn {
  position: relative;
  height: 36px;
  width: 36px;
  border-radius: var(--r);
  border: 1.5px solid var(--ai);
  background: linear-gradient(135deg, #EDE9FE, #FEF3C7);
  color: var(--ai);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all .25s ease;
  animation: bbGlow 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

.bb-btn:hover {
  transform: scale(1.1);
  border-color: #7C3AED;
  color: #7C3AED;
}

.bb-btn.locked {
  animation: none;
  border-color: var(--bo);
  background: var(--inp);
  color: var(--t3);
}

.bb-btn.locked:hover {
  border-color: var(--ai);
  color: var(--ai);
}

.bb-lock {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  background: var(--ai);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  color: #fff;
  border: 1.5px solid var(--card);
}

.bb-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  background: var(--card);
  border-left: 1px solid var(--bo);
  box-shadow: -4px 0 24px rgba(0, 0, 0, .08);
  z-index: 120;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.bb-panel.open {
  transform: translateX(0);
}

.bb-panel-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--bo);
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #F5F3FF 0%, #FFFBEB 100%);
}

[data-theme="dark"] .bb-panel-head {
  background: linear-gradient(135deg, rgba(139, 92, 246, .15), rgba(245, 158, 11, .1));
}

.bb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ai), #F59E0B);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}

.bb-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ai);
}

.bb-sub {
  font-size: 11px;
  color: var(--t3);
}

.bb-panel-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: rgba(139, 92, 246, .1);
  color: var(--ai);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .15s ease;
  flex-shrink: 0;
}

.bb-panel-close:hover {
  background: rgba(139, 92, 246, .2);
}

.bb-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.bb-welcome {
  background: linear-gradient(135deg, #F5F3FF, #FFFBEB);
  border: 1px solid #E9D5FF;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

[data-theme="dark"] .bb-welcome {
  background: rgba(139, 92, 246, .08);
  border-color: rgba(139, 92, 246, .2);
}

.bb-welcome h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ai);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bb-welcome p {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
  margin-bottom: 12px;
}

.bb-welcome ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bb-welcome li {
  font-size: 12px;
  color: var(--t1);
  padding: 6px 10px;
  background: rgba(255, 255, 255, .7);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bb-welcome li i {
  color: var(--ai);
  font-size: 11px;
  width: 16px;
  text-align: center;
}

.bb-input {
  border-top: 1px solid var(--bo);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bb-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bb-input input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--bo);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border .15s ease;
  background: var(--card);
  color: var(--t1);
}

.bb-input input:focus {
  border-color: var(--ai);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .1);
}

[data-theme="dark"] .bb-input input:focus {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .15);
}

.bb-send {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--ai);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .15s ease;
  flex-shrink: 0;
}

.bb-send:hover {
  background: #7C3AED;
}

.bb-upload-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px dashed var(--bo);
  background: none;
  color: var(--t3);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s ease;
}

.bb-upload-btn:hover {
  border-color: var(--ai);
  color: var(--ai);
  background: rgba(139, 92, 246, .04);
}

.bb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .2);
  z-index: 119;
}

.bb-overlay.open {
  display: block;
}

[data-theme="dark"] .bb-btn {
  box-shadow: 0 0 12px rgba(139, 92, 246, .3);
}

/* ─── BEAMBUDDY PRODUCTS ─── */
.bb-products {
  margin-top: 8px;
  border: 1px solid #E9D5FF;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}

.bb-products-head {
  padding: 8px 12px;
  background: linear-gradient(135deg, #F5F3FF, #FFFBEB);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ai);
  border-bottom: 1px solid #E9D5FF;
}

.bb-products-head i {
  font-size: 13px;
}

.bb-prod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bo);
  transition: background .15s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.bb-prod:last-child {
  border-bottom: none;
}

.bb-prod:hover {
  background: #F5F3FF;
}

[data-theme="dark"] .bb-prod:hover {
  background: rgba(139, 92, 246, .08);
}

.bb-prod-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--ail);
  color: var(--ai);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.bb-prod-info {
  flex: 1;
  min-width: 0;
}

.bb-prod-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-prod-desc {
  font-size: 11px;
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-prod-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--ok);
  white-space: nowrap;
}

.bb-prod-arrow {
  color: var(--t3);
  font-size: 11px;
}

/* ═══ AI STYLES ═══ */
.param-explain {
  background: var(--ail);
  border-left: 3px solid var(--ai);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t1);
  margin-top: 12px;
}

[data-theme="dark"] .param-explain {
  background: rgba(139, 92, 246, .1);
  border-left-color: var(--ai);
}

.ai-guide {
  background: linear-gradient(135deg, #F5F3FF, #F0F9FF);
  border: 1px solid #E9D5FF;
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}

[data-theme="dark"] .ai-guide {
  background: linear-gradient(135deg, #1e1b35, #172033) !important;
  border-color: rgba(139, 92, 246, .35) !important;
  color: #CBD5E1 !important;
}

.ai-guide-h {
  font-size: 14px;
  font-weight: 700;
  color: var(--ai);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-theme="dark"] .ai-guide-h {
  color: #C4B5FD !important;
}

.ai-guide-b {
  font-size: 12px;
  line-height: 1.6;
  color: var(--t2);
}

[data-theme="dark"] .ai-guide-b {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .ai-guide-b p {
  color: #CBD5E1 !important;
}

.ai-guide-b strong {
  color: var(--ai);
  font-weight: 600;
}

[data-theme="dark"] .ai-guide-b strong {
  color: #C4B5FD !important;
}

/* ─── PARAMETER ANALYSIS ─── */
.pa-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pa-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #EDE9FE, #FEF3C7);
  border-radius: var(--r);
  border: 1px solid #E9D5FF;
}

.pa-info-txt {
  font-size: 12px;
  font-weight: 600;
  color: #5B21B6;
}

.pa-info-sub {
  font-size: 11px;
  color: var(--t2);
}

[data-theme="dark"] .pa-info {
  background: linear-gradient(135deg, rgba(139, 92, 246, .12), rgba(245, 158, 11, .08));
  border-color: rgba(139, 92, 246, .3);
}

[data-theme="dark"] .pa-info-txt {
  color: #C4B5FD;
}

.pa-remote-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #DBEAFE, #E0F2FE);
  border-radius: var(--r);
  border: 1px solid #93C5FD;
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
}

.pa-remote-box:hover {
  border-color: var(--br);
  box-shadow: var(--shm);
}

[data-theme="dark"] .pa-remote-box {
  background: rgba(59, 130, 246, .1);
  border-color: rgba(59, 130, 246, .3);
}

.pa-remote-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--br);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.pa-remote-txt {
  font-size: 12px;
  font-weight: 600;
  color: #1E40AF;
}

[data-theme="dark"] .pa-remote-txt {
  color: #93C5FD;
}

.pa-remote-sub {
  font-size: 10px;
  color: #64748B;
  line-height: 1.3;
}

/* ─── REMOTE DISCLAIMER MODAL ─── */
.rm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .2s ease;
}

.rm-modal {
  background: var(--card);
  border-radius: 16px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
  overflow: hidden;
  animation: slideUp .3s ease;
}

.rm-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--bo);
  display: flex;
  align-items: center;
  gap: 12px;
}

.rm-head-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brl);
  color: var(--br);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.rm-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
}

.rm-body {
  padding: 20px 24px;
  font-size: 13px;
  color: var(--t2);
  line-height: 1.7;
}

.rm-body ul {
  margin: 10px 0;
  padding-left: 20px;
}

.rm-body ul li {
  margin-bottom: 6px;
}

.rm-body a {
  color: var(--br);
  text-decoration: underline;
  font-weight: 500;
}

.rm-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--bo);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.rm-btn {
  padding: 10px 20px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all .15s ease;
  white-space: nowrap;
}

.rm-btn.cancel {
  background: var(--inp);
  color: var(--t2);
}

.rm-btn.cancel:hover {
  background: var(--bo);
}

.rm-btn.accept {
  background: var(--br);
  color: #fff;
}

.rm-btn.accept:hover {
  background: var(--brh);
}

[data-theme="dark"] .rm-modal {
  background: var(--card);
}

[data-theme="dark"] .rm-head h3 {
  color: var(--t1);
}

/* ═══ ANIMATIONS & TRANSITIONS ═══ */
.anim-fade {
  animation: fadeInScale .4s ease-out forwards;
}

.anim-fade:nth-child(2) { animation-delay: .05s; }
.anim-fade:nth-child(3) { animation-delay: .1s; }
.anim-fade:nth-child(4) { animation-delay: .15s; }
.anim-fade:nth-child(5) { animation-delay: .2s; }
.anim-fade:nth-child(6) { animation-delay: .25s; }

/* ─── SMOOTH TRANSITIONS ─── */
.card, .ss, .sc, .rc, .we, .mc, .ni, .tbb, .bo, .pk-cat,
.pk-pill, .pk-strip, .pk-opt, .pk-sys-card, .gc, .cw-card,
.cw-sys, .co {
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
}

/* ═══ PARTICLES ═══ */
.particles {
  position: relative;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: particleFade .8s ease-out forwards;
}

@keyframes particleFade {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0);
  }
}

/* ═══ RESPONSIVE DESIGN ═══ */
@media (max-width: 1200px) {
  .sr { grid-template-columns: repeat(3, 1fr); }
  .sg { grid-template-columns: repeat(3, 1fr); }
  .ct { padding: 24px; }
}

@media (max-width: 768px) {
  .sb {
    transform: translateX(-100%);
  }

  .sb.op {
    transform: translateX(0);
  }

  .mn {
    margin-left: 0;
  }

  .mbb {
    display: flex;
  }

  .sr { grid-template-columns: repeat(2, 1fr); }
  .sg { grid-template-columns: 1fr 1fr; }
  .mt { flex-direction: column; }
  .tbs { display: none; }
  .theme-toggle { width: 32px; height: 32px; font-size: 13px; }
  .tbb { height: 32px; padding: 0 8px; font-size: 11px; }
  .tb { padding: 0 12px; gap: 8px; }
  .ct { padding: 16px; }
  .bb-panel { width: 100%; }
}

@media (max-width: 480px) {
  .sr { grid-template-columns: 1fr; }
  .sg { grid-template-columns: 1fr; }
  .rg { grid-template-columns: 1fr; }
  .gc-cmp { grid-template-columns: 1fr; }
  .gf { gap: 6px; }
  .gfb { padding: 5px 10px; font-size: 11px; }
  .ct { padding: 12px; }
  .ph h1 { font-size: 22px; }
  .db-quick { padding: 14px 16px; min-height: 60px; }
}

/* ═══ SHOP PRODUCT CARDS ═══ */
.sp-card {
  flex: 0 0 160px;
  border: 1px solid var(--bo);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  transition: all .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.sp-card:hover {
  border-color: #8B5CF6;
  box-shadow: 0 4px 12px rgba(139,92,246,.15);
  transform: translateY(-2px);
}
.sp-img {
  width: 100%;
  height: 100px;
  overflow: hidden;
  background: var(--c1);
}
.sp-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(139,92,246,.08), rgba(139,92,246,.04));
}
.sp-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.3;
  height: 28px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sp-scroll {
  scrollbar-color: var(--bo) transparent;
}
[data-theme="dark"] .sp-card {
  background: #1a2236 !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
[data-theme="dark"] .sp-card:hover {
  border-color: rgba(139,92,246,.4) !important;
  box-shadow: 0 4px 16px rgba(139,92,246,.2);
}
[data-theme="dark"] .sp-img {
  background: #111827 !important;
}
[data-theme="dark"] .sp-img-placeholder {
  background: linear-gradient(135deg, #1e1635, #14202e) !important;
}

/* ═══ LASERCALC DARK MODE ═══ */
[data-theme="dark"] #lc-sidebar {
  background: var(--card) !important;
  border-color: var(--bo) !important;
}

/* Sidebar header border */
[data-theme="dark"] #lc-sidebar > div:first-child {
  border-color: var(--bo) !important;
}

/* LaserCalc title text */
[data-theme="dark"] #lc-sidebar div[style*="font-weight:700"][style*="font-size:15px"] {
  color: var(--t1) !important;
}

/* Sidebar subtitle + divider labels */
[data-theme="dark"] #lc-sidebar div[style*="color:#94a3b8"],
[data-theme="dark"] #lc-sidebar div[style*="color:#C2410C"] {
  color: var(--t3) !important;
}

/* Nav items — inactive text */
[data-theme="dark"] #lc-sidebar div[style*="color:#475569"] {
  color: var(--t2) !important;
}

/* Nav items — active state */
[data-theme="dark"] #lc-sidebar div[style*="background:#FFF7ED"] {
  background: rgba(255, 107, 0, .12) !important;
}

/* Setup progress box */
[data-theme="dark"] #lc-sidebar div[style*="background:#FFF7ED"][style*="border-radius:10px"] {
  background: rgba(255, 107, 0, .1) !important;
  border-color: rgba(255, 107, 0, .3) !important;
}

[data-theme="dark"] #lc-sidebar div[style*="color:#9A3412"] {
  color: #FDBA74 !important;
}

[data-theme="dark"] #lc-sidebar div[style*="background:#FED7AA"] {
  background: rgba(255, 107, 0, .2) !important;
}

/* LaserCalc main content area — text colors */
[data-theme="dark"] #lc-main div[style*="color:#1e293b"],
[data-theme="dark"] #lc-main div[style*="color:#0f172a"],
[data-theme="dark"] #lc-main span[style*="color:#1e293b"],
[data-theme="dark"] #lc-main span[style*="color:#0f172a"] {
  color: var(--t1) !important;
}

[data-theme="dark"] #lc-main div[style*="color:#475569"],
[data-theme="dark"] #lc-main div[style*="color:#64748b"],
[data-theme="dark"] #lc-main span[style*="color:#475569"],
[data-theme="dark"] #lc-main span[style*="color:#64748b"],
[data-theme="dark"] #lc-main div[style*="color:#374151"] {
  color: var(--t2) !important;
}

[data-theme="dark"] #lc-main div[style*="color:#94a3b8"],
[data-theme="dark"] #lc-main span[style*="color:#94a3b8"],
[data-theme="dark"] #lc-main td[style*="color:#94a3b8"] {
  color: var(--t3) !important;
}

/* LaserCalc cards & backgrounds */
[data-theme="dark"] #lc-main div[style*="background:#f8fafc"],
[data-theme="dark"] #lc-main div[style*="background:#FFFBF5"],
[data-theme="dark"] #lc-main tr[style*="background:#f8fafc"] {
  background: var(--bg2) !important;
}

[data-theme="dark"] #lc-main div[style*="background:#FFF7ED"] {
  background: rgba(255, 107, 0, .1) !important;
}

[data-theme="dark"] #lc-main div[style*="background:#ECFDF5"] {
  background: rgba(5, 150, 105, .1) !important;
}

[data-theme="dark"] #lc-main div[style*="background:#FEE2E2"] {
  background: rgba(239, 68, 68, .1) !important;
}

[data-theme="dark"] #lc-main div[style*="background:#EEF2FF"] {
  background: rgba(99, 102, 241, .1) !important;
}

/* LaserCalc borders */
[data-theme="dark"] #lc-main div[style*="border-top:1px solid #f8fafc"],
[data-theme="dark"] #lc-main div[style*="border-top:2px solid #e2e8f0"],
[data-theme="dark"] #lc-main div[style*="border-bottom:1px solid #f1f5f9"] {
  border-color: var(--bo) !important;
}

/* Embed section dark bg */
[data-theme="dark"] #lc-main div[style*="background:#0f172a"] {
  background: #0f172a !important;
}

[data-theme="dark"] .lc-input {
  background: var(--inp) !important;
  border-color: var(--bo) !important;
  color: var(--t1) !important;
}

[data-theme="dark"] .lc-badge {
  background: var(--inp) !important;
  color: var(--t2) !important;
}

[data-theme="dark"] .lc-btn-ghost {
  border-color: var(--bo) !important;
  color: var(--t2) !important;
}

[data-theme="dark"] .lc-btn-ghost:hover {
  background: var(--hov) !important;
}

/* ─── DOC MODULE DARK MODE ─── */
/* docForm must ALWAYS look like a white printed document */
[data-theme="dark"] #docForm {
  background: #fff !important;
  color: #111 !important;
  border-color: #111 !important;
}
[data-theme="dark"] #docForm div,
[data-theme="dark"] #docForm span,
[data-theme="dark"] #docForm label,
[data-theme="dark"] #docForm p,
[data-theme="dark"] #docForm h1,
[data-theme="dark"] #docForm th,
[data-theme="dark"] #docForm td {
  color: inherit !important;
}

/* ═══ SCROLLBAR STYLING ═══ */
::-webkit-scrollbar-track {
  background: transparent;
}

[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
}

/* ═══ MISSING STYLES — Photo Analysis, Safety Banner, Animations ═══ */

/* ─── Photo Analysis Button ─── */
.pa-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--ai), #F59E0B);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.pa-btn:hover {
  box-shadow: var(--shm);
  transform: translateY(-1px);
}
.pa-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ─── Photo Analysis Modal ─── */
.pa-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn .2s;
}
.pa-box {
  background: var(--card);
  border-radius: var(--rl);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.pa-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--bo);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pa-head h3 {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pa-head h3 i {
  color: var(--ai);
}
.pa-body {
  padding: 24px;
}

/* ─── Photo Analysis Drop Zone ─── */
.pa-drop {
  border: 2px dashed var(--bo);
  border-radius: var(--rl);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.pa-drop:hover,
.pa-drop.drag {
  border-color: var(--ai);
  background: var(--ail);
}
.pa-drop i {
  font-size: 32px;
  color: var(--t3);
  margin-bottom: 8px;
}
.pa-drop p {
  color: var(--t2);
  font-size: 14px;
}
.pa-drop small {
  color: var(--t3);
  font-size: 12px;
}

/* ─── Photo Analysis Preview & Results ─── */
.pa-preview {
  margin-top: 16px;
  position: relative;
}
.pa-preview img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: var(--r);
  border: 1px solid var(--bo);
}
.pa-result {
  animation: slideUp .4s;
}
.pa-diag {
  padding: 16px;
  background: var(--bg);
  border-radius: var(--r);
  border: 1px solid var(--bo);
  margin-bottom: 16px;
}
.pa-issue {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin: 2px;
  background: var(--danl);
  color: var(--dan);
}
.pa-tip {
  padding: 6px 0;
  font-size: 13px;
  color: var(--t2);
  display: flex;
  gap: 8px;
}
.pa-tip i {
  color: var(--ai);
  margin-top: 2px;
  flex-shrink: 0;
}
.pa-fb {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.pa-fb button {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--bo);
  border-radius: var(--r);
  background: var(--card);
  cursor: pointer;
  font-size: 20px;
  transition: all .15s;
}
.pa-fb button:hover {
  border-color: var(--ai);
}
.pa-fb button.sel {
  border-color: var(--ok);
  background: var(--okl);
}

/* ─── Photo Analysis Tabs (QR / Upload) ─── */
.pa-tabs {
  display: flex;
  border-bottom: 2px solid var(--bo);
  margin-bottom: 20px;
}
.pa-tab {
  flex: 1;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--t3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pa-tab:hover {
  color: var(--t1);
}
.pa-tab.active {
  color: var(--ai);
  border-bottom-color: var(--ai);
}

/* ─── QR Code Area ─── */
.pa-qr-wrap {
  text-align: center;
  padding: 20px 0;
}
.pa-qr-wrap canvas,
.pa-qr-wrap img {
  margin: 0 auto;
  border-radius: 8px;
}
.pa-qr-status {
  margin-top: 16px;
  font-size: 14px;
  color: var(--t2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pa-qr-timer {
  font-size: 12px;
  color: var(--t3);
  margin-top: 8px;
}
.pa-qr-pulse {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  animation: pulse 1.5s ease infinite;
}

/* ─── Safety Banner (cw-safety) ─── */
.cw-safety {
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--bo);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--sh);
}
[data-theme="dark"] .cw-safety {
  background: rgba(30,41,59,.65);
  border-color: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cw-safety-bar {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background .15s;
  user-select: none;
}
.cw-safety-bar:hover {
  background: var(--hov);
}
[data-theme="dark"] .cw-safety-bar:hover {
  background: rgba(255,255,255,.04);
}
.cw-safety-tri {
  color: #EF4444;
  font-size: 16px;
  flex-shrink: 0;
}
.cw-safety-txt {
  font-size: 13px;
  color: var(--t2);
  flex: 1;
  line-height: 1.5;
}
.cw-safety-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--br);
  color: #fff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.cw-safety-btn:hover {
  background: var(--brh);
}
.cw-safety-chevron {
  color: var(--t3);
  font-size: 12px;
  transition: transform .2s;
  flex-shrink: 0;
  margin-left: 4px;
}
.cw-safety.open .cw-safety-chevron {
  transform: rotate(180deg);
}
.cw-safety-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.cw-safety.open .cw-safety-detail {
  max-height: 1200px;
}
.cw-safety-content {
  padding: 0 16px 16px;
  font-size: 12px;
  color: var(--t2);
  line-height: 1.7;
  border-top: 1px solid var(--bo);
}
.cw-safety-content h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
  margin: 14px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cw-safety-content h4 i {
  color: #EF4444;
  font-size: 14px;
}
.cw-safety-content ul {
  margin: 6px 0 12px;
  padding-left: 20px;
}
.cw-safety-content ul li {
  margin-bottom: 4px;
}
.cw-safety-content .warn-box {
  padding: 10px 14px;
  background: var(--danl);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 6px;
  color: var(--dan);
  font-weight: 600;
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .cw-safety-content .warn-box {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.25);
}

/* ─── Wow Animations ─── */
.laser-beam {
  height: 4px;
  background: linear-gradient(90deg, transparent, #2563EB, #7C3AED, #2563EB, transparent);
  border-radius: 2px;
  animation: laserPulse 2s ease-in-out infinite;
  margin: 24px 0;
}
.wow-card {
  animation: glowIn .6s ease-out forwards;
}
.wow-card:nth-child(2) { animation-delay: .1s; }
.wow-card:nth-child(3) { animation-delay: .2s; }
.wow-card:nth-child(4) { animation-delay: .15s; }
.wow-card:nth-child(5) { animation-delay: .25s; }
.wow-card:nth-child(6) { animation-delay: .3s; }
.wow-val {
  animation: countUp .8s cubic-bezier(.16,1,.3,1) forwards;
  opacity: 0;
}
.wow-badge {
  animation: successPop .5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: .3s;
  opacity: 0;
}
.wow-shimmer {
  background: linear-gradient(90deg, var(--bg) 25%, var(--brll) 50%, var(--bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out;
}

/* ─── Additional Missing Animations ─── */
@keyframes glowIn {
  from { opacity: 0; box-shadow: 0 0 0 rgba(37,99,235,0); }
  to { opacity: 1; box-shadow: 0 0 20px rgba(37,99,235,.15); }
}
@keyframes successPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.2); }
}
@keyframes laserPulse {
  0% { opacity: .3; transform: scaleX(.95); }
  50% { opacity: 1; transform: scaleX(1.02); }
  100% { opacity: .3; transform: scaleX(.95); }
}

/* ─── Button Styles (btn-main, btn-secondary) ─── */
.btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--br);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
.btn-main:hover {
  background: var(--brh);
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
  transform: translateY(-1px);
}
.btn-main:active {
  transform: translateY(0);
}
[data-theme="dark"] .btn-main {
  box-shadow: 0 2px 8px rgba(37,99,235,.4);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--card);
  color: var(--t1);
  border: 1px solid var(--bo);
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
}
.btn-secondary:hover {
  background: var(--hov);
  border-color: var(--br);
  color: var(--br);
}
[data-theme="dark"] .btn-secondary {
  background: rgba(30,41,59,.65);
  border-color: rgba(255,255,255,.08);
  color: var(--t1);
}
[data-theme="dark"] .btn-secondary:hover {
  background: rgba(37,99,235,.15);
  border-color: var(--br);
  color: var(--br);
}

/* ─── Guide Card Expansion ─── */
.gc-exp {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
  padding: 0 20px;
}
.gc.open .gc-exp {
  max-height: 2000px;
  padding: 0 20px 20px;
}
.gc-tgl-txt {
  font-size: 12px;
}

/* ─── LaserCalc Danger Button ─── */
.lc-btn-danger {
  color: var(--dan) !important;
}
.lc-btn-danger:hover {
  background: var(--danl) !important;
  color: var(--dan) !important;
}
[data-theme="dark"] .lc-btn-danger:hover {
  background: rgba(239,68,68,.15) !important;
}

/* ─── Notification Badge ─── */
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--dan);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ─── Accept Button (Remote Assistance) ─── */
.accept {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--ok);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.accept:hover {
  filter: brightness(1.1);
}

/* ═══════════════════════════════════════════════════════
   MISSING LAYOUT CLASSES (restored from original)
   ═══════════════════════════════════════════════════════ */

/* ─── Result Section Animation ─── */
.rs {
  animation: slideUp .4s;
}

/* ─── PK System Grid Container ─── */
.pk-sys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ─── PK System Card Sub-Elements ─── */
.pk-sys-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
  flex-shrink: 0;
  border: 1px solid var(--bo);
}
[data-theme="dark"] .pk-sys-thumb {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.08);
}
.pk-sys-info {
  flex: 1;
  min-width: 0;
}
.pk-sys-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
}
.pk-sys-desc {
  font-size: 12px;
  color: var(--t2);
  margin-bottom: 8px;
}
.pk-sys-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pk-sys-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--inp);
  color: var(--t2);
}
.pk-sys-check {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--ok);
  font-size: 16px;
  display: none;
}
.pk-sys-card.sel .pk-sys-check {
  display: block;
}

/* ─── PK Category Filters ─── */
.pk-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pk-cat-count {
  font-size: 11px;
  font-weight: 400;
  opacity: .7;
  margin-left: 4px;
}

/* ─── PK Items & Options Containers ─── */
.pk-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 0;
  animation: slideUp .3s;
}
.pk-opts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pk-opt {
  padding: 10px 20px;
  border-radius: 8px;
  border: 2px solid var(--bo);
  background: var(--card);
  color: var(--t1);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  min-width: 80px;
  text-align: center;
}
.pk-opt:hover {
  border-color: var(--br);
  background: var(--brll);
}
.pk-opt.sel {
  border-color: var(--br);
  background: var(--br);
  color: #fff;
}
[data-theme="dark"] .pk-opt {
  background: rgba(30,41,59,.65);
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .pk-opt:hover {
  border-color: var(--br);
  background: rgba(37,99,235,.15);
}
[data-theme="dark"] .pk-opt.sel {
  background: var(--br);
  border-color: var(--br);
  color: #fff;
}

/* ─── CW Step Indicator ─── */
.cw-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
  padding: 0 20px;
}
.cw-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}
.cw-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--bo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--t3);
  background: var(--card);
  position: relative;
  z-index: 2;
  transition: all .3s;
}
.cw-step.active .cw-num {
  border-color: var(--br);
  color: var(--br);
  background: var(--brll);
}
.cw-step.done .cw-num {
  border-color: var(--ok);
  color: #fff;
  background: var(--ok);
}
.cw-step.done .cw-num::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
}
.cw-step.done .cw-num span {
  display: none;
}
.cw-lbl {
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  color: var(--t3);
}
.cw-step.active .cw-lbl {
  color: var(--br);
}
.cw-step.done .cw-lbl {
  color: var(--ok);
}
.cw-sub {
  font-size: 11px;
  color: var(--t3);
}
.cw-line {
  flex: 1;
  height: 2px;
  background: var(--bo);
  margin: 0 -20px;
  position: relative;
  top: -20px;
  z-index: 1;
}
.cw-line.done {
  background: var(--ok);
}

/* ─── CW Card ─── */
.cw-card {
  background: var(--card);
  border: 1px solid var(--bo);
  border-radius: var(--rl);
  padding: 24px;
  box-shadow: var(--sh);
  margin-bottom: 24px;
}
[data-theme="dark"] .cw-card {
  background: rgba(30,41,59,.65);
  border-color: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ─── CW System Selection Grid ─── */
.cw-sys-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cw-sys {
  padding: 20px;
  border: 2px solid var(--bo);
  border-radius: var(--rl);
  cursor: pointer;
  transition: all .2s;
}
.cw-sys:hover {
  border-color: var(--br);
  box-shadow: var(--shm);
}
.cw-sys.sel {
  border-color: var(--br);
  background: var(--brll);
}
[data-theme="dark"] .cw-sys {
  background: rgba(30,41,59,.65);
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .cw-sys:hover {
  border-color: var(--br);
}
[data-theme="dark"] .cw-sys.sel {
  background: rgba(37,99,235,.15);
  border-color: var(--br);
}
.cw-sys-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.cw-sys-desc {
  font-size: 12px;
  color: var(--t2);
  margin-bottom: 10px;
}

/* ─── CW Badges ─── */
.cw-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 6px;
}
.cw-badge.pw {
  background: var(--inp);
  color: var(--t1);
}
.cw-badge.tp {
  color: #fff;
}
.cw-badge.src {
  background: var(--inp);
  color: var(--t2);
}

/* ─── CW Radio Buttons ─── */
.cw-radio {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cw-radio label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--bo);
  border-radius: var(--r);
  cursor: pointer;
  transition: all .15s;
  font-size: 14px;
}
.cw-radio label:hover {
  border-color: var(--br);
}
.cw-radio label.sel {
  border-color: var(--br);
  background: var(--brll);
}
.cw-radio label input {
  width: 18px;
  height: 18px;
  accent-color: var(--br);
}
.cw-radio-info {
  margin-left: auto;
  font-size: 12px;
  color: var(--t2);
}

/* ─── CW Results Grid ─── */
.cw-res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.cw-res-card {
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--bo);
  border-radius: var(--r);
}
[data-theme="dark"] .cw-res-card {
  background: rgba(15,23,42,.5);
  border-color: rgba(255,255,255,.06);
}
.cw-res-lbl {
  font-size: 12px;
  color: var(--t2);
  margin-bottom: 4px;
}
.cw-res-val {
  font-size: 28px;
  font-weight: 700;
}
.cw-res-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--t2);
  margin-left: 2px;
}
.cw-res-range {
  font-size: 11px;
  color: var(--t3);
  margin-top: 4px;
}

/* ─── CW AI Section ─── */
.cw-ai {
  background: var(--bg);
  border: 1px solid var(--bo);
  border-radius: var(--rl);
  margin-top: 20px;
  overflow: hidden;
}
[data-theme="dark"] .cw-ai {
  background: rgba(15,23,42,.5);
  border-color: rgba(255,255,255,.06);
}
.cw-ai-h {
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 14px;
}
.cw-ai-h:hover {
  background: var(--inp);
}
[data-theme="dark"] .cw-ai-h:hover {
  background: rgba(255,255,255,.04);
}
.cw-ai-b {
  padding: 0 20px 20px;
  font-size: 13px;
  color: var(--t2);
  line-height: 1.8;
  display: none;
}
.cw-ai.open .cw-ai-b {
  display: block;
}

/* ─── CW Button Groups & Navigation ─── */
.cw-btns {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 20px;
}
.cw-btns .bo {
  flex: 1;
  justify-content: center;
}
.cw-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

/* ─── pk-opt.active (used in settings instead of .sel) ─── */
.pk-opt.active {
  border-color: var(--br);
  background: var(--br);
  color: #fff;
}
[data-theme="dark"] .pk-opt.active {
  background: var(--br);
  border-color: var(--br);
  color: #fff;
}

/* ─── Machine Form Inputs (class="si" on input/select elements) ─── */
input.si,
select.si,
textarea.si {
  width: 100%;
  padding: 10px 14px;
  background: var(--inp);
  border: 1px solid var(--bo);
  border-radius: var(--r);
  color: var(--t1);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: all .15s;
  display: block;
  height: auto;
  justify-content: initial;
  margin-bottom: 0;
}
input.si:focus,
select.si:focus,
textarea.si:focus {
  outline: none;
  border-color: var(--br);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
[data-theme="dark"] input.si,
[data-theme="dark"] select.si,
[data-theme="dark"] textarea.si {
  background: rgba(30,41,59,.8);
  border-color: rgba(255,255,255,.1);
  color: var(--t1);
}
[data-theme="dark"] input.si:focus,
[data-theme="dark"] select.si:focus {
  border-color: var(--br);
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}

/* ─── Responsive Overrides for CW ─── */
@media (max-width: 768px) {
  .cw-sys-grid {
    grid-template-columns: 1fr;
  }
  .cw-res-grid {
    grid-template-columns: 1fr;
  }
  .cw-steps {
    padding: 0;
  }
}