:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-seamate-theme="bridge_dark_ops"] {
  --bg: #07131C;
  --bg-2: #102B3D;
  --panel: #102636;
  --panel-2: #15384C;
  --text: #EAF6FB;
  --muted: #9FB8C5;
  --accent: #FF9F43;
  --ok: #2ED573;
  --warning: #FDCB6E;
  --danger: #EF476F;
  --outline: #24536B;
  --scene-glow: rgba(255, 159, 67, 0.28);
  --sea-line: rgba(120, 204, 232, 0.18);
  --paper-grid: rgba(255, 255, 255, 0.04);
}

html[data-seamate-theme="chart_paper_pro"] {
  color-scheme: light;
  --bg: #EDE6D6;
  --bg-2: #F5F0E6;
  --panel: #FBF7EF;
  --panel-2: #F3EBDD;
  --text: #173047;
  --muted: #66727A;
  --accent: #E26A2C;
  --ok: #2E9D62;
  --warning: #D6A43B;
  --danger: #C94C66;
  --outline: #D7CCB8;
  --scene-glow: rgba(226, 106, 44, 0.20);
  --sea-line: rgba(23, 48, 71, 0.13);
  --paper-grid: rgba(23, 48, 71, 0.06);
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win over author display rules. Screens
 * like .converters-screen/.cv-screen/.checklists-screen set `display: flex`
 * for their open layout, which would otherwise override [hidden]'s UA
 * `display: none` and leave them permanently visible.
 *
 * The selector is doubled on purpose (specificity 0,2,0). A single [hidden]
 * ties with a single class selector, so an `!important` class rule declared
 * later in this file used to win on source order alone — which is exactly
 * what `.home-command-center { display: flex !important }` (v0.5.3, further
 * down) was doing: the hero/radar block kept rendering above every open
 * module screen even though setHomeHubHidden() had set its hidden attribute.
 * Doubling the attribute selector makes the guard order-independent, so
 * appending new sections to this file can never silently break it again. */
[hidden][hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -10%, var(--scene-glow), transparent 34%),
    linear-gradient(135deg, var(--bg), var(--bg-2));
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 85%);
}

button {
  min-height: 44px;
  min-width: 44px;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.app-shell {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));
  position: relative;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.brand-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.logo-mark {
  width: 48px;
  height: 48px;
  border: 1px solid var(--outline);
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 88%, transparent), color-mix(in srgb, var(--panel-2) 80%, transparent));
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}

.logo-radar {
  position: absolute;
  inset: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 50%;
}

.logo-radar::before,
.logo-radar::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 50%;
}

.logo-radar::after {
  inset: 14px;
}

.logo-ship {
  position: absolute;
  left: 17px;
  bottom: 13px;
  width: 16px;
  height: 8px;
  border-radius: 2px 2px 8px 8px;
  background: var(--accent);
  transform: rotate(-12deg);
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 0;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  margin-bottom: 0;
  font-size: 19px;
  line-height: 1.15;
}

.theme-button,
.primary-button,
.ghost-button {
  border-radius: 16px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.theme-button:active,
.primary-button:active,
.ghost-button:active,
.module-tile:active { transform: scale(.98); }

.theme-button {
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--outline);
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}

.hero-card,
.preview-panel,
.offline-banner {
  border: 1px solid var(--outline);
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--panel-2) 72%, transparent));
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
}

.hero-card {
  position: relative;
  min-height: 220px;
  border-radius: 24px;
  overflow: hidden;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.hero-content { width: 62%; position: relative; z-index: 2; }

.hero-number {
  margin: 4px 0 4px;
  font-size: 36px;
  line-height: .95;
  font-weight: 850;
  color: var(--accent);
}

.hero-copy {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.hero-actions,
.preview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.primary-button {
  padding: 0 15px;
  color: #101820;
  background: var(--accent);
  font-weight: 800;
}

.ghost-button {
  padding: 0 15px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--outline);
  font-weight: 700;
}

.hero-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.radar-ring {
  position: absolute;
  right: -48px;
  top: -36px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
}

.ring-two {
  right: -8px;
  top: 5px;
  width: 150px;
  height: 150px;
  opacity: .62;
}

.radar-sweep {
  position: absolute;
  right: 54px;
  top: 71px;
  width: 86px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent));
  transform-origin: left center;
  animation: sweep 5s linear infinite;
}

.ship-track {
  position: absolute;
  height: 2px;
  width: 130px;
  background: linear-gradient(90deg, transparent, var(--sea-line), transparent);
  border-radius: 99px;
}

.track-one { right: 24px; bottom: 62px; transform: rotate(-16deg); }
.track-two { right: 68px; bottom: 38px; transform: rotate(18deg); }

@keyframes sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 18px;
}

.status-strip article {
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 12px 10px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

.status-strip strong {
  display: block;
  color: var(--text);
  font-size: 18px;
}

.status-strip span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin-bottom: 10px;
}

.connection-badge,
.module-badge {
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
}

.connection-badge.offline { color: var(--warning); }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.module-tile {
  min-height: 148px;
  text-align: left;
  color: var(--text);
  position: relative;
  overflow: hidden;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--outline);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel-2) 68%, transparent));
  box-shadow: 0 12px 35px rgba(0,0,0,.16);
}

.module-tile::before,
.module-tile::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.module-tile::before {
  inset: 0;
  opacity: .9;
  background: var(--scene-bg, radial-gradient(circle at 80% 10%, var(--scene-glow), transparent 42%));
}

.module-tile::after {
  right: 10px;
  bottom: 10px;
  width: 72px;
  height: 52px;
  opacity: .78;
  background: var(--scene-object, linear-gradient(135deg, var(--accent), transparent));
}

.module-content {
  position: relative;
  z-index: 2;
  min-height: 118px;
  display: flex;
  flex-direction: column;
}

.module-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  margin-bottom: 10px;
  font-size: 17px;
}

.module-title {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.module-copy {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

.module-badge {
  margin-top: auto;
  width: fit-content;
  color: var(--text);
}

.module-tile.is-active {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--outline));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent), 0 18px 45px rgba(0,0,0,.2);
}

/* Thematic visual scenes */
.module-tile[data-scene="jobs"] {
  --scene-bg:
    radial-gradient(circle at 82% 18%, var(--scene-glow), transparent 30%),
    linear-gradient(140deg, transparent 44%, var(--sea-line) 45%, transparent 47%),
    linear-gradient(160deg, transparent 55%, var(--sea-line) 56%, transparent 58%);
  --scene-object: linear-gradient(to bottom, transparent 0 18px, var(--accent) 19px 27px, transparent 28px), linear-gradient(100deg, transparent 0 24px, var(--accent) 25px 62px, transparent 63px);
}

.module-tile[data-scene="profile"] {
  --scene-bg:
    radial-gradient(circle at 75% 18%, var(--scene-glow), transparent 36%),
    linear-gradient(90deg, transparent 70%, var(--sea-line) 71% 72%, transparent 73%);
  --scene-object: radial-gradient(circle at 50% 24%, var(--accent) 0 10px, transparent 11px), linear-gradient(var(--accent) 0 0) center 32px / 46px 22px no-repeat;
}

.module-tile[data-scene="cv"] {
  --scene-bg:
    linear-gradient(90deg, transparent 16px, var(--sea-line) 17px, transparent 18px),
    linear-gradient(var(--sea-line) 1px, transparent 1px);
  --scene-object: linear-gradient(var(--accent) 0 0) 0 0 / 58px 72px no-repeat, linear-gradient(color-mix(in srgb, var(--panel) 68%, white) 0 0) 9px 13px / 40px 4px no-repeat, linear-gradient(color-mix(in srgb, var(--panel) 68%, white) 0 0) 9px 25px / 32px 4px no-repeat;
}

