:root { --ink:#17312c; --green:#123d35; --mint:#e8f1ea; --cream:#faf8f2; --line:#d5dfd7; --accent:#e7aa42; --danger:#a6372b; --font-scale:1; }
html[data-text-size="large"] { --font-scale:1.15; }
html[data-text-size="xlarge"] { --font-scale:1.3; }
html { font-size:calc(16px * var(--font-scale)); }
* { box-sizing: border-box; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--cream); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font:inherit; }
.pull-refresh { --pull-distance:12px; position:fixed; z-index:50; top:env(safe-area-inset-top); left:50%; opacity:0; pointer-events:none; transform:translate(-50%, calc(-100% - 12px)); transition:transform .16s ease, opacity .16s ease; background:white; border:1px solid var(--line); border-radius:999px; box-shadow:0 4px 18px rgba(20,55,45,.16); color:var(--green); font-size:.78rem; font-weight:800; padding:8px 13px; white-space:nowrap; }.pull-refresh.visible { opacity:1; transform:translate(-50%, var(--pull-distance)); }.pull-refresh.ready { background:var(--green); border-color:var(--green); color:white; }.pull-refresh.refreshing { opacity:1; transform:translate(-50%, 12px); }
.app-shell { width:100%; max-width:1080px; min-height:100vh; margin:auto; padding:20px max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.topbar { display:flex; justify-content:space-between; align-items:start; margin:4px 0 20px; }
.brand { display:flex; align-items:center; min-width:0; gap:12px; }.brand-logo { width:84px; height:62px; flex:0 0 auto; object-fit:contain; }.brand h1, .brand .eyebrow { white-space:nowrap; }
h1, h2, h3, p { margin-top:0; } h1 { font-size:2.1rem; margin-bottom:0; letter-spacing:-.04em; } h2 { font-size:1.15rem; margin-bottom:4px; } h3 { font-size:1rem; line-height:1.25; margin:8px 0 6px; }
.eyebrow { color:#53726a; font-size:.7rem; font-weight:800; letter-spacing:.1em; margin-bottom:6px; }
.icon-button { border:0; background:var(--mint); color:var(--green); border-radius:50%; width:44px; height:44px; font-size:1.5rem; cursor:pointer; }
.refresh-button { flex:0 0 auto; font-size:1.35rem; font-weight:800; }.refresh-button:disabled { cursor:wait; opacity:.7; }
.new-job-button { background:var(--green); border:0; border-radius:10px; color:white; cursor:pointer; font-size:.78rem; font-weight:850; min-height:44px; padding:9px 12px; white-space:nowrap; }
.text-size-button { flex:0 0 auto; font-size:.9rem; font-weight:900; }
.update-banner { align-items:center; background:#fff3d6; border:1px solid #e7c679; border-radius:12px; color:#654609; display:flex; font-size:.84rem; font-weight:800; gap:12px; justify-content:space-between; margin:-8px 0 18px; padding:10px 12px; }.update-banner[hidden] { display:none; }.update-banner button { background:var(--green); border:0; border-radius:8px; color:white; cursor:pointer; flex:0 0 auto; font-weight:800; padding:9px 11px; }
.summary { display:flex; justify-content:space-between; align-items:end; background:var(--green); color:white; padding:18px; border-radius:18px; margin-bottom:28px; }
.summary span { display:block; font-size:2.2rem; font-weight:800; line-height:1; }.summary small, .summary p { color:#cae0d2; margin:5px 0 0; }.summary p { font-size:.8rem; text-align:right; }
#export-waiting-summary span, #export-waiting-summary small { color:#ffd88b; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; }.section-heading p { color:#63736e; font-size:.82rem; }
.job-list { display:grid; gap:12px; }.job-card { min-width:0; background:white; border:1px solid var(--line); border-radius:16px; padding:15px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; box-shadow:0 2px 7px rgba(20,55,45,.04); }.job-card.in-progress { background:#f1e2ae; border-color:#cbb66f; }.job-card.finished { background:#dff1e4; border-color:#79ae85; }.job-card.finished .job-date, .job-card.finished .job-side span { color:#315e3b; }.job-main { min-width:0; cursor:pointer; }.job-main h3, .job-date, .job-description { overflow-wrap:anywhere; }.job-customer { color:#63736e; font-size:.82em; font-weight:400; }.job-date, .muted { color:#63736e; font-size:.84rem; margin-bottom:0; }.priority-badge { background:#fff1d1; color:#805107; border-radius:999px; padding:4px 8px; font-size:.7rem; font-weight:800; }.job-side { min-width:122px; text-align:right; display:flex; flex-direction:column; align-items:end; }.job-hours { font-size:1.35rem; }.job-side span { color:#63736e; font-size:.72rem; }.job-actions { display:flex; gap:7px; margin-top:10px; }.job-actions button { color:white; border:0; border-radius:9px; padding:8px 10px; font-size:.78rem; font-weight:700; cursor:pointer; }.add-hours { background:var(--green); }.close-job { background:#347047; }.completed-label { margin-top:10px; font-weight:800; color:#245831 !important; }.job-description { grid-column:1 / -1; border-top:1px solid var(--line); color:#38524b; font-size:.9rem; line-height:1.45; margin:0; padding-top:12px; white-space:pre-line; }.finished .job-description { border-color:#9ac6a4; }.empty { border:2px dashed var(--line); border-radius:16px; padding:28px 20px; color:#63736e; text-align:center; }
.dialog { width:min(calc(100% - 32px), 440px); border:0; border-radius:20px; padding:24px; color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.24); }.dialog::backdrop { background:rgba(10,31,25,.5); }.dialog form { position:relative; }.close { position:absolute; right:-4px; top:-7px; border:0; background:transparent; font-size:1.8rem; cursor:pointer; color:#63736e; }.dialog label { font-weight:700; display:block; margin:22px 0 8px; }.dialog input[type=number] { width:100%; padding:13px; border:1px solid var(--line); border-radius:10px; }.dialog button:not(.close) { width:100%; border:0; border-radius:10px; padding:13px; margin-top:12px; font-weight:800; cursor:pointer; }.primary { background:var(--green); color:white; }.finish { background:#e8f1ea; color:var(--green); }.secondary { background:#e8f1ea; color:var(--green); }.danger { background:#fff0ee; color:var(--danger); }.file-label { background:var(--green); color:white; border-radius:10px; text-align:center; padding:13px; cursor:pointer; }.admin-dialog input[type=file] { display:none; }.import-message { min-height:20px; font-size:.85rem; color:#63736e; margin:10px 0 0; }
.text-size-options { display:grid; gap:8px; margin-top:18px; }.text-size-options button { background:#eef0ef; border:2px solid transparent !important; color:#46514d; margin:0 !important; }.text-size-options button.selected { background:#dce7df; border-color:var(--green) !important; color:var(--green); }
.admin-job-actions { display:flex; gap:7px; margin-top:7px; }.admin-job-actions[hidden] { display:none; }.admin-job-actions button { background:#eef0ef; border:1px solid #cbd0ce; border-radius:8px; color:#4c5b56; cursor:pointer; font-size:.72rem; font-weight:750; padding:7px 9px; }.admin-job-actions .delete-job { background:#fff0ee; border-color:#efc4be; color:var(--danger); }
.new-job-dialog input, .new-job-dialog select, .new-job-dialog textarea, .note-dialog textarea { background:white; border:1px solid var(--line); border-radius:10px; padding:12px; width:100%; }.new-job-dialog select { min-height:46px; }.new-job-dialog textarea, .note-dialog textarea { min-height:92px; resize:vertical; }.new-job-dialog label { margin-top:15px; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.drive-button { background:#e8f1ea; border:1px solid #b9d2c0; border-radius:10px; color:var(--green); cursor:pointer; font-size:.75rem; font-weight:800; padding:8px 10px; }
.drive-button.connected { background:#dff1e4; border-color:#79ae85; color:#245831; }
.drive-button:disabled { cursor:default; opacity:1; }
.account-button { border:0; background:transparent; color:#53726a; font-size:.78rem; max-width:132px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.login-panel { background:white; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 2px 7px rgba(20,55,45,.04); }
.login-panel label { display:block; font-size:.86rem; font-weight:700; margin:16px 0 7px; }
.login-panel input { width:100%; padding:13px; border:1px solid var(--line); border-radius:10px; }
.login-panel button { width:100%; border:0; border-radius:10px; padding:13px; margin-top:12px; font-weight:800; cursor:pointer; }
.sync-status { color:#53726a; font-size:.78rem; margin:-18px 0 18px; min-height:1em; }
.warning { background:#fff0ee; border-left:4px solid var(--danger); color:#7d261d; padding:12px; border-radius:8px; font-weight:700; line-height:1.4; }
.member-admin { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:20px 0; padding:18px 0; }.member-admin h3 { margin:0 0 6px; }.member-admin input[type=email], .member-admin input[type=text] { width:100%; padding:11px; border:1px solid var(--line); border-radius:10px; }.member-admin .checkbox-label { display:flex; align-items:center; gap:8px; margin:14px 0 4px; font-size:.9rem; }.member-list { display:grid; gap:7px; margin-top:14px; }.member-row { background:var(--mint); border-radius:9px; padding:10px; font-size:.82rem; }.member-row strong { display:block; }.member-row span { color:#53726a; display:block; }.member-actions { display:flex; gap:7px; margin-top:9px; }.member-row .member-edit, .member-row .member-delete { width:auto; padding:7px 10px; margin:0; border-radius:8px; font-weight:700; cursor:pointer; }.member-row .member-edit { background:white; border:1px solid var(--line); color:var(--green); }.member-row .member-delete { background:#fff0ee; border:1px solid #efc4be; color:var(--danger); }
.push-admin { background:var(--mint); border:1px solid var(--line); border-radius:14px; margin:18px 0; padding:16px; }.push-admin h3 { margin:0 0 8px; }.push-count { align-items:center; display:flex; gap:10px; margin:8px 0; }.push-count strong { align-items:center; background:var(--danger); border-radius:999px; color:white; display:inline-flex; font-size:1.05rem; justify-content:center; min-height:32px; min-width:32px; padding:4px 9px; }.push-count span { color:#38524b; font-weight:700; }.push-admin button:disabled { cursor:default; opacity:.55; }
.photo-archive-admin { background:#f7f2e3; border:1px solid #ddcfaa; border-radius:14px; margin:18px 0; padding:16px; }.photo-archive-admin[hidden] { display:none; }.photo-archive-admin h3 { margin:0 0 8px; }.photo-archive-admin p { color:#5e5438; font-size:.84rem; line-height:1.4; margin:7px 0; }.photo-archive-admin strong { color:var(--green); font-size:1.15rem; }.photo-archive-admin button { margin-top:8px !important; }.photo-cleanup-list { background:#f7f8f5; border:1px solid var(--line); border-radius:12px; margin:12px 0; max-height:180px; overflow:auto; padding:10px 10px 10px 30px; }.photo-cleanup-list li { font-size:.86rem; line-height:1.35; margin:5px 0; }.photo-cleanup-dialog .primary { background:var(--green); color:white; }
.reusable-choice { background:#fff; }.reusable-new-value[hidden] { display:none; }.reusable-new-value:not([hidden]) { margin-top:-6px; }
.job-photos { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:12px; }.photo-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.82rem; font-weight:800; }.photo-list { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }.photo-item { display:flex; align-items:stretch; }.photo-link { background:var(--mint); border-radius:8px 0 0 8px; color:var(--green); font-size:.78rem; padding:8px 10px; text-decoration:none; }.photo-item:not(:has(.photo-delete)) .photo-link { border-radius:8px; }.photo-delete { background:var(--danger); border:0; border-radius:0 8px 8px 0; color:white; cursor:pointer; font-size:1.15rem; font-weight:800; line-height:1; min-width:32px; }.photo-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.photo-actions.has-note { grid-template-columns:repeat(3,minmax(0,1fr)); }.photo-actions label, .photo-note-button { align-items:center; background:#eceeed; border:1px solid #cbd0ce; border-radius:9px; color:#525d59; cursor:pointer; display:flex; font-size:.8rem; font-weight:800; gap:8px; justify-content:center; min-height:44px; padding:9px; text-align:center; }.photo-note-button { margin:0; }.photo-action-icon { color:#68716e; display:inline-flex; flex:0 0 auto; }.photo-action-icon svg { fill:currentColor; height:21px; width:21px; }.photo-actions input { display:none; }.photo-note { color:#63736e; font-size:.76rem; margin:8px 0 0; }
@media (max-width: 480px) {
  .app-shell { padding:14px max(12px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .topbar { flex-wrap:wrap; gap:10px; margin-bottom:16px; }
  .topbar-actions { justify-content:flex-end; width:100%; }
  .new-job-button { flex:1 1 auto; }
  .update-banner { align-items:stretch; flex-direction:column; }.update-banner button { width:100%; }
  .brand { gap:9px; }
  .brand-logo { width:72px; height:54px; }
  h1 { font-size:1.8rem; }
  .summary { flex-wrap:wrap; gap:12px; padding:15px; margin-bottom:22px; }
  .summary p { flex-basis:100%; text-align:left; }
  .summary span { font-size:1.9rem; }
  .job-card { grid-template-columns:1fr; gap:10px; padding:14px; }
  .job-side { min-width:0; align-items:stretch; text-align:left; }
  .job-actions { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); width:100%; }
  .admin-job-actions { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); width:100%; }
  .job-actions button { min-height:44px; padding:8px 6px; white-space:normal; }
  .completed-label { text-align:left; }
  .dialog { width:calc(100% - 24px); padding:20px; }
}
@media (min-width: 641px) { .app-shell { padding-top:34px; } }
@media (orientation: landscape) and (max-height: 600px) {
  .app-shell { max-width:none; padding:12px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .topbar { margin-bottom:14px; }
  .summary { padding:14px 18px; margin-bottom:20px; }
  .job-card { grid-template-columns:minmax(0, 1fr) minmax(140px, auto); padding:16px 18px; }
}