/* =====================================================================================
   MOTO FACTORY · Finance Control — design system
   One token set, one type scale, one radius scale, one icon set for Worker + Owner.
   Orange is an accent only: primary action, selected, key number, active menu, AI, focus.
   ===================================================================================== */
:root {
  /* color tokens */
  --bg-main: #171A1F;
  --bg-secondary: #1C2025;
  --surface: #20242A;
  --surface-hover: #252A31;
  --surface-elevated: #292E35;
  --border: #363C44;
  --border-strong: #484F59;
  --text-main: #F5F6F7;
  --text-secondary: #A8ADB5;
  --text-muted: #777E88;
  --primary: #FF7600;
  --primary-hover: #FF8A1F;
  --primary-soft: rgba(255, 118, 0, 0.12);
  --primary-line: rgba(255, 118, 0, 0.6);
  --on-primary: #17110B;
  --success: #20B486;
  --success-soft: rgba(32, 180, 134, 0.14);
  --warning: #F5A623;
  --warning-soft: rgba(245, 166, 35, 0.14);
  --danger: #E45353;
  --danger-soft: rgba(228, 83, 83, 0.14);

  /* type */
  --font: "MiSans Thai", "Noto Sans Thai", "Noto Sans Thai UI", "Sukhumvit Set", "Thonburi", "Leelawadee UI", system-ui, sans-serif;
  --fs-caption: 13px;
  --fs-body: 16px;
  --fs-card: 17px;
  --fs-title: 24px;
  --fs-hero: 44px;
  --fs-hero-xl: 60px;

  /* spacing (4px scale) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  /* shape */
  --r-input: 12px;
  --r-btn: 14px;
  --r-card: 16px;
  --tap: 52px;
  --tap-primary: 56px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.025) inset;
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --content: 560px;     /* worker entry max width */
  --content-wide: 1200px;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg-main); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg-main); color: var(--text-main);
  font-family: var(--font); font-size: var(--fs-body); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums; overscroll-behavior-y: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
