[hidden] { display: none !important; }

:root {
  --nav-group-fg:      var(--petrol-500);
  --nav-item-fg:       var(--petrol-300);
  --nav-item-active-bg: rgba(255,255,255,0.10);
  --nav-danger-fg:     #f06b5e;
}

.shell { display: flex; height: 100vh; overflow: hidden; }
.main  { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.sidebar {
  width: 250px; flex: 0 0 250px;
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  transition: width var(--duration-base) var(--ease-standard);
}
.sidebar-head {
  min-height: 120px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.sidebar-head img {
  max-height: 72px; max-width: 100%;
  width: auto; height: auto; object-fit: contain;
}
.app-name {
  font-size: 9px; color: rgba(255,255,255,0.40);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: var(--fw-medium);
  white-space: nowrap; text-align: center;
}
.collapse-btn {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border: 0; border-radius: var(--radius-xs);
  background: rgba(0,0,0,0.22); color: rgba(255,255,255,0.45);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.collapse-btn:hover { background: rgba(0,0,0,0.45); color: #fff; }
.collapse-btn svg { width: 13px; height: 13px; }

.nav-expand-head {
  display: none; width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.65);
  place-items: center; cursor: pointer;
}
.nav-expand-head:hover { background: rgba(255,255,255,0.18); color: #fff; }
.nav-expand-head svg { width: 15px; height: 15px; }

.nav-expand {
  display: none; width: 26px; height: 26px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text-muted); place-items: center; cursor: pointer;
  flex: 0 0 auto;
}
.nav-expand:hover { background: var(--surface-sunken); color: var(--text-body); }
.nav-expand svg { width: 14px; height: 14px; }
.nav-expand ~ :not(.topbar-tools) { margin-right: auto; }

.nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.nav-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: var(--fw-semibold); color: var(--nav-group-fg);
  padding: 12px 12px 5px;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; margin: 0 8px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: var(--fw-semibold);
  color: var(--nav-item-fg); border: 0; background: none; width: calc(100% - 16px);
  text-align: left; transition: background var(--duration-fast) var(--ease-standard);
}
.nav-item:hover  { color: rgba(255,255,255,0.92); }
.nav-item.is-active {
  color: #fff; background: var(--nav-item-active-bg); font-weight: var(--fw-bold);
}
.nav-item svg { width: 15px; height: 15px; flex: 0 0 15px; }
.nav-item .label { flex: 1; }
.nav-sep { height: 1px; margin: 6px 16px; background: rgba(255, 255, 255, 0.08); }
.nav-sep[hidden], html[data-device] .nav-sep { display: none; }

.nav-parent .nav-caret { width: 12px; height: 12px; flex: 0 0 12px; opacity: 0.7;
                         transition: transform var(--duration-fast) var(--ease-standard); }
.nav-parent[aria-expanded="false"] .nav-caret { transform: rotate(-90deg); }
.nav-parent.has-active { color: #fff; }
.nav-parent.has-active[aria-expanded="false"] { background: var(--nav-item-active-bg); font-weight: var(--fw-bold); }
.nav-sub { margin: 2px 8px 4px 20px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.14); }
.nav-sub.is-closed, .nav-sub[hidden] { display: none; }
.nav-sub .nav-item { margin: 0; width: 100%; padding: 6px 10px; font-size: 11px; color: rgba(255,255,255,0.60); }
.nav-sub .nav-item:hover { color: rgba(255,255,255,0.92); }
.nav-sub .nav-item.is-active { color: #fff; }
.nav-sub .nav-item svg { width: 14px; height: 14px; flex: 0 0 14px; opacity: 0.85; }
.nav-back { display: none; }
html.nav-collapsed:not([data-device]) .nav-parent .nav-caret { display: none; }
html.nav-collapsed:not([data-device]) .nav-sub:not([hidden]),
html.nav-collapsed:not([data-device]) .nav-sub.is-closed:not([hidden]) { display: block; margin: 0; padding-left: 0; border-left: 0; }
html.nav-collapsed:not([data-device]) .nav-sub .nav-item {
  justify-content: center; padding: 10px 0; margin: 0 8px; width: calc(100% - 16px);
}

.pill-count {
  font-size: 11px; padding: 1px 8px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.10); color: #cfd6d5; font-weight: var(--fw-medium);
}
.pill-alert {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--action-bg); color: #fff;
  font-size: 10px; font-weight: var(--fw-bold);
  display: inline-grid; place-items: center;
}

.sidebar-foot {
  padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 3px;
}
.ver  { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.65); }
.date { font-family: var(--font-mono); font-size: 9px;  color: rgba(255,255,255,0.28); }
.legal{ font-size: 8px; color: rgba(255,255,255,0.22); }
.rail-foot { display: none; }

.topbar {
  min-height: 50px; padding: 6px 16px;
  background: var(--surface-card); border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar h1 {
  margin: 0; font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.2;
}
.topbar .sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.topbar-tools { display: flex; gap: 6px; }

.topbar-tools .icon-btn {
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.topbar-tools .icon-btn:hover { border-color: var(--border-default); }
.topbar-tools .icon-btn.act-pending,
.topbar-tools .icon-btn.act-pending:hover { border-color: var(--warning); }

.user-menu { position: relative; }

.user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--duration-fast) var(--ease-standard);
}
.user-btn:hover,
.user-btn[aria-expanded="true"] { background: var(--surface-sunken); }

.user-initials {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-brand-soft);
  color: var(--text-brand);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  flex: 0 0 auto;
}
.user-name {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-caret {
  width: 14px;
  height: 14px;
  color: var(--text-subtle);
  flex: 0 0 auto;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.user-btn[aria-expanded="true"] .user-caret { transform: rotate(180deg); }

.user-pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 190px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 60;
}
.user-pop-item {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-align: left;
  color: var(--danger);
}
.user-pop-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 420px;
}
.user-pop-head b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.user-pop-item:hover { background: var(--surface-sunken); }
.user-pop-item svg { width: 14px; height: 14px; }

.lang-picker { position: relative; }

.lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: var(--control-h);
  padding: 0 7px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.lang-btn:hover,
