/* LiftCloud · operations console mockup
   Aesthetic: industrial 24/7 monitoring; dense; mechanical typography;
   one accent palette (signal/live/warn/alert) on a deep blue-black field. */

@property --floor {
  syntax: '<integer>';
  inherits: false;
  initial-value: 1;
}

:root {
  --shaft-floors: 9;
  --floor-h: 22px;

  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;

  --t: cubic-bezier(.4, 0, .2, 1);

  --display: "Bricolage Grotesque", "Söhne", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

/* ─── Theme: Dark (default) — slightly lifted from absolute black so it
   feels like a low-key operations room rather than a void. ─────────────── */
:root[data-theme="dark"] {
  --bg:           #0E141B;
  --bg-1:         #161E27;
  --bg-2:         #1B2530;
  --bg-3:         #21303D;
  --line:         #283543;
  --line-2:       #354556;
  --line-bright:  rgba(255,255,255,.08);
  --text:         #E6EAF0;
  --text-2:       #9AA8B7;
  --text-3:       #5C6B7A;
  --text-dim:     #3A4654;

  --ok:           #00C896;
  --ok-dim:       rgba(0,200,150,.14);
  --warn:         #FFB147;
  --warn-dim:     rgba(255,177,71,.14);
  --alert:        #FF5470;
  --alert-dim:    rgba(255,84,112,.16);
  --info:         #7AAEFF;
  --live:         #34D8FF;
  --live-glow:    rgba(52,216,255,.22);

  --bg-topbar:    rgba(14,20,27,.78);
  --cab-shadow:   rgba(0,0,0,.4);

  --bg-grain:
    radial-gradient(ellipse 1200px 800px at 70% -10%, rgba(52,216,255,.04), transparent 60%),
    radial-gradient(ellipse 800px 600px at -10% 120%, rgba(0,200,150,.03), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}

/* ─── Theme: Dim — soft graphite, easier on long sessions ─────────────── */
:root[data-theme="dim"] {
  --bg:           #1F242C;
  --bg-1:         #262C36;
  --bg-2:         #2C3441;
  --bg-3:         #34404F;
  --line:         #3A4555;
  --line-2:       #4A586B;
  --line-bright:  rgba(255,255,255,.10);
  --text:         #E2E5EB;
  --text-2:       #A4ADBA;
  --text-3:       #6F7989;
  --text-dim:     #4A5260;

  --ok:           #1FCFA0;
  --ok-dim:       rgba(31,207,160,.14);
  --warn:         #FFBA5C;
  --warn-dim:     rgba(255,186,92,.14);
  --alert:        #FF6680;
  --alert-dim:    rgba(255,102,128,.16);
  --info:         #84B6FF;
  --live:         #46DCFF;
  --live-glow:    rgba(70,220,255,.22);

  --bg-topbar:    rgba(31,36,44,.78);
  --cab-shadow:   rgba(0,0,0,.32);

  --bg-grain:
    radial-gradient(ellipse 1200px 800px at 70% -10%, rgba(70,220,255,.05), transparent 60%),
    radial-gradient(ellipse 800px 600px at -10% 120%, rgba(31,207,160,.04), transparent 60%);
}

/* ─── Theme: Light — warm paper, ink-style typography. Same accent
   palette but desaturated to read on cream backgrounds. ───────────────── */
:root[data-theme="light"] {
  --bg:           #EFEBDF;
  --bg-1:         #F8F5EB;
  --bg-2:         #FFFFFF;
  --bg-3:         #FFFFFF;
  --line:         #D7D0BD;
  --line-2:       #B5AC97;
  --line-bright:  rgba(20,30,40,.10);
  --text:         #15191F;
  --text-2:       #4F5862;
  --text-3:       #7E8893;
  --text-dim:     #B5BAC0;

  --ok:           #008A5F;
  --ok-dim:       rgba(0,138,95,.10);
  --warn:         #B86E13;
  --warn-dim:     rgba(184,110,19,.10);
  --alert:        #C9304B;
  --alert-dim:    rgba(201,48,75,.10);
  --info:         #2B5BB7;
  --live:         #006C8E;
  --live-glow:    rgba(0,108,142,.18);

  --bg-topbar:    rgba(248,245,235,.82);
  --cab-shadow:   rgba(20,30,40,.18);

  --bg-grain:
    radial-gradient(ellipse 1400px 900px at 80% -10%, rgba(0,138,95,.05), transparent 65%),
    radial-gradient(ellipse 800px 600px at -10% 120%, rgba(0,108,142,.04), transparent 60%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  font-feature-settings: "ss01", "cv11";
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  min-height: 100vh;
}

body {
  /* Background atmosphere — varies per theme via --bg-grain. */
  background-image: var(--bg-grain);
  transition: background-color .25s var(--t), color .25s var(--t);
}

::selection { background: var(--live); color: var(--bg); }

a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }
input, select { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
ul, ol { list-style: none; }

/* ─── Layout ────────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}

.sidebar { grid-area: sidebar; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.topbar  { grid-area: topbar; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 24px; padding: 0 24px; background: var(--bg-topbar); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 5; }
.main    { grid-area: main; padding: 28px 32px 64px; max-width: 1480px; }

/* ─── Brand & sidebar ───────────────────────────────────── */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  height: 56px;
}

.brand-mark {
  width: 22px;
  height: 28px;
  display: grid;
  grid-template-rows: 2px 1fr 2px;
  gap: 4px;
}
.brand-mark span:nth-child(1),
.brand-mark span:nth-child(3) { background: var(--text); }
.brand-mark span:nth-child(2) {
  background: var(--ok);
  margin: 0 3px;
  align-self: stretch;
  position: relative;
}
.brand-mark span:nth-child(2)::after {
  content: '';
  position: absolute;
  inset: 30% 35%;
  background: var(--bg);
}

.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  font-feature-settings: "ss01";
}
.brand-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-transform: uppercase;
}

.nav { padding: 16px 0 24px; flex: 1; }
.nav-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  height: 30px;
  color: var(--text-2);
  position: relative;
  transition: color .12s var(--t), background .12s var(--t);
}
.nav-item:hover { color: var(--text); background: var(--bg-1); }

.nav-floor {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0;
  text-align: right;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}
.nav-label { font-size: 13px; font-weight: 400; }
.nav-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nav-meta--alert { color: var(--alert); }
.nav-meta--warn { color: var(--warn); }

.nav-item.is-active { color: var(--text); background: linear-gradient(90deg, color-mix(in srgb, var(--live) 10%, transparent), transparent 80%); }
.nav-item.is-active .nav-floor { color: var(--live); border-right-color: var(--live); }
.nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--live);
  box-shadow: 0 0 10px var(--live-glow);
}

.sidebar-foot { padding: 14px 20px 20px; border-top: 1px solid var(--line); }
.bandwidth { display: flex; flex-direction: column; gap: 8px; }
.bandwidth-label {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-3);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bandwidth-bar {
  height: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.bandwidth-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ok), var(--live));
  position: relative;
}
.bandwidth-numbers {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 11px;
}
.bandwidth-current { color: var(--text); font-weight: 500; }
.bandwidth-current .num { font-size: 14px; }
.bandwidth-total { color: var(--text-3); }

/* ─── Top bar ─────────────────────────────────────────── */