.module-tile[data-scene="documents"] {
  --scene-bg: radial-gradient(circle at 82% 20%, var(--scene-glow), transparent 32%);
  --scene-object: linear-gradient(var(--accent) 0 0) 6px 6px / 46px 64px no-repeat, radial-gradient(circle, color-mix(in srgb, var(--danger) 75%, transparent) 0 14px, transparent 15px) 36px 34px / 32px 32px no-repeat;
}

.module-tile[data-scene="checklists"] {
  --scene-bg: repeating-linear-gradient(135deg, transparent 0 14px, var(--sea-line) 15px 16px, transparent 17px 30px);
  --scene-object: linear-gradient(var(--accent) 0 0) 0 0 / 58px 68px no-repeat, linear-gradient(var(--panel) 0 0) 12px 18px / 34px 4px no-repeat, linear-gradient(var(--panel) 0 0) 12px 33px / 34px 4px no-repeat, linear-gradient(var(--panel) 0 0) 12px 48px / 26px 4px no-repeat;
}

.module-tile[data-scene="learning"] {
  --scene-bg:
    linear-gradient(155deg, transparent 40%, var(--sea-line) 41% 42%, transparent 43%),
    linear-gradient(24deg, transparent 55%, var(--sea-line) 56% 57%, transparent 58%),
    radial-gradient(circle at 80% 14%, var(--scene-glow), transparent 32%);
  --scene-object: linear-gradient(110deg, transparent 0 8px, var(--accent) 9px 39px, transparent 40px) 0 8px / 45px 22px no-repeat, linear-gradient(250deg, transparent 0 10px, color-mix(in srgb, var(--accent) 75%, var(--text)) 11px 42px, transparent 43px) 34px 30px / 46px 22px no-repeat;
}

.module-tile[data-scene="reference"] {
  --scene-bg:
    radial-gradient(circle at 80% 20%, transparent 0 26px, var(--sea-line) 27px 28px, transparent 29px 44px, var(--sea-line) 45px 46px, transparent 47px),
    linear-gradient(90deg, transparent 60%, var(--sea-line) 61%, transparent 62%);
  --scene-object: conic-gradient(from 45deg, var(--accent), transparent, var(--accent));
}

.module-tile[data-scene="converters"] {
  --scene-bg: repeating-linear-gradient(90deg, transparent 0 10px, var(--sea-line) 11px 12px, transparent 13px 24px);
  --scene-object: radial-gradient(circle at 50% 54%, transparent 0 22px, var(--accent) 23px 28px, transparent 29px), linear-gradient(45deg, transparent 0 30px, var(--accent) 31px 36px, transparent 37px);
}

.module-tile[data-scene="photo"] {
  --scene-bg: radial-gradient(circle at 78% 16%, var(--scene-glow), transparent 34%);
  --scene-object: radial-gradient(circle at 28px 24px, transparent 0 16px, var(--accent) 17px 21px, transparent 22px), linear-gradient(45deg, transparent 0 43px, var(--accent) 44px 50px, transparent 51px), radial-gradient(circle at 7px 48px, color-mix(in srgb, var(--text) 36%, transparent) 0 20px, transparent 21px);
}

.module-tile[data-scene="pro"] {
  --scene-bg:
    radial-gradient(circle at 80% 15%, var(--scene-glow), transparent 36%),
    linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--accent) 22%, transparent) 59%, transparent 62%);
  --scene-object: radial-gradient(circle at 50% 50%, var(--accent) 0 20px, transparent 21px), radial-gradient(circle at 50% 50%, transparent 0 31px, var(--accent) 32px 35px, transparent 36px);
}

.preview-panel {
  margin-top: 12px;
  border-radius: 24px;
  padding: 16px;
}

.preview-panel p { color: var(--muted); line-height: 1.45; }

.safety-note {
  margin: 12px 0 0;
  font-size: 12px;
}

.offline-banner {
  margin-top: 12px;
  border-radius: 18px;
  padding: 12px 14px;
  color: var(--warning);
  font-size: 13px;
}

/* Documents Screen v0.4 */
.documents-screen {
  border: 1px solid var(--outline);
  border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--panel-2) 72%, transparent));
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  padding: 16px;
  margin-top: 12px;
}

.documents-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.documents-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
}

.back-button {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid var(--outline);
  color: var(--text);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, background .18s ease;
}

.back-button:active {
  transform: scale(.96);
}

.documents-warning {
  display: flex;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  margin-bottom: 14px;
}

.documents-warning span {
  font-size: 18px;
  flex-shrink: 0;
}

.documents-warning p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.documents-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.summary-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  font-size: 13px;
  font-weight: 700;
}

.summary-chip-count {
  font-size: 16px;
  font-weight: 850;
}

.summary-chip.status-valid .summary-chip-count { color: var(--ok); }
.summary-chip.status-expiring .summary-chip-count { color: var(--warning); }
.summary-chip.status-expired .summary-chip-count { color: var(--danger); }

.documents-list-container {
  min-height: 200px;
}

.documents-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.document-card {
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.document-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
}

.document-info {
  flex: 1;
  min-width: 0;
}

.document-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.document-type {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.expiry-badge {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.expiry-badge.status-valid {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
}

.expiry-badge.status-expiring {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}

.expiry-badge.status-expired {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}

.document-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--outline);
}

.document-expiry {
  font-size: 13px;
  color: var(--muted);
}

.reminder-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid var(--outline);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  transition: background .18s ease, border-color .18s ease;
  min-height: 36px;
}

.reminder-toggle:active {
  transform: scale(.97);
}

.reminder-toggle.is-enabled {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}

.reminder-icon {
  font-size: 16px;
}

.documents-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
}

.documents-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

@media (max-width: 380px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .hero-card { min-height: 230px; }
  .hero-content { width: 70%; }
  .module-tile { min-height: 156px; padding: 13px; }
  .dashboard-grid { gap: 9px; }
  .documents-screen { padding: 14px; }
  .document-card { padding: 12px; }
}


/* v0.3 module visual scenes */
/* v0.4 revise: restored Mini App preview visual scene styles */
.preview-visual {
  width: 100%;
  min-height: 108px;
  margin: 10px 0 16px;
  border: 1px solid color-mix(in srgb, var(--outline) 70%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 70%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.preview-visual::before {
  content: ";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .46;
}

.preview-visual::after {
  content: ";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--panel) 28%, transparent),
    transparent 28%,
    transparent 72%,
    color-mix(in srgb, var(--panel) 30%, transparent)
  );
}

.module-scene-svg {
  width: min(100%, 250px);
  height: 112px;
  position: relative;
  z-index: 1;
  opacity: .88;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .14));
}

.module-scene-svg .scene-line,
.module-scene-svg .scene-sea {
  fill: none;
  stroke: var(--muted);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .86;
}

.module-scene-svg .scene-line.accent {
  stroke: var(--accent);
  opacity: .95;
}

.module-scene-svg .scene-fill {
  fill: color-mix(in srgb, var(--accent) 72%, var(--panel));
  opacity: .82;
}

.module-scene-svg .scene-fill.soft {
  fill: color-mix(in srgb, var(--panel-2) 70%, var(--accent));
  opacity: .52;
}

.module-scene-svg .scene-dot {
  fill: var(--accent);
  opacity: .92;
}

.module-scene-svg .scene-dot.warning {
  fill: var(--warning);
}

