:root{
  --bg:#0f172a;--panel:#111827;--card:#fff;--muted:#6b7280;--text:#111827;--line:#e5e7eb;--blue:#2563eb;--green:#059669;--red:#dc2626;--amber:#d97706;--rail:#0b1220;--soft:#f3f4f6;--radius:18px;--shadow:0 10px 30px rgba(0,0,0,.14);
  --phone-nav-height:82px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
.app-shell{height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f8fafc}
.rail{order:2;width:100%;min-height:var(--phone-nav-height);background:linear-gradient(180deg,#0f172a,#111827);padding:8px 10px calc(env(safe-area-inset-bottom) + 8px);display:flex;flex-direction:row;gap:7px;overflow-x:auto;overflow-y:hidden;box-shadow:0 -4px 18px rgba(0,0,0,.18);z-index:2;scroll-snap-type:x proximity}
.rail-btn{border:0;border-radius:15px;color:#cbd5e1;background:transparent;min-width:62px;min-height:54px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:20px;cursor:pointer;scroll-snap-align:start}
.rail-btn span{font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.rail-btn.active{background:#ffffff;color:#111827;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.rail-btn:active{transform:scale(.98)}
.main{order:1;flex:1;min-width:0;height:100%;display:flex;flex-direction:column}
.topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;display:flex;align-items:end;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:1}
.eyebrow{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
h1{font-size:22px;line-height:1.15;margin:2px 0 0}
.status{font-size:12px;color:var(--muted);white-space:nowrap}
.content{width:100%;padding:14px 14px calc(env(safe-area-inset-bottom) + 24px);overflow:auto;-webkit-overflow-scrolling:touch}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
.grid.two,.grid.three{grid-template-columns:1fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h2{font-size:17px;margin:0 0 10px}.card h3{font-size:15px;margin:12px 0 8px}.muted{color:var(--muted);font-size:13px}
.row{display:grid;grid-template-columns:1fr;gap:10px}.row.two,.row.three{grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:5px}.field label{font-size:12px;color:#374151;font-weight:700}.field input,.field select,.field textarea{width:100%;border:1px solid #d1d5db;border-radius:13px;background:#fff;padding:11px 12px;min-height:44px}.field textarea{min-height:90px;resize:vertical}
.seg{display:flex;flex-wrap:wrap;gap:8px}.pill{border:1px solid #d1d5db;background:#fff;border-radius:999px;padding:10px 13px;min-height:42px}.pill.selected{border-color:var(--blue);background:#eff6ff;color:#1d4ed8;font-weight:800}
.btn{border:0;border-radius:14px;background:#111827;color:#fff;padding:12px 14px;min-height:46px;font-weight:800}.btn.secondary{background:#e5e7eb;color:#111827}.btn.danger{background:var(--red)}.btn.green{background:var(--green)}.btn.blue{background:var(--blue)}
.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.list{display:flex;flex-direction:column;gap:10px}.item{border:1px solid var(--line);border-radius:16px;background:#fff;padding:12px}.item-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:9px}.badge{display:inline-flex;align-items:center;border-radius:999px;background:#f3f4f6;padding:6px 9px;font-size:12px;color:#374151;font-weight:700}
.kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi .card{padding:12px}.kpi-num{font-size:28px;font-weight:900}.roof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.roof-card{border:1px solid #d1d5db;border-radius:16px;background:#fff;padding:10px;min-height:128px;text-align:center;display:flex;flex-direction:column;justify-content:space-between;gap:6px}.roof-card.selected{border:3px solid var(--blue);padding:8px;background:#eff6ff}.roof-svg{height:70px}.roof-label{font-weight:900}.small{font-size:12px}.report-preview{white-space:pre-wrap;line-height:1.45;background:#f9fafb;border:1px solid var(--line);border-radius:14px;padding:12px}.warn{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:14px;padding:10px}.ok{background:#ecfdf5;border:1px solid #bbf7d0;color:#065f46;border-radius:14px;padding:10px}.hidden{display:none!important}

/* Phone is the default: under 768px keeps the iPhone-first single-column layout with bottom navigation. */
@media (max-width:390px){.rail{padding-left:5px;padding-right:5px}.rail-btn{min-width:56px;min-height:48px;font-size:18px}.rail-btn span{font-size:8px}h1{font-size:19px}.content{padding-left:10px;padding-right:10px}.roof-grid{grid-template-columns:1fr}}

/* Tablet / iPad: 768px to 1199px uses persistent left navigation and constrained form width. */
@media (min-width:768px){
  .app-shell{flex-direction:row}
  .rail{order:0;width:96px;min-height:100%;padding:calc(env(safe-area-inset-top) + 10px) 8px calc(env(safe-area-inset-bottom) + 8px);flex-direction:column;overflow-x:hidden;overflow-y:auto;box-shadow:4px 0 18px rgba(0,0,0,.18);scroll-snap-type:none}
  .rail-btn{min-width:0;min-height:54px}.rail-btn span{font-size:10px}
  .main{order:0}.content{padding:22px;max-width:920px;margin:0 auto}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.full{grid-template-columns:1fr}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row.two{grid-template-columns:1fr 1fr}.row.three{grid-template-columns:1fr 1fr 1fr}.kpi{grid-template-columns:repeat(4,minmax(0,1fr))}.roof-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Desktop: 1200px and up keeps persistent left navigation and relaxes the constrained form width. */
@media (min-width:1200px){
  .rail{width:104px}.content{padding:28px;max-width:1120px}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
}