@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap");

:root{
  --background: 213 45% 67%;
  --foreground: 0 0% 100%;
  --primary: 0 0% 100%;
  --primary-foreground: 213 45% 67%;
  --border: 0 0% 100% / 0.2;
  --radius: 9999px;
  --font-heading: 'Instrument Serif', serif;
  --font-body: 'Barlow', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:#000;
  color:hsl(var(--foreground));
  font-family:var(--font-body);
  overflow-x:hidden;
}
.font-heading{font-family:var(--font-heading)}
/* liquid glass */
.liquid-glass{
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.liquid-glass-strong{
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: none;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:none;cursor:pointer;
  border-radius:9999px;
  font-family:var(--font-body);
}
.btn-solid{background:#fff;color:#000;padding:12px 22px;font-weight:500;font-size:14px}
.btn-glass{padding:14px 26px;color:#fff;font-size:14px;font-weight:400}
.btn-text{background:none;border:none;cursor:pointer;color:#fff;font-family:var(--font-body);font-size:14px;display:inline-flex;align-items:center;gap:8px}
/* badge */
.badge{
  display:inline-block;
  border-radius:9999px;
  padding:0.35rem 0.875rem;
  font-size:0.75rem;
  font-weight:500;
  color:#fff;
  font-family:var(--font-body);
  margin-bottom:1rem;
}
/* headings */
.heading{
  font-family:var(--font-heading);
  font-style:italic;
  color:#fff;
  letter-spacing:-0.025em;
  line-height:0.9;
  font-weight:400;
}
/* navbar */
.navbar{
  position:fixed;top:1rem;left:0;width:100%;z-index:50;
  display:flex;justify-content:center;padding:0 1rem;
}
.nav-pill{
  display:flex;align-items:center;gap:1.5rem;
  padding:8px 12px;
  border-radius:9999px;
}
.nav-logo{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-style:italic;font-size:20px;border:1px solid rgba(255,255,255,0.2);border-radius:12px}
.nav-links{display:flex;gap:1.25rem;align-items:center}
.nav-link{color:rgba(255,255,255,0.9);font-size:0.875rem;font-weight:500;cursor:pointer;text-decoration:none;font-family:var(--font-body)}
.nav-cta{background:#fff;color:#000;border-radius:9999px;padding:8px 18px;font-size:0.875rem;font-weight:500;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body)}
/* hero */
.hero{position:relative;height:1000px;background:#000;overflow:visible}
.hero-video{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.30);z-index:0}
.hero-bottom{position:absolute;bottom:0;left:0;right:0;height:300px;z-index:1;background:linear-gradient(to bottom, transparent, #000)}
.hero-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;padding-top:150px;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;border-radius:9999px;padding:6px 16px 6px 6px}
.badge-new{background:#fff;color:#000;border-radius:9999px;padding:4px 12px;font-size:0.75rem;font-weight:500;font-family:var(--font-body)}
.hero-heading{font-size:clamp(3.75rem,7vw,5.5rem);margin-top:1.5rem}
.hero-sub{color:rgba(255,255,255,0.6);font-family:var(--font-body);font-weight:300;font-size:0.875rem;max-width:520px;margin-top:1.5rem;line-height:1.6}
.hero-ctas{display:flex;align-items:center;gap:1.5rem;margin-top:2rem}
/* blur word */
.blur-word{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(50px);animation:blurWord 1.05s cubic-bezier(0.25,0.1,0.25,1) forwards}
@keyframes blurWord{
  0%{opacity:0;filter:blur(10px);transform:translateY(50px)}
  33%{opacity:0.5;filter:blur(5px);transform:translateY(-5px)}
  100%{opacity:1;filter:blur(0px);transform:translateY(0)}
}
.blur-in{opacity:0;filter:blur(8px);animation:blurIn 0.9s cubic-bezier(0.25,0.1,0.25,1) forwards}
@keyframes blurIn{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
/* partners */
.partners{display:flex;flex-direction:column;align-items:center;padding:4rem 1rem 3rem}
.partner-names{display:flex;gap:3rem;margin-top:1.5rem;flex-wrap:wrap;justify-content:center}
.partner-names span{font-family:var(--font-heading);font-style:italic;font-size:clamp(1.5rem,3vw,1.875rem);color:#fff}
/* sections general */
.section{position:relative}
.video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.fade-top,.fade-bottom{position:absolute;left:0;right:0;height:200px;z-index:1;pointer-events:none}
.fade-top{top:0;background:linear-gradient(to bottom, #000, transparent)}
.fade-bottom{bottom:0;background:linear-gradient(to top, #000, transparent)}
.section-content{position:relative;z-index:10}
/* start section */
.start{min-height:700px;padding:8rem 1.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.start-inner{min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.start h2{font-size:clamp(2.25rem,5vw,3.75rem)}
.start p{color:rgba(255,255,255,0.6);font-weight:300;font-size:0.875rem;max-width:560px;margin-top:1.25rem;line-height:1.6}
.start .btn{margin-top:2rem}
/* features chess */
.chess{padding:6rem 1.5rem;max-width:1200px;margin:0 auto}
.chess-header{text-align:center;margin-bottom:4rem}
.chess-header h2{font-size:clamp(2.25rem,5vw,3.75rem);margin-top:0.5rem}
.chess-row{display:flex;gap:3rem;align-items:center;margin-bottom:5rem}
.chess-row.reverse{flex-direction:row-reverse}
.chess-text{flex:1}
.chess-text h3{font-family:var(--font-heading);font-style:italic;color:#fff;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.1;font-weight:400}
.chess-text p{color:rgba(255,255,255,0.6);font-weight:300;font-size:0.875rem;margin-top:1rem;line-height:1.6}
.chess-text .btn{margin-top:1.5rem}
.chess-image{flex:1}
.chess-image .gif-box{border-radius:1rem;overflow:hidden;min-height:260px;display:flex;align-items:center;justify-content:center}
.gif-placeholder{width:100%;height:260px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a2a3a 0%, #2a1a3a 100%)}
.gif-placeholder span{font-family:var(--font-heading);font-style:italic;font-size:2rem;color:rgba(255,255,255,0.5)}
/* grid */
.grid-sec{max-width:1200px;margin:0 auto;padding:6rem 1.5rem}
.grid-sec .badge{display:block;text-align:center}
.grid-header{text-align:center;margin-bottom:3rem}
.grid-header h2{font-size:clamp(2.25rem,5vw,3.75rem);margin-top:0.5rem}
.grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{border-radius:1rem;padding:1.5rem}
.card-icon{width:2.5rem;height:2.5rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:1rem}
.card h3{font-family:var(--font-heading);font-style:italic;font-size:1.125rem;color:#fff;font-weight:400}
.card p{color:rgba(255,255,255,0.6);font-weight:300;font-size:0.875rem;margin-top:0.5rem;line-height:1.5}
/* stats */
.stats{position:relative;padding:4rem 1.5rem}
.stats-panel{border-radius:1.5rem;padding:3rem;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;text-align:center}
@media(min-width:1024px){.stats-panel{grid-template-columns:repeat(4,1fr)}}
.stat-value{font-family:var(--font-heading);font-style:italic;font-size:clamp(2.25rem,6vw,3.75rem);color:#fff}
.stat-label{color:rgba(255,255,255,0.6);font-weight:300;font-size:0.875rem;margin-top:0.25rem}
/* testimonials */
.testi{max-width:1200px;margin:0 auto;padding:6rem 1.5rem}
.testi-header{text-align:center;margin-bottom:3rem}
.testi-header h2{font-size:clamp(2.25rem,5vw,3.75rem);margin-top:0.5rem}
.testi-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.testi-grid{grid-template-columns:repeat(3,1fr)}}
.testi-card{border-radius:1rem;padding:2rem}
.testi-card blockquote{color:rgba(255,255,255,0.8);font-weight:300;font-size:0.875rem;font-style:italic;line-height:1.6}
.testi-name{color:#fff;font-weight:500;font-size:0.875rem;margin-top:1rem}
.testi-role{color:rgba(255,255,255,0.5);font-weight:300;font-size:0.75rem;margin-top:0.25rem}
/* cta */
.cta-sec{position:relative;padding:6rem 1.5rem;text-align:center}
.cta-sec h2{font-size:clamp(3rem,7vw,4.5rem);max-width:800px;margin:0 auto}
.cta-sec p{color:rgba(255,255,255,0.6);font-weight:300;font-size:0.875rem;margin-top:1.25rem}
.cta-btns{display:flex;gap:1rem;justify-content:center;margin-top:2rem}
.footer{margin-top:8rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,0.1)}
.footer-copy{color:rgba(255,255,255,0.4);font-size:0.75rem;margin-top:1rem}
.footer-links{display:flex;gap:1.5rem;justify-content:center;margin-top:1rem}
.footer-links a{color:rgba(255,255,255,0.4);font-size:0.75rem;text-decoration:none}
@media(max-width:768px){
  .nav-links{display:none}
  .chess-row,.chess-row.reverse{flex-direction:column}
}

/* ══ Plan cards: stronger black shadow so the text stands out ══ */
.grid-sec .card{
  background:
    linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.72) 100%);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  box-shadow:
    0 30px 80px rgba(0,0,0,.85),
    0 10px 30px rgba(0,0,0,.6),
    inset 0 1px 1px rgba(255,255,255,.10);
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
.grid-sec .card h3,
.grid-sec .card p,
.grid-sec .card b{ text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.grid-sec .card p{ color: rgba(255,255,255,.86) }
.grid-sec .card p[style*="opacity"]{ opacity:1 !important }

/* ══════════════════════════════════════════════════════════════
   Platform modules: chat + market
   Same design system exactly — same fonts, same liquid-glass, same colours.
   Added 2026-10-14 (replacing per-page bespoke styles).
   ══════════════════════════════════════════════════════════════ */

/* ── Chat ── */
.chat-wrap{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start}
@media(min-width:900px){.chat-wrap{grid-template-columns:280px 1fr}}
.panel{border-radius:1rem;padding:1.5rem}
.panel-label{font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:1rem;font-weight:500}
.agent-list{display:flex;flex-direction:column;gap:0.5rem;max-height:60vh;overflow:auto}
.agent-row{border-radius:0.75rem;padding:0.75rem 0.9rem;cursor:pointer;border:1px solid rgba(255,255,255,0.1);transition:background 0.15s}
.agent-row:hover{background:rgba(255,255,255,0.06)}
.agent-row.active{background:#fff;color:#000;border-color:#fff}
.agent-row .n{font-family:var(--font-heading);font-style:italic;font-size:1rem}
.agent-row .h{font-size:0.75rem;color:rgba(255,255,255,0.5);margin-top:0.25rem}
.agent-row.active .h{color:rgba(0,0,0,0.55)}
.chat-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.1);flex-wrap:wrap}
.chat-head .who{font-family:var(--font-heading);font-style:italic;font-size:1.25rem;color:#fff}
.chat-head .sub{font-size:0.75rem;color:rgba(255,255,255,0.5);margin-top:0.15rem}
.status{font-size:0.75rem;color:rgba(255,255,255,0.6);display:inline-flex;align-items:center;gap:0.4rem}
.dot{width:7px;height:7px;border-radius:9999px;background:#7ee6a0;display:inline-block}
.dot.busy{background:#F2F4F7;animation:sxPulse 1s infinite}
@keyframes sxPulse{0%,100%{opacity:1}50%{opacity:.3}}
.chat-thread{display:flex;flex-direction:column;gap:0.75rem;padding:1.5rem 0;min-height:320px;max-height:52vh;overflow:auto}
.msg{max-width:80%;border-radius:1rem;padding:0.75rem 1rem;font-size:0.875rem;font-weight:300;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}
.msg.me{align-self:flex-start;background:#fff;color:#000}
.msg.it{align-self:flex-end;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);color:rgba(255,255,255,0.92)}
.msg.sys{align-self:center;font-size:0.75rem;color:rgba(255,255,255,0.5);text-align:center;max-width:92%;background:none}
.meta{font-size:0.7rem;color:rgba(255,255,255,0.45);margin-top:0.35rem}
.composer{display:flex;gap:0.75rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.1)}
.composer input{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);border-radius:9999px;padding:0.75rem 1.1rem;color:#fff;font-family:var(--font-body);font-size:0.875rem;outline:none}
.composer input::placeholder{color:rgba(255,255,255,0.4)}
.hint{font-size:0.75rem;color:rgba(255,255,255,0.4);padding-top:0.75rem}

/* ── Market ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem}
.kpi{border-radius:1rem;padding:1rem 1.25rem}
.kpi .v{font-family:var(--font-heading);font-style:italic;font-size:1.75rem;color:#fff}
.kpi .l{font-size:0.75rem;color:rgba(255,255,255,0.5);margin-top:0.25rem;font-weight:300}
.chips{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1.5rem}
.chip{border-radius:9999px;padding:0.4rem 0.9rem;font-size:0.8rem;border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.85);background:none;cursor:pointer;font-family:var(--font-body)}
.chip.on{background:#fff;color:#000;border-color:#fff}
.live{font-size:0.75rem;color:rgba(255,255,255,0.45);display:inline-flex;align-items:center;gap:0.4rem;margin-left:auto}
.a-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.a-name{font-family:var(--font-heading);font-style:italic;font-size:1.125rem;color:#fff}
.tags{display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:0.5rem}
.tag{font-size:0.7rem;border:1px solid rgba(255,255,255,0.18);border-radius:9999px;padding:0.15rem 0.6rem;color:rgba(255,255,255,0.75)}
.tag.own{border-color:rgba(220,222,226,0.6);color:#ffe4a3}
.price{font-family:var(--font-heading);font-style:italic;font-size:1.25rem;white-space:nowrap;text-align:right}
.price small{font-family:var(--font-body);font-style:normal;font-size:0.7rem;color:rgba(255,255,255,0.5);display:block}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;margin:1rem 0 0.75rem}
.tri > div{background:rgba(255,255,255,0.05);border-radius:0.6rem;padding:0.5rem;text-align:center}
.tri b{display:block;font-size:0.95rem;color:#fff}
.tri span{font-size:0.68rem;color:rgba(255,255,255,0.5)}
.a-foot{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;margin-top:0.5rem}
.stars{color:#F2F4F7;font-size:0.9rem;letter-spacing:1px}
.muted{color:rgba(255,255,255,0.5);font-size:0.75rem}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.5rem}
.rule{display:flex;gap:0.6rem;font-size:0.85rem;font-weight:300;line-height:1.55;color:rgba(255,255,255,0.8)}
.rule .n{flex:0 0 22px;height:22px;border-radius:0.5rem;background:#fff;color:#000;font-size:0.7rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:1.5rem}
.split .box{border-radius:1rem;padding:1rem 1.25rem;background:rgba(255,255,255,0.06)}
.split .big{font-family:var(--font-heading);font-style:italic;font-size:1.75rem;color:#fff}
.split .lb{font-size:0.75rem;color:rgba(255,255,255,0.55)}

/* ══════════════════════════════════════════════════════════════
   Chat interface — messaging-app layout (sidebar + 768px column)
   Conversation surface is pure black · decorative background only around it (left/right/above)
   Measurements follow leading chat apps: sidebar 260px · column 768px · header 56px
   ══════════════════════════════════════════════════════════════ */

/* ── Decorative background (around the conversation, never inside) ── */
.sxbg{position:fixed;inset:0;z-index:0;background:#000 url('/assets/img/scene-8.jpg?v=f9c26215aeef') center/cover no-repeat;overflow:hidden;pointer-events:none}
.sxbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.85}
.sxbg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.70) 100%)}

/* ── Shell: sidebar + conversation ── */
.sxapp{position:relative;z-index:1;height:100dvh;display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:1024px){.sxapp{grid-template-columns:260px 1fr;gap:18px;padding:32px}}
.sxside{border-radius:18px;padding:14px;display:none;flex-direction:column;gap:12px;min-height:0;max-height:calc(100dvh - 56px);background:#0a0c0f}
@media(min-width:1024px){.sxside{display:flex}}
.sxside.open{display:flex;position:fixed;inset:14px auto 14px 14px;width:78vw;max-width:320px;z-index:9;background:#0a0c0f}
.sxside .brand{font-family:var(--font-heading);font-style:italic;font-size:1.15rem;color:#fff;display:flex;align-items:center;gap:10px}
.sxside .label{font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.4)}
.sxnew{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:0.7rem;border:1px solid rgba(255,255,255,0.16);color:#fff;font-size:0.85rem;background:rgba(255,255,255,0.06);cursor:pointer;font-family:var(--font-body)}
.sxnew:hover{background:rgba(255,255,255,0.12)}
.sxlist{display:flex;flex-direction:column;gap:4px;overflow:auto;min-height:0;flex:1}
.sxrow{border-radius:10px;padding:0.6rem 0.7rem;cursor:pointer;color:rgba(255,255,255,0.85);font-size:0.86rem;display:flex;flex-direction:column;gap:2px}
.sxrow:hover{background:rgba(255,255,255,0.08)}
.sxrow.on{background:rgba(255,255,255,0.14)}
.sxrow .h{font-size:0.68rem;color:rgba(255,255,255,0.42)}
.sxfoot{font-size:0.68rem;color:rgba(255,255,255,0.35);line-height:1.55;border-top:1px solid rgba(255,255,255,0.08);padding-top:10px}

/* ── Conversation column: pure black ── */
.sxmain{background:#000;display:flex;flex-direction:column;min-height:0;height:100dvh;overflow:hidden}
@media(min-width:1024px){.sxmain{border:1px solid rgba(255,255,255,0.09);border-radius:18px;height:auto;max-height:calc(100dvh - 56px)}}
.sxhead{flex:0 0 auto;height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,0.08)}
.sxhead .who{font-size:0.92rem;color:#fff;font-weight:500;line-height:1.2}
.sxhead .sub{font-size:0.7rem;color:rgba(255,255,255,0.45);margin-top:2px}
.sxhead .status{font-size:0.72rem;color:rgba(255,255,255,0.55);display:inline-flex;align-items:center;gap:0.4rem;white-space:nowrap}
.sxthread{flex:1;overflow:auto;min-height:0;padding:26px 18px 8px}
.sxinner{width:100%;max-width:768px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.sxmsg{font-size:0.94rem;line-height:1.75;color:rgba(255,255,255,0.92);font-weight:300;white-space:pre-wrap;word-wrap:break-word}
.sxmsg.user{align-self:flex-end;max-width:80%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.12);border-radius:18px;padding:0.7rem 1rem;color:#fff}
.sxmsg.bot{align-self:flex-start;max-width:100%}
.sxmsg.sys{align-self:center;font-size:0.78rem;color:rgba(255,255,255,0.45);text-align:center;max-width:620px}
.sxmsg .meta{font-size:0.68rem;color:rgba(255,255,255,0.35);margin-top:0.5rem;font-weight:400}
.sxcomposer{flex:0 0 auto;padding:12px 18px 18px;background:#000}
.sxcomposer .wrap{width:100%;max-width:768px;margin:0 auto;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:26px;padding:6px 6px 6px 18px}
.sxcomposer input{flex:1;background:none;border:none;outline:none;color:#fff;font-family:var(--font-body);font-size:0.94rem;padding:0.5rem 0}
.sxcomposer input::placeholder{color:rgba(255,255,255,0.4)}
.sxsend{width:38px;height:38px;border-radius:9999px;border:none;background:#fff;color:#000;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sxsend[disabled]{opacity:0.35;cursor:not-allowed}
.sxnote{width:100%;max-width:768px;margin:0.5rem auto 0;text-align:center;font-size:0.68rem;color:rgba(255,255,255,0.32)}
.sxempty{align-self:center;text-align:center;color:rgba(255,255,255,0.45);font-size:0.9rem;padding:2.5rem 0}
.sxempty h3{font-family:var(--font-heading);font-style:italic;font-size:1.6rem;color:#fff;font-weight:400;margin-bottom:0.5rem}
.sxburger{display:none;background:none;border:1px solid rgba(255,255,255,0.2);color:#fff;border-radius:10px;padding:5px 10px;cursor:pointer;font-size:0.85rem}
@media(max-width:1023px){.sxburger{display:inline-flex};.sxbg video{opacity:0.35}}

/* Wide screens: more room for the decorative background around the conversation */
@media(min-width:1280px){.sxapp{grid-template-columns:270px 1fr;gap:20px;padding:40px}}
@media(min-width:1536px){
  .sxapp{grid-template-columns:290px 1fr;gap:26px;padding:56px 84px}
  .sxside,.sxmain{max-height:calc(100dvh - 96px)}
}

/* ══ Chat v2: agent switcher in the header + conversation list + long-context file chip ══ */
.sxpickwrap{position:relative;min-width:0}
.sxpick{display:flex;align-items:center;gap:9px;cursor:pointer;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);border-radius:12px;padding:6px 11px}
.sxpick:hover{background:rgba(255,255,255,0.1)}
.sxpick .nm{font-size:0.9rem;color:#fff;font-weight:500;line-height:1.15}
.sxpick .hh{font-size:0.66rem;color:rgba(255,255,255,0.45)}
.sxpick .cv{font-size:0.7rem;color:rgba(255,255,255,0.5);margin-left:2px}
.sxmenu{position:absolute;top:52px;left:0;width:min(460px,86vw);z-index:30;background:#0b0d11;border:1px solid rgba(255,255,255,0.13);border-radius:14px;padding:8px;display:none;max-height:60vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,0.7)}
.sxmenu.open{display:block}
.sxmenu .grp{font-size:0.66rem;color:rgba(255,255,255,0.4);padding:9px 10px 4px;letter-spacing:0.09em;text-transform:uppercase}
.sxmenu .it{border-radius:10px;padding:8px 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px}
.sxmenu .it:hover,.sxmenu .it.on{background:rgba(255,255,255,0.1)}
.sxmenu .it .n{font-size:0.86rem;color:#fff}
.sxmenu .it .h{font-size:0.66rem;color:rgba(255,255,255,0.42)}
.sxchip{align-self:flex-end;max-width:82%;display:flex;gap:11px;align-items:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);border-radius:14px;padding:10px 13px}
.sxchip .ic{width:30px;height:30px;border-radius:8px;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex:0 0 auto}
.sxchip .t{font-size:0.82rem;color:#fff;font-weight:500}
.sxchip .s{font-size:0.68rem;color:rgba(255,255,255,0.45);margin-top:1px}
.sxprev{align-self:flex-end;max-width:82%;font-size:0.8rem;color:rgba(255,255,255,0.55);border-left:2px solid rgba(255,255,255,0.18);padding:2px 0 2px 11px;white-space:pre-wrap}
.sxconv{border-radius:10px;padding:0.6rem 0.7rem;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.sxconv:hover{background:rgba(255,255,255,0.08)}
.sxconv.on{background:rgba(255,255,255,0.14)}
.sxconv .t{font-size:0.85rem;color:rgba(255,255,255,0.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxconv .h{font-size:0.66rem;color:rgba(255,255,255,0.4);display:flex;gap:8px}

/* ══ App shell v3: one window (sidebar + conversation) · composer toolbar · in-chat blocks ══ */

@media(min-width:1024px){.sxapp{grid-template-columns:290px 1fr;padding:20px !important}}
@media(min-width:1536px){.sxapp{padding:28px 44px !important}}
.sxside{border-radius:20px 0 0 20px;background:#0b0d11;border:1px solid rgba(255,255,255,0.10);border-right:1px solid rgba(255,255,255,0.07);max-height:calc(100dvh - 40px)}
.sxmain{border-radius:0 20px 20px 0;border-left:none}
@media(max-width:1023px){.sxside{border-radius:20px}.sxmain{border-radius:20px}}
.sxtools{display:flex;gap:6px;align-items:center;padding:0 4px 9px}
.sxib{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);color:#fff;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
.sxib:hover{background:rgba(255,255,255,0.13)}
/* in-chat blocks */
.sxblock{margin-top:10px;border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:14px;background:rgba(255,255,255,0.045);max-width:560px}
.sxblock h4{font-family:var(--font-heading);font-style:italic;font-size:1.05rem;color:#fff;margin-bottom:6px;font-weight:400}
.sxblock .desc{font-size:0.8rem;color:rgba(255,255,255,0.6);margin-bottom:8px;line-height:1.5}
.sxblock label{display:block;font-size:0.72rem;color:rgba(255,255,255,0.55);margin:9px 0 4px}
.sxblock input{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);border-radius:10px;padding:9px 12px;color:#fff;font-family:var(--font-body);font-size:0.85rem;outline:none}
.sxblock .row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.sxblock .ok{background:#fff;color:#000;border:none;border-radius:9999px;padding:8px 16px;font-weight:600;cursor:pointer;font-size:0.8rem}
.sxblock .gh{background:none;color:rgba(255,255,255,0.75);border:1px solid rgba(255,255,255,0.2);border-radius:9999px;padding:8px 16px;cursor:pointer;font-size:0.8rem}
.sxsecret{margin-top:8px;font-size:0.72rem;color:rgba(255,255,255,0.45)}
.sxtablewrap{margin-top:10px;overflow:auto;border:1px solid rgba(255,255,255,0.12);border-radius:12px}
table.sxtable{width:100%;border-collapse:collapse;font-size:0.82rem}
table.sxtable th{background:rgba(255,255,255,0.06);color:#fff;font-weight:600;text-align:left;padding:9px 12px}
table.sxtable td{padding:9px 12px;border-top:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.85)}
.sxreceipt{margin-top:10px;border:1px solid rgba(255,255,255,0.16);border-radius:14px;padding:16px;background:rgba(255,255,255,0.05);max-width:420px}
.sxreceipt .rt{font-family:var(--font-heading);font-style:italic;font-size:1.1rem;color:#fff;margin-bottom:10px}
.sxreceipt .line{display:flex;justify-content:space-between;font-size:0.84rem;color:rgba(255,255,255,0.8);padding:5px 0;border-bottom:1px dashed rgba(255,255,255,0.12)}
.sxreceipt .tot{display:flex;justify-content:space-between;font-weight:700;color:#fff;margin-top:10px;font-size:0.95rem}
.sxreceipt .st{display:inline-block;margin-top:10px;font-size:0.72rem;border:1px solid rgba(185,190,196),0.5);color:#ffd0d0;border-radius:9999px;padding:3px 10px}
.sxqr{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sxqr button{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);color:#fff;border-radius:9999px;padding:8px 14px;font-size:0.8rem;cursor:pointer;font-family:var(--font-body)}
.sxqr button:hover{background:rgba(255,255,255,0.16)}
.sxtext{white-space:pre-wrap;font-size:0.94rem;line-height:1.75;font-weight:300;color:rgba(255,255,255,0.92)}
.sxpre{white-space:pre-wrap;font-size:0.8rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:10px;color:rgba(255,255,255,0.8)}
/* ══ Auth (sign in / sign up) ══ */
.sxauth{position:relative;z-index:1;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:28px}
.sxauthcard{width:min(430px,92vw);border-radius:22px;padding:28px;background:#0b0d11}
.sxauthcard .brand{font-family:var(--font-heading);font-style:italic;font-size:1.1rem;color:#fff;display:flex;align-items:center;gap:10px}
.sxauthcard .sub{font-size:0.82rem;color:rgba(255,255,255,0.55);margin-bottom:18px;line-height:1.5}
.sxauthcard label{display:block;font-size:0.72rem;color:rgba(255,255,255,0.55);margin:12px 0 5px}
.sxauthcard .hint{opacity:0.6}
.sxauthcard input,.sxauthcard select{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);border-radius:12px;padding:11px 14px;color:#fff;font-family:var(--font-body);font-size:0.9rem;outline:none}
.sxauthcard .row{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.sxauthcard .ok{background:#fff;color:#000;border:none;border-radius:9999px;padding:10px 20px;font-weight:600;cursor:pointer;font-size:0.86rem}
.sxauthcard .gh{background:none;color:rgba(255,255,255,0.8);border:1px solid rgba(255,255,255,0.22);border-radius:9999px;padding:10px 18px;cursor:pointer;font-size:0.86rem}
.sxauthcard .err{color:#ffb3b3;font-size:0.8rem;margin-top:12px;min-height:1.1rem}
.sxauthcard .foot{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.1);font-size:0.72rem;color:rgba(255,255,255,0.42);line-height:1.5}
.sxuser{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:0.72rem;color:rgba(255,255,255,0.5);border-top:1px solid rgba(255,255,255,0.08);padding-top:10px;margin-top:8px}
.sxuser button{background:none;border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.75);border-radius:9999px;padding:4px 10px;font-size:0.7rem;cursor:pointer}
/* ══ workspace naming (signup) ══ */
.sxnamechips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.chipname{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.9);border-radius:9999px;padding:6px 13px;font-size:0.78rem;cursor:pointer;font-family:var(--font-body)}
.chipname:hover{background:rgba(255,255,255,0.14)}
.chipname.on{background:#fff;color:#000;border-color:#fff}
.sxnameprev{font-size:0.76rem;color:rgba(255,255,255,0.55);margin-top:7px}
/* ══ sidebar tabs + tasks ══ */
.sxtabs{display:flex;gap:6px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:4px}
.sxtab{flex:1;background:none;border:none;color:rgba(255,255,255,0.6);font-family:var(--font-body);font-size:0.78rem;padding:7px 8px;border-radius:9px;cursor:pointer}
.sxtab.on{background:rgba(255,255,255,0.92);color:#000;font-weight:600}
.sxtask{border-radius:10px;padding:0.62rem 0.7rem;display:flex;flex-direction:column;gap:4px;border:1px solid rgba(255,255,255,0.08)}
.sxtask:hover{background:rgba(255,255,255,0.06)}
.sxtask .tt{font-size:0.84rem;color:rgba(255,255,255,0.92);line-height:1.4}
.sxtask .th{display:flex;gap:7px;align-items:center;font-size:0.66rem;color:rgba(255,255,255,0.45);flex-wrap:wrap}
.pill{border-radius:9999px;padding:2px 8px;font-size:0.64rem;border:1px solid rgba(255,255,255,0.18)}
.pill.open{border-color:rgba(200,203,208,0.5);color:#ffe0a3}
.pill.done{border-color:rgba(130,230,170,0.5);color:#c8f7d8}
.pill.blocked{border-color:rgba(185,190,196),0.5);color:#ffd0d0}
.sxtask .acts{display:flex;gap:6px;margin-top:3px}
.sxtask .acts button{background:none;border:1px solid rgba(255,255,255,0.16);color:rgba(255,255,255,0.7);border-radius:9999px;padding:3px 9px;font-size:0.66rem;cursor:pointer}

/* ══════════════════════════════════════════════════════════════
   App shell v4 — reference-grade layout (sidebar · hero · large composer)
   Structure follows the leading chat apps; identity stays ours (black + serif italic).
   ══════════════════════════════════════════════════════════════ */

@media(min-width:900px){.sxapp{grid-template-columns:260px 1fr}}
.sxside{border-radius:0;border:none;border-right:1px solid rgba(255,255,255,0.07);background:#0e0e0d;max-height:100dvh;display:flex;flex-direction:column;gap:10px;padding:12px 10px}
.sxmain{border-radius:0;border:none;background:#000;display:flex;flex-direction:column;height:100dvh;max-height:100dvh}
@media(min-width:900px){.sxmain{border-radius:0}}
/* brand row */
.sxbrand{display:flex;align-items:center;gap:8px;padding:2px 4px 6px}
.sxmark{font-size:1.1rem;color:#fff}
.sxname{font-family:var(--font-heading);font-style:italic;font-size:1.15rem;color:#fff;flex:1}
.sxico{background:none;border:none;color:rgba(255,255,255,0.6);font-size:0.95rem;cursor:pointer;padding:5px 6px;border-radius:8px}
.sxico:hover{background:rgba(255,255,255,0.09);color:#fff}
.sxnew{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:12px;color:#fff;font-family:var(--font-body);font-size:0.85rem;padding:9px;cursor:pointer}
.sxnew:hover{background:rgba(255,255,255,0.13)}
/* nav */
.sxnav{display:flex;flex-direction:column;gap:2px}
.sxnavi{display:flex;align-items:center;gap:9px;background:none;border:none;color:rgba(255,255,255,0.78);font-family:var(--font-body);font-size:0.85rem;padding:8px 9px;border-radius:10px;cursor:pointer;text-decoration:none;text-align:left}
.sxnavi:hover{background:rgba(255,255,255,0.07);color:#fff}
.sxnavi span{width:16px;text-align:center;opacity:0.75}
/* section header + lists */
.sxsechead{display:flex;justify-content:space-between;align-items:center;font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.42);padding:10px 8px 4px}
.sxside .sxlist{flex:1;overflow:auto;display:flex;flex-direction:column;gap:2px;min-height:0}
.sxaccount{display:flex;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,0.08);padding-top:10px;margin-top:4px;font-size:0.75rem;color:rgba(255,255,255,0.7)}
.sxavatar{width:24px;height:24px;border-radius:9999px;background:rgba(255,255,255,0.9);color:#000;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;flex:0 0 auto}
.sxaccount span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxaccount button{background:none;border:1px solid rgba(255,255,255,0.16);color:rgba(255,255,255,0.7);border-radius:9999px;padding:3px 9px;font-size:0.68rem;cursor:pointer}
/* header right */
.sxhead{height:52px;border-bottom:1px solid rgba(255,255,255,0.06);padding:0 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex:0 0 auto}
.sxheadl{display:flex;align-items:center;gap:10px;min-width:0}
.sxheadr{display:flex;align-items:center;gap:10px}
.sxplan{font-size:0.78rem;color:rgba(255,255,255,0.55)}
.sxupgrade{font-size:0.78rem;color:#9ecbff;text-decoration:none}
.sxupgrade:hover{text-decoration:underline}
.sxpick{border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);border-radius:10px;padding:5px 10px}
/* hero */
.sxhero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:14vh 0 0;text-align:center}
.sxheroicon{font-size:1.6rem;color:#fff;opacity:0.9}
.sxherotitle{font-family:var(--font-heading);font-style:italic;font-weight:400;font-size:clamp(2rem,4.4vw,2.9rem);color:#fff;margin:0}
/* composer: large, centered */
.sxcomposer{padding:10px 18px 16px;background:#000;flex:0 0 auto}
.sxcomposer .wrap{width:100%;max-width:768px;margin:0 auto}
.sxbox{background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.13);border-radius:22px;padding:14px 14px 10px}
.sxbox textarea{width:100%;background:none;border:none;outline:none;resize:none;color:#fff;font-family:var(--font-body);font-size:0.98rem;line-height:1.6;max-height:180px}
.sxbox textarea::placeholder{color:rgba(255,255,255,0.42)}
.sxboxrow{display:flex;align-items:center;gap:8px;margin-top:10px}
.sxspacer{flex:1}
.sxchipbtn{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.13);color:rgba(255,255,255,0.85);border-radius:9999px;padding:5px 12px;font-size:0.76rem;font-family:var(--font-body);cursor:pointer}
.sxchipbtn:hover{background:rgba(255,255,255,0.14)}
.sxmodel{font-size:0.74rem;color:rgba(255,255,255,0.5);white-space:nowrap}
.sxsugs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:14px auto 0;max-width:768px}
.sxsug{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.13);color:rgba(255,255,255,0.88);border-radius:9999px;padding:8px 15px;font-size:0.8rem;font-family:var(--font-body);cursor:pointer}
.sxsug:hover{background:rgba(255,255,255,0.13)}
.sxnote{max-width:768px;margin:12px auto 0;text-align:center;font-size:0.68rem;color:rgba(255,255,255,0.32)}
/* ══ hero greeting (time + situation aware) ══ */
.sxherosub{font-size:0.9rem;color:rgba(255,255,255,0.62);max-width:620px;line-height:1.6;font-weight:300}
.sxherometa{font-size:0.72rem;color:rgba(255,255,255,0.38);letter-spacing:0.01em}
.sxhero{gap:10px;padding:12vh 16px 0}
/* ══ tasks: creation form + overdue ══ */
.sxtaskform{display:flex;flex-direction:column;gap:7px;border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:10px;margin-bottom:8px;background:rgba(255,255,255,0.04)}
.sxtaskform input,.sxtaskform select{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:9px;padding:7px 10px;color:#fff;font-family:var(--font-body);font-size:0.8rem;outline:none;width:100%}
.sxtaskform .row2{display:flex;gap:7px}
.sxtaskform .ok{background:#fff;color:#000;border:none;border-radius:9999px;padding:7px 14px;font-size:0.76rem;font-weight:600;cursor:pointer}
.sxtaskform .gh{background:none;border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.8);border-radius:9999px;padding:7px 14px;font-size:0.76rem;cursor:pointer}
.sxtask.od{border-color:rgba(185,190,196),0.45)}
/* ══ Tools panel (owner-facing capabilities) ══ */
.sxtoolspanel{display:grid;grid-template-columns:1fr;gap:12px;padding:8px 0 20px;width:100%;max-width:768px;margin:0 auto}
@media(min-width:1100px){.sxtoolspanel{grid-template-columns:1fr 1fr}}
.sxtoolcard{border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:16px;background:rgba(255,255,255,0.035)}
.sxtoolcard .tt{font-family:var(--font-heading);font-style:italic;font-size:1.1rem;color:#fff;margin-bottom:6px}
.sxtoolcard .ts{font-size:0.8rem;color:rgba(255,255,255,0.6);line-height:1.55;margin-bottom:12px}
.sxtbtn{background:#fff;color:#000;border:none;border-radius:9999px;padding:9px 16px;font-weight:600;font-size:0.8rem;cursor:pointer;font-family:var(--font-body)}
.sxtcode{white-space:pre-wrap;font-size:0.72rem;color:rgba(255,255,255,0.75);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:10px;margin-bottom:10px;overflow:auto}
.sxtlist{display:flex;flex-direction:column;gap:6px}
.sxtrow{display:flex;justify-content:space-between;gap:10px;font-size:0.78rem;color:rgba(255,255,255,0.85);border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:5px}

/* ══ v5 fixes: ONE strong composer (no nested frames) · no internal model names in the UI ══ */
.sxcomposer{background:#000}
.sxcomposer .wrap{display:block;background:none;border:none;border-radius:0;padding:0;gap:0;max-width:768px;margin:0 auto}
.sxbox{background:rgba(255,255,255,0.055);border:1px solid rgba(255,255,255,0.14);border-radius:24px;padding:16px 16px 12px;box-shadow:0 18px 50px rgba(0,0,0,0.45)}
.sxbox:focus-within{border-color:rgba(255,255,255,0.28)}
.sxbox textarea{min-height:52px;font-size:1rem}
.sxboxrow{margin-top:12px;gap:8px}
.sxcap{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.13);color:rgba(255,255,255,0.85);border-radius:9999px;padding:5px 12px;font-size:0.76rem;font-family:var(--font-body);cursor:pointer}
.sxcap:hover{background:rgba(255,255,255,0.14)}
.sxcapwrap{position:relative}
.sxcapmenu{position:absolute;bottom:40px;right:0;width:290px;background:#0b0d11;border:1px solid rgba(255,255,255,0.13);border-radius:14px;padding:10px;display:none;z-index:40;box-shadow:0 24px 60px rgba(0,0,0,0.7)}
.sxcapmenu.open{display:block}
.sxcapmenu .h{font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.4);padding:4px 6px 6px}
.sxcapmenu .r{font-size:0.78rem;color:rgba(255,255,255,0.85);padding:5px 6px;border-radius:8px;display:flex;justify-content:space-between;gap:8px}
.sxcapmenu .r:hover{background:rgba(255,255,255,0.07)}
.sxcapmenu .r span:last-child{color:rgba(255,255,255,0.45)}
/* ══ top action icons (new chat · new task) ══ */
.sxico-new{border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px}
.sxico-new:hover{background:rgba(255,255,255,0.14);color:#fff}
/* ══ services (integrations) grid ══ */
.svcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:6px}
.svcgrp{grid-column:1/-1;font-size:0.68rem;letter-spacing:0.09em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-top:8px}
.svc{border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:10px 11px;background:rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:7px}
.svch{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.svcn{font-size:0.82rem;color:#fff;line-height:1.35}
.svcbtns{display:flex;gap:6px;flex-wrap:wrap}
.sxtbtn.sm{padding:6px 12px;font-size:0.74rem}
.sxtbtn.gh{background:none;color:rgba(255,255,255,0.8);border:1px solid rgba(255,255,255,0.2)}
.svcformbox{margin-top:12px;border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:14px;background:rgba(255,255,255,0.04)}
.svcformbox label{display:block;font-size:0.72rem;color:rgba(255,255,255,0.55);margin:9px 0 4px}
.svcformbox input{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:10px;padding:9px 12px;color:#fff;font-family:var(--font-body);font-size:0.84rem;outline:none}
.svcrow{display:flex;gap:8px;margin-top:12px}
/* ══ quick tools strip: three tiny icons that rotate ══ */
.sxstrip{display:inline-flex;gap:4px;align-items:center;padding:0 2px}
.sxiv{width:24px;height:24px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.85);font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.sxiv:hover{background:rgba(255,255,255,0.16);color:#fff;border-color:rgba(255,255,255,0.28)}
.sxiv.new{animation:sxivIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes sxivIn{0%{opacity:0;transform:translateY(7px) scale(.85)}60%{opacity:1}100%{opacity:1;transform:none}}
#toolsbtn{font-size:14px}
/* ══ Connect chip: three tiny circular service logos that rotate ══ */
.sxconnect{display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.05);border-radius:9999px;padding:4px 11px 4px 6px;cursor:pointer}
.sxconnect:hover{background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.26)}
.sxlogo{width:18px;height:18px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;animation:sxivIn .45s cubic-bezier(.2,.8,.2,1)}
.sxlogo img{width:11px;height:11px;display:block;filter:brightness(0)}
.sxlogo b{font-size:9px;font-weight:700;line-height:1}
.sxconnlabel{font-size:0.72rem;color:rgba(255,255,255,0.8);margin-left:2px;white-space:nowrap}
/* ══ signed-in notice on the sign-in page (no silent redirect) ══ */
.sxsigned{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:9px 12px;margin-bottom:16px;font-size:0.78rem;color:rgba(255,255,255,0.85)}
.sxsigned b{color:#fff}
.sxsigned button{background:#fff;color:#000;border:none;border-radius:9999px;padding:6px 14px;font-size:0.75rem;font-weight:600;cursor:pointer;font-family:var(--font-body)}
.svcplan{grid-column:1/-1;font-size:0.78rem;color:rgba(255,255,255,0.7);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.sxlocked{margin-top:16px;border:1px dashed rgba(255,255,255,0.22);border-radius:14px;padding:18px;font-size:0.85rem;color:rgba(255,255,255,0.75);line-height:1.6}
.sxlocked b{color:#fff}
/* ══ channels per agent ══ */
.chans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:6px}
.chanrow{border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:10px 11px;background:rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:7px}
.chann{font-size:0.84rem;color:#fff}
.chanb{display:flex;gap:6px;flex-wrap:wrap;font-size:0.78rem}
/* ══ usage meter ══ */
.useline{font-size:0.82rem;color:rgba(255,255,255,0.85);margin-bottom:6px}
.usebar{height:8px;border-radius:9999px;background:rgba(255,255,255,0.1);overflow:hidden}
.usefill{height:100%;background:#fff;border-radius:9999px;transition:width .4s ease}
.usekinds{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
/* ══ agent identity cards ══ */
.agwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;width:100%;max-width:1080px;margin:0 auto;padding:10px 0 24px}
.agcard{border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:9px}
.agtop{display:flex;gap:12px;align-items:center}
.agavatar{width:56px;height:56px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.sxavatarimg{width:26px;height:26px;object-fit:contain;margin-right:8px;display:none}
.itav{width:18px;height:18px;object-fit:contain;margin-right:8px;vertical-align:-4px}
.agname{font-family:var(--font-heading);font-style:italic;font-size:1.15rem;color:#fff;line-height:1.2}
.agrole{font-size:0.76rem;color:rgba(255,255,255,0.75)}
.agbiz{font-size:0.72rem;color:rgba(255,255,255,0.5)}
.agsec{font-size:0.66rem;letter-spacing:0.09em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-top:4px}
.agtags{display:flex;gap:6px;flex-wrap:wrap}
.tag.opt{opacity:0.7;border-style:dashed}
.agstats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.agstats>div{background:rgba(255,255,255,0.05);border-radius:10px;padding:7px 8px;text-align:center}
.agstats b{display:block;font-size:0.95rem;color:#fff}
.agstats span{font-size:0.64rem;color:rgba(255,255,255,0.55)}
.agacts{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
/* ══ agent presence in the thread ══ */
.sxbot{display:flex;gap:10px;align-items:flex-start;max-width:100%}
.sxbotav{width:26px;height:26px;flex:0 0 auto;object-fit:contain;opacity:0.95}
.sxbotbody{min-width:0;display:flex;flex-direction:column;gap:5px}
.sxbotname{font-size:0.74rem;color:rgba(255,255,255,0.8);font-weight:500}
.sxbotname span{color:rgba(255,255,255,0.45);font-weight:400}
.sxassign{display:flex;gap:11px;align-items:flex-start;border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:12px 13px;background:rgba(255,255,255,0.045);max-width:560px}
.sxassignbody{min-width:0;display:flex;flex-direction:column;gap:6px}
.sxassigntask{font-size:0.86rem;color:#fff;line-height:1.5}
.sxassigntags{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:0.72rem}
/* ══ BiDi: Arabic RTL + Latin/numbers never reversed ══ */
.sxmsg, .sxtext, .sxprev, .sxassigntask, .sxtask .tt, .sxchip .t, .card p, .tro { unicode-bidi: isolate; text-align: start }
.meta, .sxbotname, .sxnote, .muted, .agrole, .agbiz, .sxmodel, .pill, .tag, .sxconnlabel,
.useline, .svcplan, .sxsec, .agsec { unicode-bidi: isolate }
table.sxtable th, table.sxtable td { unicode-bidi: isolate; text-align: start }
.sxreceipt .line, .sxreceipt .tot { unicode-bidi: plaintext }
input, textarea, select { unicode-bidi: plaintext }
code, pre, .sxtcode, .sxpre, .sxfilepath { unicode-bidi: isolate; direction: ltr; text-align: left }

/* ══ BiDi explicit: direction is decided per message (Arabic → RTL, start = right) ══ */
[dir="rtl"]{ text-align: right }
[dir="ltr"]{ text-align: left }
[dir="rtl"] .meta, [dir="rtl"] .sxbotname { text-align: right }
.sxmsg[dir="rtl"]{ border-top-right-radius:6px }
.sxtablewrap[dir="rtl"] table.sxtable th, .sxtablewrap[dir="rtl"] table.sxtable td { text-align: right }
.sxtablewrap[dir="ltr"] table.sxtable th, .sxtablewrap[dir="ltr"] table.sxtable td { text-align: left }
/* chat convention stays: bot bubbles on the left (RTL text right-aligned inside) */
.sxbotbody{max-width:84%}
.sxassign{max-width:560px}
/* ══ Markdown file as a small square thumbnail (dark grey) ══ */
.sxmd{width:104px;height:104px;border-radius:14px;background:#191b1f;border:1px solid rgba(255,255,255,0.14);
  padding:8px;display:flex;flex-direction:column;gap:6px;cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.5);transition:transform .15s, border-color .15s}
.sxmd:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.3)}
.sxmdpage{flex:1;display:flex;flex-direction:column;gap:3px;overflow:hidden;opacity:.85}
.mdline{height:7px;border-radius:3px;background:rgba(255,255,255,0.16);font-size:5.5px;color:rgba(255,255,255,0.5);
  line-height:7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mdline:first-child{background:rgba(255,255,255,0.3);width:70%}
.sxmdbar{display:flex;align-items:center;gap:5px;font-size:8.5px;color:rgba(255,255,255,0.6)}
.sxmdglyph{background:rgba(255,255,255,0.9);color:#111;border-radius:4px;padding:1px 4px;font-weight:700;font-size:8px}
.sxmdname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70px}
.sxmdchars{position:absolute;top:6px;right:8px;font-size:8px;color:rgba(255,255,255,0.35)}
/* viewer */
.sxviewer{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);z-index:80;display:flex;align-items:center;justify-content:center;padding:24px}
.sxviewercard{width:min(760px,92vw);max-height:86vh;display:flex;flex-direction:column;background:#0e1013;border:1px solid rgba(255,255,255,0.16);border-radius:18px;overflow:hidden}
.sxviewerbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.1);color:#fff;font-size:.86rem}
.sxviewerbody{margin:0;padding:16px;overflow:auto;white-space:pre-wrap;font-family:var(--font-body);font-size:.86rem;line-height:1.7;color:rgba(255,255,255,0.88)}
/* ══ circular avatar frame (beautiful, monochrome-safe) ══ */
.sxbotav, .agavatar, .sxavatarimg, .itav{border-radius:50%;border:1px solid rgba(255,255,255,0.22);
  padding:3px;background:rgba(255,255,255,0.04);box-sizing:border-box}
.agavatar{width:60px;height:60px;padding:5px}
/* ══ avatar picker ══ */
.avcard{width:min(880px,94vw)}
.avbody{padding:14px;overflow:auto}
.avtabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.avstyle{margin-bottom:14px}
.avlabel{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:6px}
.avg{display:flex;gap:8px;flex-wrap:wrap}
.avopt{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  padding:3px;cursor:pointer;object-fit:contain;transition:transform .12s,border-color .12s}
.avopt:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.4)}
.agavatar,#whoImg{cursor:pointer}
/* ══ business-card agent cards ══ */
.agwrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;max-width:1080px;margin:0 auto;padding:8px 0 20px}
.bcard{border:1px solid rgba(255,255,255,0.13);border-radius:14px;padding:11px 12px;background:rgba(255,255,255,0.035);cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:transform .13s,border-color .13s}
.bcard:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.3)}
.bc-top{display:flex;align-items:center;gap:9px}
.bc-av{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);padding:3px;object-fit:contain}
.bc-id{min-width:0;flex:1}
.bc-name{font-size:.86rem;color:#fff;font-weight:600;line-height:1.2}
.bc-role{font-size:.68rem;color:rgba(255,255,255,.6);margin-top:1px}
.bc-kpi{text-align:center;border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:3px 7px}
.bc-kpi b{display:block;font-size:.85rem;color:#fff}
.bc-kpi span{font-size:.6rem;color:rgba(255,255,255,.5)}
.bc-biz{font-size:.68rem;color:rgba(255,255,255,.5)}
.bc-bio{font-size:.7rem;color:rgba(255,255,255,.62);line-height:1.5}
.bc-tags{display:flex;gap:5px;flex-wrap:wrap}
.bc-foot{display:flex;gap:10px;font-size:.64rem;color:rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.08);padding-top:6px}
/* detail modal */
.agdetail{width:min(720px,94vw)} .agd-body{padding:16px;overflow:auto}
.agd-top{display:flex;gap:14px;align-items:center}
.agd-av{width:84px;height:84px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.05);padding:6px;object-fit:contain}
.agd-name{font-family:var(--font-heading);font-style:italic;font-size:1.4rem;color:#fff}
.agd-role{font-size:.76rem;color:rgba(255,255,255,.6);margin-top:2px}
.agd-kpi{margin-top:6px} .agd-kpi b{font-size:1.2rem;color:#fff} .agd-kpi span{font-size:.72rem;color:rgba(255,255,255,.55)}
.agd-sec{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.42);margin:16px 0 7px}
.agd-bio{font-size:.84rem;color:rgba(255,255,255,.8);line-height:1.7;margin:0}
.kpibox{display:flex;flex-direction:column;gap:6px}
.kpirow{display:flex;justify-content:space-between;font-size:.78rem;color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:4px}
.kpirow b{color:#fff}
/* ══ platform panel ══ */
.plat{width:100%;max-width:1080px;margin:0 auto;padding:10px 0 24px}
.plathead{text-align:center;margin-bottom:14px}
.plattitle{font-family:var(--font-heading);font-style:italic;font-size:1.9rem;color:#fff}
.platsub{font-size:.78rem;color:rgba(255,255,255,.5);margin-top:4px}
.docrow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.doclist{margin:0 auto 18px;max-width:760px;display:flex;flex-direction:column;gap:5px}
.docitem{display:flex;gap:9px;align-items:center;font-size:.76rem;color:rgba(255,255,255,.8)}
.docitem b{color:#fff;min-width:150px}
.dotmini{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.dotmini.ok{background:#7ee6a0} .dotmini.bad{background:#B9BEC4}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px}
.catcard{border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:12px;background:rgba(255,255,255,.035)}
.catnum{font-family:var(--font-heading);font-style:italic;font-size:1.6rem;color:#fff}
.catname{font-size:.84rem;color:#fff;font-weight:600;margin-top:2px}
.catdet{font-size:.7rem;color:rgba(255,255,255,.55);margin:5px 0 8px;line-height:1.5}
.mtsel.on{background:#fff;color:#000;border-color:#fff}

/* customer inbox + company structure */
.draftbox{margin:6px 0;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:13px}
.draftbox b{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.svc.unread{border-color:rgba(120,200,255,.35)}


/* ════════════════════ TOLAB UI — canonical (single source, no conflicts) ════════════════════ */

/* Composer: input on its own full-width row, tools in a tidy row below */
.sxcomposer .sxbox{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px!important}
.sxcomposer .sxboxrow{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;margin-top:12px!important}

/* row children — explicit visual order: tools · attach · Connect · Agent · … · Send (right) */
.sxcomposer .sxboxrow>#sidetoggle,.sxcomposer .sxboxrow>#sidecollapse,.sxcomposer .sxboxrow>#toolsbtn{order:1!important}
.sxcomposer .sxboxrow>#attach{order:2!important;width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;
  border-radius:10px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
.sxcomposer .sxboxrow>#sxconnect{order:3!important;display:inline-flex!important;align-items:center!important;gap:3px!important;
  height:34px!important;width:auto!important;min-width:0!important;padding:0 9px!important;border-radius:999px!important}
.sxcomposer .sxboxrow>#sxconnect>*{display:inline-flex!important;align-items:center!important}
.sxcomposer .sxboxrow>#sxconnect::before,.sxcomposer .sxboxrow>#sxconnect::after{content:none!important}
.sxcomposer .sxboxrow>#sxconnect .sxlogo{width:16px!important;height:16px!important;min-width:16px!important;border-radius:50%!important;overflow:hidden!important}
.sxcomposer .sxboxrow>#sxconnect .sxlogo img{width:10px!important;height:10px!important;filter:brightness(0) invert(1) opacity(.95)!important}
.sxcomposer .sxboxrow>#sxconnect .sxlogo b{font-size:8px!important;color:#fff!important}
.sxcomposer .sxboxrow>#agentchip{order:4!important;height:34px!important;max-width:40vw!important;padding:0 10px!important;
  border-radius:999px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;font-size:.72rem!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.sxcomposer .sxboxrow>.sxspacer{order:5!important;flex:1 1 auto!important}
.sxcomposer .sxboxrow>.sxcapwrap{order:6!important;position:relative!important;flex:0 0 auto!important}
.sxcomposer .sxboxrow>#snd{order:7!important;margin-inline-start:0!important;flex:0 0 42px!important;width:42px!important;height:42px!important;
  min-width:42px!important;border-radius:50%!important}
.sxcomposer .sxboxrow>input[type=file]{display:none!important}

/* the input keeps its own full-width row above the strip */
.sxcomposer .sxbox>#inp{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
  min-height:52px!important;font-size:1rem!important;pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important}

/* Header: title centered, icons centered under it */
.sxcap,.sxheader{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:6px!important}
.sxcap #who,.sxheader #who{text-align:center!important}
#agentchip img.chipav{width:20px!important;height:20px!important;min-width:20px!important;border-radius:50%!important;object-fit:cover!important}

/* Sidebar: collapsible groups, settings behind the account row, conversations get space */
.sxside{display:flex!important;flex-direction:column!important;gap:8px!important}
.sxgrp{margin-bottom:6px!important}
.sxgrph{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;
  background:transparent!important;border:0!important;color:rgba(255,255,255,.62)!important;font-size:.68rem!important;cursor:pointer!important}
.sxnavi{width:100%!important;justify-content:flex-start!important;padding:9px 10px!important;border-radius:10px!important;font-size:.92rem!important}
#convs{flex:1 1 auto!important;min-height:140px!important;overflow-y:auto!important}
.sxsetpanel{border-top:1px solid rgba(255,255,255,.12)!important;margin-top:6px!important;padding-top:6px!important}
body.sxcollapsed .sxside{display:none!important}
body.sxcollapsed .sxapp{grid-template-columns:1fr!important}

/* Agent list: avatar + short name */
#menu .it{display:flex!important;align-items:center!important;gap:8px!important}
#menu .it img.avt{width:22px!important;height:22px!important;min-width:22px!important;border-radius:50%!important;object-fit:cover!important;
  display:inline-block!important;background:#2a2f36!important;border:1px solid rgba(255,255,255,.18)!important}
#menu .it .n{font-size:.9rem!important}
#menu .it .h{opacity:.55!important;font-size:.62rem!important;margin-inline-start:auto!important}

/* ── Landing v2 (2026-10-16) — new sections only; shared styles stay untouched ── */
.hero.v2-hero{height:auto;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.v2-herocontent{padding:150px 1.5rem 5rem;width:100%;max-width:1100px;margin:0 auto}
.v2-badgetext{font-size:.875rem;color:rgba(255,255,255,.9)}
.hero-heading.v2-h1{font-family:var(--font-body);font-style:normal;font-weight:400;font-size:clamp(2.5rem,8vw,5rem);line-height:1.03;letter-spacing:-.02em;max-width:18ch;margin:1.5rem auto 0}
.v2-h1 em,.v2-em{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:1.04em}
.v2-sub{font-size:1rem;max-width:660px;color:rgba(255,255,255,.72);line-height:1.65;margin:1.5rem auto 0}
.v2-ctas{flex-wrap:wrap;justify-content:center}
.v2-trust{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:2.25rem}
.v2-trust span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.16);border-radius:9999px;padding:6px 12px;background:rgba(255,255,255,.04)}
.v2-marqsec{display:flex;flex-direction:column;align-items:center;gap:1.75rem;padding:4.5rem 0 3.5rem;overflow:hidden}
.v2-marquee{width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.v2-mtrack{display:flex;width:max-content;animation:v2marquee 46s linear infinite}
.v2-mrow{display:flex;align-items:center;gap:2.75rem;padding-right:2.75rem}
.v2-mrow img{height:24px;width:auto;opacity:.5;filter:grayscale(1) brightness(1.7)}
@keyframes v2marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.v2-mtrack{animation:none}}
.v2-kpi{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:3.25rem 2rem;width:100%}
.v2-kpin{font-family:var(--font-heading);font-size:clamp(3.5rem,9vw,5.5rem);line-height:1}
.v2-kpil{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.v2-steps{display:grid;gap:1rem;max-width:960px;margin:2.5rem auto 0;text-align:left;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.v2-step{border-radius:24px;padding:1.5rem}
.v2-stepn{font-family:var(--font-heading);font-style:italic;font-size:1.25rem;color:rgba(255,255,255,.55)}
.v2-step h3{font-size:1.0625rem;margin-top:.6rem}
.v2-step p{color:rgba(255,255,255,.62);font-size:.875rem;line-height:1.6;margin-top:.5rem}
@media (max-width:520px){
  .v2-herocontent{padding:120px 1.25rem 4rem}
  .v2-ctas{flex-direction:column;gap:.85rem;width:100%}
  .v2-ctas .btn,.v2-ctas .btn-text{width:100%;justify-content:center}
  .v2-sub{font-size:.95rem}
}

/* ── Tolab 3D halftone hero (2026-10-16) — new classes only ── */

.v2-3d{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;image-rendering:pixelated;image-rendering:-webkit-optimize-contrast}
.v2-3d.v2-nogl{background:linear-gradient(140deg,#1A1B1F 0%,#5A371A 45%,#8B8F95 70%,#B07A3C 100%)}
.v2-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 72% at 24% 56%,rgba(0,0,0,.50) 0%,rgba(0,0,0,.26) 46%,rgba(0,0,0,0) 80%)}
.v2-wm{position:absolute;top:24px;left:26px;z-index:3;display:flex;align-items:center;gap:12px;color:#fff}
.v2-wmlogo{width:46px;height:46px;border:1px solid rgba(255,255,255,.55);border-radius:12px;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-heading);font-style:italic;font-size:22px}
.v2-wmtext{font-family:var(--font-body);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.95rem}
.v2-heroleft{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:3;
  max-width:min(560px,86vw);padding:0 28px}
.v2-scriptwrap{font-family:'Caveat','Segoe Script','Comic Sans MS',cursive;color:#fff;font-weight:600;
  font-size:clamp(2.2rem,6.4vw,4.4rem);line-height:1.1;min-height:2.3em;letter-spacing:.4px;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.v2-quill{display:inline-block;margin-left:2px;font-style:normal;animation:v2quill 1s steps(1,end) infinite}
@keyframes v2quill{0%,49%{opacity:1}50%,100%{opacity:0}}
.v2-herosub{margin-top:16px;color:rgba(255,255,255,.88);font-family:var(--font-body);font-size:1rem;
  line-height:1.6;max-width:44ch;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.v2-hero3d .v2-ctas{margin-top:22px;justify-content:flex-start}
@media (max-width:520px){
  
  .v2-heroleft{padding:0 18px;max-width:92vw}
  .v2-hero3d .v2-ctas{flex-direction:column;align-items:flex-start;gap:.7rem}
  .v2-scriptwrap{font-size:clamp(1.9rem,9vw,2.6rem)}
}

/* ── v2.2 professional polish — landing only, scoped with :has() so shared rules stay intact ── */
body:has(.v2-hero3d) .chess,
body:has(.v2-hero3d) .grid-sec,
body:has(.v2-hero3d) .testi{padding-top:6.5rem;padding-bottom:6.5rem}
body:has(.v2-hero3d) .chess-header,
body:has(.v2-hero3d) .grid-header,
body:has(.v2-hero3d) .testi-header{margin-bottom:3.25rem}
body:has(.v2-hero3d) .chess-header h2,
body:has(.v2-hero3d) .grid-header h2,
body:has(.v2-hero3d) .testi-header h2,
body:has(.v2-hero3d) .start h2{letter-spacing:-.022em;line-height:1.05}
body:has(.v2-hero3d) .heading em{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:1.05em}
body:has(.v2-hero3d) .grid{gap:1.25rem}
body:has(.v2-hero3d) .card,
body:has(.v2-hero3d) .testi-card,
body:has(.v2-hero3d) .v2-step{transition:transform .35s cubic-bezier(.22,.8,.24,1),border-color .35s,background-color .35s}
body:has(.v2-hero3d) .card:hover,
body:has(.v2-hero3d) .v2-step:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.30);background:rgba(255,255,255,.07)}
body:has(.v2-hero3d) .btn{min-height:48px;transition:transform .25s,box-shadow .25s,background-color .25s}
body:has(.v2-hero3d) .btn:hover{transform:translateY(-1px)}
body:has(.v2-hero3d) a:focus-visible,
body:has(.v2-hero3d) button:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:3px;border-radius:9999px}
/* hero type refinement */
.v2-scriptwrap{font-size:clamp(2rem,5.6vw,3.9rem);line-height:1.12}
.v2-herosub{font-size:1.0625rem;max-width:42ch;color:rgba(255,255,255,.90)}
.v2-wmtext{letter-spacing:.22em;font-size:.9rem}
/* marquee refinement */
.v2-mrow{gap:3.25rem;padding-right:3.25rem}
.v2-mrow img{height:22px;opacity:.42;transition:opacity .3s}
.v2-mrow img:hover{opacity:.9}
/* scroll reveal */
.v2-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.8,.24,1),transform .7s cubic-bezier(.22,.8,.24,1)}
.v2-reveal.v2-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.v2-reveal{opacity:1;transform:none;transition:none}}

/* ── v2.3 expert pass (2026-10-17) — contrast, scrim, single brand mark ── */
.v2-herosub{color:#FFFFFF !important;text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 26px rgba(0,0,0,.55);font-size:1.08rem;max-width:40ch}
.v2-scrim{background:radial-gradient(62% 74% at 26% 56%,rgba(0,0,0,.72) 0%,rgba(0,0,0,.44) 46%,rgba(0,0,0,.10) 78%)}
.v2-scriptwrap{text-shadow:0 3px 22px rgba(0,0,0,.75)}
/* one brand mark on the hero: the navbar one steps aside */
body:has(.v2-hero3d) .nav-logo,body:has(.v2-hero3d) .brand,body:has(.v2-hero3d) header .logo{display:none !important}

/* ── v2.4 decisive pass (2026-10-17): the copy sits on its own dark plate ── */
.v2-heroleft{background:linear-gradient(90deg,rgba(8,9,11,.82) 0%,rgba(8,9,11,.62) 62%,rgba(8,9,11,0) 100%);
  border-radius:0 18px 18px 0;padding:26px 30px 26px 30px}
.v2-heroleft p,.v2-heroleft .v2-herosub{color:#F7F8FA !important;-webkit-text-fill-color:#F7F8FA;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 6px 22px rgba(0,0,0,.75) !important;opacity:1 !important}
.v2-scriptwrap,.v2-quill{color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF}
/* nav brand steps aside on the hero so there is exactly one mark */
body:has(.v2-hero3d) [class*="brand"],body:has(.v2-hero3d) [class*="logo"]:not(.v2-wmlogo){display:none !important}
@media (max-width:520px){.v2-heroleft{padding:20px 18px;border-radius:0 14px 14px 0;background:linear-gradient(90deg,rgba(8,9,11,.86) 0%,rgba(8,9,11,.70) 70%,rgba(8,9,11,.10) 100%)}}

/* ── v2.5 poster fallback (2026-10-17): a real pixel frame instead of black ── */

.v2-3d.v2-nogl,.v2-hero3d.v2-nogl .v2-3d{display:none !important}

/* ── v2.6 layered fallback (2026-10-17): 3D canvas → light poster → drawn gradient. Never black. ── */

/* ── v2.7 guaranteed visible layer: pure CSS pixel sky, always paints ── */
.hero.v2-hero3d .v2-3d{opacity:0;transition:opacity .6s ease}
.hero.v2-hero3d .v2-3d.v2-on{opacity:1}

/* ── v2.8 sized (2026-10-17): the right poster for the right screen ── */
.hero.v2-hero3d{background-image:
  repeating-linear-gradient(45deg,rgba(124,180,214,.20) 0 6px,rgba(0,0,0,0) 6px 12px),
  repeating-linear-gradient(-45deg,rgba(142,42,56,.10) 0 6px,rgba(0,0,0,0) 6px 12px),
  none,
  radial-gradient(125% 85% at 50% 0%, #FFFFFF 0%, #E4EAEF 26%, #9FC2DC 58%, #8E2A38 100%)}
@media (max-width:899px){.hero.v2-hero3d{background-image:
  repeating-linear-gradient(45deg,rgba(124,180,214,.20) 0 6px,rgba(0,0,0,0) 6px 12px),
  repeating-linear-gradient(-45deg,rgba(142,42,56,.10) 0 6px,rgba(0,0,0,0) 6px 12px),
  radial-gradient(125% 85% at 50% 0%, #FFFFFF 0%, #E4EAEF 26%, #9FC2DC 58%, #8E2A38 100%)}}
@media (min-width:900px){.hero.v2-hero3d{background-image:
  repeating-linear-gradient(45deg,rgba(124,180,214,.16) 0 8px,rgba(0,0,0,0) 8px 16px),
  repeating-linear-gradient(-45deg,rgba(142,42,56,.09) 0 8px,rgba(0,0,0,0) 8px 16px),
  radial-gradient(125% 85% at 50% 0%, #FFFFFF 0%, #E4EAEF 26%, #9FC2DC 58%, #8E2A38 100%)}}
.hero.v2-hero3d{background-size:auto,auto,cover,cover;background-position:0 0,0 0,center,center;background-repeat:repeat,repeat,no-repeat,no-repeat;min-height:100svh}

/* ── v2.9 legacy purge (2026-10-17): the old video hero can never draw over the new one ── */
body:has(.v2-hero3d) .hero-video,
body:has(.v2-hero3d) .hero-overlay,
body:has(.v2-hero3d) .sxbg,
body:has(.v2-hero3d) video.hero-video,
body:has(.v2-hero3d) .hero > video{display:none !important;visibility:hidden !important}

/* ── v3.0 clean slate (2026-10-17): no legacy image, no legacy video — only the new drawn sky ── */
.hero.v2-hero3d{
  background-color:#8E2A38 !important;
  background-image:
    repeating-linear-gradient(45deg,rgba(159,194,220,.13) 0 8px,rgba(0,0,0,0) 8px 16px),
    repeating-linear-gradient(-45deg,rgba(142,42,56,.09) 0 8px,rgba(0,0,0,0) 8px 16px),
    radial-gradient(130% 88% at 50% 2%, #F2D6D2 0%, #E0A9A8 14%, #C9737C 32%, #B04552 52%, #6E1F2C 76%, #2A0F14 100%) !important;
  background-size:auto,auto,cover !important;
  background-position:0 0,0 0,center !important;
  background-repeat:repeat,repeat,no-repeat !important;
  image-rendering:pixelated;
}
/* the legacy poster files are retired from the design */
.hero.v2-hero3d[style*="hero-poster"]{background-image:none !important}

/* ── v4.0 split hero (2026-10-17): iPhone 18 Pro Burgundy + Soft Gold, halftone globe ── */
.hero.tlb{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;position:relative}
@media (max-width:860px){.hero.tlb{grid-template-columns:1fr}}
.tlb-left{background:#F9F6F0;color:#3D0B18;padding:clamp(22px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.tlb-brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.14em}
.tlb-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,#8E2A38,#3D0B18);color:#E5C478;font-weight:800}
.tlb-name{color:#8E2A38;font-size:1.02rem}
.tlb-sub{font-size:.66rem;letter-spacing:.32em;color:#9A7A52;margin-top:-10px}
.tlb-h1{font-family:var(--font-script,Georgia,serif);font-size:clamp(1.5rem,3.1vw,2.6rem);line-height:1.16;font-weight:600;margin:6px 0 0}
.tlb-h1 .g{color:#A8842C}
.tlb-p{font-size:clamp(.9rem,1.25vw,1.05rem);color:#5A3A42;max-width:46ch;font-family:var(--font-script,Georgia,serif)}
.tlb-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.tlb-b1{background:#3D0B18;color:#E5C478;padding:12px 20px;border-radius:10px;text-decoration:none;font-weight:600}
.tlb-b2{background:transparent;color:#8E2A38;border:1px solid #C9A66B;padding:12px 20px;border-radius:10px;text-decoration:none}
.tlb-quill{display:flex;align-items:center;gap:8px;opacity:.9}
.tlb-trail{flex:0 0 90px;height:2px;background:repeating-linear-gradient(90deg,#D4AF37 0 2px,transparent 2px 7px)}
.tlb-right{position:relative;overflow:hidden;background:
  repeating-linear-gradient(45deg,rgba(229,196,120,.13) 0 2px,rgba(0,0,0,0) 2px 6px),
  repeating-linear-gradient(-45deg,rgba(212,175,55,.10) 0 2px,rgba(0,0,0,0) 2px 6px),
  radial-gradient(120% 100% at 70% 30%,#4C0A1A 0%,#3D0B18 45%,#2D040A 100%)}
@media (max-width:860px){.tlb-right{min-height:48svh}}
.tlb-globe{position:absolute;inset:8% 6% 8% 4%;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,rgba(229,196,120,.22) 0 1.2deg,rgba(0,0,0,0) 1.2deg 3deg),
    radial-gradient(circle at 38% 34%,#5A1224 0%,#3D0B18 52%,#210309 100%);
  mask:radial-gradient(circle,#000 62%,rgba(0,0,0,.35) 78%,transparent 84%);
  -webkit-mask:radial-gradient(circle,#000 62%,rgba(0,0,0,.35) 78%,transparent 84%);
  animation:tlbspin 46s linear infinite}
.tlb-globe-dots{position:absolute;inset:0;border-radius:50%;
  background-image:radial-gradient(rgba(245,224,169,.85) 1px,transparent 1.4px);
  background-size:5px 5px;mix-blend-mode:screen;opacity:.5}
.tlb-globe-sheen{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(245,224,169,.28),transparent 46%)}
@keyframes tlbspin{to{transform:rotate(360deg)}}
.tlb-orbit{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;
  border:1px solid rgba(212,175,55,.34);pointer-events:none}
.tlb-orbit.o1{width:88%;height:88%;transform:rotate(18deg) scaleY(.34);animation:tlbspin 60s linear infinite}
.tlb-orbit.o2{width:102%;height:102%;transform:rotate(-12deg) scaleY(.28);animation:tlbspin 84s linear infinite reverse}
.tlb-net{position:absolute;inset:0;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){.tlb-globe,.tlb-orbit{animation:none}}

/* ── v4.1 globe canvas (2026-10-17): real continents as halftone dots ── */
.tlb-globe-wrap{position:absolute;inset:6% 4% 6% 2%;display:grid;place-items:center}
#tlbGlobe{width:100%;height:100%;display:block;filter:drop-shadow(0 0 26px rgba(142,42,56,.55))}
.tlb-globe{display:none}

/* ── v4.2 ready-made pixel globe, recoloured to Burgundy + Soft Gold ── */
.tlb-globe-img{position:absolute;inset:7% 6% 7% 4%;
  background:url('/assets/img/globe-pixel.png?v=1') center/contain no-repeat;
  image-rendering:pixelated; image-rendering:crisp-edges;
  filter:drop-shadow(0 0 34px rgba(142,42,56,.55)) saturate(1.05);
  animation:tlbfloat 9s ease-in-out infinite}
#tlbGlobe{display:none !important}
@keyframes tlbfloat{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.tlb-globe-img{animation:none}}

/* ══════════════════════════════════════════════════════════════
   TOLAB TOKENS · Phase 1  (2026-10-17)
   Structure borrowed from smokex.ai (ink panels, Inter + Fraunces,
   low-radius components). Accent re-skinned to our identity:
   burgundy + soft gold instead of copper.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* ink (smokex) */
  --ink-900:#0b0908; --ink-850:#130c09; --ink-800:#1d1612;
  --panel:#2a231f;   --panel-2:#363432;
  /* burgundy (our identity, replaces copper) */
  --burgundy-700:#2d040a; --burgundy-600:#3d0b18; --burgundy-500:#4c0a1a;
  --burgundy-400:#6e1f2c; --burgundy-300:#8e2a38; --burgundy-200:#b04552;
  /* gold (our identity) */
  --gold-700:#a8842c; --gold-600:#c9a24a; --gold-500:#d4af37;
  --gold-400:#e5c478; --gold-300:#f5e0a9;
  /* neutrals */
  --sand-500:#615a57; --sand-300:#8b756c; --cream:#c3a293;
  --paper:#fdfaf7;    --paper-2:#f9f6f0; --line:rgba(0,0,0,.10);
  /* type */
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Fraunces','Instrument Serif',Georgia,serif;
  /* radius (app language, not pills) */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  /* spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  /* elevation */
  --e-1:0 1px 2px rgba(11,9,8,.10);
  --e-2:0 10px 30px rgba(11,9,8,.16);
  /* semantic */
  --bg-app:var(--paper); --bg-app-alt:var(--paper-2);
  --fg-app:var(--ink-900); --fg-muted:var(--sand-500);
  --accent:var(--burgundy-600); --accent-fg:var(--gold-300);
}

/* ── app primitives ── */
.tl-btn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--font-ui);
  padding:11px 18px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
  background:var(--accent);color:var(--accent-fg);text-decoration:none;transition:transform .15s,background .15s}
.tl-btn:hover{background:var(--burgundy-500);transform:translateY(-1px)}
.tl-btn:active{transform:scale(.985)}
.tl-btn--ghost{background:transparent;color:var(--accent);border-color:var(--gold-600)}
.tl-btn--quiet{background:transparent;color:var(--fg-muted);border-color:var(--line)}
.tl-field{display:block;width:100%;font:400 14px/1.4 var(--font-ui);color:var(--fg-app);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.tl-field:focus{outline:none;border-color:var(--burgundy-300);box-shadow:0 0 0 3px rgba(142,42,56,.14)}
.tl-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--e-1)}
.tl-card--dark{background:var(--panel);border-color:rgba(255,255,255,.10);color:var(--paper)}
.tl-badge{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-ui);
  padding:6px 10px;border-radius:var(--r-pill);background:rgba(212,175,55,.14);color:var(--gold-700)}
.tl-table{width:100%;border-collapse:collapse;font:400 14px/1.45 var(--font-ui)}
.tl-table th{font-weight:600;text-align:left;color:var(--fg-muted);padding:10px 12px;border-bottom:1px solid var(--line)}
.tl-table td{padding:12px;border-bottom:1px solid var(--line)}
.tl-table tr:hover td{background:rgba(142,42,56,.04)}
.tl-sidebar{width:264px;flex:0 0 264px;background:var(--ink-850);color:var(--paper);
  display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4)}
.tl-sidebar a{color:var(--cream);text-decoration:none;font:500 14px/1 var(--font-ui);
  padding:10px 12px;border-radius:var(--r-sm)}
.tl-sidebar a[aria-current="page"],.tl-sidebar a:hover{background:var(--burgundy-600);color:var(--gold-300)}
.tl-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:14px var(--s-5);border-bottom:1px solid var(--line);background:var(--paper)}
.tl-shell{display:flex;min-height:100svh}
.tl-main{flex:1;min-width:0;padding:var(--s-5)}
.tl-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tl-tabs button{font:600 13px/1 var(--font-ui);padding:10px 14px;border:0;background:none;
  color:var(--fg-muted);border-bottom:2px solid transparent;cursor:pointer}
.tl-tabs button[aria-selected="true"]{color:var(--burgundy-600);border-bottom-color:var(--burgundy-600)}
@media (max-width:860px){.tl-sidebar{display:none}.tl-main{padding:var(--s-4)}}

/* TOLAB-NAV-BLACK — the AI Company nav button: black plate, white label, smaller */
.sxnavi[data-go="company"]{
  background:#0b0908 !important; color:#ffffff !important;
  border:1px solid #0b0908 !important; border-radius:8px !important;
  font-size:12px !important; line-height:1 !important;
  padding:6px 9px !important; gap:6px !important; font-weight:600 !important;
}
.sxnavi[data-go="company"] span{font-size:12px !important; width:14px !important; opacity:1 !important}
.sxnavi[data-go="company"]:hover{background:#3d0b18 !important; border-color:#3d0b18 !important; color:#f5e0a9 !important}
/* the same plate when the company chip shows up at the top of the thread */
.sxchipbtn[data-company], .companychip{background:#0b0908 !important;color:#fff !important;font-size:12px !important;padding:5px 9px !important}

/* TOLAB-THEME-ICONS — icons follow the surface: white on dark, ink on light */
:root{--icon-fg:#ffffff;--icon-plate:#0b0908;--icon-plate-fg:#ffffff}
.sxnavi span,.sxnavi svg,.sxicon,.sxchipbtn span{color:var(--icon-fg);fill:currentColor}
.sxnavi[data-go="company"]{background:var(--icon-plate)!important;color:var(--icon-plate-fg)!important}
@media (prefers-color-scheme: light){
  :root{--icon-fg:#0b0908;--icon-plate:#0b0908;--icon-plate-fg:#ffffff}
  .sxnavi span,.sxnavi svg{color:#0b0908}
}
html[data-theme="light"]{--icon-fg:#0b0908;--icon-plate:#0b0908;--icon-plate-fg:#ffffff}
html[data-theme="light"] .sxnavi span,html[data-theme="light"] .sxnavi svg{color:#0b0908}
html[data-theme="dark"]{--icon-fg:#ffffff;--icon-plate:#0b0908;--icon-plate-fg:#ffffff}
html[data-theme="dark"] .sxnavi span,html[data-theme="dark"] .sxnavi svg{color:#ffffff}

/* TOLAB-LIGHT-MODE — the SAME design, light surface. No layout/style change, only the tokens. */
html[data-theme="light"]{
  --background: 40 33% 96%;
  --foreground: 0 0% 8%;
  --primary: 0 0% 8%;
  --primary-foreground: 40 33% 96%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 8%;
  --muted: 0 0% 93%;
  --muted-foreground: 0 0% 35%;
  --border: 0 0% 0% / 0.12;
  --icon-fg:#0b0908;
  --icon-plate:#0b0908;
  --icon-plate-fg:#ffffff;
}
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]){
    --background: 40 33% 96%;
    --foreground: 0 0% 8%;
    --primary: 0 0% 8%;
    --primary-foreground: 40 33% 96%;
    --card: 0 0% 100%;
    --muted: 0 0% 93%;
    --muted-foreground: 0 0% 35%;
    --border: 0 0% 0% / 0.12;
    --icon-fg:#0b0908;
  }
}

/* TOLAB-LIGHT-SURFACES — same design, light surfaces. Only colours, never layout. */
html[data-theme="light"], html[data-theme="light"] body{
  background:#F7F3EC !important; color:#141414 !important;
}
html[data-theme="light"] .hero,
html[data-theme="light"] .sxmain,
html[data-theme="light"] .sxcomposer,
html[data-theme="light"] .sxbg{background:#F7F3EC !important}
html[data-theme="light"] .fade-top{background:linear-gradient(to bottom,#F7F3EC,transparent) !important}
html[data-theme="light"] .fade-bottom{background:linear-gradient(to top,#F7F3EC,transparent) !important}
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3,
html[data-theme="light"] p,html[data-theme="light"] li,html[data-theme="light"] td,
html[data-theme="light"] th,html[data-theme="light"] label{color:#141414 !important}
html[data-theme="light"] .navbar,html[data-theme="light"] .nav-pill{
  background:rgba(255,255,255,.88) !important;border-color:rgba(0,0,0,.12) !important}
html[data-theme="light"] .nav-link{color:#222 !important}
html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select{
  background:#fff !important;color:#111 !important;border-color:rgba(0,0,0,.16) !important}
html[data-theme="light"] .sxtoolcard,html[data-theme="light"] .sxtoolspanel,
html[data-theme="light"] .svc,html[data-theme="light"] .card{
  background:#fff !important;color:#141414 !important;border-color:rgba(0,0,0,.10) !important}
html[data-theme="light"] .sxmsg.bot,html[data-theme="light"] .sxmsg.sys{background:#fff !important;color:#141414 !important}
html[data-theme="light"] .sxmsg.user,html[data-theme="light"] .sxmsg.me{background:#3D0B18 !important;color:#F5E0A9 !important}

/* TOLAB-LIGHT-CONTRAST — finish the light surface: gradients + muted text + pills */
html[data-theme="light"] .hero-bottom,
html[data-theme="light"] .fade-top,
html[data-theme="light"] .fade-bottom{
  background:linear-gradient(to bottom,rgba(247,243,236,0),#F7F3EC 72%) !important;
}
html[data-theme="light"] .hero p,
html[data-theme="light"] .hero span,
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .ts,
html[data-theme="light"] .muted,
html[data-theme="light"] .sub,
html[data-theme="light"] small{color:#3a3a3a !important;opacity:1 !important}
html[data-theme="light"] .pill{background:#111 !important;color:#fff !important}
html[data-theme="light"] .hero{background:#F7F3EC !important}

/* TOLAB-RTL — Arabic layer: same layout, right-to-left, Arabic-first font */
html[lang="ar"] body,html[lang="ar"] input,html[lang="ar"] textarea,html[lang="ar"] button{
  font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic','Segoe UI',Tahoma,system-ui,sans-serif !important;
}
html[dir="rtl"] .nav-links,html[dir="rtl"] .nav-pill,html[dir="rtl"] .sxrow,html[dir="rtl"] .svcrow{
  flex-direction:row-reverse !important;
}
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .sxside,html[dir="rtl"] .sxsidebar{text-align:right}
html[dir="rtl"] .footer-links{flex-direction:row-reverse}
html[dir="rtl"] .tl-table th,html[dir="rtl"] .tl-table td{text-align:right}