/* ----------  Design tokens — Diving theme  ---------- */
:root {
  --accent: #18d6e0;            /* bioluminescent cyan */
  --accent-soft: #18d6e022;
  --accent-strong: #0aa3b0;
  --accent-glow: 0 0 18px #18d6e055, 0 0 40px #18d6e022;
  --coral: #ff8a65;             /* coral accent for warm contrast */
  --danger: #ff5c6e;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --transition: 200ms cubic-bezier(.2,.8,.2,1);
  --shadow-sm: 0 1px 2px rgba(2,16,28,.10), 0 2px 8px rgba(2,16,28,.06);
  --shadow-md: 0 4px 14px rgba(2,16,28,.18), 0 14px 40px rgba(2,16,28,.24);
  --shadow-lg: 0 24px 60px rgba(0,8,16,.55);
  --maxw: 1400px;
}

/* DARK theme = ABYSSAL DEPTHS */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #01060c;
  /* Almost no sun reaches the abyss — just a faint cold glow at the very top
     and a deep vignette closing in from the sides */
  --bg-grad:
    radial-gradient(ellipse 60% 30% at 50% -5%, rgba(40, 110, 130, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(0, 0, 0, 0.65) 0%, transparent 55%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, #051a26 0%, #02111b 25%, #010810 60%, #000408 100%);
  --surface:   #061b27;
  --surface-2: #082534;
  --surface-3: #0b3247;
  --border:    #0e3b52;
  --border-soft: #0e3b5266;
  --text:        #c9e8f0;
  --text-muted:  #5d8595;
  --text-faint:  #3a5e6e;
  --hover: #ffffff0a;
  --accent-glow: 0 0 22px rgba(24, 214, 224, 0.55), 0 0 50px rgba(24, 214, 224, 0.25);
}

/* LIGHT theme = SUNLIT SURFACE (shallow water just below the surface) */
[data-theme="light"] {
  color-scheme: light;
  --accent: #00b4cc;            /* clear lagoon turquoise */
  --accent-soft: #00b4cc18;
  --accent-strong: #008fa3;
  --accent-glow: 0 0 16px rgba(0, 180, 204, 0.35), 0 0 40px rgba(0, 180, 204, 0.15);
  --bg: #cdf0fa;
  /* Sun shining down through clear water — bright at top, slightly deeper turquoise below */
  --bg-grad:
    radial-gradient(ellipse 70% 45% at 50% -10%, rgba(255, 255, 230, 0.65) 0%, transparent 65%),
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 255, 255, 0.75) 0%, transparent 50%),
    linear-gradient(180deg, #f3fdff 0%, #c8eef7 35%, #a8e0ee 70%, #7ec9dd 100%);
  --surface:   #ffffff;
  --surface-2: #f0fbfd;
  --surface-3: #d8f1f7;
  --border:    #a8d8e2;
  --border-soft: #a8d8e266;
  --text:        #033845;
  --text-muted:  #3e7180;
  --text-faint:  #6a98a5;
  --hover: #0000000a;
  --shadow-sm: 0 1px 2px rgba(2,80,100,.06), 0 2px 8px rgba(2,80,100,.05);
  --shadow-md: 0 4px 14px rgba(2,80,100,.10), 0 14px 40px rgba(2,80,100,.12);
}

