/* China Win Sample Room — adapted from Linear. Tokens and rationale: /DESIGN.md. */
:root {
  color-scheme: light;
  --canvas:#f5f5f2; --surface:#ffffff; --surface-raised:#fafaf8; --surface-soft:#eeefeb;
  --text-strong:#222824; --muted:#646d67; --line:#dedfd9; --line-strong:#adb7af;
  --green:#22634b; --accent:#22634b; --accent-hover:#194e3a; --accent-soft:#e5efe8; --on-accent:#ffffff;
  --danger:#b03932; --danger-soft:#faeae7; --warning:#875316; --photo-surface:#e9ece8;
  --shadow:0 4px 18px #20282008; --dialog-shadow:0 24px 80px #16211b30;
  color:var(--text-strong); background:var(--canvas); font-size:14px;
  -webkit-font-smoothing:antialiased;
}
:root :is(body,.main){background:var(--canvas);color:var(--text-strong)}
:root :is(.sidebar,.topbar,.product,.table-wrap,.panel,.stat,.empty,.collection-record,.brand-entry,dialog){background:var(--surface);color:var(--text-strong);border-color:var(--line)}
:root :is(button,input,select,textarea){color:var(--text-strong);border-color:var(--line);accent-color:var(--accent)}
:root button{background:var(--surface);font-weight:500;transition:background-color .15s,border-color .15s,box-shadow .15s}
:root button:hover{background:var(--surface-soft);border-color:var(--line-strong)}
:root :is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:root :is(input,select,textarea){background:var(--surface);border-radius:8px}
:root :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
:root :is(.primary,button.primary,.sample-actions .primary,#storage-preview){background:var(--accent);border-color:var(--accent);color:var(--on-accent);border-radius:8px;font-weight:600;min-height:44px;box-shadow:none}
:root :is(.primary,button.primary,.sample-actions .primary,#storage-preview):hover{background:var(--accent-hover);border-color:var(--accent-hover)}
:root :is(.ghost,.photo-button,.category-drag,.category-delete){background:transparent}
:root :is(.error,.danger,.modal-actions .danger){color:var(--danger)}
:root .category-delete:hover{background:var(--danger-soft);color:var(--danger)}
:root :is(p:where(:not(.error)),.tiny,.nav-label,.eyebrow,.product-category,.detail-row span:first-child,.footnote,.stat span,td small,.field,.check-note,.loading,.collection-kicker,.collection-story p,.collection-signature,.resultline,.inquiry-note,.storage-detail,.category-order-hint){color:var(--muted)}
:root :is(h1,h2,h3,.breadcrumb b,.resultline strong,.mode-card strong,.collection-story h2,.detail-row span:last-child){color:var(--text-strong)}
:root h1{font-size:30px;line-height:1.3;letter-spacing:-.7px;font-weight:600;margin-bottom:8px}
:root .eyebrow{font-size:10px;letter-spacing:1.6px;margin-bottom:9px}
:root .heading{margin-bottom:28px}
:root .content{padding:32px 36px 48px;max-width:1560px}
:root .shell{grid-template-columns:232px minmax(0,1fr)}
:root .sidebar{padding:28px 16px 20px;background:var(--surface-raised)}
:root .brand{margin:0 10px 38px;gap:10px}
:root .mark{background:var(--accent);color:var(--on-accent);border-radius:10px;width:36px;height:36px;font-size:22px}
:root .brand strong{font-size:16px;letter-spacing:-.4px}
:root .brand small{font-size:9px;letter-spacing:1.3px}
:root .nav-label{font-size:10px;margin:12px 12px}
:root .nav{gap:4px}
:root .nav :is(button,a){background:transparent;border:1px solid transparent;border-radius:8px;min-height:44px;padding:10px 12px;color:var(--muted);font-size:13px}
:root .nav :is(button,a):hover{background:var(--surface-soft);color:var(--text-strong)}
:root .nav button.active{background:var(--accent-soft);border-color:transparent;color:var(--accent);box-shadow:inset 3px 0 var(--accent)}
:root .nav .count{background:var(--surface-soft);color:var(--muted);padding:2px 6px;border-radius:4px;font-size:11px;font-variant-numeric:tabular-nums}
:root .nav .active .count{background:var(--surface);color:var(--accent)}
:root .mode-card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:18px 10px 12px;color:var(--muted);font-size:12px}
:root .account{border-top:1px solid var(--line);margin-top:16px;padding:18px 10px 0}
:root .avatar{background:var(--accent-soft);color:var(--accent);border-radius:9px}
:root .topbar{height:68px;padding:0 36px;background:var(--surface);font-size:12px}
:root .top-right{gap:12px}
:root .local-pill{background:var(--surface-raised);color:var(--muted);border-color:var(--line);font-size:11px;border-radius:6px}
:root .mobile-upload{text-decoration:none;color:var(--accent);border:1px solid var(--line);border-radius:8px;padding:0 12px;background:var(--surface)}
:root .mobile-upload:hover{background:var(--accent-soft);border-color:var(--accent)}
:root .language-control{background:var(--surface-soft);border-color:var(--line);border-radius:8px;padding:3px}
:root .language-control button{background:transparent;color:var(--muted);font-size:12px;min-height:32px}
:root .language-control button[aria-pressed="true"]{background:var(--surface);color:var(--text-strong);box-shadow:0 1px 3px #0001}
:root .category-filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
:root .category-filters button{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:7px;min-height:40px;font-size:13px;padding:8px 12px}
:root .category-filters button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
:root .tab-count,:root .category-filters .tab-count{background:var(--surface-soft);color:var(--muted);border-radius:4px;font-size:10px}
:root .category-filters .active .tab-count{background:var(--surface);color:var(--accent)}
:root .toolbar{background:var(--surface);border:1px solid var(--line);padding:10px;border-radius:10px;gap:8px;margin-bottom:22px;box-shadow:var(--shadow)}
:root .search{background:var(--surface-raised);border-color:var(--line);color:var(--muted);max-width:none}
:root .search input{background:transparent;color:var(--text-strong)}
:root .search input:focus-visible{outline:none}
:root .search:focus-within{outline:2px solid var(--accent);outline-offset:2px}
:root .toolbar select{background:var(--surface);color:var(--text-strong);border-color:var(--line);height:44px}
:root .resultline{margin:20px 0 14px;font-size:12px}
:root .grid{gap:20px}
:root .product{border-radius:12px;box-shadow:var(--shadow)}
:root .product:hover{transform:none;border-color:var(--line-strong);box-shadow:0 4px 18px #0000000a}
:root :is(.photo,.product:nth-child(n) .photo,.photo img,.pending-photos img){background:var(--photo-surface)}
:root .photo{height:224px}
:root .photo picture{display:block;width:100%;height:100%;min-width:0;min-height:0}
:root .photo picture img{display:block;width:100%;height:100%;object-fit:contain}
:root .thumbnails img{object-fit:contain;background:var(--photo-surface)}
:root .photo :is(.code,.demo){background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:5px;font-size:10px}
:root .placeholder,:root .placeholder .num{color:var(--muted)}
:root .placeholder .num{opacity:.65;font-size:48px;font-weight:300}
:root .product-body{padding:20px}
:root .product-category{font-size:10px;letter-spacing:1.2px;margin-bottom:8px}
:root .product h3{font-size:17px;line-height:1.45;margin-bottom:18px}
:root .detail-row{line-height:1.6}
:root .product-footer{border-color:var(--line);margin-top:18px;padding-top:16px}
:root .product-footer button{background:var(--surface-raised);color:var(--accent);border-color:var(--line);border-radius:7px;min-height:40px}
:root .stock,:root .collection-amount>strong{color:var(--accent)}
:root .stock.zero{color:var(--warning)}
:root .footnote{margin:24px 0;font-size:12px}
:root .collection-story{background:var(--surface-raised);border-color:var(--line);border-radius:12px}
:root .collection-story-end{padding:20px 32px;margin-top:28px}
:root .collection-story-end h2{font-size:22px;letter-spacing:0;font-weight:500}
:root .collection-story-end .collection-art img{max-width:220px}
:root .brand-entry{box-shadow:var(--shadow);border-radius:16px}
:root .brand-entry .collection-story{background:var(--surface-raised);border-radius:0}
:root .brand-entry .login{background:var(--surface)}
:root .stats{border-color:var(--line);background:var(--surface);border-radius:12px}
:root .admin-shell .stat{background:transparent;padding:22px 24px}
:root .stat strong{color:var(--text-strong);font-size:30px;font-weight:600;letter-spacing:-1px;font-variant-numeric:tabular-nums}
:root .stat+.stat{border-color:var(--line)}
:root .table-wrap{border-radius:12px}
:root th{background:var(--surface-raised);color:var(--muted);font-size:12px;font-weight:500;padding:14px 18px}
:root td{border-color:var(--line)}
:root tbody tr:hover{background:var(--surface-raised)}
:root .admin-products .photo{width:100%;height:104px}
:root .admin-products .photo-button{width:104px}
:root .admin-products button{background:var(--surface-raised);color:var(--accent);border-color:var(--line);border-radius:8px}
:root :is(.tag,.info,.message,.storage-tag,.collection-note){background:var(--accent-soft);color:var(--accent);border-color:var(--line)}
:root .tag.grey{background:var(--surface-soft);color:var(--muted)}
:root :is(.message.user,#toast){background:var(--accent);color:var(--on-accent)}
:root .panel{border-radius:12px}
:root .field :is(input,select,textarea){background:var(--surface);color:var(--text-strong);border-color:var(--line-strong);min-height:44px;border-radius:8px}
:root .status-select{background:var(--surface);color:var(--text-strong)}
:root dialog{border-radius:14px;box-shadow:var(--dialog-shadow)}
:root dialog::backdrop{background:#10171499;backdrop-filter:blur(4px)}
:root :is(.modal-header,.modal-actions,.storage-row,.product-identity){border-color:var(--line)}
:root .gallery-main{height:310px}
:root :is(.storage-filters,.storage-empty){background:var(--surface-raised);border-color:var(--line)}
:root .storage-cleanup .storage-notice{color:var(--warning)}
:root .storage-row:has(input:checked){background:var(--accent-soft)}
:root .storage-quota{--quota-color:var(--accent);--quota-soft:var(--accent-soft);border-color:var(--line)}
:root .storage-quota.quota-warning{--quota-color:var(--warning);--quota-soft:var(--surface-soft)}
:root .storage-quota.quota-critical{--quota-color:var(--danger);--quota-soft:var(--danger-soft)}
:root .storage-quota.quota-unknown{--quota-color:var(--muted);--quota-soft:var(--surface-soft)}
:root .quota-track{stroke:var(--surface-soft)}
:root .quota-dot-used{background:var(--line-strong)}
@media(min-width:1500px){:root .photo{height:240px}}
@media(max-width:1100px){:root .shell{grid-template-columns:204px minmax(0,1fr)}:root .content{padding:28px 24px}:root .topbar{padding:0 24px}:root .sidebar{padding:24px 12px}}
@media(max-width:700px){
  :root .shell{display:block}
  :root .sidebar,:root .admin-shell .sidebar{padding:18px 16px 12px}
  :root .brand{margin:0 0 18px}
  :root .nav :is(button,a){min-height:44px;padding:10px;font-size:13px}
  :root .admin-shell .workspace-nav button{padding:9px 6px;font-size:12px}
  :root .nav button.active{box-shadow:inset 0 -2px var(--accent)}
  :root .topbar{height:auto;min-height:64px;padding:10px 16px;gap:8px}
  :root .breadcrumb{display:none}
  :root .top-right{gap:8px}
  :root .mobile-upload{padding:0 10px;font-size:12px}
  :root .content,:root .admin-shell .content{padding:24px 16px 36px}
  :root h1{font-size:26px}
  :root .heading{gap:12px;margin-bottom:24px}
  :root .heading p{font-size:13px;line-height:1.75}
  :root .heading .primary{font-size:12px}
  :root .category-filters{display:flex;gap:8px;padding-bottom:16px;margin-bottom:16px}
  :root .category-filters button{min-height:44px;padding:8px 10px;font-size:12px;flex:0 0 auto}
  :root .toolbar{padding:10px;gap:8px}
  :root .toolbar :is(input,select){font-size:16px}
  :root .grid{gap:12px}
  :root .photo{height:170px}
  :root .product-body{padding:14px}
  :root .product h3{font-size:15px;margin-bottom:14px}
  :root .product-category{font-size:10px;letter-spacing:.5px}
  :root .product-footer button{min-height:44px}
  :root .admin-shell .stat{padding:16px 12px}
  :root .stat strong{font-size:26px}
  :root .admin-products tr{background:var(--surface);border-color:var(--line);border-radius:12px}
  :root .admin-products .photo-button{width:100%}
  :root .admin-products .photo{height:230px}
  :root .collection-story-end{padding:18px;margin-top:24px}
  :root .collection-story-end h2{font-size:18px}
  :root .field :is(input,select,textarea){font-size:16px}
  :root .gallery-main{height:230px}
  :root .language-control button{min-height:36px}
}
@media(max-width:380px){:root .grid{grid-template-columns:1fr}:root .photo{height:230px}:root .heading{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){:root *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Compact photo placeholders keep the SKU badge clear in narrow previews. */
:root .placeholder{padding:30px 8px;max-width:100%}
@media(min-width:701px){
  :root .admin-products .placeholder{padding:24px 4px 4px;gap:4px}
  :root .admin-products .placeholder .num{display:none}
  :root .admin-products .placeholder .icon{width:24px;height:24px}
  :root .admin-products .placeholder small{font-size:10px;letter-spacing:0}
  :root .admin-products .photo .demo{display:none}
}
@media(max-width:700px){
  :root .category-filters{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:12px;scroll-padding-inline:4px}
  :root .photo .placeholder{gap:6px}
  :root .photo .placeholder .num{font-size:36px}
  :root .photo .placeholder .icon{width:26px;height:26px}
  :root .photo .demo{bottom:6px;right:6px;padding:3px 5px;font-size:9px}
}