/**
 * OmniAI · static chrome (header, footer, sidebars, buttons).
 * @author David Medel
 * @Copyright 2026 Medel Platforms (medel.es)
 *
 * Loaded after the compiled Tailwind (app.css) so it can override it. Mapped onto
 * OmniAI's configurable brand palette (--brand-* RGB triplets) and class-based
 * dark mode (html.dark).
 */

/* ---------------------------------------------------------------------------
   Typography — base tracking and line-height. The font stack itself is set in
   tailwind.config (fontFamily.sans), a native system-font stack.
   --------------------------------------------------------------------------- */
body{
  line-height:1.55;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{ letter-spacing:-.028em }

/* Horizontal scroll without a visible scrollbar (mobile category tabs). */
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none }
.no-scrollbar::-webkit-scrollbar{ display:none }

/* Hide the browser's NATIVE password reveal/clear controls (Edge on Windows adds
   a second, coloured eye via ::-ms-reveal that clashes with our own monochrome
   eye toggle). We provide our own show/hide button, so suppress the native one. */
input::-ms-reveal,
input::-ms-clear{ display:none; width:0; height:0 }

/* Solid, theme-aware popover surface (never inherits Tailwind bg-opacity, so it
   stays fully opaque over any content). Use on dropdown/menu panels. */