.module-scene-svg .scene-sea {
  stroke: color-mix(in srgb, var(--accent) 45%, var(--muted));
  stroke-width: 3;
  opacity: .58;
}

.preview-panel:hover .module-scene-svg .scene-sea {
  animation: sceneDrift 2.8s ease-in-out infinite alternate;
}

@keyframes sceneDrift {
  from { transform: translateX(-3px); }
  to { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .preview-panel:hover .module-scene-svg .scene-sea {
    animation: none;
  }
}

@media (max-width: 380px) {
  .preview-visual {
    min-height: 98px;
    margin: 8px 0 12px;
  }

  .module-scene-svg {
    height: 104px;
  }
}

/* === SeaMate Home Hub v0.5.1 Premium Visual Skin BEGIN === */
/* Purpose: make the v0.5 Home Hub visibly premium, not only structurally richer.
   Safe scope: CSS-only visual layer. No JS, no backend, no data model changes. */

:root {
  --home-radius-xl: 28px;
  --home-radius-lg: 22px;
  --home-radius-md: 16px;
  --home-shadow-soft: 0 18px 60px rgba(0, 0, 0, .24);
  --home-shadow-card: 0 14px 36px rgba(0, 0, 0, .18);
  --home-tile-min: 142px;
}

html[data-seamate-theme="bridge_dark_ops"] {
  --home-bg-radar: rgba(255, 159, 67, .10);
  --home-grid-line: rgba(123, 199, 230, .055);
  --home-surface-glass: rgba(11, 34, 50, .82);
  --home-surface-strong: rgba(14, 43, 62, .94);
  --home-border-glow: rgba(60, 156, 203, .34);
  --home-amber-soft: rgba(255, 159, 67, .16);
  --home-green-soft: rgba(46, 213, 115, .14);
  --home-danger-soft: rgba(255, 71, 87, .15);
}

html[data-seamate-theme="chart_paper_pro"] {
  --home-bg-radar: rgba(211, 84, 0, .085);
  --home-grid-line: rgba(23, 48, 71, .07);
  --home-surface-glass: rgba(253, 251, 247, .90);
  --home-surface-strong: rgba(250, 245, 235, .96);
  --home-border-glow: rgba(179, 124, 76, .32);
  --home-amber-soft: rgba(211, 84, 0, .12);
  --home-green-soft: rgba(33, 140, 83, .13);
  --home-danger-soft: rgba(192, 57, 43, .12);
}

/* Premium app canvas */
body {
  background:
    radial-gradient(circle at 50% -8%, var(--home-bg-radar), transparent 34rem),
    linear-gradient(90deg, var(--home-grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--home-grid-line) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 34px 34px, 34px 34px, auto;
}

.app-shell {
  max-width: 470px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(26px, env(safe-area-inset-bottom));
}

/* Header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: -4px -2px 16px;
  padding: 10px 2px 12px;
  backdrop-filter: blur(16px);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-card {
  gap: 12px;
}

.logo-mark {
  box-shadow: inset 0 0 0 1px var(--outline), 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent);
}

.connection-badge {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: inset 0 0 0 1px var(--outline);
}

.theme-button {
  box-shadow: inset 0 0 0 1px var(--outline), 0 10px 24px rgba(0, 0, 0, .16);
}

/* Shared premium panels */
.preview-panel,
.first-run-onboarding,
.priority-alerts,
.bot-fallback-card,
.hero-card {
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 34%),
    linear-gradient(145deg, var(--home-surface-strong), var(--home-surface-glass));
  border: 1px solid var(--home-border-glow);
  border-radius: var(--home-radius-xl);
  box-shadow: var(--home-shadow-card);
}

/* First-run onboarding: compact command card */
.first-run-onboarding {
  position: relative;
  overflow: hidden;
  padding: 16px 16px 18px;
  margin-bottom: 14px;
}

.first-run-onboarding::after {
  content: "";
  position: absolute;
  right: -36px;
  top: -42px;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  opacity: .55;
}

.onboarding-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  z-index: 1;
}

.onboarding-step {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--outline) 82%, transparent);
}

.onboarding-step strong {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 13px;
}

.onboarding-step span {
  font-weight: 750;
  color: var(--text);
}

/* Hero command center */
.home-command-center,
.hero-card {
  min-height: 330px;
  overflow: hidden;
}

.home-command-center::before,
.hero-card::before {
  content: "";
  position: absolute;
  right: -78px;
  top: 36px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 36%, color-mix(in srgb, var(--accent) 18%, transparent) 37% 38%, transparent 39% 58%, color-mix(in srgb, var(--accent) 24%, transparent) 59% 60%, transparent 61%),
    conic-gradient(from 210deg, transparent 0 58%, color-mix(in srgb, var(--accent) 65%, transparent) 58% 60%, transparent 60% 100%);
  opacity: .86;
  pointer-events: none;
}

.home-command-center::after,
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 68%, color-mix(in srgb, var(--accent) 13%, transparent) 69%, transparent 70%),
    linear-gradient(165deg, transparent 0 74%, color-mix(in srgb, var(--ok) 10%, transparent) 75%, transparent 76%);
  opacity: .9;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 73%;
}

.hero-number {
  color: var(--accent);
  letter-spacing: -.07em;
  text-shadow: 0 12px 38px color-mix(in srgb, var(--accent) 22%, transparent);
}

.hero-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 310px;
}

.primary-button,
.ghost-button {
  min-height: 48px;
  border-radius: 18px;
}

/* Readiness cards */
.home-readiness-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 14px;
}

.home-readiness-summary article,
.readiness-card {
  position: relative;
  min-height: 84px;
  padding: 14px;
  overflow: hidden;
  border-radius: 19px;
  background:
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 36%),
    color-mix(in srgb, var(--panel) 86%, transparent);
  border: 1px solid var(--home-border-glow);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
}

.home-readiness-summary article::after,
.readiness-card::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -32px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 10px solid color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: .4;
}

.home-readiness-summary strong {
  font-size: 26px;
  letter-spacing: -.04em;
}

.home-readiness-summary span {
  margin-top: 4px;
}

/* Alerts */
.priority-alerts {
  padding: 16px;
  margin: 12px 0 16px;
}

.priority-alert {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 11px;
  margin-top: 10px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--warning) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 34%, transparent);
}

.priority-alert + .priority-alert {
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border-color: var(--outline);
}

.priority-alert p {
  margin: 0;
  color: var(--text);
  line-height: 1.35;
  font-size: 13px;
}

.priority-alert .ghost-button {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 14px;
}

/* Section head */
.section-head {
  margin-top: 18px;
  align-items: end;
}

/* Premium module grid: remove old abstract geometric SVG feel */
.dashboard-grid {
  gap: 12px;
}

.module-tile {
  position: relative;
  min-height: var(--home-tile-min);
  padding: 15px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel-2) 76%, transparent)),
    radial-gradient(circle at 92% 78%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 32%);
  border: 1px solid color-mix(in srgb, var(--outline) 80%, var(--accent) 20%);
  border-radius: 23px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
}

.module-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 29px, var(--home-grid-line) 30px, transparent 31px),
    linear-gradient(180deg, transparent 0 29px, var(--home-grid-line) 30px, transparent 31px);
  background-size: 30px 30px;
  opacity: .7;
  z-index: -2;
}

.module-tile::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -40px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 13px solid color-mix(in srgb, var(--accent) 50%, transparent);
  opacity: .34;
  z-index: -1;
}

.module-tile.is-active {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--text) 30%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent),
    0 18px 44px rgba(0, 0, 0, .24);
}

