/* Halawi Lens: application styles on top of the shared Halawi design system */

/* ---------- themes: outdoor high contrast and red night mode ---------- */
html[data-theme="outdoor"] {
  --bg: #ffffff; --bg-1: #ffffff; --bg-2: #ffffff; --bg-3: #f2f2f2; --bg-4: #e4e4e4;
  --glass: #ffffff; --glass-2: #f4f4f4; --glass-3: #e8e8e8;
  --line: #9a9a9a; --line-2: #6b6b6b; --line-3: #333333;
  --text: #000000; --text-2: #111111; --muted: #2b2b2b; --dim: #4a4a4a;
  --accent: #5a00c8; --accent-bg: rgba(90,0,200,.12); --accent-line: #5a00c8;
  --ok: #006b3c; --warn: #8a4b00; --bad: #b00010;
  --focus: 0 0 0 3px #000; --shadow: 0 2px 10px rgba(0,0,0,.25);
  color-scheme: light;
}
html[data-theme="outdoor"] body { font-weight: 500; }
html[data-theme="outdoor"] body::before { display: none; }
html[data-theme="outdoor"] .panel, html[data-theme="outdoor"] .kp, html[data-theme="outdoor"] .input, html[data-theme="outdoor"] .btn, html[data-theme="outdoor"] .qchip, html[data-theme="outdoor"] .cx { border-width: 2px; }
html[data-theme="outdoor"] .kp-v, html[data-theme="outdoor"] .rows dd { font-weight: 700; }
html[data-theme="outdoor"] .btn--primary { background: #000; color: #fff; border-color: #000; box-shadow: none; }
html[data-theme="outdoor"] .grad-text { background: none; color: #000; }
html[data-theme="outdoor"] .sb-mark { background: #000; box-shadow: none; }
html[data-theme="outdoor"] .sb-link.on { background: #000; color: #fff; }
html[data-theme="outdoor"] .sb-link.on .ic { color: #fff; }
html[data-theme="outdoor"] .seg button.on { background: #000; color: #fff; }
html[data-theme="night"] {
  --bg: #000000; --bg-1: #070000; --bg-2: #0c0000; --bg-3: #140000; --bg-4: #1e0000;
  --glass: rgba(255,0,0,.03); --glass-2: rgba(255,0,0,.05); --glass-3: rgba(255,0,0,.08);
  --line: rgba(255,40,40,.14); --line-2: rgba(255,40,40,.22); --line-3: rgba(255,40,40,.32);
  --text: #ff3b30; --text-2: #e0322a; --muted: #b0261f; --dim: #801b16;
  --accent: #ff4a3d; --accent-bg: rgba(255,40,40,.12); --accent-line: rgba(255,40,40,.5);
  --ok: #ff5a4a; --warn: #ff7a50; --bad: #ff2a2a; --info: #ff5a4a;
  --violet: #b01010; --magenta: #c01818; --coral: #e02020; --grad: linear-gradient(100deg, #8a0000, #c01010);
  --focus: 0 0 0 2px rgba(255,60,60,.7); --shadow: 0 10px 30px -12px rgba(0,0,0,.9);
  color-scheme: dark;
}
html[data-theme="night"] body::before { display: none; }
html[data-theme="night"] img { filter: grayscale(1) brightness(.55); }
html[data-theme="night"] .btn--primary { background: #3a0000; color: #ff4a3d; border-color: #6a0000; box-shadow: none; }
html[data-theme="night"] .grad-text { background: none; color: var(--text); }
html[data-theme="night"] .sb-mark { background: #300000; box-shadow: none; }
.night-filter { display: none; position: fixed; inset: 0; background: #f00; mix-blend-mode: multiply; pointer-events: none; z-index: 9999; }
html[data-theme="night"] .night-filter { display: block; }

/* ---------- shell ---------- */
.mobile-only { display: none !important; }
.content { padding: 18px 22px 48px; scroll-padding-top: 12px; }
.content > .view-host { max-width: 1320px; margin: 0 auto; animation: fadeUp .2s ease both; }
.icon-btn.on { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }
.unit-t { font: 600 12px/1 var(--f-ui); letter-spacing: .02em; }
.sb-backup b .ic { width: 14px; height: 14px; vertical-align: -2px; }
.scrim { display: none; }
.ctxbar { display: flex; gap: 6px; padding: 7px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-1) 70%, transparent); overflow-x: auto; scrollbar-width: none; flex: none; min-width: 0; }
.ctxbar::-webkit-scrollbar { display: none; }
.cx { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; text-align: left; flex: none; max-width: 300px; }
.cx:hover { border-color: var(--line-3); }
.cx .ic { color: var(--accent); }
.cx span { display: flex; flex-direction: column; min-width: 0; }
.cx b { font: 600 13px/1.2 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cx small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx--cam { max-width: 340px; }
.bottomnav { display: none; }
.modal--lg { max-width: 860px; }
.modal--picker .modal-bd { padding-top: 10px; }
#print-host { display: none; }

/* ---------- view header ---------- */
.view-h { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.vh-t { flex: 1; min-width: 240px; }
.vh-t h1 { font-size: 24px; margin-top: 4px; }
.vh-intro { margin: 6px 0 0; color: var(--text-2); max-width: 760px; font-size: 13.5px; }
.view-h > .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.calc-tabs { margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.calc-tabs::-webkit-scrollbar { display: none; }
.calc-tabs .seg button { padding: 8px 14px; font-size: 13px; white-space: nowrap; }

/* ---------- calculator layout ---------- */
.calc-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); grid-template-areas: "in kpis" "in out"; gap: 14px; align-items: start; }
.calc-kpis { grid-area: kpis; min-width: 0; }
.calc-in { grid-area: in; position: sticky; top: 0; max-height: calc(100dvh - 160px); overflow: auto; }
.calc-out { grid-area: out; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.calc-out:empty { display: none; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.calc-in .fgrid { grid-template-columns: minmax(0, 1fr); }
.fgrid--modal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld--full { grid-column: 1 / -1; }
.fld-l { font: 500 12px/1.2 var(--f-ui); color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fld-l em { font-style: normal; color: var(--muted); font-weight: 400; }
.ctx-tag { font: 500 9.5px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 4px; padding: 2px 4px; }
.fld-h { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.fld-in { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); overflow: hidden; }
.fld-in:focus-within { border-color: var(--accent-line); box-shadow: var(--focus); }
.fld-in .input { border: 0; border-radius: 0; height: 44px; font: 600 16px var(--f-data); font-variant-numeric: tabular-nums; text-align: center; background: transparent; min-width: 0; flex: 1; box-shadow: none; }
.fld-in .input:focus { box-shadow: none; }
.fld-in .pre { display: grid; place-items: center; padding-left: 4px; color: var(--muted); font: 600 14px var(--f-ui); }
.stp { width: 46px; flex: none; border: 0; background: var(--glass-2); color: var(--text-2); cursor: pointer; display: grid; place-items: center; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.stp:hover { background: var(--glass-3); color: var(--text); }
.stp:active { background: var(--accent-bg); color: var(--accent); }
.stp .ic { width: 18px; height: 18px; }
select.input { height: 44px; font-size: 14px; }
.fld > select.input { text-align: left; }
.fld input[type="date"].input, .fld input[type="time"].input { text-align: left; padding: 0 12px; }
.qchips { display: flex; gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
.qchips::-webkit-scrollbar { display: none; }
.qchips--wrap { flex-wrap: wrap; overflow: visible; }
.qchip { flex: none; min-height: 32px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--glass); color: var(--text-2); font: 500 12.5px/1.15 var(--f-data); font-variant-numeric: tabular-nums; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none !important; }
.qchip small { font-size: 10.5px; color: var(--muted); }
.qchip:hover { border-color: var(--line-3); color: var(--text); }
.qchip.on { background: var(--accent-bg); border-color: var(--accent-line); color: var(--text); }
.seg--fld { display: flex; width: 100%; }
.seg--fld button { flex: 1; justify-content: center; min-height: 38px; padding: 6px 8px; font-size: 12.5px; text-align: center; }
.fld--check { justify-content: center; }
.fld--check .switch { min-height: 36px; }
.fsec { grid-column: 1 / -1; font: 600 11px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--line); margin-top: 2px; }
.fnote { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.ctx-pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; text-align: left; }
.ctx-pick:hover { border-color: var(--accent-line); }
.ctx-pick > .ic:first-child { color: var(--accent); width: 20px; height: 20px; }
.cp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-t b { font: 600 14px/1.25 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-t small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lchips::-webkit-scrollbar { display: none; }
.lchip { flex: none; min-width: 52px; min-height: 44px; padding: 4px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 600 14px/1.1 var(--f-ui); font-variant-numeric: tabular-nums; }
.lchip small { font: 500 10.5px var(--f-data); color: var(--muted); }
.lchip.on { background: var(--accent-bg); border-color: var(--accent-line); }

/* ---------- results ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kp { text-align: left; padding: 13px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--glass); cursor: copy; min-width: 0; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s; }
.kp:hover { border-color: var(--line-3); }
.kp-l { font: 500 10.5px/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.kp-v { font: 600 22px/1.15 var(--f-ui); letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kp-s { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.kp--main { border-color: var(--accent-line); background: linear-gradient(160deg, var(--accent-bg), transparent 70%); }
.kp.ok .kp-v { color: var(--ok); } .kp.warn .kp-v { color: var(--warn); }
.rows { margin: 0; display: grid; gap: 0; }
.rw { display: flex; gap: 12px; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); align-items: baseline; }
.rw:last-child { border-bottom: 0; }
.rw dt { color: var(--text-2); font-size: 13px; min-width: 0; }
.rw dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; cursor: copy; overflow-wrap: anywhere; }
.rows-sep { height: 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.tbl-wrap { overflow-x: auto; max-width: 100%; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl thead th { font: 500 10.5px var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--glass); position: sticky; top: 0; }
.tbl tbody th { font-weight: 500; }
.tbl tr.on th, .tbl tr.on td { background: var(--accent-bg); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl--compact th, .tbl--compact td { padding: 7px 10px; }
.tbl--hf td { padding: 4px 4px; }
.tbl-sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.cellbtn { width: 100%; min-height: 36px; border: 1px solid transparent; border-radius: 7px; background: none; cursor: pointer; padding: 4px 8px; font-variant-numeric: tabular-nums; }
.cellbtn:hover { border-color: var(--accent-line); background: var(--accent-bg); }
.callout--sm { padding: 10px 12px; font-size: 13px; }
.callout--sm > div { min-width: 0; }
.notes { display: flex; flex-direction: column; gap: 6px; }
.notes p { display: flex; gap: 8px; margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.notes p .ic { margin-top: 2px; flex: none; }
.apply-row { display: flex; }
.empty { color: var(--muted); padding: 18px; text-align: center; margin: 0; }
.empty-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 20px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--muted); text-align: center; }
.empty-card .ic { width: 28px; height: 28px; }
.sm { font-size: 12px; }
.btn--block { width: 100%; justify-content: center; min-height: 42px; }
.stack { display: flex; flex-direction: column; gap: 8px; }

/* ---------- diagrams ---------- */
.dg-panel .panel-bd { padding: 10px; }
.dg { width: 100%; height: auto; display: block; font-family: var(--f-data); }
.dg + .dg { margin-top: 10px; }
.dg-bg { fill: var(--bg-2); }
.dg-zs0 { stop-color: var(--accent); stop-opacity: .14; } .dg-zs1 { stop-color: var(--accent); stop-opacity: .42; }
.dg-edge { stroke: var(--accent); stroke-width: 2; }
.dg-arrow { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.dg-axis { stroke: var(--line-3); stroke-width: 1.5; }
.dg-tick { stroke: var(--line-3); }
.dg-tl { fill: var(--muted); font-size: 11px; }
.dg-lb { fill: var(--text); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dg-lb--f { fill: var(--accent); }
.dg-focus { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.dg-person path, .dg-person ellipse { fill: var(--text-2); opacity: .85; }
.dg-person--lg path, .dg-person--lg ellipse { opacity: .7; }
.dg-cam rect, .dg-cam path { fill: var(--text-2); }
.dg-warn { fill: var(--warn); font-size: 12px; font-weight: 600; }
.dg-ground { stroke: var(--line-3); stroke-width: 1.5; }
.dg-mask { fill: var(--bg); opacity: .62; }
.dg-frm { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.dg-guide { stroke: var(--accent); stroke-opacity: .45; stroke-width: 1; }
.dg-cone { fill: var(--accent); fill-opacity: .15; stroke: var(--accent); stroke-opacity: .6; }
.dg-arc { fill: none; stroke: var(--text-2); stroke-width: 1.2; }
.dg-s0 { fill: var(--glass-3); stroke: var(--line-3); stroke-width: 1.5; }
.dg-s1 { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 1.5; }
.dg-s2 { fill: none; stroke: var(--text); stroke-width: 2; stroke-dasharray: 5 4; }
.dg-t2 { fill: var(--text); }
.dg-oval { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.dg-crop { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.dg-gold { fill: #e8a33d; fill-opacity: .16; } .dg-blue { fill: #5a7dff; fill-opacity: .16; }
.dg-goldt { fill: #c98a2b; } .dg-bluet { fill: #6f8bff; }
.dg-grid { stroke: var(--line); fill: none; }
.dg-axisc { stroke: var(--line-3); fill: none; }
.dg-curve { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.dg-now { stroke: var(--text-2); stroke-dasharray: 3 4; }
.dg-sundot { fill: #f2b84b; stroke: var(--bg); stroke-width: 2; }
.dg-rise { fill: #e8a33d; } .dg-set { fill: #ea6a5a; }
html[data-theme="night"] .dg-gold, html[data-theme="night"] .dg-blue { fill: #ff2a2a; fill-opacity: .1; }
html[data-theme="night"] .dg-goldt, html[data-theme="night"] .dg-bluet, html[data-theme="night"] .dg-sundot, html[data-theme="night"] .dg-rise, html[data-theme="night"] .dg-set { fill: var(--text); }
.split { display: flex; margin-top: 8px; border-radius: 8px; overflow: hidden; font: 600 12px/1 var(--f-ui); }
.split span { padding: 8px 10px; background: var(--accent-bg); min-width: 0; white-space: nowrap; }
.split span + span { background: var(--glass-3); text-align: right; }
.sun-dgs { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 10px; align-items: start; }
.sun-dgs .dg + .dg { margin-top: 0; }

/* ---------- library views ---------- */
.lib > .panel, .lib > section { margin-bottom: 14px; }
.cur-cam-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: center; }
.cur-cam-in h3 { font-size: 18px; margin: 4px 0; }
.cur-cam-in p { margin: 2px 0; }
.pick-top { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.search { position: relative; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search .input { padding-left: 36px; height: 44px; font-size: 15px; }
.chipsel { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chipsel::-webkit-scrollbar { display: none; }
.cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.pick-list { display: flex; flex-direction: column; gap: 10px; }
.pick-ft { margin-top: 12px; }
.cam { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--glass); overflow: hidden; min-width: 0; }
.cam header { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.cam header > div { flex: 1; min-width: 0; }
.cam header b { font: 600 14px var(--f-ui); display: block; }
.cam header small { color: var(--muted); font-size: 11.5px; text-transform: capitalize; }
.cam header .acts { display: flex; gap: 4px; }
.modes { display: flex; flex-direction: column; }
.mode { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 4px 10px; align-items: center; padding: 9px 14px; min-height: 44px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; width: 100%; }
.mode:last-child { border-bottom: 0; }
.mode:hover { background: var(--glass-2); }
.mode.on { background: var(--accent-bg); }
.mode .ic { color: var(--accent); }
.mode-n { font-weight: 500; font-size: 13px; min-width: 0; }
.mode-d { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.cam footer { display: flex; gap: 8px; padding: 9px 14px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); background: var(--glass); }
.cam footer .ic { flex: none; margin-top: 1px; }
.kit-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.kit-tabs .qchip { flex-direction: row; gap: 6px; min-height: 38px; }
.lenses { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.lens { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 6px 4px 4px; background: var(--glass); }
.lens.on { border-color: var(--accent-line); background: var(--accent-bg); }
.lens-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 2px 12px; text-align: left; padding: 8px 10px; border: 0; background: none; cursor: pointer; border-radius: 9px; }
.lens-main:hover { background: var(--glass-2); }
.lens-f { font: 600 16px var(--f-ui); grid-row: span 2; align-self: center; font-variant-numeric: tabular-nums; }
.lens-n { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lens-m { font-size: 12px; color: var(--muted); min-width: 0; }
.lens .acts { display: flex; align-items: center; gap: 4px; }
.proj-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.proj-side { display: flex; flex-direction: column; gap: 14px; }
.toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.setups { display: flex; flex-direction: column; gap: 10px; }
.setup { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--glass); overflow: hidden; }
.setup header { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 14px; border-bottom: 1px solid var(--line); }
.setup-id { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.setup-id b { font: 600 14px var(--f-ui); }
.setup-id span { color: var(--text-2); font-size: 13px; }
.setup header .acts { display: flex; gap: 2px; }
.setup-bd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; padding: 12px 14px; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; }
.setup-bd:hover { background: var(--glass-2); }
.sg { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sg em { font: 500 10px var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-style: normal; }
.sg--full { grid-column: 1 / -1; }
.proj-list { display: flex; flex-direction: column; max-height: 320px; overflow: auto; }
.proj-i { display: flex; flex-direction: column; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; min-height: 48px; }
.proj-i:hover { background: var(--glass-2); }
.proj-i.on { background: var(--accent-bg); }
.proj-i small { color: var(--muted); font-size: 11.5px; }
.snaps { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.snap { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.snap > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.snap small { color: var(--muted); font-size: 11.5px; }
.snap .acts { display: flex; gap: 4px; align-items: center; }
ul.plain { list-style: none; padding: 0; margin: 8px 0 14px; display: flex; flex-direction: column; gap: 6px; }
ul.plain li { display: flex; gap: 8px; align-items: center; }
.ack { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; cursor: pointer; }
.ack input { margin-top: 3px; flex: none; }
.help h4 { font-size: 13px; margin: 14px 0 8px; color: var(--text-2); }
.help h4:first-child { margin-top: 0; }
.help ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.fx { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fx > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.fx dt { color: var(--text-2); font-size: 13px; }
.fx dd { margin: 0; }
.fx code { font-family: var(--f-mono); font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.src li { color: var(--muted); }
.ref-toc { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ref-toc .qchip { flex-direction: row; }
.ref section { scroll-margin-top: 12px; }
.report .rows { max-width: 720px; }

/* ---------- desktop sizes ---------- */
@media (max-width: 1360px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .calc-grid { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .cur-cam-in { grid-template-columns: minmax(0, 1fr); }
  .proj-grid { grid-template-columns: minmax(0, 1fr); }
  .sun-dgs { grid-template-columns: minmax(0, 1fr); }
  .sun-dgs .dg-polar { max-width: 260px; margin: 0 auto; }
}

/* ---------- mobile: one handed, large targets ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 284px; max-width: 86vw; z-index: 180; transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow); }
  .app.sb-open .sidebar { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 170; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app.sb-open .scrim { opacity: 1; pointer-events: auto; }
  .app.sb-collapsed .sb-name, .app.sb-collapsed .sb-proj .t, .app.sb-collapsed .sb-link span, .app.sb-collapsed .sb-backup, .app.sb-collapsed .sb-legal, .app.sb-collapsed .sb-logo img { display: revert; }
  .app.sb-collapsed .sb-grp { display: block; height: auto; padding: 14px 10px 6px; }
  .app.sb-collapsed .sb-link { justify-content: flex-start; padding: 7px 10px; }
  .sb-link { min-height: 44px; }
  .sb-close { margin-left: auto; }
  .mobile-only { display: inline-grid !important; }
  .desk-only { display: none !important; }
  .cmdk-btn { display: none; }
  .crumbs { min-width: 0; overflow: hidden; }
  .crumbs a, .crumbs .sep { display: none; }
  .crumbs b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .save-ind span { display: none; }
  .save-ind { padding: 6px 4px; }
  .topbar { gap: 2px; padding: 0 6px; }
  .topbar .icon-btn { width: 40px; height: 40px; }
  .ctxbar { padding: 6px 10px; }
  .cx { min-height: 44px; padding: 4px 10px; }
  .cx--cam { max-width: 220px; }
  .content { padding: 12px 12px calc(88px + env(safe-area-inset-bottom)); }
  .bottomnav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg-1) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line-2); }
  .bottomnav a, .bottomnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; border: 0; background: none; border-radius: 10px; color: var(--muted); font: 500 11px var(--f-ui); text-decoration: none !important; cursor: pointer; }
  .bottomnav .ic { width: 22px; height: 22px; }
  .bottomnav .on { color: var(--accent); background: var(--accent-bg); }
  .view-h { margin-bottom: 10px; gap: 10px; }
  .vh-t { min-width: 0; flex-basis: 100%; }
  .vh-t h1 { font-size: 20px; }
  .vh-intro { font-size: 12.5px; }
  .view-h > .acts { width: 100%; }
  .calc .view-h > .acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .calc .view-h > .acts .btn, .calc .view-h > .acts .icon-btn { width: 100%; justify-content: center; min-height: 42px; height: 42px; }
  .calc .view-h > .acts .btn .t { display: none; }
  .calc-tabs .seg { display: flex; min-width: 100%; }
  .calc-tabs .seg button { flex: 1 0 auto; justify-content: center; min-height: 40px; }
  .calc-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kpis" "in" "out"; gap: 12px; }
  .calc-kpis { position: sticky; top: -12px; z-index: 5; margin: -12px -12px 0; padding: 12px 12px 8px; background: linear-gradient(var(--bg) 85%, transparent); }
  .calc-in { position: static; max-height: none; overflow: visible; }
  .kpis { gap: 8px; }
  .kp { padding: 10px 11px; gap: 2px; }
  .kp-v { font-size: 18px; }
  .kp--main .kp-v { font-size: 20px; }
  .kp-s { font-size: 11px; }
  .calc-in .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .calc-in .fld:has(.qchips), .calc-in .fld:has(select), .calc-in .fld:has(.seg) { grid-column: 1 / -1; }
  .fgrid--modal { grid-template-columns: minmax(0, 1fr); }
  .fld-in .input { height: 48px; font-size: 17px; }
  .stp { width: 52px; }
  .qchip { min-height: 38px; padding: 4px 12px; font-size: 13px; }
  .panel-hd { padding: 11px 13px; }
  .panel-bd { padding: 13px; }
  .tbl th, .tbl td { padding: 9px 9px; }
  .cam-grid { grid-template-columns: minmax(0, 1fr); }
  .setup-bd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lens-main { grid-template-columns: minmax(0, 1fr); }
  .lens-f { grid-row: auto; }
  .fx > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .modal-wrap { padding: 8px; align-items: flex-end; }
  .modal { max-height: calc(100dvh - 16px); border-radius: 16px; }
  .modal-ft { flex-wrap: wrap; }
  .modal-ft .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .kbd-grid { grid-template-columns: minmax(0, 1fr); }
  .banner { padding: 8px 12px; font-size: 12.5px; }
  .banner .acts { margin-left: 0; }
  .ctx-i { min-height: 44px; }
  #toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 400px) {
  .topbar [data-act="outdoor"] { display: none; }
  .mode { grid-template-columns: minmax(0, 1fr) 18px; }
  .mode-d { grid-column: 1; grid-row: 2; text-align: left; }
  .mode .ic { grid-row: 1 / span 2; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ---------- print: camera report sheets ---------- */
@media print {
  @page { size: A4; margin: 14mm; }
  :root, html[data-theme] { color-scheme: light !important; }
  html, body { height: auto; overflow: visible; background: #fff !important; color: #000 !important; }
  body::before, .night-filter { display: none !important; }
  body.printing .app, body.printing #modals, body.printing #toasts, body.printing .boot { display: none !important; }
  body.printing #print-host { display: block !important; }
  body:not(.printing) .sidebar, body:not(.printing) .topbar, body:not(.printing) .ctxbar, body:not(.printing) .bottomnav, body:not(.printing) #banners, body:not(.printing) .calc-in, body:not(.printing) .view-h .acts { display: none !important; }
  body:not(.printing) .app { display: block; height: auto; }
  body:not(.printing) .content { overflow: visible; }
  .pr-sheet { page-break-after: always; break-after: page; font: 11pt/1.4 'Inter', Arial, sans-serif; color: #000; }
  .pr-sheet:last-child { page-break-after: auto; break-after: auto; }
  .pr-hd { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 12px; }
  .pr-hd img { filter: none !important; width: 36px; height: 36px; object-fit: contain; }
  .pr-hd > div { display: flex; flex-direction: column; }
  .pr-hd b { font-size: 14pt; }
  .pr-hd span { font-size: 9pt; color: #444; text-transform: uppercase; letter-spacing: .08em; }
  .pr-id { margin-left: auto; text-align: right; }
  .pr-sheet h2 { font: 600 15pt 'Lexend', Arial, sans-serif; margin: 0 0 10px; color: #000; }
  .pr-tbl { width: 100%; border-collapse: collapse; }
  .pr-tbl th, .pr-tbl td { border: 1px solid #999; padding: 6px 9px; text-align: left; vertical-align: top; }
  .pr-tbl th { width: 34%; background: #f1f1f1; font-weight: 600; }
  .pr-ft { margin-top: 14px; font-size: 8.5pt; color: #333; border-top: 1px solid #999; padding-top: 6px; }
}
.panel-hd h3 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.panel-hd h3 .ic { color: var(--accent); }

.sb-modes { display: none; gap: 8px; margin-bottom: 10px; }
.sb-modes .btn { flex: 1; justify-content: center; min-height: 44px; }
.sb-modes .btn.on { border-color: var(--accent); color: var(--text); }
@media (max-width: 860px) { .sb-modes.mobile-flex { display: flex; } }

@media print { html, body, body.printing { background: #fff !important; } .night-filter { display: none !important; } }