* { box-sizing: border-box; }
:root { color-scheme: light; --ink:#23352e; --green:#255a46; --paper:#faf8f1; --line:#deded1; --soft:#eeeee4; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Microsoft YaHei",system-ui,sans-serif; line-height:1.55; }
.bar { background:#fffdf6; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px max(16px,calc((100vw - 1100px)/2)); position:sticky; top:0; z-index:1; }
.brand { display:flex; gap:10px; align-items:center; font-weight:800; font-size:1.15rem; white-space:nowrap; }
.mark { display:grid; grid-template-columns:repeat(2,9px); gap:3px; transform:rotate(-9deg); }
.mark i { height:9px; border:2px solid #a44844; border-radius:50%; }
.mark i:nth-child(2) { border-color:#daa345; }.mark i:nth-child(3) { border-color:#6b8e6c; }.mark i:nth-child(4) { border-color:#8292b6; }
.role { font-size:.85rem; white-space:nowrap; }
main { max-width:1132px; margin:auto; padding:0 16px 48px; }
.demo { margin:16px 0 12px; color:#68583d; font-size:.85rem; }
nav,.actions,.filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
nav { padding-bottom:12px; border-bottom:1px solid var(--line); }
h1 { font-size:clamp(1.55rem,5vw,2.5rem); margin:22px 0 10px; letter-spacing:-.04em; }
h2 { font-size:1.15rem; margin:0 0 10px; }
p { margin:8px 0; }
button,input,select { font:inherit; color:inherit; border:1px solid var(--line); border-radius:8px; min-height:38px; padding:6px 10px; background:#fffef8; }
button { cursor:pointer; }
button:hover { border-color:var(--green); }
button:disabled { opacity:.5; cursor:default; }
button.primary, nav button[aria-current="page"] { color:white; background:var(--green); border-color:var(--green); }
button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid #8a5136; outline-offset:2px; }
.filters { margin:12px 0 18px; }
.filters label,.field { display:grid; gap:4px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:12px; }
.product,.panel { background:#fffdf7; border:1px solid var(--line); border-radius:14px; padding:14px; }
.panel { margin-bottom:12px; }
.swatch { height:76px; border:1px solid #0001; border-radius:8px; display:grid; place-content:center; margin-bottom:10px; background:radial-gradient(circle,#0002 0 1px,transparent 2px) 0 0/9px 9px, var(--color); }
.swatch span { background:#fffdf6; border-radius:100px; padding:2px 10px; font-size:.82rem; font-weight:800; }
.product button { width:100%; }
.subtle { color:#575e53; font-size:.86rem; }
.price { font-weight:800; }
.row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:9px 0; border-bottom:1px solid var(--soft); }
.row:last-child { border-bottom:0; }
.qty { width:76px; }
.gifts { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:8px; margin:12px 0; }
.gifts label { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px; font-size:.85rem; }
.checkout { padding:14px; border-radius:14px; background:#e9eee4; }
.checkout ul { margin:5px 0 10px; padding-left:1.35em; }
#status { background:#e7eee3; padding:8px 12px; border-radius:8px; }
#status[data-error="true"] { color:#792d25; background:#f9e7dc; }
.order-title { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 12px; }
.pill { background:#eeeadd; border-radius:100px; padding:2px 10px; font-size:.83rem; }
.inline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
@media (max-width:480px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .filters > label:first-child { width:100%; } .bar { position:static; } }


.customer { --pink:#c82760; --pink-bg:#ffe5ee; background:#fff6f9; }
.customer .bar { background:#fffafd; border-color:#f0dce5; }
.customer .brand { color:#822743; }
.customer main { max-width:850px; padding-bottom:100px; }
.customer .demo { color:#765565; margin:13px 0; }
.customer nav { position:fixed; z-index:2; inset:auto 0 0; display:flex; flex-wrap:nowrap; justify-content:center; padding:9px 12px max(9px,env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #f1dce5; border-bottom:0; }
.customer nav button { flex:1; max-width:260px; border:0; background:transparent; color:#63364a; font-weight:700; }
.customer nav button[aria-current="page"] { background:var(--pink-bg); color:#991c49; }
.storefront { background:white; border:1px solid #f1dce5; border-radius:22px; overflow:hidden; }
.shop-hero { min-height:160px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:20px 24px; color:#722443; background:linear-gradient(120deg,#ffe5f0,#fce4ee 52%,#ffece1); }
.shop-hero h1 { margin:0; font-size:clamp(1.65rem,6vw,2.65rem); }
.shop-hero p { margin:4px 0; font-weight:800; }
.shop-hero small { display:block; margin-top:3px; }
.hero-beads { flex:0 0 clamp(84px,25vw,166px); aspect-ratio:1; border-radius:38%; background:radial-gradient(circle,#fff5 28%,transparent 33%) 0 0/17px 16px,#f397b1; background-image:url('/beads.jpg'); background-size:cover; border:4px solid #fff9; box-shadow:0 8px 18px #a5436f23; transform:rotate(5deg); }
.shop-search { margin:14px; background:#f7f3f5; border-radius:11px; display:flex; align-items:center; gap:7px; padding:0 10px; color:#784f63; }
.shop-search input { width:100%; border:0; background:transparent; padding-inline:0; }
.catalog-layout { display:grid; grid-template-columns:clamp(76px,19%,134px) minmax(0,1fr); align-items:start; }
.families { background:#f6f2f5; align-self:stretch; }
.families button { display:block; width:100%; min-height:54px; border:0; border-radius:0; background:transparent; color:#634957; border-left:3px solid transparent; padding-inline:4px; font-size:.875rem; white-space:nowrap; }
.families button[aria-pressed="true"] { color:#9d204b; font-weight:800; background:#fff; border-left-color:var(--pink); }
#products { padding:0 12px; min-height:270px; }
.product-row { min-height:103px; display:grid; grid-template-columns:clamp(48px,12vw,78px) minmax(0,1fr) auto; align-items:center; gap:9px; padding:12px 0; border-bottom:1px solid #f3eaf0; }
.product-row:last-child { border-bottom:0; }
.product-info h2 { font-size:1rem; line-height:1.25; margin:0; }
.product-info h2 span { font-weight:600; }
.product-info p,.sheet-heading p { margin:3px 0 0; }
.product-price { color:var(--pink); font-weight:800; }
.pink { background:var(--pink); color:#fff; border-color:var(--pink); font-weight:750; }
.product-row .pink { min-height:34px; border-radius:22px; font-size:.82rem; padding:4px 9px; white-space:nowrap; }
.bead-sample { aspect-ratio:1; border-radius:12px; background-color:var(--bead); background-image:radial-gradient(circle at 48% 45%,#36202d65 0 13%,#fff8 16% 31%,#2c172844 34% 39%,transparent 43%),radial-gradient(circle at 48% 45%,#43203260 0 13%,#fff6 16% 31%,#37182c44 34% 39%,transparent 43%); background-size:16px 17px; background-position:0 0,8px 8.5px; border:1px solid #50223414; }
.no-results { padding:16px 4px; }
#variant-sheet { width:min(100%,520px); max-width:100%; max-height:min(90dvh,700px); margin:auto auto 0; padding:0; border:0; border-radius:22px 22px 0 0; color:#332331; background:#fff; box-shadow:0 0 38px #4c1d4233; overflow:hidden; }
#variant-sheet[open] { display:flex; flex-direction:column; }
#variant-sheet::backdrop { background:#3121307a; }
.sheet-body { padding:17px; overflow:auto; }
.sheet-heading { display:grid; grid-template-columns:74px 1fr auto; align-items:start; gap:12px; padding-bottom:14px; border-bottom:1px solid #f1e5ec; }
.sheet-heading h2 { margin:0; }
.sheet-close { border-radius:50%; min-width:37px; font-size:1.15rem; }
.sheet-body fieldset { padding:0 0 14px; border:0; margin:12px 0 0; }
.sheet-body legend { font-weight:800; margin-bottom:8px; }
.spec-chip { background:#f7f3f5; border-color:transparent; min-width:60px; }
.spec-chip[aria-pressed="true"] { color:white; background:var(--pink); }
.sheet-quantity { display:flex; align-items:center; justify-content:space-between; border-block:1px solid #f1e5ec; padding:10px 0; }
.sheet-quantity button { border-radius:50%; color:var(--pink); width:39px; padding:0; }
.sheet-quantity output { min-width:2ch; text-align:center; }
.sheet-sample { margin-top:14px; aspect-ratio:4/1; background-size:26px 28px; background-position:0 0,13px 14px; }
#variant-sheet footer { padding:0 0 env(safe-area-inset-bottom); }
#variant-sheet footer button { width:100%; min-height:51px; border-radius:0; }
@media (max-width:480px) { .customer main { padding-inline:9px; } .shop-hero { padding:16px 14px; min-height:133px; } #products { padding-inline:8px; } .product-info .subtle { font-size:.74rem; } }

.workbench-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.metric { display:grid; gap:5px; justify-items:start; padding:14px; border-radius:14px; }
.metric strong { font-size:1.55rem; color:#255a46; }
.access-panel { max-width:660px; }
.access-panel .field { max-width:230px; }
.access-list { margin:8px 0 12px; }
.access-list .row { cursor:pointer; flex-wrap:nowrap; }
.access-list input { flex-shrink:0; width:22px; height:22px; min-height:0; accent-color:#255a46; }
@media (max-width:560px) { .workbench-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.catalog-table-panel { padding: 0; overflow: hidden; background: #fff; }
.catalog-toolbar { margin: 0; padding: 16px 18px 4px; align-items: end; }
.catalog-toolbar label { font-size: .86rem; color: #575e53; }
.catalog-toolbar input { width: min(280px, 100%); }
.catalog-note { margin: 8px 18px 14px; }
.catalog-table-scroll { overflow-x: auto; padding-bottom: 4px; }
.catalog-table { width: 100%; min-width: 950px; border-collapse: collapse; font-size: .88rem; }
.catalog-table th, .catalog-table td { padding: 10px 9px; text-align: left; border-bottom: 1px solid #ebeee9; }
.catalog-table thead th { background: #f3f6f3; color: #39453d; white-space: nowrap; }
.catalog-table thead tr:first-child th[colspan] { text-align: center; }
.catalog-table .catalog-spec { border-left: 1px solid #e4e8e2; }
.catalog-table tbody tr:last-child > * { border-bottom: 0; }
.catalog-table tbody tr:hover, .catalog-table tbody tr:focus-within { background: #fafcf9; }
.catalog-item { display: flex; align-items: center; gap: 10px; min-width: 128px; }
.catalog-item small { display: block; color: #575e53; font-weight: 400; }
.catalog-swatch { flex: 0 0 26px; height: 26px; border: 1px solid #0002; border-radius: 7px; }
.catalog-input { width: 86px; min-height: 34px; padding: 4px 7px; background: #fff; font-variant-numeric: tabular-nums; }
.catalog-input.has-draft { border-color: #6b987f; background: #f0faf3; }
.catalog-save { min-height: 34px; padding: 4px 10px; white-space: nowrap; }
.catalog-table .catalog-empty, .catalog-table .catalog-unavailable { text-align: center; color: #575e53; }

body[data-workbench] { --paper:#f6f6f8; --ink:#24232b; --line:#e6e4ea; --soft:#edebf1; --green:#bc235b; }
[data-workbench] .bar { min-height: 64px; padding: 10px 28px; background: #fff; z-index: 2; }
[data-workbench] .bar button { background: #fff; }
[data-workbench] .mark { transform: none; background: #fbe7ee; padding: 7px; border-radius: 10px; }
[data-workbench] .mark i { border-color: #c72c65; }
.workbench-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: calc(100dvh - 64px); }
.workbench-sidebar { background: #fff; border-right: 1px solid var(--line); padding: 22px 16px; }
.workbench-sidebar nav { flex-direction: column; align-items: stretch; border: 0; position: sticky; top: 86px; gap: 4px; }
.workbench-sidebar button { text-align: left; padding: 11px 14px; border: 1px solid transparent; background: #fff; }
.workbench-sidebar button:hover { background: #f7f6f8; }
.workbench-sidebar button[aria-current="page"] { color: #a3174c; background: #fcebf2; border-color: #fcebf2; font-weight: 700; }
.workbench-shell main { max-width: none; width: 100%; margin: 0; padding: 18px clamp(16px, 2.3vw, 44px) 48px; min-width: 0; }
.workbench-shell .demo { margin: 0 0 14px; color: #6f6a78; }
.workbench-shell h1 { font-size: 1.6rem; letter-spacing: 0; margin: 0 0 15px; }
.workbench-shell .panel { background: #fff; border-radius: 10px; }
.workbench-shell .catalog-toolbar { gap: 12px; padding: 18px 20px 2px; }
.workbench-shell .catalog-toolbar label { color: #514c5b; }
.workbench-shell .catalog-toolbar input { width: min(300px, 100%); }
.workbench-shell .catalog-toolbar :is(input, select) { background: #fff; }
.workbench-shell .catalog-note { margin: 10px 20px 16px; color: #716c7b; }
.workbench-shell .catalog-table { min-width: 1000px; }
.workbench-shell .catalog-table thead th { background: #f8f7f9; color: #514c5b; }
.workbench-shell .catalog-table :is(th, td) { padding: 10px 12px; border-color: #efedf2; }
.workbench-shell .catalog-table tbody tr:hover, .workbench-shell .catalog-table tbody tr:focus-within { background: #fdf8fb; }
.workbench-shell .catalog-swatch { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 6px; object-fit: cover; }
.workbench-shell .catalog-input { width: min(100%, 108px); min-width: 68px; }
.workbench-shell .catalog-input.has-draft { border-color: #d5789c; background: #fff2f7; }
.workbench-shell .catalog-family-label { display: inline-block; white-space: nowrap; }
.catalog-row-actions { display: flex; gap: 8px; white-space: nowrap; }
.catalog-spec-button { min-height: 34px; color: #a3174c; background: #fff; padding: 4px 9px; }
.workbench-shell .extra-specs { color: #a3174c; }
.workbench-shell button.primary:disabled { color: #635f69; background: #f2f0f4; border-color: #e4e1e8; opacity: 1; }

#catalog-spec-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; }
#catalog-spec-dialog::backdrop { background: #24202d60; }
.spec-editor :is(header, footer) { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; }
.spec-editor header { border-bottom: 1px solid var(--line); }
.spec-editor footer { border-top: 1px solid var(--line); justify-content: flex-end; }
.spec-editor header :is(h2, p) { margin: 0; }
.spec-editor header p { color: #6f6a78; margin-top: 3px; }
.spec-close { font-size: 1.3rem; }
.spec-editor-content { display: grid; gap: 14px; padding: 18px 20px; }
.spec-editor-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.spec-editor input, .spec-editor select, .spec-editor button:not(.primary) { min-width: 0; background: #fff; }
.spec-image-field { display: flex; align-items: flex-start; gap: 14px; }
.spec-image-field > div { min-width: 0; flex: 1; }
.spec-image-field img { width: 84px; height: 84px; border-radius: 8px; border: 1px solid var(--line); object-fit: contain; }
.spec-image-field input[type="checkbox"] { min-height: 0; }
.spec-error { color: #a11943; margin: 0; }

@media (max-width: 760px) {
  [data-workbench] .bar { padding-inline: 16px; }
  .workbench-shell { display: block; }
  .workbench-sidebar { padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .workbench-sidebar nav { flex-flow: row nowrap; overflow-x: auto; }
  .workbench-sidebar button { white-space: nowrap; padding: 6px 10px; }
}