svg.i { width: 24px; height: 24px; flex: none; }
svg.i.sm { width: 18px; height: 18px; }
svg.i.lg { width: 30px; height: 30px; }
.muted { color: var(--text-secondary); }
.caps { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } /* Latin only - never track Thai */
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.accent { color: var(--primary); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- PageShell ---------- */
.shell { min-height: 100vh; min-height: 100dvh; }
.page { width: 100%; max-width: var(--content); margin: 0 auto;
  padding: calc(var(--s3) + env(safe-area-inset-top)) var(--s4) calc(var(--nav-h) + var(--s8) + env(safe-area-inset-bottom)); }
.page.no-nav { padding-bottom: calc(var(--s8) + env(safe-area-inset-bottom)); }
.page.wide { max-width: var(--content-wide); }
.view { animation: viewIn .22s var(--ease) both; }
/* opacity only: a transform here would make position:fixed children (bottom nav, sheets) scroll with the page */
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- AppHeader ---------- */
.app-header { display: flex; align-items: center; gap: var(--s3); min-height: 56px; margin-bottom: var(--s5); }
.app-header .grow { flex: 1; min-width: 0; }
.app-header .kicker { display: flex; align-items: center; gap: var(--s2); color: var(--text-secondary); font-size: var(--fs-caption); }
.app-header h1 { margin: 2px 0 0; font-size: var(--fs-title); font-weight: 700; line-height: 1.25; }
.app-header .sub { color: var(--text-secondary); font-size: 14px; margin-top: 2px; }
.brand-mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: var(--surface); border: 1px solid var(--border); color: var(--primary); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.icon-btn { width: 48px; height: 48px; border-radius: var(--r-btn); display: grid; place-items: center; flex: none;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-main); transition: background .15s, transform .12s var(--ease); }
.icon-btn:hover { background: var(--surface-hover); }
.icon-btn:active { transform: scale(.96); }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s4); box-shadow: var(--shadow); }
.card.flush { padding: 0; overflow: hidden; }
.card.tight { padding: var(--s3) var(--s4); }
.card.accent-line { border-color: var(--primary-line); }
.section { margin-top: var(--s6); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 2px var(--s3); min-height: 32px; }
.section-head h2 { margin: 0; font-size: var(--fs-card); font-weight: 600; }
.section-head .link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 4px; border: 0; background: none;
  color: var(--primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.stack { display: grid; gap: var(--s3); }
.stack.s2 { gap: var(--s2); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row.between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.hint { display: flex; gap: var(--s3); align-items: flex-start; color: var(--text-secondary); font-size: 14px; padding: var(--s3) var(--s4);
  border-radius: var(--r-card); border: 1px dashed var(--border); }
.hint svg { color: var(--primary); flex: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--tap); width: 100%;
  padding: 0 var(--s5); border-radius: var(--r-btn); border: 1px solid var(--border); background: var(--surface-elevated);
  color: var(--text-main); font-size: var(--fs-card); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s var(--ease), opacity .15s; }
.btn:hover { background: var(--surface-hover); }
.btn:active { transform: scale(.98); }
.btn.primary { min-height: var(--tap-primary); background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.ghost { background: transparent; }
.btn.quiet { background: transparent; border-color: transparent; color: var(--text-secondary); min-height: 44px; font-size: 15px; }
.btn.danger { background: transparent; color: var(--danger); border-color: rgba(228, 83, 83, .45); }
.btn.sm { min-height: 44px; font-size: 15px; padding: 0 var(--s4); width: auto; }
.btn[disabled], .btn.busy { opacity: .55; pointer-events: none; }
.btn .spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }

/* ConfirmBar: the one primary action, pinned above the nav / safe area */
.confirm-bar { position: sticky; bottom: calc(var(--nav-h) + var(--s3) + env(safe-area-inset-bottom)); z-index: 6; margin-top: var(--s5);
  padding-top: var(--s2); background: linear-gradient(transparent, var(--bg-main) 30%); }
.page.no-nav .confirm-bar { bottom: calc(var(--s3) + env(safe-area-inset-bottom)); }
.confirm-bar .pair { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--s2); }

/* ---------- ActionTile (worker home) ---------- */
.action { position: relative; display: flex; align-items: center; gap: var(--s4); width: 100%; min-height: 88px; padding: var(--s4);
  text-align: left; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); color: var(--text-main);
  transition: background .15s, border-color .15s, transform .12s var(--ease); }
.action:hover { background: var(--surface-hover); }
.action:active { transform: scale(.985); }
.action .ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--bg-secondary); border: 1px solid var(--border); color: var(--primary); }
.action .ico svg { width: 26px; height: 26px; }
.action .txt { flex: 1; min-width: 0; }
.action .t1 { display: block; font-size: 19px; font-weight: 700; line-height: 1.3; }
.action .t2 { display: block; color: var(--text-secondary); font-size: 14px; margin-top: 2px; }
.action .go { color: var(--text-muted); }
.action.hero { min-height: 164px; flex-direction: column; align-items: stretch; justify-content: space-between; gap: var(--s4);
  border-color: var(--primary-line); background: var(--surface); overflow: hidden; }
.action.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, var(--primary-soft), transparent 55%); }
.action.hero .top { display: flex; align-items: center; justify-content: space-between; }
.action.hero .ico { width: 60px; height: 60px; background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.action.hero .ico svg { width: 30px; height: 30px; }
.action.hero .t1 { font-size: 26px; }
.action.hero .bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); position: relative; }
.action.hero .arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); flex: none; }
.action.tertiary { min-height: 72px; background: transparent; }

