:root {
  --navy: #071f3d;
  --navy-2: #0a2a52;
  --slate: #1e3a5f;
  --steel: #406383;
  --blue: #2f6fdb;
  --ice: #eef4fa;
  --snow: #ffffff;
  --gray-50: #f7f9fc;
  --gray-100: #eef1f5;
  --gray-200: #d9e0e8;
  --gray-500: #6c7888;
  --gray-800: #1b2735;
  --green: #25845b;
  --amber: #d98b18;
  --red: #b83a3a;
  --shadow: 0 10px 28px rgba(7,31,61,.10);
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; font-family: Inter, Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--gray-800); background:linear-gradient(#eef4fa 0,#f8fafc 38%,#eef4fa 100%); }
body { overscroll-behavior-y:none; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top)); background:rgba(7,31,61,.97); color:#fff; box-shadow:0 4px 18px rgba(0,0,0,.16); backdrop-filter:blur(12px); }
.brand-lockup { display:flex; align-items:center; min-width:0; }
.brand-logo { width:48px; height:48px; object-fit:contain; background:#fff; border-radius:10px; margin-right:10px; }
.brand-name { font-family: Georgia, "Times New Roman", serif; font-weight:700; font-size:17px; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-subtitle { color:#b7c9de; font-size:11px; margin-top:3px; letter-spacing:.06em; text-transform:uppercase; }
.icon-button { border:1px solid rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.08); border-radius:10px; padding:9px 12px; font-weight:700; }
.main-content { max-width:920px; margin:0 auto; padding:18px 14px 28px; }
.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:30; height:calc(68px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,1fr); padding:6px 6px env(safe-area-inset-bottom); background:#fff; border-top:1px solid var(--gray-200); box-shadow:0 -8px 24px rgba(7,31,61,.08); }
.nav-item { border:0; background:transparent; color:#687486; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:12px; font-size:11px; font-weight:700; }
.nav-item.active { color:var(--navy); background:var(--ice); }
.nav-icon { font-size:20px; line-height:1; }
.hero { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--navy),#0e3767); color:#fff; border-radius:22px; padding:22px; box-shadow:var(--shadow); }
.hero:after { content:""; position:absolute; inset:auto -40px -62px 25%; height:150px; opacity:.16; background:linear-gradient(140deg,transparent 40%,#fff 41% 43%,transparent 44%), linear-gradient(35deg,transparent 55%,#fff 56% 58%,transparent 59%); transform:skewX(-12deg); }
.hero h1 { margin:0 0 6px; font-family:Georgia,serif; font-size:27px; }
.hero p { margin:0; color:#d8e4f0; max-width:560px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; position:relative; z-index:1; }
.btn { border:0; border-radius:12px; padding:12px 15px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; }
.btn-primary { color:#fff; background:linear-gradient(135deg,#2f6fdb,#1c55b0); box-shadow:0 7px 16px rgba(47,111,219,.25); }
.btn-secondary { color:var(--navy); background:#fff; border:1px solid var(--gray-200); }
.btn-ghost { color:var(--navy); background:var(--ice); }
.btn-danger { color:#fff; background:var(--red); }
.btn-small { min-height:34px; padding:8px 10px; font-size:12px; }
.section-title { margin:24px 2px 12px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.section-title h2 { margin:0; font-size:18px; color:var(--navy); }
.section-title p { margin:3px 0 0; font-size:12px; color:var(--gray-500); }
.grid { display:grid; gap:12px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card { background:#fff; border:1px solid rgba(7,31,61,.08); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.stat-card { display:flex; flex-direction:column; min-height:112px; }
.stat-number { font-family:Georgia,serif; color:var(--navy); font-size:29px; font-weight:700; }
.stat-label { color:var(--gray-500); font-size:12px; font-weight:700; margin-top:auto; }
.quick-card { text-align:left; min-height:126px; border:0; }
.quick-card .quick-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--ice); color:var(--navy); font-size:21px; margin-bottom:16px; }
.quick-card strong { display:block; color:var(--navy); margin-bottom:4px; }
.quick-card small { color:var(--gray-500); line-height:1.35; }
.list { display:flex; flex-direction:column; gap:10px; }
.list-item { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:13px; }
.list-item-main { min-width:0; flex:1; }
.list-item-title { color:var(--navy); font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-item-sub { color:var(--gray-500); font-size:12px; margin-top:3px; }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:5px 8px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.badge-green { color:#176441; background:#e2f4eb; }
.badge-amber { color:#875307; background:#fff1d7; }
.badge-blue { color:#174b9e; background:#e6efff; }
.badge-gray { color:#5f6874; background:#eef1f5; }
.empty { text-align:center; padding:34px 20px; color:var(--gray-500); }
.empty strong { display:block; color:var(--navy); margin-bottom:6px; }
.form-card { padding:0; overflow:hidden; }
.form-header { color:#fff; background:linear-gradient(135deg,var(--navy),#123b68); padding:17px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.form-header h2 { margin:0; font-family:Georgia,serif; font-size:20px; }
.form-body { padding:16px; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.full { grid-column:1/-1; }
.field label { font-size:11px; font-weight:800; color:var(--slate); text-transform:uppercase; letter-spacing:.04em; }
.field input, .field select, .field textarea { width:100%; border:1px solid #cbd5e1; border-radius:10px; background:#fff; padding:11px 12px; color:var(--gray-800); min-height:44px; }
.field textarea { min-height:92px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:3px solid rgba(47,111,219,.14); border-color:var(--blue); }
fieldset { border:0; padding:0; margin:0; }
.legend { margin:20px 0 10px; padding-bottom:7px; border-bottom:2px solid var(--ice); font-size:13px; font-weight:900; color:var(--navy); text-transform:uppercase; letter-spacing:.05em; }
.checklist { border:1px solid var(--gray-200); border-radius:13px; overflow:hidden; }
.check-row { display:grid; grid-template-columns:minmax(0,1fr) repeat(3,58px); align-items:center; border-top:1px solid var(--gray-200); min-height:48px; }
.check-row:first-child { border-top:0; }
.check-label { padding:10px 12px; font-weight:700; color:var(--slate); }
.status-btn { height:100%; min-height:48px; border:0; border-left:1px solid var(--gray-200); background:#fff; color:#7a8797; font-weight:900; }
.status-btn.selected.ok { background:#e4f5ec; color:var(--green); }
.status-btn.selected.attention { background:#fff0d8; color:var(--amber); }
.status-btn.selected.na { background:#edf0f4; color:#667180; }
.photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.photo-slot { min-height:138px; border:2px dashed #c7d2df; background:#f9fbfd; border-radius:13px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.photo-slot input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.photo-slot img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.photo-placeholder { text-align:center; color:#637084; font-size:12px; font-weight:700; }
.photo-placeholder span { display:block; font-size:28px; margin-bottom:5px; }
.form-actions { position:sticky; bottom:74px; z-index:10; display:flex; flex-wrap:wrap; gap:8px; background:rgba(255,255,255,.96); border-top:1px solid var(--gray-200); margin:18px -16px -16px; padding:12px 16px; backdrop-filter:blur(9px); }
.line-items { width:100%; border-collapse:collapse; }
.line-items th { background:var(--navy); color:#fff; padding:10px 8px; font-size:11px; text-align:left; }
.line-items td { border-bottom:1px solid var(--gray-200); padding:7px 5px; }
.line-items input { width:100%; min-width:50px; border:1px solid #cbd5e1; border-radius:8px; padding:8px; }
.line-items .amount { white-space:nowrap; font-weight:800; color:var(--navy); }
.totals { margin-left:auto; max-width:320px; margin-top:14px; }
.total-row { display:flex; justify-content:space-between; gap:18px; padding:7px 0; }
.total-row.grand { border-top:2px solid var(--navy); margin-top:5px; padding-top:10px; color:var(--navy); font-size:18px; font-weight:900; }
.segmented { display:flex; flex-wrap:wrap; gap:8px; }
.segmented label { flex:1; min-width:90px; }
.segmented input { position:absolute; opacity:0; }
.segmented span { display:block; text-align:center; border:1px solid #cbd5e1; border-radius:11px; padding:10px; font-size:12px; font-weight:800; background:#fff; }
.segmented input:checked + span { color:#fff; background:var(--navy); border-color:var(--navy); }
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(1,12,27,.66); display:flex; align-items:flex-end; justify-content:center; padding-top:60px; }
.modal { width:min(920px,100%); max-height:92vh; overflow:auto; background:var(--gray-50); border-radius:24px 24px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.25); }
.modal-top { position:sticky; top:0; z-index:4; display:flex; align-items:center; justify-content:space-between; background:#fff; padding:12px 16px; border-bottom:1px solid var(--gray-200); }
.modal-title { color:var(--navy); font-weight:900; }
.close-button { border:0; background:var(--ice); color:var(--navy); width:38px; height:38px; border-radius:10px; font-size:21px; }
.modal-content { padding:14px; }
.toast { position:fixed; z-index:200; left:50%; bottom:95px; transform:translate(-50%,20px); background:#102b4c; color:#fff; padding:11px 16px; border-radius:999px; box-shadow:0 12px 30px rgba(0,0,0,.24); opacity:0; pointer-events:none; transition:.22s; white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.settings-group { margin-bottom:14px; }
.logo-panel { background:#fff; text-align:center; padding:20px; border-radius:18px; box-shadow:var(--shadow); }
.logo-panel img { width:min(290px,80%); height:auto; }
.small-note { font-size:12px; line-height:1.45; color:var(--gray-500); }
.warning { background:#fff6e6; border:1px solid #f1d49d; color:#77510b; border-radius:12px; padding:12px; font-size:13px; }
.file-input-label { display:inline-flex; align-items:center; justify-content:center; }
@media (min-width:720px) {
  .main-content { padding:24px 22px 40px; }
  .modal-backdrop { align-items:center; padding:30px; }
  .modal { border-radius:24px; }
  .bottom-nav { left:50%; right:auto; width:620px; transform:translateX(-50%); bottom:14px; border:1px solid var(--gray-200); border-radius:20px; height:66px; padding:6px; box-shadow:0 12px 34px rgba(7,31,61,.17); }
  .app-shell { padding-bottom:104px; }
  .form-actions { bottom:94px; }
  .photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:540px) {
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .field-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .check-row { grid-template-columns:minmax(0,1fr) repeat(3,43px); }
  .check-label { font-size:12px; }
  .status-btn { font-size:10px; }
}
@media print {
  .topbar,.bottom-nav,.form-actions,.install-button { display:none !important; }
  .app-shell { padding:0; }
  .main-content { max-width:none; padding:0; }
  body { background:#fff; }
}