@import "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;800&display=swap";:root{--bg:#f3f5fb;--surface:#ffffffdb;--text:#142033;--text-soft:#657084;--accent:#123d68;--warm:#ef7f56;--grid-line:#ffffff73;--heading:"Sora", "Noto Sans SC", "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--sans:"Noto Sans SC", "Sora", "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;font-family:var(--sans);color:var(--text);background:radial-gradient(circle at top left, #123d681f, transparent 28%), radial-gradient(circle at top right, #5667a024, transparent 34%), linear-gradient(180deg, #f8f9fc 0%, var(--bg) 100%);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;min-height:100vh;margin:0}body:before{content:"";pointer-events:none;background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);background-size:34px 34px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000000d9,#0000 72%);mask-image:linear-gradient(#000000d9,#0000 72%)}#root{min-height:100vh}button,input,select,textarea{font:inherit}img{max-width:100%}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-family:var(--heading)}.app-shell{z-index:1;grid-template-columns:248px minmax(0,1fr);gap:24px;min-height:100vh;padding:24px;display:grid;position:relative}.app-sidebar,.surface,.page-header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffffd1;border:1px solid #d6dde9eb;box-shadow:0 20px 48px #0f172a0f}.app-sidebar{border-radius:32px;flex-direction:column;align-self:start;gap:18px;min-height:calc(100vh - 48px);padding:20px;display:flex;position:sticky;top:24px}.brand-card,.sidebar-card,.metric-tile,.history-card,.settings-card,.preview-card,.pairing-card,.suggestion-card,.code-card,.empty-state,.inline-note{background:linear-gradient(#f8fafff5,#f2f5fbd6);border:1px solid #dce4efe6;border-radius:28px}.brand-card{gap:12px;padding:18px;display:grid}.brand-kicker,.sidebar-label,.eyebrow,.panel-kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft);align-items:center;gap:8px;font-size:12px;display:inline-flex}.brand-kicker:before,.eyebrow:before,.panel-kicker:before,.sidebar-label:before{content:"";background:linear-gradient(135deg, var(--accent), #ef7f56);border-radius:999px;width:10px;height:10px}.brand-mark{color:#fff;background:linear-gradient(135deg,#123d68,#5667a0);border-radius:22px;place-items:center;width:62px;height:62px;font-size:1.15rem;font-weight:700;display:grid;box-shadow:0 18px 38px #123d6838}.brand-copy strong,.sidebar-link-copy strong,.metric-tile strong,.page-title-block h1,.surface-header h2,.history-card-title strong,.text-block strong,.pairing-card strong,.value-row strong,.preview-copy strong,.code-card-head strong,.settings-card strong{display:block}.brand-copy p,.sidebar-card p,.sidebar-link-copy small,.page-title-block p,.dropzone-overlay p,.upload-current p,.inline-note p,.palette-row-desc,.text-block p,.suggestion-card p,.suggestion-item small,.history-card-body p,.settings-card p,.status-text,.empty-state p,.preview-copy p,.pairing-card p,.metric-tile span,.value-row span{color:var(--text-soft)}.sidebar-nav{gap:10px;display:grid}.sidebar-link,.primary-button,.ghost-button,.segment-control button,.history-toolbar button,.tag-filter button,.preview-primary,.preview-secondary,.toggle{appearance:none;font:inherit;cursor:pointer;background:0 0;border:none}.sidebar-link{text-align:left;color:var(--text);border:1px solid #0000;border-radius:24px;align-items:center;gap:12px;padding:14px;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex}.sidebar-link:hover,.palette-row:hover,.suggestion-item:hover,.history-card:hover,.ghost-button:hover,.primary-button:hover{transform:translateY(-1px)}.sidebar-link.is-active{background:linear-gradient(135deg,#0e345c14,#5667a01f);border-color:#5667a02e;box-shadow:inset 0 1px #fff6}.sidebar-link-badge{color:#123d68;background:#123d6814;border-radius:14px;place-items:center;width:38px;height:38px;font-size:12px;font-weight:700;display:grid}.sidebar-link-copy{gap:2px;display:grid}.sidebar-card{gap:12px;margin-top:auto;padding:18px;display:grid}.sidebar-metrics,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.sidebar-footer{color:var(--text-soft);align-items:center;gap:10px;padding:10px 4px 0;font-size:14px;display:flex}.status-dot{background:#58c27d;border-radius:999px;width:10px;height:10px;box-shadow:0 0 0 4px #58c27d24}.app-main{gap:24px;display:grid}.page-header{border-radius:32px;justify-content:space-between;align-items:flex-start;gap:20px;padding:28px 32px;display:flex}.page-title-block h1{letter-spacing:-.05em;margin:10px 0 14px;font-size:clamp(2.5rem,4vw,3.8rem);line-height:.96}.page-title-block p{max-width:58ch;font-size:1rem;line-height:1.7}.page-header-side{justify-items:end;gap:12px;display:grid}.header-pills,.pill-row,.header-actions,.surface-header-side,.segment-control,.history-toolbar,.tag-filter,.inspector-actions,.history-detail-actions,.settings-actions{align-items:center;gap:10px;display:flex}.header-pills,.pill-row,.tag-filter,.settings-actions{flex-wrap:wrap}.header-pill,.meta-label,.toast-pill,.dropzone-chip,.preview-badge,.preview-label,.history-chip,.pill-row span{border-radius:999px;justify-content:center;align-items:center;min-height:32px;padding:8px 12px;font-size:13px;display:inline-flex}.header-pill,.meta-label,.pill-row span,.history-chip{color:var(--text-soft);background:#14345c0f}.header-pill.accent,.dropzone-chip,.preview-badge{color:#14345c;background:#5667a01f}.toast-pill{color:#0f5132;background:#58c27d29}.workspace-layout{grid-template-columns:minmax(0,1.28fr) minmax(340px,.92fr);grid-template-areas:"upload palette""preview inspector""harmony harmony";gap:24px;display:grid}.upload-surface{grid-area:upload}.palette-surface{grid-area:palette}.preview-surface{grid-area:preview}.inspector-surface{grid-area:inspector}.harmony-surface{grid-area:harmony}.surface{border-radius:32px;padding:28px}.surface-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;display:flex}.surface-header h2{margin:8px 0 0;font-size:1.42rem;line-height:1.2}.surface-header-side{justify-content:flex-end}.dropzone{gap:16px;display:grid}.dropzone-art{background:linear-gradient(135deg,#eff3fb,#dfe6f5);border:1px solid #d9e2f0e6;border-radius:28px;min-height:360px;position:relative;overflow:hidden}.dropzone-image,.upload-thumb img,.history-card-media img,.history-detail-hero img{object-fit:cover;width:100%;height:100%;display:block}.dropzone-overlay{background:linear-gradient(#ffffff14,#fffc),linear-gradient(135deg,#123d682e,#5667a014);flex-direction:column;justify-content:flex-end;gap:12px;padding:28px;display:flex;position:absolute;inset:0}.dropzone-overlay strong{max-width:20ch;font-size:clamp(1.6rem,2vw,2.1rem);line-height:1.06}.upload-current{background:#f8faffe0;border:1px solid #dce4efe6;border-radius:24px;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;display:flex}.upload-current-main{align-items:center;gap:14px;display:flex}.upload-thumb{background:#dfe6f5;border-radius:18px;flex-shrink:0;width:56px;height:56px;overflow:hidden}.control-row,.form-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;display:grid}.field{color:var(--text-soft);gap:8px;font-size:14px;display:grid}.field select,.field input,.field textarea,.history-toolbar input{width:100%;color:var(--text);font:inherit;background:#fffffff5;border:1px solid #d1dbe7eb;border-radius:18px;outline:none;padding:13px 14px}.field textarea{resize:vertical;min-height:140px}.inline-note{gap:8px;padding:16px;display:grid}.error-banner{color:#b42318;background:#fee4e2f2;border:1px solid #f4bab6e0;border-radius:18px;margin-top:18px;padding:14px 16px}.primary-button,.ghost-button,.segment-control button,.history-toolbar button,.tag-filter button,.preview-primary,.preview-secondary{border-radius:16px;min-height:42px;padding:10px 16px;transition:transform .16s,box-shadow .16s,background .16s}.primary-button{color:#fff;background:linear-gradient(135deg,#123d68,#5667a0);box-shadow:0 18px 34px #123d682e}.ghost-button,.history-toolbar button,.tag-filter button{color:var(--text);background:#14345c0f}.ghost-button.danger{color:#b42318}.distribution-bar{border:1px solid #dce4efe6;border-radius:18px;height:52px;margin-bottom:18px;display:flex;overflow:hidden}.distribution-bar span{height:100%}.palette-list,.history-detail-stack,.inspector-stack,.text-block,.suggestion-grid,.settings-layout,.history-card-grid{gap:14px;display:grid}.palette-row{text-align:left;cursor:pointer;background:#f7f9fdf2;border:1px solid #0000;border-radius:24px;grid-template-columns:72px minmax(0,1fr);gap:14px;width:100%;padding:12px;display:grid}.palette-row.is-active{border-color:#5667a047;box-shadow:0 16px 32px #5667a01f}.palette-thumb{border-radius:18px;justify-content:center;align-items:flex-end;min-height:72px;padding:10px;font-weight:700;display:flex}.palette-row-copy{gap:8px;display:grid}.palette-row-top{justify-content:space-between;align-items:center;gap:12px;display:flex}.palette-row-top small{color:var(--text);font-size:14px}.segment-control{background:#14345c0f;border-radius:999px;padding:4px}.segment-control button.is-active,.history-toolbar button.filter-active,.tag-filter button.is-active{color:var(--text);background:#fff;box-shadow:0 10px 18px #0f172a14}.preview-board{border:1px solid;border-radius:28px;gap:16px;padding:24px;display:grid}.preview-board-top,.preview-actions,.code-card-head,.history-card-title,.history-card-actions,.toggle-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.preview-dots{gap:8px;display:flex}.preview-dots span{border-radius:999px;width:12px;height:12px}.preview-banner{border-radius:24px;gap:8px;padding:18px;display:grid}.preview-banner small{opacity:.8}.preview-banner strong{font-size:1.08rem}.preview-copy{gap:6px;display:grid}.preview-card-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.preview-card{border:1px solid;gap:10px;padding:18px;display:grid}.preview-label{width:fit-content}.preview-secondary{background:0 0;border:1px solid}.inspector-hero{border-radius:24px;flex-direction:column;justify-content:flex-end;gap:8px;min-height:172px;padding:20px;display:flex}.inspector-hero strong{font-size:2rem;line-height:1}.inspector-metrics,.value-list,.pairing-list,.history-swatches{gap:12px;display:grid}.inspector-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-tile{gap:6px;padding:16px;display:grid}.metric-tile strong{font-size:1.05rem}.metric-tile.compact{min-height:0;padding:14px}.value-list{background:#f7f9fdf5;border:1px solid #dce4efe6;border-radius:24px;padding:16px}.value-row{justify-content:space-between;align-items:center;gap:16px;display:flex}.pairing-list{grid-template-columns:repeat(2,minmax(0,1fr))}.pairing-card{gap:6px;padding:16px;display:grid}.harmony-grid{grid-template-columns:minmax(280px,.84fr) minmax(0,1.16fr);align-items:start;gap:16px;display:grid}.insight-panel{background:linear-gradient(#14345c0a,#ffffffdb);border:1px solid #dce4efeb;border-radius:28px;gap:10px;padding:20px;display:grid}.suggestion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.suggestion-card{padding:16px}.suggestion-head{margin-bottom:14px}.suggestion-items{gap:12px;display:grid}.suggestion-item{text-align:left;background:#fffffff0;border:1px solid #dce4efe6;border-radius:18px;gap:8px;width:100%;padding:12px;display:grid}.suggestion-color{border-radius:16px;align-items:flex-end;min-height:72px;padding:12px;font-weight:700;display:flex}.code-card{grid-column:span 1;padding:16px}.code-card pre{color:#e2e8f0;background:#0f172a;border-radius:20px;max-height:340px;margin:14px 0 0;padding:16px;font-size:13px;line-height:1.6;overflow:auto}.history-layout{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:24px;display:grid}.history-toolbar{margin-bottom:12px}.history-toolbar input{flex:1}.tag-filter{margin-bottom:16px}.history-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.history-card{border:1px solid #0000;gap:12px;padding:12px;transition:border-color .16s,box-shadow .16s,transform .16s;display:grid}.history-card.is-active{border-color:#5667a047;box-shadow:0 18px 34px #5667a01f}.history-card-main{text-align:left;cursor:pointer;background:0 0;border:none;gap:12px;padding:0;display:grid}.history-card-media{background:#dde4f2;border-radius:22px;min-height:210px;position:relative;overflow:hidden}.history-chip{position:absolute;top:12px;right:12px}.history-card-body{gap:10px;display:grid}.history-card-title span{color:var(--text-soft);font-size:13px}.history-swatches{grid-template-columns:repeat(5,minmax(0,1fr))}.history-swatches span{border-radius:999px;height:34px}.history-detail-hero{grid-template-columns:210px minmax(0,1fr);align-items:start;gap:16px;display:grid}.history-detail-hero img{border-radius:24px;min-height:240px}.history-detail-copy{gap:12px;display:grid}.history-detail-actions{flex-wrap:wrap;gap:10px;display:flex}.settings-layout{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-surface,.stats-surface{min-height:0}.settings-card{gap:12px;padding:20px;display:grid}.toggle-row{margin-top:4px}.toggle{background:#14345c14;border-radius:999px;width:64px;padding:4px}.toggle span{background:#fff;border-radius:999px;width:24px;height:24px;transition:transform .18s;display:block;box-shadow:0 4px 14px #0f172a29}.toggle.is-on{background:linear-gradient(135deg,#123d68,#5667a0)}.toggle.is-on span{transform:translate(32px)}.settings-actions{align-items:flex-start}.empty-state{text-align:center;place-content:center;gap:10px;min-height:240px;padding:26px;display:grid}.is-dragging{border-color:#5667a047;box-shadow:0 24px 48px #5667a024}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=1200px){.app-shell{grid-template-columns:1fr}.app-sidebar{min-height:0;position:static}.workspace-layout,.history-layout,.settings-layout,.harmony-grid,.suggestion-grid{grid-template-columns:1fr}.workspace-layout{grid-template-areas:"upload""palette""preview""inspector""harmony"}.history-card-grid{grid-template-columns:1fr}}@media (width<=820px){.app-shell{gap:16px;padding:16px}.page-header,.surface,.app-sidebar{border-radius:26px}.page-header{flex-direction:column;padding:22px}.page-header-side{justify-items:start}.control-row,.form-grid,.preview-card-row,.pairing-list,.inspector-metrics,.stats-grid,.history-detail-hero{grid-template-columns:1fr}.history-card-media{min-height:180px}.upload-current,.surface-header,.history-toolbar,.history-card-actions,.history-detail-actions,.settings-actions,.preview-actions{flex-direction:column;align-items:stretch}.history-card-actions .ghost-button,.history-detail-actions .ghost-button,.history-detail-actions .primary-button,.settings-actions .ghost-button,.settings-actions .primary-button,.preview-actions button{width:100%}}