.crumbs { display: flex; align-items: center; gap: 8px; }
.crumb { font-size: 13px; color: var(--text-2); }
.crumb:last-child { color: var(--text); font-weight: 500; }
.crumb-sep { color: var(--text-dim); }

.search {
  flex: 1;
  max-width: 540px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 32px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  font-family: var(--mono);
}
.search:focus-within { border-color: var(--live); }
.search-icon { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
.search-input { flex: 1; font-size: 12px; color: var(--text); }
.search-input::placeholder { color: var(--text-3); }
.search kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 2px 6px;
}

.topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.theme-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--bg-1);
  padding: 2px;
  height: 28px;
}
.theme-switch button {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 9px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  transition: color .12s var(--t), background .12s var(--t);
}
.theme-switch button:hover { color: var(--text-2); }
.theme-switch button[aria-pressed="true"] {
  color: var(--text);
  background: var(--bg-3);
}

/* Lang switch — same compact pattern as theme-switch */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--bg-1);
  padding: 2px;
  height: 28px;
}
.lang-switch button {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--text-3);
  padding: 0 8px;
  height: 22px;
}
.lang-switch button:hover { color: var(--text-2); }
.lang-switch button[aria-pressed="true"] {
  color: var(--text);
  background: var(--bg-3);
}

/* Role dropdown (Admin / Tekniker / Kund / Gäst) */
.role-dropdown {
  position: relative;
}
.role-dropdown[open] { z-index: 10; }
.role-pill {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.role-pill::-webkit-details-marker { display: none; }
.role-pill::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--ok);
  border-radius: 50%;
  box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 70%, transparent);
}
[data-role="kund"] .role-pill::before,
[data-role="gast"] .role-pill::before { background: var(--info); box-shadow: 0 0 6px color-mix(in srgb, var(--info) 60%, transparent); }
[data-role="tekniker"] .role-pill::before { background: var(--warn); box-shadow: 0 0 6px color-mix(in srgb, var(--warn) 60%, transparent); }
.role-caret { color: var(--text-3); font-size: 9px; }
.role-pill:hover { border-color: var(--line-2); }

.role-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  min-width: 280px;
  box-shadow: 0 8px 24px var(--cab-shadow);
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.role-menu button {
  text-align: left;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background .12s var(--t);
}
.role-menu button:last-child { border-bottom: 0; }
.role-menu button:hover { background: var(--bg-2); }
.role-menu button b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.role-menu button span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: .04em;
}

/* Hide elements that require Tekniker-or-higher role */
[data-role="kund"] .req-tech,
[data-role="gast"] .req-tech {
  display: none !important;
}

/* ─── Pending lifts (vantande.html) ─────────────────────────────── */

.pending-info {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--info);
  padding: 16px 20px;
  align-items: start;
  margin-bottom: 18px;
}
.pending-info-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--info);
}
.pending-info-icon svg { width: 18px; height: 18px; }
.pending-info-text { display: flex; flex-direction: column; gap: 6px; }
.pending-info-text p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}
.pending-info-text p b { color: var(--text); font-weight: 600; }
.pending-info-meta {
  font-family: var(--mono);
  font-size: 11px !important;
  color: var(--text-3) !important;
}
.pending-info-meta code {
  font-family: var(--mono);
  background: var(--bg-2);
  padding: 1px 6px;
  border: 1px solid var(--line);
  color: var(--text);
}

.pending-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  margin-bottom: 10px;
  padding: 0;
}
.pending-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.pending-id {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pending-serial {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
}
.pending-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--text-3);
  padding: 2px 7px;
}
.pending-tag--new {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 50%, var(--line-2));
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.pending-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
}
.pending-meta > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pending-meta .meta-key {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pending-meta .meta-val { color: var(--text); }

.pending-thor-config {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--info) 4%, var(--bg-1));
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.thor-config-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--info);
  white-space: nowrap;
}
.thor-config-items {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-2);
}
.thor-config-items b { color: var(--text); font-weight: 600; }

.pending-claim {
  padding: 14px 20px 18px;
}
.pending-claim > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bg);
  background: var(--live);
  padding: 7px 14px;
  cursor: pointer;
  list-style: none;
  transition: filter .12s var(--t);
}
.pending-claim > summary::-webkit-details-marker { display: none; }
.pending-claim > summary:hover { filter: brightness(1.1); }
.pending-claim[open] > summary { background: var(--bg-3); color: var(--text); border: 1px solid var(--live); margin-bottom: 14px; }

.claim-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 18px;
}
.claim-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
}

/* Empty state */
.pending-empty {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 64px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.pending-empty-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ok);
  margin-bottom: 8px;
}
.pending-empty-icon svg { width: 32px; height: 32px; }
.pending-empty h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.012em;
}
.pending-empty p {
  font-size: 13px;
  color: var(--text-2);
  max-width: 44ch;
  line-height: 1.6;
}

/* ─── Landing page (index.html) ─────────────────────────────────── */

body.landing {
  display: block;
}
body.landing .app { display: none; }   /* landing doesn't use the app shell */

.landing-top {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-topbar);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.landing-top .brand { text-decoration: none; }

.landing-nav {
  display: flex;
  gap: 22px;
  margin-left: 24px;
}
.landing-nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-2);
  transition: color .12s var(--t);
}
.landing-nav a:hover { color: var(--text); }

.landing-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-primary--lg,
.btn-ghost--lg {
  font-size: 13px;
  padding: 10px 18px;
  letter-spacing: .04em;
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 60px;
  padding: 80px 40px 80px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: center;
}
.hero-text { max-width: 580px; }
.hero-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-text h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}
.hero-accent { color: var(--live); }
.hero-tagline {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.012em;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.3;
}
.hero-blurb {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 32px;
  max-width: 52ch;
}
.hero-cta {
  display: flex;
  gap: 12px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: .02em;
  flex-wrap: wrap;
}
.hero-meta b { color: var(--text); font-weight: 600; }
.hero-meta-sep { color: var(--text-dim); }

.hero-illust {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.hero-illust svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}
.hero-illust-caption {
  position: absolute;
  top: 30px;
  right: 30px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--live);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-illust-caption::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--live);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--live);
  animation: blink 1.4s ease-in-out infinite;
}

/* Hero cab animation — cycles 8 → 3 → 5 → 1 → repeat */
@keyframes hero-cab-cycle {
  0%, 8%   { transform: translateY(0); }
  18%, 26% { transform: translateY(-180px); }
  36%, 44% { transform: translateY(-90px); }
  54%, 62% { transform: translateY(-225px); }
  72%, 80% { transform: translateY(-270px); }
  92%, 100% { transform: translateY(0); }
}
.hero-cab {
  animation: hero-cab-cycle 14s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes hero-doors-cycle {
  0%, 8%, 16%, 18%, 26%, 28%, 36%, 44%, 46%, 54%, 62%, 64%, 72%, 80%, 82%, 92%, 100% { transform: translateX(0); }
  /* Open windows when stopped */
  10%, 14%   { /* placeholder */ }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cab { animation: none; }
  .hero-illust-caption::before { animation: none; }
}

/* Section primitive — landing variant */
.landing-section-head {
  text-align: center;
  margin-bottom: 56px;
}
.landing-section-head.login-head { text-align: left; margin-bottom: 24px; }
.landing-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--copper, #B87333);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.landing-section-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.022em;
  line-height: 1.1;
  max-width: 22ch;
  margin: 0 auto;
}
.landing-section-head.login-head h2 { margin: 0; }

