/* Apira's shared visual language for the API site, cabinet and admin. */
:root {
  --paper:#f8f7f3;
  --white:#fff;
  --ink:#292735;
  --muted:#797584;
  --line:#e6dfed;
  --accent:#7450ed;
  --accent-soft:#eee8ff;
  --navy:#292735;
  --radius:18px;
  --green:#2b8065;
  --green-soft:#e8f5ee;
  --yellow:#926c27;
  --yellow-soft:#fbf4df;
  --red:#b14457;
  --red-soft:#fcedf0;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
}
html{scroll-behavior:smooth}
body{background-color:var(--paper);background-image:linear-gradient(#ad95ce1a 1px,transparent 1px),linear-gradient(90deg,#ad95ce1a 1px,transparent 1px);background-size:48px 48px;color:var(--ink)}
a,button{transition:color .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
a:hover,.link-button:hover{color:var(--accent)}
:focus-visible{outline:3px solid #bca6ff;outline-offset:3px}
.button{border-radius:11px;font-weight:650}
.button.primary,.topup-cta,.topup-hero{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;box-shadow:0 7px 18px #7650ed20!important}
.button.primary:hover,.topup-cta:hover,.topup-hero:hover{background:#6540d9!important;border-color:#6540d9!important;box-shadow:0 10px 23px #7650ed2c!important;transform:translateY(-1px)}
.button.subtle{border-color:var(--line);background:#fff;color:var(--ink)}
.button.subtle:hover{border-color:#bca6ed;background:#f8f5ff;color:var(--accent)}
.link-button{color:var(--accent)}
.eyebrow{font-family:Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.13em;color:var(--accent);font-size:11px;font-weight:750}
.topbar{height:76px;max-width:1480px;margin:auto;padding:0 clamp(20px,4vw,52px);gap:48px;background:rgba(248,247,243,.91);backdrop-filter:blur(18px);border-bottom-color:var(--line);box-shadow:none}
.brand{gap:10px;font-size:29px;font-weight:800;letter-spacing:-.055em;white-space:nowrap}
.brand>span:last-child>span{color:var(--accent)}
.brand .brand-mark{position:relative;display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:var(--accent);color:#fff;font-size:29px;font-weight:750;line-height:1;letter-spacing:-.09em;box-shadow:inset 0 1px 0 #fff8,0 5px 13px #7250d82b}
.brand .brand-mark span{position:absolute;right:2px;top:-5px;color:white;font-size:12px;letter-spacing:0}
.brand .brand-dot{color:var(--accent)}
.brand small{align-self:flex-end;margin:0 0 3px 3px;color:#827797;font-size:11px;font-weight:700;letter-spacing:.02em}
.topnav{gap:25px;align-items:center}
.topnav a{font-weight:600;color:#605b6b}
.topnav a:hover{color:var(--accent)}
.nav-chat{display:inline-flex;align-items:center;gap:6px}
.nav-chat::before{content:"✦";color:var(--accent)}
.topbar-actions{gap:10px}
.account-balance{border-radius:999px;color:#6e6384!important;background:#fff}
.account-balance strong{color:var(--accent)}
.topbar-actions #accountButton{border-radius:11px}

/* Public API pages now share the warm paper, generous whitespace and soft depth. */
.public-page{min-height:calc(100vh - 76px);padding-inline:clamp(20px,5vw,72px)}
.landing-page{background:transparent}
.landing-page.public-page{padding-top:clamp(52px,8vw,116px)}
.hero{max-width:1240px;gap:clamp(28px,6vw,92px)}
.hero-copy h1,.catalog-intro h1,.docs-content h1{color:var(--ink)}
.hero-copy h1 span,.catalog-intro h1 span{color:var(--accent)}
.hero-lead,.intro-copy,.docs-content p{color:#6c6675}
.hero-points li{background:#fff9;border-color:var(--line);color:#625c6d}
.hero-points li::before{color:var(--accent)}
.hero-card{border-color:#ded0f6;border-radius:24px;background:linear-gradient(145deg,#fff 5%,#f2ebff 100%);color:var(--ink);box-shadow:0 28px 60px #6b50a319,0 4px 12px #6b50a30b}
.hero-card::after{background:radial-gradient(circle,#d9c9fd 5%,#eae0ff 48%,transparent 72%);filter:none;right:-70px;top:-105px;width:310px;height:310px}
.hero-card-label{color:var(--accent)}
.hero-flow{color:#6d627d}
.hero-flow strong{border-color:#d8c8f4;background:#fff;color:var(--accent)}
.hero-flow b,.hero-card>a span{color:var(--accent)}
.hero-card>p:not(.hero-card-label){color:#655e70}
.hero-card>a{color:var(--accent)}
.landing-section article,.metrics,.catalog-panel,.faq-list details,.audience-grid article,.benefits-grid article{border-color:var(--line);border-radius:18px;background:#fffdfd;box-shadow:0 12px 34px #69538c0a}
.benefit-number{color:var(--accent)}
.metrics{overflow:hidden}
.metrics strong{font-family:Inter,"Segoe UI",Arial,sans-serif;letter-spacing:-.05em}
.catalog-panel{box-shadow:0 18px 45px #7561970d}
.catalog-facets,.filters,.catalog-results{border-color:var(--line)}
.search{background:#f9f7fc;border-color:var(--line)}
.search:focus-within{border-color:#ad96ef;box-shadow:0 0 0 3px #7450ed13}
.chip{color:#625c6d;border-color:var(--line)}
.chip.active{background:var(--accent);border-color:var(--accent)}
.docs-menu a:hover,.docs-menu a.active{background:var(--accent-soft);color:var(--accent)}
.docs-content pre,.surface pre{background:#2e2940;color:#f2eaff;border-radius:15px}
.status-banner{border-color:#c8dfd1}
.topup-banner{background:linear-gradient(105deg,#f5efff,#fff 85%);border-color:#ddcdfa;border-radius:18px}
.topup-banner span{color:#6d6578}

/* Cabinet and admin use the same light workspace; no legacy dark rail. */
.app-page{grid-template-columns:252px minmax(0,1fr);min-height:calc(100vh - 76px);max-width:1660px;margin:auto;border-left:1px solid var(--line);border-right:1px solid var(--line);background:rgba(255,255,255,.32)}
.sidebar,.sidebar.dark{top:76px;height:calc(100vh - 76px);min-height:0;overflow-y:auto;padding:22px 15px 20px;border-right:1px solid var(--line);background:rgba(250,248,253,.89);color:var(--ink)}
.sidebar-intro{padding:8px 12px 20px;margin-bottom:7px;border-bottom:1px solid var(--line)}
.sidebar-mark{display:grid;place-items:center;width:36px;height:36px;margin-bottom:16px;border-radius:11px;background:var(--accent-soft);color:var(--accent);font-size:21px}
.sidebar-intro .eyebrow{margin-bottom:7px}
.sidebar h2{margin:0;font-size:20px;letter-spacing:-.04em}
.sidebar-intro>p:last-child{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.sidebar nav{gap:3px}
.sidebar-nav-label{padding:16px 13px 7px;color:#9a8fa8;font-size:10px;font-weight:750;letter-spacing:.11em;text-transform:uppercase}
.side-link,.dark .side-link{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;color:#625d6b;font-size:13px;font-weight:610;line-height:1.35}
.side-link>span{display:inline-grid;place-items:center;width:19px;color:#9a88bb;font-size:17px;font-weight:500}
.side-link:hover,.dark .side-link:hover{background:#f4efff;color:var(--accent)}
.side-link.active,.dark .side-link.active{background:var(--accent-soft);color:#6241ce;font-weight:750;box-shadow:inset 0 0 0 1px #d8c9fa}
.side-link.active>span{color:var(--accent)}
.billing-link,.billing-link.active{background:transparent!important;color:#625d6b!important;font-weight:610!important}
.billing-link::before{display:none}
.billing-link:hover,.billing-link.active{background:var(--accent-soft)!important;color:#6241ce!important}
.sidebar-footer,.dark .sidebar-footer{border-color:var(--line);color:#817a8b}
.sidebar-footer .link-button{align-self:flex-start;font-size:12px}
.developer-nav{margin:12px 0 4px;border:1px solid #e3d9f2;border-radius:13px;background:#fffafd;overflow:hidden}
.developer-nav summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:45px;padding:0 13px;color:#574b69;font-size:13px;font-weight:740;cursor:pointer}
.developer-nav summary::-webkit-details-marker{display:none}
.developer-nav summary::after{content:'⌄';color:var(--accent);font-size:17px;transition:transform .18s}
.developer-nav[open] summary::after{transform:rotate(180deg)}
.developer-nav[open] summary{border-bottom:1px solid #eadff6;color:var(--accent)}
.developer-nav>div{padding:6px}
.developer-nav .side-link{width:100%;font-size:12px}
.workspace{position:relative;padding:34px clamp(20px,3.6vw,58px) 80px;min-width:0}
.workspace::before{content:"";position:absolute;right:6%;top:0;width:320px;height:180px;border-radius:50%;background:radial-gradient(ellipse,#ebe2fc 0,transparent 70%);filter:blur(15px);pointer-events:none;opacity:.62}
.workspace>*{position:relative}
.workspace-head{align-items:center;min-height:82px;margin-bottom:24px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.workspace-head .eyebrow{margin-bottom:7px}
.workspace-head h1{font-size:clamp(30px,3vw,42px);letter-spacing:-.055em}
.workspace-head .button{white-space:nowrap}
.stat-grid{gap:14px;margin-bottom:18px}
.stat{min-width:0;padding:20px 22px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(155deg,#fff 58%,#fbf9ff);box-shadow:0 12px 30px #68518b0a}
.stat span{margin-bottom:13px;color:#827a90;font-size:12px}
.stat strong{color:var(--ink);font:750 clamp(22px,2vw,29px)/1.1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:-.045em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat:first-child{background:linear-gradient(145deg,#fff,#f3edff);border-color:#ddcff8}
.stat:first-child strong{color:#6241ce}
.client-overview-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:170px;margin-bottom:18px;padding:30px clamp(23px,3vw,38px);border:1px solid #dacbf6;border-radius:21px;background:radial-gradient(circle at 86% 16%,#e8dcff 0,transparent 35%),linear-gradient(125deg,#fff,#f6f0ff);box-shadow:0 16px 38px #7450ed12;overflow:hidden}
.client-overview-hero .eyebrow{margin-bottom:10px}
.client-overview-hero h2{margin:0;color:var(--ink);font-size:clamp(25px,2.6vw,38px);line-height:1.05;letter-spacing:-.055em}
.client-overview-hero h2 span{color:var(--accent)}
.client-overview-hero p:last-child{max-width:580px;margin:13px 0 0;color:#71687e;font-size:14px;line-height:1.55}
.client-overview-hero .button{display:inline-flex;margin-top:19px;text-decoration:none}
.client-learning{margin-bottom:18px;background:linear-gradient(135deg,#fff,#fbf8ff)}
.client-learning .eyebrow{margin-bottom:6px}
.client-learning h2{margin:0;font-size:21px}
.learning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.learning-grid a{display:flex;flex-direction:column;gap:9px;min-height:130px;padding:19px;border:1px solid #e5d9f4;border-radius:14px;background:#fff;color:var(--ink);text-decoration:none;transition:transform .18s,border-color .18s}
.learning-grid a:hover{transform:translateY(-2px);border-color:#ab91ef}
.learning-grid span{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.1em}
.learning-grid strong{font-size:15px}
.learning-grid small{color:#7d7389;font-size:12px;line-height:1.45}
.client-overview-links .client-quickstart,.client-overview-links .client-control{min-height:220px}
.apira-balance-panel{display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(115deg,#fff,#f6efff)}
.apira-balance-panel h2{font-size:25px}
.apira-balance-panel strong{display:block;color:#6542d4;font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.05em}
.apira-balance-panel p{max-width:500px;font-size:13px}
.apira-balance-actions{max-width:330px}
.apira-balance-actions .button{display:inline-flex;margin-top:5px;text-decoration:none}
.client-overview-spark{display:grid;place-items:center;flex:0 0 auto;width:120px;height:120px;border:1px solid #ddcefb;border-radius:28px;background:#fff9;color:var(--accent);font-size:70px;line-height:1;transform:rotate(-8deg);box-shadow:0 18px 30px #7450ed12}
.cabinet-topup[hidden]{display:none!important}
.client-quickstart,.client-control{min-height:250px}
.client-quickstart .section-head{align-items:end}
.client-quickstart .eyebrow,.client-control .eyebrow{margin-bottom:7px}
.client-quickstart h2,.client-control h2{margin:0;font-size:21px}
.client-steps{display:flex;gap:26px;list-style:none;counter-reset:client-steps;padding:0!important;margin:19px 0!important}
.client-steps li{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;padding-left:38px;color:var(--ink);counter-increment:client-steps}
.client-steps li::before{content:counter(client-steps,decimal-leading-zero);position:absolute;left:0;top:0;display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:750}
.client-steps strong{font-size:13px}
.client-steps span{color:var(--muted);font-size:12px;line-height:1.45}
.client-endpoint{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px 10px 15px;border:1px solid #e3d9ef;border-radius:11px;background:#f9f6fe}
.client-endpoint code{color:#6042b9;font-size:13px;overflow-wrap:anywhere}
.client-control{display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(145deg,#fff,#faf8ff)}
.client-control p:not(.eyebrow){max-width:360px;margin:14px 0 20px;font-size:13px;line-height:1.65}
.client-control>a{margin-top:auto;color:var(--accent);font-size:13px;font-weight:700;text-decoration:none}
.client-quickstart>a{color:var(--accent);font-size:13px;font-weight:700;text-decoration:none}
.developer-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.developer-actions .button{text-decoration:none}
.usage-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:780px}
.surface{padding:24px;border:1px solid var(--line);border-radius:18px;background:#fffdfd;box-shadow:0 13px 35px #68518b0b}
.surface h2{font-size:18px;letter-spacing:-.025em}
.surface p,.surface li{color:#6e6777}
.surface a,.section-head a{color:var(--accent)}
.section-head{align-items:flex-start}
.split-grid{gap:16px}
.notice{background:#f6f0ff;border-color:#e1d3fa;color:#665381;border-radius:12px}
.muted{color:var(--muted)}
.row-actions{flex-wrap:wrap}
.data-table{font-size:13px}
.data-table th{padding:13px 16px;background:#f8f5fc;border-color:var(--line);color:#7e728e;font:700 10px/1.2 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.08em}
.data-table td{border-color:#eee9f2}
.data-table tbody tr:hover{background:#faf7ff}
.badge{border-radius:999px;text-transform:none}
.mono{color:#665f70}
.payment-surface{background:linear-gradient(120deg,#fff,#faf6ff)}
.payment-surface h2{font-size:28px}
.topup-input{border-color:var(--line);border-radius:12px}
.topup-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #7450ed15}
.dashboard-toolbar{gap:12px}
.dashboard-toolbar h2{letter-spacing:-.03em}
.period-switch{border-color:var(--line);background:#fff;border-radius:12px}
.period-switch button.active{background:var(--accent)}
.period-switch button:hover{background:var(--accent-soft);color:var(--accent)}
.chart-legend .revenue{color:#7450ed}
.chart-legend .cost{color:#d28b78}
.chart-legend .profit{color:#4b9b81}
.dashboard-chart .chart-line.revenue,.dashboard-chart .chart-point.revenue{stroke:#7450ed}
.dashboard-chart .chart-line.cost,.dashboard-chart .chart-point.cost{stroke:#d28b78}
.dashboard-chart .chart-line.profit,.dashboard-chart .chart-point.profit{stroke:#4b9b81}
.dashboard-chart .chart-grid{stroke:#eee7f2}
.dashboard-stat.positive{border-color:#cae5d6;background:linear-gradient(145deg,#fff,#f2fbf5)}
.dashboard-stat.negative{border-color:#efcbd4;background:linear-gradient(145deg,#fff,#fff5f7)}
.dashboard-models,.dashboard-chart-card{margin-top:18px}
.apira-generation-report{border-color:#d8c9f7;background:linear-gradient(155deg,#fff,#fbf8ff);box-shadow:0 18px 42px #7450ed12}
.apira-generation-report h2{font-size:23px}
.apira-report-filters input,.apira-report-filters select{border-color:var(--line);border-radius:10px;background:#fff}
.apira-report-table{border-color:var(--line)}

/* Forms, dialogs and the older chat shell follow the same palette. */
.auth-page{background:transparent}
.auth-card{border-color:var(--line);border-radius:22px;box-shadow:0 28px 70px #684f951c;background:#fffdfd}
.auth-card h1{letter-spacing:-.055em}
.auth-card input,.dialog-body input,.dialog-body select,.dialog-body textarea,.app-page input,.app-page select,.app-page textarea{border-color:var(--line);border-radius:10px;color:var(--ink)}
.auth-card input:focus,.dialog-body input:focus,.dialog-body select:focus,.dialog-body textarea:focus,.app-page input:focus,.app-page select:focus,.app-page textarea:focus{border-color:#ad96ef;box-shadow:0 0 0 3px #7450ed17;outline:none}
dialog{border-color:#dfd5ed;border-radius:18px;box-shadow:0 24px 90px #2927352c}
dialog::backdrop{background:#27203288}
.dialog-head{border-color:var(--line)}
.chat-page{background:transparent}
.chat-rail{border-color:var(--line);background:#faf8fd}
.chat-shell,.chat-head,.chat-stage{border-color:var(--line)}
.chat-composer{border-color:#d9cdec;box-shadow:0 14px 34px #6b549016}
.chat-composer:focus-within{border-color:#ad96ef;box-shadow:0 0 0 3px #7450ed12,0 14px 34px #6b549016}
.send-button,.new-chat-button{background:var(--accent);color:#fff}
.chat-welcome h1{letter-spacing:-.05em}
.support-launcher{background:var(--accent)!important}
.site-footer{max-width:1660px;margin:auto;padding:23px clamp(20px,4vw,58px);border-top:1px solid var(--line);background:rgba(255,255,255,.78);color:#776e80;box-shadow:0 -8px 30px #7450ed07}
.site-footer strong{color:var(--ink);font-size:16px;font-weight:800;letter-spacing:-.04em}
.site-footer .footer-brand{display:inline-flex;align-items:baseline;font-size:22px;letter-spacing:-.06em}
.site-footer .footer-brand>span{color:var(--accent)}
.site-footer .footer-brand small{margin-left:4px;color:#8b8198;font-size:10px;letter-spacing:0}
.site-footer nav a:hover{color:var(--accent)}

@media(max-width:1100px){
  .topbar{gap:22px}.topnav{gap:13px}.topnav a{font-size:12px}
  .app-page{grid-template-columns:220px minmax(0,1fr)}
  .sidebar{padding-inline:10px}.workspace{padding-inline:24px}
  .stat-grid,.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  body{background-size:36px 36px}
  .topbar{height:auto;min-height:68px;flex-wrap:wrap;padding:12px 18px;gap:10px}
  .topbar .brand{font-size:24px}.topbar .brand .brand-mark{width:33px;height:33px;font-size:26px}
  .topnav{display:flex;order:3;flex-basis:100%;overflow-x:auto;white-space:nowrap;padding-bottom:2px;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .topbar-actions{margin-left:auto}
  .app-page{display:block;border:0}
  .sidebar,.sidebar.dark{position:relative;top:auto;width:100%;height:auto;min-height:0;overflow:visible;padding:12px 16px;background:#faf8fd;border-right:0;border-bottom:1px solid var(--line)}
  .sidebar-intro{display:none}
  .sidebar nav{display:flex;flex-direction:row;flex-wrap:nowrap;gap:5px;overflow-x:auto;scrollbar-width:none}
  .sidebar nav:has(.developer-nav[open]){overflow:visible;flex-wrap:wrap}
  .developer-nav{flex:0 0 auto;margin:0;overflow:visible;position:relative}
  .developer-nav summary{min-height:40px;white-space:nowrap}
  .developer-nav>div{position:absolute;z-index:8;top:calc(100% + 5px);right:0;min-width:190px;padding:6px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 14px 28px #68518b20}
  .sidebar nav::-webkit-scrollbar{display:none}
  .sidebar-nav-label,.sidebar-footer{display:none}
  .side-link,.dark .side-link{flex:0 0 auto;width:auto;white-space:nowrap;padding:10px 12px}
  .workspace{padding:24px 16px 56px}
  .workspace-head{min-height:0;align-items:flex-start;flex-wrap:wrap}
  .workspace-head h1{font-size:32px}
  .client-primary-actions{width:auto;flex-direction:row;flex-wrap:wrap}
  .client-primary-actions .button,.workspace-head .button{width:auto}
  .split-grid,.payment-surface{grid-template-columns:1fr}
  .learning-grid{grid-template-columns:1fr}
  .learning-grid a{min-height:0}
  .apira-balance-panel{align-items:flex-start;flex-direction:column}
  .payment-hint{grid-column:auto;margin:0}
  .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .topbar .brand small{display:none}
  .topbar-actions #accountButton{padding:8px 10px}
  .stat-grid,.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat{padding:16px}.stat strong{font-size:21px}
  .client-overview-hero{min-height:0;padding:22px}
  .client-overview-spark{width:62px;height:62px;border-radius:17px;font-size:38px}
  .client-steps{flex-direction:column;gap:15px}
  .client-endpoint{align-items:flex-start;flex-direction:column}
  .surface{padding:17px}
  .workspace-head{gap:10px}
  .workspace-head .button{font-size:12px}
  .topup-banner{padding:16px}
  .auth-card{padding:24px}
}
@media(max-width:720px){.support-launcher{width:42px;height:42px;right:12px;bottom:12px;padding:0}.support-launcher svg{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}a,button{transition:none}}