/* --- block 1 --- */

@keyframes _bootPulse{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}
@keyframes _bootSpin{to{transform:rotate(360deg)}}
#bootSplash{position:fixed;inset:0;z-index:2147483647;background:radial-gradient(ellipse at 50% 35%,rgba(212,175,106,.10),transparent 60%),#0A0A0F;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-family:'Satoshi',system-ui,sans-serif;color:#D4AF6A;transition:opacity .35s ease}
#bootSplash.is-hiding{opacity:0;pointer-events:none}
#bootSplash .bs-mark{font-family:'Cinzel','Playfair Display',serif;font-size:22px;letter-spacing:.32em;font-weight:500;color:#D4AF6A;animation:_bootPulse 1.6s ease-in-out infinite}
#bootSplash .bs-sub{font-size:9px;letter-spacing:.42em;font-weight:500;text-transform:uppercase;color:rgba(212,175,106,.55)}
#bootSplash .bs-spin{width:18px;height:18px;border:1.5px solid rgba(212,175,106,.18);border-top-color:#D4AF6A;border-radius:50%;animation:_bootSpin .9s linear infinite;margin-top:4px}
html.light-theme #bootSplash{background:radial-gradient(ellipse at 50% 35%,rgba(184,154,80,.12),transparent 60%),#F4F2EC;color:#8B7340}
html.light-theme #bootSplash .bs-mark{color:#8B7340}
html.light-theme #bootSplash .bs-sub{color:rgba(139,115,64,.6)}
html.light-theme #bootSplash .bs-spin{border-color:rgba(139,115,64,.2);border-top-color:#8B7340}

/* --- block 2 --- */

/* Voice input mic button (speech-to-text on hotel/excursion/transfer/client fields) */
.voice-mic-btn{width:30px;height:30px;border-radius:6px;border:1px solid var(--bd);background:transparent;color:var(--tx3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0;padding:0}
.voice-mic-btn:hover{border-color:var(--bd-gold);color:var(--gold);background:rgba(196,165,90,.04)}
.voice-mic-btn.voice-active{animation:voicePulse 1s ease-in-out infinite}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(196,165,90,.2)}50%{box-shadow:0 0 0 6px rgba(196,165,90,0)}}
.voice-wrap{display:flex;gap:4px;align-items:center}
.voice-wrap>input{flex:1;min-width:0}
:root{
  --bg-primary:#06060A;--bg-secondary:rgba(18,18,24,.55);--bg-tertiary:rgba(28,28,36,.45);--bg-elevated:rgba(40,40,52,.5);
  --bg-glass:rgba(16,16,22,.52);
  --glass:rgba(255,255,255,.04);--glass-h:rgba(255,255,255,.07);--glass-a:rgba(255,255,255,.10);
  --gold:#D4AF6A;--gold-light:#E4C284;--gold-dark:#A8854A;--gold-muted:rgba(212,175,106,.08);--gold-glow:rgba(212,175,106,.20);
  --tx:#F2F2F7;--tx2:#98989F;--tx3:#636366;--tx-on-gold:#0A0A0A;
  --bd:rgba(255,255,255,.08);--bd-h:rgba(255,255,255,.15);--bd-gold:rgba(212,175,106,.22);
  --bd-glass:rgba(255,255,255,.12);
  --success:#30D158;--warn:#FF9F0A;--danger:#FF453A;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.04) inset;
  --shadow:0 8px 40px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.06) inset;
  --shadow-lg:0 32px 80px rgba(0,0,0,.55),0 12px 32px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06) inset;
  --shadow-gold:0 8px 36px rgba(212,175,106,.22),0 1px 0 rgba(255,255,255,.12) inset;
  --blur:blur(40px) saturate(200%);
  --r-sm:12px;--r:16px;--r-lg:22px;--r-xl:28px;
  --fh:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fb:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fa:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ============================================================================
   QuoteGen — Aurora Design System
   Dual-mode tokens (Aurora Dark + Aurora Light)
   ============================================================================ */

/* --- Dark mode (default) -------------------------------------------------- */
:root {
  /* Base surfaces */
  --ink:            #06060B;
  --ink-2:          #0C0C14;
  --ink-3:          #14141F;
  --glass:          rgba(16, 16, 22, .55);
  --glass-hi:       rgba(22, 22, 30, .72);
  --glass-lo:       rgba(10, 10, 14, .40);
  --paper:          rgba(255,255,255,.04);

  /* Brand anchor */
  --gold:           #D4AF6A;
  --gold-hi:        #E8C98A;
  --gold-lo:        #A8854A;
  --gold-glow:      rgba(212, 175, 106, .28);
  --gold-wash:      rgba(212, 175, 106, .08);

  /* Aurora accents */
  --spark:          #6EE7FF;
  --spark-glow:     rgba(110, 231, 255, .25);
  --violet:         #A78BFA;
  --violet-glow:    rgba(167, 139, 250, .22);
  --rose:           #F472B6;
  --rose-glow:      rgba(244, 114, 182, .20);

  /* Semantic */
  --success:        #30D158;
  --success-wash:   rgba(48, 209, 88, .14);
  --warn:           #FFB224;
  --warn-wash:      rgba(255, 178, 36, .14);
  --danger:         #FF453A;
  --danger-wash:    rgba(255, 69, 58, .14);

  /* Text */
  --fg-1:           #F2F2F7;
  --fg-2:           #98989F;
  --fg-3:           #636369;
  --fg-on-gold:     #0A0A0A;

  /* Borders */
  --bd:             rgba(255,255,255,.08);
  --bd-hi:          rgba(255,255,255,.16);
  --bd-gold:        rgba(212,175,106,.30);

  /* Radius */
  --r-xs:  8px;
  --r-sm:  12px;
  --r:     16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-2xl: 36px;

  /* Shadow (ambient, lifted, gold-glow, inner) */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.05) inset;
  --shadow:      0 8px 40px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.06) inset;
  --shadow-lg:   0 32px 80px rgba(0,0,0,.55), 0 12px 32px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08) inset;
  --shadow-gold: 0 0 48px var(--gold-glow), 0 8px 36px rgba(212,175,106,.22), 0 1px 0 rgba(255,255,255,.10) inset;
  --shadow-spark:0 0 48px var(--spark-glow), 0 8px 36px rgba(110,231,255,.18);

  --blur:      blur(40px) saturate(180%);
  --blur-lg:   blur(60px) saturate(200%);

  /* Type — one family. Single sans-serif across the whole admin panel. */
  --font-display: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:      'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Timing */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in:  cubic-bezier(.5, 0, .75, 0);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Aurora gradient (living background) */
  --aurora:
    radial-gradient(ellipse 80% 60% at 18% 8%,  rgba(167,139,250,.12), transparent 60%),
    radial-gradient(ellipse 70% 55% at 82% 92%, rgba(110,231,255,.09), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212,175,106,.07), transparent 60%);
}

/* --- Light mode ----------------------------------------------------------- */
[data-mode="light"] {
  --ink:            #F5F2EB;
  --ink-2:          #EDE8DD;
  --ink-3:          #E4DDC9;
  --glass:          rgba(255,255,255,.72);
  --glass-hi:       rgba(255,255,255,.85);
  --glass-lo:       rgba(255,255,255,.55);
  --paper:          rgba(0,0,0,.03);

  --gold:           #9A7830;
  --gold-hi:        #B8903E;
  --gold-lo:        #7A5E22;
  --gold-glow:      rgba(154, 120, 48, .22);
  --gold-wash:      rgba(154, 120, 48, .06);

  --spark:          #0EA5E9;
  --spark-glow:     rgba(14, 165, 233, .20);
  --violet:         #7C3AED;
  --violet-glow:    rgba(124, 58, 237, .18);
  --rose:           #DB2777;
  --rose-glow:      rgba(219, 39, 119, .18);

  --success:        #15803D;
  --warn:           #B45309;
  --danger:         #B91C1C;

  --fg-1:           #1A1717;
  --fg-2:           #5A564F;
  --fg-3:           #8B8680;
  --fg-on-gold:     #FFFFFF;

  --bd:             rgba(10, 8, 4, .08);
  --bd-hi:          rgba(10, 8, 4, .16);
  --bd-gold:        rgba(154, 120, 48, .35);

  --shadow-sm:   0 2px 8px rgba(60,40,10,.06), 0 1px 0 rgba(255,255,255,.8) inset;
  --shadow:      0 12px 40px rgba(60,40,10,.08), 0 2px 10px rgba(60,40,10,.06), 0 1px 0 rgba(255,255,255,.9) inset;
  --shadow-lg:   0 32px 80px rgba(60,40,10,.14), 0 1px 0 rgba(255,255,255,.95) inset;
  --shadow-gold: 0 0 48px var(--gold-glow), 0 8px 36px rgba(154,120,48,.18);
  --shadow-spark:0 0 48px var(--spark-glow);

  --aurora:
    radial-gradient(ellipse 80% 60% at 18% 8%,  rgba(124, 58, 237, .08), transparent 60%),
    radial-gradient(ellipse 70% 55% at 82% 92%, rgba(14, 165, 233, .07), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(154, 120, 48, .06), transparent 60%);
}

/* ============================================================================
   Semantic base styles
   ============================================================================ */

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body {
  margin: 0; padding: 0;
  background: var(--ink);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: -.005em;
  font-weight: 400;
}
/* Single Satoshi family across every UI element — no variation-settings. */
input, select, textarea, button, .aurora-btn, .aurora-badge, .aurora-input input,
.sidebar__item, .tab, .eyebrow, .mono, .role-chip, .pill-kv, td, th,
.h-display, .h1, .num-display, .page-head__title, .section__title,
h1, h2, h3, .stat__num, .dest-tile__name {
  font-variation-settings: normal;
  font-family: var(--font-ui);
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background: var(--aurora);
  pointer-events: none;
  z-index: 0;
  animation: aurora-drift 40s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.05); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Type semantic — Fraunces across the board, opsz does the size work */
.h-display {
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: .95;
  letter-spacing: -.04em;
}
.h1 { font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1.02; letter-spacing: -.035em; }
.h2 { font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -.025em; }
.h3 { font-weight: 500; font-size: 18px; line-height: 1.25; letter-spacing: -.015em; }
.p  { font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--fg-2); letter-spacing: -.005em; }
.p-lg { font-size: 16px; line-height: 1.55; color: var(--fg-2); letter-spacing: -.005em; }
.eyebrow {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .20em;
  color: var(--fg-3);
  font-feature-settings: "ss01";
}
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; font-weight: 400; }
.num-display {
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--gold);
}

/* Glass surface util */
.glass {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  position: relative;
}
.glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 45%);
  pointer-events: none;
}

/* ───────── THEME SYSTEM ─────────
   Theme variables live in JS (QG_THEMES) and are applied to :root by applyTheme().
   The early-paint script in <head> tags <html> with `light-theme`/`dark-theme` plus
   `theme-<id>` so native widgets (scrollbars, form controls) flip from frame 1.
   The CSS below consumes the variables so every element re-themes instantly. */
html.light-theme{color-scheme:light}
html.dark-theme{color-scheme:dark}
/* Unified scrollbar — gold, thin, transparent track. Applies everywhere unless
 * a specific element override sets the same colours (kept consistent below). */
*{scrollbar-width:thin;scrollbar-color:#C4A55A rgba(255,255,255,0.05)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C4A55A;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#E4C284}
/* Body, nav, tabs */
html body{background:var(--bg-primary);color:var(--tx)}
.nav{background:var(--nav-bg);border-bottom:1px solid var(--nav-bd)}
.nav .brand{color:var(--nav-brand)}
.nav .brand small{color:var(--nav-brand)}
.nav .tabs{background:rgba(128,128,128,.06)}
.nav .tab{color:var(--nav-tab-inactive);background:transparent}
.nav .tab.active{background:var(--nav-tab-active);color:var(--nav-tab-tx)}
.nav .agent{border-color:var(--nav-pill-bd,var(--bd-gold));color:var(--nav-pill-tx,var(--nav-brand));background:var(--nav-pill-bg,transparent)}
/* Buttons */
.btn{background:var(--btn-grad);color:var(--btn-tx)}
.btn.ghost{background:transparent;border-color:var(--btn-ghost-bd);color:var(--btn-ghost-tx)}
.btn.ghost:hover{border-color:var(--btn-ghost-hover-bd);color:var(--btn-ghost-hover-tx);background:rgba(128,128,128,.03)}
/* Inputs */
input,textarea,select{background:var(--input-bg);border-color:var(--input-bd);color:var(--input-tx)}
input::placeholder,textarea::placeholder{color:var(--input-placeholder)}
input:focus,textarea:focus,select:focus{border-color:var(--input-focus-bd);box-shadow:0 0 0 3px rgba(128,128,128,.06)}
/* Admin chrome */
.adm-btn{background:var(--bg-tertiary);border-color:var(--bd);color:var(--tx)}
.adm-btn.ghost{background:transparent}
.adm-btn:hover{background:var(--bg-tertiary)}
.adm-tab{background:transparent;color:var(--tx3);border-color:transparent}
.adm-tab.active{background:var(--card-bg);color:var(--stat-accent,var(--gold));border-color:var(--bd)}
/* Modals */
#modal .modal-content,.modal-content{background:var(--modal-bg);border-color:var(--modal-bd)}
/* Card surfaces — only adds a subtle shadow on themes that opt in */
.card,.adm-panel{box-shadow:var(--card-shadow,none)}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Enhanced focus visibility for keyboard navigation */
*:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible,.tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Smooth scroll */
html{scroll-behavior:smooth}
html{color-scheme:dark}
html,body{margin:0;padding:0;background:var(--bg-primary);color:var(--tx);font-family:var(--fb);font-size:14px;letter-spacing:-.012em}
body{background:
  radial-gradient(ellipse 80% 60% at 20% 10%,rgba(212,175,106,.07),transparent),
  radial-gradient(ellipse 60% 50% at 80% 90%,rgba(100,80,160,.06),transparent),
  radial-gradient(ellipse 50% 40% at 50% 50%,rgba(60,60,100,.05),transparent),
  var(--bg-primary)}
h1,h2,h3,h4{font-family:var(--fh);letter-spacing:.02em;margin:0}
button{font-family:var(--fb)}
input,textarea,select{font-family:var(--fb)}

/* TOP NAV — liquid glass */
.nav{height:68px;background:var(--bg-glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--bd-glass);display:flex;align-items:center;padding:0 28px;gap:24px;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 32px rgba(0,0,0,.3)}
.nav .brand{font-family:var(--fh);font-size:34px;color:var(--gold);font-weight:700;letter-spacing:.04em;line-height:.92;display:flex;flex-direction:column;align-items:center;text-align:center;padding-right:18px;border-right:1px solid rgba(255,255,255,.08);margin-right:8px}
.nav .brand small{display:block;font-family:var(--fb);font-size:9px;color:var(--gold);opacity:.65;letter-spacing:.42em;text-transform:uppercase;margin-top:6px;font-weight:500;text-align:center}
.nav .tabs{display:flex;gap:3px;margin-left:28px;background:rgba(255,255,255,.04);backdrop-filter:blur(12px);padding:5px;border-radius:14px;border:1px solid var(--bd)}
.nav .tab{padding:8px 18px;background:transparent;border:0;color:var(--tx2);cursor:pointer;font-size:12px;border-radius:10px;letter-spacing:.01em;font-weight:500;transition:all .3s cubic-bezier(.2,.8,.2,1)}
.nav .tab.active{background:rgba(255,255,255,.10);color:var(--tx);box-shadow:0 2px 8px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.08) inset;backdrop-filter:blur(8px)}
.nav .tab:hover:not(.active){color:var(--tx);background:rgba(255,255,255,.05)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--tx2);font-size:12px;font-weight:500}
.nav .agent{padding:8px 16px;border:1px solid var(--bd-gold);border-radius:100px;color:var(--gold);background:var(--gold-muted);backdrop-filter:blur(8px);cursor:pointer;font-weight:500;transition:all .3s}
.nav .agent:hover{background:rgba(212,175,106,.16);box-shadow:0 4px 16px rgba(212,175,106,.15)}

/* LAYOUT */
.view{display:none}
.view.active{display:block}