/* ----------  Base  ---------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ----------  Ocean decorative layers  ---------- */
.ocean {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* SURFACE — at depth: invisible. At the surface: a vivid shimmering water-line. */
.ocean .surface {
  position: absolute;
  inset: 0 0 auto 0;
  height: 30vh;
  pointer-events: none;
  animation: surfaceSway 12s ease-in-out infinite alternate;
}
[data-theme="dark"] .ocean .surface {
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(70, 150, 175, 0.10) 0%, transparent 70%);
  opacity: .5;
}
/* Light = under the surface looking up: bright wavy band of sky */
[data-theme="light"] .ocean .surface {
  height: 90px;
  background:
    /* Sun glints reflecting on the underside of the water */
    radial-gradient(ellipse 14% 60% at 30% 35%, rgba(255,255,240,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 18% 70% at 65% 25%, rgba(255,255,240,0.45) 0%, transparent 60%),
    radial-gradient(ellipse 12% 50% at 88% 45%, rgba(255,255,240,0.4) 0%, transparent 60%),
    /* Wavy water line */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'><path d='M0 45 Q150 15 300 45 T600 45 T900 45 T1200 45 V90 H0 Z' fill='rgba(255,255,255,0.55)'/><path d='M0 60 Q150 30 300 60 T600 60 T900 60 T1200 60 V90 H0 Z' fill='rgba(255,255,255,0.35)'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  filter: blur(.4px);
  opacity: 1;
  mix-blend-mode: screen;
}

@keyframes surfaceSway {
  from { transform: translateX(-2%); }
  to   { transform: translateX(2%); }
}

/* GOD-RAYS — at depth: ghostly. At the surface: brilliant sunbeams piercing through. */
.ocean .rays {
  position: absolute;
  inset: 0 -10% 30% -10%;
  filter: blur(6px);
  animation: rayShift 18s ease-in-out infinite alternate, rayPulse 7s ease-in-out infinite;
  mix-blend-mode: screen;
}
[data-theme="dark"] .ocean .rays {
  background:
    conic-gradient(from 210deg at 40% -10%,
      transparent 0deg, rgba(120,200,220,0.05) 30deg, transparent 60deg,
      transparent 100deg, rgba(120,200,220,0.06) 130deg, transparent 170deg);
  opacity: .55;
  filter: blur(8px);
}
/* Light = strong, warm sunbeams cutting through the water */
[data-theme="light"] .ocean .rays {
  inset: 0 -10% 0 -10%;
  background:
    conic-gradient(from 200deg at 25% -10%,
      transparent 0deg, rgba(255,250,210,0.28) 22deg, transparent 50deg,
      transparent 70deg,  rgba(255,250,210,0.22) 100deg, transparent 130deg,
      transparent 150deg, rgba(255,250,210,0.30) 180deg, transparent 215deg),
    conic-gradient(from 220deg at 70% -10%,
      transparent 0deg, rgba(255,250,210,0.22) 30deg, transparent 60deg,
      transparent 90deg,  rgba(255,250,210,0.30) 125deg, transparent 160deg);
  opacity: .85;
  filter: blur(10px);
}

@keyframes rayShift {
  from { transform: translateX(-3%) skewX(-3deg); }
  to   { transform: translateX(3%)  skewX(3deg); }
}
@keyframes rayPulse {
  0%, 100% { opacity: var(--ray-min, .85); }
  50%      { opacity: 1; }
}

/* CAUSTICS — only in light theme: dancing light patterns on the bottom */
.ocean .caustics {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  background-image:
    radial-gradient(ellipse 90px 30px at 12% 40%, rgba(255,255,240,0.55), transparent 70%),
    radial-gradient(ellipse 70px 22px at 28% 22%, rgba(255,255,240,0.5),  transparent 70%),
    radial-gradient(ellipse 110px 35px at 45% 48%, rgba(255,255,240,0.5),  transparent 70%),
    radial-gradient(ellipse 80px 26px at 62% 25%, rgba(255,255,240,0.55), transparent 70%),
    radial-gradient(ellipse 95px 30px at 80% 50%, rgba(255,255,240,0.45), transparent 70%),
    radial-gradient(ellipse 60px 20px at 92% 30%, rgba(255,255,240,0.4),  transparent 70%),
    radial-gradient(ellipse 100px 32px at 8%  72%, rgba(255,255,240,0.5),  transparent 70%),
    radial-gradient(ellipse 85px 28px at 32% 88%, rgba(255,255,240,0.55), transparent 70%),
    radial-gradient(ellipse 75px 24px at 55% 78%, rgba(255,255,240,0.45), transparent 70%),
    radial-gradient(ellipse 90px 30px at 75% 90%, rgba(255,255,240,0.5),  transparent 70%),
    radial-gradient(ellipse 70px 22px at 95% 80%, rgba(255,255,240,0.4),  transparent 70%);
  filter: blur(1.5px);
  mix-blend-mode: screen;
  animation: causticsDrift 18s ease-in-out infinite alternate, causticsPulse 5s ease-in-out infinite;
}
[data-theme="light"] .ocean .caustics { display: block; }

@keyframes causticsDrift {
  from { transform: translate(-2%, -1%) scale(1); }
  to   { transform: translate(2%,  1%)  scale(1.05); }
}
@keyframes causticsPulse {
  0%, 100% { opacity: .7; filter: blur(1.5px); }
  50%      { opacity: 1;  filter: blur(2px); }
}

@keyframes rayShift {
  from { transform: translateX(-3%) skewX(-3deg); }
  to   { transform: translateX(3%)  skewX(3deg); }
}

/* Heavy abyssal vignette closing in from the edges */
.ocean::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, transparent 45%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%);
}
[data-theme="light"] .ocean::before { display: none; }