.module-tile .module-content {
  position: relative;
  z-index: 3;
}

.module-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel) 88%);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent);
  margin-bottom: 18px;
}

.module-title {
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.module-copy {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
}

.module-badge {
  min-height: 32px;
  padding: 6px 10px;
  margin-top: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  border: 1px solid var(--outline);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

/* Hide old abstract module scenes inside tiles while keeping preview panel scenes available. */
.module-tile .module-visual,
.module-tile .preview-visual,
.module-tile .module-scene-svg,
.module-tile svg {
  display: none !important;
}

/* Preview panel gets a cleaner product-card look */
#previewPanel {
  padding: 16px;
  margin-top: 16px;
}

#previewVisual {
  border-radius: 20px;
  background:
    radial-gradient(circle at 74% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 84%, transparent), color-mix(in srgb, var(--panel-2) 74%, transparent));
  border: 1px solid color-mix(in srgb, var(--outline) 85%, var(--accent) 15%);
}

/* Fallback command block */
.bot-fallback-card {
  display: grid;
  gap: 9px;
  padding: 15px;
  margin-top: 18px;
  border-style: dashed;
}

.bot-fallback-card strong {
  color: var(--accent);
}

.bot-fallback-card span {
  color: var(--text);
  line-height: 1.35;
}

.command-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.command-chip {
  min-height: 36px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--outline);
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  font-weight: 800;
}

/* Documents screen polish to match premium skin */
.documents-screen {
  box-shadow: var(--home-shadow-soft);
}

.document-card {
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

/* Light mode paper feel */
html[data-seamate-theme="chart_paper_pro"] body {
  background:
    radial-gradient(circle at 18% -8%, rgba(211, 84, 0, .09), transparent 30rem),
    linear-gradient(90deg, var(--home-grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--home-grid-line) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 36px 36px, 36px 36px, auto;
}

html[data-seamate-theme="chart_paper_pro"] .module-tile,
html[data-seamate-theme="chart_paper_pro"] .preview-panel,
html[data-seamate-theme="chart_paper_pro"] .hero-card,
html[data-seamate-theme="chart_paper_pro"] .first-run-onboarding,
html[data-seamate-theme="chart_paper_pro"] .priority-alerts,
html[data-seamate-theme="chart_paper_pro"] .bot-fallback-card {
  box-shadow: 0 12px 30px rgba(74, 54, 28, .10);
}

/* Smaller phones */
@media (max-width: 380px) {
  .app-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .home-readiness-summary {
    grid-template-columns: 1fr 1fr;
  }

  .priority-alert {
    grid-template-columns: 28px 1fr;
  }

  .priority-alert .ghost-button {
    grid-column: 2;
    width: max-content;
  }
}
/* === SeaMate Home Hub v0.5.1 Premium Visual Skin END === */


/* === SeaMate Home Hub v0.5.2 Radar Gauge BEGIN === */
html[data-seamate-theme="bridge_dark_ops"] {
  --home-radar-primary: #2ed573;
  --home-radar-primary-soft: rgba(46, 213, 115, .22);
  --home-radar-primary-faint: rgba(46, 213, 115, .10);
  --home-radar-readiness: #ff9f43;
  --home-radar-readiness-soft: rgba(255, 159, 67, .22);
  --home-radar-center-bg: rgba(5, 12, 18, .82);
  --home-radar-center-border: rgba(46, 213, 115, .30);
  --home-radar-shadow: rgba(46, 213, 115, .34);
}

html[data-seamate-theme="chart_paper_pro"] {
  --home-radar-primary: #7a4d21;
  --home-radar-primary-soft: rgba(122, 77, 33, .22);
  --home-radar-primary-faint: rgba(122, 77, 33, .10);
  --home-radar-readiness: #111827;
  --home-radar-readiness-soft: rgba(17, 24, 39, .12);
  --home-radar-center-bg: rgba(255, 252, 244, .90);
  --home-radar-center-border: rgba(122, 77, 33, .26);
  --home-radar-shadow: rgba(122, 77, 33, .24);
}

.home-command-center {
  min-height: 360px;
}

.home-radar-gauge {
  position: absolute;
  right: -24px;
  top: 50%;
  width: min(48vw, 280px);
  max-width: 280px;
  aspect-ratio: 1;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .98;
  filter: drop-shadow(0 0 18px var(--home-radar-shadow));
}

.home-radar-svg {
  width: 100%;
  height: 100%;
  color: var(--home-radar-primary);
  overflow: visible;
}

.home-radar-limb {
  stroke: var(--home-radar-primary-faint);
}

.home-radar-grid,
.home-radar-axis,
.home-radar-ticks {
  stroke: var(--home-radar-primary-soft);
}

.home-radar-progress {
  stroke: var(--home-radar-readiness);
  filter: drop-shadow(0 0 10px var(--home-radar-readiness-soft));
  transition: stroke-dashoffset .7s ease, stroke .35s ease;
}

.home-radar-sweep-line {
  stroke: var(--home-radar-primary);
  transform-origin: 150px 150px;
  animation: homeRadarSweep 5s linear infinite;
  filter: drop-shadow(0 0 8px var(--home-radar-primary));
}

.home-radar-ping {
  fill: var(--home-radar-primary);
  opacity: .72;
  animation: homeRadarPing 2.8s ease-in-out infinite;
}

.home-radar-ping.ping-two {
  animation-delay: 1.4s;
  opacity: .48;
}

.home-radar-center {
  position: absolute;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  display: grid;
  align-content: center;
  justify-items: center;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--home-radar-readiness) 10%, transparent), transparent 58%),
    var(--home-radar-center-bg);
  border: 1px solid var(--home-radar-center-border);
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.04),
    0 12px 34px rgba(0,0,0,.22);
}

.home-radar-center strong {
  color: var(--home-radar-readiness);
  font-size: clamp(28px, 7vw, 42px);
  line-height: .9;
  font-weight: 950;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}

.home-radar-center span {
  margin-top: 8px;
  color: color-mix(in srgb, var(--home-radar-readiness) 72%, var(--muted));
  font-size: 9px;
  line-height: 1;
  letter-spacing: .18em;
  font-weight: 900;
}

@keyframes homeRadarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes homeRadarPing {
  0%, 100% { transform: scale(1); opacity: .25; }
  42% { transform: scale(1.9); opacity: .85; }
}

html[data-seamate-theme="chart_paper_pro"] .home-radar-gauge {
  filter: drop-shadow(0 10px 24px rgba(122, 77, 33, .18));
}

html[data-seamate-theme="chart_paper_pro"] .home-radar-sweep-line {
  filter: drop-shadow(0 0 4px rgba(122, 77, 33, .30));
}

html[data-seamate-theme="chart_paper_pro"] .home-radar-center strong {
  text-shadow: none;
}

@media (max-width: 420px) {
  .home-command-center {
    min-height: 400px;
  }

  .home-command-center .hero-content {
    width: 100%;
    padding-right: 104px;
  }

  .home-radar-gauge {
    right: -58px;
    width: 230px;
    opacity: .92;
  }

  .home-radar-center {
    width: 92px;
    height: 92px;
  }
}

@media (max-width: 360px) {
  .home-command-center .hero-content {
    padding-right: 84px;
  }

  .home-radar-gauge {
    right: -72px;
    width: 214px;
  }
}
/* === SeaMate Home Hub v0.5.2 Radar Gauge END === */


/* === SeaMate Home Hub v0.5.3 Separate Radar Layout BEGIN === */
/* Fix: radar must be a dedicated readable block, not an absolute background under text/buttons. */
.app-shell {
  display: flex;
  flex-direction: column;
}

