@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(../vendor/fonts/barlow-semi-condensed-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(../vendor/fonts/barlow-semi-condensed-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../vendor/fonts/barlow-semi-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../vendor/fonts/barlow-semi-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }
:root { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); color-scheme: light; }
body { margin: 0; font: 14px system-ui, sans-serif; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Layout: one-screen tool — header, tool rail, 2D plan + 3D split, properties panel. Drawing-office palette: cool slate paper, cobalt pen. */
:root {
  --bg: #e9edf0; --panel: #f9fbfc; --ink: #18212a; --muted: #5a6875; --line: #cfd7de;
  --accent: #2153c9; --accent-soft: #dfe8fb; --accent-ink: #ffffff;
  --wall: #26303a; --wall-int: #6b7783; --room: #ffffff; --room-out: #e2e6e9;
  --glass: #3d8fd1; --door: #a8692a; --danger: #c23a2b; --grid: #9fb0be;
  --font-ui: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 6px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #11161b; --panel: #182027; --ink: #e3e9ee; --muted: #93a2af; --line: #2b3640;
  --accent: #7aa2ff; --accent-soft: #1f2d4a; --accent-ink: #0d1420;
  --wall: #dbe2e8; --wall-int: #8d9aa6; --room: #1c252d; --room-out: #151c22;
  --glass: #6cb6f0; --door: #e0a56a; --danger: #ff7a68; --grid: #3f5060; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #11161b; --panel: #182027; --ink: #e3e9ee; --muted: #93a2af; --line: #2b3640;
  --accent: #7aa2ff; --accent-soft: #1f2d4a; --accent-ink: #0d1420;
  --wall: #dbe2e8; --wall-int: #8d9aa6; --room: #1c252d; --room-out: #151c22;
  --glass: #6cb6f0; --door: #e0a56a; --danger: #ff7a68; --grid: #3f5060; color-scheme: dark }

html, body { height: 100%; }
body { margin: 0; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 15px; overflow: hidden; }
#app { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* header */
header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; margin-right: 2px; color: inherit; text-decoration: none; }
.brand .logo { width: 30px; height: 30px; flex: none; }
.lg-a { fill: var(--accent); } .lg-b { fill: none; stroke: var(--accent-ink); stroke-width: 1.6; stroke-linejoin: round; } .lg-c { stroke: var(--accent-ink); stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-txt b { font-size: 19px; font-weight: 700; letter-spacing: .01em; }
.brand-txt span { font-size: 12px; color: var(--muted); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.icon { width: 32px; padding: 5px 0; font-weight: 700; }
.proj-body, .help-body { overflow-y: auto; padding: 20px 16px 40px; }
.proj-wrap, .help-wrap { max-width: 1040px; margin: 0 auto; display: grid; gap: 22px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 8px 0 4px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.02; margin: 0 0 10px; letter-spacing: -.01em; text-wrap: balance; }
.hero p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--muted); max-width: 52ch; }
.hero-art { width: 100%; height: auto; max-width: 100%; }
.ha-line { fill: none; stroke: var(--wall); stroke-width: 3; } .ha-thin { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; } .ha-fill { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; } .ha-roof { fill: var(--accent); }
.starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.start { display: grid; gap: 4px; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 14px 16px; cursor: pointer; color: var(--ink); }
.start:hover { border-color: var(--accent); }
.start b { font-size: 17px; } .start span { color: var(--muted); font-size: 14px; line-height: 1.35; }
.start.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .start.primary span { color: var(--accent-ink); opacity: .85; }
.plist { display: grid; gap: 8px; }
.pitem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 10px 14px; }
.pitem.cur { border-color: var(--accent); }
.pitem h4 { margin: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem .meta { font-family: var(--font-num); font-size: 12px; color: var(--muted); }
.pitem .btns { justify-content: flex-end; }
.pitem .confirm { grid-column: 1 / -1; }
.ptitle { margin: 0 0 8px; font-size: 16px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.privacy { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; line-height: 1.5; max-width: 80ch; }
.help-wrap h3 { margin: 0 0 6px; font-size: 18px; }
.help-wrap ol, .help-wrap ul { margin: 0; padding-left: 20px; line-height: 1.55; }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 15px; }
.keys kbd { font-family: var(--font-num); font-size: 12px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; background: var(--panel); }
.help-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
@media (max-width: 700px) { .hero { grid-template-columns: 1fr; } .hero-art { max-width: 320px; } .brand-txt span { max-width: 14ch; } }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg); }
.seg button { border: 0; background: transparent; padding: 5px 11px; font-weight: 600; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.spacer { flex: 1; }
.btn { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); padding: 5px 11px; font-weight: 600; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.danger { color: var(--danger); }
.status { font-size: 12px; color: var(--muted); font-family: var(--font-num); }
.menu { position: relative; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; display: grid; gap: 2px; min-width: 250px; }
.menu-pop button { text-align: left; border: 0; background: transparent; padding: 7px 9px; border-radius: 4px; }
.menu-pop button:hover { background: var(--accent-soft); }
.menu-pop small { display: block; color: var(--muted); font-size: 12px; }

/* main */
main { min-height: 0; display: grid; grid-template-columns: auto 1fr 300px; }
.rail { display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; background: var(--panel); border-right: 1px solid var(--line); }
.tool { width: 52px; border: 1px solid transparent; background: transparent; border-radius: var(--r); padding: 6px 2px 4px; display: grid; justify-items: center; gap: 1px; font-size: 12px; font-weight: 600; color: var(--muted); }
.tool svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tool kbd { font-family: var(--font-num); font-size: 9px; opacity: .7; }
.tool[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.views { min-width: 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.views[data-view="2d"] { grid-template-columns: 1fr; }
.views[data-view="2d"] #pane3d { display: none; }
.views[data-view="3d"] { grid-template-columns: 1fr; }
.views[data-view="3d"] #pane2d { display: none; }
.pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#pane2d { border-right: 1px solid var(--line); background: var(--bg); }
#plan { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
#pane3d { background: var(--bg); }
#pane3d canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.pane-label { position: absolute; left: 10px; top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); pointer-events: none; }
.pane-tools { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pane-tools select, .pane-tools .btn { font-size: 13px; padding: 3px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.hint { position: absolute; left: 10px; bottom: 8px; right: 10px; font-size: 13px; color: var(--muted); pointer-events: none; text-shadow: 0 0 4px var(--bg); }

/* properties */
aside { background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; padding: 12px 14px 20px; display: grid; align-content: start; gap: 14px; }
aside h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0; font-weight: 600; }
aside h3 { margin: 0; font-size: 20px; font-weight: 700; text-wrap: balance; }
.sec { display: grid; gap: 8px; }
.sec + .sec { border-top: 1px solid var(--line); padding-top: 12px; }
.row { display: grid; grid-template-columns: 1fr 112px; align-items: center; gap: 8px; }
.row label { font-size: 14px; color: var(--muted); }
.row input[type="number"], .row input[type="text"], .row select { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); font-family: var(--font-num); font-size: 13px; font-variant-numeric: tabular-nums; }
.row input[type="text"], .row select { font-family: var(--font-ui); font-size: 14px; }
.row.wide { grid-template-columns: 1fr; }
.row input[type="range"] { width: 100%; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; }
.unit { font-family: var(--font-num); font-size: 12px; color: var(--muted); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 14px; }
.kv span:nth-child(odd) { color: var(--muted); }
.kv span:nth-child(even) { font-family: var(--font-num); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.note { font-size: 13px; color: var(--muted); line-height: 1.4; margin: 0; }
.confirm { border: 1px solid var(--danger); border-radius: var(--r); padding: 8px; display: grid; gap: 8px; font-size: 14px; }
.opts { display: grid; gap: 4px; }
.opt { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--line); background: var(--bg); border-radius: var(--r); padding: 4px 8px; font-size: 14px; color: var(--ink); }
.opt:hover { border-color: var(--accent); }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.glyph { width: 40px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.3; }
.opt[aria-pressed="true"] .glyph { stroke: var(--accent); }
.kv span.warn { color: var(--danger); font-weight: 500; }
.svg-edgehit { stroke: transparent; cursor: move; }
.svg-handle.on { fill: var(--accent); }
.big { font-family: var(--font-num); font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
.arealist { display: grid; gap: 1px; }
.arearow { display: flex; justify-content: space-between; gap: 8px; border: 0; background: transparent; text-align: left; padding: 3px 6px; border-radius: 4px; font-size: 14px; color: var(--ink); }
button.arearow:hover { background: var(--accent-soft); }
.arearow span:last-child { font-family: var(--font-num); font-size: 13px; font-variant-numeric: tabular-nums; }
.arearow.head { font-weight: 700; padding-top: 6px; border-bottom: 1px solid var(--line); }
.arearow.out { color: var(--muted); }
.svg-hole { fill: var(--accent); fill-opacity: .06; stroke: var(--accent); stroke-dasharray: 80 50; cursor: move; }
.svg-hole.sel { fill-opacity: .16; }
.sketch { width: 100%; height: auto; display: block; background: var(--bg); border-radius: var(--r); }
.sx-ground { stroke: var(--muted); stroke-width: 40; }
.sx-slab { fill: var(--wall-int); }
.sx-room { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 25; stroke-dasharray: 120 80; }
.sx-wall { fill: var(--wall); }
.sx-roof { fill: var(--wall); opacity: .75; }
.sx-txt { fill: var(--ink); font-family: var(--font-ui); font-weight: 600; font-size: 520px; text-anchor: middle; }
.sx-num { fill: var(--accent); font-family: var(--font-num); font-size: 440px; text-anchor: middle; }
.sx-lvl { fill: var(--muted); font-family: var(--font-num); font-size: 400px; text-anchor: end; }
.sx-lvlline { stroke: var(--muted); stroke-width: 15; stroke-dasharray: 60 60; }
.lvlhead { display: flex; justify-content: space-between; font-size: 15px; padding-top: 4px; }
.lvlhead span { font-family: var(--font-num); font-size: 13px; color: var(--muted); }
.dlg { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; grid-template-rows: auto 1fr; padding-top: env(safe-area-inset-top, 0px); }
.dlg-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dlg-head h2 { margin: 0; font-size: 20px; }
.dlg-head .note { flex: 1; }
.dlg-body { min-height: 0; display: grid; grid-template-columns: 1fr 340px; }
.dlg-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.dlg-stage canvas { display: block; touch-action: none; cursor: crosshair; }
.dlg-hint { position: absolute; left: 12px; bottom: 10px; right: 12px; color: var(--muted); font-size: 14px; pointer-events: none; text-shadow: 0 0 4px var(--bg); }
.dlg-side { background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; padding: 8px 14px 24px; display: grid; align-content: start; gap: 4px; }
.impstep { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.impstep h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.impstep .num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 13px; display: inline-grid; place-items: center; font-family: var(--font-num); }
.impstep input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filebtn { display: inline-block; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); border-radius: var(--r); padding: 6px 12px; font-weight: 600; cursor: pointer; justify-self: start; }
.imperr { color: var(--danger); font-size: 14px; margin: 0; }
.legend { font-size: 13px; color: var(--muted); margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.lg { display: inline-block; width: 14px; height: 8px; border-radius: 2px; margin-right: 3px; vertical-align: middle; }
.lg.ext { background: rgba(220,40,40,.7); } .lg.int { background: rgba(230,120,20,.7); } .lg.win { background: #1e88e5; } .lg.door { background: #2e7d32; } .lg.op { background: #8e24aa; }
body.dlg-open { overflow: hidden; }
@media (max-width: 860px) { .dlg-body { grid-template-columns: 1fr; grid-template-rows: 55vh auto; overflow-y: auto; } .dlg-side { border-left: 0; border-top: 1px solid var(--line); } }
footer { display: flex; gap: 16px; align-items: center; padding: 4px 16px; font-size: 12px; color: var(--muted); background: var(--panel); border-top: 1px solid var(--line); font-family: var(--font-num); overflow: hidden; white-space: nowrap; }
textarea.json { width: 100%; box-sizing: border-box; min-height: 120px; font-family: var(--font-num); font-size: 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); }

/* 2D drawing classes */
.svg-room { fill: var(--room); stroke: none; }
.svg-room.out { fill: var(--room-out); }
.svg-room.sel { fill: var(--accent-soft); }
.svg-roomlbl { fill: var(--ink); font-family: var(--font-ui); font-weight: 600; text-anchor: middle; }
.svg-roomarea { fill: var(--muted); font-family: var(--font-num); text-anchor: middle; }
.svg-wall { fill: var(--wall-int); stroke: var(--wall); }
.svg-wall.ext { fill: url(#hatch); stroke: var(--wall); }
.svg-wall.sel { stroke: var(--accent); fill: var(--accent); fill-opacity: .55; }
.svg-wallhit { fill: transparent; stroke: none; cursor: move; }
.svg-ghost { fill: none; stroke: var(--muted); stroke-dasharray: 60 50; opacity: .55; }
.svg-win { fill: var(--room); stroke: var(--wall); }
.svg-glass { stroke: var(--glass); }
.svg-door { fill: none; stroke: var(--door); }
.svg-swing { fill: none; stroke: var(--door); stroke-dasharray: 40 30; }
.svg-open.sel .svg-win, .svg-open.sel .svg-door, .svg-open.sel .svg-swing { stroke: var(--accent); }
.svg-openhit { fill: transparent; cursor: ew-resize; }
.svg-handle { fill: var(--panel); stroke: var(--accent); cursor: grab; }
.svg-dim { fill: var(--accent); font-family: var(--font-num); text-anchor: middle; font-weight: 500; }
.svg-dimline { stroke: var(--accent); fill: none; }
.svg-axis { stroke: var(--grid); stroke-dasharray: 200 60 30 60; fill: none; }
.svg-axisb { fill: var(--panel); stroke: var(--grid); }
.svg-axist { fill: var(--muted); font-family: var(--font-ui); text-anchor: middle; dominant-baseline: central; }
.svg-obj { fill: var(--wall-int); fill-opacity: .25; stroke: var(--wall); cursor: move; }
.svg-obj.sel { stroke: var(--accent); fill: var(--accent); fill-opacity: .25; }
.svg-step { fill: none; stroke: var(--wall-int); }
.svg-rail { fill: none; stroke: var(--wall); stroke-dasharray: 60 40; }
.svg-layer { stroke: var(--wall); stroke-opacity: .55; }
.svg-holerail { stroke: var(--wall); stroke-linecap: round; }
.svg-preview { stroke: var(--accent); fill: var(--accent); fill-opacity: .35; }
.svg-snap { fill: none; stroke: var(--accent); }

@media (max-width: 860px) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100%; }
  main { grid-template-columns: 1fr; }
  .rail { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px 16px; }
  .views, .views[data-view] { grid-template-columns: 1fr; height: 62vh; }
  .views[data-view="split"] #pane3d { display: none; }
  aside { border-left: 0; border-top: 1px solid var(--line); padding: 12px 16px 24px; }
  header { padding: 8px 16px; }
  .seg button { padding: 5px 8px; }
  .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* rutenett, målebånd, av/på-knapper */
.svg-grid { stroke: var(--grid); opacity: .45; }
.svg-grid.minor { opacity: .2; }
.svg-measure { stroke: var(--danger); fill: none; }
.svg-measure-pt { fill: var(--panel); stroke: var(--danger); }
.svg-measure-txt { fill: var(--danger); font-family: var(--font-num); text-anchor: middle; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; font-weight: 600; }
.pane-tools .btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* import av flere tegninger */
.sheets { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.sheet { border: 1px solid var(--line); border-radius: var(--r); padding: 6px; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.sheet.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sheet-pick { text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font: inherit; display: flex; flex-direction: column; gap: 2px; }
.sheet-pick b { font-weight: 600; }
.sheet-pick span { color: var(--muted); font-size: 12px; }
.sheet-ctl { display: flex; gap: 4px; align-items: center; }
.sheet-ctl select, .sheet-ctl input { min-width: 0; flex: 1 1 auto; font: inherit; font-size: 13px; padding: 2px 4px; }
.sheet-ctl select { flex: 0 0 auto; }
.sheet-ctl .btn { padding: 2px 8px; }
.src { display: inline-block; font-size: 11px; line-height: 1.4; padding: 0 5px; border-radius: 8px; margin-left: 4px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; vertical-align: middle; }
.src-antatt { background: #fff1d6; color: #8a5a00; }
.src-manuelt { background: var(--bg); color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .src-antatt { background: #3d2f12; color: #f3c46b; } }
:root[data-theme="dark"] .src-antatt { background: #3d2f12; color: #f3c46b; }
.lvlhead { font-weight: 600; margin: 8px 0 2px; }
.note.warn { color: #8a5a00; }
.imp-sketch { width: 100%; height: auto; margin-top: 8px; background: var(--bg); border-radius: var(--r); }
.imp-sketch .sk-floor { stroke: var(--ink); stroke-width: 2; }
.imp-sketch .sk-wall { stroke: var(--muted); stroke-width: 2; }
.imp-sketch .sk-roof { fill: none; stroke: var(--danger); stroke-width: 2; }
.imp-sketch .sk-t { font-size: 9px; fill: var(--muted); font-family: var(--font-num); }
/* takvindu og 1,9 m-linje i planen */
.svg-sky { fill: var(--glass); fill-opacity: .25; stroke: var(--glass); }
.svg-sky.sel { stroke: var(--accent); fill: var(--accent); fill-opacity: .3; }
.svg-sky-x { stroke: var(--glass); opacity: .6; }
.svg-h19 { stroke: var(--danger); opacity: .7; fill: none; }
.svg-h19t { fill: var(--danger); font-family: var(--font-num); opacity: .8; }
.dlg-side { overflow-x: hidden; grid-template-columns: minmax(0, 1fr); }
.impstep { grid-template-columns: minmax(0, 1fr); position: relative; }
.sheet, .sheet-pick { min-width: 0; }
.sheet-pick b, .sheet-pick span { overflow-wrap: anywhere; }

/* retting av vegger i importen */
.edseg { display: flex; width: 100%; }
.edseg button { flex: 1 1 0; font-size: 13px; padding: 5px 4px; }
.edsel { border: 1px solid var(--accent); border-radius: var(--r); padding: 8px; display: grid; gap: 6px; background: var(--accent-soft); }
.edsel b { font-weight: 600; }

/* melding øverst: konflikter, ny versjon, sikkerhetskopi */
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; background: #fff4d6; color: #4a3500; border-bottom: 1px solid #e8c56b; font-size: 14px; }
.banner span { flex: 1 1 260px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .banner { background: #3a2e10; color: #f5dc9a; border-color: #6b5420; } }
:root[data-theme="dark"] .banner { background: #3a2e10; color: #f5dc9a; border-color: #6b5420; }
.pitem .meta.warn { color: #8a5a00; }
.ptitle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.histlist { grid-column: 1 / -1; display: grid; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.histrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.histrow span { flex: 1 1 200px; }

.checkbox { border: 1px solid var(--line); border-radius: var(--r); padding: 8px; display: grid; gap: 6px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.checks li::before { content: '✓ '; color: #2e7d32; font-weight: 700; }
.checks li.warn::before { content: '⚠ '; color: #b26a00; }
.checks li.warn { color: #8a5a00; }

.svg-roofline { fill: none; stroke: var(--muted); opacity: .45; }
.sec h3.subhead { margin: 12px 0 4px; font-size: 14px; }
.svg-room.stale { stroke: var(--danger); stroke-dasharray: 60 40; }
.arearow.sub { font-size: 12px; color: var(--muted); padding-left: 10px; }

.layers { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; margin: 6px 0; font-size: 12px; }
.layers .lside { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 2px 0; }
.layers .layer { display: grid; grid-template-columns: 14px 1fr auto; gap: 6px; align-items: center; padding: 2px 0; }
.layers .sw { width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,.2); }
.layers .num { font-variant-numeric: tabular-nums; color: var(--muted); }
.typeedit { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; }
.layerrow { display: grid; grid-template-columns: 1fr 64px auto auto auto; gap: 4px; align-items: center; margin: 3px 0; }
.layerrow select, .layerrow input { min-width: 0; }
.layerrow .btn { padding: 2px 8px; }