/* Shared frame and styling table. Wardrobe retains its original archive UI. */
:root { --paper:#f2efe7; --ink:#30362c; --muted:#697160; --line:#d7dbce; --accent:#354e3b; }
.topbar { background:#f2efe7f5; height:90px; }
.topbar h1 { font-family:Georgia,"Songti SC","SimSun",serif;letter-spacing:5px; }
.primary,.secondary { border-radius:5px; }
main { width:min(1320px,94vw); }
.view { padding:34px 0; }
/* Wardrobe uses its original category thumbnails and archive photos. */
#wardrobeView { max-width:1180px;margin:0 auto;padding:44px 0;--ink:#282721;--muted:#77746b;--line:#dedbd2;--accent:#385b49; }
#wardrobeView .primary,#wardrobeView .secondary { border-radius:999px; }

/* Atelier: existing collage controls on a tactile table, generation at hand. */
.outfit-tabs[hidden] { display:none; }
#outfitView .section-heading { margin-bottom:16px;align-items:center; }
#outfitView .section-heading .eyebrow { display:none; }
#outfitView .section-heading h2 { font:500 25px/1.3 Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
#clearCanvasButton { font-size:12px;min-height:40px; }
.atelier-layout { display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:27px;align-items:start; }
.atelier-table-column { min-width:0; }
.atelier-table-column .canvas { height:560px;border:9px solid #b9ab87;border-radius:5px;background:linear-gradient(113deg,transparent 48%,#fffae330 48.2%,#fffae330 57%,transparent 57.2%),repeating-linear-gradient(0deg,transparent 0,transparent 3px,#a39b810c 3px,#a39b810c 4px),#e1d9c5;box-shadow:0 6px 0 #a49879,0 13px 18px #28311b12; }
.atelier-table-column .canvas-item { filter:drop-shadow(8px 12px 5px #37322233); }
.atelier-table-column .canvas-item.canvas-archive-photo { background:#f4f3ef;border-radius:10px;filter:drop-shadow(3px 6px 5px #37322225); }
.atelier-picker-launch,.atelier-generation-dock { display:none; }
.atelier-picker-sheet { width:min(560px,100vw);max-width:100vw;max-height:88dvh;height:min(82dvh,780px);inset:auto 0 0;margin:0 auto;padding:0;border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;background:var(--card);color:var(--ink); }
.atelier-picker-sheet[open] { display:flex;flex-direction:column; }
body:has(#atelierPickerDialog[open]) { overflow:hidden; }
.atelier-picker-sheet::backdrop { background:#0007;backdrop-filter:blur(4px); }
.atelier-sheet-heading { display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px 14px;border-bottom:1px solid var(--line); }
.atelier-sheet-heading h2 { font:500 20px/1.4 Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
.atelier-sheet-heading span { display:block;font-size:12px;color:var(--muted);margin-top:5px; }
.atelier-sheet-content { flex:1;min-height:0;display:flex;overflow:hidden; }
.atelier-picker-sheet footer { flex-shrink:0;padding:12px 20px max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--line); }
.atelier-picker-sheet footer button { width:100%;min-height:46px;border-radius:14px; }
.atelier-table-column .canvas-item.preparing-cutout { border-color:#aa9b7b;background:#e1d9c52e; }
.atelier-table-column .canvas-item.preparing-cutout::after { content:'';width:24px;height:24px;border:2px solid #aa9b7b66;border-top-color:#756546;border-radius:50%;animation:atelier-loading 1s linear infinite; }
.atelier-table-column .canvas-item[data-unavailable="true"]::after { animation:none;border-color:#968568;background:linear-gradient(#968568,#968568) center/12px 2px no-repeat; }
@keyframes atelier-loading { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .atelier-table-column .canvas-item.preparing-cutout::after { animation:none; } }
.generation-actions button[data-selection-empty="true"] { opacity:.5; }
.tryon-start-dialog { width:min(440px,calc(100vw - 32px));padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--card);color:var(--ink); }
.tryon-start-dialog .dialog-heading { align-items:center;margin-bottom:16px; }
.tryon-start-dialog h2 { font:500 21px/1.4 Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
.tryon-start-dialog p,.tryon-start-dialog li { font-size:14px;line-height:1.8; }
.tryon-start-dialog ul { padding-left:20px;margin:10px 0 20px; }
.tryon-start-dialog li { margin:5px 0; }
.tryon-start-actions { display:flex;gap:10px;margin-top:20px; }
.tryon-start-actions button { flex:1;min-height:46px;border-radius:12px;font-size:14px; }
.atelier-table-column .canvas-selection { border:1px solid #65725288; }
.atelier-table-column .canvas-handle { width:32px;height:32px;border-color:#7a8466;box-shadow:0 2px 6px #0001; }
.atelier-selection-panel { padding:9px 0 0 24px;border-left:1px solid var(--line);min-width:0; }
.atelier-selection-panel>h3 { font-family:"Songti SC",Georgia,serif;font-size:23px;font-weight:400;margin:7px 0 20px; }
.atelier-selected-list { display:grid;gap:9px; }
.atelier-selected-row { display:flex;align-items:center;gap:3px;border:1px solid var(--line);background:#fbfaf6;border-radius:4px;min-width:0; }
.atelier-selected-row>button:first-child { display:flex;align-items:center;gap:9px;flex:1;min-width:0;border:0;background:transparent;padding:8px;text-align:left;color:var(--ink); }
.atelier-selected-row img { width:43px;height:56px;object-fit:contain;flex-shrink:0; }
.atelier-selected-row span { min-width:0;font-size:12px;overflow-wrap:anywhere; }
.atelier-selected-row small { display:block;color:var(--muted);font-size:11px;margin-top:5px; }
.atelier-selected-row>button:last-child { border:0;background:transparent;min-width:36px;min-height:44px;font-size:20px;color:var(--muted); }
#atelierArrangeButton { margin-top:12px;font-size:12px;width:100%; }
.atelier-profile-link { display:block;border:0;background:transparent;color:var(--accent);padding:13px 0;font-size:12px;text-align:left;min-height:44px; }
.atelier-selection-panel .generation-actions { display:grid;gap:9px; }
.atelier-selection-panel .generation-actions>button { width:100%;border-radius:5px;min-height:44px; }
.atelier-selection-panel .wonder-level { display:flex;gap:7px;align-items:flex-start;flex-wrap:wrap;padding:10px 0; }
.atelier-selection-panel .wonder-level small { width:100%;padding-left:22px; }
.atelier-selection-panel .tryon-album-entry { border-radius:4px;padding:13px 11px;gap:10px; }
.atelier-selection-panel .album-entry-icon { width:28px;height:28px;flex-shrink:0;color:var(--ink);background:transparent;border-radius:0; }
.atelier-selection-panel .album-entry-text strong { font-family:"Songti SC",Georgia,serif;font-size:17px;font-weight:400; }
.atelier-selection-panel .album-entry-text small { font-size:11px; }
.atelier-selection-panel .album-count { font-size:11px; }
.atelier-selection-panel>.profile-description { font-size:11px;line-height:1.8; }
.atelier-tools,.atelier-drafts,.atelier-selection-tools { border-top:1px solid var(--line);padding:15px 0;margin-top:24px; }
.atelier-tools>summary,.atelier-drafts>summary,.atelier-selection-tools>summary { font-size:13px;color:var(--muted);cursor:pointer;min-height:30px; }
.atelier-tools .outfit-layer-panel { margin-top:15px; }
.atelier-tools .canvas-to-tryon { margin:15px 0; }
.atelier-drafts .saved-outfits>h3 { display:none; }
.atelier-drafts .saved-outfits { margin-top:18px; }
.atelier-browser { margin:0 0 22px;border:1px solid var(--line);background:#f9f8f2;padding:12px 16px 16px;border-radius:12px;min-width:0; }
.atelier-browser>summary { display:flex;justify-content:space-between;gap:15px;align-items:center;cursor:pointer;min-height:44px; }
.atelier-browser>summary strong,.atelier-browser>summary small { display:block; }
.atelier-browser>summary strong { font-size:15px;font-weight:500; }
.atelier-browser>summary small { font-size:11px;color:var(--muted);margin-top:6px; }
.atelier-browser>summary>span:last-child { color:var(--muted);font-size:11px;white-space:nowrap; }
.atelier-browser-toggle::after { content:'展开'; }
.atelier-browser[open] .atelier-browser-toggle::after { content:'收起'; }
.atelier-browser-content { padding-top:10px; }
.atelier-browser [data-catalog="canvas"] { display:flex;align-items:flex-end;gap:12px;margin:0 0 12px; }
.catalog-category-select { font-size:11px;color:var(--muted);min-width:150px; }
.catalog-category-select select { display:block;width:100%;margin-top:5px;padding:10px 11px;border:1px solid var(--line);border-radius:4px;background:#fffef9;color:var(--ink); }
.atelier-browser .catalog-tools { flex:1;margin:0; }
.atelier-browser .catalog-tools>input { min-width:0;flex:1;max-width:none; }
.atelier-browser .picker-list { display:grid;grid-auto-flow:column;grid-auto-columns:124px;grid-template-columns:none;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 8px;scroll-snap-type:x proximity; }
.atelier-browser .picker-entry { position:relative;min-width:0;border:1px solid var(--line);border-radius:4px;background:#fffef9; }
.atelier-browser .picker-entry.is-on-table { border-color:var(--accent); }
.picker-selected-badge { position:absolute;left:5px;top:5px;padding:3px 5px;border-radius:5px;background:var(--ui-accent);color:var(--ui-on-accent);font-size:10px;pointer-events:none; }
.atelier-browser .picker-item { display:flex;flex-direction:column;text-align:center;border:0;padding:9px 8px;gap:6px;height:100%;min-width:0;scroll-snap-align:start; }
.atelier-browser .picker-thumb { width:100%;height:85px;border-radius:6px;background:#eeece9; }
.atelier-browser .picker-item span:not(.picker-thumb) { min-width:0;font-size:12px;overflow-wrap:anywhere; }
.atelier-browser .picker-item small { font-size:11px;margin-top:5px; }
.atelier-browser .picker-preview { position:absolute;right:2px;top:2px;background:#f1efe4cc;min-width:30px;min-height:30px;border:0;font-size:16px; }
.atelier-profile-area { margin:0 0 22px; }
.atelier-profile-area .personal-info { margin:0;border-radius:12px;padding:16px 18px; }
.wear-reference-library { width:min(760px,calc(100vw - 28px));max-height:85dvh;overflow:auto;border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--card);color:var(--ink); }
.wear-reference-library::backdrop { background:#0007;backdrop-filter:blur(4px); }
.wear-reference-library #wearReferenceDetails { border:0;padding:0;margin:20px 0 0; }
.wear-reference-library #wearReferenceDetails>summary { display:none; }

/* Lookbook: quiet covers first, garment context and all actions inside. */
.bottom-nav button { min-width:104px; }
.tryon-album-dialog .tryon-result-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
.look-cover { border-radius:3px;margin:0;border:1px solid var(--line);background:#faf9f4; }
.look-cover>button { display:block;width:100%;padding:0;border:0;background:transparent;color:var(--ink);text-align:left; }
.look-cover img { width:100%;aspect-ratio:2/3;object-fit:contain;display:block;background:#e8e6db; }
.look-cover>button>span { display:block;padding:13px 12px; }
.look-cover strong { display:block;font-family:"Songti SC",Georgia,serif;font-size:17px;font-weight:400; }
.look-cover small { display:block;color:var(--muted);font-size:11px;margin-top:7px; }
.look-detail-dialog { width:min(1120px,95vw);background:var(--paper);padding:25px;max-height:90vh;overflow:auto; }
.look-detail-dialog .dialog-heading { margin-bottom:24px; }
.look-detail-dialog h2 { font-size:28px; }
.look-detail-layout { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:27px;align-items:start; }
.look-generated { margin:0;position:sticky;top:0; }
.look-generated>button { display:block;width:100%;border:0;background:#e7e5da;padding:0; }
.look-generated img { display:block;width:100%;max-height:72vh;object-fit:contain; }
.look-detail-copy { min-width:0; }
.look-detail-copy>p { color:var(--muted);font-size:12px;line-height:1.9; }
.look-detail-copy>h3 { font-size:17px;font-weight:500;margin:19px 0 13px; }
.look-pieces { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.look-piece { min-width:0; }
.look-piece>button { display:block;width:100%;border:0;background:#eeece4;padding:0; }
.look-piece img { display:block;width:100%;aspect-ratio:1;object-fit:contain; }
.look-piece>span { display:block;font-size:11px;line-height:1.6;margin-top:7px; }
.look-piece small { display:block;color:var(--muted);font-size:11px; }
.look-piece-missing { color:var(--muted); }
.look-technical { border-top:1px solid var(--line);padding-top:15px;margin-top:20px;font-size:12px;color:var(--muted); }
.look-technical p { font-size:11px;line-height:1.8;overflow-wrap:anywhere;margin-top:10px; }

@media(max-width:1050px) {
  .atelier-layout { grid-template-columns:minmax(0,1fr) 250px;gap:20px; }
  .atelier-selection-panel { padding-left:18px; }
  .atelier-table-column .canvas { height:520px; }
}
@media(max-width:720px) {
  .topbar { height:80px;padding:0 18px; }
  .topbar h1 { font-size:26px; }
  .top-actions { gap:5px; }.top-actions>button { font-size:12px;padding:10px 12px; }
  main { width:94vw; }
  .view { padding:24px 0; }
  .atelier-layout { grid-template-columns:1fr;gap:25px; }
  .atelier-table-column { display:contents; }
  .atelier-table-column>.canvas { order:0; }
  .atelier-tools { order:1;margin-top:0; }
  .atelier-selection-panel { order:2; }
  .atelier-selection-panel { padding:22px 0 0;border-left:0;border-top:1px solid var(--line); }
  #outfitView { padding-bottom:220px; }
  .atelier-table-column .canvas { height:clamp(220px,min(42svh,calc(100svh - 420px)),370px);border-width:6px; }
  .atelier-picker-launch { display:block;margin-bottom:18px; }
  #atelierChooseButton { display:flex;align-items:center;gap:12px;width:100%;min-height:50px;border-radius:14px;padding:12px 16px;text-align:left;font-size:14px;background:var(--card); }
  #atelierPickerCount { margin-left:auto;color:var(--muted);font-size:12px; }
  .atelier-generation-dock { display:block;position:fixed;z-index:29;bottom:calc(98px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:min(500px,calc(100% - 28px));padding:12px 14px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 7px 28px #0002; }
  .atelier-dock-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;color:var(--muted);font-size:12px; }
  #atelierDockSettings { min-height:24px;border:0;padding:0;background:transparent;color:var(--ink);font-size:12px; }
  .atelier-generation-dock .generation-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
  .atelier-generation-dock .generation-actions button { min-height:48px;padding:10px 8px;border-radius:12px;font-size:14px; }
  .atelier-generation-dock :is(#tryOnSelectionIssue,#tryOnGenerationStatus,#tryOnError) { margin:8px 0 0;font-size:11px;line-height:1.5;max-height:64px;overflow:auto; }
  .atelier-generation-dock :is(#tryOnGenerationStatus,#tryOnError):empty { display:none; }
  .atelier-selection-panel { scroll-margin-top:95px; }
  .atelier-selection-panel .generation-actions { grid-template-columns:1fr 1fr; }
  .atelier-browser { padding:9px 12px 12px;margin-bottom:18px; }
  .atelier-browser>summary { gap:10px; }.atelier-browser>summary small { line-height:1.6; }
  .atelier-browser>summary small { display:none; }
  .atelier-browser [data-catalog="canvas"] { flex-wrap:nowrap;gap:8px; }
  .atelier-browser .catalog-category-select { width:100px;min-width:100px;font-size:0; }
  .catalog-category-select select { font-size:16px;height:40px;margin-top:0;padding:8px; }
  .atelier-browser .catalog-tools { min-width:0;flex-wrap:nowrap;gap:3px;align-items:center; }
  .atelier-browser .catalog-tools>input { width:0;min-width:0;flex:1;font-size:16px;padding:9px 8px;height:40px; }
  .atelier-browser .catalog-tools>details { flex-shrink:0; }
  .atelier-browser .catalog-tools>details>summary { padding:10px 4px;font-size:12px; }
  .atelier-browser .catalog-tools>small { display:none; }
  .atelier-browser .catalog-tools:has(details[open]) { flex-wrap:wrap; }
  .atelier-browser .catalog-tools>details[open] { flex-basis:100%; }
  .atelier-browser [data-catalog="canvas"]:has(details[open]) { align-items:flex-start; }
  .atelier-browser .picker-list { grid-template-columns:none;grid-auto-columns:106px;gap:8px; }
  .atelier-browser .picker-item { padding:8px 6px; }
  .atelier-browser .picker-thumb { height:70px; }
  .atelier-browser .picker-item span:not(.picker-thumb) { font-size:11px; }
  .atelier-browser .picker-preview { min-width:32px;min-height:36px; }
  .look-detail-dialog { padding:18px; }.look-detail-layout { grid-template-columns:1fr;gap:20px; }
  .look-generated { position:static; }.look-generated img { max-height:65vh; }
  .tryon-album-dialog .tryon-result-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bottom-nav button { min-width:88px; }
}

@media(max-width:720px) {
  .atelier-picker-sheet .atelier-browser { display:flex;flex-direction:column;flex:1;width:100%;min-height:0;padding:16px 20px 0;margin:0;border:0;border-radius:0;background:var(--card); }
  .atelier-picker-sheet .atelier-browser>summary { display:none; }
  .atelier-picker-sheet .atelier-browser-content { display:flex;flex-direction:column;flex:1;min-height:0;padding:0;overflow-y:auto; }
  .atelier-picker-sheet .atelier-browser [data-catalog="canvas"] { display:block;margin-bottom:16px;flex-shrink:0; }
  .atelier-picker-sheet .catalog-category-select { display:block;width:100%;font-size:12px;margin-bottom:12px; }
  .atelier-picker-sheet .catalog-category-select select { margin-top:6px;width:100%;height:44px;border-radius:10px; }
  .atelier-picker-sheet .catalog-tools { flex-wrap:wrap;gap:8px; }
  .atelier-picker-sheet .catalog-tools>input { flex:1;width:0;height:44px;border-radius:10px; }
  .atelier-picker-sheet .catalog-tools>details>summary { padding:12px 4px; }
  .atelier-picker-sheet .catalog-tools>small { display:block;flex-basis:100%;padding-top:0; }
  .atelier-picker-sheet .picker-list { flex:1 0 180px;min-height:180px;display:grid;grid-auto-flow:row;grid-auto-rows:max-content;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;align-content:start;gap:12px;overflow-y:auto;overflow-x:hidden;max-height:none;padding:2px 2px 16px;scroll-snap-type:none; }
  .atelier-picker-sheet .picker-item { height:auto;min-height:150px;padding:10px 7px;gap:9px; }
  .atelier-picker-sheet .picker-thumb { height:88px; }
  .atelier-picker-sheet .picker-item span:not(.picker-thumb) { font-size:12px; }
  .atelier-picker-sheet .picker-entry { border-radius:12px;overflow:hidden; }
  .atelier-picker-sheet .picker-preview { width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%; }
}

@media(max-width:720px) { #wardrobeView { padding-top:25px; } }
@media(max-width:380px) { .bottom-nav button { min-width:82px;padding:8px 10px; } }