:root {
  --ink:       #0a0a0f;
  --ink-mid:   #1e293b;
  --ink-soft:  #64748b;
  --canvas:    #f0f2f5;
  --white:     #ffffff;
  --blue:      #2563eb;
  --blue-l:    #3b82f6;
  --lime:      #a3e635;
  --orange:    #f97316;
  --purple:    #8b5cf6;
  --green:     #22c55e;
  --bd:        #000;
  --sh:        4px 4px 0 #000;
  --sh-lg:     6px 6px 0 #000;
  --r:         6px;
  --sans:      'Space Grotesk', sans-serif;
  --mono:      'JetBrains Mono', monospace;
  --nav-h:     64px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--canvas);color:var(--ink);overflow-x:hidden}
body.no-scroll{overflow:hidden}
code{font-family:var(--mono);font-size:.85em;color:var(--blue);background:rgba(37,99,235,.08);padding:1px 5px;border-radius:3px}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--blue-l);border-radius:99px}


#loadingScreen{position:fixed;inset:0;background:var(--ink);z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden}
.loader-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px);background-size:40px 40px;animation:gridShift 10s linear infinite}
@keyframes gridShift{to{background-position:40px 40px}}
.loader-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:24px}
.loader-f{width:90px;height:120px;filter:drop-shadow(0 0 16px #2563eb) drop-shadow(0 0 36px #2563eb44)}
.f-stroke{stroke:#3b82f6;stroke-width:10;stroke-linecap:round}
.f-v {stroke-dasharray:142;stroke-dashoffset:142;animation:drawS .55s .1s cubic-bezier(.4,0,.2,1) forwards}
.f-h1{stroke-dasharray:82; stroke-dashoffset:82; animation:drawS .35s .6s cubic-bezier(.4,0,.2,1) forwards}
.f-h2{stroke-dasharray:62; stroke-dashoffset:62; animation:drawS .3s  .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes drawS{to{stroke-dashoffset:0}}
.f-dot{fill:#3b82f6;opacity:0;animation:popD .2s 1.2s ease forwards}
.f-dot.delay-1{animation-delay:1.25s}.f-dot.delay-2{animation-delay:1.3s}
.f-dot.delay-3{animation-delay:1.35s}.f-dot.delay-4{animation-delay:1.4s}
@keyframes popD{0%{opacity:0;r:1}60%{opacity:1;r:7}100%{opacity:1;r:5}}
.loader-scanline{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#3b82f6,transparent);animation:scan 2s .5s linear infinite;opacity:.5}
@keyframes scan{0%{top:-5%;opacity:0}10%{opacity:.5}90%{opacity:.5}100%{top:105%;opacity:0}}
.loader-text{display:flex;flex-direction:column;align-items:center;gap:5px;animation:fadeUp .5s 1.2s both}
.loader-brand{font-weight:700;font-size:20px;color:#fff;letter-spacing:.04em}
.loader-sub{font-family:var(--mono);font-size:11px;color:#3b82f6;letter-spacing:.12em;text-transform:uppercase}
.loader-bar-wrap{width:180px;height:3px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;animation:fadeUp .4s 1.3s both}
.loader-bar{height:100%;background:linear-gradient(90deg,var(--blue),var(--lime));border-radius:99px;width:0%;transition:width .15s ease;box-shadow:0 0 8px var(--blue)}
#loadingScreen.fade-out{animation:loaderOut .45s ease forwards}
@keyframes loaderOut{to{opacity:0;transform:scale(1.03);pointer-events:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.fz-nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:2.5px solid var(--bd);z-index:1000;display:flex;align-items:center;transition:background .2s}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.nav-logo-f{width:34px;height:34px;background:var(--ink);color:#fff;font-weight:700;font-size:18px;display:grid;place-items:center;border-radius:5px;border:2px solid var(--bd);box-shadow:2px 2px 0 var(--bd);transition:transform .1s,box-shadow .1s}
.nav-logo:hover .nav-logo-f{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--blue)}
.nav-logo-name{font-weight:700;font-size:15px;color:var(--ink)}
.nav-center{display:flex;align-items:center;gap:4px}
.nav-link{padding:6px 14px;font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;border-radius:99px;transition:all .15s}
.nav-link:hover,.nav-link.active{color:var(--ink);background:var(--canvas)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 6px #22c55e88;animation:pulse 2s ease infinite}
@keyframes pulse{50%{box-shadow:0 0 12px #22c55ecc}}
.nav-version{font-family:var(--mono);font-size:11px;background:var(--ink);color:#fff;padding:3px 10px;border-radius:99px;border:1.5px solid var(--bd)}
.nav-cta-btn{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:#fff;background:var(--blue);padding:7px 16px;border-radius:var(--r);border:2px solid var(--bd);box-shadow:2px 2px 0 var(--bd);text-decoration:none;transition:transform .1s,box-shadow .1s}
.nav-cta-btn:hover{color:#fff;transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--bd)}


.landing-body{padding-top:var(--nav-h)}
.hero-section{min-height:calc(100vh - var(--nav-h));position:relative;display:flex;align-items:center;overflow:hidden;background:var(--white);border-bottom:3px solid var(--bd)}
.hero-bg-grid{position:absolute;inset:0;background-image:radial-gradient(circle,#00000012 1px,transparent 1px);background-size:26px 26px}
.hero-noise{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");opacity:.35;pointer-events:none}

.hero-deco{position:absolute;border-radius:50%;pointer-events:none}
.hero-deco-1{width:400px;height:400px;background:radial-gradient(circle,rgba(37,99,235,.08),transparent 70%);top:-80px;right:-100px}
.hero-deco-2{width:250px;height:250px;background:radial-gradient(circle,rgba(163,230,53,.1),transparent 70%);bottom:60px;right:20%}
.hero-deco-3{width:180px;height:180px;background:radial-gradient(circle,rgba(249,115,22,.08),transparent 70%);top:30%;left:-50px}
.hero-container{position:relative;z-index:2;padding-top:48px;padding-bottom:64px}
.min-vh-content{min-height:calc(100vh - var(--nav-h) - 112px)}


.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border:1.5px solid #cbd5e1;border-radius:99px;padding:5px 14px;margin-bottom:22px;background:var(--canvas)}
.eyebrow-pulse{width:6px;height:6px;border-radius:50%;background:var(--blue-l);animation:pulse 2s ease infinite}
.hero-headline{font-size:clamp(52px,8vw,90px);font-weight:700;line-height:.95;letter-spacing:-.03em;color:var(--ink);margin-bottom:22px}
.hl-accent{color:var(--blue);text-shadow:5px 5px 0 var(--ink);display:inline-block}
.hl-dim{color:var(--ink-soft)}
.hl-outline{-webkit-text-stroke:2px var(--ink);color:transparent}
.hero-desc{font-size:18px;color:var(--ink-soft);max-width:520px;line-height:1.65;margin-bottom:28px}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.cta-primary{display:inline-flex;align-items:center;background:var(--ink);color:#fff;font-weight:700;font-size:14px;padding:12px 26px;border:2.5px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);text-decoration:none;cursor:pointer;transition:transform .1s,box-shadow .1s}
.cta-primary:hover{color:#fff;transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.cta-ghost{display:inline-flex;align-items:center;background:var(--white);color:var(--ink);font-weight:700;font-size:14px;padding:12px 26px;border:2.5px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);text-decoration:none;transition:transform .1s,box-shadow .1s}
.cta-ghost:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.cta-center{display:flex;width:fit-content;margin:0 auto}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:5px 12px;border-radius:99px;border:1.5px solid}
.chip-blue  {color:#1d4ed8;background:#dbeafe;border-color:#bfdbfe}
.chip-orange{color:#c2410c;background:#fed7aa;border-color:#fdba74}
.chip-green {color:#15803d;background:#dcfce7;border-color:#bbf7d0}
.chip-purple{color:#6d28d9;background:#ede9fe;border-color:#ddd6fe}
.chip-yellow{color:#92400e;background:#fef3c7;border-color:#fde68a}


.terminal-mockup{background:#0f172a;border:2.5px solid var(--bd);border-radius:10px;box-shadow:var(--sh-lg);overflow:hidden;font-family:var(--mono)}
.term-header{display:flex;align-items:center;gap:6px;padding:10px 16px;background:#1e293b;border-bottom:1.5px solid #334155}
.term-dot{width:12px;height:12px;border-radius:50%}
.term-dot.red{background:#ef4444}.term-dot.yellow{background:#eab308}.term-dot.green{background:#22c55e}
.term-title{font-size:11px;color:#64748b;margin-left:6px;letter-spacing:.05em}
.term-body{padding:16px;font-size:12px;line-height:1.8}
.term-line{display:block}
.term-out{margin-left:0;opacity:.85}
.term-prompt{color:#a3e635}
.term-cmd{color:#7dd3fc}
.term-green{color:#86efac}.term-blue{color:#7dd3fc}.term-yellow{color:#fde68a}
.term-key{color:#7dd3fc}.term-str{color:#86efac}
.blink-cursor .term-cursor{animation:blink 1s step-end infinite;color:#a3e635}
@keyframes blink{50%{opacity:0}}

.scroll-down-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:40px;height:40px;background:var(--white);border:2.5px solid var(--bd);border-radius:50%;box-shadow:var(--sh);display:grid;place-items:center;color:var(--ink-soft);text-decoration:none;animation:bounce 1.8s ease infinite;transition:color .15s}
.scroll-down-hint:hover{color:var(--blue)}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}


.stats-section{background:var(--ink);border-top:3px solid var(--bd);border-bottom:3px solid var(--bd);padding:40px 0}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.1)}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-block{padding:30px 20px;text-align:center;background:var(--ink);transition:background .15s}
.stat-block:hover{background:#0f172a}
.stat-block-accent{background:rgba(37,99,235,.1)}
.stat-val{font-family:var(--mono);font-size:36px;font-weight:600;color:#fff;margin-bottom:8px;line-height:1;font-variant-numeric:tabular-nums}
.stat-key{font-size:12px;color:#64748b;font-weight:500;letter-spacing:.06em}
.stat-key i{color:var(--blue-l);margin-right:5px}

.features-section{padding:80px 0;background:var(--white)}
.section-label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.section-title{font-size:clamp(32px,5vw,48px);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin-bottom:48px}
.title-underline{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--blue);text-decoration-thickness:3px}
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:992px){.features-grid{grid-template-columns:repeat(3,1fr)}}
.feat-card{background:var(--canvas);border:2.5px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:28px;transition:transform .1s,box-shadow .1s}
.feat-card:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.feat-card-lg{grid-column:1/-1}
@media(min-width:992px){.feat-card-lg{grid-column:span 2}}
.feat-card-dark{background:var(--ink);border-color:var(--bd)}
.feat-icon{width:44px;height:44px;border-radius:var(--r);border:2px solid var(--bd);display:grid;place-items:center;font-size:20px;margin-bottom:16px;box-shadow:2px 2px 0 var(--bd)}
.feat-icon-blue  {background:#dbeafe;color:var(--blue)}
.feat-icon-green {background:#dcfce7;color:#16a34a}
.feat-icon-orange{background:#fed7aa;color:#c2410c}
.feat-icon-purple{background:#ede9fe;color:#6d28d9}
.feat-icon-lime  {background:rgba(163,230,53,.15);color:var(--lime)}
.feat-title{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:10px}
.feat-title-light{color:#fff}
.feat-desc{font-size:14px;color:var(--ink-soft);line-height:1.65}
.feat-desc-light{color:#94a3b8}
.feat-code{font-family:var(--mono);font-size:12px;background:var(--ink);border-radius:var(--r);border:2px solid var(--bd);padding:14px;margin-top:16px;line-height:1.8}
.fc-comment{color:#475569;font-style:italic}.fc-key{color:#7dd3fc}.fc-val{color:#86efac}


.cats-preview-section{padding:80px 0;background:var(--canvas)}
.cats-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:40px}
@media(min-width:768px){.cats-grid{grid-template-columns:repeat(3,1fr)}}
.cat-preview-card{background:var(--white);border:2.5px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:20px;transition:transform .1s,box-shadow .1s}
.cat-preview-card:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.cat-preview-icon{font-size:28px;color:var(--blue-l);margin-bottom:12px}
.cat-preview-info{margin-bottom:12px}
.cat-preview-name{font-weight:700;font-size:15px;color:var(--ink)}
.cat-preview-count{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.cat-preview-items{display:flex;flex-wrap:wrap;gap:6px}
.cat-endpoint-chip{font-family:var(--mono);font-size:11px;background:var(--canvas);border:1.5px solid #cbd5e1;border-radius:99px;padding:2px 10px;color:var(--ink-mid)}
.chip-more{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.2);color:var(--blue)}
.cats-cta{text-align:center}


.quickstart-section{padding:80px 0;background:var(--white);border-top:3px solid var(--bd)}
.steps-row{display:flex;align-items:flex-start;gap:0;flex-wrap:wrap}
.step-card{flex:1;min-width:200px;background:var(--canvas);border:2.5px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:28px}
.step-arrow{display:flex;align-items:center;padding:0 8px;color:var(--ink-soft);font-size:18px;margin-top:28px}
@media(max-width:640px){.step-arrow{display:none}.step-card{min-width:100%;margin-bottom:12px}}
.step-num{font-family:var(--mono);font-size:36px;font-weight:700;color:var(--blue-l);opacity:.3;margin-bottom:8px;line-height:1}
.step-title{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:12px}
.step-code{font-family:var(--mono);font-size:13px;background:var(--ink);color:var(--lime);padding:8px 14px;border-radius:var(--r);border:2px solid var(--bd);margin-bottom:12px;display:inline-block}
.step-desc{font-size:13px;color:var(--ink-soft);line-height:1.6}


.fz-footer{background:var(--ink);border-top:3px solid var(--bd);padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:36px;margin-bottom:40px}
@media(min-width:640px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.footer-logo-f{width:30px;height:30px;background:rgba(59,130,246,.2);color:var(--blue-l);font-weight:700;font-size:16px;display:grid;place-items:center;border-radius:4px;border:1.5px solid var(--blue-l)}
.footer-logo span{font-weight:700;font-size:15px;color:#fff}
.footer-tagline{font-size:13px;color:#64748b;line-height:1.6;margin-bottom:16px;max-width:300px}
.footer-links{display:flex;flex-wrap:wrap;gap:12px}
.footer-link{font-size:13px;color:#94a3b8;text-decoration:none;border-bottom:1px solid #334155;padding-bottom:1px;transition:color .15s}
.footer-link:hover{color:var(--blue-l)}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#64748b;margin-bottom:4px}
.footer-nav-link{font-size:13px;color:#94a3b8;text-decoration:none;transition:color .15s}
.footer-nav-link:hover{color:var(--blue-l)}
.footer-tech{font-size:13px;color:#94a3b8;display:flex;align-items:center;gap:6px}
.footer-tech i{color:var(--blue-l)}
.footer-bottom{border-top:1px solid #1e293b;padding-top:20px;font-size:13px;color:#475569;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.footer-sep{color:#334155}

.docs-body{padding-top:var(--nav-h)}
.docs-layout{display:flex;min-height:calc(100vh - var(--nav-h))}


.docs-sidebar{width:270px;flex-shrink:0;background:var(--white);border-right:2.5px solid var(--bd);position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;display:none}
@media(min-width:768px){.docs-sidebar{display:block}}
.sidebar-inner{padding:16px}
.sidebar-search-wrap{position:relative;margin-bottom:12px}
.sidebar-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-soft);font-size:12px;pointer-events:none}
.sidebar-search{width:100%;padding:8px 10px 8px 32px;font-family:var(--sans);font-size:13px;background:var(--canvas);border:2px solid var(--bd);border-radius:var(--r);box-shadow:2px 2px 0 var(--bd);color:var(--ink);outline:none}
.sidebar-search:focus{box-shadow:3px 3px 0 var(--blue)}
.sidebar-stats{display:flex;gap:8px;margin-bottom:16px;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.sidebar-stats i{color:var(--blue-l)}
.sidebar-cat-group{margin-bottom:8px}
.sidebar-cat-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;padding:6px 8px;border-radius:4px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .1s;text-align:left}
.sidebar-cat-btn:hover{background:var(--canvas)}
.sidebar-cat-btn span{display:flex;align-items:center;gap:8px}
.sidebar-cat-btn i{font-size:12px;color:var(--blue-l)}
.sidebar-cat-count{font-family:var(--mono);font-size:10px;background:var(--canvas);border:1.5px solid #cbd5e1;border-radius:99px;padding:1px 7px;color:var(--ink-soft)}
.sidebar-item{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 20px;font-size:12.5px;color:var(--ink-soft);text-decoration:none;border-radius:4px;transition:all .1s;border-left:2px solid transparent;margin-bottom:1px}
.sidebar-item:hover,.sidebar-item.active{background:rgba(37,99,235,.06);color:var(--blue);border-left-color:var(--blue)}
.sidebar-method{font-family:var(--mono);font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;border:1px solid var(--bd);flex-shrink:0}
.sidebar-method.get{background:#dbeafe;color:#1d4ed8}
.sidebar-method.post{background:#fed7aa;color:#c2410c}


.docs-main{flex:1;min-width:0;padding:32px 28px 60px;background:var(--canvas)}
.docs-page-header{margin-bottom:28px;padding-bottom:20px;border-bottom:2.5px solid var(--bd)}
.docs-page-title{font-size:32px;font-weight:700;color:var(--ink);margin-bottom:6px}
.docs-page-sub{font-size:14px;color:var(--ink-soft)}
.mobile-search{position:relative}
.mobile-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-soft);font-size:13px;pointer-events:none}
.mobile-search-input{width:100%;padding:11px 14px 11px 40px;font-family:var(--sans);font-size:14px;background:var(--white);border:2.5px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);color:var(--ink);outline:none}
.mobile-search-input:focus{box-shadow:4px 4px 0 var(--blue)}


.docs-cat-group{margin-bottom:28px}
.docs-cat-header{margin-bottom:0}
.docs-cat-toggle{width:100%;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:11px 18px;border:2.5px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);cursor:pointer;transition:transform .1s,box-shadow .1s;text-align:left}
.docs-cat-toggle:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-lg)}
.cat-icon-wrap{width:24px;height:24px;background:rgba(163,230,53,.15);border-radius:4px;display:grid;place-items:center;font-size:12px;color:var(--lime);flex-shrink:0}
.cat-name{flex:1}
.cat-badge{background:var(--blue-l);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;border:1.5px solid rgba(255,255,255,.2)}
.cat-toggle-chv{font-size:11px;opacity:.6;transition:transform .25s ease;margin-left:4px}
.cat-toggle-chv.open{transform:rotate(0deg)}

.docs-cards{padding-top:10px;display:flex;flex-direction:column;gap:10px}


.api-item{cursor:pointer}
.api-card{background:var(--white);border:2.5px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:16px 20px;display:flex;align-items:flex-start;justify-content:space-between;transition:transform .1s,box-shadow .1s}
.api-card:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.card-info{flex:1;min-width:0;padding-right:16px}
.card-name{font-weight:700;font-size:15px;color:var(--ink);margin-bottom:3px}
.card-desc{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-path{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.card-path code{font-size:11px;color:var(--ink-mid);background:var(--canvas);border:1.5px solid #cbd5e1;border-radius:3px;padding:2px 6px}
.card-params{display:flex;flex-wrap:wrap;gap:4px}
.param-chip{font-family:var(--mono);font-size:10.5px;color:var(--blue);background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.2);border-radius:99px;padding:1px 8px}
.card-method-btn{font-family:var(--mono);font-weight:700;font-size:12px;padding:7px 14px;border:2px solid var(--bd);border-radius:4px;box-shadow:2px 2px 0 var(--bd);cursor:pointer;flex-shrink:0;color:#fff;background:var(--blue-l);transition:transform .1s,box-shadow .1s}
.card-method-btn.post{background:var(--orange)}
.card-method-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--bd)}

.sidebar-mobile-toggle{position:fixed;bottom:20px;left:20px;z-index:100;width:46px;height:46px;background:var(--ink);color:#fff;border:2.5px solid var(--bd);border-radius:50%;box-shadow:var(--sh);display:grid;place-items:center;font-size:18px;cursor:pointer;transition:transform .1s,box-shadow .1s}
.sidebar-mobile-toggle:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-lg)}

.slide-panel-container{background:var(--white);border:2.5px solid var(--bd);border-top:none;border-radius:0 0 var(--r) var(--r);padding:26px 22px 22px;box-shadow:var(--sh);margin-bottom:14px;margin-top:-3px}
.panel-header{margin-bottom:16px}
.panel-title-row{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.panel-name{font-weight:700;font-size:18px;color:var(--ink)}
.panel-desc{font-size:13px;color:var(--ink-soft);margin:0}
.panel-info-block{border:2px solid var(--bd);border-radius:var(--r);background:var(--canvas);overflow:hidden;margin-bottom:14px}
.info-row{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1.5px solid #e2e8f0;font-size:13px}
.info-row:last-child{border-bottom:none}
.info-key{font-weight:600;color:var(--ink);width:80px;flex-shrink:0}
.info-val{font-family:var(--mono);font-size:12px;color:var(--ink-mid);background:var(--white);padding:3px 8px;border-radius:4px;border:1.5px solid #cbd5e1;word-break:break-all}
.info-val.blue{color:var(--blue)}
.method-badge{font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px;border:2px solid var(--bd);box-shadow:2px 2px 0 var(--bd);background:var(--blue-l);color:#fff}
.method-badge.post{background:var(--orange)}


.api-key-notice{display:flex;align-items:flex-start;gap:9px;background:#fffbeb;border-bottom:2px solid var(--bd);color:#92400e;font-size:12.5px;line-height:1.5;padding:10px 14px}
.api-key-notice i{margin-top:2px;flex-shrink:0}
.api-key-notice a{color:#92400e;text-decoration:underline;font-weight:600}
.code-snippet-section{border:2.5px solid var(--bd);border-radius:var(--r);overflow:hidden;margin-bottom:14px;box-shadow:var(--sh)}
.snippet-tabs{display:flex;background:var(--ink);border-bottom:2px solid var(--bd)}
.snip-tab{flex:1;padding:9px 0;font-family:var(--mono);font-size:12px;font-weight:500;color:rgba(255,255,255,.4);background:none;border:none;border-right:1.5px solid rgba(255,255,255,.07);cursor:pointer;transition:color .15s,background .15s}
.snip-tab:last-child{border-right:none}
.snip-tab:hover{color:rgba(255,255,255,.75)}
.snip-tab.active{color:var(--lime);background:rgba(163,230,53,.07)}
.snippet-body{position:relative;background:#0f172a}
.snippet-pre{font-family:var(--mono);font-size:12px;color:#94a3b8;padding:16px 46px 16px 16px;margin:0;white-space:pre-wrap;word-break:break-all;max-height:190px;overflow-y:auto;line-height:1.7}
.snip-key{color:#7dd3fc}.snip-str{color:#86efac}.snip-kw{color:var(--lime)}.snip-fn{color:#c4b5fd}
.snippet-copy{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);border-radius:4px;color:rgba(255,255,255,.4);width:30px;height:30px;display:grid;place-items:center;font-size:12px;cursor:pointer;transition:all .15s}
.snippet-copy:hover{background:rgba(255,255,255,.14);color:#fff}
.snippet-copy.copied{color:var(--lime);border-color:var(--lime)}


.panel-collapse-toggle{display:flex;align-items:center;justify-content:space-between;background:var(--canvas);border:2px solid var(--bd);border-radius:var(--r);padding:10px 14px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none;transition:background .1s}
.panel-collapse-toggle:hover{background:#e2e8f0}
.toggle-chevron{font-size:11px;color:var(--ink-soft);transition:transform .2s ease}
.toggle-chevron.open{transform:rotate(180deg)}
.example-pre{font-family:var(--mono);font-size:12px;background:#0f172a;color:var(--lime);border:2px solid var(--bd);border-top:none;border-radius:0 0 var(--r) var(--r);padding:14px;margin-bottom:14px;max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}


.param-label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.param-input{width:100%;padding:10px 14px;font-family:var(--mono);font-size:13px;background:var(--white);border:2.5px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);color:var(--ink);outline:none;transition:transform .1s,box-shadow .1s}
.param-input:focus{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--blue)}
.param-input.is-invalid{box-shadow:3px 3px 0 #ef4444}


.upload-zone{border:2.5px dashed var(--bd);border-radius:var(--r);background:#f8fafc;padding:26px 20px;text-align:center;cursor:pointer;transition:all .15s;margin-top:10px}
.upload-zone:hover,.upload-zone.drag-over{background:#eff6ff;border-color:var(--blue-l)}
.upload-icon{font-size:30px;color:var(--blue-l);display:block;margin-bottom:8px}
.upload-text{font-weight:600;font-size:14px;color:var(--ink-mid);margin-bottom:4px}
.upload-sub{font-size:12px;color:var(--ink-soft)}
.upload-thumb{max-width:100%;max-height:160px;border-radius:var(--r);border:2px solid var(--bd)}
.upload-fname{font-size:12px;color:var(--ink-soft);margin-top:8px;font-family:var(--mono)}


.panel-divider{border-color:#e2e8f0;margin-bottom:14px}
.response-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.res-status-badge{font-family:var(--mono);font-size:11px;font-weight:600;padding:2px 10px;border-radius:99px;border:1.5px solid var(--bd)}
.res-status-badge.ok{background:#dcfce7;color:#16a34a}.res-status-badge.err{background:#fee2e2;color:#dc2626}
.res-loading{display:flex;align-items:center;gap:12px;height:60px;font-size:13px;color:var(--ink-soft)}
.res-spinner{width:20px;height:20px;border:3px solid rgba(37,99,235,.2);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.res-url-bar{font-family:var(--mono);font-size:12px;background:var(--canvas);color:var(--blue);border:2px solid var(--bd);border-radius:var(--r);padding:9px 14px;margin-bottom:8px;white-space:pre-wrap;word-break:break-all}
.res-code-block{font-family:var(--mono);font-size:12.5px;background:#0f172a;color:#94a3b8;border:2.5px solid var(--bd);border-radius:var(--r);padding:16px;max-height:320px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;box-shadow:var(--sh)}


.btn-send{display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:700;font-size:14px;padding:12px;border:2.5px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);cursor:pointer;transition:transform .1s,box-shadow .1s}
.btn-send:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:var(--sh-lg);background:var(--blue)}
.btn-send:disabled{background:#cbd5e1;color:#94a3b8;box-shadow:1px 1px 0 var(--bd);cursor:not-allowed}

@media(max-width:700px){
  .landing-body{padding-top:56px}
  .hero-headline{font-size:44px}
  .features-grid{grid-template-columns:1fr}
  .feat-card-lg{grid-column:1}
  .cats-grid{grid-template-columns:1fr}
  .slide-panel-container{padding:18px 14px}
  .docs-main{padding:20px 16px 48px}
}


.panel-topbar {
    margin-bottom: 14px;
}

.panel-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--canvas);
    border: 2px solid var(--bd);
    border-radius: var(--r);
    padding: 6px 14px;
    box-shadow: 2px 2px 0 var(--bd);
    cursor: pointer;
    transition: transform .1s, box-shadow .1s, color .1s, background .1s;
}
.panel-back-btn:hover {
    color: var(--ink);
    background: var(--white);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--bd);
}
.panel-back-btn i {
    font-size: 11px;
}

/* ── Mobile nav menu ── */
.nav-mobile-toggle{display:none;background:var(--ink);color:#fff;border:2px solid var(--bd);border-radius:6px;width:38px;height:38px;align-items:center;justify-content:center;font-size:15px;cursor:pointer;flex-shrink:0;position:relative;z-index:1002}
@media(max-width:767px){.nav-mobile-toggle{display:inline-flex}}

/* Positioned as an overlay dropdown anchored to the nav bar, NOT as a
   flex sibling of .nav-inner — otherwise it gets squeezed sideways into
   the same fixed-height row instead of dropping down below it. */
.nav-mobile-menu{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; top:100%; left:0; right:0;
    max-height:0; overflow:hidden; opacity:0;
    padding:0 16px; margin:0;
    background:var(--white);
    border-bottom:2.5px solid var(--bd);
    box-shadow:0 12px 24px rgba(10,10,15,.12);
    transition:max-height .25s ease, opacity .2s ease, padding .25s ease;
}
.nav-mobile-menu.open{ max-height:420px; opacity:1; padding:10px 16px 18px; }
.nav-mobile-menu .nav-link{padding:12px 10px;border-radius:8px;font-size:15px}
.nav-mobile-menu .nav-cta-btn{justify-content:center;margin-top:8px;padding:10px 16px}
.nav-mobile-backdrop{display:none;position:fixed;inset:0;top:var(--nav-h);background:rgba(10,10,15,.25);z-index:999}
.nav-mobile-backdrop.open{display:block}

/* ── Hero "stack" visual ── */
.stack-mockup{position:relative;padding:20px 10px 10px}
.stack-screen{position:relative;margin:0 auto 34px;width:260px;background:var(--white);border:2.5px solid var(--bd);border-radius:14px;box-shadow:var(--sh-lg);padding:26px 18px;text-align:center}
.stack-screen::before{content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:70%;height:14px;background:var(--canvas);border:2.5px solid var(--bd);border-bottom:none;border-radius:10px 10px 0 0}
.stack-screen-code{display:inline-block;background:var(--ink);color:#fff;font-family:var(--mono);font-size:16px;font-weight:600;padding:10px 18px;border-radius:8px;border:2px solid var(--bd)}
.stack-lines{position:relative;height:34px;margin:0 auto;width:82%;border-left:2px solid var(--bd);border-right:2px solid var(--bd);border-top:2px solid var(--bd);border-radius:8px 8px 0 0}
.stack-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:-2px}
.stack-box{background:var(--white);border:2.5px solid var(--bd);border-radius:8px;box-shadow:3px 3px 0 var(--bd);padding:14px 6px;text-align:center;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--ink);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Stat strip ── */
.stat-strip-section{background:var(--white);border-bottom:3px solid var(--bd);padding:26px 0}
.stat-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:640px){.stat-strip{grid-template-columns:repeat(4,1fr)}}
.stat-pill{display:flex;align-items:center;gap:12px;background:var(--canvas);border:2px solid var(--bd);border-radius:var(--r);padding:12px 16px}
.stat-pill-icon{width:38px;height:38px;flex-shrink:0;background:var(--ink);color:#fff;border-radius:8px;display:grid;place-items:center;font-size:15px}
.stat-pill-val{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--ink);line-height:1.2}
.stat-pill-label{font-size:12px;color:var(--ink-soft)}

/* ── Built-for-developers code window ── */
.dev-section{padding:80px 0;background:var(--canvas)}
.dev-code-window{background:var(--white);border:2.5px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh-lg);overflow:hidden}
.dev-code-topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--white);border-bottom:2px solid var(--bd)}
.term-dots{display:flex;gap:6px}
.dev-code-req{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);flex:1}
.dev-code-status{font-family:var(--mono);font-size:11px;font-weight:700;color:#16a34a;background:#dcfce7;border:1.5px solid #bbf7d0;border-radius:99px;padding:2px 10px}
.dev-code-body{font-family:var(--mono);font-size:13px;line-height:1.9;background:#0f172a;color:#94a3b8;padding:20px;margin:0;white-space:pre-wrap;word-break:break-word}
.dev-code-try{display:block;text-align:center;background:var(--ink);color:#fff;font-weight:700;font-size:13px;padding:12px;text-decoration:none;border-top:2px solid var(--bd)}
.dev-code-try:hover{color:#fff;background:#000}

/* ── Popular endpoints preview table ── */
.endpoints-preview-section{padding:80px 0;background:var(--white)}
.endpoints-preview-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.section-link{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center}
.section-link:hover{color:var(--blue)}
.endpoints-table{border:2.5px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.endpoint-row{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--white);border-bottom:2px solid #e2e8f0;text-decoration:none;transition:background .12s}
.endpoint-row:last-child{border-bottom:none}
.endpoint-row:hover{background:var(--canvas)}
.endpoint-row-path{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);flex-shrink:0}
.endpoint-row-desc{font-size:13px;color:var(--ink-soft);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.endpoint-row-arrow{font-size:12px;color:var(--ink-soft)}
.endpoint-row-empty{color:var(--ink-soft);font-size:13px;justify-content:center}

/* ── Ready-to-build CTA banner ── */
.ready-cta-section{padding:80px 0;background:var(--canvas)}
.ready-cta-card{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;background:var(--white);border:2.5px solid var(--bd);border-radius:16px;box-shadow:var(--sh-lg);padding:48px}
.ready-cta-text .section-title{margin-bottom:16px}
.ready-cta-visual{flex-shrink:0}
.api-key-button{width:180px;height:130px;background:var(--ink);color:#fff;font-family:var(--mono);font-weight:800;font-size:26px;letter-spacing:.03em;text-align:center;line-height:1.25;display:flex;align-items:center;justify-content:center;border:3px solid var(--bd);border-radius:16px;box-shadow:8px 8px 0 var(--bd);transform:rotate(-2deg)}

/* ── Feature grid ── */
.feature-grid-section{padding:0 0 90px;background:var(--white)}

/* ── Footer additions ── */
.footer-col-follow{gap:12px}
.footer-social{display:flex;gap:10px}
.footer-social-btn{width:36px;height:36px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1.5px solid #334155;border-radius:8px;color:#94a3b8;text-decoration:none;transition:all .15s}
.footer-social-btn:hover{color:#fff;background:rgba(255,255,255,.14);border-color:#475569}

@media(max-width:767px){
  .ready-cta-card{padding:32px 24px;justify-content:center;text-align:center}
  .ready-cta-text .hero-cta-row{justify-content:center}
}

/* ── FZModal (public/js/modal.js) — duplicated here (also defined in
   dashboard.css) so the site-wide notification poller
   (public/js/notify-poll.js) renders a properly styled dialog even on
   pages that don't load dashboard.css, like the landing page and docs. ── */
.fz-modal .modal-dialog{ max-width:420px; }
.fz-modal-content{ border:2.5px solid var(--bd); border-radius:16px; box-shadow: var(--sh); padding:6px; position:relative; background:var(--white); }
.fz-modal-close{ position:absolute; top:12px; right:12px; width:28px; height:28px; border:none; background:transparent; color:#94a3b8; font-size:14px; cursor:pointer; z-index:2; }
.fz-modal-close:hover{ color:var(--ink); }
.fz-modal-body{ text-align:center; padding:30px 26px 10px; }
.fz-modal-icon{ width:52px; height:52px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; font-size:22px; }
.fz-modal-icon.variant-info{ background:#eff6ff; color:#2563eb; }
.fz-modal-icon.variant-success{ background:#dcfce7; color:#16a34a; }
.fz-modal-icon.variant-danger{ background:#fee2e2; color:#dc2626; }
.fz-modal-icon.variant-warning{ background:#fef3c7; color:#b45309; }
.fz-modal-title{ font-size:18px; font-weight:800; margin-bottom:8px; color:var(--ink); }
.fz-modal-message{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; text-align:left; }
.fz-modal-message p{ text-align:center; }
.fz-modal-footer{ border-top:none; padding:16px 26px 24px; display:flex; gap:10px; justify-content:center; }
.fz-modal-footer .dash-btn{ flex:1; }
.fz-modal-image{ width:100%; max-height:220px; object-fit:cover; border-radius:12px; border:1px solid var(--bd); margin-bottom:14px; display:block; }
@media(max-width:575px){
  .fz-modal .modal-dialog{ margin:12px; }
  .fz-modal-body{ padding:26px 18px 8px; }
  .fz-modal-footer{ padding:14px 18px 20px; }
}

/* ── Floating "Tanya AI" widget (public/js/ai-widget.js) ── */
#fzAiWidget{ position:fixed; right:20px; bottom:20px; z-index:1050; font-family:var(--sans); }
#fzAiToggle{
  width:60px; height:60px; border-radius:50%; border:2.5px solid var(--bd,#111827);
  background:var(--accent,#374151); box-shadow: var(--sh, 4px 4px 0 #000);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  padding:0; animation: fzAiEntrance .5s cubic-bezier(.34,1.56,.64,1);
}
#fzAiToggle img{ width:34px; height:34px; object-fit:contain; animation: fzAiBreathe 3.2s ease-in-out infinite; transform-origin:center bottom; }
#fzAiToggle:hover img{ animation: fzAiWiggle .5s ease-in-out; }
#fzAiToggle:hover{ transform: translateY(-3px); box-shadow: var(--shadow-soft-lg, 0 12px 32px rgba(17,24,39,.18)); }
#fzAiWidget.fz-ai-open #fzAiToggle{ transform: scale(.92); }
#fzAiWidget.fz-ai-open #fzAiToggle img{ animation: none; }
/* Rive canvas replaces the <img> once the .riv asset loads successfully
   (see tryInitRive in ai-widget.js) — same footprint, no layout shift. */
#fzAiRiveCanvas{ width:44px; height:44px; }

/* Idle "breathing" loop — subtle scale so the mascot never looks frozen,
   even when nobody's interacting with it. */
@keyframes fzAiBreathe{
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.06) rotate(-1.5deg); }
}
/* Playful ear-wiggle on hover — a little "notice me" reaction. */
@keyframes fzAiWiggle{
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}
/* Pop-in the first time the button renders, so it doesn't just appear flat. */
@keyframes fzAiEntrance{
  0%   { transform: scale(0) rotate(-20deg); opacity:0; }
  60%  { transform: scale(1.12) rotate(6deg); opacity:1; }
  100% { transform: scale(1) rotate(0deg); }
}
/* Small "hop" cue on the bubble when a new reply lands — toggled briefly
   via the .fz-ai-notify class from public/js/ai-widget.js. */
#fzAiToggle.fz-ai-notify{ animation: fzAiHop .5s ease; }
@keyframes fzAiHop{
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-9px); }
  55%      { transform: translateY(0); }
  75%      { transform: translateY(-3px); }
}
/* Unread-reply badge dot */
#fzAiToggle .fz-ai-dot{
  position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:50%;
  background:#ef4444; border:2px solid var(--white,#fff); opacity:0; transform:scale(0);
  transition: transform .2s ease, opacity .2s ease;
}
#fzAiToggle .fz-ai-dot.show{ opacity:1; transform:scale(1); }

.fz-ai-panel{
  position:absolute; right:0; bottom:76px; width:360px; max-width:calc(100vw - 32px);
  height:480px; max-height:calc(100vh - 140px);
  background:var(--white,#fff); border:2px solid var(--bd,#111827); border-radius:20px;
  box-shadow: var(--shadow-soft-lg, 0 12px 32px rgba(17,24,39,.18));
  display:flex; flex-direction:column; overflow:hidden;
  animation: fzAiPop .2s ease;
}
@keyframes fzAiPop{ from{ opacity:0; transform:translateY(10px) scale(.98);} to{ opacity:1; transform:none; } }

.fz-ai-header{ display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--accent,#374151); color:#fff; }
.fz-ai-header img{ width:32px; height:32px; object-fit:contain; border-radius:8px; background:rgba(255,255,255,.12); padding:4px; }
.fz-ai-header-text{ flex:1; min-width:0; }
.fz-ai-title{ font-weight:800; font-size:14px; line-height:1.2; }
.fz-ai-subtitle{ font-size:11.5px; opacity:.75; }
.fz-ai-header button{ background:transparent; border:none; color:#fff; opacity:.8; cursor:pointer; font-size:15px; padding:6px; }
.fz-ai-header button:hover{ opacity:1; }

.fz-ai-messages{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--bg-secondary,#f5f5f5); }
.fz-ai-msg{ display:flex; }
.fz-ai-msg-user{ justify-content:flex-end; }
.fz-ai-msg-assistant{ justify-content:flex-start; }
.fz-ai-bubble{ max-width:82%; padding:10px 13px; border-radius:14px; font-size:13px; line-height:1.5; }
.fz-ai-msg-assistant .fz-ai-bubble{ background:#fff; border:1px solid var(--line,#d1d5db); color:var(--ink,#111827); border-bottom-left-radius:4px; }
.fz-ai-msg-user .fz-ai-bubble{ background:var(--accent,#374151); color:#fff; border-bottom-right-radius:4px; }
.fz-ai-typing .fz-ai-bubble{ display:flex; gap:4px; padding:13px; }
.fz-ai-typing .fz-ai-bubble span{ width:6px; height:6px; border-radius:50%; background:#9aa1ad; animation: fzAiBlink 1.2s infinite ease-in-out; }
.fz-ai-typing .fz-ai-bubble span:nth-child(2){ animation-delay:.15s; }
.fz-ai-typing .fz-ai-bubble span:nth-child(3){ animation-delay:.3s; }
@keyframes fzAiBlink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }

.fz-ai-input-row{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--line,#d1d5db); background:#fff; }
.fz-ai-input-row input{ flex:1; border:1px solid var(--line,#d1d5db); border-radius:10px; padding:10px 12px; font-size:13px; font-family:inherit; outline:none; }
.fz-ai-input-row input:focus{ border-color:var(--accent,#374151); }
.fz-ai-input-row button{ width:38px; height:38px; border-radius:10px; border:none; background:var(--accent,#374151); color:#fff; cursor:pointer; flex-shrink:0; }
.fz-ai-input-row button:hover{ background:var(--accent-hover,#4b5563); }

@media(max-width:480px){
  #fzAiWidget{ right:14px; bottom:14px; }
  .fz-ai-panel{ width:calc(100vw - 28px); height:calc(100vh - 120px); bottom:72px; }
}