@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@500;600;700&display=swap');

:root{font-family:'Noto Sans SC','Manrope',sans-serif;color:#1b222b;background:#f6f7f8;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#161b22;--muted:#77808b;--line:#e6e9ed;--blue:#2357f4;--blue-dark:#1844ce;--cream:#f8f8f5;--navy:#111820}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:#f6f7f8}button,input,select{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer}.icon{display:block;flex:none}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;background:var(--navy);color:#eef1f5;display:flex;flex-direction:column;padding:25px 16px 18px;position:fixed;inset:0 auto 0 0}.logo-lockup{display:flex;align-items:center;gap:11px;padding:0 11px;margin-bottom:30px}.logo-lockup strong{font-size:20px;letter-spacing:.08em;display:block;line-height:1}.logo-lockup small{display:block;color:#87909c;font:10px 'DM Mono',monospace;letter-spacing:.14em;margin-top:6px}.logo-mark{height:31px;width:31px;display:flex;align-items:end;gap:3px}.logo-mark span{display:block;width:8px;border-radius:8px 8px 1px 1px;background:#d9dfeb;transform:skew(-12deg)}.logo-mark span:nth-child(1){height:16px;opacity:.6}.logo-mark span:nth-child(2){height:25px}.logo-mark span:nth-child(3){height:20px;background:#3e6aff}.workspace-pill{display:flex;align-items:center;gap:10px;padding:11px 10px;border:1px solid #29323d;border-radius:11px;background:#171f28;margin-bottom:27px}.workspace-pill>div:nth-child(2){display:flex;flex:1;flex-direction:column;min-width:0}.workspace-pill b{font-size:12px;font-weight:600}.workspace-pill span{font-size:10px;color:#7d8793;margin-top:3px}.workspace-dot,.avatar{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#35415a;color:#dbe5ff;font-size:12px;font-weight:800}.nav-label{font:10px 'DM Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:#66717e;padding:0 12px 9px}.nav-item{width:100%;display:flex;align-items:center;gap:11px;color:#99a2ad;padding:10px 12px;border-radius:9px;text-align:left;font-size:13px;margin:2px 0}.nav-item:hover{background:#1c2631;color:#e5e9ef}.nav-item.active{color:#fff;background:#273348;box-shadow:inset 3px 0 #4971ff}.nav-item em{font-style:normal;font:10px 'DM Mono';margin-left:auto;color:#8d99a8}.tools-label{margin-top:26px}.new-dot{font:9px 'DM Mono';color:#6889ff;margin-left:auto}.sidebar-bottom{margin-top:auto}.credit-card{padding:13px 13px 12px;border:1px solid #29343f;border-radius:11px;background:#171f28;margin-bottom:12px}.credit-head,.credit-foot{display:flex;justify-content:space-between;align-items:center}.credit-head span,.credit-foot span{color:#8d98a3;font-size:10px}.credit-head strong{color:#cdd8ff;font:11px 'DM Mono'}.progress{height:5px;border-radius:10px;background:#2c3540;margin:11px 0 9px;overflow:hidden}.progress i{display:block;height:100%;background:#5277ff;border-radius:inherit}.credit-foot button{color:#8aa5ff;font-size:10px}.profile{display:flex;align-items:center;gap:9px;padding:14px 10px 0;border-top:1px solid #27313b;margin-top:11px}.profile>div:nth-child(2){display:flex;flex:1;flex-direction:column}.profile b{font-size:12px}.profile span{color:#7d8793;font-size:10px;margin-top:3px}.avatar-staff{border-radius:50%;background:#c5aa99;color:#fff}.main-area{width:calc(100% - 250px);margin-left:250px;min-width:0}.topbar{height:74px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px}.breadcrumbs{display:flex;gap:11px;align-items:center;font-size:12px;color:#9aa2ad}.breadcrumbs i{font-style:normal;color:#c9ced4}.breadcrumbs strong{font-weight:600;color:#272e37}.top-actions{display:flex;align-items:center;gap:13px}.status{font-size:11px;color:#6c7580;display:flex;align-items:center;gap:6px;margin-right:6px}.status span{width:6px;height:6px;border-radius:50%;background:#55be7e;box-shadow:0 0 0 3px #e1f3e8}.icon-button{color:#7e8792;padding:5px}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;padding:10px 15px;font-size:12px;font-weight:600;transition:.2s}.button.primary{background:var(--blue);color:#fff;box-shadow:0 5px 12px #2357f422}.button.primary:hover,.generate-button:hover{background:var(--blue-dark);transform:translateY(-1px)}.button.small{padding:9px 13px;font-size:11px}.button.ghost{color:#4d5866;border:1px solid var(--line);background:#fff}.button.secondary{background:#eaf0ff;color:#2357f4}.button:disabled{opacity:.45;cursor:not-allowed}.notice{margin:25px 38px 0;padding:13px 17px;background:#eef4ff;border:1px solid #d7e3ff;border-radius:10px;display:flex;align-items:center;gap:11px;color:#476282}.notice-icon{width:30px;height:30px;display:grid;place-items:center;background:#dce8ff;border-radius:8px;color:#3d69dd}.notice>div:nth-child(2){flex:1;display:flex;flex-direction:column;gap:3px}.notice b{font-size:11px;color:#274c9d}.notice span{font-size:11px;color:#657b9a}.notice button,.link-button{display:flex;align-items:center;gap:5px;color:#3864cb;font-size:11px}.workspace-layout{display:grid;grid-template-columns:minmax(480px, 1.04fr) minmax(500px, 1.24fr);gap:18px;padding:18px 38px 34px}.setup-panel,.preview-panel{background:#fff;border:1px solid var(--line);border-radius:13px;min-width:0}.setup-panel{padding:25px 25px 21px}.panel-title,.preview-head,.page-heading{display:flex;justify-content:space-between;align-items:flex-start}.eyebrow{font:10px 'DM Mono',monospace;letter-spacing:.15em;color:#8b97a5}.panel-title h2,.preview-head h2{font-size:20px;margin:7px 0 0;letter-spacing:-.03em}.panel-help{color:#a4acb6}.step-block{padding:24px 0 23px;border-bottom:1px solid #edf0f2}.step-block:first-of-type{margin-top:11px}.step-block:last-of-type{border-bottom:0;padding-bottom:12px}.step-header{display:flex;gap:10px;align-items:flex-start;margin-bottom:15px}.step-index{width:24px;height:24px;border-radius:7px;background:#eef3ff;color:#2658e5;display:grid;place-items:center;font:10px 'DM Mono';margin-top:1px}.step-header h3{font-size:13px;margin:0;font-weight:700}.step-header p{margin:4px 0 0;color:#9aa3ad;font-size:10px}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.upload-box{height:146px;background:#fafbfc;border:1px dashed #cad2dc;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer}.upload-box:hover{border-color:#6b8cf5;background:#f7f9ff}.upload-box b{font-size:11px;margin:10px 0 4px}.upload-box>span:not(.uploaded-label){font-size:9px;color:#a3acb7}.upload-box em{position:absolute;top:9px;right:9px;font-size:9px;color:#a3a7ad;font-style:normal}.upload-icon{width:30px;height:30px;border-radius:8px;background:#e9efff;color:#3561e9;display:grid;place-items:center}.upload-box.has-image{border-style:solid;border-color:#d6deed;background:#eef1f5}.upload-box.has-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.78)}.upload-overlay{position:absolute;right:8px;top:8px;display:flex;gap:5px}.round-control{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#3c5fbe;box-shadow:0 2px 8px #0002}.round-control.danger{color:#e06372}.uploaded-label{position:absolute;bottom:8px;left:8px;background:#fff;color:#328c5d;font-size:9px;border-radius:20px;padding:4px 7px;display:flex;gap:3px;align-items:center;box-shadow:0 2px 8px #0001}.privacy-note{display:flex;align-items:center;gap:6px;color:#9ba4ae;font-size:9px;margin-top:10px}.privacy-note .icon{color:#60ad82}.select-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.select-field,.text-field{position:relative;display:block;background:#fafbfc;border:1px solid #e5e8eb;border-radius:8px;padding:9px 11px}.select-field:hover,.text-field:focus-within{border-color:#9cb2fb;background:#fff}.select-field span,.text-field span{display:block;color:#9aa3ad;font-size:9px;margin-bottom:5px}.select-field select{appearance:none;border:0;outline:0;background:transparent;width:100%;font-size:11px;color:#26313c}.select-field>.icon{position:absolute;right:10px;bottom:11px;color:#8e98a3;pointer-events:none}.field-row{display:flex;gap:10px;margin-top:10px}.text-field{flex:0 0 90px}.text-field.wide{flex:1}.text-field input{width:100%;border:0;outline:0;background:transparent;font-size:11px;color:#26313c}.text-field input::placeholder{color:#b1b7bf}.text-field small{position:absolute;right:11px;bottom:10px;color:#9aa3ad;font-size:10px}.text-field em{font-style:normal;color:#bdc1c6;margin-left:4px}.day-selector{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.day-selector button{height:40px;min-width:40px;border:1px solid #e4e8ed;border-radius:7px;background:#fff;color:#6d7681;font-size:11px;line-height:1}.day-selector button small{display:block;font-size:8px;color:#a5adb6;margin-top:4px}.day-selector button.selected{background:#2357f4;color:#fff;border-color:#2357f4;box-shadow:0 4px 10px #2357f426}.day-selector button.selected small{color:#dbe4ff}.day-selector .all-days{display:flex;align-items:center;gap:4px;border:0;color:#3d66cc;margin-left:auto;white-space:nowrap}.generate-button{width:100%;border-radius:9px;background:var(--blue);color:#fff;display:flex;justify-content:center;align-items:center;gap:10px;padding:14px;font-size:13px;font-weight:700;box-shadow:0 7px 14px #2357f32a;transition:.2s}.compliance-copy{font-size:9px;color:#aab1b9;line-height:1.7;text-align:center;margin:11px 0 0}.preview-panel{padding:25px 25px 17px;background:linear-gradient(145deg,#fff,#fbfcfd)}.preview-head{margin-bottom:20px}.preview-head p{font-size:10px;color:#99a2ad;margin:7px 0 0}.preview-actions{display:flex;gap:7px}.result-banner{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#f0faf4;border:1px solid #d8f0e1;border-radius:9px;margin-bottom:17px}.result-pulse{width:26px;height:26px;border-radius:50%;background:#d0f1dc;color:#259653;display:grid;place-items:center}.result-banner>div:nth-child(2){display:flex;flex-direction:column;gap:3px}.result-banner b{font-size:10px;color:#217d48}.result-banner span{font-size:9px;color:#6e9c7d}.result-time{margin-left:auto;color:#88a593!important}.preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.preview-card{text-align:left;padding:0;border:1px solid #e6e9ed;border-radius:10px;overflow:hidden;background:#fff;transition:.2s}.preview-card:hover,.preview-card.selected{border-color:#5a7af2;box-shadow:0 7px 18px #2a5bef16;transform:translateY(-1px)}.preview-image{height:190px;position:relative;background:#edf0f3;overflow:hidden}.preview-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.7);transition:.3s}.preview-card:hover img{transform:scale(1.025)}.card-badge{position:absolute;left:9px;top:9px;background:#171d27cc;color:#fff;border-radius:4px;padding:4px 6px;font:8px 'DM Mono'}.card-select{position:absolute;right:9px;top:9px;width:20px;height:20px;border:1px solid #ffffffaa;border-radius:50%;background:#ffffff55;color:#fff;display:grid;place-items:center}.preview-card.selected .card-select{background:#2357f4;border-color:#2357f4}.preview-meta{display:flex;align-items:center;justify-content:space-between;padding:10px 11px}.preview-meta b{font-size:11px}.preview-meta span{font-size:9px;color:#a0a8b2}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:230px;border:1px dashed #dfe4ea;border-radius:10px;margin-top:14px;color:#a2aab4}.empty-orbit{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;color:#6a89ee;background:#eff3ff;box-shadow:0 0 0 12px #f8f9ff;margin-bottom:18px}.empty-state b{font-size:13px;color:#636e7b}.empty-state span{font-size:10px;margin-top:6px}.preview-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eef0f2;padding-top:14px;margin-top:16px}.footer-stat{display:flex;align-items:center;gap:7px;color:#9ca5b0;font-size:9px}.footer-stat b{color:#ced3d9}.stat-dot{width:6px;height:6px;border-radius:50%;background:#5cc383}.cases-page,.history-page,.projects-page{padding:43px 38px}.page-heading h1{font-size:31px;letter-spacing:-.04em;margin:8px 0}.page-heading p{color:#8d97a3;font-size:12px;margin:0}.case-filter{display:flex;align-items:center;gap:5px;margin:36px 0 18px;border-bottom:1px solid var(--line);padding-bottom:13px}.case-filter button{padding:8px 13px;border-radius:7px;color:#87919e;font-size:12px}.case-filter button.active{background:#edf2ff;color:#2858dc;font-weight:700}.filter-search{margin-left:auto;color:#a4abb3;border:1px solid var(--line);padding:8px 13px;border-radius:7px;font-size:11px}.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.case-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.case-image{height:260px;position:relative;background:#e5e6e4}.case-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.75)}.case-image>span{position:absolute;left:12px;bottom:12px;border-radius:5px;padding:5px 7px;background:#101820d9;color:#fff;font-size:9px}.case-image>button{position:absolute;right:11px;top:11px;background:#ffffffdd;width:27px;height:27px;border-radius:7px;display:grid;place-items:center}.case-copy{padding:14px}.case-copy h3{font-size:13px;margin:0 0 13px}.case-copy>div{display:flex;justify-content:space-between;align-items:center;color:#a0a8b2;font-size:10px}.case-copy button{display:flex;gap:4px;align-items:center;color:#3c66d2;font-size:10px}.history-count{display:flex;align-items:baseline;gap:6px;color:#9199a4}.history-count b{font:26px 'DM Mono';color:#25303c}.history-count span{font-size:11px}.history-list{margin-top:38px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.history-row{display:grid;grid-template-columns:2fr 1fr 1fr .9fr .65fr;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid #eef0f2;font-size:11px;color:#7e8894}.history-row:last-child{border-bottom:0}.history-row.head{background:#fafbfc;color:#a2aab3;font-size:10px}.history-project{display:flex;align-items:center;gap:10px}.history-project img{width:35px;height:35px;border-radius:7px;object-fit:cover}.history-project div{display:flex;flex-direction:column;gap:4px}.history-project b{color:#303943;font-size:11px}.history-project span{font-size:9px;color:#abb2ba}.status-pill{display:flex;align-items:center;gap:5px;font-size:10px}.status-pill i{width:6px;height:6px;background:#51b97c;border-radius:50%}.row-action{display:flex;align-items:center;gap:4px;color:#3461ce;font-size:10px}.history-empty{padding:72px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;color:#a3abb5}.history-empty b{color:#5e6875;font-size:13px;margin-top:5px}.history-empty span{font-size:10px}.project-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:42px 0 20px}.project-summary>div{background:#fff;border:1px solid var(--line);border-radius:11px;padding:17px 20px;display:flex;flex-direction:column;gap:10px}.project-summary span{color:#8d98a4;font-size:11px}.project-summary b{font:25px 'DM Mono';color:#212d3a}.project-table{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.project-table-head,.project-line{display:grid;grid-template-columns:2.4fr 1fr .75fr .8fr;gap:14px;align-items:center;padding:14px 20px;border-bottom:1px solid #eef0f2;color:#a0a8b1;font-size:10px}.project-line{color:#7e8894;font-size:11px}.project-line:last-child{border-bottom:0}.project-title{display:flex;align-items:center;gap:10px}.project-title>div:nth-child(2){display:flex;flex-direction:column;gap:4px}.project-title b{font-size:12px;color:#2d3741}.project-title span{font-size:9px;color:#abb2ba}.project-icon{width:35px;height:35px;border-radius:8px;display:grid;place-items:center}.project-icon.p0{background:#eaf0ff;color:#3c65dc}.project-icon.p1{background:#f4eafa;color:#9453c4}.project-icon.p2{background:#fff0dc;color:#d48b38}
@media (max-width:1200px){.workspace-layout{grid-template-columns:1fr}.preview-grid{grid-template-columns:repeat(4,1fr)}.preview-image{height:150px}.case-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:800px){.sidebar{width:70px;padding:20px 10px}.logo-lockup{padding:0;justify-content:center}.logo-lockup>div:nth-child(2),.workspace-pill>div:nth-child(2),.workspace-pill>.icon,.nav-label,.nav-item span,.nav-item em,.credit-card,.profile>div:nth-child(2),.profile>.icon{display:none}.workspace-pill{justify-content:center;padding:10px}.nav-item{justify-content:center;padding:12px}.main-area{width:calc(100% - 70px);margin-left:70px}.topbar{padding:0 16px}.top-actions .status,.top-actions .icon-button{display:none}.notice{margin:15px 16px 0}.notice button{display:none}.workspace-layout,.cases-page,.history-page,.projects-page{padding:15px 16px 25px}.setup-panel,.preview-panel{padding:19px}.preview-grid{grid-template-columns:repeat(2,1fr)}.preview-image{height:180px}.case-grid{grid-template-columns:1fr}.history-row{grid-template-columns:1.8fr 1fr .8fr}.history-row>:nth-child(2),.history-row>:nth-child(3){display:none}.project-table-head,.project-line{grid-template-columns:2fr 1fr}.project-table-head>:nth-child(n+3),.project-line>:nth-child(n+3){display:none}}
@media (max-width:520px){.topbar{height:62px}.breadcrumbs span,.breadcrumbs i{display:none}.breadcrumbs{font-size:11px}.button.small{padding:8px}.setup-panel,.preview-panel{padding:15px}.select-grid{grid-template-columns:1fr}.field-row{flex-direction:column}.text-field{flex-basis:auto}.upload-grid{grid-template-columns:1fr}.upload-box{height:120px}.preview-head{display:block}.preview-actions{margin-top:15px}.preview-grid{grid-template-columns:1fr 1fr}.preview-image{height:130px}.preview-meta{display:block}.preview-meta span{display:block;margin-top:4px}.page-heading{display:block}.page-heading .button{margin-top:18px}.case-filter{overflow:auto;white-space:nowrap}.filter-search{display:none}.project-summary{gap:6px}.project-summary>div{padding:12px}.project-summary b{font-size:20px}}
.config-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d7e1f2;
  border-radius: 999px;
  padding: 6px 10px;
  color: #71809a;
  background: #f8faff;
  font-size: 12px;
  white-space: nowrap;
}

.config-chip.ok { color: #18815b; border-color: #bfe8d6; background: #f2fcf7; }
.page-error { margin: 16px 28px 0; }
.preview-actions { display: flex; gap: 10px; align-items: center; }
.video-button { color: #2558ef; border-color: #cddaff; background: #f3f6ff; }
.video-button svg { width: 15px; height: 15px; }
.result-banner { display: flex; align-items: center; gap: 8px; padding: 12px 14px; margin: 0 0 16px; border: 1px solid #cfe0ff; border-radius: 12px; color: #365da7; background: #f4f7ff; font-size: 13px; }
.result-dot { width: 7px; height: 7px; border-radius: 50%; background: #2d64ff; box-shadow: 0 0 0 4px #dce7ff; }
.preview-empty { min-height: 180px; border: 1px dashed #d9e2ef; border-radius: 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 9px; color: #8190a6; }
.preview-empty svg { width: 25px; height: 25px; color: #6e91fa; }
.preview-empty strong { color: #53647f; font-size: 14px; }
.preview-empty span { font-size: 12px; }
.generating-line { display: flex; align-items: center; gap: 8px; padding: 12px 0 0; color: #3761dc; font-size: 13px; }
.spinner { width: 13px; height: 13px; border: 2px solid #dce5ff; border-top-color: #3161f5; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.preview-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; color: #9aa6b8; font-size: 11px; }

.video-modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(14, 24, 40, .42); backdrop-filter: blur(5px); }
.video-modal { width: min(620px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #e0e7f1; border-radius: 18px; padding: 24px; background: #fff; box-shadow: 0 24px 80px rgba(30, 54, 90, .25); }
.video-modal-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.video-modal-head h2 { margin: 8px 0 5px; font-size: 24px; color: #17253d; }
.video-modal-head p { margin: 0; color: #7a899f; font-size: 13px; }
.video-modal-close { border: 0; width: 34px; height: 34px; border-radius: 50%; color: #64738a; background: #f4f6fa; font-size: 23px; cursor: pointer; }
.video-source { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid #e5eaf2; border-radius: 13px; background: #fafcff; }
.video-source img { width: 74px; height: 74px; object-fit: cover; border-radius: 9px; background: #eef2f7; }
.video-source div { display: grid; gap: 7px; }
.video-source strong { color: #263854; font-size: 13px; }
.video-source span, .modal-note { color: #8794a8; font-size: 12px; }
.video-form { display: grid; gap: 16px; margin-top: 18px; color: #34445e; font-size: 13px; }
.video-textarea { display: block; width: 100%; min-height: 96px; box-sizing: border-box; resize: vertical; margin-top: 8px; border: 1px solid #dbe3ee; border-radius: 10px; padding: 12px; outline: none; color: #34445e; font: inherit; line-height: 1.6; }
.video-textarea:focus, .video-options select:focus { border-color: #6c8ff8; box-shadow: 0 0 0 3px #edf2ff; }
.video-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.video-options label { display: grid; gap: 7px; }
.video-options select { width: 100%; border: 1px solid #dbe3ee; border-radius: 9px; padding: 10px; outline: none; color: #34445e; background: #fff; }
.video-modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 3px; }
.video-submit { min-width: 130px; }
.video-progress { display: grid; gap: 8px; color: #4465bd; font-size: 12px; }
.progress-track { overflow: hidden; height: 7px; border-radius: 99px; background: #edf1f7; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5d83ff, #2859ef); transition: width .4s ease; }
.api-error { border: 1px solid #ffd6d2; border-radius: 10px; padding: 10px 12px; color: #bc4d45; background: #fff6f5; font-size: 12px; line-height: 1.5; }
.video-result { display: grid; gap: 16px; margin-top: 18px; }
.video-result video { width: 100%; max-height: 420px; border-radius: 12px; background: #111827; }
.video-result-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 900px) {
  .preview-footer, .video-modal-foot { align-items: flex-start; flex-direction: column; }
  .preview-actions { flex-wrap: wrap; }
  .video-options { grid-template-columns: 1fr; }
}

.preview-card { position: relative; display: block; width: 100%; text-align: left; cursor: pointer; }
.preview-card:focus-visible { outline: 3px solid #b9caff; outline-offset: 2px; }
.card-toolbar { position: absolute; z-index: 2; top: 8px; right: 8px; display: flex; gap: 5px; opacity: 0; transform: translateY(-4px); transition: .18s ease; }
.preview-card:hover .card-toolbar, .preview-card.selected .card-toolbar { opacity: 1; transform: translateY(0); }
.card-toolbar button { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #ffffffb8; border-radius: 8px; color: #fff; background: #182338d9; box-shadow: 0 4px 10px #13203b2b; }
.card-toolbar button:hover { background: #315fe9; }
.card-toolbar .card-video-action { background: #398d80; }
.card-toolbar .card-video-action:hover { background: #267568; }

.image-editor-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 28px; background: #17203366; backdrop-filter: blur(7px); }
.image-editor-page { width: min(960px, 100%); max-height: calc(100vh - 56px); overflow: auto; border: 1px solid #e3ded5; border-radius: 22px; padding: 28px; background: #fffdf9; box-shadow: 0 28px 90px #2d3d3733; }
.image-editor-head { display: flex; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.image-editor-head h2 { margin: 8px 0 6px; color: #2d3d37; font-size: 26px; }
.image-editor-head p { margin: 0; color: #91a09a; font-size: 13px; }
.image-editor-grid { display: grid; grid-template-columns: minmax(300px, .95fr) minmax(340px, 1.05fr); gap: 24px; }
.image-editor-canvas { min-height: 430px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid #e3ded5; border-radius: 16px; background: #ece9e1; }
.image-editor-canvas img { width: 100%; height: 100%; max-height: 560px; object-fit: contain; }
.image-editor-canvas span { position: absolute; left: 12px; bottom: 12px; border-radius: 999px; padding: 6px 9px; color: #fff; background: #263a34c9; font-size: 11px; }
.image-editor-form { display: grid; align-content: start; gap: 14px; color: #344a42; }
.image-editor-form>div:first-child { display: grid; gap: 5px; }
.image-editor-form strong { font-size: 15px; }
.field-hint { color: #91a09a; font-size: 12px; }
.image-editor-form textarea { width: 100%; min-height: 180px; resize: vertical; border: 1px solid #ddd9d0; border-radius: 12px; padding: 14px; outline: none; color: #344a42; background: #fff; font: inherit; line-height: 1.7; }
.image-editor-form textarea:focus { border-color: #72aa9e; box-shadow: 0 0 0 3px #dff0eb; }
.editor-presets { display: grid; gap: 8px; }
.editor-presets>span { color: #91a09a; font-size: 11px; }
.editor-presets button, .video-prompt-presets button { padding: 9px 11px; border: 1px solid #e3ded5; border-radius: 9px; color: #56746b; background: #fff; text-align: left; font-size: 12px; }
.editor-presets button:hover, .video-prompt-presets button:hover { border-color: #72aa9e; color: #277768; background: #f2faf7; }
.editor-success { display: flex; align-items: center; gap: 7px; border: 1px solid #cde9dd; border-radius: 10px; padding: 10px 12px; color: #2c8a69; background: #f2fbf6; font-size: 12px; }
.image-editor-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-top: 10px; border-top: 1px solid #eee9e0; }
.image-editor-foot>span { max-width: 230px; color: #9aa8a1; font-size: 11px; line-height: 1.5; }
.image-editor-foot>div { display: flex; gap: 8px; }

.video-prompt-page { width: min(900px, 100%); }
.video-prompt-page .video-modal-head { margin-bottom: 22px; }
.video-prompt-presets { display: grid; gap: 8px; margin-top: -4px; }
.video-prompt-presets>span { color: #8794a8; font-size: 12px; }
.video-prompt-presets button { color: #4964a0; border-color: #dbe3ee; background: #fafcff; }
.video-prompt-page .video-form { margin-top: 18px; }
.video-prompt-page .video-form>label { display: grid; gap: 8px; }

@media (max-width: 720px) {
  .image-editor-backdrop { padding: 12px; }
  .image-editor-page { padding: 18px; border-radius: 16px; }
  .image-editor-grid { grid-template-columns: 1fr; }
  .image-editor-canvas { min-height: 260px; max-height: 360px; }
  .image-editor-foot { align-items: stretch; flex-direction: column; }
  .image-editor-foot>div { justify-content: flex-end; }
  .video-prompt-page { padding: 18px; }
}

.task-center { margin: 18px 0; border: 1px solid #dfe6ef; border-radius: 12px; color: #42526b; background: #fff; }
.task-center.compact { flex: 0 0 auto; margin: 9px 38px 0; }
.task-center summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; cursor: pointer; list-style: none; }
.task-center summary::-webkit-details-marker { display: none; }
.task-center summary>span { display: flex; align-items: center; gap: 7px; }
.task-center summary strong { font-size: 12px; }
.task-center summary em { border-radius: 999px; padding: 3px 7px; color: #236e5d; background: #e8f5f0; font-size: 10px; font-style: normal; }
.task-center summary small { color: #8a97aa; font-size: 10px; }
.task-list { display: grid; border-top: 1px solid #e7ebf1; }
.task-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid #edf0f4; }
.task-item:last-child { border-bottom: 0; }
.task-type { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #356c61; background: #edf6f2; }
.task-item>div { min-width: 0; display: grid; gap: 3px; }
.task-item>div strong, .task-item>div small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-item>div strong { font-size: 11px; }
.task-item>div small, .task-time { color: #8a97aa; font-size: 9px; }
.task-item>b { color: #607189; font-size: 10px; }
.task-item.completed>b { color: #288067; }
.task-item.error>b, .task-item.error small { color: #b9544d; }
.task-empty { padding: 14px; color: #8a97aa; font-size: 11px; }

.preview-workbench.full-preview { grid-template-columns: minmax(0, 1fr); }
.preview-workbench.video-composer-open { grid-template-columns: minmax(0, 1fr) minmax(260px, 310px); }
.video-composer { min-width: 0; overflow-y: auto; border: 1px solid #dfe5ed; border-radius: 11px; padding: 13px; color: #34445e; background: #fafcff; }
.video-composer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.video-composer-head h3 { margin: 5px 0 0; font-size: 16px; }
.video-composer .video-source { padding: 8px; }
.video-composer .video-source img { width: 52px; height: 52px; }
.video-composer .video-form { gap: 12px; margin-top: 12px; }
.video-composer .video-textarea { min-height: 112px; }
.video-preprocess-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; border: 0; padding: 0; }
.video-preprocess-modes legend { grid-column: 1 / -1; margin-bottom: 7px; color: #8794a8; font-size: 12px; }
.video-preprocess-modes button { display: grid; gap: 3px; border: 1px solid #dbe3ee; border-radius: 9px; padding: 9px; color: #5a6d88; background: #fff; text-align: left; }
.video-preprocess-modes button strong { font-size: 11px; }
.video-preprocess-modes button span { font-size: 9px; line-height: 1.35; }
.video-preprocess-modes button.active { border-color: #398d80; color: #276d61; background: #edf8f4; box-shadow: inset 0 0 0 1px #398d80; }
.video-composer .video-options { gap: 6px; }
.video-composer .video-options select { padding: 8px 5px; font-size: 10px; }
.video-composer .video-modal-foot { align-items: stretch; flex-direction: column; }
.video-composer .video-submit { width: 100%; }

@media (max-width: 900px) {
  .task-center.compact { margin-inline: 16px; }
  .preview-workbench.video-composer-open { grid-template-columns: 1fr; }
  .video-composer { max-height: none; }
}
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(440px, 1.08fr) minmax(440px, .92fr);
  overflow: hidden;
  background: #f5f1e9;
}

.auth-story {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 46px 62px 38px;
  color: #f4fbf8;
  background:
    radial-gradient(circle at 74% 54%, #477268 0, #314e47 19%, transparent 45%),
    linear-gradient(145deg, #1f302c 0%, #263d37 52%, #1b2b27 100%);
}

.auth-story::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(#fff0 96%, #ffffff09 96%), linear-gradient(90deg, #fff0 96%, #ffffff09 96%);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #0009, transparent 72%);
}

.auth-brand,
.auth-story-copy,
.auth-footnote { position: relative; z-index: 2; }
.auth-brand { display: flex; align-items: center; justify-content: space-between; }
.auth-brand .logo-lockup strong { color: #fff; }
.auth-brand .logo-lockup small { color: #9fc4b9; }
.auth-brand>span { color: #8fb1a8; font-size: 9px; letter-spacing: .19em; }
.auth-story-copy { max-width: 570px; margin-top: clamp(68px, 10vh, 116px); }
.auth-kicker { color: #8ec4b5; font-size: 10px; letter-spacing: .2em; }
.auth-story h1 { margin: 20px 0 17px; color: #f8fbf9; font-family: Georgia, 'Noto Serif SC', serif; font-size: clamp(43px, 5vw, 67px); font-weight: 500; line-height: 1.12; letter-spacing: -.05em; }
.auth-story-copy p { max-width: 480px; margin: 0; color: #a7bbb5; font-size: 14px; line-height: 1.9; }

.auth-visual { width: min(500px, 78%); aspect-ratio: 1.65; position: relative; z-index: 1; margin: auto 0 22px auto; }
.auth-orbit { position: absolute; border: 1px solid #a7d1c533; border-radius: 50%; }
.orbit-one { inset: 4% 4% 0 9%; transform: rotate(-10deg); }
.orbit-two { inset: 18% 14% 8% 0; transform: rotate(14deg); }
.auth-core { width: 190px; height: 116px; position: absolute; left: 48%; top: 48%; display: grid; place-items: center; align-content: center; gap: 8px; transform: translate(-50%, -50%); border: 1px solid #b4d8ce42; border-radius: 30px; color: #dff1eb; background: #34574eaa; box-shadow: 0 20px 70px #07120f55, inset 0 1px #ffffff18; backdrop-filter: blur(12px); }
.auth-core b { font-size: 14px; }
.auth-core span { color: #93bcb0; font-size: 9px; }
.auth-metric { position: absolute; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; border: 1px solid #b4d8ce28; border-radius: 999px; padding: 8px 13px 8px 8px; color: #cfe8e0; background: #233b35c7; backdrop-filter: blur(10px); }
.auth-metric span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #1f3a33; background: #9bcdbf; font-size: 8px; }
.auth-metric b { font-size: 10px; font-weight: 600; }
.metric-one { left: 4%; top: 18%; }
.metric-two { right: 0; top: 14%; }
.metric-three { right: 6%; bottom: 8%; }
.auth-footnote { display: flex; align-items: center; gap: 8px; color: #8eaaa2; font-size: 10px; }

.auth-entry { min-height: 100vh; display: grid; place-items: center; padding: 56px clamp(42px, 7vw, 100px); background: linear-gradient(145deg, #fbf8f2, #f1ece3); }
.auth-card { width: min(430px, 100%); }
.auth-card-heading>span { color: #77958c; font-size: 9px; letter-spacing: .19em; }
.auth-card-heading h2 { margin: 14px 0 8px; color: #263933; font-family: Georgia, 'Noto Serif SC', serif; font-size: 31px; font-weight: 600; letter-spacing: -.035em; }
.auth-card-heading p { margin: 0 0 35px; color: #89978f; font-size: 11px; line-height: 1.7; }
.auth-card form { display: grid; gap: 17px; }
.auth-field { display: grid; gap: 8px; }
.auth-field>span { color: #566c65; font-size: 10px; font-weight: 700; }
.auth-field>div { min-height: 52px; display: flex; align-items: center; overflow: hidden; border: 1px solid #ded9cf; border-radius: 11px; color: #536a62; background: #fffdf9; box-shadow: 0 5px 20px #4d3b2407; transition: border-color .2s, box-shadow .2s; }
.auth-field>div:focus-within { border-color: #6ca99a; box-shadow: 0 0 0 3px #6ca99a18; }
.auth-field b { padding: 0 14px; border-right: 1px solid #e8e3da; font-size: 11px; }
.auth-field input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 0 15px; color: #273a34; background: transparent; font: inherit; font-size: 13px; }
.auth-field input::placeholder { color: #acb4ae; }
.auth-field .captcha-row { display: grid; grid-template-columns: 1fr 146px; }
.captcha-image { width: 146px; height: 52px; overflow: hidden; border-left: 1px solid #e4ded5; background: #eef4f0; }
.captcha-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.captcha-loading { height: 52px; padding: 0 14px; color: #3b8071; font-size: 10px; }
.auth-field .sms-row { display: grid; grid-template-columns: 1fr auto; }
.sms-row button { height: 34px; margin-right: 8px; border-radius: 8px; padding: 0 13px; color: #2d756b; background: #e4f1ed; font-size: 10px; font-weight: 700; white-space: nowrap; }
.sms-row button:disabled { color: #93a19c; background: #f0efeb; cursor: not-allowed; }
.auth-message { display: flex; align-items: flex-start; gap: 8px; border-radius: 9px; padding: 10px 12px; font-size: 10px; line-height: 1.55; }
.auth-message.success { border: 1px solid #cce3d9; color: #39796a; background: #eef7f3; }
.auth-message.error { border: 1px solid #ebd1cd; color: #9c514b; background: #fcf1ef; }
.auth-message .icon { flex: 0 0 auto; margin-top: 1px; }
.auth-submit { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; border-radius: 11px; color: #fff; background: #337f72; box-shadow: 0 12px 25px #337f7228; font-size: 12px; font-weight: 700; transition: transform .2s, background .2s; }
.auth-submit:hover:not(:disabled) { transform: translateY(-1px); background: #286c61; }
.auth-submit:disabled { opacity: .65; cursor: wait; }
.auth-mode-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.auth-mode-actions .auth-mode-switch { min-height: 36px; margin: 0; border: 1px solid #d8ddd8; border-radius: 9px; padding: 7px 10px; background: #f7f8f5; }
.auth-mode-actions .auth-mode-switch.secondary { color: #76847f; background: transparent; }
.auth-mode-actions .auth-mode-switch:only-child { grid-column: 1 / -1; }
.auth-trust { display: flex; align-items: flex-start; gap: 7px; margin-top: 18px; color: #919d97; font-size: 9px; line-height: 1.6; }
.auth-trust .icon { flex: 0 0 auto; margin-top: 1px; color: #6f9489; }

.auth-loading { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 18px; color: #7d8d86; background: #f5f1e9; }
.auth-loading>span { width: 70px; height: 2px; position: relative; overflow: hidden; border-radius: 99px; background: #dce2dd; }
.auth-loading>span::after { content: ''; width: 28px; height: 100%; position: absolute; left: -28px; background: #398d80; animation: auth-progress 1.1s infinite ease-in-out; }
.auth-loading p { margin: 0; font-size: 10px; letter-spacing: .08em; }
@keyframes auth-progress { to { transform: translateX(98px); } }

.profile-logout { width: 31px; height: 31px; display: grid; place-items: center; margin-left: auto; border-radius: 8px; color: #94aaa3; transform: rotate(180deg); }
.profile-logout:hover { color: #e6f3ef; background: #334b44; }

@media (max-width: 920px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-story { min-height: 390px; padding: 34px 34px 26px; }
  .auth-story-copy { margin-top: 54px; }
  .auth-story h1 { font-size: 42px; }
  .auth-story-copy p { max-width: 540px; }
  .auth-visual { display: none; }
  .auth-footnote { margin-top: auto; }
  .auth-entry { min-height: auto; padding: 54px 26px 70px; }
}

@media (max-width: 520px) {
  .auth-story { min-height: 330px; padding: 28px 22px 23px; }
  .auth-brand>span { display: none; }
  .auth-story-copy { margin-top: 45px; }
  .auth-story h1 { font-size: 35px; }
  .auth-story-copy p { font-size: 12px; }
  .auth-entry { padding: 43px 20px 58px; }
  .auth-card-heading h2 { font-size: 27px; }
  .auth-field .captcha-row { grid-template-columns: minmax(0, 1fr) 128px; }
  .captcha-image { width: 128px; }
  .auth-mode-actions { grid-template-columns: 1fr; }
  .auth-mode-actions .auth-mode-switch:only-child { grid-column: auto; }
}
/* Mobile experience — single-screen login, centered function hub and fixed primary actions. */
.auth-page { display: block; }
.auth-slides {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(440px, 1.08fr) minmax(440px, .92fr);
  grid-template-areas: "story entry";
}

.auth-story { grid-area: story; }
.auth-entry { grid-area: entry; }
.auth-slide-nav,
.mobile-hub,
.mobile-workspace-menu,
.mobile-bottom-nav,
.mobile-generate-button { display: none; }

@media (max-width: 800px) {
  html,
  body,
  #root { min-height: 100%; }

  body { overflow-x: hidden; }

  .auth-page {
    width: 100%;
    min-height: 100dvh;
    overflow: hidden;
    display: block;
    background: #f8f5ee;
  }

  .auth-slides {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  .auth-slides::-webkit-scrollbar { display: none; }

  .auth-entry,
  .auth-story {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .auth-entry {
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: max(24px, env(safe-area-inset-top)) 22px max(72px, calc(env(safe-area-inset-bottom) + 64px));
    background:
      radial-gradient(circle at 86% 8%, #d9eee7 0, transparent 27%),
      linear-gradient(155deg, #fffdf8 0%, #f4f0e7 100%);
  }

  .auth-card { width: min(430px, 100%); }
  .auth-card-heading>span { font-size: 10px; letter-spacing: .16em; }
  .auth-card-heading h2 { margin: 10px 0 5px; font-size: clamp(28px, 8vw, 34px); line-height: 1.15; }
  .auth-card-heading p { margin: 0 0 19px; font-size: 13px; line-height: 1.55; }
  .auth-card form { gap: 12px; }
  .auth-field { gap: 6px; }
  .auth-field>span { font-size: 13px; }
  .auth-field>div { min-height: 50px; border-radius: 14px; }
  .auth-field b { padding: 0 14px; font-size: 15px; }
  .auth-field input { padding: 0 14px; font-size: 16px; }
  .auth-field .captcha-row { grid-template-columns: minmax(0, 1fr) 126px; }
  .captcha-image { width: 126px; height: 50px; }
  .captcha-loading { height: 50px; font-size: 12px; }
  .sms-row button { height: 38px; margin-right: 6px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
  .auth-message { padding: 8px 10px; font-size: 12px; }
  .auth-submit { min-height: 52px; margin-top: 1px; border-radius: 14px; font-size: 16px; }
  .auth-trust { margin-top: 12px; font-size: 11px; }

  .auth-story {
    padding: max(30px, env(safe-area-inset-top)) 26px max(76px, calc(env(safe-area-inset-bottom) + 66px));
    background:
      radial-gradient(circle at 75% 45%, #477268 0, #314e47 18%, transparent 48%),
      linear-gradient(145deg, #1f302c 0%, #263d37 52%, #1b2b27 100%);
  }

  .auth-story-copy { margin-top: clamp(68px, 14vh, 118px); }
  .auth-story h1 { margin: 20px 0 18px; font-size: clamp(38px, 11vw, 48px); }
  .auth-story-copy p { font-size: 15px; line-height: 1.85; }
  .auth-footnote { margin-top: auto; font-size: 12px; }
  .auth-brand>span { display: block; }

  .auth-slide-nav {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
    border: 1px solid #d6e3de;
    border-radius: 999px;
    padding: 5px;
    background: #fffdf5e8;
    box-shadow: 0 10px 28px #18332d1c;
    backdrop-filter: blur(14px);
  }

  .auth-slide-nav button {
    min-width: 62px;
    height: 34px;
    border-radius: 999px;
    color: #70827b;
    font-size: 12px;
    font-weight: 700;
  }

  .auth-slide-nav button.active { color: #fff; background: #2f8e7f; }

  .app-shell { min-height: 100dvh; display: block; padding-bottom: 82px; background: #f7f4ed; }
  .app-shell>.sidebar { display: none; }
  .main-area { width: 100%; min-width: 0; margin-left: 0 !important; }

  .topbar {
    min-height: 64px;
    position: sticky;
    z-index: 18;
    top: 0;
    padding: 0 18px;
    border-bottom: 1px solid #e5e0d7;
    background: #fffdf8e8;
    backdrop-filter: blur(16px);
  }

  .breadcrumbs { display: block; }
  .breadcrumbs>span,
  .breadcrumbs>i { display: none; }
  .breadcrumbs strong { color: #203831; font-size: 19px; }
  .top-actions .status,
  .top-actions .icon-button { display: none; }
  .topbar .top-actions .button.primary.small { width: auto; min-width: 112px; min-height: 42px; flex: 0 0 auto; display: inline-flex; border-radius: 12px; padding: 0 15px; font-size: 14px; white-space: nowrap; }

  .mobile-hub {
    min-height: calc(100dvh - 146px);
    display: grid;
    align-content: center;
    gap: 24px;
    padding: 24px 18px 26px;
    background:
      radial-gradient(circle at 96% 3%, #d9eee7 0, transparent 28%),
      linear-gradient(180deg, #fbf8f2 0%, #f3efe6 100%);
  }

  .mobile-hub>header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
  .mobile-hub>header>div:first-child { min-width: 0; }
  .mobile-hub>header span { color: #5f8b80; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .14em; }
  .mobile-hub h1 { margin: 8px 0 6px; color: #1c352e; font-family: Georgia, 'Noto Serif SC', serif; font-size: clamp(28px, 8vw, 36px); line-height: 1.18; }
  .mobile-hub header p { margin: 0; color: #84948e; font-size: 13px; }
  .mobile-avatar { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #a9cfc5; border-radius: 16px; color: #fff; background: #2f8e7f; font-size: 18px; font-weight: 700; box-shadow: 0 9px 22px #2f8e7f24; }

  .mobile-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mobile-hub-grid>button {
    min-width: 0;
    min-height: 164px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden;
    border: 1px solid #dcded6;
    border-radius: 22px;
    padding: 18px;
    color: #1d3932;
    background: #fffdf9;
    text-align: left;
    box-shadow: 0 12px 30px #283a330b;
  }

  .mobile-hub-grid>button:first-child { color: #fff; border-color: #244f45; background: linear-gradient(150deg, #24463e, #2f7568); }
  .mobile-module-index { position: absolute; right: 15px; top: 13px; color: #829c94; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; }
  .mobile-hub-grid>button:first-child .mobile-module-index,
  .mobile-hub-grid>button:first-child small { color: #b9d9d0; }
  .mobile-module-icon { width: 48px; height: 48px; position: absolute; left: 17px; top: 18px; display: grid; place-items: center; border-radius: 15px; color: #2f8e7f; background: #e9f4f0; }
  .mobile-hub-grid>button:first-child .mobile-module-icon { color: #ecfffa; background: #ffffff17; }
  .mobile-hub-grid strong { font-size: 18px; line-height: 1.3; }
  .mobile-hub-grid small { max-width: calc(100% - 14px); margin-top: 5px; overflow: hidden; color: #81918b; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-module-arrow { position: absolute; right: 15px; bottom: 20px; color: currentColor; opacity: .7; }
  .mobile-hub-note { margin: 0; color: #788a83; font-size: 12px; line-height: 1.65; text-align: center; }

  .mobile-workspace-menu {
    min-height: calc(100dvh - 146px);
    align-content: center;
    gap: 20px;
    padding: 26px 18px 28px;
    background:
      radial-gradient(circle at 92% 4%, #dcefe9 0, transparent 27%),
      linear-gradient(180deg, #fbf9f4 0%, #f3efe7 100%);
  }

  .mobile-workspace-menu-open .mobile-workspace-menu { display: grid; }
  .mobile-workspace-menu-open .workspace-long-content { display: none; }
  .mobile-workspace-menu header>span { color: #5f8b80; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .14em; }
  .mobile-workspace-menu h1 { max-width: 350px; margin: 8px 0 7px; color: #1d372f; font-family: Georgia, 'Noto Serif SC', serif; font-size: clamp(27px, 7.5vw, 34px); line-height: 1.22; }
  .mobile-workspace-menu header p { margin: 0; color: #81918b; font-size: 13px; line-height: 1.55; }

  .mobile-workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .mobile-workspace-grid>button {
    min-width: 0;
    min-height: 118px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    overflow: hidden;
    border: 1px solid #dcded7;
    border-radius: 19px;
    padding: 15px;
    color: #203b33;
    background: #fffdf9;
    text-align: left;
    box-shadow: 0 10px 26px #20352d0a;
  }

  .mobile-workspace-grid>button:first-child { color: #fff; border-color: #2d786b; background: linear-gradient(145deg, #2a655a, #329080); }
  .mobile-workspace-grid>button:last-child { min-height: 92px; grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding-right: 42px; }
  .workspace-module-icon { width: 40px; height: 40px; position: absolute; left: 14px; top: 14px; display: grid; place-items: center; border-radius: 13px; color: #2f8e7f; background: #e9f4f0; }
  .mobile-workspace-grid>button:first-child .workspace-module-icon { color: #ecfffa; background: #ffffff19; }
  .mobile-workspace-grid>button:last-child .workspace-module-icon { position: static; grid-row: 1; }
  .workspace-module-copy { min-width: 0; display: grid; gap: 3px; }
  .workspace-module-copy strong { font-size: 16px; line-height: 1.3; }
  .workspace-module-copy small { overflow: hidden; color: #85938e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-workspace-grid>button:first-child .workspace-module-copy small { color: #c0ded6; }
  .workspace-module-state { position: absolute; right: 13px; top: 12px; color: #91a29c; font-family: 'DM Mono', monospace; font-size: 10px; }
  .workspace-module-state.ready { color: #48a391; }
  .mobile-workspace-grid>button:first-child .workspace-module-state { color: #c8e8df; }
  .mobile-workspace-grid>button:last-child .workspace-module-state { top: 15px; }
  .workspace-module-arrow { position: absolute; right: 14px; bottom: 16px; opacity: .65; }
  .mobile-workspace-grid>button:last-child .workspace-module-arrow { bottom: 37px; }
  .mobile-workspace-compliance { display: flex; align-items: center; justify-content: center; gap: 7px; color: #758981; font-size: 11px; line-height: 1.5; text-align: center; }

  .mobile-content-shell { display: block; }
  .app-shell.mobile-workspace-menu-open .mobile-content-shell,
  .app-shell[class*="mobile-workspace-step-"] .mobile-content-shell { padding-bottom: 0; }
  .app-shell:not(.mobile-hub-open) .mobile-hub { display: none; }
  .mobile-hub-open .mobile-content-shell { display: none; }
  .mobile-hub-open .top-actions { visibility: hidden; }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 32;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    height: 68px;
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    border: 1px solid #dfe4de;
    border-radius: 22px;
    padding: 6px;
    background: #fffdf8ef;
    box-shadow: 0 18px 45px #162a2430;
    backdrop-filter: blur(18px);
  }

  .mobile-bottom-nav button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 16px; color: #73847e; font-size: 12px; font-weight: 700; }
  .mobile-bottom-nav button:nth-child(2) { flex-direction: column; gap: 2px; color: #2f7568; }
  .mobile-bottom-nav button:nth-child(2) span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-bottom-nav button.active { color: #fff; background: #24463e; }
  .mobile-bottom-nav button:disabled { opacity: .34; cursor: not-allowed; }

  .mobile-generate-button {
    position: fixed;
    z-index: 31;
    left: 18px;
    right: 18px;
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 82px));
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 17px;
    color: #fff;
    background: #2f8e7f;
    box-shadow: 0 14px 34px #2f8e7f4a;
    font-size: 17px;
    font-weight: 800;
  }

  .mobile-generate-button:disabled { opacity: .72; }
  .setup-panel>.generate-button { display: none; }
  .mobile-content-shell:has(.workspace-grid) { padding-bottom: 76px; }

  .notice { margin: 14px 14px 0; padding: 16px; border-radius: 17px; }
  .notice strong { font-size: 16px; }
  .notice p { margin-top: 4px; font-size: 13px; line-height: 1.6; }
  .notice .config-chip { display: none; }
  .workspace-grid { padding: 14px 14px 32px; gap: 14px; }
  .app-shell[class*="mobile-workspace-step-"] .notice { display: none; }
  .app-shell[class*="mobile-workspace-step-"] .workspace-grid { min-height: calc(100dvh - 146px); align-items: start; padding-top: 14px; }
  .app-shell[class*="mobile-workspace-step-"] .setup-panel>.panel-title { display: none; }
  .app-shell[class*="mobile-workspace-step-"] .setup-panel>.step-block { display: none; margin: 0; padding: 0; border: 0; }
  .mobile-workspace-step-0 .setup-panel>.step-block[data-step="0"],
  .mobile-workspace-step-1 .setup-panel>.step-block[data-step="1"],
  .mobile-workspace-step-2 .setup-panel>.step-block[data-step="2"],
  .mobile-workspace-step-3 .setup-panel>.step-block[data-step="3"] { display: block; }
  .mobile-workspace-step-0 .preview-panel,
  .mobile-workspace-step-1 .preview-panel,
  .mobile-workspace-step-2 .preview-panel,
  .mobile-workspace-step-3 .preview-panel { display: none; }
  .mobile-workspace-step-4 .setup-panel { display: none; }
  .app-shell[class*="mobile-workspace-step-"] .action-notice,
  .app-shell[class*="mobile-workspace-step-"] .page-error { margin: 12px 14px 0; }
  .setup-panel,
  .preview-panel,
  .cases-page,
  .projects-page,
  .history-page { border-radius: 20px; }
  .setup-panel,
  .preview-panel { padding: 20px 16px; }
  .panel-title h2,
  .panel-heading h2 { font-size: 25px; line-height: 1.25; }
  .panel-title p,
  .panel-heading p { font-size: 13px; line-height: 1.55; }
  .step-header { gap: 12px; }
  .step-index { width: 42px; height: 42px; font-size: 14px; }
  .step-header h3 { font-size: 18px; }
  .step-header p { margin-top: 4px; font-size: 13px; line-height: 1.55; }
  .upload-grid { grid-template-columns: 1fr; gap: 12px; }
  .upload-box { height: 178px; border-radius: 17px; }
  .upload-box b { font-size: 17px; }
  .upload-box span { font-size: 13px; }
  .project-category-grid { gap: 9px; }
  .project-category-grid button { min-height: 44px; border-radius: 12px; font-size: 14px; }
  .mobile-workspace-step-1 .project-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .mobile-workspace-step-1 .project-select-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mobile-workspace-step-1 .field-row { display: grid; grid-template-columns: 1fr 90px; gap: 8px; }
  .mobile-workspace-step-1 .field-row .wide { grid-column: 1 / -1; }
  .select-field>span,
  .text-field>span { font-size: 13px; }
  .select-field select,
  .text-field input { min-height: 46px; font-size: 15px; }
  .day-selector button { min-width: 60px; min-height: 64px; border-radius: 14px; font-size: 16px; }
  .output-option-grid>button { min-height: 76px; border-radius: 15px; padding: 14px; }
  .output-option-grid b { font-size: 16px; }
  .output-option-grid small { font-size: 12px; }
  .compliance-copy { padding-bottom: 4px; font-size: 12px; line-height: 1.7; }
  .page-heading h1 { font-size: 28px; }
  .page-heading p { font-size: 13px; }
  .cases-page,
  .projects-page,
  .history-page { margin: 14px; padding: 18px 16px; }

  /* Mobile pages use the viewport as a fixed consultation canvas. Dense choices
     move sideways; the user never has to hunt for a primary action below fold. */
  .app-shell:not(.mobile-hub-open) { height: 100dvh; min-height: 100dvh; overflow: hidden; }
  .app-shell[class*="mobile-workspace-step-"] .workspace-grid {
    height: calc(100dvh - 146px);
    min-height: 0;
    overflow: hidden;
    padding: 10px 12px 8px;
  }
  .app-shell[class*="mobile-workspace-step-"] .setup-panel,
  .mobile-workspace-step-4 .preview-panel { height: 100%; overflow: hidden; }
  .app-shell[class*="mobile-workspace-step-"] .setup-panel { padding: 15px 14px; }
  .app-shell[class*="mobile-workspace-step-"] .step-header { margin-bottom: 10px; }
  .app-shell[class*="mobile-workspace-step-"] .step-index { width: 36px; height: 36px; }
  .app-shell[class*="mobile-workspace-step-"] .step-header h3 { font-size: 17px; }
  .app-shell[class*="mobile-workspace-step-"] .step-header p { font-size: 11px; line-height: 1.35; }

  .mobile-workspace-step-0 .upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .mobile-workspace-step-0 .upload-box { height: min(48dvh, 330px); border-radius: 15px; }
  .mobile-workspace-step-0 .upload-box b { font-size: 15px; }
  .mobile-workspace-step-0 .upload-box>span:not(.uploaded-label) { padding: 0 8px; font-size: 10px; text-align: center; }
  .mobile-workspace-step-0 .privacy-note { margin-top: 8px; }

  .mobile-workspace-step-1 .project-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .mobile-workspace-step-1 .project-category-grid button { min-height: 43px; padding: 8px 4px; border-radius: 11px; font-size: 13.5px; font-weight: 800; }
  .mobile-workspace-step-1 .project-category-grid button.selected { font-size: 14px; }
  .mobile-workspace-step-1 .project-category-grid button.selected::after { top: 6px; right: 6px; width: 4px; height: 4px; }
  .mobile-workspace-step-1 .project-select-grid { gap: 6px; }
  .mobile-workspace-step-1 .select-field,
  .mobile-workspace-step-1 .text-field { padding: 7px 9px; }
  .mobile-workspace-step-1 .select-field>span,
  .mobile-workspace-step-1 .text-field>span { margin-bottom: 2px; font-size: 10px; }
  .mobile-workspace-step-1 .select-field select,
  .mobile-workspace-step-1 .text-field input { min-height: 32px; font-size: 13px; }
  .mobile-workspace-step-1 .project-select-grid .select-field>span { font-size: 10.5px; font-weight: 750; }
  .mobile-workspace-step-1 .project-select-grid .select-field select { font-size: 14px; font-weight: 800; }
  .mobile-workspace-step-1 .step-header h3::after { padding: 2px 5px; font-size: 7px; }
  .mobile-workspace-step-1 .field-row { margin-top: 6px; }

  .mobile-workspace-step-2 .day-selector {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    overflow: visible;
    gap: 4px;
    padding: 4px 1px 10px;
  }
  .mobile-workspace-step-2 .day-selector button { min-width: 0; min-height: 62px; width: 100%; padding: 4px 1px; font-size: 13px; }
  .mobile-workspace-step-2 .day-selector .all-days { min-width: 0; margin-left: 0; justify-content: center; font-size: 10px; white-space: normal; }
  .mobile-workspace-step-2 .day-selector .all-days .icon { display: none; }

  .mobile-workspace-step-3 .output-option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mobile-workspace-step-3 .output-option-grid>button {
    min-height: 154px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 10px;
  }
  .mobile-workspace-step-3 .output-option-grid>button>span { white-space: normal; }
  .mobile-workspace-step-3 .output-option-grid b { font-size: 14px; }
  .mobile-workspace-step-3 .output-option-grid small { overflow: visible; font-size: 10px; line-height: 1.4; text-overflow: clip; white-space: normal; }

  .mobile-workspace-step-4 .workspace-grid { padding-bottom: 80px; }
  .mobile-workspace-step-4 .preview-panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
  }
  .mobile-workspace-step-4 .preview-heading { min-height: 42px; display: flex; align-items: center; margin: 0; }
  .mobile-workspace-step-4 .preview-heading .eyebrow,
  .mobile-workspace-step-4 .preview-heading p { display: none; }
  .mobile-workspace-step-4 .preview-heading h2 { margin: 0; font-size: 19px; }
  .mobile-workspace-step-4 .preview-heading .preview-actions { margin: 0 0 0 auto; gap: 5px; }
  .mobile-workspace-step-4 .preview-actions .button { min-height: 34px; padding: 7px 9px; font-size: 10px; }
  .mobile-workspace-step-4 .result-banner { min-height: 32px; margin: 0; padding: 7px 9px; font-size: 10px; }
  .mobile-workspace-step-4 .preview-mode-tabs { flex: 0 0 auto; margin: 0; }
  .mobile-workspace-step-4 .preview-mode-tabs button { padding: 7px 6px; }
  .mobile-workspace-step-4 .preview-grid,
  .mobile-workspace-step-4 .comparison-stage,
  .mobile-workspace-step-4 .video-preview-stage,
  .mobile-workspace-step-4 .preview-empty { min-height: 0; flex: 1; overflow: hidden; }
  .mobile-workspace-step-4 .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .mobile-workspace-step-4 .preview-card { min-height: 0; }
  .mobile-workspace-step-4 .preview-image { height: clamp(110px, 18dvh, 150px); }
  .mobile-workspace-step-4 .preview-meta { padding: 7px 8px; }
  .mobile-workspace-step-4 .preview-meta b { font-size: 10px; }
  .mobile-workspace-step-4 .preview-meta span { display: none; }
  .mobile-workspace-step-4 .comparison-stage { gap: 7px; }
  .mobile-workspace-step-4 .comparison-canvas { min-height: 0; height: 100%; }
  .mobile-workspace-step-4 .result-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .mobile-workspace-step-4 .result-picker img { height: 38px; }
  .mobile-workspace-step-4 .video-preview-stage {
    grid-template-columns: minmax(105px, .72fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px;
  }
  .mobile-workspace-step-4 .video-preview-stage video,
  .mobile-workspace-step-4 .video-poster { width: min(100%, 145px); max-height: 100%; }
  .mobile-workspace-step-4 .video-preview-stage>div:last-child { justify-items: start; text-align: left; }
  .mobile-workspace-step-4 .preview-footer { display: none; }

  .video-modal-backdrop,
  .image-editor-backdrop,
  .client-preview-backdrop { z-index: 70; padding: 8px; }
  .video-modal.video-prompt-page {
    width: 100%;
    height: calc(100dvh - 16px);
    max-height: none;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 22px;
    padding: 14px;
  }
  .video-prompt-page .video-modal-head { align-items: center; margin: 0 0 8px; }
  .video-prompt-page .video-modal-head .eyebrow,
  .video-prompt-page .video-modal-head p { display: none; }
  .video-prompt-page .video-modal-head h2 { margin: 0; font-size: 22px; }
  .video-prompt-page .video-modal-close { width: 36px; height: 36px; flex: 0 0 auto; }
  .video-prompt-page .video-source { gap: 10px; padding: 8px; }
  .video-prompt-page .video-source img { width: 70px; height: 70px; }
  .video-prompt-page .video-source div { gap: 3px; }
  .video-prompt-page .video-source strong { font-size: 15px; }
  .video-prompt-page .video-source span { font-size: 12px; line-height: 1.4; }
  .video-prompt-page .video-form {
    min-height: 0;
    align-content: start;
    gap: 8px;
    margin-top: 9px;
    overflow: hidden;
  }
  .video-prompt-page .video-form>label { gap: 4px; }
  .video-prompt-page .video-form>label strong { font-size: 14px; }
  .video-prompt-page .video-textarea { min-height: 116px; height: 116px; resize: none; margin-top: 2px; padding: 11px 12px; font-size: 14px; line-height: 1.5; }
  .video-prompt-page .video-prompt-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .video-prompt-page .video-prompt-presets>span { grid-column: 1 / -1; font-size: 12px; }
  .video-prompt-page .video-prompt-presets button { min-height: 68px; padding: 8px; font-size: 12px; line-height: 1.35; text-align: center; }
  .video-prompt-page .video-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .video-prompt-page .video-options label { gap: 4px; font-size: 12px; }
  .video-prompt-page .video-options select { min-height: 48px; padding: 8px 6px; font-size: 14px; }
  .video-prompt-page .video-modal-foot { min-height: 48px; align-items: center; flex-direction: row; gap: 8px; padding-top: 0; }
  .video-prompt-page .modal-note { max-width: 43%; font-size: 9px; line-height: 1.35; }
  .video-prompt-page .video-submit { min-width: 0; flex: 1; min-height: 50px; font-size: 14px; }
  .video-prompt-page .video-result { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; margin-top: 10px; overflow: hidden; }
  .video-prompt-page .video-result video { width: 100%; height: 100%; max-height: none; object-fit: contain; }

  .image-editor-page {
    width: 100%;
    height: calc(100dvh - 16px);
    max-height: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    padding: 14px;
  }
  .image-editor-head { align-items: center; margin-bottom: 10px; }
  .image-editor-head .eyebrow,
  .image-editor-head p { display: none; }
  .image-editor-head h2 { margin: 0; font-size: 20px; }
  .image-editor-grid { min-height: 0; grid-template-columns: minmax(110px, .72fr) minmax(0, 1.28fr); gap: 10px; }
  .image-editor-canvas { min-height: 0; max-height: none; }
  .image-editor-form { min-height: 0; gap: 8px; overflow: hidden; }
  .image-editor-form .field-hint { display: none; }
  .image-editor-form textarea { min-height: 104px; resize: none; padding: 10px; font-size: 12px; }
  .editor-presets { gap: 5px; }
  .editor-presets button { padding: 7px; font-size: 10px; }
  .image-editor-foot { align-items: stretch; flex-direction: column; gap: 7px; padding-top: 6px; }
  .image-editor-foot>span { display: none; }

  .client-preview-page {
    width: 100%;
    height: calc(100dvh - 16px);
    max-height: none;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    padding: 14px;
  }
  .client-preview-page h2 { margin-top: 3px; font-size: 18px; }
  .client-preview-tabs { margin: 8px 0; }
  .client-preview-canvas { min-height: 0; height: 100%; }
  .client-preview-canvas>.comparison-canvas { min-height: 0; height: 100%; }
  .client-preview-page>footer { align-items: center; flex-direction: row; gap: 8px; margin-top: 8px; }
  .client-preview-page>footer>div:first-child { display: none; }
  .client-preview-page>footer>div:last-child { width: 100%; justify-content: flex-end; }

  .cases-page,
  .projects-page,
  .history-page {
    height: calc(100dvh - 174px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .cases-page .page-heading,
  .projects-page .page-heading,
  .history-page .page-heading { flex: 0 0 auto; display: flex; align-items: center; }
  .cases-page .page-heading h1,
  .projects-page .page-heading h1,
  .history-page .page-heading h1 { margin: 3px 0; font-size: 23px; }
  .cases-page .page-heading p,
  .projects-page .page-heading p,
  .history-page .page-heading p { display: none; }
  .cases-page .page-heading .button,
  .projects-page .page-heading .button { margin: 0 0 0 auto; }
  .case-filter { flex: 0 0 auto; margin: 12px 0 10px; padding-bottom: 8px; }
  .case-grid {
    min-height: 0;
    flex: 1;
    grid-auto-flow: column;
    grid-auto-columns: min(76vw, 300px);
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .case-grid::-webkit-scrollbar,
  .project-table::-webkit-scrollbar,
  .history-list::-webkit-scrollbar { display: none; }
  .case-card { min-height: 0; scroll-snap-align: start; }
  .case-image { height: min(40dvh, 320px); }
  .case-copy { padding: 10px; }
  .case-copy h3 { margin-bottom: 6px; }
  .case-copy p { margin: 0 0 8px; font-size: 10px; }

  .project-summary { flex: 0 0 auto; margin: 10px 0 8px; }
  .project-summary>div { padding: 9px; gap: 4px; }
  .project-summary b { font-size: 18px; }
  .project-tools { flex: 0 0 auto; margin-bottom: 8px; }
  .project-table,
  .history-list {
    min-height: 0;
    flex: 1;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    background: transparent;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .project-table-head,
  .history-row.head { display: none; }
  .project-line,
  .history-row:not(.head) {
    min-width: min(78vw, 310px);
    height: 100%;
    flex: 0 0 min(78vw, 310px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 14px;
    overflow: hidden;
    border: 1px solid #e3ded5;
    border-radius: 16px;
    padding: 16px;
    background: #fffdf9;
    scroll-snap-align: start;
  }
  .project-line>span,
  .history-row:not(.head)>span { display: block !important; }
  .history-list { margin-top: 12px; }
  .history-empty,
  .project-empty { min-width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; }
}

@media (max-width: 370px), (max-height: 700px) and (max-width: 800px) {
  .auth-entry { padding-top: 16px; padding-left: 18px; padding-right: 18px; }
  .auth-card-heading h2 { font-size: 27px; }
  .auth-card-heading p { margin-bottom: 12px; }
  .auth-card form { gap: 8px; }
  .auth-field>div { min-height: 46px; }
  .captcha-image { height: 46px; }
  .auth-submit { min-height: 48px; }
  .auth-trust { display: none; }
  .mobile-hub { gap: 15px; padding-top: 16px; }
  .mobile-hub-grid>button { min-height: 140px; }
  .mobile-hub h1 { font-size: 28px; }
}
.advanced-page {
  box-sizing: border-box;
  min-height: calc(100vh - 64px);
  padding: 34px 38px 46px;
  color: #263d36;
  background:
    radial-gradient(circle at 92% 0%, #dcefe9 0, transparent 28%),
    linear-gradient(180deg, #f9f6f0 0%, #f3efe7 100%);
}

.advanced-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.advanced-heading h1 { margin: 8px 0 8px; font-family: Georgia, 'Noto Serif SC', serif; font-size: 38px; letter-spacing: -.04em; }
.advanced-heading p { max-width: 690px; margin: 0; color: #82918b; font-size: 13px; line-height: 1.75; }
.advanced-source-summary { min-width: 218px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 18px; border-left: 1px solid #cfdbd6; padding-left: 22px; }
.advanced-source-summary span, .advanced-source-summary small { color: #82928c; font-size: 10px; }
.advanced-source-summary strong { grid-row: 1 / 3; grid-column: 2; color: #2d7f71; font-family: 'DM Mono', monospace; font-size: 38px; font-weight: 500; line-height: 1; }
.advanced-source-summary small { grid-column: 1; }

.advanced-lab-strip { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 18px; margin: 26px 0 14px; border: 1px solid #dcded7; border-radius: 15px; padding: 16px 18px; background: #fffdf9b8; }
.advanced-lab-strip span { color: #669387; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .17em; }
.advanced-lab-strip strong { font-family: Georgia, 'Noto Serif SC', serif; font-size: 20px; }
.advanced-lab-strip p { margin: 0; color: #8a9892; font-size: 10px; }

.advanced-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.advanced-card { min-height: 204px; position: relative; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; border: 1px solid #dddcd5; border-radius: 18px; padding: 18px; color: #263d36; background: #fffdf9; text-align: left; box-shadow: 0 13px 34px #263b3209; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.advanced-card::after { content: ''; width: 120px; height: 120px; position: absolute; right: -58px; bottom: -58px; border: 1px solid #cce5dd; border-radius: 50%; opacity: .5; transition: .25s ease; }
.advanced-card:hover { z-index: 1; border-color: #8fc5b8; transform: translateY(-3px); box-shadow: 0 18px 42px #284c4118; }
.advanced-card:hover::after { right: -38px; bottom: -38px; background: #e9f4f0; }
.advanced-card-index { position: absolute; right: 17px; top: 17px; color: #82958e; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; }
.advanced-card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #2f8e7f; background: #e6f3ef; }
.advanced-card-status { position: absolute; right: 17px; top: 43px; display: flex; align-items: center; gap: 5px; color: #9a8d78; font-size: 9px; }
.advanced-card-status i { width: 5px; height: 5px; border-radius: 50%; background: #c3ac82; }
.advanced-card-status.ready { color: #2e8d75; }
.advanced-card-status.ready i { background: #45ad8f; box-shadow: 0 0 0 3px #dff1eb; }
.advanced-card-copy { display: grid; gap: 5px; margin-top: 17px; }
.advanced-card-copy small { color: #75948b; font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .13em; }
.advanced-card-copy strong { color: #1f3630; font-family: Georgia, 'Noto Serif SC', serif; font-size: 18px; }
.advanced-card-copy em { min-height: 34px; color: #7f8e88; font-size: 11px; font-style: normal; line-height: 1.55; }
.advanced-card-foot { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid #ebe7df; color: #2f8274; }
.advanced-card-foot b { font-size: 11px; }
.advanced-empty-callout { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; border: 1px dashed #b8d3ca; border-radius: 15px; padding: 16px 18px; background: #f5fbf8; }
.advanced-empty-callout>div { display: grid; gap: 4px; }
.advanced-empty-callout strong { font-size: 13px; }
.advanced-empty-callout span { color: #81918b; font-size: 11px; }

.advanced-modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 24px; background: #14201dc2; backdrop-filter: blur(12px); }
.advanced-modal { width: min(1040px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #d9dfda; border-radius: 24px; padding: 24px; color: #263d36; background: #f9f6f0; box-shadow: 0 36px 110px #07100d73; }
.advanced-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.advanced-modal-title { display: flex; align-items: flex-start; gap: 15px; }
.advanced-modal-title>span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #eefbf7; background: #2f8e7f; font-family: 'DM Mono', monospace; font-size: 12px; }
.advanced-modal-title small { color: #6e9187; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em; }
.advanced-modal-title h2 { margin: 4px 0 3px; font-family: Georgia, 'Noto Serif SC', serif; font-size: 27px; }
.advanced-modal-title p { margin: 0; color: #84938d; font-size: 11px; }
.advanced-modal-head>button { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #dde1dc; border-radius: 50%; color: #71847d; background: #fffdf9; }
.advanced-modal-body { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(430px, 1.28fr); gap: 18px; }
.advanced-source-pane, .advanced-control-pane { min-width: 0; border: 1px solid #deded7; border-radius: 18px; padding: 16px; background: #fffdf9; }
.advanced-source-pane { display: grid; align-content: start; gap: 13px; }
.advanced-source-image { min-height: 340px; position: relative; overflow: hidden; border-radius: 13px; background: #e7e5de; }
.advanced-source-image img { width: 100%; height: 100%; min-height: 340px; display: block; object-fit: cover; object-position: center 25%; }
.advanced-source-image>span { position: absolute; left: 10px; top: 10px; border-radius: 999px; padding: 5px 8px; color: #fff; background: #223a33ce; font-size: 9px; backdrop-filter: blur(8px); }
.advanced-source-select, .advanced-instruction { display: grid; gap: 7px; }
.advanced-source-select>span, .advanced-instruction>span, .advanced-presets>span { color: #667a73; font-size: 11px; font-weight: 700; }
.advanced-source-select select, .advanced-video-options select { width: 100%; min-height: 42px; border: 1px solid #dedbd3; border-radius: 10px; padding: 0 10px; outline: none; color: #334b43; background: #fffdf9; font-size: 11px; }
.advanced-identity-lock { display: flex; align-items: center; gap: 7px; color: #377b6d; font-size: 10px; }
.advanced-control-pane { display: grid; align-content: start; gap: 14px; }
.advanced-presets { display: grid; gap: 8px; }
.advanced-presets>div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.advanced-presets button { min-height: 43px; border: 1px solid #dedbd3; border-radius: 10px; padding: 8px 10px; color: #71817b; background: #fffdf9; font-size: 11px; text-align: left; }
.advanced-presets button.active { border-color: #489b8c; color: #256f62; background: #eaf5f1; box-shadow: inset 0 0 0 1px #86c1b5; font-weight: 700; }
.advanced-instruction small { color: #9aa6a1; font-size: 9px; font-weight: 400; }
.advanced-instruction textarea { width: 100%; min-height: 106px; resize: vertical; border: 1px solid #dedbd3; border-radius: 11px; padding: 11px 12px; outline: none; color: #334b43; background: #fffdf9; font: inherit; font-size: 11px; line-height: 1.6; }
.advanced-instruction textarea:focus, .advanced-source-select select:focus, .advanced-video-options select:focus { border-color: #62aa9d; box-shadow: 0 0 0 3px #e2f1ed; }
.advanced-video-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.advanced-video-options label { display: grid; gap: 5px; color: #667a73; font-size: 10px; }
.advanced-run-button { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 13px; color: #fff; background: #2f8e7f; box-shadow: 0 12px 26px #2f8e7f35; font-size: 14px; font-weight: 800; }
.advanced-run-button:disabled { opacity: .45; box-shadow: none; }
.advanced-compliance { margin: 0; color: #99a59f; font-size: 9px; line-height: 1.5; text-align: center; }
.advanced-progress { display: grid; gap: 7px; }
.advanced-progress>div { display: flex; justify-content: space-between; color: #397c6e; font-size: 10px; }
.advanced-progress>i { height: 7px; overflow: hidden; border-radius: 999px; background: #e7eee9; }
.advanced-progress>i>span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #74bead, #2f8e7f); transition: width .35s ease; }
.advanced-result { min-height: 228px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.advanced-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.advanced-result-head>div { display: flex; align-items: center; gap: 6px; color: #2e8a72; font-size: 10px; }
.advanced-result-head button { color: #2f8274; font-size: 10px; }
.advanced-result-actions { display: flex; align-items: center; gap: 10px; }
.advanced-result-actions a { border-radius: 999px; padding: 5px 8px; color: #fff; background: #2f8e7f; font-size: 9px; }
.advanced-result-grid { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.advanced-result-grid button { min-height: 112px; position: relative; overflow: hidden; border-radius: 10px; background: #e7e5de; }
.advanced-result-grid img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 25%; }
.advanced-result-grid span { position: absolute; left: 6px; right: 6px; bottom: 6px; border-radius: 7px; padding: 5px; color: #fff; background: #233b34c9; font-size: 8px; text-align: center; }
.advanced-result.is-video video { width: min(220px, 100%); max-height: 370px; justify-self: center; border-radius: 11px; background: #18211f; }
.advanced-no-source { min-height: 360px; display: grid; place-content: center; justify-items: center; gap: 10px; border: 1px dashed #b9d2ca; border-radius: 18px; color: #438173; background: #f4fbf8; text-align: center; }
.advanced-no-source strong { margin-top: 5px; font-family: Georgia, 'Noto Serif SC', serif; font-size: 20px; }
.advanced-no-source span { max-width: 470px; color: #83918c; font-size: 11px; line-height: 1.65; }

@media (max-width: 1100px) {
  .advanced-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .advanced-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .mobile-hub-grid>button:nth-child(2) { color: #fff; border-color: #2c7769; background: linear-gradient(145deg, #2b675b, #329080); }
  .mobile-hub-grid>button:nth-child(2) .mobile-module-icon { color: #ecfffa; background: #ffffff19; }
  .mobile-hub-grid>button:nth-child(2) .mobile-module-index,
  .mobile-hub-grid>button:nth-child(2) small { color: #c0ded6; }
  .mobile-hub-grid>button:nth-child(5) { min-height: 96px; grid-column: 1 / -1; }

  .advanced-page { height: calc(100dvh - 146px); min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 16px 16px 8px; }
  .advanced-heading { flex: 0 0 auto; align-items: flex-start; }
  .advanced-heading h1 { margin: 4px 0; font-size: 25px; }
  .advanced-heading p { max-width: 270px; overflow: hidden; font-size: 10px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
  .advanced-source-summary { min-width: 68px; display: grid; grid-template-columns: 1fr; justify-items: end; gap: 1px; border: 0; padding: 0; }
  .advanced-source-summary span { display: none; }
  .advanced-source-summary strong { grid-area: auto; font-size: 29px; }
  .advanced-source-summary small { grid-column: auto; max-width: 78px; overflow: hidden; font-size: 8px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .advanced-lab-strip { flex: 0 0 auto; grid-template-columns: auto 1fr; gap: 9px; margin: 10px 0; padding: 10px 11px; }
  .advanced-lab-strip span { font-size: 7px; }
  .advanced-lab-strip strong { font-size: 14px; }
  .advanced-lab-strip p { display: none; }
  .advanced-card-grid { min-height: 0; flex: 1; grid-auto-flow: column; grid-auto-columns: min(74vw, 300px); grid-template-columns: none; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 9px; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .advanced-card-grid::-webkit-scrollbar { display: none; }
  .advanced-card { min-height: 0; height: 100%; scroll-snap-align: start; padding: 13px; border-radius: 16px; }
  .advanced-card-icon { width: 34px; height: 34px; border-radius: 10px; }
  .advanced-card-copy { gap: 3px; margin-top: 8px; }
  .advanced-card-copy strong { font-size: 15px; }
  .advanced-card-copy em { min-height: 0; overflow: hidden; font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
  .advanced-card-status { top: 36px; }
  .advanced-card-foot { padding-top: 7px; }
  .advanced-empty-callout { flex: 0 0 auto; margin-top: 8px; padding: 8px 10px; }
  .advanced-empty-callout span { display: none; }
  .advanced-empty-callout .button { min-height: 36px; padding: 7px 9px; font-size: 9px; }

  .advanced-modal-backdrop { padding: 8px; }
  .advanced-modal { width: 100%; height: calc(100dvh - 16px); max-height: none; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: 22px; padding: 13px; }
  .advanced-modal-head { align-items: center; margin-bottom: 9px; }
  .advanced-modal-title { align-items: center; gap: 9px; }
  .advanced-modal-title>span { width: 36px; height: 36px; border-radius: 11px; }
  .advanced-modal-title small, .advanced-modal-title p { display: none; }
  .advanced-modal-title h2 { margin: 0; font-size: 20px; }
  .advanced-modal-head>button { width: 34px; height: 34px; }
  .advanced-modal-body { min-height: 0; grid-template-columns: minmax(112px, .7fr) minmax(0, 1.3fr); gap: 8px; }
  .advanced-source-pane, .advanced-control-pane { min-height: 0; overflow: hidden; border-radius: 14px; padding: 9px; }
  .advanced-source-pane { grid-template-rows: minmax(0, 1fr) auto auto; gap: 7px; }
  .advanced-source-image { min-height: 0; height: 100%; }
  .advanced-source-image img { min-height: 0; height: 100%; }
  .advanced-source-select { gap: 4px; }
  .advanced-source-select>span { font-size: 9px; }
  .advanced-source-select select { min-height: 38px; padding: 0 6px; font-size: 9px; }
  .advanced-identity-lock { gap: 4px; font-size: 8px; }
  .advanced-control-pane { align-content: start; gap: 8px; }
  .advanced-presets { gap: 5px; }
  .advanced-presets>span, .advanced-instruction>span { font-size: 9px; }
  .advanced-presets>div { gap: 5px; }
  .advanced-presets button { min-height: 36px; padding: 6px; font-size: 9px; text-align: center; }
  .advanced-instruction { gap: 4px; }
  .advanced-instruction textarea { min-height: 78px; height: 78px; resize: none; padding: 8px; font-size: 9px; }
  .advanced-video-options { gap: 4px; }
  .advanced-video-options label { gap: 3px; font-size: 8px; }
  .advanced-video-options select { min-height: 36px; padding: 0 3px; font-size: 9px; }
  .advanced-run-button { min-height: 45px; font-size: 11px; }
  .advanced-compliance { font-size: 7px; }
  .advanced-result { min-height: 0; height: 100%; }
  .advanced-control-pane:has(.advanced-result) .advanced-presets,
  .advanced-control-pane:has(.advanced-result) .advanced-instruction,
  .advanced-control-pane:has(.advanced-result) .advanced-video-options,
  .advanced-control-pane:has(.advanced-result) .advanced-compliance { display: none; }
  .advanced-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advanced-result-grid button { min-height: 0; }
  .advanced-result.is-video video { height: calc(100dvh - 115px); max-height: 100%; }
  .advanced-no-source { min-height: 0; height: 100%; padding: 18px; }
}

@media (max-width: 370px), (max-height: 700px) and (max-width: 800px) {
  .advanced-card-grid { grid-auto-columns: min(78vw, 280px); }
  .advanced-card-copy em { display: none; }
  .advanced-lab-strip { margin: 7px 0; padding: 7px 9px; }
  .advanced-instruction textarea { min-height: 62px; height: 62px; }
  .advanced-presets button { min-height: 31px; }
}
.reference-case-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.reference-case-grid .preview-card { min-width: 0; border-radius: 12px; }
.reference-case-grid .preview-image { height: auto; aspect-ratio: 3 / 4; }
.reference-case-grid .preview-image img { object-position: center center; }
.reference-case-grid .preview-meta { min-height: 52px; display: grid; align-content: center; justify-content: stretch; gap: 3px; padding: 8px 9px; }
.reference-case-grid .preview-meta b { overflow: hidden; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.reference-case-grid .preview-meta span { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.reference-case-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 11px; border: 1px dashed #d2ded9; border-radius: 10px; padding: 8px 10px; color: #70857e; background: #f8fbf9; font-size: 9px; line-height: 1.45; text-align: center; }
.reference-case-note .icon { color: #398d80; }

@media (max-width: 800px) {
  .mobile-workspace-step-4 .reference-case-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .mobile-workspace-step-4 .reference-case-grid .preview-card { min-height: 0; }
  .mobile-workspace-step-4 .reference-case-grid .preview-image { height: auto; min-height: 0; aspect-ratio: 3 / 4; }
  .mobile-workspace-step-4 .reference-case-grid .preview-meta { min-height: 38px; padding: 5px 6px; }
  .mobile-workspace-step-4 .reference-case-grid .preview-meta b { font-size: 8px; }
  .mobile-workspace-step-4 .reference-case-grid .preview-meta span { font-size: 7px; }
  .mobile-workspace-step-4 .reference-case-note { flex: 0 0 auto; margin-top: 0; padding: 6px 8px; font-size: 8px; }
}

@media (max-width: 360px), (max-height: 700px) and (max-width: 800px) {
  .mobile-workspace-step-4 .reference-case-grid .preview-meta { min-height: 30px; padding: 4px 5px; }
  .mobile-workspace-step-4 .reference-case-grid .preview-meta span { display: none; }
  .mobile-workspace-step-4 .reference-case-note { display: none; }
}


:root {
  --private-950: #061d1b;
  --private-925: #082521;
  --private-900: #0a2a26;
  --private-850: #0d312c;
  --private-800: #123a34;
  --private-700: #1e5148;
  --private-line: #315149;
  --private-line-soft: #24443d;
  --private-pearl: #f5f1e9;
  --private-pearl-2: #ebe8e0;
  --private-champagne: #ddbd84;
  --private-champagne-soft: #f0d7a9;
  --private-mist: #9eafa9;
  --private-ink: #11231f;
  --private-danger: #db8f86;
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--private-pearl);
  background: var(--private-950);
}

html { background: var(--private-950); }
body { background: var(--private-950); color: var(--private-pearl); }
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--private-champagne);
  outline-offset: 2px;
}

.app-shell { background: var(--private-950); }
.sidebar {
  width: 264px;
  padding: 22px 16px 18px;
  border-right: 1px solid var(--private-line-soft);
  color: var(--private-pearl);
  background: #071f1c;
}
.main-area { width: calc(100% - 264px); margin-left: 264px; background: var(--private-925); }
.logo-lockup { gap: 12px; padding: 0 8px; margin-bottom: 24px; }
.brand-logo-image { width: 43px; height: 43px; flex: 0 0 auto; border-radius: 11px; object-fit: cover; box-shadow: 0 7px 24px #0004; }
.logo-lockup strong { color: var(--private-pearl); font-family: 'Noto Serif SC', 'Songti SC', serif; font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.logo-lockup small { color: #9f8d70; font-size: 8px; letter-spacing: .18em; }
.logo-mark { display: none; }
.workspace-pill { margin-bottom: 26px; border: 1px solid var(--private-line); border-radius: 10px; padding: 11px; background: #0d2c28; }
.workspace-pill b { color: #eee7db; font-size: 12px; }
.workspace-pill span { color: #7f9790; }
.workspace-dot { border: 1px solid #527269; border-radius: 50%; color: var(--private-champagne); background: #163b35; }
.nav-label { color: #617d75; }
.nav-item { min-height: 43px; border: 1px solid transparent; border-radius: 8px; color: #a7b8b2; }
.nav-item:hover { border-color: #294c44; color: #fffaf1; background: #0f322d; }
.nav-item.active { border-color: #416a61; color: var(--private-pearl); background: #16463f; box-shadow: inset 3px 0 var(--private-champagne); }
.nav-item em, .new-dot { color: var(--private-champagne); }
.credit-card { border-color: var(--private-line); border-radius: 10px; background: #0c2d28; }
.credit-head span, .credit-foot span { color: #849b94; }
.credit-head strong, .credit-foot button { color: var(--private-champagne); }
.progress { background: #24423b; }
.progress i { background: var(--private-champagne); }
.profile { border-color: var(--private-line-soft); }
.profile b { color: #f3eee5; }
.profile span { color: #7f958e; }
.avatar-staff { color: #172822; background: var(--private-champagne); }
.profile-logout:hover { color: var(--private-champagne); background: #153a34; }

.topbar {
  height: 86px;
  padding: 0 30px;
  border-color: var(--private-line-soft);
  background: #082521f2;
  backdrop-filter: blur(18px);
}
.breadcrumbs { gap: 10px; color: #829a93; }
.breadcrumbs strong { color: var(--private-pearl); font-family: 'Noto Serif SC', 'Songti SC', serif; font-size: 22px; font-weight: 600; letter-spacing: .01em; }
.breadcrumbs em { border: 1px solid #49675f; border-radius: 5px; padding: 4px 7px; color: #bed0c9; font-size: 9px; font-style: normal; }
.top-actions { gap: 10px; }
.status { color: #8da29c; }
.status span { background: #6ac19d; box-shadow: 0 0 0 3px #6ac19d18; }
.top-workbench-actions { display: flex; gap: 9px; }
.top-workbench-actions .button { min-height: 43px; border-radius: 6px; padding: 0 17px; font-size: 12px; }
.top-save, .top-video { border: 1px solid #6c8179; color: #e9e2d7; background: transparent; }
.top-save:hover, .top-video:hover:not(:disabled) { border-color: var(--private-champagne); color: var(--private-champagne-soft); background: #12342f; }
.top-generate { border: 1px solid var(--private-champagne); color: #17251f; background: var(--private-champagne-soft); font-weight: 800; }
.top-generate:hover:not(:disabled) { background: #f5dfb7; }
.top-workbench-actions .button:disabled { opacity: .36; }
.topbar .button.primary { color: #17251f; background: var(--private-champagne-soft); box-shadow: none; }

.workspace-long-content {
  height: calc(100vh - 86px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--private-925);
}
.notice { margin: 13px 18px 0; border: 1px solid #2e544b; border-radius: 8px; padding: 11px 14px; color: #a8bcb5; background: #0d302b; }
.notice-icon { width: 30px; height: 30px; border: 1px solid #365e55; border-radius: 50%; color: var(--private-champagne); background: #153c35; }
.notice strong { color: #e8e2d8; }
.notice p { color: #8fa59e; }
.config-chip { border-color: #4e6a62; color: #a6bbb4; background: #0a2723; }
.config-chip.ok { border-color: #567d70; color: #bad7cc; background: #103a33; }
.action-notice { margin: 9px 18px 0; border-color: #49695f; border-radius: 8px; color: #d9e7e2; background: #123b35; }
.api-error.page-error { margin: 9px 18px 0; border-color: #784942; color: #f2c5bd; background: #351d1a; }

.workspace-grid {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(430px, .88fr) minmax(500px, 1.12fr);
  gap: 12px;
  align-items: stretch;
  padding: 13px 18px 20px;
}
.setup-panel, .preview-panel {
  min-width: 0;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--private-line);
  border-radius: 10px;
  color: var(--private-pearl);
  background: var(--private-900);
  box-shadow: none;
}
.setup-panel { overflow-y: auto; padding: 18px 16px; scrollbar-width: thin; scrollbar-color: #49675f transparent; }
.preview-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; padding: 18px 16px 13px; }
.panel-title h2, .panel-heading h2, .preview-head h2 { color: var(--private-pearl); font-family: 'Noto Serif SC', 'Songti SC', serif; font-weight: 600; }
.panel-title h2, .panel-heading h2 { margin-top: 6px; font-size: 22px; }
.panel-title p, .panel-heading p, .preview-head p { color: #829a93; }
.eyebrow { color: var(--private-champagne); font-size: 8px; letter-spacing: .18em; }
.panel-help { color: #80978f; }
.step-block { padding: 17px 0; border-color: var(--private-line-soft); }
.step-block:first-of-type { margin-top: 7px; }
.step-index { width: 27px; height: 27px; border: 1px solid #376158; border-radius: 50%; color: var(--private-champagne); background: #123a34; }
.step-header h3 { color: #ece7de; }
.step-header p, .privacy-note { color: #829991; }
.portrait-source-heading { color: #c7d5d0; }
.portrait-source-heading small { color: #758f87; }
.portrait-source-switch { gap: 7px; }
.portrait-source-switch>button { border-color: #35564f; border-radius: 8px; color: #a4b6b0; background: #0d2e2a; }
.portrait-source-switch>button:hover { border-color: #6c8e84; color: #eef3ef; background: #123a34; }
.portrait-source-switch>button.selected { border-color: #7ea99b; color: var(--private-pearl); background: #16483f; box-shadow: none; }
.portrait-option-icon { border-radius: 50%; color: #9fb3ac; background: #163a35; }
.portrait-source-switch>button.selected .portrait-option-icon { color: #183027; background: var(--private-champagne); }
.portrait-source-switch small { color: #788f88; }
.portrait-source-switch>button.selected>.icon { color: var(--private-champagne); }
.upload-box { height: 154px; border-color: #4b6861; border-radius: 8px; color: #dce5e1; background: #0c2a26; }
.upload-box:hover { border-color: var(--private-champagne); background: #10332e; }
.upload-icon { border: 1px solid #496a61; border-radius: 50%; color: var(--private-champagne); background: #153c36; }
.upload-box>span:not(.uploaded-label) { color: #7e948d; }
.upload-box em { color: #758b84; }
.upload-box.has-image { border-color: #6b857d; background: #142d28; }
.upload-box.has-image img { object-fit: contain; background: #142d28; }
.round-control { color: #183027; background: #eee5d8; }
.round-control.danger { color: #8f443b; }
.uploaded-label { color: #15372f; background: var(--private-champagne-soft); }
.portrait-generation-controls { border-color: #3d5f57; border-radius: 8px; background: #0d2d29; }
.portrait-generation-copy b, .portrait-description>span { color: #dce5e1; }
.portrait-generation-copy span { color: #829890; }
.portrait-description textarea { border-color: #3b5b54; border-radius: 7px; color: #e8ede9; background: #082521; }
.portrait-description textarea::placeholder { color: #6f8580; }
.portrait-description textarea:focus { border-color: var(--private-champagne); box-shadow: 0 0 0 3px #ddbd8418; }
.portrait-generate-button { border: 1px solid var(--private-champagne); border-radius: 7px; color: #152721; background: var(--private-champagne-soft); box-shadow: none; }
.portrait-generate-button:hover:not(:disabled) { background: #f6deb3; }
.portrait-ready-status { color: #849a93; background: #0b2824; }
.portrait-ready-status.ready { color: #bad0c8; background: #113a33; }
.step-block[data-step="1"] .step-header h3::after { border-color: #7a9d92; color: var(--private-champagne); background: #11372f; }
.project-category-grid { gap: 6px; }
.project-category-grid button { min-height: 42px; border-color: #3d5c55; border-radius: 7px; color: #a8b9b3; background: #0c2b27; box-shadow: none; font-size: 12px; }
.project-category-grid button:hover { border-color: #809b93; color: #f4eee5; background: #123832; }
.project-category-grid button.selected { border-color: var(--private-champagne); color: #18271f; background: var(--private-champagne-soft); box-shadow: none; }
.project-category-grid button.selected::after { background: #17352e; box-shadow: none; }
.select-field, .text-field { border-color: #3a5a53; border-radius: 7px; color: #e5ebe7; background: #0c2925; }
.select-field:hover, .text-field:focus-within { border-color: #819a92; background: #0e302b; }
.select-field span, .text-field span { color: #81978f; }
.select-field select, .text-field input { color: #e8ede9; }
.select-field select option { color: #17231f; background: #f4f0e8; }
.text-field input::placeholder { color: #6e847d; }
.day-selector button { border-color: #3c5b54; border-radius: 7px; color: #a1b3ac; background: #0c2a26; }
.day-selector button small { color: #728b83; }
.day-selector button.selected { border-color: var(--private-champagne); color: #172820; background: var(--private-champagne-soft); box-shadow: none; }
.day-selector button.selected small { color: #6c5130; }
.day-selector .all-days { color: var(--private-champagne); }
.output-option-grid>button { border-color: #3c5b54; border-radius: 7px; color: #9fb1aa; background: #0c2925; }
.output-option-grid>button:hover { border-color: #7d9990; }
.output-option-grid>button.selected { border-color: var(--private-champagne); color: var(--private-champagne-soft); background: #123b34; box-shadow: none; }
.output-option-grid small { color: #778e86; }
.generate-button { border: 1px solid var(--private-champagne); border-radius: 7px; color: #15251f; background: var(--private-champagne-soft); box-shadow: none; }
.generate-button:hover { color: #15251f; background: #f4ddb5; transform: none; }
.compliance-copy { color: #70867f; }

.preview-heading { padding-bottom: 12px; border-bottom: 1px solid var(--private-line-soft); }
.preview-actions .button { border-radius: 6px; }
.button.ghost { border-color: #59736c; color: #dce6e2; background: #0c2a26; }
.button.secondary { border: 1px solid var(--private-champagne); color: var(--private-champagne-soft); background: #173a33; }
.button.primary { color: #14231e; background: var(--private-champagne-soft); box-shadow: none; }
.preview-workbench { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 178px; gap: 12px; padding-top: 12px; }
.preview-workbench-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.result-banner { flex: 0 0 auto; border-color: #3f665c; border-radius: 6px; color: #bdd0c8; background: #123b34; }
.result-dot { background: var(--private-champagne); box-shadow: 0 0 0 4px #ddbd8420; }
.preview-mode-tabs { flex: 0 0 auto; margin-bottom: 10px; border: 1px solid #34564e; border-radius: 6px; background: #082521; }
.preview-mode-tabs button { border-radius: 4px; color: #859b94; }
.preview-mode-tabs button.active { color: #17251f; background: var(--private-champagne-soft); box-shadow: none; }
.comparison-stage { min-height: 0; flex: 1; }
.comparison-toolbar { color: #8da29b; }
.comparison-toolbar button { border-color: #4b6860; border-radius: 5px; color: #a4b5af; background: #0b2925; }
.comparison-toolbar button.active { border-color: var(--private-champagne); color: var(--private-champagne-soft); background: #143a34; }
.comparison-canvas { min-height: 0; height: 100%; border-color: #445f58; border-radius: 7px; background: #d7d1c8; }
.comparison-canvas img { object-position: center 24%; }
.comparison-canvas>div>span { border-radius: 4px; color: #17251f; background: #eee7dbeb; }
.comparison-canvas>div+div>span { color: #f5eee4; background: #10332ee8; }
.comparison-canvas>p { border-radius: 4px; background: #091f1cbe; }
.result-picker { flex: 0 0 auto; }
.result-picker button { border-color: #3c5b54; border-radius: 6px; color: #859a93; background: #0b2925; }
.result-picker button.selected { border-color: var(--private-champagne); color: var(--private-champagne); box-shadow: none; }
.preview-grid { min-height: 0; overflow-y: auto; padding-right: 2px; }
.preview-card { border-color: #3b5a53; border-radius: 7px; color: #e9eee9; background: #0c2a26; }
.preview-card:hover, .preview-card.selected { border-color: var(--private-champagne); box-shadow: none; transform: translateY(-1px); }
.preview-image { background: #dcd6cc; }
.preview-image img { filter: none; }
.card-badge { border-radius: 3px; background: #0a211ed9; }
.preview-card.selected .card-select { border-color: var(--private-champagne); color: #17251f; background: var(--private-champagne); }
.preview-meta b { color: #ece7de; }
.preview-meta span { color: #7f948d; }
.card-toolbar button { color: #16261f; background: #efe5d7e8; }
.card-toolbar .card-video-action { color: #17231f; background: var(--private-champagne-soft); }
.reference-case-note { border-color: #3b5d55; color: #94a8a1; background: #0c2b27; }
.reference-case-note .icon { color: var(--private-champagne); }
.video-preview-stage { min-height: 0; flex: 1; border-color: #3c5b54; border-radius: 7px; background: #0b2925; }
.video-preview-stage strong { color: #eee9df; }
.video-preview-stage span { color: #8ba098; }
.video-preview-stage video, .video-poster { border-radius: 8px; background: #061d1b; box-shadow: 0 18px 44px #0004; }
.video-poster>span .icon { color: #1d2d26; background: var(--private-champagne-soft); }
.empty-state { flex: 1; border-color: #395a52; border-radius: 7px; color: #80958e; }
.empty-orbit { color: var(--private-champagne); background: #153b35; box-shadow: 0 0 0 10px #102f2a; }
.empty-state b { color: #cad6d1; }
.preview-footer { border-color: var(--private-line-soft); color: #758b83; }

.consultation-dossier { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid #8c7553; border-radius: 7px; padding: 13px 11px; color: #e9e1d5; background: #08231f; }
.consultation-dossier header { padding-bottom: 12px; border-bottom: 1px solid #5a503e; text-align: center; }
.consultation-dossier header>span { color: #9a8869; font: 7px 'DM Mono', monospace; letter-spacing: .12em; }
.consultation-dossier header strong { display: block; margin: 7px 0 4px; color: var(--private-champagne-soft); font-family: 'Noto Serif SC', 'Songti SC', serif; font-size: 22px; font-weight: 600; letter-spacing: .18em; }
.consultation-dossier header p { margin: 0; color: #7e938c; font-size: 8px; }
.consultation-dossier ol { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; margin: 0; padding: 10px 0; list-style: none; }
.consultation-dossier li { min-width: 0; position: relative; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: start; gap: 7px; padding: 7px 0; }
.consultation-dossier li:not(:last-child)::after { content: ''; width: 1px; height: 12px; position: absolute; left: 12px; top: 34px; background: #4d655e; }
.consultation-dossier li>span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #536d65; border-radius: 50%; color: #849991; font: 8px 'DM Mono', monospace; }
.consultation-dossier li.ready>span { border-color: var(--private-champagne); color: #17251f; background: var(--private-champagne); }
.consultation-dossier li>div { min-width: 0; display: grid; gap: 3px; }
.consultation-dossier li b { color: #d9ded9; font-size: 9px; font-weight: 700; }
.consultation-dossier li small { overflow: hidden; color: #718780; font-size: 7px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.consultation-dossier li>.icon { margin-top: 5px; color: var(--private-champagne); }
.consultation-dossier footer { display: flex; align-items: center; gap: 7px; padding-top: 11px; border-top: 1px solid #5a503e; color: #8da49c; font-size: 7px; line-height: 1.55; }
.consultation-dossier footer .icon { color: var(--private-champagne); }

.cases-page, .history-page, .projects-page, .advanced-page { min-height: calc(100vh - 86px); padding: 34px 32px 46px; color: var(--private-pearl); background: var(--private-925); }
.page-heading h1, .advanced-heading h1 { color: var(--private-pearl); font-family: 'Noto Serif SC', 'Songti SC', serif; font-weight: 600; }
.page-heading p, .advanced-heading p { color: #879b94; }
.history-count, .history-count b, .advanced-source-summary strong { color: var(--private-champagne); }
.case-filter { border-color: var(--private-line); }
.case-filter button { color: #839891; }
.case-filter button.active { color: #17251f; background: var(--private-champagne-soft); }
.filter-search, .project-tools label { border-color: #3a5b53; color: #849991; background: #0d2f2a; }
.filter-search input, .project-tools input { color: #e7ece8; }
.filter-search input::placeholder, .project-tools input::placeholder { color: #6d837c; }
.case-card, .history-list, .project-table, .project-summary>div { border-color: #395951; border-radius: 8px; color: #dfe6e2; background: #0d302b; box-shadow: none; }
.case-image img { filter: none; }
.case-image>span { border-radius: 3px; background: #071e1bd9; }
.case-image>em { border-color: #ebd6ae99; color: #17251f; background: var(--private-champagne-soft); }
.case-copy h3 { color: #eee9df; }
.case-copy>p, .case-copy>div { color: #7f958d; }
.case-copy button, .row-action { color: var(--private-champagne); }
.history-row, .project-table-head, .project-line { border-color: var(--private-line-soft); color: #91a69f; }
.history-row.head, .project-table-head { color: #7d928b; background: #0a2925; }
.history-project b, .project-title b { color: #e7ece8; }
.history-project span, .project-title span { color: #748b83; }
.status-pill i { background: var(--private-champagne); }
.row-delete { color: var(--private-danger); }
.project-summary span { color: #7e948d; }
.project-summary b { color: var(--private-champagne); }
.project-icon.p0, .project-icon.p1, .project-icon.p2 { color: var(--private-champagne); background: #173e37; }
.case-empty, .project-empty, .history-empty { border-color: #3d5f56; color: #7e948d; background: #0b2a26; }
.case-empty b, .project-empty b, .history-empty b { color: #cdd8d3; }

.advanced-page { background: var(--private-925); }
.advanced-source-summary { border-color: var(--private-line); }
.advanced-source-summary span, .advanced-source-summary small { color: #7f958d; }
.advanced-lab-strip { border-color: #3b5b54; border-radius: 8px; background: #0d302b; }
.advanced-lab-strip span { color: var(--private-champagne); }
.advanced-lab-strip strong { color: #e7ece8; }
.advanced-lab-strip p { color: #81968f; }
.advanced-card { border-color: #3a5b53; border-radius: 9px; color: #dfe6e2; background: #0d302b; box-shadow: none; }
.advanced-card::after { display: none; }
.advanced-card:hover { border-color: var(--private-champagne); box-shadow: none; }
.advanced-card-index, .advanced-card-status { color: #829790; }
.advanced-card-icon { border: 1px solid #4c6c63; border-radius: 50%; color: var(--private-champagne); background: #153d36; }
.advanced-card-copy small { color: #9b8868; }
.advanced-card-copy strong { color: #eee9df; }
.advanced-card-copy em { color: #829790; }
.advanced-card-foot { border-color: var(--private-line-soft); color: var(--private-champagne); }
.advanced-empty-callout { border-color: #536f66; border-radius: 8px; color: #dce5e1; background: #103731; }
.advanced-empty-callout span { color: #82978f; }

.auth-page { color: var(--private-ink); background: var(--private-950); }
.auth-story { color: var(--private-pearl); background: #071f1c; }
.auth-entry { background: var(--private-pearl); }
.auth-card-heading>span, .auth-kicker { color: #997c52; }
.auth-card-heading h2 { color: #172a24; font-family: 'Noto Serif SC', 'Songti SC', serif; }
.auth-card-heading p { color: #6d7d77; }
.auth-field>span { color: #455a52; }
.auth-field>div { border-color: #cfc9bc; border-radius: 7px; background: #faf8f3; }
.auth-field>div:focus-within { border-color: #8e7652; box-shadow: 0 0 0 3px #ddbd8427; }
.auth-submit { border-radius: 7px; color: #17251f; background: var(--private-champagne-soft); box-shadow: none; }
.auth-submit:hover:not(:disabled) { background: #f4ddb4; }
.auth-story h1 { color: var(--private-pearl); font-family: 'Noto Serif SC', 'Songti SC', serif; }
.auth-story-copy p, .auth-footnote { color: #93a69f; }
.auth-brand>span { color: var(--private-champagne); }
.auth-visual { color: var(--private-champagne); }
.auth-core { border-color: #725f43; background: #0d302b; }
.auth-metric { border-color: #49675f; color: #dce5e0; background: #0a2925; }
.auth-slide-nav { border-color: #4d685f; background: #0a2a26e8; }
.auth-slide-nav button { color: #9aada6; }
.auth-slide-nav button.active { color: #17251f; background: var(--private-champagne-soft); }

.client-preview-backdrop, .advanced-modal-backdrop, .editor-backdrop, .video-modal-backdrop { background: #031412dc; }
.client-preview-page, .advanced-modal, .editor-modal, .video-modal { border-color: #47645c; color: var(--private-pearl); background: var(--private-900); }
.video-modal-head h2, .video-form>label, .video-prompt-presets>span, .video-options label { color: var(--private-pearl); }
.video-modal-head p, .modal-note { color: var(--private-mist); }
.video-modal-close { border: 1px solid #4b6961; color: var(--private-pearl); background: #153a34; }
.client-preview-page h2, .advanced-modal-title h2 { color: var(--private-pearl); }
.client-preview-brand, .advanced-modal-title small { color: var(--private-champagne); }
.client-preview-tabs button { border-color: #4c6860; color: #a8bab4; background: #0b2925; }
.client-preview-tabs button.active { border-color: var(--private-champagne); color: #17251f; background: var(--private-champagne-soft); }
.client-preview-canvas { border-color: #506861; background: #d9d3ca; }
.advanced-source-pane, .advanced-control-pane { border-color: #3b5b53; color: #dde4e0; background: #0b2b27; }
.advanced-modal-title>span { color: #17251f; background: var(--private-champagne-soft); }
.advanced-source-select select, .advanced-video-options select, .advanced-instruction textarea { border-color: #3d5d55; color: #e5ebe7; background: #082521; }
.advanced-presets button { border-color: #3c5c54; color: #a1b3ad; background: #0c2b27; }
.advanced-presets button.active { border-color: var(--private-champagne); color: var(--private-champagne-soft); background: #163b34; box-shadow: none; }
.advanced-run-button { border: 1px solid var(--private-champagne); border-radius: 7px; color: #17251f; background: var(--private-champagne-soft); box-shadow: none; }

@media (max-width: 1240px) {
  .workspace-grid { grid-template-columns: minmax(400px, .88fr) minmax(0, 1.12fr); }
  .preview-workbench { grid-template-columns: minmax(0, 1fr) 150px; }
  .top-workbench-actions .button { padding-inline: 12px; }
  .status { display: none; }
}

@media (max-width: 1000px) and (min-width: 801px) {
  .workspace-long-content { height: auto; overflow: visible; }
  .workspace-grid { grid-template-columns: 1fr; }
  .setup-panel, .preview-panel { height: auto; min-height: 680px; }
  .setup-panel { overflow: visible; }
  .top-save { display: none; }
}

@media (max-width: 800px) {
  body { background: var(--private-950); }
  .app-shell { min-height: 100dvh; padding-bottom: 82px; background: var(--private-950); }
  .main-area { width: 100%; margin-left: 0; background: var(--private-950); }
  .topbar { height: 64px; min-height: 64px; padding: 0 15px; border-color: var(--private-line-soft); background: #071f1cf2; }
  .breadcrumbs strong { font-size: 18px; }
  .breadcrumbs em { display: none; }
  .top-actions { min-width: 0; }
  .top-workbench-actions { display: block; }
  .top-workbench-actions .top-save, .top-workbench-actions .top-video { display: none; }
  .top-workbench-actions .top-generate { min-height: 40px; border-radius: 7px; padding: 0 11px; font-size: 11px; }
  .topbar .top-actions>.button.primary.small { min-width: 106px; min-height: 40px; border-radius: 7px; color: #17251f; background: var(--private-champagne-soft); }

  .mobile-hub, .mobile-workspace-menu { background: var(--private-950); }
  .mobile-hub>header span, .mobile-workspace-menu header>span { color: var(--private-champagne); }
  .mobile-hub h1, .mobile-workspace-menu h1 { color: var(--private-pearl); font-family: 'Noto Serif SC', 'Songti SC', serif; }
  .mobile-hub header p, .mobile-workspace-menu header p, .mobile-hub-note { color: #849a93; }
  .mobile-avatar { border-color: #705d40; border-radius: 50%; color: #17251f; background: var(--private-champagne-soft); box-shadow: none; }
  .mobile-hub-grid>button, .mobile-workspace-grid>button { border-color: #35564e; border-radius: 12px; color: #e7ede8; background: #0d302b; box-shadow: none; }
  .mobile-hub-grid>button:first-child, .mobile-hub-grid>button:nth-child(2), .mobile-workspace-grid>button:first-child { border-color: var(--private-champagne); color: #17251f; background: var(--private-champagne-soft); }
  .mobile-hub-grid>button:nth-child(5) { justify-content: center; padding: 18px 52px 18px 84px; }
  .mobile-module-index, .workspace-module-state { color: #7f958d; }
  .mobile-hub-grid>button:first-child .mobile-module-index,
  .mobile-hub-grid>button:nth-child(2) .mobile-module-index,
  .mobile-hub-grid>button:first-child small,
  .mobile-hub-grid>button:nth-child(2) small,
  .mobile-workspace-grid>button:first-child .workspace-module-copy small,
  .mobile-workspace-grid>button:first-child .workspace-module-state { color: #6f5c3d; }
  .mobile-module-icon, .workspace-module-icon { border: 1px solid #48675f; border-radius: 50%; color: var(--private-champagne); background: #163b35; }
  .mobile-hub-grid>button:first-child .mobile-module-icon,
  .mobile-hub-grid>button:nth-child(2) .mobile-module-icon,
  .mobile-workspace-grid>button:first-child .workspace-module-icon { border-color: #8c7048; color: #17251f; background: #e9c991; }
  .mobile-hub-grid small, .workspace-module-copy small { color: #839991; }
  .workspace-module-state.ready { color: var(--private-champagne); }

  .mobile-bottom-nav { border-color: #3b5952; border-radius: 14px; background: #092722f2; box-shadow: 0 16px 40px #0006; }
  .mobile-bottom-nav button { border-radius: 9px; color: #91a59e; }
  .mobile-bottom-nav button:nth-child(2) { color: var(--private-champagne); }
  .mobile-bottom-nav button.active { color: #17251f; background: var(--private-champagne-soft); }
  .mobile-generate-button { border: 1px solid var(--private-champagne); border-radius: 9px; color: #17251f; background: var(--private-champagne-soft); box-shadow: 0 16px 38px #0006; }

  .workspace-long-content { height: calc(100dvh - 146px); min-height: 0; overflow: hidden; background: var(--private-950); }
  .notice { border-color: #36574f; border-radius: 10px; background: #0d302b; }
  .workspace-grid { grid-template-columns: 1fr; padding: 12px 12px 28px; }
  .setup-panel, .preview-panel { height: auto; min-height: 0; border-color: #385950; border-radius: 12px; background: var(--private-900); }
  .app-shell[class*="mobile-workspace-step-"] .workspace-grid { height: calc(100dvh - 146px); padding: 8px 10px 6px; }
  .app-shell[class*="mobile-workspace-step-"] .setup-panel,
  .mobile-workspace-step-4 .preview-panel { height: 100%; }
  .mobile-workspace-step-4 .preview-panel { padding: 12px 10px 8px; }
  .preview-workbench { min-height: 0; grid-template-columns: 1fr; padding-top: 7px; }
  .preview-workbench-main { overflow: auto; }
  .consultation-dossier { display: none; }
  .preview-heading { padding-bottom: 8px; }
  .panel-heading h2 { font-size: 21px; }
  .panel-heading p { font-size: 11px; }
  .preview-mode-tabs { margin-bottom: 7px; }
  .comparison-canvas { min-height: 0; height: min(55dvh, 490px); border-radius: 8px; }
  .result-picker img { height: 44px; }
  .reference-case-grid { min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reference-case-grid .preview-image { aspect-ratio: 3 / 4; }
  .preview-footer { margin-top: 8px; padding-top: 8px; }
  .preview-footer>span:last-child { display: none; }

  .cases-page, .projects-page, .history-page, .advanced-page { min-height: calc(100dvh - 146px); margin: 0; padding: 18px 14px 12px; border-radius: 0; background: var(--private-950); }
  .case-filter { overflow-x: auto; }
  .case-filter button { flex: 0 0 auto; }
  .case-card, .history-list, .project-table, .project-summary>div { border-radius: 10px; }
  .advanced-card-grid { scrollbar-color: var(--private-champagne) transparent; }
  .advanced-modal { border-radius: 14px; background: var(--private-900); }

  .auth-page { background: var(--private-950); }
  .auth-entry { background: var(--private-pearl); }
  .auth-story { background: #071f1c; }
  .auth-field>div { border-radius: 9px; }
  .auth-submit { border-radius: 9px; }
  .auth-slide-nav { border-color: #5d705f; background: #0a2925eb; box-shadow: 0 12px 30px #0004; }
}

@media (max-width: 420px) {
  .top-workbench-actions .top-generate { padding-inline: 9px; }
  .top-workbench-actions .top-generate .icon { display: none; }
  .mobile-hub { gap: 18px; padding: 18px 14px 22px; }
  .mobile-hub-grid { gap: 9px; }
  .mobile-hub-grid>button { min-height: 150px; padding: 15px; }
  .mobile-workspace-menu { padding-inline: 14px; }
  .mobile-workspace-grid { gap: 8px; }
  .mobile-workspace-grid>button { border-radius: 10px; }
  .mobile-workspace-step-0 .upload-box { height: min(43dvh, 286px); }
  .portrait-source-switch b { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.auth-mode-switch { width: 100%; margin: 13px 0 2px; color: #496860; font-size: 11px; text-align: center; }
.auth-mode-switch:hover { color: #8b6c39; }
.credit-balance-card { display: grid; gap: 10px; }
.credit-balance-card .credit-head strong { font-size: 18px; }

.admin-page { min-height: calc(100vh - 86px); padding: 32px 30px 40px; color: var(--private-pearl); background: var(--private-925); }
.admin-heading { align-items: center; }
.admin-heading h1 { margin: 6px 0; color: var(--private-pearl); font-family: 'Noto Serif SC', 'Songti SC', serif; }
.admin-heading p { color: #8ca19a; }
.admin-heading .button.ghost { border-color: #49665e; color: #d7dfda; background: #0c2c28; }
.admin-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 14px; }
.admin-summary>div { display: grid; gap: 7px; border: 1px solid var(--private-line); border-radius: 10px; padding: 18px 20px; background: #0b2b27; }
.admin-summary span, .admin-summary small { color: #839b94; font-size: 10px; }
.admin-summary b { color: var(--private-champagne-soft); font: 28px 'DM Mono', monospace; }
.admin-control-card { display: grid; grid-template-columns: minmax(260px, 1fr) 190px 130px auto; gap: 12px; align-items: end; border: 1px solid #4a655d; border-radius: 10px; padding: 18px 20px; background: #10352f; }
.admin-control-card>div>span { color: var(--private-champagne-soft); font-weight: 700; }
.admin-control-card>div>p { margin: 6px 0 0; color: #8da49c; font-size: 10px; }
.admin-control-card label { display: grid; gap: 6px; }
.admin-control-card label>span { color: #8da49c; font-size: 9px; }
.admin-control-card input, .admin-table-tools input, .admin-points-input input { width: 100%; border: 1px solid #426159; border-radius: 7px; outline: 0; padding: 10px 11px; color: #f5f1e9; background: #082521; }
.admin-control-card input:focus, .admin-table-tools input:focus, .admin-points-input input:focus { border-color: var(--private-champagne); }
.admin-control-card .button.primary { min-height: 39px; color: #17251f; background: var(--private-champagne-soft); }
.admin-feedback { display: flex; align-items: center; gap: 8px; margin-top: 12px; border: 1px solid; border-radius: 8px; padding: 10px 12px; font-size: 11px; }
.admin-feedback.success { border-color: #416c5d; color: #c8e3d8; background: #103a32; }
.admin-feedback.error { border-color: #754a43; color: #efc3bb; background: #351f1b; }
.admin-table-card, .admin-log-card { margin-top: 14px; overflow: hidden; border: 1px solid var(--private-line); border-radius: 10px; background: #0a2925; }
.admin-table-tools { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--private-line-soft); }
.admin-table-tools>div { display: flex; align-items: baseline; gap: 10px; }
.admin-table-tools strong { color: #efe9df; font-size: 13px; }
.admin-table-tools span { color: #79928b; font-size: 9px; }
.admin-table-tools label { display: flex; align-items: center; gap: 7px; }
.admin-table-tools input { width: 180px; padding: 8px 10px; }
.admin-account-row { display: grid; grid-template-columns: 1.35fr .7fr .75fr 1fr .55fr; gap: 14px; align-items: center; min-height: 62px; padding: 10px 18px; border-bottom: 1px solid #1e413a; color: #9aafa8; font-size: 10px; }
.admin-account-row:last-child { border-bottom: 0; }
.admin-account-row.head { min-height: 38px; color: #6f8981; background: #08231f; }
.admin-account-row>div:first-child { display: grid; gap: 3px; }
.admin-account-row b { color: #eee8de; font: 12px 'DM Mono', monospace; }
.admin-account-row small { color: #718a82; font-size: 9px; }
.admin-role { width: fit-content; border: 1px solid #405f57; border-radius: 20px; padding: 4px 8px; color: #9cb2ab; }
.admin-role.owner { border-color: #856f48; color: var(--private-champagne-soft); background: #3a3020; }
.admin-points-input { max-width: 90px; }
.admin-points-input input { padding: 8px 9px; }
.admin-points-input strong { color: var(--private-champagne-soft); font-size: 20px; }
.admin-save { justify-self: start; border: 1px solid #557269; border-radius: 6px; padding: 7px 10px; color: #d3ddd8; background: #123a34; }
.admin-save:hover:not(:disabled) { border-color: var(--private-champagne); color: var(--private-champagne-soft); }
.admin-save:disabled { opacity: .42; cursor: default; }
.admin-log-card>div:first-child { display: flex; align-items: baseline; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--private-line-soft); }
.admin-log-card>div:first-child strong { color: #eee8de; font-size: 13px; }
.admin-log-card>div:first-child span { color: #79928b; font-size: 9px; }
.admin-log-row { display: grid; grid-template-columns: 1fr .55fr .7fr 1.5fr; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #1e413a; color: #8ca29b; font-size: 10px; }
.admin-log-row b { color: #d8988c; }
.admin-log-row b.plus { color: #80c3a9; }
.admin-log-row em { color: #a99a80; font-style: normal; }
.admin-empty { padding: 32px; color: #718a82; text-align: center; font-size: 11px; }

@media (max-width: 900px) {
  .admin-page { min-height: calc(100dvh - 146px); padding: 18px 14px 90px; }
  .admin-heading p { display: none; }
  .admin-summary { grid-template-columns: repeat(3, 1fr); margin: 14px 0 10px; }
  .admin-summary>div { padding: 11px; }
  .admin-summary b { font-size: 21px; }
  .admin-summary small { display: none; }
  .admin-control-card { grid-template-columns: 1fr 1fr; padding: 14px; }
  .admin-control-card>div { grid-column: 1 / -1; }
  .admin-control-card .button { grid-column: 1 / -1; }
  .admin-table-card { overflow-x: auto; }
  .admin-table-tools { position: sticky; left: 0; min-width: 720px; }
  .admin-account-row { min-width: 720px; }
  .admin-log-card { display: none; }
}

/* Persistent task flow and embedded video composer */
.workspace-long-content { overflow-y: auto; }
.workspace-grid { min-height: 620px; flex: 1 0 620px; }
.task-center { border-color: #35574f; border-radius: 8px; color: #dbe5e0; background: #0b2b26; }
.task-center.compact { margin: 9px 18px 0; }
.task-center summary { min-height: 40px; }
.task-center summary em { color: #173029; background: var(--private-champagne-soft); }
.task-center summary small, .task-item>div small, .task-time { color: #779087; }
.task-list { border-color: #315047; }
.task-item { border-color: #294840; }
.task-type { color: var(--private-champagne); background: #153c35; }
.task-item>div strong { color: #e7ece8; }
.task-item>b { color: #9db1aa; }
.task-item.completed>b { color: #a9d8c6; }
.task-item.error>b, .task-item.error small { color: #efafa4; }
.task-empty { color: #789188; }

.preview-workbench.full-preview { grid-template-columns: minmax(0, 1fr); }
.preview-workbench.video-composer-open { grid-template-columns: minmax(0, 1fr) minmax(270px, 310px); }
.video-composer { border-color: #8c7553; border-radius: 7px; color: #dbe5e0; background: #08231f; scrollbar-width: thin; scrollbar-color: #49675f transparent; }
.video-composer-head h3, .video-composer .video-source strong, .video-composer .video-form>label>strong, .video-preprocess-modes legend, .video-composer .video-options label { color: #eee9df; }
.video-composer .video-source { border-color: #3f5e56; background: #0c2c27; }
.video-composer .video-source span, .video-composer .modal-note, .video-prompt-presets>span { color: #819890; }
.video-composer .video-textarea, .video-composer .video-options select { border-color: #48665e; color: #e8eee9; background: #0d302b; }
.video-composer .video-textarea:focus, .video-composer .video-options select:focus { border-color: var(--private-champagne); box-shadow: 0 0 0 2px #e9cb941f; }
.video-composer .video-prompt-presets button { border-color: #46635b; color: #abc0b8; background: #0c2c27; }
.video-composer .video-prompt-presets button:hover { border-color: var(--private-champagne); color: var(--private-champagne-soft); background: #123a34; }
.video-preprocess-modes button { border-color: #46635b; color: #9ab0a8; background: #0c2c27; }
.video-preprocess-modes button.active { border-color: var(--private-champagne); color: #17251f; background: var(--private-champagne-soft); box-shadow: none; }
.video-composer .progress-track { background: #193b35; }
.video-composer .progress-track span { background: var(--private-champagne); }

@media (max-width: 900px) {
  .workspace-long-content { overflow-y: auto; }
  .app-shell[class*="mobile-workspace-step-"] .workspace-grid { height: auto; min-height: calc(100dvh - 146px); flex-basis: auto; }
  .task-center.compact { margin-inline: 12px; }
  .preview-workbench.video-composer-open { grid-template-columns: 1fr; }
  .video-composer { overflow: visible; padding-bottom: 86px; }
}
/* Ivory Medical: the production workbench skin */
:root {
  --ink: #273631;
  --muted: #7d8b86;
  --line: #e5e1d8;
  --blue: #398d80;
  --blue-dark: #2d756b;
  --cream: #f7f3ec;
  --navy: #263633;
}

body { background: #f4f1eb; color: #273631; }
.main-area { background: #f4f1eb; }
.workspace-grid { display: grid; grid-template-columns: minmax(430px, 1fr) minmax(480px, 1.12fr); gap: 20px; padding: 18px 38px 34px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.panel-heading h2 { margin: 7px 0 0; color: #2d3d37; font-size: 20px; letter-spacing: -.03em; }
.panel-heading p { margin: 7px 0 0; color: #91a09a; font-size: 10px; }
.panel-heading .panel-help { color: #97a8a1; }
.preview-heading { margin-bottom: 20px; }
.preview-heading h2 { color: #2d3d37; }
.preview-heading p { color: #91a09a; }
.sidebar { background: #263633; }
.logo-mark span:nth-child(3) { background: #8ec8bb; }
.workspace-pill, .credit-card { border-color: #3b4b47; background: #2c3d39; }
.workspace-dot, .avatar { background: #3b554f; color: #e4f2ed; }
.nav-item { color: #a8b9b3; }
.nav-item:hover { background: #314640; color: #f2faf6; }
.nav-item.active { background: #3a514b; box-shadow: inset 3px 0 #8bc9bb; color: #fff; }
.nav-item em, .new-dot { color: #9ed3c7; }
.credit-head strong { color: #c5e7df; }
.progress { background: #40524d; }
.progress i { background: #76b9ab; }
.credit-foot button { color: #a8d8ce; }
.topbar { background: #fffdf9; border-color: #e5e1d8; }
.button.primary, .generate-button { background: #398d80; box-shadow: 0 6px 16px #398d8028; }
.button.primary:hover, .generate-button:hover { background: #2d756b; }
.button.secondary { background: #e3f1ed; color: #2d756b; }
.button.ghost { border-color: #dedbd3; background: #fffdf9; color: #5d6d68; }
.notice { background: #eef7f2; border-color: #d4e9df; color: #58776d; }
.notice-icon { background: #dcefe7; color: #398d80; }
.notice b { color: #2d756b; }
.notice span { color: #6e8a81; }
.notice button, .link-button { color: #398d80; }
.setup-panel, .preview-panel { border-color: #e3ded5; background: #fffdf9; box-shadow: 0 12px 35px #6a563b0a; }
.eyebrow { color: #91a29b; }
.step-block { border-color: #eee9e0; }
.step-index { background: #e5f1ed; color: #398d80; }
.step-header p, .privacy-note, .upload-box>span:not(.uploaded-label), .text-field span, .select-field span { color: #91a09a; }
.upload-box { height: 156px; aspect-ratio: 1.62 / 1; background: #fbfaf6; border-color: #cfdad4; }
.upload-box:hover { border-color: #65a99c; background: #f5fbf8; }
.upload-icon { background: #e1f1ec; color: #398d80; }
.upload-box.has-image { border-color: #bcd6ce; background: #e9e7df; }
.upload-box.has-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: none; background: #e9e7df; }
.round-control { color: #398d80; }
.uploaded-label { color: #398d80; }
.select-field, .text-field { background: #fbfaf6; border-color: #e4e0d7; }
.select-field:hover, .text-field:focus-within { border-color: #92c4b8; background: #fffdf9; }
.day-selector button { border-color: #e2ded5; background: #fffdf9; color: #71817a; }
.day-selector button.selected { background: #398d80; border-color: #398d80; box-shadow: 0 5px 12px #398d8024; }
.day-selector .all-days { color: #398d80; }
.preview-panel { background: linear-gradient(145deg, #fffdf9, #faf7f1); }
.preview-card { border-color: #e3ded5; background: #fffdf9; }
.preview-card:hover, .preview-card.selected { border-color: #72aa9e; box-shadow: 0 8px 20px #398d8018; }
.preview-image { background: #ece9e1; }
.preview-image img { filter: none; }
.preview-card.selected .card-select { background: #398d80; border-color: #398d80; }
.empty-state { border-color: #d8e2dc; color: #94a29c; }
.empty-orbit { color: #398d80; background: #e7f3ee; box-shadow: 0 0 0 12px #f2f8f4; }
.empty-state b { color: #59736a; }
.preview-footer { border-color: #eee9e0; }
.stat-dot { background: #62aa8f; }
.config-chip { border-color: #d3e5dd; background: #f3faf7; color: #69857b; }
.config-chip.ok { color: #2f846f; border-color: #b9ddcf; background: #eff9f5; }
.video-button { color: #2d756b; border-color: #c8e2da; background: #eff8f4; }
.result-banner { border-color: #cfe6dc; color: #337b6c; background: #f0f9f5; }
.result-dot { background: #398d80; box-shadow: 0 0 0 4px #dcefe7; }
.result-banner b { color: #2d756b; }
.result-banner span { color: #6c9185; }
.page-heading h1, .history-count b, .project-title b { color: #2d3d37; }
.page-heading p, .history-count, .project-title span, .project-line, .case-copy>div { color: #87968f; }
.case-filter { border-color: #e5e1d8; }
.case-filter button.active { color: #2d756b; background: #e3f1ed; }
.filter-search, .case-card, .history-list, .project-table, .project-summary>div { border-color: #e3ded5; background: #fffdf9; }
.case-copy button, .row-action { color: #398d80; }
.history-row, .project-table-head, .project-line { border-color: #eee9e0; }
.history-row.head, .project-table-head { color: #9aa9a2; background: #fbfaf6; }
.project-icon.p0 { color: #398d80; background: #e3f1ed; }
.project-icon.p1 { color: #9e6a85; background: #f3e8ed; }
.project-icon.p2 { color: #a77b4f; background: #f4eadc; }

@media (max-width: 520px) {
  .upload-box { height: 148px; aspect-ratio: auto; }
}

@media (max-width: 1200px) {
  .workspace-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .workspace-grid { padding: 15px 16px 25px; }
}

@media (max-width: 520px) {
  .workspace-grid { padding: 15px 16px 25px; }
  .panel-heading { display: block; }
  .preview-heading .preview-actions { margin-top: 15px; }
}

/* Consultation workflow: project selection, multi-format output and client preview */
.setup-panel { overflow: hidden; }
.panel-title p { margin: 7px 0 0; color: #91a09a; font-size: 10px; }
.notice p { margin: 0; color: #6e8a81; font-size: 11px; }
.upload-grid { min-width: 0; }
.upload-box { width: 100%; min-width: 0; height: 156px; aspect-ratio: auto; }
.portrait-source-heading { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 8px; color: #597069; font-size: 10px; font-weight: 800; }
.portrait-source-heading small { color: #94a29c; font-size: 9px; font-weight: 500; }
.portrait-source-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.portrait-source-switch>button { min-width: 0; min-height: 54px; position: relative; display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 7px; border: 1px solid #dedbd3; border-radius: 11px; padding: 8px; color: #71817a; background: #fffdf9; text-align: left; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.portrait-source-switch>button:hover { border-color: #8cbeb3; color: #2e7167; background: #f7fbf9; transform: translateY(-1px); }
.portrait-source-switch>button.selected { border-color: #398d80; color: #286e64; background: #edf7f3; box-shadow: inset 0 0 0 1px #398d8017; }
.portrait-option-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #6f827b; background: #f0eee8; }
.portrait-source-switch>button.selected .portrait-option-icon { color: #2f7f73; background: #dceee8; }
.portrait-source-switch>button>span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.portrait-source-switch b { font-size: 10px; white-space: nowrap; }
.portrait-source-switch small { overflow: hidden; color: #96a19d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.portrait-source-switch>button>.icon { position: absolute; top: 5px; right: 5px; color: transparent; }
.portrait-source-switch>button.selected>.icon { color: #398d80; }
.portrait-source-switch>button:focus-visible { outline: 3px solid #a9d2c8; outline-offset: 2px; }
.portrait-generated-box { cursor: default; }
.portrait-generated-box.is-generating { border-style: solid; border-color: #8fc4b7; background: #f2f8f5; }
.portrait-loading-line { width: 56%; height: 3px; overflow: hidden; position: relative; margin-top: 13px; border-radius: 999px; background: #d8e9e3; }
.portrait-loading-line::after { content: ''; width: 38%; position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: #4b9a8d; animation: portrait-loading 1.1s ease-in-out infinite alternate; }
@keyframes portrait-loading { to { transform: translateX(165%); } }
.portrait-generation-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 10px; border: 1px solid #d9e4df; border-radius: 12px; padding: 11px 12px; background: #f6faf8; }
.portrait-generation-copy { min-width: 0; display: grid; gap: 4px; }
.portrait-generation-copy b, .portrait-description>span { color: #385b51; font-size: 10px; }
.portrait-generation-copy span { color: #84958f; font-size: 9px; line-height: 1.5; }
.portrait-free-builder { min-width: 0; display: grid; gap: 9px; }
.portrait-description { min-width: 0; display: grid; gap: 6px; }
.portrait-description em { margin-left: 4px; color: #91a09a; font-size: 8px; font-style: normal; font-weight: 500; }
.portrait-description textarea { width: 100%; min-height: 58px; resize: vertical; border: 1px solid #dedbd3; border-radius: 9px; padding: 9px 10px; outline: none; color: #32483f; background: #fffdf9; font: inherit; font-size: 10px; line-height: 1.55; }
.portrait-description textarea::placeholder { color: #a2aaa6; }
.portrait-description textarea:focus { border-color: #69a99c; box-shadow: 0 0 0 3px #dfeee9; }
.portrait-generate-button { min-width: 118px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; padding: 0 12px; color: #fff; background: #398d80; font-size: 10px; font-weight: 800; box-shadow: 0 5px 13px #398d8025; }
.portrait-generate-button:hover:not(:disabled) { background: #2d756b; transform: translateY(-1px); }
.portrait-generate-button:active:not(:disabled) { transform: translateY(0); }
.portrait-generate-button:disabled { cursor: not-allowed; color: #a6b0ac; background: #e4e7e4; box-shadow: none; }
.portrait-ready-status { display: flex; align-items: center; gap: 6px; margin-top: 9px; border-radius: 8px; padding: 7px 9px; color: #87958f; background: #f4f2ed; font-size: 9px; }
.portrait-ready-status.ready { color: #2f786c; background: #eaf5f1; }
.portrait-ready-status .icon { flex: 0 0 auto; }
.step-block[data-step="1"] .step-header h3 { display: flex; align-items: center; gap: 8px; }
.step-block[data-step="1"] .step-header h3::after { content: '标准提示词 V2'; border: 1px solid #acd7cc; border-radius: 999px; padding: 3px 7px; color: #2d786d; background: #edf8f4; font: 800 8px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.project-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.project-category-grid button { position: relative; min-height: 46px; border: 1.5px solid #d7ded8; border-radius: 12px; color: #435a51; background: #fffdf9; box-shadow: 0 3px 9px #3852470d; font-size: 13.5px; font-weight: 800; letter-spacing: .025em; transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.project-category-grid button:hover { border-color: #72ad9f; color: #236f64; background: #f7fbf9; transform: translateY(-1px); }
.project-category-grid button.selected { border-color: #247f72; color: #fff; background: #328f81; box-shadow: 0 8px 18px #247f7230, inset 0 0 0 1px #ffffff22; }
.project-category-grid button.selected::after { content: ''; position: absolute; top: 7px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: #d9fff5; box-shadow: 0 0 0 3px #d9fff528; }
.project-select-grid { margin-top: 2px; }
.project-select-grid .select-field { border-width: 1.5px; border-radius: 11px; }
.project-select-grid .select-field>span { color: #72877f; font-size: 11px; font-weight: 700; }
.project-select-grid .select-field select { color: #263f36; font-size: 14px; font-weight: 750; }
.output-step { padding-bottom: 18px; }
.output-option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.output-option-grid>button { min-width: 0; display: flex; align-items: center; gap: 9px; border: 1px solid #e2ded5; border-radius: 10px; padding: 11px 10px; color: #71817a; background: #fffdf9; text-align: left; }
.output-option-grid>button:hover { border-color: #92c4b8; }
.output-option-grid>button.selected { border-color: #398d80; color: #2d756b; background: #edf7f3; box-shadow: inset 0 0 0 1px #398d8020; }
.project-category-grid button:focus-visible, .output-option-grid>button:focus-visible, .preview-mode-tabs button:focus-visible, .client-preview-tabs button:focus-visible { outline: 3px solid #a9d2c8; outline-offset: 2px; }
.output-option-grid>button>span { min-width: 0; display: grid; gap: 3px; }
.output-option-grid b { font-size: 11px; white-space: nowrap; }
.output-option-grid small { overflow: hidden; color: #91a09a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.preview-mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 16px; border-radius: 10px; padding: 4px; background: #efede7; }
.preview-mode-tabs button { border-radius: 8px; padding: 9px 10px; color: #82918b; font-size: 11px; }
.preview-mode-tabs button.active { color: #2d756b; background: #fffdf9; box-shadow: 0 3px 12px #54483212; font-weight: 700; }
.comparison-stage { display: grid; gap: 12px; }
.comparison-toolbar { display: flex; align-items: center; justify-content: space-between; color: #8b9893; font-size: 10px; }
.comparison-toolbar>div { display: flex; gap: 4px; }
.comparison-toolbar button { border: 1px solid #dedbd3; border-radius: 7px; padding: 5px 9px; color: #7c8984; background: #fffdf9; font-size: 10px; }
.comparison-toolbar button.active { border-color: #8fc4b7; color: #2d756b; background: #e9f4f0; }
.comparison-canvas { min-height: 430px; position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #ddd8ce; border-radius: 14px; background: #e8e4dc; }
.comparison-canvas.stack { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.comparison-canvas>div { min-width: 0; min-height: 0; position: relative; overflow: hidden; }
.comparison-canvas>div+div { border-left: 1px solid #fff9; }
.comparison-canvas.stack>div+div { border-top: 1px solid #fff9; border-left: 0; }
.comparison-canvas img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 28%; }
.comparison-canvas>div>span { position: absolute; left: 12px; top: 12px; border-radius: 999px; padding: 6px 9px; color: #fff; background: #263633d9; font-size: 10px; }
.comparison-canvas>div+div>span { background: #398d80e8; }
.comparison-canvas>p { position: absolute; right: 12px; bottom: 9px; margin: 0; border-radius: 999px; padding: 5px 8px; color: #fff; background: #263633aa; font-size: 9px; }
.result-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.result-picker button { overflow: hidden; border: 1px solid #e1ddd4; border-radius: 9px; padding: 4px; color: #84918c; background: #fffdf9; font-size: 9px; }
.result-picker button.selected { border-color: #398d80; color: #2d756b; box-shadow: 0 0 0 2px #d9ece6; }
.result-picker img { width: 100%; height: 56px; display: block; border-radius: 6px; object-fit: cover; object-position: center 25%; }
.result-picker span { display: block; padding: 5px 2px 2px; }
.video-preview-stage { min-height: 430px; display: grid; grid-template-columns: minmax(230px, .8fr) minmax(210px, .65fr); align-items: center; gap: 24px; border: 1px solid #e0dbd2; border-radius: 14px; padding: 18px; background: #f6f2eb; }
.video-preview-stage video, .video-poster { width: min(100%, 280px); aspect-ratio: 9 / 16; justify-self: center; overflow: hidden; border-radius: 13px; background: #263633; box-shadow: 0 15px 35px #26363322; }
.video-preview-stage video { display: block; object-fit: contain; }
.video-poster { position: relative; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: .9; }
.video-poster>span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: #26363333; }
.video-poster>span .icon { box-sizing: content-box; border-radius: 50%; padding: 13px; background: #398d80e6; }
.video-preview-stage>div:last-child { display: grid; gap: 10px; align-content: center; }
.video-preview-stage strong { color: #344a42; font-size: 16px; }
.video-preview-stage span { color: #8a9892; font-size: 11px; line-height: 1.6; }
.video-preview-stage .button { width: fit-content; margin-top: 4px; }

.client-preview-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 24px; background: #14201dbd; backdrop-filter: blur(10px); }
.client-preview-page { width: min(1060px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #e3ded5; border-radius: 22px; padding: 24px; background: #f9f6f0; box-shadow: 0 30px 100px #07100d66; }
.client-preview-page>header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.client-preview-brand { color: #769088; font-size: 10px; letter-spacing: .08em; }
.client-preview-page h2 { margin: 7px 0 0; color: #2d3d37; font-size: 24px; }
.client-preview-tabs { display: flex; gap: 6px; margin: 18px 0 14px; }
.client-preview-tabs button { border: 1px solid #ddd8cf; border-radius: 999px; padding: 7px 13px; color: #7f8d87; background: #fffdf9; font-size: 11px; }
.client-preview-tabs button.active { border-color: #398d80; color: #fff; background: #398d80; }
.client-preview-canvas { min-height: 540px; display: grid; place-items: center; overflow: hidden; border: 1px solid #ded9cf; border-radius: 16px; background: #e6e2da; }
.client-preview-canvas>img, .client-preview-canvas>video { width: 100%; max-height: 680px; display: block; object-fit: contain; }
.client-preview-canvas>.comparison-canvas { width: 100%; min-height: 620px; border: 0; border-radius: 0; }
.client-video-empty { display: grid; justify-items: center; gap: 9px; color: #71837c; }
.client-video-empty strong { color: #40544d; }

.customer-field { flex: 0 0 128px; }
.age-field { flex: 0 0 82px; }
.action-notice { margin: 10px 38px 0; display: flex; align-items: center; gap: 9px; border: 1px solid #cfe5dc; border-radius: 10px; padding: 10px 13px; color: #356f63; background: #edf7f3; font-size: 11px; }
.action-notice span { flex: 1; }
.action-notice button { display: grid; place-items: center; color: #6d8f85; }

.filter-search { min-width: 220px; display: flex; align-items: center; gap: 7px; padding: 0 11px; }
.filter-search input { width: 100%; border: 0; outline: 0; padding: 8px 0; color: #344a42; background: transparent; font-size: 11px; }
.filter-search input::placeholder { color: #9ca9a3; }
.case-image>em { position: absolute; right: 11px; top: 11px; border: 1px solid #ffffffb8; border-radius: 999px; padding: 5px 8px; color: #fff; background: #398d80de; font-size: 9px; font-style: normal; backdrop-filter: blur(8px); }
.case-copy>p { min-height: 30px; margin: -5px 0 12px; color: #8b9993; font-size: 10px; line-height: 1.55; }
.case-empty, .project-empty { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #d9e2dc; border-radius: 12px; color: #91a09a; background: #fbfaf6; }
.case-empty b, .project-empty b { margin-top: 5px; color: #536b62; font-size: 13px; }
.case-empty span, .project-empty span { font-size: 10px; }

.project-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.project-tools label { width: min(340px, 100%); display: flex; align-items: center; gap: 8px; border: 1px solid #e3ded5; border-radius: 9px; padding: 0 11px; color: #799087; background: #fffdf9; }
.project-tools input { width: 100%; border: 0; outline: 0; padding: 10px 0; color: #344a42; background: transparent; font-size: 11px; }
.project-tools span { color: #91a09a; font-size: 10px; }
.row-actions { display: flex; align-items: center; gap: 12px; }
.row-delete { color: #b56b69; font-size: 10px; }
.row-delete:hover { color: #943f3d; }
.project-table>.project-empty { border: 0; border-radius: 0; background: transparent; }

@media (max-width: 800px) {
  .action-notice { margin: 10px 16px 0; }
  .customer-field, .age-field { flex-basis: auto; }
  .project-tools { align-items: stretch; flex-direction: column; }
  .project-tools span { align-self: flex-end; }
}
.client-preview-page>footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; }
.client-preview-page>footer>div { display: flex; align-items: center; gap: 8px; color: #7f8d87; font-size: 10px; }

@media (max-width: 900px) {
  .project-category-grid { grid-template-columns: repeat(3, 1fr); }
  .video-preview-stage { grid-template-columns: 1fr; }
  .video-preview-stage>div:last-child { justify-items: center; text-align: center; }
  .client-preview-page>footer { align-items: stretch; flex-direction: column; }
  .client-preview-page>footer>div:last-child { justify-content: flex-end; }
}

@media (max-width: 520px) {
  .portrait-source-switch { gap: 5px; }
  .portrait-source-switch>button { grid-template-columns: 24px minmax(0, 1fr); gap: 5px; min-height: 50px; padding: 6px; }
  .portrait-option-icon { width: 24px; height: 24px; }
  .portrait-source-switch>button>.icon, .portrait-source-switch small { display: none; }
  .portrait-source-switch b { white-space: normal; line-height: 1.25; }
  .portrait-generation-controls { grid-template-columns: 1fr; gap: 8px; }
  .portrait-generate-button { width: 100%; }
  .project-category-grid { grid-template-columns: repeat(2, 1fr); }
  .output-option-grid { grid-template-columns: 1fr; }
  .comparison-canvas { min-height: 360px; }
  .client-preview-backdrop { padding: 8px; }
  .client-preview-page { padding: 16px; border-radius: 16px; }
  .client-preview-canvas { min-height: 420px; }
  .client-preview-canvas>.comparison-canvas { min-height: 480px; }
}
.nav-item.nav-locked,
.nav-item.nav-locked:hover {
  cursor: not-allowed;
  border-color: transparent;
  color: #536e67;
  background: #0a2723;
  box-shadow: none;
  opacity: .68;
}

.nav-item.nav-locked > svg:last-of-type { margin-left: auto; color: #6f837e; }

.membership-page {
  min-height: calc(100vh - 86px);
  padding: 30px;
  color: var(--private-pearl);
  background:
    radial-gradient(circle at 86% 0%, #2b554741 0, transparent 27%),
    linear-gradient(180deg, #082521 0%, #061d1b 100%);
  overflow-y: auto;
}

.membership-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 18px;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto 28px;
}

.membership-hero-copy,
.membership-balance {
  border: 1px solid var(--private-line);
  border-radius: 14px;
  background: #0c302b;
}

.membership-hero-copy {
  padding: 30px 32px;
  position: relative;
  overflow: hidden;
}

.membership-hero-copy::after {
  content: '';
  position: absolute;
  right: -55px;
  top: -72px;
  width: 220px;
  height: 220px;
  border: 1px solid #d6b77d2c;
  border-radius: 50%;
  box-shadow: 0 0 0 34px #d6b77d0a, 0 0 0 68px #d6b77d08;
  pointer-events: none;
}

.membership-hero h1 {
  margin: 8px 0 9px;
  font: 600 32px/1.2 'Noto Serif SC', 'Songti SC', serif;
  letter-spacing: .02em;
}

.membership-hero p { margin: 0; color: #92aaa2; font-size: 13px; }

.membership-status-line {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: 25px;
  padding: 9px 12px;
  border: 1px solid #4a685f;
  border-radius: 999px;
  color: var(--private-champagne);
  background: #112f2a;
}

.membership-status-line strong { font-size: 12px; }
.membership-status-line span { color: #9db1aa; font-size: 10px; }

.membership-balance {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
  border-color: #876f48;
  background: linear-gradient(145deg, #163a32, #0c2b27);
}

.membership-balance span { color: #9fb2ab; font-size: 11px; }
.membership-balance strong { margin: 9px 0; color: var(--private-champagne-soft); font: 500 48px/1 'DM Mono', monospace; }
.membership-balance small { color: #788f87; font-size: 10px; }

.membership-message {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1180px;
  margin: -12px auto 22px;
  padding: 11px 14px;
  border: 1px solid #4f7568;
  border-radius: 8px;
  color: #c7ded6;
  background: #123a33;
  font-size: 12px;
}

.membership-page > .api-error { max-width: 1180px; margin: -12px auto 22px !important; }

.membership-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto 14px;
}

.membership-section-head span { color: var(--private-champagne); font: 500 9px 'DM Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
.membership-section-head h2 { margin: 5px 0 0; font: 600 20px 'Noto Serif SC', 'Songti SC', serif; }
.membership-section-head > small { color: #769088; font-size: 10px; }

.membership-package-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto 30px;
}

.membership-package {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--private-line);
  border-radius: 12px;
  background: #0b2a26;
}

.membership-package.featured {
  border-color: #8f7448;
  background: linear-gradient(155deg, #173c33, #0d2b27 68%);
  box-shadow: inset 0 3px var(--private-champagne);
}

.membership-package header { display: flex; align-items: center; justify-content: space-between; min-height: 22px; color: var(--private-champagne); }
.membership-package header span { padding: 4px 7px; border: 1px solid #5f654e; border-radius: 999px; font-size: 8px; letter-spacing: .08em; }
.membership-package h3 { margin: 19px 0 8px; color: #f0ebe3; font: 600 17px 'Noto Serif SC', 'Songti SC', serif; }
.membership-package > strong { display: block; min-height: 35px; color: #c8d6d1; font-size: 12px; line-height: 1.5; }
.membership-package p { min-height: 40px; margin: 8px 0 16px; color: #758e86; font-size: 10px; line-height: 1.7; }
.membership-price { color: var(--private-champagne-soft); font: 500 27px 'DM Mono', monospace; }
.membership-price small { margin-right: 2px; font-size: 12px; }
.membership-package button {
  width: 100%;
  margin-top: 17px;
  padding: 10px 12px;
  border: 1px solid #756b51;
  border-radius: 7px;
  color: #17251f;
  background: var(--private-champagne-soft);
  font-size: 11px;
  font-weight: 800;
}
.membership-package button:hover:not(:disabled) { background: #f4dfb8; }
.membership-package button:disabled { cursor: wait; opacity: .5; }

.membership-orders {
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--private-line);
  border-radius: 12px;
  background: #092723;
}

.membership-orders .membership-section-head { max-width: none; margin: 0; padding: 17px 19px; border-bottom: 1px solid var(--private-line-soft); }
.membership-orders article { display: grid; grid-template-columns: minmax(210px, 1.4fr) 1fr 80px auto; gap: 14px; align-items: center; padding: 13px 19px; border-bottom: 1px solid var(--private-line-soft); color: #94aaa3; font-size: 11px; }
.membership-orders article:last-child { border-bottom: 0; }
.membership-orders article > div { display: flex; flex-direction: column; gap: 4px; }
.membership-orders article strong { color: #e6e1d8; font-size: 11px; }
.membership-orders article div span { color: #617d75; font: 9px 'DM Mono', monospace; }
.membership-orders article em { color: #cda26e; font-size: 10px; font-style: normal; }
.membership-orders article em.paid { color: #78c7a8; }
.membership-orders article button { padding: 7px 10px; border: 1px solid #61766f; border-radius: 6px; color: #dfd8ca; font-size: 10px; }
.membership-orders article button:hover:not(:disabled) { border-color: var(--private-champagne); color: var(--private-champagne-soft); }
.membership-empty { padding: 34px 20px; color: #6f8880; text-align: center; font-size: 11px; }

.membership-payment-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: #020d0bd9; backdrop-filter: blur(8px); }
.membership-payment-modal { width: min(420px, 100%); padding: 30px; position: relative; border: 1px solid #6f654c; border-radius: 15px; color: var(--private-pearl); background: #0d302a; text-align: center; box-shadow: 0 24px 80px #0008; }
.membership-payment-close { position: absolute; right: 13px; top: 13px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #9aada7; }
.membership-payment-close:hover { color: #fff; background: #173f37; }
.membership-payment-modal > span { color: var(--private-champagne); font-size: 10px; letter-spacing: .13em; }
.membership-payment-modal h2 { margin: 9px 0 17px; font: 600 22px 'Noto Serif SC', 'Songti SC', serif; }
.membership-payment-modal img { display: block; width: 220px; max-width: 100%; margin: 0 auto 16px; padding: 9px; border-radius: 10px; background: #fff; }
.membership-payment-modal > strong { color: var(--private-champagne-soft); font: 500 25px 'DM Mono', monospace; }
.membership-payment-modal p { margin: 12px 0 0; color: #829a92; font-size: 11px; }
.membership-payment-success { padding: 20px 0; color: #78c7a8; }
.membership-payment-success h2 { color: var(--private-pearl); }

@media (max-width: 1050px) {
  .membership-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .mobile-module-locked { cursor: not-allowed !important; filter: grayscale(.75); opacity: .48; }
  .membership-page { min-height: 100vh; padding: 24px 16px 98px; }
  .membership-hero { grid-template-columns: 1fr; }
  .membership-balance { min-height: 145px; }
  .membership-section-head { align-items: flex-start; gap: 12px; }
  .membership-section-head > small { max-width: 160px; text-align: right; line-height: 1.5; }
  .membership-orders article { grid-template-columns: minmax(0, 1fr) auto; }
  .membership-orders article > span { display: none; }
  .membership-orders article > small { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .membership-hero-copy { padding: 24px 20px; }
  .membership-hero h1 { font-size: 27px; }
  .membership-status-line { align-items: flex-start; flex-wrap: wrap; border-radius: 9px; }
  .membership-status-line span { width: 100%; padding-left: 27px; }
  .membership-package-grid { grid-template-columns: 1fr; }
  .membership-package p, .membership-package > strong { min-height: 0; }
  .membership-orders article { gap: 8px; padding: 13px; }
}
.support-page {
  min-height: calc(100vh - 86px);
  padding: 30px;
  overflow-y: auto;
  color: var(--private-pearl);
  background:
    radial-gradient(circle at 78% 5%, rgba(52, 101, 85, .24), transparent 31%),
    linear-gradient(180deg, #082521 0%, #061d1b 100%);
}

.support-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto 18px;
}

.support-heading h1 {
  margin: 7px 0 8px;
  font: 600 31px/1.2 'Noto Serif SC', 'Songti SC', serif;
  letter-spacing: .02em;
}

.support-heading p { margin: 0; color: #8da49c; font-size: 12px; }

.support-availability {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 148px;
  padding: 10px 13px;
  border: 1px solid #46675e;
  border-radius: 9px;
  background: #0d302b;
}

.support-availability > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #78c7a8;
  box-shadow: 0 0 0 5px rgba(120, 199, 168, .1);
}

.support-availability > span { display: flex; flex-direction: column; gap: 2px; }
.support-availability strong { color: #e9e5dc; font-size: 11px; }
.support-availability small { color: #768f87; font-size: 9px; }

.support-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 610px;
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--private-line);
  border-radius: 15px;
  background: #092723;
  box-shadow: 0 24px 70px rgba(1, 12, 10, .25);
}

.support-profile {
  padding: 33px 27px;
  border-right: 1px solid var(--private-line);
  background: linear-gradient(165deg, #123831 0%, #0a2925 72%);
}

.support-seal,
.support-mini-seal,
.support-message-avatar {
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid #94784d;
  border-radius: 50%;
  color: #182720;
  background: var(--private-champagne-soft);
  font-family: 'Noto Serif SC', 'Songti SC', serif;
  box-shadow: inset 0 0 0 4px rgba(20, 49, 42, .1);
}

.support-seal { width: 78px; height: 78px; margin-bottom: 23px; font-size: 31px; }
.support-profile > span { color: var(--private-champagne); font: 500 9px 'DM Mono', monospace; letter-spacing: .16em; }
.support-profile h2 { margin: 6px 0 11px; color: #f2eee6; font: 600 24px 'Noto Serif SC', 'Songti SC', serif; }
.support-profile > p { margin: 0; color: #90a79f; font-size: 11px; line-height: 1.8; }

.support-capabilities { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--private-line-soft); }
.support-capabilities > span { color: #718b83; font-size: 9px; letter-spacing: .12em; }
.support-capabilities ul { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.support-capabilities li { display: flex; align-items: center; gap: 8px; color: #c7d4cf; font-size: 11px; }
.support-capabilities li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--private-champagne); }

.support-boundary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 27px;
  padding: 11px;
  border: 1px solid #47675e;
  border-radius: 8px;
  color: #91aaa2;
  background: #0b2e29;
  font-size: 9px;
  line-height: 1.6;
}

.support-boundary .icon { margin-top: 1px; color: var(--private-champagne); }

.support-chat { display: grid; grid-template-rows: auto minmax(300px, 1fr) auto auto auto; min-width: 0; background: #071f1c; }
.support-chat-head { display: flex; align-items: center; gap: 10px; padding: 15px 19px; border-bottom: 1px solid var(--private-line-soft); background: #0b2b27; }
.support-mini-seal { width: 34px; height: 34px; font-size: 14px; }
.support-chat-head > div:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.support-chat-head strong { color: #eee9e0; font-size: 12px; }
.support-chat-head span { color: #729087; font-size: 9px; }
.support-chat-head > small { margin-left: auto; color: #6f887f; font: 8px 'DM Mono', monospace; letter-spacing: .13em; }

.support-messages {
  display: flex;
  flex-direction: column;
  gap: 19px;
  min-height: 0;
  max-height: 420px;
  padding: 25px 25px 18px;
  overflow-y: auto;
  scrollbar-color: #3a5b52 transparent;
}

.support-message { display: flex; align-items: flex-start; gap: 9px; max-width: min(78%, 640px); }
.support-message.user { align-self: flex-end; flex-direction: row-reverse; }
.support-message-avatar { width: 27px; height: 27px; margin-top: 16px; font-size: 11px; }
.support-message > div { display: flex; flex-direction: column; gap: 5px; }
.support-message.user > div { align-items: flex-end; }
.support-message small { padding: 0 4px; color: #6e8980; font-size: 9px; }
.support-message p { margin: 0; padding: 11px 13px; border: 1px solid #3c5c54; border-radius: 4px 12px 12px; color: #d8e0dc; background: #0e312c; font-size: 11px; line-height: 1.75; white-space: pre-wrap; }
.support-message.user p { border-color: #7d6a4a; border-radius: 12px 4px 12px 12px; color: #18261f; background: var(--private-champagne-soft); }

.support-quick { display: flex; gap: 7px; padding: 6px 19px 13px; overflow-x: auto; }
.support-quick button { flex: none; padding: 7px 10px; border: 1px solid #3d5b54; border-radius: 999px; color: #9eb0aa; background: #0a2925; font-size: 9px; }
.support-quick button:hover { border-color: var(--private-champagne); color: var(--private-champagne-soft); }

.support-composer { display: flex; gap: 9px; margin: 0 19px; padding: 8px; border: 1px solid #526a63; border-radius: 10px; background: #0d302b; }
.support-composer label { flex: 1; min-width: 0; }
.support-composer textarea { display: block; width: 100%; min-height: 38px; max-height: 100px; resize: none; border: 0; outline: 0; padding: 10px; color: #eeeae2; background: transparent; font: 11px/1.5 inherit; }
.support-composer textarea::placeholder { color: #668179; }
.support-composer button { display: grid; place-items: center; align-self: flex-end; width: 38px; height: 38px; border-radius: 8px; color: #17251f; background: var(--private-champagne-soft); }
.support-composer button:disabled { cursor: not-allowed; opacity: .35; }
.support-disclaimer { margin: 9px 20px 13px; color: #607a72; font-size: 8px; text-align: center; }

.support-page button:focus-visible,
.support-page textarea:focus-visible { outline: 2px solid var(--private-champagne); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.mobile-module-soon { position: absolute; right: 13px; bottom: 15px; padding: 4px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 8px; }

@media (max-width: 800px) {
  .support-page { min-height: 100vh; padding: 22px 14px 98px; }
  .support-heading { align-items: flex-start; gap: 14px; }
  .support-heading h1 { font-size: 26px; }
  .support-availability { display: none; }
  .support-layout { grid-template-columns: 1fr; min-height: 0; }
  .support-profile { display: none; }
  .support-chat { min-height: 600px; }
  .support-messages { max-height: none; }
  .support-message { max-width: 88%; }
}

@media (max-width: 520px) {
  .support-heading p { max-width: 200px; line-height: 1.6; }
  .support-chat { min-height: 570px; }
  .support-chat-head { padding: 13px 14px; }
  .support-messages { padding: 20px 14px 16px; }
  .support-quick { padding-inline: 14px; }
  .support-composer { margin-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .support-page * { scroll-behavior: auto !important; }
}
/* Final responsive pass: compact mobile density, natural document scrolling and contained video previews. */

.mobile-inline-video-settings { display: none; }
.video-prompt-presets button.active { border-color: var(--private-champagne, #d8b87c); color: #17251f; background: var(--private-champagne-soft, #efd39d); }
.video-poster small { position: absolute; left: 9px; bottom: 9px; border-radius: 4px; padding: 4px 6px; color: #f4eee5; background: #0a211ed6; font-size: 8px; letter-spacing: .06em; }

@media (min-width: 901px) {
  .preview-workbench.video-composer-open .preview-workbench-main { min-height: 0; overflow: hidden; }
  .preview-workbench.video-composer-open .video-preview-stage {
    min-height: 0;
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    overflow: hidden;
    padding: 12px;
  }
  .preview-workbench.video-composer-open .video-poster {
    width: min(100%, 210px);
    height: auto;
    max-height: 100%;
    aspect-ratio: 9 / 16;
    border: 1px solid #415f57;
    border-radius: 6px;
    box-shadow: none;
  }
  .preview-workbench.video-composer-open .video-poster img { display: block; }
  .preview-workbench.video-composer-open .video-preview-stage>div:last-child { display: none; }
}

@media (max-width: 800px) {
  html, body, #root { height: auto; min-height: 100%; overflow-y: auto; }
  body { overscroll-behavior-y: auto; }

  .app-shell,
  .app-shell:not(.mobile-hub-open) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }
  .main-area,
  .mobile-content-shell,
  .workspace-long-content { height: auto; min-height: 0; overflow: visible; }

  .topbar { min-height: 56px; height: 56px; padding-inline: 13px; }
  .breadcrumbs strong { font-size: 17px; }
  .topbar .top-actions .button.primary.small { min-width: 98px; min-height: 36px; padding: 0 11px; border-radius: 8px; font-size: 12px; }

  .mobile-bottom-nav {
    left: 8px;
    right: 8px;
    bottom: max(6px, env(safe-area-inset-bottom));
    height: 58px;
    grid-template-columns: 1fr 1.2fr 1fr;
    border-radius: 14px;
    padding: 4px;
  }
  .mobile-bottom-nav button { gap: 4px; border-radius: 9px; font-size: 10px; }
  .mobile-bottom-nav button:nth-child(2) { gap: 0; }
  .mobile-bottom-nav svg { width: 18px; height: 18px; }

  .mobile-generate-button {
    left: 12px;
    right: 12px;
    bottom: max(70px, calc(env(safe-area-inset-bottom) + 66px));
    min-height: 48px;
    border-radius: 10px;
    font-size: 14px;
  }
  .mobile-generate-button svg { width: 19px; height: 19px; }

  .mobile-hub,
  .mobile-workspace-menu { min-height: calc(100dvh - 124px); align-content: start; gap: 14px; padding: 18px 12px 20px; }
  .mobile-hub h1,
  .mobile-workspace-menu h1 { font-size: clamp(23px, 7vw, 29px); }
  .mobile-hub-grid,
  .mobile-workspace-grid { gap: 8px; }
  .mobile-hub-grid>button { min-height: 118px; border-radius: 14px; padding: 12px; }
  .mobile-module-icon { width: 36px; height: 36px; left: 12px; top: 12px; border-radius: 10px; }
  .mobile-module-icon svg { width: 23px; height: 23px; }
  .mobile-hub-grid strong { font-size: 14px; }
  .mobile-hub-grid small { font-size: 9px; }
  .mobile-module-arrow { right: 10px; bottom: 14px; width: 15px; }
  .mobile-workspace-grid>button { min-height: 94px; border-radius: 13px; padding: 12px; }
  .mobile-workspace-grid>button:last-child { min-height: 70px; }
  .workspace-module-icon { width: 33px; height: 33px; left: 11px; top: 11px; border-radius: 9px; }
  .workspace-module-copy strong { font-size: 13px; }
  .workspace-module-copy small { font-size: 9px; }

  .app-shell[class*="mobile-workspace-step-"] .workspace-grid {
    height: auto;
    min-height: calc(100dvh - 124px);
    overflow: visible;
    align-items: start;
    padding: 8px 10px calc(128px + env(safe-area-inset-bottom));
  }
  .app-shell[class*="mobile-workspace-step-"] .setup-panel,
  .mobile-workspace-step-4 .preview-panel { height: auto; overflow: visible; }
  .mobile-workspace-step-4 .preview-panel { display: block; padding: 11px 10px 12px; }
  .mobile-workspace-step-4 .preview-workbench,
  .mobile-workspace-step-4 .preview-workbench-main { min-height: 0; overflow: visible; }
  .mobile-workspace-step-4 .preview-grid,
  .mobile-workspace-step-4 .comparison-stage,
  .mobile-workspace-step-4 .video-preview-stage,
  .mobile-workspace-step-4 .preview-empty { min-height: 0; flex: none; overflow: visible; }

  .app-shell[class*="mobile-workspace-step-"] .setup-panel { padding: 12px 11px; }
  .app-shell[class*="mobile-workspace-step-"] .step-header { margin-bottom: 8px; }
  .app-shell[class*="mobile-workspace-step-"] .step-index { width: 31px; height: 31px; font-size: 11px; }
  .app-shell[class*="mobile-workspace-step-"] .step-header h3 { font-size: 15px; }
  .app-shell[class*="mobile-workspace-step-"] .step-header p { font-size: 10px; }
  .mobile-workspace-step-3 .output-option-grid>button { min-height: 92px; padding: 10px 8px; }
  .mobile-workspace-step-3 .output-option-grid b { font-size: 12px; }
  .mobile-workspace-step-3 .output-option-grid small { font-size: 8px; }

  .mobile-inline-video-settings {
    display: grid;
    gap: 9px;
    margin-top: 10px;
    border: 1px solid #8c7553;
    border-radius: 9px;
    padding: 11px;
    color: #dbe5e0;
    background: #08231f;
  }
  .mobile-video-settings-head { display: grid; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid #36564e; }
  .mobile-video-settings-head>span { color: var(--private-champagne); font: 8px 'DM Mono', monospace; letter-spacing: .15em; }
  .mobile-video-settings-head>strong { color: #eee9df; font: 600 15px 'Noto Serif SC', serif; }
  .mobile-video-settings-head>small { color: #819890; font-size: 9px; line-height: 1.45; }
  .video-prompt-field { display: grid; gap: 5px; color: #eee9df; font-size: 11px; }
  .mobile-inline-video-settings .video-textarea { min-height: 78px; height: 78px; resize: none; margin: 0; border-color: #48665e; padding: 9px; color: #e8eee9; background: #0d302b; font-size: 11px; }
  .mobile-inline-video-settings .video-prompt-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0; }
  .mobile-inline-video-settings .video-prompt-presets>span { grid-column: 1 / -1; color: #819890; font-size: 10px; }
  .mobile-inline-video-settings .video-prompt-presets button { min-height: 48px; padding: 6px 5px; border-color: #46635b; color: #abc0b8; background: #0c2c27; font-size: 9px; line-height: 1.35; text-align: center; }
  .mobile-inline-video-settings .video-prompt-presets button.active { color: #17251f; background: var(--private-champagne-soft); }
  .mobile-inline-video-settings .video-preprocess-modes { gap: 5px; }
  .mobile-inline-video-settings .video-preprocess-modes legend { margin-bottom: 2px; color: #819890; font-size: 10px; }
  .mobile-inline-video-settings .video-preprocess-modes button { min-height: 48px; padding: 7px; }
  .mobile-inline-video-settings .video-preprocess-modes button strong { font-size: 9px; }
  .mobile-inline-video-settings .video-preprocess-modes button span { font-size: 7px; }
  .mobile-inline-video-settings .video-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .mobile-inline-video-settings .video-options label { gap: 4px; color: #eee9df; font-size: 9px; }
  .mobile-inline-video-settings .video-options select { min-height: 38px; border-color: #48665e; padding: 5px; color: #e8eee9; background: #0d302b; font-size: 10px; }

  .mobile-workspace-step-4 .preview-workbench.video-composer-open .video-preview-stage { display: none; }
  .mobile-workspace-step-4 .preview-workbench.video-composer-open .video-composer { margin-top: 8px; padding: 11px 11px 16px; overflow: visible; }
  .mobile-workspace-step-4 .video-composer .video-form { gap: 9px; }
  .mobile-workspace-step-4 .video-composer .video-textarea { min-height: 82px; height: 82px; resize: none; }
  .mobile-workspace-step-4 .video-composer .video-prompt-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .mobile-workspace-step-4 .video-composer .video-prompt-presets>span { grid-column: 1 / -1; }
  .mobile-workspace-step-4 .video-composer .video-prompt-presets button { min-height: 48px; padding: 6px 5px; font-size: 9px; text-align: center; }
  .mobile-workspace-step-4 .video-composer .video-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .cases-page,
  .projects-page,
  .history-page,
  .advanced-page { height: auto; min-height: calc(100dvh - 124px); overflow: visible; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .case-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 8px;
    overflow: visible;
  }
  .case-card { height: auto; min-height: 0; scroll-snap-align: none; }
  .case-image { height: auto; aspect-ratio: 4 / 5; }
  .case-copy { padding: 9px; }
  .case-copy h3 { margin-bottom: 5px; font-size: 11px; line-height: 1.35; }
  .case-copy p { min-height: 0; margin: 0 0 7px; font-size: 8px; }
  .case-copy>div { align-items: flex-end; gap: 4px; font-size: 8px; }
  .case-copy button { font-size: 8px; }

  .advanced-card-grid {
    min-height: 0;
    flex: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 8px;
    overflow: visible;
  }
  .advanced-card { height: auto; min-height: 145px; scroll-snap-align: none; padding: 11px; }
  .advanced-card-copy strong { font-size: 13px; }
  .advanced-card-copy em { white-space: normal; }

  .project-table,
  .history-list {
    min-height: 0;
    flex: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    overflow: visible;
  }
  .project-line,
  .history-row:not(.head) {
    min-width: 0;
    width: auto;
    height: auto;
    flex: none;
    justify-content: flex-start;
    gap: 8px;
    border-radius: 10px;
    padding: 10px;
    scroll-snap-align: none;
  }
  .project-line,
  .history-row:not(.head),
  .project-line button,
  .history-row:not(.head) button { font-size: 9px; }
  .project-title,
  .history-project { align-items: flex-start; gap: 7px; }

  .membership-page {
    height: auto;
    min-height: calc(100dvh - 56px);
    overflow: visible;
    padding: 12px 10px calc(84px + env(safe-area-inset-bottom));
  }
  .membership-hero { grid-template-columns: minmax(0, 1.45fr) minmax(88px, .55fr); gap: 8px; margin-bottom: 14px; }
  .membership-hero-copy { padding: 14px 13px; }
  .membership-hero h1 { margin: 5px 0 6px; font-size: 21px; }
  .membership-hero p { font-size: 9px; line-height: 1.55; }
  .membership-status-line { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 4px 6px; margin-top: 11px; border-radius: 8px; padding: 7px; }
  .membership-status-line svg { width: 15px; height: 15px; }
  .membership-status-line strong { font-size: 10px; }
  .membership-status-line span { width: auto; grid-column: 1 / -1; padding-left: 0; font-size: 8px; }
  .membership-balance { min-height: 0; padding: 11px 9px; }
  .membership-balance span { font-size: 8px; }
  .membership-balance strong { margin: 7px 0; font-size: 29px; }
  .membership-balance small { font-size: 7px; line-height: 1.4; }
  .membership-section-head { align-items: flex-end; gap: 8px; margin-bottom: 9px; }
  .membership-section-head h2 { font-size: 16px; line-height: 1.35; }
  .membership-section-head>small { max-width: 105px; font-size: 8px; }
  .membership-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .membership-package { padding: 11px; border-radius: 9px; }
  .membership-package header { min-height: 18px; }
  .membership-package header span { padding: 3px 5px; font-size: 6px; }
  .membership-package header svg { width: 14px; height: 14px; }
  .membership-package h3 { margin: 10px 0 5px; font-size: 13px; }
  .membership-package>strong { min-height: 28px; font-size: 9px; }
  .membership-package p { min-height: 2.8em; margin: 5px 0 9px; display: -webkit-box; overflow: hidden; font-size: 8px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .membership-price { font-size: 20px; }
  .membership-price small { font-size: 9px; }
  .membership-package button { min-height: 38px; margin-top: 9px; padding: 7px; font-size: 9px; }
  .membership-orders .membership-section-head { padding: 12px; }
  .membership-orders article { gap: 6px; padding: 10px; font-size: 9px; }
}

@media (max-width: 360px) {
  .mobile-hub-grid>button { min-height: 108px; }
  .membership-hero { grid-template-columns: minmax(0, 1.35fr) 86px; }
  .membership-package { padding: 9px; }
  .membership-package h3 { font-size: 12px; }
  .membership-package>strong { font-size: 8px; }
}
:root {
  --moke-forest: #071f1c;
  --moke-forest-2: #0b302a;
  --moke-jade: #16483f;
  --moke-jade-soft: #dce9e3;
  --moke-ivory: #f6f2e9;
  --moke-paper: #fffdf8;
  --moke-ink: #18322c;
  --moke-muted: #73857f;
  --moke-gold: #d9b879;
  --moke-line: rgba(23, 67, 58, .16);
  --moke-shadow: 0 20px 56px rgba(4, 35, 29, .12);
}

html { background: var(--moke-forest); }
body { background: var(--moke-ivory); }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { transition: transform .22s ease, border-color .22s ease, color .22s ease, background-color .22s ease, box-shadow .22s ease; }
button:active:not(:disabled) { transform: translateY(1px) scale(.992); }

.sidebar {
  background:
    radial-gradient(circle at 16% 4%, rgba(75, 127, 111, .18), transparent 29%),
    linear-gradient(168deg, #0b302a 0%, #071f1c 46%, #061916 100%);
  box-shadow: 22px 0 70px rgba(2, 24, 20, .12);
}
.sidebar::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 240px;
  pointer-events: none;
  opacity: .42;
  background: radial-gradient(ellipse at 20% 100%, rgba(217,184,121,.26), transparent 55%);
}
.sidebar .logo-lockup, .sidebar .workspace-pill, .sidebar nav, .sidebar .sidebar-bottom, .sidebar>.nav-label { position: relative; z-index: 1; }
.logo-lockup strong { letter-spacing: .02em; }
.logo-lockup small { color: var(--moke-gold); letter-spacing: .22em; }
.nav-label { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .18em; }
.nav-item { min-height: 47px; }
.nav-item.active { background: linear-gradient(90deg, #1c554b, #16483f); box-shadow: inset 3px 0 var(--moke-gold), 0 10px 24px rgba(1, 18, 15, .2); }
.credit-balance-card { background: rgba(16, 61, 52, .7); backdrop-filter: blur(14px); }

.topbar { background: rgba(7, 31, 28, .92); box-shadow: 0 1px rgba(255,255,255,.02), 0 15px 40px rgba(0,0,0,.08); }
.breadcrumbs>span { font-family: 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.top-generate { box-shadow: 0 8px 24px rgba(217,184,121,.15); }

.workspace-long-content {
  height: auto;
  min-height: calc(100vh - 86px);
  overflow: visible;
  background:
    radial-gradient(circle at 86% 4%, rgba(55, 105, 91, .16), transparent 26%),
    var(--moke-forest-2);
}
.workspace-grid { min-height: 680px; flex: none; }
.notice { backdrop-filter: blur(16px); }

.workbench-collections { padding: 0 18px 34px; display: grid; gap: 14px; }
.workbench-tool-shelf, .recovery-timeline-card, .viral-clips-card {
  border: 1px solid #315149;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(16, 57, 50, .98), rgba(8, 39, 34, .98));
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}
.workbench-tool-shelf { padding: 22px; }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-title span { display: block; margin-bottom: 5px; color: var(--moke-gold); font: 500 9px/1 'DM Mono', monospace; letter-spacing: .2em; }
.section-title h2 { margin: 0; color: #f6f1e8; font: 600 22px/1.25 'Noto Serif SC', serif; }
.section-title>button { display: inline-flex; align-items: center; gap: 7px; border: 0; color: #cbd8d3; background: transparent; cursor: pointer; }
.section-title>button:hover { color: var(--moke-gold); }
.section-title>small { color: #89a098; }
.tool-shelf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.tool-shelf-grid>button { position: relative; display: grid; min-height: 144px; padding: 16px; border: 1px solid #355a52; border-radius: 10px; color: #eef2ed; text-align: left; background: rgba(5, 30, 26, .6); cursor: pointer; }
.tool-shelf-grid>button:hover { z-index: 1; border-color: #77988e; background: #123e37; box-shadow: 0 16px 34px rgba(0,0,0,.18); transform: translateY(-3px); }
.tool-shelf-grid>button>span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 18px; border: 1px solid #456a61; border-radius: 50%; color: var(--moke-gold); }
.tool-shelf-grid b { font-size: 14px; }
.tool-shelf-grid small { margin-top: 6px; color: #829991; line-height: 1.6; }
.tool-shelf-grid>button>.icon { position: absolute; right: 14px; bottom: 14px; color: #69847c; }
.workbench-secondary-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; }
.recovery-timeline-card, .viral-clips-card { padding: 22px; }
.recovery-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.recovery-rail>div { position: relative; display: flex; gap: 10px; min-width: 0; padding-right: 12px; }
.recovery-rail>div:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: 31px; right: 0; height: 1px; background: #35574f; }
.recovery-rail i { position: relative; z-index: 1; display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border: 1px solid #45675f; border-radius: 50%; color: #789089; background: #08251f; font: 9px 'DM Mono', monospace; }
.recovery-rail .ready i { border-color: var(--moke-gold); color: #162720; background: var(--moke-gold); }
.recovery-rail span { min-width: 0; }
.recovery-rail b { display: block; margin-top: 4px; color: #e9eee9; font-size: 12px; }
.recovery-rail small { display: block; margin-top: 7px; color: #7f958e; font-size: 10px; line-height: 1.5; }
.clip-list { display: grid; gap: 8px; }
.clip-list button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #31534b; border-radius: 9px; color: #eaf0eb; text-align: left; background: rgba(4, 28, 24, .55); cursor: pointer; }
.clip-list button:hover { border-color: var(--moke-gold); background: #113b34; }
.clip-list i { color: var(--moke-gold); font: 10px 'DM Mono', monospace; }
.clip-list b, .clip-list small { display: block; }
.clip-list b { font-size: 13px; }
.clip-list small { margin-top: 3px; color: #839a92; font-size: 10px; }

.template-library-page, .project-records-page { min-height: calc(100vh - 86px); padding: 26px 30px 48px; color: var(--moke-ink); background: var(--moke-ivory); }
.template-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 10px 4px 26px; }
.template-hero>div:first-child>span { color: #8b7450; font: 500 9px 'DM Mono', monospace; letter-spacing: .22em; }
.template-hero h1 { margin: 8px 0 7px; color: var(--moke-ink); font: 600 clamp(30px, 3vw, 44px)/1.15 'Noto Serif SC', serif; letter-spacing: -.03em; }
.template-hero p { max-width: 680px; margin: 0; color: var(--moke-muted); line-height: 1.8; }
.template-hero>div:last-child { display: flex; align-items: baseline; gap: 10px; }
.template-hero>div:last-child b { color: var(--moke-jade); font: 500 42px 'DM Mono', monospace; }
.template-hero>div:last-child span { color: var(--moke-muted); }
.template-confirmations { overflow: hidden; border: 1px solid #bda779; border-radius: 12px; background: #fffaf0; box-shadow: 0 9px 24px rgba(83,63,27,.05); }
.template-confirmations>summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 54px; padding: 9px 14px; list-style: none; cursor: pointer; user-select: none; }
.template-confirmations>summary::-webkit-details-marker { display: none; }
.template-confirmations>summary>span:first-child { display: grid; gap: 3px; min-width: 0; }
.template-confirmations>summary strong { color: #3f3525; font-size: 13px; font-weight: 800; line-height: 1.25; }
.template-confirmations>summary small { color: #88785d; font-size: 10px; font-weight: 600; line-height: 1.35; }
.template-confirmation-action { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; color: #526a63; font-size: 11px; font-weight: 700; }
.template-confirmation-action em { font-style: normal; }
.template-confirmation-close { display: none; }
.template-confirmation-action i { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; }
.template-confirmations[open] .template-confirmation-action i { transform: translateY(2px) rotate(225deg); }
.template-confirmations[open] .template-confirmation-action { color: var(--moke-jade); }
.template-confirmations[open] .template-confirmation-open { display: none; }
.template-confirmations[open] .template-confirmation-close { display: inline; }
.template-confirmation-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px 0 0; border-top: 1px solid #d9c391; background: #d9c391; }
.template-confirmation-options>label { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; min-height: 48px; padding: 9px 14px; background: #fffaf0; cursor: pointer; }
.template-confirmation-options input { display: grid; place-content: center; width: 20px; height: 20px; margin: 0; border: 1.5px solid #a69069; border-radius: 5px; appearance: none; color: #fff; background: #fffdf8; cursor: pointer; }
.template-confirmation-options input::before { width: 9px; height: 5px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; content: ''; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .12s ease-out; }
.template-confirmation-options input:checked { border-color: var(--moke-jade); background: var(--moke-jade); }
.template-confirmation-options input:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.template-confirmation-options input:focus-visible { outline: 3px solid rgba(22,72,63,.16); outline-offset: 2px; }
.template-confirmation-options label>b { color: #5f533f; font-size: 11px; font-weight: 700; line-height: 1.45; }
.template-confirmation-options label.checked { background: #eff7f1; }
.template-confirmation-options label.checked>b { color: var(--moke-ink); }
.template-studio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px 14px; margin-top: 12px; }
.template-inputs, .template-controls { border: 1px solid var(--moke-line); border-radius: 14px; background: var(--moke-paper); box-shadow: var(--moke-shadow); }
.template-inputs { display: grid; grid-template-columns: 190px 1fr; grid-template-rows: auto auto 1fr; gap: 12px 14px; min-height: 334px; padding: 14px 18px 18px; }
.template-upload { grid-row: 2 / 4; }
.template-upload>span, .template-prompt>span, .template-controls label>span { display: block; margin-bottom: 8px; color: #526a63; font-size: 11px; font-weight: 700; }
.template-upload input { position: absolute; opacity: 0; pointer-events: none; }
.template-upload>div { display: grid; place-items: center; align-content: center; min-height: 250px; border: 1px dashed #86a399; border-radius: 10px; color: var(--moke-jade); background: #eff5f0; cursor: pointer; }
.template-upload>div b { margin-top: 14px; font-size: 12px; }
.template-upload>div small { margin-top: 5px; color: #82978f; }
.template-reference-list { display: flex; min-height: 52px; gap: 8px; }
.template-reference-list:empty::after { content: '最多添加 4 张参考图；第一张默认作为本人身份参考。'; display: grid; align-items: center; color: #9ba8a3; font-size: 11px; }
.template-reference-list button { position: relative; width: 54px; height: 54px; overflow: hidden; padding: 0; border: 1px solid #d8dfda; border-radius: 8px; background: #edf3ef; }
.template-reference-list img { width: 100%; height: 100%; object-fit: cover; }
.template-reference-list span { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: rgba(5,28,24,.72); }
.template-prompt { position: relative; }
.template-prompt textarea { width: 100%; min-height: 148px; resize: vertical; border: 1px solid #d8dfda; border-radius: 10px; padding: 15px; color: var(--moke-ink); background: #fbfcf9; outline: 0; line-height: 1.7; }
.template-prompt textarea:focus { border-color: #739a8f; box-shadow: 0 0 0 3px rgba(22,72,63,.08); }
.template-prompt>small { position: absolute; right: 12px; bottom: 10px; color: #99a59f; }
.template-controls { padding: 18px; }
.template-controls>label { display: block; margin-bottom: 14px; }
.template-controls select { width: 100%; height: 43px; border: 1px solid #d2ddd7; border-radius: 8px; padding: 0 11px; color: var(--moke-ink); background: #f9fbf8; outline: 0; }
.template-controls label>small { display: block; margin-top: 6px; color: #8d9b96; font-size: 10px; line-height: 1.5; }
.spec-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.template-run { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 50px; border: 1px solid #0d4037; border-radius: 9px; color: #fffaf0; background: linear-gradient(135deg, #0b332c, #18564a); box-shadow: 0 12px 26px rgba(7,48,40,.18); font-weight: 700; cursor: pointer; }
.template-run:hover:not(:disabled) { background: #174f45; transform: translateY(-2px); }
.template-run:disabled { opacity: .4; cursor: not-allowed; }
.template-gallery-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin: 34px 2px 16px; }
.template-gallery-heading span { color: #8b7450; font: 9px 'DM Mono', monospace; letter-spacing: .2em; }
.template-gallery-heading h2 { margin: 5px 0 0; font: 600 25px 'Noto Serif SC', serif; }
.template-gallery-heading p { color: var(--moke-muted); font-size: 12px; }
.template-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.template-gallery>article { position: relative; min-height: 235px; overflow: hidden; padding: 0; border: 1px solid rgba(12,52,45,.14); border-radius: 12px; text-align: left; background: #0b2e28; box-shadow: 0 16px 34px rgba(7,42,35,.08); }
.template-gallery img { width: 100%; height: 235px; object-fit: cover; opacity: .78; transition: transform .55s cubic-bezier(.2,.75,.2,1), opacity .3s ease; }
.template-gallery>article::after { content: ''; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(4,28,24,.94)); }
.template-gallery>article:hover img { transform: scale(1.035); opacity: .9; }
.template-gallery-copy { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 15px; color: #fff; }
.template-gallery-copy small, .template-gallery-copy b, .template-gallery-copy em { display: block; }
.template-gallery-copy small { color: var(--moke-gold); font: 9px 'DM Mono', monospace; letter-spacing: .12em; }
.template-gallery-copy b { margin-top: 5px; font: 600 17px 'Noto Serif SC', serif; }
.template-gallery-copy em { margin-top: 4px; color: #b8c8c2; font-size: 10px; font-style: normal; }
.template-gallery-download { position: absolute; z-index: 2; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid rgba(244,226,188,.72); border-radius: 999px; color: #fff7e8; background: rgba(5,39,32,.76); font-size: 10px; font-weight: 700; backdrop-filter: blur(7px); box-shadow: 0 5px 16px rgba(3,23,19,.2); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.template-gallery-download:hover { border-color: #f4deb4; background: rgba(15,79,66,.94); transform: translateY(-1px); }
.template-gallery-download:focus-visible { outline: 2px solid #f4deb4; outline-offset: 2px; }

/* Template library v0 — visual workflow picker inspired by the approved reference. */
.template-browser { margin-top: 16px; padding: 20px; border: 1px solid var(--moke-line); border-radius: 22px; background: rgba(255,253,248,.88); box-shadow: var(--moke-shadow); }
.template-browser-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 15px; }
.template-browser-head span { color: #8b7450; font: 500 9px 'DM Mono', monospace; letter-spacing: .2em; }
.template-browser-head h2 { margin: 5px 0 0; color: var(--moke-ink); font: 600 24px/1.25 'Noto Serif SC', serif; }
.template-browser-head p { max-width: 430px; margin: 0; color: var(--moke-muted); font-size: 12px; line-height: 1.7; }
.template-filter { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; }
.template-filter::-webkit-scrollbar { display: none; }
.template-filter button { flex: 0 0 auto; min-height: 35px; padding: 0 15px; border: 1px solid #d2ddd7; border-radius: 999px; color: #63756f; background: #f9fbf8; font-size: 12px; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.template-filter button.active { border-color: #0d4a3f; color: #fff; background: #0d4a3f; }
.template-picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.template-picker-card { position: relative; min-height: 205px; overflow: hidden; padding: 0; border: 1px solid rgba(20,67,57,.18); border-radius: 18px; color: #fff; text-align: left; background: #0a2420; cursor: pointer; box-shadow: 0 14px 30px rgba(8,46,39,.12); transition: transform .2s cubic-bezier(.2,.75,.2,1), border-color .2s ease, box-shadow .2s ease; }
.template-picker-card:hover { transform: translateY(-3px); border-color: rgba(189,157,95,.75); box-shadow: 0 19px 34px rgba(8,46,39,.15); }
.template-picker-card.active { border-color: #d2ad62; box-shadow: 0 0 0 2px #f4d99c, 0 18px 38px rgba(8,46,39,.16); }
.template-card-art { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 7px; overflow: hidden; color: rgba(246,239,222,.9); background: radial-gradient(circle at 72% 24%, rgba(219,190,129,.22), transparent 25%), linear-gradient(145deg, #254f46, #0a2c27 64%, #061f1b); }
.template-card-art::before { content: ''; position: absolute; width: 138px; height: 178px; right: -28px; top: -44px; border: 1px solid rgba(239,224,194,.2); border-radius: 52% 48% 42% 58%; transform: rotate(24deg); }
.template-card-art>img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.04); transition: transform .45s cubic-bezier(.2,.75,.2,1), filter .3s ease; }
.template-picker-card:hover .template-card-art>img { transform: scale(1.035); }
.template-card-art>span { font: 500 14px 'Noto Serif SC', serif; letter-spacing: .04em; }
.template-card-art>small { color: rgba(231,238,232,.56); font-size: 9px; }
.template-card-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,18,16,.7) 0%, rgba(3,18,16,.18) 62%, rgba(3,18,16,.06) 100%), linear-gradient(180deg, rgba(3,18,16,.02) 25%, rgba(3,18,16,.93) 100%); }
.template-card-index { position: absolute; z-index: 1; top: 13px; left: 14px; padding: 4px 8px; border: 1px solid rgba(245,231,202,.3); border-radius: 999px; color: #f4dca8; background: rgba(3,24,20,.46); backdrop-filter: blur(8px); font: 600 8px 'DM Mono', monospace; letter-spacing: .1em; }
.template-card-copy { position: absolute; z-index: 1; right: 16px; bottom: 15px; left: 16px; text-shadow: 0 2px 14px rgba(0,0,0,.42); }
.template-card-copy b, .template-card-copy em, .template-card-copy small { display: block; }
.template-card-copy b { color: #fff; font: 650 19px/1.25 'Noto Serif SC', serif; }
.template-card-copy em { min-height: 30px; margin-top: 5px; color: rgba(237,244,240,.88); font-size: 10.5px; font-style: normal; line-height: 1.5; }
.template-card-copy small { margin-top: 7px; color: #efd395; font: 600 8px 'DM Mono', monospace; letter-spacing: .08em; }
.template-picker-card.free .template-card-art { color: #f7f0e3; background: radial-gradient(circle at 78% 18%, rgba(213,177,105,.24), transparent 26%), linear-gradient(145deg, #202522, #0a1715 70%, #06100f); }
.template-picker-card.free .template-card-art>small { color: rgba(231,238,232,.58); }
.template-picker-card.free .template-card-shade { background: linear-gradient(100deg, rgba(3,14,12,.32), rgba(3,20,17,.06)), linear-gradient(transparent, rgba(3,18,15,.92)); }
.template-selected-flow { grid-column: 1 / -1; display: grid; grid-template-columns: 190px 1fr; align-items: stretch; gap: 1px; overflow: hidden; margin: 0; border: 1px solid #b7d4c9; border-radius: 11px; background: #bfd9cf; box-shadow: 0 8px 20px rgba(31,89,72,.055); }
.template-selected-copy, .template-selected-flow li { background: linear-gradient(105deg, #e5f3ec 0%, #f3f8f4 100%); }
.template-selected-copy { display: grid; align-content: center; padding: 7px 11px; }
.template-selected-copy>span { color: #397364; font: 600 7px 'DM Mono', monospace; letter-spacing: .16em; }
.template-selected-copy strong { margin-top: 2px; color: #24473d; font: 600 13px 'Noto Serif SC', serif; }
.template-selected-copy p { overflow: hidden; margin: 2px 0 0; color: #66827a; font-size: 8.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.template-selected-flow ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: #bfd9cf; }
.template-selected-flow li { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 9px; }
.template-selected-flow li>span { display: grid; flex: 0 0 auto; place-items: center; width: 19px; height: 19px; border: 1px solid #8fb5a8; border-radius: 50%; color: #397364; background: rgba(255,255,255,.48); font: 7.5px 'DM Mono', monospace; }
.template-selected-flow li>b { overflow: hidden; color: #3c5c53; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.template-control-summary { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; width: 100%; min-height: 120px; overflow: hidden; margin-bottom: 16px; padding: 17px 16px; border: 1px solid rgba(222,196,142,.35); border-radius: 14px; color: #f7f1e7; text-align: left; background: linear-gradient(140deg, #0b332c, #18564a); cursor: pointer; box-shadow: 0 13px 25px rgba(8,43,36,.13); }
.template-control-art, .template-control-art>i { position: absolute; inset: 0; }
.template-control-art>img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.05); }
.template-control-art>i { background: linear-gradient(90deg, rgba(3,24,20,.94) 0%, rgba(3,24,20,.7) 58%, rgba(3,24,20,.22) 100%), linear-gradient(0deg, rgba(3,20,17,.7), transparent 70%); }
.template-control-copy, .template-control-action { position: relative; z-index: 1; }
.template-control-copy small, .template-control-copy strong, .template-control-copy em { display: block; }
.template-control-copy small { color: #e0c489; font: 600 8px 'DM Mono', monospace; letter-spacing: .12em; }
.template-control-copy strong { margin-top: 7px; color: #fff; font: 650 21px 'Noto Serif SC', serif; }
.template-control-copy em { max-width: 220px; margin-top: 5px; color: #d1ded9; font-size: 10px; font-style: normal; line-height: 1.5; }
.template-control-action { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(245,227,187,.4); border-radius: 999px; color: #f6dfab; background: rgba(4,34,29,.45); backdrop-filter: blur(7px); font-size: 10px; font-weight: 700; white-space: nowrap; transition: background .18s ease, border-color .18s ease; }
.template-control-summary:hover .template-control-action { border-color: #f0d598; background: rgba(13,73,62,.86); }
.template-control-summary:focus-visible { outline: 3px solid rgba(199,165,99,.35); outline-offset: 3px; }
.template-output { min-height: 300px; margin-top: 18px; padding: 20px; border: 1px solid var(--moke-line); border-radius: 20px; background: rgba(255,253,248,.88); box-shadow: var(--moke-shadow); }
.template-output .template-gallery-heading { margin: 0 2px 16px; padding-bottom: 14px; border-bottom: 1px solid #e1e5df; }
.template-output-empty { display: grid; place-items: center; align-content: center; min-height: 210px; border: 1px dashed #b9c9c3; border-radius: 14px; color: #668078; background: radial-gradient(circle at 50% 0%, rgba(223,238,231,.55), transparent 48%), #fafbf8; text-align: center; }
.template-output-empty>span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #2d7566; background: #e6f2ed; }
.template-output-empty strong { margin-top: 13px; color: #29483f; font: 600 19px 'Noto Serif SC', serif; }
.template-output-empty p { max-width: 430px; margin: 7px 20px 0; color: #879890; font-size: 11px; line-height: 1.7; }
.template-picker-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(3,19,16,.72); backdrop-filter: blur(12px); animation: template-modal-in .18s ease-out; }
.template-picker-dialog { display: flex; flex-direction: column; width: min(1180px, 94vw); max-height: min(880px, 92vh); overflow: hidden; padding: 22px; border: 1px solid rgba(221,199,151,.58); border-radius: 24px; background: #f8f6ef; box-shadow: 0 34px 90px rgba(0,0,0,.35); }
.template-picker-dialog>header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 30px; padding: 2px 2px 16px; }
.template-picker-dialog>header>div>span { color: #8b7450; font: 600 9px 'DM Mono', monospace; letter-spacing: .2em; }
.template-picker-dialog>header h2 { margin: 7px 0 4px; color: #183a31; font: 650 27px/1.25 'Noto Serif SC', serif; }
.template-picker-dialog>header p { margin: 0; color: #71847d; font-size: 12px; }
.template-picker-dialog>header>button { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border: 1px solid #cad5cf; border-radius: 50%; color: #31554c; background: #fffdf8; font: 300 27px/1 sans-serif; cursor: pointer; }
.template-picker-dialog>header>button:hover { border-color: #8ca89f; background: #edf4f0; }
.template-picker-dialog>.template-filter { flex: 0 0 auto; padding-bottom: 13px; }
.template-picker-scroll { min-height: 0; overflow-y: auto; padding: 2px 7px 8px 2px; scrollbar-color: #9eb3ab transparent; scrollbar-width: thin; }
.template-picker-dialog .template-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.template-picker-dialog .template-picker-card { min-height: 220px; }
@keyframes template-modal-in { from { opacity: 0; } to { opacity: 1; } }

.project-records-page { display: flex; flex-direction: column; height: calc(100vh - 86px); min-height: 0; overflow: hidden; padding: 12px 30px 18px; }
.records-tabs { position: relative; z-index: 2; top: auto; display: flex; flex: 0 0 auto; gap: 6px; padding: 0 0 10px; background: transparent; backdrop-filter: none; }
.records-tabs button { min-height: 36px; padding: 0 18px; border: 1px solid #cdd8d2; border-radius: 999px; color: #6a7e77; background: rgba(255,255,255,.72); font-size: 11px; cursor: pointer; }
.records-tabs button.active { border-color: var(--moke-jade); color: #fff; background: var(--moke-jade); box-shadow: 0 8px 20px rgba(12,66,56,.14); }
.project-records-page .projects-page, .project-records-page .history-page { display: flex; flex: 1; flex-direction: column; min-height: 0; height: auto; overflow: hidden; padding: 0; }
.project-records-page .page-heading { flex: 0 0 auto; align-items: center; min-height: 52px; }
.project-records-page .page-heading .eyebrow { display: none; }
.project-records-page .page-heading h1 { margin: 0 0 4px; font-size: 25px; }
.project-records-page .page-heading p { font-size: 11px; }
.project-records-page .project-summary { flex: 0 0 auto; gap: 10px; margin: 12px 0 10px; }
.project-records-page .project-summary>div { gap: 4px; padding: 11px 16px; }
.project-records-page .project-summary b { font-size: 21px; }
.project-records-page .project-tools { flex: 0 0 auto; margin-bottom: 9px; }
.project-records-page .project-table, .project-records-page .history-list { flex: 1; min-height: 0; overflow: auto; margin-top: 0; }
.project-records-page .project-empty, .project-records-page .history-empty { min-height: 100%; padding: 28px 20px; }
.records-task-wrap { display: flex; flex: 1; flex-direction: column; min-height: 0; padding-top: 0; overflow: hidden; }

.auth-page { overflow: hidden; background: var(--moke-forest); }
.auth-story { background:
  radial-gradient(circle at 70% 24%, rgba(214,185,126,.18), transparent 18%),
  radial-gradient(circle at 16% 88%, rgba(65,121,105,.32), transparent 29%),
  linear-gradient(150deg, #0d3931, #071f1c 58%, #051714); }
.auth-story::after { content: ''; position: absolute; inset: -30%; pointer-events: none; border: 1px solid rgba(217,184,121,.1); border-radius: 45%; animation: moke-drift 18s ease-in-out infinite alternate; }
.auth-core { animation: moke-breathe 5.5s ease-in-out infinite; }
.auth-entry { background: linear-gradient(145deg, #fffdf8, #eee9de); }
.auth-card { box-shadow: 0 28px 80px rgba(7,44,37,.14); }

@keyframes moke-drift { to { transform: translate3d(8%, -4%, 0) rotate(8deg); } }
@keyframes moke-breathe { 50% { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 0 70px rgba(217,184,121,.16); } }

@media (max-width: 1180px) {
  .tool-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-studio { grid-template-columns: 1fr; }
  .template-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; }
  .template-control-summary { grid-column: 1 / -1; }
  .template-run, .template-controls>.api-error { grid-column: 1 / -1; }
  .template-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .template-selected-flow { grid-template-columns: 175px 1fr; }
}

@media (max-width: 760px) {
  .template-library-page, .project-records-page { width: 100%; max-width: 100%; min-height: 100vh; overflow-x: hidden; padding: 20px 14px 110px; }
  .template-hero { align-items: flex-start; padding-top: 18px; }
  .template-hero>div:last-child { display: none; }
  .template-hero h1 { font-size: 31px; }
  .template-confirmations>summary { min-height: 62px; padding: 10px 12px; }
  .template-confirmations>summary strong { font-size: 12px; }
  .template-confirmations>summary small { font-size: 9.5px; }
  .template-confirmation-action { gap: 7px; font-size: 10px; }
  .template-confirmation-options { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 7px; background: #eadfc7; }
  .template-confirmation-options>label { min-height: 50px; padding: 9px 10px; border-radius: 8px; }
  .template-confirmation-options label>b { font-size: 11px; }
  .template-studio { width: 100%; min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); }
  .template-inputs, .template-controls, .template-prompt { width: 100%; min-width: 0; max-width: 100%; }
  .template-inputs { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; overflow: hidden; }
  .template-prompt textarea { min-width: 0; max-width: 100%; }
  .template-reference-list { min-width: 0; overflow-x: auto; }
  .template-upload { grid-row: auto; }
  .template-upload>div { min-height: 136px; }
  .template-controls { display: block; }
  .template-control-summary { min-height: 112px; }
  .template-control-copy strong { font-size: 19px; }
  .template-output { min-height: 250px; padding: 14px; border-radius: 16px; }
  .template-output-empty { min-height: 178px; }
  .template-gallery-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .template-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .template-gallery>article, .template-gallery img { min-height: 190px; height: 190px; }
  .template-browser { margin-inline: -2px; padding: 14px; border-radius: 18px; }
  .template-browser-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .template-browser-head h2 { font-size: 21px; }
  .template-browser-head p { font-size: 11px; }
  .template-picker-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .template-picker-card { min-height: 174px; border-radius: 15px; }
  .template-card-copy b { font-size: 16px; }
  .template-card-copy em { min-height: 28px; font-size: 9px; }
  .template-selected-flow { grid-template-columns: 1fr; }
  .template-selected-flow ol { display: flex; overflow-x: auto; scrollbar-width: none; }
  .template-selected-flow ol::-webkit-scrollbar { display: none; }
  .template-selected-copy { padding: 8px 11px; }
  .template-selected-flow li { flex: 0 0 145px; min-height: 40px; padding: 5px 8px; }
  .template-picker-modal { align-items: end; padding: 8px; }
  .template-picker-dialog { width: 100%; max-height: 92vh; padding: 15px 12px 12px; border-radius: 22px 22px 14px 14px; }
  .template-picker-dialog>header { padding: 1px 3px 13px; }
  .template-picker-dialog>header h2 { font-size: 22px; }
  .template-picker-dialog>header p { max-width: 270px; font-size: 10px; line-height: 1.5; }
  .template-picker-dialog .template-picker-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .template-picker-dialog .template-picker-card { min-height: 168px; }
  .workbench-collections { padding: 0 10px 100px; }
  .tool-shelf-grid { grid-template-columns: 1fr 1fr; }
  .tool-shelf-grid>button { min-height: 132px; padding: 13px; }
  .workbench-secondary-grid { grid-template-columns: 1fr; }
  .recovery-rail { grid-template-columns: 1fr; gap: 12px; }
  .recovery-rail>div:not(:last-child)::after { top: 31px; left: 15px; right: auto; bottom: -12px; width: 1px; height: auto; }
  .project-records-page { display: flex; height: calc(100dvh - 62px); min-height: 0; overflow: hidden; padding: 10px 12px calc(82px + env(safe-area-inset-bottom)); }
  .records-tabs { top: auto; overflow-x: auto; padding-bottom: 8px; }
  .records-tabs button { min-height: 34px; padding-inline: 14px; font-size: 10px; }
  .records-tabs button { flex: 0 0 auto; }
  .auth-page { background: var(--moke-forest); }
  .auth-slides { background: var(--moke-forest); }
  .auth-story { min-height: 100svh; }
  .auth-entry { min-height: 100svh; padding: 28px 18px 86px; background:
    radial-gradient(circle at 80% 6%, rgba(217,184,121,.2), transparent 22%),
    linear-gradient(165deg, #0b342e 0 27%, #f6f1e8 27.2% 100%); }
  .auth-card { width: 100%; margin-top: 20vh; border-radius: 22px; animation: moke-card-in .7s cubic-bezier(.2,.8,.2,1) both; }
  .auth-card::before { content: ''; display: block; width: 44px; height: 4px; margin: -3px auto 22px; border-radius: 999px; background: #d9c397; }
}

@keyframes moke-card-in { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Final art direction: the supplied MOKE board is predominantly ivory, with
   layered green reserved for navigation, key states and primary actions. */
html { background: #f1eee7; }
body, #root, .app-shell, .main-area { background: #f3f1eb; }
.main-area { color: #233c35; }

.topbar {
  border-bottom: 1px solid #e3e0d8;
  color: #2b413b;
  background: rgba(255, 254, 250, .94);
  box-shadow: 0 8px 26px rgba(23, 48, 40, .035);
  backdrop-filter: blur(18px);
}
.breadcrumbs>span { color: #8a9993; }
.breadcrumbs>i { color: #c5cbc7; }
.breadcrumbs>strong { color: #1e3a33; }
.breadcrumbs>em { border-color: #d5dfda; color: #627970; background: #f5f8f5; }
.status { color: #6e837b; }
.status>span { background: #4b9a7f; box-shadow: 0 0 0 4px rgba(75,154,127,.1); }
.top-save, .top-video, .topbar .icon-button { border-color: #d5ddd8; color: #496159; background: #fffefa; }
.top-generate, .topbar .button.primary { border-color: #174c40; color: #fffdf8; background: linear-gradient(135deg, #0d3b32, #1f5d50); box-shadow: 0 10px 24px rgba(10,55,46,.15); }

.workspace-long-content {
  background:
    radial-gradient(circle at 94% 2%, rgba(195, 215, 204, .35), transparent 24%),
    linear-gradient(180deg, #f8f6f1 0, #f1eee7 100%);
}
.workspace-grid { gap: 14px; padding: 14px 18px 8px; }
.notice {
  border-color: #d4e2db;
  color: #56756b;
  background: linear-gradient(90deg, #edf6f0, #f7faf7);
  box-shadow: 0 8px 24px rgba(27,68,57,.035);
}
.notice strong, .notice b { color: #245b4e; }
.notice p, .notice span { color: #6f887f; }
.notice-icon { color: #286f60; background: #dceee5; }
.setup-panel, .preview-panel {
  border-color: #e1ded6;
  color: #2b413a;
  background: rgba(255,254,250,.97);
  box-shadow: 0 14px 38px rgba(48,57,49,.055);
}
.setup-panel h2, .preview-panel h2, .step-header h3, .preview-head h2 { color: #203a33; }
.panel-title p, .preview-head p, .step-header p { color: #82918b; }
.eyebrow { color: #a1824f; }
.step-index { border-color: #c4d8cf; color: #1b6556; background: #e8f2ed; }
.step-block { border-color: #ebe7df; }
.portrait-source-switch button, .output-option-grid button, .project-category-grid button,
.day-selector button, .select-field, .text-field, .video-preset-grid button,
.video-preprocess-modes button, .video-options select {
  border-color: #dddcd4;
  color: #536760;
  background: #fbfaf6;
}
.portrait-source-switch button.selected, .output-option-grid button.selected,
.project-category-grid button.selected, .day-selector button.selected {
  border-color: #2d7566;
  color: #164c40;
  background: #e9f3ee;
  box-shadow: inset 0 0 0 1px rgba(45,117,102,.15);
}
.upload-box { border-color: #9eb8ae; color: #507067; background: #f4f8f4; }
.upload-icon, .portrait-option-icon { color: #226859; background: #e0eee7; }
.privacy-note, .portrait-ready-status { color: #71877f; }
.generate-button, .button.primary, .advanced-run-button {
  border-color: #174c40;
  color: #fffdf8;
  background: linear-gradient(135deg, #0d3b32, #1c5b4d);
  box-shadow: 0 11px 25px rgba(10,55,46,.14);
}
.preview-panel { background: linear-gradient(145deg, #fffefa, #faf8f2); }
.empty-state b, .preview-footer, .footer-stat { color: #52665f; }
.empty-state span { color: #8b9893; }

.workbench-collections { padding: 6px 18px 40px; background: transparent; }
.workbench-tool-shelf, .recovery-timeline-card, .viral-clips-card {
  border-color: #e0ddd5;
  background: rgba(255,254,250,.98);
  box-shadow: 0 15px 38px rgba(38,55,47,.055);
}
.section-title h2 { color: #203a33; }
.section-title span { color: #9b7b47; }
.section-title>button, .section-title>small { color: #71857e; }
.section-title>button:hover { color: #1e6657; }
.tool-shelf-grid>button {
  border-color: #e2e0d9;
  color: #263e37;
  background: linear-gradient(145deg, #fffefa, #f8f7f2);
}
.tool-shelf-grid>button:hover {
  border-color: #8eafa4;
  background: #f5faf6;
  box-shadow: 0 13px 30px rgba(31,70,59,.09);
}
.tool-shelf-grid>button>span { border-color: #c8ddd5; color: #175b4d; background: #e9f3ee; }
.tool-shelf-grid small { color: #81908a; }
.tool-shelf-grid>button>.icon { color: #87a198; }
.recovery-rail>div:not(:last-child)::after { background: #d5ded9; }
.recovery-rail i { border-color: #c7d8d1; color: #668078; background: #f4f7f4; }
.recovery-rail .ready i { border-color: #1f6758; color: #fff; background: #1f6758; }
.recovery-rail b { color: #2b413a; }
.recovery-rail small { color: #83918c; }
.clip-list button { border-color: #e0ddd5; color: #2d433c; background: #faf9f5; }
.clip-list button:hover { border-color: #a9956a; background: #fffaf0; }
.clip-list i { color: #9c7a43; }
.clip-list small { color: #86938e; }

.template-library-page, .project-records-page, .projects-page, .history-page, .advanced-page {
  color: #283e37;
  background:
    radial-gradient(circle at 94% 1%, rgba(199,218,207,.28), transparent 22%),
    #f3f1eb;
}
.page-heading h1, .advanced-heading h1, .project-title b, .history-count b { color: #203a33; }
.page-heading p, .advanced-heading p, .project-title span, .project-line, .history-count { color: #82918b; }
.task-center, .history-list, .projects-list, .project-card, .history-row, .advanced-lab-strip, .advanced-card,
.advanced-source-pane, .advanced-control-pane {
  border-color: #e1ded6;
  color: #31463f;
  background: #fffefa;
  box-shadow: 0 12px 34px rgba(38,55,47,.045);
}
.task-center summary small, .task-item>div small, .task-time { color: #82918b; }
.advanced-card-copy strong, .advanced-lab-strip strong { color: #223d35; }
.advanced-card-copy em, .advanced-lab-strip p { color: #81908b; }
.advanced-card-icon { border-color: #c6dbd2; color: #1d6858; background: #e7f2ec; }
.advanced-card-foot { border-color: #eae6de; color: #226c5d; }

.membership-page { color: #263d36; background: #f3f1eb; }
.membership-hero { border-color: #dcd9d1; background: #fffefa; box-shadow: 0 14px 38px rgba(40,55,48,.055); }
.membership-hero-copy { background: linear-gradient(145deg, #123f36, #082b25); }
.membership-balance { border-color: #dfe3dc; color: #29423a; background: #f8f7f2; }
.membership-balance span, .membership-balance small { color: #74877f; }
.membership-balance strong { color: #17594c; }
.membership-section-head h2 { color: #223d35; }
.membership-package, .membership-orders { border-color: #dfddd5; color: #334941; background: #fffefa; box-shadow: 0 12px 32px rgba(38,55,47,.045); }
.membership-package h3, .membership-orders article strong { color: #263f37; }
.membership-package>strong { color: #526a61; }
.membership-package p, .membership-orders article { color: #82918b; }
.membership-price { color: #17594c; }

/* Login: editorial portrait + ivory form, matching the supplied mobile board. */
.auth-page { background: #efece4; }
.auth-slides { background: #efece4; }
.auth-story {
  isolation: isolate;
  padding: 42px 48px 34px;
  color: #18382f;
  background: #f5f2eb;
}
.auth-story::before {
  z-index: -2;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.95), transparent 28%),
    radial-gradient(circle at 26% 86%, rgba(219,201,165,.22), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.72), transparent 48%);
  mask-image: none;
}
.auth-story::after {
  z-index: -1;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, #f5f2eb 0 40%, rgba(245,242,235,.9) 52%, rgba(245,242,235,.08) 76%);
  animation: none;
}
.auth-brand { z-index: 5; }
.auth-brand .logo-lockup strong { color: #153a31; }
.auth-brand .logo-lockup small, .auth-brand>span, .auth-kicker { color: #9a7c4d; }
.auth-story-copy { z-index: 5; width: 54%; max-width: 470px; margin-top: clamp(78px, 13vh, 145px); }
.auth-story h1 { margin: 22px 0 18px; color: #14392f; font-size: clamp(44px, 4.3vw, 66px); line-height: 1.18; }
.auth-story-copy p { color: #60756d; font-size: 13px; letter-spacing: .08em; }
.auth-portrait { position: absolute; z-index: -3; inset: 0 0 0 30%; overflow: hidden; }
.auth-portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #f5f2eb 0, transparent 38%), linear-gradient(0deg, rgba(13,52,43,.16), transparent 38%); }
.auth-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; filter: saturate(.75) contrast(.96) brightness(1.05); transform: scale(1.02); animation: auth-portrait-in 1.4s cubic-bezier(.2,.75,.2,1) both; }
.auth-portrait>span { position: absolute; z-index: 2; right: 30px; bottom: 28px; color: rgba(255,255,255,.82); font: 500 8px 'DM Mono', monospace; letter-spacing: .22em; }
.auth-visual { display: none; }
.auth-footnote { z-index: 5; margin-top: auto; color: #617a71; }

.auth-entry {
  position: relative;
  padding: 46px clamp(40px, 6vw, 86px);
  background:
    radial-gradient(circle at 82% 10%, rgba(255,255,255,.98), transparent 26%),
    radial-gradient(circle at 14% 90%, rgba(218,201,169,.16), transparent 28%),
    #f5f1e8;
}
.auth-entry::before { content: ''; position: absolute; inset: 26px; border: 1px solid rgba(23,73,62,.11); pointer-events: none; }
.auth-card {
  width: min(470px, 100%);
  border: 1px solid rgba(30,80,68,.13);
  border-radius: 24px;
  padding: 32px 34px 26px;
  background: rgba(255,254,250,.84);
  box-shadow: 0 30px 80px rgba(42,54,46,.1), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  animation: auth-card-in .85s cubic-bezier(.2,.75,.2,1) both;
}
.auth-card-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; }
.auth-card-brand img { width: 45px; height: 45px; border-radius: 10px; box-shadow: 0 8px 20px rgba(20,62,52,.12); }
.auth-card-brand>div { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 7px; }
.auth-card-brand b { color: #153b31; font: 700 18px Georgia, serif; letter-spacing: .03em; }
.auth-card-brand span { color: #274b42; font: 600 14px 'Noto Serif SC', serif; }
.auth-card-brand small { grid-column: 1 / -1; margin-top: 2px; color: #a2834d; font: 7px 'DM Mono', monospace; letter-spacing: .2em; }
.auth-card-heading>span { color: #a18048; }
.auth-card-heading h2 { color: #18382f; font-size: 32px; }
.auth-card-heading p { margin-bottom: 28px; color: #788a83; }
.auth-field>span { color: #405f56; }
.auth-field>div { border-color: #d9d5cc; background: #fffefa; box-shadow: 0 7px 18px rgba(52,49,39,.035); }
.auth-field>div:focus-within { border-color: #397d6d; box-shadow: 0 0 0 4px rgba(57,125,109,.09); }
.auth-submit { min-height: 54px; border: 1px solid #174c40; color: #fffdf8; background: linear-gradient(135deg, #0c3a31, #1b5a4c); box-shadow: 0 12px 28px rgba(10,55,46,.17); }
.auth-submit:hover:not(:disabled) { background: #174f43; }
.auth-mode-actions .auth-mode-switch { border-color: #d8ddd8; color: #345e54; background: #f7faf7; }

@keyframes auth-portrait-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1.02); } }

@media (max-width: 920px) {
  .auth-story { min-height: 420px; }
  .auth-portrait { inset: 0 0 0 38%; }
  .auth-story::after { background: linear-gradient(90deg, #f5f2eb 0 36%, rgba(245,242,235,.82) 52%, transparent 84%); }
}

@media (max-width: 760px) {
  body, #root, .app-shell, .main-area { background: #f5f2eb; }
  .workspace-long-content { background: #f5f2eb; }
  .workbench-collections { padding: 0 12px 100px; }
  .tool-shelf-grid>button { min-height: 126px; }
  .auth-page, .auth-slides { background: #ede8de; }
  .auth-entry {
    place-items: end center;
    min-height: 100svh;
    padding: 185px 15px 72px;
    background:
      linear-gradient(180deg, rgba(13,52,43,.03) 0, rgba(245,242,235,.18) 30%, #f5f2eb 61%),
      url('/assets/login-portrait.webp') center 17% / 100% auto no-repeat,
      #f5f2eb;
  }
  .auth-entry::before { inset: 12px 12px auto; height: 42%; border-color: rgba(255,255,255,.48); }
  .auth-card { margin: 0; padding: 25px 21px 22px; border-radius: 28px 28px 18px 18px; background: rgba(255,254,250,.94); box-shadow: 0 -14px 50px rgba(24,48,40,.13); }
  .auth-card::before { width: 38px; height: 3px; margin: -13px auto 18px; background: #d2c3a6; }
  .auth-card-brand { margin-bottom: 20px; }
  .auth-card-brand img { width: 39px; height: 39px; }
  .auth-card-heading h2 { margin-top: 10px; font-size: 27px; }
  .auth-card-heading p { margin-bottom: 22px; }
  .auth-field>div { min-height: 50px; }
  .auth-story { min-height: 100svh; padding: 27px 22px 24px; }
  .auth-story-copy { width: 78%; margin-top: 54px; }
  .auth-story h1 { font-size: 38px; }
  .auth-portrait { inset: 0; }
  .auth-story::after { background: linear-gradient(180deg, rgba(245,242,235,.93) 0 30%, rgba(245,242,235,.28) 60%, rgba(13,52,43,.54)); }
  .auth-footnote { color: #f4f2eb; }
}

/* Softer silhouette system from the approved reference board. */
:root {
  --moke-radius-xs: 10px;
  --moke-radius-sm: 14px;
  --moke-radius-md: 18px;
  --moke-radius-lg: 24px;
  --moke-radius-xl: 30px;
}

.workspace-pill, .credit-card, .nav-item, .sidebar .profile,
.topbar .button, .topbar .icon-button, .notice,
.setup-panel, .preview-panel, .task-center,
.workbench-tool-shelf, .recovery-timeline-card, .viral-clips-card,
.template-inputs, .template-controls, .template-confirmations,
.history-list, .project-table, .project-summary>div,
.advanced-lab-strip, .advanced-card, .advanced-modal,
.membership-hero, .membership-package, .membership-orders {
  border-radius: var(--moke-radius-md);
}

.nav-item { border-radius: 13px; }
.workspace-pill, .credit-card { border-radius: 16px; }
.topbar .button, .topbar .icon-button, .generate-button,
.template-run, .advanced-run-button, .membership-package button,
.records-tabs button { border-radius: 13px; }
.setup-panel, .preview-panel, .workbench-tool-shelf,
.recovery-timeline-card, .viral-clips-card,
.template-inputs, .template-controls, .membership-hero { border-radius: 22px; }
.tool-shelf-grid>button, .clip-list button, .template-gallery>article,
.project-card, .history-row, .task-item, .advanced-card,
.advanced-source-pane, .advanced-control-pane { border-radius: 16px; }
.upload-box, .portrait-source-switch button, .output-option-grid button,
.project-category-grid button, .select-field, .text-field,
.template-upload>div, .template-prompt textarea, .template-controls select,
.advanced-source-select select, .advanced-instruction textarea,
.advanced-presets button { border-radius: 14px; }
.preview-card, .case-card, .result-card, .comparison-stage,
.client-preview-page, .editor-modal, .video-modal, .video-composer { border-radius: 20px; }

.sidebar {
  border-right: 1px solid rgba(255,255,255,.055);
  background:
    radial-gradient(ellipse at 20% 94%, rgba(205,177,119,.18), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(69,119,103,.17), transparent 30%),
    linear-gradient(170deg, #0b3a31 0%, #062a24 50%, #031e1a 100%);
}
.sidebar::before {
  content: '';
  position: absolute;
  inset: auto -18% -3% -22%;
  height: 275px;
  opacity: .26;
  pointer-events: none;
  border: 1px solid rgba(226,208,167,.38);
  border-radius: 56% 44% 0 0;
  transform: rotate(-10deg);
}
.nav-item.active { border: 1px solid rgba(173,207,194,.2); background: linear-gradient(135deg, rgba(49,109,92,.92), rgba(24,77,64,.94)); }
.nav-item:not(.active):hover:not(:disabled) { background: rgba(255,255,255,.055); }
.sidebar .workspace-pill { border-color: rgba(224,237,231,.11); background: rgba(255,255,255,.07); box-shadow: inset 0 1px rgba(255,255,255,.04); }

.main-area::before {
  content: '';
  position: fixed;
  z-index: 0;
  right: -110px;
  top: 60px;
  width: 440px;
  height: 440px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192,214,203,.18), transparent 67%);
}
.main-area>* { position: relative; z-index: 1; }
.topbar { border-radius: 0 0 18px 18px; }
.records-tabs { border-radius: 18px; padding-inline: 10px; }
.page-heading, .template-hero, .advanced-heading { padding-inline: 8px; }
.project-summary>div, .history-count, .template-confirmations>summary,
.template-confirmation-options>label { box-shadow: inset 0 1px rgba(255,255,255,.9); }

.auth-story::after {
  background: linear-gradient(90deg, #f5f2eb 0 29%, rgba(245,242,235,.72) 45%, rgba(245,242,235,.08) 72%);
}
.auth-portrait { inset: 0 0 0 18%; }
.auth-portrait img { object-position: 54% 45%; filter: saturate(.82) contrast(.96) brightness(1.04); }
.auth-story-copy { width: 45%; }
.auth-card { border-radius: var(--moke-radius-xl); }
.auth-field>div, .auth-submit { border-radius: 15px; }
.auth-mode-actions .auth-mode-switch { border-radius: 12px; }

@media (max-width: 760px) {
  .auth-entry {
    isolation: isolate;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), #f5f2eb 62%),
      #f5f2eb;
  }
  .auth-entry::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    height: 57%;
    background: url('/assets/login-portrait.webp') center 35% / cover no-repeat;
    mask-image: linear-gradient(to bottom, #000 0 62%, transparent 100%);
    animation: auth-mobile-visual-in 1.2s cubic-bezier(.2,.75,.2,1) both;
  }
  .auth-entry::before { z-index: 1; }
  .auth-card { position: relative; z-index: 2; border-radius: 30px 30px 20px 20px; }
}

@keyframes auth-mobile-visual-in {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}

/* Login-only entry: the approved portrait is a versioned product asset, not a runtime upload. */
.auth-page-login-only {
  min-height: 100vh;
  display: block;
  overflow: hidden;
  background: #f5f2eb;
}
.auth-page-login-only .auth-entry {
  min-height: 100vh;
  place-items: center end;
  overflow-y: auto;
  padding: clamp(30px, 5vh, 60px) clamp(32px, 7vw, 112px);
  background:
    linear-gradient(90deg, rgba(245,242,235,.03) 0 42%, rgba(245,242,235,.38) 61%, rgba(245,242,235,.94) 84%, #f5f2eb 100%),
    url('/assets/login-portrait.webp') 42% 42% / cover no-repeat,
    #f5f2eb;
}
.auth-page-login-only .auth-entry::before {
  z-index: 1;
  inset: 24px;
  height: auto;
  border-color: rgba(255,255,255,.52);
}
.auth-page-login-only .auth-entry::after { display: none; }
.auth-page-login-only .auth-card {
  position: relative;
  z-index: 2;
  margin: 0;
  background: rgba(255,254,250,.92);
  box-shadow: 0 30px 80px rgba(33,52,44,.16), inset 0 1px rgba(255,255,255,.94);
}

@media (max-width: 760px) {
  .auth-page-login-only { min-height: 100svh; overflow: visible; }
  .auth-page-login-only .auth-entry {
    min-height: 100svh;
    place-items: end center;
    overflow-y: auto;
    padding: max(220px, 36svh) 14px max(14px, env(safe-area-inset-bottom));
    background:
      linear-gradient(180deg, rgba(245,242,235,0) 0 28%, rgba(245,242,235,.3) 43%, #f5f2eb 64%),
      url('/assets/login-portrait.webp') 58% top / auto 68% no-repeat,
      #f5f2eb;
  }
  .auth-page-login-only .auth-entry::before {
    inset: 10px 10px auto;
    height: 38%;
    border-color: rgba(255,255,255,.58);
  }
  .auth-page-login-only .auth-card {
    width: min(470px, 100%);
    border-radius: 30px 30px 20px 20px;
    background: rgba(255,254,250,.96);
  }
}
/* Reference board system: pearl ivory surfaces, layered emerald navigation,
   champagne details and soft medical-studio geometry. Loaded last on purpose. */
:root {
  --ref-ivory: #f5f3ed;
  --ref-paper: #fffefa;
  --ref-paper-soft: #faf9f4;
  --ref-emerald-950: #052a24;
  --ref-emerald-900: #083a31;
  --ref-emerald-800: #0f5144;
  --ref-emerald-700: #1e6858;
  --ref-sage: #e7f0eb;
  --ref-sage-2: #f0f6f2;
  --ref-gold: #d8b56c;
  --ref-ink: #173b32;
  --ref-copy: #506a61;
  --ref-muted: #81918b;
  --ref-line: #dedfd8;
  --ref-shadow: 0 16px 42px rgba(37, 58, 49, .065);
}

body, #root, .app-shell, .main-area { color: var(--ref-copy); background: var(--ref-ivory); }
.main-area { min-width: 0; }
.workspace-long-content {
  min-height: calc(100vh - 86px);
  height: auto;
  overflow: visible;
  background:
    radial-gradient(circle at 96% 0, rgba(187, 210, 198, .26), transparent 25%),
    linear-gradient(180deg, #f9f8f4 0, var(--ref-ivory) 42%);
}

/* Dashboard thesis from the supplied UI board. */
.workspace-studio-header { display: grid; gap: 12px; padding: 18px 18px 2px; }
.studio-hero {
  position: relative;
  min-height: 178px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  overflow: hidden;
  border: 1px solid rgba(32, 82, 69, .12);
  border-radius: 22px;
  background:
    linear-gradient(92deg, rgba(255,254,250,.98) 0 48%, rgba(246,246,239,.84) 70%, rgba(24,89,73,.9) 100%),
    var(--ref-paper);
  box-shadow: var(--ref-shadow);
}
.studio-hero::after {
  content: '';
  position: absolute;
  inset: auto -6% -72% 44%;
  height: 245px;
  border: 1px solid rgba(17, 81, 66, .18);
  border-radius: 58% 42% 0 0;
  transform: rotate(-8deg);
}
.studio-hero-copy { position: relative; z-index: 2; align-self: center; padding: 28px 34px; }
.studio-hero-copy>span { color: #9c7a3f; font: 600 9px/1.2 'DM Mono', monospace; letter-spacing: .2em; }
.studio-hero-copy h1 { margin: 9px 0 4px; color: var(--ref-ink); font: 600 clamp(30px, 3vw, 46px)/1.12 'Noto Serif SC', 'Songti SC', serif; letter-spacing: -.045em; }
.studio-hero-copy p { margin: 0; color: #35584e; font: 500 17px/1.6 'Noto Serif SC', 'Songti SC', serif; }
.studio-hero-copy small { display: block; margin-top: 9px; color: var(--ref-muted); font-size: 10px; letter-spacing: .16em; }
.studio-hero-art { position: relative; min-width: 0; overflow: hidden; }
.studio-hero-art::before {
  content: '';
  position: absolute;
  inset: -15% -10% -25% 8%;
  border-radius: 54% 0 0 48%;
  background:
    radial-gradient(ellipse at 32% 36%, rgba(255,255,255,.9), transparent 11%),
    radial-gradient(ellipse at 48% 48%, rgba(213,225,216,.9), transparent 33%),
    radial-gradient(ellipse at 84% 56%, rgba(16,80,66,.98), transparent 55%),
    linear-gradient(140deg, #f0f1e9, #2f7765 76%);
  filter: saturate(.82);
  transform: rotate(-5deg);
}
.studio-hero-art i { position: absolute; z-index: 2; width: 210px; height: 78px; border: 1px solid rgba(222,235,226,.45); border-radius: 50%; transform: rotate(-28deg); }
.studio-hero-art i:first-child { right: 7%; top: 25%; }
.studio-hero-art i:nth-child(2) { right: 18%; top: 44%; width: 150px; transform: rotate(34deg); }
.studio-hero-art span { position: absolute; z-index: 3; right: 28px; bottom: 27px; color: #fffdf7; font: 500 15px/1.7 'Noto Serif SC', serif; letter-spacing: .1em; text-align: right; text-shadow: 0 2px 16px rgba(3,39,31,.28); }

.studio-tool-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.studio-tool-grid>button {
  position: relative;
  min-width: 0;
  min-height: 116px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
  border: 1px solid var(--ref-line);
  border-radius: 18px;
  padding: 17px 18px;
  color: var(--ref-ink);
  text-align: left;
  background: linear-gradient(145deg, var(--ref-paper), #f9f8f3);
  box-shadow: 0 10px 28px rgba(37,58,49,.04);
}
.studio-tool-grid>button>span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 5px; border-radius: 12px; color: var(--ref-emerald-700); background: var(--ref-sage); }
.studio-tool-grid>button b { font-size: 13px; }
.studio-tool-grid>button small { overflow: hidden; color: var(--ref-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.studio-tool-grid>button>.ph { position: absolute; right: 14px; top: 17px; color: #9aaba4; }
.studio-tool-grid>button:hover { border-color: #9bb9ae; background: #fbfdf9; box-shadow: 0 15px 34px rgba(20,76,62,.08); transform: translateY(-2px); }

.studio-command-card { overflow: hidden; border: 1px solid rgba(23,75,62,.16); border-radius: 22px; background: var(--ref-paper); box-shadow: var(--ref-shadow); }
.studio-command-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #ebe9e1; padding: 15px 18px; }
.studio-command-heading>div:first-child { display: flex; align-items: baseline; gap: 10px; }
.studio-command-heading span { color: #9a7b47; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.studio-command-heading strong { color: var(--ref-ink); font: 600 17px 'Noto Serif SC', serif; }
.studio-mode-switch { display: flex; gap: 3px; border-radius: 12px; padding: 3px; background: #edf1ed; }
.studio-mode-switch button { min-width: 62px; border-radius: 9px; padding: 7px 12px; color: #7b8c86; font-size: 10px; }
.studio-mode-switch button.active { color: #fff; background: var(--ref-emerald-800); box-shadow: 0 5px 13px rgba(10,65,53,.16); }
.studio-command-row { display: grid; grid-template-columns: 1.25fr 1fr .8fr 1.05fr 1fr; align-items: stretch; gap: 8px; padding: 14px 16px 12px; }
.studio-command-row>label, .studio-template-button { min-width: 0; display: grid; align-content: center; border: 1px solid #e0e1db; border-radius: 14px; padding: 10px 12px; color: var(--ref-copy); background: var(--ref-paper-soft); }
.studio-command-row>label>span, .studio-template-button small { margin-bottom: 5px; color: #85948e; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.studio-command-row select { width: 100%; height: 28px; border: 0; outline: 0; padding: 0; color: #25483e; background: transparent; font-size: 11px; font-weight: 700; }
.studio-command-row select:disabled { opacity: 1; color: #25483e; }
.studio-command-row>label>small { overflow: hidden; margin-top: 4px; color: #97a39e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.studio-template-button { grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; text-align: left; }
.studio-template-button>.ph { color: var(--ref-emerald-700); }
.studio-template-button>span { min-width: 0; display: grid; }
.studio-template-button b { overflow: hidden; color: #25483e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.studio-template-button:hover { border-color: #93b7aa; background: var(--ref-sage-2); }
.studio-spec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.studio-spec-row select+select { border-left: 1px solid #dddeda; padding-left: 8px; }
.studio-run-button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #0b4b3e; border-radius: 14px; padding: 0 15px; color: #fffdf7; background: linear-gradient(135deg, var(--ref-emerald-900), var(--ref-emerald-700)); box-shadow: 0 11px 24px rgba(9,65,53,.16); font-size: 11px; font-weight: 800; }
.studio-run-button:hover { background: var(--ref-emerald-800); transform: translateY(-1px); }
.studio-command-foot { display: flex; align-items: center; gap: 15px; border-top: 1px solid #efede7; padding: 9px 17px; color: #899791; font-size: 9px; }
.studio-command-foot button { color: var(--ref-emerald-700); font-weight: 700; }
.studio-command-foot em { margin-left: auto; font-style: normal; }

/* All inner tools use the same light material system. */
.workspace-grid { gap: 14px; padding: 14px 18px 8px; }
.notice, .action-notice, .task-center { border-radius: 16px; }
.notice { margin-top: 12px; border-color: #d2e1da; color: #5f7b71; background: linear-gradient(90deg, #edf6f1, #f8faf7); box-shadow: 0 8px 22px rgba(24,72,60,.035); }
.task-center { border-color: var(--ref-line); color: var(--ref-copy); background: var(--ref-paper); box-shadow: 0 8px 24px rgba(37,58,49,.035); }
.task-center summary, .task-item { color: var(--ref-copy); }
.task-item { border-color: #eceae4; background: #fbfaf6; }
.task-item>div strong { color: var(--ref-ink); }
.task-type { color: var(--ref-emerald-700); background: var(--ref-sage); }
.setup-panel, .preview-panel, .workbench-tool-shelf, .recovery-timeline-card, .viral-clips-card,
.template-inputs, .template-controls, .advanced-card, .advanced-source-pane, .advanced-control-pane,
.project-table, .project-summary>div, .history-list, .membership-package, .membership-orders {
  border-color: var(--ref-line);
  color: var(--ref-copy);
  background: var(--ref-paper);
  box-shadow: var(--ref-shadow);
}
.setup-panel, .preview-panel { border-radius: 22px; }
.panel-title h2, .preview-heading h2, .section-title h2, .page-heading h1, .template-hero h1, .advanced-heading h1 { color: var(--ref-ink); }
.step-block, .preview-heading, .preview-footer { border-color: #ebe9e2; }
.upload-box, .portrait-source-switch>button, .output-option-grid>button, .project-category-grid>button,
.select-field, .text-field, .video-composer .video-source, .video-textarea, .video-options select,
.video-preprocess-modes button, .video-prompt-presets button {
  border-color: #dfe1db;
  color: var(--ref-copy);
  background: var(--ref-paper-soft);
}
.portrait-source-switch>button.selected, .output-option-grid>button.selected, .project-category-grid>button.selected,
.day-selector button.selected, .video-preprocess-modes button.active, .video-prompt-presets button.active {
  border-color: var(--ref-emerald-700);
  color: #fff;
  background: var(--ref-emerald-700);
  box-shadow: 0 7px 18px rgba(20,90,73,.14);
}
.portrait-source-switch>button.selected small, .output-option-grid>button.selected small { color: rgba(255,255,255,.74); }
.generate-button, .button.primary, .template-run, .advanced-run-button, .video-submit { color: #fffdf8; background: linear-gradient(135deg, var(--ref-emerald-900), var(--ref-emerald-700)); }

.video-composer, .video-modal, .advanced-modal, .image-editor-page, .client-preview-page {
  border-color: #d8dcd5;
  color: var(--ref-copy);
  background: #fffefa;
  box-shadow: 0 30px 90px rgba(8,44,36,.2);
}
.video-composer-head h3, .video-composer .video-source strong, .video-composer .video-form>label>strong,
.video-preprocess-modes legend, .video-composer .video-options label, .advanced-modal-title h2,
.image-editor-head h2, .client-preview-page h2 { color: var(--ref-ink); }
.video-composer .video-source span, .video-composer .modal-note, .video-prompt-presets>span,
.advanced-modal-title p, .image-editor-head p { color: var(--ref-muted); }
.video-modal-close { border: 1px solid #d8ddd7; color: var(--ref-emerald-800); background: #f2f6f3; }
.video-composer .progress-track { background: #dfeae4; }
.video-composer .progress-track span { background: var(--ref-emerald-700); }

.template-library-page, .project-records-page, .projects-page, .history-page, .advanced-page, .membership-page {
  color: var(--ref-copy);
  background:
    radial-gradient(circle at 95% 1%, rgba(193,214,203,.24), transparent 23%),
    var(--ref-ivory);
}
.template-confirmations { border-color: #d9c391; background: #d9c391; }
.template-confirmations>summary, .template-confirmation-options>label { background: #fffaf0; }
.template-confirmation-options label.checked { background: #eaf5ef; }
.records-tabs { background: rgba(245,243,237,.92); }
.records-tabs button.active { border-color: var(--ref-emerald-800); background: var(--ref-emerald-800); }

@media (max-width: 1240px) {
  .studio-command-row { grid-template-columns: 1.2fr 1fr .8fr 1fr; }
  .studio-run-button { grid-column: 1 / -1; min-height: 46px; }
}

@media (max-width: 900px) {
  .studio-hero { grid-template-columns: 1fr .65fr; }
  .studio-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio-command-row { grid-template-columns: 1fr 1fr; }
  .studio-run-button { grid-column: 1 / -1; min-height: 48px; }
}

@media (max-width: 760px) {
  body, #root, .app-shell, .main-area, .workspace-long-content,
  .mobile-hub, .mobile-workspace-menu { color: var(--ref-copy); background: var(--ref-ivory); }
  .workspace-studio-header { display: none; }
  .mobile-hub>header span, .mobile-workspace-menu header>span { color: #9b7b47; }
  .mobile-hub h1, .mobile-workspace-menu h1 { color: var(--ref-ink); }
  .mobile-hub header p, .mobile-workspace-menu header p, .mobile-hub-note { color: var(--ref-muted); }
  .mobile-hub-grid>button, .mobile-workspace-grid>button {
    border-color: var(--ref-line);
    border-radius: 18px;
    color: var(--ref-ink);
    background: var(--ref-paper);
    box-shadow: 0 12px 28px rgba(37,58,49,.055);
  }
  .mobile-hub-grid>button:first-child, .mobile-hub-grid>button:nth-child(2), .mobile-workspace-grid>button:first-child {
    border-color: #b8d0c5;
    color: var(--ref-ink);
    background: linear-gradient(145deg, #f3faf6, #e7f2ec);
  }
  .mobile-module-icon, .workspace-module-icon { border-color: #bed3ca; color: var(--ref-emerald-700); background: var(--ref-sage); }
  .mobile-workspace-grid>button:first-child .workspace-module-icon { border-color: #b8d0c5; color: #fff; background: var(--ref-emerald-700); }
  .workspace-module-copy small, .mobile-hub-grid small { color: var(--ref-muted); }
  .mobile-bottom-nav { border-color: #dfe1db; background: rgba(255,254,250,.94); box-shadow: 0 -12px 35px rgba(30,58,48,.08); }
  .mobile-bottom-nav button { color: #7a8e86; }
  .mobile-bottom-nav button.active { color: var(--ref-emerald-700); }
  .app-shell[class*="mobile-workspace-step-"] .workspace-long-content { background: var(--ref-ivory); }
  .setup-panel, .preview-panel { border-color: var(--ref-line); background: var(--ref-paper); }
}

@media (prefers-reduced-motion: reduce) {
  .studio-hero-art::before, .studio-tool-grid>button { transition: none; }
}

/* Mobile v0 — four-module launchpad and compact single-line controls. */
@media (max-width: 760px) {
  .mobile-hub {
    min-height: calc(100dvh - 114px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    padding: 18px 14px calc(76px + env(safe-area-inset-bottom));
  }

  .mobile-hub-grid {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(148px, 1fr));
    gap: 11px;
  }

  .mobile-hub-grid>button {
    min-height: 148px;
    border-radius: 20px;
    padding: 17px;
    border-color: rgba(227,219,202,.72);
    color: #fffdf7;
    background-color: #153d35;
    background-image:
      linear-gradient(180deg, rgba(8,28,24,.03) 18%, rgba(7,29,25,.36) 56%, rgba(5,24,21,.94) 100%),
      linear-gradient(90deg, rgba(7,29,25,.42) 0%, rgba(7,29,25,.08) 68%),
      var(--module-image);
    background-position: center;
    background-size: cover;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    box-shadow: 0 18px 38px rgba(22,50,42,.16);
  }

  .mobile-hub-grid>button:active { transform: scale(.98); }
  .mobile-hub-grid>button:first-child,
  .mobile-hub-grid>button:nth-child(2) {
    border-color: rgba(227,219,202,.72);
    color: #fffdf7;
    background-color: #153d35;
    background-image:
      linear-gradient(180deg, rgba(8,28,24,.03) 18%, rgba(7,29,25,.36) 56%, rgba(5,24,21,.94) 100%),
      linear-gradient(90deg, rgba(7,29,25,.42) 0%, rgba(7,29,25,.08) 68%),
      var(--module-image);
  }

  .mobile-module-icon {
    width: 48px;
    height: 48px;
    left: 16px;
    top: 16px;
    border: 1px solid rgba(255,245,219,.5);
    border-radius: 14px;
    color: #fff4d8;
    background: rgba(14,53,45,.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
  }
  .mobile-module-icon svg { width: 30px; height: 30px; }
  .mobile-hub-grid>button:first-child .mobile-module-icon { color: #fff4d8; background: rgba(14,53,45,.4); }
  .mobile-hub-grid strong { width: 100%; color: #fffdf7; font-size: 21px; font-weight: 800; line-height: 1.25; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.34); }
  .mobile-hub-grid small,
  .mobile-hub-grid>button:first-child small { width: 100%; max-width: 100%; color: rgba(244,240,227,.78); font-size: 11px; text-align: center; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
  .mobile-module-index,
  .mobile-hub-grid>button:first-child .mobile-module-index { right: 15px; top: 15px; color: rgba(255,246,220,.82); font-size: 10px; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
  .mobile-module-arrow { color: #fff4d8; }

  .aw-mobile-tools {
    top: 56px;
    gap: 6px;
    padding: 7px 9px;
  }

  .aw-mobile-tools button {
    min-height: 44px;
    padding: 7px 12px;
    white-space: nowrap;
  }

  .aw-segmented.aw-segmented-wide {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    overflow: visible;
    border-radius: 16px;
    padding: 3px;
  }

  .aw-segmented.aw-segmented-wide button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    overflow: hidden;
    padding: 7px 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .aw-tool-heading { padding: 14px 15px 12px; }
  .aw-tool-heading h1 { margin-bottom: 0; font-size: 20px; }
  .aw-tool-heading p { display: none; }
  .aw-compliance { min-height: 36px; align-items: center; padding: 7px 10px; }
  .aw-compliance span { overflow: hidden; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .aw-controls { padding: 14px 12px; }
  .aw-form-section + .aw-form-section { margin-top: 15px; }
  .aw-form-section>header { margin-bottom: 8px; }
  .aw-section-note { overflow: hidden; margin-bottom: 7px; text-overflow: ellipsis; white-space: nowrap; }

  .aw-choice-group {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }

  .aw-choice-group + .aw-choice-group { margin-top: 7px; }
  .aw-choice-group>span { overflow: hidden; padding: 0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .aw-choice-group>div {
    min-width: 0;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    padding: 1px 0 3px;
    scrollbar-width: none;
  }
  .aw-choice-group>div::-webkit-scrollbar { display: none; }
  .aw-choice-group button { min-height: 34px; flex: 0 0 auto; padding: 6px 10px; font-size: 9.5px; white-space: nowrap; }
  .aw-selection-count { margin: 6px 0 0 54px; font-size: 8px; }
}
.aesthetic-records-page {
  min-height: calc(100vh - 86px);
  padding: 28px 30px 54px;
  overflow-y: auto;
  color: #183c34;
  background:
    radial-gradient(circle at 91% 2%, rgba(182, 213, 201, .28), transparent 27%),
    #f4f3ed;
}

.aesthetic-records-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto 20px;
}

.aesthetic-records-heading > div:first-child > span {
  color: #9b7b46;
  font: 500 9px 'DM Mono', monospace;
  letter-spacing: .19em;
}

.aesthetic-records-heading h1 {
  margin: 7px 0 6px;
  font: 600 30px/1.2 'Noto Serif SC', 'Songti SC', serif;
  letter-spacing: .02em;
}

.aesthetic-records-heading p { margin: 0; color: #72877f; font-size: 12px; }
.aesthetic-records-actions { display: flex; gap: 8px; }
.aesthetic-records-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 11px; font-size: 11px; font-weight: 700; }
.aesthetic-select-all { border: 1px solid #c8d5cf; color: #527068; background: rgba(255,255,255,.75); }
.aesthetic-batch-download { border: 1px solid #0d5a4b; color: #fff; background: #0d5a4b; box-shadow: 0 8px 22px rgba(13,90,75,.15); }
.aesthetic-records-actions button:disabled { cursor: not-allowed; opacity: .42; box-shadow: none; }

.aesthetic-records-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 1320px;
  margin: 0 auto 12px;
}

.aesthetic-records-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 14px 18px;
  border: 1px solid #dddcd5;
  border-radius: 15px;
  background: rgba(255,253,248,.9);
  box-shadow: 0 12px 30px rgba(39,64,55,.05);
}

.aesthetic-records-summary span { color: #7d9189; font-size: 10px; }
.aesthetic-records-summary strong { color: #d1a655; font: 500 23px 'DM Mono', monospace; }
.aesthetic-records-summary .is-running strong { color: #3c9b81; }

.aesthetic-records-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1320px;
  margin: 0 auto 14px;
}

.aesthetic-records-tools label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(420px, 100%);
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid #d9d8d1;
  border-radius: 11px;
  color: #668078;
  background: #fffdf9;
}

.aesthetic-records-tools input { width: 100%; border: 0; outline: 0; color: #26483f; background: transparent; font-size: 11px; }
.aesthetic-records-tools input::placeholder { color: #91a19b; }
.aesthetic-records-tools > span { color: #80928c; font-size: 10px; }
.aesthetic-records-message { display: flex; align-items: center; gap: 7px; max-width: 1320px; margin: 0 auto 12px; padding: 9px 12px; border: 1px solid #b8d5ca; border-radius: 9px; color: #37695b; background: #edf7f2; font-size: 10px; }

.aesthetic-records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 13px;
  max-width: 1320px;
  margin: 0 auto;
}

.aesthetic-records-grid > article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d8ddd8;
  border-radius: 16px;
  background: #fffdf9;
  box-shadow: 0 14px 34px rgba(25,60,51,.07);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.aesthetic-records-grid > article:hover { transform: translateY(-2px); border-color: #a9c7bd; box-shadow: 0 18px 40px rgba(25,60,51,.11); }
.aesthetic-records-grid > article.selected { border-color: #1b7563; box-shadow: 0 0 0 2px rgba(27,117,99,.12), 0 18px 40px rgba(25,60,51,.1); }
.aesthetic-record-select { position: absolute; z-index: 3; left: 11px; top: 11px; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(255,255,255,.82); border-radius: 8px; color: transparent; background: rgba(10,48,41,.58); backdrop-filter: blur(6px); }
.aesthetic-record-select[aria-pressed='true'] { color: #143c32; border-color: #f1dcae; background: #f1dcae; }
.aesthetic-record-image { position: relative; display: block; width: 100%; height: 215px; overflow: hidden; padding: 0; background: #dfe7e2; }
.aesthetic-record-image::after { content: ''; position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgba(4,35,29,.62)); }
.aesthetic-record-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.aesthetic-record-image:hover img { transform: scale(1.035); }
.aesthetic-record-image > span { position: absolute; z-index: 1; right: 11px; top: 11px; padding: 5px 8px; border: 1px solid rgba(248,235,207,.66); border-radius: 999px; color: #fff4dc; background: rgba(7,45,37,.68); font-size: 8px; letter-spacing: .06em; backdrop-filter: blur(6px); }
.aesthetic-record-image > em { position: absolute; z-index: 1; right: 12px; bottom: 11px; display: flex; align-items: center; gap: 5px; color: #fff; font-size: 9px; font-style: normal; opacity: .86; }

.aesthetic-records-grid footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 12px 13px; }
.aesthetic-records-grid footer > div:first-child { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.aesthetic-records-grid footer strong { overflow: hidden; color: #203f37; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.aesthetic-records-grid footer span { overflow: hidden; color: #85968f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.aesthetic-records-grid footer > div:last-child { display: flex; align-items: center; gap: 5px; flex: none; }
.aesthetic-records-grid footer button { min-height: 30px; padding: 0 9px; border: 1px solid #ccd7d2; border-radius: 8px; color: #416a5f; font-size: 9px; background: #fff; }
.aesthetic-records-grid footer .aesthetic-record-download { display: grid; place-items: center; width: 31px; padding: 0; color: #fff; border-color: #17614f; background: #17614f; }

.aesthetic-records-empty { display: grid; place-items: center; align-content: center; min-height: 360px; max-width: 1320px; margin: 0 auto; border: 1px dashed #b9c9c3; border-radius: 16px; color: #5e7a71; background: rgba(255,253,249,.65); text-align: center; }
.aesthetic-records-empty > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #2d7566; background: #e4f1eb; }
.aesthetic-records-empty strong { margin-top: 13px; font: 600 18px 'Noto Serif SC', serif; }
.aesthetic-records-empty p { max-width: 460px; margin: 7px 20px 0; color: #899992; font-size: 10px; line-height: 1.7; }

.aesthetic-preview-backdrop { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(3,22,18,.82); backdrop-filter: blur(10px); }
.aesthetic-preview-dialog { width: min(1120px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #587169; border-radius: 18px; color: #e9eee9; background: #0b2b26; box-shadow: 0 35px 110px rgba(0,0,0,.48); }
.aesthetic-preview-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; border-bottom: 1px solid rgba(174,205,194,.16); }
.aesthetic-preview-dialog > header span { color: #d8b56f; font: 500 8px 'DM Mono', monospace; letter-spacing: .16em; }
.aesthetic-preview-dialog > header h2 { margin: 5px 0 0; color: #f4f1e9; font: 600 18px 'Noto Serif SC', serif; }
.aesthetic-preview-dialog > header button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #4f6b62; border-radius: 50%; color: #b8c9c3; }
.aesthetic-preview-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .72fr); min-height: 600px; }
.aesthetic-preview-effect { display: flex; flex-direction: column; min-width: 0; padding: 20px; border-right: 1px solid rgba(174,205,194,.16); background: #061d1a; }
.aesthetic-preview-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.aesthetic-preview-section-title > span { color: #f1dcae; font: 600 15px 'Noto Serif SC', serif; }
.aesthetic-preview-section-title small { color: #729087; font-size: 8px; }
.aesthetic-preview-effect figure { display: grid; flex: 1; place-items: center; min-height: 0; margin: 0; overflow: hidden; border: 1px solid #3c5b53; border-radius: 12px; background: #03120f; }
.aesthetic-preview-effect img { width: 100%; height: 100%; max-height: 690px; object-fit: contain; }
.aesthetic-preview-record { padding: 20px; background: linear-gradient(160deg, #10352f, #0a2925); }
.aesthetic-preview-record dl { margin: 0; border-top: 1px solid rgba(174,205,194,.15); }
.aesthetic-preview-record dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(174,205,194,.12); }
.aesthetic-preview-record dt { color: #718e85; font-size: 9px; }
.aesthetic-preview-record dd { margin: 0; color: #dce5e0; font-size: 10px; line-height: 1.55; word-break: break-word; }
.aesthetic-preview-note { margin-top: 15px; padding: 12px; border: 1px solid #426258; border-radius: 9px; background: #0a2824; }
.aesthetic-preview-note span { color: #d7b46f; font-size: 9px; }
.aesthetic-preview-note p { margin: 6px 0 0; color: #9eb1aa; font-size: 9px; line-height: 1.7; }
.aesthetic-preview-download { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 42px; margin-top: 18px; border-radius: 9px; color: #17271f; background: #f0d9a9; font-size: 11px; font-weight: 800; }
.aesthetic-preview-delete { display: block; margin: 12px auto 0; padding: 5px 8px; color: #b98b83; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.aesthetic-preview-delete:hover { color: #e0aaa1; }

.template-gallery-open { position: absolute; z-index: 1; inset: 0; width: 100%; padding: 0; cursor: zoom-in; }
.template-gallery-copy { pointer-events: none; }
.template-gallery>article:focus-within { outline: 2px solid #bc9552; outline-offset: 2px; }

.aesthetic-records-page button:focus-visible,
.aesthetic-preview-dialog button:focus-visible { outline: 2px solid #bf9855; outline-offset: 2px; }

@media (max-width: 900px) {
  .aesthetic-records-page { min-height: 100vh; padding: 22px 14px 108px; }
  .aesthetic-records-heading { align-items: flex-start; }
  .aesthetic-records-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aesthetic-preview-backdrop { padding: 8px; }
  .aesthetic-preview-dialog { max-height: calc(100dvh - 16px); }
  .aesthetic-preview-layout { grid-template-columns: 1fr; min-height: 0; }
  .aesthetic-preview-effect { min-height: 52dvh; border-right: 0; border-bottom: 1px solid rgba(174,205,194,.16); }
  .aesthetic-preview-record { min-height: auto; }
}

@media (max-width: 600px) {
  .aesthetic-records-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .aesthetic-records-heading h1 { font-size: 26px; }
  .aesthetic-records-heading p { line-height: 1.65; }
  .aesthetic-records-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .aesthetic-records-actions button { padding-inline: 9px; }
  .aesthetic-records-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .aesthetic-records-summary > div { min-height: 59px; padding: 10px; }
  .aesthetic-records-summary .is-running { display: none; }
  .aesthetic-records-summary strong { font-size: 18px; }
  .aesthetic-records-tools { gap: 9px; }
  .aesthetic-records-tools > span { flex: none; }
  .aesthetic-records-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .aesthetic-record-image { height: 175px; }
  .aesthetic-record-image > span { right: 8px; top: 8px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .aesthetic-record-image > em { right: 9px; bottom: 8px; }
  .aesthetic-records-grid footer { align-items: stretch; flex-direction: column; min-height: 95px; padding: 10px; }
  .aesthetic-records-grid footer > div:last-child { justify-content: space-between; }
  .aesthetic-records-grid footer > div:last-child > button:first-child { flex: 1; }
  .aesthetic-preview-dialog > header { padding: 13px 14px; }
  .aesthetic-preview-dialog > header h2 { max-width: 260px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .aesthetic-preview-effect { min-height: 48dvh; padding: 13px; }
  .aesthetic-preview-record { padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .aesthetic-records-grid > article,
  .aesthetic-record-image img { transition: none; }
}
:root {
  --porcelain: #f2f0ea;
  --paper: #fbfaf6;
  --ink: #17231f;
  --ink-2: #24342f;
  --jade: #6f9b8c;
  --jade-soft: #e3ebe6;
  --coral: #d86f60;
  --sand: #d8d0c2;
  --muted: #7c8984;
  --line: #dedfd9;
}

.design-lab, .design-lab * { box-sizing: border-box; }
.design-lab button, .design-lab input { font: inherit; }
.design-lab button { cursor: pointer; }
.design-lab {
  min-height: 100vh;
  padding: 38px clamp(18px, 4vw, 64px) 54px;
  color: var(--ink);
  background:
    linear-gradient(rgba(23,35,31,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,35,31,.026) 1px, transparent 1px),
    var(--porcelain);
  background-size: 42px 42px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.lab-header, .scene-tabs, .design-rationale, .med-shell, .lab-footer { width: min(1500px, 100%); margin-inline: auto; }
.lab-header { display: grid; grid-template-columns: 190px 1fr 190px; align-items: end; gap: 30px; padding-bottom: 32px; border-bottom: 1px solid #cfd2cb; }
.lab-header > a { display: inline-flex; align-items: center; gap: 7px; width: max-content; padding: 9px 12px; color: #566660; border: 1px solid #cfd3cc; border-radius: 999px; background: rgba(255,255,255,.46); font-size: 11px; text-decoration: none; transition: .2s ease; }
.lab-header > a:hover { color: var(--ink); border-color: #9aa59f; transform: translateX(-2px); }
.lab-header > div { text-align: center; }
.lab-header small { color: #75817d; font: 650 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .22em; }
.lab-header h1 { margin: 12px 0 8px; font-family: "Songti SC", STSong, serif; font-size: clamp(34px, 4.4vw, 66px); font-weight: 500; line-height: 1.08; letter-spacing: -.06em; }
.lab-header p { margin: 0 auto; max-width: 720px; color: #71807a; font-size: 13px; line-height: 1.75; }
.lab-header > span { justify-self: end; color: #87928e; font: 650 9px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; text-align: right; }

.scene-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; border: 1px solid #d0d3cc; background: rgba(251,250,246,.64); }
.scene-tabs button { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 17px 20px; color: #78847f; border: 0; border-right: 1px solid #d0d3cc; background: transparent; text-align: left; transition: color .22s ease, background .22s ease; }
.scene-tabs button:last-child { border-right: 0; }
.scene-tabs button:hover { color: var(--ink); background: rgba(255,255,255,.58); }
.scene-tabs button > span { color: #9aa39f; font: 700 9px ui-monospace, monospace; }
.scene-tabs button > div { display: grid; gap: 4px; }
.scene-tabs strong { font-size: 13px; font-weight: 650; }
.scene-tabs small { color: #9aa39f; font: 650 7px ui-monospace, monospace; letter-spacing: .13em; }
.scene-tabs button > i { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; transform: scaleX(0); background: var(--ink); transition: transform .24s ease; }
.scene-tabs button.active { color: var(--ink); background: var(--paper); }
.scene-tabs button.active > i { transform: scaleX(1); }
.scene-tabs button:focus-visible { z-index: 2; outline: 2px solid var(--jade); outline-offset: -3px; }

.design-rationale { display: flex; align-items: center; gap: 18px; padding: 22px 4px; }
.design-rationale > span { flex: 0 0 auto; color: #7f8a86; font: 650 8px ui-monospace, monospace; letter-spacing: .15em; }
.design-rationale p { margin: 0 auto 0 0; color: #687670; font-size: 11px; }
.design-rationale strong { color: var(--ink-2); font-weight: 650; }
.design-rationale > div { display: flex; align-items: center; gap: 6px; color: #87918d; font-size: 9px; white-space: nowrap; }
.design-rationale > div i { width: 9px; height: 9px; border: 1px solid rgba(0,0,0,.08); border-radius: 50%; background: var(--paper); }
.design-rationale > div:nth-last-child(2) i { background: var(--ink); }
.design-rationale > div:last-child i { background: var(--coral); }

.med-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 760px; overflow: hidden; color: var(--ink); border: 1px solid #cfd2cb; border-radius: 4px; background: var(--paper); box-shadow: 0 26px 70px rgba(33,46,41,.12); }
.med-rail { display: flex; flex-direction: column; padding: 25px 16px 18px; color: #edf2ef; background: #192924; }
.med-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.med-brand-seal { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; }
.med-brand > div { display: grid; gap: 3px; }
.med-brand strong { font-size: 13px; font-weight: 650; }
.med-brand small { color: rgba(237,242,239,.43); font: 650 6px ui-monospace, monospace; letter-spacing: .15em; }
.clinic-switcher { display: grid; gap: 5px; margin: 19px 1px 17px; padding: 13px 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); }
.clinic-switcher small, .clinic-switcher span { color: rgba(237,242,239,.46); font-size: 8px; }
.clinic-switcher strong { font-size: 10px; font-weight: 600; }
.med-rail nav { display: grid; gap: 4px; }
.med-rail nav p { margin: 13px 10px 5px; color: rgba(237,242,239,.34); font: 650 8px ui-monospace, monospace; letter-spacing: .1em; }
.med-rail nav button { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 11px; color: rgba(237,242,239,.59); border: 0; border-radius: 3px; background: transparent; font-size: 10px; text-align: left; }
.med-rail nav button:hover { color: #fff; background: rgba(255,255,255,.055); }
.med-rail nav button.active { color: #fff; background: rgba(164,199,186,.12); }
.med-rail nav button.active i { position: absolute; right: -16px; width: 2px; height: 22px; background: #9fc5b6; }
.rail-status { display: grid; gap: 6px; margin-top: auto; padding: 12px; border-top: 1px solid rgba(255,255,255,.09); }
.rail-status span { display: flex; align-items: center; gap: 6px; color: #b8d5ca; font-size: 8px; }
.rail-status small { color: rgba(237,242,239,.36); font-size: 7px; line-height: 1.5; }

.med-main { min-width: 0; background: var(--paper); }
.med-topbar { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(251,250,246,.94); }
.med-crumb { display: flex; align-items: center; gap: 7px; color: #929b97; font-size: 9px; }
.med-crumb b { color: var(--ink-2); font-weight: 650; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions label { display: flex; align-items: center; gap: 7px; width: 190px; padding: 8px 10px; color: #88938e; border: 1px solid var(--line); background: #f6f5f0; }
.top-actions input { min-width: 0; width: 100%; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 9px; }
.top-actions > button { position: relative; display: grid; place-items: center; width: 32px; height: 32px; color: #5f6d68; border: 1px solid var(--line); background: transparent; }
.top-actions > button i { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border: 1px solid var(--paper); border-radius: 50%; background: var(--coral); }
.consultant-avatar { display: grid; place-items: center; width: 32px; height: 32px; margin-left: 5px; color: #e5eee9; border-radius: 50%; background: #48645a; font: 700 9px ui-monospace, monospace; }
.consultant-name { display: grid; gap: 2px; }
.consultant-name strong { font-size: 9px; }.consultant-name span { color: #929b97; font-size: 7px; }
.scene-body { padding: 27px 28px 30px; }
.scene-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.scene-kicker, .board-heading small { color: #81908a; font: 700 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.scene-title { margin: 7px 0 5px; font-family: "Songti SC", STSong, serif; font-size: clamp(25px, 2.5vw, 38px); font-weight: 600; line-height: 1.1; letter-spacing: -.05em; }
.scene-description { margin: 0; color: #7f8c87; font-size: 10px; line-height: 1.6; }
.scene-primary, .full-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; color: #fff; border: 1px solid var(--ink); border-radius: 2px; background: var(--ink); font-size: 9px; transition: transform .2s ease, background .2s ease; }
.scene-primary:hover, .full-action:hover { transform: translateY(-2px); background: #294039; }
.reveal-card { min-width: 0; border: 1px solid var(--line); background: #fffefa; }
.board-heading, .card-topline { display: flex; align-items: center; justify-content: space-between; }
.board-heading h3 { margin: 5px 0 0; font-family: "Songti SC", STSong, serif; font-size: 17px; font-weight: 600; }
.board-heading button { display: grid; place-items: center; color: #7f8a86; border: 0; background: transparent; }

.diagnosis-grid { display: grid; grid-template-columns: minmax(480px, 1.45fr) minmax(300px, .75fr); gap: 14px; }
.face-board { padding: 14px; }
.card-topline { padding: 0 2px 12px; color: #596862; font-size: 9px; }
.card-topline > div { display: flex; align-items: center; gap: 7px; font-weight: 650; }.card-topline > span { color: #8d9893; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #51a17f; box-shadow: 0 0 0 4px rgba(81,161,127,.11); }
.face-canvas { position: relative; height: 435px; overflow: hidden; background: #d9ddd8; }
.face-canvas > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: saturate(.72) contrast(.96); }
.face-canvas::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 56%, rgba(17,30,25,.62)); pointer-events: none; }
.face-mask { position: absolute; inset: 7% 25% 9%; z-index: 2; border: 1px solid rgba(222,244,233,.58); border-radius: 48% 48% 44% 44%; box-shadow: inset 0 0 60px rgba(116,180,156,.08); }
.face-axis { position: absolute; top: 8%; bottom: 8%; left: 50%; width: 1px; background: rgba(222,244,233,.44); }
.face-eye { position: absolute; top: 40%; width: 30%; height: 8%; border-top: 1px solid rgba(222,244,233,.68); border-radius: 50%; }.face-eye.left { left: 13%; }.face-eye.right { right: 13%; }
.face-jaw { position: absolute; right: 18%; bottom: 10%; left: 18%; height: 35%; border-bottom: 1px solid rgba(222,244,233,.72); border-radius: 0 0 50% 50%; }
.scan-point { position: absolute; display: grid; place-items: center; width: 23px; height: 23px; color: #eff8f4; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(39,86,69,.67); font: 700 7px ui-monospace, monospace; }.scan-point.p1 { top: 36%; left: 6%; }.scan-point.p2 { top: 49%; right: 5%; }.scan-point.p3 { right: 14%; bottom: 11%; }
.identity-tag { position: absolute; z-index: 3; bottom: 15px; left: 15px; display: grid; gap: 3px; color: #fff; }.identity-tag span { font-family: "Songti SC", STSong, serif; font-size: 18px; }.identity-tag small { color: rgba(255,255,255,.67); font-size: 8px; }
.camera-button { position: absolute; z-index: 3; right: 15px; bottom: 15px; display: flex; align-items: center; gap: 6px; padding: 7px 9px; color: #f3f6f4; border: 1px solid rgba(255,255,255,.28); background: rgba(21,38,32,.5); font-size: 8px; backdrop-filter: blur(8px); }
.face-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1px; background: var(--line); gap: 1px; }
.face-stats > div { display: grid; gap: 4px; padding: 13px 12px; background: #fffefa; }
.face-stats small { color: #8c9692; font-size: 7px; }.face-stats strong { font: 600 22px Georgia, serif; }.face-stats span { color: #75837d; font-size: 7px; }
.insight-board { padding: 20px; }
.priority-note { display: grid; gap: 6px; margin: 18px 0; padding: 16px; border-left: 2px solid var(--coral); background: #f7f1eb; }
.priority-note span { color: #ad776c; font: 700 7px ui-monospace, monospace; letter-spacing: .13em; }.priority-note strong { font-family: "Songti SC", STSong, serif; font-size: 17px; }.priority-note p { margin: 0; color: #7d817b; font-size: 8px; line-height: 1.6; }
.insight-list { display: grid; }
.insight-list article { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.insight-list article > b { color: #a0aaa6; font: 700 8px ui-monospace, monospace; }.insight-list article > div { display: grid; gap: 5px; }.insight-list strong { font-size: 10px; }.insight-list p { margin: 0; color: #86908c; font-size: 8px; line-height: 1.55; }
.level { padding: 4px 6px; border-radius: 999px; font-size: 7px; }.level.low { color: #668477; background: #e6efea; }.level.medium { color: #8b7153; background: #f2eadc; }.level.high { color: #ad6156; background: #f6e3de; }
.text-action { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 0 5px; color: var(--ink); border: 0; border-top: 1px solid var(--ink); background: transparent; font-size: 9px; }
.evidence-strip { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 14px; padding: 14px 17px; }
.evidence-strip > div { display: grid; gap: 4px; }.evidence-strip small { color: #929c98; font-size: 7px; }.evidence-strip strong { font-size: 9px; }.evidence-strip > span { display: flex; align-items: center; gap: 6px; color: #527665; font-size: 8px; }

.plan-grid, .recovery-grid, .clients-grid { display: grid; grid-template-columns: minmax(500px, 1.35fr) minmax(310px, .65fr); gap: 14px; }
.plan-canvas, .plan-preview, .recovery-overview, .followup-board, .client-list-board, .client-profile { padding: 20px; }
.draft-label, .plan-preview .board-heading > span { padding: 5px 8px; color: #7e8b85; border: 1px solid var(--line); font-size: 7px; }
.plan-timeline { position: relative; display: grid; gap: 10px; margin-top: 18px; }
.plan-timeline::before { content: ''; position: absolute; top: 30px; bottom: 30px; left: 20px; width: 1px; background: #d4dad6; }
.plan-step { position: relative; z-index: 1; display: grid; grid-template-columns: 42px 1fr auto; gap: 13px; align-items: start; padding: 16px; border: 1px solid var(--line); background: #faf9f4; }
.plan-step.active { border-color: #91aa9f; background: #f4f7f3; }
.step-index { display: grid; place-items: center; width: 40px; height: 40px; color: #63726c; border: 1px solid #d0d7d3; border-radius: 50%; background: #fff; font: 700 9px ui-monospace, monospace; }
.plan-step.active .step-index { color: #fff; border-color: var(--ink-2); background: var(--ink-2); }
.step-copy { display: grid; gap: 6px; }.step-copy > small { color: #87928d; font-size: 7px; }.step-copy > strong { font-family: "Songti SC", STSong, serif; font-size: 14px; }.step-copy p { margin: 0; color: #7c8782; font-size: 8px; line-height: 1.55; }.step-copy > div { display: flex; gap: 12px; color: #65746e; font-size: 7px; }
.plan-step > b { color: #40584f; font: 600 12px Georgia, serif; white-space: nowrap; }
.add-stage { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 10px; color: #6b7b75; border: 1px dashed #c8cfcb; background: transparent; font-size: 8px; }
.paired-preview { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 235px; margin-top: 18px; overflow: hidden; background: #e3e2dc; }
.paired-preview figure { position: relative; min-width: 0; margin: 0; overflow: hidden; }.paired-preview img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }.paired-preview figcaption { position: absolute; bottom: 9px; left: 9px; padding: 5px 7px; color: #fff; background: rgba(19,33,28,.61); font-size: 7px; }
.paired-preview > i { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,.8); }
.plan-guardrail { display: flex; gap: 9px; margin: 12px 0; padding: 11px; color: #a26558; background: #f8ebe7; }.plan-guardrail > div { display: grid; gap: 4px; }.plan-guardrail strong { font-size: 8px; }.plan-guardrail p { margin: 0; color: #9a756d; font-size: 7px; line-height: 1.45; }
.plan-summary { margin: 0; }.plan-summary > div { display: flex; justify-content: space-between; padding: 10px 1px; border-top: 1px solid var(--line); }.plan-summary dt { color: #89938f; font-size: 8px; }.plan-summary dd { margin: 0; font-size: 9px; font-weight: 650; }.plan-summary dd.good { color: #557c6b; }
.full-action { width: 100%; margin-top: 10px; }

.recovery-score-row { display: flex; align-items: center; gap: 24px; margin: 24px 0 18px; }
.recovery-ring { position: relative; display: grid; place-items: center; width: 115px; height: 115px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--jade) 0 82%, #e4e7e2 82% 100%); }
.recovery-ring::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fffefa; }
.recovery-ring strong, .recovery-ring small { position: relative; z-index: 1; }.recovery-ring strong { margin-top: 15px; font: 600 29px Georgia, serif; }.recovery-ring small { align-self: start; color: #8d9793; font-size: 7px; }
.recovery-copy { display: grid; gap: 6px; max-width: 420px; }.recovery-copy small { color: #779186; font: 700 7px ui-monospace, monospace; letter-spacing: .1em; }.recovery-copy h4 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: 18px; }.recovery-copy p { margin: 0; color: #808b86; font-size: 8px; line-height: 1.65; }
.on-track { display: flex; align-items: center; gap: 5px; color: #537565; font-size: 8px; }
.chart-area { display: grid; grid-template-columns: 32px 1fr; height: 220px; padding: 16px 14px 0 0; border-top: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), #e6e8e3 25%); }
.chart-labels { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 28px; color: #9aa29f; font-size: 6px; }
.bar-chart { display: grid; grid-template-columns: repeat(14, 1fr); gap: 7px; align-items: end; }
.bar-chart > div { display: grid; grid-template-rows: 1fr 20px; align-items: end; height: 100%; text-align: center; }.bar-chart i { display: block; min-height: 4px; background: #b7ccc3; transition: height .4s ease; }.bar-chart .today i { background: var(--coral); }.bar-chart span { align-self: center; color: #919b97; font: 700 6px ui-monospace, monospace; }
.chart-legend { display: flex; gap: 16px; padding: 12px 0 0 32px; color: #7e8a85; font-size: 7px; }.chart-legend span { display: flex; align-items: center; gap: 5px; }.chart-legend i { width: 7px; height: 7px; background: #b7ccc3; }.chart-legend span:nth-child(2) i { background: #e5e9e4; }.chart-legend b { margin-left: auto; color: var(--coral); font-weight: 650; }
.followup-photo { position: relative; height: 185px; margin-top: 18px; overflow: hidden; }.followup-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }.followup-photo > div { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; padding: 10px; color: #fff; background: linear-gradient(transparent, rgba(16,29,24,.72)); }.followup-photo span { font: 700 8px ui-monospace, monospace; }.followup-photo small { color: rgba(255,255,255,.68); font-size: 7px; }
.symptom-list { margin-top: 10px; }.symptom-list > div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); }.symptom-list span { color: #87928d; font-size: 8px; }.symptom-list b { font-size: 8px; }.symptom-list b.attention { color: var(--coral); }
.doctor-note { display: grid; gap: 6px; margin-top: 12px; padding: 12px; background: #eef3ef; }.doctor-note span { color: #617d71; font: 700 7px ui-monospace, monospace; letter-spacing: .1em; }.doctor-note p { margin: 0; color: #66736e; font-size: 8px; line-height: 1.6; }
.recovery-events { display: flex; align-items: center; gap: 30px; margin-top: 14px; padding: 13px 17px; }.recovery-events > div { display: flex; align-items: center; gap: 9px; }.recovery-events span { display: grid; gap: 3px; }.recovery-events small { color: #939d99; font-size: 7px; }.recovery-events strong { font-size: 8px; }.recovery-events button { margin-left: auto; padding: 7px 10px; color: #52665d; border: 1px solid var(--line); background: transparent; font-size: 8px; }

.clients-grid { grid-template-columns: minmax(580px, 1.5fr) minmax(280px, .5fr); }
.client-list-tools { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 15px; }
.client-list-tools > div { display: flex; gap: 4px; }.client-list-tools button { padding: 7px 9px; color: #85908c; border: 0; background: transparent; font-size: 8px; }.client-list-tools button.active { color: #fff; background: var(--ink-2); }
.client-list-tools label { display: flex; align-items: center; gap: 6px; width: 200px; padding: 8px 9px; color: #8b9691; border: 1px solid var(--line); }.client-list-tools input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 8px; }
.client-table-head, .client-rows > button { display: grid; grid-template-columns: 1.25fr 1fr .9fr 1fr; gap: 12px; align-items: center; }
.client-table-head { padding: 9px 12px; color: #939d99; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f6f5f0; font-size: 7px; }
.client-rows > button { width: 100%; padding: 13px 12px; color: #687670; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-size: 8px; text-align: left; transition: background .18s ease; }
.client-rows > button:hover, .client-rows > button.selected { background: #f0f4f0; }.client-rows > button.selected { box-shadow: inset 2px 0 var(--jade); }
.client-cell { display: flex; align-items: center; gap: 9px; }.client-cell > i { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; color: #fff; border-radius: 50%; font-style: normal; }.client-cell b { display: grid; gap: 3px; color: var(--ink); font-size: 9px; }.client-cell small { color: #9aa39f; font: 600 6px ui-monospace, monospace; }
.client-rows > button > span:last-child { display: flex; align-items: center; justify-content: space-between; gap: 5px; }.client-rows em { padding: 5px 7px; color: #5c766b; border-radius: 999px; background: #e7eeea; font-size: 7px; font-style: normal; }
.list-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; color: #929c98; font-size: 7px; }.list-footer button { padding: 6px 8px; color: #65736e; border: 1px solid var(--line); background: transparent; font-size: 7px; }.list-footer button:disabled { opacity: .4; }
.profile-cover { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }.profile-cover > span { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; border-radius: 50%; font-family: "Songti SC", STSong, serif; font-size: 18px; }.profile-cover > div { display: grid; gap: 3px; }.profile-cover small { color: #919b97; font: 650 6px ui-monospace, monospace; }.profile-cover h3 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: 18px; }.profile-cover p { margin: 0; color: #84908b; font-size: 7px; }.profile-cover button { align-self: start; color: #7f8b86; border: 0; background: transparent; }
.value-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0; border: 1px solid var(--line); }.value-metrics > div { display: grid; gap: 5px; padding: 11px 9px; border-right: 1px solid var(--line); }.value-metrics > div:last-child { border-right: 0; }.value-metrics small { color: #919b97; font-size: 6px; }.value-metrics strong { font: 600 13px Georgia, serif; }
.next-action { display: grid; gap: 7px; padding: 14px; background: #eef3ef; }.next-action > span { color: #678276; font: 700 7px ui-monospace, monospace; letter-spacing: .1em; }.next-action strong { font-family: "Songti SC", STSong, serif; font-size: 14px; }.next-action p { margin: 0; color: #74817c; font-size: 7px; line-height: 1.55; }.next-action button { display: flex; align-items: center; gap: 5px; width: max-content; padding: 0; color: #476357; border: 0; background: transparent; font-size: 7px; }
.history-title { display: flex; justify-content: space-between; margin: 16px 0 7px; }.history-title span { font-size: 9px; font-weight: 650; }.history-title button { color: #84908b; border: 0; background: transparent; font-size: 7px; }
.mini-history article { position: relative; display: flex; gap: 9px; padding: 9px 0; }.mini-history article > i { width: 7px; height: 7px; margin-top: 3px; border: 2px solid #8da69b; border-radius: 50%; }.mini-history article:not(:last-child)::after { content: ''; position: absolute; top: 18px; bottom: -2px; left: 3px; width: 1px; background: #d8ddd9; }.mini-history article > div { display: grid; gap: 4px; }.mini-history strong { font-size: 8px; }.mini-history small { color: #929b97; font-size: 7px; }

.lab-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; color: #8d9793; font: 650 7px/1.5 ui-monospace, monospace; letter-spacing: .1em; }.lab-footer p { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; }

@media (max-width: 1120px) {
  .med-shell { grid-template-columns: 184px minmax(0, 1fr); }
  .diagnosis-grid, .plan-grid, .recovery-grid, .clients-grid { grid-template-columns: 1fr; }
  .insight-board, .plan-preview, .followup-board, .client-profile { min-height: 0; }
  .client-profile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.profile-cover { grid-column: 1 / -1; }.value-metrics { align-self: start; margin: 0; }
}

@media (max-width: 780px) {
  .design-lab { padding: 22px 12px 38px; background-size: 30px 30px; }
  .lab-header { grid-template-columns: 1fr; gap: 16px; align-items: start; }.lab-header > div { text-align: left; }.lab-header h1 { font-size: 36px; }.lab-header p { margin: 0; }.lab-header > span { display: none; }
  .scene-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }.scene-tabs::-webkit-scrollbar { display: none; }.scene-tabs button { min-width: 145px; border-bottom: 0; }
  .design-rationale { align-items: flex-start; overflow-x: auto; }.design-rationale p { min-width: 360px; }.design-rationale > div { display: none; }
  .med-shell { display: block; min-height: 0; }.med-rail { display: none; }
  .med-topbar { height: 56px; padding: 0 15px; }.med-crumb > span, .med-crumb svg, .top-actions label, .consultant-name { display: none; }
  .scene-body { padding: 21px 15px 20px; }.scene-heading { align-items: flex-start; }.scene-heading > div { max-width: 72%; }.scene-primary { flex: 0 0 auto; padding: 9px 10px; }.scene-title { font-size: 25px; }
  .diagnosis-grid, .plan-grid, .recovery-grid, .clients-grid { grid-template-columns: minmax(0, 1fr); }
  .face-canvas { height: 350px; }.face-mask { right: 18%; left: 18%; }.face-stats { grid-template-columns: 1fr; }
  .plan-step { grid-template-columns: 34px 1fr; }.plan-step > b { grid-column: 2; }.step-index { width: 34px; height: 34px; }
  .recovery-score-row { align-items: flex-start; }.recovery-ring { width: 92px; height: 92px; }.recovery-ring strong { font-size: 24px; }
  .client-list-tools { align-items: stretch; flex-direction: column; }.client-list-tools label { width: 100%; }.client-table-head { display: none; }.client-rows > button { grid-template-columns: 1fr auto; }.client-rows > button > span:nth-child(2), .client-rows > button > span:nth-child(3) { display: none; }
  .client-profile { display: block; }.value-metrics { margin: 14px 0; }
  .evidence-strip, .recovery-events, .lab-footer { align-items: flex-start; flex-direction: column; }.recovery-events button { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .design-lab *, .design-lab *::before, .design-lab *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.aw-shell {
  --aw-ink: #123d34;
  --aw-copy: #536b63;
  --aw-muted: #88978f;
  --aw-line: #e1e5df;
  --aw-mint: #e9f4ef;
  --aw-mint-strong: #cfeae0;
  --aw-paper: #fffefa;
  min-height: calc(100vh - 86px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  color: var(--aw-copy);
  background: #f5f3ed;
}

.top-workbench-summary { display: flex; align-items: center; gap: 7px; border: 1px solid #d9e3dd; border-radius: 999px; padding: 8px 12px; color: #35685b; background: #f1f7f3; font-size: 10px; font-weight: 700; }

.sidebar .primary-nav { min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; scrollbar-width: thin; scrollbar-color: rgba(217,231,224,.2) transparent; }
.sidebar-workbench-subnav { display: grid; gap: 3px; max-height: 430px; overflow: hidden; margin: 6px 3px 12px 18px; border-left: 1px solid rgba(208,229,220,.18); padding: 3px 0 3px 11px; opacity: 1; transform-origin: top; transition: max-height .28s cubic-bezier(.2,.75,.2,1), opacity .2s ease, transform .28s cubic-bezier(.2,.75,.2,1), margin .28s ease, padding .28s ease; }
.sidebar-workbench-subnav.collapsed { max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: scaleY(.94) translateY(-6px); pointer-events: none; }
.workbench-toggle { display: grid; flex: 0 0 auto; place-items: center; margin-left: auto; transition: transform .24s ease; }
.workbench-toggle.expanded { transform: rotate(180deg); }
.sidebar-workbench-subnav button { min-height: 40px; display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 8px 10px; color: #9eb5ad; text-align: left; font-size: 12.5px; font-weight: 600; line-height: 1.25; transition: color .18s ease, background .18s ease, transform .18s ease; }
.sidebar-workbench-subnav button:hover { color: #fffdf7; background: rgba(255,255,255,.055); }
.sidebar-workbench-subnav button.active { color: #fffdf7; background: rgba(86,143,126,.26); box-shadow: inset 2px 0 #e5c982; }
.sidebar-workbench-subnav button svg { width: 17px; height: 17px; flex: 0 0 auto; color: #a7c6bc; }
.sidebar-workbench-subnav button.active svg { color: #f0d790; }
.sidebar-workbench-subnav button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-mobile-tools { display: none; }

.aw-subnav {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #d8e0da;
  padding: 18px 14px 14px;
  background: #e8f3ee;
}
.aw-subnav-head { display: flex; align-items: center; gap: 11px; padding: 6px 8px 17px; border-bottom: 1px solid rgba(22,83,69,.12); }
.aw-subnav-head>span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #fff; background: #0d5446; }
.aw-subnav-head>div { min-width: 0; display: grid; gap: 2px; }
.aw-subnav-head strong { color: var(--aw-ink); font-size: 15px; }
.aw-subnav-head small { color: #789087; font-size: 10px; }
.aw-subnav nav { flex: 1; min-height: 0; overflow: auto; padding: 14px 0; scrollbar-width: thin; }
.aw-nav-group + .aw-nav-group { margin-top: 17px; }
.aw-nav-title { display: flex; align-items: center; justify-content: space-between; padding: 0 9px 7px; color: #698077; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.aw-nav-title em { min-width: 22px; padding: 3px 6px; border-radius: 999px; color: #477066; font-style: normal; text-align: center; background: rgba(255,255,255,.55); }
.aw-nav-group>button { width: 100%; min-height: 40px; display: grid; grid-template-columns: 21px minmax(0,1fr) 14px; align-items: center; gap: 8px; border-radius: 12px; padding: 8px 10px; color: #47655d; text-align: left; }
.aw-nav-group>button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-nav-group>button>.ph:last-child { opacity: 0; }
.aw-nav-group>button:hover { color: #194b40; background: rgba(255,255,255,.55); }
.aw-nav-group>button.active { color: #0d5547; background: #fff; box-shadow: 0 8px 24px rgba(28,73,62,.08); }
.aw-nav-group>button.active>.ph:last-child { opacity: 1; }
.aw-engine-status { display: flex; align-items: center; gap: 9px; border: 1px solid rgba(25,91,75,.12); border-radius: 14px; padding: 10px 11px; background: rgba(255,255,255,.58); }
.aw-engine-status>span { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #cf766c; }
.aw-engine-status>span.ready { background: #52aa89; box-shadow: 0 0 0 4px rgba(82,170,137,.12); }
.aw-engine-status>div { min-width: 0; display: grid; gap: 2px; }
.aw-engine-status strong { color: #315c51; font-size: 10px; }
.aw-engine-status small { color: #7f918b; font-size: 9px; }

.aw-workspace { min-width: 0; padding: 14px; }
.aw-compliance { min-height: 38px; display: flex; align-items: center; gap: 7px; border: 1px solid #eadcc2; border-radius: 14px 14px 0 0; padding: 8px 14px; color: #846c45; background: #fff8ec; font-size: 10px; }
.aw-compliance strong { color: #a36d23; }
.aw-compliance span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-tool-page { min-height: calc(100vh - 142px); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid var(--aw-line); border-top: 0; border-radius: 0 0 20px 20px; background: var(--aw-paper); box-shadow: 0 18px 48px rgba(40,64,55,.06); }
.aw-tool-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid #eceee9; padding: 19px 22px 17px; }
.aw-tool-heading>div { min-width: 0; }
.aw-tool-heading>div>span { color: #51a991; font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.aw-tool-heading h1 { margin: 5px 0 3px; color: #142f29; font: 700 23px/1.3 'Noto Serif SC', 'Songti SC', serif; }
.aw-tool-heading p { margin: 0; color: #687b74; font-size: 11px; }
.aw-help { flex: 0 0 auto; border: 1px solid #dde4df; border-radius: 999px; padding: 8px 12px; color: #61766e; background: #fff; font-size: 10px; }
.aw-tool-body { min-height: 0; display: grid; grid-template-columns: minmax(430px, .95fr) minmax(390px, 1.05fr); }
.aw-controls, .aw-preview { min-width: 0; min-height: 0; }
.aw-controls { max-height: calc(100vh - 282px); overflow: auto; border-right: 1px solid #eceeea; padding: 18px 20px 24px; scrollbar-width: thin; }
.aw-preview { display: grid; grid-template-rows: auto minmax(0,1fr); padding: 18px 20px; }
.aw-preview>header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.aw-preview h2 { margin: 0; color: #1b3b33; font-size: 15px; }
.aw-preview>header span { color: #94a09b; font-size: 9px; }
.aw-preview-state { min-height: 330px; display: grid; place-content: center; justify-items: center; gap: 8px; border: 1px solid #e4e7e2; border-radius: 18px; color: #96a39e; background: #fbfcfa; text-align: center; }
.aw-preview-state strong { color: #577068; font-size: 15px; }
.aw-preview-state span { max-width: 320px; font-size: 10px; line-height: 1.7; }
.aw-preview-state.error { color: #b56560; background: #fff9f8; }
.aw-preview-state.error strong { color: #8f4c48; }

.aw-back-project { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; border: 1px solid #dce5df; border-radius: 12px; padding: 9px 12px; color: #315f53; background: #f7faf8; font-size: 10px; }
.aw-back-project span { color: #86a097; }
.aw-section-note { margin: -3px 0 10px; color: #82938d; font-size: 9px; line-height: 1.65; }
.aw-watermark { display: flex; align-items: center; gap: 10px; }
.aw-watermark>button { width: 42px; height: 23px; flex: 0 0 auto; border-radius: 999px; padding: 3px; background: #d7dfdb; transition: background .18s ease; }
.aw-watermark>button span { width: 17px; height: 17px; display: block; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(25,55,47,.18); transition: transform .18s ease; }
.aw-watermark>button.on { background: #58bca2; }
.aw-watermark>button.on span { transform: translateX(19px); }
.aw-watermark em { flex: 1; border: 1px solid #e2e6e2; border-radius: 11px; padding: 8px 11px; color: #677a73; background: #f7f8f6; font-size: 10px; font-style: normal; }

.aw-recovery-preview { min-height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; border: 1px solid #e1e7e2; border-radius: 18px; padding: 14px; background: #fff; }
.aw-recovery-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aw-recovery-preview-head strong { color: #48665d; font-size: 11px; }
.aw-recovery-preview-head button, .aw-recovery-preview-actions button, .aw-timeline-board header button { border: 1px solid #dce5df; border-radius: 10px; padding: 7px 10px; color: #597269; background: #fff; font-size: 9px; }
.aw-recovery-carousel { min-height: 380px; display: grid; grid-template-columns: 32px minmax(68px,.28fr) minmax(190px,1fr) minmax(68px,.28fr) 32px; align-items: center; gap: 12px; padding: 16px 0; }
.aw-stage-arrow { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #9fdacb; border-radius: 50%; color: #2b7966; background: #fbfffd; font-size: 23px; line-height: 1; }
.aw-stage-arrow:disabled { opacity: .25; }
.aw-stage-side { display: grid; justify-items: center; gap: 8px; color: #98a49f; font-size: 9px; }
.aw-stage-side>span { width: 100%; height: 190px; overflow: hidden; border: 1px solid #c9eee4; border-radius: 15px; background: #fbfdfc; }
.aw-stage-side img { width: 100%; height: 100%; object-fit: cover; }
.aw-stage-main { min-width: 0; height: 315px; overflow: hidden; border: 1px solid #9ee1d0; border-radius: 18px; background: #fbfdfc; box-shadow: 0 10px 26px rgba(30,98,80,.06); }
.aw-stage-main>img { width: 100%; height: 100%; display: block; object-fit: contain; }
.aw-stage-main>div:not(.aw-preview-state) { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 7px; color: #9aa8a3; }
.aw-stage-main>div:not(.aw-preview-state) strong { color: #75867f; font-size: 12px; }
.aw-stage-main>div:not(.aw-preview-state) span { font-size: 9px; }
.aw-stage-main .aw-preview-state { min-height: 100%; border: 0; }
.aw-recovery-preview-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aw-recovery-preview-actions>div { display: flex; gap: 7px; }
.aw-recovery-preview-actions button:disabled { opacity: .35; }
.aw-timeline-board { min-height: 100%; display: grid; align-content: start; gap: 15px; border: 1px solid #e1e7e2; border-radius: 18px; padding: 16px; background: #fff; }
.aw-timeline-board header { display: flex; align-items: center; justify-content: space-between; color: #315d51; }
.aw-timeline-board>div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.aw-timeline-board>div>button { overflow: hidden; border: 1px solid #dfe6e1; border-radius: 13px; background: #fbfdfc; }
.aw-timeline-board>div>button.active { border-color: #62bda5; box-shadow: inset 0 -2px #62bda5; }
.aw-timeline-board img { width: 100%; aspect-ratio: 3/4; display: block; object-fit: cover; }
.aw-timeline-board button>span { aspect-ratio: 3/4; display: grid; place-content: center; justify-items: center; gap: 4px; color: #90a19a; }
.aw-timeline-board button small { color: #506c63; }
.aw-timeline-board button em { font-size: 8px; font-style: normal; }

.aw-form-section + .aw-form-section { margin-top: 20px; }
.aw-form-section>header { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.aw-form-section>header>span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #66bea7; border-radius: 50%; color: #2c9d81; font-size: 9px; }
.aw-form-section>header>strong { color: #1e3d35; font-size: 13px; }
.aw-form-section textarea { width: 100%; min-height: 88px; resize: vertical; border: 1px solid #dfe4df; border-radius: 14px; outline: 0; padding: 12px 13px; color: #34564d; background: #fbfcfa; font: inherit; line-height: 1.7; }
.aw-form-section textarea:focus { border-color: #76bba8; box-shadow: 0 0 0 3px rgba(77,169,143,.09); }
.aw-form-section textarea.aw-copy-input { min-height: 210px; }
.aw-project-grid { min-height: clamp(520px, calc(100vh - 330px), 640px); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: repeat(4, minmax(0,1fr)); gap: 12px; }
.aw-project-grid button { position: relative; isolation: isolate; min-height: 124px; overflow: hidden; display: flex; align-items: flex-end; border: 1px solid #d8e2dc; border-radius: 18px; padding: 18px; color: #294d43; text-align: left; background: #edf5f1; box-shadow: 0 10px 28px rgba(26,74,62,.07); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.aw-project-grid button::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(250,253,250,.99) 0%, rgba(248,252,249,.96) 34%, rgba(243,250,247,.76) 55%, rgba(236,246,242,.2) 82%, rgba(236,246,242,.04) 100%); }
.aw-project-grid button>img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; transition: transform .45s cubic-bezier(.2,.75,.2,1), filter .25s ease; }
.aw-project-card-copy { position: relative; z-index: 1; min-width: 0; max-width: 68%; display: grid; justify-items: start; gap: 4px; }
.aw-project-card-copy>span { color: #31927a; font: 700 10px/1 'DM Mono', monospace; letter-spacing: .12em; }
.aw-project-card-copy strong { color: #143f35; font-size: 17px; font-weight: 800; line-height: 1.25; text-wrap: balance; }
.aw-project-card-copy small { color: #688178; font-size: 10.5px; font-weight: 650; line-height: 1.3; }
.aw-project-card-arrow { position: absolute; z-index: 1; top: 15px; right: 15px; color: rgba(19,87,70,.72); filter: drop-shadow(0 1px 4px rgba(255,255,255,.8)); transition: transform .2s ease; }
.aw-project-grid button:hover { border-color: #79bba9; box-shadow: 0 15px 34px rgba(22,78,64,.13); transform: translateY(-2px); }
.aw-project-grid button:hover>img { transform: scale(1.045); filter: saturate(1.04); }
.aw-project-grid button:hover .aw-project-card-arrow { transform: translate(2px,-2px); }
.aw-project-grid button:focus-visible { outline: 3px solid rgba(52,151,126,.24); outline-offset: 2px; }
.aw-project-grid button.selected { border-color: #45a78d; box-shadow: inset 0 -3px #51b99d, 0 15px 34px rgba(22,78,64,.12); }
.aw-choice-group { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: start; gap: 9px; }
.aw-choice-group + .aw-choice-group { margin-top: 9px; }
.aw-choice-group>span { padding-top: 8px; color: #6e8079; font-size: 10px; }
.aw-choice-group>div { display: flex; flex-wrap: wrap; gap: 7px; }
.aw-choice-group button { min-height: 31px; border: 1px solid #dfe4df; border-radius: 999px; padding: 6px 13px; color: #576c65; background: #fff; font-size: 10px; }
.aw-choice-group button:hover { border-color: #9ccdbf; color: #246f5d; }
.aw-choice-group button.selected { border-color: #9fd8c8; color: #08765d; background: #eaf7f2; }
.aw-choice-group button:disabled { opacity: .38; cursor: not-allowed; }
.aw-segmented { width: max-content; display: flex; gap: 3px; margin-bottom: 20px; border: 1px solid #e1e5e0; border-radius: 999px; padding: 3px; background: #fff; }
.aw-segmented button { min-width: 104px; border-radius: 999px; padding: 8px 17px; color: #62766f; }
.aw-segmented button.active { color: #08684f; background: #e7f6f0; box-shadow: 0 4px 12px rgba(29,108,88,.09); }
.aw-segmented-wide { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.aw-segmented-wide::-webkit-scrollbar { display: none; }
.aw-selection-count { margin: 11px 0 0 73px; color: #80928b; font-size: 9px; }

.aw-upload { overflow: hidden; border: 1px dashed #9fd9cb; border-radius: 16px; background: #fcfefd; }
.aw-upload.is-dragging { border-color: #2c967a; background: #effaf6; box-shadow: 0 0 0 4px rgba(44,150,122,.09); }
.aw-upload-empty { width: 100%; min-height: 150px; display: grid; place-content: center; justify-items: center; gap: 6px; color: #748880; }
.aw-upload-empty>span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #2e9c80; background: #ecf8f4; }
.aw-upload-empty strong { color: #31564c; font-size: 12px; }
.aw-upload-empty small { font-size: 9px; }
.aw-upload-empty em { margin-top: 3px; border: 1px solid #cfe8df; border-radius: 999px; padding: 6px 10px; color: #3b7968; background: #fff; font-size: 9px; font-style: normal; }
.aw-upload.has-media { border-style: solid; }
.aw-upload img, .aw-upload video { width: 100%; max-height: 285px; display: block; object-fit: contain; background: #f2f4f1; }
.aw-upload-caption { min-height: 41px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; }
.aw-upload-caption>div { min-width: 0; display: flex; align-items: center; gap: 7px; color: #329176; }
.aw-upload-caption>div span { overflow: hidden; color: #566e65; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.aw-upload-caption button { border: 1px solid #d9e2dd; border-radius: 999px; padding: 5px 10px; color: #4f7167; font-size: 9px; }
.aw-upload.disabled { opacity: .65; }

.aw-prompt-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.aw-prompt-presets button { min-height: 31px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dce6e0; border-radius: 999px; padding: 6px 11px; color: #3c6d60; background: #f7fbf9; font-size: 9px; }
.aw-prompt-presets button:hover { border-color: #84c6b3; color: #176a55; background: #eef8f4; }
.aw-prompt-presets button.selected { border-color: #2f8b73; color: #fff; background: #176451; box-shadow: 0 6px 16px rgba(20,91,73,.13); }
.aw-doctor-presets { margin-top: 0; }

.aw-comparison-preview { min-height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 11px; }
.aw-comparison-labels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; text-align: center; }
.aw-comparison-labels strong { color: #405f56; font-size: 11px; }
.aw-comparison-grid { min-height: 330px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.aw-comparison-grid figure { min-width: 0; min-height: 330px; overflow: hidden; display: grid; place-items: center; margin: 0; border: 1px solid #dfe6e1; border-radius: 17px; background: #fbfcfa; }
.aw-comparison-grid img { width: 100%; height: 100%; display: block; object-fit: contain; }
.aw-comparison-grid figure>div { display: grid; place-content: center; justify-items: center; gap: 9px; padding: 18px; color: #98a49f; text-align: center; }
.aw-comparison-grid figure>div span { max-width: 220px; font-size: 10px; line-height: 1.55; }
.aw-comparison-grid figure>div.error { color: #ad625c; }
.aw-comparison-actions { display: flex; justify-content: flex-end; gap: 8px; }
.aw-comparison-actions button { min-height: 34px; display: flex; align-items: center; gap: 6px; border: 1px solid #dce5df; border-radius: 10px; padding: 7px 11px; color: #476b61; background: #fff; font-size: 9px; }
.aw-comparison-actions button:disabled { opacity: .35; cursor: not-allowed; }

.aw-consultation-intro { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; border: 1px solid #c9ddd4; border-radius: 15px; padding: 12px 13px; color: #155b4c; background: linear-gradient(105deg,#edf8f3 0%,#f9f7ee 100%); }
.aw-consultation-intro>svg { flex: 0 0 auto; }
.aw-consultation-intro>div { display: grid; gap: 2px; }
.aw-consultation-intro strong { color: #17483d; font-size: 12px; }
.aw-consultation-intro span { color: #6c8078; font-size: 9px; line-height: 1.55; }
.aw-field-hint { display: block; margin-top: 7px; color: #84958f; font-size: 9px; line-height: 1.55; }
.aw-consultation-report { min-height: 430px; display: grid; grid-template-columns: minmax(230px,.88fr) minmax(290px,1.12fr); overflow: hidden; border: 1px solid #dfe7e2; border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(26,70,59,.06); }
.aw-consultation-visual { min-width: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 10px; padding: 14px; background: linear-gradient(145deg,#edf4f0 0%,#f8f5ec 100%); }
.aw-consultation-visual-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #48685e; font-size: 9px; }
.aw-consultation-visual-head em { border-radius: 999px; padding: 4px 7px; color: #9b7841; background: rgba(255,255,255,.72); font-style: normal; }
.aw-consultation-visual figure { position: relative; min-height: 300px; overflow: hidden; display: grid; place-items: center; margin: 0; border: 1px solid rgba(62,112,97,.17); border-radius: 15px; background: rgba(255,255,255,.78); }
.aw-consultation-visual figure>img { width: 100%; height: 100%; max-height: calc(100vh - 385px); display: block; object-fit: contain; }
.aw-scan-guide { position: absolute; inset: 11% 12%; pointer-events: none; }
.aw-scan-guide::before, .aw-scan-guide::after, .aw-scan-guide i { content: ''; position: absolute; border: 1px solid rgba(42,139,113,.46); border-radius: 50%; }
.aw-scan-guide::before { inset: 8% 24% 4%; border-radius: 42% 42% 48% 48%; }
.aw-scan-guide::after { left: 28%; right: 28%; top: 34%; height: 14%; border-left-color: transparent; border-right-color: transparent; }
.aw-scan-guide i:first-child { left: 22%; top: 35%; width: 8px; height: 8px; background: #dbb96c; box-shadow: 0 0 0 4px rgba(219,185,108,.16); }
.aw-scan-guide i:nth-child(2) { right: 22%; top: 35%; width: 8px; height: 8px; background: #dbb96c; box-shadow: 0 0 0 4px rgba(219,185,108,.16); }
.aw-scan-guide i:last-child { left: 48%; top: 66%; width: 8px; height: 8px; background: #dbb96c; box-shadow: 0 0 0 4px rgba(219,185,108,.16); }
.aw-consultation-visual>button { justify-self: stretch; min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #bed8cf; border-radius: 10px; color: #276856; background: rgba(255,255,255,.78); font-size: 9px; }
.aw-consultation-visual>button:disabled { opacity: .42; }
.aw-consultation-copy { min-width: 0; max-height: calc(100vh - 285px); overflow: auto; display: grid; align-content: start; gap: 10px; border-left: 1px solid #e3e8e4; padding: 14px; scrollbar-width: thin; }
.aw-consultation-copy>header { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #2d6657; }
.aw-consultation-copy>header>div { display: grid; gap: 2px; }
.aw-consultation-copy>header span { color: #b08a4d; font: 700 8px/1.2 'DM Mono',monospace; letter-spacing: .14em; }
.aw-consultation-copy>header strong { color: #173f36; font-size: 13px; }
.aw-consultation-copy-list { display: grid; gap: 8px; }
.aw-consultation-copy article { border: 1px solid #e1e7e3; border-radius: 13px; padding: 10px; background: #fbfcfa; }
.aw-consultation-copy article>div { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 7px; margin-bottom: 8px; }
.aw-consultation-copy article>div>span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #125c4c; font: 700 8px/1 'DM Mono',monospace; }
.aw-consultation-copy article>div>input { min-width: 0; border: 0; border-bottom: 1px solid transparent; outline: 0; padding: 3px 2px; color: #193e35; background: transparent; font: 750 12px/1.35 inherit; }
.aw-consultation-copy article>div>input:focus { border-bottom-color: #70b6a3; }
.aw-consultation-copy article>div>em { border-radius: 999px; padding: 4px 7px; color: #9a7335; background: #f8efd9; font-size: 8px; font-style: normal; white-space: nowrap; }
.aw-consultation-copy label { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 6px; }
.aw-consultation-copy label + label { margin-top: 5px; }
.aw-consultation-copy label>span { padding-top: 5px; color: #81918b; font-size: 8px; }
.aw-consultation-copy label textarea { width: 100%; min-height: 47px; resize: vertical; border: 1px solid transparent; border-radius: 8px; outline: 0; padding: 5px 6px; color: #526a62; background: transparent; font: 400 9px/1.55 inherit; }
.aw-consultation-copy label textarea:hover, .aw-consultation-copy label textarea:focus { border-color: #cfe0da; background: #fff; }
.aw-consultation-copy-empty { min-height: 230px; display: grid; place-content: center; padding: 25px; color: #8b9a95; font-size: 10px; line-height: 1.7; text-align: center; }
.aw-consultation-copy-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.aw-consultation-copy-actions button { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #d5e2dd; border-radius: 10px; color: #386c5e; background: #f7faf8; font-size: 9px; }
.aw-consultation-copy-actions button:disabled { opacity: .38; }
.aw-consultation-copy>p { margin: 0; border-top: 1px solid #eceeea; padding-top: 9px; color: #8b9893; font-size: 8px; line-height: 1.6; }

.aw-secondary-upload { margin-top: 12px; }
.aw-consultation-before { min-height: 430px; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 18px; text-align: center; }
.aw-consultation-before figure { width: min(100%,420px); aspect-ratio: 4/3; position: relative; overflow: hidden; margin: 0; border: 1px solid #d8e2dc; border-radius: 18px; background: #edf2ef; }
.aw-consultation-before figure>img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 28%; }
.aw-consultation-before>div { display: grid; gap: 4px; color: #7f9089; }
.aw-consultation-before>div strong { color: #244f44; font-size: 13px; }
.aw-consultation-before>div span { max-width: 440px; font-size: 9px; line-height: 1.6; }
.aw-consultation-output { min-width: 0; display: grid; gap: 11px; }
.aw-report-progress { display: flex; align-items: center; gap: 7px; border: 1px solid #d6e7df; border-radius: 10px; padding: 8px 10px; color: #286a59; background: #f2faf6; font-size: 9px; }
.aw-report-progress.error { border-color: #ecd1cc; color: #a9554c; background: #fff6f4; }
.aw-report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aw-report-toolbar>div:first-child { display: grid; gap: 2px; }
.aw-report-toolbar strong { color: #173f36; font-size: 12px; }
.aw-report-toolbar span { color: #8b9893; font-size: 8px; }
.aw-report-toolbar>div:last-child { display: flex; gap: 7px; }
.aw-report-toolbar button { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #cdded7; border-radius: 9px; padding: 6px 10px; color: #2c6858; background: #fff; font-size: 8.5px; }
.aw-report-toolbar button:disabled { opacity: .45; }
.aw-report-scroll { min-width: 0; overflow: auto; container-type: inline-size; border: 1px solid #dbe3de; border-radius: 15px; padding: 12px; background: #e9eeeb; }

.zr-report-sheet { --zr-green:#123f38; --zr-mint:#66c7ba; --zr-gold:#d6a64c; --zr-coral:#e47f5f; width: 100%; max-width: 920px; min-width: 680px; box-sizing: border-box; margin: 0 auto; overflow: hidden; padding: 30px; color: #183d36; background: #faf9f4; font-family: 'Noto Sans SC','Microsoft YaHei',sans-serif; box-shadow: 0 12px 28px rgba(25,61,52,.08); }
.zr-report-sheet * { box-sizing: border-box; }
.zr-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; border-bottom: 1px solid #cfdad5; padding-bottom: 17px; }
.zr-report-head>div:first-child { min-width: 0; }
.zr-report-head span { color: #71847d; font: 700 9px/1.2 'DM Mono',monospace; letter-spacing: .16em; }
.zr-report-head h2 { margin: 7px 0 5px; color: #123d36; font-family: 'Noto Serif SC','Songti SC',serif; font-size: 25px; line-height: 1.25; font-weight: 750; }
.zr-report-head h2 i { color: #98aaa3; font-style: normal; font-weight: 400; }
.zr-report-head p { margin: 0; color: #87958f; font-size: 9px; line-height: 1.5; }
.zr-report-seal { flex: 0 0 auto; display: grid; justify-items: center; gap: 4px; border: 1px solid #c9d8d2; border-radius: 11px; padding: 9px 11px; color: #226a59; background: #f2f7f4; }
.zr-report-seal span { color: #447268; font-size: 7px; letter-spacing: .08em; }
.zr-layout { margin-top: 20px; }
.zr-layout-full { min-height: 430px; display: grid; grid-template-columns: 185px minmax(270px,1fr) 185px; align-items: stretch; gap: 13px; }
.zr-callout-rail { display: flex; flex-direction: column; justify-content: space-around; gap: 14px; }
.zr-callout { min-width: 0; border: 1px solid #d5dfda; border-left: 3px solid var(--zr-mint); border-radius: 9px; padding: 11px; background: rgba(255,255,255,.86); }
.zr-callout-1 { border-left-color: var(--zr-gold); }
.zr-callout-2 { border-left-color: var(--zr-coral); }
.zr-callout header { display: grid; grid-template-columns: 26px minmax(0,1fr); align-items: center; gap: 7px; }
.zr-callout header>span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--zr-green); font: 700 8px/1 'DM Mono',monospace; }
.zr-callout strong { min-width: 0; color: #173e36; font-size: 11px; }
.zr-callout em { grid-column: 2; justify-self: start; border-radius: 999px; padding: 3px 6px; color: #95703c; background: #f6edd8; font-size: 7px; font-style: normal; }
.zr-callout p { margin: 8px 0 0; color: #597069; font-size: 8px; line-height: 1.65; }
.zr-photo { min-width: 0; position: relative; overflow: hidden; margin: 0; border: 1px solid #bfcfc8; border-radius: 3px; background: #dfe7e2; }
.zr-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 28%; }
.zr-marker-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zr-guide-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.zr-structure-guide line,.zr-structure-guide polyline { fill: none; stroke: rgba(227,185,85,.8); stroke-width: .52; stroke-dasharray: 1.4 1; vector-effect: non-scaling-stroke; }
.zr-structure-guide .zr-profile-line { stroke: #6fd0c3; stroke-width: .9; stroke-dasharray: none; }
.zr-structure-guide circle { fill: #fff; stroke: #d7a63f; stroke-width: .7; vector-effect: non-scaling-stroke; }
.zr-aging-guide path { fill: rgba(215,166,76,.045); stroke: rgba(231,191,101,.68); stroke-width: .65; stroke-dasharray: 1.5 1.1; vector-effect: non-scaling-stroke; }
.zr-region { fill: none; stroke: var(--zr-mint); stroke-width: .45; stroke-dasharray: 1.4 1.1; vector-effect: non-scaling-stroke; }
.zr-region-1,.zr-leader-1 { stroke: var(--zr-gold); }
.zr-region-2,.zr-leader-2 { stroke: var(--zr-coral); }
.zr-leader { fill: none; stroke: var(--zr-mint); stroke-width: .45; vector-effect: non-scaling-stroke; }
.zr-anchor { fill: #fff; stroke: var(--zr-mint); stroke-width: .55; vector-effect: non-scaling-stroke; }
.zr-anchor-1 { stroke: var(--zr-gold); }
.zr-anchor-2 { stroke: var(--zr-coral); }
.zr-photo-marker { width: 24px; height: 24px; position: absolute; z-index: 2; display: grid; place-items: center; transform: translate(-50%,-50%); border: 2px solid #fff; border-radius: 50%; padding: 0; color: #fff; background: var(--zr-green); box-shadow: 0 2px 7px rgba(18,63,56,.26); font: 700 8px/1 'DM Mono',monospace; cursor: grab; touch-action: none; }
.zr-photo-marker:active { cursor: grabbing; }
.zr-photo-marker:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(18,63,56,.58); }
.zr-photo-marker-1 { background: #b78937; }
.zr-photo-marker-2 { background: #c96449; }
.zr-layout-focus { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(200px,.55fr); gap: 14px; }
.zr-layout-focus .zr-photo { aspect-ratio: 16/10; }
.zr-layout-focus .zr-photo img { object-position: center 26%; }
.zr-focus-cards { display: flex; flex-direction: column; justify-content: center; gap: 11px; }
.zr-layout-dual { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.zr-layout-dual>div { min-width: 0; display: grid; gap: 7px; }
.zr-layout-dual .zr-photo { aspect-ratio: 4/3; }
.zr-layout-dual>div>span { color: #71847d; font: 700 8px/1.2 'DM Mono',monospace; letter-spacing: .08em; }
.zr-priority { display: grid; grid-template-columns: auto minmax(190px,.85fr) minmax(260px,1.15fr); align-items: center; gap: 12px; margin-top: 18px; border-left: 4px solid var(--zr-gold); padding: 13px 15px; color: #16483e; background: #e9f5f2; }
.zr-priority>svg { color: #d2a047; }
.zr-priority>div { display: grid; gap: 3px; }
.zr-priority>div span { color: #6e827a; font-size: 8px; }
.zr-priority>div strong { font-size: 11px; line-height: 1.5; }
.zr-priority p { margin: 0; color: #597069; font-size: 8px; line-height: 1.6; }
.zr-observation-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 15px; }
.zr-observation-summary article { border-top: 2px solid var(--zr-green); padding: 11px 12px; background: #fff; }
.zr-observation-summary article:last-child { border-top-color: #c08d43; }
.zr-observation-summary span { color: #173f36; font-size: 10px; font-weight: 750; }
.zr-observation-summary p { margin: 6px 0 0; color: #62756e; font-size: 8px; line-height: 1.65; }
.zr-advice { margin-top: 17px; }
.zr-advice>header { display: grid; grid-template-columns: 1fr auto; align-items: end; border-bottom: 1px solid #cbd7d1; padding-bottom: 8px; }
.zr-advice>header span { color: #81928b; font: 700 7px/1 'DM Mono',monospace; letter-spacing: .15em; }
.zr-advice>header h3 { grid-column: 1; margin: 4px 0 0; color: #173e36; font-size: 15px; }
.zr-advice>header em { grid-column: 2; grid-row: 1/3; align-self: center; border-radius: 999px; padding: 5px 8px; color: #457267; background: #edf5f2; font-size: 7px; font-style: normal; }
.zr-advice-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 11px; }
.zr-advice-grid article { min-width: 0; display: grid; grid-template-columns: 27px minmax(0,1fr); align-content: start; gap: 7px; border: 1px solid #d7e1dc; border-radius: 8px; padding: 10px; background: #fff; }
.zr-advice-grid article>span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #5b9f91; font: 700 8px/1 'DM Mono',monospace; }
.zr-advice-grid strong { color: #244c42; font-size: 9px; }
.zr-advice-grid p { margin: 5px 0 0; color: #677a73; font-size: 7px; line-height: 1.65; }
.zr-report-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 17px; border-top: 1px solid #d1dad5; padding-top: 11px; color: #71827b; }
.zr-report-foot>div { display: flex; align-items: center; gap: 6px; font-size: 7px; line-height: 1.5; }
.zr-report-foot strong { flex: 0 0 auto; color: #a47534; font-size: 7px; }

.zr-deep-section { margin-top: 17px; border: 1px solid #d4ddd8; padding: 15px; background: #f3f1e9; }
.zr-deep-section>header { display: grid; grid-template-columns: 1fr minmax(220px,.8fr); align-items: end; gap: 3px 18px; border-bottom: 1px solid #d1d7d2; padding-bottom: 10px; }
.zr-deep-section>header span { color: #8d7b56; font: 700 7px/1 'DM Mono',monospace; letter-spacing: .16em; }
.zr-deep-section>header h3 { grid-column: 1; margin: 3px 0 0; color: #193f37; font-family: 'Noto Serif SC','Songti SC',serif; font-size: 16px; }
.zr-deep-section>header p { grid-column: 2; grid-row: 1/3; margin: 0; color: #6d7974; font-size: 8px; line-height: 1.65; }
.zr-layer-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.zr-layer-grid article { min-width: 0; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto 1fr; gap: 3px 7px; border-top: 3px solid #66b9aa; padding: 10px; background: #fff; }
.zr-layer-grid article:nth-child(2) { border-top-color: #dfb252; }
.zr-layer-grid article:nth-child(3) { border-top-color: #df8565; }
.zr-layer-grid article:nth-child(4) { border-top-color: #777e96; }
.zr-layer-grid i { grid-row: 1/4; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #356e61; }
.zr-layer-grid i svg { width: 14px; height: 14px; }
.zr-layer-grid span { color: #9b8052; font: 700 7px/1 'DM Mono',monospace; }
.zr-layer-grid strong { color: #24483f; font-size: 9px; }
.zr-layer-grid p { margin: 2px 0 0; color: #697a74; font-size: 7px; line-height: 1.6; }
.zr-deep-summary { display: grid; grid-template-columns: 90px 1fr; gap: 10px; margin-top: 10px; border-left: 4px solid #d2a348; padding: 10px 12px; background: #173f38; }
.zr-deep-summary strong { color: #f4dca4; font-size: 10px; }
.zr-deep-summary p { margin: 0; color: rgba(255,255,255,.78); font-size: 8px; line-height: 1.65; }
.zr-structure-section { background: #efede7; }
.zr-structure-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.zr-structure-cards article { min-width: 0; display: grid; grid-template-columns: 38px 1fr; gap: 10px; border: 1px solid #d2d8d4; padding: 11px; background: #fff; }
.zr-structure-cards article>i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #e0bd69; background: #193f38; }
.zr-structure-cards article>i svg { width: 19px; height: 19px; }
.zr-structure-cards article>div { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 3px 7px; }
.zr-structure-cards span { color: #b58c3e; font: 700 8px/1 'DM Mono',monospace; }
.zr-structure-cards strong { color: #1c463d; font-size: 10px; }
.zr-structure-cards em { grid-column: 1/3; color: #598277; font-size: 7px; font-style: normal; }
.zr-structure-cards p { grid-column: 1/3; margin: 3px 0 0; color: #6b7974; font-size: 8px; line-height: 1.6; }
.zr-measure-note { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; margin-top: 10px; border: 1px solid #bcd4cc; padding: 11px 13px; color: #2f7566; background: #e9f5f1; }
.zr-measure-note>div { display: grid; gap: 3px; }
.zr-measure-note strong { color: #1c4d42; font-size: 9px; }
.zr-measure-note p { margin: 0; color: #647972; font-size: 7.5px; line-height: 1.6; }
.zr-measure-note>span { border-left: 1px solid #bdd2ca; padding-left: 11px; color: #8a6f3f; font-size: 7px; line-height: 1.6; text-align: center; }

.zr-report-sheet[data-exporting="true"] { width: var(--zr-export-width,1200px) !important; max-width: none !important; min-width: var(--zr-export-width,1200px) !important; padding: 42px !important; }
.zr-report-sheet[data-exporting="true"] .zr-layout-full { grid-template-columns: minmax(230px,.72fr) minmax(400px,1.2fr) minmax(230px,.72fr) !important; }
.zr-report-sheet[data-exporting="true"] .zr-layout-focus { grid-template-columns: minmax(0,1.45fr) minmax(200px,.55fr) !important; }
.zr-report-sheet[data-exporting="true"] .zr-layout-dual { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.zr-report-sheet[data-exporting="true"] .zr-advice-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.zr-report-sheet[data-exporting="true"] .zr-observation-summary { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.zr-report-sheet[data-exporting="true"] .zr-report-head h2 { font-size: 31px; }
.zr-report-sheet[data-exporting="true"] .zr-callout p,.zr-report-sheet[data-exporting="true"] .zr-observation-summary p,.zr-report-sheet[data-exporting="true"] .zr-advice-grid p,.zr-report-sheet[data-exporting="true"] .zr-deep-section p { font-size: 10px; }
.zr-report-sheet[data-exporting="true"] .zr-callout strong,.zr-report-sheet[data-exporting="true"] .zr-observation-summary span,.zr-report-sheet[data-exporting="true"] .zr-advice-grid strong { font-size: 12px; }
.zr-report-sheet[data-exporting="true"] .zr-photo-marker { width: 31px; height: 31px; font-size: 10px; }

@container (max-width: 720px) {
  .zr-report-sheet:not([data-exporting="true"]) { min-width: 0; padding: 17px; }
  .zr-report-sheet:not([data-exporting="true"]) .zr-report-head h2 { font-size: 20px; }
  .zr-report-sheet:not([data-exporting="true"]) .zr-report-seal { display: none; }
  .zr-report-sheet:not([data-exporting="true"]) .zr-layout-full { min-height: 0; grid-template-columns: 1fr; }
  .zr-report-sheet:not([data-exporting="true"]) .zr-layout-full .zr-photo { grid-row: 1; aspect-ratio: 4/5; }
  .zr-report-sheet:not([data-exporting="true"]) .zr-layout-full .zr-callout-rail { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zr-report-sheet:not([data-exporting="true"]) .zr-layout-focus { grid-template-columns: 1fr; }
  .zr-report-sheet:not([data-exporting="true"]) .zr-focus-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zr-report-sheet:not([data-exporting="true"]) .zr-layout-dual { grid-template-columns: 1fr; }
  .zr-report-sheet:not([data-exporting="true"]) .zr-priority { grid-template-columns: auto minmax(0,1fr); }
  .zr-report-sheet:not([data-exporting="true"]) .zr-priority>p { grid-column: 1/3; }
  .zr-report-sheet:not([data-exporting="true"]) .zr-observation-summary { grid-template-columns: 1fr; }
  .zr-report-sheet:not([data-exporting="true"]) .zr-advice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zr-report-sheet:not([data-exporting="true"]) .zr-deep-section>header { grid-template-columns: 1fr; }
  .zr-report-sheet:not([data-exporting="true"]) .zr-deep-section>header p { grid-column: 1; grid-row: auto; }
  .zr-report-sheet:not([data-exporting="true"]) .zr-layer-grid,.zr-report-sheet:not([data-exporting="true"]) .zr-structure-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.aw-result-grid { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-content: start; gap: 10px; }
.aw-result-grid.count-1 { grid-template-columns: minmax(0, 1fr); }
.aw-result-grid figure { overflow: hidden; margin: 0; border: 1px solid #e1e5e0; border-radius: 16px; background: #fbfcfa; }
.aw-result-grid img { width: 100%; aspect-ratio: 3/4; display: block; object-fit: contain; background: #f3f5f2; }
.aw-result-open { width: 100%; height: 100%; position: relative; display: block; overflow: hidden; padding: 0; background: #f3f5f2; }
.aw-result-open>img { width: 100%; height: 100%; display: block; object-fit: contain; }
.aw-result-open>span { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%,8px); border: 1px solid rgba(255,255,255,.34); border-radius: 999px; padding: 6px 10px; color: #fff; background: rgba(7,43,35,.72); font-size: 9px; opacity: 0; transition: opacity .18s ease, transform .18s ease; backdrop-filter: blur(8px); }
.aw-result-open:hover>span, .aw-result-open:focus-visible>span { opacity: 1; transform: translate(-50%,0); }
.aw-stage-main>.aw-result-open { height: 100%; }
.aw-comparison-grid figure>.aw-result-open { height: 100%; }
.aw-result-grid figcaption { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 10px; color: #62756e; font-size: 9px; }
.aw-result-grid figcaption button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #dde4df; border-radius: 9px; color: #38695d; }
.aw-result-lightbox { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(4,25,21,.78); backdrop-filter: blur(16px); }
.aw-result-lightbox>section { width: min(1080px,96vw); max-height: 94vh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0,1fr) auto; border: 1px solid rgba(232,211,159,.42); border-radius: 24px; color: #eff5f1; background: #0b2f28; box-shadow: 0 30px 100px rgba(0,0,0,.48); }
.aw-result-lightbox header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.1); padding: 13px 18px 13px 22px; }
.aw-result-lightbox header>div { display: grid; gap: 3px; }
.aw-result-lightbox header span { color: #d7ba73; font: 700 8px 'DM Mono', monospace; letter-spacing: .17em; }
.aw-result-lightbox header strong { color: #fffdf7; font-size: 14px; }
.aw-result-lightbox header>button { width: 36px; height: 36px; border-radius: 50%; color: #d9e5e0; background: rgba(255,255,255,.08); font-size: 24px; line-height: 1; }
.aw-result-lightbox figure { min-height: 0; display: grid; place-items: center; overflow: auto; margin: 0; padding: 18px; background: radial-gradient(circle at 50% 44%,#e8e7e0 0,#cfd3cf 42%,#abb7b1 100%); }
.aw-result-lightbox figure img { max-width: 100%; max-height: 68vh; display: block; border-radius: 14px; object-fit: contain; box-shadow: 0 16px 48px rgba(0,0,0,.22); }
.aw-result-lightbox footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(255,255,255,.1); padding: 14px 18px; }
.aw-result-lightbox footer p { margin: 0; color: #91aaa1; font-size: 9px; }
.aw-result-lightbox footer>div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.aw-result-lightbox footer button { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(221,233,228,.22); border-radius: 11px; padding: 8px 12px; color: #e3ece8; background: rgba(255,255,255,.055); font-size: 10px; }
.aw-result-lightbox footer button:hover:not(:disabled) { border-color: #d9c080; color: #fff; background: rgba(255,255,255,.1); }
.aw-result-lightbox footer button.primary { border-color: #e4cb8b; color: #173d34; background: #ead49e; }
.aw-result-lightbox footer button:disabled { opacity: .55; cursor: wait; }
.aw-result-lightbox footer small { color: #b8cbc4; font-size: 8px; }
.aw-result-lightbox footer button.primary small { color: inherit; }
.aw-video-result { display: grid; align-content: start; gap: 11px; }
.aw-video-result video { width: 100%; max-height: calc(100vh - 340px); border-radius: 16px; background: #0c1916; }
.aw-video-result button, .aw-rewrite-result button { justify-self: end; display: flex; align-items: center; gap: 6px; border: 1px solid #b9d7ce; border-radius: 10px; padding: 8px 12px; color: #236955; background: #eff8f4; font-size: 10px; }
.aw-scan-result { display: grid; align-content: start; gap: 9px; }
.aw-score { min-height: 120px; display: grid; place-content: center; justify-items: center; border: 1px solid #bde0d6; border-radius: 17px; background: #edf8f4; }
.aw-score strong { color: #0f795e; font: 700 38px/1 'DM Mono', monospace; }
.aw-score span { margin-top: 5px; color: #648078; font-size: 9px; }
.aw-scan-result>div:not(.aw-score) { border: 1px solid #e2e6e1; border-radius: 13px; padding: 12px 13px; background: #fbfcfa; }
.aw-scan-result b { color: #2d5147; font-size: 11px; }
.aw-scan-result p { margin: 4px 0 0; color: #6d7e78; font-size: 10px; line-height: 1.7; }
.aw-rewrite-result { display: grid; align-content: start; gap: 11px; }
.aw-rewrite-result pre { min-height: 320px; margin: 0; overflow: auto; white-space: pre-wrap; border: 1px solid #e1e5e0; border-radius: 16px; padding: 18px; color: #3f5e55; background: #fbfcfa; font: 400 12px/1.9 inherit; }

.aw-runbar { min-height: 62px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; border-top: 1px solid #e9ece7; padding: 10px 20px; background: #fffefa; }
.aw-runbar>span { color: #80918a; font-size: 9px; }
.aw-runbar>button { min-width: 190px; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; padding: 8px 15px; color: #fff; background: #0e5b4b; box-shadow: 0 9px 22px rgba(19,86,70,.15); }
.aw-runbar>button:hover:not(:disabled) { background: #0a493d; transform: translateY(-1px); }
.aw-runbar>button:disabled { color: #8a9691; background: #e3e8e4; box-shadow: none; cursor: not-allowed; }
.aw-runbar strong { font-size: 11px; }
.aw-runbar em { border-left: 1px solid rgba(255,255,255,.28); padding-left: 8px; font-size: 9px; font-style: normal; }
.aw-runbar>button:disabled em { border-color: rgba(80,100,92,.18); }
.aw-stage-timeline { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); border-top: 1px solid #e7ebe7; padding: 12px 20px 8px; background: #fffefa; }
.aw-stage-timeline button { position: relative; min-width: 0; display: grid; justify-items: center; gap: 5px; color: #778982; font-size: 9px; }
.aw-stage-timeline button::before { content: ''; position: absolute; z-index: 0; top: 7px; left: -50%; right: 50%; height: 1px; background: #bdded5; }
.aw-stage-timeline button:first-child::before { display: none; }
.aw-stage-timeline i { position: relative; z-index: 1; width: 15px; height: 15px; border: 2px solid #9cafaa; border-radius: 50%; background: #fffefa; }
.aw-stage-timeline button.active { color: #173e35; font-weight: 700; }
.aw-stage-timeline button.active i { border-color: #66c3aa; background: #66c3aa; }
.aw-stage-timeline small { display: none; }
.aw-recovery-runbar { min-height: 56px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid #eaede9; padding: 8px 20px; background: #fffefa; }
.aw-recovery-runbar>span { margin-right: 4px; border: 1px solid #dce3de; border-radius: 10px; padding: 9px 12px; color: #60746d; font-size: 9px; }
.aw-recovery-runbar>button { min-height: 38px; border: 1px solid #dce3de; border-radius: 11px; padding: 8px 14px; color: #526a62; background: #fff; font-size: 10px; }
.aw-recovery-runbar>button.primary { min-width: 180px; display: flex; align-items: center; justify-content: center; gap: 7px; border-color: #0e5b4b; color: #fff; background: #0e5b4b; }
.aw-recovery-runbar button:disabled { opacity: .38; cursor: not-allowed; }
.aw-recovery-runbar em { border-left: 1px solid rgba(255,255,255,.3); padding-left: 7px; font-size: 8px; font-style: normal; }
.aw-spinner { animation: aw-spin .8s linear infinite; }
@keyframes aw-spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .aw-tool-body { grid-template-columns: minmax(360px, .95fr) minmax(330px, 1.05fr); }
}

@media (max-width: 900px) {
  .sidebar-workbench-subnav { display: none; }
  .aw-mobile-tools { position: sticky; top: 0; z-index: 12; display: flex; gap: 8px; overflow-x: auto; border-bottom: 1px solid #d9e1dc; padding: 10px; background: rgba(239,244,240,.96); scrollbar-width: none; backdrop-filter: blur(14px); }
  .aw-mobile-tools::-webkit-scrollbar { display: none; }
  .aw-mobile-tools button { min-height: 40px; flex: 0 0 auto; display: flex; align-items: center; gap: 7px; border: 1px solid #d8e2dc; border-radius: 999px; padding: 8px 13px; color: #5f756d; background: rgba(255,255,255,.74); font-size: 11.5px; font-weight: 600; }
  .aw-mobile-tools button.active { border-color: #337f6b; color: #fff; background: #155848; box-shadow: 0 6px 16px rgba(21,88,72,.15); }
  .aw-workspace { padding: 10px; }
  .aw-tool-page { min-height: auto; }
  .aw-tool-body { grid-template-columns: 1fr; }
  .aw-controls { max-height: none; border-right: 0; border-bottom: 1px solid #eceeea; }
  .aw-preview-state { min-height: 300px; }
  .aw-recovery-carousel { grid-template-columns: 30px minmax(0,1fr) 30px; }
  .aw-stage-side { display: none; }
  .aw-stage-main { height: 390px; }
  .aw-consultation-report { grid-template-columns: 1fr; }
  .aw-consultation-copy { max-height: none; border-top: 1px solid #e3e8e4; border-left: 0; }
  .aw-consultation-visual figure>img { max-height: 430px; }
}

@media (max-width: 760px) {
  .app-shell:not(.mobile-hub-open):has(.aw-shell) { height: auto !important; min-height: 100dvh; overflow: visible !important; }
  .main-area:has(.aw-shell), .mobile-content-shell:has(.aw-shell) { width: 100%; max-width: 100%; overflow: visible; }
  .top-workbench-summary { display: none; }
  .aw-shell { min-height: calc(100vh - 70px); overflow-x: hidden; padding-bottom: 150px; }
  .aw-workspace { padding: 8px; }
  .aw-result-lightbox { padding: 8px; }
  .aw-result-lightbox>section { width: 100%; max-height: 92dvh; border-radius: 18px; }
  .aw-result-lightbox figure { padding: 10px; }
  .aw-result-lightbox footer { align-items: stretch; flex-direction: column; }
  .aw-result-lightbox footer>div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .aw-result-lightbox footer button { justify-content: center; }
  .aw-result-lightbox footer button.primary { grid-column: 1/-1; }
  .aw-compliance { align-items: flex-start; border-radius: 14px; margin-bottom: 8px; }
  .aw-compliance span { white-space: normal; line-height: 1.5; }
  .aw-tool-page { border-top: 1px solid var(--aw-line); border-radius: 18px; }
  .aw-tool-heading { padding: 17px 16px 14px; }
  .aw-tool-heading h1 { font-size: 21px; }
  .aw-tool-heading p { line-height: 1.55; }
  .aw-help { display: none; }
  .aw-controls, .aw-preview { padding: 16px 14px; }
  .aw-controls { overflow-x: hidden; }
  .aw-form-section, .aw-choice-group, .aw-choice-group>div { width: 100%; min-width: 0; max-width: 100%; }
  .aw-choice-group button { flex: 0 0 auto; }
  .aw-project-grid { min-height: 560px; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: repeat(4, minmax(128px,1fr)); gap: 9px; }
  .aw-project-grid button { min-height: 128px; border-radius: 16px; padding: 14px; }
  .aw-project-card-copy { max-width: 76%; gap: 3px; }
  .aw-project-card-copy strong { font-size: 15px; }
  .aw-project-card-copy small { font-size: 9.5px; }
  .aw-project-card-arrow { top: 12px; right: 12px; width: 16px; height: 16px; }
  .aw-choice-group { grid-template-columns: 1fr; gap: 5px; }
  .aw-choice-group>span { padding-top: 0; }
  .aw-selection-count { margin-left: 0; }
  .aw-segmented button { min-width: 118px; min-height: 40px; }
  .aw-preview>header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .aw-preview-state { min-height: 270px; }
  .aw-result-grid { grid-template-columns: 1fr; }
  .aw-comparison-grid { min-height: 300px; gap: 8px; }
  .aw-comparison-grid figure { min-height: 300px; }
  .aw-comparison-actions { justify-content: stretch; }
  .aw-comparison-actions button { flex: 1; justify-content: center; }
  .aw-consultation-report { min-height: 0; }
  .aw-consultation-visual figure { min-height: 320px; }
  .aw-consultation-copy article>div { grid-template-columns: 28px minmax(0,1fr); }
  .aw-consultation-copy article>div>em { grid-column: 2; justify-self: start; }
  .aw-consultation-copy label { grid-template-columns: 1fr; gap: 2px; }
  .aw-consultation-copy label>span { padding-top: 0; }
  .aw-recovery-preview { min-height: 440px; padding: 11px; }
  .aw-recovery-carousel { min-height: 330px; gap: 7px; padding: 10px 0; }
  .aw-stage-main { height: 320px; }
  .aw-stage-timeline { overflow-x: auto; display: flex; gap: 0; padding: 10px 12px 7px; }
  .aw-stage-timeline button { min-width: 92px; flex: 0 0 92px; }
  .aw-recovery-runbar { position: fixed; z-index: 28; left: 8px; right: 8px; bottom: 72px; min-height: 58px; border: 1px solid #dce5df; border-radius: 16px; padding: 8px; box-shadow: 0 12px 32px rgba(24,65,54,.14); }
  .aw-recovery-runbar>span, .aw-recovery-runbar>button:not(.primary) { display: none; }
  .aw-recovery-runbar>button.primary { width: 100%; }
  .aw-runbar { position: fixed; z-index: 28; left: 8px; right: 8px; bottom: 72px; min-height: 58px; border: 1px solid #dce5df; border-radius: 16px; padding: 8px 10px; box-shadow: 0 12px 32px rgba(24,65,54,.14); }
  .aw-runbar>span { display: none; }
  .aw-runbar>button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .aw-spinner { animation: none; }
}