.theme-coastal-slate .topbar {
  background:
    linear-gradient(180deg, rgba(var(--coastal-header-rgb, 9,16,27), 0.68), rgba(var(--coastal-header-rgb, 9,16,27), var(--coastal-header-end-alpha, 0.06))),
    transparent;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theme-coastal-slate .brand,
.theme-coastal-slate .brand span {
  color: var(--brand-text, var(--topbar-text));
}

.theme-coastal-slate {
  color: var(--coastal-text, #f4f8ff);
}

.theme-coastal-slate .app-shell {
  position: relative;
  isolation: isolate;
}

.theme-coastal-slate .app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(var(--coastal-overlay-rgb, 14,22,34), calc(var(--coastal-bg-opacity, 0.24) + 0.2)), rgba(var(--coastal-overlay-rgb, 14,22,34), var(--coastal-bg-opacity, 0.24))),
    var(--coastal-bg-image, none) center / cover no-repeat fixed,
    linear-gradient(160deg, var(--bg-a), var(--bg-b));
}

.theme-coastal-slate.coastal-texture-grain .app-shell::after,
.theme-coastal-slate.coastal-texture-grid .app-shell::after,
.theme-coastal-slate.coastal-texture-linen .app-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.18;
}

.theme-coastal-slate.coastal-texture-grain .app-shell::after {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12) 0, rgba(255,255,255,0.02) 1px, transparent 2px),
    radial-gradient(circle at 80% 40%, rgba(0,0,0,0.09) 0, rgba(0,0,0,0.02) 1px, transparent 2px);
  background-size: 4px 4px, 5px 5px;
}

.theme-coastal-slate.coastal-texture-grid .app-shell::after {
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 26px 26px;
}

.theme-coastal-slate.coastal-texture-linen .app-shell::after {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 5px);
}

.theme-coastal-slate.coastal-tone-light.coastal-texture-grain .app-shell::after,
.theme-coastal-slate.coastal-tone-light.coastal-texture-grid .app-shell::after,
.theme-coastal-slate.coastal-tone-light.coastal-texture-linen .app-shell::after {
  opacity: 0.32;
}

.theme-coastal-slate.coastal-tone-light.coastal-texture-grain .app-shell::after {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(31,47,70,0.08) 0, rgba(31,47,70,0.02) 1px, transparent 2px),
    radial-gradient(circle at 78% 44%, rgba(122,90,47,0.06) 0, rgba(122,90,47,0.02) 1px, transparent 2px);
  background-size: 4px 4px, 5px 5px;
}

.theme-coastal-slate.coastal-tone-light.coastal-texture-grid .app-shell::after {
  background-image:
    linear-gradient(rgba(31,47,70,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,47,70,0.08) 1px, transparent 1px);
  background-size: 26px 26px;
}