/* DASHBOARD */
.dash{padding:32px 56px 48px;max-width:1400px;margin:0 auto}
.dash h1{font-family:var(--fh);font-size:52px;color:var(--tx);margin-bottom:10px;font-weight:500;letter-spacing:-.03em;line-height:1.02}
.dash .sub{color:var(--tx2);margin-bottom:36px;font-size:15px;font-weight:400;letter-spacing:-.01em}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:36px}
.stat{background:var(--bg-secondary);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--bd-glass);border-radius:var(--r-xl);padding:28px 28px;box-shadow:var(--shadow);transition:all .35s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 50%);pointer-events:none}
.stat:hover{border-color:var(--bd-h);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat .n{font-family:var(--fh);font-size:46px;color:var(--gold);font-weight:500;letter-spacing:-.03em;line-height:1;position:relative}
.stat .l{font-size:10.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.16em;margin-top:10px;font-weight:600;position:relative}
.dash-actions{display:flex;gap:12px;margin-bottom:24px;align-items:center}
.dash-actions input{flex:1;max-width:380px}
.qtable{width:100%;border-collapse:collapse;background:var(--bg-secondary);backdrop-filter:var(--blur);border:1px solid var(--bd-glass);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow)}
.qtable th{background:rgba(255,255,255,.03);color:var(--tx3);text-align:left;padding:18px 22px;font-size:10px;text-transform:uppercase;letter-spacing:.16em;font-weight:600;border-bottom:1px solid var(--bd)}
.qtable td{padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.04);font-size:13.5px;color:var(--tx2);font-weight:400}
.qtable tr{transition:all .2s}
.qtable tr:hover td{background:rgba(255,255,255,.03);color:var(--tx)}
.qtable tr:last-child td{border-bottom:0}
.badge{display:inline-block;padding:5px 13px;border-radius:100px;font-size:10px;letter-spacing:.06em;font-weight:600;border:1px solid transparent;backdrop-filter:blur(6px)}
.badge.draft{background:rgba(112,112,112,.15);color:var(--tx2);border-color:rgba(112,112,112,.2)}
.badge.sent{background:rgba(52,152,219,.12);color:#5dade2;border-color:rgba(52,152,219,.2)}
.badge.accepted{background:rgba(46,204,113,.12);color:var(--success);border-color:rgba(46,204,113,.2)}
.badge.expired{background:rgba(243,156,18,.12);color:var(--warn);border-color:rgba(243,156,18,.2)}
.badge.cancelled{background:rgba(231,76,60,.12);color:var(--danger);border-color:rgba(231,76,60,.2)}

/* EDITOR */
.editor{display:grid;grid-template-columns:var(--panel-w,calc(50vw - 3px)) 6px 1fr;height:calc(100vh - 68px)}
.splitter{background:transparent;cursor:col-resize;position:relative;transition:background .2s}
.splitter:hover,.splitter.dragging{background:var(--gold-muted)}
.splitter:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3px;height:48px;background:var(--bd-h);border-radius:3px;transition:background .2s}
.splitter:hover:before,.splitter.dragging:before{background:var(--gold)}
.panel{background:var(--bg-secondary);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-right:1px solid var(--bd-glass);overflow-y:auto;padding:28px 26px}
.panel h3{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.18em;margin:32px 0 14px;padding-bottom:0;border-bottom:0;display:flex;justify-content:space-between;align-items:center;font-family:var(--fb);font-weight:600}
.panel h3:first-child{margin-top:0}
.ed-section{margin-top:8px;border:1px solid var(--bd);border-radius:14px;padding:16px 18px;background:rgba(255,255,255,.015);transition:border-color .3s}
.ed-section:hover{border-color:var(--bd-gold)}
.ed-section h3{margin-top:0!important;font-size:12px;color:var(--gold);letter-spacing:.14em;padding:10px 0 12px;border-bottom:1px solid var(--bd);margin-bottom:14px;gap:8px}
.ed-section h3 svg{flex-shrink:0}
.ed-section h3 .sec-title{flex:1}
.panel label{display:block;font-size:11px;color:var(--tx3);text-transform:none;letter-spacing:-.005em;margin:12px 0 6px;font-weight:500}
input,textarea,select{width:100%;padding:12px 16px;background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:var(--r-sm);color:var(--tx);font-size:13px;font-family:var(--fb);outline:none;transition:all .3s cubic-bezier(.2,.8,.2,1);letter-spacing:-.005em;backdrop-filter:blur(6px)}
input::placeholder,textarea::placeholder{color:var(--tx3);font-weight:400}
input:hover:not(:focus),textarea:hover:not(:focus),select:hover:not(:focus){border-color:var(--bd-h);background:rgba(255,255,255,.06)}
input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-glow),0 0 20px rgba(212,175,106,.06);background:rgba(255,255,255,.07)}
textarea{resize:vertical;min-height:80px}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2398989F' d='M2 4l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;color-scheme:dark}
input[type="date"],input[type="time"]{color-scheme:dark!important}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(2)!important;opacity:1!important;cursor:pointer}
input[type="date"]::-ms-clear,input[type="time"]::-ms-clear{filter:invert(1)!important}
input[type="date"]::-webkit-datetime-edit,input[type="time"]::-webkit-datetime-edit{color:#F2F2F7!important}
input[type="date"]::-webkit-datetime-edit-fields-wrapper,input[type="time"]::-webkit-datetime-edit-fields-wrapper{color:#F2F2F7!important}
input[type="date"]::-webkit-datetime-edit-text,input[type="time"]::-webkit-datetime-edit-text{color:#636366!important}
input[type="date"]::-webkit-inner-spin-button,input[type="time"]::-webkit-inner-spin-button{filter:invert(1)!important}
select option,select optgroup{background:#18181E;color:#F2F2F7}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

.btn{background:var(--gold);color:var(--tx-on-gold);border:0;padding:12px 24px;border-radius:100px;cursor:pointer;font-weight:600;font-size:13px;letter-spacing:.01em;transition:all .3s cubic-bezier(.2,.8,.2,1);font-family:var(--fb);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 4px 16px rgba(212,175,106,.2)}
.btn:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 32px rgba(212,175,106,.3)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--glass);border:1px solid var(--bd-glass);color:var(--tx);box-shadow:0 1px 0 rgba(255,255,255,.04) inset;backdrop-filter:blur(8px)}
.btn.ghost:hover{background:var(--glass-a);border-color:var(--gold);color:var(--gold);transform:translateY(-2px);box-shadow:0 4px 16px rgba(212,175,106,.12)}
.btn.danger{background:rgba(255,69,58,.85);color:#fff;backdrop-filter:blur(6px);box-shadow:0 4px 16px rgba(255,69,58,.2)}
.btn.sm{padding:6px 14px;font-size:11px;font-weight:500}
.btn.full{width:100%;margin-top:10px}

.item{background:var(--glass);border:1px solid var(--bd);border-radius:var(--r);padding:16px 18px;margin-top:12px;transition:all .3s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(8px);position:relative;overflow:hidden}
.item::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 60%);pointer-events:none}
.item:hover{border-color:var(--bd-h);background:var(--glass-h);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.item .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;position:relative}
.item .top b{color:var(--tx);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-family:var(--fb)}
.del{background:rgba(255,69,58,.1);color:var(--danger);border:1px solid rgba(255,69,58,.2);padding:5px 13px;border-radius:100px;cursor:pointer;font-size:10px;font-weight:600;letter-spacing:.04em;transition:all .2s;backdrop-filter:blur(4px)}
.del:hover{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:0 4px 12px rgba(255,69,58,.25)}

.warn-box{background:rgba(255,159,10,.06);border:1px solid rgba(255,159,10,.2);color:var(--warn);padding:12px 16px;border-radius:var(--r-sm);font-size:11.5px;margin-top:8px;font-weight:500;backdrop-filter:blur(6px)}

/* hotel autocomplete */
.hsug{position:relative}
.hsug-list{position:absolute;top:100%;left:0;right:0;background:rgba(24,24,32,.85);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--bd-glass);border-radius:var(--r);box-shadow:var(--shadow-lg);max-height:260px;overflow-y:auto;z-index:30;margin-top:4px}
.hsug-item{display:flex;gap:10px;padding:10px 12px;cursor:pointer;align-items:center;border-bottom:1px solid rgba(255,255,255,.04);transition:all .2s}
.hsug-item:last-child{border-bottom:0}
.hsug-item:hover{background:var(--gold-muted)}
.hsug-item img{width:46px;height:36px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#222}
.hsug-item .info{flex:1;min-width:0}
.hsug-item .info b{display:block;color:var(--tx);font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsug-item .info small{display:block;color:var(--tx3);font-size:10.5px;margin-top:2px}

.actions-bar{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,rgba(12,12,16,.9) 30%);backdrop-filter:blur(12px);padding:20px 0 6px;margin-top:24px;border-top:1px solid var(--bd);display:flex;gap:12px;flex-wrap:wrap;row-gap:10px}
.actions-bar .btn{flex:1;min-width:120px}

/* PREVIEW */
.preview{background:var(--bg-primary);overflow:auto;padding:30px;min-height:100%}
#preview{display:flex;flex-direction:column;align-items:center;min-width:min-content}
.preview-toolbar{width:210mm;max-width:100%;margin:0 auto 16px;display:flex;justify-content:space-between;align-items:center;color:var(--tx3);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em}
.preview-toolbar span{color:var(--gold)}

/* PDF PAGE — white client-facing, premium */
.page{width:210mm;min-height:auto;height:auto;background:#fff;color:#1a1a1a;margin:0 auto 12px;padding:14mm 16mm;box-shadow:0 24px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05);font-family:var(--fb);font-size:10pt;position:relative;letter-spacing:-.005em;border-radius:2px;overflow:visible;display:block;box-sizing:border-box}
.page:empty{display:none}
.page .hdr{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid #eaddc0}
.page .hdr .agency{font-family:var(--fh);font-size:24pt;color:#1a1a1a;font-weight:500;line-height:1.02;letter-spacing:-.025em;font-variation-settings:"opsz" 144,"SOFT" 30}
.page .hdr .agency small{display:block;font-family:var(--fb);font-size:8.5pt;color:#888;font-weight:400;margin-top:6px;letter-spacing:.02em}
.page .hdr .qi{text-align:right;font-size:8.5pt;color:#666;line-height:1.7;font-weight:400}
.page .hdr .qi b{color:var(--gold-dark);font-family:var(--fb);font-size:9pt;display:block;margin-bottom:4px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.page .logo{max-height:189px;max-width:630px;margin:0;display:block;object-fit:contain}

.page .title{text-align:center;margin:6px 0 6px}
.page .title h1{font-family:var(--fh);font-size:32pt;color:#1a1a1a;font-weight:400;margin:0;letter-spacing:-.035em;line-height:1.05;font-variation-settings:"opsz" 144,"SOFT" 30}
.page .title p{margin:8px 0 0;color:#888;font-size:10pt;font-weight:300;letter-spacing:.02em;font-family:var(--fa);font-style:italic}
.page .hero{width:100%;max-width:100%;height:auto;max-height:120mm;min-height:55mm;object-fit:cover;border-radius:12px;margin-bottom:8px;display:block}
.page .hero-ph{width:100%;height:60mm;background:linear-gradient(135deg,#C9A84C,#A88B3D);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fh);font-size:20pt;border-radius:18px;margin-bottom:12px}

.page .clientbox{background:#fafaf7;border:1px solid #eee8d5;padding:14px 18px;border-radius:14px;margin-bottom:14px;font-size:9.5pt;line-height:1.75;color:#444}
.page .clientbox b{color:#1a1a1a;font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:8pt;display:inline-block;margin-right:4px}

.page .sect{margin:8px 0}
.page .sect:first-child{margin-top:0}
.page .sect:last-child{margin-bottom:0}
.page .sect h2{font-family:var(--fh);font-size:17pt;color:#1a1a1a;padding-bottom:8px;margin:0 0 12px;font-weight:500;letter-spacing:-.025em;border-bottom:1px solid #eaeaea;font-variation-settings:"opsz" 144,"SOFT" 30}


/* Flights — compact table (for 3+ sectors) */
.page .flights-table{width:100%;border-collapse:collapse;border:1px solid #eaddc0;border-radius:8px}
.page .flights-table th{background:rgba(212,175,106,.06);padding:8px 12px;font-size:7.5pt;color:#8B6B3A;text-align:left;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.page .flights-table td{padding:10px 12px;border-top:1px solid #f0ebe0;font-size:9pt;color:#333;vertical-align:top}
.page .flights-table .fl-leg{color:#8B6B3A;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:8pt}
.page .flights-table .fl-route b{color:#1a1a1a;font-size:10pt}
.page .flights-table .fl-route .fl-name{display:block;font-size:8pt;color:#999;font-style:italic;margin-top:2px}

/* Flights — hero mode (for 2 sectors only) */
.page .fl-hero-title{font-family:var(--fh);font-size:22pt;color:#1a1a1a;font-weight:500;text-align:center;margin:0 0 4px;letter-spacing:-.02em}
.page .fl-hero-sub{text-align:center;font-size:9.5pt;color:#888;margin-bottom:28px}
.page .fl-hero-card{border:1px solid #eaddc0;border-radius:14px;background:#fafaf7;padding:28px 24px 22px;margin-bottom:20px;page-break-inside:avoid}
.page .fl-hero-label{font-size:7.5pt;color:#8B6B3A;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px}
.page .fl-hero-route{display:table;width:100%;margin-bottom:14px}
.page .fl-hero-route .fl-h-from,.page .fl-hero-route .fl-h-to{display:table-cell;width:38%;max-width:38%;vertical-align:middle}
.page .fl-hero-route .fl-h-mid{display:table-cell;width:24%;min-width:20%;text-align:center;vertical-align:middle;padding:0 8px}
.page .fl-h-code{font-size:13px!important;font-weight:700;color:#1a1a1a;letter-spacing:.06em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:480px){.page .fl-h-code{font-size:12px!important}}
.page .fl-h-city{font-size:8pt;color:#999;margin-top:4px;letter-spacing:.01em}
.page .fl-h-to{text-align:right}
.page .fl-h-to .fl-h-code,.page .fl-h-to .fl-h-city{text-align:right}
.page .fl-h-line{display:block;width:100%;height:1px;background:linear-gradient(90deg,#D4AF6A 50%,transparent 50%);background-size:8px 1px;margin-bottom:6px}
.page .fl-h-icon{display:block;text-align:center;line-height:1}
.page .fl-h-logo{display:block;text-align:center;margin-bottom:6px}
.page .fl-h-logo img{height:auto;width:auto;max-width:36px;max-height:16px;object-fit:contain;display:inline-block}
.page .fl-h-logo .fl-al-badge{display:inline-block;font-size:6.5pt;color:#8B6B3A;background:rgba(212,175,106,.1);border:1px solid rgba(212,175,106,.2);padding:2px 8px;border-radius:100px;font-weight:600;letter-spacing:.04em}
.page .fl-h-dur{display:block;text-align:center;margin-top:4px;font-size:7.5pt;color:#999;letter-spacing:.04em;font-weight:500}
.page .fl-hero-meta{display:table;width:100%;border-top:1px solid #eee8d5;padding-top:12px}
.page .fl-hero-meta .fl-hm{display:table-cell;text-align:center;width:25%}
.page .fl-hero-meta .fl-hm-label{font-size:6.5pt;color:#bbb;text-transform:uppercase;letter-spacing:.12em;margin-bottom:2px}
.page .fl-hero-meta .fl-hm-value{font-size:10pt;color:#1a1a1a;font-weight:600}
.page .fl-hero-note{text-align:center;font-size:7.5pt;color:#bbb;font-style:italic;margin-top:16px;letter-spacing:.02em}

/* Hotels — stable two-column table layout */
.page .hotelgrid{display:block}
.page .hotel{border:1px solid #eee8d5;border-radius:12px;margin-bottom:14px;page-break-inside:avoid;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.04);overflow:visible}
.page .hotel table.h-layout{width:100%;border-collapse:collapse}
.page .hotel .h-img-cell{width:40%;vertical-align:top;padding:0}
.page .hotel .h-img-cell img{width:100%;height:auto;max-height:50mm;object-fit:contain;display:block;border-radius:12px 0 0 12px;background:#f5f3ee}
/* Hotel gallery — hero (180px) + clickable thumbnail strip. Visible on the
 * editor preview AND the client share viewer. PDF generation falls back to
 * the existing single-image side cell so the PDF stays clean. */
.page .h-gallery-screen{display:block;margin-bottom:0}
.page .hotel.hotel-has-gallery .h-img-cell{display:none}
.page .hotel.hotel-has-gallery .h-detail-cell{display:block;width:100%}
.page .hotel.hotel-has-gallery>table.h-layout{margin:0}
.h-thumb-strip::-webkit-scrollbar{height:2px}
.h-thumb-strip::-webkit-scrollbar-track{background:transparent}
.h-thumb-strip::-webkit-scrollbar-thumb{background:#C4A55A;border-radius:2px}
@media print{
  .page .h-gallery-screen{display:none!important}
  .page .hotel.hotel-has-gallery .h-img-cell{display:table-cell}
  .page .hotel.hotel-has-gallery .h-detail-cell{display:table-cell;width:auto}
}
.page .hotel .h-detail-cell{vertical-align:top;padding:14px 16px}
.page .hotel .h-name{font-family:var(--fh);font-size:13pt;font-weight:600;color:#1a1a1a;letter-spacing:-.015em;margin:0 0 4px;line-height:1.2}
.page .hotel .h-stars{color:#D4AF6A;font-size:8pt;letter-spacing:2px;margin-bottom:4px}
.page .hotel .h-loc{font-size:8pt;color:#999;margin-bottom:6px}
.page .hotel .h-meta{display:block;margin-bottom:8px}
.page .hotel .h-pill{display:inline-block;font-size:6.5pt;color:#8B6B3A;background:rgba(212,175,106,.1);border:1px solid rgba(212,175,106,.2);padding:3px 9px;border-radius:100px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-right:6px}
.page .hotel .h-highlights{margin:0;padding:0;list-style:none;font-size:8pt;color:#555;line-height:1.65}
.page .hotel .h-highlights li{padding:2px 0 2px 14px;position:relative}
.page .hotel .h-highlights li:before{content:'';position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background:#D4AF6A}

/* Excursion Cards */
.page .excursion{border:1px solid #eee8d5;border-radius:12px;margin-bottom:14px;page-break-inside:avoid;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.04)}
.page .excursion table.exc-layout{width:100%;border-collapse:collapse}
.page .excursion .exc-img-cell{width:38%;vertical-align:top;padding:0}
.page .excursion .exc-img-cell img{width:100%;height:auto;max-height:46mm;object-fit:cover;display:block;border-radius:12px 0 0 12px}
.page .excursion .exc-detail{vertical-align:top;padding:14px 16px}
.page .excursion .exc-name{font-family:var(--fh);font-size:13pt;font-weight:600;color:#1a1a1a;letter-spacing:-.015em;margin:0 0 3px;line-height:1.2}
.page .excursion .exc-loc{font-size:8pt;color:#999;margin-bottom:4px}
.page .excursion .exc-meta{margin-bottom:6px}
.page .excursion .exc-pill{display:inline-block;font-size:6.5pt;color:#8B6B3A;background:rgba(212,175,106,.1);border:1px solid rgba(212,175,106,.2);padding:3px 9px;border-radius:100px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-right:4px}
.page .excursion .exc-desc{font-size:8.5pt;color:#555;line-height:1.6;margin-bottom:6px}
.page .excursion .exc-highlights{margin:0;padding:0;list-style:none;font-size:8pt;color:#555;line-height:1.65}
.page .excursion .exc-highlights li{padding:2px 0 2px 14px;position:relative}
.page .excursion .exc-highlights li:before{content:'';position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background:#D4AF6A}

/* Your Journey Timeline */
.page .itin-summary{background:#fafaf7;border:1px solid #eee8d5;border-radius:14px;padding:18px 22px;margin-top:10px}
.page .itin-list{position:relative;padding-left:36px}
.page .itin-list:before{content:'';position:absolute;left:15px;top:18px;bottom:18px;width:2px;background:linear-gradient(180deg,#D4AF6A,#eaddc0)}
.page .itin-item{display:table;width:100%;padding:14px 0;page-break-inside:avoid}
.page .itin-item .itin-left{display:table-cell;vertical-align:middle;width:auto}
.page .itin-item .itin-right{display:table-cell;vertical-align:middle;text-align:right;width:130px}
.page .itin-icon{width:32px;height:32px;border-radius:50%;background:#1a1a1a;display:inline-block;vertical-align:middle;text-align:center;line-height:32px;margin-left:-36px;margin-right:12px;position:relative;z-index:1}
.page .itin-icon svg{width:16px;height:16px;vertical-align:middle;margin-top:-1px}
.page .itin-title{display:inline-block;vertical-align:middle}
.page .itin-title .it-name{font-size:12pt;font-weight:600;color:#1a1a1a;letter-spacing:-.01em}
.page .itin-title .it-type{font-size:7.5pt;color:#8B6B3A;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:1px}
.page .itin-title .it-detail{font-size:8pt;color:#999;font-weight:400;margin-top:2px}
.page .itin-date{font-size:9pt;color:#555;font-weight:500}
.page .itin-time{font-size:7.5pt;color:#bbb;margin-top:2px;text-align:right}
.page .itin-divider{border:0;border-top:1px solid #f0ebe0;margin:0}
.page .itin-glance{background:#fafaf7;border:1px solid #eee8d5;border-radius:12px;padding:14px 16px;margin-top:12px}
.page .itin-glance-title{font-size:7.5pt;color:#D4AF6A;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.page .itin-glance-row{display:table;width:100%}
.page .itin-glance-row .ig-l{display:table-cell;padding:3px 8px 3px 0;font-size:7.5pt;color:#999;text-transform:uppercase;letter-spacing:.08em;font-weight:600;width:30%}
.page .itin-glance-row .ig-v{display:table-cell;padding:3px 0;font-size:9pt;color:#1a1a1a;font-weight:500}

/* Quote Summary Block */
.page .quote-summary{background:#fafaf7;border:1px solid #eee8d5;border-radius:12px;padding:14px 16px;margin-top:8px}
.page .qs-grid{display:table;width:100%;border-collapse:collapse}
.page .qs-row{display:table-row}
.page .qs-label{display:table-cell;padding:4px 8px 4px 0;font-size:7.5pt;color:#999;text-transform:uppercase;letter-spacing:.1em;font-weight:600;width:35%;vertical-align:top;border-bottom:1px solid #eee8d5}
.page .qs-value{display:table-cell;padding:4px 0;font-size:9pt;color:#1a1a1a;font-weight:500;border-bottom:1px solid #eee8d5}
.page .qs-row:last-child .qs-label,.page .qs-row:last-child .qs-value{border-bottom:0}
.page .qs-price{text-align:center;margin-top:10px;padding:12px;background:linear-gradient(135deg,#1a1a1a,#2a2520);border-radius:10px;color:#fff}
.page .qs-price .qs-p-label{font-size:7pt;text-transform:uppercase;letter-spacing:.2em;color:#D4AF6A;margin-bottom:4px}
.page .qs-price .qs-p-amount{font-family:var(--fh);font-size:22pt;font-weight:600;letter-spacing:-.02em}
.page .qs-deposit{text-align:center;margin-top:6px;padding:6px 12px;background:rgba(212,175,106,.08);border:1px solid rgba(212,175,106,.2);border-radius:8px;font-size:7.5pt;color:#8B6B3A;font-weight:600;letter-spacing:.04em}
.page .qs-badges{display:table;width:100%;margin-top:8px;border-collapse:separate;border-spacing:6px 0}
.page .qs-badge{display:table-cell;text-align:center;padding:8px 6px;border:1px solid #eee8d5;border-radius:8px;background:#fff}
.page .qs-badge .qs-b-label{font-size:7pt;color:#8B6B3A;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.page .qs-badge .qs-b-value{font-size:11pt;color:#1a1a1a;font-weight:600;margin-top:2px}

.page table.price{width:100%;border-collapse:separate;border-spacing:0;font-size:10pt;border:1px solid #eee;border-radius:14px;overflow:hidden}
.page table.price th{background:#1a1a1a;color:#fff;padding:13px 16px;text-align:left;font-weight:500;letter-spacing:.04em;font-size:9.5pt;text-transform:uppercase}
.page table.price td{padding:13px 16px;border-bottom:1px solid #f3f3f3;color:#333;font-weight:400}
.page table.price tr:last-child td{border-bottom:0}
.page table.price tr.total td{background:#fafaf7;color:#1a1a1a;font-weight:600;font-size:12pt;font-family:var(--fh);letter-spacing:-.01em}
.page table.price tr.total td:last-child{color:var(--gold-dark)}

.page ul.list{margin:6px 0 0 0;padding:0;font-size:9pt;line-height:1.75;color:#555;list-style:none}
.page ul.list li{margin-bottom:6px;padding-left:18px;position:relative}
.page ul.list li:before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.page .twocol{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.page .foot{margin-top:auto;padding-top:12px;border-top:1px solid #eaeaea;font-size:8.5pt;color:#888;text-align:center;line-height:1.8;font-weight:400}
.page .foot b{color:#1a1a1a;font-family:var(--fh);font-size:11pt;font-weight:600;letter-spacing:-.01em}

/* Conversation Starters — scrollable examples container */
#convoExamples::-webkit-scrollbar{width:4px}
#convoExamples::-webkit-scrollbar-track{background:transparent}
#convoExamples::-webkit-scrollbar-thumb{background:#C4A55A;border-radius:4px}
#convoExamples::-webkit-scrollbar-thumb:hover{background:#E4C284}

/* LIBRARY MODAL — liquid glass */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);z-index:100;align-items:center;justify-content:center;padding:30px}
.modal-bg.open{display:flex}
.modal{background:rgba(20,20,28,.72);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--bd-glass);border-radius:var(--r-xl);max-width:900px;width:100%;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);position:relative}
.modal::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 50%);pointer-events:none}
.modal-h{padding:20px 24px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center;position:relative}
.modal-h h2{font-family:var(--fh);color:var(--gold);font-size:20px;font-weight:500}
.modal-b{padding:22px;overflow-y:auto;flex:1;position:relative}
.modal-close{background:var(--glass);border:1px solid var(--bd);color:var(--tx2);font-size:18px;cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}
.modal-close:hover{color:var(--gold);background:var(--glass-a);border-color:var(--gold)}
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.libcard{background:var(--glass);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .3s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(8px)}
.libcard:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-gold)}
.libcard .ph{height:120px;background:linear-gradient(135deg,rgba(212,175,106,.3),rgba(168,133,74,.5));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fh);font-size:14px;text-align:center;padding:8px}
.libcard .b{padding:12px 14px}
.libcard .b b{color:var(--gold);font-size:13px;display:block}
.libcard .b small{color:var(--tx3);font-size:10px}
.libcard .tags{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.libcard .tag{font-size:8.5px;background:var(--gold-muted);color:var(--gold);padding:3px 8px;border-radius:100px;text-transform:uppercase;letter-spacing:.06em;border:1px solid rgba(212,175,106,.15)}

/* BRAND MANAGEMENT — liquid glass cards */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:12px}
.brand-card{position:relative;background:var(--bg-secondary);backdrop-filter:var(--blur);border:1px solid var(--bd-glass);border-radius:var(--r-xl);overflow:hidden;transition:all .35s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.brand-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 50%);pointer-events:none;z-index:1}
.brand-card:hover{border-color:var(--bd-gold);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.brand-add{background:var(--glass);border:2px dashed var(--bd-h);min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--tx3);transition:all .35s;cursor:pointer;border-radius:var(--r-xl);backdrop-filter:blur(8px)}
.brand-add:hover{border-color:var(--gold);color:var(--gold);background:rgba(212,175,106,.06);transform:translateY(-4px)}

/* in-preview Edit Trust button */
.edit-trust-btn{position:absolute;top:14px;right:14px;background:rgba(20,20,28,.7);backdrop-filter:blur(12px);color:var(--gold);border:1px solid var(--bd-gold);padding:8px 16px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.04em;cursor:pointer;font-family:var(--fb);z-index:10;box-shadow:var(--shadow);transition:all .25s}
.edit-trust-btn:hover{background:var(--gold);color:#0A0A0A;transform:translateY(-1px)}
@media print{.no-print,.edit-trust-btn{display:none!important}}

/* discreet creator credit */
.credit{position:fixed;bottom:10px;right:14px;font-size:9px;color:rgba(255,255,255,.15);letter-spacing:.16em;text-transform:uppercase;font-weight:500;z-index:5;pointer-events:none;font-family:var(--fb);transition:color .3s}
.credit:hover{color:rgba(212,175,106,.4)}
.credit b{font-weight:600;color:rgba(212,175,106,.3)}
@media print{.credit{display:none}}

.empty{text-align:center;padding:60px 20px;color:var(--tx3)}
.empty h3{color:var(--gold);font-size:18px;margin-bottom:8px;font-family:var(--fh)}

.thumb{width:100%;max-height:80px;object-fit:cover;border-radius:5px;margin-top:6px;border:1px solid var(--bd)}

/* RESPONSIVE */
@media (max-width:1300px){
  #preview{transform:scale(.78);transform-origin:top center}
  .preview-toolbar{transform:scale(.78);transform-origin:top center}
}
@media (max-width:1100px){
  #preview{transform:scale(.65);transform-origin:top center}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .editor{grid-template-columns:1fr!important}
  .splitter{display:none}
  .nav{padding:8px 12px;gap:8px;height:auto;flex-wrap:wrap}
  .nav .brand{font-size:24px;padding-right:12px;margin-right:6px}
  .nav .tabs{margin-left:0;order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:3px}
  .nav .tabs::-webkit-scrollbar{display:none}
  .nav .tab{padding:7px 12px;font-size:11px;white-space:nowrap;flex-shrink:0}
  .nav .right{margin-left:auto;gap:8px;font-size:11px}
  .nav .agent{padding:6px 10px;font-size:10px}
  .nav .user-chip{padding:6px 10px;font-size:10px}
  .editor{grid-template-columns:1fr;height:auto}
  .editor-toolbar{top:0;position:relative;flex-wrap:wrap;gap:8px;padding:10px 14px}
  .panel{height:auto;max-height:none;border-right:0;border-bottom:1px solid var(--bd);padding:18px 14px}
  .panel .row{grid-template-columns:1fr;gap:6px}
  .preview{padding:10px;height:auto}
  #preview{transform:none!important}
  .preview-toolbar{transform:none!important;font-size:9px}
  .page{width:100%;min-height:auto;padding:6mm 5mm;font-size:8.5pt}
  .page .logo{max-height:140px;max-width:476px}
  /* HERO ON MOBILE (2026-08-05 fix) — was showing a ZOOMED/cropped image on phones
     while desktop showed the whole picture. Cause: the base rule sets min-height:55mm
     (~208px) AND object-fit:cover. min-height BEATS max-height in CSS, so the old
     `max-height:41mm` here never took effect — on a ~330px-wide phone the box was
     forced to 208px tall while the image only needs ~186px at its 16:9 ratio, so
     `cover` cropped ~11% off each side. Desktop is wide enough that the constraint
     never fights, which is why it looked correct there.
     Fix: drop BOTH height constraints on narrow screens and let the image size to its
     natural aspect ratio (the capture carries an inline aspect-ratio + height:auto),
     with object-fit:contain so an unexpected ratio letterboxes rather than crops.
     Lives in the GLOBAL stylesheet, so it applies to every ALREADY-SHARED quote
     immediately — no re-share needed. */
  .page .hero{max-height:none;min-height:0;height:auto;object-fit:contain}
  .page .hero-ph{height:35mm}
  /* MOBILE PAGE FIT (2026-08-05) — the whole quote used to render ~686px wide inside a
     390px phone (336px of horizontal scroll), and the viewport meta is user-scalable=no
     so clients could not pinch out to read it. Two things forced that width:
     1. .fl-hero-route is display:table with the DEFAULT table-layout:auto, so its
        white-space:nowrap airport codes made it grow past its own width:100%.
        table-layout:fixed makes it honour width:100% and the 38/24/38 cell widths;
        the codes already carry overflow:hidden + text-overflow:ellipsis.
     2. .hotel-thumb-strip is a flex row of fixed 96px thumbs (flex-shrink:0). Capping it
        at 100% lets it scroll INSIDE itself — the swipe gallery it was designed to be —
        instead of stretching the page.
     The third piece is on the viewer wrapper in index.html (width:100%;box-sizing:
     border-box), without which .page{width:100%} resolves against a shrink-to-fit parent
     and constrains nothing. Verified: page now fits exactly on SE/13/Pixel 7/iPad Mini
     with ZERO unclipped overflow. Desktop and @media print are untouched. */
  .page .fl-hero-route{table-layout:fixed}
  .hotel-thumb-strip{max-width:100%;overflow-x:auto}
  .page .title h1{font-size:20pt}
  .page .title p{font-size:9pt}
  /* Keep header as a two-column row on mobile — logo left, quote info right */
  .page .hdr{flex-direction:row;gap:10px;align-items:center;justify-content:space-between;flex-wrap:nowrap}
  .page .hdr>*{min-width:0}
  .page .hdr .agency{font-size:14pt;flex:0 1 auto;max-width:55%;overflow:hidden}
  .page .hdr .agency small{font-size:7pt;margin-top:3px}
  .page .logo{max-height:90px;max-width:55%;width:auto;height:auto;object-fit:contain}
  .page .hdr .qi{text-align:right;flex:0 0 auto;max-width:45%;font-size:7.5pt;line-height:1.5}
  .page .hdr .qi b{font-size:7.5pt;margin-bottom:2px;letter-spacing:.1em}
  .page .hotel .h-img-cell{display:none}
  .page .hotel .h-detail-cell{padding:10px 12px}
  .page .twocol{grid-template-columns:1fr;gap:8px}
  .page .clientbox{font-size:8.5pt;padding:12px 14px}
  .dash{padding:16px 14px}
  .dash h1{font-size:24px}
  .dash .sub{font-size:13px;margin-bottom:20px}
  .dash-actions{flex-direction:column}
  .dash-actions input{max-width:100%}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:14px 16px;border-radius:16px}
  .stat .n{font-size:28px}
  .stat .l{font-size:9px}
  .qtable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .qtable th,.qtable td{padding:12px 14px;font-size:12px}
  .modal-bg{padding:8px}
  .modal{margin:0;max-height:95vh;border-radius:16px}
  .modal-b{padding:14px}
  .libgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .brand-grid{grid-template-columns:1fr}
  .actions-bar{flex-direction:column;gap:6px;padding:12px 0 4px}
  .actions-bar .btn{width:100%;min-width:0}
  .check-grp .grp-items{grid-template-columns:1fr}
  .loading-overlay .loading-text{font-size:12px;letter-spacing:.08em}
  #brandSwitcherBar{padding:6px 12px!important}
  #brandSwitcherBar button{padding:4px 10px!important;font-size:9px!important}
  #exportMenu{left:8px!important;right:8px!important;min-width:auto!important}
  #view-admin .admin-wrap{padding:18px 14px}
  #view-admin h1{font-size:28px}
  #view-admin .adm-tabs{flex-wrap:wrap;width:100%}
  #view-admin .adm-tab{padding:8px 12px;font-size:10px}
  #view-admin .adm-panel{padding:18px 14px;border-radius:16px}
  #view-admin .form-row{flex-direction:column}
  #view-admin table{font-size:11px}
  #view-admin th,#view-admin td{padding:10px 10px}
}
@media (max-width:480px){
  .stats{grid-template-columns:1fr}
  .nav .brand{font-size:20px}
  .nav .brand small{font-size:7px;letter-spacing:.32em;margin-top:3px}
  .nav .right span:first-child{display:none}
  .etb-btn{padding:6px 10px;font-size:10px}
  .page{padding:4mm}
  .page .title h1{font-size:16pt}
  /* Very small phones — keep header as a row but shrink further */
  .page .hdr{gap:6px;padding-bottom:6px;margin-bottom:4px}
  .page .hdr .agency{font-size:12pt;max-width:52%}
  .page .hdr .agency small{font-size:6.5pt}
  .page .logo{max-height:72px;max-width:52%}
  .page .hdr .qi{font-size:6.5pt;max-width:48%;line-height:1.4}
  .page .hdr .qi b{font-size:6.5pt}
  .page .sect h2{font-size:13pt}
  .stat .n{font-size:24px}
  .stat{padding:12px}
  #loginGate .login-card{width:calc(100vw - 32px);padding:32px 24px;border-radius:20px}
  #loginGate .login-brand{font-size:42px}
}

/* QUOTE VIEWER MODE (mobile-first client view) */
body.viewer-mode{background:#f8f6f1;margin:0;padding:0}
body.viewer-mode .nav,body.viewer-mode .editor,body.viewer-mode .editor-toolbar,body.viewer-mode #loginGate,body.viewer-mode .credit,body.viewer-mode .view{display:none!important}
body.viewer-mode #quoteViewer{display:block!important}
#quoteViewer{display:none;font-family:'Satoshi',sans-serif;max-width:480px;margin:0 auto;padding:0 0 100px;background:#fff;min-height:100vh;-webkit-overflow-scrolling:touch}
/* Smooth section transitions for viewer */
.qv-sect{animation:qvFadeIn .4s ease both}
@keyframes qvFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.qv-sect:nth-child(2){animation-delay:.05s}.qv-sect:nth-child(3){animation-delay:.1s}.qv-sect:nth-child(4){animation-delay:.15s}.qv-sect:nth-child(5){animation-delay:.2s}
.qv-hero{width:100%;height:260px;object-fit:cover;display:block}
.qv-hero-ph{width:100%;height:200px;background:linear-gradient(135deg,#D4AF6A,#A8854A);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:600}
.qv-body{padding:20px 18px}
.qv-brand{text-align:center;margin-bottom:16px}
.qv-brand img{height:48px;width:auto;margin-bottom:6px}
.qv-brand .qv-bname{font-size:14px;color:#888;letter-spacing:.1em;text-transform:uppercase}
.qv-title{font-family:'Satoshi',sans-serif;font-size:28px;font-weight:700;color:#1a1a1a;text-align:center;margin:0 0 4px;line-height:1.15;letter-spacing:-.02em}
.qv-sub{text-align:center;font-size:14px;color:#999;margin-bottom:16px}
.qv-expiry{text-align:center;background:rgba(212,175,106,.1);border:1px solid rgba(212,175,106,.2);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:12px;color:#8B6B3A;font-weight:600}
.qv-sect{margin-bottom:20px}
.qv-sect-title{font-size:11px;color:#D4AF6A;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #eee8d5}
.qv-card{background:#fafaf7;border:1px solid #eee8d5;border-radius:12px;padding:14px 16px;margin-bottom:10px}
.qv-card b{color:#1a1a1a;font-size:14px;display:block;margin-bottom:2px}
.qv-card small{color:#888;font-size:12px}
.qv-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0ebe0;font-size:13px}
.qv-row:last-child{border-bottom:0}
.qv-row .qv-label{color:#999;font-weight:500}
.qv-row .qv-val{color:#1a1a1a;font-weight:600;text-align:right}
.qv-price-block{background:linear-gradient(135deg,#1a1a1a,#2a2520);border-radius:14px;padding:20px;text-align:center;margin:16px 0}
.qv-price-block .qv-pl{font-size:10px;color:#D4AF6A;text-transform:uppercase;letter-spacing:.2em;margin-bottom:6px}
.qv-price-block .qv-pa{font-size:32px;color:#fff;font-weight:700;letter-spacing:-.02em}
.qv-deposit{text-align:center;background:rgba(212,175,106,.08);border:1px solid rgba(212,175,106,.2);border-radius:10px;padding:10px;font-size:12px;color:#8B6B3A;font-weight:600;margin-bottom:16px}
.qv-trust{display:flex;gap:8px;margin-bottom:16px}
.qv-trust-badge{flex:1;text-align:center;padding:10px 6px;border:1px solid #eee8d5;border-radius:10px;background:#fafaf7}
.qv-trust-badge .qv-tb-l{font-size:9px;color:#8B6B3A;font-weight:700;letter-spacing:.12em}
.qv-trust-badge .qv-tb-v{font-size:16px;color:#1a1a1a;font-weight:700;margin-top:2px}
.qv-list{margin:0;padding:0;list-style:none;font-size:13px;color:#555;line-height:1.7}
.qv-list li{padding:4px 0 4px 16px;position:relative}
.qv-list li:before{content:'';position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:#D4AF6A}
.qv-cta-bar{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid #eee8d5;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:6px;z-index:100;max-width:480px;margin:0 auto;box-shadow:0 -4px 24px rgba(0,0,0,.1)}
.qv-cta{flex:1;padding:14px 6px;border-radius:12px;text-align:center;font-size:11px;font-weight:700;text-decoration:none;letter-spacing:.04em;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .15s;-webkit-tap-highlight-color:transparent}
.qv-cta:active{transform:scale(.95)}
.qv-cta.wa{background:#25D366;color:#fff}
.qv-cta.call{background:#1a1a1a;color:#fff}
.qv-cta.email{background:#D4AF6A;color:#0a0a0a}
.qv-cta.book{background:linear-gradient(135deg,#D4AF6A,#A8854A);color:#fff}
.qv-back-top{position:fixed;bottom:90px;right:16px;width:40px;height:40px;border-radius:50%;background:rgba(26,26,26,.7);backdrop-filter:blur(8px);color:#fff;border:none;font-size:16px;cursor:pointer;z-index:101;display:none;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.2);-webkit-tap-highlight-color:transparent}
.qv-collapse-btn{background:none;border:none;color:#D4AF6A;font-size:10px;font-weight:600;letter-spacing:.1em;cursor:pointer;padding:4px 0;display:flex;align-items:center;gap:4px;-webkit-tap-highlight-color:transparent}

/* PRINT */
@page{size:A4 portrait;margin:0}
/* Perf — let the browser skip painting offscreen rows in long scrollable
   activity panels (Brand activity, Live quote activity, Recent activity,
   Shared quotes). Browser only paints visible rows; the rest are reserved
   but not rendered. Cuts dashboard paint time on busy orgs noticeably. */
.recent-activity-scroll>div,
.shared-quotes-scroll tbody>tr{content-visibility:auto;contain-intrinsic-size:auto 52px}

/* Perf — dashboard panels are stacked vertically; only one or two are
   visible at any time on a typical 1080p monitor. content-visibility:auto
   on each panel container lets the browser skip layout + paint for the
   ones below the fold until they scroll into view. Big speedup on
   dashboard open + on first navigation in. */
#dashLeaderboard,#dashLiveActivity,#dashBrandActivity,#dashRecentActivity,
#dashQuickQuotes,#dashClientMessages,#dashConversionAnalytics,
#dashSharedTable{content-visibility:auto;contain-intrinsic-size:auto 320px}

/* Perf — when the user has scrolled past the floating Q (it's fixed
   bottom-right so this almost never happens, but a safety net) AND when
   tab is in background, the browser already auto-throttles. We don't
   force-pause the character animations because the "Q is alive" signal
   matters for UX. */

/* Reduced motion — honour the OS-level setting so users who opt out of
   animation also get the perf benefit. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Hotel thumb strip — pseudo states (inline styles can't do :hover or ::scrollbar). */
.hotel-thumb{transition:transform .18s ease,box-shadow .18s ease,border-color .15s ease!important}
.hotel-thumb:hover{transform:translateY(-2px);border-color:rgba(196,165,90,0.55)!important;box-shadow:0 6px 18px rgba(0,0,0,0.14)!important}
.hotel-thumb.active{border-color:#C4A55A!important;box-shadow:0 4px 14px rgba(196,165,90,0.35),0 0 0 1px rgba(196,165,90,0.25)!important}
.hotel-thumb-strip::-webkit-scrollbar{height:2px}
.hotel-thumb-strip::-webkit-scrollbar-track{background:transparent}
.hotel-thumb-strip::-webkit-scrollbar-thumb{background:#C4A55A;border-radius:2px}

@media print{
  .nav,.panel,.preview-toolbar,.modal-bg,.actions-bar,.no-print,.prev-edit,.edit-trust-btn{display:none!important}
  .editor{display:block;height:auto}
  .preview{padding:0;background:#fff;overflow:visible;transform:none!important}
  .page{box-shadow:none;margin:0;width:210mm;min-height:auto;page-break-after:always;break-after:page;page-break-inside:avoid;break-inside:avoid}
  .page:last-child{page-break-after:auto;break-after:auto}
  body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Hotel cards in PDF: hero capped at 200px, no thumb strip. */
  .hotel-card{box-shadow:none!important;border:0.5px solid #ede9e0!important;page-break-inside:avoid;break-inside:avoid}
  .hotel-thumb-strip{display:none!important}
  /* Cap printed hero height — the 16:9 ratio on A4 width would land at ~118mm
     which is too tall for a card on a paginated quote. Override the wrap with a
     fixed pixel height + auto aspect-ratio so the img's height:100% lands flat. */
  .hotel-hero-wrap{aspect-ratio:auto!important;height:200px!important;max-height:200px!important}
}

/* ================================================================
   FUTURISTIC ENHANCEMENT LAYER
   Same colors, same structure — elevated with animated glows,
   holographic borders, particle grids, aurora backgrounds,
   and next-gen glassmorphism
   ================================================================ */

/* --- New animation keyframes --- */
@keyframes futurePulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes auroraShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes borderGlow{0%{border-color:rgba(212,175,106,.15)}50%{border-color:rgba(212,175,106,.45)}100%{border-color:rgba(212,175,106,.15)}}
@keyframes shimmerSweep{0%{transform:translateX(-100%) rotate(25deg)}100%{transform:translateX(200%) rotate(25deg)}}
@keyframes floatUp{0%{transform:translateY(0) scale(1);opacity:.4}50%{opacity:.8}100%{transform:translateY(-120vh) scale(.3);opacity:0}}
@keyframes gridPulse{0%,100%{opacity:.03}50%{opacity:.07}}
@keyframes breathe{0%,100%{box-shadow:0 0 20px rgba(212,175,106,.08)}50%{box-shadow:0 0 40px rgba(212,175,106,.18)}}
@keyframes textGlow{0%,100%{text-shadow:0 0 8px rgba(212,175,106,.3)}50%{text-shadow:0 0 20px rgba(212,175,106,.6),0 0 40px rgba(212,175,106,.2)}}
@keyframes orbitDot{0%{transform:rotate(0deg) translateX(3px)}100%{transform:rotate(360deg) translateX(3px)}}
@keyframes neonFlicker{0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}20%,24%,55%{opacity:.6}}
@keyframes dataStream{0%{background-position:0 0}100%{background-position:0 200px}}
@keyframes holoShift{0%{background-position:0% 0%}100%{background-position:200% 200%}}
@keyframes glowRing{0%{box-shadow:0 0 0 0 rgba(212,175,106,.4)}70%{box-shadow:0 0 0 10px rgba(212,175,106,0)}100%{box-shadow:0 0 0 0 rgba(212,175,106,0)}}

/* --- Cyber grid background overlay — static (animation removed for perf,
   was causing ~6fps drag from constant fullscreen repaints on a fixed
   pseudo-element). Visual diff is imperceptible at 0.05 opacity. --- */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(212,175,106,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(212,175,106,.05) 1px,transparent 1px);
  background-size:60px 60px;
  opacity:.6;
}

/* --- Aurora background — static (was animating background-position on a
   200%×200% multi-gradient bg = huge compositor work every frame). Now
   sits as a soft static gradient that costs zero CPU. --- */
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 80% at 15% 5%,rgba(212,175,106,.08),transparent 50%),
    radial-gradient(ellipse 100% 60% at 85% 95%,rgba(100,80,160,.05),transparent 50%);
}

/* Ensure all content sits above background effects */
body>*{position:relative;z-index:1}

/* --- Floating particle system (pure CSS) --- */
.nav::after{
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;
  background:radial-gradient(1.5px 1.5px at 20% 30%,rgba(212,175,106,.4),transparent),
    radial-gradient(1px 1px at 40% 70%,rgba(212,175,106,.3),transparent),
    radial-gradient(1.5px 1.5px at 60% 20%,rgba(255,255,255,.2),transparent),
    radial-gradient(1px 1px at 80% 50%,rgba(212,175,106,.3),transparent),
    radial-gradient(1.5px 1.5px at 10% 80%,rgba(255,255,255,.15),transparent),
    radial-gradient(1px 1px at 90% 10%,rgba(212,175,106,.25),transparent);
  animation:futurePulse 4s ease-in-out infinite;
}

/* --- Enhanced nav with glow line --- */
.nav{
  border-bottom:1px solid rgba(212,175,106,.2)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 32px rgba(0,0,0,.3),0 1px 20px rgba(212,175,106,.08)!important;
}
.nav .brand{animation:textGlow 4s ease-in-out infinite}
.nav .tab.active{
  box-shadow:0 2px 8px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.08) inset,0 0 12px rgba(212,175,106,.12)!important;
  border:1px solid rgba(212,175,106,.15);
}
.nav .tab{position:relative;overflow:hidden}
.nav .tab::after{
  content:'';position:absolute;bottom:0;left:50%;width:0;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:all .4s cubic-bezier(.2,.8,.2,1);transform:translateX(-50%);
}
.nav .tab:hover::after,.nav .tab.active::after{width:80%}

/* --- Futuristic stat cards --- */
.stat{
  animation:breathe 5s ease-in-out infinite;
  position:relative;overflow:hidden;
}
.stat:nth-child(2){animation-delay:1.2s}
.stat:nth-child(3){animation-delay:2.4s}
.stat:nth-child(4){animation-delay:3.6s}

/* Holographic shimmer sweep on stat cards */
.stat::after{
  content:'';position:absolute;top:-50%;left:0;width:40%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(212,175,106,.08),rgba(255,255,255,.05),transparent);
  transform:translateX(-100%) rotate(25deg);pointer-events:none;
}
.stat:hover::after{animation:shimmerSweep 1.2s ease forwards}

.stat .n{animation:textGlow 3s ease-in-out infinite}
.stat:hover{
  border-color:rgba(212,175,106,.35)!important;
  box-shadow:0 32px 80px rgba(0,0,0,.55),0 12px 32px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06) inset,0 0 30px rgba(212,175,106,.1)!important;
}

/* --- Dashboard heading glow --- */
.dash h1{
  background:linear-gradient(135deg,#F2F2F7 0%,#D4AF6A 50%,#F2F2F7 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:auroraShift 8s ease-in-out infinite;
}
.dash h2{position:relative}

/* --- Enhanced buttons with glow --- */
.btn{
  position:relative;overflow:hidden;
}
.btn::before{
  content:'';position:absolute;top:50%;left:50%;width:0;height:0;
  background:radial-gradient(circle,rgba(255,255,255,.3),transparent 70%);
  border-radius:50%;transform:translate(-50%,-50%);
  transition:width .6s,height .6s;pointer-events:none;
}
.btn:hover::before{width:200px;height:200px}
.btn:not(.ghost){
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 4px 16px rgba(212,175,106,.2),0 0 20px rgba(212,175,106,.1);
}
.btn:not(.ghost):hover{
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 32px rgba(212,175,106,.3),0 0 40px rgba(212,175,106,.15)!important;
}
.btn.ghost{position:relative;overflow:hidden}
.btn.ghost::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  background:conic-gradient(from 0deg,transparent,rgba(212,175,106,.15),transparent,rgba(212,175,106,.15),transparent);
  opacity:0;transition:opacity .4s;z-index:-1;
}
.btn.ghost:hover::after{opacity:1}

/* --- Editor sections with animated borders --- */
.ed-section{
  position:relative;
  transition:border-color .3s,box-shadow .3s;
}
.ed-section:hover{
  box-shadow:0 0 20px rgba(212,175,106,.06),0 8px 32px rgba(0,0,0,.2);
}
.ed-section h3{position:relative}
.ed-section h3 svg{filter:drop-shadow(0 0 4px rgba(212,175,106,.4))}

/* --- Table rows --- */
.qtable{position:relative;overflow:hidden}
.qtable tr:hover td{
  background:rgba(212,175,106,.04)!important;
  text-shadow:0 0 8px rgba(212,175,106,.15);
}

/* --- Enhanced modal with glow ring --- */
.modal-bg.open{
  background:rgba(0,0,0,.65)!important;
}
.modal{
  box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 60px rgba(212,175,106,.08),0 0 120px rgba(100,80,160,.05)!important;
}
.modal::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  background:conic-gradient(from 45deg,transparent 40%,rgba(212,175,106,.2) 50%,transparent 60%);
  z-index:-1;opacity:0;transition:opacity .5s;
}
.modal-bg.open .modal::after{opacity:1}

/* --- Library cards with holographic border --- */
.libcard{position:relative;overflow:hidden}
.libcard::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(212,175,106,.05),transparent 40%,transparent 60%,rgba(100,80,160,.05));
  background-size:200% 200%;opacity:0;transition:opacity .4s;
}
.libcard:hover::after{opacity:1;animation:holoShift 3s linear infinite}
.libcard:hover{
  box-shadow:0 8px 36px rgba(212,175,106,.22),0 1px 0 rgba(255,255,255,.12) inset,0 0 30px rgba(212,175,106,.06)!important;
}

/* --- Brand cards enhanced --- */
.brand-card{overflow:hidden}
.brand-card::after{
  content:'';position:absolute;top:-50%;left:0;width:40%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(212,175,106,.06),rgba(255,255,255,.03),transparent);
  transform:translateX(-100%) rotate(25deg);pointer-events:none;z-index:2;
}
.brand-card:hover::after{animation:shimmerSweep 1.5s ease forwards}
.brand-card:hover{
  box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 30px rgba(212,175,106,.08)!important;
}

/* --- Input fields with futuristic focus glow --- */
input:focus,textarea:focus,select:focus{
  box-shadow:0 0 0 4px var(--gold-glow),0 0 20px rgba(212,175,106,.08),0 0 40px rgba(212,175,106,.03)!important;
}

/* --- Badge glow effect --- */
.badge.accepted{box-shadow:0 0 12px rgba(48,209,88,.15);animation:neonFlicker 3s ease-in-out infinite}
.badge.sent{box-shadow:0 0 12px rgba(52,152,219,.15)}

/* --- Panel scrollbar — same unified gold as global --- */
.panel::-webkit-scrollbar{width:4px}
.panel::-webkit-scrollbar-track{background:transparent}
.panel::-webkit-scrollbar-thumb{background:#C4A55A;border-radius:4px}
.panel::-webkit-scrollbar-thumb:hover{background:#E4C284}

/* --- Actions bar glow --- */
.actions-bar{
  border-top-color:rgba(212,175,106,.15)!important;
  background:linear-gradient(180deg,transparent,rgba(12,12,16,.95) 30%)!important;
}
.actions-bar::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,106,.3),transparent);
}

/* --- Editor toolbar enhanced --- */
.editor-toolbar{
  border-bottom:1px solid rgba(212,175,106,.12)!important;
}
.etb-btn.primary{
  animation:glowRing 2.5s ease-in-out infinite;
}

/* --- Splitter with glow --- */
.splitter:hover:before,.splitter.dragging:before{
  box-shadow:0 0 10px rgba(212,175,106,.4);
}

/* --- Preview area subtle grid --- */
.preview{
  background:
    radial-gradient(circle at 50% 50%,rgba(212,175,106,.02) 0%,transparent 70%),
    var(--bg-primary)!important;
}

/* --- Loading/auto-save indicator glow --- */
#autoSaveTxt{animation:futurePulse 2s ease-in-out infinite}

/* --- Enhanced credit line --- */
.credit{
  background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(212,175,106,.2),rgba(255,255,255,.1));
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  animation:auroraShift 6s ease-in-out infinite;
}

/* --- Item cards (hotels/flights/excursions in editor) --- */
.item{
  transition:all .3s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
}
.item:hover{
  box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 15px rgba(212,175,106,.06)!important;
  border-color:rgba(212,175,106,.2)!important;
}

/* --- Checkbox group futuristic --- */
.check-grp{
  transition:border-color .3s,box-shadow .3s;
}
.check-grp:hover{
  border-color:rgba(212,175,106,.15);
  box-shadow:0 0 15px rgba(212,175,106,.04);
}
.check-grp label.chk:hover{
  text-shadow:0 0 8px rgba(212,175,106,.3);
}

/* --- Empty state glow --- */
.empty h3{animation:textGlow 3s ease-in-out infinite}

/* --- Gold text elements subtle glow everywhere --- */
/* ── Q AI Assistant (Phase 1) — character button, bubble, panel host ──────── */
@keyframes q-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes q-body-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(2deg)}75%{transform:rotate(-2deg)}}
@keyframes q-heart-beat{0%,100%{transform:scale(1)}15%{transform:scale(1.06)}30%{transform:scale(1)}45%{transform:scale(1.04)}60%{transform:scale(1)}}
@keyframes q-wave-hand{0%,60%,100%{transform:rotate(0deg)}10%{transform:rotate(25deg)}20%{transform:rotate(-15deg)}30%{transform:rotate(25deg)}40%{transform:rotate(-10deg)}50%{transform:rotate(20deg)}}
@keyframes q-pulse{0%,100%{opacity:.3}50%{opacity:1}}
/* Eye-blink as a CSS keyframe (was SVG SMIL <animate>; SMIL ignores
 * animation-play-state so it kept ticking when the tab was hidden). */
@keyframes q-eye-blink{0%,42%,46%,88%,92%,100%{transform:scaleY(1)}44%,90%{transform:scaleY(.05)}}
@keyframes q-eye-blink-listening{0%,42%,46%,88%,92%,100%{transform:scaleY(1)}44%,90%{transform:scaleY(.05)}}
.q-eye{animation:q-eye-blink 4s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.q-eye.q-eye-listening{animation-duration:2.5s}
/* Stop every Q animation when the tab is hidden — saves CPU when the user
 * is in another tab. Browsers already throttle in background but the SMIL
 * <animate> elements inside the SVG kept running on some systems. */
body.q-bg-paused #qFloatingBtn,body.q-bg-paused #qPanel,body.q-bg-paused .q-pulse,body.q-bg-paused #qCharSvg,body.q-bg-paused #qPanelHeadSvg,body.q-bg-paused .q-eye{animation-play-state:paused!important}
body.q-bg-paused #qCharSvg *,body.q-bg-paused #qPanelHeadSvg *{animation-play-state:paused!important}
@keyframes q-bounce{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-14px) scale(1.05)}60%{transform:translateY(-3px) scale(.98)}}
@keyframes q-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes q-bubble-show{0%,75%,100%{opacity:0;transform:translateY(4px);pointer-events:none}80%,95%{opacity:1;transform:translateY(0)}}
@keyframes q-panel-in{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Position is set by qDrag (JS) via left/top — defaults applied on first paint
 * are placeholders for the brief flash before qDrag.init() fires. */
#qFloatingBtn{position:fixed;left:auto;top:auto;bottom:20px;right:20px;z-index:9998;cursor:pointer;animation:q-float 3s ease-in-out infinite;width:140px;height:170px;touch-action:none;user-select:none;-webkit-user-select:none}
#qFloatingBtn.q-positioned{bottom:auto;right:auto}
#qFloatingBtn.q-dragging{cursor:grabbing;animation:none;transition:none!important}
#qFloatingBtn.q-snapping{transition:left .25s cubic-bezier(.2,.8,.2,1),top .25s cubic-bezier(.2,.8,.2,1)}
#qFloatingBtn.q-listening .q-pulse{animation-play-state:running!important}
#qFloatingBtn.q-hold-mode{transform:scale(1.1)!important}
#qFloatingBtn svg{filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));transition:transform .2s}
#qFloatingBtn:hover svg{transform:scale(1.08)}
#qFloatingBtn .q-bubble{position:absolute;bottom:100%;right:0;margin-bottom:8px;background:rgba(212,175,106,.12);border:1px solid rgba(212,175,106,.25);border-radius:10px 10px 0 10px;padding:6px 10px;font-size:10px;color:#D4AF6A;white-space:nowrap;opacity:0;animation:q-bubble-show 12s ease-in-out infinite}
/* Bubble flips when button is near a viewport edge so it never goes off-screen. */
#qFloatingBtn.q-edge-left .q-bubble{left:0;right:auto;border-radius:10px 10px 10px 0}
#qFloatingBtn.q-edge-top .q-bubble{top:100%;bottom:auto;margin-top:8px;margin-bottom:0;border-radius:0 10px 10px 10px}
#qFloatingBtn.q-edge-top.q-edge-left .q-bubble{border-radius:10px 0 10px 10px}
#qContextMenu{position:fixed;z-index:10000;background:rgba(20,20,28,.96);border:1px solid var(--bd,rgba(255,255,255,.08));border-radius:10px;padding:5px;box-shadow:0 16px 40px rgba(0,0,0,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-family:var(--fb,sans-serif);font-size:11px;min-width:170px;animation:q-panel-in .15s ease}
#qContextMenu button{display:block;width:100%;text-align:left;padding:7px 12px;border:none;background:transparent;color:var(--tx,#eee);cursor:pointer;border-radius:6px;font-size:11px;font-family:inherit;line-height:1.4}
#qContextMenu button:hover{background:rgba(212,175,106,.08);color:var(--gold,#D4AF6A)}
#qContextMenu .q-cm-sep{height:1px;background:rgba(255,255,255,.06);margin:4px 6px}
.q-pulse{animation:q-pulse 1.5s ease-in-out infinite}
.q-pulse-delay{animation-delay:.75s}
/* Q panel — dark gold visual redesign (2026-05-12). Pinned to one palette
 * across every theme so it never bleeds into the host's light/ivory mode.
 * All class names below (.q-head / .q-msgs / .q-msg / .q-chips / .q-input
 * / .q-mic / .q-send / .q-recording / .q-handsfree-on) are referenced by JS
 * and must stay — only the CSS rules change. */
#qPanel{position:fixed;bottom:80px;right:20px;width:600px;height:90vh;min-width:300px;min-height:280px;max-width:95vw;max-height:calc(100vh - 40px);z-index:9999;background:#0E0E18;border:0.5px solid rgba(196,165,90,.2);border-radius:14px;overflow:hidden;display:none;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,.5);animation:q-panel-in .25s ease;resize:both;color:rgba(255,255,255,.7)}
body.theme-light #qPanel,body.theme-ivory #qPanel,body.theme-dark #qPanel{background:#0E0E18}
#qPanel::before{content:"";position:absolute;right:2px;bottom:2px;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,rgba(196,165,90,.45) 50%,rgba(196,165,90,.45) 60%,transparent 60%,transparent 70%,rgba(196,165,90,.45) 70%,rgba(196,165,90,.45) 80%,transparent 80%);pointer-events:none;z-index:1}
@media print{#qFloatingBtn,#qPanel{display:none!important}}
body.viewer-mode #qFloatingBtn,body.viewer-mode #qPanel{display:none!important}

/* HEADER — slim row with the Q avatar slot, name + role, and the action buttons.
 * The `!important` overrides are deliberate: _qHeaderHTML() in the JS still
 * writes a few inline `style="…"` attributes (header border colour, name colour,
 * voice button colour). We don't touch the JS, so we win the cascade here. */
#qPanel .q-head{display:flex!important;align-items:center;gap:7px;padding:9px 12px!important;border-bottom:0.5px solid rgba(255,255,255,.06)!important;background:#0E0E18;flex-shrink:0}
#qPanel .q-head svg{width:26px!important;height:26px!important;flex-shrink:0;background:rgba(196,165,90,.12);border:1px solid rgba(196,165,90,.25);border-radius:50%;padding:1px;box-sizing:border-box}
#qPanel .q-head .q-name{flex:1;min-width:0}
#qPanel .q-head .q-name b{display:block;font-size:11px;color:#C4A55A!important;font-weight:500;line-height:1.2}
#qPanel .q-head .q-name span{display:block;font-size:8px;color:rgba(255,255,255,.25);margin-top:1px;line-height:1.2}
/* Header buttons — let emojis render in their natural color (no dim filter) */
#qPanel .q-head button{background:rgba(255,255,255,.05);border:0.5px solid rgba(255,255,255,.12);color:#fff!important;cursor:pointer;width:22px;height:22px;padding:0;border-radius:5px;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s;opacity:1}
#qPanel .q-head button:hover{background:rgba(196,165,90,.18);border-color:rgba(196,165,90,.5);transform:translateY(-1px)}
/* Per-action hover tints — each button gets its own vibe */
#qPanel .q-head button[title*="Admin"]:hover,#qPanel .q-head button[title*="Author"]:hover{background:rgba(255,214,10,.2);border-color:#FFD60A}
#qPanel .q-head button[title*="Jarvis"]:hover{background:rgba(91,155,213,.2);border-color:#5B9BD5}
#qPanel .q-head button[title*="Voice"]:hover{background:rgba(196,165,90,.2);border-color:#C4A55A}
#qPanel .q-head button[title*="character"]:hover,#qPanel .q-head button[title*="Character"]:hover{background:rgba(191,90,242,.2);border-color:#BF5AF2}
#qPanel .q-head button[title*="New chat"]:hover{background:rgba(48,209,88,.2);border-color:#30D158}
#qPanel .q-head button[title*="Close"]:hover{background:rgba(255,69,58,.2);border-color:#FF453A}

/* MESSAGE AREA — flexes between header + chips + input. Bubbles are tighter
 * (10px text, 7px padding) and asymmetrically rounded so the corner points at
 * the speaker. .q-bot stays left, .q-user stays right — same DOM hooks the JS
 * already toggles. */
#qPanel .q-msgs{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px;min-height:120px;scrollbar-width:thin;scrollbar-color:rgba(196,165,90,.15) transparent}
#qPanel .q-msgs::-webkit-scrollbar{width:2px}
#qPanel .q-msgs::-webkit-scrollbar-track{background:transparent}
#qPanel .q-msgs::-webkit-scrollbar-thumb{background:rgba(196,165,90,.15);border-radius:1px}
#qPanel .q-msg{max-width:88%;padding:8px 11px;border-radius:0 8px 8px 8px;font-size:12px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap;animation:q-msg-in .25s ease}
@keyframes q-msg-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
#qPanel .q-msg.q-bot{align-self:flex-start;background:#141422;color:rgba(255,255,255,.7);border:none}
/* Greeting bubble — the first .q-bot in the message list before any user
 * reply lands gets the gold tint. CSS :first-child handles this without
 * needing a special class in the JS. */
#qPanel .q-msgs .q-msg.q-bot:first-child:last-child{background:rgba(196,165,90,.07);border:0.5px solid rgba(196,165,90,.12)}
#qPanel .q-msg.q-user{align-self:flex-end;background:rgba(196,165,90,.1);border:0.5px solid rgba(196,165,90,.18);color:rgba(255,255,255,.75);max-width:80%;padding:5px 9px;border-radius:8px 0 8px 8px}
#qPanel .q-msg.q-bot.q-typing{font-style:italic;color:rgba(255,255,255,.35)}
#qPanel .q-msg .q-time{font-size:8px;color:rgba(255,255,255,.25);opacity:.6;margin-top:3px;display:block}

/* SUGGESTION CHIPS — _qChipsHTML writes inline `style="border:1px solid …"` on
 * each button (gold tint per active character), so we !important the spec
 * defaults. Hover colours win because the JS doesn't set :hover styles. */
#qPanel .q-chips{display:flex;flex-wrap:wrap;gap:3px;padding:6px 10px;border-top:0.5px solid rgba(255,255,255,.05);flex-shrink:0;max-height:68px;overflow-y:auto}
#qPanel .q-chips button{font-size:8.5px!important;padding:3px 7px!important;border:0.5px solid rgba(255,255,255,.07)!important;border-radius:9px!important;background:rgba(255,255,255,.03)!important;color:rgba(255,255,255,.45)!important;cursor:pointer;white-space:nowrap;transition:all .15s}
#qPanel .q-chips button:hover{border-color:rgba(196,165,90,.2)!important;color:#C4A55A!important;background:rgba(196,165,90,.08)!important}

/* INPUT ROW — text area + mic + send. Mic state classes (.q-recording,
 * .q-handsfree-on) come from the existing JS and keep their meaning. */
#qPanel .q-input-row{display:flex;gap:5px;padding:7px 10px;border-top:0.5px solid rgba(255,255,255,.05);flex-shrink:0;align-items:center;background:#0E0E18}
#qPanel .q-input{flex:1;min-height:26px;max-height:64px;overflow-y:auto;resize:none;padding:6px 9px;font-size:10px;line-height:1.4;border:0.5px solid rgba(255,255,255,.07);border-radius:7px;background:#141420;color:rgba(255,255,255,.6);font-family:inherit}
#qPanel .q-input::placeholder{color:rgba(255,255,255,.18)}
#qPanel .q-input:focus{outline:none;border-color:rgba(196,165,90,.3)}
/* Input-row buttons — vibrant emoji icons, per-button colour tints, no dim filter */
#qPanel .q-mic,#qPanel .q-send{flex-shrink:0;width:30px;height:30px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1}
#qPanel .q-mic{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-size:15px;opacity:1}
#qPanel .q-mic:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(196,165,90,.5)}
#qPanel .q-mic[title*="Voice"]:hover{background:rgba(91,155,213,.18);border-color:#5B9BD5}
#qPanel .q-mic[title*="Hands-free"]:hover{background:rgba(48,209,88,.18);border-color:#30D158}
#qPanel .q-mic[title*="feedback"]:hover,#qPanel .q-mic[title*="Feedback"]:hover{background:rgba(255,159,10,.18);border-color:#FF9F0A}
#qPanel .q-mic.q-recording{background:rgba(255,59,48,.18);color:#fff;border-color:#FF3B30;animation:q-pulse 1s ease-in-out infinite}
#qPanel .q-mic.q-handsfree-on{background:rgba(48,209,88,.18);color:#fff;border-color:#30D158}
#qPanel .q-send{border:none;background:#C4A55A;color:#000;font-size:12px;font-weight:600}
#qPanel .q-send:hover{background:#E8C06A}
#qPanel .q-send:disabled{opacity:.4;cursor:not-allowed;background:rgba(196,165,90,.4)}
/* ── ULTIMATE Q FEATURES (2026-05-30) ─────────────────────────────────────── */
/* A. Quick action bar */
#qPanel .q-quick-bar{display:flex;gap:4px;padding:6px 10px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,.04);background:rgba(0,0,0,.12)}
#qPanel .q-quick-bar::-webkit-scrollbar{display:none}
#qPanel .q-quick-bar button{flex-shrink:0;padding:5px 10px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:rgba(255,255,255,.55);border-radius:20px;cursor:pointer;font-size:11px;white-space:nowrap;transition:all .15s;line-height:1}
#qPanel .q-quick-bar button:hover{border-color:rgba(196,165,90,.55);color:#C4A55A;background:rgba(196,165,90,.1);transform:translateY(-1px)}
/* B. Quote progress strip */
#qPanel .q-prog-strip{display:flex;gap:5px;padding:5px 10px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,.04)}
#qPanel .q-prog-strip::-webkit-scrollbar{display:none}
#qPanel .q-prog-strip .qpf{flex-shrink:0;padding:3px 8px;border-radius:4px;font-size:9.5px;cursor:pointer;white-space:nowrap;transition:all .15s}
#qPanel .q-prog-strip .qpf.ok{background:rgba(48,209,88,.12);border:1px solid rgba(48,209,88,.3);color:#30D158}
#qPanel .q-prog-strip .qpf.no{background:rgba(255,69,58,.07);border:1px solid rgba(255,69,58,.22);color:#FF453A}
#qPanel .q-prog-strip .qpf.na{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.25)}
#qPanel .q-prog-strip .qpf:hover{filter:brightness(1.25);transform:translateY(-1px)}
/* D. Live voice waveform */
#qPanel .q-waveform{display:none;align-items:center;gap:2px;padding:0 5px;height:24px}
#qPanel .q-waveform span{display:inline-block;width:3px;border-radius:3px;background:#C4A55A;animation:q-wave .7s ease-in-out infinite}
#qPanel .q-waveform span:nth-child(1){height:5px;animation-delay:0s}
#qPanel .q-waveform span:nth-child(2){height:11px;animation-delay:.1s}
#qPanel .q-waveform span:nth-child(3){height:17px;animation-delay:.18s}
#qPanel .q-waveform span:nth-child(4){height:11px;animation-delay:.26s}
#qPanel .q-waveform span:nth-child(5){height:5px;animation-delay:.34s}
#qPanel.q-is-listening .q-waveform{display:flex!important}
#qPanel.q-is-listening .q-voice-idle{display:none!important}
@keyframes q-wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(2.2)}}
/* E. Popout / fullscreen */
#qPanel.q-fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;border-radius:0!important;z-index:99999!important;bottom:0!important;right:0!important}
/* I. Follow-up alert banner */
#qPanel .q-fu-banner{padding:7px 12px;background:rgba(255,159,10,.08);border-bottom:1px solid rgba(255,159,10,.18);font-size:10px;color:#FF9F0A;cursor:pointer;display:flex;align-items:center;gap:7px;transition:background .15s}
#qPanel .q-fu-banner:hover{background:rgba(255,159,10,.15)}
/* K. Pinned messages */
#qPanel .q-pinned-bar{border-bottom:1px solid rgba(196,165,90,.15);padding:6px 10px;background:rgba(196,165,90,.04)}
#qPanel .q-pinned-row{display:flex;align-items:flex-start;gap:6px;padding:4px 7px;background:rgba(196,165,90,.07);border:1px solid rgba(196,165,90,.18);border-radius:6px;margin-bottom:3px;font-size:10px;color:rgba(255,255,255,.65);position:relative}
#qPanel .q-pinned-row .q-unpin{position:absolute;top:3px;right:5px;background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;font-size:12px;line-height:1;padding:0}
#qPanel .q-pin-btn{display:none;position:absolute;top:3px;right:3px;padding:1px 5px;background:rgba(255,255,255,.07);border:none;border-radius:4px;color:rgba(255,255,255,.3);cursor:pointer;font-size:10px;transition:all .15s}
#qPanel .q-msg:hover .q-pin-btn{display:block}
#qPanel .q-pin-btn:hover{color:#C4A55A;background:rgba(196,165,90,.12)}
/* L. Quote tabs */
#qPanel .q-qtabs{display:flex;gap:3px;padding:5px 10px 0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,.06)}
#qPanel .q-qtabs::-webkit-scrollbar{display:none}
#qPanel .q-qtab{flex-shrink:0;padding:4px 10px;border:1px solid rgba(255,255,255,.07);border-bottom:none;background:rgba(255,255,255,.03);color:rgba(255,255,255,.38);border-radius:6px 6px 0 0;cursor:pointer;font-size:9.5px;transition:all .15s;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#qPanel .q-qtab.cur{background:rgba(196,165,90,.12);border-color:rgba(196,165,90,.32);color:#C4A55A;font-weight:600}
#qPanel .q-qtab:hover:not(.cur){color:rgba(255,255,255,.65);background:rgba(255,255,255,.06)}
/* Floating Q button highlight when mic is active */
@keyframes q-listening-glow{
  0%,100%{box-shadow:0 0 0 4px rgba(255,59,48,.35),0 0 22px 6px rgba(255,59,48,.55);transform:scale(1)}
  50%{box-shadow:0 0 0 12px rgba(255,59,48,.18),0 0 38px 14px rgba(255,59,48,.7);transform:scale(1.04)}
}
#qFloatingBtn.q-listening{border-radius:50%;animation:q-listening-glow 1.2s ease-in-out infinite}
#qFloatingBtn.q-listening svg{filter:drop-shadow(0 0 14px #FF3B30) drop-shadow(0 0 28px rgba(255,59,48,.6))!important}
/* When hands-free wake-word listener is on (waiting for "Q") — a softer green halo */
@keyframes q-handsfree-glow{
  0%,100%{box-shadow:0 0 0 3px rgba(48,209,88,.25),0 0 16px 3px rgba(48,209,88,.35)}
  50%{box-shadow:0 0 0 7px rgba(48,209,88,.12),0 0 24px 8px rgba(48,209,88,.5)}
}
#qFloatingBtn.q-handsfree-listening{border-radius:50%;animation:q-handsfree-glow 2.4s ease-in-out infinite}
#qFloatingBtn.q-handsfree-listening svg{filter:drop-shadow(0 0 8px rgba(48,209,88,.6)) drop-shadow(0 0 18px rgba(48,209,88,.35))!important}
/* Wake-word toast — small "Listening for Q…" indicator under the floating button */
#qWakeIndicator{position:fixed;z-index:9997;background:rgba(20,20,22,.92);color:#30D158;border:1px solid rgba(48,209,88,.4);padding:6px 12px;border-radius:14px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;pointer-events:none;backdrop-filter:blur(12px);font-family:var(--lx-sans,system-ui);display:none}
#qWakeIndicator.on{display:block}
#qWakeIndicator .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#30D158;margin-right:6px;animation:q-pulse 1.2s ease-in-out infinite;vertical-align:middle}

.nav .brand,.stat .n,.dash h1,.ed-section h3 .sec-title{
  text-shadow:0 0 12px rgba(212,175,106,.15);
}

/* ── Dashboard v2 — clean two-column layout ──────────────────────────────── */
.dash-v2{padding:24px 32px 48px;max-width:1400px;margin:0 auto}
/* Main dashboard body (formerly the "full view" — promoted to primary on
 * 2026-05-09 after the duplicate v2 top section was removed). */
.dashv2-fullview{margin-top:0}
.dashv2-actions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:14px;flex-wrap:wrap}
.dashv2-actions .btn{font-size:12px;padding:9px 16px;white-space:nowrap}
.dashv2-grid{display:grid;grid-template-columns:60% 40%;gap:24px;align-items:start}
.dashv2-grid-5050{grid-template-columns:1fr 1fr}
.dashv2-left,.dashv2-right{min-width:0}
/* Spec: 8px gap between KPI cards, 24px breathing space below them */
.dashv2-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px}
.dashv2-kpi{padding:12px;background:rgba(20,20,28,.4);border:1px solid var(--bd);border-radius:10px;min-width:0}
.dashv2-kpi .lbl{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em;font-weight:500;margin-bottom:8px;line-height:1.35;min-height:28px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dashv2-kpi .n{font-size:24px;font-weight:600;color:var(--gold);font-family:var(--fh,inherit);letter-spacing:-.01em;line-height:1}
.dashv2-kpi .delta{font-size:11px;margin-top:6px;font-weight:500;line-height:1.3}
.dashv2-kpi .delta.up{color:#30D158}
.dashv2-kpi .delta.flat{color:var(--tx3)}
.dashv2-kpi .delta.down{color:#EF9F27}
/* Spec: 16px panel padding (left-column panels) */
.dashv2-panel{background:rgba(20,20,28,.4);border:1px solid var(--bd);border-radius:12px;padding:16px;margin-bottom:16px;min-width:0}
/* Spec: 12px internal padding for right-column panels */
.dashv2-panel-tight{padding:12px}
.dashv2-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.dashv2-panel-title{font-size:13px;font-weight:500;color:var(--tx);letter-spacing:.01em}
.dashv2-pills{display:flex;gap:4px;flex-wrap:wrap}
.dashv2-pills button{font-size:9px;padding:3px 9px;border-radius:99px;border:1px solid var(--bd);background:transparent;color:var(--tx3);cursor:pointer;font-family:inherit;line-height:1.4;transition:border-color .15s,color .15s,background .15s}
.dashv2-pills button:hover{border-color:rgba(212,175,106,.3);color:var(--tx2)}
.dashv2-pills button.active{border-color:var(--gold);color:var(--gold);background:rgba(212,175,106,.06)}
.dashv2-chase-group-h{font-size:9px;color:var(--tx3);text-transform:uppercase;letter-spacing:.16em;font-weight:600;padding:14px 0 6px}
.dashv2-chase-group-h:first-child{padding-top:0}
/* Spec: 10px top + bottom padding per chase row, no more than 6 columns */
.dashv2-chase-row{display:grid;grid-template-columns:28px 1fr auto auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s;min-width:0}
.dashv2-chase-row:hover{background:rgba(255,255,255,.02)}
.dashv2-chase-row:last-child{border-bottom:0}
.dashv2-avatar{width:28px;height:28px;border-radius:50%;background:rgba(212,175,106,.1);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}
.dashv2-cmeta{min-width:0}
.dashv2-cname{font-size:12px;color:var(--tx);font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashv2-cref{font-size:10px;color:var(--tx3);line-height:1.3;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashv2-views{font-size:10px;color:var(--tx3);min-width:30px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.dashv2-stage{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px;flex-shrink:0;white-space:nowrap}
/* Spec colour mapping */
.dashv2-stage.hot{background:rgba(255,159,10,.12);color:#FF9F0A;border:1px solid rgba(255,159,10,.22)}
.dashv2-stage.warm{background:rgba(212,175,106,.12);color:var(--gold);border:1px solid rgba(212,175,106,.22)}
.dashv2-stage.stalled{background:rgba(255,69,58,.12);color:#FF453A;border:1px solid rgba(255,69,58,.22)}
.dashv2-stage.cold{background:rgba(115,140,170,.12);color:#7E94AF;border:1px solid rgba(115,140,170,.22)}
.dashv2-stage.unseen{background:rgba(140,140,150,.08);color:var(--tx3);border:1px solid rgba(140,140,150,.18)}
.dashv2-acts{display:flex;gap:4px;flex-shrink:0}
.dashv2-acts button{width:26px;height:26px;border-radius:6px;border:1px solid var(--bd);background:transparent;color:var(--tx2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .15s,color .15s,background .15s}
.dashv2-acts button:not(:disabled):hover{border-color:rgba(212,175,106,.5);color:var(--gold);background:rgba(212,175,106,.04)}
.dashv2-acts button:disabled{opacity:.3;cursor:not-allowed}
.dashv2-empty{padding:24px 0;text-align:center;color:var(--tx3);font-size:11px}

.dashv2-leader-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05);font-size:11px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.dashv2-leader-head .sub{font-size:9px;color:var(--tx3);font-weight:500;text-transform:none;letter-spacing:0}
.dashv2-leader-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);min-width:0}
.dashv2-leader-row:last-child{border-bottom:0}
.dashv2-leader-rank{width:18px;font-size:10px;color:var(--tx3);text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.dashv2-leader-name{flex:1;min-width:0;font-size:11px;color:var(--tx);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashv2-leader-sub{font-size:9px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashv2-leader-bar{width:60px;height:4px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden;flex-shrink:0}
.dashv2-leader-bar>div{height:100%;background:var(--gold);border-radius:2px;transition:width .3s}
.dashv2-leader-count{font-size:11px;color:var(--tx);font-weight:500;min-width:22px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.dashv2-leader-delta{font-size:10px;min-width:32px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.dashv2-leader-delta.up{color:#30D158}
.dashv2-leader-delta.flat{color:var(--tx3)}
.dashv2-leader-delta.down{color:#EF9F27}

/* Right column shared list — 4 columns max */
.dashv2-shared-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:11px;min-width:0}
.dashv2-shared-row:last-child{border-bottom:0}
.dashv2-shared-ref{color:var(--gold);font-weight:600;font-size:10px;cursor:pointer;text-decoration:none;border-bottom:1px dashed rgba(212,175,106,.4);font-variant-numeric:tabular-nums}
.dashv2-shared-name{color:var(--tx);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashv2-shared-status{font-size:8px;font-weight:600;padding:2px 7px;border-radius:4px;color:#fff;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase}
.dashv2-shared-views{font-size:10px;color:var(--tx3);min-width:30px;text-align:right;font-variant-numeric:tabular-nums}

@media(max-width:1100px){
  .dashv2-grid{grid-template-columns:1fr}
  .dashv2-kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .dash-v2{padding:16px 14px 32px}
  .dashv2-kpis{grid-template-columns:1fr 1fr;gap:6px}
  .dashv2-kpi .n{font-size:20px}
  .dashv2-chase-row{grid-template-columns:24px 1fr auto auto}
  .dashv2-chase-row .dashv2-views{display:none}
}
/* Spec: hide the cloud-only corner toast — the topbar sync indicator is the
 * sole status surface. Logic still runs (writes still go to cloud); only the
 * popup chrome is suppressed. */
#__cloudOnlyBanner{display:none!important}

/* Saved Quotes table — cap visible rows to ~10, rest scroll inside the
 * wrapper. Sticky <thead> keeps column headers visible while scrolling. */
.dashv2-qtable-wrap{max-height:560px;overflow-y:auto;overflow-x:auto;border:1px solid var(--bd);border-radius:10px;background:rgba(20,20,28,.4)}
.dashv2-qtable-wrap .qtable{margin:0;border:0;width:100%}
.dashv2-qtable-wrap .qtable thead th{position:sticky;top:0;z-index:2;background:rgba(20,20,28,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Shared Quotes table — fixed-height scrollable box (~10 rows), sticky
 * header, thin gold scrollbar to match the dark theme. */
.shared-quotes-scroll{max-height:640px;overflow-y:auto;overflow-x:auto;border:1px solid var(--bd);border-radius:10px;background:rgba(20,20,28,.4);scrollbar-width:thin;scrollbar-color:#C4A55A rgba(255,255,255,0.05)}
.shared-quotes-scroll::-webkit-scrollbar{width:4px;height:4px}
.shared-quotes-scroll::-webkit-scrollbar-track{background:transparent}
.shared-quotes-scroll::-webkit-scrollbar-thumb{background:#C4A55A;border-radius:4px}
.shared-quotes-scroll::-webkit-scrollbar-thumb:hover{background:#E4C284}
.shared-quotes-scroll .qtable{margin:0;border:0;width:100%}
.shared-quotes-scroll .qtable thead th{position:sticky;top:0;z-index:2;background:rgba(20,20,28,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Recent Activity panel — fixed-height scroll box (~5 rows visible),
 * thin gold scrollbar to match the dark theme. Each row is ~50px. */
.recent-activity-scroll{max-height:260px;overflow-y:auto;border:1px solid var(--bd);border-radius:10px;background:rgba(20,20,28,.4);scrollbar-width:thin;scrollbar-color:#C4A55A rgba(255,255,255,0.05)}
.recent-activity-scroll::-webkit-scrollbar{width:4px}
.recent-activity-scroll::-webkit-scrollbar-track{background:transparent}
.recent-activity-scroll::-webkit-scrollbar-thumb{background:#C4A55A;border-radius:4px}
.recent-activity-scroll::-webkit-scrollbar-thumb:hover{background:#E4C284}

/* --- Futuristic selection highlight --- */
::selection{background:rgba(212,175,106,.25);color:#fff}
::-moz-selection{background:rgba(212,175,106,.25);color:#fff}

/* --- Hover row glow for admin tables --- */
#view-admin tbody tr:hover{
  background:rgba(212,175,106,.06)!important;
  box-shadow:inset 0 0 20px rgba(212,175,106,.03);
}

/* --- Admin panel heading gold gradient --- */
#view-admin h1{
  filter:drop-shadow(0 0 20px rgba(212,175,106,.2));
}

/* --- Notification bell pulse --- */
#notifBadge{animation:glowRing 2s ease-in-out infinite}

/* --- Login gate enhanced --- */
#loginGate .login-card{
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 8px 32px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.06) inset,0 0 80px rgba(212,175,106,.08)!important;
}
#loginGate .login-brand{
  filter:drop-shadow(0 0 30px rgba(212,175,106,.3));
}

/* --- Data stream effect on panel background --- */
.panel{
  background:
    linear-gradient(180deg,rgba(212,175,106,.01) 0%,transparent 2px,transparent 58px,rgba(212,175,106,.01) 60px),
    var(--bg-secondary)!important;
  background-size:100% 60px!important;
}

/* --- Approval Action Alert Banner --- */
@keyframes approvalPulse{0%,100%{box-shadow:0 0 0 0 rgba(48,209,88,.3),0 8px 32px rgba(48,209,88,.12)}50%{box-shadow:0 0 0 8px rgba(48,209,88,0),0 8px 32px rgba(48,209,88,.2)}}
@keyframes approvalShine{0%{transform:translateX(-100%) rotate(25deg)}100%{transform:translateX(300%) rotate(25deg)}}
@keyframes approvalBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.approval-alert{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(48,209,88,.08) 0%,rgba(48,209,88,.03) 40%,rgba(212,175,106,.05) 100%);
  border:1.5px solid rgba(48,209,88,.35);
  border-radius:20px;padding:24px 28px;margin-bottom:16px;
  animation:approvalPulse 3s ease-in-out infinite;
  backdrop-filter:blur(12px);
  transition:all .3s cubic-bezier(.2,.8,.2,1);
}
.approval-alert:hover{
  border-color:rgba(48,209,88,.6);
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(48,209,88,.15),0 0 60px rgba(48,209,88,.06);
}
.approval-alert::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(48,209,88,.06),transparent 50%);
  pointer-events:none;
}
.approval-alert::after{
  content:'';position:absolute;top:-50%;left:0;width:30%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(48,209,88,.08),rgba(255,255,255,.04),transparent);
  transform:translateX(-100%) rotate(25deg);pointer-events:none;
  animation:approvalShine 4s ease-in-out infinite;
}
.approval-alert .aa-icon{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,#30D158,#28A745);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;flex-shrink:0;
  box-shadow:0 4px 20px rgba(48,209,88,.3);
  animation:approvalBounce 2s ease-in-out infinite;
}
.approval-alert .aa-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.approval-alert .aa-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;border-radius:10px;border:none;
  font-size:12px;font-weight:600;cursor:pointer;
  font-family:var(--fb);letter-spacing:.02em;
  transition:all .25s cubic-bezier(.2,.8,.2,1);
  position:relative;z-index:2;
}
.approval-alert .aa-btn:hover{transform:translateY(-2px)}
.approval-alert .aa-btn.wa{background:#25D366;color:#fff;box-shadow:0 4px 16px rgba(37,211,102,.3)}
.approval-alert .aa-btn.wa:hover{box-shadow:0 8px 24px rgba(37,211,102,.4)}
.approval-alert .aa-btn.call{background:#1a1a1a;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.approval-alert .aa-btn.call:hover{background:#2a2a2a}
.approval-alert .aa-btn.email{background:var(--gold);color:#0a0a0a;box-shadow:0 4px 16px rgba(212,175,106,.3)}
.approval-alert .aa-btn.email:hover{box-shadow:0 8px 24px rgba(212,175,106,.4)}
.approval-alert .aa-btn.dismiss{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--tx3);box-shadow:none}
.approval-alert .aa-btn.dismiss:hover{border-color:rgba(255,255,255,.25);color:var(--tx2)}
@media(max-width:860px){
  .approval-alert{padding:18px 16px;border-radius:16px}
  .approval-alert .aa-icon{width:44px;height:44px;border-radius:12px;font-size:22px}
  .approval-alert .aa-actions{gap:6px}
  .approval-alert .aa-btn{padding:8px 14px;font-size:11px}
}

/* --- Ensure print styles override everything --- */
@media print{
  body::before,body::after,.nav::after,.stat::after,.qtable::after,
  .modal::after,.libcard::after,.brand-card::after,.actions-bar::before,
  .btn::before,.btn.ghost::after,.nav .tab::after{display:none!important;content:none!important}
  .dash h1,.credit{-webkit-background-clip:unset!important;background-clip:unset!important;color:inherit!important;background:none!important;animation:none!important}
  *{animation:none!important;text-shadow:none!important;box-shadow:none!important}
}

/* --- Responsive: reduce effects on small screens for performance --- */
@media(max-width:860px){
  body::before{background-size:40px 40px}
  .stat::after,.brand-card::after,.libcard::after{display:none}
  .nav::after{display:none}
}
/* Whole date/time field opens picker on click — via JS handler below; cursor hints it's clickable */
input[type="date"],input[type="time"],input[type="datetime-local"]{cursor:pointer}
/* Pricing & Payment section — breathable spacing */
.pricing-rows>div:hover .price-del-btn{opacity:.3!important}

/* ═══ MINIMALIST THEMES — Clean White + Slate Blue (added 2026-05-12) ═══
 * applyTheme() mirrors theme.id onto <html data-theme=…>, so these blocks
 * resolve when those themes are active. Quote-output / PDF surfaces sit
 * inside .page wrappers with their own hard-coded white styling and are
 * untouched — clients never see the agent's theme. */

/* —— Clean White ——————————————————————————————————————————————— */
[data-theme="clean-white"] body,
[data-theme="clean-white"] #app{background:#F1F5F9!important;color:#111111!important;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif!important}
[data-theme="clean-white"] .top-nav,
[data-theme="clean-white"] .navbar,
[data-theme="clean-white"] .topbar{background:#FFFFFF!important;border-bottom:1px solid #E5E7EB!important;color:#111111!important}
[data-theme="clean-white"] .brand-strip,
[data-theme="clean-white"] .brand-bar{background:#FFFFFF!important;border-bottom:1px solid #E5E7EB!important}
[data-theme="clean-white"] .card,
[data-theme="clean-white"] .panel,
[data-theme="clean-white"] .section,
[data-theme="clean-white"] [class*="card"],
[data-theme="clean-white"] [class*="panel"]{background:#FFFFFF!important;border-color:#E5E7EB!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important}
[data-theme="clean-white"] input,
[data-theme="clean-white"] select,
[data-theme="clean-white"] textarea{background:#FFFFFF!important;border-color:#E5E7EB!important;color:#111111!important}
[data-theme="clean-white"] input:focus,
[data-theme="clean-white"] select:focus,
[data-theme="clean-white"] textarea:focus{border-color:#111111!important}
[data-theme="clean-white"] input::placeholder,
[data-theme="clean-white"] textarea::placeholder{color:#9CA3AF!important}
[data-theme="clean-white"] .btn-primary,
[data-theme="clean-white"] .btn-gold{background:#111111!important;color:#FFFFFF!important;border-color:#111111!important}
[data-theme="clean-white"] .btn-ghost,
[data-theme="clean-white"] .btn-secondary{background:#FFFFFF!important;color:#374151!important;border:1px solid #E5E7EB!important}
[data-theme="clean-white"] .btn-ghost:hover,
[data-theme="clean-white"] .btn-secondary:hover{background:#F1F5F9!important}
[data-theme="clean-white"] .chip,
[data-theme="clean-white"] [class*="chip"]:not(.q-chips):not(.q-chips *){background:#F1F5F9!important;border-color:#E5E7EB!important;color:#374151!important}
[data-theme="clean-white"] .chip.active,
[data-theme="clean-white"] [class*="chip"].active{background:#111111!important;color:#FFFFFF!important}
[data-theme="clean-white"] .sidebar,
[data-theme="clean-white"] .side-nav,
[data-theme="clean-white"] #sidebar{background:#111111!important}
[data-theme="clean-white"] *{scrollbar-width:thin;scrollbar-color:#D1D5DB #F9FAFB}
[data-theme="clean-white"] *::-webkit-scrollbar{width:4px;height:4px}
[data-theme="clean-white"] *::-webkit-scrollbar-track{background:#F9FAFB}
[data-theme="clean-white"] *::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:2px}

/* —— Slate Blue ——————————————————————————————————————————————— */
[data-theme="slate-blue"] body,
[data-theme="slate-blue"] #app{background:#F0F4FF!important;color:#111111!important;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif!important}
[data-theme="slate-blue"] .top-nav,
[data-theme="slate-blue"] .navbar,
[data-theme="slate-blue"] .topbar{background:#FFFFFF!important;border-bottom:1px solid #C7D2FE!important;color:#1E3A5F!important}
[data-theme="slate-blue"] .brand-strip,
[data-theme="slate-blue"] .brand-bar{background:#FFFFFF!important;border-bottom:1px solid #C7D2FE!important}
[data-theme="slate-blue"] .card,
[data-theme="slate-blue"] .panel,
[data-theme="slate-blue"] [class*="card"],
[data-theme="slate-blue"] [class*="panel"]{background:#FFFFFF!important;border-color:#C7D2FE!important;box-shadow:0 1px 3px rgba(30,58,95,.08)!important}
[data-theme="slate-blue"] input,
[data-theme="slate-blue"] select,
[data-theme="slate-blue"] textarea{background:#FFFFFF!important;border-color:#C7D2FE!important;color:#111111!important}
[data-theme="slate-blue"] input:focus,
[data-theme="slate-blue"] select:focus,
[data-theme="slate-blue"] textarea:focus{border-color:#1E3A5F!important}
[data-theme="slate-blue"] input::placeholder,
[data-theme="slate-blue"] textarea::placeholder{color:#9CA3AF!important}
[data-theme="slate-blue"] .btn-primary,
[data-theme="slate-blue"] .btn-gold{background:#1E3A5F!important;color:#FFFFFF!important;border-color:#1E3A5F!important}
[data-theme="slate-blue"] .btn-ghost,
[data-theme="slate-blue"] .btn-secondary{background:#FFFFFF!important;color:#1E3A5F!important;border:1px solid #C7D2FE!important}
[data-theme="slate-blue"] .btn-ghost:hover,
[data-theme="slate-blue"] .btn-secondary:hover{background:#EEF2FF!important}
[data-theme="slate-blue"] .chip,
[data-theme="slate-blue"] [class*="chip"]:not(.q-chips):not(.q-chips *){background:#EEF2FF!important;border-color:#C7D2FE!important;color:#1E3A5F!important}
[data-theme="slate-blue"] .chip.active,
[data-theme="slate-blue"] [class*="chip"].active{background:#1E3A5F!important;color:#FFFFFF!important}
[data-theme="slate-blue"] .sidebar,
[data-theme="slate-blue"] .side-nav,
[data-theme="slate-blue"] #sidebar{background:#1E3A5F!important}
[data-theme="slate-blue"] *{scrollbar-width:thin;scrollbar-color:#A5B4FC #F5F7FF}
[data-theme="slate-blue"] *::-webkit-scrollbar{width:4px;height:4px}
[data-theme="slate-blue"] *::-webkit-scrollbar-track{background:#F5F7FF}
[data-theme="slate-blue"] *::-webkit-scrollbar-thumb{background:#A5B4FC;border-radius:2px}

/* Q panel stays dark on both — preserves contrast and continuity with the
 * existing dark-gold redesign. !important wins over the base #qPanel rule
 * so when these themes are on, the panel pulls a slightly darker base. */
[data-theme="clean-white"] #qPanel{background:#111111!important;border-color:rgba(255,255,255,.1)!important}
[data-theme="slate-blue"] #qPanel{background:#1E3A5F!important;border-color:rgba(255,255,255,.1)!important}

/* Shared-quote output / PDF must NEVER inherit the agent's theme. The renderer
 * wraps every quote page in `.page` with hard-coded white + serif styling
 * already, but we add a belt-and-braces reset here so any nested .card / chip
 * inside a .page can't pick up the dark-accent override above. */
[data-theme="clean-white"] .page,
[data-theme="clean-white"] .page *,
[data-theme="slate-blue"] .page,
[data-theme="slate-blue"] .page *{font-family:inherit}

/* ── Aurora signature theme (matches the QuoteGen marketing site) ─────────────
   A bold, vivid aurora field behind the whole app — gold + cyan + violet + rose
   blooms over deep ink — deliberately stronger than the default gold haze so the
   theme reads as distinctly "Aurora". `aurora-live` drifts (off for reduced-motion).
   The shared-quote .page stays pristine white. !important beats the base body bg. */
[data-theme="aurora"] body,[data-theme="aurora-live"] body{
  background:
    radial-gradient(46% 50% at 16% 12%,rgba(212,175,106,.40),transparent 66%),
    radial-gradient(44% 48% at 86% 12%,rgba(110,231,255,.34),transparent 66%),
    radial-gradient(52% 56% at 84% 88%,rgba(167,139,250,.38),transparent 66%),
    radial-gradient(46% 50% at 14% 90%,rgba(244,114,182,.30),transparent 66%),
    radial-gradient(80% 70% at 50% 50%,rgba(8,8,16,.20),transparent 70%),
    #050509 !important;
  background-attachment:fixed !important;
}
/* The base app uses body::before (cyber grid) + body::after (faint glow). We override
   BOTH with brighter aurora layers (higher specificity wins). ::after sits just behind
   content at z-index 0 so the colour actually reads through the glassy surfaces. */
[data-theme="aurora"] body::before,[data-theme="aurora-live"] body::before{
  content:'';position:fixed;inset:-30%;z-index:-1;pointer-events:none;opacity:.95;
  background:
    radial-gradient(34% 38% at 20% 16%,rgba(232,201,138,.45),transparent 64%),
    radial-gradient(32% 36% at 84% 14%,rgba(110,231,255,.40),transparent 64%),
    radial-gradient(40% 44% at 82% 86%,rgba(167,139,250,.42),transparent 64%),
    radial-gradient(34% 38% at 18% 88%,rgba(244,114,182,.34),transparent 64%);
  filter:blur(40px) saturate(160%);mix-blend-mode:screen;will-change:transform,filter;
}
[data-theme="aurora"] body::after,[data-theme="aurora-live"] body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 0%,rgba(110,231,255,.10),transparent 60%),
    radial-gradient(140% 130% at 50% 120%,transparent 38%,rgba(5,5,9,.72) 100%);
}
@media (prefers-reduced-motion:no-preference){
  [data-theme="aurora-live"] body::before{animation:qgAuroraDrift 20s ease-in-out infinite alternate}
}
@keyframes qgAuroraDrift{
  0%{transform:translate3d(0,0,0) scale(1);filter:blur(40px) saturate(160%) hue-rotate(0deg)}
  50%{transform:translate3d(-4%,3%,0) scale(1.12);filter:blur(52px) saturate(190%) hue-rotate(18deg)}
  100%{transform:translate3d(4%,-3%,0) scale(1.06);filter:blur(46px) saturate(170%) hue-rotate(-12deg)}
}
/* Glassier nav + cards, with an aurora hairline glow, so the chrome reads "Aurora" too */
[data-theme="aurora"] .nav,[data-theme="aurora-live"] .nav{
  background:rgba(8,8,16,.55)!important;backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  border-bottom:1px solid rgba(167,139,250,.28)!important;box-shadow:0 1px 0 rgba(110,231,255,.10) inset,0 8px 40px rgba(0,0,0,.45)!important;
}
[data-theme="aurora"] .card,[data-theme="aurora-live"] .card{
  background:rgba(12,12,20,.45)!important;backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,.08)!important;
}
/* belt-and-braces: never let the aurora field bleed into a rendered quote page */
[data-theme="aurora"] .page,[data-theme="aurora-live"] .page,
[data-theme="aurora"] .page::before,[data-theme="aurora"] .page::after{background:#fff!important}

/* --- block 3 --- */
'+css+'
/* --- block 4 --- */
.page{max-width:100%!important;margin:0 auto 20px!important;box-shadow:none!important} img{max-width:100%!important;height:auto!important}
/* --- block 5 --- */

/* ================= LUXURY THEME ================= */
:root{
  --lx-gold:#D4AF6A;--lx-gold-l:#E8CD8E;--lx-gold-d:#8B6B3A;
  --lx-ink:#07070A;--lx-ink-2:#0E0E12;--lx-glass:rgba(18,18,22,.72);
  --lx-line:rgba(212,175,106,.22);--lx-line-soft:rgba(255,255,255,.06);
  --lx-serif:'Satoshi',-apple-system,sans-serif;
  --lx-sans:'Satoshi',-apple-system,sans-serif;
  --lx-script:'Satoshi',-apple-system,sans-serif;
  --lx-shadow:0 40px 120px rgba(0,0,0,.75),0 8px 32px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  --lx-gold-grad:linear-gradient(135deg,#F4DCA0 0%,#D4AF6A 38%,#A87A3C 72%,#E8CD8E 100%);
}
@keyframes lxOrb{0%{transform:translate(0,0) scale(1) rotate(0deg)}25%{transform:translate(60px,-40px) scale(1.15) rotate(5deg)}50%{transform:translate(30px,-60px) scale(1.05) rotate(-3deg)}75%{transform:translate(-20px,-20px) scale(1.12) rotate(2deg)}100%{transform:translate(0,0) scale(1) rotate(0deg)}}
@keyframes lxFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes lxShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes lxPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,175,106,.4)}50%{box-shadow:0 0 0 12px rgba(212,175,106,0)}}

#loginGate{position:fixed;inset:0;z-index:99999;background:radial-gradient(ellipse at 30% 20%,rgba(212,175,106,.10),transparent 55%),radial-gradient(ellipse at 80% 90%,rgba(80,60,120,.08),transparent 60%),var(--lx-ink);display:flex;align-items:center;justify-content:center;font-family:var(--lx-sans);overflow:hidden}
#loginGate.hidden{display:none}
#loginGate .lx-bg-orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#loginGate .lx-bg-orbs span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;animation:lxOrb 18s ease-in-out infinite}
#loginGate .lx-bg-orbs span:nth-child(1){width:520px;height:520px;background:radial-gradient(circle,#D4AF6A,transparent 60%);top:-10%;left:-10%}
#loginGate .lx-bg-orbs span:nth-child(2){width:420px;height:420px;background:radial-gradient(circle,#6b4a8a,transparent 60%);bottom:-15%;right:-10%;animation-delay:-6s}
#loginGate .lx-bg-orbs span:nth-child(3){width:360px;height:360px;background:radial-gradient(circle,#8B6B3A,transparent 60%);top:40%;right:20%;animation-delay:-12s}
#loginGate .lx-bg-orbs span:nth-child(4){width:280px;height:280px;background:radial-gradient(circle,rgba(212,175,106,.6),transparent 55%);bottom:20%;left:30%;animation-delay:-8s;opacity:.2}
#loginGate .lx-bg-orbs span:nth-child(5){width:200px;height:200px;background:radial-gradient(circle,rgba(160,120,200,.5),transparent 55%);top:20%;right:40%;animation-delay:-15s;opacity:.15}
#loginGate .lx-noise{position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/></svg>");opacity:.04;pointer-events:none;mix-blend-mode:overlay}

#loginGate .login-card{position:relative;width:420px;padding:54px 48px 44px;background:rgba(20,20,28,.45);backdrop-filter:blur(60px) saturate(200%);-webkit-backdrop-filter:blur(60px) saturate(200%);border:1px solid rgba(212,175,106,.18);border-radius:28px;box-shadow:0 40px 120px rgba(0,0,0,.6),0 8px 32px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.06) inset,0 0 80px rgba(212,175,106,.06);animation:lxFadeUp .7s cubic-bezier(.2,.7,.2,1) both,breathe 6s ease-in-out infinite 1s}
#loginGate .login-card::before{content:'';position:absolute;inset:0;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 50%);pointer-events:none}

#loginGate .lx-stars{text-align:center;color:var(--lx-gold);font-size:10px;letter-spacing:.4em;opacity:.6;margin-bottom:12px}
#loginGate .login-brand{font-family:var(--lx-serif);font-size:64px;font-weight:400;text-align:center;line-height:.9;letter-spacing:.02em;background:var(--lx-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:lxShimmer 6s linear infinite;font-variation-settings:"opsz" 144,"SOFT" 60}
#loginGate .lx-rule{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
#loginGate .lx-rule span{flex:1;max-width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--lx-line),transparent)}
#loginGate .lx-rule em{font-family:var(--lx-serif);font-style:normal;color:var(--lx-gold);font-size:11px;letter-spacing:.32em;font-weight:400}
#loginGate .login-sub{font-family:var(--lx-sans);font-size:10px;color:#8A8A92;letter-spacing:.42em;text-transform:uppercase;text-align:center;margin-top:10px;font-weight:500}

#loginGate .lx-field{position:relative;margin-top:22px}
#loginGate .lx-field label{display:block;font-family:var(--lx-serif);font-weight:500;font-size:10px;color:var(--lx-gold);letter-spacing:.24em;text-transform:uppercase;margin-bottom:8px;padding-left:2px}
#loginGate input{display:block;width:100%;padding:14px 16px;background:rgba(8,8,12,.6);border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#F5F5F7;font-size:14px;outline:none;font-family:var(--lx-sans);box-sizing:border-box;transition:all .3s cubic-bezier(.2,.7,.2,1);letter-spacing:.01em}
#loginGate input::placeholder{color:#4A4A52}
#loginGate input:focus{border-color:var(--lx-gold);background:rgba(12,10,16,.8);box-shadow:0 0 0 3px rgba(212,175,106,.12),inset 0 0 20px rgba(212,175,106,.04)}

#loginGate #loginErr{color:#FF6B60;font-size:11px;margin-top:12px;min-height:14px;text-align:center;font-family:var(--lx-serif);letter-spacing:.08em}

#loginGate #loginBtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:18px;padding:15px;background:var(--lx-gold-grad);background-size:200% 100%;color:#0A0A0A;border:0;border-radius:12px;font-weight:600;font-size:13px;cursor:pointer;font-family:var(--lx-sans);letter-spacing:.22em;text-transform:uppercase;transition:all .4s cubic-bezier(.2,.7,.2,1);box-shadow:0 12px 32px rgba(212,175,106,.28),inset 0 1px 0 rgba(255,255,255,.35);animation:lxPulse 2.8s ease-in-out infinite}
#loginGate #loginBtn span{position:relative;z-index:1}
#loginGate #loginBtn em{font-style:normal;font-size:16px;transition:transform .4s}
#loginGate #loginBtn:hover{background-position:100% 0;transform:translateY(-1px);box-shadow:0 18px 40px rgba(212,175,106,.4),inset 0 1px 0 rgba(255,255,255,.4)}
#loginGate #loginBtn:hover em{transform:translateX(4px)}
#loginGate #loginBtn:active{transform:translateY(0)}
#loginGate .login-hint{margin-top:22px;text-align:center;font-size:10px;color:#5A5A62;letter-spacing:.22em;text-transform:uppercase;font-weight:500;font-family:var(--lx-serif)}

/* ============================================================================
   Aurora — UI Kit styles for OWT Admin Portal
   ============================================================================ */

/* ---- Shell --------------------------------------------------------------- */
.shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.shell--collapsed { grid-template-columns: 72px 1fr; }

/* Cursor spotlight on the whole viewport */
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  inset: 0;
  z-index: 0;
  background: radial-gradient(600px circle at var(--cx, 50%) var(--cy, 50%),
              rgba(212,175,106,.08), transparent 50%);
  transition: opacity .3s;
}

/* ---- Sidebar ------------------------------------------------------------- */
.sidebar {
  position: sticky; top: 0;
  height: 100vh;
  padding: 24px 14px;
  background: var(--glass-lo);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-right: 1px solid var(--bd);
  display: flex; flex-direction: column;
  z-index: 10;
}
.sidebar__logo {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 20px;
  border-bottom: 1px solid var(--bd);
  margin-bottom: 16px;
}
.sidebar__logo-ring {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: -.02em;
  flex-shrink: 0;
  background: radial-gradient(circle at 30% 30%, var(--gold-wash), transparent 60%);
}
.sidebar__logo-text { display:flex; flex-direction:column; line-height:1; }
.sidebar__logo-text strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--fg-1);
  letter-spacing: -.01em;
  font-weight: 500;
}
.sidebar__logo-text small {
  font-size: 9px;
  color: var(--fg-3);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 600;
}
.sidebar__section { margin: 18px 0 8px; padding: 0 12px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .24s var(--ease-out);
  position: relative;
  white-space: nowrap;
}
.sidebar__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__item:hover {
  color: var(--fg-1);
  background: var(--paper);
}
.sidebar__item.active {
  color: var(--gold);
  background: var(--gold-wash);
  border-color: var(--bd-gold);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 20px rgba(212,175,106,.12);
}
.sidebar__item.active::before {
  content: '';
  position: absolute;
  left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px var(--gold-glow);
}
.sidebar__bottom {
  margin-top: auto;
  padding: 10px 12px;
  border-top: 1px solid var(--bd);
  display: flex; align-items: center; gap: 10px;
}
.sidebar__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--violet));
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  color: #000;
  font-size: 13px;
}

/* ---- Topbar -------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0;
  height: 68px;
  background: var(--glass-lo);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--bd);
  display: flex; align-items: center;
  padding: 0 32px;
  gap: 20px;
  z-index: 9;
}
.topbar__crumb {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--fg-1);
  font-weight: 500;
  letter-spacing: -.01em;
}
.topbar__search {
  margin-left: 24px;
  flex: 1; max-width: 440px;
}
.topbar__right {
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
}
.topbar__mode {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--fg-2);
  cursor: pointer;
  border: 1px solid var(--bd);
  background: var(--paper);
  transition: all .24s var(--ease-out);
}
.topbar__mode:hover { color: var(--gold); border-color: var(--bd-gold); box-shadow: 0 0 16px var(--gold-glow); }

/* ---- Main content ------------------------------------------------------- */
.main {
  padding: 40px 56px 80px;
  max-width: 1520px;
  margin: 0 auto;
}
.page-head {
  margin-bottom: 36px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  animation: rise .6s var(--ease-out) both;
}
.page-head__intro { max-width: 720px; }
.page-head__eyebrow { margin-bottom: 12px; }
.page-head__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.8vw, 64px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--fg-1);
  margin: 0 0 14px;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.page-head__title em {
  font-style: italic;
  color: var(--gold);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.page-head__sub {
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.5;
  max-width: 60ch;
  margin: 0;
}

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

.stagger > * {
  animation: rise .5s var(--ease-out) both;
}
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .10s; }
.stagger > *:nth-child(3) { animation-delay: .15s; }
.stagger > *:nth-child(4) { animation-delay: .20s; }
.stagger > *:nth-child(5) { animation-delay: .25s; }
.stagger > *:nth-child(6) { animation-delay: .30s; }
.stagger > *:nth-child(7) { animation-delay: .35s; }
.stagger > *:nth-child(8) { animation-delay: .40s; }

/* ---- Card ---------------------------------------------------------------- */
.aurora-card {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: border-color .28s var(--ease-out), transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.aurora-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 40%);
  pointer-events: none;
}
.aurora-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
              rgba(212,175,106,.12), transparent 40%);
  transition: opacity .3s;
  pointer-events: none;
}
.aurora-card--hover:hover {
  border-color: var(--bd-hi);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.aurora-card--hover:hover::after { opacity: 1; }
.aurora-card--glow {
  border-color: var(--bd-gold);
  box-shadow: var(--shadow-gold);
}

/* ---- Stats grid --------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.stat {
  padding: 28px;
}
.stat__label { margin-bottom: 18px; }
.stat__num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--gold);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.stat__trend {
  margin-top: 14px;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--success);
  font-weight: 500;
}
.stat__trend.down { color: var(--danger); }
.stat__spark {
  position: absolute;
  right: 20px; bottom: 20px;
  opacity: .7;
}

/* ---- Button ------------------------------------------------------------- */
.aurora-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px;
  padding: 0 18px;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  border-radius: 100px;
  border: 1px solid var(--bd);
  background: var(--paper);
  color: var(--fg-1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all .24s var(--ease-out);
  font-variant-numeric: tabular-nums;
}
.aurora-btn:hover:not(:disabled) { background: var(--glass-hi); border-color: var(--bd-hi); transform: translateY(-1px); }
.aurora-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.aurora-btn:disabled { opacity: .5; cursor: not-allowed; }

.aurora-btn--primary {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 60%, var(--gold-lo) 100%);
  border-color: var(--gold);
  color: var(--fg-on-gold);
  box-shadow: 0 4px 16px rgba(212,175,106,.28), 0 1px 0 rgba(255,255,255,.3) inset;
}
.aurora-btn--primary:hover:not(:disabled) {
  box-shadow: 0 8px 28px rgba(212,175,106,.45), 0 1px 0 rgba(255,255,255,.4) inset;
  filter: brightness(1.05);
}
.aurora-btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-out);
}
.aurora-btn--primary:hover::before { transform: translateX(120%); }

.aurora-btn--spark {
  background: linear-gradient(180deg, #B5EEFF 0%, var(--spark) 70%, #4FC6E8 100%);
  border-color: var(--spark);
  color: #00262E;
  box-shadow: 0 4px 16px var(--spark-glow);
}

.aurora-btn--ghost {}
.aurora-btn--danger { color: var(--danger); border-color: var(--danger); background: var(--danger-wash); }

.aurora-btn--sm { height: 32px; padding: 0 14px; font-size: 12px; }
.aurora-btn--lg { height: 48px; padding: 0 24px; font-size: 14px; }

.aurora-btn__ripple {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple .6s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(40); opacity: 0; }
}

/* ---- Badge -------------------------------------------------------------- */
.aurora-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid transparent;
  line-height: 1.4;
}
.aurora-badge__dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: .7; }
}
.aurora-badge--sm { padding: 2px 8px; font-size: 9.5px; }
.aurora-badge--neutral { background: var(--paper); color: var(--fg-2); border-color: var(--bd); }
.aurora-badge--gold    { background: var(--gold-wash); color: var(--gold); border-color: var(--bd-gold); }
.aurora-badge--spark   { background: rgba(110,231,255,.12); color: var(--spark); border-color: rgba(110,231,255,.3); }
.aurora-badge--violet  { background: rgba(167,139,250,.12); color: var(--violet); border-color: rgba(167,139,250,.3); }
.aurora-badge--success { background: var(--success-wash); color: var(--success); border-color: rgba(48,209,88,.3); }
.aurora-badge--warn    { background: var(--warn-wash); color: var(--warn); border-color: rgba(255,178,36,.3); }
.aurora-badge--danger  { background: var(--danger-wash); color: var(--danger); border-color: rgba(255,69,58,.3); }

/* ---- Field / Input ------------------------------------------------------ */
.aurora-field { display: flex; flex-direction: column; gap: 8px; }
.aurora-field__label { display: block; }
.aurora-field__hint { font-size: 11px; color: var(--fg-3); }

.aurora-input {
  position: relative;
  display: flex; align-items: center;
}
.aurora-input input, .aurora-input select, .aurora-input textarea {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: 13.5px;
  outline: none;
  transition: all .22s var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}
.aurora-input textarea { height: auto; min-height: 80px; padding: 12px 14px; resize: vertical; }
.aurora-input--lefticon input { padding-left: 40px; }
.aurora-input input::placeholder { color: var(--fg-3); }
.aurora-input input:hover, .aurora-input select:hover, .aurora-input textarea:hover {
  border-color: var(--bd-hi);
  background: var(--glass-lo);
}
.aurora-input input:focus, .aurora-input select:focus, .aurora-input textarea:focus {
  border-color: var(--gold);
  background: var(--glass-lo);
  box-shadow: 0 0 0 4px var(--gold-wash);
}
.aurora-input select { cursor: pointer; padding-right: 36px; }

/* ---- Toggle ------------------------------------------------------------- */
.aurora-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.aurora-toggle__track {
  width: 44px; height: 26px;
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: 100px;
  position: relative;
  transition: all .28s var(--ease-out);
}
.aurora-toggle__thumb {
  position: absolute;
  left: 2px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--fg-2);
  transition: all .28s var(--ease-spring);
}
.aurora-toggle.on .aurora-toggle__track {
  background: var(--gold-wash);
  border-color: var(--gold);
  box-shadow: 0 0 14px var(--gold-glow), 0 1px 0 rgba(255,255,255,.1) inset;
}
.aurora-toggle.on .aurora-toggle__thumb {
  left: 20px;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold-glow);
}

/* ---- Table -------------------------------------------------------------- */
.aurora-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--glass);
  backdrop-filter: var(--blur);
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.aurora-table th {
  background: var(--paper);
  color: var(--fg-3);
  text-align: left;
  padding: 16px 22px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
  border-bottom: 1px solid var(--bd);
}
.aurora-table td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--bd);
  font-size: 13.5px;
  color: var(--fg-2);
}
.aurora-table tr { transition: all .2s; }
.aurora-table tr:hover td { background: var(--paper); color: var(--fg-1); }
.aurora-table tr:last-child td { border-bottom: 0; }
.aurora-table td.strong { color: var(--fg-1); font-weight: 500; }
.aurora-table td.num { font-family: var(--font-mono); font-size: 12.5px; color: var(--gold); }

/* ---- Layouts ------------------------------------------------------------ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-split-6040 { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }
.grid-split-7030 { display: grid; grid-template-columns: 7fr 3fr; gap: 24px; }

.section { margin-top: 40px; }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 18px;
}
.section__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--fg-1);
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.section__sub { color: var(--fg-3); font-size: 13px; margin-top: 4px; }

/* ---- Row helpers -------------------------------------------------------- */
.row { display: flex; align-items: center; gap: 12px; }
.row--sb { justify-content: space-between; }

/* ---- Tabs --------------------------------------------------------------- */
.tabs {
  display: inline-flex; gap: 4px;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
}
.tab {
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--r-xs);
  color: var(--fg-2);
  cursor: pointer;
  background: transparent; border: 0;
  transition: all .24s var(--ease-out);
}
.tab:hover { color: var(--fg-1); background: var(--paper); }
.tab.active {
  background: var(--glass-hi);
  color: var(--gold);
  box-shadow: var(--shadow-sm);
}

/* ---- Mobile frame ------------------------------------------------------- */
.mobile-frame {
  width: 300px;
  height: 620px;
  border-radius: 44px;
  background: #000;
  padding: 10px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.06),
    0 60px 120px rgba(0,0,0,.7),
    0 20px 40px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(255,255,255,.05);
  position: relative;
}
.mobile-frame__screen {
  width: 100%; height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--ink);
  position: relative;
}
.mobile-frame__notch {
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 28px;
  background: #000;
  border-radius: 20px;
  z-index: 10;
}

/* ---- Heat / pill / misc ------------------------------------------------- */
.pill-kv {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: 100px;
  font-size: 11.5px;
  color: var(--fg-2);
}
.pill-kv strong { color: var(--fg-1); font-weight: 500; }

.divider { height: 1px; background: var(--bd); margin: 24px 0; }

/* ---- Aurora banner (dashboard hero) ------------------------------------ */
.aurora-hero {
  padding: 44px;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(circle at 85% 15%, rgba(167,139,250,.22), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(110,231,255,.18), transparent 45%),
    linear-gradient(135deg, rgba(212,175,106,.08) 0%, rgba(10,10,18,.6) 100%);
  border: 1px solid var(--bd-gold);
  box-shadow: var(--shadow-gold);
  position: relative;
  overflow: hidden;
}
.aurora-hero__mesh {
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(ellipse at 20% 30%, var(--violet-glow), transparent 50%),
    radial-gradient(ellipse at 80% 70%, var(--spark-glow), transparent 50%);
  filter: blur(60px);
  animation: aurora-drift 30s ease-in-out infinite alternate;
  opacity: .7;
  pointer-events: none;
}

/* ---- Device-preview layout --------------------------------------------- */
.hb-split {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: flex-start;
}
.hb-section-list { display: flex; flex-direction: column; gap: 10px; }
.hb-section-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--glass);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  cursor: grab;
  transition: all .24s var(--ease-out);
}
.hb-section-row:hover {
  border-color: var(--bd-gold);
  background: var(--glass-hi);
  transform: translateX(3px);
}
.hb-section-row__grip { color: var(--fg-3); cursor: grab; }
.hb-section-row__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  width: 24px;
}
.hb-section-row__title { flex:1; font-size: 13.5px; font-weight: 500; color: var(--fg-1); }
.hb-section-row__type {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-3);
  background: var(--paper);
  padding: 3px 8px;
  border-radius: 6px;
}

/* ---- Activity log ------------------------------------------------------ */
.activity-item {
  display: flex; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bd);
}
.activity-item:last-child { border-bottom: 0; }
.activity-item__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  margin-top: 7px;
  box-shadow: 0 0 10px var(--gold-glow);
  flex-shrink: 0;
}
.activity-item__body { flex: 1; }
.activity-item__head { display: flex; gap: 10px; align-items: baseline; }
.activity-item__actor { color: var(--fg-1); font-weight: 500; font-size: 13.5px; }
.activity-item__action { color: var(--fg-2); font-size: 13px; }
.activity-item__time { color: var(--fg-3); font-size: 11px; font-family: var(--font-mono); margin-left: auto; }

/* ---- Destination tile (for mobile preview + map) ----------------------- */
.dest-tile {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7) 100%),
              linear-gradient(135deg, #2d1e4e, #4a2e5e 40%, #1a1025);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .4s var(--ease-out);
  border: 1px solid var(--bd);
}
.dest-tile:hover { transform: translateY(-4px) scale(1.01); }
.dest-tile--mykonos { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.8) 100%), linear-gradient(135deg,#2c5e7a,#1f3a52 60%,#0d1e35); }
.dest-tile--santorini { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.8) 100%), linear-gradient(135deg,#4a5680,#2e3560 60%,#15182e); }
.dest-tile--dubai { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.8) 100%), linear-gradient(135deg,#b08a4a,#7a5a30 60%,#3a2a14); }
.dest-tile--bali { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.8) 100%), linear-gradient(135deg,#5a7a4a,#355030 60%,#182818); }
.dest-tile--maldives { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.8) 100%), linear-gradient(135deg,#4aa0b0,#2a6070 60%,#0e2830); }
.dest-tile--zanzibar { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.8) 100%), linear-gradient(135deg,#b06a4a,#703a20 60%,#301810); }
.dest-tile__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px;
  color: #fff;
}
.dest-tile__flag {
  position: absolute; top: 14px; left: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.5); backdrop-filter: blur(8px);
  display: grid; place-items: center;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,.15);
}
.dest-tile__tier {
  position: absolute; top: 14px; right: 14px;
}
.dest-tile__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0 0 4px;
}
.dest-tile__meta { font-size: 11px; opacity: .8; display: flex; gap: 8px; }

/* Role token */
.role-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 6px;
  letter-spacing: .03em;
}
.role-chip--SUPER_ADMIN { background: var(--rose-glow); color: var(--rose); border: 1px solid var(--rose); }
.role-chip--ADMIN { background: var(--violet-glow); color: var(--violet); border: 1px solid rgba(167,139,250,.4); }
.role-chip--BRAND_MANAGER { background: var(--gold-wash); color: var(--gold); border: 1px solid var(--bd-gold); }
.role-chip--AGENT { background: rgba(110,231,255,.1); color: var(--spark); border: 1px solid rgba(110,231,255,.3); }
.role-chip--CUSTOMER { background: var(--paper); color: var(--fg-2); border: 1px solid var(--bd); }

/* Heat strip (mini sparkline alt) */
.spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 36px;
}
.spark-bars span {
  width: 3px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(212,175,106,.1) 100%);
  border-radius: 1px;
  transition: all .3s var(--ease-out);
}

/* ================= LUXURY ADMIN PANEL ================= */
#view-admin{background:radial-gradient(ellipse at top,rgba(212,175,106,.04),transparent 60%)}
#view-admin .admin-wrap{max-width:1240px;margin:0 auto;padding:48px 32px 80px;animation:lxFadeUp .6s cubic-bezier(.2,.7,.2,1) both}
#view-admin h1{font-family:var(--lx-serif);font-size:48px;font-weight:400;letter-spacing:-.01em;margin:0 0 6px;background:var(--lx-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variation-settings:"opsz" 144,"SOFT" 60}
#view-admin .sub{font-family:var(--lx-serif);color:#A1A1A6;font-size:14px;margin-bottom:36px;letter-spacing:.04em;font-weight:400}

#view-admin .adm-tabs{display:inline-flex;gap:3px;background:var(--glass);backdrop-filter:blur(16px);padding:5px;border-radius:var(--r);border:1px solid var(--bd-glass);margin-bottom:28px;box-shadow:var(--shadow)}
#view-admin .adm-tab{padding:11px 24px;background:transparent;border:0;color:#8A8A92;cursor:pointer;font-size:12px;border-radius:9px;font-weight:500;font-family:var(--lx-sans);letter-spacing:.08em;text-transform:uppercase;transition:all .3s cubic-bezier(.2,.7,.2,1);position:relative}
#view-admin .adm-tab:hover{color:#F5F5F7}
#view-admin .adm-tab.active{background:rgba(255,255,255,.1);color:var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.06) inset;backdrop-filter:blur(8px)}

#view-admin .adm-panel{display:none;background:rgba(18,18,26,.45);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--bd-glass);border-radius:var(--r-xl);padding:36px;position:relative;box-shadow:var(--shadow-lg)}
#view-admin .adm-panel::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 50%);pointer-events:none}
#view-admin .adm-panel.active{display:block;animation:lxFadeUp .4s cubic-bezier(.2,.7,.2,1) both}
#view-admin .adm-panel h3{font-family:var(--lx-serif);font-size:22px;font-weight:500;color:#F5F5F7;margin:0 0 4px;letter-spacing:-.005em}
#view-admin .adm-panel h3+*{margin-top:20px}

#view-admin table{width:100%;border-collapse:separate;border-spacing:0;margin-top:16px;background:var(--glass);backdrop-filter:blur(6px);border-radius:var(--r);overflow:hidden;border:1px solid var(--bd)}
#view-admin th,#view-admin td{padding:14px 18px;text-align:left;font-size:13px;color:#F5F5F7;border-bottom:1px solid var(--lx-line-soft)}
#view-admin tr:last-child td{border-bottom:0}
#view-admin tbody tr{transition:background .2s}
#view-admin tbody tr:hover{background:rgba(212,175,106,.04)}
#view-admin th{color:var(--lx-gold);font-weight:500;text-transform:uppercase;font-size:10px;letter-spacing:.22em;font-family:var(--lx-sans);background:rgba(212,175,106,.04);padding-top:16px;padding-bottom:16px}
#view-admin td b{font-family:var(--lx-serif);font-weight:500;color:#F5F5F7;font-size:14px}

#view-admin .adm-btn{padding:9px 18px;background:var(--lx-gold-grad);background-size:200% 100%;color:#0A0A0A;border:0;border-radius:9px;font-weight:600;font-size:11px;cursor:pointer;font-family:var(--lx-sans);letter-spacing:.16em;text-transform:uppercase;margin-right:8px;transition:all .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 4px 14px rgba(212,175,106,.2),inset 0 1px 0 rgba(255,255,255,.3)}
#view-admin .adm-btn:hover{background-position:100% 0;transform:translateY(-1px);box-shadow:0 8px 22px rgba(212,175,106,.32)}
#view-admin .adm-btn.ghost{background:transparent;color:#A1A1A6;border:1px solid rgba(255,255,255,.12);box-shadow:none}
#view-admin .adm-btn.ghost:hover{border-color:var(--lx-gold);color:var(--lx-gold);background:rgba(212,175,106,.06)}
#view-admin .adm-btn.danger{background:linear-gradient(135deg,#FF6B60,#C62828);color:#fff;box-shadow:0 4px 14px rgba(255,69,58,.25)}
#view-admin .adm-btn.danger:hover{box-shadow:0 8px 22px rgba(255,69,58,.4)}

/* ============================================================================
   Admin Panel — left-sidebar shell over Aurora design system
   ============================================================================ */

/* ---- Outer brand topbar (OWT GROUP + main nav) -------------------------- */
.brand-bar {
  position: sticky; top: 0;
  height: 64px;
  background: var(--glass-lo);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--bd);
  display: flex; align-items: center;
  padding: 0 24px;
  gap: 24px;
  z-index: 30;
}
.brand-bar__logo {
  display: flex; align-items: center; gap: 12px;
  padding-right: 24px;
  border-right: 1px solid var(--bd);
}
.brand-bar__logo-mark {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: grid; place-items: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--gold);
  background: radial-gradient(circle at 30% 30%, var(--gold-wash), transparent 60%);
  letter-spacing: -.02em;
}
.brand-bar__logo-text {
  display: flex; flex-direction: column; line-height: 1;
}
.brand-bar__logo-text strong {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-1);
  letter-spacing: .02em;
}
.brand-bar__logo-text small {
  font-size: 8.5px;
  color: var(--fg-3);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 600;
}

.brand-bar__nav {
  display: flex; align-items: center; gap: 2px;
}
.brand-bar__nav-item {
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-2);
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .22s var(--ease-out);
  display: inline-flex; align-items: center; gap: 6px;
}
.brand-bar__nav-item:hover { color: var(--fg-1); background: var(--paper); }
.brand-bar__nav-item.active {
  color: var(--gold);
  background: var(--gold-wash);
  border-color: var(--bd-gold);
  box-shadow: 0 0 12px var(--gold-glow);
}

.brand-bar__right {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}
.brand-bar__bell {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--fg-2);
  cursor: pointer;
  border: 1px solid var(--bd);
  background: var(--paper);
  transition: all .22s var(--ease-out);
}
.brand-bar__bell:hover { color: var(--gold); border-color: var(--bd-gold); }
.brand-bar__bell-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  border-radius: 100px;
  background: var(--danger);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  display: grid; place-items: center;
  padding: 0 5px;
  border: 2px solid var(--ink);
}
.brand-bar__pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px;
  padding: 0 14px 0 6px;
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: 100px;
  font-size: 12px;
  color: var(--fg-1);
  cursor: pointer;
  transition: all .22s var(--ease-out);
}
.brand-bar__pill:hover { border-color: var(--bd-gold); }
.brand-bar__pill-mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--violet));
  display: grid; place-items: center;
  font-family: var(--font-ui);
  color: #000;
  font-weight: 700;
  font-size: 11px;
}
.brand-bar__pill small {
  color: var(--fg-3); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}

/* ---- Brand filter strip ------------------------------------------------- */
.brand-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--bd);
  background: var(--glass-lo);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  flex-wrap: wrap;
  position: sticky; top: 64px;
  z-index: 25;
}
.brand-strip__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-right: 6px;
}
.brand-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 14px;
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: 100px;
  font-size: 11.5px;
  color: var(--fg-2);
  cursor: pointer;
  transition: all .22s var(--ease-out);
  white-space: nowrap;
}
.brand-chip:hover { color: var(--fg-1); border-color: var(--bd-hi); }
.brand-chip.active {
  color: var(--gold);
  background: var(--gold-wash);
  border-color: var(--bd-gold);
  box-shadow: 0 0 10px var(--gold-glow);
}
.brand-chip__dot {
  width: 6px; height: 6px; border-radius: 50%;
}

/* ---- Admin shell -------------------------------------------------------- */
.admin-shell {
  display: grid;
  grid-template-columns: 256px 1fr;
  min-height: calc(100vh - 64px - 57px);
  position: relative;
}
.admin-shell--collapsed { grid-template-columns: 72px 1fr; }

/* ---- LEFT ADMIN SIDEBAR ------------------------------------------------- */
.adside {
  position: sticky;
  top: 121px;
  height: calc(100vh - 121px);
  background: var(--glass-lo);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-right: 1px solid var(--bd);
  display: flex; flex-direction: column;
  z-index: 12;
  overflow: hidden;
}
.adside__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 14px;
  gap: 8px;
}
.adside__title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fg-1);
  display: flex; align-items: center; gap: 10px;
}
.adside__title-mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--gold-wash);
  border: 1px solid var(--bd-gold);
  display: grid; place-items: center;
  color: var(--gold);
  flex-shrink: 0;
}
.adside__toggle {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--bd);
  color: var(--fg-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .22s var(--ease-out);
}
.adside__toggle:hover { color: var(--gold); border-color: var(--bd-gold); }

.adside__search {
  padding: 0 14px 14px;
  position: relative;
}
.adside__search input {
  width: 100%; height: 34px;
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 0 12px 0 32px;
  outline: none;
  transition: all .22s var(--ease-out);
}
.adside__search input:focus { border-color: var(--gold); background: var(--glass-lo); box-shadow: 0 0 0 3px var(--gold-wash); }
.adside__search input::placeholder { color: var(--fg-3); }
.adside__search-icon {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  color: var(--fg-3);
  pointer-events: none;
}

.adside__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 14px;
}
.adside__scroll::-webkit-scrollbar { width: 6px; }
.adside__scroll::-webkit-scrollbar-thumb { background: var(--bd-hi); border-radius: 3px; }

.adside__group { margin-top: 12px; }
.adside__group-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-3);
  padding: 6px 14px 6px;
  margin-bottom: 2px;
}

.adside__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .22s var(--ease-out);
  position: relative;
  white-space: nowrap;
}
.adside__item-icon { flex-shrink: 0; }
.adside__item-label {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adside__item-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--paper);
  color: var(--fg-3);
  border: 1px solid var(--bd);
  flex-shrink: 0;
}
.adside__item-count--alert {
  background: var(--danger-wash);
  color: var(--danger);
  border-color: rgba(255,69,58,.35);
  box-shadow: 0 0 10px rgba(255,69,58,.25);
}
.adside__item-count--warn {
  background: var(--warn-wash);
  color: var(--warn);
  border-color: rgba(255,178,36,.35);
}
.adside__item-count--ok {
  background: var(--success-wash);
  color: var(--success);
  border-color: rgba(48,209,88,.35);
}
.adside__item:hover {
  color: var(--fg-1);
  background: var(--paper);
}
.adside__item:hover .adside__item-count { color: var(--fg-1); }
.adside__item.active {
  color: var(--gold);
  background: var(--gold-wash);
  border-color: var(--bd-gold);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 20px rgba(212,175,106,.12);
}
.adside__item.active::before {
  content: '';
  position: absolute;
  left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px var(--gold-glow);
}

.adside__foot {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid var(--bd);
  display: flex; align-items: center; gap: 10px;
}
.adside__foot-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--violet));
  display: grid; place-items: center;
  font-family: var(--font-ui);
  font-weight: 700;
  color: #000;
  font-size: 12px;
  flex-shrink: 0;
}
.adside__foot-name { font-size: 12px; color: var(--fg-1); font-weight: 500; }
.adside__foot-role { font-size: 9.5px; color: var(--fg-3); letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; }

/* Collapsed mode */
.admin-shell--collapsed .adside__title-label,
.admin-shell--collapsed .adside__group-label,
.admin-shell--collapsed .adside__item-label,
.admin-shell--collapsed .adside__item-count,
.admin-shell--collapsed .adside__search,
.admin-shell--collapsed .adside__foot > div:not(.adside__foot-avatar) {
  display: none;
}
.admin-shell--collapsed .adside__item {
  justify-content: center;
  padding: 11px 0;
  position: relative;
}
.admin-shell--collapsed .adside__item .adside__mini-badge {
  position: absolute;
  top: 4px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 6px var(--danger);
  display: block;
}
.adside__mini-badge { display: none; }
.admin-shell--collapsed .adside__head { justify-content: center; padding: 14px 0; }
.admin-shell--collapsed .adside__foot { justify-content: center; padding: 14px 0; }
.admin-shell--collapsed .adside__group-label::before {
  content: '';
  display: block;
  height: 1px;
  margin: 6px 14px;
  background: var(--bd);
}

/* ---- Main content ------------------------------------------------------- */
.admin-main {
  padding: 36px 40px 80px;
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
}

.admin-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  animation: rise .5s var(--ease-out) both;
}
.admin-head__crumbs {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-3);
  font-size: 11.5px;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.admin-head__crumbs span.sep { opacity: .5; }
.admin-head__crumbs span.crumb-cur { color: var(--gold); }
.admin-head__title {
  font-family: var(--font-ui);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--fg-1);
  margin: 0;
}
.admin-head__title em {
  font-style: normal;
  font-weight: 500;
  color: var(--fg-1);
}
.admin-head__sub {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--fg-2);
  line-height: 1.5;
  max-width: 60ch;
}
.admin-head__actions {
  display: flex; align-items: center; gap: 10px;
}

/* ---- Stats strip (re-do of original 6 tiles) --------------------------- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.stat-tile {
  padding: 18px 20px;
  background: var(--glass);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  transition: all .28s var(--ease-out);
  cursor: pointer;
}
.stat-tile:hover { border-color: var(--bd-gold); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.stat-tile__label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.stat-tile__label .dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.stat-tile__value {
  font-family: var(--font-ui);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--fg-1);
}
.stat-tile__value--gold { color: var(--gold); }
.stat-tile__value--green { color: var(--success); }
.stat-tile__value--violet { color: var(--violet); }
.stat-tile__value--spark { color: var(--spark); }
.stat-tile__delta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--fg-3);
  display: flex; align-items: center; gap: 4px;
}
.stat-tile__delta.up { color: var(--success); }
.stat-tile__delta.down { color: var(--danger); }
.stat-tile__spark {
  position: absolute;
  right: 14px; top: 16px;
  opacity: .55;
}

/* ---- Filter bar -------------------------------------------------------- */
.filter-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.filter-bar__search {
  flex: 1; min-width: 280px;
  max-width: 480px;
}
.seg {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 2px;
}
.seg__btn {
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--fg-2);
  border-radius: var(--r-xs);
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: all .2s var(--ease-out);
  display: inline-flex; align-items: center; gap: 5px;
}
.seg__btn:hover { color: var(--fg-1); }
.seg__btn.active {
  background: var(--glass-hi);
  color: var(--gold);
  box-shadow: var(--shadow-sm);
}
.seg__btn .seg__count {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 100px;
  background: var(--paper);
  color: var(--fg-3);
}
.seg__btn.active .seg__count { background: var(--gold-wash); color: var(--gold); }

/* ---- Shared-Quotes table ---------------------------------------------- */
.sq-board {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: flex-start;
}
.sq-board--full { grid-template-columns: 1fr; }

.sq-table-wrap {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.sq-table-wrap__head {
  padding: 22px 24px 14px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--bd);
  background: var(--glass-lo);
}
.sq-table-wrap__head h3 {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--fg-1);
  margin: 0 0 6px;
}
.sq-table-wrap__head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-3);
}

.sq-table { width: 100%; border-collapse: collapse; }
.sq-table th {
  background: transparent;
  color: var(--fg-3);
  text-align: left;
  padding: 14px 22px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  border-bottom: 1px solid var(--bd);
  cursor: pointer;
  user-select: none;
}
.sq-table th .sort-mark { margin-left: 4px; opacity: .35; }
.sq-table th:hover { color: var(--gold); }
.sq-table td {
  padding: 14px 22px;
  border-bottom: 1px solid var(--bd);
  font-size: 13px;
  color: var(--fg-2);
  vertical-align: middle;
}
.sq-table tr { transition: all .2s; cursor: pointer; }
.sq-table tr:last-child td { border-bottom: 0; }
.sq-table tr:hover td { background: rgba(212,175,106,.04); color: var(--fg-1); }
.sq-table tr.selected td { background: var(--gold-wash); color: var(--fg-1); }
.sq-table tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

.sq-ref { font-family: var(--font-mono); font-size: 11.5px; color: var(--gold); }
.sq-client__name { color: var(--fg-1); font-weight: 500; font-size: 13.5px; }
.sq-client__email { color: var(--fg-3); font-size: 11px; margin-top: 2px; font-family: var(--font-mono); }
.sq-mono { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); font-feature-settings: 'tnum'; }
.sq-dim { color: var(--fg-3); }

.sq-opens-cell {
  display: inline-flex; align-items: center; gap: 8px;
}
.sq-opens-cell .num { font-family: var(--font-mono); font-size: 14px; color: var(--gold); }
.sq-opens-bar {
  display: inline-flex; align-items: flex-end; gap: 2px; height: 18px;
}
.sq-opens-bar span {
  width: 3px;
  background: var(--gold);
  border-radius: 1px;
  opacity: .85;
}

.sq-seen-eye {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--bd);
  color: var(--fg-3);
}
.sq-seen-eye.on {
  background: var(--success-wash);
  border-color: rgba(48,209,88,.35);
  color: var(--success);
}

.sq-device {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--fg-2);
}
.sq-device__icons {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fg-3);
}

.sq-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.sq-iconbtn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--bd);
  color: var(--fg-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .2s var(--ease-out);
}
.sq-iconbtn:hover { color: var(--gold); border-color: var(--bd-gold); transform: translateY(-1px); box-shadow: 0 0 12px var(--gold-glow); }
.sq-iconbtn.danger:hover { color: var(--danger); border-color: var(--danger); box-shadow: 0 0 12px rgba(255,69,58,.35); }

/* Pagination footer */
.sq-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--bd);
  background: var(--glass-lo);
  font-size: 12px;
  color: var(--fg-3);
}
.sq-foot__pages {
  display: inline-flex; align-items: center; gap: 6px;
}
.sq-foot__page {
  min-width: 30px; height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--bd);
  color: var(--fg-2);
  cursor: pointer;
  display: inline-grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  transition: all .2s;
}
.sq-foot__page:hover { color: var(--fg-1); border-color: var(--bd-hi); }
.sq-foot__page.active { color: var(--gold); border-color: var(--bd-gold); background: var(--gold-wash); }

/* ---- Right detail panel ------------------------------------------------ */
.sq-detail {
  position: sticky;
  top: 142px;
  padding: 24px;
  background: var(--glass);
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  gap: 22px;
}
.sq-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sq-detail__ref {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--gold);
  letter-spacing: .03em;
}
.sq-detail__client {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -.015em;
  margin: 4px 0 2px;
  line-height: 1.2;
}
.sq-detail__email { color: var(--fg-3); font-size: 12px; font-family: var(--font-mono); }
.sq-detail__close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--bd);
  color: var(--fg-2);
  cursor: pointer;
  display: grid; place-items: center;
}
.sq-detail__close:hover { color: var(--danger); border-color: var(--danger); }

.sq-detail__kv { display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; font-size: 12.5px; }
.sq-detail__kv .k { color: var(--fg-3); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; align-self: center; }
.sq-detail__kv .v { color: var(--fg-1); }

.sq-detail__timeline { display: flex; flex-direction: column; gap: 0; }
.sq-tl-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  padding: 8px 0;
  align-items: flex-start;
  position: relative;
}
.sq-tl-item::before {
  content: '';
  position: absolute;
  left: 8px; top: 20px; bottom: -2px;
  width: 1px; background: var(--bd);
}
.sq-tl-item:last-child::before { display: none; }
.sq-tl-item__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 6px;
  margin-left: 5px;
  box-shadow: 0 0 8px var(--gold-glow);
  z-index: 1;
}
.sq-tl-item__dot.spark { background: var(--spark); box-shadow: 0 0 8px var(--spark-glow); }
.sq-tl-item__dot.violet { background: var(--violet); box-shadow: 0 0 8px var(--violet-glow); }
.sq-tl-item__dot.success { background: var(--success); box-shadow: 0 0 8px rgba(48,209,88,.5); }
.sq-tl-item__body { font-size: 12.5px; color: var(--fg-1); }
.sq-tl-item__body small { display: block; color: var(--fg-3); font-size: 11px; margin-top: 2px; }
.sq-tl-item__time { color: var(--fg-3); font-size: 10.5px; font-family: var(--font-mono); white-space: nowrap; }

.sq-detail__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Generic block / empty stub --------------------------------------- */
.stub {
  padding: 40px;
  text-align: center;
  background: var(--glass);
  border: 1px dashed var(--bd-hi);
  border-radius: var(--r-xl);
  color: var(--fg-3);
}
.stub__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold-wash);
  border: 1px solid var(--bd-gold);
  display: grid; place-items: center;
  color: var(--gold);
  margin: 0 auto 18px;
}
.stub h3 { font-family: var(--font-ui); font-size: 22px; color: var(--fg-1); margin: 0 0 8px; font-weight: 600; letter-spacing: -.015em; }
.stub p { max-width: 50ch; margin: 0 auto; font-size: 13px; line-height: 1.6; }

/* Generic small icon-only button used in tables */
.kbd {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: 6px;
  margin-left: 8px;
}

/* ---- Approval pill (table cell) --------------------------------------- */
.app-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: capitalize;
}
.app-pill--pending { background: var(--paper); color: var(--fg-3); border: 1px solid var(--bd); }
.app-pill--approved { background: var(--success-wash); color: var(--success); border: 1px solid rgba(48,209,88,.35); box-shadow: 0 0 12px rgba(48,209,88,.18); }
.app-pill--declined { background: var(--danger-wash); color: var(--danger); border: 1px solid rgba(255,69,58,.35); }

/* ---- Follow-up status pill -------------------------------------------- */
.fup {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: capitalize;
}
.fup--viewed { background: var(--success-wash); color: var(--success); border: 1px solid rgba(48,209,88,.35); }
.fup--hot { background: var(--danger-wash); color: var(--danger); border: 1px solid rgba(255,69,58,.4); box-shadow: 0 0 14px rgba(255,69,58,.25); }
.fup--waiting { background: var(--paper); color: var(--fg-3); border: 1px solid var(--bd); }
.fup--warm { background: var(--warn-wash); color: var(--warn); border: 1px solid rgba(255,178,36,.35); }

/* ---- Insights / cards -------------------------------------------------- */
.card-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.card-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.subtle-card {
  padding: 22px;
  background: var(--glass);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.subtle-card h4 { font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--fg-1); margin: 0 0 6px; letter-spacing: -.01em; }
.subtle-card .p { margin: 0; font-size: 12.5px; color: var(--fg-3); }

/* Tweak panel quick attach */
.tweaks-attach { position: fixed; bottom: 20px; right: 20px; z-index: 50; }

/* ---- Bring-your-own scrollbar styles --------------------------------- */
.admin-shell *::-webkit-scrollbar { height: 8px; width: 8px; }
.admin-shell *::-webkit-scrollbar-thumb { background: var(--bd-hi); border-radius: 4px; }
.admin-shell *::-webkit-scrollbar-track { background: transparent; }

/* ---- Reduce motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .admin-head, .stagger > * { animation: none !important; }
}

#view-admin input,#view-admin textarea,#view-admin select{padding:12px 14px;background:rgba(8,8,12,.6);border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#F5F5F7;font-size:13px;font-family:var(--lx-sans);outline:none;margin-right:6px;transition:all .3s;box-sizing:border-box}
#view-admin input:focus,#view-admin textarea:focus,#view-admin select:focus{border-color:var(--lx-gold);box-shadow:0 0 0 3px rgba(212,175,106,.1)}
#view-admin textarea{font-family:var(--lx-sans);line-height:1.6;resize:vertical}
#view-admin .form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--lx-line-soft)}
#view-admin label{font-family:var(--lx-serif)!important;font-weight:500;font-size:10px!important;color:var(--lx-gold)!important;letter-spacing:.22em!important;text-transform:uppercase!important}

#view-admin .log-entry{padding:14px 18px;border-bottom:1px solid var(--lx-line-soft);font-size:12.5px;color:#A1A1A6;font-family:var(--lx-sans);display:flex;align-items:center;gap:12px;transition:background .2s}
#view-admin .log-entry:hover{background:rgba(212,175,106,.03)}
#view-admin .log-entry:last-child{border-bottom:0}
#view-admin .log-entry b{color:var(--lx-gold);font-weight:500;font-family:var(--lx-serif);font-size:13px;min-width:100px}
#view-admin .log-entry .ts{color:#5A5A62;font-size:10.5px;letter-spacing:.06em;min-width:150px;font-variant-numeric:tabular-nums}

.nav .user-chip{padding:8px 16px;border:1px solid var(--bd-glass);border-radius:100px;color:var(--tx2);background:var(--glass);backdrop-filter:blur(8px);font-weight:500;font-size:11px;margin-left:8px;cursor:pointer;letter-spacing:.04em;transition:all .3s cubic-bezier(.2,.8,.2,1);font-family:var(--fb)}
.nav .user-chip:hover{border-color:var(--gold);color:var(--tx);background:var(--glass-a);box-shadow:0 4px 12px rgba(212,175,106,.1)}
.nav .user-chip b{color:var(--gold);font-weight:600;margin-left:4px}

/* Inclusion / Exclusion checkbox groups */
.check-groups{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.check-grp{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px 16px}
.check-grp .grp-title{font-size:10px;color:#D4AF6A;letter-spacing:.22em;text-transform:uppercase;font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.check-grp .grp-title button{background:transparent;border:0;color:#A1A1A6;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;font-family:inherit}
.check-grp .grp-title button:hover{color:#D4AF6A}
.check-grp .grp-items{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.check-grp label.chk{display:flex;align-items:center;gap:8px;color:#F5F5F7;font-size:12.5px;cursor:pointer;padding:6px 0;text-transform:none;letter-spacing:0;font-weight:400;font-family:var(--fb)}
.check-grp label.chk input{width:auto;margin:0;accent-color:#D4AF6A;cursor:pointer;flex-shrink:0}
.check-grp label.chk:hover{color:#D4AF6A}
@media(max-width:900px){.check-grp .grp-items{grid-template-columns:1fr}}

/* In-preview edit pencil buttons */
.prev-edit{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(212,175,106,.4);background:rgba(255,255,255,.92);color:#8B6B3A;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .25s;box-shadow:0 4px 14px rgba(0,0,0,.15);z-index:10}
.page .sect:hover .prev-edit,.page .title:hover .prev-edit,.page .foot:hover .prev-edit{opacity:1}
.prev-edit:hover{background:#D4AF6A;color:#0A0A0A;transform:scale(1.08)}
@media print{.prev-edit{display:none!important}}

/* Editor top toolbar — liquid glass */
.editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:rgba(16,16,22,.5);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--bd-glass);position:sticky;top:68px;z-index:40;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.editor-toolbar .etb-left{font-family:var(--fb);font-size:12px;color:var(--tx3);letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.editor-toolbar .etb-right{display:flex;gap:12px;flex-wrap:wrap}
.etb-btn{padding:9px 18px;background:var(--glass);border:1px solid var(--bd-glass);border-radius:var(--r-sm);color:var(--tx);font-family:var(--fb);font-size:11.5px;font-weight:500;letter-spacing:.04em;cursor:pointer;transition:all .3s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(8px)}
.etb-btn:hover{background:var(--glass-a);border-color:var(--gold);color:var(--gold);transform:translateY(-1px);box-shadow:0 4px 16px rgba(212,175,106,.1)}
.etb-btn.primary{background:var(--gold);color:var(--tx-on-gold);border-color:transparent;box-shadow:0 4px 16px rgba(212,175,106,.25),0 1px 0 rgba(255,255,255,.2) inset}
.etb-btn.primary:hover{background:var(--gold-light);box-shadow:0 8px 28px rgba(212,175,106,.35)}
@media(max-width:860px){.editor-toolbar{padding:10px 14px}.editor-toolbar .etb-left{display:none}.etb-btn{padding:7px 12px;font-size:11px}}

/* ===== Inline AI Autofill zones (per-section) ===== */
.inline-ai-wrap{margin:10px 0 14px;padding:0}
.iai-tabs{display:flex;gap:4px;margin-bottom:8px}
.iai-tab{padding:5px 10px;border-radius:5px;font-size:11px;cursor:pointer;border:0.5px solid rgba(255,255,255,0.08);background:transparent;color:rgba(255,255,255,0.35);transition:all 0.15s;font-family:inherit}
.iai-tab.active{background:rgba(196,165,90,0.1);border-color:rgba(196,165,90,0.25);color:#C4A55A}
.iai-drop{border:1.5px dashed rgba(196,165,90,0.25);border-radius:10px;background:rgba(196,165,90,0.03);transition:all 0.2s}
.iai-drop.drag-over{border-color:#C4A55A;background:rgba(196,165,90,0.08);transform:scale(1.01)}
.iai-drop-inner{padding:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.iai-icon{width:36px;height:36px;border-radius:8px;background:rgba(196,165,90,0.1);border:0.5px solid rgba(196,165,90,0.2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.iai-drop-text{flex:1;min-width:140px}
.iai-label{font-size:11px;font-weight:500;color:#C4A55A}
.iai-hint{font-size:10px;color:rgba(255,255,255,0.3);margin-top:2px}
.iai-drop-btns{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap}
.iai-btn{display:flex;align-items:center;gap:4px;padding:5px 9px;border-radius:6px;font-size:10px;cursor:pointer;border:0.5px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.5);transition:all 0.15s;font-family:inherit}
.iai-btn:hover{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.8)}
.iai-btn.gold{background:rgba(196,165,90,0.12);border-color:rgba(196,165,90,0.3);color:#C4A55A}
.iai-btn.gold:hover{background:rgba(196,165,90,0.2)}
.iai-text-zone{border:1.5px solid rgba(196,165,90,0.2);border-radius:10px;background:rgba(196,165,90,0.02);overflow:hidden}
.iai-textarea{width:100%;min-height:90px;background:transparent;border:none;outline:none;padding:10px 12px;font-size:11px;color:rgba(255,255,255,0.7);resize:vertical;font-family:inherit;line-height:1.5;box-sizing:border-box}
.iai-textarea::placeholder{color:rgba(255,255,255,0.2)}
.iai-text-footer{padding:6px 10px;border-top:0.5px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.02)}
.iai-chars{font-size:9px;color:rgba(255,255,255,0.2)}
.iai-extract-btn{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:6px;font-size:10px;font-weight:500;cursor:pointer;background:#C4A55A;color:#000;border:none;font-family:inherit;transition:all 0.15s}
.iai-extract-btn:hover{background:#E8C06A}
.iai-proc{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:11px;color:#C4A55A;background:rgba(196,165,90,0.05);border-radius:8px;margin-top:4px}
.iai-spinner{width:14px;height:14px;border:1.5px solid rgba(196,165,90,0.2);border-top-color:#C4A55A;border-radius:50%;animation:iaiSpin 0.8s linear infinite;flex-shrink:0}
@keyframes iaiSpin{to{transform:rotate(360deg)}}
.iai-result{margin-top:6px;background:rgba(48,209,88,0.05);border:0.5px solid rgba(48,209,88,0.2);border-radius:8px;padding:10px 12px}
.iai-result-title{font-size:10px;color:#30D158;font-weight:500;margin-bottom:8px}
.iai-result-row{display:flex;gap:8px;font-size:11px;padding:3px 0;border-bottom:0.5px solid rgba(255,255,255,0.04)}
.iai-result-row:last-of-type{border-bottom:none}
.iai-result-key{color:rgba(255,255,255,0.3);min-width:80px;font-size:10px;flex-shrink:0;text-transform:capitalize}
.iai-result-val{color:rgba(255,255,255,0.75);word-break:break-word}
.iai-clear-btn{margin-top:8px;font-size:10px;color:rgba(255,255,255,0.3);background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
.iai-clear-btn:hover{color:rgba(255,255,255,0.6)}
@media print{.inline-ai-wrap{display:none !important}}

/* ===== Hero image slideshow — editor section layout ===== */
.hero-slideshow-section{display:flex;flex-direction:column;gap:8px}
.hero-preview-box{width:100%;height:150px;border-radius:8px;overflow:hidden;background:#0E0E18;position:relative;flex-shrink:0}
.hero-preview-box img{width:100%;height:100%;object-fit:contain;background:#0E0E18;display:block;transition:opacity 0.3s ease}
.hero-slide-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;width:100%}
.hero-slide-row{display:flex;align-items:center;gap:8px;padding:6px 8px;background:rgba(255,255,255,0.03);border-radius:7px;border:0.5px solid rgba(255,255,255,0.06);width:100%;box-sizing:border-box;min-height:52px}
.hero-slide-thumb{width:44px;height:36px;border-radius:5px;overflow:hidden;flex-shrink:0;background:#1A1A28}
.hero-slide-thumb img{width:100%;height:100%;object-fit:contain;background:#1A1A28;display:block}
.hero-slide-info{flex:1;min-width:0;overflow:hidden}
.hero-slide-label{font-size:10px;color:rgba(255,255,255,0.5);white-space:nowrap;display:flex;align-items:center;gap:6px}
.hero-slide-url{font-size:9px;color:rgba(255,255,255,0.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hero-slide-actions{display:flex;gap:4px;flex-shrink:0}
.hero-slide-actions button{background:transparent;border:1px solid var(--bd);border-radius:6px;color:var(--tx2);padding:4px 7px;font-size:11px;cursor:pointer;line-height:1}
.hero-slide-actions button.del{color:var(--danger);font-size:13px;padding:4px 8px}

/* Free-day card styles removed 2026-05-12 — clean simple inline "Free day" label
   replaces the rich card. No class-based CSS needed. */

/* ============================================================================
   MOBILE OPTIMISATION — 2026-05-18
   Phone-first overrides so agents can fully use QuoteGen in the field.
   Three breakpoints: ≤860 (tablet+phone shared), ≤768 (proper phone), ≤480.
   Targets the real pain we audited: iOS input zoom (font<16px), 31px nav
   touch targets, 256px admin sidebar on phone, 140×170 Q bubble, modal
   centering, 2-col form grids, table x-overflow, safe-area insets.
   ============================================================================ */

/* iOS auto-zooms any input below 16px on focus. Universal bump for tablet+phone. */
@media (max-width: 860px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]),
  textarea, select{ font-size:16px !important; }
  /* 44px min touch targets — Apple HIG */
  .nav .tab, .adside__item, .seg__btn, .brand-chip,
  .modal-close, .adm-btn, .etb-btn{ min-height:44px; }
  /* Bigger close target on modals */
  .modal-close{ width:40px !important; height:40px !important; font-size:20px !important; }
}

/* ────────────── Phone breakpoint (≤768) ────────────── */
@media (max-width: 768px){
  /* ───── PERFORMANCE: disable expensive GPU effects on mobile ───── */
  *{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .glass, .glass::before{
    background: var(--bg-secondary) !important;
  }
  /* Pause all non-essential animations */
  body::before{
    animation: none !important;
  }
  .stat, .brand-card, .card, .item, .btn, .badge, .nav .tab, .nav .agent,
  .hsug-item, .libcard, .brand-add, .dest-tile, .q-bubble{
    animation: none !important;
    transition: none !important;
  }
  /* Simplify shadows */
  .stat, .card, .item, .modal-bg, #qPanel, .adside{
    box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
  }
  /* Content visibility for off-screen panels */
  .panel, .adside, .modal-bg, .q-msg{
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
  }

  /* ───── Q PANEL: optimized for mobile ───── */
  #qFloatingBtn{
    animation: none !important;
  }
  #qFloatingBtn svg{
    transition: transform .15s !important;
  }
  #qFloatingBtn.q-listening{
    animation: none !important;
  }
  #qPanel{
    background: #0E0E18 !important;
    border: 1px solid rgba(196,165,90,.15) !important;
  }
  #qPanel .q-msg{
    background: #141422 !important;
    border: none !important;
  }
  #qPanel .q-msg.q-user{
    background: rgba(196,165,90,.15) !important;
  }
  #qPanel .q-head{
    background: #0E0E18 !important;
  }
  #qContextMenu{
    background: #141422 !important;
    backdrop-filter: none !important;
  }
  /* Mic button still needs visual feedback */
  .q-mic.q-recording{
    animation: none !important;
    background: #FF453A !important;
    color: #fff !important;
  }

  /* Top nav: horizontal scroll instead of cramped wrap */
  .nav{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    padding:10px 12px !important;
    gap:8px;
    align-items:center;
    scrollbar-width:none;
    padding-top:calc(10px + env(safe-area-inset-top, 0)) !important;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav .brand{ flex-shrink:0; font-size:14px !important; line-height:1.1 }
  .nav .brand small{ font-size:7px !important; letter-spacing:.22em }
  .nav .tabs{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    flex:1; min-width:0;
    padding:2px;
  }
  .nav .tabs::-webkit-scrollbar{ display:none; }
  .nav .tab{
    flex-shrink:0;
    white-space:nowrap;
    padding:11px 14px !important;
    font-size:13px !important;
    min-height:44px;
  }
  .nav .right{ flex-shrink:0; gap:8px; }
  .nav .right span:first-child{ display:none !important; }

  /* Notifications panel: full-width drawer on phone */
  #notifPanel{
    position:fixed !important;
    top:calc(60px + env(safe-area-inset-top, 0)) !important;
    right:8px !important; left:8px !important;
    width:auto !important;
    max-width:none !important;
    max-height:70vh !important;
  }

  /* ───── ADMIN: off-canvas drawer ───── */
  .admin-shell{
    grid-template-columns:1fr !important;
    display:block !important;
    min-height:auto !important;
  }
  .adside{
    position:fixed !important;
    left:0; top:0;
    width:85% !important;
    max-width:320px;
    height:100vh !important;
    height:100dvh !important;
    z-index:1000 !important;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 12px 60px rgba(0,0,0,.6);
    border-right:1px solid var(--bd);
    background:var(--bg, #0E0E18) !important;
    padding-top:env(safe-area-inset-top, 0);
  }
  .adside.open{ transform:translateX(0); }
  .adside-backdrop{
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    z-index:999;
  }
  .adside-backdrop.open{ display:block; animation:fadeIn .2s ease both; }
  @keyframes fadeIn{ from{opacity:0} to{opacity:1} }
  .admin-main{
    padding:16px 14px 100px !important;
    max-width:100% !important;
    margin:0 !important;
  }
  #admMobileToggle{
    display:inline-flex !important;
  }
  .admin-shell--collapsed .adside,
  .admin-shell--collapsed.admin-shell .adside{
    /* Override desktop collapsed mode on mobile — the drawer system replaces it */
    width:85% !important;
    max-width:320px;
  }
  /* Pinned/sticky header for admin: bg-strip + breadcrumbs out of grid flow */
  .brand-strip{
    flex-wrap:wrap !important;
    gap:6px !important;
    padding:10px 14px 4px !important;
    margin-top:48px !important;  /* clear the floating toggle button */
  }
  #view-admin .adm-panel{
    padding:18px 14px !important;
    border-radius:14px !important;
  }
  .admin-head{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
    margin-bottom:20px !important;
  }
  .admin-head__title{ font-size:22px !important; }
  .admin-head__actions{ width:100%; flex-wrap:wrap; gap:8px !important; }

  /* ───── MODALS: bottom-sheet style ───── */
  .modal-bg{
    padding:0 !important;
    align-items:flex-end !important;
  }
  .modal{
    max-width:100% !important;
    width:100% !important;
    max-height:92vh !important;
    max-height:92dvh !important;
    border-radius:18px 18px 0 0 !important;
    margin-bottom:0 !important;
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .modal-h{ padding:14px 16px !important; }
  .modal-h h2{ font-size:17px !important; }
  .modal-b{ padding:16px !important; }

  /* ───── Q FLOATING BUTTON: shrink + corner-pin ───── */
  #qFloatingBtn{
    width:60px !important;
    height:60px !important;
    right:14px !important;
    bottom:calc(14px + env(safe-area-inset-bottom, 0)) !important;
    left:auto !important;
    top:auto !important;
    overflow:visible;
  }
  #qFloatingBtn svg{
    width:60px !important;
    height:60px !important;
    transform-origin:center;
  }
  #qFloatingBtn .q-bubble{
    font-size:9px !important;
    padding:4px 7px !important;
  }
  #qPanel{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    height:75vh !important;
    height:75dvh !important;
    max-height:75vh !important;
    bottom:calc(85px + env(safe-area-inset-bottom, 0)) !important;
    right:8px !important;
    left:auto !important;
    resize:none !important;
  }
  #qProactiveChips{ flex-wrap:wrap !important; }

  /* ───── EDITOR / FORMS: 2-col → 1-col ───── */
  .form-row{ flex-direction:column !important; align-items:stretch !important; }
  .form-row > *{ width:100% !important; min-width:0 !important; }
  /* Any inline 2-column grid → 1-col on phone */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"]{
    grid-template-columns:1fr !important;
  }
  .stats{ grid-template-columns:1fr 1fr !important; gap:8px !important; }
  .stats > *{ min-width:0; }
  .editor-toolbar{ padding:8px 12px !important; gap:6px !important; flex-wrap:wrap !important; }
  .etb-btn{ padding:8px 12px !important; font-size:11px !important; min-height:38px; }

  /* ───── TABLES: horizontal scroll wrapper ───── */
  table{
    display:block !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    max-width:100%;
    width:100% !important;
  }
  /* Sticky table headers can break on mobile — disable */
  th{ position:static !important; }

  /* ───── LOGIN: full-width centered ───── */
  #view-login, #loginGate{ padding:24px 16px !important; }
  #view-login .login-wrap, #loginGate .login-wrap,
  #view-login .login-card, #loginGate .login-card{
    max-width:100% !important;
    width:100% !important;
    padding:24px 20px !important;
    border-radius:18px !important;
  }

  /* Safe-area bottom for the whole body so no fixed bar sits under iOS chrome */
  body{ padding-bottom:env(safe-area-inset-bottom, 0); }

  /* Skip link clutter on tiny screens */
  .skip-link{ display:none; }

  /* Dashboard cards stretch full-width */
  .dash-card, .stat-card{ width:100% !important; min-width:0; }

  /* Brand chips wrap nicely */
  .brand-chip{ padding:8px 12px !important; font-size:12px !important; min-height:40px; }

  /* Bigger checkbox/radio tap area */
  input[type=checkbox], input[type=radio]{ width:20px; height:20px; }
}

/* ────────────── Tiny phones (≤480) extras ────────────── */
@media (max-width: 480px){
  .nav{ padding:8px 10px !important; }
  .nav .tab{ padding:10px 12px !important; font-size:12.5px !important; }
  .modal-h h2{ font-size:16px !important; }
  #view-admin .adm-panel h3{ font-size:18px !important; }
  .admin-head__title{ font-size:20px !important; }
  #qFloatingBtn{ width:54px !important; height:54px !important; }
  #qFloatingBtn svg{ width:54px !important; height:54px !important; }
  /* Stats: single column on tiniest screens */
  .stats{ grid-template-columns:1fr !important; }
}

/* ────────────── Mobile admin-menu floating button ────────────── */
/* Hidden by default (desktop); shown via .display=inline-flex inside @media ≤768 above */
#admMobileToggle{
  display:none;
  position:fixed;
  top:calc(12px + env(safe-area-inset-top, 0));
  left:12px;
  z-index:100;
  background:var(--paper, #1A1A28);
  border:1px solid var(--bd, #2A2A3A);
  border-radius:12px;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  color:var(--fg-1, #F5F5F7);
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.4);
  transition:all .18s ease;
  -webkit-tap-highlight-color:transparent;
}
#admMobileToggle:active{ transform:scale(.94); }
#admMobileToggle:hover{ color:var(--gold); border-color:var(--bd-gold, rgba(212,175,106,.4)); }
/* Hide outside admin view */
.view:not(.active) #admMobileToggle{ display:none !important; }

/* ────────────── Touch-friendly scrollbars (mobile only) ────────────── */
@media (pointer:coarse){
  ::-webkit-scrollbar{ width:0; height:0; }
  body, html{ -webkit-tap-highlight-color:transparent; }
}

/* --- block 6 --- */

@keyframes trk-pulse{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes trk-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.trk-kpi{position:relative;padding:14px 14px 12px;border-radius:14px;border:1px solid var(--bd);background:linear-gradient(135deg,rgba(212,175,106,.04),rgba(0,0,0,.0));overflow:hidden;transition:transform .15s,border-color .15s}
.trk-kpi:hover{transform:translateY(-1px);border-color:rgba(212,175,106,.4)}
.trk-kpi-l{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);font-weight:600;display:block;margin-bottom:6px}
.trk-kpi-v{font-size:24px;font-weight:600;color:var(--tx);line-height:1;font-variant-numeric:tabular-nums}
.trk-kpi-d{font-size:10px;color:var(--tx3);margin-top:6px}
.trk-card{border:1px solid var(--bd);border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.015),rgba(0,0,0,.18));padding:16px;transition:border-color .2s}
.trk-card:hover{border-color:rgba(212,175,106,.32)}
.trk-card-title{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tx);display:flex;align-items:center;justify-content:space-between}
.trk-skeleton{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.03) 100%);background-size:200% 100%;animation:trk-shimmer 1.4s linear infinite;margin-bottom:8px}
.trk-tab.active{border-color:var(--bd) !important;border-bottom-color:transparent !important;background:linear-gradient(180deg,rgba(212,175,106,.14),rgba(212,175,106,.04)) !important;color:var(--gold) !important}
.trk-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;transition:background .12s}
.trk-row:hover{background:rgba(255,255,255,.025)}
.trk-bar{height:6px;border-radius:3px;background:var(--bg-tertiary);overflow:hidden}
.trk-bar > i{display:block;height:100%;background:linear-gradient(90deg,#D4AF6A,#A8854A);transition:width .5s ease}
.trk-stage-chip{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;color:#fff}
#trkRangePicker button:hover{color:var(--tx)}
#trkRefreshBtn:hover{border-color:rgba(212,175,106,.4);color:var(--gold)}
.trk-evt{display:flex;gap:10px;padding:8px 10px;border-left:2px solid var(--bd);transition:border-color .12s}
.trk-evt:hover{border-left-color:var(--gold)}
.trk-evt-dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px;margin-top:6px}
.trk-mini-spark{width:100%;height:32px;display:block}

/* --- block 7 --- */

/* ===== Q DUAL-BRAIN: card variants (STEP 19, 2026-05-17) ===== */
.q-card{background:#fff;border-radius:14px;padding:14px 16px;margin:8px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 18px rgba(0,0,0,.06);
  font-family:inherit;color:#1a1a1a;line-height:1.4}
.q-card .q-card__title{font-weight:600;font-size:14px;margin:0 0 6px}
.q-card .q-card__body{font-size:13px}
.q-card .q-card__value{font-size:22px;font-weight:700;margin:2px 0}
.q-card .q-card__buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.q-card .q-card__buttons button{background:#111;color:#fff;border:0;border-radius:999px;
  padding:6px 12px;font-size:12px;cursor:pointer}
.q-card .q-card__buttons button.secondary{background:#f1f1f1;color:#111}
.q-card .q-card__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:6px;font-size:12px;margin-top:6px}
.q-card .q-card__grid > div{background:#fafafa;border-radius:8px;padding:6px 8px}
.q-card .q-card__grid b{display:block;color:#888;font-weight:500;font-size:11px}
.q-card.product img,.q-card.flight img{width:100%;max-height:160px;
  object-fit:cover;border-radius:10px;margin-bottom:8px}
.q-card.repair{border-left:4px solid #d9534f}
.q-card.tip{border-left:4px solid #2a8a4e}
.q-card.refusal{border-left:4px solid #b58800}
.q-card.upsell{border-left:4px solid #4a6cf7}

/* --- block 8 --- */

#qgMwCanvas{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
html.qg-mw #loginGate{background:#04040a !important}
html.qg-mw #loginGate .lx-bg-orbs,
html.qg-mw #loginGate .lx-noise,
html.qg-mw #loginGate .lx-grid-overlay{opacity:0 !important;transition:opacity .9s ease}
html.qg-mw #loginGate .login-card{z-index:3}

/* --- block 9 --- */

/* Loading overlay for async operations */
.loading-overlay{position:fixed;inset:0;background:rgba(6,6,10,.85);backdrop-filter:blur(12px);z-index:99998;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;opacity:0;pointer-events:none;transition:opacity .3s}
.loading-overlay.active{opacity:1;pointer-events:auto}
.loading-spinner{width:48px;height:48px;border:3px solid rgba(212,175,106,.2);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{color:var(--gold);font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.loading-sub{color:var(--tx3);font-size:11px;letter-spacing:.06em}
/* Skeleton loader for dashboard cards */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Button loading state */
.btn.loading{position:relative;color:transparent!important;pointer-events:none}
.btn.loading::after{content:'';position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
/* Offline indicator */
.offline-bar{position:fixed;top:0;left:0;right:0;background:linear-gradient(135deg,#FF9F0A,#FF6B3D);color:#fff;text-align:center;padding:8px;font-size:11px;font-weight:600;letter-spacing:.08em;z-index:99999;transform:translateY(-100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.offline-bar.show{transform:translateY(0)}
/* Template badge */
.tpl-badge{display:inline-block;padding:3px 8px;background:rgba(100,80,200,.15);color:#9B8FFF;border:1px solid rgba(100,80,200,.25);border-radius:100px;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* --- block 10 --- */
'+
'*{margin:0;padding:0;box-sizing:border-box}'+
'body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;background:#fafaf7;color:#1a1a1a;padding:20px;line-height:1.5}'+
'.wrap{max-width:600px;margin:0 auto}'+
'.brand{text-align:center;font-size:13px;color:#888;margin-bottom:4px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}'+
'.title{text-align:center;font-size:24px;font-weight:600;margin-bottom:6px;color:#1a1a1a;letter-spacing:-.01em}'+
'.greet{text-align:center;font-size:13px;color:#888;margin-bottom:22px;line-height:1.6}'+
'.card{border:1px solid #eee8d5;border-radius:14px;padding:18px;margin-bottom:12px;background:#fff;transition:border-color .2s,box-shadow .2s}'+
'.card.rec{border-color:#C4A55A;border-width:2px;box-shadow:0 6px 22px rgba(196,165,90,.18)}'+
'.card.selected{border-color:#30D158;border-width:2px;background:rgba(48,209,88,.03)}'+
'.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}'+
'.tier{font-size:9px;color:#8B6B3A;font-weight:700;letter-spacing:1.5px}'+
'.rec-badge{font-size:8px;padding:3px 10px;border-radius:4px;background:rgba(196,165,90,.12);color:#8B6B3A;font-weight:700;letter-spacing:.5px}'+
'.stars{font-size:13px;color:#C4A55A;margin-left:auto}'+
'.hotel{font-size:17px;font-weight:600;margin-bottom:2px;color:#1a1a1a}'+
'.det{font-size:11px;color:#888;margin-bottom:10px}'+
'.price-row{display:flex;justify-content:space-between;align-items:baseline;padding-top:4px;border-top:1px dashed #eee8d5}'+
'.price{font-size:26px;font-weight:700;color:#1a1a1a;letter-spacing:-.01em}'+
'.pp{font-size:10px;color:#bbb;letter-spacing:.04em}'+
'.incl{font-size:11px;color:#555;line-height:1.7;margin-top:10px;padding-top:8px;border-top:1px solid #eee8d5}'+
'.incl-row{display:block}'+
'.select-btn{width:100%;padding:14px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;margin-top:12px;border:none;text-align:center;display:block;font-family:inherit;transition:transform .12s}'+
'.select-btn.primary{background:linear-gradient(135deg,#30D158,#28A745);color:#fff;box-shadow:0 4px 14px rgba(48,209,88,.28)}'+
'.select-btn.primary:hover{transform:translateY(-1px)}'+
'.select-btn.outline{background:#fff;border:1px solid #e5e0cf;color:#1a1a1a}'+
'.select-btn.outline:hover{border-color:#C4A55A;color:#8B6B3A}'+
'.select-btn.done{background:rgba(48,209,88,.15);color:#1DA851;cursor:default;border:1px solid rgba(48,209,88,.25)}'+
'.foot{text-align:center;margin-top:16px;font-size:11px;color:#ccc}'+
'.overlay{display:none;position:fixed;inset:0;background:rgba(10,10,16,.75);backdrop-filter:blur(6px);z-index:999;align-items:center;justify-content:center;padding:20px}'+
'.overlay.open{display:flex}'+
'.modal{background:#fff;border-radius:16px;padding:26px 22px;max-width:440px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.4)}'+
'.modal h3{font-size:18px;font-weight:600;margin-bottom:6px;color:#1a1a1a}'+
'.modal .summary{background:#fafaf7;border:1px solid #eee8d5;border-radius:10px;padding:12px 14px;margin:14px 0;font-size:13px}'+
'.modal .summary b{color:#8B6B3A}'+
'.modal label{display:block;font-size:12px;color:#666;margin-bottom:6px;margin-top:8px}'+
'.modal input[type=text]{width:100%;padding:12px 14px;font-size:14px;border:1px solid #e5e0cf;border-radius:10px;font-family:inherit;background:#fff}'+
'.modal input[type=text]:focus{outline:none;border-color:#C4A55A}'+
'.modal .terms{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #eee8d5;border-radius:10px;background:#fafaf7;margin:12px 0;font-size:11px;color:#666;line-height:1.5;cursor:pointer}'+
'.modal .terms input{width:18px;height:18px;min-width:18px;margin:2px 0 0 0;accent-color:#30D158}'+
'.modal .actions{display:flex;gap:8px;margin-top:14px}'+
'.modal button{flex:1;padding:13px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;border:none;transition:opacity .2s}'+
'.modal .confirm{background:linear-gradient(135deg,#30D158,#28A745);color:#fff}'+
'.modal .cancel{background:#f3f1ec;color:#666}'+
'.modal button:disabled{opacity:.4;cursor:not-allowed}'+
'.success{text-align:center}'+
'.success .tick{font-size:52px;margin-bottom:8px}'+
'.success h2{font-size:22px;color:#1DA851;margin-bottom:6px}'+
'.success p{color:#666;font-size:13px;line-height:1.6}'+
'.success .pick{font-weight:600;color:#1a1a1a;margin-top:10px}'+
'.error-banner{display:none;background:rgba(255,59,48,.08);border:1px solid rgba(255,59,48,.25);color:#c0392b;padding:10px 14px;border-radius:10px;margin:10px 0;font-size:12px}'+
'