.lang-btn[aria-expanded="true"] { background: var(--surface-sunken); }
.lang-caret {
  width: 14px;
  height: 14px;
  color: var(--text-subtle);
  flex: 0 0 auto;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 152px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 60;
}
.lang-item {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
}
.lang-item:hover { background: var(--surface-sunken); }
.lang-item.is-active { background: var(--surface-brand-soft); }
.lang-name {
  flex: 1;
  font-size: var(--text-xs);
  color: var(--text-body);
}
.lang-item.is-active .lang-name { font-weight: var(--fw-semibold); }
.lang-code {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.flag {
  display: inline-block;
  width: 18px;
  height: 13px;
  border-radius: 2px;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
}
.flag-de { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E %3Cpath fill='%23fc0' d='M0 320h640v160H0z'/%3E %3Cpath fill='%23000001' d='M0 0h640v160H0z'/%3E %3Cpath fill='red' d='M0 160h640v160H0z'/%3E %3C/svg%3E"); }
.flag-gb { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E %3Cpath fill='%23012169' d='M0 0h640v480H0z'/%3E %3Cpath fill='%23FFF' d='m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z'/%3E %3Cpath fill='%23C8102E' d='m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z'/%3E %3Cpath fill='%23FFF' d='M241 0v480h160V0zM0 160v160h640V160z'/%3E %3Cpath fill='%23C8102E' d='M0 193v96h640v-96zM273 0v480h96V0z'/%3E %3C/svg%3E"); }

.btn {
  height: var(--control-h); padding: 0 16px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  display: inline-flex; align-items: center; gap: 6px; border: 0;
  transition: filter var(--duration-fast) var(--ease-standard);
}
.btn:hover { filter: brightness(0.92); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

.btn svg { width: 14px; height: 14px; flex: 0 0 auto; }

.btn.is-busy { pointer-events: none; opacity: 0.75; filter: none; }
.btn.is-busy::before {
  content: ''; width: 12px; height: 12px; flex: 0 0 auto;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin 700ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn.is-busy::before { animation: none; }
}
.btn-primary { background: var(--action-bg); color: var(--action-fg); }
.btn-secondary {
  background: transparent; color: var(--text-muted); padding: 0 14px;
  font-weight: var(--fw-medium);
  border-width: 1px; border-style: solid; border-color: var(--border-subtle);
}
.btn-quiet { background: var(--surface-brand-soft); color: var(--text-brand); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ok { background: var(--success); color: #fff; }
.btn-warn { background: var(--warning); color: #fff; }

.btn-split { display: inline-flex; align-items: stretch; }
.btn-split:has(> .btn-split-toggle:not([hidden])) > .btn:first-child {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.btn-split > .btn-split-toggle {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding: 0; width: var(--control-h); justify-content: center;
  border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.btn-split > .btn-split-toggle svg {
  width: 18px; height: 18px;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.btn-split > .btn-split-toggle.is-open svg { transform: rotate(180deg); }

.icon-btn {
  width: var(--control-h); height: var(--control-h); border: 0;
  border-radius: var(--radius-sm); background: transparent; color: var(--text-subtle);
  display: grid; place-items: center;
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text-body); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.is-on { background: var(--surface-brand-soft); color: var(--text-brand); }
.run-spinner { animation: spin 1200ms linear infinite; }
@media (prefers-reduced-motion: reduce) { .run-spinner { animation: none; } }
.icon-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.icon-btn:disabled:hover { background: transparent; color: var(--text-subtle); }

.row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.row-actions.is-centered { justify-content: center; }
.row-actions .icon-btn svg { width: 18px; height: 18px; }

.icon-btn.act-edit { background: var(--surface-brand-soft); color: var(--text-brand); }
.icon-btn.act-view { background: var(--surface-brand-soft); color: var(--text-brand); }
.icon-btn.act-del  { background: var(--danger-soft);        color: var(--danger); }

.icon-btn.act-inspect { background: var(--surface-sunken); color: var(--text-muted); }
.icon-btn.act-inspect:hover {
  background: var(--surface-sunken); color: var(--text-body); filter: brightness(0.92);
}

.icon-btn.act-link   { background: var(--success-soft); color: var(--success); }
.icon-btn.act-unlink { background: var(--warning-soft); color: var(--warning); }
.icon-btn.act-link:hover {
  background: var(--success-soft); color: var(--success); filter: brightness(0.92);
}
.icon-btn.act-unlink:hover {
  background: var(--warning-soft); color: var(--warning); filter: brightness(0.92);
}

.value-edit { display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; }
.value-edit .icon-btn svg { width: 16px; height: 16px; }

.busy-box { max-width: 360px; align-items: center; gap: 10px; padding: 26px 24px; text-align: center; }
.busy-spinner { width: 32px; height: 32px; fill: none; stroke: var(--action-bg); animation: spin 900ms linear infinite; }
.busy-title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
@media (prefers-reduced-motion: reduce) { .busy-spinner { animation: none; } }
.busy-progress { width: 100%; max-width: 280px; }

.default-mark {
  width: var(--control-h); height: var(--control-h); border-radius: var(--radius-sm);
  display: inline-grid; place-items: center; flex: 0 0 auto; cursor: default;
  background: var(--surface-brand-soft); color: var(--text-brand);
}
.default-mark svg { width: 16px; height: 16px; }
.row-actions .default-mark svg { width: 18px; height: 18px; }
.icon-btn.act-fetch { background: var(--surface-brand-soft); color: var(--text-brand); }
.icon-btn.act-fetch:hover {
  background: var(--surface-brand-soft); color: var(--text-brand); filter: brightness(0.92);
}
.icon-btn.act-default { background: var(--surface-sunken); color: var(--text-muted); }
.icon-btn.act-default:hover {
  background: var(--surface-sunken); color: var(--text-brand); filter: brightness(0.92);
}

.icon-btn.act-pending { background: var(--warning-soft); color: var(--warning); }
.icon-btn.act-pending:hover {
  background: var(--warning-soft); color: var(--warning); filter: brightness(0.92);
}

.icon-btn.act-edit:hover,
.icon-btn.act-view:hover {
  background: var(--surface-brand-soft); color: var(--text-brand);
  filter: brightness(0.92);
}
.icon-btn.act-del:hover {
  background: var(--danger-soft); color: var(--danger);
  filter: brightness(0.92);
}

.input {
  height: var(--control-h); padding: 0 10px; border-radius: var(--radius-sm);
  background: var(--surface-card); color: var(--text-body); font-size: var(--text-xs);
  border-width: 1px; border-style: solid; border-color: var(--border-subtle);
}
.input::placeholder { color: var(--text-subtle); }
.input:focus { border-color: var(--border-brand); box-shadow: var(--shadow-focus); outline: none; }
.input[readonly] {
  background: var(--surface-sunken); color: var(--text-muted); cursor: default;
}
.input[readonly]:focus { border-color: var(--border-subtle); box-shadow: none; }
.search { position: relative; flex: 1; max-width: 320px; }
.search svg {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--text-subtle); pointer-events: none;
}
.search .input { width: 100%; padding-left: 28px; }
select.input { min-width: 132px; }

.seg {
  display: inline-flex; height: var(--control-h); border-radius: var(--radius-sm);
  overflow: hidden; border-width: 1px; border-style: solid; border-color: var(--border-subtle);
  align-self: flex-start; flex: none;
}
.seg button {
  border: 0; background: transparent; color: var(--text-muted);
  padding: 0 12px; font-size: var(--text-xs); font-weight: var(--fw-medium);
  border-right: 1px solid var(--border-subtle);
}
.seg button:last-child { border-right: 0; }
.seg button.is-active {
  background: var(--action-bg); color: var(--action-fg); font-weight: var(--fw-semibold);
}

.seg.is-field { display: flex; width: 100%; align-self: stretch; flex: initial; background: var(--surface-card); }
.seg > .input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; border-radius: 0; box-shadow: none;
}
.seg > .input:has(~ :not([hidden])) { border-right: 1px solid var(--border-subtle); }
.seg > .input:focus { box-shadow: none; }
.seg > .icon-btn { height: 100%; border-radius: 0; flex: none; }
.seg.is-field:focus-within { border-color: var(--border-brand); box-shadow: var(--shadow-focus); }

.switch {
  width: 40px; height: 22px; flex: none; border-radius: 999px; border: 0;
  position: relative; box-sizing: border-box;
  background: var(--border-default); transition: background var(--duration-fast) var(--ease-standard);
}

.switch-label {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none; white-space: nowrap;
}
.switch[aria-checked="true"] { background: var(--action-bg); }
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: left var(--duration-fast) var(--ease-standard);
}
.switch[aria-checked="true"]::after { left: 21px; }

.switch:disabled { opacity: 0.5; cursor: progress; }

.chk {
  width: 15px; height: 15px; flex: none; box-sizing: border-box;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-xs);
  background: transparent; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-on-brand);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.chk svg { width: 14px; height: 14px; opacity: 0; }
.chk[aria-checked="true"] { background: var(--action-bg); border-color: var(--action-bg); }
.chk[aria-checked="true"] svg { opacity: 1; }
.chk:disabled { opacity: 0.5; cursor: not-allowed; }

.chk[aria-checked="mixed"] { background: var(--action-bg); border-color: var(--action-bg); }
.chk[aria-checked="mixed"]::after {
  content: ""; width: 8px; height: 1.5px; border-radius: 1px;
  background: var(--text-on-brand);
}

.c-select { text-align: center; cursor: pointer; }
.c-select .chk { vertical-align: middle; }

.switch.is-blocked:disabled {
  opacity: 1; cursor: not-allowed; background: var(--border-subtle);
}
.switch.is-blocked[aria-checked="true"]:disabled { background: var(--action-bg-muted); }
.switch.is-blocked:disabled::after { box-shadow: none; }

.dropzone {
  border: 1.5px dashed var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-sunken); padding: 26px 20px; text-align: center;
  cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard);
}
.dropzone:hover { border-color: var(--border-brand); }
.dropzone.is-over { border-color: var(--border-brand); background: var(--surface-card); }
.dropzone .dz-ic { width: 32px; height: 32px; color: var(--text-brand); margin: 0 auto 10px; display: block; }
.dropzone .dz-t { font-size: var(--text-xs); color: var(--text-body); }
.dropzone .dz-h { font-size: var(--text-2xs); color: var(--text-subtle); margin-top: 4px; }

.file-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--surface-card); font-size: var(--text-xs);
}
.file-row .fname { flex: 1; color: var(--text-body); }
.file-row .fsize { color: var(--text-subtle); font-family: var(--font-mono); font-size: 11px; }
.file-row .file-clear { flex: 0 0 26px; width: 26px; height: 26px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--radius-pill); padding: 2px 8px;
  font-size: var(--text-2xs); font-weight: var(--fw-semibold);
}
.badge .dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
.b-ok    { background: var(--success-soft); color: var(--success); }
.b-warn  { background: var(--warning-soft); color: var(--warning); }
.b-bad   { background: var(--danger-soft);  color: var(--danger); }
.b-info  { background: var(--info-soft);    color: var(--info); }
.b-wmbus { background: var(--color-wmbus-soft); color: var(--color-wmbus); }
.b-draft { background: var(--color-draft-soft); color: var(--color-draft); }
.b-quiet { background: var(--surface-sunken); color: var(--text-muted); }

.cell-flag {
  display: inline-flex;
  width: 16px; height: 16px;
  vertical-align: -3px;
}
.cell-flag svg { width: 16px; height: 16px; }
.cell-flag.is-yes { color: var(--success); }
.cell-flag.is-no  { color: var(--danger); }

.b-count {
  background: var(--surface-card); color: var(--text-strong);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

.content {
  position: relative;
  flex: 1; overflow: auto; padding: 20px; box-sizing: border-box;
  display: flex; flex-direction: column;
}
.page { display: none; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; }
.page.is-active { display: flex; }
.page > :not(.card-fill) { flex-shrink: 0; }
.page:not(:has(.card-fill)) { flex-shrink: 0; }

.card {
  background: var(--surface-card);
  border-width: 1px; border-style: solid; border-color: var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
}
.card-head {
  padding: 10px 12px; border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 10px;
}
.card-title {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: var(--fw-semibold); color: var(--text-strong); flex: 1;
}
.card-body { padding: 14px 16px; }
.card-body.is-flush { padding: 0; }
.card-fill { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }

.list-card { min-height: 210px; }
.list-card .state-empty { padding: 14px 0; gap: 5px; }
.list-card .state-empty > svg { width: 22px; height: 22px; }
.list-card .state-empty .t1 { font-size: var(--text-xs); }
.list-card .state-empty .t2 { font-size: var(--text-2xs); }
.card-fill .table-wrap { flex: 1; overflow: auto; }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.kpi { padding: 12px 14px; }
.kpi .k-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-subtle); font-weight: var(--fw-semibold);
}
.kpi .k-value {
  font-size: var(--text-2xl); font-weight: var(--fw-bold);
  color: var(--text-strong); line-height: 1; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi .k-note { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 6px; }

table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 12px; font-size: 10px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.06em; text-align: left;
  color: var(--table-header-fg); background: var(--table-header-bg);
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
tbody td {
  padding: 9px 12px; font-size: var(--text-xs); color: var(--text-body);
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-sunken); }
.c-name { font-weight: var(--fw-medium); color: var(--text-strong); }
.c-id   { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.code-line {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-strong);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 8px 10px;
  overflow-x: auto; white-space: nowrap; user-select: all;
}
.c-num  { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

.c-mid, th.c-mid { text-align: center; }

.c-right, thead th.c-right { text-align: right; }
.c-right { font-variant-numeric: tabular-nums; }

thead th.c-num {
  font-family: inherit; font-size: 10px; color: var(--table-header-fg);
  text-align: right;
}

th.is-sortable { cursor: pointer; user-select: none; }
th.is-sortable:hover { color: var(--text-strong); }
th.is-sortable:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

th.is-sortable .sort-mark {
  width: 12px; height: 12px; vertical-align: -2px; margin-left: 4px;
  opacity: 0.25; transition: transform 0.12s ease, opacity 0.12s ease;
}
th.is-sortable:hover .sort-mark { opacity: 0.6; }
th.is-sorted { color: var(--text-brand); }
th.is-sorted .sort-mark { opacity: 1; color: var(--text-brand); }
th.is-sorted[data-dir="down"] .sort-mark { transform: rotate(180deg); }
th.c-mid.is-sortable .sort-mark { margin-left: 2px; margin-right: -14px; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.row-actions button { border: 0; background: none; padding: 2px; display: grid; place-items: center; }
.row-actions svg { width: 18px; height: 18px; }
.a-brand { color: var(--text-brand); }
.a-warn  { color: var(--warning); }
.a-bad   { color: var(--danger); }

.pager {
  padding: 6px 12px; border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pager .range { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.pager .right { display: flex; gap: 8px; align-items: center; }

.state-loading {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; font-size: 13px; color: var(--text-muted);
}
.state-loading svg { width: 14px; height: 14px; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .state-loading svg { animation: none; } }

.state-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 48px 0; text-align: center;
}
.state-empty > svg { width: 32px; height: 32px; color: var(--text-subtle); }
.state-empty .t1 { font-size: 13px; color: var(--text-muted); }
.state-empty .t2 { font-size: 12px; color: var(--text-muted); }

.state-error {
  background: var(--danger-soft);
  border-width: 1px; border-style: solid; border-color: var(--border-subtle);
  border-radius: var(--radius-lg); padding: 14px 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
.state-error svg { width: 18px; height: 18px; color: var(--danger); flex: 0 0 18px; margin-top: 1px; }
.state-error .e1 { font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--text-xs); }
.state-error .e2 { font-family: var(--font-mono); font-size: 11px; color: var(--text-body); opacity: 0.85; margin-top: 4px; }
.state-error .retry {
  border: 0; background: none; color: var(--text-brand);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); padding: 6px 0 0; display: block;
}

.hexline {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-body);
  background: var(--surface-sunken); border-radius: var(--radius-xs);
  padding: 2px 6px; display: block; max-width: 100%;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.5;
}

table.monitor { table-layout: fixed; }
table.monitor td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
table.monitor td.monitor-note { color: var(--text-muted); }
.hexdiff .miss { background: var(--danger-soft); color: var(--danger); border-radius: 2px; padding: 0 1px; }
.conn-box { padding: 10px 12px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }

.conn-head {
  display: flex; align-items: center; gap: 8px; padding: 0 0 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: var(--fw-semibold); color: var(--nav-group-fg);
}
.conn-title { flex: 1; }
.conn-row { display: flex; align-items: center; gap: 10px; }
.conn-device-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.conn-serial {
  font-family: var(--font-mono); font-size: 13px;
  font-weight: var(--fw-bold); color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conn-sub {
  font-family: var(--font-mono); font-size: 10px; color: var(--nav-item-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conn-fw { font-size: 10px; color: var(--nav-item-fg); }

.conn-cut {
  flex: 0 0 30px; width: 30px; height: 30px;
  border: 0; background: none; color: var(--nav-danger-fg);
}
.conn-cut:hover { background: var(--nav-item-active-bg); color: var(--nav-danger-fg); }
.conn-cut svg { width: 16px; height: 16px; }

.stack { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-sunken); }
.stack span { display: block; height: 100%; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.legend .li { display: flex; align-items: center; gap: 6px; font-size: var(--text-2xs); color: var(--text-muted); }
.legend .sw { width: 9px; height: 9px; border-radius: 2px; }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.spark i { display: block; width: 5px; background: var(--surface-brand-soft); border-radius: 1px; }
.spark i.hi { background: var(--action-bg); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); font-weight: var(--fw-semibold); }
.rowline { display: flex; align-items: center; gap: 10px; }
.rowline .grow { flex: 1; }
.hint { font-size: var(--text-2xs); color: var(--text-muted); }
.hint.is-ok   { color: var(--success); }
.hint.is-warn { color: var(--warning); }
.hint.is-bad  { color: var(--danger); }
.console {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
  background: var(--surface-sunken); border-radius: var(--radius-md);
  padding: 12px 14px; overflow-x: auto; color: var(--text-body);
}
.console .out { color: var(--text-muted); }
.console .err { color: var(--danger); }
.console .ok  { color: var(--success); }

html.nav-collapsed:not([data-device]) .sidebar { width: 64px; flex: 0 0 64px; }
html.nav-collapsed:not([data-device]) .sidebar-head { min-height: 56px; padding: 14px 0; }
html.nav-collapsed:not([data-device]) .sidebar-head img,
html.nav-collapsed:not([data-device]) .app-name,
html.nav-collapsed:not([data-device]) .collapse-btn,
html.nav-collapsed:not([data-device]) .sidebar .conn-box,
html.nav-collapsed:not([data-device]) .sidebar-foot,
html.nav-collapsed:not([data-device]) .nav-item .label,
html.nav-collapsed:not([data-device]) .nav-item .pill-count,
html.nav-collapsed:not([data-device]) .nav-item .pill-alert { display: none; }
html.nav-collapsed:not([data-device]) .nav-expand-head,
html.nav-collapsed:not([data-device]) .nav-expand { display: grid; }
html.nav-collapsed:not([data-device]) .nav-group {
  height: 1px; padding: 0; margin: 6px 12px; overflow: hidden;
  font-size: 0; background: rgba(255,255,255,0.12);
}
html.nav-collapsed:not([data-device]) .nav-item {
  justify-content: center; padding: 10px 0; margin: 0 8px; width: calc(100% - 16px);
}

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }


.banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-lg);
  border-width: 1px; border-style: solid; border-color: var(--border-subtle);
}
.banner svg { width: 18px; height: 18px; flex: 0 0 18px; }
.banner .b-text { flex: 1; font-size: var(--text-xs); color: var(--text-body); }
.banner .b-text strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.banner-warn { background: var(--warning-soft); }
.banner-warn svg { color: var(--warning); }
.banner-info { background: var(--info-soft); }
.banner-info svg { color: var(--info); }
.banner-ok { background: var(--success-soft); }
.banner-ok svg { color: var(--success); }