.theme-coastal-slate.coastal-tone-light.coastal-texture-linen .app-shell::after {
  background-image:
    repeating-linear-gradient(0deg, rgba(31,47,70,0.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(122,90,47,0.05) 0 1px, transparent 1px 5px);
}

.theme-coastal-slate .card {
  background: rgba(var(--coastal-surface-rgb, 255,255,255), var(--coastal-surface-alpha, 0.9));
  color: var(--coastal-card-text, #16283d);
}

.theme-coastal-slate .helper-text,
.theme-coastal-slate .badge,
.theme-coastal-slate .breadcrumbs,
.theme-coastal-slate label {
  color: var(--coastal-muted-text, #3f536a);
}

.theme-coastal-slate.coastal-tone-light .card {
  color: #16283d;
}

.theme-coastal-slate.coastal-tone-light .helper-text,
.theme-coastal-slate.coastal-tone-light .badge,
.theme-coastal-slate.coastal-tone-light .breadcrumbs,
.theme-coastal-slate.coastal-tone-light label {
  color: #334a63;
}

.theme-coastal-slate .card {
  border-radius: 10px;
  border: 1px solid rgba(16, 35, 56, 0.12);
  box-shadow: 0 14px 34px rgba(16, 35, 56, 0.14);
}

.theme-coastal-slate .card h1,
.theme-coastal-slate .card h2,
.theme-coastal-slate .card h3,
.theme-coastal-slate .card h4,
.theme-coastal-slate .card h5,
.theme-coastal-slate .card h6 {
  color: inherit;
}

.theme-coastal-slate .content-screen article,
.theme-coastal-slate .content-screen article h3,
.theme-coastal-slate .content-screen article p,
.theme-coastal-slate .content-screen article li {
  color: inherit;
}

.theme-coastal-slate .tab,
.theme-coastal-slate .chip {
  border-radius: 8px;
  border-color: rgba(180, 202, 232, 0.55);
}

.theme-coastal-slate .tab {
  background: rgba(255, 255, 255, 0.08);
}

.theme-coastal-slate .tabbar .tab {
  background: rgba(255, 255, 255, 0.08);
}

.theme-coastal-slate .tab.active {
  background: var(--tab-active-bg);
  color: var(--tab-active-text);
}

.theme-coastal-slate .more-card .tab,
.theme-coastal-slate .nav-dropdown-card .tab,
.theme-coastal-slate .nav-submenu .tab,
.theme-coastal-slate .more-item {
  background: rgba(255, 255, 255, 0.96);
  color: #1f2f46;
  border-color: rgba(180, 202, 232, 0.55);
}

.theme-coastal-slate.coastal-tone-dark .more-card .tab,
.theme-coastal-slate.coastal-tone-dark .nav-dropdown-card .tab,
.theme-coastal-slate.coastal-tone-dark .nav-submenu .tab,
.theme-coastal-slate.coastal-tone-dark .more-item {
  background: rgba(27, 39, 58, 0.98);
  color: #edf4ff;
  border-color: rgba(195, 210, 232, 0.28);
}

.theme-coastal-slate .manzana-label,
.theme-coastal-slate .manzana-icon-card-title,
.theme-coastal-slate .manzana-modal-head h2,
.theme-coastal-slate .manzana-modal-subtitle,
.theme-coastal-slate .manzana-search-result-title,
.theme-coastal-slate .manzana-search-result-meta {
  color: #1f2f46 !important;
}

.theme-coastal-slate .manzana-modal-panel {
  background: rgba(255, 255, 255, 0.98);
}

.theme-coastal-slate .site-footer a,
.theme-coastal-slate .site-footer {
  color: var(--footer-text);
}

.theme-coastal-slate.coastal-hero-cinematic .hero .hero-media {
  min-height: 540px;
}

.theme-coastal-slate.coastal-hero-cinematic .hero .hero-image {
  transform: scale(1.08);
  filter: saturate(1.05) contrast(1.05);
}

.theme-coastal-slate.coastal-hero-soft .hero .hero-media {
  min-height: 480px;
}

.theme-coastal-slate.coastal-hero-soft .hero .hero-image {
  transform: scale(1.03);
  filter: saturate(0.9) brightness(1.04);
}

.coastal-nav-toggle {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 9;
  width: auto;
  min-width: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(192, 210, 235, 0.55);
  background: rgba(25, 42, 64, 0.88);
  color: #fff;
}

.coastal-nav-drawer {
  position: fixed;
  left: auto;
  right: 14px;
  width: min(360px, calc(100vw - 24px));
  bottom: calc(62px + env(safe-area-inset-bottom));
  z-index: 8;
  background: rgba(20, 34, 52, 0.96);
  color: #f3f8ff;
  border: 1px solid rgba(195, 210, 232, 0.32);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(10, 18, 30, 0.38);
  padding: 14px;
  display: none;
  max-height: min(70vh, 540px);
  overflow: auto;
}

.coastal-nav-drawer.open {
  display: block;
}

.coastal-nav-drawer-list {
  display: grid;
  gap: 8px;
}

.coastal-nav-drawer-list .tab {
  width: 100%;
  justify-content: flex-start;
  max-width: none;
  color: #e6f2ff;
  border-color: rgba(195, 210, 232, 0.35);
  background: rgba(255, 255, 255, 0.06);
}

.coastal-nav-drawer a {
  color: #e6f2ff;
}

.theme-coastal-slate.coastal-footer-drawer-enabled .app-shell.nav-bottom > .tabbar {
  display: none;
}

@media (max-width: 900px) {
  .coastal-nav-drawer {
    right: 8px;
    bottom: calc(70px + env(safe-area-inset-bottom));
  }
}