:root{
  --bg:#050105;
  --surface:#0c070c;
  --surface2:#130b12;
  --line:#2a1825;
  --muted:#aa96a5;
  --text:#fff8fc;
  --acid:#ff2f8b;
  --acid2:#c01872;
  --danger:#ff647d;
  --blue:#a97cff;
  --radius:8px;
}

html{background:var(--bg)}
body{
  background:
    radial-gradient(ellipse 58% 44% at 74% -8%,rgba(255,47,139,.18),transparent 68%),
    radial-gradient(ellipse 42% 58% at 102% 68%,rgba(100,15,80,.13),transparent 72%),
    linear-gradient(135deg,#050105 0%,#080207 48%,#030103 100%);
  background-attachment:fixed;
}
body:before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to bottom,black,transparent 75%);
}
.noise{opacity:.055;mix-blend-mode:soft-light}

.sidebar{
  width:236px;
  padding:24px 16px 16px;
  background:rgba(4,1,4,.95);
  border-color:#21121e;
  box-shadow:18px 0 70px rgba(0,0,0,.2);
}
main{margin-left:236px}
.brand{font-size:17px;letter-spacing:-.01em}
.brand b{color:var(--text)}
.brand-mark{width:25px;height:25px}
.brand-mark i{
  width:21px;
  height:4px;
  border:0;
  border-radius:3px;
  background:var(--acid);
  transform:none;
  box-shadow:0 -8px 0 -1px var(--acid),0 8px 0 -1px var(--acid),0 0 22px rgba(255,47,139,.55);
}
.brand-mark i+i{display:none}
nav{margin-top:50px;gap:3px}
nav a{
  height:44px;
  border-radius:4px;
  color:#8b7787;
  font:500 11px var(--mono);
  letter-spacing:.055em;
  text-transform:uppercase;
}
nav a:hover{background:#110810;color:#f6e8f1}
nav a.active{
  background:linear-gradient(90deg,rgba(255,47,139,.16),rgba(255,47,139,.025));
  color:#fff;
  box-shadow:inset 2px 0 var(--acid);
}
.nav-icon{color:var(--acid)}
.profile,.icon-button,.mobile-menu{background:#0b060a;border-color:#2b1927;border-radius:5px}
.avatar{background:var(--acid);color:#230013;border-radius:4px}
.system-row{color:#765f71}

.topbar{
  height:72px;
  padding:0 34px;
  background:rgba(5,1,5,.82);
  border-color:#21121e;
}
.breadcrumb{font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.breadcrumb strong{color:#f8eaf3}
.mode-badge,.live-indicator{
  border-color:#432037;
  border-radius:4px;
  color:#d59ab9;
  background:rgba(255,47,139,.045);
}
.status-dot,.mode-badge i,.live-indicator i,.wallet-status i{
  background:var(--acid);
  box-shadow:0 0 15px var(--acid);
}

.app-shell{padding-top:46px}
.eyebrow{
  color:var(--acid);
  font-size:9px;
  letter-spacing:.22em;
}
.hero{
  min-height:440px;
  border:1px solid #291523;
  padding:54px clamp(30px,5vw,70px);
  background:
    radial-gradient(ellipse 70% 90% at 85% 50%,rgba(255,31,139,.16),transparent 62%),
    linear-gradient(120deg,rgba(19,6,17,.96),rgba(5,2,5,.83));
}
.hero:after{
  content:'';
  position:absolute;
  width:520px;
  height:150px;
  right:-90px;
  bottom:54px;
  border:34px solid rgba(255,35,139,.22);
  border-left-color:rgba(101,12,73,.42);
  transform:rotate(-24deg) skewX(-18deg);
  filter:drop-shadow(0 0 34px rgba(255,33,139,.24));
}
.hero>div{position:relative;z-index:2}
.hero h1,.page-heading h1{
  font-weight:400;
  letter-spacing:-.065em;
}
.hero h1{font-size:clamp(48px,5.7vw,82px);line-height:.96;max-width:790px}
.hero h1 em{
  color:var(--text);
  background:linear-gradient(90deg,var(--acid),#ff6aae 72%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero p,.page-heading p{color:#b59fac}
.orbit{opacity:.55;transform:scale(.9)}
.orbit:after{background:var(--acid);opacity:.2}
.orbit-ring{border-color:#672044}
.orbit-core{border-color:#7b2851;background:#160813;box-shadow:0 0 65px rgba(255,47,139,.28)}
.node{background:var(--acid);box-shadow:0 0 18px var(--acid)}

.primary{
  color:#260014;
  background:var(--acid);
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 10px 30px rgba(255,47,139,.12);
  text-transform:uppercase;
  letter-spacing:.045em;
  font-size:11px;
}
.primary:hover{background:#ff5aa6;box-shadow:0 12px 36px rgba(255,47,139,.22)}
.ghost{
  background:#0b060a;
  border-color:#35202f;
  border-radius:4px;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:11px;
}
.ghost:hover{border-color:#8a315f;background:#170a14}
.text-button:hover{color:var(--acid)}

.metrics{
  margin-top:18px;
  border:1px solid var(--line);
  background:rgba(8,3,7,.72);
}
.metrics article{min-height:120px;border-color:var(--line)}
.metrics strong{font-weight:400}
.metrics button{color:var(--acid)}
.section-head h2,.panel h3,.params-panel h3{font-weight:500}

.panel,.params-panel,.chat-panel,.table-wrap,.usage-summary,.provider-status{
  background:linear-gradient(145deg,rgba(16,7,14,.96),rgba(7,3,7,.94));
  border-color:#2b1927;
  border-radius:6px;
}
.model-card{
  background:linear-gradient(145deg,#110810,#080407);
  border-color:#2d1928;
  border-radius:6px;
}
.model-card:hover{
  border-color:#85335d;
  box-shadow:0 18px 55px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.035);
}
.model-card:before{background:var(--acid);opacity:.12}
.model-logo{
  border-radius:4px;
  color:var(--acid);
  border-color:#63304b;
  background:#1b0916;
}
.tags span,.test-chip{
  border-radius:3px;
  background:#150a12;
  border-color:#36202f;
  color:#ae91a2;
}
.model-bottom,.steps button,.recent-item,.ledger-item{border-color:var(--line)}
.arrow-button{border-radius:4px;background:#130a11;border-color:#392130}

.search,.chips button,.amounts button,.chat-toolbar select,
.params-panel input[type=number],.params-panel select,.composer textarea,
.custom-amount input,.payment-methods button,dialog label input,.secret-textarea{
  background:#0a0509;
  border-color:#38202f;
  border-radius:4px;
}
.search:focus-within,.composer textarea:focus,.params-panel input:focus,.params-panel select:focus{border-color:#a23b6d}
.chips button.active,.amounts button.active,.payment-methods button.active{
  background:#240c1c;
  border-color:#9b3768;
  color:#ff68ac;
}
.slider-row input{accent-color:var(--acid)}
.toggle-row input:checked+i{background:#6d1746}
.toggle-row input:checked+i:after{background:var(--acid)}
.estimate-card,.notice{
  background:#190914;
  border-color:#58233f;
}
.estimate-card strong,.notice>span,.secret-box code,.ledger-item>strong.credit{color:var(--acid)}
.wallet-hero{
  border-color:#5d2242;
  border-radius:7px;
  background:
    radial-gradient(circle at 82% 25%,rgba(255,47,139,.34),transparent 30%),
    linear-gradient(135deg,#1e0918,#080406);
}
.wallet-lines{border-color:#ff2f8b33;box-shadow:0 0 0 45px #ff2f8b12,0 0 0 90px #ff2f8b0a}
th{background:#10070e;color:#8f7385}
td,th{border-color:var(--line)}
pre{background:#050204;border-color:#291722;color:#e2a1c2}
dialog{background:#0d060c;border-color:#4b273d;border-radius:7px;box-shadow:0 35px 120px #000,0 0 70px rgba(255,47,139,.08)}
.toast{background:#ff4b9c;color:#260013;border-radius:4px}
.provider-status.connected{border-color:#682744;background:#170812}
.provider-status.connected em,.review-state.healthy{color:#ff69ae;border-color:#793052}
.provider-symbol{border-radius:4px;background:#1d0a18;border-color:#62304b;color:#ff70b4}
.status-pill{color:#e28eb7}.status-pill:before{background:var(--acid)}
.pricing-note{border-left-color:var(--acid)}

@media(max-width:720px){
  main{margin-left:0}
  .hero{padding:36px 24px;min-height:430px}
  .hero:after{opacity:.45;right:-280px}
  .hero h1{font-size:46px}
}

/* Readability and interaction pass */
html{
  font-size:16px;
  font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  line-height:1.5;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body{font-size:14px;color:#fffafd}
button,input,select,textarea{font-size:13px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #ff5aa6;
  outline-offset:2px;
}

.sidebar{width:248px;padding-inline:18px}
main{margin-left:248px}
.brand{font-size:18px}
nav a{height:48px;font-size:13px;letter-spacing:.025em}
.nav-icon{font-size:17px}
.system-row{font-size:11px}
.profile{min-height:58px}
.profile strong{font-size:13px}.profile small{font-size:11px}

.topbar{height:76px}.breadcrumb{font-size:11px}
.mode-badge,.live-indicator{font-size:11px;padding:8px 12px}
.icon-button,.mobile-menu{width:40px;height:40px}
.primary,.ghost{min-height:40px;font-size:12px;padding:11px 16px}
.primary.small,.ghost.small{min-height:38px;font-size:12px}
.text-button{font-size:13px}

.app-shell{padding-top:52px}
.eyebrow{font-size:11px;line-height:1.4;letter-spacing:.17em}
.page-heading{margin-bottom:36px}
.page-heading h1{font-size:clamp(44px,4.6vw,64px);line-height:1.05;margin:16px 0 12px}
.hero p,.page-heading p{font-size:16px;line-height:1.75;color:#c3aeba}
.section-head h2,.panel h3,.params-panel h3{font-size:24px;line-height:1.3}
.panel,.params-panel{padding:26px}

.metrics span,.wallet-hero span,.usage-summary span{font-size:13px;color:#af98a7}
.metrics small,.wallet-hero small{font-size:11px;color:#927d8b}
.metrics button{font-size:12px}
.metrics strong{font-size:30px}

.model-card{padding:24px;min-height:236px}
.model-card h3{font-size:19px;line-height:1.35;margin-top:20px}
.model-card>p{font-size:13px;line-height:1.65;min-height:42px;color:#b49eac}
.provider-tag{font-size:11px}.model-logo{font-size:15px}
.tags span,.test-chip{font-size:11px;padding:6px 9px}
.price-pair span{font-size:11px}.price-pair b{font-size:13px}
.pricing-note,.fineprint{font-size:12px;line-height:1.7;color:#9c8594}

.provider-status{padding:16px 18px;min-height:68px}
.provider-status b{font-size:13px}.provider-status small{font-size:11px;line-height:1.5}
.provider-status em{font-size:11px}
.provider-symbol{width:40px;height:40px;font-size:11px}

.review-panel{padding:24px 26px}
.review-list{max-height:480px;overflow:auto;padding-right:8px;scrollbar-color:#613049 #10070e}
.review-item{min-height:68px;padding:14px 2px;gap:14px}
.review-item b{font-size:13px;line-height:1.45}
.review-item small{font-size:11px;line-height:1.45;color:#9f8997}
.review-state{font-size:11px;padding:7px 10px}
.review-actions button{min-height:36px;font-size:11px;padding:8px 11px}

.search{height:46px}.search input{font-size:13px}
.chips button,.amounts button{min-height:42px;font-size:12px;padding:10px 15px}

.chat-panel{min-height:680px}
.chat-toolbar{height:72px}.chat-toolbar label{font-size:12px}
.chat-toolbar select{min-height:42px;font-size:13px}
.messages{padding:28px}
.message{gap:14px}.msg-avatar{width:34px;height:34px;font-size:11px}
.message>div>span{font-size:11px}.message p{font-size:14px;line-height:1.75;padding:14px 16px}
.composer{padding:18px}.composer textarea{font-size:14px;line-height:1.65;padding:15px}
.composer-foot>span,kbd{font-size:11px}

.params-panel>label{margin-top:25px}
.params-panel label>span{font-size:12px;color:#d2bdc9}
.params-panel input[type=number],.params-panel select{min-height:44px;font-size:13px;padding:11px 12px}
.field-help{font-size:11px;line-height:1.55;color:#9c8794}
.toggle-row b{font-size:13px}.toggle-row small{font-size:11px;line-height:1.5}
.estimate-card span,.estimate-card small{font-size:11px;line-height:1.5}
.request-meta span{font-size:11px}.request-meta p{font-size:11px}

.notice{font-size:13px;line-height:1.6}.notice>span{width:24px;height:24px;font-size:11px;flex:0 0 auto}
th{font-size:11px;letter-spacing:.06em}td{font-size:13px;line-height:1.5}td code{font-size:11px}
td,th{padding:17px 18px}
.status-pill{font-size:11px}
.usage-summary strong{font-size:25px}
.ledger-item b{font-size:13px}.ledger-item small{font-size:11px}.ledger-item>strong{font-size:12px}
.payment-methods b{font-size:13px}.payment-methods small{font-size:11px}
.payment-methods.single{grid-template-columns:1fr}
.recharge>label{font-size:12px}

dialog{padding:30px;width:min(500px,calc(100vw - 32px))}
.dialog-head h2{font-size:27px}.dialog-copy{font-size:13px;line-height:1.7;color:#b69fab}
dialog label span{font-size:12px}dialog label input,.secret-textarea{font-size:13px;line-height:1.55}
.review-warning{font-size:12px;line-height:1.6}.secret-box code{font-size:12px}

@media(max-width:1000px){
  .review-list{max-height:420px}
}
@media(max-width:720px){
  body{font-size:14px}
  main{margin-left:0}
  .page-heading h1{font-size:42px}
  .page-heading p{font-size:15px}
  .review-list{max-height:520px}
  .review-item{padding-block:16px}
}

/* Readability v2: Chinese-first typography, contrast, and consistent icons */
:root{
  --surface:#110a10;
  --surface2:#181017;
  --line:#422c3a;
  --muted:#c5b5bf;
  --text:#fffafd;
}
html{
  font-family:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Noto Sans SC","Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
}
body{font-size:15px;letter-spacing:0}
button,input,select,textarea{font-family:inherit;font-size:14px}
.ui-icon,.nav-icon svg{
  width:20px;
  height:20px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  flex:0 0 24px;
  color:#d6bdcb;
}
nav a{
  min-height:50px;
  height:auto;
  padding:12px 14px;
  gap:14px;
  color:#c7b3bf;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:0;
  text-transform:none;
}
nav a:hover{color:#fff;background:#1b1018}
nav a.active{color:#fff;background:linear-gradient(90deg,rgba(255,47,139,.2),rgba(255,47,139,.055))}
nav a.active .nav-icon{color:#ff5ca3}
.brand{font-family:"Segoe UI",sans-serif;font-size:19px}
.system-row{font-size:12px;color:#ad96a4}
.profile strong{font-size:14px}.profile small{font-size:12px;color:#a28d99}
.breadcrumb{font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;color:#ad9ca6}
.breadcrumb strong{font-weight:600;color:#fff}
.mode-badge,.live-indicator{font-family:inherit;font-size:12px;letter-spacing:0;text-transform:none;color:#e1b6cc}
.icon-button,.mobile-menu{display:grid;place-items:center;color:#eadce4}
.mobile-menu{display:none}
.icon-button:hover,.mobile-menu:hover{color:#fff;border-color:#8a4569;background:#20101b}
.primary,.ghost{
  min-height:42px;
  font-size:14px;
  line-height:1.25;
  letter-spacing:0;
  text-transform:none;
}
.primary.small,.ghost.small{font-size:13px;min-height:40px}
.text-button{font-size:14px}
.app-shell{padding-top:44px}
.eyebrow{font-size:11px;line-height:1.5;letter-spacing:.13em;font-weight:600}
.page-heading h1{font-size:clamp(38px,4vw,52px);letter-spacing:-.035em}
.hero h1{font-size:clamp(46px,5.2vw,72px);letter-spacing:-.045em}
.hero p,.page-heading p{font-size:16px;line-height:1.8;color:#d0bdc8}
.section-head h2,.panel h3,.params-panel h3{font-size:23px;letter-spacing:-.015em}
.metrics span,.wallet-hero span,.usage-summary span{font-size:14px;color:#c5b0bd}
.metrics small,.wallet-hero small{font-size:12px;color:#aa95a1}
.metrics button{font-size:13px;font-weight:600}
.model-card h3{font-size:20px}.model-card>p{font-size:14px;color:#c8b4c0}
.provider-tag{font-family:inherit;font-size:12px;color:#bca5b2}
.tags span,.test-chip{font-size:12px;color:#cdb7c4}
.price-pair span{font-size:12px;color:#ad96a3}.price-pair b{font-size:14px}
.search{height:48px}.search .ui-icon{color:#bca9b4;flex:0 0 auto}.search input{font-size:14px}
.chips button,.amounts button{font-size:13px}
.chat-toolbar label,.params-panel label>span{font-size:13px}
.message>div>span{font-family:inherit;font-size:12px}.message p{font-size:15px;line-height:1.8}
.composer textarea{font-size:15px}.field-help,.toggle-row small{font-size:12px;color:#b29da9}
.notice{font-size:14px;color:#d3beca}
th{font-family:inherit;font-size:12px;font-weight:600;color:#bfa8b5;letter-spacing:.03em}
td{font-size:14px;color:#e2d6dd}td code{font-size:12px}
.status-pill{font-size:12px}.pricing-note,.fineprint{font-size:13px;color:#b7a2ae}
.ledger-item b,.payment-methods b{font-size:14px}.ledger-item small,.payment-methods small{font-size:12px;color:#ad98a4}
dialog label span{font-size:13px}dialog label input,.secret-textarea{font-size:14px}

@media(max-width:720px){
  body{font-size:15px}
  .page-heading h1{font-size:38px}
  nav a{font-size:15px}
  .mobile-menu{display:grid}
}

.api-quickstart{margin-top:18px;padding:26px;overflow:hidden}
.api-quickstart .panel-head{align-items:flex-start;gap:20px}
.api-quickstart .panel-head h3{margin-top:5px}
.api-quickstart .panel-head p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.compatibility-badge{flex:none;padding:8px 11px;border:1px solid rgba(198,255,57,.25);border-radius:999px;background:rgba(198,255,57,.08);color:var(--lime);font-size:11px;font-weight:800;letter-spacing:.05em}
.api-connection-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:12px;margin:24px 0}
.api-connection-grid>label,.api-key-hint{display:flex;min-width:0;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.api-connection-grid>label>span,.api-key-hint>span{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.api-connection-grid select{width:100%;height:38px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:#0b0d10;color:var(--text);font:inherit;font-size:13px}
.copy-field{display:flex;min-width:0;align-items:center;gap:8px}
.copy-field code{min-width:0;flex:1;overflow:hidden;color:var(--text);font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.api-key-hint strong{font-size:13px}.api-key-hint small{color:var(--muted);font-size:11px;line-height:1.55}
.code-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 10px;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:#0b0d10}
.code-tabs{display:flex;gap:3px}
.code-tabs button{padding:8px 12px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.code-tabs button:hover,.code-tabs button.active{background:rgba(255,255,255,.08);color:var(--text)}
.integration-code{min-height:255px;margin:0;padding:22px;border:1px solid var(--line);border-radius:0 0 12px 12px;background:#07080a;color:#d8f7b0;overflow:auto;font-size:12.5px;line-height:1.75;white-space:pre}
.api-endpoints{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.api-endpoints>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px 10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px}
.api-endpoints code{font-size:12px}.api-endpoints small{grid-column:2;color:var(--muted);font-size:11px}
.method{padding:4px 7px;border-radius:5px;font-size:9px;font-weight:900;letter-spacing:.08em}.method.get{background:rgba(97,218,251,.12);color:#61dafb}.method.post{background:rgba(198,255,57,.12);color:var(--lime)}

@media(max-width:980px){.api-connection-grid{grid-template-columns:1fr 1fr}.api-key-hint{grid-column:1/-1}}
@media(max-width:720px){.api-quickstart{padding:18px}.api-quickstart .panel-head{display:block}.compatibility-badge{display:inline-block;margin-top:14px}.api-connection-grid,.api-endpoints{grid-template-columns:1fr}.api-key-hint{grid-column:auto}.code-toolbar{align-items:flex-end;flex-direction:column}.code-tabs{width:100%;overflow-x:auto}.integration-code{min-height:220px;padding:16px}.api-endpoints small{grid-column:2}}