/* Marine snow — slow-falling particles, signature of the deep sea */
.ocean::after {
  content: "";
  position: absolute;
  inset: -20% -10% -10% -10%;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='720'><g fill='rgba(220,240,250,0.5)'><circle cx='15' cy='20' r='.6'/><circle cx='80' cy='55' r='.8'/><circle cx='140' cy='15' r='.5'/><circle cx='200' cy='75' r='.9'/><circle cx='260' cy='30' r='.6'/><circle cx='320' cy='90' r='.7'/><circle cx='380' cy='40' r='.5'/><circle cx='440' cy='80' r='.8'/><circle cx='30' cy='130' r='.7'/><circle cx='95' cy='165' r='.5'/><circle cx='160' cy='120' r='.9'/><circle cx='225' cy='180' r='.6'/><circle cx='290' cy='140' r='.7'/><circle cx='355' cy='190' r='.5'/><circle cx='415' cy='150' r='.8'/><circle cx='465' cy='195' r='.6'/><circle cx='20' cy='250' r='.8'/><circle cx='75' cy='280' r='.6'/><circle cx='130' cy='240' r='.7'/><circle cx='195' cy='290' r='.5'/><circle cx='260' cy='250' r='.9'/><circle cx='325' cy='305' r='.6'/><circle cx='385' cy='260' r='.7'/><circle cx='445' cy='300' r='.5'/><circle cx='10' cy='370' r='.6'/><circle cx='65' cy='400' r='.8'/><circle cx='125' cy='370' r='.5'/><circle cx='180' cy='420' r='.7'/><circle cx='245' cy='380' r='.6'/><circle cx='310' cy='415' r='.9'/><circle cx='370' cy='370' r='.5'/><circle cx='435' cy='405' r='.7'/><circle cx='25' cy='490' r='.7'/><circle cx='85' cy='530' r='.5'/><circle cx='150' cy='495' r='.8'/><circle cx='215' cy='540' r='.6'/><circle cx='275' cy='505' r='.9'/><circle cx='335' cy='545' r='.5'/><circle cx='395' cy='510' r='.7'/><circle cx='455' cy='550' r='.6'/><circle cx='5'  cy='620' r='.5'/><circle cx='70' cy='655' r='.8'/><circle cx='135' cy='615' r='.6'/><circle cx='200' cy='670' r='.7'/><circle cx='265' cy='620' r='.5'/><circle cx='330' cy='680' r='.9'/><circle cx='390' cy='630' r='.6'/><circle cx='450' cy='670' r='.7'/></g></svg>");
  background-repeat: repeat;
  opacity: .7;
  animation: snowFall 60s linear infinite;
  filter: blur(.3px);
}
[data-theme="light"] .ocean::after { display: none; }

@keyframes snowFall {
  from { background-position: 0 -720px; }
  to   { background-position: 0 0; }
}

/* Bubbles — three parallax layers using tileable SVG patterns */
.ocean .bubbles {
  position: absolute;
  inset: -50% -10% -10% -10%;
  background-repeat: repeat;
  will-change: transform;
}

/* FAR layer — many tiny distant bubbles (tile 320×560) */
.ocean .bubbles-far {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='560'><g fill='rgba(200,240,250,0.55)'><circle cx='12' cy='40' r='1'/><circle cx='48' cy='90' r='1.4'/><circle cx='90' cy='25' r='1'/><circle cx='130' cy='110' r='1.2'/><circle cx='180' cy='55' r='1'/><circle cx='220' cy='130' r='1.5'/><circle cx='270' cy='30' r='1'/><circle cx='305' cy='95' r='1.2'/><circle cx='25' cy='175' r='1.3'/><circle cx='65' cy='220' r='1'/><circle cx='110' cy='190' r='1.4'/><circle cx='155' cy='240' r='1'/><circle cx='200' cy='200' r='1.2'/><circle cx='245' cy='250' r='1.5'/><circle cx='290' cy='185' r='1'/><circle cx='15' cy='280' r='1.2'/><circle cx='55' cy='320' r='1'/><circle cx='95' cy='295' r='1.4'/><circle cx='140' cy='340' r='1'/><circle cx='185' cy='305' r='1.3'/><circle cx='230' cy='355' r='1'/><circle cx='275' cy='320' r='1.2'/><circle cx='40' cy='400' r='1.4'/><circle cx='85' cy='430' r='1'/><circle cx='125' cy='405' r='1.2'/><circle cx='170' cy='450' r='1'/><circle cx='215' cy='420' r='1.4'/><circle cx='260' cy='460' r='1'/><circle cx='305' cy='415' r='1.2'/><circle cx='20' cy='495' r='1.3'/><circle cx='60' cy='525' r='1'/><circle cx='105' cy='510' r='1.2'/><circle cx='155' cy='540' r='1'/><circle cx='200' cy='510' r='1.4'/><circle cx='250' cy='540' r='1'/><circle cx='295' cy='505' r='1.2'/></g></svg>");
  opacity: .55;
  animation: bubbleRiseFar 28s linear infinite, bubbleSwayA 9s ease-in-out infinite alternate;
}