/* ---------- CategoryTile ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.tile { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 76px; padding: var(--s3) var(--s4);
  border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); color: var(--text-main); text-align: left;
  transition: background .15s, border-color .15s, transform .12s var(--ease); }
.tile:hover { background: var(--surface-hover); }
.tile:active { transform: scale(.97); }
.tile .ti { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--bg-secondary); color: var(--text-main); }
.tile .ti svg { width: 24px; height: 24px; }
.tile .tl { font-size: var(--fs-card); font-weight: 600; line-height: 1.25; }
.tile.selected, .tile[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.tile.selected .ti, .tile[aria-pressed="true"] .ti { color: var(--primary); }
.tile.compact { min-height: 60px; }

/* ---------- MoneyHero / amount input ---------- */
.money-hero { padding: var(--s5) var(--s4); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); }
.money-hero .label { color: var(--text-secondary); font-size: 14px; }
.money-hero .value { display: flex; align-items: baseline; gap: var(--s2); margin-top: var(--s1); flex-wrap: wrap; }
.money-hero .big { font-size: var(--fs-hero); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.money-hero .unit { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.money-hero .foot { margin-top: var(--s2); color: var(--text-secondary); font-size: 14px; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.money-hero.accent { border-color: var(--primary-line); }
.money-hero.accent .big { color: var(--primary); }

.amount-input { padding: var(--s5) var(--s4) var(--s4); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border);
  transition: border-color .15s, box-shadow .15s; }
.amount-input:focus-within { border-color: var(--primary-line); box-shadow: 0 0 0 4px var(--primary-soft); }
.amount-input.invalid { border-color: var(--danger); }
.amount-input label { color: var(--text-secondary); font-size: 14px; }
.amount-input input { display: block; width: 100%; border: 0; outline: none; background: transparent; padding: 0; margin-top: var(--s1);
  text-align: right; font-size: var(--fs-hero-xl); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--text-main); caret-color: var(--primary); }
.amount-input input::placeholder { color: var(--text-muted); }
.amount-input .unit { display: block; text-align: right; color: var(--text-secondary); font-weight: 600; margin-top: var(--s1); }
.amount-input .rule { height: 2px; border-radius: 2px; margin-top: var(--s3); background: var(--primary); opacity: .9; }
.amount-input.sm input { font-size: 36px; }

/* segmented control */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s1); padding: var(--s1); border-radius: var(--r-btn);
  background: var(--bg-secondary); border: 1px solid var(--border); }
.seg button { min-height: 46px; border: 0; border-radius: 11px; background: transparent; color: var(--text-secondary); font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--surface-elevated); color: var(--text-main); box-shadow: inset 0 0 0 1px var(--primary-line); }

/* fields */
.field { display: block; }
.field > .fl { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 14px; margin: 0 2px var(--s2); }
.input { width: 100%; min-height: var(--tap); padding: 0 var(--s4); border-radius: var(--r-input); border: 1px solid var(--border);
  background: var(--bg-secondary); color: var(--text-main); font-size: 17px; outline: none; transition: border-color .15s, box-shadow .15s; }
textarea.input { min-height: 88px; padding: var(--s3) var(--s4); resize: vertical; }
.input:focus { border-color: var(--primary-line); box-shadow: 0 0 0 4px var(--primary-soft); }
.input::placeholder { color: var(--text-muted); }
input[type="date"].input { color-scheme: dark; }
.attach { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: var(--tap); padding: 0 var(--s4);
  border-radius: var(--r-input); border: 1px dashed var(--border-strong); background: transparent; color: var(--text-secondary); text-align: left; }
.attach svg { color: var(--primary); }
.check { display: flex; align-items: center; gap: var(--s3); min-height: 48px; color: var(--text-secondary); font-size: 15px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--primary); }