.omni-popover{ background:#ffffff }
html.dark .omni-popover{ background:#0f1730 }

/* Modern tooltip (reusable). Wrap a trigger in .omni-tip and add .omni-tip-bubble. */
.omni-tip-bubble{ position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%) translateY(4px);
  width:max-content; max-width:280px; background:#0f172a; color:#fff; font-size:13.5px; line-height:1.5;
  padding:10px 13px; border-radius:10px; box-shadow:0 10px 30px -8px rgba(0,0,0,.45); opacity:0; visibility:hidden;
  transition:opacity .15s ease, transform .15s ease; z-index:40; pointer-events:none; text-align:left; white-space:normal; font-weight:400; text-transform:none; letter-spacing:normal }
.omni-tip-bubble::after{ content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#0f172a }
.omni-tip:hover .omni-tip-bubble{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
/* Downward variant (use inside overflow-clipped containers like table headers). */
.omni-tip-bubble.below{ bottom:auto; top:calc(100% + 9px); transform:translateX(-50%) translateY(-4px) }
.omni-tip-bubble.below::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#0f172a }
.omni-tip:hover .omni-tip-bubble.below{ transform:translateX(-50%) translateY(0) }
/* Below + right-aligned: for a trigger near a container's right edge, so the
   bubble opens downward and stays inside the box (no horizontal clipping). */
.omni-tip-bubble.below-right{ left:auto; right:0; bottom:auto; top:calc(100% + 9px); transform:translateY(-4px) }
.omni-tip-bubble.below-right::after{ left:auto; right:14px; top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#0f172a }
.omni-tip:hover .omni-tip-bubble.below-right{ transform:translateY(0) }

:root{
  --brand-fg: 255 255 255; /* fallback; overridden per-theme by theme_palette_css */
  --tk-brand: rgb(var(--brand-600));
  --tk-brand-2: rgb(var(--brand-400));
  --tk-accent: #8a5cff;
  --tk-glow: rgb(var(--brand-500) / .45);

  --tk-bg: #eceff6;
  --tk-bg-soft: #ffffff;
  --tk-text: #070a12;
  --tk-muted: #586079;
  --tk-surface: rgba(255,255,255,.7);
  --tk-surface-2: #ffffff;
  --tk-border: rgba(10,18,40,.16);
  --tk-border-strong: rgba(10,18,40,.24);
  --tk-shadow: 0 30px 60px -30px rgba(30,55,110,.28);

  --tk-r-lg: 20px; --tk-r-md: 14px; --tk-r-sm: 10px;
  --tk-ease: cubic-bezier(.22,.7,.16,1);
}
html.dark{
  --tk-bg: #05070d;
  --tk-bg-soft: #0b0f1a;
  --tk-text: #f4f7fe;
  --tk-muted: #9aa4bd;
  --tk-surface: rgba(255,255,255,.05);
  --tk-surface-2: rgba(255,255,255,.08);
  --tk-border: rgba(255,255,255,.10);
  --tk-border-strong: rgba(255,255,255,.18);
  --tk-shadow: 0 30px 70px -28px rgba(0,0,0,.7);
}

/* Light-mode borders were too faint over the soft background. Bump the most
   common Tailwind border utilities one step darker — only in light mode, so dark
   mode (which uses its own dark:border-* variants) is untouched. */
html:not(.dark) .border-slate-100{ border-color:#e2e8f0 } /* was slate-100 */
html:not(.dark) .border-slate-200{ border-color:#cbd5e1 } /* slate-300 */
html:not(.dark) .border-slate-200\/80{ border-color:rgb(203 213 225 / .8) }
html:not(.dark) .border-slate-300{ border-color:#b6c0cf }
/* Dashed borders (empty-state boxes) read fainter than solid — push them darker. */
html:not(.dark) .border-dashed{ border-color:#94a3b8 }

/* Modern section separators on public pages (Tokify-style): a soft gradient
   hairline with a glowing, gently-pulsing brand dot centred on it. Pure CSS, so
   conditionally-rendered sections simply don't get one, and the first section
   never has one above it. */
.omni-home > section + section,
.omni-sections > section + section{ position:relative; padding-top:4.5rem }
/* The line + dot sit centred in the reserved top space, so there is breathing
   room both above (previous section) and below (this section's content). */
.omni-home > section + section::before,
.omni-sections > section + section::before{
  content:""; position:absolute; top:2.25rem; left:50%; transform:translateX(-50%);
  width:min(60rem, calc(100% - 3rem)); height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, rgb(var(--brand-500)) 30%, transparent) 14%,
    color-mix(in srgb, rgb(var(--brand-500)) 30%, transparent) 86%, transparent);
}
/* (The centred brand dot was removed by request — only the hairline remains.) */
/* Sections opting out of the top separator hairline (e.g. the "how it works"
   flow and the stats band): the line is hidden, the breathing space stays. */
.omni-home > section.no-sep::before,
.omni-sections > section.no-sep::before{ display:none !important; content:none !important }
/* Explicit separator hairline — dropped in exactly where a divider is wanted
   (the auto `section + section` rule breaks when a <script> sits between two
   sections, so these are placed by hand). */
.omni-hr{ width:min(60rem, calc(100% - 3rem)); height:1px; margin:3.5rem auto; border:0;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, rgb(var(--brand-500)) 30%, transparent) 14%,
    color-mix(in srgb, rgb(var(--brand-500)) 30%, transparent) 86%, transparent); }

/* Section headings (home, testimonials, etc.). Tailwind's preflight resets
   h2 to inherit, so this class provides the real size/weight. */
.omni-h2{ font-size:clamp(1.7rem, 1.1rem + 2.2vw, 2.4rem); font-weight:800; letter-spacing:-.02em; line-height:1.12 }

/* Public page background. The base colour stays on the body; the subtle
   brand/accent radial wash lives on a FIXED, full-viewport pseudo-element so it
   always covers the whole screen regardless of the body's height or scroll
   position (the body is h-full = one screen tall, so painting the wash on it
   left a hard horizontal seam past the first viewport).
   IMPORTANT: fade to the SAME hue at 0 alpha — never to the `transparent`
   keyword (= transparent black), which interpolates through grey and produces a
   visible contrast halo instead of a smooth gradient. */
.tk-bg{ background:var(--tk-bg) !important; }
.tk-bg::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 820px at 88% -12%, rgb(var(--brand-500) / .14), rgb(var(--brand-500) / 0) 72%),
    radial-gradient(960px 680px at -8% 2%, rgb(138 92 255 / .12), rgb(138 92 255 / 0) 70%);
}

/* Mobile/tablet: the ambient gradients (fixed aurora + the body radials above)
   bleed through the semi-transparent cards and shift colour while scrolling.
   Drop them below the desktop breakpoint for a clean, solid background (light and
   dark). MUST come after .tk-bg so it wins at equal specificity/importance. */
@media (max-width: 1023px){
  .app-aurora{ display:none !important }
  .tk-bg{ background:var(--tk-bg) !important }
  .tk-bg::before{ display:none !important }
}

@keyframes tkpop{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* Waving hand for the dashboard greeting (👋). */
@keyframes wave{ 0%,60%,100%{ transform:rotate(0deg) } 10%,30%{ transform:rotate(14deg) } 20%{ transform:rotate(-8deg) } 40%{ transform:rotate(-4deg) } 50%{ transform:rotate(10deg) } }
.wave-hand{ display:inline-block; transform-origin:70% 70%; animation:wave 1.8s ease-in-out infinite }

/* ============ Buttons ============ */
.btn{
  --b1:var(--tk-brand-2); --b2:var(--tk-brand);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; font:inherit; font-weight:600;
  padding:11px 20px; border-radius:999px; color:#fff; text-decoration:none;
  background:linear-gradient(180deg,var(--b1),var(--b2));
  box-shadow:0 10px 26px -10px var(--tk-glow), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .12s var(--tk-ease), box-shadow .25s var(--tk-ease), filter .2s var(--tk-ease);
}
.btn:hover{ transform:translateY(-1.5px); filter:brightness(1.07); box-shadow:0 18px 36px -12px var(--tk-glow) }
.btn:active{ transform:translateY(0) }
.btn.ghost{ background:var(--tk-surface); color:var(--tk-text); border:1px solid var(--tk-border-strong); box-shadow:none; backdrop-filter:blur(8px) }
.btn.ghost:hover{ background:var(--tk-surface-2) }
.btn.sm{ padding:8px 15px; font-size:.9rem }
.btn.block{ width:100% }
.btn .material-symbols-outlined{ font-size:1.15em }

.icon-btn{
  width:40px; height:40px; border-radius:999px; display:inline-grid; place-items:center; cursor:pointer;
  background:transparent; border:0; color:var(--tk-text); transition:background .2s var(--tk-ease), transform .12s var(--tk-ease);
}
.icon-btn:hover{ background:var(--tk-surface-2); transform:translateY(-1px) }
.ctl-btn{ background:var(--tk-surface); border:1px solid var(--tk-border) }
.ctl-btn:hover{ border-color:var(--tk-brand); color:var(--tk-brand) }
/* Slightly larger, easier-to-tap header control buttons on mobile. */
@media (max-width:640px){
  .icon-btn.ctl-btn{ width:46px; height:46px }
  .icon-btn.ctl-btn .material-symbols-outlined{ font-size:24px }
}

.pill{
  display:inline-flex; align-items:center; gap:7px; line-height:1;
  background:var(--tk-surface-2); border:1px solid var(--tk-border);
  border-radius:999px; padding:6px 12px; font-size:.78rem; color:var(--tk-muted);
}
.pill.brand{ color:var(--tk-brand); border-color:var(--tk-glow); background:color-mix(in srgb, var(--tk-brand) 13%, transparent) }

/* ============ Top navigation (public) ============ */
.topbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--tk-bg-soft) 62%, transparent);
  backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid var(--tk-border);
}
.topbar-inner{ position:relative; display:flex; align-items:center; gap:22px; height:66px; max-width:1180px; margin:0 auto; padding:0 24px }
.brand{ display:inline-flex; align-items:center; gap:11px; font-weight:800; font-size:1.16rem; letter-spacing:-.03em; color:var(--tk-text); text-decoration:none }
.topbar-menu{ display:flex; align-items:center; gap:12px; flex:1; justify-content:flex-end; min-width:0 }
.topbar-menu > .nav-center{ margin:0 auto; flex-shrink:1; min-width:0 }
.nav-links{ display:flex; align-items:center; gap:2px }
.nav-links a{
  color:var(--tk-muted); font-weight:500; padding:8px 12px; border-radius:9px; position:relative; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  transition:color .2s var(--tk-ease), background .2s var(--tk-ease);
}
.nav-links a:hover{ color:var(--tk-text); background:var(--tk-surface) }
.nav-links a .material-symbols-outlined{ font-size:1.2rem; color:var(--tk-brand) }
.nav-links a::after{ content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; border-radius:2px;
  background:var(--tk-brand); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--tk-ease) }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1) }
