/* Windmill product UI. Public HeroUI references inform spacing, material and
   interaction; these are original styles for the existing native components. */
:root {
  --bg: #060c18;
  --text: #f4f6fb;
  --muted: #b5bdcd;
  --border: #c6d1e31f;
  --accent: #8dbdff;
  --glass-fill: #0c172c40;
  --glass-edge: #cde6ff68;
  --glass-light: 193, 207, 232;
  --success-fill: #b6efdc;
  --success-ink: #153d31;
  --draft-fill: #f5d9a0;
  --draft-ink: #45341d;
  --radius: 22px;
  --ui-font: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --motion-quick: 160ms;
  --motion-ease: cubic-bezier(.2,.75,.25,1);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
}
::selection { background: #7eafff52; color: #fff; }
body { background: var(--bg); }
 .space-scene {
  background: radial-gradient(ellipse 260px 220px at 82% 14%, #264c922b, transparent 75%),
    radial-gradient(ellipse 230px 200px at 38% 84%, #184c5d20, transparent 76%), #060a13;
}
.space-nebula { position: absolute; width: 340px; height: 300px; pointer-events: none; border-radius: 50%; filter: blur(35px); will-change: transform; }
.space-nebula.blue { top: 20px; right: 1%; background: radial-gradient(ellipse at 45% 43%, #5b9aff48, #426fcc12 42%, transparent 70%); animation: nebula-drift 38s ease-in-out infinite alternate; }
.space-nebula.teal { top: 58%; left: 22%; width: 300px; height: 260px; background: radial-gradient(ellipse at 45% 45%, #449ea92d, #2b76870a 43%, transparent 72%); animation: nebula-drift 46s ease-in-out -16s infinite alternate-reverse; }
.space-nebula.violet { bottom: -50px; right: -45px; width: 340px; height: 300px; background: radial-gradient(ellipse at 50% 50%, #8772c432, #493e8a0d 43%, transparent 72%); animation: nebula-drift 43s ease-in-out -22s infinite alternate; }
@keyframes nebula-drift { from { transform: translate(-22px,-16px) scale(1); } to { transform: translate(35px,22px) scale(1.07); } }
.space-stars { opacity: .5; }
.space-stars.distant { opacity: .24; }
.space-halo { width: 410px; height: 410px; top: -125px; right: -240px; opacity: .35; border-left-color: #aed9ff50; border-top-color: #bbdcff14; box-shadow: -10px 0 35px #5e9beb12, inset 10px 0 25px #7ab2ff0a; }
.space-halo::after { opacity: .75; }
.sidebar {
  width: 236px;
  padding: 30px 18px 20px;
  background: linear-gradient(155deg,#adcaff0d,transparent 48%), #09142766;
  border-right: 1px solid #d3e6ff30;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.brand { padding-left: 5px; font-size: 18px; }
.brand small { color: #9aabc6; }
.base-tag { margin: 27px 10px 32px; color: #c1cadb; font-size: 11px; }
.base-tag > span:last-child { color: #9ba8bd; }
.online-dot { background: #a8dec9; box-shadow: 0 0 8px #90d8ba35; }
.nav-label { margin: 0 12px 12px; color: #9eaabe; font-size: 11px; }
.nav-label > span { display: none; }
.nav-item {
  border: 1px solid transparent;
  min-height: 48px;
  border-radius: 13px;
  padding: 11px 13px;
  margin-bottom: 7px;
  font-size: 14px;
  color: #bac4d5;
  gap: 12px;
}
.nav-item.active {
  color: #f4f8ff;
  background: linear-gradient(145deg,#d4e6ff23,#86b4ff10);
  border-color: #bfdcff55;
  box-shadow: inset 0 1px #eff7ff29, 0 4px 14px #0002;
}
.nav-item.active::before { display: none; }
.nav-item.active .icon { color: #a4c8ff; }
.nav-index { display: none; }
.nav-count {
  border: 0;
  background: #d4e1fb14;
  color: #d1e0fb;
  border-radius: 6px;
  padding: 2px 6px;
  font: 11px var(--ui-font);
}
.demo-card { border: 1px solid #d9e6ff18; border-radius: 14px; background: #d9e6ff04; padding: 15px; }
.demo-card .micro-label { color: #b2c5e2; }
.demo-card strong { font-size: 12px; color: #dce4f2; }
.demo-card p { font-size: 11px; color: #a6b3c9; line-height: 1.8; }
.sidebar-user { margin-top: 18px; }
.sidebar-user small { font-size: 11px; color: var(--muted); }
.content-shell { margin-left: 236px; width: calc(100% - 236px); background: transparent; }
.topbar {
  height: 76px;
  padding-inline: 36px;
  background: linear-gradient(160deg,#c7ddff09,transparent 65%), #0b172b66;
  border-color: #d4e6ff29;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.breadcrumb { font-size: 13px; color: #9faec6; }
.breadcrumb strong { color: #e2e8f4; font-weight: 500; }
.topbar-right { gap: 16px; }
.demo-label { background: #dddfef08; border-color: #dae5fb24; border-radius: 999px; padding: 4px 10px; color: #c4cee0; }
.account-switch > span { font-size: 12px; color: #aab6c9; }
.account-switch select { font-size: 12px; min-height: 40px; border-radius: 11px; border-color: #d5e1f02b; background: #2025329e; }
main { max-width: 1400px; padding: 34px 36px 36px; }
.page-heading { align-items: center; margin-bottom: 28px; }
h1 { font-size: 32px; font-weight: 650; letter-spacing: -.035em; }
.eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .12em; color: #a9b7cd; }
.home-greeting { margin-top: 9px; font-size: 14px; color: var(--muted); letter-spacing: 0; }
.page-date { font-size: 12px; color: #c5ccdc; }
.page-date span { color: #9dabc1; font-size: 11px; }
.page-footer { margin-inline: 36px; color: #96a3b8; font-size: 10px; border-color: #dae4f214; }
.page-footer b { color: #aabce0; }
.numeric, .salary-summary strong, .reserve-number strong, .reserve-hours,
.monthly-stats strong, .mobile-salary-net > strong {
  font-family: var(--ui-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}

/* Frosted optical glass: light behind the surface, a transparent tint,
   broad internal reflection and a crisp rim. The pointer only moves the light. */
@property --glass-phase { syntax: '<angle>'; inherits: false; initial-value: 25deg; }
.panel, .crew-identity, .leave-reserve, .base-action, .base-action.salary-entry,
.salary-summary, .leave-summary, .office-lounge {
  --glass-x: 24%; --glass-y: 0%;
  border: 1px solid var(--glass-edge);
  border-top-color: #e5f4ff9c;
  border-bottom-color: #a1c6ed57;
  border-radius: var(--radius);
  background: radial-gradient(ellipse 480px 280px at var(--glass-x) var(--glass-y), #e0edff16, transparent 74%),
    linear-gradient(135deg, #ffffff12, #ffffff03 38%, #92c1ff07 85%), var(--glass-fill);
  box-shadow: inset 0 1px 0 #f2faff36, inset 0 -1px 0 #9acaff17,
    inset 1px 0 0 #e7f3ff12, 0 0 0 1px #7fb3ea0a,
    0 0 22px #79b9ed15, 0 18px 40px #02061047;
  -webkit-backdrop-filter: blur(32px) saturate(155%);
  backdrop-filter: blur(32px) saturate(155%);
}
.panel::after, .crew-identity::after, .leave-reserve::after, .base-action::after,
.salary-summary::after, .leave-summary::after, .office-lounge::after {
  background: radial-gradient(ellipse 230px 130px at var(--glass-x) var(--glass-y), #f5fcffe6, #c2e4ff73 38%, transparent 78%),
    radial-gradient(ellipse 130px 100px at 100% 100%, #c2e1ff8c, transparent 76%),
    conic-gradient(from var(--glass-phase), transparent 0deg 250deg, #bbdcff18 283deg, #f3fbffad 315deg, transparent 345deg),
    linear-gradient(135deg, #eff7ff44, transparent 35% 65%, #a4d2ff38);
  opacity: 1;
}
.glass-surface::after { animation: glass-rim 28s linear infinite; animation-play-state: paused; }
.glass-surface.glass-lit::after { animation-play-state: running; }
@keyframes glass-rim { to { --glass-phase: 385deg; } }
.panel:has(.data-table), .settings-grid .panel, .calendar-panel { --glass-fill: #101b325c; }
.panel-head { padding: 24px 26px 20px; }
.panel-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.panel-head p, .helper-text, .modal-head p, .section-intro > p,
.board-tile-content > p, .board-room-intro > p, .lounge-copy p,
.game-description, .entry-copy small { color: var(--muted); }
.section-intro { gap: 20px; margin-bottom: 24px; }
.section-intro > p { font-size: 13px; line-height: 1.8; max-width: 620px; }
.panel-foot { padding: 17px 26px; color: #a7b4c9; border-color: #d4e3fb16; font-size: 11px; }

/* The home screen remains a profile, a balance, and two clear entry points. */
.base-console { grid-template-columns: 1fr 1fr; gap: 22px; }
.crew-identity, .leave-reserve { padding: 25px 28px; }
.crew-identity { --glass-fill: #1421393d; --glass-light: 216, 201, 225; }
.crew-identity::before { display: none; }
.module-caption { font: 12px var(--ui-font); letter-spacing: 0; color: #c8d1e1; }
.crew-serial { font: 10px var(--mono); color: #a4aec3; }
.edge-glow { opacity: .72; animation-duration: 24s; }
.leave-reserve .edge-glow { animation-delay: -9s; }
.crew-identity:hover .edge-glow, .leave-reserve:hover .edge-glow { opacity: .9; }
.identity-body { gap: 22px; margin: 23px 0 26px; }
.portrait-stage { width: 126px; height: 134px; flex-basis: 126px; }
.portrait-stage::before, .portrait-stage::after, .portrait-cross, .portrait-coordinate { display: none; }
.portrait-orbit { width: 119px; height: 119px; border-color: #ded6f820; background: radial-gradient(circle, #b0a6e423, transparent 74%); }
.portrait-orbit::after { width: 135px; height: 135px; border-color: #d9d0f012; border-style: solid; }
.avatar.identity-avatar { width: 118px; height: 118px; }
.identity-team { color: #c9bddf; font-size: 12px; letter-spacing: 0; }
.identity-copy h2 { font-size: 32px; letter-spacing: -.02em; margin-top: 7px; }
.identity-job > span, .identity-title .title-label { font-size: 11px; color: #aeb7cc; }
.identity-job > strong { font-size: 13px; color: #d8dfed; }
.identity-title { border-radius: 999px; min-height: 38px; background: #ddd8ff0b; border-color: #dfddff29; padding: 7px 12px; }
.identity-title strong { font-size: 12px; color: #e0d6f6; }
.identity-title .icon { color: #c8bce5; }
.identity-details { padding-top: 18px; border-color: #e0e9f51a; }
.identity-details dt { font-size: 11px; color: #acb5c8; }
.identity-details dd { font-size: 13px; color: #dce3f2; }
.identity-details > div:last-child dd { font-family: var(--ui-font); font-size: 12px; }
.identity-edge { display: none; }
.leave-reserve { display: block; --glass-fill: #102b3338; --glass-light: 174, 221, 205; }
.leave-reserve > h2 { font-size: 16px; font-weight: 600; margin-top: 20px; }
.reserve-year { color: #aebbbf; }
.module-indicator { width: 7px; height: 7px; border-radius: 50%; background: #b3e3d1; box-shadow: 0 0 10px #afe6d122; }
.reserve-display { gap: 20px; margin-block: 6px 13px; }
.reserve-gauge { width: 162px; height: 162px; flex-basis: 162px; }
.gauge-ticks { stroke: #9bbcaa; opacity: .25; }
.gauge-track { stroke: #d4eee412; stroke-width: 6px; }
.gauge-value { stroke: #b4ebd8; stroke-width: 6px; stroke-linecap: round; filter: drop-shadow(0 0 5px #b6ebd223); }
.reserve-number strong { font-size: 50px; font-weight: 550; }
.reserve-number > span { font-size: 12px; color: #c1d7ce; }
.reserve-hours { font-size: 25px; color: #def1e9; }
.reserve-hours small { font-size: 11px; color: #b9ccca; }
.reserve-rule { background: #aec8c835; margin-block: 13px 10px; }
.reserve-facts p { color: #b3c3c5; font-size: 11px; }
.reserve-facts p b { color: #e0ece9; font-size: 12px; }
.reserve-caption { color: #b9cdcc; font-size: 11px; border-color: #d8eeeb1a; }
.reserve-caption i { border-radius: 50%; background: #b4ebd8; transform: none; }
.base-actions { gap: 22px; margin-top: 22px; }
.base-action { min-height: 112px; padding: 25px 26px; gap: 17px; }
.base-action.leave-entry { --glass-fill: #142e3b3d; --glass-light: 190, 215, 227; }
.base-action.salary-entry { --glass-fill: #241d3b3d; --glass-light: 219, 198, 247; }
.entry-symbol { border-radius: 15px; width: 49px; height: 49px; flex-basis: 49px; background: #bedfff0d; border-color: #c4deff2b; }
.base-action.leave-entry .entry-symbol { color: #bfdeff; }
.salary-entry .entry-symbol { background: #d9c6ff12; color: #d9c7fb; border-color: #d9c7fb2b; }
.entry-code { font: 9px var(--ui-font); letter-spacing: .1em; margin-bottom: 5px; }
.base-action.leave-entry .entry-code { color: #b0c4df; }
.base-action.salary-entry .entry-code { color: #c7b8df; }
.entry-copy strong { font-size: 18px; letter-spacing: 0; font-weight: 600; }
.entry-copy small, .salary-entry .entry-copy small { font-size: 12px; color: #bac4d7; margin-top: 5px; }
.entry-arrow { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid #e2ebff22; border-radius: 50%; color: #d5e3f5; }
.entry-arrow .icon { width: 16px; height: 16px; }

/* Raised, crisp controls are shared by payroll, leave and games. */
button { position: relative; }
.btn, .icon-button, .nav-item, .base-action, .identity-title,
.game-kind-filters button, .game-category-tabs > button, .segmented > button {
  transition: color var(--motion-quick), background-color var(--motion-quick),
    border-color var(--motion-quick), box-shadow var(--motion-quick), transform var(--motion-quick) var(--motion-ease);
}
.btn { border-radius: 999px; min-height: 44px; font-size: 13px; font-weight: 550; border-color: #d6e4fb30; box-shadow: inset 0 1px #f4faff30, inset 0 -1px #a8d1ff0c, 0 3px 9px #0002; color: #e9effa; isolation: isolate; }
.btn.secondary, .btn:not(.text):not(.primary):not(.danger) { background: linear-gradient(155deg,#f1f7ff1f,#f1f7ff06 70%), #b7d4ff09; border-color: #d6eaff70; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.btn.primary { background: linear-gradient(155deg,#e1f1ffde,#acd1ffd4 72%), #5d8ecb33; color: #102746; border-color: #e5f4ffcc; box-shadow: inset 0 1px #ffffffd9, inset 0 -1px #567eb838, 0 0 12px #8dbfff20, 0 5px 14px #04102450; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.btn.primary:disabled { background: #bad6ff; color: #162c4d; border-color: #d7e6ff; box-shadow: none; }
.btn.danger { background: #e887a61c; border-color: #ed9fb04f; color: #ffcada; }
.btn.text { background: transparent; color: #bbd5ff; border: 0; box-shadow: none; }
.btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, #ffffff26, transparent 45%), linear-gradient(115deg, transparent 15%, #ffffff12 50%, transparent 85%); opacity: .65; transition: opacity var(--motion-quick); }
.btn.text::after { display: none; }
.icon-button { width: 40px; min-width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg,#ecf5ff1c,#ecf5ff05),#aacbff05; color: #d3dff2; border-color: #d3eaff68; box-shadow: inset 0 1px #ffffff29; }
.icon-button .icon { width: 20px; height: 20px; }
button:focus-visible, a:focus-visible { outline: 2px solid #b8d4ff; outline-offset: 4px; }
.btn:enabled:active, .icon-button:enabled:active, .game-kind-filters button:enabled:active,
.game-category-tabs > button:enabled:active, .segmented > button:enabled:active,
.identity-title:active { transform: scale(.97); box-shadow: inset 0 2px 6px #070b1660, 0 0 0 3px #b3d7ff35; }
.base-action:active { transform: scale(.99); }
button.click-feedback { animation: control-response .36s var(--motion-ease); }
.control-ripple-layer { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 3; }
.control-ripple { position: absolute; border-radius: 50%; background: radial-gradient(circle,#ffffff8c 0%,#ffffff55 25%,#ffffff1f 58%,transparent 74%); pointer-events: none; animation: control-ripple .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes control-response { 0% { filter: brightness(1.065); } 100% { filter: brightness(1); } }
@keyframes control-ripple { 0% { transform: translate(-50%, -50%) scale(.02); opacity: 0; } 12% { opacity: .42; } 70% { opacity: .15; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* Quiet filled fields, a stronger focus ring, and room around helper text. */
input, select, textarea { border-radius: 12px; color: #edf2fa; background: linear-gradient(160deg,#e8f4ff05,transparent 60%), #09162c66; border-color: #c7e1ff59; box-shadow: inset 0 1px 4px #01071328; padding: 12px 14px; min-height: 46px; transition: border-color .16s, background-color .16s, box-shadow .16s; }
input::placeholder, textarea::placeholder { color: #9eabc3; opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: #cbdff558; }
input:focus, select:focus, textarea:focus { border-color: #d3e8ff; background: #0b1a335e; box-shadow: inset 0 1px #ecf8ff1a, 0 0 0 3px #accbff38; outline: none; }
input[type=checkbox], input[type=radio] { padding: 0; accent-color: #a2c8ff; }
.field > span { color: #dce5f5; font-size: 13px; margin-bottom: 8px; }
.field { margin-bottom: 20px; }
.helper-text { font-size: 12px; line-height: 1.9; }
.form-error { color: #ffbfce; font-size: 13px; }
.form-person { background: #e1eaff05; border-color: #dce7fc18; border-radius: 15px; }
.form-person .badge { white-space: nowrap; }
.leave-estimate, .calc-preview, .salary-terms-preview { background: #aacaff0a; border-color: #cbdfff29; border-radius: 16px; }
.wfh-exception-box { border-radius: 16px; }
.modal { --glass-x: 24%; --glass-y: 0%; border-radius: 24px; background: radial-gradient(ellipse at var(--glass-x) var(--glass-y),#dbeaff18,transparent 66%), linear-gradient(145deg,#e2efff0d,#e2efff02),#0b182e80; border-color: #d3e9ff80; border-top-color: #eff9ffb3; box-shadow: inset 0 1px #ffffff59,inset 0 -1px #a8d8ff17,0 0 26px #8ac6ff17,0 24px 90px #0008; -webkit-backdrop-filter: blur(36px) saturate(145%); backdrop-filter: blur(36px) saturate(145%); }
.modal-head { background: linear-gradient(155deg,#e5f3ff09,transparent),#0d1c353b; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); padding: 24px 26px; border-color: #dbe8ff1c; gap: 18px; }
.modal-head h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.modal-head p { font-size: 12px; line-height: 1.8; }
.modal-body { padding: 26px; }
.modal-actions { padding: 19px 26px; border-color: #dbe8ff1c; background: #0d1c352e; }
.modal::backdrop { background: #030b1b73; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.modal[open] { animation: dialog-enter .23s var(--motion-ease) both; }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.page-enter > .page-heading, .page-enter > .base-console, .page-enter > .base-actions,
.page-enter > .section-intro, .page-enter > .salary-summary, .page-enter > .team-grid,
.page-enter > .office-lounge, .page-enter > .settings-grid { animation: page-reveal .34s var(--motion-ease) both; }
.page-enter > .base-actions, .page-enter > .salary-summary { animation-delay: 40ms; }
/* Do not animate opacity on card containers: it creates a backdrop root that
   prevents their children from blurring the space scene behind them. */
@keyframes page-reveal { from { transform: translateY(8px); } to { transform: none; } }
#toast { left: calc(50% + 118px); background: #27372ff5; border: 1px solid #ade8ca60; border-radius: 14px; color: #e2fff1; box-shadow: 0 10px 36px #0005; font-size: 13px; padding: 15px 22px; }
#toast.error { background: #3e2834f5; color: #ffdae4; border-color: #efa8bd70; }

/* Semantic states stay recognizable in dense lists and on a phone. */
.badge { gap: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; line-height: 1.6; border-radius: 999px; }
.badge.published { background: var(--success-fill); color: var(--success-ink); border-color: #d7faed; box-shadow: inset 0 1px #fff6; }
.badge.draft { background: var(--draft-fill); color: var(--draft-ink); border-color: #ffe7bc; }
.badge .status-symbol { font-size: 12px; font-weight: 800; line-height: 1; }
.badge .icon { width: 12px; height: 12px; }
.badge.blue { color: #c9e1ff; background: #a7cbff1a; border-color: #a7cbff46; }
.badge.green { color: #c1f2dc; background: #98dcbd1a; border-color: #98dcbd46; }
.badge.orange { color: #ffe0ac; background: #e7bf781a; border-color: #e7bf7846; }
.badge.red { color: #ffd0de; background: #ec9db41a; border-color: #ec9db446; }
.badge.neutral { color: #d0d9e9; background: #c5d0e710; border-color: #c5d0e72c; }
.warning-text { color: #f5d49c !important; }

/* Clear data hierarchy: softer table chrome, brighter figures and status pills. */
.toolbar { padding: 0 26px 22px; gap: 16px; }
.toolbar-filters select { min-height: 44px; font-size: 12px; }
.inline-field > span { color: #bdc9dd; font-size: 12px; }
.data-table th { background: #0d14205e; color: #c2cfe4; font-weight: 550; font-size: 12px; border-color: #c8d7ef20; }
.data-table td { border-bottom-color: #d9e5fb12; padding-block: 20px; font-size: 13px; }
.data-table td > strong { color: #f8faff; font-weight: 600; font-size: 16px; }
.data-table td > small, .person-cell small { color: #aebad0; font-size: 12px; }
.data-table tbody tr:nth-child(even) { background: #d5e3ff02; }
.person-cell strong { font-size: 14px; font-weight: 550; }
.avatar, .avatar.small, .crew-card .avatar.large { border-radius: 13px; }
.row-actions .btn.small { min-height: 38px; border-radius: 999px; font-size: 12px; }
.salary-summary { --glass-fill: #171f3b45; padding: 25px 0; }
.salary-summary > div { padding-inline: 26px; border-color: #d4e1fa1a; }
.salary-summary .eyebrow { display: flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 0; margin: 0; color: #c1c9dd; }
.salary-summary .eyebrow .icon { width: 15px; height: 15px; color: #c0b7e2; }
.salary-summary strong { font-size: 32px; font-weight: 550; margin-block: 12px 5px; }
.salary-summary p { color: #aeb8ce; font-size: 12px; }
.salary-summary > div:nth-child(2) > strong { color: #decffa; }
.callout { background: #a6c9ff08; border-color: #accbff26; border-radius: 17px; }
.callout p { color: #b7c2d6; font-size: 12px; }
.mobile-salary-card, .mobile-leave-card { border-radius: 17px; background: linear-gradient(135deg,#e5f0ff0d,transparent 66%),#13213b40; border-color: #d4e9ff59; box-shadow: inset 0 1px #eff9ff29,0 8px 24px #0002; -webkit-backdrop-filter: blur(22px) saturate(145%); backdrop-filter: blur(22px) saturate(145%); }
.mobile-salary-net > strong { font-weight: 550; }
.mobile-salary-net > small, .mobile-salary-bonus > small, .mobile-leave-time { color: #bac7dc; font-size: 12px; }
.crew-card { padding: 27px; }
.crew-card h2 { margin-top: 20px; font-size: 25px; font-weight: 600; }
.crew-card > p { font-size: 13px; color: #bdc6d8; }
.crew-card-title { color: #d4c5f0 !important; }
.crew-card-meta { border-color: #d4e1fa1a; margin-block: 22px; padding-top: 20px; }
.crew-card-meta > div > span { color: #aab9d0; font-size: 12px; }
.crew-card-meta > div > strong { color: #d5e0f2; font-size: 12px; }
.monthly-header, .monthly-chart-note { border-color: #dae4f21a; }
.monthly-stats { background: #b4cee905; border-color: #dae4f21a; }
.monthly-stats > div + div { border-color: #dae4f21a; }
.monthly-stats strong { font-weight: 550; }
.monthly-chart-note { color: #abb9d0; }
.wfh-allowance { --glass-fill: #17303242; background: radial-gradient(ellipse at var(--glass-x) var(--glass-y),#d7f7eb13,transparent 72%),linear-gradient(135deg,#fff1,transparent 55%),var(--glass-fill); }
.wfh-quota-grid strong { color: #d0f4e5; }
.settings-formula, .settings-section, .payment-block, .bonus-block, .permission-list > div { border-color: #d5e2fa24; border-radius: 15px; }
.settings-formula, .settings-form { font-size: 13px; }

/* Pill selectors and colorful covers bring play into the product, quietly. */
.game-category-tabs, .segmented { padding: 5px; background: linear-gradient(145deg,#e3efff12,transparent),#11234424; border: 1px solid #d4eaff57; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px #e9f7ff25; border-radius: 15px; gap: 5px; }
.game-category-tabs > button, .segmented > button { border-radius: 11px; color: #bcc7dc; background: transparent; font-size: 13px; }
.game-category-tabs > button.selected, .segmented > button.selected { color: #f1f5ff; background: linear-gradient(150deg,#e3f2ff36,#bfdcff10); border-color: #dbeeff80; box-shadow: inset 0 1px #f5fbff50, 0 2px 8px #0003; font-weight: 600; }
.game-category-tabs > button > span { color: #aab9d0; font-size: 11px; }
.game-category-tabs > button.selected > span { color: #c6d4ea; }
.game-kind-filters { gap: 8px; }
.game-kind-filters button { border-radius: 999px; padding: 9px 14px; min-height: 38px; background: linear-gradient(160deg,#e9f4ff15,#bfd9ff04); border: 1px solid #d1e7ff55; box-shadow: inset 0 1px #ffffff1f; font-size: 12px; color: #bac7df; }
.game-kind-filters button.selected { color: #152b4a; background: linear-gradient(155deg,#e4f1ffe8,#bedcffbf); border-color: #dff1ffc2; font-weight: 600; box-shadow: none; }
.game-filterbar > label > span { color: #b1bfd4; font-size: 11px; }
.game-filterbar select { min-height: 42px; font-size: 12px; }
.lounge-toolbar { align-items: center; margin-block: 28px 22px; }
.lounge-toolbar h2 { font-size: 23px; letter-spacing: -.02em; font-weight: 600; }
.lounge-toolbar p { font-size: 13px; color: var(--muted); max-width: none; margin-top: 7px; }
.board-tile { --glass-fill: #111d343d; }
.board-tile-top { padding: 22px 24px 0; }
.board-tile-top > span { color: #b5c4dc; font: 10px var(--ui-font); letter-spacing: .1em; }
.board-tile-top .badge { font-size: 10px; }
.board-poster { border-color: #d9e5fc18; border-radius: 16px; background-color: #0d142046; }
.board-tile-content { padding: 22px 24px 24px; }
.board-player-count { font: 11px var(--ui-font); color: #aebed6; }
.board-tile-content h2 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.board-tile-content > p { font-size: 13px; }
.board-tile-footer .btn { min-height: 44px; }
.idiom-poster > b { display: none; }
.mixed-riddle-poster { padding-bottom: 28px; }
.salary-terms-preview > strong { font-family: var(--ui-font); font-variant-numeric: tabular-nums; }
.game-card::before { display: none; }
.game-kind { font: 11px var(--ui-font); color: #b6c7e2; letter-spacing: .08em; }
.game-card-bottom, .board-local-note { color: #a9b9d2; font-size: 11px; }
.poll-option { background: #b8d0ff05; border-color: #ccdffb25; border-radius: 14px; }
.poll-option.my-choice { background: #a6caff12; border-color: #b4d3ff77; }
.poll-option-body > div > span { color: #bbcbe2; }
.poll-track { height: 5px; background: #d2defb0c; }
.poll-track > span { background: #b2d0ff; border-radius: 5px; }
.board-form, .board-rules, .board-history, .spy-private, .drawing-invite { border-radius: 16px; border-color: #cedffc25; }

/* Nine small, individual portraits in a cozy shared studio. */
.office-lounge { grid-template-columns: .85fr 1.6fr; gap: 28px; }
.office-floor { height: 430px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 110px; gap: 8px 12px; align-content: end; padding: 54px 18px 25px; background: radial-gradient(ellipse at 80% 15%,#d9a78512,transparent 55%),linear-gradient(155deg,#2033496b,#131c2b85); border-radius: 24px; }
.office-floor::before { inset: 68px 14px 19px; border-radius: 20px; transform: none; background: repeating-linear-gradient(90deg,transparent 0 66px,#cbdfff05 67px 68px),repeating-linear-gradient(0deg,transparent 0 49px,#cbdfff05 50px 51px); }
.office-floor .office-window { width: 53%; left: 23.5%; top: 16px; height: 25px; }
.office-window i { border-radius: 8px 8px 3px 3px; background: linear-gradient(160deg,#abc4e934,#a7bbc809); }
.office-floor .office-table { display: none; }
.office-floor .office-seat { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; max-width: none; min-width: 0; justify-content: center; }
.office-floor .office-avatar { width: 58px; height: 65px; background: transparent; border-radius: 18px; border: 0; box-shadow: none; position: relative; z-index: 1; }
.chibi-avatar svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px #0003); }
.office-seat::before { content: ''; position: absolute; width: 73px; height: 27px; border-radius: 50%; background: #9eacc51a; top: 55px; box-shadow: inset 0 1px #fff2; }
.office-floor .office-seat>strong { font-size: 11px; color: #e4eaf5; margin-top: 4px; }
.office-floor .office-seat>.seat-activity { font-size: 9px; }
.office-floor .office-seat.is-me .office-avatar { outline: 1px solid #d4e4ff82; outline-offset: 2px; background: #c6daff07; }
.office-coffee { top: 12px; left: 4%; border-radius: 9px; background: #ac948531; border-color: #d7c4ac40; color: #d7c8b8; }
.office-plant { position: absolute; right: 17px; top: 16px; font-size: 24px; transform: rotate(-9deg); }
.office-pouf { position: absolute; width: 20px; height: 17px; bottom: 10px; right: 17px; border-radius: 7px; background: #b69acb36; box-shadow: inset 0 2px #eedaf526; }
.office-floor-label { color: #a4b9d0; font-size: 8px; }

@media (hover: hover) {
  .nav-item:enabled:hover { background: #c8d9ff0c; color: #f3f7ff; }
  .btn:enabled:hover { transform: translateY(-1px); border-color: #c2d7f681; box-shadow: inset 0 1px #fff2, 0 3px 14px #0003; }
  .btn.secondary:enabled:hover, .btn:not(.text):not(.primary):not(.danger):enabled:hover { background: linear-gradient(155deg,#f2f8ff2b,#d0e0ff0c),#b7d4ff0b; color: #fff; }
  .btn.primary:enabled:hover { background: linear-gradient(155deg,#f4fbfff0,#c7e1ffde); color: #122748; border-color: #f4fbff; box-shadow: inset 0 1px #fff,0 0 0 3px #a9caff26,0 5px 20px #8eaef526; }
  .btn.danger:enabled:hover { background: #e887a62d; border-color: #ed9fb08f; }
  .btn.text:enabled:hover { background: #aecbff0c; color: #e5efff; }
  .btn:enabled:hover::after { opacity: 1; }
  .icon-button:enabled:hover { background: linear-gradient(145deg,#f2f8ff30,#dee9ff0c); border-color: #e2f2ff9c; }
  .identity-title:hover { background: #ddd8ff17; border-color: #dfddff50; }
  .base-action:hover, .base-action.salary-entry:hover { background: radial-gradient(ellipse 440px 250px at var(--glass-x) var(--glass-y),#e5f5ff22,transparent 75%),linear-gradient(135deg,#fff1,transparent 70%),var(--glass-fill); border-color: #e1f1ffb3; box-shadow: inset 0 1px #ffffff70,0 0 24px #8ec7ff24,0 12px 28px #0004; transform: translateY(-2px); }
  .board-tile:hover { border-color: #e1f1ffad; box-shadow: inset 0 1px #ffffff59,0 0 24px #8ec7ff1b,0 12px 28px #0004; }
  .board-tile:hover .board-poster { border-color: #d8e7ff38; }
  .game-kind-filters button:enabled:hover { background: #d6e6ff13; border-color: #d6e6ff66; color: #e7f0ff; }
  .game-kind-filters button.selected:enabled:hover { background: linear-gradient(155deg,#f4f9fff0,#cde5ffdd); color: #152b4a; }
  .game-category-tabs > button:enabled:hover, .segmented > button:enabled:hover { background: #d4e1fb12; color: #fff; }
  .data-table tbody tr:hover { background: #a9c6ff09; }
}
@media (min-width: 761px) and (max-width: 1120px) {
  .office-lounge { grid-template-columns: 1fr; }
  .lounge-copy h2 br { display: none; }
  .sidebar { width: 216px; padding-inline: 14px; }
  .content-shell { margin-left: 216px; width: calc(100% - 216px); }
  main { padding-inline: 26px; }
  .topbar { padding-inline: 26px; }
  .base-console { grid-template-columns: 1fr 1fr; gap: 16px; }
  .base-actions { gap: 16px; }
  .crew-identity, .leave-reserve { padding: 23px; }
  .identity-body { gap: 13px; }
  .portrait-stage { width: 84px; flex-basis: 84px; }
  .avatar.identity-avatar { width: 84px; height: 84px; }
  .portrait-orbit { width: 82px; height: 82px; }
  .portrait-orbit::after { width: 98px; height: 98px; }
  .identity-title { gap: 5px; padding-inline: 8px; }
  .identity-title strong { font-size: 11px; }
  .identity-title .icon { width: 12px; height: 12px; }
  .identity-copy h2 { font-size: 26px; }
  .reserve-gauge { width: 130px; height: 130px; flex-basis: 130px; }
  .reserve-display { gap: 10px; }
  .reserve-number strong { font-size: 42px; }
  .salary-summary strong { font-size: 27px; }
  .base-action, .base-action.salary-entry { padding: 20px; gap: 12px; }
  .entry-symbol, .salary-entry .entry-symbol { width: 34px; height: 38px; flex-basis: 34px; }
  .entry-arrow { width: 28px; height: 28px; }
  .entry-copy strong { font-size: 16px; }
  #toast { left: calc(50% + 108px); }
}
@media (max-width: 760px) {
  .office-lounge { grid-template-columns: 1fr; gap: 22px; }
  .office-floor { height: 410px; grid-auto-rows: 106px; gap: 7px 6px; padding: 52px 8px 24px; }
  .office-floor .office-avatar { width: 52px; height: 59px; }
  .office-floor .office-seat>strong { font-size: 10px; }
  .office-floor .office-seat>.seat-activity { font-size: 8px; }
  .content-shell { margin-left: 0; width: 100%; }
  .space-halo { width: 360px; height: 360px; top: -110px; right: -270px; opacity: .22; }
  .space-nebula.blue { width: 220px; height: 220px; right: -75px; }
  .space-nebula.teal { width: 210px; height: 190px; left: -105px; top: 68%; }
  .space-nebula.violet { width: 220px; height: 200px; right: -140px; }
  .sidebar { width: min(286px, calc(100vw - 46px)); padding: 28px 18px 20px; background: linear-gradient(155deg,#c7ddff0d,transparent 60%),#09182d99; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
  .sidebar.mobile-open { box-shadow: 20px 0 90px #0007; }
  .mobile-backdrop { background: #06091586; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
  .topbar { height: 66px; padding-inline: 18px; }
  .topbar-left { gap: 10px; }
  .breadcrumb { display: none; }
  .topbar-right { gap: 9px; }
  .account-switch select { font-size: 12px; min-height: 40px; max-width: 175px; padding-inline: 10px; }
  .topbar .icon-button { width: 38px; min-width: 38px; height: 38px; }
  main { padding: 26px 18px 30px; }
  h1 { font-size: 28px; }
  .page-heading { margin-bottom: 20px; gap: 15px; }
  .page-heading > div:first-child { min-width: 0; }
  .page-date, .app-shell[data-page='home'] .page-date { flex-shrink: 0; white-space: nowrap; max-width: none; font-size: 11px; padding-top: 26px; }
  .home-greeting { font-size: 13px; }
  .app-shell[data-page='home'] .page-heading .eyebrow { display: none; }
  .page-footer { margin-inline: 18px; font-size: 9px; }
  .base-console, .base-actions { grid-template-columns: 1fr; gap: 16px; }
  .crew-identity, .leave-reserve { padding: 20px 23px; border-radius: 22px; }
  .identity-body { gap: 23px; margin-block: 12px 13px; }
  .portrait-stage { width: 108px; height: 111px; flex-basis: 108px; }
  .avatar.identity-avatar { width: 103px; height: 103px; }
  .portrait-orbit { width: 104px; height: 104px; }
  .portrait-orbit::after { width: 120px; height: 120px; }
  .identity-copy h2 { font-size: 28px; line-height: 1.2; margin-top: 5px; }
  .identity-team { line-height: 1.4; }
  .identity-title { min-height: 36px; font-size: 12px; padding: 6px 10px; margin-top: 8px; }
  .identity-details { grid-template-columns: .75fr 1.4fr; gap: 15px; padding-top: 14px; }
  .reserve-display { gap: 24px; margin-block: 5px 9px; }
  .leave-reserve > h2 { margin-top: 13px; }
  .reserve-gauge { width: 135px; height: 135px; flex-basis: 135px; }
  .reserve-number strong { font-size: 45px; }
  .reserve-hours { font-size: 24px; }
  .reserve-facts p { font-size: 11px; }
  .reserve-facts p b { font-size: 12px; }
  .reserve-caption { display: none; }
  .base-actions { margin-top: 16px; grid-template-columns: 1fr 1fr; gap: 12px; }
  .base-action, .base-action.salary-entry { min-height: 86px; padding: 16px 12px; gap: 10px; border-radius: 20px; justify-content: center; }
  .entry-copy strong { font-size: 13px; }
  .entry-copy small, .salary-entry .entry-copy small { font-size: 11px; }
  .entry-symbol, .salary-entry .entry-symbol { width: 22px; height: 26px; flex-basis: 22px; border: 0; background: transparent; }
  .entry-symbol .icon { width: 22px; height: 22px; }
  .entry-arrow { width: 28px; height: 28px; }
  .entry-code { font-size: 8px; letter-spacing: .08em; }
  .section-intro > p { font-size: 12px; }
  .panel-head { padding: 21px 20px 17px; }
  .toolbar { padding: 0 20px 20px; }
  .panel-foot { padding-inline: 20px; font-size: 10px; }
  .salary-summary { grid-template-columns: 1fr 1fr; padding: 0; }
  .salary-summary > div { padding: 20px; }
  .salary-summary .eyebrow { font-size: 11px; }
  .salary-summary .eyebrow .icon { width: 13px; height: 13px; }
  .salary-summary > div > strong { font-size: 26px; }
  .salary-summary > div > p { font-size: 11px; }
  .salary-summary > div:last-child { padding: 15px 20px; border-color: #d4e1fa1a; }
  .salary-summary > div:last-child > strong { font-size: 16px; }
  .salary-summary > div:last-child > p { font-size: 10px; }
  .mobile-payroll-records { padding-inline: 20px; gap: 15px; }
  .mobile-leave-records { padding-inline: 20px; }
  .mobile-salary-card { padding: 20px; }
  .mobile-salary-net > strong { font-size: 30px; }
  .mobile-salary-card footer .btn { min-height: 44px; }
  .monthly-stats strong { font-size: 26px; }
  .monthly-chart-note { font-size: 11px; }
  .lounge-toolbar { flex-direction: column; align-items: stretch; gap: 17px; margin-top: 25px; }
  .lounge-toolbar h2 { font-size: 22px; }
  .lounge-toolbar p { font-size: 12px; max-width: none; }
  .lounge-create-actions > .btn { font-size: 12px; }
  .game-category-tabs { border-radius: 15px; }
  .game-category-tabs > button { padding: 12px; font-size: 13px; gap: 6px; }
  .game-category-tabs > button > span { font-size: 10px; }
  .game-kind-filters { gap: 8px; }
  .game-kind-filters button { min-height: 44px; font-size: 12px; padding-inline: 13px; }
  .board-tile-top { padding: 20px 22px 0; }
  .board-tile-content { padding: 22px; }
  .board-tile-content h2 { font-size: 18px; }
  .board-tile-content > p { font-size: 12px; }
  .board-player-count { font-size: 11px; }
  .board-tile-top .badge { font-size: 10px; }
  .crew-card { padding: 25px; }
  .modal, .modal.wide { width: calc(100% - 20px); border-radius: 22px; max-height: calc(100dvh - 28px); }
  .modal-head { padding: 21px; gap: 12px; }
  .modal-head h2 { font-size: 19px; }
  .modal-body { padding: 22px 21px; }
  .modal-actions { padding: 17px 21px; gap: 10px; }
  .modal-actions .btn { min-height: 46px; font-size: 13px; }
  .modal input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .modal select, .modal textarea { font-size: 16px; }
  .modal .form-grid > .field:has(input[type=date]) { grid-column: 1 / -1; }
  #toast { left: 50%; max-width: calc(100vw - 32px); font-size: 12px; }
}
@media (max-width: 370px) {
  main { padding-inline: 14px; }
  .topbar { padding-inline: 14px; }
  .page-date { display: none; }
  .leave-month-controls { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; gap: 8px; }
  .leave-month-controls > .btn { grid-column: 1 / -1; min-height: 38px; }
  .leave-month-field input { font-size: 12px; padding-inline: 10px; }
  .account-switch select { max-width: 148px; font-size: 11px; }
  .crew-identity, .leave-reserve { padding: 20px; }
  .identity-body { gap: 17px; }
  .portrait-stage { width: 87px; flex-basis: 87px; }
  .avatar.identity-avatar { width: 89px; height: 89px; }
  .portrait-orbit { width: 90px; height: 90px; }
  .portrait-orbit::after { width: 106px; height: 106px; }
  .identity-copy h2 { font-size: 25px; }
  .identity-title { gap: 6px; padding-inline: 9px; }
  .identity-title strong { font-size: 11px; }
  .reserve-display { gap: 12px; }
  .reserve-gauge { width: 128px; height: 128px; flex-basis: 128px; }
  .reserve-number strong { font-size: 40px; }
  .base-action { padding-inline: 18px; gap: 13px; }
  .base-actions { grid-template-columns: 1fr; }
  .base-action, .base-action.salary-entry { min-height: 72px; padding-inline: 18px; justify-content: flex-start; }
  .entry-copy strong { font-size: 14px; }
  .entry-copy small, .salary-entry .entry-copy small { font-size: 10px; }
  .entry-arrow { width: 23px; height: 23px; }
  .salary-summary > div { padding-inline: 16px; }
  .salary-summary > div > strong { font-size: 23px; }
  .salary-summary .eyebrow { font-size: 10px; }
  .salary-admin-actions .btn { padding-inline: 9px; font-size: 11px; }
  .modal-head, .modal-body { padding-inline: 18px; }
  .modal-actions { padding-inline: 18px; }
  .modal-actions .btn { padding-inline: 13px; font-size: 12px; }
  .modal .form-grid > .field:has(input[type=time]) { grid-column: 1 / -1; }
  .game-category-tabs > button > span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .icon-button, .nav-item, .base-action, .identity-title,
  .game-kind-filters button, .game-category-tabs > button, .segmented > button, .btn::after,
  input, select, textarea { transition: none; }
  .btn:enabled:hover, .btn:enabled:active, .icon-button:enabled:active, .base-action:hover,
  .base-action:active, .base-action.salary-entry:hover, .identity-title:active,
  .game-kind-filters button:enabled:active, .game-category-tabs > button:enabled:active,
  .segmented > button:enabled:active { transform: none; }
  button.click-feedback, .control-ripple, .modal[open], .app-shell .page-enter > * { animation: none; }
  .control-ripple-layer { display: none; }
  .space-nebula { animation: none; will-change: auto; }
  .glass-surface::after { animation: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .crew-identity, .leave-reserve, .base-action, .base-action.leave-entry, .base-action.salary-entry,
  .salary-summary, .leave-summary, .office-lounge, .mobile-salary-card, .mobile-leave-card { background-color: #1c2332; }
  .sidebar, .topbar, .modal, .modal-head { background-color: #131f32; }
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar, .topbar, .modal, .modal-head { background: #161c2a; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .panel, .crew-identity, .leave-reserve, .base-action, .base-action.leave-entry, .base-action.salary-entry,
  .salary-summary, .leave-summary, .office-lounge, .mobile-salary-card, .mobile-leave-card { background: #202736; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .space-nebula { display: none; }
  .modal::backdrop, .mobile-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: #050915de; }
}
@media print {
  .modal, .modal-head, .modal-body, .panel, .salary-summary, .leave-summary { background: white; color: #111; box-shadow: none; }
  .badge { background: transparent !important; color: #111 !important; border-color: #666 !important; box-shadow: none; }
  .modal[open], .app-shell .page-enter > *, button.click-feedback { animation: none; }
  .control-ripple-layer { display: none; }
}

/* Clinic receipts: comfortable touch targets, readable previews, no full-size images in lists. */
.receipt-upload { margin: 18px 0 24px; padding: 18px; border: 1px solid #a6caff3b; border-radius: 18px; background: #15304925; }
.receipt-upload[hidden] { display: none; }
.receipt-upload input[type=file] { padding: 10px; height: auto; min-height: 48px; width: 100%; font-size: 12px; }
.receipt-upload input::file-selector-button { border: 1px solid #a6caff40; border-radius: 10px; background: #c6dcff18; color: #e3edff; padding: 8px 12px; margin-right: 10px; cursor: pointer; }
.receipt-upload-status { color: #e7c88c; font-size: 12px; line-height: 1.7; margin-top: 10px; }
.receipt-previews, .receipt-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.receipt-preview { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border: 1px solid #bdcfea33; border-radius: 14px; background: #080e1970; text-align: left; color: #dbe6f7; font-size: 11px; }
.receipt-preview img { display: block; width: 100%; height: 126px; object-fit: contain; border-radius: 8px; background: #f4f4f4; }
.receipt-preview>span { overflow-wrap: anywhere; line-height: 1.5; }
button.receipt-preview { cursor: zoom-in; transition: border-color .2s,background .2s; }
button.receipt-preview:hover { border-color: #b4d4ff99; background: #26364c60; }
.receipt-remove { align-self: end; min-height: 36px; padding: 5px 10px; color: #ffc4c4; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.receipt-enlarged img { display: block; width: 100%; max-height: 68vh; object-fit: contain; border-radius: 12px; background: #f4f4f4; }
.receipt-detail { margin: 22px 0; }
@media(max-width:760px) {
 .receipt-upload { padding: 14px; }
 .receipt-previews, .receipt-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
 .receipt-preview img { height: 120px; }
 .wfh-review-list article { align-items: stretch; }
 .wfh-review-list article>.btn { align-self: start; }
}
/* Touch arcade controls react on press and repeat while held; the page stays still. */
.blocks-controls, .blocks-controls .btn { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.blocks-controls .btn { gap: 5px; }
.blocks-controls .btn small { font-size: 11px; font-weight: 600; }
.blocks-controls .btn.is-held { background: #b9d5ff32; border-color: #d4e6ff96; box-shadow: inset 0 1px 10px #daeaff22,0 0 14px #79acff18; }
@media(max-width:760px) {
 .blocks-console>.btn { min-height: 44px; }
 .blocks-controls>.btn { min-height: 52px; padding: 8px 4px; }
 .blocks-controls>.btn:last-child { min-height: 48px; }
 .blocks-controls { gap: 8px; }
 .blocks-keyboard-help { display: none; }
}
@media(max-width:760px) and (max-height:730px) {
 .blocks-console { padding-top: 3px; }
 .blocks-console>span { font-size: 7px; }
 .blocks-console>div { margin-top: 8px; }
 .blocks-console strong { margin-top: 4px; font-size: 21px; }
 .blocks-console #blocks-level { font-size: 16px; }
 .blocks-next>canvas { width: 74px; margin-top: 5px; }
 .blocks-console>p { font-size: 8px; line-height: 1.5; margin: 8px 0; }
 .blocks-controls { margin-top: 10px; }
}
/* Shared grid rows keep card edges and their action rows aligned. */
.games-grid { align-items: stretch; }
.games-grid>.game-card, .games-grid>.board-tile { display: flex; flex-direction: column; }
.games-grid>.game-card>.game-card-bottom { margin-top: auto; padding-top: 20px; }
.games-grid .board-tile-content { display: flex; flex-direction: column; flex: 1; }
.games-grid .board-tile-footer { margin-top: auto; padding-top: 20px; }