:root {
  color-scheme: light;
  --canvas: oklch(.965 .004 255);
  --paper: oklch(1 0 0);
  --ink: oklch(.22 .012 255);
  --muted: oklch(.43 .012 255);
  --hint: oklch(.51 .008 255);
  --line: oklch(.89 .006 255);
  --green: oklch(.47 .14 151);
  --green-soft: oklch(.95 .035 151);
  --green-bright: oklch(.69 .19 151);
  --blue: oklch(.49 .12 245);
  --blue-soft: oklch(.95 .025 245);
  --orange: oklch(.46 .13 64);
  --orange-soft: oklch(.96 .04 82);
  --red: oklch(.49 .18 27);
  --red-soft: oklch(.96 .035 27);
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-family: var(--font);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); color: var(--ink); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid oklch(.52 .16 151 / .3); outline-offset: 2px; }
svg { display: block; }
a { color: var(--green); }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-panel { width: min(100%, 430px); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.auth-brand { padding: 24px 24px 18px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.brand-mark svg { width: 23px; height: 23px; }
.auth-title { margin: 12px 0 0; font-size: 20px; font-weight: 700; }
.auth-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.auth-form { display: grid; gap: 14px; padding: 20px 24px 24px; }
.app-shell { min-height: 100vh; }
.side-nav { position: fixed; z-index: 3; inset: 0 auto 0 0; width: 224px; display: flex; flex-direction: column; padding: 18px 13px 15px; border-right: 1px solid var(--line); background: var(--paper); }
.brand { display: flex; align-items: center; gap: 10px; padding: 5px 9px 22px; }
.brand-name { font-size: 14px; font-weight: 700; }
.brand-name small { display: block; color: var(--muted); font-size: 10px; font-weight: 450; }
.nav-caption { padding: 6px 11px; color: var(--hint); font-size: 11px; }
.nav-list { display: grid; gap: 3px; }
.nav-item { min-height: 43px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 6px; padding: 0 11px; background: transparent; color: var(--muted); text-align: left; }
.nav-item:hover { background: var(--canvas); color: var(--ink); }
.nav-item.active { background: var(--green-soft); color: var(--green); font-weight: 650; }
.nav-item svg { width: 18px; height: 18px; flex: 0 0 auto; }
.nav-badge { margin-left: auto; border-radius: 10px; padding: 1px 6px; background: var(--orange-soft); color: var(--orange); font-size: 10px; }
.side-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.base-chooser { display: grid; gap: 5px; margin-bottom: 12px; }
.base-chooser label { color: var(--muted); font-size: 11px; }
.base-chooser select { min-height: 39px; border: 1px solid var(--line); border-radius: 5px; padding: 0 9px; background: var(--paper); font-size: 12px; font-weight: 620; }
.profile { display: flex; align-items: center; gap: 9px; }
.avatar { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 650; }
.profile-name { font-size: 12px; font-weight: 620; }
.profile-name small { display: block; color: var(--muted); font-size: 10px; font-weight: 450; }
.work-area { min-height: 100vh; margin-left: 224px; }
.desktop-top { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--paper); }
.breadcrumb { color: var(--muted); font-size: 12px; }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.top-user { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.top-user .avatar { width: 28px; height: 28px; font-size: 11px; }
.mobile-top { display: none; }
.main-content { width: min(100%, 1380px); margin: auto; padding: 25px 28px 44px; }
.page { display: none; }
.page.active { display: block; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
h1 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
h2 { margin: 0; font-size: 15px; font-weight: 680; }
h3 { margin: 0; font-size: 13px; font-weight: 650; }
.page-sub { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 5px; padding: 0 13px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 620; text-decoration: none; }
.button:hover { background: var(--canvas); }
.button svg { width: 16px; height: 16px; }
.button.primary { border-color: var(--green); background: var(--green); color: white; }
.button.primary:hover { background: oklch(.42 .14 151); }
.button.text { border-color: transparent; background: transparent; color: var(--green); }
.button.danger { color: var(--red); }
.button.small { min-height: 34px; padding: 0 9px; font-size: 11px; }
.overview { display: flex; margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.overview-item { min-width: 0; flex: 1; padding: 12px 16px; }
.overview-item + .overview-item { border-left: 1px solid var(--line); }
.overview-label { color: var(--muted); font-size: 11px; }
.overview-value { margin-top: 2px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.overview-value small { margin-left: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.positive { color: var(--green); font-weight: 650; }
.negative { color: var(--red); font-weight: 650; }
.weather-strip { min-height: 42px; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-size: 12px; }
.weather-strip svg { width: 17px; height: 17px; color: var(--blue); }
.weather-strip .warning { margin-left: auto; color: var(--orange); font-weight: 620; }
.schedule-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(270px, .7fr); gap: 14px; align-items: start; }
.panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.spaced { margin-top: 12px; }
.panel-head { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 15px; border-bottom: 1px solid var(--line); }
.panel-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.slot-list { padding: 0 14px; }
.slot-row { border-bottom: 1px solid var(--line); }
.slot-row:last-child { border-bottom: 0; }
.slot-trigger { width: 100%; min-height: 65px; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; border: 0; padding: 8px 2px; background: transparent; text-align: left; }
.slot-trigger:hover { background: oklch(.985 .003 255); }
.slot-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.slot-main { min-width: 0; }
.slot-countline { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.slot-countline strong { font-weight: 650; }
.slot-countline span { color: var(--muted); font-size: 11px; }
.meter { display: block; width: min(100%, 180px); height: 4px; margin-top: 6px; overflow: hidden; border-radius: 4px; background: var(--canvas); }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--green-bright); }
.meter .level-0 { width: 0%; }
.meter .level-10 { width: 10%; }
.meter .level-20 { width: 20%; }
.meter .level-30 { width: 30%; }
.meter .level-40 { width: 40%; }
.meter .level-50 { width: 50%; }
.meter .level-60 { width: 60%; }
.meter .level-70 { width: 70%; }
.meter .level-80 { width: 80%; }
.meter .level-90 { width: 90%; }
.meter .level-100 { width: 100%; }
.meter span.full { background: var(--orange); }
.slot-remaining { min-width: 54px; color: var(--green); font-size: 11px; font-weight: 650; text-align: right; white-space: nowrap; }
.slot-remaining.full { color: var(--orange); }
.slot-arrow { width: 15px; height: 15px; color: var(--hint); transition: transform .15s ease; }
.slot-row.open .slot-arrow { transform: rotate(90deg); }
.slot-detail { display: none; padding: 0 8px 9px 76px; }
.slot-row.open .slot-detail { display: block; }
.slot-order { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12px; }
.slot-order small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.empty-inline { padding: 16px 0; color: var(--muted); font-size: 12px; }
.pill { display: inline-flex; align-items: center; min-height: 21px; border-radius: 3px; padding: 1px 6px; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 600; white-space: nowrap; }
.pill.pending { background: var(--orange-soft); color: var(--orange); }
.pill.cancelled { background: var(--red-soft); color: var(--red); }
.pill.neutral { background: var(--canvas); color: var(--muted); }
.roster { padding: 0 14px; }
.roster-row { display: flex; align-items: flex-start; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.roster-row:last-child { border-bottom: 0; }
.roster-initial { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--canvas); color: var(--muted); font-weight: 650; }
.roster-copy { min-width: 0; flex: 1; }
.roster-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.row-link { border: 0; padding: 0; background: transparent; color: var(--green); font-size: 11px; }
.form-wrap { width: min(100%, 900px); }
.back { margin-bottom: 12px; }
.form-section { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.form-section-title { padding: 12px 15px; border-bottom: 1px solid var(--line); font-weight: 680; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 15px; padding: 14px 15px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .field-label { font-size: 12px; font-weight: 620; }
.required { color: var(--red); }
.field input, .field select, .field textarea, .control { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; background: var(--paper); font-size: 13px; }
.field textarea { min-height: 66px; resize: vertical; }
.field-note { color: var(--muted); font-size: 11px; }
.field-note.error { color: var(--red); }
.guest-list { display: grid; gap: 8px; }
.guest-row { display: grid; grid-template-columns: minmax(80px,.75fr) minmax(150px,1.25fr) auto; gap: 8px; align-items: center; }
.guest-row input,.guest-row select { min-height: 40px; border: 1px solid var(--line); border-radius: 5px; padding: 7px 8px; background: var(--paper); font-size: 12px; }
.money-summary { display: flex; justify-content: space-between; gap: 16px; padding: 13px 15px; background: var(--canvas); }
.money-summary-labels { display: grid; gap: 2px; color: var(--muted); font-size: 11px; }
.money-summary-values { display: flex; gap: 18px; text-align: right; }
.money-summary-values strong { font-size: 13px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--line); }
.toolbar-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.search { min-height: 40px; display: flex; align-items: center; flex: 1 1 230px; gap: 8px; border: 1px solid var(--line); border-radius: 5px; padding: 0 10px; background: var(--paper); }
.search input { width: 100%; border: 0; outline: 0; background: transparent; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; white-space: nowrap; }
th { color: var(--muted); font-size: 11px; font-weight: 600; }
tbody tr[data-order] { cursor: pointer; }
tbody tr[data-order]:hover { background: oklch(.985 .003 255); }
.table-sub { margin-top: 2px; color: var(--muted); font-size: 10px; }
.mobile-list { display: none; }
.detail-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(270px,.9fr); gap: 12px; align-items: start; }
.detail-cells { padding: 0 14px; }
.detail-cell { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.detail-cell:last-child { border-bottom: 0; }
.detail-cell .label { color: var(--muted); white-space: nowrap; }
.detail-cell .value { text-align: right; }
.action-row { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 14px; border-top: 1px solid var(--line); }
.action-row .button { min-height: 38px; }
.inline-workflow { margin: 0 14px; border-top: 1px solid var(--line); }
.inline-workflow summary { padding: 11px 0 4px; color: var(--green); font-size: 12px; font-weight: 630; cursor: pointer; }
.inline-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 7px 0 13px; }
.payment-record { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.payment-record:last-child { border-bottom: 0; }
.audit-list { padding: 0 14px; }
.audit-row { display: grid; grid-template-columns: 9px 1fr auto; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.audit-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--green-bright); }
.audit-row time { color: var(--muted); white-space: nowrap; }
.weather-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,1fr); gap: 12px; align-items: start; }
.check-slot { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 12px; }
.check-slot input { width: 18px; height: 18px; accent-color: var(--green); }
.check-slot small { display: block; color: var(--muted); font-size: 10px; }
.settings-row { display: grid; grid-template-columns: 75px 1fr 100px; align-items: center; gap: 8px; min-height: 49px; border-bottom: 1px solid var(--line); }
.settings-row:last-child { border-bottom: 0; }
.settings-row input,.settings-row select { min-height: 38px; border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; background: var(--paper); font-size: 12px; }
.settings-list { padding: 0 14px; }
.nested-section { margin: 12px 14px 0; }
.nested-section .form-grid { padding: 12px; }
.tabs-four { grid-template-columns: repeat(4,1fr); }
.tabs-three { grid-template-columns: repeat(3,1fr); }
.weather-event { padding: 0 14px; border-top: 1px solid var(--line); }
.weather-event summary { padding: 12px 0; cursor: pointer; font-size: 12px; font-weight: 620; }
.weather-order { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,.8fr); gap: 10px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); font-size: 12px; }
.weather-resolution { display: grid; gap: 8px; }
.weather-resolution select,.weather-reschedule-fields input { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; background: var(--paper); font-size: 12px; }
.weather-reschedule-fields { display: grid; gap: 7px; }
.weather-reschedule-fields .field { gap: 3px; }
.package-record,.user-record { display: block; border-bottom: 1px solid var(--line); }
.package-record:last-child,.user-record:last-child { border-bottom: 0; }
.package-record summary,.user-record summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 53px; cursor: pointer; list-style: none; }
.package-record summary::-webkit-details-marker,.user-record summary::-webkit-details-marker { display: none; }
.package-record summary small,.user-record summary small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.package-record .form-grid,.user-record .form-grid { padding: 12px 0; }
.notice { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--muted); font-size: 12px; }
.empty { padding: 27px 15px; color: var(--muted); font-size: 12px; text-align: center; }
.voucher { width: min(100%,760px); margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.voucher-head { display: flex; justify-content: space-between; gap: 14px; padding: 18px; border-bottom: 1px solid var(--line); }
.voucher-title small { color: var(--muted); font-size: 11px; }
.voucher-title h2 { margin: 5px 0 9px; font-size: 19px; }
.voucher-code { text-align: right; }
.voucher-code small { display: block; color: var(--muted); font-size: 10px; }
.voucher-code strong { font-size: 13px; }
.voucher-section { padding: 13px 18px; border-bottom: 1px solid var(--line); }
.voucher-section:last-child { border-bottom: 0; }
.voucher-section h3 { margin-bottom: 9px; color: var(--muted); font-size: 11px; }
.voucher-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.voucher-facts small,.voucher-money small { display: block; color: var(--muted); font-size: 10px; }
.voucher-facts strong,.voucher-money strong { display: block; margin-top: 2px; font-size: 13px; }
.voucher-guests { display: grid; gap: 7px; }
.voucher-guest { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.voucher-guest span:last-child { color: var(--muted); text-align: right; }
.voucher-money { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.voucher-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.message-area { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 10px; }
.message-area textarea { min-height: 120px; border: 1px solid var(--line); border-radius: 5px; padding: 9px; font-size: 12px; line-height: 1.6; resize: vertical; }
.send-history { display: grid; gap: 6px; margin-top: 10px; color: var(--muted); font-size: 11px; }
.send-history-row { display: flex; justify-content: space-between; gap: 10px; }
.bottom-action,.bottom-tabs { display: none; }
#toast { position: fixed; z-index: 10; left: 50%; bottom: 22px; max-width: calc(100vw - 30px); transform: translate(-50%,8px); opacity: 0; pointer-events: none; border-radius: 5px; padding: 9px 13px; background: var(--ink); color: white; font-size: 12px; transition: opacity .16s ease,transform .16s ease; }
#toast.show { transform: translate(-50%,0); opacity: 1; }
@media (max-width: 1060px) {
  .side-nav { width: 190px; }
  .work-area { margin-left: 190px; }
  .main-content { padding-right: 20px; padding-left: 20px; }
  .schedule-grid { grid-template-columns: minmax(0,1.15fr) minmax(250px,.85fr); }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  .side-nav,.desktop-top { display: none; }
  .work-area { margin: 0; min-height: 100dvh; }
  .mobile-top { position: sticky; z-index: 4; top: 0; min-height: calc(49px + env(safe-area-inset-top)); display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; padding: env(safe-area-inset-top) 10px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
  .mobile-base { max-width: 132px; border: 0; background: transparent; font-size: 12px; font-weight: 650; }
  .mobile-title { justify-self: center; font-size: 15px; font-weight: 650; }
  .native-capsule { min-width: 68px; height: 31px; display: flex; align-items: center; justify-content: space-evenly; justify-self: end; border: 1px solid var(--line); border-radius: 18px; }
  .native-capsule span:first-child { font-size: 16px; letter-spacing: 1px; }
  .native-capsule i { width: 1px; height: 15px; background: var(--line); }
  .native-capsule span:last-child { width: 15px; height: 15px; border: 1.5px solid var(--ink); border-radius: 50%; }
  .main-content { width: 100%; padding: 15px 0 calc(135px + env(safe-area-inset-bottom)); }
  .page-head { align-items: flex-start; padding: 0 14px; margin-bottom: 12px; }
  h1 { font-size: 20px; }
  .page-sub { font-size: 12px; }
  .page-head .button { min-height: 39px; padding: 0 9px; font-size: 11px; }
  .overview { margin: 0 10px 10px; }
  .overview-item { padding: 9px 10px; }
  .overview-label { font-size: 10px; }
  .overview-value { font-size: 18px; }
  .weather-strip { min-height: 42px; margin: 0 10px 11px; padding: 0 9px; font-size: 11px; }
  .weather-strip .warning { font-size: 10px; }
  .schedule-grid,.detail-grid,.weather-columns { display: block; }
  .schedule-grid > .panel,.detail-grid > .panel,.weather-columns > .panel { margin-bottom: 10px; }
  .panel { border-right: 0; border-left: 0; border-radius: 0; }
  .panel-head { min-height: 48px; padding: 0 14px; }
  .panel-head p { font-size: 10px; }
  .slot-list { padding: 0 12px; }
  .slot-trigger { min-height: 65px; grid-template-columns: 52px minmax(0,1fr) auto 15px; gap: 7px; }
  .slot-detail { padding: 0 2px 8px 59px; }
  .roster-panel { display: none; }
  .form-grid { grid-template-columns: 1fr; gap: 11px; padding: 12px 14px; }
  .field.full { grid-column: auto; }
  .field input,.field select,.field textarea,.control { min-height: 45px; font-size: 14px; }
  .guest-row { grid-template-columns: minmax(70px,.8fr) minmax(120px,1.2fr); }
  .guest-row .remove-guest { grid-column: 2; justify-self: end; }
  .form-actions { display: none; }
  .detail-grid > .panel { margin-bottom: 10px; }
  .detail-actions .button { flex: 1 1 40%; min-height: 42px; }
  .inline-grid { grid-template-columns: 1fr; }
  .table-wrap { display: none; }
  .mobile-list { display: block; padding: 0 14px; }
  .mobile-order { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; background: transparent; text-align: left; }
  .mobile-order-head,.mobile-order-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .mobile-order-foot { align-items: center; margin-top: 8px; font-size: 11px; }
  .mobile-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
  .settings-row { grid-template-columns: 58px 1fr 82px; }
  .settings-row input,.settings-row select { min-height: 41px; }
  .voucher { margin: 0 10px; border-radius: 6px; }
  .voucher-head { padding: 15px 14px; }
  .voucher-title h2 { font-size: 17px; }
  .voucher-section { padding: 12px 14px; }
  .voucher-money { gap: 4px; }
  .voucher-money strong { font-size: 12px; }
  .message-area { grid-template-columns: 1fr; }
  .message-area textarea { min-height: 145px; }
  .weather-order { grid-template-columns: 1fr; }
  .desktop-send-actions { display: none; }
  .bottom-action { position: fixed; z-index: 5; inset: auto 0 calc(58px + env(safe-area-inset-bottom)); display: flex; gap: 8px; padding: 8px 13px; border-top: 1px solid var(--line); background: var(--paper); }
  .bottom-action .button { flex: 1; min-height: 46px; font-size: 13px; }
  .bottom-action.single .button { width: 100%; }
  .bottom-tabs { position: fixed; z-index: 5; inset: auto 0 0; min-height: calc(57px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4,1fr); padding: 4px 4px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: var(--paper); }
  .tab { display: grid; align-content: center; justify-items: center; gap: 2px; border: 0; background: transparent; color: var(--muted); font-size: 10px; }
  .tab svg { width: 19px; height: 19px; }
  .tab.active { color: var(--green); font-weight: 650; }
  #toast { bottom: calc(122px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .side-nav,.desktop-top,.mobile-top,.bottom-action,.bottom-tabs,.print-hide { display: none !important; }
  .work-area { margin: 0; }
  .main-content { padding: 0; }
  .page { display: none !important; }
  #page-voucher.active { display: block !important; }
  .voucher { width: 100%; border: 1px solid #999; }
}