/* Animeret KNX-logo i selve login-boksen (tegner sig selv ved visning). */ #authSplash { display:block; max-width:280px; margin:0 auto 2px; } #authSplash .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:adraw .5s ease forwards} #authSplash .k1{animation-delay:0s}#authSplash .k2{animation-delay:.15s}#authSplash .k3{animation-delay:.3s} #authSplash .n1{animation-delay:.5s}#authSplash .n2{animation-delay:.65s}#authSplash .n3{animation-delay:.8s} #authSplash .x1{animation-delay:1.1s}#authSplash .x2{animation-delay:1.25s} #authSplash .ag{stroke-dasharray:1;stroke-dashoffset:1;animation:adraw .75s ease 1.6s forwards} #authSplash .ab{stroke-dasharray:1;stroke-dashoffset:1;animation:adraw .4s ease 2.35s forwards} #authSplash .wm{opacity:0;animation:awfade .55s ease 2.85s forwards} @keyframes adraw{to{stroke-dashoffset:0}} @keyframes awfade{to{opacity:1}} @keyframes authReveal{to{opacity:1}} @keyframes logoShrink{from{transform:scale(1.5)}to{transform:scale(1)}} :root { --bg:#f4f6fb; --surface:#ffffff; --surface-2:#f0f3f9; --border:#dde3ee; --text:#1f2733; --muted:#6b7686; --accent:#2f6df6; --accent-hover:#235ad1; --accent-soft:#e7efff; --ok:#1f9d57; --ok-soft:#e3f6ea; --danger:#e2536b; --danger-soft:#fde8ec; --addr:#b25a00; --shadow:0 1px 3px rgba(20,30,60,.08); } * { box-sizing: border-box; } body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); font-size:13px; } header { background:var(--surface); padding:9px 16px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--border); box-shadow:var(--shadow); height:56px; } header h1 { font-size:16px; margin:0; color:var(--accent); font-weight:700; } header label { color:var(--muted); font-size:12px; } header input { background:var(--surface); border:1px solid var(--border); color:var(--text); padding:5px 9px; border-radius:6px; } header input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* ── Sleek top-menu ── */ .brand { display:flex; align-items:center; gap:5px; font-weight:800; font-size:15px; color:var(--accent); white-space:nowrap; letter-spacing:.2px; } .brand span { background:linear-gradient(90deg,var(--accent),#7aa0ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .proj-name-wrap { position:relative; display:inline-flex; align-items:center; } .proj-name { width:180px; font-weight:600; background:var(--surface-2); border:1px solid var(--border); padding:6px 26px 6px 10px; border-radius:8px; } .proj-name-icon { position:absolute; right:8px; font-size:12px; pointer-events:none; opacity:.5; transition:opacity .15s, color .15s; } .proj-name-icon.active { opacity:1; } .proj-name:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px; } .seg button { background:transparent; color:var(--muted); border:none; padding:6px 13px; border-radius:7px; font-weight:600; font-size:12px; box-shadow:none; } .seg button:hover { background:var(--surface); color:var(--text); } .seg button.active { background:var(--accent); color:#fff; box-shadow:0 1px 3px rgba(20,40,90,.18); } .hdiv { width:1px; height:24px; background:var(--border); margin:0 3px; flex:0 0 auto; } .hdr-spacer { flex:1; } header button.ico { padding:7px 9px; } .lang { background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:6px 9px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; } .lang:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .user-btn { max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } button { background:var(--accent); color:#fff; border:none; padding:6px 12px; border-radius:6px; cursor:pointer; font-weight:600; font-size:12px; transition:background .15s, box-shadow .15s; } button:hover { background:var(--accent-hover); } button.ghost { background:var(--surface-2); color:var(--text); border:1px solid var(--border); } button.ghost:hover { background:#e6ebf4; } button.danger { background:var(--danger); } button.danger:hover { background:#cf3f57; } .cols { display:grid; grid-template-columns: 1fr 1.4fr 1fr; gap:12px; padding:12px; height: calc(100vh - 96px); } .bcols { display:grid; grid-template-columns: 2fr 1fr; gap:12px; padding:12px; height: calc(100vh - 96px); } .vcols { display:grid; grid-template-columns: 1fr 1fr; gap:12px; padding:12px; height: calc(100vh - 96px); } /* Fane-skifter til to-pane-visningen — kun synlig på mobil (se @media nedenfor) */ .vtabs { display:none; } .vtab { flex:1; border:1px solid var(--border); background:var(--surface-2); color:var(--muted); font:700 14px system-ui; padding:11px 8px; border-radius:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; } .vtab.active { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(79,107,255,.35); } /* Touch-drag: undgå iOS-tekst-callout/markering når man holder på et trække-element */ .vcols [draggable="true"], .cols [draggable="true"] { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; } /* In-app popup (erstatter native confirm/alert/prompt) */ .ui-modal-bg{position:fixed;inset:0;z-index:6000;background:rgba(10,15,30,.45); display:flex;align-items:center;justify-content:center;padding:16px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .ui-modal-card{background:var(--surface);color:var(--text);border-radius:16px;padding:22px 22px 18px; max-width:440px;width:100%;box-sizing:border-box;box-shadow:0 24px 70px rgba(0,0,0,.5);animation:uiPop .16s ease} @keyframes uiPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}} .ui-modal-title{font-weight:700;font-size:17px;margin-bottom:8px} .ui-modal-msg{font-size:14px;line-height:1.5} .ui-modal-input{width:100%;box-sizing:border-box;margin-top:12px;padding:11px 12px;border:1px solid var(--border); border-radius:9px;background:var(--surface-2);color:var(--text);font-size:16px} .ui-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px} .ui-modal-btn{padding:9px 16px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2); color:var(--text);font:600 14px system-ui;cursor:pointer} .ui-modal-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .ui-modal-btn.danger{background:var(--danger,#e0322f);border-color:var(--danger,#e0322f);color:#fff} /* Deaktiverede knapper i scan-modalen: tydeligt nedtonet (også den primære blå) */ #scanModal .modal-actions button:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; background:var(--surface-2); color:var(--muted); border-color:var(--border); } .vsp { margin:1px 0; } .vsp-row { display:flex; align-items:center; gap:6px; padding:5px 6px; font-weight:700; font-size:13px; color:var(--text); } .vsp-row .sp-meta { margin-left:auto; font-weight:400; color:var(--muted); font-size:11px; } .vsp-kids { margin-left:13px; border-left:1px solid var(--border); padding-left:5px; } .vdev { margin:3px 0 5px 13px; } .vdev-head { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text); padding:3px 6px; } .vio { display:flex; align-items:center; gap:7px; font-size:12px; padding:3px 8px 3px 26px; border-radius:6px; cursor:grab; } .vio:hover { background:var(--accent-soft); } .vio-sub { padding-left:46px; font-size:11px; opacity:.85; } .vio-sub:hover { opacity:1; } .vio .sub { color:var(--muted); } .vio-fn { font-size:11px; color:var(--accent); padding:1px 8px 2px 42px; font-weight:600; } .vio .tag { margin-left:auto; font-size:10px; padding:1px 7px; border-radius:5px; } .vio .tag.out { background:rgba(45,160,120,.20); color:#5dcaa5; } .vio .tag.in { background:rgba(230,160,40,.20); color:#e0a83a; } .vfn { border:1px solid var(--border); border-radius:8px; padding:7px 9px; margin:5px 0 5px 13px; } .vfn-pending { border-style:dashed; opacity:.92; background:var(--soft,#fafbff); } .vfn.vfn-drop { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--accent-soft); } /* Træk-match-hint: funktionsblokke der PASSER til den trukne instans løftes frem, resten grånedtones — så man visuelt ser fx at en temp matcher heat, ikke light. */ .vfn-match { border-color:var(--accent)!important; box-shadow:0 0 0 2px var(--accent); transition:box-shadow .12s,opacity .12s; } .vfn-nomatch { opacity:.30; filter:grayscale(.75); transition:opacity .12s,filter .12s; } .sp-drop-hi { outline:2px dashed var(--accent); outline-offset:-2px; background:var(--accent-soft); border-radius:6px; } .vfn-head { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; } .vfn-slot { font-size:11px; color:var(--muted); border:1px dashed var(--border); border-radius:6px; padding:5px 9px; margin-top:5px; } .vfn-slot.filled { border-style:solid; border-color:var(--accent); background:var(--accent-soft); } .vfn-slot-hd { font-weight:600; color:var(--text); } .vfn-rel { padding:2px 0 0 18px; color:var(--text); } .vfn-rel.vfn-empty { color:var(--muted); font-style:italic; } .vfn-tw { cursor:pointer; color:var(--muted); margin-right:5px; user-select:none; font-size:10px; } .vfn-set { margin-left:7px; cursor:pointer; opacity:.75; } .vfn-set:hover { opacity:1; } .vfn-tag { margin-left:7px; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); background:rgba(120,140,170,.16); border:1px solid rgba(120,140,170,.28); border-radius:7px; padding:1px 6px; } .vfn-ga { padding:1px 0 0 40px; font-size:11px; color:var(--muted); font-family:ui-monospace,monospace; } .vfn-ga b { color:var(--text); font-weight:600; } .sim-toggle { float:right; font-size:11px; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; gap:4px; cursor:pointer; } .sim-toggle input { margin:0; } .sim-bulb { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; font-size:12px; } .sim-pct { font-size:11px; font-weight:700; color:var(--accent); margin-left:4px; } .sim-ctrls { margin-left:8px; display:inline-flex; gap:3px; } .sim-ctrls button { font-size:11px; padding:1px 7px; line-height:1.4; } .sim-hint { font-size:10px; color:var(--accent); font-weight:700; margin-left:8px; } .vfn.sim-sel { outline:2px solid var(--accent); outline-offset:1px; } .sim-status { padding:1px 0 0 40px; font-size:11px; color:var(--muted); } .sim-status b { color:var(--text); } .vio.sim-press { cursor:pointer; border:1px solid var(--accent); background:var(--accent-soft); } .vio.sim-press:hover { filter:brightness(1.06); } #catFrameModal { position:fixed; inset:0; z-index:3200; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #catFrameModal.show { display:flex; } .catframe-card { background:var(--surface); border-radius:14px; width:600px; max-width:95vw; height:72vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45); } .catframe-head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); font-size:14px; } #catFrame { border:0; flex:1; width:100%; background:#1e1e22; } #cloneFrameModal { position:fixed; inset:0; z-index:3200; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #cloneFrameModal.show { display:flex; } #propModal { position:fixed; inset:0; z-index:3200; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #propModal.show { display:flex; } .prop-card { background:var(--surface); border-radius:14px; width:880px; max-width:96vw; height:82vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45); } .prop-head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); font-size:14px; } .prop-body { flex:1; overflow:auto; padding:10px 12px; } .cloneframe-card { background:var(--surface); border-radius:14px; width:440px; max-width:94vw; height:380px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45); } #cloneFrame { border:0; flex:1; width:100%; background:#1e1e22; } #buildFrameModal { position:fixed; inset:0; z-index:3200; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #buildFrameModal.show { display:flex; } .buildframe-card { background:var(--surface); border-radius:14px; width:520px; max-width:95vw; height:560px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45); } #buildFrame { border:0; flex:1; width:100%; background:#1e1e22; } #optFrameModal { position:fixed; inset:0; z-index:3200; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #optFrameModal.show { display:flex; } #optFrame { border:0; flex:1; width:100%; background:#1e1e22; } #cfgFrameModal { position:fixed; inset:0; z-index:3200; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #cfgFrameModal.show { display:flex; } /* Docket (AI-åbnet): ingen mørk backdrop (chatten ved siden af er tydeligt aktiv), ingen klik-fang, og kortet skubbet mod venstre så AI-panelet (nederst-højre) er frit. */ #cfgFrameModal.docked { background:transparent; backdrop-filter:none; justify-content:flex-start; pointer-events:none; } #cfgFrameModal.docked .cfgframe-card { margin-left:2vw; width:min(760px,72vw); pointer-events:auto; box-shadow:0 20px 70px rgba(0,0,0,.35); } .cfgframe-card { background:var(--surface); border-radius:14px; width:1040px; max-width:96vw; height:82vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45); position:relative; } /* Flytbar/resizable: når kortet er blevet flyttet/skaleret sættes .free (absolut). */ #cfgFrameModal.free { align-items:flex-start; justify-content:flex-start; } .cfgframe-card.moved { position:fixed; } /* Gennemsigtig skjold over iframen under træk/resize (så pointer ikke opsluges). */ .cfg-shield { position:absolute; inset:0; z-index:5; display:none; } .cfgframe-card.dragging .cfg-shield { display:block; } .cfg-rz { position:absolute; z-index:6; } .cfg-rz-n { top:-3px; left:8px; right:8px; height:8px; cursor:ns-resize; } .cfg-rz-s { bottom:-3px; left:8px; right:8px; height:8px; cursor:ns-resize; } .cfg-rz-e { top:8px; bottom:8px; right:-3px; width:8px; cursor:ew-resize; } .cfg-rz-w { top:8px; bottom:8px; left:-3px; width:8px; cursor:ew-resize; } .cfg-rz-ne { top:-4px; right:-4px; width:14px; height:14px; cursor:nesw-resize; } .cfg-rz-nw { top:-4px; left:-4px; width:14px; height:14px; cursor:nwse-resize; } .cfg-rz-se { bottom:-4px; right:-4px; width:14px; height:14px; cursor:nwse-resize; } .cfg-rz-sw { bottom:-4px; left:-4px; width:14px; height:14px; cursor:nesw-resize; } #cfgFrame { border:0; flex:1; width:100%; background:#f3f5f9; } #shareFrameModal { position:fixed; inset:0; z-index:3300; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #shareFrameModal.show { display:flex; } .shareframe-card { background:var(--surface); border-radius:14px; width:460px; max-width:95vw; height:480px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45); } #shareFrame { border:0; flex:1; width:100%; background:#1e1e22; } #shareManageModal { position:fixed; inset:0; z-index:3300; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #shareManageModal.show { display:flex; } #shareManageFrame { border:0; flex:1; width:100%; background:#1e1e22; } #roomGenModal { position:fixed; inset:0; z-index:3300; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #roomGenModal.show { display:flex; } #roomGenFrame { border:0; flex:1; width:100%; background:#1e1e22; } .opt-btn { float:right; font-size:11px; font-weight:700; cursor:pointer; color:var(--accent); background:var(--accent-soft); border:1px solid var(--border); border-radius:7px; padding:3px 9px; letter-spacing:0; text-transform:none; } .opt-btn:hover { border-color:var(--accent); } .sp-node { margin:1px 0; } .sp-row { display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:7px; cursor:default; } .sp-row:hover { background:var(--surface-2); } .sp-node.drop-ok { outline:2px dashed var(--accent); outline-offset:1px; background:rgba(80,140,255,.07); border-radius:7px; } .sp-row.sp-clickable { cursor:pointer; } .sp-twist { width:14px; text-align:center; color:var(--muted); cursor:pointer; font-size:10px; user-select:none; flex:0 0 auto; } .sp-twist:hover { color:var(--text); } .sp-twist-empty { cursor:default; } .sp-row.sp-active { background:rgba(80,140,255,.14); outline:1px solid var(--accent); } .sp-active-tag { font-size:10px; color:var(--accent); font-weight:700; margin-left:6px; cursor:grab; } .sp-active-tag:active { cursor:grabbing; } .sp-name { font-weight:600; } .sp-meta { color:var(--muted); font-size:11px; } .sp-kids { margin-left:18px; border-left:1px solid var(--border); padding-left:8px; } .sp-btns { display:flex; gap:3px; margin-left:auto; opacity:.35; transition:opacity .12s; } .sp-row:hover .sp-btns { opacity:1; } .sp-btns button { padding:1px 6px; font-size:11px; } .sp-dev { display:flex; align-items:center; gap:6px; margin:2px 0 2px 24px; padding:3px 7px; background:var(--surface-2); border-radius:6px; font-size:12px; } .sp-dev { cursor:grab; } .sp-dev .sp-dev-model { color:var(--muted); font-size:11px; } .sp-dev .sp-x { margin-left:auto; cursor:pointer; color:var(--muted); } .sp-dev .sp-x:hover { color:#d06; } .sp-row { cursor:grab; } .ua-dev { display:flex; align-items:center; gap:6px; margin:3px 0; padding:5px 8px; background:var(--surface-2); border:1px solid var(--border); border-radius:7px; cursor:grab; font-size:12px; } .ua-dev:hover { border-color:var(--accent); } .panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); } .panel h2 { font-size:13px; margin:0; padding:11px 14px; background:var(--surface); border-bottom:1px solid var(--border); color:var(--muted); font-weight:700; letter-spacing:.02em; } .panel h2 .count { font-weight:600; color:var(--accent); letter-spacing:0; } .ga-viewtoggle { float:right; display:inline-flex; gap:0; border:1px solid var(--border); border-radius:7px; overflow:hidden; margin-top:-2px; } .ga-viewtoggle .gvt { font:600 11px system-ui,sans-serif; padding:3px 9px; border:0; background:transparent; color:var(--muted); cursor:pointer; } .ga-viewtoggle .gvt.on { background:var(--accent); color:#fff; } .ga-devgrp { margin-bottom:8px; } .ga-devhead { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text); padding:5px 7px; position:sticky; top:0; background:var(--surface); border-bottom:1px solid var(--border); } .ga-devhead .sub { margin-left:auto; font-weight:400; } .ga-item.ga-sub { margin-left:10px; } .panel .body { overflow-y:auto; flex:1; padding:8px; } .panel .foot { padding:8px; border-top:1px solid var(--border); display:flex; gap:6px; flex-wrap:wrap; background:var(--surface-2); } .item { padding:7px 9px; border-radius:7px; cursor:pointer; border:1px solid transparent; } .item:hover { background:var(--surface-2); } .item.sel { background:var(--accent-soft); border-color:var(--accent); } .item .sub { color:var(--muted); font-size:11px; } .device { margin-bottom:6px; } .device > .head { padding:7px 9px; background:var(--surface-2); border:1px solid var(--border); border-radius:7px; font-weight:600; display:flex; justify-content:space-between; cursor:pointer; } .device > .head:hover { background:#e6ebf4; } /* ETS-tro sync-state badges (Adr·Prg·Par·Grp·Konf) i enhedshovedet */ .dev-right { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; } .syncbar { display:inline-flex; gap:2px; vertical-align:middle; } .syc { font-size:9px; font-weight:700; line-height:1; padding:2px 3px; border-radius:3px; min-width:15px; text-align:center; border:1px solid transparent; letter-spacing:.2px; } .syc-ok { background:#1c7a3e; color:#eaffea; border-color:#1c7a3e; } .syc-todo { background:#fbe3c2; color:#9c5a06; border-color:#e7a23c; } .syc-none { background:transparent; color:#9aa; border-color:var(--border); } /* Pa læses LIGE NU fra bussen (parameter-adoption i baggrunden) → gul, pulserende */ .syc-pend { background:#ffd75e; color:#6b4e00; border-color:#e0b62f; animation:sycPend 1.1s ease-in-out infinite; } @keyframes sycPend { 0%,100%{ opacity:1; } 50%{ opacity:.45; } } /* Parameter-adoption: lille SELVSTÆNDIG fremdrifts-popup (blokerer ikke — Devices er live) */ #paramWatch { position:fixed; right:18px; bottom:18px; z-index:4058; width:min(330px, calc(100vw - 36px)); background:var(--surface,#fff); color:var(--text,#0f172a); border:1px solid var(--border,#dbe2f0); border-radius:13px; box-shadow:0 14px 44px rgba(8,14,28,.35); padding:13px 15px; display:none; font:13px system-ui,-apple-system,sans-serif; } #paramWatch .pw-title { font-weight:800; font-size:13.5px; margin-bottom:8px; display:flex; justify-content:space-between; gap:8px; } #paramWatch .pw-bar { height:7px; border-radius:4px; background:var(--surface-2,#eef1f7); overflow:hidden; } #paramWatch .pw-fill { height:100%; width:3%; border-radius:4px; background:linear-gradient(90deg,#3b82f6,#2563eb); transition:width .4s ease; } #paramWatch .pw-line { margin-top:8px; font-weight:600; } #paramWatch .pw-sub { margin-top:3px; font-size:11.5px; color:var(--muted,#5b6b82); font-family:ui-monospace,monospace; } #paramWatch .pw-x { cursor:pointer; color:var(--muted); font-weight:400; } /* ETS6-lignende gruppeobjekt-tabel: kolonner #, navn/funktion, flag, datatype, GA */ .co-head, .co { display:grid; align-items:center; grid-template-columns: 28px minmax(0,1fr) 86px 90px minmax(72px,28%); gap:8px; } .co-head { padding:4px 10px 4px 22px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); z-index:1; } .co { padding:6px 10px 6px 22px; border-radius:8px; cursor:pointer; border:1px solid transparent; margin:2px 0; } .co:hover { background:var(--surface-2); border-color:var(--border); } .co.sel { background:var(--accent-soft); border-color:var(--accent); } .co.linked { background:linear-gradient(90deg,rgba(47,109,246,.05),transparent); } /* Visuel emulering: flash de objekter/enheder der er linket til en valgt GA */ .flash-on { animation:flashLink 1.1s ease-out 3; border-color:var(--accent)!important; box-shadow:0 0 0 2px var(--accent) inset, 0 0 12px rgba(47,109,246,.45); } @keyframes flashLink { 0%,100% { background:transparent; } 35% { background:rgba(47,109,246,.38); } } .ga-item.flash-on { box-shadow:0 0 0 2px var(--accent) inset, 0 0 14px rgba(47,109,246,.55); } .co-c-num { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right; } .co-c-main { display:flex; flex-direction:column; gap:1px; min-width:0; } .co-name { font-weight:500; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .co-func { font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .co-c-flags { display:flex; gap:1px; justify-content:flex-start; } .co-c-dpt { min-width:0; } .co-dpt { color:var(--muted); font-size:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; } .flagbit { font-size:9px; font-weight:700; width:14px; text-align:center; padding:1px 0; border-radius:4px; line-height:1.4; } .flagbit.off { background:transparent; color:var(--border); } .flagbit.c.on { background:#eee6fb; color:#7a3ec8; } .flagbit.r.on { background:#e3f0ff; color:#1d63d8; } .flagbit.w.on { background:#e6f7ec; color:#1a9e54; } .flagbit.t.on { background:#fff1e0; color:#c87a1d; } .flagbit.u.on { background:#fde6ef; color:#c8366e; } .co-c-links, .co-links { display:flex; gap:3px; flex-wrap:wrap; justify-content:flex-start; min-width:0; } .co-unlinked { color:var(--border); font-size:14px; } .ga-tag { background:var(--accent-soft); color:var(--accent); padding:1px 7px; border-radius:10px; font-size:10px; margin-left:4px; font-weight:600; cursor:pointer; } .ga-tag:hover { background:var(--accent); color:#fff; } .ga-tag.flash-on { background:var(--accent); color:#fff; } .ga-item { display:flex; justify-content:space-between; align-items:center; } .ga-check { margin-right:6px; cursor:pointer; flex:0 0 auto; } .ga-item.checked { background:rgba(208,143,143,.18); } .ga-addr { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--addr); font-weight:700; } input.search, select.search { width:100%; padding:6px 9px; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:7px; margin-bottom:6px; } input.search:focus, select.search:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } #overlay { position:fixed; inset:0; background:rgba(20,28,45,.55); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:7000; } #overlay.show { display:flex; opacity:1; transition:opacity .6s ease; } #overlay.fade { opacity:0; } /* Login-gate */ #authGate { position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(135deg,#1b2540,#0e1626); } #authGate.show { display:flex; } .auth-bg { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .auth-bg .blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; will-change:transform; } .auth-bg .b1 { width:340px; height:340px; left:8%; top:14%; background:radial-gradient(circle,#4f6bff,transparent 70%); animation:drift1 22s ease-in-out infinite; } .auth-bg .b2 { width:300px; height:300px; right:10%; top:18%; background:radial-gradient(circle,#1fc7a8,transparent 70%); animation:drift2 27s ease-in-out infinite; } .auth-bg .b3 { width:380px; height:380px; left:18%; bottom:8%; background:radial-gradient(circle,#9a5cff,transparent 70%); animation:drift3 31s ease-in-out infinite; } .auth-bg .b4 { width:260px; height:260px; right:16%; bottom:12%; background:radial-gradient(circle,#ffb020,transparent 70%); opacity:.4; animation:drift1 25s ease-in-out infinite reverse; } .auth-bg .spark { position:absolute; font-size:30px; opacity:.16; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); will-change:transform; } .auth-bg .s1 { left:14%; top:30%; animation:floaty 14s ease-in-out infinite; } .auth-bg .s2 { right:18%; top:24%; font-size:42px; animation:floaty 18s ease-in-out infinite 1s; } .auth-bg .s3 { left:26%; bottom:22%; font-size:24px; animation:floaty 12s ease-in-out infinite .5s; } .auth-bg .s4 { right:24%; bottom:28%; font-size:36px; animation:floaty 16s ease-in-out infinite 2s; } .auth-bg .s5 { left:46%; top:12%; font-size:28px; animation:floaty 20s ease-in-out infinite 1.5s; } @keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,40px) scale(1.12)} } @keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,50px) scale(1.08)} } @keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-50px) scale(1.15)} } @keyframes floaty { 0%,100%{transform:translate(0,0) rotate(-8deg)} 50%{transform:translate(20px,-26px) rotate(10deg)} } @media (prefers-reduced-motion: reduce) { .auth-bg .blob, .auth-bg .spark { animation:none !important; } /* Ingen animation → vis login-felterne med det samme (ellers ville de blive skjult) */ .auth-sub, #authForm, .auth-switch, .auth-lang { opacity:1 !important; animation:none !important; } #authSplash { transform:none !important; animation:none !important; } } .auth-card { position:relative; z-index:1; background:var(--surface); border-radius:18px; padding:34px 38px; width:360px; max-width:92vw; box-shadow:0 20px 60px rgba(0,0,0,.5); text-align:center; } .auth-logo { font-size:22px; font-weight:800; color:var(--text); } .auth-sub { color:var(--muted); font-size:13px; margin:6px 0 18px; } .auth-switch { margin-top:14px; font-size:13px; color:var(--muted); } .auth-lang { margin-top:16px; text-align:center; } .auth-lang select { font:600 12px system-ui; border:1px solid var(--border); border-radius:8px; padding:5px 10px; background:var(--surface-2); color:var(--text); cursor:pointer; } .auth-switch a { color:var(--accent); font-weight:600; text-decoration:none; margin-left:4px; } .auth-switch a:hover { text-decoration:underline; } #authForm { display:flex; flex-direction:column; gap:10px; } #authForm input { padding:11px 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--text); font-size:14px; } .auth-err { color:#ff6b6b; font-size:12px; min-height:16px; text-align:left; } .auth-ok { color:#2bbd6b; font-size:13px; text-align:left; line-height:1.5; background:var(--ok-soft,#e3f6ea); padding:10px 12px; border-radius:9px; } .auth-go { padding:11px; border:none; border-radius:9px; background:var(--accent); color:#fff; font-weight:700; font-size:14px; cursor:pointer; } .auth-go:hover { filter:brightness(1.08); } /* Velkomst-popup OVER login-vinduet: gæst-valget er visuelt fremhævet */ #authChoice { position:absolute; inset:0; z-index:5; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(10,15,30,.55); backdrop-filter:blur(4px); } #authChoice.show { display:flex; animation:choiceFade .22s ease; } @keyframes choiceFade { from{opacity:0} to{opacity:1} } .choice-card { background:var(--surface); border-radius:18px; padding:30px 30px 22px; width:410px; max-width:92vw; box-sizing:border-box; text-align:center; box-shadow:0 26px 74px rgba(0,0,0,.55); animation:choicePop .28s cubic-bezier(.2,.9,.3,1.25); } @keyframes choicePop { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} } .choice-brand { font:800 20px system-ui; letter-spacing:2px; } .choice-brand .cb-k{color:#3FA535} .choice-brand .cb-n{color:#1C4E9D} .choice-brand .cb-x{color:#6D6E71} .choice-brand .cb-w{color:var(--text);font-size:14px;letter-spacing:3px} .choice-title { font-size:20px; font-weight:800; margin:12px 0 2px; color:var(--text); } .choice-sub { color:var(--muted); font-size:13px; margin:0 0 20px; } .choice-opt { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:15px 16px; margin-bottom:12px; border-radius:14px; cursor:pointer; border:2px solid var(--border); background:var(--surface-2); color:var(--text); transition:transform .12s, border-color .12s, box-shadow .12s; } .choice-opt:hover { transform:translateY(-2px); } .choice-opt .choice-ico { font-size:28px; line-height:1; flex:0 0 auto; } .choice-opt .choice-body { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; } .choice-opt .choice-body b { font-size:16px; font-weight:700; } .choice-opt .choice-body small { color:var(--muted); font-size:12px; line-height:1.35; } .choice-opt .choice-go { font-size:20px; color:var(--muted); flex:0 0 auto; transition:transform .12s; } .choice-opt:hover .choice-go { transform:translateX(3px); } /* Gæst = den fremhævede primær-vej (grøn/blå accent-gradient + glød) */ .choice-guest { border-color:var(--accent); background:linear-gradient(135deg, rgba(58,114,184,.14), rgba(92,185,71,.12)); } .choice-guest:hover { border-color:var(--accent); box-shadow:0 12px 32px rgba(58,114,184,.28); } .choice-guest .choice-go { color:var(--accent); } .choice-login:hover { border-color:var(--accent); box-shadow:0 8px 24px rgba(0,0,0,.16); } .userbox { display:flex; gap:6px; align-items:center; } /* Download-gruppe: Download + ▾ dropdown (Genkend/Projekt/Produkt) */ .dl-group { position:relative; display:inline-flex; align-items:stretch; } .dl-group .dl-main { border-top-right-radius:0; border-bottom-right-radius:0; } .dl-group .dl-caret { border-top-left-radius:0; border-bottom-left-radius:0; padding:0 8px; margin-left:1px; font-size:11px; display:inline-flex; align-items:center; } .dl-menu { position:absolute; top:100%; right:0; margin-top:6px; min-width:190px; background:var(--surface,#fff); border:1px solid var(--border,#dde); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:6px; z-index:60; display:none; } .dl-menu.show { display:block; } .dl-menu button { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:0; border-radius:8px; padding:9px 11px; font:inherit; font-size:13px; color:inherit; cursor:pointer; } .dl-menu button:hover { background:var(--surface-2,#eef1f6); } /* KNX Live-forbindelses-ikon i topbaren — ringen + status-prik viser om der er forbindelse */ .live-nav { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin-left:8px; border-radius:10px; cursor:pointer; background:var(--surface,#fff); border:1px solid var(--border,#dde); font-size:16px; line-height:1; position:relative; transition:box-shadow .2s, border-color .2s, background .2s; } .live-nav:hover { border-color:var(--accent,#3a72b8); } .live-nav.on { border-color:#28b45a; background:rgba(40,180,90,.10); box-shadow:0 0 0 2px rgba(40,180,90,.30); } .live-nav::after { content:''; position:absolute; right:-3px; bottom:-3px; width:11px; height:11px; border-radius:50%; background:#b7bcc7; border:2px solid var(--surface,#fff); box-sizing:border-box; } .live-nav.on::after { background:#28b45a; animation:liveDot 1.7s ease-in-out infinite; } @keyframes liveDot { 0%,100%{ box-shadow:0 0 0 0 rgba(40,180,90,.55); } 50%{ box-shadow:0 0 0 5px rgba(40,180,90,0); } } /* Tydelig "forbundet"-pille i topbaren ved siden af 🔌 — vises kun når live */ .live-navlabel{ display:none; align-items:center; gap:5px; margin-left:6px; padding:4px 11px; border-radius:999px; background:rgba(40,180,90,.14); color:#1c8a4e; border:1px solid rgba(40,180,90,.45); font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis; line-height:1.1; } .live-navlabel::before{ content:''; width:8px; height:8px; border-radius:50%; background:#28b45a; flex:0 0 auto; animation:liveDot 1.7s ease-in-out infinite; } /* Cloud Access-status i Live-panelet */ .ca-band{ border-radius:10px; padding:10px 13px; font-size:13.5px; display:flex; flex-direction:column; gap:3px; } .ca-band.on{ background:rgba(28,157,91,.10); border:1px solid rgba(28,157,91,.35); color:#146c40; } .ca-band.off{ background:rgba(183,121,31,.10); border:1px solid rgba(183,121,31,.35); color:#8a5a10; } .ca-band .ca-up{ font-size:12.5px; opacity:.85; } /* Parrings-boks: tydelige trin 1-2-3 */ .pstep{ display:flex; gap:11px; align-items:flex-start; margin:10px 0; } .pnum{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font:700 12px system-ui; display:grid; place-items:center; margin-top:1px; } .pbody{ flex:1; min-width:0; } .pbody b{ font-size:13.5px; } .dlrow{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; } .dlbtn{ padding:5px 11px; text-decoration:none; border:1px solid var(--border); border-radius:8px; font-size:13px; color:var(--text); background:#fff; white-space:nowrap; } .dlbtn:hover{ background:#f0f2f6; } .dlbtn.prio{ border-color:var(--accent); color:var(--accent); font-weight:700; box-shadow:0 0 0 2px rgba(47,109,246,.12); } .pcode{ font-family:ui-monospace,Menlo,monospace; font-size:22px; font-weight:700; letter-spacing:3px; text-align:center; padding:9px; margin-top:7px; background:#f3f4f6; border-radius:8px; cursor:pointer; } .paircol{ display:flex; gap:16px; align-items:center; margin-top:7px; flex-wrap:wrap; } .paircol > div:first-child{ flex:1 1 200px; min-width:180px; } .pairqr{ flex:0 0 auto; text-align:center; } .pairqr img{ display:block; border:1px solid var(--border,#dde); border-radius:8px; background:#fff; padding:5px; } .pairqr .sub{ margin-top:4px; max-width:130px; } .pmac{ margin-top:8px; font-size:12.5px; color:#8a5a10; background:#fbf1de; border:1px solid #eeddb6; border-radius:8px; padding:7px 10px; } /* Rød tæller-badge på admin-tandhjulet: N konti afventer godkendelse */ #adminBadge { position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:#e0322f; color:#fff; font:700 10px/16px system-ui; text-align:center; box-shadow:0 0 0 2px var(--surface,#fff); pointer-events:none; } .guest-cta { border:1px solid var(--accent,#3a72b8) !important; color:var(--accent,#3a72b8) !important; border-radius:8px; font-weight:600; } .guest-cta:hover { background:var(--accent,#3a72b8) !important; color:#fff !important; } .guest-cta.pulse { animation:guestCtaPulse 1s ease-in-out 3; } @keyframes guestCtaPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(58,114,184,.5); } 50%{ box-shadow:0 0 0 6px rgba(58,114,184,0); } } /* Profil / cloud-key modal */ #profileModal { position:fixed; inset:0; z-index:3100; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #profileModal.show { display:flex; } #recogModal { position:fixed; inset:0; z-index:3100; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #recogModal.show { display:flex; } .recog-card { background:var(--surface); border-radius:16px; padding:22px 24px; width:680px; max-width:95vw; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.45); } .recog-card h3 { margin:0 0 2px; font-size:18px; } .recog-sub { color:var(--muted); font-size:13px; margin-bottom:14px; } .recog-h4 { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:16px 0 8px; } .recog-bar { display:flex; align-items:center; gap:10px; margin:5px 0; font-size:13px; cursor:pointer; padding:3px 6px; border-radius:7px; border:1px solid transparent; } .recog-bar:hover { background:var(--surface2,rgba(127,127,127,.08)); } .recog-bar.rb-on { border-color:var(--accent); background:var(--accent-soft); } .recog-bar .rb-cnt { width:42px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; } .recog-bar .rb-track { flex:1; height:14px; background:var(--border); border-radius:7px; overflow:hidden; } .recog-bar .rb-fill { height:100%; background:var(--accent); border-radius:7px; } .recog-bar .rb-lbl { width:160px; } .recog-clear { font-size:11px; color:var(--accent); cursor:pointer; font-weight:600; text-transform:none; letter-spacing:0; margin-left:6px; } .rg-inst { margin-top:5px; display:flex; flex-wrap:wrap; gap:4px; } .rg-mem { font-size:11px; font-family:ui-monospace,monospace; background:var(--accent-soft); border:1px solid var(--border); border-radius:5px; padding:1px 6px; white-space:nowrap; } .rg-mem .mn { font-family:inherit; color:var(--muted); margin-left:5px; } .recog-grp { border:1px solid var(--border); border-radius:9px; padding:9px 11px; margin:6px 0; } .recog-grp .rg-name { font-weight:700; font-size:13px; } .recog-grp .rg-addr { color:var(--muted); font-weight:400; font-size:11px; margin-left:6px; } .recog-grp .rg-funcs { font-size:12px; color:var(--text); margin-top:3px; } .recog-grp .rg-res { font-size:11px; color:var(--warn,#e0a030); margin-top:2px; } .prof-card { background:var(--surface); border-radius:16px; padding:24px 26px; width:440px; max-width:94vw; box-shadow:0 20px 60px rgba(0,0,0,.45); max-height:92vh; overflow-y:auto; } .proj-scroll { max-height:44vh; overflow-y:auto; margin:0 -4px; padding:2px 4px; } .proj-sort { margin-left:auto; } .prof-card h3 { margin:0 0 4px; font-size:18px; } .prof-card .prof-email { color:var(--muted); font-size:13px; margin-bottom:16px; } .prof-sec { border:1px solid var(--border); border-radius:11px; padding:14px; margin-bottom:14px; background:var(--surface-2); } .prof-sec h4 { margin:0 0 8px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; } .prof-dc { background:#10243a; border:1px solid #1d4060; border-radius:9px; padding:12px; font-size:13px; line-height:1.6; } .prof-dc code { font-size:17px; font-weight:800; letter-spacing:.08em; color:#7fd1ff; } .prof-dc a { color:#8fd0ff; word-break:break-all; } .prof-lic { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; margin:5px 0; cursor:pointer; background:var(--surface); } .prof-lic:hover { border-color:var(--accent); } .prof-lic.active { border-color:var(--accent); background:var(--accent-soft); } .prof-lic .lic-num { font-weight:700; } .prof-lic .lic-lbl { color:var(--muted); font-size:12px; } .prof-lic .lic-badge { margin-left:auto; font-size:11px; color:var(--accent); font-weight:700; } .prof-proj { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; margin:5px 0; background:var(--surface); } .prof-proj.current { border-color:var(--accent); background:var(--accent-soft); } .prof-proj.sel { border-color:var(--accent); background:var(--accent-soft); } .proj-tools { display:flex; gap:6px; align-items:center; margin:2px 0 8px; } .proj-tools button { font-size:12px; padding:4px 10px; } .proj-tools button[disabled] { opacity:.45; cursor:not-allowed; } .proj-cb { margin:0 8px 0 2px; width:16px; height:16px; flex:0 0 auto; } .prof-proj .pj-main { flex:1; min-width:0; cursor:pointer; } .prof-proj .pj-name { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .prof-proj .pj-meta { color:var(--muted); font-size:11px; margin-top:2px; } .prof-proj .pj-cur { font-size:11px; color:var(--accent); font-weight:700; } .prof-proj .pj-signed { font-size:12px; vertical-align:middle; } .prof-proj .pj-act { border:none; background:none; cursor:pointer; color:var(--muted); font-size:14px; padding:2px 4px; border-radius:5px; } .prof-proj .pj-act:hover { background:var(--border); color:var(--text); } .snap-panel { margin:-2px 0 10px 14px; padding:8px 10px; border-left:2px solid var(--accent); background:var(--surface-2); border-radius:0 8px 8px 0; } .snap-hd { font-size:12px; font-weight:700; margin-bottom:6px; } .snap-hd .sub { font-weight:400; color:var(--muted); } .snap-new { font-size:11px; padding:3px 9px; margin-bottom:6px; } .snap-row { display:flex; align-items:center; gap:6px; padding:5px 7px; border-radius:7px; border:1px solid var(--border); background:var(--surface); margin-bottom:4px; } .snap-row .snap-main { flex:1; min-width:0; } .snap-row .snap-cmt { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .snap-row .snap-meta { font-size:11px; color:var(--muted); margin-top:1px; } .snap-row .sub { color:var(--muted); font-weight:400; } .prof-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; } .prof-msg { font-size:12px; color:var(--muted); min-height:16px; margin-top:6px; } /* "Sparet tid"-statistik i profilen */ .stat-hero { text-align:center; padding:6px 0 12px; } .stat-hero .stat-big { font:800 26px system-ui; color:var(--accent); letter-spacing:.3px; } .stat-hero .stat-cap { font-size:12px; color:var(--muted); margin-top:2px; } .stat-list { display:flex; flex-direction:column; gap:2px; } .stat-row { display:flex; align-items:center; gap:9px; padding:5px 8px; border-radius:8px; font-size:13px; } .stat-row:hover { background:var(--surface-2,rgba(127,127,127,.07)); } .stat-row .stat-ico { flex:0 0 auto; font-size:15px; } .stat-row .stat-lbl { flex:1; color:var(--text); } .stat-row .stat-cnt { font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); } .prof-close { float:right; cursor:pointer; color:var(--muted); font-size:18px; line-height:1; border:none; background:none; } .danger { background:#5a1f1f; color:#ffb3b3; border:1px solid #7a2a2a; } .danger:hover { filter:brightness(1.12); } .key-unlink { background:none; color:var(--muted); border:1px solid var(--border); font-size:12px; } .key-unlink:hover { color:#c0556a; border-color:#c0556a; background:none; } .key-welcome { text-align:center; padding:18px 8px 8px; } .key-welcome .kw-h { font-size:26px; font-weight:800; color:var(--accent); margin:6px 0 4px; } .key-welcome .kw-sub { font-size:13px; color:var(--muted); margin-bottom:8px; } .key-welcome .kw-count { font-size:12px; color:var(--muted); margin-bottom:14px; } .key-welcome .kw-count span { font-weight:700; color:var(--accent); } .ah-badge { font-size:12px; font-weight:600; text-align:center; padding:6px 10px; border-radius:8px; margin-bottom:12px; cursor:pointer; } .prof-card { transition:background .25s; } .prof-card.ah-running { background:rgba(58,110,165,.16); } /* tæller ned (lukker snart) — blå */ .prof-card.ah-running .ah-badge { background:rgba(58,110,165,.26); color:#1d4e84; } .prof-card.ah-paused { background:rgba(45,160,120,.12); } /* holdt åben (standard) */ .prof-card.ah-paused .ah-badge { background:rgba(45,160,120,.20); color:#0f6e56; } .key-welcome.fade-out { animation:kwFade .6s ease forwards; } @keyframes kwFade { to { opacity:0; transform:translateY(-6px); height:0; margin:0; padding:0; overflow:hidden; } } .cert-badge { display:inline-flex; align-items:center; gap:3px; margin-left:7px; padding:1px 7px; border-radius:9px; font-size:11px; font-weight:700; background:#15803d; color:#eafff0; border:1px solid #1d9e4f; } .ov-card { background:var(--surface); border-radius:16px; padding:30px 38px; box-shadow:0 18px 50px rgba(10,20,40,.35); text-align:center; min-width:320px; max-width:90vw; } .ov-spin { width:54px; height:54px; margin:0 auto 18px; border-radius:50%; border:5px solid var(--accent-soft); border-top-color:var(--accent); animation:ovspin 0.9s linear infinite; } @keyframes ovspin { to { transform:rotate(360deg); } } .ov-doc { position:relative; display:inline-block; font-size:58px; margin:0 auto 16px; line-height:1; } .ov-page { display:inline-block; animation:ovpulse 1.6s ease-in-out infinite; } @keyframes ovpulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } } /* underskriften blinker hen over dokumentet */ .ov-sign { position:absolute; left:50%; bottom:6px; transform:translateX(-45%) rotate(-12deg); font-size:30px; animation:ovsignblink 1s steps(1) infinite; } @keyframes ovsignblink { 0%,45% { opacity:0; } 50%,100% { opacity:1; } } /* rødt cert-segl — vises kun når der signeres MED certifikat */ .ov-seal { position:absolute; top:-4px; right:-10px; font-size:24px; animation:ovsealpulse 1.3s ease-in-out infinite; } .ov-doc.no-cert .ov-seal { display:none; } @keyframes ovsealpulse { 0%,100% { transform:scale(1); opacity:.9; } 50% { transform:scale(1.18); opacity:1; } } .ov-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px; } .ov-msg { font-size:13px; color:var(--muted); line-height:1.5; min-height:18px; } .ov-bar { margin-top:14px; height:6px; border-radius:6px; background:var(--surface-2); overflow:hidden; } .ov-bar > i { display:block; height:100%; width:30%; border-radius:6px; background:var(--accent); animation:ovslide 1.2s ease-in-out infinite; } @keyframes ovslide { 0%{margin-left:-30%} 100%{margin-left:100%} } .ov-bar.determinate { background:var(--surface-2); } .ov-bar.determinate > i { animation:none; margin-left:0; width:0%; transition:width .15s linear; background:linear-gradient(90deg,#22c55e,#16a34a); } .ov-pct { margin-top:6px; font-size:12px; font-weight:700; color:#16a34a; min-height:14px; } .ov-log { margin-top:12px; max-height:128px; overflow-y:auto; text-align:left; font-size:12px; line-height:1.7; color:var(--muted); border-top:1px solid var(--surface-2); padding-top:8px; } .ov-log:empty { display:none; } .ov-line { padding-left:18px; position:relative; } .ov-line::before { position:absolute; left:0; } .ov-line.cur { color:var(--text); font-weight:600; } .ov-line.cur::before { content:"▸"; color:var(--accent); } .ov-line.done::before { content:"✓"; color:#22c55e; } .modal-bg { position:fixed; inset:0; background:rgba(20,28,45,.45); display:none; align-items:center; justify-content:center; z-index:1500; } .modal-bg.show { display:flex; } /* Live-maske — svævende panel med lys/knap-fliser der gløder live på bussen */ #maskPanel { position:fixed; right:16px; bottom:16px; width:340px; height:auto; max-height:64vh; min-width:220px; min-height:120px; overflow:auto; resize:both; background:var(--surface,#fff); border:1px solid var(--bd,#e5e7eb); border-radius:16px; box-shadow:0 16px 50px rgba(15,23,42,.28); z-index:3200; display:none; } #maskPanel.show { display:block; animation:maskin .18s ease-out; } @keyframes maskin { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } .mask-head { display:flex; justify-content:space-between; align-items:center; padding:11px 15px; font-weight:700; font-size:13px; border-bottom:1px solid var(--bd,#e5e7eb); position:sticky; top:0; background:var(--surface,#fff); border-radius:16px 16px 0 0; } .mask-x { background:none; border:0; cursor:pointer; font-size:15px; color:var(--muted,#6b7280); } /* AI-assistent-panel */ #aiPanel { position:fixed; right:16px; bottom:16px; width:390px; max-width:calc(100vw - 32px); height:70vh; min-width:300px; min-height:260px; display:none; flex-direction:column; background:var(--surface,#fff); border:1px solid var(--bd,#e5e7eb); border-radius:16px; box-shadow:0 16px 50px rgba(15,23,42,.28); z-index:3300; } #aiPanel.show { display:flex; animation:maskin .18s ease-out; } #aiNavBtn.active { background:#eef2ff; border-color:#6366f1; } /* Flyt (træk i headeren) + skalér på alle 4 sider/hjørner (kant-håndtag). */ .ai-head { display:flex; justify-content:space-between; align-items:center; padding:11px 15px; font-weight:700; font-size:13px; border-bottom:1px solid var(--bd,#e5e7eb); border-radius:16px 16px 0 0; cursor:move; user-select:none; touch-action:none; } .ai-rz { position:absolute; z-index:5; touch-action:none; } .ai-rz-e{ top:8px; right:-4px; width:9px; bottom:8px; cursor:ew-resize; } .ai-rz-w{ top:8px; left:-4px; width:9px; bottom:8px; cursor:ew-resize; } .ai-rz-n{ top:-4px; left:8px; right:8px; height:9px; cursor:ns-resize; } .ai-rz-s{ bottom:-4px; left:8px; right:8px; height:9px; cursor:ns-resize; } .ai-rz-ne{ top:-5px; right:-5px; width:16px; height:16px; cursor:nesw-resize; } .ai-rz-nw{ top:-5px; left:-5px; width:16px; height:16px; cursor:nwse-resize; } .ai-rz-se{ bottom:-5px; right:-5px; width:16px; height:16px; cursor:nwse-resize; } .ai-rz-sw{ bottom:-5px; left:-5px; width:16px; height:16px; cursor:nesw-resize; } .ai-body { flex:1; overflow-y:auto; padding:12px 13px; display:flex; flex-direction:column; gap:9px; font-size:13px; } .ai-msg { max-width:88%; padding:8px 11px; border-radius:12px; line-height:1.5; white-space:pre-wrap; word-break:break-word; } .ai-msg.user { align-self:flex-end; background:#4f46e5; color:#fff; border-bottom-right-radius:4px; } .ai-msg.bot { align-self:flex-start; background:var(--bg2,#f3f4f6); color:var(--fg,#111827); border-bottom-left-radius:4px; } .ai-msg.err { align-self:flex-start; background:#fef2f2; color:#991b1b; border:1px solid #fecaca; } .ai-msg.warn { align-self:flex-start; background:#fffbeb; color:#92590b; border:1px solid #fde68a; font-weight:500; } .ai-msg.ok { align-self:flex-start; background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; font-weight:600; } .ai-uimg { max-width:190px; max-height:150px; border-radius:9px; display:block; object-fit:contain; background:#fff2; } /* Vidensbank-figurer + AI-tegnede diagrammer i chatten */ .ai-figmsg { padding:7px; } .ai-fig { display:block; max-width:100%; max-height:420px; object-fit:contain; border-radius:9px; border:1px solid var(--bd,#e5e7eb); background:#fff; cursor:zoom-in; } .ai-figcap { font-size:11.5px; color:var(--muted,#6b7280); margin-top:5px; padding:0 2px; } /* Sprog-flag pr. besked (signatur: hvilket sprog linjen er på) */ .ai-flag { font-size:13px; margin-right:5px; vertical-align:-1px; cursor:default; filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); } /* Tommis Lov-link (nyt vindue) under bot-svar der nævner den */ .ai-tommi { display:inline-block; margin-top:7px; padding:3px 9px; border-radius:8px; background:#eef2ff; color:#4338ca; font-size:12px; font-weight:600; text-decoration:none; border:1px solid #c7d2fe; } .ai-tommi:hover { background:#e0e7ff; } .ai-msg.bot .ai-tommi { display:block; width:fit-content; } /* STOR splash-taleboble: fejrer bygget projekt m. tal */ .ai-splash { align-self:stretch; margin:6px 2px; padding:15px 16px; border-radius:16px; position:relative; background:linear-gradient(135deg,#eef2ff,#f0fdf4); border:1px solid #c9d3ff; box-shadow:0 8px 26px rgba(79,70,229,.16); opacity:0; transform:translateY(8px) scale(.97); transition:all .32s cubic-bezier(.2,.8,.2,1); } .ai-splash.ai-sp-in { opacity:1; transform:none; } .ai-splash::after { content:''; position:absolute; left:26px; top:-8px; width:16px; height:16px; background:#eef2ff; border-left:1px solid #c9d3ff; border-top:1px solid #c9d3ff; transform:rotate(45deg); } .ai-sp-title { font:800 15px system-ui; color:#3730a3; margin-bottom:11px; } .ai-sp-name { font-weight:700; color:#166534; } .ai-sp-grid { display:flex; flex-wrap:wrap; gap:9px; } .ai-sp-item { flex:1 1 74px; background:#fff; border:1px solid #e4e7f5; border-radius:11px; padding:9px 8px; text-align:center; } .ai-sp-n { font:800 18px system-ui; color:#4f46e5; } .ai-sp-w { font:600 10.5px system-ui; color:#6b7280; margin-top:2px; } .ai-msg .ai-txt { white-space:pre-wrap; } .ai-msg .ai-time { display:block; margin-top:4px; font-size:10px; opacity:.55; } .ai-msg.user .ai-time { text-align:right; } .ai-tools { align-self:flex-start; font-size:11px; color:var(--muted,#6b7280); font-family:ui-monospace,monospace; background:var(--bg2,#f7f8fa); border:1px solid var(--bd,#eef0f3); border-radius:8px; padding:5px 8px; max-width:88%; } .ai-tools b { color:#4f46e5; } .ai-applied { align-self:stretch; font-size:12px; font-weight:600; color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:9px; padding:7px 11px; animation:aiApplied .3s ease-out; display:flex; justify-content:space-between; gap:8px; } .ai-applied .ai-time { color:#166534; opacity:.7; } @keyframes aiApplied { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} } .ai-prog, .ai-boot { min-width:220px; } .ai-boot .ai-boot-lbl { font-size:12px; color:var(--muted,#6b7280); margin-bottom:6px; display:flex; justify-content:space-between; gap:8px; } #aiText:disabled { opacity:.6; cursor:not-allowed; } #aiSend:disabled { opacity:.45; cursor:not-allowed; } .ai-prog-lbl { font-size:12px; color:var(--muted,#6b7280); margin-bottom:6px; display:flex; justify-content:space-between; gap:8px; } .ai-prog-time, .ai-boot-time { font-variant-numeric:tabular-nums; opacity:.75; font-weight:600; white-space:nowrap; } .ai-prog-track { height:7px; border-radius:99px; background:var(--bg,#e5e7eb); overflow:hidden; } .ai-prog-bar { height:100%; width:6%; border-radius:99px; background:linear-gradient(90deg,#6366f1,#8b5cf6); transition:width .35s ease; background-size:200% 100%; animation:aiProgShimmer 1.1s linear infinite; } @keyframes aiProgShimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} } /* LIVE AKTIVITETS-FEED under progress-baren: en rullende liste af de seneste mikro-trin (rum/enhed/kanal/GA/kobling) — hver linje glider ind, så man SER byggeriet arbejde. */ .ai-prog-feed { margin-top:7px; font:11px/1.55 ui-monospace,Menlo,Consolas,monospace; max-height:112px; overflow:hidden; display:flex; flex-direction:column; gap:1px; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px); mask-image:linear-gradient(180deg,transparent 0,#000 22px); } .ai-prog-line { color:var(--muted,#6b7280); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.85; animation:aiFeedIn .22s ease both; } .ai-prog-line.hd { color:var(--fg,#374151); font-weight:600; opacity:1; margin-top:2px; } .ai-prog-line b { color:#6d28d9; font-weight:600; } @keyframes aiFeedIn { from{opacity:0;transform:translateY(6px)} to{opacity:.85;transform:none} } .ai-prog-count { font-variant-numeric:tabular-nums; opacity:.6; font-weight:600; } .ai-input { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--bd,#e5e7eb); } .ai-input textarea { flex:1; resize:none; max-height:120px; border:1px solid var(--bd,#d1d5db); border-radius:10px; padding:8px 10px; font:inherit; font-size:13px; background:var(--bg2,#fff); color:var(--fg,#111827); } .ai-input button { border:0; border-radius:10px; background:#4f46e5; color:#fff; cursor:pointer; padding:0 14px; font-size:15px; } .ai-input button:disabled { opacity:.5; cursor:default; } #aiAttach { background:#f3f4f6; color:#4b5563; border:1px solid var(--bd,#d1d5db); font-size:17px; padding:0 11px; } #aiAttach:hover { background:#e5e7eb; } #aiPanel.ai-dragging { outline:2.5px dashed #4f46e5; outline-offset:-4px; } #aiPanel.ai-dragging::after { content:'📐 'attr(data-drop); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(79,70,229,.07); color:#4f46e5; font:700 15px system-ui; border-radius:16px; pointer-events:none; z-index:50; } .mask-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:13px; } .mask-sec { grid-column:1/-1; font-size:11px; font-weight:700; color:var(--muted,#6b7280); text-transform:uppercase; letter-spacing:.04em; margin:4px 0 -2px; } .mask-sec:first-child { margin-top:0; } .mask-tile.mk-button { background:#eef2ff; } .mask-tile.mk-button.on { background:#dbeafe; border-color:#3b82f6; box-shadow:0 0 18px rgba(59,130,246,.5); } .mask-tile.mk-button.on .mask-ico { text-shadow:0 0 14px rgba(59,130,246,.9); } .mask-tile.mk-dimmer.on { background:#fff7ed; border-color:#fb923c; box-shadow:0 0 18px rgba(251,146,60,.5); } .mask-tile.mk-blind.on { background:#eef7ff; border-color:#38bdf8; box-shadow:0 0 18px rgba(56,189,248,.5); } .mask-tile.mk-valve.on { background:#fef2f2; border-color:#f87171; box-shadow:0 0 18px rgba(248,113,113,.5); } .mask-tile.mk-relay.on { background:#f0fdf4; border-color:#22c55e; box-shadow:0 0 18px rgba(34,197,94,.5); } .mask-st { font-size:10px; font-weight:700; color:var(--muted,#6b7280); letter-spacing:.02em; } .mask-tile.on .mask-st { color:var(--fg,#111827); } .mask-tile { display:flex; flex-direction:column; align-items:center; gap:3px; padding:13px 8px; border-radius:13px; border:1px solid var(--bd,#e5e7eb); cursor:pointer; background:var(--bg2,#f7f8fa); transition:all .15s; user-select:none; } .mask-tile:hover { border-color:var(--accent,#2563eb); } .mask-tile .mask-ico { font-size:30px; line-height:1; filter:grayscale(1) brightness(.75) opacity(.45); transition:all .22s; } .mask-tile.on { background:#fffbeb; border-color:#f59e0b; box-shadow:0 0 20px rgba(245,158,11,.45); } .mask-tile.on .mask-ico { filter:none; transform:scale(1.06); text-shadow:0 0 16px rgba(245,158,11,.95); } .mask-nm { font-size:11px; font-weight:600; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mask-addr { font-size:10px; color:var(--muted,#9aa1ad); font-family:ui-monospace,monospace; } #maskNavBtn.active { background:#fffbeb; border-color:#f59e0b; } /* Vælg fysisk hardware — produkt-liste */ .hw-list { max-height:52vh; overflow:auto; border:1px solid var(--bd,#e5e7eb); border-radius:11px; } .hw-row { display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--bd,#eef0f3); } .hw-row:last-child { border-bottom:none; } .hw-row:hover { background:var(--accent-soft,#eff4ff); } .hw-nm { font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hw-mf { color:var(--muted,#9aa1ad); font-size:12px; white-space:nowrap; } .hw-k { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:20px; background:#eef2ff; color:#3355aa; white-space:nowrap; min-width:52px; text-align:center; } .hw-k.hw-dimmer { background:#fff7ed; color:#c2620c; } .hw-k.hw-switch { background:#f0fdf4; color:#15803d; } .hw-k.hw-blind { background:#eff6ff; color:#1d4ed8; } .hw-k.hw-push_button { background:#f5f3ff; color:#6d28d9; } .hw-k.hw-heat { background:#fef2f2; color:#b91c1c; } /* Live-forbindelses-dialogen skal ligge OVER læse-/download-modalerne (z 3450), så "Forbind først" åbner synligt oven på dem og kan bruges før handlingen genoptages. */ #liveModal { z-index:3600; } #scanModal { z-index:3700; } /* over Live-vinduet — ellers åbner scan-modalen BAG det */ /* Scan-vinduet: klik-igennem baggrund (ingen dæmpning) → loggen ses+bruges samtidig; selve boksen flytbar */ #scanModal.floaty { background:transparent; pointer-events:none; } #scanModal.floaty .modal { pointer-events:auto; box-shadow:0 20px 60px rgba(0,0,0,.4) } .modal h3.draghandle { cursor:move; user-select:none } .modal { background:var(--surface); border-radius:14px; padding:22px 24px; box-shadow:0 16px 46px rgba(10,20,40,.32); width:380px; max-width:92vw; max-height:92vh; overflow-y:auto; overscroll-behavior:contain; } .modal h3 { margin:0 0 4px; font-size:16px; color:var(--text); } .modal .sub { color:var(--muted); font-size:12px; margin-bottom:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .modal-field { margin-bottom:12px; } .modal-field label { display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:4px; } .modal-field input[type=text], .modal-field input[type=number] { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-size:14px; } .modal-field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .modal-check { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:13px; color:var(--text); } .modal-check input { width:16px; height:16px; accent-color:var(--accent); } .modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; } .link-body { max-height:360px; overflow:auto; margin:10px 0 4px; } .link-head { font-size:13px; margin-bottom:8px; } .link-head .sub { display:block; color:var(--muted); font-size:11px; margin-top:2px; } .link-row { display:flex; align-items:center; gap:8px; padding:5px 6px; font-size:12px; border-bottom:1px solid var(--border); } .link-row.dim { opacity:.5; } .link-co { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .link-arrow { color:var(--muted); } .link-lbl { color:var(--muted); font-size:11px; } .link-already { color:var(--ok); font-size:10px; font-weight:600; } .link-ch { display:flex; align-items:center; gap:10px; padding:9px 8px; font-size:13px; border-bottom:1px solid var(--border); cursor:pointer; } .link-ch.dim { opacity:.55; cursor:not-allowed; } .link-ch input { width:16px; height:16px; } .link-ch-name { font-weight:600; min-width:74px; } .link-ch-roles { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; } #toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.94); background:var(--ok); color:#fff; padding:20px 32px; border-radius:16px; opacity:0; transition:opacity .22s ease, transform .22s ease; pointer-events:none; font-weight:700; font-size:16px; line-height:1.4; text-align:center; max-width:min(580px,86vw); display:flex; align-items:center; gap:14px; box-shadow:0 18px 60px rgba(20,30,60,.34); z-index:5000; } #toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); } #toast.err { background:var(--danger); } #toast .tico { font-size:26px; flex:0 0 auto; } .hint { color:var(--muted); padding:10px; font-size:12px; text-align:center; line-height:1.5; } .link-mode { display:flex; gap:18px; justify-content:center; margin:6px 0 10px; font-size:13px; } .link-mode label { display:flex; align-items:center; gap:6px; cursor:pointer; } .link-act-btn { display:block; width:100%; padding:10px; margin-top:4px; border:none; border-radius:8px; background:var(--accent,#2d7); color:#fff; font-size:13px; font-weight:600; cursor:pointer; } .link-act-btn:hover { filter:brightness(1.07); } .statusbar { background:var(--surface); padding:5px 14px; font-size:11px; color:var(--muted); border-top:1px solid var(--border); cursor:pointer; display:flex; align-items:center; gap:12px; } .statusbar:hover { background:var(--surface-2); } .statusbar::after { content:"📋 log"; opacity:.6; font-size:10px; white-space:nowrap; } #logModal { position:fixed; inset:0; z-index:3500; display:none; align-items:flex-end; justify-content:center; background:rgba(8,14,28,.5); } #logModal.show { display:flex; } .log-card { background:var(--surface); border-radius:14px 14px 0 0; width:760px; max-width:96vw; height:60vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -10px 40px rgba(0,0,0,.4); } /* Dock/lytte-mode: ingen mørk baggrund, appen kan betjenes, loggen bliver stående */ #logModal.dock { background:transparent; pointer-events:none; align-items:flex-end; justify-content:flex-end; } #logModal.dock .log-card { pointer-events:auto; width:440px; max-width:96vw; height:48vh; margin:0 14px 14px 0; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.32); resize:both; min-width:280px; min-height:170px; max-height:90vh; } .log-head { cursor:move; } /* træk panelet via headeren — også i normal modal-mode */ .log-live { display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:12px; color:var(--muted); cursor:pointer; } .log-live input { margin:0; } .log-filter { margin-left:10px; flex:0 1 220px; min-width:90px; font:12px system-ui,sans-serif; padding:4px 8px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); } .log-row.knx { color:#3a9d5d; } .log-row.knx-light { color:#c79a00; } /* lys = rav */ .log-row.knx-blind { color:#2f6df6; } /* gardin = blå */ .log-row.knx-heat { color:#e0662f; } /* varme = orange */ .log-head .ghost.on { background:var(--accent-soft); color:var(--accent); } .log-send { display:none; align-items:center; gap:6px; padding:8px 12px; border-top:1px solid var(--border); font-size:12px; } #logModal.dock .log-send { display:flex; } /* send-rækken kun i live/dock-mode */ @media (max-width:760px){ #logModal.dock .log-card { width:auto; max-width:none; left:6px; right:6px; margin:0 6px 6px; } } .log-head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px; font-weight:700; } .log-body { flex:1; overflow-y:auto; padding:8px 12px; font:12px ui-monospace,monospace; line-height:1.6; } .log-row { display:flex; gap:10px; padding:1px 0; border-bottom:1px solid var(--surface-2); } .log-ts { color:var(--muted); white-space:nowrap; flex:none; } .log-msg { color:var(--text); word-break:break-word; white-space:pre-wrap; } .caret { display:inline-block; width:12px; color:var(--muted); font-size:10px; } .item[draggable="true"], .ga-item[draggable="true"] { cursor:grab; } .item[draggable="true"]:active, .ga-item[draggable="true"]:active { cursor:grabbing; } #projTree.drop-target { outline:2px dashed var(--accent); outline-offset:-4px; background:var(--accent-soft); border-radius:8px; } .co.drop-target { outline:2px dashed var(--accent); background:var(--accent-soft); } .tabbar { display:flex; gap:4px; padding:6px 6px 0 22px; } .tab { background:transparent; border:none; border-bottom:2px solid transparent; padding:5px 10px; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; border-radius:6px 6px 0 0; } .tab:hover { color:var(--text); background:var(--surface-2); } .tab.active { color:var(--accent); border-bottom-color:var(--accent); } .tabbody { padding:4px 0 6px; } /* ETS6-lignende parameter-visning: venstre side-nav + højre panel */ .pview { display:flex; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; margin:6px 8px 8px 22px; min-height:200px; } .pnav { flex:0 0 180px; background:var(--surface-2); border-right:1px solid var(--border); padding:6px 0; } .pnav-item { padding:7px 12px; font-size:12px; font-weight:600; cursor:pointer; border-left:3px solid transparent; } .pnav-item:hover { background:var(--surface); } .pnav-item.active { color:var(--accent); border-left-color:var(--accent); background:var(--surface); } .pnav-sub { padding:5px 12px 5px 26px; font-size:12px; cursor:pointer; color:var(--muted); border-left:3px solid transparent; } .pnav-sub:hover { background:var(--surface); color:var(--text); } .pnav-sub.active { color:var(--accent); border-left-color:var(--accent); background:var(--surface); } /* sider med netop-adopterede ændringer fra "Read parameters" */ .pnav-item, .pnav-sub { display:flex; align-items:center; justify-content:space-between; gap:6px; } .pnav-changed { background:var(--rp-hl-bg,#fffbeb); } .pnav-dot, .chg-dot { color:var(--accent,#2563eb); font-size:10px; line-height:1; flex:0 0 auto; display:inline-block; animation:pnavpulse 1.5s ease-in-out infinite; } @keyframes pnavpulse { 0%,100% { transform:scale(1); text-shadow:0 0 0 rgba(37,99,235,0); opacity:.9; } 50% { transform:scale(1.6); text-shadow:0 0 9px rgba(37,99,235,.9); opacity:1; } } .ppanel { flex:1; padding:10px 14px; min-width:0; } .ppanel-title { font-weight:700; font-size:13px; margin-bottom:8px; color:var(--text); display:flex; align-items:center; gap:8px; } .ppanel-title .ptpl { margin-left:auto; display:flex; gap:5px; } .ppanel-title .ptpl button { font-size:11px; padding:3px 8px; } .psep-h { font-weight:700; font-size:12px; color:var(--text); margin:12px 0 4px; } .psep-rule { border-top:1px solid var(--border); margin:8px 0; } .prow { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:5px 0; font-size:12px; } .prow-top { align-items:flex-start; } .prow:hover { background:transparent; } /* netop-adopteret ændring fra "Read parameters" — tynd fremhævning */ .prow-changed { background:var(--rp-hl-bg,#fffbeb); box-shadow:inset 3px 0 0 var(--accent,#2563eb); border-radius:4px; padding-left:8px; margin-left:-8px; } /* Read-parameters ændrings-tabel: navn | Projekt | Device (per-linje valg) */ .rp-tbl { display:grid; grid-template-columns:1fr minmax(96px,max-content) minmax(96px,max-content); gap:5px 10px; align-items:center; max-height:52vh; overflow:auto; padding:2px; } .rp-hd { position:sticky; top:0; background:var(--card,#fff); z-index:1; padding-bottom:2px; } .rp-hcol { text-align:center; font-weight:700; font-size:12px; cursor:pointer; padding:4px 8px; border-radius:6px; color:var(--muted,#6b7280); } .rp-hcol:hover { background:var(--bg2,#f3f4f6); color:var(--fg,#111827); } .rp-grp { grid-column:1/-1; font-weight:600; font-size:11px; letter-spacing:.02em; color:var(--accent,#2563eb); margin-top:8px; padding:2px 0 3px; border-bottom:1px solid var(--bd,#e5e7eb); } .rp-nm { font-size:12.5px; padding-left:6px; } .rp-cell { text-align:center; padding:5px 12px; border-radius:8px; border:1px solid var(--bd,#e5e7eb); background:var(--card,#fff); cursor:pointer; font-size:12.5px; color:var(--muted,#6b7280); transition:all .12s; white-space:nowrap; } .rp-cell:hover { border-color:var(--accent,#2563eb); color:var(--fg,#111827); } .rp-cell.rp-sel { background:var(--accent,#2563eb); border-color:var(--accent,#2563eb); color:#fff; font-weight:700; box-shadow:0 1px 4px rgba(37,99,235,.35); } .rp-cell.rp-cb { font-size:16px; line-height:1; padding:5px 16px; } /* Read group addresses — ETS-lignende detaljetabel */ .rga-tbl { width:100%; border-collapse:collapse; font-size:12px; } .rga-tbl th { position:sticky; top:0; z-index:1; background:var(--card,#fff); text-align:left; padding:7px 9px; font-weight:700; color:var(--muted,#6b7280); font-size:11px; white-space:nowrap; border-bottom:2px solid var(--bd,#e5e7eb); } .rga-tbl td { padding:6px 9px; border-bottom:1px solid var(--bd,#f0f1f4); vertical-align:middle; } .rga-tbl tbody tr:hover { background:var(--bg2,#f7f8fa); } .rga-r-diff { background:rgba(37,99,235,.05); } .rga-num { color:var(--muted,#9aa1ad); text-align:right; white-space:nowrap; } .rga-name { font-weight:600; white-space:nowrap; } .rga-fn, .rga-dpt, .rga-len { color:var(--muted,#6b7280); white-space:nowrap; } .rga-flags { font-family:ui-monospace,Menlo,monospace; letter-spacing:3px; white-space:nowrap; } .rga-fl { color:var(--bd,#cbd5e1); } .rga-fl.on { color:var(--accent,#2563eb); font-weight:700; } .rga-ga { white-space:nowrap; } .rga-ga.rga-diff { background:var(--rp-hl-bg,#fffbeb); border-radius:4px; } .rga-pick { cursor:pointer; border-radius:6px; transition:background .12s,box-shadow .12s; } .rga-pick:hover { background:var(--bg2,#eef2ff); } .rga-pick.rga-sel { background:rgba(37,99,235,.12); box-shadow:inset 0 0 0 2px var(--accent,#2563eb); } /* Download til enhed — trin-liste */ .dl-step { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--bd,#e5e7eb); border-radius:10px; margin-bottom:8px; cursor:pointer; transition:border-color .12s,background .12s; } .dl-step:not(.dl-soon):hover { border-color:var(--accent,#2563eb); background:var(--bg2,#f5f8ff); } .dl-step.dl-soon { opacity:.55; cursor:default; } .dl-num { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--accent,#2563eb); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; } .dl-step.dl-soon .dl-num { background:var(--bd,#cbd5e1); } .dl-txt { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; } .dl-txt b { font-size:13px; } .dl-sub { font-size:11px; color:var(--muted,#6b7280); } .dl-go { color:var(--accent,#2563eb); font-size:16px; } .dl-soon-tag { font-size:10px; font-weight:700; color:var(--muted,#9aa1ad); border:1px solid var(--bd,#e5e7eb); border-radius:20px; padding:2px 8px; text-transform:uppercase; letter-spacing:.03em; } .dl-w { display:flex; align-items:center; gap:10px; font-family:ui-monospace,Menlo,monospace; font-size:12px; padding:2px 0; } .dl-w-addr { color:var(--accent,#2563eb); font-weight:700; min-width:56px; } .dl-w-hex { color:var(--fg,#111827); word-break:break-all; flex:1; } .dl-w-n { color:var(--muted,#9aa1ad); } .dl-hw { display:flex; align-items:flex-start; gap:9px; padding:6px 4px; border-bottom:1px solid var(--bd,#f0f1f4); } .dl-hw:last-child { border-bottom:none; } .dl-hw-ico { flex:0 0 auto; color:var(--accent,#2563eb); font-size:13px; margin-top:1px; } .dl-hw-txt { font-size:12.5px; line-height:1.45; } .dl-hw-txt b { color:var(--accent,#2563eb); } .plabel { color:var(--text); flex:1; line-height:1.4; } .pfield { display:flex; align-items:center; gap:6px; } .psuffix { color:var(--muted); font-size:11px; } .pinput { padding:4px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); font-size:12px; min-width:120px; max-width:220px; } .pcheck { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; } .pradios { display:flex; flex-direction:column; gap:3px; } .pradio { display:flex; align-items:center; gap:6px; font-size:12px; cursor:pointer; white-space:nowrap; } .pradio input { accent-color:var(--accent); } select.pinput { cursor:pointer; } .ctx-menu { position:fixed; z-index:3600; background:var(--surface); border:1px solid var(--border); border-radius:9px; min-width:170px; box-shadow:0 8px 28px rgba(20,30,60,.22); padding:4px; max-height:78vh; overflow-y:auto; overflow-x:hidden; } .ctx-head { padding:6px 10px 7px; font-size:11px; font-weight:700; color:var(--muted); border-bottom:1px solid var(--border); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; } .ctx-item { padding:7px 10px; font-size:13px; border-radius:6px; cursor:pointer; } .ctx-item:hover { background:var(--surface-2); } .cat-search { width:100%; box-sizing:border-box; font:inherit; font-size:13px; padding:6px 9px; margin:2px 0 6px; border:1px solid var(--border); border-radius:6px; } .cat-list { max-height:44vh; overflow-y:auto; } .cat-sec { padding:5px 10px 3px; font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; } .cat-row { display:flex; align-items:center; gap:6px; padding:5px 8px; } .cat-row .cat-star { flex:none; cursor:pointer; font-size:14px; line-height:1; padding:0 2px; } .cat-row .cat-ins { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ctx-item.danger { color:var(--danger); } .ctx-item.danger:hover { background:#fdecec; } .ctx-sep { border-top:1px solid var(--border); margin:4px 0; } /* Hover-tooltip: hvilke enheder/objekter en GA er linket til */ .ga-tip { position:fixed; z-index:1100; pointer-events:auto; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:7px 9px; max-width:380px; box-shadow:0 8px 28px rgba(20,30,60,.22); font-size:12px; } .ga-tip .gatip-head { font-weight:700; color:var(--accent); margin-bottom:5px; border-bottom:1px solid var(--border); padding-bottom:4px; } .ga-tip .gatip-row { padding:3px 6px; white-space:nowrap; border-radius:6px; cursor:pointer; } .ga-tip .gatip-row:hover { background:var(--accent); color:#fff; } .ga-tip .gatip-row:hover .gatip-obj, .ga-tip .gatip-row:hover .ga-addr { color:#fff; } .ga-tip .gatip-obj { color:var(--muted); } .ga-tip .gatip-empty { color:var(--muted); font-style:italic; padding:3px 6px; } .kind-badge { display:inline-block; margin-left:6px; padding:1px 6px; font-size:10px; font-weight:600; border:1px solid; border-radius:9px; vertical-align:middle; white-space:nowrap; } .pinput:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* ── Macro Guide System — player (subtitle-boks + spotlight) ── */ #guideOverlay { position:fixed; inset:0; z-index:4000; pointer-events:none; display:none; } #guideSpot { position:absolute; border-radius:10px; outline:3px solid #ff9b1e; box-shadow:0 0 0 9999px rgba(20,30,52,.14), 0 0 22px 5px rgba(255,150,30,.85); transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease; } /* Syntetisk markør + hover-highlight: viser hvor "musen" peger og hvilke typer der gennemgås før et valg (rigtig CSS :hover kan ikke udløses syntetisk). */ #guideCursor { position:fixed; z-index:4044; pointer-events:none; display:none; transition:left .42s cubic-bezier(.3,.1,.2,1), top .42s cubic-bezier(.3,.1,.2,1); filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); } .guide-hover { outline:2px solid var(--accent,#2f6df6) !important; outline-offset:1px; box-shadow:0 0 0 4px rgba(47,109,246,.16) !important; border-radius:5px; transition:outline .12s ease, box-shadow .12s ease; } /* Træk-spøgelse: visualiserer at et objekt (fx Kanal A) flyver over på blokken */ #guideDragGhost { position:fixed; z-index:4045; display:none; transform:translate(-50%,-50%); background:linear-gradient(135deg,#3576f6,#2f6df6); color:#fff; pointer-events:none; font:600 12px system-ui,sans-serif; padding:7px 12px; border-radius:9px; white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis; box-shadow:0 10px 28px rgba(20,60,160,.55), 0 0 0 2px rgba(255,255,255,.25) inset; } /* Kontrol-bjælke (knapper) — i nederste HØJRE hjørne, helt adskilt fra underteksten */ #guideBox { position:fixed; right:18px; bottom:18px; left:auto; transform:none; max-width:min(560px, calc(100vw - 36px)); z-index:4010; display:none; background:#0f1b30; color:#fff; border:1px solid #28406a; border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.45); padding:9px 14px; font:14px/1.4 system-ui,-apple-system,sans-serif; } /* Ledsage-afspiller: den ægte klasseværelses-optagelse i en flytbar PiP */ #guideRecVid { position:fixed; right:18px; top:70px; left:auto; z-index:4011; display:none; width:min(420px, calc(100vw - 36px)); background:#0b1424; border:1px solid #28406a; border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.5); overflow:hidden; } #guideRecVid .grv-bar { display:flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; background:#13233f; color:#fff; cursor:move; font:600 13px system-ui,sans-serif; } #guideRecVid .grv-t { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #guideRecVid .grv-x { background:none; border:0; color:#cdd; font-size:15px; cursor:pointer; padding:2px 6px; border-radius:6px; } #guideRecVid .grv-x:hover { background:#28406a; color:#fff; } #guideRecVid .grv-wrap { position:relative; } #guideRecVid video { display:block; width:100%; max-height:60vh; background:#000; } /* Status-stribe: viser AT optagelsen kører (equalizer) + mute — ingen scrubber */ #guideRecVid .grv-status { display:flex; align-items:center; gap:10px; padding:7px 12px; background:#13233f; color:#cfe0ff; font:600 12px system-ui,sans-serif; } #guideRecVid .grv-lbl { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #guideRecVid .grv-mute { background:none; border:0; color:#cfe0ff; font-size:15px; cursor:pointer; padding:2px 4px; } #guideRecVid .grv-eq { display:inline-flex; align-items:flex-end; gap:2px; height:14px; } #guideRecVid .grv-eq i { width:3px; height:4px; background:#46d169; border-radius:1px; } #guideRecVid.grv-playing .grv-eq i { animation:gEq .9s ease-in-out infinite; } #guideRecVid.grv-playing .grv-eq i:nth-child(2){ animation-delay:.15s; } #guideRecVid.grv-playing .grv-eq i:nth-child(3){ animation-delay:.3s; } #guideRecVid.grv-playing .grv-eq i:nth-child(4){ animation-delay:.45s; } @keyframes gEq { 0%,100%{ height:4px; } 50%{ height:14px; } } /* Lyd-kun (mik-fortælling): ingen sort boks — kun status-striben */ #guideRecVid.grv-audio video { display:none; } #guideRecVid.grv-audio .grv-wrap { background:linear-gradient(135deg,#15233f,#0b1424); } #guideRecVid .grv-play { position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; border:0; background:rgba(20,40,80,.82); color:#fff; font-size:26px; cursor:pointer; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.5); } #guideRecVid .grv-play:hover { background:rgba(40,70,130,.95); } #guideRecVid .grv-err { position:absolute; left:0; right:0; bottom:0; padding:7px 10px; background:rgba(140,20,30,.92); color:#fff; font:600 12px system-ui,sans-serif; text-align:center; } /* Selvstændig undertekst (film-style): sort 80%, fader ind/ud, placerbar (📍 i admin) */ #guideSub { position:fixed; left:50%; bottom:120px; transform:translateX(-50%); width:max-content; min-width:min(560px,82vw); max-width:min(1180px, calc(100vw - 48px)); z-index:4012; display:none; pointer-events:none; background:rgba(0,0,0,.8); color:#fff; border-radius:12px; padding:16px 28px; font:700 32px/1.3 system-ui,-apple-system,sans-serif; text-align:center; text-shadow:0 2px 10px rgba(0,0,0,.6); opacity:0; transition:opacity .35s ease; } #guideTitle { font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:#7fa6df; margin-bottom:4px; } #guideAuto { display:none; margin-top:10px; font-size:13px; color:#ffd27f; background:rgba(255,155,30,.12); border:1px solid rgba(255,155,30,.4); border-radius:8px; padding:6px 10px; } #guideAction { display:none; margin-top:8px; font-size:16px; font-weight:600; color:#bfe3ff; background:rgba(90,170,255,.12); border:1px solid rgba(90,170,255,.35); border-radius:8px; padding:6px 10px; } /* Typewriter-popup (auto-navngivning — kosmetisk gengivelse af prompt) */ #guidePrompt { position:fixed; top:120px; left:50%; transform:translateX(-50%); z-index:4015; background:#fff; color:#1f2733; border-radius:12px; box-shadow:0 20px 56px rgba(0,0,0,.38); padding:18px 20px; min-width:340px; max-width:90vw; font:14px system-ui,sans-serif; display:none; } #guidePrompt .gp-msg { font-weight:600; margin-bottom:10px; } #guidePrompt .gp-field { border:2px solid #2f6df6; border-radius:8px; padding:9px 11px; font-size:16px; background:#f7f9ff; min-height:22px; white-space:pre-wrap; } #guidePrompt .gp-caret { color:#2f6df6; font-weight:700; animation:gpBlink 1s steps(1) infinite; } @keyframes gpBlink { 50%{ opacity:0; } } #guidePrompt .gp-ok { margin-top:13px; display:inline-block; background:#2f6df6; color:#fff; border-radius:8px; padding:8px 18px; font-weight:600; transition:transform .1s, background .1s; } #guidePrompt .gp-ok.press { transform:scale(.93); background:#235ad1; } /* Række 1: info (trin + timestamp + tempo + sekundær-knap) */ #guideInfo { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; } #guideProg { font-size:13px; color:#9db4d6; white-space:nowrap; } #guideTime { font-size:13px; font-weight:700; color:#8fe3a8; white-space:nowrap; font-variant-numeric:tabular-nums; } /* Række 2: navigation — egne række, wrapper hvis smal (intet "flyver"/klippes) */ #guideBar { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; justify-content:flex-end; } .gspeed-wrap { display:inline-flex; align-items:center; gap:5px; font-size:14px; } #guideSpeed { width:84px; accent-color:#5aa0ff; cursor:pointer; vertical-align:middle; } #guideSpeedVal { font-size:12px; font-weight:700; color:#9db4d6; min-width:30px; font-variant-numeric:tabular-nums; } .gbtn { font:600 14px system-ui,sans-serif; cursor:pointer; border-radius:9px; padding:8px 14px; border:1px solid #34507e; background:#1b2c4c; color:#dde8fa; } .gbtn:hover { background:#243a63; } /* Kompakte ikon-knapper (tempo-rækken) — mindre visuel støj */ .gbtn.gmini { padding:6px 9px; font-size:15px; line-height:1; } #guidePause { min-width:104px; text-align:center; } /* Pause↔Fortsæt skifter ikke layout */ #guidePrev, #guideNext, #guideStop { min-width:90px; text-align:center; } .gbtn:disabled { opacity:.4; cursor:default; } .gbtn.gprimary { background:#2f6fd0; border-color:#2f6fd0; color:#fff; } .gbtn.gprimary:hover { background:#3a7fe0; } .gbtn.gstop { background:transparent; border-color:#5a3a3a; color:#ffb3b3; } .gbtn.gstop:hover { background:rgba(180,60,60,.2); } .guide-pulse { animation:guidePulse 1.4s ease-in-out infinite; } @keyframes guidePulse { 0%,100%{ box-shadow:0 0 0 9999px rgba(8,14,28,.55), 0 0 16px 3px rgba(255,155,30,.7);} 50%{ box-shadow:0 0 0 9999px rgba(8,14,28,.55), 0 0 30px 8px rgba(255,155,30,1);} } /* Recorder-bar + editor (admin) */ #guideRecBar { position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:4025; display:none; align-items:center; gap:12px; background:#7a1226; color:#fff; border-radius:12px; padding:10px 16px; box-shadow:0 12px 34px rgba(0,0,0,.45); font:14px system-ui,sans-serif; } #guideRecBar .recdot { width:12px; height:12px; border-radius:50%; background:#ff5b5b; animation:gRecBlink 1s steps(1) infinite; } @keyframes gRecBlink { 50%{ opacity:.2; } } #guideRecBar #grecLevel { width:54px; height:9px; border-radius:5px; background:rgba(255,255,255,.18); overflow:hidden; display:inline-block; vertical-align:middle; } #guideRecBar #grecLevel i { display:block; height:100%; width:0; background:#46d169; transition:width .06s linear; } #guideEditorModal { position:fixed; inset:0; z-index:4030; display:none; overflow:auto; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #guideEditorModal .ged-card { background:var(--surface); color:var(--text); max-width:900px; margin:28px auto; border-radius:14px; border:1px solid var(--border); box-shadow:0 22px 64px rgba(0,0,0,.45); padding:22px; } #guideEditorModal h2 { margin:0 0 4px; font-size:20px; } .ged-meta { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin:14px 0; } .ged-fld { display:flex; flex-direction:column; gap:3px; } .ged-fld label, .ged-step label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; } .ged-card input, .ged-card select, .ged-card textarea { font:13px system-ui,sans-serif; padding:6px 9px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); } .ged-card textarea { width:100%; resize:vertical; } .ged-step { border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin:10px 0; background:var(--surface-2); } .ged-step .ged-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:8px; } .ged-step .ged-num { font-weight:700; color:var(--accent); margin-right:auto; } .ged-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); } .ged-mini { font:600 12px system-ui; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:7px; padding:5px 9px; } .ged-mini:hover { background:var(--surface-2); } #gedCard > h2 { cursor:move; user-select:none; } #gedCard > h2::after { content:" ⠿"; color:var(--muted); font-size:14px; } .ged-head { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; } .ged-caret { color:var(--accent); font-size:12px; width:12px; } .ged-sum { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; } .ged-step.collapsed .ged-body { display:none; } .ged-step.open { box-shadow:0 0 0 2px var(--accent-soft, rgba(47,109,246,.18)); } #guideRecBar .recgrip { cursor:move; font-size:15px; opacity:.7; } #gedPreviewStop { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:4040; display:none; align-items:center; gap:10px; background:#173a17; color:#dff7df; border:1px solid #2f6f2f; border-radius:11px; padding:8px 12px; font:13px system-ui,sans-serif; box-shadow:0 10px 30px rgba(0,0,0,.4); } #gedPreviewStop .recgrip { cursor:move; opacity:.7; } #gedPosBox { position:fixed; left:50%; bottom:120px; transform:translateX(-50%); z-index:4045; width:max-content; max-width:min(900px, calc(100vw - 60px)); display:none; background:rgba(0,0,0,.82); color:#fff; border:2px dashed #5aa0ff; border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.5); padding:14px 26px; } #gedPosBox .gpos-grip { cursor:move; user-select:none; font-size:12px; color:#9db4d6; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; } #gedPosBox .gpos-text { font-size:32px; line-height:1.3; font-weight:700; text-align:center; } #gedPosBox .gpos-bar { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; } /* "Klik sparet"-opsummering til sidst i en guide */ #guideSummary { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4050; display:none; width:min(620px, calc(100vw - 40px)); background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.5); padding:22px 24px; font:14px system-ui,-apple-system,sans-serif; } #guideSummary .gsum-h { font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); } #guideSummary .gsum-big { font-size:26px; font-weight:800; margin:4px 0 14px; color:var(--accent); } #guideSummary .gsum-tbl { width:100%; border-collapse:collapse; font-size:14px; } #guideSummary .gsum-tbl th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); padding:4px 8px; border-bottom:1px solid var(--border); } #guideSummary .gsum-tbl td { padding:7px 8px; border-bottom:1px solid var(--border); } #guideSummary .gsum-tbl .ct { text-align:center; } #guideSummary .gsum-tbl .rt { text-align:right; } #guideSummary .gsum-tbl .mut { color:var(--muted); } #guideSummary .gsum-tbl .b { font-weight:700; } #guideSummary .gsum-tot td { border-top:2px solid var(--border); border-bottom:none; font-weight:800; } #guideSummary .gsum-note { margin-top:12px; font-size:12px; color:var(--muted); line-height:1.5; } /* Klon-progress-overlay (kopiér rum/etage/bygning) */ #cloneProg { position:fixed; inset:0; z-index:4060; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.55); backdrop-filter:blur(3px); } #cloneProg .cp-card { width:min(460px, calc(100vw - 40px)); background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.5); padding:22px 24px; font:14px system-ui,-apple-system,sans-serif; } #cloneProg .cp-title { font-size:18px; font-weight:700; margin-bottom:14px; } #cloneProg .cp-bar { height:12px; border-radius:7px; background:var(--surface-2); overflow:hidden; border:1px solid var(--border); } #cloneProg .cp-fill { height:100%; width:4%; background:var(--accent); border-radius:7px; transition:width .35s ease; } #cloneProg .cp-line { margin-top:10px; font-size:13px; color:var(--muted); } /* Scan-build fremdrift — LYST, høj-kontrast kort (genbrugte cp-* var scoped til #cloneProg → uden styling) */ #scanProg .cp-card { width:min(500px, calc(100vw - 40px)); background:var(--surface,#fff); color:var(--text,#0f172a); border:1px solid var(--border,#dbe2f0); border-radius:16px; box-shadow:0 26px 72px rgba(8,14,28,.5); padding:24px 26px; font:14px system-ui,-apple-system,sans-serif; } #scanProg .cp-title { font-size:20px; font-weight:800; color:var(--text,#0f172a); margin-bottom:16px; letter-spacing:-.2px; } #scanProg .cp-bar { height:13px; border-radius:8px; background:var(--surface-2,#eef1f7); overflow:hidden; border:1px solid var(--border,#e2e7f0); } #scanProg .cp-fill { height:100%; width:4%; border-radius:8px; transition:width .3s ease; background:linear-gradient(90deg,#3b82f6,#2563eb); box-shadow:0 0 12px rgba(37,99,235,.55); } #scanProg .cp-line { margin-top:15px; font-size:14.5px; font-weight:650; color:var(--text,#1e293b); line-height:1.45; } #scanProg .cp-sub { margin-top:7px; font-size:12.5px; color:var(--muted,#5b6b82); font-family:ui-monospace,monospace; } #scanProg .cp-bar { position:relative; overflow:hidden; } #scanProg .cp-fill.indet { width:40% !important; position:absolute; left:0; animation:scanIndet 1.15s cubic-bezier(.4,0,.2,1) infinite; } @keyframes scanIndet { 0%{ transform:translateX(-110%);} 100%{ transform:translateX(310%);} } /* Echo Teacher — session-panel + flash */ #echoPanel { position:fixed; top:60px; right:18px; z-index:4055; width:min(300px, calc(100vw - 36px)); background:#0f1b30; color:#fff; border:1px solid #28406a; border-radius:12px; box-shadow:0 16px 44px rgba(0,0,0,.5); padding:12px 14px; font:13px system-ui,sans-serif; } #echoPanel .echo-grip { cursor:move; user-select:none; margin-bottom:8px; } #echoPanel .echo-code { font-size:18px; letter-spacing:2px; color:#7fd3ff; } #echoPanel .echo-mode { display:flex; gap:6px; margin:10px 0; } #echoPanel .echo-mbtn { flex:1; font:600 11px system-ui; cursor:pointer; border:1px solid #34507e; background:#1b2c4c; color:#cfe6ff; border-radius:7px; padding:6px 4px; } #echoPanel .echo-mbtn.on { background:#2f6fd0; border-color:#2f6fd0; color:#fff; } #echoPanel .echo-roster { max-height:220px; overflow:auto; margin:6px 0; } #echoPanel .echo-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0; } #echoPanel .echo-grant { font:600 11px system-ui; cursor:pointer; border:1px solid #34507e; background:#1b2c4c; color:#cfe6ff; border-radius:7px; padding:4px 9px; } #echoPanel .echo-grant.on { background:#1f7a3a; border-color:#1f7a3a; color:#fff; } #echoPanel .echo-empty { color:#9db4d6; font-style:italic; padding:6px 0; } #echoPanel .echo-sub { color:#9db4d6; margin:6px 0; } #echoPanel .echo-foot { text-align:right; margin-top:10px; } .echo-flash { outline:3px solid #2f6df6 !important; outline-offset:2px; box-shadow:0 0 18px rgba(47,109,246,.7) !important; } #echoPanel .echo-kick { font:600 11px system-ui; cursor:pointer; border:1px solid #5a3a3a; background:transparent; color:#ffb3b3; border-radius:7px; padding:4px 8px; } #echoPanel .echo-kick:hover { background:rgba(180,60,60,.25); } .echo-cursor { position:fixed; z-index:4058; display:none; pointer-events:none; font-size:26px; color:#2f6df6; transform:translate(-3px,-4px); filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); transition:left .08s linear, top .08s linear; } .echo-cursor .ec-name { font:600 11px system-ui; color:#fff; background:#2f6df6; border-radius:6px; padding:1px 6px; margin-left:2px; vertical-align:6px; } #echoPanel .echo-cw { font:600 11px system-ui; cursor:pointer; border:1px solid #34507e; background:#1b2c4c; color:#cfe6ff; border-radius:7px; padding:4px 7px; opacity:.5; } #echoPanel .echo-cw.on { opacity:1; background:#1f7a3a; border-color:#1f7a3a; color:#fff; } /* Chat */ #echoChat { position:fixed; right:18px; bottom:18px; z-index:4057; width:min(320px,calc(100vw - 36px)); height:min(420px,70vh); display:none; flex-direction:column; background:#0f1b30; color:#fff; border:1px solid #28406a; border-radius:12px; box-shadow:0 16px 44px rgba(0,0,0,.5); font:13px system-ui,sans-serif; overflow:hidden; } #echoChat .ec-head { cursor:move; user-select:none; padding:10px 12px; font-weight:700; display:flex; align-items:center; gap:6px; } #echoChat .ec-x { margin-left:auto; background:none; border:0; color:#9db4d6; cursor:pointer; font-size:14px; } #echoChat input { margin:0 10px; padding:6px 9px; border:1px solid #34507e; border-radius:7px; background:#1b2c4c; color:#fff; } #echoChat .ec-msgs { flex:1; overflow:auto; padding:8px 12px; display:flex; flex-direction:column; gap:5px; } #echoChat .ec-msg { line-height:1.4; } #echoChat .ec-msg.tch b { color:#ffd27f; } #echoChat .ec-msg b { color:#7fd3ff; } #echoChat .ec-input { display:flex; gap:6px; padding:10px; } #echoChat .ec-input input { flex:1; margin:0; } /* Galleri */ #echoGallery { position:fixed; inset:0; z-index:4060; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.7); backdrop-filter:blur(3px); } #echoGallery .eg-card { width:min(1100px,calc(100vw - 40px)); max-height:90vh; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.5); padding:18px; overflow:auto; } #echoGallery .eg-head { font-size:18px; font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:12px; } #echoGallery .ec-x { margin-left:auto; background:none; border:0; cursor:pointer; font-size:16px; color:var(--muted); } #echoGallery .eg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; } #echoGallery .eg-tile { position:relative; aspect-ratio:4/3; background:#000; border-radius:10px; overflow:hidden; } #echoGallery .eg-tile video { width:100%; height:100%; object-fit:cover; } #echoGallery .eg-name { position:absolute; left:0; bottom:0; font:600 12px system-ui; color:#fff; background:rgba(0,0,0,.55); padding:3px 8px; } #echoGallery .eg-mod { position:absolute; top:6px; right:6px; display:flex; gap:5px; } #echoGallery .eg-ic { font-size:14px; cursor:pointer; border:0; border-radius:7px; padding:3px 7px; background:rgba(0,0,0,.6); color:#fff; } /* Planlagte timer */ #echoSchedule { position:fixed; inset:0; z-index:4061; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #echoSchedule .es-card { width:min(560px,calc(100vw - 40px)); max-height:88vh; overflow:auto; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.5); padding:20px; } #echoSchedule .es-head { font-size:18px; font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:14px; } #echoSchedule .ec-x { margin-left:auto; background:none; border:0; cursor:pointer; font-size:16px; color:var(--muted); } #echoSchedule .es-form { display:flex; flex-direction:column; gap:8px; padding-bottom:14px; border-bottom:1px solid var(--border); } #echoSchedule .es-form label { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; color:var(--muted); } #echoSchedule input { padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); } #echoSchedule .es-form > input { width:100%; } #echoSchedule .es-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); } #echoSchedule .es-meta { font-size:12px; color:var(--muted); margin-top:2px; } #echoSchedule .es-badge { padding:1px 7px; border-radius:9px; background:var(--surface-2); font-weight:600; } #echoSchedule .es-open .es-badge, #echoSchedule .es-live .es-badge { background:#1f7a3a; color:#fff; } #echoSchedule .es-ended { opacity:.55; } #echoSchedule .es-empty { color:var(--muted); padding:14px 0; } #echoSchedule .es-qr, #echoSchedule .es-join, #echoSchedule .es-del, #echoSchedule .es-edit { padding:6px 10px; } /* Åbne timer (elev-liste) — genbruger es-* udseendet */ #echoOpen { position:fixed; inset:0; z-index:4061; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #echoOpen .es-card { width:min(560px,calc(100vw - 40px)); max-height:88vh; overflow:auto; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.5); padding:20px; } #echoOpen .es-head { font-size:18px; font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:14px; } #echoOpen .ec-x { margin-left:auto; background:none; border:0; cursor:pointer; font-size:16px; color:var(--muted); } #echoOpen .es-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); } #echoOpen .es-meta { font-size:12px; color:var(--muted); margin-top:2px; } #echoOpen .es-badge { padding:1px 7px; border-radius:9px; background:var(--surface-2); font-weight:600; } #echoOpen .es-open .es-badge, #echoOpen .es-live .es-badge { background:#1f7a3a; color:#fff; } #echoOpen .es-empty { color:var(--muted); padding:14px 0; } /* QR-kode */ #echoQR { position:fixed; inset:0; z-index:4062; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.7); backdrop-filter:blur(3px); } #echoQR .eq-card { background:#fff; color:#1f2733; border-radius:16px; padding:24px; text-align:center; box-shadow:0 26px 70px rgba(0,0,0,.5); } #echoQR .eq-card img { display:block; margin:0 auto; } #echoQR .eq-code { font:700 18px system-ui; letter-spacing:2px; margin:12px 0 4px; } #echoQR .eq-hint { font:13px system-ui; color:#6b7686; max-width:240px; margin:0 auto 12px; line-height:1.4; } #echoQR #eqLink { display:inline-block; cursor:pointer; } #echoQR textarea { width:100%; min-height:52px; margin:4px 0 10px; padding:8px 10px; border:1px solid #d8dee8; border-radius:8px; font:13px system-ui; resize:vertical; box-sizing:border-box; } #echoQR .eq-btns { display:flex; gap:8px; justify-content:center; } #echoQR .eq-recip { text-align:left; margin-top:12px; border-top:1px solid #e5e9f0; padding-top:10px; } #echoQR .eq-rhead { font-weight:700; margin-bottom:6px; font-size:13px; } #echoQR .eq-rlist { max-height:200px; overflow:auto; margin-bottom:10px; } #echoQR .eq-r { display:block; padding:3px 2px; font-size:13px; color:#222; } #echoQR .eq-recip #eqSend { width:100%; } /* Venteværelse (nedtælling) */ #echoWait { position:fixed; inset:0; z-index:4063; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.72); backdrop-filter:blur(4px); } #echoWait .ew-card { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:18px; box-shadow:0 26px 70px rgba(0,0,0,.5); padding:28px 32px; text-align:center; max-width:360px; } #echoWait .ew-emoji { font-size:42px; } #echoWait .ew-title { font-size:20px; font-weight:800; margin:6px 0 2px; } #echoWait .ew-sub { color:var(--muted); font-size:14px; } #echoWait .ew-count { font:800 40px/1.1 system-ui; color:var(--accent); margin:16px 0 6px; letter-spacing:1px; } #echoWait .ew-note { color:var(--muted); font-size:13px; margin-bottom:16px; line-height:1.4; } /* Optagelser */ #echoRecs { position:fixed; inset:0; z-index:4061; display:none; align-items:center; justify-content:center; background:rgba(8,14,28,.6); backdrop-filter:blur(3px); } #echoRecs .es-card { width:min(600px,calc(100vw - 40px)); max-height:88vh; overflow:auto; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.5); padding:20px; } #echoRecs .es-head { font-size:18px; font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:14px; } #echoRecs .ec-x { margin-left:auto; background:none; border:0; cursor:pointer; font-size:16px; color:var(--muted); } #echoRecs .es-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); } #echoRecs .es-meta { font-size:12px; color:var(--muted); margin-top:2px; } #echoRecs .es-empty { color:var(--muted); padding:14px 0; } #echoRecs .rec-badge { font-size:11px; font-weight:700; padding:2px 7px; border-radius:10px; white-space:nowrap; } #echoRecs .rec-badge.used { background:rgba(70,130,90,.22); color:#3a9d5d; } #echoRecs .rec-badge.free { background:rgba(120,120,120,.18); color:var(--muted); } #echoRecs a.gbtn { text-decoration:none; } #echoPanel .echo-av { display:flex; gap:6px; margin-top:8px; } #echoVideos { position:fixed; left:14px; bottom:14px; z-index:4056; display:none; flex-wrap:wrap; gap:8px; max-width:46vw; } #echoVideos .echo-tile { position:relative; width:180px; height:135px; background:#000; border:1px solid #28406a; border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.4); } #echoVideos .echo-tile video { width:100%; height:100%; object-fit:cover; } #echoVideos .echo-vlabel { position:absolute; left:0; bottom:0; right:0; font:600 11px system-ui; color:#fff; background:rgba(0,0,0,.55); padding:2px 6px; } /* Eget billede — frit flytbart PiP */ #echoSelf { position:fixed; left:16px; top:72px; z-index:4059; width:180px; height:135px; display:none; background:#000; border:2px solid #2f6df6; border-radius:10px; overflow:hidden; cursor:move; box-shadow:0 8px 24px rgba(0,0,0,.5); } #echoSelf video { width:100%; height:100%; object-fit:cover; pointer-events:none; } #echoSelf .echo-vlabel { position:absolute; left:0; bottom:0; font:600 11px system-ui; color:#fff; background:rgba(47,109,246,.85); padding:2px 7px; } /* ════════ MOBIL (smartphone) — stak layout, pak header, fuld-skærms paneler ════════ */ @media (max-width: 760px){ /* Header pakkes på flere rækker; nav scrolles vandret */ header { height:auto; flex-wrap:wrap; padding:7px 9px; gap:5px 6px; } header h1, .brand { font-size:14px; } header input { padding:5px 7px; font-size:13px; } .hdr-spacer { display:none; } #projName, header input[type="text"] { max-width:42vw; } .seg { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; } .seg button { font-size:12px; padding:6px 9px; white-space:nowrap; } header .btn, header button, header select { font-size:12px; padding:6px 8px; } /* Hovedvisninger: én kolonne, naturlig højde, side-scroll */ .cols, .bcols, .vcols { grid-template-columns:1fr !important; height:auto !important; min-height:calc(100vh - 110px); padding:8px; gap:8px; } .cols > *, .bcols > *, .vcols > * { max-height:none; } .panel, .col, .card { min-width:0; } /* To-pane-visning: fane-skifter viser én pane ad gangen i fuld bredde */ .vcols .vtabs { display:flex; gap:8px; position:sticky; top:0; z-index:5; padding:2px 0 8px; background:var(--bg); } .vcols.m-left #visualRightPanel { display:none; } .vcols.m-right #visualLeftPanel { display:none; } #visualLeftPanel, #visualRightPanel { min-height:calc(100vh - 170px); } /* Enheder-visningen: 3 faner (Katalog / Projekt / GA'er), én pane ad gangen */ .cols .vtabs { display:flex; gap:8px; position:sticky; top:0; z-index:5; padding:2px 0 8px; background:var(--bg); } .cols.m-cat #colProject, .cols.m-cat #colGa { display:none; } .cols.m-prj #colCatalog, .cols.m-prj #colGa { display:none; } .cols.m-ga #colCatalog, .cols.m-ga #colProject { display:none; } #colCatalog, #colProject, #colGa { min-height:calc(100vh - 170px); } /* Større tap-mål inde i panelerne */ .vsp-row, .vdev-head, .vdev .vch { min-height:38px; } /* Modaler/iframes fylder ~hele skærmen */ .cfgframe-card, #guideEditorModal .ged-card, #echoSchedule .es-card, #echoOpen .es-card, #echoRecs .es-card { width:96vw !important; max-width:96vw !important; max-height:90vh !important; } iframe { max-width:96vw; } /* Echo: paneler/overlays tilpasses lille skærm */ #echoPanel { right:8px; left:8px; top:auto; bottom:8px; width:auto; max-width:none; } #echoChat { right:6px; left:6px; bottom:6px; width:auto; height:60vh; } #echoSelf { width:120px; height:90px; } #echoVideos { left:6px; bottom:6px; max-width:60vw; } #echoVideos .echo-tile { width:120px; height:90px; } #guideSub { width:auto; min-width:0; left:8px; right:8px; max-width:none; transform:none; font-size:22px; padding:12px 16px; } #guideBox { right:6px; left:6px; bottom:6px; transform:none; max-width:none; } #guideRecVid { right:6px; left:6px; top:60px; width:auto; } #guideBox #guideBar { flex-wrap:wrap; } #guideRecBar { left:6px; right:6px; transform:none; flex-wrap:wrap; } .gbtn, .ged-mini, .echo-mbtn, .echo-grant, .echo-kick, .echo-cw { min-height:34px; } #gedPosBox, #cloneProg .cp-card, #guideSummary { width:94vw !important; max-width:94vw !important; } /* Større tap-mål i kontekstmenuer */ .ctx-item { padding:10px 12px; } /* Login: fyld HELE skærmen — kant til kant, ingen mørke bjælker */ #authGate.show { align-items:stretch; justify-content:stretch; } #authGate .auth-card { width:100vw; max-width:100vw; min-width:0; min-height:100vh; min-height:100dvh; border-radius:0; box-shadow:none; margin:0; display:flex; flex-direction:column; justify-content:center; padding:calc(env(safe-area-inset-top) + 24px) 22px calc(env(safe-area-inset-bottom) + 24px); } #authSplash { max-width:220px; } #authForm input, .auth-go { padding:14px 13px; font-size:16px; } /* 16px = ingen iOS-zoom */ /* Blobs skjules — det hvide kort dækker alligevel hele skærmen */ .auth-bg { display:none; } /* Splash på mobil: stort logo tegnes → skrumper til normal → login-felter vises. Felterne er display:none indtil #authGate.reveal, så iOS' autofill-prompt ikke dukker op før vi "hopper over" til login-felterne. */ #authSplash { transform:scale(1.5); transform-origin:center 45%; animation:logoShrink .6s cubic-bezier(.4,0,.2,1) 2.9s forwards; } #authGate:not(.reveal) .auth-sub, #authGate:not(.reveal) #authForm, #authGate:not(.reveal) .auth-switch, #authGate:not(.reveal) .auth-lang { display:none; } #authGate.reveal .auth-sub, #authGate.reveal #authForm, #authGate.reveal .auth-switch, #authGate.reveal .auth-lang { opacity:0; animation:authReveal .45s ease forwards; } }