/* MID layer — medium bubbles, slightly bigger (tile 400×620) */
.ocean .bubbles-mid {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='620'><g fill='rgba(200,245,255,0.18)' stroke='rgba(200,245,255,0.65)' stroke-width='0.7'><circle cx='40' cy='60' r='3'/><circle cx='110' cy='130' r='4'/><circle cx='200' cy='40' r='2.5'/><circle cx='280' cy='110' r='3.5'/><circle cx='360' cy='70' r='3'/><circle cx='60' cy='220' r='4'/><circle cx='140' cy='270' r='3'/><circle cx='220' cy='200' r='3.5'/><circle cx='300' cy='250' r='2.8'/><circle cx='380' cy='220' r='3.2'/><circle cx='30' cy='340' r='3.5'/><circle cx='100' cy='400' r='2.8'/><circle cx='180' cy='360' r='4'/><circle cx='260' cy='420' r='3'/><circle cx='340' cy='380' r='3.5'/><circle cx='80' cy='490' r='3'/><circle cx='160' cy='530' r='4'/><circle cx='250' cy='490' r='2.8'/><circle cx='330' cy='550' r='3.5'/><circle cx='390' cy='510' r='3'/></g></svg>");
  opacity: .7;
  animation: bubbleRiseMid 18s linear infinite, bubbleSwayB 7s ease-in-out infinite alternate;
}

/* NEAR layer — large foreground bubbles (tile 600×800) */
.ocean .bubbles-near {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='800'><g fill='rgba(220,250,255,0.10)' stroke='rgba(220,250,255,0.55)' stroke-width='1'><circle cx='80' cy='120' r='8'/><circle cx='240' cy='80' r='6'/><circle cx='400' cy='160' r='10'/><circle cx='540' cy='90' r='7'/><circle cx='150' cy='320' r='9'/><circle cx='340' cy='280' r='11'/><circle cx='480' cy='340' r='7'/><circle cx='60' cy='480' r='8'/><circle cx='220' cy='520' r='10'/><circle cx='400' cy='480' r='6'/><circle cx='560' cy='540' r='9'/><circle cx='130' cy='670' r='7'/><circle cx='300' cy='720' r='10'/><circle cx='470' cy='680' r='8'/></g><g fill='rgba(255,255,255,0.5)'><circle cx='76' cy='116' r='1.5'/><circle cx='236' cy='77' r='1'/><circle cx='395' cy='155' r='2'/><circle cx='536' cy='86' r='1.2'/><circle cx='146' cy='316' r='1.7'/><circle cx='335' cy='275' r='2.2'/><circle cx='476' cy='337' r='1.3'/><circle cx='56' cy='476' r='1.5'/><circle cx='216' cy='516' r='2'/><circle cx='396' cy='477' r='1'/><circle cx='556' cy='535' r='1.7'/><circle cx='126' cy='667' r='1.3'/><circle cx='296' cy='715' r='2'/><circle cx='466' cy='676' r='1.5'/></g></svg>");
  opacity: .85;
  animation: bubbleRiseNear 12s linear infinite, bubbleSwayA 5s ease-in-out infinite alternate;
}

/* In the sunlit surface, bubbles read brighter against the lighter water */
[data-theme="light"] .ocean .bubbles-far  { opacity: .55; mix-blend-mode: screen; }
[data-theme="light"] .ocean .bubbles-mid  { opacity: .75; mix-blend-mode: screen; }
[data-theme="light"] .ocean .bubbles-near { opacity: .9;  mix-blend-mode: screen; }