.banner { position: relative; }
.banner .banner-close {
  align-self: flex-start; flex: none; margin: -6px -8px -6px 0; color: var(--text-subtle);
}
.banner .banner-close svg { color: currentColor; }

.steps { display: flex; gap: 0; }
.step {
  flex: 1; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-right: 1px solid var(--border-subtle);
}
.step:last-child { border-right: 0; }
.step .n {
  width: 22px; height: 22px; border-radius: 999px; flex: 0 0 22px;
  display: grid; place-items: center;
  font-size: var(--text-2xs); font-weight: var(--fw-bold);
  background: var(--surface-sunken); color: var(--text-subtle);
}
.step.is-done .n { background: var(--success-soft); color: var(--success); }
.step.is-now  .n { background: var(--action-bg); color: var(--action-fg); }
.step .t { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong); }
.step .d { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 2px; }
.step.is-todo .t { color: var(--text-muted); font-weight: var(--fw-medium); }

.rssi { display: inline-flex; align-items: center; gap: 7px; }
.rssi .bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.rssi .bars i { width: 3px; background: var(--border-default); border-radius: 1px; display: block; }
.rssi .bars i.q-good { background: var(--success); }
.rssi .bars i.q-mid  { background: var(--warning); }
.rssi .bars i.q-poor { background: var(--danger); }
.rssi .v { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.overlay {
  position: fixed; inset: 0; background: var(--overlay);
  display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px;
}
.overlay.is-open { display: flex; }
.modal {
  width: 100%; max-width: 560px; max-height: 100%;
  background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
  padding: 12px 16px; border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: var(--fw-semibold); color: var(--text-strong);
}
.modal-body { padding: 14px 16px; font-size: var(--text-xs); line-height: 1.6; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-foot {
  padding: 10px 16px; border-top: 1px solid var(--border-subtle);
  background: var(--surface-page); display: flex; justify-content: flex-end; gap: 8px;
}

.overlay.is-drawer { align-items: stretch; justify-content: flex-end; padding: 0; z-index: 9998; }
.drawer {
  width: 100%; max-width: 720px; height: 100%;
  background: var(--surface-card);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  animation: drawer-in var(--duration-base) var(--ease-standard) both;
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }

.drawer-head {
  padding: 12px 16px; border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: var(--fw-semibold); color: var(--text-strong);
}
.drawer-body {
  padding: 14px 16px; font-size: var(--text-xs); line-height: 1.6;
  overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 12px;
}
.drawer-foot {
  padding: 10px 16px; border-top: 1px solid var(--border-subtle);
  background: var(--surface-page); display: flex; justify-content: flex-end; gap: 8px;
}

.page-tabs, .sub-tabs {
  display: flex; gap: 2px; padding: 0 14px; flex-shrink: 0; overflow-x: auto; overflow-y: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
.page-tabs { background: var(--surface-card); }
.sub-tabs { background: var(--surface-page); }
.page-tab, .sub-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; margin-bottom: -1px;
  white-space: nowrap; font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  transition: color var(--duration-fast);
}
.page-tab:hover:not(.is-active), .sub-tab:hover:not(.is-active) { color: var(--text-body); }
.page-tab.is-active { color: var(--text-brand); font-weight: var(--fw-semibold); border-bottom-color: var(--border-brand); }
.page-tab:focus-visible, .sub-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.page-tab svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; }
.sub-tab { height: 36px; padding: 0 16px; font-weight: var(--fw-regular); }
.sub-tab.is-active { color: var(--text-brand); font-weight: var(--fw-medium); border-bottom-color: var(--border-brand); }
.sub-tab svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; }
.sub-tab .badge, .page-tab .badge { margin-left: 2px; }
.tab-count {
  min-width: 16px; height: 16px; padding: 0 5px; border-radius: var(--radius-pill); text-align: center;
  font-size: 10px; line-height: 16px; font-weight: var(--fw-semibold);
  background: var(--surface-sunken); color: var(--text-muted);
}
.is-active > .tab-count { background: var(--surface-brand-soft); color: var(--text-brand); }
.tab-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--text-brand); }

.divider {
  height: 1px; border: 0; margin: 14px 0;
  background: var(--border-subtle);
}

.field-error { border-color: var(--danger) !important; }
.err-text { font-size: var(--text-2xs); color: var(--danger); }

.deflist { display: grid; grid-template-columns: 150px 1fr; gap: 7px 12px; align-items: baseline; }
.deflist dt { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); font-weight: var(--fw-semibold); }
.deflist dd { margin: 0; font-size: var(--text-xs); color: var(--text-body); }

.progress { height:7px; background:var(--surface-sunken); border-radius:var(--radius-pill); overflow:hidden; }
.progress > span { display:block; height:100%; background:var(--action-bg); border-radius:var(--radius-pill);
  transition:width var(--duration-base) var(--ease-standard); }

.progress > span.is-indeterminate {
  background-image: linear-gradient(115deg,
    rgba(255,255,255,0.28) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0.28) 75%, transparent 75%);
  background-size: 18px 18px;
  animation: progress-stripes 900ms linear infinite;
  transition: none;
}
@keyframes progress-stripes { from { background-position: 0 0; } to { background-position: 18px 0; } }

@media (prefers-reduced-motion: reduce) {
  .progress > span.is-indeterminate { animation: none; }
}


