:root {
    color-scheme: light;
    --ink: #172033; --navy: #172033; --muted: #667085; --subtle: #8a94a6;
    --brand: #d91f58; --brand-dark: #b91448; --brand-soft: #fff0f5;
    --success: #087a5b; --success-soft: #eaf8f3; --danger: #b42318;
    --line: #e3e7ee; --line-strong: #c7ced9; --surface: #fff; --bg: #f2f4f7; --field: #f8f9fb;
    --shadow-sm: 0 2px 8px rgba(23,32,51,.06); --shadow-md: 0 12px 32px rgba(23,32,51,.10); --shadow-brand: 0 12px 28px rgba(217,31,88,.25);
    --radius-sm: 12px; --radius: 18px; --radius-lg: 24px;
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* { box-sizing: border-box; }
html,body { overscroll-behavior-y:none; }
body { margin:0; min-width:300px; background:var(--bg); color:var(--ink); padding-bottom:calc(94px + env(safe-area-inset-bottom)); -webkit-font-smoothing:antialiased; }
body.menu-open,.app-loading { overflow:hidden; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
a { color:var(--brand-dark); text-underline-offset:3px; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { margin:0; font-size:clamp(1.65rem,7vw,2.15rem); line-height:1.08; letter-spacing:-.035em; }
h2 { font-size:1.12rem; line-height:1.25; }
small,.muted { color:var(--muted); }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.eyebrow { display:block; margin-bottom:6px; color:var(--brand-dark); font-size:.72rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.section-title { margin:28px 2px 12px; font-size:.82rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
:focus-visible { outline:3px solid #f07ca2; outline-offset:3px; }

.pwa-header { position:sticky; top:0; z-index:30; min-height:68px; padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left)); display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.92); border-bottom:1px solid rgba(227,231,238,.85); backdrop-filter:blur(16px) saturate(140%); }
.pwa-install { max-width:700px; margin:16px auto 0; padding:0 16px; }
.pwa-install .primary { width:100%; }
[data-install-instructions] ol { padding-left:24px; margin:12px 0; }
[data-install-instructions] li + li { margin-top:12px; }
.pwa-brand { flex:0 0 auto; display:flex; align-items:center; }
.pwa-brand img { display:block; width:116px; height:auto; }
.header-project { min-width:0; margin-left:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:7px; align-items:center; color:var(--ink); text-align:right; text-decoration:none; }
.header-project>span { grid-column:1/-1; color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.header-project strong { min-width:0; max-width:32vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }
.header-project small { font-size:.7rem; font-weight:750; }
.offline-queue-badge { flex:0 0 auto; min-height:38px; border:1px solid #f2aec4; border-radius:999px; padding:8px 11px; background:var(--brand-soft); color:#9c1741; font-size:.75rem; font-weight:850; cursor:pointer; }
.offline-queue-badge[hidden] { display:none; }
.offline-queue-badge.is-offline { border-color:#eccb77; background:#fff8e6; color:#71500a; }

.pwa-main { width:min(700px,100%); margin:0 auto; padding:24px 16px 40px; transition:transform 180ms ease-out; }
.pwa-main.pulling { transition:none; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px; }
.project-page-heading { align-items:center; }
.primary,.secondary,.action-card { min-height:52px; border-radius:var(--radius-sm); display:inline-flex; justify-content:center; align-items:center; font-weight:800; text-decoration:none; cursor:pointer; }
.primary { border:0; background:var(--brand); color:#fff; padding:14px 20px; box-shadow:0 4px 12px rgba(217,31,88,.15); }
.primary:active { background:var(--brand-dark); transform:translateY(1px); }
.secondary { border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); padding:13px 17px; box-shadow:var(--shadow-sm); }
.compact { min-height:44px; padding:9px 13px; font-size:.88rem; }
.link-button { border:0; background:none; color:var(--brand-dark); font-weight:800; padding:10px; }

.location-button { white-space:nowrap; }
.location-status { min-height:20px; margin:-5px 0 12px; color:var(--muted); font-size:.86rem; }
.project-search { margin-bottom:18px; }
.project-search input { padding-left:46px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); background-size:21px; background-position:15px center; background-repeat:no-repeat; }
.project-list { display:grid; gap:10px; }
[data-recent-projects] h2 { margin:22px 2px 10px; color:var(--muted); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; }
.project-card { min-height:82px; display:flex; gap:12px; align-items:center; justify-content:space-between; color:inherit; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 17px; box-shadow:var(--shadow-sm); }
.project-card::after { content:"›"; flex:0 0 auto; color:var(--subtle); font-size:1.65rem; line-height:1; }
.project-card.nearest { border-color:#ef7da1; box-shadow:0 0 0 3px rgba(217,31,88,.09); }
.project-card-main { min-width:0; display:grid; gap:3px; }
.project-card-main strong { font-size:1rem; }
.project-card-main small { font-size:.8rem; }
.distance { margin-left:auto; white-space:nowrap; color:var(--brand-dark); font-size:.78rem; font-weight:850; }
.project-card[hidden],[data-recent-projects][hidden],[data-project-search-empty][hidden] { display:none; }

.project-picker { margin:0 0 20px; min-width:0; }
.project-picker label,.field { display:grid; gap:8px; min-width:0; font-weight:750; }
.field-label { display:block; color:var(--ink); font-size:.9rem; font-weight:800; }
.required-indicator { margin-left:2px; color:var(--brand); font-weight:900; }
select,input,textarea { width:100%; min-width:0; border:1.5px solid var(--line-strong); background:var(--surface); border-radius:var(--radius-sm); min-height:54px; padding:12px 14px; color:var(--ink); box-shadow:inset 0 1px 1px rgba(23,32,51,.02); }
select { padding-right:40px; }
input::placeholder,textarea::placeholder { color:#98a2b3; }
input:focus,select:focus,textarea:focus { border-color:#de4a79; outline:3px solid rgba(217,31,88,.11); }
textarea { min-height:108px; resize:vertical; }
.field input:not([type=checkbox]):not([type=hidden]),.field select { height:54px; min-height:54px; }
.field input[type=date],.field input[type=datetime-local] { appearance:none; -webkit-appearance:none; display:block; width:100%; text-align:left; }
.field input::-webkit-date-and-time-value { min-width:0; text-align:left; }

.project-address { margin:0 2px 18px; color:var(--muted); font-size:.9rem; }
.project-quick-actions { display:grid; gap:10px; }
.quick-action { min-height:80px; display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:var(--radius); padding:14px; background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-sm); }
.quick-action .action-icon { width:50px; height:50px; display:grid; place-items:center; flex:0 0 auto; border-radius:15px; background:var(--brand-soft); color:var(--brand); }
.quick-action .pwa-icon { width:27px; height:27px; }
.quick-action-camera { min-height:94px; border:0; background:linear-gradient(135deg,var(--brand) 0%,#ee4f80 100%); color:#fff; box-shadow:var(--shadow-brand); }
.quick-action-camera .action-icon { width:58px; height:58px; border-radius:18px; background:rgba(255,255,255,.18); color:#fff; }
.action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.action-card { min-width:0; min-height:116px; flex-direction:column; gap:10px; border:1px solid var(--line); padding:14px; background:var(--surface); color:var(--ink); text-align:center; box-shadow:var(--shadow-sm); }
.action-card .action-icon { width:45px; height:45px; display:grid; place-items:center; border-radius:14px; background:var(--field); color:var(--brand); }
.action-card .action-icon .pwa-icon { width:25px; height:25px; }
.action-card>span:not(.action-icon) { color:var(--muted); font-size:.82rem; }
.back-link { display:inline-flex; align-items:center; min-height:44px; margin:-9px 0 8px; color:var(--muted); font-size:.86rem; font-weight:800; text-decoration:none; }
.task-list { display:grid; gap:10px; }
.task-card { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px; background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-sm); }
.task-card>span:first-child { min-width:0; display:grid; gap:7px; }
.task-card>span:last-child { color:var(--subtle); font-size:1.7rem; }
.task-card small { width:max-content; border-radius:999px; padding:4px 8px; font-size:.72rem; font-weight:850; }
.status-open { background:#fff4dc; color:#75520a; }
.status-done { background:var(--success-soft); color:var(--success); }
.task-description { margin:0 0 18px; color:var(--muted); line-height:1.55; }
.checklist-card { margin-bottom:20px; }
.task-completion-form { display:grid; margin-top:20px; }
.task-completion-form button { width:100%; }

.form-card,.auth-card,.field-checklist-item,.field-day { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-sm); }
.form-card>h1 { margin-bottom:20px; }
.form-stack { display:grid; gap:18px; min-width:0; }
[data-project-fields] { display:grid; gap:18px; min-width:0; }
[data-project-fields]:empty { display:none; }
.form-actions { display:grid; gap:10px; margin-top:2px; }
.form-actions .primary,.form-stack>.primary { width:100%; min-height:58px; font-size:1.03rem; }
.form-actions .primary:disabled { opacity:.5; box-shadow:none; cursor:not-allowed; }
.checkbox-field { min-height:48px; display:flex; align-items:center; gap:11px; font-weight:750; }
.checkbox-field input { width:23px; height:23px; min-height:23px; flex:0 0 auto; accent-color:var(--brand); }
.capture-card,.expense-card { padding:16px; }
.photo-actions { display:grid; gap:10px; }
.photo-button { position:relative; overflow:hidden; cursor:pointer; }
.photo-button input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.photo-button:focus-within { outline:3px solid #f07ca2; outline-offset:3px; }
.camera-button { min-height:112px; display:flex; align-items:center; justify-content:flex-start; gap:16px; border-radius:var(--radius); padding:20px; background:linear-gradient(135deg,var(--brand) 0%,#ec4779 100%); color:#fff; box-shadow:var(--shadow-brand); }
.camera-button .pwa-icon { width:42px; height:42px; flex:0 0 auto; }
.camera-button>span { display:grid; gap:4px; text-align:left; }
.camera-button strong { font-size:1.18rem; }
.camera-button small { color:rgba(255,255,255,.82); }
.gallery-button { width:100%; min-height:50px; }
.photo-batch-preview { display:grid; grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:10px; margin-top:14px; }
.photo-batch-preview img { display:block; width:100%; height:112px; object-fit:cover; border-radius:var(--radius-sm); }
.photo-batch-preview button { width:100%; margin-top:6px; }
[data-photo-count],[data-photo-error],[data-photo-requirement] { margin:10px 2px 0; color:var(--muted); font-size:.85rem; }
[data-photo-error] { color:var(--danger); }
.photo-input { position:relative; min-height:150px; border:2px dashed #c1c8d3; border-radius:var(--radius); display:grid; place-items:center; overflow:hidden; background:var(--field); text-align:center; padding:18px; }
.photo-input input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.photo-input>span { display:grid; justify-items:center; gap:5px; }
.photo-input .pwa-icon { width:34px; height:34px; margin-bottom:3px; color:var(--brand); }
.photo-input img { display:none; max-width:100%; max-height:280px; border-radius:var(--radius-sm); }
.photo-input.has-preview img { display:block; }
.photo-input.has-preview>span { display:none; }
.receipt-input { min-height:170px; }
.amount-input { position:relative; display:block; }
.amount-input input { height:72px!important; min-height:72px!important; padding-right:62px; font-size:1.8rem; font-weight:850; letter-spacing:-.03em; }
.amount-input>span { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:800; pointer-events:none; }

.notice { margin:0 0 16px; border:1px solid #fac7d7; border-radius:var(--radius-sm); padding:13px 14px; background:var(--brand-soft); color:#94153e; font-weight:650; }
.notice.success,.success { border-color:#b7e7d7; background:var(--success-soft); color:#086148; }
.empty-state { padding:34px 18px; border:1px dashed var(--line-strong); border-radius:var(--radius); background:rgba(255,255,255,.55); text-align:center; color:var(--muted); }
.validation-errors,.error { color:var(--danger); }
.validation-summary-valid { display:none; }

.pwa-icon { width:26px; height:26px; flex-shrink:0; }
.bottom-nav { position:fixed; z-index:40; bottom:0; left:0; right:0; min-height:calc(76px + env(safe-area-inset-bottom)); padding:7px max(7px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left)); display:flex; align-items:flex-end; justify-content:space-around; background:rgba(255,255,255,.96); border-top:1px solid rgba(227,231,238,.9); box-shadow:0 -10px 30px rgba(23,32,51,.08); backdrop-filter:blur(18px) saturate(140%); }
.bottom-nav>a,.bottom-nav>button { position:relative; min-width:64px; min-height:57px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; border-radius:13px; background:none; color:var(--muted); font-size:.72rem; font-weight:800; text-decoration:none; cursor:pointer; }
.bottom-nav>a>span:last-child,.bottom-nav>button>span:last-child { color:inherit; font-size:inherit; }
.bottom-nav>a.is-active { color:var(--brand); background:var(--brand-soft); }
.bottom-nav .pwa-icon { width:24px; height:24px; }
.bottom-nav .quick-nav { color:var(--brand); }
.quick-nav-icon { width:52px; height:52px; margin-top:-20px; display:grid; place-items:center; border:4px solid #fff; border-radius:50%; background:var(--brand); color:#fff!important; box-shadow:0 7px 18px rgba(217,31,88,.28); }
.quick-nav-icon .pwa-icon { width:27px; height:27px; }

.pwa-action-menu { position:fixed; inset:auto 0 0; width:min(700px,100%); max-width:100%; max-height:88dvh; margin:0 auto; border:0; border-radius:28px 28px 0 0; padding:12px 16px calc(20px + env(safe-area-inset-bottom)); color:var(--ink); background:var(--surface); overflow-y:auto; box-shadow:0 -20px 60px rgba(23,32,51,.2); }
.pwa-action-menu::before { content:""; width:42px; height:5px; margin:0 auto 3px; border-radius:999px; background:#d6dbe3; }
.pwa-action-menu[open] { display:grid; gap:9px; }
.pwa-action-menu::backdrop { background:rgba(16,24,40,.58); backdrop-filter:blur(2px); }
.pwa-action-menu header { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:5px 0 4px; }
.pwa-action-menu h2 { margin:0; font-size:1.28rem; }
.pwa-action-menu header button { border:0; border-radius:50%; background:var(--field); color:var(--ink); width:46px; min-width:46px; height:46px; font-size:1.8rem; line-height:1; }
.pwa-action-menu a,.pwa-account-menu .pwa-logout-button,.pwa-account-menu .pwa-support-button { width:100%; min-height:58px; display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:15px; padding:12px 14px; background:var(--field); color:var(--ink); font-size:.98rem; font-weight:750; text-align:left; text-decoration:none; }
.pwa-action-menu a .pwa-icon,.pwa-account-menu button .pwa-icon { width:25px; height:25px; color:var(--brand); }
.pwa-action-menu a:active,.pwa-account-menu button:active { background:var(--brand-soft); border-color:#ef9ab6; }
.pwa-account-menu form { margin:3px 0 0; }
.pwa-action-menu small { display:block; margin-top:3px; font-size:.8rem; font-weight:500; }
.offline-queue-menu[open] { gap:10px; }
.offline-queue-status { margin:0; color:var(--muted); }
.offline-queue-list { display:grid; gap:8px; }
.offline-queue-item { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; background:var(--field); }
.offline-queue-item>span { display:grid; gap:3px; min-width:0; }
.offline-queue-item strong { overflow-wrap:anywhere; }
.offline-queue-item small { font-size:.76rem; }
.offline-queue-item button { min-height:42px; border:0; border-radius:9px; padding:8px 10px; background:#fff; color:var(--danger); font-weight:750; }
.offline-queue-error { color:var(--danger); }
.offline-upload-button { width:100%; margin-top:4px; }
.offline-upload-button:disabled { opacity:.5; }
.queue-toast { position:fixed; z-index:1100; left:50%; bottom:calc(102px + env(safe-area-inset-bottom)); width:calc(100% - 32px); transform:translate(-50%,18px); border-radius:999px; padding:11px 18px; background:var(--ink); color:#fff; font-weight:750; text-align:center; opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; }
.queue-toast.visible { opacity:1; transform:translate(-50%,0); }

.field-checklist-item,.field-day { margin-top:12px; border-radius:var(--radius); }
.field-checklist-item summary { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
.field-checklist-item summary span { color:var(--success); }
.field-checklist-item form,.field-checklist-item label { display:grid; gap:10px; }
.field-checklist-item button { min-height:52px; border:0; border-radius:var(--radius-sm); background:var(--brand); color:#fff; font-weight:800; padding:12px; }
.field-checklist-item button:disabled { opacity:.48; }
.field-checklist-item button.secondary { background:var(--field); color:var(--ink); border:1px solid var(--line); }
.field-checklist-item:target { outline:3px solid #ef9ab6; outline-offset:3px; }
.completion-notice { padding:12px; border-left:3px solid var(--brand); background:var(--field); }
.project-context { color:var(--muted); overflow-wrap:anywhere; }
.field-day h2 { margin:0 0 12px; font-size:1rem; text-transform:capitalize; }
.field-day article+article { border-top:1px solid var(--line); margin-top:12px; padding-top:12px; }
.field-day p { margin:6px 0; }
.field-day small { color:var(--muted); }
.workplan-navigation { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:16px 0; }
.workplan-navigation a { min-width:48px; text-align:center; }
.pwa-time-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.time-total { display:grid; gap:7px; margin-bottom:14px; background:linear-gradient(145deg,#172033,#27344d); color:#fff; }
.time-total span { color:#d8deea; }
.time-total strong { font-size:1.8rem; }
.registration-list { display:grid; gap:10px; }
.registration-card { overflow-wrap:anywhere; }
.registration-card header { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.registration-card time { color:var(--muted); font-size:.78rem; }
.registration-card h2 { margin:12px 0 4px; }
.registration-card p { margin:8px 0; }
.history-pagination { display:flex; justify-content:space-between; gap:12px; margin-top:16px; }
.time-day { padding:0; }
.time-day summary { min-height:60px; display:flex; align-items:center; gap:10px; padding:14px 16px; list-style:none; cursor:pointer; }
.time-day summary::-webkit-details-marker { display:none; }
.time-day summary strong { margin-left:auto; white-space:nowrap; }
.time-day summary::after { content:"⌄"; color:var(--muted); }
.time-day[open] summary::after { transform:rotate(180deg); }
.time-day .time-entry { margin:0 16px; padding:12px 0; }
.time-entry { display:grid; gap:4px; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.time-entry p { margin:0; }
.time-empty-day { min-height:54px; display:flex; align-items:center; justify-content:space-between; border-radius:var(--radius-sm); padding:12px 16px; color:var(--muted); }
.time-day.time-day-off,.time-empty-day.time-day-off { background:#e8ecf2; color:var(--ink); }
.holiday-name { display:block; margin-top:3px; font-size:.76rem; }

.auth-wrap { min-height:calc(100dvh - 160px); display:grid; place-items:center; }
.auth-card { width:min(430px,100%); padding:22px; }
.auth-logo { width:190px; display:block; margin:0 auto 24px; }
.auth-card h1 { margin-bottom:20px; }
.pull-refresh { position:fixed; top:78px; left:50%; transform:translateX(-50%); z-index:25; pointer-events:none; }
.pull-refresh[hidden] { display:none; }
.refresh-spinner { display:block; width:27px; height:27px; border:3px solid var(--line); border-top-color:var(--brand); border-radius:50%; transform:rotate(var(--pull-rotation,0deg)); }
.pull-refresh.refreshing .refresh-spinner { animation:refresh-spin .7s linear infinite; }
.header-draft-link { display:inline-flex; align-items:center; gap:5px; padding:8px 10px; border-radius:999px; background:#fff0f5; color:#a40d4d; font-size:.76rem; font-weight:750; white-space:nowrap; text-decoration:none; }
.header-draft-link[hidden] { display:none; }
.header-draft-link strong { display:grid; place-items:center; min-width:20px; height:20px; padding:0 4px; border-radius:50%; background:#b71356; color:#fff; }
@media (max-width:540px) {
    .pwa-header:has(.header-draft-link:not([hidden])) { flex-wrap:wrap; }
    .pwa-header:has(.header-draft-link:not([hidden])) .header-project { flex:1; }
    .header-draft-link { margin-left:auto; }
}
.photo-draft-list { display:grid; gap:10px; }
.photo-draft-card { display:flex; align-items:center; gap:14px; min-height:82px; padding:9px 14px 9px 9px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); color:var(--ink); text-decoration:none; }
.photo-draft-card img { width:66px; height:64px; border-radius:12px; object-fit:cover; }
.photo-draft-card span:nth-child(2) { display:grid; gap:4px; min-width:0; flex:1; }
.photo-draft-card small { color:var(--muted); }
.photo-draft-card span:last-child { font-size:1.7rem; color:var(--brand); }
.photo-draft-preview { display:block; width:100%; max-height:52vh; object-fit:contain; border-radius:var(--radius); background:#111827; }
.photo-draft-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin:14px 0 22px; color:var(--muted); }
.photo-draft-meta strong { color:var(--ink); }
.photo-form-actions { display:grid; gap:20px; }
.photo-form-actions button { width:100%; min-height:54px; }
@keyframes refresh-spin { to { transform:rotate(360deg); } }
.app-loading-overlay { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px; background:rgba(242,244,247,.97); backdrop-filter:blur(4px); }
.app-loading-overlay[hidden] { display:none; }
.app-loading-content { display:grid; justify-items:center; gap:20px; color:var(--ink); }
.app-loading-content img { width:min(240px,68vw); height:auto; }
.app-loading-spinner { display:block; width:36px; height:36px; border:4px solid #d3d9e2; border-top-color:var(--brand); border-radius:50%; animation:app-loading-spin .75s linear infinite; }
@keyframes app-loading-spin { to { transform:rotate(360deg); } }
.startup-page { min-height:100dvh; padding:0; background:var(--bg); }
.startup-shell { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:32px max(20px,env(safe-area-inset-left)); }
.startup-logo { width:min(270px,72vw); height:auto; }
.startup-offline .app-loading-spinner { animation-play-state:paused; opacity:.55; }

@media (max-width:380px) {
    .pwa-main { padding-left:12px; padding-right:12px; }
    .pwa-brand img { width:100px; }
    .header-project strong { max-width:28vw; }
    .bottom-nav>a,.bottom-nav>button { min-width:56px; font-size:.68rem; }
    .action-card { min-height:104px; }
}
@media (min-width:640px) {
    .action-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:768px) {
    body { padding-bottom:120px; }
    .pwa-header { min-height:78px; padding:13px max(26px,env(safe-area-inset-right)) 13px max(26px,env(safe-area-inset-left)); }
    .pwa-brand img { width:148px; }
    .header-project strong { max-width:280px; font-size:.9rem; }
    .pwa-main { width:min(1040px,100%); padding:34px 30px 56px; }
    .project-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
    .project-card { min-height:88px; }
    .form-card { max-width:760px; margin-left:auto; margin-right:auto; padding:26px; }
    .capture-card,.expense-card { padding:24px; }
    .auth-card { padding:30px; }
    .bottom-nav { left:50%; right:auto; bottom:max(18px,env(safe-area-inset-bottom)); width:min(620px,calc(100% - 48px)); min-height:82px; padding:8px 20px; transform:translateX(-50%); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-md); }
    .pwa-action-menu { inset:auto 24px max(24px,env(safe-area-inset-bottom)); width:min(660px,calc(100% - 48px)); border-radius:28px; padding:14px 22px 22px; }
    .queue-toast { bottom:126px; }
    .startup-shell { padding:48px; }
}
@media (prefers-reduced-motion:reduce) {
    .pwa-main { transition:none; }
    .pull-refresh.refreshing .refresh-spinner,.app-loading-spinner { animation:none; }
}