/* Seamless rises — distance equals exactly one tile-height per cycle */
@keyframes bubbleRiseFar  { from { background-position: 0 0; } to { background-position: 0 -560px; } }
@keyframes bubbleRiseMid  { from { background-position: 0 0; } to { background-position: 0 -620px; } }
@keyframes bubbleRiseNear { from { background-position: 0 0; } to { background-position: 0 -800px; } }

@keyframes bubbleSwayA {
  from { transform: translateX(-14px); }
  to   { transform: translateX(14px); }
}
@keyframes bubbleSwayB {
  from { transform: translateX(12px); }
  to   { transform: translateX(-16px); }
}

/* Deep-sea creatures: jellyfish drifting upward, a faint distant fish silhouette */
.ocean .fish {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  filter: blur(.4px);
}

/* Jellyfish 1 — large, glowing bell, slow upward drift */
.ocean .fish-1 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 110'><defs><radialGradient id='g' cx='50%' cy='40%' r='55%'><stop offset='0%' stop-color='rgba(140,220,235,0.55)'/><stop offset='100%' stop-color='rgba(140,220,235,0.05)'/></radialGradient></defs><ellipse cx='40' cy='32' rx='30' ry='22' fill='url(%23g)'/><ellipse cx='40' cy='32' rx='30' ry='22' fill='none' stroke='rgba(180,235,250,0.45)' stroke-width='0.8'/><path d='M14 38 Q18 70 12 105' stroke='rgba(180,235,250,0.35)' stroke-width='1.1' fill='none'/><path d='M26 42 Q28 75 22 108' stroke='rgba(180,235,250,0.35)' stroke-width='1.1' fill='none'/><path d='M40 44 Q40 80 38 110' stroke='rgba(180,235,250,0.35)' stroke-width='1.1' fill='none'/><path d='M54 42 Q54 75 60 108' stroke='rgba(180,235,250,0.35)' stroke-width='1.1' fill='none'/><path d='M66 38 Q68 70 70 105' stroke='rgba(180,235,250,0.35)' stroke-width='1.1' fill='none'/></svg>");
  width: 80px;
  height: 110px;
  left: 12%;
  opacity: .55;
  animation: jellyDrift 65s linear infinite, jellyPulse 4s ease-in-out infinite;
}

/* Jellyfish 2 — smaller, on the other side, slower */
.ocean .fish-2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'><defs><radialGradient id='g' cx='50%' cy='40%' r='55%'><stop offset='0%' stop-color='rgba(160,225,240,0.45)'/><stop offset='100%' stop-color='rgba(160,225,240,0.04)'/></radialGradient></defs><ellipse cx='30' cy='24' rx='22' ry='16' fill='url(%23g)'/><ellipse cx='30' cy='24' rx='22' ry='16' fill='none' stroke='rgba(180,235,250,0.4)' stroke-width='0.7'/><path d='M12 28 Q14 52 10 78' stroke='rgba(180,235,250,0.3)' stroke-width='1' fill='none'/><path d='M22 30 Q22 55 18 80' stroke='rgba(180,235,250,0.3)' stroke-width='1' fill='none'/><path d='M30 32 Q30 58 28 80' stroke='rgba(180,235,250,0.3)' stroke-width='1' fill='none'/><path d='M38 30 Q40 55 42 80' stroke='rgba(180,235,250,0.3)' stroke-width='1' fill='none'/><path d='M48 28 Q50 52 52 78' stroke='rgba(180,235,250,0.3)' stroke-width='1' fill='none'/></svg>");
  width: 60px;
  height: 80px;
  left: 78%;
  opacity: .4;
  animation: jellyDrift 90s linear infinite -25s, jellyPulse 5s ease-in-out infinite;
}

/* Faint distant fish silhouette — barely visible */
.ocean .fish-3 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'><path d='M5 14 Q18 4 38 8 L56 2 L52 14 L56 26 L38 20 Q18 24 5 14 Z' fill='rgba(120,180,200,0.45)'/></svg>");
  width: 32px;
  height: 16px;
  top: 55%;
  opacity: .25;
  animation: swimAcross 95s linear infinite 18s, fishBob 6s ease-in-out infinite alternate;
}

/* Light theme = surface: jellyfish gone, only a faint distant fish remains */
[data-theme="light"] .ocean .fish-1,
[data-theme="light"] .ocean .fish-2 { display: none; }
[data-theme="light"] .ocean .fish-3 { opacity: .35; }

