:root{--bg:#f7f5f1;--surface:#fff;--ink:#242321;--muted:#68645e;--line:#ddd7cf;--accent:#a85d24;--soft:#f4e7d7;--success:#32704a;--danger:#b83f36;--radius:10px;--z-nav:10;--z-toast:30;font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:var(--ink);background:#eae7e2;font-size:15px;line-height:1.55}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer;background:var(--surface);border:1px solid #b9b2a9;border-radius:8px;padding:9px 14px;min-height:44px;line-height:1.4}button:hover:not(:disabled){background:#f4f0eb;border-color:#8d8274}button:disabled{cursor:not-allowed;color:#77716b;background:#eeeae4;border-color:#d5cfc6}button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}button.primary:hover:not(:disabled){background:#4b443d}button.accent{background:var(--accent);border-color:var(--accent);color:white}button.danger{color:var(--danger);border-color:var(--danger)}button.link{border:0;padding:4px;min-height:36px;color:var(--accent);background:transparent;text-align:left}button.small{padding:6px 10px;min-height:36px;font-size:13px}a{color:var(--accent);text-underline-offset:3px}h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}h1{font-size:23px;line-height:1.35}h2{font-size:19px}h3{font-size:16px}p+p{margin-top:8px}input,select,textarea{max-width:100%;min-height:44px;border:1px solid #bbb4ab;background:#fff;border-radius:8px;padding:9px 11px;width:100%}input::placeholder,textarea::placeholder{color:#68645e}input[type=checkbox],input[type=radio]{width:20px;min-height:20px;accent-color:var(--accent)}input[type=number]{min-width:70px}textarea{min-height:88px;resize:vertical}label{display:grid;gap:6px}small,.muted{color:var(--muted)}small{font-size:12px}strong,.money{font-variant-numeric:tabular-nums}.money{white-space:nowrap;font-weight:650}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}hr{border:0;border-top:1px solid var(--line);margin:20px 0}[hidden]{display:none!important}
.review-header{padding:16px 24px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.review-brand{display:flex;flex-direction:column;gap:3px;flex-shrink:0}.review-brand strong{font-size:20px}.prototype-label{font-size:12px;color:var(--muted)}.review-tools{display:flex;flex-wrap:wrap;align-items:end;gap:10px}.review-tools label{font-size:12px}.review-tools select{min-width:110px}.review-tools #role-select{min-width:150px}.review-tools #persona-select{min-width:155px}.demo-controls{padding:12px 24px;border-bottom:1px solid var(--line);background:#f4f1ec}.scenario-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.scenario-controls strong{font-size:13px;margin-right:8px}.scenario-controls button{font-size:12px;padding:7px 10px;min-height:36px}.demo-controls p{font-size:12px;color:#625a50;margin-top:8px}.page-picker{padding:12px 24px;display:flex;align-items:end;gap:16px;background:#fff;border-bottom:1px solid var(--line)}.page-picker label{font-size:12px;width:min(470px,100%)}.page-picker span{color:var(--muted);font-size:12px;padding-bottom:10px}.page-picker>button{display:none}.workspace{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1800px;margin:0 auto;min-height:750px}.directory{padding:20px 12px;background:#f3f0eb;border-right:1px solid var(--line)}.directory h2,.directory-group{font-size:12px;color:var(--muted);margin:20px 8px 8px}.directory h2:first-child{margin-top:0}.directory button{display:block;background:transparent;border:0;border-radius:6px;width:100%;text-align:left;font-size:13px;padding:8px 10px;min-height:38px}.directory button[aria-current=page]{background:#ded7ce;color:#332a20;font-weight:600}.directory button span{font-size:11px;color:#73695d;margin-right:8px}#stage{padding:28px;min-width:0;outline:0}.app-surface{margin:auto;background:var(--bg);border:1px solid #c2bbb1;min-height:740px;max-width:100%;display:flex;flex-direction:column;overflow:clip}.app-surface.phone{width:414px;border-radius:16px}.app-surface.pad{width:980px;border-radius:12px}.app-surface.desktop{width:1240px;border-radius:4px}.app-header{padding:16px 20px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px}.app-header strong{font-size:16px}.table-pill{font-size:12px;padding:5px 9px;background:#f0ece6;border:1px solid var(--line);border-radius:6px;white-space:nowrap}.page-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.page-header h1{font-size:21px}.back-button{min-width:44px;padding:6px;font-size:13px}.app-body{flex:1;min-width:0;display:flex;flex-direction:column}.page-content{padding:20px;flex:1;min-width:0}.page-code{font-size:11px;color:var(--muted);margin-top:4px}.app-nav{display:flex;background:#fff;border-top:1px solid var(--line);position:sticky;bottom:0;z-index:var(--z-nav);justify-content:space-around}.app-nav button{border:0;background:transparent;flex:1;border-radius:0;padding:12px 3px;min-height:56px;font-size:13px}.app-nav button[aria-current=page]{color:var(--accent);background:#f8f2e9;font-weight:650}.app-nav svg{display:block;width:20px;height:20px;margin:0 auto 3px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.staff.wide .app-body{display:grid;grid-template-columns:135px minmax(0,1fr);grid-template-areas:'nav content'}.staff.wide .page-content{grid-area:content;padding:24px}.staff.wide .app-nav{grid-area:nav;flex-direction:column;justify-content:flex-start;border-top:0;border-right:1px solid var(--line);position:static;padding:12px 6px}.staff.wide .app-nav button{flex:0;text-align:left;padding:14px 12px;border-radius:6px}.staff.wide .app-nav svg{display:inline-block;vertical-align:middle;margin:0 8px 0 0;width:18px;height:18px}.staff.wide .two-column{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,1fr);gap:20px}.stack{display:flex;flex-direction:column;gap:16px}.stack.small-gap{gap:8px}.panel{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:16px}.panel h2,.panel h3{margin-bottom:12px}.notice{padding:14px 16px;background:#efece6;border:1px solid var(--line);border-radius:8px;font-size:13px}.notice.warn{background:#f6ecdf;color:#785024}.notice.success{background:#edf3ed;color:#2b5b3b}.notice.error{background:#f7e9e6;color:#96382f}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.row.start{align-items:flex-start}.wrap{flex-wrap:wrap}.subline{font-size:13px;color:var(--muted);margin-top:4px}.rule{height:1px;background:var(--line);margin:12px 0}.form-grid{display:grid;gap:16px}.wide .form-grid.two{grid-template-columns:1fr 1fr}.check-label{display:flex;align-items:center;gap:9px;font-size:14px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.actions>*{flex:1}.bottom-action{margin-top:20px;position:sticky;bottom:72px;background:var(--bg);padding:12px 0 0}.bottom-action button{width:100%}.wide .bottom-action{bottom:0}.item-list{display:flex;flex-direction:column}.item{padding:16px 0;border-bottom:1px solid var(--line)}.item:first-child{padding-top:0}.item:last-child{border-bottom:0;padding-bottom:0}.pill{display:inline-block;font-size:12px;background:#eeeae4;padding:4px 8px;border-radius:5px;white-space:nowrap}.pill.success{color:#2b5b3b;background:#eaf2eb}.pill.warn{color:#7e4f1a;background:#f5e9d7}.pill.danger{color:#96382f;background:#f7e9e6}.quantity{display:flex;align-items:center;gap:10px}.quantity button{width:36px;height:36px;min-height:36px;padding:0}.quantity output{min-width:18px;text-align:center}.product-grid{display:grid;gap:12px}.product-tile{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);padding:14px;border-radius:8px}.product-visual{display:flex;align-items:center;justify-content:center;width:60px;height:72px;flex-shrink:0;background:#eeeae4;border:1px dashed #bbb2a5;border-radius:6px;font-size:12px;color:#716859}.product-copy{flex:1;min-width:0}.product-tile h3{font-size:15px}.product-tile .money{font-size:16px}.price-row{display:flex;justify-content:space-between;margin-top:10px;align-items:center}.wide .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.search-form{display:flex;gap:8px;margin-bottom:16px}.search-form input{min-width:0}.category-row{display:flex;gap:8px;overflow:auto;margin-bottom:16px;padding-bottom:4px}.category-row button{white-space:nowrap;font-size:13px}.category-row .selected{background:#e6ded3;border-color:#8e7b63}.hero-wireframe{border:1px dashed #aa9f90;background:#e8e2d9;padding:26px 20px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;border-radius:8px}.hero-wireframe h2{font-size:24px}.hero-wireframe p{font-size:13px;color:#625a50}.shortcut-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.shortcut-grid button{padding:12px 6px;font-size:13px}.menu-list button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;text-align:left}.menu-list button:last-child{border:0}.menu-list button span:last-child{color:#71665a}.empty-state{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:44px 12px}.empty-symbol{height:66px;width:66px;border:1px dashed #aaa193;border-radius:50%;display:grid;place-items:center;font-size:25px;color:#746958}.empty-state p{font-size:13px;color:var(--muted);max-width:30ch}.totals{font-size:14px;display:grid;gap:10px}.totals .grand{padding-top:12px;border-top:1px solid var(--line);font-size:17px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.stat{padding:14px 8px;background:#fff;border-bottom:2px solid #bcb1a3}.stat strong{display:block;font-size:20px;overflow-wrap:anywhere}.stat span{font-size:12px;color:var(--muted)}.table-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.table-card{display:flex;flex-direction:column;align-items:flex-start;min-height:138px;padding:16px;gap:8px}.table-card strong{font-size:20px}.table-card span{font-size:12px;color:var(--muted)}.table-card.active{border-color:#826847;background:#f5eee3}.wide .table-card{min-height:165px}.stock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.stock-grid span{font-size:12px;color:var(--muted)}.stock-grid strong{display:block;font-size:19px}.step-list{list-style:none;padding:0;margin:0}.step-list li{padding:14px 0 14px 28px;position:relative;border-bottom:1px solid var(--line);font-size:14px}.step-list li::before{content:'○';position:absolute;left:0;top:12px;font-size:18px;color:#81776b}.step-list li.done::before{content:'✓';color:var(--success)}.step-list small{display:block;margin-top:5px}.coupon{border:1px dashed #a99983;padding:16px;background:#fff;border-radius:8px;display:flex;gap:14px;align-items:center}.coupon>strong{font-size:23px;min-width:58px}.coupon>div{flex:1}.coupon.selected{border:2px solid var(--accent);background:#fbf6ee}.coupon.disabled{opacity:.65}.member-code{font-family:monospace;font-size:32px;letter-spacing:7px;text-align:center;padding:20px 0}.code-placeholder{border:1px dashed #a69b8b;background:#eee9e2;text-align:center;width:160px;height:160px;margin:14px auto;display:grid;place-items:center;padding:20px;font-size:13px;color:#706554}.timeline .item{font-size:13px}.caption{font-size:12px;color:var(--muted);margin-top:12px}.state-panel{max-width:1580px;margin:16px 24px 32px;border:1px solid #c4bdb3;background:#f8f6f2;padding:14px 18px;border-radius:8px}.state-panel summary{cursor:pointer;font-size:13px}.state-panel #state-content{padding-top:14px;display:grid;gap:12px;font-size:13px}.state-panel code{white-space:pre-wrap;overflow-wrap:anywhere}.state-facts{display:flex;flex-wrap:wrap;gap:10px 28px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:var(--z-toast);background:#292622;color:white;padding:12px 20px;border-radius:8px;max-width:min(90vw,560px);font-size:14px}dialog{width:min(620px,94vw);max-height:92dvh;overflow:auto;border:1px solid #aaa091;border-radius:12px;padding:0;background:#fff;color:var(--ink)}dialog::backdrop{background:#24232199}dialog>header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:white}dialog h2{font-size:18px}#modal-content{padding:20px}dialog.reference{width:min(1300px,96vw)}.reference-image{display:block;max-width:100%;max-height:73dvh;object-fit:contain;margin:auto}.reference-links{font-size:13px;display:flex;gap:16px;margin-top:12px}.directory-modal button{width:100%;text-align:left;margin-top:5px}.directory-modal h3{font-size:13px;color:var(--muted);margin-top:18px}.login-mark{font-size:24px;padding:28px;text-align:center;border:1px dashed #aaa091;background:#e9e3da;border-radius:8px}.permission-grid{display:grid;gap:12px}.permission-grid label{padding:12px;background:#f4f0eb;border-radius:6px}.banner-count{font-size:12px;color:#5a5145}
@media(max-width:1100px){.workspace{grid-template-columns:180px minmax(0,1fr)}#stage{padding:20px 14px}.staff.wide .two-column{grid-template-columns:1fr}.staff.wide .app-body{grid-template-columns:105px minmax(0,1fr)}.staff.wide .app-nav button{padding:13px 8px;font-size:13px}.staff.wide .app-nav svg{display:none}.staff.wide .page-content{padding:20px}.review-header{align-items:flex-start}}
@media(max-width:760px){.review-header{padding:14px 16px;flex-direction:column;gap:12px}.review-brand{flex-direction:row;gap:12px;align-items:center}.review-tools{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.review-tools select,.review-tools #role-select,.review-tools #persona-select{min-width:0}.review-tools>button{align-self:end}.demo-controls{padding:12px 16px}.scenario-controls{gap:6px}.scenario-controls strong{width:100%}.scenario-controls button{font-size:12px}.page-picker{padding:12px 16px;gap:10px}.page-picker>button{display:block;font-size:13px}.page-picker label{flex:1;min-width:0}.page-picker span{display:none}.workspace{display:block;min-height:0}.directory{display:none}#stage{padding:16px 10px}.app-surface.phone{border-radius:10px;width:414px}.app-surface{min-height:690px}.app-header{padding:14px 16px}.page-content,.staff.wide .page-content{padding:16px}.app-surface.pad,.app-surface.desktop{width:100%}.staff.wide .app-body{display:flex}.staff.wide .app-nav{border-right:0;border-top:1px solid var(--line);flex-direction:row;order:2;padding:0;position:sticky;bottom:0}.staff.wide .app-nav button{flex:1;padding:14px 4px;text-align:center;border-radius:0}.wide .product-grid{grid-template-columns:1fr}.wide .form-grid.two{grid-template-columns:1fr}.table-grid{gap:8px}.table-card{padding:12px}.table-card strong{font-size:18px}.table-card span{font-size:11px}.stats{gap:6px}.stat strong{font-size:18px}.state-panel{margin:10px 10px 24px}.actions{gap:8px}.actions button{font-size:14px}.page-header h1{font-size:20px}.product-visual{width:52px;height:62px}.coupon{padding:12px;gap:8px}.coupon>strong{font-size:21px;min-width:50px}}
.search-form input{flex:1;width:auto}.search-form button{flex:0 0 auto;white-space:nowrap;min-width:64px}
/* Shared local image placeholders: one product asset across all roles. */
img{max-width:100%}
.app-brand{display:flex;align-items:center;gap:9px;min-width:0}
.app-brand strong{min-width:0;overflow-wrap:anywhere}
.brand-mark{display:block;width:30px;height:30px;flex:0 0 30px;border-radius:9px}
.image-hero{position:relative;isolation:isolate;overflow:hidden;min-height:218px;border-radius:10px;background:#302218;color:#fff6e8}
.cover-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% center}
.image-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(25,16,10,.75),rgba(25,16,10,.16))}
.hero-content{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 22px;min-height:218px;justify-content:center}
.hero-content h2{font-size:26px;line-height:1.3;color:#fff6e8}
.hero-content p{font-size:13px;color:#eee0cd;max-width:28ch}
.hero-content button.primary{margin-top:6px;background:#f6ead9;color:#352619;border-color:#f6ead9}
.hero-content button.primary:hover:not(:disabled){background:#fff8ec}
.product-photo{display:block;width:86px;height:100px;flex:0 0 86px;object-fit:cover;border-radius:7px;background:#ead8c1}
.product-detail{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:white}
.detail-photo{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#ead8c1}
.detail-copy{padding:18px}
.media-item{display:flex;align-items:center;gap:12px;min-width:0}
.media-main{flex:1;min-width:0;overflow-wrap:anywhere}
.media-main .row{gap:8px;flex-wrap:wrap}
.item-photo{display:block;width:62px;height:66px;flex:0 0 62px;object-fit:cover;border-radius:7px;background:#ead8c1}
.order-photos{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.order-photo{position:relative;width:56px}
.order-thumb{display:block;width:56px;height:56px;object-fit:cover;border-radius:6px;background:#ead8c1}
.order-photo span{position:absolute;bottom:0;right:0;font-size:11px;line-height:1.4;padding:1px 5px;border-radius:5px 0 5px 0;background:#33271fe6;color:white}
.identity{display:flex;align-items:center;gap:14px;min-width:0}
.identity h2{margin:0;font-size:19px}
.avatar{display:block;width:64px;height:64px;flex:0 0 64px;object-fit:cover;border-radius:50%;background:#f4e8d8;border:2px solid #f4e8d8}
.panel>.avatar{margin:0 auto 16px}
.editor-photo{display:block;width:144px;height:144px;object-fit:cover;border-radius:8px;margin:0 0 16px;background:#ead8c1}
.promo-photo{border-radius:10px;overflow:hidden;background:#ead8c1}
.promotion-photo{display:block;width:100%;height:200px;object-fit:cover;object-position:center 57%}
.coupon-value{display:flex;flex-direction:column;align-items:center;gap:4px;white-space:nowrap}
.coupon-icon{display:block;width:40px;height:30px;object-fit:contain}
.coupon-detail-icon{display:block;width:80px;height:60px;object-fit:contain}
.empty-illustration{display:block;width:128px;height:112px;object-fit:contain}
.code-card{width:188px;max-width:100%;margin:14px auto;text-align:center;background:white;border:1px solid var(--line);border-radius:10px;padding:8px}
.demo-code{display:block;width:170px;height:170px;object-fit:contain}
.code-card span{display:block;padding:7px 0 2px;font-size:11px;color:var(--muted)}
.table-code-number{text-align:center;font-size:40px;letter-spacing:4px;font-weight:700}
.table-code-number small{font-size:14px;letter-spacing:0;margin-left:6px;font-weight:400}
.wide .image-hero{min-height:240px}.wide .hero-content{min-height:240px}
@media(max-width:760px){
  .app-header{gap:8px}.app-header strong{font-size:15px}.table-pill{font-size:11px;padding:5px 7px}
  .brand-mark{width:27px;height:27px;flex-basis:27px}
  .product-tile{gap:12px;padding:12px}.product-photo{width:76px;height:96px;flex-basis:76px}
  .item-photo{width:54px;height:60px;flex-basis:54px}.media-item{gap:10px}
  .hero-content{padding:24px 18px}.hero-content h2{font-size:25px}
  .identity{gap:12px}.identity h2{font-size:18px}.avatar{width:58px;height:58px;flex-basis:58px}
}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .14s ease-out,border-color .14s ease-out}.page-content{animation:appear .14s ease-out}@keyframes appear{from{opacity:.8}to{opacity:1}}}