@import url('/static/fonts.css');

:root{color-scheme:dark;--bg:#090a0b;--panel:rgba(255,255,255,.035);--line:rgba(255,255,255,.10);--line-hi:rgba(255,255,255,.19);--text:#f3f3f4;--muted:#96969e;--faint:#62626b;--white:#ececee;--radius:24px;--radius-hero:28px;--radius-card:24px;--radius-btn:999px;--radius-chip:999px;--radius-input:16px;--font:'Golos Text','Manrope',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--mono:'IBM Plex Mono',Consolas,monospace}

*{box-sizing:border-box}
html,body,*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}
::-webkit-scrollbar-thumb:active{background:rgba(255,255,255,.32)}
::-webkit-scrollbar-corner{background:transparent}
html{scroll-padding-top:100px;width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip}
.product-landing{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip}
body:before{content:'';position:fixed;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.025' filter='url(%23n)'/%3E%3C/svg%3E");z-index:20;opacity:.43;transform:translateZ(0);will-change:transform}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.42}
button{color:inherit}
h1,h2,h3,h4,p{margin:0}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:5px}
input:focus,textarea:focus,select:focus{outline:none;border-color:#7e7e87!important;box-shadow:0 0 0 3px #ffffff08}
::selection{background:#ffffff30;color:#fff}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight: 600;font-size:21px;letter-spacing:0}
.logo-mark{width:35px;height:35px;position:relative;display:inline-block;filter:drop-shadow(0 2px 8px #ffffff18)}
.logo-mark:before,.logo-mark:after{content:'';position:absolute;width:9px;height:25px;background:linear-gradient(160deg,#fff,#8d8d92);transform:skew(-29deg);border-radius:2px;top:3px;left:7px}
.logo-mark:after{left:20px;top:8px;height:22px;background:linear-gradient(160deg,#d1d1d5,#626269)}
.logo small{font-family:var(--mono);font-size:9px;color:#aaa;letter-spacing:.5px;font-weight:400;border:1px solid var(--line);padding:2px 5px;border-radius:4px;margin-left:2px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:#a2a2ac;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:43px;padding:11px 22px;border:1px solid var(--line-hi);border-radius:999px;background:rgba(255,255,255,.035);color:#eaeaec;font-size:12px;font-weight: 500;line-height:1.4;transition:background .2s,border-color .2s,transform .2s}
.btn:hover:not(:disabled){background:#ffffff0e;border-color:#ffffff3c;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(#fbfbfc,#d9d9df);border-color:#fff9;color:#111214;box-shadow:0 0 20px #ffffff06,inset 0 -2px 0 #0000000c}
.btn.primary:hover:not(:disabled){background:#fff;box-shadow:0 0 24px #ffffff15}
.btn.subtle{border-color:transparent;background:transparent;color:var(--muted)}
.btn.small{min-height:34px;padding:8px 12px;font-size:11px}
.btn.wide{width:100%}
.btn.big{min-height:48px;padding:13px 23px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:12px;width:34px;height:34px;color:var(--muted)}
.icon-btn:hover{background:#ffffff08;color:#fff;border-color:var(--line)}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.052),rgba(255,255,255,.018));border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px 0 #ffffff04;backdrop-filter:blur(24px)}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#ffffff04;padding:4px 10px;border-radius:30px;font-family:var(--font);font-size:12px;white-space:nowrap;line-height:1.4}
.status-dot{width:5px;height:5px;border-radius:50%;background:#8a8a94;box-shadow:0 0 0 3px #ffffff06;display:inline-block}
.status-dot.online{background:#ececee;box-shadow:0 0 8px #ffffff66}
.status-dot.checking{animation:pulse 1.6s infinite}
.divider{height:1px;background:var(--line)}
.landing{overflow:hidden;position:relative;background:radial-gradient(ellipse 45% 25% at 78% 10%,#fff9 0%,transparent 1%,#ffffff06 8%,transparent 100%)}
.container{width:100%;max-width:1240px;margin:auto;padding:0 40px;box-sizing:border-box}
@media(max-width:800px){.container{padding:0 20px}}
@media(max-width:500px){.container{padding:0 16px}}
.topnav{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff09}
.nav-links{display:flex;align-items:center;gap:32px;color:var(--muted);font-size:12px}
.nav-links a:hover{color:#fff}
.nav-actions{display:flex;gap:12px;align-items:center}
.hero{min-height:625px;display:grid;grid-template-columns:1.03fr 1fr;align-items:center;gap:10px;padding-top:36px;padding-bottom:25px}
.hero-content{position:relative;z-index:2;padding-bottom:18px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.8px;color:#c4c4cc;padding:7px 10px 7px 8px;border:1px solid #ffffff13;border-radius:12px;background:linear-gradient(90deg,#ffffff08,#ffffff02);margin-bottom:27px}
.hero-badge span{display:inline-block;background:#d8d8dc;color:#171719;padding:1px 5px;border-radius:6px;font-family:var(--mono);font-size:9px;letter-spacing:.7px}
.hero h1{font-size:clamp(44px,5.7vw,72px);line-height:1.09;font-weight:600;letter-spacing:-4px;margin-left:-3px}
.hero h1 .dim{background:linear-gradient(110deg,#cacacf,#66666e);background-clip:text;-webkit-text-fill-color:transparent}
.hero-copy{font-size:14px;line-height:1.9;color:var(--muted);max-width:392px;margin-top:24px}
.hero-buttons{display:flex;gap:12px;margin-top:31px}
.hero-footnote{display:flex;align-items:center;gap:15px;color:#71717a;font-size:10px;margin-top:23px}
.hero-footnote span{display:flex;align-items:center;gap:5px}
.hero-footnote .icon{width:12px;height:12px}
.hero-art{position:relative;height:480px;isolation:isolate;margin-left:-5px}
.art-grid{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse,#000 20%,transparent 72%)}
.orbital{position:absolute;left:50%;top:46%;width:440px;height:440px;transform:translate(-50%,-50%);border:1px solid #ffffff08;border-radius:50%;box-shadow:0 0 70px #ffffff02,inset 0 0 60px #ffffff02}
.orbital:before{content:'';position:absolute;inset:44px;border:1px dashed #ffffff12;border-radius:50%;transform:rotate(-25deg)}
.orbital:after{content:'';position:absolute;left:22px;top:114px;width:5px;height:5px;border-radius:50%;background:#a9a9af;box-shadow:0 0 14px #ffffff66}
.sphere{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%) rotate(-18deg);width:272px;height:272px;border-radius:50%;background:radial-gradient(ellipse at 33% 18%,#797a8055,transparent 40%),radial-gradient(ellipse at 50% 100%,#000,transparent 65%),linear-gradient(135deg,#34353b,#101114 40%,#292a3055 70%,#090a0d);border:1px solid #ffffff30;box-shadow:inset 7px 9px 15px #ffffff14,inset -10px -10px 25px #000,0 35px 90px #000,0 0 80px #ffffff03;overflow:hidden;display:grid;place-items:center}
.sphere:before{content:'';position:absolute;inset:-25%;background:repeating-linear-gradient(90deg,transparent 0px,transparent 14px,#fff1 15px,#0005 16px,transparent 17px);transform:rotate(18deg);mask-image:radial-gradient(ellipse,#0008,transparent 70%)}
.sphere:after{content:'';position:absolute;inset:10px;border:1px solid #ffffff05;border-radius:50%;box-shadow:inset 0 10px 20px #ffffff03}
.sphere .logo-mark{transform:scale(3.9) rotate(18deg);opacity:.85;filter:drop-shadow(0 15px 8px #000b)}
.model-float{position:absolute;left:22px;top:68px;width:187px;padding:15px 16px;border-radius:18px;transform:rotate(-5deg);background:linear-gradient(140deg,#33333870,#17171bbd);backdrop-filter:blur(20px);box-shadow:0 16px 45px #0005;z-index:3}
.model-float .tiny-label{font-size:9px;color:#93939e;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.model-float strong{font-size:15px;letter-spacing:-.4px;font-weight:550}
.model-float p{font-family:var(--mono);font-size:9px;margin-top:5px;color:#868690}
.price-float{position:absolute;top:263px;right:0;padding:18px 20px;width:174px;transform:rotate(6deg);z-index:2;background:linear-gradient(120deg,#2c2d33ae,#141518e6);border-radius:18px;box-shadow:0 12px 40px #0005}
.price-float .eyebrow{font-size:8px;letter-spacing:1px}
.price-float strong{display:block;font-size:37px;line-height:1.3;font-weight:500;letter-spacing:-2px}
.price-float small{font-size:10px;color:#90909a}
.mini-stream{position:absolute;bottom:10px;left:60px;right:62px;padding:13px 16px;border-radius:18px;background:linear-gradient(110deg,#1b1c208e,#111216d9);z-index:4;font-family:var(--mono);font-size:9px}
.mini-stream-head{display:flex;align-items:center;justify-content:space-between;color:#82828c;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #ffffff09}
.mini-stream-code{color:#b9b9c1;display:flex;align-items:center;gap:7px}
.mini-stream-code .muted{color:#656570}
.cursor{display:inline-block;width:5px;height:12px;background:#a8a8ae;animation:pulse 2s infinite}
.orbit-label{position:absolute;top:38px;right:39px;font-size:8px;color:#5a5a64;letter-spacing:1.5px;font-family:var(--mono);writing-mode:vertical-rl}
.compat-strip{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:23px 0;color:#9797a0;gap:20px}
.compat-strip>span{font-size:10px;max-width:155px;line-height:1.6;color:#60606a}
.compat-list{display:flex;align-items:center;gap:52px;font-size:17px;font-weight:550;letter-spacing:-.7px}
.compat-list span{display:flex;align-items:center;gap:8px}
.compat-list .mono{font-size:14px;letter-spacing:-.5px}
.compat-list .icon{opacity:.7}
.section{padding-top:90px;padding-bottom:12px}
.section-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:29px}
.section h2{font-size:31px;font-weight:500;letter-spacing:-1.2px;line-height:1.3;margin-top:12px}
.section-intro>p{color:var(--muted);font-size:12px;max-width:285px;line-height:1.8}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feature{padding:25px 25px 28px;position:relative;overflow:hidden}
.feature-no{position:absolute;right:22px;top:23px;font-family:var(--mono);font-size:10px;color:#4e4e57}
.feature-icon{width:40px;height:40px;background:linear-gradient(135deg,#ffffff0e,#ffffff03);border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;color:#c2c2cc;margin-bottom:24px}
.feature h3{font-size:15px;font-weight:550;letter-spacing:-.25px;margin-bottom:9px}
.feature p{color:#85858f;font-size:11px;line-height:1.9;max-width:270px}
.pricing-panel{display:grid;grid-template-columns:1.08fr 1fr;position:relative;overflow:hidden}
.pricing-panel:before{content:'';position:absolute;left:0;right:30%;top:-140px;height:220px;background:#fff;filter:blur(130px);opacity:.04;pointer-events:none}
.pricing-main{padding:32px 34px;border-right:1px solid var(--line)}
.model-heading{display:flex;align-items:center;gap:13px}
.model-avatar{width:45px;height:45px;display:grid;place-items:center;background:linear-gradient(135deg,#ffffff12,#ffffff02);border:1px solid #ffffff18;border-radius:8px}
.model-avatar .icon{width:24px;height:24px}
.model-heading h3{font-weight:550;font-size:17px;letter-spacing:-.5px}
.model-heading p{font-size:11px;color:var(--muted)}
.model-heading .pill{margin-left:auto;font-size:12px}
.price-line{display:flex;align-items:baseline;gap:10px;margin-top:30px}
.price-line strong{font-size:55px;font-weight:500;letter-spacing:-3px;line-height:1.2}
.price-line span{color:var(--muted);font-size:12px}
.price-breakdown{display:flex;gap:25px;margin:17px 0 27px;color:#9696a0;font-size:10px}
.price-breakdown span{display:flex;align-items:center;gap:5px}
.price-breakdown .icon{width:13px;height:13px}
.calculator{padding:32px 34px;background:#00000018;display:flex;flex-direction:column}
.calculator h3{font-size:14px;font-weight:550}
.calculator p{color:var(--muted);font-size:11px;margin-top:6px}
.range-caption{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:29px}
.range-caption strong{font-family:var(--mono);font-size:12px;font-weight:400}
input[type=range]{accent-color:#dedee4;width:100%;margin:20px 0 8px;cursor:pointer}
.range-labels{display:flex;justify-content:space-between;color:#64646e;font-size:9px;font-family:var(--mono)}
.estimate{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}
.estimate span{font-size:11px;color:var(--muted)}
.estimate strong{font-size:27px;font-weight:500;letter-spacing:-1px}
.code-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center;padding-top:85px}
.code-section h2{font-size:30px;font-weight:500;line-height:1.4;letter-spacing:-1px;margin:10px 0 17px}
.code-section p{font-size:12px;line-height:1.9;color:var(--muted);max-width:330px;margin-bottom:23px}
.code-box{background:#0e0f12;border:1px solid var(--line);border-radius:18px;overflow:hidden;min-width:0}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:9px 15px;border-bottom:1px solid var(--line);color:#93939d;font-family:var(--mono);font-size:10px;background:#ffffff02}
.window-dots{display:flex;gap:4px}
.window-dots i{width:6px;height:6px;background:#ffffff24;border-radius:50%}
.code-box pre{margin:0;padding:24px;font-family:var(--mono);font-size:10px;line-height:2;color:#bcbcc5;overflow:auto;tab-size:4}
.code-box code{font-family:inherit}
.code-box .code-comment{color:#595965}
.faq-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;padding-top:90px;padding-bottom:85px}
.faq-section h2{font-size:30px;font-weight:500;letter-spacing:-1px;margin-top:12px}
.faq-list details{padding:17px 0;border-bottom:1px solid var(--line)}
.faq-list details:first-child{padding-top:0}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-size:12px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';color:#888;font-family:var(--mono)}
.faq-list details[open] summary:after{content:'−'}
.faq-list details p{font-size:11px;line-height:1.9;color:var(--muted);margin-top:13px;max-width:450px}
.landing-footer{padding:25px 0 33px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}
.landing-footer .logo{font-size:15px}
.landing-footer .logo-mark{transform:scale(.8);margin-right:-5px}
.landing-footer p{font-size:10px;color:#64646e}
.landing-footer .footer-links{display:flex;gap:25px;color:#868690;font-size:10px}


.app-shell{min-height:100vh;background:radial-gradient(ellipse 55% 30% at 75% 0,#ffffff04,transparent)}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:224px;padding:29px 18px 20px;border-right:1px solid var(--line);background:#0c0d0ee8;display:flex;flex-direction:column;z-index:15}
.sidebar .logo{margin-left:9px;font-size:20px}
.workspace-label{font-size:9px;font-family:var(--mono);letter-spacing:1.8px;color:#5f5f6b;padding:38px 13px 11px}
.side-nav{display:grid;gap:5px}
.side-nav a{display:flex;gap:12px;align-items:center;padding:11px 16px;font-size:13px;color:#93939e;border:1px solid transparent;border-radius:14px}
.side-nav a.active{background:linear-gradient(100deg,#ffffff0c,#ffffff05);border-color:transparent;color:#f2f2f5}
.side-nav a:hover{background:#ffffff05;color:#fff}
.side-nav .icon{width:17px;height:17px}
.side-nav .nav-tag{font-family:var(--mono);font-size:8px;letter-spacing:.5px;margin-left:auto;color:#73737f;border:1px solid #ffffff13;border-radius:999px;padding:2px 8px}
.sidebar-bottom{margin-top:auto;border-top:none}
.side-promo{margin:25px 4px 20px;padding:16px 14px;border-radius:18px;background:linear-gradient(135deg,#ffffff06,#ffffff01);border:1px solid #ffffff0c}
.side-promo .icon{width:18px;height:18px;margin-bottom:9px;color:#b1b1be}
.side-promo strong{display:block;font-size:11px;font-weight:500}
.side-promo p{font-size:10px;line-height:1.8;color:#6f6f7a;margin:5px 0 12px}
.side-promo .btn{font-size:10px;min-height:30px;padding:6px 10px;width:100%}
.sidebar-status{font-size:9px;color:#7e7e88;display:flex;align-items:center;gap:8px;padding:0 14px}
.app-main{margin-left:224px}
.app-topbar{height:79px;padding:0 39px;border-bottom:1px solid #ffffff0b;display:flex;justify-content:space-between;align-items:center;gap:14px}
.breadcrumb{font-size:11px;color:#62626e;display:flex;align-items:center;gap:13px}
.breadcrumb span:last-child{color:#c6c6cf}
.user-menu{display:flex;align-items:center;gap:13px}
.user-email{font-size:10px;color:#92929d;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#ffffff18,#ffffff04);border:1px solid #ffffff14;display:grid;place-items:center;font-size:10px}
.mobile-toggle{display:none}
.app-content{max-width:1380px;padding:36px 39px 45px;margin:auto}
.page-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}
.page-header h1{font-size:29px;letter-spacing:-1px;line-height:1.3;font-weight:550}
.page-header p{font-size:11px;color:#868691;margin-top:9px}
.page-header .header-actions{display:flex;gap:9px;align-items:center}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:22px}
.metric{padding:21px 22px;min-height:143px;position:relative}
.metric-top{display:flex;align-items:center;justify-content:space-between;color:#898995;font-size:10px;margin-bottom:15px}
.metric-top .icon{width:15px;height:15px;color:#6a6a75}
.metric-value{font-size:29px;line-height:1.25;letter-spacing:-1px;font-weight:500}
.metric-foot{margin-top:9px;font-size:9px;color:#666672}
.metric:first-child{background:radial-gradient(ellipse at 0 0,#ffffff09,transparent),linear-gradient(135deg,#ffffff06,#ffffff02);border-color:#ffffff22}
.dashboard-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-bottom:22px}
.panel{padding:23px 24px;border-radius:var(--radius)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}
.panel-head h2{font-size:13px;font-weight:550}
.panel-head p{font-size:10px;color:var(--muted);margin-top:4px}
.panel-head .pill{font-size:12px;color:#a4a4b2}
.chart{height:162px;display:flex;align-items:stretch;position:relative;padding-top:15px;gap:12px}
.chart-grid{position:absolute;inset:0 0 23px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.chart-grid i{border-top:1px dashed #ffffff09;width:100%}
.chart-bar{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;z-index:1;gap:10px;min-width:0}
.bar-track{height:125px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.bar-fill{max-width:35px;width:65%;min-height:2px;background:linear-gradient(#b6b6bf,#4e4e5999);border-radius:4px 4px 0 0;border:1px solid #ffffff13}
.chart-bar label{font-family:var(--font);font-size:8px;color:#656571}
.chart-empty{position:absolute;inset:0 0 25px;display:grid;place-items:center;font-size:10px;color:#6d6d78;pointer-events:none}
.quickstart{background:radial-gradient(ellipse at 90% 0,#ffffff07,transparent),var(--panel)}
.quickstart p{font-size:11px;line-height:1.9;color:#8b8b96;margin-bottom:17px}
.base-url{display:flex;align-items:center;justify-content:space-between;padding:5px 5px 5px 11px;background:#0003;border:1px solid var(--line);border-radius:8px;gap:8px}
.base-url code{font-family:var(--mono);font-size:9px;color:#c2c2cd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quickstart .btn{margin-top:16px;font-size:10px}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;white-space:nowrap}
th{text-align:left;padding:12px 15px;font-size:9px;font-weight:400;color:#747480;border-top:1px solid #ffffff0b;border-bottom:1px solid #ffffff0b}
td{padding:16px 15px;border-bottom:1px solid #ffffff07;font-size:10px;color:#aaaab5}
tr:last-child td{border-bottom:0}
td:first-child,th:first-child{padding-left:0}
td:last-child,th:last-child{text-align:right;padding-right:0}
.empty-state{padding:43px 20px;text-align:center}
.empty-state .empty-icon{width:42px;height:42px;margin:0 auto 14px;display:grid;place-items:center;background:#ffffff04;border:1px solid var(--line);border-radius:50% !important;color:#8a8a96}
.empty-state h3{font-size:13px;font-weight:500;margin-bottom:6px}
.empty-state p{font-size:11px;color:#797985;max-width:330px;margin:0 auto 18px;line-height:1.8}
.empty-state .btn{font-size:10px}
.status-label{font-family:var(--mono);font-size:13px;color:#c2c2cc;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid #ffffff14;border-radius:6px;background:#ffffff04;line-height:1.4;white-space:nowrap}
.status-label svg{width:13px;height:13px;flex-shrink:0}
.status-label.pending{color:#9898a6;border-style:dashed}
.notice{display:flex;align-items:flex-start;gap:10px;padding:15px 17px;border:1px solid #ffffff12;background:#ffffff03;border-radius:8px;font-size:11px;color:#8e8e9a;line-height:1.8;margin:20px 0}
.notice .icon{width:16px;height:16px;margin-top:3px}
.notice strong{color:#bcbcc7;font-weight:500}
.keys-panel{padding-bottom:7px}
.table-key-name{display:flex;align-items:center;gap:9px;color:#dddde4}
.table-key-name .icon{width:15px;height:15px;color:#777783}
.danger-btn{color:#a4a4af}
.revoked{opacity:.45}
.balance-panel{display:flex;justify-content:space-between;align-items:center;padding:30px;margin-bottom:22px;background:radial-gradient(ellipse at 10% 0,#ffffff0a,transparent),var(--panel)}
.balance-panel .eyebrow{font-size:11px;letter-spacing:1.5px}
.balance-big{font-size:48px;line-height:1.4;letter-spacing:-2px;font-weight:500;margin-top:6px}
.balance-panel p{color:#9da0b3;font-size:15px;line-height:1.5;margin-top:8px}
.billing-columns{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}
.payment-method{display:flex;gap:13px;align-items:center;padding:15px 0}
.payment-method .payment-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid #ffffff14;background:#ffffff07;border-radius:50% !important;font-size:20px}
.payment-method strong{font-size:12px;font-weight:500}
.payment-method p{font-size:10px;color:#7c7c89;margin-top:3px}
.payment-method .pill{margin-left:auto;font-size:12px}
.billing-note{font-size:13.5px;line-height:1.55;color:#9da0b3;padding-top:17px;border-top:1px solid var(--line)}
.locked{max-width:650px;margin:70px auto;padding:60px 40px;text-align:center}
.locked .empty-icon{width:58px;height:58px;margin:0 auto 22px;display:grid;place-items:center;background:#ffffff06;border:1px solid var(--line);border-radius:50% !important}
.locked h1{font-size:27px;font-weight:500;letter-spacing:-.8px}
.locked p{font-size:12px;line-height:1.9;color:var(--muted);max-width:350px;margin:15px auto 25px}
.app-footer{display:flex;justify-content:space-between;gap:20px;margin-top:28px;font-size:14px;color:#565662}
.playground-layout{display:flex;flex-direction:column;width:100%;height:calc(100vh - 238px);min-height:460px}
.chat-panel{display:flex;flex-direction:column;overflow:hidden;min-width:0;width:100%}
.chat-toolbar{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line);font-size:11px;gap:10px}
.chat-toolbar>span{display:flex;gap:8px;align-items:center}
.chat-toolbar .icon{width:15px;height:15px}
.chat-toolbar .pill{font-size:12px}
.chat-messages{flex:1;overflow:auto;min-height:180px;scroll-behavior:auto;padding:22px;overscroll-behavior:contain}
.chat-welcome{height:100%;min-height:215px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.chat-welcome .welcome-orb{width:64px;height:64px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#ffffff12,#ffffff02);box-shadow:inset 0 1px 0 #ffffff15,0 0 60px #ffffff04;border:1px solid #ffffff12;border-radius:50%;margin-bottom:20px}
.chat-welcome .icon{width:28px;height:28px;color:#bdbdc8}
.chat-welcome h2{font-size:19px;font-weight:500;letter-spacing:-.7px}
.chat-welcome p{font-size:11px;color:#7e7e8b;max-width:290px;margin-top:9px;line-height:1.8}
.suggestions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:25px}
.suggestions button{font-size:13px;color:#9898a5;background:#ffffff02;border:1px solid #ffffff0e;padding:8px 16px;border-radius:999px}
.suggestions button:hover{background:#ffffff08;color:#fff}
.composer{padding:13px 16px 11px;border-top:1px solid #ffffff09;background:#ffffff02}
.composer-inner{position:relative;display:flex;align-items:flex-end;gap:10px;padding:12px 16px;background:#08090b88;border:1px solid #ffffff13;border-radius:28px}
.composer textarea{width:100%;min-height:40px;max-height:150px;resize:none;background:none;border:none!important;box-shadow:none!important;color:#dddde6;font-size:11px;line-height:1.8;padding:3px 0}
.composer textarea::placeholder{color:#60606e}
.send-btn{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;flex-shrink:0}
.composer-foot{display:flex;justify-content:space-between;gap:12px;color:#5c5c69;font-size:8px;margin-top:9px;padding:0 3px}
.settings-panel{padding:22px 19px;height:max-content}
.settings-panel h2{font-size:12px;font-weight:500;margin-bottom:25px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field label{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#9393a0}
.field input,.field select,.field textarea{color:#dddde6;background:#0003;border:1px solid #ffffff14;border-radius:8px;padding:10px 12px;width:100%;font-size:11px;min-width:0}
.field textarea{resize:vertical;min-height:115px;line-height:1.8}
.field input[type=range]{padding:0;margin:4px 0;border:none;box-shadow:none}
.field small{font-size:9px;color:#626270}
.settings-price{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:17px;border-top:1px solid var(--line);font-size:9px;color:#797986}
.settings-price strong{color:#c6c6d0;font-size:11px;font-weight:500}
.message{display:flex;gap:13px;margin-bottom:25px}
.message-avatar{width:27px;height:27px;flex-shrink:0;display:grid;place-items:center;background:#ffffff07;border:1px solid #ffffff0e;border-radius:8px;font-size:9px;color:#aaaab6}
.message-avatar .icon{width:15px;height:15px}
.message-body{min-width:0;flex:1}
.message-label{font-size:9px;color:#747481;display:flex;gap:10px;align-items:center;margin:4px 0 8px}
.message-label strong{font-weight:500;color:#bebeca}
.message-text{font-size:12px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;color:#bcbcc8;font-family:var(--font)}
.message.error .message-text{color:#e4e4e9;border-left:2px solid #747480;padding-left:12px}
.stream-dots:after{display:none!important}
.chat-usage{font-family:var(--mono);font-size:8px;color:#63636f;margin-top:8px}
.docs-layout{display:grid;grid-template-columns:1fr 250px;gap:26px}
.doc-content{min-width:0}
.doc-content .panel{margin-bottom:20px}
.doc-content h2{font-size:17px;font-weight:500;letter-spacing:-.4px;margin-bottom:12px}
.doc-content p{font-size:12px;color:var(--muted);line-height:1.9;margin-bottom:18px}
.doc-content .code-box{margin-top:17px}
.doc-content code.inline{font-family:var(--mono);font-size:10px;padding:2px 5px;border-radius:4px;background:#ffffff08;color:#cdcdD7}
.doc-content th,.doc-content td{white-space:normal}
.docs-toc{padding:22px;height:max-content;position:sticky;top:20px}
.docs-toc h3{font-size:10px;color:#70707c;text-transform:uppercase;font-weight:400;letter-spacing:1px;margin-bottom:15px}
.docs-toc a{display:block;color:#9d9daa;font-size:11px;padding:9px 0}
.docs-toc a:hover{color:#fff}
.doc-step{font-family:var(--mono);font-size:10px;color:#70707e;margin-right:10px}


dialog{color:var(--text);background:linear-gradient(140deg,#202125f5,#111216fb);border:1px solid #ffffff24;border-radius:20px !important;padding:30px;width:440px;max-width:calc(100vw - 30px);box-shadow:0 30px 100px #0009, inset 0 1px 0 #ffffff09;backdrop-filter:blur(35px);max-height:90vh;overflow:auto}
dialog::backdrop{background:#050609b3;backdrop-filter:blur(9px)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}
.modal-head h2{font-size:20px;font-weight:550;letter-spacing:-.5px}
.modal-head .icon-btn{margin-right:-9px}
.modal-intro{color:#8f8f9c;font-size:11px;line-height:1.8;margin:-8px 0 23px}
.auth-switch{text-align:center;color:#787886;font-size:11px;margin-top:23px}
.auth-switch button{background:none;border:0;padding:0;color:#ceced9;font-size:11px;text-decoration:underline;text-underline-offset:4px}
.form-error{font-size:13px;color:#f87171;line-height:1.5;margin-bottom:15px;display:none;border-left:3px solid #ef4444;padding:8px 12px;background:rgba(239,68,68,.08);border-radius:12px}
.form-error.visible{display:block}
.auth-fineprint{font-size:9px;color:#626270;text-align:center;line-height:1.7;margin-top:15px}
.secret-key{display:flex;align-items:center;gap:10px;background:#0003;border:1px dashed #ffffff24;border-radius:8px;padding:12px;margin:20px 0}
.secret-key code{font-size:11px;font-family:var(--mono);overflow-wrap:anywhere;min-width:0;flex:1;color:#d4d4df}
.amount-choices{display:flex;gap:8px;margin-bottom:20px}
.amount-choices button{flex:1;padding:8px;background:#ffffff04;border:1px solid #ffffff13;border-radius:999px !important;font-size:11px}
.amount-choices button.selected{border-color:#c3c3ce;background:#ffffff0d}
.invoice-link{margin:18px 0 0}
.invoice-summary{padding:18px;background:#ffffff04;border:1px solid var(--line);border-radius:20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;color:#9999a6;font-size:11px}
.invoice-summary strong{font-size:22px;font-weight:500;color:#eee;letter-spacing:-.5px}
#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#27282feF;border:1px solid #ffffff20;color:#eee;padding:12px 20px;border-radius:8px;font-size:12px;box-shadow:0 8px 35px #0009;transition:.2s;z-index:100;max-width:90vw;text-align:center;backdrop-filter:blur(20px)}
#toast.visible{opacity:1;transform:translate(-50%,0)}
.boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:#777;font-size:15px;background:var(--bg,#0a0c10)}.boot .loader{opacity:0;animation:bootLoaderFade 0.2s 0.25s forwards}@keyframes bootLoaderFade{to{opacity:1}}
.seo-page-h1{font-size:22px;font-weight: 600;color:#f4f4f6;text-align:center;line-height:1.35;max-width:720px;margin:0 auto;padding:0 16px}
.seo-crawler-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;max-width:640px;margin-top:16px;padding:0 16px}
.seo-crawler-nav a{font-size:15px;color:#9aefd2;text-decoration:none;transition:opacity .15s}
.seo-crawler-nav a:hover{text-decoration:underline;opacity:.8}
.seo-static{max-width:760px;margin:0 auto;padding:32px 20px 64px;color:#a9acba;font-size:15px;line-height:1.6}
.seo-static h2{font-size:19px;color:#f4f4f6;margin:28px 0 10px}
.seo-static h3{font-size:16px;color:#e1e4ea;margin:18px 0 6px}
.seo-static ul{margin:0;padding-left:20px}
.seo-static a{color:#9aefd2}
.seo-static summary{cursor:pointer;color:#e1e4ea;font-weight:500;padding:6px 0}
.loader{display:inline-block;width:20px;height:20px;border:1.5px solid #ffffff20;border-top-color:#ddd;border-radius:50%;animation:spin 1s linear infinite}
.loading-inline{padding:70px;text-align:center;color:#777;font-size:12px}
.empty-page-error{padding:35px;border:1px solid var(--line);border-radius:24px;color:#aaa}
.pager{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.pager span{font-size:10px;color:#888;align-self:center}
@keyframes spin{to{transform:rotate(360deg)}
}
@keyframes pulse{0%,100%{opacity:.35}
50%{opacity:1}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.chat-messages{scroll-behavior:auto}
}

@media(min-width:1500px){.hero{min-height:660px}
.hero-art{transform:scale(1.05)}
.container{max-width:1300px}
.hero h1{font-size:78px}
.hero-copy{font-size:15px;max-width:430px}
.app-content{padding-top:42px}
.metrics{gap:18px}
.dashboard-grid{gap:24px}
}

@media(max-width:1150px){.container{padding:0 28px}
.compat-list{gap:28px}
.hero h1{font-size:58px}
.hero-art{transform:scale(.86);transform-origin:center right;margin-left:-60px}
.hero-copy{max-width:330px}
.sidebar{width:197px;padding-left:12px;padding-right:12px}
.app-main{margin-left:197px}
.app-content{padding:28px 25px}
.app-topbar{padding:0 25px}
.metric{padding:18px 16px}
.metric-value{font-size:25px}
.metric-top{font-size:9px}
.dashboard-grid{grid-template-columns:1.2fr 1fr}
.playground-layout{display:flex;flex-direction:column;width:100%}
.code-section,.faq-section{gap:35px}
.billing-columns{grid-template-columns:1fr}
.docs-layout{grid-template-columns:1fr}
.docs-toc{display:none}
}

@media(max-width:900px){.nav-links{gap:20px}
.topnav .btn.subtle{display:none}
.hero h1{font-size:49px;letter-spacing:-2.5px}
.hero-art{transform:scale(.72);margin-left:-105px;transform-origin:70% center}
.hero{min-height:550px;grid-template-columns:1.1fr .9fr}
.hero-copy{font-size:12px;max-width:315px}
.hero-buttons{gap:8px}
.hero-buttons .btn{font-size:10px;padding:12px 15px}
.hero-footnote{gap:10px;font-size:8px}
.compat-strip>span{max-width:120px;font-size:9px}
.compat-list{gap:20px;font-size:14px}
.compat-list .mono{font-size:12px}
.feature{padding:21px}
.feature p{font-size:10px}
.section h2{font-size:27px}
.pricing-main,.calculator{padding:25px}
.model-heading .pill{display:none}
.price-breakdown{flex-direction:column;gap:5px}
.code-box pre{font-size:9px;padding:20px}
.metrics{grid-template-columns:repeat(2,1fr)}
.dashboard-grid{grid-template-columns:1fr}
.page-header h1{font-size:25px}
.page-header .header-actions{gap:6px}
.page-header .btn{font-size:10px;padding:10px 12px}
.playground-layout{grid-template-columns:1fr;height:auto}
.chat-panel{height:570px}
.settings-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.settings-panel h2{grid-column:1/-1}
.settings-price{margin-top:0;grid-column:1/-1}
.settings-panel .field{margin-bottom:15px}
.app-footer{font-size:14px}
.sidebar .logo small{display:none}
.landing-footer .footer-links{gap:12px}
}

@media(max-width:650px){.container{padding:0 22px}
.topnav{height:77px}
.topnav .logo{font-size:18px}
.topnav .logo small{display:none}
.nav-links{display:none}
.nav-actions .btn{min-height:36px;font-size:10px;padding:9px 13px}
.hero{display:flex;flex-direction:column;gap:0;padding-top:40px;min-height:0;align-items:stretch}
.hero-content{padding:0;max-width:440px}
.hero h1{font-size:clamp(42px,14vw,55px);letter-spacing:-3px}
.hero-badge{font-size:8px;margin-bottom:22px}
.hero-copy{max-width:350px;font-size:13px;margin-top:21px}
.hero-buttons .btn{font-size:11px;padding:13px 17px}
.hero-footnote{font-size:9px;margin-top:18px}
.hero-art{height:430px;transform:scale(.88);transform-origin:center center;margin:-13px -23px -25px;max-width:430px;align-self:center;width:calc(100% + 30px)}
.orbital{width:370px;height:370px}
.sphere{width:245px;height:245px}
.model-float{left:10px;top:55px;width:163px}
.model-float strong{font-size:13px}
.price-float{top:225px;right:3px;width:154px}
.price-float strong{font-size:32px}
.mini-stream{left:29px;right:34px;bottom:14px;font-size:8px}
.orbit-label{right:28px}
.compat-strip{flex-direction:column;gap:18px;padding:24px 0}
.compat-strip>span{max-width:none;font-size:9px}
.compat-list{width:100%;justify-content:space-between;gap:10px;font-size:13px}
.compat-list .mono{font-size:10px}
.compat-list .icon{width:14px;height:14px}
.section{padding-top:59px}
.section-intro{display:block;margin-bottom:23px}
.section h2{font-size:28px}
.section-intro>p{margin-top:15px;font-size:11px;max-width:340px}
.feature-grid{grid-template-columns:1fr}
.feature{padding:24px;display:grid;grid-template-columns:40px 1fr;gap:0 18px}
.feature-icon{grid-row:1/3;margin:3px 0 0}
.feature h3{font-size:14px;margin-bottom:8px}
.feature p{font-size:11px;max-width:300px}
.feature-no{display:none}
.pricing-panel{grid-template-columns:1fr}
.pricing-main{border-right:0;border-bottom:1px solid var(--line);padding:27px}
.price-breakdown{flex-direction:row;gap:15px;font-size:9px}
.calculator{padding:26px;min-height:280px}
.estimate{margin-top:24px}
.code-section,.faq-section{grid-template-columns:1fr;gap:26px;padding-top:60px}
.code-section h2,.faq-section h2{font-size:28px}
.code-section p{max-width:100%}
.code-box pre{font-size:9px;padding:19px}
.faq-section{padding-bottom:48px}
.landing-footer{flex-wrap:wrap;padding:24px 0}
.landing-footer p{width:100%;order:3;font-size:9px}
.landing-footer .footer-links{font-size:9px}
.sidebar{transform:translateX(-100%);transition:transform .2s;width:224px;background:#0e0f12;box-shadow:30px 0 100px #0006}
.sidebar.open{transform:translateX(0)}
.app-main{margin-left:0}
.app-topbar{height:64px;padding:0 20px}
.mobile-toggle{display:flex}
.breadcrumb{font-size:10px;gap:9px;margin-right:auto}
.breadcrumb>span:first-child,.breadcrumb .crumb-slash{display:none}
.user-email{display:none}
.user-menu{gap:6px}
.app-content{padding:26px 20px}
.page-header{align-items:flex-start;gap:14px;margin-bottom:24px}
.page-header h1{font-size:25px}
.page-header p{font-size:10px;max-width:210px;line-height:1.8}
.page-header .header-actions>.pill{display:none}
.page-header .btn{font-size:10px;padding:9px 11px;min-height:35px;gap:6px}
.page-header .btn .icon{width:14px;height:14px}
.metrics{gap:10px;margin-bottom:16px}
.metric{padding:18px;min-height:129px;border-radius:20px}
.metric-value{font-size:26px}
.metric-top{font-size:9px;gap:6px}
.metric-top .icon{width:13px;height:13px}
.metric-foot{font-size:8px}
.panel{padding:24px;border-radius:24px}
.panel-head{gap:10px}
.panel-head h2{font-size:12px}
.dashboard-grid{gap:16px;margin-bottom:16px}
.table-wrap{margin:0 -5px}
th,td{font-size:9px;padding:13px 12px}
.empty-state{padding:32px 10px}
.app-footer{flex-direction:column;gap:6px}
.balance-panel{padding:23px;flex-wrap:wrap;gap:25px}
.balance-big{font-size:43px}
.balance-panel>.btn{width:100%}
.billing-columns{gap:16px}
.payment-method{gap:10px}
.payment-method .pill{font-size:7px}
.locked{margin:25px 0;padding:45px 23px}
.locked h1{font-size:24px}
.locked p{font-size:11px}
.playground-layout{min-height:0;gap:16px}
.chat-panel{height:calc(100dvh - 218px);min-height:470px;border-radius:24px}
.chat-toolbar{padding:11px 15px;font-size:10px}
.chat-messages{padding:20px 16px}
.chat-welcome h2{font-size:19px}
.suggestions{gap:7px}
.suggestions button{font-size:9px}
.composer{padding:10px}
.composer-foot{font-size:7px}
.settings-panel{padding:20px}
.settings-panel .field label{font-size:9px}
.message{gap:10px}
.message-text{font-size:11px}
.settings-panel .field:has(textarea){grid-column:1/-1}
.docs-layout{display:block}
.doc-content .panel{padding:21px 18px}
.doc-content h2{font-size:16px}
.doc-content p{font-size:11px}
.doc-content .code-box pre{font-size:8px}
.notice{font-size:10px;padding:13px}
.modal-head h2{font-size:19px}
dialog{padding:26px}
.app-topbar .btn{font-size:10px;min-height:33px;padding:8px 12px}
}


/* Live CheapKeyAI catalog */
.catalog-summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 26px;margin-bottom:24px}
.catalog-summary p{font-size:12px;color:#a5a5b1;margin-top:10px}
.catalog-summary>span{font-size:9px;color:#777783;white-space:nowrap}
.catalog-filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:15px}
.catalog-filters .field{margin-bottom:16px}
.catalog-result-head{display:flex;justify-content:space-between;gap:16px;font-size:10px;color:#777784;margin:5px 0 18px}
.model-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.catalog-card{padding:24px;min-width:0;border-radius:24px;display:flex;flex-direction:column;transition:border-color .2s}
.catalog-card:hover{border-color:#ffffff28}
.catalog-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:22px}
.catalog-card .pill{font-size:9px}
.model-type{font-size:9px;color:#72727e}
.catalog-card h2{font-size:16px;line-height:1.5;letter-spacing:-.3px;font-weight:550;overflow-wrap:anywhere}
.catalog-card>code{font-size:9px;font-family:var(--mono);color:#6e6e7c;margin-top:7px;overflow-wrap:anywhere}
.catalog-card-price{display:flex;flex-direction:column;gap:8px;margin:22px 0;color:#8e8e9c;font-size:10px;flex:1;justify-content:flex-start}
.catalog-card-price>span{display:flex;align-items:center;justify-content:space-between;gap:10px}
.catalog-card-price strong{font-size:15px;font-weight:500;color:#dcdce5;font-family:var(--mono);letter-spacing:-.5px}
.catalog-card-bottom{padding-top:16px;border-top:none;display:flex;flex-direction:column;gap:13px;margin-top:auto}
.catalog-card-bottom .btn{align-self:flex-start;font-size:9px}
.model-availability{font-size:8px;color:#747481}
.chat-model-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-toolbar>span:first-child{min-width:0}
.chat-toolbar>span:last-child{white-space:nowrap}
.settings-price{gap:14px;align-items:flex-start}
.settings-price strong{text-align:right;line-height:1.8;font-size:10px;max-width:160px}
.astra-output{font-size:11px;color:#a5a5b0;margin-top:10px}
.inline-link{text-decoration:underline;text-underline-offset:4px;color:#e0e0e9}
.model-search input{font-size:12px}

@media(max-width:1150px){.model-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.catalog-card{padding:20px}
.catalog-summary{flex-direction:column;align-items:flex-start;gap:13px}
.chat-model-name{max-width:155px}
}

@media(max-width:650px){.catalog-filters{grid-template-columns:1fr 1fr;gap:0 12px}
.model-search{grid-column:1/-1}
.model-cards{grid-template-columns:1fr}
.catalog-card{padding:22px}
.catalog-card-bottom{flex-direction:row;align-items:center;justify-content:space-between}
.catalog-result-head{font-size:8px;align-items:center}
.catalog-result-head span:last-child{max-width:180px;text-align:right}
.catalog-summary{padding:21px}
.catalog-summary p{font-size:11px}
.chat-toolbar>span:last-child{display:none}
.chat-model-name{max-width:165px}
.settings-panel .field:has(#model-select){grid-column:1/-1}
.catalog-card-price strong{font-size:17px}
}


/* ==========================================================================
   Minimalist Maintenance Mode Screen (in the style of .boot)
   ========================================================================== */
.maint-screen-wrap {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg, #090a0b);
  color: #f4f4f6;
  overflow-x: hidden;
  box-sizing: border-box;
}

.maint-top-bar {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
}

.maint-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  color: #f4f4f6;
}

.maint-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.maint-boot-center {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  max-width: 780px;
  margin: 0 auto;
  box-sizing: border-box;
  gap: 18px;
}

.maint-boot-loader {
  width: 26px !important;
  height: 26px !important;
  border-width: 2px !important;
  margin-bottom: 2px;
}

.maint-boot-h1 {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600;
  color: #f4f4f6;
  text-align: center;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.02em;
}

.maint-boot-message {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #a0a4b4;
  max-width: 620px;
  white-space: pre-line;
}

.maint-boot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  font-size: 15px;
  color: #7b8092;
  margin: 4px 0 8px;
}

.maint-boot-meta strong {
  color: #e2e4ec;
  font-weight: 600;
}

.maint-meta-sep {
  opacity: 0.35;
}

.maint-boot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.maint-boot-actions .btn {
  min-height: 46px;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 999px;
}

.maint-boot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  max-width: 720px;
  margin-top: 24px;
  padding: 0 16px;
}

.maint-boot-nav a {
  font-size: 15px;
  color: #9aefd2;
  text-decoration: none;
  transition: opacity 0.15s;
}

.maint-boot-nav a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

.maint-boot-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 32px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15px;
  color: #7b8092;
  border-top: 1px solid var(--line);
  box-sizing: border-box;
}

.maint-preview-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(9, 10, 11, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 10px 24px;
  width: 100%;
  box-sizing: border-box;
}

.maint-preview-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 15px;
  color: #eaeaec;
}

.maint-preview-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 15px;
  font-weight: 600;
  color: #9aefd2;
}

@media (max-width: 680px) {
  .maint-top-bar,
  .maint-boot-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
  .maint-boot-center {
    padding: 32px 16px;
  }
  .maint-boot-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .maint-boot-footer {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* SEO Focused Model Card on /models/{slug} */
.seo-focused-model-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.seo-focused-model-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.seo-focused-model-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seo-focused-model-h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: #f4f4f6;
}

.seo-focused-model-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.seo-focused-model-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #d4d4e0;
}

.seo-focused-model-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 15px;
}

.seo-focused-price-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  color: #eaeaec;
}

.seo-focused-price-pill strong {
  color: #9aefd2;
  font-weight: 600;
}

/* Capability & Context Badges in Catalog */
.model-cap-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0;
}

.cap-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #c4c4d6;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
}

.catalog-capability-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.catalog-capability-bar .capability-chip {
  min-height: 38px;
  padding: 6px 14px;
  font-size: 15px;
  border-radius: 8px;
}

/* Playground Compare Mode & Web Search Button */
.chat-compare-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chat-compare-select {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 15px;
  color: #f4f4f6;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
}

#web-search-toggle.ghost.small {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 15px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: #c4c4d6;
}

#web-search-toggle.ghost.small.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  color: #f4f4f6;
}

.message.compare-pair {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.compare-model-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #e2e2ea;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Message Actions & Code Artifact Preview & Syntax Highlighting */
.message-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.msg-action-btn {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 15px;
  border-radius: 8px;
}

.answer-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.answer-code-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.code-preview-btn {
  min-height: 38px;
  padding: 4px 12px;
  font-size: 15px;
  border-radius: 8px;
}

.code-artifact-preview {
  display: block;
  width: 100%;
  min-height: 280px;
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.code-artifact-preview[hidden] {
  display: none !important;
}

.tok-kw {
  color: #9aefd2;
  font-weight: 600;
}

.tok-str {
  color: #e2e2ea;
}

.tok-com {
  color: #9da0b3;
  font-style: italic;
}

.tok-num {
  color: #f4f4f6;
}

.math-block {
  display: block;
  margin: 10px 0;
  padding: 10px 14px;
  font-family: var(--mono, monospace);
  font-size: 15px;
  color: #f4f4f6;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.math-inline {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--mono, monospace);
  font-size: 15px;
  color: #f4f4f6;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

/* Dashboard Breakdown Grid & Chart Controls */
.dashboard-chart-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chart-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dashboard-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

/* Light Theme Overrides (Strictly Neutral per AGENTS.md) */
html[data-theme="light"] .seo-focused-model-card,
.theme-light .seo-focused-model-card {
  background: #ffffff;
  border-color: #dce1e8;
}

html[data-theme="light"] .seo-focused-model-h1,
.theme-light .seo-focused-model-h1 {
  color: #11141a;
}

html[data-theme="light"] .seo-focused-model-desc,
.theme-light .seo-focused-model-desc {
  color: #333742;
}

html[data-theme="light"] .seo-focused-price-pill,
html[data-theme="light"] .cap-badge,
html[data-theme="light"] .chat-compare-select,
html[data-theme="light"] #web-search-toggle.ghost.small,
html[data-theme="light"] .compare-model-badge,
html[data-theme="light"] .math-block,
html[data-theme="light"] .math-inline,
.theme-light .seo-focused-price-pill,
.theme-light .cap-badge,
.theme-light .chat-compare-select,
.theme-light #web-search-toggle.ghost.small,
.theme-light .compare-model-badge,
.theme-light .math-block,
.theme-light .math-inline {
  background: #f8f9fa;
  border-color: #dce1e8;
  color: #11141a;
}

html[data-theme="light"] .seo-focused-price-pill strong,
html[data-theme="light"] .tok-kw,
.theme-light .seo-focused-price-pill strong,
.theme-light .tok-kw {
  color: #11141a;
}

html[data-theme="light"] .tok-str,
html[data-theme="light"] .tok-num,
.theme-light .tok-str,
.theme-light .tok-num {
  color: #333742;
}

html[data-theme="light"] .tok-com,
.theme-light .tok-com {
  color: #5e6573;
}

/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 440px;
  background: rgba(18, 20, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 18px;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cookie-banner-content {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cookie-banner-content p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #c4c7d4;
}
.cookie-banner-content a {
  color: #9aefd2;
  text-decoration: underline;
}
@media (max-width: 600px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* Modal Invoice Badge Spacing (Screen 4 fix) */
dialog .base-url,
.invoice-dialog .base-url {
  margin-bottom: 14px !important;
  border-radius: 12px !important;
}
dialog .invoice-summary,
.invoice-dialog .invoice-summary {
  margin-top: 14px !important;
  margin-bottom: 20px !important;
  border-radius: 16px !important;
}

/* Modern Rounded Table Design (Screen 3 fix) */
.table-wrap {
  border-radius: 18px !important;
  overflow-x: auto;
}
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
}
.table-wrap th:first-child,
table thead tr:first-child th:first-child {
  border-top-left-radius: 16px !important;
}
.table-wrap th:last-child,
table thead tr:first-child th:last-child {
  border-top-right-radius: 16px !important;
}
.table-wrap tr:last-child td:first-child,
table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 16px !important;
}
.table-wrap tr:last-child td:last-child,
table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px !important;
}

/* Unified Meta Legal Disclaimers (Screen 2 fix) */
.footer-legal-notice {
  width: 100%;
  max-width: 1200px;
  margin: 16px auto 0 !important;
  padding: 0 20px 10px !important;
  border: none !important;
  border-top: none !important;
  box-sizing: border-box;
  text-align: center !important;
}
.meta-disclaimer-text {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: #7e8299 !important;
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 900px;
}




/* ============================================================
   Affiliate / Partner Program Dashboard (Tokvian Native Style)
   ============================================================ */
.affiliate-workspace {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.affiliate-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.affiliate-stat-card {
  padding: 16px 20px;
  border-radius: 20px !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.affiliate-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.affiliate-stat-label {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--muted, #96969e) !important;
  line-height: 1.2 !important;
}
.affiliate-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted, #96969e);
  flex-shrink: 0;
}
.affiliate-stat-icon svg,
.affiliate-stat-icon .icon {
  width: 16px;
  height: 16px;
}
.affiliate-stat-val {
  font-size: 26px !important;
  font-weight: 400 !important;
  font-family: var(--font) !important;
  color: var(--text, #f3f3f4) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
.affiliate-link-card {
  padding: 26px 28px;
  border-radius: 20px !important;
}
.affiliate-link-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.affiliate-link-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px !important;
  color: var(--text, #fff);
  font-family: var(--font);
  font-size: 15px;
}
.affiliate-copy-action {
  height: 48px;
  padding: 0 24px;
  border-radius: 14px !important;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.affiliate-copy-action svg,
.affiliate-copy-action .icon {
  width: 17px;
  height: 17px;
}
.affiliate-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.timeline-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13.5px;
  font-weight: 400 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text, #fff);
  flex-shrink: 0;
  margin-top: 1px;
}
.timeline-content strong {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--text, #fff);
}
.timeline-content p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted, #96969e);
  line-height: 1.4;
}
.affiliate-tables-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.affiliate-subpanel {
  padding: 22px 24px;
  border-radius: 20px !important;
}
.affiliate-empty-box {
  padding: 0 !important;
  margin: 0 !important;
  text-align: left;
  color: var(--muted, #96969e);
  font-size: 14.5px;
  line-height: 1.5;
}
.affiliate-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 14px;
}
.affiliate-table th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted, #96969e);
  border-bottom: 1px solid var(--line);
}
.affiliate-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.profit-accent {
  color: #10b981 !important;
  font-weight: 600 !important;
}
.affiliate-promo-card {
  padding: 48px 24px;
  text-align: center;
  border-radius: 20px !important;
}
.affiliate-promo-card h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}
.affiliate-promo-card p {
  color: var(--muted, #96969e);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
  font-size: 15px;
}
@media (max-width: 900px) {
  .affiliate-tables-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .affiliate-stats-grid {
    grid-template-columns: 1fr;
  }
  .affiliate-timeline {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .affiliate-link-row {
    flex-direction: column;
  }
  .affiliate-copy-action {
    width: 100%;
    justify-content: center;
  }
}


.affiliate-link-card .panel-head {
  margin-bottom: 8px !important;
}
.affiliate-subpanel .panel-head {
  margin-bottom: 6px !important;
}
.affiliate-link-card h2,
.affiliate-subpanel h2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.affiliate-link-card .section-description {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--muted, #96969e) !important;
  margin: 4px 0 14px !important;
}
.affiliate-link-card .affiliate-link-row {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
.affiliate-empty-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  margin-bottom: 4px !important;
  color: var(--muted, #96969e) !important;
}
.affiliate-empty-counter strong,
.affiliate-empty-counter .counter-num {
  font-weight: 400 !important;
  color: var(--text, #f3f3f4) !important;
}