body {
  overflow-y: auto;
}

body[data-theme="light"] {
  --ink: #eef2f0;
  --panel: rgba(249, 250, 248, 0.84);
  --panel-strong: #f4f6f4;
  --line: rgba(24, 35, 32, 0.14);
  --text: #16201f;
  --muted: #566866;
  --warm: #8e6a25;
  --cool: #126e79;
  --green: #177449;
  --fog: rgba(14, 29, 27, 0.065);
  color-scheme: light;
  background:
    linear-gradient(118deg, rgba(224, 197, 132, 0.2), transparent 24%),
    linear-gradient(312deg, rgba(100, 207, 204, 0.18), transparent 29%),
    linear-gradient(135deg, #f2f5f3 0%, #e6ecea 100%);
}

.dashboard {
  grid-template-rows: auto auto auto auto;
  min-height: 100svh;
}

.utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.2rem;
}

.utility-mark {
  width: 2.9rem;
  height: 2.9rem;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;
  padding: 0.3rem;
  background: color-mix(in srgb, var(--panel-strong) 86%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}

.utility-actions,
.control-panel header,
.custom-tile header {
  display: flex;
  align-items: center;
}

.utility-actions { gap: 0.6rem; }
.utility-button { font-size: 1.25rem; font-weight: 650; }
.account-identity {
  max-width: min(22vw, 14rem);
  overflow: hidden;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-button {
  min-height: 2.45rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding-inline: 0.85rem;
  background: rgba(224, 197, 132, 0.12);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.control-panel {
  position: fixed;
  top: clamp(4rem, 8vw, 6rem);
  right: clamp(1rem, 2.6vw, 2.5rem);
  z-index: 6;
  display: grid;
  width: min(22rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 6.5rem);
  gap: 0.85rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  background: rgba(12, 15, 15, 0.98);
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.42);
}
.account-panel {
  width: min(25rem, calc(100vw - 2rem));
}
body[data-theme="light"] .control-panel { background: rgba(248, 250, 249, 0.98); }
.control-panel[hidden] { display: none; }
[hidden] { display: none !important; }
.control-panel header,
.custom-tile header { justify-content: space-between; gap: 0.75rem; }
.widget-header-actions,
.weather-heading { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.55rem; }
.widget-header-actions > span,
.weather-heading > span { max-width: min(14rem, 48vw); }
.widget-close {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--fog);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0.72;
}
.widget-close:hover,
.widget-close:focus-visible,
body[data-edit-mode="true"] .widget-close { opacity: 1; }
.widget-grid:has(.weather-card[hidden]) .clock-card,
.widget-grid:has(.clock-card[hidden]) .weather-card { grid-column: 1 / -1; }
[data-widget][draggable="true"] { cursor: grab; }
[data-widget].is-dragging { opacity: 0.58; }
.control-panel label,
.theme-setting,
.profile-form,
.logo-settings label,
.cloud-settings,
.account-form label { display: grid; gap: 0.42rem; color: var(--muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.control-panel select,
.profile-form input,
.profile-form button,
.logo-settings input,
.logo-settings button,
.account-form input,
.account-form button,
.cloud-settings input,
.cloud-settings button,
.tile-options button { min-height: 2.6rem; border: 1px solid var(--line); border-radius: 8px; padding-inline: 0.75rem; background: var(--fog); color: var(--text); font: inherit; }
.control-panel select option { background: #151818; color: #f6f4ec; }
body[data-theme="light"] .control-panel select option { background: #f4f6f4; color: #16201f; }
body[data-theme="light"] .ticker-card,
body[data-theme="light"] .clock-card,
body[data-theme="light"] .weather-card { background: rgba(255, 255, 255, 0.92); }
body[data-theme="light"] .world-city-panel,
body[data-theme="light"] .weather-location-panel {
  border-color: rgba(13, 19, 18, 0.16);
  background: rgba(248, 250, 249, 0.98);
  color: #16201f;
  box-shadow: 0 1.4rem 3rem rgba(13, 19, 18, 0.18);
}
body[data-theme="light"] .world-city-panel .world-city-option,
body[data-theme="light"] .weather-location-panel label,
body[data-theme="light"] .weather-location-panel input,
body[data-theme="light"] .weather-location-panel button {
  color: #16201f;
}
body[data-theme="light"] .world-city-panel .home-city-button {
  background: rgba(13, 19, 18, 0.04);
  color: #5d6d69;
}
body[data-theme="light"] .world-city-panel .home-city-button.is-home,
body[data-theme="light"] .world-city-panel legend,
body[data-theme="light"] .weather-location-panel label {
  color: #8b661e;
}
body[data-theme="light"] .weather-location-panel input {
  background: rgba(13, 19, 18, 0.05);
}
body[data-theme="light"][data-clock-style="station"] .analog-clock { border-color: #111817; background: repeating-conic-gradient(rgba(255, 255, 255, 0.16) 0 2deg, transparent 2deg 30deg), #07100f; box-shadow: 0 1.2rem 2.8rem rgba(13, 19, 18, 0.24); }
body[data-theme="light"][data-clock-style="station"] .analog-face { background: #07100f; }
body[data-theme="light"][data-clock-style="station"] .hour-hand,
body[data-theme="light"][data-clock-style="station"] .minute-hand,
body[data-theme="light"][data-clock-style="station"] .analog-cap { background: #ffffff; }
body[data-theme="light"][data-clock-style="station"] .analog-cap { box-shadow: 0 0 0 0.24rem #07100f; }
body[data-theme="light"] .weather-mark { border-color: rgba(255, 255, 255, 0.1); background: linear-gradient(145deg, rgba(224, 197, 132, 0.2), rgba(255, 255, 255, 0.04)), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 1.15rem), #101615; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22); }
body[data-theme="light"] .weather-mark .cloud { background: #f1f8f6; box-shadow: -1.25rem -0.75rem 0 -0.12rem #f1f8f6, 1rem -1.15rem 0 0.18rem #f1f8f6; }
body[data-theme="light"][data-clock-style="flip"] .flip-card { border-color: rgba(13, 19, 18, 0.36); background: linear-gradient(180deg, rgba(75, 84, 81, 0.98) 0 49%, rgba(9, 16, 15, 0.98) 50% 100%); box-shadow: 0 1.15rem 2.4rem rgba(13, 19, 18, 0.24), inset 0 1px rgba(255, 255, 255, 0.18); color: #f8f7ef; text-shadow: 0 0.16rem 0.4rem rgba(0, 0, 0, 0.46); }
body[data-theme="light"][data-clock-style="flip"] .flip-card::after { border-top-color: rgba(0, 0, 0, 0.68); }
body[data-theme="light"][data-clock-style="flip"] .flip-colon { color: var(--warm); text-shadow: 0 0.2rem 1.2rem rgba(13, 19, 18, 0.18); }
.theme-switch { min-height: 2.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--fog); color: var(--text); cursor: pointer; font: inherit; font-weight: 800; }
.profile-form div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.profile-form button,
.logo-settings button,
.cloud-settings button,
.tile-options button { cursor: pointer; }
.logo-settings { display: grid; gap: 0.48rem; }
.logo-settings > strong { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; }
.logo-settings input { min-width: 0; padding-block: 0.52rem; }
.logo-settings div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.logo-settings .logo-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.logo-settings span { min-width: 0; overflow: hidden; color: var(--text); font-size: 0.84rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.logo-settings button:disabled { cursor: default; opacity: 0.48; }
.logo-library { display: grid; max-height: min(34vh, 18rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; overflow: auto; padding-right: 0.2rem; }
.logo-library[hidden] { display: none; }
.logo-library p { grid-column: 1 / -1; }
.logo-library button { display: grid; min-height: 5.4rem; grid-template-rows: minmax(0, 1fr) auto; gap: 0.35rem; justify-items: center; padding: 0.55rem; }
.logo-library img { max-width: 100%; max-height: 3.2rem; object-fit: contain; }
.logo-library span { width: 100%; text-align: center; }
.account-access { display: grid; gap: 0.85rem; }
.account-access > p:first-child { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.account-form { display: grid; gap: 0.62rem; }
.account-form input {
  min-height: 3rem;
  font-size: 0.98rem;
  font-weight: 700;
  text-transform: none;
}
.account-form input::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
.account-primary,
.account-secondary {
  cursor: pointer;
  font-weight: 800;
}
.account-primary {
  min-height: 3rem;
  margin-top: 0.2rem;
  background: rgba(224, 197, 132, 0.16);
}
.account-secondary {
  color: var(--muted);
  background: transparent;
}
.cloud-settings { padding-top: 0.1rem; }
.cloud-settings strong { color: var(--warm); }
.cloud-settings div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.cloud-settings > button { width: 100%; }
.cloud-settings p { text-transform: none; }
.cloud-settings select { min-height: 2.6rem; border: 1px solid var(--line); border-radius: 8px; padding-inline: 0.75rem; background: var(--fog); color: var(--text); font: inherit; }
.market-panel textarea { width: 100%; min-height: 7rem; resize: vertical; border: 1px solid var(--line); border-radius: 8px; padding: 0.75rem; background: var(--fog); color: var(--text); font: inherit; text-transform: none; }
.market-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.market-actions button { min-height: 2.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--fog); color: var(--text); cursor: pointer; font: inherit; font-weight: 800; }
.control-panel p { margin: 0; color: var(--muted); font-size: 0.82rem; }
.panel-close { width: 2rem; height: 2rem; font-size: 1.35rem; }
.tile-options { display: grid; gap: 0.5rem; }
.tile-options button { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; text-align: left; }
.tile-options button:disabled { cursor: default; opacity: 0.56; }

.ticker-card { grid-template-columns: auto minmax(0, 1fr) auto; }
.ticker-label { border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; font: inherit; text-align: left; text-transform: uppercase; }
.ticker-label:hover { color: var(--cool); }
.ticker-brand { display: grid; width: max-content; max-width: min(34vw, 24rem); min-height: clamp(2.3rem, 4.4vw, 3.6rem); justify-items: end; align-items: center; border: 0; border-left: 1px solid var(--line); padding: 0 0 0 clamp(0.9rem, 1.7vw, 1.4rem); background: transparent; color: var(--muted); cursor: pointer; font: inherit; text-align: right; }
.ticker-brand img { display: block; width: auto; max-width: min(34vw, 24rem); max-height: clamp(2.3rem, 4.4vw, 3.6rem); object-fit: contain; object-position: right center; opacity: 0.98; }
.ticker-logo-placeholder { display: inline-flex; min-height: 2.1rem; align-items: center; border: 1px dashed var(--line); border-radius: 8px; padding-inline: 0.8rem; color: var(--muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.ticker-brand:not(.is-empty) .ticker-logo-placeholder { display: none; }
.ticker-brand:hover .ticker-logo-placeholder { color: var(--text); border-color: color-mix(in srgb, var(--warm) 58%, var(--line)); }
.card-header p span { margin-left: 0.55rem; color: var(--text); font-size: 0.92em; font-weight: 800; text-transform: none; }
.clock-card,
.weather-card { min-height: clamp(26rem, 61vh, 42rem); }
.clock-card::before { position: absolute; inset: 14% 19% 13% 3%; z-index: -1; background: url("./assets/world-map.svg?v=20260522-world-map-2") center / contain no-repeat; content: ""; opacity: 0.34; filter: drop-shadow(0 0 0.9rem rgba(255, 255, 255, 0.08)); }
body[data-theme="light"] .clock-card::before { inset: 12% 23% 16% 4%; opacity: 0.16; filter: brightness(0) drop-shadow(0 0.45rem 1rem rgba(13, 19, 18, 0.08)); }
.clock-layout { align-items: center; padding-top: 0; }
.clock-stage,
.world-rail { justify-content: center; }
.clock-stage { padding-top: 0; }
.world-clock-list { gap: 0.45rem; }
.world-clock { min-height: 2.9rem; padding-block: 0.5rem; cursor: pointer; }
.world-clock:hover,
.world-clock:focus-visible { border-color: color-mix(in srgb, var(--cool) 44%, var(--line)); background: color-mix(in srgb, var(--cool) 9%, var(--fog)); outline: none; }
.weather-card { grid-template-rows: auto auto auto auto; align-content: start; gap: clamp(0.8rem, 1.7vw, 1.35rem); }
.weather-current { min-height: 9.5rem; }
.weather-range > div { min-height: 5.45rem; gap: 0.45rem; padding: 0.72rem 0.85rem; }
.weather-range strong { font-size: 1.72rem; }
.weather-forecast { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; }
.forecast-day { display: grid; min-width: 0; justify-items: center; gap: 0.36rem; border: 1px solid var(--line); border-radius: 8px; padding: 0.52rem 0.28rem; background: rgba(255, 255, 255, 0.045); }
.forecast-day strong,
.forecast-day span { overflow-wrap: anywhere; text-align: center; }
.forecast-day strong { color: var(--muted); font-size: 0.66rem; text-transform: uppercase; }
.forecast-day span { color: var(--text); font-size: 0.72rem; font-variant-numeric: tabular-nums; font-weight: 620; }
.forecast-icon { position: relative; width: 1.7rem; height: 1.35rem; }
.forecast-icon::before { position: absolute; top: 0; right: 0.1rem; width: 0.84rem; aspect-ratio: 1; border-radius: 50%; background: var(--warm); content: ""; }
.forecast-icon::after { position: absolute; right: 0; bottom: 0.08rem; width: 1.35rem; height: 0.62rem; border-radius: 999px; background: #edf3f1; box-shadow: -0.35rem -0.18rem 0 #edf3f1; content: ""; }
.forecast-icon[data-weather="clear"]::after { display: none; }
.forecast-icon[data-weather="rain"] { border-bottom: 0.18rem solid var(--cool); }
.forecast-icon[data-weather="snow"] { border-bottom: 0.18rem dotted var(--text); }
.forecast-icon[data-weather="fog"] { border-bottom: 0.18rem double var(--cool); }

.custom-tiles { display: flex; align-items: stretch; gap: clamp(1rem, 2vw, 1.5rem); }
.custom-tiles:empty { display: none; }
.custom-tile { display: grid; flex: 1 1 0; min-width: 0; min-height: 10rem; align-content: start; gap: 0.8rem; border: 1px solid var(--line); border-radius: 8px; padding: 1rem; background: var(--panel); box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.25); }
.custom-tile[draggable="true"] { cursor: grab; }
.custom-tile.is-dragging { opacity: 0.54; }
.custom-tile p { margin: 0; color: var(--muted); line-height: 1.45; }
.daily-verse { display: grid; gap: 0.65rem; margin: 0; cursor: pointer; }
.daily-verse small { color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0; text-transform: lowercase; }
.daily-verse p { color: var(--text); font-size: clamp(1rem, 1.4vw, 1.22rem); font-weight: 650; line-height: 1.38; }
.daily-verse footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.daily-verse cite { color: var(--warm); font-size: 0.78rem; font-style: normal; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.discover-card { display: grid; gap: 0.75rem; }
.discover-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.discover-kicker span { width: auto; border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.52rem; background: var(--fog); color: var(--muted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.discover-word { justify-self: start; border: 0; padding: 0; background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 850; letter-spacing: 0; text-align: left; }
.discover-word:hover,
.discover-word:focus-visible { color: var(--warm); outline: none; }
.discover-definition { display: grid; gap: 0.65rem; overflow: hidden; }
.discover-definition[hidden] { display: none; }
.discover-definition p { color: var(--text); font-size: clamp(0.98rem, 1.25vw, 1.1rem); font-weight: 620; }
.discover-definition dl { display: grid; gap: 0.45rem; margin: 0; }
.discover-definition dl div { display: grid; gap: 0.16rem; }
.discover-definition dt { color: var(--warm); font-size: 0.66rem; font-weight: 850; text-transform: uppercase; }
.discover-definition dd { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.38; }
.discover-card footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.discover-status { color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.youtube-widget { display: grid; gap: 0.75rem; }
.custom-tile[data-tile="youtube"][data-youtube-size="compact"] { flex: 0 0 clamp(16rem, 22vw, 22rem); min-height: 8rem; }
.custom-tile[data-tile="youtube"][data-youtube-size="medium"] { flex: 0 0 clamp(24rem, 36vw, 34rem); }
.custom-tile[data-tile="youtube"][data-youtube-size="large"] { flex: 1 1 0; }
.custom-tile[data-tile="youtube"][data-youtube-size="compact"] .youtube-player { aspect-ratio: 21 / 9; }
.youtube-subtitle { color: var(--muted); font-size: 0.82rem; }
.youtube-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.youtube-size { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.youtube-size select { min-height: 2rem; border: 1px solid var(--line); border-radius: 8px; background: var(--fog); color: var(--text); font: inherit; font-size: 0.72rem; }
.youtube-body { display: grid; gap: 0.7rem; }
.youtube-setup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; }
.youtube-setup strong,
.youtube-setup p { grid-column: 1 / -1; }
.youtube-setup input { min-height: 2.6rem; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding-inline: 0.75rem; background: var(--fog); color: var(--text); font: inherit; }
.youtube-setup button,
.youtube-controls button,
.youtube-controls select { min-height: 2.25rem; border: 1px solid var(--line); border-radius: 8px; padding-inline: 0.65rem; background: var(--fog); color: var(--text); cursor: pointer; font: inherit; font-size: 0.76rem; font-weight: 800; }
.youtube-player { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #050707; aspect-ratio: 16 / 9; }
.youtube-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.youtube-controls { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.youtube-status { color: var(--muted); font-size: 0.78rem; }
.trustpilot-widget { display: grid; gap: 0.7rem; cursor: pointer; }
.trustpilot-score { display: flex; align-items: baseline; gap: 0.6rem; }
.trustpilot-score strong { color: var(--text); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 0.95; }
.trustpilot-score span { color: var(--cool); font-weight: 800; }
.trustpilot-metrics { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.trustpilot-metrics span { border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.55rem; background: var(--fog); color: var(--muted); font-size: 0.74rem; font-weight: 800; }
.trustpilot-widget[data-trend="improving"] .trustpilot-score span { color: #7fe6a2; }
.trustpilot-widget[data-trend="declining"] .trustpilot-score span { color: #ff6c6c; }
.trustpilot-status { color: var(--muted); font-size: 0.75rem; }
.trustpilot-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem; background: rgba(0, 0, 0, 0.58); }
.trustpilot-dialog { display: grid; width: min(48rem, 100%); max-height: min(88dvh, 48rem); gap: 1rem; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 1rem; background: var(--panel-strong); box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.44); }
.trustpilot-dialog header,
.trustpilot-dialog footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.7rem; }
.trustpilot-dialog header div { display: grid; gap: 0.12rem; }
.trustpilot-dialog header span,
.trustpilot-dialog footer { color: var(--muted); font-size: 0.82rem; }
.trustpilot-dialog button { min-height: 2.1rem; border: 1px solid var(--line); border-radius: 8px; padding-inline: 0.7rem; background: var(--fog); color: var(--text); cursor: pointer; font: inherit; font-weight: 800; }
.trustpilot-detail-score { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 0.7rem; border: 1px solid var(--line); border-radius: 8px; padding: 0.85rem; background: var(--fog); }
.trustpilot-detail-score strong { font-size: 3rem; line-height: 1; }
.trustpilot-detail-score span { color: var(--cool); font-weight: 850; }
.trustpilot-detail-score[data-trend="declining"] span { color: #ff6c6c; }
.trustpilot-detail-score[data-trend="improving"] span { color: #7fe6a2; }
.trustpilot-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.65rem; }
.trustpilot-detail-grid article { display: grid; gap: 0.28rem; border: 1px solid var(--line); border-radius: 8px; padding: 0.75rem; background: var(--fog); }
.trustpilot-detail-grid span { color: var(--muted); font-size: 0.82rem; }
.trustpilot-dialog h3 { margin: 0 0 0.55rem; color: var(--warm); font-size: 0.9rem; text-transform: uppercase; }
.trustpilot-bar { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; align-items: center; gap: 0.55rem; margin-bottom: 0.4rem; color: var(--muted); font-size: 0.8rem; }
.trustpilot-bar i { height: 0.7rem; border-radius: 999px; background: linear-gradient(90deg, var(--cool) var(--bar), var(--fog) var(--bar)); }
.trustpilot-bar b { color: var(--text); text-align: right; }
.verse-next { min-height: 2rem; border: 1px solid var(--line); border-radius: 8px; padding-inline: 0.7rem; background: var(--fog); color: var(--text); cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.tile-remove,
.reveal-button { border: 1px solid var(--line); border-radius: 8px; background: var(--fog); color: var(--text); cursor: pointer; }
.tile-remove { width: 1.8rem; height: 1.8rem; font-size: 1.15rem; }
.reveal-button { min-height: 2.3rem; justify-self: start; padding-inline: 0.7rem; }
.add-widget-tile {
  display: grid;
  flex: 0 0 clamp(7rem, 9vw, 10rem);
  width: clamp(7rem, 9vw, 10rem);
  min-height: 7rem;
  justify-self: end;
  place-items: center;
  border: 0.24rem dotted color-mix(in srgb, var(--text) 86%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  box-shadow: none;
}
.add-widget-tile span {
  display: block;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
}
.add-widget-tile:hover,
.add-widget-tile:focus-visible { border-color: var(--warm); color: var(--warm); outline: none; }
body[data-theme="light"] .add-widget-tile { border-color: #111817; color: #111817; }

@media (max-width: 720px), (max-height: 540px) {
  .ticker-brand { border-top: 1px solid var(--line); border-left: 0; padding-top: 0.85rem; padding-left: 0; }
  .clock-layout { padding-top: 0; }
  .custom-tiles { flex-wrap: wrap; }
  .custom-tile { flex-basis: 100%; }
  .custom-tile[data-tile="youtube"][data-youtube-size] { flex: 1 1 100%; }
  .add-widget-tile { flex: 1 1 100%; width: 100%; min-height: 5.5rem; }
}