:root { color-scheme: light; --ink:#14332f; --muted:#4d635e; --line:#dbe9e5; --surface:#fff; --soft:#eff8f5; --primary:#0f766e; --primary-dark:#0b5c56; --income:#16855f; --expense:#d65c57; --shadow:0 12px 35px rgba(20,51,47,.08); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:#f5faf8; }
button, input, select { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100%, 760px); margin:auto; padding:20px 16px 40px; }
.topbar, .summary-heading, .panel-heading, .filters, .tools { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar-actions { display:flex; align-items:center; gap:4px; }
.topbar { margin-bottom:18px; } h1, h2, p { margin:0; } h1 { font-size:1.55rem; letter-spacing:-.03em; } h2 { font-size:1.1rem; } .eyebrow, .section-label { color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.icon-button, .close-button { border:0; background:transparent; color:var(--muted); font-size:1.5rem; width:44px; height:44px; border-radius:50%; } .icon-button:hover, .close-button:hover { background:var(--soft); color:var(--ink); }
.summary-card { padding:22px; color:white; background:linear-gradient(135deg,#0f766e,#125c60); border-radius:24px; box-shadow:var(--shadow); } .summary-card .section-label { color:#c8efea; } .summary-balance { margin-top:4px; font-size:2rem; font-weight:800; letter-spacing:-.05em; } .month-picker input { color:white; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; } .summary-item { padding:12px 14px; border:1px solid rgba(255,255,255,.17); border-radius:15px; background:rgba(0,0,0,.1); } .summary-item span { display:block; color:#c8efea; font-size:.8rem; } .summary-item strong { display:block; margin-top:4px; font-size:1.05rem; } .summary-item.income strong { color:#b8f3d2; } .summary-item.expense strong { color:#ffd0c7; }
.summary-source-row { display:flex; align-items:center; gap:9px; margin-top:16px; min-height:32px; } .data-source-badge { flex:1; color:#d8f7ef; font-size:.75rem; } .summary-link { padding:7px 10px; color:white; border:1px solid rgba(255,255,255,.32); border-radius:10px; background:rgba(255,255,255,.1); font-size:.75rem; font-weight:800; } .summary-link:hover { background:rgba(255,255,255,.2); }
.app-tabs { position:sticky; top:0; z-index:4; display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin:16px 0 4px; padding:5px; background:rgba(245,250,248,.94); border:1px solid var(--line); border-radius:15px; backdrop-filter:blur(12px); } .app-tab { min-height:44px; padding:0 5px; color:var(--muted); border:0; border-radius:11px; background:transparent; font-size:.76rem; font-weight:800; } .app-tab.active { color:white; background:var(--primary); box-shadow:0 5px 12px rgba(15,118,110,.18); } .light-link { color:var(--primary-dark); border-color:var(--line); background:var(--soft); }
.view-hidden { display:none !important; }
.quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0; } .action-button, .primary-button, .secondary-button { border:0; border-radius:16px; font-weight:800; } .action-button { padding:16px; color:var(--ink); background:var(--surface); box-shadow:var(--shadow); } .action-button span { font-size:1.2rem; } .income-action { border:2px solid #bdebd5; } .expense-action { border:2px solid #f3cbc5; }
.voice-panel { margin-top:0; } .voice-status { color:var(--primary); font-size:.75rem; font-weight:800; } .voice-help { margin:-4px 0 5px; color:var(--muted); font-size:.85rem; line-height:1.5; } .voice-privacy { margin-bottom:14px; color:#7b6253; font-size:.72rem; line-height:1.45; } .voice-controls { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; } .voice-button { min-height:54px; padding:12px 16px; color:white; border:0; border-radius:16px; background:var(--primary); font-weight:800; box-shadow:0 8px 20px rgba(15,118,110,.2); } .voice-button.listening { background:#bd423d; animation:pulse 1.2s ease-in-out infinite; } .voice-button:disabled, .primary-button:disabled { cursor:not-allowed; opacity:.55; } .voice-icon { margin-right:6px; font-size:1.1rem; } .voice-text-entry { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; margin-top:12px; } .voice-text-entry .secondary-button { min-height:44px; } .voice-preview { margin-top:14px; padding:14px; border:1px solid #bdebd5; border-radius:15px; background:#f3fbf7; } .voice-transcript-label { color:var(--muted); font-size:.72rem; font-weight:800; } .voice-transcript { margin-top:4px; color:var(--ink); font-size:.92rem; line-height:1.5; } .voice-interpretation { display:grid; gap:4px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } .voice-interpretation span { color:var(--muted); font-size:.72rem; } .voice-interpretation strong { font-size:.9rem; line-height:1.45; } .voice-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; } .voice-actions .primary-button, .voice-actions .secondary-button { min-height:44px; } @keyframes pulse { 50% { box-shadow:0 0 0 7px rgba(189,66,61,.14); } }
.receipt-panel { margin-top:16px; } .receipt-privacy { margin-bottom:14px; color:#7b6253; font-size:.72rem; line-height:1.45; } .receipt-storage, .evidence-storage { margin:11px 0; } .receipt-storage select, .evidence-storage select { min-height:40px; } .drive-status { margin:4px 0 12px; color:var(--muted); font-size:.7rem; line-height:1.4; } .receipt-capture-button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:12px 16px; color:var(--primary-dark); border:2px dashed #9bd8c8; border-radius:16px; background:#f3fbf7; font-weight:800; text-align:center; cursor:pointer; } .receipt-capture-button span { font-size:1.15rem; } .receipt-capture-button input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .receipt-workspace { display:grid; grid-template-columns:84px 1fr; gap:12px; align-items:center; margin-top:14px; } .receipt-media { display:grid; place-items:center; width:84px; height:84px; } .receipt-thumbnail { width:84px; height:84px; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:var(--soft); } .receipt-filename { width:84px; height:84px; margin:0; padding:6px; display:grid; place-items:center; overflow-wrap:anywhere; color:var(--muted); font-size:.62rem; line-height:1.3; text-align:center; background:var(--soft); border:1px solid var(--line); border-radius:12px; } .receipt-progress { display:grid; gap:7px; } .receipt-progress progress { width:100%; height:8px; appearance:none; border:0; border-radius:99px; background:#edf3f1; } .receipt-progress progress::-webkit-progress-bar { border-radius:99px; background:#edf3f1; } .receipt-progress progress::-webkit-progress-value { border-radius:99px; background:linear-gradient(90deg,#0f766e,#42b29f); } .receipt-progress progress::-moz-progress-bar { border-radius:99px; background:linear-gradient(90deg,#0f766e,#42b29f); } .receipt-progress p { color:var(--muted); font-size:.78rem; } .receipt-progress button { min-height:34px; padding:0 12px; font-size:.78rem; justify-self:start; } .receipt-preview { margin-top:14px; padding:14px; border:1px solid #bdebd5; border-radius:15px; background:#f3fbf7; } .receipt-text { max-height:130px; margin:6px 0 0; overflow:auto; color:var(--muted); font:inherit; font-size:.78rem; line-height:1.45; white-space:pre-wrap; } .receipt-suggestion { color:#0f766e !important; font-weight:800; } .receipt-warning { color:#a34f32 !important; font-weight:800; }
.panel { margin-top:16px; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); } .panel-heading { margin-bottom:14px; } .panel-heading.compact { margin-bottom:12px; } .record-count { color:var(--muted); font-size:.78rem; }
.home-recent-panel { margin-top:16px; }
.timeline-day-group { margin-top:16px; } .timeline-day-group:first-child { margin-top:0; } .timeline-day-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .timeline-day-label { color:var(--muted); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; } .timeline-day-total { font-size:.82rem; font-weight:800; } .timeline-day-total.income { color:var(--income); } .timeline-day-total.expense { color:var(--expense); }
.timeline-day-cards { display:grid; gap:8px; } .timeline-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--soft); } .timeline-card-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; font-size:1.1rem; } .timeline-card-icon.income { color:var(--income); background:#e5f7ee; } .timeline-card-icon.expense { color:var(--expense); background:#fff0ed; } .timeline-card-body { display:grid; gap:3px; min-width:0; } .timeline-card-top { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; } .timeline-card-top strong { font-size:.9rem; } .timeline-card-merchant { color:var(--muted); font-size:.76rem; } .timeline-card-note { margin:0; color:var(--muted); font-size:.74rem; line-height:1.4; overflow-wrap:anywhere; } .timeline-card-amount { text-align:right; font-weight:800; white-space:nowrap; } .timeline-card-amount.income { color:var(--income); } .timeline-card-amount.expense { color:var(--expense); }
.fab-add-button { position:fixed; right:calc(20px + env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:6; width:60px; height:60px; padding:0; display:grid; place-items:center; color:#fff; background:var(--primary); border:0; border-radius:50%; font-size:1.8rem; font-weight:800; box-shadow:0 14px 30px rgba(20,51,47,.28); } .fab-add-button:hover { background:var(--primary-dark); } .fab-add-button:active { transform:scale(.96); }
.modal-panel:not([hidden]) { position:fixed; top:calc(12px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom)); left:calc(12px + env(safe-area-inset-left)); z-index:20; max-width:680px; max-height:calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin:auto; overflow:auto; -webkit-overflow-scrolling:touch; box-shadow:0 20px 70px rgba(20,51,47,.28); }
.remote-edit-notice { margin:0 0 14px; padding:10px 12px; color:var(--primary-dark); background:var(--soft); border-radius:12px; font-size:.78rem; font-weight:700; line-height:1.5; }
.voice-source-notice { display:grid; gap:8px; margin:0 0 14px; padding:10px 12px; color:#d6e4ec; background:#164667; border:1px solid rgba(185,215,234,.2); border-radius:12px; font-size:.75rem; line-height:1.45; }
.voice-source-notice label { gap:5px; color:#aac0cf; font-size:.68rem; }
.voice-source-notice textarea { min-height:58px; color:#f4f8fb; background:#0b3554; border-color:rgba(185,215,234,.24); font:inherit; font-size:.85rem; line-height:1.45; resize:vertical; }
.voice-source-notice .secondary-button { justify-self:start; min-height:38px; font-size:.75rem; }
.remote-ocr-summary { margin:0 0 16px; padding:16px; color:#f4f8fb; background:#0b3554; border:1px solid rgba(185,215,234,.2); border-radius:18px; }
.remote-ocr-summary-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#aac0cf; font-size:.78rem; font-weight:800; }
.remote-ocr-summary-heading strong { color:#7fe3ad; font-size:.72rem; }
.remote-ocr-amount { margin-top:8px; color:#ffd84a; font-size:2rem; font-weight:900; letter-spacing:-.04em; }
.remote-ocr-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:13px; }
.remote-ocr-grid .remote-ocr-wide { grid-column:1 / -1; }
.remote-ocr-grid > div { min-width:0; padding:10px 11px; background:#123f61; border:1px solid rgba(185,215,234,.14); border-radius:12px; }
.remote-ocr-grid small { display:block; color:#aac0cf; font-size:.68rem; }
.remote-ocr-grid strong { display:block; margin-top:4px; overflow-wrap:anywhere; color:#f4f8fb; font-size:.82rem; }
.remote-ocr-evidence { margin-top:10px; padding:10px 11px; color:#d8f7ef; background:#164667; border-radius:12px; font-size:.72rem; line-height:1.45; }
.remote-ocr-evidence-link { color:#ffd84a; font-weight:800; text-decoration:underline; }
.remote-edit-details { margin:0 0 2px; padding:12px 0 0; border-top:1px solid var(--line); }
.remote-edit-details summary { color:#ffd84a; cursor:pointer; font-size:.8rem; font-weight:800; }
.remote-edit-details[open] summary { margin-bottom:13px; }
.evidence-editor { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); } .evidence-help { margin:9px 0 12px; color:var(--muted); font-size:.72rem; line-height:1.45; } .evidence-capture-button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 14px; color:var(--primary-dark); border:2px dashed #9bd8c8; border-radius:14px; background:#f3fbf7; font-weight:800; text-align:center; cursor:pointer; } .evidence-capture-button input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .evidence-progress { display:grid; gap:6px; margin-top:12px; color:var(--muted); font-size:.72rem; } .evidence-progress progress { width:100%; height:8px; appearance:none; border:0; border-radius:99px; background:#edf3f1; } .evidence-progress progress::-webkit-progress-bar { border-radius:99px; background:#edf3f1; } .evidence-progress progress::-webkit-progress-value { border-radius:99px; background:linear-gradient(90deg,#0f766e,#42b29f); } .evidence-progress progress::-moz-progress-bar { border-radius:99px; background:linear-gradient(90deg,#0f766e,#42b29f); } .evidence-list { display:grid; gap:9px; margin-top:12px; } .evidence-card { padding:11px 12px; border:1px solid var(--line); border-radius:13px; background:#fbfefd; } .evidence-card strong { display:block; overflow-wrap:anywhere; font-size:.8rem; } .evidence-card p { margin:5px 0 0; color:var(--muted); font-size:.72rem; line-height:1.45; white-space:pre-wrap; } .evidence-card .evidence-analysis { color:var(--primary-dark); font-weight:700; } .evidence-file-link { display:inline-block; margin-top:8px; color:var(--primary-dark); font-size:.74rem; font-weight:800; text-decoration:underline; }
form { display:grid; gap:16px; } label { display:grid; gap:6px; color:var(--muted); font-size:.8rem; font-weight:700; } input, select { width:100%; min-height:44px; padding:10px 12px; color:var(--ink); background:#fbfefd; border:1px solid var(--line); border-radius:12px; outline:none; } input:focus, select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(15,118,110,.12); } small { font-weight:500; } .amount-input { display:flex; align-items:center; gap:8px; padding:0 14px; border:2px solid var(--line); border-radius:14px; background:#fbfefd; } .amount-input:focus-within { border-color:var(--primary); } .amount-input span { font-size:1.4rem; font-weight:800; color:var(--primary); } .amount-input input { min-height:58px; padding:0; border:0; font-size:1.8rem; font-weight:800; background:transparent; } .amount-input input:focus { box-shadow:none; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .form-grid label:last-child { grid-column:1 / -1; } .category-help { color:var(--muted); font-size:.7rem; font-weight:500; line-height:1.4; } .purchase-items-editor { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); } .purchase-items-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; } .purchase-items-heading span, .purchase-items-heading small { display:block; } .purchase-items-heading span { color:var(--ink); font-size:.84rem; font-weight:800; } .purchase-items-heading small { margin-top:3px; color:var(--muted); font-size:.72rem; font-weight:500; } .purchase-items-heading .secondary-button { min-height:38px; padding:0 10px; font-size:.74rem; } .purchase-items-list { display:grid; gap:10px; margin-top:12px; } .purchase-item-row { display:grid; grid-template-columns:minmax(0,1.6fr) .7fr .8fr .9fr auto; gap:7px; align-items:end; padding:10px; border:1px solid var(--line); border-radius:13px; background:#fbfefd; } .purchase-item-row label { gap:4px; font-size:.68rem; } .purchase-item-row input { min-height:38px; padding:8px; font-size:.78rem; } .purchase-item-row .purchase-item-remove { min-width:38px; min-height:38px; padding:0 8px; color:#a34f32; border:0; border-radius:9px; background:#fff0ed; font-weight:800; } .purchase-items-help { margin-top:9px; color:var(--muted); font-size:.7rem; }
.primary-button { min-height:50px; color:white; background:var(--primary); } .primary-button:hover { background:var(--primary-dark); } .secondary-button { min-height:42px; padding:0 14px; color:var(--primary-dark); background:var(--soft); } .tools { justify-content:flex-start; flex-wrap:wrap; margin-top:18px; } .privacy-note { margin:18px 4px 0; color:var(--muted); font-size:.78rem; text-align:center; }
.filters { align-items:stretch; margin-bottom:10px; } .filters label:first-child { flex:1; } .filters label:last-child { width:120px; } .transaction-list { display:grid; gap:8px; } .transaction-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #edf3f1; } .transaction-row:last-child { border-bottom:0; } .transaction-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; font-size:1.1rem; } .transaction-icon.income { color:var(--income); background:#e5f7ee; } .transaction-icon.expense { color:var(--expense); background:#fff0ed; } .transaction-main { min-width:0; } .transaction-main strong { display:block; font-size:.92rem; } .transaction-main span { display:block; margin-top:3px; color:var(--muted); font-size:.74rem; } .transaction-amount { text-align:right; font-weight:800; } .transaction-amount.income { color:var(--income); } .transaction-amount.expense { color:var(--expense); } .row-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:4px; max-width:100%; } .row-actions button { flex:0 0 auto; min-width:44px; min-height:44px; padding:8px 10px; color:var(--muted); border:0; border-radius:8px; background:transparent; font-size:.75rem; white-space:nowrap; } .row-actions button:hover { color:var(--primary); background:var(--soft); }
.category-line { display:grid; gap:7px; margin:12px 0; } .category-meta { display:flex; justify-content:space-between; font-size:.82rem; } .category-meta span:last-child { font-weight:800; } .bar-progress { width:100%; height:8px; appearance:none; border:0; border-radius:99px; background:#edf3f1; } .bar-progress::-webkit-progress-bar { border-radius:99px; background:#edf3f1; } .bar-progress::-webkit-progress-value { border-radius:99px; background:linear-gradient(90deg,#0f766e,#42b29f); } .bar-progress::-moz-progress-bar { border-radius:99px; background:linear-gradient(90deg,#0f766e,#42b29f); }
.budget-list, .report-comparison { display:grid; gap:10px; } .budget-row { padding:11px 12px; border:1px solid var(--line); border-radius:13px; background:#fbfefd; } .budget-row.budget-danger { border-color:#f1c7bf; background:#fff8f6; } .budget-meta { display:flex; justify-content:space-between; gap:10px; font-size:.8rem; } .budget-meta span, .budget-row small { color:var(--muted); font-size:.72rem; } .budget-row small { display:block; margin-top:5px; } .budget-danger small { color:#b9443e; font-weight:800; } .budget-form { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); } .report-row { display:grid; grid-template-columns:1fr auto; gap:3px 10px; padding:12px; border:1px solid var(--line); border-radius:13px; background:#fbfefd; } .report-row span { color:var(--muted); font-size:.8rem; } .report-row strong { text-align:right; } .report-row small { grid-column:1 / -1; font-size:.72rem; } .change-up { color:#b9443e; } .change-down { color:var(--income); } .report-note { color:var(--muted); font-size:.75rem; line-height:1.5; }
.review-list { display:grid; gap:8px; } .review-row { padding:12px; border:1px solid #f1d4bd; border-radius:13px; background:#fffaf5; } .review-row strong { display:block; font-size:.86rem; } .review-row span { display:block; margin-top:4px; color:var(--muted); font-size:.75rem; line-height:1.45; } .review-edit { margin-top:9px; min-height:38px; font-size:.76rem; } .remote-row-label { display:inline-block; color:var(--primary); font-size:.7rem; font-weight:800; }
.empty-state { padding:18px 4px; color:var(--muted); font-size:.86rem; text-align:center; } .toast { position:fixed; right:calc(16px + env(safe-area-inset-right)); bottom:calc(20px + env(safe-area-inset-bottom)); left:calc(16px + env(safe-area-inset-left)); z-index:5; max-width:520px; margin:auto; padding:13px 16px; color:white; text-align:center; background:#163d39; border-radius:12px; opacity:0; transform:translateY(12px); pointer-events:none; transition:.2s ease; } .toast.show { opacity:1; transform:translateY(0); } [hidden] { display:none !important; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.lock-screen { min-height:100svh; display:grid; place-items:center; padding:24px 16px; background:linear-gradient(145deg,#e9f7f3,#f7fbfa); } .lock-card { width:min(100%,420px); padding:30px 22px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); } .lock-mark { display:grid; place-items:center; width:60px; height:60px; margin:0 auto 16px; color:white; font-size:1.8rem; font-weight:800; background:var(--primary); border-radius:18px; } .lock-card h1 { margin-top:7px; } .lock-hint { margin:10px auto 22px; color:var(--muted); font-size:.88rem; line-height:1.5; } .lock-card form { text-align:left; } .lock-card .primary-button { margin-top:3px; } .lock-error { min-height:20px; margin-top:10px; color:#b9443e; font-size:.8rem; font-weight:700; } .lock-footnote { margin-top:18px; color:var(--muted); font-size:.72rem; line-height:1.5; }
@media (max-width:430px) { .app-shell { padding:16px 12px 30px; } .summary-card, .panel { border-radius:18px; padding:16px; } .form-grid { grid-template-columns:1fr; } .form-grid label:last-child { grid-column:auto; } .filters label:last-child { width:112px; } .voice-text-entry, .voice-actions { grid-template-columns:1fr; } .purchase-item-row { grid-template-columns:1fr 1fr; } .purchase-item-row label:first-child { grid-column:1 / -1; } .app-tab { font-size:.7rem; } .modal-panel:not([hidden]) { top:calc(8px + env(safe-area-inset-top)); right:calc(8px + env(safe-area-inset-right)); bottom:calc(8px + env(safe-area-inset-bottom)); left:calc(8px + env(safe-area-inset-left)); max-height:calc(100svh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } }
.sync-panel { margin-top:16px; } .sync-advanced { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } .sync-advanced summary { color:var(--primary); cursor:pointer; font-size:.82rem; font-weight:800; } .sync-fields { margin-top:12px; } .sync-actions { margin-top:4px; } .sync-actions button { min-height:46px; } .sync-note { margin-top:10px; color:var(--muted); font-size:.75rem; line-height:1.45; }
.row-actions { flex-wrap:wrap; } .row-actions .evidence-row-button { color:var(--primary-dark); background:var(--soft); font-weight:800; }
@media (max-width:560px) { .filters { display:grid; grid-template-columns:1fr 1fr; } .filters label:first-child { grid-column:1 / -1; } .filters label:last-child { width:auto; } }

/* Gold visual direction: deep navy workspace, warm month header, and clear
   action cards. The existing markup and data flow remain unchanged. */
:root {
  color-scheme: dark;
  --ink: #f4f8fb;
  --muted: #aac0cf;
  --line: rgba(185, 215, 234, .18);
  --surface: #0b3554;
  --soft: #123f61;
  --primary: #287df2;
  --primary-dark: #1763cd;
  --income: #7fe3ad;
  --expense: #ff9c91;
  --shadow: 0 14px 35px rgba(0, 0, 0, .18);
}

body { background: #061f37; }
.app-shell { width: min(100%, 760px); min-height: 100svh; padding: 0 16px calc(48px + env(safe-area-inset-bottom)); background: #061f37; }
.topbar { margin: 0 -16px 16px; padding: calc(22px + env(safe-area-inset-top)) 16px 18px; color: #082642; background: #ffd84a; border-radius: 0 0 26px 26px; }
.topbar h1 { color: #082642; font-size: 1.7rem; }
.topbar .eyebrow { color: #31516a; }
.topbar-actions { gap: 8px; }
.icon-button, .close-button { color: #082642; }
.icon-button:hover, .close-button:hover { color: #082642; background: rgba(255, 255, 255, .35); }

.summary-card { padding: 20px; color: #082642; background: #edf2fa; border: 0; border-radius: 24px; box-shadow: var(--shadow); }
.summary-card .section-label { color: #5b7588; }
.summary-balance { color: #082642; font-size: 2.25rem; }
.month-picker input { color: #082642; border-color: #bfd0dd; background: #fff; }
.summary-grid { margin-top: 18px; }
.summary-item { border-color: #cbd9e3; background: #fff; }
.summary-item span { color: #5b7588; }
.summary-item strong { color: #082642; }
.summary-item.income strong { color: #149665; }
.summary-item.expense strong { color: #d35e5a; }
.summary-source-row { margin-top: 14px; }
.data-source-badge { color: #5b7588; }
.summary-link { color: #1763cd; border-color: #a9c7e2; background: #dfeeff; }

.app-tabs { margin: 16px 0 8px; background: #0b3554; border-color: var(--line); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.app-tab { color: #aac0cf; }
.app-tab.active { color: #082642; background: #ffd84a; box-shadow: 0 5px 13px rgba(0, 0, 0, .2); }
.quick-actions { margin: 18px 0; }
.action-button { color: #fff; background: #123f61; border: 1px solid rgba(255, 255, 255, .16); box-shadow: var(--shadow); }
.action-button:hover { background: #1a4d73; }
.income-action { border-color: #5fd39a; }
.expense-action { border-color: #ff8d82; }
.transfer-action { border-color: #7fb8f2; }

.panel { background: #0b3554; border-color: var(--line); box-shadow: var(--shadow); }
.panel h2, .panel .purchase-items-heading span { color: #f4f8fb; }
.panel .section-label, .record-count { color: #aac0cf; }
.voice-status { color: #ffd84a; }
.voice-help, .receipt-privacy, .evidence-help, .purchase-items-heading small, .purchase-items-help, .drive-status { color: #aac0cf; }
.voice-privacy { color: #d8b978; }
.voice-button, .primary-button { color: #082642; background: #ffd84a; box-shadow: 0 8px 20px rgba(0, 0, 0, .16); }
.voice-button:hover, .primary-button:hover { background: #ffe57c; }
.secondary-button { color: #e9f3fa; background: #164667; border: 1px solid rgba(185, 215, 234, .22); }
.secondary-button:hover { background: #1c567e; }
.voice-preview, .receipt-preview { border-color: rgba(127, 227, 173, .45); background: #123f61; }
.voice-transcript, .voice-interpretation strong { color: #f4f8fb; }
.voice-transcript-label, .voice-interpretation span { color: #aac0cf; }
.receipt-capture-button, .evidence-capture-button { color: #dff5ea; border-color: #5fd39a; background: #123f61; }
.receipt-storage select, .evidence-storage select { background: #123f61; }
.receipt-suggestion { color: #7fe3ad !important; }
.receipt-warning { color: #ffb3a9 !important; }

input, select { color: #f4f8fb; background: #123f61; border-color: rgba(185, 215, 234, .22); }
input::placeholder { color: #87a5b7; }
input:focus, select:focus { border-color: #ffd84a; box-shadow: 0 0 0 3px rgba(255, 216, 74, .16); }
.amount-input { border-color: rgba(185, 215, 234, .22); background: #123f61; }
.amount-input:focus-within { border-color: #ffd84a; }
.amount-input span { color: #ffd84a; }
.amount-input input { background: transparent; }
.remote-edit-notice { color: #082642; background: #dceeff; }
.evidence-editor, .purchase-items-editor { border-color: var(--line); }
.evidence-card, .budget-row, .report-row, .purchase-item-row { border-color: var(--line); background: #123f61; }
.evidence-card p, .budget-meta span, .budget-row small, .report-row span, .report-note { color: #aac0cf; }
.evidence-card .evidence-analysis { color: #7fe3ad; }
.evidence-file-link { color: #ffd84a; }
.purchase-item-row .purchase-item-remove { color: #ffb3a9; background: rgba(211, 94, 90, .18); }
.transaction-row { border-color: rgba(185, 215, 234, .14); }
.transaction-main strong, .transaction-main span { color: #f4f8fb; }
.transaction-main span { color: #aac0cf; }
.transaction-icon.income { color: #082642; background: #7fe3ad; }
.transaction-icon.expense { color: #082642; background: #ff9c91; }
.timeline-card { border-color: rgba(185, 215, 234, .14); background: #123f61; }
.timeline-card-top strong { color: #f4f8fb; }
.timeline-card-merchant, .timeline-card-note { color: #aac0cf; }
.timeline-card-icon.income { color: #082642; background: #7fe3ad; }
.timeline-card-icon.expense { color: #082642; background: #ff9c91; }
.timeline-day-total.income, .timeline-card-amount.income { color: #7fe3ad; }
.timeline-day-total.expense, .timeline-card-amount.expense { color: #ff9c91; }
.fab-add-button { color: #082642; background: #ffd84a; box-shadow: 0 14px 30px rgba(0, 0, 0, .4); }
.fab-add-button:hover { background: #ffe57c; }
.row-actions button { color: #aac0cf; }
.row-actions button:hover { color: #ffd84a; background: #164667; }
.row-actions .danger-button, .danger-button { color:#ffb3a9; border:0; border-radius:8px; background:rgba(211,94,90,.14); min-height:44px; padding:8px 10px; font-size:.75rem; font-weight:800; }
.row-actions .danger-button:hover, .danger-button:hover { color:#fff; background:#a9443d; }
.remote-delete-form-button { width:100%; }
.transaction-detail-panel { padding:18px; overflow:auto; -webkit-overflow-scrolling:touch; }
.transaction-detail-hero { display:grid; gap:5px; margin:0 0 14px; padding:18px; border-radius:18px; background:#061f37; }
.transaction-detail-date { color:#aac0cf; font-size:.8rem; }
.transaction-detail-hero strong { color:#f4f8fb; font-size:2.15rem; line-height:1.1; overflow-wrap:anywhere; }
.transaction-detail-hero strong.income { color:#7fe3ad; }
.transaction-detail-hero strong.expense { color:#ff9c91; }
.transaction-detail-facts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.transaction-detail-facts div { display:grid; gap:4px; min-width:0; padding:12px; border:1px solid rgba(185,215,234,.16); border-radius:13px; background:#123f61; }
.transaction-detail-facts div:nth-child(2) { grid-column:1 / -1; }
.transaction-detail-facts small { color:#aac0cf; font-size:.7rem; }
.transaction-detail-facts strong { color:#f4f8fb; font-size:.84rem; overflow-wrap:anywhere; }
.transaction-detail-evidence { margin-top:16px; padding-top:14px; border-top:1px solid rgba(185,215,234,.16); }
.transaction-detail-evidence h3 { margin:0; color:#f4f8fb; font-size:.98rem; }
.transaction-detail-evidence-card { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; align-items:center; padding:12px; border-radius:14px; background:#123f61; }
.transaction-detail-evidence-thumb { width:76px; height:76px; object-fit:cover; border-radius:11px; border:1px solid rgba(185,215,234,.2); background:#0b3554; }
.transaction-detail-evidence-card strong { display:block; color:#f4f8fb; font-size:.8rem; overflow-wrap:anywhere; }
.transaction-detail-evidence-card p { margin:5px 0 0; color:#aac0cf; font-size:.72rem; line-height:1.45; }
.transaction-detail-more { margin-top:14px; padding-top:14px; border-top:1px solid rgba(185,215,234,.16); }
.transaction-detail-more summary { cursor:pointer; color:#ffd84a; font-size:.82rem; font-weight:800; }
.transaction-detail-items { margin-top:12px; color:#f4f8fb; font-size:.78rem; }
.transaction-detail-items ul { display:grid; gap:6px; margin:8px 0 0; padding:0; list-style:none; }
.transaction-detail-items li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:baseline; padding:7px 0; border-bottom:1px solid rgba(185,215,234,.12); }
.transaction-detail-items li span { overflow-wrap:anywhere; }
.transaction-detail-items li strong { color:#aac0cf; font-size:.7rem; white-space:nowrap; }
.transaction-detail-items li em { color:#7fe3ad; font-style:normal; font-weight:800; white-space:nowrap; }
.transaction-detail-transcript { margin-top:12px; color:#aac0cf; font-size:.72rem; }
.transaction-detail-transcript summary { cursor:pointer; color:#7fe3ad; font-weight:700; }
.transaction-detail-transcript pre { max-height:180px; margin:7px 0 0; padding:8px; overflow:auto; white-space:pre-wrap; border-radius:9px; background:rgba(0,0,0,.16); color:#d6e4ec; font:inherit; }
.transaction-detail-actions { display:grid; gap:9px; margin-top:18px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
@media (max-width:430px) { .transaction-detail-panel { padding:16px; } .transaction-detail-facts { grid-template-columns:1fr; } .transaction-detail-facts div:nth-child(2) { grid-column:auto; } }
.category-meta, .budget-meta { color: #f4f8fb; }
.bar-progress, .receipt-progress progress, .evidence-progress progress { background: #1b4b6c; }
.bar-progress::-webkit-progress-bar, .receipt-progress progress::-webkit-progress-bar, .evidence-progress progress::-webkit-progress-bar { background: #1b4b6c; }
.bar-progress::-webkit-progress-value, .receipt-progress progress::-webkit-progress-value, .evidence-progress progress::-webkit-progress-value { background: linear-gradient(90deg, #287df2, #7fe3ad); }
.bar-progress::-moz-progress-bar, .receipt-progress progress::-moz-progress-bar, .evidence-progress progress::-moz-progress-bar { background: linear-gradient(90deg, #287df2, #7fe3ad); }
.review-row { border-color: rgba(255, 216, 74, .4); background: #3d3b2b; }
.review-row span { color: #d6d7ca; }
.empty-state { color: #aac0cf; }
.toast { right:calc(16px + env(safe-area-inset-right)); left:calc(16px + env(safe-area-inset-left)); bottom:calc(98px + env(safe-area-inset-bottom)); max-width:min(92vw,400px); padding:12px 16px; color:#082642; background:#ffd84a; border:1px solid rgba(8,38,66,.12); border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.35); font-size:.85rem; line-height:1.4; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; }
.modal-panel:not([hidden]) { box-shadow: 0 20px 70px rgba(0, 0, 0, .5); }

.lock-screen { color: #14332f; background: linear-gradient(145deg, #e9f7f3, #f7fbfa); }
.lock-card { color: #14332f; background: #fff; }
.lock-card input { color: #14332f; background: #fbfefd; border-color: #dbe9e5; }
.lock-card .primary-button { color: #fff; background: #0f766e; }

@media (max-width: 430px) {
  .app-shell { padding-right: 12px; padding-left: 12px; }
  .topbar { margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; }
  .summary-card { padding: 16px; }
  .summary-balance { font-size: 2rem; }
}

.evidence-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.evidence-facts div { display:grid; gap:2px; padding:8px 9px; border-radius:10px; background:rgba(255,255,255,.06); }
.evidence-facts small, .evidence-items small { color:#aac0cf; font-size:.66rem; }
.evidence-facts strong { color:#f4f8fb; font-size:.74rem; overflow-wrap:anywhere; }
.evidence-totals { color:#d6e4ec !important; font-weight:700; }
.evidence-items { margin-top:10px; padding-top:9px; border-top:1px solid rgba(185,215,234,.16); }
.evidence-items ul { display:grid; gap:5px; margin:6px 0 0; padding:0; list-style:none; }
.evidence-items li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:baseline; color:#f4f8fb; font-size:.72rem; }
.evidence-items li span { overflow-wrap:anywhere; }
.evidence-items li strong { color:#d6e4ec; font-size:.68rem; white-space:nowrap; }
.evidence-items li em { color:#7fe3ad; font-size:.72rem; font-style:normal; font-weight:800; white-space:nowrap; }
.evidence-transcript { margin-top:9px; color:#aac0cf; font-size:.7rem; }
.evidence-transcript summary { cursor:pointer; color:#7fe3ad; font-weight:700; }
.evidence-transcript pre { max-height:180px; margin:7px 0 0; padding:8px; overflow:auto; white-space:pre-wrap; border-radius:9px; background:rgba(0,0,0,.16); color:#d6e4ec; font:inherit; }
.evidence-ok-text { color:#7fe3ad !important; }
.evidence-warning-text { color:#ffb3a9 !important; }

/* Connection / reconnect status pill */
.connection-pill { display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:5px 10px; border:0; border-radius:999px; background:rgba(8,38,66,.12); color:#082642; font-size:.68rem; font-weight:800; }
.connection-pill .connection-dot { width:7px; height:7px; border-radius:50%; background:#7a8a9a; flex:none; }
.connection-pill.online { background:rgba(22,133,95,.18); color:#0b5c3f; }
.connection-pill.online .connection-dot { background:#149665; }
.connection-pill.offline, .connection-pill.pending { background:rgba(211,94,90,.18); color:#7a2f26; }
.connection-pill.offline .connection-dot, .connection-pill.pending .connection-dot { background:#d35e5a; }
.runtime-update-banner { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 0; padding:10px 12px; color:#082642; border:1px solid #f2c52f; border-radius:12px; background:#fff0a6; font-size:.78rem; font-weight:800; }
.runtime-update-banner button { padding:7px 10px; color:#082642; border:1px solid rgba(8,38,66,.25); border-radius:9px; background:#ffd84a; font-weight:800; }

/* Entry type tabs (expense / income / transfer) */
.entry-type-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 14px; }
.entry-type-tab { min-height:44px; padding:0 6px; color:#aac0cf; border:1px solid var(--line); border-radius:12px; background:#123f61; font-weight:800; font-size:.8rem; }
.entry-type-tab.active { color:#082642; background:#ffd84a; border-color:#ffd84a; }

/* Filter chips */
.filter-chips { display:flex; flex-wrap:wrap; gap:7px; margin:-2px 0 10px; }
.filter-chip { min-height:32px; padding:0 12px; color:#e9f3fa; border:1px solid rgba(185,215,234,.22); border-radius:999px; background:#164667; font-size:.72rem; font-weight:700; }
.filter-chip-clear { color:#082642; background:#ffd84a; border-color:#ffd84a; font-weight:800; }

/* Tag chips on transaction rows/cards */
.tag-chip-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.tag-chip { min-height:26px; padding:0 9px; color:#aac0cf; border:1px solid rgba(185,215,234,.22); border-radius:999px; background:rgba(185,215,234,.08); font-size:.68rem; font-weight:700; }
.tag-chip:hover { color:#082642; background:#ffd84a; border-color:#ffd84a; }

/* Evidence thumbnails and match badges */
.evidence-card-head { display:grid; grid-template-columns:52px 1fr; gap:11px; align-items:center; }
.evidence-thumb { width:52px; height:52px; object-fit:cover; border-radius:10px; border:1px solid rgba(185,215,234,.22); background:#0b3554; }
.evidence-thumb-file { display:grid; place-items:center; font-size:1.3rem; }
.evidence-card-info { min-width:0; }
.evidence-card-info strong { display:block; overflow-wrap:anywhere; font-size:.8rem; }
.evidence-correction-toggle { margin-top:10px; width:100%; min-height:40px; }
.evidence-correction-form { display:grid; gap:9px; margin-top:10px; padding:10px; border:1px solid rgba(255,216,74,.45); border-radius:12px; background:rgba(0,0,0,.12); }
.evidence-correction-form label { display:grid; gap:4px; }
.evidence-correction-form label span { color:#d9e7ef; font-size:.7rem; font-weight:700; }
.evidence-correction-form input { width:100%; min-height:40px; box-sizing:border-box; padding:8px 10px; border:1px solid #5d8aa9; border-radius:9px; background:#0d3453; color:#f4f8fb; font:inherit; }
.evidence-correction-help { color:#ffe98a !important; }
.evidence-original-read { color:#ffb0a7 !important; }
.evidence-correction-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.evidence-correction-actions button { min-height:40px; }
.evidence-draft-review { margin-top:10px; padding:10px; border:1px solid rgba(255,216,74,.55); border-radius:12px; background:rgba(0,0,0,.12); }
.evidence-draft-title { color:#ffe98a !important; font-weight:800; }
.evidence-draft-help, .evidence-draft-empty { color:#aac0cf !important; }
.evidence-draft-feedback { margin-top:7px; }
.evidence-draft-mismatch-reasons { color:#ffcfca !important; font-size:.68rem !important; }
.evidence-draft-primary-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:9px; }
.evidence-draft-primary-fields label, .evidence-draft-fields label { display:grid; gap:4px; }
.evidence-draft-advanced { margin-top:9px; border-top:1px solid rgba(185,215,234,.16); }
.evidence-draft-advanced summary, .evidence-draft-items summary { padding:9px 0 2px; color:#d9e7ef; cursor:pointer; font-size:.72rem; font-weight:800; }
.evidence-draft-fields { display:grid; grid-template-columns:1fr; gap:8px; margin-top:9px; }
.evidence-draft-fields label span, .evidence-draft-items small { color:#d9e7ef; font-size:.68rem; font-weight:700; }
.evidence-draft-fields input, .evidence-draft-item-row input { width:100%; min-height:38px; box-sizing:border-box; padding:7px 8px; border:1px solid #5d8aa9; border-radius:8px; background:#0d3453; color:#f4f8fb; font:inherit; }
.evidence-draft-items { display:grid; gap:7px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(185,215,234,.16); }
.evidence-draft-items-empty { border-top:0; padding-top:2px; }
.evidence-draft-item-row { display:grid; grid-template-columns:minmax(0,1fr) 64px 82px auto; gap:6px; align-items:center; }
.evidence-draft-item-row .purchase-item-remove { min-height:34px; padding:0 7px; }
.evidence-draft-add-item { min-height:36px; }
.evidence-mismatch-confirm { display:inline-flex; width:auto; min-height:36px; margin-top:8px; padding:0 13px; color:#082642; background:#ffe98a; border-color:#f4d45d; font-size:.72rem; }
.evidence-draft-confirmed { margin-top:8px !important; color:#ffe98a !important; font-weight:800; }
.evidence-draft-error { color:#ffb3a9 !important; }
.evidence-raw-qr { overflow-wrap:anywhere; }
@media (max-width: 380px) {
  .evidence-draft-item-row { grid-template-columns:minmax(0,1fr) 64px; }
  .evidence-draft-item-row input[data-evidence-draft-item-field="amount"] { grid-column:1; }
  .evidence-draft-item-row .purchase-item-remove { grid-column:2; grid-row:2; }
}
.match-badge { display:inline-block; margin:7px 0 0; padding:5px 10px; border-radius:999px; font-size:.7rem; font-weight:800; }
.match-ok { color:#0b3554; background:#7fe3ad; }
.match-warn { color:#4a1f12; background:#ffb3a9; }
.match-neutral { color:#082642; background:#dfeeff; }

/* Onboarding carousel */
.onboarding-screen { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px 16px; background:#061f37; }
.onboarding-card { width:min(100%,420px); overflow:hidden; padding:30px 22px 22px; text-align:center; background:#0b3554; border:1px solid rgba(185,215,234,.18); border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.onboarding-track { display:flex; transition:transform .3s ease; }
.onboarding-slide { flex:0 0 100%; min-width:0; padding:0 4px; }
.onboarding-icon { font-size:2.6rem; margin-bottom:14px; }
.onboarding-slide h1, .onboarding-slide h2 { color:#f4f8fb; font-size:1.25rem; margin-bottom:10px; }
.onboarding-slide p { color:#aac0cf; font-size:.9rem; line-height:1.6; }
.onboarding-dots { display:flex; justify-content:center; gap:7px; margin:20px 0 18px; }
.onboarding-dot { width:7px; height:7px; border-radius:50%; background:rgba(185,215,234,.3); transition:.2s ease; }
.onboarding-dot.active { width:20px; border-radius:99px; background:#ffd84a; }
.onboarding-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.onboarding-actions button { min-height:48px; }

.insight-list { display:grid; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(185,215,234,.16); }
.insight-heading { display:flex; justify-content:space-between; gap:10px; color:#f4f8fb; font-size:.82rem; }
.insight-heading span { color:#7fe3ad; font-size:.72rem; }
.insight-item { margin:0; padding:10px 12px; color:#d6e4ec; border-radius:12px; background:rgba(185,215,234,.08); font-size:.78rem; line-height:1.5; }
.insight-top { display:grid; gap:5px; margin-top:4px; color:#aac0cf; font-size:.72rem; }
.insight-top strong { color:#f4f8fb; font-size:.78rem; }
.settings-gold-panel { display:grid; gap:10px; }
.gold-detail { padding:12px 0; border-top:1px solid rgba(185,215,234,.16); }
.gold-detail summary { cursor:pointer; color:#f4f8fb; font-weight:800; }
.compact-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.compact-form label:last-of-type { grid-column:auto; }
.compact-form button { min-height:44px; }
.settings-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.settings-chip { display:inline-flex; align-items:center; min-height:30px; padding:5px 10px; color:#d6e4ec; border:1px solid rgba(185,215,234,.2); border-radius:999px; background:#164667; font-size:.7rem; }
@media (max-width:430px) { .compact-form { grid-template-columns:1fr; } }

@media (max-width:430px) {
  .quick-actions { grid-template-columns:1fr 1fr; }
  .transfer-action { grid-column:1 / -1; }
}
 .transfer-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; grid-column:1 / -1; }

.voice-panel { padding:16px; }
.voice-panel .panel-heading { align-items:flex-start; }
.voice-status { padding:5px 9px; border:1px solid rgba(255,216,74,.35); border-radius:999px; white-space:nowrap; }
.voice-help { margin-bottom:9px; }
.voice-privacy { margin-bottom:12px; }
.voice-controls { grid-template-columns:minmax(0,1fr) auto; }
.voice-button { min-height:60px; font-size:1rem; }
.voice-button.listening { color:#fff; background:#bd423d; }
.voice-button.listening .voice-icon { animation:pulse 1.1s ease-in-out infinite; }
.voice-consent { display:grid; gap:8px; margin-top:12px; padding:12px; border:1px solid rgba(255,216,74,.4); border-radius:14px; background:#123f61; }
.voice-consent strong { color:#ffd84a; font-size:.84rem; }
.voice-consent p { color:#aac0cf; font-size:.76rem; line-height:1.45; }
.voice-consent .voice-actions { margin-top:2px; }
.voice-consent .primary-button, .voice-consent .secondary-button { min-height:42px; }
.voice-permission-help { display:grid; gap:8px; margin-top:12px; padding:12px; border:1px solid rgba(255,141,130,.4); border-radius:14px; background:rgba(189,66,61,.12); }
.voice-permission-help p { color:#ffd0c7; font-size:.76rem; line-height:1.45; }
.voice-permission-help .secondary-button { justify-self:start; min-height:40px; }
.voice-preview { margin-top:12px; }
@media (max-width:430px) { .voice-controls { grid-template-columns:1fr; } .voice-button { min-height:56px; } .voice-consent .voice-actions { grid-template-columns:1fr; } }