:root{
  --brand:#0d6efd; --ink:#0f172a; --muted:#64748b; --border:#e5e7eb; --bg:#f7f8fb;
  --safe:#16a34a; --warn:#f59e0b; --info:#0ea5e9
}
html,body{ height:100%; }
body{ background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased }
.app{ min-height:100%; padding-bottom:70px }
.topbar{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--border) }
.topbar .brand{ font-weight:800 }
.topbar .btn-icon{ width:38px; height:38px; display:flex; align-items:center; justify-content:center }

/* Job cards */
.job-card{ border:1px solid var(--border); border-radius:16px; background:#fff; padding:14px }
.job-pill{ font-size:.75rem; padding:.2rem .5rem; border-radius:999px }
.pill-new{ background:#eef2ff; color:#3730a3 }
.pill-sch{ background:#ecfeff; color:#155e75 }
.pill-done{ background:#ecfdf5; color:#065f46 }

.action-row .btn{ border-radius:12px }
.meta{ color:var(--muted); font-size:.9rem }
.price{ font-weight:700 }

/* Bottom nav */
.tabbar{ position:fixed; bottom:0; left:0; right:0; height:62px; background:#fff; border-top:1px solid var(--border); z-index:1000 }
.tabbar .nav-link{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; font-size:.78rem; color:#475569 }
.tabbar .nav-link.active{ color:var(--brand) }
.fab{ position:fixed; bottom:76px; right:16px; z-index:1000 }
.fab .btn{ width:56px; height:56px; border-radius:50%; box-shadow:0 6px 18px rgba(13,110,253,.35) }

/* Form */
.section-title{ font-size:.95rem; font-weight:800; margin:10px 0 6px }
.card-lite{ background:#fff; border:1px solid var(--border); border-radius:14px }
.dropzone{ border:2px dashed #c8cede; border-radius:12px; padding:14px; text-align:center; color:#6b7280; background:#fafbff }
.thumb{ width:76px; height:76px; object-fit:cover; border-radius:10px; border:1px solid #dfe3ee }

/* Views */
.view{ display:none }
.view.active{ display:block }

/* Desktop tweaks */
@media (min-width:992px){ .app{ padding-bottom:0 } .tabbar,.fab{ display:none } }