:root { color-scheme: light; --page:#f5f6f2; --surface:#fff; --surface-soft:#f0f3ed; --surface-muted:#e6ece2; --primary:#3f7665; --primary-dark:#2e5e50; --primary-soft:#dcebe1; --ink:#24332f; --muted:#75837c; --line:#dce4da; --success:#398a68; --error:#b95752; --shadow:0 4px 20px rgba(37,62,51,.10); --icon-track:24px; --icon-gap:10px; --control-height:46px; }
.wardrobe-loading-panel { display:flex; flex-direction:column; min-height:calc(100dvh - 220px); }
.wardrobe-loading { position:fixed; top:calc(50dvh - 32px); left:24px; right:24px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; color:#555; }
.wardrobe-loading p { margin:0; font-size:14px; line-height:1.6; letter-spacing:0; }
.wardrobe-loading-spinner { display:block; width:32px; height:32px; flex:none; border:3px solid #dedede; border-top-color:#333; border-radius:50%; animation:wardrobe-loading-spin .8s linear infinite; }
@keyframes wardrobe-loading-spin { to { transform:rotate(360deg); } }
@media (max-width:640px) { .wardrobe-loading-panel { min-height:calc(100dvh - 166px); } }
@media (prefers-reduced-motion:reduce) { .wardrobe-loading-spinner { animation:none; } }
* { box-sizing:border-box; scrollbar-width:none; -ms-overflow-style:none; }
img,.material-symbols,[aria-hidden="true"] { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
*::-webkit-scrollbar { width:0; height:0; display:none; }
html { min-height:100%; background:var(--page); scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar,body::-webkit-scrollbar { width:0; height:0; display:none; }
body { margin:0; min-height:100vh; overflow-x:hidden; overflow-y:auto; color:var(--ink); background:var(--page); font:14px/1.45 Inter,"Microsoft YaHei",sans-serif; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button.employee-row,button.function-item { width:100%; font:inherit; text-align:inherit; cursor:pointer; }
button.back-link,button.nav-item { font:inherit; text-align:inherit; cursor:pointer; }
button.back-link,button.nav-item { border:0; }
button.nav-item { width:auto; background:transparent; }
button { cursor:pointer; }
.material-symbols { width:var(--icon-track); min-width:var(--icon-track); height:var(--icon-track); display:inline-grid; place-items:center; font-family:"Material Symbols Outlined"; font-weight:400; font-style:normal; font-size:20px; line-height:1; letter-spacing:normal; text-align:center; text-transform:none; white-space:nowrap; direction:ltr; font-feature-settings:"liga"; -webkit-font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; }
.hidden { display:none !important; }
.booting #login-view,.booting #workspace,.booting #bottom-nav { visibility:hidden; }
.workspace { position:relative; width:min(680px,calc(100% - 48px)); min-height:calc(100vh - 108px); margin:24px auto 80px; display:flex; flex-direction:column; }
.page-content { padding:24px 24px; outline:none; }
.login-view { min-height:min(640px,calc(100vh - 48px)); display:grid; place-items:center; padding:32px 24px; }
.login-panel { width:min(100%,400px); padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 28px rgba(37,62,51,.08); }
.login-heading { margin-bottom:28px; text-align:center; }
.eyebrow { display:block; margin-bottom:8px; color:var(--primary); font-size:12px; font-weight:600; letter-spacing:.08em; }
h1,h2,h3,p { margin-top:0; }
.login-heading h1 { margin-bottom:8px; font:600 28px/1.25 "Hanken Grotesk","Microsoft YaHei",sans-serif; color:var(--ink); }
.login-heading p { margin-bottom:0; color:var(--muted); }
.input-field { display:block; margin-bottom:18px; color:#526b77; font-size:12px; font-weight:600; }
.input-field > span:first-child { display:block; margin:0 0 7px; }
.input-wrap { position:relative; display:flex; align-items:center; }
.input-wrap > .material-symbols { position:absolute; left:10px; color:var(--muted); pointer-events:none; }
.input-wrap input { width:100%; height:var(--control-height); padding:0 42px 0 44px; color:var(--ink); background:var(--surface-soft); border:1px solid var(--line); border-radius:8px; outline:0; transition:border-color .2s,box-shadow .2s,background .2s; }
.input-wrap input:focus { background:var(--surface); border-color:var(--primary); box-shadow:0 0 0 3px rgba(63,118,101,.13); }
.input-wrap input::placeholder { color:#a2b2b9; }
.account-input-wrap { z-index:5; }
.account-history-toggle { position:absolute; right:5px; width:36px; height:36px; display:inline-grid; place-items:center; padding:0; color:var(--muted); background:transparent; border:0; border-radius:50%; cursor:pointer; transition:color .2s,background .2s,transform .2s; }
.account-history-toggle:hover,.account-history-toggle[aria-expanded="true"] { color:var(--primary-dark); background:var(--surface-muted); }
.account-history-toggle[aria-expanded="true"] .material-symbols { transform:rotate(180deg); }
.account-history { position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0; max-height:190px; overflow:auto; padding:5px; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-7px) scale(.985); transform-origin:top center; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 24px rgba(37,62,51,.14); transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s; }
.account-history.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); transition-delay:0s; }
.account-history.is-closing { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-5px) scale(.985); }
.account-history-item { display:flex; align-items:center; gap:8px; min-height:48px; padding:6px 7px 6px 10px; background:transparent; border-radius:9px; transition:background .18s ease,transform .18s ease; }
.account-history-item:hover { background:var(--surface-muted); transform:translateX(2px); }
.account-history-empty { padding:13px 10px; color:var(--muted); text-align:center; font-size:11px; }
.account-history-value { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:4px 0; color:var(--ink); background:transparent; border:0; outline:0; text-align:left; cursor:pointer; font:inherit; }
.account-history-value:hover { color:var(--primary-dark); }
.account-history-name { max-width:100%; overflow:hidden; color:var(--ink); font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.account-history-account { display:inline-flex; align-items:center; gap:3px; min-width:0; color:var(--muted); font-size:10px; line-height:1.2; white-space:nowrap; }
.account-history-copy { width:24px; height:24px; display:inline-grid; place-items:center; flex:none; padding:0; color:var(--muted); background:transparent; border:0; border-radius:5px; cursor:pointer; }
.account-history-copy:hover { color:var(--primary-dark); background:var(--surface-muted); }
.account-history-copy:focus-visible { outline:2px solid rgba(63,118,101,.28); outline-offset:1px; }
.account-history-copy svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.account-history-remove { flex:none; width:25px; height:25px; display:inline-grid; place-items:center; padding:0; color:#9aaeb5; background:transparent; border:0; border-radius:50%; cursor:pointer; font:inherit; font-size:16px; line-height:1; }
.account-history-remove:hover { color:#c65e5e; background:#fff0ed; }
.password-toggle { position:absolute; right:5px; width:36px; height:36px; color:var(--muted); }
.icon-button { display:inline-grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; transition:color .2s,background .2s,transform .2s; }
.icon-button:hover { color:var(--primary-dark); background:var(--surface-muted); }
.primary-button { width:100%; min-height:var(--control-height); display:inline-flex; align-items:center; justify-content:center; gap:var(--icon-gap); padding:10px 18px; color:#fff; background:var(--primary); border:0; border-radius:8px; font-size:14px; font-weight:600; box-shadow:0 5px 12px rgba(63,118,101,.18); transition:background .2s,transform .2s,opacity .2s; }
.primary-button > .material-symbols,.secondary-button > .material-symbols,.back-link > .material-symbols { flex:none; }
.primary-button:hover { background:var(--primary-dark); }
.primary-button:active { transform:scale(.985); }
.primary-button:disabled { cursor:wait; opacity:.68; }
.form-message { min-height:18px; margin:12px 0 0; color:var(--error); font-size:12px; text-align:center; }
.user-card { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; margin-bottom:18px; padding:12px 16px; background:var(--surface-soft); border:1px solid #e0e8dc; border-radius:8px; }
.user-identity { min-width:0; display:flex; align-items:center; gap:14px; }
.user-avatar-group { position:relative; width:48px; height:48px; flex:none; }
.avatar-refresh-button { position:absolute; left:50%; bottom:-4px; z-index:2; height:20px; min-height:20px; display:inline-flex; align-items:center; justify-content:center; gap:2px; padding:1px 5px; color:#3172ff; background:#f4f8ff; border:1px solid #b7d0ff; border-radius:6px; box-shadow:0 1px 4px rgba(42,91,160,.12); font-size:10px; font-weight:600; line-height:1; white-space:nowrap; transform:translateX(-50%); transition:background .2s,border-color .2s,color .2s; }
.avatar-refresh-button:hover { color:#245bd1; background:#eaf1ff; border-color:#8fb4ff; }
.avatar-refresh-button:disabled { cursor:wait; opacity:.7; }
.avatar-refresh-button .material-symbols { width:14px; min-width:14px; height:14px; font-size:12px; }
.avatar-refresh-button.is-refreshing .material-symbols { animation:modal-spin .8s linear infinite; }
.user-copy { min-width:0; }
.user-name { display:block; overflow:hidden; color:var(--ink); font:600 20px/1.25 "Hanken Grotesk","Microsoft YaHei",sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.user-state { display:flex; align-items:center; gap:6px; margin-top:5px; color:var(--muted); font-size:11px; }
.online-dot { width:7px; height:7px; border-radius:50%; background:var(--success); }
.user-card-actions { display:flex; align-items:center; gap:2px; flex:none; }
.user-home-link,
.user-logout { width:40px; height:40px; flex:none; color:#657d88; }
.user-home-link { color:#9aa9a1; text-decoration:none; }
.user-home-link:hover { color:#5f7568; }
.avatar { width:48px; height:48px; flex:none; display:grid; place-items:center; overflow:hidden; color:var(--primary-dark); background:var(--primary-soft); border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #b9dce6; font:600 20px "Hanken Grotesk","Microsoft YaHei",sans-serif; }
.avatar img { width:100%; height:100%; display:block; object-fit:cover; }
.avatar-fallback { display:none; width:100%; height:100%; place-items:center; }
.avatar-fallback.is-visible { display:grid; }
.avatar.employee-avatar { width:48px; height:48px; border:0; box-shadow:none; background:#edf4f7; font-size:17px; }
.avatar.employee-avatar img { width:100%; height:100%; object-fit:cover; }
.avatar.employee-avatar img { transform:translateY(6px); }
.avatar.detail-avatar { width:64px; height:64px; font-size:25px; }
.avatar.employee-avatar.avatar-portrait-mia img,
.avatar.employee-avatar.avatar-portrait-wuxin img,
.avatar.detail-avatar.avatar-portrait-mia img,
.avatar.detail-avatar.avatar-portrait-wuxin img { width:100%; height:100%; align-self:center; object-fit:contain; object-position:center center; transform:translateY(-3px) scale(0.68); transform-origin:center center; }
.avatar.detail-avatar.avatar-portrait-jiuer img { width:100%; height:100%; align-self:end; object-fit:contain; object-position:center bottom; transform:none; }
.avatar.employee-avatar.avatar-portrait-wuxin img { transform:translateY(0) scale(.78); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; margin-bottom:12px; padding:0 16px; color:#3f7665; background:var(--surface-soft); border:1px solid var(--line); border-radius:8px; }
.section-title { display:flex; align-items:center; gap:var(--icon-gap); font:600 20px/1.3 "Hanken Grotesk","Microsoft YaHei",sans-serif; }
.section-title .material-symbols { color:var(--primary-dark); }
.count-badge { flex:none; padding:5px 10px; color:#60766b; background:var(--surface); border:1px solid var(--line); border-radius:999px; font-size:12px; white-space:nowrap; }
.count-badge strong { color:var(--primary-dark); }
.employee-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.employee-row { min-width:0; min-height:76px; display:grid; grid-template-columns:minmax(0,1fr) 32px; align-items:center; gap:10px; padding:12px; color:var(--ink); text-align:left; text-decoration:none; background:var(--surface-soft); border:1px solid transparent; border-radius:8px; transition:background .25s,border-color .25s,box-shadow .25s,transform .25s; }
.employee-row:hover { background:#edf5ed; border-color:#c7d9cb; box-shadow:0 5px 13px rgba(37,62,51,.08); transform:translateY(-2px); }
.employee-main { min-width:0; display:flex; align-items:center; gap:12px; }
.employee-info { min-width:0; }
.employee-name { display:block; overflow:hidden; font-size:16px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.employee-sub { display:block; margin-top:3px; overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.employee-arrow { width:32px; height:32px; flex:none; display:grid; place-items:center; color:#71827a; background:var(--surface); border-radius:50%; transition:color .2s,transform .2s; }
.employee-row:hover .employee-arrow { color:var(--primary-dark); transform:translateX(2px); }
.empty { grid-column:1/-1; padding:40px 16px; color:var(--muted); text-align:center; background:var(--surface-soft); border-radius:8px; }
.route-panel,.page-content.page-transition { animation:none; }
.page-content.no-transition .route-panel { animation:none !important; }
.page-content.page-transition .route-panel { animation:page-settle .5s cubic-bezier(.22,.72,.28,1) both; }
@keyframes page-settle { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.bottom-nav { position:fixed; right:0; bottom:0; left:0; z-index:10; width:100%; height:56px; display:flex; align-items:center; justify-content:center; gap:clamp(20px,7vw,68px); padding:3px 16px 4px; background:rgba(255,255,255,.98); border-top:1px solid var(--line); box-shadow:0 -2px 10px rgba(37,62,51,.07); transition:opacity .22s ease,transform .22s ease; }
.bottom-nav.nav-collapsed { opacity:0; pointer-events:none; transform:translateY(100%); }
.nav-item { position:relative; flex:0 0 76px; min-width:76px; min-height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; margin:0; padding:0; color:#819087; background:transparent; border:0; text-decoration:none; font-size:11px; line-height:1.2; transition:color .2s,transform .2s; }
.nav-item:hover { color:var(--primary-dark); }
.nav-item .material-symbols { font-size:21px; transition:transform .25s ease; }
.nav-item.active { color:var(--primary-dark); font-weight:600; }
.nav-item.active::after { position:absolute; bottom:-2px; width:20px; height:2px; content:""; background:var(--primary); border-radius:2px; animation:nav-in .25s ease both; }
.nav-item.active .material-symbols { transform:translateY(-2px); }
@keyframes nav-in { from { opacity:0; transform:scaleX(.3); } to { opacity:1; transform:scaleX(1); } }
.page-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:20px; }
.page-top > div:first-child { min-width:0; flex:1; }
.detail-page { width:min(100%,560px); margin:0 auto; }
.page-top h1 { margin:0; font:600 24px/1.3 "Hanken Grotesk","Microsoft YaHei",sans-serif; }
.page-top p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.back-link { display:inline-flex; align-items:center; gap:var(--icon-gap); min-height:40px; padding:8px 12px; color:#2e5e50; background:var(--primary-soft); border-radius:8px; text-decoration:none; font-size:12px; font-weight:600; transition:background .2s,transform .2s; }
.back-link:hover { background:#c4dfcc; transform:translateX(-2px); }
.detail-identity { display:flex; align-items:center; gap:16px; margin-bottom:20px; padding:16px; background:var(--surface-soft); border:1px solid #e0e8dc; border-radius:8px; }
.detail-identity h1 { margin:0; font:600 20px/1.3 "Hanken Grotesk","Microsoft YaHei",sans-serif; }
.detail-identity p { display:flex; align-items:center; gap:var(--icon-gap); margin:5px 0 0; color:var(--muted); font-size:12px; }
.detail-identity p .material-symbols { color:var(--primary); font-size:17px; }
.selector-stack { display:grid; gap:12px; }
.selector-card { padding:16px; background:var(--surface); border:1px solid #e2eef2; border-radius:8px; box-shadow:0 2px 8px rgba(37,62,51,.04); }
.selector-label { display:block; margin:0 0 8px 2px; color:#506a76; font-size:12px; font-weight:600; }
.select-wrap { position:relative; }
.select-wrap select { width:100%; height:var(--control-height); padding:0 48px 0 13px; color:var(--ink); appearance:none; background:var(--surface-soft); border:1px solid var(--line); border-radius:8px; outline:0; cursor:pointer; transition:border-color .2s,background .2s,box-shadow .2s; }
.select-wrap select:focus { background:var(--surface); border-color:var(--primary); box-shadow:0 0 0 3px rgba(63,118,101,.11); }
.custom-select-source { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }
.custom-picker-trigger { width:100%; height:var(--control-height); display:flex; align-items:center; justify-content:space-between; padding:0 13px; color:var(--ink); background:var(--surface-soft); border:1px solid var(--line); border-radius:8px; cursor:pointer; text-align:left; transition:border-color .2s,background .2s,box-shadow .2s; }
.time-field .custom-picker-trigger { width:190px; flex:0 1 190px; min-width:150px; }
.custom-picker-trigger:hover,.custom-picker-trigger:focus { background:var(--surface); border-color:var(--primary); box-shadow:0 0 0 3px rgba(63,118,101,.11); outline:0; }
.custom-picker-trigger .material-symbols { color:var(--primary-dark); }
.select-wrap .custom-picker-trigger .material-symbols { position:static; transform:none; pointer-events:none; }
.picker-value { min-width:0; display:flex; align-items:center; gap:8px; }
.picker-value-content { min-width:0; display:inline-flex; align-items:center; gap:8px; }
.picker-value-image { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; overflow:hidden; border:1px solid #d5e6d8; border-radius:8px; background:#e8f1e8; }
.picker-value-image img { width:100%; height:100%; display:block; object-fit:contain; object-position:center bottom; }
.picker-value-image img.outfit-default-portrait-mia,
.picker-value-image img.outfit-default-portrait-wuxin { width:100%; height:100%; object-fit:contain; object-position:center center; transform:translateY(-2px) scale(.68); transform-origin:center center; }
.picker-value-image .outfit-option-avatar { font-size:13px; }
.picker-value-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-wrap .material-symbols { position:absolute; top:50%; right:10px; color:var(--primary-dark); pointer-events:none; transform:translateY(-50%); }
.detail-actions { margin-top:20px; display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:10px; }
.detail-actions .save-message,.detail-actions .detail-note { grid-column:1/-1; }
.detail-actions > .primary-button,.detail-actions > .secondary-button { width:100%; min-height:44px; }
.popular-outfit-list { display:grid; gap:9px; }
.popular-outfit-option { width:100%; display:grid; grid-template-columns:30px minmax(0,1fr) 70px; align-items:center; gap:10px; padding:11px; color:#53675e; background:#f5fafb; border:1px solid #e0e8dc; border-radius:14px; cursor:pointer; text-align:left; transition:.2s ease; }
.popular-outfit-option:hover { transform:translateY(-1px); border-color:#b6d5c0; background:#edf5ed; }
.popular-outfit-option.is-selected { color:#2e5e50; border-color:#9fc5ad; background:linear-gradient(135deg,#e4f0e5,#f5fdfe); box-shadow:0 6px 15px rgba(63,118,101,.12); }
.popular-outfit-rank { width:30px; height:30px; display:grid; place-items:center; color:#0b91ae; background:#fff; border:1px solid #d5e6d8; border-radius:10px; font-size:12px; font-weight:800; }
.popular-outfit-parts { min-width:0; display:flex; align-items:flex-start; justify-content:space-between; gap:4px; }
.popular-outfit-part { min-width:0; flex:1 1 0; display:grid; justify-items:center; gap:5px; }
.popular-outfit-part-label { min-height:12px; padding:2px 5px; color:#3f7665; background:#e8f1e8; border-radius:5px; font-size:11px; font-weight:700; line-height:1; white-space:nowrap; }
.popular-outfit-image { width:58px; height:58px; flex:0 0 58px; display:grid; place-items:center; overflow:hidden; background:#e8f1e8; border:1px solid #cde1d1; border-radius:12px; }
.popular-outfit-image img { width:100%; height:100%; display:block; object-fit:contain; object-position:center bottom; }
.popular-outfit-image img.popular-outfit-default-portrait-mia,
.popular-outfit-image img.popular-outfit-default-portrait-wuxin { width:100%; height:100%; object-fit:contain; object-position:center center; transform:translateY(-11px) scale(.68); transform-origin:center center; }
.popular-outfit-image-fallback { color:#2e5e50; font-size:16px; font-weight:700; }
.popular-outfit-image.is-empty { background:#e1efe4; }
.popular-outfit-plus { width:14px; height:58px; flex:0 0 14px; display:grid; place-items:center; margin-top:17px; color:#0b91ae; font-size:19px; font-weight:800; line-height:1; }
.popular-outfit-part-name { width:100%; max-width:88px; overflow:hidden; color:#53675e; font-size:11px; font-weight:600; line-height:1.2; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.popular-outfit-copy { min-width:0; width:70px; display:grid; gap:4px; }
.popular-outfit-copy strong,.popular-outfit-values { min-width:0; overflow:hidden; color:inherit; font-size:12px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.popular-outfit-values { color:#71827a; font-size:11px; }
.popular-outfit-copy small { color:#82918a; font-size:10px; }
.picker-empty { min-height:130px; display:grid; place-items:center; color:#82918a; background:#f5fafb; border:1px dashed #d8e6da; border-radius:15px; font-size:12px; }
@media (max-width:560px) { .popular-outfit-option { grid-template-columns:28px minmax(0,1fr) 58px; gap:6px; padding:9px 8px; } .popular-outfit-parts { gap:2px; } .popular-outfit-copy { width:58px; } .popular-outfit-image { width:48px; height:48px; flex-basis:48px; } .popular-outfit-plus { width:11px; flex-basis:11px; height:48px; margin-top:17px; font-size:17px; } .popular-outfit-part-name { max-width:68px; font-size:10px; } .popular-outfit-copy strong { font-size:11px; } .popular-outfit-values { font-size:10px; } }
@media (max-width:480px) { .detail-actions { grid-template-columns:1fr; } .detail-actions .save-message,.detail-actions .detail-note { grid-column:1; } }
.save-message { min-height:18px; margin:9px 0 0; color:var(--success); font-size:12px; text-align:center; }
.save-message,.detail-note { display:none !important; }
.save-message.error { color:var(--error); }
.detail-note { margin:12px 2px 0; color:var(--muted); font-size:11px; text-align:center; }
.info-section { padding:20px; background:var(--surface-soft); border:1px solid #e0e8dc; border-radius:8px; }
.info-section h2 { display:flex; align-items:center; gap:var(--icon-gap); margin-bottom:8px; font:600 20px/1.3 "Hanken Grotesk","Microsoft YaHei",sans-serif; }
.info-section h2 .material-symbols { color:var(--primary-dark); }
.info-section p { margin-bottom:0; color:var(--muted); line-height:1.7; }
.function-list { display:grid; gap:10px; margin-top:16px; }
.function-item,.function-item * { text-decoration:none !important; text-decoration-line:none !important; }
.function-item { min-height:70px; display:flex; align-items:center; gap:12px; padding:12px 14px; color:var(--muted); background:var(--surface-soft); border:1px solid var(--line); border-radius:8px; transition:background .2s,border-color .2s,transform .2s,box-shadow .2s; }
.function-item:hover { background:var(--surface); border-color:#b9d9c6; box-shadow:0 5px 14px rgba(37,62,51,.07); transform:translateY(-1px); }
.function-icon { width:38px; height:38px; flex:none; display:grid; place-items:center; color:var(--primary-dark) !important; background:var(--primary-soft); border:1px solid #c9dfce; border-radius:8px; font-size:21px; }
.function-copy { min-width:0; flex:1; }
.function-item strong,.function-item small { text-decoration:none !important; }
.function-item strong { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; color:var(--ink); font-size:14px; line-height:1.35; }
.function-task-status { display:inline; margin-left:0; color:#777 !important; font-size:10px !important; font-weight:400; line-height:1.35; white-space:nowrap; }
.function-item small { display:-webkit-box; overflow:hidden; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.35; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.function-arrow { width:28px; height:28px; flex:none; display:grid; place-items:center; color:#71827a !important; border-left:1px solid var(--line); font-size:20px; }
.signature-page { width:min(100%,680px); }
.signature-query,.signature-result { padding:20px; background:var(--surface); border:1px solid #e0e8dc; border-radius:8px; box-shadow:var(--shadow); }
.signature-field { display:block; }
.signature-label { display:flex; align-items:center; gap:var(--icon-gap); color:#587083; font-size:13px; }
.signature-label .material-symbols { color:var(--primary-dark); }
.signature-field input { width:100%; height:46px; margin-top:10px; padding:0 13px; color:var(--ink); background:var(--surface-soft); border:1px solid var(--line); border-radius:8px; outline:0; }
.signature-field input:focus { background:var(--surface); border-color:var(--primary); box-shadow:0 0 0 3px rgba(63,118,101,.13); }
.signature-submit { margin-top:18px; }
.signature-submit:disabled { cursor:wait; opacity:.68; }
.signature-query .form-message { margin-bottom:0; }
.signature-result { margin-top:16px; }
.signature-result-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.signature-title { display:flex; align-items:center; gap:var(--icon-gap); color:var(--ink); font-size:16px; }
.signature-title .material-symbols { color:var(--success); }
.copy-button { display:inline-flex; align-items:center; gap:5px; padding:8px 12px; color:var(--primary-dark); background:var(--primary-soft); border:1px solid #b9d9c6; border-radius:8px; font-size:12px; font-weight:600; transition:background .2s,color .2s; }
.copy-button:hover { background:#dcebe1; }
.copy-button .material-symbols { width:18px; min-width:18px; height:18px; font-size:17px; }
.signature-result .signature-label { margin-top:18px; }
.signature-result .signature-label .material-symbols { color:var(--primary-dark); }
.signature-raw { width:100%; min-height:120px; margin-top:10px; padding:13px; resize:vertical; color:#334155; background:#f8fafc; border:1px solid #d7e0e5; border-radius:8px; outline:0; font:12px/1.6 Consolas,monospace; }
.signature-readonly,.signature-hint { display:flex; align-items:center; gap:5px; margin:7px 0 0; color:#9aafbc; font-size:11px; }
.signature-readonly .material-symbols,.signature-hint .material-symbols { width:16px; min-width:16px; height:16px; font-size:14px; }
.preview-label { margin-top:22px !important; }
.signature-preview { min-height:96px; margin-top:10px; padding:22px 16px; display:grid; place-items:center; overflow:auto; color:#fff; background:#191d2c; border-radius:8px; text-align:center; }
.signature-tag { max-width:100%; line-height:1.35; text-align:center; text-shadow:0 1px 2px rgba(16,12,38,.45); white-space:normal; word-break:break-word; }
.signature-tag > * { text-shadow:inherit; }
.signature-preview:empty::before { content:"暂无签名"; color:#94a3b8; }
.signature-edit-preview-box:empty::before { content:none; }
.signature-hint { margin-bottom:0; }
.signature-result-enter { animation:signature-result-in .48s cubic-bezier(.2,.8,.2,1) both; }
.signature-result .copy-button,.signature-result .signature-readonly { display:none; }
.signature-raw-label {
  justify-content:space-between;
  gap:10px;
}
.signature-label-copy {
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:var(--icon-gap);
}
.signature-copy-icon {
  width:30px;
  min-width:30px;
  height:30px;
  display:inline-grid;
  place-items:center;
  flex:none;
  padding:0;
  color:var(--primary-dark);
  background:transparent;
  border:0;
  border-radius:6px;
  cursor:pointer;
}
.signature-copy-icon:focus-visible {
  outline:2px solid rgba(63,118,101,.28);
  outline-offset:2px;
}
.signature-copy-svg {
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.7;
}
.signature-save { width:100%; margin-top:20px; }
.mutual-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mutual-toolbar > div { min-width:0; flex:1 1 auto; }
.mutual-toolbar .primary-button { width:auto; flex:0 0 auto; min-width:156px; white-space:nowrap; }
.mutual-result { margin-top:16px; }
.mutual-result-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.mutual-result-heading h2 { margin:0; color:var(--ink); font-size:20px; }
.mutual-result-heading p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.mutual-actions { display:flex; align-items:center; gap:8px; }
.mutual-actions .secondary-button { min-height:34px; padding:7px 10px; font-size:11px; }
.mutual-check-all { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; cursor:pointer; }
.mutual-check-all input,.mutual-select input { position:absolute; opacity:0; pointer-events:none; }
.mutual-check-all span { white-space:nowrap; }
.mutual-list { display:grid; gap:9px; max-height:620px; overflow:auto; padding:3px 2px 2px; scrollbar-color:#c7ddca transparent; }
.mutual-user-card { display:flex; align-items:center; gap:11px; min-height:66px; padding:10px 11px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 14px rgba(37,62,51,.045); }
.mutual-select { width:20px; flex:none; cursor:pointer; }
.mutual-select > span { position:relative; display:block; width:16px; height:16px; border:1px solid #c6c6c6; border-radius:50%; background:#fff; transition:background .18s,border-color .18s; }
.mutual-select > span::after { content:""; position:absolute; inset:0; margin:auto; width:9px; height:7px; background:#fff; clip-path:polygon(0 45%,17% 28%,40% 57%,83% 0,100% 16%,41% 100%); transform:scale(.8); opacity:0; transition:opacity .18s,transform .18s; }
.mutual-select input:checked + span::after { opacity:1; transform:scale(1); }
.mutual-select:focus-within > span,.mutual-check-all:focus-within { outline:2px solid #555; outline-offset:3px; }
.mutual-select input:checked + span { border-color:var(--primary); background:var(--primary); box-shadow:inset 0 0 0 3px #fff; }
.mutual-avatar { width:43px; height:43px; display:grid; place-items:center; flex:none; overflow:hidden; color:#3d7053; background:#edf3e8; border:1px solid #cfdfca; border-radius:50%; font-weight:700; }
.mutual-avatar img { width:100%; height:100%; object-fit:cover; }
.mutual-avatar-fallback { display:grid; place-items:center; width:100%; height:100%; }
.mutual-user-copy { min-width:0; flex:1; }
.mutual-user-copy strong,.mutual-user-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mutual-user-copy strong { color:var(--ink); font-size:13px; }
.mutual-user-copy small { margin-top:5px; color:var(--muted); font-size:10px; }
.mutual-unfollow-button { min-height:32px; flex:none; padding:7px 11px; color:#a7665c; background:#fff7f4; border-color:#f1d9d3; font-size:11px; }
.mutual-unfollow-button:hover { color:#a33f32; background:#fff0ec; }
.mutual-empty { padding:40px 16px; color:var(--muted); background:var(--surface-soft); border:1px dashed var(--line); border-radius:12px; text-align:center; font-size:12px; }
@media (max-width:560px) { .mutual-toolbar { align-items:stretch; flex-direction:column; } .mutual-toolbar .primary-button { width:100%; } .mutual-result-heading { align-items:flex-start; flex-direction:column; } .mutual-actions { width:100%; justify-content:space-between; } .mutual-user-card { gap:8px; padding:9px 8px; } .mutual-avatar { width:40px; height:40px; } .mutual-unfollow-button { padding-inline:9px; } }
.signature-result .signature-save { display:none; }
@keyframes signature-result-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.checkin-page .user-card { margin-bottom:14px; }
.checkin-query .signature-label { min-height:28px; }
.checkin-summary { min-height:20px; margin:8px 0 12px; color:var(--muted); font-size:12px; }
.checkin-notice { display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:10px 12px; color:#8a6840; background:#fffaf1; border:1px solid #f0dfc4; border-radius:8px; font-size:12px; line-height:1.45; }
.checkin-notice .material-symbols { width:18px; height:18px; flex:none; color:#b97824; font-size:18px; }
.checkin-status { flex:none; margin-left:auto; padding:5px 8px; color:#819087; background:#edf3f5; border-radius:999px; font-size:10px; white-space:nowrap; }
.checkin-status.is-on { color:#237c63; background:#e3f4ed; }
.checkin-controls { border-top:1px solid var(--line); }
.checkin-switch-row { min-height:58px; display:flex; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.checkin-switch-row > span:first-child { min-width:0; flex:1; }
.checkin-switch-row strong,.checkin-switch-row small { display:block; }
.checkin-switch-row strong { color:var(--ink); font-size:14px; }
.checkin-switch-row small { margin-top:3px; color:var(--muted); font-size:11px; }
.checkin-switch-row input { position:absolute; opacity:0; pointer-events:none; }
.switch-ui { position:relative; width:42px; height:24px; flex:none; background:#cbd9de; border-radius:999px; transition:background .2s; }
.switch-ui::after { position:absolute; top:3px; left:3px; width:18px; height:18px; content:""; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(32,52,63,.18); transition:transform .2s; }
.checkin-switch-row input:checked + .switch-ui { background:var(--primary); }
.checkin-switch-row input:checked + .switch-ui::after { transform:translateX(18px); }
.time-field { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; color:#506a76; font-size:12px; font-weight:600; }
.time-field > span { min-width:0; white-space:nowrap; }
.time-field > span strong { white-space:nowrap; }
.time-field strong,.time-field small { display:block; }
.time-field small { margin-top:3px; color:var(--muted); font-size:11px; font-weight:400; }
.time-field input { width:132px; height:38px; padding:0 10px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; outline:0; }
.time-field input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(63,118,101,.11); }
.checkin-submit { width:100%; margin-top:18px; }
.checkin-history { margin-top:16px; }
.checkin-loading,.checkin-empty { min-height:82px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:12px; }
.checkin-empty .material-symbols { color:#8fa6ae; }
.checkin-log-list { max-height:300px; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
.checkin-log-list::-webkit-scrollbar { display:none; }
.checkin-log-row { display:flex; align-items:center; gap:11px; min-height:58px; padding:10px 0; border-bottom:1px solid var(--line); }
.checkin-log-row:last-child { border-bottom:0; }
.checkin-log-icon { width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:50%; }
.checkin-log-icon .material-symbols { width:18px; min-width:18px; height:18px; font-size:16px; }
.checkin-log-icon.success { color:var(--success); background:#e2f3eb; }
.checkin-log-icon.failure { color:var(--error); background:#fff0ed; }
.checkin-log-copy { min-width:0; }
.checkin-log-copy strong,.checkin-log-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.checkin-log-copy strong { color:var(--ink); font-size:12px; font-weight:600; }
.checkin-log-copy small { margin-top:3px; color:var(--muted); font-size:10px; }
.settings-list { display:grid; gap:10px; margin:0 0 22px; }
.settings-switch-row { min-height:66px; display:flex; align-items:center; gap:14px; padding:13px 14px; color:var(--ink); background:var(--surface-soft); border:1px solid #e0e8dc; border-radius:12px; cursor:pointer; }
.settings-switch-row > span:first-child { min-width:0; flex:1; }
.settings-switch-row strong,.settings-switch-row small { display:block; }
.settings-switch-row strong { font-size:13px; }
.settings-switch-row small { margin-top:3px; color:var(--muted); font-size:11px; font-weight:400; }
.settings-switch-row input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.settings-switch-row .switch-ui { position:relative; width:42px; height:24px; flex:none; background:#cddde2; border-radius:99px; transition:background .2s ease; }
.settings-switch-row .switch-ui::after { position:absolute; top:3px; left:3px; width:18px; height:18px; content:""; background:#fff; border-radius:50%; box-shadow:0 2px 5px rgba(44,79,89,.2); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.settings-switch-row input:checked + .switch-ui { background:var(--primary); }
.settings-switch-row input:checked + .switch-ui::after { transform:translateX(18px); }
.settings-switch-row:has(input:focus-visible) { outline:3px solid rgba(63,118,101,.14); }
.my-card { display:grid; gap:16px; padding:20px; background:var(--surface-soft); border:1px solid #e0e8dc; border-radius:8px; }
.my-card-heading { display:flex; align-items:center; gap:var(--icon-gap); padding-bottom:14px; border-bottom:1px solid var(--line); }
.my-card-heading .material-symbols { color:var(--primary-dark); font-size:25px; }
.my-card-heading h1 { margin:0; font:600 20px/1.3 "Hanken Grotesk","Microsoft YaHei",sans-serif; }
.logout-main { color:#5e747d; background:var(--surface); border:1px solid var(--line); box-shadow:none; }
.logout-main:hover { color:var(--error); background:#fff5f3; border-color:#f0d0cb; }

/* 弹窗始终脱离页面流，移动端也覆盖在当前界面中央。 */
.modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; width:100vw; height:100vh; height:100dvh; padding:16px; overflow:hidden; background:rgba(28,47,39,.34); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal-card { width:min(100%,380px); max-height:calc(100dvh - 32px); margin:0; padding:28px 24px 22px; overflow:auto; color:var(--ink); background:var(--surface); border:1px solid rgba(255,255,255,.9); border-radius:18px; box-shadow:0 24px 70px rgba(37,62,51,.22),0 4px 16px rgba(37,62,51,.10); text-align:center; }
.modal.modal-reenter { animation:modal-bg-in .22s ease-out both; }
.modal.modal-reenter .modal-card { animation:modal-in .34s cubic-bezier(.2,.8,.2,1) both; }
.modal.modal-exiting .modal-card { animation:modal-card-out .52s cubic-bezier(.55,.08,.8,.35) both; transform-origin:center; }
.modal.modal-exiting { pointer-events:none; }
.announcement-modal.modal-exiting .modal-card { animation:announcement-card-out .22s ease-in both; transform-origin:center; }
.announcement-modal.modal-exiting { animation:announcement-bg-out .22s ease-in both; }
@keyframes modal-card-out { 0% { opacity:1; transform:rotate(0) scale(1); } 22% { opacity:1; transform:rotate(540deg) scale(1); } 100% { opacity:0; transform:translate(26vw,-24vh) rotate(900deg) scale(.08); } }
@keyframes announcement-card-out { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(.96) translateY(4px); } }
@keyframes announcement-bg-out { from { opacity:1; } to { opacity:0; } }

@media (prefers-reduced-motion:reduce) { .modal.modal-exiting { opacity:0; } }
.modal-mark { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 13px; color:var(--primary-dark); background:var(--primary-soft); border-radius:50%; font-size:26px; font-weight:700; }
.modal-mark.pending { animation:modal-spin 1s linear infinite; }
.modal-mark.success { color:var(--success); background:#e2f3eb; }
.modal-mark.error { color:var(--error); background:#fff0ed; }
.modal-card h2 { margin-bottom:8px; font:600 18px/1.35 "Hanken Grotesk","Microsoft YaHei",sans-serif; }
.modal-card p { min-height:20px; margin-bottom:18px; color:var(--muted); font-size:13px; white-space:pre-line; }
.modal-actions { display:flex; align-items:stretch; gap:10px; }
.modal-actions > button { flex:1; }
.secondary-button { min-height:var(--control-height); display:inline-flex; align-items:center; justify-content:center; gap:var(--icon-gap); padding:10px 18px; color:#58717c; background:var(--surface-soft); border:1px solid var(--line); border-radius:8px; font-weight:600; }
.secondary-button:hover { color:var(--ink); background:var(--surface-muted); }
.modal.hidden { display:none; }
.picker-modal { z-index:30; padding:16px; background:rgba(28,47,39,.38); backdrop-filter:blur(7px); }
.picker-card { width:min(100%,430px); max-height:min(84vh,680px); display:flex; flex-direction:column; padding:0; overflow:hidden; background:linear-gradient(180deg,#fff 0%,#f8faf7 100%); border:1px solid rgba(255,255,255,.88); border-radius:24px; box-shadow:0 26px 80px rgba(37,62,51,.25),0 4px 16px rgba(37,62,51,.12); }
.picker-header { display:flex; align-items:center; justify-content:center; padding:22px 22px 18px; background:linear-gradient(135deg,#f2fcff 0%,#fff 72%); border-bottom:1px solid #dfe9df; text-align:center; }
.picker-heading { min-width:0; }
.picker-heading h2 { margin:0; color:var(--ink); font:700 18px/1.3 "Hanken Grotesk","Microsoft YaHei",sans-serif; letter-spacing:.01em; }
.picker-subtitle { margin:4px 0 0 !important; min-height:0 !important; color:#89a0a9 !important; font-size:11px !important; }
.picker-body { flex:1 1 auto; min-height:0; max-height:min(49vh,390px); margin:0; padding:20px 22px 8px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#c7ddca #f4f8f3; }
.picker-body::-webkit-scrollbar,.time-choice-list::-webkit-scrollbar { width:7px; height:7px; }
.picker-body::-webkit-scrollbar-track,.time-choice-list::-webkit-scrollbar-track { background:#f4f8f3; border-radius:8px; }
.picker-body::-webkit-scrollbar-thumb,.time-choice-list::-webkit-scrollbar-thumb { background:#c7ddca; border:2px solid #f4f8f3; border-radius:8px; }
.picker-body::-webkit-scrollbar-thumb:hover,.time-choice-list::-webkit-scrollbar-thumb:hover { background:#a8cbb8; }
.picker-actions { flex:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; padding:14px 22px 20px; background:rgba(248,252,253,.92); border-top:1px solid #dfe9df; }
.picker-actions > button { min-height:44px; border-radius:13px; }
.picker-actions > .primary-button { width:auto; }
.picker-actions .primary-button { box-shadow:0 7px 16px rgba(63,118,101,.2); }
.picker-actions .secondary-button { background:#fff; }
.time-picker-grid { display:grid; grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr); align-items:center; gap:8px; padding:0 0 8px; }
.time-picker-grid > div { min-width:0; padding:12px 10px 10px; background:#f1f6ef; border:1px solid #e0e8dc; border-radius:17px; }
.picker-column-title { display:flex; align-items:center; justify-content:center; gap:5px; margin:0 0 10px; color:#78939d; font-size:11px; font-weight:600; letter-spacing:.08em; }
.picker-column-title::before { width:4px; height:4px; content:""; background:#78a58e; border-radius:50%; }
.time-choice-list { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; max-height:224px; padding:1px; overflow:auto; }
.time-hour-groups { max-height:224px; overflow:auto; padding-right:2px; }
.time-hour-group + .time-hour-group { margin-top:12px; padding-top:10px; border-top:1px solid #dbe7d9; }
.time-hour-group > strong { display:block; color:#3f7665; font-size:12px; text-align:left; }
.time-hour-group > span { display:block; margin:3px 0 7px; color:#91a19a; font-size:10px; text-align:left; }
.time-hour-group > strong::before { display:inline-block; width:5px; height:5px; margin:0 6px 2px 1px; content:""; background:#78a58e; border-radius:50%; }
.time-hour-group .time-choice-list { max-height:none; overflow:visible; }
.time-choice { appearance:none; -webkit-appearance:none; min-height:39px; padding:7px 2px; color:#607984; background:#fff; border:1px solid #e0e8dc; border-radius:11px; cursor:pointer; font:600 13px/1.2 Inter,"Microsoft YaHei",sans-serif; text-align:center; transition:color .18s,background .18s,border-color .18s,transform .18s,box-shadow .18s; }
.picker-body button.time-choice { appearance:none !important; -webkit-appearance:none !important; min-height:39px !important; padding:7px 2px !important; color:#607984 !important; background:#fff !important; border:1px solid #e0e8dc !important; border-radius:11px !important; font:600 13px/1.2 Inter,"Microsoft YaHei",sans-serif !important; box-shadow:none; }
.time-choice:hover { color:var(--primary-dark); background:#edf5ed; border-color:#a8cbb8; transform:translateY(-1px); }
.time-choice.is-selected { color:#fff; background:linear-gradient(145deg,#4f8b73,#2e5e50); border-color:#2e5e50; box-shadow:0 5px 12px rgba(63,118,101,.25); }
.picker-body button.time-choice.is-selected { color:#fff !important; background:linear-gradient(145deg,#4f8b73,#2e5e50) !important; border-color:#2e5e50 !important; box-shadow:0 5px 12px rgba(63,118,101,.25) !important; }
.time-picker-grid > b { display:grid; place-items:center; padding:12px 0 0; color:#1aa3bb; font-size:25px; }
.outfit-option-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0; }
.outfit-option { appearance:none; -webkit-appearance:none; min-height:50px; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; padding:9px 13px; color:#53675e; background:#f5fafb; border:1px solid #e0e8dc; border-radius:13px; cursor:pointer; font:500 13px/1.25 Inter,"Microsoft YaHei",sans-serif; text-align:left; transition:color .18s,background .18s,border-color .18s,transform .18s,box-shadow .18s; }
.picker-body button.outfit-option { appearance:none !important; -webkit-appearance:none !important; min-height:50px !important; display:grid !important; grid-template-columns:42px minmax(0,1fr) !important; align-items:center !important; gap:10px !important; padding:9px 13px !important; color:#53675e !important; background:#f5fafb !important; border:1px solid #e0e8dc !important; border-radius:13px !important; font:500 13px/1.25 Inter,"Microsoft YaHei",sans-serif !important; box-shadow:none; }
.outfit-option-image { width:42px; min-width:42px; height:42px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#edf9fb,#f8faf7); border:1px solid #d5e6d8; border-radius:10px; pointer-events:none; }
.outfit-option-image img { width:100%; height:100%; object-fit:contain; display:block; }
.outfit-option-image img.outfit-default-portrait-mia,
.outfit-option-image img.outfit-default-portrait-wuxin { width:100%; height:100%; object-fit:contain; object-position:center center; transform:translateY(-5px) scale(.62); transform-origin:center center; }
.outfit-option-avatar { width:100%; height:100%; display:grid; place-items:center; color:#2e5e50; background:linear-gradient(145deg,#dff7fb,#fffaf6); font:700 18px/1 "Microsoft YaHei",sans-serif; }
.outfit-option-image.is-empty { background:linear-gradient(145deg,#f3f8f9,#fbfdfd); }
.outfit-option-image.is-empty::after { content:""; width:8px; height:8px; border:2px solid #cfe0d3; border-radius:50%; }
.outfit-option.outfit-option-no-image { display:flex !important; min-height:50px !important; height:auto !important; align-items:center !important; }
.outfit-option.outfit-option-no-image .outfit-option-name { display:block; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; overflow-wrap:normal; }
.picker-body button.outfit-option.outfit-option-no-image { display:flex !important; grid-template-columns:none !important; align-items:center !important; }
.picker-body button.outfit-option.outfit-option-no-image .outfit-option-name { flex:1 1 auto; min-width:0; display:block !important; overflow:hidden !important; white-space:nowrap !important; text-overflow:ellipsis !important; overflow-wrap:normal; }
.picker-value-content.picker-value-no-image { display:flex; align-items:center; min-height:42px; }
.outfit-option-name { min-width:0; overflow:hidden; display:-webkit-box; line-height:1.35; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.outfit-option:hover { color:var(--primary-dark); background:#edf5ed; border-color:#b6d5c0; transform:translateY(-2px); box-shadow:0 5px 12px rgba(37,62,51,.08); }
.outfit-option.is-selected { color:#2e5e50; background:linear-gradient(135deg,#e4f0e5,#fffaf6); border-color:#9fc5ad; box-shadow:0 6px 15px rgba(63,118,101,.13); font-weight:700; }
.picker-body button.outfit-option.is-selected { color:#2e5e50 !important; background:linear-gradient(135deg,#e4f0e5,#fffaf6) !important; border-color:#9fc5ad !important; box-shadow:0 6px 15px rgba(63,118,101,.13) !important; font-weight:700 !important; }
.option-check { width:21px; min-width:21px; height:21px; flex:none; color:#a8b9ae; font-size:20px; }
.outfit-option.is-selected .option-check { color:#3f7665; }
@media (max-width:480px) { .picker-card { border-radius:20px; } .picker-header { padding:19px 18px 16px; } .picker-body { padding:16px 18px 7px; } .picker-actions { padding:12px 18px 16px; } .outfit-option-list { grid-template-columns:1fr; gap:8px; } .outfit-option { min-height:48px; padding:8px 12px; } .time-field .custom-picker-trigger { width:170px; flex-basis:170px; min-width:140px; } .time-picker-grid { gap:5px; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); } .time-picker-grid > div { padding:10px 7px 8px; } .time-choice-list { gap:5px; } }
.picker-modal.modal-reenter { animation:picker-bg-in .28s cubic-bezier(.2,.8,.2,1) both; }
.picker-modal.modal-reenter .picker-card { animation:picker-card-in .38s cubic-bezier(.18,.82,.24,1) both; }
.picker-modal.modal-exiting .picker-card { animation:picker-card-out .28s cubic-bezier(.55,.08,.8,.35) both; }
@keyframes picker-bg-in { from { opacity:0; } to { opacity:1; } }
@keyframes picker-card-in { from { opacity:0; transform:translateY(18px) scale(.94); } 60% { opacity:1; transform:translateY(-3px) scale(1.01); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes picker-card-out { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(12px) scale(.96); } }
@keyframes modal-bg-in { from { opacity:0; } to { opacity:1; } }
@keyframes modal-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes modal-spin { to { transform:rotate(360deg); } }
@media (max-width:640px) { .workspace { width:calc(100% - 32px); min-height:calc(100vh - 92px); margin:16px auto 76px; } .page-content { padding:18px 16px; } .login-view { min-height:calc(100vh - 40px); padding:20px 16px; } .login-panel { padding:26px 20px; } .bottom-nav { width:100%; } }
@media (max-width:480px) { .employee-list { grid-template-columns:1fr; } .user-card { padding:13px; } .section-title { font-size:18px; } .count-badge { font-size:11px; } .page-top { gap:10px; } .page-top h1 { font-size:22px; } .page-top p { max-width:100%; } .back-link { flex:none; min-height:36px; padding:7px 10px; white-space:nowrap; } }
@media (max-width:480px) { .time-field input { width:120px; } }
@media (max-width:480px) {
  .modal { place-items:center; padding:12px; }
  .modal-card { width:min(100%,350px); max-height:calc(100dvh - 24px); padding:24px 18px 18px; border-radius:18px; }
  .picker-modal { place-items:center; }
  .picker-card { width:100%; max-height:calc(100dvh - 24px); }
  .picker-body { max-height:calc(100dvh - 210px); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* Face decorations use a compact header and a bounded, scrollable list. */
.picker-modal[data-picker-key="head"] .picker-header,
.picker-modal[data-picker-key="face"] .picker-header,
.picker-modal[data-picker-key="cloth"] .picker-header {
  padding:11px 20px 9px;
}
.picker-modal[data-picker-key="head"] .picker-heading h2,
.picker-modal[data-picker-key="face"] .picker-heading h2,
.picker-modal[data-picker-key="cloth"] .picker-heading h2 {
  font-size:17px;
  line-height:1.25;
}
.picker-modal[data-picker-key="head"] .picker-subtitle,
.picker-modal[data-picker-key="face"] .picker-subtitle,
.picker-modal[data-picker-key="cloth"] .picker-subtitle {
  margin-top:3px !important;
  font-size:10px !important;
}
.picker-modal[data-picker-key="head"] .picker-body,
.picker-modal[data-picker-key="face"] .picker-body,
.picker-modal[data-picker-key="cloth"] .picker-body {
  max-height:min(40vh,340px);
}
.picker-modal[data-picker-key="head"] .picker-body,
.picker-modal[data-picker-key="face"] .picker-body,
.picker-modal[data-picker-key="cloth"] .picker-body {
  scrollbar-color:#c7ddca #f4f8f3;
}
.picker-modal[data-picker-key="face"] .picker-header {
  padding:14px 20px 11px;
}
.picker-modal[data-picker-key="face"] .picker-heading h2 {
  font-size:17px;
  line-height:1.25;
}
.picker-modal[data-picker-key="face"] .picker-subtitle {
  margin-top:3px !important;
  font-size:10px !important;
}
.picker-modal[data-picker-key="face"] .picker-body {
  max-height:min(40vh,340px);
  padding-top:12px;
}
@media (max-width:480px) {
  .picker-modal[data-picker-key="head"] .picker-header,
  .picker-modal[data-picker-key="face"] .picker-header,
  .picker-modal[data-picker-key="cloth"] .picker-header {
    padding:10px 18px 8px;
  }
  .picker-modal[data-picker-key="head"] .picker-body,
  .picker-modal[data-picker-key="face"] .picker-body,
  .picker-modal[data-picker-key="cloth"] .picker-body {
    max-height:min(40vh,330px);
  }
  .picker-modal[data-picker-key="face"] .picker-header {
    padding:10px 18px 8px;
  }
  .picker-modal[data-picker-key="face"] .picker-body {
    max-height:min(40vh,330px);
    padding-top:10px;
  }
}

/* Outfit picker options stay in the green workstation palette, including unselected states. */
.picker-modal[data-picker-key="head"] .picker-body button.outfit-option,
.picker-modal[data-picker-key="face"] .picker-body button.outfit-option,
.picker-modal[data-picker-key="cloth"] .picker-body button.outfit-option {
  color:#5d7167 !important;
  background:#f3f7f0 !important;
  border-color:#d6e3d6 !important;
}
.picker-modal[data-picker-key="head"] .picker-body button.outfit-option:hover,
.picker-modal[data-picker-key="face"] .picker-body button.outfit-option:hover,
.picker-modal[data-picker-key="cloth"] .picker-body button.outfit-option:hover {
  color:var(--primary-dark) !important;
  background:#eaf3e9 !important;
  border-color:#a8cbb8 !important;
}
.picker-modal[data-picker-key="head"] .picker-body button.outfit-option.is-selected,
.picker-modal[data-picker-key="face"] .picker-body button.outfit-option.is-selected,
.picker-modal[data-picker-key="cloth"] .picker-body button.outfit-option.is-selected {
  color:var(--primary-dark) !important;
  background:#e4f0e5 !important;
  border-color:#9fc5ad !important;
}
.picker-modal[data-picker-key="head"] .outfit-option-image,
.picker-modal[data-picker-key="face"] .outfit-option-image,
.picker-modal[data-picker-key="cloth"] .outfit-option-image {
  background:#edf4ec;
  border-color:#cfe0d1;
}
.picker-modal[data-picker-key="head"] .outfit-option-image.is-empty,
.picker-modal[data-picker-key="face"] .outfit-option-image.is-empty,
.picker-modal[data-picker-key="cloth"] .outfit-option-image.is-empty {
  background:#f0f5ef;
}
.picker-modal[data-picker-key="head"] .outfit-option-avatar,
.picker-modal[data-picker-key="face"] .outfit-option-avatar,
.picker-modal[data-picker-key="cloth"] .outfit-option-avatar {
  color:var(--primary-dark);
  background:#e8f1e8;
}

/* Keep the picker sections visibly following the rounded dialog frame. */
.picker-card > .picker-header {
  border-radius:22px 22px 0 0;
  background-clip:padding-box;
}
.picker-card > .picker-actions {
  border-radius:0 0 22px 22px;
  background-clip:padding-box;
}
@media (max-width:480px) {
  .picker-card > .picker-header {
    border-radius:14px 14px 0 0;
  }
  .picker-card > .picker-actions {
    border-radius:0 0 14px 14px;
  }
}

.function-item-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* 独立装扮预览 */
.detail-top-actions { display:flex; align-items:center; gap:8px; flex:none; }
.preview-link { min-height:36px; padding:8px 12px; color:#2e5e50; background:#dcebe1; border:1px solid #b9d9c6; border-radius:10px; cursor:pointer; font:600 12px/1.2 Inter,"Microsoft YaHei",sans-serif; transition:transform .2s,background .2s,box-shadow .2s; }
.preview-link:hover { background:#dcebe1; box-shadow:0 5px 12px rgba(63,118,101,.12); transform:translateY(-1px); }
.preview-hero { display:flex; align-items:center; gap:14px; margin:18px 0 14px; padding:16px; background:linear-gradient(135deg,#edf5ed,#fff); border:1px solid #d7e5d8; border-radius:16px; }
.preview-hero-avatar { width:64px; height:64px; flex:none; }
.preview-hero strong,.preview-hero span { display:block; }
.preview-hero strong { color:var(--ink); font-size:18px; }
.preview-hero span { margin-top:5px; color:var(--muted); font-size:12px; }
.preview-insights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(150px,1.5fr); gap:9px; margin-bottom:16px; }
.preview-stat,.preview-trend { min-width:0; padding:12px; background:var(--surface-soft); border:1px solid var(--line); border-radius:13px; }
.preview-stat { text-align:center; }
.preview-stat b,.preview-stat span { display:block; }
.preview-stat b { color:var(--primary-dark); font-size:19px; line-height:1.2; }
.preview-stat span { margin-top:4px; color:var(--muted); font-size:10px; white-space:nowrap; }
.preview-trend { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.preview-trend > div:first-child { flex:0 0 auto; }
.preview-trend strong,.preview-trend small { display:block; }
.preview-trend strong { color:var(--ink); font-size:12px; }
.preview-trend small { margin-top:4px; color:var(--muted); font-size:10px; white-space:nowrap; }
.preview-trend-count { display:block !important; margin-top:0 !important; color:var(--primary-dark) !important; font-size:19px !important; line-height:1.2; font-weight:700; white-space:nowrap; }
.trend-bars { flex:1 1 auto; min-width:0; height:38px; display:flex; align-items:end; justify-content:flex-end; gap:clamp(2px,.6vw,5px); padding:3px 0; }
.trend-bars i { display:block; flex:1 1 0; width:auto; max-width:8px; min-width:2px; min-height:7px; background:linear-gradient(180deg,#6da58b,#3f7665); border-radius:5px 5px 2px 2px; animation:trend-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.trend-bars i:nth-child(2) { animation-delay:.08s; background:linear-gradient(180deg,#8edee8,#36afc5); }
.trend-bars i:nth-child(3) { animation-delay:.16s; background:linear-gradient(180deg,#b4e8ed,#5cc2d2); }
.trend-empty { color:var(--muted); font-size:10px; white-space:nowrap; }
.preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.preview-groups { display:grid; gap:14px; }
.preview-group { padding:14px; background:rgba(255,255,255,.72); border:1px solid #dcebef; border-radius:16px; }
.preview-group-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; padding-bottom:10px; border-bottom:1px solid #e2e9e1; }
.preview-group-heading strong,.preview-group-heading small { display:block; }
.preview-group-heading strong { color:var(--ink); font-size:14px; }
.preview-group-heading small { margin-top:3px; color:var(--muted); font-size:10px; }
.preview-group-heading > span { padding:5px 7px; color:#9a7568; background:#e8f1e8; border-radius:6px; font:600 9px ui-monospace,monospace; letter-spacing:.08em; }
.preview-group .preview-grid { margin:0; }
.preview-skin-card { min-width:0; display:flex; align-items:center; gap:10px; padding:10px; background:#f5f8f2; border:1px solid #e0e8dc; border-radius:13px; animation:preview-card-in .55s cubic-bezier(.2,.8,.2,1) both; }
.preview-skin-card:nth-child(2n) { animation-delay:.05s; }
.preview-skin-card:nth-child(3n) { animation-delay:.1s; }
.preview-skin-image { width:54px; min-width:54px; height:54px; display:grid; place-items:center; overflow:hidden; background:#e8f1e8; border-radius:10px; }
.preview-skin-image img { width:100%; height:100%; object-fit:contain; }
.preview-skin-image.is-empty::after { content:""; width:8px; height:8px; border:2px solid #cfe0d3; border-radius:50%; }
.preview-skin-copy { min-width:0; }
.preview-skin-copy small,.preview-skin-copy strong,.preview-skin-copy em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-skin-copy small { color:#8aa1a9; font-size:10px; }
.preview-skin-category { display:inline-block !important; padding:3px 6px; color:#2e5e50 !important; background:#e8f1e8; border-radius:5px; font-weight:600; }
.preview-skin-copy strong { margin-top:3px; color:var(--ink); font-size:12px; }
.preview-skin-copy em { margin-top:4px; color:#8ca5ad; font:normal 10px ui-monospace,monospace; }
.preview-empty { grid-column:1/-1; padding:28px; color:var(--muted); text-align:center; }
@keyframes preview-card-in { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes trend-rise { from { opacity:0; transform:scaleY(.2); transform-origin:bottom; } to { opacity:1; transform:scaleY(1); transform-origin:bottom; } }
@media (max-width:600px) { .detail-top-actions { gap:5px; } .preview-link { padding:8px 9px; } .preview-insights { grid-template-columns:repeat(3,minmax(0,1fr)); } .preview-trend { grid-column:1/-1; } .preview-grid { grid-template-columns:1fr; } }


@media (max-width:480px) { .overview-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.server-overview { width:min(760px,calc(100% - 32px)); margin:48px auto; padding:28px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 20px 60px rgba(37,62,51,.12); }
.server-overview h1 { margin:20px 0 5px; } .server-overview p { color:var(--muted); }

.dashboard-body { min-height:100vh; margin:0; background:#f4f7fb; color:#1c293b; font-family:Inter,"Microsoft YaHei",sans-serif; }
.dashboard-shell { min-height:100vh; display:flex; }
.dashboard-sidebar { width:232px; flex:none; display:flex; flex-direction:column; padding:27px 17px; color:#d9e3f0; background:linear-gradient(180deg,#111b2b,#0c1422); }
.dashboard-brand { display:flex; align-items:center; gap:11px; padding:0 10px 38px; }.dashboard-brand-mark { width:34px; height:34px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#48b8ff,#6f77ff); border-radius:11px; font-weight:800; box-shadow:0 8px 20px #377fe055; }.dashboard-brand strong,.dashboard-brand small { display:block; }.dashboard-brand strong { color:#fff; font-size:16px; }.dashboard-brand small { margin-top:3px; color:#8292a8; font-size:10px; }
.dashboard-nav { display:grid; gap:8px; }.dashboard-nav a { display:flex; align-items:center; gap:12px; padding:12px 13px; color:#8d9cb0; border-radius:10px; text-decoration:none; font-size:13px; }.dashboard-nav a span { width:18px; text-align:center; font-size:17px; }.dashboard-nav a:hover,.dashboard-nav a.is-active { color:#fff; background:linear-gradient(90deg,#ffffff18,#ffffff08); }.dashboard-nav a.is-active { box-shadow:inset 3px 0 #5abfff; }.dashboard-side-footer { display:flex; align-items:center; gap:8px; margin-top:auto; padding:13px 10px; color:#7d8da2; border-top:1px solid #ffffff12; font-size:11px; }.dashboard-status-dot { width:7px; height:7px; background:#43d49a; border-radius:50%; box-shadow:0 0 0 4px #43d49a1c; }
.dashboard-main { width:min(1280px,100%); box-sizing:border-box; margin:auto; padding:34px 42px 24px; }.dashboard-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }.dashboard-kicker { margin:0 0 9px; color:#8492a6; font:600 10px/1.2 ui-monospace,monospace; letter-spacing:.16em; }.dashboard-header h1 { margin:0; color:#18263a; font-size:28px; }.dashboard-muted { margin:8px 0 0; color:#8693a5; font-size:12px; }.dashboard-user { display:flex; align-items:center; gap:9px; padding:8px 12px 8px 8px; background:#fff; border:1px solid #e5ebf2; border-radius:12px; box-shadow:0 4px 16px #1d385b08; }.dashboard-avatar { width:32px; height:32px; display:grid; place-items:center; color:#fff; background:#536bff; border-radius:10px; }.dashboard-user strong,.dashboard-user small { display:block; }.dashboard-user strong { color:#37475b; font-size:12px; }.dashboard-user small { margin-top:3px; color:#9aa6b6; font-size:10px; }
.dashboard-welcome { position:relative; min-height:112px; display:flex; align-items:center; overflow:hidden; margin:30px 0 18px; padding:20px 26px; color:#fff; background:linear-gradient(105deg,#4057d8,#6676ee 65%,#7586f5); border-radius:18px; box-shadow:0 14px 30px #5369df2e; }.dashboard-welcome h2 { margin:9px 0 6px; font-size:20px; }.dashboard-welcome p { margin:0; color:#dce1ff; font-size:11px; }.dashboard-pill { padding:5px 8px; color:#e6eaff; background:#ffffff20; border:1px solid #ffffff30; border-radius:6px; font:600 9px ui-monospace,monospace; letter-spacing:.1em; }.dashboard-welcome-shape { position:absolute; right:7%; width:145px; height:145px; border:24px solid #ffffff12; border-radius:50%; box-shadow:0 0 0 22px #ffffff08; }
.dashboard-stat-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; }.dashboard-stat { display:flex; align-items:center; gap:12px; min-width:0; padding:17px; background:#fff; border:1px solid #e7edf3; border-radius:14px; box-shadow:0 5px 18px #29436608; }.dashboard-stat-icon { width:38px; height:38px; display:grid; place-items:center; flex:none; border-radius:11px; font-size:20px; }.dashboard-stat-icon.blue { color:#387bff;background:#eaf1ff; }.dashboard-stat-icon.violet { color:#885dff;background:#f0ebff; }.dashboard-stat-icon.orange { color:#f39c37;background:#fff3e5; }.dashboard-stat-icon.green { color:#21b783;background:#e5f8f1; }.dashboard-stat-icon.pink { color:#d95f96;background:#fff0f6; }.dashboard-stat small,.dashboard-stat strong,.dashboard-stat em { display:block; }.dashboard-stat small { color:#8491a3; font-size:11px; }.dashboard-stat strong { margin:4px 0; color:#26374c; font-size:23px; }.dashboard-stat em { color:#a2adba; font:normal 10px sans-serif; }
.dashboard-content-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr); gap:14px; margin-top:16px; }.dashboard-panel { min-width:0; padding:20px; background:#fff; border:1px solid #e7edf3; border-radius:14px; box-shadow:0 5px 18px #29436608; }.dashboard-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.dashboard-panel h3 { margin:0; color:#334459; font-size:14px; }.dashboard-panel p { margin:5px 0 0; color:#9ba7b5; font-size:10px; }.dashboard-panel-badge { padding:5px 8px; color:#6073dd; background:#eff1ff; border-radius:6px; font-size:10px; }.dashboard-chart { height:205px; display:flex; align-items:end; gap:10px; margin-top:22px; padding:0 4px 2px; border-bottom:1px solid #edf1f5; }.dashboard-bar-wrap { height:100%; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:end; gap:6px; min-width:0; }.dashboard-bar-wrap strong { color:#748399; font-size:10px; }.dashboard-bar-wrap i { width:min(22px,70%); min-height:8px; background:linear-gradient(180deg,#7183ff,#4a61dc); border-radius:7px 7px 2px 2px; animation:dashboard-rise .65s cubic-bezier(.2,.8,.2,1) both; }.dashboard-bar-wrap small { color:#9ba7b5; font-size:9px; }.dashboard-action-list { display:grid; gap:2px; margin-top:21px; }.dashboard-action-list div { display:flex; justify-content:space-between; gap:10px; padding:10px 4px; border-bottom:1px solid #eef2f6; }.dashboard-action-list span { overflow:hidden; color:#708095; font:11px ui-monospace,monospace; text-overflow:ellipsis; white-space:nowrap; }.dashboard-action-list strong { color:#354760; font-size:12px; }.dashboard-empty { padding:50px 0; text-align:center; }.dashboard-footer { display:flex; justify-content:space-between; margin-top:18px; color:#a2adba; font-size:10px; }.dashboard-footer a { color:#6374d9; text-decoration:none; }
.dashboard-role-grid { margin-top:14px; }.dashboard-role-list { display:grid; gap:11px; margin-top:20px; max-height:300px; overflow:auto; padding-right:3px; }.dashboard-role-row { cursor:default; }.dashboard-role-label { display:flex; justify-content:space-between; gap:10px; color:#65758a; font-size:11px; }.dashboard-role-label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.dashboard-role-label strong { color:#354760; font-size:12px; }.dashboard-role-detail { display:grid; grid-template-columns:minmax(0,1fr) 82px; align-items:center; gap:10px; }.dashboard-role-track { height:7px; margin-top:6px; overflow:hidden; background:#edf2f7; border-radius:99px; }.dashboard-role-track i { display:block; height:100%; min-width:4px; background:linear-gradient(90deg,#5bc5d8,#536df0); border-radius:inherit; transition:width .35s ease; }.dashboard-role-spark { height:18px; display:flex; align-items:end; gap:2px; border-bottom:1px solid #edf2f7; }.dashboard-role-spark i { flex:1; min-height:2px; background:#7c8df1; border-radius:2px 2px 0 0; cursor:help; }.dashboard-role-row:hover .dashboard-role-track i,.dashboard-role-row:hover .dashboard-role-spark i { filter:brightness(1.08); }.dashboard-role-trend .dashboard-bar-wrap { cursor:help; }
@keyframes dashboard-rise { from { opacity:0; transform:scaleY(.12); transform-origin:bottom; } to { opacity:1; transform:scaleY(1); transform-origin:bottom; } }
@media (max-width:800px) { .dashboard-sidebar { width:58px; padding:20px 8px; }.dashboard-brand { justify-content:center; padding:0 0 30px; }.dashboard-brand > span:last-child,.dashboard-nav a:not(.is-active)::after,.dashboard-nav a { font-size:0; }.dashboard-nav a { justify-content:center; padding:12px 0; }.dashboard-nav a span { font-size:17px; }.dashboard-side-footer { justify-content:center; padding:13px 0; font-size:0; }.dashboard-main { padding:24px 18px; }.dashboard-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-content-grid { grid-template-columns:1fr; } }
@media (max-width:480px) { .dashboard-header { display:block; }.dashboard-user { width:max-content; margin-top:15px; }.dashboard-welcome { margin-top:20px; padding:18px; }.dashboard-welcome-shape { right:-55px; }.dashboard-stat { padding:13px 10px; }.dashboard-stat-icon { width:32px; height:32px; }.dashboard-stat strong { font-size:19px; }.dashboard-chart { gap:4px; }.dashboard-bar-wrap i { width:13px; } }
/* mutual query refinement */
.mutual-page .page-top { margin-bottom:16px; }
.mutual-toolbar { padding:16px 18px; border-radius:14px; background:linear-gradient(135deg,#ffffff 0%,#f4fbfd 100%); }
.mutual-toolbar .signature-label strong { color:var(--ink); font-size:14px; }
.mutual-toolbar .checkin-summary { margin-bottom:0; }
.mutual-result { padding:16px; border:1px solid #e0e8dc; border-radius:14px; background:rgba(255,255,255,.72); box-shadow:var(--shadow); }
.mutual-result-heading { margin-bottom:14px; }
.mutual-result-heading h2 { font-size:18px; }
.mutual-list { max-height:560px; padding:3px 3px 2px 0; }
.mutual-user-card { box-sizing:border-box; cursor:pointer; min-height:68px; border-color:#d9e7dc; box-shadow:0 3px 12px rgba(37,62,51,.035); transition:border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.mutual-user-card:hover { transform:none; border-color:#8fbea0; box-shadow:0 7px 18px rgba(37,62,51,.09); }
.mutual-user-card:focus-visible { outline:3px solid rgba(63,118,101,.22); outline-offset:2px; }
.mutual-user-card.is-selected { border-color:#8fbea0; background:#edf5ed; box-shadow:0 5px 16px rgba(63,118,101,.12); }
.mutual-user-card.is-selected .mutual-select > span { border-color:var(--primary); background:var(--primary); box-shadow:inset 0 0 0 3px #fff; }
.mutual-user-copy small { font-variant-numeric:tabular-nums; }
@media (max-width:560px) { .mutual-result { padding:12px; } .mutual-toolbar { padding:14px; } .mutual-user-copy small { font-size:9px; } }
/* mutual layout and controls */
.mutual-result:empty { display:none; }
.mutual-result:not(:empty) { display:block; }
.mutual-result-heading { align-items:center; padding:0 2px 2px; }
.mutual-actions { flex-wrap:wrap; justify-content:flex-end; }
.mutual-check-all { min-width:64px; min-height:34px; justify-content:center; padding:0 10px; border:1px solid #d4e1d4; border-radius:9px; background:#f5f8f2; color:#63756b; white-space:nowrap; }
.mutual-check-all:hover { background:#edf5ed; border-color:#b6d5c0; }
.mutual-actions .secondary-button { width:112px; min-width:112px; flex:0 0 112px; justify-content:center; border-radius:9px; text-align:center; white-space:nowrap; }
.mutual-actions .secondary-button:disabled { color:#9aadb4; background:#f3f7f8; border-color:#e1eaed; opacity:1; }
.mutual-user-card { user-select:none; }
.mutual-select { display:grid; place-items:center; min-height:32px; }
@media (max-width:560px) { .mutual-result-heading { gap:10px; } .mutual-actions { width:100%; justify-content:stretch; } .mutual-check-all,.mutual-actions .secondary-button { flex:1 1 0; width:auto; min-width:0; justify-content:center; } }
.mutual-user-copy strong { display:flex; align-items:center; gap:8px; min-width:0; }
.mutual-user-copy strong em { flex:none; color:#71827a; font-size:10px; font-style:normal; font-weight:500; white-space:nowrap; }
.mutual-user-copy small { margin-top:6px; }

.mutual-user-copy strong em { display:inline-flex; align-items:center; gap:4px; }
.mutual-copy-account { display:inline-grid; place-items:center; width:20px; height:20px; padding:0; color:#71827a; background:transparent; border:0; border-radius:5px; cursor:pointer; }
.mutual-copy-account:hover { color:var(--primary); background:#edf5ed; }
.mutual-copy-account .material-symbols { font-size:14px; }
.mutual-unfollow-button { min-width:62px; justify-content:center; border-radius:9px; }
@media (max-width:560px) { .mutual-unfollow-button { min-width:58px; padding-inline:8px; } }

/* activity reward card */
.activity-reward-card { padding:20px; background:var(--surface); border:1px solid #e0e8dc; border-radius:8px; box-shadow:var(--shadow); }
.activity-reward-heading { display:flex; align-items:center; gap:var(--icon-gap); color:#587083; font-size:14px; font-weight:600; }
.activity-reward-heading .material-symbols { color:var(--primary-dark); font-size:20px; }
.activity-reward-description { margin:10px 0 36px; color:#7892a0; font-size:11px; line-height:1.5; }
.activity-reward-button { width:100%; min-height:48px; margin:0; justify-content:center; border-radius:8px; font-size:13px; font-weight:600; }
.activity-reward-button .material-symbols { font-size:19px; }
@media (max-width:560px) { .activity-reward-card { padding:18px 16px; } .activity-reward-description { margin-bottom:30px; } }

/* mutual query card */
.mutual-query-card { padding:20px; background:var(--surface); border:1px solid #e0e8dc; border-radius:8px; box-shadow:var(--shadow); }
.mutual-query-heading { display:flex; align-items:center; gap:var(--icon-gap); color:#587083; font-size:14px; font-weight:600; }
.mutual-query-heading .material-symbols { color:var(--primary-dark); font-size:20px; }
.mutual-query-description { margin:10px 0 36px; color:#7892a0; font-size:11px; line-height:1.5; }
.mutual-query-button { width:100%; min-height:48px; margin:0; justify-content:center; border-radius:8px; font-size:13px; font-weight:600; }
.mutual-query-button .material-symbols { font-size:19px; }
.mutual-secondary-field { display:block; margin:0 0 14px; }
.mutual-secondary-field span { display:block; margin-bottom:8px; color:#587083; font-size:12px; font-weight:600; }
.mutual-secondary-field input { width:100%; height:42px; padding:0 12px; color:var(--ink); background:var(--surface-soft); border:1px solid var(--line); border-radius:8px; outline:0; }
.mutual-secondary-field input:focus { background:var(--surface); border-color:var(--primary); box-shadow:0 0 0 3px rgba(63,118,101,.13); }
@media (max-width:560px) { .mutual-query-card { padding:18px 16px; } .mutual-query-description { margin-bottom:30px; } }
.mutual-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.mutual-stat { min-width:0; padding:13px 14px; border:1px solid #dfeef1; border-radius:12px; background:linear-gradient(145deg,#fff,#f4f8f3); }
.mutual-stat span,.mutual-stat small { display:block; color:#78929d; font-size:10px; }
.mutual-stat strong { display:block; margin:3px 0 2px; color:var(--primary-dark); font-size:25px; line-height:1.05; font-variant-numeric:tabular-nums; }
.mutual-stat-wide small { margin-top:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.5; }
@media (max-width:560px) { .mutual-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .mutual-stat-wide { grid-column:1/-1; } }
.dashboard-single-grid { grid-template-columns:minmax(0,1fr); }
.dashboard-single-grid .dashboard-panel { min-height:0; }
.dashboard-single-grid .dashboard-chart { height:150px; margin-top:16px; }
.dashboard-unfollow-layout { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:20px; align-items:stretch; }
.dashboard-unfollow-trend { min-width:0; max-height:230px; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; scrollbar-width:thin; }
.dashboard-unfollow-trend .dashboard-bar-wrap { min-width:34px; }
.dashboard-unfollow-accounts { display:grid; align-content:start; gap:9px; max-height:230px; overflow-y:auto; padding:12px; background:#f7f9fc; border:1px solid #e5ebf2; border-radius:12px; scrollbar-width:thin; }
.dashboard-unfollow-accounts > strong { color:#526278; font-size:12px; }
.dashboard-unfollow-accounts > div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; color:#617187; background:#fff; border:1px solid #edf0f5; border-radius:8px; font-size:11px; }
.dashboard-unfollow-accounts b { color:#536bff; font-size:13px; font-variant-numeric:tabular-nums; }
.dashboard-unfollow-accounts small { color:#9aa6b6; font-size:11px; }
@media (max-width:760px) { .dashboard-unfollow-layout { grid-template-columns:1fr; gap:14px; } .dashboard-unfollow-accounts { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-unfollow-accounts > strong,.dashboard-unfollow-accounts > small { grid-column:1/-1; } }
@media (max-width:420px) { .dashboard-unfollow-accounts { grid-template-columns:1fr; } }
.dashboard-recent-grid { margin-top:14px; }
.dashboard-recent-list { display:grid; gap:7px; max-height:340px; overflow-y:auto; margin-top:16px; padding-right:4px; scrollbar-width:thin; }
.dashboard-recent-row { display:grid; grid-template-columns:92px 78px minmax(0,1fr); align-items:center; gap:10px; min-height:40px; padding:8px 10px; color:#6d7b8d; background:#f8fafc; border:1px solid #e9eef4; border-radius:9px; font-size:11px; }
.dashboard-recent-row time { color:#98a3b1; font:10px ui-monospace,monospace; }
.dashboard-recent-row strong { overflow:hidden; color:#405168; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-recent-row span { overflow:hidden; color:#718096; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:560px) { .dashboard-recent-row { grid-template-columns:82px 62px minmax(0,1fr); gap:7px; padding-inline:8px; font-size:10px; } .dashboard-recent-row time { font-size:9px; } }

/* Premium workstation layer — intentionally overrides the legacy token layer without
   changing the markup or behavior of the existing routes. */
:root {
  color-scheme: light;
  --page:#f5f6f2; --surface:#fffefa; --surface-soft:#f0f3ed; --surface-muted:#e6ece2;
  --primary:#3f7665; --primary-dark:#2e5e50; --primary-soft:#dcebe1;
  --ink:#24332f; --muted:#75837c; --line:#dce4da; --success:#3c8062; --error:#b85e58;
  --shadow:0 18px 44px rgba(37,62,51,.08); --control-height:48px;
}
html { background:var(--page); scroll-behavior:smooth; }
body { min-height:100dvh; color:var(--ink); background:
  radial-gradient(circle at 8% 0%, rgba(214,232,218,.65), transparent 28rem),
  radial-gradient(circle at 95% 12%, rgba(241,224,204,.38), transparent 24rem), var(--page);
  font-family:"Hanken Grotesk","PingFang SC","Microsoft YaHei",sans-serif; }
body::before { position:fixed; inset:0; z-index:-1; opacity:.28; pointer-events:none; content:"";
  background-image:radial-gradient(rgba(47,76,62,.08) .6px,transparent .6px); background-size:7px 7px; }
button,input,select,textarea { font-family:inherit; }
:focus-visible { outline:3px solid rgba(63,118,101,.28); outline-offset:3px; }
.page-content:focus,
.page-content:focus-visible,
.workspace:focus,
.workspace:focus-visible,
.route-panel:focus,
.route-panel:focus-visible { outline:none; }
.workspace { width:min(1120px,calc(100% - 48px)); min-height:calc(100dvh - 128px); margin:32px auto 96px; }
.page-content { padding:28px 34px 44px; }
.login-view { min-height:100dvh; padding:32px 20px; position:relative; overflow:hidden; }
.login-view::before { position:absolute; width:420px; height:420px; border:1px solid rgba(63,118,101,.12); border-radius:50%; content:""; transform:translate(190px,-150px); }
.login-panel { position:relative; width:min(100%,468px); padding:42px; background:rgba(255,254,250,.9); border:1px solid rgba(255,255,255,.9); border-radius:26px; box-shadow:var(--shadow),0 2px 0 rgba(255,255,255,.8) inset; backdrop-filter:blur(14px); }
.login-home-link { display:inline-flex; align-items:center; gap:7px; margin-bottom:30px; color:var(--primary-dark); font-size:12px; font-weight:600; text-decoration:none; transition:color .2s,transform .2s; }
.login-home-link span:first-child { color:#7b9b64; font-size:17px; line-height:1; transition:transform .2s; }
.login-home-link:hover { color:var(--ink); transform:translateX(-2px); }
.login-home-link:hover span:first-child { transform:translateX(-3px); }
.login-heading { margin-bottom:34px; text-align:left; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; color:var(--primary-dark); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow::before { width:24px; height:2px; background:var(--primary); content:""; }
.login-heading h1 { margin-bottom:10px; color:var(--ink); font-size:34px; letter-spacing:-.04em; }
.login-heading p { max-width:30rem; color:var(--muted); line-height:1.7; }
.input-field { margin-bottom:20px; color:#56665e; font-size:12px; }
.input-field > span:first-child { margin-bottom:8px; letter-spacing:.02em; }
.input-wrap input { height:52px; background:#f8faf6; border-color:var(--line); border-radius:13px; }
.input-wrap input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(63,118,101,.12); }
.primary-button { min-height:52px; color:#fff; background:var(--primary); border-radius:13px; box-shadow:0 10px 22px rgba(63,118,101,.2); transition:transform .22s,background .22s,box-shadow .22s; }
.primary-button:hover { background:var(--primary-dark); box-shadow:0 13px 26px rgba(63,118,101,.25); transform:translateY(-1px); }
.primary-button:active { transform:translateY(1px) scale(.99); }
.secondary-button { border-radius:13px; background:var(--surface-soft); border-color:var(--line); }
.user-card { min-height:84px; margin-bottom:24px; padding:16px 18px; background:rgba(255,254,250,.82); border:1px solid rgba(220,228,218,.9); border-radius:18px; box-shadow:0 8px 24px rgba(37,62,51,.045); }
.avatar { border-color:#fff; box-shadow:0 0 0 1px #c8d8cc; }
.section-heading { min-height:68px; margin-bottom:16px; padding:0 20px; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; }
.section-title { color:var(--ink); font-size:22px; letter-spacing:-.02em; }
.section-title .material-symbols { color:var(--primary); }
.count-badge { color:var(--primary-dark); background:var(--primary-soft); border:0; border-radius:8px; }
.employee-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.employee-row { min-height:102px; padding:16px; background:rgba(255,254,250,.72); border:1px solid transparent; border-radius:18px; box-shadow:0 7px 18px rgba(37,62,51,.035); transition:transform .24s,background .24s,border-color .24s,box-shadow .24s; }
.employee-row:hover { background:var(--surface); border-color:#c7d9cb; box-shadow:0 14px 28px rgba(37,62,51,.1); transform:translateY(-3px); }
.employee-name { font-size:17px; }
.employee-arrow { background:var(--primary-soft); color:var(--primary-dark); }
.bottom-nav { height:72px; padding-bottom:max(6px,env(safe-area-inset-bottom)); background:rgba(255,254,250,.92); border-top:1px solid var(--line); box-shadow:0 -10px 32px rgba(37,62,51,.08); backdrop-filter:blur(16px); }
.nav-item { min-height:56px; color:#8a958e; }
.nav-item.active { color:var(--primary-dark); }
.nav-item.active::after { bottom:1px; width:26px; height:3px; background:var(--primary); }
.page-top { margin-bottom:24px; }
.page-top h1 { font-size:29px; letter-spacing:-.04em; }
.page-top p { margin-top:7px; font-size:13px; }
.detail-page { width:min(100%,760px); }
.detail-identity,.preview-hero { padding:20px; background:linear-gradient(135deg,#edf4eb,#fffefa); border:1px solid var(--line); border-radius:20px; }
.selector-stack { gap:14px; }
.selector-card,.signature-query,.signature-result,.activity-reward-card,.mutual-query-card,.my-card { padding:22px; background:rgba(255,254,250,.85); border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 24px rgba(37,62,51,.045); }
.select-wrap select,.custom-picker-trigger,.signature-field input,.mutual-secondary-field input { height:50px; background:#f7faf5; border-color:var(--line); border-radius:12px; }
.function-list { gap:12px; margin-top:12px; }
.function-item { min-height:80px; padding:16px 18px; background:rgba(255,254,250,.78); border:1px solid transparent; border-radius:18px; box-shadow:0 7px 18px rgba(37,62,51,.035); transition:transform .22s,border-color .22s,background .22s; }
.function-item:hover { background:var(--surface); border-color:#c7d9cb; transform:translateX(3px); }
.function-icon { color:var(--primary-dark); background:var(--primary-soft); border-radius:12px; }
.function-copy strong { color:var(--ink); font-size:15px; }
.function-copy small { color:var(--muted); }
.preview-groups { gap:16px; }
.preview-group { padding:18px; background:rgba(255,254,250,.78); border-color:var(--line); border-radius:18px; }
.preview-skin-card,.popular-outfit-option { background:#f5f8f2; border-color:#e0e8dc; border-radius:14px; }
.modal { background:rgba(28,47,39,.34); }
.modal-card { border-radius:22px; }
.picker-card { border-radius:22px; background:var(--surface); }
.picker-header { background:#f1f6ee; border-color:var(--line); }
.time-choice.is-selected { color:#fff; background:var(--primary); border-color:var(--primary); box-shadow:0 6px 14px rgba(63,118,101,.22); }
@media (min-width:900px) { .bottom-nav { width:min(620px,calc(100% - 32px)); right:50%; left:auto; border:1px solid var(--line); border-bottom:0; border-radius:20px 20px 0 0; transform:translateX(50%); } .bottom-nav.nav-collapsed { transform:translate(50%,100%); } }
@media (max-width:900px) { .employee-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .workspace { width:calc(100% - 24px); min-height:calc(100dvh - 104px); margin:12px auto 88px; } .page-content { padding:20px 12px 30px; } .login-panel { padding:30px 22px; border-radius:22px; } .login-heading h1 { font-size:30px; } .employee-list { grid-template-columns:1fr; } .section-heading { padding:0 4px; } .function-item { min-height:72px; padding:14px; } .selector-card,.signature-query,.signature-result,.activity-reward-card,.mutual-query-card,.my-card { padding:17px 15px; } }

.captcha-control { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.captcha-control input { min-width:0; }
.captcha-control img { grid-column:1 / -1; width:150px; height:52px; border:1px solid var(--line); border-radius:8px; cursor:pointer; object-fit:cover; }
.captcha-refresh { min-height:42px; padding:0 12px; color:var(--primary-dark); background:transparent; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.captcha-refresh:hover { background:var(--surface-muted); }
.captcha-field small { color:var(--muted); font-size:11px; line-height:1.5; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Route entry: clearly visible without making the workstation feel slow. */
.page-content.page-transition .route-panel {
  animation:route-panel-enter .52s cubic-bezier(.22,.72,.28,1) both;
  will-change:opacity,transform;
}
.page-content.page-transition .route-panel > * {
  animation:route-section-enter .42s cubic-bezier(.22,.72,.28,1) both;
}
.page-content.page-transition .route-panel > *:nth-child(2) { animation-delay:.045s; }
.page-content.page-transition .route-panel > *:nth-child(3) { animation-delay:.09s; }
.page-content.page-transition .route-panel > *:nth-child(4) { animation-delay:.135s; }
@keyframes route-panel-enter {
  from { opacity:0; transform:translate3d(0,14px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes route-section-enter {
  from { opacity:0; transform:translate3d(0,8px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
@media (prefers-reduced-motion:reduce) {
  .page-content.page-transition .route-panel,
  .page-content.page-transition .route-panel > * { animation:none; }
}

/* Site announcement */
.announcement-card { width:min(100%,430px); padding:24px 24px 20px; text-align:left; }
.announcement-mark { width:42px; height:42px; display:grid; place-items:center; margin:0 auto 12px; color:var(--primary-dark); background:var(--primary-soft); border-radius:12px; font-size:22px; }
.announcement-card h2 { margin-bottom:10px; text-align:center; }
.announcement-card p { min-height:0; margin:0 0 22px; padding:14px 15px; color:var(--ink); background:var(--surface-soft); border:1px solid var(--line); border-radius:10px; font-size:13px; line-height:1.75; white-space:pre-line; }
.announcement-tag { display:inline-block; margin:0 2px; padding:1px 7px; color:#39705e; background:#e5f0e6; border:1px solid #cfe1d2; border-radius:4px; font-size:12px; font-weight:700; line-height:1.45; vertical-align:baseline; }
.announcement-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.announcement-actions > button { width:100%; min-width:0; min-height:46px; padding:10px 12px; border-radius:10px; }
.announcement-actions .secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.announcement-actions .secondary-button .material-symbols { flex:none; font-size:18px; }
.announcement-actions .primary-button { box-shadow:0 7px 16px rgba(63,118,101,.16); }
@media (max-width:420px) {
  .announcement-actions { grid-template-columns:1fr; }
}
.announcement-modal { z-index:40; }

/* Admin announcement editor */
.dashboard-announcement-grid { margin-top:16px; }
.dashboard-announcement-panel { border-color:#dfe8dc; }
.dashboard-announcement-form { display:grid; gap:12px; margin-top:18px; }
.dashboard-announcement-form label:not(.dashboard-check) { display:grid; gap:6px; color:#65758a; font-size:11px; }
.dashboard-announcement-form input:not([type="checkbox"]),.dashboard-announcement-form textarea { width:100%; padding:10px 11px; color:#334459; background:#fbfcfe; border:1px solid #e5ebf2; border-radius:9px; outline:0; font:inherit; font-size:12px; resize:vertical; }
.dashboard-announcement-form input:focus,.dashboard-announcement-form textarea:focus { border-color:#9fc5ad; box-shadow:0 0 0 3px rgba(63,118,101,.12); }
.dashboard-check { display:flex; align-items:center; gap:8px; color:#526278; font-size:12px; }
.dashboard-check input { width:16px; height:16px; accent-color:var(--primary); }
.dashboard-save-button { min-height:42px; padding:9px 16px; color:#fff; background:var(--primary); border:0; border-radius:9px; font-size:12px; font-weight:600; cursor:pointer; }
.dashboard-save-button:hover { background:var(--primary-dark); }
.dashboard-form-notice { margin:14px 0 0; padding:9px 11px; border-radius:8px; font-size:11px; }
.dashboard-form-notice.is-success { color:#2f6c50; background:#e8f4e9; }
.dashboard-form-notice.is-error { color:#9b4c49; background:#fff0ed; }

/* Public website. The homepage uses the same green identity as the workstation,
   with a sharper editorial layout so the product and its real character assets
   are clear before login. */
.home-shell { color:#1e302b; background:#eef2eb; font-family:"Hanken Grotesk","PingFang SC","Microsoft YaHei",sans-serif; }
.home-shell::before { display:none; }
.home-shell a { color:inherit; text-decoration:none; }
.home-page { width:min(1440px,100%); margin:0 auto; overflow:hidden; background:#eef2eb; }
.home-header { width:min(1240px,calc(100% - 96px)); min-height:88px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:28px; border-bottom:1px solid rgba(30,48,43,.16); }
.home-brand { display:inline-flex; align-items:center; gap:10px; color:#1e302b; font-size:18px; line-height:1; white-space:nowrap; }
.home-brand strong { font-weight:700; }
.home-brand em { margin-left:3px; color:#6a8178; font:500 15px/1 Inter,sans-serif; font-style:normal; letter-spacing:.02em; }
.home-brand-mark { width:28px; height:28px; display:inline-flex; align-items:flex-end; gap:3px; padding:5px; background:#1e302b; border-radius:8px 8px 8px 2px; transform:rotate(-7deg); }
.home-brand-mark span { width:4px; display:block; background:#c7ec8e; border-radius:3px 3px 1px 1px; }
.home-brand-mark span:nth-child(1) { height:9px; }
.home-brand-mark span:nth-child(2) { height:14px; }
.home-brand-mark span:nth-child(3) { height:7px; }
.home-nav { display:flex; align-items:center; gap:34px; margin-left:auto; color:#597069; font-size:12px; }
.home-nav a { position:relative; padding:34px 0 30px; transition:color .2s ease; }
.home-nav a::after { position:absolute; right:0; bottom:24px; left:0; height:2px; background:#1e302b; content:""; transform:scaleX(0); transform-origin:right; transition:transform .24s ease; }
.home-nav a:hover { color:#1e302b; }
.home-nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.home-login-link { display:inline-flex; align-items:center; gap:8px; padding:11px 0 11px 18px; color:#1e302b; border-left:1px solid rgba(30,48,43,.2); font-size:12px; font-weight:700; }
.home-login-link span,.home-detail-link span,.home-primary-action span { color:#6d8b57; font-size:17px; line-height:1; transition:transform .2s ease; }
.home-login-link:hover span,.home-detail-link:hover span,.home-primary-action:hover span { transform:translate(3px,-2px); }
.home-menu-button { display:none; width:40px; height:40px; padding:10px; background:transparent; border:1px solid rgba(30,48,43,.24); border-radius:6px; }
.home-menu-button span { display:block; height:1px; margin:5px 0; background:#1e302b; transition:transform .2s ease; }
.home-hero { width:min(1240px,calc(100% - 96px)); min-height:620px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.94fr); align-items:center; gap:8%; padding:70px 0 76px; }
.home-hero-copy { max-width:590px; padding:18px 0 18px 4px; animation:home-copy-in .75s cubic-bezier(.2,.8,.2,1) both; }
.home-kicker,.home-section-label { display:flex; align-items:center; gap:9px; margin:0 0 24px; color:#5b796c; font:700 10px/1 Inter,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.home-kicker span { width:28px; height:2px; background:#91ba65; }
.home-hero h1 { max-width:650px; margin:0; color:#1e302b; font-size:clamp(42px,5.25vw,78px); font-weight:500; line-height:1.06; letter-spacing:0; }
.home-hero h1 strong { color:#6f9255; font-weight:500; }
.home-hero-description { max-width:470px; margin:30px 0 0; color:#60736c; font-size:14px; line-height:1.9; }
.home-hero-actions { display:flex; align-items:center; gap:26px; margin-top:35px; }
.home-primary-action { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:22px; padding:0 18px 0 21px; color:#f7fbf4 !important; background:#1e302b; border:1px solid #1e302b; border-radius:7px; box-shadow:5px 5px 0 #bddb9a; font-size:12px; font-weight:700; transition:background .2s ease,transform .2s ease,box-shadow .2s ease; }
.home-primary-action span { color:#c7ec8e; }
.home-primary-action:hover { background:#30483e; box-shadow:3px 3px 0 #bddb9a; transform:translate(2px,2px); }
.home-text-action { display:inline-flex; align-items:center; gap:11px; color:#47645a !important; font-size:12px; font-weight:700; }
.home-text-action span { color:#7a9d60; font-size:17px; transition:transform .2s ease; }
.home-text-action:hover span { transform:translateY(3px); }
.home-hero-proof { display:flex; align-items:center; gap:13px; margin-top:52px; }
.home-proof-avatars { display:flex; align-items:center; padding-left:8px; }
.home-proof-avatars img,.home-proof-avatars span { width:32px; height:32px; margin-left:-8px; object-fit:contain; object-position:center bottom; background:#d3e4c8; border:2px solid #eef2eb; border-radius:50%; }
.home-proof-avatars span { display:grid; place-items:center; color:#496257; font:700 9px Inter,sans-serif; background:#dbe9d3; }
.home-hero-proof p { margin:0; color:#82918b; font-size:10px; line-height:1.5; }
.home-hero-proof strong { color:#496257; font-size:11px; }
.home-hero-stage { width:100%; max-width:535px; justify-self:end; padding:18px 20px 15px; color:#edf6e4; background:#243a31; box-shadow:20px 20px 0 #d2e3c6; transform:rotate(1.5deg); animation:home-stage-in .9s .12s cubic-bezier(.2,.8,.2,1) both; }
.home-stage-heading,.home-stage-footer { display:flex; align-items:center; gap:12px; color:#9caf9d; font:700 9px/1 Inter,sans-serif; letter-spacing:.1em; }
.home-stage-heading { justify-content:space-between; padding-bottom:13px; border-bottom:1px solid rgba(207,237,184,.2); }
.home-stage-heading span:last-child { color:#c7ec8e; }
.home-stage-art { position:relative; height:445px; overflow:hidden; display:grid; place-items:center; background:#345146; }
.home-stage-art::before { position:absolute; inset:21px; border:1px solid rgba(202,237,184,.32); content:""; }
.home-stage-art::after { position:absolute; right:21px; bottom:21px; left:21px; height:1px; background:rgba(202,237,184,.23); content:""; }
.home-stage-orbit { position:absolute; border:1px solid rgba(205,235,187,.4); border-radius:50%; transform:rotate(-22deg); }
.home-stage-orbit-one { width:360px; height:190px; }
.home-stage-orbit-two { width:480px; height:280px; border-color:rgba(205,235,187,.17); transform:rotate(24deg); }
.home-stage-stamp { position:absolute; top:42px; left:38px; z-index:2; color:#c7ec8e; font:700 10px/1.3 Inter,sans-serif; letter-spacing:.15em; }
.home-stage-outfit { position:relative; z-index:1; width:min(88%,410px); height:390px; object-fit:contain; object-position:center; filter:drop-shadow(0 18px 20px rgba(9,23,18,.3)); transition:opacity .16s ease,transform .16s ease; }
.home-stage-outfit.is-changing,.home-role-portrait.is-changing { opacity:0; transform:translateY(10px) scale(.97); }
.home-stage-caption { position:absolute; right:35px; bottom:31px; z-index:2; display:flex; align-items:flex-end; gap:8px; }
.home-stage-caption span { color:#edf6e4; font-size:24px; font-weight:500; }
.home-stage-caption small { color:#bdd4ad; font-size:10px; }
.home-stage-footer { padding-top:14px; }
.home-stage-footer strong { color:#ecf5e6; font-weight:500; }
.home-stage-line { height:1px; flex:1; background:rgba(207,237,184,.25); }
.home-stats-band { width:min(1240px,calc(100% - 96px)); min-height:108px; margin:0 auto; display:grid; grid-template-columns:145px 145px 190px 1fr; align-items:center; gap:20px; border-top:1px solid rgba(30,48,43,.18); border-bottom:1px solid rgba(30,48,43,.18); opacity:0; transform:translateY(14px); transition:opacity .65s ease,transform .65s ease; }
.home-stats-band.is-visible { opacity:1; transform:none; }
.home-stat { display:flex; flex-direction:column; gap:2px; padding-right:20px; border-right:1px solid rgba(30,48,43,.17); }
.home-stat strong { color:#344e42; font-size:28px; font-weight:500; line-height:1; }
.home-stat span { color:#7d8e86; font-size:10px; }
.home-stat-wide { position:relative; }
.home-stat-wide i { position:absolute; right:20px; top:0; padding:4px 6px; color:#66864f; background:#d7eac4; font:700 8px Inter,sans-serif; font-style:normal; letter-spacing:.07em; text-transform:uppercase; }
.home-stats-band > p { justify-self:end; margin:0; color:#657970; font-size:12px; line-height:1.65; text-align:right; }
.home-section { width:min(1240px,calc(100% - 96px)); margin:0 auto; opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }
.home-section.is-visible { opacity:1; transform:none; }
.home-section-label { justify-content:space-between; width:max-content; min-width:116px; margin-bottom:22px; color:#6f8e60; }
.home-section-label span { color:#94a39c; font:500 9px Inter,sans-serif; letter-spacing:.08em; }
.home-section h2 { margin:0; color:#243a31; font-size:clamp(30px,4vw,52px); font-weight:500; line-height:1.14; letter-spacing:0; }
.home-section-intro > p:last-child,.home-wardrobe-heading > p,.home-workflow-copy > p:not(.home-section-label) { color:#71837b; font-size:13px; line-height:1.8; }
.home-capabilities { display:grid; grid-template-columns:minmax(260px,.76fr) minmax(0,1.35fr); gap:11%; padding-top:150px; padding-bottom:155px; }
.home-section-intro > p:last-child { max-width:265px; margin-top:25px; }
.home-capability-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:center; gap:0 28px; border-top:1px solid rgba(30,48,43,.16); }
.home-capability { min-height:153px; display:grid; grid-template-columns:32px minmax(0,1fr) 28px; align-items:start; gap:14px; padding:28px 0 23px; border-bottom:1px solid rgba(30,48,43,.16); }
.home-capability-number { color:#a2b0aa; font:10px Inter,sans-serif; }
.home-capability h3 { margin:0; color:#324c40; font-size:17px; font-weight:600; }
.home-capability p { max-width:230px; margin:10px 0 0; color:#75867e; font-size:11px; line-height:1.7; }
.home-capability-icon { display:grid; place-items:center; width:27px; height:27px; color:#759861; border:1px solid #b8d39c; border-radius:50%; font-size:15px; transition:background .2s ease,color .2s ease,transform .2s ease; }
.home-capability:hover .home-capability-icon { color:#f5faef; background:#759861; transform:rotate(12deg); }
.home-capability-featured { position:relative; }
.home-capability-featured::before { position:absolute; top:0; left:0; width:32px; height:2px; background:#a4c87e; content:""; }
.home-wardrobe { padding:95px 0 150px; border-top:1px solid rgba(30,48,43,.16); }
.home-wardrobe-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.home-wardrobe-heading > p { max-width:255px; margin:0 0 7px; }
.home-wardrobe-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(310px,.7fr); gap:24px; margin-top:55px; }
.home-role-rail { max-height:568px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); align-content:start; gap:0 28px; overflow:auto; padding-right:12px; border-top:1px solid rgba(30,48,43,.16); scrollbar-width:thin; scrollbar-color:#b4cc9f transparent; }
.home-role-button { min-height:67px; display:grid; grid-template-columns:43px minmax(0,1fr) 20px; align-items:center; gap:12px; padding:10px 5px; color:#61756c; background:transparent; border:0; border-bottom:1px solid rgba(30,48,43,.13); text-align:left; cursor:pointer; transition:color .2s ease,background .2s ease,padding .2s ease; }
.home-role-button:hover,.home-role-button.is-selected { padding-left:11px; color:#243a31; background:#e3eddc; }
.home-role-avatar { width:42px; height:42px; display:grid; place-items:end center; overflow:hidden; background:#d4e5cb; border-radius:50%; }
.home-role-avatar img { width:100%; height:100%; object-fit:contain; object-position:center bottom; }
.home-role-button-copy { min-width:0; display:flex; align-items:baseline; gap:8px; }
.home-role-button-copy strong { overflow:hidden; font-size:13px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.home-role-button-copy small { color:#9aa9a2; font:9px Inter,sans-serif; }
.home-role-arrow { color:#8eae70; font-size:15px; opacity:0; transition:opacity .2s ease,transform .2s ease; }
.home-role-button:hover .home-role-arrow,.home-role-button.is-selected .home-role-arrow { opacity:1; transform:translate(2px,-2px); }
.home-role-detail { position:relative; min-height:568px; display:grid; grid-template-rows:auto 1fr auto auto; align-items:center; padding:24px 28px 25px; overflow:hidden; color:#edf5e8; background:#243a31; }
.home-role-detail::before { position:absolute; top:87px; right:-100px; width:350px; height:210px; border:1px solid rgba(206,237,183,.22); border-radius:50%; content:""; transform:rotate(-25deg); }
.home-role-detail-top { position:relative; z-index:1; display:flex; justify-content:space-between; color:#a8bba2; font:9px Inter,sans-serif; letter-spacing:.11em; }
.home-detail-label { color:#c7ec8e; }
.home-role-portrait-wrap { position:relative; z-index:1; height:275px; display:grid; place-items:center; }
.home-role-portrait { width:230px; height:275px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 14px 13px rgba(9,23,18,.25)); transition:opacity .16s ease,transform .16s ease; }
.home-portrait-ring { position:absolute; width:205px; height:205px; border:1px solid rgba(207,237,184,.33); border-radius:50%; transform:rotate(-20deg) scaleX(1.45); }
.home-role-copy { position:relative; z-index:1; }
.home-role-copy h3 { margin:0; color:#f0f7eb; font-size:29px; font-weight:500; }
.home-role-copy p { max-width:270px; min-height:40px; margin:9px 0 17px; color:#b2c6ac; font-size:11px; line-height:1.7; }
.home-role-tags { display:flex; flex-wrap:wrap; gap:7px; }
.home-role-tags span { padding:5px 7px; color:#bcd7ad; border:1px solid rgba(198,235,178,.27); font:9px Inter,sans-serif; }
.home-detail-link { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-top:28px; padding-top:16px; color:#edf5e8 !important; border-top:1px solid rgba(207,237,184,.22); font-size:11px; font-weight:700; }
.home-workflow { display:grid; grid-template-columns:minmax(260px,.76fr) minmax(0,1.35fr); gap:11%; padding:95px 0 150px; border-top:1px solid rgba(30,48,43,.16); }
.home-workflow-copy > p:not(.home-section-label) { max-width:280px; margin:25px 0 30px; }
.home-flow-list { border-top:1px solid rgba(30,48,43,.16); }
.home-flow-list article { display:grid; grid-template-columns:53px minmax(0,1fr); gap:20px; min-height:124px; padding:27px 0 24px; border-bottom:1px solid rgba(30,48,43,.16); }
.home-flow-list article > span { color:#6f9255; font:11px Inter,sans-serif; }
.home-flow-list h3 { margin:0; color:#324c40; font-size:18px; font-weight:600; }
.home-flow-list p { max-width:410px; margin:9px 0 0; color:#75867e; font-size:11px; line-height:1.75; }
.home-final-cta { width:min(1240px,calc(100% - 96px)); margin:0 auto; padding:75px 0 100px; border-top:1px solid rgba(30,48,43,.16); opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
.home-final-cta.is-visible { opacity:1; transform:none; }
.home-final-cta h2 { margin-bottom:31px; color:#243a31; font-size:clamp(34px,5vw,66px); font-weight:500; line-height:1.08; }
.home-final-cta h2 strong { color:#71965c; font-weight:500; }
.home-footer { width:min(1240px,calc(100% - 96px)); min-height:100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; color:#809089; border-top:1px solid rgba(30,48,43,.16); font-size:10px; }
.home-footer .home-brand { color:#455f54; font-size:14px; }
.home-footer .home-brand-mark { width:23px; height:23px; padding:4px; border-radius:6px 6px 6px 2px; }
.home-footer .home-brand-mark span { width:3px; }
.home-footer .home-brand-mark span:nth-child(1) { height:7px; }
.home-footer .home-brand-mark span:nth-child(2) { height:11px; }
.home-footer .home-brand-mark span:nth-child(3) { height:6px; }
@keyframes home-copy-in { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes home-stage-in { from { opacity:0; transform:translate(22px,14px) rotate(1.5deg); } to { opacity:1; transform:rotate(1.5deg); } }
@media (max-width:980px) {
  .home-header,.home-hero,.home-stats-band,.home-section,.home-final-cta,.home-footer { width:min(100% - 48px,760px); }
  .home-hero { grid-template-columns:1fr; gap:58px; padding-top:55px; }
  .home-hero-copy { max-width:640px; }
  .home-hero-stage { width:min(100%,590px); justify-self:center; }
  .home-capabilities,.home-workflow { grid-template-columns:1fr; gap:48px; padding-top:100px; padding-bottom:110px; }
  .home-section-intro > p:last-child { max-width:430px; }
  .home-wardrobe-layout { grid-template-columns:1fr; }
  .home-role-rail { max-height:350px; }
  .home-role-detail { min-height:500px; }
  .home-stats-band { grid-template-columns:repeat(3,1fr); padding:22px 0; }
  .home-stats-band > p { grid-column:1/-1; justify-self:start; text-align:left; }
}
@media (max-width:680px) {
  .home-header,.home-hero,.home-stats-band,.home-section,.home-final-cta,.home-footer { width:calc(100% - 32px); }
  .home-header { min-height:70px; }
  .home-nav { position:absolute; top:76px; right:16px; left:16px; z-index:20; display:grid; gap:0; padding:8px 18px; background:#fffdfb; border:1px solid rgba(53,78,79,.18); box-shadow:8px 8px 0 #e5ecef; opacity:0; pointer-events:none; transform:translateY(-7px); transition:opacity .2s ease,transform .2s ease; }
  .home-nav.is-open { opacity:1; pointer-events:auto; transform:none; }
  .home-nav a { padding:16px 0; border-bottom:1px solid #e7eeee; }
  .home-nav a:last-child { border-bottom:0; }
  .home-nav a::after { display:none; }
  .home-login-link { margin-left:auto; padding-left:0; border-left:0; }
  .home-menu-button { display:block; }
  .home-hero { min-height:0; padding:48px 0 60px; }
  .home-hero h1 { font-size:42px; }
  .home-hero-description { font-size:13px; }
  .home-hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }
  .home-hero-proof { margin-top:39px; }
  .home-hero-stage { padding:14px 14px 12px; box-shadow:10px 10px 0 #d2e3c6; }
  .home-stage-art { height:350px; }
  .home-stage-outfit { width:96%; height:320px; }
  .home-stage-stamp { top:30px; left:25px; }
  .home-stage-caption { right:23px; bottom:23px; }
  .home-stage-caption span { font-size:21px; }
  .home-stats-band { grid-template-columns:repeat(2,1fr); gap:17px 0; padding:22px 0; }
  .home-stat { padding-left:12px; }
  .home-stat:nth-child(odd) { padding-left:0; }
  .home-stat:nth-child(2) { border-right:0; }
  .home-stat-wide { grid-column:1/-1; border-right:0; border-top:1px solid rgba(30,48,43,.17); padding-top:17px; }
  .home-stat-wide i { right:0; }
  .home-section h2 { font-size:32px; }
  .home-capability-list { grid-template-columns:1fr; }
  .home-capability { min-height:125px; }
  .home-wardrobe { padding-top:75px; }
  .home-wardrobe-heading { display:block; }
  .home-wardrobe-heading > p { margin-top:22px; }
  .home-role-rail { grid-template-columns:1fr; max-height:390px; padding-right:0; }
  .home-role-detail { min-height:475px; padding:20px; }
  .home-role-portrait-wrap { height:230px; }
  .home-role-portrait { width:195px; height:230px; }
  .home-portrait-ring { width:175px; height:175px; }
  .home-workflow { padding-top:75px; padding-bottom:95px; }
  .home-flow-list article { min-height:115px; grid-template-columns:36px minmax(0,1fr); gap:12px; }
  .home-final-cta { padding:60px 0 78px; }
  .home-footer { min-height:120px; align-items:flex-start; flex-wrap:wrap; padding:24px 0; }
  .home-footer .home-brand { width:100%; }
}

/* Final monochrome workbench palette. Keep the avatar refresh action blue. */
body:not(:has(.home-shell)) {
  --page:#f5f5f5;
  --surface:#ffffff;
  --surface-soft:#f1f1f1;
  --surface-muted:#e7e7e7;
  --primary:#222222;
  --primary-dark:#111111;
  --primary-soft:#e8e8e8;
  --ink:#202020;
  --muted:#777777;
  --line:#d7d7d7;
  --success:#555555;
  --shadow:0 8px 24px rgba(0,0,0,.07);
}

body:not(:has(.home-shell)) .input-wrap input,
body:not(:has(.home-shell)) .select-wrap select,
body:not(:has(.home-shell)) .custom-picker-trigger,
body:not(:has(.home-shell)) .signature-field input,
body:not(:has(.home-shell)) .mutual-secondary-field input {
  color:#222222;
  background:#f5f5f5;
  border-color:#d8d8d8;
}
body:not(:has(.home-shell)) .input-wrap input:focus,
body:not(:has(.home-shell)) .select-wrap select:focus,
body:not(:has(.home-shell)) .custom-picker-trigger:focus,
body:not(:has(.home-shell)) .custom-picker-trigger:hover,
body:not(:has(.home-shell)) .signature-field input:focus,
body:not(:has(.home-shell)) .mutual-secondary-field input:focus {
  background:#ffffff;
  border-color:#666666;
  box-shadow:0 0 0 3px rgba(0,0,0,.09);
}
body:not(:has(.home-shell)) .input-wrap input::placeholder {
  color:#999999;
}

body:not(:has(.home-shell)) .back-link,
body:not(:has(.home-shell)) .function-icon,
body:not(:has(.home-shell)) .employee-arrow,
body:not(:has(.home-shell)) .picker-value-image,
body:not(:has(.home-shell)) .popular-outfit-part-label,
body:not(:has(.home-shell)) .popular-outfit-image,
body:not(:has(.home-shell)) .popular-outfit-image.is-empty,
body:not(:has(.home-shell)) .outfit-option-image,
body:not(:has(.home-shell)) .outfit-option-image.is-empty,
body:not(:has(.home-shell)) .outfit-option-avatar,
body:not(:has(.home-shell)) .picker-empty {
  color:#555555;
  background:#eeeeee;
  border-color:#d0d0d0;
}
body:not(:has(.home-shell)) .back-link:hover {
  color:#111111;
  background:#dfdfdf;
}

body:not(:has(.home-shell)) .user-state-icon,
body:not(:has(.home-shell)) .online-dot,
body:not(:has(.home-shell)) .signature-title .material-symbols,
body:not(:has(.home-shell)) .function-icon,
body:not(:has(.home-shell)) .detail-identity p .material-symbols {
  color:#555555 !important;
}
body:not(:has(.home-shell)) .user-state-icon svg {
  stroke:currentColor;
}

body:not(:has(.home-shell)) .popular-outfit-option,
body:not(:has(.home-shell)) .preview-skin-card,
body:not(:has(.home-shell)) .outfit-option {
  color:#444444;
  background:#f7f7f7;
  border-color:#d8d8d8;
}
body:not(:has(.home-shell)) .popular-outfit-option:hover,
body:not(:has(.home-shell)) .preview-skin-card:hover,
body:not(:has(.home-shell)) .outfit-option:hover {
  color:#222222;
  background:#eeeeee;
  border-color:#999999;
}
body:not(:has(.home-shell)) .popular-outfit-option.is-selected,
body:not(:has(.home-shell)) .outfit-option.is-selected {
  color:#111111;
  background:#e3e3e3;
  border-color:#777777;
  box-shadow:0 6px 15px rgba(0,0,0,.1);
}
body:not(:has(.home-shell)) .popular-outfit-rank {
  color:#333333;
  background:#ffffff;
  border-color:#cfcfcf;
}
body:not(:has(.home-shell)) .popular-outfit-plus {
  color:#555555;
}
body:not(:has(.home-shell)) .popular-outfit-values,
body:not(:has(.home-shell)) .popular-outfit-copy small {
  color:#888888;
}

body:not(:has(.home-shell)) .modal,
body:not(:has(.home-shell)) .picker-modal {
  background:rgba(20,20,20,.42);
}
body:not(:has(.home-shell)) .picker-card {
  background:#ffffff;
  border-color:#eeeeee;
  box-shadow:0 26px 80px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.1);
}
body:not(:has(.home-shell)) .picker-header,
body:not(:has(.home-shell)) .picker-actions,
body:not(:has(.home-shell)) .picker-body,
body:not(:has(.home-shell)) .time-picker-grid > div {
  background:#f7f7f7;
  border-color:#dddddd;
}
body:not(:has(.home-shell)) .picker-subtitle,
body:not(:has(.home-shell)) .picker-column-title {
  color:#888888 !important;
}
body:not(:has(.home-shell)) .picker-column-title::before {
  background:#777777;
}
body:not(:has(.home-shell)) .picker-body,
body:not(:has(.home-shell)) .time-choice-list {
  scrollbar-color:#aaaaaa #eeeeee;
}
body:not(:has(.home-shell)) .picker-body::-webkit-scrollbar-track,
body:not(:has(.home-shell)) .time-choice-list::-webkit-scrollbar-track {
  background:#eeeeee;
}
body:not(:has(.home-shell)) .picker-body::-webkit-scrollbar-thumb,
body:not(:has(.home-shell)) .time-choice-list::-webkit-scrollbar-thumb {
  background:#aaaaaa;
  border-color:#eeeeee;
}
body:not(:has(.home-shell)) .picker-actions .secondary-button,
body:not(:has(.home-shell)) .secondary-button {
  color:#444444;
  background:#eeeeee;
  border-color:#cccccc;
}
body:not(:has(.home-shell)) .picker-actions .secondary-button:hover,
body:not(:has(.home-shell)) .secondary-button:hover {
  color:#111111;
  background:#dddddd;
}
@media (prefers-reduced-motion:reduce) {
  .home-hero-copy,.home-hero-stage { animation:none; }
  .home-section,.home-stats-band,.home-final-cta { opacity:1; transform:none; transition:none; }
  .home-stage-outfit,.home-role-portrait,.home-role-arrow,.home-capability-icon,.home-primary-action span,.home-login-link span { transition:none; }
}
/* Restored green workstation compatibility layer. Keeps the previous layout while removing theme residue. */
:root {
  --page:#f5f6f2;
  --surface:#fffefa;
  --surface-soft:#f0f3ed;
  --surface-muted:#e6ece2;
  --primary:#3f7665;
  --primary-dark:#2e5e50;
  --primary-soft:#dcebe1;
  --ink:#24332f;
  --muted:#75837c;
  --line:#dce4da;
  --success:#3c8062;
  --error:#b85e58;
  --shadow:0 18px 44px rgba(37,62,51,.08);
}
body { background:var(--page); }
.login-view { background:
  radial-gradient(circle at 8% 0%,rgba(214,232,218,.65),transparent 28rem),
  radial-gradient(circle at 95% 12%,rgba(241,224,204,.38),transparent 24rem),var(--page); }
.input-wrap input:focus,.select-wrap select:focus,.custom-picker-trigger:hover,.custom-picker-trigger:focus,.signature-field input:focus,.time-field input:focus,.mutual-secondary-field input:focus { box-shadow:0 0 0 3px rgba(63,118,101,.13); }
.primary-button { box-shadow:0 10px 22px rgba(63,118,101,.18); }
.primary-button:hover { background:var(--primary-dark); box-shadow:0 13px 26px rgba(63,118,101,.24); }
.avatar-refresh-button { color:var(--primary-dark); background:var(--primary-soft); border-color:#b9d9c6; box-shadow:0 1px 4px rgba(37,62,51,.10); }
.avatar-refresh-button:hover { color:#214d40; background:#cfe5d4; border-color:#93bea1; }
.avatar-refresh-button:focus-visible { outline:3px solid rgba(63,118,101,.24); outline-offset:2px; }
.user-card,.detail-identity,.selector-card,.signature-query,.signature-result,.activity-reward-card,.mutual-query-card,.my-card { border-color:var(--line); }
.avatar,.avatar.employee-avatar { background:var(--primary-soft); }
.avatar { box-shadow:0 0 0 1px #c8d8cc; }
.avatar.employee-avatar { background:#edf4ee; }
.section-heading { color:var(--primary-dark); }
.section-title .material-symbols,.info-section h2 .material-symbols,.detail-identity p .material-symbols,.signature-label .material-symbols,.function-icon,.my-card-heading .material-symbols { color:var(--primary-dark) !important; }
.employee-row:hover { background:#edf5ed; border-color:#c7d9cb; }
.employee-arrow,.function-icon { background:var(--primary-soft); }
.employee-row:hover .employee-arrow { color:var(--primary-dark); }
.back-link,.preview-link { color:var(--primary-dark); background:var(--primary-soft); border-color:#b9d9c6; }
.back-link:hover,.preview-link:hover { color:#214d40; background:#cfe5d4; border-color:#93bea1; box-shadow:0 6px 14px rgba(37,62,51,.10); }
.function-item:hover { background:var(--surface); border-color:#c7d9cb; box-shadow:0 7px 18px rgba(37,62,51,.08); }
.function-icon { border-color:#c9dfce; }
.function-arrow { color:#71827a !important; }
.bottom-nav { background:rgba(255,254,250,.94); border-color:var(--line); box-shadow:0 -10px 32px rgba(37,62,51,.08); }
.nav-item:hover,.nav-item.active { color:var(--primary-dark); }
.preview-hero { background:linear-gradient(135deg,#edf4eb,#fffefa); border-color:var(--line); }
.preview-link { box-shadow:none; }
.preview-group { background:rgba(255,254,250,.78); border-color:var(--line); }
.preview-group-heading > span,.preview-skin-category { color:var(--primary-dark) !important; background:var(--primary-soft); }
.preview-skin-card,.popular-outfit-option { background:#f5f8f2; border-color:#e0e8dc; }
.preview-skin-image,.popular-outfit-image,.popular-outfit-part-label { background:#e8f1e8; border-color:#cde1d1; }
.preview-skin-image { border:0; }
.preview-skin-image.is-empty::after,.outfit-option-image.is-empty::after { border-color:#cfe0d3; }
.trend-bars i { background:linear-gradient(180deg,#7fb39a,#3f7665); }
.trend-bars i:nth-child(2) { background:linear-gradient(180deg,#acd0b8,#63977d); }
.trend-bars i:nth-child(3) { background:linear-gradient(180deg,#c9e1cc,#82ad8c); }
.popular-outfit-option:hover,.outfit-option:hover { color:var(--primary-dark); background:#edf5ed; border-color:#b6d5c0; }
.popular-outfit-option.is-selected,.outfit-option.is-selected,.picker-body button.outfit-option.is-selected { color:var(--primary-dark) !important; background:#e4f0e5 !important; border-color:#9fc5ad !important; box-shadow:0 6px 15px rgba(63,118,101,.13) !important; }
.popular-outfit-rank { color:var(--primary-dark); border-color:#d5e6d8; }
.popular-outfit-plus { color:var(--primary-dark); }
.outfit-option-avatar { color:var(--primary-dark); background:linear-gradient(145deg,#e5f1e6,#fffefa); }
.outfit-option.is-selected .option-check { color:var(--primary); }
.picker-card { background:var(--surface); }
.picker-header { background:#f1f6ee; border-color:var(--line); }
.picker-body { scrollbar-color:#c7ddca #f4f8f3; }
.picker-body::-webkit-scrollbar-track,.time-choice-list::-webkit-scrollbar-track { background:#f4f8f3; }
.picker-body::-webkit-scrollbar-thumb,.time-choice-list::-webkit-scrollbar-thumb { background:#c7ddca; border-color:#f4f8f3; }
.picker-body::-webkit-scrollbar-thumb:hover,.time-choice-list::-webkit-scrollbar-thumb:hover { background:#a8cbb8; }
.picker-actions { background:rgba(244,248,243,.94); border-color:var(--line); }
.time-picker-grid > div { background:#f1f6ef; border-color:#e0e8dc; }
.picker-column-title::before { background:#78a58e; }
.time-choice:hover { color:var(--primary-dark); background:#edf5ed; border-color:#a8cbb8; }
.time-choice.is-selected,.picker-body button.time-choice.is-selected { background:var(--primary) !important; border-color:var(--primary) !important; box-shadow:0 6px 14px rgba(63,118,101,.22) !important; }
.time-picker-grid > b { color:var(--primary); }
.modal,.picker-modal { background:rgba(28,47,39,.34); }
.modal-card { box-shadow:0 24px 70px rgba(37,62,51,.20),0 4px 16px rgba(37,62,51,.10); }
.secondary-button:hover { color:var(--ink); background:var(--surface-muted); }
.mutual-user-card:hover { border-color:#b6d5c0; box-shadow:0 7px 18px rgba(37,62,51,.09); }
.mutual-user-card.is-selected { border-color:#8fbea0; background:#edf5ed; box-shadow:0 5px 16px rgba(63,118,101,.12); }
.mutual-user-card.is-selected .mutual-select > span { border-color:var(--primary); background:var(--primary); }
.mutual-copy-account:hover { color:var(--primary); background:#edf5ed; }
.mutual-check-all:hover { background:#edf5ed; border-color:#b6d5c0; }
@media (max-width:640px) { .login-view { min-height:100dvh; } }

/* Detail header actions: preview and list return share one button component. */
.detail-top-actions { display:grid; grid-template-columns:repeat(2,120px); align-items:center; gap:8px; flex:none; }
.detail-top-actions .detail-header-action {
  width:100% !important;
  min-width:0 !important;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 12px;
  color:var(--primary-dark);
  background:var(--primary-soft);
  border:1px solid #b9d9c6;
  border-radius:10px;
  font:600 12px/1.2 Inter,"Microsoft YaHei",sans-serif;
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s,background .2s,border-color .2s,box-shadow .2s,transform .2s;
}
.detail-top-actions .detail-header-action > .material-symbols {
  width:18px;
  min-width:18px;
  height:18px;
  font-size:18px;
}
.detail-top-actions .detail-header-action:hover {
  color:#214d40;
  background:#cfe5d4;
  border-color:#93bea1;
  box-shadow:0 6px 14px rgba(37,62,51,.10);
  transform:translateY(-1px);
}
.detail-top-actions .detail-header-action:active { transform:translateY(0); }
.detail-top-actions .detail-header-action:focus-visible {
  outline:3px solid rgba(63,118,101,.24);
  outline-offset:2px;
}
.detail-page > .detail-top-actions {
  width:100%;
  grid-template-columns:repeat(2,minmax(0,1fr));
  justify-content:flex-start;
  margin:0 0 12px;
}
@media (max-width:600px) {
  .detail-page > .detail-top-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .detail-top-actions .detail-header-action { width:100% !important; padding-inline:8px; }
}
@media (max-width:380px) {
  .detail-page > .detail-top-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-top-actions .detail-header-action { width:100% !important; padding-inline:6px; font-size:11px; }
  .detail-top-actions .detail-header-action > .material-symbols { width:17px; min-width:17px; font-size:17px; }
}

/* Keep the employee identity compact so the outfit controls remain above the fold. */
.detail-page > .detail-identity {
  min-height:0;
  margin-bottom:16px;
  padding:10px 14px;
  border-radius:14px;
}
.detail-page > .detail-identity .detail-avatar { width:56px; height:56px; font-size:22px; }
.detail-page > .detail-identity > div { min-width:0; }
.detail-page > .detail-identity h1 { font-size:19px; }
.detail-page > .detail-identity p {
  min-width:0;
  margin-top:4px;
  font-size:11px;
  white-space:nowrap;
}
@media (max-width:480px) {
  .detail-page > .detail-identity { padding:9px 12px; }
  .detail-page > .detail-identity .detail-avatar { width:54px; height:54px; }
  .detail-page > .detail-identity p { font-size:10px; }
}

/* Detail identity: refine the existing card without changing its footprint. */
.detail-page > .detail-identity {
  background:#fffefa;
  border-color:#d7e3d7;
  box-shadow:0 7px 18px rgba(37,62,51,.055),inset 0 1px 0 rgba(255,255,255,.9);
}
.detail-page > .detail-identity .detail-avatar {
  background:#eef5ed;
  border-color:#fffefa;
  box-shadow:0 0 0 1px #bed3c2,0 5px 12px rgba(45,82,62,.11);
}
.detail-page > .detail-identity h1 {
  color:#21342d;
  font-weight:700;
  letter-spacing:.01em;
}
.detail-page > .detail-identity p {
  color:#66786f;
  font-weight:500;
  letter-spacing:.01em;
}
.detail-page > .detail-identity p .material-symbols {
  width:18px;
  min-width:18px;
  height:18px;
  color:#3f7665 !important;
  background:#e0ede1;
  border-radius:50%;
  font-size:13px;
}

/* Account identity: refine the card surface while preserving its original layout. */
.user-card {
  background:#fffefa;
  border-color:#d7e3d7;
  border-radius:14px;
  box-shadow:0 7px 18px rgba(37,62,51,.055),inset 0 1px 0 rgba(255,255,255,.9);
}
.user-avatar-group {
  position:relative;
  width:48px;
  height:48px;
  flex:none;
}
.user-avatar-group .user-avatar {
  background:#f1f6ee;
  border-color:#fffefa;
  box-shadow:0 0 0 1px #c6d9c8,0 4px 10px rgba(45,82,62,.09);
}
.user-copy {
  min-width:0;
  height:48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.user-name {
  color:#21342d;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.25;
}
.user-state {
  gap:6px;
  margin-top:5px;
  color:#6d7d75;
  font-weight:500;
  line-height:16px;
}
.user-state-icon {
  width:14px;
  height:14px;
  flex:none;
  display:grid;
  place-items:center;
  color:#3f7665;
}
.user-state-icon svg {
  width:14px;
  height:14px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.45;
}
.avatar-refresh-button {
  position:absolute;
  left:50%;
  bottom:-6px;
  z-index:2;
  height:20px;
  min-height:20px;
  display:inline-flex;
  gap:2px;
  padding:1px 5px;
  color:#326651;
  background:#e5f0e6;
  border:1px solid #c6dcc9;
  border-radius:6px;
  box-shadow:0 1px 4px rgba(37,62,51,.10);
  font-size:10px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  transform:translateX(-50%);
}
.avatar-refresh-button:hover {
  color:#214d40;
  background:#d6e9d9;
  border-color:#9ec3a7;
  box-shadow:0 3px 8px rgba(37,62,51,.08);
}
.avatar-refresh-button .material-symbols {
  width:14px;
  min-width:14px;
  height:14px;
  font-size:12px;
}
.user-logout {
  width:40px;
  height:40px;
  align-self:center;
  color:#789087;
}
.user-home-link {
  width:36px;
  height:36px;
  align-self:center;
  color:#a2ada7;
}
.user-home-link:hover {
  color:#68796f;
  background:#f1f3f1;
  transform:translateX(-1px);
}
.user-logout:hover {
  color:#2e5e50;
  background:#e6f0e7;
  transform:translateX(1px);
}
.user-logout:focus-visible { outline:3px solid rgba(63,118,101,.24); outline-offset:2px; }
@media (max-width:480px) {
  .user-card { border-radius:14px; }
}
@media (max-width:380px) {
  .avatar-refresh-button { padding-inline:6px; }
}

/* Utility actions fill the card's content width. */
.checkin-submit,
.signature-submit,
.signature-save,
.logout-main {
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:44px;
  margin-left:0;
  padding:10px 16px;
  border-radius:10px;
  box-shadow:0 6px 14px rgba(63,118,101,.15);
  font-size:13px;
  white-space:nowrap;
}
.activity-reward-button,
.mutual-query-button {
  display:flex;
  width:100% !important;
  min-width:0;
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.checkin-submit,
.signature-submit,
.signature-save { margin-top:16px; }
.activity-reward-button,
.mutual-query-button { margin-top:0; }
.checkin-submit:hover,
.activity-reward-button:hover,
.mutual-query-button:hover,
.signature-submit:hover,
.signature-save:hover {
  box-shadow:0 8px 18px rgba(63,118,101,.19);
}
.logout-main {
  justify-self:stretch;
  align-self:end;
  margin-top:0;
  color:#fff;
  background:var(--primary);
  border:0;
  box-shadow:0 6px 14px rgba(63,118,101,.15);
}
.logout-main:hover {
  color:#fff;
  background:var(--primary-dark);
  border-color:transparent;
  box-shadow:0 8px 18px rgba(63,118,101,.19);
  transform:translateY(-1px);
}
.logout-main:active { transform:translateY(0); }

/* Keep the popular-outfit empty state in the green workstation palette. */
.picker-empty {
  color:#7d8b82;
  background:#f3f7f0;
  border-color:#c8dbc9;
}

/* Keep the complete Mia source portrait, but retain the compact proportions used by each UI slot. */
.detail-page > .detail-identity {
  border-radius:12px;
  position:relative;
  overflow:hidden;
}
.detail-page > .detail-identity::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--primary);
  border-radius:12px 0 0 12px;
  pointer-events:none;
}
.detail-page > .selector-stack .selector-card {
  border-radius:12px;
}
.detail-page > .selector-stack .custom-picker-trigger {
  border-radius:10px;
}
.picker-card {
  border-radius:16px;
}
.picker-card > .picker-header {
  border-radius:14px 14px 0 0;
}
.picker-card > .picker-actions {
  border-radius:0 0 14px 14px;
}

/* Keep the popular-outfit picker header as compact as the outfit selectors. */
.picker-modal[data-picker-key="popular"] .picker-header {
  padding:11px 20px 9px;
}
.picker-modal[data-picker-key="popular"] .picker-heading h2 {
  font-size:17px;
  line-height:1.25;
}
.picker-modal[data-picker-key="popular"] .picker-subtitle {
  margin-top:3px !important;
  font-size:10px !important;
}
.picker-modal[data-picker-key="popular"] .picker-card {
  max-height:min(84vh,680px);
}
.picker-modal[data-picker-key="popular"] .picker-body {
  max-height:min(49vh,390px);
}
@media (max-width:480px) {
  .picker-modal[data-picker-key="popular"] .picker-header {
    padding:10px 18px 8px;
  }
  .picker-modal[data-picker-key="popular"] .picker-body {
    max-height:min(49vh,390px);
  }
}

/* Keep the three outfit controls in sync with the picker options.  The
   selected outfit supplies its own image and quality variables from app.js;
   the image is an isolated blurred layer so the label, avatar tile, and arrow
   remain crisp and readable. */
body.workbench-mode .select-wrap .outfit-picker-trigger,
body:not(:has(.home-shell)) .select-wrap .outfit-picker-trigger {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-right:38px;
  color:var(--picker-quality-color, #202020) !important;
  background:var(--picker-selected-bg, #f4f4f4) !important;
  border-color:var(--picker-quality-color, #dddddd) !important;
}
body.workbench-mode .select-wrap .outfit-picker-trigger:hover,
body.workbench-mode .select-wrap .outfit-picker-trigger:focus,
body:not(:has(.home-shell)) .select-wrap .outfit-picker-trigger:hover,
body:not(:has(.home-shell)) .select-wrap .outfit-picker-trigger:focus {
  color:var(--picker-quality-color, #202020) !important;
  background:var(--picker-selected-bg, #ffffff) !important;
  border-color:var(--picker-quality-color, #777777) !important;
}
body.workbench-mode .select-wrap .picker-trigger-bg,
body:not(:has(.home-shell)) .select-wrap .picker-trigger-bg {
  position:absolute;
  z-index:0;
  top:-8px;
  right:-6px;
  bottom:-8px;
  width:40%;
  overflow:hidden;
  pointer-events:none;
  opacity:.24;
}
body.workbench-mode .select-wrap .picker-trigger-bg::after,
body:not(:has(.home-shell)) .select-wrap .picker-trigger-bg::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    var(--picker-selected-bg, rgba(244,244,244,.96)) 0%,
    color-mix(in srgb, var(--picker-selected-bg, #f4f4f4) 68%, transparent) 42%,
    transparent 100%);
}
body.workbench-mode .select-wrap .picker-trigger-bg img,
body:not(:has(.home-shell)) .select-wrap .picker-trigger-bg img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:blur(2px);
  transform:scale(1.06);
}
body.workbench-mode .select-wrap .outfit-picker-trigger > .picker-value,
body.workbench-mode .select-wrap .outfit-picker-trigger > .material-symbols,
body:not(:has(.home-shell)) .select-wrap .outfit-picker-trigger > .picker-value,
body:not(:has(.home-shell)) .select-wrap .outfit-picker-trigger > .material-symbols {
  position:relative;
  z-index:1;
}
body.workbench-mode .select-wrap .outfit-picker-trigger > .material-symbols,
body:not(:has(.home-shell)) .select-wrap .outfit-picker-trigger > .material-symbols {
  position:absolute;
  z-index:2;
  top:50%;
  right:13px;
  transform:translateY(-50%);
  color:var(--picker-quality-color, #555555) !important;
}
body.workbench-mode .select-wrap .outfit-picker-trigger .picker-value-label,
body:not(:has(.home-shell)) .select-wrap .outfit-picker-trigger .picker-value-label {
  text-shadow:0 1px 2px rgba(0,0,0,.14);
}

/* Let the confirmed outfit settle into the detail page after the picker
   closes, while keeping the selector dimensions stable. */
@keyframes outfit-picker-confirmed {
  0% { opacity:.46; transform:translateY(5px); }
  55% { opacity:1; transform:translateY(-1px); }
  100% { opacity:1; transform:translateY(0); }
}
.select-wrap .outfit-picker-trigger.outfit-picker-confirmed {
  animation:outfit-picker-confirmed 360ms cubic-bezier(.2,.8,.2,1) both;
}
.picker-flight-layer {
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  z-index:10001 !important;
  width:var(--picker-flight-width) !important;
  height:var(--picker-flight-height) !important;
  overflow:visible !important;
  pointer-events:none !important;
  margin:0 !important;
  padding:0 !important;
  contain:layout paint !important;
  isolation:isolate !important;
}
.picker-flight-clone {
  box-sizing:border-box !important;
  z-index:1 !important;
  pointer-events:none;
  margin:0 !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  flex:none !important;
  float:none !important;
  clear:none !important;
  contain:layout paint !important;
  isolation:isolate !important;
  display:block !important;
  min-height:50px !important;
  /* The shell clips and moves; the inner snapshot owns its padding. */
  padding:0 !important;
  overflow:hidden !important;
  color:#555555 !important;
  background:#f4f4f4 !important;
  border:1px solid #d2d2d2 !important;
  border-radius:13px !important;
  font:500 13px/1.25 Inter,"Microsoft YaHei",sans-serif !important;
  text-align:left !important;
  transform-origin:top left !important;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.picker-flight-clone,
.picker-flight-clone * {
  animation:none !important;
  transition:none !important;
}
.picker-flight-clone.picker-flight-snapshot {
  width:var(--picker-flight-width) !important;
  height:var(--picker-flight-height) !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:0 !important;
  max-height:none !important;
}
.picker-flight-clone {
  color:var(--flight-quality-color,inherit) !important;
  background-color:var(--flight-quality-background,var(--flight-card-background,#f4f4f4)) !important;
  border-color:var(--flight-quality-color,var(--flight-card-border,#d2d2d2)) !important;
}
.picker-flight-clone.outfit-picker-trigger {
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:0 38px 0 13px !important;
  overflow:hidden !important;
}
.picker-flight-clone.outfit-picker-trigger > .picker-trigger-bg {
  position:absolute !important;
  z-index:0 !important;
  top:-8px !important;
  right:-6px !important;
  bottom:-8px !important;
  left:auto !important;
  width:40% !important;
  overflow:hidden !important;
  opacity:.24 !important;
  pointer-events:none !important;
}
.picker-flight-clone.outfit-picker-trigger > .picker-trigger-bg::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    var(--picker-selected-bg,rgba(244,244,244,.96)) 0%,
    color-mix(in srgb,var(--picker-selected-bg,#f4f4f4) 68%,transparent) 42%,
    transparent 100%);
}
.picker-flight-clone.outfit-picker-trigger > .picker-trigger-bg img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:blur(2px);
  transform:scale(1.06);
}
.picker-flight-clone.outfit-picker-trigger > .picker-value {
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  gap:8px !important;
}
.picker-flight-clone.outfit-picker-trigger > .picker-value > .picker-value-content {
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  gap:8px !important;
}
.picker-flight-clone.outfit-picker-trigger > .picker-value .picker-value-image {
  width:30px !important;
  min-width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
}
.picker-flight-clone.outfit-picker-trigger > .picker-value .picker-value-label {
  text-shadow:0 1px 2px rgba(0,0,0,.14) !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.picker-flight-clone.outfit-picker-trigger > .material-symbols {
  position:absolute !important;
  z-index:2 !important;
  top:50% !important;
  right:13px !important;
  transform:translateY(-50%) !important;
  pointer-events:none !important;
  color:var(--picker-quality-color,#555555) !important;
}
.picker-flight-content {
  box-sizing:border-box !important;
  width:100% !important;
  height:100% !important;
  flex:none !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  align-items:center !important;
  gap:10px !important;
  padding:9px 13px !important;
}
.picker-flight-content > .picker-flight-image {
  position:relative !important;
  inset:auto !important;
  align-self:center !important;
  justify-self:start !important;
  transform:none !important;
}
.picker-flight-content > .picker-flight-name {
  position:relative !important;
  inset:auto !important;
  align-self:center !important;
  justify-self:stretch !important;
  transform:none !important;
}
.picker-flight-content > .picker-flight-image,
.picker-flight-content > .picker-flight-image img {
  position:static !important;
  inset:auto !important;
  transform:none !important;
}
.picker-flight-clone > .picker-flight-bg {
  position:absolute !important;
  z-index:0 !important;
  top:-12px !important;
  right:-8px !important;
  bottom:-12px !important;
  left:-12px !important;
  width:auto !important;
  overflow:hidden !important;
  opacity:.3 !important;
  pointer-events:none !important;
}
.picker-flight-clone > .picker-flight-bg::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    var(--flight-quality-background,var(--flight-card-background,#f4f4f4)) 0%,
    color-mix(in srgb, var(--flight-quality-background,var(--flight-card-background,#f4f4f4)) 88%, transparent) 28%,
    color-mix(in srgb, var(--flight-quality-background,var(--flight-card-background,#f4f4f4)) 42%, transparent) 56%,
    transparent 88%);
}
.picker-flight-clone > .picker-flight-bg img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:blur(2px);
  transform:scale(1.05);
}
.picker-flight-content > .picker-flight-image,
.picker-flight-content > .picker-flight-name {
  position:relative;
  z-index:1;
}
.picker-flight-content > .picker-flight-image {
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  background-color:var(--flight-image-background,#f4f4f4) !important;
  background-image:var(--flight-image-background-image,none) !important;
  border:1px solid var(--flight-image-border,var(--flight-quality-color,#d2d2d2)) !important;
  border-radius:10px !important;
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
}
.picker-flight-clone[style*="--flight-quality-color"] .picker-flight-image {
  border-color:var(--flight-quality-color) !important;
}
.picker-flight-content > .picker-flight-image img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
.picker-flight-content > .picker-flight-name {
  color:inherit !important;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Popular combinations use a three-column card. Keep that structure on the
   flying copy instead of applying the single-outfit two-column layout. */
.picker-flight-clone.picker-flight-popular {
  min-height:0 !important;
  color:#555555 !important;
  background:#f4f4f4 !important;
  border-color:var(--flight-card-border,#d2d2d2) !important;
}
.picker-flight-clone.picker-flight-popular > .picker-flight-content {
  display:grid !important;
  grid-template-columns:30px minmax(0,1fr) 70px !important;
  align-items:center !important;
  gap:10px !important;
  padding:11px !important;
}
.picker-flight-clone.picker-flight-popular .picker-flight-rank,
.picker-flight-clone.picker-flight-popular .picker-flight-parts,
.picker-flight-clone.picker-flight-popular .picker-flight-copy {
  position:relative;
  z-index:1;
}
.picker-flight-clone.picker-flight-popular .picker-flight-rank {
  display:grid;
  place-items:center;
  box-sizing:border-box;
  border:1px solid var(--flight-card-border,#d2d2d2);
  border-radius:9px;
  font:700 13px/1 Inter,"Microsoft YaHei",sans-serif;
  text-align:center;
  overflow:hidden;
  width:30px;
  height:30px;
  color:#555555;
  background:var(--flight-card-background,#ffffff);
  border-color:var(--flight-card-border,#d2d2d2);
}
.picker-flight-clone.picker-flight-popular .picker-flight-popular-image {
  display:inline-grid;
  place-items:center;
  overflow:hidden;
  background:var(--flight-image-background,#f4f4f4);
  border:1px solid var(--flight-image-border,#d2d2d2);
  border-radius:10px;
  width:58px;
  height:58px;
  flex-basis:58px;
}
.picker-flight-clone[style*="--flight-quality-color"] .picker-flight-popular-image {
  border-color:var(--flight-quality-color) !important;
}
.picker-flight-clone.picker-flight-popular .picker-flight-popular-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.picker-flight-clone.picker-flight-popular .picker-flight-copy {
  width:70px;
}
.picker-flight-clone.picker-flight-popular .picker-flight-parts {
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.picker-flight-clone.picker-flight-popular .picker-flight-parts,
.picker-flight-clone.picker-flight-popular .picker-flight-copy {
  color:#555555 !important;
}
.picker-flight-clone.picker-flight-popular .picker-flight-plus {
  color:#777777;
}
.picker-flight-target {
  opacity:0 !important;
  visibility:hidden !important;
  transform:none !important;
  transition:none !important;
}
@media (prefers-reduced-motion:reduce) {
  /* Keep the selection handoff visible. The flight uses WAAPI and remains
     short and predictable, so reduced-motion browsers do not flash an empty
     selector before the committed value appears. */
  .select-wrap .outfit-picker-trigger.outfit-picker-confirmed { animation:none; }
}

.function-groups { display:grid; gap:18px; margin-top:14px; }
.function-group { display:grid; gap:9px; }
.function-group-heading { display:flex; align-items:center; gap:9px; padding:0 3px; color:var(--primary-dark); }
.function-group-heading > .material-symbols { width:28px; height:28px; display:grid; place-items:center; color:var(--primary-dark); background:var(--primary-soft); border-radius:9px; font-size:17px; }
.function-group-heading strong,.function-group-heading small { display:block; }
.function-group-heading strong { color:var(--ink); font-size:13px; line-height:1.3; }
.function-group-heading small { margin-top:2px; color:var(--muted); font-size:10px; line-height:1.3; }
.function-group .function-list { margin-top:0; }

.avatar.employee-avatar.avatar-portrait-mia img,
.avatar.detail-avatar.avatar-portrait-mia img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  transform:translateY(-3px) scale(.68);
  transform-origin:center center;
}
.picker-value-image img.outfit-default-portrait-mia {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  transform:translateY(-2px) scale(.68);
  transform-origin:center center;
}
.outfit-option-image img.outfit-default-portrait-mia {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  transform:translateY(-5px) scale(.62);
  transform-origin:center center;
}

/* Final action sizing: card actions fill their available width at every viewport. */
#checkin-now,
#signature-submit,
#signature-edit-save,
.logout-main {
  display:flex !important;
  width:100% !important;
  inline-size:100% !important;
  min-width:0 !important;
  max-width:100%;
  flex:0 0 auto;
  align-self:stretch;
  margin-left:0;
  margin-right:0;
  min-height:44px;
  padding-inline:16px;
  white-space:nowrap;
}
#activity-claim,
#mutual-scan {
  display:flex !important;
  width:100% !important;
  inline-size:100% !important;
  min-width:0 !important;
  max-width:none !important;
  flex:1 1 auto;
  align-self:stretch;
  margin-left:0;
  margin-right:0;
  white-space:nowrap;
}
.popular-outfit-image img.popular-outfit-default-portrait-mia {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  transform:translateY(-11px) scale(.68);
  transform-origin:center center;
}

/* Daily check-in: separate status, scheduling, manual action, and history into clear bands. */
.checkin-page .checkin-query,
.checkin-page .checkin-history {
  border-radius:14px;
}
.checkin-page .checkin-query {
  padding:20px;
}
.checkin-panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.checkin-panel-heading {
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
}
.checkin-panel-heading > div {
  min-width:0;
}
.checkin-panel-heading h2 {
  margin:0;
  color:var(--ink);
  font-size:16px;
  line-height:1.3;
}
.checkin-panel-heading p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}
.checkin-panel-icon {
  width:36px;
  min-width:36px;
  height:36px;
  color:var(--primary-dark);
  background:var(--primary-soft);
  border:1px solid #c7d9cb;
  border-radius:10px;
  font-size:19px;
}
.checkin-summary-row {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  margin:14px 0 12px;
  padding:10px 12px;
  color:var(--primary-dark);
  background:#f5f8f2;
  border:1px solid #e0e8dc;
  border-radius:10px;
}
.checkin-summary-row > .material-symbols {
  width:18px;
  min-width:18px;
  height:18px;
  font-size:17px;
}
.checkin-summary-row p {
  min-width:0;
  margin:0;
  color:#53675e;
  font-size:12px;
  line-height:1.4;
}
.checkin-page .checkin-notice {
  margin:16px 0 14px;
  padding:9px 11px;
  border-radius:10px;
}
.checkin-page .checkin-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  padding:0;
  border:0;
}
.checkin-page .checkin-switch-row,
.checkin-page .time-field {
  min-height:70px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 13px;
  background:#f8faf6;
  border:1px solid var(--line);
  border-radius:10px;
}
.checkin-page .checkin-switch-row {
  cursor:pointer;
}
.checkin-control-copy {
  min-width:0;
  flex:1;
}
.checkin-control-copy strong,
.checkin-control-copy small {
  display:block;
}
.checkin-control-copy strong {
  display:flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
  color:var(--ink);
  font-size:13px;
  line-height:1.35;
}
.checkin-control-copy strong .function-task-status {
  display:inline !important;
  flex:0 0 auto;
  margin:0;
  color:#777 !important;
  font-size:10px !important;
  font-weight:400;
  white-space:nowrap;
}
.checkin-control-copy small {
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}
.checkin-page .time-field {
  justify-content:space-between;
}
.checkin-page .time-field { justify-content:space-between; }
.checkin-page .time-field .custom-picker-trigger {
  width:112px;
  min-width:112px;
  height:40px;
  flex:0 0 112px;
  padding-inline:11px;
  background:var(--surface);
  border-radius:9px;
}
.checkin-page .time-field .custom-picker-trigger:hover,
.checkin-page .time-field .custom-picker-trigger:focus {
  background:var(--surface);
}
.checkin-action-row {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.checkin-action-copy {
  min-width:0;
  flex:1;
}
.checkin-action-copy strong,
.checkin-action-copy small {
  display:block;
}
.checkin-action-copy strong {
  color:var(--ink);
  font-size:12px;
}
.checkin-action-copy small {
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}
.checkin-page .checkin-action-row #checkin-now {
  flex:none;
  margin:0;
}
.checkin-page .checkin-action-row #checkin-privcard-now {
  flex:none;
  margin:0;
}
.checkin-page #checkin-message {
  margin:10px 0 0;
  text-align:left;
}
.checkin-page .checkin-history {
  padding:18px 20px;
}
.checkin-history-heading {
  padding-bottom:12px;
}
.checkin-history-heading .signature-title {
  align-items:flex-start;
}
.checkin-history-heading .signature-title > div {
  min-width:0;
}
.checkin-history-heading .signature-title strong,
.checkin-history-heading .signature-title small {
  display:block;
}
.checkin-history-heading .signature-title small {
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  font-weight:400;
}
@media (max-width:640px) {
  .checkin-page .checkin-query {
    padding:16px 15px;
  }
  .checkin-panel-head {
    align-items:flex-start;
  }
  .checkin-page .checkin-controls {
    grid-template-columns:1fr;
  }
  .checkin-page .checkin-switch-row,
  .checkin-page .time-field {
    min-height:64px;
  }
  .checkin-page .checkin-history {
    padding:16px 15px;
  }
}
@media (max-width:420px) {
  .checkin-panel-head {
    gap:8px;
  }
  .checkin-panel-heading p {
    max-width:190px;
  }
  .checkin-page .checkin-status {
    padding-inline:7px;
    font-size:9px;
  }
}

/* Center the initial action states without changing result layouts. */
.activity-reward-card,
.mutual-query-card {
  text-align:center;
}
.activity-reward-heading,
.mutual-query-heading {
  justify-content:center;
}
.activity-reward-description,
.mutual-query-description {
  max-width:32rem;
  margin-left:auto;
  margin-right:auto;
}
.activity-reward-button,
.mutual-query-button {
  margin-left:auto;
  margin-right:auto;
}

/* Homepage visual direction: cold mist blue, deep ocean ink and coral action tones. */
.home-shell {
  --home-mist:#edf2f7;
  --home-paper:#f7f9fb;
  --home-ink:#102a43;
  --home-ink-soft:#244b63;
  --home-muted:#6c8190;
  --home-line:rgba(16,42,67,.16);
  --home-coral:#f26b52;
  --home-coral-dark:#d95341;
  --home-coral-soft:#ffe0d7;
  --home-cyan:#5bbbd4;
  --home-cyan-soft:#d7edf3;
  --home-gold:#f2c75c;
  --home-deep:#102f43;
  --home-art:#1d5363;
  position:relative;
  isolation:isolate;
  color:var(--home-ink);
  background:var(--home-mist);
  cursor:auto;
}
.home-page {
  position:relative;
  z-index:1;
  background-color:var(--home-mist);
  background-image:linear-gradient(rgba(16,42,67,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,42,67,.035) 1px,transparent 1px);
  background-size:48px 48px;
}
.home-shell a { color:inherit; }
.home-header { border-color:var(--home-line); }
.home-brand { color:var(--home-ink); }
.home-brand em { color:var(--home-muted); }
.home-brand-mark { background:var(--home-ink); }
.home-brand-mark span:nth-child(1) { background:var(--home-coral); }
.home-brand-mark span:nth-child(2) { background:var(--home-cyan); }
.home-brand-mark span:nth-child(3) { background:var(--home-gold); }
.home-nav { color:var(--home-muted); }
.home-nav a::after { background:var(--home-coral); }
.home-nav a:hover { color:var(--home-ink); }
.home-login-link { color:var(--home-ink); border-color:var(--home-line); }
.home-login-link span,.home-detail-link span,.home-primary-action span { color:var(--home-coral); }
.home-menu-button { border-color:rgba(16,42,67,.28); }
.home-menu-button span { background:var(--home-ink); }
.home-kicker,.home-section-label { color:#38718a; }
.home-kicker span { background:var(--home-coral); }
.home-hero h1 { color:var(--home-ink); }
.home-hero h1 strong { color:var(--home-coral); }
.home-hero-description { color:var(--home-muted); }
.home-primary-action { color:#fff8f4 !important; background:var(--home-coral); border-color:var(--home-coral); box-shadow:5px 5px 0 var(--home-gold); }
.home-primary-action span { color:#fff8f4; }
.home-primary-action:hover { background:var(--home-coral-dark); box-shadow:3px 3px 0 var(--home-gold); }
.home-text-action { color:var(--home-ink-soft) !important; }
.home-text-action span { color:var(--home-coral); }
.home-proof-avatars img,.home-proof-avatars span { background:var(--home-cyan-soft); border-color:var(--home-mist); }
.home-proof-avatars span { color:var(--home-ink-soft); background:#dce9ef; }
.home-hero-proof p { color:var(--home-muted); }
.home-hero-proof strong { color:var(--home-ink-soft); }
.home-hero-stage { color:#effaff; background:var(--home-deep); box-shadow:20px 20px 0 #c9dce8; }
.home-stage-heading,.home-stage-footer { color:#a6c8d3; }
.home-stage-heading { border-color:rgba(169,221,234,.22); }
.home-stage-heading span:last-child { color:var(--home-gold); }
.home-stage-art { background:var(--home-art); }
.home-stage-art::before { border-color:rgba(168,226,237,.34); }
.home-stage-art::after { background:rgba(168,226,237,.24); }
.home-stage-orbit { border-color:rgba(168,226,237,.42); }
.home-stage-orbit-two { border-color:rgba(168,226,237,.18); }
.home-stage-stamp { color:var(--home-gold); }
.home-stage-caption span { color:#effaff; }
.home-stage-caption small { color:#b7d9e1; }
.home-stage-footer strong { color:#effaff; }
.home-stage-line { background:rgba(169,221,234,.25); }
.home-stats-band { border-color:var(--home-line); }
.home-stat { border-color:var(--home-line); }
.home-stat strong { color:var(--home-ink-soft); }
.home-stat span,.home-stats-band > p { color:var(--home-muted); }
.home-stat-wide i { color:#8a6411; background:#f8e7a9; }
.home-section,.home-final-cta,.home-footer { border-color:var(--home-line); }
.home-section-label { color:#38718a; }
.home-section-label span { color:#8b9eaa; }
.home-section h2 { color:var(--home-ink); }
.home-section-intro > p:last-child,.home-wardrobe-heading > p,.home-workflow-copy > p:not(.home-section-label) { color:var(--home-muted); }
.home-capability-list,.home-flow-list { border-color:var(--home-line); }
.home-capability { border-color:var(--home-line); }
.home-capability-number { color:#92a5b0; }
.home-capability h3,.home-flow-list h3 { color:var(--home-ink-soft); }
.home-capability p,.home-flow-list p { color:var(--home-muted); }
.home-capability-icon { color:var(--home-coral); border-color:#e7a093; }
.home-capability:hover .home-capability-icon { color:#fff8f4; background:var(--home-coral); }
.home-capability-featured::before { background:var(--home-coral); }
.home-role-rail { border-color:var(--home-line); scrollbar-color:#a7ccda transparent; }
.home-role-button { color:var(--home-muted); border-color:var(--home-line); }
.home-role-button:hover,.home-role-button.is-selected { color:var(--home-ink); background:#dcecf2; }
.home-role-avatar { background:var(--home-cyan-soft); }
.home-role-button-copy small { color:#96a9b3; }
.home-role-arrow { color:var(--home-coral); }
.home-role-detail { color:#effaff; background:var(--home-deep); }
.home-role-detail::before { border-color:rgba(168,226,237,.25); }
.home-role-detail-top { color:#a6c8d3; }
.home-detail-label { color:var(--home-gold); }
.home-role-copy h3 { color:#effaff; }
.home-role-copy p { color:#b7d9e1; }
.home-role-tags span { color:#bee1e8; border-color:rgba(168,226,237,.3); }
.home-detail-link { color:#effaff !important; border-color:rgba(169,221,234,.24); }
.home-flow-list article { border-color:var(--home-line); }
.home-flow-list article > span { color:var(--home-coral); }
.home-final-cta h2 { color:var(--home-ink); }
.home-final-cta h2 strong { color:var(--home-coral); }
.home-footer { color:#7c909c; }
.home-footer .home-brand { color:var(--home-ink-soft); }

@media (max-width:680px) {
  .home-nav { background:var(--home-paper); border-color:#b9d6e0; box-shadow:8px 8px 0 #c9e0e8; }
  .home-nav a { border-color:#dceaf0; }
  .home-hero-stage { box-shadow:10px 10px 0 #c9dce8; }
}

/* Homepage v2: a softer lookbook palette with real transparent character layers. */
.home-shell {
  --home-mist:#fffaf7;
  --home-paper:#fffdfb;
  --home-ink:#3d3040;
  --home-ink-soft:#66526d;
  --home-muted:#8d7c8e;
  --home-line:rgba(92,68,91,.15);
  --home-coral:#e89086;
  --home-coral-dark:#cf756f;
  --home-coral-soft:#f9ded8;
  --home-cyan:#9bcfd0;
  --home-cyan-soft:#e1f1ef;
  --home-gold:#eacb79;
  --home-deep:#57435f;
  --home-art:#9e7184;
  background:#fffaf7;
}
.home-page {
  overflow:hidden;
  background-color:#fffaf7;
  background-image:linear-gradient(rgba(92,68,91,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(92,68,91,.03) 1px,transparent 1px);
  background-size:56px 56px;
}
.home-header,.home-page > main,.home-footer { position:relative; z-index:2; }
.home-header { border-color:var(--home-line); }
.home-brand { color:var(--home-ink); }
.home-brand em { color:var(--home-muted); }
.home-brand-mark { background:var(--home-ink); }
.home-brand-mark span:nth-child(1) { background:var(--home-coral); }
.home-brand-mark span:nth-child(2) { background:var(--home-cyan); }
.home-brand-mark span:nth-child(3) { background:var(--home-gold); }
.home-nav { color:var(--home-muted); }
.home-nav a::after { background:var(--home-coral); }
.home-nav a:hover { color:var(--home-ink); }
.home-login-link { color:var(--home-ink); border-color:var(--home-line); }
.home-login-link span,.home-detail-link span,.home-primary-action span { color:var(--home-coral); }
.home-menu-button { border-color:rgba(92,68,91,.25); }
.home-menu-button span { background:var(--home-ink); }
.home-kicker,.home-section-label { color:#7b9f9e; }
.home-kicker span { background:var(--home-coral); }
.home-hero h1 { color:var(--home-ink); }
.home-hero h1 strong { color:var(--home-coral); }
.home-hero-description { color:var(--home-muted); }
.home-primary-action { color:#fffaf7 !important; background:var(--home-ink); border-color:var(--home-ink); box-shadow:5px 5px 0 var(--home-coral); }
.home-primary-action span { color:#fffaf7; }
.home-primary-action:hover { background:#59425e; box-shadow:3px 3px 0 var(--home-coral); }
.home-text-action { color:var(--home-ink-soft) !important; }
.home-text-action span { color:var(--home-coral); }
.home-proof-avatars img,.home-proof-avatars span { background:var(--home-cyan-soft); border-color:#fffaf7; }
.home-proof-avatars span { color:var(--home-ink-soft); background:#f5e6d6; }
.home-hero-proof p { color:var(--home-muted); }
.home-hero-proof strong { color:var(--home-ink-soft); }
.home-hero-stage { color:#fffaf7; background:var(--home-deep); box-shadow:20px 20px 0 #f3d9d2; }
.home-stage-heading,.home-stage-footer { color:#dbc6d5; }
.home-stage-heading { border-color:rgba(255,237,230,.22); }
.home-stage-heading span:last-child { color:var(--home-gold); }
.home-stage-art { background:var(--home-art); }
.home-stage-art::before { border-color:rgba(255,238,231,.37); }
.home-stage-art::after { background:rgba(255,238,231,.24); }
.home-stage-orbit { border-color:rgba(255,238,231,.42); }
.home-stage-orbit-two { border-color:rgba(255,238,231,.2); }
.home-stage-stamp { color:var(--home-gold); }
.home-stage-caption span,.home-stage-footer strong { color:#fffaf7; }
.home-stage-caption small { color:#ead6dc; }
.home-stage-line { background:rgba(255,237,230,.25); }
.home-stats-band,.home-stat { border-color:var(--home-line); }
.home-stat strong { color:var(--home-ink-soft); }
.home-stat span,.home-stats-band > p { color:var(--home-muted); }
.home-stat-wide i { color:#907331; background:#f8edc8; }
.home-section,.home-final-cta,.home-footer { border-color:var(--home-line); }
.home-section-label { color:#7b9f9e; }
.home-section-label span { color:#aa9baa; }
.home-section h2 { color:var(--home-ink); }
.home-section-intro > p:last-child,.home-wardrobe-heading > p,.home-workflow-copy > p:not(.home-section-label) { color:var(--home-muted); }
.home-capability-list,.home-flow-list,.home-capability,.home-flow-list article { border-color:var(--home-line); }
.home-capability-number { color:#b1a5b1; }
.home-capability h3,.home-flow-list h3 { color:var(--home-ink-soft); }
.home-capability p,.home-flow-list p { color:var(--home-muted); }
.home-capability-icon { color:var(--home-coral); border-color:#e7b3aa; }
.home-capability:hover .home-capability-icon { color:#fffaf7; background:var(--home-coral); }
.home-capability-featured::before { background:var(--home-coral); }
.home-role-rail { border-color:var(--home-line); scrollbar-color:#c8dedc transparent; }
.home-role-button { color:var(--home-muted); border-color:var(--home-line); }
.home-role-button:hover,.home-role-button.is-selected { color:var(--home-ink); background:#f7e9e7; }
.home-role-avatar { background:var(--home-cyan-soft); }
.home-role-button-copy small { color:#aea2ae; }
.home-role-arrow { color:var(--home-coral); }
.home-role-detail { color:#fffaf7; background:var(--home-deep); }
.home-role-detail::before { border-color:rgba(255,238,231,.25); }
.home-role-detail-top { color:#dbc6d5; }
.home-detail-label { color:var(--home-gold); }
.home-role-copy h3 { color:#fffaf7; }
.home-role-copy p { color:#ead6dc; }
.home-role-tags span { color:#f0dfe1; border-color:rgba(255,238,231,.3); }
.home-detail-link { color:#fffaf7 !important; border-color:rgba(255,237,230,.24); }
.home-flow-list article > span { color:var(--home-coral); }
.home-final-cta h2 { color:var(--home-ink); }
.home-final-cta h2 strong { color:var(--home-coral); }
.home-footer { color:#9b8c9c; }
.home-footer .home-brand { color:var(--home-ink-soft); }

/* Scroll-parallax lookbook pieces sit between the paper and the readable content. */
.home-parallax-scene { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.home-parallax-figure { position:absolute; display:block; max-width:none; object-fit:contain; opacity:.13; filter:saturate(.72) contrast(.96); transform:translate3d(0,var(--parallax-y,0px),0) rotate(var(--parallax-rotate,0deg)); will-change:transform; }
.home-parallax-figure-one { top:370px; left:-74px; width:270px; --parallax-rotate:-9deg; }
.home-parallax-figure-two { top:1330px; right:-72px; width:300px; --parallax-rotate:8deg; opacity:.11; }
.home-parallax-figure-three { top:2780px; left:4%; width:170px; --parallax-rotate:-7deg; opacity:.12; }
.home-parallax-line { position:absolute; width:1px; height:410px; background:linear-gradient(to bottom,transparent,rgba(232,144,134,.38),transparent); transform:translate3d(0,var(--parallax-y,0px),0); will-change:transform; }
.home-parallax-line-one { top:660px; right:16%; }
.home-parallax-line-two { top:1960px; left:14%; height:540px; opacity:.65; }
.home-parallax-note { position:absolute; color:rgba(102,82,109,.38); font:600 10px/1 Inter,sans-serif; letter-spacing:.16em; transform:translate3d(0,var(--parallax-y,0px),0) rotate(-90deg); will-change:transform; }
.home-parallax-note-one { top:950px; left:5%; }
.home-parallax-note-two { top:2320px; right:5%; transform:translate3d(0,var(--parallax-y,0px),0) rotate(90deg); }

@media (max-width:680px) {
  .home-nav { background:var(--home-paper); border-color:#edd9d5; box-shadow:8px 8px 0 #f3d9d2; }
  .home-nav a { border-color:#f1e1de; }
  .home-hero-stage { box-shadow:10px 10px 0 #f3d9d2; }
  .home-parallax-figure-one { left:-130px; width:230px; }
  .home-parallax-figure-two { right:-140px; width:240px; }
  .home-parallax-figure-three { left:-40px; width:130px; }
  .home-parallax-note,.home-parallax-line { display:none; }
}

/* Homepage v3: a clearer exhibition layout with a high-contrast locator cursor. */
.home-shell {
  --home-mist:#fcfaf5;
  --home-paper:#fffefa;
  --home-ink:#403344;
  --home-ink-soft:#67536b;
  --home-muted:#887b87;
  --home-line:rgba(91,70,88,.17);
  --home-coral:#e58e83;
  --home-coral-dark:#c9746d;
  --home-coral-soft:#f7ddd7;
  --home-cyan:#9bcfc9;
  --home-cyan-soft:#e3f1ed;
  --home-gold:#e8c875;
  --home-deep:#544157;
  --home-art:#996f83;
  background:var(--home-mist);
}
.home-page {
  background-color:var(--home-mist);
  background-image:linear-gradient(rgba(84,65,87,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(84,65,87,.025) 1px,transparent 1px);
  background-size:64px 64px;
}
.home-header,.home-hero,.home-stats-band,.home-section,.home-final-cta,.home-footer { width:min(1320px,calc(100% - 112px)); }
.home-header { min-height:94px; }
.home-nav { gap:40px; }
.home-hero {
  min-height:650px;
  grid-template-columns:minmax(360px,.78fr) minmax(500px,1.22fr);
  gap:7%;
  padding:76px 0 92px;
}
.home-hero-copy { max-width:560px; }
.home-hero h1 { font-size:clamp(46px,5.2vw,78px); }
.home-hero-description { max-width:455px; margin-top:28px; }
.home-hero-stage { max-width:650px; padding:20px 22px 17px; box-shadow:24px 24px 0 #f1d9d4; transform:rotate(.8deg); }
.home-stage-art { height:465px; }
.home-stage-outfit { width:min(84%,440px); height:410px; }
.home-stage-caption { right:38px; bottom:34px; }
.home-stats-band { min-height:116px; grid-template-columns:165px 165px 215px 1fr; }
.home-capabilities,.home-workflow { grid-template-columns:minmax(280px,.72fr) minmax(0,1.42fr); gap:13%; }
.home-capabilities { padding-top:132px; padding-bottom:140px; }
.home-workflow { padding-top:105px; padding-bottom:135px; }
.home-capability-list { gap:0 38px; }
.home-wardrobe { padding:108px 0 146px; }
.home-wardrobe-layout { grid-template-columns:minmax(270px,.68fr) minmax(0,1.32fr); gap:32px; margin-top:62px; }
.home-role-rail { max-height:568px; grid-template-columns:1fr; gap:0; padding-right:15px; }
.home-role-button { min-height:66px; }
.home-role-detail { min-height:568px; padding:28px 38px 28px; }
.home-role-portrait-wrap { height:288px; }
.home-role-portrait { width:260px; height:288px; }
.home-portrait-ring { width:220px; height:220px; }
.home-final-cta { padding:88px 0 108px; }

/* The pieces are spaced through the whole story, so each scroll segment gets one quiet exhibit. */
.home-parallax-scene { z-index:0; }
.home-parallax-figure {
  opacity:.115;
  filter:saturate(.68) contrast(.96);
  animation:home-exhibit-float 8s ease-in-out infinite;
}
.home-parallax-figure-one { top:290px; left:-95px; width:315px; --parallax-rotate:-9deg; --float-shift:10px; animation-duration:8.5s; }
.home-parallax-figure-two { top:1000px; right:-110px; width:335px; --parallax-rotate:8deg; --float-shift:14px; opacity:.105; animation-duration:10s; }
.home-parallax-figure-three { top:1660px; left:5%; width:185px; --parallax-rotate:-7deg; --float-shift:9px; opacity:.1; animation-duration:7.5s; }
.home-parallax-figure-four { top:2180px; right:4%; width:275px; --parallax-rotate:7deg; --float-shift:12px; opacity:.105; animation-duration:9s; }
.home-parallax-figure-five { top:2740px; right:-92px; width:320px; --parallax-rotate:-6deg; --float-shift:15px; opacity:.09; animation-duration:11s; }
.home-parallax-figure-six { top:3210px; left:-65px; width:225px; --parallax-rotate:9deg; --float-shift:10px; opacity:.095; animation-duration:8s; }
.home-parallax-line-one { top:720px; right:12%; height:430px; }
.home-parallax-line-two { top:2020px; left:11%; height:600px; }
.home-parallax-note-one { top:1110px; left:3.5%; }
.home-parallax-note-two { top:2940px; right:3.5%; }
@keyframes home-exhibit-float {
  0%,100% { transform:translate3d(0,var(--parallax-y,0px),0) rotate(var(--parallax-rotate,0deg)); }
  50% { transform:translate3d(0,calc(var(--parallax-y,0px) - var(--float-shift,10px)),0) rotate(calc(var(--parallax-rotate,0deg) + 1deg)); }
}

@media (max-width:980px) {
  .home-header,.home-hero,.home-stats-band,.home-section,.home-final-cta,.home-footer { width:min(100% - 48px,820px); }
  .home-hero { grid-template-columns:1fr; gap:58px; padding-top:58px; }
  .home-hero-stage { width:min(100%,680px); justify-self:center; }
  .home-capabilities,.home-workflow { grid-template-columns:1fr; gap:48px; }
  .home-wardrobe-layout { grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); }
  .home-role-detail { padding-inline:28px; }
}
@media (max-width:680px) {
  .home-header,.home-hero,.home-stats-band,.home-section,.home-final-cta,.home-footer { width:calc(100% - 32px); }
  .home-header { min-height:70px; }
  .home-nav { background:var(--home-paper); border-color:#ecdcd8; box-shadow:8px 8px 0 #f1d9d4; }
  .home-nav a { border-color:#f2e4e0; }
  .home-hero { padding:48px 0 68px; }
  .home-hero h1 { font-size:42px; }
  .home-hero-stage { box-shadow:10px 10px 0 #f1d9d4; }
  .home-stage-art { height:350px; }
  .home-stage-outfit { width:96%; height:320px; }
  .home-stats-band { grid-template-columns:repeat(2,1fr); }
  .home-wardrobe { padding-top:76px; }
  .home-wardrobe-layout { grid-template-columns:1fr; gap:22px; }
  .home-role-rail { max-height:390px; }
  .home-role-detail { min-height:475px; padding:20px; }
  .home-role-portrait-wrap { height:230px; }
  .home-role-portrait { width:195px; height:230px; }
  .home-portrait-ring { width:175px; height:175px; }
  .home-parallax-figure { display:none; }
  .home-parallax-note,.home-parallax-line { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .home-parallax-figure { animation:none; }
}

/* Homepage v4: a quieter white studio with a compact character card. */
.home-shell {
  --home-mist:#fafbf9;
  --home-paper:#ffffff;
  --home-ink:#2d3d40;
  --home-ink-soft:#506467;
  --home-muted:#7d8d8f;
  --home-line:rgba(53,78,79,.14);
  --home-coral:#d98579;
  --home-coral-dark:#bd6b63;
  --home-coral-soft:#f5e0dc;
  --home-cyan:#a8d5cf;
  --home-cyan-soft:#e6f3f0;
  --home-gold:#d6b96e;
  --home-deep:#ffffff;
  --home-art:#edf5f2;
  color:var(--home-ink);
  background:var(--home-mist);
}
.home-page {
  background-color:var(--home-mist);
  background-image:linear-gradient(rgba(53,78,79,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(53,78,79,.022) 1px,transparent 1px);
  background-size:72px 72px;
}
.home-header,.home-hero,.home-stats-band,.home-section,.home-final-cta,.home-footer { width:min(1280px,calc(100% - 96px)); }
.home-header { min-height:82px; }
.home-brand { color:var(--home-ink); }
.home-brand em { color:var(--home-muted); }
.home-brand-mark { background:var(--home-ink); }
.home-brand-mark span:nth-child(1) { background:var(--home-coral); }
.home-brand-mark span:nth-child(2) { background:var(--home-cyan); }
.home-brand-mark span:nth-child(3) { background:var(--home-gold); }
.home-nav { color:var(--home-muted); gap:34px; }
.home-nav a::after { background:var(--home-coral); }
.home-nav a:hover { color:var(--home-ink); }
.home-login-link { color:var(--home-ink); border-color:var(--home-line); }
.home-login-link span,.home-detail-link span,.home-primary-action span { color:var(--home-coral); }
.home-menu-button { border-color:rgba(53,78,79,.25); }
.home-menu-button span { background:var(--home-ink); }
.home-kicker,.home-section-label { color:#6c9993; }
.home-kicker span { background:var(--home-coral); }
.home-hero {
  min-height:565px;
  grid-template-columns:minmax(0,1fr) minmax(440px,.98fr);
  gap:6%;
  padding:62px 0 72px;
}
.home-hero-copy { max-width:585px; }
.home-hero h1 { max-width:600px; color:var(--home-ink); font-size:clamp(42px,4.25vw,62px); line-height:1.1; }
.home-hero h1 strong { color:var(--home-coral); }
.home-hero-description { max-width:450px; margin-top:24px; color:var(--home-muted); font-size:13px; line-height:1.85; }
.home-hero-actions { margin-top:30px; }
.home-primary-action { min-height:44px; padding-inline:18px; color:#fff !important; background:var(--home-ink); border-color:var(--home-ink); box-shadow:4px 4px 0 var(--home-coral-soft); font-size:11px; }
.home-primary-action span { color:#fff; }
.home-primary-action:hover { background:#405457; box-shadow:2px 2px 0 var(--home-coral-soft); }
.home-text-action { color:var(--home-ink-soft) !important; }
.home-text-action span { color:var(--home-coral); }
.home-proof-avatars img,.home-proof-avatars span { background:var(--home-cyan-soft); border-color:var(--home-mist); }
.home-proof-avatars span { color:var(--home-ink-soft); background:#f1e9d9; }
.home-hero-proof p { color:var(--home-muted); }
.home-hero-proof strong { color:var(--home-ink-soft); }
.home-hero-stage {
  max-width:610px;
  padding:16px 18px 14px;
  color:var(--home-ink-soft);
  background:#fff;
  border:1px solid var(--home-line);
  box-shadow:12px 12px 0 #edf3f0;
  transform:rotate(.45deg);
}
.home-stage-heading,.home-stage-footer { color:#7b9492; }
.home-stage-heading { padding-bottom:11px; border-color:rgba(80,115,114,.16); }
.home-stage-heading span:last-child { color:#ad8e43; }
.home-stage-art { height:360px; background:#eaf3f0; }
.home-stage-art::before { inset:17px; border-color:rgba(74,122,117,.23); }
.home-stage-art::after { right:17px; bottom:17px; left:17px; background:rgba(74,122,117,.17); }
.home-stage-orbit { border-color:rgba(74,122,117,.28); }
.home-stage-orbit-two { border-color:rgba(74,122,117,.14); }
.home-stage-stamp { top:32px; left:30px; color:#b7984d; }
.home-stage-outfit { width:min(82%,360px); height:325px; filter:drop-shadow(0 12px 14px rgba(50,80,78,.15)); }
.home-stage-caption { right:28px; bottom:26px; }
.home-stage-caption span { color:var(--home-ink); font-size:21px; }
.home-stage-caption small { color:#708688; }
.home-stage-footer { padding-top:11px; }
.home-stage-footer strong { color:var(--home-ink-soft); }
.home-stage-line { background:rgba(80,115,114,.18); }
.home-stats-band { min-height:98px; grid-template-columns:145px 145px 190px 1fr; }
.home-stat { border-color:var(--home-line); }
.home-stat strong { color:var(--home-ink-soft); font-size:24px; }
.home-stat span,.home-stats-band > p { color:var(--home-muted); }
.home-stat-wide i { color:#8d7134; background:#f5edcf; }
.home-section,.home-final-cta,.home-footer { border-color:var(--home-line); }
.home-section h2 { color:var(--home-ink); font-size:clamp(26px,3vw,40px); line-height:1.2; }
.home-section-intro > p:last-child,.home-wardrobe-heading > p,.home-workflow-copy > p:not(.home-section-label) { color:var(--home-muted); }
.home-capabilities,.home-workflow { grid-template-columns:minmax(270px,.78fr) minmax(0,1.32fr); gap:10%; }
.home-capabilities { padding-top:112px; padding-bottom:118px; }
.home-workflow { padding-top:94px; padding-bottom:116px; }
.home-capability-list,.home-flow-list,.home-capability,.home-flow-list article { border-color:var(--home-line); }
.home-capability { min-height:132px; padding:24px 0 20px; }
.home-capability-number { color:#a3b5b4; }
.home-capability h3,.home-flow-list h3 { color:var(--home-ink-soft); font-size:15px; }
.home-capability p,.home-flow-list p { color:var(--home-muted); }
.home-capability-icon { color:var(--home-coral); border-color:#e5b4ad; }
.home-capability:hover .home-capability-icon { color:#fff; background:var(--home-coral); }
.home-capability-featured::before { background:var(--home-coral); }
.home-wardrobe { padding:88px 0 116px; border-top-color:var(--home-line); }
.home-wardrobe-heading { gap:30px; }
.home-wardrobe-heading > p { max-width:280px; }
.home-wardrobe-layout { grid-template-columns:minmax(360px,1.08fr) minmax(0,.92fr); gap:40px; margin-top:48px; align-items:start; }
.home-role-rail { max-height:420px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; padding-right:10px; border-color:var(--home-line); scrollbar-color:#b9d7d2 transparent; }
.home-role-button { min-height:58px; grid-template-columns:38px minmax(0,1fr) 16px; gap:9px; padding:8px 4px; color:var(--home-muted); border-color:var(--home-line); }
.home-role-button:hover,.home-role-button.is-selected { padding-left:9px; color:var(--home-ink); background:#edf6f3; }
.home-role-avatar { width:36px; height:36px; background:var(--home-cyan-soft); }
.home-role-button-copy strong { font-size:12px; }
.home-role-button-copy small { color:#a6b6b5; }
.home-role-arrow { color:var(--home-coral); }
.home-role-detail {
  width:100%;
  max-width:700px;
  min-height:408px;
  display:grid;
  grid-template-columns:minmax(145px,.72fr) minmax(0,1.28fr);
  grid-template-rows:auto 1fr auto;
  align-items:center;
  padding:20px 24px 19px;
  color:var(--home-ink);
  background:#fff;
  border:1px solid var(--home-line);
  box-shadow:8px 8px 0 #eef5f2;
}
.home-role-detail::before { top:55px; right:-95px; width:270px; height:170px; border-color:rgba(105,162,155,.18); }
.home-role-detail-top { grid-column:1/-1; grid-row:1; color:#809998; }
.home-detail-label { color:#b08d3c; }
.home-role-portrait-wrap { grid-column:1; grid-row:2/4; height:285px; }
.home-role-portrait { width:185px; height:245px; filter:drop-shadow(0 11px 13px rgba(50,80,78,.14)); }
.home-portrait-ring { width:175px; height:175px; border-color:rgba(105,162,155,.25); }
.home-role-copy { grid-column:2; grid-row:2; align-self:end; }
.home-role-copy h3 { color:var(--home-ink); font-size:24px; }
.home-role-copy p { max-width:255px; min-height:0; margin:8px 0 14px; color:var(--home-muted); font-size:11px; }
.home-role-tags span { padding:5px 7px; color:#688986; border-color:#c6e0db; }
.home-detail-link { grid-column:2; grid-row:3; margin-top:17px; padding-top:12px; color:var(--home-ink-soft) !important; border-color:var(--home-line); }
.home-flow-list article > span { color:var(--home-coral); }
.home-final-cta { padding:68px 0 82px; }
.home-final-cta h2 { color:var(--home-ink); font-size:clamp(30px,4vw,50px); }
.home-final-cta h2 strong { color:var(--home-coral); }
.home-footer { color:#869797; }
.home-footer .home-brand { color:var(--home-ink-soft); }

@media (max-width:980px) {
  .home-header,.home-hero,.home-stats-band,.home-section,.home-final-cta,.home-footer { width:min(100% - 48px,820px); }
  .home-hero { grid-template-columns:1fr; gap:44px; padding-top:52px; }
  .home-hero-stage { width:min(100%,620px); justify-self:center; }
  .home-wardrobe-layout { grid-template-columns:1fr; gap:24px; }
  .home-role-detail { max-width:720px; justify-self:end; }
}
@media (max-width:680px) {
  .home-header,.home-hero,.home-stats-band,.home-section,.home-final-cta,.home-footer { width:calc(100% - 32px); }
  .home-header { min-height:70px; }
  .home-nav { background:var(--home-paper); border-color:#d6e8e4; box-shadow:8px 8px 0 #e5f1ee; }
  .home-nav a { border-color:#e7f1ef; }
  .home-hero { padding:44px 0 55px; }
  .home-hero h1 { font-size:40px; }
  .home-hero-stage { box-shadow:7px 7px 0 #e8f1ee; }
  .home-stage-art { height:300px; }
  .home-stage-outfit { width:96%; height:275px; }
  .home-stats-band { grid-template-columns:repeat(2,1fr); }
  .home-section h2 { font-size:29px; }
  .home-wardrobe { padding-top:70px; }
  .home-role-rail { max-height:350px; grid-template-columns:1fr; }
  .home-role-detail { min-height:405px; padding:18px; box-shadow:6px 6px 0 #eef5f2; }
  .home-role-portrait-wrap { height:275px; }
  .home-role-portrait { width:175px; height:225px; }
  .home-portrait-ring { width:160px; height:160px; }
  .home-final-cta { padding:55px 0 70px; }
}
@media (max-width:430px) {
  .home-role-detail { grid-template-columns:125px minmax(0,1fr); padding-inline:14px; }
  .home-role-portrait-wrap { height:250px; }
  .home-role-portrait { width:145px; height:205px; }
  .home-portrait-ring { width:140px; height:140px; }
  .home-role-copy h3 { font-size:21px; }
  .home-role-tags { gap:5px; }
  .home-role-tags span { font-size:8px; }
}

/* Homepage v5: reference-led editorial landing page proportions. */
.home-shell {
  --home-mist:#fcfbf8;
  --home-paper:#fffefa;
  --home-ink:#304245;
  --home-ink-soft:#52696b;
  --home-muted:#829294;
  --home-line:rgba(73,103,101,.13);
  --home-coral:#ef7f73;
  --home-coral-dark:#dc6b62;
  --home-coral-soft:#fbe4df;
  --home-cyan:#b9ddd6;
  --home-cyan-soft:#e8f4f0;
  --home-gold:#d7ad5d;
  background:var(--home-mist);
}
.home-page {
  background-color:var(--home-mist);
  background-image:linear-gradient(rgba(73,103,101,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(73,103,101,.014) 1px,transparent 1px);
  background-size:80px 80px;
}
.home-header,.home-hero,.home-stats-band,.home-section,.home-final-cta,.home-footer { width:min(1280px,calc(100% - 64px)); }
.home-header { min-height:88px; }
.home-brand-mark { width:38px; height:34px; justify-content:center; border-radius:10px 10px 10px 2px; }
.home-brand > span:last-child { font-size:20px; }
.home-nav { gap:42px; color:#708487; }
.home-nav a,.home-login-link { font-size:13px; }
.home-login-link { color:var(--home-ink); border-color:var(--home-line); }
.home-hero {
  min-height:554px;
  grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);
  gap:6%;
  padding:56px 0 64px;
  align-items:center;
}
.home-hero-copy { max-width:570px; }
.home-kicker { margin-bottom:22px; font-size:13px; }
.home-hero h1 { max-width:600px; font-size:clamp(44px,4.5vw,68px); line-height:1.08; letter-spacing:-.025em; }
.home-hero h1 strong { color:var(--home-coral); }
.home-hero-description { max-width:470px; margin-top:25px; font-size:14px; line-height:1.8; }
.home-hero-actions { margin-top:29px; }
.home-primary-action { min-height:44px; padding-inline:18px; color:#fff !important; background:var(--home-ink); border-color:var(--home-ink); box-shadow:4px 4px 0 var(--home-coral-soft); font-size:11px; }
.home-primary-action span { color:#fff; }
.home-primary-action:hover { background:#405457; box-shadow:2px 2px 0 var(--home-coral-soft); }
.home-text-action { color:var(--home-ink-soft) !important; }
.home-text-action span { color:var(--home-coral); }
.home-hero-proof { margin-top:34px; }
.home-hero-stage {
  width:100%;
  max-width:680px;
  padding:17px 18px 14px;
  border-radius:12px;
  box-shadow:12px 14px 0 #edf4f1;
  transform:rotate(.3deg);
}
.home-stage-heading { font-size:11px; }
.home-stage-art { height:376px; border-radius:8px; }
.home-stage-outfit { width:min(84%,410px); height:342px; }
.home-stage-stamp { color:var(--home-coral); font-size:11px; }
.home-stage-caption span { font-size:22px; }
.home-stage-footer { font-size:10px; }
.home-stage-controls { display:inline-flex; align-items:center; gap:8px; }
.home-stage-control {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  padding:0;
  color:#b2bebd;
  background:rgba(255,255,255,.68);
  border:0;
  border-radius:50%;
  cursor:pointer;
  font:500 22px/.8 Arial,sans-serif;
  transition:color .18s ease,background .18s ease,transform .18s ease;
}
.home-stage-control span { display:block; margin-top:-2px; }
.home-stage-control:hover { color:var(--home-coral); background:#fff; transform:translateY(-1px); }
.home-stage-control:focus-visible { outline:2px solid var(--home-coral); outline-offset:2px; }
.home-stats-band {
  min-height:108px;
  grid-template-columns:155px 155px 205px 1fr;
  padding:18px 32px;
  border:1px solid var(--home-line);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 24px rgba(53,87,82,.04);
}
.home-stat strong { font-size:26px; }
.home-stat-wide i { color:#926d25; background:#fff4d9; border-radius:10px; }
.home-stats-band > p { font-size:13px; line-height:1.55; }
.home-section h2 { font-size:clamp(27px,3vw,39px); letter-spacing:-.01em; }
.home-capabilities { padding-top:118px; }
.home-wardrobe { padding-top:92px; }
.home-final-cta h2 { font-size:clamp(30px,3.7vw,48px); }

/* Give the character rail enough scale for visual scanning and touch input. */
.home-role-rail {
  max-height:532px;
  grid-auto-rows:auto;
  gap:0 26px;
  padding-right:12px;
}
.home-role-button {
  min-height:76px;
  grid-template-columns:50px minmax(0,1fr) 20px;
  gap:12px;
  padding:11px 6px;
}
.home-role-button:hover { color:var(--home-ink); background:rgba(232,244,240,.46); }
.home-role-button.is-selected {
  color:var(--home-ink);
  background:rgba(223,241,236,.52);
  box-shadow:inset 3px 0 0 #91c9bf;
}
.home-role-avatar { width:48px; height:48px; }
.home-role-button-copy { gap:10px; }
.home-role-button-copy strong { font-size:14px; }
.home-role-button-copy small { font-size:10px; }
.home-role-arrow { font-size:17px; }
.home-role-button:focus,.home-role-button:focus-visible { outline:none; }

/* Match the original tilted brand mark treatment. */
.home-brand-mark { transform:rotate(-7deg); }
.home-brand-mark span { width:5px; }
.home-brand-mark span:nth-child(1) { height:11px; }
.home-brand-mark span:nth-child(2) { height:17px; }
.home-brand-mark span:nth-child(3) { height:9px; }

@media (max-width:1100px) {
  .home-header,.home-hero,.home-stats-band,.home-section,.home-final-cta,.home-footer { width:min(100% - 48px,900px); }
  .home-hero { grid-template-columns:1fr; gap:42px; }
  .home-hero-stage { justify-self:center; }
  .home-role-rail { max-height:456px; }
}
@media (max-width:680px) {
  .home-header,.home-hero,.home-stats-band,.home-section,.home-final-cta,.home-footer { width:calc(100% - 32px); }
  .home-header { min-height:72px; }
  .home-brand-mark { width:34px; height:34px; }
  .home-brand > span:last-child { font-size:18px; }
  .home-nav { box-shadow:8px 8px 0 #e8f2ef; }
  .home-hero { padding:44px 0 52px; }
  .home-hero h1 { font-size:40px; }
  .home-hero-description { font-size:13px; }
  .home-text-action { margin-left:17px; }
  .home-hero-stage { padding:13px 13px 12px; box-shadow:7px 8px 0 #e8f1ee; }
  .home-stage-art { height:296px; }
  .home-stage-outfit { width:98%; height:270px; }
  .home-stage-caption { right:18px; bottom:21px; }
  .home-stats-band { padding:16px; border-radius:10px; }
  .home-stats-band > p { grid-column:1/-1; padding-top:10px; border-top:1px solid var(--home-line); }
  .home-capabilities,.home-workflow {
    grid-template-columns:1fr;
    gap:42px;
    padding-top:76px;
    padding-bottom:84px;
  }
  .home-capability-list { grid-template-columns:1fr; }
  .home-capability { min-height:118px; }
  .home-flow-list article {
    min-height:112px;
    grid-template-columns:38px minmax(0,1fr);
    gap:14px;
    padding:23px 0;
  }
  .home-flow-list h3 { font-size:16px; }
  .home-wardrobe-layout { gap:28px; }
  .home-role-rail {
    max-height:470px;
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:0;
    padding-right:8px;
    -webkit-overflow-scrolling:touch;
  }
  .home-role-button {
    min-height:74px;
    grid-template-columns:50px minmax(0,1fr) 24px;
    gap:13px;
    padding:11px 8px;
  }
  .home-role-button:hover { padding-left:8px; }
  .home-role-avatar { width:48px; height:48px; }
  .home-role-button-copy strong { font-size:14px; }
  .home-role-button-copy small { font-size:10px; }
  .home-role-arrow { opacity:1; font-size:18px; transform:none; }
}

/* Workstation theme: monochrome black, white, and gray palette. */
body:not(:has(.home-shell)) {
  --page:#f7f7f7;
  --surface:#ffffff;
  --surface-soft:#f0f0f0;
  --surface-muted:#e7e7e7;
  --primary:#202020;
  --primary-dark:#000000;
  --primary-soft:#e8e8e8;
  --ink:#202020;
  --muted:#777777;
  --line:#dddddc;
  --success:#555555;
  --error:#555555;
  --shadow:0 16px 40px rgba(0,0,0,.08);
  color:var(--ink);
  background:var(--page);
}
body:not(:has(.home-shell))::before { opacity:.16; background-image:radial-gradient(rgba(0,0,0,.08) .6px,transparent .6px); }
body:not(:has(.home-shell)) .login-view { background:var(--page); }
body:not(:has(.home-shell)) .login-view::before { border-color:rgba(0,0,0,.1); }
body:not(:has(.home-shell)) .login-panel {
  background:rgba(255,255,255,.96);
  border-color:var(--line);
  border-radius:18px;
  box-shadow:var(--shadow),0 2px 0 rgba(255,255,255,.9) inset;
}
body:not(:has(.home-shell)) .login-home-link,
body:not(:has(.home-shell)) .eyebrow { color:var(--primary); }
body:not(:has(.home-shell)) .login-home-link span:first-child { color:#555555; }
body:not(:has(.home-shell)) .eyebrow::before { background:#202020; }
body:not(:has(.home-shell)) .input-field,
body:not(:has(.home-shell)) .selector-label { color:#555555; }
body:not(:has(.home-shell)) .input-wrap input,
body:not(:has(.home-shell)) .select-wrap select,
body:not(:has(.home-shell)) .custom-picker-trigger,
body:not(:has(.home-shell)) .mutual-secondary-field input { background:#f5f5f5; border-color:var(--line); }
body:not(:has(.home-shell)) .input-wrap input:focus,
body:not(:has(.home-shell)) .select-wrap select:focus,
body:not(:has(.home-shell)) .custom-picker-trigger:hover,
body:not(:has(.home-shell)) .custom-picker-trigger:focus,
body:not(:has(.home-shell)) .mutual-secondary-field input:focus {
  background:#ffffff;
  border-color:#202020;
  box-shadow:0 0 0 4px rgba(0,0,0,.1);
}
body:not(:has(.home-shell)) .primary-button {
  color:#ffffff;
  background:#4a4a4a;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}
body:not(:has(.home-shell)) .primary-button:hover { background:#5a5a5a; box-shadow:0 13px 26px rgba(0,0,0,.18); }
body:not(:has(.home-shell)) .secondary-button { color:var(--ink); background:#f3f3f3; border-color:var(--line); }
body:not(:has(.home-shell)) .secondary-button:hover { background:#e9e9e9; }
body:not(:has(.home-shell)) .user-card,
body:not(:has(.home-shell)) .detail-identity,
body:not(:has(.home-shell)) .selector-card,
body:not(:has(.home-shell)) .signature-query,
body:not(:has(.home-shell)) .signature-result,
body:not(:has(.home-shell)) .activity-reward-card,
body:not(:has(.home-shell)) .mutual-query-card,
body:not(:has(.home-shell)) .my-card,
body:not(:has(.home-shell)) .function-item,
body:not(:has(.home-shell)) .preview-hero {
  background:#ffffff;
  border-color:var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.045);
}
body:not(:has(.home-shell)) .avatar { background:#f1f1f1; box-shadow:0 0 0 1px #d7d7d7; }
body:not(:has(.home-shell)) .avatar.employee-avatar { background:#ededed; }
body:not(:has(.home-shell)) .online-dot { background:#777777; }
body:not(:has(.home-shell)) .section-heading { color:var(--ink); background:transparent; border-color:var(--line); }
body:not(:has(.home-shell)) .section-title .material-symbols,
body:not(:has(.home-shell)) .activity-reward-heading .material-symbols,
body:not(:has(.home-shell)) .mutual-query-heading .material-symbols,
body:not(:has(.home-shell)) .function-group-heading > .material-symbols,
body:not(:has(.home-shell)) .function-icon { color:#202020; }
body:not(:has(.home-shell)) .count-badge,
body:not(:has(.home-shell)) .function-icon { background:#e8e8e8; }
body:not(:has(.home-shell)) .employee-row,
body:not(:has(.home-shell)) .empty { background:#f4f4f4; }
body:not(:has(.home-shell)) .employee-row:hover,
body:not(:has(.home-shell)) .function-item:hover { background:#ffffff; border-color:#999999; }
body:not(:has(.home-shell)) .employee-arrow { color:#777777; background:#ffffff; }
body:not(:has(.home-shell)) .back-link { color:var(--ink); background:#e8e8e8; }
body:not(:has(.home-shell)) .back-link:hover { background:#dcdcdc; }
body:not(:has(.home-shell)) .bottom-nav { background:rgba(255,255,255,.96); border-color:var(--line); box-shadow:0 -10px 32px rgba(0,0,0,.08); }
body:not(:has(.home-shell)) .nav-item { color:#777777; }
body:not(:has(.home-shell)) .nav-item:hover,
body:not(:has(.home-shell)) .nav-item.active { color:var(--ink); }
body:not(:has(.home-shell)) .nav-item.active::after { background:#202020; }
body:not(:has(.home-shell)) .selector-card .picker-value-image { background:#f1f1f1; border-color:#dddddd; }
body:not(:has(.home-shell)) .popular-outfit-option,
body:not(:has(.home-shell)) .outfit-option { color:#555555; background:#f4f4f4; border-color:var(--line); }
body:not(:has(.home-shell)) .popular-outfit-option:hover,
body:not(:has(.home-shell)) .outfit-option:hover { color:var(--ink); background:#ffffff; border-color:#999999; }
body:not(:has(.home-shell)) .popular-outfit-option.is-selected,
body:not(:has(.home-shell)) .outfit-option.is-selected,
body:not(:has(.home-shell)) .picker-body button.outfit-option.is-selected {
  color:var(--ink) !important;
  background:#e5e5e5 !important;
  border-color:#777777 !important;
  box-shadow:0 6px 15px rgba(0,0,0,.1) !important;
}
body:not(:has(.home-shell)) .popular-outfit-rank { color:#202020; background:#ffffff; border-color:#bdbdbd; }
body:not(:has(.home-shell)) .modal,
body:not(:has(.home-shell)) .picker-modal { background:rgba(0,0,0,.3); }
body:not(:has(.home-shell)) .modal-card { background:#ffffff; border-color:var(--line); box-shadow:0 24px 70px rgba(0,0,0,.18); }
body:not(:has(.home-shell)) .detail-page > .detail-identity { background:#ffffff; }
body:not(:has(.home-shell)) .checkin-panel,
body:not(:has(.home-shell)) .checkin-history,
body:not(:has(.home-shell)) .mutual-result { background:#ffffff; border-color:var(--line); }
body:not(:has(.home-shell)) .checkin-panel-icon { color:#202020; background:#e8e8e8; }
body:not(:has(.home-shell)) .mutual-user-card { border-radius:6px; border-color:#e4e4e4; background:#fff; box-shadow:none; }
body:not(:has(.home-shell)) .mutual-user-card:hover { border-color:#aaa; background:#fafafa; box-shadow:none; }
body:not(:has(.home-shell)) .mutual-user-card:focus-visible { outline:2px solid #555; outline-offset:2px; }
body:not(:has(.home-shell)) .mutual-user-card.is-selected { border-color:#b8b8b8; background:#f6f6f6; box-shadow:none; }
body:not(:has(.home-shell)) .mutual-user-card.is-selected .mutual-select > span { border-color:#242424; background:#242424; box-shadow:none; }
body:not(:has(.home-shell)) .mutual-avatar { color:#444; background:#f3f3f3; border-color:#e0e0e0; }
body:not(:has(.home-shell)) .mutual-check-all { color:#555; background:#fff; border-color:#ddd; border-radius:6px; }
body:not(:has(.home-shell)) .mutual-check-all:hover { color:#222; background:#f5f5f5; border-color:#aaa; }

/* Keep both outfit pickers monochrome, including their image tiles and states. */
body:not(:has(.home-shell)) .picker-card,
body:not(:has(.home-shell)) .picker-header,
body:not(:has(.home-shell)) .picker-actions { background:#ffffff; border-color:var(--line); }
body:not(:has(.home-shell)) .picker-heading h2,
body:not(:has(.home-shell)) .picker-subtitle,
body:not(:has(.home-shell)) .picker-column-title,
body:not(:has(.home-shell)) .picker-empty { color:var(--ink); }
body:not(:has(.home-shell)) .picker-close { color:#555555; background:#f1f1f1; border-color:#dddddd; }
body:not(:has(.home-shell)) .picker-close:hover { color:#ffffff; background:#5a5a5a; }
body:not(:has(.home-shell)) .popular-outfit-option,
body:not(:has(.home-shell)) .picker-body button.outfit-option,
body:not(:has(.home-shell)) .picker-body button.time-choice {
  color:#555555 !important;
  background:#f4f4f4 !important;
  border-color:#dddddd !important;
}
body:not(:has(.home-shell)) .popular-outfit-option:hover,
body:not(:has(.home-shell)) .picker-body button.outfit-option:hover,
body:not(:has(.home-shell)) .picker-body button.time-choice:hover {
  color:#202020 !important;
  background:#ffffff !important;
  border-color:#999999 !important;
}
body:not(:has(.home-shell)) .popular-outfit-option.is-selected,
body:not(:has(.home-shell)) .picker-body button.outfit-option.is-selected,
body:not(:has(.home-shell)) .picker-body button.time-choice.is-selected {
  color:#202020 !important;
  background:#e5e5e5 !important;
  border-color:#777777 !important;
  box-shadow:0 6px 15px rgba(0,0,0,.1) !important;
}
body:not(:has(.home-shell)) .popular-outfit-rank,
body:not(:has(.home-shell)) .popular-outfit-image,
body:not(:has(.home-shell)) .popular-outfit-part-label,
body:not(:has(.home-shell)) .outfit-option-image,
body:not(:has(.home-shell)) .outfit-option-avatar,
body:not(:has(.home-shell)) .outfit-option-image.is-empty {
  color:#555555;
  background:#ededed;
  border-color:#d2d2d2;
}
body:not(:has(.home-shell)) .popular-outfit-image-fallback,
body:not(:has(.home-shell)) .popular-outfit-plus,
body:not(:has(.home-shell)) .popular-outfit-part-name,
body:not(:has(.home-shell)) .popular-outfit-values,
body:not(:has(.home-shell)) .popular-outfit-copy small,
body:not(:has(.home-shell)) .outfit-option.is-selected .option-check {
  color:#555555;
}
body:not(:has(.home-shell)) .picker-body {
  scrollbar-color:#bdbdbd #f1f1f1;
}
body:not(:has(.home-shell)) .picker-body::-webkit-scrollbar-track,
body:not(:has(.home-shell)) .time-choice-list::-webkit-scrollbar-track { background:#f1f1f1; }
body:not(:has(.home-shell)) .picker-body::-webkit-scrollbar-thumb,
body:not(:has(.home-shell)) .time-choice-list::-webkit-scrollbar-thumb { background:#bdbdbd; border-color:#f1f1f1; }
body:not(:has(.home-shell)) .picker-body::-webkit-scrollbar-thumb:hover,
body:not(:has(.home-shell)) .time-choice-list::-webkit-scrollbar-thumb:hover { background:#888888; }

/* The face/head/cloth picker has a more specific legacy state block; keep it grayscale too. */
body:not(:has(.home-shell)) .picker-modal[data-picker-key="head"] .picker-body button.outfit-option,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="face"] .picker-body button.outfit-option,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="cloth"] .picker-body button.outfit-option {
  color:#555555 !important;
  background:#f4f4f4 !important;
  border-color:#dddddd !important;
}
body:not(:has(.home-shell)) .picker-modal[data-picker-key="head"] .picker-body button.outfit-option:hover,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="face"] .picker-body button.outfit-option:hover,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="cloth"] .picker-body button.outfit-option:hover {
  color:#202020 !important;
  background:#ffffff !important;
  border-color:#999999 !important;
}
body:not(:has(.home-shell)) .picker-modal[data-picker-key="head"] .picker-body button.outfit-option.is-selected,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="face"] .picker-body button.outfit-option.is-selected,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="cloth"] .picker-body button.outfit-option.is-selected {
  color:#202020 !important;
  background:#e5e5e5 !important;
  border-color:#777777 !important;
  box-shadow:0 6px 15px rgba(0,0,0,.1) !important;
}
body:not(:has(.home-shell)) .picker-modal[data-picker-key="head"] .outfit-option-image,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="face"] .outfit-option-image,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="cloth"] .outfit-option-image,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="head"] .outfit-option-image.is-empty,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="face"] .outfit-option-image.is-empty,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="cloth"] .outfit-option-image.is-empty {
  background:#ededed;
  border-color:#d2d2d2;
}
body:not(:has(.home-shell)) .picker-modal[data-picker-key="head"] .outfit-option-avatar,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="face"] .outfit-option-avatar,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="cloth"] .outfit-option-avatar {
  color:#555555;
  background:#ededed;
}

/* Refreshing the account avatar is the single blue action in the monochrome workbench. */
body:not(:has(.home-shell)) .avatar-refresh-button {
  color:#2563eb;
  background:#eff6ff;
  border-color:#93c5fd;
  box-shadow:0 1px 4px rgba(37,99,235,.14);
}
body:not(:has(.home-shell)) .avatar-refresh-button:hover {
  color:#1d4ed8;
  background:#dbeafe;
  border-color:#60a5fa;
}
body:not(:has(.home-shell)) .avatar-refresh-button:focus-visible {
  outline:3px solid rgba(37,99,235,.24);
  outline-offset:2px;
}

/* Final mobile home navigation layer. Keep the menu opaque and above the hero. */
@media (max-width:680px) {
  .home-shell .home-header {
    position:relative;
    z-index:100;
  }
  .home-shell .home-nav {
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    left:0;
    z-index:110;
    display:grid;
    gap:0;
    padding:8px 18px;
    overflow:hidden;
    background:#ffffff !important;
    border:1px solid #d7d7d7 !important;
    box-shadow:0 16px 34px rgba(0,0,0,.14) !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
  }
  .home-shell .home-nav.is-open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .home-shell .home-nav a,
  .home-shell .home-nav a:hover {
    display:block;
    position:relative;
    z-index:1;
    padding:16px 0;
    color:#222222 !important;
    border-bottom:1px solid #ededed !important;
  }
  .home-shell .home-nav a:last-child { border-bottom:0 !important; }
  .home-shell .home-nav a::after { display:none; }
  .home-shell .home-menu-button { position:relative; z-index:120; }
  .home-shell .home-hero,
  .home-shell main { position:relative; z-index:1; }
}

/* Keep the preview action in the monochrome workbench palette. */
body:not(:has(.home-shell)) .preview-link,
body:not(:has(.home-shell)) .preview-link:visited {
  color:#222222 !important;
  background:#e7e7e7 !important;
  border-color:#bdbdbd !important;
  box-shadow:none !important;
}
body:not(:has(.home-shell)) .preview-link:hover,
body:not(:has(.home-shell)) .preview-link:focus-visible {
  color:#111111 !important;
  background:#d9d9d9 !important;
  border-color:#8f8f8f !important;
  box-shadow:0 5px 12px rgba(0,0,0,.1) !important;
}

/* Remove leftover green interaction states from the workbench. */
body:not(:has(.home-shell)) :is(
  .back-link,
  .preview-link,
  .primary-button,
  .secondary-button,
  .custom-picker-trigger,
  .select-wrap select,
  .popular-outfit-option,
  .outfit-option,
  .time-choice,
  .function-item,
  .employee-row,
  .nav-item,
  .icon-button,
  .account-history-toggle,
  .password-toggle
):hover,
body:not(:has(.home-shell)) :is(
  .back-link,
  .preview-link,
  .primary-button,
  .secondary-button,
  .custom-picker-trigger,
  .select-wrap select,
  .popular-outfit-option,
  .outfit-option,
  .time-choice,
  .function-item,
  .employee-row,
  .nav-item,
  .icon-button,
  .account-history-toggle,
  .password-toggle
):focus-visible {
  border-color:#999999 !important;
  box-shadow:0 0 0 3px rgba(0,0,0,.08) !important;
}
body:not(:has(.home-shell)) :is(
  .back-link:hover,
  .preview-link:hover,
  .secondary-button:hover,
  .custom-picker-trigger:hover,
  .popular-outfit-option:hover,
  .outfit-option:hover,
  .time-choice:hover,
  .function-item:hover,
  .employee-row:hover
) {
  color:#222222 !important;
  background:#eeeeee !important;
}
body:not(:has(.home-shell)) .primary-button:hover {
  color:#ffffff !important;
  background:#5a5a5a !important;
  border-color:#5a5a5a !important;
}
body:not(:has(.home-shell)) .time-choice.is-selected,
body:not(:has(.home-shell)) .outfit-option.is-selected,
body:not(:has(.home-shell)) .popular-outfit-option.is-selected {
  color:#ffffff !important;
  background:#666666 !important;
  border-color:#666666 !important;
  box-shadow:0 6px 15px rgba(0,0,0,.14) !important;
}
body:not(:has(.home-shell)) :is(.nav-item:hover,.nav-item.active,.icon-button:hover,.account-history-toggle:hover,.password-toggle:hover) {
  color:#333333 !important;
  background:#eeeeee !important;
}
body:not(:has(.home-shell)) :focus-visible {
  outline-color:#777777 !important;
}

/* Keep detail header actions monochrome on hover and focus. */
body:not(:has(.home-shell)) .detail-top-actions .detail-header-action,
body:not(:has(.home-shell)) .detail-top-actions .detail-header-action:visited {
  color:#222222 !important;
  background:#e7e7e7 !important;
  border-color:#bdbdbd !important;
  box-shadow:none !important;
}
body:not(:has(.home-shell)) .detail-top-actions .detail-header-action:hover,
body:not(:has(.home-shell)) .detail-top-actions .detail-header-action:focus-visible {
  color:#111111 !important;
  background:#d9d9d9 !important;
  border-color:#8f8f8f !important;
  box-shadow:0 5px 12px rgba(0,0,0,.1) !important;
}
body:not(:has(.home-shell)) .detail-top-actions .detail-header-action:focus-visible {
  outline:3px solid rgba(0,0,0,.14) !important;
  outline-offset:2px;
}

/* Bottom navigation stays transparent; only its active text and indicator change. */
body:not(:has(.home-shell)) .bottom-nav .nav-item,
body:not(:has(.home-shell)) .bottom-nav .nav-item:hover,
body:not(:has(.home-shell)) .bottom-nav .nav-item.active,
body:not(:has(.home-shell)) .bottom-nav .nav-item:focus,
body:not(:has(.home-shell)) .bottom-nav .nav-item:focus-visible {
  background:transparent !important;
  box-shadow:none !important;
}

/* Refined empty-state panels for activity rewards and mutual queries. */
body:not(:has(.home-shell)) .activity-reward-card,
body:not(:has(.home-shell)) .mutual-query-card {
  box-sizing:border-box;
  max-width:780px;
  margin:0 auto;
  padding:24px 28px 20px;
  text-align:left;
  border:1px solid #dedede;
  border-radius:14px;
  background:#ffffff;
  box-shadow:0 10px 28px rgba(0,0,0,.055);
}
body:not(:has(.home-shell)) .activity-reward-heading,
body:not(:has(.home-shell)) .mutual-query-heading {
  justify-content:flex-start;
  gap:11px;
  min-height:32px;
  color:#202020;
  font-size:15px;
}
body:not(:has(.home-shell)) .activity-reward-heading .material-symbols,
body:not(:has(.home-shell)) .mutual-query-heading .material-symbols {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  color:#202020;
  background:#f0f0f0;
  border:1px solid #dedede;
  border-radius:9px;
  font-size:18px;
}
body:not(:has(.home-shell)) .activity-reward-description,
body:not(:has(.home-shell)) .mutual-query-description {
  max-width:none;
  margin:15px 0 20px 43px;
  color:#777777;
  font-size:12px;
  line-height:1.6;
}
body:not(:has(.home-shell)) .activity-reward-button,
body:not(:has(.home-shell)) .mutual-query-button {
  display:flex !important;
  width:100% !important;
  min-width:0;
  max-width:none !important;
  min-height:42px;
  margin:0;
  padding:10px 16px;
  border-radius:8px;
  font-size:12px;
  box-shadow:0 7px 16px rgba(0,0,0,.14);
}
body:not(:has(.home-shell)) .activity-reward-button:hover,
body:not(:has(.home-shell)) .mutual-query-button:hover {
  background:#5a5a5a !important;
  border-color:#5a5a5a !important;
  box-shadow:0 9px 18px rgba(0,0,0,.18) !important;
}

/* Keep the popular outfit selection light and use a neutral scrollbar in dialogs. */
body:not(:has(.home-shell)) .picker-body .popular-outfit-option.is-selected {
  color:#202020 !important;
  background:#e5e5e5 !important;
  border-color:#777777 !important;
  box-shadow:0 6px 15px rgba(0,0,0,.1) !important;
}
body:not(:has(.home-shell)) .picker-body,
body:not(:has(.home-shell)) .time-choice-list,
body:not(:has(.home-shell)) .account-history {
  scrollbar-color:#bdbdbd #f1f1f1 !important;
}
body:not(:has(.home-shell)) .picker-body::-webkit-scrollbar-track,
body:not(:has(.home-shell)) .time-choice-list::-webkit-scrollbar-track,
body:not(:has(.home-shell)) .account-history::-webkit-scrollbar-track {
  background:#f1f1f1 !important;
}
body:not(:has(.home-shell)) .picker-body::-webkit-scrollbar-thumb,
body:not(:has(.home-shell)) .time-choice-list::-webkit-scrollbar-thumb,
body:not(:has(.home-shell)) .account-history::-webkit-scrollbar-thumb {
  background:#bdbdbd !important;
  border-color:#f1f1f1 !important;
}
body:not(:has(.home-shell)) .picker-body::-webkit-scrollbar-thumb:hover,
body:not(:has(.home-shell)) .time-choice-list::-webkit-scrollbar-thumb:hover,
body:not(:has(.home-shell)) .account-history::-webkit-scrollbar-thumb:hover {
  background:#888888 !important;
}
@media (max-width:560px) {
  body:not(:has(.home-shell)) .activity-reward-card,
  body:not(:has(.home-shell)) .mutual-query-card {
    padding:18px 16px 16px;
    border-radius:12px;
  }
  body:not(:has(.home-shell)) .activity-reward-description,
  body:not(:has(.home-shell)) .mutual-query-description {
    margin:12px 0 18px;
  }
  body:not(:has(.home-shell)) .activity-reward-button,
  body:not(:has(.home-shell)) .mutual-query-button {
    width:100%;
  }
}

/* Outfit quality accents: only qualities with an explicit palette are colored. */
body:not(:has(.home-shell)) .picker-body button.outfit-option[style*="--quality-color"] {
  color:var(--quality-color) !important;
  border-color:var(--quality-color) !important;
}
body:not(:has(.home-shell)) .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-name {
  color:var(--quality-color) !important;
}
body:not(:has(.home-shell)) .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-image {
  border-color:var(--quality-color) !important;
}
body:not(:has(.home-shell)) .picker-body button.outfit-option[style*="--quality-color"]:hover,
body:not(:has(.home-shell)) .picker-body button.outfit-option[style*="--quality-color"].is-selected {
  color:var(--quality-color) !important;
  border-color:var(--quality-color) !important;
}
body:not(:has(.home-shell)) .picker-body button.outfit-option[style*="--quality-color"].is-selected .option-check {
  color:var(--quality-color) !important;
}

/* Quality accents also carry through to the standalone outfit preview cards. */
body:not(:has(.home-shell)) .picker-body button.outfit-option .outfit-option-name {
  font-weight:800 !important;
}
body:not(:has(.home-shell)) .preview-skin-card[style*="--quality-color"] {
  border-color:var(--quality-color) !important;
}
body:not(:has(.home-shell)) .preview-skin-card[style*="--quality-color"] .preview-skin-copy strong {
  color:var(--quality-color) !important;
  font-weight:800 !important;
}

/* Keep the preview action itself at its normal button weight. */
body:not(:has(.home-shell)) .detail-top-actions .detail-header-action {
  font-weight:500 !important;
}

/* Final quality override: the monochrome theme above has a more specific selector.
   Match the picker key as well so both selected and unselected options keep their
   configured quality color. */
body:not(:has(.home-shell)) .picker-modal[data-picker-key="head"] .picker-body button.outfit-option[style*="--quality-color"],
body:not(:has(.home-shell)) .picker-modal[data-picker-key="face"] .picker-body button.outfit-option[style*="--quality-color"],
body:not(:has(.home-shell)) .picker-modal[data-picker-key="cloth"] .picker-body button.outfit-option[style*="--quality-color"] {
  color:var(--quality-color) !important;
  border-color:var(--quality-color) !important;
}
body:not(:has(.home-shell)) .picker-modal[data-picker-key="head"] .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-name,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="face"] .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-name,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="cloth"] .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-name {
  color:var(--quality-color) !important;
  font-weight:800 !important;
}
body:not(:has(.home-shell)) .picker-modal[data-picker-key="head"] .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-image,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="face"] .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-image,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="cloth"] .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-image {
  border-color:var(--quality-color) !important;
}
body:not(:has(.home-shell)) .picker-modal[data-picker-key="head"] .picker-body button.outfit-option[style*="--quality-color"].is-selected,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="face"] .picker-body button.outfit-option[style*="--quality-color"].is-selected,
body:not(:has(.home-shell)) .picker-modal[data-picker-key="cloth"] .picker-body button.outfit-option[style*="--quality-color"].is-selected {
  color:var(--quality-color) !important;
  background:var(--quality-selected-bg) !important;
  border-color:var(--quality-color) !important;
}

/* Reuse each option's own outfit image as a quiet, blurred right-side
   backdrop. The backdrop is a separate layer so outfit art and labels stay
   sharp. */
body:not(:has(.home-shell)) .picker-body button.outfit-option {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
body:not(:has(.home-shell)) .picker-body .outfit-option-avatar-bg {
  position:absolute;
  z-index:0;
  top:-12px;
  right:-8px;
  bottom:-12px;
  width:48%;
  overflow:hidden;
  pointer-events:none;
  opacity:.3;
}
body:not(:has(.home-shell)) .picker-body .outfit-option-avatar-bg::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(244,244,244,.82) 0%,rgba(244,244,244,.38) 44%,rgba(244,244,244,.02) 100%);
}
body:not(:has(.home-shell)) .picker-body .outfit-option-avatar-bg img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:blur(2px);
  transform:scale(1.05);
}
body:not(:has(.home-shell)) .picker-body button.outfit-option > .outfit-option-image,
body:not(:has(.home-shell)) .picker-body button.outfit-option > .outfit-option-name {
  position:relative;
  z-index:1;
}
body:not(:has(.home-shell)) .picker-body button.outfit-option.is-selected .outfit-option-avatar-bg {
  opacity:.22;
}
@media (max-width:480px) {
  body:not(:has(.home-shell)) .picker-body .outfit-option-avatar-bg {
    width:44%;
  }
}

/* Last-mile workbench palette.  The public home page keeps its green brand
   treatment; only the signed-in workspace gets this neutral surface layer.
   Keep the yellow check-in warning and the explicit outfit quality colors. */
body.workbench-mode {
  --page:#f7f7f7;
  --surface:#ffffff;
  --surface-soft:#f2f2f2;
  --surface-muted:#e9e9e9;
  --primary:#202020;
  --primary-dark:#111111;
  --primary-soft:#e8e8e8;
  --ink:#202020;
  --muted:#777777;
  --line:#dddddd;
  --success:#555555;
  --error:#555555;
  color:#202020;
  background:#f7f7f7;
}
body.workbench-mode .workspace,
body.workbench-mode .page-content { background:transparent; }
body.workbench-mode .user-card,
body.workbench-mode .detail-identity,
body.workbench-mode .selector-card,
body.workbench-mode .signature-query,
body.workbench-mode .signature-result,
body.workbench-mode .function-item,
body.workbench-mode .activity-reward-card,
body.workbench-mode .mutual-query-card,
body.workbench-mode .my-card,
body.workbench-mode .preview-hero,
body.workbench-mode .checkin-panel,
body.workbench-mode .checkin-history {
  color:#202020 !important;
  background:#ffffff !important;
  border-color:#dddddd !important;
  box-shadow:0 8px 24px rgba(0,0,0,.045) !important;
}
body.workbench-mode .detail-identity h1,
body.workbench-mode .detail-identity p,
body.workbench-mode .detail-identity p .material-symbols,
body.workbench-mode .section-heading,
body.workbench-mode .section-title,
body.workbench-mode .section-title .material-symbols,
body.workbench-mode .function-copy strong,
body.workbench-mode .function-copy small,
body.workbench-mode .function-icon,
body.workbench-mode .signature-title,
body.workbench-mode .signature-title .material-symbols,
body.workbench-mode .checkin-panel-heading h2,
body.workbench-mode .checkin-panel-heading p,
body.workbench-mode .checkin-panel-icon,
body.workbench-mode .checkin-summary-row,
body.workbench-mode .checkin-summary-row > .material-symbols,
body.workbench-mode .checkin-summary-row p,
body.workbench-mode .checkin-control-copy strong,
body.workbench-mode .checkin-control-copy small,
body.workbench-mode .checkin-history .signature-title,
body.workbench-mode .checkin-history .signature-title .material-symbols,
body.workbench-mode .checkin-log-copy strong,
body.workbench-mode .checkin-log-copy small {
  color:#202020 !important;
}
body.workbench-mode .detail-identity p,
body.workbench-mode .detail-identity p .material-symbols,
body.workbench-mode .function-copy small,
body.workbench-mode .checkin-panel-heading p,
body.workbench-mode .checkin-control-copy small,
body.workbench-mode .checkin-log-copy small {
  color:#777777 !important;
}
body.workbench-mode .function-icon,
body.workbench-mode .checkin-panel-icon {
  background:#e8e8e8 !important;
  border-color:#d2d2d2 !important;
}
body.workbench-mode .section-heading {
  background:transparent !important;
  border-bottom-color:#dddddd !important;
}
body.workbench-mode .employee-row,
body.workbench-mode .popular-outfit-option,
body.workbench-mode .preview-skin-card,
body.workbench-mode .outfit-option,
body.workbench-mode .checkin-summary-row,
body.workbench-mode .checkin-page .checkin-switch-row,
body.workbench-mode .checkin-page .time-field,
body.workbench-mode .custom-picker-trigger,
body.workbench-mode .select-wrap select,
body.workbench-mode .time-field input {
  color:#202020 !important;
  background:#f4f4f4 !important;
  border-color:#dddddd !important;
}
body.workbench-mode .employee-row:hover,
body.workbench-mode .function-item:hover,
body.workbench-mode .custom-picker-trigger:hover,
body.workbench-mode .custom-picker-trigger:focus,
body.workbench-mode .checkin-page .time-field .custom-picker-trigger {
  color:#202020 !important;
  background:#ffffff !important;
  border-color:#999999 !important;
}
body.workbench-mode .employee-arrow,
body.workbench-mode .back-link,
body.workbench-mode .count-badge,
body.workbench-mode .picker-value-image {
  color:#555555 !important;
  background:#e8e8e8 !important;
  border-color:#d2d2d2 !important;
}
body.workbench-mode .employee-arrow { background:#ffffff !important; }
body.workbench-mode .checkin-status,
body.workbench-mode .checkin-status.is-on {
  color:#555555 !important;
  background:#eeeeee !important;
}
body.workbench-mode .checkin-switch-row input:checked + .switch-ui,
body.workbench-mode .settings-switch-row input:checked + .switch-ui {
  background:#333333 !important;
}
body.workbench-mode .checkin-log-icon.success {
  color:#555555 !important;
  background:#eeeeee !important;
}
body.workbench-mode .checkin-log-icon.failure {
  color:#777777 !important;
  background:#f0f0f0 !important;
}
body.workbench-mode .checkin-notice,
body.workbench-mode .checkin-notice * {
  color:#8a6840 !important;
  background:#fffaf1 !important;
  border-color:#f0dfc4 !important;
}
body.workbench-mode .checkin-notice .material-symbols {
  color:#b97824 !important;
  background:transparent !important;
  border-color:transparent !important;
}
body.workbench-mode .primary-button,
body.workbench-mode .primary-button:hover {
  color:#ffffff !important;
  background:#4a4a4a !important;
  border-color:#4a4a4a !important;
}
body.workbench-mode .primary-button:hover {
  background:#5a5a5a !important;
  border-color:#5a5a5a !important;
}
body.workbench-mode .confirm-action,
body.workbench-mode .confirm-action:hover,
body.workbench-mode .confirm-action:focus-visible {
  color:#444444 !important;
  background:#eeeeee !important;
  border-color:#cccccc !important;
  box-shadow:0 5px 12px rgba(0,0,0,.08) !important;
  transform:none;
}
body.workbench-mode .secondary-button,
body.workbench-mode .back-link,
body.workbench-mode .preview-link,
body.workbench-mode .detail-header-action {
  color:#222222 !important;
  background:#e8e8e8 !important;
  border-color:#cfcfcf !important;
}
body.workbench-mode .detail-header-action { font-weight:500 !important; }
body.workbench-mode .user-state-icon,
body.workbench-mode .online-dot,
body.workbench-mode .user-home-link,
body.workbench-mode .user-logout,
body.workbench-mode .signature-label .material-symbols,
body.workbench-mode .my-card-heading .material-symbols,
body.workbench-mode .nav-item,
body.workbench-mode .nav-item.active,
body.workbench-mode .nav-item:hover {
  color:#555555 !important;
}
body.workbench-mode .nav-item.active::after { background:#202020 !important; }

/* The detail identity has two nested green presentation layers that are more
   specific than the general workbench palette: the character avatar shell and
   the palette/logo icon beside "选择装扮组合".  Neutralize only their
   containers; the character artwork itself must keep its original colors. */
body.workbench-mode .detail-page > .detail-identity .detail-avatar,
body.workbench-mode .avatar,
body.workbench-mode .avatar.employee-avatar {
  color:#555555 !important;
  background:#eeeeee !important;
  border-color:#ffffff !important;
  box-shadow:0 0 0 1px #cfcfcf,0 5px 12px rgba(0,0,0,.08) !important;
}
body.workbench-mode .detail-identity p .material-symbols {
  color:#555555 !important;
  background:#e8e8e8 !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* Keep the original outfit label colors. Readability is handled by a subtle
   animated contrast veil behind the label, not by changing the label color. */
body.workbench-mode .picker-body .outfit-option-name,
body.workbench-mode .picker-body .popular-outfit-part-name,
body.workbench-mode .picker-body .popular-outfit-copy strong,
body.workbench-mode .preview-skin-copy strong,
body:not(:has(.home-shell)) .picker-body .outfit-option-name,
body:not(:has(.home-shell)) .picker-body .popular-outfit-part-name,
body:not(:has(.home-shell)) .picker-body .popular-outfit-copy strong,
body:not(:has(.home-shell)) .preview-skin-copy strong {
  text-shadow:none;
  background:transparent;
  border-radius:0;
  box-shadow:none;
}
body.workbench-mode .picker-body .outfit-option-name,
body:not(:has(.home-shell)) .picker-body .outfit-option-name {
  justify-self:start;
  max-width:100%;
  padding:0;
}
body.workbench-mode .picker-body .popular-outfit-part-name,
body:not(:has(.home-shell)) .picker-body .popular-outfit-part-name {
  width:100%;
  max-width:88px;
  padding:0;
}
body.workbench-mode .picker-body .popular-outfit-copy strong,
body:not(:has(.home-shell)) .picker-body .popular-outfit-copy strong,
body.workbench-mode .preview-skin-copy strong,
body:not(:has(.home-shell)) .preview-skin-copy strong {
  width:auto;
  max-width:100%;
  padding:0;
}

/* A low-contrast, slowly breathing light veil improves local contrast around
   text while keeping the matching outfit artwork visible. The veil is above
   the image layer but below the image tile and all text. */
body.workbench-mode .picker-body button.outfit-option:has(> .outfit-option-avatar-bg)::after,
body:not(:has(.home-shell)) .picker-body button.outfit-option:has(> .outfit-option-avatar-bg)::after {
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  content:"";
  background:linear-gradient(90deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.28) 46%,rgba(255,255,255,.04) 86%);
  opacity:.72;
  animation:outfit-contrast-breathe 4.2s ease-in-out infinite;
}
body.workbench-mode .picker-body button.outfit-option > .outfit-option-image,
body.workbench-mode .picker-body button.outfit-option > .outfit-option-name,
body:not(:has(.home-shell)) .picker-body button.outfit-option > .outfit-option-image,
body:not(:has(.home-shell)) .picker-body button.outfit-option > .outfit-option-name {
  z-index:2;
}
@keyframes outfit-contrast-breathe {
  0%,100% { opacity:.62; }
  50% { opacity:.86; }
}
@media (prefers-reduced-motion:reduce) {
  body.workbench-mode .picker-body button.outfit-option::after,
  body:not(:has(.home-shell)) .picker-body button.outfit-option::after {
    animation:none;
    opacity:.74;
  }
}

/* Quality colors are deliberately restored after the neutral layer. */
body.workbench-mode .picker-body button.outfit-option[style*="--quality-color"],
body.workbench-mode .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-name {
  color:var(--quality-color) !important;
}
body.workbench-mode .picker-body button.outfit-option[style*="--quality-color"],
body.workbench-mode .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-image {
  border-color:var(--quality-color) !important;
}
body.workbench-mode .picker-body button.outfit-option[style*="--quality-color"].is-selected {
  color:var(--quality-color) !important;
  background:var(--quality-selected-bg) !important;
  border-color:var(--quality-color) !important;
}
body.workbench-mode .preview-skin-card[style*="--quality-color"] {
  border-color:var(--quality-color) !important;
}
body.workbench-mode .preview-skin-card[style*="--quality-color"] .preview-skin-copy strong {
  color:var(--quality-color) !important;
  font-weight:800 !important;
}

/* Fixed quality colors: keep the configured quality color visible directly in
   the glyphs.  Use only a soft shadow for contrast; no sheen, outline, or
   white text backing is applied. */
body.workbench-mode .picker-body .outfit-option-name,
body.workbench-mode .picker-body .popular-outfit-part-name,
body.workbench-mode .picker-body .popular-outfit-copy strong,
body.workbench-mode .preview-skin-copy strong,
body:not(:has(.home-shell)) .picker-body .outfit-option-name,
body:not(:has(.home-shell)) .picker-body .popular-outfit-part-name,
body:not(:has(.home-shell)) .picker-body .popular-outfit-copy strong,
body:not(:has(.home-shell)) .preview-skin-copy strong {
  background-image:none;
  background-clip:border-box;
  -webkit-background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  animation:none;
  text-shadow:0 1px 2px rgba(0,0,0,.14);
  filter:none;
}
@media (prefers-reduced-motion:reduce) {
  body.workbench-mode .picker-body .outfit-option-name,
  body.workbench-mode .picker-body .popular-outfit-part-name,
  body.workbench-mode .picker-body .popular-outfit-copy strong,
  body.workbench-mode .preview-skin-copy strong,
  body:not(:has(.home-shell)) .picker-body .outfit-option-name,
  body:not(:has(.home-shell)) .picker-body .popular-outfit-part-name,
  body:not(:has(.home-shell)) .picker-body .popular-outfit-copy strong,
  body:not(:has(.home-shell)) .preview-skin-copy strong {
    animation:none;
    background-image:none;
    text-shadow:0 1px 2px rgba(0,0,0,.14);
    filter:none;
  }
}

/* Account setting: quality colors are opt-out. Keep this final layer after
   the legacy workstation overrides so it behaves identically on mobile. */
body.workbench-mode:not(.quality-colors-off) .select-wrap .outfit-picker-trigger {
  color:var(--picker-quality-color,#202020) !important;
  background:var(--picker-selected-bg,#f4f4f4) !important;
  border-color:var(--picker-quality-color,#c8c8c8) !important;
}
body.workbench-mode:not(.quality-colors-off) .select-wrap .outfit-picker-trigger:hover,
body.workbench-mode:not(.quality-colors-off) .select-wrap .outfit-picker-trigger:focus {
  color:var(--picker-quality-color,#666666) !important;
  background:var(--picker-selected-bg,#f7f7f7) !important;
  border-color:var(--picker-quality-color,#9d9d9d) !important;
}
body.workbench-mode:not(.quality-colors-off) .select-wrap .outfit-picker-trigger > .material-symbols {
  color:var(--picker-quality-color,#202020) !important;
}
/* The explicit default quality marker is the default outfit. Keep it independent from
   every legacy selected/hover quality rule, including background shorthands. */
body.workbench-mode .select-wrap .outfit-picker-trigger[data-quality="default"],
body.workbench-mode .select-wrap .outfit-picker-trigger[data-quality="default"]:hover,
body.workbench-mode .select-wrap .outfit-picker-trigger[data-quality="default"]:focus,
body:not(:has(.home-shell)) .select-wrap .outfit-picker-trigger[data-quality="default"],
body:not(:has(.home-shell)) .select-wrap .outfit-picker-trigger[data-quality="default"]:hover,
body:not(:has(.home-shell)) .select-wrap .outfit-picker-trigger[data-quality="default"]:focus {
  color:#202020 !important;
  background:#f4f4f4 !important;
  border-color:#c8c8c8 !important;
}
body.workbench-mode .select-wrap .outfit-picker-trigger[data-quality="default"] > .material-symbols,
body:not(:has(.home-shell)) .select-wrap .outfit-picker-trigger[data-quality="default"] > .material-symbols {
  color:#202020 !important;
}
body.workbench-mode .select-wrap .outfit-picker-trigger[data-quality="default"] > .picker-trigger-bg::after,
body:not(:has(.home-shell)) .select-wrap .outfit-picker-trigger[data-quality="default"] > .picker-trigger-bg::after {
  background:linear-gradient(90deg,#f4f4f4 0%,rgba(244,244,244,.78) 42%,transparent 100%) !important;
}
body.workbench-mode:not(.quality-colors-off) .picker-body button.outfit-option[style*="--quality-color"],
body.workbench-mode:not(.quality-colors-off) .picker-body button.outfit-option[style*="--quality-color"].is-selected {
  color:var(--quality-color) !important;
  border-color:var(--quality-color) !important;
}
body.workbench-mode:not(.quality-colors-off) .picker-body button.outfit-option[style*="--quality-color"].is-selected {
  background:var(--quality-selected-bg,#f1f1f1) !important;
}
body.workbench-mode:not(.quality-colors-off) .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-name,
body.workbench-mode:not(.quality-colors-off) .picker-body button.outfit-option[style*="--quality-color"] .option-check {
  color:var(--quality-color) !important;
  font-weight:800 !important;
}
body.workbench-mode:not(.quality-colors-off) .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-image,
body.workbench-mode:not(.quality-colors-off) .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-avatar {
  border-color:var(--quality-color) !important;
}
body.workbench-mode:not(.quality-colors-off) .preview-skin-card[style*="--quality-color"] {
  border-color:var(--quality-color) !important;
}
body.workbench-mode:not(.quality-colors-off) .preview-skin-card[style*="--quality-color"] .preview-skin-copy strong {
  color:var(--quality-color) !important;
  font-weight:800 !important;
}
body.workbench-mode:not(.quality-colors-off) .popular-outfit-part[style*="--quality-color"] .popular-outfit-part-name {
  color:var(--quality-color) !important;
  font-weight:800 !important;
}
body.workbench-mode:not(.quality-colors-off) .popular-outfit-part[style*="--quality-color"] .popular-outfit-image,
body.workbench-mode:not(.quality-colors-off) .popular-outfit-part[style*="--quality-color"] .popular-outfit-part-label {
  border-color:var(--quality-color) !important;
}
body.workbench-mode:not(.quality-colors-off) .popular-outfit-part[style*="--quality-color"] .popular-outfit-part-label {
  color:var(--quality-color) !important;
  background:var(--quality-selected-bg,#f1f1f1) !important;
}

/* Popular outfit names stay neutral; quality remains visible on labels and borders. */
body.workbench-mode:not(.quality-colors-off) .picker-body .popular-outfit-part-name,
body.workbench-mode:not(.quality-colors-off) .picker-body .popular-outfit-part[style*="--quality-color"] .popular-outfit-part-name {
  color:#53675e !important;
}

/* A restrained shadow preserves the requested glyph colors against outfit
   artwork without adding an outline or changing the text fill. */
body.workbench-mode:not(.quality-colors-off) .picker-body .outfit-option-name,
body.workbench-mode:not(.quality-colors-off) .picker-body .popular-outfit-part-name,
body.workbench-mode:not(.quality-colors-off) .preview-skin-copy strong {
  text-shadow:0 1px 2px rgba(0,0,0,.16) !important;
  -webkit-text-fill-color:currentColor;
}

/* Turning the option off deliberately removes all quality accents, but never
   removes the outfit artwork or its matching blurred backdrop. */
body.workbench-mode.quality-colors-off .select-wrap .outfit-picker-trigger,
body.workbench-mode.quality-colors-off .select-wrap .outfit-picker-trigger:hover,
body.workbench-mode.quality-colors-off .select-wrap .outfit-picker-trigger:focus {
  color:#707070 !important;
  background:#ededed !important;
  border-color:#c8c8c8 !important;
}
body.workbench-mode.quality-colors-off .select-wrap .outfit-picker-trigger > .material-symbols,
body.workbench-mode.quality-colors-off .picker-body button.outfit-option,
body.workbench-mode.quality-colors-off .picker-body button.outfit-option[style*="--quality-color"],
body.workbench-mode.quality-colors-off .picker-body button.outfit-option[style*="--quality-color"].is-selected,
body.workbench-mode.quality-colors-off .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-name,
body.workbench-mode.quality-colors-off .picker-body button.outfit-option[style*="--quality-color"] .option-check,
body.workbench-mode.quality-colors-off .preview-skin-card[style*="--quality-color"] .preview-skin-copy strong,
body.workbench-mode.quality-colors-off .popular-outfit-part[style*="--quality-color"] .popular-outfit-part-name,
body.workbench-mode.quality-colors-off .popular-outfit-part[style*="--quality-color"] .popular-outfit-part-label {
  color:#707070 !important;
}
body.workbench-mode.quality-colors-off .picker-body button.outfit-option[style*="--quality-color"],
body.workbench-mode.quality-colors-off .picker-body button.outfit-option[style*="--quality-color"].is-selected,
body.workbench-mode.quality-colors-off .preview-skin-card[style*="--quality-color"],
body.workbench-mode.quality-colors-off .popular-outfit-part[style*="--quality-color"] .popular-outfit-image,
body.workbench-mode.quality-colors-off .popular-outfit-part[style*="--quality-color"] .popular-outfit-part-label,
body.workbench-mode.quality-colors-off .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-image,
body.workbench-mode.quality-colors-off .picker-body button.outfit-option[style*="--quality-color"] .outfit-option-avatar {
  border-color:#c8c8c8 !important;
}
body.workbench-mode.quality-colors-off .picker-body button.outfit-option[style*="--quality-color"].is-selected {
  background:#ededed !important;
}
body.workbench-mode.quality-colors-off .popular-outfit-part[style*="--quality-color"] .popular-outfit-part-label {
  background:#e7e7e7 !important;
}

/* Use a distinct active color for primary actions so they do not blend into
   the gray unselected and disabled controls. */
body.workbench-mode .primary-button,
body.workbench-mode .primary-button:hover,
body.workbench-mode .primary-button:focus-visible,
body:not(:has(.home-shell)) .primary-button,
body:not(:has(.home-shell)) .primary-button:hover,
body:not(:has(.home-shell)) .primary-button:focus-visible {
  color:#ffffff !important;
  background:#3a3a3a !important;
  border-color:#3a3a3a !important;
}
body.workbench-mode .primary-button:hover,
body.workbench-mode .primary-button:focus-visible,
body:not(:has(.home-shell)) .primary-button:hover,
body:not(:has(.home-shell)) .primary-button:focus-visible {
  background:#252525 !important;
  border-color:#252525 !important;
}
/* Confirmation buttons use the same active color as other primary actions. */
body.workbench-mode button.confirm-action,
body.workbench-mode button.confirm-action:focus-visible,
body:not(:has(.home-shell)) button.confirm-action,
body:not(:has(.home-shell)) button.confirm-action:focus-visible,
button.confirm-action,
button.confirm-action:focus-visible {
  color:#ffffff !important;
  background:#3a3a3a !important;
  border:1px solid #3a3a3a !important;
  box-shadow:0 6px 16px rgba(0,0,0,.16) !important;
  transform:none !important;
}
body.workbench-mode button.confirm-action:hover,
body:not(:has(.home-shell)) button.confirm-action:hover,
button.confirm-action:hover {
  color:#ffffff !important;
  background:#252525 !important;
  border-color:#252525 !important;
}
body.workbench-mode :is(.function-icon,.checkin-panel-icon,.detail-identity p .material-symbols,
  .section-title .material-symbols,.function-group-heading > .material-symbols,
  .signature-title .material-symbols,.my-card-heading .material-symbols) {
  color:#666666 !important;
  background:#ededed !important;
  border-color:#d2d2d2 !important;
}

/* Section heading glyphs are not icon tiles. */
body.workbench-mode .checkin-history .signature-title > .material-symbols {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

:is(.section-title,.my-card-heading) > .material-symbols {
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Section heading icons are glyphs, not icon tiles. */
body.workbench-mode :is(.section-title > .material-symbols,.my-card-heading > .material-symbols) {
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
}

/* Keep the employee-list and account-settings heading glyphs free of tile backgrounds. */
body.workbench-mode :is(.section-title > .material-symbols,.my-card-heading > .material-symbols) {
  color:#666666 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* The account selector keeps its hit area, but the arrow has no circular tile. */
body :is(.account-history-toggle,.account-history-toggle:hover,.account-history-toggle:focus,
  .account-history-toggle:focus-visible,.account-history-toggle[aria-expanded="true"]) {
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

@media (prefers-reduced-motion:reduce) {
  body.workbench-mode:not(.quality-colors-off) .picker-body .outfit-option-name,
  body.workbench-mode:not(.quality-colors-off) .picker-body .popular-outfit-part-name,
  body.workbench-mode:not(.quality-colors-off) .preview-skin-copy strong {
    text-shadow:0 1px 2px rgba(0,0,0,.16) !important;
  }
}

/* ===== 时间选择弹窗:常用时间快捷键 + 小时/分钟下拉 =====
   取代原先 24 个 + 60 个按钮的两栏网格(time-picker-grid / time-choice,
   其规则保留在下方不再被使用)。这里全部使用新的类名,不会影响其它弹窗。 */
.picker-body .time-quick { display:flex; flex-direction:column; gap:9px; }
.picker-body .time-quick-title { color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.08em; }
.picker-body .time-quick-list { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.picker-body button.time-quick-chip { appearance:none; -webkit-appearance:none; min-height:44px; padding:9px 4px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; cursor:pointer; font:600 14px/1.2 Inter,"Microsoft YaHei",sans-serif; transition:color .18s,background .18s,border-color .18s,box-shadow .18s; }
.picker-body button.time-quick-chip:hover { color:var(--primary-dark); background:var(--primary-soft); border-color:var(--primary); }
.picker-body button.time-quick-chip.is-selected { color:#fff; background:var(--primary); border-color:var(--primary); box-shadow:0 6px 14px rgba(63,118,101,.22); }
.picker-body .time-select-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:10px; margin-top:18px; }
.picker-body .time-select-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.picker-body .time-select-label { color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.08em; text-align:center; }
.picker-body .time-select-trigger { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:56px; padding:0 30px; color:var(--ink); background:var(--surface-soft); border:1px solid var(--line); border-radius:13px; cursor:pointer; font:700 22px/1 Inter,"Microsoft YaHei",sans-serif; transition:border-color .18s,box-shadow .18s; }
.picker-body .time-select-trigger:hover { border-color:var(--primary); }
.picker-body .time-select-trigger:focus-visible { outline:0; border-color:var(--primary); box-shadow:0 0 0 3px rgba(63,118,101,.13); }
.picker-body .time-select-trigger.is-open { border-color:var(--primary); }
.picker-body .time-select-trigger .material-symbols { position:absolute; top:50%; right:9px; transform:translateY(-50%); color:var(--primary-dark); font-size:20px; pointer-events:none; transition:transform .18s; }
.picker-body .time-select-trigger.is-open .material-symbols { transform:translateY(-50%) rotate(180deg); }
.picker-body .time-select-colon { padding-bottom:16px; color:var(--primary); font-size:24px; font-weight:700; }
.picker-body .time-option-panel { margin-top:10px; padding:8px; background:var(--surface); border:1px solid var(--line); border-radius:14px; max-height:206px; overflow:auto; }
.picker-body .time-option-panel.is-collapsed { display:none; }
.picker-body .time-option-panel::-webkit-scrollbar { width:7px; height:7px; }
.picker-body .time-option-panel::-webkit-scrollbar-thumb { background:var(--surface-muted); border-radius:8px; }
.picker-body .time-option-grid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px; }
.picker-body button.time-option { appearance:none; -webkit-appearance:none; min-height:40px; padding:6px 2px; color:var(--ink); background:var(--surface-soft); border:1px solid var(--line); border-radius:10px; cursor:pointer; font:600 14px/1.2 Inter,"Microsoft YaHei",sans-serif; transition:color .15s,background .15s,border-color .15s; }
.picker-body button.time-option:hover { color:var(--primary-dark); border-color:var(--primary); }
.picker-body button.time-option.is-selected { color:#fff; background:var(--primary); border-color:var(--primary); }
.picker-body .time-preview { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:16px; padding:13px; color:var(--primary-dark); background:var(--primary-soft); border:1px solid var(--line); border-radius:14px; }
.picker-body .time-preview .material-symbols { font-size:21px; }
.picker-body .time-preview strong { font-size:26px; font-weight:700; letter-spacing:.02em; font-variant-numeric:tabular-nums; }

@media (max-width:480px) {
  .picker-body .time-quick-list { gap:6px; }
  .picker-body button.time-quick-chip { min-height:42px; font-size:13px; }
  .picker-body .time-select-row { gap:8px; margin-top:15px; }
  .picker-body .time-select-trigger { height:52px; font-size:20px; padding:0 26px; }
  .picker-body .time-option-grid { gap:5px; }
  .picker-body button.time-option { min-height:38px; font-size:13px; }
  .picker-body .time-preview strong { font-size:24px; }
}

/* Signature generator: a compact, monochrome workbench with the game-card
   preview kept visually close to the reference mini-program. */
.signature-generator-page { width:min(100%,680px); }
.sig-game-card { position:relative; display:flex; align-items:center; gap:13px; min-height:116px; margin-bottom:16px; padding:18px 24px; overflow:hidden; color:#fff; background:linear-gradient(135deg,#1d293c,#344967); border:4px solid #8a99ad; box-shadow:inset 0 0 0 3px #172235,0 4px 0 #7d8795; }
.sig-game-card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background:linear-gradient(135deg,transparent 50%,#9fb1c7 50%,transparent 53%),linear-gradient(25deg,transparent 64%,#9fb1c7 64%,transparent 67%); }
.sig-game-avatar { position:relative; z-index:1; width:76px; height:76px; flex:none; overflow:hidden; background:#e9eef4; border:2px solid #94a8bf; }
.sig-game-avatar .avatar { width:100%; height:100%; border:0; border-radius:0; box-shadow:none; }
.sig-game-avatar .avatar img { object-fit:cover; }
.sig-game-profile { position:relative; z-index:1; min-width:0; display:grid; gap:5px; }
.sig-game-profile strong { display:flex; align-items:center; gap:5px; color:#ffd249; font-size:17px; }
.sig-game-profile strong .material-symbols { width:16px; min-width:16px; height:16px; font-size:15px; color:#9ba8ba; }
.sig-game-profile span,.sig-game-profile small { color:#d9e1eb; font-size:11px; }
.sig-game-profile small { padding-top:5px; border-top:1px solid rgba(0,0,0,.28); color:#fff; font-size:13px; }
.sig-game-pin { position:absolute; z-index:1; top:9px; right:12px; color:#aab8c8; transform:rotate(45deg); }
.sig-preview-section,.sig-designer { padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.045); }
.sig-preview-section { margin-bottom:12px; }
.sig-section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.sig-section-heading > strong { display:flex; align-items:center; gap:7px; color:var(--ink); font-size:15px; }
.sig-section-heading > strong .material-symbols { width:20px; min-width:20px; height:20px; color:#c06c45; font-size:17px; }
.sig-preview-options { display:flex; align-items:center; gap:7px; }
.sig-board-select,.sig-preview-switch { display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:5px 9px; color:#6f7891; background:#f5f7fa; border:1px solid #d9dfe9; border-radius:999px; font-size:11px; }
.sig-board-select select { max-width:94px; padding:0 13px 0 0; color:inherit; background:transparent; border:0; outline:0; font-size:11px; }
.sig-color-dot { width:15px; height:15px; border-radius:50%; background:#252e42; box-shadow:0 0 0 1px #d5dbe5; }
.sig-preview-switch { color:#547ee9; }
.sig-preview-switch .material-symbols { width:17px; min-width:17px; height:17px; font-size:15px; }
.sig-preview-switch input { position:absolute; opacity:0; pointer-events:none; }
.sig-preview-switch i { position:relative; width:25px; height:15px; border-radius:99px; background:#cad2df; transition:background .2s; }
.sig-preview-switch i::after { content:""; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; }
.sig-preview-switch input:checked + i { background:#4085ff; }
.sig-preview-switch input:checked + i::after { transform:translateX(10px); }
.sig-live-preview { min-height:82px; display:flex; align-items:center; justify-content:center; gap:2px; overflow:hidden; padding:16px 10px; color:#fff; border:1px solid rgba(0,0,0,.18); border-radius:8px; text-align:center; word-break:break-all; transition:background .2s; }
.sig-live-preview.is-game { min-height:54px; padding:12px 8px; }
.sig-live-preview > span { white-space:pre-wrap; }
.sig-preview-empty { color:#9ba5b5 !important; font-size:14px !important; }
.sig-designer { padding:0; overflow:hidden; }
.sig-tabs { display:grid; grid-template-columns:1fr 1fr; padding:3px; background:#edf0f5; border:1px solid #dfe4ed; border-radius:10px; }
.sig-tabs button { min-height:38px; color:#687487; background:transparent; border:0; border-radius:7px; font-weight:600; cursor:pointer; }
.sig-tabs button.is-active { color:#2773e8; background:#d9eaff; box-shadow:inset 0 0 0 1px #9bc8ff; }
.sig-tabs button span { margin-left:3px; color:#a7b0be; font-size:10px; font-weight:400; }
.sig-panel { padding:16px 12px 12px; }
.sig-text-field,.sig-code-panel label { display:block; color:#334053; font-size:12px; font-weight:600; }
.sig-text-field > span:first-child { display:flex; align-items:center; gap:4px; margin-bottom:7px; }
.sig-text-field .material-symbols { width:15px; min-width:15px; height:15px; color:#d76f49; font-size:14px; }
.sig-text-input { display:flex; overflow:hidden; min-height:46px; background:#f7f8fb; border:1px solid #dfe4ec; border-radius:8px; }
.sig-text-input input { width:100%; min-width:0; padding:0 10px; color:#293548; background:transparent; border:0; outline:0; }
.sig-text-input input::placeholder { color:#b5bfce; }
.sig-text-input button { width:46px; flex:none; color:#fff; background:#7355ec; border:0; font-size:18px; }
.sig-toolbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:12px; }
.sig-toolbar select,.sig-toolbar button { min-width:0; min-height:36px; padding:0 8px; overflow:hidden; color:#536177; background:#f3f5f8; border:1px solid #e1e5ec; border-radius:8px; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.sig-toolbar button { display:flex; align-items:center; justify-content:center; gap:3px; cursor:pointer; }
.sig-toolbar .material-symbols { width:14px; min-width:14px; height:14px; font-size:14px; }
.sig-colors { display:grid; gap:8px; margin-top:10px; }
.sig-color-control { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:7px; }
.sig-color-control input[type="color"] { width:36px; height:36px; padding:3px; background:#fff; border:1px solid #d7dce6; border-radius:6px; }
.sig-color-control input[type="text"] { width:100%; min-height:36px; padding:0 10px; color:#3d4b60; background:#fff; border:1px solid #d7dce6; border-radius:8px; outline:0; font-size:12px; }
.sig-style-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:10px; }
.sig-style-row button,.sig-history-actions button { min-height:36px; color:#354155; background:#fff; border:1px solid #d8dee8; border-radius:8px; cursor:pointer; font-size:12px; }
.sig-style-row button { display:flex; align-items:center; justify-content:center; gap:7px; }
.sig-style-row button > strong,.sig-style-row button > em,.sig-style-row button > u { font-size:14px; }
.sig-style-row button.is-active { color:#236ee7; background:#eaf2ff; border-color:#94bdff; }
.sig-generate-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.sig-generate-actions .primary-button { min-height:42px; padding:8px 10px; }
.sig-generate-actions .primary-button:nth-child(2) { background:#536ee9 !important; }
.sig-history-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.sig-history-actions button { color:#9ea7b4; border-color:transparent; background:#fff; }
.sig-history-actions button:not(:disabled) { color:#647083; }
.sig-history-actions button:disabled { cursor:not-allowed; opacity:.42; }
.sig-history-actions .material-symbols,.sig-code-tools .material-symbols { width:15px; min-width:15px; height:15px; font-size:14px; vertical-align:middle; }
.sig-code-panel { padding:4px 12px 12px; }
.sig-code-panel textarea { width:100%; min-height:170px; margin-top:7px; padding:12px; resize:vertical; color:#dce6f4; background:#202b3e; border:1px solid #3d4d67; border-radius:9px; outline:0; font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.sig-code-tools { display:flex; align-items:center; gap:8px; margin-top:8px; color:#8290a5; font-size:11px; }
.sig-code-tools span { margin-right:auto; }
.sig-code-tools button { display:inline-flex; align-items:center; gap:3px; padding:4px 6px; color:#66748a; background:transparent; border:0; font-size:11px; }
.sig-code-tools button:hover { color:#286fe0; }
.sig-secondary-password { margin:4px 12px 12px; }
.sig-save { width:calc(100% - 24px); margin:0 12px 14px; }
.sig-byte-count.is-over { color:#ba5c55; font-weight:700; }

@media (max-width:560px) {
  .sig-game-card { min-height:102px; padding:14px 16px; }
  .sig-game-avatar { width:64px; height:64px; }
  .sig-game-profile strong { font-size:15px; }
  .sig-section-heading { align-items:flex-start; flex-direction:column; }
  .sig-preview-options { width:100%; justify-content:space-between; }
  .sig-board-select { flex:1; }
  .sig-board-select select { max-width:none; flex:1; }
  .sig-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sig-color-control input[type="text"] { font-size:11px; }
}
@media (max-width:360px) {
  .sig-preview-options { gap:4px; }
  .sig-board-select,.sig-preview-switch { padding-inline:6px; font-size:10px; }
  .sig-preview-switch > span:nth-child(2) { display:none; }
}
.outfit-pending-list { margin-top:14px; padding-top:12px; border-top:1px solid #e6e6e6; }
.outfit-pending-title { display:block; margin:0 0 8px; color:#777; font-size:11px; font-weight:700; letter-spacing:.04em; }
.outfit-pending-list .preview-skin-card { min-height:70px; margin:0; cursor:default; opacity:.86; background:#fafafa; border-style:dashed; }
.outfit-pending-list .preview-skin-card:hover { transform:none; box-shadow:none; }
.outfit-pending-list .preview-skin-image { width:48px; min-width:48px; height:48px; }
.outfit-pending-list .preview-skin-copy { min-width:0; }
.outfit-pending-list .preview-skin-copy strong,.outfit-pending-list .preview-skin-copy em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.outfit-pending-list .preview-skin-copy em { color:#999; font-size:11px; font-style:normal; }