.app-header { order: 0; }
.home-command-center { order: 10; }
#firstRunOnboarding { order: 20; }
#homeReadinessSummary { order: 30; }
#homePriorityAlerts { order: 40; }
.section-head { order: 50; }
#dashboardGrid { order: 60; }
#previewPanel { order: 70; }
#botFallbackCard { order: 80; }
#documentsScreen { order: 90; }
#profileScreen { order: 90; }
#convertersScreen { order: 90; }
#cvScreen { order: 90; }
#checklistsScreen { order: 90; }
#trainingScreen { order: 90; }
#offlineBanner { order: 100; }

.home-command-center {
  min-height: auto !important;
  padding: 22px 18px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px !important;
  text-align: center;
  overflow: hidden;
}

.home-command-center .hero-content {
  position: relative !important;
  z-index: 3 !important;
  order: 2 !important;
  width: 100% !important;
  max-width: 620px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.home-command-center .hero-visual.home-radar-gauge {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2 !important;
  order: 1 !important;
  transform: none !important;
  width: min(100%, 330px) !important;
  height: min(82vw, 330px) !important;
  max-height: 330px !important;
  margin: 0 auto 2px !important;
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.home-command-center .hero-number {
  display: none !important;
}

.home-command-center .eyebrow {
  margin-bottom: 0;
  color: var(--home-radar-primary);
  letter-spacing: .24em;
}

.home-command-center .hero-copy {
  max-width: 560px;
  margin: 0 auto 2px;
  font-size: clamp(14px, 3.4vw, 18px);
  line-height: 1.45;
}

.home-command-center .hero-actions {
  width: 100%;
  max-width: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.home-command-center .primary-button,
.home-command-center .ghost-button {
  min-height: 48px;
  justify-content: center;
}

.home-radar-svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.home-radar-center {
  z-index: 4;
}

.home-radar-center strong {
  text-wrap: nowrap;
}

/* Keep decorative background arcs but prevent them from competing with the radar. */
.home-command-center::before,
.home-command-center::after {
  opacity: .20 !important;
  pointer-events: none;
}

/* Reduce old abstract tile scenes so module cards stop looking like random orange shapes. */
.module-tile .module-scene-svg,
.module-tile .module-visual svg {
  opacity: .18 !important;
  filter: saturate(.65) blur(.15px);
  transform: scale(.92);
}

.module-tile.is-active .module-scene-svg,
.module-tile:hover .module-scene-svg,
.module-tile.is-active .module-visual svg,
.module-tile:hover .module-visual svg {
  opacity: .25 !important;
}

.module-tile .scene-fill,
.module-tile .scene-dot,
.module-tile .scene-line.accent {
  opacity: .72;
}

html[data-seamate-theme="bridge_dark_ops"] .home-command-center {
  background:
    radial-gradient(circle at 50% 38%, rgba(46, 213, 115, .08), transparent 42%),
    linear-gradient(180deg, rgba(9, 22, 36, .96), rgba(7, 18, 29, .88)) !important;
  border-color: rgba(46, 148, 190, .34) !important;
}

html[data-seamate-theme="bridge_dark_ops"] .home-command-center .primary-button {
  background: #12c986;
  color: #03110c;
  box-shadow: 0 14px 32px rgba(18, 201, 134, .22);
}

html[data-seamate-theme="bridge_dark_ops"] .home-command-center .ghost-button {
  background: rgba(16, 35, 52, .72);
  border-color: rgba(110, 185, 220, .28);
}

html[data-seamate-theme="chart_paper_pro"] .home-command-center {
  background:
    radial-gradient(circle at 50% 38%, rgba(122, 77, 33, .10), transparent 44%),
    linear-gradient(180deg, rgba(253, 250, 242, .96), rgba(238, 228, 209, .90)) !important;
  border-color: rgba(122, 77, 33, .30) !important;
}

html[data-seamate-theme="chart_paper_pro"] .home-command-center .eyebrow {
  color: #7a4d21;
}

html[data-seamate-theme="chart_paper_pro"] .home-command-center .primary-button {
  background: #1f2933;
  color: #fff8ec;
  box-shadow: 0 14px 28px rgba(31, 41, 51, .16);
}

html[data-seamate-theme="chart_paper_pro"] .home-command-center .ghost-button {
  background: rgba(255, 252, 244, .70);
  border-color: rgba(122, 77, 33, .28);
  color: #1f2933;
}

html[data-seamate-theme="chart_paper_pro"] .module-tile .module-scene-svg,
html[data-seamate-theme="chart_paper_pro"] .module-tile .module-visual svg {
  opacity: .12 !important;
  filter: sepia(.6) saturate(.55);
}

@media (max-width: 520px) {
  .home-command-center {
    padding: 20px 14px 22px !important;
    gap: 14px !important;
  }

  .home-command-center .hero-visual.home-radar-gauge {
    width: min(100%, 300px) !important;
    height: min(78vw, 300px) !important;
  }

  .home-command-center .hero-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 380px) {
  .home-command-center .hero-visual.home-radar-gauge {
    width: min(100%, 270px) !important;
    height: min(76vw, 270px) !important;
  }
}
/* === SeaMate Home Hub v0.5.3 Separate Radar Layout END === */

/* === SeaMate Home Hub v0.5.4 Module Tile Cleanup + Neon Hover BEGIN === */
/* Purpose: remove old abstract SVG scene fragments from module tiles and make tiles/buttons feel like clean maritime controls. */

.dashboard-grid .module-tile .module-visual,
.dashboard-grid .module-tile .module-scene-svg,
.dashboard-grid .module-tile svg.module-scene-svg {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.dashboard-grid .module-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 132px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 95%, transparent), color-mix(in srgb, var(--panel-2) 78%, transparent)) !important;
  border-color: color-mix(in srgb, var(--outline) 78%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 16px 34px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.dashboard-grid .module-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 14%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 34%);
  opacity: .72;
  z-index: -1;
}

.dashboard-grid .module-tile::after {
  content: "" !important;
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  opacity: .18 !important;
  background: currentColor !important;
  filter: blur(.2px);
  transform: rotate(-8deg);
  pointer-events: none;
}

.dashboard-grid .module-tile:hover,
.dashboard-grid .module-tile:focus-visible,
.dashboard-grid .module-tile.is-active {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 68%, var(--outline)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
    0 0 24px color-mix(in srgb, var(--accent) 22%, transparent),
    0 22px 42px rgba(0,0,0,.28);
}

.dashboard-grid .module-tile:active {
  transform: translateY(0) scale(.985);
}

.dashboard-grid .module-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 22px;
  line-height: 1;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.dashboard-grid .module-title {
  letter-spacing: -.015em;
}

.dashboard-grid .module-badge {
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.primary-button,
.ghost-button,
.theme-button,
.command-chip,
.back-button,
.reminder-toggle {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.primary-button:hover,
.primary-button:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 28%, transparent),
    0 16px 34px rgba(0,0,0,.24);
}

.ghost-button:hover,
.ghost-button:focus-visible,
.theme-button:hover,
.theme-button:focus-visible,
.command-chip:hover,
.command-chip:focus-visible,
.back-button:hover,
.back-button:focus-visible,
.reminder-toggle:hover,
.reminder-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 56%, var(--outline));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

html[data-seamate-theme="bridge_dark_ops"] .dashboard-grid .module-tile:hover,
html[data-seamate-theme="bridge_dark_ops"] .dashboard-grid .module-tile:focus-visible,
html[data-seamate-theme="bridge_dark_ops"] .dashboard-grid .module-tile.is-active {
  box-shadow:
    0 0 0 1px rgba(46, 213, 115, .28),
    0 0 24px rgba(46, 213, 115, .22),
    0 22px 44px rgba(0,0,0,.34);
}

