/* Approved Nai 5 presentation layer. Scoped to the customer site. */
body.site-app {
  color-scheme: dark;
  --paper:#141824; --paper-raised:#1c2130; --paper-muted:#161b28;
  --ink:#f2f0fa; --ink-soft:#d3d6e2; --muted:#a7acbe;
  --line:#353b4e; --line-strong:#50576d; --accent:#b8aaff; --accent-dark:#b8aaff;
  --on-accent:#251b49; --soft:#2a2544; --canvas:#111521;
  --green:#9cdbca; --danger:#ffa8b4; --blue:#b8aaff;
  --radius-sm:8px; --radius-md:14px; --radius-lg:18px;
  --shadow:0 18px 50px #0003; --focus:0 0 0 3px #b8aaff55;
  background:var(--paper); color:var(--ink);
  font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif; font-size:16px; line-height:1.5;
}
body.site-app[data-theme=light] {
  color-scheme:light; --paper:#eff1f8; --paper-raised:#fff; --paper-muted:#f4f5fa;
  --ink:#24263b; --ink-soft:#42465c; --muted:#596079; --line:#c6ccdb; --line-strong:#a4aec5;
  --accent:#6046bd; --accent-dark:#6046bd; --on-accent:#fff; --soft:#eee8ff; --canvas:#e6e9f2;
  --green:#266454; --danger:#ae2241; --blue:#6046bd; --focus:0 0 0 3px #6046bd33;
}
html:has(body.site-app) {background:var(--paper); scrollbar-color:#50576d #141824; scroll-behavior:smooth}
.site-app h1,.site-app h2,.site-app h3,.site-app h4 {font-family:"DengXian","Microsoft YaHei UI",sans-serif; letter-spacing:0; color:var(--ink)}
.site-app :is(button,a,summary) {touch-action:manipulation}
.site-app button,.site-app input,.site-app textarea,.site-app select {font-family:inherit}
.site-app :focus-visible {outline:3px solid var(--accent); outline-offset:3px}
.site-app :is(button,.primary,.secondary,.ghost,.text-button,.icon-button) {min-height:44px; border-radius:8px; transition:background 160ms,color 160ms,border-color 160ms; box-shadow:none}
.site-app :is(.primary,button.primary) {background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); font-weight:700}
.site-app :is(.secondary,.ghost) {background:transparent; border:1px solid var(--line); color:var(--ink); padding:10px 15px; font-size:13px}
.site-app :is(.secondary,.ghost):hover:not(:disabled) {background:var(--soft); border-color:var(--accent); color:var(--ink)}
.site-app .primary:hover:not(:disabled) {background:var(--accent); filter:brightness(1.08); transform:none}
.site-app :is(button:disabled,a[aria-disabled=true]) {opacity:.48; cursor:not-allowed; transform:none}
.site-app .text-button {color:var(--accent); font-size:13px}
.site-app :is(input,textarea,select,.custom-select-button) {background:var(--paper-muted); color:var(--ink); border:1px solid var(--line); border-radius:8px; min-height:44px; font-size:14px; line-height:1.6; padding:10px 12px}
.site-app :is(input,textarea)::placeholder {color:var(--muted); opacity:.9}
.site-app textarea {resize:vertical; line-height:1.8}
.site-app label {font-size:13px; color:var(--ink)}
.site-app :is(.hint,.small-image-note,.account-hint) {color:var(--muted); font-size:13px; line-height:1.8}
.site-app .custom-select-menu {border:1px solid var(--line); background:var(--paper-raised); color:var(--ink); box-shadow:var(--shadow); z-index:45}
.site-app .custom-select-option {background:transparent; color:var(--ink); font-size:14px; min-height:44px}
.site-app .custom-select-option:hover,.site-app .custom-select-option.selected {background:var(--soft); color:var(--accent)}
.site-app svg {width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}
.site-app .svg-library {position:absolute; width:0; height:0; overflow:hidden}
.site-app .visually-hidden,.nai5-skip {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.nai5-skip:focus {position:fixed; width:auto; height:auto; clip-path:none; left:90px; top:8px; padding:12px; z-index:100; background:var(--accent); color:var(--on-accent)}
.nai5-rail {position:fixed; inset:0 auto 0 0; width:76px; border-right:1px solid var(--line); background:var(--paper-raised); display:flex; align-items:center; flex-direction:column; padding:20px 8px; z-index:30}
.nai5-rail-brand {display:grid; place-items:center; width:48px; height:48px; margin-bottom:26px; color:var(--accent)}
.nai5-rail-brand svg {width:34px; height:34px}
.nai5-rail-links {display:flex; flex-direction:column; gap:14px; width:100%}
.nai5-rail-links a {display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; min-height:64px; border-radius:12px; color:var(--muted); text-decoration:none; font-size:12px}
.nai5-rail-links a:hover {background:var(--paper-muted); color:var(--ink)}
.nai5-rail-links a[aria-current=page] {background:var(--soft); color:var(--accent)}
.nai5-rail-signature {margin-top:auto; padding-top:24px; font:12px "Bahnschrift",sans-serif; color:var(--muted)}
.site-app .site-header {margin-left:76px; width:calc(100% - 76px); height:76px; padding:0 32px; gap:32px; background:var(--paper); border-bottom:1px solid var(--line)}
.site-app .site-brand {color:var(--ink); gap:0; text-decoration:none; min-height:44px; flex-shrink:0; border-radius:4px}
.site-app .site-brand .nai5-wordmark {display:block; width:156px; height:40px; flex:none; fill:currentColor; stroke:none}
.site-app .site-brand .nai5-wordmark-emblem {fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round}
.site-app .site-brand .nai5-wordmark-five {fill:var(--accent)}
.site-app .site-brand small,.site-app .site-motto,.site-app .header-membership,.site-app .workbench-balance {display:none}
.site-app .site-header>.site-nav {display:none}
.site-app .header-tools {margin-left:auto; gap:16px; display:flex; align-items:center}
.site-app .header-account {color:var(--ink); border:0; min-width:44px; min-height:44px; justify-content:center; font-size:13px; gap:10px}
.site-app .header-avatar {width:30px; height:30px; background:var(--soft); color:var(--accent); border-radius:50%; padding:4px}
.site-app .icon-button {width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--muted); display:inline-grid; place-items:center}
.site-app .icon-button:hover {background:var(--soft); color:var(--accent)}
.site-app .header-popover {background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); right:24px; top:calc(100% + 8px); color:var(--ink)}
.site-app .header-popover a,.site-app .header-popover button {min-height:44px; color:var(--ink); padding:10px 14px; font-size:14px}
.site-app .header-popover button[aria-pressed=true] {background:var(--soft); color:var(--accent)}
.site-app .user-shell {display:block; width:calc(100% - 76px); margin:0 0 0 76px; padding:0}
.site-app .user-shell>.panel {margin:24px 32px 36px; padding:24px; border:1px solid var(--line); border-radius:18px; box-shadow:none; background:var(--paper-raised)}
.site-app #small.small-image-panel {padding:0; border:0; background:transparent}
.site-app #small .small-image-overview {background:transparent; border:0; padding:0; border-radius:0}
.site-app #small .small-image-heading {margin-bottom:20px}
.site-app #small .small-image-heading h1 {font-size:30px; font-weight:700; line-height:1.3}
.site-app #small .small-image-heading p {font-size:13px; margin-top:8px}
.site-app #small .small-image-member-badge {border-radius:6px; padding:4px 10px; background:var(--soft); border-color:var(--line); color:var(--accent); font-size:12px}
.site-app #small .small-image-member-badge::before {content:none}
.site-app #small .small-image-metrics {border-radius:14px; padding:20px 0; margin:0; background:var(--paper-raised)}
.site-app #small .small-image-metrics>div {padding:0 24px}
.site-app #small .small-image-metrics dt {font-size:12px}
.site-app #small .small-image-metrics strong {font:25px "Bahnschrift","DengXian",sans-serif; letter-spacing:0}
.site-app #small .small-image-metrics dd span {font-size:12px}
.site-app #small .small-image-overview-footer {margin:10px 0 24px}
.site-app #small .small-image-overview-footer p {font-size:11px}
.site-app #small .small-image-layout {display:grid; grid-template-columns:420px minmax(0,1fr); gap:24px; align-items:start; margin:0; height:auto; min-height:0}
.site-app #small .small-image-form {display:block; background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; padding:0; height:auto; min-height:0; max-height:none; overflow:visible; position:static; box-shadow:none}
.studio-editor-header {display:flex; align-items:center; justify-content:space-between; padding:24px 24px 20px}
.studio-editor-header h2 {font-size:18px; margin:0}
.studio-editor-header>span {color:var(--muted); font-size:12px}
.studio-model-row {padding:0 24px}
.site-app #small label {display:flex; flex-direction:column; gap:8px; width:100%; margin:0; font-size:13px}
.site-app #small label :is(input,textarea,select,.custom-select) {width:100%; min-width:0}
.studio-size-field {border:0; margin:20px 24px 24px; padding:0; min-width:0}
.studio-size-field legend {font-size:13px; padding:0; margin-bottom:8px}
#studioSizes {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.site-app .studio-size-button {display:flex; align-items:center; justify-content:center; gap:9px; min-height:72px; border:1px solid var(--line); background:var(--paper-muted); color:var(--muted); font-size:12px; padding:8px 4px}
.site-app .studio-size-button[aria-pressed=true] {border-color:var(--accent); background:var(--soft); color:var(--accent)}
.studio-size-button>span:last-child {display:flex; flex-direction:column; align-items:flex-start; gap:3px}
.studio-size-button small {font-size:9px; color:var(--muted)}
.studio-size-shape {width:17px; height:17px; border:1.5px solid currentColor; border-radius:2px}
.studio-size-button[data-size=竖图] .studio-size-shape {width:13px; height:20px}
.studio-size-button[data-size=横图] .studio-size-shape {width:20px; height:13px}
.studio-tabs {display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 24px; border-bottom:1px solid var(--line)}
.site-app .studio-tabs button {background:transparent; border:0; border-radius:0; color:var(--muted); font-size:13px; min-height:54px; position:relative; padding:10px 6px; white-space:nowrap}
.site-app .studio-tabs button[aria-selected=true] {color:var(--accent)}
.studio-tabs button[aria-selected=true]::after {content:""; position:absolute; bottom:0; left:8px; right:8px; height:2px; background:var(--accent)}
.studio-tabs button span {font-size:11px; background:var(--paper-muted); padding:2px 5px; border-radius:4px; margin-left:4px}
.studio-editor-content {padding:24px; height:auto; max-height:none; min-height:0; overflow:visible}
.site-app #small #smallImagePrompt {min-height:200px; max-height:none}
.studio-prompt-helper {font-size:11px; color:var(--muted); margin:12px 0 20px}
.studio-negative {border-top:1px solid var(--line); padding-top:8px}
.site-app #small details summary {min-height:44px; display:flex; align-items:center; gap:10px; color:var(--ink); font-size:13px; cursor:pointer; padding:8px 0}
.studio-negative summary>span {font-size:11px; color:var(--muted); margin-left:auto}
.site-app #small .small-image-fields {display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0 20px}
.site-app #small .nai5-features {border:0; padding:0; margin:0; background:none; border-radius:0}
.studio-section-heading,.site-app #small .small-reference-heading {display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px}
.studio-section-heading h3,.site-app #small .small-reference-heading h3 {font-size:16px; margin:0}
.studio-empty {display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; gap:18px; min-height:220px; color:var(--muted); padding:32px 16px}
.studio-empty>svg {width:32px; height:32px}
.studio-empty h3 {margin:0; font-size:18px; font-weight:400; color:var(--ink)}
.studio-empty p {margin:0; font-size:13px; line-height:1.9}
.studio-empty-icon {width:64px; height:64px; display:grid; place-items:center; border:1px solid var(--line); border-radius:18px}
.studio-empty-icon svg {width:28px; height:28px}
.site-app #small :is(#smallCharacterControls,#smallReferenceControls) {padding:0; margin-top:20px; border:0; background:none}
.site-app #small .small-feature-controls fieldset {border:1px solid var(--line); border-radius:12px; background:var(--paper-muted); padding:16px; margin:16px 0 0; min-width:0}
.site-app #small .small-feature-controls legend {color:var(--ink); font-size:14px; padding:0 8px}
.site-app #small .small-feature-controls fieldset>label {margin:16px 0}
.site-app #small .small-role-toolbar {display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.site-app #small .small-role-toolbar button {min-height:44px; font-size:12px; padding:8px 12px}
.site-app #small .small-role-position-grid {display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; gap:4px}
.site-app #small .small-role-position-grid button {min-width:0; min-height:44px; padding:4px}
.site-app #small .small-role-position-canvas {width:100%; min-height:160px; background:var(--paper-raised); border:1px solid var(--line)}
.site-app #small .small-reference-preview {width:80px; height:80px; object-fit:cover; border-radius:8px}
.site-app #small .small-feature-controls .small-reference-card {position:relative; display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; padding:12px; margin-top:12px}
.site-app #small .small-reference-card .small-reference-preview {width:64px; height:64px; align-self:center; margin:0}
.site-app #small .small-reference-tuning {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:center; min-width:0}
.site-app #small .small-reference-tuning label {margin:0; gap:6px; font-size:12px; min-width:0}
.site-app #small .small-reference-tuning input {height:44px; min-height:44px; padding:8px; width:100%; min-width:0}
.site-app #small .small-reference-card legend {padding-right:30px}
.site-app #small .small-reference-card .small-reference-remove {position:absolute; right:0; top:-26px; width:44px; min-width:44px; height:44px; min-height:44px; padding:0; border:0; background:transparent; font-size:22px; color:var(--muted)}
.site-app #small .small-reference-more {grid-column:1/-1; margin:0; font-size:12px}
.site-app #small .small-reference-more summary {padding:6px 0; color:var(--muted); cursor:pointer}
.site-app #small .small-reference-more button {margin-top:8px}
.site-app #small .small-reference-card>label {grid-column:1/-1; margin:0}
.site-app #small .small-reference-normalize {display:flex; flex-direction:row; align-items:center; gap:8px; min-height:44px; font-size:12px; margin:10px 0}
.site-app #small .small-reference-normalize input {width:18px; min-width:18px; height:18px; min-height:18px; margin:0; padding:0; flex:none}
.site-app #small #smallReferenceUploadStatus:empty {display:none}
.site-app #small .small-quote-hint {font-size:13px; color:var(--muted); margin:8px 0}
.site-app #small .small-reference-empty {padding:28px 18px; border:1px dashed var(--line); border-radius:12px; text-align:center; color:var(--muted); font-size:13px}
.studio-upload-help {color:var(--muted); font-size:12px; line-height:1.8; margin-top:20px}
.studio-generate-footer {background:var(--paper-muted); border-top:1px solid var(--line); padding:20px 24px 24px; border-radius:0 0 18px 18px}
.site-app #small #smallImageSubmit {width:100%; min-height:52px; font-size:14px; line-height:1.6; white-space:normal; padding:12px}
.studio-usage {margin-top:12px}
.site-app #small .studio-usage summary {font-size:11px; color:var(--muted); justify-content:center}
.studio-mobile-view {display:none}
.site-app #small .small-image-result-wrap {position:static; height:auto; min-height:0; max-height:none; overflow:visible; padding:8px 0 0; border:0; background:none; box-shadow:none}
.studio-canvas-toolbar {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.studio-canvas-toolbar>div {display:flex; align-items:center; gap:8px}
.studio-canvas-toolbar h2 {font-size:15px; margin:0}
.studio-canvas-dot {width:6px; height:6px; border-radius:50%; background:var(--green)}
#studioCanvasState {font-size:11px; padding:2px 7px; border:1px solid var(--line); border-radius:5px; color:var(--muted)}
.studio-canvas {position:relative; min-height:600px; padding:32px 24px 48px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:14px; background-color:var(--canvas); background-image:linear-gradient(45deg,#78819806 25%,transparent 25%,transparent 75%,#78819806 75%),linear-gradient(45deg,#78819806 25%,transparent 25%,transparent 75%,#78819806 75%); background-size:24px 24px; background-position:0 0,12px 12px}
.site-app #smallImageResult {width:100%; padding:0; min-height:0; display:flex; flex-direction:row; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; background:none; border:0}
.site-app #smallImageResult>.studio-empty {width:100%}
.site-app #smallImageResult .small-image-preview {width:100%; max-width:100%; padding:0; border:0; background:none; display:flex; align-items:center; justify-content:center; border-radius:0}
.site-app #smallImageResult img {width:auto; max-width:100%; height:auto; max-height:600px; object-fit:contain; border-radius:4px; box-shadow:0 12px 32px #0002}
.site-app #smallImageResult :is(a,button):not(.small-image-preview) {font-size:12px; white-space:normal}
#studioCanvasSize {position:absolute; bottom:14px; right:16px; color:var(--muted); font-size:11px}
.site-app #smallImageStatus {font-size:13px; color:var(--ink); line-height:1.8; margin:16px 0 4px; padding:0; background:none; border:0}
.site-app .small-fee-summary {font-size:12px; color:var(--muted); line-height:1.9; margin:8px 0 16px; background:none; border:0; padding:0}
.studio-recent-link {display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:13px; min-height:52px; border-top:1px solid var(--line); margin-top:20px; text-decoration:none}
.site-app #products {border:0; padding:0; margin:32px auto 48px; width:calc(100% - 64px); max-width:1120px; background:none}
.site-app #products .product-page-heading {display:block; text-align:center; margin:0 0 12px; padding:20px 0 8px; background:none; border:0}
.site-app #productsTitle {font-size:36px; margin:0 0 12px}
.site-app #products .product-page-heading>span {display:block; color:var(--muted); font-size:13px}
.site-app #products #productRuleNotice {max-width:760px; margin:0 auto 32px; text-align:center; line-height:1.8; font-size:12px; color:var(--muted); padding:0; border:0; background:none}
.site-app #products .product-groups {display:block; margin:0; gap:0}
.site-app #products .membership-group>h4 {text-align:center; font-size:13px; color:var(--muted); margin:0 0 24px; font-weight:400}
.site-app #products .membership-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; width:100%}
.site-app #products .product-card {background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:none; color:var(--ink); min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:0; min-height:0}
.site-app #products .product-plus {border-color:var(--accent)}
.site-app #products .product-heading {display:flex; flex-direction:row; align-items:center; justify-content:space-between; margin-bottom:8px}
.site-app #products .product-heading h3 {font:700 25px "Bahnschrift",sans-serif; margin:0}
.plan-tag {font-size:11px; padding:4px 9px; border-radius:5px; background:var(--soft); color:var(--accent)}
.site-app #products .product-card p {min-height:0}
.site-app #products .plan-description {font-size:13px; color:var(--muted); margin:0; line-height:1.8}
.site-app #products .product-price {border-bottom:1px solid var(--line); padding:24px 0; margin:0; display:flex; align-items:baseline; gap:8px}
.site-app #products .product-price strong {font:43px "Bahnschrift",sans-serif; color:var(--ink); letter-spacing:0}
.site-app #products .product-price span {font-size:12px; color:var(--muted)}
.plan-quotas {margin:24px 0 8px; display:flex; flex-direction:column; gap:18px}
.plan-quotas>div {display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.plan-quotas dt {font-size:13px; color:var(--muted)}
.plan-quotas dd {margin:0; font:21px "Bahnschrift",sans-serif; white-space:nowrap}
.plan-quotas small {font:11px "Microsoft YaHei UI",sans-serif; color:var(--muted)}
.site-app #products .product-benefits {padding:0; margin:16px 0 24px; list-style:none; color:var(--muted); font-size:12px; line-height:1.8}
.site-app #products .product-benefits {gap:10px}
.site-app #products .product-benefits li {margin:0; display:flex; gap:8px}
.site-app #products .product-benefits li::before {content:"✓"; color:var(--accent)}
.site-app #products .product-card>a {margin-top:auto; text-align:center; min-height:44px}
.site-app #products .product-plus>a {background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.site-app #products .recharge-group {margin:24px 0 0; padding:0; background:none; border:0}
.site-app #products .recharge-card {display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px 24px; padding:24px 28px; border-radius:14px}
.site-app #products .recharge-copy h3 {font-size:18px; margin:0 0 8px}
.recharge-copy p,.recharge-note {font-size:12px; color:var(--muted); line-height:1.8; margin:0}
.recharge-copy>span {font-size:12px; color:var(--accent); display:block; margin-top:8px}
.recharge-value strong {font:24px "Bahnschrift",sans-serif; display:block}
.recharge-value small {font:12px "Microsoft YaHei UI",sans-serif; color:var(--muted)}
.recharge-value>span {color:var(--accent); font-size:15px}
.recharge-note {grid-column:1/-1; border-top:1px solid var(--line); padding-top:16px}
.plans-bottom {display:grid; grid-template-columns:1fr 1.7fr; gap:40px; margin:32px 0 24px}
.site-app #products .small-activation {padding:24px; margin:0; background:var(--soft); border:0; border-radius:14px; align-self:start; min-width:0}
.site-app #products .small-activation h3 {font-size:20px; margin:0 0 12px}
.site-app #products .small-activation :is(p,.small-activation-summary) {font-size:12px; line-height:1.9; overflow-wrap:anywhere}
.site-app #products .small-activation input {width:100%; margin:12px 0; min-width:0}
.site-app #products .small-activation-actions {display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.site-app #products .small-activation-actions button {white-space:normal; min-height:44px; font-size:12px}
.site-app #products .product-usage {margin:0; padding:0; border:0; background:none; display:block}
.site-app #products .product-usage h4 {font-size:18px; margin:0 0 12px}
.site-app #products .product-usage details {border-bottom:1px solid var(--line); padding:8px 0}
.site-app #products .product-usage summary {min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:13px}
.site-app #products .product-usage p {font-size:12px; color:var(--muted); line-height:1.9; margin:0 0 12px}
.site-app #products .product-orders-heading {margin-top:32px; padding-top:24px; border-top:1px solid var(--line)}
.site-app #products .product-orders {font-size:13px; color:var(--muted)}
.site-app .home-hero {min-height:600px; border-radius:0; background:#111521}
.site-app .hero-copy h1 {font-family:"DengXian",sans-serif; font-size:56px; line-height:1.2; letter-spacing:1px; color:#f2f0fa}
.site-app .hero-copy h1 em {font-style:normal; color:#c6baff}
.site-app .hero-copy>p,.site-app .hero-eyebrow,.site-app .hero-side-note {color:#e4e3ed}
.site-app .hero-actions .secondary {color:#f2f0fa; border-color:#a7acbe; background:#14182466}
.site-app .home-section {padding:56px 32px; max-width:1400px; margin:auto}
.site-app .home-section-heading h2 {font-size:28px}
.site-app .inspiration-card {background:none; border:0; box-shadow:none; padding:0; color:var(--ink)}
.site-app .inspiration-image {border-radius:12px; overflow:hidden}
.site-app .inspiration-card h3 {font-size:17px; margin-top:16px}
.site-app .inspiration-card p {font-size:12px; color:var(--muted)}
.site-app .theme-panel,.site-app .home-flow,.site-app .home-invitation {background:var(--paper-raised); border-color:var(--line); border-radius:18px}
.site-app .theme-copy h3 {font-size:28px}
.site-app .home-invitation {margin:24px 32px 48px; padding:48px 32px; border:1px solid var(--line)}
.site-app .home-invitation h2 {font-size:38px; line-height:1.3}
.site-app .home-footer {border-color:var(--line); color:var(--muted); margin:0 32px; padding:24px 0; font-size:12px}
.site-app #recent h2,.site-app .panel>h1 {font-size:30px; margin-top:0}
.site-app .work-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; min-width:0}
.site-app .work-card {border:1px solid var(--line); border-radius:14px; background:var(--paper-muted); box-shadow:none; overflow:hidden; min-width:0}
.site-app .work-card img {width:100%; max-width:100%; object-fit:cover}
.site-app .work-card :is(p,small) {color:var(--muted); font-size:12px}
.site-app dialog {background:var(--paper-raised); color:var(--ink); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:24px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px)}
.site-app dialog::backdrop {background:#090d18aa; backdrop-filter:blur(5px)}
.site-app dialog[open] {animation:nai5-open 180ms ease-out}
@keyframes nai5-open {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.site-app :is(.dialog-heading,.account-dialog-heading) {display:flex; align-items:center; justify-content:space-between; gap:16px; border-color:var(--line)}
.site-app .auth-dialog:is([data-mode=login],[data-mode=register]) {width:min(780px,calc(100vw - 32px)); height:auto; max-height:calc(100dvh - 32px); padding:0; background:var(--paper-raised)}
.site-app .auth-dialog .auth-layout {display:grid; grid-template-columns:240px minmax(0,1fr); height:auto; min-height:0}
.site-app #access.auth-dialog {height:fit-content; min-height:0; overflow:auto; inset:0; margin:auto}
.site-app .auth-intro {padding:32px; background:var(--soft); color:var(--ink); border:0}
.site-app .auth-intro>strong {font:26px "Bahnschrift",sans-serif; color:var(--accent)}
.site-app .auth-intro p,.site-app .auth-intro li {color:var(--muted); font-size:13px; line-height:1.8}
.site-app .auth-intro>div {background:var(--paper-muted); color:var(--ink); border:1px solid var(--line)}
.site-app .auth-dialog .auth-content {padding:32px; display:block; overflow:visible}
.site-app .auth-dialog .auth-content h2 {font-size:26px; display:block; margin:0 0 16px; padding:0; flex:none; border:0}
.site-app .auth-close {top:16px; right:16px}
.site-app #access .auth-form {gap:16px}
.site-app #access .auth-form label {margin:0; display:flex; flex-direction:column; gap:8px}
.site-app .auth-mode-switch {display:flex; gap:8px; margin:0 0 20px; padding:0; border:0; order:0}
.site-app .auth-mode-switch button {font-size:13px; color:var(--muted); background:var(--paper-muted); flex:1; display:block}
.site-app .auth-mode-switch button[aria-pressed=true] {background:var(--soft); color:var(--accent)}
.site-app .auth-dialog[data-mode=register] .auth-mode-switch {margin:0; padding:0; justify-content:initial; border:0; order:0}
.site-app .auth-dialog[data-mode=register] .auth-mode-switch button {flex:1}
.site-app .auth-dialog[data-mode=register] #registerModeBtn {display:block}
.site-app .auth-help,.site-app .auth-session-status,.site-app .legacy-key-details {font-size:12px; color:var(--muted)}
.site-app #access .auth-form .nai5-agreement {display:flex; flex-direction:row; align-items:center; gap:10px; font-size:12px}
.site-app .nai5-agreement input {width:20px; min-height:20px; height:20px; flex-shrink:0}
.site-app .nai5-agreement span {font-size:12px}
.site-app .auth-captcha-row {display:flex; align-items:center; gap:10px}
.site-app .auth-captcha-row input {min-width:0; flex:1}
.site-app #authCaptchaRefresh {min-width:140px; min-height:48px; background:var(--paper-muted); border:1px solid var(--line)}
.site-app #authSubmitBtn {width:100%; min-height:48px; margin-top:8px}
.site-app #authFeedback {color:var(--danger); font-size:13px; line-height:1.8}
.site-app .account-dialog {width:min(1120px,calc(100vw - 48px)); padding:0; height:auto; max-height:calc(100dvh - 48px); background:var(--paper-raised)}
.site-app .account-dialog-heading {padding:20px 24px; background:var(--paper-raised)}
.site-app .account-dialog-heading h2 {font-size:24px; margin:0}
.site-app .account-tabs {padding:0 24px; background:var(--paper-muted); border-color:var(--line); display:flex; flex-wrap:wrap; gap:8px}
.site-app .account-tabs button {font-size:13px; color:var(--muted); background:none; min-height:48px; border:0; padding:10px 14px}
.site-app .account-tabs button[aria-selected=true] {color:var(--accent); background:var(--soft)}
.site-app .account-dialog-body {padding:24px; height:auto; min-height:0; max-height:calc(100dvh - 220px); overflow:auto; background:var(--paper-raised)}
.site-app .account-card {padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--paper-muted); box-shadow:none}
.site-app .account-card p {color:var(--muted); font-size:13px; line-height:1.8}
.site-app .account-summary strong,.site-app .account-summary dd {font-family:"Bahnschrift","DengXian",sans-serif}
.site-app .account-dialog .account-summary dt {font-size:12px}
.site-app .account-dialog .account-summary dd {font-size:14px; color:var(--ink)}
.site-app .account-member-actions {position:static; width:auto; min-height:0; display:flex; flex-wrap:wrap; gap:8px; border:0; background:none; padding:0; margin:16px 0 0}
.site-app .account-member-actions :is(button,a) {font-size:12px; min-height:44px; padding:8px 12px; white-space:normal}
.site-app .account-profile-fields {gap:16px}
.site-app .account-pane-heading h3 {font-size:22px; margin:0 0 8px}
.site-app .account-pane-heading p {color:var(--muted); font-size:13px}
.site-app .ledger-filters {display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.site-app .ledger-filters label {min-width:140px; flex:1}
.site-app .table-wrap {max-width:100%; overflow:auto; border-color:var(--line); border-radius:10px}
.site-app table {background:var(--paper-muted); color:var(--ink); font-size:13px}
.site-app th,.site-app td {border-color:var(--line); padding:12px}
.site-app th {color:var(--muted); background:var(--paper-muted)}
.site-app .nai5-document {width:min(820px,calc(100% - 64px)); margin:32px auto 48px; padding:32px; border:1px solid var(--line); border-radius:18px; background:var(--paper-raised)}
.site-app .nai5-document h1 {font-size:30px}
.site-app .nai5-document h2 {font-size:20px; margin:32px 0 12px}
.site-app .nai5-document p {font-size:14px; line-height:1.9; color:var(--muted)}
.site-app dialog.nai5-document {width:min(820px,calc(100vw - 32px)); margin:auto}
.site-app #serviceAgreementText {font:14px/1.9 "Microsoft YaHei UI",sans-serif; white-space:pre-wrap; color:var(--muted)}
.site-app #smallReferencePicker {width:min(640px,calc(100vw - 32px))}
.site-app .small-reference-modes {gap:12px}
.site-app .small-reference-modes button {background:var(--paper-muted); border:1px solid var(--line); color:var(--ink); padding:16px 12px; min-width:0; min-height:80px}
.site-app .small-reference-modes button[aria-checked=true] {border-color:var(--accent); background:var(--soft); color:var(--accent)}
.site-app .small-reference-modes small {color:var(--muted); font-size:11px}
.site-app .small-reference-upload-button svg,.site-app .small-role-position-canvas span {color:var(--accent)}
.site-app #smallReferencePickerPreview img {border-radius:8px; object-fit:contain}
.site-app #smallImagePreview {width:fit-content; max-width:calc(100vw - 32px); padding:16px; background:var(--canvas)}
.site-app #smallImagePreviewImage {max-width:100%; max-height:calc(100dvh - 120px); object-fit:contain}
.site-app .toast {background:var(--paper-raised); color:var(--ink); border:1px solid var(--line); border-radius:12px; font-size:13px; box-shadow:var(--shadow)}
@media(min-width:1500px) {.site-app #small .small-image-layout {grid-template-columns:460px minmax(0,1fr)}}
@media(max-width:1150px) {
  .site-app .site-header {padding:0 24px}
  .site-app .user-shell>.panel {margin-inline:24px}
  .site-app #small .small-image-layout {grid-template-columns:380px minmax(0,1fr); gap:20px}
  .studio-canvas {min-height:560px}
  .site-app #products .product-card {padding:24px 20px}
  .site-app #products .recharge-card {grid-template-columns:1fr auto; gap:16px}
  .site-app #products .recharge-card>a {grid-column:1/-1}
}
@media(max-width:900px) and (min-width:701px) {
  .site-app #small .small-image-layout {grid-template-columns:340px minmax(0,1fr); gap:16px}
  .studio-editor-content,.studio-editor-header,.studio-generate-footer {padding-inline:20px}
  .studio-canvas {min-height:500px; padding-inline:16px}
  .studio-canvas-toolbar {flex-wrap:wrap}
  .site-app #small .small-image-metrics>div {padding-inline:12px}
  .site-app #small .small-image-metrics dt {font-size:11px}
  .site-app #products .membership-grid {gap:12px}
  .site-app #products .product-card {padding:22px 16px}
  .plan-quotas>div {flex-wrap:wrap; gap:4px}
  .plans-bottom {grid-template-columns:1fr 1.4fr; gap:20px}
}
@media(max-width:700px) {
  .nai5-rail {display:none}
  .site-app .site-header {margin:0; width:100%; height:64px; padding:0 16px; gap:12px}
  .site-app .site-brand {flex:1; min-width:88px; order:0}
  .site-app .site-brand .nai5-wordmark {width:112px; height:auto; max-width:100%}
  .site-app .site-header>.site-nav {display:flex; position:static; height:100%; width:auto; padding:0; background:none; gap:16px; margin:0; order:1}
  .site-app .site-header>.site-nav>a {display:none}
  .site-app .site-header>.site-nav>a:is([href="#small"],[href="#products"]) {display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-size:0; padding:0; color:var(--muted); border-radius:0}
  .site-app .site-header>.site-nav>a[href="#small"]::before {content:"创作"; font-size:14px}
  .site-app .site-header>.site-nav>a[href="#products"]::before {content:"套餐"; font-size:14px}
  .site-app .site-header>.site-nav>a[aria-current=page] {color:var(--accent)}
  .site-app .header-tools {gap:4px; order:2}
  .site-app #appearanceBtn {display:grid}
  .site-app .header-account {display:none}
  .site-app .header-popover {right:12px; width:min(280px,calc(100vw - 24px))}
  .site-app .user-shell {width:100%; margin:0; padding:0}
  .site-app[data-page=home][data-menu-open=true] .user-shell {padding-top:0}
  .site-app .user-shell>.panel {margin:20px 16px 28px; padding:20px}
  .site-app #small .small-image-heading h1 {font-size:26px}
  .site-app #small .small-image-title-row {gap:8px}
  .site-app #small .small-image-heading {gap:12px; align-items:flex-start}
  .site-app #small .small-image-heading p {font-size:12px}
  .site-app #small .small-image-plan-link {font-size:11px; padding:8px 10px}
  .site-app #small .small-image-metrics {grid-template-columns:1fr 1fr; gap:20px 12px; padding:20px 16px}
  .site-app #small .small-image-metrics>div {padding:0; border:0}
  .site-app #small .small-image-metrics>div:nth-child(even) {border-left:1px solid var(--line); padding-left:16px}
  .site-app #small .small-image-metrics dt {font-size:11px}
  .site-app #small .small-image-overview-footer {align-items:flex-start; gap:12px; margin-bottom:20px}
  .site-app #small .small-image-overview-footer p {font-size:10px; margin:0}
  .studio-mobile-view {display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:4px; border:1px solid var(--line); border-radius:10px; background:var(--paper-muted); margin-bottom:16px}
  .site-app .studio-mobile-view button {background:none; color:var(--muted); font-size:13px; border:0; min-height:44px}
  .site-app .studio-mobile-view button[aria-pressed=true] {background:var(--paper-raised); color:var(--accent)}
  .site-app #small .small-image-layout {display:block}
  .site-app #small[data-studio-pane=editor] .small-image-result-wrap,.site-app #small[data-studio-pane=canvas] .small-image-form {display:none}
  .site-app #small .small-image-form {border-radius:14px}
  .studio-editor-header {padding:20px 18px 16px}
  .studio-model-row {padding-inline:18px}
  .studio-size-field {margin:18px 18px 20px}
  .site-app .studio-size-button {min-height:64px; gap:7px}
  .studio-tabs {padding-inline:18px}
  .site-app .studio-tabs button {min-height:48px}
  .studio-editor-content {padding:20px 18px}
  .site-app #small #smallImagePrompt {min-height:130px}
  .studio-generate-footer {padding:16px 18px 20px; position:static; border-radius:0 0 14px 14px}
  .studio-canvas {min-height:420px; padding:24px 16px 44px}
  .studio-empty h3 {font-size:16px}
  .studio-empty p {font-size:12px}
  .site-app #smallImageResult img {max-height:520px}
  .site-app #smallImageResult :is(a,button):not(.small-image-preview) {flex:1 1 40%; font-size:11px}
  .site-app #products {width:calc(100% - 32px); margin:20px auto 28px; padding:0}
  .site-app #productsTitle {font-size:27px}
  .site-app #products .product-page-heading {padding-top:16px}
  .site-app #products #productRuleNotice {margin-bottom:24px}
  .site-app #products .membership-grid {grid-template-columns:1fr; gap:16px}
  .site-app #products .product-card {padding:24px}
  .site-app #products .product-price strong {font-size:42px}
  .site-app #products .recharge-card {grid-template-columns:1fr; gap:16px}
  .recharge-value {display:flex; align-items:center; justify-content:space-between}
  .plans-bottom {grid-template-columns:1fr; gap:28px; margin-top:24px}
  .site-app .home-hero {min-height:640px}
  .site-app .hero-copy h1 {font-size:38px}
  .site-app .hero-copy {padding:32px 24px; max-width:100%}
  .site-app .home-section {padding:32px 16px}
  .site-app .home-section-heading h2 {font-size:24px}
  .site-app .inspiration-card h3 {font-size:15px}
  .site-app .home-invitation {margin:16px; padding:32px 24px}
  .site-app .home-invitation h2 {font-size:30px}
  .site-app .home-footer {margin:0 16px}
  .site-app .user-shell>#recent {padding:20px 16px}
  .site-app .work-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .site-app .work-card :is(button,a) {font-size:12px; padding:8px}
  .site-app dialog {padding:20px; border-radius:14px}
  .site-app .auth-dialog .auth-layout {display:block; height:auto}
  .site-app .auth-dialog .auth-intro {display:none}
  .site-app .auth-dialog .auth-content {padding:24px; overflow:visible}
  .site-app .auth-dialog:is([data-mode=login],[data-mode=register]) {height:auto; width:calc(100vw - 32px); max-height:calc(100dvh - 32px)}
  .site-app .auth-mode-switch button {font-size:12px}
  .site-app #authCaptchaRefresh {min-width:120px}
  .site-app .account-dialog {width:calc(100vw - 24px); max-height:calc(100dvh - 24px); margin:auto; height:auto; border:1px solid var(--line); border-radius:14px}
  .site-app .account-dialog-heading {padding:16px}
  .site-app .account-dialog-heading h2 {font-size:21px}
  .site-app .account-tabs {padding:0 12px; gap:4px}
  .site-app .account-tabs button {padding:8px 10px; font-size:12px; min-height:44px}
  .site-app .account-dialog-body {padding:16px; max-height:calc(100dvh - 220px)}
  .site-app .account-card {padding:20px}
  .site-app .account-basic-layout,.site-app .account-profile-fields {grid-template-columns:1fr}
  .site-app .nai5-document {width:calc(100% - 32px); padding:24px; margin:20px auto 28px}
  .site-app .nai5-document h1 {font-size:26px}
  .site-app .small-reference-modes {gap:8px}
  .site-app .small-reference-modes button {font-size:12px; padding:14px 6px}
  .site-app .toast {max-width:calc(100vw - 32px); bottom:16px}
}
@media(max-width:440px) {
  .site-app .site-header {padding-inline:12px; gap:6px}
  .site-app .site-header>.site-nav {gap:8px}
  .site-app .site-brand .nai5-wordmark {width:100px}
}
@media(max-width:360px) {
  .site-app .site-brand .nai5-wordmark {width:88px}
  .site-app .site-header .header-tools>.nai5-contact-entry {display:none}
}
@media(prefers-reduced-motion:reduce) {
  html:has(body.site-app) {scroll-behavior:auto}
  .site-app *,.site-app *::before,.site-app *::after {animation:none!important; transition:none!important}
}