:root { --ink:#250a1f; --muted:#776a72; --paper:#f7f3ef; --line:#e9dde3; --accent:#e84dab; --soft:#fde7f4; --card:#fffdfb; --dark:#3b082d; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:radial-gradient(circle at 82% 0, #fde5f2 0, transparent 31rem),var(--paper); font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
.shell { width:min(1380px,calc(100% - 48px)); margin:auto; padding-bottom:70px; }.topbar { height:76px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; }.brand small { color:#a79aa1; font-size:11px; font-weight:600; }.brand-mark { width:29px;height:29px;border-radius:8px;display:grid;place-items:center;color:white;background:var(--dark);font-family:Georgia,serif; }.runtime { color:var(--muted); font:11px ui-monospace,SFMono-Regular,monospace; }
.eyebrow { margin:0 0 7px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.15em; }.control-card { margin:34px 0 18px; padding:31px 34px; display:grid; grid-template-columns:1fr minmax(580px,1.2fr); gap:45px; border-radius:22px; background:var(--card); border:1px solid var(--line); box-shadow:0 16px 45px rgba(74,19,54,.06); }.control-copy h1 { margin:0; font-size:34px;letter-spacing:-.055em; }.control-copy>p:last-child { color:var(--muted); margin:12px 0 0; font-size:14px; }.control-fields { display:grid;grid-template-columns:1fr 110px 150px auto;gap:10px;align-items:end; }.field-group label { display:block;color:var(--muted);font-size:11px;font-weight:700;margin-bottom:7px; }.inline-field { display:grid;grid-template-columns:1fr auto;gap:7px; }.field-hint { margin:5px 0 0;color:#a2959d;font-size:10px;white-space:nowrap; } select { width:100%;height:42px;border:1px solid var(--line);border-radius:10px;padding:0 11px;background:#fff;color:var(--ink);font:inherit; }.secondary-button,.primary-button,.text-button { border:0;cursor:pointer;font:inherit; }.secondary-button { padding:0 13px;border-radius:10px;background:#f4e9ef;color:var(--dark);font-size:12px;font-weight:750; }.primary-button { height:42px;padding:0 16px;border-radius:11px;display:flex;justify-content:space-between;align-items:center;background:var(--dark);color:#fff;font-size:13px;font-weight:750; }.text-button { align-self:end;height:42px;background:transparent;color:var(--muted);font-size:11px;text-decoration:underline;text-underline-offset:4px; }.primary-button:disabled,.secondary-button:disabled,.ghost-button:disabled { opacity:.45;cursor:not-allowed; }.wardrobe-toolbar { display:flex;align-items:center;gap:12px; }.wardrobe-pager { display:flex;align-items:center;gap:8px; }.wardrobe-pager span { color:var(--muted);font-size:11px;font-weight:750;white-space:nowrap; }
.wardrobe-shelf { background:rgba(255,253,251,.7);border:1px solid var(--line);border-radius:20px;padding:21px 23px;margin-bottom:22px; }.section-heading,.result-heading { display:flex;align-items:end;justify-content:space-between;margin-bottom:16px; }.section-heading h2,.result-heading h2 { margin:0;font-size:21px;letter-spacing:-.045em; }.section-heading h2 span { color:var(--accent); }.section-heading>span,.section-actions { color:var(--muted);font-size:11px; }.section-actions { display:flex;align-items:center;gap:10px; }.ghost-button { height:32px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--dark);font:11px/1 Inter,-apple-system,sans-serif;font-weight:750;cursor:pointer; }.ghost-button:hover { background:#f8eef4; }.wardrobe-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px; }dialog.json-viewer { width:calc(100vw - 16px);height:calc(100vh - 16px);max-width:none;max-height:none;margin:auto;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 24px 60px rgba(59,8,45,.18);flex-direction:column; }dialog.json-viewer[open] { display:flex; }.json-viewer::backdrop { background:rgba(37,10,31,.5); }.json-viewer-head { display:flex;justify-content:space-between;align-items:end;gap:16px;padding:18px 22px 14px;border-bottom:1px solid var(--line);flex:0 0 auto; }.json-viewer-head h3 { margin:0;font-size:18px;letter-spacing:-.04em; }.json-viewer-actions { display:flex;gap:8px; }.json-viewer pre { margin:0;padding:22px 26px 32px;flex:1;min-height:0;overflow:auto;color:#4d3d47;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text; }.garment-tile { min-width:0;margin:0; }.garment-image { aspect-ratio:3/4;border-radius:9px;background:linear-gradient(145deg,#f1e8ec,#dcd0d8);overflow:hidden;display:grid;place-items:end start;position:relative; }.garment-image img { width:100%;height:100%;object-fit:cover;position:absolute;inset:0; }.garment-image span { position:relative;margin:5px;padding:3px 5px;max-width:85%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:4px;background:rgba(255,255,255,.85);font-size:9px;color:#5c4653; }.garment-tile p { margin:5px 1px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#66545f;font-size:10px; }
.analysis-area { min-height:230px; }.start-state { padding:48px 0 38px;border-top:1px solid var(--line); }.start-state h2 { margin:0;font-size:27px;letter-spacing:-.05em; }.start-state p:last-child { color:var(--muted);font-size:13px; }.hidden { display:none!important; }.progress-card { padding:23px 0;border-top:1px solid var(--line); }.progress-top { display:flex;justify-content:space-between;align-items:start; }.progress-top strong { font-size:20px; }.progress-top>span { color:var(--accent);font-size:22px;font-weight:800; }.progress-track { height:5px;margin:17px 0;background:#efe4ea;border-radius:99px;overflow:hidden; } #progressBar { height:100%;width:0;background:linear-gradient(90deg,var(--accent),#f5c440);transition:width .35s; }.stage-list { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }.stage-row { display:flex;justify-content:space-between;padding:9px 10px;border-radius:8px;background:#fbf6f8;color:#95858e;font-size:11px; }.stage-row.done { background:#edfaf4;color:#29735e; }
.result-heading { padding-top:18px;border-top:1px solid var(--line); }.result-badge { padding:7px 10px;border-radius:99px;background:#e7f8f1;color:#27745c;font-size:11px;font-weight:750; }.block-grid { display:grid;grid-template-columns:1fr;gap:14px;align-items:start; }.structure-overview { padding:25px 28px;border-radius:18px;background:var(--dark);color:#fff; }.card-head { display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:16px; }.card-head h3 { margin:0; }.dimension-narrative .card-head { margin-bottom:8px;align-items:center; }.structure-overview .ghost-button { border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#f8dcec; }.structure-overview .ghost-button:hover { background:rgba(255,255,255,.16); }.structure-overview > .eyebrow,.structure-overview .card-head .eyebrow { color:#ffb9e5; }.structure-overview > h3,.structure-overview .card-head h3 { margin:0;font-size:23px;letter-spacing:-.045em;color:#fff; }.structure-overview p { margin:0;max-width:1120px;font-size:16px;line-height:1.8;letter-spacing:-.015em; }.metric { display:inline;padding:1px 4px;border-radius:4px;background:#ffdaf0;color:#b71374;font-weight:800; }.structure-overview .metric { background:#85245e;color:#ffd4ed; }.dimension-list { display:grid;grid-template-columns:1fr;gap:10px; }.dimension-narrative { min-height:0;padding:20px 22px;border:1px solid var(--line);border-radius:15px;background:var(--card); }.dimension-narrative span { display:block;margin-bottom:8px;color:#a72e79;font-size:12px;font-weight:800; }.dimension-narrative p { margin:0;max-width:1080px;color:#695964;font-size:13px;line-height:1.75; }.run-meta { display:flex;flex-wrap:wrap;gap:5px;margin:18px 0 0;padding-top:11px;border-top:1px solid rgba(105,89,100,.12);color:#9b8d95;font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }.run-meta span { padding:3px 6px;border-radius:4px;background:#faf2f6; }.structure-overview .run-meta { border-color:rgba(255,255,255,.15);color:#d8b9cd; }.structure-overview .run-meta span { background:rgba(255,255,255,.09); }.reasoning-trace { margin-top:13px;padding:11px 12px;border-radius:9px;background:#faf6f8; }.reasoning-trace>div { display:flex;justify-content:space-between;gap:12px;align-items:center; }.reasoning-trace>div span { color:#9c2872;font-size:10px;font-weight:800;letter-spacing:.08em; }.reasoning-trace>div small { color:#9b8c95;font:9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }.reasoning-trace ol { display:flex;gap:6px;list-style:none;padding:0;margin:9px 0 6px; }.reasoning-trace li { display:flex;align-items:center;gap:4px;color:#b64b88;font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }.reasoning-trace li:not(:last-child)::after { content:"→";margin-left:2px;color:#d7becd; }.reasoning-trace li b { padding:4px 6px;border-radius:5px;background:#fff;color:#76505f;font:10px/1 Inter,-apple-system,sans-serif;white-space:nowrap; }.reasoning-trace p { margin:0!important;color:#8b7a84!important;font-size:11px!important;line-height:1.55!important; }.structure-overview .reasoning-trace { background:rgba(255,255,255,.08); }.structure-overview .reasoning-trace>div span { color:#ffb9e5; }.structure-overview .reasoning-trace>div small,.structure-overview .reasoning-trace p { color:#d4b7c8!important; }.structure-overview .reasoning-trace li b { background:rgba(255,255,255,.1);color:#f8dcec; }.structure-overview .reasoning-trace li { color:#e99ac7; }.summary-strip { display:grid;grid-template-columns:repeat(8,1fr);margin-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }.summary-strip div { padding:15px 10px;border-right:1px solid var(--line); }.summary-strip div:last-child { border:0; }.summary-strip span { display:block;color:#9d9097;font-size:10px;margin-bottom:5px; }.summary-strip strong { font-size:18px;letter-spacing:-.04em; }
.style-report { padding:28px 30px;border:1px solid #efd7e4;border-radius:18px;background:linear-gradient(135deg,#fffdfb,#fff4fa); }.style-report h3,.style-report .card-head h3 { margin:0;font-size:23px;letter-spacing:-.045em; }.style-report > div { max-width:1080px;color:#5f4e59;font-size:14px;line-height:1.85; }.style-report > div h2 { margin:20px 0 7px;color:#8e2165;font-size:15px; }.style-report > div h2:first-child { margin-top:0; }
.structure-overview .markdown-content { max-width:1120px;font-size:16px;line-height:1.8;letter-spacing:-.015em; }.markdown-content p { margin:0 0 14px; }.markdown-content p:last-child { margin-bottom:0; }.dimension-narrative .markdown-content { max-width:1080px;color:#695964;font-size:13px;line-height:1.75; }.style-report .markdown-content { max-width:1080px;color:#5f4e59;font-size:14px;line-height:1.85; }.style-report .markdown-content h3 { margin:23px 0 7px;color:#8e2165;font-size:15px;letter-spacing:0; }.style-report .markdown-content h3:first-child { margin-top:0; }.style-report .markdown-content h4 { margin:15px 0 5px;color:#92366f;font-size:13px; }.style-report .markdown-content ul { margin:8px 0 14px;padding-left:18px; }.style-report .markdown-content li { margin:4px 0; }
@media(max-width:1050px){.control-card{grid-template-columns:1fr}.wardrobe-grid{grid-template-columns:repeat(5,1fr)}.block-grid{grid-template-columns:1fr}.summary-strip{grid-template-columns:repeat(4,1fr)}.control-fields{grid-template-columns:1fr 120px 150px auto}}@media(max-width:680px){.shell{width:calc(100% - 24px)}.runtime,.brand small{display:none}.control-card{padding:23px 18px}.control-fields,.stage-list{grid-template-columns:1fr}.wardrobe-grid{grid-template-columns:repeat(2,1fr)}.dimension-list{grid-template-columns:1fr}.summary-strip{grid-template-columns:repeat(2,1fr)}.summary-strip div:nth-child(2n){border-right:0}.text-button{align-self:auto}.field-hint{white-space:normal}}