#ov-handbuch { align-items: flex-start; padding: 8vh 20px 20px; }

.hb-modal { max-width: min(700px, 92vw); max-height: 78vh; }

.hb-marke {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-brand-soft); color: var(--text-brand);
}
.hb-marke svg { width: 17px; height: 17px; }

.hb-modal .modal-head .icon-btn { border: 1px solid var(--border-subtle); }
.hb-modal .modal-head .icon-btn:hover { border-color: var(--border-default); }

.hb-kopf-titel { line-height: 1.2; }
.hb-kopf-sub {
  font-family: var(--font-body); font-size: var(--text-2xs); font-weight: var(--fw-regular);
  color: var(--text-muted); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hb-suchzeile {
  display: flex; flex: 0 0 auto;
  padding: 10px 14px; border-bottom: 1px solid var(--border-subtle);
}
.hb-suchfeld {
  display: flex; align-items: center; gap: 8px; flex: 1;
  height: var(--control-h); padding: 0 10px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
}
.hb-suchfeld:focus-within { border-color: var(--border-brand); box-shadow: var(--shadow-focus); }
.hb-lupe { width: 14px; height: 14px; flex: 0 0 14px; color: var(--text-subtle); }
.hb-suchfeld input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-family: inherit; font-size: var(--text-xs); color: var(--text-body);
}
.hb-suchfeld input:focus-visible { box-shadow: none; }

.hb-suchfeld input::-webkit-search-cancel-button { display: none; }

.hb-body { flex: 1; overflow-y: auto; }

.hb-gruppe {
  padding: 13px 14px 5px;
  font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-subtle);
}

.hb-item {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 8px 14px; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; color: var(--text-body);
  transition: background var(--duration-fast) var(--ease-standard);
}
.hb-item:hover { background: var(--surface-sunken); }

.hb-art {
  width: 25px; height: 25px; flex: 0 0 25px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken); color: var(--text-muted);
}
.hb-art svg { width: 14px; height: 14px; }

.hb-item-text { flex: 1; min-width: 0; }
.hb-titel {
  display: block; font-size: var(--text-xs);
  font-weight: var(--fw-semibold); color: var(--text-strong);
}
.hb-summary {
  display: block; margin-top: 2px;
  font-size: var(--text-2xs); color: var(--text-muted); line-height: 1.45;
}

.hb-leer {
  padding: 34px 16px; text-align: center;
  font-size: var(--text-xs); color: var(--text-muted);
}

.hb-inhalt { padding: 16px 18px 22px; line-height: 1.6; }

.hb-inhalt h1 { font-size: var(--text-lg);  margin: 0 0 10px; }
.hb-inhalt h2 { font-size: var(--text-base);  margin: 22px 0 6px; }
.hb-inhalt h3 { font-size: var(--text-sm);  margin: 16px 0 5px; }
.hb-inhalt p, .hb-inhalt li { font-size: var(--text-xs); }
.hb-inhalt .hb-bild {
  margin: 18px 0 20px; padding: 16px 16px 12px; text-align: center;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.hb-inhalt .hb-bild img {
  display: block; margin: 0 auto; height: auto; cursor: zoom-in;
  width: min(calc(var(--hb-w) * 0.8px), calc(var(--hb-w) / var(--hb-h) * 380px), 74%);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); background: var(--surface-card);
}
.hb-inhalt .hb-bild.is-zoomed img { width: 100%; cursor: zoom-out; }
.hb-inhalt .hb-bild figcaption {
  margin-top: 10px; font-size: var(--text-2xs); color: var(--text-subtle);
}

.hb-inhalt .hb-ansicht { margin: 18px 0 20px; text-align: center; }
.hb-inhalt .hb-ansicht-bild { position: relative; display: inline-block; max-width: 74%; }
.hb-inhalt .hb-ansicht-bild img { display: block; max-width: 100%; max-height: 420px; width: auto; height: auto; }
.hb-inhalt .hb-punkt {
  position: absolute; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff;
  background: var(--surface-brand); color: var(--text-on-brand);
  font-size: 11px; font-weight: var(--fw-bold); line-height: 18px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.hb-inhalt .hb-ansicht figcaption { margin-top: 8px; font-size: var(--text-2xs); color: var(--text-subtle); }
.hb-inhalt .hb-legende { list-style: none; margin: 10px 0 0; padding: 0; text-align: left; }
.hb-inhalt .hb-legende li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 4px; font-size: var(--text-xs); }
.hb-inhalt .hb-punkt-nr {
  flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--surface-brand);
  color: var(--text-on-brand); font-size: 10px; font-weight: var(--fw-bold); line-height: 18px; text-align: center;
}

.hb-inhalt .hb-sicherheit {
  position: relative; margin: 12px 0; padding: 0 12px 10px 64px;
  border: 1px solid var(--text-strong); border-radius: var(--radius-sm); background: var(--surface-card);
}
.hb-inhalt .hb-zeichen { position: absolute; left: 10px; top: 36px; width: 42px; }
.hb-inhalt .hb-zeichen svg { width: 42px; height: 42px; display: block; }
.hb-inhalt .hb-signal {
  margin: 0 -12px 8px -64px; padding: 3px 12px 3px 64px;
  font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; font-size: var(--text-xs);
  background: #f9a800; color: #1d2626;
}
.hb-inhalt .hb-hinweis .hb-signal { background: #005387; color: #fff; font-style: italic; }
.hb-inhalt .hb-warnung.hb-sicherheit .hb-signal { background: #ef7d00; }
.hb-inhalt .hb-gefahr .hb-signal { background: #c8102e; color: #fff; }
.hb-inhalt .hb-sicherheit p { margin: 0 0 4px; }
.hb-inhalt .hb-sicherheit ul { margin: 4px 0 0; padding-left: 18px; }

.hb-inhalt .hb-offen {
  background: var(--warning-soft); color: var(--text-strong); font-style: italic;
  border-bottom: 1px dashed var(--warning); padding: 0 2px; border-radius: 2px; cursor: help;
}
.hb-inhalt .hb-offen-block {
  display: block; margin: 12px 0; padding: 8px 12px;
  border: 1px dashed var(--warning); border-radius: var(--radius-sm);
}

.hb-inhalt .hb-tablewrap {
  margin: 12px 0; overflow-x: auto;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
}
.hb-inhalt table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.hb-inhalt .hb-tablewrap table { margin: 0; }
.hb-inhalt th, .hb-inhalt td {
  border-bottom: 1px solid var(--border-subtle);
  padding: 6px 8px; text-align: left;
  font-size: var(--text-2xs); vertical-align: top;
  white-space: normal; overflow-wrap: break-word;
}
.hb-inhalt th { position: static; font-weight: var(--fw-semibold); color: var(--text-muted); }
.hb-inhalt tbody tr:last-child td { border-bottom: 0; }
.hb-inhalt tbody tr:hover td { background: none; }

.hb-inhalt .hb-callout {
  margin: 14px 0; padding: 11px 14px;
  border-left: 3px solid; border-radius: var(--radius-sm);
}
.hb-inhalt .hb-callout > p:last-child { margin-bottom: 0; }
.hb-inhalt .hb-callout.hb-hinweis { background: var(--info-soft); border-left-color: var(--info); }
.hb-inhalt .hb-callout.hb-warnung { background: var(--warning-soft); border-left-color: var(--warning); }
.hb-inhalt .hb-callout.hb-schritt { background: var(--surface-sunken); border-left-color: var(--border-default); }

.hb-inhalt blockquote {
  margin: 12px 0; padding: 8px 14px;
  border-left: 3px solid var(--surface-brand);
  background: var(--surface-sunken);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.hb-inhalt blockquote p:last-child { margin-bottom: 0; }

.hb-foot { justify-content: flex-start; }
.hb-fuss-hinweis { font-size: var(--text-2xs); color: var(--text-subtle); }
.hb-pdf {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--text-link); text-decoration: none;
}
.hb-pdf svg { width: 15px; height: 15px; }

@media (max-height: 700px) {
  #ov-handbuch { padding-top: 3vh; }
  .hb-modal    { max-height: 90vh; }
}

.svc-table {
  margin-top: 1lh; overflow-x: auto;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
}
.svc-table th:nth-child(2) { width: 100%; }
.svc-table thead th { position: static; }


.device-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  background: var(--surface-hero); color: var(--on-hero-text); box-shadow: var(--shadow-md);
}
.device-hero::after {   /* die Welle — Schmuck */
  content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 320px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18); pointer-events: none;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.05), 0 0 0 60px rgba(255, 255, 255, 0.03);
}
.hero-top {
  position: relative; z-index: 1; padding: 22px 24px 18px;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px;
}
.hero-kicker { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-hero-muted); font-weight: var(--fw-semibold); }
.hero-name {
  font-family: var(--font-display); font-size: 30px; font-weight: var(--fw-bold); line-height: 1.1; margin-top: 4px;
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.hero-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-src {
  flex: none; font-family: var(--font-body); font-size: 10px; font-weight: var(--fw-medium); letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: var(--radius-pill); background: var(--on-hero-fill-strong); border: 1px solid var(--on-hero-line);
}
.hero-meta { font-size: var(--text-xs); color: var(--on-hero-muted); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.hero-meta .mono { color: inherit; }
.hero-state {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 7px 12px 7px 10px; max-width: 100%;
  background: var(--on-hero-fill-strong); border: 1px solid var(--on-hero-line); border-radius: var(--radius-pill); font-size: var(--text-sm);
}
.hero-live { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--on-hero-live); animation: hero-pulse 2s infinite; }
.hero-live.is-idle { background: var(--on-hero-warn-line); animation: none; }
@keyframes hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(126, 226, 184, 0.7); }
  70%  { box-shadow: 0 0 0 9px rgba(126, 226, 184, 0); }
  100% { box-shadow: 0 0 0 0 rgba(126, 226, 184, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-live { animation: none; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.btn.btn-hero { background: var(--on-hero-text); color: var(--petrol-800); border: 1px solid var(--on-hero-text); }
.btn.btn-on-hero { background: transparent; color: var(--on-hero-text); border: 1px solid var(--on-hero-line-strong); }
.btn.btn-on-hero:hover { background: var(--on-hero-fill); filter: none; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
.hero-stat { background: var(--on-hero-fill); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-md); padding: 10px 12px; min-width: 0; }
.hero-stat .l { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-hero-muted); font-weight: var(--fw-semibold); }
.hero-stat .v { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); margin-top: 4px; line-height: 1.1;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-stat .n { font-size: var(--text-2xs); color: var(--on-hero-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-stat.is-warn { background: var(--on-hero-warn-fill); border-color: var(--on-hero-warn-line); }
.hero-stat.is-alert { background: var(--on-hero-alert-fill); border: 2px solid var(--on-hero-alert-line); padding: 9px 11px; }
.hero-stat.is-alert .v { display: flex; align-items: center; gap: 8px; }
.hero-stat.is-alert .v svg { width: 1.15em; height: 1.15em; flex: none; color: var(--on-hero-alert-icon); }
.hero-stat.is-alert .n { color: var(--on-hero-text); font-weight: var(--fw-semibold); }

.xfer-band {
  position: relative; z-index: 1; display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)) auto;
  background: var(--on-hero-band); border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.xfer-band > div { padding: 12px 16px; border-left: 1px solid rgba(255, 255, 255, 0.10); min-width: 0; }
.xfer-band > div:first-child { border-left: 0; display: flex; align-items: center; gap: 10px; }
.xfer-band .xfer-ico { width: 34px; height: 34px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--on-hero-fill-strong); }
.xfer-band .xfer-ico svg { width: 18px; height: 18px; }
.xfer-band .l { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-hero-muted); font-weight: var(--fw-semibold); }
.xfer-band .v { font-size: var(--text-sm); font-weight: var(--fw-semibold); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xfer-band .n { font-size: var(--text-2xs); color: var(--on-hero-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xfer-band .is-ok { color: var(--on-hero-ok); }
.xfer-band .is-bad { color: var(--on-hero-bad); }
.xfer-band .xfer-go { display: flex; align-items: center; }
.hero-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.hero-bars i { width: 4px; background: rgba(255, 255, 255, 0.28); border-radius: 1px; }
.hero-bars i.on { background: var(--on-hero-text); }

.lanes { display: flex; flex-direction: column; }
.lane-scale, .lane { display: grid; grid-template-columns: 220px minmax(0, 1fr) 170px; gap: 14px; }
.lane-scale { padding: 14px 16px 0; }
.lane-marks { position: relative; height: 12px; font-size: 9px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.lane-marks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.lane { align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.lane:last-child { border-bottom: 0; }
.lane-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lane-icon { width: 34px; height: 34px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center;
             background: var(--surface-brand-soft); color: var(--text-brand); }
.lane-icon svg { width: 18px; height: 18px; }
.lane.is-off .lane-icon { background: var(--surface-sunken); color: var(--text-subtle); }
.lane-name { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--text-sm); }
.lane-sub { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-track { position: relative; height: 30px; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.lane-tick { position: absolute; top: 7px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--petrol-500); }
.lane.is-upload .lane-tick { background: var(--chart-2); }
.lane-tick.is-next { top: 3px; height: 24px; width: 6px; margin-left: -3px; box-shadow: 0 0 0 3px var(--surface-card); }
.lane-dense { position: absolute; top: 9px; height: 12px; border-radius: 3px; opacity: 0.85;
              background: repeating-linear-gradient(90deg, var(--petrol-500) 0 2px, transparent 2px 4px); }
.lane.is-upload .lane-dense { background: repeating-linear-gradient(90deg, var(--chart-2) 0 2px, transparent 2px 4px); }
.lane-beyond {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--radius-pill); background: var(--surface-card); border: 1px solid var(--border-subtle);
  font-size: var(--text-2xs); color: var(--text-body); white-space: nowrap;
}
.lane-beyond svg { width: 12px; height: 12px; color: var(--text-brand); }
.lane-off {
  position: absolute; inset: 0; display: flex; align-items: center; padding: 0 12px; font-size: var(--text-2xs); color: var(--text-muted);
  border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, transparent 0 8px, var(--border-subtle) 8px 9px);
  white-space: nowrap; overflow: hidden;
}
.lane-now { position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; background: var(--danger); }
.lane:first-child .lane-now::before {
  content: attr(data-label); position: absolute; top: -2px; left: 5px; font-size: 9px; color: var(--danger); font-weight: var(--fw-semibold);
}
.lane-next { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 4px; }
.lane-next b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.lane > .btn { justify-self: end; }
.lane-warn { display: flex; gap: 8px; align-items: center; margin: 0 16px 12px; padding: 8px 12px; border-radius: var(--radius-sm);
             background: var(--warning-soft); color: var(--text-strong); font-size: var(--text-xs); }
.lane-warn svg { width: 16px; height: 16px; flex: none; color: var(--warning); }

.lic-ring-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; flex: 1; }
.lic-ring { width: 100%; max-width: 230px; aspect-ratio: 1; }
.lic-ring .track { stroke: var(--surface-sunken); }
.lic-ring text { font-family: var(--font-display); fill: var(--text-strong); }
.lic-ring text.sub { fill: var(--text-muted); font-family: var(--font-body); }
.lic-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: var(--text-xs); color: var(--text-body); }
.lic-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.lic-legend .is-over { color: var(--text-strong); font-weight: var(--fw-semibold); }

.reach-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.reach-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-brand-soft);
                color: var(--text-brand); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xs); }