/* Slow upward drift across the whole height */
@keyframes jellyDrift {
  from { bottom: -15%; }
  to   { bottom: 110%; }
}
@keyframes jellyPulse {
  0%, 100% { transform: scaleY(1)    scaleX(1);    filter: blur(.4px); }
  50%      { transform: scaleY(0.92) scaleX(1.06); filter: blur(.4px); }
}

@keyframes swimAcross {
  from { left: -10%; }
  to   { left: 110%; }
}
@keyframes fishBob {
  from { margin-top: -10px; }
  to   { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ocean *, .ocean { animation: none !important; }
}

/* ----------  Adaptive performance levels  ----------
   Applied automatically by JS based on hardware hints + live FPS monitoring.
   Each level progressively drops the most expensive decorative layers. */

/* MEDIUM: drop the largest bubble layer, the smallest fish, and caustics.
   Slow down what remains so the GPU has more breathing room. */
body.perf-medium .ocean .bubbles-near,
body.perf-medium .ocean .fish-3,
body.perf-medium .ocean .caustics,
body.perf-medium .ocean::after { display: none; }
body.perf-medium .ocean .bubbles-far  { animation-duration: 60s, 14s; }
body.perf-medium .ocean .bubbles-mid  { animation-duration: 40s, 11s; }

/* LOW: kill the entire decorative ocean. Keep page transitions for UX. */
body.perf-low .ocean { display: none; }

/* MINIMAL: no animations or transitions anywhere — equivalent to
   prefers-reduced-motion. Used when the device is genuinely struggling
   or the OS asked for reduced motion. */
body.perf-minimal .ocean { display: none; }
body.perf-minimal,
body.perf-minimal *,
body.perf-minimal *::before,
body.perf-minimal *::after {
  animation: none !important;
  transition: none !important;
}

/* Keep page content above decorative layers */
.topbar, .board, .empty, dialog, .toast { position: relative; z-index: 1; }
.topbar { z-index: 50; }
dialog { z-index: 100; }
.toast { z-index: 200; }

button { font: inherit; color: inherit; cursor: pointer; }
input, button, textarea, select { font: inherit; }

::selection { background: var(--accent-soft); color: var(--text); }

/* ----------  Topbar  ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(16px, 3vw, 32px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--border-soft);
}

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

.logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.logo:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.logo img { width: 100%; height: 100%; object-fit: cover; }
.logo svg { width: 26px; height: 26px; fill: #fff; }

.title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  outline: none;
  border-radius: 8px;
  padding: 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
  transition: background var(--transition), box-shadow var(--transition);
}
body.edit-mode .title {
  border-bottom: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  cursor: text;
}
body.edit-mode .title:hover {
  background: var(--accent-soft);
  border-bottom-style: solid;
}
.title:focus {
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent);
  border-bottom-color: transparent;
}

/* Search */
.search {
  position: relative;
  max-width: 520px;
  width: 100%;
  justify-self: center;
}
.search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: var(--text-faint);
  pointer-events: none;
}
.search input {
  width: 100%;
  padding: 10px 44px 10px 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.search input:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.search kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 7px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}

/* Actions */
.actions { display: flex; align-items: center; gap: 8px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--text);
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
  user-select: none;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; fill: currentColor; }
.btn:hover { background: var(--surface-3); }
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px -8px var(--accent);
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.ghost:hover { background: var(--hover); }
.btn.danger {
  background: var(--danger);
  color: #fff;
  border-color: transparent;
}
.btn.danger:hover { filter: brightness(1.08); }
.btn.icon-only { padding: 9px; }
.btn.small { padding: 6px 10px; font-size: 13px; border-radius: 8px; }

.menu-wrap { position: relative; }
.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  z-index: 100;
  animation: pop .14s ease-out;
}
.menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text);
  text-align: left;
}
.menu button svg { width: 16px; height: 16px; fill: var(--text-muted); flex: none; }
.menu button:hover { background: var(--hover); }