.nav-links a.active{ color:var(--tk-text) }
.topbar-ctl{ display:flex; align-items:center; gap:8px }
.topbar-burger{ display:none; margin-left:auto; width:42px; height:42px; border-radius:12px; cursor:pointer;
  background:var(--tk-surface); border:1px solid var(--tk-border); color:var(--tk-text); place-items:center; transition:.18s var(--tk-ease) }
.topbar-burger:hover{ border-color:var(--tk-brand); color:var(--tk-brand) }
.tb-login{ color:var(--tk-muted); font-weight:600; padding:8px 12px; border-radius:9px; text-decoration:none; transition:color .18s var(--tk-ease) }
.tb-login:hover{ color:var(--tk-text) }
/* Language capsule */
.tk-langcap{ display:inline-flex; align-items:center; gap:2px; padding:4px; background:var(--tk-surface); border:1px solid var(--tk-border); border-radius:999px }
.tk-langcap a{ padding:5px 11px; border-radius:999px; font-size:.78rem; font-weight:700; color:var(--tk-muted); text-decoration:none; transition:.18s var(--tk-ease) }
.tk-langcap a:hover{ color:var(--tk-text) }
.tk-langcap a.sel{ background:var(--tk-brand); color:#fff }

@media(max-width:1024px){
  .topbar-inner{ gap:10px; padding:0 16px }
  .topbar-burger{ display:grid }
  .topbar-menu{ position:absolute; top:calc(100% + 8px); left:14px; right:14px; margin-left:0; flex:0; display:none;
    flex-direction:column; align-items:stretch; gap:14px; padding:16px;
    border-radius:16px; background:var(--tk-bg-soft); border:1px solid var(--tk-border-strong); box-shadow:var(--tk-shadow) }
  html.dark .topbar-menu{ background:#0e1422 }
  .topbar-menu.open{ display:flex; animation:tkpop .16s var(--tk-ease) }
  .topbar-menu > .nav-center{ width:100% }
  .topbar-menu .nav-links{ flex-direction:column; align-items:stretch; gap:8px; width:100% }
  .topbar-menu .nav-links a{ padding:14px 16px; border-radius:14px; background:var(--tk-surface); border:1px solid var(--tk-border); font-weight:600; color:var(--tk-text) }
  .topbar-menu .nav-links a .material-symbols-outlined{ width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:color-mix(in srgb, var(--tk-brand) 14%, transparent); color:var(--tk-brand); flex:none }
  .topbar-menu .nav-links a::after{ display:none }
  /* Controls live in the bar (not the drawer): group them at the right, before
     the burger. */
  .topbar-ctl{ margin-left:auto; gap:6px }
  .topbar-burger{ margin-left:0 }
}
@media(min-width:1025px){ .topbar-burger{ display:none } }

/* ============ Public footer ============ */
.site-foot{ position:relative; overflow:hidden; margin-top:40px; border-top:1px solid var(--tk-border);
  background:color-mix(in srgb, var(--tk-bg-soft) 55%, transparent) }
.foot-glow{ position:absolute; top:-160px; left:50%; transform:translateX(-50%); width:760px; height:320px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgb(var(--brand-500) / .22), transparent 70%); filter:blur(50px) }
.foot-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:54px 24px 30px; display:grid; grid-template-columns:1.4fr 2fr; gap:40px }
.foot-brand .muted{ color:var(--tk-muted); max-width:340px; line-height:1.6; margin:12px 0 18px }
.foot-tag{ color:var(--tk-text); max-width:400px; line-height:1.55; margin:16px 0 22px; font-size:1.15rem; font-weight:600 }
.foot-cta{ display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 6px }
.foot-social{ display:flex; gap:10px; margin-top:14px }
.foot-social a{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:1.05rem;
  color:var(--tk-muted); background:var(--tk-surface); border:1px solid var(--tk-border); text-decoration:none; transition:.18s var(--tk-ease) }