/* ---------- StatusBadge ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px;
  font-weight: 600; white-space: nowrap; background: var(--surface-elevated); color: var(--text-secondary); }
.badge svg { width: 14px; height: 14px; }
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.warn { background: var(--warning-soft); color: var(--warning); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }
.badge.accent { background: var(--primary-soft); color: var(--primary); }
.badge.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ---------- ExpenseCard / list ---------- */
.list { display: grid; gap: var(--s2); }
.xcard { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 72px; padding: var(--s3); text-align: left;
  border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); color: var(--text-main);
  transition: background .15s, transform .12s var(--ease); }
.xcard:hover { background: var(--surface-hover); }
.xcard:active { transform: scale(.99); }
.xcard .thumb { width: 48px; height: 48px; border-radius: 12px; flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--bg-secondary); border: 1px solid var(--border); color: var(--primary); }
.xcard .thumb img { width: 100%; height: 100%; object-fit: cover; }
.xcard .body { flex: 1; min-width: 0; }
.xcard .t { display: block; font-weight: 600; font-size: var(--fs-card); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xcard .m { display: block; color: var(--text-secondary); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xcard .r { text-align: right; flex: none; display: grid; justify-items: end; gap: 4px; }
.xcard .a { font-weight: 700; font-size: 18px; }
.more-btn { margin-top: var(--s3); }

/* ---------- EmptyState / ErrorState / Loading ---------- */
.empty { display: grid; justify-items: center; gap: var(--s3); text-align: center; padding: var(--s8) var(--s4); border-radius: var(--r-card);
  border: 1px dashed var(--border); color: var(--text-secondary); }
.empty .eico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.empty .et { color: var(--text-main); font-weight: 600; font-size: var(--fs-card); }
.empty .btn { width: auto; min-width: 200px; }
.state-center { min-height: 60vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: var(--s3); }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { border-radius: var(--r-card); background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite; min-height: 72px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.notice { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-card); font-size: 15px; }
.notice svg { flex: none; margin-top: 1px; }
.notice.warn { background: var(--warning-soft); border: 1px solid rgba(245, 166, 35, .35); color: #FFD58F; }
.notice.warn svg { color: var(--warning); }
.notice.bad { background: var(--danger-soft); border: 1px solid rgba(228, 83, 83, .35); color: #FFB4B4; }
.notice.bad svg { color: var(--danger); }
.notice.ok { background: var(--success-soft); border: 1px solid rgba(32, 180, 134, .35); color: #9BE7CC; }
.notice.ok svg { color: var(--success); }

/* ---------- success ---------- */
.success { display: grid; justify-items: center; text-align: center; gap: var(--s2); padding-top: 12vh; }
.success .mark { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft);
  color: var(--success); border: 1px solid rgba(32, 180, 134, .4); animation: pop .35s var(--ease) both; margin-bottom: var(--s2); }
.success .mark svg { width: 42px; height: 42px; }
.success .big { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.02em; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- DocumentPreview + AIProcessing ---------- */
.doc-preview { position: relative; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border); background: #0E1013; }
.doc-preview img { display: block; width: 100%; max-height: 52vh; object-fit: contain; background: #0E1013; }
.doc-preview.small img { max-height: 200px; object-fit: cover; }
.doc-preview .pdf { display: grid; place-items: center; gap: var(--s2); min-height: 180px; color: var(--text-secondary); }
.doc-preview .pdf svg { width: 40px; height: 40px; color: var(--primary); }
.doc-preview .frame { position: absolute; inset: 12px; pointer-events: none; border-radius: 10px;
  --c: var(--primary);
  background: linear-gradient(var(--c), var(--c)) left top / 22px 2px no-repeat, linear-gradient(var(--c), var(--c)) left top / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 22px 2px no-repeat, linear-gradient(var(--c), var(--c)) right top / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 22px 2px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 22px 2px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 2px 22px no-repeat; }
.doc-preview .beam { position: absolute; left: 12px; right: 12px; height: 2px; top: 20%; background: var(--primary); opacity: .9;
  animation: beam 1.6s ease-in-out infinite alternate; }
@keyframes beam { from { top: 12%; } to { top: 86%; } }
.doc-preview .tag { position: absolute; left: 10px; bottom: 10px; }

.ai-steps { display: grid; gap: 0; }
.ai-step { display: flex; align-items: center; gap: var(--s3); min-height: 48px; border-top: 1px solid var(--border); color: var(--text-secondary); }
.ai-step:first-child { border-top: 0; }
.ai-step .st { width: 24px; height: 24px; display: grid; place-items: center; flex: none; }
.ai-step .st .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.ai-step.active { color: var(--text-main); }
.ai-step.active .st .dot { background: var(--primary); animation: pulse 1s ease-in-out infinite; }
.ai-step.done { color: var(--text-main); }
.ai-step.done .st { color: var(--success); }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- Review / spec rows ---------- */
.spec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.spec .sr-row { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--border); min-height: 52px; }
.spec .sr-row:first-child { border-top: 0; }
.spec .k { width: 84px; flex: none; color: var(--text-secondary); font-size: 15px; padding-top: 1px; }
.spec .v { flex: 1; min-width: 0; text-align: right; font-weight: 600; word-break: break-word; }
.spec .v small { display: block; color: var(--text-secondary); font-weight: 400; font-size: 13px; }
.spec .sr-row.check { background: var(--warning-soft); }
.spec .sr-row.check .k { color: var(--warning); }
.spec .sr-row.missing .v { color: var(--warning); }
.spec .items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.spec .items li { display: flex; justify-content: space-between; gap: var(--s2); font-weight: 500; font-size: 15px; }
.spec .items li span:last-child { color: var(--text-secondary); white-space: nowrap; }
.cat-chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 12px 0 8px; border-radius: 999px;
  border: 1px solid var(--primary-line); background: var(--primary-soft); font-weight: 600; font-size: 15px; }
.cat-chip svg { width: 20px; height: 20px; color: var(--primary); }
button.cat-chip { min-height: 44px; color: var(--text-main); }
.total { margin-top: var(--s3); padding: var(--s4); border-radius: var(--r-card); border: 1px solid var(--primary-line); background: var(--surface); }
.total .tk { color: var(--text-secondary); font-size: 14px; }
.total .tv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.total .tn { font-size: var(--fs-hero); font-weight: 700; color: var(--primary); letter-spacing: -.02em; line-height: 1.15; }
.total .tf { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }

/* ReviewPrompt: one short question */
.prompt { padding: var(--s4); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); }
.prompt .q { font-size: 20px; font-weight: 700; margin: 0 0 var(--s1); }
.prompt .qs { color: var(--text-secondary); font-size: 14px; margin-bottom: var(--s4); }

/* ---------- BottomNav ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 6px var(--s3) calc(6px + env(safe-area-inset-bottom));
  background: rgba(23, 26, 31, .96); border-top: 1px solid var(--border); }
.bottom-nav .in { max-width: var(--content); margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s1); }
.bottom-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px;
  border-radius: 12px; color: var(--text-muted); font-size: 12px; font-weight: 600; text-decoration: none; }
.bottom-nav a.active { color: var(--primary); }
.bottom-nav a .count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--primary); color: var(--on-primary); font-size: 11px; line-height: 18px; text-align: center; }
.bottom-nav a.cam .knob { width: 48px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); }
.bottom-nav a.cam { color: var(--text-secondary); }

/* ---------- Sheet ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center;
  animation: fadeBg .18s ease both; }
@keyframes fadeBg { from { opacity: 0; } }
.sheet { width: 100%; max-width: var(--content); background: var(--bg-secondary); border: 1px solid var(--border); border-bottom: 0;
  border-radius: 20px 20px 0 0; padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); animation: sheetUp .22s var(--ease) both; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto var(--s4); }
.sheet h3 { margin: 0 0 var(--s3); font-size: var(--fs-card); }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } }
.toast { position: fixed; left: 16px; right: 16px; margin: 0 auto; width: fit-content; bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); z-index: 50;
  padding: var(--s3) var(--s4); border-radius: 12px; background: var(--surface-elevated); border: 1px solid var(--border-strong);
  font-weight: 600; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7); animation: viewIn .2s var(--ease) both; max-width: calc(100% - 32px); }

/* ---------- Owner: MoneySummary, bars, due, daily status ---------- */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.kpi { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s2); min-height: 108px; padding: var(--s4);
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); text-align: left; color: var(--text-main); text-decoration: none; }
a.kpi:hover, button.kpi:hover { background: var(--surface-hover); }
.kpi .kk { display: flex; align-items: center; gap: var(--s2); color: var(--text-secondary); font-size: 14px; }
.kpi .kk svg { width: 18px; height: 18px; }
.kpi .kv { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.kpi .kv small { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-left: 4px; }
.kpi.alert { border-color: rgba(245, 166, 35, .45); }
.kpi.alert .kv { color: var(--warning); }
.kpi.clear .kv { color: var(--success); }
.hero-sum { grid-column: 1 / -1; }
.kpi-grid + .section, .kpi-grid + .dash-grid { margin-top: var(--s6); }
/* trend color follows meaning, not direction: for costs, up = watch, down = good */
.trend-bad { color: var(--warning); font-weight: 600; }
.trend-good { color: var(--success); font-weight: 600; }

.bars { display: grid; gap: var(--s4); }
.bar .bt { display: flex; align-items: center; gap: var(--s2); }
.bar .bt .n { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2); font-weight: 600; }
.bar .bt .n svg { width: 18px; height: 18px; color: var(--text-secondary); }
.bar .bt .a { font-weight: 700; }
.bar .bt .p { width: 44px; text-align: right; color: var(--text-secondary); font-size: 14px; }
.bar .track { position: relative; height: 6px; border-radius: 6px; background: var(--bg-secondary); margin-top: var(--s2); }
.bar .fill { height: 100%; border-radius: 6px; background: var(--text-muted); min-width: 2px; }
.bar.top .fill { background: var(--primary); }
.bar.over .fill { background: var(--danger); }
.bar .budget { position: absolute; top: -4px; width: 2px; height: 14px; border-radius: 1px; background: var(--text-main); opacity: .55; }
.bar .note { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 13px; margin-top: 6px; }

.due { display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) 0; border-top: 1px solid var(--border); }
.due:first-child { border-top: 0; padding-top: 0; }
.due .when { width: 52px; flex: none; text-align: center; border-radius: 12px; padding: 6px 0; background: var(--bg-secondary); border: 1px solid var(--border); }
.due .when b { display: block; font-size: 18px; line-height: 1.15; }
.due .when span { font-size: 11px; color: var(--text-secondary); }
.due .when.late { border-color: rgba(228, 83, 83, .55); } .due .when.late b { color: var(--danger); }
.due .when.soon { border-color: rgba(245, 166, 35, .55); } .due .when.soon b { color: var(--warning); }
.due .when.paid b { color: var(--success); }
.due .d { flex: 1; min-width: 0; }
.due .d .t { display: block; font-weight: 600; }
.due .d .s { display: block; color: var(--text-secondary); font-size: 13px; }
.due .a { font-weight: 700; text-align: right; }