.features,
.how,
.security,
.login-section {
  padding: 80px 40px;
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

/* Features */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--live);
  margin-bottom: 8px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.012em;
  line-height: 1.15;
}
.feature p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}
.feature ul {
  list-style: none;
  padding: 0;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feature ul li {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  padding-left: 14px;
  position: relative;
}
.feature ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 1px;
  background: var(--copper, #B87333);
}

/* How */
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.how-step {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 28px 26px;
  position: relative;
}
.how-num {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -0.04em;
  color: var(--copper, #B87333);
  line-height: 1;
  margin-bottom: 16px;
}
.how-step h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.012em;
  margin-bottom: 10px;
}
.how-step p { font-size: 14px; line-height: 1.6; color: var(--text-2); margin-bottom: 8px; }
.how-step p:last-child { margin-bottom: 0; }
.how-step code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-2);
  padding: 1px 6px;
  border: 1px solid var(--line);
  color: var(--text);
}
.how-fields {
  list-style: none;
  padding: 0;
  margin: 6px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}
.how-fields li b { color: var(--text); font-weight: 600; }

/* Security */
.sec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.sec-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ok);
  padding: 24px 26px;
}
.sec-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}
.sec-card p { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.sec-card p b { color: var(--text); font-weight: 600; }

/* Login + Contact */
.login-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.login-block,
.contact-block {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 32px 32px;
}
.login-block .btn-primary { margin: 8px 0 12px; }
.login-block p,
.contact-block p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 12px;
}
.login-hint {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
}
.login-hint a { color: var(--live); }
.login-hint a:hover { text-decoration: underline; }

.contact-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
}
.contact-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
}
.c-label {
  color: var(--text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 10.5px;
  align-self: center;
}
.contact-list a { color: var(--live); }

/* Footer */
.landing-foot {
  border-top: 1px solid var(--line);
  padding: 24px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bg-1);
}
.landing-foot .foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.landing-foot .brand-mark {
  width: 18px; height: 22px;
  display: grid; grid-template-rows: 2px 1fr 2px; gap: 3px;
}
.landing-foot .brand-mark span:nth-child(1),
.landing-foot .brand-mark span:nth-child(3) { background: var(--text); }
.landing-foot .brand-mark span:nth-child(2) { background: var(--ok); margin: 0 2px; }
.landing-foot .brand-name { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; }
.foot-links {
  display: flex;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}
.foot-links a { color: var(--text-2); }
.foot-links a:hover { color: var(--text); }
.foot-sep { color: var(--text-dim); }
.foot-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: .04em;
}

/* Responsive */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 60px 24px; text-align: left; }
  .hero-illust { max-width: 280px; margin: 0 auto; }
  .feature-grid, .how-steps { grid-template-columns: 1fr; }
  .sec-grid, .login-section { grid-template-columns: 1fr; }
  .landing-nav { display: none; }
  .landing-top { padding: 14px 20px; }
}

/* ─── Form (Lägg till hiss) ─────────────────────────────────────── */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-card legend {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.005em;
  color: var(--text);
  padding: 0 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  margin-left: -8px;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .14em;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text-3);
}
.form-card--span2 { grid-column: span 2; }
.form-card--accent {
  border-color: color-mix(in srgb, var(--live) 30%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--live) 4%, transparent), transparent 60%),
    var(--bg-1);
}

.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-2);
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.form-row label em {
  font-style: normal;
  font-size: 9.5px;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: .04em;
}
.form-row input[type="text"],
.form-row select {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 9px 12px;
  letter-spacing: 0;
  transition: border-color .12s var(--t);
  width: 100%;
}
.form-row input[type="text"]:focus,
.form-row select:focus {
  border-color: var(--live);
  outline: 0;
}
.form-row input[type="text"]::placeholder { color: var(--text-3); }

.form-row--split-3 { display: grid; grid-template-columns: 1fr 2fr 1.4fr; gap: 14px; }
.form-row--split-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.form-row--split-3 > div,
.form-row--split-4 > div { display: flex; flex-direction: column; gap: 6px; }
.form-btn {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: var(--bg-2);
}

.form-hint {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: .04em;
}
.form-hint code {
  font-family: var(--mono);
  background: var(--bg-2);
  padding: 1px 5px;
  border: 1px solid var(--line);
  color: var(--text);
}

.form-help {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
}
.form-help b { color: var(--text); }

/* Door type selector */
.door-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.door-type input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.door-type-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 16px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: border-color .12s var(--t), background .12s var(--t);
  align-items: stretch;
  position: relative;
}
.door-type-card:hover { border-color: var(--line-2); }
.door-type input[type="radio"]:checked + .door-type-card {
  border-color: var(--live);
  background: color-mix(in srgb, var(--live) 5%, var(--bg));
}
.door-type input[type="radio"]:checked + .door-type-card::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px; height: 16px;
  background: var(--live);
  clip-path: polygon(20% 50%, 0 70%, 40% 100%, 100% 30%, 80% 10%, 40% 70%);
}
.door-type-illust {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 8px;
}
.door-type-illust svg { width: 100%; height: auto; max-height: 200px; }
.door-type-info { display: flex; flex-direction: column; gap: 6px; }
.door-type-info h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
}
.door-type-info p {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
}

/* Cloud onboarding inside form (compact qr block) */
.onb-cloud {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.qr-block {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 18px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: start;
}
.qr-mock-wrap {
  background: white;
  padding: 8px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}
.qr-mock { width: 96px; height: 96px; display: block; }
.qr-text { display: flex; flex-direction: column; gap: 6px; }
.qr-text h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
}
.qr-text p {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.qr-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.form-footer {
  margin-top: 18px;
  padding: 18px 22px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.form-footer p {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 65ch;
}
.form-footer p b { color: var(--text); }
.form-footer-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Conditional show: Hängd sida only when slagdörr is selected */
[data-show-when] { display: none; }
.form-card--accent:has(input[value="slag"]:checked) [data-show-when="slag"] { display: flex; flex-direction: column; gap: 6px; }
/* Optional banner explaining what's hidden — only shown for kund/gast */
[data-role="kund"] body::before,
[data-role="gast"] body::before {
  /* placeholder for future banner */
}
.env-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--ok);
  background: var(--ok-dim);
  border: 1px solid var(--ok);
  padding: 3px 8px;
  text-transform: uppercase;
}

.topbar-btn {
  position: relative;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--text-2);
  transition: color .12s var(--t), border-color .12s var(--t);
}
.topbar-btn:hover { color: var(--text); border-color: var(--line-2); }
.topbar-btn .badge {
  position: absolute;
  top: -5px; right: -5px;
  font-family: var(--mono);
  font-size: 9px;
  background: var(--alert);
  color: var(--bg);
  padding: 1px 4px;
  font-weight: 700;
}

.profile { display: flex; align-items: center; gap: 10px; }
.profile-avatar {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ok);
  letter-spacing: .04em;
}
.profile-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.profile-text > span:first-child { font-size: 12.5px; font-weight: 500; }
.profile-role {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ─── Section primitives ───────────────────────────────── */

.section-head {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.section-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.012em;
}
.section-head h2 + .section-meta { display: block; }
.section-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.section + .section { margin-top: 32px; }

/* ─── KPI strip ─────────────────────────────────────────── */

.kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  margin-bottom: 28px;
}
.kpi {
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.kpi:last-child { border-right: 0; }
.kpi-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kpi-value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -.02em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi-of { font-size: 13px; color: var(--text-3); font-weight: 500; }
.kpi-trend {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-2);
  letter-spacing: .02em;
}
.kpi-trend--ok { color: var(--ok); }
.kpi-trend--warn { color: var(--warn); }
.kpi-trend--alert { color: var(--alert); }