html[data-seamate-theme="bridge_dark_ops"] .primary-button:hover,
html[data-seamate-theme="bridge_dark_ops"] .primary-button:focus-visible,
html[data-seamate-theme="bridge_dark_ops"] .ghost-button:hover,
html[data-seamate-theme="bridge_dark_ops"] .ghost-button:focus-visible,
html[data-seamate-theme="bridge_dark_ops"] .command-chip:hover,
html[data-seamate-theme="bridge_dark_ops"] .command-chip:focus-visible,
html[data-seamate-theme="bridge_dark_ops"] .theme-button:hover,
html[data-seamate-theme="bridge_dark_ops"] .theme-button:focus-visible {
  box-shadow:
    0 0 0 1px rgba(46, 213, 115, .24),
    0 0 22px rgba(46, 213, 115, .20),
    0 14px 30px rgba(0,0,0,.28);
}

html[data-seamate-theme="chart_paper_pro"] .dashboard-grid .module-tile:hover,
html[data-seamate-theme="chart_paper_pro"] .dashboard-grid .module-tile:focus-visible,
html[data-seamate-theme="chart_paper_pro"] .dashboard-grid .module-tile.is-active,
html[data-seamate-theme="chart_paper_pro"] .primary-button:hover,
html[data-seamate-theme="chart_paper_pro"] .primary-button:focus-visible,
html[data-seamate-theme="chart_paper_pro"] .ghost-button:hover,
html[data-seamate-theme="chart_paper_pro"] .ghost-button:focus-visible,
html[data-seamate-theme="chart_paper_pro"] .command-chip:hover,
html[data-seamate-theme="chart_paper_pro"] .command-chip:focus-visible,
html[data-seamate-theme="chart_paper_pro"] .theme-button:hover,
html[data-seamate-theme="chart_paper_pro"] .theme-button:focus-visible {
  box-shadow:
    0 0 0 1px rgba(139, 92, 26, .24),
    0 0 20px rgba(139, 92, 26, .16),
    0 16px 32px rgba(64, 42, 20, .16);
}

/* Keep radar as the hero visual, but prevent older hero decorative tracks from floating over controls. */
.home-command-center .ship-track,
.home-command-center .radar-ring:not(.home-radar-ring) {
  opacity: 0 !important;
  display: none !important;
}

@media (hover: none) {
  .dashboard-grid .module-tile:hover,
  .primary-button:hover,
  .ghost-button:hover,
  .theme-button:hover,
  .command-chip:hover {
    transform: none;
  }
}
/* === SeaMate Home Hub v0.5.4 Module Tile Cleanup + Neon Hover END === */

/* === SeaMate v0.6.0 Mini App Auth Guard BEGIN === */
.auth-warning-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--outline));
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--warning) 16%, transparent), transparent 34%),
    color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .18);
}

.auth-warning-card[hidden] {
  display: none !important;
}

.auth-warning-icon {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent);
}

.auth-warning-title {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

#miniAppAuthCopy {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.connection-badge.is-authenticated {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 42%, var(--outline));
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}

.connection-badge.is-auth-required {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 48%, var(--outline));
  background: color-mix(in srgb, var(--warning) 13%, transparent);
}

.connection-badge.is-browser-preview {
  color: var(--muted);
  border-color: var(--outline);
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
}

html[data-miniapp-auth="authenticated"] .auth-warning-card {
  display: none !important;
}

html[data-seamate-theme="chart_paper_pro"] .auth-warning-card {
  box-shadow: 0 12px 28px rgba(65, 45, 18, .08);
}
/* === SeaMate v0.6.0 Mini App Auth Guard END === */



/* === SeaMate v0.6.1 Sea Profile Screen BEGIN === */
.profile-screen {
  border: 1px solid var(--outline);
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 28%),
    linear-gradient(160deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--panel-2) 78%, transparent));
  box-shadow: 0 18px 55px rgba(0, 0, 0, .18);
  padding: 16px;
  margin-top: 12px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-subtitle {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.profile-completion-card,
.profile-actions-card {
  border: 1px solid var(--outline);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  padding: 14px;
  margin-bottom: 14px;
}

.profile-completion-card h3 {
  margin: 4px 0 4px;
  font-size: 26px;
  letter-spacing: -.03em;
}

.profile-completion-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.profile-progress-track {
  width: 100%;
  height: 9px;
  margin-top: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--outline) 42%, transparent);
  overflow: hidden;
}

.profile-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--warning), var(--ok));
  box-shadow: 0 0 20px color-mix(in srgb, var(--ok) 35%, transparent);
  transition: width .28s ease;
}

.profile-form {
  display: grid;
  gap: 12px;
}

.profile-field {
  display: grid;
  gap: 7px;
}

.profile-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.profile-field input,
.profile-field select,
.profile-field textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--outline);
  border-radius: 15px;
  background: color-mix(in srgb, var(--bg) 74%, var(--panel));
  color: var(--text);
  padding: 11px 12px;
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.profile-field textarea {
  resize: vertical;
  min-height: 104px;
}

.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--outline));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.profile-actions-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.profile-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 12px 2px 0;
}

html[data-seamate-theme="chart_paper_pro"] .profile-screen {
  background:
    linear-gradient(90deg, rgba(88, 63, 35, .045) 1px, transparent 1px),
    linear-gradient(rgba(88, 63, 35, .045) 1px, transparent 1px),
    linear-gradient(160deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--panel-2) 84%, transparent));
  background-size: 28px 28px, 28px 28px, auto;
}

@media (max-width: 380px) {
  .profile-actions-card { grid-template-columns: 1fr; }
}
/* === SeaMate v0.6.1 Sea Profile Screen END === */


/* === SeaMate v0.6.2 Sea Profile Improvements BEGIN === */
.profile-conditions-card {
  border: 1px solid var(--outline);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 26%),
    color-mix(in srgb, var(--panel) 84%, transparent);
  padding: 14px;
}

.profile-section-head {
  margin-bottom: 12px;
}

.profile-section-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.profile-section-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.profile-conditions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-conditions-card .profile-field-full {
  margin-top: 12px;
}

.profile-field input[type="number"]::-webkit-outer-spin-button,
.profile-field input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
}

.profile-field input[type="number"] {
  appearance: textfield;
}

.profile-completion-card.is-complete {
  border-color: color-mix(in srgb, var(--ok) 42%, var(--outline));
  box-shadow: 0 0 26px color-mix(in srgb, var(--ok) 16%, transparent);
}

.profile-completion-card.is-incomplete {
  border-color: color-mix(in srgb, var(--warning) 36%, var(--outline));
}

@media (max-width: 430px) {
  .profile-conditions-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (max-width: 360px) {
  .profile-conditions-grid {
    grid-template-columns: 1fr;
  }
}
/* === SeaMate v0.6.2 Sea Profile Improvements END === */


/* === SeaMate v0.6.3 Profile Hints and Rank Options BEGIN === */
.profile-field-help {
  position: relative;
}

.profile-field-help::after {
  content: attr(data-help);
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 8px);
  width: min(320px, calc(100vw - 42px));
  max-width: 100%;
  z-index: 80;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--outline));
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%),
    color-mix(in srgb, var(--panel) 96%, var(--bg));
  color: var(--text);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28), 0 0 22px color-mix(in srgb, var(--accent) 16%, transparent);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  transition: opacity .16s ease, transform .16s ease;
}

