/* LoopLarry.ai — shared custom styles
   Loaded by every page. Companion to assets/theme.js (Tailwind extension). */

html, body { background:#FAF8F4; color:#15233F; font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background:#C9A875; color:#15233F; }

/* Editorial serif */
.serif { font-family:'Instrument Serif', Georgia, serif; font-weight:400; letter-spacing:-0.01em; }
.serif-italic { font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-weight:400; }

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(20px); transition: opacity .9s cubic-bezier(0.22,1,0.36,1), transform .9s cubic-bezier(0.22,1,0.36,1); }
.reveal.in { opacity:1; transform:translateY(0); }

/* Nav */
.nav-blur { backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); }

/* Hairline */
.hairline { background:linear-gradient(90deg, transparent, rgba(201,168,117,0.5), transparent); height:1px; }

/* Streaming caret */
.caret::after { content:''; display:inline-block; width:2px; height:1em; background:#C9A875; margin-left:4px; vertical-align:-2px; animation: caret 1.1s steps(2) infinite; }

/* Chips */
.chip-mono { font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.02em; padding:.2rem .5rem; border-radius:6px; background:rgba(201,168,117,0.10); border:1px solid rgba(201,168,117,0.35); color:#A8884D; display:inline-flex; align-items:center; gap:.3rem; }
.chip-cyan { font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.02em; padding:.2rem .5rem; border-radius:6px; background:rgba(61,143,168,0.08); border:1px solid rgba(61,143,168,0.3); color:#3D8FA8; }
.chip-ink  { font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.02em; padding:.2rem .5rem; border-radius:6px; background:rgba(21,35,63,0.06); border:1px solid rgba(21,35,63,0.10); color:#15233F; }

/* Pill */
.pill { display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem; border:1px solid #E8E2D4; border-radius:9999px; background:#FFFFFF; font-size:.75rem; letter-spacing:.04em; color:#3A4763; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:500; transition: all .2s cubic-bezier(0.22,1,0.36,1); border-radius:10px; cursor:pointer; text-decoration:none; }
.btn-ink   { background:#15233F; color:#FAF8F4; padding:.7rem 1.1rem; }
.btn-ink:hover   { background:#1F3056; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(21,35,63,0.16); }
.btn-gold  { background:#C9A875; color:#15233F; padding:.7rem 1.1rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-gold:hover  { background:#E3CDA4; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(201,168,117,0.30), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-ghost { color:#15233F; padding:.7rem 1.1rem; border:1px solid #D8CFB8; background:#FFFFFF; }
.btn-ghost:hover { background:#F4EFE5; border-color:#15233F; }
.btn-link  { color:#A8884D; padding:.3rem 0; }
.btn-link:hover { color:#15233F; }
/* Selectable chip button — shared by role pickers, filters, and coaching options */
.chip-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:9px; font-size:.82rem; line-height:1.1; border:1px solid #D8CFB8; background:#FFFFFF; color:#3A4763; cursor:pointer; transition: all .15s ease; text-align:left; }
.chip-btn:hover { border-color:#15233F; color:#15233F; }
.chip-btn.active { background:#15233F; border-color:#15233F; color:#FAF8F4; }
html.dark .chip-btn { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.14); color:#D8CFB8; }
html.dark .chip-btn:hover { border-color: rgba(255,255,255,0.40); color:#FFFFFF; }
html.dark .chip-btn.active { background:#C9A875; border-color:#C9A875; color:#0B1424; }

/* ---- Role picker (landing + onboarding): colour-coded category cards ---- */
.role-cat {
  position:relative; overflow:hidden;
  border-radius:20px; background:#FFFFFF; border:1px solid #E8E2D4;
  box-shadow:0 8px 30px rgba(21,35,63,0.05);
  transition: transform .35s cubic-bezier(0.22,1,0.36,1), box-shadow .35s ease, border-color .35s ease;
}
.role-cat::before {
  content:''; position:absolute; left:0; top:0; height:100%; width:3px;
  background:var(--cat); opacity:.85; transition:width .35s cubic-bezier(0.22,1,0.36,1);
}
.role-cat:hover {
  transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(21,35,63,0.11);
  border-color:color-mix(in srgb, var(--cat) 40%, #E8E2D4);
}
.role-cat:hover::before { width:5px; }
.role-cat-icon {
  width:2.75rem; height:2.75rem; border-radius:.85rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--cat) 14%, #FFFFFF);
  color:var(--cat); border:1px solid color-mix(in srgb, var(--cat) 28%, transparent);
  transition: transform .35s cubic-bezier(0.34,1.56,0.64,1);
}
.role-cat:hover .role-cat-icon { transform:scale(1.06) rotate(-3deg); }
.role-cat-count {
  font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.02em;
  padding:.18rem .5rem; border-radius:9999px; white-space:nowrap;
  background:color-mix(in srgb, var(--cat) 12%, #FFFFFF);
  color:var(--cat); border:1px solid color-mix(in srgb, var(--cat) 30%, transparent);
}
/* Role chip — adopts the category colour on hover for a vivid, communicative feel */
.role-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .75rem; border-radius:9px; font-size:.8rem; line-height:1.1;
  border:1px solid #E2DAC8; background:#FFFFFF; color:#3A4763; cursor:pointer;
  transition: all .18s ease; text-align:left;
}
.role-chip .role-chip-go { width:0; opacity:0; overflow:hidden; transition: all .18s ease; }
.role-chip:hover {
  border-color:var(--cat); background:var(--cat); color:#FFFFFF;
  transform:translateY(-1px);
  box-shadow:0 6px 16px color-mix(in srgb, var(--cat) 35%, transparent);
}
.role-chip:hover .role-chip-go { width:.85rem; opacity:1; }
.role-cat-hint {
  display:flex; align-items:center; gap:.4rem;
  font-size:.72rem; color:#9CA3AF;
  opacity:0; transform:translateY(4px); transition: all .3s ease;
}
.role-cat:hover .role-cat-hint { opacity:1; transform:translateY(0); color:var(--cat); }
html.dark .role-cat { background:#111B2E; border-color:rgba(255,255,255,0.10); box-shadow:0 16px 48px rgba(0,0,0,0.40); }
html.dark .role-cat-icon { background:color-mix(in srgb, var(--cat) 22%, #111B2E); }
html.dark .role-chip { background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.12); color:#D8CFB8; }
html.dark .role-cat-count { background:color-mix(in srgb, var(--cat) 22%, #111B2E); }

/* Cards */
.card { background:#FFFFFF; border:1px solid #E8E2D4; border-radius:16px; }
.card-elev { background:#FFFFFF; border:1px solid #E8E2D4; border-radius:20px; box-shadow: 0 12px 40px rgba(21,35,63,0.06); }
.lift { transition: transform .3s cubic-bezier(0.22,1,0.36,1), box-shadow .3s ease, border-color .3s ease; }
.lift:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(21,35,63,0.08); border-color:#D8CFB8; }

/* Underline link */
.ulink { position:relative; }
.ulink::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:#A8884D; transform:scaleX(0); transform-origin:left; transition: transform .3s ease; }
.ulink:hover::after { transform:scaleX(1); }

/* Marquee mask */
.marquee-mask { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }

/* Hero radials */
.hero-radial {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(201,168,117,0.18), transparent 60%),
    radial-gradient(40% 30% at 10% 20%, rgba(61,143,168,0.07), transparent 60%),
    radial-gradient(80% 60% at 90% 80%, rgba(201,168,117,0.06), transparent 70%),
    #FAF8F4;
}
.subtle-grid {
  background-image: linear-gradient(rgba(21,35,63,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(21,35,63,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 50% at 50% 30%, #000, transparent);
}

/* Composer (Perplexity-style) */
.composer { background:#FFFFFF; border:2px solid #E8E2D4; border-radius:18px; transition: border-color .2s ease, box-shadow .2s ease; }
.composer:focus-within { border-color:#C9A875; box-shadow: 0 0 0 4px rgba(201,168,117,0.15); }
.skill-chip { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .85rem; border-radius:9999px; background:#FAF8F4; border:1px solid #E8E2D4; color:#15233F; font-size:.8rem; transition: all .2s ease; cursor:pointer; }
.skill-chip:hover { background:#F1ECE2; border-color:#C9A875; transform: translateY(-1px); }
.skill-chip.active { background:#15233F; color:#FAF8F4; border-color:#15233F; }

/* Suggested prompts */
.suggest { display:flex; align-items:center; gap:.75rem; width:100%; text-align:left; padding:.85rem 1rem; border-radius:12px; background:transparent; transition: background .2s ease; cursor:pointer; color:#15233F; border:1px solid transparent; }
.suggest:hover { background:#FAF8F4; border-color:#E8E2D4; }
.suggest i { color:#A8884D; }

/* Sidebar (workspace) */
.side-link { display:flex; align-items:center; gap:.6rem; padding:.5rem .65rem; border-radius:8px; color:#3A4763; font-size:.825rem; transition: all .15s ease; cursor:pointer; }
.side-link:hover { background:#FFFFFF; color:#15233F; }
.side-link.active { background:#FFFFFF; color:#15233F; box-shadow: 0 1px 2px rgba(21,35,63,0.05); }
.side-link i { width:16px; height:16px; color:#6B7280; }
.side-link.active i { color:#A8884D; }
.side-section { font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:#9CA3AF; padding:.5rem .65rem; }

/* RTL helpers */
.rtl { direction:rtl; text-align:right; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* No scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* Workspace specifics */
.bubble-user { background:#15233F; color:#FAF8F4; border-radius: 1rem 1rem 4px 1rem; padding:.65rem 1rem; max-width:38rem; font-size:.95rem; line-height:1.5; }
.bubble-larry { background:#FFFFFF; color:#15233F; border:1px solid #E8E2D4; border-radius: 1rem 1rem 1rem 4px; padding:.85rem 1.1rem; max-width:42rem; font-size:.95rem; line-height:1.6; }

/* =================================================================== */
/* =================== PROFILE / KYC STEPPER ========================= */
/* =================================================================== */
.prof-input { border-radius: .5rem; border: 1px solid #E8E2D4; background: #FFFFFF; padding: .625rem .75rem; font-size: .875rem; color: #15233F; transition: border-color .15s, box-shadow .15s; outline: none; }
.prof-input:focus { border-color: #C9A875; box-shadow: 0 0 0 3px rgba(201,168,117,.18); }
.prof-input::placeholder { color: #9B9287; }
html.dark .prof-input { background: #13203A; border-color: rgba(255,255,255,0.12); color: #F2EFE8; }
html.dark .prof-input::placeholder { color: rgba(242,239,232,0.35); }
#profile-pic-wrap:hover { border-color: #C9A875; }
#selfie-preview-wrap video,
#selfie-preview-wrap img { border-radius: 16px; }
html.dark #p-firstname,
html.dark #p-lastname,
html.dark #p-phone,
html.dark #p-whatsapp,
html.dark #p-telegram { background: #13203A; border-color: rgba(255,255,255,0.12); color: #F2EFE8; }
html.dark #p-firstname::placeholder,
html.dark #p-lastname::placeholder,
html.dark #p-phone::placeholder,
html.dark #p-whatsapp::placeholder,
html.dark #p-telegram::placeholder { color: rgba(242,239,232,0.35); }
html.dark #selfie-preview-wrap { background: #0B1424; border-color: rgba(255,255,255,0.12); }

/* =================================================================== */
/* =================== PRINT / PDF INVOICE =========================== */
/* =================================================================== */
@media print {
  body > *:not(#invoice-print-wrapper) { display: none !important; }
  #invoice-print-wrapper { display: block !important; position: static !important; }
  #invoice-modal { display: block !important; position: static !important; background: none !important; }
  #invoice-modal > div { box-shadow: none !important; border: none !important; background: #fff !important; max-height: none !important; }
  #invoice-modal .border-b,
  #invoice-modal .border-t { border-color: #E8E2D4 !important; }
  /* Hide modal chrome, keep only the printable area */
  #invoice-modal > div > div:first-child,
  #invoice-modal > div > div:last-child { display: none !important; }
  #invoice-print-area { padding: 40px !important; }
  /* Make DRAFT stamp more visible in print */
  #invoice-print-area .opacity-10 { opacity: 0.08 !important; }
  @page { margin: 0; size: A4; }
}

/* =================================================================== */
/* =================== DARK THEME OVERRIDES ========================== */
/* =================================================================== */
html.dark { color-scheme: dark; }
html.dark body { background:#0B1424; color:#F2EFE8; }
html.dark ::selection { background:#C9A875; color:#0B1424; }

/* Tailwind utility overrides — backgrounds */
html.dark .bg-canvas { background-color:#0B1424 !important; }
html.dark .bg-canvas\/40, html.dark .bg-canvas\/50, html.dark .bg-canvas\/60, html.dark .bg-canvas\/70, html.dark .bg-canvas\/80, html.dark .bg-canvas\/85 { background-color: rgba(11,20,36,0.85) !important; }
html.dark .bg-canvas-2 { background-color:#111B2E !important; }
html.dark .bg-canvas-2\/30, html.dark .bg-canvas-2\/40, html.dark .bg-canvas-2\/50, html.dark .bg-canvas-2\/60, html.dark .bg-canvas-2\/70 { background-color: rgba(17,27,46,0.85) !important; }
html.dark .bg-canvas-3 { background-color:#15233F !important; }
html.dark .bg-paper { background-color:#111B2E !important; }

/* Text */
html.dark .text-ink   { color:#F2EFE8 !important; }
html.dark .text-ink-2 { color:#B0B7C3 !important; }
html.dark .text-ink-3 { color:#828B99 !important; }
html.dark .text-ink-4 { color:#5A6371 !important; }
html.dark .text-gold-2 { color:#E3CDA4 !important; }

/* Borders */
html.dark .border-line   { border-color: rgba(255,255,255,0.08) !important; }
html.dark .border-line-2 { border-color: rgba(255,255,255,0.16) !important; }
html.dark .bg-line       { background-color: rgba(255,255,255,0.08) !important; }
html.dark .divide-line > * { border-color: rgba(255,255,255,0.08) !important; }

/* Components */
html.dark .pill { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); color:#B0B7C3; }
html.dark .card { background:#111B2E; border-color: rgba(255,255,255,0.08); }
html.dark .card-elev { background:#111B2E; border-color: rgba(255,255,255,0.10); box-shadow: 0 16px 48px rgba(0,0,0,0.45); }
html.dark .lift:hover { box-shadow: 0 20px 48px rgba(0,0,0,0.55); border-color: rgba(255,255,255,0.18); }

/* Buttons */
html.dark .btn-ink { background:#C9A875; color:#0B1424; }
html.dark .btn-ink:hover { background:#E3CDA4; box-shadow: 0 10px 24px rgba(201,168,117,0.20); }
html.dark .btn-ghost { color:#F2EFE8; background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.14); }
html.dark .btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.30); }

/* Chips */
html.dark .chip-ink  { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); color:#F2EFE8; }
html.dark .chip-mono { background: rgba(201,168,117,0.12); border-color: rgba(201,168,117,0.30); color:#E3CDA4; }
html.dark .chip-cyan { background: rgba(111,198,224,0.10); border-color: rgba(111,198,224,0.30); color:#6FC6E0; }

/* Composer */
html.dark .composer { background:#111B2E; border-color: rgba(255,255,255,0.10); }
html.dark .composer:focus-within { border-color:#C9A875; box-shadow: 0 0 0 4px rgba(201,168,117,0.18); }
html.dark .composer textarea, html.dark .composer input { color:#F2EFE8; }
html.dark .composer textarea::placeholder, html.dark .composer input::placeholder { color:#7A8190; }

/* Skill chip + suggestions */
html.dark .skill-chip { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); color:#F2EFE8; }
html.dark .skill-chip:hover { background: rgba(255,255,255,0.07); border-color: rgba(201,168,117,0.40); }
html.dark .skill-chip.active { background:#C9A875; color:#0B1424; border-color:#C9A875; }
html.dark .suggest { color:#F2EFE8; border-color: transparent; }
html.dark .suggest:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }

/* Conversation */
html.dark .bubble-user { background:#C9A875; color:#0B1424; }
html.dark .bubble-larry { background:#111B2E; color:#F2EFE8; border-color: rgba(255,255,255,0.10); }

/* Nav */
html.dark .nav-blur { background: rgba(11,20,36,0.78) !important; border-bottom-color: rgba(255,255,255,0.08); }

/* Hero radial dark */
html.dark .hero-radial {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(201,168,117,0.10), transparent 60%),
    radial-gradient(40% 30% at 10% 20%, rgba(61,143,168,0.06), transparent 60%),
    radial-gradient(80% 60% at 90% 80%, rgba(201,168,117,0.05), transparent 70%),
    #0B1424;
}
html.dark .subtle-grid {
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
}
html.dark .hairline { background: linear-gradient(90deg, transparent, rgba(201,168,117,0.5), transparent); }

/* Workspace sidebar */
html.dark .side-link, html.dark .ws-side-link, html.dark .recent-item { color:#B0B7C3; }
html.dark .ws-side-link:hover, html.dark .recent-item:hover { background: rgba(255,255,255,0.04); color:#F2EFE8; }
html.dark .ws-side-link.active { background: rgba(255,255,255,0.06); color:#F2EFE8; }
html.dark .ws-section-label { color:#7A8190; }

/* Freemium */
html.dark .lock-overlay::before { background: linear-gradient(180deg, rgba(11,20,36,0) 0%, rgba(11,20,36,0.55) 35%, rgba(11,20,36,0.96) 75%, #0B1424 100%); }
html.dark .lock-cta { background:#111B2E; border-color: rgba(201,168,117,0.45); }
html.dark .lock-cta h4 { color:#F2EFE8; }
html.dark .lock-cta p { color:#B0B7C3; }
html.dark .free-banner { background: linear-gradient(90deg, rgba(201,168,117,0.14), rgba(201,168,117,0.04)); border-color: rgba(201,168,117,0.30); color:#B0B7C3; }
html.dark .toast { background:#C9A875; color:#0B1424; }
html.dark .toast i { color:#0B1424; }
html.dark .plan-card { background:#111B2E; border-color: rgba(255,255,255,0.10); }
html.dark .plan-card.current { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.14); }
html.dark .plan-card.featured { background: linear-gradient(180deg, #111B2E, #15233F); border-color: rgba(201,168,117,0.55); box-shadow: 0 20px 48px rgba(201,168,117,0.15); }
html.dark .plan-feature { color:#B0B7C3; }
html.dark .plan-feature.muted { color:#6A7280; }
html.dark .plan-feature.muted i { color: rgba(255,255,255,0.12); }

/* Glass / upload modal */
html.dark .glass { background: rgba(17,27,46,0.82); border-color: rgba(255,255,255,0.10); box-shadow: 0 32px 96px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08); }
html.dark .upload-backdrop { background: rgba(0,0,0,0.55); }
html.dark .dropzone { border-color: rgba(255,255,255,0.16); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)); }
html.dark .dropzone:hover { border-color:#C9A875; background: linear-gradient(180deg, rgba(201,168,117,0.08), rgba(255,255,255,0.02)); }
html.dark .file-row { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }

/* Dashboard surfaces */
html.dark .outcome-card { background:#111B2E; border-color: rgba(255,255,255,0.10); }
html.dark .outcome-card.best   { background: linear-gradient(135deg, rgba(92,140,107,0.12), #111B2E 55%); }
html.dark .outcome-card.likely { background: linear-gradient(135deg, rgba(201,168,117,0.14), #111B2E 55%); }
html.dark .outcome-card.worst  { background: linear-gradient(135deg, rgba(168,69,60,0.12), #111B2E 55%); }
html.dark .risk-card { background:#111B2E; border-color: rgba(255,255,255,0.08); }
html.dark .risk-row:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
html.dark .followup { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); color:#F2EFE8; }
html.dark .followup:hover { background: rgba(255,255,255,0.06); border-color: rgba(201,168,117,0.40); }
html.dark .action-btn { color:#828B99; }
html.dark .action-btn:hover { background: rgba(255,255,255,0.04); color:#F2EFE8; }
html.dark .source-pill { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); color:#F2EFE8; }
html.dark .source-pill:hover { background: rgba(255,255,255,0.06); border-color: rgba(201,168,117,0.40); }
html.dark .source-num { background:#C9A875; color:#0B1424; }
html.dark sup.cite { background:#C9A875; color:#0B1424; }
html.dark .live-reason { background: rgba(255,255,255,0.04); border-left-color:#C9A875; color:#B0B7C3; }
html.dark .evidence-row { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
html.dark .conf-ring-track, html.dark .big-conf-track { stroke: rgba(255,255,255,0.10); }
html.dark .conf-ring-text { color:#F2EFE8; }
html.dark .big-conf-text .num { color:#F2EFE8; }
html.dark .gap-row { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
html.dark .contradiction-side { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
html.dark .plea-row { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
html.dark .agent-card { background:#111B2E; border-color: rgba(255,255,255,0.10); }
html.dark .agent-card.done { background: linear-gradient(90deg, rgba(92,140,107,0.06), #111B2E 40%); }
html.dark .timeline-wrap, html.dark .chain, html.dark .dash-chart, html.dark .collab-graph { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)); border-color: rgba(255,255,255,0.08); }
html.dark .chain-icon { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color:#828B99; }
html.dark .chain-node.done .chain-icon { background: rgba(92,140,107,0.18); border-color: rgba(92,140,107,0.45); color:#8AB098; }
html.dark .timeline-dot.future { background:#15233F; border-color:#0B1424; }
html.dark .timeline-dot.future-warn { background:#15233F; border-color:#0B1424; }
html.dark .activity-log { color:#828B99; }
html.dark .activity-log .log-action { color:#F2EFE8; }
html.dark .mini-bar, html.dark .gauge { background: rgba(255,255,255,0.06); }

/* Footer */
html.dark footer.bg-canvas-2 { background:#111B2E !important; }

/* Trust band */
html.dark .trust-card { background:#111B2E; border-color: rgba(255,255,255,0.08); }

/* Multi-language showcase */
html.dark .multi-tab { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); color:#B0B7C3; }
html.dark .multi-tab:hover { border-color: rgba(201,168,117,0.40); color:#F2EFE8; }
html.dark .multi-tab.active { background:#C9A875; color:#0B1424; border-color:#C9A875; }

/* =================================================================== */
/* ======================= WORKFLOW MODAL ============================ */
/* =================================================================== */

/* Modal entrance animation */
.wf-modal-card {
  animation: wf-scale-in .3s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes wf-scale-in {
  0%   { opacity:0; transform: scale(0.96) translateY(10px); }
  100% { opacity:1; transform: scale(1)    translateY(0); }
}

/* Header icon wrapper */
.wf-header-icon-wrap {
  background: rgba(201,168,117,0.14);
  border: 1px solid rgba(201,168,117,0.40);
  color: #A8884D;
  border-radius: 12px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Form fields */
.wf-select, .wf-input {
  width: 100%; padding: .6rem .9rem;
  border-radius: 10px; border: 1.5px solid #E8E2D4;
  background: rgba(255,255,255,0.92); color: #15233F;
  font-size: .875rem; line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none; appearance: none;
}
.wf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px;
  padding-right: 2.25rem;
}
.wf-textarea {
  width: 100%; padding: .6rem .9rem;
  border-radius: 10px; border: 1.5px solid #E8E2D4;
  background: rgba(255,255,255,0.92); color: #15233F;
  font-size: .875rem; line-height: 1.5; resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease;
  font-family: inherit;
}
.wf-select:focus, .wf-input:focus, .wf-textarea:focus {
  outline: none;
  border-color: #C9A875;
  box-shadow: 0 0 0 3px rgba(201,168,117,0.16);
}
.wf-select::placeholder, .wf-input::placeholder, .wf-textarea::placeholder { color: #9CA3AF; }

/* Upload / Dropzone */
.wf-dropzone {
  border: 2px dashed #D8CFB8; border-radius: 14px;
  background: linear-gradient(180deg, rgba(250,248,244,0.7), rgba(255,255,255,0.4));
  padding: 1.5rem 1rem; text-align: center; cursor: pointer;
  transition: all .3s cubic-bezier(0.22,1,0.36,1);
}
.wf-dropzone:hover { border-color: #C9A875; background: linear-gradient(180deg, rgba(244,239,229,0.85), rgba(250,248,244,0.4)); }
.wf-dropzone.drag-over {
  border-color: #C9A875; border-style: solid;
  background: linear-gradient(180deg, rgba(201,168,117,0.14), rgba(201,168,117,0.05));
  transform: scale(1.01);
}
.wf-dropzone.has-files {
  border-color: rgba(92,140,107,0.55); border-style: solid;
  background: linear-gradient(180deg, rgba(92,140,107,0.06), rgba(255,255,255,0.4));
}
.wf-drop-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: #FAF8F4; border: 1px solid rgba(201,168,117,0.35);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .5rem;
}

/* File rows inside workflow modal */
.wf-file-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .85rem; background: rgba(255,255,255,0.88);
  border: 1px solid #E8E2D4; border-radius: 10px;
}
.wf-file-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: #FAF8F4; border: 1px solid #E8E2D4;
  display: flex; align-items: center; justify-content: center;
  color: #A8884D; flex-shrink: 0;
}
.wf-remove-file {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #9CA3AF; background: transparent; border: none; cursor: pointer;
  transition: all .15s ease; flex-shrink: 0;
}
.wf-remove-file:hover { background: rgba(168,69,60,0.10); color: #A8453C; }

/* Execution steps */
.wf-exec-step {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem; border-radius: 12px;
  border: 1px solid #E8E2D4; background: rgba(255,255,255,0.65);
  transition: all .35s cubic-bezier(0.22,1,0.36,1);
}
.wf-exec-step.active {
  background: linear-gradient(90deg, rgba(201,168,117,0.12), rgba(255,255,255,0.65));
  border-color: rgba(201,168,117,0.50);
}
.wf-exec-step.done {
  background: linear-gradient(90deg, rgba(92,140,107,0.08), rgba(255,255,255,0.65));
  border-color: rgba(92,140,107,0.45);
}
.wf-exec-step.pending { opacity: .55; }

.wf-step-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: #FAF8F4; border: 1px solid #E8E2D4;
  display: flex; align-items: center; justify-content: center;
  color: #9CA3AF; flex-shrink: 0;
  transition: all .35s cubic-bezier(0.22,1,0.36,1);
}
.wf-exec-step.active .wf-step-icon {
  background: #C9A875; color: #15233F; border-color: #C9A875;
  box-shadow: 0 4px 12px rgba(201,168,117,0.40);
}
.wf-exec-step.done .wf-step-icon {
  background: rgba(92,140,107,0.14); color: #5C8C6B;
  border-color: rgba(92,140,107,0.45);
}

.wf-step-label { font-size: .85rem; font-weight: 500; color: #3A4763; }
.wf-exec-step.active .wf-step-label { color: #15233F; }
.wf-exec-step.done  .wf-step-label { color: #5C8C6B; }

.wf-step-active-dot  { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: #C9A875; }
.wf-step-pending-dot { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: #E8E2D4; }

/* Results sections */
.wf-result-section {
  padding: 1.1rem 1.2rem; border-radius: 16px;
  border: 1px solid #E8E2D4; background: rgba(255,255,255,0.72);
}

/* Checklist rows */
.wf-checklist-row {
  display: flex; align-items: flex-start; gap: .65rem;
  cursor: pointer; padding: .3rem 0;
}
.wf-checkbox {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #D8CFB8;
  background: #FFFFFF; cursor: pointer; flex-shrink: 0; margin-top: .15rem;
  accent-color: #5C8C6B;
}

/* Error banner in form */
#wf-form-errors {
  margin: 0 1.5rem .75rem;
  padding: .75rem 1rem;
  border-radius: 10px;
  background: rgba(168,69,60,0.08);
  border: 1px solid rgba(168,69,60,0.25);
  font-size: .825rem; color: #A8453C;
  display: flex; flex-direction: column; gap: .35rem;
}
#wf-form-errors.hidden { display: none; }

/* Modal scrollbar */
#wf-form-body::-webkit-scrollbar,
#wf-results-body::-webkit-scrollbar { width: 4px; }
#wf-form-body::-webkit-scrollbar-thumb,
#wf-results-body::-webkit-scrollbar-thumb { background: #D8CFB8; border-radius: 2px; }

/* ─── Dark mode overrides ─── */
html.dark .wf-header-icon-wrap { background: rgba(201,168,117,0.12); border-color: rgba(201,168,117,0.30); color: #E3CDA4; }
html.dark .wf-select, html.dark .wf-input, html.dark .wf-textarea {
  background: rgba(17,27,46,0.85); border-color: rgba(255,255,255,0.12); color: #F2EFE8;
}
html.dark .wf-select:focus, html.dark .wf-input:focus, html.dark .wf-textarea:focus {
  border-color: #C9A875; box-shadow: 0 0 0 3px rgba(201,168,117,0.18);
}
html.dark .wf-dropzone { border-color: rgba(255,255,255,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)); }
html.dark .wf-dropzone:hover { border-color: #C9A875; background: rgba(201,168,117,0.06); }
html.dark .wf-dropzone.has-files { border-color: rgba(92,140,107,0.45); background: rgba(92,140,107,0.06); }
html.dark .wf-file-row { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
html.dark .wf-file-icon { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: #E3CDA4; }
html.dark .wf-exec-step { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
html.dark .wf-exec-step.active { background: linear-gradient(90deg, rgba(201,168,117,0.10), rgba(255,255,255,0.03)); border-color: rgba(201,168,117,0.40); }
html.dark .wf-exec-step.done  { background: linear-gradient(90deg, rgba(92,140,107,0.10), rgba(255,255,255,0.03)); border-color: rgba(92,140,107,0.35); }
html.dark .wf-step-icon { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: #828B99; }
html.dark .wf-step-label { color: #B0B7C3; }
html.dark .wf-exec-step.active .wf-step-label { color: #F2EFE8; }
html.dark .wf-exec-step.done  .wf-step-label { color: #8AB098; }
html.dark .wf-result-section { background: rgba(17,27,46,0.70); border-color: rgba(255,255,255,0.09); }
html.dark .wf-checkbox { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); }

/* =================================================================== */
/* ============ PROFESSIONAL REGISTRATION — 2FA TOGGLE =============== */
/* =================================================================== */
.pr-toggle-track { position:absolute; inset:0; background:#D8CFB8; border-radius:9999px; transition:.2s; }
.pr-toggle-track::before { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
#pr-2fa:checked + .pr-toggle-track { background:#5C8C6B; }
#pr-2fa:checked + .pr-toggle-track::before { transform:translateX(18px); }
html.dark .pr-toggle-track { background:rgba(255,255,255,0.18); }
html.dark #pr-2fa:checked + .pr-toggle-track { background:#5C8C6B; }

/* =================================================================== */
/* ================ REGISTER DROPDOWN — DARK MODE ==================== */
/* =================================================================== */
html.dark #register-menu {
  background-color: #182336 !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html.dark #register-menu p {
  color: #5A6371 !important;
}
html.dark #register-menu button {
  color: #B0B7C3 !important;
}
html.dark #register-menu button:hover {
  background: rgba(255,255,255,0.07) !important;
  color: #F2EFE8 !important;
}

/* =================================================================== */
/* ============ VISUAL POLISH + 3D MOTION (additive layer) =========== */
/* Enhances existing shared components site-wide. Activated by          */
/* assets/motion.js. Fully gated by prefers-reduced-motion below.       */
/* =================================================================== */

/* ---- 3D tilt cards (class added by motion.js to .lift / .card-elev) ---- */
.tilt3d {
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .3s ease;
  will-change: transform;
}
.tilt3d.tilting { box-shadow: 0 26px 60px rgba(21,35,63,0.16), 0 6px 18px rgba(21,35,63,0.08); }
html.dark .tilt3d.tilting { box-shadow: 0 30px 70px rgba(0,0,0,0.55); }

/* Light glare that follows the cursor across a tilting card */
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(180px 180px at var(--gx,50%) var(--gy,0%), rgba(255,255,255,0.35), transparent 60%);
  opacity: 0; transition: opacity .35s ease; mix-blend-mode: soft-light;
}
.tilt3d.tilting .tilt-glare { opacity: 1; }
html.dark .tilt-glare { background: radial-gradient(180px 180px at var(--gx,50%) var(--gy,0%), rgba(201,168,117,0.22), transparent 60%); }

/* ---- Upgraded icon tiles (class added by motion.js) ---- */
.lk-icon {
  position: relative;
  background:
    radial-gradient(130% 130% at 28% 18%, rgba(201,168,117,0.26), transparent 60%),
    linear-gradient(160deg, #FFFFFF, #F4EFE5) !important;
  border: 1px solid rgba(201,168,117,0.42) !important;
  box-shadow:
    0 3px 8px rgba(21,35,63,0.07),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -12px 20px rgba(201,168,117,0.12);
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.lk-icon i, .lk-icon svg { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.lk-icon svg { filter: drop-shadow(0 1px 5px rgba(201,168,117,0.35)); }

/* Icon tile pops forward in 3D when its tilting card (or itself) is hovered */
.lift:hover .lk-icon,
.lk-icon:hover {
  transform: translateZ(28px) translateY(-2px) scale(1.04);
  box-shadow:
    0 14px 26px rgba(201,168,117,0.32),
    inset 0 1px 0 rgba(255,255,255,0.92);
}
.lift:hover .lk-icon i, .lift:hover .lk-icon svg,
.lk-icon:hover i, .lk-icon:hover svg { transform: scale(1.1); }

html.dark .lk-icon {
  background:
    radial-gradient(130% 130% at 28% 18%, rgba(201,168,117,0.22), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015)) !important;
  border-color: rgba(201,168,117,0.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 3px 10px rgba(0,0,0,0.38);
}

/* ---- Button shine sweep (gold + ink CTAs) ---- */
.btn-gold, .btn-ink { position: relative; overflow: hidden; }
.btn-gold::after, .btn-ink::after {
  content: ''; position: absolute; top: 0; left: -130%; width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.40), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left .65s cubic-bezier(.22,1,.36,1);
}
.btn-gold:hover::after, .btn-ink:hover::after { left: 150%; }

/* ---- Ambient float for elements tagged data-float by motion.js ---- */
@keyframes lk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
[data-float] { animation: lk-float 6s ease-in-out infinite; will-change: transform; }
[data-float="slow"] { animation-duration: 8.5s; }

/* Respect reduced-motion: disable every motion enhancement above */
@media (prefers-reduced-motion: reduce) {
  .tilt3d { transform: none !important; }
  .tilt-glare { display: none !important; }
  .btn-gold::after, .btn-ink::after { display: none !important; }
  [data-float] { animation: none !important; }
  .lift:hover .lk-icon, .lk-icon:hover { transform: none !important; }
}