:root { font-family: "Noto Serif TC", Georgia, serif; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: #181817; } button, select { font: inherit; } button { cursor: pointer; }
#app[data-theme="dark"] { --canvas:#181817;--surface:#22211f;--raised:#2d2b27;--ink:#f5f1e9;--muted:#b7b0a4;--line:#575147;--accent:#b7cad0;--focus:#fff; color-scheme:dark; }
#app[data-theme="light"] { --canvas:#f5f1eb;--surface:#fffdf7;--raised:#ece5d8;--ink:#28251f;--muted:#6a645b;--line:#c7bfb1;--accent:#4e6e78;--focus:#111; color-scheme:light; }
#app { min-height:100vh; padding:0 1.1rem 6rem; background:var(--canvas); color:var(--ink); transition:background-color .2s ease,color .2s ease; } .app-header,.screen { width:min(100%,76rem); margin:auto; } .app-header { min-height:5rem; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); } .wordmark { display:flex; align-items:center; gap:.55rem; color:inherit; text-decoration:none; font-weight:700; } .wordmark-mark { display:grid; place-items:center; width:1.75rem;height:1.75rem;border:1px solid currentColor;border-radius:50%;font-size:.78rem; } .header-actions { display:flex; gap:.45rem; } .locale-control select,.icon-button,.filters-panel select { border:1px solid var(--line);border-radius:.3rem;background:transparent;color:var(--ink);min-height:2.25rem;padding:.3rem .5rem; } .icon-button { display:flex;align-items:center;gap:.35rem; } .screen { padding:clamp(2.6rem,7vw,5.5rem) 0 2rem; } .screen[hidden] { display:none; } .eyebrow,.card-kicker,.item-role { margin:0;color:var(--muted);font: .68rem ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase; } h1,h2 { margin:0;line-height:1.08; } h1 { max-width:15ch;margin-top:.85rem;font-size:clamp(2.5rem,9vw,5.4rem);letter-spacing:-.055em; } h2 { font-size:clamp(1.35rem,3vw,2.1rem);letter-spacing:-.035em; } .intro { max-width:46rem;margin:1.2rem 0 0;color:var(--muted);font:1rem/1.75 system-ui,sans-serif; }
.styling-workbench { display:grid;gap:1rem;margin-top:2.5rem; } .filters-panel,.outfit-stage,.rationale-panel,.empty-state,.saved-look { border:1px solid var(--line);border-radius:.5rem;background:var(--surface); } .filters-panel,.rationale-panel { padding:1.2rem; } .filters-panel label { display:grid;gap:.45rem;margin-top:1rem;color:var(--muted);font: .85rem system-ui,sans-serif; } .filters-panel select { width:100%; } .outfit-stage { padding:1.2rem; } .outfit-heading { display:flex;justify-content:space-between;gap:1rem;align-items:center; } .outfit-status,mark { background:var(--accent);color:var(--canvas);padding:.25rem .45rem;font: .72rem system-ui,sans-serif; } .look-composition { display:grid;gap:.8rem;margin-top:1rem; } .garment-piece { display:grid;grid-template-columns:5.8rem 1fr;gap:.9rem;align-items:center;padding:.85rem 0;border-top:1px solid var(--line); } .garment-piece h2 { margin-top:.35rem;font-size:1.15rem; } .garment-piece button { grid-column:2;justify-self:start; } .garment-shape { width:5.5rem;height:6.4rem;background:var(--raised);border:1px solid var(--line); } .blouse-shape { background:#7f9dab;clip-path:polygon(20% 5%,40% 20%,60% 20%,80% 5%,100% 28%,78% 42%,75% 100%,25% 100%,22% 42%,0 28%); } .skirt-shape { background:#c9af88;clip-path:polygon(25% 0,75% 0,94% 100%,6% 100%); } .skirt-shape[data-bottom-swatch="ink"] { background:#565b66; } .bag-shape { width:4.8rem;height:4.2rem;margin:auto;background:#654a39;border-radius:.4rem .4rem .8rem .8rem;box-shadow:0 -1rem 0 -.75rem #654a39; } .item-meta,.price-snapshot,.rationale-panel p,.saved-look p { margin:.35rem 0 0;color:var(--muted);font:.8rem/1.55 system-ui,sans-serif; } .garment-piece button,.outfit-actions button,.rationale-panel > button,.saved-look button { border:1px solid var(--ink);border-radius:.25rem;background:var(--ink);color:var(--canvas);padding:.55rem .75rem; } .outfit-actions { display:flex;align-items:center;gap:.7rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);font:.8rem system-ui,sans-serif; } .rationale-panel h2 { margin-top:.7rem; } fieldset { margin:1.2rem 0;border:0;padding:0; } legend { color:var(--muted);font:.8rem system-ui,sans-serif; } .rating-row { display:flex;gap:.35rem;margin-top:.55rem; } .rating-row button { width:2rem;height:2rem;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink); } .rating-row button[aria-pressed="true"] { background:var(--accent);color:var(--canvas); } .feedback-status { min-height:2.5rem; } .empty-state,.saved-look { margin-top:2rem;padding:1.5rem; }.source-tabs { display:flex;gap:.5rem;margin-top:1.5rem; }.source-tabs button { border:1px solid var(--line);border-radius:2rem;background:transparent;color:var(--ink);padding:.5rem .75rem; }.source-tabs button[aria-selected="true"] { background:var(--ink);color:var(--canvas); }.wardrobe-list { margin-top:1rem; }.wardrobe-item { display:flex;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line); }.wardrobe-item h2 { font-size:1.1rem; }.wardrobe-item p { margin:.3rem 0 .55rem;color:var(--muted);font:.85rem system-ui,sans-serif;}.mini-garment { width:3.4rem;height:4rem;display:block; }.mini-blue { background:#7f9dab;clip-path:polygon(20% 0,45% 15%,55% 15%,80% 0,100% 30%,80% 42%,75% 100%,25% 100%,20% 42%,0 30%);}.mini-sand { background:#c9af88;clip-path:polygon(25% 0,75% 0,95% 100%,5% 100%);}.bottom-nav { position:fixed;z-index:5;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);background:var(--canvas);}.bottom-nav button { min-height:4.2rem;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);font:.68rem system-ui,sans-serif;}.bottom-nav button[aria-current="page"] { color:var(--ink);box-shadow:inset 0 2px var(--ink);}.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}button:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid var(--focus);outline-offset:3px; }
.filter-group { display:grid;gap:.45rem;margin-top:1rem;color:var(--muted);font:.85rem system-ui,sans-serif; }.filter-group > span { font-weight:600; }.filter-group button { min-height:2.25rem;border:1px solid var(--line);border-radius:.3rem;background:transparent;color:var(--ink);padding:.35rem .5rem;text-align:left; }.filter-group button[aria-pressed="true"] { border-color:var(--ink);background:var(--raised);color:var(--ink); }
.tryon-workbench { display:grid;gap:1rem;margin-top:2rem; }.tryon-canvas,.tryon-controls,.tryon-tasks { border:1px solid var(--line);border-radius:.5rem;background:var(--surface); }.tryon-canvas { position:relative;min-height:25rem;display:grid;place-items:center;overflow:hidden;padding:1rem;background:#f3f1eb;color:#292823; }.tryon-canvas[data-tryon-background="scene"] { background:#dce2dc; }.tryon-canvas[data-tryon-background="scene"]::before { content:"";position:absolute;inset:1.25rem;border:1px solid rgba(54,72,63,.2);background:rgba(54,72,63,.05); }.canvas-notice,.tryon-canvas > p { position:absolute;z-index:1;margin:0;border:1px solid #77736b;background:#fffdf7;color:#292823;padding:.45rem .6rem;font:.75rem/1.4 system-ui,sans-serif; }.canvas-notice { top:1rem;left:1rem; }.tryon-canvas > p { bottom:1rem;right:1rem; }.mirror-figure { position:relative;z-index:1;display:grid;justify-items:center;align-content:end;width:12rem;height:19rem;border:1px solid #77736b;background:#e8e5dd;padding-top:1.6rem; }.mirror-head { width:3.2rem;height:3.2rem;border:1px solid #77736b;border-radius:50%;background:#d6bda7; }.mirror-top { width:7.4rem;height:7.6rem;margin-top:.5rem;background:#7f9dab;clip-path:polygon(20% 0,40% 13%,60% 13%,80% 0,100% 26%,79% 39%,76% 100%,24% 100%,21% 39%,0 26%); }.mirror-bottom { width:7rem;height:6.5rem;background:#c9af88;clip-path:polygon(25% 0,75% 0,94% 100%,6% 100%); }.tryon-controls,.tryon-tasks { padding:1.2rem; }.tryon-controls h2,.tryon-tasks h2 { margin-top:.5rem; }.segmented-control { display:flex;gap:.5rem;margin-top:1rem; }.segmented-control button,.tryon-task button { border:1px solid var(--line);border-radius:.25rem;background:transparent;color:var(--ink);padding:.55rem .7rem;font:.85rem system-ui,sans-serif; }.segmented-control button[aria-pressed="true"] { background:var(--ink);color:var(--canvas);border-color:var(--ink); }.consent-control { margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line); }.consent-control label { display:flex;gap:.55rem;align-items:center;margin-top:.6rem;font:.9rem system-ui,sans-serif; }.consent-control p,.task-disclaimer,.tryon-task p,.retry-status { margin:.55rem 0 0;color:var(--muted);font:.82rem/1.55 system-ui,sans-serif; }.tryon-tasks { margin-top:1rem; }.task-disclaimer { margin-top:.3rem; }.tryon-task { display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;border-top:1px solid var(--line); }.tryon-task h3 { margin:.35rem 0 0;font-size:1rem; }.task-status { display:inline-block;padding:.18rem .4rem;border:1px solid var(--line);font:.7rem ui-monospace,monospace; }.tryon-task[data-tryon-status="complete"] .task-status { background:#dce7dc;color:#244329;border-color:#759276; }.tryon-task[data-tryon-status="failed"] .task-status { background:#f0dfd8;color:#6b3027;border-color:#b7786d; }.tryon-task[data-tryon-status="queued"] .task-status { background:#e6e3d8;color:#4f4b3e;border-color:#a49d89; }.retry-status { min-height:1.5rem; }
@media (min-width:768px) { #app { padding-right:2rem;padding-left:2rem; }.look-composition { grid-template-columns:1fr 1fr; }.accessory-piece { grid-column:1 / -1;max-width:50%; }.styling-workbench { grid-template-columns:minmax(13rem,.6fr) minmax(0,1.4fr); }.rationale-panel { grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:1rem; }.rationale-panel > button { align-self:start;justify-self:start; }.tryon-workbench { grid-template-columns:minmax(0,1.25fr) minmax(16rem,.75fr); }.tryon-tasks { display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem; }.tryon-tasks > :not(.tryon-task) { grid-column:1 / -1; } }
@media (min-width:1024px) { .styling-workbench { grid-template-columns:14rem minmax(0,1.6fr) minmax(16rem,.8fr);align-items:start; }.rationale-panel { grid-column:auto;display:block; }.bottom-nav { top:50%;right:1.25rem;bottom:auto;left:auto;width:4.5rem;transform:translateY(-50%);border:1px solid var(--line);border-radius:.4rem;overflow:hidden; }.bottom-nav button { border-right:0;border-bottom:1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important; } }
.admin-mode-bar,.admin-module,.admin-sidebar { border:1px solid var(--line);border-radius:.5rem;background:var(--surface); }.admin-mode-bar { display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;padding:1rem 1.2rem; }.admin-mode-bar p:last-child { margin:.35rem 0 0;color:var(--muted);font:.85rem/1.45 system-ui,sans-serif; }.admin-mode-bar button,.media-case button { border:1px solid var(--ink);border-radius:.25rem;background:var(--ink);color:var(--canvas);padding:.55rem .75rem;font:.85rem system-ui,sans-serif; }.admin-layout { display:grid;gap:1rem;margin-top:1rem; }.admin-sidebar { display:flex;gap:.45rem;overflow:auto;padding:1rem; }.admin-sidebar .card-kicker { min-width:max-content;align-self:center; }.admin-sidebar a { min-width:max-content;border:1px solid var(--line);border-radius:.25rem;padding:.45rem .6rem;color:var(--ink);font:.82rem system-ui,sans-serif;text-decoration:none; }.admin-content { display:grid;gap:1rem;min-width:0; }.admin-module { padding:1.15rem;scroll-margin-top:1rem;overflow:auto; }.module-heading { display:flex;justify-content:space-between;gap:1rem;align-items:start;margin-bottom:1rem; }.module-heading h2 { margin-top:.35rem;font-size:1.4rem; }.module-heading > span { border:1px solid var(--line);padding:.22rem .4rem;color:var(--muted);font:.7rem ui-monospace,monospace;white-space:nowrap; }.admin-snapshot { display:grid;grid-template-columns:repeat(3,minmax(7rem,1fr));gap:.65rem;margin-bottom:1rem; }.admin-snapshot article { display:grid;gap:.2rem;border-left:2px solid var(--accent);padding:.45rem .6rem;background:var(--raised); }.admin-snapshot strong { font-size:1.1rem; }.admin-snapshot span { color:var(--muted);font:.72rem system-ui,sans-serif; }.admin-module table { width:100%;border-collapse:collapse;min-width:34rem;font:.82rem system-ui,sans-serif; }.admin-module th,.admin-module td { padding:.7rem .45rem;border-top:1px solid var(--line);text-align:left;vertical-align:top; }.admin-module th { color:var(--muted);font-weight:500; }.media-case { display:grid;grid-template-columns:7rem minmax(15rem,1fr);gap:1rem;align-items:center;padding:1rem 0; }.media-thumbnail,.media-original { display:grid;place-items:center;width:7rem;height:8.5rem;border:1px solid var(--line);font:.62rem ui-monospace,monospace;letter-spacing:.08em; }.media-thumbnail { background:#5b5a55;color:#fff; }.media-original { grid-column:1 / -1;width:100%;height:9rem;background:#b7cad0;color:#28251f; }.media-case h3 { margin:.3rem 0 0;font-size:1.1rem; }.media-case p:not(.card-kicker) { margin:.45rem 0 .8rem;color:var(--muted);font:.82rem/1.5 system-ui,sans-serif; }.media-case[data-media-state="revealed"] .media-thumbnail { opacity:.45; }.audit-table-wrap { margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line); }
@media (min-width:1024px) { .admin-layout { grid-template-columns:13.5rem minmax(0,1fr);align-items:start; }.admin-sidebar { position:sticky;top:1rem;display:grid;overflow:visible; }.admin-sidebar .card-kicker { margin-bottom:.35rem; }.admin-sidebar a { border-width:0 0 1px;border-radius:0;padding:.6rem 0; }.admin-module { padding:1.35rem; }.media-case { grid-template-columns:8rem minmax(20rem,1fr) minmax(12rem,.6fr); }.media-original { grid-column:auto;width:100%;height:8.5rem; } }
@media (max-width:560px) { .admin-mode-bar { align-items:flex-start;flex-direction:column; }.admin-snapshot { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-snapshot article:last-child { grid-column:span 2; }.media-case { grid-template-columns:1fr; }.media-thumbnail { width:100%;height:5.5rem; }.admin-module { padding:1rem; } }
.bottom-nav { grid-template-columns:repeat(5,1fr); }
.admin-sidebar { display:none; }
.workspace-selector,.admin-module-selector { display:grid;gap:.45rem;color:var(--muted);font:.85rem system-ui,sans-serif; }.workspace-selector select,.admin-module-selector select { width:100%;max-width:22rem;border:1px solid var(--line);border-radius:.3rem;background:var(--canvas);color:var(--ink);min-height:2.5rem;padding:.4rem .55rem; }.selector-description { margin:0;color:var(--muted);font:.8rem/1.5 system-ui,sans-serif; }
@media (min-width:1024px) { .admin-layout { grid-template-columns:minmax(0,1fr); } }