.reach-who .t1 { font-size: var(--text-sm); color: var(--text-strong); font-weight: var(--fw-semibold); }
.reach-who .t2 { font-size: var(--text-2xs); color: var(--text-muted); }
.reach-who .btn { margin-left: auto; }
.reach-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reach-tile { border-radius: var(--radius-sm); padding: 9px 10px; display: flex; align-items: center; gap: 8px; min-width: 0;
              background: var(--surface-sunken); font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong); }
.reach-tile > div { min-width: 0; }
.reach-tile small { display: block; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 10px; color: var(--text-muted);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reach-tile svg { width: 16px; height: 16px; flex: none; }
.reach-tile.is-ok { background: var(--success-soft); } .reach-tile.is-ok svg { color: var(--success); }
.reach-tile.is-bad { background: var(--danger-soft); } .reach-tile.is-bad svg { color: var(--danger); }
.reach-label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); font-weight: var(--fw-semibold); margin: 12px 0 6px; }

.health-rows { display: grid; gap: 9px; align-content: start; }
.health-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--text-xs); color: var(--text-body); }
.health-row > svg { width: 16px; height: 16px; color: var(--text-subtle); }
.health-row .v { color: var(--text-strong); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; text-align: right; }
.health-bar { height: 4px; border-radius: 2px; background: var(--surface-sunken); margin-top: 4px; overflow: hidden; }
.health-bar span { display: block; height: 100%; background: var(--petrol-500); }

.overview-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.overview-row > .card { display: flex; flex-direction: column; }
.overview-row > .card > .card-body { flex: 1; }
.overview-foot { padding: 10px 12px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: flex-end; gap: 8px; }
.log-tail { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.75; padding: 10px 16px; color: var(--text-body); white-space: pre; overflow: auto;
            max-height: calc(12 * 1.75 * 11.5px + 20px); }
.log-tail .log-warn { color: var(--warning); } .log-tail .log-error { color: var(--danger); } .log-tail .log-time { color: var(--text-subtle); }

@media (max-width: 1180px) {
  .hero-top { grid-template-columns: 1fr; }
  .xfer-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xfer-band > div { border-top: 1px solid rgba(255, 255, 255, 0.10); }
  .overview-row { grid-template-columns: 1fr; }
  .lane-scale, .lane { grid-template-columns: 170px minmax(0, 1fr) 150px; }
}
@media (max-width: 700px) {
  .lane { grid-template-columns: 1fr auto; }
  .lane .lane-track-wrap { grid-column: 1 / -1; grid-row: 2; }
  .lane-scale { display: none; }
  .xfer-band { grid-template-columns: 1fr 1fr; }
}

.error-box { margin-bottom: 14px; }
.error-body { flex: 1; }
.confirm-word { padding-top: 0; }

.port-row { display: grid; grid-template-columns: 32px 220px minmax(0, 1fr) 140px; gap: 14px; align-items: center;
            padding: 8px 14px; border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); }
.port-row:first-child { border-top: 0; }
.port-row .port-action { display: flex; justify-content: flex-end; }
.port-desc { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.port-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center;
             background: var(--surface-brand-soft); color: var(--text-brand); }
.port-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }

.net-manual { display: flex; align-items: center; gap: 4px; min-width: 0; }
.net-address { flex: 1; min-width: 0; font-size: var(--text-xs); }
.net-colon { color: var(--text-subtle); }
.net-port { width: 64px; flex: none; font-size: var(--text-xs); }
.net-found { padding-left: 11px; font-size: var(--text-xs); color: var(--text-strong);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-hint { border-top: 1px solid var(--border-subtle); line-height: 1.6; }
.sim-actions { display: grid; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.sim-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); gap: 10px 14px; }
.sim-field { display: grid; gap: 4px; }
.sim-row { display: grid; gap: 4px; }
.sim-row.sim-fields { align-items: end; }
.sim-note { margin-top: 12px; font-size: var(--text-xs); }
.sim-note.is-ok { color: var(--success); }
.sim-note.is-bad { color: var(--danger); }
.sim-note.is-warn { color: var(--warning); }
.port-row.net-recent-row { grid-template-columns: 32px 220px minmax(0, 1fr) auto; }
[data-device="phone"] .port-row.net-recent-row { grid-template-columns: 32px minmax(0, 1fr); }
[data-device="phone"] .net-manual { width: 100%; }

.demo-card { border-style: dashed; }
.demo-name { font-weight: var(--fw-semibold); min-width: 0; }
.demo-hint { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md);
             background: var(--surface-brand-soft); font-size: var(--text-xs); }
.demo-hint svg { width: 16px; height: 16px; flex: none; color: var(--text-brand); fill: none; stroke: currentColor; }
.demo-hint code { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--text-strong);
                  padding: 1px 6px; border-radius: 4px; background: var(--surface-card); }
.demo-hint .grow { flex: 1; }

.fw-card { display: flex; flex-direction: column; gap: 10px; }
.fw-running { font-family: var(--font-mono); font-size: var(--text-sm); }
.fw-ways { gap: 10px; flex-wrap: wrap; }
.fw-sdp-mark { width: 16px; height: 16px; flex: none; }
.btn-primary .fw-sdp-mark, .btn-warn .fw-sdp-mark { color: currentColor; }
.deftable { width: 100%; border-collapse: collapse; }
.deftable td { padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.deftable tr:last-child td { border-bottom: none; }
.deftable .k { color: var(--text-muted); width: 210px; }
.deftable .v { color: var(--text-body); }
.deftable .v.is-ok { color: var(--success); }
.deftable .v.is-bad { color: var(--danger); }
.fw-file-row { margin-bottom: 12px; }
.fw-file-icon { width: 16px; height: 16px; color: var(--text-brand); fill: none; stroke: currentColor; }
.fw-note { margin-top: 16px; }
.fw-run-note { margin-top: 14px; line-height: 1.6; }
.fw-timing { margin-bottom: 14px; }
.dz-choose { color: var(--text-brand); }
#fw-drop-error { margin-top: 12px; }
#fw-drop-error:empty { display: none; }
.fw-modal { max-width: 600px; }
.licence-modal { max-width: 560px; }
.licence-gap { margin-top: 12px; }
.licence-note { margin-top: 8px; }

.action-row { display: flex; align-items: center; gap: 14px; }
.action-text { flex: 1; font-size: var(--text-xs); line-height: 1.6; }
[data-device="phone"] .action-row { flex-direction: column; align-items: stretch; }

body.is-wizard > .shell { display: none; }
.wizard-screen { container: wizard / inline-size; min-height: 100vh; min-height: 100dvh; display: flex; background: var(--surface-page); }
.wizard-screen[hidden] { display: none; }
.wizard-page { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px 16px; }
.wizard-appline { width: min(720px, 100%); display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--text-muted); }
.wizard-appline b { font-family: var(--font-display); color: var(--text-strong); font-weight: var(--fw-semibold); }
.wizard-appline .grow { flex: 1; }
.wizard-after { width: min(720px, 100%); margin: 0; display: flex; gap: 8px; font-size: var(--text-2xs); color: var(--text-muted); line-height: 1.5; }
.wizard-after svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--text-subtle); }

.wizard { width: min(720px, 100%); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
          box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; }
.wizard-head { position: relative; overflow: hidden; flex: none; background: var(--surface-hero); color: var(--on-hero-text); }
.wizard-head::after { content: ""; position: absolute; right: -160px; bottom: -200px; width: 420px; height: 320px; border-radius: 50%;
                      border: 2px solid rgba(255, 255, 255, 0.18); pointer-events: none;
                      box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.05), 0 0 0 60px rgba(255, 255, 255, 0.03); }
.wizard-head > * { position: relative; z-index: 1; }
.wizard-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 18px 22px 6px; }
.wizard-kicker { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-hero-muted); font-weight: var(--fw-semibold); }
.wizard-name { font-family: var(--font-display); font-size: 24px; font-weight: var(--fw-bold); line-height: 1.1; margin-top: 4px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-state { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 12px 7px 10px; max-width: 100%; box-sizing: border-box;
                background: var(--on-hero-fill-strong); border: 1px solid var(--on-hero-line); border-radius: var(--radius-pill); font-size: var(--text-sm); }
.wizard-live { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--on-hero-live); }
.wizard-live.is-double { background: var(--on-hero-text); animation: wizard-double 1.6s infinite; }
@keyframes wizard-double { 0%, 10% { opacity: 1; } 11%, 20% { opacity: 0.15; } 21%, 30% { opacity: 1; } 31%, 100% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .wizard-live.is-double { animation: none; } }
.wizard-exit { flex: none; }
.wizard-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 22px 0; font-size: var(--text-2xs); color: var(--on-hero-muted); }
.wizard-facts span { display: inline-flex; align-items: center; gap: 6px; }
.wizard-facts b { color: var(--on-hero-text); font-weight: var(--fw-semibold); }
.wizard-facts svg { width: 14px; height: 14px; }

.wizard-dots { display: flex; align-items: flex-start; padding: 14px 22px 16px; }
.wizard-dot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; min-width: 0;
              background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: default; }
.wizard-dot.is-done { cursor: pointer; }
.wizard-dot:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 17px); right: calc(-50% + 17px); height: 2px;
                                      border-radius: 1px; background: var(--on-hero-line); }
.wizard-dot.is-done:not(:last-child)::after { background: var(--on-hero-text); }
.wizard-dot .n { width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-2xs); font-weight: var(--fw-bold);
                 border: 2px solid var(--on-hero-line-strong); color: var(--on-hero-muted); }
.wizard-dot .n svg { width: 14px; height: 14px; stroke-width: 3; }
.wizard-dot.is-done .n, .wizard-dot.is-now .n { background: var(--on-hero-text); border-color: var(--on-hero-text); color: var(--petrol-800); }
.wizard-dot.is-now .n { box-shadow: 0 0 0 5px var(--on-hero-fill-strong); }
.wizard-dot .t { font-size: var(--text-2xs); color: var(--on-hero-muted); font-weight: var(--fw-medium); text-align: center; line-height: 1.25; }
.wizard-dot.is-done .t { color: var(--on-hero-text); }
.wizard-dot.is-now .t { color: var(--on-hero-text); font-weight: var(--fw-semibold); }

.wizard-bar, .wizard-progress { display: none; }

.wizard-body { padding: 18px 22px 20px; display: grid; gap: 16px; align-content: start; overflow: auto; }
.wizard-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.wizard-lead { margin: 0; max-width: 62ch; font-size: var(--text-sm); line-height: 1.55; color: var(--text-body); }
.wizard-form { display: grid; gap: 14px; max-width: 460px; }
.login-device { margin-left: auto; font-family: var(--font-body); font-size: var(--text-2xs); font-weight: var(--fw-regular);
                color: var(--text-muted); }
.login-check { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--text-body); }
.login-check label { cursor: pointer; }
.wizard-ident { min-width: 0; }
.wizard-content { display: grid; gap: 16px; }
.wizard-secret { position: relative; }
.wizard-secret .input { width: 100%; padding-right: 40px; box-sizing: border-box; }
.wizard-secret .icon-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.wizard-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.wizard-meter i { height: 4px; border-radius: 2px; background: var(--surface-sunken); display: block; }
.wizard-meter.s1 i:nth-child(-n+1) { background: var(--danger); }
.wizard-meter.s2 i:nth-child(-n+2) { background: var(--warning); }
.wizard-meter.s3 i:nth-child(-n+3), .wizard-meter.s4 i { background: var(--success); }

.wizard-checks { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.wizard-check { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; }
.wizard-check + .wizard-check { border-top: 1px solid var(--border-subtle); }
.wizard-tile { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--success-soft); color: var(--success); }
.wizard-tile svg { width: 18px; height: 18px; }
.wizard-check.is-warn .wizard-tile { background: var(--warning-soft); color: var(--warning); }
.wizard-check.is-busy .wizard-tile { background: var(--surface-sunken); color: var(--text-subtle); }
.wizard-check .t, .wizard-todo .t { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.wizard-check .d, .wizard-todo .d { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 2px; }
.wizard-check .d .mono { color: var(--text-body); }
.wizard-check .act { display: flex; gap: 8px; align-items: center; }
.wizard-check .act:empty { display: none; }
.wizard-check .wizard-pick { grid-column: 2 / -1; }

.wizard-sum { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.wizard-sum > * { padding: 10px 14px; border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); min-width: 0; }
.wizard-sum > :nth-child(-n+3) { border-top: 0; }
.wizard-sum .l { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); font-weight: var(--fw-semibold); }
.wizard-sum .v { color: var(--text-strong); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.wizard-sum .e { text-align: right; }
.wizard-sum .e .btn { height: 26px; padding: 0 8px; }
.wizard-sum.is-plain { grid-template-columns: 170px minmax(0, 1fr); }
.wizard-sum.is-plain > :nth-child(3) { border-top: 1px solid var(--border-subtle); }
.wizard-check.is-running .wizard-tile { background: var(--surface-brand-soft); color: var(--text-brand); }
.wizard-check.is-running .wizard-tile svg { animation: spin 900ms linear infinite; }
@media (prefers-reduced-motion: reduce) { .wizard-check.is-running .wizard-tile svg { animation: none; } }
.wizard-subhead { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); margin: 4px 0 -4px; }
.wizard-todos { display: grid; gap: 8px; }
.wizard-todo { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px;
               border: 1px dashed var(--border-default); border-radius: var(--radius-md); }
.wizard-todo .wizard-tile { background: var(--surface-brand-soft); color: var(--text-brand); }
.wizard-done { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 26px 10px 12px; }
.wizard-done .wizard-tile { width: 56px; height: 56px; border-radius: 50%; }
.wizard-done .wizard-tile svg { width: 28px; height: 28px; stroke-width: 2.5; }
.wizard-done h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0; color: var(--text-strong); }
.wizard-done .wizard-lead { text-align: center; }

.wizard-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--border-subtle); background: var(--surface-page); }
.wizard-foot .grow { flex: 1; font-size: var(--text-2xs); color: var(--text-muted); }

@container wizard (max-width: 640px) {
  .wizard-page { padding: 0; gap: 0; justify-content: stretch; align-items: stretch; }
  .wizard-appline, .wizard-after { display: none; }
  .wizard { width: 100%; flex: 1; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .wizard-top, .wizard-dots { display: none; }
  .wizard-bar, .wizard-progress { display: block; }
  .wizard-bar .row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 4px; padding: 6px 4px; min-height: var(--touch-h); }
  .wizard-bar .row > .is-wide { grid-column: 1 / 3; padding-left: 12px; }
  .wizard-bar .icon-btn { width: var(--touch-h-sm); height: var(--touch-h-sm); color: var(--on-hero-text); }
  .wizard-bar .icon-btn:hover { background: var(--on-hero-fill); color: var(--on-hero-text); }
  .wizard-bar .icon-btn svg { width: 20px; height: 20px; }
  .wizard-bar .ttl { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wizard-bar .sub { display: flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--on-hero-muted); white-space: nowrap; overflow: hidden; }
  .wizard-bar .sub .wizard-live { width: 7px; height: 7px; }
  .wizard-facts { padding: 2px 16px 10px; gap: 4px 14px; }
  .wizard-progress { padding: 4px 16px 14px; }
  .wizard-progress .bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
  .wizard-progress .bars i { height: 4px; border-radius: 2px; background: var(--on-hero-line); display: block; }
  .wizard-progress .bars i.is-on { background: var(--on-hero-text); }
  .wizard-progress .txt { margin-top: 8px; font-size: var(--text-2xs); color: var(--on-hero-muted); }
  .wizard-progress .txt b { color: var(--on-hero-text); font-weight: var(--fw-semibold); }
  .wizard-body { flex: 1; padding: 16px; overflow: visible; }
  .wizard-title { font-size: var(--text-base); }
  .wizard-form { max-width: none; }
  .wizard .input { height: var(--touch-h); font-size: var(--text-sm); }
  .wizard-secret .icon-btn { width: var(--touch-h-sm); height: var(--touch-h-sm); right: 6px; }
  .wizard-check .btn, .wizard-todo .btn, .wizard-sum .e .btn { height: var(--touch-h-sm); }
  .wizard-check, .wizard-todo { grid-template-columns: 34px minmax(0, 1fr); }
  .wizard-check .act, .wizard-todo > .btn { grid-column: 2; justify-self: start; }
  .wizard-sum { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: dense; }
  .wizard-sum .l { grid-column: 1; padding-bottom: 0; }
  .wizard-sum .v { grid-column: 1; border-top: 0; padding-top: 2px; }
  .wizard-sum .e { grid-column: 2; grid-row: span 2; display: grid; align-items: center; padding: 6px 8px; }
  .wizard-foot { position: sticky; bottom: 0; z-index: 2; padding: 10px 16px 14px; background: var(--surface-card); }
  .wizard-foot .grow, .wizard-foot .wizard-back { display: none; }
  .wizard-foot .btn-primary { flex: 1; height: var(--touch-h); justify-content: center; font-size: var(--text-sm); }
}

:root { --env-band-h: 26px; }
[data-device] { --env-band-h: 30px; }
.env-band {
  height: var(--env-band-h); display: flex; align-items: center; gap: 8px;
  padding: 0 14px; background: var(--env-devel); color: var(--env-devel-ink);
  font-size: 12px; line-height: 1; white-space: nowrap; overflow: hidden;
  position: relative; z-index: 50;
}
.env-band-top { position: fixed; top: 0; left: 0; right: 0; }
.env-band svg {
  width: 14px; height: 14px; flex: 0 0 14px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.env-band strong { font-weight: var(--fw-semibold); letter-spacing: .02em; }
.env-band .env-host { opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.env-band .env-tag {
  margin-left: auto; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .08em;
  border: 1px solid currentColor; border-radius: 4px; padding: 2px 6px;
}
[data-device="phone"] .env-band .env-host { display: none; }
.demo-band {
  height: var(--env-band-h); display: flex; align-items: center; gap: 8px;
  padding: 0 14px; color: var(--env-demo-ink);
  background: repeating-linear-gradient(135deg, var(--env-demo) 0 12px, var(--env-demo-stripe) 12px 24px);
  font-size: 12px; line-height: 1; white-space: nowrap; overflow: hidden;
  position: relative; z-index: 50;
}
.demo-band[hidden] { display: none; }
.demo-band svg {
  width: 14px; height: 14px; flex: 0 0 14px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.demo-band strong { font-weight: var(--fw-semibold); letter-spacing: .02em; }
.demo-band .env-host { opacity: .9; overflow: hidden; text-overflow: ellipsis; }
.demo-band .demo-leave {
  margin-left: auto; align-self: stretch; display: flex; align-items: center;
  padding: 0 8px; border: 0; background: none; color: inherit; font: inherit;
  font-weight: var(--fw-semibold); text-decoration: underline; cursor: pointer;
}
.demo-band .env-tag {
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .08em;
  border: 1px solid currentColor; border-radius: 4px; padding: 2px 6px;
}
[data-device="phone"] .demo-band .env-host { display: none; }
html[data-environment="devel"] { --band-devel: var(--env-band-h); }
html[data-demo] { --band-demo: var(--env-band-h); }
html[data-environment="devel"] .shell, html[data-demo] .shell {
  height: calc(100vh - var(--band-devel, 0px) - var(--band-demo, 0px));
  height: calc(100dvh - var(--band-devel, 0px) - var(--band-demo, 0px));
}
html[data-environment="devel"] .wizard-screen, html[data-demo] .wizard-screen {
  min-height: calc(100vh - var(--band-devel, 0px) - var(--band-demo, 0px));
  min-height: calc(100dvh - var(--band-devel, 0px) - var(--band-demo, 0px));
}
.env-badge {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .06em;
  padding: 2px 5px; border-radius: 4px;
  background: var(--env-devel); color: var(--env-devel-ink);
}

.modal.upsell { max-width: 540px; }
.upsell .modal-head { display: flex; align-items: center; gap: 10px; }
.upsell .up-x { margin-left: auto; }
.upsell .modal-body { padding: 18px 16px 16px; line-height: 1.6; }
.badge.b-brand { background: var(--surface-brand-soft); color: var(--text-brand); }
.up-hero { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.up-hero-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex: 0 0 auto;
  background: var(--surface-brand-soft); color: var(--text-brand);
  display: grid; place-items: center;
}
.up-hero-icon svg { width: 22px; height: 22px; }
.up-hero h2 {
  margin: 2px 0 4px; font-family: var(--font-display); font-size: var(--text-base);
  font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3;
}
.up-hero p { margin: 0; color: var(--text-body); }
.up-benefits { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.up-benefits li { display: flex; gap: 10px; align-items: flex-start; }
.up-benefits .up-check {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px;
  background: var(--success-soft); color: var(--success); display: grid; place-items: center;
}
.up-benefits .up-check svg { width: 12px; height: 12px; stroke-width: 3; }
.up-benefits b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.up-benefits span { color: var(--text-muted); }
.up-note {
  margin-top: 16px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-page); color: var(--text-muted);
  display: flex; gap: 8px; align-items: flex-start;
}
.up-note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.upsell .modal-foot { align-items: center; }
.up-quiet { color: var(--text-brand); text-decoration: none; font-weight: var(--fw-medium); }
.up-quiet:hover { text-decoration: underline; }
[data-device="phone"] .upsell .modal-head .card-title { flex: 1 1 auto; min-width: 0; }
[data-device="phone"] .upsell .modal-head > .badge,
[data-device="phone"] .upsell .modal-head > .up-x { flex: none; }
[data-device="phone"] .upsell .modal-foot { flex-wrap: wrap; row-gap: 12px; }
[data-device="phone"] .upsell .modal-foot > span[style*="flex:1"] { display: none; }
[data-device="phone"] .upsell .up-quiet { flex: 1 0 100%; text-align: center; }
[data-device="phone"] .upsell .modal-foot > .btn { flex: 1 0 100%; justify-content: center; white-space: nowrap; }

.gsync table { table-layout: fixed; }
.gsync tbody td { overflow: hidden; text-overflow: ellipsis; }
.gsync th.c-num, .gsync td.c-num { width: 72px; }
.gsync .gsync-chev { width: 28px; padding-right: 0; color: var(--text-muted); }
.gsync .gsync-chev svg { display: block; transition: transform 150ms; }
.gsync .gsync-row { cursor: pointer; }
.gsync .gsync-row[aria-expanded="true"] .gsync-chev svg { transform: rotate(90deg); }
.gsync td.is-new     { color: var(--text-brand); }
.gsync td.is-changed { color: var(--warning); }
.gsync td.is-removed { color: var(--danger); }
.gsync td.gsync-none { color: var(--text-subtle); }
.gsync .gsync-detail td { background: var(--surface-sunken); white-space: normal; }
.gsync-group + .gsync-group { margin-top: 8px; }
.gsync-group-head {
  font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 2px;
}
.gsync-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gsync-group li { display: flex; gap: 6px; line-height: 1.4; color: var(--text-body); }
.gsync-group li b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.gsync-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-top: 6px; flex: 0 0 5px; }
.gsync-why { color: var(--text-muted); }
.gsync-group.is-new     .gsync-group-head, .gsync-group.is-new     .gsync-dot { color: var(--text-brand); }
.gsync-group.is-changed .gsync-group-head, .gsync-group.is-changed .gsync-dot { color: var(--warning); }
.gsync-group.is-removed .gsync-group-head, .gsync-group.is-removed .gsync-dot { color: var(--danger); }
.gsync-done {
  display: flex; align-items: center; gap: 8px;
  color: var(--success); font-weight: var(--fw-semibold);
}
@media (prefers-reduced-motion: reduce) { .gsync .gsync-chev svg { transition: none; } }

.secret-field { flex: 1; min-width: 0; }
.secret-box { display: flex; align-items: center; gap: 8px; height: var(--control-h); padding: 0 4px 0 10px; box-sizing: border-box;
              border-radius: var(--radius-sm); border-width: 1px; border-style: solid; border-color: var(--border-subtle); }
.secret-box > svg { width: 15px; height: 15px; flex: none; }
.secret-text { flex: 1; min-width: 0; font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secret-stars { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.22em; color: var(--text-strong); }
.secret-act { flex: none; height: 24px; padding: 0 10px; border: 0; border-radius: var(--radius-xs); cursor: pointer;
              font-family: var(--font-body); font-size: var(--text-2xs); font-weight: var(--fw-semibold); }
.secret-act:hover { filter: brightness(0.94); }
.secret-box.is-set { border-color: var(--border-brand); background: var(--surface-brand-soft); }
.secret-box.is-set > svg { color: var(--text-brand); }
.secret-box.is-set .secret-act { background: var(--surface-card); color: var(--text-brand); box-shadow: var(--shadow-xs); }
.secret-box.is-empty { border-style: dashed; border-color: var(--border-default); background: var(--surface-card); }
.secret-box.is-empty > svg { color: var(--text-subtle); }
.secret-box.is-empty .secret-text { color: var(--text-subtle); font-style: italic; }
.secret-box.is-empty .secret-act { background: var(--surface-brand-soft); color: var(--text-brand); }
.secret-box.is-missing { border-color: var(--warning); background: var(--warning-soft); }
.secret-box.is-missing > svg, .secret-box.is-missing .secret-text { color: var(--warning); font-weight: var(--fw-semibold); }
.secret-box.is-missing .secret-act { background: var(--warning); color: #fff; }
.secret-box.is-new { border-color: var(--border-brand); background: var(--surface-card); box-shadow: inset 3px 0 0 var(--border-brand); }
.secret-box.is-new > svg, .secret-box.is-new .secret-text { color: var(--text-brand); font-weight: var(--fw-semibold); }
.secret-box.is-new .secret-act { background: var(--surface-brand-soft); color: var(--text-brand); }
.secret-box.is-cleared > svg { color: var(--text-subtle); }
.secret-edit { display: flex; flex-direction: column; gap: 6px; }
.secret-edit-row { display: flex; align-items: center; gap: 6px; }
.secret-veil { position: relative; display: block; width: 100%; }
.secret-veil .input { width: 100%; box-sizing: border-box; }
.secret-veil:not(.is-open) .input { color: transparent; caret-color: var(--text-strong); }
.secret-veil:not(.is-open) .input::selection { color: transparent; }
.secret-dots { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; white-space: pre; pointer-events: none; color: var(--text-strong); }
.secret-veil.is-open .secret-dots { display: none; }

.secret-input { position: relative; flex: 1; min-width: 0; }
.secret-input .input { width: 100%; padding-left: 30px; box-sizing: border-box; }
.secret-input > svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-brand); pointer-events: none; }
.icon-btn.is-apply { background: var(--action-bg); color: var(--action-fg); }
.icon-btn.is-apply:hover { background: var(--action-bg-hover); color: var(--action-fg); }
.secret-edit-foot { display: flex; justify-content: space-between; gap: 10px; font-size: var(--text-2xs); color: var(--text-muted); }
.secret-edit-foot .is-bad { color: var(--danger); }
.secret-clear { border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: var(--text-2xs);
                font-weight: var(--fw-medium); color: var(--danger); }
.secret-clear.is-quiet { color: var(--text-link); }
.secret-clear:hover { text-decoration: underline; }
[data-device] .secret-box { height: var(--touch-h-sm); }
[data-device] .secret-input .input { height: var(--touch-h-sm); padding-left: 36px; }
[data-device] .secret-input > svg { left: 12px; width: 18px; height: 18px; }
[data-device] .secret-act { height: 34px; padding: 0 14px; font-size: var(--text-xs); }
[data-device] .secret-clear, [data-device] .secret-edit-foot { font-size: var(--text-xs); }
[data-device] .secret-clear { padding: 8px 0; }

.secret-import { max-height: 100%; }
.secret-import-gap { height: 16px; }
.secret-import-row { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 260px); }
.secret-import-row .act { justify-content: flex-end; }
.secret-import-row .wizard-tile.is-open { background: var(--surface-brand-soft); color: var(--text-brand); }
.secret-import-input { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.secret-import-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .secret-import-row { grid-template-columns: 34px minmax(0, 1fr); }
  .secret-import-row .act { grid-column: 1 / -1; }
}

.setting-section { padding: 8px 14px; background: var(--table-header-bg); color: var(--table-header-fg);
                   font-size: var(--text-2xs); font-weight: var(--fw-semibold); text-transform: uppercase;
                   letter-spacing: 0.08em; border-bottom: 1px solid var(--border-subtle); }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: center;
           padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); }
.setting:last-child { border-bottom: 0; }
.setting.is-pending { background: var(--surface-brand-soft); }
.setting-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--text-xs);
                font-weight: var(--fw-medium); color: var(--text-strong); }
.setting-hint { margin-top: 2px; font-size: var(--text-2xs); color: var(--text-muted); line-height: 1.5; }
.setting-hint.is-warn { color: var(--warning); }
.setting-control { display: flex; align-items: center; gap: 6px; }
.setting-control .input { flex: 1; min-width: 0; }
.setting-control .bs-trigger { flex: 1; min-width: 0; }
.setting-unit { font-size: var(--text-xs); color: var(--text-muted); }
.setting-fixed { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-strong); }
#p-settings .setting-control, [data-settings-page] .setting-control { justify-content: flex-end; }
.setting-value { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-services { padding: 0 14px 14px; }
.card.log-file-card { overflow: visible; position: relative; }
.log-file-card .log-file-rows { position: relative; }
.log-file-card .log-menu { top: auto; right: 14px; }
.log-file-rows.rows-off .setting:not(.keep) { opacity: .45; }
.log-file-rows .path { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-body); word-break: break-all; }
.log-file-rows .lf-editing .setting-control .input { min-width: 0; }
.scope-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.scope-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
              border: 1px solid var(--border-subtle); background: var(--surface-sunken); font-size: var(--text-2xs);
              color: var(--text-body); font-family: var(--font-mono); }
.scope-chip.is-off { text-decoration: line-through; color: var(--text-muted); }
.log-checks-sub { grid-column: 1 / -1; margin-top: 6px; font-size: var(--text-2xs); font-weight: 600;
                  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.settings-services:empty { display: none; }
.settings-services > .setting-hint { padding: 10px 0 8px; margin: 0; }
.settings-services .svc-table { margin-top: 0; }
#set-update > .setting { border-bottom: 0; }
#update-testing > .setting { border-top: 1px solid var(--border-subtle); border-bottom: 0; }
[data-device="phone"] .setting { grid-template-columns: minmax(0, 1fr); gap: 8px; }

.pending-banner { background: var(--surface-brand-soft); }
.pending-banner > svg { color: var(--text-brand); }
.pending-banner .btn svg { color: inherit; }
.main > .pending-banner {
  flex: none; margin: 0; border-radius: 0; border-width: 1px 0 0; padding: 12px 20px;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.06);
  animation: pending-in 0.24s ease-out;
}
@keyframes pending-in {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .main > .pending-banner { animation: none; } }
[data-device="phone"] .pending-banner { flex-wrap: wrap; }
[data-device="phone"] .pending-banner .b-text { flex: 1 1 calc(100% - 40px); min-width: 0; }
[data-device="phone"] .pending-banner .btn { flex: 1 1 0; justify-content: center; }
.change-list { margin: 8px 0 0; padding-left: 18px; }
.change-list li { margin: 2px 0; }

.portrait-row { display: flex; gap: 12px; align-items: stretch; }
.portrait-row > .card:last-child { flex: 1; min-width: 0; }
.portrait-card { flex: none; position: relative; }
.portrait-card img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; display: block; }
[data-device="phone"] .portrait-row { flex-direction: column; }
[data-device="phone"] .portrait-card { width: auto; height: 240px; }

.clock-result { margin: 0 14px 12px; }
.clock-result[hidden] { display: none; }


.log-card { min-height: 360px; }
.log-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.log-tools .log-search { max-width: 200px; }
.btn.btn-square { width: var(--control-h); padding: 0; justify-content: center; }
.log-head { position: relative; }
.log-menu { position: absolute; top: calc(100% - 6px); right: 16px; z-index: 30; width: 360px; max-width: calc(100vw - 32px);
            max-height: min(70vh, 640px); overflow: auto; box-sizing: border-box; padding: 4px 0;
            background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.log-menu[hidden] { display: none; }
.log-menu-section { padding: 10px 14px; }
.log-menu-section + .log-menu-section { border-top: 1px solid var(--border-subtle); }
.log-menu-label { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px;
                  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); font-weight: var(--fw-semibold); }
.log-menu-link { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; text-transform: none; letter-spacing: 0;
                 font-weight: var(--fw-medium); color: var(--text-link); }
.log-menu-link:hover { text-decoration: underline; }
.log-menu-seg { display: flex; width: 100%; }
.log-menu-seg button { flex: 1; }
.log-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
.log-check { display: flex; align-items: center; gap: 7px; min-width: 0; font-family: var(--font-mono); font-size: var(--text-xs);
             color: var(--text-body); cursor: pointer; }
.log-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-check input { accent-color: var(--action-bg); margin: 0; flex: none; }
.log-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px;
              font-size: var(--text-sm); color: var(--text-body); }
.log-menu-actions { border-top: 1px solid var(--border-default); padding-top: 4px; }
.log-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; border: 0; background: none;
                 font: inherit; font-size: var(--text-sm); color: var(--text-body); cursor: pointer; text-align: left; }
.log-menu-item:hover { background: var(--surface-sunken); }
.log-menu-item svg { width: 16px; height: 16px; color: var(--text-muted); }
.log-box { position: relative; flex: 1; min-height: 200px; display: flex; flex-direction: column; }
.log-copy { position: absolute; top: 8px; right: 18px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
            border: 1px solid var(--console-border); border-radius: var(--radius-sm); background: var(--console-bg);
            color: var(--console-time); cursor: pointer; opacity: 0.85; }
.log-copy:hover { color: var(--console-text); opacity: 1; }
.log-copy.is-done { color: var(--console-down); }
.log-copy svg { width: 16px; height: 16px; }
[data-device] .log-menu { right: 0; width: 100%; max-width: none; }
[data-device] .log-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.message-log { flex: 1; min-height: 200px; height: auto; overflow: auto; padding: 10px 14px; background: var(--console-bg);
               border-top: 1px solid var(--console-border);
               font-family: var(--font-mono); font-size: var(--text-2xs); line-height: 1.7; color: var(--console-text); }
.message-row { display: grid; grid-template-columns: var(--message-time-width, 8ch) 5ch 8ch minmax(0, 1fr); column-gap: 2ch;
               white-space: pre-wrap; overflow-wrap: anywhere; color: var(--console-text); }
.message-log.with-millis { --message-time-width: 12ch; }
.log-window-hidden { display: none !important; }
body.log-window { background: var(--surface-page); }
.log-window-root { position: fixed; inset: 0; padding: 12px; box-sizing: border-box; overflow: hidden; }
.log-window-root .log-card { flex: 1 1 auto; min-height: 0; }
.message-log.no-wrap .message-row { grid-template-columns: var(--message-time-width, 8ch) 5ch 8ch max-content;
                                    width: max-content; min-width: 100%; white-space: pre; overflow-wrap: normal; }
.message-time { color: var(--console-time); }
.message-level, .message-source { font-weight: var(--fw-medium); white-space: nowrap; }
.message-row.is-error  { color: var(--console-error); }
.message-row.is-warn   { color: var(--console-warn); }
.message-row.is-debug  { color: var(--console-debug); }
.message-row.is-event  { color: var(--console-event); }
.message-row.is-down   { color: var(--console-down); }
.message-row.is-up     { color: var(--console-up); }
.message-row.is-switch { color: var(--console-switch); }
.message-empty { font-family: var(--font-body); color: var(--console-time); }
.log-foot { display: flex; align-items: center; gap: 12px; padding: 6px 14px; font-size: var(--text-2xs); color: var(--text-muted);
            border-top: 1px solid var(--border-subtle); }
.log-foot .log-foot-btn { height: 24px; }
.log-paused { display: inline-flex; align-items: center; gap: 4px; color: var(--warning); font-weight: var(--fw-semibold); }
.log-paused svg { width: 12px; height: 12px; }
.log-options-modal { max-width: 520px; }
.log-options-modal .modal-head > svg { width: 16px; height: 16px; color: var(--text-brand); }
.log-file { display: grid; grid-template-columns: 20px minmax(0, 1fr) 80px 90px; gap: 10px; align-items: center; padding: 8px 2px;
            border-bottom: 1px solid var(--border-subtle); font-size: var(--text-xs); cursor: pointer; }
.log-file:last-child { border-bottom: 0; }