.foot-social a:hover{ color:#fff; background:var(--tk-brand); border-color:var(--tk-brand); transform:translateY(-2px) }
.foot-cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:24px }
.foot-col h4{ margin:0 0 12px; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tk-muted) }
.foot-col a, .foot-col button{ display:block; color:var(--tk-text); padding:6px 0; font-size:.92rem; background:0; border:0; cursor:pointer; text-align:left; font:inherit; text-decoration:none; transition:color .18s var(--tk-ease) }
.foot-col a:hover, .foot-col button:hover{ color:var(--tk-brand) }
.foot-bottom{ position:relative; z-index:1; border-top:1px solid var(--tk-border); text-align:center; padding:18px 24px; color:var(--tk-muted); font-size:.85rem;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center }
@media(max-width:760px){ .foot-inner{ grid-template-columns:1fr; gap:30px } }
@media(max-width:460px){ .foot-cols{ grid-template-columns:1fr } }

/* ============ Smooth accordions (FAQ + blog TOC) ============ */
/* Chevron rotates when the panel opens. */
.acc-chev{ transition:transform .28s var(--tk-ease) }
details[open] > summary .acc-chev{ transform:rotate(180deg) }
/* Content reveal: real height animation where supported (Chrome 131+), with a
   gentle fade everywhere the ::details-content pseudo is recognised. */
.omni-acc::details-content{ opacity:0; transition:opacity .25s var(--tk-ease) }
.omni-acc[open]::details-content{ opacity:1 }
@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size:allow-keywords }
  .omni-acc::details-content{ block-size:0; overflow:clip;
    transition:block-size .3s var(--tk-ease), opacity .3s var(--tk-ease), content-visibility .3s allow-discrete }
  .omni-acc[open]::details-content{ block-size:auto }
}
@media (prefers-reduced-motion: reduce){
  .acc-chev,.omni-acc::details-content{ transition:none }
}

/* ============ App / admin layout — side navbar ============ */
.tk-layout{ display:grid; grid-template-columns:270px 1fr; min-height:100vh }
.tk-sidebar{ display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh;
  border-right:1px solid var(--tk-border);
  background:color-mix(in srgb, var(--tk-bg-soft) 60%, transparent);
  backdrop-filter:saturate(160%) blur(20px); -webkit-backdrop-filter:saturate(160%) blur(20px) }
.tk-sidebar .brand{ padding:6px 8px 2px; font-size:1.18rem; display:flex; width:100%; justify-content:center }
.nav-main{ flex:1; display:flex; flex-direction:column; gap:3px; overflow-y:auto; margin:14px 0 }
.nav-sec{ padding:14px 12px 4px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--tk-muted); opacity:.8 }
.nav-link{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--tk-r-sm);
  color:var(--tk-muted); font-weight:500; font-size:1rem; text-decoration:none; position:relative;
  transition:background .18s var(--tk-ease), color .18s var(--tk-ease) }
.nav-link:hover{ background:var(--tk-surface); color:var(--tk-text) }
.nav-link.active{ background:color-mix(in srgb, var(--tk-brand) 15%, transparent); color:var(--tk-text) }
.nav-link.active::before{ content:""; position:absolute; left:-4px; width:4px; height:18px; border-radius:4px; background:var(--tk-brand); box-shadow:0 0 10px var(--tk-glow) }
.nav-link .ic{ width:22px; display:grid; place-items:center; flex:none; color:inherit }
.nav-link .ic .material-symbols-outlined{ font-size:1.3rem }
.nav-link.active .ic .material-symbols-outlined{ color:var(--tk-brand) }

