/* Customer-only typography and controls; staff interface remains unchanged. */
/* Fixed interface titles only; dynamic content keeps the readable system font. */
@font-face{font-family:'Houyuan Display';src:url('/fonts/houyuan-titles.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.app-shell{--salon-border:rgba(212,165,116,.28);font-family:'PingFang SC','Microsoft YaHei UI',system-ui,sans-serif;max-width:960px}
.app-shell .topbar{height:72px;padding:8px 32px 0}
.app-shell .brand-seal{font-family:'Houyuan Display','Songti SC',SimSun,serif;font-size:27px;letter-spacing:2px;font-weight:400;color:#f5f0e8}
.app-shell .brand-copy strong{font:400 12px/1.5 'Microsoft YaHei',sans-serif;color:#a89f91;letter-spacing:1px}
.app-shell .account-link{border:1px solid var(--salon-border);border-radius:2px;padding:8px 16px;min-height:44px;font:14px/1.5 system-ui,sans-serif}
.app-shell .account-link:hover{border-color:#d4a574;background:#1a2f2a}
.app-shell .page{padding:18px 32px 110px}
.salon-home{max-width:760px;margin:0 auto}
.salon-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0 30px;margin-top:12px;border-top:1px solid var(--salon-border)}
.salon-heading h1{order:-1;display:flex;align-items:center;gap:18px;margin:0;color:#f5f0e8;font-family:'Houyuan Display','Songti SC',SimSun,serif;font-synthesis:none}
.salon-heading h1>span{font-size:18px;font-weight:400;writing-mode:vertical-rl;letter-spacing:5px;line-height:1.5;color:#d4a574}
.salon-heading h1>strong{font-size:64px;line-height:1.15;letter-spacing:8px;font-weight:400}
.salon-heading p{margin:0 3px 0 0;font:italic 24px/1.15 Georgia,'Times New Roman',serif;color:#d4a574;text-align:right}
.salon-entries{display:grid;gap:16px}
.salon-entry{appearance:none;position:relative;width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'title action' 'detail detail';align-items:center;gap:14px 18px;min-height:136px;padding:25px 28px;border:1px solid rgba(212,165,116,.4);border-radius:2px;background:#162b24;color:#f5f0e8;text-align:left;cursor:pointer;transition:background .18s,border-color .18s}
.salon-entry::before{content:'';position:absolute;inset:5px;border:1px solid rgba(212,165,116,.10);pointer-events:none}
.salon-entry-copy{display:contents}
.salon-entry-copy>strong{grid-area:title;min-width:0;font:400 32px/1.35 'Houyuan Display','Songti SC',SimSun,serif;letter-spacing:1px;font-synthesis:none}
.salon-entry-copy>span{grid-area:detail;min-width:0;font:400 16px/1.65 'PingFang SC','Microsoft YaHei',sans-serif;color:#b5b2a4;overflow-wrap:anywhere}
.salon-action{grid-area:action;display:flex;align-items:center;gap:12px;min-height:44px;color:#d4a574;font:400 14px/1.5 'Microsoft YaHei',sans-serif}
.salon-action>span{flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(212,165,116,.4);border-radius:50%;font:22px/1 Georgia,serif;transition:background .18s,color .18s}
.salon-entry:not(:disabled):hover{background:#21382e;border-color:#d4a574}
.salon-entry:not(:disabled):hover .salon-action>span{background:#d4a574;color:#0d1f1a}
.salon-entry:not(:disabled):active{background:#294339}
.salon-entry:focus-visible{outline:2px solid #d4a574;outline-offset:4px}
.salon-entry:disabled{opacity:.43;cursor:not-allowed}
.salon-guest{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:26px;padding:20px 0;border-top:1px solid var(--salon-border)}
.salon-guest>div{display:flex;align-items:baseline;gap:14px}
.salon-guest span,.salon-guest small{font:400 14px/1.5 'Microsoft YaHei',sans-serif;color:#a89f91}
.salon-guest strong{font:400 24px/1.5 'Songti SC',SimSun,serif;color:#d4a574;letter-spacing:2px}
.app-shell .bottom-nav{max-width:960px;height:70px;background:#0d1f1af7}.app-shell .bottom-nav button{font-size:14px}.app-shell .bottom-nav button.active{color:#d4a574}.app-shell .btn{border-radius:4px;min-height:46px;font-size:15px;font-weight:500;transition:background .18s,filter .18s}.app-shell .btn.primary{background:#b87333;color:#0d1f1a}.app-shell .btn.ghost{border-color:var(--salon-border);color:#d4a574}.app-shell .btn:not(:disabled):active{filter:brightness(.85)}.app-shell .field input,.app-shell .search input,.app-shell .field textarea,.app-shell .field select{border-radius:4px}.app-shell .chip{border-radius:4px}.app-shell .section-head h1,.app-shell .drink-page header h1{font:400 29px/1.4 'Songti SC',SimSun,serif;color:#f5f0e8;letter-spacing:2px}.app-shell .section-head p{font-size:14px;line-height:1.7}.app-shell .price-banner{border-top:1px solid var(--salon-border);border-bottom:1px solid var(--salon-border)}.app-shell .song strong{font-size:19px;font-weight:500}.app-shell .song{padding:20px 0}.app-shell .subsection-title{font-size:17px;font-weight:500;color:#d4a574}.app-shell .account-panel h2,.app-shell .benefit-card h2{font:400 24px/1.5 'Songti SC',SimSun,serif}.app-shell .account-panel>p,.app-shell .benefit-card>p:not(.eyebrow){font-size:14px;line-height:1.8}.app-shell .voucher-box,.app-shell .result{border-radius:4px}.app-shell .drink-note{font-size:14px}.app-shell .drink-page{max-width:480px}.app-shell .drink-card{border-radius:4px}.app-shell .drink-recent button{border-radius:4px}
.app-shell .bottom-nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.app-shell .bottom-nav button{font-family:'Microsoft YaHei',sans-serif;font-weight:400;min-width:0}
.customer-account{max-width:480px;margin:0 auto}
.account-switch{display:flex;gap:0;border-bottom:1px solid var(--salon-border);margin:0 0 22px}
.account-switch button{flex:1;border:0;border-bottom:2px solid transparent;background:none;color:#a89f91;padding:14px 8px;font-size:16px}
.account-switch button[aria-current=page]{color:#d4a574;border-bottom-color:#d4a574}
.customer-account .account-panel{padding:0;border:0;background:none}
.customer-account .account-panel p,.request-next{font-size:16px;line-height:1.7;color:#b5b2a4}
.customer-account .field-help{font-size:14px;margin:0 0 18px}
.customer-account form>.btn{width:100%;margin-top:12px}
.account-text-link{border:0;background:none;color:#d4a574;min-height:44px;padding:12px 0;font-size:14px}
.customer-history{margin:28px 0;border-top:1px solid var(--salon-border);border-bottom:1px solid var(--salon-border);padding:16px 0}
.customer-history summary{cursor:pointer;color:#d4a574;font-size:16px;min-height:32px}
.customer-account .account-switch button:focus-visible,.account-text-link:focus-visible,.customer-history summary:focus-visible{outline:2px solid #d4a574;outline-offset:3px}
.app-shell .section-head h1,.app-shell .drink-page header h1{font-family:'Houyuan Display','Songti SC',SimSun,serif;font-weight:400;font-synthesis:none}
.app-shell .bottom-nav button.active{box-shadow:inset 0 2px #b87333}
@media(min-width:850px){
 .salon-home{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0 40px;max-width:none;padding-top:32px}
 .salon-heading{flex-direction:column;align-items:flex-start;justify-content:flex-start;margin:0;padding-top:26px;gap:28px;border-top:3px double #b87333}
 .salon-heading h1{flex-direction:column;align-items:flex-start;gap:14px}
 .salon-heading h1>span{writing-mode:horizontal-tb;letter-spacing:4px}
 .salon-heading h1>strong{writing-mode:vertical-rl;font-size:72px;letter-spacing:14px}
 .salon-heading p{text-align:left}
 .salon-guest{grid-column:2}
}
@media(max-width:600px){
 .app-shell .topbar{height:64px;padding:8px 22px 0}
 .app-shell .page{padding:12px 22px 94px}
 .salon-heading{padding:22px 0 28px;gap:12px}
 .salon-heading h1{gap:12px}
 .salon-heading h1>strong{font-size:58px;letter-spacing:5px}
 .salon-heading p{font-size:22px}
 .salon-entry{padding:21px 22px;gap:12px;min-height:136px}
 .salon-entry-copy>strong{font-size:28px;letter-spacing:1px}
 .salon-action{gap:8px}
 .salon-guest strong{font-size:22px}
}
@media(max-width:360px){
 .app-shell .page{padding-left:18px;padding-right:18px}
 .salon-heading h1>strong{font-size:50px}
 .salon-heading p{font-size:20px}
 .salon-entry{padding:20px 16px;gap:12px 8px}
 .salon-entry-copy>strong{font-size:24px;letter-spacing:0}
 .salon-action{gap:6px}
 .salon-action>span{width:26px;height:26px;font-size:18px}
}
@media(prefers-reduced-motion:reduce){.salon-entry,.salon-action>span,.app-shell .btn{transition:none}}
