:root{font-family:Inter,"Noto Sans SC","Microsoft YaHei UI",sans-serif;color:#111e33;background:#f8f7f3;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#111e33;--muted:#697789;--line:#e8e4dc;--soft:#f8f7f3;--accent:#c94f3d;--accent-deep:#17243a;--space:12px}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#f5f3ec}button,input,select,textarea{font:inherit}button{cursor:pointer}.client-app{min-height:100dvh}.login-view{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,460px) minmax(0,1fr);grid-template-rows:auto 1fr auto;align-items:center;gap:24px;padding:24px clamp(16px,4vw,48px);background:#f5f8f9}.login-brand{grid-column:1/-1;display:flex;align-items:center;gap:12px}.brand-mark{width:40px;height:40px;display:grid;place-items:center;border:1px solid #cbe7e2;border-radius:12px;background:#e9f5f3;color:var(--accent-deep);font-size:18px;font-weight:700}.login-brand b,.side-brand b{display:block;color:var(--ink);font-size:14px;letter-spacing:.3px}.login-brand small,.side-brand small{display:block;margin-top:3px;color:var(--muted);font-size:11px}.login-card{grid-column:2;width:100%;padding:32px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 16px 48px #17343b0a}.eyebrow,.top-eyebrow{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:1.3px}.login-card h1{margin:12px 0;color:var(--ink);font-size:26px;letter-spacing:-.4px}.login-card>p{margin:0 0 24px;color:var(--muted);font-size:13px;line-height:1.7}.login-card label{display:grid;gap:8px;margin:12px 0;color:#42515d;font-size:12px;font-weight:500}.login-card input,.field{width:100%;height:44px;padding:0 12px;border:1px solid #dce4e8;border-radius:8px;background:#fff;color:#263540;font-size:13px;outline:0;transition:border-color .16s,box-shadow .16s}.login-card input:focus,.field:focus,.textarea:focus{border-color:#53b9ac;box-shadow:0 0 0 3px #53b9ac20}.code-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.login-card .code-input-row input{min-width:0}.login-card .code-send{width:auto;min-width:118px;min-height:44px;margin:0;padding:0 12px;white-space:nowrap}.login-card .code-send:disabled{cursor:wait}.button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border:1px solid #dce4e8;border-radius:8px;background:#fff;color:#43515d;font-size:12px;font-weight:600;transition:background .16s,border-color .16s,color .16s}.button:hover{border-color:#b7c8cc;background:#f8fafb}.button.primary{border-color:var(--accent);background:var(--accent);color:#fff}.button.primary:hover{border-color:var(--accent-deep);background:var(--accent-deep)}.button.danger{border-color:#f0dada;background:#fff8f8;color:#a54143}.button:disabled{opacity:.55;cursor:wait}.login-card .button.primary{width:100%;min-height:46px;margin:12px 0}.auth-links{display:flex;justify-content:space-between;gap:12px;margin:12px 0 0}.auth-links button{padding:0;border:0;background:none;color:var(--accent-deep);font-size:12px;font-weight:500}.auth-links button:hover{text-decoration:underline}.login-card>small{display:block;margin-top:12px;color:#89959d;font-size:11px;line-height:1.6}.login-card .login-error{margin:0;color:#b64748;font-size:12px}.login-card .login-error.success{color:#168268}.login-view footer{grid-column:1/-1;text-align:center;color:#89959d;font-size:11px}.workspace{min-height:100dvh;display:grid;grid-template-columns:248px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;padding:22px 16px;border-right:1px solid var(--line);background:#fbfaf6}.side-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 24px;color:inherit;text-decoration:none}.side-brand .brand-mark{width:38px;height:38px}.side-caption{margin:0 12px 12px;color:#87939d;font-size:10px;font-weight:600;letter-spacing:.6px}.sidebar nav{display:grid;gap:4px}.sidebar nav button{min-height:40px;display:flex;align-items:center;gap:12px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#566570;text-align:left;font-size:12px;font-weight:500}.sidebar nav button i{width:18px;color:#778690;font-size:15px;font-style:normal;text-align:center}.sidebar nav button:hover{background:#f5f8f8;color:var(--ink)}.sidebar nav button.active{background:#e9f5f3;color:var(--accent-deep);font-weight:600}.sidebar nav button.active i{color:var(--accent)}.side-bottom{display:flex;align-items:center;gap:8px;margin-top:auto;padding:12px;color:#798790;font-size:11px}.secure-dot{width:7px;height:7px;border-radius:50%;background:#21ab83;box-shadow:0 0 0 3px #21ab8317}.main{min-width:0}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;border-bottom:1px solid var(--line);background:#fff}.topbar>div:first-child{display:grid;gap:4px}.topbar>div:first-child>b{font-size:14px}.top-eyebrow{font-size:9px}.account-menu{display:flex;align-items:center;gap:9px}.account-menu>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid #d9ece9;border-radius:50%;background:#eaf5f3;color:var(--accent-deep);font-size:13px;font-weight:700}.account-menu div b,.account-menu div small{display:block}.account-menu div b{font-size:11px}.account-menu div small{margin-top:3px;color:#87949b;font-size:10px}.account-menu button{width:32px;height:32px;border:0;border-radius:7px;background:transparent;color:#65737d;font-size:17px}.account-menu button:hover{background:#f2f5f5}.page-content{width:100%;max-width:1680px;margin:0 auto;padding:24px}.loading{padding:40px;color:var(--muted);text-align:center;font-size:13px}.welcome{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.welcome .kicker{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.7px}.welcome h1{margin:8px 0 4px;color:var(--ink);font-size:24px;letter-spacing:-.4px}.welcome p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.account-status,.call-state{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:#178469;font-size:11px}.account-status i,.call-state i{width:7px;height:7px;border-radius:50%;background:currentColor}.account-status.is-error,.call-state.is-error{color:#b34f4e}.summary-grid{display:grid;grid-template-columns:minmax(250px,1.5fr) repeat(3,minmax(125px,1fr));gap:12px;margin-bottom:12px}.balance-summary,.stat{min-height:112px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fffdfa}.balance-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(115deg,#fff 0%,#f6fbfa 100%)}.summary-label,.stat>span{display:block;color:#71808a;font-size:11px}.balance-summary strong{display:block;margin-top:8px;color:var(--ink);font-size:27px;font-weight:700;letter-spacing:-.5px}.balance-summary .button{flex:0 0 auto}.stat b{display:block;margin-top:12px;color:var(--ink);font-size:21px;font-weight:650}.stat b small{margin-left:3px;color:#8a969d;font-size:10px;font-weight:400}.stat .stat-note{display:block;margin-top:8px;color:#89959d;font-size:10px}.overview-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.82fr);align-items:start;gap:12px}.overview-main,.overview-side{display:grid;align-content:start;gap:12px;min-width:0}.card{min-width:0;margin:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fffdfa}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.card-head h2{margin:0;color:var(--ink);font-size:13px;font-weight:650}.card-head button{padding:4px 0;border:0;background:none;color:var(--accent-deep);font-size:11px;font-weight:500}.card-head button:hover{text-decoration:underline}.subtle{color:#7b8992;font-size:11px;line-height:1.7}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{padding:10px 12px;background:#f5f8f9;color:#75828b;font-size:10px;font-weight:550}td{padding:10px 12px;border-bottom:1px solid #edf0f1;color:#485761;font-size:11px}td strong{color:#263540;font-weight:550}.empty{padding:28px 12px!important;color:#8b979d;text-align:center;font-size:12px}.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:99px;background:#eaf7f2;color:#168268;font-size:10px}.pill.off{background:#f5eeee;color:#a05a59}.key-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.key-row+.key-row{margin-top:12px;padding-top:12px;border-top:1px solid #edf0f1}.key-copy{min-width:0}.key-copy b,.key-copy small{display:block}.key-copy b{font-size:11px}.key-copy code{display:block;margin-top:6px;color:#73818a;font-size:10px}.quick-step{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:12px;margin-top:12px}.quick-step>span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#eaf1f3;color:#5d7280;font-size:11px;font-weight:700}.quick-step>div{min-width:0}.quick-step b{display:block;margin:2px 0 8px;font-size:11px}.copy-row{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid #e2e9ec;border-radius:7px;background:#f7f9fa}.copy-row code{min-width:0;overflow:hidden;color:#344550;text-overflow:ellipsis;font:11px Consolas,monospace;white-space:nowrap}.icon-button{width:28px;height:28px;flex:0 0 28px;border:0;border-radius:6px;background:transparent;color:#62737e;font-size:17px}.icon-button:hover{background:#eaf0f2}.codebox{position:relative;overflow:auto;margin:12px 0;padding:12px;border-radius:8px;background:#17272c;color:#d9eee9;font:11px/1.75 Consolas,monospace;white-space:pre}.codebox.compact{margin:0;padding:10px;font-size:10px}.quick-step small{display:block;margin-top:6px;color:#87949c;font-size:10px}.button-wide{width:100%;margin-top:12px}.quick-footnote{margin:12px 0 0;color:#7b8992;font-size:10px;line-height:1.6}.notice{padding:12px;border:1px solid #e4edeb;border-radius:8px;background:#f7fbfa;color:#63716f;font-size:11px;line-height:1.7}.notice b{color:#344a48}.key-issued{margin-bottom:12px}.inline-actions{display:flex;flex-wrap:wrap;gap:6px}.inline-actions .button{min-height:30px;padding:0 9px;font-size:10px}.model-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.model-item{min-width:0;padding:12px;border:1px solid #e5ebed;border-radius:8px}.model-item b{display:block;overflow-wrap:anywhere;font-size:11px}.model-item small{display:block;margin-top:6px;color:#85929a;font-size:10px}.model-item .price{margin-top:9px;color:#2c746d;font-size:10px;line-height:1.7}.field-label{display:grid;gap:8px;color:#52616b;font-size:11px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.textarea{min-height:90px;padding:10px;border:1px solid #dce5e7;border-radius:8px;resize:vertical;font:12px "Noto Sans SC","Microsoft YaHei UI",sans-serif;outline:0}.form-actions{display:flex;gap:8px;margin-top:12px}.toast{position:fixed;right:20px;bottom:20px;z-index:20;max-width:min(420px,calc(100vw - 40px));padding:12px 14px;border-radius:8px;background:#203238;color:#fff;box-shadow:0 8px 30px #17272c2b;font-size:12px;opacity:0;transform:translateY(8px);transition:.18s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}[hidden]{display:none!important}@media(max-width:1120px){.workspace{grid-template-columns:210px minmax(0,1fr)}.page-content{padding:16px}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-grid{grid-template-columns:1fr}.topbar{padding:0 16px}}@media(max-width:680px){.login-view{grid-template-columns:minmax(0,1fr);gap:12px;padding:18px}.login-brand,.login-card,.login-view footer{grid-column:1}.login-brand{margin-bottom:12px}.login-card{align-self:center;padding:22px}.login-card h1{font-size:23px}.workspace{display:block}.sidebar{position:sticky;z-index:5;top:0;width:100%;height:auto;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line)}.side-brand{padding:0 4px 8px}.side-brand .brand-mark{width:30px;height:30px}.side-caption,.side-bottom{display:none}.sidebar nav{display:flex;overflow:auto;gap:4px}.sidebar nav button{flex:0 0 auto;min-height:36px;padding:0 10px;font-size:10px}.sidebar nav button i{display:none}.topbar{height:56px;padding:0 12px}.top-eyebrow{font-size:8px}.account-menu div{display:none}.page-content{padding:12px}.welcome{align-items:flex-start;margin-bottom:12px}.welcome h1{font-size:19px}.welcome p{max-width:48ch}.summary-grid{gap:8px;margin-bottom:8px}.balance-summary,.stat{min-height:94px;padding:12px}.balance-summary{grid-column:1/-1}.balance-summary strong{font-size:24px}.stat b{margin-top:9px;font-size:17px}.overview-grid,.overview-main,.overview-side{gap:8px}.card{padding:12px}.model-list{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.toast{right:12px;bottom:12px;max-width:calc(100vw - 24px)}}
@media(min-width:901px) and (max-width:1120px){.summary-grid{grid-template-columns:minmax(220px,1.35fr) repeat(3,minmax(110px,1fr))}.overview-grid{grid-template-columns:minmax(0,1.25fr) minmax(260px,.82fr)}}@media(max-width:900px){.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-grid{grid-template-columns:1fr}}
/* Customer dashboard design reference */
.trend-legend{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:10px}.trend-legend i,.trend-legend b{width:8px;height:8px;border-radius:2px;background:#179a88}.trend-legend b{background:#b7d8d3}.trend-chart{height:144px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end;padding-top:12px}.trend-day{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.trend-bars{height:100%;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px;border-bottom:1px solid var(--line)}.trend-bars i,.trend-bars b{width:min(16px,35%);min-height:2px;border-radius:3px 3px 0 0;background:#159583}.trend-bars b{background:#b7d8d3}.trend-day small{color:var(--muted);font-size:9px;white-space:nowrap}.status-value{color:#13866f!important;font-size:20px!important}.overview-main>.card{min-width:0}.overview-grid{align-items:start}.overview-main,.overview-side{min-width:0}.table-wrap{overflow-x:auto}.account-menu{position:relative}.account-menu .account-trigger{display:flex;align-items:center;gap:9px;padding:4px 8px;border:0;border-radius:9px;background:transparent;text-align:left}.account-menu .account-trigger:hover,.account-menu.open .account-trigger{background:#f4f8f7}.account-caret{color:#84918e;font-size:11px}.account-dropdown{position:absolute;z-index:10;top:calc(100% + 8px);right:0;width:184px;padding:6px;border:1px solid var(--line);border-radius:12px;background:#fffdfa;box-shadow:0 10px 28px #223c3a18}.account-dropdown button{width:100%;height:36px;display:flex;align-items:center;gap:9px;padding:0 10px;border:0;border-radius:7px;background:#fff;color:var(--ink);text-align:left;font-size:11px}.account-dropdown button:hover{background:#f4f8f7}.account-dropdown .menu-divider{height:1px;margin:5px 4px;background:var(--line)}.account-notice{position:relative;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#64736e;font-size:16px}.account-notice:hover{background:#f3f7f6}.topbar-right{display:flex;align-items:center;gap:12px}.recent-credit{font-variant-numeric:tabular-nums}@media(min-width:1121px){.page-content{padding:16px}.overview-grid{grid-template-columns:minmax(0,1.6fr) minmax(285px,.8fr);gap:12px}.overview-main,.overview-side{gap:12px}.summary-grid{gap:12px;margin-bottom:12px}.overview-main>.card,.overview-side>.card{padding:16px}}@media(max-width:900px){.overview-grid{grid-template-columns:minmax(0,1fr)}.trend-chart{height:124px}}@media(max-width:680px){.trend-chart{gap:4px}.trend-bars{gap:2px}.trend-bars i,.trend-bars b{width:34%}.topbar-right{gap:4px}.account-menu .account-trigger{padding:2px}.account-menu .account-caret{display:none}}/* Fill the available client workspace height on dashboard */
@media(min-width:1121px){.workspace{min-height:100dvh}.main{min-height:100dvh;display:flex;flex-direction:column}.page-content{flex:1;min-height:0;max-width:none;display:flex;flex-direction:column}.page-content:has(.overview-grid){overflow:visible}.overview-grid{flex:1;min-height:0;grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr)}.overview-main,.overview-side{min-height:100%;display:grid;grid-template-rows:auto minmax(220px,1fr) auto;align-content:stretch}.overview-main>.card:nth-child(2){min-height:0;display:flex;flex-direction:column}.overview-main>.card:nth-child(2) .trend-chart{flex:1;min-height:220px;height:auto}.overview-side{grid-template-rows:auto auto auto}.overview-side>.card{align-self:start}.overview-side>.card:last-child{margin-bottom:0}}
/* Warm editorial client workspace */
.login-view{background:#f5f3ec}.login-card{border-color:#e8e3d7;border-radius:16px;box-shadow:0 22px 70px #263a2c10}.login-card h1,.welcome h1{font-family:Georgia,'Noto Serif SC','Songti SC',serif;font-weight:600}.sidebar{background:#fbfaf6}.sidebar nav button.active{background:#eaf0e8;color:#315f49}.brand-mark{border-color:#d7dfd2;background:#eaf0e8;color:#315f49}.button.primary{border-color:#315f49;background:#315f49}.button.primary:hover{border-color:#254b39;background:#254b39}.balance-summary{background:linear-gradient(115deg,#fffdfa 0%,#f1f4ec 100%)}.trend-summary{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line)}.account-menu>span{border-color:#d7dfd2;background:#eaf0e8;color:#315f49}.pill{background:#edf3e9;color:#3c704e}.notice{border-color:#e3e8dc;background:#f8faf4}.codebox{background:#243a31;color:#e0eee2}.field:focus,.textarea:focus,.login-card input:focus{border-color:#77977d;box-shadow:0 0 0 3px #77977d20}.welcome .kicker,.eyebrow,.top-eyebrow{color:#53775d}
@media(max-width:680px){.workspace{display:block}.sidebar{background:#fbfaf6}}/* Four model cards per desktop row */
.model-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.model-item{padding:16px;min-width:0}.model-item b{font-size:13px;line-height:1.45}.model-item small{font-size:11px}.model-item .price{font-size:11px;line-height:1.8;overflow-wrap:anywhere}
@media(max-width:1100px){.model-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.model-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.model-item{padding:12px}}
@media(max-width:420px){.model-list{grid-template-columns:1fr}}/* Reference dashboard layout */
.workspace{grid-template-columns:248px minmax(0,1fr);grid-template-rows:72px minmax(0,1fr)}.sidebar{grid-row:1/3;top:0}.main{display:contents}.topbar{grid-column:2;grid-row:1;height:72px;padding:0 28px;background:#fbfaf6}.page-content{grid-column:2;grid-row:2;width:100%;max-width:none;padding:28px 32px}.top-brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}.top-brand .brand-mark{width:40px;height:40px;border-radius:8px;background:#f7eee7;border-color:#ead8ca;color:#b8603e}.top-brand b,.top-brand small{display:block}.top-brand b{font:600 18px Georgia,'Noto Serif SC',serif}.top-brand small{margin-top:3px;color:var(--muted);font-size:11px}.top-workspace{margin-right:auto;padding-left:28px;border-left:1px solid var(--line);font-size:13px;font-weight:600}.topbar-right{display:flex;align-items:center;gap:16px}.help-button,.text-action{border:0;background:transparent;color:#52615b;font-size:12px}.text-action{color:#ba6241;font-weight:650}.account-menu .account-trigger{gap:9px}.account-menu .account-trigger>span:first-child{background:#b96645;border-color:#b96645;color:white}.account-dropdown{width:190px}.welcome{margin-bottom:16px}.welcome h1{font-size:34px}.welcome .kicker{display:none}.reference-overview{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(350px,.72fr);gap:14px;margin-bottom:14px}.featured-models,.account-overview{min-width:0}.featured-models .card-head{align-items:flex-start}.featured-models .card-head>div p{margin:7px 0 0}.featured-models table{white-space:nowrap}.featured-models th,.featured-models td{padding:10px 12px}.account-overview>.card-head{margin-bottom:16px}.account-overview .balance-summary{min-height:106px;margin-bottom:16px;padding:16px;border:0;border-radius:9px;background:#faf7f1}.account-overview .balance-summary strong{font:600 34px Georgia,'Noto Serif SC',serif}.outline-accent{border-color:#bf6748;color:#b85d3e;background:transparent}.outline-accent:hover{border-color:#a64e34;background:#fbf1eb}.account-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:15px;border-top:1px solid var(--line)}.account-metrics>div{min-width:0;padding:0 12px;border-right:1px solid var(--line)}.account-metrics>div:first-child{padding-left:0}.account-metrics>div:last-child{padding-right:0;border:0}.account-metrics span,.account-metrics small{display:block;color:var(--muted);font-size:10px}.account-metrics b{display:block;overflow:hidden;margin-top:10px;color:var(--ink);font:600 20px Georgia,'Noto Serif SC',serif;text-overflow:ellipsis;white-space:nowrap}.account-metrics small{margin-top:6px}.overview-grid{grid-template-columns:minmax(0,1.5fr) minmax(310px,.7fr);gap:14px}.overview-main,.overview-side{gap:14px}.connect-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:-2px 0 16px;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:#f9f7f1}.connect-strip>div{min-width:0}.connect-strip label{display:block;margin-bottom:6px;color:#293a32;font-size:12px;font-weight:650}.connect-strip .copy-row{background:#fffdfa}.connect-strip small{display:block;margin-top:7px;color:var(--muted);font-size:10px}.call-state.is-ok{color:#25825b}.trend-bars i{background:#315f49}.trend-bars b{background:#bf6748}.trend-legend i{background:#315f49}.trend-legend b{background:#bf6748}.support-entry+.support-entry{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.support-entry>b{font-size:12px}.support-entry p{margin:7px 0;color:var(--muted);font-size:11px;line-height:1.6}.amount-positive{color:#21855b!important}.amount-negative{color:#bd6242!important}.featured-models .table-wrap{max-width:100%}.featured-models th{font-size:10px}.featured-models td{font-size:11px}.featured-models th:nth-child(4),.featured-models td:nth-child(4){min-width:138px}
@media(max-width:1200px){.reference-overview{grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr)}.overview-grid{grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr)}.page-content{padding:22px}.welcome h1{font-size:29px}}
@media(max-width:900px){.workspace{display:block}.main{display:block}.topbar{height:62px;padding:0 16px}.top-brand{display:none}.top-workspace{display:none}.topbar-right{margin-left:auto}.page-content{display:block;padding:16px}.reference-overview,.overview-grid{grid-template-columns:1fr}.welcome h1{font-size:25px}}
@media(max-width:680px){.connect-strip{grid-template-columns:1fr;gap:14px;padding:14px}.account-metrics b{font-size:17px}.topbar{height:54px}.help-button{display:none}.welcome{gap:8px}.welcome h1{font-size:22px}}.support-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.72fr);gap:14px}.support-main,.support-aside{display:grid;align-content:start;gap:14px}.billing-summary{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:22px}.billing-balance{display:grid;justify-items:start;align-content:center;gap:9px;padding-right:20px;border-right:1px solid var(--line)}.billing-balance>span{color:var(--muted);font-size:12px}.billing-balance>b{font:600 36px Georgia,'Noto Serif SC',serif}.billing-balance>small,.billing-plan>small{color:var(--muted);font-size:10px}.billing-plan{position:relative;align-content:center;padding:4px 0}.billing-plan .pill{position:absolute;top:0;right:0}.billing-plan h2{margin:10px 0;font:600 27px Georgia,'Noto Serif SC',serif}.billing-plan p{color:var(--muted);font-size:12px}.support-layout .columns{align-items:start}.support-layout .form-grid{grid-template-columns:1fr}.support-layout .form-grid label[style]{grid-column:1}.support-aside .card-head{margin-bottom:8px}
@media(max-width:980px){.support-layout{grid-template-columns:1fr}.billing-summary{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.billing-summary{grid-template-columns:1fr}.billing-balance{padding:0 0 16px;border-right:0;border-bottom:1px solid var(--line)}}/* Sidebar recreation from approved customer dashboard reference */
.sidebar{width:248px;min-width:248px;padding:28px 18px 20px;background:#fbfaf6;border-right:1px solid #e9e5dc}.side-brand{gap:18px;padding:12px 12px 36px}.side-brand .brand-mark{width:58px;height:58px;flex:0 0 58px;border:1px solid #d9e2d5;border-radius:19px;background:#eef2e9;color:#315f49}.brand-cube svg{width:38px;height:38px;fill:none;stroke:#315f49;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.side-brand b{font-size:19px;letter-spacing:0}.side-brand small{margin-top:7px;font-size:14px}.side-caption{margin:0 18px 18px;color:#7c898d;font-size:14px;font-weight:600;letter-spacing:.4px}.sidebar nav{display:grid;gap:8px}.sidebar nav button{min-height:60px;gap:18px;padding:0 18px;border-radius:13px;color:#526675;font-size:16px;font-weight:450}.sidebar nav button i{width:26px;height:26px;display:grid;place-items:center;color:#788d9e}.sidebar nav button i svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}.sidebar nav button span{line-height:1}.sidebar nav button:hover{background:#f2f3ee;color:#315f49}.sidebar nav button.active{background:#eaf0e8;color:#315f49;font-weight:650}.sidebar nav button.active i{color:#315f49}.side-bottom{gap:9px;margin: auto 0 0;padding:12px 14px 2px;color:#82918b;font-size:12px;white-space:nowrap}.secure-dot{width:9px;height:9px;flex:0 0 9px;background:#39b48c;box-shadow:0 0 0 4px #39b48c1c}
@media(max-width:900px){.sidebar{width:auto;min-width:0;padding:9px 12px 8px}.side-brand{gap:9px;padding:0 5px 9px}.side-brand .brand-mark{width:34px;height:34px;flex-basis:34px;border-radius:11px}.brand-cube svg{width:24px;height:24px}.side-brand b{font-size:13px}.side-brand small{margin-top:2px;font-size:10px}.side-caption,.side-bottom{display:none}.sidebar nav{display:flex;overflow-x:auto;gap:4px}.sidebar nav button{min-height:39px;gap:8px;padding:0 11px;border-radius:9px;font-size:11px}.sidebar nav button i{width:17px;height:17px}.sidebar nav button i svg{width:17px;height:17px}}/* Layout guard: keep desktop sidebar in the workspace grid, collapse only on small screens */
@media(min-width:901px){.workspace{display:grid!important;grid-template-columns:248px minmax(0,1fr)!important;grid-template-rows:72px minmax(0,1fr)!important;overflow-x:hidden}.sidebar{grid-column:1;grid-row:1/3;width:248px;min-width:0;height:100dvh;position:sticky;left:0;align-self:start}.main{display:contents!important}.topbar{grid-column:2;grid-row:1;min-width:0}.page-content{grid-column:2;grid-row:2;min-width:0;width:100%;margin:0;overflow-x:hidden}}
@media(max-width:900px){.workspace{display:block!important;overflow-x:hidden}.main{display:block!important}.sidebar{display:flex;width:100%;min-width:0;height:auto;position:sticky;left:auto;top:0}.page-content{width:100%;min-width:0;margin:0}}
.sidebar nav button{min-width:0}.sidebar nav button span{white-space:nowrap}/* Header alignment: full-width top bar above the sidebar and workspace */
@media(min-width:901px){.workspace{grid-template-columns:248px minmax(0,1fr)!important;grid-template-rows:72px minmax(0,1fr)!important}.sidebar{grid-column:1;grid-row:2;height:calc(100dvh - 72px);position:sticky;top:72px;align-self:start}.main{display:contents!important}.topbar{grid-column:1/-1!important;grid-row:1!important;width:100%;min-width:0;display:flex;justify-content:flex-start;gap:26px;padding:0 32px}.top-brand{flex:0 0 auto}.top-workspace{flex:0 0 auto;margin:0;padding-left:26px}.topbar-right{flex:1 1 auto;min-width:0;margin-left:auto;justify-content:flex-end;gap:20px}.account-menu{flex:0 0 auto;min-width:0}.account-menu .account-trigger{width:auto!important;max-width:300px;flex:0 1 auto;min-width:0}.account-identity{display:block;min-width:0;max-width:190px;text-align:left}.account-identity b,.account-identity small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-caret{flex:0 0 auto}.page-content{grid-column:2!important;grid-row:2!important;min-width:0;width:100%;margin:0}}
.top-brand .brand-cube{display:grid}.top-brand .brand-cube svg{width:34px;height:34px;fill:none;stroke:#b8603e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){.workspace{display:block!important}.sidebar{top:0;height:auto}.topbar{display:flex;justify-content:space-between;gap:8px}.topbar-right{flex:0 0 auto}.account-menu .account-trigger{width:auto!important;max-width:170px}.account-identity{max-width:100px}.account-caret{display:none}}
.account-menu .account-trigger #avatar{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;font-size:13px;font-weight:700}.account-menu .account-trigger .account-identity{flex:0 1 auto}

/* Keep the brand only in the global header; avoid a duplicate brand block in the sidebar */
.sidebar .side-brand{display:none}.sidebar{padding-top:30px}.sidebar .side-caption{margin-top:4px}
@media(max-width:1200px){.reference-overview{grid-template-columns:minmax(0,1fr)}.featured-models{min-width:0}.account-overview{min-width:0}}
/* Generated transparent PNG icon pack */
.ui-icon{width:17px;height:17px;flex:0 0 auto;display:inline-block;object-fit:contain;vertical-align:middle;image-rendering:auto}
.icon-button .ui-icon{width:17px;height:17px}
.button .ui-icon,.text-action .ui-icon,.card-head button .ui-icon{width:17px;height:17px}
.welcome-icon{width:44px;height:44px;flex:0 0 44px;padding:3px;border:1px solid #e9ddce;border-radius:12px;background:#faf4eb;color:#b96543}
.welcome-icon .ui-icon{width:36px;height:36px}
.top-workspace{display:flex;align-items:center;gap:8px}.top-workspace .ui-icon{width:14px;height:14px}
.help-button{display:inline-flex;align-items:center;gap:8px}.account-dropdown button{gap:10px}.brand-cube .ui-icon{width:30px;height:30px}
.login-brand .brand-cube .ui-icon{width:100%;height:100%;object-fit:contain}.top-brand .brand-cube .ui-icon{width:34px;height:34px}
.sidebar nav button.active .ui-icon{filter:saturate(1.12)}
.icon-button:hover .ui-icon{transform:translateY(-1px);transition:transform .15s ease}
@media(prefers-reduced-motion:reduce){.icon-button:hover .ui-icon{transition:none}}
.sidebar nav button i .ui-icon{width:23px;height:23px}
@media(max-width:900px){.sidebar nav button i .ui-icon{width:17px;height:17px}}

/* Align the header divider with the 248px sidebar boundary */
@media(min-width:901px){
  .topbar{display:grid;grid-template-columns:216px max-content minmax(0,1fr);column-gap:0;align-items:center}
  .top-brand{width:max-content;min-width:0}
  .top-workspace{grid-column:2;height:32px;margin:0;padding-left:26px;border-left:1px solid var(--line)}
  .topbar-right{grid-column:3;justify-self:end;width:auto}
}
/* Account overview metrics: align icon and label, keep values and actions on a shared rhythm. */
@media(min-width:761px){
  #pageContent .dashboard-account .account-overview-content{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;align-items:stretch}
  #pageContent .dashboard-account .dashboard-metric{height:112px!important;min-height:112px!important;box-sizing:border-box;display:grid!important;grid-template-columns:30px minmax(0,1fr)!important;grid-template-rows:30px minmax(0,1fr)!important;align-content:stretch;align-items:start;column-gap:10px!important;row-gap:7px!important;padding:12px!important;border:1px solid #e7ebe4!important;border-radius:10px!important;background:#fff!important;overflow:hidden}
  #pageContent .dashboard-account .dashboard-metric.overview-plan{background:#faf7f1!important;border-color:#eee7dc!important}
  #pageContent .dashboard-account .dashboard-metric .metric-icon{grid-column:1;grid-row:1;width:30px!important;height:30px!important;border-radius:9px!important;align-self:center;justify-self:start}
  #pageContent .dashboard-account .dashboard-metric .metric-icon .ui-icon{width:17px!important;height:17px!important}
  #pageContent .dashboard-account .dashboard-metric>div{grid-column:2;grid-row:1 / span 2;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto minmax(0,1fr) auto!important;align-content:stretch;align-items:start;justify-items:start;gap:4px!important;width:100%;min-width:0;height:100%;text-align:left}
  #pageContent .dashboard-account .dashboard-metric>div>span{font-size:11px!important;line-height:1.35!important;white-space:nowrap}
  #pageContent .dashboard-account .dashboard-metric>div>b,#pageContent .dashboard-account .dashboard-metric.dashboard-balance>div>b{display:flex;align-items:baseline;gap:5px;margin:0!important;font-size:23px!important;line-height:1.15!important;letter-spacing:-.035em!important}
  #pageContent .dashboard-account .dashboard-metric.overview-plan>div>b{font-size:20px!important;letter-spacing:-.02em!important}
  #pageContent .dashboard-account .dashboard-metric>div>b small{font-size:11px!important}
  #pageContent .dashboard-account .dashboard-metric>div>small{align-self:end;font-size:10px!important;line-height:1.3!important;white-space:normal}
  #pageContent .dashboard-account .dashboard-metric button[data-go],#pageContent .dashboard-account .dashboard-metric.dashboard-balance .button{grid-row:auto!important;grid-column:auto!important;align-self:end;justify-self:start;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;font-size:10px!important;line-height:1.2!important;font-weight:650!important;white-space:nowrap}
  #pageContent .dashboard-account .dashboard-metric.dashboard-balance .button{justify-self:start;padding:0 8px!important;min-height:24px!important;border:1px solid #ead7cb!important;border-radius:7px!important;background:#fffaf6!important;color:#9a6347!important}
}
@media(max-width:900px) and (min-width:761px){#pageContent .dashboard-account .dashboard-metric{grid-template-columns:26px minmax(0,1fr)!important;column-gap:8px!important;padding:10px!important}#pageContent .dashboard-account .dashboard-metric .metric-icon{width:26px!important;height:26px!important}#pageContent .dashboard-account .dashboard-metric>div>span{font-size:10px!important}#pageContent .dashboard-account .dashboard-metric>div>b,#pageContent .dashboard-account .dashboard-metric.dashboard-balance>div>b{font-size:20px!important}}
@media(min-width:761px){
  #pageContent.page-content:has(.key-management-card){height:calc(100dvh - 71px)!important;min-height:0!important;box-sizing:border-box;grid-template-rows:minmax(0,1fr) auto!important;gap:12px!important;padding:12px!important;overflow:hidden!important;scrollbar-gutter:auto!important}
  #pageContent.page-content:has(.key-management-card)>.key-management-card{height:100%!important;min-height:0!important;margin:0!important}
  #pageContent.page-content:has(.key-management-card)>.key-security-panel{min-height:44px;margin:0!important}
}
/* Billing ledger layout follows the saved 06-billing-ledger design reference. */
@media(min-width:901px){
  #pageContent:has(#billingSearch){height:calc(100dvh - 71px)!important;min-height:0!important;box-sizing:border-box;grid-template-rows:112px minmax(0,1fr)!important;gap:12px!important;padding:12px!important;overflow:hidden!important;scrollbar-gutter:auto!important}
  #pageContent:has(#billingSearch)>.card:first-child{display:contents!important}
  #pageContent:has(#billingSearch)>.card:first-child>.card-head{display:none!important}
  #pageContent:has(#billingSearch) .record-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;height:112px;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;order:1!important}
  #pageContent:has(#billingSearch) .record-stats>div{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:14px;row-gap:4px;min-width:0;min-height:0;padding:16px 18px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa}
  #pageContent:has(#billingSearch) .record-stats>div>span{grid-column:2;grid-row:1;color:#78867c;font-size:12px}
  #pageContent:has(#billingSearch) .record-stats>div>b{grid-column:2;grid-row:2;font:600 27px/1.15 Georgia,'Noto Serif SC',serif}
  #pageContent:has(#billingSearch)>.card:nth-child(2){display:flex!important;flex-direction:column;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa;overflow:hidden}
  #pageContent:has(#billingSearch)>.card:nth-child(2)>.card-head{display:flex!important;align-items:center;flex:0 0 64px;min-height:64px!important;width:100%;margin:0!important;padding:12px 14px!important;border:0!important;background:transparent!important;order:1!important}
  #pageContent:has(#billingSearch)>.card:nth-child(2)>.card-head>h2{display:none!important}
  #pageContent:has(#billingSearch) .table-tools{display:grid!important;grid-template-columns:minmax(260px,1.25fr) minmax(200px,.85fr) minmax(160px,1fr);align-items:center;gap:12px;width:100%;min-width:0;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}
  #pageContent:has(#billingSearch) .table-tools>.filter-field{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-width:0;width:100%;margin:0;color:#4b5b50;font-size:12px;white-space:nowrap}
  #pageContent:has(#billingSearch) #billingDate,#pageContent:has(#billingSearch) #billingType,#pageContent:has(#billingSearch) #billingSearch{width:100%;min-width:0;height:38px;box-sizing:border-box}
  #pageContent:has(#billingSearch) .table-wrap{display:flex!important;flex:1 1 auto;flex-direction:column;min-height:0!important;height:auto!important;margin:0!important;padding:0 12px 12px!important;border:0!important;border-radius:0!important;background:transparent!important;order:2!important;overflow:auto}
  #pageContent:has(#billingSearch) .table-wrap table{width:100%;height:100%;min-width:640px;table-layout:fixed}
  #pageContent:has(#billingSearch) .table-wrap tbody tr:has(td.empty){height:100%}
  #pageContent:has(#billingSearch) .table-wrap td.empty{height:100%;vertical-align:middle;text-align:center}
}

/* Full-width billing and support workspace */
.support-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;width:100%;align-content:start}
.support-overview{display:grid;grid-template-columns:minmax(240px,1.05fr) minmax(220px,.8fr) minmax(220px,.8fr);align-items:stretch;gap:24px;padding:22px 26px}
.support-overview .billing-balance{padding-right:24px;border-right:1px solid var(--line)}
.support-overview .billing-balance>b{font-size:34px}
.support-overview .billing-plan{padding:8px 10px}
.billing-tip{display:flex;align-items:center;gap:13px;align-self:center;min-height:88px;padding:18px 20px;border:1px solid #e6e8dc;border-radius:12px;background:#f8f9f3}
.tip-mark{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;border-radius:50%;background:#e6efe1;color:#315f49;font-size:17px;font-weight:700}
.billing-tip b,.billing-tip small{display:block}.billing-tip b{color:var(--ink);font-size:13px}.billing-tip small{margin-top:6px;color:var(--muted);font-size:11px;line-height:1.5}
.support-form-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:stretch;gap:18px}
.support-form-card{min-width:0;padding:22px 24px}
.support-form-card .card-head{align-items:center;margin-bottom:12px}
.support-form-card .card-head h2{margin:5px 0 0;font-family:Georgia,'Noto Serif SC',serif;font-size:21px;font-weight:600}
.section-kicker{color:#8b9387;font-size:9px;font-weight:700;letter-spacing:1.2px}
.step-badge{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--line);border-radius:50%;color:#879087;font:600 11px Georgia,serif}
.support-form-card>.subtle{min-height:36px;margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.6}
.support-form-card .form-grid{grid-template-columns:minmax(0,1fr);gap:14px}
.support-inline-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.7fr);gap:14px}
.support-form-card textarea{min-height:102px;resize:vertical}
.support-form-card .form-actions{margin-top:2px}
.support-records{min-width:0;padding:4px 22px 18px}
.support-records>.card{padding:12px 0 0;border:0;box-shadow:none;background:transparent}
.support-records>.card .card-head{padding:0 0 14px;border-bottom:1px solid var(--line)}
.support-records>.card .card-head h2{font-family:Georgia,'Noto Serif SC',serif;font-size:19px}
.support-records>.card .card-head p{color:var(--muted);font-size:11px}
.support-records .table-wrap{width:100%;overflow:auto}
@media(max-width:1100px){.support-overview{grid-template-columns:minmax(220px,1fr) minmax(210px,1fr)}.billing-tip{grid-column:1/-1;min-height:64px}.support-form-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.support-layout{gap:12px}.support-overview,.support-form-grid{grid-template-columns:1fr;gap:12px}.support-overview{padding:18px}.support-overview .billing-balance{padding:0 0 16px;border-right:0;border-bottom:1px solid var(--line)}.support-overview .billing-plan{padding:4px 0 8px}.billing-tip{grid-column:auto}.support-form-card{padding:18px}.support-form-card>.subtle{min-height:0}.support-inline-fields{grid-template-columns:1fr}.support-records{padding:2px 14px 14px}}

/* Client workspace filters and account security page */
.table-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.table-tools .subtle{white-space:nowrap}.table-search,.table-tools select{height:34px;min-width:180px;padding:0 10px;border:1px solid var(--line);border-radius:7px;background:#fffdfa;color:var(--ink);font:11px 'Noto Sans SC',sans-serif;outline:0}.table-tools select{min-width:132px}.table-search:focus,.table-tools select:focus{border-color:#9eb9ab;box-shadow:0 0 0 3px #315f4912}.filter-empty{padding:12px;color:var(--muted);font-size:12px;text-align:center}.model-item[hidden],tr[hidden]{display:none!important}.password-card{width:min(100%,760px)}.password-form{max-width:560px}.password-form .form-actions,.password-form .login-error{grid-column:1/-1}.password-form .login-error{margin:0;color:#ad5143;font-size:11px}.password-form .login-error.success{color:#21855b}

/* WeChat Native Pay QR checkout */
.payment-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:28px 24px 22px;border:1px solid var(--line);border-radius:16px;background:#fffdfa;color:var(--ink);text-align:center;box-shadow:0 24px 80px #162c2826}.payment-dialog::backdrop{background:#182a27a8;backdrop-filter:blur(3px)}.payment-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f3ef;color:#62706a;font-size:22px;cursor:pointer}.payment-kicker{color:#238568;font-size:10px;font-weight:700;letter-spacing:1.4px}.payment-dialog h2{margin:8px 0 0;font:600 21px Georgia,'Noto Serif SC',serif}.payment-amount{margin:8px 0 14px;color:#1d332c;font:600 30px Georgia,serif}.payment-qr{display:block;width:240px;height:240px;max-width:70vw;max-height:70vw;margin:0 auto 12px;padding:8px;border:1px solid var(--line);border-radius:10px;background:white}.payment-state{margin:8px 0;color:#416257;font-size:12px}.payment-dialog>small{display:block;margin:8px 0 16px;color:var(--muted);font:10px Consolas,monospace;overflow-wrap:anywhere}.payment-dialog>[data-payment-check]{width:100%;justify-content:center}.pill.is-paid{background:#e7f5ed;color:#257748}

/* Expanded client workspace pages */
.studio-card,.profile-card,.redeem-card{width:100%;min-width:0}.studio-card .studio-output{max-height:560px;white-space:pre-wrap;overflow-wrap:anywhere}.studio-result{margin-top:18px}.studio-media{display:block;max-width:min(100%,900px);max-height:640px;margin:12px auto;border-radius:12px;object-fit:contain}.studio-result>a{display:inline-block;margin:6px;color:#315f49}.studio-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.studio-error{color:#a53d35}.profile-form{max-width:900px}.profile-form .form-actions{grid-column:1/-1}.redeem-form{max-width:700px;margin:20px 0}.redeem-card>.notice{margin-top:18px}.sidebar nav{overflow-y:visible;max-height:none}@media(max-width:680px){.studio-options{grid-template-columns:1fr}.sidebar nav{max-height:none}}

.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}.plan-card{display:grid;align-content:start;gap:12px;min-width:0;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.plan-card-heading{display:flex;justify-content:space-between;align-items:start;gap:12px}.plan-card-heading h3{margin:7px 0 0;font:600 20px Georgia,'Noto Serif SC',serif}.plan-card-heading>b{font:600 24px Georgia,'Noto Serif SC',serif;white-space:nowrap}.plan-card>p,.plan-card ul{margin:0;color:var(--muted);font-size:12px;line-height:1.7}.plan-card ul{padding-left:18px}.plan-card>.button{margin-top:8px}.current-subscription{display:flex;justify-content:space-between;align-items:center;gap:16px}.current-subscription h2{margin:6px 0;font:600 24px Georgia,'Noto Serif SC',serif}.affiliate-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);align-items:center;gap:24px;padding:26px;background:linear-gradient(115deg,#eff4e9,#fbfaf6 68%)}.affiliate-hero h2{margin:8px 0;font:600 28px Georgia,'Noto Serif SC',serif}.affiliate-hero p{color:var(--muted);font-size:12px;line-height:1.7}.affiliate-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.affiliate-stats>div{padding:12px;border-left:1px solid #ccd8c9}.affiliate-stats span,.affiliate-stats b{display:block}.affiliate-stats span{color:var(--muted);font-size:10px}.affiliate-stats b{margin-top:8px;font-size:18px}.affiliate-invite{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px}.affiliate-code{display:block;margin-top:6px;font:700 20px Consolas,monospace;letter-spacing:.08em}.affiliate-share{display:flex;align-items:center;gap:10px;min-width:0}.affiliate-share code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.affiliate-share+.subtle{grid-column:1/-1;margin:0}.affiliate-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.affiliate-actions>.card>h2{margin-top:0;font-size:16px}@media(max-width:760px){.affiliate-hero{grid-template-columns:1fr}.affiliate-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.affiliate-invite{grid-template-columns:1fr}.affiliate-share{flex-wrap:wrap}.affiliate-actions{grid-template-columns:1fr}}

/* Wangji client sidebar refresh */
:root{--ink:#111e33;--muted:#697789;--line:#e8e4dc;--soft:#f8f7f3;--accent:#c94f3d;--accent-deep:#17243a}
.login-view{background:#f8f7f3}.login-brand .brand-mark,.top-brand .brand-mark{overflow:hidden;background:#fff;border-color:#e8e1d3}.login-brand .brand-cube .ui-icon,.top-brand .brand-cube .ui-icon{width:100%;height:100%;object-fit:contain;border-radius:inherit}.sidebar{display:flex;flex-direction:column;gap:0;padding:16px 13px 14px;background:#fffefa;border-right:1px solid #e8e3d9;overflow:hidden}.sidebar .side-brand{display:flex;align-items:center;gap:11px;min-height:58px;margin:0 2px 13px;padding:5px 8px;text-decoration:none;border-bottom:1px solid #eee9df}.side-brand>img{display:block;width:42px;height:42px;flex:0 0 42px;object-fit:contain;border-radius:11px;background:#fff}.side-brand b{font-size:15px;color:#142139}.side-brand small{margin-top:3px;color:#89909a;font-size:10px}.side-caption{margin:2px 10px 5px;color:#92949a;font-size:10px;font-weight:700;letter-spacing:1px}.sidebar nav{display:grid;grid-template-columns:1fr;gap:2px;max-height:none;overflow:visible;min-height:0}.sidebar nav button{min-height:35px;gap:11px;padding:0 11px;border-radius:9px;color:#596779;font-size:12px;font-weight:520;transition:background .16s ease,color .16s ease,transform .16s ease}.sidebar nav button i{width:19px;height:19px;display:grid;place-items:center;flex:0 0 19px;border-radius:6px;color:#263752}.sidebar nav button i .ui-icon{width:17px;height:17px;object-fit:contain}.sidebar nav button:hover{background:#f6eee9;color:#a94132;transform:translateX(1px)}.sidebar nav button.active{background:#f8e9e3;color:#a64031;font-weight:700}.sidebar nav button.active i{background:#fff8f4}.side-bottom{margin-top:auto;padding:9px 10px 2px;border-top:1px solid #eee9df;color:#8b9298;font-size:10px}.secure-dot{width:7px;height:7px;flex-basis:7px;background:#34ad88;box-shadow:0 0 0 3px #34ad881a}
@media(min-width:901px){.workspace{grid-template-columns:216px minmax(0,1fr)!important}.sidebar{width:216px;min-width:216px;height:calc(100dvh - 72px);overflow:hidden}.sidebar nav{flex:1 1 auto}.topbar{border-bottom-color:#e8e3d9}.page-content{background:#f8f7f3}}
@media(max-height:760px) and (min-width:901px){.sidebar{padding:9px 11px 8px}.sidebar .side-brand{min-height:48px;margin-bottom:7px}.side-brand>img{width:34px;height:34px;flex-basis:34px}.side-brand b{font-size:13px}.side-caption{margin-bottom:2px}.sidebar nav button{min-height:30px;gap:9px;font-size:11px}.sidebar nav button i{width:17px;height:17px;flex-basis:17px}.sidebar nav button i .ui-icon{width:15px;height:15px}.side-bottom{padding-top:6px}}
@media(max-height:650px) and (min-width:901px){.sidebar{padding:6px 9px}.sidebar .side-brand{min-height:40px;margin-bottom:4px}.side-brand>img{width:29px;height:29px;flex-basis:29px}.side-brand small{display:none}.side-caption{font-size:9px}.sidebar nav button{min-height:27px;font-size:10px}.sidebar nav button i .ui-icon{width:14px;height:14px}.side-bottom{font-size:9px;padding-top:4px}}
@media(max-width:900px){.sidebar{display:block;overflow:visible;padding:7px 10px;background:#fffefa}.sidebar .side-brand{display:flex;min-height:38px;margin:0 0 5px;padding:0 3px;border:0}.side-brand>img{width:31px;height:31px;flex-basis:31px}.side-brand b{font-size:12px}.side-brand small{font-size:9px}.sidebar nav{display:flex;max-height:none;overflow-x:auto;overflow-y:hidden;gap:3px}.sidebar nav button{min-height:35px;padding:0 9px;font-size:10px}.sidebar nav button i{width:16px;height:16px;flex-basis:16px}.sidebar nav button i .ui-icon{width:15px;height:15px}}
@media(min-width:901px){.sidebar{padding:9px 11px 8px}.sidebar .side-brand{min-height:42px;margin-bottom:5px}.side-brand>img{width:31px;height:31px;flex-basis:31px}.side-brand small{display:none}.sidebar .side-caption{margin:0 9px 2px}.sidebar nav{gap:0}.sidebar nav button{min-height:28px;gap:8px;padding:0 9px;font-size:10.5px}.sidebar nav button i{width:16px;height:16px;flex-basis:16px}.sidebar nav button i .ui-icon{width:14px;height:14px}.sidebar .side-bottom{padding:5px 8px 1px;font-size:9px}}
@media(max-height:680px) and (min-width:901px){.sidebar{padding:5px 9px}.sidebar .side-brand{min-height:34px;margin-bottom:2px}.side-brand>img{width:26px;height:26px;flex-basis:26px}.sidebar nav button{min-height:25px;font-size:10px}.sidebar .side-bottom{padding-top:3px}}
@media(min-width:901px){.topbar .top-brand{display:none!important}.workspace{grid-template-rows:56px minmax(0,1fr)!important}.sidebar{grid-row:2;height:calc(100dvh - 56px);top:56px}}
.sidebar .side-brand{display:flex!important}
.sidebar nav button i .ui-icon{object-fit:contain;background:transparent}

/* Scheme 3: Natural studio — sage, forest ink, paper, and copper */
:root{--ink:#20352d;--muted:#748078;--line:#e3e7df;--soft:#f3f5ef;--accent:#6f8c72;--accent-deep:#365541;--space:14px;color:#20352d;background:#f2f4ef}
body{background:#f2f4ef;color:#20352d}.login-view{background:#edf1e9}.login-card,.card,.balance-summary,.stat{border-color:#e1e6de;background:#fffefa;box-shadow:0 2px 10px #24392d08}.button.primary{border-color:#48674f;background:#48674f}.button.primary:hover{border-color:#304b38;background:#304b38}.eyebrow,.top-eyebrow,.welcome .kicker{color:#a76b4e}.workspace{grid-template-columns:244px minmax(0,1fr)!important;background:#f2f4ef}.sidebar{grid-column:1;grid-row:2;height:calc(100dvh - 68px);top:68px;padding:12px 13px 10px;background:#f8f9f5;border-right:1px solid #e1e6de;overflow:hidden}.sidebar .side-brand{display:flex!important;min-height:52px;margin:0 2px 10px;padding:4px 6px 10px;gap:10px;border-bottom:1px solid #e4e8e1}.side-brand>img{width:38px;height:38px;flex:0 0 38px;object-fit:contain;border-radius:10px;background:#fff}.side-brand b{font:650 15px "Noto Sans SC","Microsoft YaHei UI",sans-serif;color:#20352d}.side-brand small{margin-top:3px;color:#7c8980;font-size:10px}.sidebar .side-caption{margin:2px 10px 5px;color:#89958b;font-size:9px;font-weight:700;letter-spacing:1.2px}.sidebar nav{flex:1;display:grid;align-content:start;gap:2px;overflow:visible;max-height:none}.sidebar nav button{min-height:35px;gap:10px;padding:0 10px;border-radius:8px;color:#57675c;font-size:11.5px;font-weight:520}.sidebar nav button i{width:19px;height:19px;flex:0 0 19px;display:grid;place-items:center;border-radius:6px}.sidebar nav button i .ui-icon{width:16px;height:16px;object-fit:contain}.sidebar nav button:hover{background:#edf1e9;color:#365541}.sidebar nav button.active{background:#e4ebe0;color:#365541;font-weight:700}.sidebar nav button.active i{background:#f7f8f4}.sidebar .side-bottom{margin-top:auto;padding:8px 9px 1px;border-top:1px solid #e4e8e1;color:#829087;font-size:9px}.sidebar .secure-dot{background:#6d9a76;box-shadow:0 0 0 3px #6d9a761a}.main{display:contents!important}.topbar{grid-column:1/-1!important;grid-row:1!important;height:68px;width:100%;justify-content:flex-start;gap:22px;padding:0 28px;background:#fbfcf9;border-bottom:1px solid #e1e6de}.topbar .top-brand{display:flex;align-items:center;gap:9px;flex:0 0 205px;text-decoration:none}.topbar .top-brand .brand-mark{width:38px;height:38px;overflow:hidden;border:1px solid #e1e6de;border-radius:10px;background:white}.topbar .top-brand .brand-cube .ui-icon{width:100%;height:100%;object-fit:contain}.topbar .top-brand b{display:block;color:#20352d;font-size:14px}.topbar .top-brand small{display:block;margin-top:2px;color:#7c8980;font-size:10px}.top-workspace{margin:0;padding-left:20px;border-left:1px solid #e1e6de;color:#365541;font-size:12px}.topbar-right{flex:1;margin-left:auto}.help-button{color:#607066}.account-trigger{border-radius:9px}.account-trigger:hover{background:#eff2ec}.account-trigger>span:first-child{background:#e5ede2;color:#365541}.page-content{grid-column:2!important;grid-row:2!important;width:100%;max-width:none;margin:0;padding:26px 30px 34px;background:#f2f4ef}.welcome{margin-bottom:18px}.welcome h1{color:#20352d;font-family:"Noto Serif SC","Songti SC",serif;font-size:25px;letter-spacing:0}.welcome p{color:#758178}.summary-grid{gap:14px;margin-bottom:14px}.balance-summary{background:linear-gradient(115deg,#fffefa,#f0f4ec)}.balance-summary strong,.stat b{color:#20352d}.stat{background:#fbfcf9}.overview-grid{gap:14px}.overview-main,.overview-side{gap:14px}.card{padding:18px;border-radius:11px}.card-head h2{color:#263b30}.card-head button{color:#49684f}.table-wrap{border:1px solid #e8ebe5;border-radius:8px}th{background:#f3f5f0;color:#758178}td{border-bottom-color:#edf0ea}.notice,.connect-strip{border-color:#e1e7de;background:#f4f6f1}.notice{color:#526558}.field,.login-card input{border-color:#dce3d9;background:#fffefa}.field:focus,.login-card input:focus{border-color:#78927a;box-shadow:0 0 0 3px #78927a20}.outline-accent{border-color:#b77b5c;color:#9b6348;background:#fffefa}.outline-accent:hover{background:#f8eee8}.toast{background:#304b38}
@media(min-width:901px){.sidebar nav button{min-height:35px}.workspace{grid-template-columns:244px minmax(0,1fr)!important;grid-template-rows:68px minmax(0,1fr)!important}.sidebar{height:calc(100dvh - 68px)}.page-content{min-width:0}}
@media(max-height:780px) and (min-width:901px){.sidebar{padding-top:8px;padding-bottom:6px}.sidebar .side-brand{min-height:44px;margin-bottom:5px;padding-bottom:6px}.side-brand>img{width:32px;height:32px;flex-basis:32px}.sidebar nav button{min-height:31px;font-size:10.5px}.sidebar nav button i .ui-icon{width:14px;height:14px}.sidebar .side-bottom{padding-top:5px}}
@media(max-width:900px){.workspace{display:block!important}.main{display:block!important}.sidebar{position:sticky;z-index:5;top:0;width:100%;height:auto;min-width:0;padding:7px 10px;background:#f8f9f5;border-bottom:1px solid #e1e6de}.sidebar .side-brand{min-height:34px;margin:0 0 4px;padding:0 3px;border:0}.side-brand>img{width:28px;height:28px;flex-basis:28px}.side-brand small{display:none}.side-caption,.side-bottom{display:none}.sidebar nav{display:flex;overflow-x:auto;overflow-y:hidden;gap:3px}.sidebar nav button{min-height:33px;padding:0 9px;font-size:10px}.topbar{height:56px;padding:0 14px}.topbar .top-brand{display:none}.page-content{padding:16px;background:#f2f4ef}.welcome h1{font-size:22px}}
@media(prefers-reduced-motion:reduce){.sidebar nav button{transition:none}}
/* Dashboard recreation: Natural studio desktop */
:root{--ink:#20372c;--muted:#7c8780;--line:#e4e8e1;--soft:#f3f5f0;--accent:#54775c;--accent-deep:#294635;--space:14px}
body{background:#f4f6f2;color:var(--ink)}
.workspace{min-height:100dvh;display:grid!important;grid-template-columns:278px minmax(0,1fr)!important;grid-template-rows:62px minmax(0,1fr)!important;background:#f4f6f2}
.main{display:contents!important}
.sidebar{grid-column:1;grid-row:1/3;position:relative;top:0;height:100dvh;width:278px;min-width:0;align-self:stretch;display:flex;flex-direction:column;overflow:hidden;padding:16px 18px 12px;background:#f9faf7;border-right:1px solid #e4e8e1}
.sidebar .side-brand{display:flex!important;align-items:center;gap:12px;min-height:76px;margin:0 2px 16px;padding:3px 8px 16px;border-bottom:1px solid #e3e8e0;text-decoration:none}
.side-brand>img{display:block;width:64px;height:54px;flex:0 0 64px;object-fit:contain;background:transparent;border-radius:0}
.side-brand b{font:650 19px "Noto Sans SC","Microsoft YaHei UI",sans-serif;letter-spacing:.2px;color:#233a30}
.side-brand small{display:block;margin-top:5px;color:#6f7c74;font-size:12px}
.sidebar .side-caption{margin:2px 12px 10px;color:#7a887d;font-size:12px;font-weight:600;letter-spacing:.3px}
.sidebar nav{flex:1;min-height:0;display:grid;align-content:start;gap:3px;overflow:visible;max-height:none}
.sidebar nav button{min-height:37px;display:flex;align-items:center;gap:13px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:#43534a;text-align:left;font-size:13px;font-weight:480;transition:background .16s,color .16s}
.sidebar nav button i{width:21px;height:21px;flex:0 0 21px;display:grid;place-items:center;color:#35523f}
.sidebar nav button .ui-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sidebar nav button:hover{background:#edf1e9;color:#294635}
.sidebar nav button.active{background:#e2e9de;color:#294635;font-weight:650}
.sidebar nav button.active i{color:#42694c}
.sidebar .side-bottom{display:flex;align-items:center;gap:9px;margin-top:auto;padding:11px 12px 1px;border-top:1px solid #e3e8e0;color:#68786d;font-size:11px}
.sidebar .secure-dot{background:#60915b;box-shadow:0 0 0 4px #60915b1b}
.topbar{grid-column:2;grid-row:1;height:62px;display:flex;align-items:center;justify-content:flex-start;gap:0;min-width:0;padding:0 30px;background:#fff;border-bottom:1px solid #e4e8e1}
.topbar .top-brand{display:none!important}
.top-workspace{display:flex;align-items:center;gap:8px;margin:0;padding:0;border:0;color:#294635;font-size:13px;font-weight:620}
.topbar-right{display:flex;align-items:center;gap:22px;margin-left:auto}
.help-button{display:flex;align-items:center;gap:8px;color:#52645a;font-size:12px}
.help-button .ui-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.account-menu .account-trigger{display:flex;align-items:center;gap:10px;padding:0 2px;border:0;background:none}
.account-menu .account-trigger>span:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e6ede3;color:#365641;font-size:13px;font-weight:700}
.account-identity b{font-size:12px;color:#2d4135}.account-identity small{font-size:10px;color:#879188}
.account-caret .ui-icon{width:15px;height:15px;stroke:#637268;fill:none;stroke-width:1.8}
[hidden]{display:none!important}
.topbar-right{gap:14px}
.help-button{min-height:36px;padding:0 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:#607066;font-size:12px;font-weight:600;transition:background .18s,border-color .18s,color .18s,transform .18s}
.help-button:hover{border-color:#e2e8df;background:#f4f6f1;color:#365541}
.help-button:focus-visible,.account-trigger:focus-visible,.account-dropdown button:focus-visible{outline:3px solid #78927a55;outline-offset:2px}
.account-menu{position:relative}
.account-menu .account-trigger{min-height:44px;gap:10px;padding:4px 8px 4px 5px;border:1px solid transparent;border-radius:12px;transition:background .18s,border-color .18s,box-shadow .18s}
.account-menu .account-trigger:hover,.account-menu.open .account-trigger{border-color:#e3e9e0;background:#f8faf6}
.account-menu .account-trigger>span:first-child{width:36px;height:36px;flex:0 0 36px;border:1px solid #dce6d8;background:linear-gradient(145deg,#edf3e9,#dfe9dc);color:#365541;font-size:13px;box-shadow:inset 0 1px #ffffffa8}
.account-identity{display:grid;gap:2px;min-width:0;max-width:190px;text-align:left}
.account-identity b{overflow:hidden;color:#294635;font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.account-identity small{overflow:hidden;color:#879188;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.account-caret{width:23px;height:23px;display:grid;place-items:center;margin-left:2px;border-radius:7px;transition:background .18s,transform .18s}
.account-caret .ui-icon{width:14px;height:14px;transition:transform .18s}
.account-menu.open .account-caret{background:#eaf0e7}
.account-menu.open .account-caret .ui-icon{transform:rotate(180deg)}
.account-dropdown{position:absolute;top:calc(100% + 9px);right:0;z-index:30;width:224px;padding:7px;border:1px solid #e4e9e1;border-radius:13px;background:#fff;box-shadow:0 16px 40px #20352d1c;animation:account-menu-in .16s ease-out}
.account-dropdown button{width:100%;min-height:39px;display:flex;align-items:center;gap:10px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#45584b;text-align:left;font-size:12px;font-weight:550;transition:background .15s,color .15s}
.account-dropdown button:hover{background:#f1f5ee;color:#294d36}
.account-dropdown button .ui-icon{width:16px;height:16px;opacity:.76}
.account-dropdown #logoutButton{color:#a75049}
.account-dropdown #logoutButton:hover{background:#fbf1ef;color:#983c36}
.menu-divider{height:1px;margin:6px 4px;background:#edf0eb}
@keyframes account-menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.creation-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
.creation-tabs button{position:relative;min-height:84px;display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:12px;padding:14px 18px;border:1px solid #e2e8df;border-radius:12px;background:#fbfcf9;color:#405247;text-align:left;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.creation-tabs button:hover{transform:translateY(-1px);border-color:#cbd8c8;background:#fff;box-shadow:0 7px 18px #304b3810}
.creation-tabs button.active{border-color:#9bb49a;background:linear-gradient(120deg,#f1f5ed,#fafbf8);box-shadow:inset 0 0 0 1px #dbe6d8}
.creation-tabs button>span{width:40px;height:40px;grid-row:1/3;display:grid;place-items:center;border-radius:11px;background:#e8eee4;color:#48684d}
.creation-tabs button>span .ui-icon{width:20px;height:20px}
.creation-tabs button>span .ui-icon use{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.creation-tabs button>b{align-self:end;color:#294635;font-size:13px;font-weight:700}
.creation-tabs button>small{align-self:start;margin-top:3px;color:#859087;font-size:10px}
.creation-tabs button:focus-visible{outline:3px solid #78927a55;outline-offset:2px}
@media(max-width:620px){.creation-tabs{grid-template-columns:1fr;gap:8px}.creation-tabs button{min-height:64px;padding:10px 13px}.creation-tabs button>span{width:36px;height:36px}}
.page-content{grid-column:2;grid-row:2;width:100%;max-width:none;margin:0;padding:0 20px 30px;background:#f4f6f2}
.dashboard-welcome{position:relative;min-height:112px;display:flex;align-items:center;margin:0 -20px 0;padding:17px 32px;background:#f4f6f2 url('/assets/client-landscape-wash.png') center 42%/cover no-repeat;overflow:hidden}
.dashboard-welcome:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f4f6f2 0%,#f4f6f2e8 38%,#f4f6f280 72%,#f4f6f220 100%);pointer-events:none}
.dashboard-welcome>div{position:relative;z-index:1}.welcome-kicker{display:block;color:#78877a;font-size:10px;letter-spacing:1.1px}.dashboard-welcome h1{margin:5px 0 3px;color:#294635;font:600 31px "Noto Serif SC","Songti SC",serif;letter-spacing:.04em}.dashboard-welcome p{margin:0;color:#727f75;font-size:12px}
.card{border-color:#e5e9e2;border-radius:11px;background:#fff;box-shadow:0 3px 12px #2a413008}
.api-access-card{margin:0 0 14px;padding:16px 21px 14px}.card-head{margin-bottom:13px}.section-heading{display:flex;align-items:center;gap:13px;min-width:0}.section-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;color:#3d6048}.section-icon .ui-icon{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.section-heading h2{margin:0;color:#20372c;font:650 17px "Noto Serif SC","Songti SC",serif}.section-heading .subtle{display:inline-block;margin:4px 0 0;font-size:10px}
.connect-strip{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;padding:0;border:0;border-radius:0;background:transparent}.connect-strip>div{min-width:0;padding:0 24px 0 40px}.connect-strip>div:first-child{padding-left:48px;border-right:1px solid #e1e6df}.connect-strip label{display:block;margin-bottom:6px;color:#293a30;font-size:12px;font-weight:620}.copy-row{height:42px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid #e1e6df;border-radius:7px;background:#fafbf9}.copy-row code{min-width:0;flex:1;overflow:hidden;color:#42544a;font:12px Consolas,"SFMono-Regular",monospace;text-overflow:ellipsis;white-space:nowrap}.copy-row .icon-button{width:26px;height:26px;display:grid;place-items:center;border:0;background:transparent;color:#48664e}.copy-row .icon-button .ui-icon{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}.connect-strip small{display:block;margin-top:6px;color:#879188;font-size:10px}
.dashboard-models{margin:0 0 14px;padding:16px 19px 14px}.dashboard-models .card-head{align-items:center;margin-bottom:11px}.dashboard-models .card-head .subtle{margin-top:4px}.dashboard-models .card-head>button{display:flex;align-items:center;gap:8px;color:#43644b;font-size:11px}.dashboard-models .card-head>button .ui-icon{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}.dashboard-models .table-wrap{overflow:hidden;border:1px solid #e7ebe5;border-radius:8px}table{white-space:nowrap}th{padding:9px 14px;background:#f0f3ee;color:#526258;font-size:10px;font-weight:650}td{padding:9px 14px;border-bottom:1px solid #edf0eb;color:#435148;font-size:11px}tbody tr:last-child td{border-bottom:0}.dashboard-models td:first-child strong{font:11px Consolas,"SFMono-Regular",monospace;color:#3e5045}.dashboard-models td:nth-child(3),.dashboard-models td:nth-child(4){font-variant-numeric:tabular-nums}
.dashboard-account{position:relative;overflow:hidden;margin:0 0 14px;padding:15px 20px 16px;background:#fff url('/assets/client-landscape-wash.png') right 58%/660px auto no-repeat}.dashboard-account:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ffffff 0%,#ffffffed 66%,#ffffff85 100%);pointer-events:none}.dashboard-account>*{position:relative;z-index:1}.dashboard-account>.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.dashboard-account .section-heading .subtle{display:block}.dashboard-account .account-status{margin-left:auto;padding:5px 10px;border-radius:20px;background:#e9f1e4;color:#557b50;font-size:10px}.account-overview-content{display:grid;grid-template-columns:minmax(290px,.95fr) minmax(0,1.55fr);align-items:center;min-height:105px}.dashboard-balance{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 18px;padding:8px 22px 8px 48px}.dashboard-balance .summary-label{grid-column:1/-1;color:#7b887e;font-size:11px}.dashboard-balance strong{color:#294635;font:600 42px Georgia,"Noto Serif SC",serif;letter-spacing:-1px}.dashboard-balance .button{grid-column:2;grid-row:2;min-width:142px;min-height:42px;border:1px solid #b77b5c;border-radius:8px;background:#fff;color:#9a6347;font-size:12px}.dashboard-balance .button:hover{background:#f8f0ea}.dashboard-balance .ui-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}.dashboard-account .account-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 0 10px;border-top:0;border-left:1px solid #dfe5dd}.dashboard-account .account-metrics>div{min-height:63px;padding:2px 19px;border-right:1px solid #dfe5dd}.dashboard-account .account-metrics span{font-size:10px;color:#7f8a81}.dashboard-account .account-metrics b{margin-top:7px;color:#294635;font:600 22px Georgia,"Noto Serif SC",serif}.dashboard-account .account-metrics small{font-family:"Noto Sans SC","Microsoft YaHei UI",sans-serif;font-size:10px;font-weight:450;color:#879188}
.dashboard-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.dashboard-lower>.card{min-width:0;padding:14px 17px}.dashboard-lower .card>section.card{padding:0;border:0;box-shadow:none}.dashboard-lower .card-head{margin-bottom:10px}.dashboard-lower .card-head h2{font:650 15px "Noto Serif SC","Songti SC",serif}.dashboard-lower .card-head button{display:flex;align-items:center;gap:6px;color:#45664c;font-size:10px}.dashboard-lower .card-head button .ui-icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}.dashboard-lower .table-wrap{border:1px solid #e7ebe5;border-radius:8px}.dashboard-lower th,.dashboard-lower td{padding:8px 10px;font-size:10px}.dashboard-trend .trend-chart{min-height:125px}.dashboard-trend .trend-summary{margin:7px 0 0;font-size:10px}
.ui-icon{display:inline-block;vertical-align:middle}.sidebar nav button .ui-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1200px) and (min-width:901px){.workspace{grid-template-columns:240px minmax(0,1fr)!important}.sidebar{width:240px}.page-content{padding-left:16px;padding-right:16px}.dashboard-welcome{margin-left:-16px;margin-right:-16px}.connect-strip>div{padding-left:24px;padding-right:16px}.connect-strip>div:first-child{padding-left:28px}.dashboard-balance{padding-left:24px}.dashboard-account .account-metrics>div{padding-left:12px;padding-right:12px}}
@media(max-width:900px){.workspace{display:block!important;min-height:100dvh}.main{display:block!important}.sidebar{position:sticky;top:0;z-index:10;width:100%;height:auto;min-width:0;padding:7px 10px;background:#f9faf7;border-bottom:1px solid #e4e8e1}.sidebar .side-brand{min-height:35px;margin:0 3px 5px;padding:0;border:0}.side-brand>img{width:30px;height:30px;flex-basis:38px}.side-brand small{display:none}.side-brand b{font-size:13px}.side-caption,.side-bottom{display:none}.sidebar nav{display:flex;overflow-x:auto;overflow-y:hidden;gap:3px}.sidebar nav button{flex:0 0 auto;min-height:33px;padding:0 9px;font-size:10px}.topbar{height:54px;padding:0 14px}.topbar .top-brand{display:none!important}.top-workspace{display:none}.page-content{padding:0 12px 22px}.dashboard-welcome{min-height:95px;margin:0 -12px;padding:14px 18px}.dashboard-welcome h1{font-size:26px}.api-access-card,.dashboard-models,.dashboard-account{padding:13px;margin-bottom:11px}.connect-strip{grid-template-columns:1fr;gap:12px}.connect-strip>div,.connect-strip>div:first-child{padding:0;border:0}.dashboard-models .table-wrap,.dashboard-lower .table-wrap{overflow:auto}.account-overview-content{grid-template-columns:1fr}.dashboard-balance{padding:10px 8px 14px}.dashboard-account .account-metrics{border-left:0;border-top:1px solid #dfe5dd}.dashboard-account .account-metrics>div{padding:8px}.dashboard-lower{grid-template-columns:1fr}.section-heading h2{font-size:15px}}
@media(prefers-reduced-motion:reduce){.sidebar nav button{transition:none}}

@media(min-width:901px){.sidebar{padding-top:10px;padding-bottom:9px}.sidebar .side-brand{min-height:64px;margin-bottom:7px;padding-bottom:9px}.side-brand>img{width:56px;height:46px;flex-basis:56px}.sidebar .side-caption{margin-bottom:6px}.sidebar nav{gap:1px}.sidebar nav button{min-height:31px}.sidebar .side-bottom{padding-top:7px}}
.sidebar:before{content:"";position:absolute;z-index:0;left:0;bottom:0;width:100%;height:145px;background:url('/assets/client-landscape-wash.png') left bottom/auto 170px no-repeat;opacity:.42;pointer-events:none}.sidebar>*{position:relative;z-index:1}.account-overview-content{display:grid;grid-template-columns:minmax(290px,.95fr) minmax(0,1.55fr);align-items:center;min-height:105px}
/* Match the selected reference: artwork appears only as a restrained right-edge wash. */
.dashboard-welcome{background-image:linear-gradient(90deg,#f4f6f2 0%,#f4f6f2 54%,#f4f6f2cc 77%,#f4f6f280 100%),url('/assets/client-landscape-wash.png');background-size:100% 100%,auto 100%;background-position:center,right 44%;background-repeat:no-repeat}
.dashboard-welcome:after{display:none}
.dashboard-account{background-image:linear-gradient(90deg,#fff 0%,#fff 57%,#ffffffd9 76%,#ffffff8c 100%),url('/assets/client-landscape-wash.png');background-size:100% 100%,460px auto;background-position:center,right 56%;background-repeat:no-repeat}
.dashboard-account:after{display:none}
.sidebar:before{height:190px;background-size:100% auto;background-position:center bottom;opacity:.72;mask-image:linear-gradient(to top,#000 0%,#000c 72%,transparent 100%)}
@media(min-width:901px){html,body,#app,.client-app,.workspace{height:100%;min-height:0;overflow:hidden}.workspace{height:100dvh;min-height:100dvh}.sidebar{position:relative;grid-column:1!important;grid-row:1/3!important;height:100dvh;align-self:stretch}.main{display:contents!important}.topbar{position:relative;grid-column:2!important;grid-row:1!important;width:100%;height:62px;z-index:5}.page-content{grid-column:2!important;grid-row:2!important;height:calc(100dvh - 62px);min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}}
@media(max-width:900px){.dashboard-welcome{background-size:100% 100%,auto 100%;background-position:center,right center}.dashboard-account{background-size:100% 100%,min(100%,360px) auto}}
@media(min-width:901px){.workspace{grid-template-rows:104px minmax(0,1fr)!important}.topbar{height:104px!important;gap:0;padding:0 30px!important}.top-workspace{display:none!important}.top-greeting{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}.top-greeting>span{color:#78877a;font-size:11px;letter-spacing:.06em}.top-greeting>strong{color:#294635;font:600 25px/1.1 "Noto Serif SC","Songti SC",serif}.top-greeting>small{color:#727f75;font-size:11px}.topbar-right{margin-left:auto}.page-content{height:calc(100dvh - 104px)!important}}
@media(min-width:901px){.workspace{grid-template-columns:278px minmax(0,1fr)!important;grid-template-rows:104px minmax(0,1fr)!important}.sidebar{grid-column:1!important;grid-row:1/3!important;width:278px!important;height:100dvh!important;min-height:100dvh!important;padding-top:16px!important;align-self:stretch!important}.sidebar .side-brand{min-height:76px!important;margin:0 2px 16px!important;padding:3px 8px 16px!important}.side-brand>img{width:64px!important;height:54px!important;flex-basis:64px!important}.sidebar .side-caption{margin:2px 12px 10px!important}.sidebar nav button{min-height:37px!important;font-size:13px!important}.topbar{grid-column:2!important;grid-row:1!important;height:104px!important;min-height:104px!important;align-self:stretch!important;box-sizing:border-box}.top-greeting,.topbar-right{align-self:center}.page-content{grid-column:2!important;grid-row:2!important;height:calc(100dvh - 104px)!important}}
@media(max-width:900px){.top-greeting{min-width:0;display:flex;flex-direction:column;gap:2px}.top-greeting>span{color:#78877a;font-size:8px}.top-greeting>strong{color:#294635;font:600 16px/1.1 "Noto Serif SC","Songti SC",serif}.top-greeting>small{display:none}.topbar{gap:8px}.page-content{padding-top:12px}}
@media(max-width:900px){.sidebar:before{display:none}.account-overview-content{grid-template-columns:1fr}}
.account-overview-content{grid-template-columns:minmax(0,1.65fr) minmax(350px,1fr)!important}
.dashboard-account .account-metrics{min-width:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.dashboard-account .account-metrics>div{min-width:0;padding-left:16px;padding-right:16px}
.dashboard-balance{min-width:0;padding-left:24px;padding-right:8px}
@media(max-width:1200px) and (min-width:901px){.account-overview-content{grid-template-columns:minmax(0,1.5fr) minmax(330px,1fr)!important}.dashboard-account .account-metrics>div{padding-left:10px;padding-right:10px}.dashboard-balance{padding-left:16px}}
@media(max-width:900px){.account-overview-content{grid-template-columns:1fr!important}.dashboard-account .account-metrics{border:0}.dashboard-balance{border-top:1px solid #dfe5dd;padding:14px 8px 8px}}
@media(min-width:901px){.workspace{grid-template-rows:71px minmax(0,1fr)!important}.sidebar{padding-top:0!important}.sidebar .side-brand{height:71px!important;min-height:71px!important;margin:0!important;padding:8px 8px!important;border-bottom:0!important;align-items:center;position:relative}.sidebar .side-brand:after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:1px;background:#e3e8e0}.sidebar .side-caption{margin-top:0!important;padding-top:26px}.topbar{height:71px!important;min-height:71px!important}.page-content{height:calc(100dvh - 71px)!important}}

/* Content areas recreated from the 12 approved client page designs. Shell navigation and topbar remain untouched. */
.content-page-heading{display:flex;align-items:center;justify-content:space-between;min-height:90px;padding:15px 18px 13px;margin:0 0 4px}.content-page-heading h1{margin:0;color:#20352d;font:600 28px/1.25 "Noto Serif SC","Songti SC",serif;letter-spacing:.01em}.content-page-heading p{margin:5px 0 0;color:#79847b;font-size:12px;line-height:1.6}.page-content:has(.content-page-heading){padding-top:4px}
.page-content:has(.content-page-heading)>.card{margin-bottom:14px}.page-content:has(.content-page-heading)>.card:last-child{margin-bottom:0}.page-content .card{background:#fffefa;border-color:#e5e9e1;box-shadow:0 2px 10px #263a2c08}.page-content .card-head h2{color:#263b30}.page-content th{background:#f2f4ef;color:#667368}.page-content td{border-bottom-color:#edf0ea;color:#46554a}.page-content .button.primary{background:#48674f;border-color:#48674f}.page-content .button.primary:hover{background:#304b38;border-color:#304b38}.page-content .amount-negative{color:#b45531}.page-content .amount-positive{color:#356b45}.page-content .text-action{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:#49684f;font-size:11px;white-space:nowrap}.page-content .text-action .ui-icon{width:15px;height:15px}
.page-content .table-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.page-content .table-search,.page-content .table-tools select{height:36px;min-width:145px;padding:0 10px;border:1px solid #e2e7df;border-radius:7px;background:#fffefa;color:#394b3e;font-size:11px}.page-content .table-search:focus,.page-content .table-tools select:focus,.page-content .field:focus{border-color:#829982;box-shadow:0 0 0 3px #77927a20}.page-content .table-wrap{border:1px solid #e7ebe4;border-radius:8px}.page-content .table-wrap th{padding:11px 12px}.page-content .table-wrap td{padding:10px 12px}.page-content .pill.is-paid,.page-content .call-state.is-ok{color:#347347}.page-content .pill.is-paid{background:#edf3e9}.page-content .pill.is-pending,.page-content .call-state.is-pending{color:#a66c24}.page-content .pill.is-pending{background:#fbf2e4}.record-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 0}.record-stats>div{display:grid;gap:7px;padding:4px 20px;border-right:1px solid #e7ebe4}.record-stats>div:first-child{padding-left:4px}.record-stats>div:last-child{border:0}.record-stats span{color:#7b877e;font-size:11px}.record-stats b{color:#20352d;font:600 21px Georgia,"Noto Serif SC",serif}.model-note{margin:10px 2px}.filter-field{display:grid;gap:5px;color:#6f7c71;font-size:10px}.page-actions{display:flex;justify-content:flex-end;gap:9px;margin:4px 0 16px}.keys-card-actions{display:flex;align-items:center;gap:10px;color:#7a877d;font-size:11px}.connect-strip{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:7px 0 3px}.connect-strip>div{min-width:0;padding:0 6px}.connect-strip label{display:block;margin-bottom:7px;color:#34463a;font-size:11px;font-weight:650}.connect-strip .copy-row{height:40px;background:#f7f8f5;border-color:#e4e8e1}.connect-strip .copy-row code{font-size:11px}.redeem-card{padding:20px!important}.redeem-form{display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:end;gap:12px;margin:12px 0 18px}.redeem-form .form-actions{margin:0}.redeem-form .login-error{grid-column:1/-1;margin:0;color:#ad5143}.redeem-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:14px;border-top:1px solid #e9ece6}.redeem-steps>b{grid-column:1/-1;color:#2c4033;font-size:13px}.redeem-steps>div{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:4px 9px;padding:6px 8px;border-right:1px solid #e8ece5}.redeem-steps>div:last-child{border:0}.redeem-steps>div>span{grid-row:1/3;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#e9efe5;color:#365b40;font-weight:700}.redeem-steps strong{font-size:11px}.redeem-steps small{color:#89938b;font-size:10px}.subscription-overview{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.5fr);gap:22px;padding:20px!important}.subscription-current{display:grid;grid-template-columns:40px 1fr;align-content:center;gap:10px}.subscription-current .section-icon{grid-row:1/3;width:38px;height:38px;border-radius:9px;background:#f3f5ef}.subscription-current h2{margin:4px 0 5px;color:#263b30;font:600 21px "Noto Serif SC","Songti SC",serif}.subscription-current p{margin:6px 0;color:#7d897f;font-size:10px}.subscription-current .button{grid-column:2;justify-self:start}.subscription-usage{padding:4px 8px 4px 20px;border-left:1px solid #e4e9e1}.subscription-usage>span{color:#667369;font-size:11px}.subscription-usage>b{display:block;margin:9px 0;color:#263b30;font-size:22px}.subscription-usage>b small{color:#768278;font-size:12px;font-weight:400}.quota-track{height:8px;overflow:hidden;border-radius:99px;background:#ebeee8}.quota-track i{display:block;height:100%;border-radius:inherit;background:#496c4f}.subscription-usage>small{display:block;margin-top:5px;color:#879188;text-align:right;font-size:10px}.subscription-usage-detail{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px}.subscription-usage-detail>div{display:grid;gap:6px;padding:0 10px;border-right:1px solid #e7ebe4}.subscription-usage-detail>div:last-child{border:0}.subscription-usage-detail span{color:#818b82;font-size:10px}.subscription-usage-detail b{color:#304638;font-size:13px}.benefit-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.benefit-strip span{display:flex;align-items:center;gap:9px;padding:10px;border-right:1px solid #e8ece6;color:#435a48;font-size:11px}.benefit-strip .ui-icon{width:20px;height:20px;color:#456b4d}.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.plan-card{background:#fffefa;border-color:#e5e9e1}.current-subscription{background:#fffefa}.affiliate-summary{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:14px;padding:17px 10px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa}.affiliate-summary>div{display:grid;gap:5px;padding:0 18px;border-right:1px solid #e7ebe4}.affiliate-summary>div:last-child{border:0}.affiliate-summary span,.affiliate-summary small{color:#7f8a81;font-size:10px}.affiliate-summary b{color:#293e31;font:600 22px Georgia,"Noto Serif SC",serif}.invite-page-intro{margin-bottom:12px!important;padding:0 18px 3px!important;border:0!important;background:transparent!important;box-shadow:none!important}.invite-page-intro h2{margin:0;color:#273b30;font:600 21px "Noto Serif SC","Songti SC",serif}.invite-page-intro p{margin:5px 0;color:#7b877e;font-size:11px}.invite-share-panel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(145px,.7fr);align-items:center;gap:20px;padding:20px!important}.invite-share-panel h2{margin:0 0 6px;font:600 19px "Noto Serif SC","Songti SC",serif}.invite-share-panel .summary-label{margin-top:13px}.invite-qr{min-height:140px;display:grid;place-items:center;align-content:center;gap:7px;border-radius:9px;background:linear-gradient(110deg,#f8f8f3,#f0f3eb);color:#47634c}.invite-qr>.ui-icon{width:72px;height:72px}.invite-qr span{font-size:10px}.affiliate-actions{gap:14px}.affiliate-hero{background:linear-gradient(115deg,#f5f6f0,#fffdfa 68%)}.topup-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.85fr);gap:14px}.topup-main{display:grid;align-content:start;gap:14px}.topup-balance{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:15px;padding:20px!important}.topup-balance h2{margin:0;color:#293d31;font:600 16px "Noto Serif SC","Songti SC",serif}.topup-balance p{margin:4px 0 10px}.topup-balance strong{display:block;color:#ae5936;font:600 34px Georgia,"Noto Serif SC",serif}.topup-balance>div>small{color:#849087;font-size:10px}.balance-quick-stats{display:grid;gap:8px;border-left:1px solid #e7ebe4;padding-left:18px}.balance-quick-stats span{display:flex;justify-content:space-between;gap:8px;color:#859087;font-size:10px}.balance-quick-stats b{color:#394b3e;font-size:12px}.package-card{padding:18px!important}.topup-packages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.topup-package{min-width:0;display:grid;gap:5px;padding:11px;border:1px solid #e3e8e0;border-radius:8px;background:#fff;text-align:left;color:#435348}.topup-package.selected{border-color:#829c80;background:#f0f4ec;box-shadow:inset 0 0 0 1px #dce7d8}.topup-package span{font-size:10px}.topup-package b{color:#b35433;font-size:15px}.topup-package small{color:#879188;font-size:9px}.topup-checkout{display:grid;grid-template-columns:minmax(150px,1fr) 1.3fr auto;align-items:end;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid #e8ece6}.payment-methods{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#58695d;font-size:10px}.payment-methods>span{width:100%;color:#718075}.payment-methods label{display:flex;align-items:center;gap:5px}.payment-methods input{accent-color:#48674f}.help-panel{align-self:start;padding:18px!important}.help-panel>p{margin:0 0 12px}.support-help-row{width:100%;display:grid;grid-template-columns:22px 1fr 17px;align-items:center;gap:10px;padding:13px 2px;border:0;border-top:1px solid #e9ece6;background:transparent;text-align:left;color:#45604b}.support-help-row>div{display:grid;gap:4px}.support-help-row b{font-size:11px}.support-help-row small{color:#879188;font-size:10px}.support-help-row .ui-icon{width:18px;height:18px}.help-symbol{width:19px;height:19px;display:grid;place-items:center;border:1px solid #9aa99a;border-radius:50%;font-size:11px}.ticket-inline-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #e8ece6}.ticket-inline-form .field-label:nth-child(3){grid-column:1/-1}.ticket-inline-form .button{justify-self:start}.creation-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:640px;margin:0 0 14px;border:1px solid #e3e8e0;border-radius:10px;background:#fffefa;overflow:hidden}.creation-tabs button{min-height:54px;display:flex;justify-content:center;gap:9px;padding:8px 14px;border:0;border-right:1px solid #e8ece6;border-radius:0;background:transparent;color:#44564a;text-align:center;box-shadow:none}.creation-tabs button:last-child{border-right:0}.creation-tabs button:hover{transform:none;background:#f6f7f2;box-shadow:none}.creation-tabs button.active{border-color:transparent;background:#e9efe5;box-shadow:inset 0 -2px #48674f}.creation-tabs button>span{width:23px;height:23px;display:grid;place-items:center;background:transparent;color:#365a40}.creation-tabs button>b{align-self:center;color:#314537;font-size:12px}.creation-tabs button>small{display:none}.creation-workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);align-items:start;gap:14px}.creation-main,.creation-aside{min-width:0}.creation-chat{min-height:610px;display:flex;flex-direction:column;padding:14px!important}.creation-toolbar{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid #e9ece6}.creation-toolbar label{display:flex;align-items:center;gap:9px;color:#526256;font-size:11px}.creation-toolbar .field{width:min(290px,50vw);height:40px}.creation-toolbar .text-action{margin-left:auto}.creation-conversation{flex:1;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:18px 6px}.assistant-message{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:10px}.assistant-avatar{width:32px;height:32px;display:grid;place-items:center;border:1px solid #e4e9e2;border-radius:50%;color:#3e6449}.assistant-avatar .ui-icon{width:22px;height:22px}.assistant-bubble{max-width:90%;padding:13px 15px;border:1px solid #e9ece6;border-radius:9px;background:#fafbf8;color:#394a3e;font-size:12px}.assistant-bubble p{margin:6px 0 0;color:#707c73;line-height:1.7}.creation-empty{margin:auto;display:grid;justify-items:center;gap:9px;color:#48634d;text-align:center}.creation-empty>span{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:#edf2e9}.creation-empty .ui-icon{width:25px;height:25px}.creation-empty b{font-size:13px}.creation-empty p{margin:0;color:#8a948b;font-size:11px}.creation-composer{padding:11px 12px 10px;border:1px solid #e1e7df;border-radius:9px;background:#fff}.creation-composer>textarea{width:100%;min-height:84px;resize:vertical;border:0;outline:0;background:transparent;color:#304337;font:12px/1.7 "Noto Sans SC",sans-serif}.creation-composer>textarea::placeholder{color:#a3aaa2}.composer-tools{display:flex;align-items:center;gap:10px;padding-top:8px;border-top:1px solid #eff1ec}.composer-model-note{color:#6e7b71;font-size:10px}.composer-model-note input:not([hidden]){width:75px;height:26px;margin-left:6px;border:1px solid #e3e8e0;border-radius:5px}.composer-spacer{flex:1}.composer-count{color:#929b93;font-size:10px}.composer-tools .button{min-height:34px}.composer-tools .ui-icon{width:15px;height:15px}.creation-aside{display:grid;gap:12px}.creation-settings,.recent-creation{padding:16px!important}.creation-settings .card-head{align-items:center}.creation-settings .card-head h2,.recent-creation .card-head h2{font-size:14px}.creation-settings .field-label textarea{min-height:84px;padding:10px;resize:vertical}.range-label{display:grid;gap:7px;margin-top:15px;color:#4a5b4e;font-size:11px}.range-label>span{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:10px}.range-label input{accent-color:#48674f}.range-label output{padding:5px 7px;border:1px solid #e4e8e1;border-radius:6px;text-align:center;font-size:10px}.switch-row{display:flex;align-items:center;justify-content:space-between;margin-top:13px;color:#4c5d50;font-size:11px}.switch-row input{width:31px;height:18px;accent-color:#48674f}.recent-creation .subtle{margin-bottom:2px}
@media(max-width:1050px){.creation-workspace,.topup-layout{grid-template-columns:minmax(0,1fr)}.creation-chat{min-height:540px}.help-panel{grid-row:auto}.topup-packages{grid-template-columns:repeat(3,minmax(0,1fr))}.record-stats{grid-template-columns:repeat(2,1fr);gap:10px}.record-stats>div:nth-child(2){border:0}.subscription-overview{grid-template-columns:1fr}.subscription-usage{padding:15px 0 0;border-top:1px solid #e4e9e1;border-left:0}}
@media(max-width:680px){.content-page-heading{min-height:68px;padding:9px 6px 10px}.content-page-heading h1{font-size:22px}.content-page-heading p{font-size:10px}.page-content .card{padding:13px}.page-content .card-head{align-items:flex-start;flex-wrap:wrap}.page-content .table-tools{justify-content:flex-start;width:100%}.page-content .table-search,.page-content .table-tools select{min-width:0;flex:1 1 145px}.record-stats{grid-template-columns:1fr 1fr}.record-stats>div{padding:6px 10px}.record-stats b{font-size:17px}.redeem-form{grid-template-columns:1fr}.redeem-steps{grid-template-columns:1fr}.redeem-steps>div{border-right:0;border-bottom:1px solid #e8ece5}.benefit-strip{grid-template-columns:1fr 1fr}.benefit-strip span:nth-child(2){border:0}.affiliate-summary{padding:13px 4px}.affiliate-summary>div{padding:0 9px}.affiliate-summary b{font-size:16px}.invite-share-panel{grid-template-columns:1fr}.invite-qr{min-height:100px}.topup-balance{grid-template-columns:1fr}.balance-quick-stats{border-top:1px solid #e7ebe4;border-left:0;padding:12px 0 0}.topup-packages{grid-template-columns:repeat(2,minmax(0,1fr))}.topup-checkout{grid-template-columns:1fr}.payment-methods{padding:5px 0}.ticket-inline-form{grid-template-columns:1fr}.ticket-inline-form .field-label:nth-child(3){grid-column:auto}.creation-tabs button{min-height:46px;gap:5px;padding:6px}.creation-tabs button>b{font-size:10px}.creation-workspace{gap:9px}.creation-chat{min-height:500px}.creation-toolbar{flex-wrap:wrap}.creation-toolbar label{width:100%}.creation-toolbar .field{flex:1;width:auto}.creation-toolbar .text-action{margin-left:0}.creation-composer>textarea{min-height:90px}.composer-tools{gap:6px}.composer-count{font-size:9px}}

/* Keep the approved client shell fixed while page-specific content starts directly below it. */
.client-content-page{padding-top:14px!important}.creation-chat #studioResult{margin-top:12px}.creation-chat #studioResult[hidden]{display:none}.user-message{max-width:84%;align-self:flex-end;padding:11px 14px;border-radius:9px 9px 2px 9px;background:#edf2e9;color:#314638;font-size:12px;line-height:1.7;white-space:pre-wrap}.assistant-response{align-self:flex-start;max-width:92%;white-space:pre-wrap}.invite-qr-mark{width:62px;height:62px;display:grid;place-items:center;border:1px solid #dfe6dc;border-radius:8px;background:#fff}.invite-qr-mark .ui-icon{width:36px;height:36px}.invite-qr>b{color:#3d5742;font-size:11px}.invite-qr>small{color:#879188;font-size:9px}

/* 精确贴合客户区设计稿 */
.overview-plan{position:relative}.overview-plan button{display:block;margin-top:8px;padding:0;border:0;background:none;color:#537453;font-size:10px}.overview-plan button:hover{text-decoration:underline}.account-metrics>div:not(:last-child){border-right:1px solid #e8ece6}.client-content-page{padding-top:18px!important}.client-content-page>.content-page-heading{display:none!important}.dashboard-account{background:#fff url('/assets/client-landscape-wash.png') right center/auto 100% no-repeat}.dashboard-account .account-overview-content{grid-template-columns:minmax(0,1.65fr) minmax(210px,.65fr)}.dashboard-account .account-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-balance{border-left:1px solid #e8ece6;padding-left:22px}.dashboard-balance strong{display:block;margin:8px 0 12px;color:#293e31;font:600 28px Georgia,'Noto Serif SC',serif}.dashboard-lower>.card{padding:0!important}.dashboard-lower>.card>.card{height:100%;min-height:190px;border:0;background:transparent}.dashboard-lower{align-items:stretch}.dashboard-trend .trend-chart{min-height:110px}.dashboard-models th,.dashboard-models td{padding-top:9px;padding-bottom:9px}.creation-chat{min-height:650px}.creation-settings .field-label textarea{min-height:92px}.recent-creation .subtle{padding:12px;border-radius:8px;background:#f7f8f4}
/* Client design alignment: content only, warm ivory and pine green */
.page-content{padding:20px 18px!important}
#pageContent.client-content-page{padding-top:18px!important}
.content-page-heading{display:none!important}
.dashboard-account{background:#fffdfa url('/assets/client-landscape-wash.png') right center/auto 100% no-repeat}
.dashboard-account .account-overview-content{grid-template-columns:minmax(0,1.7fr) minmax(205px,.65fr)}
.dashboard-account .account-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.dashboard-account .account-metrics>div{border-right:1px solid #e8ece6;padding-right:12px}
.dashboard-account .account-metrics>div:last-child{border:0}
.overview-plan button{display:block;margin-top:8px;padding:0;border:0;background:none;color:#537453;font-size:10px}
.dashboard-balance{border-left:1px solid #e8ece6;padding-left:22px}
.dashboard-balance strong{display:block;margin:8px 0 12px;color:#293e31;font:600 28px Georgia,'Noto Serif SC',serif}
.dashboard-lower{align-items:stretch}
.dashboard-lower>.card{padding:0!important}
.dashboard-lower>.card>.card{height:100%;min-height:190px;border:0;background:transparent}
.dashboard-trend .trend-chart{min-height:110px}
.creation-chat{min-height:650px}
.creation-settings .field-label textarea{min-height:92px}
.recent-creation .subtle{padding:12px;border-radius:8px;background:#f7f8f4}
/* Keep work area aligned with the approved screenshots */
#pageContent.client-content-page .creation-chat{min-height:calc(100vh - 178px);height:calc(100vh - 178px)}
#pageContent.client-content-page .creation-conversation{min-height:0;justify-content:flex-end}
#pageContent.client-content-page .creation-composer{flex:0 0 auto}
#pageContent.client-content-page .creation-settings{padding:16px 18px!important}
#pageContent.client-content-page .creation-settings .card-head{margin-bottom:12px}
#pageContent.client-content-page .recent-creation{min-height:178px}
@media(max-width:1050px){#pageContent.client-content-page .creation-chat{height:auto;min-height:560px}}

/* Content blocks aligned to the supplied 12-screen PNG set */
.overview-top-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch;margin-bottom:14px}
.overview-top-grid>.card{height:100%;margin:0}
.overview-top-grid .connect-strip{grid-template-columns:1fr;gap:10px}
.overview-top-grid .connect-strip>div{padding:0}
.overview-top-grid .dashboard-models .table-wrap{max-height:236px}
.overview-top-grid .dashboard-models th,.overview-top-grid .dashboard-models td{padding:7px 9px}
.dashboard-account{margin-bottom:14px}
.key-safety-lead{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px}
.key-safety-lead>span{width:46px;height:46px;display:grid;place-items:center;border-radius:10px;background:#f2f5ef;color:#456b4d}
.key-safety-lead>span .ui-icon{width:25px;height:25px}
.key-safety-lead b{color:#34473a;font-size:13px}
.key-safety-lead p{margin:5px 0 0;max-width:720px}
.key-safety-lead .button{min-width:150px;min-height:46px}
.key-security-list{display:grid;gap:10px;margin:0;padding:2px 0 2px 22px;color:#718075;font-size:11px;line-height:1.65}
.key-security-list li::marker{color:#ad603c;font-weight:700}
.creation-history-list article{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #e9ece6}
.creation-history-list article:last-child{border-bottom:0}
.creation-history-list article>span{color:#456b4d}
.creation-history-list article .ui-icon{width:19px;height:19px}
.creation-history-list article>div{display:grid;gap:4px;min-width:0}
.creation-history-list b{overflow:hidden;color:#3b4c3f;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.creation-history-list small{color:#899289;font-size:9px}
.creation-history-list article>button{border:0;background:none;color:#7a877c;font-size:17px}
#pageContent:has(#usageSearch),#pageContent:has(#billingSearch),#pageContent:has(#orderSearch){display:grid;gap:12px;align-content:start}
#pageContent:has(#usageSearch)>.card,#pageContent:has(#billingSearch)>.card,#pageContent:has(#orderSearch)>.card{display:contents}
#pageContent:has(#usageSearch)>.card>.card-head,#pageContent:has(#billingSearch)>.card>.card-head,#pageContent:has(#orderSearch)>.card>.card-head{display:none}
#pageContent:has(#usageSearch) .record-stats,#pageContent:has(#billingSearch) .record-stats,#pageContent:has(#orderSearch) .record-stats{order:2;margin:0;padding:16px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa}
#pageContent:has(#usageSearch) .table-tools,#pageContent:has(#billingSearch) .table-tools,#pageContent:has(#orderSearch) .table-tools{order:1;justify-content:flex-start;padding:12px 14px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa}
#pageContent:has(#usageSearch) .table-wrap,#pageContent:has(#billingSearch) .table-wrap,#pageContent:has(#orderSearch) .table-wrap{order:3;padding:10px 14px 14px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa}
#pageContent:has(#usageSearch)>.card:nth-child(2),#pageContent:has(#billingSearch)>.card:nth-child(2),#pageContent:has(#orderSearch)>.card:nth-child(2){display:contents}
@media(max-width:1050px){.overview-top-grid{grid-template-columns:1fr}.overview-top-grid .connect-strip{grid-template-columns:1fr 1fr}.key-safety-lead{grid-template-columns:42px 1fr}.key-safety-lead .button{grid-column:2;justify-self:start}}
@media(max-width:680px){.overview-top-grid .connect-strip{grid-template-columns:1fr}.key-safety-lead{grid-template-columns:36px 1fr}.key-safety-lead>span{width:36px;height:36px}.key-safety-lead .button{grid-column:1/-1}.creation-chat{min-height:calc(100vh - 160px)!important;height:auto!important}}

/* AI creation workspace, matched to the supplied client design. */
#pageContent.client-content-page:has(.creation-workspace){padding-top:10px!important}
#pageContent .creation-heading{position:relative;display:flex;align-items:center;min-height:94px;margin:-2px 0 10px;padding:8px 17px;overflow:hidden;background:linear-gradient(90deg,#f7f8f4 12%,#f7f8f4d9 48%,transparent),url('/assets/client-landscape-wash.png') right center/auto 142px no-repeat}
#pageContent .creation-heading h1{margin:0;color:#152f26;font:500 30px/1.15 Georgia,'Noto Serif SC',serif;letter-spacing:.03em}
#pageContent .creation-heading p{margin:7px 0 0;color:#829087;font-size:12px}
#pageContent .creation-heading-art{margin-left:auto;padding:12px 5px 0 0;color:#465b4c;font:500 10px/2 Georgia,'Noto Serif SC',serif;letter-spacing:.35em;text-align:right;white-space:nowrap}
#pageContent .creation-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(520px,100%);gap:0;margin:0 0 12px;border:1px solid #e5e9e3;border-radius:9px;background:#fffefa;overflow:hidden}
#pageContent .creation-tabs button{min-height:39px;display:flex;align-items:center;justify-content:center;padding:0 12px;border:0;border-right:1px solid #e3e8e1;border-radius:0;background:transparent;box-shadow:none;color:#3e5145;text-align:center}
#pageContent .creation-tabs button:last-child{border-right:0}
#pageContent .creation-tabs button:hover{transform:none;background:#f8faf6}
#pageContent .creation-tabs button.active{background:#eef3eb;box-shadow:inset 0 0 0 2px #e5ece1}
#pageContent .creation-tabs button>span{width:auto;height:auto;display:flex;align-items:center;gap:9px;border-radius:0;background:transparent;color:#355340}
#pageContent .creation-tabs button>span .ui-icon{width:17px;height:17px}
#pageContent .creation-tabs button>b{align-self:auto;color:#2d4235;font-size:12px;font-weight:650}
#pageContent .creation-workspace{grid-template-columns:minmax(0,1.58fr) minmax(310px,.82fr);align-items:start;gap:13px}
#pageContent .creation-chat,#pageContent .creation-settings,#pageContent .recent-creation{border-color:#e6ebe3;box-shadow:0 5px 18px #24382b08}
#pageContent .creation-chat{height:calc(100vh - 250px);min-height:460px;max-height:700px;padding:15px 16px 13px}
#pageContent .creation-toolbar{min-height:45px;padding:0 2px 11px;border-bottom:1px solid #edf0ea}
#pageContent .creation-toolbar .field{width:min(235px,48vw);height:36px;margin-left:10px}
#pageContent .creation-conversation{flex:1;min-height:0;justify-content:flex-start;padding:12px 1px;gap:14px}
#pageContent .creation-empty{gap:9px}
#pageContent .creation-empty>span{width:50px;height:50px;border-radius:12px}
#pageContent .creation-composer{flex:0 0 auto;padding:10px 12px 9px;border-radius:8px}
#pageContent .creation-composer>textarea{min-height:60px;max-height:145px;resize:vertical;font-size:12px}
#pageContent .composer-tools{min-height:36px;gap:10px;padding-top:7px}
#pageContent .composer-attach{width:29px;height:26px;display:grid;place-items:center;padding:4px;border:0;border-right:1px solid #e7ebe5;border-radius:0;background:transparent;cursor:pointer}
#pageContent .composer-attach img{width:17px;height:17px;object-fit:contain}
#pageContent .composer-search{display:flex;align-items:center;gap:7px;color:#56665a;font-size:10px;white-space:nowrap}
#pageContent .composer-search input{appearance:none;position:relative;width:32px;height:17px;margin:0;border-radius:99px;background:#d8ddd8;cursor:pointer}
#pageContent .composer-search input:before{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;content:'';transition:left .18s}
#pageContent .composer-search input:checked{background:#4b7258}
#pageContent .composer-search input:checked:before{left:17px}
#pageContent .composer-count{margin-right:2px;font-size:10px}
#pageContent .composer-tools .button{min-height:35px;padding:0 17px}
#pageContent .composer-tools .ui-icon{width:16px;height:16px;object-fit:contain}
#pageContent .creation-settings{padding:15px 16px!important}
#pageContent .creation-settings .card-head{align-items:center;margin-bottom:11px}
#pageContent .creation-settings .card-head h2,#pageContent .recent-creation .card-head h2{font-size:14px}
#pageContent .creation-model-field{margin:0 0 13px}
#pageContent .creation-model-field .field{height:36px;margin-top:6px}
#pageContent .creation-settings .field-label textarea{min-height:74px;padding:9px;resize:vertical}
#pageContent .range-label{gap:6px;margin-top:12px;font-size:11px}
#pageContent .range-label>span{grid-template-columns:minmax(0,1fr) 48px;gap:9px}
#pageContent .range-label input{width:100%;accent-color:#48674f}
#pageContent .switch-row{margin-top:10px;font-size:11px}
#pageContent .creation-settings .switch-row input{appearance:none;width:34px;height:20px;border-radius:99px;background:#d8ddd8;position:relative;cursor:pointer}
#pageContent .creation-settings .switch-row input:after{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;content:'';transition:left .18s}
#pageContent .creation-settings .switch-row input:checked{background:#4b7258}
#pageContent .creation-settings .switch-row input:checked:after{left:17px}
#pageContent .creation-composer .button.primary{background:#b65a2b;border-color:#b65a2b}
#pageContent .recent-creation{min-height:0;padding:15px 16px!important}
#pageContent .recent-creation .card-head{align-items:center;margin-bottom:9px}
#pageContent .creation-history-empty{min-height:135px;border:1px dashed #e1e7df;border-radius:10px}
@media(max-width:1050px){#pageContent .creation-chat{height:auto;min-height:530px}.creation-heading-art{display:none!important}}
@media(max-width:680px){#pageContent .creation-heading{min-height:78px;background-size:auto 105px}#pageContent .creation-heading h1{font-size:25px}#pageContent .creation-heading p{max-width:85%;font-size:10px}#pageContent .creation-tabs{width:100%;margin-bottom:10px}#pageContent .creation-tabs button{min-height:44px;padding:0 5px}#pageContent .creation-tabs button>span{gap:5px}#pageContent .creation-tabs button>b{font-size:10px}#pageContent .creation-workspace{gap:9px}#pageContent .creation-chat{min-height:470px;padding:12px}#pageContent .creation-composer>textarea{min-height:64px}#pageContent .composer-tools{gap:5px}#pageContent .composer-search{gap:4px;font-size:9px}}

/* Final visual pass from live-browser comparison against the 12 PNG references */
svg.ui-icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.overview-top-grid .dashboard-models .table-wrap{overflow:auto;overscroll-behavior-x:contain}
.overview-top-grid .dashboard-models table{min-width:610px}
.invite-qr-image{display:block;width:112px;height:112px;padding:4px;border:1px solid #e1e7dc;border-radius:7px;background:#fff;object-fit:contain}
.invite-qr{gap:8px}
@media(max-width:1220px){.overview-top-grid{grid-template-columns:minmax(0,1fr)}.overview-top-grid .dashboard-models table{min-width:0;table-layout:fixed}.overview-top-grid .dashboard-models th,.overview-top-grid .dashboard-models td{white-space:normal;overflow-wrap:anywhere}.overview-top-grid .dashboard-models th:nth-child(3),.overview-top-grid .dashboard-models th:nth-child(4),.overview-top-grid .dashboard-models td:nth-child(3),.overview-top-grid .dashboard-models td:nth-child(4){min-width:116px}}
#pageContent:has(#usageSearch)>.card:nth-child(2)>.card-head,#pageContent:has(#billingSearch)>.card:nth-child(2)>.card-head,#pageContent:has(#orderSearch)>.card:nth-child(2)>.card-head{display:flex!important;align-items:center;margin:0;padding:12px 14px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa}
#pageContent:has(#usageSearch)>.card:nth-child(2)>.card-head h2,#pageContent:has(#billingSearch)>.card:nth-child(2)>.card-head h2,#pageContent:has(#orderSearch)>.card:nth-child(2)>.card-head h2{display:none}
#pageContent:has(#billingSearch) .record-stats{order:0}
#pageContent:has(#orderSearch)>.page-actions{order:-1;justify-content:flex-end;margin:0}
/* Match the supplied overview and creation compositions at full desktop width. */
.overview-top-grid .dashboard-models table{min-width:0;table-layout:fixed}
.overview-top-grid .dashboard-models th,.overview-top-grid .dashboard-models td{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.overview-top-grid .dashboard-models th:nth-child(1),.overview-top-grid .dashboard-models td:nth-child(1){width:21%}
.overview-top-grid .dashboard-models th:nth-child(2),.overview-top-grid .dashboard-models td:nth-child(2){width:20%}
.overview-top-grid .dashboard-models th:nth-child(3),.overview-top-grid .dashboard-models td:nth-child(3),.overview-top-grid .dashboard-models th:nth-child(4),.overview-top-grid .dashboard-models td:nth-child(4){width:21%}
.overview-top-grid .dashboard-models th:nth-child(5),.overview-top-grid .dashboard-models td:nth-child(5){width:17%}
.overview-top-grid .dashboard-models th{font-size:9px;padding:7px 6px}
.overview-top-grid .dashboard-models td{font-size:10px;padding:7px 6px}
.dashboard-account .account-overview-content{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dashboard-account .account-overview-content{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.dashboard-metric{min-width:0;min-height:122px;display:grid;grid-template-columns:32px minmax(0,1fr);align-content:center;align-items:start;gap:10px;padding:15px;border:1px solid #e7ebe4;border-radius:9px;background:#fffefa}
.dashboard-metric>div{display:grid;align-content:start;gap:5px;min-width:0}
.dashboard-metric>div>span{color:#78847a;font-size:10px}
.dashboard-metric>div>b{color:#24392d;font:600 20px Georgia,'Noto Serif SC',serif;overflow-wrap:anywhere}
.dashboard-metric>div>b small{font:400 10px 'Noto Sans SC',sans-serif;color:#879188}
.dashboard-metric>div>small{color:#879188;font-size:9px;line-height:1.5}
.metric-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#f0f4ed;color:#456b4d}
.metric-icon .ui-icon{width:20px;height:20px}
.dashboard-metric .quota-track{height:6px;margin:3px 0;border-radius:99px;background:#e9eee7;overflow:hidden}
.dashboard-metric .quota-track i{display:block;height:100%;border-radius:inherit;background:#48674f}
.dashboard-metric.overview-plan{background:#fbf8f1}
.dashboard-metric.overview-plan .metric-icon{background:#f4ede2;color:#b5673d}
.dashboard-metric.overview-plan button{width:max-content;max-width:100%;justify-self:start;align-self:start;margin-top:2px;padding:0;border:0;background:transparent;color:#537453;font-size:10px}
.dashboard-metric button[data-go]{width:max-content;max-width:100%;justify-self:start;align-self:start;display:inline-flex;align-items:center;gap:4px;min-height:0;margin:2px 0 0;padding:0;border:0;background:transparent;color:#537453;font-size:10px;font-weight:500}
.dashboard-metric button[data-go]:hover{background:transparent;text-decoration:underline}
.dashboard-metric.dashboard-balance>div>b{color:#b45531;font-size:21px}
.dashboard-metric.dashboard-balance .button{justify-self:start;margin-top:4px;min-height:30px;padding:0 9px;font-size:10px}
#pageContent.client-content-page .creation-conversation{justify-content:flex-start}
@media(max-width:1150px){.dashboard-account .account-overview-content{grid-template-columns:repeat(2,minmax(0,1fr))}}
.creation-conversation{min-height:0}
.assistant-bubble time{display:block;margin-top:12px;color:#929b93;font:10px 'Noto Sans SC',sans-serif}
.invite-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0;padding:0;border:0;background:transparent}
.affiliate-stat-card{min-width:0;min-height:128px;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:14px;padding:17px 19px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa}
.affiliate-stat-card>div{display:grid;gap:5px;min-width:0}
.affiliate-stat-card>div>span{color:#7f8a81;font-size:11px}
.affiliate-stat-card b{color:#263b30;font:600 23px Georgia,'Noto Serif SC',serif}
.affiliate-stat-card:nth-child(2) b,.affiliate-stat-card:nth-child(3) b{color:#b45531}
.affiliate-stat-card small{color:#879188;font-size:10px;line-height:1.5}
.stat-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#edf3e9;color:#3c6848}
.stat-icon .ui-icon{width:25px;height:25px}
.stat-icon.is-warm{background:#fbf3e8;color:#a97132}.stat-icon.is-copper{background:#f8eee9;color:#ae5936}
.invite-copy-field{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:12px;margin-top:12px;padding:8px 10px;border:1px solid #e9ece6;border-radius:8px;background:#fbfcf9}
.invite-copy-field>b{color:#536257;font-size:11px}
.invite-copy-field .copy-row{background:#fff}
.invite-share-panel{grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr);gap:24px;padding:22px!important}
.invite-share-panel h2{font-size:23px}
.invite-share-panel .subtle{margin:0 0 10px}
.invite-share-panel .invite-qr{min-height:200px;background:#f5f6f0}
.invite-share-panel .invite-qr-image{width:150px;height:150px}
.invite-qr>b{font-size:12px}.invite-qr>small{font-size:10px;text-align:center}
.invite-lower-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.9fr);gap:14px;align-items:stretch}
.invite-lower-grid>.card{min-width:0}.invite-lower-grid>.card>.card{height:100%;border:0;box-shadow:none;background:transparent;padding:0}
.invite-rules-card .notice{margin-top:4px;min-height:88px}
.affiliate-status-note{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 0;border-top:1px solid #e9ece6}
.affiliate-status-note small{color:#7e897f;font-size:10px}
.invite-rule-footnote{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;margin-top:14px;padding:12px;border:1px solid #e9ece6;border-radius:8px;background:#f7f8f4;color:#536858}
.invite-rule-footnote .ui-icon{width:17px;height:17px}.invite-rule-footnote p{margin:0;color:#748176;font-size:10px;line-height:1.6}
.affiliate-tabs{display:flex;align-items:center;gap:26px;min-height:50px;margin-bottom:14px;padding:0 20px;border:1px solid #e5e9e1;border-radius:10px;background:#fffefa}
.affiliate-tabs a{height:50px;display:flex;align-items:center;padding:0 10px;border-bottom:2px solid transparent;color:#647167;text-decoration:none;font-size:12px}
.affiliate-tabs a.active{border-color:#48674f;color:#315b3c;font-weight:700}
.affiliate-tab-panel{display:grid;gap:12px;min-width:0}
.affiliate-tab-panel[hidden]{display:none!important}
.affiliate-tab-panel .affiliate-top-grid,.affiliate-tab-panel .affiliate-middle-grid,.affiliate-tab-panel .affiliate-bottom-grid{margin-bottom:0}
.affiliate-ledger-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
.affiliate-ledger-grid>.card{min-width:0;margin:0}
.affiliate-tab-panel .affiliate-action-area{margin:0}
.affiliate-top-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.88fr) minmax(0,1.25fr);gap:14px;margin-bottom:14px}
.affiliate-top-grid>.card{min-height:164px;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start;gap:12px;padding:18px!important}
.affiliate-top-grid .section-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:9px;background:#edf3e9;color:#3d6849}
.affiliate-top-grid .section-icon .ui-icon{width:26px;height:26px}
.affiliate-top-grid small{display:block;color:#7e897f;font-size:10px}
.affiliate-top-grid h2{margin:7px 0;color:#263b30;font:600 20px 'Noto Serif SC','Songti SC',serif}
.affiliate-top-grid p{margin:6px 0;color:#879188;font-size:10px}
.affiliate-top-grid .affiliate-level-card{background:linear-gradient(120deg,#fbf7ef,#fffefa)}
.affiliate-level-card .section-icon{background:#f7eee4;color:#b7653d}
.affiliate-top-grid .affiliate-cash-card b,.affiliate-earnings-card b{display:block;margin:7px 0;color:#b45531;font:600 24px Georgia,'Noto Serif SC',serif}
.affiliate-cash-card .button{margin-top:5px;min-height:32px}
.affiliate-top-grid .affiliate-earnings-card{grid-template-columns:1fr 1fr;align-items:center}
.affiliate-earnings-card>div+div{padding-left:18px;border-left:1px solid #e5e9e1}
.affiliate-middle-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.2fr);gap:14px;margin-bottom:14px}
.affiliate-middle-grid>.card{min-width:0;min-height:250px}
.affiliate-link-block{display:grid;gap:8px}.affiliate-link-block .copy-row{min-height:42px}
.affiliate-qr-row{display:flex;align-items:center;gap:12px;margin-top:8px;padding:10px;border:1px solid #e9ece6;border-radius:8px;background:#f8f9f5}
.affiliate-qr-row .invite-qr-image{width:82px;height:82px}.affiliate-link-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #e9ece6}
.affiliate-link-actions .subtle{max-width:280px;text-align:right;font-size:9px}
.affiliate-performance>.card-head{align-items:center}.affiliate-performance .card-head h2{margin:0 0 4px;font-size:15px}
.affiliate-chart{display:block;width:100%;height:174px;margin-top:8px;overflow:visible}.affiliate-chart text{fill:#808b81;font:11px 'Noto Sans SC',sans-serif}
.affiliate-chart-legend{display:flex;align-items:center;gap:6px;color:#778379;font-size:10px}.affiliate-chart-legend i{width:10px;height:10px;background:#b9cdb9}.affiliate-chart-legend b{width:16px;height:2px;margin-left:8px;background:#315b3c}
.affiliate-chart-empty{height:174px;display:grid;place-items:center;color:#929b93;font-size:11px}
.affiliate-bottom-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:14px;margin-bottom:14px}
.affiliate-bottom-grid>.card>.card{height:100%;border:0;box-shadow:none;background:transparent;padding:0}
.affiliate-bottom-grid .card-head{align-items:start}.affiliate-action-area{margin-bottom:14px}
.affiliate-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.affiliate-actions>section{padding:14px;border:1px solid #e7ebe4;border-radius:9px;background:#fffefa}
.affiliate-actions h3{margin:0 0 6px;color:#304638;font-size:13px}
@media(max-width:1000px){.invite-lower-grid,.affiliate-middle-grid,.affiliate-bottom-grid{grid-template-columns:1fr}.affiliate-top-grid{grid-template-columns:1fr 1fr}.affiliate-top-grid>.affiliate-earnings-card{grid-column:1/-1}}
@media(max-width:680px){.dashboard-account .account-overview-content,.invite-stat-grid,.affiliate-top-grid,.affiliate-actions{grid-template-columns:1fr}.invite-lower-grid{grid-template-columns:1fr}.invite-copy-field{grid-template-columns:1fr}.affiliate-top-grid>.affiliate-earnings-card{grid-column:auto}.affiliate-tabs{gap:10px;padding:0 8px}.affiliate-earnings-card>div{min-width:0}.affiliate-middle-grid,.affiliate-bottom-grid{grid-template-columns:1fr}}

/* Overview content only: reproduce the selected overview PNG below the existing app chrome. */
#pageContent:has(.overview-top-grid){display:block;max-width:none;padding:18px!important;background:#f8f8f4}
#pageContent .overview-top-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:0 0 14px;align-items:stretch}
#pageContent .overview-top-grid>.card{min-width:0;min-height:0;margin:0;padding:18px 20px;background:#fff;border:1px solid #e8ebe5;border-radius:12px;box-shadow:0 2px 12px #263a2c06}
#pageContent .overview-top-grid .card-head{align-items:flex-start;margin:0 0 13px}
#pageContent .overview-top-grid .card-head h2{color:#23372d;font-size:16px;font-weight:650}
#pageContent .overview-top-grid .card-head .subtle{margin:5px 0 0;color:#89928b;font-size:10px}
#pageContent .overview-top-grid .connect-strip{display:grid;gap:12px;margin:0;padding:0;border:0;background:transparent}
#pageContent .overview-top-grid .connect-strip>div{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:stretch;gap:0;padding:0;border:1px solid #e8ebe5;border-radius:9px;overflow:hidden}
#pageContent .overview-top-grid .connect-strip label{display:flex;align-items:center;margin:0;padding:0 14px;background:#f5f6f2;color:#34443a;font-size:11px;font-weight:600}
#pageContent .overview-top-grid .connect-strip .copy-row{min-width:0;height:48px;margin:0;padding:0 10px 0 13px;border:0;border-left:1px solid #eceee9;border-radius:0;background:#fff}
#pageContent .overview-top-grid .connect-strip .copy-row code{flex:1;color:#46554a;font-size:11px}
#pageContent .overview-top-grid .dashboard-models .table-wrap{max-height:none;overflow:auto;border:1px solid #e8ebe5;border-radius:8px}
#pageContent .overview-top-grid .dashboard-models table{width:100%;min-width:0;table-layout:fixed;white-space:normal}
#pageContent .overview-top-grid .dashboard-models th{padding:9px 8px;background:#f4f6f1;color:#707c72;font-size:9px;line-height:1.45}
#pageContent .overview-top-grid .dashboard-models td{padding:9px 8px;color:#48564b;font-size:9px;line-height:1.45;overflow-wrap:anywhere}
#pageContent .overview-top-grid .dashboard-models th:first-child,#pageContent .overview-top-grid .dashboard-models td:first-child{width:26%}
#pageContent .overview-top-grid .dashboard-models th:nth-child(2),#pageContent .overview-top-grid .dashboard-models td:nth-child(2){width:18%}
#pageContent .overview-top-grid .dashboard-models th:nth-child(3),#pageContent .overview-top-grid .dashboard-models td:nth-child(3){width:16%}
#pageContent .dashboard-account{min-height:222px;margin:0 0 14px;padding:18px 20px;background:#fff;border:1px solid #e8ebe5;border-radius:12px;box-shadow:0 2px 12px #263a2c06}
#pageContent .dashboard-account>.card-head{margin-bottom:14px}
#pageContent .dashboard-account>.card-head h2{font-size:16px}
#pageContent .dashboard-account>.card-head .subtle{margin:4px 0 0;font-size:10px}
#pageContent .overview-updated{display:flex;align-items:center;gap:7px;color:#89928b;font-size:9px;white-space:nowrap}
#pageContent .overview-updated button{width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;border-radius:5px;background:transparent;color:#56735b}
#pageContent .overview-updated button:hover{background:#f0f3ed}
#pageContent .overview-updated .ui-icon{width:15px;height:15px}
#pageContent .dashboard-account .account-overview-content{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px}
#pageContent .dashboard-account .dashboard-metric{min-height:132px;padding:16px 14px;background:#fff;border-color:#eceee9;border-radius:9px}
#pageContent .dashboard-account .dashboard-metric.overview-plan{background:#fbf8f2}
#pageContent .dashboard-account .dashboard-metric.overview-plan .metric-icon{background:#f5eee4;color:#ad603c}
#pageContent .dashboard-account .dashboard-metric.dashboard-balance>div>b{color:#a95a37;font-size:22px}
#pageContent .dashboard-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch}
#pageContent .dashboard-lower>.card{min-width:0;min-height:270px;padding:18px 20px!important;background:#fff;border:1px solid #e8ebe5;border-radius:12px;box-shadow:0 2px 12px #263a2c06}
#pageContent .dashboard-lower .card-head{align-items:flex-start;margin-bottom:10px}
#pageContent .dashboard-lower .card-head h2{font-size:15px}
#pageContent .dashboard-lower .card-head .subtle{margin:4px 0 0;font-size:10px}
#pageContent .overview-chart-legend{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #e8ebe5;border-radius:7px;color:#607263;font-size:9px}
#pageContent .overview-chart-legend i{width:8px;height:8px;border-radius:2px;background:#42684b}
#pageContent .overview-chart-axis{position:absolute;display:flex;flex-direction:column;justify-content:space-between;height:125px;margin:7px 0 0;color:#8a938b;font-size:9px}
#pageContent .dashboard-trend{position:relative}
#pageContent .overview-trend-chart{height:145px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:7px 0 0 27px;padding:7px 3px 0;border-bottom:1px solid #dce2d9;background:repeating-linear-gradient(to bottom,transparent 0,transparent 34px,#edf0eb 35px,#edf0eb 36px)}
#pageContent .overview-trend-day{min-width:0;display:grid;grid-template-rows:minmax(0,1fr) 18px;justify-items:center;align-items:end;gap:5px}
#pageContent .overview-token-bar{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center}
#pageContent .overview-token-bar i{width:min(30px,58%);min-height:2px;border-radius:4px 4px 0 0;background:#b9cdb9}
#pageContent .overview-trend-day small{color:#858f86;font-size:9px;white-space:nowrap}
#pageContent .overview-chart-empty{grid-column:1/-1;align-self:center;color:#929a92;text-align:center;font-size:11px}
#pageContent .overview-trend-chart.is-empty{align-items:center;justify-items:center;background:none;border:0}
#pageContent .overview-trend-chart.is-empty .overview-chart-empty{grid-column:1/-1;align-self:center}
#pageContent .dashboard-trend .trend-summary{margin:9px 0 0;font-size:9px}
#pageContent .dashboard-billing .table-wrap{border:1px solid #e8ebe5;border-radius:8px;overflow:auto}
#pageContent .dashboard-billing th{padding:9px 8px;font-size:9px}
#pageContent .dashboard-billing td{padding:9px 8px;font-size:9px}
/* Let the lower dashboard cards fill a shared height and stretch the billing table to the bottom. */
#pageContent .dashboard-lower>.card{min-height:400px;display:flex;flex-direction:column}
#pageContent .dashboard-trend .overview-trend-chart{height:auto;min-height:235px;flex:1;margin-top:7px}
#pageContent .dashboard-trend .overview-trend-chart.is-empty{min-height:235px}
#pageContent .dashboard-trend .trend-summary{margin-top:12px;padding-top:12px;border-top:1px solid #e5e9e2;font-size:10px}
#pageContent .dashboard-billing .table-wrap{flex:1;min-height:0;display:flex;margin-top:7px}
#pageContent .dashboard-billing table{height:100%;display:flex;flex-direction:column}
#pageContent .dashboard-billing thead{display:table;width:100%;table-layout:fixed}
#pageContent .dashboard-billing tbody{flex:1;display:flex;flex-direction:column}
#pageContent .dashboard-billing tbody tr{display:table;width:100%;table-layout:fixed}
#pageContent .dashboard-billing tbody tr:has(td.empty){height:100%;flex:1}
#pageContent .dashboard-billing tbody tr:has(td.empty) td.empty{height:100%;vertical-align:middle;text-align:center}
/* Overview API keys: compact three-column cards matching the key-management table. */
#pageContent .overview-api-key{min-width:0;display:grid;grid-template-columns:112px minmax(0,1fr);align-items:stretch;border:1px solid #e8ebe5;border-radius:9px;overflow:hidden;background:#fff}
#pageContent .overview-api-key>label{min-width:0;display:flex;align-items:center;margin:0;padding:0 14px;background:#f5f6f2;color:#34443a;font-size:11px;font-weight:600;overflow-wrap:anywhere}
#pageContent .overview-api-key .copy-row{min-width:0;height:48px;margin:0;padding:0 10px 0 13px;border:0;border-left:1px solid #eceee9;border-radius:0;background:#fff}
#pageContent .overview-api-key .copy-row code{min-width:0;flex:1;overflow:hidden;color:#46554a;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
#pageContent .overview-api-key .copy-row .icon-button{width:30px;height:30px;flex:0 0 30px;color:#526d58}
#pageContent .overview-api-key-empty{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid #e8ebe5;border-radius:9px;color:#8a948b;font-size:10px}
#pageContent .overview-api-key-empty button{padding:0;border:0;background:none;color:#a75f42;font-size:10px;font-weight:600}
@media(max-width:1200px){#pageContent .overview-top-grid{grid-template-columns:1fr}#pageContent .dashboard-account .account-overview-content{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){#pageContent:has(.overview-top-grid){padding:12px!important}#pageContent .overview-top-grid>.card,#pageContent .dashboard-account,#pageContent .dashboard-lower>.card{padding:14px!important}#pageContent .overview-top-grid .connect-strip>div,#pageContent .overview-api-key{grid-template-columns:92px minmax(0,1fr)}#pageContent .dashboard-lower{grid-template-columns:1fr}#pageContent .dashboard-account .account-overview-content{grid-template-columns:1fr!important}#pageContent .overview-api-key>label{padding:0 9px}}

/* Account metric cards: align labels, figures and actions to a clean shared baseline. */
#pageContent .dashboard-account .account-overview-content{gap:14px}
#pageContent .dashboard-account .dashboard-metric{min-height:154px;grid-template-columns:38px minmax(0,1fr);align-content:center;align-items:start;gap:14px;padding:22px 20px}
#pageContent .dashboard-account .dashboard-metric .metric-icon{width:36px;height:36px;border-radius:10px}
#pageContent .dashboard-account .dashboard-metric .metric-icon .ui-icon{width:21px;height:21px}
#pageContent .dashboard-account .dashboard-metric>div{min-width:0;width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;text-align:left}
#pageContent .dashboard-account .dashboard-metric>div>span{color:#6f7d72;font-size:12px;line-height:1.4;font-weight:500}
#pageContent .dashboard-account .dashboard-metric>div>b{display:flex;align-items:baseline;gap:7px;max-width:100%;color:#293b30;font-family:Inter,"Noto Sans SC","Microsoft YaHei UI",sans-serif;font-size:30px;font-weight:650;line-height:1.1;letter-spacing:-.035em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
#pageContent .dashboard-account .dashboard-metric>div>b small{color:#78857b;font-size:13px;font-weight:500;letter-spacing:0}
#pageContent .dashboard-account .dashboard-metric>div>small{color:#859087;font-size:11px;line-height:1.5}
#pageContent .dashboard-account .dashboard-metric button[data-go]{margin:1px 0 0;font-size:11px;font-weight:600}
#pageContent .dashboard-account .dashboard-metric.dashboard-balance>div>b{justify-self:start;align-self:flex-start;color:#a95a37;font-size:30px;letter-spacing:-.04em}
#pageContent .dashboard-account .dashboard-metric.dashboard-balance .button{min-height:34px;margin-top:3px;padding:0 12px;font-size:11px}
#pageContent .dashboard-account .dashboard-metric.overview-plan>div>b{color:#2d4034;font-size:25px;letter-spacing:-.025em}
@media(max-width:1150px){#pageContent .dashboard-account .dashboard-metric{min-height:140px;padding:18px 16px}}
@media(max-width:680px){#pageContent .dashboard-account .dashboard-metric{min-height:116px;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:16px}#pageContent .dashboard-account .dashboard-metric .metric-icon{width:32px;height:32px}#pageContent .dashboard-account .dashboard-metric>div>b,#pageContent .dashboard-account .dashboard-metric.dashboard-balance>div>b{font-size:25px}#pageContent .dashboard-account .dashboard-metric.overview-plan>div>b{font-size:22px}}

/* 12-screen review: content-only proportion fixes */
.creation-history-empty{min-height:120px;display:grid;align-content:center;justify-items:center;gap:8px;border:1px dashed #e4e9e2;border-radius:9px;color:#778379;text-align:center}.creation-history-empty>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#f0f4ed;color:#55725b}.creation-history-empty .ui-icon{width:17px;height:17px}.creation-history-empty b{color:#4a594d;font-size:11px}.creation-history-empty small{font-size:9px}


.topup-balance .balance-topup-action{min-height:32px;margin-top:10px;padding:0 12px}.topup-balance .balance-topup-action .ui-icon{width:14px;height:14px}.balance-quick-stats span{position:relative;display:grid;gap:5px}.balance-quick-stats span small{color:#879188;font-size:10px}.topup-package{position:relative;grid-template-columns:22px minmax(0,1fr);align-items:center;column-gap:7px}.topup-package>.ui-icon{grid-row:1/4;width:19px;height:19px;color:#49704f}.topup-package>span,.topup-package>b,.topup-package>small{grid-column:2}.topup-package>b{font-size:14px}.topup-package>small{font-size:8px}.support-help-row{grid-template-columns:22px minmax(0,1fr) auto}.support-link-label{display:flex;align-items:center;gap:3px;color:#4b704e;font-size:9px;white-space:nowrap}.support-link-label .ui-icon{width:12px;height:12px}.affiliate-level-card:after{cursor:pointer;transition:background .15s}.affiliate-level-card:hover:after{background:#eff3eb}

.topup-balance .balance-topup-action{min-height:32px;margin-top:10px;padding:0 12px}.topup-balance .balance-topup-action .ui-icon{width:14px;height:14px}.balance-quick-stats span{position:relative;display:grid;gap:5px}.balance-quick-stats span small{color:#879188;font-size:10px}.topup-package{position:relative;grid-template-columns:22px minmax(0,1fr);align-items:center;column-gap:7px}.topup-package>.ui-icon{grid-row:1/4;width:19px;height:19px;color:#49704f}.topup-package>span,.topup-package>b,.topup-package>small{grid-column:2}.topup-package>b{font-size:14px}.topup-package>small{font-size:8px}.support-help-row{grid-template-columns:22px minmax(0,1fr) auto}.support-link-label{display:flex;align-items:center;gap:3px;color:#4b704e;font-size:9px;white-space:nowrap}.support-link-label .ui-icon{width:12px;height:12px}.affiliate-level-card:after{cursor:pointer;transition:background .15s}.affiliate-level-card:hover:after{background:#eff3eb}

@media(min-width:1051px){.topup-layout{grid-template-columns:minmax(0,1.12fr) minmax(340px,.94fr)}.topup-layout>.support-records:nth-of-type(3){grid-column:1}.topup-layout>.support-records:nth-of-type(4){grid-column:2}.topup-balance{grid-template-columns:minmax(0,1fr) minmax(260px,.95fr)}.balance-quick-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.balance-quick-stats span{display:grid;align-content:center;gap:6px;min-width:0}.balance-quick-stats b{font-size:14px;overflow-wrap:anywhere}}
@media(max-width:1050px){.topup-layout{grid-template-columns:1fr}.topup-layout>.support-records:nth-of-type(4){grid-column:auto}}

#pageContent:has(.usage-filters){display:grid!important;grid-template-columns:1fr;gap:12px;align-content:start}
#pageContent:has(.usage-filters)>.card{display:contents!important}
#pageContent:has(.usage-filters) .card-head{display:none!important}
#pageContent:has(.usage-filters) .record-stats{order:2;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:12px 16px;border:1px solid #e5e9e1;border-radius:10px;background:#fffefa}
#pageContent:has(.usage-filters) .usage-filters{order:1;grid-row:1}
#pageContent:has(.usage-filters) .table-wrap{order:3;padding:10px 14px;border:1px solid #e5e9e1;border-radius:10px;background:#fffefa}
#pageContent:has(.usage-filters) .usage-pagination{order:4}

/* API key management page, matched to the supplied design reference. */
#pageContent:has(.key-management-card){display:grid;gap:12px;align-content:start;width:100%;max-width:none;margin:0}
#pageContent.client-content-page:has(.key-management-card){padding:12px!important}
#pageContent .key-safety-card,#pageContent .key-management-card{width:100%;max-width:none;margin:0;padding:12px;background:#fffefa;border-color:#e8ebe5;border-radius:12px;box-shadow:0 3px 14px #25372b08}
#pageContent .key-safety-card .card-head,#pageContent .key-management-card .card-head{margin-bottom:12px}
#pageContent .key-safety-card .card-head h2,#pageContent .key-management-card .card-head h2{color:#2e4335;font-size:15px;font-weight:700}
#pageContent .key-table-toolbar{display:flex;align-items:center;gap:12px;margin:0 0 12px}
#pageContent .key-search{width:min(100%,320px);height:42px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid #e1e7df;border-radius:9px;background:#fff}
#pageContent .key-search .search-mark{color:#849188;font-size:22px;line-height:1}
#pageContent .key-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#34463a;font-size:12px}
#pageContent .key-search input::placeholder{color:#9aa39b}
#pageContent .key-table-toolbar select{height:42px;min-width:150px;padding:0 30px 0 12px;border:1px solid #e1e7df;border-radius:9px;background:#fff;color:#4c5b50;font-size:12px}
#pageContent .key-filter-count{order:0;margin-left:0;color:#89938b;font-size:11px;white-space:nowrap}
#pageContent .key-create-button{order:1;margin-left:auto;min-height:42px;display:inline-flex;align-items:center;gap:7px;padding:0 18px;border-radius:9px;white-space:nowrap}
#pageContent .key-create-button .ui-icon{width:16px;height:16px}
#pageContent .key-safety-lead{grid-template-columns:62px minmax(0,1fr) auto;gap:20px;min-height:76px}
#pageContent .key-safety-lead>span{width:62px;height:62px;border-radius:13px;background:#f0f4ed;color:#4d7153}
#pageContent .key-safety-lead>span .ui-icon{width:32px;height:32px}
#pageContent .key-safety-lead b{color:#35493a;font-size:15px}
#pageContent .key-safety-lead p{max-width:none;margin-top:8px;font-size:12px;line-height:1.65}
#pageContent .key-safety-lead .button{min-width:176px;min-height:56px;border-color:#466c50;border-radius:11px;background:#466c50;font-size:13px}
#pageContent .key-management-card .table-wrap{width:100%;overflow:auto;border:1px solid #e5e9e2;border-radius:12px}
#pageContent .key-management-card table{width:100%;min-width:1320px;white-space:nowrap}
#pageContent .key-management-card th{height:52px;padding:0 12px;background:#f1f4ef;color:#738075;font-size:12px;font-weight:650}
#pageContent .key-management-card td{height:72px;padding:10px 12px;border-top:1px solid #edf0eb;color:#4d5d51;font-size:12px}
#pageContent .key-management-card th:nth-child(1),#pageContent .key-management-card td:nth-child(1){width:12%}
#pageContent .key-management-card th:nth-child(2),#pageContent .key-management-card td:nth-child(2){width:20%}
#pageContent .key-management-card th:nth-child(3),#pageContent .key-management-card td:nth-child(3){width:17%}
#pageContent .key-management-card th:nth-child(4),#pageContent .key-management-card td:nth-child(4){width:16%}
#pageContent .key-management-card th:nth-child(5),#pageContent .key-management-card td:nth-child(5){width:10%}
#pageContent .key-management-card th:nth-child(6),#pageContent .key-management-card td:nth-child(6){width:10%}
#pageContent .key-management-card th:nth-child(7),#pageContent .key-management-card td:nth-child(7){width:15%}
#pageContent .key-management-card th:nth-child(8),#pageContent .key-management-card td:nth-child(8){width:20%}
#pageContent .key-hint-copy{width:min(100%,390px);min-height:44px;display:flex;align-items:center;gap:8px;padding:4px 9px 4px 13px;border:1px solid #ecefea;border-radius:9px;background:#f6f7f4}
#pageContent .key-hint-copy code{min-width:0;flex:1;overflow:hidden;color:#526156;font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;text-overflow:ellipsis;white-space:nowrap}
#pageContent .key-hint-copy .icon-button{width:30px;height:30px;flex:0 0 30px;color:#42674c}
#pageContent .key-status{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:99px;background:#edf5ea;color:#42754a;font-size:12px;font-weight:600;white-space:nowrap}
#pageContent .key-status i{width:9px;height:9px;border-radius:50%;background:#4c8b55}
#pageContent .key-status.is-revoked{background:#fbefec;color:#b34836}
#pageContent .key-status.is-revoked i{background:#bd4934}
#pageContent .key-table-actions{display:flex;align-items:center;gap:13px;white-space:nowrap}
#pageContent .key-row-action{display:inline-flex;align-items:center;gap:7px;padding:5px 0;border:0;background:transparent;color:#45584b;font-size:12px;font-weight:600}
#pageContent .key-row-action .ui-icon{width:18px;height:18px}
#pageContent .key-row-action.is-danger{color:#bd493d}
#pageContent .key-action-divider{width:1px;height:20px;background:#dfe4dd}
#pageContent .key-row-action.is-disabled{color:#aab1aa;cursor:default}
#pageContent .key-name{color:#34463a;font-size:12px;font-weight:650}
#pageContent .key-group-tags{display:flex;flex-wrap:wrap;gap:5px;max-width:100%}
#pageContent .key-group-tags span{max-width:100%;overflow:hidden;padding:5px 8px;border-radius:6px;background:#edf5ef;color:#42805a;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
#pageContent .key-group-tags span.is-empty{background:#f3f4f1;color:#909890}
#pageContent .key-usage-cell{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:6px;color:#667469}
#pageContent .key-usage-cell>b{min-width:30px;padding:5px 7px;border-radius:6px;background:#f0f2f3;color:#697783;text-align:center;font-size:11px;font-variant-numeric:tabular-nums}
#pageContent .key-usage-cell>span{font-size:10px}
#pageContent .key-usage-cell>small{grid-column:1/-1;color:#89938b;font-size:10px}
#pageContent .key-table-actions{gap:12px}
#pageContent .key-management-card tr[hidden]{display:none}
#pageContent .key-security-panel{min-height:42px;display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid #f3dfc8;border-radius:10px;background:#fffaf4;color:#718075}
#pageContent .key-security-icon{flex:0 0 auto;color:#b15d2f;font-size:17px;font-weight:700}
#pageContent .key-security-panel p{margin:0;font-size:11px;line-height:1.5}
#pageContent .key-security-panel p b{margin-right:8px;color:#a9582f;font-size:12px}
#pageContent:has(.key-management-card) .key-table-toolbar{gap:12px;margin:0 0 12px}
@media(max-width:760px){#pageContent .key-safety-card,#pageContent .key-management-card{padding:12px!important}#pageContent .key-table-toolbar{flex-wrap:wrap}#pageContent .key-search{width:100%;max-width:none}#pageContent .key-table-toolbar select{min-width:0;flex:1}#pageContent .key-create-button{order:1;flex:0 0 auto;justify-content:center;margin-left:auto}#pageContent .key-filter-count{order:0;width:auto;margin-left:0;text-align:right}#pageContent .key-safety-lead{grid-template-columns:42px minmax(0,1fr);gap:12px}#pageContent .key-safety-lead>span{width:42px;height:42px}#pageContent .key-safety-lead>div{min-width:0}#pageContent .key-safety-lead b{font-size:13px}#pageContent .key-safety-lead .button{grid-column:1/-1;min-height:44px;justify-self:stretch}#pageContent .key-security-panel{align-items:flex-start;padding:9px 12px}#pageContent .key-security-icon{line-height:1.4}}
#pageContent:has(.key-management-card) .key-table-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}
#pageContent:has(.key-management-card) .key-table-toolbar>.field{min-width:220px;width:auto}
#pageContent .key-bulk-bar{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid #edf0eb;border-bottom:1px solid #edf0eb;margin-bottom:10px;color:#657267;font-size:12px}
#pageContent .key-bulk-bar .button{min-height:30px;padding:0 10px}
#pageContent .key-bulk-bar span{margin-right:auto}
#pageContent .key-columns{position:relative;margin-left:auto;font-size:12px;color:#59685d}.key-columns summary{cursor:pointer;padding:8px 10px;border:1px solid #e2e8e0;border-radius:8px}.key-columns>div{position:absolute;right:0;z-index:5;display:grid;gap:8px;min-width:150px;padding:12px;background:#fff;border:1px solid #e2e8e0;border-radius:8px;box-shadow:0 8px 22px #1d302312}.key-columns label{white-space:nowrap}
#pageContent .key-pager{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-top:12px;color:#7a877d;font-size:12px}.key-pager select{height:30px;border:1px solid #dfe6dd;border-radius:7px}.key-pager .button{min-height:30px;padding:0 10px}
#pageContent .key-sort{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0}.key-cell-note{display:block;color:#89958c;margin-top:4px}.key-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.key-form-grid textarea{min-height:75px;resize:vertical}.key-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px;border:1px solid #e4eae2;border-radius:10px;padding:12px}.key-routes legend{padding:0 5px;color:#526256;font-weight:650}.managed-key-dialog{width:min(760px,calc(100% - 30px));border:0;border-radius:16px;padding:0;color:#36463a;box-shadow:0 20px 80px #17261f30}.managed-key-dialog::backdrop{background:#1f302c45}.managed-key-dialog>header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #edf0eb}.managed-key-dialog>header h2{margin:0;font-size:16px}.managed-key-dialog>#managedDialogBody{padding:20px 22px;max-height:72vh;overflow:auto}.managed-key-dialog footer{display:flex;justify-content:flex-end;margin-top:18px}.key-detail-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.key-detail-metrics b{padding:14px;background:#f1f5ef;border-radius:9px;font-size:13px}.managed-key-dialog .table-wrap{overflow:auto}.managed-key-dialog .codebox{word-break:break-all;white-space:pre-wrap;margin-bottom:12px}
@media(max-width:760px){#pageContent .key-form-grid,#pageContent .key-routes{grid-template-columns:1fr}.key-detail-metrics{grid-template-columns:1fr}.key-bulk-bar{flex-wrap:wrap}.key-bulk-bar span{margin-right:0}.key-columns{margin-left:0}}
#pageContent.page-content{width:100%;max-width:none;margin:0;padding:12px!important}
#pageContent.page-content{min-height:calc(100dvh - 64px);align-content:stretch}
#pageContent.page-content:has(>.card:only-child)>.card{min-height:calc(100dvh - 112px)}
#pageContent:has(.key-management-card)>#newKey:empty{display:none}
#pageContent.page-content:has(.key-management-card){min-height:calc(100dvh - 64px);grid-template-rows:minmax(calc(100dvh - 160px),1fr) auto}
#pageContent.page-content:has(.key-management-card)>.key-management-card{min-height:calc(100dvh - 160px)}
#pageContent.client-content-page:not(:has(.key-management-card)):not(:has(#usageSearch)):not(:has(#billingSearch)):not(:has(#orderSearch)){display:flex;flex-direction:column;align-items:stretch;gap:12px;min-height:calc(100dvh - 64px)}
#pageContent.client-content-page:not(:has(.key-management-card)):not(:has(#usageSearch)):not(:has(#billingSearch)):not(:has(#orderSearch))>:last-child{flex:1 1 auto;min-height:0}
#pageContent.client-content-page:has(#modelSearch)>.card{flex:1 1 auto}
#pageContent.client-content-page:has(#modelSearch)>.model-note{flex:0 0 auto}
#pageContent.client-content-page:has(.creation-workspace)>.creation-workspace{flex:1 1 auto;min-height:0;align-items:stretch}
#pageContent.client-content-page:has(.creation-workspace) .creation-main,#pageContent.client-content-page:has(.creation-workspace) .creation-aside{min-height:0}
#pageContent.client-content-page:has(.creation-workspace) .creation-chat{height:100%;min-height:0;max-height:none}
#pageContent.client-content-page:has(.creation-workspace) .creation-aside{grid-template-rows:minmax(0,1fr) auto;align-content:stretch}
#pageContent.client-content-page:has(.topup-layout){display:block!important;height:auto!important;min-height:calc(100dvh - 104px);overflow-y:auto!important;overflow-x:hidden!important;scrollbar-gutter:stable;}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);grid-template-rows:auto auto auto;align-content:start;align-items:start;gap:14px;min-height:0;margin:0 0 14px}
#pageContent.client-content-page:has(.topup-layout) .topup-main{display:grid;align-content:start;grid-template-rows:auto auto;gap:14px;min-width:0}
#pageContent.client-content-page:has(.topup-layout) .help-panel{align-self:start;height:auto;min-height:0}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:first-of-type{grid-column:1/-1;grid-row:2;align-self:start}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:last-of-type{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);align-items:start;gap:18px;min-width:0;min-height:0;padding:16px 22px}
#pageContent.client-content-page:has(.topup-layout) .support-records:last-child>.card{min-width:0;align-self:start}#pageContent.client-content-page:has(.topup-layout) .support-records:last-child>.card>.table-wrap{min-height:96px}#pageContent.client-content-page:has(.topup-layout) .support-records:last-child>.card>.table-wrap table{width:100%}
#pageContent.client-content-page:has(.topup-layout) .support-records:last-child>.card>.card{padding:12px 0 0}
#pageContent.client-content-page:has(.topup-layout) .ticket-inline-form{grid-column:2;display:grid;grid-template-columns:1fr;align-content:start;gap:10px;margin:12px 0 0;padding:12px;border:1px solid #e7ebe4;border-radius:9px;background:#fafbf8}
#pageContent.client-content-page:has(.topup-layout) .ticket-inline-form .field-label:nth-child(3){grid-column:auto}
#pageContent.client-content-page:has(.topup-layout) .ticket-inline-form textarea{min-height:84px}
#pageContent.client-content-page:has(.topup-layout) .ticket-inline-form>.button{justify-self:start}
@media(max-width:1050px){#pageContent.client-content-page:has(.topup-layout)>.topup-layout{grid-template-columns:minmax(0,1fr)}#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:first-of-type,#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:last-of-type{grid-column:1;grid-row:auto}#pageContent.client-content-page:has(.topup-layout) .support-records:last-child{grid-template-columns:1fr}#pageContent.client-content-page:has(.topup-layout) .ticket-inline-form{grid-column:1}}
#pageContent:has(#usageSearch){min-height:calc(100dvh - 64px);align-content:stretch;grid-template-rows:auto auto minmax(0,1fr) auto}
#pageContent:has(.usage-filters){height:calc(100dvh - 64px);min-height:0;grid-template-rows:auto minmax(0,1fr);gap:12px;align-content:stretch;overflow:hidden}
#pageContent:has(.usage-filters) .usage-filters{order:0;grid-row:auto;display:grid;grid-template-columns:auto minmax(150px,190px) auto minmax(180px,1fr) auto auto;align-items:center;gap:12px;margin:0;padding:12px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa}
#pageContent:has(.usage-filters) .usage-filters>label{display:flex;align-items:center;gap:8px;min-width:0;color:#526256;font-size:12px;white-space:nowrap}
#pageContent:has(.usage-filters) .usage-filters input,#pageContent:has(.usage-filters) .usage-filters select{width:100%;min-width:0;height:40px;margin:0;padding:0 10px;border:1px solid #e1e7df;border-radius:8px;background:#fff;color:#394b3e;font-size:12px}
#pageContent:has(.usage-filters) .usage-filters .request-id-filter input{flex:1}
#pageContent:has(.usage-filters) .usage-filters>.button{min-width:72px;height:40px;min-height:40px}
#pageContent:has(.usage-filters) .record-stats{order:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:12px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa}
#pageContent:has(.usage-filters) .record-stats>div{display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-width:0;min-height:104px;padding:12px 16px;border-right:1px solid #e7ebe4}
#pageContent:has(.usage-filters) .record-stats>div:last-child{border:0}
#pageContent:has(.usage-filters) .record-stats span{color:#78867c;font-size:12px}
#pageContent:has(.usage-filters) .record-stats b{color:#294335;font:600 25px/1.2 Georgia,'Noto Serif SC',serif;overflow-wrap:anywhere}
#pageContent:has(.usage-filters) .table-wrap{order:0;min-height:0;display:flex;flex-direction:column;margin:0;padding:12px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa;overflow:auto}
#pageContent:has(.usage-filters) .table-wrap table{width:100%;height:100%;min-width:900px;table-layout:auto}
#pageContent:has(.usage-filters) .table-wrap tbody tr:has(td.empty){height:100%}
#pageContent:has(.usage-filters) .table-wrap td.empty{height:100%;vertical-align:middle;text-align:center}
#pageContent:has(.usage-filters) .usage-pagination{order:0;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:0;color:#647268;font-size:12px}
#pageContent:has(.usage-filters) .usage-pagination>div{display:flex;align-items:center;gap:8px}
#pageContent:has(.usage-filters) .usage-pagination .button{min-width:38px;height:38px;min-height:38px}
@media(max-width:900px){#pageContent:has(.usage-filters){height:auto;min-height:calc(100dvh - 64px);grid-template-rows:auto auto auto auto;overflow:visible}#pageContent:has(.usage-filters) .usage-filters{grid-template-columns:repeat(2,minmax(0,1fr))}#pageContent:has(.usage-filters) .record-stats{grid-template-columns:repeat(2,minmax(0,1fr))}#pageContent:has(.usage-filters) .record-stats>div:nth-child(2){border-right:0}#pageContent:has(.usage-filters) .table-wrap{min-height:300px}}
@media(max-width:560px){#pageContent:has(.usage-filters) .usage-filters{grid-template-columns:minmax(0,1fr)}#pageContent:has(.usage-filters) .usage-filters>label{display:grid;grid-template-columns:90px minmax(0,1fr)}#pageContent:has(.usage-filters) .usage-filters>.button{width:100%}#pageContent:has(.usage-filters) .record-stats>div{padding:10px;min-height:90px}#pageContent:has(.usage-filters) .record-stats b{font-size:20px}}
#pageContent:has(#usageSearch)>.card>.card-head,#pageContent:has(#usageSearch)>.card:nth-child(2)>.card-head{display:none!important}
#pageContent:has(#usageSearch) .usage-filters{order:1!important;grid-row:auto!important}
#pageContent:has(#usageSearch) .record-stats{order:2!important}
#pageContent:has(#usageSearch) .table-wrap{order:3!important}
#pageContent:has(#usageSearch) .usage-pagination{order:4!important}
#pageContent:has(#usageSearch) .table-wrap{display:flex;min-height:0}
#pageContent:has(#usageSearch) .table-wrap table{min-width:900px}
#pageContent:has(#usageSearch) .usage-filters{grid-template-columns:minmax(135px,1.25fr) minmax(130px,1.1fr) minmax(130px,1.1fr) minmax(170px,1.6fr) 60px 60px;gap:8px;padding:10px}
#pageContent:has(#usageSearch) .usage-filters>label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;font-size:11px}
#pageContent:has(#usageSearch) .usage-filters>.button{min-width:60px;padding:0 12px}
#pageContent:has(#usageSearch) .table-wrap table{min-width:0;table-layout:fixed}
#pageContent:has(#usageSearch) .table-wrap th,#pageContent:has(#usageSearch) .table-wrap td{padding:9px 6px;font-size:10px;white-space:normal;overflow-wrap:anywhere}
#pageContent:has(#usageSearch) .table-wrap th:nth-child(1){width:11%}
#pageContent:has(#usageSearch) .table-wrap th:nth-child(2){width:14%}
#pageContent:has(#usageSearch) .table-wrap th:nth-child(3){width:12%}
#pageContent:has(#usageSearch) .table-wrap th:nth-child(4),#pageContent:has(#usageSearch) .table-wrap th:nth-child(5),#pageContent:has(#usageSearch) .table-wrap th:nth-child(6){width:12%}
#pageContent:has(#usageSearch) .table-wrap th:nth-child(7),#pageContent:has(#usageSearch) .table-wrap th:nth-child(8){width:9%}
#pageContent:has(#usageSearch) .table-wrap th:nth-child(9){width:7%}
#pageContent:has(#usageSearch) .table-wrap th:nth-child(10){width:8%}

/* Keep the usage table and its result count/pager inside the same card. */
@media(min-width:901px){
  #pageContent.page-content:has(#usageSearch){
    grid-template-rows:auto minmax(0,1fr)!important;
  }
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card{
  display:flex!important;
  flex-direction:column;
  order:3!important;
  gap:12px;
  min-width:0;
  min-height:0;
  height:100%;
  margin:0;
  padding:12px!important;
  border:1px solid #e5e9e1;
  border-radius:11px;
  background:#fffefa;
}
#pageContent.client-content-page:has(.usage-filters) .record-stats{
  order:2!important;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.usage-filters{
  flex:0 0 auto;
  order:0!important;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.table-wrap{
  flex:1 1 0;
  order:1!important;
  width:100%;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.usage-pagination{
  flex:0 0 auto;
  order:2!important;
  width:100%;
  margin:0;
  padding:0 2px;
}
@media(min-width:901px) and (max-width:1200px){
  #pageContent:has(.overview-top-grid){display:flex!important;flex-direction:column;gap:12px;min-height:calc(100dvh - 64px);height:auto;overflow:visible;padding:12px!important}
  #pageContent:has(.overview-top-grid)>.overview-top-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;flex:0 0 auto}
  #pageContent .overview-top-grid>.card{min-width:0;min-height:0;height:auto;padding:14px!important}
  #pageContent .overview-top-grid .card-head{margin-bottom:12px}
  #pageContent .overview-top-grid .dashboard-models .table-wrap{max-height:170px;overflow:auto}
  #pageContent:has(.overview-top-grid)>.dashboard-account{min-height:0;margin:0;padding:14px!important}
  #pageContent .dashboard-account>.card-head{margin-bottom:12px}
  #pageContent .dashboard-account .account-overview-content{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px}
  #pageContent .dashboard-account .dashboard-metric{min-height:112px;padding:10px;grid-template-columns:26px minmax(0,1fr);gap:8px}
  #pageContent .dashboard-account .dashboard-metric .metric-icon{width:26px;height:26px}
  #pageContent .dashboard-account .dashboard-metric .metric-icon .ui-icon{width:16px;height:16px}
  #pageContent .dashboard-account .dashboard-metric>div{gap:6px}
  #pageContent .dashboard-account .dashboard-metric>div>b,#pageContent .dashboard-account .dashboard-metric.dashboard-balance>div>b{font-size:20px}
  #pageContent .dashboard-account .dashboard-metric.overview-plan>div>b{font-size:18px}
  #pageContent:has(.overview-top-grid)>.dashboard-lower{min-height:220px;flex:1 0 220px;gap:12px}
  #pageContent .dashboard-lower>.card{min-height:220px;padding:12px!important}
  #pageContent .dashboard-trend .overview-trend-chart{height:110px;min-height:110px;margin-top:8px}
  #pageContent .dashboard-trend .overview-trend-chart.is-empty{min-height:110px}
  #pageContent .dashboard-trend .trend-summary{margin-top:8px;padding-top:8px}
  #pageContent .dashboard-billing .table-wrap{min-height:110px;margin-top:8px}
}
#pageContent:has(#billingSearch){height:calc(100dvh - 64px);grid-template-rows:auto auto minmax(0,1fr);gap:12px;overflow:hidden}
#pageContent:has(#billingSearch) .record-stats{order:1!important;align-self:start;min-height:112px;padding:12px}
#pageContent:has(#billingSearch)>.card:nth-child(2)>.card-head{order:2;align-self:start;width:100%;min-height:64px;padding:10px!important}
#pageContent:has(#billingSearch) .table-wrap{order:3!important;align-self:stretch;min-height:0;height:100%;display:flex;overflow:auto}
#pageContent:has(#billingSearch) .table-wrap table{min-width:640px}
#pageContent:has(#orderSearch){height:calc(100dvh - 64px);grid-template-rows:auto auto auto minmax(0,1fr);gap:12px;overflow:hidden}
#pageContent:has(#orderSearch)>.page-actions{order:1!important;align-self:start;display:flex;gap:12px;margin:0;padding:0}
#pageContent:has(#orderSearch)>.page-actions .button{height:40px;min-height:40px;padding:0 16px}
#pageContent:has(#orderSearch)>.card:nth-child(2)>.card-head{order:2;align-self:start;width:100%;min-height:60px;padding:10px!important}
#pageContent:has(#orderSearch) .record-stats{order:3!important;align-self:start;min-height:100px;padding:12px}
#pageContent:has(#orderSearch) .table-wrap{order:4!important;align-self:stretch;min-height:0;height:100%;display:flex;overflow:auto}
#pageContent:has(#orderSearch) .table-wrap table{min-width:680px}
#pageContent:has(#orderSearch)>.card>.card-head{display:none!important}
#pageContent:has(#orderSearch)>.card:nth-child(2)>.card-head{display:flex!important}
@media(max-width:900px){#pageContent:has(#billingSearch),#pageContent:has(#orderSearch){height:auto;min-height:calc(100dvh - 64px);overflow:visible;grid-template-rows:auto auto auto}#pageContent:has(#orderSearch){grid-template-rows:auto auto auto auto}#pageContent:has(#billingSearch) .table-wrap,#pageContent:has(#orderSearch) .table-wrap{height:auto;min-height:280px}}
@media(min-width:901px) and (max-width:1250px){#pageContent:has(.topup-layout) .topup-packages{grid-template-columns:repeat(3,minmax(0,1fr))}#pageContent:has(.topup-layout) .topup-packages>.topup-package{min-width:0}}
#pageContent:has(.redeem-steps){height:calc(100dvh - 64px);grid-template-rows:minmax(0,auto) minmax(0,1fr);overflow:hidden}
#pageContent:has(.redeem-steps)>.card:last-of-type{min-height:0;display:flex;flex-direction:column;overflow:hidden}
#pageContent:has(.redeem-steps)>.card:last-of-type .table-wrap{flex:1;min-height:0;overflow:auto}
#pageContent:has(.redeem-steps)>.support-records{display:flex;flex:1 1 auto;min-height:0;flex-direction:column}
#pageContent:has(.redeem-steps)>.support-records>.card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#pageContent:has(.redeem-steps)>.support-records>.card>.table-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
@media(max-width:900px){#pageContent:has(.redeem-steps){height:auto;min-height:calc(100dvh - 64px);overflow:visible}#pageContent:has(.redeem-steps)>.card:last-of-type .table-wrap{min-height:180px}}
#pageContent:has(#billingSearch),#pageContent:has(#orderSearch){min-height:calc(100dvh - 64px);align-content:stretch}
#pageContent:has(.overview-top-grid){display:grid;grid-template-rows:auto auto minmax(0,1fr);align-content:stretch;gap:12px;min-height:calc(100dvh - 64px);max-width:none;padding:12px!important}
#pageContent .creation-heading{position:relative;display:flex;align-items:center;min-height:105px;margin:-4px 0 13px;padding:6px 18px;overflow:hidden;background:linear-gradient(90deg,#f8faf6 15%,#f8faf6cc 48%,transparent),url('/assets/client-landscape-wash.png') right center/auto 150px no-repeat}
#pageContent .creation-heading h1{position:relative;z-index:1;margin:0;color:#152f26;font:500 31px/1.15 Georgia,'Noto Serif SC',serif;letter-spacing:.04em}
#pageContent .creation-heading p{position:relative;z-index:1;margin:8px 0 0;color:#829087;font-size:12px}
#pageContent .creation-heading-art{flex:1;height:100%}
#pageContent .creation-tabs{width:100%;max-width:none;margin-bottom:14px}
#pageContent .creation-workspace{grid-template-columns:minmax(0,1.58fr) minmax(310px,.82fr);gap:16px}
#pageContent .creation-chat,#pageContent .creation-settings,#pageContent .recent-creation{border-color:#e6ebe3;box-shadow:0 5px 18px #24382b08}
#pageContent .creation-model-field{margin:0 0 14px}
#pageContent .creation-model-field .field{margin-top:7px;height:39px}
#pageContent .creation-settings .switch-row input{appearance:none;width:34px;height:20px;border-radius:99px;background:#d8ddd8;position:relative;cursor:pointer}
#pageContent .creation-settings .switch-row input::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:.18s}
#pageContent .creation-settings .switch-row input:checked{background:#4b7258}
#pageContent .creation-settings .switch-row input:checked::after{left:17px}
#pageContent .creation-composer .button.primary{background:#b65a2b;border-color:#b65a2b}
#pageContent .creation-history-empty{min-height:175px;border:1px dashed #e1e7df;border-radius:10px}

/* Final full-viewport layout corrections: keep page edges and section gaps at 12px. */
#pageContent.page-content{width:100%;max-width:none;margin:0;padding:12px!important}
#pageContent.client-content-page:has(#modelSearch){gap:12px}
#pageContent.client-content-page:has(#modelSearch)>.card{flex:1 1 auto;min-height:0;margin:0}
#pageContent.client-content-page:has(#modelSearch)>.model-note{flex:0 0 auto;margin:0;padding:0}
#pageContent.client-content-page:has(#modelSearch) .card-head{gap:12px;margin-bottom:12px}
#pageContent.client-content-page:has(#modelSearch) .table-tools{gap:12px;margin:0 0 12px}
#pageContent.client-content-page:has(#modelSearch){height:calc(100dvh - 64px);min-height:0;overflow:hidden;padding:12px!important;gap:12px}
#pageContent.client-content-page:has(#modelSearch)>.card{flex:1 1 0;min-height:0}
#pageContent.client-content-page:has(#modelSearch)>.model-note{flex:0 0 auto;margin:0;min-height:14px}
#pageContent.client-content-page:has(#modelSearch)>.card{display:flex;flex-direction:column;overflow:hidden}
#pageContent.client-content-page:has(#modelSearch)>.card>.card-head,#pageContent.client-content-page:has(#modelSearch)>.card>.table-tools{flex:0 0 auto}
#pageContent.client-content-page:has(#modelSearch)>.card>.table-wrap{flex:1 1 0;min-height:0;overflow:auto}
#pageContent.client-content-page:has(#modelSearch){height:calc(100dvh - 72px)!important;min-height:0!important}
#pageContent.client-content-page:has(#modelSearch){scrollbar-gutter:auto}
#pageContent.client-content-page:not(:has(.key-management-card)):not(:has(#usageSearch)):not(:has(#billingSearch)):not(:has(#orderSearch)):has(#modelSearch)>.model-note{flex:0 0 auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important}
#pageContent:has(.overview-top-grid){display:block;width:100%;max-width:none;min-height:calc(100dvh - 64px);height:auto;overflow:visible;padding:12px!important}
#pageContent .overview-top-grid{gap:12px;margin:0 0 12px;min-width:0}
#pageContent .overview-top-grid>.card{min-width:0;min-height:270px;height:auto}
#pageContent .overview-top-grid .card-head{margin-bottom:12px}
#pageContent .overview-top-grid .dashboard-models .table-wrap{max-height:none;overflow:auto}
#pageContent .dashboard-account{min-height:0;height:auto;margin:0 0 12px;padding:18px 20px}
#pageContent .dashboard-account>.card-head{margin-bottom:12px}
#pageContent .dashboard-account .account-overview-content{height:auto;gap:12px}
#pageContent .dashboard-account .dashboard-metric{height:auto;min-height:154px;gap:12px;padding:16px}
#pageContent .dashboard-account .dashboard-metric>div{gap:8px}
#pageContent .dashboard-lower{min-height:0;gap:12px}
#pageContent .dashboard-lower>.card{min-width:0;min-height:320px;height:auto;padding:18px 20px!important}
#pageContent .dashboard-lower .card-head{margin-bottom:12px}
#pageContent .dashboard-trend .overview-trend-chart{height:235px;min-height:235px;margin-top:12px;flex:0 0 auto}
#pageContent .dashboard-trend .trend-summary{margin-top:12px;padding-top:12px}
#pageContent .dashboard-billing .table-wrap{min-height:180px;margin-top:12px;flex:0 0 auto}
#pageContent:has(.overview-top-grid){min-height:0;height:auto;overflow:visible}
#pageContent .overview-top-grid>.card{min-height:0;height:auto;display:block;overflow:visible}
#pageContent .overview-top-grid .dashboard-models .table-wrap{max-height:236px;overflow:auto}
#pageContent .dashboard-account .account-overview-content{height:auto}
#pageContent .dashboard-account .dashboard-metric{height:auto;min-height:154px}
#pageContent:has(.overview-top-grid){display:block!important;min-height:0!important;height:auto!important;overflow:visible!important;padding:12px!important}
#pageContent:has(.overview-top-grid)>.overview-top-grid{height:auto!important;min-height:0!important;margin:0 0 12px!important}
#pageContent:has(.overview-top-grid)>.dashboard-account{height:auto!important;min-height:0!important;margin:0 0 12px!important}
#pageContent:has(.overview-top-grid)>.dashboard-lower{height:auto!important;min-height:320px!important}
#pageContent .overview-top-grid>.card{display:block!important;height:auto!important;min-height:0!important;overflow:visible!important}
@media(max-width:1200px){#pageContent .overview-top-grid{grid-template-columns:1fr}#pageContent .overview-top-grid>.card{min-height:260px}#pageContent .dashboard-account .account-overview-content{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){#pageContent .overview-top-grid>.card,#pageContent .dashboard-account,#pageContent .dashboard-lower>.card{padding:12px!important}#pageContent .dashboard-lower{grid-template-columns:1fr}#pageContent .dashboard-account .account-overview-content{grid-template-columns:1fr!important}}
@media(min-width:901px) and (max-width:1200px){#pageContent:has(.overview-top-grid)>.overview-top-grid>.card{height:270px!important;min-height:270px!important;padding:12px!important}#pageContent:has(.overview-top-grid)>.dashboard-account{min-height:190px!important;padding:12px!important}#pageContent:has(.overview-top-grid) .dashboard-account .account-overview-content{grid-template-columns:repeat(4,minmax(0,1fr))!important}#pageContent:has(.overview-top-grid) .dashboard-account .dashboard-metric{min-height:112px;padding:10px;grid-template-columns:26px minmax(0,1fr);gap:8px}#pageContent:has(.overview-top-grid) .dashboard-account .dashboard-metric .metric-icon{width:26px;height:26px}#pageContent:has(.overview-top-grid) .dashboard-account .dashboard-metric>div>b{font-size:20px}#pageContent:has(.overview-top-grid)>.dashboard-lower{min-height:170px!important;flex-basis:170px!important}#pageContent:has(.overview-top-grid) .dashboard-lower>.card{min-height:170px!important;padding:10px!important}#pageContent:has(.overview-top-grid) .dashboard-trend .overview-trend-chart,#pageContent:has(.overview-top-grid) .dashboard-trend .overview-trend-chart.is-empty{height:72px;min-height:72px;margin-top:6px}#pageContent:has(.overview-top-grid) .dashboard-billing .table-wrap{min-height:72px;margin-top:6px}}
@media(min-width:901px){
  #pageContent:has(.overview-top-grid){display:block!important;height:calc(100dvh - 72px)!important;min-height:0!important;overflow:hidden!important;scrollbar-gutter:auto;padding:12px!important}
  #pageContent:has(.overview-top-grid)>.overview-top-grid{height:270px!important;min-height:270px!important;margin:0 0 12px!important}
  #pageContent:has(.overview-top-grid)>.overview-top-grid>.card{height:270px!important;min-height:270px!important}
  #pageContent:has(.overview-top-grid) .dashboard-models th,#pageContent:has(.overview-top-grid) .dashboard-models td{padding:6px!important;line-height:1.3}
  #pageContent:has(.overview-top-grid)>.dashboard-account{height:178px!important;min-height:178px!important;margin:0 0 12px!important;padding:8px 12px!important}
  #pageContent:has(.overview-top-grid) .dashboard-account>.card-head{margin-bottom:4px}
  #pageContent:has(.overview-top-grid) .dashboard-account .dashboard-metric{height:100px;min-height:100px;padding:8px}
  #pageContent:has(.overview-top-grid)>.dashboard-lower{height:calc(100% - 270px - 178px - 24px)!important;min-height:0!important}
  #pageContent:has(.overview-top-grid)>.dashboard-lower>.card{height:100%!important;min-height:0!important;overflow:hidden}
  #pageContent:has(.overview-top-grid) .dashboard-trend .overview-trend-chart,#pageContent:has(.overview-top-grid) .dashboard-trend .overview-trend-chart.is-empty{min-height:50px;height:auto;flex:1 1 auto}
  #pageContent:has(.overview-top-grid) .dashboard-billing .table-wrap{min-height:0;flex:1 1 auto}
}
@media(min-width:901px){
  #pageContent:has(#billingSearch){
    display:grid!important;
    width:100%;
    height:calc(100dvh - 71px)!important;
    min-height:0!important;
    box-sizing:border-box;
    grid-template-rows:112px 76px minmax(0,1fr)!important;
    gap:12px!important;
    overflow:hidden!important;
    scrollbar-gutter:auto!important;
    padding:12px!important;
  }
  #pageContent:has(#billingSearch) .record-stats{height:112px!important;min-height:0!important;margin:0!important;align-self:stretch;padding:12px!important}
  #pageContent:has(#billingSearch)>.card:nth-child(2){height:76px!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden}
  #pageContent:has(#billingSearch)>.card:nth-child(2)>.card-head{display:flex!important;align-items:center;width:100%;height:76px!important;min-height:0!important;box-sizing:border-box;padding:12px!important;margin:0!important}
  #pageContent:has(#billingSearch)>.card:nth-child(2)>.card-head>h2{display:none!important}
  #pageContent:has(#billingSearch) .table-tools{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(180px,1.2fr);align-items:end;gap:12px;width:100%;min-width:0;margin:0!important}
  #pageContent:has(#billingSearch) .table-tools>*{min-width:0;width:100%;margin:0!important}
  #pageContent:has(#billingSearch) #billingDate,#pageContent:has(#billingSearch) #billingType,#pageContent:has(#billingSearch) #billingSearch{min-width:0;width:100%;box-sizing:border-box}
  #pageContent:has(#billingSearch) .table-wrap{height:100%!important;min-height:0!important;margin:0!important;align-self:stretch;display:flex;overflow:auto}
}
/* Final billing layout override: match the saved ledger reference without nested filter cards. */
@media(min-width:901px){
  #pageContent.page-content:has(#billingSearch){display:grid!important;height:calc(100dvh - 71px)!important;min-height:0!important;box-sizing:border-box;grid-template-columns:minmax(0,1fr);grid-template-rows:112px minmax(0,1fr)!important;gap:12px!important;align-content:stretch;padding:12px!important;overflow:hidden!important;scrollbar-gutter:auto!important}
  #pageContent.page-content:has(#billingSearch)>.card:first-child{display:contents!important}
  #pageContent.page-content:has(#billingSearch)>.card:first-child>.card-head{display:none!important}
  #pageContent.page-content:has(#billingSearch) .record-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;height:112px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;order:1!important}
  #pageContent.page-content:has(#billingSearch) .record-stats>div{position:relative;display:flex;flex-direction:column;align-items:flex-start!important;justify-content:center;gap:5px;min-width:0;min-height:0;padding:14px 18px 14px 78px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa;text-align:left}
  #pageContent.page-content:has(#billingSearch) .record-stats>div::before{position:absolute;left:18px;top:50%;width:48px;height:48px;transform:translateY(-50%);border-radius:10px;background:#f6eee7 url('/icons/wallet.png') center/40px no-repeat;content:""}
  #pageContent.page-content:has(#billingSearch) .record-stats>div:nth-child(2)::before{background-color:#edf4ee}
  #pageContent.page-content:has(#billingSearch) .record-stats>div>span{color:#78867c;font-size:12px}
  #pageContent.page-content:has(#billingSearch) .record-stats>div>b{font:600 27px/1.15 Georgia,'Noto Serif SC',serif}
  #pageContent.page-content:has(#billingSearch)>.card:nth-child(2){display:flex!important;grid-row:2;flex-direction:column;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa;overflow:hidden}
  #pageContent.page-content:has(#billingSearch)>.card:nth-child(2)>.card-head{display:flex!important;flex:0 0 auto;align-items:center;justify-content:space-between;gap:18px;min-height:54px!important;width:100%;box-sizing:border-box;margin:0!important;padding:9px 14px!important;border:0!important;background:transparent!important;order:1!important}
  #pageContent.page-content:has(#billingSearch)>.card:nth-child(2)>.card-head>h2{display:block!important;flex:0 0 auto;margin:0!important;color:#263b30;font-size:18px;line-height:1.3}
  #pageContent.page-content:has(#billingSearch) .table-tools{display:grid!important;flex:1 1 auto;grid-template-columns:minmax(210px,1fr) minmax(190px,1fr) minmax(220px,1.15fr);align-items:center;gap:12px;width:auto;min-width:0;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}
  #pageContent.page-content:has(#billingSearch) .table-tools>.filter-field{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-width:0;width:100%;margin:0;color:#4b5b50;font-size:12px;white-space:nowrap}
  #pageContent.page-content:has(#billingSearch) #billingDate,#pageContent.page-content:has(#billingSearch) #billingType,#pageContent.page-content:has(#billingSearch) #billingSearch{width:100%;min-width:0;height:38px;box-sizing:border-box}
  #pageContent.page-content:has(#billingSearch) .table-wrap{display:flex!important;flex:1 1 auto;flex-direction:column;min-height:0!important;height:auto!important;margin:0!important;padding:0 12px 12px!important;border:0!important;border-radius:0!important;background:transparent!important;order:2!important;overflow:auto}
  #pageContent.page-content:has(#billingSearch) .table-wrap table{width:100%;min-width:640px;table-layout:fixed}
  #pageContent.page-content:has(#billingSearch) .table-wrap tbody tr:has(td.empty){height:auto}
  #pageContent.page-content:has(#billingSearch) .table-wrap td.empty{height:132px;vertical-align:middle;text-align:center}
}
@media(min-width:901px) and (max-width:1150px){#pageContent.page-content:has(#billingSearch)>.card:nth-child(2)>.card-head{align-items:flex-start;flex-direction:column;gap:8px}#pageContent.page-content:has(#billingSearch) .table-tools{flex:0 0 auto;width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:901px){
  #pageContent.page-content:has(.redeem-steps){display:grid!important;height:calc(100dvh - 71px)!important;min-height:0!important;box-sizing:border-box;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)!important;gap:12px!important;padding:12px!important;overflow:hidden!important;scrollbar-gutter:auto!important}
  #pageContent.page-content:has(.redeem-steps)>.redeem-layout{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(320px,1.2fr);gap:12px;min-width:0;min-height:0}
  #pageContent.page-content:has(.redeem-steps) .redeem-card,#pageContent.page-content:has(.redeem-steps) .redeem-instructions-card{height:auto;min-width:0;min-height:0;margin:0;padding:20px!important;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa}
  #pageContent.page-content:has(.redeem-steps) .redeem-card{display:flex;flex-direction:column;justify-content:flex-start}
  #pageContent.page-content:has(.redeem-steps) .redeem-card>.card-head{margin:0}
  #pageContent.page-content:has(.redeem-steps) .redeem-card>.card-head .subtle{margin:4px 0 0}
  #pageContent.page-content:has(.redeem-steps) .redeem-form{grid-template-columns:minmax(0,1fr) 108px;align-items:end;gap:12px;margin:12px 0 0;max-width:none}
  #pageContent.page-content:has(.redeem-steps) .redeem-form .form-actions{margin:0}
  #pageContent.page-content:has(.redeem-steps) .redeem-form .form-actions .button{width:100%;min-height:42px;padding:0 10px;white-space:nowrap}
  #pageContent.page-content:has(.redeem-steps) .redeem-instructions-card{display:flex;align-items:flex-start}
  #pageContent.page-content:has(.redeem-steps) .redeem-steps{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;border:0}
  #pageContent.page-content:has(.redeem-steps) .redeem-steps>b{margin-bottom:4px}
  #pageContent.page-content:has(.redeem-steps) .redeem-steps>div{grid-template-columns:28px minmax(0,1fr);gap:5px 7px;padding:8px 6px;border-right:1px solid #e8ece5}
  #pageContent.page-content:has(.redeem-steps) .redeem-steps>div:last-child{border:0}
  #pageContent.page-content:has(.redeem-steps) .support-records{display:flex;flex-direction:column;min-height:0;margin:0;padding:12px!important;overflow:hidden}
  #pageContent.page-content:has(.redeem-steps) .support-records>.card{display:flex;flex:1;flex-direction:column;min-height:0;margin:0}
  #pageContent.page-content:has(.redeem-steps) .support-records>.card>.table-wrap{flex:1;min-height:0;overflow:auto}
}
@media(max-width:900px){#pageContent.page-content:has(.redeem-steps)>.redeem-layout{display:grid;grid-template-columns:1fr;gap:12px}#pageContent.page-content:has(.redeem-steps) .redeem-instructions-card{min-height:190px}#pageContent.page-content:has(.redeem-steps) .redeem-steps{grid-template-columns:1fr}#pageContent.page-content:has(.redeem-steps) .redeem-steps>div{border-right:0;border-bottom:1px solid #e8ece5}#pageContent.page-content:has(.redeem-steps) .redeem-steps>div:last-child{border-bottom:0}}

/* Recharge and support: left account/help stack, right package chooser. */
#pageContent.client-content-page:has(.topup-layout){box-sizing:border-box;padding:12px!important;overflow-y:auto!important}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.45fr);grid-template-rows:auto auto auto;gap:12px;align-items:stretch;margin:0;min-height:0}
#pageContent.client-content-page:has(.topup-layout) .topup-left{grid-column:1;grid-row:1;display:grid;gap:12px;align-content:start;min-width:0}
#pageContent.client-content-page:has(.topup-layout) .topup-left>.topup-balance{grid-template-columns:1fr;padding:18px!important}
#pageContent.client-content-page:has(.topup-layout) .topup-left .balance-quick-stats{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px 0 0;border-top:1px solid #e7ebe4;border-left:0}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.package-card{grid-column:2;grid-row:1;align-self:stretch;min-width:0;height:100%;box-sizing:border-box;display:flex;flex-direction:column}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.package-card>.topup-packages{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.package-card>.topup-checkout{grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) auto}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.package-card>.notice{margin-top:auto}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records{grid-column:1/-1!important;grid-row:auto!important;margin:0;min-width:0}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:last-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:18px;padding:16px 22px}
@media(max-width:1050px){#pageContent.client-content-page:has(.topup-layout)>.topup-layout{grid-template-columns:1fr}#pageContent.client-content-page:has(.topup-layout) .topup-left,#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.package-card{grid-column:1;grid-row:auto}#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:last-child{grid-template-columns:1fr}}
@media(min-width:901px){
  #pageContent.page-content:has(#usageSearch),#pageContent.page-content:has(.subscription-overview),#pageContent.page-content:has(#orderSearch),#pageContent.page-content:has(.affiliate-top-grid){height:calc(100dvh - 71px)!important;min-height:0!important;box-sizing:border-box;padding:12px!important;scrollbar-gutter:auto!important}
  #pageContent.page-content:has(#usageSearch){overflow:hidden!important}
  #pageContent.page-content:has(.subscription-overview){overflow-y:auto!important;overflow-x:hidden!important}
  #pageContent.page-content:has(#orderSearch){overflow:hidden!important}
  #pageContent.page-content:has(.affiliate-top-grid){overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin;padding-right:2px!important}
  #pageContent.page-content:has(.affiliate-top-grid)::-webkit-scrollbar{width:8px}
}

/* Subscription page: faithful, detailed layout from the approved reference. */
#pageContent:has(.subscription-page){padding:12px!important;}
.subscription-page{display:grid;gap:12px;min-width:0;}
.page-content .subscription-overview{display:grid;gap:15px;min-width:0;padding:18px 20px!important;overflow:hidden;background:linear-gradient(100deg,#fffefa 0%,#fffefa 54%,#fffef9 100%);}
.subscription-overview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.subscription-overview-head .section-kicker,.subscription-usage-head .section-kicker,.subscription-section-head .section-kicker{display:block;color:#89948a;font-size:8px;letter-spacing:.13em;}
.subscription-overview-head h2,.subscription-section-head h2{margin:3px 0 0;color:#263b30;font-size:16px;font-weight:700;}
.subscription-period,.subscription-usage-period{color:#89948a;font-size:10px;}
.subscription-overview-body{display:grid;grid-template-columns:minmax(290px,.83fr) minmax(0,1.45fr);align-items:stretch;gap:22px;}
.subscription-current{display:grid;grid-template-columns:54px minmax(0,1fr);align-content:center;align-items:start;gap:12px;min-width:0;}
.subscription-crown{width:52px;height:52px;display:grid;place-items:center;border-radius:12px;background:#fbf4ee;color:#b65b32;}
.subscription-crown .ui-icon{width:28px;height:28px;stroke-width:1.65;}
.subscription-current-content{min-width:0;}
.subscription-plan-title{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.subscription-label{color:#77847a;font-size:10px;}
.subscription-plan-title h3{margin:3px 0 0;color:#24392f;font:600 22px/1.2 'Noto Serif SC','Songti SC',serif;}
.subscription-plan-title .pill{flex:none;}
.subscription-payg{background:#edf2e9;color:#557650;}
.subscription-current-description{min-height:32px;margin:7px 0 10px;color:#7e8a80;font-size:10px;line-height:1.6;}
.subscription-current-details{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #e9ece6;border-bottom:1px solid #e9ece6;}
.subscription-current-details>div{display:grid;gap:4px;padding:8px 10px 8px 0;}
.subscription-current-details>div+div{padding-left:12px;border-left:1px solid #e9ece6;}
.subscription-current-details span{color:#88938a;font-size:9px;}
.subscription-current-details b{color:#435348;font-size:10px;font-weight:600;}
.subscription-current-actions{display:flex;align-items:center;gap:8px;margin-top:11px;}
.subscription-current-actions .button{min-height:34px;padding:0 14px;font-size:10px;}
.subscription-current-actions .button .ui-icon{width:14px;height:14px;}
.page-content .subscription-current-actions .button.primary{background:#a9502e;border-color:#a9502e;}
.page-content .subscription-current-actions .button.primary:hover{background:#904124;border-color:#904124;}
.subscription-current-actions .outline-accent{border:1px solid #bf7756;background:#fffefa;color:#a85b39;}
.subscription-usage{display:grid;align-content:center;min-width:0;padding:2px 2px 2px 22px;border-left:1px solid #e5e9e1;}
.subscription-usage-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.subscription-usage-head h3{margin:3px 0 0;color:#2e4337;font-size:13px;font-weight:650;}
.subscription-usage-total{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-top:12px;}
.subscription-usage-total>div>span{display:block;margin-bottom:3px;color:#829087;font-size:9px;}
.subscription-usage-total b{color:#24392f;font:600 26px/1.2 Georgia,'Noto Serif SC',serif;}
.subscription-usage-total b small{color:#768278;font:400 12px 'Noto Sans SC','Microsoft YaHei UI',sans-serif;}
.subscription-usage-percent{color:#78877b;font-size:10px;}
.subscription-progress{height:8px;margin-top:8px;overflow:hidden;border-radius:99px;background:#ecefe9;}
.subscription-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#466d4c,#77936e);}
.subscription-progress.is-unlimited{background:repeating-linear-gradient(115deg,#edf0e9 0 8px,#f7f8f4 8px 16px);}
.subscription-usage-caption{margin:5px 0 12px;color:#89938a;font-size:9px;}
.subscription-usage-detail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.subscription-usage-detail>div{display:grid;align-content:start;gap:4px;min-width:0;padding:0 12px;border-left:1px solid #e8ece5;}
.subscription-usage-detail>div:first-child{padding-left:0;border:0;}
.subscription-usage-detail span{color:#869188;font-size:9px;}
.subscription-usage-detail b{overflow-wrap:anywhere;color:#2f4638;font-size:14px;font-weight:650;}
.subscription-usage-detail b small{margin-left:4px;color:#859087;font-size:9px;font-weight:400;}
.subscription-usage-detail>div>small{color:#929b93;font-size:8px;line-height:1.4;}
.page-content .subscription-benefits-panel,.page-content .subscription-plans-panel,.page-content .subscription-history-panel{min-width:0;padding:16px 18px!important;}
.subscription-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:13px;}
.subscription-section-head h2{font-size:15px;}
.subscription-section-head p{margin:4px 0 0;color:#879188;font-size:10px;line-height:1.5;}
.subscription-section-head>span,.subscription-section-head>p{flex:none;color:#89938a;font-size:10px;}
.subscription-benefits{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));}
.subscription-benefit{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:start;gap:9px;min-width:0;padding:7px 12px;border-left:1px solid #e9ede7;}
.subscription-benefit:first-child{padding-left:2px;border-left:0;}
.subscription-benefit:last-child{padding-right:2px;}
.subscription-benefit-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#f0f4ed;color:#3f6548;}
.subscription-benefit-icon .ui-icon{width:20px;height:20px;stroke-width:1.8;}
.subscription-benefit h3{margin:1px 0 5px;color:#34483a;font-size:10px;font-weight:650;}
.subscription-benefit p{margin:0;color:#879188;font-size:9px;line-height:1.55;}
.subscription-plans-panel .subscription-section-head{margin-bottom:10px;}
.subscription-table-scroll{width:100%;overflow-x:auto;border:1px solid #e6eae3;border-radius:8px;}
.page-content table.subscription-comparison{width:100%;min-width:620px;margin:0;border:0;border-collapse:separate;border-spacing:0;table-layout:fixed;}
.subscription-comparison th,.subscription-comparison td{padding:8px 11px;border-right:1px solid #e7ebe5;border-bottom:1px solid #e7ebe5;text-align:center;vertical-align:middle;}
.subscription-comparison tr:last-child th,.subscription-comparison tr:last-child td{border-bottom:0;}
.subscription-comparison tr th:last-child,.subscription-comparison tr td:last-child{border-right:0;}
.subscription-comparison thead th{height:108px;background:#f5f6f2;color:#34463a;}
.subscription-comparison thead th:first-child{width:25%;text-align:left;font-size:10px;}
.subscription-comparison tbody th{width:25%;background:#fafbf8;color:#6d7a70;font-size:9px;font-weight:550;text-align:left;}
.subscription-comparison td{color:#758177;font-size:9px;line-height:1.5;}
.subscription-plan-heading{display:grid;justify-items:center;gap:4px;}
.subscription-plan-heading .section-kicker{color:#89938a;font-size:7px;letter-spacing:.11em;}
.subscription-plan-heading>strong{display:flex;align-items:center;justify-content:center;gap:6px;color:#304538;font-size:12px;}
.subscription-current-tag{padding:3px 6px;border-radius:10px;background:#e8efe4;color:#557650;font-size:8px;font-weight:500;white-space:nowrap;}
.subscription-plan-price{color:#b45230;font:600 17px/1.2 Georgia,'Noto Serif SC',serif;}
.subscription-plan-price small{margin-left:3px;color:#b0795f;font:400 9px 'Noto Sans SC','Microsoft YaHei UI',sans-serif;}
.subscription-plan-heading .button{width:min(100%,230px);min-height:29px;padding:0 8px;font-size:9px;}
.page-content .subscription-plan-heading .subscription-current-button{border-color:#dce6d8;background:#dce8d7;color:#587454;}
.subscription-empty-plans{display:flex;align-items:center;justify-content:center;gap:14px;min-height:128px;border:1px dashed #e3e8e1;border-radius:8px;background:#fafbf8;}
.subscription-empty-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#eef2eb;color:#527154;}
.subscription-empty-icon .ui-icon{width:23px;height:23px;}
.subscription-empty-plans b{color:#43564a;font-size:11px;}
.subscription-empty-plans p{margin:5px 0 0;color:#8b958c;font-size:9px;}
.subscription-history-panel .subscription-section-head{margin-bottom:10px;}
.subscription-history-plan{display:flex;align-items:center;gap:8px;}
.subscription-history-plan b{color:#46564a;font-size:10px;}
.subscription-history-icon{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#f5f1eb;color:#9f6549;}
.subscription-history-icon .ui-icon{width:15px;height:15px;}
.subscription-history-panel .table-wrap{margin-top:0;}
@media(max-width:1050px){.subscription-overview-body{grid-template-columns:minmax(0,1fr)}.subscription-usage{padding:14px 0 0;border-top:1px solid #e5e9e1;border-left:0}.subscription-benefits{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}.subscription-benefit:nth-child(4){border-left:0}.subscription-benefit:first-child{padding-left:12px}.subscription-benefit:nth-child(3n+1){padding-left:2px;border-left:0}}
@media(max-width:680px){#pageContent:has(.subscription-page){padding:12px!important}.page-content .subscription-overview{padding:14px!important}.subscription-overview-body{gap:13px}.subscription-current{grid-template-columns:42px minmax(0,1fr);gap:9px}.subscription-crown{width:40px;height:40px;border-radius:10px}.subscription-crown .ui-icon{width:23px;height:23px}.subscription-plan-title h3{font-size:19px}.subscription-current-actions{flex-wrap:wrap}.subscription-current-actions .button{padding:0 10px}.subscription-usage-detail>div{padding:0 7px}.subscription-usage-detail b{font-size:12px}.page-content .subscription-benefits-panel,.page-content .subscription-plans-panel,.page-content .subscription-history-panel{padding:13px!important}.subscription-section-head{align-items:flex-start}.subscription-section-head>span,.subscription-section-head>p{max-width:48%;font-size:9px;text-align:right}.subscription-benefits{grid-template-columns:1fr 1fr;gap:0}.subscription-benefit,.subscription-benefit:first-child{padding:9px 7px;border-left:0;border-bottom:1px solid #e9ede7}.subscription-benefit:nth-last-child(-n+1){border-bottom:0}.subscription-benefit:nth-child(odd){border-right:1px solid #e9ede7}.subscription-benefit-icon{width:30px;height:30px}.subscription-benefit{grid-template-columns:31px minmax(0,1fr);gap:7px}.subscription-benefit h3{font-size:9px}.subscription-benefit p{font-size:8px}.subscription-empty-plans{padding:14px;justify-content:flex-start}.subscription-history-panel .table-wrap{overflow-x:auto}.subscription-history-panel table{min-width:520px}}

/* Let each subscription section keep its intrinsic height inside the scrolling page. */
.subscription-page{grid-auto-rows:max-content;align-content:start}
.page-content .subscription-overview{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}
.subscription-overview-head,.subscription-overview-body{grid-column:1/-1}

/* Keep order filters and all three summary metrics aligned; allow short windows to scroll. */
#pageContent.page-content:has(#orderSearch) .table-tools{display:grid!important;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));align-items:center;gap:12px;width:100%;box-sizing:border-box}
#pageContent.page-content:has(#orderSearch) .table-tools>*{width:100%;min-width:0}
#pageContent.page-content:has(#orderSearch) .record-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(min-width:901px) and (max-height:600px){
  #pageContent.page-content:has(#orderSearch){height:auto!important;min-height:calc(100dvh - 71px)!important;overflow-y:auto!important;overflow-x:hidden!important;grid-template-rows:40px 60px 100px minmax(280px,1fr)!important}
  #pageContent.page-content:has(#orderSearch) .table-wrap{height:auto!important;min-height:280px!important}
}

/* Orders page panels follow the reference composition and keep the table usable in short windows. */
#pageContent.page-content:has(.orders-view){height:calc(100dvh - 71px)!important;min-height:0!important;overflow:hidden!important;padding:12px!important}
#pageContent:has(.orders-view)>.orders-view{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:12px}
.orders-view .page-actions{align-items:center;margin:0;padding:0}
.orders-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
.order-stat-card{min-width:0;min-height:116px;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:16px;padding:16px 20px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa;box-shadow:0 2px 10px #263a2c08}
.order-stat-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:11px;background:#edf3ec;color:#356747}
.order-stat-icon.is-amber{background:#fbf3e5;color:#a96a20}
.order-stat-icon.is-copper{background:#f8eee7;color:#b45531}
.order-stat-icon .ui-icon{width:30px;height:30px;stroke-width:1.8}
.order-stat-card>div{display:grid;justify-items:start;gap:4px;min-width:0}
.order-stat-card>div>span{color:#758278;font-size:12px}
.order-stat-card>div>b{color:#263d30;font:600 27px/1.1 Georgia,'Noto Serif SC',serif;overflow-wrap:anywhere}
.order-stat-card>div>b.is-copper{color:#bd6242}
.order-stat-card>div>small{color:#89938a;font-size:10px}
.orders-filter-card{display:grid;grid-template-columns:minmax(145px,1.05fr) minmax(250px,1.6fr) minmax(150px,.95fr) minmax(150px,.95fr) auto;align-items:end;gap:12px;min-width:0;margin:0;padding:16px;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa;box-shadow:0 2px 10px #263a2c08}
.orders-field{display:grid;gap:7px;min-width:0;color:#718075;font-size:11px;font-weight:600}
.orders-field>.field,.order-date-range>.field{width:100%;min-width:0;height:40px;margin:0;padding:0 11px;border:1px solid #e1e7df;border-radius:8px;background:#fffefa;color:#394b3e;font-size:12px}
.order-date-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;min-width:0}
.order-date-range>i{color:#89938a;font-style:normal}
.orders-filter-actions{display:flex;gap:8px}
.orders-filter-actions .button{min-width:70px;height:40px;min-height:40px;padding:0 12px}
.orders-table-card{min-width:0;min-height:0;display:flex;flex-direction:column;margin:0!important;padding:0!important;overflow:hidden;border:1px solid #e5e9e1;border-radius:11px;background:#fffefa;box-shadow:0 2px 10px #263a2c08}
.orders-table-head{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;padding:15px 18px 10px}
.orders-table-head h2{margin:0;color:#263b30;font-size:15px;font-weight:700}
.orders-table-head p{margin:4px 0 0;color:#879188;font-size:10px}
.orders-table-wrap{flex:1 1 auto;min-width:0;min-height:0;margin:0 14px;padding:0;overflow:auto;border:1px solid #e7ebe4;border-radius:8px}
.orders-table-wrap table{width:100%;min-width:900px;height:100%;table-layout:fixed;border-collapse:collapse}
.orders-table-wrap th,.orders-table-wrap td{padding:10px 12px;text-align:left;vertical-align:middle}
.orders-table-wrap th{height:40px;white-space:nowrap}
.orders-table-wrap tbody tr{height:48px}
.orders-table-wrap tbody tr:has(.empty){height:100%}
.orders-table-wrap td.empty{text-align:center;vertical-align:middle;color:#8a958c}
.orders-table-wrap th:nth-child(1){width:15%}.orders-table-wrap th:nth-child(2){width:20%}.orders-table-wrap th:nth-child(3){width:12%}.orders-table-wrap th:nth-child(4){width:18%}.orders-table-wrap th:nth-child(5){width:12%}.orders-table-wrap th:nth-child(6){width:11%}.orders-table-wrap th:nth-child(7){width:12%}
.order-number{color:#536358;font-size:10px;font-variant-numeric:tabular-nums}
.order-product{display:grid;gap:3px;min-width:0}
.order-product b{overflow:hidden;color:#46564a;font-size:11px;font-weight:550;text-overflow:ellipsis;white-space:nowrap}
.order-product small{color:#89938a;font-size:9px}
.orders-table-wrap .order-amount{color:#bd6242;font-size:11px;font-weight:600;white-space:nowrap}
.orders-table-wrap .pill{white-space:nowrap}
.orders-table-wrap .text-action{padding:6px 0}
.order-detail-label{color:#49684f;font-size:10px;white-space:nowrap}
.orders-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;padding:10px 16px 12px;color:#849087;font-size:11px}
.orders-page-controls,.orders-page-controls>span{display:flex;align-items:center;gap:7px}
.orders-page-controls .button{min-width:34px;height:34px;min-height:34px;padding:0 9px}
.orders-page-controls .button>.ui-icon{width:15px;height:15px}
.orders-page-controls #orderPrev .ui-icon{transform:rotate(180deg)}
.orders-page-controls .button.is-current{border-color:#48674f;background:#48674f;color:#fff}
.orders-page-controls .button:disabled{opacity:.45;cursor:default}
.orders-page-size select{height:34px;margin-left:12px;padding:0 10px;border:1px solid #e1e7df;border-radius:7px;background:#fffefa;color:#546257;font-size:10px}
@media(max-width:1200px){.orders-filter-card{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}.orders-filter-actions{grid-column:1/-1;justify-content:flex-end}}
@media(max-width:1200px){.orders-table-wrap table{min-width:720px}.orders-table-wrap th:nth-child(1){width:19%}.orders-table-wrap th:nth-child(2){width:20%}.orders-table-wrap th:nth-child(3){width:10%}.orders-table-wrap th:nth-child(4){width:18%}.orders-table-wrap th:nth-child(5){width:10%}.orders-table-wrap th:nth-child(6){width:11%}.orders-table-wrap th:nth-child(7){width:12%}.orders-table-wrap td:nth-child(1),.orders-table-wrap td:nth-child(4){white-space:nowrap}}
@media(max-width:900px){#pageContent.page-content:has(.orders-view){height:auto!important;min-height:calc(100dvh - 71px)!important;overflow:visible!important}.page-content:has(.orders-view)>.orders-view{height:auto;min-height:calc(100dvh - 95px);grid-template-rows:auto auto auto minmax(360px,1fr)}.orders-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.order-stat-card{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:12px}.order-stat-icon{width:40px;height:40px}.order-stat-icon .ui-icon{width:23px;height:23px}.orders-table-card{min-height:420px}}
@media(max-width:600px){.orders-view .page-actions{justify-content:stretch}.orders-view .page-actions .button{flex:1;padding:0 8px;font-size:10px}.orders-summary{grid-template-columns:1fr;gap:8px}.order-stat-card{min-height:88px;grid-template-columns:42px minmax(0,1fr);padding:12px 14px}.orders-filter-card{grid-template-columns:1fr;padding:12px}.orders-filter-actions{grid-column:auto}.orders-filter-actions .button{flex:1}.orders-pagination{align-items:flex-start;flex-direction:column}.orders-page-controls{width:100%;flex-wrap:wrap}.orders-page-size select{margin-left:0}}
@media(max-height:600px) and (min-width:901px){#pageContent.page-content:has(.orders-view){height:auto!important;min-height:calc(100dvh - 71px)!important;overflow-y:auto!important;overflow-x:hidden!important}.page-content:has(.orders-view)>.orders-view{height:auto;min-height:100%;grid-template-rows:auto auto auto minmax(300px,1fr)}.orders-table-card{min-height:390px}}

/* Top-up page follows the approved reference: balance and support above, packages below. */
#pageContent.client-content-page:has(.topup-layout){display:block!important;height:auto!important;min-height:calc(100dvh - 71px);overflow-y:auto!important;overflow-x:hidden!important;padding:12px!important}
#pageContent.client-content-page:has(.topup-layout)>.topup-page-heading{display:flex!important;min-height:112px;margin:0 0 12px;padding:10px 18px;background:linear-gradient(90deg,#f8faf6 12%,#f8faf6e8 48%,transparent 100%),url('/assets/client-landscape-wash.png') right center/auto 150px no-repeat}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
#pageContent:has(.topup-layout)>.topup-page-heading h1{margin:0;color:#20372b;font:600 28px/1.25 'Noto Serif SC','Songti SC',serif}
#pageContent:has(.topup-layout)>.topup-page-heading p{max-width:720px;margin:7px 0 0;color:#78857b;font-size:12px;line-height:1.65}
#pageContent:has(.topup-layout)>.topup-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto;align-items:stretch;gap:12px;margin:0}
#pageContent:has(.topup-layout)>.topup-layout>.topup-balance{grid-column:1;grid-row:1;grid-template-columns:minmax(0,1fr);align-content:start;gap:16px;min-width:0;padding:20px!important}
#pageContent:has(.topup-layout)>.topup-layout>.topup-balance>div:first-child{position:relative;min-height:106px;padding-right:175px}
#pageContent:has(.topup-layout)>.topup-layout>.topup-balance>div:first-child>strong{font-size:38px}
#pageContent:has(.topup-layout)>.topup-layout>.topup-balance .balance-topup-action{position:absolute;right:0;bottom:4px;min-width:148px;min-height:42px}
#pageContent:has(.topup-layout)>.topup-layout>.topup-balance .balance-quick-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px 0 0;border-top:1px solid #e7ebe4;border-left:0}
#pageContent:has(.topup-layout)>.topup-layout>.topup-balance .balance-quick-stats>span{display:grid;align-content:center;gap:6px;min-width:0;padding:4px 12px;border-right:1px solid #e7ebe4}
#pageContent:has(.topup-layout)>.topup-layout>.topup-balance .balance-quick-stats>span:first-child{padding-left:0}
#pageContent:has(.topup-layout)>.topup-layout>.topup-balance .balance-quick-stats>span:last-child{border:0}
#pageContent:has(.topup-layout)>.topup-layout>.help-panel{grid-column:2;grid-row:1;align-self:stretch;min-width:0;padding:20px!important}
#pageContent:has(.topup-layout)>.topup-layout>.help-panel .support-help-row{padding:11px 4px}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.package-card{grid-column:1/-1!important;grid-row:2!important;min-width:0;height:auto;min-height:0;padding:20px!important}
#pageContent:has(.topup-layout)>.topup-layout>.package-card .card-head{align-items:center;gap:8px 16px}
#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-packages{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-package{min-height:94px;grid-template-columns:24px minmax(0,1fr);align-items:center;column-gap:9px;padding:13px 15px}
#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-package>.ui-icon{grid-row:1/4;width:21px;height:21px}
#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-package>span,#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-package>b,#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-package>small{grid-column:2}
#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-package>span{font-size:11px}
#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-package>b{font-size:17px}
#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-package>small{font-size:9px}
#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-checkout{grid-template-columns:minmax(260px,1.15fr) minmax(260px,1fr) minmax(175px,.7fr);align-items:end;gap:14px;margin-top:18px;padding-top:16px}
#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-checkout>.button{min-height:42px;white-space:nowrap}
#pageContent:has(.topup-layout)>.topup-layout>.package-card .payment-methods{min-height:62px;align-content:center}
#pageContent:has(.topup-layout)>.topup-layout>.package-card>.notice{margin:12px 0 0}
#pageContent:has(.topup-layout)>.topup-layout>.support-records{grid-column:1/-1!important;grid-row:auto!important;min-width:0;margin:0}
#pageContent:has(.topup-layout)>.topup-layout>.support-records:last-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);align-items:start;gap:16px;padding:16px 22px}
@media(max-width:1199px){#pageContent.client-content-page:has(.topup-layout)>.topup-layout{grid-template-columns:1fr!important}#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.topup-balance,#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.help-panel,#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.package-card{grid-column:1!important;grid-row:auto!important}#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.package-card .topup-checkout{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}}
@media(max-width:700px){#pageContent:has(.topup-layout)>.topup-page-heading{min-height:86px;padding:8px 6px;background-size:auto 100px}#pageContent:has(.topup-layout)>.topup-page-heading h1{font-size:23px}#pageContent:has(.topup-layout)>.topup-layout>.topup-balance>div:first-child{padding-right:0;padding-bottom:52px}#pageContent:has(.topup-layout)>.topup-layout>.topup-balance .balance-topup-action{right:auto;left:0;bottom:0}#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-packages{grid-template-columns:repeat(2,minmax(0,1fr))}#pageContent:has(.topup-layout)>.topup-layout>.package-card .topup-checkout{grid-template-columns:1fr}#pageContent:has(.topup-layout)>.topup-layout>.package-card .payment-methods{min-height:0}#pageContent:has(.topup-layout)>.topup-layout>.support-records:last-child{grid-template-columns:1fr}}

/* Keep the current subscription summary on a consistent 12px spacing rhythm. */
#pageContent .subscription-overview{gap:12px;padding:12px!important}
#pageContent .subscription-overview-body{gap:12px}
#pageContent .subscription-plan-title{gap:12px}
#pageContent .subscription-current-description{min-height:0;margin:12px 0}
#pageContent .subscription-current-details>div{padding:12px 12px 12px 0}
#pageContent .subscription-current-actions{gap:12px;margin-top:12px}
#pageContent .subscription-usage{padding:0 0 0 12px}
#pageContent .subscription-usage{gap:12px}
#pageContent .subscription-usage-head,#pageContent .subscription-usage-total{gap:12px;margin:0}
#pageContent .subscription-progress,#pageContent .subscription-usage-caption,#pageContent .subscription-usage-detail{margin:0}

/* Let the support ticket list and its form share the full row height. */
#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:last-child{
  align-items:stretch;
}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:last-child>.card{
  display:flex;
  flex-direction:column;
  align-self:stretch!important;
  min-height:0;
}
#pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:last-child>.card>.table-wrap{
  flex:1 1 auto;
  min-height:160px;
}

/* The distributor workspace is one continuous page with all three records visible. */
#pageContent.client-content-page:has(.affiliate-top-grid) .affiliate-tabs{display:none!important}
#pageContent.client-content-page:has(.affiliate-top-grid) .affiliate-bottom-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
#pageContent.page-content:has(.affiliate-top-grid){
  display:flex!important;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
}
#pageContent.page-content:has(.affiliate-top-grid)>*{
  flex:0 0 auto;
  width:100%;
  margin-bottom:0;
}
#pageContent.page-content:has(.affiliate-top-grid) .affiliate-action-area{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-flow:row!important;
  align-content:start!important;
  justify-items:stretch!important;
  gap:0!important;
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:18px!important;
  border:1px solid #e5e9e2!important;
  border-radius:11px!important;
  background:#fff!important;
}
#pageContent.page-content:has(.affiliate-top-grid) .affiliate-action-area>.card-head{
  display:block!important;
  width:100%!important;
  min-height:0!important;
  margin:0 0 16px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
#pageContent.page-content:has(.affiliate-top-grid) .affiliate-action-area>.card-head .subtle{
  margin:6px 0 0!important;
}
#pageContent.page-content:has(.affiliate-top-grid) .affiliate-action-area>.affiliate-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  gap:14px!important;
  margin:0!important;
}
#pageContent.page-content:has(.affiliate-top-grid) .affiliate-action-area>.affiliate-actions>section{
  min-width:0!important;
  padding:14px!important;
  border:1px solid #e7ebe4!important;
  border-radius:9px!important;
  background:#fffefa!important;
}
@media(max-width:1000px){#pageContent.client-content-page:has(.affiliate-top-grid) .affiliate-bottom-grid{grid-template-columns:1fr}}
@media(max-width:700px){#pageContent.page-content:has(.affiliate-top-grid) .affiliate-action-area>.affiliate-actions{grid-template-columns:minmax(0,1fr)!important}}

/* There are three direct rows in the orders workspace; do not reserve a fourth empty grid row. */
#pageContent.client-content-page:has(.orders-view)>.orders-view{
  grid-template-rows:auto auto minmax(0,1fr) auto!important;
}
#pageContent.client-content-page:has(.orders-view)>.orders-view>.orders-table-card{
  display:flex!important;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
#pageContent.client-content-page:has(.orders-view) .orders-table-head{
  display:none!important;
}
#pageContent.client-content-page:has(.orders-view) .orders-table-wrap{
  display:block;
  flex:1 1 0;
  min-height:0!important;
  margin:0!important;
  padding:12px!important;
  border:1px solid #e5e9e1!important;
  border-radius:11px!important;
  background:#fffefa!important;
}
#pageContent.client-content-page:has(.orders-view) .orders-pagination{
  flex:0 0 auto;
  width:100%;
  margin:0;
  padding:0;
  color:#647268;
}
#pageContent.client-content-page:has(.orders-view) .orders-page-controls .button{
  min-width:38px;
  height:38px;
  min-height:38px;
}
#pageContent.client-content-page:has(.orders-view) .orders-page-size{
  display:none!important;
}
@media(max-width:900px){
  #pageContent.client-content-page:has(.orders-view)>.orders-view{
    grid-template-rows:auto auto minmax(360px,1fr) auto!important;
  }
}
@media(max-height:600px) and (min-width:901px){
  #pageContent.client-content-page:has(.orders-view)>.orders-view{
    grid-template-rows:auto auto minmax(300px,1fr) auto!important;
  }
}

/* Remove the requested helper headings and notices while keeping each feature usable. */
#pageContent.client-content-page:has(.key-management-card)>.key-management-card>.card-head,
#pageContent.client-content-page:has(.key-management-card)>.key-security-panel,
#pageContent.client-content-page:has(#modelSearch)>.model-note,
#pageContent.client-content-page:has(.redeem-steps) .support-records>.card>.card-head,
#pageContent.client-content-page:has(.orders-view) .orders-table-head,
#pageContent.client-content-page:has(.invite-share-panel) .invite-rule-footnote{
  display:none!important;
}

/* Invite history should use the full height of its stretched card instead of leaving a blank tail. */
#pageContent.page-content:has(.invite-share-panel) .invite-lower-grid{
  align-items:stretch;
  gap:14px;
}
#pageContent.page-content:has(.invite-share-panel) .invite-lower-grid>.card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
}
#pageContent.page-content:has(.invite-share-panel) .invite-lower-grid>.card>.card{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
  height:100%;
}
#pageContent.page-content:has(.invite-share-panel) .invite-lower-grid>.card>.card>.table-wrap{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:180px;
}
#pageContent.page-content:has(.invite-share-panel) .invite-lower-grid>.card>.card>.table-wrap>table{
  flex:1 1 auto;
  height:100%;
}
#pageContent.page-content:has(.invite-share-panel) .invite-lower-grid>.card>.card>.table-wrap tbody tr:has(td.empty){
  height:100%;
}
#pageContent.page-content:has(.invite-share-panel) .invite-lower-grid>.card>.card>.table-wrap td.empty{
  height:100%;
  vertical-align:middle;
}

/* Keep invite page section spacing and both page edges symmetric. */
#pageContent.page-content:has(.invite-share-panel){
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:12px!important;
  scrollbar-gutter:auto!important;
}
#pageContent.page-content:has(.invite-share-panel)>.invite-share-panel,
#pageContent.page-content:has(.invite-share-panel)>.invite-stat-grid,
#pageContent.page-content:has(.invite-share-panel)>.invite-lower-grid{
  width:100%!important;
  margin:0!important;
}

/* Tighten the dashboard billing subtitle-to-table spacing. */
#pageContent .dashboard-billing>.card-head{
  margin-bottom:4px!important;
}
#pageContent .dashboard-billing>.table-wrap{
  margin-top:0!important;
}

/* Pair support and recharge orders on one desktop row, with orders on the right. */
@media(min-width:1200px){
  #pageContent.client-content-page:has(.topup-layout)>.topup-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;
    grid-template-rows:auto auto auto auto;
  }
  #pageContent.client-content-page:has(.topup-layout)>.topup-layout>.topup-balance{
    grid-column:1/-1;
    grid-row:1;
  }
  #pageContent.client-content-page:has(.topup-layout)>.topup-layout>.package-card{
    grid-column:1/-1!important;
    grid-row:2!important;
  }
  #pageContent.client-content-page:has(.topup-layout)>.topup-layout>.help-panel{
    grid-column:1;
    grid-row:3;
    align-self:stretch;
  }
  #pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:not(:last-of-type){
    grid-column:2!important;
    grid-row:3!important;
    align-self:stretch;
    display:flex;
    flex-direction:column;
  }
  #pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:not(:last-of-type)>.card{
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    min-height:0;
  }
  #pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:not(:last-of-type)>.card>.table-wrap{
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    min-height:0;
  }
  #pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:not(:last-of-type)>.card>.table-wrap>table{
    flex:1 1 auto;
    height:100%;
  }
  #pageContent.client-content-page:has(.topup-layout)>.topup-layout>.support-records:last-of-type{
    grid-column:1/-1!important;
    grid-row:4!important;
  }
}

/* Compact regular data-table headers and remove stacked header/tool spacing. */
#pageContent .table-wrap thead th{
  height:auto!important;
  padding:5px 10px!important;
  line-height:1.3!important;
  vertical-align:middle;
}
#pageContent .card:has(.table-wrap)>.card-head{
  margin-bottom:6px!important;
}
#pageContent .card:has(.table-wrap)>.card-head>.table-tools{
  margin-bottom:0!important;
}

/* Halve the visual footprint of the usage-record pagination footer. */
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card{
  gap:6px;
  padding:6px!important;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.usage-pagination{
  gap:6px;
  padding:0 2px;
  font-size:11px;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.usage-pagination>div{
  gap:4px;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.usage-pagination .button{
  min-width:20px;
  width:20px;
  min-height:20px;
  height:20px;
  padding:0 4px;
  font-size:10px;
}

/* Shared compact footer for every client data table. */
#pageContent .table-pagination,
#pageContent .usage-pagination,
#pageContent .orders-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width:100%;
  margin:0;
  padding:4px 2px 0;
  color:#647268;
  font-size:11px;
}
#pageContent .table-pagination{
  order:4!important;
}
#pageContent .table-pagination>div,
#pageContent .usage-pagination>div,
#pageContent .orders-page-controls{
  display:flex;
  align-items:center;
  gap:4px;
}
#pageContent .table-pagination .button,
#pageContent .usage-pagination .button,
#pageContent .orders-pagination .button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  min-width:20px;
  height:20px;
  min-height:20px;
  padding:0 4px;
  font-size:10px;
  line-height:1;
}
#pageContent .table-pagination .button .ui-icon,
#pageContent .usage-pagination .button .ui-icon,
#pageContent .orders-pagination .button .ui-icon{
  width:12px;
  height:12px;
}

/* Let the API-key table viewport occupy the remaining card height. */
#pageContent.client-content-page:has(.key-management-card)>.key-management-card{
  display:flex!important;
  flex-direction:column;
  min-height:0;
}
#pageContent.client-content-page:has(.key-management-card)>.key-management-card>.table-wrap{
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  min-height:0;
}
#pageContent.client-content-page:has(.key-management-card)>.key-management-card>.table-pagination{
  flex:0 0 auto;
  margin-top:auto;
}

/* Normalize visible top-level client cards to exactly 18px on all four sides.
   Nested metric tiles keep their own compact internal layout. */
#pageContent > .card,
#pageContent > .overview-top-grid > .card,
#pageContent > .dashboard-account,
#pageContent > .dashboard-lower > .card,
#pageContent > .affiliate-top-grid > .card,
#pageContent > .affiliate-middle-grid > .card,
#pageContent > .affiliate-bottom-grid > .card,
#pageContent > .affiliate-action-area > .card,
#pageContent > .topup-layout > .card,
#pageContent > .topup-layout > .topup-main > .card,
#pageContent > .orders-view > .card,
#pageContent > .usage-record-card,
#pageContent > .key-management-card,
#pageContent > .support-records > .card,
#pageContent > .invite-lower-grid > .card{
  padding:18px!important;
}
#pageContent .card-head{
  margin-left:0!important;
  margin-right:0!important;
}

/* A deliberate, accessible refresh control for the overview timestamp. */
#pageContent .overview-updated button,
#pageContent button[aria-label*="刷新"]{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:inline-grid;
  place-items:center;
  padding:0;
  border:1px solid #dce6da;
  border-radius:9px;
  background:#fffefa;
  color:#45684b;
  box-shadow:0 1px 2px #263a2c0a;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
#pageContent .overview-updated button:hover,
#pageContent button[aria-label*="刷新"]:hover{
  transform:translateY(-1px);
  border-color:#b9cbb6;
  background:#edf3e9;
  color:#294e32;
  box-shadow:0 3px 8px #263a2c12;
}
#pageContent .overview-updated button:active,
#pageContent button[aria-label*="刷新"]:active{
  transform:scale(.95);
}
#pageContent .overview-updated button:focus-visible,
#pageContent button[aria-label*="刷新"]:focus-visible{
  outline:3px solid #496c4f40;
  outline-offset:2px;
}
#pageContent .overview-updated button .ui-icon,
#pageContent button[aria-label*="刷新"] .ui-icon{
  width:16px;
  height:16px;
  transition:transform .22s ease;
}
#pageContent .overview-updated button:hover .ui-icon,
#pageContent button[aria-label*="刷新"]:hover .ui-icon{
  transform:rotate(35deg);
}
@media(prefers-reduced-motion:reduce){
  #pageContent .overview-updated button,
  #pageContent .overview-updated button .ui-icon,
  #pageContent button[aria-label*="刷新"],
  #pageContent button[aria-label*="刷新"] .ui-icon{transition:none}
}

/* Align activity, billing, and redemption tables to the models-page reference:
   one card inset, one bordered table viewport, and matching table/pager edges. */
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card,
#pageContent.client-content-page:has(#billingSearch)>.card:nth-child(2),
#pageContent.client-content-page:has(.redeem-steps)>.support-records>.card{
  padding:18px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:#fffdfa!important;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.table-wrap,
#pageContent.client-content-page:has(#billingSearch)>.card:nth-child(2)>.table-wrap,
#pageContent.client-content-page:has(.redeem-steps)>.support-records>.card>.table-wrap{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  border-radius:8px!important;
  background:#fffdfa!important;
  overflow:auto;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.table-wrap table,
#pageContent.client-content-page:has(#billingSearch)>.card:nth-child(2)>.table-wrap table,
#pageContent.client-content-page:has(.redeem-steps)>.support-records>.card>.table-wrap table{
  width:100%;
  margin:0;
  border-collapse:collapse;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.table-wrap th,
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.table-wrap td,
#pageContent.client-content-page:has(#billingSearch)>.card:nth-child(2)>.table-wrap th,
#pageContent.client-content-page:has(#billingSearch)>.card:nth-child(2)>.table-wrap td,
#pageContent.client-content-page:has(.redeem-steps)>.support-records>.card>.table-wrap th,
#pageContent.client-content-page:has(.redeem-steps)>.support-records>.card>.table-wrap td{
  padding-left:12px!important;
  padding-right:12px!important;
  border-bottom:1px solid #edf0e9;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.usage-pagination,
#pageContent.client-content-page:has(#billingSearch)>.card:nth-child(2)>.table-pagination,
#pageContent.client-content-page:has(.redeem-steps)>.support-records>.card>.table-pagination{
  box-sizing:border-box;
  width:100%;
  margin:0!important;
  padding:4px 2px 0!important;
}
/* Fill the available viewport with the usage cards while keeping consistent
   18px card insets and an evenly spaced filter/table/pager stack. */
#pageContent.client-content-page:has(.usage-filters){
  display:flex!important;
  flex-direction:column!important;
  height:calc(100dvh - 64px)!important;
  min-height:0!important;
  row-gap:12px!important;
  overflow:hidden!important;
  align-content:stretch!important;
}
#pageContent.client-content-page:has(.usage-filters)>.card:first-child{
  display:block!important;
  flex:0 0 auto!important;
  min-height:152px!important;
  margin:0!important;
  padding:18px!important;
}
#pageContent.client-content-page:has(.usage-filters)>.card:first-child .record-stats{
  min-height:112px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card{
  display:flex!important;
  flex:1 1 0!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:18px!important;
  overflow:hidden!important;
  gap:12px!important;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.usage-filters{
  flex:0 0 auto!important;
  margin:0!important;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.table-wrap{
  display:flex!important;
  flex:1 1 0!important;
  flex-direction:column!important;
  height:auto!important;
  min-height:0!important;
  align-self:stretch!important;
  overflow:auto;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.table-wrap table{
  height:100%!important;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.table-wrap td.empty{
  height:100%!important;
  vertical-align:middle;
  text-align:center;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.table-wrap tbody tr:has(td.empty){
  height:100%!important;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.table-wrap td.empty{
  border-bottom:0!important;
}
#pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.usage-pagination{
  flex:0 0 auto!important;
  min-height:24px;
  margin-top:0!important;
}
@media(max-width:900px){
  #pageContent.client-content-page:has(.usage-filters){height:auto!important;min-height:calc(100dvh - 64px)!important;overflow:visible!important}
  #pageContent.client-content-page:has(.usage-filters)>.usage-record-card{flex:1 0 auto!important;min-height:420px!important}
  #pageContent.client-content-page:has(.usage-filters)>.usage-record-card>.table-wrap{min-height:260px!important}
}
@media(min-width:901px){
  #pageContent.client-content-page:has(#billingSearch)>.card:nth-child(2){
    padding:18px!important;
  }
  #pageContent.client-content-page:has(#billingSearch)>.card:nth-child(2)>.card-head{
    min-height:44px!important;
    padding:0 0 8px!important;
  }
  #pageContent.client-content-page:has(#billingSearch)>.card:nth-child(2)>.card-head>.table-tools{
    gap:12px;
  }
  #pageContent.client-content-page:has(#billingSearch)>.card:nth-child(2)>.table-wrap{
    padding:0!important;
  }
}
#pageContent .overview-updated button .refresh-custom-icon{
  width:18px!important;
  height:18px!important;
  object-fit:contain;
  transform:none!important;
}