/* DockEasy — palette, typography, glass system, Leaflet map skin */
:root {
  --petrol: #0B3C49;
  --teal: #137A86;
  --seaglass: #3FC1C9;
  --coral: #F0654A;
  --sand: #E9DCC3;
  --sail: #F7F5F0;
  --ink: #15252B;
  --mist: #6B7B80;
}
html { scroll-behavior: smooth; }
body {
  background: var(--sail);
  color: var(--ink);
  font-family: 'Satoshi', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  opacity: 0;
}
body.app-ready { opacity: 1; transition: opacity 0.45s ease; }
::selection { background: rgba(63,193,201,0.35); }

/* ---------- Liquid glass — light theme (frosted on Sail) ---------- */
.glass {
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(19,122,134,0.14);
  box-shadow: 0 1px 2px rgba(21,37,43,0.05), inset 0 1px 0 rgba(255,255,255,0.7);
  position: relative;
  overflow: hidden;
}
.glass-strong {
  background: rgba(255,255,255,0.74);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  border: 1px solid rgba(19,122,134,0.16);
  box-shadow: 0 8px 28px -12px rgba(11,60,73,0.18), inset 0 1px 0 rgba(255,255,255,0.85);
  position: relative;
  overflow: hidden;
}
/* Glass on the dark petrol band */
.glass-dark {
  background: rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

/* ---------- Leaflet marina map skin ---------- */
.marina-map { background: var(--petrol); }
.marina-map .leaflet-tile {
  filter: sepia(0.55) hue-rotate(150deg) saturate(1.05) brightness(0.82) contrast(0.98);
}
.marina-map .leaflet-container { background: var(--petrol); outline: none; }
.marina-map .leaflet-control-attribution {
  background: rgba(11,60,73,0.6);
  color: rgba(255,255,255,0.5);
  font-family: 'Satoshi', sans-serif;
  font-size: 10px;
  backdrop-filter: blur(6px);
}
.marina-map .leaflet-control-attribution a { color: rgba(63,193,201,0.85); }
.marina-map .leaflet-control-zoom a {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
}
.marina-map .leaflet-control-zoom a:hover { background: rgba(63,193,201,0.25); }

.marina-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--seaglass);
  box-shadow: 0 0 0 4px rgba(63,193,201,0.18), 0 0 14px 2px rgba(63,193,201,0.55);
  animation: dotPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.marina-dot.hl {
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(240,101,74,0.20), 0 0 16px 3px rgba(240,101,74,0.6);
}
@keyframes dotPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

.marina-tip {
  background: rgba(11,60,73,0.92);
  color: #fff;
  border: 1px solid rgba(63,193,201,0.4);
  border-radius: 10px;
  padding: 6px 10px;
  font-family: 'Satoshi', sans-serif;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
}
.marina-tip::before { display: none; }
.marina-tip .tip-name { font-weight: 600; font-size: 13px; }
.marina-tip .tip-city { font-size: 11px; color: rgba(255,255,255,0.6); }