/* ─── AI insights ───────────────────────────────────────── */

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.insight {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--text-3);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .12s var(--t), background .12s var(--t);
}
.insight:hover { background: var(--bg-2); }
.insight--warn  { border-left-color: var(--warn); }
.insight--alert { border-left-color: var(--alert); }
.insight--ok    { border-left-color: var(--ok); }
.insight header { display: flex; justify-content: space-between; align-items: center; }
.insight-pill {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  background: var(--warn-dim);
  color: var(--warn);
  padding: 3px 7px;
}
.insight-pill--ok { background: var(--ok-dim); color: var(--ok); }
.insight-pill--alert { background: var(--alert-dim); color: var(--alert); }
.insight-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
}
.insight h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -.005em;
  line-height: 1.35;
}
.insight p {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
}
.insight footer { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chip {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  padding: 5px 9px;
  letter-spacing: .02em;
  transition: border-color .12s var(--t);
}
.chip:hover { border-color: var(--text-2); }
.chip--alert { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 40%, transparent); }
.chip--ghost { color: var(--text-3); border-color: var(--line); }

/* ─── Lift group + shafts ───────────────────────────────── */

.section-actions { display: flex; gap: 8px; }
.btn-ghost {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  border: 1px solid var(--line);
  padding: 6px 10px;
  letter-spacing: .04em;
  transition: color .12s var(--t), border-color .12s var(--t);
}
.btn-ghost:hover { color: var(--text); border-color: var(--line-2); }

.shaft-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.lift-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color .12s var(--t);
}
.lift-card:hover { border-color: var(--line-2); }

.lift-card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.lift-id { display: flex; align-items: baseline; gap: 8px; }
.lift-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
}
.lift-type {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.status-pill {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.status-pill--moving { background: color-mix(in srgb, var(--live) 14%, transparent); color: var(--live); }
.status-pill--idle   { background: var(--bg-3); color: var(--text-2); }
.status-pill--warn   { background: var(--warn-dim); color: var(--warn); }
.status-pill--alert  { background: var(--alert-dim); color: var(--alert); }

.shaft {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 16px 14px;
}
.shaft-track {
  position: relative;
  height: calc(var(--shaft-floors) * var(--floor-h));
  display: flex;
  flex-direction: column;
}
.floor {
  flex: 1;
  border-top: 1px dashed var(--line-2);
  display: flex;
  align-items: center;
  padding-left: 4px;
  position: relative;
}
.floor:last-child { border-bottom: 1px solid var(--line-2); }
.floor:first-child { border-top-style: solid; }
.floor-label {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-3);
  width: 16px;
  text-align: center;
}
.floor::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 4px; height: 1px;
  background: var(--line-2);
  transform: translateY(-50%);
}

.cab {
  position: absolute;
  left: 22px; right: 6px;
  height: calc(var(--floor-h) - 4px);
  background: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 70%, white);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--bg);
  --floor: 1;
  /* Default 9-floor shaft (B at bottom + floors 1-8): --floor is the actual
     floor label, 0 = B. Cab.bottom = floor × cell_height + half-cell padding. */
  bottom: calc(var(--floor) * var(--floor-h) + 2px);
  transition: bottom 1.6s var(--t), background-color .3s, border-color .3s;
  box-shadow: 0 0 0 1px var(--cab-shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cab doors — two sliding panels overlaid on the cab body. Closed by
   default (suggesting metal door panels with a center seam). When the
   cab arrives at a floor, .cab--doors-open slides them apart. */
.cab-doors {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
}
.cab-door {
  flex: 1;
  background: rgba(0,0,0,.32);
  transition: transform .55s var(--t);
}
.cab-door--l { border-right: 1px solid rgba(0,0,0,.5); }
.cab--doors-open .cab-door--l { transform: translateX(-100%); }
.cab--doors-open .cab-door--r { transform: translateX(100%); }
.cab-arrow {
  position: relative;
  z-index: 1;
  letter-spacing: 0;
}
/* 8-floor shaft override (used inside the embed widget — no basement). */
.embed-widget .cab {
  bottom: calc((var(--floor) - 1) * var(--floor-h) + 2px);
}
.cab--moving {
  background: var(--live);
  border-color: color-mix(in srgb, var(--live) 70%, white);
  box-shadow: 0 0 14px var(--live-glow), 0 0 0 1px var(--cab-shadow);
}
.cab--idle    { background: var(--ok); border-color: color-mix(in srgb, var(--ok) 70%, white); }
.cab--warn    { background: var(--warn); border-color: color-mix(in srgb, var(--warn) 70%, white); }
.cab-arrow { letter-spacing: 0; }

.shaft-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-content: start; padding-top: 4px; }
.readout { display: flex; flex-direction: column; gap: 2px; }
.readout-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--text-3);
  text-transform: uppercase;
}
.readout-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}

.lift-card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.metric {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.metric-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}
.metric--warn .metric-num { color: var(--warn); }

.lift-mirror {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  padding: 5px 9px;
  letter-spacing: .02em;
  transition: border-color .12s var(--t), color .12s var(--t);
}
.lift-mirror:hover { border-color: var(--live); color: var(--live); }

.lift-card--mirror-active { border-color: var(--live); }
.lift-card--mirror-active::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--live);
  pointer-events: none;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .7; }
  50% { opacity: .25; }
}

.mirror-overlay {
  position: absolute;
  top: 12px; right: 14px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--live);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mirror-dot {
  width: 6px; height: 6px;
  background: var(--live);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--live);
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink {
  0%, 60%, 100% { opacity: 1; }
  30% { opacity: .35; }
}

.lift-card--warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* ─── Traffic heatmap ───────────────────────────────────── */

.filter-pills { display: flex; gap: 4px; }
.filter-pill {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  border: 1px solid var(--line);
  padding: 4px 10px;
  letter-spacing: .04em;
  transition: color .12s var(--t), border-color .12s var(--t);
}
.filter-pill:hover { color: var(--text); }
.filter-pill.is-active { color: var(--text); border-color: var(--live); background: color-mix(in srgb, var(--live) 8%, transparent); }

.heatmap {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 18px 18px 14px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
}
.heatmap-rows { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; }
.heatmap-row-label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-2);
  height: 18px;
  display: flex;
  align-items: center;
}
.heatmap-grid { display: flex; flex-direction: column; gap: 4px; }
.heatmap-axis {
  display: flex;
  height: 14px;
}
.heatmap-axis span {
  flex: 1;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: .04em;
}
.heatmap-row { display: flex; height: 18px; gap: 2px; }
.heatmap-cell {
  flex: 1;
  background: var(--bg-2);
  position: relative;
  transition: background .15s var(--t);
}
.heatmap-cell::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  padding: 3px 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s var(--t);
  z-index: 2;
}
.heatmap-cell:hover::after { opacity: 1; }

/* ─── Anomaly panel ─────────────────────────────────────── */

