:root {
  color-scheme: dark;
  --ui-font-stack: "Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --bg-top: #050d15;
  --bg-bottom: #02060b;
  --panel: rgba(7, 18, 29, 0.82);
  --panel-strong: rgba(8, 20, 32, 0.92);
  --panel-soft: rgba(10, 24, 38, 0.7);
  --panel-line: rgba(173, 225, 255, 0.12);
  --panel-line-strong: rgba(173, 225, 255, 0.2);
  --ink: #e8f7ff;
  --muted: #89aabd;
  --brand: #7de0f8;
  --brand-strong: #38bddf;
  --coral: #ff9871;
  --gold: #ffd979;
  --seafoam: #92e1c4;
  --danger: #ff8498;
  --lcd-bg-top: #252823;
  --lcd-bg-bottom: #10120f;
  --lcd-line: rgba(118, 236, 74, 0.16);
  --lcd-ink: #a8ff6a;
  --lcd-ink-strong: #d4ff8c;
  --shadow: 0 26px 70px rgba(0, 0, 0, 0.38);
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --transition: 180ms ease;
  --app-viewport-width: 100vw;
  --app-viewport-height: 100vh;
  --app-stable-viewport-height: 100vh;
  --touch-browser-guard-top: 0px;
  --touch-browser-guard-right: 0px;
  --touch-browser-guard-bottom: 0px;
  --touch-browser-guard-left: 0px;
}

@supports (height: 100dvh) {
  :root {
    --app-viewport-height: 100dvh;
  }
}

@supports (height: 100svh) {
  :root {
    --app-stable-viewport-height: 100svh;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  :root {
    --touch-browser-guard-top: calc(env(safe-area-inset-top, 0px) + 12px);
    --touch-browser-guard-right: calc(env(safe-area-inset-right, 0px) + 12px);
    --touch-browser-guard-bottom: calc(env(safe-area-inset-bottom, 0px) + 52px);
    --touch-browser-guard-left: calc(env(safe-area-inset-left, 0px) + 12px);
  }
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  :root {
    --touch-browser-guard-top: env(safe-area-inset-top, 0px);
    --touch-browser-guard-right: env(safe-area-inset-right, 0px);
    --touch-browser-guard-bottom: env(safe-area-inset-bottom, 0px);
    --touch-browser-guard-left: env(safe-area-inset-left, 0px);
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--ui-font-stack);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: var(--ink);
  background:
    radial-gradient(circle at 22% 16%, rgba(69, 150, 209, 0.12), transparent 18%),
    radial-gradient(circle at 78% 78%, rgba(40, 90, 132, 0.18), transparent 24%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

body {
  user-select: none;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 96px);
  overflow: hidden;
  isolation: isolate;
  background: #022a5c;
  color: #fff;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 900ms ease;
}

.loading-overlay.is-hiding {
  opacity: 0;
  pointer-events: none;
}

.loading-overlay.is-ready,
.loading-overlay.is-error {
  cursor: default;
}

.loading-overlay-background,
.loading-overlay-underwater {
  z-index: 0;
}

.loading-overlay-background.is-image-background + .loading-overlay-underwater {
  opacity: 0.42;
}

.loading-overlay-content {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(1000px, 100%);
  height: 100%;
  min-height: 0;
}

.loading-overlay-logo {
  display: block;
  width: 100%;
  max-width: 1000px;
  max-height: min(68vh, 680px);
  object-fit: contain;
}
html.halloween-mode .loading-overlay-logo { filter: drop-shadow(0 0 10px rgba(129, 255, 184, 0.34)) hue-rotate(7deg); }
.settings-select { min-width: 132px; padding: 8px 10px; border: 1px solid rgba(120, 220, 255, 0.35); border-radius: 9px; color: #eefcff; background: rgba(4, 35, 54, 0.92); }

.loading-overlay-text {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 4vh, 64px);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 4px 20px rgba(0, 20, 60, 0.7);
  transform: translateX(-50%);
  width: min(100%, 520px);
}


.loading-overlay.is-ready .loading-overlay-text,
.loading-overlay.is-error .loading-overlay-text {
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(10, 43, 79, 0.82), rgba(6, 28, 55, 0.9));
  border: 1px solid rgba(191, 235, 255, 0.34);
  box-shadow:
    0 20px 46px rgba(0, 15, 45, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* The start screen is driven by its explicit actions. The old welcome pill
   looked like a third control and made the full overlay appear clickable. */
.loading-overlay.is-ready .loading-overlay-text {
  display: none;
}

.loading-overlay.is-error .loading-overlay-text {
  background: linear-gradient(180deg, rgba(116, 30, 55, 0.9), rgba(62, 15, 38, 0.94));
  border-color: rgba(255, 196, 215, 0.5);
}

/* Keep the normal and Halloween loading passes visually identical: a compact
   status directly below the centered logo, rather than a large label at the
   bottom of the scene. */
.loading-overlay:not(.is-ready):not(.is-error) .loading-overlay-text {
  top: calc(50% + 170px);
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
  font-size: .92rem;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 20, 60, .78);
}

.loading-overlay:not(.is-ready):not(.is-error) .loading-overlay-text::before {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(235, 249, 255, .42);
  border-top-color: #fff;
  border-radius: 50%;
  content: "";
  animation: loadingOverlaySpinner .72s linear infinite;
}

@keyframes loadingOverlaySpinner { to { transform: rotate(1turn); } }

/* During the final fade-out, keep the base loading label hidden. Without this,
   removing .is-ready briefly reactivates its centered spinner by itself. */
.loading-overlay.is-hiding .loading-overlay-text {
  display: none !important;
}
.loading-overlay.is-hiding .loading-overlay-text::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.loading-overlay-error-details,
.loading-overlay-error-actions,
.loading-overlay-help-button,
.loading-overlay-recovery-dialog {
  display: none;
}

.loading-overlay.is-error .loading-overlay-content {
  align-content: center;
  gap: 28px;
}

.loading-overlay.is-error .loading-overlay-logo {
  max-height: min(46vh, 460px);
}

.loading-overlay.is-error .loading-overlay-text {
  position: static;
  transform: none;
}

.loading-overlay.is-error .loading-overlay-error-details:not([hidden]) {
  display: block;
  width: min(680px, 92vw);
  max-height: min(22vh, 180px);
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid rgba(255, 214, 226, 0.28);
  border-radius: 12px;
  background: rgba(30, 8, 20, 0.76);
  color: rgba(255, 239, 245, 0.92);
  font: 600 0.82rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: left;
  user-select: text;
  white-space: pre-wrap;
  word-break: break-word;
}

.loading-overlay.is-error .loading-overlay-error-actions:not([hidden]) {
  display: flex;
  gap: 10px;
}

.loading-overlay-error-actions button {
  padding: 10px 16px;
  border: 1px solid rgba(191, 235, 255, 0.4);
  border-radius: 999px;
  color: #f5fcff;
  background: rgba(7, 43, 70, 0.9);
  cursor: pointer;
}

.loading-overlay-error-actions button:hover,
.loading-overlay-error-actions button:focus-visible {
  border-color: rgba(191, 235, 255, 0.82);
  background: rgba(10, 61, 96, 0.96);
}

.loading-overlay.is-error .loading-overlay-help-button {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(207, 241, 255, 0.58);
  border-radius: 50%;
  color: #f4fcff;
  background: rgba(5, 48, 82, 0.9);
  box-shadow: 0 12px 30px rgba(0, 20, 48, 0.38);
  font-size: 1.5rem;
  font-weight: 900;
  cursor: pointer;
}

.loading-overlay.is-error .loading-overlay-recovery-dialog:not([hidden]) {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 60px);
  z-index: 4;
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid rgba(207, 241, 255, 0.4);
  border-radius: 16px;
  color: #f3fbff;
  background: rgba(3, 30, 54, 0.97);
  box-shadow: 0 20px 50px rgba(0, 12, 34, 0.55);
  text-align: left;
}

.loading-overlay-recovery-dialog strong {
  font-size: 1.05rem;
}

.loading-overlay-recovery-dialog p {
  margin: 0;
  color: rgba(231, 247, 255, 0.82);
  font-size: 0.88rem;
  line-height: 1.45;
}

.loading-overlay-recovery-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.loading-overlay-recovery-actions button {
  min-width: 72px;
  padding: 9px 14px;
  border: 1px solid rgba(191, 235, 255, 0.4);
  border-radius: 999px;
  color: #f5fcff;
  background: rgba(8, 61, 96, 0.92);
  cursor: pointer;
}

.loading-overlay-recovery-actions [data-loading-recovery-confirm] {
  border-color: rgba(255, 183, 204, 0.52);
  background: rgba(111, 28, 54, 0.94);
}

.loading-overlay-recovery-dialog small {
  min-height: 1.2em;
  color: rgba(255, 205, 220, 0.9);
}

@keyframes loading-water-light {
  0% {
    background-position: 0% 50%, 0 0;
  }

  50% {
    background-position: 100% 50%, 110px 70px;
  }

  100% {
    background-position: 0% 50%, 220px 140px;
  }
}

@keyframes loading-water-drift {
  0% {
    transform: translate(-4%, -2%) scale(1.05) rotate(0deg);
  }

  100% {
    transform: translate(4%, 3%) scale(1.18) rotate(6deg);
  }
}

@keyframes loading-water-caustics {
  0% {
    transform: translateX(-6%) translateY(-3%) scale(1.3) rotate(0deg);
  }

  100% {
    transform: translateX(6%) translateY(3%) scale(1.35) rotate(2deg);
  }
}

@media (max-width: 480px) {
  .loading-overlay-text {
    font-size: 1.45rem;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .loading-overlay-content {
    width: min(92vw, 560px);
  }

  .loading-overlay-logo {
    width: min(92vw, 560px);
    max-height: min(44vh, 340px);
  }

  .loading-overlay-text {
    bottom: clamp(18px, 5vh, 44px);
    font-size: clamp(1.1rem, 4.8vw, 1.45rem);
    width: 100%;
  max-width: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-overlay {
    transition: none;
  }

  .loading-overlay::before,
  .loading-overlay::after,
  .tank-stage-underwater,
  .tank-stage-underwater::before,
  .tank-stage-underwater::after,
  .background-underwater-preview::before,
  .background-underwater-preview::after {
    animation: none;
  }
}

button,
input {
  font: inherit;
}

input {
  color: var(--ink);
}

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

h2 {
  margin-bottom: 4px;
}

.app-shell,
.tank-page {
  width: var(--app-viewport-width);
  min-height: var(--app-viewport-height);
}

html[data-layout-ratio-lock="true"] .app-shell {
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--layout-ratio-lock-width, var(--app-viewport-width));
  height: var(--layout-ratio-lock-height, var(--app-viewport-height));
  min-height: 0;
  transform: translate(-50%, -50%) scale(var(--layout-ratio-lock-scale, 1));
  transform-origin: center center;
  overflow: hidden;
  contain: layout paint;
}

html[data-layout-ratio-lock="true"] body {
  width: 100vw;
  height: 100vh;
  /* The unused viewport around the scaled, locked composition is deliberate
     letterboxing. Keep it fully opaque so no background gradients or scene
     effects bleed into the top/bottom bars. */
  background: #000;
}

.tank-page {
  display: block;
}

.aquarium-card {
  width: var(--app-viewport-width);
  height: var(--app-viewport-height);
  display: grid;
  place-items: center;
  padding:
    var(--touch-browser-guard-top)
    var(--touch-browser-guard-right)
    var(--touch-browser-guard-bottom)
    var(--touch-browser-guard-left);
  overflow: hidden;
}

.tank-stage {
  position: relative;
  width: 100%;
  height: min(100%, var(--app-stable-viewport-height));
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(6, 28, 46, 0.96), rgba(3, 10, 18, 0.98));
  box-shadow: none;
}

.tank-stage.allow-touch-scroll {
  touch-action: pan-x pan-y;
}

.tank-stage-background,
.tank-stage-underwater {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.tank-stage-background {
  z-index: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--underwater-surface-bloom-rgb, 120, 220, 255), 0.35), transparent 35%),
    radial-gradient(circle at 70% 80%, rgba(var(--underwater-shadow-bloom-rgb, 0, 80, 180), 0.45), transparent 45%),
    linear-gradient(180deg,
      var(--underwater-surface, #7fdcff) 0%,
      var(--underwater-mid, #1b8bd1) 38%,
      var(--underwater-deep, #064f8f) 70%,
      var(--underwater-abyss, #022a5c) 100%);
}

.tank-stage-underwater {
  background: none;
}

.tank-stage-underwater::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(var(--underwater-drift-a-rgb, 150, 230, 255), 0.25), transparent 35%),
    radial-gradient(ellipse at 80% 40%, rgba(var(--underwater-drift-b-rgb, 80, 190, 255), 0.2), transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(var(--underwater-drift-c-rgb, 0, 120, 220), 0.25), transparent 45%);
  filter: blur(35px);
  animation: loading-water-drift 36s ease-in-out infinite alternate;
}

.tank-stage-underwater::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.16) 0%,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.03) 18%,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.14) 32%,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.02) 48%,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.1) 65%,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.03) 100%
    ),
    repeating-linear-gradient(
      100deg,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.08) 0px,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.08) 2px,
      transparent 3px,
      transparent 42px
    );
  background-size: 300% 300%, auto;
  opacity: 0.3;
  filter: blur(6px);
  transform: scale(1.3);
  animation:
    loading-water-light 28s ease-in-out infinite,
    loading-water-caustics 18s linear infinite;
}

#tankCanvas,
#grimeCanvas,
#glassCanvas,
.tank-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#tankCanvas {
  z-index: 1;
}

#grimeCanvas {
  z-index: 2;
}

#glassCanvas {
  z-index: 3;
}

.tank-overlay {
  z-index: 4;
  pointer-events: none;
}

.tank-display,
.tank-sidebar,
.tank-bottom-dock,
.edit-decor-tray,
.fish-inspector,
.fish-action-flyout,
.fish-action-submenu,
.fish-action-queue-dock,
.selected-fish-needs-panel,
.tank-context-menu,
.store-overlay,
.tank-nav-button,
.daily-bonus-bell,
.decor-settings-badge-button,
.decor-context-menu-button,
.decor-resize-corner-handle,
.decor-resize-indicator {
  pointer-events: auto;
}

.fish-action-flyout {
  --fish-action-x: 50%;
  --fish-action-y: 50%;
  position: absolute;
  left: var(--fish-action-x);
  top: var(--fish-action-y);
  z-index: 7;
  width: min(600px, calc(100vw - 28px));
  height: 340px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.fish-action-flyout[hidden] {
  display: none;
}

.fish-action-flyout::before {
  content: "";
  position: absolute;
  inset: 44px 132px 40px;
  width: auto;
  height: auto;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(79, 249, 244, 0.2), transparent 4px),
    radial-gradient(circle at 27% 16%, rgba(79, 249, 244, 0.68), transparent 4px),
    radial-gradient(circle at 24% 40%, rgba(79, 249, 244, 0.68), transparent 4px),
    radial-gradient(circle at 25% 65%, rgba(79, 249, 244, 0.68), transparent 4px),
    radial-gradient(circle at 75% 25%, rgba(79, 249, 244, 0.68), transparent 4px),
    radial-gradient(circle at 78% 52%, rgba(79, 249, 244, 0.68), transparent 4px),
    radial-gradient(circle at 75% 78%, rgba(79, 249, 244, 0.68), transparent 4px);
  opacity: 0.74;
  filter: drop-shadow(0 0 8px rgba(79, 249, 244, 0.42));
}

.fish-action-flyout-branch {
  position: absolute;
  top: 50%;
  display: grid;
  gap: 3px;
  width: 190px;
  transform: translateY(-50%);
  pointer-events: auto;
}

.fish-action-flyout-left {
  left: 0;
}

.fish-action-flyout-right {
  right: 0;
}

.fish-action-flyout-button {
  box-sizing: border-box;
  width: 176px;
  min-height: 42px;
  border: 1px solid rgba(73, 241, 236, 0.78);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(20, 40, 66, 0.86), rgba(8, 22, 38, 0.92));
  background-clip: padding-box;
  color: #72f6e9;
  font-weight: 900;
  font-size: 0.96rem;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(90, 249, 244, 0.12),
    0 0 16px rgba(74, 238, 236, 0.28),
    0 12px 24px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    opacity var(--transition);
}

.fish-action-flyout.is-compact-actions {
  height: 382px;
}

.fish-action-flyout.is-compact-actions .fish-action-flyout-button {
  min-height: 38px;
  font-size: 0.88rem;
}

.fish-action-flyout-button:hover,
.fish-action-flyout-button:focus-visible {
  transform: translateY(-1px) scale(1.015);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(90, 249, 244, 0.2),
    0 0 24px rgba(74, 238, 236, 0.42),
    0 14px 26px rgba(0, 0, 0, 0.32);
}

.fish-action-flyout-button:disabled {
  cursor: default;
  opacity: 0.42;
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

.fish-action-flyout-button.is-clear {
  color: #ffd966;
}

.fish-action-flyout-button.is-active-folder {
  border-color: rgba(255, 217, 102, 0.82);
  color: #ffd966;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(255, 217, 102, 0.14),
    0 0 24px rgba(255, 217, 102, 0.24),
    0 14px 26px rgba(0, 0, 0, 0.32);
}

.fish-action-flyout-name {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 82px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(92, 250, 244, 0.72);
  border-radius: 10px;
  background: rgba(9, 30, 48, 0.86);
  color: #e6fbff;
  font-weight: 900;
  font-size: 0.86rem;
  transform: translate(-50%, -92px);
  box-shadow: 0 0 16px rgba(76, 238, 236, 0.32);
  cursor: pointer;
  pointer-events: auto;
}

.fish-action-flyout-settings {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 62px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(92, 250, 244, 0.72);
  border-radius: 21px;
  background: rgba(9, 30, 48, 0.9);
  color: #7ff7ef;
  font-weight: 900;
  font-size: 0.62rem;
  transform: translate(-50%, 90%);
  box-shadow: 0 0 18px rgba(76, 238, 236, 0.38);
  cursor: pointer;
  pointer-events: auto;
}

.fish-action-queue {
  position: absolute;
  left: 50%;
  bottom: 2px;
  display: flex;
  max-width: min(520px, calc(100vw - 44px));
  gap: 8px;
  padding: 6px;
  overflow-x: auto;
  transform: translateX(-50%);
  pointer-events: auto;
  scrollbar-width: thin;
}

.fish-action-queue:empty {
  display: none;
}

.fish-action-queue-button {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 78px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(92, 250, 244, 0.52);
  border-radius: 18px;
  background: rgba(8, 26, 42, 0.78);
  background-clip: padding-box;
  color: rgba(191, 247, 250, 0.92);
  font-weight: 900;
  font-size: 0.76rem;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 16px rgba(0, 0, 0, 0.24),
    0 0 14px rgba(74, 238, 236, 0.18);
  cursor: pointer;
  overflow: hidden;
}

.fish-action-queue-button.is-active {
  border-color: rgba(255, 217, 102, 0.82);
  color: #ffd966;
  background: rgba(12, 31, 48, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(255, 217, 102, 0.24);
}

.fish-action-queue-button.is-cancelling,
.fish-action-queue-chip.is-cancelling {
  border-color: rgba(255, 92, 112, 0.82);
  color: #ff6b7d;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #ff304f;
  background: rgba(45, 10, 24, 0.84);
}

.fish-action-queue-button:hover,
.fish-action-queue-button:focus-visible {
  transform: translateY(-1px);
}

.fish-action-queue-button:disabled,
.fish-action-queue-chip:disabled {
  cursor: default;
}

.fish-action-queue-button {
  padding-bottom: 7px;
}

.fish-action-queue-button-content {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  gap: 1px;
}

.fish-action-queue-button-primary,
.fish-action-queue-chip-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.fish-action-queue-button-primary > span:first-child,
.fish-action-queue-chip-primary > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fish-action-queue-button-time {
  flex: 0 0 auto;
  font-size: 0.68rem;
  opacity: 0.88;
}

.fish-action-queue-phase {
  overflow: hidden;
  color: rgba(210, 246, 250, 0.72);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fish-action-progress {
  position: absolute;
  z-index: 1;
  left: 8px;
  right: 8px;
  bottom: 3px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(188, 225, 246, 0.14);
  pointer-events: none;
}

.fish-action-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
  opacity: 0.82;
  transform: scaleX(var(--fish-action-progress, 1));
  transform-origin: left center;
  transition: transform 260ms linear;
}

.fish-action-queue-dock {
  position: absolute;
  top: 108px;
  right: 12px;
  z-index: 6;
  display: grid;
  width: min(220px, calc(100vw - 24px));
  max-height: min(460px, calc(100% - 132px));
  gap: 8px;
  overflow-y: auto;
  pointer-events: auto;
  scrollbar-width: thin;
}

.fish-action-queue-dock[hidden] {
  display: none;
}

.fish-action-submenu {
  --fish-action-submenu-x: 50%;
  --fish-action-submenu-y: 50%;
  position: absolute;
  left: var(--fish-action-submenu-x);
  top: var(--fish-action-submenu-y);
  z-index: 8;
  width: min(206px, calc(100vw - 28px));
  padding: 7px;
  border: 1px solid rgba(71, 239, 232, 0.8);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 34, 54, 0.92), rgba(4, 18, 31, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(78, 246, 240, 0.12),
    0 0 22px rgba(63, 232, 229, 0.24),
    0 18px 36px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(12px) saturate(1.12);
  pointer-events: auto;
  overflow: hidden;
}

.fish-action-flyout-button.is-active-folder {
  border-color: rgba(255, 217, 102, 0.82);
}

.fish-action-submenu[hidden] {
  display: none;
}

.fish-action-submenu-title {
  margin: 0 0 7px;
  color: #e6fbff;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
}

.fish-action-submenu-list {
  display: grid;
  gap: 5px;
}

.fish-action-submenu-button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid rgba(73, 241, 236, 0.66);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 40, 66, 0.86), rgba(8, 22, 38, 0.92));
  background-clip: padding-box;
  color: #80f7ee;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(90, 249, 244, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  overflow: hidden;
}

.fish-action-submenu-label {
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fish-action-submenu-tags {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
}

.fish-action-submenu-tag {
  color: rgba(126, 247, 239, 0.88);
}

.fish-action-submenu-tag.is-gain {
  color: #2ff3a4;
}

.fish-action-submenu-tag.is-cost {
  color: #ff9e34;
}

.fish-action-submenu-button.is-clear {
  color: #ffd966;
}

.fish-action-submenu-button:hover,
.fish-action-submenu-button:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(90, 249, 244, 0.18),
    0 0 18px rgba(74, 238, 236, 0.34),
    0 10px 20px rgba(0, 0, 0, 0.3);
}

.fish-action-target-menu {
  --fish-action-target-x: 50%;
  --fish-action-target-y: 50%;
  position: absolute;
  left: var(--fish-action-target-x);
  top: var(--fish-action-target-y);
  z-index: 8;
  width: min(238px, calc(100vw - 28px));
  padding: 10px;
  border: 1px solid rgba(71, 239, 232, 0.8);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 34, 54, 0.92), rgba(4, 18, 31, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(78, 246, 240, 0.12),
    0 0 22px rgba(63, 232, 229, 0.24),
    0 18px 36px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(12px) saturate(1.12);
  pointer-events: auto;
}

.fish-action-target-menu[hidden] {
  display: none;
}

.fish-action-target-title {
  margin: 0 0 8px;
  color: #e6fbff;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
}

.fish-action-target-list {
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.fish-action-target-button {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 46px;
  width: 100%;
  padding: 5px 10px 5px 6px;
  border: 1px solid rgba(73, 241, 236, 0.66);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(20, 40, 66, 0.86), rgba(8, 22, 38, 0.92));
  background-clip: padding-box;
  color: #80f7ee;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(90, 249, 244, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  overflow: hidden;
}

.fish-action-target-button:hover,
.fish-action-target-button:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(90, 249, 244, 0.18),
    0 0 18px rgba(74, 238, 236, 0.34),
    0 10px 20px rgba(0, 0, 0, 0.3);
}

.fish-action-target-button.is-risky-mate {
  border-color: rgba(255, 190, 54, 0.72);
  color: #ffd966;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 190, 54, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.24);
}

.fish-action-target-thumb {
  display: block;
  width: 46px;
  height: 32px;
  object-fit: contain;
}

.fish-action-target-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.fish-action-target-name {
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fish-action-target-meta {
  min-width: 0;
  overflow: hidden;
  color: rgba(211, 248, 249, 0.76);
  font-size: 0.66rem;
  font-weight: 900;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fish-action-target-button.is-risky-mate .fish-action-target-meta {
  color: rgba(255, 217, 102, 0.9);
}

.selected-fish-needs-panel {
  position: absolute;
  left: 26px;
  bottom: 118px;
  z-index: 6;
  width: min(270px, calc(100vw - 52px));
  padding: 14px 14px 16px;
  border: 1px solid rgba(71, 239, 232, 0.78);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 34, 54, 0.86), rgba(4, 18, 31, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(78, 246, 240, 0.13),
    0 0 22px rgba(63, 232, 229, 0.28),
    0 18px 38px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(13px) saturate(1.18);
  pointer-events: auto;
}

.selected-fish-needs-panel[hidden] {
  display: none;
}

/* A fish's little life, with optional invitations and one useful care hint. */
.selected-fish-needs-panel .selected-fish-needs-header {
  gap: 8px;
  margin-bottom: 10px;
}

.selected-fish-needs-panel .selected-fish-mood-pill {
  min-height: 25px;
  padding: 0 10px;
  box-shadow: none;
}

.fish-companion-close {
  flex: 0 0 26px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #bdd9e4;
  font: inherit;
  cursor: pointer;
}

.fish-companion-activity,
.fish-companion-preference,
.fish-companion-hint {
  margin: 0 0 8px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.fish-companion-activity { color: #effbff; font-size: 0.82rem; }
.fish-companion-preference { color: #a8cbd9; font-size: 0.7rem; }
.fish-companion-hint {
  margin: 12px 0;
  padding: 9px 10px;
  border-left: 2px solid #7cc9cb;
  border-radius: 4px;
  background: rgba(110, 210, 211, 0.08);
  color: #cce7ed;
  font-size: 0.72rem;
}
.fish-companion-hint[data-care-tone="warn"] { border-color: #e3bb72; color: #ffe0a9; }
.fish-companion-hint[data-care-tone="danger"] { border-color: #ff9393; color: #ffbdbd; }
.fish-companion-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.fish-companion-actions button {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px;
  border: 1px solid rgba(125, 221, 223, 0.35);
  border-radius: 6px;
  background: rgba(38, 112, 126, 0.3);
  color: #e4f9ff;
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}
.fish-companion-actions button:hover { background: rgba(52, 146, 157, 0.45); }
.fish-companion-actions button:disabled { opacity: 0.5; cursor: default; }
.fish-companion-actions button:focus-visible,
.fish-companion-close:focus-visible { outline: 2px solid #8be8e4; outline-offset: 2px; }

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

.selected-fish-needs-name {
  min-width: 0;
  color: #f1fbff;
  font-size: 1rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-fish-mood-pill {
  flex: 0 0 auto;
  max-width: 126px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 18px;
  border: 1px solid rgba(99, 255, 146, 0.72);
  border-radius: 999px;
  background: rgba(25, 105, 57, 0.38);
  color: #dfffe8;
  font-size: 0.7rem;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 16px rgba(75, 255, 125, 0.18);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-fish-mood-pill[data-mood-tone="okay"] {
  border-color: rgba(90, 238, 222, 0.72);
  background: rgba(13, 91, 100, 0.34);
  color: #dffeff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 16px rgba(75, 232, 255, 0.16);
}

.selected-fish-mood-pill[data-mood-tone="warn"] {
  border-color: rgba(255, 184, 52, 0.74);
  background: rgba(115, 77, 14, 0.38);
  color: #fff1bd;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 16px rgba(255, 184, 52, 0.18);
}

.selected-fish-mood-pill[data-mood-tone="danger"] {
  border-color: rgba(255, 85, 112, 0.78);
  background: rgba(106, 18, 38, 0.42);
  color: #ffe2e7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 18px rgba(255, 76, 105, 0.22);
}

.fish-action-queue-group {
  border: 1px solid rgba(85, 242, 237, 0.5);
  border-radius: 18px;
  background: rgba(4, 20, 34, 0.72);
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.25),
    0 0 18px rgba(74, 238, 236, 0.18);
  overflow: hidden;
  isolation: isolate;
}

.fish-action-queue-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 17px 17px 0 0;
  background: rgba(8, 32, 51, 0.86);
  background-clip: padding-box;
  color: #e6fbff;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0;
  cursor: pointer;
}

.fish-action-queue-count {
  color: rgba(126, 247, 239, 0.88);
  font-size: 0.7rem;
}

.fish-action-queue-list {
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 0 0 17px 17px;
  background: rgba(4, 20, 34, 0.2);
  background-clip: padding-box;
  overflow: hidden;
}

.fish-action-queue-chip {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 1px;
  width: 100%;
  min-height: 42px;
  padding: 5px 10px 8px;
  border: 1px solid rgba(92, 250, 244, 0.44);
  border-radius: 17px;
  background: rgba(8, 26, 42, 0.82);
  background-clip: padding-box;
  color: rgba(191, 247, 250, 0.94);
  font-weight: 900;
  font-size: 0.74rem;
  letter-spacing: 0;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}

.fish-action-queue-chip-primary {
  position: relative;
  z-index: 1;
}

.fish-action-queue-chip.is-active {
  border-color: rgba(255, 217, 102, 0.82);
  color: #ffd966;
  background: rgba(12, 31, 48, 0.92);
  background-clip: padding-box;
}

.fish-action-queue-chip.is-cancelling {
  border-color: rgba(255, 75, 104, 0.9);
  color: #ff8a9a;
  background: rgba(45, 10, 24, 0.9);
  background-clip: padding-box;
}

.fish-action-queue-chip.is-cancelling::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: #ff304f;
  box-shadow: 0 0 8px rgba(255, 48, 79, 0.55);
  transform: translateY(-50%) scaleX(1);
  transform-origin: left center;
  pointer-events: none;
}

.fish-action-queue-chip.is-cancelling .fish-action-queue-chip-time {
  text-decoration: none;
}

.fish-action-queue-chip-time {
  color: inherit;
  opacity: 0.86;
  font-size: 0.68rem;
}

@media (max-width: 760px) {
  .fish-action-flyout {
    width: min(520px, calc(100vw - 20px));
    height: 320px;
  }

  .fish-action-flyout-branch {
    top: 50%;
    width: 150px;
    gap: 10px;
    transform: translateY(-50%);
  }

  .fish-action-flyout-button {
    width: 140px;
    min-height: 36px;
    font-size: 0.78rem;
  }

  .fish-action-flyout-left {
    left: 0;
    right: auto;
  }

  .fish-action-flyout-right {
    left: auto;
    right: 0;
  }

  .fish-action-flyout-left .fish-action-flyout-button,
  .fish-action-flyout-right .fish-action-flyout-button {
    margin-left: 0;
    margin-right: 0;
  }

  .fish-action-flyout-name {
    min-width: 70px;
    min-height: 30px;
    font-size: 0.74rem;
    transform: translate(-50%, -84px);
  }

  .fish-action-flyout-settings {
    width: 54px;
    min-height: 32px;
    font-size: 0.56rem;
    transform: translate(-50%, 84%);
  }

  .fish-action-queue {
    bottom: -2px;
    max-width: min(440px, calc(100vw - 30px));
  }

  .fish-action-queue-dock {
    top: 88px;
    right: 8px;
    width: min(190px, calc(100vw - 16px));
    max-height: min(360px, calc(100% - 108px));
  }

  .selected-fish-needs-panel {
    left: 10px;
    bottom: 92px;
    width: min(248px, calc(100vw - 20px));
    padding: 12px;
  }

  .fish-need-row {
    grid-template-columns: 28px 62px minmax(0, 1fr);
    gap: 7px;
  }
}

.decor-settings-badge-button {
  position: absolute;
  z-index: 8;
  height: 28px;
  min-width: 118px;
  padding: 0 14px;
  border: 1px solid rgba(156, 241, 255, 0.74);
  border-radius: 8px;
  background: rgba(6, 16, 24, 0.82);
  color: rgba(234, 248, 255, 0.96);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(104, 232, 255, 0.32);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background var(--transition),
    opacity var(--transition);
}

.decor-settings-badge-button:hover,
.decor-settings-badge-button:focus-visible {
  background: rgba(9, 30, 42, 0.9);
  transform: translate(-50%, -54%);
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(104, 232, 255, 0.42);
}

.decor-context-menu-button {
  position: absolute;
  z-index: 10;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(156, 241, 255, .78);
  border-radius: 8px;
  background: rgba(5, 29, 45, .92);
  color: #effcff;
  font-size: 1.5rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.decor-context-menu-button[hidden] { display: none; }
.decor-context-menu-button:hover, .decor-context-menu-button:focus-visible { outline: 2px solid rgba(156, 241, 255, .78); outline-offset: 2px; }

.decor-resize-handles {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

.decor-resize-handles[hidden],
.decor-resize-indicator[hidden] {
  display: none !important;
}

.decor-resize-corner-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2px solid rgba(238, 253, 255, 0.98);
  border-radius: 2px;
  background: rgba(10, 99, 126, 0.94);
  box-shadow:
    0 0 0 3px rgba(4, 18, 28, 0.72),
    0 0 18px rgba(104, 232, 255, 0.42);
  transform: translate(-50%, -50%);
  cursor: nwse-resize;
  touch-action: none;
}

.decor-resize-corner-handle[data-selected-decor-resize-corner="ne"],
.decor-resize-corner-handle[data-selected-decor-resize-corner="sw"] {
  cursor: nesw-resize;
}

.decor-resize-corner-handle:hover,
.decor-resize-corner-handle:focus-visible {
  background: rgba(68, 214, 244, 0.98);
  box-shadow:
    0 0 0 4px rgba(4, 18, 28, 0.78),
    0 0 24px rgba(104, 232, 255, 0.62);
}

.decor-resize-indicator {
  position: absolute;
  z-index: 10;
  min-width: 58px;
  padding: 5px 10px;
  border: 1px solid rgba(156, 241, 255, 0.72);
  border-radius: 4px;
  background: rgba(3, 12, 20, 0.82);
  color: rgba(239, 252, 255, 0.98);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.52);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(104, 232, 255, 0.2);
  transform: translate(-50%, -50%);
}


.edit-quick-ref {
  --edit-quick-ref-top: 18px;
  --edit-quick-ref-right: 24px;
  --edit-quick-ref-max-width: 320px;
  position: absolute;
  top: var(--edit-quick-ref-top);
  right: var(--edit-quick-ref-right);
  z-index: 5;
  pointer-events: none;
}

:root[data-display-position="top-right"] .edit-quick-ref {
  --edit-quick-ref-top: 90px;
}

.edit-quick-ref[hidden] {
  display: none !important;
}

.edit-quick-ref-card {
  display: grid;
  gap: 8px;
  min-width: 248px;
  max-width: min(var(--edit-quick-ref-max-width), calc(100vw - var(--edit-quick-ref-right) - 16px));
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(7, 19, 30, 0.56);
  border: 1px solid rgba(188, 225, 246, 0.2);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.3;
}

.edit-quick-ref-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
}

.edit-quick-ref-key {
  color: #f6fbff;
  font-weight: 700;
  white-space: nowrap;
}

.edit-quick-ref-copy {
  min-width: 0;
  color: rgba(226, 241, 249, 0.9);
}

.edit-quick-ref.is-compact .edit-quick-ref-card {
  min-width: 0;
  gap: 6px;
  padding: 10px 12px;
}

.edit-quick-ref.is-compact .edit-quick-ref-row {
  column-gap: 8px;
}

.edit-quick-ref.is-compact .edit-quick-ref-key {
  white-space: normal;
}

.tank-display {
  --display-edge-gap: 8px;
  position: absolute;
  top: var(--display-edge-gap);
  left: var(--display-edge-gap);
  right: auto;
  bottom: auto;
  width: min(360px, 30vw);
  min-width: 322px;
  padding: 4px;
  border-radius: 4px;
  border: 3px solid #030404;
  background:
    linear-gradient(180deg, rgba(28, 31, 29, 0.98), rgba(5, 6, 6, 1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -2px 0 rgba(0, 0, 0, 0.82);
  font-family: var(--ui-font-stack);
  color: var(--lcd-ink-strong);
  z-index: 4;
  transform: translateY(0);
  transition: transform 260ms cubic-bezier(0.18, 0.86, 0.3, 1);
  will-change: transform;
}

:root[data-display-position="top-left"] .tank-display {
  top: var(--display-edge-gap);
  left: var(--display-edge-gap);
  right: auto;
  bottom: auto;
}

:root[data-display-position="bottom-left"] .tank-display {
  top: auto;
  left: var(--display-edge-gap);
  right: auto;
  bottom: var(--display-edge-gap);
}

:root[data-display-position="top-right"] .tank-display {
  top: var(--display-edge-gap);
  left: auto;
  right: var(--display-edge-gap);
  bottom: auto;
}

:root[data-display-position="bottom-right"] .tank-display {
  top: auto;
  left: auto;
  right: var(--display-edge-gap);
  bottom: var(--display-edge-gap);
}

.tank-display.is-display-collapsed,
:root[data-display-collapsed="true"] .tank-display {
  transform: translateY(calc(-100% - var(--display-edge-gap)));
}

:root[data-display-position="bottom-left"] .tank-display.is-display-collapsed,
:root[data-display-position="bottom-right"] .tank-display.is-display-collapsed,
:root[data-display-position="bottom-left"][data-display-collapsed="true"] .tank-display,
:root[data-display-position="bottom-right"][data-display-collapsed="true"] .tank-display {
  transform: translateY(calc(100% + var(--display-edge-gap)));
}

.display-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.2)),
    linear-gradient(180deg, var(--lcd-bg-top), var(--lcd-bg-bottom));
  border: 1px solid rgba(116, 136, 108, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.72),
    inset 0 0 18px rgba(0, 0, 0, 0.46),
    inset 0 0 7px rgba(126, 255, 78, 0.05);
}

.display-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 22% 78%, rgba(0, 0, 0, 0.28));
  mix-blend-mode: screen;
  opacity: 0.42;
}

.display-cell {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 5px 10px 4px;
  min-height: 44px;
  border-left: 1px solid rgba(118, 236, 74, 0.12);
}

.display-cell:first-child {
  border-left: 0;
}

.display-label {
  font-family: var(--ui-font-stack);
  font-size: 0.55rem;
  color: rgba(171, 255, 105, 0.72);
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  text-shadow:
    0 0 3px rgba(187, 255, 110, 0.62),
    0 0 9px rgba(100, 255, 42, 0.34);
}

.display-cell strong {
  font-family: "Consolas", "Courier New", monospace;
  color: var(--lcd-ink-strong);
  display: block;
  font-size: 1.02rem;
  line-height: 1.12;
  letter-spacing: 0;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  padding-top: 1px;
  white-space: nowrap;
  text-shadow:
    0 0 2px rgba(234, 255, 164, 0.95),
    0 0 7px rgba(168, 255, 77, 0.72),
    0 0 16px rgba(86, 255, 28, 0.44);
}

.display-tab {
  position: absolute;
  left: 50%;
  top: calc(100% - 1px);
  width: 54px;
  height: 14px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(7, 9, 8, 0.98);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background:
    linear-gradient(180deg, rgba(18, 20, 18, 0.99), rgba(3, 4, 4, 1));
  color: rgba(184, 255, 107, 0.88);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  transform: translateX(-50%);
  cursor: pointer;
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.62);
  text-shadow: 0 0 6px rgba(143, 255, 111, 0.5);
  z-index: 2;
}

:root[data-display-position="bottom-left"] .display-tab,
:root[data-display-position="bottom-right"] .display-tab {
  top: auto;
  bottom: calc(100% - 1px);
  border-top: 1px solid rgba(7, 9, 8, 0.98);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.62);
}

.display-tab:hover,
.display-tab:focus-visible {
  color: #e3ffc8;
  border-color: rgba(10, 12, 11, 0.98);
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.62),
    0 0 10px rgba(123, 255, 76, 0.12);
}

.tab-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: stretch;
  padding: 0 0 0 0;
  margin-bottom: -1px;
  pointer-events: auto;
}

.tab-button,
.icon-button,
.buy-button,
.small-button,
.background-card button,
.dock-button {
  border: 0;
  cursor: pointer;
  transition:
    transform var(--transition),
    background var(--transition),
    box-shadow var(--transition),
    opacity var(--transition);
}

.tab-button:hover,
.icon-button:hover,
.buy-button:hover,
.small-button:hover,
.background-card button:hover,
.dock-button:hover {
  transform: translateY(-1px);
}

.tab-button {
  flex: 1 1 0;
  min-width: 0;
  padding: 13px 16px 12px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(7, 20, 31, 0.7), rgba(5, 15, 25, 0.9));
  color: rgba(232, 247, 255, 0.74);
  font-weight: 800;
  box-shadow:
    inset 0 0 0 1px rgba(173, 225, 255, 0.12),
    0 10px 20px rgba(0, 0, 0, 0.18);
}

.tab-button.active {
  background: linear-gradient(180deg, rgba(11, 28, 44, 0.98), rgba(8, 22, 35, 0.98));
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(173, 225, 255, 0.18),
    0 10px 26px rgba(0, 0, 0, 0.22);
}

.tank-sidebar {
  position: absolute;
  top: 112px;
  left: 0;
  width: min(380px, 29vw);
  bottom: 94px;
  display: flex;
  flex-direction: column;
  transition: transform 240ms ease;
  z-index: 3;
  overflow: visible;
}

.tank-sidebar.is-collapsed {
  transform: translateX(calc(-100% - 8px));
}

.tank-panel-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  padding-right: 8px;
  margin-right: -8px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(6, 18, 30, 0.92), rgba(8, 22, 36, 0.98));
  border: 1px solid var(--panel-line-strong);
  border-left: 0;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  scrollbar-gutter: stable;
}

.tank-panel-shell::-webkit-scrollbar {
  width: 10px;
}

.tank-panel-shell::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.tank-panel-shell::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.sidebar-toggle {
  position: absolute;
  top: calc(50% - 68px);
  right: -48px;
  width: 42px;
  height: 136px;
  border-radius: 0 18px 18px 0;
  border: 1px solid var(--panel-line-strong);
  border-left: 0;
  background: linear-gradient(180deg, rgba(9, 24, 38, 0.96), rgba(6, 18, 29, 0.86));
  color: var(--ink);
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--shadow);
  white-space: normal;
  line-height: 1;
  text-align: center;
  display: grid;
  place-items: center;
  padding: 10px 6px;
}

.tab-panel {
  display: none;
  gap: 12px;
  padding: 16px 16px 18px;
  min-height: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.tab-panel.active {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.tab-panel>#fishList,
.tab-panel>#decorWorkspace,
.tab-panel>#fishShop,
.tab-panel>#decorShop {
  flex: 0 0 auto;
  margin-top: 0;
}

.tab-panel[data-panel="fish"]>.panel-heading.with-action,
.tab-panel[data-panel="decor"]>.panel-heading.with-action {
  position: sticky;
  top: -16px;
  z-index: 5;
  align-self: start;
  height: auto;
  min-height: 0;
  margin: -16px -16px 4px;
  padding: 16px 16px 12px;
  background: linear-gradient(180deg, rgba(10, 24, 38, 0.98), rgba(9, 23, 36, 0.92));
  border-bottom: 1px solid rgba(173, 225, 255, 0.08);
}

.panel-heading,
.with-action,
.footer-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

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

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

.collapsible-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.collapsible-toggle.is-disabled,
.collapsible-toggle:disabled {
  opacity: 0.45;
  cursor: default;
}

.collapsible-title {
  font-size: 1rem;
  font-weight: 800;
}

.collapsible-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.collapsible-icon {
  flex-shrink: 0;
}

.collapsible-section [data-collapsible-body] {
  margin-top: 12px;
}

.collapsible-section [data-collapsible-body][hidden] {
  display: none !important;
}

.collapsible-section[data-collapsible-section="decorTankShell"] {
  display: none !important;
}

.collapsible-section[data-collapsible-section="decorBackgrounds"],
.collapsible-section[data-collapsible-section="decorFilter"],
.collapsible-section[data-collapsible-section="decorGravel"],
.collapsible-section[data-collapsible-section="decorCustomGravel"] {
  display: none !important;
}

.daily-bonus-bell,
.tank-nav-button {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  border: 0;
  color: #f6fbff;
}

.daily-bonus-bell {
  top: var(--daily-bonus-bell-top, 12px);
  left: var(--daily-bonus-bell-left, calc(100% - 56px));
  right: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.35rem;
  background: rgba(7, 20, 31, 0.68);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
}

.daily-bonus-bell-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  pointer-events: none;
}

.notification-bell-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid rgba(4, 22, 34, 0.92);
  border-radius: 999px;
  color: #fff;
  background: #ef5577;
  box-sizing: border-box;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.daily-bonus-bell.has-unread-notifications:not(.has-daily-recap) {
  background: rgba(17, 79, 111, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(125, 225, 255, 0.32),
    0 0 22px rgba(74, 202, 244, 0.24),
    0 12px 24px rgba(0, 0, 0, 0.28);
}

.daily-bonus-bell.has-daily-recap {
  color: #eafff4;
  background: rgba(9, 85, 52, 0.76);
  box-shadow:
    inset 0 0 0 1px rgba(128, 255, 190, 0.34),
    0 0 0 0 rgba(88, 255, 164, 0.38),
    0 12px 24px rgba(0, 0, 0, 0.28);
  animation: daily-recap-bell-pulse 1.8s ease-in-out infinite;
}

@keyframes daily-recap-bell-pulse {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
    box-shadow:
      inset 0 0 0 1px rgba(128, 255, 190, 0.34),
      0 0 0 0 rgba(88, 255, 164, 0.34),
      0 12px 24px rgba(0, 0, 0, 0.28);
  }

  18% {
    transform: rotate(-8deg) scale(1.04);
  }

  36% {
    transform: rotate(8deg) scale(1.04);
  }

  70% {
    box-shadow:
      inset 0 0 0 1px rgba(128, 255, 190, 0.34),
      0 0 0 12px rgba(88, 255, 164, 0),
      0 12px 24px rgba(0, 0, 0, 0.28);
  }
}

.tank-nav-button {
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 20px;
  font-size: 2rem;
  line-height: 1;
  background: rgba(7, 20, 31, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  opacity: 0.2;
  transition:
    opacity var(--transition),
    transform var(--transition),
    background var(--transition);
}

.tank-nav-button:hover,
.tank-nav-button:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.tank-nav-button-left {
  left: 18px;
}

.tank-nav-button-right {
  right: 18px;
}

.panel-heading p,
.fish-meta,
.empty-state,
.mini-note,
.rule-list,
.event-feed,
.summary-card p,
.shop-meta {
  color: var(--muted);
}

.tank-overlay-hints {
  position: absolute;
  top: 86px;
  left: 8px;
  right: auto;
  bottom: auto;
  display: flex;
  justify-content: flex-start;
  width: min(420px, calc(100% - 16px));
  max-width: min(420px, calc(100% - 16px));
  transform: none;
  z-index: 5;
}

.tank-stage.has-edit-decor-tray .tank-overlay-hints {
  top: 86px;
}

.placement-hint {
  width: 100%;
  min-height: 24px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(7, 19, 30, 0.76);
  border: 1px solid var(--panel-line);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

.decor-depth-indicator {
  --depth-position: 50%;
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 9;
  display: grid;
  grid-template-columns: auto minmax(110px, 180px) auto;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(156, 241, 255, 0.52);
  border-radius: 8px;
  color: rgba(235, 250, 255, 0.96);
  background: rgba(3, 12, 20, 0.82);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

.decor-depth-indicator-track {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: rgba(156, 241, 255, 0.28);
}

.decor-depth-indicator-track i {
  position: absolute;
  top: 50%;
  left: var(--depth-position);
  width: 11px;
  height: 11px;
  border: 2px solid #dffbff;
  border-radius: 50%;
  background: #45d7f2;
  box-shadow: 0 0 0 3px rgba(69, 215, 242, 0.18);
  transform: translate(-50%, -50%);
}

.care-task-pane {
  --care-task-pane-left: 18px;
  --care-task-pane-top: 18px;
  --care-task-pane-width: 330px;
  position: absolute;
  left: var(--care-task-pane-left);
  top: var(--care-task-pane-top);
  z-index: 12;
  width: min(var(--care-task-pane-width), calc(100% - 24px));
  max-width: min(380px, calc(100% - 24px));
  display: grid;
  gap: 9px;
  padding: 13px 14px;
  border-radius: 8px;
  color: rgba(244, 252, 255, 0.96);
  background: linear-gradient(135deg, rgba(13, 45, 65, 0.7), rgba(6, 24, 38, 0.72));
  border: 1px solid rgba(203, 240, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 40px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.care-task-pane[hidden] {
  display: none !important;
}

.care-task-heading {
  color: rgba(234, 249, 255, 0.84);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.care-task-list {
  display: grid;
  gap: 7px;
}

.care-task-empty {
  color: rgba(232, 247, 255, 0.78);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.25;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
}

.care-task-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 25px;
  animation: tutorial-task-row-in 220ms ease both;
}
.care-task-row.is-actionable { width: 100%; padding: 0; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; background: transparent; }
.care-task-row.is-actionable:hover .care-task-text, .care-task-row.is-actionable:focus-visible .care-task-text { color: #c8f8ff; }
.care-task-fish-link { color: #8feeff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.care-task-box {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(218, 248, 255, 0.84);
  background: rgba(1, 12, 19, 0.34);
  box-shadow: inset 0 0 0 1px rgba(7, 22, 34, 0.22);
}

.care-task-box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #0c2330;
  border-bottom: 2px solid #0c2330;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
}

.care-task-label {
  position: relative;
  display: inline-block;
  min-width: 0;
  width: max-content;
  max-width: 100%;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
}

.care-task-text {
  display: block;
  overflow-wrap: anywhere;
}

.care-task-strike {
  position: absolute;
  left: -2px;
  top: calc(50% + 1px);
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 238, 173, 0.92), rgba(255, 194, 83, 0.96));
  box-shadow: 0 0 9px rgba(255, 215, 105, 0.38);
}

.care-task-meta {
  display: grid;
  gap: 3px;
  justify-items: end;
  color: rgba(232, 247, 255, 0.68);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
}

.care-task-badge {
  color: rgba(190, 225, 236, 0.74);
  text-transform: uppercase;
}

.care-task-value {
  color: rgba(244, 252, 255, 0.9);
}

.care-task-row.is-complete {
  animation:
    tutorial-task-complete-pop 260ms ease both,
    tutorial-task-row-out 540ms ease 1.46s forwards;
}

.care-task-row.is-complete .care-task-box {
  animation: tutorial-task-box-check 220ms ease forwards;
}

.care-task-row.is-complete .care-task-box::after {
  animation: tutorial-task-check-mark 180ms ease 80ms forwards;
}

.care-task-row.is-complete .care-task-strike {
  animation: tutorial-task-strike 520ms steps(var(--task-letter-count, 12)) 210ms forwards;
}

.care-task-row.is-complete .care-task-text,
.care-task-row.is-complete .care-task-meta {
  animation: tutorial-task-text-dim 360ms ease 760ms forwards;
}

@media (max-width: 560px) {
  .care-task-pane {
    padding: 11px 12px;
  }

  .care-task-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .care-task-meta {
    grid-column: 2;
    justify-items: start;
    white-space: normal;
  }
}


.tank-stage.is-decor-edit-framed {
  background: #000;
}

.tank-stage.is-decor-edit-framed .tank-stage-background {
  filter: none;
}

#tankStage > #tankStageBackground {
  inset: auto;
  left: var(--tank-render-left, 0px);
  top: var(--tank-render-top, 0px);
  width: var(--tank-render-width, 100%);
  height: var(--tank-render-height, 100%);
}

.tank-stage.is-decor-edit-framed > #tankStageBackground {
  clip-path: inset(
    var(--tank-frame-inset-top, 0px)
    var(--tank-frame-inset-right, 0px)
    var(--tank-frame-inset-bottom, 0px)
    var(--tank-frame-inset-left, 0px)
    round var(--tank-frame-radius, 0px)
  );
}

@media (prefers-reduced-motion: reduce) {
  .tank-stage.is-decor-edit-framed .tank-stage-background {
    transition: none;
  }
}

#editDecorTray,
#editFishTray,
#editEquipmentTray,
#editTankTray {
  opacity: var(--tank-edit-reveal, 1);
}

.edit-decor-tray {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 52px);
  width: min(92vw, 1560px);
  max-width: calc(100vw - 30px);
  transform: translateX(-50%);
  z-index: 9;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px 12px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(111, 217, 244, 0.08), transparent 46%),
    linear-gradient(180deg, rgba(9, 31, 48, 0.9), rgba(5, 19, 31, 0.92));
  border: 1px solid rgba(188, 225, 246, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 38px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px) saturate(1.08);
}

:root[data-toolbar-position="bottom-center"] .edit-decor-tray {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
}

.edit-decor-tray[hidden] {
  display: none !important;
}

.edit-tray-mode-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.edit-overlay-mode-tabs {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(188, 225, 246, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(16, 43, 61, 0.9), rgba(7, 24, 38, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 20px rgba(0, 0, 0, 0.18);
}

.edit-overlay-mode-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid rgba(125, 224, 248, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 52, 76, 0.9), rgba(8, 31, 49, 0.94));
  color: rgba(231, 248, 255, 0.82);
  font: 800 0.86rem/1 var(--ui-font-stack);
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease, color 140ms ease;
}

.edit-overlay-mode-tab:hover,
.edit-overlay-mode-tab:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: rgba(151, 237, 255, 0.54);
  color: #ffffff;
}

.edit-overlay-mode-tab.is-active {
  border-color: rgba(170, 244, 255, 0.82);
  background: linear-gradient(180deg, rgba(20, 96, 126, 0.96), rgba(11, 58, 84, 0.98));
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(115, 229, 255, 0.16),
    0 10px 18px rgba(10, 80, 112, 0.22);
}

.edit-fish-tray .edit-overlay-mode-tab[data-edit-overlay-mode="fish"].is-active,
.edit-decor-tray .edit-overlay-mode-tab[data-edit-overlay-mode="decor"].is-active {
  background: linear-gradient(180deg, rgba(25, 113, 145, 0.98), rgba(12, 70, 99, 0.98));
}

.edit-fish-tray-tabs {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 1px;
}

.edit-fish-tray-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.edit-tray-done-button {
  flex: 0 0 auto;
  min-width: 68px;
  min-height: 30px;
  padding: 5px 14px;
  border: 1px solid rgba(125, 224, 248, 0.58);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(18, 75, 93, 0.94), rgba(8, 42, 58, 0.96));
  color: #e8fbff;
  font: 800 0.74rem/1 var(--ui-font-stack);
  cursor: pointer;
}

.edit-tray-done-button:hover,
.edit-tray-done-button:focus-visible {
  border-color: rgba(160, 238, 255, 0.9);
  filter: brightness(1.14);
}

.edit-decor-tray-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.edit-decor-tray-tabs {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 1px;
  overflow-x: auto;
  scrollbar-width: none;
}

.edit-decor-tray-tabs::-webkit-scrollbar {
  display: none;
}

.edit-decor-tray-tab {
  --decor-tab-border: rgba(188, 225, 246, 0.14);
  --decor-tab-bg-top: rgba(8, 25, 39, 0.52);
  --decor-tab-bg-bottom: rgba(8, 25, 39, 0.52);
  --decor-tab-text: rgba(216, 241, 255, 0.72);
  flex: 0 0 auto;
  min-width: 82px;
  min-height: 28px;
  padding: 4px 13px;
  border: 1px solid var(--decor-tab-border);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--decor-tab-bg-top), var(--decor-tab-bg-bottom));
  color: var(--decor-tab-text);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: filter 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.edit-decor-tray-tab[data-decor-tone="all"] {
  --decor-tab-border: rgba(188, 225, 246, 0.12);
  --decor-tab-bg-top: rgba(22, 64, 86, 0.72);
  --decor-tab-bg-bottom: rgba(10, 38, 57, 0.72);
  --decor-tab-text: rgba(225, 245, 255, 0.82);
  backdrop-filter: blur(3px);
}

.edit-decor-tray-tab[data-decor-tone="caves"] {
  --decor-tab-border: rgba(132, 174, 255, 0.38);
  --decor-tab-bg-top: rgba(61, 89, 151, 0.72);
  --decor-tab-bg-bottom: rgba(34, 56, 108, 0.68);
  --decor-tab-text: #e5edff;
}

.edit-decor-tray-tab[data-decor-tone="plants"] {
  --decor-tab-border: rgba(100, 242, 143, 0.38);
  --decor-tab-bg-top: rgba(35, 125, 67, 0.72);
  --decor-tab-bg-bottom: rgba(19, 78, 46, 0.68);
  --decor-tab-text: #e1ffe9;
}

.edit-decor-tray-tab[data-decor-tone="coral"] {
  --decor-tab-border: rgba(255, 132, 174, 0.42);
  --decor-tab-bg-top: rgba(151, 54, 91, 0.74);
  --decor-tab-bg-bottom: rgba(91, 30, 61, 0.7);
  --decor-tab-text: #ffe4ee;
}

.edit-decor-tray-tab[data-decor-tone="ornaments"] {
  --decor-tab-border: rgba(255, 196, 83, 0.42);
  --decor-tab-bg-top: rgba(151, 101, 25, 0.74);
  --decor-tab-bg-bottom: rgba(96, 61, 13, 0.7);
  --decor-tab-text: #fff1c5;
}

.edit-decor-tray-tab[data-decor-tone="bubbler"] {
  --decor-tab-border: rgba(84, 226, 255, 0.42);
  --decor-tab-bg-top: rgba(22, 118, 145, 0.74);
  --decor-tab-bg-bottom: rgba(10, 72, 102, 0.7);
  --decor-tab-text: #ddfaff;
}

.edit-decor-tray-tab[data-decor-tone="custom"] {
  --decor-tab-border: rgba(203, 132, 255, 0.42);
  --decor-tab-bg-top: rgba(112, 58, 151, 0.74);
  --decor-tab-bg-bottom: rgba(69, 32, 103, 0.7);
  --decor-tab-text: #f5e3ff;
}

.edit-decor-tray-tab:hover,
.edit-decor-tray-tab:focus-visible {
  color: #fff;
  filter: brightness(1.18) saturate(1.08);
  transform: translateY(-1px);
}

.edit-decor-tray-tab.is-active {
  border-color: rgba(241, 255, 255, 0.82);
  color: #fff;
  filter: brightness(1.2) saturate(1.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 12px rgba(182, 238, 255, 0.16);
}

.edit-decor-in-tank-toggle {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(188, 225, 246, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(72, 92, 114, 0.12), rgba(48, 65, 83, 0.09));
  color: rgba(225, 245, 255, 0.86);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(3px);
}

.edit-decor-in-tank-toggle:hover,
.edit-decor-in-tank-toggle:focus-within {
  border-color: rgba(97, 238, 235, 0.54);
  color: #f4ffff;
}

.edit-decor-in-tank-toggle input {
  position: relative;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin: 0;
  appearance: none;
  border: 1px solid rgba(205, 239, 255, 0.54);
  border-radius: 4px;
  background: rgba(5, 19, 31, 0.58);
  cursor: pointer;
}

.edit-decor-in-tank-toggle input:checked {
  border-color: rgba(105, 245, 229, 0.86);
  background: linear-gradient(180deg, rgba(37, 155, 151, 0.96), rgba(16, 98, 111, 0.96));
}

.edit-decor-in-tank-toggle input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #efffff;
  border-bottom: 2px solid #efffff;
  transform: rotate(42deg);
}

.edit-fish-tray-tab {
  min-width: 92px;
  min-height: 28px;
  padding: 4px 16px;
  border: 1px solid rgba(188, 225, 246, 0.14);
  border-radius: 999px;
  background: rgba(8, 25, 39, 0.52);
  color: rgba(216, 241, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.edit-fish-tray-tab:hover,
.edit-fish-tray-tab:focus-visible {
  border-color: rgba(97, 238, 235, 0.54);
  color: #f4ffff;
  transform: translateY(-1px);
}

.edit-fish-tray-tab.is-active {
  border-color: rgba(85, 242, 237, 0.72);
  background: linear-gradient(180deg, rgba(16, 80, 99, 0.82), rgba(7, 47, 69, 0.86));
  color: #dffffe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 12px rgba(74, 238, 236, 0.15);
}

.edit-fish-tray-context-menu {
  position: absolute;
  z-index: 12;
  min-width: 188px;
  max-width: min(240px, calc(100vw - 32px));
}

.edit-fish-tray-context-menu[hidden] {
  display: none !important;
}

.edit-fish-tray-context-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(123, 223, 248, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(10, 25, 38, 0.96), rgba(7, 18, 29, 0.94));
  border: 1px solid rgba(188, 225, 246, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 18px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
}

#editDecorTrayContextMenu .is-decor-context-card {
  --decor-menu-border: rgba(188, 225, 246, 0.28);
  --decor-menu-glow: rgba(188, 225, 246, 0.18);
  --decor-menu-top: rgba(44, 65, 86, 0.97);
  --decor-menu-bottom: rgba(20, 35, 51, 0.96);
  border-color: var(--decor-menu-border);
  background:
    radial-gradient(circle at 50% 0%, var(--decor-menu-glow), transparent 48%),
    linear-gradient(180deg, var(--decor-menu-top), var(--decor-menu-bottom));
}

#editDecorTrayContextMenu .is-decor-context-card[data-decor-tone="caves"] {
  --decor-menu-border: rgba(132, 174, 255, 0.58);
  --decor-menu-glow: rgba(175, 202, 255, 0.24);
  --decor-menu-top: rgba(55, 81, 139, 0.97);
  --decor-menu-bottom: rgba(26, 45, 91, 0.96);
}

#editDecorTrayContextMenu .is-decor-context-card[data-decor-tone="plants"] {
  --decor-menu-border: rgba(100, 242, 143, 0.56);
  --decor-menu-glow: rgba(160, 255, 188, 0.22);
  --decor-menu-top: rgba(29, 108, 58, 0.97);
  --decor-menu-bottom: rgba(14, 62, 37, 0.96);
}

#editDecorTrayContextMenu .is-decor-context-card[data-decor-tone="coral"] {
  --decor-menu-border: rgba(255, 132, 174, 0.6);
  --decor-menu-glow: rgba(255, 179, 205, 0.24);
  --decor-menu-top: rgba(130, 42, 78, 0.97);
  --decor-menu-bottom: rgba(76, 21, 50, 0.96);
}

#editDecorTrayContextMenu .is-decor-context-card[data-decor-tone="ornaments"] {
  --decor-menu-border: rgba(255, 196, 83, 0.6);
  --decor-menu-glow: rgba(255, 224, 151, 0.22);
  --decor-menu-top: rgba(128, 83, 20, 0.97);
  --decor-menu-bottom: rgba(73, 45, 9, 0.96);
}

#editDecorTrayContextMenu .is-decor-context-card[data-decor-tone="bubbler"] {
  --decor-menu-border: rgba(84, 226, 255, 0.58);
  --decor-menu-glow: rgba(160, 244, 255, 0.22);
  --decor-menu-top: rgba(17, 101, 127, 0.97);
  --decor-menu-bottom: rgba(7, 56, 83, 0.96);
}

#editDecorTrayContextMenu .is-decor-context-card[data-decor-tone="custom"] {
  --decor-menu-border: rgba(203, 132, 255, 0.58);
  --decor-menu-glow: rgba(226, 178, 255, 0.22);
  --decor-menu-top: rgba(95, 47, 132, 0.97);
  --decor-menu-bottom: rgba(55, 25, 84, 0.96);
}

.edit-fish-tray-context-copy {
  display: grid;
  gap: 2px;
}

.edit-fish-tray-context-copy strong {
  color: #f4fbff;
  font-size: 0.88rem;
  line-height: 1.2;
}

.edit-fish-tray-context-copy span {
  color: rgba(216, 241, 255, 0.78);
  font-size: 0.76rem;
  line-height: 1.2;
}

.edit-fish-tray-context-action {
  min-height: 38px;
  border: 1px solid rgba(188, 225, 246, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #f4fbff;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 140ms ease,
    background 140ms ease,
    border-color 140ms ease;
}

.edit-fish-tray-context-action:hover,
.edit-fish-tray-context-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(188, 225, 246, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.edit-fish-tray-context-action.warn {
  border-color: rgba(255, 164, 130, 0.24);
  background: linear-gradient(180deg, rgba(112, 42, 28, 0.96), rgba(90, 31, 21, 0.94));
}

.edit-fish-tray-context-action.warn:hover,
.edit-fish-tray-context-action.warn:focus-visible {
  border-color: rgba(255, 184, 157, 0.36);
  background: linear-gradient(180deg, rgba(126, 48, 32, 0.98), rgba(101, 35, 24, 0.96));
}

.edit-fish-tray-context-action.buy-another {
  border-color: rgba(126, 255, 169, 0.58);
  background: linear-gradient(180deg, rgba(39, 151, 77, 0.98), rgba(20, 104, 53, 0.98));
  color: #effff3;
  box-shadow: 0 0 0 4px rgba(88, 235, 139, 0.08);
}

.edit-fish-tray-context-action.buy-another:hover,
.edit-fish-tray-context-action.buy-another:focus-visible {
  border-color: rgba(171, 255, 200, 0.8);
  background: linear-gradient(180deg, rgba(48, 172, 91, 0.99), rgba(24, 121, 62, 0.99));
}

#editDecorTrayContextMenu .edit-fish-tray-context-action.sell-action {
  border-color: rgba(255, 129, 117, 0.52);
  background: linear-gradient(180deg, rgba(151, 48, 35, 0.98), rgba(104, 27, 24, 0.98));
  color: #fff4f1;
}

#editDecorTrayContextMenu .edit-fish-tray-context-action.sell-action:hover,
#editDecorTrayContextMenu .edit-fish-tray-context-action.sell-action:focus-visible {
  border-color: rgba(255, 174, 162, 0.76);
  background: linear-gradient(180deg, rgba(172, 57, 42, 0.99), rgba(121, 32, 27, 0.99));
}

.edit-fish-tray-context-action:disabled {
  cursor: default;
  opacity: 0.58;
}

.edit-decor-tray-scroller {
  min-width: 0;
  display: flex;
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  padding: 1px 0 4px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(188, 225, 246, 0.34) transparent;
}

.edit-fish-tray .edit-decor-tray-scroller {
  min-height: 98px;
  align-items: center;
}

#editDecorTray .edit-decor-tray-scroller {
  min-height: 98px;
  align-items: center;
}

.edit-fish-tray .edit-decor-tray-empty {
  display: flex;
  align-items: center;
  min-height: 72px;
  box-sizing: border-box;
  padding: 0 8px;
}

#editDecorTray .edit-decor-tray-empty {
  display: flex;
  align-items: center;
  min-height: 72px;
  box-sizing: border-box;
  padding: 0 8px;
}

.edit-decor-tray-scroller::-webkit-scrollbar {
  height: 8px;
}

.edit-decor-tray-scroller::-webkit-scrollbar-track {
  background: transparent;
}

.edit-decor-tray-scroller::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(188, 225, 246, 0.3);
}

.edit-decor-tray-arrow {
  width: 40px;
  height: 92px;
  border-radius: 16px;
  border: 1px solid rgba(188, 225, 246, 0.16);
  background: linear-gradient(180deg, rgba(10, 24, 37, 0.26), rgba(7, 18, 29, 0.24));
  color: var(--ink);
  font-size: 1.36rem;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 12px 26px rgba(0, 0, 0, 0.16);
}

.edit-decor-tile {
  position: relative;
  min-width: 92px;
  max-width: 92px;
  height: 92px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.edit-decor-tile::before {
  content: attr(data-decor-name);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(7, 19, 30, 0.86);
  border: 1px solid rgba(188, 225, 246, 0.22);
  color: #f3fbff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.edit-decor-tile:hover::before,
.edit-decor-tile:focus-within::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.edit-decor-tile-primary {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.edit-decor-tile-menu-button {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(188, 225, 246, 0.18);
  background: rgba(7, 19, 30, 0.78);
  color: #f3fbff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
}

.edit-decor-tile-menu-button:hover,
.edit-decor-tile-menu-button:focus-visible {
  background: rgba(12, 30, 46, 0.94);
  transform: translateY(-1px);
}

.edit-decor-tile-surface {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(188, 225, 246, 0.18);
  background:
    radial-gradient(circle at 50% 14%, rgba(188, 225, 246, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(88, 109, 131, 0.64), rgba(70, 89, 109, 0.52));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -18px 28px rgba(18, 29, 43, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.14);
}

#editDecorTray .edit-decor-tile.is-decor-type-tile[data-decor-tone="caves"] .edit-decor-tile-surface {
  border-color: rgba(132, 174, 255, 0.42);
  background: radial-gradient(circle at 50% 14%, rgba(175, 202, 255, 0.25), transparent 38%), linear-gradient(180deg, rgba(61, 89, 151, 0.8), rgba(34, 56, 108, 0.7));
}

#editDecorTray .edit-decor-tile.is-decor-type-tile[data-decor-tone="plants"] .edit-decor-tile-surface {
  border-color: rgba(100, 242, 143, 0.42);
  background: radial-gradient(circle at 50% 14%, rgba(160, 255, 188, 0.26), transparent 38%), linear-gradient(180deg, rgba(35, 125, 67, 0.8), rgba(19, 78, 46, 0.7));
}

#editDecorTray .edit-decor-tile.is-decor-type-tile[data-decor-tone="coral"] .edit-decor-tile-surface {
  border-color: rgba(255, 132, 174, 0.46);
  background: radial-gradient(circle at 50% 14%, rgba(255, 179, 205, 0.28), transparent 38%), linear-gradient(180deg, rgba(151, 54, 91, 0.82), rgba(91, 30, 61, 0.72));
}

#editDecorTray .edit-decor-tile.is-decor-type-tile[data-decor-tone="ornaments"] .edit-decor-tile-surface {
  border-color: rgba(255, 196, 83, 0.46);
  background: radial-gradient(circle at 50% 14%, rgba(255, 224, 151, 0.27), transparent 38%), linear-gradient(180deg, rgba(151, 101, 25, 0.82), rgba(96, 61, 13, 0.72));
}

#editDecorTray .edit-decor-tile.is-decor-type-tile[data-decor-tone="bubbler"] .edit-decor-tile-surface {
  border-color: rgba(84, 226, 255, 0.46);
  background: radial-gradient(circle at 50% 14%, rgba(160, 244, 255, 0.27), transparent 38%), linear-gradient(180deg, rgba(22, 118, 145, 0.82), rgba(10, 72, 102, 0.72));
}

#editDecorTray .edit-decor-tile.is-decor-type-tile[data-decor-tone="custom"] .edit-decor-tile-surface {
  border-color: rgba(203, 132, 255, 0.46);
  background: radial-gradient(circle at 50% 14%, rgba(226, 178, 255, 0.27), transparent 38%), linear-gradient(180deg, rgba(112, 58, 151, 0.82), rgba(69, 32, 103, 0.72));
}

#editDecorTray .edit-decor-tile.is-decor-type-tile .edit-decor-tile-surface {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: border-color 160ms ease, filter 160ms ease;
}

#editDecorTray .edit-decor-tile.is-decor-type-tile .edit-decor-tile-surface::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--decor-reflection-x, 50%) var(--decor-reflection-y, 50%), rgba(255, 255, 255, 0.58) 0, rgba(232, 250, 255, 0.3) 16%, rgba(199, 241, 255, 0.12) 34%, transparent 58%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease;
}

#editDecorTray .edit-decor-tile.is-decor-type-tile:hover .edit-decor-tile-surface,
#editDecorTray .edit-decor-tile.is-decor-type-tile:focus-within .edit-decor-tile-surface {
  border-color: rgba(242, 255, 255, 0.76);
  filter: brightness(1.08) saturate(1.04);
  transform: none;
}

#editDecorTray .edit-decor-tile.is-decor-type-tile:hover .edit-decor-tile-surface::after,
#editDecorTray .edit-decor-tile.is-decor-type-tile:focus-within .edit-decor-tile-surface::after {
  opacity: 0.82;
}

#editDecorTray .edit-decor-tile.is-decor-type-tile::before {
  content: none;
  display: none;
  box-shadow: none;
}

#editDecorTray .edit-decor-tile.is-decor-type-tile .edit-decor-tile-thumb {
  z-index: 1;
  filter: none;
}

#editDecorTray .edit-decor-tile.is-decor-type-tile .inventory-tray-label,
#editDecorTray .edit-decor-tile.is-decor-type-tile .edit-decor-tile-count {
  z-index: 3;
}

#editDecorTray .inventory-tray-label {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
  white-space: nowrap;
}

:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile[data-mood-tone="good"] .edit-decor-tile-surface {
  border-color: rgba(99, 255, 146, 0.42);
  background:
    radial-gradient(circle at 50% 14%, rgba(153, 255, 183, 0.28), transparent 38%),
    linear-gradient(180deg, rgba(32, 126, 67, 0.78), rgba(18, 82, 48, 0.68));
}

:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile[data-mood-tone="okay"] .edit-decor-tile-surface {
  border-color: rgba(90, 238, 222, 0.44);
  background:
    radial-gradient(circle at 50% 14%, rgba(142, 255, 244, 0.25), transparent 38%),
    linear-gradient(180deg, rgba(20, 119, 128, 0.78), rgba(11, 75, 91, 0.68));
}

:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile[data-mood-tone="warn"] .edit-decor-tile-surface {
  border-color: rgba(255, 184, 52, 0.5);
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 224, 137, 0.28), transparent 38%),
    linear-gradient(180deg, rgba(145, 96, 18, 0.82), rgba(100, 62, 10, 0.72));
}

:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile[data-mood-tone="danger"] .edit-decor-tile-surface {
  border-color: rgba(255, 85, 112, 0.52);
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 160, 175, 0.26), transparent 38%),
    linear-gradient(180deg, rgba(133, 32, 54, 0.84), rgba(84, 18, 39, 0.74));
}

:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile .edit-decor-tile-surface {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: border-color 160ms ease, filter 160ms ease;
}

:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile .edit-decor-tile-surface::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--fish-reflection-x, 50%) var(--fish-reflection-y, 50%),
    rgba(255, 255, 255, 0.58) 0,
    rgba(223, 255, 255, 0.3) 16%,
    rgba(185, 249, 255, 0.12) 34%,
    transparent 58%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease;
}

:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile:hover .edit-decor-tile-surface,
:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile:focus-within .edit-decor-tile-surface {
  border-color: rgba(235, 255, 255, 0.7);
  filter: brightness(1.08) saturate(1.04);
  transform: none;
}

:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile:hover .edit-decor-tile-surface::after,
:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile:focus-within .edit-decor-tile-surface::after {
  opacity: 0.82;
}

:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile::before {
  content: none;
  display: none;
  box-shadow: none;
}

:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile .edit-decor-tile-thumb {
  z-index: 1;
  filter: none;
}

:is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile .inventory-tray-label {
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  :is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile:hover .edit-decor-tile-surface::after,
  :is(.edit-fish-tray, .edit-equipment-tray) .edit-decor-tile.is-fish-mood-tile:focus-within .edit-decor-tile-surface::after {
    opacity: 0.28;
  }
}

.edit-fish-tray .inventory-tray-label {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 6px;
  right: 6px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
  white-space: nowrap;
}

.edit-decor-tile:hover .edit-decor-tile-surface,
.edit-decor-tile:focus-within .edit-decor-tile-surface {
  transform: translateY(-1px);
}

.edit-decor-tray.has-context-menu .edit-decor-tile::before {
  opacity: 0;
}

.edit-decor-tile.is-context-open .edit-decor-tile-surface {
  border-color: rgba(123, 223, 248, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(123, 223, 248, 0.16),
    inset 0 -18px 28px rgba(18, 29, 43, 0.14),
    0 0 0 3px rgba(123, 223, 248, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.14);
}

.edit-decor-tile.is-active .edit-decor-tile-surface {
  border-color: rgba(255, 217, 121, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 217, 121, 0.18),
    inset 0 -18px 28px rgba(18, 29, 43, 0.14),
    0 0 0 3px rgba(255, 217, 121, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.14);
}

.edit-decor-tile.is-dead .edit-decor-tile-surface {
  border-color: rgba(255, 132, 152, 0.26);
  box-shadow:
    inset 0 0 0 1px rgba(255, 132, 152, 0.14),
    inset 0 -18px 28px rgba(32, 16, 24, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.14);
}

.edit-decor-tile-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.18));
}

.layered-shrimp-tray-thumb {
  display: block;
}

.layered-shrimp-tray-thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.edit-decor-tile-count {
  position: absolute;
  right: 9px;
  bottom: 6px;
  color: #d8f1ff;
  font-size: 0.82rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(8, 12, 16, 0.6);
}

.edit-decor-tile-primary:disabled,
.edit-decor-tile.is-disabled {
  cursor: default;
  opacity: 0.5;
}

.inventory-tray-tile-surface {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px 14px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--tray-accent, rgba(188, 225, 246, 0.28)) 32%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(88, 109, 131, 0.64), rgba(70, 89, 109, 0.52));
}

.inventory-tray-thumb {
  position: static;
  width: 40px;
  height: 40px;
  transform: none;
  left: auto;
  top: auto;
}

.inventory-tray-icon {
  font-size: 1.55rem;
  line-height: 1;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18));
}

.inventory-tray-label {
  max-width: 100%;
  color: #f3fbff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

.inventory-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(188, 225, 246, 0.12);
  background: linear-gradient(180deg, rgba(17, 31, 45, 0.42), rgba(12, 22, 33, 0.4));
}

.inventory-card-thumb {
  width: 72px;
  height: 72px;
  object-fit: contain;
  padding: 6px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.22), transparent 44%),
    linear-gradient(180deg, rgba(158, 220, 255, 0.18), rgba(78, 126, 156, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.utility-confirm-card {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(188, 225, 246, 0.12);
  background: linear-gradient(180deg, rgba(17, 31, 45, 0.42), rgba(12, 22, 33, 0.4));
}

.utility-confirm-copy {
  display: grid;
  gap: 8px;
  max-width: 42ch;
}

.utility-confirm-copy strong {
  color: #f3fbff;
  font-size: 1.04rem;
}

.utility-confirm-copy .fish-meta {
  line-height: 1.55;
}

.utility-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.external-link-card {
  gap: 12px;
}

.external-link-url {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(125, 224, 248, 0.16);
  background: rgba(3, 11, 18, 0.46);
  color: #d8f3ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.edit-decor-tray-empty {
  color: var(--muted);
  font-size: 0.86rem;
}

.edit-decor-tray-empty {
  padding: 16px 8px;
}

/* Panels must not inherit the tank's hidden tool cursor. Zero specificity lets
   buttons, text fields, and drag handles keep their own cursor styles. */
:where(
  #tankSidebar, #debugSidebar, #boroughOverview, .tank-display,
  .tank-nav-button, .tank-bottom-dock,
  #editDecorTray, #editFishTray, #editEquipmentTray, #editTankTray,
  #foodTray, #medicineTray, #careTaskPane, #tankContextMenu,
  .tank-overlay-hints, .tutorial-overlay, .store-overlay, .settings-overlay,
  .fish-inspector, .submarine-manager, .fish-action-flyout,
  .fish-action-submenu, .fish-action-target-menu, .fish-action-queue-dock,
  .selected-fish-needs-panel, .decor-settings-badge-button,
  .decor-context-menu-button, .tab-buttons
) {
  cursor: default;
}

.tool-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(64px, 5.75vw, 88px);
  height: clamp(64px, 5.75vw, 88px);
  min-width: 0;
  min-height: 0;
  pointer-events: none;
  z-index: 8;
  /* Each tool supplies its own calibrated visual hotspot. The pointer and
     the game action always share that same point. */
  transform: translate(var(--tool-cursor-offset-x, -100%), var(--tool-cursor-offset-y, 0%));
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.28));
  line-height: 1;
  display: block;
}

.tool-cursor img,
.tool-cursor .tool-cursor-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tool-cursor-scoop {
  z-index: 1;
}

.tool-cursor-pellets {
  z-index: 2;
}

.tool-cursor.is-frisky-food .tool-cursor-pellets {
  filter: hue-rotate(300deg) saturate(1.75) brightness(1.08);
}

.tool-cursor::before,
.tool-cursor::after {
  content: none;
  display: none;
}

.tank-bottom-dock {
  --toolbar-edge-gap: 22px;
  --toolbar-taskbar-clearance: 8px;
  --toolbar-shell-color: color-mix(in srgb, var(--toolbar-tile-color, #4c92aa) 34%, #03080b);
  --toolbar-shell-border-color: color-mix(in srgb, var(--toolbar-tile-color, #4c92aa) 42%, #0d171c);
  --toolbar-tab-overlap: 2px;
  --toolbar-tab-thickness: 18px;
  --toolbar-open-transform: translateY(-50%);
  --toolbar-collapsed-transform: translateY(-50%) translateX(calc(100% + var(--toolbar-edge-gap)));
  position: absolute;
  right: 22px;
  top: 50%;
  transform: var(--toolbar-open-transform);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 9px 8px;
  border-radius: 14px;
  background: var(--toolbar-shell-color);
  border: 1px solid var(--toolbar-shell-border-color);
  box-shadow: var(--shadow);
  z-index: 7;
  overflow: visible;
  transition:
    transform 280ms cubic-bezier(0.18, 0.86, 0.3, 1),
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    padding 160ms ease;
  will-change: transform;
}

.tank-bottom-dock.is-behind-overlay {
  z-index: 3;
}

/* The in-tank menu inherits the live toolbar tile color, including unsaved picker previews. */
.tank-context-menu {
  --context-accent: var(--toolbar-tile-color, #4c92aa);
  position: absolute;
  width: min(254px, calc(100% - 28px));
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--context-accent) 78%, #d6f8ff);
  border-radius: 15px;
  color: #eafaff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--context-accent) 31%, #061b2c) 0%, rgba(3, 15, 27, .97) 68%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--context-accent) 24%, transparent), 0 16px 36px rgba(0, 0, 0, .48), 0 0 24px color-mix(in srgb, var(--context-accent) 36%, transparent);
  z-index: 20;
  pointer-events: auto;
  box-sizing: border-box;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tank-context-menu[hidden] { display: none; }
.tank-context-menu-header { display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: center; padding: 3px 4px 10px; border-bottom: 1px solid color-mix(in srgb, var(--context-accent) 42%, rgba(218, 247, 255, .25)); }
.tank-context-menu-icon { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; color: #fff; background: color-mix(in srgb, var(--context-accent) 58%, #071a27); box-shadow: 0 0 13px color-mix(in srgb, var(--context-accent) 52%, transparent); }
.tank-context-menu-icon img { width: 28px; height: 28px; object-fit: contain; }
.tank-context-menu-header strong, .tank-context-menu-header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tank-context-menu-header strong { font-size: .92rem; }
.tank-context-menu-header span { margin-top: 2px; color: color-mix(in srgb, var(--context-accent) 48%, #e8f9ff); font-size: .72rem; }
.tank-context-menu-actions { display: grid; gap: 2px; padding-top: 7px; }
.tank-context-menu-action { display: grid; grid-template-columns: 25px 1fr; align-items: center; min-height: 34px; padding: 5px 8px; border: 1px solid transparent; border-radius: 9px; color: inherit; background: transparent; font: inherit; font-size: .85rem; text-align: left; cursor: pointer; }
.tank-context-menu-action:hover, .tank-context-menu-action:focus-visible { border-color: color-mix(in srgb, var(--context-accent) 72%, #effcff); outline: none; background: color-mix(in srgb, var(--context-accent) 38%, rgba(5, 29, 45, .9)); box-shadow: inset 0 0 13px color-mix(in srgb, var(--context-accent) 28%, transparent); }
.tank-context-menu-action .tank-context-menu-action-icon { width: 20px; height: 20px; object-fit: contain; }
.tank-context-menu-action.is-danger { color: #ffd7d7; }
.tank-context-menu-action.is-separated { margin-top: 5px; border-top-color: rgba(218, 247, 255, .2); }
.tank-context-menu button:disabled { opacity: .45; cursor: default; }
.tank-context-decor-controls { display: grid; gap: 6px; padding: 9px 3px; border-bottom: 1px solid rgba(218, 247, 255, .2); }
.tank-context-control-row { display: grid; grid-template-columns: 1fr 38px 38px; align-items: center; gap: 6px; font-size: .8rem; }
.tank-context-control-row output { display: block; margin-top: 2px; font-size: .7rem; color: #b7dfe8; }
.tank-context-decor-controls button { min-height: 30px; padding: 4px; border: 1px solid color-mix(in srgb, var(--context-accent) 58%, #dff9ff); border-radius: 7px; color: inherit; background: rgba(5, 29, 45, .8); font: inherit; cursor: pointer; }
.tank-context-control-row button { font-size: 1.2rem; }
.tank-context-decor-controls button:hover:not(:disabled), .tank-context-decor-controls button:focus-visible { background: color-mix(in srgb, var(--context-accent) 38%, #051d2d); outline: 1px solid #bcefff; }
.tank-context-decor-controls button[aria-pressed="true"] { color: #fff3bc; border-color: #ffdd84; background: rgba(93, 57, 17, .9); }
.tank-context-depth-jumps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: .7rem; }
.tank-context-menu-rename { display: grid; gap: 8px; padding: 6px 3px 2px; }
.tank-context-menu-rename label { display: grid; gap: 4px; color: color-mix(in srgb, var(--context-accent) 44%, #eafaff); font-size: .7rem; }
.tank-context-menu-rename input { width: 100%; min-height: 32px; box-sizing: border-box; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--context-accent) 72%, #eafaff); border-radius: 7px; color: #effbff; background: rgba(1, 13, 24, .8); font: inherit; }
.tank-context-menu-rename input:focus { outline: 2px solid color-mix(in srgb, var(--context-accent) 66%, #fff); outline-offset: 1px; }
.tank-context-menu-rename > div { display: flex; justify-content: flex-end; gap: 6px; }
.tank-context-menu-save, .tank-context-menu-cancel { min-height: 29px; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--context-accent) 58%, #dff9ff); border-radius: 7px; color: #effbff; background: color-mix(in srgb, var(--context-accent) 42%, #082034); font: inherit; font-size: .75rem; cursor: pointer; }
.tank-context-menu-cancel { background: rgba(255, 255, 255, .06); }

/* The horizontal trays live inside .tank-overlay (z-index: 4), while the toolbar
   is promoted to a direct child of .tank-stage. When a horizontal tray is open,
   the toolbar must drop below the entire overlay stacking context, not merely
   below the tray's child z-index. */
:root[data-toolbar-position] .tank-bottom-dock.is-behind-overlay {
  z-index: 3;
}

:root[data-toolbar-position] .tank-bottom-dock.is-behind-horizontal-menu:not(.is-behind-overlay) {
  z-index: 3;
}
.toolbar-wallet { height: 46px; min-width: 118px; box-sizing: border-box; display: grid; grid-template-columns: 38px 1fr; align-items: center; padding: 4px 12px 4px 5px; border: 1px solid color-mix(in srgb, var(--toolbar-tile-color, #4c92aa) 52%, rgba(232, 251, 255, .34)); border-radius: 10px; color: #eefbff; background: linear-gradient(color-mix(in srgb, var(--toolbar-tile-color, #4c92aa) 52%, #102a3a), color-mix(in srgb, var(--toolbar-tile-color, #4c92aa) 35%, #07141f)), var(--sprite-icon-tile, none) center / 46px 46px repeat; background-blend-mode: color, normal; box-shadow: inset 0 0 14px rgba(37,125,161,.12); }
.toolbar-wallet.is-gaining-coins { animation: toolbar-wallet-coin-gain 1s ease-out; }
@keyframes toolbar-wallet-coin-gain {
  0% { border-color: rgba(87, 255, 135, .32); box-shadow: inset 0 0 14px rgba(37,125,161,.12), 0 0 0 rgba(87,255,135,0); }
  28% { border-color: rgba(87, 255, 135, .9); box-shadow: inset 0 0 18px rgba(87,255,135,.22), 0 0 24px rgba(87,255,135,.72); }
  100% { border-color: rgba(75,155,188,.24); box-shadow: inset 0 0 14px rgba(37,125,161,.12), 0 0 0 rgba(87,255,135,0); }
}
.toolbar-wallet img { width: 36px; height: 36px; object-fit: contain; }
.toolbar-wallet strong { display: block; width: 100%; text-align: center; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.toolbar-wallet.is-full strong { color: #72ef91; text-shadow: 0 0 10px rgba(82,239,126,.5); }
.toolbar-wallet { cursor: pointer; font: inherit; }
.wallet-transaction-menu { position: absolute; right: calc(100% + 12px); top: 0; width: min(330px, calc(100vw - 42px)); max-height: min(360px, 58vh); overflow: hidden; border: 1px solid color-mix(in srgb, var(--toolbar-tile-color, #4c92aa) 42%, rgba(210, 242, 255, .34)); border-radius: 12px; background: rgba(5, 21, 33, .97); color: #edf9ff; box-shadow: 0 16px 38px rgba(0, 0, 0, .38); z-index: 12; }
.wallet-transaction-menu[hidden] { display: none; }
.wallet-transaction-menu header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px 9px 12px; border-bottom: 1px solid rgba(203, 238, 255, .15); font-size: .82rem; }
.wallet-transaction-menu header button { border: 1px solid rgba(255, 213, 43, .58); border-radius: 7px; padding: 5px 9px; color: #ffe16b; background: rgba(21, 78, 112, .72); font: inherit; font-size: .7rem; font-weight: 700; line-height: 1; cursor: pointer; }
.wallet-transaction-menu header button:hover { background: rgba(32, 105, 148, .9); }
.wallet-receipt-list { max-height: 306px; overflow-y: auto; overscroll-behavior: contain; }
.wallet-receipt { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 9px 12px; border-bottom: 1px solid rgba(203, 238, 255, .1); font-size: .76rem; }
.wallet-receipt:last-child { border-bottom: 0; }
.wallet-receipt strong { color: #82efa5; white-space: nowrap; }
.wallet-receipt.is-debit strong { color: #ffb199; }
.wallet-receipt strong img { width: .9em; height: .9em; object-fit: contain; vertical-align: -.08em; }
.wallet-receipt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(235, 249, 255, .9); }
.wallet-receipt time { grid-column: 2; color: rgba(194, 222, 235, .64); font-size: .68rem; }
.wallet-receipt-empty { margin: 0; padding: 16px 12px; color: rgba(223, 241, 249, .72); font-size: .78rem; }
:root[data-toolbar-position="left-center"] .wallet-transaction-menu { left: calc(100% + 12px); right: auto; }
:root[data-toolbar-position="bottom-center"] .wallet-transaction-menu { left: 0; right: auto; top: auto; bottom: calc(100% + 12px); }

/* Bubble Borough Bank */
.tankazon-store.is-web-home-open .tankazon-panel { grid-template-rows: auto minmax(0, 1fr) !important; }
.tankazon-store.is-web-home-open .tankazon-header,
.tankazon-store.is-web-home-open .tankazon-promo-strip,
.tankazon-store.is-web-home-open .tankazon-account-page,
.tankazon-store.is-web-home-open .tankazon-body,
.tankazon-store.is-web-home-open .store-scroll-controls { display: none !important; }
.tankazon-store.is-websurf-themes-open .tankazon-header,
.tankazon-store.is-websurf-themes-open .tankazon-promo-strip,
.tankazon-store.is-websurf-themes-open .tankazon-account-page,
.tankazon-store.is-websurf-themes-open .tankazon-body,
.tankazon-store.is-websurf-themes-open .store-scroll-controls { display: none !important; }
.web-home-page { grid-row: 2; min-width: 0; min-height: 0; overflow-y: auto; color: #173b59; background: radial-gradient(circle at 50% 0, rgba(94, 176, 230, .2), transparent 31%), linear-gradient(180deg, #f8fcff, #eaf4f9); font-family: system-ui, sans-serif; }
.web-home-page[hidden] { display: none !important; }
.websurf-home-header { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 154px; padding: 24px 40px 18px; text-align: left; }
.websurf-home-header > img { width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 8px 15px rgba(33, 102, 155, .2)); }
.websurf-home-header > div { display: grid; gap: 2px; }
.websurf-home-header span { color: #35628a; font-size: .78rem; font-weight: 850; letter-spacing: .2em; }
.websurf-home-header h1 { margin: 0; color: #123c60; font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.05; letter-spacing: -.045em; }
.websurf-home-header p { margin: 2px 0 0; color: #4e718e; font-size: .96rem; letter-spacing: .04em; }
.websurf-home-main { width: min(1640px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 34px; }
.websurf-bookmarks h2, .websurf-inbox h2 { margin: 0; font-size: 1.18rem; }
.websurf-bookmarks > h2 { margin-bottom: 7px; color: #527797; font-size: .68rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.websurf-bookmark-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 250px)); justify-content: start; gap: 10px; }
.websurf-bookmark { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 58px; padding: 8px 11px; border: 1px solid #bfd2df; border-radius: 9px; color: #173b59; background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(39, 75, 99, .06); font: inherit; text-align: left; cursor: pointer; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
.websurf-bookmark:hover { z-index: 1; border-color: #6f9fbd; transform: translateY(-2px); box-shadow: 0 11px 24px rgba(39, 75, 99, .13); }
.websurf-bookmark:focus-visible, .websurf-mail-row:focus-visible { outline: 3px solid rgba(31, 124, 194, .27); outline-offset: 2px; }
.websurf-bookmark > img { width: 34px; height: 34px; object-fit: contain; }
.websurf-bookmark > span { display: grid; gap: 2px; min-width: 0; }
.websurf-bookmark strong { font-size: .78rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.websurf-bookmark small { color: #68849a; font-size: .64rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.websurf-bookmark[hidden] { display: none !important; }
.websurf-bookmark.is-coming-soon { border-style: dashed; color: #91a7b8; background: rgba(244, 249, 252, .66); box-shadow: none; cursor: default; }
.websurf-bookmark.is-coming-soon > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e3edf3; font-size: 1rem; }
.websurf-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; margin-top: 20px; }
.websurf-inbox { border: 1px solid #bfd2df; border-radius: 12px 12px 0 0; background: rgba(255,255,255,.94); box-shadow: 0 8px 23px rgba(39,75,99,.08); }
.websurf-inbox { min-width: 0; overflow: hidden; }
.websurf-inbox > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; padding: 10px 18px; border-bottom: 1px solid #d9e5ec; }
.websurf-inbox > header > div { display: flex; align-items: center; gap: 10px; }
.websurf-inbox-icon { color: #3d82bb; font-size: 1.5rem; }
.websurf-unread-count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; color: #fff; background: #2e7bd0; font-size: .75rem; font-weight: 850; }
.websurf-inbox > header button { border: 1px solid #c7d9e4; border-radius: 7px; padding: 7px 11px; color: #326b98; background: #f6fbfe; font: inherit; font-size: .72rem; font-weight: 750; cursor: pointer; }
.websurf-inbox > header button:disabled { opacity: .45; cursor: default; }
.websurf-mail-item { border-bottom: 1px solid #dce7ed; }
.websurf-mail-item:last-child { border-bottom: 0; }
.websurf-mail-row-shell { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: stretch; min-width: 0; }
.websurf-mail-star { display: grid; place-items: center; min-width: 0; padding: 0; border: 0; color: #c7d8e4; background: transparent; cursor: pointer; }
.websurf-mail-star::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.websurf-mail-star span { display: none; }
.websurf-mail-row-shell.is-unread .websurf-mail-star { color: #2d80d8; }
.websurf-mail-row-shell.is-silenced .websurf-mail-star:not(.is-starred) { color: #a9bac6; }
.websurf-mail-star.is-starred { color: #d89d19; font-size: 1.2rem; line-height: 1; }
.websurf-mail-star.is-starred::before { display: none; }
.websurf-mail-star.is-starred span { display: block; transform: translateY(-1px); }
.websurf-mail-star:hover { background: #f1f8fc; color: #c98b00; }
.websurf-mail-star:focus-visible { outline: 3px solid rgba(31, 124, 194, .27); outline-offset: -3px; }
.websurf-mail-row { display: grid; grid-template-columns: 38px minmax(190px, 260px) minmax(360px, 1fr) 84px; align-items: center; gap: 13px; width: 100%; min-width: 0; min-height: 66px; padding: 9px 19px 9px 5px; border: 0; color: #244965; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.websurf-mail-row:hover { background: #f1f8fc; }
.websurf-mail-row.is-unread { color: #143d5f; background: #fafdff; }
.websurf-mail-item.is-open .websurf-mail-row, .websurf-mail-item.is-open .websurf-mail-star { background: #eef7fc; }
.websurf-mail-row > img { width: 36px; height: 36px; object-fit: contain; }
.websurf-mail-sender { display: grid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; font-weight: 650; }
.websurf-mail-sender small { color: #899eac; font-size: .62rem; font-weight: 750; text-transform: uppercase; }
.websurf-mail-row.is-unread .websurf-mail-sender, .websurf-mail-row.is-unread strong { font-weight: 850; }
.websurf-mail-copy { display: grid; gap: 3px; min-width: 0; }
.websurf-mail-copy strong, .websurf-mail-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.websurf-mail-copy strong { font-size: .82rem; }
.websurf-mail-copy small { color: #7892a8; font-size: .73rem; }
.websurf-mail-row time { justify-self: end; color: #7892a8; font-size: .72rem; white-space: nowrap; }
.websurf-mail-detail { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 4px 18px 16px 76px; color: #3b5d75; background: #eef7fc; }
.websurf-mail-body { min-width: 0; flex: 1 1 auto; }
.websurf-email-scroll {
  max-height: 540px;
  overflow-y: auto;
  padding: 14px 12px 14px 16px;
  border: 1px solid #d5e7f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(44, 100, 137, .05);
  scrollbar-width: thin;
  scrollbar-color: #78b6dc #dceef8;
}
.websurf-email-scroll::-webkit-scrollbar { width: 11px; }
.websurf-email-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #dceef8;
  box-shadow: inset 0 0 0 1px rgba(103, 164, 202, .14);
}
.websurf-email-scroll::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 2px solid #dceef8;
  border-radius: 999px;
  background: linear-gradient(180deg, #8bc8e9, #65a8d1);
}
.websurf-email-scroll::-webkit-scrollbar-thumb:hover { background: #559bc7; }
.websurf-email-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.websurf-email-scroll::-webkit-scrollbar-corner { background: transparent; }
.websurf-email-scroll p { margin: 0 0 9px; line-height: 1.45; }
.websurf-email-item-list, .websurf-email-transaction-list { display: grid; gap: 5px; margin: 10px 0; }
.websurf-email-item-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 40px; padding: 4px 7px; border: 1px solid #d6e7f1; border-radius: 7px; background: #fff; }
.websurf-email-item-row img { width: 36px; height: 36px; object-fit: contain; }
.websurf-email-item-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.websurf-email-transaction-row { display: grid; grid-template-columns: 58px 58px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid #d6e7f1; font-size: .75rem; }
.websurf-email-transaction-row strong { text-align: right; }
.websurf-email-transaction-row strong.is-money-in,
.websurf-email-summary.is-money-in > span { color: #21834b; }
.websurf-email-transaction-row strong.is-money-out,
.websurf-email-summary.is-money-out > span { color: #c04444; }
.websurf-email-summary { display: flex; justify-content: space-between; gap: 12px; padding-top: 5px; }
.websurf-email-summary span { text-align: right; }
.websurf-email-coin-amount { display: inline-flex; align-items: baseline; gap: .18em; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; white-space: nowrap; vertical-align: baseline; }
.websurf-email-coin-amount img { width: .95em !important; height: .95em !important; max-width: .95em; max-height: .95em; object-fit: contain; align-self: center; }
.websurf-email-coin-amount strong { display: inline; margin: 0; font: inherit; }
.websurf-mail-detail .websurf-email-coin-amount { display: inline-flex; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; }
.websurf-mail-detail .websurf-email-coin-amount strong,
.websurf-mail-copy .websurf-email-coin-amount strong { display: inline; margin: 0; font: inherit; }
.websurf-email-empty { color: #7892a8; font-style: italic; }
.websurf-email-heading { margin: 2px 0 12px; color: #123c60; font-size: 1.05rem; }
.websurf-email-guide-section { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; margin: 14px 0; }
.websurf-email-guide-section > img, .websurf-email-feature-list header img { width: 30px; height: 30px; object-fit: contain; }
.websurf-email-guide-section h4, .websurf-email-feature-list h4 { margin: 1px 0 4px; color: #244d6c; font-size: .84rem; }
.websurf-email-guide-section p { margin: 0; }
.websurf-email-guide-links { display: flex; flex-wrap: wrap; gap: 7px; margin: -5px 0 13px 44px; }
.websurf-email-guide-links button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #8eb7d3; border-radius: 6px; color: #185681; background: #fff; font: inherit; font-size: .74rem; font-weight: 750; cursor: pointer; }
.websurf-email-guide-links button img { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }
.websurf-mail-detail .websurf-email-guide-links button span { display: inline; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; }
.websurf-email-guide-links button:hover, .websurf-email-guide-links button:focus-visible { background: #dceffc; }
.websurf-email-feature-list { margin: 15px 0; padding-top: 12px; border-top: 1px solid #cbdfea; }
.websurf-email-feature-list header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.websurf-email-feature-row { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 8px; align-items: center; margin: 7px 0 7px 4px; }
.websurf-email-feature-row img { width: 24px; height: 24px; object-fit: contain; }
.websurf-email-feature-row p { margin: 2px 0 0; }
.websurf-email-feature-row strong { display: inline; margin-top: 0; }
.websurf-mail-detail > div:first-child { min-width: 0; }
.websurf-mail-detail span { display: block; color: #7892a8; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.websurf-mail-detail strong { display: block; margin-top: 2px; font-size: .76rem; }
.websurf-mail-detail p { margin: 7px 0 0; font-size: .78rem; line-height: 1.45; }
.websurf-inbox-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.websurf-mail-actions { display: flex; flex: 0 0 auto; align-self: flex-end; gap: 8px; }
.websurf-mail-actions button { border: 1px solid #9dbdd1; border-radius: 7px; padding: 7px 10px; color: #245b83; background: #fff; font: inherit; font-size: .7rem; font-weight: 750; cursor: pointer; }
.websurf-mail-actions button:hover { border-color: #4d8db7; background: #f7fcff; }
.websurf-mail-actions button:disabled { opacity: .42; cursor: default; }
.websurf-mail-actions button:disabled:hover { border-color: #9dbdd1; background: #fff; }
.websurf-mail-actions .websurf-trash-button { display: grid; place-items: center; width: 32px; height: 30px; padding: 5px; color: #86515d; border-color: #d1b2ba; }
.websurf-mail-actions .websurf-trash-button svg { width: 17px; height: 17px; fill: currentColor; }
.websurf-mail-actions .websurf-silence-button { color: #6c5260; border-color: #ceb9c2; }
.websurf-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; padding: 8px 15px; border: 1px solid #bfd2df; border-top: 0; border-radius: 0 0 12px 12px; color: #6c899f; background: #f0f7fb; box-shadow: 0 8px 23px rgba(39,75,99,.08); font-size: .7rem; }
.websurf-status-bar > span:last-child { display: inline-flex; align-items: baseline; gap: 8px; }
.websurf-status-bar small { color: #7892a8; font: inherit; }
.websurf-status-bar strong { color: #456b88; font-size: .72rem; font-weight: 800; }
@media (max-width: 980px) {
  html:not([data-layout-ratio-lock="true"]) .websurf-home-main { width: min(100% - 28px, 900px); }
  html:not([data-layout-ratio-lock="true"]) .websurf-bookmark-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:not([data-layout-ratio-lock="true"]) .websurf-dashboard-grid { grid-template-columns: 1fr; }
  html:not([data-layout-ratio-lock="true"]) .websurf-mail-row-shell { grid-template-columns: 28px minmax(0, 1fr); }
  html:not([data-layout-ratio-lock="true"]) .websurf-mail-row { grid-template-columns: 32px minmax(135px, .55fr) minmax(220px, 1fr) 62px; }
  html:not([data-layout-ratio-lock="true"]) .websurf-mail-detail { padding-left: 58px; }
}
@media (max-width: 620px) {
  html:not([data-layout-ratio-lock="true"]) .websurf-home-header { min-height: 120px; padding: 18px; }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-header > img { width: 58px; height: 58px; }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-header h1 { font-size: 1.75rem; }
  html:not([data-layout-ratio-lock="true"]) .websurf-bookmark-row { grid-template-columns: 1fr; }
  html:not([data-layout-ratio-lock="true"]) .websurf-bookmark.is-coming-soon { display: none; }
  html:not([data-layout-ratio-lock="true"]) .websurf-mail-row-shell { grid-template-columns: 26px minmax(0, 1fr); }
  html:not([data-layout-ratio-lock="true"]) .websurf-mail-row { grid-template-columns: 30px minmax(0, 1fr) 58px; gap: 8px; }
  html:not([data-layout-ratio-lock="true"]) .websurf-mail-sender { display: none; }
  html:not([data-layout-ratio-lock="true"]) .websurf-mail-copy small { white-space: normal; }
  html:not([data-layout-ratio-lock="true"]) .websurf-mail-detail { align-items: stretch; flex-direction: column; padding: 10px 15px 15px 53px; }
  html:not([data-layout-ratio-lock="true"]) .websurf-inbox > header { align-items: flex-start; flex-wrap: wrap; }
  html:not([data-layout-ratio-lock="true"]) .websurf-inbox-header-actions { width: 100%; justify-content: flex-end; }
  html:not([data-layout-ratio-lock="true"]) .websurf-mail-actions { flex-wrap: wrap; }
  html:not([data-layout-ratio-lock="true"]) .websurf-status-bar { align-items: flex-start; flex-direction: column; gap: 3px; }
}

.tankazon-store.is-bubble-bank-open .tankazon-panel { grid-template-rows: auto minmax(0, 1fr) !important; }
.tankazon-store.is-bubble-bank-open .tankazon-header,
.tankazon-store.is-bubble-bank-open .tankazon-promo-strip,
.tankazon-store.is-bubble-bank-open .tankazon-account-page,
.tankazon-store.is-bubble-bank-open .tankazon-body,
.tankazon-store.is-bubble-bank-open .store-scroll-controls { display: none !important; }
.bubble-bank-page { grid-row: 2; min-width: 0; min-height: 0; overflow: hidden; color: #08265d; background: linear-gradient(180deg, #087dc2 0 255px, #effaff 256px); }
.bubble-bank-page[hidden] { display: none !important; }
.bubble-bank-page:not([hidden]) { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.bubble-bank-window-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; min-height: 94px; padding: 8px 24px; border-bottom: 2px solid rgba(42, 210, 255, .72); color: #d9f7ff; background: radial-gradient(circle at 68% -30%, rgba(0, 151, 255, .34), transparent 42%), linear-gradient(135deg, #062f67, #021d4b); }
.bubble-bank-logo { display: block; width: auto; height: 76px; max-width: min(340px, 27vw); object-fit: contain; object-position: left center; }
.bubble-bank-window-actions { display: flex; align-items: center; gap: 14px; }
.bubble-bank-window-actions .bubble-bank-coin-amount { min-height: 48px; padding: 6px 18px; border: 2px solid rgba(65, 202, 255, .72); border-radius: 999px; color: #fff; background: linear-gradient(180deg, rgba(14, 126, 205, .94), rgba(3, 62, 132, .94)); box-shadow: inset 0 1px 8px rgba(143, 232, 255, .3); }
.bubble-bank-window-actions .bubble-bank-coin-amount strong { color: #fff; }
.bubble-bank-scroll { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bubble-bank-tabs { display: flex; gap: 10px; }
.bubble-bank-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 145px; padding: 13px 20px; border: 1px solid rgba(123, 197, 237, .52); border-radius: 10px; color: #c8e4ff; background: rgba(4, 42, 78, .75); font: inherit; font-size: .92rem; font-weight: 800; line-height: 1; cursor: pointer; }
.bubble-bank-tab-icon { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) saturate(100%) invert(84%) sepia(13%) saturate(1047%) hue-rotate(174deg) brightness(103%) contrast(101%); }
.bubble-bank-tab.is-active .bubble-bank-tab-icon { filter: brightness(0) saturate(100%) invert(81%) sepia(97%) saturate(1093%) hue-rotate(359deg) brightness(104%) contrast(101%); }
.bubble-bank-tab.is-active { border: 2px solid #ffd228; color: #ffd228; background: linear-gradient(180deg, rgba(23, 91, 134, .98), rgba(9, 53, 95, .98)); box-shadow: inset 0 -3px 0 #ffd228, 0 0 15px rgba(255, 210, 40, .18); }
.bubble-bank-shell { position: relative; min-height: 100%; padding-bottom: 1px; color: #08265d; background: linear-gradient(180deg, transparent 0 252px, #f8fcff 253px); }
.bubble-bank-welcome { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 176px; overflow: hidden; padding: 26px 64px; color: white; background: radial-gradient(circle at 8% 12%, rgba(130, 235, 255, .38) 0 5px, transparent 6px), radial-gradient(circle at 92% 70%, rgba(129, 226, 255, .28) 0 8px, transparent 9px), radial-gradient(ellipse at 50% 0, rgba(41, 204, 255, .42), transparent 58%), linear-gradient(105deg, #04528f, #087fc0 62%, #03508e); }
.bubble-bank-welcome::after { content: ""; position: absolute; inset: auto 0 0; height: 44px; opacity: .34; background: radial-gradient(ellipse at 8% 100%, #54d1df 0 22%, transparent 23%), radial-gradient(ellipse at 92% 100%, #29c3d8 0 22%, transparent 23%); pointer-events: none; }
.bubble-bank-welcome span { font-size: 1.05rem; }
.bubble-bank-welcome h2 { display: inline; margin: 0 0 0 8px; color: #ffd126; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.045em; }
.bubble-bank-welcome p { margin: 8px 0 0; color: #e7f8ff; font-size: 1rem; }
.bubble-bank-welcome > strong { color: #8ed9ff; text-align: right; line-height: 1.35; }
.bubble-bank-account, .bubble-bank-card-list, .bubble-bank-empty { position: relative; width: calc(100% - 92px); margin: 0 auto; }
.bubble-bank-balance-card { display: grid; grid-template-columns: 1fr; align-items: center; gap: 36px; margin: -20px auto 18px; padding: 24px 32px; border: 2px solid rgba(73, 214, 255, .62); border-radius: 20px; color: white; background: radial-gradient(circle at 84% 50%, rgba(26, 151, 217, .5), transparent 34%), linear-gradient(135deg, #075eb2, #0063a0); box-shadow: 0 9px 22px rgba(6, 56, 96, .28), inset 0 1px 12px rgba(123, 225, 255, .18); }
.bubble-bank-balance-card > div { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.bubble-bank-balance-card > div > span:first-child { flex-basis: 100%; font-size: 1.2rem; font-weight: 800; }
.bubble-bank-balance-card .bubble-bank-coin-amount strong { color: white; font-size: 2.8rem; }
.bubble-bank-balance-card .bubble-bank-coin-amount img { width: 54px; height: 54px; }
.bubble-bank-balance-card small { font-size: 1rem; }
.bubble-bank-balance-card p { margin: 0; padding-left: 34px; border-left: 1px solid rgba(123, 216, 255, .62); color: #bce8ff; line-height: 1.5; }
.bubble-bank-ledger { overflow: hidden; padding: 0 12px 10px; border: 1px solid #c5dce9; border-radius: 18px; background: rgba(255, 255, 255, .97); box-shadow: 0 8px 24px rgba(11, 54, 91, .13); }
.bubble-bank-ledger > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.bubble-bank-ledger > header div { display: flex; align-items: center; gap: 10px; }
.bubble-bank-ledger h3 { margin: 0; font-size: 1.25rem; }
.bubble-bank-ledger > header > span { color: #145ab3; font-size: .78rem; font-weight: 800; }
.bubble-bank-filter { min-width: 190px; padding: 10px 34px 10px 14px; border: 1px solid #b9d7e8; border-radius: 999px; color: #145ab3; background: #fff; font: inherit; font-size: .78rem; font-weight: 800; text-align: center; cursor: pointer; }
.bubble-bank-filter:focus-visible { outline: 3px solid rgba(20, 95, 195, .25); outline-offset: 2px; }
.bubble-bank-transaction { display: grid; grid-template-columns: 104px minmax(190px, 1fr) auto minmax(0, 130px); align-items: center; gap: 15px; margin: 0 0 7px; padding: 11px 16px; border: 1px solid #cce7df; border-radius: 12px; background: linear-gradient(90deg, #ecfaf4, #f4fcf8); }
.bubble-bank-transaction.is-debit { border-color: #efced1; background: #fff1f2; }
.bubble-bank-transaction.is-neutral { border-color: #dce5ea; background: #f5f8fa; }
.bubble-bank-coin-amount { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: #0b2d65; }
.bubble-bank-coin-amount img { width: 28px; height: 28px; object-fit: contain; }
.bubble-bank-coin-amount strong { font-size: 1.28rem; font-variant-numeric: tabular-nums; }
.bubble-bank-coin-amount.is-credit strong { color: #0b9b54; }
.bubble-bank-coin-amount.is-debit strong { color: #df2837; }
.bubble-bank-transaction-copy { display: flex; flex-direction: column; min-width: 0; }
.bubble-bank-transaction-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble-bank-transaction-copy span, .bubble-bank-transaction time, .bubble-bank-milestone-card time { color: #527099; font-size: .76rem; }
.bubble-bank-row-link { border: 0; padding: 7px 0; color: #145fc3; background: transparent; font: inherit; font-size: .76rem; font-weight: 800; line-height: 1; cursor: pointer; }
.bubble-bank-card-list { display: grid; gap: 12px; padding-bottom: 24px; }
.bubble-bank-reward-card, .bubble-bank-milestone-card, .bubble-bank-empty { border: 1px solid #c8dfea; border-radius: 13px; background: white; box-shadow: 0 8px 22px rgba(11, 54, 91, .09); }
.bubble-bank-reward-card summary { display: grid; grid-template-columns: 1fr auto 24px; align-items: center; gap: 18px; padding: 17px 20px; cursor: pointer; list-style: none; }
.bubble-bank-reward-card summary::-webkit-details-marker { display: none; }
.bubble-bank-reward-card summary > div { display: flex; flex-direction: column; }
.bubble-bank-reward-card summary span { color: #527099; font-size: .8rem; }
.bubble-bank-recap-score { display: inline-flex; align-items: center; justify-content: center; min-width: 82px; padding: 7px 10px; border: 1px solid #b8d2df; border-radius: 999px; background: #eef8fb; color: #174f68; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.bubble-bank-reward-card[open] .bubble-bank-chevron { transform: rotate(180deg); }
.bubble-bank-reward-math { padding: 0 20px 20px; border-top: 1px solid #e0edf3; }
.bubble-bank-reward-math > p { color: #527099; font-size: .78rem; }
.bubble-bank-math-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bubble-bank-math-columns > div { display: grid; gap: 7px; align-content: start; padding: 12px; border-radius: 9px; background: #eff9f4; }
.bubble-bank-math-columns > div:last-child { background: #fff2f2; }
.bubble-bank-math-columns h4 { margin: 0 0 2px; }
.bubble-bank-math-columns span { display: grid; grid-template-columns: 30px 1fr; gap: 7px; font-size: .78rem; }

.bubble-bank-progress-section { gap: 14px; }
.bubble-bank-progress-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.bubble-bank-progress-overview > div,
.bubble-bank-progress-panel,
.bubble-bank-progression-event {
  border: 1px solid #d5e0e6;
  border-radius: 11px;
  background: #fff;
}
.bubble-bank-progress-overview > div {
  display: grid;
  gap: 5px;
  min-height: 82px;
  padding: 13px 14px;
  align-content: center;
}
.bubble-bank-progress-overview span,
.bubble-bank-progress-panel span,
.bubble-bank-progression-event span,
.bubble-bank-progression-event small,
.bubble-bank-progression-event time { color: #607181; }
.bubble-bank-progress-overview > div > span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.bubble-bank-progress-overview > div > strong { font-size: 1.35rem; }
.bubble-bank-progress-panel { padding: 14px 16px; }
.bubble-bank-progress-panel h4 { margin: 0 0 10px; }
.bubble-bank-level-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bubble-bank-level-chip { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 8px; background: #eef4f7; font-size: .78rem; }
.bubble-bank-progress-rows { display: grid; gap: 7px; }
.bubble-bank-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid #e4eaee; }
.bubble-bank-progress-row:first-child { border-top: 0; padding-top: 0; }
.bubble-bank-progress-row > div { display: grid; gap: 2px; }
.bubble-bank-progress-row > span { white-space: nowrap; font-size: .78rem; }
.bubble-bank-progress-inline-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bubble-bank-progress-inline-list > span { padding: 7px 9px; border-radius: 999px; background: #eef4f7; font-size: .76rem; }
.bubble-bank-progression-event { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 15px; }
.bubble-bank-progression-symbol { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eef4f7; font-weight: 900; }
.bubble-bank-progression-event.is-complete .bubble-bank-progression-symbol { background: #fff2bc; }
.bubble-bank-progression-event > div { display: grid; gap: 2px; }
.bubble-bank-progression-event time { font-size: .74rem; white-space: nowrap; }
.bubble-bank-weekly-award-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; padding-top: 9px; border-top: 1px solid rgba(0,0,0,.08); }
.bubble-bank-weekly-award-row > span { display: block; font-weight: 800; }
.bubble-bank-weekly-award-row .bubble-bank-coin-amount { margin-left: auto; }
@media (max-width: 900px) {
  .bubble-bank-progress-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bubble-bank-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bubble-bank-milestone-card { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 18px; padding: 20px; }
.bubble-bank-milestone-card.is-target { outline: 3px solid #ffd228; box-shadow: 0 0 0 6px rgba(255, 210, 40, .22); }
.bubble-bank-milestone-star { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #36a8e2, #0b5cb4); font-size: 0; line-height: 1; text-align: center; }
.bubble-bank-milestone-star::before { content: "★"; display: block; font-family: Arial, sans-serif; font-size: 1.55rem; line-height: 1; transform: translateY(-1px); }
.bubble-bank-milestone-card h3 { margin: 2px 0 4px; }
.bubble-bank-milestone-card p, .bubble-bank-milestone-card small { display: block; margin: 0; color: #527099; }
.bubble-bank-milestone-card > div:last-child { display: grid; justify-items: end; gap: 4px; }
.bubble-bank-empty { display: grid; gap: 6px; padding: 30px; text-align: center; }
.bubble-bank-empty span { color: #527099; }
.bubble-bank-shell > footer { width: calc(100% - 76px); margin: 18px auto 24px; padding: 13px 18px; border-radius: 10px; color: #527099; background: #e5f1fa; font-size: .78rem; }

@media (max-width: 820px) {
  .bubble-bank-window-header { grid-template-columns: 1fr auto; align-items: start; gap: 10px; padding: 12px; }
  .bubble-bank-window-header .bubble-bank-tabs { grid-column: 1 / -1; grid-row: 2; }
  .bubble-bank-window-actions .bubble-bank-coin-amount { display: none; }
  .bubble-bank-tabs { gap: 5px; }
  .bubble-bank-tab { min-width: 0; padding: 9px 10px; font-size: .76rem; }
  .bubble-bank-welcome { padding: 22px; }
  .bubble-bank-welcome > strong { display: none; }
  .bubble-bank-account, .bubble-bank-card-list, .bubble-bank-empty { width: calc(100% - 24px); }
  .bubble-bank-balance-card { grid-template-columns: 1fr; gap: 14px; padding: 19px; }
  .bubble-bank-balance-card p { padding: 14px 0 0; border-top: 1px solid rgba(123, 216, 255, .62); border-left: 0; }
  .bubble-bank-transaction { grid-template-columns: 86px 1fr; gap: 7px 10px; }
  .bubble-bank-transaction time { grid-column: 2; }
  .bubble-bank-row-link { grid-column: 2; justify-self: start; }
  .bubble-bank-math-columns { grid-template-columns: 1fr; }
  .bubble-bank-milestone-card { grid-template-columns: 45px 1fr; }
  .bubble-bank-milestone-card > div:last-child { grid-column: 2; justify-items: start; }
}
.display-position-option.is-disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.35); }

/* Intentional loading cover for the Borough Overview. It stays fully opaque
   until the snapshot canvases underneath are ready. */
.borough-overview-loading {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #082f45 0%, #041d2d 58%, #031521 100%);
  color: #effcff;
  text-align: center;
}
.borough-overview-loading[hidden] { display: none !important; }
.borough-overview-loading strong {
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  letter-spacing: .01em;
}
.borough-overview-loading > span:last-child {
  color: #9bdff1;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.borough-overview-loading-icon-wrap {
  display: grid;
  place-items: center;
  width: min(180px, 34vw);
  height: 104px;
}
.borough-overview-loading-icon {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .28));
  transform-origin: 50% 68%;
  animation: borough-overview-icon-wiggle .78s ease-in-out infinite alternate;
}
@keyframes borough-overview-icon-wiggle {
  from { transform: rotate(-6deg) translateX(-3px) translateY(1px); }
  to { transform: rotate(6deg) translateX(3px) translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .borough-overview-loading-icon { animation: none; }
}

.borough-overview {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  padding: clamp(24px, 5vw, 64px);
  background:
    radial-gradient(circle at 50% 18%, rgba(31, 151, 214, 0.46), transparent 42%),
    linear-gradient(180deg, rgba(3, 43, 69, 0.95), rgba(1, 17, 31, 0.98));
  backdrop-filter: blur(8px);
  animation: borough-overview-in 260ms ease both;
}

.borough-overview[hidden] { display: none; }

.borough-overview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  color: #eefbff;
}

.borough-overview-header h2 { margin: 3px 0 5px; font-size: clamp(1.35rem, 3vw, 2.2rem); }
.borough-overview-header p { margin: 0; color: rgba(225, 246, 255, 0.76); }
.borough-overview-kicker { color: #7ce7ff; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.borough-overview-close { width: 42px; height: 42px; border-radius: 50%; font-size: 1.7rem; line-height: 1; }
.borough-overview-actions { display: flex; align-items: center; gap: 12px; }
.borough-overview-edit { min-width: 62px; min-height: 48px; display: grid; place-items: center; gap: 1px; border: 1px solid rgba(124,231,255,.55); border-radius: 13px; color: #dffaff; background: rgba(4,35,57,.78); }
.borough-overview-edit span { font-size: 1.25rem; line-height: 1; }
.borough-overview-edit small { font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.borough-overview-edit[aria-pressed="true"] { border-color: #7ce7ff; background: rgba(16,102,137,.88); box-shadow: 0 0 18px rgba(75,211,255,.3); }
.borough-overview-add { min-height: 48px; display: flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid rgba(124,231,255,.55); border-radius: 13px; color: #dffaff; background: rgba(4,35,57,.78); }
.borough-overview-add span { font-size: 1.35rem; line-height: 1; }
.borough-overview-add small { font-size: .72rem; font-weight: 900; white-space: nowrap; }
.borough-overview-add:disabled { opacity: .42; }
.borough-overview-status { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.borough-overview-status span { padding: 5px 9px; border: 1px solid rgba(129,222,250,.2); border-radius: 999px; color: rgba(223,246,255,.72); background: rgba(3,29,46,.48); font-size: .7rem; }
.borough-overview-status strong { color: #effcff; font-variant-numeric: tabular-nums; }
.borough-overview-status .has-alert { color: #ffd596; border-color: rgba(255,188,93,.36); background: rgba(95,51,18,.34); }
.borough-overview-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 390px); gap: 20px; min-width: 0; min-height: 0; }
.borough-overview-body.is-editing { grid-template-columns: minmax(0,1fr); }
.borough-overview-info { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(128,225,255,.25); border-radius: 18px; color: #eefbff; background: linear-gradient(160deg, rgba(5,38,59,.94), rgba(2,21,35,.96)); box-shadow: 0 18px 48px rgba(0,0,0,.3); }
.borough-overview-info[hidden] { display: none; }
.borough-overview-info-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border-bottom: 1px solid rgba(128,225,255,.16); background: rgba(1,19,31,.42); }
.borough-overview-info-tabs button { min-height: 36px; border-radius: 10px; color: rgba(220,246,255,.7); background: transparent; font-weight: 850; }
.borough-overview-info-tabs button[aria-pressed="true"] { color: #effcff; background: rgba(39,151,186,.36); box-shadow: inset 0 0 0 1px rgba(125,231,255,.3); }
.borough-overview-info-body { min-height: 0; display: grid; align-content: start; gap: 10px; overflow: auto; padding: 12px; scrollbar-gutter: stable; }
.borough-info-section { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(129,222,250,.14); border-radius: 13px; background: rgba(4,27,43,.56); }
.borough-info-section .compact-heading h3 { color: #f0fbff; }
.borough-info-section .compact-heading p { color: rgba(214,241,250,.62); }
.borough-overview-task-list { display: grid; gap: 7px; }
.borough-overview-task { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(127,220,248,.15); border-radius: 10px; color: #eafaff; text-align: left; background: rgba(13,73,95,.28); }
button.borough-overview-task:hover, button.borough-overview-task:focus-visible { border-color: rgba(139,239,255,.64); background: rgba(21,109,137,.45); }
.borough-overview-task > span { padding: 3px 6px; border-radius: 999px; color: #bdefff; background: rgba(56,174,209,.18); font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.borough-overview-task > strong { min-width: 0; font-size: .76rem; line-height: 1.25; }
.borough-overview-task > small { color: rgba(215,241,249,.6); font-size: .62rem; }
.borough-overview-record-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.borough-overview-record-grid button { display: grid; gap: 3px; padding: 10px; border: 1px solid rgba(127,220,248,.16); border-radius: 10px; color: #eafbff; text-align: left; background: rgba(16,78,99,.25); }
.borough-overview-record-grid button:hover, .borough-overview-record-grid button:focus-visible { border-color: rgba(139,239,255,.6); background: rgba(21,109,137,.4); }
.borough-overview-record-grid span { color: rgba(210,239,248,.58); font-size: .64rem; }
.borough-neighborhood-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.borough-neighborhood-heading span { color: #79e6ff; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.borough-neighborhood-heading h3 { margin: 2px 0 0; font-size: 1.1rem; }
.borough-neighborhood-meta, .borough-neighborhood-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.borough-neighborhood-meta span { padding: 4px 7px; border-radius: 999px; color: rgba(220,246,255,.72); background: rgba(28,108,135,.25); font-size: .65rem; }
.borough-care-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.borough-care-stat-grid article { display: grid; gap: 2px; padding: 9px; border-radius: 9px; background: rgba(2,20,33,.5); }
.borough-care-stat-grid span { color: rgba(207,238,248,.55); font-size: .62rem; text-transform: uppercase; }
.borough-care-stat-grid strong { color: #f0fbff; font-size: .76rem; }
.borough-overview-info .management-browser { min-height: 0; height: 100%; padding: 0; border: 0; background: transparent; }
.borough-overview-info .management-browser-scroll-shell { min-height: 0; }
.borough-overview-info .management-browser-list { max-height: none; }

.borough-grid {
  --borough-columns: 1;
  --borough-rows: 1;
  display: grid;
  grid-template-columns: repeat(var(--borough-columns), minmax(210px, 430px));
  grid-template-rows: repeat(var(--borough-rows), minmax(158px, 280px));
  place-content: center;
  gap: 32px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.borough-grid-cell {
  min-width: 210px;
  min-height: 158px;
  border-radius: 18px;
  border: 1px solid rgba(170, 231, 255, 0.32);
  color: #eefbff;
  display: grid;
  place-content: center;
  gap: 7px;
  text-align: center;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24), inset 0 0 32px rgba(70, 187, 226, 0.08);
}

.borough-section-cell { position: relative; grid-template-rows: auto auto; place-content: center stretch; gap: 0; min-height: 0; overflow: visible; padding: 0; border: 0; text-align: left; background: transparent; box-shadow: none; cursor: grab; }
.borough-section-cell.is-dragging { opacity: 0.48; cursor: grabbing; }
.borough-grid:not(.is-editing) .borough-section-cell { cursor: default; }
.borough-drop-cell { border: 1px dashed rgba(124,231,255,.28); border-radius: 16px; background: rgba(3,35,55,.2); pointer-events: none; }
.borough-grid.is-editing .borough-drop-cell { pointer-events: auto; }
.borough-grid.is-editing { grid-template-rows: repeat(var(--borough-rows), minmax(220px, 280px)); }
.borough-drop-cell.is-drop-target { border-color: #8af1ff; background: rgba(53,190,231,.2); box-shadow: inset 0 0 28px rgba(78,216,255,.18); }
.borough-preview-shell { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 112px; }
.borough-section-cell:not(.is-dragging):hover .borough-section-preview { border-color: rgba(138, 241, 255, 0.72); }
.borough-section-cell.is-active .borough-section-preview { border-color: #8af1ff; box-shadow: 0 0 0 3px rgba(100, 229, 255, 0.2), 0 14px 36px rgba(0, 0, 0, 0.3); }
.borough-section-cell.is-info-selected .borough-section-preview { border-color: #ffd17d; box-shadow: 0 0 0 2px rgba(255,195,91,.22), 0 14px 36px rgba(0,0,0,.3); }
.borough-section-preview { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 1px solid rgba(170, 231, 255, 0.32); border-radius: 14px; overflow: hidden; background: #073553; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24); }
.borough-cell-snapshot-canvas,
.borough-cell-fish-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.borough-cell-snapshot-canvas { z-index: 0; }
.borough-cell-fish-canvas { z-index: 1; opacity: 0.92; }
.borough-cell-copy { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; align-items: center; gap: 4px; padding: 9px 4px 0; background: transparent; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95); }
.borough-cell-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.borough-cell-stats { display: block; color: rgba(226, 217, 255, 0.84) !important; font-size: 0.68rem !important; font-style: italic; }
.borough-travel-wall { position: absolute; z-index: 8; top: 50%; right: -25px; width: 18px; height: 56px; padding: 0; transform: translateY(-50%); border: 1px solid rgba(126, 229, 255, 0.52); border-radius: 9px; color: #bff7ff; background: rgba(5, 42, 64, 0.94); font-weight: 900; cursor: pointer; }
.borough-travel-wall:hover, .borough-travel-wall:focus-visible { border-color: #bdf7ff; background: rgba(18, 91, 116, 0.98); }
.borough-travel-wall.is-blocked { color: #ffd18a; border-color: rgba(255, 170, 73, 0.86); background: rgba(109, 46, 22, 0.96); box-shadow: 0 0 12px rgba(255, 125, 52, 0.3); }
.borough-rename-button { width: 26px; height: 26px; min-width: 26px; padding: 0; border-radius: 50%; color: #78e5ff; background: rgba(73, 181, 218, 0.12); }
.borough-info-button { width: 23px; height: 23px; min-width: 23px; margin-left: auto; padding: 0; border: 1px solid rgba(121,228,255,.42); border-radius: 50%; color: #a8efff; background: rgba(22,111,142,.42); font-size: .72rem; font-family: Georgia, serif; font-weight: 900; }
.borough-sell-button { margin-left: auto; min-height: 27px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid rgba(255,132,132,.5); border-radius: 999px; color: #ffd2d2; background: rgba(111,24,34,.72); }
.borough-sell-button small { color: inherit !important; font-size: .64rem !important; font-weight: 900; }
.borough-sell-button:disabled { opacity: .38; cursor: not-allowed; }
.borough-name-editor { grid-column: 1 / -1; display: flex; gap: 5px; width: 100%; }
.borough-name-editor input { min-width: 0; flex: 1; border: 1px solid rgba(119, 226, 255, 0.6); border-radius: 8px; padding: 5px 7px; color: #fff; background: rgba(1, 18, 30, 0.9); }
.borough-name-editor button { min-width: 52px; padding: 4px 7px; border-radius: 8px; font-size: 0.66rem; }
.borough-section-cell strong { font-size: clamp(0.9rem, 1.7vw, 1.15rem); }
.borough-section-cell span, .borough-expansion-cell small { color: rgba(221, 246, 255, 0.72); font-size: 0.75rem; }
.borough-cell-services { color: #82e9ff !important; font-size: 0.66rem !important; font-weight: 800; letter-spacing: 0.02em; }
.borough-cell-services { grid-column: 1 / -1; }
.borough-cell-services.is-empty { color: rgba(221, 246, 255, 0.42) !important; font-weight: 600; }
.borough-expansion-cell { min-width: 120px; border-style: dashed; background: linear-gradient(155deg, rgba(15, 74, 104, 0.48), rgba(4, 30, 49, 0.76)); }
.borough-expansion-cell span { font-size: 2rem; color: #7ce7ff; }
.borough-expansion-cell:hover, .borough-expansion-cell:focus-visible { background: rgba(24, 111, 144, 0.8); border-color: #8af1ff; }
.dock-button.borough-control[aria-pressed="true"] { background: linear-gradient(180deg, rgba(32, 151, 179, 0.98), rgba(12, 75, 103, 0.96)); box-shadow: 0 0 0 2px rgba(125, 235, 255, 0.32); }
.dock-button.borough-control.extend span { font-size: 1.8rem; line-height: 1; }
.borough-grid.is-compact { grid-template-columns: repeat(var(--borough-columns), minmax(150px, 250px)); grid-template-rows: repeat(var(--borough-rows), minmax(150px, 210px)); gap: 22px; }
.borough-grid.is-compact .borough-grid-cell { min-width: 150px; min-height: 110px; border-radius: 12px; }
.borough-grid.is-compact .borough-section-cell strong { font-size: 0.76rem; }
.borough-grid.is-compact .borough-section-cell span { font-size: 0.62rem; }
.borough-grid.is-compact .borough-travel-wall { right: -19px; width: 14px; height: 44px; }
.borough-grid.is-micro { grid-template-columns: repeat(var(--borough-columns), minmax(108px, 170px)); grid-template-rows: repeat(var(--borough-rows), minmax(120px, 160px)); gap: 17px; }
.borough-grid.is-micro .borough-grid-cell { min-width: 108px; min-height: 82px; border-radius: 8px; }
.borough-grid.is-micro .borough-travel-wall { right: -15px; width: 12px; height: 36px; }
.borough-grid.is-micro .borough-cell-services { display: none; }
.borough-service-note { color: #75dff4; }
.appearance-clipboard-actions { margin-left: auto; }
.fish-life-story { display: grid; gap: 5px; margin: 10px 0; padding: 9px; border: 1px solid rgba(116, 223, 255, 0.2); border-radius: 10px; background: rgba(3, 34, 53, 0.52); }
.fish-life-story:empty { display: none; }
.fish-life-story > div { display: grid; grid-template-columns: minmax(74px, auto) 1fr; gap: 9px; align-items: baseline; font-size: 0.75rem; }
.fish-life-story span { color: rgba(216, 244, 255, 0.62); }
.fish-life-story strong { color: #eefcff; font-weight: 700; text-align: right; }
.borough-memorials { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(172, 196, 255, 0.2); border-radius: 12px; background: linear-gradient(145deg, rgba(53, 54, 99, 0.28), rgba(7, 34, 52, 0.5)); }
.borough-memorial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.borough-memorial-card { display: grid; gap: 3px; padding: 9px; border-radius: 9px; background: rgba(7, 21, 38, 0.62); }
.borough-memorial-card span, .borough-memorial-card small { color: rgba(222, 236, 255, 0.68); }
.borough-happenings-feed { display: grid; gap: 6px; }
.borough-happenings-feed article { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: rgba(19, 101, 131, 0.14); }
.borough-happenings-feed small { flex: 0 0 auto; color: rgba(210, 240, 250, 0.52); }
.borough-activity-notifications { position: fixed; z-index: 1200; right: 18px; bottom: 92px; display: grid; gap: 7px; width: min(310px, calc(100vw - 28px)); pointer-events: none; }
.borough-activity-notification { display: grid; gap: 2px; padding: 9px 12px; border: 1px solid rgba(112, 226, 255, 0.28); border-radius: 11px; color: #effcff; background: rgba(3, 37, 57, 0.9); box-shadow: 0 12px 30px rgba(0,0,0,.28); opacity: 0; transform: translateY(8px); transition: opacity 220ms ease, transform 220ms ease; backdrop-filter: blur(8px); }
.borough-activity-notification.is-visible { opacity: 1; transform: translateY(0); }
.borough-activity-notification span { color: rgba(217, 245, 255, 0.68); font-size: 0.74rem; }
@media (max-width: 700px) { .borough-activity-notifications { right: 10px; bottom: 76px; } }
.notification-center-list { display: grid; gap: 9px; }
.notification-center-entry { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid rgba(121, 220, 255, 0.16); border-radius: 13px; background: rgba(3, 33, 51, 0.52); }
.notification-center-entry.is-unread { border-color: rgba(121, 230, 255, 0.42); background: linear-gradient(135deg, rgba(13, 100, 130, 0.34), rgba(3, 33, 51, 0.7)); box-shadow: inset 3px 0 0 rgba(105, 225, 255, 0.7); }
.notification-center-entry.is-actionable { cursor: pointer; }
.notification-center-entry.is-actionable:hover, .notification-center-entry.is-actionable:focus-visible { border-color: rgba(139, 240, 255, 0.7); background: rgba(12, 74, 99, 0.72); outline: none; }
.notification-center-icon, .notification-center-symbol { width: 48px; height: 48px; align-self: start; border-radius: 50%; object-fit: contain; }
.notification-center-symbol { display: grid; place-items: center; color: #d9fbff; background: rgba(64, 179, 218, 0.2); font-size: 1.5rem; }
.notification-center-copy { display: grid; min-width: 0; gap: 5px; }
.notification-center-copy > strong { color: #f2fcff; font-size: 0.95rem; }
.notification-center-copy > p { margin: 0; color: rgba(221, 244, 251, 0.72); font-size: 0.76rem; line-height: 1.45; }
.notification-center-meta { display: flex; justify-content: space-between; gap: 10px; color: rgba(191, 232, 244, 0.58); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; }
.notification-center-rewards { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.notification-center-rewards span { padding: 3px 7px; border-radius: 999px; color: #dfffee; background: rgba(51, 181, 113, 0.18); font-size: 0.68rem; }
.notification-center-copy .small-button { justify-self: start; margin-top: 4px; }
.debug-living-status { display: grid; gap: 3px; padding: 8px; margin-bottom: 7px; border-radius: 8px; color: #c8f5ff; background: rgba(20, 103, 132, 0.22); font-size: 0.68rem; }
.debug-living-inspector { display: grid; gap: 3px; margin: 0 0 8px; padding: 8px; border: 1px solid rgba(125, 225, 255, 0.16); border-radius: 8px; background: rgba(3, 27, 42, 0.34); font-size: 0.65rem; }
.debug-living-inspector div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px; }
.debug-living-inspector span { color: rgba(195, 239, 250, 0.68); }
.debug-living-inspector strong { min-width: 0; overflow-wrap: anywhere; color: #e7fbff; font-weight: 650; }
.debug-living-needs-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px; }
.debug-living-needs-editor label { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 4px; color: #bfefff; font-size: 0.62rem; }
.debug-living-needs-editor input { width: 44px; min-width: 0; padding: 4px; color: #fff; border: 1px solid rgba(125, 225, 255, 0.3); border-radius: 6px; background: #092b40; }
.borough-debug-preview-cell { overflow: hidden; background: linear-gradient(180deg, rgba(29, 156, 213, 0.44), rgba(3, 59, 100, 0.72)); }
.borough-debug-preview-water { position: absolute; inset: 0 0 64px; display: block; opacity: 0.58; background: radial-gradient(circle at 50% 0, rgba(156, 242, 255, 0.38), transparent 45%); }
.borough-debug-preview-water i { position: absolute; width: 5px; height: 5px; border: 1px solid rgba(181, 245, 255, 0.7); border-radius: 50%; animation: borough-debug-bubble 2.4s linear infinite; }
.borough-debug-preview-water i:nth-child(1) { left: 24%; bottom: 18%; }
.borough-debug-preview-water i:nth-child(2) { left: 56%; bottom: 8%; animation-delay: -0.8s; }
.borough-debug-preview-water i:nth-child(3) { left: 76%; bottom: 25%; animation-delay: -1.6s; }
@keyframes borough-debug-bubble { to { transform: translateY(-52px); opacity: 0; } }
.debug-living-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.debug-living-controls .debug-menu-button {
  min-width: 0;
  padding: 7px 8px;
  font-size: 0.67rem;
  min-height: 38px;
  grid-template-columns: minmax(0, 1fr);
}
.debug-living-controls .debug-menu-button .debug-menu-label {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.debug-living-controls select { min-width: 0; width: 100%; padding: 6px; color: #fff; border: 1px solid rgba(125, 225, 255, 0.3); border-radius: 7px; background: #092b40; }
.transit-tube-settings-preview { display: block; width: min(230px, 68vw); max-height: 310px; margin: auto; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.35)); }
.transit-tube-settings .custom-decor-name-row input { width: 100%; border: 1px solid rgba(114, 226, 255, 0.34); border-radius: 9px; padding: 9px 10px; color: #fff; background: rgba(3, 25, 42, 0.72); }

@keyframes borough-overview-in { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 700px) {
  .borough-overview { padding: 18px 12px 72px; gap: 8px; }
  .borough-overview-header { gap: 8px; }
  .borough-overview-status { display: none; }
  .borough-overview-body { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(180px,1fr) minmax(190px,42vh); gap: 8px; }
  .borough-grid { grid-template-columns: repeat(var(--borough-columns), minmax(170px, 260px)); grid-template-rows: repeat(var(--borough-rows), minmax(126px, 180px)); padding: 8px; }
  .borough-grid-cell { min-width: 170px; min-height: 126px; border-radius: 13px; }
}

@media (min-width: 701px) and (max-width: 1040px) {
  .borough-overview { padding: 22px; }
  .borough-overview-body { grid-template-columns: minmax(0,1fr) minmax(280px,34vw); gap: 12px; }
  .borough-grid { grid-template-columns: repeat(var(--borough-columns), minmax(170px, 300px)); grid-template-rows: repeat(var(--borough-rows), minmax(140px, 220px)); gap: 24px; padding: 10px; }
}

.tank-bottom-dock.is-toolbar-collapsed {
  transform: var(--toolbar-collapsed-transform);
}

:root[data-toolbar-position="bottom-center"] .tank-bottom-dock {
  --toolbar-open-transform: translateX(-50%);
  --toolbar-collapsed-transform: translateX(-50%) translateY(calc(100% + var(--toolbar-taskbar-clearance)));
  left: 50%;
  right: auto;
  top: auto;
  bottom: var(--toolbar-taskbar-clearance);
  transform: var(--toolbar-open-transform);
  flex-direction: row;
  padding: 8px 9px;
  border-radius: 14px;
}

.toolbar-tab {
  position: absolute;
  right: calc(100% - var(--toolbar-tab-overlap));
  top: 50%;
  width: var(--toolbar-tab-thickness);
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--toolbar-shell-border-color);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: var(--toolbar-shell-color);
  color: rgba(232, 247, 255, 0.82);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: none;
  z-index: 2;
}

.toolbar-tab:hover,
.toolbar-tab:focus-visible {
  background: var(--toolbar-shell-color);
  color: #fff;
}

:root[data-toolbar-position="left-center"] .toolbar-tab {
  left: calc(100% - var(--toolbar-tab-overlap));
  right: auto;
  border-right: 1px solid var(--toolbar-shell-border-color);
  border-left: 0;
  border-radius: 0 12px 12px 0;
}

:root[data-toolbar-position="bottom-center"] .toolbar-tab {
  left: 50%;
  right: auto;
  top: auto;
  bottom: calc(100% - var(--toolbar-tab-overlap));
  width: 52px;
  height: var(--toolbar-tab-thickness);
  border: 1px solid var(--toolbar-shell-border-color);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  transform: translateX(-50%);
}

:root[data-toolbar-position="bottom-center"] .toolbar-tab::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: calc(-1 * var(--toolbar-tab-overlap));
  height: calc(var(--toolbar-tab-overlap) + 1px);
  background: var(--toolbar-shell-color);
  pointer-events: none;
}

.toolbar-fast-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  max-width: min(220px, calc(100vw - 24px));
  padding: 8px 12px;
  border: 1px solid rgba(173, 225, 255, 0.2);
  border-radius: 6px;
  background: rgba(5, 17, 27, 0.94);
  color: rgba(244, 251, 255, 0.98);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(3px) scale(0.98);
  transition:
    opacity 80ms ease,
    transform 100ms ease;
}

.toolbar-fast-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

:root[data-toolbar-position="left-center"] .tank-bottom-dock {
  --toolbar-open-transform: translateY(-50%);
  --toolbar-collapsed-transform: translateY(-50%) translateX(calc(-100% - var(--toolbar-edge-gap)));
  left: 22px;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: var(--toolbar-open-transform);
  flex-direction: column;
}

:root[data-toolbar-position="bottom-center"] .fish-inspector {
  right: 24px;
}

:root[data-toolbar-position="left-center"] .fish-inspector {
  right: 24px;
}

.dock-button {
  position: relative;
  z-index: 3;
  width: 45px;
  height: 45px;
  padding: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: linear-gradient(color-mix(in srgb, var(--toolbar-tile-color, #4c92aa) 74%, #163448), color-mix(in srgb, var(--toolbar-tile-color, #4c92aa) 52%, #081722)), var(--sprite-icon-tile, none) center / 45px 45px no-repeat;
  background-blend-mode: color, normal;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dock-button-badge,
.dock-button-mode-badge {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid rgba(5, 17, 27, 0.96);
  border-radius: 999px;
  background: #ff6f61;
  color: #fff;
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.34);
}

.dock-button-badge {
  top: -3px;
  right: -3px;
}

.dock-button-mode-badge {
  right: -4px;
  bottom: -3px;
  min-width: 19px;
  background: rgba(51, 111, 163, 0.98);
  font-size: 0.48rem;
}

.dock-button-badge[hidden],
.dock-button-mode-badge[hidden] {
  display: none;
}

.toolbar-action-menu {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: max-content;
  padding: 7px;
  border: 1px solid rgba(173, 225, 255, 0.2);
  border-radius: 18px;
  background: rgba(5, 17, 27, 0.95);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
  transform: translateY(-50%);
}

.toolbar-action-menu[hidden] {
  display: none;
}

:root[data-toolbar-position="left-center"] .toolbar-action-menu {
  right: auto;
  left: calc(100% + 12px);
}

:root[data-toolbar-position="bottom-center"] .toolbar-action-menu {
  right: auto;
  left: 50%;
  top: auto;
  bottom: calc(100% + 12px);
  flex-direction: row;
  transform: translateX(-50%);
}

.toolbar-action-menu-button {
  min-width: 104px;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px 7px 8px;
  border: 0;
  border-radius: 13px;
  background: rgba(17, 40, 58, 0.94);
  color: rgba(242, 250, 255, 0.96);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}

.toolbar-action-menu-button img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.24));
}

.toolbar-action-menu-button:is(:hover, :focus-visible) {
  background: rgba(28, 65, 91, 0.98);
  transform: translateY(-1px);
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(173, 225, 255, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

.toolbar-action-menu-button.is-active {
  background: rgba(48, 75, 79, 0.98);
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 121, 0.58),
    0 0 16px rgba(255, 217, 121, 0.18);
}

.settings-inline-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(173, 225, 255, 0.1);
}

.settings-inline-action[hidden] {
  display: none;
}

.settings-action-button {
  flex: 0 0 auto;
}

.dock-button-icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.24));
  transition: transform var(--transition);
}

.coin-symbol {
  display: inline-block;
  width: 1em;
  height: 1em;
  object-fit: contain;
  flex: 0 0 auto;
  vertical-align: -0.14em;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.24));
}

.coin-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  white-space: nowrap;
  vertical-align: middle;
}

.coin-amount-icon {
  width: 1.05em;
  height: 1.05em;
}

.dock-button .coin-symbol {
  width: 100%;
  height: 100%;
}

.dock-button-emoji {
  display: block;
  line-height: 1;
  font-size: 2.25rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.24));
  transition: transform var(--transition);
}

.dock-button:is(:hover, :focus-visible) {
  transform: translateY(-1px) scale(1.3);
}

.dock-button:is(:hover, :focus-visible, :active, .is-active, [aria-pressed="true"]) {
  z-index: 6;
}

.dock-button:is(:hover, :focus-visible) .dock-button-icon,
.dock-button:is(:hover, :focus-visible) .dock-button-emoji {
  transform: none;
}

.dock-button.edit-shortcut-control {
  display: none;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.dock-button.debug {
  background: linear-gradient(180deg, rgba(255, 220, 92, 0.98), rgba(231, 177, 38, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(122, 83, 8, 0.24),
    0 4px 10px rgba(164, 116, 14, 0.18);
}

.tank-bottom-dock > .dock-button.debug:not(#toggleDebugMenuButton) {
  display: none;
}

.debug-sidebar {
  position: absolute;
  top: 112px;
  left: 0;
  bottom: 94px;
  width: auto;
  max-width: calc(100vw - 96px);
  z-index: 8;
  display: flex;
  pointer-events: auto;
}

.debug-sidebar[hidden] {
  display: none;
}

.debug-sidebar-panel {
  --debug-menu-content-width: min(300px, calc(100vw - 118px));
  width: calc(var(--debug-menu-content-width) + 20px);
  max-width: calc(100vw - 96px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px 14px;
  border: 1px solid rgba(215, 246, 255, 0.26);
  border-left: 0;
  border-radius: 0 14px 14px 0;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 36%, rgba(255, 255, 255, 0.015) 100%),
    linear-gradient(180deg, rgba(8, 27, 42, 0.3), rgba(3, 12, 20, 0.24));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset -1px 0 0 rgba(255, 255, 255, 0.06),
    0 22px 52px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(8px) saturate(1.35);
  backdrop-filter: blur(8px) saturate(1.35);
  scrollbar-gutter: stable;
}

.debug-sidebar-panel::-webkit-scrollbar {
  width: 10px;
}

.debug-sidebar-panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.debug-sidebar-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 217, 121, 0.22);
  border-radius: 999px;
}

.debug-sidebar-header {
  display: grid;
  gap: 0;
}

.debug-sidebar-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
}

.debug-menu-section {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.debug-menu-section h3 {
  margin: 0;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.debug-menu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  width: var(--debug-menu-content-width);
  min-width: 0;
}

.debug-menu-grid.is-paired {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.debug-menu-button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 217, 121, 0.2);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(5, 17, 27, 0.24);
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--transition),
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    opacity var(--transition);
}

.debug-menu-button span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.debug-menu-button.wide {
  grid-column: 1 / -1;
  width: 100%;
  grid-template-columns: 22px minmax(0, 1fr);
}

.debug-menu-button:hover,
.debug-menu-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 217, 121, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 217, 121, 0.16), rgba(255, 255, 255, 0.08)),
    rgba(5, 17, 27, 0.3);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.debug-menu-button.is-active {
  border-color: rgba(125, 224, 248, 0.46);
  background:
    linear-gradient(135deg, rgba(125, 224, 248, 0.18), rgba(255, 217, 121, 0.08)),
    rgba(5, 17, 27, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(125, 224, 248, 0.22),
    0 0 0 4px rgba(125, 224, 248, 0.08);
}

.debug-menu-button.danger {
  border-color: rgba(255, 150, 124, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 150, 124, 0.14), rgba(255, 217, 121, 0.035)),
    rgba(5, 17, 27, 0.24);
}

.debug-menu-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.debug-decor-performance {
  padding: 10px;
  gap: 9px;
  border: 1px solid rgba(125, 224, 248, 0.24);
  border-radius: 9px;
  background: rgba(4, 16, 25, 0.9);
}

.debug-decor-performance h3 {
  font-size: 0.82rem;
}

.debug-decor-performance .debug-depth-tuner-note {
  color: #e0f4fa;
  font-size: 0.82rem;
  line-height: 1.5;
}

.debug-decor-performance .debug-menu-grid {
  width: 100%;
  gap: 8px;
}

.debug-decor-performance .debug-menu-button {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 64px;
  padding: 10px;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: normal;
  background: #102b3b;
}

.debug-decor-performance .debug-menu-button span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.debug-decor-option-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.debug-decor-option-copy small {
  color: #d4e9f1;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
}

.debug-decor-performance .debug-menu-button .debug-decor-option-state {
  padding: 4px 6px;
  border: 1px solid #718b99;
  border-radius: 5px;
  color: #eef9ff;
  font-size: 0.76rem;
  line-height: 1;
  white-space: nowrap;
}

.debug-decor-performance .debug-menu-button.is-active {
  background: #123c4b;
  box-shadow: inset 0 0 0 1px rgba(125, 224, 248, 0.22);
}

.debug-decor-performance .debug-menu-button.is-active .debug-decor-option-state {
  color: #061b26;
  border-color: #7de0f8;
  background: #7de0f8;
}

.debug-progression-readout {
  width: var(--debug-menu-content-width);
  max-height: 150px;
  margin: 0;
  padding: 8px;
  overflow: auto;
  border: 1px solid rgba(125, 224, 248, 0.18);
  border-radius: 8px;
  background: rgba(4, 16, 25, 0.28);
  color: rgba(238, 249, 255, 0.88);
  font: 0.68rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.debug-menu-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(5, 17, 27, 0.22);
  font-size: 0.9rem;
  line-height: 1;
}


.debug-depth-tuner {
  display: grid;
  gap: 7px;
  width: var(--debug-menu-content-width);
  padding: 8px;
  border: 1px solid rgba(125, 224, 248, 0.18);
  border-radius: 9px;
  background: rgba(4, 16, 25, 0.22);
}

.debug-depth-tuner-note {
  margin: 0 0 2px;
  color: rgba(224, 244, 250, 0.72);
  font-size: 0.64rem;
  line-height: 1.35;
}

.debug-depth-slider {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.debug-depth-slider > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 800;
}

.debug-depth-slider output {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.debug-depth-slider input[type="range"] {
  width: 100%;
  min-width: 0;
  margin: 0;
  accent-color: #7de0f8;
}

.debug-frame-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 800;
}

.debug-frame-stepper > div {
  display: grid;
  grid-template-columns: 24px minmax(30px, auto) 24px;
  align-items: center;
  gap: 4px;
}

.debug-frame-stepper button {
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(120, 213, 240, 0.48);
  border-radius: 5px;
  background: rgba(15, 42, 58, 0.9);
  color: #dff8ff;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
}

.debug-frame-stepper button:hover,
.debug-frame-stepper button:focus-visible {
  border-color: #7de0f8;
  background: rgba(31, 89, 116, 0.95);
}

.debug-frame-stepper output {
  min-width: 30px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.debug-depth-tuner-readout {
  min-height: 34px;
  padding: 6px 7px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(224, 244, 250, 0.82);
  font: 0.61rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.debug-depth-tuner-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.debug-menu-icon .coin-symbol {
  width: 18px;
  height: 18px;
}

.debug-fish-behavior-preview {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 34px);
  pointer-events: auto;
}

body.debug-fish-behavior-preview-open {
  overflow: hidden;
}

.debug-fish-behavior-preview[hidden] {
  display: none;
}

.debug-fish-behavior-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 9, 17, 0.82);
  backdrop-filter: blur(8px);
}

.debug-fish-behavior-preview-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(260px, 1fr) auto auto;
  gap: 12px;
  width: min(1040px, 96vw);
  max-height: min(900px, 94vh);
  padding: 18px;
  overflow: auto;
  color: #eafaff;
  border: 1px solid rgba(137, 218, 243, 0.3);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(13, 31, 45, 0.99), rgba(5, 18, 30, 0.99));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58), inset 0 1px rgba(255, 255, 255, 0.06);
}

.debug-fish-behavior-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.debug-fish-behavior-preview-header h2 {
  margin: 2px 0 3px;
  color: #f5fcff;
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
}

.debug-fish-behavior-preview-header p,
.debug-fish-behavior-preview-description {
  margin: 0;
  color: rgba(202, 237, 248, 0.7);
  font-size: 0.82rem;
}

.debug-fish-behavior-preview-kicker {
  color: #67dcf3;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.debug-fish-behavior-preview-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.debug-fish-behavior-preview-controls label {
  display: grid;
  gap: 5px;
  color: #a9dcea;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.debug-fish-behavior-preview-controls select {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 34px 0 10px;
  color: #f4fbff;
  border: 1px solid rgba(116, 205, 230, 0.34);
  border-radius: 9px;
  background: #092438;
}

.debug-fish-behavior-preview-controls .small-button {
  height: 38px;
  min-width: 84px;
}

.debug-fish-behavior-preview-stage {
  position: relative;
  min-height: clamp(260px, 48vh, 510px);
  overflow: hidden;
  border: 1px solid rgba(122, 201, 224, 0.22);
  border-radius: 13px;
  background-color: #07131e;
  background-image:
    linear-gradient(45deg, #101f2d 25%, transparent 25%),
    linear-gradient(-45deg, #101f2d 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #101f2d 75%),
    linear-gradient(-45deg, transparent 75%, #101f2d 75%),
    radial-gradient(ellipse at center, rgba(18, 76, 102, 0.28), transparent 67%);
  background-position: 0 0, 0 12px, 12px -12px, -12px 0, 0 0;
  background-size: 24px 24px, 24px 24px, 24px 24px, 24px 24px, 100% 100%;
}

.debug-fish-behavior-preview-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.debug-fish-behavior-preview-crosshair::before,
.debug-fish-behavior-preview-crosshair::after {
  position: absolute;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: rgba(104, 206, 232, 0.1);
}

.debug-fish-behavior-preview-crosshair::before {
  top: 50%;
  left: 8%;
  width: 84%;
  height: 1px;
}

.debug-fish-behavior-preview-crosshair::after {
  top: 10%;
  left: 50%;
  width: 1px;
  height: 80%;
}

.debug-fish-behavior-preview-status {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 2;
  padding: 5px 8px;
  color: rgba(220, 247, 255, 0.78);
  border: 1px solid rgba(112, 207, 235, 0.18);
  border-radius: 7px;
  background: rgba(3, 18, 29, 0.72);
  font-size: 0.68rem;
}

.debug-fish-behavior-preview-readouts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.debug-fish-behavior-preview-readouts div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(122, 201, 224, 0.23);
  border-radius: 10px;
  background: rgba(4, 17, 28, 0.62);
}

.debug-fish-behavior-preview-readouts span {
  color: #8bcce0;
  font-size: 0.67rem;
}

.debug-fish-behavior-preview-readouts strong {
  color: #f3fbff;
  font-size: 0.9rem;
}

@media (max-width: 680px) {
  .debug-fish-behavior-preview {
    padding: 7px;
  }

  .debug-fish-behavior-preview-panel {
    width: 100%;
    max-height: 98vh;
    padding: 12px;
  }

  .debug-fish-behavior-preview-controls {
    grid-template-columns: 1fr 1fr;
  }

  .debug-fish-behavior-preview-controls .small-button {
    grid-column: 1 / -1;
  }

  .debug-fish-behavior-preview-stage {
    min-height: 250px;
  }

  .debug-fish-behavior-preview-readouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dock-button.is-active {
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 121, 0.62),
    0 0 0 3px rgba(255, 217, 121, 0.14),
    0 0 18px rgba(255, 217, 121, 0.24);
}

.dock-button:disabled,
.buy-button:disabled,
.small-button:disabled,
.background-card button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.buy-button.owned-background-button:disabled {
  background: #b9c0c5;
  border-color: #a4adb3;
  color: #4e5960;
  opacity: 1;
  box-shadow: none;
}

.fish-inspector {
  position: absolute;
  top: 24px;
  right: 94px;
  width: min(340px, 30vw);
}

.fish-inspector.is-docked-below-display {
  right: auto;
  bottom: auto;
}

.fish-inspector[hidden] {
  display: none;
}

.fish-inspector-card,
.info-card,
.summary-card,
.fish-card,
.mini-card,
.shop-card,
.background-card {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.fish-inspector-card,
.info-card,
.summary-card,
.fish-card,
.mini-card,
.shop-card {
  padding: 16px;
  border-radius: 20px;
}

.fish-inspector-card {
  background: linear-gradient(180deg, rgba(10, 24, 38, 0.94), rgba(7, 18, 29, 0.94));
  padding: 10px;
  border-radius: 12px;
  touch-action: pan-y;
}

.fish-inspector.is-docked-below-display .fish-inspector-card {
  max-height: inherit;
  overflow: auto;
}

.fish-inspector-name-row {
  display: grid;
  grid-template-columns: max-content minmax(72px, 1fr) 32px 32px;
  align-items: center;
  gap: 5px;
}

.fish-inspector-name-row label {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
}

.fish-name-input-wrap {
  position: relative;
  min-width: 0;
}

.fish-inspector-name-row input {
  min-width: 0;
  width: 100%;
  height: 32px;
  padding: 6px 7px;
  padding-right: 28px;
  border-radius: 6px;
  border: 1px solid var(--panel-line-strong);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.fish-name-clear-button {
  position: absolute;
  right: 5px;
  top: 50%;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 142, 142, 0.34);
  background: rgba(150, 24, 24, 0.88);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
}

.fish-name-clear-button[hidden] {
  display: none !important;
}

.wallpaper-name-keyboard {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 7px;
  border-radius: 12px;
  border: 1px solid rgba(215, 246, 255, 0.16);
  background: rgba(4, 14, 22, 0.58);
}

.wallpaper-name-keyboard[hidden] {
  display: none !important;
}

.wallpaper-name-keyboard-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
}

.wallpaper-name-keyboard button,
.wallpaper-name-keyboard-spacer {
  min-width: 0;
}

.wallpaper-name-keyboard button {
  min-height: 27px;
  padding: 0 4px;
  border-radius: 7px;
  border: 1px solid rgba(215, 246, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 900;
}

.wallpaper-name-keyboard button.is-wide {
  grid-column: span 2;
}

.wallpaper-name-keyboard-spacer.is-wide {
  grid-column: span 2;
}

.wallpaper-name-keyboard button.is-space {
  grid-column: span 8;
}

.wallpaper-name-keyboard button.is-backspace {
  grid-column: span 2;
}

.wallpaper-name-keyboard button.is-primary {
  background: linear-gradient(135deg, rgba(142, 232, 255, 0.96), rgba(68, 180, 238, 0.9));
  color: #041a2d;
}

.fish-inspector .inspector-icon-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1;
  text-align: center;
}

.fish-inspector .inspector-save-button {
  position: relative;
  font-size: 0;
  overflow: hidden;
}

.fish-inspector .inspector-save-button::before {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  background: center / 17px 17px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304131e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h13l3 3v13H4z'/%3E%3Cpath d='M8 4v6h8V4'/%3E%3Cpath d='M8 20v-6h8v6'/%3E%3C/svg%3E");
  transform: none;
}

.inspector-lines {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.inspector-line {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 20px;
  font-size: 0.8rem;
}

.inspector-line span,
.inspector-setting-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.inspector-line strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.fish-needs-bars {
  display: grid;
  gap: 7px;
}

.selected-fish-needs-bars {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.fish-need-row {
  position: relative;
  display: grid;
  grid-template-columns: 30px 70px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 27px;
}

.fish-need-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(70, 240, 235, 0.86);
  border-radius: 50%;
  background: rgba(5, 28, 45, 0.82);
  color: #7ff7ef;
  font-size: 0.56rem;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 10px rgba(70, 240, 235, 0.18);
}

.fish-need-row[data-need-tone="warn"] .fish-need-icon {
  border-color: rgba(255, 182, 43, 0.86);
  color: #ffcf62;
  box-shadow: 0 0 12px rgba(255, 177, 31, 0.2);
}

.fish-need-row[data-need-tone="danger"] .fish-need-icon {
  border-color: rgba(255, 75, 104, 0.88);
  color: #ff8293;
  box-shadow: 0 0 14px rgba(255, 56, 92, 0.26);
}

.fish-need-label {
  color: rgba(139, 244, 244, 0.96);
  font-weight: 900;
  font-size: 0.68rem;
}

.fish-need-meter {
  position: relative;
  height: 12px;
  overflow: hidden;
  border: 1px solid rgba(88, 233, 228, 0.35);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(1, 9, 18, 0.74), rgba(6, 19, 31, 0.72));
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(66, 236, 231, 0.08);
}

.fish-need-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #18d47a, #5cff95);
  box-shadow: 0 0 10px rgba(55, 255, 143, 0.34);
  transition: width 280ms ease;
  overflow: hidden;
}

.fish-need-meter[data-tone="warn"] .fish-need-fill {
  background: linear-gradient(90deg, #ffb11f, #ffe066);
  box-shadow: 0 0 10px rgba(255, 190, 54, 0.32);
}

.fish-need-meter[data-tone="danger"] .fish-need-fill {
  background: linear-gradient(90deg, #ff385c, #ff7a8e);
  box-shadow: 0 0 10px rgba(255, 56, 92, 0.34);
}

.fish-need-trend-marquee {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  width: 200%;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 7px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.38);
  white-space: nowrap;
  animation: fishNeedTrendRight 920ms linear infinite;
}

.fish-need-row[data-need-trend="rising"] .fish-need-trend-marquee,
.fish-need-row[data-need-trend="falling"] .fish-need-trend-marquee {
  display: flex;
}

.fish-need-row[data-need-trend="falling"] .fish-need-trend-marquee {
  animation-name: fishNeedTrendLeft;
  color: rgba(255, 255, 255, 0.62);
}

.fish-need-trend-value {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  min-width: 56px;
  padding: 4px 7px;
  border: 1px solid rgba(73, 241, 236, 0.35);
  border-radius: 8px;
  background: rgba(5, 29, 45, 0.86);
  color: #56ff91;
  font-size: 0.64rem;
  font-weight: 900;
  text-align: center;
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(55, 255, 143, 0.16);
  pointer-events: none;
}

.fish-need-row[data-need-trend="falling"] .fish-need-trend-value {
  color: #ff8293;
  box-shadow: 0 0 12px rgba(255, 56, 92, 0.18);
}

@keyframes fishNeedTrendRight {
  from {
    transform: translateX(-38%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes fishNeedTrendLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-38%);
  }
}

.fish-inspector-settings {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(188, 225, 246, 0.12);
}

.fish-inspector-settings[hidden] {
  display: none;
}

.inspector-setting-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 6px;
}

.inspector-setting-row input[type="range"] {
  min-width: 0;
}

.inspector-setting-row strong {
  color: var(--ink);
  font-size: 0.72rem;
  text-align: right;
}

.inspector-setting-row-select {
  grid-template-columns: 66px minmax(0, 1fr);
}

.inspector-setting-row-select select {
  min-width: 0;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--panel-line);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
}

.inspector-setting-row-select select option {
  background: #f7fbff;
  color: #10202c;
  font-size: 0.92rem;
  font-weight: 700;
}

.fish-inspector-color-card {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(188, 225, 246, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.fish-inspector-color-swatches {
  gap: 6px;
}

.fish-inspector-color-swatches .custom-gravel-color-swatch {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.fish-inspector-color-swatches .bubbler-color-default-tile {
  width: auto;
  min-width: 58px;
  padding: 0 8px;
  font-size: 0.62rem;
}

.fish-inspector-colorize-toggle {
  justify-self: start;
}

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

.fish-inspector-header h2 {
  margin-bottom: 0;
}

.inspector-species {
  margin-bottom: 6px;
  color: var(--brand);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.close-inspector {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.icon-button {
  min-width: 52px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 217, 121, 0.18), rgba(255, 255, 255, 0.05));
  color: var(--ink);
  font-weight: 800;
}

.icon-button.icon-only {
  min-width: 48px;
  padding: 10px 12px;
  font-size: 1.2rem;
  line-height: 1;
}

.icon-button.is-active {
  box-shadow:
    inset 0 0 0 2px rgba(125, 224, 248, 0.34),
    0 0 0 6px rgba(125, 224, 248, 0.08);
}

.inspector-field {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.inspector-field span {
  color: var(--muted);
  font-size: 0.84rem;
}

.inspector-field input {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-line-strong);
  background: rgba(255, 255, 255, 0.05);
}

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

.inspector-stat {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.inspector-stat span {
  color: var(--muted);
  font-size: 0.8rem;
}

.fish-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 8px;
  max-width: 100%;
}

.fish-inspector-actions .small-button,
.fish-inspector-action-button {
  white-space: nowrap;
}

.fish-inspector-action-button {
  flex: 0 0 auto;
  min-width: 58px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 230, 148, 0.78);
  border-radius: 8px;
  color: #241600;
  font-weight: 900;
  font-size: 0.78rem;
  line-height: 1;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    opacity var(--transition);
}

.fish-action-sell {
  background: linear-gradient(135deg, #ff8a8a, #e23f4f);
  border-color: rgba(255, 160, 172, 0.78);
  color: #2b0609;
}

.fish-action-buy {
  background: linear-gradient(135deg, #8df0a4, #2fcf6c);
  border-color: rgba(136, 244, 166, 0.84);
  color: #03220f;
}

.fish-action-store {
  min-width: 88px;
  background: linear-gradient(135deg, #ffe987, #f0b934);
  border-color: rgba(255, 232, 142, 0.88);
  color: #281800;
}

.fish-action-settings {
  min-width: 88px;
  background: linear-gradient(135deg, #9bdcff, #4ba7ff);
  border-color: rgba(175, 225, 255, 0.84);
  color: #051a2d;
}

.fish-inspector-action-button:hover,
.fish-inspector-action-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.26);
}

.fish-inspector-action-button:disabled {
  cursor: default;
  opacity: 0.56;
  transform: none;
}

.fish-action-settings.is-active {
  box-shadow:
    inset 0 0 0 2px rgba(5, 26, 45, 0.26),
    0 10px 18px rgba(0, 0, 0, 0.26);
}

@media (max-width: 560px) {
  .fish-inspector-action-button {
    min-width: 52px;
    min-height: 32px;
    padding: 0 8px;
    font-size: 0.66rem;
  }

  .fish-action-store,
  .fish-action-settings {
    min-width: 78px;
  }
}

.summary-grid {
  display: grid;
  gap: 10px;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row span {
  color: var(--muted);
}

.summary-row strong {
  color: var(--ink);
  font-size: 1rem;
}

.rule-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
}

.event-feed,
.card-stack,
.mini-card-stack,
.shop-drawer {
  display: grid;
  gap: 12px;
}

.event-line {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.shop-drawer {
  align-content: start;
}

.shop-drawer.is-open {
  margin-bottom: 0;
}

.store-overlay {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: grid;
  place-items: center;
  padding: 32px;
  background: transparent;
}

.store-overlay[hidden] {
  display: none !important;
}

.tutorial-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: block;
  padding: 0;
  pointer-events: none;
}

.tutorial-overlay.is-blocking {
  pointer-events: auto;
}

.tutorial-overlay[hidden] {
  display: none !important;
}

.tutorial-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: none;
}

.utility-overlay {
  z-index: 16;
}

html[data-hardware-acceleration-notice-open="true"] .tank-overlay {
  z-index: 10000;
}

html[data-hardware-acceleration-notice-open="true"] .tank-overlay > :not(.utility-overlay) {
  visibility: hidden;
  pointer-events: none;
}

html[data-hardware-acceleration-notice-open="true"] .utility-overlay[data-utility-mode="hardware-acceleration"] {
  z-index: 10001;
}

.tutorial-overlay.is-splash::before {
  background: transparent;
  backdrop-filter: none;
}

.tutorial-splash {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.tutorial-splash[hidden] {
  display: none !important;
}

.tutorial-splash-content {
  width: 100%;
  height: 100%;
}

.tutorial-splash-logo {
  opacity: 1;
  transform: scale(1);
}

.tutorial-overlay.is-splash:not(.is-waiting-for-loading) .tutorial-splash-logo {
  animation: tutorial-logo-fade 7s linear both;
}

.tutorial-panel {
  --tutorial-pane-left: 18px;
  --tutorial-pane-top: 18px;
  position: absolute;
  left: var(--tutorial-pane-left);
  top: var(--tutorial-pane-top);
  z-index: 1;
  width: min(310px, calc(100% - 36px));
  display: grid;
  gap: 8px;
  padding: 12px 42px 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(204, 238, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(12, 31, 45, 0.54), rgba(4, 14, 22, 0.46));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  pointer-events: none;
  transition:
    left 220ms ease,
    top 220ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.tutorial-close-button {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  pointer-events: auto;
}

.store-close-button.tutorial-close-button {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, rgba(138, 24, 24, 0.96), rgba(91, 15, 15, 0.96));
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.tutorial-copy {
  display: grid;
  gap: 10px;
}

.tutorial-kicker {
  margin: 0;
  color: rgba(170, 230, 255, 0.82);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tutorial-copy p {
  margin: 0;
}

.tutorial-copy p,
.tutorial-body {
  color: rgba(232, 247, 255, 0.9);
  line-height: 1.25;
}

.tutorial-body {
  display: grid;
  gap: 8px;
}

.tutorial-body p {
  margin: 0;
}

.tutorial-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.tutorial-actions .small-button {
  min-width: 140px;
}

@keyframes tutorial-logo-fade {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  71.43% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.035);
  }
}

.tutorial-task-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 24px;
  animation: tutorial-task-row-in 220ms ease both;
}

.tutorial-task-box {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(218, 248, 255, 0.84);
  background: rgba(1, 12, 19, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 12px rgba(125, 224, 248, 0.16);
}

.tutorial-task-box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #071014;
  border-bottom: 2px solid #071014;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
}

.tutorial-task-label {
  position: relative;
  display: inline-block;
  min-width: 0;
  width: max-content;
  max-width: 100%;
  color: rgba(244, 252, 255, 0.96);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.12;
  text-shadow:
    0 0 10px rgba(125, 224, 248, 0.2),
    0 1px 4px rgba(0, 0, 0, 0.28);
}

.tutorial-task-text {
  display: block;
  overflow-wrap: anywhere;
}

.tutorial-task-strike {
  position: absolute;
  left: -2px;
  top: calc(50% + 1px);
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 235, 155, 0.95), rgba(125, 224, 248, 0.96));
  box-shadow:
    0 0 8px rgba(255, 217, 121, 0.62),
    0 0 14px rgba(125, 224, 248, 0.24);
}

.tutorial-task-row.is-complete {
  animation:
    tutorial-task-complete-pop 260ms ease both,
    tutorial-task-row-out 540ms ease 1.46s forwards;
}

.tutorial-task-row.is-complete .tutorial-task-box {
  animation: tutorial-task-box-check 220ms ease forwards;
}

.tutorial-task-row.is-complete .tutorial-task-box::after {
  animation: tutorial-task-check-mark 180ms ease 80ms forwards;
}

.tutorial-task-row.is-complete .tutorial-task-strike {
  animation: tutorial-task-strike 520ms steps(var(--task-letter-count, 12)) 210ms forwards;
}

.tutorial-task-row.is-complete .tutorial-task-text {
  animation: tutorial-task-text-dim 360ms ease 760ms forwards;
}

@keyframes tutorial-task-row-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

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

@keyframes tutorial-task-complete-pop {
  0% {
    transform: scale(1);
  }

  48% {
    transform: scale(1.035);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes tutorial-task-row-out {
  to {
    opacity: 0;
    transform: translateY(-7px);
  }
}

@keyframes tutorial-task-box-check {
  to {
    border-color: rgba(255, 217, 121, 0.95);
    background: rgba(255, 217, 121, 0.94);
    box-shadow:
      0 0 0 4px rgba(255, 217, 121, 0.1),
      0 0 18px rgba(255, 217, 121, 0.28);
  }
}

@keyframes tutorial-task-check-mark {
  to {
    transform: rotate(-45deg) scale(1);
  }
}

@keyframes tutorial-task-strike {
  to {
    width: calc(100% + 4px);
  }
}

@keyframes tutorial-task-text-dim {
  to {
    color: rgba(232, 247, 255, 0.58);
  }
}

@keyframes tutorial-guidance-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(255, 217, 121, 0.48),
      0 0 0 0 rgba(255, 217, 121, 0.2),
      0 0 18px 0 rgba(255, 217, 121, 0.24);
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }

  50% {
    box-shadow:
      0 0 0 14px rgba(255, 217, 121, 0),
      0 0 36px 12px rgba(255, 217, 121, 0.42),
      0 0 68px 18px rgba(255, 217, 121, 0.2);
    filter: brightness(1.18) saturate(1.24);
    transform: scale(1.045);
  }
}

.dock-button.is-tutorial-pulse,
.toolbar-action-menu-button.is-tutorial-pulse,
.store-tab-button.is-tutorial-pulse,
.buy-button.is-tutorial-pulse,
.store-close-button.is-tutorial-pulse,
.toolbar-tab.is-tutorial-pulse,
.display-tab.is-tutorial-pulse {
  animation: tutorial-guidance-pulse 1.35s ease-in-out infinite;
  will-change: transform, box-shadow, filter;
}

.dock-button.is-tutorial-reveal,
.toolbar-action-menu-button.is-tutorial-reveal {
  animation: tutorial-toolbar-reveal 520ms cubic-bezier(0.18, 0.9, 0.22, 1.18) both;
  will-change: transform, opacity, filter;
}

@keyframes tutorial-toolbar-reveal {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.72);
    filter: brightness(1.35) saturate(1.25);
  }

  58% {
    opacity: 1;
    transform: translateY(-5px) scale(1.14);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1) saturate(1);
  }
}

.tank-display.is-tutorial-pulse .display-grid,
.edit-decor-tile.is-tutorial-pulse .edit-decor-tile-surface,
.shop-card.is-tutorial-pulse,
.inventory-card.is-tutorial-pulse {
  animation: tutorial-guidance-pulse 1.35s ease-in-out infinite;
  will-change: transform, box-shadow, filter;
}

.tank-display.is-tutorial-hidden,
.tank-bottom-dock.is-tutorial-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.store-tab-button.is-tutorial-hidden,
.dock-button.is-tutorial-hidden,
.toolbar-action-menu-button.is-tutorial-hidden,
.toolbar-tab.is-tutorial-hidden,
.display-tab.is-tutorial-hidden,
.store-panel-actions > .is-tutorial-hidden {
  display: none !important;
}

.store-panel {
  width: min(860px, calc(100vw - 120px));
  max-width: 100%;
  height: min(78vh, 760px);
  max-height: min(78vh, 760px);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(10, 24, 38, 0.98), rgba(7, 18, 29, 0.98));
  border: 1px solid rgba(173, 225, 255, 0.12);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(16px);
}

.utility-overlay[data-utility-mode="tank-management"] .store-panel {
  width: min(1120px, calc(100vw - 80px));
  height: min(80dvh, 680px);
  max-height: min(80dvh, 680px);
  gap: 10px;
}

.utility-overlay[data-utility-mode="tank-management"] .store-panel-body {
  overflow: hidden;
  padding-right: 0;
}

.utility-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  max-height: min(88vh, 820px);
}

.utility-overlay[data-utility-mode="decor-sell-confirm"] .utility-panel {
  height: auto;
  max-height: calc(100dvh - 40px);
  grid-template-rows: auto minmax(0, auto) auto;
  align-self: center;
}

.utility-overlay[data-utility-mode="bubbler-settings"] .utility-panel {
  height: min(94vh, 980px);
  max-height: min(94vh, 980px);
}

.utility-overlay[data-utility-mode="custom-decor-name"] .utility-panel {
  width: min(1120px, calc(100vw - 80px));
  height: min(90dvh, 860px);
  max-height: min(90dvh, 860px);
}

.utility-overlay[data-utility-mode="decor-settings"] .utility-panel,
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .utility-panel,
.utility-overlay[data-utility-mode="custom-hide-create"] .utility-panel {
  width: min(1120px, calc(100vw - 80px));
  height: min(94dvh, 980px);
  max-height: min(94dvh, 980px);
}

.utility-overlay[data-utility-mode="save-export"] .utility-panel {
  width: min(980px, calc(100vw - 80px));
  height: min(88dvh, 820px);
  max-height: min(88dvh, 820px);
}

.utility-overlay[data-utility-mode="hardware-acceleration"] .utility-panel {
  width: min(1040px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
}

@media (min-width: 768px) and (min-height: 560px) {
  .utility-overlay[data-utility-mode="fish-sell-confirm"] .utility-panel {
    width: min(520px, calc(100vw - 40px));
    height: auto;
    max-height: min(68dvh, 390px);
    grid-template-rows: auto minmax(0, auto) auto;
  }
}

.utility-overlay-body {
  overflow: auto;
  touch-action: pan-y;
  padding-right: 4px;
}

.store-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.store-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.store-coin-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 217, 121, 0.16);
  border: 1px solid rgba(255, 217, 121, 0.22);
  color: var(--gold);
  font-weight: 800;
  white-space: nowrap;
}

.store-coin-icon {
  width: 1.25em;
  height: 1.25em;
}

.store-panel-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.store-tab-button {
  min-width: 110px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.store-tab-button.is-active {
  background: linear-gradient(135deg, rgba(125, 224, 248, 0.22), rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 0 0 1px rgba(125, 224, 248, 0.2),
    0 0 0 4px rgba(125, 224, 248, 0.06);
}

.store-close-button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  background: linear-gradient(180deg, rgba(122, 22, 22, 0.96), rgba(88, 15, 15, 0.96));
  color: #fff;
  border: 1px solid rgba(255, 160, 160, 0.2);
}

.store-panel-body {
  min-height: 0;
  overflow: hidden;
}

.utility-panel .utility-overlay-body {
  min-height: 0;
  overflow: auto;
  padding-right: 8px;
  padding-bottom: 12px;
  overscroll-behavior: contain;
}

.utility-overlay[data-utility-mode="tank-management"] .utility-panel .utility-overlay-body {
  overflow: hidden;
  padding-right: 0;
  padding-bottom: 0;
}

.utility-overlay[data-utility-mode="custom-decor-name"] .utility-panel .utility-overlay-body,
.utility-overlay[data-utility-mode="decor-settings"] .utility-panel .utility-overlay-body,
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .utility-panel .utility-overlay-body,
.utility-overlay[data-utility-mode="custom-hide-create"] .utility-panel .utility-overlay-body {
  overflow: hidden;
}

.utility-overlay-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-top: 8px;
}

.utility-overlay[data-utility-mode="hardware-acceleration"] .utility-overlay-footer {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.hardware-acceleration-card {
  display: grid;
  gap: 14px;
}

.hardware-acceleration-card .utility-confirm-copy {
  width: 100%;
  max-width: none;
}

.hardware-acceleration-instructions {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
  margin-top: 4px;
}

.hardware-acceleration-details {
  border-radius: 12px;
  border: 1px solid rgba(173, 225, 255, 0.12);
  background: rgba(6, 18, 29, 0.48);
  overflow: hidden;
}

.hardware-acceleration-details summary {
  cursor: pointer;
  padding: 10px 12px;
  color: #f3fbff;
  font-weight: 800;
  list-style-position: inside;
}

.hardware-acceleration-details summary:focus-visible {
  outline: 2px solid rgba(125, 224, 248, 0.72);
  outline-offset: -2px;
}

.hardware-acceleration-details ol {
  margin: 0;
  padding: 0 16px 12px 34px;
  color: rgba(232, 247, 255, 0.74);
  line-height: 1.45;
}

.hardware-acceleration-details li + li {
  margin-top: 5px;
}

.hardware-acceleration-dismiss-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(232, 247, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 800;
}

.save-export-panel {
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr);
  gap: 12px;
  min-height: 100%;
}

.save-export-summary {
  grid-template-columns: minmax(0, 1fr);
}

.save-export-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.save-export-pill {
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(125, 224, 248, 0.12);
  border: 1px solid rgba(125, 224, 248, 0.18);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.save-export-textarea {
  width: 100%;
  min-height: 0;
  resize: none;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(188, 225, 246, 0.16);
  background: rgba(3, 11, 18, 0.86);
  color: #e9f8ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre;
  outline: none;
}

.save-export-textarea:focus {
  border-color: rgba(125, 224, 248, 0.58);
  box-shadow: 0 0 0 3px rgba(125, 224, 248, 0.14);
}

.store-drawer {
  align-content: start;
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-right: 4px;
}

.store-overlay.has-store-scroll-controls .store-drawer {
  padding-right: 76px;
}

.store-scroll-controls {
  position: absolute;
  right: 36px;
  top: 50%;
  z-index: 4;
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
}

.store-scroll-controls[hidden] {
  display: none !important;
}

.store-scroll-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(215, 246, 255, 0.28);
  background: rgba(7, 18, 29, 0.9);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

.store-scroll-button:disabled {
  opacity: 0.38;
}

.wallpaper-scroll-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
}

.settings-scroll-shell {
  min-height: 0;
}

.wallpaper-scroll-controls {
  align-self: center;
  display: grid;
  gap: 8px;
  flex-shrink: 0;
}

.wallpaper-scroll-controls[hidden] {
  display: none !important;
}

.settings-panel {
  width: min(720px, calc(100vw - 120px));
  max-width: 100%;
  max-height: min(78vh, 760px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(10, 24, 38, 0.98), rgba(7, 18, 29, 0.98));
  border: 1px solid rgba(173, 225, 255, 0.12);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(16px);
}

.settings-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.settings-panel-copy {
  display: grid;
  gap: 8px;
}

.settings-panel-copy h2,
.settings-section h3 {
  margin-bottom: 0;
}

.settings-panel-copy p,
.settings-section-note {
  margin-bottom: 0;
  color: rgba(232, 247, 255, 0.76);
  line-height: 1.5;
}

.settings-kicker {
  margin: 0;
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.settings-panel-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-right: 4px;
}

.settings-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-subsection-heading {
  display: grid;
  gap: 4px;
}

.settings-subsection-heading h4,
.settings-subsection-heading p {
  margin: 0;
}

.settings-subsection-heading h4 {
  color: #f3fbff;
  font-size: 0.95rem;
  font-weight: 800;
}

.settings-subsection-heading p {
  color: rgba(232, 247, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.45;
}

.settings-toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(6, 18, 29, 0.56);
  border: 1px solid rgba(173, 225, 255, 0.1);
}

.settings-toggle-copy {
  display: grid;
  gap: 5px;
}

.settings-toggle-label {
  font-weight: 800;
  color: #f3fbff;
}

.settings-toggle-note {
  color: rgba(232, 247, 255, 0.7);
  font-size: 0.92rem;
  line-height: 1.45;
}

.settings-checkbox {
  width: 22px;
  height: 22px;
  accent-color: var(--brand-strong);
}

.toolbar-position-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.display-position-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.toolbar-position-option,
.display-position-option {
  display: grid;
  grid-template-columns: auto max-content;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(6, 18, 29, 0.56);
  border: 1px solid rgba(173, 225, 255, 0.1);
}

.toolbar-position-option .settings-checkbox,
.display-position-option .settings-checkbox {
  width: 18px;
  height: 18px;
}

.toolbar-position-option.is-selected,
.display-position-option.is-selected {
  border-color: rgba(125, 224, 248, 0.32);
  box-shadow: inset 0 0 0 1px rgba(125, 224, 248, 0.16);
}

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

.management-overlay-section {
  min-width: 0;
}

.management-overlay-section-wide {
  grid-column: 1 / -1;
}

.management-hub {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  grid-template-areas:
    "summary summary"
    "care log";
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  height: 100%;
}

.management-summary-panel {
  grid-area: summary;
  display: grid;
  align-content: start;
  --management-section-accent: rgba(125, 224, 248, 0.1);
}

.management-care-panel {
  grid-area: care;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  --management-section-accent: rgba(125, 224, 248, 0.08);
}

.management-history-panel,
.management-records-panel {
  grid-area: log;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
  --management-section-accent: rgba(255, 152, 113, 0.08);
}

.management-hub .settings-section {
  position: relative;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  padding: 12px 14px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(8, 20, 31, 0.82), rgba(5, 14, 22, 0.84));
  border: 1px solid rgba(173, 225, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.management-hub .settings-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--management-section-accent, rgba(125, 224, 248, 0.1)), transparent);
  opacity: 0.9;
}

.management-hub .compact-heading {
  display: grid;
  gap: 4px;
  margin-bottom: 0;
}

.management-hub .management-care-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.management-hub .compact-heading h3 {
  font-size: 1rem;
  line-height: 1.1;
  margin: 0;
}

.management-hub .settings-section-note {
  color: rgba(232, 247, 255, 0.74);
  font-size: 0.78rem;
  line-height: 1.35;
  max-width: 38ch;
}

.management-hub .small-button {
  padding: 7px 10px;
  font-size: 0.76rem;
}

.management-hub .small-button.icon-only {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 0.88rem;
}

.management-stat-card,
.management-care-item,
.management-status-pill,
.management-hero-layout {
  --management-tone-glow: rgba(125, 224, 248, 0.12);
  --management-tone-border: rgba(173, 225, 255, 0.16);
}

.management-tone-neutral {
  --management-tone-glow: rgba(173, 225, 255, 0.1);
  --management-tone-border: rgba(173, 225, 255, 0.18);
}

.management-tone-good {
  --management-tone-glow: rgba(146, 225, 196, 0.16);
  --management-tone-border: rgba(146, 225, 196, 0.28);
}

.management-tone-warn {
  --management-tone-glow: rgba(255, 217, 121, 0.16);
  --management-tone-border: rgba(255, 217, 121, 0.28);
}

.management-tone-danger {
  --management-tone-glow: rgba(255, 132, 152, 0.18);
  --management-tone-border: rgba(255, 132, 152, 0.3);
}

.management-hero-layout {
  display: grid;
  gap: 10px;
}

.management-hero-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.management-stat-label,
.management-hero-chip span,
.management-care-badge {
  color: rgba(190, 225, 236, 0.8);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.management-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--management-tone-border);
  background: rgba(255, 255, 255, 0.04);
  color: #f5fcff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.management-summary-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
}

.management-summary-head,
.management-summary-disclaimer {
  grid-column: 1 / -1;
}

.management-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.management-summary-nameplate {
  min-width: 0;
}

.management-summary-nameplate .tank-name-display,
.management-summary-nameplate .tank-name-editor {
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.management-summary-nameplate .tank-name-display strong {
  display: block;
  max-width: 100%;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.05;
}

.management-summary-nameplate .tank-name-editor {
  width: 100%;
}

.management-summary-nameplate .tank-name-input {
  width: min(320px, 100%);
  min-width: 0;
}

.management-summary-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.management-summary-chip,
.management-summary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 0;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(173, 225, 255, 0.1);
  color: #f3fbff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.management-summary-button {
  appearance: none;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.management-summary-button:hover,
.management-summary-button:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(173, 225, 255, 0.18);
  transform: translateY(-1px);
}

.management-summary-actions {
  margin-top: 0;
  justify-content: flex-end;
  align-items: center;
}

.management-summary-actions .small-button {
  min-height: 32px;
}

.management-summary-disclaimer {
  margin: 0;
  color: rgba(204, 227, 236, 0.8);
  max-width: 70ch;
  font-size: 0.71rem;
  line-height: 1.3;
  font-style: italic;
}

.management-care-body {
  display: grid;
  grid-template-rows: auto;
  gap: 10px;
  align-content: start;
  min-height: 0;
}

.management-snapshot-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
}

.management-snapshot-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.management-snapshot-label {
  color: rgba(190, 225, 236, 0.8);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.management-snapshot-value {
  color: var(--ink);
  line-height: 1.05;
  font-weight: 800;
  font-size: 1.18rem;
}

.management-snapshot-stat.management-tone-good .management-snapshot-value {
  color: #dffcf2;
}

.management-snapshot-stat.management-tone-warn .management-snapshot-value {
  color: #ffe7a4;
}

.management-snapshot-stat.management-tone-danger .management-snapshot-value {
  color: #ffc2cf;
}

.management-task-stack {
  display: grid;
  gap: 8px;
  align-content: start;
}

.management-task-heading {
  color: #f3fbff;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.15;
}

.management-task-list {
  display: grid;
  gap: 0;
}

.management-task-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(173, 225, 255, 0.08);
}

button.management-task-row {
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.management-task-row.is-actionable {
  padding-right: 8px;
  padding-left: 8px;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 140ms ease, transform 140ms ease;
}

.management-task-row.is-actionable:hover,
.management-task-row.is-actionable:focus-visible {
  background: rgba(125, 224, 248, 0.08);
  outline: 1px solid rgba(125, 224, 248, 0.18);
  transform: translateY(-1px);
}

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

.management-task-badge {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(190, 225, 236, 0.8);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.management-task-text {
  color: #f3fbff;
  font-size: 0.82rem;
  line-height: 1.2;
}

.management-task-value {
  color: #f3fbff;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.management-task-more {
  padding-top: 8px;
  color: rgba(232, 247, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 700;
}

.management-event-feed {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding-right: 6px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.management-event-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(173, 225, 255, 0.08);
}

.management-event-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.management-event-time-pill {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(173, 225, 255, 0.12);
  color: #c2e9f7;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.management-event-text {
  padding: 0;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.38;
}

.management-history-empty {
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 12px 0;
  background: none;
  border: 0;
}

.management-log-footer {
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(173, 225, 255, 0.1);
}

.management-log-footer [data-management-history-more] {
  margin-right: 0;
}

.management-record-button-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  align-content: start;
}

.management-record-button {
  appearance: none;
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 14px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(173, 225, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: #f3fbff;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.management-record-button:hover,
.management-record-button:focus-visible {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(173, 225, 255, 0.2);
  transform: translateY(-1px);
}

.management-record-button strong {
  font-size: 1rem;
  line-height: 1.1;
}

.management-record-button span {
  color: rgba(232, 247, 255, 0.72);
  font-size: 0.78rem;
  line-height: 1.32;
}

.management-browser {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.management-browser-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.management-browser-head h3 {
  margin: 0;
  line-height: 1.1;
}

.management-browser-back {
  margin-top: 0;
}

.management-browser-list {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: 0;
  overflow: auto;
  padding-right: 6px;
}

.management-browser-scroll-shell {
  min-height: 0;
}

.management-browser-scroll-shell .management-browser-list {
  height: 100%;
}

.management-browser-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(173, 225, 255, 0.08);
}

.management-browser-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.management-browser-thumb {
  width: 54px;
  height: 54px;
  object-fit: contain;
  padding: 7px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(173, 225, 255, 0.08);
}

.management-browser-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.management-browser-copy strong {
  color: #f3fbff;
  font-size: 0.94rem;
  line-height: 1.15;
}

.management-browser-copy span,
.management-browser-copy small {
  color: rgba(232, 247, 255, 0.72);
  line-height: 1.3;
}

.management-browser-copy span {
  font-size: 0.78rem;
}

.management-browser-copy small {
  font-size: 0.72rem;
}

.management-browser-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.management-browser-empty {
  gap: 12px;
  align-content: center;
}

.management-browser-empty-actions {
  margin-top: 0;
  justify-content: center;
}

.management-history-browser .management-browser-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.management-history-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(173, 225, 255, 0.08);
}

.management-history-filter {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.management-history-filter span {
  color: rgba(190, 225, 236, 0.8);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.management-history-filter select {
  min-width: 0;
  width: 100%;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(173, 225, 255, 0.14);
  background: rgba(5, 15, 24, 0.92);
  color: #f3fbff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0 8px;
}

.management-history-full-list {
  min-height: 0;
  overflow: auto;
}

.management-history-record .management-event-text {
  display: grid;
  gap: 3px;
}

.management-history-record .management-event-text strong {
  color: rgba(190, 225, 236, 0.86);
  font-size: 0.72rem;
  line-height: 1.1;
}

.management-history-record .management-event-text span {
  color: var(--ink);
}

.management-history-record .management-event-text small {
  color: rgba(232, 247, 255, 0.58);
  font-size: 0.68rem;
}

.management-milestone-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(173, 225, 255, 0.08);
}

.management-milestone-card:last-child {
  border-bottom: 0;
}

.management-milestone-icon {
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.22));
}

.management-milestone-card.is-locked .management-milestone-icon {
  opacity: 0.52;
  filter: grayscale(1) blur(1.2px) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
}

.management-milestone-card.is-complete .management-status-pill {
  border-color: rgba(118, 242, 167, 0.72);
  background: linear-gradient(180deg, #86f7b0, #42cf7a);
  color: #062d1a;
  box-shadow: 0 0 16px rgba(93, 235, 145, 0.24);
}

.management-milestone-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.management-milestone-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.management-milestone-topline strong {
  color: #f3fbff;
  font-size: 1rem;
  line-height: 1.15;
}

.management-milestone-requirement,
.management-milestone-detail-list,
.management-milestone-rewards {
  color: rgba(232, 247, 255, 0.74);
  font-size: 0.76rem;
  line-height: 1.35;
}

.management-milestone-detail-list,
.management-milestone-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.management-milestone-detail-list span,
.management-milestone-rewards span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(173, 225, 255, 0.08);
}

.management-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(173, 225, 255, 0.08);
}

.management-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f6cf5d, #ffea9a);
  box-shadow: 0 0 16px rgba(255, 214, 94, 0.34);
}

@media (max-width: 980px) {
  .utility-overlay[data-utility-mode="tank-management"] .store-panel {
    height: auto;
  }

  .utility-overlay[data-utility-mode="tank-management"] .store-panel-body {
    overflow: auto;
    padding-right: 4px;
  }

  .management-hub {
    grid-template-columns: 1fr;
    grid-template-areas:
      "summary"
      "care"
      "log";
    grid-template-rows: auto auto minmax(0, 1fr);
    height: auto;
  }

  .management-summary-strip {
    grid-template-columns: 1fr;
  }

  .management-summary-meta {
    flex-wrap: wrap;
  }

  .management-summary-actions {
    justify-content: flex-start;
  }

  .management-snapshot-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .management-event-feed {
    min-height: 300px;
    max-height: 300px;
  }

  .management-record-button-grid,
  .management-history-filters {
    grid-template-columns: 1fr;
  }

  .management-browser {
    height: auto;
  }

  .management-browser-list {
    min-height: 300px;
    max-height: 300px;
  }
}

@media (max-width: 560px) {
  .display-position-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .management-snapshot-stats {
    grid-template-columns: 1fr;
  }

  .management-task-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .management-task-value {
    grid-column: 2;
    justify-self: start;
    font-size: 0.74rem;
  }

  .management-log-footer .small-button,
  .management-summary-actions .small-button,
  .management-browser-actions .small-button {
    flex: 1 1 100%;
  }

  .management-browser-item {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .management-browser-thumb {
    width: 46px;
    height: 46px;
  }

  .management-milestone-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .management-milestone-icon {
    width: 54px;
    height: 54px;
  }
}

.local-background-panel .custom-gravel-layer-header {
  align-items: center;
}

.local-background-preview {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
}

.local-background-preview-empty {
  display: grid;
  place-items: center;
  color: rgba(232, 247, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 700;
}

.local-background-actions {
  justify-content: flex-start;
}

.bubbler-settings-panel {
  display: grid;
  gap: 14px;
}

.custom-decor-name-panel {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.utility-overlay[data-utility-mode="custom-decor-name"] .custom-decor-name-panel {
  height: 100%;
}

.decor-settings-panel {
  height: 100%;
}

.custom-decor-create-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(300px, 380px);
  gap: 16px;
  align-items: start;
  min-height: 0;
}

.utility-overlay[data-utility-mode="custom-decor-name"] .custom-decor-create-layout {
  height: 100%;
  align-items: stretch;
}

.decor-settings-layout {
  height: 100%;
  align-items: stretch;
}

.custom-decor-preview-column,
.custom-decor-controls-column {
  min-width: 0;
}

.utility-overlay[data-utility-mode="custom-decor-name"] .custom-decor-preview-column {
  display: grid;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.custom-decor-controls-column {
  display: grid;
  gap: 14px;
}

.utility-overlay[data-utility-mode="custom-decor-name"] .custom-decor-controls-column {
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 8px;
  overscroll-behavior: contain;
}

.decor-settings-layout .custom-decor-preview-column {
  min-height: 0;
}

.utility-overlay[data-utility-mode="custom-hide-create"] .custom-decor-preview-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.decor-settings-layout .custom-decor-controls-column {
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 8px;
  overscroll-behavior: contain;
}

.custom-decor-upload-preview {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 14px;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.custom-decor-upload-preview img {
  max-width: min(100%, 260px);
  max-height: 260px;
  object-fit: contain;
}

.custom-decor-name-row {
  display: grid;
  gap: 8px;
}

.custom-decor-name-row span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.custom-decor-name-input {
  width: 100%;
  border-radius: 8px;
}

.custom-decor-type-summary {
  color: rgba(232, 247, 255, 0.78);
  font-size: 0.86rem;
  font-weight: 700;
}

.custom-decor-size-window {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: rgba(6, 24, 34, 0.64);
}

.utility-overlay[data-utility-mode="custom-decor-name"] .custom-decor-size-window {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.decor-settings-layout .custom-decor-size-window {
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
}

.utility-overlay[data-utility-mode="custom-hide-create"] .custom-decor-size-window {
  min-height: 0;
}

.custom-decor-size-stage {
  display: grid;
  place-items: center;
  min-height: 260px;
  max-height: min(58vh, 560px);
  overflow: auto;
  border-radius: 8px;
  border: 1px solid rgba(188, 225, 246, 0.12);
  background:
    linear-gradient(180deg, rgba(57, 145, 180, 0.24), rgba(19, 72, 99, 0.18)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 20px);
}

.utility-overlay[data-utility-mode="custom-decor-name"] .custom-decor-size-stage {
  height: 100%;
  min-height: 0;
  max-height: none;
  scrollbar-gutter: stable both-edges;
}

.decor-settings-layout .custom-decor-size-stage {
  height: 100%;
  max-height: none;
  min-height: 0;
}

.utility-overlay[data-utility-mode="custom-hide-create"] .custom-decor-size-stage {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

.custom-decor-motion-preview {
  position: relative;
  display: block;
  max-width: none;
  overflow: visible;
  --custom-decor-motion-split: 55%;
}

.custom-decor-motion-canvas {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
}

.custom-decor-motion-source {
  display: none;
}

.custom-hide-overlay-preview {
  overflow: visible;
  position: relative;
}

.custom-hide-overlay-preview > .custom-hide-overlay-image {
  display: none;
}

.custom-hide-preview-hitbox {
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: visible;
}

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

.custom-hide-upload-tile {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 180px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(188, 225, 246, 0.18);
  background: rgba(6, 24, 34, 0.56);
  text-align: left;
}

.custom-hide-upload-tile:disabled {
  opacity: 0.6;
}

.custom-hide-upload-tile img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.custom-hide-upload-label {
  color: #f3fbff;
  font-size: 0.84rem;
  font-weight: 800;
}

.custom-hide-upload-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  border-radius: 6px;
  border: 1px dashed rgba(188, 225, 246, 0.22);
  color: rgba(232, 247, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}

.custom-hide-upload-note {
  margin-top: 0;
}

.custom-hide-overlay-image {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}

.custom-hide-overlay-bg {
  z-index: 1;
}

.custom-hide-overlay-front {
  z-index: 2;
}

.custom-decor-motion-split-line {
  position: absolute;
  left: -10px;
  right: -10px;
  height: 2px;
  border-radius: 2px;
  background: #ff3e52;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34), 0 0 12px rgba(255, 62, 82, 0.5);
  pointer-events: none;
  transform: translateY(-50%);
}

.decor-settings-float-point-line {
  position: absolute;
  z-index: 2;
  left: -10px;
  right: -10px;
  height: 3px;
  border-radius: 3px;
  background: #48e6ff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 14px rgba(72, 230, 255, 0.9);
  pointer-events: none;
  transform: translateY(-50%);
}

.decor-settings-float-point-help {
  display: block;
  color: var(--muted-text, #a8c2d5);
  font-size: 0.78rem;
  line-height: 1.25;
}

.cave-settings-marker {
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.cave-settings-entry-marker {
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(73, 215, 255, 0.18);
  border: 2px solid rgba(234, 252, 255, 0.92);
  color: #022331;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(12, 20, 28, 0.72), 0 0 14px rgba(73, 215, 255, 0.68);
}

.cave-settings-entry-marker.is-active {
  background: rgba(40, 191, 255, 0.28);
  color: #011b28;
  border-color: rgba(234, 252, 255, 0.98);
  box-shadow: 0 0 0 2px rgba(12, 20, 28, 0.8), 0 0 18px rgba(40, 191, 255, 0.82);
}

.cave-settings-entry-marker > span:first-child {
  border-radius: 50%;
  background: #49d7ff;
  padding: 4px;
  min-width: 16px;
}

.cave-entry-resize-handle {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 3px;
  background: #167fa0;
  cursor: nwse-resize;
  touch-action: none;
}

.cave-entrance-size-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
  padding: 5px 0;
}

.cave-entrance-size-category {
  color: #8fe1ff;
  font-size: 0.75rem;
}

.cave-settings-seat-marker {
  display: grid;
  place-items: center;
  padding: 0;
  background: #ef3348;
  border: 2px solid rgba(255, 232, 232, 0.92);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(12, 20, 28, 0.72), 0 0 14px rgba(239, 51, 72, 0.58);
}

.cave-settings-seat-marker.is-active {
  width: 20px;
  height: 20px;
  background: #ffd84a;
  color: #1b1c10;
  border-color: rgba(255, 255, 230, 0.98);
  box-shadow: 0 0 0 2px rgba(12, 20, 28, 0.8), 0 0 18px rgba(255, 216, 74, 0.76);
}

.cave-settings-controls,
.cave-entry-list,
.cave-seat-list {
  display: grid;
  gap: 12px;
}

.cave-seat-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(188, 225, 246, 0.12);
  background: rgba(9, 23, 34, 0.46);
}

.cave-seat-card.is-active {
  border-color: rgba(255, 216, 74, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 216, 74, 0.12);
}

.cave-entry-card.is-active {
  border-color: rgba(40, 191, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(40, 191, 255, 0.18), 0 0 18px rgba(40, 191, 255, 0.08);
}

.cave-seat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cave-seat-card-header strong {
  min-width: 52px;
  color: #ffd84a;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
}

.cave-seat-select-button {
  min-width: 82px;
}

.cave-seat-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 128px;
}

.cave-seat-facing-toggle {
  display: inline-flex;
  gap: 4px;
}

.cave-seat-facing-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(188, 225, 246, 0.18);
  border-radius: 6px;
  background: rgba(8, 21, 32, 0.76);
  color: rgba(232, 247, 255, 0.82);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.cave-seat-facing-button:hover,
.cave-seat-facing-button:focus-visible {
  border-color: rgba(73, 215, 255, 0.58);
  color: #e8f7ff;
}

.cave-seat-facing-button.is-selected {
  background: #28bfff;
  border-color: rgba(234, 252, 255, 0.92);
  color: #011b28;
  box-shadow: 0 0 12px rgba(40, 191, 255, 0.35);
}

.cave-coordinate-row {
  padding: 10px 12px;
}

.cave-entry-side-row {
  gap: 6px;
}

.custom-decor-split-control em {
  color: rgba(232, 247, 255, 0.7);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 980px) {
  .utility-overlay[data-utility-mode="custom-decor-name"] .utility-panel {
    width: min(100%, calc(100vw - 32px));
  }

  .custom-decor-create-layout {
    grid-template-columns: 1fr;
  }

  .custom-hide-upload-grid {
    grid-template-columns: 1fr;
  }

  .utility-overlay[data-utility-mode="custom-decor-name"] .utility-panel .utility-overlay-body,
  .utility-overlay[data-utility-mode="decor-settings"] .utility-panel .utility-overlay-body,
  .utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .utility-panel .utility-overlay-body,
  .utility-overlay[data-utility-mode="custom-hide-create"] .utility-panel .utility-overlay-body {
    overflow: auto;
  }

  .utility-overlay[data-utility-mode="custom-decor-name"] .custom-decor-controls-column,
  .decor-settings-layout .custom-decor-controls-column {
    overflow: visible;
    padding-right: 0;
  }

  .custom-decor-preview-column {
    order: -1;
  }

  .custom-decor-size-stage {
    max-height: min(44vh, 420px);
  }
}

.utility-overlay[data-utility-mode="custom-fish-create"] .utility-panel {
  width: min(75vw, calc(100vw - 48px));
  height: min(75dvh, calc(100dvh - 48px));
  max-height: min(75dvh, calc(100dvh - 48px));
}

.utility-overlay[data-utility-mode="custom-fish-create"] .utility-panel .utility-overlay-body {
  overflow: hidden;
  padding-right: 0;
  padding-bottom: 0;
}

.custom-fish-create-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: 14px;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.custom-fish-preview-column {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.custom-fish-settings-column {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding-right: 8px;
  overscroll-behavior: contain;
}

.custom-fish-size-window {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: rgba(6, 24, 34, 0.64);
}

.custom-fish-size-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid rgba(188, 225, 246, 0.12);
  scrollbar-gutter: stable both-edges;
  background:
    linear-gradient(180deg, rgba(57, 145, 180, 0.24), rgba(19, 72, 99, 0.18)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 20px);
}

.custom-fish-size-stage img {
  display: block;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.custom-fish-template-overlay {
  position: absolute;
  z-index: 2;
  width: min(78%, 620px);
  height: auto;
  opacity: 0.46;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 8px rgba(125, 224, 248, 0.2));
}

.custom-fish-upload-preview {
  position: relative;
  z-index: 3;
  transform-origin: 50% 50%;
}

.custom-fish-size-readout {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.custom-fish-size-readout strong {
  color: var(--ink);
  white-space: nowrap;
}

.custom-fish-size-control {
  margin: 0;
}

.custom-fish-flip-toggle {
  justify-self: stretch;
  min-height: 40px;
  padding: 10px 12px;
  font-size: 0.82rem;
}

.custom-fish-rotation-control {
  min-width: 0;
  margin: 0;
}

@media (max-width: 980px) {
  .utility-overlay[data-utility-mode="custom-fish-create"] .utility-panel {
    width: min(100%, calc(100vw - 32px));
    height: min(90dvh, calc(100dvh - 32px));
    max-height: min(90dvh, calc(100dvh - 32px));
  }

  .utility-overlay[data-utility-mode="custom-fish-create"] .utility-panel .utility-overlay-body {
    overflow: auto;
    padding-right: 4px;
    padding-bottom: 8px;
  }

  .custom-fish-create-panel {
    grid-template-columns: 1fr;
    height: auto;
  }

  .custom-fish-preview-column {
    min-height: min(44vh, 420px);
  }

  .custom-fish-size-window {
    min-height: min(44vh, 420px);
  }

  .custom-fish-settings-column {
    overflow: visible;
    padding-right: 0;
  }
}

.bubbler-control-row {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(188, 225, 246, 0.12);
  background: linear-gradient(180deg, rgba(17, 31, 45, 0.42), rgba(12, 22, 33, 0.4));
}

.bubbler-control-row span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.bubbler-control-row strong {
  color: var(--ink);
  white-space: nowrap;
}

.bubbler-control-row em {
  color: rgba(232, 247, 255, 0.7);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
}

.bubbler-control-row input[type="range"] {
  width: calc(100% - 16px);
  margin-inline: 8px;
  accent-color: var(--brand-strong);
}

.bubbler-toggle-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.bubbler-toggle-row > span {
  grid-column: 1 / -1;
}

.bubbler-toggle-row .cave-colorize-toggle span {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.bubbler-color-row {
  align-items: stretch;
}

.bubbler-light-color-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.bubbler-light-color-row > span,
.bubbler-light-color-row > .mini-note {
  grid-column: 1 / -1;
}

.bubbler-light-color-input {
  width: 54px;
  height: 34px;
  padding: 2px;
  border: 1px solid rgba(188, 225, 246, 0.24);
  border-radius: 8px;
  background: rgba(8, 18, 28, 0.82);
  cursor: pointer;
}


.bubbler-color-swatches {
  max-height: none;
  overflow: visible;
  padding: 2px;
}

.bubbler-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.bubbler-color-default-tile {
  width: auto;
  min-width: 72px;
  padding: 0 10px;
  color: rgba(232, 247, 255, 0.92);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.cave-color-controls {
  display: grid;
  gap: 12px;
}

.cave-color-layer-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(125, 224, 248, 0.14);
  background: rgba(255, 255, 255, 0.035);
}

.cave-color-layer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cave-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cave-colorize-toggle {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid rgba(125, 224, 248, 0.16);
  background: rgba(5, 17, 27, 0.46);
  color: rgba(232, 247, 255, 0.84);
  font-size: 0.76rem;
  font-weight: 900;
}

.cave-colorize-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand-strong);
}

.cave-colorize-toggle:has(input:checked) {
  border-color: rgba(125, 224, 248, 0.52);
  box-shadow: inset 0 0 0 1px rgba(125, 224, 248, 0.18);
}

.mini-card.is-selected,
.decor-selection-card {
  border-color: rgba(125, 224, 248, 0.34);
  box-shadow: inset 0 0 0 1px rgba(125, 224, 248, 0.16);
}

.shop-note-card {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.fish-card,
.mini-card,
.shop-card {
  display: grid;
  gap: 12px;
}

.fish-card {
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: start;
}

.shop-card {
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
}

.mini-card {
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: start;
}

.shop-card> :last-child {
  grid-column: 2;
  justify-self: start;
}

.mini-card>div {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.fish-thumb,
.shop-thumb,
.decor-thumb,
.background-thumb,
.scene-thumb {
  width: 100%;
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.22), transparent 44%),
    linear-gradient(180deg, rgba(158, 220, 255, 0.18), rgba(78, 126, 156, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.fish-thumb {
  width: 90px;
  height: 74px;
  object-fit: contain;
  padding: 8px;
}

.shop-thumb {
  width: 96px;
  height: 84px;
  object-fit: contain;
  padding: 8px;
}

.shop-card.is-locked {
  opacity: 0.92;
}

.shop-thumb.is-locked,
.shop-card.is-locked .shop-thumb {
  filter: grayscale(1) saturate(0.15) brightness(0.74);
  opacity: 0.58;
}

.inspector-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.inspector-line-chips {
  align-items: start;
}

.comfort-chip,
.comfort-chip-label {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
}

.comfort-chip-label {
  padding-inline: 0;
  color: rgba(196, 222, 234, 0.78);
}

.comfort-chip.is-good {
  color: #062414;
  background: #76ec9a;
}

.comfort-chip.is-bad {
  color: #351017;
  background: #ff8c99;
}

.comfort-chip.is-neutral {
  color: rgba(234, 248, 255, 0.94);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.shop-comfort-profile {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.shop-comfort-profile > div {
  display: grid;
  gap: 4px;
}

.shop-comfort-profile > div > span {
  color: rgba(196, 222, 234, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.daily-recap-list {
  display: grid;
  gap: 8px;
}
.daily-recap-narrative { margin: 0; padding: 10px 12px; border-left: 3px solid #73e3ff; border-radius: 6px; color: #eefcff; background: rgba(27, 111, 143, 0.18); line-height: 1.45; }

.daily-recap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.daily-recap-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.daily-recap-row strong {
  min-width: 34px;
  text-align: right;
}

.daily-recap-row.is-positive strong {
  color: #7cf0a2;
}

.daily-recap-row.is-negative strong {
  color: #ff9ca8;
}

.decor-thumb {
  width: 82px;
  height: 82px;
  object-fit: contain;
  padding: 6px;
}

.fish-meta,
.shop-meta {
  display: grid;
  gap: 4px;
}

.fish-card-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.shop-card-main {
  min-width: 0;
}

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 4px;
}

.shop-toolbar-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28rem;
}

.shop-toolbar-count {
  white-space: nowrap;
}

.shop-toolbar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

.shop-search-control,
.shop-sort-control,
.shop-water-filter-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 700;
}

.shop-search-input,
.shop-sort-select {
  min-width: 132px;
  padding: 8px 34px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--panel-line);
  background: rgba(8, 20, 32, 0.82);
  color: var(--ink);
  font: inherit;
}

.shop-search-input {
  min-width: min(280px, 48vw);
  padding-right: 12px;
}

.shop-water-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.shop-water-filter-toggle input {
  margin: 0;
}

.shop-water-requirement {
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(214, 148, 38, 0.75);
  border-radius: 6px;
  background: rgba(255, 194, 86, 0.12);
  color: #ffd58b;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.shop-theme-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 168, 92, 0.28);
  background: rgba(138, 64, 20, 0.18);
  color: #ffd6aa;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-stat-list {
  display: grid;
  gap: 6px;
}

.shop-stat-row {
  display: grid;
  grid-template-columns: minmax(118px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  color: var(--ink);
}

.shop-stat-label {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.shop-stat-value {
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fish-card-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.fish-card-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.fish-species {
  color: var(--muted);
  font-size: 0.98rem;
}

.fish-progression-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.2;
}

.fish-care-level-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(125, 224, 248, 0.24);
  background: rgba(125, 224, 248, 0.1);
  color: var(--ink);
  font-weight: 900;
  white-space: nowrap;
}

.fish-care-xp-label,
.fish-species-progress {
  white-space: nowrap;
}

.fish-care-xp-track {
  width: min(250px, 100%);
  height: 4px;
  overflow: hidden;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.fish-care-xp-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  color: rgba(125, 224, 248, 0.8);
}

.inspector-line-progression {
  align-items: start;
}

.fish-inspector-progression {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 5px;
}

.fish-inspector-progression-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.fish-inspector-progression-summary strong {
  color: var(--ink);
}

.fish-inspector-progression-summary span {
  color: var(--muted);
  font-size: .8rem;
}

.fish-inspector-xp-track {
  width: 100%;
  margin-top: 0;
}

.fish-status-line {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
}

.fish-trait-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fish-trait {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.2;
}

.fish-health-note {
  line-height: 1.45;
}

.fish-actions,
.mini-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fish-card-actions {
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: center;
  padding-top: 2px;
}

.fish-card-button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.stack-section {
  align-content: start;
}

.stack-section .card-stack {
  align-content: start;
}

.mini-card-actions {
  grid-column: 1 / -1;
  justify-self: stretch;
  align-self: start;
  align-items: center;
  justify-content: flex-end;
}

.size-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.size-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
}

.small-button.icon {
  min-width: 40px;
  padding: 10px 12px;
  line-height: 1;
}

.small-button.icon-only {
  min-width: 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
}

.price-tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 217, 121, 0.16);
  color: var(--gold);
  font-weight: 800;
}

.compact-heading {
  margin-bottom: 10px;
}

.compact-heading h3 {
  margin-bottom: 4px;
}

.compact-heading p {
  margin-bottom: 0;
  color: var(--muted);
}

.equipment-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.equipment-heading p {
  flex: 1 1 auto;
}

.equipment-panel {
  width: min(860px, calc(100vw - 120px));
}

.tank-management-card,
.tank-summary-grid {
  display: grid;
  gap: 0;
}

.tank-name-summary-row {
  align-items: flex-start;
}

.tank-name-display,
.tank-name-editor {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.tank-name-input {
  min-width: 184px;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-line-strong);
  background: rgba(255, 255, 255, 0.05);
}

.tank-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.shop-section {
  display: grid;
  gap: 14px;
}

.shop-section + .shop-section {
  margin-top: 24px;
}

.shop-section-heading {
  display: grid;
  gap: 4px;
}

.shop-section-heading h3 {
  margin-bottom: 0;
}

.shop-section-heading p {
  margin-bottom: 0;
  color: var(--muted);
}

.shop-section-cards {
  display: grid;
  gap: 14px;
}

.shop-card-actions {
  align-self: stretch;
  align-content: start;
}

.shop-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.info-card-credits {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.info-card-credits .small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.settings-credits-section {
  justify-items: start;
  gap: 10px;
}

.settings-credits-section .small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.credits-button {
  min-width: 118px;
}

.credits-card {
  align-items: stretch;
}

.credits-list {
  display: grid;
  gap: 14px;
}

.credits-row {
  display: grid;
  gap: 4px;
}

.credits-row strong {
  color: #f3fbff;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.credits-row span {
  color: rgba(232, 247, 255, 0.76);
  line-height: 1.45;
}

.legal-button {
  min-width: 118px;
}

#settingsOverlay .settings-other-actions .settings-button-glyph {
  display: grid;
  place-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1;
  color: #72ebff;
  text-shadow: 0 0 8px rgba(72, 218, 255, 0.42);
}

.utility-overlay[data-utility-mode="legal"] .utility-panel {
  width: min(980px, calc(100vw - 80px));
  height: min(86dvh, 790px);
  max-height: min(86dvh, 790px);
}

.utility-overlay[data-utility-mode="legal"] .utility-overlay-body {
  padding-right: 4px;
  padding-bottom: 4px;
}

.legal-overlay-shell {
  display: grid;
  gap: 14px;
  min-height: 100%;
}

.legal-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: min(520px, 52vw);
  padding: 5px;
  border: 1px solid rgba(112, 218, 248, 0.16);
  border-radius: 14px;
  background: rgba(5, 29, 44, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
}

.legal-tab-button {
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(226, 246, 255, 0.72);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.1;
}

.legal-tab-button:hover,
.legal-tab-button:focus-visible {
  color: #f1fcff;
  border-color: rgba(100, 220, 247, 0.28);
  background: rgba(48, 159, 197, 0.12);
}

.legal-tab-button.is-active {
  color: #062f48;
  border-color: rgba(143, 239, 255, 0.72);
  background: linear-gradient(180deg, #7beeff, #37cee9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 6px 18px rgba(37, 190, 220, 0.18);
}

.legal-tab-panel {
  min-height: 0;
}

.legal-document {
  display: grid;
  gap: 12px;
  color: rgba(232, 247, 255, 0.82);
}

.legal-document-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 2px;
}

.legal-document-heading > div {
  min-width: 0;
}

.legal-document-eyebrow {
  margin: 0 0 3px;
  color: rgba(151, 222, 247, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.legal-document h3 {
  margin: 0;
  color: #f5fcff;
  font-size: 1.34rem;
}

.legal-document-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(104, 213, 246, 0.22);
  border-radius: 999px;
  background: rgba(63, 174, 211, 0.1);
  color: rgba(194, 239, 255, 0.8);
  font-size: 0.7rem;
  font-weight: 900;
}

.legal-document section,
.legal-callout,
.legal-service-card {
  border: 1px solid rgba(115, 208, 238, 0.12);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(12, 50, 70, 0.62), rgba(7, 35, 51, 0.68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.legal-document section {
  display: grid;
  gap: 7px;
  padding: 12px 14px;
}

.legal-document h4 {
  margin: 0;
  color: #f3fbff;
  font-size: 0.88rem;
}

.legal-document p {
  margin: 0;
  color: rgba(226, 244, 252, 0.76);
  font-size: 0.82rem;
  line-height: 1.56;
}

.legal-document ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: rgba(226, 244, 252, 0.76);
  font-size: 0.82rem;
  line-height: 1.5;
}

.legal-document strong {
  color: rgba(245, 252, 255, 0.94);
}

.legal-lead {
  padding: 0 2px;
  color: rgba(217, 242, 251, 0.72) !important;
}

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

.legal-service-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 112px;
  padding: 12px 13px;
}

.legal-service-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.legal-service-card-heading strong {
  font-size: 0.86rem;
}

.legal-status-pill {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(99, 224, 247, 0.25);
  border-radius: 999px;
  background: rgba(55, 199, 228, 0.12);
  color: #88edff;
  font-size: 0.65rem;
  font-weight: 900;
  white-space: nowrap;
}

.legal-status-pill.is-local {
  border-color: rgba(143, 209, 255, 0.22);
  background: rgba(77, 143, 205, 0.12);
  color: #b7dcff;
}

.legal-status-pill.is-none {
  border-color: rgba(112, 229, 172, 0.22);
  background: rgba(58, 173, 115, 0.12);
  color: #a7f3ce;
}

.legal-status-pill.is-external {
  border-color: rgba(255, 207, 112, 0.22);
  background: rgba(188, 133, 49, 0.12);
  color: #f8d79c;
}

.legal-callout {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border-color: rgba(75, 219, 246, 0.22);
  background: linear-gradient(180deg, rgba(15, 72, 92, 0.6), rgba(8, 45, 61, 0.72));
}

.legal-callout > strong {
  font-size: 0.88rem;
}

@media (max-width: 760px) {
  .legal-tabs {
    width: min(430px, 62vw);
  }

  .legal-tab-button {
    padding-inline: 6px;
    font-size: 0.72rem;
  }

  .legal-service-grid {
    grid-template-columns: 1fr;
  }

  .legal-document-heading {
    align-items: flex-start;
  }
}

.donation-button {
  border-color: rgba(255, 199, 92, 0.82);
  background:
    linear-gradient(135deg, rgba(255, 165, 69, 0.98), rgba(214, 76, 42, 0.96));
  color: #fff6e8;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 224, 167, 0.16) inset;
}

.donation-button:hover,
.donation-button:focus-visible {
  background:
    linear-gradient(135deg, rgba(255, 178, 86, 1), rgba(229, 92, 52, 0.98));
  color: #fffaf2;
}

.buy-button,
.small-button,
.background-card button {
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-strong), var(--brand));
  color: #04131e;
  font-weight: 800;
}

.small-button.alt {
  background: linear-gradient(135deg, rgba(255, 217, 121, 0.25), rgba(255, 255, 255, 0.08));
  color: var(--ink);
}

.small-button.warn {
  background: linear-gradient(135deg, rgba(255, 132, 152, 0.26), rgba(255, 255, 255, 0.08));
  color: var(--ink);
}

.small-button.buy-another-button {
  background: linear-gradient(135deg, #7dff95, #3dcf68);
  color: #07210e;
  box-shadow: 0 0 0 4px rgba(94, 230, 128, 0.14);
}

.small-button.buy-another-button:hover,
.small-button.buy-another-button:focus-visible {
  background: linear-gradient(135deg, #94ffab, #49dc75);
}

.small-button.sell-fish-button {
  background: linear-gradient(135deg, #ff8a8a, #e23f4f);
  color: #2b0609;
  box-shadow: 0 0 0 4px rgba(226, 63, 79, 0.14);
}

.small-button.sell-fish-button:hover,
.small-button.sell-fish-button:focus-visible {
  background: linear-gradient(135deg, #ff9a9a, #ef5261);
}

.small-button.store-fish-button {
  background: linear-gradient(135deg, rgba(155, 220, 255, 0.96), rgba(75, 167, 255, 0.9));
  color: #041a2d;
  box-shadow: 0 0 0 4px rgba(75, 167, 255, 0.14);
}

.small-button.store-fish-button:hover,
.small-button.store-fish-button:focus-visible {
  background: linear-gradient(135deg, rgba(181, 232, 255, 0.98), rgba(96, 180, 255, 0.94));
}

.hearts {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
  gap: 4px;
  font-size: 1.35rem;
}

.heart {
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
}

.heart.full {
  color: var(--danger);
}

.heart.half {
  background: linear-gradient(90deg, var(--danger) 50%, rgba(255, 255, 255, 0.16) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.decor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.full-span {
  grid-column: 1 / -1;
}

.background-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

#filterAssetList,
#equipmentFilterList {
  grid-template-columns: repeat(auto-fill, minmax(170px, 170px));
  justify-content: start;
}

#filterAssetList .background-card,
#equipmentFilterList .background-card {
  align-content: start;
}

.background-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.background-card.is-selected {
  box-shadow: inset 0 0 0 2px rgba(125, 224, 248, 0.28);
}

.custom-gravel-status {
  grid-column: 1 / -1;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 217, 121, 0.1);
  border: 1px solid rgba(255, 217, 121, 0.16);
  color: #ffe8a6;
  font-size: 0.88rem;
  line-height: 1.35;
}

.custom-gravel-panel-shell {
  display: grid;
  gap: 14px;
}

.custom-gravel-toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.custom-gravel-toggle {
  min-width: 106px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  font-weight: 700;
}

.custom-gravel-toggle span {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.custom-gravel-toggle strong {
  font-size: 1rem;
}

.custom-gravel-toggle.is-active {
  background: linear-gradient(180deg, rgba(47, 128, 255, 0.28), rgba(24, 214, 255, 0.18));
  border-color: rgba(125, 224, 248, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(47, 128, 255, 0.12);
}

.custom-gravel-layer-list {
  display: grid;
  gap: 12px;
}

.custom-gravel-layer-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.custom-gravel-layer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.custom-gravel-layer-swatch {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.4), transparent 24%),
    linear-gradient(135deg, var(--swatch), color-mix(in srgb, var(--swatch) 72%, black 28%));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.custom-gravel-colorize-toggle {
  justify-self: start;
}

.custom-gravel-choice-summary {
  display: grid;
  gap: 6px;
}

.custom-gravel-choice-summary span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.custom-gravel-choice-summary strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.custom-gravel-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-choice-mode-row,
.color-choice-swatch-row {
  display: flex;
  flex: 0 0 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.color-choice-mode-row {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(188, 225, 246, 0.1);
}

.fish-inspector-color-swatches .color-choice-mode-row,
.fish-inspector-color-swatches .color-choice-swatch-row {
  gap: 6px;
}

.custom-gravel-color-swatch {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.46), transparent 22%),
    linear-gradient(135deg, var(--swatch), color-mix(in srgb, var(--swatch) 74%, black 26%));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.16);
}

.custom-gravel-color-swatch:hover,
.custom-gravel-color-swatch:focus-visible {
  transform: translateY(-1px);
}

.custom-gravel-color-swatch.is-selected {
  border-color: rgba(125, 224, 248, 0.62);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.3),
    0 0 0 2px rgba(125, 224, 248, 0.18),
    0 10px 20px rgba(0, 0, 0, 0.24);
}

.cave-color-rgb-tile {
  min-width: 54px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.42), transparent 24%),
    linear-gradient(90deg, #ff4d5d, #ffc84a, #4ee66b, #33d8ff, #8c6cff, #ff4dcb, #ff4d5d);
  background-size: 260% 100%;
  animation: cave-rgb-tile-shift 6s linear infinite;
  color: #ffffff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
}

@keyframes cave-rgb-tile-shift {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 260% 50%;
  }
}

.background-thumb {
  width: 100%;
  height: 92px;
  object-fit: cover;
  padding: 0;
}

.background-custom-preview,
.background-fill-preview {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.28), transparent 24%),
    var(--background-preview-fill, linear-gradient(180deg, #32b6e6, #0d84b4));
}

.background-underwater-preview {
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--underwater-surface-bloom-rgb, 120, 220, 255), 0.35), transparent 35%),
    radial-gradient(circle at 70% 80%, rgba(var(--underwater-shadow-bloom-rgb, 0, 80, 180), 0.45), transparent 45%),
    linear-gradient(180deg,
      var(--underwater-surface, #7fdcff) 0%,
      var(--underwater-mid, #1b8bd1) 38%,
      var(--underwater-deep, #064f8f) 70%,
      var(--underwater-abyss, #022a5c) 100%);
}

.background-underwater-preview::before,
.background-underwater-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.background-underwater-preview::before {
  inset: -18%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(var(--underwater-drift-a-rgb, 150, 230, 255), 0.25), transparent 35%),
    radial-gradient(ellipse at 80% 40%, rgba(var(--underwater-drift-b-rgb, 80, 190, 255), 0.2), transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(var(--underwater-drift-c-rgb, 0, 120, 220), 0.25), transparent 45%);
  filter: blur(14px);
  animation: loading-water-drift 20s ease-in-out infinite alternate;
}

.background-underwater-preview::after {
  background:
    linear-gradient(
      120deg,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.16) 0%,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.03) 18%,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.14) 32%,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.02) 48%,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.1) 65%,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.03) 100%
    ),
    repeating-linear-gradient(
      100deg,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.08) 0px,
      rgba(var(--underwater-highlight-rgb, 255, 255, 255), 0.08) 2px,
      transparent 3px,
      transparent 42px
    );
  background-size: 300% 300%, auto;
  opacity: 0.3;
  filter: blur(6px);
  transform: scale(1.18);
  animation:
    loading-water-light 28s ease-in-out infinite,
    loading-water-caustics 18s linear infinite;
}

.background-shop-thumb {
  width: 96px;
  height: 84px;
  object-fit: cover;
  padding: 0;
}

.background-color-panel-shell {
  display: grid;
  gap: 12px;
}

.background-solid-toggle-row {
  cursor: pointer;
}

.background-solid-toggle-controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.background-solid-toggle-preview {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(0, 0, 0, 0.16);
}

.background-mode-preview {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.background-color-preview-header {
  justify-content: flex-end;
}

.background-solid-color-card {
  gap: 16px;
}

.background-gradient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.background-gradient-color-group {
  display: grid;
  gap: 12px;
}

.gravel-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.gravel-slot {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  text-align: left;
}

.gravel-slot.is-active {
  border-color: rgba(125, 224, 248, 0.52);
  box-shadow:
    inset 0 0 0 1px rgba(125, 224, 248, 0.22),
    0 0 0 1px rgba(125, 224, 248, 0.12);
}

.gravel-slot-label {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gravel-slot-preview {
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.06)),
    linear-gradient(135deg, var(--swatch), color-mix(in srgb, var(--swatch) 70%, black 30%));
}

.gravel-slot-value {
  font-size: 0.88rem;
  font-weight: 800;
}

.gravel-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gravel-swatch {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background:
    radial-gradient(circle at 26% 24%, rgba(255, 255, 255, 0.38), transparent 26%),
    linear-gradient(135deg, var(--swatch), color-mix(in srgb, var(--swatch) 74%, black 26%));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.gravel-swatch.is-selected {
  border-color: rgba(125, 224, 248, 0.56);
  box-shadow:
    inset 0 0 0 2px rgba(125, 224, 248, 0.18),
    0 0 0 2px rgba(125, 224, 248, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.28);
}*/

.scene-thumb {
  width: 100%;
  height: 92px;
  object-fit: contain;
  padding: 8px;
}

#filterAssetList .scene-thumb,
#equipmentFilterList .scene-thumb {
  width: min(100%, 112px);
  height: 136px;
  justify-self: center;
  padding: 10px 8px;
}

.meal-track {
  display: grid;
  gap: 6px;
}

.meal-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}

.meal-line-label {
  font-weight: 700;
  color: var(--ink);
}

.meal-line-status {
  color: var(--ink);
  font-size: 1.05rem;
}

.toast {
  position: fixed;
  z-index: 80;
  left: 12px;
  top: 86px;
  bottom: auto;
  max-width: min(420px, calc(100vw - 24px));
  transform: translateY(12px);
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(6, 18, 29, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: white;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.is-error {
  background: #fff1f0;
  border-color: #d13212;
  color: #b12704;
  font-weight: 800;
}

.empty-state {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
}

@media (max-width: 1100px) {
  .tank-display {
    width: min(280px, 42vw);
    min-width: 270px;
  }

  .tank-sidebar {
    width: min(360px, 40vw);
  }

  .fish-inspector {
    width: min(320px, 34vw);
  }
}

@media (max-width: 860px) {
  .dock-button.edit-shortcut-control:not([hidden]) {
    display: grid;
  }

  .aquarium-card {
    width: var(--app-viewport-width);
    height: var(--app-viewport-height);
  }

  .tank-stage {
    border-radius: 0;
  }

  .tank-display {
    --display-edge-gap: 8px;
    width: min(260px, calc(100% - 16px));
    min-width: min(260px, calc(100% - 16px));
  }

  .edit-quick-ref {
    --edit-quick-ref-top: 90px;
    --edit-quick-ref-right: 14px;
    left: auto;
  }

  .edit-quick-ref-card {
    min-width: 0;
    max-width: min(280px, calc(100vw - 28px));
    gap: 6px;
    padding: 10px 12px;
    font-size: 0.86rem;
  }

  .edit-quick-ref-row {
    column-gap: 8px;
  }

  .edit-quick-ref-key {
    white-space: normal;
  }

  .summary-grid,
  .decor-grid,
  .meal-track,
  .inspector-stats {
    grid-template-columns: 1fr;
  }

  .tank-sidebar {
    top: 98px;
    left: 0;
    width: min(360px, calc(100% - 60px));
    bottom: 88px;
  }

  .tank-sidebar.is-collapsed {
    transform: translateX(calc(-100% - 8px));
  }

  .tank-overlay-hints {
    top: 86px;
    left: 8px;
    right: auto;
    bottom: auto;
    width: min(360px, calc(100% - 16px));
    max-width: min(360px, calc(100% - 16px));
    transform: none;
  }

  .tank-stage.has-edit-decor-tray .tank-overlay-hints {
    top: 86px;
  }

  .edit-decor-tray {
    left: 50%;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 48px);
    width: min(75vw, calc(100vw - 28px));
    transform: translateX(-50%);
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 7px;
    padding: 6px 8px;
  }

  :root[data-toolbar-position="bottom-center"] .edit-decor-tray {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 60px);
  }

  .edit-decor-tray-arrow {
    width: 32px;
    height: 62px;
    border-radius: 18px;
  }

  .edit-decor-tile {
    min-width: 62px;
    max-width: 62px;
    height: 62px;
  }

  .edit-decor-tile-surface {
    border-radius: 19px;
  }

  .edit-decor-tile-count {
    right: 8px;
    bottom: 6px;
    font-size: 0.78rem;
  }

  .edit-decor-tile::before {
    font-size: 0.74rem;
    padding: 5px 8px;
  }

  :root[data-toolbar-position="bottom-center"] .tank-bottom-dock {
    bottom: var(--toolbar-taskbar-clearance);
  }

  .fish-inspector {
    left: 14px;
    right: 14px;
    top: auto;
    bottom: 92px;
    width: auto;
  }

  .settings-panel {
    width: min(100%, calc(100vw - 24px));
    max-height: min(84vh, 760px);
    padding: 18px;
    gap: 14px;
  }

  .settings-panel-header,
  .settings-toggle-row {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .settings-panel-header {
    display: grid;
  }

  .settings-toggle-row {
    justify-items: start;
  }

  .utility-confirm-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .utility-confirm-actions .small-button {
    width: 100%;
  }

  .utility-overlay[data-utility-mode="save-export"] .utility-panel {
    width: min(980px, calc(100vw - 24px));
    height: min(90dvh, 780px);
    max-height: min(90dvh, 780px);
  }

  .save-export-panel {
    grid-template-rows: auto minmax(180px, 1fr);
  }

  .fish-card,
  .mini-card {
    grid-template-columns: 1fr;
  }

  .shop-toolbar,
  .equipment-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .shop-toolbar-controls {
    margin-left: 0;
    justify-content: stretch;
  }

  .shop-search-control,
  .shop-sort-control,
  .shop-water-filter-control {
    justify-content: space-between;
  }

  .shop-search-input,
  .shop-sort-select {
    min-width: 0;
    width: 100%;
  }

  .fish-thumb,
  .shop-thumb,
  .decor-thumb {
    width: 100%;
    height: auto;
    max-height: 110px;
  }
}

/* Davy Jones' Locker webpage inside the existing WebSurf browser shell. */
.tankazon-store.is-davy-jones-locker-open .tankazon-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.tankazon-store.is-davy-jones-locker-open .tankazon-header,
.tankazon-store.is-davy-jones-locker-open .tankazon-promo-strip,
.tankazon-store.is-davy-jones-locker-open .tankazon-account-page,
.tankazon-store.is-davy-jones-locker-open .tankazon-body,
.tankazon-store.is-davy-jones-locker-open .store-scroll-controls {
  display: none !important;
}

.davy-jones-locker-page {
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  color: #e7e7e7;
  background: #050505;
  font-family: "Courier New", ui-monospace, monospace;
}

.davy-jones-locker-page[hidden] { display: none !important; }

.davy-jones-locker-shell {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 30px 0 64px;
}

.davy-jones-locker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #242424;
}

.davy-jones-locker-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.davy-jones-locker-brand > img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  image-rendering: pixelated;
  flex: 0 0 auto;
}

.davy-jones-locker-kicker {
  display: block;
  margin-bottom: 5px;
  color: #737373;
  font-size: .64rem;
  letter-spacing: .2em;
}

.davy-jones-locker-header h1 {
  margin: 0;
  color: #f3f3f3;
  font: 600 clamp(1.25rem, 2vw, 1.8rem)/1.1 system-ui, sans-serif;
  letter-spacing: -.02em;
}

.davy-jones-locker-header code {
  color: #6d6d6d;
  font-size: .75rem;
}

.davy-jones-locker-inventory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding-top: 24px;
}

.davy-locker-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid #1d1d1d;
  background: #090909;
}

.davy-locker-photo {
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #181818;
  background: #030303;
}

.davy-locker-photo-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1024 / 965;
  background: url("../assets/web/davy/icons/thumbnail_bg.webp") center / contain no-repeat;
}

.davy-locker-photo-stage img {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 58%;
  height: 36%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

.davy-locker-photo-button {
  width: 100%;
  appearance: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.davy-locker-photo-button:hover,
.davy-locker-photo-button:focus-visible {
  border-color: #314b48;
  outline: none;
}

.davy-locker-name-button {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d2d2d2;
  font: 500 .82rem/1.2 "Courier New", ui-monospace, monospace;
  text-align: left;
  cursor: pointer;
}

.davy-locker-name-button:hover,
.davy-locker-name-button:focus-visible {
  color: #e6ffff;
  text-decoration: underline;
  outline: none;
}

.davy-locker-copy {
  display: grid;
  gap: 4px;
  padding: 10px 2px 7px;
}

.davy-locker-copy > span,
.davy-locker-copy > small {
  color: #5d5d5d;
  font-size: .61rem;
  letter-spacing: .1em;
}

.davy-locker-copy > strong {
  color: #d2d2d2;
  font-size: .82rem;
  font-weight: 500;
}

.davy-locker-variants {
  display: flex;
  gap: 6px;
  padding: 2px 0 10px;
  flex-wrap: wrap;
}

.davy-locker-variants button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 34px;
  padding: 2px;
  border: 1px solid #202020;
  background: #050505;
  cursor: pointer;
}

.davy-locker-variants button[aria-pressed="true"] {
  border-color: #6d8f8c;
  background: #0d1716;
}

.davy-locker-variants img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.davy-locker-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid #171717;
  color: #777;
  font-size: .7rem;
}

.davy-locker-card footer button {
  min-height: 28px;
  padding: 5px 12px;
  border: 1px solid #333;
  background: #0d0d0d;
  color: #bdbdbd;
  font: 700 .62rem/1 "Courier New", ui-monospace, monospace;
  letter-spacing: .08em;
  cursor: pointer;
}

.davy-locker-card footer button:hover,
.davy-locker-card footer button:focus-visible {
  border-color: #6d8f8c;
  color: #e6ffff;
}

.davy-locker-card footer button:disabled { opacity: .45; cursor: wait; }
.davy-locker-empty { padding: 30px 0; color: #555; font-size: .7rem; letter-spacing: .12em; }

.davy-locker-item-page {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  padding-bottom: 36px;
}

.davy-locker-back {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #777;
  font: 700 .65rem/1 "Courier New", ui-monospace, monospace;
  letter-spacing: .08em;
  cursor: pointer;
}

.davy-locker-back:hover,
.davy-locker-back:focus-visible { color: #d8ffff; outline: none; }

.davy-locker-item-layout {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  gap: 34px;
  align-items: start;
}

.davy-locker-item-visual {
  min-width: 0;
}

.davy-locker-photo-stage.is-item-page {
  width: 100%;
  max-width: 460px;
  margin: 0 auto 14px;
}

.davy-locker-photo-stage.is-item-page img {
  width: 56%;
  height: 35%;
}

.davy-locker-item-copy {
  min-width: 0;
  color: #a9a9a9;
}

.davy-locker-record-label {
  display: block;
  margin-bottom: 8px;
  color: #5d5d5d;
  font-size: .62rem;
  letter-spacing: .16em;
}

.davy-locker-item-copy h2 {
  margin: 0 0 18px;
  color: #f2f2f2;
  font: 500 clamp(1.2rem, 2.2vw, 1.7rem)/1.2 "Courier New", ui-monospace, monospace;
}

.davy-locker-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 22px;
  border-top: 1px solid #1f1f1f;
  border-left: 1px solid #1f1f1f;
}

.davy-locker-record-grid > div {
  padding: 9px 10px;
  border-right: 1px solid #1f1f1f;
  border-bottom: 1px solid #1f1f1f;
}

.davy-locker-record-grid dt {
  margin: 0 0 3px;
  color: #555;
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.davy-locker-record-grid dd {
  margin: 0;
  color: #a8a8a8;
  font-size: .67rem;
}

.davy-locker-record-section {
  padding: 16px 0;
  border-top: 1px solid #1c1c1c;
}

.davy-locker-record-section h3 {
  margin: 0 0 8px;
  color: #777;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.davy-locker-record-section p {
  margin: 0;
  color: #b9b9b9;
  font-size: .76rem;
  line-height: 1.65;
}

.davy-locker-record-section ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.davy-locker-record-section li {
  color: #909090;
  font-size: .7rem;
}

.davy-locker-record-section li::before {
  content: "> ";
  color: #557b77;
}

.davy-locker-item-purchase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid #2a2a2a;
  color: #9a9a9a;
  font-size: .76rem;
}

.davy-locker-item-purchase button {
  min-height: 32px;
  padding: 7px 16px;
  border: 1px solid #3a3a3a;
  background: #0d0d0d;
  color: #c8c8c8;
  font: 700 .64rem/1 "Courier New", ui-monospace, monospace;
  letter-spacing: .08em;
  cursor: pointer;
}

.davy-locker-item-purchase button:hover,
.davy-locker-item-purchase button:focus-visible {
  border-color: #6d8f8c;
  color: #e6ffff;
  outline: none;
}

@media (max-width: 760px) {
  .davy-jones-locker-shell { width: min(100% - 28px, 1120px); padding-top: 20px; }
  .davy-jones-locker-header { align-items: flex-start; flex-direction: column; gap: 9px; }
  .davy-jones-locker-brand > img { width: 50px; height: 50px; }
  .davy-jones-locker-inventory { grid-template-columns: 1fr; gap: 14px; padding-top: 18px; }
  .davy-locker-photo { min-height: 180px; }
  .davy-locker-photo-stage { width: 100%;
  max-width: 100%; }
  .davy-locker-item-layout { grid-template-columns: 1fr; gap: 20px; }
  .davy-locker-photo-stage.is-item-page { width: 100%;
  max-width: 340px; }
  .davy-locker-record-grid,
  .davy-locker-record-section ul { grid-template-columns: 1fr; }
}

/* Rare Davy mutation listing inside BubbleBodega. The referenced background is intentionally external to this build until thumbnail_bg.png is added. */
.tankazon-store .shop-card.is-davy-mutation::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8px;
  left: 8px;
  width: calc(100% - 16px);
  height: 200px;
  border-radius: 5px;
  background: #060606 url("../assets/web/davy/icons/thumbnail_bg.webp") center / cover no-repeat;
  pointer-events: none;
}
.tankazon-store .shop-card.is-davy-mutation > * { position: relative; z-index: 1; }
.tankazon-store .shop-card.is-davy-mutation .shop-thumb { background: transparent !important; }
.tankazon-store .shop-card.is-davy-mutation > img.shop-thumb,
.tankazon-store .shop-card.is-davy-mutation > .shop-thumb {
  object-fit: contain !important;
  transform: translateY(-12px) scale(0.55);
  transform-origin: center center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.tankazon-item-image.is-davy-mutation-preview { position: relative; isolation: isolate; overflow: hidden; background: #060606 !important; }
.tankazon-item-image.is-davy-mutation-preview::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #060606 url("../assets/web/davy/icons/thumbnail_bg.webp") center / contain no-repeat;
  pointer-events: none;
}
.tankazon-item-image.is-davy-mutation-preview .tankazon-item-art {
  position: relative;
  z-index: 1;
  width: 68%;
  height: 44%;
  max-height: 180px;
  transform: translateY(-24px);
  background: transparent !important;
}
@media (max-width: 720px) {
  .tankazon-store .shop-card.is-davy-mutation::before { height: 112px; }
}

/* Proteus Biodyne seller webpage, presented inside the BubbleBodega overlay. */
.tankazon-store.proteus-biodyne-open .tankazon-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.tankazon-store.proteus-biodyne-open .tankazon-header,
.tankazon-store.proteus-biodyne-open .tankazon-promo-strip,
.tankazon-store.proteus-biodyne-open .tankazon-account-page,
.tankazon-store.proteus-biodyne-open .tankazon-body,
.tankazon-store.proteus-biodyne-open .store-scroll-controls {
  display: none !important;
}

.proteus-biodyne-page {
  --proteus-ink: #24485f;
  --proteus-muted: #5e7889;
  --proteus-rule: #d8e2e8;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #f8fbfc;
  color: var(--proteus-ink);
  font-family: Georgia, "Times New Roman", serif;
  grid-row: 2;
}

.proteus-biodyne-page[hidden] { display: none !important; }

.proteus-biodyne-header {
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(620px, 2fr);
  align-items: center;
  gap: 18px;
  min-height: 82px;
  padding: 10px 18px 10px 24px;
  border-bottom: 1px solid var(--proteus-rule);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 3px 18px rgba(28, 65, 88, .07);
}

.proteus-biodyne-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--proteus-ink);
  text-align: left;
  cursor: pointer;
}

.proteus-biodyne-brand-icon { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; }
.proteus-biodyne-brand-title { width: min(178px, 14vw); height: 46px; object-fit: contain; object-position: left center; }

.proteus-biodyne-nav {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(12px, 2vw, 30px);
  height: 100%;
}

.proteus-biodyne-nav button {
  display: grid;
  place-items: center;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #34566b;
  font-family: system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.proteus-biodyne-nav button:hover,
.proteus-biodyne-nav button:focus-visible,
.proteus-biodyne-nav button.is-active { border-bottom-color: #335d76; color: #17384e; }

.proteus-biodyne-scroll {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scroll-behavior: auto;
}
.proteus-tab-panel[hidden] { display: none !important; }

.proteus-biodyne-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(330px, .9fr) minmax(0, 1.45fr) 220px;
  min-height: clamp(335px, 47vh, 470px);
  overflow: hidden;
  background: #a8c8d9 url("../assets/web/proteus/PB_Banner.webp") center / cover no-repeat;
}
.proteus-biodyne-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(248, 252, 253, .97) 0%, rgba(244, 250, 252, .88) 27%, rgba(231, 243, 248, .18) 55%, rgba(18, 56, 80, .18) 100%);
}

.proteus-biodyne-hero-copy {
  grid-column: 1;
  align-self: center;
  padding: 32px 18px 30px 48px;
}
.proteus-biodyne-hero-copy > p:first-child {
  margin: 0 0 22px;
  font-family: system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .32em;
  line-height: 1.65;
  text-transform: uppercase;
}
.proteus-biodyne-hero-copy h1 {
  display: block;
  width: min(390px, 100%);
  margin: 0;
}
.proteus-biodyne-hero-copy h1:focus { outline: none; }
.proteus-biodyne-hero-copy h1 img { display: block; width: 100%; height: auto; }
.proteus-biodyne-intro { max-width: 390px; margin: 24px 0 20px; color: #526f82; font-family: system-ui, sans-serif; font-size: .95rem; line-height: 1.5; }
.proteus-biodyne-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-width: 170px;
  padding: 10px 16px;
  border: 1px solid #68889a;
  background: transparent;
  color: #294c63;
  font-family: system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .2em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.proteus-biodyne-cta:hover,
.proteus-biodyne-cta:focus-visible { background: rgba(255,255,255,.55); }

.proteus-biodyne-hero-side {
  grid-column: 3;
  display: grid;
  align-content: space-between;
  justify-items: end;
  padding: 45px 34px 42px 0;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: .7rem;
  letter-spacing: .38em;
  line-height: 2;
  text-align: right;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 28, 50, .38);
}
.proteus-biodyne-hero-side i { width: 1px; height: 46px; margin-right: 7px; background: rgba(255,255,255,.72); }

.proteus-biodyne-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(285px, 1fr);
  min-height: 330px;
  background: #fff;
}
.proteus-biodyne-programs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px; gap: 16px; }
.proteus-program-card { min-width: 0; padding: 0 16px 18px; border: 1px solid var(--proteus-rule); background: #fff; }
.proteus-program-image {
  display: grid;
  place-items: center;
  height: 125px;
  margin: 0 -16px 13px;
  overflow: hidden;
  background: #183d56;
}
.proteus-program-image img { width: 100%; height: 100%; object-fit: cover; }
.proteus-program-card > span { font-family: system-ui, sans-serif; font-size: .67rem; font-weight: 750; letter-spacing: .26em; }
.proteus-program-card h2 { margin: 8px 0 13px; padding-bottom: 13px; border-bottom: 1px solid var(--proteus-rule); font-size: .9rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.proteus-program-card p { min-height: 68px; margin: 0; color: var(--proteus-muted); font-size: .88rem; line-height: 1.48; }
.proteus-program-card > button { display: inline-block; margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--proteus-ink); font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.proteus-program-card > button:hover,
.proteus-program-card > button:focus-visible { text-decoration: underline; }

.proteus-specimen-card { padding: 20px; border-left: 1px solid var(--proteus-rule); background: #f8fafb; }
.proteus-specimen-card > header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-family: system-ui, sans-serif; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }
.proteus-specimen-card > header span { color: var(--proteus-muted); font-size: .58rem; }
.proteus-specimen-record { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(118px, 1fr); border: 1px solid var(--proteus-rule); background: #fff; }
.proteus-specimen-image { display: grid; place-items: center; min-height: 156px; overflow: hidden; background: #16364d; }
.proteus-specimen-image img { width: 100%; height: 100%; min-height: 156px; object-fit: cover; }
.proteus-specimen-record > div:last-child { padding: 12px; min-width: 0; }
.proteus-specimen-record h2 { margin: 0; font-size: .88rem; letter-spacing: .2em; }
.proteus-specimen-record em { color: var(--proteus-muted); font-size: .76rem; }
.proteus-specimen-record dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 3px 8px; margin: 11px 0; font-family: system-ui, sans-serif; font-size: .67rem; }
.proteus-specimen-record dt { color: #385a70; }
.proteus-specimen-record dd { margin: 0; color: var(--proteus-muted); overflow-wrap: anywhere; }
.proteus-dossier-link { display: block; padding-top: 8px; border-top: 1px solid var(--proteus-rule); font-family: system-ui, sans-serif; font-size: .6rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.proteus-specimen-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.proteus-specimen-index figure { min-width: 0; margin: 0; border: 1px solid var(--proteus-rule); background: #fff; }
.proteus-specimen-index img { display: block; width: 100%; aspect-ratio: 1024 / 965; object-fit: cover; }
.proteus-specimen-index figcaption { overflow: hidden; padding: 4px 2px; color: #426177; font-family: system-ui, sans-serif; font-size: .52rem; font-weight: 750; letter-spacing: .04em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.proteus-specimen-card blockquote { margin: 18px 0 8px; color: #6b8291; font-size: 1.1rem; font-style: italic; line-height: 1.25; }
.proteus-specimen-card > p { margin: 0; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; }

.proteus-subpage {
  min-height: 100%;
  padding: clamp(28px, 4vw, 58px);
  background:
    linear-gradient(135deg, rgba(218, 235, 242, .45), transparent 38%),
    #f8fbfc;
  color: var(--proteus-ink);
}
.proteus-page-lead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(210px, .65fr); column-gap: clamp(28px, 6vw, 86px); align-items: end; max-width: 1120px; margin: 0 auto 34px; padding-bottom: 30px; border-bottom: 1px solid var(--proteus-rule); }
.proteus-page-lead > p:first-child { grid-column: 1 / -1; margin: 0 0 18px; font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 750; letter-spacing: .23em; text-transform: uppercase; }
.proteus-page-lead h2 { grid-column: 1; margin: 0; color: #1f455d; font-size: clamp(2rem, 4vw, 4rem); font-weight: 400; line-height: 1.02; }
.proteus-page-lead h2:focus { outline: none; }
.proteus-page-lead > p:not(:first-child) { grid-column: 1; max-width: 720px; margin: 20px 0 0; color: var(--proteus-muted); font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1.65; }
.proteus-page-lead > div { grid-column: 2; grid-row: 2 / span 2; display: grid; align-content: end; gap: 7px; padding-left: 24px; border-left: 1px solid var(--proteus-rule); }
.proteus-page-lead > div strong { font-size: clamp(2.4rem, 5vw, 4.8rem); font-weight: 400; line-height: 1; }
.proteus-page-lead > div span { color: var(--proteus-muted); font-family: system-ui, sans-serif; font-size: .78rem; line-height: 1.4; }
.proteus-page-lead blockquote { grid-column: 2; grid-row: 2 / span 2; margin: 0; padding-left: 24px; border-left: 1px solid var(--proteus-rule); color: #526f82; font-size: 1.35rem; font-style: italic; line-height: 1.45; }
.proteus-page-lead-compact { display: block; }
.proteus-page-lead-compact > p:first-child { margin-bottom: 18px; }
.proteus-page-lead-compact h2 { max-width: 850px; }
.proteus-page-lead-compact > p:not(:first-child) { margin-top: 18px; }
.proteus-research-feature { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px; max-width: 1120px; margin: 0 auto 28px; padding: 24px 26px; border: 1px solid #8eafc0; background: linear-gradient(105deg, #e4f0f4, rgba(255,255,255,.86)); }
.proteus-research-feature-index { display: grid; align-content: center; gap: 18px; padding-right: 20px; border-right: 1px solid #b8ced8; }
.proteus-research-feature-index span { color: var(--proteus-ink); font-family: Georgia, serif; font-size: 3.8rem; line-height: .9; }
.proteus-research-feature-index strong, .proteus-research-feature > div:last-child > p:first-child { color: #527797; font-family: system-ui, sans-serif; font-size: .66rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.proteus-research-feature > div:last-child > p { margin: 0 0 10px; color: #38586c; font-size: .98rem; line-height: 1.6; }
.proteus-research-feature h3 { margin: 0 0 10px; color: var(--proteus-ink); font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 500; }
.proteus-research-feature small { display: block; margin-top: 12px; color: var(--proteus-muted); font-family: system-ui, sans-serif; font-size: .78rem; line-height: 1.45; }

.proteus-mission-page .proteus-page-lead h2 { max-width: 850px; font-size: clamp(2rem, 3.5vw, 3.6rem); }
.proteus-manifesto { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: clamp(28px, 6vw, 76px); max-width: 1120px; margin: 0 auto 34px; }
.proteus-manifesto > article { columns: 2 260px; column-gap: 34px; color: #38586c; font-size: 1.02rem; line-height: 1.75; }
.proteus-manifesto > article p { margin: 0 0 18px; }
.proteus-manifesto > aside { align-self: start; padding: 24px; border: 1px solid var(--proteus-rule); background: #e9f2f5; }
.proteus-manifesto > aside span { font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.proteus-manifesto > aside strong { display: block; margin: 22px 0 12px; font-size: 1.45rem; font-weight: 400; line-height: 1.2; }
.proteus-manifesto > aside p { margin: 0; color: var(--proteus-muted); font-family: system-ui, sans-serif; font-size: .88rem; line-height: 1.55; }
.proteus-mission-pillars { margin-bottom: 46px; }
.proteus-mission-detail { display: grid; grid-template-columns: minmax(220px, .68fr) minmax(0, 1.32fr); gap: clamp(28px, 6vw, 76px); max-width: 1120px; margin: 0 auto; padding: 38px 0; border-top: 1px solid var(--proteus-rule); }
.proteus-mission-detail-heading > p { margin: 0 0 14px; color: var(--proteus-muted); font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.proteus-mission-detail-heading h3 { margin: 0; color: var(--proteus-ink); font-size: clamp(1.55rem, 2.3vw, 2.35rem); font-weight: 400; line-height: 1.1; }
.proteus-mission-detail-copy { color: #38586c; font-size: 1rem; line-height: 1.72; }
.proteus-mission-detail-copy p { margin: 0 0 16px; }
.proteus-mission-detail-copy strong { display: block; margin-top: 26px; color: var(--proteus-ink); font-family: system-ui, sans-serif; font-size: .76rem; letter-spacing: .17em; text-transform: uppercase; }
.proteus-scaling-doctrine { background: linear-gradient(90deg, transparent, rgba(221, 235, 240, .55)); }
.proteus-mission-coda { max-width: 1120px; margin: 12px auto 0; padding: clamp(28px, 4vw, 48px); border: 1px solid #35566c; background: #163a50; color: #f4f8f9; font-size: clamp(1.6rem, 3vw, 2.8rem); font-style: italic; line-height: 1.2; }
.proteus-mission-coda span { display: block; margin-bottom: 22px; color: #b8ced9; font-family: system-ui, sans-serif; font-size: .67rem; font-style: normal; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.proteus-recovery-program { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 30px; max-width: 1120px; margin: 0 auto 30px; padding: 24px 26px; border: 1px solid #9bb7c5; background: #e8f2f5; }
.proteus-recovery-program-label { display: grid; align-content: space-between; gap: 18px; padding-right: 22px; border-right: 1px solid #b8ced8; }
.proteus-recovery-program-label span, .proteus-recovery-program > div:last-child > p:first-child { color: #527797; font-family: system-ui, sans-serif; font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.proteus-recovery-program-label strong { color: #1f455d; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 400; line-height: 1.1; }
.proteus-recovery-program > div:last-child > p { margin: 0 0 10px; color: #38586c; font-size: .95rem; line-height: 1.6; }
.proteus-recovery-program h3 { margin: 0 0 10px; color: var(--proteus-ink); font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 500; }
.proteus-recovery-program small { display: block; margin-top: 12px; color: var(--proteus-muted); font-family: system-ui, sans-serif; font-size: .76rem; line-height: 1.48; }

/* Founder-led Proteus company profile. */
.proteus-founder-page {
  padding-top: clamp(22px, 3.2vw, 46px);
  background:
    linear-gradient(135deg, rgba(218, 235, 242, .62), transparent 36%),
    linear-gradient(315deg, rgba(226, 238, 242, .42), transparent 30%),
    #f8fbfc;
}
.proteus-founder-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr);
  max-width: 1120px;
  margin: 0 auto clamp(50px, 7vw, 88px);
  border: 1px solid var(--proteus-rule);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 20px 55px rgba(31, 69, 93, .09);
}
.proteus-founder-hero-copy { align-self: center; padding: clamp(30px, 5vw, 64px); }
.proteus-founder-hero-copy > p:first-child,
.proteus-founder-story-copy > p:first-child,
.proteus-origin > header > p:first-child,
.proteus-founder-philosophy > div:first-child > p:first-child {
  margin: 0 0 20px;
  color: #527797;
  font-family: system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.proteus-founder-hero h2 {
  margin: 0;
  color: #173c54;
  font-size: clamp(2.2rem, 4.4vw, 4.55rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: .98;
}
.proteus-founder-hero h2:focus { outline: none; }
.proteus-founder-hero blockquote {
  margin: 30px 0 20px;
  padding: 16px 0 16px 22px;
  border-left: 2px solid #7fa6ba;
  color: #315870;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-style: italic;
  line-height: 1.35;
}
.proteus-founder-hero blockquote + p { margin: 0; color: #526f82; font-size: .98rem; line-height: 1.72; }
.proteus-founder-credentials { display: grid; gap: 0; margin: 30px 0 0; border-top: 1px solid var(--proteus-rule); font-family: system-ui, sans-serif; }
.proteus-founder-credentials > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--proteus-rule); }
.proteus-founder-credentials dt { color: #6d8594; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.proteus-founder-credentials dd { margin: 0; color: #294c63; font-size: .75rem; font-weight: 650; }
.proteus-founder-portrait { position: relative; min-height: 580px; margin: -1px -1px -1px 0; overflow: hidden; background: #0b2940; }
.proteus-founder-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(4, 24, 39, .9)); pointer-events: none; }
.proteus-founder-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.proteus-founder-portrait figcaption { position: absolute; z-index: 1; right: 28px; bottom: 26px; left: 28px; display: grid; gap: 5px; color: #fff; }
.proteus-founder-portrait figcaption strong { font-size: 1.28rem; font-weight: 400; }
.proteus-founder-portrait figcaption span { color: #c4d7e1; font-family: system-ui, sans-serif; font-size: .64rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }

.proteus-founder-story {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  align-items: center;
  gap: clamp(34px, 6vw, 82px);
  max-width: 1120px;
  margin: 0 auto clamp(58px, 8vw, 96px);
}
.proteus-founder-story-copy h3,
.proteus-origin h3,
.proteus-founder-philosophy h3 { margin: 0 0 24px; color: #1f455d; font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 400; line-height: 1.08; }
.proteus-founder-story-copy > p:not(:first-child),
.proteus-origin > header > p:last-child,
.proteus-founder-philosophy > div:first-child > p:last-child { margin: 0 0 18px; color: #486779; font-size: 1rem; line-height: 1.76; }
.proteus-founder-story-copy aside { margin-top: 28px; padding: 20px 22px; border: 1px solid #a8c0cc; background: #e9f2f5; }
.proteus-founder-story-copy aside span { color: #527797; font-family: system-ui, sans-serif; font-size: .61rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.proteus-founder-story-copy aside p { margin: 12px 0 0; color: #294f66; font-size: 1.12rem; font-style: italic; line-height: 1.45; }
.proteus-founder-lab-photo { margin: 0; }
.proteus-founder-lab-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; border: 1px solid #c3d2da; object-fit: cover; filter: saturate(.85) contrast(1.03); }
.proteus-founder-lab-photo figcaption { margin-top: 10px; color: #718795; font-family: system-ui, sans-serif; font-size: .66rem; line-height: 1.5; }

.proteus-origin { max-width: 1120px; margin: 0 auto clamp(60px, 8vw, 100px); padding-top: 42px; border-top: 1px solid var(--proteus-rule); }
.proteus-origin > header { display: grid; grid-template-columns: minmax(0, .8fr) minmax(300px, 1.2fr); column-gap: clamp(32px, 7vw, 90px); align-items: start; margin-bottom: 34px; }
.proteus-origin > header > p:first-child { grid-column: 1 / -1; }
.proteus-origin > header h3 { grid-column: 1; margin-bottom: 0; }
.proteus-origin > header > p:last-child { grid-column: 2; margin-top: 2px; }
.proteus-origin-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid #8faab8; list-style: none; }
.proteus-origin-timeline li { position: relative; display: grid; align-content: start; padding: 30px 22px 26px 0; }
.proteus-origin-timeline li:not(:last-child) { margin-right: 22px; border-right: 1px solid var(--proteus-rule); }
.proteus-origin-timeline li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #315d75; box-shadow: 0 0 0 5px #e4eff3; }
.proteus-origin-timeline li > span { color: #9ab0bc; font-size: 2.6rem; line-height: 1; }
.proteus-origin-timeline small { display: block; margin: 17px 0 8px; color: #527797; font-family: system-ui, sans-serif; font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.proteus-origin-timeline h4 { margin: 0 0 10px; color: #294c63; font-size: 1.04rem; font-weight: 600; line-height: 1.28; }
.proteus-origin-timeline p { margin: 0; color: #637d8d; font-family: system-ui, sans-serif; font-size: .78rem; line-height: 1.56; }

.proteus-founder-philosophy { display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr); gap: clamp(34px, 7vw, 88px); max-width: 1120px; margin: 0 auto 42px; padding: clamp(30px, 5vw, 58px); background: #173c54; color: #eef6f8; }
.proteus-founder-philosophy h3 { color: #fff; }
.proteus-founder-philosophy > div:first-child > p:first-child { color: #b8d1dc; }
.proteus-founder-philosophy > div:first-child > p:last-child { color: #c3d5dd; }
.proteus-founder-principles { display: grid; align-content: center; }
.proteus-founder-principles article { display: grid; grid-template-columns: 42px 150px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(213, 231, 237, .22); }
.proteus-founder-principles article:last-child { border-bottom: 1px solid rgba(213, 231, 237, .22); }
.proteus-founder-principles span { color: #88adbf; font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.proteus-founder-principles h4 { margin: 0; color: #fff; font-size: 1rem; font-weight: 600; }
.proteus-founder-principles p { margin: 0; color: #b9cdd6; font-family: system-ui, sans-serif; font-size: .78rem; line-height: 1.55; }
.proteus-founder-coda { max-width: 1120px; margin: 0 auto; padding: 28px 0 8px; border-top: 1px solid #91aab7; color: #254b62; font-size: clamp(1.55rem, 3vw, 2.8rem); font-style: italic; line-height: 1.25; }
.proteus-founder-coda span { display: block; margin-bottom: 18px; color: #668292; font-family: system-ui, sans-serif; font-size: .65rem; font-style: normal; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }

@media (max-width: 900px) {
  .proteus-founder-hero { grid-template-columns: 1fr; }
  .proteus-founder-portrait { height: clamp(480px, 65vh, 620px); min-height: 0; margin: 0 -1px -1px; }
  .proteus-founder-story { grid-template-columns: 1fr; }
  .proteus-founder-lab-photo { grid-row: 1; }
  .proteus-origin > header { display: block; }
  .proteus-founder-philosophy { grid-template-columns: 1fr; }
}

.proteus-research-grid,
.proteus-principle-grid,
.proteus-investor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1120px; margin: 0 auto; }
.proteus-research-grid article,
.proteus-principle-grid article,
.proteus-investor-grid article { min-width: 0; padding: 22px; border: 1px solid var(--proteus-rule); background: rgba(255,255,255,.82); }
.proteus-research-grid article > span,
.proteus-principle-grid article > span { font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 750; letter-spacing: .2em; }
.proteus-research-grid h3,
.proteus-principle-grid h3,
.proteus-investor-grid h3 { margin: 12px 0 10px; font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.proteus-research-grid p,
.proteus-principle-grid p,
.proteus-investor-grid p { margin: 0; color: var(--proteus-muted); font-family: system-ui, sans-serif; font-size: .9rem; line-height: 1.55; }
.proteus-investor-grid article > span { color: #234d65; font-size: clamp(2rem, 4vw, 3.6rem); }

.proteus-program-list { display: grid; max-width: 1120px; margin: 0 auto; border-top: 1px solid var(--proteus-rule); }
.proteus-program-list article { display: grid; grid-template-columns: 90px minmax(0, 1fr) 130px; align-items: center; gap: 22px; padding: 20px 4px; border-bottom: 1px solid var(--proteus-rule); }
.proteus-program-list article > span { font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 750; letter-spacing: .12em; }
.proteus-program-list h3 { margin: 0 0 5px; font-size: 1.1rem; font-weight: 600; }
.proteus-program-list p { margin: 0; color: var(--proteus-muted); font-family: system-ui, sans-serif; font-size: .9rem; line-height: 1.45; }
.proteus-program-list article > strong { justify-self: end; color: #426177; font-family: system-ui, sans-serif; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }

.proteus-specimen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1120px; margin: 0 auto; }
.proteus-specimen-grid article { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr); overflow: hidden; border: 1px solid var(--proteus-rule); background: #fff; }
.proteus-specimen-grid article > img { width: 100%; height: 100%; min-height: 205px; object-fit: cover; }
.proteus-specimen-grid article > div { padding: 18px; }
.proteus-specimen-grid article span { color: #526f82; font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.proteus-specimen-grid h3 { margin: 8px 0 16px; font-size: 1.1rem; font-weight: 600; }
.proteus-specimen-grid dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-family: system-ui, sans-serif; font-size: .76rem; }
.proteus-specimen-grid dt { color: var(--proteus-muted); }
.proteus-specimen-grid dd { margin: 0; text-align: right; }

.proteus-career-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 42px; max-width: 1120px; margin: 0 auto; }
.proteus-career-layout > div:first-child { padding: 24px; border: 1px solid var(--proteus-rule); background: #eaf3f6; }
.proteus-career-layout h3 { margin: 0 0 10px; font-size: 1rem; text-transform: uppercase; }
.proteus-career-layout h3:not(:first-child) { margin-top: 28px; }
.proteus-career-layout p { margin: 0; color: var(--proteus-muted); font-family: system-ui, sans-serif; font-size: .9rem; line-height: 1.65; }
.proteus-job-list { display: grid; gap: 10px; }
.proteus-job-list article { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 17px 18px; border: 1px solid var(--proteus-rule); background: #fff; }
.proteus-job-list span,
.proteus-job-list small { color: var(--proteus-muted); font-family: system-ui, sans-serif; font-size: .68rem; }
.proteus-job-list strong { font-size: .94rem; }

.tankazon-item-seller { grid-template-columns: max-content max-content; column-gap: 6px; }

@media (max-width: 1080px) {
  .proteus-biodyne-header { grid-template-columns: minmax(205px, 1fr); gap: 8px 12px; padding: 8px 14px; }
  .proteus-biodyne-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 20px; min-width: 0; height: 40px; overflow-x: auto; }
  .proteus-biodyne-hero { grid-template-columns: minmax(310px, 1fr) minmax(0, 1.3fr) 150px; }
  .proteus-biodyne-grid { grid-template-columns: 1fr; }
  .proteus-specimen-card { border-top: 1px solid var(--proteus-rule); border-left: 0; }
}

@media (max-width: 720px) {
  .proteus-biodyne-header { grid-template-columns: minmax(0, 1fr); min-height: 66px; }
  .proteus-biodyne-brand-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .proteus-biodyne-brand-title { width: min(150px, 32vw); height: 38px; }
  .proteus-biodyne-hero { grid-template-columns: minmax(0, 1fr); min-height: 430px; background-position: 61% center; }
  .proteus-biodyne-hero::before { background: linear-gradient(90deg, rgba(248,252,253,.96), rgba(235,246,250,.7) 68%, rgba(18,56,80,.14)); }
  .proteus-biodyne-hero-copy { grid-column: 1; align-self: end; padding: 30px 24px; }
  .proteus-biodyne-hero-side { display: none; }
  .proteus-biodyne-programs { grid-template-columns: 1fr; }
  .proteus-program-card p { min-height: 0; }
  .proteus-subpage { padding: 26px 18px; }
  .proteus-research-feature { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .proteus-research-feature-index { grid-template-columns: auto 1fr; align-items: center; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid #b8ced8; }
  .proteus-recovery-program { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .proteus-recovery-program-label { grid-template-columns: 1fr auto; align-items: center; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid #b8ced8; }
  .proteus-page-lead { display: block; }
  .proteus-page-lead > div,
  .proteus-page-lead blockquote { margin-top: 24px; padding-left: 16px; }
  .proteus-research-grid,
  .proteus-principle-grid,
  .proteus-investor-grid,
  .proteus-specimen-grid,
  .proteus-career-layout { grid-template-columns: 1fr; }
  .proteus-manifesto { grid-template-columns: 1fr; gap: 18px; }
  .proteus-mission-detail { grid-template-columns: 1fr; gap: 20px; padding: 30px 0; }
  .proteus-founder-portrait { height: 460px; min-height: 0; margin: 0 -1px -1px; }
  .proteus-origin-timeline { grid-template-columns: 1fr 1fr; }
  .proteus-origin-timeline li:nth-child(2) { margin-right: 0; border-right: 0; }
  .proteus-program-list article { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .proteus-program-list article > strong { grid-column: 2; justify-self: start; }
  .proteus-specimen-grid article { grid-template-columns: 120px minmax(0, 1fr); }
  .proteus-job-list article { grid-template-columns: 80px minmax(0, 1fr); }
  .proteus-job-list small { grid-column: 2; }
}

@media (max-width: 520px) {
  .proteus-founder-page { padding-inline: 14px; }
  .proteus-founder-hero-copy { padding: 28px 22px; }
  .proteus-founder-portrait { height: 410px; min-height: 0; }
  .proteus-founder-credentials > div { grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
  .proteus-origin-timeline { grid-template-columns: 1fr; }
  .proteus-origin-timeline li,
  .proteus-origin-timeline li:nth-child(2) { margin-right: 0; border-right: 0; }
  .proteus-founder-philosophy { padding: 28px 22px; }
  .proteus-founder-principles article { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .proteus-founder-principles p { grid-column: 2; }
}

@media (max-width: 767px), (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
  .store-overlay,
  .tutorial-overlay {
    position: fixed;
    inset: 0;
    padding: 12px;
  }

  .store-panel,
  .settings-panel,
  .tutorial-panel {
    width: min(100%, calc(100vw - 24px));
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 16px;
    gap: 12px;
    border-radius: 20px;
  }

  .tutorial-panel.is-task-pane {
    width: min(292px, calc(100vw - 24px));
    max-height: none;
    padding: 11px 40px 11px 13px;
    gap: 7px;
    border-radius: 8px;
  }

  .store-panel-header {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .settings-panel-copy {
    min-width: 0;
  }

  .settings-panel-header .store-close-button {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }

  .store-panel-actions {
    width: 100%;
    justify-content: space-between;
  }

  .store-panel-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    width: 100%;
    gap: 8px;
  }

  .store-tab-button {
    min-width: 0;
    padding: 10px 12px;
  }

  .store-drawer,
  .settings-panel-body {
    padding-right: 0;
  }

  .tutorial-overlay {
    padding: 12px;
  }

  .tutorial-actions {
    justify-content: stretch;
  }

  .tutorial-actions .small-button {
    width: 100%;
  }

  .background-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .management-overlay-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  :root {
    --phone-dock-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    --phone-dock-clearance: calc(env(safe-area-inset-bottom, 0px) + 82px);
    --phone-tray-clearance: calc(env(safe-area-inset-bottom, 0px) + 164px);
  }

  .aquarium-card {
    display: block;
  }

  .tank-display {
    --display-edge-gap: 6px;
    width: min(260px, calc(100% - 54px));
    min-width: 0;
    max-width: none;
    padding: 3px;
  }

  .display-cell {
    min-height: 38px;
    padding: 4px 5px 4px;
  }

  .display-label {
    font-size: 0.42rem;
  }

  .display-cell strong {
    font-size: 0.82rem;
  }

  .daily-bonus-bell {
    width: 38px;
    height: 38px;
    font-size: 1.05rem;
  }

  .daily-bonus-bell-icon {
    width: 22px;
    height: 22px;
  }

  .tank-nav-button {
    bottom: 12px;
    width: 38px;
    height: 38px;
    border-radius: 16px;
    font-size: 1.45rem;
  }

  .tank-nav-button-left {
    left: 10px;
  }

  .tank-nav-button-right {
    right: 10px;
  }

  .edit-quick-ref {
    display: none !important;
  }

  .tank-sidebar,
  .tank-sidebar.is-collapsed {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 8px;
    bottom: var(--phone-dock-clearance);
    width: auto;
    transform: none !important;
    z-index: 10;
  }

  .tank-stage.has-edit-decor-tray .tank-sidebar {
    bottom: var(--phone-tray-clearance);
  }

  .sidebar-toggle {
    display: none;
  }

  .tab-buttons {
    gap: 6px;
  }

  .tab-button {
    padding: 11px 8px 10px;
    font-size: 0.72rem;
  }

  .tank-panel-shell {
    padding-right: 4px;
    margin-right: -4px;
    border-left: 1px solid var(--panel-line-strong);
    border-radius: 20px;
  }

  .tab-panel {
    gap: 10px;
    padding: 14px 14px 16px;
  }

  .tab-panel[data-panel="fish"] > .panel-heading.with-action,
  .tab-panel[data-panel="decor"] > .panel-heading.with-action {
    top: -14px;
    margin: -14px -14px 4px;
    padding: 14px 14px 10px;
  }

  .panel-heading,
  .with-action,
  .footer-heading,
  .panel-heading-actions {
    flex-wrap: wrap;
  }

  .edit-decor-tray {
    position: fixed;
    left: 50%;
    right: auto;
    width: min(92vw, calc(100vw - 16px));
    bottom: var(--phone-dock-clearance);
    transform: translateX(-50%);
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 6px;
    padding: 7px 8px;
    z-index: 12;
  }

  :root[data-toolbar-position="bottom-center"] .edit-decor-tray {
    bottom: calc(var(--phone-dock-clearance) + 12px);
  }

  .edit-decor-tray-arrow {
    width: 30px;
    height: 60px;
    border-radius: 18px;
    font-size: 1.25rem;
  }

  .edit-decor-tile {
    min-width: 68px;
    max-width: 68px;
    height: 68px;
  }

  .edit-decor-tile-surface {
    border-radius: 20px;
  }

  :root[data-toolbar-position="bottom-center"] .tank-bottom-dock {
    --toolbar-edge-gap: env(safe-area-inset-bottom, 0px);
    --toolbar-open-transform: none;
    --toolbar-collapsed-transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: env(safe-area-inset-bottom, 0px);
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    padding: 4px 6px calc(env(safe-area-inset-bottom, 0px) + 4px);
    border-radius: 16px 16px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 12;
    scrollbar-width: thin;
  }

  .dock-button {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font-size: 0.98rem;
  }

  .tank-bottom-dock.has-open-action-menu {
    overflow: visible;
  }

  .toolbar-action-menu-button {
    min-width: 88px;
    min-height: 38px;
    gap: 7px;
    padding: 6px 9px 6px 7px;
    font-size: 0.7rem;
  }

  .toolbar-action-menu-button img {
    width: 24px;
    height: 24px;
  }

  .fish-inspector {
    position: fixed;
    left: 8px;
    right: 8px;
    top: auto;
    bottom: var(--phone-dock-clearance);
    width: auto;
    z-index: 13;
  }

  .fish-inspector-card {
    max-height: min(42dvh, 320px);
    overflow: auto;
  }
}

@media (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
  .dock-button.edit-shortcut-control:not([hidden]) {
    display: grid;
  }

  .tank-sidebar,
  .fish-inspector,
  .store-panel,
  .settings-panel,
  .tutorial-panel {
    font-size: 0.76rem;
  }

  .tank-display {
    --display-edge-gap: 4px;
    width: min(154px, 24vw);
    min-width: 0;
    padding: 2px;
  }

  .display-cell {
    min-height: 30px;
    padding: 3px 4px 2px;
  }

  .display-label {
    font-size: 0.34rem;
    letter-spacing: 0;
  }

  .display-cell strong {
    font-size: 0.7rem;
  }

  .edit-quick-ref {
    --edit-quick-ref-top: 54px;
    --edit-quick-ref-right: 8px;
  }

  .edit-quick-ref-card {
    min-width: 0;
    max-width: 168px;
    gap: 4px;
    padding: 8px 10px;
    font-size: 0.72rem;
  }

  .edit-quick-ref-row {
    column-gap: 6px;
  }

  .edit-quick-ref-key {
    white-space: normal;
  }

  .daily-bonus-bell {
    width: 28px;
    height: 28px;
    font-size: 0.86rem;
  }

  .daily-bonus-bell-icon {
    width: 18px;
    height: 18px;
  }

  .tank-sidebar {
    top: 48px;
    width: min(244px, 36vw);
    bottom: 34px;
  }

  .sidebar-toggle {
    right: -26px;
    width: 26px;
    height: 72px;
    font-size: 1rem;
  }

  .tab-buttons {
    gap: 2px;
  }

  .tab-button {
    padding: 8px 5px 7px;
    font-size: 0.62rem;
  }

  .tank-panel-shell {
    padding-right: 2px;
    margin-right: -2px;
  }

  .tab-panel {
    gap: 8px;
    padding: 8px 8px 10px;
    font-size: 0.64rem;
  }

  .tab-panel[data-panel="fish"] > .panel-heading.with-action,
  .tab-panel[data-panel="decor"] > .panel-heading.with-action {
    top: -8px;
    margin: -8px -8px 4px;
    padding: 8px 8px 6px;
  }

  .panel-heading h2 {
    font-size: 0.76rem;
    margin-bottom: 2px;
  }

  .panel-heading p,
  .settings-panel-copy p,
  .settings-section-note {
    font-size: 0.56rem;
    line-height: 1.3;
  }

  .tab-panel .info-card h3,
  .compact-heading h3,
  .shop-section-heading h3 {
    font-size: 0.72rem;
    margin-bottom: 2px;
  }

  .compact-heading p,
  .shop-section-heading p {
    font-size: 0.56rem;
    line-height: 1.25;
  }

  .summary-row {
    gap: 10px;
    padding: 6px 0;
  }

  .summary-row span {
    font-size: 0.6rem;
    line-height: 1.2;
  }

  .summary-row strong {
    font-size: 0.78rem;
    line-height: 1.1;
  }

  .tank-name-display,
  .tank-name-editor,
  .tank-action-row,
  .fish-actions,
  .mini-card-actions,
  .fish-card-button-row {
    gap: 6px;
  }

  .tank-name-input {
    min-width: 120px;
    padding: 6px 8px;
    font-size: 0.68rem;
    border-radius: 10px;
  }

  .collapsible-toggle {
    gap: 8px;
    padding: 0;
  }

  .collapsible-title {
    font-size: 0.72rem;
  }

  .collapsible-section [data-collapsible-body] {
    margin-top: 8px;
  }

.settings-panel-copy h2,
.settings-section h3 {
  font-size: 0.98rem;
}

  .settings-kicker,
  .tutorial-kicker,
  .inspector-species {
    font-size: 0.62rem;
  }

  .info-card,
  .summary-card,
  .fish-card,
  .mini-card,
  .shop-card,
  .background-card,
  .fish-inspector-card,
  .settings-section {
    padding: 10px;
    border-radius: 14px;
  }

  .rule-list,
  .event-feed,
  .shop-meta,
  .fish-meta,
  .fish-status-line,
  .fish-health-note,
  .event-line,
  .empty-state {
    font-size: 0.6rem;
    line-height: 1.3;
  }

  .fish-species {
    font-size: 0.76rem;
  }

  .fish-trait,
  .size-badge,
  .price-tag {
    padding: 5px 8px;
    font-size: 0.66rem;
  }

  .small-button,
  .background-card button {
    padding: 7px 10px;
    font-size: 0.68rem;
  }

  .small-button.icon {
    min-width: 30px;
    padding: 7px 9px;
  }

  .small-button.icon-only,
  .icon-button.icon-only {
    min-width: 30px;
    width: 30px;
    height: 30px;
    font-size: 0.86rem;
  }

  #toggleFishShop.icon-button.icon-only,
  #toggleDecorShop.icon-button.icon-only {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .store-panel,
  .settings-panel,
  .tutorial-panel {
    padding: 10px;
    gap: 8px;
    border-radius: 16px;
  }

  .tutorial-panel.is-task-pane {
    padding: 10px 38px 10px 12px;
    border-radius: 8px;
  }

  .store-panel-tabs {
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  }

  .store-tab-button {
    padding: 7px 6px;
    font-size: 0.66rem;
  }

  .store-coin-counter {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.74rem;
  }

  .store-close-button {
    width: 32px;
    height: 32px;
    font-size: 1.05rem;
  }

  .shop-card,
  .fish-card,
  .mini-card {
    gap: 8px;
  }

  .shop-card {
    grid-template-columns: 56px minmax(0, 1fr) max-content;
    align-items: center;
  }

  .fish-card {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .mini-card {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .fish-thumb {
    width: 66px;
    height: 52px;
    padding: 5px;
    border-radius: 14px;
  }

  .shop-thumb {
    width: 56px;
    height: 48px;
    padding: 4px;
    border-radius: 12px;
  }

  .decor-thumb {
    width: 62px;
    height: 62px;
    padding: 4px;
    border-radius: 14px;
  }

  .tank-overlay-hints {
    top: 48px;
    width: min(250px, calc(100% - 12px));
    max-width: min(250px, calc(100% - 12px));
  }

  .tank-stage.has-edit-decor-tray .tank-overlay-hints {
    top: 48px;
  }

  .edit-decor-tray {
    left: 50%;
    right: auto;
    width: min(86vw, calc(100vw - 8px));
    bottom: 34px;
    transform: translateX(-50%);
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 14px 14px 0 0;
  }

  :root[data-toolbar-position="bottom-center"] .edit-decor-tray {
    bottom: 42px;
  }

  .edit-decor-tray-arrow {
    width: 22px;
    height: 40px;
    border-radius: 12px;
    font-size: 0.92rem;
  }

  .edit-decor-tile {
    min-width: 48px;
    max-width: 48px;
    height: 48px;
  }

  .edit-decor-tile-surface {
    border-radius: 14px;
  }

  :root[data-toolbar-position="bottom-center"] .tank-bottom-dock {
    --toolbar-edge-gap: 0px;
    --toolbar-open-transform: none;
    --toolbar-collapsed-transform: translateY(100%);
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 14px 14px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .dock-button {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    font-size: 0.86rem;
  }

  .shop-card-main {
    display: grid;
    gap: 4px;
  }

  .shop-card > :last-child {
    grid-column: 3;
    justify-self: end;
    align-self: center;
  }

  .shop-card-actions {
    justify-items: end;
    align-content: center;
    gap: 4px;
    min-width: max-content;
  }

  .shop-button-row {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .tank-nav-button {
    bottom: 32px;
    width: 28px;
    height: 28px;
    border-radius: 12px;
    font-size: 1rem;
  }

  .tank-nav-button-left {
    left: 4px;
  }

  .tank-nav-button-right {
    right: 4px;
  }

  .fish-inspector {
    top: 50px;
    right: 4px;
    left: auto;
    bottom: 34px;
    width: min(218px, 32vw);
  }

  .fish-inspector-card {
    padding: 8px;
    max-height: 100%;
    overflow: auto;
  }

  .fish-inspector-name-row {
    grid-template-columns: max-content minmax(48px, 1fr) 28px 28px;
    gap: 4px;
  }

  .fish-inspector-name-row input {
    padding: 5px 6px;
    font-size: 0.76rem;
  }

  .fish-inspector .inspector-icon-button {
    width: 28px;
    min-width: 28px;
    height: 28px;
    font-size: 0.76rem;
  }

  .fish-inspector .inspector-save-button::before {
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
  }

  .inspector-line {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 5px;
    min-height: 18px;
  }

  .inspector-setting-row {
    grid-template-columns: 58px minmax(0, 1fr) 36px;
    gap: 5px;
  }

  .inspector-setting-row-select {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .fish-inspector-actions .small-button,
  .fish-inspector-action-button {
    min-height: 28px;
    padding: 6px 8px;
  }
}

:root[data-toolbar-collapsed="true"][data-toolbar-position] .tank-bottom-dock,
.tank-bottom-dock.is-toolbar-collapsed {
  transform: var(--toolbar-collapsed-transform);
}

:root[data-toolbar-collapsed="true"][data-toolbar-position] .tank-bottom-dock > :not(.toolbar-tab),
.tank-bottom-dock.is-toolbar-collapsed > :not(.toolbar-tab) {
  pointer-events: none;
}

body.fixed-16-9-aspect-ratio .aquarium-card {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

body.fixed-16-9-aspect-ratio .tank-stage {
  width: min(100vw, 177.77777778vh);
  height: min(100vh, 56.25vw);
  width: min(100vw, 177.77777778dvh);
  height: min(100dvh, 56.25vw);
  aspect-ratio: 16 / 9;
}

@media (max-width: 980px) and (max-height: 620px) and (orientation: landscape) {
  body.fixed-16-9-aspect-ratio .aquarium-card {
    display: block;
    width: var(--app-viewport-width);
    height: var(--app-viewport-height);
  }

  body.fixed-16-9-aspect-ratio .tank-stage {
    width: 100%;
    height: min(100%, var(--app-stable-viewport-height));
    aspect-ratio: auto;
  }

  .tank-display {
    --display-edge-gap: max(4px, env(safe-area-inset-left, 0px));
    width: min(156px, calc(100vw - 58px));
    min-width: 0;
    padding: 2px;
    border-width: 2px;
  }

  .display-cell {
    min-height: 28px;
    padding: 2px 3px;
  }

  .display-label {
    font-size: 0.32rem;
  }

  .display-cell strong {
    font-size: 0.66rem;
  }

  .display-tab {
    width: 42px;
    height: 12px;
    font-size: 0.56rem;
  }

  .daily-bonus-bell {
    width: 28px;
    height: 28px;
  }

  .tank-nav-button {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
    width: 28px;
    height: 28px;
  }

  .tank-bottom-dock {
    --toolbar-open-transform: none;
    --toolbar-collapsed-transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
    position: fixed;
    left: env(safe-area-inset-left, 0px);
    right: env(safe-area-inset-right, 0px);
    top: auto;
    bottom: env(safe-area-inset-bottom, 0px);
    transform: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 4px;
    max-width: none;
    padding: 3px 6px;
    border-radius: 12px 12px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .tank-bottom-dock::-webkit-scrollbar {
    display: none;
  }

  :root[data-toolbar-position="left-center"] .tank-bottom-dock,
  :root[data-toolbar-position="right-center"] .tank-bottom-dock,
  :root[data-toolbar-position="bottom-center"] .tank-bottom-dock {
    left: env(safe-area-inset-left, 0px);
    right: env(safe-area-inset-right, 0px);
    top: auto;
    bottom: env(safe-area-inset-bottom, 0px);
    transform: none;
    flex-direction: row;
  }

  :root[data-toolbar-collapsed="true"][data-toolbar-position] .tank-bottom-dock,
  .tank-bottom-dock.is-toolbar-collapsed {
    transform: var(--toolbar-collapsed-transform);
  }

  .toolbar-tab,
  :root[data-toolbar-position="left-center"] .toolbar-tab,
  :root[data-toolbar-position="right-center"] .toolbar-tab,
  :root[data-toolbar-position="bottom-center"] .toolbar-tab {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% - var(--toolbar-tab-overlap));
    width: 44px;
    height: 14px;
    border: 1px solid var(--toolbar-shell-border-color);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    font-size: 0.56rem;
    transform: translateX(-50%);
  }

  .dock-button {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    font-size: 0.84rem;
  }

  .dock-button-icon {
    width: 1.05em;
    height: 1.05em;
  }

  .dock-button:is(:hover, :focus-visible),
  .dock-button:is(:hover, :focus-visible) .dock-button-icon,
  .dock-button:is(:hover, :focus-visible) .dock-button-emoji {
    transform: none;
  }

  .store-overlay,
  .settings-overlay,
  .utility-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding:
      calc(env(safe-area-inset-top, 0px) + 3px)
      calc(env(safe-area-inset-right, 0px) + 4px)
      calc(env(safe-area-inset-bottom, 0px) + 34px)
      calc(env(safe-area-inset-left, 0px) + 4px);
    background: rgba(1, 8, 14, 0.34);
  }

  .store-overlay[hidden],
  .settings-overlay[hidden],
  .utility-overlay[hidden] {
    display: none !important;
  }

  .store-panel,
  .settings-panel,
  .utility-panel {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    gap: 4px;
    padding: 6px;
    border-radius: 8px;
  }

  .store-panel,
  .settings-panel {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .utility-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .store-panel-header,
  .settings-panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
  }

  .settings-panel-copy {
    min-width: 0;
  }

  .settings-panel-copy h2,
  .utility-overlay #utilityOverlayTitle {
    margin-bottom: 0;
    font-size: 0.92rem;
    line-height: 1.1;
  }

  .settings-panel-copy p:not(.settings-kicker),
  .shop-section-heading p,
  .compact-heading p {
    display: none;
  }

  .settings-kicker,
  .tutorial-kicker {
    margin-bottom: 1px;
    font-size: 0.56rem;
  }

  .store-panel-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .store-panel-tabs::-webkit-scrollbar {
    display: none;
  }

  .store-tab-button {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 24px;
    padding: 5px 7px;
    border-radius: 8px;
    font-size: 0.56rem;
    line-height: 1;
  }

  .store-panel-actions {
    gap: 4px;
  }

  .store-coin-counter {
    min-height: 24px;
    padding: 0 7px;
    font-size: 0.6rem;
  }

  .store-close-button {
    width: 26px;
    height: 26px;
    font-size: 0.92rem;
  }

  .store-panel-body,
  .store-drawer,
  .settings-panel-body,
  .utility-panel .utility-overlay-body {
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
    padding-bottom: 6px;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  .utility-overlay-footer {
    min-height: 32px;
    padding-top: 4px;
    gap: 6px;
  }

  .shop-drawer,
  .card-stack,
  .mini-card-stack,
  .event-feed,
  .shop-section,
  .shop-section-cards {
    gap: 6px;
  }

  .shop-section + .shop-section {
    margin-top: 10px;
  }

  .shop-toolbar,
  .equipment-heading {
    gap: 6px;
    padding: 0;
  }

  .shop-toolbar-summary {
    font-size: 0.66rem;
  }

  .shop-toolbar-controls {
    gap: 5px;
  }

  .shop-search-control,
  .shop-sort-control {
    gap: 5px;
    font-size: 0.64rem;
  }

  .shop-search-input,
  .shop-sort-select {
    min-height: 28px;
    padding: 5px 8px;
    font-size: 0.66rem;
  }

  .shop-card,
  .fish-card,
  .mini-card,
  .info-card,
  .summary-card,
  .background-card,
  .settings-section,
  .fish-inspector-card {
    padding: 6px;
    border-radius: 8px;
  }

  .shop-card {
    grid-template-columns: 42px minmax(0, 1fr) minmax(50px, max-content);
    align-items: center;
    gap: 5px;
  }

  .fish-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 6px;
  }

  .mini-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 6px;
  }

  .shop-thumb {
    width: 42px;
    height: 36px;
    padding: 3px;
    border-radius: 7px;
  }

  .fish-thumb {
    width: 54px;
    height: 44px;
    padding: 4px;
    border-radius: 10px;
  }

  .decor-thumb {
    width: 52px;
    height: 52px;
    padding: 4px;
    border-radius: 10px;
  }

  .shop-card-main,
  .fish-card-main,
  .fish-meta,
  .shop-meta {
    gap: 3px;
  }

  .shop-stat-list {
    gap: 3px;
  }

  .shop-stat-row {
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
    gap: 4px;
  }

  .shop-stat-label,
  .shop-comfort-profile > div > span {
    font-size: 0.58rem;
    line-height: 1.15;
  }

  .shop-stat-value {
    font-size: 0.62rem;
    line-height: 1.18;
  }

  .shop-card > :last-child {
    grid-column: 3;
    justify-self: end;
    align-self: center;
  }

  .shop-card-actions {
    min-width: 0;
    justify-items: end;
    gap: 4px;
  }

  .shop-button-row {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .price-tag {
    padding: 3px 6px;
    font-size: 0.52rem;
    line-height: 1;
  }

  .buy-button,
  .small-button,
  .background-card button {
    min-height: 24px;
    padding: 5px 7px;
    font-size: 0.56rem;
    line-height: 1;
  }

  .small-button.icon,
  .small-button.icon-only,
  .icon-button.icon-only {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.82rem;
  }

  .comfort-chip,
  .comfort-chip-label,
  .fish-trait,
  .size-badge {
    min-height: 18px;
    padding: 2px 6px;
    font-size: 0.58rem;
    line-height: 1.1;
  }

  .tank-management-card,
  .tank-summary-grid {
    gap: 0;
  }

  .summary-row {
    gap: 8px;
    padding: 5px 0;
  }

  .summary-row span {
    font-size: 0.58rem;
  }

  .summary-row strong {
    font-size: 0.72rem;
  }

  .care-task-pane {
    position: fixed;
    left: calc(env(safe-area-inset-left, 0px) + 6px);
    right: auto;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    bottom: auto;
    width: min(292px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 12px));
    max-width: none;
    max-height: min(38dvh, 152px);
    overflow: auto;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 8px;
    pointer-events: auto;
  }

  .care-task-heading {
    font-size: 0.58rem;
  }

  .care-task-list {
    gap: 4px;
  }

  .care-task-row {
    grid-template-columns: 15px minmax(0, 1fr);
    gap: 6px;
    min-height: 20px;
  }

  .care-task-box {
    width: 14px;
    height: 14px;
    border-radius: 3px;
  }

  .care-task-label,
  .care-task-empty {
    font-size: 0.72rem;
  }

  .care-task-meta {
    grid-column: 2;
    justify-items: start;
    font-size: 0.56rem;
    white-space: normal;
  }

  .fish-inspector {
    position: fixed;
    left: auto;
    right: calc(env(safe-area-inset-right, 0px) + 5px);
    top: calc(env(safe-area-inset-top, 0px) + 42px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
    width: min(216px, 38vw);
  }

  .fish-inspector-card {
    max-height: 100%;
    overflow: auto;
  }

  .fish-inspector-name-row {
    grid-template-columns: max-content minmax(42px, 1fr) 26px 26px;
  }

  .fish-inspector .inspector-icon-button {
    width: 26px;
    min-width: 26px;
    height: 26px;
  }

  .inspector-line {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .inspector-line span,
  .inspector-setting-row span {
    font-size: 0.62rem;
  }

  .inspector-line strong {
    font-size: 0.66rem;
  }

  .fish-inspector-action-button {
    min-width: 48px;
    min-height: 26px;
    padding: 0 6px;
    font-size: 0.58rem;
  }

  .fish-action-store,
  .fish-action-settings {
    min-width: 68px;
  }

  body:has(#storeOverlay.is-open) .care-task-pane,
  body:has(#settingsOverlay.is-open) .care-task-pane,
  body:has(#utilityOverlay.is-open) .care-task-pane,
  body:has(#storeOverlay.is-open) .fish-inspector,
  body:has(#settingsOverlay.is-open) .fish-inspector,
  body:has(#utilityOverlay.is-open) .fish-inspector {
    display: none !important;
  }
}

/* ========================================================================== */
/* BubbleBodega store redesign                                                   */
/* ========================================================================== */
.tankazon-store {
  padding: clamp(6px, 1.1vw, 14px);
  background: transparent;
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  backdrop-filter: blur(22px) saturate(1.08);
}

.tankazon-store .tankazon-panel {
  width: min(1600px, calc(100vw - 18px));
  height: min(97dvh, 1040px);
  max-width: none;
  max-height: none;
  gap: 0;
  padding: 0;
  overflow: hidden;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: #ffffff;
  color: #101820;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.62);
  backdrop-filter: none;
}

.webpage-tab-strip {
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  box-sizing: border-box;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  overflow: hidden;
  padding: 4px 6px 0 10px;
  border-bottom: 1px solid #aebdca;
  background: linear-gradient(180deg, #dbe7ef, #c7d6e2);
}

.webpage-tab-list {
  display: flex;
  align-items: end;
  align-self: stretch;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-y: none;
  scrollbar-width: thin;
}

.webpage-tab {
  position: relative;
  display: inline-flex;
  flex: 0 1 190px;
  align-items: center;
  gap: 9px;
  min-width: 118px;
  max-width: 210px;
  height: 37px;
  margin-right: -1px;
  padding: 0 16px;
  overflow: hidden;
  border: 1px solid #acbdca;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  color: #163750;
  background: linear-gradient(180deg, rgba(238, 245, 249, .72), rgba(210, 224, 234, .84));
  font: 650 .82rem/1 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.webpage-tab:hover { z-index: 1; background: #edf4f8; }
.webpage-tab.is-active { z-index: 2; height: 39px; margin-bottom: -1px; border-color: #9eafbd; color: #0f2d43; background: #fff; box-shadow: 0 -1px 8px rgba(35, 68, 90, .08); }
.webpage-tab:focus-visible { z-index: 3; outline: 2px solid #147593; outline-offset: -3px; }
.webpage-tab img { flex: 0 0 21px; width: 21px; height: 21px; object-fit: contain; }
.webpage-tab[data-webpage-destination="proteus"] img { object-fit: scale-down; }
.webpage-tab > span:not(.webpage-tab-close) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.webpage-tab[hidden] { display: none !important; }
.webpage-browser-close { display: grid; align-self: center; width: 34px; height: 34px; margin: 0 2px 3px 10px; padding: 0; place-items: center; border: 1px solid #9cadba; border-radius: 7px; color: #18394f; background: rgba(245, 250, 252, .78); font: 400 1.35rem/1 system-ui, sans-serif; cursor: pointer; }
.webpage-browser-close:hover { background: #fff; }
.webpage-browser-close:focus-visible { outline: 2px solid #147593; outline-offset: 1px; }

@media (max-width: 760px) {
  .web-home-header { width: min(100% - 28px, 900px); padding-top: 38px; }
  .web-home-header > div { padding-left: 0; text-align: left; }
  .web-home-shortcuts { grid-template-columns: 1fr; width: min(100% - 28px, 900px); gap: 11px; }
  .web-home-shortcut { min-height: 92px; }
}

.tankazon-store .tankazon-header {
  display: grid;
  gap: 0;
  padding: 0;
  color: #fff;
  background: #071a2c;
}

.tankazon-mainbar {
  display: grid;
  grid-template-columns: 170px minmax(280px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 6px 12px;
  background: linear-gradient(180deg, #071a2c, #051525);
}

.tankazon-logo {
  display: block;
  width: 154px;
  height: 46px;
  object-fit: contain;
  object-position: left center;
}

.tankazon-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: stretch;
  height: 38px;
  overflow: hidden;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 0 0 2px transparent;
}

.tankazon-search:focus-within {
  box-shadow: 0 0 0 3px #ff9900;
}

.tankazon-search-scope {
  display: grid;
  place-items: center;
  min-width: 74px;
  padding: 0 28px 0 12px;
  border: 0;
  border-right: 1px solid #d5d9d9;
  background: #f3f3f3;
  color: #3d454d;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}

.tankazon-search input {
  width: 100%;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  outline: 0;
  color: #111;
  background: #fff;
  font-size: 1rem;
  user-select: text;
}

.tankazon-search-button {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffb627, #ff9900);
  color: #071a2c;
  font-size: 1.35rem;
  font-weight: 900;
}


.tankazon-store .store-panel-actions {
  gap: 8px;
}

.tankazon-store .store-coin-counter {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-weight: 900;
}

.tankazon-store .store-coin-icon {
  width: 22px;
  height: 22px;
}

.tankazon-store .store-close-button {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: #fff;
  box-shadow: none;
}

.tankazon-store .store-close-button:hover,
.tankazon-store .store-close-button:focus-visible {
  background: rgba(255,255,255,0.14);
}

.tankazon-navrow {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 36px;
  padding: 0 12px;
  background: #102a43;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.tankazon-all-categories {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}
.tankazon-all-categories:hover, .tankazon-all-categories:focus-visible { border-color: rgba(255,255,255,.65); }

.tankazon-store .store-panel-tabs {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tankazon-store .store-panel-tabs::-webkit-scrollbar { display: none; }

/* The store promise belongs in the category row.  It remains right-aligned
   without stealing space from category selection and disappears before the
   condensed/mobile navigation would make either control unreadable. */
.tankazon-store .tankazon-nav-promo {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 9px;
  margin-left: auto;
  min-width: 0;
  color: #fff;
  white-space: nowrap;
}

.tankazon-store .tankazon-nav-promo strong {
  font-size: .88rem;
  line-height: 1;
}

.tankazon-store .tankazon-nav-promo strong span { color: #ffb000; }
.tankazon-store .tankazon-nav-promo small { color: #e8f4f8; font-size: .62rem; }

.tankazon-store .store-tab-button {
  min-width: auto;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #fff;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.tankazon-store .store-tab-button:hover,
.tankazon-store .store-tab-button:focus-visible {
  border-color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.04);
}

.tankazon-store .store-tab-button.is-active {
  border-color: #ffb627;
  background: #071a2c;
  color: #ffb627;
  box-shadow: inset 0 -3px 0 #ff9900;
}

.tankazon-promo-strip {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 6px 14px;
  color: #fff;
  background:
    radial-gradient(circle at 72% 30%, rgba(48, 171, 193, .32), transparent 26%),
    linear-gradient(110deg, #07314b 0%, #0c5e72 58%, #0b4059 100%);
  border-bottom: 1px solid #d5d9d9;
}

.tankazon-promo-strip > div {
  display: grid;
  gap: 2px;
}

.tankazon-promo-strip strong {
  font-size: clamp(.96rem, 1.35vw, 1.25rem);
  line-height: 1;
}

.tankazon-promo-strip strong span { color: #ffb000; }
.tankazon-promo-strip small { color: #e8f4f8; font-size: .72rem; }

.tankazon-store .tankazon-body {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  background: #eaeded;
}
.tankazon-catalog-area { min-width: 0; min-height: 0; overflow: auto; position: relative; }
.tankazon-catalog-area.is-loading { overflow: hidden; }
.tankazon-catalog-loading {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 100%;
  background: #eaeded;
  color: #0f1111;
  text-align: center;
}
.tankazon-catalog-loading[hidden] { display: none !important; }
.tankazon-catalog-loading strong {
  font-size: 1.28rem;
  font-weight: 900;
}
.tankazon-catalog-loading > span {
  color: #565959;
  font-size: .8rem;
  font-weight: 750;
}
.tankazon-catalog-loading-box {
  width: 94px;
  height: 94px;
  background: url("../assets/web/bodega/Box.webp") center / contain no-repeat;
  transform-origin: 50% 78%;
  animation: tankazon-loading-box 1s ease-in-out infinite alternate;
}
@keyframes tankazon-loading-box {
  from { transform: translateY(2px) rotate(-2deg); }
  to { transform: translateY(-5px) rotate(2deg); }
}
.tankazon-catalog-area > .store-drawer { height: auto; min-height: 100%; }
.tankazon-catalog-area > .store-drawer.tankazon-all-section { min-height: 0; border-bottom: 12px solid #eaeded; }
.tankazon-catalog-area > .store-drawer.tankazon-section-heading::before { content: attr(data-tankazon-category); display: block; margin: 0 0 12px; text-transform: capitalize; font-size: 1.2rem; font-weight: 900; }
.tankazon-cart { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: #fff; border-left: 1px solid #d5d9d9; color: #0f1111; }
.tankazon-cart-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid #d5d9d9; font-size:1.05rem; }
.tankazon-cart-heading button { width:30px; height:30px; border:0; background:transparent; color:#0f1111; font-size:1.45rem; cursor:pointer; }
.tankazon-cart-items { min-height:0; overflow:auto; }
.tankazon-cart-empty { padding:24px 16px; color:#565959; }
.tankazon-cart-item { display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; padding:14px 16px; border-bottom:1px solid #e7e7e7; }
.tankazon-cart-item > img { width:64px; height:64px; object-fit:contain; }
.tankazon-cart-item > div:nth-child(2) { display:grid; gap:3px; align-content:start; }
.tankazon-cart-item small { color:#565959; }
.tankazon-cart-item b { font-size:.82rem; }
.tankazon-cart-item-actions { grid-column:1 / -1; display:flex; align-items:center; gap:6px; }
.tankazon-cart-item-actions button { min-width:28px; min-height:28px; border:1px solid #d5d9d9; border-radius:7px; background:#fff; cursor:pointer; }
.tankazon-cart-item-actions .tankazon-cart-remove { margin-left:auto; padding:0 8px; color:#0066c0; border:0; }
.tankazon-cart-footer { display:grid; gap:12px; padding:16px; border-top:1px solid #d5d9d9; }
.tankazon-cart-subtotal { font-size:1rem; }
.tankazon-purchase-error {
  display: block;
  padding: 10px 12px;
  border: 1px solid #d13212;
  border-radius: 8px;
  background: #fff1f0;
  color: #b12704;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.25;
}
.tankazon-purchase-error[hidden] { display: none !important; }
.tankazon-complete-purchase { min-height:42px; border:1px solid #1f8f5b; border-radius:8px; background:#28b36d; color:#ffffff; font-weight:900; cursor:pointer; }
.tankazon-complete-purchase:hover:not(:disabled) { background:#20945a; }
.tankazon-complete-purchase:disabled { opacity:.48; cursor:default; }
.tankazon-delivery-complete { position:absolute; inset:0; z-index:20; display:grid; place-items:center; align-content:center; gap:16px; background:#fff; color:#0f1111; font-size:1.65rem; font-weight:900; }
.tankazon-delivery-complete[hidden] { display:none !important; }
.store-delivery-box { width:150px; height:150px; background: url("../assets/web/bodega/Box.webp") center / contain no-repeat; animation:tankazon-box-jiggle .12s ease-in-out 6 alternate; transform-origin:50% 65%; }
@keyframes tankazon-box-jiggle { from { transform:rotate(-7deg) translateX(-3px); } to { transform:rotate(7deg) translateX(3px); } }

.tankazon-store .store-drawer {
  height: 100%;
  max-height: none;
  padding: 20px 24px 34px;
  overflow: auto;
  background: #eaeded;
  color: #0f1111;
}

.tankazon-store .store-drawer,
.tankazon-store .shop-section-cards {
  gap: 12px;
}

.tankazon-store .shop-toolbar {
  position: sticky;
  top: -20px;
  z-index: 3;
  margin: -20px -24px 16px;
  padding: 12px 24px;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid #d5d9d9;
  color: #0f1111;
  box-shadow: 0 2px 8px rgba(15,17,17,.08);
}

.tankazon-store .shop-toolbar-summary,
.tankazon-store .shop-search-control,
.tankazon-store .shop-sort-control,
.tankazon-store .shop-water-filter-control,
.tankazon-store .shop-section-heading p,
.tankazon-store .shop-meta,
.tankazon-store .fish-meta {
  color: #565959;
}

.tankazon-store .shop-search-control { display: none; }

.tankazon-store .shop-water-filter-control {
  color: #565959;
}

.tankazon-store .shop-water-filter-toggle {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid #888c8c;
  border-radius: 7px;
  background: #fff;
  color: #0f1111;
}

.tankazon-store .shop-water-requirement {
  border-color: #e3a008;
  background: #fff8e1;
  color: #7a4b00;
}

.tankazon-store .shop-search-input,
.tankazon-store .shop-sort-select {
  border-radius: 7px;
  border: 1px solid #888c8c;
  background: #fff;
  color: #0f1111;
}

.tankazon-store .shop-sort-select {
  padding: 7px 28px 7px 10px;
}

.tankazon-store .shop-section-heading h3 {
  color: #0f1111;
  font-size: 1.28rem;
}

.tankazon-store .shop-section-cards {
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  align-items: stretch;
}

.tankazon-store .shop-card {
  grid-template-columns: 1fr;
  grid-template-rows: 150px auto auto;
  align-items: start;
  gap: 10px;
  min-width: 0;
  min-height: 335px;
  padding: 14px;
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  background: #fff;
  color: #0f1111;
  box-shadow: 0 1px 2px rgba(15,17,17,.08);
}

.tankazon-store .shop-card:hover {
  box-shadow: 0 4px 16px rgba(15,17,17,.16);
}

.tankazon-store .shop-card > :last-child {
  grid-column: 1;
  justify-self: stretch;
  align-self: end;
}

.tankazon-store .shop-thumb,
.tankazon-store .decor-thumb {
  width: 100%;
  height: 150px;
  max-height: 150px;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  object-fit: contain;
  background: #fff;
}
.tankazon-store .layered-dispenser-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
}
.tankazon-store .layered-shrimp-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
}
.tankazon-store .layered-shrimp-thumb-legs,
.tankazon-store .layered-shrimp-thumb-body,
.tankazon-store .layered-shrimp-thumb-antennae {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-fit: contain;
  pointer-events: none;
}
.tankazon-store .layered-dispenser-thumb-bg,
.tankazon-store .layered-dispenser-thumb-fg,
.tankazon-store .layered-dispenser-thumb-light {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-fit: contain;
  pointer-events: none;
}
.tankazon-store .layered-dispenser-variant-art {
  width: 100%;
  height: 100%;
}
.tankazon-store .tankazon-item-art.layered-dispenser-thumb {
  height: 340px;
  padding: 0;
  border-radius: 8px;
}

.tankazon-store [data-tankazon-category="fish"] .shop-thumb,
.tankazon-store .shop-card[data-store-kind="fish"] .shop-thumb,
.tankazon-item-image.is-fish-preview,
.tankazon-item-image.is-fish-preview .tankazon-item-art {
  background:
    radial-gradient(ellipse at 50% 24%, rgba(190, 239, 255, .7), transparent 55%),
    linear-gradient(180deg, #258fc1 0%, #0e6294 58%, #08466d 100%);
}

.tankazon-store .shop-card-main {
  display: grid;
  gap: 6px;
}

.tankazon-store .shop-card-main strong,
.tankazon-store .shop-card h3,
.tankazon-store .shop-card h4 {
  color: #0f1111;
}

.tankazon-store .shop-behavior-warning {
  padding: 7px 9px;
  border: 1px solid #d13212;
  border-radius: 6px;
  background: #fff1f0;
  color: #b12704;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.3;
}

.tankazon-store .shop-theme-pill,
.tankazon-store .comfort-chip,
.tankazon-store .comfort-chip-label {
  border-radius: 4px;
}

.tankazon-store .shop-theme-pill {
  border-color: #ffd18a;
  background: #fff4df;
  color: #7a3f00;
}

.tankazon-store .shop-card .small-button,
.tankazon-store .shop-button-row button,
.tankazon-store .shop-card button:not(.store-scroll-button) {
  min-height: 34px;
  border: 1px solid #1d6fd6;
  border-radius: 999px;
  background: #2f8fff;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(60,110,170,.28);
  font-weight: 800;
}

.tankazon-store .shop-card .small-button:hover,
.tankazon-store .shop-button-row button:hover,
.tankazon-store .shop-card button:not(.store-scroll-button):hover {
  background: #217be3;
}

.tankazon-store .shop-card .small-button.warn,
.tankazon-store .shop-card button.warn {
  border-color: #d00;
  background: #fff;
  color: #b12704;
}

.tankazon-store .shop-note-card {
  border-radius: 7px;
  border: 1px solid #d5d9d9;
  background: #fff;
  color: #0f1111;
}

.tankazon-store .store-scroll-controls {
  right: 28px;
}

.tankazon-store .store-scroll-button {
  border-color: #a2a6ac;
  background: #fff;
  color: #0f1111;
  box-shadow: 0 2px 5px rgba(15,17,17,.18);
}

/* WebSurf toolbar icon: preserve the full orbit and fish silhouette inside the dock tile. */
#openStoreButton .websurf-toolbar-icon { width: 42px; height: 42px; object-fit: contain; }

@media (max-width: 1180px) {
  .tankazon-mainbar {
    grid-template-columns: 170px minmax(220px, 1fr) auto;
  }
  .tankazon-logo { width: 155px; }
  .tankazon-store .shop-section-cards {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 820px) {
  .tankazon-store { padding: 8px; }
  .tankazon-store .tankazon-panel {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    border-radius: 8px;
  }
  .tankazon-mainbar {
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }
  .tankazon-logo { width: 150px; height: 44px; }
  .tankazon-search { grid-template-columns: minmax(0,1fr) 44px; height: 40px; }
  .tankazon-store .store-coin-counter { display: none; }
  .tankazon-navrow { padding: 0 8px; gap: 6px; }
  .tankazon-all-categories { display: none; }
  .tankazon-store .store-tab-button { padding: 7px 9px; }
  .tankazon-promo-strip { min-height: 58px; padding: 10px 14px; }
  .tankazon-promo-strip small { display: none; }
  .tankazon-store .store-drawer { padding: 14px; }
  .tankazon-store .shop-toolbar { top: -14px; margin: -14px -14px 14px; padding: 10px 14px; }
  .tankazon-store .shop-section-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tankazon-store .shop-card { grid-template-rows: 110px auto auto; min-height: 295px; padding: 10px; }
  .tankazon-store .shop-thumb,
  .tankazon-store .decor-thumb { height: 110px; max-height: 110px; }
}

@media (max-width: 1080px) {
  .tankazon-store .tankazon-body { grid-template-columns: minmax(0,1fr) 290px; }
}
@media (max-width: 900px) {
  .tankazon-store .tankazon-body { grid-template-columns: 1fr; }
  .tankazon-cart { display:none; }
}


/* ========================================================================== */
/* BubbleBodega layout corrections 2026-09-03                                    */
/* ========================================================================== */
.tankazon-store .tankazon-panel {
  width: min(1600px, calc(100vw - 18px));
  height: min(97dvh, 1040px);
}

.tankazon-store .tankazon-header,
.tankazon-store .tankazon-mainbar,
.tankazon-store .tankazon-navrow {
  width: 100%;
  max-width: none;
}

.tankazon-store .tankazon-mainbar {
  grid-template-columns: 170px minmax(280px, 1fr) auto auto;
  min-height: 58px;
  padding: 6px 12px;
}

.tankazon-store .tankazon-logo {
  width: 154px;
  height: 46px;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

.tankazon-store .tankazon-body {
  grid-template-columns: minmax(0, 1fr) 340px;
  overflow: hidden;
}

/* One catalog scrollbar only. Individual category drawers never scroll. */
.tankazon-store .tankazon-catalog-area {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.tankazon-store .store-drawer {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-content: start;
  gap: 12px;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 18px 20px 28px;
}

.tankazon-store .store-drawer > .shop-toolbar,
.tankazon-store .store-drawer > .shop-section,
.tankazon-store .store-drawer > .empty-state {
  grid-column: 1 / -1;
}

.tankazon-store .store-drawer.tankazon-section-heading::before {
  grid-column: 1 / -1;
}

/* Equipment subsections contain their own product grids. */
.tankazon-store .shop-section-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Compact Amazon-like product tiles instead of full-width rows. */
.tankazon-store .shop-card {
  display: grid;
  grid-template-columns: 1fr !important;
  grid-template-rows: 108px minmax(0, 1fr) auto !important;
  align-items: start;
  gap: 7px;
  min-width: 0;
  min-height: 265px;
  padding: 10px;
  border-radius: 7px;
}

.tankazon-store .shop-thumb,
.tankazon-store .decor-thumb {
  width: 100% !important;
  height: 108px !important;
  max-height: 108px !important;
  padding: 4px;
  object-fit: contain;
}

.tankazon-store .shop-card-main {
  gap: 4px;
  font-size: 0.83rem;
}

.tankazon-store .shop-card .fish-meta,
.tankazon-store .shop-card .shop-meta {
  font-size: 0.75rem;
  line-height: 1.25;
}

.tankazon-store .shop-card .price-tag {
  display: inline-flex;
  margin-bottom: 5px;
  font-size: 0.78rem;
}

.tankazon-store .shop-card > :last-child {
  grid-column: 1 !important;
  width: 100%;
  justify-self: stretch;
  align-self: end;
}

.tankazon-store .shop-card .buy-button,
.tankazon-store .shop-card [data-buy-food],
.tankazon-store .shop-card [data-buy-medicine],
.tankazon-store .shop-card [data-buy-fish],
.tankazon-store .shop-card [data-buy-decor],
.tankazon-store .shop-card [data-buy-filter],
.tankazon-store .shop-card [data-buy-background],
.tankazon-store .shop-card [data-buy-water-kit],
.tankazon-store .shop-card [data-buy-auto-dispenser],
.tankazon-store .shop-card [data-buy-boat],
.tankazon-store .shop-card [data-buy-tank] {
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 0.76rem;
}

/* The catalog itself has a scrollbar, so the old floating scroll controls are redundant. */
.tankazon-store .store-scroll-controls {
  display: none !important;
}

/* Cart is fixed as part of the storefront and cannot be closed independently. */
.tankazon-store .tankazon-cart-heading {
  justify-content: flex-start;
}

.tankazon-store .tankazon-cart-item-actions button:not(.tankazon-cart-remove) {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  color: #0f1111 !important;
  background: #fff !important;
  border: 1px solid #888c8c !important;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.tankazon-store .tankazon-cart-item-actions span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  color: #0f1111;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .tankazon-store .tankazon-mainbar {
    grid-template-columns: 150px minmax(240px, 1fr) auto auto;
    min-height: 56px;
  }
  .tankazon-store .tankazon-logo {
    width: 138px;
    height: 44px;
  }
  .tankazon-store .store-drawer,
  .tankazon-store .shop-section-cards {
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  }
}

/* ========================================================================== */
/* BubbleBodega simplification pass 2026-09-03                                    */
/* ========================================================================== */

/* Hidden categories must actually stay hidden. The earlier grid !important
   rule was overriding the native [hidden] rule and caused multiple categories
   to appear at the same time. */
.tankazon-store .store-drawer[hidden] {
  display: none !important;
}

/* Denser Amazon-style catalog: image, name, price, button. */
.tankazon-store .store-drawer,
.tankazon-store .shop-section-cards {
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: 12px;
}

.tankazon-store .shop-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr !important;
  grid-template-rows: 118px auto auto !important;
  gap: 6px;
  min-height: 0 !important;
  height: auto;
  padding: 9px;
  overflow: visible;
  align-content: start;
}

.tankazon-store .shop-thumb,
.tankazon-store .decor-thumb {
  width: 100% !important;
  height: 118px !important;
  max-height: 118px !important;
  padding: 2px;
  object-fit: contain;
}

/* Product cards show only the information needed for browsing. */
.tankazon-store .shop-card-main {
  display: block;
  min-height: 34px;
  margin: 0;
  color: #0f1111;
  font-size: 0.78rem;
  line-height: 1.25;
}

.tankazon-store .shop-card-main > div:first-child {
  display: block;
}

.tankazon-store .shop-card-main strong,
.tankazon-store .shop-card > .shop-meta strong {
  display: block;
  color: #0f1111;
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 600;
}

.tankazon-store .shop-card-main .fish-meta,
.tankazon-store .shop-card-main > .fish-meta,
.tankazon-store .shop-card-main .shop-theme-pill,
.tankazon-store .shop-card > .shop-meta:not(.shop-card-main) > .fish-meta,
.tankazon-store .shop-card > .shop-meta:not(.shop-card-main) > div:not(.price-tag) {
  display: none !important;
}

.tankazon-store .shop-card > .shop-meta:last-child {
  display: grid;
  gap: 6px;
  align-content: end;
  margin-top: 0;
}

.tankazon-store .shop-card .price-tag {
  display: inline-block;
  width: max-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f1111;
  font-size: 0.82rem;
  line-height: 1.2;
  font-weight: 700;
}

.tankazon-store .shop-card .buy-button,
.tankazon-store .shop-card [data-buy-food],
.tankazon-store .shop-card [data-buy-medicine],
.tankazon-store .shop-card [data-buy-fish],
.tankazon-store .shop-card [data-buy-decor],
.tankazon-store .shop-card [data-buy-filter],
.tankazon-store .shop-card [data-buy-background],
.tankazon-store .shop-card [data-buy-water-kit],
.tankazon-store .shop-card [data-buy-auto-dispenser],
.tankazon-store .shop-card [data-buy-boat],
.tankazon-store .shop-card [data-buy-tank] {
  min-height: 30px;
  margin: 0;
  padding: 5px 8px;
  font-size: 0.72rem;
}


.tankazon-store .shop-card.tankazon-card-out-of-stock {
  background: linear-gradient(180deg, #eceff1 0%, #e1e4e6 100%) !important;
  border-color: #c9ced3 !important;
}

.tankazon-store .shop-card.tankazon-card-out-of-stock:hover,
.tankazon-store .shop-card.tankazon-card-out-of-stock:focus-within {
  background: linear-gradient(180deg, #eceff1 0%, #e1e4e6 100%) !important;
  border-color: #c9ced3 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  transform: none !important;
}

.tankazon-store .shop-card.tankazon-card-out-of-stock > img.shop-thumb,
.tankazon-store .shop-card.tankazon-card-out-of-stock > .shop-thumb,
.tankazon-store .shop-card.tankazon-card-out-of-stock > img.decor-thumb,
.tankazon-store .shop-card.tankazon-card-out-of-stock > .decor-thumb {
  filter: grayscale(0.35) saturate(0.8);
}

/* Locked merchandise is unavailable, not a progression instruction. */
.tankazon-store .tankazon-out-of-stock {
  background: #e7e7e7 !important;
  border-color: #d5d9d9 !important;
  color: #565959 !important;
  opacity: 1 !important;
  cursor: default !important;
}

/* Fish stats are kept out of the card's normal height. Hover directly over
   the fish image to reveal them in a high-contrast, readable overlay. */
.tankazon-store .shop-card .shop-stat-list {
  position: absolute;
  z-index: 5;
  top: 9px;
  left: 9px;
  right: 9px;
  height: 118px;
  display: grid !important;
  align-content: center;
  gap: 5px;
  margin: 0;
  padding: 10px;
  border-radius: 5px;
  background: rgba(42, 42, 42, 0.94);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.tankazon-store .shop-card .shop-thumb:hover + .shop-card-main .shop-stat-list,
.tankazon-store .shop-card .shop-thumb:focus + .shop-card-main .shop-stat-list {
  opacity: 1;
  visibility: visible;
}

.tankazon-store .shop-card .shop-stat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  color: #fff !important;
  font-size: 0.74rem;
  line-height: 1.2;
}

.tankazon-store .shop-card .shop-stat-label,
.tankazon-store .shop-card .shop-stat-value {
  color: #fff !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.tankazon-store .shop-card .shop-stat-value {
  text-align: right;
}

/* The cart is part of the storefront and has no independent close control. */
.tankazon-store .tankazon-cart-heading button {
  display: none !important;
}

@media (max-width: 1180px) {
  .tankazon-store .store-drawer,
  .tankazon-store .shop-section-cards {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  }
}


/* ========================================================================== */
/* BubbleBodega header + search corrections 2026-09-03                            */
/* ========================================================================== */
/* Force the BubbleBodega header to occupy one full-width row. Some of the base
   responsive store rules give .store-panel-header a two-column grid, which
   could leave the main bar/nav occupying only the left portion of the modal. */
.tankazon-store .tankazon-panel {
  grid-template-columns: minmax(0, 1fr) !important;
}

.tankazon-store .tankazon-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-auto-flow: row !important;
  width: 100% !important;
  min-width: 0;
  justify-self: stretch !important;
}

.tankazon-store .tankazon-mainbar,
.tankazon-store .tankazon-navrow {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0;
  justify-self: stretch !important;
}

/* Keep the search area useful across the full header instead of capping the
   header to the width of its controls. */
.tankazon-store .tankazon-mainbar {
  grid-template-columns: 170px minmax(280px, 1fr) auto auto !important;
}

/* All Categories is a real mutually-exclusive nav state. */
.tankazon-store .tankazon-all-categories.is-active {
  border-color: #ffb627;
  background: #071a2c;
  color: #ffb627;
  box-shadow: inset 0 -3px 0 #ff9900;
}

/* ========================================================================== */
/* BubbleBodega uniform product tiles 2026-09-03                                  */
/* Product browsing cards are intentionally limited to image, title, action. */
/* ========================================================================== */
.tankazon-store .store-drawer,
.tankazon-store .shop-section-cards,
.tankazon-store .pharmacy-result-cards {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  align-items: start;
}

.tankazon-store .shop-card {
  box-sizing: border-box;
  height: 244px !important;
  min-height: 244px !important;
  max-height: 244px !important;
  grid-template-rows: 154px 38px 34px !important;
  gap: 5px !important;
  padding: 8px !important;
  overflow: hidden;
}

.tankazon-store .shop-thumb,
.tankazon-store .decor-thumb {
  width: 100% !important;
  height: 154px !important;
  max-height: 154px !important;
  padding: 0 !important;
  object-fit: contain;
}

/* Keep exactly the product title in the text area. */
.tankazon-store .shop-card-main {
  display: block !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  overflow: hidden;
}

.tankazon-store .shop-card-main > *:not(:first-child),
.tankazon-store .shop-card-main > div:first-child > *:not(strong),
.tankazon-store .shop-card-main .shop-theme-pill,
.tankazon-store .shop-card-main .fish-meta,
.tankazon-store .shop-card-main .shop-meta,
.tankazon-store .shop-card-main small,
.tankazon-store .shop-card-main p,
.tankazon-store .shop-card-main span:not(.shop-stat-label):not(.shop-stat-value) {
  display: none !important;
}

.tankazon-store .shop-card-main strong,
.tankazon-store .shop-card > .shop-meta strong {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 !important;
  color: #0f1111 !important;
  font-size: 0.80rem !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}

/* Price, ownership counts, tags, descriptions, etc. stay off the tile. */
.tankazon-store .shop-card .price-tag,
.tankazon-store .shop-card > .shop-meta:last-child > :not(button):not(.shop-button-row):not(.shop-card-actions),
.tankazon-store .shop-card > .shop-meta:not(:last-child),
.tankazon-store .shop-card .comfort-chip,
.tankazon-store .shop-card .comfort-chip-label,
.tankazon-store .shop-card .shop-theme-pill {
  display: none !important;
}

.tankazon-store .shop-card > :last-child {
  display: grid !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: end !important;
  align-items: stretch !important;
}

.tankazon-store .shop-card .shop-button-row,
.tankazon-store .shop-card .shop-card-actions {
  display: grid !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tankazon-store .shop-card .buy-button,
.tankazon-store .shop-card [data-buy-food],
.tankazon-store .shop-card [data-buy-medicine],
.tankazon-store .shop-card [data-buy-fish],
.tankazon-store .shop-card [data-buy-decor],
.tankazon-store .shop-card [data-buy-filter],
.tankazon-store .shop-card [data-buy-background],
.tankazon-store .shop-card [data-buy-water-kit],
.tankazon-store .shop-card [data-buy-auto-dispenser],
.tankazon-store .shop-card [data-buy-boat],
.tankazon-store .shop-card [data-buy-tank] {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 4px 7px !important;
  margin: 0 !important;
  font-size: 0.75rem !important;
}

/* Match the hover-stat panel to the larger image area. */
.tankazon-store .shop-card .shop-stat-list {
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  height: 154px !important;
  padding: 11px !important;
  overflow: auto;
}

@media (max-width: 1180px) {
  .tankazon-store .store-drawer,
  .tankazon-store .shop-section-cards,
  .tankazon-store .pharmacy-result-cards {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  }
}

/* ========================================================================== */
/* BubbleBodega tile content correction 2026-09-03                                */
/* Exact card layout: image, item name, item cost, Add to Cart.                */
/* ========================================================================== */
.tankazon-store .shop-card {
  position: relative;
  height: 258px !important;
  min-height: 258px !important;
  max-height: 258px !important;
  grid-template-rows: 158px 52px 34px !important;
  gap: 5px !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.tankazon-store .shop-thumb,
.tankazon-store .decor-thumb {
  height: 158px !important;
  max-height: 158px !important;
}

/* The original descriptive content remains in the DOM for game logic and
   fish-image hover stats, but it must not occupy or scroll inside the tile. */
.tankazon-store .shop-card-main {
  position: absolute !important;
  inset: 8px 8px auto 8px !important;
  width: auto !important;
  height: 158px !important;
  min-height: 0 !important;
  max-height: 158px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 2;
}

.tankazon-store .shop-card-main > *:not(.shop-stat-list) {
  display: none !important;
}

.tankazon-store .tankazon-tile-info {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 2px;
  min-width: 0;
  height: 52px;
  overflow: hidden;
  align-content: start;
  color: #0f1111;
}

.tankazon-store .tankazon-tile-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #0f1111;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
}

.tankazon-store .tankazon-tile-cost {
  color: #0f1111;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Original price/name elements are hidden because the normalized tile info
   above is the only visible text content on a product card. */
.tankazon-store .shop-card .price-tag {
  display: none !important;
}

/* No card-level hover animation. Fish statistics may still appear when the
   user hovers the image itself. */
.tankazon-store .shop-card,
.tankazon-store .shop-card:hover,
.tankazon-store .shop-card:focus-within {
  transform: none !important;
}

.tankazon-store .shop-card:hover {
  box-shadow: 0 1px 2px rgba(15, 17, 17, 0.12) !important;
}

/* Nothing inside a product tile gets its own scrollbar. */
.tankazon-store .shop-card *,
.tankazon-store .shop-card-main,
.tankazon-store .shop-stat-list {
  overscroll-behavior: none;
}

.tankazon-store .shop-card .shop-stat-list {
  overflow: hidden !important;
}

/* ========================================================================== */
/* BubbleBodega product tile no-scroll correction 2026-09-03                      */
/* Tiles must contain all visible content without any internal scrolling.      */
/* ========================================================================== */
.tankazon-store .shop-card {
  height: 278px !important;
  min-height: 278px !important;
  max-height: 278px !important;
  grid-template-rows: 168px 62px 34px !important;
  gap: 5px !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.tankazon-store .shop-thumb,
.tankazon-store .decor-thumb {
  height: 168px !important;
  min-height: 168px !important;
  max-height: 168px !important;
  overflow: hidden !important;
}

.tankazon-store .shop-card-main {
  height: 168px !important;
  max-height: 168px !important;
  overflow: hidden !important;
}

.tankazon-store .tankazon-tile-info {
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  overflow: hidden !important;
  padding: 2px 1px 0 !important;
}

.tankazon-store .tankazon-tile-title,
.tankazon-store .tankazon-tile-cost,
.tankazon-store .shop-button-row,
.tankazon-store .shop-card-actions,
.tankazon-store .shop-card > :last-child {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.tankazon-store .shop-card .shop-stat-list {
  height: 160px !important;
  max-height: 160px !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Prevent browser wheel/touch scrolling from creating an inner scrollable box. */
.tankazon-store .shop-card,
.tankazon-store .shop-card * {
  scrollbar-width: none !important;
}
.tankazon-store .shop-card *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ========================================================================== */
/* BubbleBodega product tile hard no-scroll fix 2026-09-03                       */
/* Product cards are fixed visual tiles. Only the main catalog may scroll.    */
/* ========================================================================== */
.tankazon-store .shop-card {
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  grid-template-rows: 184px 70px 36px !important;
  gap: 5px !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.tankazon-store .shop-thumb,
.tankazon-store .decor-thumb {
  height: 184px !important;
  min-height: 184px !important;
  max-height: 184px !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.tankazon-store .shop-card-main {
  height: 184px !important;
  min-height: 0 !important;
  max-height: 184px !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.tankazon-store .tankazon-tile-info {
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* Kill every possible nested scrolling context inside a product tile. */
.tankazon-store .shop-card *,
.tankazon-store .shop-card *::before,
.tankazon-store .shop-card *::after {
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none !important;
  scrollbar-width: none !important;
}

.tankazon-store .shop-card *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Hover statistics are an overlay, not a scrollable panel. */
.tankazon-store .shop-card .shop-stat-list {
  height: 176px !important;
  max-height: 176px !important;
  overflow: hidden !important;
}

/* ========================================================================== */
/* BubbleBodega definitive tile scrolling fix                                     */
/* Only #tankazonCatalogArea may scroll vertically in the product region.     */
/* ========================================================================== */
.tankazon-store .shop-card,
.tankazon-store .shop-card *,
.tankazon-store .shop-card *::before,
.tankazon-store .shop-card *::after {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none !important;
  scrollbar-width: none !important;
}

.tankazon-store .shop-card {
  height: 306px !important;
  min-height: 306px !important;
  max-height: 306px !important;
  touch-action: none !important;
}

.tankazon-store .shop-card *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.tankazon-store .shop-card .shop-stat-list {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* ========================================================================== */
/* BubbleBodega tile fit correction: cards contain their content, never scroll.   */
/* ========================================================================== */
.tankazon-store .shop-card {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 196px 58px 38px !important;
  gap: 7px !important;
  height: 323px !important;
  min-height: 323px !important;
  max-height: 323px !important;
  padding: 10px !important;
  overflow: clip !important;
  overflow-x: clip !important;
  overflow-y: clip !important;
  overscroll-behavior: none !important;
  touch-action: auto !important;
}

.tankazon-store .shop-card > img.shop-thumb,
.tankazon-store .shop-card > img.decor-thumb,
.tankazon-store .shop-card > .shop-thumb,
.tankazon-store .shop-card > .decor-thumb {
  box-sizing: border-box !important;
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: 100% !important;
  height: 196px !important;
  min-height: 196px !important;
  max-height: 196px !important;
  object-fit: contain !important;
  overflow: clip !important;
}

/* The original descriptive markup is source data only. It cannot create a
   nested layout/scrolling surface inside the normalized BubbleBodega card. */
.tankazon-store .shop-card > .shop-meta:not(.shop-card-actions),
.tankazon-store .shop-card > .shop-card-main {
  display: none !important;
}

.tankazon-store .tankazon-tile-info {
  box-sizing: border-box !important;
  grid-row: 2 !important;
  grid-column: 1 !important;
  display: grid !important;
  grid-template-rows: 36px 18px !important;
  gap: 4px !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  padding: 0 1px !important;
  overflow: clip !important;
}

.tankazon-store .tankazon-tile-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  width: 100% !important;
  max-height: 36px !important;
  overflow: hidden !important;
  color: #0f1111 !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  line-height: 18px !important;
}

.tankazon-store .tankazon-tile-cost {
  height: 18px !important;
  overflow: hidden !important;
  color: #0f1111 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 18px !important;
}

.tankazon-store .shop-card > .shop-card-actions,
.tankazon-store .shop-card > .shop-meta:last-child {
  box-sizing: border-box !important;
  grid-row: 3 !important;
  grid-column: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  overflow: clip !important;
}

.tankazon-store .shop-card > .shop-card-actions > .price-tag,
.tankazon-store .shop-card > .shop-meta:last-child > .price-tag {
  display: none !important;
}

.tankazon-store .shop-card > .shop-card-actions .shop-button-row,
.tankazon-store .shop-card > .shop-meta:last-child .shop-button-row {
  display: grid !important;
  width: 100% !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: clip !important;
}

.tankazon-store .shop-card > .shop-card-actions button,
.tankazon-store .shop-card > .shop-meta:last-child button,
.tankazon-store .shop-card > button {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* No product-card descendant is permitted to be an independent scroll box. */
.tankazon-store .shop-card,
.tankazon-store .shop-card * {
  scrollbar-width: none !important;
  overscroll-behavior: none !important;
}
.tankazon-store .shop-card *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* BubbleBodega item name readability tweak */
.tankazon-store .tankazon-tile-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
}

/* BubbleBodega equipment purchase button visibility fix */
.tankazon-store #equipmentShop .shop-card > .shop-card-actions {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  grid-row: 3 !important;
  grid-column: 1 !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  align-self: end !important;
  overflow: visible !important;
}

.tankazon-store #equipmentShop .shop-card > .shop-card-actions .shop-button-row {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 38px !important;
  overflow: visible !important;
}

.tankazon-store #equipmentShop .shop-card [data-buy-filter],
.tankazon-store #equipmentShop .shop-card [data-buy-background],
.tankazon-store #equipmentShop .shop-card [data-buy-water-kit],
.tankazon-store #equipmentShop .shop-card [data-buy-auto-dispenser],
.tankazon-store #equipmentShop .shop-card [data-buy-submarine],
.tankazon-store #equipmentShop .shop-card [data-buy-boat],
.tankazon-store #equipmentShop .shop-card [data-buy-tank] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
}

/* BubbleBodega keeps one primary purchase action per equipment tile. */
.tankazon-store #equipmentShop .shop-card .shop-button-row > :not([data-buy-filter]):not([data-buy-background]):not([data-buy-water-kit]):not([data-buy-auto-dispenser]):not([data-buy-submarine]):not([data-buy-boat]):not([data-buy-tank]) {
  display: none !important;
}

#decorShop .shop-card [data-buy-background] {
  display: grid !important;
}


/* BubbleBodega tile price uses the in-game coin icon plus numeric cost. */
.tankazon-store .tankazon-tile-cost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 20px !important;
  line-height: 20px !important;
  overflow: hidden !important;
}
.tankazon-store .tankazon-tile-cost-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  object-fit: contain !important;
  flex: 0 0 16px !important;
}
.tankazon-store .tankazon-tile-cost-value {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #0f1111 !important;
}

/* ========================================================================== */
/* BubbleBodega header sizing is defined once in the main store shell above. */

/* BubbleBodega committed search results: product matches only. */
.tankazon-store .store-drawer.tankazon-search-results > .shop-toolbar,
.tankazon-store .store-drawer.tankazon-search-results > .shop-section-heading,
.tankazon-store .store-drawer.tankazon-search-results > .empty-state {
  display: none !important;
}


/* BubbleBodega cart subtotal coin icon */
.tankazon-store .tankazon-subtotal-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tankazon-store .tankazon-subtotal-value img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* BubbleBodega category drawers use the same full-width divider treatment as
   All Categories while keeping each subsection independently virtualizable. */
.tankazon-store .store-subcategory-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.tankazon-store .store-subcategory-section + .store-subcategory-section {
  margin-top: 8px;
}

.tankazon-store .store-subcategory-section > .shop-section-heading {
  margin-inline: -20px;
  padding: 10px 20px;
  background: #fff;
  border-block: 1px solid #d5d9d9;
  box-shadow: 0 2px 7px rgba(15, 17, 17, 0.07);
}

.tankazon-store .store-subcategory-section > .shop-section-heading h3,
.tankazon-store .store-subcategory-section > .shop-section-heading p {
  margin: 0;
}

.tankazon-store .store-subcategory-section > .shop-section-heading p {
  margin-top: 2px;
}

/* The Custom storage counter belongs in its section's white divider, not in
   the product grid where it consumes a tile. */
.tankazon-store .store-subcategory-section > .shop-section-heading.has-heading-extra {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title extra" "description extra";
  align-items: center;
}

.tankazon-store .store-subcategory-section > .shop-section-heading.has-heading-extra h3 {
  grid-area: title;
}

.tankazon-store .store-subcategory-section > .shop-section-heading.has-heading-extra p {
  grid-area: description;
}

.tankazon-store .custom-content-storage-meter-heading {
  grid-area: extra;
  min-width: 230px;
  display: grid;
  grid-template-columns: auto 76px;
  align-items: center;
  gap: 8px;
  color: #44515a;
  font-size: 0.72rem;
  white-space: nowrap;
}

.tankazon-store .custom-content-storage-meter-heading strong {
  color: #0f1111;
}

.tankazon-store .custom-content-storage-meter-heading progress {
  width: 76px;
  height: 7px;
}

/* Backgrounds and substrates share the normal BubbleBodega card controls.
   Keep their purchase row explicitly visible after the generic tile cleanup. */
.tankazon-store #decorShop .shop-card > .shop-card-actions {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* The generic tile cleanup hides arbitrary action-row divs. Background and
   substrate cards use that normal action-row structure, so restore the row
   itself as well as its button. */
.tankazon-store #decorShop .shop-card > .shop-card-actions > .shop-button-row {
  display: grid !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.tankazon-store #decorShop .shop-card [data-buy-background],
.tankazon-store #decorShop .shop-card [data-buy-substrate] {
  display: grid !important;
  place-items: center;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
  background: #2f89ef !important;
}

.tankazon-store .substrate-shop-thumb {
  display: grid;
  place-items: center;
  padding: 6px !important;
  background: transparent !important;
}

.tankazon-store .substrate-shop-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}


/* BubbleBodega exact-search visibility.
   Explicit class beats legacy card display rules. */
.tankazon-store .shop-card.tankazon-search-hidden {
  display: none !important;
}

/* Product cards are visual tiles, never independent scroll surfaces. */
.tankazon-store .shop-card,
.tankazon-store .shop-card * {
  overscroll-behavior: none !important;
}

.tankazon-store .shop-card {
  overflow: clip !important;
}

.tankazon-store .shop-card .shop-stat-list,
.tankazon-store .shop-card .tankazon-fish-hover-stats,
.tankazon-store .shop-card .tankazon-tile-info {
  overflow: clip !important;
}


/* BubbleBodega subtotal alignment */
.tankazon-store .tankazon-cart-subtotal {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
}

.tankazon-store .tankazon-subtotal-value {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1 !important;
}

.tankazon-store .tankazon-subtotal-value img {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  object-fit: contain !important;
  margin: 0 !important;
  vertical-align: middle !important;
  flex: 0 0 17px !important;
}

.tankazon-store #tankazonCartSubtotal {
  display: inline-block !important;
  line-height: 17px !important;
}


/* BubbleBodega catalog scrolling consistency
   Names, prices, coin icons and buttons must not block wheel scrolling. */
.tankazon-store #tankazonCatalogArea,
.tankazon-store #tankazonCatalogArea * {
  overscroll-behavior: auto !important;
}

.tankazon-store .shop-card,
.tankazon-store .shop-card *,
.tankazon-store .tankazon-tile-info,
.tankazon-store .tankazon-tile-price,
.tankazon-store .tankazon-tile-price *,
.tankazon-store .tankazon-tile-title {
  touch-action: auto !important;
}

.tankazon-store .tankazon-tile-title,
.tankazon-store .tankazon-tile-price,
.tankazon-store .tankazon-tile-price img,
.tankazon-store .tankazon-tile-price span {
  pointer-events: auto !important;
}


/* BubbleBodega cart item coin-price treatment */
.tankazon-store .tankazon-cart-item-price {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: fit-content;
  line-height: 1 !important;
  font-size: 0.82rem;
}

.tankazon-store .tankazon-cart-item-price img {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  object-fit: contain !important;
  margin: 0 !important;
  flex: 0 0 15px !important;
}

.tankazon-store .tankazon-cart-item-price span {
  line-height: 15px !important;
}

.tankazon-store .tankazon-cart-item-price-each {
  font-weight: 700;
}


@media (max-width: 860px) {
  .edit-tray-mode-header,
  .edit-decor-tray-header,
  .edit-fish-tray-header {
    gap: 8px;
  }

  .edit-overlay-mode-tabs {
    flex: 1 1 100%;
    order: 1;
  }

  .edit-tray-done-button {
    order: 2;
    margin-left: auto;
  }

  .edit-decor-tray-tabs,
  .edit-fish-tray-tabs {
    justify-content: flex-start;
    width: 100%;
  }
}

/* Unified inline tank editor */
.edit-tank-tray {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.edit-tank-tray .edit-tray-mode-header,
.edit-tank-tray .edit-tank-tray-header,
.edit-tank-tray .edit-tank-tray-scroller {
  grid-column: 1 / -1;
}

.edit-tank-tray-header {
  display: flex;
  align-items: center;
  min-width: 0;
}

.edit-tank-tray-tabs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  margin: 0 auto;
  padding: 1px;
  overflow-x: auto;
  scrollbar-width: none;
}

.edit-tank-tray-tabs::-webkit-scrollbar {
  display: none;
}

.edit-tank-tray-tab {
  flex: 0 0 auto;
  min-width: 102px;
  min-height: 28px;
  padding: 4px 14px;
  border: 1px solid rgba(188, 225, 246, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(21, 55, 78, 0.72), rgba(8, 30, 47, 0.74));
  color: rgba(224, 244, 255, 0.78);
  font: 800 0.72rem/1 var(--ui-font-stack);
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease, color 140ms ease;
}

.edit-tank-tray-tab:hover,
.edit-tank-tray-tab:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(143, 231, 255, 0.54);
  color: #fff;
  filter: brightness(1.1);
}

.edit-tank-tray-tab.is-active {
  border-color: rgba(185, 244, 255, 0.84);
  background: linear-gradient(180deg, rgba(23, 107, 139, 0.94), rgba(11, 61, 88, 0.96));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 12px rgba(99, 221, 255, 0.16);
}

.edit-tank-tray-scroller {
  min-width: 0;
  min-height: 118px;
  max-height: 196px;
  overflow: auto;
  padding: 2px 4px 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(188, 225, 246, 0.34) transparent;
}

.edit-tank-tray-panel {
  width: 100%;
  min-width: 0;
}

.edit-tank-tray-panel[hidden] {
  display: none !important;
}

.edit-tank-tray [data-tank-tray-panel="background"] {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.35fr);
  gap: 12px;
  align-items: start;
}

.edit-tank-tray [data-tank-tray-panel="gravel"] {
  display: block;
}

.edit-tank-tray [data-tank-tray-panel="equipment"] {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.edit-tank-tray #editTankBackgroundColorPanel,
.edit-tank-tray #editTankCustomGravelPanel,
.edit-tank-tray #editTankBackgroundList,
.edit-tank-tray #editTankFilterList {
  min-width: 0;
}

.edit-tank-tray .background-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 2px 5px;
}

.edit-tank-tray .background-card {
  flex: 0 0 210px;
  min-width: 210px;
  max-width: 210px;
  min-height: 106px;
  padding: 8px;
}

.edit-tank-tray .background-card .background-thumb,
.edit-tank-tray .background-card .scene-thumb {
  max-height: 72px;
}

.edit-tank-tray .custom-gravel-panel,
.edit-tank-tray .background-solid-color-panel {
  margin: 0;
}

.edit-tank-tray .custom-gravel-layer-grid,
.edit-tank-tray .background-gradient-grid {
  gap: 7px;
}

.edit-tank-tray .custom-gravel-layer-card,
.edit-tank-tray .background-solid-color-card {
  padding: 8px;
}

.edit-tank-tray .custom-gravel-color-swatches {
  gap: 4px;
}

@media (max-width: 980px) {
  .edit-tank-tray [data-tank-tray-panel="background"] {
    grid-template-columns: 1fr;
  }

  .edit-tank-tray-scroller {
    max-height: 230px;
  }
}


/* Compact unified Fish / Decor / Tank editor */
#toolbarEditMenu {
  display: none !important;
}

.edit-tray-mode-header {
  justify-content: center;
  gap: 8px;
}

.edit-overlay-mode-tabs {
  flex: 0 1 auto;
  margin: 0 auto;
  gap: 4px;
  padding: 3px;
  border-radius: 14px;
}

.edit-overlay-mode-tab {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.74rem;
}

.edit-overlay-mode-icon {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 22px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}

.edit-tray-done-button {
  min-width: 58px;
  min-height: 26px;
  padding: 4px 11px;
  font-size: 0.68rem;
}

.edit-decor-tray-tab,
.edit-fish-tray-tab,
.edit-tank-tray-tab {
  min-height: 23px;
  padding: 3px 9px;
  font-size: 0.64rem;
}

.edit-decor-tray-tab {
  min-width: 64px;
}

.edit-fish-tray-tab {
  min-width: 72px;
}

.edit-tank-tray-tab {
  min-width: 76px;
}

/* Keep Tank editing inside the same-height horizontal tray. */
.edit-tank-tray {
  gap: 5px;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.edit-tank-tray-header {
  min-height: 23px;
  max-height: 23px;
}

.edit-tank-tray-tabs {
  gap: 4px;
  margin: 0 auto;
  padding: 0;
}

.edit-tank-tray-scroller {
  min-height: 92px;
  height: 92px;
  max-height: 92px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 2px;
}

/* Every Tank editor view occupies the complete content row. The controls
   inside it may scroll horizontally, but must never collapse to their
   intrinsic one-line height. */
.edit-tank-tray > .edit-tank-tray-scroller {
  display: flex;
  align-items: stretch;
  min-height: 0 !important;
  height: 100% !important;
}

.edit-tank-tray > .edit-tank-tray-scroller > .edit-tank-tray-panel {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: 100% !important;
}

/* Tank mode content must use the tray's full content height.  The shared
   background-card styles were authored for compact shop rows and otherwise
   collapse these controls to an 88px strip inside the 218px editor tray. */
.edit-tank-tray .background-color-panel-shell,
.edit-tank-tray .custom-gravel-panel-shell,
.edit-tank-tray .edit-tank-background-control,
.edit-tank-tray #editTankBackgroundList,
.edit-tank-tray #editTankBackgroundColorPanel,
.edit-tank-tray #editTankCustomGravelPanel,
.edit-tank-tray .custom-gravel-layer-list {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

.edit-tank-tray .background-color-panel-shell,
.edit-tank-tray .custom-gravel-panel-shell {
  flex: 1 1 auto;
}

.edit-tank-tray #editTankBackgroundList .background-card,
.edit-tank-tray .custom-gravel-layer-card {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch;
}

.edit-tank-tray [data-tank-tray-panel="background"] .edit-tank-background-workspace,
.edit-tank-tray [data-tank-tray-panel="gravel"] #editTankCustomGravelPanel,
.edit-tank-tray [data-tank-tray-panel="gravel"] .custom-gravel-panel-shell,
.edit-tank-tray [data-tank-tray-panel="gravel"] .custom-gravel-layer-list {
  min-height: 0 !important;
  height: 100% !important;
}

.edit-tank-tray #editTankBackgroundList,
.edit-tank-tray #editTankBackgroundColorPanel {
  min-height: 0 !important;
  height: 100% !important;
}

.edit-tank-tray-panel {
  height: 88px;
  min-height: 88px;
  max-height: 88px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.edit-tank-tray [data-tank-tray-panel="background"] {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(460px, 1.28fr);
  gap: 6px;
  align-items: stretch;
}

.edit-tank-tray [data-tank-tray-panel="gravel"] {
  display: block;
}

.edit-tank-tray [data-tank-tray-panel="equipment"] {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.edit-tank-tray #editTankBackgroundColorPanel,
.edit-tank-tray #editTankCustomGravelPanel,
.edit-tank-tray #editTankBackgroundList,
.edit-tank-tray #editTankFilterList {
  height: 88px;
  max-height: 88px;
  overflow-x: auto;
  overflow-y: hidden;
}

.edit-tank-tray .background-grid {
  height: 88px;
  gap: 6px;
  padding: 0 1px 2px;
  align-items: stretch;
}

.edit-tank-tray .background-card {
  flex: 0 0 148px;
  width: 148px;
  min-width: 148px;
  max-width: 148px;
  height: 82px;
  min-height: 82px;
  max-height: 82px;
  padding: 5px;
  border-radius: 11px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 23px;
  gap: 3px 6px;
  align-items: center;
  box-sizing: border-box;
}

.edit-tank-tray .background-card.local-background-card {
  flex-basis: 190px;
  width: 190px;
  min-width: 190px;
  max-width: 190px;
}

.edit-tank-tray .background-card .background-thumb,
.edit-tank-tray .background-card .scene-thumb {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 48px;
  height: 68px;
  max-height: 68px;
  object-fit: cover;
  border-radius: 8px;
}

.edit-tank-tray .background-card > div:not(.shop-button-row) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  align-self: end;
}

.edit-tank-tray .background-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.67rem;
  line-height: 1.05;
}

.edit-tank-tray .background-card .fish-meta {
  display: none;
}

.edit-tank-tray .background-card > button,
.edit-tank-tray .background-card .shop-button-row {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.edit-tank-tray .background-card button,
.edit-tank-tray .small-button {
  min-height: 21px;
  padding: 2px 6px;
  border-radius: 7px;
  font-size: 0.58rem;
  line-height: 1;
}

.edit-tank-tray .background-card .shop-button-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
}

.edit-tank-tray .background-card .shop-button-row button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.edit-tank-tray .background-color-panel-shell,
.edit-tank-tray .custom-gravel-panel-shell {
  height: 88px;
  max-height: 88px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
}

.edit-tank-tray .settings-toggle-row.background-solid-toggle-row {
  flex: 0 0 116px;
  min-height: 36px;
  height: 36px;
  padding: 4px 6px;
  border-radius: 9px;
  gap: 5px;
}

.edit-tank-tray .settings-toggle-copy {
  gap: 0;
}

.edit-tank-tray .settings-toggle-label {
  font-size: 0.62rem;
  line-height: 1;
}

.edit-tank-tray .settings-toggle-note,
.edit-tank-tray .settings-subsection-heading {
  display: none;
}

.edit-tank-tray .background-solid-toggle-controls {
  gap: 4px;
}

.edit-tank-tray .settings-checkbox {
  width: 17px;
  height: 17px;
}

.edit-tank-tray .background-solid-color-card {
  flex: 0 0 auto;
  width: auto;
  min-width: 430px;
  max-width: none;
  height: 82px;
  min-height: 82px;
  max-height: 82px;
  padding: 5px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  box-sizing: border-box;
}

/* The compact tank tray is only 82px tall. Keep the color controls on one
   horizontal row so the actual swatches are not clipped below the tray. */
.edit-tank-tray .background-color-preview-header {
  flex: 0 0 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
}

.edit-tank-tray .background-mode-preview {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

.edit-tank-tray .background-solid-color-card > .custom-gravel-choice-summary {
  flex: 0 0 72px;
  min-width: 72px;
  min-height: 18px;
  margin: 0;
  gap: 1px;
  font-size: 0.58rem;
}

.edit-tank-tray .background-solid-color-card > .custom-gravel-swatches {
  flex: 0 0 300px;
  width: 300px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 1px 5px;
}

.edit-tank-tray .background-solid-color-card > .background-gradient-grid {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 4px;
}

.edit-tank-tray .background-solid-color-card .background-gradient-color-group {
  flex: 0 0 330px;
  width: 330px;
  min-width: 330px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.edit-tank-tray .background-solid-color-card .background-gradient-color-group .custom-gravel-choice-summary {
  flex: 0 0 82px;
  min-width: 82px;
  min-height: 18px;
  margin: 0;
  gap: 1px;
  font-size: 0.58rem;
}

.edit-tank-tray .background-solid-color-card .background-gradient-color-group .custom-gravel-swatches {
  flex: 0 0 232px;
  width: 232px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 1px 5px;
}

.edit-tank-tray .background-solid-color-card > .shop-button-row {
  flex: 0 0 auto;
  margin: 0;
}

.edit-tank-tray .background-color-preview-header,
.edit-tank-tray .custom-gravel-choice-summary {
  min-height: 18px;
  margin: 0;
  font-size: 0.58rem;
}

.edit-tank-tray .custom-gravel-layer-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  height: 88px;
  overflow-x: auto;
  overflow-y: hidden;
}

.edit-tank-tray .custom-gravel-layer-card {
  flex: 0 0 250px;
  width: 250px;
  min-width: 250px;
  height: 82px;
  min-height: 82px;
  max-height: 82px;
  padding: 5px;
  border-radius: 10px;
  overflow: hidden;
  gap: 3px;
  box-sizing: border-box;
}

.edit-tank-tray .custom-gravel-layer-header {
  min-height: 18px;
  margin-bottom: 2px;
}

.edit-tank-tray .custom-gravel-layer-header strong,
.edit-tank-tray .custom-gravel-choice-summary strong,
.edit-tank-tray .custom-gravel-choice-summary span,
.edit-tank-tray .custom-gravel-colorize-toggle {
  font-size: 0.58rem;
}

.edit-tank-tray .custom-gravel-swatches {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 0;
}

.edit-tank-tray .custom-gravel-color-swatch {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border-radius: 5px;
}

.edit-tank-tray .custom-gravel-colorize-toggle {
  min-height: 18px;
  margin-top: 1px;
}

@media (max-width: 860px) {
  .edit-overlay-mode-tabs {
    flex: 0 1 auto;
    order: 1;
    margin: 0 auto;
  }

  .edit-overlay-mode-tab {
    min-width: 78px;
    min-height: 28px;
    padding: 3px 7px;
    gap: 4px;
    font-size: 0.68rem;
  }

  .edit-overlay-mode-icon {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }

  .edit-tank-tray [data-tank-tray-panel="background"] {
    grid-template-columns: 280px minmax(380px, 1fr);
  }
}


/* Unified fish-care tray -------------------------------------------------- */
#toolbarCareMenu {
  display: none !important;
}

#feedButton,
#foodTray,
#medicineTray .edit-decor-tray-arrow {
  display: none !important;
}

/* Keep the merged care tray at the same height as the current horizontal tray. */
#medicineTray .edit-decor-tray-scroller {
  width: 100%;
  min-width: 0;
  min-height: 98px;
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

#medicineTray .edit-decor-tray-scroller::-webkit-scrollbar {
  height: 0;
}

#medicineTray {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(calc(100vw - 30px), calc(var(--care-tray-content-width, 624px) + 24px));
  max-width: calc(100vw - 30px);
}

.care-tray-content {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 98px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, var(--care-food-min-width, 248px)) 1px minmax(0, var(--care-medicine-min-width, 163px)) 1px minmax(0, var(--care-tools-min-width, 163px));
  gap: 10px;
  align-items: stretch;
  padding: 0 4px;
}

.care-tray-food,
.care-tray-medical,
.care-tray-tools {
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 17px minmax(0, 1fr);
  gap: 3px;
  padding: 3px 0 2px;
}

.care-tray-heading-row {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.care-tray-inline-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.28));
}

.care-tray-heading {
  align-self: center;
  color: rgba(143, 215, 248, 0.86);
  font: 900 0.58rem/1 var(--ui-font-stack);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.care-tray-food-items,
.care-tray-medical-items {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 7px;
  overflow: visible;
  scrollbar-width: none;
}

.care-tray-food-items::-webkit-scrollbar,
.care-tray-medical-items::-webkit-scrollbar {
  display: none;
}

.care-medicine-card {
  position: relative;
  width: 78px;
  min-width: 0;
  max-width: 78px;
  height: 72px;
  flex: 1 1 78px;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 1px;
  padding: 5px 5px 6px;
  border: 1px solid rgba(188, 225, 246, 0.18);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--tray-accent, #83d8f6) 18%, transparent), transparent 44%),
    linear-gradient(180deg, rgba(42, 72, 94, 0.82), rgba(15, 37, 55, 0.88));
  color: #eefaff;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 140ms ease, border-color 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.care-medicine-card-image {
  width: 37px;
  height: 37px;
  max-width: 90%;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.28));
}

/* Store cards keep the source artwork at its natural scale. In the compact
   care toolbar, expand food art so its visible pixels fill the tile instead
   of being lost inside transparent sprite padding. */
.care-food-card .care-medicine-card-image {
  transform: scale(1.7);
  transform-origin: center;
}

.care-medicine-card-name {
  width: 100%;
  overflow: hidden;
  color: #eefaff;
  font: 800 0.54rem/1.05 var(--ui-font-stack);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-medicine-card-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 20px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 1px solid rgba(188, 225, 246, 0.25);
  border-radius: 999px;
  background: rgba(5, 25, 42, 0.84);
  color: rgba(239, 249, 255, 0.92);
  font: 900 0.49rem/1 var(--ui-font-stack);
  box-sizing: border-box;
}

.care-medicine-card:hover,
.care-medicine-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(132, 231, 255, 0.62);
  filter: brightness(1.08);
}

.care-medicine-card.is-active {
  border-color: rgba(255, 222, 117, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px rgba(255, 207, 71, 0.12),
    0 0 16px rgba(255, 207, 71, 0.18);
}

.care-tray-empty-medical {
  width: 100%;
  min-width: 0;
  height: 72px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px dashed rgba(188, 225, 246, 0.2);
  border-radius: 13px;
  color: rgba(172, 208, 228, 0.72);
  background:
    radial-gradient(circle at 50% 0%, rgba(110, 194, 230, 0.06), transparent 50%),
    rgba(2, 18, 31, 0.2);
}

.care-tray-empty-copy-wrap {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.care-tray-empty-icon {
  width: 20px;
  height: 24px;
  flex: 0 0 auto;
  opacity: 0.72;
}

.care-tray-empty-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: left;
}

.care-tray-empty-copy strong {
  color: rgba(229, 244, 252, 0.78);
  font: 800 0.6rem/1 var(--ui-font-stack);
  white-space: nowrap;
}

.care-tray-empty-copy small {
  color: rgba(178, 211, 229, 0.58);
  font: 650 0.48rem/1.08 var(--ui-font-stack);
}

.care-tray-empty-shop-button {
  min-width: 94px;
  min-height: 26px;
  padding: 5px 10px;
  border: 1px solid rgba(111, 213, 255, 0.5);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(98, 212, 255, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(24, 100, 151, 0.9), rgba(9, 55, 91, 0.95));
  color: #f4fbff;
  font: 850 0.53rem/1 var(--ui-font-stack);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 140ms ease, border-color 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.care-tray-empty-shop-button:hover,
.care-tray-empty-shop-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(132, 231, 255, 0.86);
  filter: brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 12px rgba(47, 196, 255, 0.16);
}

.care-tray-divider {
  width: 1px;
  align-self: stretch;
  margin: 9px 0 6px;
  background: linear-gradient(180deg, transparent, rgba(162, 219, 244, 0.38) 17%, rgba(162, 219, 244, 0.38) 83%, transparent);
}

.care-tray-tools {
  min-width: 0;
}

.care-tray-tool-row {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.care-tool-tile {
  min-width: 0;
  height: 72px;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 1px;
  padding: 5px 6px 6px;
  border: 1px solid rgba(111, 213, 255, 0.38);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 15%, rgba(98, 212, 255, 0.2), transparent 46%),
    linear-gradient(180deg, rgba(23, 91, 137, 0.82), rgba(10, 48, 82, 0.92));
  color: #f4fbff;
  font: 850 0.62rem/1 var(--ui-font-stack);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 16px rgba(38, 189, 255, 0.07);
  transition: transform 140ms ease, border-color 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.care-tool-tile img,
.care-tool-emoji {
  width: 43px;
  height: 43px;
  max-width: 90%;
  display: grid;
  place-items: center;
  object-fit: contain;
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.28));
}

.care-tool-tile:hover,
.care-tool-tile:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(132, 231, 255, 0.82);
  filter: brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 12px rgba(47, 196, 255, 0.15);
}

.care-tool-tile.is-active {
  border-color: rgba(255, 222, 117, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px rgba(255, 207, 71, 0.12),
    0 0 18px rgba(255, 207, 71, 0.2);
}

/* Shared edit tray dimensions and simplified Tank editor */
:root {
  --bubble-edit-tray-width: min(92vw, 1560px);
  --bubble-edit-tray-height: 218px;
}

/* Keep the editor useful in short desktop windows: the full-height tray used
   to cover almost the entire aquarium and leave a large empty area beneath
   its compact controls. */
@media (min-width: 801px) and (max-height: 520px) {
  :root {
    --bubble-edit-tray-height: 154px;
  }
}

#editFishTray,
#editDecorTray,
#editEquipmentTray,
#editTankTray {
  width: var(--bubble-edit-tray-width);
  height: var(--bubble-edit-tray-height);
  min-height: var(--bubble-edit-tray-height);
  max-height: var(--bubble-edit-tray-height);
  box-sizing: border-box;
}

#editFishTray,
#editDecorTray {
  grid-template-rows: auto auto minmax(0, 1fr);
}

#editFishTray .edit-decor-tray-scroller,
#editDecorTray .edit-decor-tray-scroller {
  height: 100%;
  min-height: 0;
  align-items: center;
}

#editFishTray .edit-decor-tray-arrow,
#editDecorTray .edit-decor-tray-arrow {
  height: min(100%, 104px);
}

.edit-tank-tray {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 5px;
}

.edit-tank-tray-header {
  min-height: 23px;
  max-height: 23px;
}

.edit-tank-tray-tabs {
  margin: 0 auto;
  overflow: visible;
}

.edit-tank-tray-tab {
  min-width: 90px;
}

.edit-tank-tray-scroller {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 0 2px 2px;
}

.edit-tank-tray-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.edit-tank-background-panel {
  display: grid !important;
  grid-template-rows: 27px minmax(0, 1fr) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
}

.edit-tank-background-mode-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.edit-tank-background-mode-tab {
  min-width: 76px;
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid rgba(188, 225, 246, 0.14);
  border-radius: 999px;
  background: rgba(8, 25, 39, 0.5);
  color: rgba(216, 241, 255, 0.74);
  font: 800 0.64rem/1 var(--ui-font-stack);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.edit-tank-background-mode-tab:hover,
.edit-tank-background-mode-tab:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(97, 238, 235, 0.54);
  color: #f4ffff;
}

.edit-tank-background-mode-tab.is-active {
  border-color: rgba(85, 242, 237, 0.72);
  background: linear-gradient(180deg, rgba(16, 80, 99, 0.82), rgba(7, 47, 69, 0.86));
  color: #dffffe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 12px rgba(74, 238, 236, 0.15);
}

.edit-tank-background-workspace {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.edit-tank-tray #editTankBackgroundColorPanel,
.edit-tank-tray #editTankBackgroundList {
  width: 100%;
  height: 100%;
  max-height: none;
  min-width: 0;
  overflow: hidden;
}

.edit-tank-tray #editTankBackgroundColorPanel[hidden],
.edit-tank-tray #editTankBackgroundList[hidden] {
  display: none !important;
}

.edit-tank-tray #editTankBackgroundList {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(188, 225, 246, 0.3) transparent;
}

.edit-tank-tray #editTankBackgroundList .background-card {
  flex: 0 0 172px;
  width: 172px;
  min-width: 172px;
  max-width: 172px;
  height: 88px;
  min-height: 88px;
  max-height: 88px;
}

.edit-tank-tray #editTankBackgroundList .background-card.local-background-card {
  flex-basis: 206px;
  width: 206px;
  min-width: 206px;
  max-width: 206px;
}

.edit-tank-background-control {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 5px 7px;
  box-sizing: border-box;
  border: 1px solid rgba(188, 225, 246, 0.1);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(17, 31, 45, 0.34), rgba(12, 22, 33, 0.28));
}

.edit-tank-background-control.is-gradient {
  grid-template-columns: 150px minmax(0, 1fr);
}

.edit-tank-background-control-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 8px;
  border-right: 1px solid rgba(188, 225, 246, 0.1);
}

.edit-tank-background-control-summary .background-mode-preview {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.edit-tank-background-control-summary > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.edit-tank-background-control-summary span {
  color: rgba(210, 237, 250, 0.62);
  font-size: 0.55rem;
  font-weight: 700;
  white-space: nowrap;
}

.edit-tank-background-control-summary strong {
  overflow: hidden;
  color: #f0fbff;
  font-size: 0.62rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-tank-background-control-summary .small-button {
  margin-left: auto;
  flex: 0 0 auto;
}

.edit-tank-background-swatches {
  align-content: center;
  align-items: center;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  min-width: 0;
  overflow: visible !important;
  padding: 2px 0 !important;
}

.edit-tank-background-swatches .custom-gravel-color-swatch,
.edit-tank-tray #editTankCustomGravelPanel .custom-gravel-color-swatch {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  border-radius: 4px;
}

.edit-tank-gradient-columns {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.edit-tank-background-color-group {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 2px;
  padding: 2px 7px;
  border: 1px solid rgba(188, 225, 246, 0.08);
  border-radius: 9px;
  background: rgba(5, 18, 29, 0.22);
}

.edit-tank-background-color-group .custom-gravel-choice-summary {
  min-height: 15px;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.edit-tank-background-color-group .custom-gravel-choice-summary span,
.edit-tank-background-color-group .custom-gravel-choice-summary strong {
  font-size: 0.54rem;
  line-height: 1;
}

.edit-tank-tray [data-tank-tray-panel="gravel"] {
  display: block;
}

.edit-tank-tray #editTankCustomGravelPanel,
.edit-tank-tray .custom-gravel-panel-shell,
.edit-tank-tray .custom-gravel-layer-list {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: hidden;
}

.edit-tank-tray .custom-gravel-panel-shell {
  padding: 0;
}

.edit-tank-tray .custom-gravel-layer-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.edit-tank-tray .custom-gravel-layer-card {
  width: auto;
  min-width: 0;
  max-width: none;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 5px 7px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 2px;
  overflow: hidden;
  box-sizing: border-box;
}

.edit-tank-tray .custom-gravel-layer-header,
.edit-tank-tray .custom-gravel-choice-summary,
.edit-tank-tray .custom-gravel-colorize-toggle {
  min-height: 14px;
  margin: 0;
}

.edit-tank-tray .custom-gravel-layer-header strong,
.edit-tank-tray .custom-gravel-choice-summary strong,
.edit-tank-tray .custom-gravel-choice-summary span,
.edit-tank-tray .custom-gravel-colorize-toggle {
  font-size: 0.54rem;
  line-height: 1;
}

.edit-tank-tray #editTankCustomGravelPanel .custom-gravel-swatches {
  min-width: 0;
  align-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  overflow: visible;
  padding: 1px 0;
}

@media (max-width: 980px) {
  :root {
    --bubble-edit-tray-height: 226px;
  }

  .edit-tank-background-control {
    grid-template-columns: 128px minmax(0, 1fr);
  }

  .edit-tank-background-control.is-gradient {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .edit-tank-background-swatches .custom-gravel-color-swatch,
  .edit-tank-tray #editTankCustomGravelPanel .custom-gravel-color-swatch {
    flex-basis: 13px;
    width: 13px;
    height: 13px;
    min-width: 13px;
    min-height: 13px;
  }
}

/* Compact fixed-height Tank color picker redesign */
:root {
  --bubble-edit-tray-height: 218px;
}

.edit-tank-tray .edit-tank-background-workspace,
.edit-tank-tray #editTankBackgroundColorPanel,
.edit-tank-tray #editTankBackgroundList,
.edit-tank-tray #editTankCustomGravelPanel {
  min-height: 0;
  height: 100%;
}

.edit-tank-tray #editTankBackgroundList {
  display: block;
  overflow: hidden;
  padding: 0;
}

.edit-tank-image-layout {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.edit-tank-custom-content {
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}

.edit-tank-custom-content > .custom-content-storage-meter {
  flex: 0 0 250px;
  min-width: 0;
}

.edit-tank-local-image-card,
.edit-tank-built-in-backgrounds {
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgba(188, 225, 246, 0.11);
  border-radius: 10px;
  background: rgba(7, 23, 35, 0.34);
}

.edit-tank-local-image-card {
  flex: 0 1 360px;
  min-height: 62px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 4px 7px;
  padding: 5px 7px;
}

.edit-tank-local-image-card.is-selected,
.edit-tank-image-option.is-selected {
  border-color: rgba(91, 242, 238, 0.78);
  box-shadow: inset 0 0 0 1px rgba(91, 242, 238, 0.15), 0 0 10px rgba(91, 242, 238, 0.1);
}

.edit-tank-local-image-preview {
  grid-row: 1 / 3;
  min-width: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(188, 225, 246, 0.12);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(29, 75, 98, 0.42), rgba(5, 15, 24, 0.7));
}

.edit-tank-local-image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-tank-local-image-placeholder {
  color: rgba(184, 229, 246, 0.72);
  font-size: 1.8rem;
  font-weight: 300;
}

.edit-tank-local-image-copy {
  min-width: 0;
  align-self: end;
  display: grid;
  gap: 2px;
}

.edit-tank-local-image-copy strong {
  color: #f2fcff;
  font-size: 0.66rem;
}

.edit-tank-local-image-copy span,
.edit-tank-built-in-backgrounds-label {
  color: rgba(214, 239, 250, 0.58);
  font-size: 0.52rem;
  font-weight: 700;
}

.edit-tank-local-image-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.edit-tank-local-image-actions button {
  min-height: 21px;
  padding: 3px 7px;
  border-radius: 7px;
  font-size: 0.52rem;
  line-height: 1;
}

.edit-tank-built-in-backgrounds {
  height: 100%;
  display: grid;
  grid-template-rows: 14px minmax(0, 1fr);
  gap: 3px;
  padding: 4px 6px 5px;
}

.edit-tank-image-options {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(188, 225, 246, 0.28) transparent;
}

.edit-tank-image-option {
  flex: 0 0 126px;
  min-width: 126px;
  max-width: 126px;
  min-height: 0;
  padding: 3px;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 14px;
  gap: 2px;
  border: 1px solid rgba(188, 225, 246, 0.11);
  border-radius: 8px;
  background: rgba(4, 17, 28, 0.58);
  color: #eafbff;
  cursor: pointer;
}

.edit-tank-image-option:hover,
.edit-tank-image-option:focus-visible {
  border-color: rgba(92, 235, 236, 0.6);
}

.edit-tank-image-thumb {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 5px;
}

.edit-tank-image-option > span:last-child {
  overflow: hidden;
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-tank-image-empty {
  align-self: center;
  color: rgba(214, 239, 250, 0.58);
  font-size: 0.6rem;
}

.edit-tank-background-control,
.edit-tank-background-control.is-gradient {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.edit-tank-gradient-picker-grid {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.tank-color-picker {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 16px minmax(0, 1fr);
  gap: 2px;
  padding: 4px 6px;
  overflow: hidden;
  border: 1px solid rgba(188, 225, 246, 0.1);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(16, 31, 45, 0.38), rgba(7, 18, 29, 0.3));
}

.tank-color-picker-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.tank-color-picker-heading > span {
  color: rgba(218, 241, 252, 0.68);
  font-size: 0.54rem;
  font-weight: 800;
}

.tank-color-picker-heading > strong {
  min-width: 0;
  overflow: hidden;
  color: #f3fdff;
  font-size: 0.56rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tank-color-picker-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 82px 176px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.tank-color-picker-spectrum-wrap {
  width: 82px;
  height: 62px;
  display: grid;
  grid-template-columns: 68px 10px;
  gap: 4px;
}

.tank-color-picker-spectrum,
.tank-color-picker-hue {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(222, 246, 255, 0.24);
  border-radius: 5px;
  cursor: crosshair;
  touch-action: none;
}

.tank-color-picker-spectrum {
  background:
    linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, #fff 0%, var(--picker-hue-color) 100%);
}

.tank-color-picker-hue {
  background: linear-gradient(
    to bottom,
    #ff0000 0%,
    #ffff00 16.66%,
    #00ff00 33.33%,
    #00ffff 50%,
    #0000ff 66.66%,
    #ff00ff 83.33%,
    #ff0000 100%
  );
}

.tank-color-picker-spectrum-marker,
.tank-color-picker-hue-marker {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  border: 1.5px solid #f6ffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.64), 0 0 5px rgba(0, 0, 0, 0.45);
}

.tank-color-picker-spectrum-marker {
  left: var(--picker-saturation);
  top: var(--picker-darkness);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.tank-color-picker-hue-marker {
  left: -2px;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  transform: translateY(-50%);
}

.tank-color-picker-sliders {
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(3, 19px);
  gap: 1px;
  align-content: center;
}

.tank-color-picker-sliders label {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  color: rgba(218, 241, 252, 0.66);
  font-size: 0.49rem;
  font-weight: 800;
}

.tank-color-picker-sliders input[type="range"] {
  width: 100%;
  min-width: 0;
  height: 12px;
  margin: 0;
  accent-color: var(--picker-color);
}

.tank-color-picker-code-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.tank-color-picker-current {
  width: 19px;
  height: 17px;
  box-sizing: border-box;
  border: 1px solid rgba(223, 247, 255, 0.3);
  border-radius: 5px;
  background: var(--swatch);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16);
}

.tank-color-picker-hex {
  width: 100%;
  height: 19px;
  min-width: 0;
  box-sizing: border-box;
  padding: 2px 5px;
  border: 1px solid rgba(188, 225, 246, 0.16);
  border-radius: 5px;
  outline: none;
  background: rgba(2, 13, 22, 0.62);
  color: #f0fbff;
  font: 800 0.5rem/1 var(--ui-font-stack);
  text-transform: uppercase;
}

.tank-color-picker-hex:focus {
  border-color: rgba(85, 242, 237, 0.68);
  box-shadow: 0 0 0 1px rgba(85, 242, 237, 0.12);
}

.tank-color-picker-quick-area {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 11px minmax(0, 1fr);
  gap: 2px;
  align-content: center;
}

.tank-color-picker-quick-label {
  color: rgba(218, 241, 252, 0.58);
  font-size: 0.47rem;
  font-weight: 800;
}

.tank-color-picker-quick-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(17, 13px);
  grid-auto-rows: 13px;
  gap: 3px;
  align-content: center;
  justify-content: start;
  overflow: hidden;
}

.tank-color-picker-quick-swatch {
  width: 13px;
  height: 13px;
  min-width: 13px;
  min-height: 13px;
  padding: 0;
  border: 1px solid rgba(231, 248, 255, 0.28);
  border-radius: 3px;
  background: var(--swatch);
  cursor: pointer;
}

.tank-color-picker-quick-swatch:hover,
.tank-color-picker-quick-swatch:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.86);
}

.tank-color-picker-quick-swatch.is-selected {
  outline: 1px solid rgba(92, 242, 238, 0.94);
  outline-offset: 1px;
  box-shadow: 0 0 6px rgba(77, 238, 235, 0.24);
}

.tank-color-picker.is-condensed {
  padding-left: 5px;
  padding-right: 5px;
}

.tank-color-picker.is-condensed .tank-color-picker-body {
  grid-template-columns: 74px 132px minmax(0, 1fr);
  gap: 5px;
}

.tank-color-picker.is-condensed .tank-color-picker-spectrum-wrap {
  width: 74px;
  grid-template-columns: 61px 9px;
}

.tank-color-picker.is-condensed .tank-color-picker-sliders label {
  grid-template-columns: 42px minmax(0, 1fr);
}

.tank-color-picker.is-condensed .tank-color-picker-quick-grid {
  grid-template-columns: repeat(17, 10px);
  grid-auto-rows: 10px;
  gap: 2px;
}

.tank-color-picker.is-condensed .tank-color-picker-quick-swatch {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 2px;
}

.edit-tank-animated-presets {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px;
  padding: 4px 6px;
  box-sizing: border-box;
  border: 1px solid rgba(188, 225, 246, 0.1);
  border-radius: 10px;
  background: rgba(7, 21, 33, 0.3);
}

.edit-tank-animated-summary {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 24px;
  gap: 3px;
  align-content: center;
  padding-right: 7px;
  border-right: 1px solid rgba(188, 225, 246, 0.1);
}

.edit-tank-animated-summary span {
  color: rgba(218, 241, 252, 0.58);
  font-size: 0.5rem;
  font-weight: 800;
}

.edit-tank-animated-summary strong {
  overflow: hidden;
  color: #f3fdff;
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-tank-animated-preset-list {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(188, 225, 246, 0.25) transparent;
}

.edit-tank-animated-preset {
  flex: 1 1 92px;
  min-width: 86px;
  max-width: 132px;
  min-height: 0;
  padding: 3px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 14px;
  gap: 2px;
  border: 1px solid rgba(188, 225, 246, 0.12);
  border-radius: 7px;
  background: rgba(3, 14, 24, 0.5);
  color: #ebfbff;
  cursor: pointer;
}

.edit-tank-animated-preset.is-selected {
  border-color: rgba(85, 242, 237, 0.86);
  box-shadow: inset 0 0 0 1px rgba(85, 242, 237, 0.14), 0 0 9px rgba(85, 242, 237, 0.13);
}

.edit-tank-animated-preset-preview {
  border-radius: 5px;
  background: var(--animated-preset-fill);
}

.edit-tank-animated-preset > span:last-child {
  overflow: hidden;
  font-size: 0.47rem;
  font-weight: 800;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-tank-tray [data-tank-tray-panel="gravel"] {
  display: block;
}

.edit-tank-tray #editTankCustomGravelPanel {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.edit-tank-gravel-editor {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 31px minmax(0, 1fr);
  gap: 4px;
}

.edit-tank-gravel-layer-tabs {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
}

.edit-tank-gravel-layer-tab {
  min-width: 104px;
  padding: 2px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(188, 225, 246, 0.13);
  border-radius: 8px;
  background: rgba(7, 24, 37, 0.46);
  color: rgba(222, 243, 252, 0.76);
  font: 800 0.54rem/1 var(--ui-font-stack);
  cursor: pointer;
}

.edit-tank-gravel-layer-tab:hover,
.edit-tank-gravel-layer-tab:focus-visible {
  border-color: rgba(85, 242, 237, 0.55);
  color: #f5ffff;
}

.edit-tank-gravel-layer-tab.is-active {
  border-color: rgba(85, 242, 237, 0.84);
  background: linear-gradient(180deg, rgba(14, 76, 96, 0.76), rgba(6, 42, 61, 0.8));
  color: #edffff;
  box-shadow: 0 0 9px rgba(85, 242, 237, 0.12);
}

.edit-tank-gravel-pebble {
  --pebble-color: #2F80FF;
  --pebble-image: none;
  position: relative;
  width: 25px;
  height: 23px;
  flex: 0 0 25px;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
}

.edit-tank-gravel-pebble img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(0.95) brightness(0.88) contrast(1.12);
}

.edit-tank-gravel-pebble::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--pebble-color);
  -webkit-mask-image: var(--pebble-image);
  mask-image: var(--pebble-image);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  mix-blend-mode: color;
  opacity: 0.94;
  pointer-events: none;
}

.edit-tank-gravel-picker-workspace {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.edit-tank-gravel-colorize {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(226, 245, 253, 0.72);
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer;
}

.edit-tank-gravel-colorize input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #37d6e8;
}

@media (max-width: 980px) {
  :root {
    --bubble-edit-tray-height: 218px;
  }

  .edit-tank-custom-content {
    gap: 7px;
  }

  .edit-tank-custom-content > .custom-content-storage-meter {
    flex-basis: 210px;
  }

  .edit-tank-local-image-card {
    flex-basis: 320px;
  }

  .tank-color-picker-body {
    grid-template-columns: 74px 145px minmax(0, 1fr);
    gap: 5px;
  }

  .tank-color-picker-spectrum-wrap {
    width: 74px;
    grid-template-columns: 61px 9px;
  }

  .tank-color-picker-sliders label {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .tank-color-picker-quick-grid {
    grid-template-columns: repeat(17, 10px);
    grid-auto-rows: 10px;
    gap: 2px;
  }

  .tank-color-picker-quick-swatch {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
  }

  .tank-color-picker.is-condensed .tank-color-picker-body {
    grid-template-columns: 62px 105px minmax(0, 1fr);
    gap: 4px;
  }

  .tank-color-picker.is-condensed .tank-color-picker-spectrum-wrap {
    width: 62px;
    height: 58px;
    grid-template-columns: 50px 8px;
  }

  .tank-color-picker.is-condensed .tank-color-picker-sliders label {
    grid-template-columns: 34px minmax(0, 1fr);
    font-size: 0.44rem;
  }

  .edit-tank-animated-presets {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

/* Automated Care Submarine */
.submarine-manager {
  position: absolute;
  z-index: 48;
  right: clamp(12px, 2vw, 28px);
  bottom: calc(var(--bottom-dock-height, 62px) + 20px);
  width: min(320px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid rgba(61, 221, 240, 0.7);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(38, 171, 221, 0.12), transparent 50%),
    linear-gradient(180deg, rgba(4, 35, 54, 0.97), rgba(3, 22, 35, 0.98));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(123, 229, 244, 0.08);
  color: #eafaff;
  backdrop-filter: blur(12px);
}

.submarine-manager[hidden] {
  display: none !important;
}

.submarine-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.submarine-manager-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.submarine-manager-title img {
  width: 54px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
}

.submarine-manager-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f3fbff;
  font-size: 0.78rem;
  line-height: 1.1;
}

.submarine-manager-header-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.submarine-settings-button {
  min-height: 28px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(90, 201, 231, 0.3);
  background: linear-gradient(180deg, rgba(12, 66, 95, 0.92), rgba(7, 42, 62, 0.94));
  color: rgba(228, 248, 255, 0.92);
  font: 900 0.5rem/1 var(--ui-font-stack);
  letter-spacing: 0.04em;
}

.submarine-settings-button.is-active {
  border-color: rgba(137, 235, 255, 0.78);
  background: linear-gradient(180deg, rgba(15, 111, 154, 0.98), rgba(7, 76, 112, 0.98));
  color: #fff;
}

.machinery-settings-panel {
  margin: 0 0 8px;
  padding: 0 0 8px;
}

.machinery-settings-panel .fish-inspector-color-card {
  background: linear-gradient(180deg, rgba(7, 43, 62, 0.86), rgba(4, 29, 45, 0.9));
  border-color: rgba(86, 195, 211, 0.18);
}

.submarine-manager-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(90, 201, 231, 0.3);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(12, 66, 95, 0.92), rgba(7, 42, 62, 0.94));
  color: rgba(228, 248, 255, 0.92);
  font: 900 0.98rem/1 var(--ui-font-stack);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.submarine-manager-close:hover,
.submarine-manager-close:focus-visible {
  border-color: rgba(137, 235, 255, 0.74);
  filter: brightness(1.08);
}

.submarine-autopilot-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(72, 189, 205, 0.28);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(6, 57, 85, 0.8), rgba(4, 42, 66, 0.84));
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

.submarine-autopilot-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.submarine-autopilot-copy {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f3fbff;
}

.submarine-autopilot-copy strong {
  font-size: 0.66rem;
  line-height: 1;
}

.submarine-autopilot-switch {
  position: relative;
  min-width: 86px;
  height: 28px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(42, 66, 82, 0.92), rgba(28, 53, 69, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  flex: 0 0 auto;
}

.submarine-autopilot-toggle.is-on .submarine-autopilot-switch {
  background: linear-gradient(180deg, rgba(2, 85, 123, 0.95), rgba(0, 129, 187, 0.86));
}

.submarine-autopilot-state {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #f6fdff;
  font: 900 0.56rem/1 var(--ui-font-stack);
  letter-spacing: 0.05em;
}

.submarine-autopilot-toggle.is-on .submarine-autopilot-state {
  left: 11px;
}

.submarine-autopilot-toggle.is-off .submarine-autopilot-state {
  right: 11px;
}

.submarine-autopilot-switch i {
  position: absolute;
  top: 3px;
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  background: linear-gradient(180deg, #bbfdff, #61eeff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
  transition: left 140ms ease, right 140ms ease;
}

.submarine-autopilot-toggle.is-off .submarine-autopilot-switch i {
  left: 3px;
}

.submarine-autopilot-toggle.is-on .submarine-autopilot-switch i {
  right: 3px;
}

.submarine-resource-list {
  display: grid;
  gap: 6px;
}

.submarine-resource-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(7, 43, 62, 0.86), rgba(4, 29, 45, 0.9));
  border: 1px solid rgba(86, 195, 211, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.submarine-resource-body {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 5px;
}

.submarine-resource-main {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.submarine-resource-identity {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.submarine-resource-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}

.submarine-resource-copy {
  min-width: 0;
}

.submarine-resource-topline {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}

.submarine-resource-topline strong {
  color: #f2fbff;
  font-size: 0.61rem;
  line-height: 1;
}

.submarine-resource-topline small {
  color: rgba(191, 229, 238, 0.52);
  font-size: 0.46rem;
  font-weight: 700;
  line-height: 1;
}

.submarine-resource-count {
  flex: 0 0 auto;
  color: rgba(235, 250, 255, 0.9);
  font: 800 0.62rem/1 var(--ui-font-stack);
  font-variant-numeric: tabular-nums;
}

.submarine-resource-meter {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.submarine-resource-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2fd2ee, #78edd8);
}

.submarine-load-buttons {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.submarine-load-buttons .small-button {
  min-width: 28px;
  height: 22px;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(15, 104, 152, 0.98), rgba(8, 71, 106, 0.98));
  border: 1px solid rgba(89, 201, 233, 0.28);
  color: #f4fcff;
  font: 900 0.48rem/1 var(--ui-font-stack);
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.submarine-load-buttons .small-button:hover,
.submarine-load-buttons .small-button:focus-visible {
  border-color: rgba(143, 234, 255, 0.76);
  filter: brightness(1.08);
}

.submarine-load-buttons .small-button:disabled {
  opacity: 0.42;
}

.submarine-load-buttons .submarine-load-button-fill {
  min-width: 34px;
  background: linear-gradient(180deg, rgba(28, 129, 183, 0.98), rgba(12, 93, 140, 0.98));
  border-color: rgba(119, 220, 246, 0.44);
}

.submarine-shop-thumb {
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .submarine-manager {
    position: fixed;
    right: 10px;
    bottom: 74px;
    width: calc(100vw - 20px);
    max-height: min(52vh, 420px);
    overflow: auto;
  }

  .submarine-resource-row {
    align-items: stretch;
    flex-direction: column;
  }

  .submarine-load-buttons {
    justify-content: flex-end;
  }
}

.submarine-resource-row > div:first-child strong small {
  margin-left: 4px;
  color: rgba(194, 230, 238, 0.5);
  font-size: 0.5rem;
  font-weight: 600;
}

.submarine-load-buttons {
  grid-area: button;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.submarine-load-buttons .small-button {
  min-width: 0;
  min-height: 28px;
  padding: 4px 5px;
  font-size: 0.52rem;
}


/* Inline Equipment editor */
.edit-equipment-tray {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 23px minmax(0, 1fr);
  gap: 5px;
}

.edit-equipment-tray .edit-tray-mode-header,
.edit-equipment-tray-header,
.edit-equipment-tray-scroller {
  grid-column: 1 / -1;
}

.edit-equipment-tray-header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  max-height: 23px;
}

.edit-equipment-tray-kicker {
  padding: 3px 12px;
  border: 1px solid rgba(125, 224, 248, 0.22);
  border-radius: 999px;
  background: rgba(9, 42, 61, 0.82);
  color: rgba(228, 248, 255, 0.82);
  font: 800 0.64rem/1 var(--ui-font-stack);
  letter-spacing: 0.02em;
}

.edit-equipment-tray .edit-overlay-mode-tab[data-edit-overlay-mode="equipment"].is-active {
  background: linear-gradient(180deg, rgba(25, 113, 145, 0.98), rgba(12, 70, 99, 0.98));
}

.edit-equipment-tray-scroller {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 2px;
}

.edit-equipment-card {
  box-sizing: border-box;
  width: 100%;
  height: 88px;
  min-height: 88px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(119, 214, 235, 0.2);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(12, 48, 66, 0.78), rgba(7, 30, 45, 0.84));
  overflow: hidden;
}

.edit-equipment-card.is-active {
  border-color: rgba(115, 229, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(115, 229, 255, 0.08);
}

.edit-equipment-card-image-wrap {
  height: 72px;
  min-width: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(2, 19, 30, 0.52);
  overflow: hidden;
}

.edit-equipment-card-image {
  display: block;
  width: 136px;
  height: 66px;
  object-fit: contain;
}

.edit-equipment-card-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.edit-equipment-card-copy strong {
  color: #f2fbff;
  font-size: 0.76rem;
  line-height: 1.1;
}

.edit-equipment-card-copy span,
.edit-equipment-card-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-equipment-card-copy span {
  color: rgba(201, 239, 248, 0.78);
  font-size: 0.63rem;
  font-weight: 700;
}

.edit-equipment-card-copy small {
  color: rgba(187, 222, 231, 0.62);
  font-size: 0.56rem;
}

.edit-equipment-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.edit-equipment-card-actions .small-button {
  min-width: 88px;
  min-height: 30px;
  padding: 5px 10px;
  font-size: 0.58rem;
}

@media (max-width: 760px) {
  .edit-equipment-card {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 7px;
    padding-inline: 7px;
  }

  .edit-equipment-card-image {
    width: 88px;
    height: 58px;
  }

  .edit-equipment-card-actions .small-button {
    min-width: 68px;
    padding-inline: 7px;
  }
}




/* Food tray mirrors the compact Fish Care tray dimensions and simplified layout. */
#foodTray {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

#foodTray .edit-decor-tray-arrow {
  display: none;
}

#foodTray .edit-decor-tray-scroller {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

@media (min-width: 861px) {
  #foodTray {
    width: min(76vw, 640px);
    max-width: calc(100vw - 48px);
  }

  #foodTray:has(.food-tray-empty-state) {
    width: min(84vw, 760px);
  }
}

.food-tray-content {
  flex: 1 0 var(--food-tray-min-width, 540px);
  width: 100%;
  min-width: var(--food-tray-min-width, 540px);
  height: 98px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 0 4px;
}

.food-tray-main {
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 17px minmax(0, 1fr);
  gap: 3px;
  padding: 3px 0 2px;
}

.food-tray-items {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 7px;
  overflow: visible;
  scrollbar-width: none;
}

.food-tray-items::-webkit-scrollbar {
  display: none;
}

.food-tray-empty-state .care-tray-empty-copy small {
  max-width: 260px;
}

/* Equal editor shells; content scrolls without resizing the menu. */
#editEquipmentTray { grid-template-rows: auto auto minmax(0, 1fr); }
#editEquipmentTrayScroller { display: flex; align-items: center; gap: 8px; }
#editEquipmentTray .edit-decor-tile { flex: 0 0 112px; position: relative; }
#editEquipmentTray .edit-decor-tile::before {
  top: 28px;
  bottom: auto;
  left: 4px;
  right: 4px;
  z-index: 4;
  padding: 5px;
  border-radius: 8px;
  white-space: normal;
  text-align: center;
  font-size: 0.65rem;
  transform: none;
}
.edit-equipment-resource-note { font-size: 9px; line-height: 1.2; white-space: nowrap; }
.edit-tank-tray-tabs {
  overflow-x: auto;
  max-width: 100%;
  justify-content: center;
}

.edit-tank-tray .edit-overlay-mode-tabs,
.edit-tank-tray .edit-tank-tray-tabs,
.edit-tank-tray .edit-tank-background-mode-tabs {
  justify-content: center;
  margin-inline: auto;
}

/* Mirror the Tank header so the mode switcher stays centered while Done
   remains visible and anchored to the right edge. */
.edit-tank-tray > .edit-tray-mode-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.edit-tank-tray > .edit-tray-mode-header > .edit-overlay-mode-tabs {
  position: static;
  grid-column: 2;
  margin: 0;
  transform: none;
  width: max-content;
  max-width: 100%;
}

.edit-tank-tray > .edit-tray-mode-header > .edit-tray-done-button {
  grid-column: 3;
  justify-self: end;
}

.edit-tank-tray > .edit-tank-tray-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-tank-tray > .edit-tank-tray-header > .edit-tank-tray-tabs {
  margin: 0;
  justify-content: center;
}

.edit-tank-tray .edit-tank-background-workspace {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}

/* The mode buttons now live in the outer Tank tab row.  The background panel
   therefore has one child workspace and must give that child the full row;
   retaining the legacy 27px nested-tab row collapses every mode to a strip. */
.edit-tank-tray .edit-tank-background-panel {
  grid-template-rows: minmax(0, 1fr) !important;
}

.edit-tank-tray .edit-tank-background-workspace > #editTankBackgroundColorPanel,
.edit-tank-tray .edit-tank-background-workspace > #editTankBackgroundList {
  flex: 1 1 auto;
  width: 100%;
}
.edit-tank-tray-tab { flex: 0 0 auto; }
.submarine-drive-status { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: 11px; }
.submarine-drive-status span { flex: 1; }
.submarine-touch-controls { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 8px 0; }
.submarine-touch-controls button { touch-action: none; min-width: 36px; min-height: 36px; border: 1px solid #69b9d1; border-radius: 8px; background: #174258; color: #effcff; }
.submarine-touch-controls span { font-size: 11px; }
.submarine-manager { max-height: 82vh; overflow-y: auto; }

/* Stable shared editor navigation. Every editor exposes the same five
   fixed-width destinations, while Background and Gravel render their own
   controls below the bar. */
.edit-decor-tray > .edit-tray-mode-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.edit-decor-tray > .edit-tray-mode-header > .edit-overlay-mode-tabs {
  grid-column: 2;
  width: max-content;
  max-width: 100%;
  margin: 0;
  justify-self: center;
  overflow-x: auto;
}

.edit-decor-tray > .edit-tray-mode-header > .edit-tray-done-button {
  grid-column: 3;
  justify-self: end;
}

.edit-overlay-mode-tab {
  flex: 0 0 112px;
  width: 112px;
  min-width: 112px;
  box-sizing: border-box;
}

.edit-overlay-mode-glyph {
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
}

.edit-tank-tray {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.edit-tank-tray .edit-tank-background-panel {
  grid-template-rows: 30px minmax(0, 1fr) !important;
  gap: 5px !important;
}

.edit-tank-background-type-tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
}

.edit-tank-background-type-tabs .edit-tank-background-mode-tab {
  flex: 0 0 auto;
  min-width: 86px;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid rgba(188, 225, 246, 0.14);
  border-radius: 999px;
  background: rgba(8, 25, 39, 0.5);
  color: rgba(216, 241, 255, 0.74);
  font: 800 0.62rem/1 var(--ui-font-stack);
  cursor: pointer;
}

.edit-tank-background-type-tabs .edit-tank-background-mode-tab.is-active {
  border-color: rgba(85, 242, 237, 0.72);
  background: linear-gradient(180deg, rgba(16, 80, 99, 0.82), rgba(7, 47, 69, 0.86));
  color: #dffffe;
}

.edit-tank-tray .edit-tank-background-workspace {
  min-height: 0;
  height: 100%;
}

.edit-tank-tray .edit-tank-gravel-sections,
.edit-tank-tray .edit-tank-gravel-sections .custom-gravel-layer-list {
  min-height: 0;
  height: 100%;
}

@media (max-width: 860px) {
  .edit-overlay-mode-tab {
    flex-basis: 82px;
    width: 82px;
    min-width: 82px;
    padding-inline: 4px;
    gap: 3px;
    font-size: 0.58rem;
  }

  .edit-overlay-mode-glyph {
    font-size: 0.85rem;
  }

  .edit-tank-background-type-tabs .edit-tank-background-mode-tab {
    min-width: 74px;
    padding-inline: 6px;
    font-size: 0.56rem;
  }
}

/* Cloud saves and start screen */
.startup-actions {
  position: absolute;
  top: calc(50% + 150px);
  left: 50%;
  display: grid;
  gap: 12px;
  width: min(390px, 82vw);
  margin: 0;
  transform: translateX(-50%);
}
.startup-actions [data-startup-buttons] { display: grid; gap: 10px; }
.startup-primary-button,
.startup-secondary-button {
  border: 0;
  border-radius: 14px;
  padding: 13px 18px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.startup-primary-button {
  background: #f7fbff;
  color: #053b63;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.startup-secondary-button {
  background: rgba(7,53,86,.82);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
}
.startup-primary-button:hover,
.startup-primary-button:focus-visible { background: #e5f6ff; }
.startup-secondary-button:hover,
.startup-secondary-button:focus-visible { background: rgba(10, 76, 119, .95); }
.startup-primary-button:active,
.startup-secondary-button:active,
.startup-primary-button.is-pressed {
  transform: translateY(3px) scale(.985);
  box-shadow: inset 0 3px 8px rgba(0, 45, 76, .2);
}
.startup-actions[data-startup-pending="true"] { pointer-events: none; }
.startup-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 47px;
  color: #effaff;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 30, 60, .7);
}
.startup-loading-indicator span {
  width: 17px;
  height: 17px;
  border: 3px solid rgba(224, 247, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: startupSpinner .72s linear infinite;
}
@keyframes startupSpinner { to { transform: rotate(1turn); } }

.loading-overlay-version {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 3;
  display: none;
  color: rgba(218, 237, 247, .48);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .045em;
  text-align: right;
  text-shadow: 0 1px 4px rgba(0, 12, 28, .72);
  pointer-events: none;
}
.loading-overlay-version > span,
.loading-overlay-version > small {
  display: block;
}
.loading-overlay-version > small {
  margin-top: 4px;
  color: rgba(218, 237, 247, .34);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .025em;
}
.loading-overlay.is-ready.is-auth-mode .loading-overlay-version,
.loading-overlay.is-ready.is-welcome-mode .loading-overlay-version,
.loading-overlay.is-error .loading-overlay-version {
  display: block;
}

/* Keep the build/version label visible on fatal startup errors. The recovery
   help button occupies the lower-right corner, so move the version label to
   the lower-left while the error screen is active. */
.loading-overlay.is-error .loading-overlay-version {
  right: auto;
  left: max(12px, env(safe-area-inset-left));
  text-align: left;
}

/* Signed-out startup is a focused auth card instead of the large logo screen. */
.loading-overlay.is-ready.is-auth-mode .loading-overlay-content {
  width: min(100%, 900px);
}
.loading-overlay.is-ready.is-auth-mode .loading-overlay-logo,
.loading-overlay.is-ready.is-auth-mode .loading-overlay-text {
  display: none !important;
}
.loading-overlay.is-ready.is-auth-mode::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(74, 255, 229, .16), transparent 34%),
    linear-gradient(180deg, rgba(0, 35, 59, .08), rgba(0, 18, 39, .28));
}
.loading-overlay.is-ready.is-auth-mode .startup-actions {
  top: 50%;
  width: min(780px, calc(100vw - 54px));
  transform: translate(-50%, -50%);
}
.startup-auth {
  display: grid;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  padding: 34px 40px 30px;
  border: 1px solid rgba(77, 232, 240, .54);
  border-radius: 34px;
  color: #f5fcff;
  background:
    linear-gradient(160deg, rgba(4, 51, 73, .94), rgba(2, 29, 53, .94));
  box-shadow:
    0 32px 80px rgba(0, 12, 29, .48),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 50px rgba(31, 194, 217, .045);
  backdrop-filter: blur(18px) saturate(1.15);
  text-align: left;
}
.startup-auth-heading { display: grid; gap: 6px; }
.startup-auth-title {
  color: #fff;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-shadow: 0 3px 18px rgba(0, 19, 43, .52);
}
.startup-auth-title > span { color: #5ce9f4; }
.startup-auth-copy {
  color: rgba(197, 229, 241, .8);
  font-size: clamp(.92rem, 1.5vw, 1.12rem);
  font-weight: 700;
  line-height: 1.4;
}
.startup-auth-field { display: grid; gap: 8px; }
.startup-auth-label {
  color: #f4fbff;
  font-size: .96rem;
  font-weight: 900;
}
.startup-auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 70px;
  border: 1px solid rgba(139, 222, 255, .68);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(115, 178, 204, .18), rgba(90, 153, 182, .12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.startup-auth-input-wrap:focus-within {
  border-color: #61edfa;
  background: linear-gradient(180deg, rgba(119, 205, 226, .24), rgba(76, 165, 194, .16));
  box-shadow: 0 0 0 3px rgba(68, 230, 240, .11), inset 0 1px 0 rgba(255,255,255,.06);
}
.startup-auth-input-icon {
  position: absolute;
  left: 24px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: rgba(155, 218, 240, .62);
  font-size: 1.7rem;
  line-height: 1;
  pointer-events: none;
}
.startup-auth-input-wrap input,
.loading-overlay.is-auth-mode .startup-auth-input-wrap input {
  width: 100%;
  min-width: 0;
  min-height: 68px;
  box-sizing: border-box;
  padding: 0 22px 0 72px;
  border: 0;
  border-radius: inherit;
  outline: 0;
  color: #f4fcff;
  background: transparent;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
}
.startup-auth-input-wrap input::placeholder { color: rgba(160, 207, 225, .52); }
.startup-auth-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.startup-auth-actions-single { grid-template-columns: 1fr; }
.startup-auth-actions .small-button {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 999px;
  border: 1px solid rgba(96, 228, 244, .62);
  font-size: 1.12rem;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0, 17, 37, .27), inset 0 1px 0 rgba(255,255,255,.15);
}
.startup-auth-actions .small-button > span { font-size: 1.45rem; }
.startup-auth-actions .startup-signin-button {
  color: #042b48;
  background: linear-gradient(180deg, #82f0fb, #22c9f0);
  border-color: rgba(151, 249, 255, .88);
  box-shadow: 0 0 30px rgba(25, 212, 239, .22), 0 12px 28px rgba(0, 17, 37, .25), inset 0 1px 0 rgba(255,255,255,.58);
}
.startup-auth-actions .startup-signin-button:hover,
.startup-auth-actions .startup-signin-button:focus-visible { filter: brightness(1.08); }
.startup-auth-actions .startup-create-button {
  color: #e9ffff;
  background: linear-gradient(180deg, rgba(33, 134, 121, .88), rgba(14, 90, 92, .9));
  border-color: rgba(72, 224, 202, .58);
}
.startup-forgot-row {
  display: grid;
  grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
  align-items: center;
  gap: 18px;
}
.startup-forgot-row > span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109, 210, 238, .42));
}
.startup-forgot-row > span:last-child { background: linear-gradient(90deg, rgba(109, 210, 238, .42), transparent); }
.startup-forgot-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid rgba(56, 194, 223, .48);
  border-radius: 999px;
  color: rgba(191, 228, 242, .88);
  background: rgba(4, 52, 75, .62);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.startup-forgot-button b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: .8rem;
}
.startup-forgot-button:hover,
.startup-forgot-button:focus-visible { color: #ecfdff; border-color: rgba(91, 235, 246, .8); background: rgba(7, 76, 99, .78); }
.startup-auth-trust {
  display: grid;
  gap: 5px;
  padding: 11px 14px;
  border: 1px solid rgba(81, 210, 231, .18);
  border-radius: 14px;
  background: rgba(1, 34, 52, .36);
  color: rgba(186, 225, 238, .76);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}
.startup-auth-trust strong {
  color: rgba(222, 248, 255, .9);
  font-size: .78rem;
}
.startup-auth-legal-link {
  display: inline;
  padding: 0;
  border: 0;
  color: #7fefff;
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.startup-auth-legal-link:hover,
.startup-auth-legal-link:focus-visible {
  color: #d8fbff;
}
.loading-overlay.is-ready.is-auth-mode .startup-actions.is-legal-mode {
  width: min(980px, calc(100vw - 54px));
}
.startup-legal-panel {
  width: 100%;
  min-height: 0;
}
.startup-legal-panel[hidden] {
  display: none !important;
}
.startup-legal-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  height: min(82vh, 790px);
  min-height: 0;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid rgba(77, 232, 240, .54);
  border-radius: 28px;
  color: #f5fcff;
  background: linear-gradient(160deg, rgba(4, 51, 73, .97), rgba(2, 29, 53, .97));
  box-shadow: 0 32px 80px rgba(0, 12, 29, .48), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(1.15);
  text-align: left;
}
.startup-legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.startup-legal-header > div {
  display: grid;
  gap: 1px;
}
.startup-legal-header span {
  color: rgba(128, 230, 248, .7);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.startup-legal-header h2 {
  margin: 0;
  color: #fff;
  font-size: 1.42rem;
}
.startup-legal-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 160, 160, .2);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, rgba(122, 22, 22, .96), rgba(88, 15, 15, .96));
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.startup-legal-panel .legal-tabs {
  width: 100%;
}
.startup-legal-scroll {
  min-height: 0;
  overflow: auto;
  padding-right: 5px;
  overscroll-behavior: contain;
}

.startup-auth small {
  min-height: 1.25em;
  color: #e8f6ff;
  font-size: .84rem;
  line-height: 1.4;
  text-align: center;
}
.startup-auth-confirmed {
  margin-bottom: 2px;
  padding: 9px 12px;
  border: 1px solid rgba(126,232,242,.35);
  border-radius: 12px;
  background: rgba(4,62,78,.72);
  color: #dffcff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}
.loading-overlay.is-ready.is-welcome-mode .startup-actions { top: calc(50% + 112px); }
.loading-overlay.is-ready.is-welcome-mode .startup-actions [data-startup-buttons] { gap: 14px; }
.startup-welcome-title {
  color: #effbff;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 3px 18px rgba(0, 21, 46, .72);
}

/* Account / cloud save redesign */
#accountCloudSaveSettingsSection {
  display: block !important;
  height: max-content !important;
  min-height: max-content !important;
  max-height: none !important;
  align-self: start;
}
.settings-panel.has-cloud-account-ui { width: min(1080px, calc(100vw - 100px)); }
.cloud-account-settings-section {
  padding: 0;
  overflow: hidden;
  border-color: rgba(63, 214, 232, .2);
  background:
    radial-gradient(circle at 16% -10%, rgba(49, 212, 237, .12), transparent 32%),
    linear-gradient(180deg, rgba(4, 42, 62, .78), rgba(4, 26, 43, .9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.cloud-account-settings-section > h3 { display: none; }
.cloud-account-settings-section > [data-cloud-account-panel] {
  min-width: 0;
  min-height: max-content;
}
.cloud-account-shell { display: grid; gap: 18px; padding: 22px; }
.cloud-account-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 20px;
  align-items: center;
}
.cloud-account-title-group {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.cloud-account-title-group > div { display: grid; gap: 4px; min-width: 0; }
.cloud-account-title-group > div > strong {
  color: #f2fbff;
  font-size: clamp(1.4rem, 2.5vw, 2.05rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.cloud-account-title-group > div > span {
  color: rgba(169, 219, 239, .8);
  font-size: .92rem;
  line-height: 1.35;
}
.cloud-account-title-icon {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 76px;
  height: 52px;
  border-radius: 28px 30px 24px 25px;
  color: #073454;
  background: linear-gradient(180deg, #a7f4ff, #2dd0fb 72%);
  box-shadow: 0 9px 22px rgba(20, 190, 234, .2), inset 0 1px 0 rgba(255,255,255,.68);
  font-size: 1.55rem;
  font-weight: 1000;
}
.cloud-account-title-icon::before,
.cloud-account-title-icon::after {
  position: absolute;
  z-index: -1;
  content: "";
  border-radius: 50%;
  background: inherit;
}
.cloud-account-title-icon::before { left: 10px; top: -13px; width: 34px; height: 34px; }
.cloud-account-title-icon::after { right: 9px; top: -8px; width: 27px; height: 27px; }
.cloud-sync-state-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 78px;
  box-sizing: border-box;
  padding: 14px 18px;
  border: 1px solid rgba(149, 213, 238, .24);
  border-radius: 24px;
  background: rgba(6, 28, 46, .82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cloud-sync-light {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #7c9aaa;
  box-shadow: 0 0 0 6px rgba(124,154,170,.1), 0 0 20px rgba(124,154,170,.32);
}
.cloud-sync-state-copy { display: grid; gap: 3px; min-width: 0; }
.cloud-sync-state-copy strong { color: #eefbff; font-size: 1rem; line-height: 1.1; }
.cloud-sync-state-copy span { color: rgba(190, 222, 235, .78); font-size: .78rem; line-height: 1.35; }
.cloud-sync-state-card[data-status="syncing"],
.cloud-sync-state-card[data-status="checking"] {
  border-color: rgba(255, 207, 78, .55);
  background: linear-gradient(135deg, rgba(102, 68, 12, .25), rgba(49, 36, 18, .38));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 28px rgba(255, 190, 43, .07);
}
.cloud-sync-state-card[data-status="syncing"] .cloud-sync-light,
.cloud-sync-state-card[data-status="checking"] .cloud-sync-light {
  background: #ffc643;
  box-shadow: 0 0 0 6px rgba(255,198,67,.11), 0 0 22px rgba(255,181,33,.66);
  animation: cloudSyncPulse .85s ease-in-out infinite alternate;
}
.cloud-sync-state-card[data-status="syncing"] .cloud-sync-state-copy strong,
.cloud-sync-state-card[data-status="checking"] .cloud-sync-state-copy strong { color: #ffe27c; }
.cloud-sync-state-card[data-status="synced"] {
  border-color: rgba(79, 239, 137, .54);
  background: linear-gradient(135deg, rgba(12, 96, 54, .3), rgba(7, 58, 45, .42));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 26px rgba(63, 239, 126, .06);
}
.cloud-sync-state-card[data-status="synced"] .cloud-sync-light {
  background: #55ef8a;
  box-shadow: 0 0 0 6px rgba(85,239,138,.1), 0 0 22px rgba(65,242,133,.52);
}
.cloud-sync-state-card[data-status="synced"] .cloud-sync-state-copy strong { color: #7cf29f; }
.cloud-sync-state-card[data-status="error"] {
  border-color: rgba(255, 80, 100, .64);
  background: linear-gradient(135deg, rgba(111, 24, 39, .34), rgba(54, 19, 36, .48));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 28px rgba(255, 63, 91, .08);
}
.cloud-sync-state-card[data-status="error"] .cloud-sync-light {
  background: #ff536a;
  box-shadow: 0 0 0 6px rgba(255,83,106,.1), 0 0 22px rgba(255,65,94,.58);
}
.cloud-sync-state-card[data-status="error"] .cloud-sync-state-copy strong { color: #ff8796; }
.cloud-sync-state-card[data-status="offline"] {
  border-color: rgba(255, 120, 91, .48);
  background: rgba(83, 39, 28, .36);
}
.cloud-sync-state-card[data-status="offline"] .cloud-sync-light { background: #ff795b; box-shadow: 0 0 0 6px rgba(255,121,91,.1), 0 0 18px rgba(255,121,91,.42); }
@keyframes cloudSyncPulse {
  from { opacity: .55; transform: scale(.88); box-shadow: 0 0 0 3px rgba(255,198,67,.08), 0 0 12px rgba(255,181,33,.32); }
  to { opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 8px rgba(255,198,67,.1), 0 0 28px rgba(255,181,33,.8); }
}
.cloud-account-details-panel,
.cloud-account-security {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(79, 186, 222, .2);
  border-radius: 22px;
  background: rgba(1, 23, 39, .44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.cloud-account-section-heading { display: grid; gap: 3px; }
.cloud-account-section-heading > strong { color: #f3fbff; font-size: .98rem; }
.cloud-account-section-heading > span { color: rgba(169, 214, 232, .72); font-size: .77rem; line-height: 1.35; }
.cloud-account-identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cloud-account-identity-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 86px;
  padding: 12px 14px;
  box-sizing: border-box;
  border: 1px solid rgba(76, 196, 231, .2);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(9, 61, 84, .44), rgba(6, 38, 59, .46));
}
.cloud-account-avatar,
.cloud-account-mail-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #62e9f7;
  background: rgba(13, 92, 124, .54);
  border: 1px solid rgba(72, 221, 238, .34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-size: 1.45rem;
}
.cloud-account-avatar { font-size: 0; }
.cloud-account-avatar::before {
  position: absolute;
  top: 11px;
  width: 12px;
  height: 12px;
  content: "";
  border-radius: 50%;
  background: #5ce8f5;
}
.cloud-account-avatar::after {
  position: absolute;
  bottom: 9px;
  width: 23px;
  height: 13px;
  content: "";
  border-radius: 13px 13px 7px 7px;
  background: #5ce8f5;
}
.cloud-account-identity-copy { display: grid; gap: 3px; min-width: 0; }
.cloud-account-identity-copy > span { color: rgba(168, 214, 233, .78); font-size: .74rem; }
.cloud-account-identity-copy > strong { min-width: 0; overflow-wrap: anywhere; color: #f4fcff; font-size: 1.04rem; }
.cloud-account-identity-copy > small { color: #ffd776; font-size: .68rem; overflow-wrap: anywhere; }
.cloud-account-edit-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(90, 206, 237, .2);
  border-radius: 50%;
  color: #67ddf4;
  background: rgba(19, 83, 112, .42);
  font: inherit;
  font-size: 1.05rem;
  cursor: pointer;
}
.cloud-account-edit-button:hover,
.cloud-account-edit-button:focus-visible { border-color: rgba(95, 230, 247, .65); background: rgba(23, 108, 136, .55); }
.cloud-account-username-editor {
  position: absolute;
  inset: 8px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(82, 221, 239, .3);
  border-radius: 15px;
  background: rgba(4, 35, 54, .97);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}
.cloud-account-username-editor[hidden] { display: none !important; }
.cloud-account-username-editor input,
.cloud-account-email-change-controls input,
.cloud-settings-auth input {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(122, 214, 240, .28);
  border-radius: 11px;
  padding: 10px 11px;
  color: #f3fbff;
  background: rgba(3, 28, 44, .88);
  font: inherit;
}
.cloud-account-username-editor input:focus,
.cloud-account-email-change-controls input:focus,
.cloud-settings-auth input:focus { outline: 2px solid rgba(55, 218, 236, .18); border-color: rgba(83, 225, 240, .62); }
.cloud-account-primary-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cloud-account-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 78px;
  padding: 13px 16px;
  border: 1px solid rgba(119, 202, 231, .26);
  border-radius: 22px;
  color: #edfaff;
  background: linear-gradient(180deg, rgba(31, 83, 112, .72), rgba(18, 59, 82, .8));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 9px 20px rgba(0, 12, 27, .12);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, filter .16s ease;
}
.cloud-account-action:hover,
.cloud-account-action:focus-visible { transform: translateY(-1px); border-color: rgba(126, 231, 248, .54); filter: brightness(1.06); }
.cloud-account-action:active { transform: translateY(1px) scale(.99); }
.cloud-account-action-primary {
  color: #052d4a;
  border-color: rgba(151, 246, 255, .75);
  background: linear-gradient(180deg, #85effb, #25cef3);
  box-shadow: 0 0 27px rgba(29, 211, 239, .13), inset 0 1px 0 rgba(255,255,255,.5), 0 9px 20px rgba(0, 12, 27, .12);
}
.cloud-account-action-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 1.7rem;
  font-weight: 900;
}
.cloud-account-action > span:last-child { display: grid; gap: 2px; min-width: 0; }
.cloud-account-action strong { font-size: .95rem; line-height: 1.1; }
.cloud-account-action small { color: rgba(193, 225, 238, .76); font-size: .7rem; line-height: 1.2; }
.cloud-account-action-primary small { color: rgba(4, 49, 77, .72); }
.cloud-account-security { margin-top: 0; }
.cloud-account-security-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: 12px; }
.cloud-account-security-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border-radius: 16px;
  background: rgba(5, 42, 61, .52);
  border: 1px solid rgba(74, 172, 205, .16);
}
.cloud-account-security-card > div:first-child { display: grid; gap: 4px; min-width: 0; }
.cloud-account-security-card strong { color: #f2fbff; font-size: .82rem; }
.cloud-account-security-card span { color: rgba(189, 221, 234, .66); font-size: .7rem; line-height: 1.4; }
.cloud-account-security-card-email { grid-template-columns: minmax(0, .85fr) minmax(260px, 1.15fr); }
.cloud-account-email-change-controls { display: grid; grid-template-columns: minmax(160px, 1fr) auto; gap: 7px; align-items: center; min-width: 0; }
.cloud-account-message { min-height: 1.25em; color: #bfefff; text-align: center; font-size: .72rem; }
.cloud-settings-auth { display: grid; gap: 10px; }
.cloud-settings-auth-card { padding: 18px; border-radius: 18px; background: rgba(4, 39, 58, .62); border: 1px solid rgba(78, 198, 229, .2); }
.cloud-settings-auth-heading { display: grid; gap: 4px; }
.cloud-settings-auth-heading strong { color: #f3fbff; font-size: 1rem; }
.cloud-settings-auth-heading span { color: rgba(190, 222, 235, .72); font-size: .78rem; }

.cloud-dialog-backdrop { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 20px; background: rgba(0,12,23,.78); }
.cloud-dialog { width: min(680px, 94vw); max-height: 90vh; overflow: auto; border-radius: 20px; padding: 22px; background: #f5fbff; color: #12384d; box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.cloud-dialog h2 { margin-top: 0; }
.cloud-conflict-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 16px 0; }
.cloud-conflict-grid section { display: grid; gap: 9px; padding: 14px; border-radius: 14px; background: #e6f5ff; }
.cloud-conflict-grid span { font-size: 13px; }

@media (max-width: 900px) {
  .settings-panel.has-cloud-account-ui { width: min(760px, calc(100vw - 44px)); }
  .cloud-account-hero { grid-template-columns: 1fr; }
  .cloud-sync-state-card { width: 100%; }
  .cloud-account-primary-actions { grid-template-columns: 1fr; }
  .cloud-account-security-grid { grid-template-columns: 1fr; }
  .cloud-account-security-card-email { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .loading-overlay.is-ready.is-auth-mode .startup-actions { width: calc(100vw - 28px); }
  .startup-auth { padding: 24px 20px 22px; border-radius: 24px; gap: 16px; }
  .startup-auth-actions { grid-template-columns: 1fr; }
  .startup-auth-input-wrap { min-height: 58px; }
  .startup-auth-input-wrap input { min-height: 56px; }
  .cloud-account-shell { padding: 14px; }
  .cloud-account-identity-grid { grid-template-columns: 1fr; }
  .cloud-account-title-icon { width: 62px; height: 45px; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud-sync-state-card[data-status="syncing"] .cloud-sync-light,
  .cloud-sync-state-card[data-status="checking"] .cloud-sync-light { animation: none; }
}

/* BubbleBodega account and purchase history. */
.tankazon-store .tankazon-mainbar {
  grid-template-columns: 170px minmax(280px, 1fr) auto auto !important;
}
.tankazon-account-button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tankazon-account-button:hover,
.tankazon-account-button:focus-visible,
.tankazon-store.tankazon-account-open .tankazon-account-button {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
  outline: none;
}
.tankazon-account-button > img { width: 30px; height: 30px; object-fit: contain; }
.tankazon-account-button > span { display: grid; min-width: 0; line-height: 1.05; }
.tankazon-account-button small { color: #b9cfdf; font-size: .64rem; }
.tankazon-account-button strong {
  max-width: 160px;
  overflow: hidden;
  color: #fff;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tankazon-store.tankazon-account-open .tankazon-panel { grid-template-rows: auto auto minmax(0, 1fr); }
.tankazon-store.tankazon-account-open .tankazon-promo-strip,
.tankazon-store.tankazon-account-open .tankazon-body { display: none !important; }
.tankazon-store.tankazon-account-open .tankazon-all-categories,
.tankazon-store.tankazon-account-open .store-tab-button {
  border-color: transparent;
  background: transparent;
  color: #fff;
  box-shadow: none;
}
.tankazon-account-page {
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  padding: 24px clamp(18px, 3vw, 44px) 40px;
  overflow: auto;
  background: #f4f5f5;
  color: #0f1111;
}
.tankazon-account-page[hidden] { display: none !important; }
.tankazon-account-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 450px);
  align-items: end;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #d5d9d9;
}
.tankazon-account-back {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #007185;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.tankazon-account-back:hover { color: #c45500; text-decoration: underline; }
.tankazon-account-eyebrow { margin: 0 0 4px; color: #565959; font-size: .78rem; font-weight: 800; }
.tankazon-account-heading h1 { margin: 0; color: #0f1111; font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.1; }
.tankazon-account-heading h1:focus { outline: none; }
.tankazon-account-heading p:last-child { margin: 7px 0 0; color: #565959; font-size: .9rem; }
.tankazon-order-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  height: 42px;
  overflow: hidden;
  border: 1px solid #888c8c;
  border-radius: 8px;
  background: #fff;
}
.tankazon-order-search:focus-within { outline: 3px solid rgba(255, 153, 0, .42); border-color: #c45500; }
.tankazon-order-search input {
  min-width: 0;
  height: 40px;
  padding: 0 13px;
  border: 0;
  background: #fff;
  color: #0f1111;
  font: inherit;
  outline: none;
}
.tankazon-order-search button {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-left: 1px solid #d5d9d9;
  border-radius: 0;
  background: linear-gradient(180deg, #ffb627, #ff9900);
  color: #071a2c;
  font: inherit;
  font-size: 1.55rem;
  font-weight: 900;
  cursor: pointer;
}
.tankazon-order-search button:hover { background: #f7a600; }
.tankazon-orders-empty button,
.tankazon-order-pagination button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #152536;
  border-radius: 999px;
  background: #213448;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.tankazon-orders-empty button:hover,
.tankazon-order-pagination button:hover:not(:disabled) { background: #314a62; }
.tankazon-order-summary { max-width: 1100px; margin: 0 auto 10px; color: #565959; font-size: .82rem; font-weight: 800; }
.tankazon-order-list { display: grid; gap: 14px; max-width: 1100px; margin: 0 auto; }
.tankazon-order-card { overflow: hidden; border: 1px solid #d5d9d9; border-radius: 10px; background: #fff; }
.tankazon-order-card.is-highlighted { border-color: #009bc6; outline: 3px solid rgba(0, 174, 222, .3); box-shadow: 0 8px 24px rgba(0, 113, 133, .18); }
.tankazon-order-card > header {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr) minmax(180px, 1.4fr);
  gap: 24px;
  padding: 13px 18px;
  background: #edf0f0;
}
.tankazon-order-card > header > div { display: grid; align-content: start; gap: 3px; }
.tankazon-order-card > header small { color: #565959; font-size: .65rem; }
.tankazon-order-card > header strong { display: flex; align-items: center; gap: 5px; color: #263746; font-size: .82rem; }
.tankazon-order-card > header img,
.tankazon-order-product > span img { width: 16px; height: 16px; object-fit: contain; }
.tankazon-order-number { justify-items: end; text-align: right; }
.tankazon-order-products { display: grid; padding: 4px 18px 10px; }
.tankazon-order-product {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 10px 0;
  border-bottom: 1px solid #edf0f0;
}
.tankazon-order-product:last-child { border-bottom: 0; }
.tankazon-order-product > img { width: 76px; height: 76px; object-fit: contain; }
.tankazon-order-product > div { display: grid; gap: 6px; min-width: 0; }
.tankazon-order-product > div strong { color: #007185; font-size: .92rem; }
.tankazon-order-product > div small { color: #565959; font-size: .76rem; }
.tankazon-order-product .tankazon-return-status { color: #007185; font-size: 1.15rem; font-weight: 800; line-height: 1.25; letter-spacing: .04em; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-return-status { color: var(--bodega-dark-link, #80d9e9); }
.tankazon-return-button { justify-self: start; border: 1px solid #888c8c; border-radius: 8px; padding: 7px 12px; background: #fff; color: #0f1111; font-size: .8rem; cursor: pointer; }
.tankazon-return-button:hover { background: #f0f2f2; }
.tankazon-return-button:focus-visible { outline: 3px solid #007185; outline-offset: 2px; }
.tankazon-return-button:disabled { opacity: .6; cursor: wait; }
.tankazon-order-product > span { display: flex; align-items: center; gap: 5px; color: #0f1111; font-size: .82rem; font-weight: 800; }
.tankazon-orders-empty { display: grid; justify-items: center; gap: 9px; padding: 64px 20px; border: 1px solid #d5d9d9; border-radius: 10px; background: #fff; text-align: center; }
.tankazon-orders-empty strong { font-size: 1.15rem; }
.tankazon-orders-empty span { color: #565959; font-size: .86rem; }
.tankazon-orders-empty button { margin-top: 8px; background: #ffd814; border-color: #f2c200; color: #0f1111; }
.tankazon-orders-empty button:hover { background: #f7ca00; }
.tankazon-order-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; max-width: 1100px; margin: 22px auto 0; }
.tankazon-order-pagination span { color: #565959; font-size: .82rem; font-weight: 800; }
.tankazon-order-pagination button:disabled { opacity: .4; cursor: default; }

@media (max-width: 1180px) {
  .tankazon-store .tankazon-mainbar { grid-template-columns: 150px minmax(220px, 1fr) auto auto !important; gap: 8px; }
  .tankazon-account-button { grid-template-columns: 28px; padding: 5px 8px; }
  .tankazon-account-button > img { width: 28px; height: 28px; }
  .tankazon-account-button > span { display: none; }
}
@media (max-width: 820px) {
  .tankazon-store .tankazon-mainbar { grid-template-columns: 105px minmax(0, 1fr) auto auto !important; gap: 6px; }
  .tankazon-account-button { min-height: 40px; }
  .tankazon-account-heading { grid-template-columns: 1fr; gap: 16px; }
  .tankazon-order-search { grid-template-columns: minmax(0, 1fr) 48px; }
}
@media (max-width: 620px) {
  .tankazon-order-card > header { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tankazon-order-number { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .tankazon-order-product { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
  .tankazon-order-product > img { width: 58px; height: 58px; }
  .tankazon-order-product > span { grid-column: 2; }
}
/* BubbleBodega product detail view. Keep the catalog mounted for back navigation. */
.tankazon-store.tankazon-item-open .tankazon-body { grid-template-columns: minmax(0, 1fr) 340px; }
.tankazon-store.tankazon-item-open .tankazon-catalog-area > .store-drawer { display: none !important; }
.tankazon-store.tankazon-item-open .bubblebodega-home-page { display: none !important; }
@media (max-width: 900px) {
  .tankazon-store.tankazon-item-open .tankazon-body { grid-template-columns: minmax(0, 1fr) minmax(220px, 32vw); }
  .tankazon-store.tankazon-item-open .tankazon-cart { display: grid !important; }
}
.tankazon-store .tankazon-item-page[hidden] { display: none !important; }
.tankazon-store .tankazon-item-page { padding: 20px 28px 40px; background: #fff; color: #0f1111; min-height: 100%; box-sizing: border-box; }
.tankazon-store .tankazon-item-back { border: 0; padding: 6px 0; background: transparent; color: #565959; cursor: pointer; font: inherit; font-size: 13px; }
.tankazon-store .tankazon-item-back:hover { color: #007185; text-decoration: underline; }
.tankazon-item-category { margin: 16px 0 24px; color: #565959; font-size: 12px; }
.tankazon-item-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 230px; gap: 28px; align-items: start; }
.tankazon-item-image { display: grid; place-items: center; min-width: 0; min-height: 300px; padding: 20px; border-radius: 10px; background: #f7f9fa; }
.tankazon-item-gallery { min-width: 0; }
.tankazon-item-sizes { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #0f1111; font-size: 14px; }
.tankazon-item-sizes[hidden] { display: none; }
.tankazon-item-sizes > strong { margin-right: 2px; }
.tankazon-store .tankazon-item-size-option { appearance: none; border: 0; background: transparent; padding: 2px 1px; color: #0f1111; font: inherit; cursor: pointer; }
.tankazon-store .tankazon-item-size-option:hover { color: #007185; text-decoration: underline; }
.tankazon-store .tankazon-item-size-option[aria-checked="true"] { font-weight: 700; }
.tankazon-item-size-separator { color: #8a8a8a; user-select: none; }
.tankazon-item-variant-label { margin: 16px 0 10px; color: #565959; font-size: 14px; }
.tankazon-item-variants { display: flex; flex-wrap: wrap; gap: 10px; }
.tankazon-item-variants[hidden], .tankazon-item-variant-label[hidden] { display: none; }
.tankazon-store .tankazon-item-variants button { display: grid; place-items: center; width: 64px; height: 64px; padding: 4px; overflow: hidden; border: 1px solid #888c8c; border-radius: 7px; background: #fff; cursor: pointer; }
.tankazon-store .tankazon-item-variants button[aria-pressed="true"] { border: 2px solid #c45500; background: #fff8eb; box-shadow: 0 0 0 2px #fbd8b4; }
.tankazon-store .tankazon-item-variants button.is-locked { cursor: not-allowed; opacity: .52; filter: grayscale(.85); }
.tankazon-store .tankazon-item-variants button.is-locked[aria-pressed="true"] { border: 1px solid #888c8c; background: #fff; box-shadow: none; }
.tankazon-store .tankazon-item-variants button.is-debug-bypassed { border-color: #007185; box-shadow: inset 0 0 0 1px rgba(0, 113, 133, .18); }
.tankazon-item-variants img { width: 48px !important; height: 48px !important; max-width: 48px !important; max-height: 48px !important; object-fit: contain !important; object-position: center !important; }
.tankazon-store .tankazon-item-art { display: block; width: 100%; height: 340px; object-fit: contain; border: 0; border-radius: 8px; }
.tankazon-store .shop-card[data-store-seller="Arcadia Home Aquatics" i]::after {
  display: none !important;
}

.tankazon-item-image.is-arcadia-preview {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tankazon-item-image.is-arcadia-preview::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 18px;
  width: 196px;
  height: 76px;
  background: url("../assets/web/proteus/sub/arcadia_logo.webp") left top / contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

.tankazon-item-image.is-arcadia-preview .tankazon-item-art {
  position: relative;
  z-index: 2;
}

.tankazon-store .shop-card[data-store-seller="Common Current" i]::after {
  display: none !important;
}

.tankazon-item-image.is-common-current-preview {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tankazon-item-image.is-common-current-preview::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 18px;
  width: 180px;
  height: 68px;
  background: url("../assets/web/proteus/sub/common-current_logo.webp") left top / contain no-repeat;
  filter:
    drop-shadow(1px 0 0 #fff)
    drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 -1px 0 #fff)
    drop-shadow(1px 1px 0 #fff)
    drop-shadow(-1px 1px 0 #fff)
    drop-shadow(1px -1px 0 #fff)
    drop-shadow(-1px -1px 0 #fff);
  opacity: 0.92;
  pointer-events: none;
}

.tankazon-item-image.is-common-current-preview .tankazon-item-art {
  position: relative;
  z-index: 2;
}

.tankazon-store .shop-card[data-store-seller="Proteus Biodyne" i]::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8px;
  left: 8px;
  width: calc(100% - 16px);
  height: 200px;
  border-radius: 5px;
  background: url("../assets/web/proteus/PB_Item_Thumb.webp") center / cover no-repeat;
  filter: blur(1.5px);
  transform: scale(1.012);
  transform-origin: center;
  pointer-events: none;
}
.tankazon-store .shop-card[data-store-seller="Proteus Biodyne" i] > * { position: relative; z-index: 1; }
.tankazon-store .shop-card[data-store-seller="Proteus Biodyne" i] .shop-thumb,
.tankazon-store .shop-card[data-store-seller="Proteus Biodyne" i] .decor-thumb { background: transparent !important; }
.tankazon-item-image.is-proteus-preview { position: relative; isolation: isolate; overflow: hidden; background: #073d5e !important; }
.tankazon-item-image.is-proteus-preview::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -8px;
  background: url("../assets/web/proteus/PB_Item_Thumb.webp") center / cover no-repeat;
  filter: blur(2px);
  transform: scale(1.025);
  pointer-events: none;
}
.tankazon-item-image.is-proteus-preview .tankazon-item-art { position: relative; z-index: 1; background: transparent !important; }
@media (max-width: 720px) {
  .tankazon-store .shop-card[data-store-seller="Proteus Biodyne" i]::before { height: 112px; }
}
.tankazon-item-description { min-width: 0; overflow-wrap: anywhere; }
.tankazon-store .tankazon-item-description h1 { margin: 0; color: #0f1111; font-size: 26px; font-weight: 500; line-height: 1.3; }
.tankazon-item-brand { color: #007185; font-size: 13px; margin: 8px 0 16px; padding-bottom: 16px; border-bottom: 1px solid #d5d9d9; }
.tankazon-item-price { color: #0f1111; font-size: 26px; line-height: 1.3; }
.tankazon-item-price-original { color: #565959; margin-right: 10px; text-decoration: line-through; text-decoration-color: #b12704; text-decoration-thickness: 2px; }
.tankazon-item-price-sale { color: #b12704; font-weight: 700; }
.tankazon-store .tankazon-item-description h2 { margin: 24px 0 12px; font-size: 17px; color: #0f1111; }
.tankazon-store .tankazon-fish-additional-heading { margin: 20px 0 10px; color: #0f1111; font-size: 15px; line-height: 1.25; }
.tankazon-item-details { font-size: 14px; line-height: 1.65; }
.tankazon-store .tankazon-item-details .tankazon-item-facts > p { margin: 0 0 14px; }
.tankazon-store .tankazon-item-details .tankazon-item-facts > p:last-child { margin-bottom: 0; }
.tankazon-item-facts { display: grid; gap: 12px; }
.tankazon-store .tankazon-item-details .fish-meta { color: #565959; font-size: 14px; }
.shop-about-attribution,
.shop-about-tagline { display: none; }
.tankazon-store .tankazon-item-details .shop-about-attribution { display: block; margin-top: 2px; color: #0f1111; font-size: 14px; font-weight: 800; letter-spacing: 0.02em; }
.tankazon-store .tankazon-item-details .shop-about-tagline { display: block; margin-top: -10px; color: #565959; font-size: 14px; font-style: italic; }
.tankazon-store .tankazon-item-details .shop-stat-list { display: grid; position: static; opacity: 1; visibility: visible; gap: 8px; padding: 0; background: none; border: 0; box-shadow: none; }
.tankazon-store .tankazon-item-details .shop-stat-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; border-bottom: 1px solid #eee; padding-bottom: 6px; }
.tankazon-store .tankazon-item-details .shop-stat-label { color: #565959; }
.tankazon-store .tankazon-item-details .shop-stat-value { color: #0f1111; }
.tankazon-store .tankazon-item-details .shop-comfort-profile { color: #565959; }
.tankazon-store .tankazon-item-details .comfort-chip { color: #254d57; background: #eaf3f5; border-color: #cadfe3; }
.tankazon-item-fit { margin-top: 30px; padding: 20px 22px; border: 1px solid #0d74a7; border-radius: 8px; background: #f0f8fc; }
.tankazon-item-fit[hidden] { display: none; }
.tankazon-item-fit-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tankazon-item-fit-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #147eb5; color: #fff; font: 700 24px/1 Arial, sans-serif; }
.tankazon-item-fit-header h2 { margin: 0; color: #0f1111; font-size: 22px; line-height: 1.2; }
.tankazon-item-fit-header p { margin: 3px 0 0; color: #44545a; font-size: 14px; }
.tankazon-item-fit-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tankazon-item-fit-group + .tankazon-item-fit-group { padding-left: 20px; border-left: 1px solid #9ec7d8; }
.tankazon-item-fit-group h3 { margin: 0 0 10px; color: #14714c; font-size: 16px; }
.tankazon-item-fit-warnings h3 { color: #9b6500; }
.tankazon-item-fit-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tankazon-item-fit-entry { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #9ec7d8; border-radius: 8px; background: #fff; }
.tankazon-item-fit-entry-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #38a86f; color: #fff; font: 700 18px/1 Arial, sans-serif; }
.tankazon-item-fit-entry.is-warning .tankazon-item-fit-entry-icon { background: #e7a328; color: #18222a; }
.tankazon-item-fit-entry strong, .tankazon-item-fit-entry span:not(.tankazon-item-fit-entry-icon) { display: block; overflow-wrap: anywhere; }
.tankazon-item-fit-entry strong { color: #18222a; font-size: 14px; line-height: 1.2; }
.tankazon-item-fit-entry span:not(.tankazon-item-fit-entry-icon) { margin-top: 2px; color: #485961; font-size: 13px; line-height: 1.35; }
.tankazon-item-buybox { display: grid; gap: 12px; padding: 20px; border: 1px solid #d5d9d9; border-radius: 9px; }
.tankazon-item-availability { color: #007600; font-size: 18px; margin: 4px 0 0; }
.tankazon-item-delivery { margin: 0 0 4px; color: #565959; font-size: 13px; }
.tankazon-store .tankazon-item-buybox button { width: 100%; min-height: 38px; border-radius: 22px; border: 1px solid transparent; color: #0f1111; font: inherit; font-size: 14px; cursor: pointer; }
.tankazon-store .tankazon-item-add { background: #2f8fff; border-color: #1d6fd6; color: #ffffff; }
.tankazon-store .tankazon-item-add:hover { background: #217be3; }
.tankazon-store .tankazon-item-buy { background: #28b36d; border-color: #1f8f5b; color: #ffffff; }
.tankazon-store .tankazon-item-buy:hover { background: #20945a; }
.tankazon-store .tankazon-item-buybox button:disabled { opacity: .45; cursor: not-allowed; }
.tankazon-item-status { margin: 0; color: #365d39; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.tankazon-item-status:empty { display: none; }
.tankazon-item-seller { display: grid; grid-template-columns: auto 1fr; gap: 8px; border-top: 1px solid #eee; padding-top: 14px; font-size: 12px; color: #565959; }
.tankazon-item-seller strong { font-weight: 400; color: #0f1111; }
.tankazon-store .shop-card .shop-thumb[role="button"], .tankazon-store .shop-card .decor-thumb[role="button"] { cursor: pointer; }
.tankazon-store [role="button"]:focus-visible, .tankazon-item-page button:focus-visible { outline: 3px solid #007185; outline-offset: 3px; }
@media (max-width: 1050px) {
  .tankazon-item-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
  .tankazon-item-buybox { grid-column: 2; }
  .tankazon-item-gallery { grid-row: span 2; }
}
@media (max-width: 650px) {
  .tankazon-store .tankazon-item-page { padding: 16px; }
  .tankazon-item-layout { grid-template-columns: minmax(0, 1fr); }
  .tankazon-item-buybox { grid-column: 1; }
  .tankazon-item-gallery { grid-row: auto; }
  .tankazon-item-image { min-height: 180px; }
  .tankazon-store .tankazon-item-art { height: 220px; }
  .tankazon-item-fit { padding: 16px; }
  .tankazon-item-fit-columns { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tankazon-item-fit-group + .tankazon-item-fit-group { padding: 16px 0 0; border-top: 1px solid #9ec7d8; border-left: 0; }
}

/* Phase 7: compact BubbleBodega fish product detail cards. */
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-layout,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-layout {
  grid-template-columns: minmax(250px, .9fr) minmax(340px, 1.25fr) minmax(210px, 240px);
  gap: 22px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-description h1,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-description h1 {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.2;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-generic-about-heading,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-generic-about-heading,
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-brand,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-brand,
.tankazon-store .tankazon-item-page.is-medicine-product #tankazonItemPrice,
.tankazon-store .tankazon-item-page.is-fish-product #tankazonItemPrice {
  display: none !important;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-details,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-details {
  display: grid;
  gap: 18px;
  font-size: 14px;
  line-height: 1.5;
}
.tankazon-store .tankazon-fish-info-card,
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit {
  border: 1px solid #63aec7;
  border-radius: 10px;
  background: #fbfdfe;
  box-shadow: 0 2px 7px rgba(25, 71, 91, .08);
}
.tankazon-store .tankazon-fish-info-card {
  padding: 20px 22px;
}
.tankazon-store .tankazon-fish-info-card-header,
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-header,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tankazon-store .tankazon-fish-info-card-header {
  margin-bottom: 18px;
}
.tankazon-store .tankazon-fish-info-card-header h2,
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-header h2,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-header h2 {
  margin: 0;
  color: #102832;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.tankazon-store .tankazon-fish-info-icon,
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-icon,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #1281a9;
}
.tankazon-store .tankazon-fish-info-heading-icon,
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-icon,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e7f5fa;
}
.tankazon-store .tankazon-fish-info-icon svg,
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-icon svg,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-icon svg {
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tankazon-store .tankazon-item-details .tankazon-fish-about {
  display: grid;
  gap: 14px;
}
.tankazon-store .tankazon-item-details .tankazon-fish-about > p {
  margin: 0;
  color: #263a42;
  line-height: 1.5;
}
.tankazon-store .tankazon-item-details .tankazon-fish-about .shop-about-attribution {
  margin-top: 0;
}
.tankazon-store .tankazon-item-details .tankazon-fish-about .shop-about-tagline {
  margin-top: -4px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-details .tankazon-fish-additional-info,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-details .tankazon-fish-additional-info {
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-fish-info-row,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-fish-info-row {
  display: grid;
  grid-template-columns: 30px minmax(86px, .42fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #d8e6eb;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-fish-info-row:first-child,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-fish-info-row:first-child {
  padding-top: 0;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-fish-info-row:last-child,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-fish-info-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.tankazon-store .tankazon-fish-info-row-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #eef8fb;
}
.tankazon-store .tankazon-fish-info-row-icon svg {
  width: 19px;
  height: 19px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-fish-info-row .shop-stat-label,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-fish-info-row .shop-stat-label {
  color: #50636b;
  font-weight: 650;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-fish-info-row .shop-stat-value,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-fish-info-row .shop-stat-value {
  min-width: 0;
  color: #12252d;
  text-align: left;
  overflow-wrap: anywhere;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit {
  margin-top: 18px;
  padding: 20px 22px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-header,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-header {
  margin-bottom: 16px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-icon,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-icon {
  background: #e7f5fa;
  color: #1281a9;
  font: inherit;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-header p,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-header p {
  margin: 3px 0 0;
  color: #53666f;
  font-size: 13px;
  line-height: 1.35;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-columns,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-columns {
  gap: 16px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-group + .tankazon-item-fit-group,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-group + .tankazon-item-fit-group {
  padding-left: 16px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-group h3,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-group h3 {
  margin-bottom: 9px;
  font-size: 15px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-list,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-list {
  gap: 7px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-entry,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-entry {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-entry-icon,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-entry-icon {
  width: 26px;
  height: 26px;
  font-size: 16px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-buybox,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-buybox {
  gap: 10px;
  padding: 18px;
  border-radius: 10px;
  background: #fff;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-buybox .tankazon-item-price,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-buybox .tankazon-item-price {
  font-size: 24px;
  font-weight: 650;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-availability,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-availability {
  margin-top: 0;
  font-size: 16px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-seller,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-seller {
  display: flex;
  grid-template-columns: none;
  align-items: baseline;
  gap: 5px;
  padding-top: 12px;
}
.tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-seller #tankazonItemSeller,
.tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-seller #tankazonItemSeller {
  color: #0f1111;
  font-weight: 600;
}

@media (max-width: 1050px) {
  .tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-layout,
  .tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-layout {
    grid-template-columns: minmax(240px, .8fr) minmax(320px, 1.2fr);
    gap: 22px;
  }
  .tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-gallery,
  .tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-gallery {
    grid-row: 1 / span 2;
  }
  .tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-buybox,
  .tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-buybox {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .tankazon-store .tankazon-item-page.is-medicine-product,
  .tankazon-store .tankazon-item-page.is-fish-product {
    padding: 16px;
  }
  .tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-layout,
  .tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-gallery,
  .tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-gallery,
  .tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-buybox,
  .tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-buybox {
    grid-column: 1;
    grid-row: auto;
  }
  .tankazon-store .tankazon-item-page.is-medicine-product .tankazon-fish-info-card,
  .tankazon-store .tankazon-item-page.is-fish-product .tankazon-fish-info-card,
  .tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit,
  .tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit,
  .tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-buybox,
  .tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-buybox {
    padding: 16px;
  }
  .tankazon-store .tankazon-item-page.is-medicine-product .tankazon-fish-info-row,
  .tankazon-store .tankazon-item-page.is-fish-product .tankazon-fish-info-row {
    grid-template-columns: 28px 78px minmax(0, 1fr);
    gap: 9px;
  }
  .tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-columns,
  .tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .tankazon-store .tankazon-item-page.is-medicine-product .tankazon-item-fit-group + .tankazon-item-fit-group,
  .tankazon-store .tankazon-item-page.is-fish-product .tankazon-item-fit-group + .tankazon-item-fit-group {
    padding: 14px 0 0;
    border-top: 1px solid #9ec7d8;
    border-left: 0;
  }
}

.decor-history-controls {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
}
#editDecorTray:has(.decor-history-controls) {
  grid-template-rows: auto 25px minmax(0, 1fr);
  height: var(--bubble-edit-tray-height);
  min-height: var(--bubble-edit-tray-height);
  max-height: var(--bubble-edit-tray-height);
}
.decor-history-controls .small-button {
  min-height: 23px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.61rem;
  line-height: 1;
  white-space: nowrap;
}
.decor-history-controls button:disabled { opacity: .4; cursor: default; }
.decor-layout-dialog {
  box-sizing: border-box;
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 22px;
  border: 1px solid #49758c;
  border-radius: 20px;
  background: #0b2333;
  color: #ecf8ff;
  box-shadow: 0 24px 80px #0008;
}
.decor-layout-dialog::backdrop { background: #00101baf; backdrop-filter: blur(4px); }
.decor-layout-heading, .decor-layout-actions, .decor-layout-save > div {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.decor-layout-heading { justify-content: space-between; }
.decor-layout-heading h2 { margin: 0; }
.decor-layout-dialog p { font-size: .9rem; line-height: 1.5; color: #bdd7e7; }
.decor-layout-save label { display: block; margin-bottom: 6px; }
.decor-layout-save input {
  flex: 1; min-width: 100px; padding: 10px; color: #ecf8ff; background: #041622;
  border: 1px solid #49758c; border-radius: 8px; font: inherit;
}
.decor-layout-dialog button { min-height: 40px; }
.decor-layout-dialog button:focus-visible, .decor-layout-dialog input:focus-visible { outline: 2px solid #8be0ff; outline-offset: 3px; }
.decor-layout-list { display: flex; flex-wrap: wrap; gap: 8px; }
.decor-layout-list button { overflow-wrap: anywhere; max-width: 100%; white-space: normal; }
.decor-layout-detail { border-top: 1px solid #49758c; margin-top: 16px; padding-top: 8px; }
.decor-layout-detail h3 { overflow-wrap: anywhere; }
.store-facets {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 42px;
  padding: 5px 10px;
  overflow: visible;
  border-right: 0;
  border-bottom: 1px solid #d6dfe5;
  color: #18303f;
  background: rgba(255,255,255,.98);
  box-shadow: 0 2px 7px rgba(15,17,17,.06);
}
.store-facet-head { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.store-facet-head > strong { font-size: .78rem; }
.store-facet-count { margin: 0; color: #627681; font-size: .7rem; }
.store-facet-clear { padding: 3px 6px; border: 0; border-radius: 5px; color: #096b85; background: #eef7fa; cursor: pointer; font-size: .68rem; font-weight: 750; }
.store-facet-clear:hover:not(:disabled) { background: #dceff4; }
.store-facet-clear:disabled { opacity: .42; cursor: default; }
.store-facet-groups { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; overflow: visible; }
.store-facet-group { position: relative; flex: 0 0 auto; }
.store-facet-group > summary { list-style: none; min-height: 30px; padding: 6px 22px 6px 9px; border: 1px solid #b8c8d2; border-radius: 7px; background: #fff; color: #233f51; font-size: .7rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.store-facet-group > summary::-webkit-details-marker { display: none; }
.store-facet-group > summary::after { content: "▾"; position: absolute; right: 8px; top: 7px; color: #667b88; font-size: .65rem; }
.store-facet-group[open] > summary { border-color: #147593; box-shadow: 0 0 0 2px rgba(20,117,147,.14); }
.store-facet-options { position: absolute; top: calc(100% + 5px); left: 0; z-index: 30; display: grid; min-width: 190px; max-width: min(300px, 72vw); max-height: 300px; overflow: auto; padding: 7px; border: 1px solid #b8c8d2; border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(15, 35, 48, .2); }
.store-facet-options label { display: grid; grid-template-columns: 16px minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 30px; margin: 0; padding: 5px 6px; border-radius: 5px; cursor: pointer; font-size: .72rem; line-height: 1.25; }
.store-facet-options label:hover { background: #f1f7fa; }
.store-facet-options input { width: 14px; height: 14px; margin: 0; accent-color: #147593; }
.store-facet-options input:focus-visible { outline: 2px solid #147593; outline-offset: 2px; }
.store-facet-options small { color: #718795; font-size: .65rem; }
.store-overlay .shop-toolbar-summary { display: none; }
.store-overlay .shop-card.store-facet-hidden,
.store-overlay .store-facet-empty-section { display: none !important; }
.store-facet-empty { grid-column: 1; grid-row: 2; align-self: start; margin: 14px; padding: 18px; color: #365369; background: #fff; border-radius: 8px; }
.tankazon-store .tankazon-body {
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-rows: auto minmax(0, 1fr);
}
.tankazon-store .tankazon-catalog-area { grid-column: 1; grid-row: 2; scrollbar-width: auto; scrollbar-color: #899ba7 #e4e9ec; }
.tankazon-store .tankazon-catalog-area::-webkit-scrollbar { width: 13px; height: 13px; }
.tankazon-store .tankazon-catalog-area::-webkit-scrollbar-track { background: #e4e9ec; }
.tankazon-store .tankazon-catalog-area::-webkit-scrollbar-thumb { min-height: 44px; border: 3px solid #e4e9ec; border-radius: 999px; background: #899ba7; }
.tankazon-store .tankazon-catalog-area::-webkit-scrollbar-thumb:hover { background: #687d8a; }
.tankazon-store .tankazon-cart { grid-column: 2; grid-row: 2; }
.tankazon-store.tankazon-item-open .store-facets,
.tankazon-store.tankazon-item-open .store-facet-empty { display: none; }
.tankazon-store.tankazon-item-open .tankazon-catalog-area,
.tankazon-store.tankazon-item-open .tankazon-cart { grid-row: 1 / -1; }
.store-overlay:not(.tankazon-store) .store-facets { border-radius: 12px; margin-bottom: 14px; }
@media (max-width: 1100px) {
  .tankazon-store .tankazon-body { grid-template-columns: minmax(0, 1fr) 230px; }
}
@media (max-width: 900px) {
  .tankazon-store .tankazon-body { grid-template-columns: minmax(0, 1fr); }
  .tankazon-store .tankazon-cart { display: none; }
  .store-facet-groups { flex-wrap: nowrap; overflow: visible; }
}
@media (max-width: 700px) {
  .store-facets { gap: 6px; min-height: 38px; padding: 4px 7px; }
  .store-facet-head > strong { display: none; }
  .store-facet-count { font-size: .64rem; }
  .store-facet-group > summary { min-height: 28px; padding-top: 5px; padding-bottom: 5px; }
}

.decor-layout-preview {
  position: relative; overflow: hidden; border-radius: 12px; border: 1px solid #49758c;
  background: linear-gradient(#205775, #102d42 82%, #393b39 83%, #262b2a);
}
.decor-layout-preview img { position: absolute; object-fit: fill; pointer-events: none; }
@media (max-width: 480px) {
  .decor-layout-dialog { padding: 14px; }
  .decor-history-controls { justify-content: center; }
  .decor-history-controls button { min-height: 32px; }
}

/* Editing modes share one fixed-height horizontal tray. */
#editDecorTray .edit-decor-tray-header {
  min-height: 25px;
  max-height: 25px;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}
#editDecorTray .edit-decor-tray-tabs {
  gap: 3px;
  overflow: hidden;
}
#editDecorTray .edit-decor-tray-tab {
  min-width: 55px;
  min-height: 23px;
  padding: 2px 7px;
  font-size: 0.61rem;
}
#editDecorTray .edit-decor-in-tank-toggle {
  min-height: 23px;
  padding: 2px 7px;
  gap: 4px;
  font-size: 0.61rem;
}
#editDecorTray .edit-decor-in-tank-toggle input {
  width: 13px;
  height: 13px;
}
.edit-tank-tray .edit-tray-mode-header {
  position: relative;
}
.randomize-gravel-hill-button {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  min-height: 26px;
  padding: 4px 10px;
  transform: translateY(-50%);
  border: 1px solid rgba(125, 224, 248, 0.48);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(18, 75, 93, 0.94), rgba(8, 42, 58, 0.96));
  color: #e8fbff;
  font: 800 0.64rem/1 var(--ui-font-stack);
  cursor: pointer;
  white-space: nowrap;
}
.randomize-gravel-hill-button[hidden] {
  display: none !important;
}
.randomize-gravel-hill-button:hover,
.randomize-gravel-hill-button:focus-visible {
  border-color: rgba(160, 238, 255, 0.9);
  filter: brightness(1.14);
}

/* Photo variant selectors stay anchored to the image at every catalog size. */
#storeOverlay .shop-card { position: relative; }
#storeOverlay .shop-variant-dots {
  position: absolute;
  top: 180px;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-items: center;
  min-height: 28px;
  height: auto;
  box-sizing: border-box;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(transparent, rgba(3, 28, 43, .45));
  /* The JS anchors the selector's bottom row to the image bottom. Extra
     rows grow upward, keeping every appearance dot visible and clickable. */
  transform: translateY(calc(28px - 100%));
}

@media (max-width: 720px) {
  #storeOverlay .shop-variant-dots {
    top: 92px;
  }
}
#storeOverlay .shop-variant-dots button {
  display: grid;
  place-items: center;
  flex: 0 0 16px;
  min-width: 16px;
  width: 16px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
#storeOverlay .shop-variant-dots button::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
#storeOverlay .shop-variant-dots button[aria-pressed="true"]::before {
  background: #ffcf35;
  border-color: #ffcf35;
  transform: scale(1.2);
}
#storeOverlay .shop-variant-dots button:focus-visible {
  outline: 2px solid #ffcf35;
  outline-offset: -2px;
}

/* The tank overview uses the full canvas at every viewport size. */
.borough-overview-body,
.borough-overview-body.is-editing {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.borough-overview-info { display: none; }
.borough-grid { place-content: safe center; }

@keyframes borough-overview-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
.borough-overview:not([hidden]) {
  animation: borough-overview-reveal 220ms ease-out;
}
.borough-cell-snapshot-canvas {
  opacity: 0;
  transition: opacity 320ms ease-out;
}
.borough-cell-snapshot-canvas.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .borough-overview:not([hidden]) { animation: none; }
  .borough-cell-snapshot-canvas { transition: none; }
}

/* Auth cards share the recovery layout, including short mobile viewports. */
.startup-auth[hidden] { display: none !important; }
.loading-overlay.is-ready.is-auth-mode .startup-actions {
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.startup-auth button:disabled { opacity: .6; cursor: wait; }
.startup-auth [data-auth-error="true"],
.startup-auth[data-auth-error="true"] .startup-auth-copy { color: #ffd5cf; }
.cloud-account-email-status { grid-column: 1 / -1; overflow-wrap: anywhere; line-height: 1.5; }
.loading-overlay.is-ready.is-auth-mode { width: 100vw; min-width: 0; }
.loading-overlay.is-ready.is-auth-mode .startup-auth-title { overflow-wrap: anywhere; }
.loading-overlay.is-ready.is-auth-mode .startup-auth-title:focus { outline: none; }
/* Email callbacks remain usable at compact viewport sizes. */
.loading-overlay.is-ready.is-auth-mode:not([hidden]) { display: grid !important; }

/* Settings dashboard redesign 2026-09-10 */
#settingsOverlay .settings-dashboard-panel {
  width: min(1320px, calc(100vw - 72px));
  max-width: 1320px;
  max-height: min(92dvh, 980px);
  gap: 16px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(43, 206, 241, 0.42);
  background:
    radial-gradient(circle at 45% -18%, rgba(39, 191, 226, 0.17), transparent 38%),
    linear-gradient(180deg, rgba(3, 40, 62, 0.97), rgba(2, 29, 48, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 90px rgba(0, 0, 0, .5),
    0 0 30px rgba(14, 150, 201, .08);
}

#settingsOverlay .settings-panel-header {
  align-items: center;
  padding: 2px 4px 14px;
  border-bottom: 1px solid rgba(68, 197, 229, .22);
}

#settingsOverlay .settings-panel-copy {
  gap: 3px;
}

#settingsOverlay .settings-panel-copy h2 {
  margin: 0;
  color: #f3fbff;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}

#settingsOverlay .settings-panel-copy > p:last-child {
  margin: 0;
  color: rgba(211, 236, 247, .82);
  font-size: .95rem;
}

#settingsOverlay .settings-kicker {
  color: rgba(209, 235, 247, .78);
  font-size: .68rem;
  letter-spacing: .2em;
}

#settingsOverlay .settings-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}

#settingsOverlay .settings-debug-control {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#settingsOverlay .settings-debug-control[hidden] {
  display: none !important;
}

#settingsOverlay .settings-debug-toggle {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 43px;
  box-sizing: border-box;
  padding: 7px 10px 7px 15px;
  border-radius: 14px;
  border: 1px solid rgba(59, 207, 241, .42);
  background: linear-gradient(180deg, rgba(4, 61, 88, .78), rgba(3, 42, 66, .86));
  color: #eefaff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
}

#settingsOverlay .settings-debug-toggle .settings-checkbox {
  margin: 0;
}

#settingsOverlay .settings-header-actions .store-close-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-color: rgba(255, 92, 85, .55);
  background: linear-gradient(180deg, #9e241f, #741713);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 8px 20px rgba(53, 5, 6, .24);
}

#settingsOverlay .settings-scroll-shell {
  display: block;
  min-height: 0;
}

#settingsOverlay .settings-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "account account"
    "left right";
  align-items: start;
  column-gap: 14px;
  row-gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 0 4px 2px 0;
}

#settingsOverlay .settings-account-card { grid-area: account; }

#settingsOverlay .settings-section {
  gap: 11px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(47, 186, 222, .34);
  background:
    linear-gradient(180deg, rgba(7, 55, 79, .76), rgba(3, 39, 60, .84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 18px rgba(0, 12, 27, .08);
}

#settingsOverlay .settings-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#settingsOverlay .settings-section-heading > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

#settingsOverlay .settings-section-heading-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  color: #6de8fb;
  line-height: 1;
}

#settingsOverlay .settings-section-heading-icon img,
#settingsOverlay .settings-button-icon,
#settingsOverlay .cloud-account-title-icon img,
#settingsOverlay .cloud-account-avatar img,
#settingsOverlay .cloud-account-mail-icon img,
#settingsOverlay .cloud-account-edit-button img,
#settingsOverlay .cloud-account-compact-action > img {
  display: block;
  object-fit: contain;
}

#settingsOverlay .settings-section-heading-icon img {
  width: 34px;
  height: 34px;
}

#settingsOverlay .settings-button-icon {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

#settingsOverlay img.is-missing {
  visibility: hidden;
}

#settingsOverlay .settings-section h3 {
  margin: 0;
  color: #f1fbff;
  font-size: 1.15rem;
  line-height: 1.15;
}

#settingsOverlay .settings-section-note {
  margin: 0;
  color: rgba(194, 226, 238, .75);
  font-size: .78rem;
  line-height: 1.35;
}

#settingsOverlay .settings-section-heading-icon {
  font-weight: 700;
  opacity: .98;
}

#settingsOverlay .settings-toggle-row,
#settingsOverlay .settings-toolbar-color-row,
#settingsOverlay .settings-inline-action {
  min-height: 54px;
  box-sizing: border-box;
  padding: 9px 13px;
  gap: 12px;
  border-radius: 13px;
  border: 1px solid rgba(66, 164, 197, .22);
  background: rgba(1, 25, 42, .52);
}

#settingsOverlay .settings-toggle-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

#settingsOverlay .settings-peaceful-mode-row {
  border-color: rgba(103, 224, 191, .34);
  background: linear-gradient(180deg, rgba(8, 63, 64, .62), rgba(2, 34, 47, .64));
}

#settingsOverlay .settings-peaceful-mode-row .settings-toggle-label {
  color: #bfffea;
}


#settingsOverlay .settings-toolbar-color-row,
#settingsOverlay .settings-inline-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

#settingsOverlay .settings-toggle-copy {
  gap: 2px;
}

#settingsOverlay .settings-toggle-label {
  color: #f0faff;
  font-size: .84rem;
  line-height: 1.2;
}

#settingsOverlay .settings-toggle-note {
  color: rgba(190, 220, 232, .72);
  font-size: .71rem;
  line-height: 1.35;
}

#settingsOverlay .settings-checkbox {
  width: 20px;
  height: 20px;
  accent-color: #36d7f3;
}

#settingsOverlay .settings-depth-level-row {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
}

#settingsOverlay .settings-depth-level-control {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  min-width: 150px;
}

#settingsOverlay .settings-depth-level-control output {
  justify-self: end;
  color: #8de8ff;
  font-size: .69rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#settingsOverlay #depthEffectLevelInput {
  width: 100%;
  min-width: 0;
  margin: 0;
  accent-color: #36d7f3;
  cursor: pointer;
}

#settingsOverlay .settings-depth-level-ticks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  color: rgba(190, 220, 232, .58);
  font-size: .58rem;
  line-height: 1;
  text-align: center;
}

#settingsOverlay .settings-depth-level-ticks span:first-child { text-align: left; }
#settingsOverlay .settings-depth-level-ticks span:last-child { text-align: right; }

#settingsOverlay .settings-ambient-bubble-row {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 235px);
}

#settingsOverlay .settings-ambient-bubble-control {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  min-width: 190px;
}

#settingsOverlay .settings-ambient-bubble-control output {
  justify-self: end;
  color: #8de8ff;
  font-size: .69rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#settingsOverlay #ambientBubbleLevelInput {
  width: 100%;
  min-width: 0;
  margin: 0;
  accent-color: #36d7f3;
  cursor: pointer;
}

#settingsOverlay .settings-ambient-bubble-ticks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  color: rgba(190, 220, 232, .58);
  font-size: .56rem;
  line-height: 1.05;
  text-align: center;
}

#settingsOverlay .settings-ambient-bubble-ticks span {
  display: grid;
  gap: 2px;
}

#settingsOverlay .settings-ambient-bubble-ticks strong {
  color: inherit;
  font-size: .58rem;
}

#settingsOverlay .settings-ambient-bubble-ticks small {
  color: inherit;
  font-size: .52rem;
}

#settingsOverlay .settings-ambient-bubble-ticks span:first-child { text-align: left; }
#settingsOverlay .settings-ambient-bubble-ticks span:last-child { text-align: right; }

#settingsOverlay .settings-color-input {
  width: 58px;
  height: 34px;
  min-width: 58px;
  border-radius: 7px;
  border: 5px solid rgba(255,255,255,.28);
  background: transparent;
  cursor: pointer;
}

#settingsOverlay .settings-select {
  min-width: 118px;
  border: 1px solid rgba(83, 190, 222, .32);
  border-radius: 9px;
  padding: 8px 28px 8px 10px;
  color: #effbff;
  background: rgba(5, 46, 68, .92);
}

#settingsOverlay .settings-data-actions,
#settingsOverlay .settings-other-actions {
  display: grid;
  align-items: stretch;
  gap: 10px;
}

#settingsOverlay .settings-data-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#settingsOverlay .settings-other-actions {
  grid-template-columns: repeat(5, minmax(108px, 1fr));
  margin-top: 0;
}

#settingsOverlay .settings-data-actions .small-button,
#settingsOverlay .settings-other-actions .small-button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  justify-content: center;
  gap: 8px;
  border-radius: 15px;
  white-space: nowrap;
}

#settingsOverlay .settings-data-actions .small-button {
  display: grid;
  grid-template-columns: 22px minmax(0, auto) 22px;
  align-items: center;
  justify-content: stretch;
  column-gap: 8px;
}

#settingsOverlay .settings-data-actions .settings-button-icon {
  grid-column: 1;
  justify-self: center;
  align-self: center;
  width: 20px;
  height: 20px;
}

#settingsOverlay .settings-data-actions .settings-button-label {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  text-align: center;
}

#settingsOverlay .settings-data-actions #exportDataButton {
  color: #062f48;
  border-color: rgba(142, 239, 255, .72);
  background: linear-gradient(180deg, #79efff, #31ccec);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 20px rgba(42, 211, 239, .1);
}

#settingsOverlay .settings-data-actions #importDataButton {
  color: #eefaff;
  border-color: rgba(91, 145, 181, .32);
  background: linear-gradient(180deg, rgba(51, 82, 111, .92), rgba(31, 57, 82, .96));
}

#settingsOverlay .settings-data-actions #resetProgressButton {
  color: #fff2f4;
  border-color: rgba(225, 91, 116, .38);
  background: linear-gradient(180deg, rgba(121, 53, 71, .9), rgba(84, 40, 55, .94));
}

#settingsOverlay .settings-other-actions .donation-button {
  color: #072f46;
  background: linear-gradient(180deg, #78ebfb, #35cce8);
  border-color: rgba(132, 238, 255, .7);
}

#settingsOverlay .settings-general-card {
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 9px;
}

#settingsOverlay .settings-account-card,
#settingsOverlay .settings-graphics-card {
  padding-top: 12px;
  padding-bottom: 12px;
}

#settingsOverlay .settings-general-card .settings-toolbar-color-row {
  min-height: 50px;
  padding-top: 8px;
  padding-bottom: 8px;
}

#settingsOverlay .settings-other-card {
  gap: 6px;
  padding: 10px 12px 12px;
}

#settingsOverlay .settings-other-card .settings-section-heading {
  min-height: 28px;
  gap: 8px;
}

#settingsOverlay .settings-other-card .settings-section-heading-icon {
  width: 28px;
  height: 28px;
}

#settingsOverlay .settings-other-card .settings-section-heading-icon img {
  width: 26px;
  height: 26px;
}

#settingsOverlay .settings-other-card .settings-section-heading > div {
  display: block;
}

#settingsOverlay .settings-other-card .settings-section-heading h3 {
  font-size: 1rem;
  line-height: 1.05;
}

#settingsOverlay .settings-other-card .settings-section-note {
  display: none;
}

#settingsOverlay .settings-other-actions .small-button {
  font-size: .82rem;
}

#settingsOverlay .settings-other-actions .small-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 56px;
  padding: 6px 10px;
  line-height: 1.1;
}

#settingsOverlay .settings-other-actions .settings-button-icon {
  width: 20px;
  height: 20px;
}

#settingsOverlay .settings-graphics-card .settings-toggle-row,
#settingsOverlay .settings-audio-card .settings-toggle-row {
  min-height: 104px;
}

#settingsOverlay .settings-graphics-card {
  align-self: stretch;
  height: 100%;
}

#settingsOverlay .settings-account-card {
  grid-area: account;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

#settingsOverlay .settings-account-topbar {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  grid-template-columns: auto;
  align-items: center;
  gap: 12px;
  padding: 0;
  z-index: 3;
}

#settingsOverlay .settings-account-topbar-spacer {
  display: none;
}

#settingsOverlay .settings-account-data-actions {
  grid-template-columns: repeat(3, minmax(0, 176px));
  justify-content: end;
  margin-top: 0;
  gap: 12px;
}

/* Compact account card, matching the dashboard layout. */
#settingsOverlay #accountCloudSaveSettingsSection {
  position: relative;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0;
  overflow: visible;
  border-color: rgba(52, 207, 237, .42);
  background:
    radial-gradient(circle at 44% -40%, rgba(53, 211, 240, .13), transparent 42%),
    linear-gradient(180deg, rgba(5, 51, 75, .86), rgba(2, 34, 55, .92));
}

#settingsOverlay #accountCloudSaveSettingsSection > h3 {
  display: none;
}

#settingsOverlay #accountCloudSaveSettingsSection > [data-cloud-account-panel] {
  min-height: 0;
}

#settingsOverlay #accountCloudSaveSettingsSection .settings-account-data-actions .small-button {
  min-height: 44px;
  border-radius: 14px;
}

#settingsOverlay .cloud-account-shell {
  display: grid;
  gap: 12px;
  padding: 16px;
}

#settingsOverlay .cloud-account-main-heading {
  padding-right: 600px;
}

#settingsOverlay .cloud-account-main-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#settingsOverlay .cloud-account-main-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#settingsOverlay .cloud-account-main-heading > div > strong {
  color: #f2fbff;
  font-size: 1.18rem;
  line-height: 1.1;
}

#settingsOverlay .cloud-account-main-heading > div > span {
  color: #72d9ee;
  font-size: .78rem;
}

#settingsOverlay .cloud-account-title-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

#settingsOverlay .cloud-account-title-icon::before,
#settingsOverlay .cloud-account-title-icon::after {
  display: none;
}

#settingsOverlay .cloud-account-title-icon img {
  width: 34px;
  height: 34px;
}

#settingsOverlay .cloud-account-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 10px;
  align-items: stretch;
}

#settingsOverlay .cloud-account-core-panel {
  display: grid;
  grid-template-columns: minmax(220px, .95fr) minmax(300px, 1.20fr) minmax(245px, .85fr);
  gap: 0;
  min-width: 0;
  border: 1px solid rgba(66, 178, 213, .28);
  border-radius: 15px;
  background: rgba(1, 28, 46, .48);
  overflow: hidden;
}

#settingsOverlay .cloud-account-identity-card,
#settingsOverlay .cloud-sync-state-card {
  min-height: 100px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#settingsOverlay .cloud-account-identity-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 15px 16px;
}

#settingsOverlay .cloud-account-username-card,
#settingsOverlay .cloud-account-email-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

#settingsOverlay .cloud-account-core-panel > * + * {
  border-left: 1px solid rgba(72, 185, 218, .24);
}

#settingsOverlay .cloud-account-avatar,
#settingsOverlay .cloud-account-mail-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#settingsOverlay .cloud-account-avatar::before,
#settingsOverlay .cloud-account-avatar::after {
  display: none;
}

#settingsOverlay .cloud-account-avatar img,
#settingsOverlay .cloud-account-mail-icon img {
  width: 30px;
  height: 30px;
}

#settingsOverlay .cloud-account-identity-copy > span {
  color: rgba(224, 242, 250, .82);
  font-size: .76rem;
  font-weight: 800;
}

#settingsOverlay .cloud-account-identity-copy > strong {
  color: #f4fcff;
  font-size: 1.02rem;
  line-height: 1.2;
}

#settingsOverlay .cloud-account-edit-button {
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 8px;
  color: #9aedff;
  background: linear-gradient(180deg, rgba(34, 109, 147, .82), rgba(21, 78, 110, .88));
}

#settingsOverlay .cloud-account-edit-button img {
  width: 16px;
  height: 16px;
}

#settingsOverlay .cloud-sync-state-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  color: #eefaff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, filter .16s ease, box-shadow .16s ease;
}

#settingsOverlay .cloud-sync-state-card:not(:disabled):hover,
#settingsOverlay .cloud-sync-state-card:not(:disabled):focus-visible {
  filter: brightness(1.1);
  box-shadow: inset 0 0 0 1px rgba(122, 226, 245, .28);
}

#settingsOverlay .cloud-sync-state-card:disabled {
  opacity: 1;
  cursor: wait;
}

#settingsOverlay .cloud-sync-light {
  width: 22px;
  height: 22px;
}

#settingsOverlay .cloud-sync-state-copy {
  gap: 3px;
}

#settingsOverlay .cloud-sync-title-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

#settingsOverlay .cloud-sync-title-line [data-cloud-sync-time] {
  color: rgba(181, 226, 199, .72);
  font-size: .78rem;
  font-weight: 650;
}

#settingsOverlay .cloud-sync-label {
  color: rgba(225, 241, 248, .8) !important;
  font-size: .74rem !important;
  font-weight: 800;
}

#settingsOverlay .cloud-sync-state-copy strong {
  font-size: .92rem;
  line-height: 1.25;
}

#settingsOverlay .cloud-sync-state-copy span[data-cloud-sync-detail] {
  font-size: .72rem;
}

#settingsOverlay .cloud-sync-state-card[data-status="synced"] .cloud-sync-light {
  box-shadow: 0 0 0 4px rgba(85,239,138,.07), 0 0 12px rgba(65,242,133,.3);
}

#settingsOverlay .cloud-sync-state-card[data-status="syncing"] .cloud-sync-title-line [data-cloud-sync-time],
#settingsOverlay .cloud-sync-state-card[data-status="checking"] .cloud-sync-title-line [data-cloud-sync-time],
#settingsOverlay .cloud-sync-state-card[data-status="error"] .cloud-sync-title-line [data-cloud-sync-time],
#settingsOverlay .cloud-sync-state-card[data-status="offline"] .cloud-sync-title-line [data-cloud-sync-time] {
  display: none;
}

#settingsOverlay .cloud-account-side-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, .92fr);
  gap: 8px;
  align-items: stretch;
}

#settingsOverlay .cloud-account-compact-action {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 100px;
  padding: 12px 6px;
  border: 1px solid rgba(88, 190, 224, .35);
  border-radius: 13px;
  color: #effaff;
  background: linear-gradient(180deg, rgba(25, 91, 128, .88), rgba(15, 66, 100, .92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

#settingsOverlay .cloud-account-compact-action:hover,
#settingsOverlay .cloud-account-compact-action:focus-visible {
  filter: brightness(1.1);
  border-color: rgba(105, 222, 247, .55);
}

#settingsOverlay .cloud-account-compact-action > img {
  width: 21px;
  height: 21px;
}

#settingsOverlay .cloud-account-compact-action strong {
  width: 100%;
  min-width: 0;
  font-size: .82rem;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

#settingsOverlay .cloud-account-logout-action {
  border-color: rgba(220, 78, 95, .44);
  background: linear-gradient(180deg, rgba(111, 47, 63, .94), rgba(78, 32, 49, .96));
}

#settingsOverlay .cloud-account-logout-action > span {
  color: #ffd4d9;
}

#settingsOverlay .cloud-account-settings-section {
  position: relative;
  isolation: isolate;
}

#settingsOverlay .cloud-account-edit-button {
  justify-self: end;
  align-self: center;
}

#settingsOverlay .cloud-account-email-card .cloud-account-identity-copy > strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#settingsOverlay .cloud-account-editor-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: inherit;
  background: rgba(0, 15, 28, .68);
  backdrop-filter: blur(4px);
}

#settingsOverlay .cloud-account-editor-overlay[hidden] {
  display: none !important;
}

#settingsOverlay .cloud-account-editor-dialog {
  width: min(500px, calc(100% - 32px));
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid rgba(76, 214, 239, .58);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% -40%, rgba(52, 208, 235, .16), transparent 52%),
    linear-gradient(180deg, rgba(5, 54, 78, .985), rgba(2, 33, 52, .99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 18px 44px rgba(0, 7, 18, .46),
    0 0 24px rgba(29, 190, 224, .12);
}

#settingsOverlay .cloud-account-editor-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

#settingsOverlay .cloud-account-editor-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#settingsOverlay .cloud-account-editor-heading strong {
  color: #f4fcff;
  font-size: .96rem;
}

#settingsOverlay .cloud-account-editor-heading span {
  color: rgba(193, 225, 237, .76);
  font-size: .72rem;
  line-height: 1.3;
}

#settingsOverlay .cloud-account-editor-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
}

#settingsOverlay .cloud-account-editor-icon img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

#settingsOverlay .cloud-account-editor-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(94, 211, 238, .48);
  border-radius: 10px;
  outline: none;
  color: #f4fcff;
  background: rgba(1, 24, 40, .92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  font: inherit;
  font-size: .9rem;
}

#settingsOverlay .cloud-account-editor-input:focus {
  border-color: rgba(89, 229, 245, .88);
  box-shadow: 0 0 0 2px rgba(57, 211, 232, .13);
}

#settingsOverlay .cloud-account-editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#settingsOverlay .cloud-account-editor-actions .small-button {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  border-radius: 10px;
}

#settingsOverlay .cloud-account-editor-actions .small-button:first-child {
  color: #062f48;
  border-color: rgba(142, 239, 255, .72);
  background: linear-gradient(180deg, #79efff, #31ccec);
}

#settingsOverlay .cloud-account-editor-actions .small-button.alt {
  color: #eefaff;
  border-color: rgba(91, 145, 181, .32);
  background: linear-gradient(180deg, rgba(51, 82, 111, .92), rgba(31, 57, 82, .96));
}

#settingsOverlay .cloud-account-editor-dialog .cloud-account-email-status {
  grid-column: 1;
  margin: 0;
  text-align: center;
}

#settingsOverlay .cloud-account-inline-editor {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
  gap: 10px 16px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(71, 181, 216, .3);
  border-radius: 13px;
  background: rgba(1, 27, 45, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

#settingsOverlay .cloud-account-inline-editor[hidden] {
  display: none !important;
}

#settingsOverlay .cloud-account-inline-editor-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#settingsOverlay .cloud-account-inline-editor-copy strong {
  color: #f2fbff;
  font-size: .82rem;
}

#settingsOverlay .cloud-account-inline-editor-copy span {
  color: rgba(191, 221, 233, .72);
  font-size: .7rem;
  line-height: 1.35;
}

#settingsOverlay .cloud-account-inline-editor-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

#settingsOverlay .cloud-account-inline-editor-controls input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid rgba(122, 214, 240, .32);
  border-radius: 10px;
  padding: 10px 12px;
  color: #f3fbff;
  background: rgba(3, 28, 44, .9);
  font: inherit;
  font-size: .86rem;
}

#settingsOverlay .cloud-account-inline-editor-controls input:focus {
  outline: 2px solid rgba(55, 218, 236, .18);
  border-color: rgba(83, 225, 240, .62);
}

#settingsOverlay .cloud-account-inline-editor-controls .small-button {
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 10px;
}

#settingsOverlay .cloud-account-email-status {
  grid-column: 2;
}

#settingsOverlay .cloud-account-email-status,
#settingsOverlay .cloud-account-message {
  min-height: 0;
  color: #bfefff;
  font-size: .68rem;
  line-height: 1.35;
}

#settingsOverlay .cloud-account-email-status {
  grid-column: 1 / -1;
}

#settingsOverlay .cloud-account-message:empty,
#settingsOverlay .cloud-account-email-status:empty {
  display: none;
}

@media (max-width: 1180px) {
  #settingsOverlay .settings-dashboard-panel {
    width: min(1020px, calc(100vw - 44px));
  }
  #settingsOverlay .cloud-account-dashboard {
    grid-template-columns: 1fr;
  }
  #settingsOverlay .cloud-account-side-actions {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  }
  #settingsOverlay .cloud-account-compact-action {
    min-height: 58px;
    grid-template-columns: auto auto;
    place-items: center;
  }
  #settingsOverlay .settings-other-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  #settingsOverlay .settings-dashboard-panel {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 14px;
  }
  #settingsOverlay .settings-panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  #settingsOverlay .settings-header-actions {
    align-items: flex-start;
  }
  #settingsOverlay .settings-debug-toggle {
    min-height: 44px;
    padding-left: 12px;
  }
  #settingsOverlay .settings-debug-toggle > span {
    display: none;
  }
  #settingsOverlay .settings-dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "account"
      "data"
      "general"
      "graphics"
      "audio"
      "other";
  }
  #settingsOverlay .cloud-account-core-panel {
    grid-template-columns: 1fr;
  }
  #settingsOverlay .cloud-account-core-panel > * + * {
    border-left: 0;
    border-top: 1px solid rgba(72, 185, 218, .24);
  }
  #settingsOverlay .cloud-account-side-actions {
    grid-template-columns: 1fr;
  }
  #settingsOverlay .cloud-account-compact-action {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    min-height: 52px;
    text-align: left;
  }
  #settingsOverlay .cloud-account-inline-editor {
    grid-template-columns: 1fr;
  }
  #settingsOverlay .cloud-account-inline-editor-controls {
    grid-template-columns: 1fr;
  }
  #settingsOverlay .cloud-account-email-status {
    grid-column: 1;
  }
  #settingsOverlay .settings-data-actions,
  #settingsOverlay .settings-other-actions {
    grid-template-columns: 1fr;
  }
}

/* Settings icon atlas: source frames live in assets/icons/settings.webp + settings.json. */
#settingsOverlay .settings-close-icon {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  pointer-events: none;
}

#settingsOverlay .cloud-sync-light {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none;
}

#settingsOverlay .cloud-sync-state-card[data-status="syncing"] .cloud-sync-light,
#settingsOverlay .cloud-sync-state-card[data-status="checking"] .cloud-sync-light {
  background: transparent !important;
  box-shadow: none !important;
  animation: settingsSyncSpritePulse .85s ease-in-out infinite alternate;
}

#settingsOverlay .cloud-sync-state-card[data-status="synced"] .cloud-sync-light,
#settingsOverlay .cloud-sync-state-card[data-status="error"] .cloud-sync-light,
#settingsOverlay .cloud-sync-state-card[data-status="offline"] .cloud-sync-light {
  background: transparent !important;
  box-shadow: none !important;
  animation: none;
}

@keyframes settingsSyncSpritePulse {
  from { opacity: .58; transform: scale(.88); filter: brightness(.92); }
  to { opacity: 1; transform: scale(1.06); filter: brightness(1.12); }
}

/* BubbleBodega + horizontal tray polish ---------------------------------- */
/* Horizontal trays must always paint above the toolbar when their bounds
   overlap. The trays live inside .tank-overlay, while the toolbar is promoted
   to a direct child of .tank-stage, so the parent stacking context must move
   above the toolbar rather than only increasing the tray child z-index. */
.tank-stage.has-edit-decor-tray > .tank-overlay {
  z-index: 20;
}

.tank-overlay > .edit-decor-tray:not([hidden]) {
  z-index: 21;
}

.tank-stage.has-edit-decor-tray > .tank-bottom-dock {
  z-index: 3 !important;
}

/* All Categories shows every top-level title bar. Single-category pages hide
   their redundant title, except Equipment, where its section context remains. */
.tankazon-store .store-drawer.tankazon-section-heading::before {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: -18px -20px 12px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #d5d9d9;
  color: #0f1111;
  box-shadow: 0 2px 8px rgba(15, 17, 17, .08);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: capitalize;
}

.tankazon-store .shop-toolbar-title {
  display: none;
}

.tankazon-store .store-drawer.tankazon-section-heading > .shop-toolbar {
  position: static;
  z-index: auto;
  min-height: 44px;
  margin: -18px -20px 12px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #d5d9d9;
  box-shadow: 0 2px 8px rgba(15, 17, 17, .08);
}

.tankazon-store .store-drawer.tankazon-section-heading > .shop-toolbar .shop-toolbar-title {
  display: block;
  margin: 0;
  color: #0f1111;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.15;
}

/* Fish and Decor already have a toolbar. Their title belongs inside it, not in
   a second stacked white strip. */
.tankazon-store .store-drawer.tankazon-section-heading[data-tankazon-category="fish"]::before,
.tankazon-store .store-drawer.tankazon-section-heading[data-tankazon-category="decor"]::before {
  content: none;
  display: none;
}

.tankazon-store .store-drawer.tankazon-section-heading[data-tankazon-category="pharmacy"]::before {
  content: "Medicine";
}

/* Compact placed-decor editor */
.utility-overlay-header-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

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

.utility-header-icon-button,
.utility-header-reset-button {
  min-height: 42px;
  border: 1px solid rgba(92, 205, 249, 0.34);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(13, 61, 84, 0.88), rgba(7, 36, 53, 0.92));
  color: rgba(239, 250, 255, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  font-weight: 900;
}

.utility-header-icon-button {
  width: 42px;
  padding: 0;
  font-size: 1.25rem;
}

.utility-header-reset-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 112px;
  padding: 0 14px;
}

.utility-header-icon-button:hover,
.utility-header-icon-button:focus-visible,
.utility-header-reset-button:hover,
.utility-header-reset-button:focus-visible {
  border-color: rgba(92, 205, 249, 0.68);
  background: linear-gradient(180deg, rgba(17, 79, 108, 0.96), rgba(8, 46, 66, 0.98));
}

.utility-overlay[data-utility-mode="decor-settings"],
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) {
  box-sizing: border-box;
  /* Query the logical app area, which stays fixed while Ratio Lock scales it. */
  container: decor-settings / inline-size;
  display: grid;
  place-items: stretch center;
  padding: 18px 22px calc(18px + var(--utility-edit-tray-reserve, 0px));
  padding-inline: clamp(14px, 1.2%, 22px);
  overflow: auto;
}

.utility-overlay[data-utility-mode="decor-settings"] .utility-panel,
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .utility-panel {
  width: 100%;
  min-width: 0;
  height: auto;
  max-height: none;
  min-height: 0;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 24px;
}

.utility-overlay[data-utility-mode="decor-settings"] .store-panel-header,
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .store-panel-header {
  min-height: 74px;
  padding: 0 2px;
}

.utility-overlay[data-utility-mode="decor-settings"] .store-panel-header > div:first-child,
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .store-panel-header > div:first-child {
  display: grid;
  gap: 5px;
}

.utility-overlay[data-utility-mode="decor-settings"] .settings-kicker,
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .settings-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(127, 207, 244, 0.9);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}

.utility-overlay[data-utility-mode="decor-settings"] .settings-kicker::before,
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .settings-kicker::before {
  content: "❈";
  color: #27caee;
  font-size: 1.15rem;
  line-height: 1;
}

.utility-overlay[data-utility-mode="decor-settings"] #utilityOverlayTitle,
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) #utilityOverlayTitle {
  margin: 0;
  font-size: clamp(1.45rem, calc(var(--app-viewport-width) * 0.0225), 2rem);
  line-height: 1.05;
}

.utility-overlay[data-utility-mode="decor-settings"] .store-close-button,
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .store-close-button {
  width: 54px;
  height: 54px;
  font-size: 1.8rem;
}

.utility-overlay[data-utility-mode="decor-settings"] .utility-panel .utility-overlay-body,
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .utility-panel .utility-overlay-body {
  overflow: hidden;
  padding: 0;
}

.utility-overlay[data-utility-mode="decor-settings"] .utility-overlay-footer,
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .utility-overlay-footer {
  display: none;
}

.decor-settings-compact-panel,
.decor-settings-compact-layout {
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.decor-settings-compact-layout {
  grid-template-columns: minmax(360px, 1.12fr) minmax(500px, 0.88fr);
  gap: 12px;
  align-items: stretch;
}

.decor-settings-compact-layout .custom-decor-preview-column {
  display: grid;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.decor-settings-compact-layout .custom-decor-size-window {
  height: 100%;
  min-height: 0;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.decor-settings-compact-layout .custom-decor-size-stage {
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border-radius: 11px;
  background:
    linear-gradient(rgba(85, 192, 226, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 192, 226, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(13, 70, 92, 0.64), rgba(5, 37, 54, 0.62));
  background-size: 20px 20px, 20px 20px, 100% 100%;
}

.decor-settings-preview-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 9px;
  background: rgba(3, 21, 32, 0.78);
  color: rgba(220, 242, 251, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.decor-settings-preview-background-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #dcf2fb;
  cursor: pointer;
}

.decor-settings-preview-background-toggle input {
  margin: 0;
  accent-color: #27c9ed;
}

.decor-settings-compact-layout .decor-settings-controls-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.decor-settings-controls-column > * {
  flex-shrink: 0;
}

.decor-settings-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.95fr);
  gap: 10px;
}

.decor-settings-control-card,
.decor-settings-control-section,
.decor-settings-cave-panel {
  border: 1px solid rgba(108, 194, 232, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 43, 61, 0.78), rgba(6, 31, 46, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.decor-settings-control-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px 15px;
}

.decor-settings-card-heading,
.decor-settings-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(229, 246, 255, 0.8);
  font-size: 0.88rem;
  font-weight: 900;
}

.decor-settings-card-heading strong {
  color: #f0f9ff;
}

.decor-settings-layer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: stretch;
}

.decor-settings-layer-row .shop-sort-select {
  min-width: 0;
  width: 100%;
}

.decor-settings-layer-stepper {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid rgba(95, 196, 237, 0.22);
  border-radius: 9px;
  background: rgba(5, 31, 47, 0.7);
}

.decor-settings-layer-stepper button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(62, 151, 190, 0.13);
  color: rgba(226, 244, 252, 0.88);
  font-size: 0.66rem;
}

.decor-settings-layer-stepper button:hover,
.decor-settings-layer-stepper button:focus-visible {
  background: rgba(52, 194, 241, 0.24);
  color: #fff;
}

.decor-settings-control-section {
  padding: 11px 14px;
}

.decor-settings-section-title {
  margin-bottom: 9px;
  font-size: 0.95rem;
}

.decor-settings-section-title small {
  max-width: 66%;
  overflow: hidden;
  color: rgba(201, 229, 241, 0.52);
  font-size: 0.67rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decor-settings-motion-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.decor-settings-compact-control {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 2px 13px 1px;
  border-left: 1px solid rgba(127, 207, 244, 0.12);
}

.decor-settings-compact-control:first-child {
  padding-left: 5px;
  border-left: 0;
}

.decor-settings-compact-control:last-child {
  padding-right: 5px;
}

.decor-settings-compact-control > span {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "glyph label"
    "glyph value";
  column-gap: 7px;
  min-height: 34px;
  color: rgba(226, 244, 252, 0.88);
  font-size: 0.73rem;
  font-weight: 900;
  line-height: 1.1;
}

.decor-settings-compact-control > span .decor-settings-control-glyph {
  grid-area: glyph;
}

.decor-settings-compact-control > span strong {
  grid-area: value;
  color: #fff;
  font-size: 0.72rem;
}

.decor-settings-control-glyph {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(20, 174, 224, 0.16);
  border: 1px solid rgba(36, 202, 245, 0.22);
  color: #2bd3f6;
  font-size: 1rem;
}

.decor-settings-select-control .shop-sort-select {
  width: 100%;
  min-width: 0;
}

.decor-settings-compact-control input[type="range"] {
  width: 100%;
  min-width: 0;
}

.decor-settings-color-section .decor-settings-section-title {
  margin-bottom: 6px;
}

.decor-settings-color-section .cave-color-controls {
  gap: 7px;
}

.decor-settings-color-section .custom-decor-type-summary {
  display: none;
}

.decor-settings-color-section .cave-color-layer-card {
  display: grid;
  grid-template-columns: minmax(86px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.decor-settings-color-section .cave-color-layer-header {
  display: grid;
  gap: 2px;
  align-content: center;
}

.decor-settings-color-section .cave-color-layer-header span {
  color: rgba(226, 244, 252, 0.82);
  font-size: 0.73rem;
  font-weight: 800;
}

.decor-settings-color-section .cave-color-layer-header strong {
  color: #fff;
  font-size: 0.72rem;
}

.decor-settings-color-section .cave-color-swatches {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: thin;
}

.decor-settings-color-section .color-choice-mode-row,
.decor-settings-color-section .color-choice-swatch-row {
  flex: 0 0 auto;
  width: auto;
  flex-wrap: nowrap;
  gap: 7px;
}

.decor-settings-color-section .color-choice-mode-row {
  padding: 0 8px 0 0;
  border: 0;
  border-right: 1px solid rgba(188, 225, 246, 0.12);
}

.decor-settings-color-section .custom-gravel-color-swatch {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  border-radius: 9px;
}

.decor-settings-color-section .bubbler-color-default-tile {
  width: auto;
  min-width: 68px;
  padding: 0 9px;
}

.decor-settings-color-section .cave-color-rgb-tile {
  min-width: 56px;
}

.decor-settings-color-section .cave-color-picker-shell {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  background: rgba(5, 17, 27, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 16px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.decor-settings-color-section .cave-color-picker-shell:hover,
.decor-settings-color-section .cave-color-picker-shell:focus-within {
  transform: translateY(-1px);
  border-color: rgba(125, 224, 248, 0.5);
}

.decor-settings-color-section .cave-color-picker-shell.is-selected {
  border-color: rgba(125, 224, 248, 0.72);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.24),
    0 0 0 2px rgba(125, 224, 248, 0.18),
    0 10px 20px rgba(0, 0, 0, 0.24);
}

.decor-settings-color-section .cave-color-picker-input {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.decor-settings-color-section .cave-color-picker-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.decor-settings-color-section .cave-color-picker-input::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}

.decor-settings-color-section .cave-color-picker-input::-moz-color-swatch {
  border: 0;
  border-radius: 6px;
}

.decor-settings-color-section .cave-colorize-toggle {
  margin: 0;
  white-space: nowrap;
}

.decor-settings-cave-panel {
  display: flex;
  flex-direction: column;
  flex: 1 0 220px;
  min-height: 220px;
  overflow: hidden;
  border-color: rgba(35, 207, 247, 0.36);
}

.decor-cave-tabs {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid rgba(94, 191, 231, 0.18);
  background: rgba(5, 30, 44, 0.42);
}

.decor-cave-tab {
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid rgba(94, 191, 231, 0.12);
  border-radius: 0;
  background: transparent;
  color: rgba(184, 221, 238, 0.72);
  font-size: 0.82rem;
  font-weight: 900;
}

.decor-cave-tab:last-child {
  border-right: 0;
}

.decor-cave-tab span[aria-hidden="true"] {
  margin-right: 8px;
  color: rgba(95, 187, 225, 0.72);
  font-size: 1rem;
}

.decor-cave-tab.is-active {
  background: linear-gradient(180deg, rgba(13, 109, 145, 0.18), rgba(3, 51, 72, 0.22));
  color: #fff;
  box-shadow: inset 0 -2px 0 #25d1f4;
}

.decor-cave-tab.is-active span[aria-hidden="true"] {
  color: #29d4f5;
}

.decor-cave-tab-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 9px 12px 10px;
  overflow: hidden;
}

.decor-cave-list-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  margin-bottom: 6px;
}

.decor-cave-list-header strong {
  color: rgba(234, 248, 255, 0.9);
  font-size: 0.8rem;
}

.decor-cave-add-button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(66, 191, 236, 0.42);
  border-radius: 8px;
  background: rgba(24, 101, 136, 0.24);
  color: #e8f9ff;
  font-size: 0.72rem;
  font-weight: 900;
}

.decor-cave-add-button:hover:not(:disabled),
.decor-cave-add-button:focus-visible:not(:disabled) {
  background: rgba(36, 172, 220, 0.28);
  border-color: rgba(72, 215, 250, 0.72);
}

.decor-cave-compact-list {
  display: grid;
  grid-auto-rows: max-content;
  flex: 1;
  min-height: 0;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.decor-cave-point-row {
  display: grid;
  grid-template-columns: 30px minmax(78px, 0.78fr) minmax(0, 1fr) minmax(0, 1fr) 32px;
  align-self: start;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 7px;
  border: 1px solid rgba(99, 189, 225, 0.12);
  border-radius: 9px;
  background: rgba(3, 25, 38, 0.56);
}

.decor-cave-entry-row {
  grid-template-rows: max-content max-content;
  row-gap: 10px;
  padding: 10px;
}

.decor-cave-entry-row .cave-entrance-size-controls {
  padding: 8px 0 0;
  border-top: 1px solid rgba(99, 189, 225, 0.12);
}

.decor-cave-point-row.is-active {
  border-color: rgba(38, 207, 247, 0.42);
  box-shadow: inset 0 0 0 1px rgba(38, 207, 247, 0.08);
}

.decor-cave-point-badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.36);
  color: #03121a;
  font-size: 0.78rem;
  font-weight: 1000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.decor-cave-point-badge.is-entry {
  background: #ff6569;
}

.decor-cave-point-row:nth-child(3n + 2) .decor-cave-point-badge.is-entry {
  background: #39c9f3;
}

.decor-cave-point-row:nth-child(3n) .decor-cave-point-badge.is-entry {
  background: #ffd64d;
}

.decor-cave-point-badge.is-seat {
  background: #39c9f3;
}

.decor-cave-point-row:nth-child(even) .decor-cave-point-badge.is-seat {
  background: #ffd64d;
}

.decor-cave-point-row .shop-sort-select {
  width: 100%;
  min-width: 0;
  padding-inline: 10px 26px;
}

.decor-cave-coordinate-control {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.decor-cave-coordinate-control > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: rgba(193, 226, 239, 0.7);
  font-size: 0.68rem;
  font-weight: 900;
}

.decor-cave-coordinate-control strong {
  color: rgba(239, 250, 255, 0.94);
}

.decor-cave-coordinate-control input[type="range"] {
  display: block;
  width: 100%;
  height: 20px;
  min-width: 0;
  margin: 0;
}

.decor-cave-facing-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.decor-cave-facing-control .cave-seat-facing-button {
  min-height: 34px;
  padding: 0;
}

.decor-cave-delete-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 92, 92, 0.32);
  background: rgba(117, 22, 26, 0.22);
  color: #ff6969;
  font-size: 1.15rem;
  font-weight: 900;
}

.decor-cave-delete-button:hover:not(:disabled),
.decor-cave-delete-button:focus-visible:not(:disabled) {
  border-color: rgba(255, 111, 111, 0.7);
  background: rgba(150, 31, 35, 0.32);
  color: #ff8b8b;
}

.decor-cave-delete-button:disabled {
  opacity: 0.3;
}

.decor-settings-bubbler-section .bubbler-settings-panel {
  gap: 9px;
}

@container decor-settings (max-width: 1180px) {
  .utility-overlay[data-utility-mode="decor-settings"] .utility-panel,
  .utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .utility-panel {
    padding-inline: 14px;
  }

  .decor-settings-compact-layout {
    grid-template-columns: minmax(330px, 1.12fr) minmax(470px, 0.88fr);
  }

  .decor-settings-motion-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .decor-settings-compact-control {
    padding-inline: 8px;
  }

  .decor-settings-section-title small {
    display: none;
  }

  .decor-cave-point-row {
    grid-template-columns: 30px minmax(74px, 0.68fr) minmax(0, 1fr) minmax(0, 1fr) 32px;
    gap: 6px;
  }
}

@container decor-settings (max-width: 980px) {
  .utility-overlay[data-utility-mode="decor-settings"] .utility-panel,
  .utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .utility-panel {
    align-self: start;
    height: auto;
    min-height: min(700px, calc(var(--app-viewport-height) - var(--utility-edit-tray-reserve, 0px) - 36px));
  }

  .decor-settings-compact-layout {
    height: auto;
    grid-template-columns: 1fr;
  }

  .decor-settings-compact-layout .custom-decor-preview-column {
    min-height: 390px;
  }

  .decor-settings-compact-layout .decor-settings-controls-column {
    overflow: visible;
  }
}

.utility-overlay-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.utility-overlay-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.utility-overlay[data-utility-mode="decor-settings"] .utility-overlay-title-actions .utility-header-icon-button,
.utility-overlay:is([data-utility-mode="custom-decor-settings"], [data-utility-mode="fish-inspect"]) .utility-overlay-title-actions .utility-header-icon-button {
  width: 42px;
  min-height: 42px;
}

/* Fish inspection shares the full decor utility dialog. */
.utility-overlay[data-utility-mode="fish-inspect"] {
  place-items: stretch center;
  overflow: hidden;
}
.utility-overlay[data-utility-mode="fish-inspect"] .utility-panel {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  max-height: 100%;
}
.fish-inspect-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr);
  gap: 18px;
  height: 100%;
  min-height: 0;
}
.fish-inspect-preview-column {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  gap: 8px;
}
.fish-inspect-preview-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(108, 194, 232, .3);
  border-radius: 14px;
  background: radial-gradient(ellipse at center, #174d66, #061c2b);
}
.fish-inspect-preview-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.fish-inspect-preview-stage [data-fish-inspect-preview-loading] {
  position: absolute;
  inset: 45% 0 auto;
  text-align: center;
  color: #a7d7e7;
}
.fish-inspect-controls {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  font-size: .9rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.fish-inspect-card-scroll {
  display: grid;
  align-content: start;
  min-height: 0;
  min-width: 0;
  gap: 12px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #3186a1 transparent;
  padding: 2px 5px 2px 2px;
  overscroll-behavior: contain;
}
.fish-inspect-card {
  min-width: 0;
  padding: clamp(12px, 1vw, 14px);
  border: 1px solid rgba(51, 201, 237, .65);
  border-radius: 17px;
  background: linear-gradient(120deg, rgba(10, 45, 63, .85), rgba(3, 25, 40, .92));
}
.fish-inspect-card[hidden] { display: none; }
.fish-inspect-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #6de5f5;
  font-size: 1rem;
  line-height: 1.25;
}
.fish-inspect-icon { flex: 0 0 23px; width: 23px; height: 23px; color: #59def1; }
.fish-inspect-identity, .fish-inspect-status-row, .fish-inspect-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.fish-inspect-species { color: #65d9ed; font-weight: 700; letter-spacing: .07em; }
.fish-inspect-identity h2 { margin: 3px 0 0; color: #eef8ff; font-size: clamp(1.5rem, 2.3vw, 2.1rem); overflow-wrap: anywhere; }
.fish-inspect-level-badge {
  flex-shrink: 0;
  padding: 7px 20px;
  border: 1px solid #43d9f5;
  border-radius: 999px;
  background: #06364d;
  color: #d8f4ff;
  font-size: 1.05rem;
  font-weight: 800;
}
.fish-inspect-status-row { margin-top: 12px; }
.fish-inspect-health { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: #edf7ff; }
.fish-inspect-health .hearts { margin: 0; line-height: 1.1; }
.fish-inspect-mood { display: flex; align-items: center; gap: 10px; color: #c9e5f0; font-size: .85rem; }
.fish-inspect-mood strong { padding: 4px 10px; border: 1px solid currentColor; border-radius: 999px; color: #6fe4ef; }
.fish-inspect-mood[data-mood-tone="warn"] strong { color: #f6d365; }
.fish-inspect-mood[data-mood-tone="danger"] strong { color: #ff9b9b; }
.fish-inspect-mood[data-mood-tone="neutral"] strong { color: #b7c2c8; }
.fish-inspect-condition { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; line-height: 1.4; color: #b7c2c8; }
.fish-inspect-condition[data-tone="good"] { color: #8af6a2; }
.fish-inspect-condition[data-tone="warn"] { color: #f6d365; }
.fish-inspect-condition > span { font-size: 1.1rem; font-weight: 900; }
.fish-inspect-activity { margin: 5px 0 0; color: #b9d9e7; font-size: .82rem; line-height: 1.4; }
.fish-inspect-card-heading > span { color: #d4eaf4; font-size: .82rem; font-weight: 700; }
.fish-inspect-card-heading h3 { color: #d8efff; }
.fish-inspect-card-heading:has(.fish-inspect-icon) h3 { color: #6de5f5; }
.fish-inspect-xp-track { box-sizing: border-box; width: 100%; height: 16px; margin-top: 12px; border: 1px solid #72bdd2; border-radius: 999px; background: #062d40; }
.fish-inspect-xp-track > span { border-radius: inherit; background: linear-gradient(#8cffa1, #1bcf75); }
.fish-inspect-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 20px; margin: 13px 0 0; }
.fish-inspect-facts > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 3px 9px; align-content: start; }
.fish-inspect-facts .fish-inspect-icon { grid-row: span 2; width: 21px; height: 21px; margin-top: 1px; }
.fish-inspect-facts dt { color: #99d0e4; font-size: .78rem; }
.fish-inspect-facts dd { min-width: 0; margin: 0; color: #eff8ff; font-weight: 600; font-size: .85rem; overflow-wrap: anywhere; line-height: 1.35; }
.fish-inspect-meal-summary { border: 1px solid #49c9e3; border-radius: 999px; padding: 3px 9px; }
.fish-inspect-meals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 13px; border: 1px solid #345f74; border-radius: 12px; background: rgba(45, 89, 105, .18); }
.fish-inspect-meal { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; }
.fish-inspect-meal + .fish-inspect-meal { border-left: 1px solid #345f74; }
.fish-inspect-meal-symbol { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border: 1px solid #819cac; border-radius: 50%; color: #c1d5e0; font-size: 1.5rem; }
.fish-inspect-meal > div { display: grid; gap: 4px; color: #c1dce9; font-size: .82rem; overflow-wrap: anywhere; }
.fish-inspect-meal strong { color: #95d5ed; font-size: .75rem; }
.fish-inspect-meal.is-eaten .fish-inspect-meal-symbol { border-color: #7bf29b; background: #81f599; color: #073f30; }
.fish-inspect-meal.is-eaten strong, .fish-inspect-meal.is-eaten > div { color: #8bf5a6; }
.fish-inspect-name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 6px;
  margin-top: 13px;
}
.fish-inspect-name-row label { display: grid; min-width: 0; }
.fish-inspect-input-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fish-inspect-name-row input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 40px;
  padding: 7px 11px;
  border: 1px solid rgba(108, 194, 232, .3);
  border-radius: 8px;
  background: rgba(149, 209, 230, .12);
  color: #e5f6fd;
  font: inherit;
}
.fish-inspect-controls .small-button { min-height: 40px; padding: 7px 12px; font-size: .85rem; line-height: 1.2; }
.fish-inspect-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 2px 2px; border-top: 1px solid #376477; }
.fish-inspect-actions .small-button { flex: 1 1 100px; font-weight: 800; }
.fish-inspect-views { display: flex; justify-content: center; align-items: center; gap: 8px; }
.fish-inspect-views button[data-fish-inspect-view]:not(.small-button) {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px 8px;
  border: 1px solid rgba(108, 194, 232, .3);
  border-radius: 8px;
  background: #082331;
  color: #bad9e6;
  font: inherit;
  font-size: .7rem;
  cursor: pointer;
}
.fish-inspect-views canvas { display: block; width: 76px; height: 42px; }
.fish-inspect-views .small-button { min-height: 60px; padding: 8px 16px; font-size: .85rem; }
.fish-inspect-views button[aria-pressed="true"] { outline: 2px solid #45d9f5; outline-offset: 1px; }
.fish-inspect-views button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fish-inspect-controls :is(button, input, select, summary):focus-visible { outline: 2px solid #a0f2ff; outline-offset: 3px; }
@media (max-width: 700px) {
  .utility-overlay[data-utility-mode="fish-inspect"] .utility-panel .utility-overlay-body { overflow: auto; }
  .utility-overlay[data-utility-mode="fish-inspect"] .store-panel-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 58px; }
  .utility-overlay[data-utility-mode="fish-inspect"] .store-close-button { align-self: center; flex-shrink: 0; margin: 0; }
  .fish-inspect-layout { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 14px; }
  .fish-inspect-preview-stage { height: clamp(170px, 32dvh, 320px); }
  .fish-inspect-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fish-inspect-views button[data-fish-inspect-view]:not(.small-button) { min-width: 0; padding-inline: 3px; }
  .fish-inspect-views .small-button { min-width: 0; padding-inline: 4px; }
  .fish-inspect-views canvas { max-width: 100%; }
  .fish-inspect-controls { overflow: visible; }
  .fish-inspect-card-scroll { overflow: visible; padding-right: 2px; }
  .fish-inspect-controls .small-button { min-height: 44px; }
  .fish-inspect-name-row input { height: 44px; font-size: 16px; }
  .fish-inspect-actions { position: sticky; bottom: 0; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #062334; padding: 10px 4px; }
  .fish-inspect-actions .small-button { min-width: 0; padding-inline: 5px; font-size: .78rem; white-space: normal; }
  .fish-inspect-actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .fish-inspect-facts { grid-template-columns: minmax(0, 1fr); }
  .fish-inspect-meal { gap: 6px; padding: 9px 6px; }
  .fish-inspect-meal-symbol { flex-basis: 28px; height: 28px; font-size: 1.2rem; }
}
@media (max-height: 620px) {
  .utility-overlay[data-utility-mode="fish-inspect"] .utility-panel { padding: 12px; gap: 8px; }
  .utility-overlay[data-utility-mode="fish-inspect"] .store-panel-header { min-height: 54px; }
  .fish-inspect-preview-column { gap: 4px; }
  .fish-inspect-views canvas { width: 60px; height: 28px; }
}

/* Legacy compact inspector */
.fish-inspector.is-settings-window {
  position: fixed;
  z-index: 650;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 176px) !important;
  width: min(520px, calc(100vw - 28px)) !important;
  max-height: min(360px, calc(100vh - 220px)) !important;
  transform: translateX(-50%);
}

.fish-inspector.is-settings-window .fish-inspector-card {
  position: relative;
  max-height: inherit;
  overflow: auto;
  padding: 12px;
  border-radius: 16px;
  border-color: rgba(89, 222, 255, 0.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 183, 231, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(7, 31, 47, 0.98), rgba(5, 20, 32, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(68, 215, 248, 0.08);
}

.fish-inspector.is-settings-window .fish-inspector-card::before {
  content: "Inspect";
  display: block;
  margin: 0 0 8px;
  color: #77e6ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.fish-inspector.is-settings-window .fish-inspector-name-row {
  grid-template-columns: max-content minmax(120px, 1fr) 32px 32px 34px;
  gap: 6px;
  margin-bottom: 8px;
}

.fish-inspector.is-settings-window .fish-inspector-name-row input {
  height: 34px;
}

.fish-inspector.is-settings-window .close-inspector {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 120, 120, 0.62);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(153, 27, 27, 0.98), rgba(105, 18, 18, 0.98));
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
}

.fish-inspector.is-settings-window .inspector-lines,
.fish-inspector.is-settings-window #inspectorTreatmentGuide,
.fish-inspector.is-settings-window .fish-life-story,
.fish-inspector.is-settings-window .wallpaper-name-keyboard,
.fish-inspector.is-settings-window #inspectorFishSettingsButton {
  display: none !important;
}

.fish-inspector.is-settings-window .fish-inspector-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.fish-inspector.is-settings-window .inspector-setting-row {
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(188, 225, 246, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.fish-inspector.is-settings-window .inspector-setting-row-select {
  grid-template-columns: 64px minmax(0, 1fr);
}

.fish-inspector.is-settings-window .fish-inspector-color-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.fish-inspector.is-settings-window .fish-inspector-color-card .cave-color-layer-header {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.fish-inspector.is-settings-window .fish-inspector-color-card .cave-color-layer-header strong {
  overflow: hidden;
  color: #dff8ff;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fish-inspector.is-settings-window .fish-inspector-color-swatches {
  min-width: 0;
}

.fish-inspector.is-settings-window .fish-inspector-color-swatches .color-choice-mode-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.fish-inspector.is-settings-window .fish-color-picker-shell {
  flex: 0 0 auto;
}

.fish-inspector.is-settings-window .fish-inspector-colorize-toggle {
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}

.fish-inspector.is-settings-window .fish-inspector-actions {
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(188, 225, 246, 0.1);
}

.fish-inspector.is-settings-window .fish-inspector-action-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.7rem;
}

@media (max-width: 700px), (max-height: 720px) {
  .fish-inspector.is-settings-window {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 132px) !important;
    width: min(500px, calc(100vw - 18px)) !important;
    max-height: calc(100vh - 158px) !important;
  }

  .fish-inspector.is-settings-window .fish-inspector-card {
    overflow: auto;
  }

  .fish-inspector.is-settings-window .fish-inspector-settings {
    grid-template-columns: 1fr;
  }

  .fish-inspector.is-settings-window .fish-inspector-color-card {
    grid-column: 1;
    grid-template-columns: 72px minmax(0, 1fr) auto;
  }
}

/* Tank-to-tank asset transition. Keep the current layout stable while the next
   aquarium's loose artwork decodes behind an opaque blue veil. */
.tank-switch-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 32%, rgba(48, 196, 236, 0.20), transparent 34%),
    linear-gradient(180deg, #0a4166 0%, #062c49 48%, #031d33 100%);
  transition: opacity 180ms ease;
}

.tank-switch-loading-overlay[hidden] {
  display: none;
}

.tank-switch-loading-overlay.is-visible {
  opacity: 1;
}

.tank-switch-loading-overlay.is-leaving {
  pointer-events: none;
}

.tank-switch-loading-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid rgba(151, 230, 255, 0.28);
  border-radius: 999px;
  color: rgba(235, 250, 255, 0.92);
  background: rgba(2, 24, 42, 0.34);
  box-shadow: 0 8px 28px rgba(0, 10, 24, 0.2);
  backdrop-filter: blur(8px);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.tank-switch-loading-pulse {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #55d9ff;
  box-shadow: 0 0 0 0 rgba(85, 217, 255, 0.44);
  animation: tank-switch-loading-pulse 1.05s ease-out infinite;
}

@keyframes tank-switch-loading-pulse {
  0% { box-shadow: 0 0 0 0 rgba(85, 217, 255, 0.46); }
  75%, 100% { box-shadow: 0 0 0 8px rgba(85, 217, 255, 0); }
}

/* Settings column-stack correction 2026-09-11
   Keep the tall Graphics card from stretching the Audio row and pushing Other
   toward the bottom edge. Each side of the dashboard now flows independently. */
#settingsOverlay .settings-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "account account"
    "left right";
  align-items: start;
  align-content: start;
  column-gap: 14px;
  row-gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
}

#settingsOverlay .settings-account-card {
  grid-area: account;
}

#settingsOverlay .settings-dashboard-column {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

#settingsOverlay .settings-dashboard-column-left {
  grid-area: left;
}

#settingsOverlay .settings-dashboard-column-right {
  grid-area: right;
}

#settingsOverlay .settings-dashboard-column > .settings-section {
  width: 100%;
  min-width: 0;
  grid-area: auto;
}

#settingsOverlay .settings-graphics-card {
  align-self: start;
  height: auto;
}

#settingsOverlay .settings-other-card {
  margin-top: 0;
}

@media (max-width: 860px) {
  #settingsOverlay .settings-dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "account"
      "left"
      "right";
  }

  #settingsOverlay .settings-account-topbar {
    position: static;
    top: auto;
    right: auto;
    grid-template-columns: 1fr;
    padding: 0 16px 0;
  }

  #settingsOverlay .settings-account-data-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  #settingsOverlay .cloud-account-main-heading {
    padding-right: 0;
  }
}

/* Seller names in the purchase card are informational text only. */
.tankazon-store .tankazon-item-buybox .tankazon-item-seller {
  grid-template-columns: max-content max-content;
  column-gap: 6px;
}

/* Proteus commissioned specimen designer, loaded as a WebSurf browser tab. */
.tankazon-store.is-proteus-designer-open .tankazon-panel {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.tankazon-store.is-proteus-designer-open .tankazon-header,
.tankazon-store.is-proteus-designer-open .tankazon-promo-strip,
.tankazon-store.is-proteus-designer-open .tankazon-account-page,
.tankazon-store.is-proteus-designer-open .tankazon-body,
.tankazon-store.is-proteus-designer-open .store-scroll-controls,
.tankazon-store.is-proteus-designer-open .proteus-biodyne-page {
  display: none !important;
}

.proteus-designer-route {
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background:
    radial-gradient(circle at 48% 10%, rgba(24, 99, 132, .09), transparent 34%),
    linear-gradient(180deg, #f4f7f8, #e8eef1);
  color: #eaf7fb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.proteus-designer-route[hidden] { display: none !important; }

.proteus-designer-workspace {
  box-sizing: border-box;
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: clamp(22px, 4vh, 52px) clamp(18px, 4vw, 62px);
}

.proteus-designer-shell {
  width: min(980px, 100%);
  overflow: hidden;
  border: 1px solid #1d6d8b;
  border-radius: 9px;
  background: #073654;
  box-shadow:
    0 24px 55px rgba(7, 37, 53, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .035);
}

.proteus-designer-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 92px;
  padding: 20px 27px 18px;
  border-bottom: 1px solid rgba(91, 181, 211, .18);
  background: linear-gradient(180deg, #0a3d5e, #073653);
}

.proteus-designer-app-header > div { min-width: 0; }
.proteus-designer-app-header span {
  display: block;
  margin-bottom: 3px;
  color: #6bc8e8;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .19em;
}
.proteus-designer-app-header h1 {
  margin: 0;
  color: #f6fcff;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 780;
  letter-spacing: -.025em;
  outline: none;
}
.proteus-designer-app-header > img {
  width: clamp(145px, 20vw, 220px);
  max-height: 54px;
  object-fit: contain;
  object-position: right center;
  filter: brightness(0) invert(1);
  opacity: .88;
}

.proteus-designer-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 26px;
  padding: 26px 27px 28px;
  background: linear-gradient(180deg, #073653 0%, #062f49 100%);
}

.proteus-designer-preview-column { min-width: 0; }
.proteus-designer-preview-window {
  position: relative;
  display: grid;
  min-height: 390px;
  overflow: hidden;
  place-items: center;
  border: 1px solid #185a78;
  border-radius: 7px;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at center, #12425d 0%, #082d45 62%, #06263a 100%);
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: inset 0 0 42px rgba(1, 16, 27, .42);
}

.proteus-designer-preview-window::after {
  content: "SPECIMEN PREVIEW";
  position: absolute;
  top: 13px;
  left: 15px;
  color: rgba(156, 215, 232, .48);
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .18em;
  pointer-events: none;
}

.proteus-designer-preview-image {
  display: block;
  max-width: 84%;
  max-height: 310px;
  object-fit: contain;
  transform-origin: center;
  filter: drop-shadow(0 13px 14px rgba(0, 0, 0, .24));
  user-select: none;
}

.proteus-designer-empty-preview {
  display: grid;
  justify-items: center;
  gap: 7px;
  max-width: 300px;
  padding: 34px 24px;
  text-align: center;
}
.proteus-designer-empty-preview img {
  width: 76px;
  height: 76px;
  margin-bottom: 5px;
  object-fit: contain;
  opacity: .48;
}
.proteus-designer-empty-preview strong {
  color: #d9edf5;
  font-size: .95rem;
  font-weight: 760;
}
.proteus-designer-empty-preview span {
  color: #79a7bb;
  font-size: .75rem;
  line-height: 1.45;
}

.proteus-designer-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
}

.proteus-designer-file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #287897;
  border-radius: 5px;
  color: #d9f2fb;
  background: #0c4969;
  font-size: .72rem;
  font-weight: 760;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.proteus-designer-file-button:hover { border-color: #56badb; background: #105676; }
.proteus-designer-file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.proteus-designer-size-readout {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: #7da9bc;
  font-size: .55rem;
  font-weight: 780;
  letter-spacing: .12em;
}
.proteus-designer-size-readout strong {
  color: #d8f1fa;
  font-size: .72rem;
  letter-spacing: 0;
}

.proteus-designer-settings {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 17px;
  padding: 4px 0;
}

.proteus-designer-field,
.proteus-designer-range {
  display: grid;
  gap: 7px;
  color: #d9eef6;
  font-size: .75rem;
  font-weight: 710;
}
.proteus-designer-field > span,
.proteus-designer-range > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.proteus-designer-range strong {
  color: #74c8e5;
  font-size: .68rem;
  font-weight: 760;
}
.proteus-designer-field input,
.proteus-designer-field select {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  border: 1px solid #1a607d;
  border-radius: 4px;
  outline: 0;
  padding: 7px 10px;
  color: #effbff;
  background: #082b41;
  font: inherit;
  font-size: .76rem;
}
.proteus-designer-field input:focus,
.proteus-designer-field select:focus {
  border-color: #58bad9;
  box-shadow: 0 0 0 2px rgba(75, 181, 218, .14);
}
.proteus-designer-field select option { color: #effbff; background: #082b41; }
.proteus-designer-field input:disabled,
.proteus-designer-field select:disabled,
.proteus-designer-range input:disabled { opacity: .45; cursor: not-allowed; }

.proteus-designer-range input[type="range"] {
  width: 100%;
  accent-color: #41b6d8;
  cursor: pointer;
}

.proteus-designer-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d9eef6;
  font-size: .75rem;
  font-weight: 650;
  cursor: pointer;
}
.proteus-designer-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #3fb5d7;
}

.proteus-designer-note {
  margin-top: auto;
  padding: 12px 13px;
  border: 1px solid rgba(68, 164, 195, .18);
  border-radius: 5px;
  color: #80aabd;
  background: rgba(3, 29, 45, .34);
  font-size: .68rem;
  line-height: 1.48;
}

.proteus-designer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 66px;
  padding: 13px 27px;
  border-top: 1px solid rgba(91, 181, 211, .16);
  background: #052c45;
}
.proteus-designer-footer button {
  min-width: 98px;
  min-height: 36px;
  border-radius: 4px;
  font: inherit;
  font-size: .73rem;
  font-weight: 780;
  cursor: pointer;
}
.proteus-designer-cancel {
  border: 1px solid #47768b;
  color: #bdd8e4;
  background: transparent;
}
.proteus-designer-submit {
  border: 1px solid #58bed8;
  color: #072d43;
  background: linear-gradient(180deg, #67d0e6, #45b7d5);
  box-shadow: inset 0 1px rgba(255,255,255,.25);
}
.proteus-designer-footer button:hover:not(:disabled) { filter: brightness(1.08); }
.proteus-designer-footer button:disabled { opacity: .4; cursor: not-allowed; }

.proteus-designer-workspace.is-complete {
  padding: 0;
  background: #fff;
}
.proteus-designer-completion {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  min-height: 100%;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: 46px 28px;
  color: #214c64;
  background: #fff;
  text-align: center;
}
.proteus-designer-completion img {
  width: clamp(88px, 10vw, 128px);
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(5px) scale(.97);
  animation: proteus-designer-complete-fade .46s ease-out forwards;
}
.proteus-designer-completion p {
  margin: 0;
  color: #2d566d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  letter-spacing: .015em;
  opacity: 0;
  transform: translateY(5px);
  animation: proteus-designer-complete-fade .46s .14s ease-out forwards;
}
@keyframes proteus-designer-complete-fade {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Corporate hierarchy for the Proteus order email. */
.websurf-proteus-authorization {
  display: grid;
  gap: 9px;
  color: #174a72;
  font-family: "Trebuchet MS", Arial, sans-serif;
}
.websurf-proteus-auth-brand {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: end;
  gap: 0 16px;
  min-height: 37px;
  padding: 0 4px 7px;
  border-bottom: 1px solid #acd4ec;
}
.websurf-proteus-auth-brand img {
  grid-row: 1 / span 2;
  width: 188px;
  max-height: 38px;
  object-fit: contain;
  object-position: left center;
}
.websurf-proteus-auth-brand span {
  display: block;
  align-self: end;
  color: #6285a4;
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .2em;
}
.websurf-proteus-auth-intro { padding: 0 5px; }
.websurf-proteus-auth-intro h3 {
  margin: 0;
  color: #093e68;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .09em;
}
.websurf-proteus-auth-intro p { margin: 2px 0 0; font-size: .75rem; }
.websurf-proteus-auth-status-grid {
  display: grid;
  grid-template-columns: minmax(190px, .76fr) minmax(330px, 1.24fr);
  gap: 22px;
  padding: 0 5px;
}
.websurf-proteus-auth-status-grid h4 {
  margin: 0 0 4px;
  color: #527495;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .16em;
}
.websurf-proteus-auth-order-status {
  padding-right: 21px;
  border-right: 2px solid #d6e9f5;
}
.websurf-proteus-auth-order-status > strong {
  display: flex;
  box-sizing: border-box;
  min-height: 35px;
  align-items: center;
  margin: 0;
  padding: 6px 11px;
  border: 1px solid #8fc8eb;
  border-radius: 5px;
  color: #155a86;
  background: linear-gradient(90deg, #eef8fd, #f7fcff);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .11em;
}
.websurf-proteus-auth-configuration > div {
  display: grid;
  grid-template-columns: max-content minmax(32px, 1fr) minmax(105px, max-content);
  align-items: baseline;
  gap: 8px;
  min-height: 17px;
  font-size: .71rem;
}
.websurf-proteus-auth-configuration span,
.websurf-proteus-auth-configuration strong {
  display: inline;
  margin: 0;
  color: #174a72;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.websurf-proteus-auth-configuration i {
  min-width: 25px;
  border-bottom: 2px dotted #78a4c5;
  transform: translateY(-2px);
}
.websurf-proteus-auth-response { display: grid; justify-items: start; gap: 3px; padding: 0 5px; }
.websurf-proteus-auth-response button {
  min-width: 218px;
  min-height: 38px;
  border: 1px solid #0c547f;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, #07517f, #064369);
  box-shadow: inset 0 1px rgba(255, 255, 255, .16);
  font: inherit;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .14em;
  cursor: pointer;
}
.websurf-proteus-auth-response button:hover,
.websurf-proteus-auth-response button:focus-visible { background: #0b5f90; }
.websurf-proteus-auth-response p { margin: 0; color: #5f7f99; font-size: .65rem; }
.websurf-proteus-auth-thanks {
  display: flex;
  min-height: 38px;
  align-items: center;
  margin: 0;
  color: #155a86;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.websurf-proteus-authorization > footer {
  display: grid;
  gap: 1px;
  margin-top: 1px;
  padding: 7px 5px 0;
  border-top: 1px solid #acd4ec;
  color: #6285a4;
  font-size: .52rem;
  letter-spacing: .02em;
}
.websurf-proteus-authorization > footer strong {
  display: block;
  margin: 0;
  color: #6285a4;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .12em;
}
@media (max-width: 720px) {
  .websurf-proteus-auth-brand { grid-template-columns: 1fr; }
  .websurf-proteus-auth-brand img { grid-row: auto; width: 165px; }
  .websurf-proteus-auth-status-grid { grid-template-columns: minmax(145px, .75fr) minmax(220px, 1.25fr); gap: 12px; }
  .websurf-proteus-auth-order-status { padding-right: 12px; }
}
.websurf-email-section-label {
  margin: 15px 0 4px;
  color: #6b8799;
  font-size: .59rem;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.websurf-email-inline-action { margin: 11px 0 13px; }
.websurf-email-inline-action .websurf-email-hyperlink {
  color: #245b83;
  font-size: .76rem;
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.websurf-email-inline-action .websurf-email-hyperlink:hover,
.websurf-email-inline-action .websurf-email-hyperlink:focus-visible { color: #173f5b; }
.websurf-email-inline-action button {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid #315d73;
  border-radius: 5px;
  color: #f4fbff;
  background: #294f63;
  font: inherit;
  font-size: .73rem;
  font-weight: 760;
  cursor: pointer;
}
.websurf-email-inline-action button:hover,
.websurf-email-inline-action button:focus-visible { background: #35667f; border-color: #35667f; }
.websurf-email-completion-note {
  margin: 14px 0 13px;
  padding: 9px 11px;
  border-left: 3px solid #6f9aae;
  color: #315a70;
  background: #f1f7fa;
  font-size: .78rem;
  font-weight: 700;
}
.websurf-email-summary.is-status {
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
}
.websurf-email-summary.is-status > strong:empty { display: none; }
.websurf-email-summary.is-status > span {
  color: #385f74;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .proteus-designer-workspace { place-items: start stretch; padding: 18px; }
  .proteus-designer-editor { grid-template-columns: 1fr; }
  .proteus-designer-preview-window { min-height: 300px; }
  .proteus-designer-preview-image { max-height: 235px; }
  .proteus-designer-note { margin-top: 0; }
}
.proteus-designer-route.is-complete { overflow: hidden; background: #fff; }

/* Full Proteus light-mode designer application. */
.proteus-designer-route { background: #f4f9fc; color: #173a55; }
.proteus-designer-workspace { display: block; min-height: 100%; padding: 0; }
.proteus-designer-shell { width: 100%; min-height: 100%; border: 0; border-radius: 0; background: #f4f9fc; box-shadow: none; }
.proteus-designer-app-header { min-height: 78px; padding: 12px 38px; justify-content: flex-start; border-bottom: 1px solid #d0e2ed; background: rgba(255,255,255,.94); }
.proteus-designer-app-header > img { width: 245px; max-height: 54px; object-position: left center; filter: none; opacity: 1; }
.proteus-designer-brand-divider { width: 1px; height: 38px; background: #9db9cb; }
.proteus-designer-app-title { flex: 1; }
.proteus-designer-app-title h1 { color: #102d48; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 2vw, 1.85rem); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.proteus-designer-app-title span,.proteus-designer-session span { color: #527791; font-size: .58rem; letter-spacing: .28em; }
.proteus-designer-session { display: grid; gap: 4px; padding-left: 25px; border-left: 1px solid #acc4d3; text-align: right; }
.proteus-designer-session strong { color: #284e68; font-size: .65rem; letter-spacing: .22em; }
.proteus-designer-editor { grid-template-columns: minmax(0,2.2fr) minmax(330px,1fr); gap: 14px; padding: 14px 38px 28px; background: #f4f9fc; }
.proteus-designer-preview-column,.proteus-designer-settings { padding: 14px 16px; border: 1px solid #bfd9e8; border-radius: 5px; background: rgba(255,255,255,.78); box-shadow: 0 4px 16px rgba(31,75,100,.05); }
.proteus-designer-panel-heading { display: flex; min-height: 44px; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #d6e5ed; }
.proteus-designer-panel-heading div:first-child { display: grid; gap: 3px; }
.proteus-designer-panel-heading strong { color: #173854; font-size: .68rem; letter-spacing: .13em; }
.proteus-designer-panel-heading span { color: #66859a; font-size: .7rem; }
.proteus-designer-tools { display: flex !important; gap: 8px !important; }
.proteus-designer-tools button,.proteus-designer-tools label { position: relative; min-height: 36px; padding: 0 14px; border: 1px solid #9dbdd0; border-radius: 4px; color: #315b77; background: #f9fcfe; font-size: .7rem; cursor: pointer; }
.proteus-designer-tools label { display: inline-flex; align-items: center; }
.proteus-designer-tools input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); }
.proteus-designer-preview-window { min-height: 475px; margin-top: 10px; border-color: #c4dce9; background: linear-gradient(rgba(62,153,196,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(62,153,196,.08) 1px,transparent 1px),radial-gradient(circle,#fff,#eef8fc); background-size: 24px 24px,24px 24px,auto; box-shadow: inset 0 0 35px rgba(70,150,190,.08); }
.proteus-designer-preview-window::after { content: "GENETICS\A BEHAVIOR\A MORPHOLOGY\A A GREATER OCEAN AWAITS."; white-space: pre; color: #507b96; line-height: 1.7; }
.proteus-designer-front-marker { position: absolute; top: 50%; right: 18px; z-index: 2; display: flex; align-items: center; gap: 8px; color: #315f79; pointer-events: none; transform: translateY(-50%); }
.proteus-designer-front-marker span { padding: 5px 7px; border: 1px solid rgba(64,124,153,.45); border-radius: 2px; background: rgba(244,251,254,.86); font-size: .58rem; font-weight: 900; letter-spacing: .2em; box-shadow: 0 2px 8px rgba(31,75,100,.08); }
.proteus-designer-front-marker i { position: relative; display: block; width: 44px; height: 1px; background: #4b819d; }
.proteus-designer-front-marker i::before { content: ""; position: absolute; inset: -3px auto auto 0; width: 7px; height: 7px; border: 1px solid #4b819d; border-radius: 50%; background: #f5fbfd; }
.proteus-designer-front-marker i::after { content: ""; position: absolute; top: -5px; right: -1px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid #315f79; }
.proteus-designer-preview-image { max-height: 390px; filter: drop-shadow(0 12px 12px rgba(24,57,75,.16)); }
.proteus-designer-empty-preview strong { color: #294f68; }.proteus-designer-empty-preview span { color: #6d899b; }
.proteus-designer-preview-meta { min-height: 32px; padding: 0 10px; border: 1px solid #d2e4ee; background: #f6fbfd; color: #66859a; font-size: .58rem; letter-spacing: .1em; }
.proteus-designer-size-readout { display: flex; align-items: center; gap: 14px; color: #345b74; }.proteus-designer-size-readout strong { color: #173854; font-size: .8rem; }
.proteus-designer-settings { gap: 18px; }
.proteus-designer-field,.proteus-designer-range,.proteus-designer-toggle { color: #173854; }
.proteus-designer-field input,.proteus-designer-field select { border-color: #b5d3e3; color: #183b55; background: #fafdff; }
.proteus-designer-field select option { color: #183b55; background: #fff; }
.proteus-designer-range strong { color: #173854; }.proteus-designer-range input[type="range"] { accent-color: #42aedd; }
.proteus-designer-range input[type="range"] { touch-action: none; }
.proteus-designer-note { display: flex; gap: 12px; margin-top: auto; border-color: #bedbe9; color: #58788d; background: #eff8fc; }
.proteus-designer-note img { width: 42px; height: 42px; object-fit: contain; }.proteus-designer-note div { display: grid; gap: 5px; }.proteus-designer-note strong { color: #204760; letter-spacing: .12em; }.proteus-designer-note b { float: right; color: #173854; }
.proteus-designer-actions { display: grid; grid-template-columns: 1fr 135px; gap: 10px; }
.proteus-designer-actions button { min-height: 52px; border-radius: 4px; font: inherit; font-size: .7rem; font-weight: 800; letter-spacing: .16em; }
.proteus-designer-submit { border: 1px solid #0d3450; color: #fff; background: #0c3551; }.proteus-designer-cancel { border: 1px solid #8eafc3; color: #315b77; background: transparent; }
.proteus-designer-legal { color: #7891a1; font-size: .61rem; line-height: 1.45; }
@media (max-width: 1050px) { .proteus-designer-app-header { padding-inline: 20px; }.proteus-designer-session { display:none; }.proteus-designer-editor { grid-template-columns: 1fr; padding-inline: 18px; }.proteus-designer-preview-window { min-height: 360px; }.proteus-designer-tools { flex-wrap: wrap; } }

/* Keep the commissioned designer inside the existing WebSurf viewport. */
.proteus-designer-route { height: 100%; overflow: hidden; }
.proteus-designer-workspace { height: 100%; min-height: 0; }
.proteus-designer-shell { display: grid; height: 100%; min-height: 0; grid-template-rows: 64px minmax(0, 1fr); }
.proteus-designer-app-header { min-height: 0; padding-block: 7px; }
.proteus-designer-app-header > img { max-height: 45px; }
.proteus-designer-editor { min-height: 0; padding-top: 8px; padding-bottom: 10px; }
.proteus-designer-preview-column { display: grid; min-height: 0; grid-template-rows: auto minmax(0,1fr) auto; }
.proteus-designer-preview-window { min-height: 0; height: auto; }
.proteus-designer-panel-heading { min-height: 36px; padding-bottom: 6px; }
.proteus-designer-tools button,.proteus-designer-tools label { min-height: 30px; padding-inline: 10px; }
.proteus-designer-settings { min-height: 0; gap: clamp(4px,.75vh,8px); }
.proteus-designer-field,.proteus-designer-range { gap: 3px; }
.proteus-designer-field > span,.proteus-designer-range > span { font-size: .62rem; letter-spacing: .065em; }
.proteus-designer-field > small { color: #7894a5; font-size: .54rem; font-weight: 520; line-height: 1.25; }
.proteus-designer-field input,.proteus-designer-field select { min-height: 30px; padding-block: 4px; font-size: .7rem; }
.proteus-designer-toggle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.proteus-designer-toggle-row .proteus-designer-toggle { font-size: .66rem; }
.proteus-designer-toggle-row .proteus-designer-toggle input { width: 14px; height: 14px; }
.proteus-designer-note { padding: 8px 10px; }
.proteus-designer-actions button { min-height: 44px; }
@media (max-height: 760px) {
  .proteus-designer-shell { grid-template-rows: 56px minmax(0,1fr); }
  .proteus-designer-editor { padding: 8px 20px 9px; }
  .proteus-designer-preview-column,.proteus-designer-settings { padding: 10px 12px; }
  .proteus-designer-panel-heading { min-height: 34px; padding-bottom: 6px; }
  .proteus-designer-legal { display: none; }
}

/* Proteus designer reproduction mode helper text. */
.proteus-designer-toggle span small {
  color: #7894a5;
  font-size: .52rem;
  font-weight: 560;
}

@media (max-width: 1120px) {
  #settingsOverlay .settings-account-topbar {
    position: static;
    top: auto;
    right: auto;
    grid-template-columns: 1fr;
    padding: 0 16px 0;
  }

  #settingsOverlay .settings-account-data-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  #settingsOverlay .cloud-account-main-heading {
    padding-right: 0;
  }

  #settingsOverlay .cloud-account-dashboard {
    grid-template-columns: 1fr;
  }

  #settingsOverlay .cloud-account-side-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Debug decor placement + shadow viewer */
.debug-decor-preview-panel {
  grid-template-rows: auto auto minmax(360px, 1fr);
  width: min(1180px, 97vw);
}

.debug-decor-preview-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(120px, 180px) auto auto;
  align-items: end;
  gap: 10px;
}

.debug-decor-preview-toolbar label,
.debug-decor-preview-controls label {
  display: grid;
  gap: 5px;
  color: #a9dcea;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.debug-decor-preview-toolbar select,
.debug-decor-preview-controls select,
.debug-decor-preview-controls input[type="color"] {
  width: 100%;
  min-width: 0;
  height: 38px;
  color: #f4fbff;
  border: 1px solid rgba(116, 205, 230, 0.34);
  border-radius: 9px;
  background: #092438;
}

.debug-decor-preview-toolbar select {
  padding: 0 34px 0 10px;
}

.debug-decor-preview-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
  min-height: 0;
}

.debug-decor-preview-stage {
  min-height: clamp(360px, 58vh, 620px);
  cursor: grab;
  touch-action: none;
  background: #061421;
}

.debug-decor-preview-stage:active {
  cursor: grabbing;
}

.debug-decor-preview-drag-hint {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 5px 9px;
  color: rgba(224, 249, 255, 0.72);
  border: 1px solid rgba(112, 207, 235, 0.16);
  border-radius: 999px;
  background: rgba(2, 17, 28, 0.62);
  font-size: 0.66rem;
  pointer-events: none;
}

.debug-decor-preview-controls {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  overflow: auto;
  border: 1px solid rgba(122, 201, 224, 0.2);
  border-radius: 13px;
  background: rgba(3, 17, 28, 0.7);
}

.debug-decor-preview-slider {
  display: grid;
  gap: 8px;
}

.debug-decor-preview-slider > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.debug-decor-preview-slider output {
  color: #67dcf3;
  font-weight: 850;
}

.debug-decor-preview-slider input[type="range"] {
  width: 100%;
}

.debug-decor-preview-toggle-grid {
  display: grid;
  gap: 8px;
}

.debug-decor-preview-toggle-grid label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(122, 201, 224, 0.16);
  border-radius: 8px;
  background: rgba(7, 31, 46, 0.55);
}

.debug-decor-preview-section {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(122, 201, 224, 0.14);
}

.debug-decor-preview-section h3 {
  margin: 0;
  color: #e9faff;
  font-size: 0.8rem;
}

.debug-decor-preview-colors {
  display: grid;
  gap: 8px;
}

.debug-decor-preview-color-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
}

.debug-decor-preview-color-row input[type="checkbox"] {
  margin: 0;
}

.debug-decor-preview-color-row input[type="color"] {
  width: 44px;
  padding: 2px;
}

.debug-decor-preview-empty {
  margin: 0;
  color: rgba(202, 237, 248, 0.58);
  font-size: 0.7rem;
}

.debug-decor-preview-metrics > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(122, 201, 224, 0.09);
}

.debug-decor-preview-metrics span {
  color: #8bcce0;
  font-size: 0.68rem;
}

.debug-decor-preview-metrics strong {
  color: #f3fbff;
  font-size: 0.72rem;
  text-align: right;
}

@media (max-width: 800px) {
  .debug-decor-preview-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .debug-decor-preview-toolbar .small-button {
    width: 100%;
  }

  .debug-decor-preview-workspace {
    grid-template-columns: 1fr;
  }

  .debug-decor-preview-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .debug-decor-preview-section {
    min-width: 0;
  }
}

/* Ratio Lock freezes the logical desktop layout and scales the entire app shell.
   Browser viewport media queries still evaluate against the physical window, so
   narrow windows must not convert the toolbar into the mobile full-width dock.
   Keep the dock at its saved-layout dimensions and let the outer Ratio Lock
   transform scale it together with the aquarium. */
html[data-layout-ratio-lock="true"] .tank-bottom-dock {
  position: absolute;
  width: auto;
  max-width: none;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  scrollbar-width: auto;
}

html[data-layout-ratio-lock="true"][data-toolbar-position="bottom-center"] .tank-bottom-dock {
  --toolbar-edge-gap: 22px;
  --toolbar-taskbar-clearance: 8px;
  --toolbar-open-transform: translateX(-50%);
  --toolbar-collapsed-transform: translateX(-50%) translateY(calc(100% + var(--toolbar-taskbar-clearance)));
  left: 50%;
  right: auto;
  top: auto;
  bottom: var(--toolbar-taskbar-clearance);
  transform: var(--toolbar-open-transform);
  flex-direction: row;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 14px;
}

html[data-layout-ratio-lock="true"][data-toolbar-position="bottom-center"][data-toolbar-collapsed="true"] .tank-bottom-dock,
html[data-layout-ratio-lock="true"][data-toolbar-position="bottom-center"] .tank-bottom-dock.is-toolbar-collapsed {
  transform: var(--toolbar-collapsed-transform);
}

html[data-layout-ratio-lock="true"][data-toolbar-position="bottom-center"] .toolbar-tab {
  left: 50%;
  right: auto;
  top: auto;
  bottom: calc(100% - var(--toolbar-tab-overlap));
  width: 52px;
  height: var(--toolbar-tab-thickness);
  border: 1px solid var(--toolbar-shell-border-color);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  font-size: 0.7rem;
  transform: translateX(-50%);
}

html[data-layout-ratio-lock="true"] .dock-button {
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  font-size: 1.35rem;
}

html[data-layout-ratio-lock="true"] .dock-button-icon {
  width: 100%;
  height: 100%;
}

html[data-layout-ratio-lock="true"] .toolbar-action-menu-button {
  min-width: 104px;
  min-height: 42px;
  gap: 9px;
  padding: 7px 11px 7px 8px;
  font-size: 0.78rem;
}

html[data-layout-ratio-lock="true"] .toolbar-action-menu-button img {
  width: 27px;
  height: 27px;
}


/* WebSurf Phase 2: temporary Bubble Borough Settings tab */
.tankazon-store .tankazon-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.websurf-browser-toolbar {
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
  height: 104px;
  min-height: 104px;
  min-width: 0;
  padding: 9px 12px;
  border-bottom: 1px solid var(--ws-border-soft, #b8c8d3);
  background: var(--ws-browser-surface, #e8f0f4);
}

.websurf-navigation-row {
  display: grid;
  grid-template-columns: repeat(3, 32px) minmax(0, 1fr) repeat(2, 32px);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* WebSurf fullscreen is an in-game layout mode only. It deliberately never
   requests browser or operating-system fullscreen. */
.tankazon-store.is-websurf-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 30;
  padding: 0;
  place-items: stretch;
}

.tankazon-store.is-websurf-fullscreen .tankazon-panel {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tankazon-store.is-websurf-fullscreen .webpage-tab-strip { padding-inline: 14px; }
.tankazon-store.is-websurf-fullscreen .websurf-browser-toolbar { padding-inline: 14px; }

.tankazon-store.is-websurf-fullscreen .websurf-browser-toolbar {
  max-height: 104px;
  overflow: hidden;
  transition: max-height 150ms ease, padding 150ms ease, opacity 120ms ease, border-color 120ms ease;
}

.tankazon-store.is-websurf-fullscreen.is-websurf-toolbar-hidden .websurf-browser-toolbar {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
  opacity: 0;
  pointer-events: none;
}

.websurf-browser-toolbar button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #9cadba;
  border-radius: 7px;
  color: #18394f;
  background: rgba(255, 255, 255, .7);
  cursor: pointer;
}

.websurf-browser-toolbar button:hover:not(:disabled) { background: #fff; }
.websurf-browser-toolbar button:disabled { opacity: .45; cursor: default; }
.websurf-home-button img { display: block; width: 18px; height: 18px; margin: auto; object-fit: contain; pointer-events: none; }
.websurf-browser-toolbar button:focus-visible,
.websurf-address-field input:focus-visible { outline: 2px solid #147593; outline-offset: 1px; }

.websurf-address-field { display: flex; align-items: center; height: 32px; min-width: 0; }
.websurf-address-field input {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid #9cadba;
  border-radius: 7px;
  color: #18394f;
  background: #fff;
  font: 600 .85rem/1 system-ui, sans-serif;
}

.websurf-bookmark-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 4px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ws-chrome-divider, var(--ws-border-soft, #b8c8d3)) 72%, transparent);
  scrollbar-width: thin;
}

.websurf-bookmark-bar-item,
.websurf-bookmark-bar-empty {
  flex: 0 0 auto;
  min-width: 0;
  height: 29px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--ws-browser-button-border, #9cadba);
  border-radius: 7px;
  color: var(--ws-browser-button-text, #18394f);
  background: var(--ws-browser-button-bg, rgba(255,255,255,.7));
  font: 700 .7rem/29px system-ui, sans-serif;
  white-space: nowrap;
}

.websurf-browser-toolbar .websurf-bookmark-bar-item { display: inline-flex; align-items: center; width: max-content; padding-inline: 10px; cursor: pointer; }
.websurf-bookmark-bar-item:hover { background: var(--ws-browser-button-hover, #fff); }
.websurf-bookmark-bar-item img { width: 17px; height: 17px; margin-right: 7px; object-fit: contain; }
.websurf-bookmark-bar-item span { line-height: 1; }
.websurf-bookmark-bar-empty { border-style: dashed; color: var(--ws-chrome-muted, var(--ws-text-secondary, #587184)); background: transparent; }

/* Saved bookmarks can be click-dragged into a custom persistent order. */
[data-websurf-bookmark-reorder-url] { cursor: grab; -webkit-user-drag: none; user-select: none; }
[data-websurf-bookmark-reorder-url]:active { cursor: grabbing; }
.websurf-bookmark-row.is-reordering,
.websurf-bookmark-bar.is-reordering { user-select: none; }
.websurf-bookmark-drag-placeholder {
  pointer-events: none !important;
  opacity: .48 !important;
  border-style: dashed !important;
  box-shadow: none !important;
  transform: none !important;
}
.websurf-bookmark-drag-placeholder > * { opacity: 0 !important; }
.websurf-bookmark-drag-ghost {
  position: fixed !important;
  z-index: 1000000 !important;
  margin: 0 !important;
  pointer-events: none !important;
  opacity: .97 !important;
  transform: scale(1.035) !important;
  transform-origin: center !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22) !important;
  cursor: grabbing !important;
  transition: none !important;
}
body.websurf-bookmark-dragging,
body.websurf-bookmark-dragging * { cursor: grabbing !important; }

/* The aquarium dock is not browser chrome. In WebSurf fullscreen it leaves
   the game viewport, while WebSurf's own top navigation remains available. */
/* Both overlay and dock live in the tank stage, but the overlay is nested
   inside its host panel. Use the stage state rather than a sibling selector
   so this remains true regardless of the overlay's markup depth. */
.tank-stage:has(#storeOverlay.is-websurf-fullscreen) .tank-bottom-dock {
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 140ms ease, transform 140ms ease;
}

@media (max-width: 560px) {
  .websurf-browser-toolbar { min-height: 104px; padding: 8px; }
  .websurf-navigation-row { grid-template-columns: repeat(3, 30px) minmax(0, 1fr) repeat(2, 30px); gap: 4px; }
  .websurf-browser-toolbar button { width: 30px; height: 30px; }
  .websurf-address-field input { height: 30px; font-size: .78rem; }
}

.webpage-tab-strip {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.webpage-browser-settings {
  display: grid;
  align-self: center;
  width: 34px;
  height: 34px;
  margin: 0 0 3px 10px;
  padding: 0;
  place-items: center;
  border: 1px solid #9cadba;
  border-radius: 7px;
  color: #18394f;
  background: rgba(245, 250, 252, .78);
  cursor: pointer;
}

.webpage-browser-settings:hover {
  background: #fff;
}

.webpage-browser-settings:focus-visible {
  outline: 2px solid #147593;
  outline-offset: 1px;
}

.webpage-browser-settings img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.webpage-browser-maximize {
  display: grid;
  align-self: center;
  width: 34px;
  height: 34px;
  margin: 0 0 3px 8px;
  padding: 0;
  place-items: center;
  border: 1px solid #9cadba;
  border-radius: 7px;
  color: #18394f;
  background: rgba(245, 250, 252, .78);
  cursor: pointer;
}

.webpage-browser-maximize:hover { background: #fff; }
.webpage-browser-maximize:focus-visible { outline: 2px solid #147593; outline-offset: 1px; }

.webpage-browser-maximize-icon {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 14px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 1px;
}

.tankazon-store.is-websurf-fullscreen .webpage-browser-maximize-icon {
  width: 12px;
  height: 10px;
  transform: translate(2px, 2px);
}

.tankazon-store.is-websurf-fullscreen .webpage-browser-maximize-icon::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 12px;
  height: 10px;
  left: -5px;
  top: -5px;
  border: 2px solid currentColor;
  border-radius: 1px;
  background: var(--ws-browser-button-bg, rgba(245, 250, 252, .78));
}

.webpage-tab-settings img {
  object-fit: contain;
}

.tankazon-store.is-web-settings-open .tankazon-panel {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

/* Browser controls are deliberately above every WebSurf page. Several older
   site shells declared two-row grids before the address bar existed. */
.tankazon-store.is-web-home-open .tankazon-panel,
.tankazon-store.is-websurf-themes-open .tankazon-panel,
.tankazon-store.is-bubble-bank-open .tankazon-panel,
.tankazon-store.is-davy-jones-locker-open .tankazon-panel,
.tankazon-store.proteus-biodyne-open .tankazon-panel,
.tankazon-store.is-proteus-designer-open .tankazon-panel,
.tankazon-store.tankazon-account-open .tankazon-panel {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

.tankazon-store.is-web-settings-open .tankazon-header,
.tankazon-store.is-web-settings-open .tankazon-promo-strip,
.tankazon-store.is-web-settings-open .tankazon-account-page,
.tankazon-store.is-web-settings-open .tankazon-body,
.tankazon-store.is-web-settings-open .store-scroll-controls,
.tankazon-store.is-web-settings-open .web-home-page,
.tankazon-store.is-web-settings-open .bubble-bank-page,
.tankazon-store.is-web-settings-open .davy-jones-locker-page,
.tankazon-store.is-web-settings-open .proteus-biodyne-page,
.tankazon-store.is-web-settings-open #proteusDesignerRoute {
  display: none !important;
}

/* The existing Settings UI is hosted as a WebSurf page in Phase 2. Phase 3
   replaces its modal presentation with the final browser-page redesign. */
#settingsOverlay.websurf-settings-page {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: block;
  align-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 16px 18px 18px;
  overflow: hidden;
  background: #e7eef3;
}

#settingsOverlay.websurf-settings-page[hidden] {
  display: none !important;
}

#settingsOverlay.websurf-settings-page .settings-dashboard-panel {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  min-height: 0;
  margin: 0;
  box-sizing: border-box;
}

#settingsOverlay.websurf-settings-page .settings-scroll-shell,
#settingsOverlay.websurf-settings-page .settings-panel-body {
  min-height: 0;
}

/* WebSurf Settings page redesign, Phase 3.
   This deliberately applies only while Settings is mounted inside WebSurf.
   The underlying settings controls and handlers remain unchanged. */
#settingsOverlay.websurf-settings-page {
  --ws-settings-page: #f3f9fd;
  --ws-settings-panel: rgba(255, 255, 255, 0.88);
  --ws-settings-row: rgba(247, 251, 254, 0.96);
  --ws-settings-border: #c7dce9;
  --ws-settings-border-strong: #a8c8dc;
  --ws-settings-text: #123b62;
  --ws-settings-muted: #66829a;
  --ws-settings-blue: #1188e9;
  --ws-settings-blue-soft: #e9f6ff;
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 0%, rgba(178, 225, 249, 0.28), transparent 36%),
    linear-gradient(180deg, #f7fbfe 0%, var(--ws-settings-page) 100%);
  color: var(--ws-settings-text);
}

#settingsOverlay.websurf-settings-page[hidden] {
  display: none !important;
}

#settingsOverlay.websurf-settings-page .settings-dashboard-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  min-height: 0;
  margin: 0;
  padding: 18px 42px 16px;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#settingsOverlay.websurf-settings-page .settings-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  padding: 2px 2px 10px;
  border: 0;
}

#settingsOverlay.websurf-settings-page .websurf-settings-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

#settingsOverlay.websurf-settings-page .websurf-settings-brand-icon {
  display: block;
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  object-fit: contain;
}

#settingsOverlay.websurf-settings-page .websurf-settings-heading-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

#settingsOverlay.websurf-settings-page .settings-kicker {
  margin: 0 0 1px;
  color: #27567d;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#settingsOverlay.websurf-settings-page .settings-panel-copy h2 {
  margin: 0;
  color: #113e68;
  font-size: clamp(2rem, 3vw, 2.65rem);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

#settingsOverlay.websurf-settings-page .settings-panel-copy > p:last-child,
#settingsOverlay.websurf-settings-page .websurf-settings-heading-copy > p:last-child {
  margin: 5px 0 0;
  color: #557794;
  font-size: 0.93rem;
  line-height: 1.2;
}

#settingsOverlay.websurf-settings-page .settings-header-actions {
  align-self: flex-start;
  padding-top: 3px;
}

/* WebSurf owns the close control. Do not show a second close button inside the page. */
#settingsOverlay.websurf-settings-page #closeSettingsOverlay {
  display: none !important;
}

#settingsOverlay.websurf-settings-page .settings-debug-toggle {
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--ws-settings-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--ws-settings-text);
  box-shadow: 0 2px 8px rgba(33, 91, 127, 0.06);
}

#settingsOverlay.websurf-settings-page .settings-scroll-shell {
  display: block;
  min-height: 0;
  overflow: hidden;
}

#settingsOverlay.websurf-settings-page .settings-panel-body {
  min-height: 0;
}

#settingsOverlay.websurf-settings-page .settings-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "account account"
    "left right";
  align-items: start;
  align-content: start;
  column-gap: 14px;
  row-gap: 14px;
  height: 100%;
  min-height: 0;
  padding: 0 2px 6px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#settingsOverlay.websurf-settings-page .settings-dashboard-column {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

#settingsOverlay.websurf-settings-page .settings-dashboard-column-left { grid-area: left; }
#settingsOverlay.websurf-settings-page .settings-dashboard-column-right { grid-area: right; }
#settingsOverlay.websurf-settings-page .settings-account-card { grid-area: account; }

#settingsOverlay.websurf-settings-page .settings-section {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--ws-settings-border);
  border-radius: 13px;
  background: var(--ws-settings-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 13px rgba(35, 91, 128, 0.055);
}

#settingsOverlay.websurf-settings-page .settings-section-heading {
  gap: 10px;
}

#settingsOverlay.websurf-settings-page .settings-section-heading-icon {
  width: 32px;
  height: 32px;
}

#settingsOverlay.websurf-settings-page .settings-section-heading-icon img {
  width: 29px;
  height: 29px;
}

#settingsOverlay.websurf-settings-page .settings-section h3 {
  color: #123e68;
  font-size: 1.05rem;
  font-weight: 850;
}

#settingsOverlay.websurf-settings-page .settings-section-note {
  color: var(--ws-settings-muted);
  font-size: 0.69rem;
  line-height: 1.25;
}

#settingsOverlay.websurf-settings-page .settings-toggle-row,
#settingsOverlay.websurf-settings-page .settings-toolbar-color-row,
#settingsOverlay.websurf-settings-page .settings-inline-action {
  min-height: 43px;
  padding: 6px 10px;
  gap: 9px;
  border: 1px solid #d4e3ec;
  border-radius: 9px;
  background: var(--ws-settings-row);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

#settingsOverlay.websurf-settings-page .settings-peaceful-mode-row {
  border-color: #d4e3ec;
  background: var(--ws-settings-row);
}

#settingsOverlay.websurf-settings-page .settings-game-settings-divider {
  display: grid;
  gap: 2px;
  margin: 16px 0 6px;
  padding-top: 14px;
  border-top: 1px solid #cbdde8;
}

#settingsOverlay.websurf-settings-page .settings-game-settings-divider span {
  color: #153d62;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#settingsOverlay.websurf-settings-page .settings-game-settings-divider p {
  margin: 0;
  color: #587184;
  font-size: 0.7rem;
  line-height: 1.25;
}

#settingsOverlay.websurf-settings-page .settings-toggle-copy {
  gap: 1px;
}

#settingsOverlay.websurf-settings-page .settings-toggle-label,
#settingsOverlay.websurf-settings-page .settings-peaceful-mode-row .settings-toggle-label {
  color: #153d62;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.12;
}

#settingsOverlay.websurf-settings-page .settings-toggle-note {
  color: #6a8499;
  font-size: 0.61rem;
  line-height: 1.22;
}

#settingsOverlay.websurf-settings-page .settings-checkbox {
  width: 19px;
  height: 19px;
  accent-color: var(--ws-settings-blue);
}

#settingsOverlay.websurf-settings-page .settings-depth-level-row {
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
}

#settingsOverlay.websurf-settings-page .settings-depth-level-control {
  min-width: 170px;
}

#settingsOverlay.websurf-settings-page .settings-depth-level-control output {
  color: #17466e;
  font-size: 0.67rem;
}

#settingsOverlay.websurf-settings-page #depthEffectLevelInput {
  accent-color: var(--ws-settings-blue);
}

#settingsOverlay.websurf-settings-page .settings-depth-level-ticks {
  color: #718aa0;
}

#settingsOverlay.websurf-settings-page .settings-color-input {
  width: 70px;
  height: 31px;
  min-width: 70px;
  border: 3px solid #c7dbe7;
  border-radius: 7px;
  background: #fff;
}

#settingsOverlay.websurf-settings-page .settings-select {
  color: #153d62;
  border-color: #bfd6e4;
  background: #f7fbfe;
}

/* Full-width Account & Cloud Save card. */
#settingsOverlay.websurf-settings-page #accountCloudSaveSettingsSection {
  position: relative;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--ws-settings-border-strong);
  background: rgba(255, 255, 255, 0.91);
}

#settingsOverlay.websurf-settings-page #accountCloudSaveSettingsSection > h3 {
  display: none;
}

#settingsOverlay.websurf-settings-page .cloud-account-shell {
  display: grid;
  gap: 10px;
  padding: 11px 12px 12px;
}

#settingsOverlay.websurf-settings-page .cloud-account-main-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-right: 500px;
}

#settingsOverlay.websurf-settings-page .cloud-account-main-heading > div {
  display: grid;
  gap: 0;
}

#settingsOverlay.websurf-settings-page .cloud-account-main-heading > div > strong {
  color: #133f69;
  font-size: 1.08rem;
  line-height: 1.05;
}

#settingsOverlay.websurf-settings-page .cloud-account-main-heading > div > span {
  color: #5f7f99;
  font-size: 0.67rem;
}

#settingsOverlay.websurf-settings-page .cloud-account-title-icon {
  width: 34px;
  height: 34px;
  background: transparent;
  box-shadow: none;
}

#settingsOverlay.websurf-settings-page .cloud-account-title-icon img {
  width: 31px;
  height: 31px;
}

#settingsOverlay.websurf-settings-page .settings-account-topbar {
  top: 10px;
  right: 12px;
}

#settingsOverlay.websurf-settings-page .settings-account-data-actions {
  grid-template-columns: repeat(3, minmax(0, 150px));
  gap: 9px;
}

#settingsOverlay.websurf-settings-page .settings-data-actions .small-button {
  min-height: 38px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 0.72rem;
}

#settingsOverlay.websurf-settings-page .settings-data-actions #exportDataButton {
  color: #0f4f78;
  border-color: #9bd8ef;
  background: linear-gradient(180deg, #e8f9ff, #c9f2ff);
  box-shadow: inset 0 1px 0 #fff;
}

#settingsOverlay.websurf-settings-page .settings-data-actions #importDataButton {
  color: #184466;
  border-color: #bfd6e4;
  background: linear-gradient(180deg, #fbfdff, #edf5fa);
}

#settingsOverlay.websurf-settings-page .settings-data-actions #resetProgressButton {
  color: #d51e2b;
  border-color: #f0bfc4;
  background: linear-gradient(180deg, #fff8f8, #ffe6e8);
}

#settingsOverlay.websurf-settings-page .cloud-account-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 205px;
  gap: 9px;
  align-items: stretch;
}

#settingsOverlay.websurf-settings-page .cloud-account-core-panel {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(290px, 1.12fr) minmax(250px, 0.95fr);
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

#settingsOverlay.websurf-settings-page .cloud-account-core-panel > * + * {
  border-left: 0;
}

#settingsOverlay.websurf-settings-page .cloud-account-identity-card,
#settingsOverlay.websurf-settings-page .cloud-sync-state-card {
  min-height: 68px;
  box-sizing: border-box;
  border: 1px solid #cfdfE9;
  border-radius: 9px;
  background: #f9fcfe;
  box-shadow: inset 0 1px 0 #fff;
}

#settingsOverlay.websurf-settings-page .cloud-account-identity-card {
  padding: 10px 11px;
  gap: 8px;
}

#settingsOverlay.websurf-settings-page .cloud-account-avatar,
#settingsOverlay.websurf-settings-page .cloud-account-mail-icon {
  width: 31px;
  height: 31px;
}

#settingsOverlay.websurf-settings-page .cloud-account-avatar img,
#settingsOverlay.websurf-settings-page .cloud-account-mail-icon img {
  width: 27px;
  height: 27px;
}

#settingsOverlay.websurf-settings-page .cloud-account-identity-copy > span,
#settingsOverlay.websurf-settings-page .cloud-sync-label {
  color: #5f7f99;
  font-size: 0.65rem;
}

#settingsOverlay.websurf-settings-page .cloud-account-identity-copy > strong,
#settingsOverlay.websurf-settings-page .cloud-sync-state-copy strong {
  color: #173f63;
  font-size: 0.83rem;
}

#settingsOverlay.websurf-settings-page .cloud-account-edit-button {
  width: 27px;
  height: 27px;
  border: 1px solid #c2d9e7;
  border-radius: 7px;
  background: #eef8fd;
  box-shadow: none;
}

#settingsOverlay.websurf-settings-page .cloud-account-edit-button img {
  width: 15px;
  height: 15px;
}

#settingsOverlay.websurf-settings-page .cloud-sync-state-card {
  padding: 9px 11px;
  color: #173f63;
}

#settingsOverlay.websurf-settings-page .cloud-sync-state-card:not(:disabled):hover,
#settingsOverlay.websurf-settings-page .cloud-sync-state-card:not(:disabled):focus-visible {
  filter: none;
  background: #eef8fd;
  box-shadow: inset 0 0 0 1px #b9d7e8;
}

#settingsOverlay.websurf-settings-page .cloud-sync-state-copy,
#settingsOverlay.websurf-settings-page .cloud-sync-state-copy span,
#settingsOverlay.websurf-settings-page .cloud-sync-state-copy [data-cloud-sync-detail] {
  color: #66849a;
}

#settingsOverlay.websurf-settings-page .cloud-sync-title-line strong {
  color: #173f63;
}

#settingsOverlay.websurf-settings-page .cloud-account-side-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#settingsOverlay.websurf-settings-page .cloud-account-compact-action {
  min-height: 68px;
  padding: 8px;
  border: 1px solid #c5dae7;
  border-radius: 9px;
  color: #165083;
  background: linear-gradient(180deg, #fafdff, #eef7fc);
  box-shadow: inset 0 1px 0 #fff;
}

#settingsOverlay.websurf-settings-page .cloud-account-compact-action > img {
  width: 21px;
  height: 21px;
}

#settingsOverlay.websurf-settings-page .cloud-account-logout-action {
  color: #d1262f;
  border-color: #efc1c6;
  background: linear-gradient(180deg, #fffafa, #ffecee);
}

#settingsOverlay.websurf-settings-page .cloud-account-message,
#settingsOverlay.websurf-settings-page .cloud-account-email-status {
  color: #376a8d;
}

#settingsOverlay.websurf-settings-page .cloud-account-editor-overlay {
  background: rgba(225, 239, 248, 0.7);
}

#settingsOverlay.websurf-settings-page .cloud-account-editor-dialog,
#settingsOverlay.websurf-settings-page .cloud-account-inline-editor {
  border-color: #bad4e3;
  background: #fff;
  color: #173f63;
}

#settingsOverlay.websurf-settings-page .cloud-account-editor-heading strong,
#settingsOverlay.websurf-settings-page .cloud-account-inline-editor-copy strong {
  color: #173f63;
}

#settingsOverlay.websurf-settings-page .cloud-account-editor-heading span,
#settingsOverlay.websurf-settings-page .cloud-account-inline-editor-copy span {
  color: #6a8499;
}

#settingsOverlay.websurf-settings-page .cloud-account-editor-input,
#settingsOverlay.websurf-settings-page .cloud-account-inline-editor-controls input {
  color: #173f63;
  border-color: #bfd6e4;
  background: #f8fbfd;
}

/* Right column groups and bottom actions. */
#settingsOverlay.websurf-settings-page .settings-general-card,
#settingsOverlay.websurf-settings-page .settings-account-card,
#settingsOverlay.websurf-settings-page .settings-graphics-card {
  padding-top: 11px;
  padding-bottom: 11px;
}

#settingsOverlay.websurf-settings-page .settings-general-card {
  gap: 7px;
}

#settingsOverlay.websurf-settings-page .settings-audio-card .settings-toggle-row,
#settingsOverlay.websurf-settings-page .settings-graphics-card .settings-toggle-row {
  min-height: 42px;
}

#settingsOverlay.websurf-settings-page .settings-other-card {
  gap: 7px;
  padding: 10px 11px;
}

#settingsOverlay.websurf-settings-page .settings-other-card .settings-section-heading {
  min-height: 28px;
}

#settingsOverlay.websurf-settings-page .settings-other-actions {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

#settingsOverlay.websurf-settings-page .settings-other-actions .small-button {
  min-height: 51px;
  padding: 6px 8px;
  gap: 3px;
  border: 1px solid #c7dce9;
  border-radius: 9px;
  color: #154774;
  background: linear-gradient(180deg, #fbfdff, #edf6fb);
  box-shadow: inset 0 1px 0 #fff;
  font-size: 0.68rem;
}

#settingsOverlay.websurf-settings-page .settings-other-actions .donation-button {
  color: #0d5783;
  border-color: #a8dcec;
  background: linear-gradient(180deg, #e9fbff, #cff4fb);
}

#settingsOverlay.websurf-settings-page .settings-support-heart {
  color: #1587dd;
  font-size: 1.1rem;
  line-height: 1;
}

#settingsOverlay.websurf-settings-page .settings-button-glyph {
  color: #1686d8;
}

#settingsOverlay.websurf-settings-page .wallpaper-scroll-controls {
  display: none !important;
}

/* Normal responsive fallback remains available when Ratio Lock is off.
   Ratio Lock keeps the saved desktop composition and scales it as one unit. */
@media (max-width: 1120px) {
  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .settings-dashboard-panel {
    padding-inline: 24px;
  }

  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .settings-account-topbar {
    position: static;
    padding: 0 12px;
  }

  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .cloud-account-main-heading {
    padding-right: 0;
  }

  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .cloud-account-dashboard {
    grid-template-columns: 1fr;
  }

  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .cloud-account-side-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .settings-dashboard-panel {
    padding: 14px 16px;
  }

  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .settings-panel-header {
    min-height: 82px;
  }

  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .websurf-settings-brand-icon {
    width: 62px;
    height: 62px;
  }

  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .settings-dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "account"
      "left"
      "right";
  }

  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .cloud-account-core-panel {
    grid-template-columns: 1fr;
  }

  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .settings-other-actions,
  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .settings-account-data-actions {
    grid-template-columns: 1fr;
  }

  html:not([data-layout-ratio-lock="true"]) #settingsOverlay.websurf-settings-page .cloud-account-side-actions {
    grid-template-columns: 1fr;
  }
}

/* WebSurf Phase 4: shared light/dark theme tokens and first-party dark mode. */
.tankazon-store {
  --ws-chrome-top: #dbe7ef;
  --ws-chrome-bottom: #c7d6e2;
  --ws-chrome-border: #aebdca;
  --ws-tab-bg-top: rgba(238, 245, 249, .72);
  --ws-tab-bg-bottom: rgba(210, 224, 234, .84);
  --ws-tab-border: #acbdca;
  --ws-tab-text: #163750;
  --ws-tab-hover: #edf4f8;
  --ws-tab-active-bg: #ffffff;
  --ws-tab-active-text: #0f2d43;
  --ws-browser-button-bg: rgba(245, 250, 252, .78);
  --ws-browser-button-hover: #ffffff;
  --ws-browser-button-border: #9cadba;
  --ws-browser-button-text: #18394f;
  --ws-page-bg: #eef6fa;
  --ws-panel-bg: rgba(255,255,255,.94);
  --ws-panel-bg-strong: #ffffff;
  --ws-panel-soft: #f0f7fb;
  --ws-row-bg: #fafdff;
  --ws-row-hover: #f1f8fc;
  --ws-row-open: #eef7fc;
  --ws-text: #173b59;
  --ws-text-strong: #123c60;
  --ws-text-secondary: #4e718e;
  --ws-text-muted: #7892a8;
  --ws-border: #bfd2df;
  --ws-border-soft: #d9e5ec;
  --ws-accent: #2e7bd0;
  --ws-focus: #147593;
  --ws-input-bg: #f7fbfe;
  --ws-input-text: #18394f;
  --ws-input-border: #647f91;
  --ws-input-placeholder: #4e6575;
  --ws-input-selection-bg: #165f91;
  --ws-input-selection-text: #ffffff;
  --ws-chrome-text: #163750;
  --ws-chrome-icon-filter: none;
  --ws-active-tab-icon-filter: none;
}

.tankazon-store[data-websurf-theme="dark"] {
  --ws-chrome-top: #242a30;
  --ws-chrome-bottom: #171c21;
  --ws-chrome-border: #3b454e;
  --ws-tab-bg-top: #2b3238;
  --ws-tab-bg-bottom: #20262c;
  --ws-tab-border: #414c55;
  --ws-tab-text: #d7e0e7;
  --ws-tab-hover: #343c44;
  --ws-tab-active-bg: #11161a;
  --ws-tab-active-text: #f4f7f9;
  --ws-browser-button-bg: #20272d;
  --ws-browser-button-hover: #313941;
  --ws-browser-button-border: #46515b;
  --ws-browser-button-text: #edf3f7;
  --ws-page-bg: #101418;
  --ws-panel-bg: #1a2025;
  --ws-panel-bg-strong: #20272d;
  --ws-panel-soft: #151b20;
  --ws-row-bg: #1d242a;
  --ws-row-hover: #252e35;
  --ws-row-open: #222d34;
  --ws-text: #e5edf2;
  --ws-text-strong: #f3f7fa;
  --ws-text-secondary: #b7c4cd;
  --ws-text-muted: #91a2ae;
  --ws-border: #394650;
  --ws-border-soft: #303b44;
  --ws-accent: #4aa9ff;
  --ws-focus: #6bc3ff;
  --ws-input-bg: #171e23;
  --ws-input-text: #edf3f7;
  --ws-input-border: #7c919f;
  --ws-input-placeholder: #a6bac8;
  --ws-chrome-icon-filter: brightness(0) invert(1) opacity(.9);
  --ws-active-tab-icon-filter: brightness(0) invert(1) opacity(.9);
}

.tankazon-store .webpage-tab-strip {
  border-bottom-color: var(--ws-chrome-border);
  background: linear-gradient(180deg, var(--ws-chrome-top), var(--ws-chrome-bottom));
}
.tankazon-store .webpage-tab {
  border-color: var(--ws-tab-border);
  color: var(--ws-tab-text);
  background: linear-gradient(180deg, var(--ws-tab-bg-top), var(--ws-tab-bg-bottom));
}
.tankazon-store .webpage-tab:hover { background: var(--ws-tab-hover); }
.tankazon-store .webpage-tab.is-active {
  border-color: var(--ws-tab-border);
  color: var(--ws-tab-active-text);
  background: var(--ws-tab-active-bg);
}
.tankazon-store .webpage-tab.is-active[data-webpage-destination="home"] img,
.tankazon-store .webpage-tab.is-active[data-webpage-destination="settings"] img {
  filter: var(--ws-active-tab-icon-filter) !important;
}
.tankazon-store .webpage-tab-close {
  display: grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-left: auto;
  place-items: center;
  border-radius: 4px;
  color: currentColor;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  opacity: .78;
  cursor: pointer;
}
.tankazon-store .webpage-tab-close:hover { background: color-mix(in srgb, currentColor 16%, transparent); opacity: 1; }
.tankazon-store .webpage-tab-close:focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 1px; opacity: 1; }
.tankazon-store .webpage-tab:focus-visible,
.tankazon-store .webpage-browser-settings:focus-visible,
.tankazon-store .webpage-browser-maximize:focus-visible,
.tankazon-store .webpage-browser-close:focus-visible { outline-color: var(--ws-focus); }
.tankazon-store .webpage-browser-settings,
.tankazon-store .webpage-browser-maximize,
.tankazon-store .webpage-browser-close {
  border-color: var(--ws-browser-button-border);
  color: var(--ws-browser-button-text);
  background: var(--ws-browser-button-bg);
}
.tankazon-store .webpage-browser-settings:hover,
.tankazon-store .webpage-browser-maximize:hover,
.tankazon-store .webpage-browser-close:hover { background: var(--ws-browser-button-hover); }

/* Only the monochrome Home and Settings navigation glyphs follow the chrome theme.
   Branded favicons keep their authored colors. */
.tankazon-store .webpage-tab[data-webpage-destination="home"] img,
.tankazon-store .webpage-tab[data-webpage-destination="settings"] img,
.tankazon-store .webpage-browser-settings img,
.tankazon-store .websurf-home-button img {
  filter: var(--ws-chrome-icon-filter);
}

/* WebSurf Home + mail client dark theme. */
.tankazon-store[data-websurf-theme="dark"] .web-home-page {
  color-scheme: dark;
  color: var(--ws-text);
  background:
    radial-gradient(circle at 50% 0, rgba(55, 112, 151, .2), transparent 32%),
    linear-gradient(180deg, #141a1f, var(--ws-page-bg));
}
.tankazon-store[data-websurf-theme="dark"] .websurf-home-header span,
.tankazon-store[data-websurf-theme="dark"] .websurf-bookmarks > h2 { color: #8ca9bd; }
.tankazon-store[data-websurf-theme="dark"] .websurf-home-header h1,
.tankazon-store[data-websurf-theme="dark"] .websurf-email-heading { color: var(--ws-text-strong); }
.tankazon-store[data-websurf-theme="dark"] .websurf-home-header p { color: var(--ws-text-secondary); }
.tankazon-store[data-websurf-theme="dark"] .websurf-bookmark {
  border-color: var(--ws-border);
  color: var(--ws-text);
  background: #1a2127;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.tankazon-store[data-websurf-theme="dark"] .websurf-bookmark:hover {
  border-color: #5d7789;
  background: #232c33;
  box-shadow: 0 11px 24px rgba(0,0,0,.28);
}
.tankazon-store[data-websurf-theme="dark"] .websurf-bookmark small,
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-sender small,
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-copy small,
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-row time,
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-detail span,
.tankazon-store[data-websurf-theme="dark"] .websurf-email-empty { color: var(--ws-text-muted); }
.tankazon-store[data-websurf-theme="dark"] .websurf-bookmark.is-coming-soon {
  color: #758590;
  background: #161c21;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-bookmark.is-coming-soon > span:first-child { background: #283139; }
.tankazon-store[data-websurf-theme="dark"] .websurf-inbox {
  border-color: var(--ws-border);
  background: var(--ws-panel-bg);
  box-shadow: 0 8px 23px rgba(0,0,0,.24);
}
.tankazon-store[data-websurf-theme="dark"] .websurf-inbox > header { border-bottom-color: var(--ws-border-soft); }
.tankazon-store[data-websurf-theme="dark"] .websurf-inbox-icon { color: #7ac3f3; }
.tankazon-store[data-websurf-theme="dark"] .websurf-inbox > header button,
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-actions button,
.tankazon-store[data-websurf-theme="dark"] .websurf-email-guide-links button {
  border-color: #43525e;
  color: #d8e8f2;
  background: #20282e;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-inbox > header button:hover,
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-actions button:hover,
.tankazon-store[data-websurf-theme="dark"] .websurf-email-guide-links button:hover,
.tankazon-store[data-websurf-theme="dark"] .websurf-email-guide-links button:focus-visible {
  border-color: #67849a;
  background: #2a343c;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-item { border-bottom-color: var(--ws-border-soft); }
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-row { color: var(--ws-text); }
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-row:hover { background: var(--ws-row-hover); }
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-row.is-unread {
  color: #f2f7fa;
  background: var(--ws-row-bg);
}
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-item.is-open .websurf-mail-row,
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-item.is-open .websurf-mail-star { background: var(--ws-row-open); }
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-star:hover { background: #273139; }
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-detail {
  color: #c8d5dd;
  background: #192127;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-email-scroll {
  color: #dce6ec;
  border-color: #34434e;
  background: #12181c;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  scrollbar-color: #526f82 #202930;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-email-scroll::-webkit-scrollbar-track {
  background: #202930;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.tankazon-store[data-websurf-theme="dark"] .websurf-email-scroll::-webkit-scrollbar-thumb {
  border-color: #202930;
  background: linear-gradient(180deg, #627f92, #496879);
}
.tankazon-store[data-websurf-theme="dark"] .websurf-email-scroll::-webkit-scrollbar-thumb:hover { background: #7393a7; }
.tankazon-store[data-websurf-theme="dark"] .websurf-email-item-row {
  border-color: #33424c;
  background: #1a2126;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-email-transaction-row,
.tankazon-store[data-websurf-theme="dark"] .websurf-email-feature-list { border-color: #33424c; }
.tankazon-store[data-websurf-theme="dark"] .websurf-email-guide-section h4,
.tankazon-store[data-websurf-theme="dark"] .websurf-email-feature-list h4 { color: #d8e7f0; }
.tankazon-store[data-websurf-theme="dark"] .websurf-mail-actions button:disabled:hover {
  border-color: #43525e;
  background: #20282e;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-status-bar {
  border-color: var(--ws-border);
  color: #9babb6;
  background: #151c21;
  box-shadow: 0 8px 23px rgba(0,0,0,.24);
}
.tankazon-store[data-websurf-theme="dark"] .websurf-status-bar small { color: #8fa1ad; }
.tankazon-store[data-websurf-theme="dark"] .websurf-status-bar strong { color: #c8d8e2; }
.tankazon-store[data-websurf-theme="dark"] .websurf-email-scroll a { color: #7cc8ff; }

/* The Proteus authorization email has its own corporate palette. Its light
   navy ink must be remapped explicitly in WebSurf dark mode; otherwise the
   message body is technically present but visually disappears into the reader. */
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-authorization {
  color: #c7dce9;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-brand {
  border-bottom-color: #6e9fbd;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-brand img {
  filter: brightness(0) saturate(100%) invert(80%) sepia(21%) saturate(855%) hue-rotate(159deg) brightness(103%) contrast(94%);
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-brand span,
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-authorization > footer,
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-authorization > footer strong {
  color: #9bbbd0;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-intro h3 {
  color: #8dd0ff;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-intro p,
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-response p {
  color: #c2d4e0;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-status-grid h4 {
  color: #a8cce5;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-order-status {
  border-right-color: #6698b7;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-order-status > strong {
  border-color: #61b9e9;
  color: #dff3ff;
  background: linear-gradient(90deg, #183343, #1c2b35);
  box-shadow: inset 0 1px rgba(214, 241, 255, .12);
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-configuration span,
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-configuration strong {
  color: #d4e5ef;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-configuration i {
  border-bottom-color: #83bfe1;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-response button {
  border-color: #4ca9de;
  color: #f4fbff;
  background: linear-gradient(180deg, #1376aa, #0a527d);
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 2px 8px rgba(0, 0, 0, .28);
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-response button:hover,
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-response button:focus-visible {
  background: linear-gradient(180deg, #2189be, #0e6699);
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-auth-thanks {
  color: #bce8ff;
}
.tankazon-store[data-websurf-theme="dark"] .websurf-proteus-authorization > footer {
  border-top-color: #6e9fbd;
}

/* Settings page uses the same WebSurf theme state and maps its local design
   tokens onto the shared chrome/page palette. */
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page {
  --ws-settings-page: var(--ws-page-bg);
  --ws-settings-panel: #1a2127;
  --ws-settings-row: #20282f;
  --ws-settings-border: #35434d;
  --ws-settings-border-strong: #465761;
  --ws-settings-text: var(--ws-text-strong);
  --ws-settings-muted: #9aabb7;
  --ws-settings-blue: #4aa9ff;
  --ws-settings-blue-soft: #1c3242;
  color-scheme: dark;
  background:
    radial-gradient(circle at 48% 0%, rgba(67, 125, 160, .15), transparent 36%),
    linear-gradient(180deg, #151b20 0%, var(--ws-settings-page) 100%);
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-kicker { color: #9ab2c4; }
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-panel-copy h2,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-section h3,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-toggle-label,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-peaceful-mode-row .settings-toggle-label,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-main-heading > div > strong,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-identity-copy > strong,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-sync-state-copy strong,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-sync-title-line strong,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-editor-heading strong,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-inline-editor-copy strong { color: var(--ws-settings-text); }
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-panel-copy > p:last-child,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .websurf-settings-heading-copy > p:last-child,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-section-note,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-toggle-note,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-main-heading > div > span,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-identity-copy > span,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-sync-label,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-sync-state-copy,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-sync-state-copy span,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-sync-state-copy [data-cloud-sync-detail],
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-editor-heading span,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-inline-editor-copy span { color: var(--ws-settings-muted); }
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-section,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page #accountCloudSaveSettingsSection {
  border-color: var(--ws-settings-border);
  background: var(--ws-settings-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 4px 13px rgba(0,0,0,.18);
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-toggle-row,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-toolbar-color-row,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-inline-action,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-peaceful-mode-row {
  border-color: #33414b;
  background: var(--ws-settings-row);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-game-settings-divider {
  border-color: #33414b;
}

.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-game-settings-divider span {
  color: #d3e6f4;
}

.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-game-settings-divider p {
  color: #9ab2c4;
}

/* WebSurf theme catalog and chrome-only theme skins. Individual sites retain
   their authored palettes; these variables are consumed by browser chrome. */
.websurf-themes-main { display: grid; gap: 16px; }
.websurf-themes-balance { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--ws-border, #c8d8e2); border-radius: 12px; background: var(--ws-panel-bg, #fff); color: var(--ws-text-secondary, #587184); }
.websurf-themes-balance strong { color: var(--ws-text-strong, #153d62); font-size: 1.2rem; }
.websurf-theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.websurf-theme-card { display: grid; gap: 10px; padding: 11px; border: 1px solid var(--ws-border, #c8d8e2); border-radius: 12px; background: var(--ws-panel-bg, #fff); box-shadow: 0 4px 12px rgba(28, 67, 91, .08); }
.websurf-theme-card.is-equipped { border-color: #3c94b4; box-shadow: 0 0 0 2px rgba(60, 148, 180, .16); }
.websurf-theme-card-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.websurf-theme-card h2 { margin: 0; color: var(--ws-text-strong, #153d62); font-size: .9rem; }
.websurf-theme-card p, .websurf-theme-card small { margin: 3px 0 0; color: var(--ws-text-secondary, #587184); font-size: .72rem; line-height: 1.3; }
.websurf-theme-preview { position: relative; height: 64px; overflow: hidden; border-radius: 8px; border: 1px solid rgba(18, 53, 75, .2); background: linear-gradient(180deg, #dbe7ef 0 30%, #f7fbfd 30%); }
.websurf-theme-preview span, .websurf-theme-preview i, .websurf-theme-preview b { position: absolute; display: block; border-radius: 99px; }
.websurf-theme-preview span { left: 9px; top: 9px; width: 20px; height: 8px; background: rgba(21, 61, 98, .55); }
.websurf-theme-preview i { left: 9px; right: 9px; bottom: 10px; height: 12px; background: rgba(30, 83, 115, .18); }
.websurf-theme-preview b { right: 11px; top: 10px; width: 9px; height: 9px; background: #3c94b4; }
.websurf-theme-preview-minimal { background: linear-gradient(180deg, #e5e7e8 0 30%, #fafafa 30%); filter: saturate(.45); }
.websurf-theme-preview-aquarium { background: linear-gradient(180deg, #0d6270 0 30%, #d9fbf4 30%); }
.websurf-theme-preview-aquarium i { background: rgba(21, 161, 151, .24); }.websurf-theme-preview-aquarium b { background: #7ee8d2; }
.websurf-theme-preview-retro { background: linear-gradient(180deg, #2c251c 0 30%, #171913 30%); }.websurf-theme-preview-retro span, .websurf-theme-preview-retro i { background: rgba(245, 186, 84, .48); }.websurf-theme-preview-retro b { background: #ffd067; }
.websurf-theme-preview-corporate { background: linear-gradient(180deg, #173d72 0 30%, #edf4ff 30%); }.websurf-theme-preview-corporate b { background: #55a6f5; }
.websurf-theme-preview-matte-black { background: linear-gradient(180deg, #151719 0 30%, #262a2d 30%); }.websurf-theme-preview-matte-black span, .websurf-theme-preview-matte-black i { background: rgba(223, 231, 234, .28); }.websurf-theme-preview-matte-black b { background: #aab4ba; }
.websurf-theme-preview-black-light { background: linear-gradient(180deg, #100c1b 0 30%, #171220 30%); }.websurf-theme-preview-black-light span, .websurf-theme-preview-black-light i { background: rgba(173, 93, 255, .44); }.websurf-theme-preview-black-light b { background: #69f5e7; box-shadow: 0 0 8px #69f5e7; }
.websurf-theme-preview-rainbow { background: linear-gradient(100deg, #ff5e78 0 12%, #ffb657 12% 25%, #f7ed5d 25% 38%, #55d89b 38% 51%, #55b8ff 51% 64%, #9474ff 64% 77%, #e86cea 77% 100%) 0 0 / 100% 30% no-repeat, #191b27; }.websurf-theme-preview-rainbow span, .websurf-theme-preview-rainbow i { background: rgba(245, 248, 255, .23); }.websurf-theme-preview-rainbow b { background: #fff; box-shadow: 0 0 7px #fff; }
.websurf-theme-preview-gold { background: linear-gradient(180deg, #352910 0 30%, #17140f 30%); }.websurf-theme-preview-gold span, .websurf-theme-preview-gold i { background: rgba(255, 207, 93, .34); }.websurf-theme-preview-gold b { background: #f5c54f; }
.websurf-theme-preview-atomic-purple { background: linear-gradient(180deg, #291244 0 30%, #181023 30%); }.websurf-theme-preview-atomic-purple span, .websurf-theme-preview-atomic-purple i { background: rgba(215, 133, 255, .35); }.websurf-theme-preview-atomic-purple b { background: #d96cff; box-shadow: 0 0 8px #d96cff; }
.websurf-theme-preview-red-velvet { background: linear-gradient(180deg, #4a0f1c 0 30%, #220d14 30%); }.websurf-theme-preview-red-velvet span, .websurf-theme-preview-red-velvet i { background: rgba(255, 177, 186, .3); }.websurf-theme-preview-red-velvet b { background: #e44c61; }
.websurf-theme-preview-burnt-titanium { background: linear-gradient(180deg, #30241e 0 30%, #202327 30%); }.websurf-theme-preview-burnt-titanium span, .websurf-theme-preview-burnt-titanium i { background: rgba(219, 145, 94, .3); }.websurf-theme-preview-burnt-titanium b { background: #d47b4f; }

.tankazon-store[data-websurf-chrome-theme="minimal"] { --ws-chrome-top: #e1e4e5; --ws-chrome-bottom: #eff1f2; --ws-chrome-border: #c8ced2; --ws-tab-bg-top: #f5f6f6; --ws-tab-bg-bottom: #e1e4e5; --ws-browser-button-bg: #fafafa; --ws-browser-button-border: #bfc5c8; --ws-browser-button-text: #3f4b52; --ws-chrome-surface: #eef0f1; --ws-chrome-divider: #c8ced2; }
.tankazon-store[data-websurf-chrome-theme="aquarium"] { --ws-chrome-top: #0d6270; --ws-chrome-bottom: #084c5b; --ws-chrome-border: #36a99c; --ws-tab-bg-top: #147883; --ws-tab-bg-bottom: #0b5865; --ws-tab-border: #42b6a8; --ws-tab-text: #effffb; --ws-tab-hover: #198995; --ws-tab-active-bg: #d8fff6; --ws-tab-active-text: #075c62; --ws-browser-button-bg: #0a5663; --ws-browser-button-hover: #167582; --ws-browser-button-border: #36a99c; --ws-browser-button-text: #effffb; --ws-chrome-surface: #063f4a; --ws-chrome-divider: #247f7b; --ws-chrome-focus: #6ff5df; }
.tankazon-store[data-websurf-chrome-theme="retro"] { --ws-chrome-top: #30291d; --ws-chrome-bottom: #201b13; --ws-chrome-border: #b88a40; --ws-tab-bg-top: #413623; --ws-tab-bg-bottom: #282216; --ws-tab-border: #8f7039; --ws-tab-text: #ffe2a5; --ws-tab-hover: #504328; --ws-tab-active-bg: #16150f; --ws-tab-active-text: #ffd36c; --ws-browser-button-bg: #2a2418; --ws-browser-button-hover: #3b311e; --ws-browser-button-border: #b88a40; --ws-browser-button-text: #ffe2a5; --ws-chrome-surface: #241f16; --ws-chrome-divider: #4c412b; --ws-chrome-focus: #ffd067; }
.tankazon-store[data-websurf-chrome-theme="corporate"] { --ws-chrome-top: #173d72; --ws-chrome-bottom: #0e2c58; --ws-chrome-border: #4a8fd2; --ws-tab-bg-top: #21518e; --ws-tab-bg-bottom: #133a6f; --ws-tab-border: #5d9fdd; --ws-tab-text: #edf6ff; --ws-tab-hover: #2a619f; --ws-tab-active-bg: #edf5ff; --ws-tab-active-text: #143d73; --ws-browser-button-bg: #123565; --ws-browser-button-hover: #1c4b80; --ws-browser-button-border: #4a8fd2; --ws-browser-button-text: #edf6ff; --ws-chrome-surface: #0b2851; --ws-chrome-divider: #316ba8; --ws-chrome-focus: #71c2ff; }
.tankazon-store[data-websurf-chrome-theme="matte-black"] { --ws-chrome-top: #151719; --ws-chrome-bottom: #0d0f10; --ws-chrome-border: #444b50; --ws-tab-bg-top: #24282b; --ws-tab-bg-bottom: #171a1c; --ws-tab-border: #50585d; --ws-tab-text: #edf1f2; --ws-tab-hover: #2e3438; --ws-tab-active-bg: #f0f3f4; --ws-tab-active-text: #202427; --ws-browser-button-bg: #252a2d; --ws-browser-button-hover: #343a3e; --ws-browser-button-border: #596168; --ws-browser-button-text: #eef2f3; --ws-input-bg: #f4f6f6; --ws-chrome-surface: #1b1f21; --ws-chrome-divider: #343b40; --ws-chrome-focus: #dce5e8; }
.tankazon-store[data-websurf-chrome-theme="black-light"] { --ws-chrome-top: #110b1c; --ws-chrome-bottom: #08070d; --ws-chrome-border: #7138b4; --ws-tab-bg-top: #221438; --ws-tab-bg-bottom: #140c22; --ws-tab-border: #864bd0; --ws-tab-text: #f3eaff; --ws-tab-hover: #321d50; --ws-tab-active-bg: #f5efff; --ws-tab-active-text: #381168; --ws-browser-button-bg: #1e1232; --ws-browser-button-hover: #321d52; --ws-browser-button-border: #8d52de; --ws-browser-button-text: #f4ebff; --ws-input-bg: #f8f4ff; --ws-chrome-surface: #160d24; --ws-chrome-divider: #3b2857; --ws-chrome-focus: #69f5e7; }
.tankazon-store[data-websurf-chrome-theme="rainbow"] { --ws-chrome-top: #222633; --ws-chrome-bottom: #11131b; --ws-chrome-border: #c387e8; --ws-tab-bg-top: #373d51; --ws-tab-bg-bottom: #202431; --ws-tab-border: #7585c8; --ws-tab-text: #f8f9ff; --ws-tab-hover: #48506b; --ws-tab-active-bg: #fff; --ws-tab-active-text: #252a3c; --ws-browser-button-bg: #2c3142; --ws-browser-button-hover: #454d68; --ws-browser-button-border: #9ba7e6; --ws-browser-button-text: #fff; --ws-input-bg: #fbfbff; --ws-chrome-surface: #1f2330; --ws-chrome-divider: #444d70; --ws-chrome-focus: #ff9acb; }
.tankazon-store[data-websurf-chrome-theme="gold"] { --ws-chrome-top: #382a0e; --ws-chrome-bottom: #17120a; --ws-chrome-border: #bc8b29; --ws-tab-bg-top: #503b14; --ws-tab-bg-bottom: #2d220c; --ws-tab-border: #d1a23f; --ws-tab-text: #ffefc8; --ws-tab-hover: #654b18; --ws-tab-active-bg: #fff6df; --ws-tab-active-text: #543a08; --ws-browser-button-bg: #3b2c0f; --ws-browser-button-hover: #594117; --ws-browser-button-border: #c89733; --ws-browser-button-text: #ffefc4; --ws-input-bg: #fffaf0; --ws-chrome-surface: #21190d; --ws-chrome-divider: #503d1d; --ws-chrome-focus: #f7d66e; }
.tankazon-store[data-websurf-chrome-theme="atomic-purple"] { --ws-chrome-top: #2c1149; --ws-chrome-bottom: #14081f; --ws-chrome-border: #a64fe2; --ws-tab-bg-top: #441c6a; --ws-tab-bg-bottom: #251039; --ws-tab-border: #bf6cf2; --ws-tab-text: #faedff; --ws-tab-hover: #592581; --ws-tab-active-bg: #fff1ff; --ws-tab-active-text: #4d126c; --ws-browser-button-bg: #32134f; --ws-browser-button-hover: #4d2074; --ws-browser-button-border: #bc64ec; --ws-browser-button-text: #faedff; --ws-input-bg: #fff7ff; --ws-chrome-surface: #21102f; --ws-chrome-divider: #4c2e65; --ws-chrome-focus: #e7a2ff; }
.tankazon-store[data-websurf-chrome-theme="red-velvet"] { --ws-chrome-top: #4b0f1c; --ws-chrome-bottom: #21080e; --ws-chrome-border: #b43e52; --ws-tab-bg-top: #661526; --ws-tab-bg-bottom: #350a13; --ws-tab-border: #cf586a; --ws-tab-text: #ffedf0; --ws-tab-hover: #7a1c30; --ws-tab-active-bg: #fff0f1; --ws-tab-active-text: #741326; --ws-browser-button-bg: #57111f; --ws-browser-button-hover: #751a2d; --ws-browser-button-border: #ca4c61; --ws-browser-button-text: #ffeef1; --ws-input-bg: #fff8f8; --ws-chrome-surface: #290b13; --ws-chrome-divider: #54222d; --ws-chrome-focus: #ff9dab; }
.tankazon-store[data-websurf-chrome-theme="burnt-titanium"] { --ws-chrome-top: #342720; --ws-chrome-bottom: #17191c; --ws-chrome-border: #a76546; --ws-tab-bg-top: #49342a; --ws-tab-bg-bottom: #29272a; --ws-tab-border: #bd7a56; --ws-tab-text: #f9eee8; --ws-tab-hover: #604235; --ws-tab-active-bg: #fff4ed; --ws-tab-active-text: #573023; --ws-browser-button-bg: #372e2b; --ws-browser-button-hover: #504038; --ws-browser-button-border: #b36f4e; --ws-browser-button-text: #f9eee9; --ws-input-bg: #fffaf7; --ws-chrome-surface: #222426; --ws-chrome-divider: #493f3b; --ws-chrome-focus: #f0ad83; }

/* Every catalogue chrome skin uses a light address surface. Keep its text
   deliberately dark, while the surrounding toolbar and bookmark row retain
   the high-contrast light ink intended for their darker surfaces. */
.tankazon-store[data-websurf-chrome-theme="minimal"] { --ws-input-bg: #fafafa; }
.tankazon-store[data-websurf-chrome-theme="aquarium"] { --ws-input-bg: #effffa; }
.tankazon-store[data-websurf-chrome-theme="retro"] { --ws-input-bg: #fffbf2; }
.tankazon-store[data-websurf-chrome-theme="corporate"] { --ws-input-bg: #f3f8ff; }
.tankazon-store[data-websurf-chrome-theme="minimal"],
.tankazon-store[data-websurf-chrome-theme="aquarium"],
.tankazon-store[data-websurf-chrome-theme="retro"],
.tankazon-store[data-websurf-chrome-theme="corporate"],
.tankazon-store[data-websurf-chrome-theme="matte-black"],
.tankazon-store[data-websurf-chrome-theme="black-light"],
.tankazon-store[data-websurf-chrome-theme="rainbow"],
.tankazon-store[data-websurf-chrome-theme="gold"],
.tankazon-store[data-websurf-chrome-theme="atomic-purple"],
.tankazon-store[data-websurf-chrome-theme="red-velvet"],
.tankazon-store[data-websurf-chrome-theme="burnt-titanium"] {
  --ws-input-text: #1d2730;
  --ws-input-border: #647f91;
  --ws-input-placeholder: #4e6575;
  --ws-chrome-text: #f5f9fb;
  --ws-chrome-muted: #cdd6dc;
  --ws-chrome-icon-filter: brightness(0) invert(1) opacity(.9);
  --ws-active-tab-icon-filter: none;
}
.tankazon-store[data-websurf-chrome-theme="retro"] { --ws-active-tab-icon-filter: brightness(0) invert(1) opacity(.9); }

/* The toolbar uses the soft panel token, so give the legacy catalogue skins
   their own surface instead of inheriting the default pale blue. */
.tankazon-store[data-websurf-chrome-theme="minimal"] {
  --ws-chrome-text: #2f3b42;
  --ws-chrome-muted: #64737a;
  --ws-tab-text: #2f3b42;
  --ws-tab-active-bg: #ffffff;
  --ws-tab-active-text: #1d2730;
  --ws-tab-hover: #ffffff;
  --ws-browser-button-hover: #ffffff;
  --ws-chrome-focus: #147593;
  --ws-chrome-icon-filter: none;
}
.tankazon-store[data-websurf-chrome-theme="aquarium"] .webpage-tab-strip,
.tankazon-store[data-websurf-chrome-theme="retro"] .webpage-tab-strip,
.tankazon-store[data-websurf-chrome-theme="corporate"] .webpage-tab-strip,
.tankazon-store[data-websurf-chrome-theme="aquarium"] .websurf-browser-toolbar,
.tankazon-store[data-websurf-chrome-theme="retro"] .websurf-browser-toolbar,
.tankazon-store[data-websurf-chrome-theme="corporate"] .websurf-browser-toolbar { color: #eefbff; }
.tankazon-store .websurf-browser-toolbar { border-bottom-color: var(--ws-chrome-divider, var(--ws-border-soft)); background: var(--ws-chrome-surface, var(--ws-panel-soft)); }
.tankazon-store .websurf-browser-toolbar { color: var(--ws-chrome-text); }
.tankazon-store .websurf-browser-toolbar button { border-color: var(--ws-browser-button-border); color: var(--ws-browser-button-text); background: var(--ws-browser-button-bg); }
.tankazon-store .websurf-browser-toolbar button:hover:not(:disabled) { background: var(--ws-browser-button-hover); }
.tankazon-store .websurf-address-field input { border-color: var(--ws-input-border); color: var(--ws-input-text); caret-color: var(--ws-input-text); background: var(--ws-input-bg); }
.tankazon-store .websurf-address-field input::placeholder { color: var(--ws-input-placeholder); opacity: 1; }
.tankazon-store .websurf-address-field input::selection { color: var(--ws-input-selection-text); background: var(--ws-input-selection-bg); }
.tankazon-store .websurf-browser-toolbar button:focus-visible,
.tankazon-store .websurf-address-field input:focus-visible { outline-color: var(--ws-chrome-focus, var(--ws-focus)); }

/* The premium chrome themes need a visible signature in the frame itself.
   These are deliberately limited to tabs and browser controls; site pages
   continue to render with their own authored color systems. */
.tankazon-store[data-websurf-chrome-theme="aquarium"] .webpage-tab-strip {
  background: linear-gradient(180deg, #117d87, #063f4a);
  box-shadow: inset 0 -2px 0 rgba(111, 245, 223, .46);
}
.tankazon-store[data-websurf-chrome-theme="retro"] .webpage-tab-strip,
.tankazon-store[data-websurf-chrome-theme="retro"] .websurf-browser-toolbar {
  background: linear-gradient(180deg, #332a1b, #201b13);
  box-shadow: inset 0 -2px 0 rgba(255, 208, 103, .52);
}
.tankazon-store[data-websurf-chrome-theme="corporate"] .webpage-tab-strip {
  background: linear-gradient(180deg, #225292, #0b2851);
  box-shadow: inset 0 -2px 0 rgba(113, 194, 255, .52);
}
.tankazon-store[data-websurf-chrome-theme="black-light"] .webpage-tab-strip,
.tankazon-store[data-websurf-chrome-theme="black-light"] .websurf-browser-toolbar {
  background: linear-gradient(180deg, #1f1035, #0b0813);
  box-shadow: inset 0 -2px 0 #69f5e7, inset 0 2px 0 rgba(186, 99, 255, .56);
}
.tankazon-store[data-websurf-chrome-theme="rainbow"] .webpage-tab-strip,
.tankazon-store[data-websurf-chrome-theme="rainbow"] .websurf-browser-toolbar {
  background: linear-gradient(90deg, #ff5e78 0%, #ffb657 18%, #f7ed5d 34%, #55d89b 50%, #55b8ff 66%, #9474ff 82%, #e86cea 100%) top / 100% 5px no-repeat, linear-gradient(180deg, #2b3042, #171a25);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.16);
}
.tankazon-store[data-websurf-chrome-theme="gold"] .webpage-tab-strip,
.tankazon-store[data-websurf-chrome-theme="gold"] .websurf-browser-toolbar {
  background: linear-gradient(180deg, #4b3710, #1d160a);
  box-shadow: inset 0 -2px 0 #e8bd50, inset 0 2px 0 rgba(255, 226, 143, .22);
}
.tankazon-store[data-websurf-chrome-theme="atomic-purple"] .webpage-tab-strip,
.tankazon-store[data-websurf-chrome-theme="atomic-purple"] .websurf-browser-toolbar {
  background: radial-gradient(circle at 52% -90%, rgba(233, 145, 255, .65), transparent 58%), linear-gradient(180deg, #3e185f, #170824);
  box-shadow: inset 0 -2px 0 #d96cff, 0 0 16px rgba(217, 108, 255, .16);
}
.tankazon-store[data-websurf-chrome-theme="red-velvet"] .webpage-tab-strip,
.tankazon-store[data-websurf-chrome-theme="red-velvet"] .websurf-browser-toolbar {
  background: radial-gradient(circle at 50% -120%, rgba(186, 47, 70, .7), transparent 60%), linear-gradient(180deg, #5b1021, #25080f);
  box-shadow: inset 0 -2px 0 #dd5367;
}
.tankazon-store[data-websurf-chrome-theme="burnt-titanium"] .webpage-tab-strip,
.tankazon-store[data-websurf-chrome-theme="burnt-titanium"] .websurf-browser-toolbar {
  background: linear-gradient(112deg, #4c3026 0%, #28313a 32%, #1a1d21 57%, #5a3528 100%);
  box-shadow: inset 0 -2px 0 #d98256, inset 0 2px 0 rgba(122, 167, 189, .42);
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-debug-toggle {
  border-color: var(--ws-settings-border);
  background: #20282f;
  color: var(--ws-settings-text);
  box-shadow: none;
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-depth-level-control output { color: #cfe6f5; }
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-depth-level-ticks { color: #90a4b1; }
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-select,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-editor-input,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-inline-editor-controls input {
  color: #edf5f9;
  border-color: #41515c;
  background: #151c21;
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-color-input {
  border-color: #45535d;
  background: #151b20;
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-identity-card,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-sync-state-card {
  border-color: #374650;
  background: #1d252b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-edit-button {
  border-color: #43535e;
  background: #273139;
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-sync-state-card { color: var(--ws-settings-text); }
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-sync-state-card:not(:disabled):hover,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-sync-state-card:not(:disabled):focus-visible {
  background: #29343c;
  box-shadow: inset 0 0 0 1px #536977;
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-compact-action,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-other-actions .small-button {
  color: #e2edf3;
  border-color: #3c4c57;
  background: linear-gradient(180deg, #252e35, #1b2329);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-data-actions #exportDataButton,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-data-actions #importDataButton {
  color: #dff3ff;
  border-color: #42677c;
  background: linear-gradient(180deg, #274556, #1c3442);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-data-actions #resetProgressButton,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-logout-action {
  color: #ff969d;
  border-color: #694349;
  background: linear-gradient(180deg, #3b272b, #2a1d20);
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-other-actions .donation-button {
  color: #d8f4ff;
  border-color: #42677c;
  background: linear-gradient(180deg, #264453, #1c3440);
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-message,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-email-status { color: #a8c4d5; }
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-editor-overlay { background: rgba(5, 10, 14, .72); }
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-editor-dialog,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-inline-editor {
  border-color: #3d4c56;
  background: #171e23;
  color: var(--ws-settings-text);
}

/* Convert monochrome Bubble Borough settings glyphs to a light treatment in
   dark mode. Branded WebSurf art and colored site favicons are untouched. */
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-section-heading-icon img,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-title-icon img,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-avatar img,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-mail-icon img,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-edit-button img,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-other-actions .settings-button-icon,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page #exportDataButton .settings-button-icon,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page #importDataButton .settings-button-icon {
  filter: brightness(0) invert(1) opacity(.88);
}
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page #resetProgressButton .settings-button-icon { filter: none; }

#settingsOverlay.websurf-settings-page .settings-websurf-theme-row .settings-select {
  width: 92px;
  min-width: 92px;
  height: 31px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: .7rem;
  font-weight: 750;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-panel { background: #11161a; }
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-button-glyph,
.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-support-heart { color: #dceaf2; }

/* ========================================================================== */
/* Plan A Phase 2: canonical WebSurf + BubbleBodega shell                       */
/* ========================================================================== */
.tankazon-store .tankazon-panel {
  width: min(1600px, calc(100vw - 18px));
  height: min(97dvh, 1040px);
  grid-template-rows: 40px auto auto auto minmax(0, 1fr);
}
.tankazon-store .webpage-tab-strip { height: 40px; min-height: 40px; max-height: 40px; padding-top: 3px; }
.tankazon-store .webpage-tab-strip { grid-row: 1; }
.tankazon-store .websurf-browser-toolbar { grid-row: 2; }
.tankazon-store .webpage-tab { height: 34px; padding: 0 7px 0 12px; }
.tankazon-store .webpage-tab.is-active { height: 36px; }
.tankazon-store .webpage-browser-settings,
.tankazon-store .webpage-browser-maximize,
.tankazon-store .webpage-browser-close { width: 31px; height: 31px; margin-top: 0; margin-bottom: 2px; }
.tankazon-store .tankazon-mainbar { grid-template-columns: 170px minmax(280px, 1fr) auto auto !important; min-height: 58px; padding: 6px 12px; gap: 10px; }
.tankazon-store .tankazon-logo { width: 154px !important; height: 46px !important; justify-self: start !important; object-position: left center !important; }

.tankazon-logo-button {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.tankazon-logo-button:focus-visible { outline: 2px solid #8eddf7; outline-offset: 4px; border-radius: 6px; }

.bubblebodega-home-page {
  min-height: min(720px, 100%);
  overflow: auto;
  padding: clamp(18px, 3vw, 44px);
  color: #153140;
  background: linear-gradient(135deg, #effcff 0%, #d9f2f0 48%, #fff5df 100%);
}

.bubblebodega-home-hero {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto 24px;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid rgba(22, 103, 121, .18);
  border-radius: 22px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 18px 42px rgba(29, 91, 108, .12);
}

.bubblebodega-home-hero img { width: min(205px, 32vw); height: auto; object-fit: contain; }
.bubblebodega-home-hero span, .bubblebodega-home-grid section > header span { color: #39788a; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.bubblebodega-home-hero h1 { margin: 4px 0; font-size: clamp(1.45rem, 3vw, 2.25rem); }
.bubblebodega-home-hero p { margin: 0; color: #4d6973; }
.bubblebodega-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1120px; margin: auto; }
.bubblebodega-home-grid section { min-width: 0; padding: 18px; border: 1px solid rgba(22, 103, 121, .15); border-radius: 18px; background: rgba(255, 255, 255, .84); }
.bubblebodega-home-grid section > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bubblebodega-home-grid h2 { margin: 0; font-size: 1rem; }
.bubblebodega-home-grid header button, .bubblebodega-home-card button { border: 0; border-radius: 999px; padding: 7px 10px; color: #fff; background: #16788a; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }
.bubblebodega-home-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(22, 103, 121, .12); }
.bubblebodega-home-card:first-of-type { border-top: 0; }
.bubblebodega-home-card div { min-width: 0; display: grid; gap: 3px; }
.bubblebodega-home-card strong, .bubblebodega-home-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubblebodega-home-card small, .bubblebodega-home-empty { color: #5b747d; font-size: .78rem; }
.bubblebodega-home-empty { margin: 14px 0 2px; line-height: 1.45; }

@media (max-width: 820px) { .bubblebodega-home-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .bubblebodega-home-hero { align-items: flex-start; } .bubblebodega-home-hero img { width: 104px; } }

/* BubbleBodega Home lives inside the regular catalogue surface: same chrome,
   same product tiles, only a curated vertical arrangement. */
.tankazon-store .tankazon-panel { grid-template-rows: auto minmax(0, 1fr); }
.tankazon-store .tankazon-body { min-height: 0; height: 100%; }
.tankazon-store:not(.tankazon-cart-open) .tankazon-body { grid-template-columns: minmax(0, 1fr); }
.tankazon-store:not(.tankazon-cart-open) .tankazon-cart { display: none; }
.tankazon-cart-toggle { flex: 0 0 auto; margin-left: 2px; padding: 7px 11px; border: 1px solid #6ab7e9; border-radius: 7px; color: #fff; background: #176fc4; font: 800 .8rem/1 system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.tankazon-cart-toggle:hover { background: #2586df; }

.bubblebodega-home-page {
  min-height: 100%;
  padding: 14px;
  overflow: auto;
  color: #101820;
  background: #edf3f5;
}
.bubblebodega-home-content { display: grid; gap: 12px; min-width: 0; }
.bubblebodega-home-section { padding: 14px; border: 1px solid #d1e1e5; border-radius: 10px; background: linear-gradient(125deg, #dff8fb, #eefcff 55%, #d9f4e7); }
.bubblebodega-home-section:nth-child(2) { background: linear-gradient(125deg, #e5f7ff, #f5fcff 52%, #d8f0fa); }
.bubblebodega-home-section:nth-child(3) { background: linear-gradient(125deg, #d8f4fb, #effbff 56%, #d6eff7); }
.bubblebodega-home-section > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 2px 10px; }
.bubblebodega-home-section h2 { margin: 0; color: #063152; font-size: clamp(1.15rem, 2vw, 1.65rem); line-height: 1.1; }
.bubblebodega-home-section p { margin: 3px 0 0; color: #31566b; font-size: .86rem; }
.bubblebodega-home-link { border: 0; color: #083d64; background: transparent; font: 800 .86rem/1 system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.bubblebodega-home-link:hover { color: #0879bf; text-decoration: underline; }
.bubblebodega-home-product-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 260px));
  justify-content: start;
  gap: 10px;
}
.tankazon-store .bubblebodega-home-product-card { height: 248px !important; min-height: 248px !important; max-height: 248px !important; grid-template-rows: 128px 50px 42px !important; background: #fff; }
.tankazon-store .bubblebodega-home-product-card .shop-thumb, .tankazon-store .bubblebodega-home-product-card .decor-thumb { height: 128px !important; min-height: 128px !important; }
.tankazon-store .bubblebodega-home-product-card .shop-card-main { min-height: 0; }
.tankazon-store .bubblebodega-home-product-card .bubblebodega-home-reason { display: block !important; margin-top: 4px; color: #365c72; font-size: .76rem; line-height: 1.2; white-space: normal; }
.tankazon-store .bubblebodega-home-product-card .buy-button { min-height: 32px; }
.bubblebodega-home-empty { margin: 6px 2px 2px !important; padding: 12px !important; border-radius: 7px; background: rgba(255,255,255,.75); }

/* Home uses the exact same compact product tiles as the category catalogues.
   The recommendation reason remains available as a tooltip instead of adding
   a second card treatment. */
.tankazon-store.is-bubblebodega-home-open .store-facets { display: none !important; }
.tankazon-store.is-bubblebodega-home-open .tankazon-body { grid-template-rows: minmax(0, 1fr) !important; }
.tankazon-store.is-bubblebodega-home-open .tankazon-catalog-area,
.tankazon-store.is-bubblebodega-home-open .tankazon-cart { grid-row: 1 !important; }
.tankazon-store.is-bubblebodega-home-open .bubblebodega-home-product-card {
  height: 323px !important;
  min-height: 323px !important;
  max-height: 323px !important;
  grid-template-rows: 196px 58px 38px !important;
}
.tankazon-store.is-bubblebodega-home-open .bubblebodega-home-product-card .shop-thumb,
.tankazon-store.is-bubblebodega-home-open .bubblebodega-home-product-card .decor-thumb {
  height: 196px !important;
  min-height: 196px !important;
  max-height: 196px !important;
  background: radial-gradient(circle at 50% 13%, #68c9ed 0, #1685b9 48%, #06436c 100%) !important;
}
/* Appearance selectors are actual buttons rendered from the fish's available
   variants. Do not layer decorative pseudo-dots over them: those looked like
   extra choices but could never be selected. */
.tankazon-store.is-bubblebodega-home-open .bubblebodega-home-product-card::after { content: none; }
.tankazon-store.is-bubblebodega-home-open .bubblebodega-home-product-card .bubblebodega-home-reason { display: none !important; }

@media (max-width: 800px) { .tankazon-nav-promo { display: none; } .bubblebodega-home-product-row { grid-template-columns: repeat(auto-fill, minmax(150px, 225px)); } }
.tankazon-store .tankazon-search { height: 38px; grid-template-columns: minmax(0,1fr) 44px; }
.tankazon-store .tankazon-search input { padding-inline: 11px; font-size: .88rem; }
.tankazon-store .tankazon-search-scope { min-width: 70px; padding-left: 9px; padding-right: 22px; font-size: .72rem; }
.tankazon-store .tankazon-account-button { min-height: 38px; }
.tankazon-store .store-coin-counter { min-height: 36px; }
.tankazon-store .tankazon-navrow { min-height: 36px; padding: 0 12px; gap: 8px; }
.tankazon-store .store-tab-button { min-height: 30px; padding: 5px 10px; font-size: .75rem; }
.tankazon-store .tankazon-all-categories { padding: 5px 8px; font-size: .73rem; }
.tankazon-store .tankazon-promo-strip { min-height: 40px; padding: 5px 14px; }
.tankazon-store .tankazon-promo-strip > div { grid-auto-flow: column; align-items: baseline; justify-content: start; column-gap: 10px; }
.tankazon-store .tankazon-promo-strip strong { font-size: 1rem; }
.tankazon-store .tankazon-promo-strip small { font-size: .68rem; }
@media (max-height: 760px) and (min-width: 821px) {
  .tankazon-store .tankazon-panel { height: calc(100dvh - 10px); }
  .tankazon-store .tankazon-promo-strip { display: none; }
}
@media (max-width: 1180px) {
  .tankazon-store .tankazon-mainbar { grid-template-columns: 145px minmax(220px, 1fr) auto auto !important; gap: 8px; }
  .tankazon-store .tankazon-logo { width: 132px !important; height: 42px !important; }
  .tankazon-store .tankazon-nav-promo small { display: none; }
}
@media (max-width: 820px) {
  .tankazon-store { padding: 4px; }
  .tankazon-store .tankazon-panel { width: calc(100vw - 8px); height: calc(100dvh - 8px); }
  .tankazon-store .tankazon-mainbar { grid-template-columns: 104px minmax(0, 1fr) auto auto !important; min-height: 52px; padding: 5px 7px; gap: 6px; }
  .tankazon-store .tankazon-logo { width: 96px !important; height: 38px !important; }
  .tankazon-store .tankazon-search { grid-template-columns: minmax(0,1fr) 38px; height: 36px; }
  .tankazon-store .tankazon-search-scope { min-width: 52px; padding-left: 6px; padding-right: 16px; }
  .tankazon-store .tankazon-account-button { min-height: 36px; padding-inline: 6px; }
  .tankazon-store .tankazon-navrow { padding-inline: 6px; }
  .tankazon-store .tankazon-nav-promo { display: none; }
  .tankazon-store .tankazon-promo-strip { min-height: 34px; padding: 4px 8px; }
  .tankazon-store .tankazon-promo-strip small { display: none; }
}

/* ========================================================================== */
/* WebSurf Phase 5: Ratio Lock integration + responsive regression guard       */
/* ========================================================================== */
/* Ratio Lock scales the saved app shell as one composition. WebSurf must use
   that locked composition box too, rather than re-reading the physical browser
   viewport and triggering a second mobile/tablet layout before scaling. */
html[data-layout-ratio-lock="true"] .store-overlay.tankazon-store {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-items: center;
  justify-content: stretch;
  padding: clamp(8px, 1.2%, 14px);
  background: transparent;
}

html[data-layout-ratio-lock="true"] .tankazon-store .tankazon-panel {
  width: min(1600px, calc(100% - 16px));
  height: min(97%, 1040px);
  max-width: none;
  max-height: none;
  min-height: 0;
  gap: 0;
  padding: 0;
  border-radius: 12px;
}

/* Ratio Lock owns the outer composition box, but fullscreen must still occupy
   that entire box instead of inheriting the compact modal inset. */
html[data-layout-ratio-lock="true"] .store-overlay.tankazon-store.is-websurf-fullscreen {
  inset: 0;
  width: auto;
  height: auto;
  padding: 0;
  place-items: stretch;
}

html[data-layout-ratio-lock="true"] .tankazon-store.is-websurf-fullscreen .tankazon-panel {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* Viewport-based clamp() values otherwise shrink once from the physical browser
   width and then a second time from the Ratio Lock transform. Keep the desktop
   typography inside the locked composition and let the app-shell transform do
   the only scaling. */
html[data-layout-ratio-lock="true"] .websurf-home-header h1 {
  font-size: 3.45rem;
}

html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-panel-copy h2 {
  font-size: 2.65rem;
}

/* Explicit desktop invariants for the two first-party WebSurf pages. These are
   intentionally redundant with their base rules so future narrow-screen media
   additions cannot silently change a ratio-locked layout. */
html[data-layout-ratio-lock="true"] .websurf-home-main {
  width: min(1640px, calc(100% - 48px));
}
html[data-layout-ratio-lock="true"] .websurf-bookmark-row {
  grid-template-columns: repeat(auto-fit, minmax(210px, 250px));
  justify-content: start;
}
html[data-layout-ratio-lock="true"] .websurf-mail-row-shell {
  grid-template-columns: 34px minmax(0, 1fr);
}
html[data-layout-ratio-lock="true"] .websurf-mail-row {
  grid-template-columns: 38px minmax(190px, 260px) minmax(360px, 1fr) 84px;
  gap: 13px;
}
html[data-layout-ratio-lock="true"] .websurf-mail-sender {
  display: grid;
}
html[data-layout-ratio-lock="true"] .websurf-mail-copy small {
  white-space: nowrap;
}
html[data-layout-ratio-lock="true"] .websurf-mail-detail {
  flex-direction: column;
  align-items: stretch;
  padding: 4px 18px 16px 76px;
}
html[data-layout-ratio-lock="true"] .websurf-inbox > header {
  align-items: center;
  flex-wrap: nowrap;
}
html[data-layout-ratio-lock="true"] .websurf-inbox-header-actions {
  width: auto;
  justify-content: flex-end;
}
html[data-layout-ratio-lock="true"] .websurf-mail-actions {
  flex-wrap: nowrap;
}
html[data-layout-ratio-lock="true"] .websurf-status-bar {
  align-items: center;
  flex-direction: row;
  gap: 20px;
}

html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-dashboard-panel {
  padding: 18px 42px 16px;
}
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-panel-header {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
}
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .websurf-settings-brand-icon {
  width: 78px;
  height: 78px;
}
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "account account"
    "left right";
}
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-account-topbar {
  position: absolute;
  top: 10px;
  right: 12px;
  grid-template-columns: auto;
  padding: 0;
}
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-main-heading {
  padding-right: 500px;
}
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-dashboard {
  grid-template-columns: minmax(0, 1fr) 205px;
}
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-core-panel {
  grid-template-columns: minmax(190px, 0.8fr) minmax(290px, 1.12fr) minmax(250px, 0.95fr);
}
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-side-actions {
  grid-template-columns: 1fr 1fr;
}
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-account-data-actions {
  grid-template-columns: repeat(3, minmax(0, 150px));
  justify-content: end;
}
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-other-actions {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}


/* ========================================================================== */
/* WebSurf Settings polish: compact header, atlas icons, and button fitting    */
/* ========================================================================== */
#settingsOverlay.websurf-settings-page .settings-dashboard-panel {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding-top: 12px;
}

#settingsOverlay.websurf-settings-page .settings-panel-header {
  min-height: 54px;
  padding: 0 2px 6px;
}

#settingsOverlay.websurf-settings-page .websurf-settings-heading {
  display: block;
}

#settingsOverlay.websurf-settings-page .websurf-settings-heading-copy {
  gap: 2px;
}

#settingsOverlay.websurf-settings-page .settings-panel-copy h2 {
  font-size: 1.34rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

#settingsOverlay.websurf-settings-page .settings-panel-copy > p:last-child,
#settingsOverlay.websurf-settings-page .websurf-settings-heading-copy > p:last-child {
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.18;
}

/* Give Reset Password enough room to stay readable at the saved desktop ratio. */
#settingsOverlay.websurf-settings-page .cloud-account-dashboard {
  grid-template-columns: minmax(0, 1fr) 232px;
}

#settingsOverlay.websurf-settings-page .cloud-account-side-actions {
  grid-template-columns: minmax(126px, 1.12fr) minmax(90px, 0.88fr);
}

#settingsOverlay.websurf-settings-page .cloud-account-compact-action {
  min-width: 0;
  padding-inline: 6px;
  gap: 4px;
}

#settingsOverlay.websurf-settings-page .cloud-account-compact-action strong {
  min-width: 0;
  font-size: 0.66rem;
  line-height: 1.08;
  white-space: nowrap;
}

/* The final action has substantially longer copy than the other resource
   buttons, so reserve it a wider column instead of squeezing or clipping it. */
#settingsOverlay.websurf-settings-page .settings-other-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(132px, 1.28fr);
  gap: 6px;
}

#settingsOverlay.websurf-settings-page .settings-other-actions .small-button {
  min-width: 0;
  min-height: 54px;
  padding: 6px 6px;
  font-size: 0.64rem;
  line-height: 1.05;
  white-space: normal;
  text-align: center;
}

#settingsOverlay.websurf-settings-page .settings-other-actions .settings-button-icon {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

/* Ratio Lock must preserve this compact desktop composition rather than
   restoring the older oversized title and narrower action columns. */
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-panel-copy h2 {
  font-size: 1.34rem;
}

html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-panel-header {
  min-height: 54px;
}

html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-dashboard {
  grid-template-columns: minmax(0, 1fr) 232px;
}

html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-side-actions {
  grid-template-columns: minmax(126px, 1.12fr) minmax(90px, 0.88fr);
}

html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-other-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(132px, 1.28fr);
}


/* ========================================================================== */
/* WebSurf Settings polish r2: toolbar visibility + account action spacing     */
/* ========================================================================== */
#settingsOverlay.websurf-settings-page .settings-account-data-actions {
  grid-template-columns: 132px 132px 150px;
  gap: 14px;
  align-items: stretch;
  justify-content: end;
}

#settingsOverlay.websurf-settings-page .settings-data-actions .small-button {
  width: 100%;
  min-width: 0;
  justify-content: center;
  column-gap: 7px;
  padding-inline: 12px;
  white-space: nowrap;
}

#settingsOverlay.websurf-settings-page .settings-account-topbar {
  right: 14px;
}

/* Keep the top action row visually separate from sync/password/logout below. */
#settingsOverlay.websurf-settings-page .cloud-account-dashboard {
  margin-top: 20px;
}

html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-account-data-actions {
  grid-template-columns: 132px 132px 150px;
  gap: 14px;
  justify-content: end;
}

html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-account-topbar {
  right: 14px;
}

html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-dashboard {
  margin-top: 20px;
}

/* Bubble Borough Bank: shared light layout with WebSurf light and dark palettes. */
.bubble-bank-page {
  --bank-page-bg: #f2f5f7;
  --bank-shell-bg: #f7f9fa;
  --bank-header-bg: linear-gradient(180deg, #f7f9fa 0%, #edf1f4 100%);
  --bank-header-border: #c8d0d6;
  --bank-text: #162334;
  --bank-text-soft: #5b6876;
  --bank-text-muted: #7a8793;
  --bank-card-bg: linear-gradient(135deg, rgba(255,255,255,.96), rgba(225,231,235,.94));
  --bank-card-border: #c7d0d6;
  --bank-panel-bg: rgba(255,255,255,.96);
  --bank-panel-border: #d0d6da;
  --bank-row-credit: #f0f7f3;
  --bank-row-credit-border: #d7e5dd;
  --bank-row-debit: #fff2f2;
  --bank-row-debit-border: #efd4d5;
  --bank-row-neutral: #f4f6f7;
  --bank-row-neutral-border: #dfe4e7;
  --bank-button-bg: linear-gradient(180deg, #f7f9fa, #e4eaee);
  --bank-button-border: #c2cbd1;
  --bank-button-text: #1c2a38;
  --bank-link: #243d5a;
  --bank-gold: #f0c62c;
  --bank-credit: #169b55;
  --bank-debit: #e22431;
  --bank-shadow: 0 7px 20px rgba(31, 45, 56, .11);
  color-scheme: light;
  color: var(--bank-text);
  background: var(--bank-page-bg);
}

.bubble-bank-window-header {
  position: relative;
  grid-template-columns: minmax(278px, auto) minmax(0, 1fr) auto;
  gap: 24px;
  min-height: 98px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--bank-header-border);
  color: var(--bank-text);
  background: var(--bank-header-bg);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.72);
}

.bubble-bank-logo {
  display: block;
  width: auto;
  height: 76px;
  max-width: min(340px, 27vw);
  object-fit: contain;
  object-position: left center;
}

.bubble-bank-window-header::before,
.bubble-bank-window-header::after {
  display: none;
  content: none;
}

.bubble-bank-tabs {
  justify-self: start;
  align-self: center;
  gap: 12px;
}

.bubble-bank-tab {
  min-width: 148px;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid var(--bank-button-border);
  border-radius: 10px;
  color: var(--bank-button-text);
  background: var(--bank-button-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 1px 2px rgba(40,52,61,.06);
  font-size: .92rem;
}

.bubble-bank-tab:hover {
  border-color: #aeb8bf;
  background: linear-gradient(180deg, #fff, #e9eef1);
}

.bubble-bank-tab.is-active {
  border: 2px solid var(--bank-gold);
  color: #f8f9fa;
  background: linear-gradient(180deg, #38414a, #252c32);
  box-shadow: 0 0 0 2px rgba(240,198,44,.14), 0 3px 8px rgba(35,43,49,.16);
}

.bubble-bank-tab[data-bank-tab="account"] > span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f6cc31;
  box-shadow: inset 0 0 0 1px rgba(131,92,0,.16);
}

.bubble-bank-tab-icon,
.bubble-bank-tab.is-active .bubble-bank-tab-icon {
  width: 12px;
  height: 12px;
  filter: none;
}

.bubble-bank-window-actions .bubble-bank-coin-amount {
  min-height: 50px;
  padding: 6px 18px;
  border: 1px solid #c9d1d6;
  color: var(--bank-text);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(231,236,239,.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 7px rgba(33,46,57,.11);
}

.bubble-bank-window-actions .bubble-bank-coin-amount strong { color: var(--bank-text); }

.bubble-bank-scroll {
  background: var(--bank-page-bg);
  scrollbar-color: #aeb9c1 #eef2f4;
}

.bubble-bank-shell {
  color: var(--bank-text);
  background: var(--bank-shell-bg);
}

.bubble-bank-welcome {
  isolation: isolate;
  min-height: 178px;
  padding: 28px 72px 46px;
  color: var(--bank-text);
  background: linear-gradient(180deg, #fbfcfd 0%, #eef2f4 100%);
  border-bottom: 1px solid #d4dade;
}

.bubble-bank-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/web/bank/bank_banner.webp") center bottom / 100% auto no-repeat;
  opacity: .66;
  filter: blur(1.6px);
  transform: scale(1.012);
  transform-origin: center bottom;
  pointer-events: none;
}

.bubble-bank-welcome::after { display: none; }

.bubble-bank-welcome > div,
.bubble-bank-welcome > strong { position: relative; z-index: 1; }

.bubble-bank-welcome span {
  display: block;
  color: #5a6672;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bubble-bank-welcome h2 {
  display: block;
  margin: 2px 0 0;
  color: #172332;
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -.045em;
}

.bubble-bank-welcome p {
  margin: 8px 0 0;
  color: var(--bank-text-soft);
}

.bubble-bank-welcome > strong {
  max-width: 210px;
  color: #53606d;
  text-align: right;
  line-height: 1.35;
}

.bubble-bank-account,
.bubble-bank-card-list,
.bubble-bank-empty {
  z-index: 2;
  width: calc(100% - 96px);
}

.bubble-bank-balance-card {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 30px;
  min-height: 118px;
  margin: -38px auto 18px;
  padding: 22px 34px;
  border: 1px solid var(--bank-card-border);
  color: var(--bank-text);
  background: var(--bank-card-bg);
  box-shadow: var(--bank-shadow), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(9px);
}

.bubble-bank-balance-card::after {
  content: "A brighter ocean\A for brighter tomorrows.";
  align-self: center;
  padding: 4px 0 4px 26px;
  border-left: 1px solid #c8d0d5;
  color: #747f89;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .92rem;
  font-style: italic;
  line-height: 1.45;
  white-space: pre;
}

.bubble-bank-balance-card > div > span:first-child {
  color: #293746;
  font-size: 1.02rem;
}

.bubble-bank-balance-card .bubble-bank-coin-amount strong {
  color: var(--bank-text);
  font-size: 2.65rem;
}

.bubble-bank-balance-card small { color: #435261; }

.bubble-bank-ledger {
  padding: 0 12px 10px;
  border: 1px solid var(--bank-panel-border);
  background: var(--bank-panel-bg);
  box-shadow: var(--bank-shadow);
}

.bubble-bank-ledger > header { padding: 15px 20px; }
.bubble-bank-ledger h3 { color: var(--bank-text); }
.bubble-bank-ledger > header > div > span { color: #53606d; }

.bubble-bank-filter {
  border-color: var(--bank-button-border);
  color: #3c4956;
  background: #fbfcfd;
}

.bubble-bank-filter:focus-visible {
  outline-color: rgba(72, 88, 101, .24);
}

.bubble-bank-transaction {
  border-color: var(--bank-row-credit-border);
  color: var(--bank-text);
  background: var(--bank-row-credit);
}

.bubble-bank-transaction.is-debit {
  border-color: var(--bank-row-debit-border);
  background: var(--bank-row-debit);
}

.bubble-bank-transaction.is-neutral {
  border-color: var(--bank-row-neutral-border);
  background: var(--bank-row-neutral);
}

.bubble-bank-coin-amount { color: var(--bank-text); }
.bubble-bank-coin-amount.is-credit strong { color: var(--bank-credit); }
.bubble-bank-coin-amount.is-debit strong { color: var(--bank-debit); }

.bubble-bank-transaction-copy strong { color: var(--bank-text); }
.bubble-bank-transaction-copy span,
.bubble-bank-transaction time,
.bubble-bank-milestone-card time { color: var(--bank-text-muted); }

.bubble-bank-row-link { color: var(--bank-link); }
.bubble-bank-row-link:hover { color: #0d1721; }

.bubble-bank-reward-card,
.bubble-bank-milestone-card,
.bubble-bank-empty {
  border-color: var(--bank-panel-border);
  color: var(--bank-text);
  background: var(--bank-panel-bg);
  box-shadow: var(--bank-shadow);
}

.bubble-bank-reward-card summary span,
.bubble-bank-reward-math > p,
.bubble-bank-milestone-card p,
.bubble-bank-milestone-card small,
.bubble-bank-empty span { color: var(--bank-text-muted); }

.bubble-bank-reward-math { border-top-color: #e0e4e7; }
.bubble-bank-math-columns > div { background: #eef6f1; }
.bubble-bank-math-columns > div:last-child { background: #fff0f0; }

.bubble-bank-milestone-star {
  color: #1d2833;
  background: linear-gradient(145deg, #ffe170, #e8b71e);
  box-shadow: inset 0 0 0 1px rgba(129,89,0,.18);
}

.bubble-bank-shell > footer {
  color: #697682;
  background: #e8edf0;
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-page {
  --bank-page-bg: #111519;
  --bank-shell-bg: #14191d;
  --bank-header-bg: linear-gradient(180deg, #1d2328 0%, #151a1e 100%);
  --bank-header-border: #3c454c;
  --bank-text: #eef2f5;
  --bank-text-soft: #b4bec6;
  --bank-text-muted: #8f9ba4;
  --bank-card-bg: linear-gradient(135deg, rgba(34,41,47,.97), rgba(24,30,35,.97));
  --bank-card-border: #505960;
  --bank-panel-bg: rgba(23,28,32,.98);
  --bank-panel-border: #3b444b;
  --bank-row-credit: #1a2024;
  --bank-row-credit-border: #3d474d;
  --bank-row-debit: #1a2024;
  --bank-row-debit-border: #3d474d;
  --bank-row-neutral: #1a2024;
  --bank-row-neutral-border: #3d474d;
  --bank-button-bg: linear-gradient(180deg, #252c32, #1a2025);
  --bank-button-border: #4a555e;
  --bank-button-text: #e4eaee;
  --bank-link: #efc83f;
  --bank-credit: #4dd66f;
  --bank-debit: #ff5858;
  --bank-shadow: 0 8px 23px rgba(0,0,0,.3);
  color-scheme: dark;
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-window-header {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.025);
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-window-header::before {
  color: #f0f3f5;
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-window-header::after {
  color: #e9bd31;
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-tab:hover {
  border-color: #5a6670;
  background: linear-gradient(180deg, #30383f, #232a30);
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-tab.is-active {
  color: #f6d24b;
  background: linear-gradient(180deg, #242a2f, #171c20);
  box-shadow: 0 0 0 1px rgba(240,198,44,.22), 0 0 18px rgba(240,198,44,.08);
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-window-actions .bubble-bank-coin-amount {
  border-color: #59636b;
  background: linear-gradient(180deg, #343c43, #20262b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 7px rgba(0,0,0,.28);
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-window-actions .bubble-bank-coin-amount strong {
  color: #f1f4f6;
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-scroll {
  scrollbar-color: #59666f #171c20;
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-welcome {
  color: var(--bank-text);
  background: linear-gradient(180deg, #171d22 0%, #12171b 100%);
  border-bottom-color: #394249;
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-welcome::before {
  opacity: .24;
  filter: blur(1.8px) brightness(.85) contrast(1.08);
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-welcome span { color: #a8b2ba; }
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-welcome h2 { color: #f3f5f6; }
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-welcome p { color: #aab5bd; }
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-welcome > strong { color: #aeb8bf; }

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-balance-card {
  box-shadow: var(--bank-shadow), inset 0 1px 0 rgba(255,255,255,.045);
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-balance-card::after {
  border-left-color: #4a5359;
  color: #a8b0b7;
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-balance-card > div > span:first-child,
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-balance-card small,
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-balance-card .bubble-bank-coin-amount strong,
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-ledger h3,
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-transaction-copy strong { color: var(--bank-text); }

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-filter {
  border-color: #4a555e;
  color: #dce3e8;
  background: #151a1e;
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-transaction {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-row-link:hover { color: #ffe171; }

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-reward-math { border-top-color: #353e44; }
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-math-columns > div { background: #18241e; }
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-math-columns > div:last-child { background: #271b1c; }

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-progress-overview > div,
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-progress-panel,
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-progression-event {
  border-color: #353e44;
  background: #171d21;
}
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-level-chip,
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-progress-inline-list > span,
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-progression-symbol { background: #202a30; }
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-progression-event.is-complete .bubble-bank-progression-symbol { background: #4a3d18; }
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-progress-row { border-top-color: #303940; }
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-progress-overview span,
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-progress-panel span,
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-progression-event span,
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-progression-event small,
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-progression-event time { color: #aeb9c1; }
.tankazon-store[data-websurf-theme="dark"] .bubble-bank-weekly-award-row { border-top-color: rgba(255,255,255,.1); }

.tankazon-store[data-websurf-theme="dark"] .bubble-bank-shell > footer {
  color: #8e9aa3;
  background: #1b2227;
}

@media (max-width: 980px) {
  .bubble-bank-window-header {
    grid-template-columns: minmax(232px, auto) minmax(0, 1fr) auto;
    gap: 12px;
    padding-inline: 16px;
  }
  .bubble-bank-logo {
    height: 68px;
    max-width: min(300px, 26vw);
  }
  .bubble-bank-tab { min-width: 118px; padding-inline: 12px; }
}

@media (max-width: 820px) {
  .bubble-bank-window-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 10px 12px 12px;
  }
  .bubble-bank-logo {
    width: min(240px, 65vw);
    height: auto;
    max-width: 100%;
  }
  .bubble-bank-window-header .bubble-bank-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .bubble-bank-tabs { justify-self: stretch; }
  .bubble-bank-tab { flex: 1 1 0; }
  .bubble-bank-welcome { padding: 22px 22px 48px; }
  .bubble-bank-balance-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .bubble-bank-balance-card::after {
    padding: 14px 0 0;
    border-top: 1px solid #c8d0d5;
    border-left: 0;
  }
  .tankazon-store[data-websurf-theme="dark"] .bubble-bank-balance-card::after {
    border-top-color: #4a5359;
  }
}

/* Proteus navigation consolidation + public custom specimen service. */
.proteus-section-heading { max-width: 1120px; margin: 0 auto 24px; padding-top: 38px; border-top: 1px solid var(--proteus-rule); }
.proteus-section-heading > p:first-child { margin: 0 0 12px; color: #527797; font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.proteus-section-heading h3 { margin: 0; color: var(--proteus-ink); font-size: clamp(1.7rem, 3vw, 2.8rem); font-weight: 400; line-height: 1.08; }
.proteus-section-heading > p:last-child { max-width: 760px; margin: 14px 0 0; color: var(--proteus-muted); font-family: system-ui, sans-serif; font-size: .95rem; line-height: 1.65; }
.proteus-about-stewardship { max-width: 1120px; margin: 4px auto 36px; }
.proteus-about-stewardship .proteus-section-heading,
.proteus-about-stewardship .proteus-recovery-program,
.proteus-about-stewardship .proteus-principle-grid { max-width: none; }
.proteus-research-initiatives { max-width: 1120px; margin: 42px auto 0; }
.proteus-research-initiatives .proteus-section-heading,
.proteus-research-initiatives .proteus-program-list { max-width: none; }
.proteus-custom-specimen-service { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: clamp(24px, 5vw, 64px); max-width: 1120px; margin: 0 auto; }
.proteus-custom-specimen-service-copy { align-self: start; padding: 30px; border: 1px solid #a9c5d3; background: linear-gradient(135deg, rgba(227,240,245,.95), rgba(255,255,255,.96)); }
.proteus-custom-specimen-service-copy > span { color: #527797; font-family: system-ui, sans-serif; font-size: .66rem; font-weight: 800; letter-spacing: .16em; }
.proteus-custom-specimen-service-copy h3 { margin: 18px 0 16px; color: #1f455d; font-size: clamp(1.55rem, 2.7vw, 2.6rem); font-weight: 400; line-height: 1.1; }
.proteus-custom-specimen-service-copy p { margin: 0 0 16px; color: #496b80; font-family: system-ui, sans-serif; font-size: .94rem; line-height: 1.65; }
.proteus-custom-specimen-create { margin-top: 12px; }
.proteus-custom-specimen-capabilities { display: grid; gap: 12px; }
.proteus-custom-specimen-capabilities article { padding: 20px 22px; border: 1px solid var(--proteus-rule); background: rgba(255,255,255,.86); }
.proteus-custom-specimen-capabilities span { color: #527797; font-family: system-ui, sans-serif; font-size: .63rem; font-weight: 800; letter-spacing: .18em; }
.proteus-custom-specimen-capabilities strong { display: block; margin: 10px 0 7px; color: #214a62; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; }
.proteus-custom-specimen-capabilities p { margin: 0; color: #688294; font-family: system-ui, sans-serif; font-size: .82rem; line-height: 1.5; }
.proteus-site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1120px; margin: 54px auto 0; padding: 22px 0 8px; border-top: 1px solid var(--proteus-rule); color: #7891a1; font-family: system-ui, sans-serif; font-size: .62rem; letter-spacing: .1em; }
.proteus-site-footer nav { display: flex; gap: 18px; }
.proteus-site-footer button { padding: 0; border: 0; color: #426177; background: transparent; font: inherit; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.proteus-site-footer button:hover,.proteus-site-footer button:focus-visible { color: #173f57; text-decoration: underline; text-underline-offset: 3px; }

.proteus-designer-session { grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 16px; }
.proteus-designer-session-copy { display: grid; gap: 4px; }
.proteus-designer-balance { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 78px; padding-left: 14px; border-left: 1px solid #c3d7e2; }
.proteus-designer-balance img { width: 18px; height: 18px; object-fit: contain; }
.proteus-designer-balance strong { color: #173854; font-size: .8rem; letter-spacing: .04em; }
.proteus-designer-completion { min-height: 100%; background: radial-gradient(circle at 50% 35%, #fff 0, #f4f9fc 62%, #e9f3f7 100%); }
.proteus-designer-completion-card { display: grid; justify-items: center; width: min(620px, 92%); padding: 44px 48px; border: 1px solid #a9c8d8; background: rgba(255,255,255,.92); box-shadow: 0 18px 50px rgba(28,73,98,.1); }
.proteus-designer-completion-card > img { width: 72px; opacity: 1; transform: none; animation: none; }
.proteus-designer-completion-kicker { margin: 18px 0 8px !important; color: #527797 !important; font-family: system-ui, sans-serif !important; font-size: .62rem !important; font-weight: 800; letter-spacing: .2em !important; }
.proteus-designer-completion-card h1 { margin: 0; color: #173f57; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 400; letter-spacing: .02em; }
.proteus-designer-completion-card > p:not(.proteus-designer-completion-kicker) { max-width: 500px; margin: 18px 0 26px; color: #5b7789; font-family: system-ui, sans-serif; font-size: .9rem; line-height: 1.6; opacity: 1; transform: none; animation: none; }
.proteus-designer-completion-card dl { display: grid; width: 100%; margin: 0 0 28px; border-top: 1px solid #c8dce6; }
.proteus-designer-completion-card dl > div { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 20px; padding: 12px 4px; border-bottom: 1px solid #d8e6ed; text-align: left; }
.proteus-designer-completion-card dt { color: #66859a; font-family: system-ui, sans-serif; font-size: .62rem; font-weight: 800; letter-spacing: .14em; }
.proteus-designer-completion-card dd { margin: 0; color: #173f57; font-family: system-ui, sans-serif; font-size: .82rem; font-weight: 750; }
.proteus-designer-completion-card button { min-width: 220px; min-height: 46px; border: 1px solid #0d3450; border-radius: 4px; color: #fff; background: #0c3551; font: inherit; font-size: .68rem; font-weight: 800; letter-spacing: .15em; cursor: pointer; }
.proteus-designer-completion-card button:hover,.proteus-designer-completion-card button:focus-visible { background: #154b6b; }
.proteus-designer-completion-card small { margin-top: 20px; color: #7891a1; font-family: system-ui, sans-serif; font-size: .55rem; letter-spacing: .14em; }

@media (max-width: 720px) {
  .proteus-custom-specimen-service { grid-template-columns: 1fr; }
  .proteus-custom-specimen-service-copy { padding: 22px; }
  .proteus-site-footer { align-items: flex-start; flex-direction: column; }
  .proteus-designer-completion-card { padding: 30px 22px; }
  .proteus-designer-completion-card dl > div { grid-template-columns: 105px minmax(0,1fr); }
}

/* ========================================================================== */
/* Plan B Phase 1: shared compact WebSurf site chrome                          */
/* ========================================================================== */
.websurf-site-header {
  box-sizing: border-box;
  transition: min-height 180ms ease, height 180ms ease, padding 180ms ease, gap 180ms ease, box-shadow 180ms ease;
}

/* BubbleBodega keeps search and category shortcuts visible while reducing
   branding and account chrome once the catalogue is underway. */
.tankazon-store .tankazon-header.websurf-site-header.is-collapsed .tankazon-mainbar {
  min-height: 42px;
  padding-block: 3px;
  grid-template-columns: 124px minmax(260px, 1fr) auto auto !important;
  gap: 8px;
}
.tankazon-store .tankazon-header.websurf-site-header.is-collapsed .tankazon-logo {
  width: 112px !important;
  height: 34px !important;
}
.tankazon-store .tankazon-header.websurf-site-header.is-collapsed .tankazon-search {
  height: 34px;
}
.tankazon-store .tankazon-header.websurf-site-header.is-collapsed .tankazon-account-button {
  min-height: 34px;
  padding-block: 2px;
}
.tankazon-store .tankazon-header.websurf-site-header.is-collapsed .tankazon-account-button span small {
  display: none;
}
.tankazon-store .tankazon-header.websurf-site-header.is-collapsed .tankazon-navrow {
  min-height: 30px;
}
.tankazon-store .tankazon-header.websurf-site-header.is-collapsed .store-tab-button,
.tankazon-store .tankazon-header.websurf-site-header.is-collapsed .tankazon-all-categories {
  min-height: 26px;
  padding-block: 3px;
}

/* Bubble Borough Bank: make the account history the primary surface. */
.bubble-bank-window-header.websurf-site-header {
  min-height: 72px;
  padding: 6px 18px;
  gap: 16px;
}
.bubble-bank-window-header.websurf-site-header .bubble-bank-logo {
  height: 54px;
  max-width: min(250px, 22vw);
  transition: height 180ms ease, max-width 180ms ease;
}
.bubble-bank-window-header.websurf-site-header .bubble-bank-tabs { gap: 8px; }
.bubble-bank-window-header.websurf-site-header .bubble-bank-tab {
  min-width: 112px;
  min-height: 40px;
  padding: 8px 13px;
  font-size: .82rem;
  transition: min-height 180ms ease, padding 180ms ease, font-size 180ms ease;
}
.bubble-bank-window-header.websurf-site-header .bubble-bank-window-actions .bubble-bank-coin-amount {
  min-height: 40px;
  padding-block: 4px;
}
.bubble-bank-window-header.websurf-site-header.is-collapsed {
  min-height: 50px;
  padding-block: 3px;
  box-shadow: 0 5px 16px rgba(28, 40, 50, .12);
}
.bubble-bank-window-header.websurf-site-header.is-collapsed .bubble-bank-logo {
  height: 38px;
  max-width: 185px;
}
.bubble-bank-window-header.websurf-site-header.is-collapsed .bubble-bank-tab {
  min-height: 32px;
  padding: 5px 10px;
  font-size: .74rem;
}
.bubble-bank-window-header.websurf-site-header.is-collapsed .bubble-bank-window-actions .bubble-bank-coin-amount {
  min-height: 32px;
  padding: 3px 12px;
}
.bubble-bank-welcome {
  min-height: 120px;
  padding: 18px 52px 34px;
}
.bubble-bank-welcome h2 { font-size: clamp(1.7rem, 3vw, 2.55rem); }
.bubble-bank-welcome p { margin-top: 4px; font-size: .9rem; }
.bubble-bank-balance-card { margin-top: -26px; }

/* Proteus keeps the sterile launch-page identity but stops spending nearly a
   full card row on site chrome. */
.proteus-biodyne-header.websurf-site-header {
  grid-template-columns: minmax(190px, .72fr) minmax(520px, 2fr);
  min-height: 64px;
  padding: 7px 16px 7px 20px;
  gap: 14px;
}
.proteus-biodyne-header.websurf-site-header .proteus-biodyne-brand-icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  transition: width 180ms ease, height 180ms ease, flex-basis 180ms ease;
}
.proteus-biodyne-header.websurf-site-header .proteus-biodyne-brand-title {
  width: min(150px, 13vw);
  height: 38px;
  transition: width 180ms ease, height 180ms ease;
}
.proteus-biodyne-header.websurf-site-header .proteus-biodyne-nav {
  gap: clamp(9px, 1.5vw, 22px);
}
.proteus-biodyne-hero {
  min-height: clamp(285px, 38vh, 385px);
}
.proteus-biodyne-hero-copy { padding: 24px 18px 24px 38px; }
.proteus-biodyne-hero-copy > p:first-child { margin-bottom: 14px; }
.proteus-biodyne-intro { margin: 16px 0 16px; }
.proteus-biodyne-hero-side { padding-top: 32px; padding-bottom: 30px; }

/* Davy Jones' Locker retains the black-market identity while its catalogue
   header behaves like the rest of WebSurf. */
.davy-jones-locker-shell {
  width: min(1180px, calc(100% - 32px));
  padding: 18px 0 48px;
}
.davy-jones-locker-header.websurf-site-header {
  position: sticky;
  top: 0;
  z-index: 6;
  min-height: 68px;
  padding: 8px 6px 10px;
  background: rgba(5,5,5,.97);
  backdrop-filter: blur(8px);
}
.davy-jones-locker-header.websurf-site-header .davy-jones-locker-brand > img {
  width: 46px;
  height: 46px;
  transition: width 180ms ease, height 180ms ease;
}
.davy-jones-locker-header.websurf-site-header .davy-jones-locker-kicker {
  transition: opacity 140ms ease, margin 180ms ease, height 180ms ease;
}
.davy-jones-locker-header.websurf-site-header.is-collapsed {
  min-height: 46px;
  padding-block: 4px;
  border-bottom-color: #333;
  box-shadow: 0 8px 18px rgba(0,0,0,.32);
}
.davy-jones-locker-header.websurf-site-header.is-collapsed .davy-jones-locker-brand > img {
  width: 30px;
  height: 30px;
}
.davy-jones-locker-header.websurf-site-header.is-collapsed .davy-jones-locker-kicker {
  height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
}
.davy-jones-locker-header.websurf-site-header.is-collapsed h1 {
  font-size: 1.05rem;
}
.davy-jones-locker-header.websurf-site-header.is-collapsed code { font-size: .68rem; }
.davy-jones-locker-inventory { padding-top: 16px; }

/* Fast long-catalogue navigation. */

@media (max-width: 1180px) {
  .tankazon-store .tankazon-header.websurf-site-header.is-collapsed .tankazon-mainbar {
    grid-template-columns: 105px minmax(210px, 1fr) auto auto !important;
  }
  .tankazon-store .tankazon-header.websurf-site-header.is-collapsed .tankazon-logo { width: 96px !important; }
  .bubble-bank-window-header.websurf-site-header { grid-template-columns: minmax(210px, auto) minmax(0, 1fr) auto; gap: 10px; }
  .bubble-bank-window-header.websurf-site-header .bubble-bank-tab { min-width: 92px; }
  .proteus-biodyne-header.websurf-site-header { grid-template-columns: minmax(170px, .6fr) minmax(0, 2fr); }
}

@media (max-width: 820px) {
  .tankazon-store .tankazon-header.websurf-site-header.is-collapsed .tankazon-mainbar {
    grid-template-columns: 78px minmax(0, 1fr) auto auto !important;
    min-height: 42px;
  }
  .tankazon-store .tankazon-header.websurf-site-header.is-collapsed .tankazon-logo { width: 72px !important; height: 30px !important; }
  .tankazon-store .tankazon-header.websurf-site-header.is-collapsed .tankazon-account-button span { display: none; }
  .bubble-bank-window-header.websurf-site-header,
  .bubble-bank-window-header.websurf-site-header.is-collapsed {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 6px 10px;
  }
  .bubble-bank-window-header.websurf-site-header .bubble-bank-logo,
  .bubble-bank-window-header.websurf-site-header.is-collapsed .bubble-bank-logo { height: 40px; max-width: 180px; }
  .bubble-bank-window-header.websurf-site-header .bubble-bank-tabs { grid-column: 1 / -1; }
  .bubble-bank-welcome { min-height: 104px; padding: 14px 18px 30px; }
  .proteus-biodyne-header.websurf-site-header,
  .proteus-biodyne-header.websurf-site-header.is-collapsed {
    grid-template-columns: minmax(0, 1fr);
    min-height: 58px;
    padding: 6px 10px;
  }
  .proteus-biodyne-hero { min-height: 320px; }
  .proteus-biodyne-hero-copy { padding: 22px 18px; }
  .davy-jones-locker-shell { width: min(100% - 20px, 1180px); padding-top: 10px; }
  .davy-jones-locker-header.websurf-site-header code { display: none; }
}

/* ========================================================================== */
/* Plan B Phase 2: BubbleBodega virtualized catalogue + true lazy thumbnails */
/* ========================================================================== */
.tankazon-store .tankazon-virtual-host {
  position: relative;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  contain: layout style;
}

.tankazon-store .tankazon-virtual-host[hidden] {
  display: none !important;
}

.tankazon-store .tankazon-virtual-slice {
  position: absolute;
  inset-inline: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  align-items: start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.tankazon-store .tankazon-virtual-slice > .shop-card {
  width: 100%;
  min-width: 0;
}

@media (max-width: 1180px) {
  .tankazon-store .tankazon-virtual-slice {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  }
}

/* Long-form Proteus company About page. */
.proteus-about-longform { color: #35566c; }
.proteus-about-lead,
.proteus-about-section,
.proteus-about-feature-image,
.proteus-about-finale { max-width: 1120px; margin-left: auto; margin-right: auto; }
.proteus-about-lead { max-width: 940px; padding: clamp(34px, 6vw, 78px) 0 clamp(38px, 6vw, 72px); }
.proteus-about-lead > p:first-child,
.proteus-about-section > header > p,
.proteus-about-finale > p {
  margin: 0 0 18px;
  color: #527797;
  font-family: system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.proteus-about-lead h2 { margin: 0 0 28px; color: #173c54; font-size: clamp(2.65rem, 6vw, 6.2rem); font-weight: 400; letter-spacing: -.035em; line-height: .94; }
.proteus-about-lead h2:focus { outline: none; }
.proteus-about-lead p { max-width: 790px; margin: 0 0 17px; font-size: 1.02rem; line-height: 1.75; }
.proteus-about-lead .proteus-about-deck { color: #294f66; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.55; }
.proteus-about-lead .proteus-about-question { margin-top: 30px; color: #173c54; font-weight: 650; }
.proteus-about-lead blockquote { margin: 12px 0 34px; color: #173c54; font-size: clamp(1.8rem, 4vw, 3.7rem); font-style: italic; line-height: 1.12; }

.proteus-about-feature-image { position: relative; margin-bottom: clamp(54px, 8vw, 94px); overflow: hidden; border: 1px solid #aebfc8; background: #102f43; }
.proteus-about-feature-image img { display: block; width: 100%; max-height: 680px; object-fit: cover; }
.proteus-about-voss-image img { min-height: 440px; object-position: 50% 32%; }
.proteus-about-lab-image img { aspect-ratio: 16 / 8.5; object-position: center; filter: saturate(.84) contrast(1.04); }
.proteus-about-feature-image::after { content: ""; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(180deg, transparent, rgba(5, 28, 43, .82)); pointer-events: none; }
.proteus-about-feature-image figcaption { position: absolute; z-index: 1; right: 28px; bottom: 24px; left: 28px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; color: #eaf3f6; font-family: system-ui, sans-serif; font-size: .67rem; letter-spacing: .08em; }
.proteus-about-feature-image figcaption strong { font-family: Georgia, serif; font-size: 1.25rem; font-weight: 400; letter-spacing: 0; }

.proteus-about-section { display: grid; grid-template-columns: minmax(210px, .68fr) minmax(0, 1.32fr); gap: clamp(34px, 7vw, 92px); padding: clamp(42px, 6vw, 72px) 0; border-top: 1px solid var(--proteus-rule); }
.proteus-about-section > header h3 { margin: 0; color: #1f455d; font-size: clamp(1.8rem, 3.3vw, 3.2rem); font-weight: 400; line-height: 1.05; }
.proteus-about-section-copy { min-width: 0; }
.proteus-about-section-copy > p { margin: 0 0 18px; color: #486779; font-size: 1rem; line-height: 1.78; }
.proteus-about-section-copy strong { color: #234c64; }
.proteus-about-listline { color: #254f67 !important; font-family: system-ui, sans-serif; font-size: .82rem !important; font-weight: 750; letter-spacing: .075em; line-height: 1.8 !important; text-transform: uppercase; }
.proteus-about-stat { margin: 28px 0 !important; padding: 24px 26px; border: 1px solid #aac0cb; background: #e9f2f5; color: #315870 !important; font-size: 1.18rem !important; }
.proteus-about-stat strong { font-size: 1.55em; font-weight: 500; }
.proteus-about-emphasis { color: #173c54 !important; font-size: 1.2rem !important; font-style: italic; }

.proteus-about-section-dark { max-width: none; grid-template-columns: minmax(210px, .68fr) minmax(0, 1.32fr); margin-top: 30px; margin-bottom: 30px; padding: clamp(54px, 7vw, 84px) max(calc((100vw - 1120px) / 2), 18px); border-top: 0; background: #173c54; }
.proteus-about-section-dark > header > p { color: #a9c5d2; }
.proteus-about-section-dark > header h3 { color: #fff; }
.proteus-about-section-dark .proteus-about-section-copy > p { color: #c6d7df; }
.proteus-about-section-dark .proteus-about-section-copy strong { color: #fff; }
.proteus-about-section-dark .proteus-about-listline { color: #b5d2de !important; }
.proteus-about-section-dark .proteus-about-emphasis { color: #fff !important; }
.proteus-about-return-lines { margin: 34px 0; padding: 28px 30px; border: 1px solid rgba(210, 229, 236, .28); background: rgba(255,255,255,.045); }
.proteus-about-return-lines p { margin: 0 0 18px; color: #c6d7df; line-height: 1.7; }
.proteus-about-return-lines strong { display: block; margin-top: 7px; color: #fff; font-family: Georgia, serif; font-size: clamp(1.2rem, 2.2vw, 1.75rem); font-weight: 400; }

.proteus-about-dreams { display: grid; gap: 7px; margin: 26px 0 30px; color: #1f455d; font-size: clamp(1.25rem, 2.5vw, 2rem); font-style: italic; }
.proteus-about-note { margin-top: 30px; padding: 24px 26px; border: 1px solid #a8c0cc; background: #e9f2f5; }
.proteus-about-note span { color: #527797; font-family: system-ui, sans-serif; font-size: .63rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.proteus-about-note p { margin: 12px 0 8px; color: #294f66; font-size: 1.1rem; line-height: 1.5; }
.proteus-about-note small { color: #728894; font-family: system-ui, sans-serif; font-size: .72rem; }

.proteus-about-selachimorph { padding-top: 0; border-top: 0; }
.proteus-about-selachimorph .proteus-about-section-copy { grid-column: 2; }
.proteus-about-selachimorph blockquote { margin: 0 0 30px; padding: 0 0 0 24px; border-left: 2px solid #7fa6ba; color: #315870; font-size: clamp(1.28rem, 2.2vw, 1.8rem); font-style: italic; line-height: 1.45; }

.proteus-about-reclamation { margin-top: 20px; padding: clamp(42px, 6vw, 70px); border: 1px solid #9bb7c5; background: #e8f2f5; }
.proteus-about-reclamation-lines { display: grid; gap: 5px; margin: 30px 0; color: #1e485f; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 500; }

.proteus-about-finale { margin-top: clamp(62px, 8vw, 96px); padding: clamp(46px, 7vw, 82px); background: #102f43; color: #eaf3f6; }
.proteus-about-finale > p { color: #abc6d1; }
.proteus-about-finale h3 { max-width: 820px; margin: 0 0 38px; color: #fff; font-size: clamp(2.1rem, 4vw, 4rem); font-weight: 400; line-height: 1; }
.proteus-about-finale > div > p { margin: 0 0 16px; color: #c6d7df; font-size: 1rem; line-height: 1.72; }
.proteus-about-future-lines { display: grid; gap: 7px; margin: 30px 0 38px; color: #fff; font-size: clamp(1.3rem, 2.8vw, 2.25rem); font-style: italic; }
.proteus-about-finale blockquote { margin: 42px 0 0; padding-top: 32px; border-top: 1px solid rgba(216, 233, 239, .25); color: #fff; font-size: clamp(1.5rem, 3vw, 2.8rem); font-style: italic; line-height: 1.3; }
.proteus-about-finale footer { display: grid; gap: 4px; margin-top: 52px; color: #d8e7ed; }
.proteus-about-finale footer strong { font-family: system-ui, sans-serif; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.proteus-about-finale footer em { color: #9ebcc9; font-size: 1rem; }

@media (max-width: 900px) {
  .proteus-about-section,
  .proteus-about-section-dark { grid-template-columns: 1fr; }
  .proteus-about-selachimorph .proteus-about-section-copy { grid-column: 1; }
  .proteus-about-section-dark { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 560px) {
  .proteus-about-lead { padding-top: 22px; }
  .proteus-about-voss-image img { min-height: 360px; }
  .proteus-about-lab-image img { aspect-ratio: 4 / 3; }
  .proteus-about-feature-image figcaption { right: 18px; bottom: 18px; left: 18px; }
  .proteus-about-reclamation,
  .proteus-about-finale { padding: 30px 22px; }
}

/* Proteus subsidiary microsites opened from BubbleBodega seller links. */
.tankazon-store.websurf-subsidiary-open .tankazon-header,
.tankazon-store.websurf-subsidiary-open .tankazon-promo-strip,
.tankazon-store.websurf-subsidiary-open .tankazon-account-page,
.tankazon-store.websurf-subsidiary-open .tankazon-body,
.tankazon-store.websurf-subsidiary-open .store-scroll-controls,
.tankazon-store.websurf-subsidiary-open .proteus-biodyne-page,
.tankazon-store.websurf-subsidiary-open .proteus-designer-route {
  display: none !important;
}

.websurf-subsidiary-page {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  background: #f4f7f8;
}
.websurf-subsidiary-page[hidden],
.websurf-subsidiary-site[hidden] { display: none !important; }
.websurf-subsidiary-site {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: #17232b;
}
.websurf-subsidiary-site > header {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 34px;
  background: #fff;
  border-bottom: 1px solid #d5dde1;
}
.websurf-subsidiary-logo {
  display: block;
  max-width: min(380px, 52vw);
  max-height: 58px;
  object-fit: contain;
  object-position: left center;
}
.websurf-subsidiary-site > header code {
  font-size: 13px;
  color: #6d7c85;
  white-space: nowrap;
}
.websurf-subsidiary-copy {
  max-width: 920px;
  width: calc(100% - 68px);
  margin: 0 auto;
  padding: 54px 0 24px;
}
.websurf-subsidiary-copy > p:first-child {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64757e;
}
.websurf-subsidiary-copy h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: .98;
  letter-spacing: -.04em;
}
.websurf-subsidiary-copy h1 + p {
  max-width: 720px;
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #485963;
}
.websurf-subsidiary-gallery {
  max-width: 920px;
  width: calc(100% - 68px);
  margin: 12px auto 60px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.websurf-subsidiary-gallery img {
  width: 100%;
  height: 210px;
  box-sizing: border-box;
  object-fit: contain;
  padding: 18px;
  background: #fff;
  border: 1px solid #d6dfe3;
  border-radius: 10px;
}
.websurf-subsidiary-gallery-products { grid-template-columns: repeat(auto-fit, minmax(180px, 250px)); }
.websurf-subsidiary-site > footer {
  margin-top: auto;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 30px;
  background: #eef3f5;
  color: #52636d;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.websurf-subsidiary-site > footer img {
  display: block;
  max-width: 190px;
  max-height: 38px;
  object-fit: contain;
}

.webpage-tab[data-websurf-subsidiary-tab] img { object-fit: contain; }

@media (max-width: 760px) {
  .websurf-subsidiary-site > header { padding: 14px 18px; gap: 14px; }
  .websurf-subsidiary-site > header code { display: none; }
  .websurf-subsidiary-copy,
  .websurf-subsidiary-gallery { width: calc(100% - 36px); }
  .websurf-subsidiary-copy { padding-top: 34px; }
  .websurf-subsidiary-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .websurf-subsidiary-gallery img { height: 160px; }
}

.tankazon-item-pack-art {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  width: min(100%, 440px);
  min-height: 340px;
  margin: 0 auto;
  padding: 12px 8px;
}
.tankazon-item-pack-art-tile {
  display: grid;
  place-items: center;
  width: 33.333%;
  min-width: 112px;
  min-height: 84px;
  margin: -10px -6px;
}
.tankazon-item-pack-art-image {
  display: block;
  width: 100%;
  max-width: 132px;
  max-height: 92px;
  object-fit: contain;
}
.tankazon-item-pack-art-tile:nth-child(1) { transform: translate(14px, 16px) rotate(-7deg); }
.tankazon-item-pack-art-tile:nth-child(2) { transform: translate(10px, -6px) rotate(-2deg); }
.tankazon-item-pack-art-tile:nth-child(3) { transform: translate(-2px, 18px) rotate(5deg); }
.tankazon-item-pack-art-tile:nth-child(4) { transform: translate(-18px, -2px) rotate(-5deg); }
.tankazon-item-pack-art-tile:nth-child(5) { transform: translate(4px, 8px) rotate(4deg); }
.tankazon-item-pack-art-tile:nth-child(6) { transform: translate(0, 12px) rotate(-3deg); }
@media (max-width: 900px) {
  .tankazon-item-pack-art {
    width: min(100%, 320px);
    min-height: 220px;
    padding: 8px 4px;
  }
  .tankazon-item-pack-art-tile {
    width: 50%;
    min-width: 92px;
    min-height: 72px;
    margin: -8px -4px;
  }
  .tankazon-item-pack-art-image {
    max-width: 110px;
    max-height: 76px;
  }
}

/* BubbleBodega unavailable fish: gray the image backdrop, not the fish itself. */
.tankazon-store [data-tankazon-category="fish"] .shop-card.tankazon-card-out-of-stock .shop-thumb {
  background:
    radial-gradient(ellipse at 50% 24%, rgba(245, 247, 248, .86), transparent 55%),
    linear-gradient(180deg, #c9ced2 0%, #aeb5ba 58%, #8f989e 100%) !important;
  filter: none !important;
}

.tankazon-store [data-tankazon-category="fish"] .shop-card.tankazon-card-out-of-stock[data-store-seller="Proteus Biodyne" i]::before {
  filter: grayscale(1) brightness(.82) blur(1.5px) !important;
}

.store-facet-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 800;
  color: #3a505d;
}
.store-facet-sort-select {
  min-height: 36px;
  padding: 6px 30px 6px 10px;
  border: 1px solid #b8c8d2;
  border-radius: 8px;
  background: #fff;
  color: #263843;
  font: inherit;
  font-weight: 700;
}
.tankazon-store .shop-toolbar .shop-sort-control {
  display: none !important;
}
@media (max-width: 700px) {
  .store-facet-sort {
    gap: 6px;
    font-size: .72rem;
  }
  .store-facet-sort-select {
    min-height: 32px;
    padding-right: 26px;
  }
}


/* Store sort relocation cleanup */
.tankazon-store .shop-toolbar {
  display: none !important;
}
.tankazon-store .store-drawer {
  padding-top: 10px;
}
.store-facets {
  align-items: center;
}
.store-facet-head {
  flex: 0 0 auto;
  align-items: center;
}
.store-facet-groups {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
}
.store-facet-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 10px;
}


/* New-tank water/substrate setup */
.tank-setup-dialog {
  width: min(830px, calc(100vw - 28px));
  max-height: min(900px, calc(100vh - 28px));
  padding: 24px 28px 22px;
  border: 1px solid rgba(116, 213, 245, .42);
  border-radius: 22px;
  color: #eefaff;
  background:
    radial-gradient(circle at 92% 7%, rgba(72, 190, 222, .16), transparent 24%),
    linear-gradient(155deg, rgba(7, 42, 61, .985), rgba(3, 24, 38, .99));
  box-shadow: 0 24px 80px rgba(0, 9, 17, .54), inset 0 1px rgba(211, 247, 255, .12);
  overflow: auto;
}
.tank-setup-dialog::backdrop {
  background: rgba(0, 18, 30, .52);
  backdrop-filter: blur(5px);
}
.tank-setup-heading {
  align-items: flex-start;
  margin-bottom: 0;
}
.tank-setup-heading h2 {
  margin: 0;
  color: #f7fcff;
  font-size: clamp(1.55rem, 2.8vw, 2.05rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.tank-setup-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #75d9f7;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
}
.tank-setup-intro {
  max-width: 670px;
  margin: 11px 0 18px;
  color: #bdd7e3;
  font: 600 .8rem/1.5 system-ui, sans-serif;
}
.tank-setup-section {
  display: grid;
  gap: 10px;
  margin-top: 0;
  padding: 16px 0;
  border-top: 1px solid rgba(98, 157, 182, .28);
}
.tank-setup-username-section {
  padding-top: 8px;
  border-top: 0;
}
.tank-setup-step-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.tank-setup-step-number {
  display: inline-grid;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 2px solid #66d8f8;
  border-radius: 999px;
  color: #dff8ff;
  background: rgba(24, 122, 157, .22);
  box-shadow: inset 0 0 12px rgba(89, 215, 250, .14);
  font: 900 .82rem/1 system-ui, sans-serif;
}
.tank-setup-section-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.tank-setup-section-heading > strong {
  color: #f3fbff;
  font-size: 1rem;
}
.tank-setup-section-heading > small,
.tank-setup-note {
  color: #9fc2d2;
  font: 600 .73rem/1.4 system-ui, sans-serif;
}
.tank-setup-username-input-wrap {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  margin-left: 42px;
  border: 1px solid rgba(121, 197, 226, .46);
  border-radius: 12px;
  background: rgba(2, 19, 31, .62);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.tank-setup-username-input-wrap:focus-within {
  border-color: #76dcfa;
  background: rgba(7, 35, 51, .78);
  box-shadow: 0 0 0 3px rgba(104, 216, 248, .1);
}
.tank-setup-username-input-wrap.is-invalid {
  border-color: #ff8a77;
  box-shadow: 0 0 0 3px rgba(255, 92, 75, .12);
}
.tank-setup-username-icon {
  color: #78cde9;
  text-align: center;
  font: 900 .9rem/1 system-ui, sans-serif;
}
.tank-setup-username-input-wrap input {
  min-width: 0;
  height: 46px;
  padding: 0 13px 0 0;
  border: 0;
  outline: 0;
  color: #f4fbff;
  background: transparent;
  font: 700 .84rem/1 system-ui, sans-serif;
}
.tank-setup-username-input-wrap input::placeholder { color: #789cac; }
.tank-setup-choice-grid {
  display: grid;
  gap: 11px;
  margin-left: 42px;
}
.tank-setup-water-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tank-setup-substrate-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tank-setup-choice {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(117, 178, 202, .38);
  border-radius: 14px;
  color: #eaf8ff;
  background: rgba(2, 18, 29, .62);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.tank-setup-choice:hover {
  border-color: rgba(139, 224, 255, .72);
  background: rgba(10, 47, 65, .72);
  transform: translateY(-1px);
}
.tank-setup-choice.is-selected {
  border-color: #82e4ff;
  background: rgba(19, 82, 105, .52);
  box-shadow: inset 0 0 0 1px rgba(139, 224, 255, .5), 0 0 0 2px rgba(139, 224, 255, .09), 0 9px 24px rgba(0, 10, 18, .2);
}
.tank-setup-choice-preview {
  position: relative;
  display: block;
  height: 74px;
  overflow: hidden;
  background: linear-gradient(#0a638c, #063957);
  pointer-events: none;
}
.tank-setup-water-choice .tank-setup-choice-preview::after,
.tank-setup-substrate-choice .tank-setup-choice-preview::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(transparent, rgba(2, 18, 29, .54));
  pointer-events: none;
}
.tank-setup-freshwater-preview {
  background: linear-gradient(180deg, #1477a2 0%, #075577 64%, #113d43 100%);
}
.tank-setup-saltwater-preview {
  background: linear-gradient(180deg, #1269a6 0%, #11448c 62%, #193568 100%);
}
.tank-setup-preview-rock,
.tank-setup-preview-plant,
.tank-setup-preview-coral,
.tank-setup-preview-live-rock {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.tank-setup-preview-rock { left: -5%; bottom: -48%; width: 58%; height: 120%; }
.tank-setup-preview-plant { left: 2%; bottom: -39%; width: 46%; height: 126%; }
.tank-setup-preview-live-rock { left: -4%; bottom: -53%; width: 60%; height: 120%; }
.tank-setup-preview-coral { left: 1%; bottom: -38%; width: 48%; height: 118%; z-index: 1; }
.tank-setup-substrate-preview {
  height: 66px;
  background: #536a72;
}
.tank-setup-substrate-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  pointer-events: none;
}
.tank-setup-choice-copy {
  display: grid;
  gap: 4px;
  padding: 10px 12px 12px;
}
.tank-setup-choice-copy > strong {
  color: #f4fbff;
  font-size: .9rem;
}
.tank-setup-choice-copy > span {
  min-height: 2.55em;
  color: #a9cadb;
  font: 600 .7rem/1.35 system-ui, sans-serif;
}
.tank-setup-choice-check {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid rgba(206, 245, 255, .72);
  border-radius: 999px;
  color: transparent;
  background: rgba(3, 25, 38, .58);
  font: 1000 .72rem/1 system-ui, sans-serif;
}
.tank-setup-choice.is-selected .tank-setup-choice-check {
  border-color: #e7fbff;
  color: #08506c;
  background: #c9f6ff;
  box-shadow: 0 1px 7px rgba(74, 212, 249, .35);
}
.tank-setup-choice.is-selected::after {
  content: "Selected";
  position: absolute;
  left: 11px;
  bottom: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #e5fbff;
  background: rgba(77, 188, 224, .28);
  font: 800 .56rem/1 system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tank-setup-choice.is-selected .tank-setup-choice-copy { padding-bottom: 29px; }
.tank-setup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid rgba(73, 117, 140, .68);
}
.tank-setup-note::before {
  content: "●";
  margin-right: 8px;
  color: #ffd23d;
  text-shadow: 0 0 7px rgba(255, 194, 26, .45);
}
.tank-setup-confirm {
  display: inline-flex;
  min-width: 150px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding-inline: 20px;
  border-color: #6fe4ff;
  color: #032235;
  background: #59d6f3;
  font-weight: 900;
}
.tank-setup-confirm:hover { background: #79e3f9; }
@media (max-width: 700px) {
  .tank-setup-dialog { padding: 20px 18px 18px; }
  .tank-setup-water-grid,
  .tank-setup-substrate-grid {
    grid-template-columns: 1fr;
  }
  .tank-setup-choice-grid,
  .tank-setup-username-input-wrap { margin-left: 0; }
  .tank-setup-choice-preview { height: 62px; }
  .tank-setup-substrate-preview { height: 56px; }
  .tank-setup-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .tank-setup-confirm { width: 100%; }
}


/* Phase 5: tank water conversion */
.edit-tank-water-panel { padding: 10px 12px 18px; }
.edit-tank-water-card { display: grid; gap: 10px; min-width: min(620px, 88vw); max-width: 760px; }
.edit-tank-water-options { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 8px; }
.edit-tank-water-choice { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 72px; padding: 8px 10px; border: 1px solid rgba(134,220,244,.3); border-radius: 11px; color: inherit; background: rgba(5,33,49,.76); text-align: left; cursor: pointer; }
.edit-tank-water-choice:hover:not(:disabled), .edit-tank-water-choice:focus-visible:not(:disabled) { border-color: rgba(139,239,255,.72); background: rgba(15,72,94,.86); }
.edit-tank-water-choice.is-active { border-color: rgba(130,235,184,.6); background: rgba(25,83,67,.54); }
.edit-tank-water-choice:disabled { opacity: .72; cursor: default; }
.edit-tank-water-choice img { width: 54px; height: 54px; object-fit: contain; }
.edit-tank-water-choice span { display: grid; gap: 3px; }
.edit-tank-water-choice small { color: rgba(222,245,252,.68); font-size: .72rem; }
.water-conversion-warning { display: grid; gap: 7px; padding: 11px 12px; border: 1px solid rgba(255,180,84,.48); border-radius: 10px; background: rgba(87,50,10,.34); }
.water-conversion-warning p { margin: 0; color: rgba(244,247,249,.8); }
.water-conversion-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.water-conversion-dialog { width: min(620px, calc(100vw - 24px)); }
.water-conversion-dialog-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 10px; align-items: start; margin-top: 8px; line-height: 1.4; }
.water-conversion-dialog-list span { min-width: 0; overflow-wrap: anywhere; color: #d8ebf5; }
.water-conversion-dialog .water-conversion-actions { margin-top: 16px; justify-content: flex-end; }
@media (max-width: 620px) { .water-conversion-dialog-list { grid-template-columns: 1fr; gap: 3px; } }
@media (max-width: 720px) { .edit-tank-water-options { grid-template-columns: 1fr; } .edit-tank-water-card { min-width: 0; } }

/* Water compatibility is controlled by the visible BubbleBodega facet strip. */
.shop-water-filter-control { display: none !important; }

/* Keep the store body, including short catalogues, stretched to the browser.
   The browser shell is tabs, persistent navigation, then site content. */
.tankazon-store .tankazon-panel { grid-template-rows: 40px auto auto auto minmax(0, 1fr) !important; }
.tankazon-store .webpage-tab-strip { grid-row: 1 !important; grid-column: 1 / -1; }
.tankazon-store .websurf-browser-toolbar { grid-row: 2 !important; grid-column: 1 / -1; }
.tankazon-store.is-web-home-open .tankazon-panel,
.tankazon-store.is-websurf-themes-open .tankazon-panel,
.tankazon-store.is-bubble-bank-open .tankazon-panel,
.tankazon-store.is-davy-jones-locker-open .tankazon-panel,
.tankazon-store.proteus-biodyne-open .tankazon-panel,
.tankazon-store.is-proteus-designer-open .tankazon-panel,
.tankazon-store.is-web-settings-open .tankazon-panel,
.tankazon-store.tankazon-account-open .tankazon-panel { grid-template-rows: 40px auto minmax(0, 1fr) !important; }
.tankazon-store .web-home-page,
.tankazon-store .bubble-bank-page,
.tankazon-store .davy-jones-locker-page,
.tankazon-store .proteus-biodyne-page,
.tankazon-store .proteus-designer-route,
.tankazon-store .tankazon-account-page { grid-row: 3 !important; grid-column: 1 / -1; }
.tankazon-store .tankazon-body { min-height: 0 !important; height: 100% !important; }
.tankazon-store:not(.tankazon-cart-open) .tankazon-body { grid-template-columns: minmax(0, 1fr) !important; }
.tankazon-store:not(.tankazon-cart-open) .tankazon-cart { display: none !important; }

/* Compact editor inventory: background storage belongs beside its tab controls,
   and should not consume a second row of the background browser. */
#editTankTray .edit-tank-background-type-tabs { display: flex; align-items: center; gap: 6px; }
#editTankTray .edit-tank-custom-storage-meter { flex: 0 0 168px; min-width: 0; margin-right: auto; }
#editTankTray .edit-tank-custom-storage-meter .custom-content-storage-meter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px; margin: 0; }
#editTankTray .edit-tank-custom-storage-meter .custom-content-storage-meter > div { overflow: hidden; white-space: nowrap; font-size: .55rem; }
#editTankTray .edit-tank-custom-storage-meter progress { width: 62px; height: 6px; }
#editTankTray .edit-tank-image-layout { grid-template-columns: 174px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 8px; }
#editTankTray .edit-tank-custom-content { align-items: stretch; }
#editTankTray .edit-tank-local-image-card { flex: 1 1 auto; min-height: 0; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: 1fr auto; padding: 5px; }
#editTankTray .edit-tank-local-image-preview { grid-row: 1; min-height: 40px; }
#editTankTray .edit-tank-local-image-copy span, #editTankTray .edit-tank-local-image-actions { display: none; }
#editTankTray .edit-tank-built-in-backgrounds { min-height: 0; padding-top: 4px; overflow: hidden; }
#editTankTray .edit-tank-image-option-shell { flex: 0 0 126px; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 3px; }
#editTankTray .edit-tank-image-option { flex: 1 1 0; width: 100%; height: 100%; min-height: 0; }
#editTankTray .edit-tank-image-option-shell > button[data-delete-custom-background] { flex: 0 0 auto; }

/* Machine state is readable on demand instead of competing with the thumbnail. */
#editEquipmentTray .edit-equipment-resource-note { position: absolute; inset: auto 5px 5px; z-index: 3; display: grid; min-height: 0; padding: 7px; border-radius: 7px; color: #edfaff; background: rgba(2, 14, 22, .9); font-size: .58rem; line-height: 1.25; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; }
#editEquipmentTray .edit-decor-tile:hover .edit-equipment-resource-note, #editEquipmentTray .edit-decor-tile:focus-within .edit-equipment-resource-note { opacity: 1; transform: none; }

/* Bank is intentionally a fixed-height application header, even while its
   content scrolls. */
.bubble-bank-window-header.websurf-site-header.is-collapsed { min-height: 94px; padding: 8px 24px; }
.bubble-bank-window-header.websurf-site-header.is-collapsed .bubble-bank-logo { height: 76px; }
.bubble-bank-window-header.websurf-site-header.is-collapsed .bubble-bank-tab { padding: 13px 20px; font-size: .92rem; }

/* Center the actual mail document, and reserve the destructive affordance for
   the far right edge of its action rail. */
.websurf-mail-detail { padding-left: 18px; }
.websurf-mail-body { display: flex; justify-content: center; }
.websurf-email-scroll { width: min(100%, 980px); }
.websurf-mail-actions { width: min(100%, 980px); align-self: center; }
.websurf-mail-actions .websurf-trash-button { order: 99; color: #d83b45; border-color: #e49ca2; }
.websurf-mail-actions .websurf-trash-button:hover { color: #fff; background: #cf3540; border-color: #cf3540; }

/* Message actions span the inbox width. The destructive control belongs at
   the actual right edge of that rail, not merely after the left-side buttons. */
.websurf-mail-actions {
  width: 100%;
  align-self: stretch;
}
.websurf-mail-actions .websurf-trash-button {
  margin-left: auto;
}

/* Open messages use the inbox width rather than a centered reading column.
   Keep the action controls as the separate rail directly below the viewport. */
.websurf-mail-body {
  display: block;
}
.websurf-email-scroll {
  width: 100%;
  box-sizing: border-box;
}
.websurf-mail-actions {
  width: 100%;
  align-self: stretch;
}

/* Keep the designer counter out of the header dead-space and anchored to the
   specimen viewport. */
.proteus-designer-preview-column { position: relative; }
.proteus-designer-preview-column > .custom-content-storage-meter { position: absolute; z-index: 3; right: 14px; bottom: 46px; width: 176px; margin: 0; padding: 5px 7px; border-radius: 7px; background: rgba(245, 252, 255, .94); box-shadow: 0 3px 12px rgba(18, 63, 95, .14); }
.proteus-designer-preview-column > .custom-content-storage-meter .custom-content-storage-meter-heading { gap: 4px; font-size: .58rem; }

/* Home fish are genuine catalogue entry points, including their appearances. */
.bubblebodega-home-fish-card { cursor: pointer; }

/* The Neighborhood overview keeps urgent care visible without turning the
   sidebar into a second dashboard. */
.tank-home-care-suggestions { display: grid; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.tank-home-care-suggestions > strong { font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; }
.tank-home-care-suggestions .management-task-list { display: grid; gap: 5px; }

/* BubbleBodega uses the same dark WebSurf palette on every route: catalogue,
   Home, item view, account and cart. Keep the product art bright, but remove
   the remaining white panels and low-contrast light-mode copy. */
.tankazon-store[data-websurf-theme="dark"] .tankazon-body,
.tankazon-store[data-websurf-theme="dark"] .tankazon-catalog-area,
.tankazon-store[data-websurf-theme="dark"] .tankazon-store-drawer,
.tankazon-store[data-websurf-theme="dark"] .store-drawer,
.tankazon-store[data-websurf-theme="dark"] .tankazon-catalog-loading { background: var(--ws-page-bg); color: var(--ws-text); }
.tankazon-store[data-websurf-theme="dark"] .tankazon-catalog-area > .store-drawer.tankazon-all-section { border-bottom-color: var(--ws-page-bg); }
.tankazon-store[data-websurf-theme="dark"] .tankazon-catalog-loading > span,
.tankazon-store[data-websurf-theme="dark"] .tankazon-cart-empty,
.tankazon-store[data-websurf-theme="dark"] .tankazon-cart-item small,
.tankazon-store[data-websurf-theme="dark"] .fish-meta { color: var(--ws-text-secondary); }
.tankazon-store[data-websurf-theme="dark"] .shop-toolbar,
.tankazon-store[data-websurf-theme="dark"] .store-facets { border-color: var(--ws-border); color: var(--ws-text); background: rgba(26, 32, 37, .97); }
.tankazon-store[data-websurf-theme="dark"] .shop-card { border-color: var(--ws-border); color: var(--ws-text); background: var(--ws-panel-bg); box-shadow: 0 2px 9px rgba(0, 0, 0, .24); }
.tankazon-store[data-websurf-theme="dark"] .shop-card:hover { border-color: #5b8ea9; }
.tankazon-store[data-websurf-theme="dark"] .shop-card .price-tag { color: #ffd45b; }
.tankazon-store[data-websurf-theme="dark"] .shop-card .buy-button { border-color: #247fc7; background: linear-gradient(180deg, #278de3, #176ab2); color: #f7fbff; }
.tankazon-store[data-websurf-theme="dark"] .shop-card .buy-button:hover:not(:disabled) { background: linear-gradient(180deg, #42a4f1, #217bc5); }
.tankazon-store[data-websurf-theme="dark"] .tankazon-cart { border-left-color: var(--ws-border); color: var(--ws-text); background: var(--ws-panel-bg); }
.tankazon-store[data-websurf-theme="dark"] .tankazon-cart-heading,
.tankazon-store[data-websurf-theme="dark"] .tankazon-cart-footer,
.tankazon-store[data-websurf-theme="dark"] .tankazon-cart-item { border-color: var(--ws-border-soft); }
.tankazon-store[data-websurf-theme="dark"] .tankazon-cart-heading button,
.tankazon-store[data-websurf-theme="dark"] .tankazon-cart-item-actions button { border-color: var(--ws-border); color: var(--ws-text); background: var(--ws-panel-bg-strong); }
.tankazon-store[data-websurf-theme="dark"] .tankazon-cart-item-actions .tankazon-cart-remove { color: #7cc8ff; background: transparent; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page,
.tankazon-store[data-websurf-theme="dark"] .tankazon-account-page { color: var(--ws-text); background: var(--ws-page-bg); }
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-content { background: var(--ws-page-bg); }
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-section { border-color: #385363; background: linear-gradient(135deg, #172b34, #1a2730 58%, #142b26); }
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-section:nth-child(2) { background: linear-gradient(135deg, #172b35, #1a252e 58%, #14252e); }
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-section:nth-child(3) { background: linear-gradient(135deg, #182d35, #1c2830 58%, #172b32); }
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-section h2,
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-link { color: #dff4ff; }
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-section p,
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-product-card .bubblebodega-home-reason { color: #a7c2d0; }
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-empty { color: var(--ws-text-secondary); background: var(--ws-panel-bg); }

/* The cart uses the generated `store.png` delivery image, rather than a
   hand-cropped atlas coordinate that can become stale after an icon export. */
.tankazon-cart-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 32px;
  margin-left: 2px;
  padding: 0;
  border-color: #75caef;
  border-radius: 7px;
  background: #123e5a;
  font-size: 0;
}
.tankazon-cart-toggle:hover { background: #195373; }
.tankazon-cart-toggle::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("../assets/generated/sprites/icons/Icons/store.png.thumb.webp?v=b46abd0da7b0") center / contain no-repeat;
}
.tankazon-cart-toggle #tankazonCartHeaderCount {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #071a2c;
  background: #ffd02f;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  font: 800 10px/1 system-ui, sans-serif;
}

/* The About portraits were intentionally reduced; the rest of Proteus keeps
   its designed artwork scale (hero, research cards, specimens, and branding). */
#proteusBiodynePage [data-proteus-panel="about"] .proteus-about-feature-image {
  width: min(112px, 38vw);
  margin-right: auto;
  margin-left: auto;
  overflow: visible;
  background: transparent;
}
#proteusBiodynePage [data-proteus-panel="about"] .proteus-about-feature-image img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
}
#proteusBiodynePage [data-proteus-panel="about"] .proteus-about-feature-image::after {
  display: none;
}
#proteusBiodynePage [data-proteus-panel="about"] .proteus-about-feature-image figcaption {
  position: static;
  display: block;
  margin-top: 8px;
  color: #526f82;
  font-size: .58rem;
  line-height: 1.35;
}
#proteusBiodynePage [data-proteus-panel="about"] .proteus-about-feature-image figcaption strong,
#proteusBiodynePage [data-proteus-panel="about"] .proteus-about-feature-image figcaption span {
  display: block;
  font-size: inherit;
}

/* BubbleBodega food package quantity badges + visual size chooser */
.tankazon-store .shop-food-thumb-wrap {
  position: relative;
  width: 100%;
  height: 154px;
  min-width: 0;
  overflow: hidden;
}

.tankazon-store .shop-food-thumb-wrap .shop-thumb {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}

/* The 75-count package is the visual midpoint between the small pouch and
   200-count bucket. Keep that relationship in every food thumbnail surface. */
.tankazon-store .shop-food-thumb-wrap[data-food-package="medium"]:not([data-food-id="basic"]) .shop-thumb,
.tankazon-store .tankazon-food-size-image[data-food-package="medium"]:not([data-food-id="basic"]) img {
  transform: scale(1.25);
}

.tankazon-store .shop-food-qty-badge,
.tankazon-store .tankazon-item-qty-badge,
.tankazon-store .tankazon-food-size-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 27px;
  padding: 4px 9px;
  box-sizing: border-box;
  border-radius: 7px;
  background: rgba(56, 63, 67, 0.88);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.tankazon-store .shop-food-qty-badge {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 3;
}

.tankazon-store .tankazon-item-image {
  position: relative;
}

.tankazon-store .tankazon-item-qty-badge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
}

.tankazon-store .tankazon-food-size-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #d5d9d9;
}

.tankazon-store .tankazon-food-size-section[hidden] {
  display: none !important;
}

.tankazon-store .tankazon-food-size-section > h2 {
  margin: 0 0 4px;
  color: #0f1111;
  font-size: 19px;
  font-weight: 650;
}

.tankazon-store .tankazon-food-size-section > p {
  margin: 0 0 14px;
  color: #565959;
  font-size: 13px;
}

.tankazon-store .tankazon-food-size-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.tankazon-store .tankazon-food-size-card {
  display: grid;
  grid-template-rows: 130px minmax(38px, auto) auto 36px;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #d5d9d9;
  border-radius: 9px;
  background: #fff;
  box-sizing: border-box;
}

.tankazon-store .tankazon-food-size-card.is-selected {
  border: 2px solid #007eb9;
  box-shadow: 0 0 0 2px rgba(0, 126, 185, 0.08);
}

.tankazon-store .tankazon-food-size-image {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 130px;
  overflow: hidden;
  border-radius: 7px;
  background: #f7f9fa;
}

.tankazon-store .tankazon-food-size-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tankazon-store .tankazon-food-size-qty {
  position: absolute;
  right: 7px;
  bottom: 7px;
}

.tankazon-store .tankazon-food-size-card > strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #0f1111;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 650;
}

.tankazon-store .tankazon-food-size-price {
  color: #0f1111;
  font-size: 13px;
  font-weight: 700;
}

.tankazon-store .tankazon-food-size-action {
  width: 100%;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid #1d6fd6;
  border-radius: 18px;
  background: #2f8fff;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.tankazon-store .tankazon-food-size-action:hover:not(:disabled) {
  background: #217be3;
}

.tankazon-store .tankazon-food-size-action:disabled {
  border-color: #9cc9e8;
  background: #dff0fb;
  color: #1476b8;
  cursor: default;
  opacity: 1;
}

@media (max-width: 650px) {
  .tankazon-store .tankazon-food-size-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Size options use the same contained product-art scale as catalogue tiles.
   The cards may fill a wide detail page; the cans and tubs must not. */
.tankazon-store .tankazon-food-size-card {
  grid-template-rows: 196px minmax(38px, auto) auto 36px;
}
.tankazon-store .tankazon-food-size-image {
  height: 196px;
}
.tankazon-store .tankazon-food-size-image img {
  width: min(196px, 100%);
  max-width: 196px;
  height: 100%;
  margin: auto;
  object-fit: contain;
}

/* Home cards intentionally share the catalogue tile contract: art, title,
   price, buttons and fish appearance controls all have the same dimensions
   and contrast as their category counterparts. */
.tankazon-store.is-bubblebodega-home-open .bubblebodega-home-product-card .tankazon-tile-info {
  display: grid !important;
}
.tankazon-store.is-bubblebodega-home-open .bubblebodega-home-product-card .shop-card-actions {
  display: grid !important;
}
/* Native Fish-tab thumbnails keep their water-stage treatment when rendered
   inside the Home New Fish container. */
.tankazon-store.is-bubblebodega-home-open .bubblebodega-home-native-fish-card .shop-thumb {
  background:
    radial-gradient(ellipse at 50% 24%, rgba(190, 239, 255, .7), transparent 55%),
    linear-gradient(180deg, #258fc1 0%, #0e6294 58%, #08466d 100%);
}
/* The Home picker uses the same one-layer pips as the catalogue.  Do not add
   a second button background or shadow under the shared ::before dot. */
#storeOverlay .bubblebodega-home-fish-card .shop-variant-dots button {
  background: transparent;
  box-shadow: none;
}
#storeOverlay .bubblebodega-home-fish-card .shop-variant-dots button::before {
  box-shadow: none;
}

/* The late compact-tile rules set light-mode ink explicitly. Reassert a real
   dark palette after them so titles and prices never become gray-on-gray. */
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-page,
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-content {
  background: #081923;
}
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-section {
  border-color: #2b6179;
  background: linear-gradient(135deg, #0e2a38, #102333 58%, #0c302c);
}
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-section:nth-child(2) {
  background: linear-gradient(135deg, #102a3d, #102435 58%, #0c2c39);
}
.tankazon-store[data-websurf-theme="dark"] .bubblebodega-home-section:nth-child(3) {
  background: linear-gradient(135deg, #0e2e3c, #102534 58%, #103039);
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-tile-info,
.tankazon-store[data-websurf-theme="dark"] .tankazon-tile-title,
.tankazon-store[data-websurf-theme="dark"] .tankazon-tile-cost {
  color: #effaff !important;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-tile-cost {
  color: #ffd45b !important;
}

/* Transparent product art needs a neutral stage in dark mode. Mid-gray keeps
   white packaging legible without the stark light-mode white rectangles. */
.tankazon-store[data-websurf-theme="dark"] .shop-card > img.shop-thumb,
.tankazon-store[data-websurf-theme="dark"] .shop-card > img.decor-thumb,
.tankazon-store[data-websurf-theme="dark"] .shop-card > .shop-thumb,
.tankazon-store[data-websurf-theme="dark"] .shop-card > .decor-thumb,
.tankazon-store[data-websurf-theme="dark"] .shop-food-thumb-wrap,
.tankazon-store[data-websurf-theme="dark"] .shop-food-thumb-wrap .shop-thumb {
  background: #74797d !important;
}

/* Account storage is status information, not a panel. Keep its compact form
   on one low-profile line until a real saved-content library needs room. */
.custom-content-storage-meter.is-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-height: 18px;
  margin: 6px 0 0;
  color: #91b8cb;
  font-size: .72rem;
  line-height: 1.15;
}
.custom-content-storage-meter.is-compact > .mini-note {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.custom-content-storage-meter.is-compact > .mini-note strong {
  color: #a7c9d9;
  font-size: .74rem;
}
.custom-content-storage-meter.is-compact progress {
  width: 64px;
  height: 5px;
  margin: 0;
  accent-color: #73b8d2;
}
.custom-content-storage-meter.is-compact > .custom-content-library {
  flex-basis: 100%;
}

/* Food sizes are a compact variant picker, not a second product catalogue.
   Keep all three choices inside the main art column with deliberately small
   contained artwork and terse metadata. */
.tankazon-store .tankazon-food-size-section {
  width: min(100%, 676px);
  margin-top: 14px;
  padding-top: 12px;
}
.tankazon-store .tankazon-food-size-section > h2 {
  margin-bottom: 2px;
  font-size: 15px;
}
.tankazon-store .tankazon-food-size-section > p {
  margin-bottom: 8px;
  font-size: 11px;
}
.tankazon-store .tankazon-food-size-cards {
  grid-template-columns: repeat(3, minmax(0, 180px));
  justify-content: start;
  gap: 8px;
}
.tankazon-store .tankazon-food-size-card {
  grid-template-rows: 88px minmax(30px, auto) auto;
  gap: 4px;
  padding: 6px;
  border-radius: 7px;
  cursor: pointer;
}
.tankazon-store .tankazon-food-size-card:focus-visible {
  outline: 3px solid #69d4ff;
  outline-offset: 2px;
}
.tankazon-store .tankazon-food-size-image {
  height: 88px;
  border-radius: 5px;
}
.tankazon-store .tankazon-food-size-image img {
  width: min(88px, 100%);
  max-width: 88px;
}
.tankazon-store .tankazon-food-size-qty {
  right: 4px;
  bottom: 4px;
  min-width: 36px;
  min-height: 19px;
  padding: 3px 5px;
  font-size: 10px;
}
.tankazon-store .tankazon-food-size-card > strong,
.tankazon-store .tankazon-food-size-price {
  font-size: 11px;
  line-height: 1.15;
}
.tankazon-store .tankazon-food-size-action {
  min-height: 26px;
  padding: 3px 6px;
  font-size: 10px;
}
@media (max-width: 650px) {
  .tankazon-store .tankazon-food-size-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Complete BubbleBodega dark-theme surface pass. These are controls and
   headings, not light-mode paper pasted into a dark application. */
.tankazon-store[data-websurf-theme="dark"] .tankazon-search {
  background: #162a35;
  box-shadow: inset 0 0 0 1px #426272;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-search input {
  color: #f2fbff;
  background: #162a35;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-search input::placeholder {
  color: #a7c1cd;
  opacity: 1;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-search-scope {
  border-right-color: #426272;
  color: #e5f5fb;
  background: #203945;
}
.tankazon-store[data-websurf-theme="dark"] .store-facets {
  border-bottom-color: #365565;
  color: #e9f7fc;
  background: #13242e;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.tankazon-store[data-websurf-theme="dark"] .store-facet-count,
.tankazon-store[data-websurf-theme="dark"] .store-facet-options small {
  color: #a9c3cf;
}
.tankazon-store[data-websurf-theme="dark"] .store-facet-clear {
  color: #bfeaff;
  background: #25495a;
}
.tankazon-store[data-websurf-theme="dark"] .store-facet-clear:hover:not(:disabled) {
  background: #326276;
}
.tankazon-store[data-websurf-theme="dark"] .store-facet-group > summary {
  border-color: #476b7d;
  color: #ebf8fc;
  background: #203844;
}
.tankazon-store[data-websurf-theme="dark"] .store-facet-group > summary::after {
  color: #b7d2dd;
}
.tankazon-store[data-websurf-theme="dark"] .store-facet-options {
  border-color: #476b7d;
  color: #eaf7fb;
  background: #18313d;
  box-shadow: 0 12px 30px rgba(0,0,0,.46);
}
.tankazon-store[data-websurf-theme="dark"] .store-facet-options label:hover {
  background: #274b5b;
}
.tankazon-store[data-websurf-theme="dark"] .store-subcategory-section > .shop-section-heading {
  border-bottom-color: #365a6d;
  background: #19313d;
  box-shadow: 0 2px 7px rgba(0,0,0,.3);
}
.tankazon-store[data-websurf-theme="dark"] .shop-section-heading h3,
.tankazon-store[data-websurf-theme="dark"] .store-subcategory-section > .shop-section-heading h3 {
  color: #f0fbff;
}
.tankazon-store[data-websurf-theme="dark"] .shop-section-heading p,
.tankazon-store[data-websurf-theme="dark"] .store-subcategory-section > .shop-section-heading p {
  color: #b8d2dd;
}
.tankazon-store[data-websurf-theme="dark"] .shop-card > img.shop-thumb,
.tankazon-store[data-websurf-theme="dark"] .shop-card > img.decor-thumb,
.tankazon-store[data-websurf-theme="dark"] .shop-card > .shop-thumb,
.tankazon-store[data-websurf-theme="dark"] .shop-card > .decor-thumb,
.tankazon-store[data-websurf-theme="dark"] .shop-food-thumb-wrap {
  background: #74797d !important;
}
/* Most catalogue art was authored on white. Multiply removes the glaring
   white slab while preserving colored packaging against the gray stage. */
.tankazon-store[data-websurf-theme="dark"] .shop-card > img.shop-thumb,
.tankazon-store[data-websurf-theme="dark"] .shop-card > img.decor-thumb {
  mix-blend-mode: multiply;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-catalog-area {
  scrollbar-color: #638897 #10232c;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-catalog-area::-webkit-scrollbar-track {
  background: #10232c;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-catalog-area::-webkit-scrollbar-thumb {
  border-color: #10232c;
  background: #638897;
}

/* Keep product art authored and bright; only its surrounding stage changes
   for dark mode. Do not blend or dim the image pixels themselves. */
.tankazon-store[data-websurf-theme="dark"] .shop-card > img.shop-thumb,
.tankazon-store[data-websurf-theme="dark"] .shop-card > img.decor-thumb {
  mix-blend-mode: normal;
}

/* Availability is communicated by a subdued dark-gray card, never a bright
   light-mode tile that breaks the dark catalogue. */
.tankazon-store[data-websurf-theme="dark"] .shop-card.tankazon-card-out-of-stock,
.tankazon-store[data-websurf-theme="dark"] .shop-card.tankazon-card-out-of-stock:hover,
.tankazon-store[data-websurf-theme="dark"] .shop-card.tankazon-card-out-of-stock:focus-within {
  background: linear-gradient(180deg, #344049 0%, #29343c 100%) !important;
  border-color: #53636d !important;
  box-shadow: none !important;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-out-of-stock {
  border-color: #62717a !important;
  color: #d4e0e5 !important;
  background: #46535b !important;
}
.tankazon-store[data-websurf-theme="dark"] .shop-card[data-store-kind="fish"].tankazon-card-out-of-stock .shop-thumb,
.tankazon-store[data-websurf-theme="dark"] [data-tankazon-category="fish"] .shop-card.tankazon-card-out-of-stock .shop-thumb {
  background: linear-gradient(180deg, #657178 0%, #4c5961 100%) !important;
}
/* Some supplier cards already provide their own illustrated stage. Keep that
   artwork in dark mode and tone down only its backdrop; do not replace it with
   the generic unavailable-fish gray square. */
.tankazon-store[data-websurf-theme="dark"] .shop-card[data-store-kind="fish"].tankazon-card-out-of-stock:is([data-store-seller="Proteus Biodyne" i], .is-davy-mutation) .shop-thumb,
.tankazon-store[data-websurf-theme="dark"] [data-tankazon-category="fish"] .shop-card.tankazon-card-out-of-stock:is([data-store-seller="Proteus Biodyne" i], .is-davy-mutation) .shop-thumb {
  background: transparent !important;
}
.tankazon-store[data-websurf-theme="dark"] .shop-card:is([data-store-seller="Proteus Biodyne" i], .is-davy-mutation) :is(.shop-thumb, .decor-thumb) {
  background: transparent !important;
}
.tankazon-store[data-websurf-theme="dark"] .shop-card[data-store-seller="Proteus Biodyne" i]::before {
  filter: brightness(.62) blur(1.5px);
}

/* Aggregate-category labels use a more specific toolbar rule than ordinary
   section headers, so give that exact surface the dark treatment too. */
.tankazon-store[data-websurf-theme="dark"] .store-drawer.tankazon-section-heading::before {
  border-bottom-color: #365a6d !important;
  color: #f0fbff !important;
  background: #19313d !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
.tankazon-store[data-websurf-theme="dark"] .store-drawer.tankazon-section-heading > .shop-toolbar {
  border-bottom-color: #365a6d !important;
  color: #effaff !important;
  background: #19313d !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
.tankazon-store[data-websurf-theme="dark"] .store-drawer.tankazon-section-heading > .shop-toolbar .shop-toolbar-title {
  color: #f0fbff;
}

/* BubbleBodega uses a dark canvas, so its readable foreground has to travel
   with every view mounted inside it—not just the catalogue cards. */
.tankazon-store[data-websurf-theme="dark"] {
  --bodega-dark-text: #effaff;
  --bodega-dark-muted: #b8d2dd;
  --bodega-dark-link: #76d5ff;
  --bodega-dark-coin: #ffd45b;
}

/* Product detail */
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page {
  color: var(--bodega-dark-text);
}
.tankazon-store[data-websurf-theme="dark"] :is(.tankazon-item-back, .tankazon-item-category, .tankazon-item-variant-label, .tankazon-item-delivery, .tankazon-item-seller, .tankazon-item-details .fish-meta, .tankazon-item-details .shop-about-tagline, .tankazon-item-details .shop-stat-label, .tankazon-item-details .shop-comfort-profile) {
  color: var(--bodega-dark-muted) !important;
}
.tankazon-store[data-websurf-theme="dark"] :is(.tankazon-item-description h1, .tankazon-item-description h2, .tankazon-item-price, .tankazon-item-details, .tankazon-item-details .shop-about-attribution, .tankazon-item-details .shop-stat-value, .tankazon-item-sizes, .tankazon-item-sizes > strong, .tankazon-item-seller strong) {
  color: var(--bodega-dark-text) !important;
}
.tankazon-store[data-websurf-theme="dark"] :is(.tankazon-item-back:hover, .tankazon-item-brand) {
  color: var(--bodega-dark-link) !important;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-price-original { color: var(--bodega-dark-muted) !important; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-price-sale { color: #ffad96 !important; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-availability { color: #7ee7a2 !important; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-buybox {
  border-color: #496373;
  background: #10232c;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-fit { border-color: #247eaa; background: #102b38; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-fit-header h2,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-fit-entry strong { color: var(--bodega-dark-text); }
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-fit-header p,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-fit-entry span:not(.tankazon-item-fit-entry-icon) { color: var(--bodega-dark-muted); }
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-fit-group + .tankazon-item-fit-group { border-color: #3d6477; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-fit-entry { border-color: #3d6477; background: #173946; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-seller,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-brand,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-details .shop-stat-row {
  border-color: #3d5867;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-size-option { color: var(--bodega-dark-text) !important; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-size-option:hover { color: var(--bodega-dark-link) !important; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-variants button { border-color: #607784; background: #34434a; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-variants button[aria-pressed="true"] { border-color: #ffb244; background: #2e414b; box-shadow: 0 0 0 2px #5d492b; }

.tankazon-store[data-websurf-theme="dark"] .tankazon-fish-info-card,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-medicine-product .tankazon-item-fit,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-fish-product .tankazon-item-fit {
  border-color: #2d7594;
  background: #102b38;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-fish-info-heading-icon,
.tankazon-store[data-websurf-theme="dark"] .tankazon-fish-info-row-icon,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-medicine-product .tankazon-item-fit-icon,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-fish-product .tankazon-item-fit-icon {
  background: #173f4f;
  color: #76d5ff;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-fish-info-card-header h2,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-medicine-product .tankazon-item-fit-header h2,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-fish-product .tankazon-item-fit-header h2,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-medicine-product .tankazon-fish-info-row .shop-stat-value,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-fish-product .tankazon-fish-info-row .shop-stat-value,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-medicine-product .tankazon-item-seller #tankazonItemSeller,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-fish-product .tankazon-item-seller #tankazonItemSeller {
  color: var(--bodega-dark-text) !important;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-details .tankazon-fish-about > p,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-medicine-product .tankazon-fish-info-row .shop-stat-label,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-fish-product .tankazon-fish-info-row .shop-stat-label,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-medicine-product .tankazon-item-fit-header p,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-fish-product .tankazon-item-fit-header p {
  color: var(--bodega-dark-muted) !important;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-medicine-product .tankazon-fish-info-row,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-fish-product .tankazon-fish-info-row {
  border-bottom-color: #34596a;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-medicine-product .tankazon-item-buybox,
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-page.is-fish-product .tankazon-item-buybox {
  border-color: #496373;
  background: #10232c;
}

/* Compact package picker */
.tankazon-store[data-websurf-theme="dark"] .tankazon-food-size-section { border-top-color: #3d5867; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-food-size-section > h2,
.tankazon-store[data-websurf-theme="dark"] .tankazon-food-size-card > strong,
.tankazon-store[data-websurf-theme="dark"] .tankazon-food-size-price { color: var(--bodega-dark-text) !important; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-food-size-section > p { color: var(--bodega-dark-muted) !important; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-food-size-card {
  border-color: #496373;
  background: #1b303a;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-food-size-card.is-selected { border-color: #41c7ff; background: #213b48; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-food-size-image { background: #74797d; }

/* Cart and order history */
.tankazon-store[data-websurf-theme="dark"] :is(.tankazon-cart, .tankazon-cart-item, .tankazon-cart-subtotal, .tankazon-cart-item-price, .tankazon-cart-item-price-each) { color: var(--bodega-dark-text); }
.tankazon-store[data-websurf-theme="dark"] .tankazon-account-heading { border-color: #3d5867; }
.tankazon-store[data-websurf-theme="dark"] :is(.tankazon-account-eyebrow, .tankazon-account-heading p:last-child, .tankazon-order-summary, .tankazon-order-card > header small, .tankazon-order-product > div small, .tankazon-orders-empty span, .tankazon-order-pagination span) { color: var(--bodega-dark-muted) !important; }
.tankazon-store[data-websurf-theme="dark"] :is(.tankazon-account-heading h1, .tankazon-order-card > header strong, .tankazon-order-product > span, .tankazon-orders-empty strong) { color: var(--bodega-dark-text) !important; }
.tankazon-store[data-websurf-theme="dark"] :is(.tankazon-account-back, .tankazon-order-product > div strong) { color: var(--bodega-dark-link) !important; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-order-search { border-color: #496373; background: #162a35; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-order-search input { color: var(--bodega-dark-text); background: #162a35; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-order-search input::placeholder { color: #a7c1cd; opacity: 1; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-order-search button { border-left-color: #496373; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-order-card,
.tankazon-store[data-websurf-theme="dark"] .tankazon-orders-empty { border-color: #496373; background: #172b34; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-order-card > header { background: #203843; }
.tankazon-store[data-websurf-theme="dark"] .tankazon-order-product { border-color: #3d5867; }

/* coin_unicode.png is monochrome; tint it to the same high-contrast gold as
   the amount instead of leaving a black coin beside light dark-mode text. */
.tankazon-store[data-websurf-theme="dark"] :is(.tankazon-tile-cost, .tankazon-cart-item-price, .tankazon-cart-subtotal) { color: var(--bodega-dark-coin) !important; }
.tankazon-store[data-websurf-theme="dark"] :is(.tankazon-tile-cost-value, .tankazon-subtotal-value) {
  color: var(--bodega-dark-coin) !important;
}
.tankazon-store[data-websurf-theme="dark"] :is(.tankazon-tile-cost-icon, .tankazon-cart-item-price img, .tankazon-cart-subtotal img) {
  filter: brightness(0) saturate(100%) invert(81%) sepia(71%) saturate(576%) hue-rotate(351deg) brightness(102%) contrast(103%);
}
.tankazon-store[data-websurf-theme="dark"] :is(.tankazon-order-card > header strong, .tankazon-order-product > span) {
  color: var(--bodega-dark-coin) !important;
}
.tankazon-store[data-websurf-theme="dark"] :is(.tankazon-order-card > header img, .tankazon-order-product > span img) {
  filter: brightness(0) saturate(100%) invert(81%) sepia(71%) saturate(576%) hue-rotate(351deg) brightness(102%) contrast(103%);
}

/* Detail art sits on a surface, not a light-mode sheet of paper.  Keep the
   product pixels untouched; only replace the containers behind them. */
.tankazon-store[data-websurf-theme="dark"] .tankazon-item-image:not(.is-fish-preview):not(.is-davy-mutation-preview):not(.is-proteus-preview) {
  background: #74797d !important;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-food-size-card {
  border-color: #496373 !important;
  background: #1b303a !important;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-food-size-card.is-selected {
  border-color: #41c7ff !important;
  background: #213b48 !important;
}
.tankazon-store[data-websurf-theme="dark"] .tankazon-food-size-image {
  background: #74797d !important;
}

/* Purchase History needs four rows: browser tabs, browser navigation,
   BubbleBodega navigation, then the scrollable order history. Explicitly
   place the store header so grid auto-placement cannot move it below orders. */
.tankazon-store.tankazon-account-open .tankazon-panel {
  grid-template-rows: 40px auto auto minmax(0, 1fr) !important;
}
.tankazon-store.tankazon-account-open .tankazon-panel > .tankazon-header {
  grid-row: 3 !important;
  grid-column: 1 / -1;
}
.tankazon-store.tankazon-account-open .tankazon-account-page {
  grid-row: 4 !important;
  grid-column: 1 / -1;
}

/* Settings layout refresh 2026-09-24
   Compact two-column dashboard based on the approved settings mockup. */
#settingsOverlay .settings-dashboard-panel,
#settingsOverlay.websurf-settings-page .settings-dashboard-panel {
  width: min(1360px, calc(100vw - 54px));
  max-width: 1360px;
  gap: 12px;
}

#settingsOverlay .settings-dashboard-grid,
#settingsOverlay.websurf-settings-page .settings-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "account account"
    "left right";
  grid-auto-rows: max-content;
  column-gap: 12px;
  row-gap: 16px;
}

#settingsOverlay .settings-dashboard-column,
#settingsOverlay.websurf-settings-page .settings-dashboard-column {
  gap: 12px;
  min-height: 0;
}

#settingsOverlay .settings-section,
#settingsOverlay.websurf-settings-page .settings-section {
  position: relative;
  isolation: isolate;
  gap: 7px;
  padding: 11px 12px;
  border-radius: 13px;
}

/* The dashboard columns flow independently. Reserve real grid space for each
   card so an added preference (such as Ratio Lock Frame) cannot visually run
   into the card above or below it at a scaled Ratio Lock size. */
#settingsOverlay .settings-dashboard-column > .settings-section,
#settingsOverlay.websurf-settings-page .settings-dashboard-column > .settings-section {
  min-height: max-content;
  overflow: hidden;
}

#settingsOverlay #accountCloudSaveSettingsSection,
#settingsOverlay.websurf-settings-page #accountCloudSaveSettingsSection {
  overflow: visible;
}

#settingsOverlay .settings-section-heading,
#settingsOverlay.websurf-settings-page .settings-section-heading {
  gap: 9px;
  min-height: 35px;
}

#settingsOverlay .settings-section-heading-icon,
#settingsOverlay.websurf-settings-page .settings-section-heading-icon {
  width: 32px;
  height: 32px;
}

#settingsOverlay .settings-section-heading-icon img,
#settingsOverlay.websurf-settings-page .settings-section-heading-icon img {
  width: 29px;
  height: 29px;
}

#settingsOverlay .settings-section h3,
#settingsOverlay.websurf-settings-page .settings-section h3 {
  font-size: 1.06rem;
}

#settingsOverlay .settings-toggle-row,
#settingsOverlay .settings-toolbar-color-row,
#settingsOverlay .settings-inline-action,
#settingsOverlay.websurf-settings-page .settings-toggle-row,
#settingsOverlay.websurf-settings-page .settings-toolbar-color-row,
#settingsOverlay.websurf-settings-page .settings-inline-action {
  min-height: 46px;
  padding: 6px 10px;
  gap: 10px;
  border-radius: 9px;
}

#settingsOverlay .settings-toggle-label,
#settingsOverlay.websurf-settings-page .settings-toggle-label,
#settingsOverlay.websurf-settings-page .settings-peaceful-mode-row .settings-toggle-label {
  font-size: .76rem;
  line-height: 1.12;
}

#settingsOverlay .settings-toggle-note,
#settingsOverlay.websurf-settings-page .settings-toggle-note {
  font-size: .62rem;
  line-height: 1.22;
}

/* Keep both dashboard columns visually balanced. Graphics gets one extra row;
   General + Audio + Other stack to approximately the same total height. */
#settingsOverlay .settings-graphics-card,
#settingsOverlay.websurf-settings-page .settings-graphics-card {
  gap: 6px;
}

#settingsOverlay .settings-general-card,
#settingsOverlay.websurf-settings-page .settings-general-card {
  gap: 6px;
}

#settingsOverlay .settings-audio-card,
#settingsOverlay.websurf-settings-page .settings-audio-card {
  gap: 6px;
}

#settingsOverlay .settings-other-card,
#settingsOverlay.websurf-settings-page .settings-other-card {
  gap: 6px;
  padding: 9px 10px 10px;
}

/* Account & Cloud: four equal information cards on top, actions on one compact
   row below. The existing icon assets are intentionally retained. */
#settingsOverlay #accountCloudSaveSettingsSection,
#settingsOverlay.websurf-settings-page #accountCloudSaveSettingsSection {
  position: relative;
  padding: 0;
  overflow: visible;
}

#settingsOverlay .cloud-account-shell,
#settingsOverlay.websurf-settings-page .cloud-account-shell {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 11px 12px 61px;
}

#settingsOverlay .cloud-account-main-heading,
#settingsOverlay.websurf-settings-page .cloud-account-main-heading {
  min-height: 34px;
  padding-right: 0 !important;
  gap: 9px;
}

#settingsOverlay .cloud-account-main-heading > div > strong,
#settingsOverlay.websurf-settings-page .cloud-account-main-heading > div > strong {
  font-size: 1.05rem;
}

#settingsOverlay .cloud-account-main-heading > div > span,
#settingsOverlay.websurf-settings-page .cloud-account-main-heading > div > span {
  font-size: .66rem;
}

#settingsOverlay .cloud-account-dashboard,
#settingsOverlay.websurf-settings-page .cloud-account-dashboard,
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-dashboard {
  display: block !important;
}

#settingsOverlay .cloud-account-core-panel,
#settingsOverlay.websurf-settings-page .cloud-account-core-panel,
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-core-panel {
  display: grid !important;
  grid-template-columns: minmax(165px, .82fr) minmax(235px, 1.18fr) minmax(215px, 1fr) minmax(210px, .98fr) !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

#settingsOverlay .cloud-account-core-panel > * + *,
#settingsOverlay.websurf-settings-page .cloud-account-core-panel > * + * {
  border-left-width: 1px;
}

#settingsOverlay .cloud-account-identity-card,
#settingsOverlay .cloud-sync-state-card,
#settingsOverlay .cloud-account-storage-card,
#settingsOverlay.websurf-settings-page .cloud-account-identity-card,
#settingsOverlay.websurf-settings-page .cloud-sync-state-card,
#settingsOverlay.websurf-settings-page .cloud-account-storage-card {
  min-height: 62px;
  box-sizing: border-box;
  border-radius: 9px;
}

#settingsOverlay .cloud-account-identity-card,
#settingsOverlay.websurf-settings-page .cloud-account-identity-card {
  padding: 8px 10px;
  gap: 8px;
}

#settingsOverlay .cloud-sync-state-card,
#settingsOverlay.websurf-settings-page .cloud-sync-state-card {
  padding: 8px 10px;
  gap: 9px;
}

#settingsOverlay .cloud-account-storage-card {
  display: grid;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid rgba(66, 164, 197, .22);
  background: rgba(1, 25, 42, .52);
}

#settingsOverlay.websurf-settings-page .cloud-account-storage-card {
  border: 1px solid #cfdfE9;
  background: #f9fcfe;
  box-shadow: inset 0 1px 0 #fff;
}

.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .cloud-account-storage-card {
  border-color: #3d5867;
  background: #172b34;
  box-shadow: none;
}

#settingsOverlay .cloud-account-storage-card .custom-content-storage-meter.is-compact,
#settingsOverlay.websurf-settings-page .cloud-account-storage-card .custom-content-storage-meter.is-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: center;
  gap: 4px 9px;
  min-height: 0;
  margin: 0;
  font-size: .65rem;
}

#settingsOverlay .cloud-account-storage-card .custom-content-storage-meter.is-compact > .mini-note,
#settingsOverlay.websurf-settings-page .cloud-account-storage-card .custom-content-storage-meter.is-compact > .mini-note {
  display: grid;
  gap: 2px;
  min-width: 0;
  white-space: normal;
}

#settingsOverlay .cloud-account-storage-card .custom-content-storage-meter.is-compact > .mini-note strong,
#settingsOverlay.websurf-settings-page .cloud-account-storage-card .custom-content-storage-meter.is-compact > .mini-note strong {
  display: block;
  font-size: .67rem;
}

#settingsOverlay .cloud-account-storage-card .custom-content-storage-meter.is-compact progress,
#settingsOverlay.websurf-settings-page .cloud-account-storage-card .custom-content-storage-meter.is-compact progress {
  width: 72px;
  height: 5px;
}

#settingsOverlay .settings-account-topbar,
#settingsOverlay.websurf-settings-page .settings-account-topbar,
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-account-topbar {
  position: absolute !important;
  left: 12px !important;
  right: auto !important;
  top: auto !important;
  bottom: 10px !important;
  z-index: 6;
  display: block;
  width: min(52%, 590px);
  padding: 0 !important;
}

#settingsOverlay .settings-account-data-actions,
#settingsOverlay.websurf-settings-page .settings-account-data-actions,
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-account-data-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100%;
}

#settingsOverlay .settings-account-data-actions .small-button,
#settingsOverlay.websurf-settings-page .settings-account-data-actions .small-button {
  min-height: 39px;
  padding: 0 9px;
  border-radius: 9px;
  font-size: .7rem;
}

#settingsOverlay .cloud-account-side-actions,
#settingsOverlay.websurf-settings-page .cloud-account-side-actions,
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-side-actions {
  position: absolute !important;
  right: 12px !important;
  left: auto !important;
  bottom: 10px !important;
  display: grid !important;
  grid-template-columns: minmax(145px, 1.2fr) minmax(105px, .8fr) !important;
  gap: 8px !important;
  width: min(31%, 350px) !important;
  z-index: 6;
}

#settingsOverlay .cloud-account-compact-action,
#settingsOverlay.websurf-settings-page .cloud-account-compact-action {
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  min-height: 39px !important;
  padding: 7px 10px !important;
  gap: 7px;
  border-radius: 9px;
}

#settingsOverlay .cloud-account-compact-action > img,
#settingsOverlay.websurf-settings-page .cloud-account-compact-action > img {
  width: 18px;
  height: 18px;
}

#settingsOverlay .cloud-account-compact-action strong,
#settingsOverlay.websurf-settings-page .cloud-account-compact-action strong {
  font-size: .69rem;
  white-space: nowrap;
}

#settingsOverlay .cloud-account-custom-library,
#settingsOverlay.websurf-settings-page .cloud-account-custom-library {
  min-width: 0;
  margin-top: 2px;
}

/* New category volume controls. 100% means the category's authored/default
   loudness; the saved slider value acts as a category multiplier. */
#settingsOverlay .settings-volume-row,
#settingsOverlay.websurf-settings-page .settings-volume-row {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 225px);
  align-items: center;
}

#settingsOverlay .settings-volume-control,
#settingsOverlay.websurf-settings-page .settings-volume-control {
  display: grid;
  grid-template-columns: minmax(125px, 1fr) 40px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#settingsOverlay .settings-volume-control input[type="range"],
#settingsOverlay.websurf-settings-page .settings-volume-control input[type="range"] {
  width: 100%;
  min-width: 0;
  margin: 0;
  accent-color: #2fa9ff;
  cursor: pointer;
}

#settingsOverlay .settings-volume-control output,
#settingsOverlay.websurf-settings-page .settings-volume-control output {
  justify-self: end;
  min-width: 38px;
  color: #dff7ff;
  font-size: .7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#settingsOverlay.websurf-settings-page .settings-volume-control output {
  color: #17466e;
}

.tankazon-store[data-websurf-theme="dark"] #settingsOverlay.websurf-settings-page .settings-volume-control output {
  color: #dcecf7;
}

#settingsOverlay .settings-audio-card .settings-volume-row,
#settingsOverlay.websurf-settings-page .settings-audio-card .settings-volume-row {
  min-height: 50px;
}

#settingsOverlay .settings-other-actions,
#settingsOverlay.websurf-settings-page .settings-other-actions,
html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-other-actions {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#settingsOverlay .settings-other-actions .small-button,
#settingsOverlay.websurf-settings-page .settings-other-actions .small-button {
  min-height: 47px;
  padding: 5px 7px;
  font-size: .66rem;
  border-radius: 9px;
}

@media (max-width: 1100px) {
  #settingsOverlay .cloud-account-core-panel,
  #settingsOverlay.websurf-settings-page .cloud-account-core-panel,
  html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-core-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #settingsOverlay .settings-account-topbar,
  #settingsOverlay.websurf-settings-page .settings-account-topbar,
  html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-account-topbar {
    width: calc(62% - 18px);
  }

  #settingsOverlay .cloud-account-side-actions,
  #settingsOverlay.websurf-settings-page .cloud-account-side-actions,
  html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-side-actions {
    width: calc(38% - 18px) !important;
  }
}

@media (max-width: 860px) {
  #settingsOverlay .settings-dashboard-panel,
  #settingsOverlay.websurf-settings-page .settings-dashboard-panel {
    width: min(100%, calc(100vw - 24px));
  }

  #settingsOverlay .settings-dashboard-grid,
  #settingsOverlay.websurf-settings-page .settings-dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "account"
      "left"
      "right";
  }

  #settingsOverlay .cloud-account-shell,
  #settingsOverlay.websurf-settings-page .cloud-account-shell {
    padding-bottom: 11px;
  }

  #settingsOverlay .settings-account-topbar,
  #settingsOverlay.websurf-settings-page .settings-account-topbar,
  html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-account-topbar,
  #settingsOverlay .cloud-account-side-actions,
  #settingsOverlay.websurf-settings-page .cloud-account-side-actions,
  html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-side-actions {
    position: static !important;
    width: auto !important;
    margin: 8px 12px 0;
  }

  #settingsOverlay .settings-account-topbar,
  #settingsOverlay.websurf-settings-page .settings-account-topbar,
  html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .settings-account-topbar {
    margin-top: 0;
  }

  #settingsOverlay .cloud-account-side-actions,
  #settingsOverlay.websurf-settings-page .cloud-account-side-actions,
  html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-side-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #settingsOverlay .settings-volume-row,
  #settingsOverlay.websurf-settings-page .settings-volume-row {
    grid-template-columns: minmax(0, 1fr) minmax(155px, 200px);
  }
}

@media (max-width: 620px) {
  #settingsOverlay .cloud-account-core-panel,
  #settingsOverlay.websurf-settings-page .cloud-account-core-panel,
  html[data-layout-ratio-lock="true"] #settingsOverlay.websurf-settings-page .cloud-account-core-panel {
    grid-template-columns: 1fr !important;
  }

  #settingsOverlay .settings-account-data-actions,
  #settingsOverlay.websurf-settings-page .settings-account-data-actions,
  #settingsOverlay .settings-other-actions,
  #settingsOverlay.websurf-settings-page .settings-other-actions {
    grid-template-columns: 1fr !important;
  }

  #settingsOverlay .settings-volume-row,
  #settingsOverlay.websurf-settings-page .settings-volume-row {
    grid-template-columns: 1fr;
  }

  #settingsOverlay .settings-volume-control,
  #settingsOverlay.websurf-settings-page .settings-volume-control {
    width: 100%;
  }
}

/* Fish appearance progression in BubbleBodega. Locked variants are hidden in
   normal play, so the selector stays a clean classic dot strip containing only
   appearances the player has actually discovered. */
#storeOverlay .shop-variant-progress-message {
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(149, 214, 232, .28);
  border-radius: 7px;
  background: rgba(6, 38, 53, .38);
  color: rgba(225, 247, 252, .9);
  font-size: 11px;
  line-height: 1.35;
}
#storeOverlay .shop-variant-dots.is-fish-variants {
  gap: 0;
  min-height: 28px;
  padding: 0;
  transform: translateY(calc(28px - 100%));
}
#storeOverlay .shop-variant-dots.is-fish-variants button {
  display: grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}
#storeOverlay .shop-variant-dots.is-fish-variants button::before {
  display: block;
}
#storeOverlay .shop-variant-dots.is-fish-variants button[aria-pressed="true"] {
  border: 0;
  box-shadow: none;
}
#storeOverlay .shop-variant-dots.is-fish-variants button[hidden] {
  display: none !important;
}

/* WebSurf Phase 9: compact utility-first Home dashboard. */
#webHomePage:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--ws-text);
  background: var(--ws-page-bg);
}

.tankazon-store .websurf-home-dashboard-header {
  flex: 0 0 auto;
  justify-content: flex-start;
  width: min(1640px, calc(100% - 32px));
  min-height: 0;
  margin: 0 auto;
  padding: 9px 0 7px;
  gap: 10px;
  text-align: left;
}
.tankazon-store .websurf-home-dashboard-header > img {
  width: 38px;
  height: 38px;
  filter: none;
}
.tankazon-store .websurf-home-dashboard-header > div { gap: 0; }
.tankazon-store .websurf-home-dashboard-header span {
  color: var(--ws-text-secondary);
  font-size: .58rem;
  letter-spacing: .16em;
}
.tankazon-store .websurf-home-dashboard-header h1 {
  color: var(--ws-text-strong);
  font-size: 1.34rem;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.tankazon-store .websurf-home-dashboard-header p {
  margin-top: 1px;
  color: var(--ws-text-muted);
  font-size: .68rem;
  letter-spacing: .02em;
}

.tankazon-store .websurf-home-dashboard-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  width: min(1640px, calc(100% - 32px));
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  padding: 0 0 10px;
  overflow: hidden;
}

.tankazon-store .websurf-utility-section {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 1px 0;
}
.tankazon-store .websurf-utility-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tankazon-store .websurf-utility-heading h2,
.tankazon-store .websurf-utility-section > h2 {
  margin: 0;
  color: var(--ws-text-secondary);
  font-size: .58rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tankazon-store .websurf-utility-heading .small-button {
  min-height: 22px;
  padding: 2px 7px;
  border-color: var(--ws-border);
  border-radius: 5px;
  color: var(--ws-text-secondary);
  background: var(--ws-panel-soft);
  box-shadow: none;
  font-size: .56rem;
  line-height: 1;
}

.tankazon-store .websurf-home-dashboard-main .websurf-bookmark-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
}
.tankazon-store .websurf-home-dashboard-main .websurf-bookmark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: max-content;
  max-width: 240px;
  min-height: 34px;
  padding: 4px 8px;
  gap: 6px;
  border: 1px solid var(--ws-border);
  border-radius: 6px;
  color: var(--ws-text);
  background: var(--ws-panel-bg);
  box-shadow: none;
  text-align: left;
  transition: border-color 100ms ease, background 100ms ease;
}
.tankazon-store .websurf-home-dashboard-main .websurf-bookmark:hover {
  z-index: auto;
  border-color: color-mix(in srgb, var(--ws-accent) 55%, var(--ws-border));
  background: var(--ws-row-hover);
  box-shadow: none;
  transform: none;
}
.tankazon-store .websurf-home-dashboard-main .websurf-bookmark > img,
.tankazon-store .websurf-home-dashboard-main .websurf-bookmark-symbol {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  object-fit: contain;
}
.tankazon-store .websurf-home-dashboard-main .websurf-bookmark-symbol {
  display: grid;
  place-items: center;
  color: var(--ws-accent);
  font-size: .82rem;
}
.tankazon-store .websurf-home-dashboard-main .websurf-bookmark > span:not(.websurf-bookmark-symbol) {
  display: grid;
  gap: 0;
  min-width: 0;
}
.tankazon-store .websurf-home-dashboard-main .websurf-bookmark strong {
  max-width: 196px;
  overflow: hidden;
  font-size: .66rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tankazon-store .websurf-home-dashboard-main .websurf-bookmark small {
  max-width: 196px;
  overflow: hidden;
  color: var(--ws-text-muted);
  font-size: .53rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tankazon-store .websurf-home-dashboard-main .websurf-bookmark.is-coming-soon {
  color: var(--ws-text-muted);
  background: transparent;
  box-shadow: none;
}

.tankazon-store .websurf-home-dashboard-main .websurf-dashboard-grid {
  display: flex;
  flex: 1 1 280px;
  min-width: 0;
  min-height: 0;
  margin-top: 2px;
}
.tankazon-store .websurf-home-dashboard-main .websurf-inbox {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ws-border);
  border-radius: 8px;
  color: var(--ws-text);
  background: var(--ws-panel-bg);
  box-shadow: none;
}
.tankazon-store .websurf-home-dashboard-main .websurf-inbox > header {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 5px 10px;
  gap: 10px;
  border-bottom: 1px solid var(--ws-border-soft);
}
.tankazon-store .websurf-home-dashboard-main .websurf-inbox > header > div { gap: 7px; }
.tankazon-store .websurf-home-dashboard-main .websurf-inbox-icon {
  color: var(--ws-accent);
  font-size: 1rem;
}
.tankazon-store .websurf-home-dashboard-main .websurf-inbox h2 {
  color: var(--ws-text-strong);
  font-size: .9rem;
}
.tankazon-store .websurf-home-dashboard-main .websurf-unread-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--ws-accent);
  font-size: .62rem;
}
.tankazon-store .websurf-home-dashboard-main .websurf-inbox > header button {
  min-height: 25px;
  padding: 4px 8px;
  border-color: var(--ws-border);
  border-radius: 5px;
  color: var(--ws-text-secondary);
  background: var(--ws-panel-soft);
  box-shadow: none;
  font-size: .6rem;
}
.tankazon-store .websurf-home-dashboard-main .websurf-inbox > header button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ws-accent) 45%, var(--ws-border));
  background: var(--ws-row-hover);
}
.tankazon-store .websurf-home-dashboard-main .websurf-mail-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ws-border) transparent;
}
.tankazon-store .websurf-home-dashboard-main .websurf-mail-item { border-bottom-color: var(--ws-border-soft); }
.tankazon-store .websurf-home-dashboard-main .websurf-mail-row-shell {
  grid-template-columns: 28px minmax(0, 1fr);
}
.tankazon-store .websurf-home-dashboard-main .websurf-mail-row {
  grid-template-columns: 30px minmax(150px, 220px) minmax(220px, 1fr) 70px;
  gap: 8px;
  min-height: 50px;
  padding: 5px 10px 5px 3px;
  color: var(--ws-text);
}
.tankazon-store .websurf-home-dashboard-main .websurf-mail-row:hover { background: var(--ws-row-hover); }
.tankazon-store .websurf-home-dashboard-main .websurf-mail-row.is-unread {
  color: var(--ws-text-strong);
  background: var(--ws-row-bg);
}
.tankazon-store .websurf-home-dashboard-main .websurf-mail-row > img {
  width: 28px;
  height: 28px;
}
.tankazon-store .websurf-home-dashboard-main .websurf-mail-sender { font-size: .66rem; }
.tankazon-store .websurf-home-dashboard-main .websurf-mail-sender small { font-size: .52rem; }
.tankazon-store .websurf-home-dashboard-main .websurf-mail-copy { gap: 1px; }
.tankazon-store .websurf-home-dashboard-main .websurf-mail-copy strong { font-size: .71rem; }
.tankazon-store .websurf-home-dashboard-main .websurf-mail-copy small {
  color: var(--ws-text-muted);
  font-size: .61rem;
}
.tankazon-store .websurf-home-dashboard-main .websurf-mail-row time {
  color: var(--ws-text-muted);
  font-size: .59rem;
}
.tankazon-store .websurf-home-dashboard-main .websurf-mail-star:hover { background: var(--ws-row-hover); }
.tankazon-store .websurf-home-dashboard-main .websurf-mail-detail {
  padding: 5px 12px 12px 54px;
  color: var(--ws-text-secondary);
  background: var(--ws-row-open);
}
.tankazon-store .websurf-home-dashboard-main .websurf-status-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 4px 10px;
  gap: 14px;
  border: 0;
  border-top: 1px solid var(--ws-border-soft);
  border-radius: 0;
  color: var(--ws-text-muted);
  background: var(--ws-panel-soft);
  box-shadow: none;
  font-size: .57rem;
}
.tankazon-store .websurf-home-dashboard-main .websurf-status-bar > span:last-child {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.tankazon-store .websurf-home-dashboard-main .websurf-status-bar small {
  color: var(--ws-text-muted);
  font: inherit;
}
.tankazon-store .websurf-home-dashboard-main .websurf-status-bar strong {
  color: var(--ws-text-secondary);
  font-size: .58rem;
  font-weight: 800;
}

/* Ratio Lock keeps the same compact dashboard rather than re-inflating the old hero layout. */
html[data-layout-ratio-lock="true"] .websurf-home-dashboard-header h1 { font-size: 1.34rem; }
html[data-layout-ratio-lock="true"] .websurf-home-dashboard-main { width: min(1640px, calc(100% - 32px)); }
html[data-layout-ratio-lock="true"] .websurf-home-dashboard-main .websurf-bookmark-row {
  display: flex;
  grid-template-columns: none;
  justify-content: flex-start;
}
html[data-layout-ratio-lock="true"] .websurf-home-dashboard-main .websurf-mail-row {
  grid-template-columns: 30px minmax(150px, 220px) minmax(220px, 1fr) 70px;
  gap: 8px;
}
html[data-layout-ratio-lock="true"] .websurf-home-dashboard-main .websurf-status-bar {
  align-items: center;
  flex-direction: row;
  gap: 14px;
}

@media (max-width: 980px) {
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-header,
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-main {
    width: calc(100% - 20px);
  }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-main .websurf-bookmark-row {
    display: flex;
    grid-template-columns: none;
  }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-main .websurf-mail-row {
    grid-template-columns: 28px minmax(120px, 180px) minmax(180px, 1fr) 58px;
    gap: 6px;
  }
}

@media (max-width: 620px) {
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-header {
    min-height: 0;
    padding: 7px 0 6px;
    gap: 8px;
  }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-header > img {
    width: 32px;
    height: 32px;
  }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-header h1 { font-size: 1.08rem; }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-main { gap: 4px; padding-bottom: 6px; }
  html:not([data-layout-ratio-lock="true"]) .websurf-utility-section {
    grid-template-columns: 1fr;
    gap: 3px;
    min-height: 0;
  }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-main .websurf-bookmark-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-main .websurf-bookmark.is-coming-soon { display: inline-flex; }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-main .websurf-mail-row {
    grid-template-columns: 26px minmax(0, 1fr) 52px;
    gap: 6px;
  }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-main .websurf-mail-sender { display: none; }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-main .websurf-inbox > header {
    align-items: center;
    flex-wrap: nowrap;
  }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-main .websurf-inbox-header-actions {
    width: auto;
    justify-content: flex-end;
  }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-main .websurf-inbox > header button {
    padding-inline: 6px;
  }
  html:not([data-layout-ratio-lock="true"]) .websurf-home-dashboard-main .websurf-status-bar {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }
}
/* Pharmacy care and the independent Stillwater WebSurf site. */
.tankazon-medicine-symptoms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 240px)); gap: 12px; }
.tankazon-medicine-symptoms .tankazon-medicine-symptom { margin: 0; cursor: default; }
.tankazon-store.is-stillwater-open .tankazon-panel { grid-template-rows: 40px auto minmax(0, 1fr) !important; }
.tankazon-store.is-stillwater-open :is(.tankazon-header, .tankazon-promo-strip, .tankazon-body, .tankazon-account-page, .store-scroll-controls, .proteus-biodyne-page, .proteus-designer-route) { display: none !important; }
.stillwater-page { grid-row: 3; grid-column: 1 / -1; min-height: 0; overflow: auto; position: relative; background: radial-gradient(ellipse at 50% 12%, #102d3a 0, #0b202b 48%, #081a25 100%); color: #edf7fc; }
.stillwater-page:has(.stillwater-dialog-backdrop) { overflow: hidden; }
.stillwater-page[hidden], .pharmacy-symptom-checker[hidden], #inspectorTreatmentGuide[hidden] { display: none !important; }
.stillwater-page-content { box-sizing: border-box; max-width: 1100px; margin: auto; padding: 42px 32px 28px; }
.stillwater-page-content > .stillwater-brand { display: grid; justify-items: center; gap: 8px; margin: 0 16px 26px; padding-bottom: 22px; border-bottom: 1px solid #527584; }
.stillwater-page-content > .stillwater-brand img { width: 128px; height: 128px; max-width: 128px; object-fit: contain; }
.stillwater-brand span { color: #c5e4f0; font-size: 19px; font-weight: 650; }
.stillwater-intro { text-align: center; }
.stillwater-page h1 { margin: 0 0 20px; font-size: clamp(28px, 3vw, 42px); font-weight: 750; line-height: 1.2; }
.stillwater-intro > p { max-width: 760px; margin: 0 auto; color: #b9d6e4; font-size: 18px; font-weight: 500; }
.stillwater-page p, .fish-care-guide p { line-height: 1.6; }
.stillwater-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 26px 0 28px; }
.stillwater-services section { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: start; gap: 20px; padding: 20px; border: 1px solid #527b8e; border-radius: 9px; background: #0b202980; }
.stillwater-services h2 { margin: 6px 0 6px; color: #edf7fc; font-size: 16px; line-height: 1.3; }
.stillwater-services p { margin: 0; color: #bdd0db; font-size: 15px; }
.stillwater-service-icon { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: #193e4c; }
.stillwater-service-icon img { width: 40px; height: 40px; object-fit: contain; }
.stillwater-consultation { display: grid; justify-items: center; gap: 22px; margin: 0 16px; padding-top: 22px; border-top: 1px solid #527584; }
.stillwater-pricing { display: flex; align-items: center; gap: 20px; }
.stillwater-pricing > img { width: 50px; height: 50px; object-fit: contain; }
.stillwater-pricing strong { font-size: 20px; }
.stillwater-pricing p { margin: 2px 0 0; color: #bddce9; font-size: 16px; }
.stillwater-page .small-button { box-sizing: border-box; min-height: 42px; padding: 10px 20px; border: 1px solid #29badc; border-radius: 24px; background: #28bbdd; color: #052a38; font-size: 15px; font-weight: 700; }
.stillwater-page .small-button:hover:not(:disabled) { background: #6adcf6; }
.stillwater-page .small-button:disabled { opacity: .45; cursor: default; }
.stillwater-page .small-button.alt { border-color: #39535c; background: #2b444d; color: #f2f8fb; }
.stillwater-page .small-button.alt:hover:not(:disabled) { background: #3b5b66; }
.stillwater-page .stillwater-consult-button { width: min(260px, 100%); min-height: 46px; border-radius: 10px; background: linear-gradient(180deg, #80e2fa, #58c8e7); font-size: 17px; }
.stillwater-confirmation { max-width: 700px; margin: 20px auto 0; padding: 16px; border: 1px solid #527b8e; border-radius: 9px; text-align: center; }
.stillwater-confirmation p { margin: 0 0 12px; }
.stillwater-page footer { margin-top: 18px; text-align: center; }
.stillwater-page .care-text-link { color: #87d7ef; font-size: 13px; }
.pharmacy-symptom-checker footer { margin-top: 24px; border-top: 1px solid #b7d0df; padding-top: 16px; }
.care-text-link { background: transparent; border: 0; color: #096b9b; font: inherit; text-decoration: underline; cursor: pointer; padding: 8px 0; text-align: left; }
.stillwater-dialog-backdrop { position: absolute; inset: 0; z-index: 40; box-sizing: border-box; background: #020f18b3; padding: 24px; display: grid; place-items: center; }
.stillwater-dialog { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; gap: 16px; width: min(608px, 100%); max-height: 100%; padding: 20px 22px; border: 1px solid #18617c; border-radius: 12px; box-sizing: border-box; background: linear-gradient(135deg, #0e2936, #0b202b); color: #edf7fc; box-shadow: 0 18px 56px #0008; overflow: auto; }
.stillwater-dialog-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 5px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.stillwater-dialog-close img { width: 22px; height: 22px; object-fit: contain; }
.stillwater-dialog-close:hover { background: #193e4c; }
.stillwater-dialog-header { display: flex; align-items: center; gap: 18px; padding-right: 20px; }
.stillwater-dialog-header > img { flex: 0 0 auto; width: 50px; height: 50px; object-fit: contain; }
.stillwater-dialog-header h2 { margin: 0 0 6px; font-size: 28px; line-height: 1.2; }
.stillwater-dialog p { margin: 0; font-size: 16px; line-height: 1.5; }
.stillwater-consult-total { display: grid; gap: 8px; padding: 12px 16px; border: 1px solid #285a6c; border-radius: 10px; background: #08202c; font-variant-numeric: tabular-nums; }
.stillwater-dialog .stillwater-consult-calculation { display: flex; align-items: center; gap: 6px; color: #b7d4e0; font-size: 14px; }
.stillwater-consult-calculation > span, .stillwater-consult-summary-row > strong { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.stillwater-consult-summary-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #b7d4e0; font-size: 14px; }
.stillwater-consult-summary-row > strong { color: #edf7fc; }
.stillwater-consult-summary-row.is-total { padding-top: 8px; border-top: 1px solid #285a6c; color: #86e6ff; font-size: 18px; font-weight: 700; }
.stillwater-consult-summary-row.is-total > strong { color: #86e6ff; }
.stillwater-summary-coin { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) saturate(100%) invert(81%) sepia(71%) saturate(562%) hue-rotate(350deg) brightness(104%) contrast(104%); }
.stillwater-fish-picker { display: grid; gap: 8px; min-height: 0; max-height: 430px; overflow-y: auto; padding-right: 6px; }
.stillwater-fish-picker label { display: grid; grid-template-columns: 18px 100px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 66px; padding: 6px 14px; border: 1px solid #8eb8c9; border-radius: 9px; cursor: pointer; background: #0d2531; }
.stillwater-fish-picker input { width: 16px; height: 16px; margin: 0; accent-color: #63d9f5; }
.stillwater-fish-picker label:has(input:checked) { border-color: #66d6f2; background: #153b4a; }
.stillwater-fish-thumb { position: relative; display: block; width: 100px; height: 50px; object-fit: contain; border-radius: 5px; background: #061821; }
.stillwater-fish-thumb > img, .stillwater-fish-thumb > span { width: 100%; height: 100%; object-fit: contain; }
.stillwater-fish-thumb > img { position: static; display: block; }
.stillwater-fish-picker label > span { min-width: 0; overflow-wrap: anywhere; }
.stillwater-fish-picker strong { font-size: 16px; }
.stillwater-fish-picker small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.3; }
.stillwater-dialog-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.stillwater-dialog-actions [data-care-confirm-consult] { margin-left: auto; }
.stillwater-notice { color: #ffaaa0; }

.bubble-bank-care-support { padding: 16px; border: 1px solid #32a7bd; border-radius: 12px; background: rgba(32, 166, 188, .1); }
.bubble-bank-care-support h3 { margin: 0 0 8px; }
.bubble-bank-care-support p { margin: 0 0 12px; }

/* Substrate controls stay inside the existing edit tray height. */
.substrate-editor { display: flex; align-items: stretch; gap: 10px; height: 100%; min-height: 0; min-width: 0; overflow: hidden; color: #c5f5ff; }
.substrate-editor *, .substrate-editor *::before, .substrate-editor *::after { transition: none !important; animation: none !important; }
.substrate-type-choices { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 4px; flex: 0 1 84px; min-width: 56px; padding-right: 8px; border-right: 1px solid #2487a6; }
.substrate-type-choices button { flex: 0 1 38px; min-width: 0; min-height: 0; padding: 5px 3px; border: 1px solid #17607d; border-radius: 10px; background: #082c41; color: #bceaff; font: 700 10px var(--ui-font-stack); cursor: pointer; }
.substrate-type-choices button.is-selected { color: #032638; background: #41d5f4; border-color: #76edff; }
.substrate-type-choices button:disabled { opacity: .4; cursor: default; }
.substrate-presets { flex: 0 1 calc(var(--preset-page-size, 2) * 62px + 50px); min-width: 0; display: grid; grid-template-rows: 18px minmax(0, 1fr); }
.substrate-presets > strong, .substrate-custom-colors > strong { font-size: 12px; line-height: 18px; color: #73e8ff; }
.substrate-preset-carousel { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 0; }
.substrate-preset-carousel > button { flex: 0 0 22px; width: 22px; height: 32px; padding: 0; border: 1px solid #229fc8; border-radius: 50%; background: #063044; color: #6bdfff; font-size: 26px; cursor: pointer; }
.substrate-preset-list { flex: 1; display: grid; grid-template-columns: repeat(var(--preset-page-size, 2), minmax(0, 1fr)); align-items: center; gap: 6px; min-width: 0; height: 100%; overflow: hidden; }
.substrate-preset { min-width: 0; display: grid; justify-items: center; gap: 3px; border: 0; padding: 0 2px; background: transparent; color: #bceaff; cursor: pointer; }
.substrate-preset > svg { width: min(100%, 54px); height: auto; aspect-ratio: 1; border: 2px solid #149fcb; border-radius: 50%; overflow: hidden; background: #031c29; }
.substrate-preset > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 700 9px/12px var(--ui-font-stack); white-space: nowrap; }
.substrate-preset.is-selected > svg { border-color: #a2f9ff; box-shadow: 0 0 7px #3de5ff; }
.substrate-custom-colors { flex: 1 1 490px; min-width: 0; min-height: 0; display: grid; grid-template-rows: 18px minmax(0, 1fr); padding-left: 10px; border-left: 1px solid #2487a6; }
.substrate-custom-body { container: gravel-colors / size; display: grid; grid-template-columns: clamp(120px, 14%, 170px) minmax(0, 1fr) clamp(64px, 12%, 140px); align-items: stretch; gap: 8px; min-width: 0; min-height: 0; }
.substrate-color-cards { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 4px; min-height: 0; }
.substrate-color-card { --gravel-sample-size: min(32px, 20cqh); position: relative; min-width: 0; min-height: 0; border: 1px solid #17607d; border-radius: 8px; background: #032335; }
.substrate-color-card.is-selected { border-color: #48e5ff; box-shadow: inset 0 0 0 1px #48e5ff; background: #06394b; }
.substrate-color-slot { display: grid; grid-template-columns: var(--gravel-sample-size) minmax(0, 1fr); align-items: center; column-gap: 8px; width: 100%; height: 100%; min-height: 0; padding: 3px 4px; border: 0; border-radius: inherit; background: transparent; color: #e4faff; cursor: pointer; }
.substrate-color-slot strong { align-self: start; padding-top: 1px; text-align: left; white-space: nowrap; font: 700 clamp(9px, 9cqh, 12px)/1 var(--ui-font-stack); }
.substrate-color-sample { display: block; width: var(--gravel-sample-size); aspect-ratio: 1; border: 2px solid #60ddfc; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 3px 5px #fff4, 0 0 5px #1cc1ef70; }
.substrate-color-card .substrate-colorize { position: absolute; left: calc(var(--gravel-sample-size) + 12px); bottom: 3px; gap: 3px; font-size: clamp(8px, 7cqh, 10px); white-space: nowrap; }
.substrate-inline-palette { --palette-rows: 3; --palette-gap: 3px; --palette-cell: min(34px, calc((100cqh - 16px - (var(--palette-rows) - 1) * var(--palette-gap)) / var(--palette-rows))); display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); grid-template-rows: repeat(var(--palette-rows), minmax(0, var(--palette-cell))); align-content: center; align-items: center; justify-items: center; gap: var(--palette-gap); min-width: 0; min-height: 0; padding: 6px; border: 1px solid #1db9eb; border-radius: 12px; background: #032335; overflow: hidden; }
.substrate-inline-swatch { width: min(100%, var(--palette-cell)); aspect-ratio: 1; min-width: 0; min-height: 0; padding: 0; border: 1px solid #ffffff60; border-radius: 5px; background: var(--swatch); box-shadow: inset 0 3px 4px #ffffff66, inset 0 -2px 3px #0004; cursor: pointer; }
.substrate-inline-swatch[aria-pressed="true"] { outline: 2px solid #8bf1ff; outline-offset: 1px; }
.substrate-inline-swatch:focus-visible, .substrate-color-slot:focus-visible { outline: 2px solid white; outline-offset: -2px; }
@container gravel-colors (max-height: 85px) {
  .substrate-color-slot { padding-right: 50px; }
  .substrate-color-slot strong { align-self: center; padding-top: 0; }
  .substrate-color-card .substrate-colorize { left: auto; right: 4px; top: 50%; bottom: auto; transform: translateY(-50%); }
}
.substrate-custom-color { display: grid; justify-items: center; align-content: center; gap: 5px; font: 700 10px var(--ui-font-stack); }
.substrate-color-button { display: flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #d1faff; cursor: pointer; }
.substrate-color-button > span { display: block; width: 39px; height: 39px; border-radius: 50%; border: 2px solid #60ddfc; background: var(--swatch); box-shadow: inset 0 3px 5px #fff4, 0 0 5px #1cc1ef70; }
.substrate-color-button > b { font-size: 17px; }
.substrate-colorize { display: flex; align-items: center; gap: 2px; font-size: 8px; color: #b1ccd7; }
.substrate-colorize input { width: 11px; height: 11px; margin: 0; accent-color: #3cd9f5; }
.substrate-current-preview { min-width: 0; min-height: 0; display: grid; place-items: center; padding-left: 8px; border-left: 1px solid #2487a6; }
.substrate-current-preview > svg { width: min(100%, 100cqh); height: auto; max-height: 100cqh; aspect-ratio: 1; box-sizing: border-box; border: 2px solid #20b8de; border-radius: 9px; overflow: hidden; background: #031c29; }
.substrate-sand-colors { display: flex; align-items: center; gap: 22px; padding: 0 15px; }
.substrate-sand-control { display: grid; align-content: center; justify-items: start; gap: 9px; }
.substrate-sand-control > strong { font: 700 12px var(--ui-font-stack); color: #73e8ff; }
.substrate-sand-options { display: flex; align-items: center; gap: 10px; }
.substrate-sand-options > button, .substrate-color-popover .substrate-original-button { display: flex; align-items: center; gap: 7px; width: auto; min-height: 40px; padding: 6px 10px; border: 1px solid #17607d; border-radius: 10px; background: #082c41; color: #bceaff; font: 700 11px var(--ui-font-stack); cursor: pointer; }
.substrate-original-button > span { display: block; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #e8ddbf; background: #e8ddbf url("../assets/gravel/alt/sand.webp") center / cover; }
.substrate-sand-options .substrate-color-button > span { width: 25px; height: 25px; }
.substrate-sand-options > button[aria-pressed="true"] { border-color: #76edff; background: #14516a; box-shadow: 0 0 0 1px #76edff; }
.substrate-sand-control .substrate-colorize { gap: 5px; font-size: 11px; }
.substrate-sand-control .substrate-colorize input { width: 14px; height: 14px; }
.substrate-sand-control .substrate-colorize:has(input:disabled) { opacity: .5; }
.substrate-sand-control button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.substrate-color-popover .substrate-original-button { grid-column: 1 / -1; margin-bottom: 5px; box-shadow: none; }
.substrate-sand-colors > span, .substrate-natural-note { align-self: center; font-size: 12px; color: #a5c7d6; }
.substrate-color-popover { position: fixed; inset: auto; margin: 0; width: 256px; box-sizing: content-box; padding: 12px; border: 2px solid #1db9eb; border-radius: 14px; background: #032335; box-shadow: 0 4px 22px #00121ee0; }
.substrate-color-popover:popover-open { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.substrate-color-popover button { width: 27px; height: 27px; padding: 0; border: 1px solid #ffffff60; border-radius: 7px; background: var(--swatch); box-shadow: inset 0 3px 4px #ffffff66, inset 0 -2px 3px #0004; cursor: pointer; }
.substrate-color-popover button[aria-pressed="true"] { outline: 2px solid #8bf1ff; outline-offset: 1px; }
.substrate-editor button:focus-visible, .substrate-color-popover button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
@media (max-width: 980px) {
  .substrate-editor { gap: 8px; }
  .substrate-type-choices { flex-basis: 76px; }
  .substrate-type-choices button { min-width: 0; padding: 5px 3px; }
}
.stillwater-notice[hidden] { display: none; }
.stillwater-fish-report { padding: 18px 0; border-top: 1px solid #7896a5; }
.pharmacy-symptom-checker { container: pharmacy-checker / inline-size; margin: 10px; padding: 12px; border: 1px solid #87b9d3; border-radius: 10px; background: #edf7fb; color: #173343; }
.pharmacy-symptom-checker h2 { margin: 0; font-size: 1.1rem; }
.pharmacy-symptom-checker header p { margin: 3px 0 0; font-size: .8rem; }
.pharmacy-symptoms { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.pharmacy-symptom { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 8px; padding: 8px; border: 1px solid #8cabbc; border-radius: 6px; cursor: pointer; background: #fff; }
.pharmacy-symptom input { position: absolute; z-index: 1; top: 13px; left: 13px; width: 16px; height: 16px; margin: 0; }
.pharmacy-symptom img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #132632; border-radius: 4px; }
.pharmacy-symptom-text-art { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 24px 12px; box-sizing: border-box; border-radius: 4px; background: #132632; color: #85d8ff; text-align: center; font-size: .75rem; line-height: 1.3; }
.pharmacy-symptom strong { align-self: center; min-height: 2.4em; display: grid; place-items: center; padding: 0 4px; text-align: center; font-size: .78rem; line-height: 1.2; }
.pharmacy-symptom.is-selected { outline: 2px solid #0582bb; border-color: #0582bb; }
.pharmacy-quiz-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.pharmacy-symptom-checker .small-button { min-height: 32px; padding: 6px 12px; font-size: .8rem; }
.pharmacy-symptom-checker .small-button.alt { background: #e2edf2; color: #173343; border: 1px solid #8cabbc; }
.pharmacy-symptom-checker footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-top: 10px; padding-top: 8px; font-size: .75rem; }
.pharmacy-symptom-checker footer > div { text-align: right; }
.pharmacy-symptom-checker footer strong { font-size: .85rem; }
.pharmacy-symptom-checker footer p { margin: 3px 0 0; }
.pharmacy-symptom-checker .pharmacy-vet-button { min-height: 36px; flex-shrink: 0; border: 1px solid #047fa7; border-radius: 8px; background: #27bde8; color: #062c3b; font-weight: 700; text-decoration: none; }
.pharmacy-symptom-checker .pharmacy-vet-button:hover { background: #57d2f4; }
.pharmacy-results { margin-top: 10px; font-size: .8rem; }
.pharmacy-result-cards { display: grid; gap: 12px; align-items: start; }
.pharmacy-treatment-card { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 196px 58px 38px; gap: 7px; min-width: 0; height: 323px; padding: 10px; border: 1px solid #d5d9d9; border-radius: 8px; background: #fff; color: #0f1111; box-shadow: 0 1px 2px rgba(15,17,17,.08); }
.pharmacy-treatment-thumb { display: block; box-sizing: border-box; width: 100%; height: 196px; object-fit: contain; border-radius: 4px; background: #fff; }
.pharmacy-treatment-card h3 { margin: 0; }
.pharmacy-treatment-card > button { box-sizing: border-box; align-self: start; width: 100%; height: 36px; margin: 0; }
.tankazon-store[data-websurf-theme="dark"] .pharmacy-treatment-card { border-color: var(--ws-border); color: var(--ws-text); background: var(--ws-panel-bg); box-shadow: 0 2px 9px rgba(0,0,0,.24); }
.tankazon-store[data-websurf-theme="dark"] .pharmacy-treatment-thumb { background: #74797d; }
.tankazon-store:is(.tankazon-item-open, .tankazon-account-open) #pharmacySymptomChecker { display: none !important; }
.fish-care-guide { padding: 12px; border: 1px solid #507e96; border-radius: 10px; margin: 10px 0; font-size: .85rem; }
.fish-care-guide p { margin: 8px 0; }
.tankazon-store[data-websurf-theme="dark"] .pharmacy-symptom-checker { background: #102b38; color: #e4f1f7; border-color: #40819f; }
.tankazon-store[data-websurf-theme="dark"] .pharmacy-symptom { background: #173946; color: #e4f1f7; border-color: #607e8d; }
.tankazon-store[data-websurf-theme="dark"] .pharmacy-symptom-checker .small-button.alt { background: #244958; color: #e4f1f7; border-color: #607e8d; }
.tankazon-store[data-websurf-theme="dark"] :is(.care-text-link, .pharmacy-symptom-text-art) { color: #85d8ff; }
.tankazon-store[data-websurf-theme="dark"] .stillwater-notice { color: #ffaaa0; }
:is(.stillwater-page, .pharmacy-symptom-checker) :is(button, input):focus-visible { outline: 3px solid #12a9e5; outline-offset: 3px; }
@media (max-width: 640px) {
  .stillwater-page-content { padding: 24px 16px; }
  .stillwater-page-content > .stillwater-brand { margin: 0 0 22px; }
  .stillwater-page-content > .stillwater-brand img { width: 100px; height: 100px; max-width: 100px; }
  .stillwater-intro > p { font-size: 16px; }
  .stillwater-services { grid-template-columns: 1fr; }
  .stillwater-services section { gap: 16px; padding: 16px; }
  .stillwater-consultation { margin: 0; }
  .stillwater-pricing { gap: 12px; }
  .stillwater-pricing strong { font-size: 18px; }
  .stillwater-pricing p { font-size: 14px; }
  .pharmacy-symptom-checker { margin: 8px; padding: 10px; }
  .stillwater-dialog-backdrop { padding: 8px; }
  .stillwater-dialog { gap: 12px; padding: 16px; }
  .stillwater-dialog-header { gap: 12px; }
  .stillwater-dialog-header > img { width: 36px; height: 36px; }
  .stillwater-dialog-header h2 { font-size: 23px; }
  .stillwater-dialog p { font-size: 14px; }
  .stillwater-fish-picker label { grid-template-columns: 16px 76px minmax(0, 1fr); gap: 8px; padding: 6px 8px; }
  .stillwater-fish-thumb { width: 76px; height: 46px; }
  .stillwater-dialog-actions .small-button { padding: 10px 14px; font-size: 13px; }
}
@container pharmacy-checker (max-width: 720px) {
  .pharmacy-symptoms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container pharmacy-checker (max-width: 380px) {
  .pharmacy-symptoms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pharmacy-symptom-text-art { font-size: .66rem; }
}

/* Edit-only workspace. Geometry comes from the stage's logical size, so Ratio
   Lock scales the composition without triggering browser-width reflow. */
.edit-workspace-only { display: none; }
.edit-decor-type-filter {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  color: #d8f1ff; font-size: 12px; font-weight: 700;
}
.edit-decor-type-filter select {
  min-width: 110px; max-width: 100%; padding: 6px 8px;
  border: 1px solid #39778e; border-radius: 8px;
  background: #082c41; color: #d8f1ff; font: inherit;
}
#editDecorTray .edit-decor-tray-header { max-height: none; height: auto; flex-wrap: wrap; overflow: visible; }
.tank-stage.is-edit-workspace :is(#editFishTray, #editDecorTray, #editEquipmentTray, #editTankTray) {
  transform: none !important; max-width: none !important; box-sizing: border-box;
  padding: 10px; border-radius: 14px; z-index: 9;
}
.tank-stage.is-edit-workspace :is(#editFishTray, #editDecorTray, #editEquipmentTray) {
  top: var(--edit-workspace-top); bottom: auto !important;
  height: var(--edit-workspace-sideHeight) !important;
  min-height: 0 !important; max-height: var(--edit-workspace-sideHeight) !important;
  display: grid; grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-items: stretch; gap: 10px; backdrop-filter: none;
}
.tank-stage.is-edit-workspace #editFishTray {
  left: var(--edit-workspace-edge) !important; right: auto;
  width: var(--edit-workspace-leftWidth) !important;
}
.tank-stage.is-edit-workspace :is(#editDecorTray, #editEquipmentTray) {
  left: auto !important; right: var(--edit-workspace-edge);
  width: var(--edit-workspace-rightWidth) !important;
}
.tank-stage.is-edit-workspace #editTankTray {
  left: var(--edit-workspace-edge) !important; right: var(--edit-workspace-edge);
  top: auto; bottom: var(--edit-workspace-bottom) !important;
  width: calc(100% - var(--edit-workspace-edge) * 2) !important;
  height: var(--edit-workspace-bottomHeight) !important;
  min-height: 0 !important; max-height: var(--edit-workspace-bottomHeight) !important;
}
.tank-stage.is-edit-workspace .edit-workspace-only { display: block; }
.tank-stage.is-edit-workspace :is(#editFishTray, #editDecorTray, #editEquipmentTray) > .edit-tray-mode-header {
  display: flex !important; align-items: center; gap: 6px;
  min-width: 0; grid-column: 1 / -1;
}
.tank-stage.is-edit-workspace :is(#editDecorTray, #editEquipmentTray) .edit-overlay-mode-tabs {
  flex: 1; width: auto !important; min-width: 0; max-width: 100%;
  justify-content: stretch; overflow: visible; gap: 4px;
}
.tank-stage.is-edit-workspace :is(#editDecorTray, #editEquipmentTray) [data-edit-overlay-mode]:not([data-edit-overlay-mode="decor"]):not([data-edit-overlay-mode="equipment"]),
.tank-stage.is-edit-workspace #editFishTray .edit-overlay-mode-tabs,
.tank-stage.is-edit-workspace :is(#editFishTray, #editDecorTray, #editEquipmentTray) .edit-tray-done-button,
.tank-stage.is-edit-workspace :is(#editFishTray, #editDecorTray) .edit-decor-tray-arrow,
.tank-stage.is-edit-workspace #editTankTray :is([data-edit-overlay-mode="fish"], [data-edit-overlay-mode="decor"], [data-edit-overlay-mode="equipment"]) {
  display: none !important;
}
.tank-stage.is-edit-workspace :is(#editDecorTray, #editEquipmentTray) .edit-overlay-mode-tab {
  flex: 1 1 0; width: auto !important; min-width: 0 !important;
  padding: 6px 4px; gap: 4px; font-size: 11px;
}
.tank-stage.is-edit-workspace :is(#editDecorTray, #editEquipmentTray) .edit-overlay-mode-icon { width: 16px; height: 16px; }
.tank-stage.is-edit-workspace .edit-workspace-collapse,
.tank-stage.is-edit-workspace .edit-workspace-fish-title {
  border: 1px solid #39778e; border-radius: 8px; background: #082c41;
  color: #d8f1ff; cursor: pointer; font-weight: 800;
}
.tank-stage.is-edit-workspace .edit-workspace-collapse { order: 2; flex: 0 0 26px; width: 26px; min-height: 30px; padding: 0; font-size: 20px; }
.tank-stage.is-edit-workspace .edit-workspace-fish-title { flex: 1; padding: 7px; text-align: left; font-size: 14px; }
.tank-stage.is-edit-workspace :is(#editDecorTray, #editFishTray, #editEquipmentTray) :is(.edit-decor-tray-header, .edit-fish-tray-header) {
  grid-column: 1 / -1; min-width: 0; max-height: none; height: auto;
  flex-wrap: wrap; justify-content: flex-start; gap: 8px;
}
.tank-stage.is-edit-workspace .edit-decor-type-filter { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 4px; }
.tank-stage.is-edit-workspace .edit-decor-type-filter select { width: 100%; }
.tank-stage.is-edit-workspace .edit-decor-in-tank-toggle { padding: 5px 7px; gap: 5px; font-size: 11px; }
.tank-stage.is-edit-workspace .decor-history-controls { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.tank-stage.is-edit-workspace .decor-history-controls .small-button { min-width: 0; padding: 5px 7px; font-size: 11px; }
.tank-stage.is-edit-workspace :is(#editFishTrayScroller, #editDecorTrayScroller, #editEquipmentTrayScroller) {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1; gap: 10px 8px; align-content: start; align-items: start;
  min-height: 0 !important; height: 100%; overflow-x: hidden; overflow-y: auto;
  touch-action: pan-y; padding: 2px 3px 6px 0; overscroll-behavior: contain;
}
.tank-stage.is-edit-workspace :is(#editFishTray, #editDecorTray, #editEquipmentTray) .edit-decor-tile {
  width: 100%; min-width: 0 !important; max-width: none !important;
  height: 118px !important;
}
.tank-stage.is-edit-workspace :is(#editFishTray, #editDecorTray, #editEquipmentTray) .edit-decor-tile-primary { height: 88px; }
.tank-stage.is-edit-workspace :is(#editFishTray, #editDecorTray, #editEquipmentTray) .edit-decor-tile::before { display: none; }
.tank-stage.is-edit-workspace :is(#editFishTray, #editDecorTray, #editEquipmentTray) .edit-decor-tile::after {
  content: attr(data-decor-name); display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden; margin-top: 4px;
  font-size: 11px; line-height: 13px; text-align: center; color: #d8f1ff;
}
.tank-stage.is-edit-workspace .edit-decor-tray-empty { grid-column: 1 / -1; white-space: normal; font-size: 12px; }
.tank-stage.is-edit-workspace .edit-fish-tray-context-menu {
  width: min(300px, calc(var(--app-viewport-width) - 24px));
  max-height: calc(var(--app-viewport-height) - 24px); overflow-y: auto; z-index: 12;
}
.tank-stage.is-edit-workspace #editTankTray > .edit-tray-mode-header {
  display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
}
.tank-stage.is-edit-workspace #editTankTray .edit-overlay-mode-tabs { margin: 0; order: 0; }
.tank-stage.is-edit-workspace #editTankTray .edit-tray-done-button { order: 2; margin-left: auto; }
.tank-stage.is-edit-workspace #editTankTray .randomize-gravel-hill-button { position: static; order: 1; }
.tank-stage.is-edit-workspace #editTankTray .edit-tank-custom-storage-meter { flex-basis: 320px; }
.tank-stage.is-edit-workspace #editTankTray .edit-tank-custom-storage-meter .custom-content-storage-meter > div { white-space: normal; font-size: 11px; }
.tank-stage.is-edit-workspace-left-collapsed #editFishTray > :not(.edit-tray-mode-header),
.tank-stage.is-edit-workspace-left-collapsed #editFishTray .edit-workspace-fish-title,
.tank-stage.is-edit-workspace-right-collapsed :is(#editDecorTray, #editEquipmentTray) > :not(.edit-tray-mode-header),
.tank-stage.is-edit-workspace-right-collapsed :is(#editDecorTray, #editEquipmentTray) .edit-overlay-mode-tabs { display: none !important; }
.tank-stage.is-edit-workspace-left-collapsed #editFishTray,
.tank-stage.is-edit-workspace-right-collapsed :is(#editDecorTray, #editEquipmentTray) { padding: 8px; }