.profile-field-help:hover::after,
.profile-field-help:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

.profile-field-help input,
.profile-field-help select,
.profile-field-help textarea {
  text-overflow: ellipsis;
}

html[data-seamate-theme="chart_paper_pro"] .profile-field-help::after {
  background:
    linear-gradient(90deg, rgba(88, 63, 35, .055) 1px, transparent 1px),
    linear-gradient(rgba(88, 63, 35, .055) 1px, transparent 1px),
    color-mix(in srgb, var(--panel) 98%, var(--bg));
  background-size: 22px 22px;
  box-shadow: 0 14px 28px rgba(88, 63, 35, .16);
}
/* === SeaMate v0.6.3 Profile Hints and Rank Options END === */


/* === SeaMate v0.7.0b-1 Existing Documents Actions BEGIN === */
.documents-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.documents-action-button {
  min-height: 38px;
  padding-inline: 14px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .documents-toolbar {
    width: 100%;
    justify-content: stretch;
  }

  .documents-action-button {
    flex: 1 1 140px;
  }
}

html[data-seamate-theme="bridge_dark_ops"] .documents-action-button:hover,
html[data-seamate-theme="bridge_dark_ops"] .documents-action-button:focus-visible {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.28), 0 0 32px rgba(56, 189, 248, 0.12);
}

html[data-seamate-theme="chart_paper_pro"] .documents-action-button:hover,
html[data-seamate-theme="chart_paper_pro"] .documents-action-button:focus-visible {
  box-shadow: 0 10px 28px rgba(120, 72, 24, 0.18);
}
/* === SeaMate v0.7.0b-1 Existing Documents Actions END === */

/* === SeaMate v0.7.0b-2 Documents compact form BEGIN === */
.documents-form-card {
  margin-top: 12px;
  padding: 16px;
  border-radius: var(--home-radius-lg, 22px);
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  display: grid;
  gap: 12px;
}

.documents-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.documents-form-full {
  grid-column: 1 / -1;
}

.documents-form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.documents-form-error {
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--outline));
  background: var(--home-danger-soft, rgba(255, 71, 87, .15));
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
}

.document-notes {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.expiry-badge.status-unknown {
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  color: var(--muted);
}

@media (max-width: 520px) {
  .documents-form-grid {
    grid-template-columns: 1fr;
  }

  .documents-form-actions {
    justify-content: stretch;
  }

  .documents-form-actions .documents-action-button {
    flex: 1 1 140px;
  }
}
/* === SeaMate v0.7.0b-2 Documents compact form END === */

/* === SeaMate v0.7.0b-4 Documents Readiness Score BEGIN === */
.documents-form-checkbox {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.documents-form-checkbox input[type="checkbox"] {
  width: 20px;
  min-height: auto;
  accent-color: var(--accent);
}

.readiness-chip.level-high .summary-chip-count { color: var(--accent); }
.readiness-chip.level-mid .summary-chip-count { color: var(--muted); }
.readiness-chip.level-low .summary-chip-count { color: var(--danger); }

.readiness-chip.level-low {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.documents-blockers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  margin-bottom: 14px;
}

.documents-blockers p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.document-critical-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  vertical-align: middle;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}

.module-tile.has-blockers .module-badge {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
/* === SeaMate v0.7.0b-4 Documents Readiness Score END === */

/* === SeaMate v0.7.0b-5 Overall Readiness Radar BEGIN === */
.hero-readiness-label {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.hero-readiness-label[data-level="high"] { color: var(--accent); }
.hero-readiness-label[data-level="mid"] { color: var(--muted); }
.hero-readiness-label[data-level="low"] { color: var(--danger); }
/* === SeaMate v0.7.0b-5 Overall Readiness Radar END === */

/* === SeaMate v0.8.5 Converters / Calculators BEGIN === */
.converters-screen {
  border: 1px solid var(--outline);
  border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--panel-2) 72%, transparent));
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  padding: 16px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.converters-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.converters-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
}

.converter-card {
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.converter-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.converter-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.converter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

/* Full-width converter field (e.g. ETA departure): a datetime-local input
 * has a wide intrinsic width and overflowed the app when placed in the grid,
 * so it sits on its own row and is clamped to the container width. */
.converter-full-field {
  margin-top: 10px;
}

.converter-full-field input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.converter-result {
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.converter-results-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 46vh;
  overflow-y: auto;
  border-radius: 12px;
}

.converter-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel-2) 60%, transparent);
}

.converter-result-label {
  color: var(--muted);
  font-size: 12.5px;
}

.converter-result-value {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: break-word;
}

@media (max-width: 380px) {
  .converters-screen { padding: 14px; }
  .converter-card { padding: 12px; }
}
/* === SeaMate v0.8.5 Converters / Calculators END === */

/* === SeaMate v0.8.0b-2 CV screen BEGIN === */
.cv-screen {
  border: 1px solid var(--outline);
  border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--panel-2) 72%, transparent));
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  padding: 16px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cv-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cv-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
}

.cv-actions-card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.ghost-button:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.cv-preview {
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  max-height: 60vh;
  overflow-y: auto;
}

@media (max-width: 380px) {
  .cv-screen { padding: 14px; }
}
/* === SeaMate v0.8.0b-2 CV screen END === */

/* === SeaMate v0.8.0b-5 Application form data BEGIN === */
.cv-application-card {
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cv-application-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
/* === SeaMate v0.8.0b-5 Application form data END === */

/* === SeaMate v0.9.3 CV structured form BEGIN === */
.cv-form-card {
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cv-form-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.cv-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.cv-form-full {
  grid-column: 1 / -1;
}

.cv-sea-service-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cv-sea-service-entry {
  border: 1px solid var(--outline);
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--panel-2) 55%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cv-sea-service-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  color: var(--text);
  font-size: 13px;
}
/* === SeaMate v0.9.3 CV structured form END === */

/* === SeaMate v0.9.7 CV photo BEGIN === */
.cv-photo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cv-photo-preview {
  width: 96px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel-2) 60%, transparent);
}

.cv-photo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cv-photo-upload {
  cursor: pointer;
  text-align: center;
}
/* === SeaMate v0.9.7 CV photo END === */

/* === SeaMate v0.9.x Checklists BEGIN === */
.checklists-screen {
  border: 1px solid var(--outline);
  border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--panel-2) 72%, transparent));
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  padding: 16px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.checklists-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.checklists-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
}

.checklist-sets-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-set-card {
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checklist-set-open {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  width: 100%;
}

.checklist-set-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checklist-set-meta {
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.checklist-set-progress {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.checklist-set-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checklist-empty-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 18px 0;
}

.checklist-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.checklist-tab {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.checklist-tab.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 56%, var(--outline));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.checklist-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checklist-create-form {
  margin-top: 4px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checklist-category-filter {
  margin-bottom: 4px;
}

.checklist-draft-tag {
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
}

.checklist-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checklist-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checklist-detail-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  flex: 1;
}

.checklist-progress-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.checklist-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checklist-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  font-size: 13.5px;
  color: var(--text);
}

.checklist-item-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.checklist-item-row span {
  flex: 1;
}

.checklist-item-delete {
  flex-shrink: 0;
  font-size: 15px;
}

.checklist-add-item-row {
  display: flex;
  gap: 8px;
}

.checklist-add-item-row input {
  flex: 1;
  min-height: 46px;
  border: 1px solid var(--outline);
  border-radius: 15px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--text);
}

@media (max-width: 380px) {
  .checklists-screen { padding: 14px; }
}
/* === SeaMate v0.9.x Checklists END === */