.anomaly-detail {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 18px;
}
.anomaly-chart svg { width: 100%; height: auto; display: block; }
.anomaly-chart .grid-line       { stroke: var(--line); fill: none; }
.anomaly-chart .axis-text       { fill: var(--text-3); }
.anomaly-chart .baseline-fill   { fill: var(--ok); fill-opacity: .08; }
.anomaly-chart .baseline-line   { stroke: var(--ok); fill: none; }
.anomaly-chart .baseline-text   { fill: var(--ok); }
.anomaly-chart .trend-bad       { stroke: var(--alert); fill: none; }
.anomaly-chart .trend-bad-fill  { fill: var(--alert); }
.anomaly-chart .trend-bad-line  { stroke: var(--alert); fill: none; }
.anomaly-chart .trend-bad-text  { fill: var(--alert); }
.anomaly-chart .trend-other     { stroke: var(--text-3); fill: none; }
.anomaly-chart .legend-text     { fill: var(--text-2); }
.floor-deltas { display: flex; flex-direction: column; gap: 8px; }
.floor-deltas li {
  display: grid;
  grid-template-columns: 60px 60px 1fr;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
}
.floor-deltas li > span:first-child { color: var(--text-2); letter-spacing: .04em; text-transform: uppercase; }
.delta { color: var(--text); font-variant-numeric: tabular-nums; }
.delta--bad { color: var(--alert); }
.delta--warn { color: var(--warn); }
.delta-bar {
  height: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.delta-bar > div {
  height: 100%;
  background: var(--alert);
}
.delta-bar.is-warn > div { background: var(--warn); }
.delta-bar.is-ok > div { background: var(--ok); width: 8%; }

/* ─── Alarm table ──────────────────────────────────────── */

.alarm-controls { display: flex; gap: 8px; align-items: center; }
.filter-input {
  font-family: var(--mono);
  font-size: 11px;
  width: 220px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.filter-input:focus { border-color: var(--live); }
.filter-input::placeholder { color: var(--text-3); }
.filter-select {
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--text);
}

.alarm-table {
  width: 100%;
  border: 1px solid var(--line);
  border-collapse: collapse;
  background: var(--bg-1);
  font-family: var(--mono);
  font-size: 11.5px;
}
.alarm-table thead { background: var(--bg-2); }
.alarm-table th {
  text-align: left;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.alarm-table th:hover { color: var(--text); }
.alarm-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 11.5px;
  vertical-align: top;
}
.alarm-table tbody tr:last-child td { border-bottom: 0; }
.alarm-table tbody tr:hover { background: var(--bg-2); }
.alarm-table .col-time { color: var(--text-2); font-variant-numeric: tabular-nums; }
.alarm-table .col-code { color: var(--info); }
.alarm-table .col-ai { color: var(--text); font-family: var(--display); font-size: 12.5px; line-height: 1.4; }
.alarm-table .col-ai small { font-family: var(--mono); font-size: 10px; color: var(--text-3); display: block; margin-top: 2px; letter-spacing: .04em; text-transform: uppercase; }
.alarm-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.alarm-status::before {
  content: '';
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.alarm-status--open    { color: var(--alert); }
.alarm-status--review  { color: var(--warn); }
.alarm-status--watched { color: var(--info); }
.alarm-status--closed  { color: var(--text-3); }
.alarm-status--closed::before { background: var(--text-3); }

.alarm-table tr.row--ai-suppressed { opacity: .55; }

/* Forensic event log — wide horizontal scroll, mono, dense. */
.forensic-wrap {
  border: 1px solid var(--line);
  background: var(--bg-1);
  overflow-x: auto;
  position: relative;
}
.forensic-table {
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  min-width: 100%;
}
.forensic-table thead { background: var(--bg-2); position: sticky; top: 0; z-index: 1; }
.forensic-table th {
  text-align: left;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: bottom;
}
.forensic-table th small {
  display: block;
  font-size: 8.5px;
  color: var(--text-dim);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 1px;
}
.forensic-table th:last-child { border-right: 0; }
.forensic-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.forensic-table td:last-child { border-right: 0; }
.forensic-table tbody tr:last-child td { border-bottom: 0; }
.forensic-table tbody tr:hover { background: var(--bg-2); }

/* Sticky first column (datum) for orientation when scrolled right */
.forensic-table th:first-child,
.forensic-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--bg-1);
  z-index: 2;
  border-right: 1px solid var(--line-2);
}
.forensic-table thead th:first-child { background: var(--bg-2); }
.forensic-table tbody tr:hover td:first-child { background: var(--bg-2); }

.forensic-table tr.row--info  td:nth-child(3) { color: var(--info); }
.forensic-table tr.row--warn  td:nth-child(3) { color: var(--warn); }
.forensic-table tr.row--alert td:nth-child(3) { color: var(--alert); font-weight: 600; }

.forensic-foot {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.alarm-table tr.row--ai-suppressed .col-ai::after {
  content: 'AI tystade — gruppat med rotorsak';
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* ─── Embed widget preview ──────────────────────────────── */

.embed-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.embed-frame-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.embed-window {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 0;
  position: relative;
  min-height: 268px;
}
.embed-chrome {
  display: flex; align-items: center; gap: 6px;
  height: 24px;
  border-bottom: 1px solid var(--line);
  padding: 0 10px;
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
}
.embed-chrome-dots { display: flex; gap: 4px; }
.embed-chrome-dots span {
  width: 8px; height: 8px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
}
.embed-url { margin-left: 8px; }

.embed-widget {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
}
.embed-widget .mini-shaft {
  position: relative;
  height: 180px;
  display: flex;
  flex-direction: column;
}
.embed-widget .mini-shaft .floor { padding-left: 0; border-left: 1px solid var(--line-2); }
.embed-widget .mini-shaft .floor-label { width: auto; padding: 0 6px; }
.embed-widget .mini-shaft .cab {
  --floor: 4;
  left: 8px; right: 0;
  height: 18px;
}
.embed-content { display: flex; flex-direction: column; gap: 8px; }
.embed-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
}
.embed-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.embed-row-data { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 4px; }
.embed-row-data .readout-value { font-size: 12px; }
.embed-actions {
  margin-top: auto;
  display: flex; gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.embed-code {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-2);
  overflow-x: auto;
  white-space: pre;
}
.embed-code .tag { color: var(--info); }
.embed-code .attr { color: var(--ok); }
.embed-code .val { color: var(--warn); }
.embed-code .com { color: var(--text-3); }

.embed-blurb {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
}
.embed-blurb b { color: var(--text); font-weight: 600; }

/* ─── Onboarding strip ─────────────────────────────────── */

.onboarding {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--live) 5%, transparent), transparent 60%),
    var(--bg-1);
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
}
.onb-text h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.018em;
  margin-bottom: 8px;
}
.onb-text p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: 44ch;
}
.onb-text .pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.onb-text .pill-row .chip { padding: 6px 10px; }

.onb-fields {
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--mono);
}
.onb-field {
  display: grid;
  grid-template-columns: 220px 1fr 110px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.onb-key {
  display: flex; flex-direction: column; gap: 1px;
}
.onb-key b {
  font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--text); letter-spacing: -.005em;
}
.onb-key small { font-size: 10px; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }
.onb-val {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--live);
  letter-spacing: 0;
  user-select: all;
}
.onb-co {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  text-align: right;
  letter-spacing: .04em;
}

/* ─── Stagger reveal ───────────────────────────────────── */