@keyframes pop {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ----------  Board / categories  ---------- */
.board {
  max-width: var(--maxw);
  margin: 28px auto;
  padding: 0 clamp(16px, 3vw, 32px) 60px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.empty {
  text-align: center;
  color: var(--text-muted);
  margin: 60px auto;
  padding: 0 24px;
}

.category {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 96%, transparent) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.category.dragging { opacity: .5; }
.category.drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.category-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.drag-handle {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--text-faint);
  cursor: grab;
  transition: color var(--transition), background var(--transition);
  flex: none;
}
.drag-handle:hover { color: var(--text); background: var(--hover); }
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { width: 16px; height: 16px; fill: currentColor; }

.category-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  flex: 1;
  outline: none;
  padding: 4px 8px;
  border-radius: 8px;
  min-width: 50px;
  transition: background var(--transition), box-shadow var(--transition);
}
body.edit-mode .category-name {
  border-bottom: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  cursor: text;
}
body.edit-mode .category-name:hover {
  background: var(--accent-soft);
  border-bottom-style: solid;
}
.category-name:focus {
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent);
  border-bottom-color: transparent;
}

.category-count {
  font-size: 12px;
  color: var(--text-faint);
  padding: 2px 8px;
  background: var(--surface-2);
  border-radius: 999px;
}

.category-actions { display: flex; gap: 4px; }
.icon-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}
.icon-btn svg { width: 15px; height: 15px; fill: currentColor; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.danger:hover { color: var(--danger); }

/* Bookmarks grid */
.bookmarks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  min-height: 96px;
}

.bookmarks.drop-target::after {
  content: "";
  display: block;
  grid-column: 1 / -1;
  height: 88px;
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.bookmark {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--surface-2) 92%, transparent),
    color-mix(in srgb, var(--surface) 96%, transparent));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), background var(--transition),
              border-color var(--transition), box-shadow var(--transition);
  overflow: hidden;
  min-height: 86px;
}
.bookmark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 0%, var(--accent-soft), transparent 50%),
    linear-gradient(135deg, var(--accent-soft), transparent 60%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.bookmark:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-soft);
}
.bookmark:hover::before { opacity: 1; }
.bookmark:hover .bk-icon { box-shadow: var(--accent-glow); }
.bookmark.dragging { opacity: .4; }
.bookmark.drop-before { box-shadow: -3px 0 0 var(--accent); }
.bookmark.drop-after  { box-shadow: 3px 0 0 var(--accent); }

.bk-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #062734;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  flex: none;
  overflow: hidden;
  font-size: 20px;
  letter-spacing: -.02em;
  transition: box-shadow var(--transition), transform var(--transition);
}
/* When the icon is an image, drop the cyan fallback so the icon's own design is preserved */
.bk-icon:has(img) { background: transparent; }
.bk-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bk-text { min-width: 0; flex: 1; }
.bk-title {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-desc {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.bk-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;        /* only visible in edit mode */
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--transition), transform var(--transition);
}
body.edit-mode .bk-actions { display: flex; }
.bookmark:hover .bk-actions { opacity: 1; transform: translateY(0); }
.bk-actions .icon-btn {
  width: 28px;
  height: 28px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(6px);
}
.bk-actions .icon-btn svg { width: 14px; height: 14px; }

.add-bookmark {
  display: none;        /* only visible in edit mode */
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--text-muted);
  background: transparent;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  min-height: 86px;
}
body.edit-mode .add-bookmark { display: flex; }
.add-bookmark:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.add-bookmark svg { width: 18px; height: 18px; fill: currentColor; }

/* Drag affordances are off when not editing */
.drag-handle { display: none; }
body.edit-mode .drag-handle { display: grid; }
body.edit-mode .bookmark { cursor: grab; }
body.edit-mode .bookmark:active { cursor: grabbing; }

/* Same for category-level edit affordances */
.category-actions { display: none; }
body.edit-mode .category-actions { display: flex; }

/* Add-category button only in edit mode */
#addCategoryBtn { display: none; }
body.edit-mode #addCategoryBtn { display: inline-flex; }

/* Edit-mode visual cue */
body.edit-mode .category {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
body.edit-mode .category-name:hover,
body.edit-mode .title:hover {
  background: var(--hover);
  cursor: text;
}

/* Edit-toggle button states */
#editToggleBtn .icon-locked,
#editToggleBtn .icon-unlocked { transition: opacity var(--transition); }
body:not(.edit-mode) #editToggleBtn .icon-unlocked { display: none; }
body.edit-mode #editToggleBtn .icon-locked { display: none; }
body.edit-mode #editToggleBtn {
  background: var(--accent);
  color: #052026;
  border-color: transparent;
  box-shadow: var(--accent-glow);
}
body.edit-mode #editToggleBtn:hover { filter: brightness(1.05); }

