.portal,.studio { --fg:#e5e1df; --muted:#b5b0ae; --rose:#bc929d; --line:#454247; --panel:#242327; --font-code:"SFMono-Regular",Consolas,monospace; }
.portal { color:var(--fg); background:#1c1d20; color-scheme:dark; min-height:100svh; font-family:"PingFang SC","Helvetica Neue",Arial,sans-serif; font-weight:400; --text-primary:var(--fg); --text-secondary:var(--muted); --text-tertiary:var(--muted); --border:var(--line); --border-strong:#625961; }
.portal a { color:inherit; text-decoration:none; }
.portal button { color:inherit; }
.portal h1,.portal h2,.portal h3,.portal p { margin:0; }
.portal h1 { font-size:36px; line-height:1.3; font-weight:500; letter-spacing:.02em; }
.portal h1[tabindex="-1"]:focus { outline:none; }
.portal h2 { font-size:22px; line-height:1.4; font-weight:450; }
.portal h3 { font-size:17px; line-height:1.5; font-weight:500; }
.portal :focus-visible,.product-nav :focus-visible { outline:2px solid var(--rose); outline-offset:4px; }
.portal input,.portal textarea,.portal select { width:100%; min-width:0; min-height:48px; padding:12px 14px; border:1px solid #5b565d; border-radius:8px; background:#242327; color:var(--fg); }
.portal input::placeholder { color:#a19aa0; }
.portal input[aria-invalid=true] { border-color:#eeb3c0; }
.portal input[type=checkbox] { width:18px; min-height:18px; height:18px; accent-color:var(--rose); }
.portal fieldset { border:0; margin:0; padding:0; min-width:0; }
.portal button,.portal a { -webkit-tap-highlight-color:transparent; transition:background .15s,color .15s,border-color .15s; }
.portal button:disabled { opacity:.5; cursor:not-allowed; }
.portal-icon { width:22px; height:22px; flex:none; filter:invert(85%); }
.portal-skip { position:fixed; top:10px; left:16px; z-index:30; padding:12px; background:#303034; transform:translateY(-180%); }
.portal-skip:focus { transform:none; }
.product-nav { position:fixed; width:236px; inset:0 auto 0 0; z-index:5; padding:18px 20px; border-right:1px solid var(--line); display:flex; flex-direction:column; background:#1c1d20; }
.product-brand { display:block; font-size:34px; font-weight:400; letter-spacing:.02em; margin:0 18px 43px; line-height:1.5; }
.product-nav nav { display:flex; flex-direction:column; gap:8px; }
.product-nav nav a { display:flex; align-items:center; min-height:54px; padding:0 20px; gap:20px; border-left:2px solid transparent; border-radius:8px; font-size:17px; }
.product-nav nav a[aria-current=page] { background:#bc929d22; border-left-color:var(--rose); }
.product-nav nav a:hover { background:#ffffff09; }
.product-nav img { width:22px; height:22px; flex:none; filter:invert(85%); }
.product-nav .product-divider { border-top:1px solid var(--line); margin:14px 4px 6px; }
.product-nav .product-signature { margin:auto 18px 32px; line-height:1.8; color:var(--muted); font-size:16px; }
.portal-main { margin-left:236px; padding:30px 38px 64px; min-width:0; }
.portal-top { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:32px; margin-bottom:42px; }
.portal-overline { color:var(--muted); font-size:12px; letter-spacing:.13em; line-height:1.7; }
.portal-top>a,.account-user { font-size:13px; color:var(--muted); }
.portal-top>a { display:inline-flex; align-items:center; min-height:32px; gap:8px; }
.portal-top .portal-icon { width:16px; height:16px; }
.portal-content { max-width:1160px; margin-right:auto; min-width:0; }
.portal-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:30px; }
.portal .portal-lead { color:var(--muted); font-size:16px; line-height:1.8; margin-top:14px; }
.portal .portal-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:11px 19px; border:1px solid #5b565d; border-radius:8px; background:transparent; font-size:14px; line-height:1.4; text-align:center; white-space:nowrap; }
.portal .portal-button:hover { background:#ffffff09; }
.portal .portal-primary { background:var(--rose); color:#241d23; border-color:var(--rose); }
.portal .portal-primary:hover { background:#cea4ae; border-color:#cea4ae; }
.portal-primary .portal-icon { filter:none; }
.portal .portal-danger { background:#4b2e36; color:#f1c0cb; border-color:#986879; }
.portal .portal-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:14px; color:var(--muted); text-decoration:underline; text-underline-offset:5px; }
.portal .portal-link:hover { color:var(--fg); }
.portal .portal-status { min-height:24px; margin:12px 0 18px; font-size:13px; line-height:1.8; overflow-wrap:anywhere; color:var(--muted); }
.portal [data-kind=error] { color:#f0b4c1; }
.portal [data-kind=success] { color:#b9caba; }
.portal [data-kind=loading] { color:#d1c2b6; }
.portal .portal-note { color:var(--muted); font-size:13px; line-height:1.8; }
.portal .portal-notice { padding:15px 18px; border-left:2px solid var(--rose); background:#bc929d0c; font-size:14px; line-height:1.8; color:var(--muted); }
.account-toolbar { display:flex; align-items:center; gap:24px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.account-user { order:2; flex:none; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:16px; margin:0; }
.account-user button { background:none; border:0; padding:8px 0 8px 16px; border-left:1px solid var(--line); min-height:44px; font-size:13px; }
.account-tabs { flex:1; min-width:0; display:flex; gap:30px; overflow-x:auto; }
.account-tabs a { display:block; min-height:48px; padding:10px 2px 17px; white-space:nowrap; border-bottom:2px solid transparent; font-size:15px; color:var(--muted); }
.account-tabs a[aria-current=page] { border-bottom-color:var(--rose); color:var(--fg); }
.account-summary { display:grid; grid-template-columns:1.35fr 1fr; border:1px solid var(--line); border-radius:12px; background:#24232766; margin:32px 0; }
.account-metric { min-width:0; padding:28px 30px; }
.account-metric+.account-metric { border-left:1px solid var(--line); }
.account-metric small { display:block; font-size:13px; line-height:1.7; color:var(--muted); }
.account-metric strong { display:block; font-size:clamp(30px,3vw,44px); line-height:1.2; font-weight:400; font-variant-numeric:tabular-nums; margin:16px 0 12px; overflow-wrap:anywhere; }
.account-metric .portal-link { font-size:12px; min-height:32px; }
.account-section { padding:28px 0; border-top:1px solid var(--line); }
.account-section:first-of-type { border-top:0; padding-top:0; }
.account-section-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
.account-actions { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.account-action { display:flex; justify-content:space-between; gap:20px; padding:22px 24px; border:1px solid var(--line); border-radius:8px; min-height:120px; }
.account-action:hover { border-color:#82717a; background:#bc929d08; }
.account-action strong { display:block; font-size:17px; font-weight:450; margin-bottom:9px; }
.account-action span { display:block; color:var(--muted); font-size:13px; line-height:1.8; }
.account-action>.portal-icon { align-self:center; width:18px; height:18px; }
.portal-form { display:flex; align-items:flex-end; flex-wrap:wrap; gap:16px; margin:22px 0 28px; }
.portal-field { flex:1; min-width:170px; }
.portal-field label { display:block; font-size:14px; margin-bottom:9px; }
.portal-field label span { color:var(--muted); font-size:12px; margin-left:6px; }
.portal .table-scroll { max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:8px; margin:0; background:transparent; }
.portal .data-table { width:100%; border-collapse:collapse; font-size:13px; text-align:left; }
.portal .data-table th { padding:15px 18px; font-weight:400; font-size:12px; color:var(--muted); background:#242327; white-space:nowrap; }
.portal .data-table td { padding:18px; border-top:1px solid var(--line); color:var(--fg); line-height:1.7; background:none; vertical-align:middle; }
.portal .data-table td strong { font-weight:450; }
.portal .data-table td code { font-size:12px; }
.portal .data-table .table-empty { padding:40px 20px; text-align:center; color:var(--muted); }
.portal .data-table .truncate-cell { max-width:240px; }
.portal .table-action { background:transparent; color:var(--fg); border:1px solid #5b565d; border-radius:6px; padding:8px 13px; min-height:44px; white-space:nowrap; }
.portal .table-action.danger { color:#e3aebc; border-color:#6d505b; }
.portal .status-badge { display:inline-block; padding:4px 9px; border-radius:5px; background:#ffffff09; color:var(--muted); font-size:12px; white-space:nowrap; }
.portal .status-badge[data-status=active],.portal .status-badge[data-status=ready] { background:#acc5ae14; color:#b9caba; }
.portal .money { font-variant-numeric:tabular-nums; white-space:nowrap; }
.portal .money.plus { color:#bdcdbd; }
.portal .money.minus { color:#dfb6c2; }
.portal-pagination { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:14px; margin-top:20px; color:var(--muted); font-size:13px; }
.portal-pagination .portal-button { min-height:44px; padding:10px 15px; }
.portal .account-key-note { margin-top:16px; }
.account-gate { max-width:580px; padding:54px 0; }
.account-gate>img { width:36px; height:36px; margin-bottom:28px; }
.account-gate .portal-button { margin-top:28px; }
.account-gate .gate-secondary { display:block; margin-top:14px; }
.portal-dialog { width:min(540px,calc(100% - 32px)); max-width:calc(100% - 32px); max-height:calc(100svh - 40px); overflow:auto; padding:30px; color:var(--fg); background:var(--panel); border:1px solid #5b565d; border-radius:12px; }
.portal-dialog::backdrop { background:#070609b8; backdrop-filter:blur(5px); }
.portal-dialog .dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:16px; }
.portal-dialog .dialog-heading h2 { font-size:23px; }
.portal-dialog p { font-size:14px; line-height:1.8; color:var(--muted); }
.portal-dialog label { display:block; margin:22px 0 10px; font-size:13px; }
.portal-dialog .secret-input { font:13px/1.8 var(--font-code); resize:vertical; min-height:86px; }
.portal-dialog .dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:12px; margin-top:24px; }
.portal-dialog .portal-status { margin:10px 0 0; min-height:24px; }
.portal-dialog .portal-notice { margin-top:16px; }
.portal .icon-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; background:transparent; flex:none; }
.auth-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 40px; border-bottom:1px solid var(--line); }
.auth-header .product-brand { margin:0; }
.auth-header nav { display:flex; gap:24px; align-items:center; font-size:14px; color:var(--muted); }
.auth-header nav a { display:flex; min-height:44px; align-items:center; }
.auth-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; max-width:1100px; margin:60px auto; padding:0 40px; }
.auth-story { max-width:410px; }
.auth-story h2 { font-size:44px; line-height:1.6; letter-spacing:.02em; font-weight:400; margin:22px 0; }
.auth-story p { max-width:310px; color:var(--muted); font-size:15px; line-height:2; }
.auth-story .auth-footnote { border-top:1px solid var(--line); margin-top:42px; padding-top:20px; font-size:12px; }
.auth-form-panel { min-width:0; padding-left:48px; border-left:1px solid var(--line); }
.auth-form-panel h1 { font-size:30px; }
.auth-form-panel .portal-lead { font-size:14px; }
.auth-mode { display:flex; gap:26px; border-bottom:1px solid var(--line); margin:25px 0; }
.auth-mode button { flex:1; min-height:46px; padding:10px 12px 14px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-size:14px; }
.auth-mode button[aria-pressed=true] { color:var(--fg); border-bottom-color:var(--rose); }
.auth-field { margin-bottom:20px; }
.auth-field label { display:block; margin-bottom:9px; font-size:14px; }
.auth-remember { display:flex; align-items:center; gap:10px; min-height:44px; color:var(--muted); font-size:13px; margin:0 0 14px; }
.auth-form-panel .portal-primary { width:100%; }
.auth-form-panel .portal-status { margin:14px 0; }
.auth-existing { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.auth-existing a { font-size:14px; text-decoration:underline; text-underline-offset:5px; }
.developer-layout { display:grid; grid-template-columns:minmax(0,1fr) 164px; gap:40px; max-width:1190px; }
.developer-content { min-width:0; }
.developer-content section { padding-top:38px; margin-top:32px; border-top:1px solid var(--line); scroll-margin-top:28px; }
.developer-content section:first-of-type { border-top:0; margin-top:0; padding-top:0; }
.developer-content h2 { margin-bottom:18px; }
.developer-content p { color:var(--muted); line-height:1.9; font-size:14px; margin:14px 0; overflow-wrap:anywhere; }
.developer-content p>a { color:var(--fg); text-decoration:underline; text-underline-offset:4px; }
.developer-content code { font-family:var(--font-code); font-size:.88em; color:#e7c0cd; overflow-wrap:anywhere; }
.code-block { background:#17171b; border:1px solid var(--line); border-radius:9px; margin:20px 0; overflow:hidden; }
.code-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:8px 16px; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); }
.code-heading button { background:transparent; border:0; font-size:12px; padding:8px; min-height:36px; }
.code-heading button:hover { color:var(--fg); }
.code-block pre { padding:20px; margin:0; overflow:auto; font:12px/1.9 var(--font-code); color:var(--fg); }
.code-block code { color:inherit; font:inherit; white-space:pre; }
.developer-toc { position:sticky; top:30px; align-self:start; border-left:1px solid var(--line); padding-left:20px; }
.developer-toc>span { display:block; font-size:11px; color:var(--muted); letter-spacing:.08em; margin-bottom:13px; }
.developer-toc a { display:block; min-height:36px; padding:9px 0; color:var(--muted); font-size:12px; }
.developer-toc a[aria-current=location] { color:#e5b7c5; }
.developer-toc small { display:block; margin-top:20px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.8; }
.quickstart-steps { display:flex; gap:12px; list-style:none; padding:0; margin:28px 0; }
.quickstart-steps li { flex:1; border-top:1px solid var(--line); padding:14px 0; font-size:13px; color:var(--muted); line-height:1.9; }
.quickstart-steps span { display:block; font-size:11px; color:#d2aab7; margin-bottom:5px; }
.quickstart-steps a { display:block; color:var(--fg); }
.portal .billing-balance { display:flex; align-items:baseline; gap:18px; padding:18px 0 26px; color:var(--muted); font-size:14px; }
.billing-balance strong { color:var(--fg); font-size:28px; font-weight:400; font-variant-numeric:tabular-nums; }
@media(max-width:1250px) { .product-nav { width:190px; padding-inline:14px; } .product-brand { font-size:30px; margin-inline:12px; } .product-nav nav a { padding-inline:14px; gap:14px; font-size:15px; } .portal-main { margin-left:190px; padding-inline:28px; } .developer-layout { gap:25px; grid-template-columns:minmax(0,1fr) 145px; } .account-metric { padding:24px; } .auth-layout { gap:40px; } }
@media(max-width:1000px) { .developer-layout { display:flex; flex-direction:column; gap:28px; } .developer-toc { position:static; order:-1; border:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; } .developer-toc>span,.developer-toc small { display:none; } .developer-toc a { padding:6px 0; font-size:12px; } .auth-layout { max-width:850px; gap:35px; padding:0 28px; } .auth-story h2 { font-size:35px; } .auth-form-panel { padding-left:30px; } }
@media(max-width:900px) { .product-nav { position:static; width:100%; padding:20px 26px; border-right:0; border-bottom:1px solid var(--line); flex-direction:row; align-items:center; justify-content:space-between; } .product-brand { margin:0; font-size:28px; } .product-nav nav { flex-direction:row; gap:4px; } .product-nav nav a { padding:0 12px; min-height:44px; border-left:0; border-bottom:2px solid transparent; border-radius:0; } .product-nav nav a[aria-current=page] { background:none; border-bottom-color:var(--rose); } .product-nav img,.product-nav .product-divider,.product-nav .product-signature { display:none; } .portal-main { margin-left:0; padding:24px 28px 50px; } .portal h1 { font-size:30px; } .portal-top { margin-bottom:28px; } }
@media(max-width:650px) { .product-nav { padding:18px 20px; align-items:flex-start; } .product-brand { font-size:27px; line-height:44px; } .product-nav nav { display:grid; grid-template-columns:repeat(2,auto); gap:0; } .product-nav nav a { font-size:13px; justify-content:center; min-height:36px; padding:0 10px; } .product-nav nav a:nth-last-child(-n+2) { color:var(--muted); font-size:12px; } .portal-main { padding:20px 20px 40px; } .portal-top { font-size:10px; gap:12px; margin-bottom:26px; } .portal-overline { font-size:10px; } .portal-heading { flex-direction:column; gap:20px; margin-bottom:26px; } .portal-heading>.portal-button { align-self:flex-start; } .portal .portal-lead { font-size:14px; margin-top:10px; } .portal h2 { font-size:20px; } .account-toolbar { flex-direction:column; align-items:stretch; gap:8px; margin-bottom:18px; } .account-user { order:-1; } .account-tabs { gap:24px; } .account-tabs a { font-size:14px; } .account-summary { grid-template-columns:1fr 1fr; margin:24px 0; } .account-metric { padding:20px 16px; } .account-metric strong { font-size:26px; } .account-metric small { font-size:12px; } .account-actions { grid-template-columns:1fr; } .account-action { padding:20px; min-height:100px; } .portal-form { flex-direction:column; align-items:stretch; } .portal .data-table th,.portal .data-table td { padding:14px; font-size:12px; } .portal .data-table { min-width:620px; } .account-gate { padding:24px 0; } .account-gate h1 { font-size:28px; } .portal-dialog { padding:24px 20px; max-height:calc(100svh - 24px); } .auth-header { padding:16px 20px; } .auth-header nav { gap:18px; font-size:13px; } .auth-header .product-brand { font-size:28px; } .auth-layout { display:block; margin:36px auto; padding:0 24px; max-width:460px; } .auth-story { display:none; } .auth-form-panel { padding:0; border:0; } .auth-form-panel h1 { font-size:30px; } .developer-content section { padding-top:28px; margin-top:24px; } .developer-content p { font-size:13px; } .developer-toc { gap:5px 15px; } .quickstart-steps { flex-direction:column; gap:0; margin:22px 0; } .quickstart-steps li { display:flex; align-items:center; gap:16px; padding:10px 0; } .quickstart-steps span { margin:0; } .code-block pre { padding:16px; font-size:11px; } .portal .billing-balance { display:block; } .billing-balance strong { display:block; margin-top:10px; } }
@media(max-width:360px) { .account-summary { grid-template-columns:1fr; } .account-metric+.account-metric { border-left:0; border-top:1px solid var(--line); } .portal-top>a { font-size:12px; } .portal-dialog .dialog-actions { flex-direction:column; } .portal-dialog .dialog-actions button { width:100%; } }
@media(prefers-reduced-motion:reduce) { .portal * { transition:none!important; scroll-behavior:auto!important; } }