.section, .kpis {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal .55s var(--t) forwards;
}
.kpis { animation-delay: .04s; }
.section:nth-of-type(1) { animation-delay: .12s; }
.section:nth-of-type(2) { animation-delay: .18s; }
.section:nth-of-type(3) { animation-delay: .24s; }
.section:nth-of-type(4) { animation-delay: .30s; }
.section:nth-of-type(5) { animation-delay: .36s; }
.section:nth-of-type(6) { animation-delay: .42s; }
.section:nth-of-type(7) { animation-delay: .48s; }

@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .section, .kpis { animation: none; opacity: 1; transform: none; }
  .cab { transition: none; }
  .lift-card--mirror-active::before, .mirror-dot { animation: none; }
}

/* ─── Responsive ──────────────────────────────────────── */

/* ─── Identity header (lift detail) ────────────────────── */

.identity {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 24px 28px;
}
.identity-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.identity-title { display: flex; align-items: center; gap: 16px; }
.identity-name { display: flex; align-items: center; gap: 18px; }
.identity-letter {
  font-family: var(--display);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1;
  padding-right: 18px;
  border-right: 1px solid var(--line-2);
}
.identity-name h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.identity-sub {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 4px;
}
.identity-actions { display: flex; gap: 8px; flex-shrink: 0; }

.mode-row { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mode-pill {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--ok-dim);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent);
}
.mode-pill--ok    { background: var(--ok-dim);    color: var(--ok);    border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.mode-pill--warn  { background: var(--warn-dim);  color: var(--warn);  border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.mode-pill--alert { background: var(--alert-dim); color: var(--alert); border-color: color-mix(in srgb, var(--alert) 50%, transparent); }
.mode-pill--info  { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); border-color: color-mix(in srgb, var(--info) 50%, transparent); }

/* Tab bar (lift detail · masora-style sub-pages) */
.lift-tabs {
  display: flex;
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 18px -28px -24px;
  padding: 0 28px;
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: thin;
}
.lift-tab {
  padding: 12px 14px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .12s var(--t), border-color .12s var(--t);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lift-tab:hover { color: var(--text); }
.lift-tab.is-active { color: var(--text); border-bottom-color: var(--live); }
.lift-tab-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-3);
  padding: 1px 5px;
}
.lift-tab.is-active .lift-tab-meta { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, var(--line)); }

.btn-primary {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bg);
  background: var(--live);
  padding: 7px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: filter .12s var(--t);
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary .dot {
  width: 6px; height: 6px;
  background: var(--bg);
  border-radius: 50%;
}

.identity-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 24px;
}
.meta { display: flex; flex-direction: column; gap: 3px; }
.meta--span2 { grid-column: span 2; }
.meta-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--text-3);
  text-transform: uppercase;
}
.meta-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
  word-break: break-all;
}
.meta-value--dim { color: var(--text-2); font-weight: 400; }
.meta-link {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--live);
  letter-spacing: .04em;
  margin-left: 8px;
}
.meta-link:hover { text-decoration: underline; }
.meta-add {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--live);
  background: transparent;
  padding: 0;
  text-align: left;
  letter-spacing: 0;
  cursor: pointer;
}
.meta-add:hover { text-decoration: underline; }
.meta--span4 { grid-column: span 4; }

.masterdata-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 24px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 22px 26px;
}

/* ─── Live status row (lift detail) ────────────────────── */

.live-row {
  display: grid;
  grid-template-columns: 200px 1fr 280px;
  gap: 18px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 22px;
}
.live-shaft { display: flex; align-items: center; justify-content: center; }
.shaft-track-big {
  position: relative;
  height: calc(var(--shaft-floors) * 36px);
  width: 88px;
  display: flex;
  flex-direction: column;
}
.shaft-track-big .floor {
  flex: 1;
  border-top: 1px dashed var(--line-2);
  display: flex;
  align-items: center;
  padding-left: 6px;
  position: relative;
}
.shaft-track-big .floor:first-child { border-top-style: solid; }
.shaft-track-big .floor:last-child { border-bottom: 1px solid var(--line-2); }
.shaft-track-big .floor-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  width: 18px;
  text-align: center;
}
.shaft-track-big .cab.cab--big {
  left: 28px; right: 6px;
  height: 32px;
  bottom: calc(var(--floor) * 36px + 2px);
  font-size: 14px;
}

.live-readouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  align-content: center;
}
.readout--big { gap: 4px; }
.readout-value-big {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.readout-value-big small {
  font-size: 13px;
  color: var(--text-3);
  font-weight: 400;
  letter-spacing: 0;
}

.live-conn {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.conn-row {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ok);
}
.conn-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-3);
}
.conn-dot--ok {
  background: var(--ok);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 80%, transparent);
}
.conn-stat {
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
}
.conn-key { color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }
.conn-val { color: var(--text); font-weight: 500; }

.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--live);
  margin-left: 10px;
  vertical-align: middle;
}
.live-dot {
  width: 6px; height: 6px;
  background: var(--live);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--live);
  animation: blink 1.4s ease-in-out infinite;
}

/* ─── Screen mirror (mocked THOR HTML5 frontend) ──────── */

.mirror-window {
  background: #000;
  border: 1px solid var(--line);
}
.mirror-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
}
.mirror-chrome .embed-url { color: var(--text-2); }
.mirror-quality {
  margin-left: auto;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9.5px;
}