.daily { display: flex; align-items: center; gap: var(--s4); }
.daily .dm { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.daily.ok .dm { background: var(--success-soft); color: var(--success); }
.daily.warn .dm { background: var(--warning-soft); color: var(--warning); }
.daily .dt { font-weight: 700; font-size: var(--fs-card); }
.daily .ds { color: var(--text-secondary); font-size: 14px; }

.inbox-item { padding: var(--s4); border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); }
.inbox-item .ih { display: flex; align-items: flex-start; gap: var(--s3); }
.inbox-item .ih .amt { font-size: 22px; font-weight: 700; }
.inbox-item .ih .why { color: var(--warning); font-size: 14px; font-weight: 600; }
.inbox-item .ih .who { color: var(--text-secondary); font-size: 13px; }
.inbox-item .actions { display: grid; gap: var(--s2); margin-top: var(--s3); }
.inbox-item.done { opacity: .5; }

details.sec { border-top: 1px solid var(--border); }
details.sec:first-of-type { border-top: 0; }
details.sec > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--s4);
  font-weight: 600; cursor: pointer; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary .caps { color: var(--text-secondary); }
details.sec > summary svg { transition: transform .15s; color: var(--text-muted); }
details.sec[open] > summary svg { transform: rotate(90deg); }
details.sec > .sb { padding: 0 var(--s4) var(--s4); }
.kv-list { display: grid; gap: var(--s2); margin: 0; }
.kv-list div { display: flex; justify-content: space-between; gap: var(--s3); }
.kv-list dt { color: var(--text-secondary); }
.kv-list dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }

.table-list .tr { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s4); border-top: 1px solid var(--border); }
.table-list .tr:first-child { border-top: 0; }
.table-list .tr .grow { flex: 1; min-width: 0; }

.filters { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-weight: 600; font-size: 14px; }
.chip[aria-pressed="true"] { border-color: var(--primary-line); color: var(--text-main); background: var(--primary-soft); }
.chip .c { color: var(--primary); }

/* header right-slot controls (period switch, month picker) drop below the title on phones */
.head-ctrl { min-width: 0; }
@media (max-width: 767px) {
  .app-header { flex-wrap: wrap; }
  .app-header > .head-ctrl { flex-basis: 100%; order: 3; }
  .kpi.wide-m { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; }
  .kpi.wide-m .kv { margin-left: auto; }
  .daily { flex-wrap: wrap; }
  .daily .btn { width: 100%; }
}

/* ---------- Owner console layout ---------- */
.console .rail { display: none; }

/* ---------- breakpoints: mobile < 768 ≤ tablet < 1100 ≤ desktop ---------- */
@media (min-width: 768px) {
  :root { --fs-hero: 48px; }
  .page { padding-top: var(--s8); }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-sum { grid-column: span 3; }
}
@media (min-width: 1100px) {
  .console { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
  .console .rail { display: flex; flex-direction: column; gap: var(--s1); position: sticky; top: 0; height: 100vh; padding: var(--s5) var(--s3);
    border-right: 1px solid var(--border); background: var(--bg-secondary); }
  .rail .brand { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s2) var(--s5); }
  .rail .brand b { display: block; font-size: 15px; } .rail .brand .caps { color: var(--text-secondary); font-size: 11px; }
  .rail a { display: flex; align-items: center; gap: var(--s3); min-height: 46px; padding: 0 var(--s3); border-radius: 12px;
    color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: 15px; }
  .rail a:hover { background: var(--surface); color: var(--text-main); }
  .rail a svg { width: 20px; height: 20px; }
  .rail a.active { background: var(--surface); color: var(--text-main); box-shadow: inset 2px 0 0 var(--primary); }
  .rail a.active svg { color: var(--primary); }
  .rail a .count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--primary); color: var(--on-primary); font-size: 12px; line-height: 22px; text-align: center; }
  .rail .spacer { flex: 1; }
  .console .bottom-nav { display: none; }
  .console .page { padding: var(--s8) var(--s8) 48px; }
  .console .page.no-nav { padding-bottom: 48px; }
  .console .confirm-bar { bottom: var(--s4); }
  .kpi-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .hero-sum { grid-column: auto; }
  .dash-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .dash-grid .section:first-child { margin-top: 0; }
}

@media (max-width: 370px) {
  :root { --fs-hero: 38px; --fs-hero-xl: 50px; }
  .tile { padding: var(--s3); gap: var(--s2); } .tile .ti { width: 36px; height: 36px; }
  .kpi .kv { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }