:root {
  --lp-bg-top: #fff7f0;
  --lp-bg-mid: #e8f4ff;
  --lp-bg-bottom: #fff0f8;
  --lp-text: #1a2332;
  --lp-muted: #5a6578;
  --lp-accent: #2563eb;
  --lp-accent-soft: rgba(37, 99, 235, 0.12);
  --lp-card: #ffffff;
  --lp-border: rgba(26, 35, 50, 0.1);
  --lp-shadow: 0 18px 50px rgba(25, 45, 90, 0.12);
  --lp-screen-bg: #0f1628;
  --lp-screen-text: #e9edf5;
}

* {
  box-sizing: border-box;
}

/* TV / eldre WebKit: [hidden] må faktisk fjerne elementet fra treffflate (ikke bare «usynlig»). */
[hidden] {
  display: none !important;
}

/* Pekeskjerm / fjernkontroll: mindre forsinkelse, bedre trykkregistrering. */
button,
a,
input,
select,
textarea,
summary,
[role="button"] {
  touch-action: manipulation;
}

body.landing {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--lp-text);
  background: linear-gradient(165deg, var(--lp-bg-top) 0%, var(--lp-bg-mid) 45%, var(--lp-bg-bottom) 100%);
  background-attachment: fixed;
}

body.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 12% 18%, rgba(255, 200, 120, 0.35) 0%, transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(120, 200, 255, 0.4) 0%, transparent 38%),
    radial-gradient(circle at 70% 85%, rgba(255, 150, 200, 0.28) 0%, transparent 45%);
  z-index: 0;
}

/* Samsung TV / Tizen / pekefjernkontroll: fixed bakgrunn + compositing kan gi feil hit-testing. */
@media (hover: none) {
  body.landing {
    background-attachment: scroll !important;
  }

  /* Overscan / kantfelt: gi luft så ikke knapper i header havner i «død sone». */
  .landing-shell {
    padding-left: max(20px, 3.5vw, env(safe-area-inset-left, 0px));
    padding-right: max(20px, 3.5vw, env(safe-area-inset-right, 0px));
  }

  .page-editor .landing-shell--show > .landing-header .landing-header-actions,
  .page-show .landing-shell--show > .landing-header .landing-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
    column-gap: 10px;
    max-width: 100%;
  }
}

.landing-shell {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 56px;
}

.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 8px;
  gap: 16px;
}

.brand {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, #2563eb, #7c3aed, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a.brand,
a.brand:hover,
a.brand:visited,
a.brand:focus,
a.brand:focus-visible,
a.brand:active {
  text-decoration: none;
}

.landing-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.landing-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--lp-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.landing-nav-toggle:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
}

.landing-nav-toggle-icon {
  display: block;
  pointer-events: none;
}

.lang-switcher {
  position: relative;
}

.lang-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--lp-border);
  background: rgba(255, 255, 255, 0.75);
  color: var(--lp-text);
  font-size: 0.95rem;
  cursor: pointer;
  line-height: 1;
}

.lang-menu-btn:hover {
  border-color: rgba(37, 99, 235, 0.4);
  background: #fff;
}

.lang-menu-flag {
  font-size: 1.25rem;
  line-height: 1;
}

.lang-menu-caret {
  font-size: 0.65rem;
  opacity: 0.7;
}

.lang-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--lp-border);
  background: #fff;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18);
  z-index: 200;
}

.lang-menu-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--lp-text);
}

.lang-menu-list li:hover,
.lang-menu-list li:focus {
  background: rgba(37, 99, 235, 0.08);
  outline: none;
}

.lang-menu-list .lang-flag {
  font-size: 1.1rem;
  line-height: 1;
}

.btn-ghost {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--lp-border);
  background: rgba(255, 255, 255, 0.65);
  color: var(--lp-text);
  font-size: 0.95rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  border-color: rgba(37, 99, 235, 0.35);
  background: #fff;
}

a.btn-ghost {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.btn-primary {
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28);
}

.btn-primary:hover {
  filter: brightness(1.05);
}

/* Preview stripe */
.preview-section {
  margin-top: 8px;
}

/* Editor: ikke vis hovedinnhold før Firebase har bekreftet innlogget bruker (auth-editor.js). */
html.scrollable-editor-auth-gate body.page-editor .landing-shell {
  visibility: hidden;
}

html.scrollable-editor-auth-gate body.page-editor {
  cursor: wait;
}

.page-editor .preview-section {
  margin-top: 0;
  padding-top: 1cm;
}

.preview-section-inner {
  background: var(--lp-card);
  border-radius: 20px;
  border: 1px solid var(--lp-border);
  box-shadow: var(--lp-shadow);
  overflow: hidden;
}

.preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--lp-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.9));
}

.preview-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lp-muted);
}

.preview-toolbar-field select {
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: #fff;
  color: var(--lp-text);
  font-size: 1rem;
}

.preview-toolbar-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-toolbar-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: #fff;
  color: var(--lp-text);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-toolbar-nav:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.06);
}

.btn-toolbar-nav:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
}

.preview-badge {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lp-accent);
  font-size: 1rem;
  min-width: 3.5ch;
  text-align: center;
}

.preview-toolbar-spacer {
  flex: 1 1 12px;
  min-width: 0;
}

.preview-toolbar-add {
  position: relative;
}

.preview-add-widget-types {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 260px;
  max-height: min(72vh, 560px);
  overflow-y: auto;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: #fff;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.35);
  z-index: 10;
  container-type: inline-size;
  container-name: add-widget;
}

.preview-add-widget-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.preview-add-widget-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  padding: 6px 6px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(248, 250, 252, 0.98);
  border-radius: 10px 10px 0 0;
}

.preview-add-widget-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 6px 10px;
  border: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  cursor: pointer;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-add-widget-tab:hover {
  color: #0f172a;
  background: rgba(37, 99, 235, 0.06);
}

.preview-add-widget-tab--active {
  color: #1d4ed8;
  background: #fff;
  position: relative;
  z-index: 1;
  box-shadow: 0 1px 0 #fff;
}

.preview-add-widget-panels {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 0 6px;
  background: #fff;
  border-radius: 0 0 10px 10px;
}

.preview-add-widget-panel[hidden] {
  display: none !important;
}

.preview-add-widget-panel:not([hidden]) {
  display: block;
}

.preview-add-widget-types .preview-add-widget {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.85rem;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}

.preview-add-widget-types .preview-add-widget:hover {
  background: rgba(37, 99, 235, 0.06);
}

.notes-inline-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
}

.notes-inline-font-select,
.notes-inline-size-select,
.notes-inline-color-input {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  background: rgba(15, 23, 42, 0.8);
  color: #e5e7eb;
  font-size: 0.75rem;
  padding: 4px 10px;
  outline: none;
}

.notes-inline-font-select,
.notes-inline-size-select {
  appearance: none;
}

.notes-inline-color-input {
  padding: 2px;
  width: 32px;
  height: 24px;
  cursor: pointer;
}

.notes-inline-font-select:focus,
.notes-inline-size-select:focus,
.notes-inline-color-input:focus {
  border-color: rgba(59, 130, 246, 0.9);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.6);
}

/* Oppgave-widget – moderne tabell og ukevisning */

.preview-widget--taskWidget {
  backdrop-filter: blur(10px);
}

/* Mitt team + egne nyheter */

.scrollable-widget-scroll {
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.preview-widget--teamWidget,
.preview-widget--customNewsWidget,
.preview-widget--restaurantMenuWidget {
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}

.team-widget-body,
.custom-news-widget-body,
.restaurant-menu-widget-body {
  flex: 1;
  min-height: 0;
  padding: 4px 2px 0;
}

/* Restaurant / meny-widget */

.menu-widget-root {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
}

.menu-widget-root--empty {
  justify-content: center;
  align-items: center;
}

.menu-widget-empty {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
  text-align: center;
  padding: 12px;
}

.menu-widget-section {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-widget-cat-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0f172a;
  border-bottom: 1px solid rgba(148, 163, 184, 0.45);
  padding-bottom: 4px;
}

.menu-widget-grid {
  --mw-cols: 3;
  --mw-rows: 3;
  display: grid;
  grid-template-columns: repeat(var(--mw-cols), minmax(0, 1fr));
  gap: 8px;
  max-height: min(72vh, calc(var(--mw-rows) * 5.6rem + (var(--mw-rows) - 1) * 8px));
  overflow: auto;
  padding: 2px 0 6px;
}

.menu-widget-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.menu-widget-new-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  line-height: 1;
}

.menu-widget-pct-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(22, 163, 74, 0.95);
  color: #fff;
  line-height: 1;
}

.menu-widget-card-visual {
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
  background: rgba(241, 245, 249, 0.9);
}

.menu-widget-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.menu-widget-card-img--empty {
  width: 100%;
  height: 100%;
  min-height: 72px;
  background: linear-gradient(145deg, rgba(226, 232, 240, 0.9), rgba(241, 245, 249, 0.95));
}

.menu-widget-card-text {
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

.menu-widget-card-name {
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.25;
  color: #0f172a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.menu-widget-card-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.menu-widget-price {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
}

.menu-widget-price--sale {
  color: #15803d;
  font-size: 0.85rem;
}

.menu-widget-price--was {
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: line-through;
}

.menu-settings-layout-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.menu-settings-layout-row .setting-row {
  flex: 1 1 140px;
}

.menu-settings-cat-rows,
.menu-settings-item-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.menu-settings-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-settings-cat-row .menu-cat-name-input {
  flex: 1;
  min-width: 0;
}

.menu-settings-item-row {
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(248, 250, 252, 0.65);
}

.menu-item-price-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.menu-item-price-grid .team-settings-field {
  flex: 1 1 120px;
}

.menu-item-discount-row {
  min-height: 1.1rem;
}

.menu-item-discount-hint {
  font-size: 0.78rem;
  font-weight: 700;
  color: #15803d;
}

.menu-item-settings-photo-preview {
  min-height: 48px;
  display: flex;
  align-items: center;
}

.menu-item-settings-photo-preview-img {
  max-width: 100%;
  max-height: 96px;
  border-radius: 8px;
  object-fit: cover;
}

.menu-add-cat-btn {
  margin-bottom: 12px;
}

.team-widget-empty,
.custom-news-widget-empty {
  margin: 0;
  font-size: 0.85rem;
  color: #475569;
}

.team-widget-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-widget-cards--flat {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-start;
}

.team-card-sort-bar {
  flex-shrink: 0;
  width: 100%;
  padding: 0 2px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.team-card-sort-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
}

.team-card-sort-select {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.9);
  max-width: min(100%, 200px);
}

.team-widget-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-start;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.35);
  flex: 1 1 120px;
  min-width: 100px;
  max-width: 168px;
  box-sizing: border-box;
}

.team-m-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(148, 163, 184, 0.25);
}

.team-m-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-m-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 700;
  color: #475569;
}

.team-card-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #0f172a;
}

.team-card-role {
  font-size: 0.75rem;
  color: #475569;
}

.team-card-team-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  margin-top: 3px;
  line-height: 1.25;
}

.team-settings-quick-add {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px dashed rgba(148, 163, 184, 0.45);
}

.team-settings-quick-add-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

.team-quick-add-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-quick-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.team-quick-add-row--reports {
  align-items: stretch;
}

.team-quick-add-field--full {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}

.team-quick-add-row--photo-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px 12px;
  align-items: end;
}

.team-quick-add-photo-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

@media (max-width: 520px) {
  .team-quick-add-row--photo-actions {
    grid-template-columns: 1fr;
  }

  .team-quick-add-row--photo-actions .team-quick-add-btn {
    justify-self: stretch;
  }
}

.team-quick-add-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #334155;
  flex: 1 1 160px;
  min-width: 0;
}

.team-quick-add-field .team-quick-add-parent {
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  font-size: 0.85rem;
}

.team-quick-add-photo-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.team-quick-add-photo-preview {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-quick-add-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-quick-add-name,
.team-quick-add-role {
  flex: 1 1 140px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  font-size: 0.88rem;
}

.team-quick-add-btn {
  flex: 0 0 auto;
  align-self: flex-end;
}

.team-widget-tree {
  font-size: 0.82rem;
}

.team-tree-root-single {
  width: 100%;
}

.team-tree-siblings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(100, 116, 139, 0.42);
}

/** Direkterapporter under samme leder (vertikalt), ikke side-by-side som gir «trappe» ved wrapping */
.team-tree-siblings-row--stack {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}

.team-tree-siblings-row--stack .team-tree-sibling-col {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-left: 0;
  border-left: none;
}

.team-tree-subteam-label {
  margin: 10px 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.team-tree-siblings-row--root {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.team-tree-sibling-col {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 280px;
  padding-left: 12px;
  border-left: 1px solid rgba(148, 163, 184, 0.5);
}

.team-tree-sibling-col:first-child {
  padding-left: 0;
  border-left: none;
}

.team-tree-branch {
  width: 100%;
}

.team-tree-node-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.team-tree-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.team-tree-name {
  font-weight: 700;
  color: #0f172a;
}

.team-tree-role {
  font-size: 0.78rem;
  color: #475569;
}

.custom-news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.custom-news-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.35);
  align-items: flex-start;
}

.custom-news-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.2);
}

.custom-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-news-body {
  flex: 1;
  min-width: 0;
}

.custom-news-meta {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}

.custom-news-headline {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.custom-news-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #334155;
  white-space: pre-wrap;
}

.team-settings-rows,
.custom-news-settings-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 320px;
  overflow: auto;
  margin-bottom: 10px;
}

.team-settings-rows--compact {
  gap: 3px;
  max-height: 280px;
}

.team-settings-list-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  margin: 8px 0 2px;
}

.team-settings-member-row,
.custom-news-settings-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid var(--lp-border);
}

.team-settings-member-row--compact {
  padding: 3px 6px;
  gap: 0;
}

.team-member-compact-cells {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

.team-member-compact-thumb {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: rgba(148, 163, 184, 0.2);
}

.team-member-compact-thumb .team-settings-photo-file {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  font-size: 0;
}

.team-settings-photo-preview--compact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}

.team-settings-photo-preview--compact .team-settings-photo-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-settings-photo-placeholder--compact {
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
}

.team-settings-member-row--compact .team-settings-name,
.team-settings-member-row--compact .team-settings-role,
.team-settings-member-row--compact .team-settings-subteam-name {
  flex: 1 1 0;
  min-width: 0;
  padding: 3px 6px;
  font-size: 0.76rem;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-sizing: border-box;
}

.team-settings-remove-member--compact {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  line-height: 1;
  font-size: 1.15rem;
  border-radius: 6px;
}

.team-settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  width: 100%;
}

.team-settings-field input,
.team-settings-field select,
.team-settings-field textarea {
  width: 100%;
  box-sizing: border-box;
}

.team-settings-photo-preview,
.custom-news-settings-photo-preview {
  min-height: 48px;
}

.team-settings-photo-preview-img,
.custom-news-settings-photo-preview-img {
  max-width: 140px;
  max-height: 90px;
  border-radius: 8px;
  object-fit: cover;
}

.team-settings-photo-placeholder {
  font-size: 0.78rem;
  color: var(--lp-muted);
}

.team-settings-add-member,
.custom-news-add-item {
  width: 100%;
  margin-top: 4px;
}

.widget-settings-aux-block {
  margin-top: 0;
}

.widget-settings-aux-output {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 3em;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid var(--lp-border);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--lp-text);
}

.task-people-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.task-people-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #e5e7eb;
}

.task-people-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-person-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #0f172a;
  background: #e5e7eb;
}

.task-person-chip .task-inline-chip-remove {
  flex-shrink: 0;
}

.task-person-chip--0 {
  background: #bfdbfe;
}
.task-person-chip--1 {
  background: #bbf7d0;
}
.task-person-chip--2 {
  background: #fed7aa;
}
.task-person-chip--3 {
  background: #f9a8d4;
}
.task-person-chip--4 {
  background: #fee2e2;
}
.task-person-chip--5 {
  background: #e5e7eb;
}

.task-people-input-row {
  width: 100%;
}

.task-people-input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  font-size: 0.8rem;
  outline: none;
}

.task-people-input:focus {
  border-color: rgba(59, 130, 246, 0.9);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.7);
}

.task-settings-rows-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.task-settings-rows-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lp-muted);
}

.task-settings-rows-label--list {
  margin-top: 4px;
}

.task-settings-add-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: rgba(255, 255, 255, 0.04);
}

.task-settings-add-form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.task-settings-add-submit {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  background: var(--lp-accent-soft);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--lp-text);
}

.task-settings-add-submit:hover {
  border-color: rgba(37, 99, 235, 0.45);
}

.task-settings-rows {
  max-height: min(40vh, 320px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px;
}

.task-settings-compact-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
}

.task-settings-compact-summary {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  color: var(--lp-text);
  word-break: break-word;
}

.task-settings-compact-actions {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  align-items: center;
}

.task-settings-compact-btn {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--lp-border);
  background: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--lp-text);
}

.task-settings-compact-btn:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background: var(--lp-accent-soft);
}

.task-remove-btn--compact {
  padding: 4px 8px;
  font-size: 0.75rem;
}

.task-settings-list-empty {
  margin: 0;
  padding: 10px 8px;
  font-size: 0.82rem;
  color: var(--lp-muted);
}

.task-settings-expanded-block {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.06);
}

.task-settings-expanded-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.task-settings-expanded-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--lp-text);
}

.task-settings-done-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--lp-border);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--lp-text);
}

.task-settings-done-btn:hover {
  background: var(--lp-accent-soft);
  border-color: rgba(37, 99, 235, 0.35);
}

.task-widget-body {
  width: 100%;
  height: calc(100% - 40px);
  padding: 8px 10px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-widget-body--table {
  overflow: auto;
  min-height: 0;
}

.task-widget-body--table .task-widget-inline-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 8px;
}

/* Inline redigering i forhåndsvisning: samme lyse tone som widget, tydelige linjer */
.preview-widget--taskWidget .task-widget-inline-root {
  color: #0f172a;
  font-size: 0.78rem;
}

.task-inline-panel {
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.72);
  padding: 8px 10px 10px;
  box-sizing: border-box;
}

.task-inline-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 6px;
}

.task-inline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.task-inline-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #0f172a;
  background: #e2e8f0;
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.task-inline-chip--0 {
  background: #dbeafe;
}
.task-inline-chip--1 {
  background: #d1fae5;
}
.task-inline-chip--2 {
  background: #ffedd5;
}
.task-inline-chip--3 {
  background: #fce7f3;
}
.task-inline-chip--4 {
  background: #fee2e2;
}
.task-inline-chip--5 {
  background: #e2e8f0;
}

.task-inline-chip-remove {
  border: 0;
  border-radius: 999px;
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  color: #64748b;
}

.task-inline-chip-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #b91c1c;
}

.task-inline-person-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-size: 0.78rem;
  outline: none;
}

.task-inline-person-input:focus {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.task-inline-panel--tasks {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.task-inline-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  max-height: min(320px, 52vh);
  overflow-y: auto;
}

.task-inline-rows .task-inline-preview-compact {
  margin: 0;
}

.task-inline-rows .task-inline-preview-expanded {
  flex-shrink: 0;
}

.task-preview-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.5);
}

.task-preview-row-main {
  display: grid;
  grid-template-columns: minmax(52px, 0.55fr) minmax(0, 1fr) minmax(92px, auto) minmax(52px, auto) minmax(52px, auto) 28px;
  gap: 6px 6px;
  align-items: end;
}

.task-preview-recurring-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #475569;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.task-preview-recurring-wrap input {
  width: auto;
  margin: 0;
}

.task-preview-recurring-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  padding-left: 22px;
}

.task-preview-field--recur-until {
  min-width: 140px;
  max-width: 180px;
}

.task-preview-row:last-child {
  border-bottom: 0;
}

.task-preview-row:hover {
  background: rgba(37, 99, 235, 0.06);
}

.task-preview-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.task-preview-field--grow {
  grid-column: span 1;
}

.task-preview-field-hint {
  font-size: 0.62rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.task-preview-field select,
.task-preview-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-size: 0.75rem;
}

.task-preview-field input[type="date"] {
  font-variant-numeric: tabular-nums;
}

.task-preview-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.9);
  color: #64748b;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  align-self: center;
}

.task-preview-remove:hover {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(254, 226, 226, 0.9);
  color: #b91c1c;
}

.task-inline-add-btn {
  margin-top: 8px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px dashed rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.task-inline-add-btn:hover {
  background: rgba(37, 99, 235, 0.12);
  border-style: solid;
}

.task-inline-add-panel {
  margin-top: 8px;
  padding: 10px 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  background: rgba(255, 255, 255, 0.92);
}

.task-inline-add-panel .task-preview-row--draft {
  margin-bottom: 0;
}

.task-inline-add-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.task-inline-add-submit-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.task-inline-add-submit-btn:hover {
  background: rgba(37, 99, 235, 0.2);
}

.task-widget-body--weekTable,
.task-widget-body--weekTime {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.task-display-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.55);
}

.task-display-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  color: #0f172a;
}

.task-display-table thead {
  position: sticky;
  top: 0;
  background: rgba(248, 250, 252, 0.98);
  z-index: 1;
}

.task-display-table th,
.task-display-table td {
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.task-display-empty {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.78rem;
  color: #64748b;
}

.task-display-col-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Ukesvisning dag+tids: innhold fyller widget-boksen; størrelse styres av plassering/resize */
.preview-canvas .preview-widget--taskWidget.preview-widget--taskWeekTimeFill {
  max-height: none;
  overflow: hidden;
}

.task-weektime-fit {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.task-weektime-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.62rem;
  color: #0f172a;
}

.task-weektime-v2-head {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(241, 245, 249, 0.95);
}

.task-weektime-v2-corner {
  width: 40px;
  min-width: 40px;
  flex-shrink: 0;
  border-right: 1px solid rgba(15, 23, 42, 0.1);
}

.task-weektime-v2-head-days {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
}

.task-weektime-v2--weekdays .task-weektime-v2-head-days,
.task-weektime-v2--weekdays .task-weektime-v2-days {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.task-weektime-head-cell {
  padding: 5px 4px;
  font-weight: 700;
  text-align: center;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  color: #334155;
  line-height: 1.2;
}

.task-weektime-v2-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.task-weektime-v2-rail {
  width: 40px;
  min-width: 40px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.9);
}

.task-weektime-v2-rail-hours {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.task-weektime-hlabel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  font-size: 0.55rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.task-weektime-hlabel:first-child {
  border-top: 0;
}

.task-weektime-v2-days {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
}

.task-weektime-day-col {
  min-width: 0;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
}

.task-weektime-day-col:first-child {
  border-left: 0;
}

.task-weektime-hour-stack {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.task-weektime-hour-line {
  flex: 1 1 0;
  min-height: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  pointer-events: none;
}

.task-weektime-hour-line:first-child {
  border-top: 0;
}

.task-weektime-blocks-layer {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.task-weektime-block {
  position: absolute;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 2px 3px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* Hele dagen: full bredde i kolonnen */
.task-weektime-block--allday {
  left: 0;
  right: 0;
  width: auto;
  z-index: 1;
}

/* Tidsoppgaver: left/width inline; side ved side ved overlapp */
.task-weektime-block--timed {
  right: auto;
  z-index: 3;
}

.task-weektime-block--split {
  padding: 2px 2px;
}

.task-weektime-block-text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  font-size: 0.58rem;
  line-height: 1.2;
  word-break: break-word;
}

.task-person-tone--0 {
  background: #bfdbfe;
  border: 1px solid #60a5fa;
  color: #0f172a;
}

.task-person-tone--1 {
  background: #bbf7d0;
  border: 1px solid #4ade80;
  color: #0f172a;
}

.task-person-tone--2 {
  background: #fed7aa;
  border: 1px solid #fb923c;
  color: #0f172a;
}

.task-person-tone--3 {
  background: #f9a8d4;
  border: 1px solid #e879a9;
  color: #0f172a;
}

.task-person-tone--4 {
  background: #fee2e2;
  border: 1px solid #f87171;
  color: #0f172a;
}

.task-person-tone--5 {
  background: #e5e7eb;
  border: 1px solid #94a3b8;
  color: #0f172a;
}

.task-weektime-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px 4px 8px;
  margin: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  font-size: 0.68rem;
  color: #334155;
}

.task-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.task-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.task-legend-name {
  font-weight: 600;
}

.task-widget-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
  font-size: 0.78rem;
}

.task-widget-table thead {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.9), rgba(56, 189, 248, 0.9));
}

.task-widget-table th,
.task-widget-table td {
  padding: 8px 10px;
  text-align: left;
}

.task-widget-table th {
  font-weight: 600;
  color: #e5e7eb;
  white-space: nowrap;
}

.task-widget-table tbody tr:nth-child(odd) {
  background: rgba(15, 23, 42, 0.9);
}

.task-widget-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.96);
}

.task-widget-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.25);
}

.task-widget-table td {
  color: #e5e7eb;
}

.task-col-date {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.task-widget-empty {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.9);
  color: #9ca3af;
  font-size: 0.8rem;
}

.task-widget-body--week {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.task-week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.8rem;
}

.task-week-nav-btn {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.task-week-nav-btn:hover {
  border-color: rgba(59, 130, 246, 0.9);
  background: rgba(37, 99, 235, 0.25);
}

.task-week-range {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.6);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #f8fafc;
}

.task-week-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.55);
}

.task-week-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.72rem;
}

.task-week-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(248, 250, 252, 0.98);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
}

.task-week-table th,
.task-week-table td {
  padding: 6px 8px;
}

.task-week-corner {
  width: 80px;
  background: rgba(241, 245, 249, 0.95);
  border-right: 1px solid rgba(15, 23, 42, 0.1);
}

.task-week-person {
  text-align: left;
  font-weight: 600;
  color: #334155;
  background: rgba(248, 250, 252, 0.98);
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 2px 0 8px rgba(15, 23, 42, 0.04);
}

.task-week-th {
  text-align: center;
  font-weight: 700;
  color: #334155;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.task-week-td {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  vertical-align: top;
  min-width: 80px;
  background: rgba(255, 255, 255, 0.45);
}

.task-week-cell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-week-cell-list .task-week-cell-item {
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-week-cell-empty {
  display: inline-block;
  padding: 2px 4px;
  color: #94a3b8;
  font-size: 0.7rem;
}

.task-weekend-overflow {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed rgba(15, 23, 42, 0.2);
  background: rgba(248, 250, 252, 0.92);
  font-size: 0.68rem;
  color: #334155;
}

.task-weekend-overflow-label {
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
}

.task-weekend-overflow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-weekend-overflow-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  line-height: 1.35;
}

.task-weekend-overflow-day {
  font-weight: 700;
  color: #0f172a;
  min-width: 5.5rem;
}

.task-weekend-overflow-who {
  font-weight: 600;
  color: #475569;
}

.task-weekend-overflow-title {
  flex: 1 1 auto;
  min-width: 0;
}

.task-week-nodate {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(241, 245, 249, 0.95);
  border: 1px dashed rgba(148, 163, 184, 0.75);
  font-size: 0.74rem;
}

.task-week-nodate-label {
  display: inline-block;
  margin-bottom: 2px;
  font-weight: 600;
  color: #334155;
}

.task-week-nodate ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #475569;
}

.preview-toolbar-spacer {
  flex: 1 1 12px;
  min-width: 0;
}

.btn-refresh {
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--lp-border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--lp-text);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

.btn-refresh:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.4);
  background: #fff;
}

.btn-refresh:disabled {
  opacity: 0.65;
  cursor: wait;
}

.btn-fullscreen {
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.35);
  background: var(--lp-accent-soft);
  color: #1d4ed8;
  font-weight: 600;
  cursor: pointer;
}

.btn-fullscreen:hover {
  background: rgba(37, 99, 235, 0.2);
}

/* Preview: samme størrelsesforhold som valgt «Skjermformat» (klasser settes på #previewFrame i JS). */
.preview-frame {
  position: relative;
  margin-inline: auto;
  height: auto;
  max-height: 75vh;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(59, 130, 246, 0.18), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(168, 85, 247, 0.14), transparent 50%),
    linear-gradient(180deg, #0b1224 0%, #070b14 100%);
  color: var(--lp-screen-text);
}

/* Pakker viewport (og brukes til å sentrere i fullskjerm med footer under). */
.preview-fullscreen-stack {
  position: absolute;
  inset: 0;
}

.preview-frame-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  /* Brukes av canvas-inset (ikke padding på .preview-slides — padding gir ikke innrykk for absolute-barn). */
  --preview-viewport-inset: clamp(5px, 1.5vmin, 10px);
  /* Litt mindre luft øverst slik at widgets kan ligge nærmere toppen av viewport. */
  --preview-viewport-inset-top: clamp(2px, 1vmin, 8px);
}

/* Fullskjerm: flytende «+» for å legge til widget (øverst til høyre i viewport). */
.preview-fs-add-widget-wrap {
  display: none;
  position: absolute;
  top: var(--preview-viewport-inset);
  right: var(--preview-viewport-inset);
  z-index: 40;
  pointer-events: none;
}

.preview-fs-add-widget-wrap .preview-fs-floating-tools {
  pointer-events: auto;
}

.preview-fs-floating-tools {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.preview-toolbar-add--fullscreen {
  position: relative;
}

.btn-add-widget-fs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.88);
  color: #f1f5f9;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.btn-add-widget-fs:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(59, 130, 246, 0.55);
  color: #fff;
}

.preview-add-widget-types--fullscreen {
  z-index: 50;
  background: rgba(15, 23, 42, 0.97);
  border-color: rgba(148, 163, 184, 0.4);
  color: #f1f5f9;
}

.preview-add-widget-types--fullscreen .preview-add-widget-tabs {
  background: rgba(30, 41, 59, 0.98);
  border-bottom-color: rgba(148, 163, 184, 0.35);
}

.preview-add-widget-types--fullscreen .preview-add-widget-tab {
  color: #94a3b8;
}

.preview-add-widget-types--fullscreen .preview-add-widget-tab:hover {
  color: #f8fafc;
  background: rgba(59, 130, 246, 0.12);
}

.preview-add-widget-types--fullscreen .preview-add-widget-tab--active {
  color: #93c5fd;
  background: rgba(15, 23, 42, 0.99);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.99);
}

.preview-add-widget-types--fullscreen .preview-add-widget-panels {
  background: rgba(15, 23, 42, 0.99);
}

.preview-add-widget-types--fullscreen .preview-add-widget {
  color: #f1f5f9;
}

.preview-add-widget-types--fullscreen .preview-add-widget:hover {
  background: rgba(59, 130, 246, 0.2);
}

/* Trangt: faner i kolonne til venstre, innhold til høyre (etter fullscreen-basestil så aktive faner får riktig skygge). */
@container add-widget (max-width: 400px) {
  .preview-add-widget-body {
    flex-direction: row;
    align-items: stretch;
  }

  .preview-add-widget-tabs {
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    width: min(44%, 9.5rem);
    max-width: 9.5rem;
    border-bottom: none;
    border-right: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px 0 0 10px;
    padding: 6px 0 6px 6px;
  }

  .preview-add-widget-tab {
    flex: 0 0 auto;
    width: 100%;
    border-radius: 8px 0 0 8px;
    text-align: left;
    text-transform: none;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .preview-add-widget-tab--active {
    box-shadow: 1px 0 0 #fff;
  }

  .preview-add-widget-panels {
    border-radius: 0 10px 10px 0;
  }

  .preview-add-widget-types--fullscreen .preview-add-widget-tabs {
    border-right-color: rgba(148, 163, 184, 0.35);
  }

  .preview-add-widget-types--fullscreen .preview-add-widget-tab--active {
    box-shadow: 1px 0 0 rgba(15, 23, 42, 0.99);
  }
}

.preview-frame:fullscreen .preview-fs-add-widget-wrap,
.page-editor .preview-frame.preview-frame--show-faux-fs .preview-fs-add-widget-wrap {
  display: block;
}

.preview-fullscreen-footer {
  display: none;
  flex-shrink: 0;
  width: 100%;
  padding: 6px 12px max(10px, env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 0.85rem;
  border-top: none;
  background: transparent;
  box-shadow: none;
}

.preview-fullscreen-footer-inner {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0;
  font-size: 0.95rem;
}

.preview-fullscreen-brand {
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.05em;
  color: #e2e8f0;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .preview-fullscreen-brand {
    background: linear-gradient(120deg, #60a5fa, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.preview-frame:fullscreen .preview-fullscreen-footer,
.page-editor .preview-frame.preview-frame--show-faux-fs .preview-fullscreen-footer {
  display: block;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.preview-frame--16-9 {
  aspect-ratio: 16 / 9;
  width: min(100%, calc(75vh * 16 / 9));
}

.preview-frame--9-16 {
  aspect-ratio: 9 / 16;
  width: min(100%, calc(75vh * 9 / 16));
}

.preview-frame--4-3 {
  aspect-ratio: 4 / 3;
  width: min(100%, calc(75vh * 4 / 3));
}

.preview-frame--3-4 {
  aspect-ratio: 3 / 4;
  width: min(100%, calc(75vh * 3 / 4));
}

.preview-under-frame {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 18px 12px;
  gap: 10px;
  box-sizing: border-box;
}

.preview-under-frame-leading {
  flex: 1 1 0;
  min-width: 0;
}

.preview-under-frame-trailing {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.preview-slide-interval-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--lp-muted);
}

.preview-slide-interval-text {
  white-space: nowrap;
}

.preview-slide-interval-label select {
  min-width: 5.75rem;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: #fff;
  color: var(--lp-text);
  font-size: 0.95rem;
  font-weight: 600;
}

.preview-slide-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0;
}

/* Fullskjerm redigering: ytre fyller skjermen; stack sentrerer viewport; footer nederst. */
.preview-frame:fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  margin: 0;
  aspect-ratio: unset;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(59, 130, 246, 0.12), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(168, 85, 247, 0.1), transparent 50%),
    linear-gradient(180deg, #05080f 0%, #020308 100%);
}

/* Faux fullskjerm i rediger (når Fullscreen API mangler, f.eks. iPhone Safari) */
.page-editor .preview-frame.preview-frame--show-faux-fs {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  margin: 0;
  aspect-ratio: unset;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  z-index: 2147483000;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(59, 130, 246, 0.12), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(168, 85, 247, 0.1), transparent 50%),
    linear-gradient(180deg, #05080f 0%, #020308 100%);
}

/* Rediger fullskjerm: avslutt øverst i midten (tydelig på iPhone der knappen under rammen er skjult). */
.editor-fs-exit-btn {
  display: none;
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  width: 46px;
  height: 46px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(15, 23, 42, 0.92);
  color: #f1f5f9;
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.page-editor #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .editor-fs-exit-btn {
  display: inline-flex;
}

body.landing.page-editor.page-editor-faux-fs-active {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Unngå at overflow:hidden på kortet klipper fixed-fullskjerm (#previewFrame flyttes også til body i JS). */
body.page-editor.page-editor-faux-fs-active .preview-section-inner {
  overflow: visible;
}

/* Mobil / pad: trykkflater og safe area (iPhone m.fl.) */
@media (max-width: 1024px) {
  .landing-shell {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
  }

  .landing-header {
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    flex-wrap: wrap;
    align-items: center;
  }

  .landing-header.is-nav-open {
    position: relative;
    z-index: 100;
  }

  /* Rediger/fremvisning: logo/hamburger følger scroll uten lys egen stripe (gjennomsiktig mot body-gradient) */
  .page-editor .landing-shell--show > .landing-header,
  .page-show .landing-shell--show > .landing-header {
    position: sticky;
    top: 0;
    z-index: 350;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .page-editor .landing-shell--show > .landing-header.is-nav-open,
  .page-show .landing-shell--show > .landing-header.is-nav-open {
    z-index: 400;
  }

  .btn-toolbar-nav {
    min-width: 44px;
    min-height: 44px;
  }

  .btn-fullscreen {
    min-height: 44px;
  }

  .page-editor .preview-section {
    padding-top: 0.75rem;
  }

  /* Toppmeny: kun hamburger synlig til meny åpnes (overstyrer base display:flex) */
  .landing-header .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .landing-nav-toggle {
    display: inline-flex !important;
    margin-left: auto;
    flex-shrink: 0;
  }

  .landing-header:not(.is-nav-open) .landing-header-actions {
    display: none !important;
  }

  .landing-header.is-nav-open .landing-header-actions {
    display: flex !important;
    width: 100%;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px 14px;
    margin-top: 8px;
    border-top: 1px solid rgba(26, 35, 50, 0.12);
    border-radius: 0 0 14px 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  }

  .landing-header-actions > .btn-ghost,
  .landing-header-actions > .btn-primary,
  .landing-header-actions > .editor-nav-link {
    width: 100%;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }

  .landing-header-actions .lang-switcher {
    width: 100%;
  }

  .landing-header-actions .lang-menu-btn {
    width: 100%;
    justify-content: center;
  }

  .landing-header-actions .lang-menu-list {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
  }

  /* Rediger: slideviser — egen rad for «1 / n», egen rad for visningstid (unngår overlap) */
  .page-editor .preview-under-frame {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px 10px;
    padding: 12px 12px 16px;
  }

  .page-editor .preview-under-frame-leading {
    display: none;
  }

  .page-editor .preview-slide-nav {
    order: 1;
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
    gap: 14px;
    padding: 6px 0 2px;
  }

  .page-editor .preview-badge {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 6.5rem;
    padding: 10px 18px;
    text-align: center;
    border-radius: 14px;
    background: rgba(37, 99, 235, 0.14);
    border: 1px solid rgba(37, 99, 235, 0.35);
    color: #1d4ed8;
    line-height: 1.2;
  }

  .page-editor .preview-under-frame-trailing {
    order: 2;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }

  .page-editor .preview-slide-interval-label {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }

  .page-editor .preview-slide-interval-text {
    flex-shrink: 0;
  }

  .page-editor .preview-slide-interval-label select {
    flex: 1 1 auto;
    min-width: 5rem;
    max-width: 200px;
    margin-left: auto;
  }
}

@media (min-width: 1025px) {
  .landing-nav-toggle {
    display: none !important;
  }

  .landing-header-actions {
    display: flex !important;
    width: auto !important;
    flex-basis: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    border-top: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    gap: 10px;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}

/* Fremvisning: #previewFrame kan midlertidig få z-index ~2^31 under fullskjerm-API — toppfelt må ligge over så «Min profil» alltid trykkes. */
.page-show .landing-shell--show > .landing-header {
  z-index: 2147483647;
}

.preview-frame:fullscreen .preview-fullscreen-stack {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.preview-frame:fullscreen .preview-frame-viewport {
  position: relative;
  inset: auto;
  flex: none;
  overflow: hidden;
}

.preview-frame.preview-frame--16-9:fullscreen .preview-frame-viewport {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
}

.preview-frame.preview-frame--9-16:fullscreen .preview-frame-viewport {
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  aspect-ratio: 9 / 16;
}

.preview-frame.preview-frame--4-3:fullscreen .preview-frame-viewport {
  width: min(100vw, calc(100vh * 4 / 3));
  height: min(100vh, calc(100vw * 3 / 4));
  aspect-ratio: 4 / 3;
}

.preview-frame.preview-frame--3-4:fullscreen .preview-frame-viewport {
  width: min(100vw, calc(100vh * 3 / 4));
  height: min(100vh, calc(100vw * 4 / 3));
  aspect-ratio: 3 / 4;
}

/* Faux fullskjerm (fremvisning med PIN): samme layout som :fullscreen */
.preview-frame.preview-frame--show-faux-fs .preview-fullscreen-stack {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.preview-frame.preview-frame--show-faux-fs .preview-frame-viewport {
  position: relative;
  inset: auto;
  flex: none;
  overflow: hidden;
}

.page-show .preview-frame.preview-frame--16-9.preview-frame--show-faux-fs .preview-frame-viewport,
.page-editor .preview-frame.preview-frame--16-9.preview-frame--show-faux-fs .preview-frame-viewport {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
}

.page-show .preview-frame.preview-frame--9-16.preview-frame--show-faux-fs .preview-frame-viewport,
.page-editor .preview-frame.preview-frame--9-16.preview-frame--show-faux-fs .preview-frame-viewport {
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  aspect-ratio: 9 / 16;
}

.page-show .preview-frame.preview-frame--4-3.preview-frame--show-faux-fs .preview-frame-viewport,
.page-editor .preview-frame.preview-frame--4-3.preview-frame--show-faux-fs .preview-frame-viewport {
  width: min(100vw, calc(100vh * 4 / 3));
  height: min(100vh, calc(100vw * 3 / 4));
  aspect-ratio: 4 / 3;
}

.page-show .preview-frame.preview-frame--3-4.preview-frame--show-faux-fs .preview-frame-viewport,
.page-editor .preview-frame.preview-frame--3-4.preview-frame--show-faux-fs .preview-frame-viewport {
  width: min(100vw, calc(100vh * 3 / 4));
  height: min(100vh, calc(100vw * 4 / 3));
  aspect-ratio: 3 / 4;
}

.preview-frame.preview-frame--show-faux-fs .preview-slides {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
}

.preview-slides {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  background: #0f1628;
}

/* Lik innrykk i innebygd forhåndsvisning og fullskjerm: relativt til selve preview-viewport (ikke hele vinduet). */
@supports (width: 1cqmin) {
  .preview-frame-viewport {
    container-type: size;
    container-name: preview-viewport;
    --preview-viewport-inset: clamp(4px, 1.5cqmin, 9px);
    --preview-viewport-inset-top: clamp(2px, 1cqmin, 7px);
  }
}

.preview-bg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.preview-bg-row input[type="text"] {
  flex: 1;
  min-width: 120px;
  max-width: 200px;
}

.preview-bg-row input[type="color"] {
  width: 48px;
  height: 40px;
  padding: 2px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  cursor: pointer;
  background: #fff;
}

.preview-logo-layer {
  position: absolute;
  inset: 0;
  /* Over innholdsstack (z-index 1), men laget har pointer-events: none så widgets får klikk utenom logo-boksen */
  z-index: 2;
  pointer-events: none;
}

.preview-logo-box {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
}

.preview-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.preview-logo-handle {
  cursor: move;
  touch-action: none;
}

.preview-logo-box .preview-logo-handle {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
}

.preview-slides--custom-bg .preview-canvas--empty {
  background: transparent;
}

.preview-frame:fullscreen .preview-slides {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
}

.preview-frame:fullscreen .preview-slide--image,
.preview-frame:fullscreen .preview-slide--image img {
  min-height: 100%;
}

/* Rediger i fullskjerm: behold titler og håndtak (samme som i preview). */

.preview-slide {
  animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.preview-slide--dynamic.preview-canvas {
  position: absolute;
  /* Samme som visuell margin: absolute-barn bruker hele padding-boksen til forelder, så margin må være inset her. */
  top: var(--preview-viewport-inset-top);
  right: var(--preview-viewport-inset);
  bottom: var(--preview-viewport-inset);
  left: var(--preview-viewport-inset);
  z-index: 1;
  border-radius: 12px;
}

/* Widgets ligger her; logo ligger som søsken utenfor stack der det er definert. */
.preview-slide-content-stack {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.preview-canvas--empty .preview-slide-content-stack,
.preview-canvas--bare .preview-slide-content-stack {
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-canvas--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(15, 22, 40, 0.92), rgba(30, 41, 59, 0.88));
}

.preview-empty-slide {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 20px;
  max-width: min(520px, 92%);
}

.preview-canvas--bare {
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-canvas--bare .preview-empty {
  position: relative;
  z-index: 1;
  margin: 0;
}

.preview-empty-slide-title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.preview-empty-slide-hint {
  margin: 0 0 20px;
  font-size: 0.9rem;
  color: rgba(226, 232, 240, 0.72);
}

.preview-empty-add-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.preview-add-widget {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.preview-add-widget:hover {
  background: rgba(37, 99, 235, 0.35);
  border-color: rgba(96, 165, 250, 0.7);
  transform: scale(1.04);
}

.preview-widget {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  background: var(--widget-custom-bg, linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.88)));
  color: #0f172a;
  border: none;
  border-radius: 14px;
  padding: 12px 14px 18px;
  overflow: auto;
  min-height: 140px;
  min-width: 160px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.preview-widget--flat {
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
}

.preview-widget--transparent {
  background: transparent !important;
}

.preview-widget--noFrame {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
}

.preview-widget h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.preview-source {
  font-weight: 500;
  font-size: 0.8rem;
  color: #334155;
}

.preview-widget-big {
  font-size: 2.4rem;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.weather-location-line {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.weather-location-custom-panel {
  margin-top: 8px;
}

.weather-geocode-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.weather-geocode-query-input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  font-size: 0.9rem;
}

.weather-geocode-results {
  margin-top: 8px;
  max-height: 180px;
  overflow: auto;
}

.weather-geocode-msg {
  margin: 0;
  font-size: 0.82rem;
  color: #64748b;
}

.weather-geocode-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weather-geocode-pick-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  cursor: pointer;
  color: #0f172a;
}

.weather-geocode-pick-btn:hover {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(239, 246, 255, 0.95);
}

.weather-geocode-selected-label {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: #475569;
}

.weather-main-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.weather-icon {
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1;
  flex-shrink: 0;
}

.weather-main-text {
  min-width: 0;
}

.weather-main-text .preview-widget-big {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 4px;
}

.weather-desc {
  margin: 0;
  font-size: 0.88rem;
  color: #475569;
}

.weather-period-block {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 10px;
  margin-top: 4px;
}

.weather-period-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 6px;
}

.weather-period-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.weather-period-date {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 600;
}

.weather-period-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.weather-day-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.weather-minmax {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.weather-minmax-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.weather-minmax-values {
  font-variant-numeric: tabular-nums;
}

.weather-loading,
.weather-error {
  margin: 0;
  font-size: 0.92rem;
  color: #475569;
}

.preview-widget--weather {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Times- og 10-dagers: smalt = vertikal liste, bredt = minikort i rader (container query) */
.weather-variant-ct {
  container-type: inline-size;
  container-name: weathervar;
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.weather-hourly-scroll,
.weather-tenday-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.weather-hourly-list,
.weather-tenday-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.weather-hourly-row,
.weather-tenday-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.82rem;
}

.weather-hourly-row--empty {
  font-style: italic;
  color: #64748b;
}

.weather-hourly-time,
.weather-tenday-day {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: #0f172a;
}

.weather-hourly-icon,
.weather-tenday-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.weather-hourly-temp,
.weather-tenday-mm {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #1e293b;
  flex-shrink: 0;
}

@container weathervar (min-width: 320px) {
  .weather-hourly-list,
  .weather-tenday-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    gap: 8px;
  }

  .weather-hourly-row:not(.weather-hourly-row--empty),
  .weather-tenday-row {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex: 1 1 76px;
    min-width: 68px;
    max-width: 118px;
    padding: 8px 6px;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  }

  .weather-hourly-time,
  .weather-tenday-day {
    flex: 0 0 auto;
    font-size: 0.68rem;
    line-height: 1.25;
  }

  .weather-hourly-icon,
  .weather-tenday-icon {
    font-size: 1.35rem;
  }

  .weather-hourly-temp,
  .weather-tenday-mm {
    font-size: 0.78rem;
  }

  .weather-hourly-row--empty {
    flex: 1 1 100%;
    max-width: none;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    box-shadow: none;
  }
}

.preview-widget ul {
  margin: 0;
  padding-left: 18px;
}

.preview-widget ul.news-list-rich {
  padding-left: 0;
  list-style: none;
}

.news-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 10px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.86rem;
  line-height: 1.4;
}

.news-line--no-time {
  display: block;
}

.news-line--no-time .news-title {
  display: block;
}

.news-line:last-child {
  border-bottom: none;
}

.news-time {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  font-weight: 700;
  white-space: normal;
}

.news-title {
  display: block;
  width: 100%;
  min-width: 0;
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
}

.news-title:hover {
  text-decoration: underline;
}

.preview-widget a {
  color: #1d4ed8;
}

.preview-slide--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
}

.preview-slide--image {
  position: relative;
  min-height: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
}

.preview-slide--image img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
}

.preview-slide-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  font-size: 0.85rem;
  font-weight: 600;
}

.preview-empty {
  margin: 0;
  padding: 40px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/* Innstillinger under preview — samme kort som skjermen */
.preview-settings-panel {
  margin-top: 0;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--lp-border);
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.92), rgba(255, 255, 255, 0.98));
}

.preview-settings-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.preview-settings-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lp-text);
}

.preview-settings-toggle {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--lp-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.preview-settings-toggle:hover {
  border-color: rgba(37, 99, 235, 0.4);
  background: #fff;
}

.preview-settings-toggle:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.55);
  outline-offset: 2px;
}

.preview-settings-chevron-svg {
  display: block;
  transition: transform 0.22s ease;
  transform: rotate(-90deg);
}

.preview-settings-panel.is-open .preview-settings-chevron-svg {
  transform: rotate(0deg);
}

.preview-settings-body {
  padding-top: 4px;
}

.preview-settings-lead {
  margin: 0 0 12px;
  font-size: 0.92rem;
  color: var(--lp-muted);
  line-height: 1.45;
  max-width: 560px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  align-items: start;
}

.field span {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--lp-muted);
  margin-bottom: 8px;
}

.field input[type="number"] {
  width: 100%;
  max-width: 280px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--lp-border);
  background: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
}

.field input[type="text"],
.field input[type="password"] {
  width: 100%;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--lp-border);
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  color: var(--lp-text);
}

.mode-field {
  margin: 0;
  padding: 0;
  border: none;
}

.mode-field legend {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--lp-muted);
  margin-bottom: 8px;
}

.mode-radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mode-radios label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}

.field-hint {
  margin: 10px 0 0;
  font-size: 0.88rem;
  color: var(--lp-muted);
  max-width: 420px;
}

.geo-status {
  margin: 12px 0 0;
  padding: 0 4px;
  font-size: 0.92rem;
  color: var(--lp-muted);
}

.geo-status--in-panel {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

/* Builder */
.builder-section {
  margin-top: 28px;
  padding: 8px 4px 32px;
}

.builder-section h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.builder-intro {
  margin: 0 0 18px;
  color: var(--lp-muted);
  max-width: 640px;
  line-height: 1.5;
}

.component-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.component-toggles label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}

.btn-remove-widget {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lp-muted);
  cursor: pointer;
}

.btn-remove-widget:hover {
  border-color: #b91c1c;
  color: #b91c1c;
}

.widget-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}

.widget-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.widget-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #1d4ed8;
  cursor: pointer;
}

.widget-settings-btn:hover {
  background: rgba(37, 99, 235, 0.12);
}

.widget-settings-icon {
  display: block;
}

.widget-head h4 {
  margin: 0;
  line-height: 1.25;
  font-size: 0.95rem;
}

.preview-widget--news .widget-head h4 {
  font-size: 0.88rem;
}

.preview-widget--stock {
  display: flex;
  flex-direction: column;
  padding-bottom: 22px;
}

.stock-widget-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 8px;
}

.stock-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}

.stock-ticker {
  font-weight: 800;
  font-size: 0.95rem;
  color: #0f172a;
}

.stock-price {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #1d4ed8;
}

.stock-meta {
  margin: 0 0 4px;
  font-size: 0.88rem;
  color: #64748b;
}

.stock-meta--hint {
  line-height: 1.35;
  max-width: 36ch;
}

.stock-chart-wrap {
  flex: 1;
  min-height: 100px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.06);
}

.stock-chart-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.preview-widget--notes {
  display: flex;
  flex-direction: column;
}

.notes-sticky-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 8px;
}

.notes-sticky-toolbar {
  display: flex;
  justify-content: flex-end;
}

.notes-sticky-add {
  font-size: 0.76rem;
  padding: 6px 10px;
}

.notes-sticky-board {
  position: relative;
  flex: 1;
  min-height: 140px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px dashed rgba(148, 163, 184, 0.45);
  overflow: hidden;
}

.sticky-note-card {
  position: absolute;
  width: 28%;
  min-width: 120px;
  min-height: 108px;
  max-height: 72%;
  border-radius: 10px;
  background: var(--sticky-color, #fff3a3);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
  border: 1px solid rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sticky-note-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 2px;
}

.sticky-note-grab {
  border: 0;
  background: transparent;
  cursor: grab;
  color: rgba(15, 23, 42, 0.55);
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
}

.sticky-note-color {
  margin-left: auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.sticky-note-remove {
  border: 0;
  background: transparent;
  color: rgba(15, 23, 42, 0.65);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 2px;
}

.sticky-note-text {
  flex: 1;
  min-height: 70px;
  border: 0;
  background: transparent;
  resize: none;
  padding: 4px 8px 8px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #0f172a;
  outline: none;
}

.notes-widget-body-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

.notes-widget-body-wrap--v-top {
  justify-content: flex-start;
}

.notes-widget-body-wrap--v-center {
  justify-content: center;
}

.notes-widget-body-wrap--v-bottom {
  justify-content: flex-end;
}

.notes-widget-body-wrap--v-top .notes-widget-body--html,
.notes-widget-body-wrap--v-top .notes-placeholder {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.notes-widget-body-wrap--v-center .notes-widget-body--html,
.notes-widget-body-wrap--v-center .notes-placeholder,
.notes-widget-body-wrap--v-bottom .notes-widget-body--html,
.notes-widget-body-wrap--v-bottom .notes-placeholder {
  flex: 0 1 auto;
  max-height: 100%;
  overflow: auto;
  width: 100%;
  box-sizing: border-box;
}

.notes-widget-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #0f172a;
}

.notes-placeholder {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
  text-align: center;
  padding: 20px 8px;
}

.notes-widget-body--html {
  white-space: normal;
  word-break: break-word;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #0f172a;
}

.notes-widget-body--html p {
  margin: 0 0 0.5em;
}

.notes-widget-body--html p:last-child {
  margin-bottom: 0;
}

.notes-widget-body--html b,
.notes-widget-body--html strong {
  font-weight: 700;
}

.notes-widget-body--html i,
.notes-widget-body--html em {
  font-style: italic;
}

.preview-widget--widgetImage {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 22px;
}

.widget-image-inner {
  flex: 1;
  min-height: 80px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.widget-image-fill {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.widget-image-placeholder {
  margin: 0;
  padding: 16px;
  text-align: center;
  font-size: 0.86rem;
  color: #64748b;
}

.preview-widget.preview-widget--imageGalleryWidget {
  display: flex;
  flex-direction: column;
  min-height: 100px;
  padding: 8px 12px 16px;
  overflow: hidden;
}

.image-gallery-widget-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.image-gallery-root {
  flex: 1;
  min-height: 0;
  min-width: 0;
  position: relative;
}

.image-gallery-root--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-gallery-placeholder {
  margin: 0;
  padding: 12px;
  text-align: center;
  font-size: 0.86rem;
  color: #64748b;
}

.image-gallery-root--carousel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.image-gallery-root--carousel .image-gallery-carousel-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.06);
}

.image-gallery-carousel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}

.image-gallery-carousel-item--active {
  opacity: 1;
  z-index: 1;
}

.image-gallery-root--carousel .image-gallery-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Mosaikk og dynamisk: fyll rutenett uten scrolling; hele bildet synlig (contain). */
.image-gallery-root--grid {
  display: grid;
  grid-template-columns: repeat(var(--ig-cols, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--ig-rows, 1), minmax(0, 1fr));
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
}

.image-gallery-root--grid.image-gallery-root--mosaic {
  gap: 4px;
}

.image-gallery-root--grid.image-gallery-root--dynamic {
  gap: 6px;
}

.image-gallery-grid-cell {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  box-sizing: border-box;
}

.image-gallery-root--grid .image-gallery-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.image-gallery-settings-thumbs {
  display: grid;
  /* Ikke bruk 1fr her: ett bilde ville da fylle hele modalbredden. Faste kolonnebredder = ekte miniatyrer. */
  grid-template-columns: repeat(auto-fill, minmax(72px, 96px));
  justify-content: start;
  gap: 8px;
  margin-top: 10px;
  max-height: 280px;
  overflow-y: auto;
}

.image-gallery-settings-thumb-tile {
  position: relative;
  width: 100%;
  max-width: 96px;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.image-gallery-settings-thumb-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

.image-gallery-settings-remove-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.58);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-gallery-settings-remove-badge:hover {
  background: rgba(185, 28, 28, 0.88);
}

.preview-widget--countdownWidget {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 22px;
}

.countdown-widget-body {
  position: relative;
  flex: 1;
  min-height: 110px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a, #1e293b 42%, #312e81);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.countdown-widget-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.02);
}

.countdown-widget-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 14px 10px;
  text-align: center;
  color: #f8fafc;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.36), rgba(15, 23, 42, 0.6));
}

.countdown-widget-unit {
  margin: 0 0 4px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.95);
}

.countdown-widget-value {
  margin: 0;
  font-size: clamp(2.1rem, 5.3vw, 4rem);
  line-height: 1;
  font-weight: 800;
  text-shadow: 0 8px 24px rgba(15, 23, 42, 0.6);
}

.countdown-widget-foot {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(226, 232, 240, 0.96);
}

.preview-widget--savingsGoalWidget {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 22px;
}

.savings-goal-widget-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.savings-goal-widget-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
}

.savings-goal-hero {
  border-radius: 12px;
  overflow: hidden;
  max-height: 42%;
  min-height: 72px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.06);
}

.savings-goal-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 180px;
  object-fit: cover;
}

.savings-goal-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.savings-goal-text {
  font-size: 0.84rem;
  line-height: 1.45;
  color: #334155;
  white-space: pre-wrap;
  word-break: break-word;
}

.savings-goal-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(241, 245, 249, 0.95), rgba(226, 232, 240, 0.88));
  border: 1px solid rgba(148, 163, 184, 0.45);
}

.savings-goal-stat--hero {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.savings-goal-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.savings-goal-stat-value {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.savings-goal-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.savings-goal-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  transition: width 0.35s ease;
}

.savings-goal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.82rem;
  color: #475569;
}

.savings-goal-row strong {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88rem;
  color: #0f172a;
}

.savings-goal-meta,
.savings-goal-plan,
.savings-goal-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #64748b;
}

.savings-goal-hint {
  color: #0f766e;
  font-weight: 600;
}

.savings-goal-participants {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #475569;
}

.savings-goal-participants-label {
  font-weight: 700;
  margin-right: 6px;
  color: #334155;
}

.preview-widget--clockWidget {
  display: flex;
  flex-direction: column;
  padding-bottom: 18px;
}

.clock-widget-body {
  flex: 1;
  min-height: 0;
  container-type: size;
  container-name: clockwidget;
}

.clock-widget-cities {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 2.5cqmin, 14px);
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  min-height: 80px;
}

.clock-city-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(2px, 1.2cqmin, 8px);
}

.clock-city-block--digital .clock-city-time--large {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
  font-size: clamp(0.85rem, 12cqmin, 3.2rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #0f172a;
}

.clock-city-block--digital .clock-city-label {
  font-size: clamp(0.62rem, 4.5cqmin, 0.95rem);
  font-weight: 600;
  color: #475569;
}

.clock-city-block--minimal {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  text-align: left;
  padding: clamp(3px, 1.5cqmin, 8px) clamp(4px, 2cqmin, 10px);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.clock-city-block--minimal .clock-city-label {
  font-size: clamp(0.58rem, 3.8cqmin, 0.82rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.clock-city-block--minimal .clock-city-time {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  font-size: clamp(0.72rem, 6cqmin, 1.35rem);
  color: #0f172a;
}

.clock-city-block--analog {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(6px, 3cqmin, 12px);
  text-align: left;
}

.clock-city-block--both {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 2cqmin, 12px);
  text-align: center;
}

.clock-both-digital-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 1cqmin, 6px);
  min-width: 0;
}

.clock-city-block--both .clock-city-time--large {
  font-size: clamp(0.88rem, 10cqmin, 2.6rem);
}

.clock-analog-wrap {
  flex: 0 0 auto;
  width: clamp(56px, 30cqmin, 130px);
  height: clamp(56px, 30cqmin, 130px);
}

.clock-analog-wrap--large {
  width: clamp(72px, min(38cqmin, 22cqh), 200px);
  height: clamp(72px, min(38cqmin, 22cqh), 200px);
}

.clock-analog-svg {
  width: 100%;
  height: 100%;
  color: #0f172a;
}

.clock-analog-wrap--large .clock-analog-svg .clock-tick-marks {
  stroke-width: 1.1;
}

.clock-analog-wrap--large .clock-hand-hour {
  stroke-width: 3.8;
}

.clock-analog-wrap--large .clock-hand-min {
  stroke-width: 2.4;
}

.clock-analog-wrap--large .clock-hand-sec {
  stroke-width: 1.5;
}

.clock-city-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.clock-city-block--analog .clock-city-label {
  font-size: clamp(0.62rem, 4cqmin, 0.9rem);
  font-weight: 700;
  color: #334155;
}

.clock-city-time--sub {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.58rem, 3.5cqmin, 0.78rem);
  color: #64748b;
}

.clock-loc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
}

.clock-loc-row {
  display: grid;
  grid-template-columns: 22px 1fr minmax(80px, 1fr) auto;
  gap: 6px;
  align-items: center;
  font-size: 0.82rem;
}

.clock-loc-num {
  opacity: 0.65;
  font-weight: 700;
}

.clock-loc-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock-loc-tz {
  font-size: 0.72rem;
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock-loc-actions {
  display: inline-flex;
  gap: 4px;
}

.clock-loc-btn {
  min-width: 30px !important;
  padding: 0 6px;
}

.clock-loc-btn--danger {
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
}

.savings-goal-participant-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.savings-goal-participant-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.65);
}

.savings-goal-participant-row .savings-goal-participant-name {
  flex: 1 1 160px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  font-size: 0.88rem;
}

.preview-widget--calendar {
  display: flex;
  flex-direction: column;
  padding-bottom: 22px;
}

.preview-widget--budgetBoard,
.preview-widget--projectPlan {
  display: flex;
  flex-direction: column;
}

.budget-board-body,
.project-plan-body {
  flex: 1;
  min-height: 0;
}

.budget-board-body {
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.budget-board-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.budget-board-table {
  width: 100%;
  min-width: calc(var(--budget-cols, 3) * 86px);
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.78rem;
}

.budget-board-table--dense {
  table-layout: auto;
}

.budget-board-table th,
.budget-board-table td {
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 8px 6px;
  text-align: center;
  vertical-align: top;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.budget-board-table--dense th,
.budget-board-table--dense td {
  min-width: 140px;
}

.budget-board-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
}

.budget-board-totals-row td {
  background: rgba(241, 245, 249, 0.65);
  vertical-align: middle;
}

.budget-col-total-cell {
  padding-top: 7px;
  padding-bottom: 7px;
}

.budget-col-total-label {
  font-size: 0.68rem;
  opacity: 0.8;
  line-height: 1.2;
}

.budget-col-total-value {
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
}

.budget-neg {
  color: #ef4444;
}

.budget-pos {
  color: #22c55e;
}

.budget-money-text {
  font-weight: 600;
  margin-bottom: 6px;
}

.budget-bills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  align-content: flex-start;
}

.budget-bills--empty {
  opacity: 0.6;
}

.budget-bill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.65rem;
  line-height: 1.1;
  font-weight: 700;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.22);
  background: linear-gradient(160deg, #dcfce7, #86efac);
}

.budget-banknote-img {
  width: 74px;
  height: 36px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.86);
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.28);
  border: 1px solid rgba(15, 23, 42, 0.24);
}

.budget-banknote-img--allocated {
  filter: grayscale(1) brightness(0.86);
  opacity: 0.72;
}

.budget-banknote-img--overdraw {
  border: 2px solid rgba(185, 28, 28, 0.9);
  outline: 2px solid rgba(239, 68, 68, 0.55);
  outline-offset: -2px;
  box-shadow: 0 3px 10px rgba(127, 29, 29, 0.45);
  filter: grayscale(0.15) sepia(1) hue-rotate(-72deg) saturate(6.5) brightness(0.88) contrast(1.14);
  opacity: 1;
}

/* DKK source images are flatter; add a subtle frame/contrast boost. */
.budget-banknote-img--dkk {
  padding: 1px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.9));
  border-color: rgba(30, 41, 59, 0.3);
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  filter: contrast(1.08) saturate(1.08);
}

.budget-bills--dense-col {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.budget-bills--stack {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 40px;
  width: 100%;
}

.budget-bills-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.budget-bills-col .budget-banknote-img + .budget-banknote-img {
  margin-top: -27px; /* ~75% overlap for 36px bills */
}

.budget-bills--two-col .budget-bills-col {
  flex: 0 0 auto;
}

.budget-bills--two-col .budget-banknote-img {
  width: 52px;
  height: 26px;
}

.budget-bills--two-col .budget-bills-col .budget-banknote-img + .budget-banknote-img {
  margin-top: -19px; /* keep overlap with smaller notes */
}

.budget-bill[data-denom="1000"],
.budget-bill[data-denom="500"] {
  background: linear-gradient(160deg, #fde68a, #f59e0b);
}

.budget-bill[data-denom="200"],
.budget-bill[data-denom="100"] {
  background: linear-gradient(160deg, #bfdbfe, #60a5fa);
}

.budget-bill[data-denom="50"],
.budget-bill[data-denom="20"],
.budget-bill[data-denom="10"],
.budget-bill[data-denom="5"],
.budget-bill[data-denom="1"] {
  background: linear-gradient(160deg, #e9d5ff, #c084fc);
}

.budget-bill--compact {
  background: linear-gradient(160deg, #e2e8f0, #94a3b8) !important;
  color: #0f172a;
}

.budget-bill-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(124, 58, 237, 0.15));
  color: #1e3a8a;
  font-size: 0.72rem;
  font-weight: 700;
}

.setting-row.budget-cat-row,
.project-cat-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 96px auto;
  gap: 6px;
  align-items: center;
}

.project-cat-row {
  grid-template-columns: 1fr auto;
}

.project-item-list,
.project-cat-list,
.budget-cat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-item-row {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr .8fr .7fr .7fr .9fr auto;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.8);
}

.project-item-row input,
.project-item-row select,
.setting-row.budget-cat-row input,
.project-cat-row input {
  min-width: 0;
}

.project-item-row input,
.project-item-row select,
.setting-row.budget-cat-row input,
.project-cat-row input {
  height: 34px;
  border-radius: 8px;
}

.notes-bg-reset-btn {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(37, 99, 235, 0.3);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.1));
  color: #1e3a8a;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.notes-bg-reset-btn:hover {
  border-color: rgba(37, 99, 235, 0.55);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(124, 58, 237, 0.18));
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
  transform: translateY(-1px);
}

.notes-bg-reset-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.5);
  outline-offset: 1px;
}

.project-item-row .notes-bg-reset-btn,
.setting-row.budget-cat-row .notes-bg-reset-btn,
.project-cat-row .notes-bg-reset-btn {
  min-width: 62px;
}

.budget-cat-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.budget-cat-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(248, 250, 252, 0.8);
}

.budget-cat-table th,
.budget-cat-table td {
  padding: 6px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  vertical-align: middle;
}

.budget-cat-table th {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  color: #334155;
  background: rgba(241, 245, 249, 0.9);
}

.budget-cat-table tbody tr:last-child td {
  border-bottom: none;
}

.budget-cat-cell-index {
  width: 20px;
  text-align: center;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
}

.budget-cat-row td:first-child {
  width: 20px;
  padding-left: 4px;
  padding-right: 4px;
}

.budget-cat-table th:first-child {
  width: 20px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
}

.budget-cat-row td:nth-child(2) {
  width: 44%;
}

.budget-cat-row td:nth-child(3) {
  width: 22%;
}

.budget-cat-row td:nth-child(4) {
  width: 34%;
}

.budget-cat-table td {
  min-width: 0;
}

.budget-cat-table .budget-cat-name,
.budget-cat-table .budget-cat-amount {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.budget-cat-table .budget-cat-amount {
  min-width: 0;
}

.budget-cat-table .budget-cat-actions {
  width: 100%;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.budget-action-btn {
  min-width: 32px !important;
  width: 32px;
  padding: 0;
  font-size: 0.8rem;
}

.budget-action-btn--danger {
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(190, 24, 93, 0.12));
}

.budget-action-btn--danger:hover {
  border-color: rgba(239, 68, 68, 0.55);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(190, 24, 93, 0.2));
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.22);
}

.project-plan-empty {
  font-size: 0.85rem;
  opacity: 0.85;
}

.project-plan-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-plan-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  opacity: 0.8;
}

.project-plan-board {
  position: relative;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  background:
    repeating-linear-gradient(
      to right,
      rgba(148, 163, 184, 0.12),
      rgba(148, 163, 184, 0.12) 1px,
      transparent 1px,
      transparent 24px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(148, 163, 184, 0.12),
      rgba(148, 163, 184, 0.12) 1px,
      transparent 1px,
      transparent 36px
    );
}

.project-plan-item {
  position: absolute;
  height: 28px;
  border-radius: 6px;
  background: #60a5fa;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 4px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.3);
}

.project-plan-item--milestone {
  width: 0 !important;
  background: transparent;
}

.project-plan-item--milestone::before {
  content: "";
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: #f59e0b;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
}

.project-plan-item--milestone .project-plan-item-label {
  margin-left: 4px;
}

.project-plan-item--done { background: #86efac; }
.project-plan-item--blocked { background: #fca5a5; }
.project-plan-item--inProgress { background: #93c5fd; }

.project-plan-item-label {
  font-size: 0.72rem;
  white-space: nowrap;
}

.project-plan-item-grab {
  width: 10px;
  height: 18px;
  border: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.5),
    rgba(15, 23, 42, 0.5) 2px,
    transparent 2px,
    transparent 4px
  );
  cursor: grab;
  border-radius: 3px;
  flex: 0 0 auto;
}

.calendar-widget-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.calendar-widget-layout {
  display: flex;
  min-height: 0;
  gap: 10px;
}

.calendar-widget-layout--bottom {
  flex-direction: column;
}

.calendar-widget-layout--right {
  flex-direction: row;
  align-items: stretch;
}

.calendar-widget-main {
  min-width: 0;
  flex: 1 1 auto;
}

.calendar-widget-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.cal-month-label {
  font-weight: 700;
  font-size: 0.93rem;
  color: #0f172a;
}

.cal-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cal-weekday-row--with-weeknum {
  grid-template-columns: 44px repeat(7, minmax(0, 1fr));
}

.cal-weekday-row--with-weeknum-mini {
  grid-template-columns: 22px repeat(7, minmax(0, 1fr));
}

.cal-wd {
  display: inline-flex;
  justify-content: center;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.04em;
}

.cal-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cal-week-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.cal-week-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.cal-week-num {
  display: none;
}

.cal-weekday-row--with-weeknum .cal-wd--weeknum {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-left: 2px;
}

.cal-weekday-row--with-weeknum + .cal-grid .cal-week-row {
  grid-template-columns: 44px 1fr;
  align-items: stretch;
}

.cal-weekday-row--with-weeknum + .cal-grid .cal-week-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.cal-cell {
  min-height: 28px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.cal-day-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
}

.cal-cell--empty {
  background: transparent;
  border-color: transparent;
}

.cal-cell--today {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(37, 99, 235, 0.3));
  border-color: rgba(37, 99, 235, 0.62);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22) inset;
}

.cal-cell--today .cal-day-num {
  color: #0b3a90;
  font-weight: 800;
}

.cal-cell--marked {
  background: rgba(220, 38, 38, 0.16);
  border-color: rgba(220, 38, 38, 0.4);
}

.cal-week-row--current .cal-week-days {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.06));
  border-radius: 11px;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.26) inset;
  padding: 3px;
}

.cal-week-row--current .cal-week-num {
  color: #1d4ed8;
}

.cal-week-row--current .cal-cell:not(.cal-cell--empty) {
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18);
}

.calendar-widget-inner--year {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.cal-year-month {
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: 6px;
}

.cal-year-month-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #334155;
  margin: 0 0 4px;
}

.cal-weekday-row--mini {
  gap: 2px;
  margin-bottom: 2px;
}

.cal-wd--mini {
  font-size: 0.6rem;
}

.cal-grid--mini {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.cal-week-row--mini {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.cal-week-days--mini {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.cal-weekday-row--with-weeknum-mini + .cal-grid .cal-week-row--mini {
  grid-template-columns: 22px 1fr;
}

.cal-week-num--mini {
  font-size: 0.52rem;
  color: #64748b;
  letter-spacing: 0.01em;
  line-height: 1;
}

.cal-cell--mini {
  min-height: 18px;
  border-radius: 6px;
}

.cal-cell--mini .cal-day-num {
  font-size: 0.63rem;
}

.cal-legend-wrap {
  border-top: 1px solid rgba(148, 163, 184, 0.3);
  padding-top: 8px;
}

.cal-legend-wrap--right {
  border-top: 0;
  border-left: 1px solid rgba(148, 163, 184, 0.3);
  padding-top: 0;
  padding-left: 10px;
  width: min(44%, 260px);
  overflow: auto;
}

.cal-legend-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-legend-item {
  display: grid;
  grid-template-columns: 12px minmax(70px, auto) auto 1fr;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
}

.cal-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #dc2626;
}

.cal-legend-range {
  color: #475569;
  white-space: nowrap;
}

.cal-legend-sep {
  color: #94a3b8;
}

.cal-legend-label {
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-marks-wrap {
  margin-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  padding-top: 10px;
}

.calendar-holiday-tools {
  margin-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  padding-top: 10px;
}

.calendar-holiday-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.calendar-holiday-status {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: #475569;
}

.calendar-marks-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.calendar-marks-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
}

.calendar-marks-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-marks-empty {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.calendar-mark-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 2fr auto;
  gap: 8px;
  align-items: end;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  padding: 8px;
  background: rgba(248, 250, 252, 0.85);
}

.calendar-mark-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #334155;
}

.calendar-mark-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-mark-field > span {
  font-size: 0.72rem;
  color: #64748b;
}

.calendar-mark-field input {
  min-width: 0;
}

.calendar-mark-field--label {
  min-width: 140px;
}

@media (max-width: 1200px) {
  .calendar-mark-row {
    grid-template-columns: 1fr 1fr;
  }
  .calendar-mark-field--label {
    grid-column: 1 / -1;
  }
  .calendar-widget-layout--right {
    flex-direction: column;
  }
  .cal-legend-wrap--right {
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.3);
    padding-left: 0;
    padding-top: 8px;
    width: auto;
  }
}

.preview-widget--webPage {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 22px;
}

.web-page-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 6px;
}

.web-page-wrap {
  flex: 1;
  min-height: 120px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.08);
  border: none;
}

.web-page-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.web-page-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #64748b;
}

.web-page-placeholder {
  margin: 0;
  padding: 16px 8px;
  text-align: center;
  font-size: 0.86rem;
  color: #64748b;
}

.preview-widget--videoEmbed {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 22px;
}

.video-embed-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.video-embed-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 140px;
  border-radius: 10px;
  overflow: hidden;
  background: #0f172a;
}

.video-embed-wrap::before {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}

.video-embed-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed-placeholder {
  margin: 0;
  padding: 20px 12px;
  text-align: center;
  font-size: 0.86rem;
  color: #64748b;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-widget--gifWidget {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 22px;
}

.gif-widget-inner {
  flex: 1;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.06);
}

.gif-widget-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.gif-widget-placeholder {
  margin: 0;
  padding: 16px;
  text-align: center;
  font-size: 0.86rem;
  color: #64748b;
}

.widget-settings-note {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--lp-muted);
}

.task-widget-settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lp-border);
}

.task-widget-settings-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.task-settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.task-settings-field--grow {
  flex: 1 1 160px;
  min-width: 140px;
}

.task-settings-field--check {
  flex: 1 1 100%;
  min-width: 200px;
}

.task-settings-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lp-text);
  cursor: pointer;
}

.task-settings-check input {
  width: auto;
  margin: 0;
}

.task-settings-field > span:first-child {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--lp-muted);
}

.task-settings-field input,
.task-settings-field select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  font-size: 0.85rem;
  background: #fff;
  color: var(--lp-text);
}

.task-remove-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  background: #fff;
  cursor: pointer;
  font-size: 0.82rem;
  align-self: center;
}

.task-remove-btn:hover {
  background: var(--lp-accent-soft);
  border-color: rgba(37, 99, 235, 0.35);
}

.notes-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: #f8fafc;
}

.notes-toolbar-btn {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--lp-text);
}

.notes-toolbar-btn:hover {
  background: var(--lp-accent-soft);
  border-color: rgba(37, 99, 235, 0.35);
}

.notes-font-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lp-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.notes-font-select {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  font-size: 0.85rem;
  background: #fff;
}

.notes-font-label .widget-setting-input {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  font-size: 0.85rem;
  background: #fff;
  max-width: 160px;
}

.notes-emoji-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.notes-emoji-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  background: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.notes-emoji-btn:hover {
  background: var(--lp-accent-soft);
}

.notes-rich-editor {
  min-height: 140px;
  max-height: 280px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: #fff;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--lp-text);
}

.notes-rich-editor:focus {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 1px;
}

.widget-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(37, 99, 235, 0.4);
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: move;
  touch-action: none;
}

.widget-handle .widget-move-icon {
  display: block;
}

.widget-resize-handle {
  touch-action: none;
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #334155;
  background: #e2e8f0;
  border-radius: 6px;
  cursor: nwse-resize;
  color: #0f172a;
}

.preview-logo-resize-handle {
  touch-action: none;
  right: 6px;
  bottom: 6px;
}

.widget-resize-handle:hover {
  background: #f1f5f9;
  border-color: #475569;
}

.widget-resize-handle .widget-resize-icon {
  display: block;
}

.news-source-label {
  display: block;
  margin-top: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--lp-muted);
}

.news-source-select {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: #fff;
  color: var(--lp-text);
  font-size: 0.95rem;
}

.widget-settings-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.widget-settings-card {
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  padding: 10px;
  background: #f8fafc;
}

.widget-settings-card h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.setting-row {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8rem;
  color: var(--lp-muted);
}

.setting-row--checkbox .setting-row-checkbox-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
  font-weight: 500;
  color: var(--lp-text);
  cursor: pointer;
}

.setting-row--checkbox input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: auto;
}

.setting-row input,
.setting-row select,
.setting-row textarea {
  width: 100%;
  margin-top: 4px;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  background: #fff;
  font-size: 0.95rem;
  color: var(--lp-text);
}

.setting-row textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

/* Filknapp i widget-innstillinger (samme uttrykk som logo / Velg PNG) */
.setting-row--file .setting-row-file-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--lp-text);
}

.widget-settings-file-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  isolation: isolate;
}

.widget-settings-file-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(37, 99, 235, 0.3);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.1));
  color: #1e3a8a;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

/* Søsken-mønster: synlig label under, fil-input over — unngå dobbel klikk-treff */
.widget-settings-section .chart-widget-file-wrap .widget-settings-file-btn {
  pointer-events: none;
  user-select: none;
}

.widget-settings-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0 !important;
  line-height: 0;
  color: transparent;
  z-index: 2;
  border: 0;
  background: transparent;
  box-shadow: none;
  appearance: none;
  pointer-events: auto;
}

/* Skjul nettleserens «Choose file» / «No file chosen» — kun egendefinert knapp vises */
.editor-bakgrunn-file-input::file-selector-button,
.widget-settings-file-input::file-selector-button {
  display: none;
}

.editor-bakgrunn-file-input::-webkit-file-upload-button,
.widget-settings-file-input::-webkit-file-upload-button {
  display: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

.widget-settings-file-wrap:hover .widget-settings-file-btn {
  border-color: rgba(37, 99, 235, 0.55);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(124, 58, 237, 0.18));
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
  transform: translateY(-1px);
}

.widget-settings-file-wrap:focus-within .widget-settings-file-btn {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

.widget-settings-section .setting-row--file .widget-settings-file-input {
  max-width: none;
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.setting-row--widget-align-edge {
  margin-bottom: 10px;
}

.setting-row-align-edge-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--lp-text);
}

.widget-align-edge-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-widget-align-edge {
  flex: 1 1 auto;
  min-width: 120px;
}

.widget-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Innhold i fullskjerm-topplaget: modal må være etterkommer av #previewFrame. */
#previewFrame > .widget-settings-backdrop {
  position: absolute;
  z-index: 5000;
}

.widget-settings-backdrop[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* backdrop-filter kan gi feil treffflate på enkelte TV-GPU-er; bruk solid bakgrunn i stedet. */
@media (hover: none) {
  .widget-settings-backdrop:not([hidden]) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.72);
  }

  .modal-backdrop:not([hidden]) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.6);
  }
}

.widget-settings-panel {
  width: min(480px, calc(100vw - 40px));
  max-width: 100%;
  max-height: min(90vh, 640px);
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--lp-border);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  box-sizing: border-box;
}

.widget-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--lp-border);
}

.widget-settings-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--lp-text);
}

.widget-settings-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: #f1f5f9;
  color: var(--lp-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.widget-settings-close:hover {
  background: #e2e8f0;
}

#widgetSettingsBody {
  padding: 0;
  overflow-x: hidden;
  min-width: 0;
  max-width: 100%;
}

.widget-settings-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 20px;
  overflow-x: hidden;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.widget-settings-section {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(248, 250, 252, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  min-width: 0;
  max-width: 100%;
  /* Ikke overflow-x: hidden her — klippet handlingsknapper i tabeller (f.eks. kart). */
  overflow-x: visible;
}

.widget-settings-section--options {
  background: rgba(255, 255, 255, 0.75);
}

.widget-settings-section-title {
  margin: 0 0 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #334155;
}

.widget-settings-section-subtitle {
  margin: 14px 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.widget-settings-section-subtitle:first-child {
  margin-top: 0;
}

.widget-settings-section-subtitle--tight {
  margin: 0 0 8px;
}

.widget-settings-section-subtitle--list {
  margin: 14px 0 8px;
}

.widget-settings-section .setting-row:last-child {
  margin-bottom: 0;
}

.widget-settings-section .widget-settings-note:last-child {
  margin-bottom: 0;
}

.widget-settings-section .widget-settings-note {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #475569;
}

.widget-settings-section .notes-editor-toolbar {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(148, 163, 184, 0.28);
}

.widget-settings-section .team-settings-quick-add {
  background: rgba(255, 255, 255, 0.7);
  border-style: solid;
  border-color: rgba(148, 163, 184, 0.28);
}

.widget-settings-section .calendar-marks-wrap,
.widget-settings-section .calendar-holiday-tools {
  border-top-color: rgba(148, 163, 184, 0.22);
}

.widget-settings-section .task-settings-rows-wrap {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.55);
}

.widget-settings-section .task-widget-settings-row {
  border-bottom-color: rgba(148, 163, 184, 0.2);
}

.widget-settings-section .notes-bg-setting-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.widget-settings-section .notes-bg-setting-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

/* Ingen horisontal scrolling i widget-innstillinger: stable felt under smal bredde */
.widget-settings-section .setting-row input,
.widget-settings-section .setting-row select,
.widget-settings-section .setting-row textarea {
  max-width: 100%;
  box-sizing: border-box;
}

.widget-settings-section .calendar-mark-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  align-items: end;
  min-width: 0;
}

.widget-settings-section .calendar-mark-active {
  grid-column: 1 / -1;
}

.widget-settings-section .calendar-mark-field {
  min-width: 0;
}

.widget-settings-section .calendar-mark-field--label {
  grid-column: 1 / -1;
  min-width: 0;
}

.widget-settings-section .calendar-mark-remove {
  grid-column: 1 / -1;
  justify-self: end;
}

.widget-settings-section .project-item-row {
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0;
}

.widget-settings-section .project-item-row > * {
  min-width: 0;
}

.widget-settings-section .clock-loc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.widget-settings-section .clock-loc-label {
  flex: 1 1 10rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-settings-section .clock-loc-tz {
  flex: 1 1 100%;
  min-width: 0;
}

.widget-settings-section .clock-loc-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.widget-settings-section .weather-geocode-row {
  width: 100%;
  min-width: 0;
}

.widget-settings-section .weather-geocode-query-input,
.widget-settings-section .clock-geocode-query-input,
.widget-settings-section .map-geocode-query-input {
  flex: 1 1 100%;
  min-width: 0;
}

.widget-settings-section .budget-cat-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.widget-settings-section .budget-cat-table .budget-cat-actions {
  min-width: 6.75rem;
  justify-content: flex-end;
}

.widget-settings-section .calendar-marks-head {
  flex-wrap: wrap;
}

.widget-settings-section .calendar-marks-title {
  min-width: 0;
  flex: 1 1 12rem;
}

.widget-settings-section .calendar-marks-head .btn-primary {
  flex-shrink: 0;
}

/* Kart: punkttabell — colgroup + fast handlingskolonne (3 knapper synlige, ikke avkuttet) */
.widget-settings-section .map-point-table-wrap {
  max-width: 100%;
  margin-bottom: 8px;
  overflow: visible;
}

.widget-settings-section .map-points-table.budget-cat-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  box-sizing: border-box;
}

.widget-settings-section .map-points-table .map-col-idx {
  width: 1.75rem;
}

/* Gate, by, adresse — tekstfelt; verdi smal; forklaring fleksibel */
.widget-settings-section .map-points-table .map-col-street {
  width: 18%;
  min-width: 0;
}

.widget-settings-section .map-points-table .map-col-city {
  width: 14%;
  min-width: 0;
}

.widget-settings-section .map-points-table .map-col-addr {
  width: 18%;
  min-width: 0;
}

.widget-settings-section .map-points-table .map-col-val {
  width: 8%;
}

.widget-settings-section .map-points-table .map-col-cap {
  width: auto;
  min-width: 0;
}

.widget-settings-section .map-points-table .map-point-street,
.widget-settings-section .map-points-table .map-point-city,
.widget-settings-section .map-points-table .map-point-address {
  display: block;
  width: 100%;
  min-width: 0;
}

/* Tre knapper à 32px + mellomrom — reserver alltid nok bredde (ikke avkutt fjern) */
.widget-settings-section .map-points-table .map-col-act {
  width: 8rem;
  min-width: 8rem;
}

.widget-settings-section .map-points-table thead th {
  font-size: 0.65rem;
  padding: 6px 3px;
  line-height: 1.25;
  word-wrap: break-word;
  hyphens: auto;
}

.widget-settings-section .map-points-table tbody td {
  padding: 5px 3px;
  vertical-align: middle;
}

.widget-settings-section .map-points-table .map-point-cell-index {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

.widget-settings-section .map-points-table .map-point-th-actions,
.widget-settings-section .map-points-table .map-point-cell-actions {
  width: 8rem;
  min-width: 8rem;
  max-width: 8rem;
  padding-left: 4px;
  padding-right: 4px;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}

.widget-settings-section .map-points-table .map-point-order-actions {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  width: 100%;
}

.widget-settings-section .map-points-table .map-point-cell-actions .budget-action-btn {
  flex: 0 0 auto;
  min-width: 32px !important;
  width: 32px;
  height: 32px;
  padding: 0;
  box-sizing: border-box;
}

.widget-settings-section .map-points-table td:not(.map-point-cell-actions) input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 5px 5px;
  font-size: 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
}

.widget-settings-section .map-points-table td:not(.map-point-cell-actions) input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.image-url-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--lp-muted);
}

.image-url-input {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--lp-border);
  font-size: 1rem;
}

.config-banner {
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(234, 179, 8, 0.45);
  background: rgba(254, 252, 232, 0.95);
  color: #854d0e;
  font-size: 0.95rem;
  text-align: center;
}

/* Modal — lys */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal-backdrop[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.modal {
  width: min(440px, 100%);
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--lp-shadow);
}

.modal h2 {
  margin: 0 0 16px;
  font-size: 1.35rem;
  color: var(--lp-text);
}

.modal-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.modal-tabs button {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: #f8fafc;
  color: var(--lp-text);
  cursor: pointer;
}

.modal-tabs button.active {
  border-color: rgba(37, 99, 235, 0.45);
  background: var(--lp-accent-soft);
  color: #1d4ed8;
  font-weight: 600;
}

.modal label {
  display: block;
  margin: 10px 0 6px;
  font-size: 0.92rem;
  color: var(--lp-muted);
}

.modal input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: #fff;
  color: var(--lp-text);
}

.modal .row-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.modal .row-actions button {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: #f8fafc;
  color: var(--lp-text);
  cursor: pointer;
}

.modal .row-actions button.primary {
  background: linear-gradient(135deg, #2563eb, #6366f1);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

.google-signin {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: #fff;
  color: #1f1f1f;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.google-signin svg {
  width: 18px;
  height: 18px;
}

.auth-method-step {
  min-height: 1px;
}

.auth-method-prompt {
  margin: 0 0 14px;
  font-size: 0.95rem;
  color: var(--lp-muted);
  line-height: 1.4;
}

.auth-method-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-auth-email {
  width: 100%;
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: #f8fafc;
  color: var(--lp-text);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

.btn-auth-email:hover {
  background: #f1f5f9;
}

.auth-back {
  display: block;
  margin: 0 0 12px;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: #2563eb;
  cursor: pointer;
  font-size: 0.92rem;
  text-align: left;
}

.auth-back:hover {
  text-decoration: underline;
}

.auth-status {
  margin-top: 12px;
  font-size: 0.92rem;
  color: #b91c1c;
  min-height: 1.2em;
}

/* --- Ny sideinndeling: markedsføring, rediger, fremvisning --- */

.landing--home {
  min-height: 100vh;
}

.landing-shell--marketing {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 48px;
}

.landing-header--marketing {
  justify-content: space-between;
}

/* Lengre etikett enn «TV»; tillat linjeskift i smal toppmeny */
.landing-header--marketing .home-tv-qr-nav {
  max-width: 11.5rem;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  padding: 8px 10px;
  font-size: 0.86rem;
}

.landing-marketing {
  padding-top: 32px;
}

.landing-hero {
  text-align: center;
  padding: 24px 0 40px;
}

.landing-hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--lp-muted);
  margin: 0 0 12px;
}

.landing-hero-title {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--lp-text);
}

.landing-hero-lead {
  max-width: 640px;
  margin: 0 auto 24px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--lp-muted);
}

.landing-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.btn-lg {
  padding: 12px 22px;
  font-size: 1rem;
}

.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.landing-feature-card {
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--lp-border);
  background: rgba(255, 255, 255, 0.6);
}

.landing-feature-card h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.landing-feature-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--lp-muted);
}

.landing-shell--show {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 56px;
  position: relative;
  z-index: 1;
}

.landing-header--editor {
  justify-content: space-between;
  align-items: center;
}

.editor-nav-link {
  text-decoration: none;
}

/* Editor: oversikt før redigering */
.editor-hub {
  margin-top: 0;
  padding-top: 1cm;
  display: block;
}

.editor-hub-block {
  width: 100%;
  background: var(--lp-card);
  border-radius: 20px;
  border: 1px solid var(--lp-border);
  box-shadow: var(--lp-shadow);
  padding: 22px 22px 24px;
}

/* Forhåndsvisning/rediger ligger som egen blokk under «Mine infoskjermer» */
.page-editor #editorWorkArea.editor-work-area:not([hidden]) {
  margin-top: 1.25rem;
}

.editor-hub-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.editor-hub-heading--inline {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* «Lag ny infoskjerm» under den hvite hub-boksen */
.editor-hub-create-below {
  display: flex;
  justify-content: center;
  margin-top: 1.125rem;
  padding: 0 6px 2px;
}

.editor-hub-new-btn {
  flex: 0 1 auto;
  white-space: nowrap;
  min-height: 44px;
  padding: 12px 28px;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  max-width: min(100%, 22rem);
  box-sizing: border-box;
  text-align: center;
  line-height: 1.25;
}

@media (max-width: 380px) {
  .editor-hub-new-btn {
    white-space: normal;
    padding: 11px 20px;
    max-width: 100%;
  }
}

.editor-hub-heading {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--lp-text);
}

.editor-hub-lead {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--lp-muted);
}

/* #editorHubList: horisontal scrollbar-liste med små kort (ikke samme grid som fremvisning). */

.editor-hub-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 14px;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.editor-hub-strip .show-pres-card {
  flex: 0 0 auto;
  width: 132px;
  border-radius: 10px;
}

.editor-hub-fs-live-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(220, 38, 38, 0.92);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
  pointer-events: none;
}

.editor-hub-strip .show-pres-card-footer {
  padding: 6px 8px 8px;
  gap: 6px;
}

.editor-hub-strip .show-pres-card-title-row {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.editor-hub-strip .show-pres-card-title {
  font-size: 0.72rem;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editor-hub-strip .editor-hub-card-meta-line {
  margin: 0 0 4px;
  font-size: 0.65rem;
}

.editor-hub-strip .btn-editor-hub-open {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 6px;
  font-size: 0.68rem;
}

.editor-hub-strip .editor-hub-card-play-delete-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.editor-hub-strip .btn-hub-play-fs {
  min-height: 30px;
}

.editor-hub-strip .editor-hub-delete-icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  align-self: center;
  border-radius: 8px;
}

.editor-hub-strip .editor-hub-delete-icon-btn .editor-hub-delete-icon {
  display: block;
}

.editor-hub-strip .editor-hub-empty {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
}

.editor-hub-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--lp-muted);
  line-height: 1.45;
}

.editor-hub-card-meta-line {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--lp-muted);
}

.show-pres-card-meta-date {
  display: inline;
}

.btn-editor-hub-open {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: rgba(248, 250, 252, 0.98);
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
}

.btn-editor-hub-open:hover {
  background: #fff;
  border-color: rgba(37, 99, 235, 0.45);
  color: #1d4ed8;
}

.editor-hub-card-play-delete-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.btn-hub-play-fs {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}

.btn-hub-play-fs:hover {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.22);
}

.btn-hub-play-fs__icon {
  display: block;
}

.editor-hub-delete {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(185, 28, 28, 0.35);
  background: rgba(254, 242, 242, 0.9);
  color: #b91c1c;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.editor-hub-delete:hover {
  background: rgba(254, 226, 226, 1);
  border-color: rgba(185, 28, 28, 0.55);
}

.editor-hub-delete-icon-btn {
  line-height: 0;
}

.editor-work-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 18px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.editor-work-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 12px;
  justify-self: end;
  min-width: 0;
}

.editor-work-head-actions .btn-presentation-save {
  margin-left: 0;
}

.editor-cancel-btn {
  font-size: 0.9rem;
  font-weight: 700;
  border-color: rgba(185, 28, 28, 0.45);
  background: rgba(254, 242, 242, 0.95);
  color: #b91c1c;
}

.editor-cancel-btn:hover {
  background: rgba(254, 226, 226, 1);
  border-color: rgba(185, 28, 28, 0.6);
  color: #991b1b;
}

.editor-head-spacer {
  min-width: 0;
}

.editor-head-save {
  justify-self: center;
  width: 100%;
  max-width: min(100%, 560px);
  padding: 4px 0 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.editor-head-save-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  width: 100%;
  min-width: 0;
}

.editor-head-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.editor-head-title-text {
  margin: 0;
  padding: 4px 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lp-text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-head-title-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lp-text);
  line-height: 1.25;
  padding: 4px 10px;
  margin: 0;
  border: 1px solid rgba(37, 99, 235, 0.45);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.editor-head-title-input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.75);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.editor-head-rename-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--lp-border);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.95);
  color: #475569;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.editor-head-rename-btn:hover {
  background: #fff;
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.editor-head-rename-icon {
  display: block;
}

.editor-head-title-text--unsaved {
  font-weight: 600;
  color: rgba(15, 23, 42, 0.55);
}

.editor-presentation-bar--clean {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.editor-head-save.editor-presentation-bar--clean + .editor-work-head-actions .btn-presentation-save {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.editor-work-head-actions--clean .btn-presentation-save:disabled,
.editor-work-head-actions--clean .btn-presentation-save[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(248, 250, 252, 0.95);
  color: #94a3b8;
}

.editor-work-head-actions--dirty .btn-presentation-save:not(:disabled) {
  border-color: rgba(217, 119, 6, 0.75);
  background: linear-gradient(180deg, #fff7ed, #ffedd5);
  color: #c2410c;
}

.editor-work-head-actions--dirty .btn-presentation-save:not(:disabled):hover {
  background: #fed7aa;
}

.editor-head-save.editor-presentation-bar--dirty + .editor-work-head-actions .btn-presentation-save:not(:disabled) {
  border-color: rgba(217, 119, 6, 0.75);
  background: linear-gradient(180deg, #fff7ed, #ffedd5);
  color: #c2410c;
}

.editor-head-save.editor-presentation-bar--dirty + .editor-work-head-actions .btn-presentation-save:not(:disabled):hover {
  background: #fed7aa;
}

.editor-cancel-btn.editor-head-action--muted {
  opacity: 0.55;
  border-color: rgba(148, 163, 184, 0.4);
  background: rgba(248, 250, 252, 0.9);
  color: #64748b;
}

.editor-cancel-btn.editor-head-action--muted:hover {
  opacity: 0.8;
  background: rgba(241, 245, 249, 0.95);
  border-color: rgba(148, 163, 184, 0.55);
  color: #475569;
}

.editor-work-head-actions--dirty .editor-cancel-btn:not(.editor-head-action--muted) {
  opacity: 1;
  border-color: rgba(185, 28, 28, 0.45);
  background: rgba(254, 242, 242, 0.95);
  color: #b91c1c;
}

.editor-work-head-actions--dirty .editor-cancel-btn:not(.editor-head-action--muted):hover {
  background: rgba(254, 226, 226, 1);
  border-color: rgba(185, 28, 28, 0.6);
  color: #991b1b;
}

.btn-presentation-save {
  flex-shrink: 0;
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(37, 99, 235, 0.45);
  background: linear-gradient(180deg, #fff, rgba(239, 246, 255, 0.95));
  color: #1d4ed8;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.btn-presentation-save:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.65);
}

@media (max-width: 720px) {
  .editor-work-head {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .editor-head-save {
    justify-self: stretch;
    max-width: none;
    order: 1;
  }

  .editor-work-head-actions {
    order: 2;
    justify-content: flex-end;
  }

  .editor-head-spacer {
    display: none;
  }
}

.editor-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--lp-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.92));
}

.editor-preview-toolbar-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  flex: 0 0 auto;
}

.editor-toolbar-bakgrunn-wrap {
  position: relative;
  flex: 0 0 auto;
}

.editor-toolbar-design-wrap {
  position: relative;
  flex: 0 0 auto;
}

.editor-design-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.editor-design-fieldset {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.92);
}

.editor-design-legend {
  padding: 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
}

.editor-design-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.85rem;
  color: #0f172a;
  cursor: pointer;
}

.editor-design-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #64748b;
  text-wrap: balance;
}

.editor-design-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.editor-design-panel.editor-bakgrunn-panel {
  min-width: min(92vw, 400px);
}

.editor-design-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #fff;
  font-size: 0.82rem;
  color: #0f172a;
}

.editor-design-row-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-design-mode-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 7.5rem;
  max-width: 11rem;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  font-size: 0.8rem;
  background: #fff;
  color: #0f172a;
}

.editor-design-row--color .editor-design-color-wrap {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.editor-design-row--color .editor-design-mode-select {
  max-width: 10.5rem;
}

.editor-design-color-input {
  flex: 0 0 auto;
  width: 36px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.editor-design-color-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.editor-toolbar-design-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #64748b;
}

.editor-toolbar-pill:hover .editor-toolbar-design-icon {
  color: #2563eb;
}

.editor-toolbar-design-svg {
  display: block;
}

.editor-toolbar-design-wrap--fs {
  position: relative;
}

.editor-toolbar-pill--fs {
  background: rgba(15, 23, 42, 0.88);
  border-color: rgba(148, 163, 184, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.editor-toolbar-pill--fs:hover {
  border-color: rgba(59, 130, 246, 0.55);
  background: rgba(30, 41, 59, 0.95);
}

.editor-toolbar-pill--fs .editor-toolbar-pill-text {
  color: #e2e8f0;
}

.editor-toolbar-pill--fs .editor-toolbar-design-icon {
  color: #94a3b8;
}

.editor-toolbar-pill--fs:hover .editor-toolbar-design-icon {
  color: #bfdbfe;
}

.editor-toolbar-pill--fs .editor-toolbar-pill-trigger--icon {
  color: #94a3b8;
}

.editor-toolbar-pill--fs:hover .editor-toolbar-pill-trigger--icon {
  color: #e2e8f0;
}

.editor-toolbar-design-wrap--fs .editor-bakgrunn-panel {
  left: auto;
  right: 0;
  z-index: 55;
}

.editor-design-apply {
  width: 100%;
  margin-top: 2px;
}

.editor-bakgrunn-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 12;
  min-width: 300px;
  max-width: min(92vw, 420px);
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--lp-border);
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.editor-bakgrunn-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.editor-bakgrunn-header {
  margin: 0;
  padding: 0 2px;
}

.editor-bakgrunn-panel-title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #334155;
}

.editor-bakgrunn-section {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(248, 250, 252, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.editor-bakgrunn-section-title {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #334155;
}

.editor-bakgrunn-hint {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #64748b;
}

.editor-bakgrunn-color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.editor-bakgrunn-hex-input {
  flex: 1 1 140px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  font-size: 0.95rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #0f172a;
  box-sizing: border-box;
}

.editor-bakgrunn-hex-input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.editor-bakgrunn-color-swatch {
  width: 52px;
  height: 44px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  cursor: pointer;
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
}

.editor-bakgrunn-color-swatch:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.5);
  outline-offset: 2px;
}

.editor-bakgrunn-logo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.editor-bakgrunn-file-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  position: relative;
  isolation: isolate;
}

.editor-bakgrunn-file-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(37, 99, 235, 0.3);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.1));
  color: #1e3a8a;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.editor-bakgrunn-file-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0 !important;
  line-height: 0;
  color: transparent;
  border: 0;
  background: transparent;
  appearance: none;
  pointer-events: auto;
}

.editor-bakgrunn-file-wrap:hover .editor-bakgrunn-file-btn {
  border-color: rgba(37, 99, 235, 0.55);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(124, 58, 237, 0.18));
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
  transform: translateY(-1px);
}

.editor-bakgrunn-file-wrap:focus-within .editor-bakgrunn-file-btn {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

.editor-bakgrunn-remove-logo {
  flex: 0 0 auto;
  white-space: nowrap;
}

.geo-status--bakgrunn-panel {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  border-radius: 10px;
  color: #475569;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.geo-status--bakgrunn-panel:empty {
  display: none;
}

.editor-toolbar-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--lp-border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
}

.editor-toolbar-pill:hover {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.04);
}

.editor-toolbar-pill-text {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lp-muted);
}

label.editor-toolbar-pill-text {
  cursor: pointer;
  user-select: none;
}

.editor-toolbar-select {
  margin: 0;
  padding: 4px 28px 4px 4px;
  border: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M8 10l4 4 4-4H8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--lp-text);
  cursor: pointer;
  appearance: none;
  min-width: 3.25rem;
}

.editor-toolbar-pill-trigger {
  margin: 0;
  padding: 4px 8px 4px 4px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--lp-text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  max-width: min(52vw, 280px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-toolbar-pill-trigger:hover {
  color: #1d4ed8;
}

.editor-toolbar-pill-trigger:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 1px;
}

.editor-toolbar-pill-trigger--icon {
  padding: 4px 10px;
  min-width: 2.25rem;
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1;
}

.editor-toolbar-pill-trigger--icon:hover {
  color: #1d4ed8;
}

.preview-toolbar-extras {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.editor-undo-btn {
  flex-shrink: 0;
  font-size: 0.9rem;
}

.editor-undo-btn--fs {
  padding: 8px 12px;
  font-size: 0.82rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.editor-undo-btn--fs:hover:not(:disabled) {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(96, 165, 250, 0.55);
  color: #fff;
}

.editor-undo-btn--fs:disabled {
  opacity: 0.38;
}

.preview-widget-drag-guide {
  position: absolute;
  pointer-events: none;
  z-index: 2600;
  box-sizing: border-box;
}

.preview-widget-drag-guide--v {
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(96, 165, 250, 0.95);
  transform: translateX(-0.5px);
}

.preview-widget-drag-guide--h {
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed rgba(96, 165, 250, 0.95);
  transform: translateY(-0.5px);
}

.preview-toolbar-above-preview {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.preview-toolbar-above-preview .preview-add-widget-types {
  left: 0;
  right: auto;
}

.preview-settings-quick-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.preview-toolbar-add--in-panel {
  position: relative;
}

.editor-unsaved-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.editor-unsaved-nav-dialog {
  width: 100%;
  max-width: 420px;
  padding: 22px 24px 20px;
  border-radius: 16px;
  border: 1px solid var(--lp-border);
  background: #fff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.35);
}

.editor-unsaved-nav-title {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lp-text);
}

.editor-unsaved-nav-body {
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #475569;
}

.editor-unsaved-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.editor-unsaved-nav-actions .btn-primary {
  order: -1;
}

@media (max-width: 480px) {
  .editor-unsaved-nav-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .editor-unsaved-nav-actions .btn-primary {
    order: 0;
  }
}

.editor-profile-panel {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--lp-border);
  background: rgba(248, 250, 252, 0.95);
}

.editor-profile-title {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lp-muted);
}

.editor-profile-email {
  margin: 0 0 8px;
  font-weight: 600;
  word-break: break-all;
}

.editor-profile-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--lp-muted);
}

.editor-profile-logout {
  margin-top: 14px;
  width: 100%;
  max-width: 220px;
}

.show-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.show-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.show-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.show-back-link {
  color: var(--lp-muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.show-back-link:hover {
  color: var(--lp-text);
}

.show-title {
  font-weight: 800;
  font-size: 1.1rem;
}

.show-header-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.show-pres-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lp-muted);
}

.show-pres-select {
  min-width: 220px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  font-size: 0.9rem;
}

.show-status {
  margin: 0;
  font-size: 0.88rem;
  color: var(--lp-muted);
}

/*
 * Fremvisning: #previewFrame er vert for fullskjerm. Ikke la en usynlig full-viewport-boks
 * (fixed inset:0) overlappe innholdet når den er inaktiv — på Samsung TV / Tizen blir treffflaten
 * ofte feil selv med pointer-events: none. Flytt rammen utenfor skjermen men behold
 * normal bredde/høyde slik at miniatyr-rendering (previewSlides) fortsatt får dimensjoner.
 */
.page-show .preview-frame--show-fs-host:not(:fullscreen):not(.preview-frame--show-faux-fs):not(.preview-frame--show-fs-entering):not(.show-fs-pin-exit-active) {
  position: fixed;
  left: -100vw;
  top: 0;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  z-index: -1;
  border: none;
}

/* Kort synlig ramme før fullskjerm API (noen nettlesere krever «synlig» mål) */
.page-show .preview-frame--show-fs-host.preview-frame--show-fs-entering:not(:fullscreen) {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2147483645 !important;
}

/* PIN-dialog ved avslutt uten fullskjerm: hold #previewFrame synlig (innholdet ligger inni). */
.page-show .preview-frame--show-fs-host.show-fs-pin-exit-active:not(:fullscreen) {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2147483645 !important;
}

.page-show .preview-frame--show-fs-host:fullscreen,
.page-show .preview-frame--show-fs-host.preview-frame--show-faux-fs {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2147483646;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: #0b1020;
}

.page-show.page-show-faux-fs-active {
  overflow: hidden;
}

.page-show .preview-widget-draggable {
  cursor: default;
  pointer-events: none;
}

.page-show .preview-slides .widget-settings-icon,
.page-show .show-pres-card-preview .widget-settings-icon {
  display: none;
}

/* Fremvisning fullskjerm (show.html): skjul widget-kontroller og «+». Ikke «Rediger i fullskjerm» (editor.html). */
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .widget-head-actions,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .widget-handle,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .widget-resize-handle,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .preview-logo-resize-handle,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .preview-logo-handle,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) [data-empty-add-widget],
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .preview-add-widget,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .widget-settings-icon,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .widget-settings-btn,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .btn-remove-widget,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .widget-remove-btn,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .notes-inline-toolbar,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-widget-settings-row,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .preview-fs-add-widget-wrap,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-preview-remove,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-inline-chip-remove,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-inline-person-input,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-inline-add-btn,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-inline-add-submit-btn,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-inline-add-panel,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-inline-add-actions,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-week-nav-btn,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-remove-btn,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-settings-compact-btn,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-settings-done-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Fremvisning fullskjerm: skjul «Gjentas hver uke» på inline-oppgaver (ikke i editor-fullskjerm) */
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-preview-recurring-wrap,
.page-show #previewFrame:is(:fullscreen, .preview-frame--show-faux-fs) .task-preview-recurring-extra {
  display: none !important;
}

/* Fremvisning fullskjerm: samme kolonne-layout som rediger — stack fyller, chrome nederst i flyt (ikke lag over innhold). */
.page-show #previewFrame:fullscreen .preview-fullscreen-stack,
.page-show #previewFrame.preview-frame--show-faux-fs .preview-fullscreen-stack {
  flex: 1 1 0;
  min-height: 0;
}

.page-show #previewFrame:fullscreen .show-fs-chrome,
.page-show #previewFrame.preview-frame--show-faux-fs .show-fs-chrome {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 12px max(12px, env(safe-area-inset-bottom, 12px));
  background: linear-gradient(180deg, rgba(2, 6, 15, 0.35), rgba(2, 6, 15, 0.94));
  opacity: 1;
  pointer-events: none;
}

.page-show #previewFrame:fullscreen .show-fs-exit-ui,
.page-show #previewFrame.preview-frame--show-faux-fs .show-fs-exit-ui {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, max-height 0.35s ease;
}

.page-show #previewFrame:fullscreen.show-fs-chrome-wake .show-fs-exit-ui,
.page-show #previewFrame.preview-frame--show-faux-fs.show-fs-chrome-wake .show-fs-exit-ui {
  opacity: 1;
  max-height: 120px;
  pointer-events: auto;
}

.page-show #previewFrame:fullscreen .preview-logo-layer,
.page-show #previewFrame.preview-frame--show-faux-fs .preview-logo-layer {
  z-index: 70;
  pointer-events: none;
}

.page-show #previewFrame:fullscreen .preview-logo-box,
.page-show #previewFrame.preview-frame--show-faux-fs .preview-logo-box {
  left: 50% !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: min(28%, 200px) !important;
  height: min(18vh, 100px) !important;
  max-width: min(90vw, 320px);
  pointer-events: none;
}

.page-show .show-fs-exit-ui {
  display: flex;
  justify-content: center;
}

.page-show .show-fs-exit-btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(248, 250, 252, 0.35);
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.page-show .show-fs-exit-btn:hover {
  background: rgba(30, 41, 59, 0.95);
}

.page-show .show-fs-pin-backdrop {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: auto;
}

.page-show .show-fs-pin-backdrop[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.page-show .show-fs-pin-dialog {
  width: min(100%, 320px);
  padding: 20px 18px 18px;
  border-radius: 14px;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #f1f5f9;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.page-show .show-fs-pin-title {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
}

.page-show .show-fs-pin-error {
  margin: -4px 0 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fecaca;
}

.page-show .show-fs-pin-error[hidden] {
  display: none !important;
}

.page-show .show-fs-pin-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  font-size: 1.1rem;
  letter-spacing: 0.35em;
  text-align: center;
  background: #fff;
  color: #0f172a;
}

.page-show .show-fs-pin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.page-show-pair-tv-pending .show-mine-live-push-card {
  display: none !important;
}

.show-mine-tv-aside-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.show-mine-live-push-card .show-live-push-status {
  margin: 10px 0 0;
  min-height: 1.25em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lp-text);
  line-height: 1.35;
}

.show-mine-infoscreens {
  margin-bottom: 8px;
  padding-top: 1cm;
}

.show-mine-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
}

.show-mine-main {
  min-width: 0;
}

@media (min-width: 900px) {
  .show-mine-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: 1.5rem 1.75rem;
    align-items: start;
  }
}

.show-mine-tv-aside {
  min-width: 0;
}

.show-mine-tv-card {
  box-sizing: border-box;
  width: 100%;
  padding: 18px 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--lp-border);
  background: var(--lp-card);
  box-shadow: var(--lp-shadow);
}

.show-mine-tv-lead {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--lp-muted);
}

.show-mine-tv-connect-btn {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

.show-mine-tv-connect-btn:hover,
.show-mine-tv-connect-btn:focus-visible {
  text-decoration: none;
}

/* Mobil → TV: lenke på «Mine infoskjermer» (høyre kolonne på brede skjermer). */
.page-show .show-page-tv-connect-link {
  text-decoration: none;
}

.page-show .show-page-tv-connect-link:not(.show-mine-tv-connect-btn) {
  font-weight: 600;
}

.page-show .show-page-tv-connect-link:not(.show-mine-tv-connect-btn):hover,
.page-show .show-page-tv-connect-link:not(.show-mine-tv-connect-btn):focus-visible {
  text-decoration: underline;
}

.show-mine-heading {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lp-text);
}

.show-live-caption-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #b91c1c;
}

.show-live-caption-row[hidden] {
  display: none !important;
}

.show-live-badge-inline {
  display: inline-flex;
  color: #dc2626;
}

.show-live-icon {
  display: block;
}

.show-live-label {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.show-live-caption-name {
  color: var(--lp-text);
  font-weight: 600;
}

.show-infoscreens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px 18px;
  margin-bottom: 20px;
}

.show-infoscreens-empty {
  margin: 0;
  padding: 16px 14px;
  border-radius: 12px;
  border: 1px dashed var(--lp-border);
  color: var(--lp-muted);
  font-size: 0.9rem;
}

.show-pres-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--lp-border);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.show-pres-card--live {
  border-color: rgba(220, 38, 38, 0.45);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.12), 0 4px 14px rgba(220, 38, 38, 0.08);
}

.show-pres-card-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  overflow: hidden;
}

.show-pres-card-fs-live-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(220, 38, 38, 0.92);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
  pointer-events: none;
}

.show-pres-card-preview {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.show-pres-card-preview-scaler {
  width: 400%;
  height: 400%;
  transform: scale(0.25);
  transform-origin: top left;
  will-change: transform;
}

.show-thumb-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: rgba(248, 250, 252, 0.65);
}

.show-pres-card-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
}

.show-pres-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.show-pres-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-pres-card-title-meta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.show-pres-card-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.95);
  color: #475569;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.45);
}

.show-pres-card-settings:hover {
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.45);
}

.show-pres-card-settings-svg {
  display: block;
}

.show-pres-fs-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.show-pres-fs-settings-backdrop[hidden] {
  display: none !important;
}

.show-pres-fs-settings-dialog {
  width: min(100%, 380px);
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--lp-border);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
  color: var(--lp-text);
}

.show-pres-fs-settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.show-pres-fs-settings-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.show-pres-fs-settings-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--lp-muted);
  padding: 0 4px;
}

.show-pres-fs-settings-close:hover {
  color: var(--lp-text);
}

.show-pres-fs-settings-name {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--lp-text);
}

.show-pres-fs-settings-hint {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--lp-muted);
}

.show-pres-fs-settings-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lp-muted);
}

.show-pres-fs-settings-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 8px;
  border: 1px solid var(--lp-border);
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  text-align: center;
}

.show-pres-fs-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.show-pres-card-live {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b91c1c;
}

.show-pres-card-live-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 5px 9px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: rgba(248, 250, 252, 0.95);
  color: #64748b;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.2);
}

.show-pres-card-live-toggle:hover {
  border-color: rgba(220, 38, 38, 0.45);
  color: #b91c1c;
}

.show-pres-card-live-toggle--on {
  border-color: rgba(220, 38, 38, 0.45);
  background: rgba(254, 242, 242, 0.98);
  color: #b91c1c;
}

.show-pres-card-live-toggle:not(.show-pres-card-live-toggle--on) .show-pres-card-live-dot {
  background: #94a3b8;
  box-shadow: none;
  animation: none;
}

.show-pres-card-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
  animation: show-live-pulse 1.6s ease-in-out infinite;
}

@keyframes show-live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(0.92);
  }
}

