/* Shared visual tokens. Semantic success/error colors and original artwork stay intact. */
:root{--font-sans:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;font-family:var(--font-sans);--brand:#cf202f;--brand-deep:#ad1724;--champagne:#d6d6d6;--paper:#f5f5f5;--surface:#ffffff;--ink:#171717;--muted:#6b6b6b;--line:#e7e7e7;--teal:var(--brand);color:var(--ink);background:#f0f0f0}
body{background:var(--paper);color:var(--ink)}
#app,.top{background:var(--paper)}
.card,dialog,.auth-card{background:var(--surface);border-color:var(--line)}
h1,h2,h3,.auth-card h1{font-family:var(--font-sans);font-weight:750;color:var(--ink)}
.top small,.auth-brand small,.auth-kicker,.auth-pending,.auth-switch,.legal-foot,.hint,.read-text,.eyebrow{color:var(--muted)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,#modal :focus-visible,.auth-form input:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.primary,.auth-submit,.mw-admin-btn.primary{background:var(--brand);border-color:var(--brand);color:white;box-shadow:none}
.mw-admin-btn.primary:hover:not(:disabled){background:var(--brand-deep)}
.secondary,.page-head .right,.section-title button,.link,.account-footer button,.amount-input button,.subteam-open{background:#fff1f2;border-color:#e5c5c9;color:var(--brand)}
.auth-switch a,.app-recovery a{color:var(--brand)}
.auth-form .auth-hint,.hint,.qr-notice,.plan-disclaimer{background:#f3f3f3;color:var(--muted)}
.nav{background:#fffffff5;border-color:var(--line)}.nav button{color:var(--muted)}.nav button.active{color:var(--brand)}
.balance,.plan-balance,.mw-admin-team-band{background:linear-gradient(130deg,var(--brand-deep),var(--brand));color:white;border-color:var(--brand);box-shadow:0 12px 30px #ad172414}
.balance h1,.balance h2,.balance h3,.plan-balance h2,.plan-balance h3,.mw-admin-team-band h2{color:white}
.balance .primary{background:var(--paper);color:var(--brand);border-color:var(--champagne);box-shadow:none}
.balance .link,.balance .right{color:#fff;border-color:var(--champagne)}
.balance small,.balance .eyebrow,.plan-balance>span,.plan-balance>small{color:#ffffff}
.plan-tabs{background:#eeeeee}.plan-tabs button{color:var(--muted)}.plan-tabs button.active{color:var(--brand);background:var(--surface)}
.auth-brand{border-bottom:1px solid var(--line);margin-bottom:24px}.auth-card{box-shadow:0 18px 55px #ad172409}
.auth-loading{background:#f0f0f077}.auth-loading-card{color:var(--ink);background:#fffffff2}
.app-recovery,.brand-load-error,.brand-loading-screen{background:var(--paper);color:var(--ink)}
.brand-load-error button{background:var(--brand)}
.dialog-scroll-cue::after{background:linear-gradient(180deg,transparent,#cf202f66 30%,#cf202f66 70%,transparent)}
.dialog-scroll-cue[data-position="start"]::after{background:linear-gradient(180deg,transparent,#cf202f22 30%,#cf202f99)}
.dialog-scroll-cue[data-position="end"]::after{background:linear-gradient(180deg,#cf202f99,#cf202f22 70%,transparent)}
/* Workbench shares the palette without changing its responsive information layout. */
body #app.admin-app,.mw-admin-shell,.mw-admin-main{background:var(--paper);color:var(--ink)}
.mw-admin-sidebar{background:var(--brand-deep);color:white;border-right:1px solid var(--champagne)}
.mw-admin-sidebar nav a{color:#ffffff}.mw-admin-sidebar nav a.active{color:white;background:#ffffff19;border-color:var(--champagne)}
.mw-admin-brand,.mw-admin-brand small{color:white}.mw-admin-sidebar-label,.mw-admin-sidebar-bottom{color:#f6e6e8}
.mw-admin-header,.mw-admin-panel,.mw-admin-metric{background:var(--surface);border-color:var(--line)}
.mw-admin-page-heading h1,.mw-admin-panel h2,.mw-admin-metric strong{color:var(--ink)}
.mw-admin-eyebrow,.mw-admin-date,.mw-admin-metric>span,.mw-admin-panel-head p{color:var(--muted)}
.mw-admin-table th{background:#f5f5f5;color:var(--muted)}.mw-admin-table td{border-color:var(--line)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
#app.admin-app{--ink:#171717;--muted:#6b6b6b;--teal:#cf202f;--line:#e7e7e7}
.mw-admin-breadcrumb,.mw-admin-header .mw-admin-field,.mw-admin-date small,.mw-admin-metric small,.mw-admin-key>span,.mw-admin-field,.mw-admin-pagination,.mw-admin-footnote,.mw-admin-footer,.mw-admin-callout,.mw-admin-notice-preview>span,.mw-admin-table small,.mw-admin-workflow p,.mw-admin-workflow div>span,.mw-admin-profile-band p,.mw-admin-detail-title p,.mw-admin-timeline span{color:var(--muted)}
.mw-admin-table td,.mw-admin-table strong,.mw-admin-key strong,.mw-admin-money,.mw-admin-breadcrumb strong,.mw-admin-workflow b,.mw-admin-profile-band h2,.mw-admin-detail-title h2,.mw-admin-notice-preview h3,.mw-admin-notice-preview p{color:var(--ink)}
.mw-admin-btn,.mw-admin-btn.return,.mw-admin-btn.text{color:var(--brand);border-color:#e5c5c9;background:var(--surface)}
.mw-admin-btn.primary{background:var(--brand);color:white;border-color:var(--brand)}
.mw-admin-btn.danger{color:#ae564c;background:#fffaf9;border-color:#e8c9c4}
.mw-admin-metric.gold{background:var(--brand-deep);border-color:var(--champagne)}.mw-admin-metric.gold strong,.mw-admin-metric.gold>span,.mw-admin-metric.gold small{color:#ffffff}
.mw-admin-sidebar-bottom small{color:#f6e6e8}.mw-admin-sidebar a:focus-visible{outline-color:#fff}
.field input,.field select,.mw-admin-field input,.mw-admin-field select,.mw-admin-field textarea{border-color:var(--line);color:var(--ink)}.password-toggle{color:var(--muted)}

/* The middle navigation keeps its text label and full native touch target. */
.nav button.plan-center{min-width:44px;min-height:44px;color:var(--brand);font-weight:700;gap:5px}
.nav button.plan-center svg{box-sizing:content-box;display:block;width:24px;height:24px;padding:11px;border-radius:50%;background:var(--brand);color:#fff;stroke:currentColor;flex-shrink:0}
.nav button.plan-center:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.rank-card h2,.rank-success h2,.rank-gallery-intro{font-family:var(--font-sans);font-weight:750}
.mw-admin-callout{background:#f3f3f3;border-color:var(--line)}

/* Messages and Me use the same home tokens, typography and service cards. */
.member-service-app .page-head{border-bottom:1px solid var(--line);background:var(--paper)}
.member-service-app .card{border:1px solid var(--line);border-radius:18px;box-shadow:none}
.member-service-app .profile{margin:20px 16px;padding:24px 20px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.member-service-app .profile h2{font-size:22px;letter-spacing:.5px}
.member-service-app .icon-box{background:#fff1f2;color:var(--brand)}
.member-service-app .menu button{color:var(--ink);border-color:var(--line)}
.member-service-app .menu .row>svg{color:var(--muted)}
.member-service-app .unread{background:var(--brand)}
.member-service-app .qr-order-button strong{color:var(--ink);font-size:16px}
.member-service-app .qr-order-button small{color:var(--muted)}
.member-service-card{display:flex;align-items:center;justify-content:space-between;gap:16px}
.member-service-card h2{font-size:20px;margin:6px 0}.member-service-card p{font-size:12px;color:var(--muted);margin:0}.member-service-card button{flex-shrink:0}
.session-notice{padding:12px 20px;margin:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);font-size:12px;line-height:1.8}.session-notice a{color:var(--brand)}
.admin-login .admin-poem{margin:24px 16px}.admin-login .auth-foot{margin-bottom:0}
@media(max-width:360px){.member-service-card{align-items:flex-start;flex-direction:column}}

/* Independent admin session controls remain operable at narrow widths. */
.mw-admin-header{height:auto;min-height:87px;flex-wrap:wrap}
.mw-admin-header-actions{flex-wrap:wrap;min-width:0;max-width:100%}
@media(max-width:600px){.mw-admin-header-actions{gap:8px}.mw-admin-header-actions .mw-admin-btn{padding-inline:10px}.mw-admin-session{flex-basis:100%}}

.member-service-app .menu button>.row{color:var(--ink)}
.member-service-app .avatar{background:#fff1f2;color:var(--brand)}
.member-service-app .avatar-camera{background:var(--brand);color:var(--surface)}
.member-service-app .empty svg{color:var(--muted)}
.member-service-app .page-head .right:hover,.member-service-app .page-head .right:active{background:#fff1f2;border-color:#e5c5c9;color:var(--brand)}