.thor-screen {
  background: #0B0B0E;
  color: #E6EAF0;
  font-family: var(--mono);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 360px;
}
.thor-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: #14141A;
  border-bottom: 1px solid #21212C;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.thor-state {
  background: #00C896;
  color: #0B0B0E;
  padding: 2px 8px;
  font-weight: 700;
}
.thor-fw { color: #6F7989; }
.thor-time { margin-left: auto; color: #9AA8B7; font-variant-numeric: tabular-nums; }

.thor-body {
  display: grid;
  grid-template-columns: auto 1fr 220px;
  gap: 24px;
  padding: 24px;
  align-items: center;
}
.thor-floor-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 110px;
  letter-spacing: -.04em;
  line-height: 1;
  color: #34D8FF;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.thor-arrow {
  font-size: 36px;
  color: #34D8FF;
  margin-top: 14px;
}
.thor-floors {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid #21212C;
  padding-left: 18px;
}
.thor-floor {
  font-size: 14px;
  font-weight: 500;
  color: #6F7989;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .04em;
  position: relative;
}
.thor-floor--current { color: #34D8FF; }
.thor-floor--current::before {
  content: '►';
  position: absolute;
  left: -10px;
  font-size: 10px;
  color: #34D8FF;
}
.thor-floor--target { color: #FFB147; }
.thor-call {
  width: 10px; height: 10px;
  border: 1px solid #FFB147;
  margin-left: 6px;
}
.thor-call--up::after { content: '↑'; font-size: 9px; color: #FFB147; }

.thor-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid #21212C;
  padding-left: 18px;
}
.thor-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
}
.thor-stat span {
  color: #6F7989;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 9.5px;
}
.thor-stat b { font-weight: 600; color: #E6EAF0; }

.thor-footer {
  display: flex;
  border-top: 1px solid #21212C;
}
.thor-btn {
  flex: 1;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #9AA8B7;
  background: transparent;
  padding: 12px 6px;
  border-right: 1px solid #21212C;
  cursor: pointer;
  text-transform: uppercase;
  transition: color .12s var(--t), background .12s var(--t);
}
.thor-btn:last-child { border-right: 0; }
.thor-btn:hover { color: #E6EAF0; background: #14141A; }
.thor-btn--alert { color: #FF5470; }

/* ─── CANopen bus / device table ───────────────────────── */

.bus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bus {
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.bus-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.bus-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.005em;
}
.bus-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.device-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 11.5px;
}
.device-table th {
  text-align: left;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
.device-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
}
.device-table tr:last-child td { border-bottom: 0; }
.device-table td:first-child {
  width: 40px;
  color: var(--text-3);
  text-align: right;
  padding-right: 10px;
}
.device-table small {
  display: block;
  font-size: 9.5px;
  color: var(--text-3);
  letter-spacing: 0;
  margin-top: 2px;
}
.dev-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.dev-status::before {
  content: '';
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.dev-status--ok    { color: var(--ok); }
.dev-status--warn  { color: var(--warn); }
.dev-status--alert { color: var(--alert); }

/* ─── Stats grid (lift detail) ─────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.stat-card {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-card:nth-child(4n) { border-right: 0; }
.stat-card:nth-last-child(-n+4) { border-bottom: 0; }
.stat-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--text-3);
  text-transform: uppercase;
}
.stat-value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.018em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-value small { font-size: 14px; font-weight: 500; color: var(--text-3); margin-left: 2px; }
.stat-foot {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-2);
  letter-spacing: .02em;
}
.stat-card--warn .stat-value { color: var(--warn); }
.stat-card--warn .stat-foot  { color: var(--warn); }
.stat-card--dim .stat-value { color: var(--text-3); }
.stat-card--dim .stat-foot  { color: var(--text-3); }

/* ─── Multiplexer prenumerationer ──────────────────────── */

.mplex-budget {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-2);
  letter-spacing: .04em;
}
.mplex-budget-label { text-transform: uppercase; color: var(--text-3); }
.mplex-budget-num { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.mplex-budget-bar {
  width: 120px; height: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  position: relative;
}
.mplex-budget-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ok), var(--live));
}

.mplex-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mplex {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
  transition: border-color .12s var(--t), background .12s var(--t);
}
.mplex:hover { border-color: var(--line-2); }
.mplex input[type="checkbox"] {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--line-2);
  background: var(--bg);
  cursor: pointer;
  position: relative;
  margin-top: 2px;
  transition: border-color .12s var(--t), background .12s var(--t);
}
.mplex input[type="checkbox"]:hover { border-color: var(--text-2); }
.mplex input[type="checkbox"]:checked {
  border-color: var(--live);
  background: var(--live);
}
.mplex input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--bg);
  clip-path: polygon(20% 50%, 0 70%, 40% 100%, 100% 30%, 80% 10%, 40% 70%);
}
.mplex:has(input:checked) { border-color: color-mix(in srgb, var(--live) 35%, var(--line)); }

.mplex-body { display: flex; flex-direction: column; gap: 4px; }
.mplex-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.mplex-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
}
.mplex-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--text-3);
  text-transform: uppercase;
}
.mplex p {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 2px 0 4px;
}
.mplex-cost {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ok);
  text-transform: uppercase;
}

/* ─── Configuration cards ──────────────────────────────── */

.config-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.config-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .12s var(--t), background .12s var(--t);
  cursor: pointer;
}
.config-card:hover { border-color: var(--line-2); background: var(--bg-2); }
.config-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -.005em;
  color: var(--text);
}
.config-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.config-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 4px;
}
.config-card--alert .config-name { color: var(--alert); }
.config-card--alert:hover { border-color: color-mix(in srgb, var(--alert) 50%, var(--line)); }

/* ─── CM (condition monitoring) sections — Trafik, Dörrar, Temperatur ─ */

.cm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  margin-bottom: 14px;
  background: var(--bg-1);
}
.cm-stat {
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cm-stat:last-child { border-right: 0; }
.cm-stat-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cm-stat-value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.018em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cm-stat-value small { font-size: 13px; font-weight: 500; color: var(--text-3); margin-left: 2px; }
.cm-stat-trend {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-2);
  letter-spacing: .02em;
}

.cm-narrative {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--info);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.cm-narrative b { font-weight: 600; }

.cm-details {
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.cm-details > summary {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color .12s var(--t), background .12s var(--t);
  user-select: none;
}
.cm-details > summary::-webkit-details-marker { display: none; }
.cm-details > summary:hover { color: var(--text); background: var(--bg-2); }
.cm-details > summary span {
  font-size: 14px;
  letter-spacing: 0;
  transition: transform .15s var(--t);
}
.cm-details[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.cm-details[open] > summary span {
  transform: rotate(90deg);
}

.cm-charts {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.chart-block { display: flex; flex-direction: column; gap: 6px; }
.chart-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.chart-help {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 8px;
}
.cm-chart { width: 100%; height: auto; display: block; }
.cm-chart .grid-line   { stroke: var(--line); fill: none; }
.cm-chart .axis-text   { fill: var(--text-3); }
.cm-chart .baseline-line { stroke: var(--ok); fill: none; }
.cm-chart .baseline-text { fill: var(--ok); }
.cm-chart .trend-other { fill: none; }

/* ─── Anläggningssidan (property overview · 3-col + tiles) ────────── */

.property-header {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.property-header .identity-title { gap: 14px; }

.property-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) 280px minmax(280px, 1fr);
  gap: 12px;
  align-items: stretch;
}
.property-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.property-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.property-card-head h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.005em;
}
.property-card-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.prop-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1;
}
.prop-stat {
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prop-stat:nth-child(2n) { border-right: 0; }
.prop-stat:nth-last-child(-n+2) { border-bottom: 0; }
.prop-stat-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.prop-stat-value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.018em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.prop-stat-value small { font-size: 12px; color: var(--text-3); font-weight: 500; }
.prop-stat-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
  letter-spacing: .04em;
}

.property-photo-card { padding: 0; }
.property-photo-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  padding: 14px;
}
.property-photo {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}
/* Show only the door-type that matches this lift's config */
.property-photo-wrap[data-doortype="automat"] .property-doors--slag { display: none; }
.property-photo-wrap[data-doortype="slag"] .property-doors--automat { display: none; }
.property-photo-wrap[data-doortype="automat"] .door-trigger--slag { display: none; }
.property-photo-wrap[data-doortype="slag"] .door-trigger--automat { display: none; }

/* Right-side floor numbers visible only in genomgång (2-dörr) mode */
.property-photo-wrap[data-doors="1"] .floor-nums--B { display: none; }

/* Active-floor row coloring — defaults to warn (yellow), tints by active door */
.floor-display-text,
.active-floor { transition: fill .35s ease; }

/* 1-dörr: opening colors A side cyan (live) */
.property-photo-wrap[data-doors="1"][data-door-state="open"] .floor-display-text,
.property-photo-wrap[data-doors="1"][data-door-state="open"] .floor-nums--A .active-floor { fill: var(--live); }

/* 2-dörr: each side colors when its own door is active */
.property-photo-wrap[data-doors="2"][data-active-door="A"] .floor-display-text,
.property-photo-wrap[data-doors="2"][data-active-door="A"] .floor-nums--A .active-floor { fill: var(--live); }
.property-photo-wrap[data-doors="2"][data-active-door="B"] .floor-display-text,
.property-photo-wrap[data-doors="2"][data-active-door="B"] .floor-nums--B .active-floor { fill: var(--warn); }