/* Hidden when filtered out */
.bookmark.hidden, .category.hidden { display: none; }

/* ----------  Dialog  ---------- */
dialog.dialog {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  width: min(92vw, 460px);
  max-width: 92vw;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
dialog.dialog::backdrop {
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
}
dialog.dialog[open] {
  animation: dialogIn .18s ease-out;
}
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

dialog.dialog form { display: contents; }
dialog.dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 6px;
}
dialog.dialog header h2 { margin: 0; font-size: 16px; font-weight: 600; }
dialog.dialog .close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 8px;
}
dialog.dialog .close:hover { background: var(--hover); color: var(--text); }

.dialog-body {
  padding: 14px 20px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dialog-body label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--text-muted);
}
.dialog-body input[type="text"],
.dialog-body input[type="url"],
.dialog-body input:not([type]) {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.dialog-body input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.dialog-body label.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  user-select: none;
}
.dialog-body label.checkbox:hover { border-color: var(--accent); background: var(--accent-soft); }
.dialog-body label.checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  flex: none;
  margin: 0;
}
.dialog-body label.checkbox input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}
.dialog-body label.checkbox input[type="checkbox"]:checked::after {
  content: "";
  width: 6px;
  height: 10px;
  border: solid #052026;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.icon-picker {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
}
.icon-picker legend {
  font-size: 13px;
  color: var(--text-muted);
  padding: 0 6px;
}
.icon-preview {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.icon-preview:has(img:not([hidden])) { background: transparent; }
.icon-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.icon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

dialog.dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
}

dialog.confirm { width: min(92vw, 380px); }
dialog.confirm header { padding: 22px 22px 6px; }
dialog.confirm footer { padding: 16px 22px 18px; }

/* ----------  Toast  ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 200;
  max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--danger); color: var(--danger); }

/* ----------  Responsive  ---------- */
@media (max-width: 760px) {
  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand actions" "search search";
    gap: 10px;
    padding: 10px 14px;
  }
  .brand { grid-area: brand; min-width: 0; }
  .actions { grid-area: actions; }
  .search { grid-area: search; max-width: none; }
  .search input { padding: 11px 44px 11px 38px; }
  .search kbd { display: none; }
  .title { max-width: 100%; font-size: 16px; }
  .actions .btn span { display: none; }
  .actions .btn { padding: 10px; min-width: 40px; min-height: 40px; }
  .menu { right: -4px; min-width: 200px; }
  .menu button { padding: 12px 12px; }

  .board {
    margin: 16px auto;
    padding: 0 12px 80px;
    gap: 18px;
  }
  .category {
    border-radius: 18px;
    padding: 14px 14px 18px;
  }
  .category-head { gap: 8px; margin-bottom: 12px; }
  .drag-handle { width: 30px; height: 30px; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn svg { width: 17px; height: 17px; }
  .bk-actions .icon-btn { width: 30px; height: 30px; }
  .bk-actions .icon-btn svg { width: 14px; height: 14px; }

  .bookmarks {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
  }
  .bookmark { min-height: 78px; padding: 14px; gap: 14px; }
  .bk-icon { width: 44px; height: 44px; border-radius: 11px; font-size: 18px; }
  .bk-title { font-size: 15px; }

  /* Reveal action buttons by default on touch (no hover) */
  .bk-actions { opacity: 1; transform: none; }

  .add-bookmark { min-height: 78px; padding: 14px; }
}

@media (max-width: 460px) {
  .bookmarks {
    grid-template-columns: 1fr;
  }
  .bookmark { padding: 14px 16px; min-height: 80px; }
  .bk-icon { width: 46px; height: 46px; }
}

/* Full-screen-feel dialog on phones */
@media (max-width: 540px) {
  dialog.dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    border-radius: 18px 18px 0 0;
    position: fixed;
    bottom: 0;
    top: auto;
    animation: dialogSlideUp .22s ease-out;
  }
  dialog.dialog header { padding: 16px 18px 4px; }
  .dialog-body { padding: 12px 18px 4px; max-height: calc(100dvh - 180px); overflow-y: auto; }
  dialog.dialog footer { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
  .dialog-body input { padding: 12px 14px; font-size: 16px; /* prevents iOS zoom */ }
}

@keyframes dialogSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Devices without hover: always show bookmark actions */
@media (hover: none) {
  .bk-actions { opacity: 1; transform: none; }
  .bookmark { cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}