.nav-foot{ display:flex; flex-direction:column; gap:10px; padding-top:12px; border-top:1px solid var(--tk-border) }
.mins-box{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border-radius:14px;
  color:var(--tk-text); font-weight:600; font-size:.9rem; background:var(--tk-surface); border:1px solid var(--tk-border) }
.mins-box .l{ display:inline-flex; align-items:center; gap:8px }
.user-row{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:14px; border:1px solid var(--tk-border); background:var(--tk-surface) }
.user-av{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:1rem; color:#fff;
  background:linear-gradient(135deg, var(--tk-brand), #a855f7); box-shadow:0 0 0 1px var(--tk-glow), 0 4px 14px color-mix(in srgb, var(--tk-brand) 38%, transparent) }
.user-meta{ min-width:0; flex:1 }
.user-name{ font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.user-email{ color:var(--tk-muted); font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.user-acts{ display:flex; align-items:center; gap:4px }

.tk-main{ min-width:0; display:flex; flex-direction:column }
.tk-content{ width:100%; max-width:1500px; margin:0 auto; padding:34px 44px }

/* Uniform page titles: one size + the brand gradient across the app & admin. */
.tk-content h1.text-2xl{
    font-size:clamp(1.9rem, 3.2vw, 2.5rem); line-height:1.18; font-weight:800; letter-spacing:-.025em;
    background-image:linear-gradient(120deg, rgb(var(--brand-700)), #7c3aed 60%, #0891b2);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dark .tk-content h1.text-2xl{ background-image:linear-gradient(120deg, rgb(var(--brand-300)), #c4b5fd 55%, #67e8f9) }
/* Icons/emoji inside gradient titles keep their own color (not gradient-clipped). */
.tk-content h1.text-2xl .material-symbols-outlined{ -webkit-text-fill-color:currentColor }
.tk-content h1.text-2xl > span:not(.material-symbols-outlined){ color:var(--tk-text); -webkit-text-fill-color:currentColor }
.tk-content h1.text-2xl + p{ font-size:1.08rem }

/* Sidebar collapsible dropdown (e.g. Referrals). */
.nav-dd{ display:block }
.nav-dd > summary{ list-style:none; cursor:pointer }
.nav-dd > summary::-webkit-details-marker{ display:none }
.nav-dd-sum .nav-dd-arrow{ margin-left:auto; font-size:20px; transition:transform .2s }
.nav-dd[open] > .nav-dd-sum .nav-dd-arrow{ transform:rotate(180deg) }
.nav-dd-items{ margin:2px 0 2px 14px; padding-left:8px; border-left:1px solid var(--tk-border); display:flex; flex-direction:column; gap:2px }
.nav-dd-items .nav-sub{ font-size:.93em }

/* Toggle switches: pointer cursor over the track (and its label). */
input.sr-only.peer + span{ cursor:pointer }
label:has(> .relative > input.sr-only.peer),
label:has(> .relative input.sr-only.peer){ cursor:pointer }

/* SweetAlert inputs follow the dark theme (popup bg is themed in JS). */
.dark .swal2-input,.dark .swal2-textarea,.dark .swal2-select{ background:#0f1730; color:#e2e8f0; border-color:rgba(255,255,255,.16) }
.dark .swal2-input::placeholder,.dark .swal2-textarea::placeholder{ color:#64748b }
.tk-content .text-3xl{ font-size:2.2rem }
.tk-content .text-sm{ font-size:1.1rem }
.tk-content .text-xs{ font-size:.85rem }

/* Theme-color picker: brand preset cards + native color input (Tokify style). */
.theme-presets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px }
.theme-preset{ display:flex; align-items:center; gap:11px; padding:12px 14px; border:1.5px solid var(--tk-border); border-radius:13px;
    background:var(--tk-surface,rgba(255,255,255,.04)); cursor:pointer; transition:.15s; text-align:left; color:inherit }
.theme-preset:hover{ border-color:var(--tk-border-strong,rgba(120,120,140,.5)) }
.theme-preset.sel{ border-color:rgb(var(--brand-600)); box-shadow:0 0 0 3px color-mix(in srgb,rgb(var(--brand-600)) 22%,transparent) }
.tp-swatch{ width:30px; height:30px; border-radius:9px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12) }
.tp-custom{ display:grid; place-items:center; color:#fff; background:conic-gradient(from 0deg,#fe2c55,#ff0000,#ffb400,#22d36b,#2b7bff,#a855f7,#fe2c55) }
.tp-name{ font-weight:600; font-size:.92rem }

/* Futuristic date / datetime picker — enhances native date inputs (Tokify style). */
.tk-date{ position:relative; display:inline-block; width:100% }
.tk-date-native{ position:absolute !important; width:1px; height:1px; opacity:0; pointer-events:none; margin:0; padding:0 }
.tk-date-btn{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 13px; cursor:pointer; font:inherit;
    border:1px solid var(--tk-border); border-radius:var(--tk-r-sm,12px); background:var(--tk-surface); color:var(--tk-text) }
.dark .tk-date-btn{ background:rgba(255,255,255,.04) }
.tk-date-btn:hover{ border-color:rgb(var(--brand-600)) }
.tk-date.open .tk-date-btn{ border-color:rgb(var(--brand-600)); box-shadow:0 0 0 4px color-mix(in srgb,rgb(var(--brand-600)) 22%,transparent) }
.tk-date-btn .tk-date-lbl{ flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tk-date-btn.empty .tk-date-lbl{ color:var(--tk-muted) }
.tk-date-btn i{ color:var(--tk-muted); font-size:.9rem }
.tk-date-pop{ position:absolute; left:0; top:calc(100% + 8px); z-index:160; display:none; width:288px; padding:14px;
    border:1px solid var(--tk-border-strong); border-radius:16px; background:#ffffff;
    box-shadow:0 28px 70px -18px rgba(0,0,0,.55) }
.dark .tk-date-pop{ background:#0e1422; border-color:color-mix(in srgb,rgb(var(--brand-600)) 22%,var(--tk-border-strong)); box-shadow:0 28px 70px -18px rgba(0,0,0,.75) }
.tk-date.open .tk-date-pop{ display:block }
.tk-date.menu-right .tk-date-pop{ left:auto; right:0 }
.tk-date-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.tk-date-title{ font-weight:700; text-transform:capitalize; color:var(--tk-text) }
.tk-date-nav{ width:30px; height:30px; border-radius:8px; border:1px solid var(--tk-border); background:transparent; color:var(--tk-text); cursor:pointer; display:grid; place-items:center }
.tk-date-nav:hover{ border-color:rgb(var(--brand-600)); color:rgb(var(--brand-600)) }
.tk-date-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px }
.tk-date-week span{ text-align:center; font-size:.68rem; color:var(--tk-muted); text-transform:uppercase; padding:4px 0 }
.tk-date-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.tk-day{ aspect-ratio:1; border:none; background:transparent; color:var(--tk-text); border-radius:8px; cursor:pointer; font-size:.84rem }
.tk-day.out{ visibility:hidden }
.tk-day:hover:not(.dis):not(.sel){ background:var(--tk-surface-2) }
.tk-day.today{ box-shadow:inset 0 0 0 1.5px rgb(var(--brand-600)) }
.tk-day.sel{ background:linear-gradient(180deg,rgb(var(--brand-500)),rgb(var(--brand-600))); color:#fff; font-weight:700 }
.tk-day.dis{ color:var(--tk-muted); opacity:.4; cursor:not-allowed }
.tk-date-time{ display:flex; align-items:center; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--tk-border); color:var(--tk-muted) }
.tk-date-time select{ flex:none; padding:6px 8px; border:1px solid var(--tk-border); border-radius:8px; background:var(--tk-surface); color:var(--tk-text); font:inherit; cursor:pointer }
.tk-date-foot{ margin-top:8px; display:flex; justify-content:flex-end }
.tk-date-today{ border:none; background:transparent; color:rgb(var(--brand-600)); font-weight:600; cursor:pointer; font-size:.82rem }

/* Futuristic colour picker (SV square + hue + palette) — enhances input[type=color]. */
.tk-color{ position:relative; display:inline-block }
.tk-color input[type=color]{ position:absolute; left:0; bottom:0; width:1px; height:1px; opacity:0; pointer-events:none }
.tk-swatch{ display:flex; align-items:center; gap:9px; min-width:160px; padding:8px 12px 8px 9px; cursor:pointer; font:inherit;
    border:1px solid var(--tk-border-strong); border-radius:var(--tk-r-sm,12px); background:var(--tk-surface); color:var(--tk-text); transition:.18s var(--tk-ease,ease) }
.dark .tk-swatch{ background:rgba(255,255,255,.04) }
.tk-swatch:hover{ border-color:rgb(var(--brand-600)) }
.tk-color.open .tk-swatch{ border-color:rgb(var(--brand-600)); box-shadow:0 0 0 4px color-mix(in srgb,rgb(var(--brand-600)) 22%,transparent) }
.tk-swatch-c{ width:22px; height:22px; border-radius:6px; flex:none; border:1px solid rgba(255,255,255,.25); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25) }
.tk-swatch-hex{ flex:1; font-size:.82rem; letter-spacing:.04em; color:var(--tk-muted); text-align:left }
.tk-swatch .fa-chevron-down{ font-size:.64rem; color:var(--tk-muted) }
.tk-color-pop{ position:absolute; left:0; top:calc(100% + 6px); z-index:200; display:none; width:236px; padding:12px;
    border-radius:var(--tk-r-md,16px); background:var(--tk-surface-2,var(--tk-surface)); border:1px solid var(--tk-border-strong); box-shadow:0 28px 70px -18px rgba(0,0,0,.55) }
.dark .tk-color-pop{ background:#0e1422; box-shadow:0 28px 70px -18px rgba(0,0,0,.8) }
.tk-color.open .tk-color-pop{ display:block }
.tk-sv{ position:relative; width:100%; height:132px; border-radius:10px; cursor:crosshair; margin-bottom:12px; touch-action:none }
.tk-sv-cursor{ position:absolute; width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.45); transform:translate(-50%,-50%); pointer-events:none }
.tk-hue{ position:relative; width:100%; height:14px; border-radius:7px; margin-bottom:12px; cursor:pointer; touch-action:none;
    background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00) }
.tk-hue-thumb{ position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid rgba(0,0,0,.25); transform:translate(-50%,-50%); pointer-events:none; box-shadow:0 1px 4px rgba(0,0,0,.4) }
.tk-palette{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px }
.tk-palette .sw{ width:100%; aspect-ratio:1; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); transition:transform .12s var(--tk-ease,ease) }
.tk-palette .sw:hover{ transform:scale(1.13); box-shadow:0 0 0 2px rgb(var(--brand-600)) }
.tk-hex-row{ display:flex; align-items:center; gap:4px; margin-top:11px; padding:0 11px; border:1px solid var(--tk-border-strong); border-radius:var(--tk-r-sm,12px); background:var(--tk-bg-soft,var(--tk-surface)) }
.tk-hex-row > span{ color:var(--tk-muted); font-weight:600 }
.tk-hex{ flex:1; border:0 !important; background:transparent !important; box-shadow:none !important; outline:none; padding:9px 0 !important; text-transform:uppercase; letter-spacing:.1em; min-width:0; color:var(--tk-text); font:inherit }

/* Adaptive contrast: text/icons on a brand-coloured background switch to a
   readable foreground (dark on light accents) so light themes stay legible. */
.btn-primary{ color:rgb(var(--brand-fg)) !important }
[class*="bg-brand-5"].text-white,
[class*="bg-brand-6"].text-white,
[class*="bg-brand-7"].text-white,
[class*="bg-brand-5"] > .text-white,
[class*="bg-brand-6"] > .text-white,
[class*="bg-brand-7"] > .text-white{ color:rgb(var(--brand-fg)) !important }
.tk-day.sel{ color:rgb(var(--brand-fg)) }

/* Home comparison panel (competitor vs us, with a bottom switcher). */
.omni-cmp{ border-radius:24px; overflow:hidden; border:1px solid rgba(120,130,160,.22);
    background:#0b1020; box-shadow:0 40px 90px -40px rgba(0,0,0,.6) }
.omni-cmp-head{ display:grid; grid-template-columns:1fr 1fr; background:#11182e; border-bottom:1px solid rgba(255,255,255,.08) }
.omni-cmp-head-half{ display:flex; align-items:center; justify-content:center; padding:26px 20px; min-height:96px }
.omni-cmp-head-half:first-child{ border-right:1px solid rgba(255,255,255,.08) }
.omni-cmp-logo-img{ height:40px; width:auto; max-width:78%; object-fit:contain }
.omni-cmp-logo-txt{ font-weight:800; font-size:1.7rem; letter-spacing:-.01em; color:#fff }
.omni-cmp-body{ display:grid; grid-template-columns:1fr 1fr }
.omni-cmp-col{ padding:24px 26px; max-height:430px; overflow:auto }
.omni-cmp-col--them{ background:#161d31; border-right:1px solid rgba(255,255,255,.07) }
.omni-cmp-col--ours{ background:#0e1626 }
.omni-cmp-label{ display:none } /* identifies each side; only needed when columns stack on mobile */
.omni-cmp-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:#8b93a7 }
.omni-cmp-dot--ours{ background:rgb(var(--brand-500)) }
.omni-cmp-text{ font-size:.95rem; line-height:1.6; transition:opacity .18s ease }
.omni-cmp-col--them .omni-cmp-text{ color:#aeb7cc }
.omni-cmp-col--ours .omni-cmp-text{ color:#dfe4f0 }
.omni-cmp-text p{ margin:0 0 .85em }
.omni-cmp-text p:first-child{ margin-top:0 }
.omni-cmp-text h1,.omni-cmp-text h2,.omni-cmp-text h3{ color:#fff; font-weight:700; margin:.2em 0 .5em }
.omni-cmp-text h2{ font-size:1.15rem } .omni-cmp-text h3{ font-size:1rem }
.omni-cmp-text a{ color:rgb(var(--brand-400)); text-decoration:underline }
.omni-cmp-text ul,.omni-cmp-text ol{ padding-left:1.25em; margin:.3em 0 }
.omni-cmp-text ul{ list-style:disc } .omni-cmp-text ol{ list-style:decimal }
.omni-cmp-text pre{ background:#0a0f1c; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:12px 14px; margin:.6em 0;
    overflow:auto; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem; line-height:1.5; color:#c9d3e6 }
.omni-cmp-text code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85em; background:rgba(255,255,255,.07); border-radius:5px; padding:1px 5px; color:#e2e8f0 }
.omni-cmp-text pre code{ background:none; padding:0 }
.omni-cmp-switch{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; padding:22px 20px; background:#0b1020 }
.omni-cmp-chip{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; cursor:pointer; overflow:hidden; border:none;
    background:linear-gradient(135deg, rgb(var(--brand-500)), rgb(var(--brand-700))); transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease; opacity:.55 }
.omni-cmp-chip:hover{ transform:translateY(-2px); opacity:1 }
.omni-cmp-chip img{ width:62%; height:62%; object-fit:contain }
.omni-cmp-chip span{ color:rgb(var(--brand-fg)); font-weight:800; font-size:1.1rem }
.omni-cmp-chip.is-active{ opacity:1; box-shadow:0 0 0 4px color-mix(in srgb,rgb(var(--brand-600)) 35%,transparent), 0 8px 22px -8px rgb(var(--brand-600) / .7) }
@media(max-width:820px){
    .omni-cmp-body{ grid-template-columns:1fr }
    .omni-cmp-col{ max-height:340px }
    .omni-cmp-col--them{ border-right:none; border-bottom:4px solid rgba(255,255,255,.12) }
    .omni-cmp-col--ours{ box-shadow:none }
    .omni-cmp-head-half{ min-height:76px; padding:18px 14px }
    .omni-cmp-logo-img{ height:30px }
    .omni-cmp-logo-txt{ font-size:1.25rem }
    /* Clean header bar at the top of each stacked example to identify it. */
    .omni-cmp-label{ display:flex; align-items:center; gap:8px; margin:-24px -26px 16px; padding:12px 26px;
        font-weight:700; font-size:.9rem; color:#fff;
        background:#11182e; border-bottom:1px solid rgba(255,255,255,.1) }
}

.mobilebar{ display:none }
.nav-overlay{ display:none }
.nav-close{ display:none }

@media(max-width:980px){
  .mobilebar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; height:62px; padding:0 14px;
    position:sticky; top:0; z-index:50; border-bottom:1px solid var(--tk-border);
    background:color-mix(in srgb, var(--tk-bg-soft) 72%, transparent);
    backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px) }
  .mobilebar .mb-left{ justify-self:start }
  .mobilebar .brand{ justify-self:center; font-size:1.1rem }
  .mobilebar .mb-right{ justify-self:end; display:flex; align-items:center; gap:8px }
  .tk-layout{ grid-template-columns:1fr }
  .tk-sidebar{ position:fixed; top:0; left:0; height:100dvh; width:284px; z-index:70;
    transform:translateX(-100%); transition:transform .26s var(--tk-ease) }
  .tk-sidebar .nav-close{ display:grid; place-items:center; position:absolute; top:14px; right:12px; z-index:3; width:36px; height:36px }
  /* On mobile the sidebar is a left drawer — keep its logo left-aligned (centered only on desktop). */
  .tk-sidebar .brand{ justify-content:flex-start; width:auto }
  body.nav-open .tk-sidebar{ transform:none; box-shadow:var(--tk-shadow) }
  body.nav-open .nav-overlay{ display:block; position:fixed; inset:0; z-index:60; background:rgba(3,6,14,.5); backdrop-filter:blur(4px) }
  .tk-content{ padding:22px 16px; max-width:none }
}

/* ---------------------------------------------------------------------------
   Futuristic range slider (.omni-range) + number inputs with no spinner.
   --------------------------------------------------------------------------- */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.no-spinner{ -moz-appearance:textfield; appearance:textfield }

.omni-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px; border-radius:999px; outline:none; cursor:pointer;
  background:
    linear-gradient(90deg, rgb(var(--brand-500)) 0%, rgb(var(--brand-400)) var(--omni-fill,0%),
      color-mix(in srgb, rgb(var(--brand-500)) 16%, transparent) var(--omni-fill,0%));
  box-shadow:0 1px 2px rgba(2,6,23,.18) inset;
  transition:background .12s linear;
}
.omni-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #fff 0 38%, rgb(var(--brand-500)) 39% 100%);
  border:2px solid #fff; cursor:grab;
  box-shadow:0 0 0 4px color-mix(in srgb, rgb(var(--brand-500)) 28%, transparent),
             0 2px 10px color-mix(in srgb, rgb(var(--brand-600)) 55%, transparent);
  transition:transform .12s var(--tk-ease), box-shadow .12s;
}
.omni-range::-webkit-slider-thumb:hover{ transform:scale(1.12) }
.omni-range::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.05) }
.omni-range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 5px color-mix(in srgb, rgb(var(--brand-500)) 38%, transparent) }
.omni-range::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #fff 0 38%, rgb(var(--brand-500)) 39% 100%);
  border:2px solid #fff; cursor:grab;
  box-shadow:0 0 0 4px color-mix(in srgb, rgb(var(--brand-500)) 28%, transparent),
             0 2px 10px color-mix(in srgb, rgb(var(--brand-600)) 55%, transparent);
}
.omni-range::-moz-range-track{ height:8px; border-radius:999px; background:color-mix(in srgb, rgb(var(--brand-500)) 16%, transparent) }
.omni-range::-moz-range-progress{ height:8px; border-radius:999px; background:linear-gradient(90deg, rgb(var(--brand-500)), rgb(var(--brand-400))) }