.btn-show-pres-fullscreen {
  align-self: stretch;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(37, 99, 235, 0.45);
  background: linear-gradient(180deg, #fff, rgba(239, 246, 255, 0.95));
  color: #1d4ed8;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-show-pres-fullscreen:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.65);
}

.btn-show-pres-play-fs {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  cursor: pointer;
  font: inherit;
}

.btn-show-pres-play-fs:hover {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.22);
}

@media (max-width: 520px) {
  .show-infoscreens-grid {
    grid-template-columns: 1fr;
  }
}

/* LED-ticker (rullende tekst) */
.preview-widget--ledTickerWidget {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Mindre padding slik at lav høyde-% faktisk gir et smalt bånd (ikke spist av 12+14+18px). */
  padding: 4px 8px 6px;
  overflow: hidden;
}

.preview-widget--ledTickerWidget .widget-head {
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
}

.preview-widget--ledTickerWidget .widget-head-actions .widget-settings-btn,
.preview-widget--ledTickerWidget .widget-head-actions .widget-handle,
.preview-widget--ledTickerWidget .widget-head-actions .widget-remove-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}

.preview-widget--ledTickerWidget .widget-head h4 {
  font-size: 0.78rem;
  line-height: 1.15;
}

.preview-widget--ledTickerWidget .led-ticker-widget-inner {
  flex: 1;
  min-height: 0;
}

.led-ticker-widget-inner {
  container-type: size;
  container-name: ledticker;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: stretch;
  border-radius: 10px;
  background: linear-gradient(180deg, #0c120c 0%, #050805 48%, #0a100a 100%);
  border: 1px solid rgba(34, 197, 94, 0.4);
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(0, 0, 0, 0.35);
}

.led-ticker-viewport {
  overflow: hidden;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
}

.led-ticker-track {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  will-change: transform;
  animation: led-ticker-scroll var(--led-duration, 45s) linear infinite;
}

@keyframes led-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.led-ticker-segment {
  display: inline-block;
  flex-shrink: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
  font-size: clamp(0.62rem, min(16cqmin, 12cqh), 3.2rem);
  line-height: 1.15;
  letter-spacing: 0.06em;
  color: #4ade80;
  text-shadow:
    0 0 10px rgba(74, 222, 128, 0.75),
    0 0 2px rgba(255, 255, 255, 0.12),
    0 0 24px rgba(34, 197, 94, 0.35);
  white-space: nowrap;
  padding-right: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
  .led-ticker-track {
    animation: none;
    transform: translateX(0);
  }
}

/* Grafer-widget (Chart.js) */
.preview-widget--chartWidget {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.preview-widget--chartWidget .chart-widget-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chart-widget-body {
  flex: 1;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chart-widget-kind-hint {
  margin: 0;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.25;
}

.chart-widget-canvas-wrap {
  flex: 1;
  min-height: 140px;
  position: relative;
}

.chart-widget-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 140px;
}

.chart-widget-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
  text-align: center;
  padding: 0.5rem;
}

/* Grafer: innstillinger — ikke bruk .budget-cat-tabell (første kolonne er 20px for indeks) */
.widget-settings-section .chart-widget-import-panel {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(248, 250, 252, 0.95);
}

.widget-settings-section .chart-widget-import-title {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.02em;
}

.widget-settings-section .chart-widget-file-wrap {
  margin-bottom: 10px;
}

.widget-settings-section .chart-widget-import-skip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #475569;
  cursor: pointer;
}

.widget-settings-section .chart-widget-import-skip input {
  margin-top: 2px;
  flex-shrink: 0;
}

.widget-settings-section .chart-widget-import-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.22);
  font-size: 0.78rem;
  line-height: 1.45;
  color: #64748b;
}

.widget-settings-section .chart-widget-table-wrap {
  width: 100%;
  min-width: 0;
  margin-bottom: 8px;
  overflow-x: auto;
}

.widget-settings-section .chart-widget-data-table {
  width: 100%;
  min-width: min(100%, 420px);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(248, 250, 252, 0.8);
}

.widget-settings-section .chart-widget-data-table--single col.chart-col-label {
  width: 40%;
}

.widget-settings-section .chart-widget-data-table--single col.chart-col-value {
  width: 52%;
}

.widget-settings-section .chart-widget-data-table--single col.chart-col-actions {
  width: 3.5rem;
}

.widget-settings-section .chart-widget-data-table--dual col.chart-col-label {
  width: 34%;
}

.widget-settings-section .chart-widget-data-table--dual col.chart-col-value {
  width: 28%;
}

.widget-settings-section .chart-widget-data-table--dual col.chart-col-value2 {
  width: 28%;
}

.widget-settings-section .chart-widget-data-table--dual col.chart-col-actions {
  width: 3.5rem;
}

.widget-settings-section .chart-widget-data-table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-align: left;
  color: #334155;
  background: rgba(241, 245, 249, 0.95);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  vertical-align: bottom;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.widget-settings-section .chart-widget-data-table th.chart-widget-th-actions {
  text-align: center;
  vertical-align: middle;
}

.widget-settings-section .chart-widget-data-table .chart-widget-th-actions-inner {
  display: inline-block;
  min-width: 1em;
}

.widget-settings-section .chart-widget-data-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  vertical-align: middle;
}

.widget-settings-section .chart-widget-data-table tbody tr:last-child td {
  border-bottom: none;
}

.widget-settings-section .chart-widget-data-table .chart-widget-row-actions {
  width: auto;
  text-align: center;
  vertical-align: middle;
  padding-left: 6px;
  padding-right: 6px;
}

.chart-widget-data-table .chart-widget-label-input,
.chart-widget-data-table .chart-widget-value-input,
.chart-widget-data-table .chart-widget-value2-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  background: #fff;
}

.chart-widget-data-table .chart-widget-label-input:focus,
.chart-widget-data-table .chart-widget-value-input:focus,
.chart-widget-data-table .chart-widget-value2-input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

/* Kart-widget (Leaflet) */
.preview-widget--mapWidget {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.preview-widget--mapWidget .map-widget-body {
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.map-widget-canvas {
  flex: 1;
  min-height: 220px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(241, 245, 249, 0.9);
}

.map-widget-fallback {
  padding: 12px;
  font-size: 0.82rem;
  color: #64748b;
}

.preview-widget--mapWidget .leaflet-container {
  font: inherit;
  background: #e2e8f0;
}

.map-widget-marker-icon {
  background: transparent !important;
  border: none !important;
}

.map-widget-marker-icon--overview {
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-widget-marker-icon--route {
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-marker-route-stop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 4px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  border: 2px solid rgba(56, 189, 248, 0.65);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
  box-sizing: border-box;
}

.map-marker-route-stop-num {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1;
}

.map-point-table-wrap {
  overflow-x: auto;
  margin-bottom: 8px;
}

.map-points-table {
  min-width: 100%;
}

.map-points-table .map-point-cell-index {
  width: 2.25rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: #64748b;
}

.map-points-table .map-point-cell-actions {
  white-space: nowrap;
  width: 1%;
}

.map-points-table .map-point-order-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.map-points-table td input {
  min-width: 0;
  width: 100%;
  font-size: 0.82rem;
}

.map-point-th-index {
  width: 2.25rem;
}

.map-point-th-actions {
  min-width: 7.5rem;
}

.map-marker-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 6px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  border: 2px solid rgba(148, 163, 184, 0.55);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.4);
  box-sizing: border-box;
}

.map-marker-dot-num {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

.map-marker-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 72px;
  max-width: 160px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.45);
}

.map-marker-label--multi {
  /* Samme uttrykk som enkeltpunkt — gul ramme så ut som feil/advarsel ved flere adresser i samme område */
  border-color: rgba(148, 163, 184, 0.45);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
}

.map-marker-num {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.1;
  max-width: 148px;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.map-marker-cluster-sum {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
  color: rgba(226, 232, 240, 0.88);
  opacity: 0.95;
}

.map-marker-cap {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(226, 232, 240, 0.95);
  text-align: center;
  max-width: 140px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

tr.map-point-row[data-map-point-id] td {
  vertical-align: middle;
}

/* ——— TV-parring (QR), samme skall som rediger ——— */
/* TV koblet med anonym konto: skjul rediger / profil — språk og merke beholdes. */
.tv-pair-anon-ui .landing-header-actions > a.editor-nav-link,
.tv-pair-anon-ui #tvPairProfileBtn {
  display: none !important;
}

.tv-pair-anon-ui p.tv-pair-code-fs-hint {
  display: none !important;
}

.page-editor.page-tv-pair .tv-pair-main {
  padding: 0 0 2.5rem;
}

.page-editor.page-tv-pair .tv-pair-card {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
  text-align: center;
  background: var(--lp-card);
  border: 1px solid var(--lp-border);
  border-radius: 20px;
  box-shadow: var(--lp-shadow);
}

.page-editor.page-tv-pair .tv-pair-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--lp-text);
}

.page-editor.page-tv-pair .tv-pair-lead {
  margin: 0 0 1.5rem;
  line-height: 1.5;
  color: var(--lp-muted);
}

.page-editor.page-tv-pair .tv-pair-warn {
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(234, 179, 8, 0.45);
  background: rgba(254, 252, 232, 0.95);
  color: #854d0e;
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: left;
}

.page-editor.page-tv-pair .tv-pair-status {
  color: var(--lp-muted);
}

/* ——— TV: send fra mobil — mørk side. Må overstyre body.landing (ellers lys bakgrunn + mørk tekst = usynlig). ——— */
body.landing.tv-connect-page {
  min-height: 100vh;
  color: #f8fafc;
  background-color: #0f172a;
  background-image: linear-gradient(165deg, #0f172a 0%, #1e1b4b 46%, #0b1120 100%);
}

body.landing.tv-connect-page::before {
  display: none;
}

body.landing.tv-connect-page .tv-connect-shell {
  position: relative;
  z-index: 1;
}

body.landing.tv-connect-page .tv-connect-header a.brand {
  color: #f8fafc;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #f8fafc;
}

body.landing.tv-connect-page .tv-connect-title {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

body.landing.tv-connect-page .tv-connect-status {
  color: #fecdd3;
  font-weight: 600;
}

body.landing.tv-connect-page .tv-connect-lead {
  color: #e2e8f0;
  opacity: 1;
}

body.landing.tv-connect-page .tv-connect-picker-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #f8fafc;
}

body.landing.tv-connect-page .tv-connect-choice {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.landing.tv-connect-page .tv-connect-choice span {
  color: #f1f5f9;
}

body.landing.tv-connect-page .tv-connect-live-hint,
body.landing.tv-connect-page .tv-connect-fs-hint {
  color: #cbd5e1;
  opacity: 1;
}

body.landing.tv-connect-page .tv-connect-register-details {
  color: #e2e8f0;
}

body.landing.tv-connect-page .tv-connect-form-block label {
  color: #e2e8f0;
}

.tv-connect-shell {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}

.tv-connect-header {
  margin-bottom: 1.5rem;
}

.tv-connect-main {
  text-align: center;
  color: #e8ecf4;
}

.tv-connect-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.tv-connect-lead {
  margin: 0 0 1.5rem;
  line-height: 1.5;
  opacity: 0.92;
}

.tv-pair-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}

.tv-pair-qr-dom-mount {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tv-pair-qr-dom {
  display: grid;
  /* Eldre TV-WebKit støtter ofte ikke min() / aspect-ratio — bruk max-width + høyde. */
  width: 72vmin;
  max-width: 320px;
  height: 72vmin;
  max-height: 320px;
  gap: 0;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  box-sizing: border-box;
}

.tv-pair-qr-dom-on {
  background: #0f172a;
}

.tv-pair-qr-dom-off {
  background: #fff;
}

.tv-pair-code-block {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--lp-border);
  background: rgba(248, 250, 252, 0.98);
  text-align: center;
}

.tv-pair-code-label {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--lp-text);
}

.tv-pair-code-digits {
  margin: 0 0 0.85rem;
  font-size: clamp(1.75rem, 6vmin, 2.75rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--lp-text);
}

.tv-pair-code-link-wrap {
  margin: 0 0 0.65rem;
}

.tv-pair-code-link {
  font-weight: 600;
  font-size: 1rem;
  word-break: break-word;
  color: var(--lp-accent, #2563eb);
}

.tv-pair-code-url-wrap {
  margin: 0 0 0.85rem;
  text-align: left;
}

.tv-pair-code-url-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--lp-muted);
}

.tv-pair-code-url-text {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  word-break: break-all;
  color: var(--lp-text);
  -webkit-user-select: all;
  user-select: all;
}

.tv-pair-code-fs-hint {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--lp-muted);
}

.tv-connect-code-gate {
  max-width: 22rem;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.22);
  text-align: left;
}

.tv-connect-code-title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #f8fafc;
}

.tv-connect-code-lead {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.92);
}

.tv-connect-code-input-label {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
  color: rgba(226, 232, 240, 0.9);
}

.tv-connect-code-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.tv-connect-code-input {
  flex: 1 1 8rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #f8fafc;
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.tv-connect-code-btn {
  flex: 0 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.tv-connect-code-hint {
  margin: 0.65rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(203, 213, 225, 0.88);
}

.tv-connect-fs-hint {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(203, 213, 225, 0.88);
}

.tv-pair-qr-fallback {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--lp-border);
  background: rgba(248, 250, 252, 0.96);
  text-align: left;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--lp-text);
  word-break: break-all;
}

.tv-pair-qr-fallback-hint {
  margin: 0 0 0.5rem;
}

.tv-pair-qr-fallback-link {
  color: var(--lp-accent, #2563eb);
  font-weight: 600;
}

.tv-pair-status,
.tv-connect-status {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  min-height: 1.5em;
}

.tv-pair-fs-actions {
  margin-top: 1.25rem;
}

/* Ekte nettleser-fullskjerm (Fullscreen API) på tv-pair.html */
.tv-pair-fs-exit-btn {
  position: fixed;
  z-index: 99999;
  top: max(0.65rem, env(safe-area-inset-top, 0px));
  right: max(0.65rem, env(safe-area-inset-right, 0px));
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--lp-border);
  background: var(--lp-card);
  color: var(--lp-text);
  box-shadow: var(--lp-shadow);
  cursor: pointer;
}

.tv-pair-fs-exit-btn:hover {
  filter: brightness(1.05);
}

body.tv-pair-browser-fs .landing-header {
  display: none;
}

body.tv-pair-browser-fs .tv-pair-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: min(4vh, 2rem) 1rem 2rem;
  box-sizing: border-box;
}

body.tv-pair-browser-fs .tv-pair-card {
  margin: 0 auto;
}

body.tv-pair-browser-fs .tv-pair-qr-dom {
  width: min(76vmin, 420px);
}

.tv-connect-auth {
  text-align: left;
  max-width: 22rem;
  margin: 0 auto 1.5rem;
}

.tv-connect-google {
  width: 100%;
  margin-bottom: 1rem;
  justify-content: center;
}

.tv-connect-form-block label {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.9rem;
}

.tv-connect-form-block input {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.25);
  color: #f1f5f9;
}

.tv-connect-submit {
  width: 100%;
  margin-top: 1rem;
}

.tv-connect-register-details {
  margin-top: 1rem;
  color: rgba(232, 236, 244, 0.9);
}

.tv-connect-register-details summary {
  cursor: pointer;
  font-weight: 600;
}

.tv-connect-picker {
  text-align: left;
  max-width: 28rem;
  margin: 0 auto;
}

.tv-connect-radios {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.tv-connect-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.tv-connect-live-hint {
  font-size: 0.85rem;
  opacity: 0.85;
  margin: 0.5rem 0 1rem;
  line-height: 1.4;
}

/*
 * TV-parring (?pair=): #previewFrame er ellers plassert utenfor viewport til fullskjerm aktiveres —
 * da ser TV-en nesten bare «Send infoskjerm til TV» / tom lys bakgrunn. Tving synlig ramme til speilet kommer.
 */
body.page-show.page-show-pair-tv-pending .preview-frame--show-fs-host:not(:fullscreen):not(.preview-frame--show-faux-fs):not(.preview-frame--show-fs-entering):not(.show-fs-pin-exit-active),
body.page-show.page-show--pair-tv .preview-frame--show-fs-host:not(:fullscreen):not(.preview-frame--show-faux-fs):not(.preview-frame--show-fs-entering):not(.show-fs-pin-exit-active) {
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 50 !important;
  background: #0b1020;
}

body.page-show.page-show--pair-tv .show-mine-infoscreens {
  display: none !important;
}

body.page-show.page-show--pair-tv .landing-header {
  display: none !important;
}

/* Desktop: skjul hamburger (høyere spesifisitet, sist i filen) */
@media (min-width: 1025px) {
  body.landing .landing-header .landing-nav-toggle {
    display: none !important;
  }
}