/* Door animation — automatdörr (sliding panels) */
.property-doors--automat .door-panel,
.property-doors--automat .door-seam {
  transition: transform .8s cubic-bezier(.4, 0, .2, 1);
}
.property-photo-wrap[data-door-state="open"] .property-doors--automat .door-panel--l,
.property-photo-wrap[data-door-state="open"] .property-doors--automat .door-seam { transform: translateX(-44px); }
.property-photo-wrap[data-door-state="open"] .property-doors--automat .door-panel--r { transform: translateX(44px); }

/* Door animation — slagdörr (hinged swing, 2D scaleX+skewY toward hinge) */
.property-doors--slag .slag-door {
  transition: transform .85s cubic-bezier(.4, 0, .2, 1);
  transform-origin: 52px 148px;
}
.property-photo-wrap[data-door-state="open"] .property-doors--slag .slag-door {
  transform: scaleX(0.18) skewY(-2deg);
}

/* Door demo controls */
.door-controls-left { display: flex; align-items: center; gap: 8px; }
.door-controls-right { display: flex; gap: 6px; align-items: center; }
.door-toggle--alt { background: color-mix(in srgb, var(--bg-2) 90%, transparent); }
.door-toggle--A { color: var(--live); border-color: color-mix(in srgb, var(--live) 50%, var(--line-2)); }
.door-toggle--A:hover { border-color: var(--live); }
.door-toggle--B { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, var(--line-2)); }
.door-toggle--B:hover { border-color: var(--warn); }

/* Show single Simulera-button in 1-dörr, A/B-buttons in 2-dörr */
.property-photo-wrap[data-doors="1"] [data-when-doors="2"] { display: none; }
.property-photo-wrap[data-doors="2"] [data-when-doors="1"] { display: none; }

.door-controls {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.door-state-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border: 1px solid var(--line-2);
  padding: 3px 8px;
  backdrop-filter: blur(2px);
}
.property-photo-wrap[data-door-state="open"] .door-state-label { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line-2)); }
.door-toggle {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-3) 90%, transparent);
  border: 1px solid var(--line-2);
  padding: 4px 10px;
  letter-spacing: .04em;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: border-color .12s var(--t), color .12s var(--t);
}
.door-toggle:hover { color: var(--live); border-color: var(--live); }

.door-info {
  padding: 10px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.door-type-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--live);
  background: color-mix(in srgb, var(--live) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--live) 40%, transparent);
  padding: 3px 8px;
}
.door-trigger {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-2);
  letter-spacing: .04em;
}
.door-trigger code {
  font-family: var(--mono);
  background: var(--bg-2);
  padding: 1px 5px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 10px;
}

/* Looping previews in the door-type selector (ny-hiss) */
@keyframes dt-automat-l-cycle {
  0%, 22%, 78%, 100% { transform: translateX(0); }
  40%, 60%          { transform: translateX(-30px); }
}
@keyframes dt-automat-r-cycle {
  0%, 22%, 78%, 100% { transform: translateX(0); }
  40%, 60%          { transform: translateX(30px); }
}
.dt-automat-l, .dt-automat-seam {
  animation: dt-automat-l-cycle 4.5s cubic-bezier(.4,0,.2,1) infinite;
}
.dt-automat-r {
  animation: dt-automat-r-cycle 4.5s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes dt-slag-cycle {
  0%, 22%, 78%, 100% { transform: scaleX(1) skewY(0); }
  40%, 60%          { transform: scaleX(0.18) skewY(-2deg); }
}
.dt-slag-door {
  animation: dt-slag-cycle 4.5s cubic-bezier(.4,0,.2,1) infinite;
  transform-origin: 18px 100px;
}

@media (prefers-reduced-motion: reduce) {
  .dt-automat-l, .dt-automat-r, .dt-automat-seam, .dt-slag-door {
    animation: none;
  }
}

.property-map {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.property-map svg {
  width: 100%;
  height: 100%;
  display: block;
}
.map-link {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--live);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--live) 50%, transparent);
  padding: 4px 8px;
  letter-spacing: .04em;
  backdrop-filter: blur(2px);
}
.map-link:hover { background: var(--bg-2); }

.property-events {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.property-events li {
  display: grid;
  grid-template-columns: 110px 12px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  font-family: var(--mono);
  font-size: 11px;
  border-bottom: 1px solid var(--line);
}
.property-events li:last-child { border-bottom: 0; }
.ev-time { color: var(--text-3); letter-spacing: 0; }
.ev-dot { width: 8px; height: 8px; background: var(--text-3); border-radius: 50%; }
.ev-dot--warn  { background: var(--warn); box-shadow: 0 0 6px color-mix(in srgb, var(--warn) 70%, transparent); }
.ev-dot--alert { background: var(--alert); box-shadow: 0 0 6px color-mix(in srgb, var(--alert) 70%, transparent); }
.ev-text { color: var(--text); }

/* ─── Tile grid (sub-page navigation · masora-style) ──────────────── */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.tile {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .12s var(--t), background .12s var(--t), transform .12s var(--t);
  position: relative;
}
.tile:hover {
  border-color: var(--line-2);
  background: var(--bg-2);
  transform: translateY(-1px);
}
.tile-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  margin-bottom: 4px;
}
.tile:hover .tile-icon { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, var(--line)); }
.tile-icon svg { width: 18px; height: 18px; }
.tile-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.tile-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: .04em;
}
.tile-meta--warn  { color: var(--warn); }
.tile-meta--alert { color: var(--alert); }
.tile-meta--ok    { color: var(--ok); }

.tile--mirror { background: linear-gradient(180deg, color-mix(in srgb, var(--live) 5%, transparent), transparent), var(--bg-1); border-color: color-mix(in srgb, var(--live) 30%, var(--line)); }
.tile--mirror:hover { border-color: var(--live); }
.tile--mirror .tile-icon { color: var(--live); }

/* ─── Device strip (compact CANopen overview) ─────────────────────── */

.device-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.device-chip {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.device-chip:nth-last-child(-n+5) { border-bottom: 0; }
.device-chip:last-child { border-right: 0; }
.device-chip-id {
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0;
  background: var(--bg-2);
  padding: 4px 6px;
  border: 1px solid var(--line);
}
.device-chip-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
}
.device-chip-role {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.device-chip .dev-status {
  grid-column: 1 / 3;
  font-size: 10px;
  margin-top: 4px;
}
.device-chip--more {
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: .04em;
}

@media (max-width: 1240px) {
  .property-grid { grid-template-columns: 1fr 1fr; }
  .property-photo-card { grid-column: span 2; }
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .property-grid { grid-template-columns: 1fr; }
  .property-photo-card { grid-column: auto; }
  .tile-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1240px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .kpi:nth-child(3) { border-right: 0; }
  .kpi:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .insights-grid { grid-template-columns: 1fr; }
  .shaft-grid { grid-template-columns: 1fr 1fr; }
  .embed-row { grid-template-columns: 1fr; }
  .anomaly-detail { grid-template-columns: 1fr; }
  .onboarding { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .sidebar { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .shaft-grid { grid-template-columns: 1fr; }
  .alarm-table th:nth-child(4),
  .alarm-table td:nth-child(4) { display: none; }
}