/* === SeaMate v0.7.0b-3 Documents edit/delete BEGIN === */
.document-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.document-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.document-action-icon:hover,
.document-action-icon:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
  outline: none;
}

.document-action-icon.is-danger:hover,
.document-action-icon.is-danger:focus-visible {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent);
}
/* === SeaMate v0.7.0b-3 Documents edit/delete END === */

/* === SeaMate v0.10.x Training BEGIN === */
.training-screen {
  border: 1px solid var(--outline);
  border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--panel-2) 72%, transparent));
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  padding: 16px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.training-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.training-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
}

.training-sections-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.training-section-card {
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.training-section-open {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  cursor: pointer;
}

.training-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

/* Not uppercased like .checklist-set-meta: this carries a full bilingual
 * phrase rather than a couple of short tags, and uppercase made it wrap. */
.training-section-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.training-section-progress {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.training-empty-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  padding: 18px 4px;
}

.training-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.training-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.training-detail-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  flex: 1;
}

.training-source-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.training-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.training-tab {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.training-tab.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 56%, var(--outline));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.training-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.training-progress-label {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.training-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.training-card {
  border: 1px solid var(--outline);
  border-left: 3px solid var(--outline);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  overflow: hidden;
  transition: border-color .18s ease;
}

.training-card.is-viewed {
  border-left-color: var(--ok);
}

.training-card-question {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.training-card-question::after {
  content: "▾";
  margin-left: auto;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
  transition: transform .18s ease;
}

.training-card-question[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.training-card-answer {
  margin: 0;
  padding: 0 14px 13px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.training-quiz-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.training-quiz-question {
  border: 1px solid var(--outline);
  border-radius: 16px;
  padding: 13px 14px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.training-quiz-question.is-correct {
  border-color: color-mix(in srgb, var(--ok) 55%, var(--outline));
}

.training-quiz-question.is-wrong {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--outline));
}

.training-quiz-text {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
}

.training-quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--panel-2) 45%, transparent);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.training-quiz-option input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.training-quiz-option.is-answer {
  border-color: color-mix(in srgb, var(--ok) 60%, transparent);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}

.training-quiz-option.is-wrong-choice {
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.training-quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.training-quiz-actions button {
  flex: 1 1 140px;
}

.training-quiz-result {
  margin: 0;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--outline));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
}

@media (max-width: 380px) {
  .training-screen { padding: 14px; }
}
/* === SeaMate v0.10.x Training END === */

/* === SeaMate v0.11.2 Server sync BEGIN === */
.sync-card {
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sync-card h3 {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.sync-status {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--muted);
}

.sync-status[data-tone="busy"] { color: var(--warning); }
.sync-status[data-tone="ok"]    { color: var(--ok); }
.sync-status[data-tone="error"] { color: var(--danger); }

.sync-stamp {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

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

.sync-actions button {
  flex: 1 1 150px;
}

.sync-actions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.sync-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
/* === SeaMate v0.11.2 Server sync END === */

/* === SeaMate v0.11.4 Documents layout fixes BEGIN === */
/* Найдено в дизайн-ревью на живом проде, замерами а не на глаз. */

/* Тулбар уезжал за правый край: на 390px вьюпорта он доходил до 393px и обе
 * кнопки обрезались. Заголовок теперь переносится, а тулбар занимает свою
 * строку — на телефоне это к тому же удобнее, чем сжатые кнопки в углу. */
.documents-header {
  flex-wrap: wrap;
}

.documents-header > div:not(.documents-toolbar) {
  flex: 1 1 auto;
  min-width: 0;
}

.documents-header .documents-toolbar {
  flex: 1 1 100%;
  justify-content: flex-start;
}

/* Подвал карточки был строкой [дата][кнопки] с flex-wrap на кнопках: на узком
 * экране иконки переносились отдельной строкой, оставляя мёртвый провал, а
 * дату сжимало до переноса посреди неё самой. Колонка решает и то, и другое. */
.document-footer {
  flex-direction: column;
  align-items: stretch;
}

.document-expiry {
  /* Дата не должна рваться на «2025-» и «08-08» — это разрушает беглый просмотр,
   * а сроки здесь и есть то, ради чего экран открывают. */
  white-space: nowrap;
}

.document-controls {
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.document-controls .reminder-toggle {
  flex: 1 1 auto;
  justify-content: center;
}

/* Тач-таргет: 40px ниже рекомендованных 44. Правится один раз здесь, а не в
 * каждом экране, потому что .ghost-button переиспользуется везде. */
.ghost-button {
  min-height: 44px;
}
/* === SeaMate v0.11.4 Documents layout fixes END === */

/* === SeaMate v0.12.0 i18n BEGIN === */
.lang-button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.lang-button:hover,
.lang-button:focus-visible {
  border-color: var(--accent);
  outline: none;
}

/* Первый запуск: выбор языка. Перекрывает всё, потому что до ответа любой
 * экран под ним всё равно на неизвестном пользователю языке. */
.language-picker {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
}

.language-picker-card {
  width: 100%;
  max-width: 340px;
  border: 1px solid var(--outline);
  border-radius: 22px;
  padding: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--panel-2) 78%, transparent));
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.language-picker-card h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.language-picker-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.language-picker-options button {
  width: 100%;
  min-height: 50px;
  font-size: 15px;
  font-weight: 700;
}


/* Подсказка под заголовком выбора языка. Не .eyebrow: тот класс делает
 * uppercase с разрядкой и рассчитан на короткую метку — целое предложение в
 * нём читается как крик и теряет строчные буквы, по которым глаз ведёт. */
.language-picker-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* Флаги языков (v0.12.1) */
.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.lang-button #langFlag {
  font-size: 15px;
  line-height: 1;
}

.language-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding-inline: 18px;
}

.language-flag {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.language-picker-card h2 {
  /* Двуязычный заголовок длиннее одноязычного и должен переноситься чисто. */
  font-size: 18px;
  line-height: 1.3;
  text-wrap: balance;
}
/* === SeaMate v0.12.0 i18n END === */

/* Русский тэглайн длиннее английского и вылезал из .brand-card под кнопки
 * шапки: у вложенного блока не было min-width: 0, поэтому flex не давал ему
 * сжаться, и текст рисовался поверх соседа (боксы при этом не пересекались,
 * что и делало причину неочевидной). */
.brand-card > div {
  min-width: 0;
}

/* break-word, а не anywhere: anywhere рвёт слово в любом месте и давало
 * «PROFESSION AL MARITIME COPILOT». break-word переносит по пробелам и режет
 * слово только если оно физически не влезает. */
.brand-card .eyebrow {
  overflow-wrap: break-word;
}

/* Шапка стала теснее, когда к бейджу и теме добавилась кнопка языка: у
 * бренд-блока отняли около 50px. Тэглайн — украшение, заголовок несёт
 * узнавание сам, поэтому на узких экранах он уходит, а не ломается. */
@media (max-width: 430px) {
  .brand-card .eyebrow {
    display: none;
  }
}

/* Название продукта не переносится: «SeaMate» и «AI» на разных строках — это
 * уже не логотип. Русское «на связи» длиннее английского «online», и вместе
 * с новой кнопкой языка оно продавливало заголовок на вторую строку. */
.brand-card h1 {
  white-space: nowrap;
}

.header-actions {
  flex-shrink: 0;
}

/* Индикатор связи в шапке — точка, а не слово (v0.12.3). Текст состояния
 * живёт в aria-label и title: скринридер и наведение его получают, а место в
 * шапке остаётся названию продукта. */
.connection-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}

.connection-dot.offline {
  background: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent);
}