/* Zanzibar Pocket - warstwa wizualna.
   Kolory zdjęte z grafik: turkus laguny, granat, hibiskus, piasek.
   Font Caveat (SIL Open Font License) osadzony lokalnie - nic nie leci do sieci. */

@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(img/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(img/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ocean: #0f6b7d;
  --ocean2: #17919f;
  --aqua: #5ccbd6;
  --navy: #123a4a;
  --coral: #e8543f;
  --sand: #f7e6c9;
  --leaf: #2f8f4e;
  --bg: #eef6f8;
  --card: #ffffff;
  --tint: #e4f4f6;
  --ink: #123a4a;
  --ink-soft: #5c7a83;
  --line: #dbeaee;
  --shadow: 0 2px 6px rgba(18,58,74,.05), 0 12px 26px rgba(18,58,74,.07);
  --r: 20px;
  --r-sm: 14px;
  --tabh: 66px;
}
[data-theme="dark"] {
  --ocean: #4ec3d4; --ocean2: #6fd6e2; --aqua: #8fe3ec; --navy: #d8eef2;
  --coral: #ff7a5c; --sand: #3a3121; --leaf: #57c885;
  --bg: #0b171b; --card: #14252b; --tint: #16323a;
  --ink: #e8f4f6; --ink-soft: #93b0b8; --line: #21383f;
  --shadow: 0 2px 6px rgba(0,0,0,.28), 0 12px 26px rgba(0,0,0,.34);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ocean: #4ec3d4; --ocean2: #6fd6e2; --aqua: #8fe3ec; --navy: #d8eef2;
    --coral: #ff7a5c; --sand: #3a3121; --leaf: #57c885;
    --bg: #0b171b; --card: #14252b; --tint: #16323a;
    --ink: #e8f4f6; --ink-soft: #93b0b8; --line: #21383f;
    --shadow: 0 2px 6px rgba(0,0,0,.28), 0 12px 26px rgba(0,0,0,.34);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* atrybut hidden musi wygrywać z display:flex/grid ustawionym niżej */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--tabh) + env(safe-area-inset-bottom));
  overscroll-behavior-y: none;
}
h1, h2, h3 { line-height: 1.25; margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--ocean); }
.script { font-family: 'Caveat', 'Segoe Script', cursive; font-weight: 600; }

/* ---------- header ---------- */
header {
  position: sticky; top: 0; z-index: 30;
  padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(120deg, #0a4f5e 0%, #0f6b7d 45%, #17919f 100%);
  color: #fff; box-shadow: 0 4px 18px rgba(10,60,72,.28);
}
header .logo { width: 36px; height: 36px; flex: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.25)); }
header .ttl { flex: 1; min-width: 0; }
header h1 { font-size: 18px; font-weight: 800; letter-spacing: .2px; }
header h1 span { color: var(--aqua); }
header .sub { font-size: 11.5px; opacity: .9; margin-top: 1px; }
header button {
  background: rgba(255,255,255,.18); border: 0; color: #fff;
  width: 38px; height: 38px; border-radius: 12px; font-size: 17px; cursor: pointer; flex: none;
}
header button:active { background: rgba(255,255,255,.32); }

/* ---------- layout ---------- */
main { padding: 14px 14px 26px; max-width: 720px; margin: 0 auto; }
section[hidden] { display: none !important; }
.card {
  background: var(--card); border-radius: var(--r);
  padding: 16px; margin-bottom: 13px; box-shadow: var(--shadow);
}
.card h2 {
  font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 12px;
  display: flex; align-items: center; gap: 9px;
}
.card h2 img { width: 30px; height: 30px; flex: none; }
.muted { color: var(--ink-soft); font-size: 13.5px; }
.hint {
  font-size: 13px; color: var(--ink-soft); background: var(--tint);
  border-radius: 12px; padding: 10px 12px; margin-top: 11px;
}
.hint b { color: var(--ink); }
.warn { background: rgba(232,84,63,.1); color: #a03a25; }
[data-theme="dark"] .warn { color: #ffb49e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .warn { color: #ffb49e; } }

/* ---------- hero ---------- */
.hero {
  position: relative; height: 152px; border-radius: 22px; overflow: hidden;
  margin-bottom: 14px; display: flex; align-items: flex-end; padding: 15px 17px;
  color: #fff; box-shadow: var(--shadow); isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--img); background-size: cover; background-position: center;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* pionowy cień pod tekst + poziomy od lewej, bo zdjęcia bywają jasne w tym rogu */
  background:
    linear-gradient(180deg, rgba(6,45,56,0) 30%, rgba(6,45,56,.8) 100%),
    linear-gradient(90deg, rgba(6,45,56,.55) 0%, rgba(6,45,56,.1) 55%, rgba(6,45,56,0) 100%);
}
.hero h2 { font-size: 25px; font-weight: 800; text-shadow: 0 2px 12px rgba(0,20,26,.5); }
.hero .script { font-size: 20px; margin-top: 1px; text-shadow: 0 2px 10px rgba(0,20,26,.55); }

/* ---------- tabs ---------- */
nav.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 20px rgba(18,58,74,.07);
}
nav.tabs button {
  border: 0; background: none; padding: 7px 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 9.5px; color: var(--ink-soft); height: var(--tabh); justify-content: center;
}
nav.tabs button img { width: 27px; height: 27px; filter: grayscale(.35) opacity(.8); transition: .2s; }
nav.tabs button.on { color: var(--ocean); font-weight: 700; }
nav.tabs button.on img { filter: none; transform: translateY(-2px) scale(1.12); }

/* ---------- przypływy ---------- */
.tide-now { text-align: center; padding: 20px 16px 18px; }
.tide-state { font-size: 14.5px; color: var(--ink-soft); }
.tide-big { font-size: 46px; font-weight: 800; letter-spacing: -1.5px; margin: 2px 0 4px; color: var(--ocean); }
.tide-big small { font-size: 16px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.gauge { height: 14px; border-radius: 99px; background: var(--tint); overflow: hidden; margin: 14px 0 6px; }
.gauge > div { height: 100%; background: linear-gradient(90deg, var(--aqua), var(--ocean2)); border-radius: 99px; transition: width .5s; }
.gauge-lbl { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-soft); }
.nextev { display: flex; gap: 10px; margin-top: 15px; }
.nextev div { flex: 1; background: var(--tint); border-radius: 16px; padding: 11px 8px; text-align: center; }
.nextev b { display: block; font-size: 22px; font-weight: 800; color: var(--ink); }
.nextev span { font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.nextev small { font-size: 11.5px; color: var(--ink-soft); }
.day-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.day-row:last-child { border: 0; }
.day-row .dt { width: 76px; font-size: 13px; color: var(--ink-soft); flex: none; font-weight: 600; }
.day-row .evs { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 12.5px; padding: 4px 10px; border-radius: 99px; white-space: nowrap; font-weight: 600; }
.pill.hw { background: var(--ocean); color: #fff; }
.pill.lw { background: var(--sand); color: #8a6520; }
[data-theme="dark"] .pill.lw { color: #e6cb95; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.lw { color: #e6cb95; } }

/* ---------- formularze ---------- */
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ocean2); outline-offset: -1px; }
label { display: block; font-size: 12.5px; color: var(--ink-soft); margin: 11px 0 4px; font-weight: 700; }
.row { display: flex; gap: 9px; }
.row > * { flex: 1; }
.btn {
  border: 0; border-radius: var(--r-sm); padding: 13px 15px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, var(--ocean), var(--ocean2)); color: #fff; width: 100%;
  box-shadow: 0 4px 12px rgba(15,107,125,.25);
}
[data-theme="dark"] .btn:not(.sec):not(.ghost) { color: #06222a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:not(.sec):not(.ghost) { color: #06222a; } }
.btn:active { transform: translateY(1px); }
.btn.sec { background: var(--tint); color: var(--ocean); box-shadow: none; }
.btn.ghost { background: none; border: 1.5px solid var(--line); color: var(--ink-soft); box-shadow: none; }
.btn.mini { width: auto; padding: 10px 14px; font-size: 14px; }

/* ---------- rozmówki ---------- */
.search { position: sticky; top: 68px; z-index: 20; background: var(--bg); padding: 2px 0 10px; }
.chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 11px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  border: 0; background: var(--card); border-radius: 99px; color: var(--ink-soft);
  padding: 9px 15px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 8px rgba(18,58,74,.06);
}
.chip.on { background: linear-gradient(135deg, var(--ocean), var(--ocean2)); color: #fff; }
.ph { padding: 11px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.ph:last-child { border: 0; }
.ph-pl { flex: 1; min-width: 0; font-size: 14.5px; color: var(--ink-soft); }
.ph-pl b { font-weight: 600; }
.ph-sw { flex: 1.05; min-width: 0; }
.ph-sw b { font-size: 16.5px; font-weight: 800; color: var(--ink); }
.ph-sw .pron { font-size: 12.5px; color: var(--coral); font-weight: 700; }
.ph-act { flex: none; display: flex; gap: 4px; align-items: center; }
.ph .say {
  flex: none; border: 0; background: var(--tint); color: var(--ocean); border-radius: 13px;
  width: 42px; height: 42px; font-size: 18px; cursor: pointer;
}
.fav { flex: none; background: none; border: 0; font-size: 20px; cursor: pointer; opacity: .25; padding: 6px 2px; color: var(--ink-soft); }
.fav.on { opacity: 1; color: #f0a92c; }

/* ---------- kasa ---------- */
.conv { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.conv label { margin: 0; width: 54px; flex: none; font-size: 15px; color: var(--ink); font-weight: 800; }
.conv input { font-size: 19px; font-weight: 700; text-align: right; }
.exp { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.exp .who { flex: 1; }
.exp .who b { display: block; font-size: 15px; }
.exp .amt { font-weight: 800; white-space: nowrap; }
.exp .del, .place .del, .contact .del { background: none; border: 0; color: var(--ink-soft); font-size: 17px; cursor: pointer; padding: 4px 6px; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 20px; font-weight: 800; padding-top: 12px; }
table.px { width: 100%; border-collapse: collapse; font-size: 14px; }
table.px td { padding: 8px 0; border-bottom: 1px solid var(--line); }
table.px tr:last-child td { border: 0; }
table.px td:last-child { text-align: right; font-weight: 800; white-space: nowrap; color: var(--ocean); }

/* ---------- miejsca ---------- */
.gps {
  position: relative; border-radius: var(--r); padding: 16px; margin-bottom: 13px;
  color: #fff; overflow: hidden; box-shadow: var(--shadow); isolation: isolate;
}
.gps::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(135deg, #0a4f5e, #17919f);
}
.gps .coord { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gps .acc { font-size: 12px; opacity: .88; margin-top: 2px; }
.place { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.place:last-child { border: 0; }
.place .arrow {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-size: 21px;
  color: var(--ocean); background: var(--tint); border-radius: 50%; transition: transform .3s;
}
.place .info { flex: 1; min-width: 0; }
.place .info b { font-size: 15px; }
.place .info div { font-size: 12.5px; color: var(--ink-soft); }
.place .dist { flex: none; font-size: 13.5px; font-weight: 800; color: var(--ocean); text-align: right; min-width: 60px; }

/* ---------- checklista ---------- */
.chk { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.chk:last-child { border: 0; }
.chk .box {
  width: 26px; height: 26px; border: 2px solid var(--line); border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 15px; color: #fff; transition: .15s;
}
.chk.done .box { background: var(--leaf); border-color: var(--leaf); }
.chk.done span { text-decoration: line-through; color: var(--ink-soft); }
.progress { height: 12px; background: var(--tint); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--leaf), #6cc98d); transition: width .35s; }

/* ---------- info ---------- */
details.acc { border-bottom: 1px solid var(--line); }
details.acc:last-child { border: 0; }
details.acc > summary {
  list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; gap: 12px;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary .ico {
  width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--tint);
  display: grid; place-items: center; font-size: 19px;
}
details.acc > summary::after { content: "›"; margin-left: auto; color: var(--ink-soft); font-size: 24px; transition: transform .2s; }
details.acc[open] > summary::after { transform: rotate(90deg); }
.kv { padding: 0 2px 14px 52px; }
.kv b { display: block; font-size: 14px; margin-top: 11px; }
.kv p { margin: 2px 0 0; font-size: 14px; color: var(--ink-soft); }
.contact { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.contact:last-child { border: 0; }
.contact .c-i { flex: 1; }
.contact .c-i b { font-size: 15px; }
.contact .c-i div { font-size: 12.5px; color: var(--ink-soft); }
.contact a.call {
  flex: none; background: var(--leaf); color: #fff; text-decoration: none;
  border-radius: 12px; padding: 10px 15px; font-weight: 700; font-size: 14px;
}
.sos {
  display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit;
  background: var(--card); border-radius: var(--r); padding: 14px 16px; margin-bottom: 13px;
  box-shadow: var(--shadow); border: 1.5px solid rgba(232,84,63,.25);
}
.sos .ring {
  width: 48px; height: 48px; border-radius: 50%; background: var(--coral); color: #fff;
  display: grid; place-items: center; font-size: 22px; flex: none;
  box-shadow: 0 4px 14px rgba(232,84,63,.35);
}
.sos b { display: block; font-size: 16px; color: var(--coral); font-weight: 800; }
.sos span { font-size: 12.5px; color: var(--ink-soft); }
.sos .go { margin-left: auto; color: var(--coral); font-size: 24px; }

.empty { text-align: center; color: var(--ink-soft); font-size: 14px; padding: 20px 8px; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabh) + 20px);
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 99px;
  font-size: 14px; font-weight: 600; z-index: 60; opacity: 0; pointer-events: none; transition: opacity .25s;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
[data-theme="dark"] .toast { background: #e8f4f6; color: #0b171b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast { background: #e8f4f6; color: #0b171b; } }
.toast.on { opacity: .97; }

/* ================= EKRAN BLOKADY ================= */
#lock {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 20px; overflow: auto;
  background: #cfe9ef url(img/hero-login.webp) center/cover no-repeat;
  color: #123a4a;
}
#lock::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.05) 40%, rgba(255,255,255,.35));
}
#lock .lock-in { position: relative; width: 100%; max-width: 330px; text-align: center; }
#lock .lock-logo { width: 58px; height: 58px; }
#lock h1 { font-size: 25px; font-weight: 800; color: #0d3b49; text-shadow: 0 1px 8px rgba(255,255,255,.6); }
#lock h1 span { color: #0f6b7d; }
#lock .lock-motto { font-size: 19px; color: #14505f; margin: 2px 0 16px; text-shadow: 0 1px 8px rgba(255,255,255,.6); }
#lock .lock-card {
  background: rgba(255,255,255,.86); border-radius: 26px; padding: 22px 18px 20px;
  box-shadow: 0 18px 44px rgba(9,60,74,.22); backdrop-filter: blur(10px);
}
#lock .kicker { font-size: 11px; letter-spacing: 2px; font-weight: 700; color: #17919f; }
#lock .lock-card h2 { font-size: 26px; font-weight: 800; margin: 4px 0 6px; color: #0d3b49; }
#lock .lock-sub { font-size: 13.5px; color: #5c7a83; margin: 0 0 16px; line-height: 1.45; }
#lock .dots { display: flex; justify-content: center; gap: 13px; margin-bottom: 18px; }
#lock .dots i {
  width: 13px; height: 13px; border-radius: 50%; background: #d3e9ed; transition: .15s;
}
#lock .dots i.on { background: #0f6b7d; transform: scale(1.15); }
#lock .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#lock .pad button {
  height: 54px; border-radius: 16px; border: 0; font-size: 22px; font-weight: 700;
  background: #e6f4f6; color: #0d3b49; cursor: pointer; transition: .12s;
}
#lock .pad button:active { background: #c9e8ec; transform: scale(.96); }
#lock .pad button.del { background: transparent; font-size: 19px; color: #5c7a83; }
#lock .orsep {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 12px;
  color: #93aab1; font-size: 11px; letter-spacing: 2px; font-weight: 700;
}
#lock .orsep::before, #lock .orsep::after { content: ""; flex: 1; height: 1px; background: #dceaed; }
#lock .bio {
  width: 100%; border: 0; border-radius: 16px; background: #e6f4f6; color: #0f6b7d;
  padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
#lock .bio:active { background: #c9e8ec; }
#lock .lock-foot {
  margin-top: 16px; font-size: 10.5px; letter-spacing: 1.6px; font-weight: 700;
  color: #16505e; text-shadow: 0 1px 8px rgba(255,255,255,.7);
}
#lock.shake .lock-card { animation: shake .45s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-9px); } 40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(6px); }
}

/* ================= PULPIT ================= */
.cd-card { text-align: center; }
.cd { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.cd-box {
  background: var(--tint); border-radius: 16px; padding: 11px 6px; min-width: 74px; flex: 1; max-width: 108px;
}
.cd-box b { display: block; font-size: 28px; font-weight: 800; color: var(--ocean); line-height: 1.1; }
.cd-box span { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
select.spot { margin-bottom: 12px; font-weight: 600; }
.home-tide { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.home-tide > div:first-child { flex: 1; }
.home-tide b { font-size: 19px; font-weight: 800; }
.home-tide .tide-in {
  background: var(--tint); color: var(--ocean); border-radius: 99px;
  padding: 7px 13px; font-weight: 700; font-size: 13.5px; white-space: nowrap;
}
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 13px; }
.tile {
  background: var(--card); border: 0; border-radius: var(--r); padding: 14px 12px;
  box-shadow: var(--shadow); cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
}
.tile img { width: 42px; height: 42px; margin-bottom: 4px; }
.tile b { font-size: 15.5px; font-weight: 800; }
.tile span { font-size: 12px; color: var(--ink-soft); }
.tile:active { transform: scale(.98); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.card.mini { padding: 14px; cursor: pointer; }
.card.mini b { display: block; font-size: 21px; font-weight: 800; margin: 2px 0 6px; }
.clim-t { display: flex; align-items: center; gap: 14px; }
.clim-t b { font-size: 34px; font-weight: 800; color: var(--ocean); }
.tip p { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* ================= WYKRES PŁYWÓW ================= */
.daynav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.daynav b { font-size: 15px; font-weight: 800; }
.daynav .nav {
  border: 0; background: var(--tint); color: var(--ocean); width: 38px; height: 38px;
  border-radius: 12px; font-size: 22px; font-weight: 700; cursor: pointer;
}
svg.tchart { width: 100%; height: auto; display: block; overflow: visible; }
/* obrys w kolorze karty - etykiety pozostają czytelne nad krzywą */
svg.tchart text { paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
svg.tchart .tx { font-size: 11px; fill: var(--ink-soft); }
svg.tchart .tv { font-size: 12px; font-weight: 700; fill: var(--ink); }
:root { --sandy: #d9a441; }

/* dobra pora na */
.gt { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.gt:last-child { border: 0; }
.gt-i {
  width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--tint);
  display: grid; place-items: center; font-size: 20px;
}
.gt-t { flex: 1; min-width: 0; }
.gt-t b { font-size: 15px; }
.gt-t .muted { font-size: 12.5px; }
.gt-h { font-size: 13.5px; font-weight: 800; color: var(--ocean); white-space: nowrap; text-align: right; }

/* ================= BUDŻET ================= */
.bud { display: flex; justify-content: space-between; margin: 14px 0 8px; }
.bud .right { text-align: right; }
.bud span { display: block; font-size: 12px; }
.bud b { font-size: 20px; font-weight: 800; }
.progress.big { height: 14px; }
.progress > div.over { background: linear-gradient(90deg, #e8543f, #f08a6c); }
.catrow { margin-top: 12px; }
.catrow-t { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; }
.catrow-t b { font-weight: 700; }
.catbar { height: 9px; background: var(--tint); border-radius: 99px; overflow: hidden; }
.catbar > div { height: 100%; border-radius: 99px; }

/* ================= SYNCHRONIZACJA ================= */
.syncrow { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 4px; }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--ink-soft); }
.dot.ok { background: var(--leaf); box-shadow: 0 0 0 4px rgba(47,143,78,.18); }
.dot.warn { background: #e2a13c; box-shadow: 0 0 0 4px rgba(226,161,60,.18); }
.dot.off { background: var(--ink-soft); }

/* ================= MAPA WYSPY ================= */
.mapwrap {
  position: relative; border-radius: 16px; overflow: hidden;
  background: #bfe6f0; border: 1px solid var(--line);
}
[data-theme="dark"] .mapwrap { background: #10323a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mapwrap { background: #10323a; } }
#map-svg {
  display: block; width: 100%; height: 58vh; max-height: 520px; min-height: 320px;
  touch-action: none; cursor: grab;
}
#map-svg:active { cursor: grabbing; }
#map-svg .sea { fill: #bfe6f0; }
#map-svg .land { fill: #f2e5c8; stroke: #0f6b7d; stroke-width: 1.6; stroke-linejoin: round; }
[data-theme="dark"] #map-svg .sea { fill: #10323a; }
[data-theme="dark"] #map-svg .land { fill: #26424a; stroke: #4ec3d4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #map-svg .sea { fill: #10323a; }
  :root:not([data-theme="light"]) #map-svg .land { fill: #26424a; stroke: #4ec3d4; }
}
#map-svg .pin { cursor: pointer; }
#map-svg .pin path { stroke: #fff; stroke-width: 1.5; transition: filter .15s; }
#map-svg .pin.on path { filter: drop-shadow(0 0 6px rgba(232,84,63,.9)); stroke-width: 2.4; }
#map-svg .me-halo { fill: rgba(232,84,63,.28); }
#map-svg .me-dot { fill: #e8543f; stroke: #fff; stroke-width: 2; }
.mapzoom { position: absolute; right: 9px; top: 9px; display: flex; flex-direction: column; gap: 7px; }
.mapzoom button {
  width: 38px; height: 38px; border-radius: 12px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--ocean); font-size: 19px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(18,58,74,.18);
}
.mapzoom button:active { background: #fff; transform: scale(.94); }
.mapinfo { margin-top: 11px; font-size: 13.5px; color: var(--ink-soft); }
.mapinfo.on { color: var(--ink); }
.mi-t { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.mi-t b { font-size: 16px; }
.mi-d { margin-left: auto; font-weight: 800; color: var(--ocean); white-space: nowrap; }

/* ================= RESZTA PRZY KASIE ================= */
.notes { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 4px; }
.note {
  border: 0; background: var(--tint); color: var(--ocean); border-radius: 99px;
  padding: 9px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.note:active { transform: scale(.95); }
.change {
  margin-top: 12px; padding: 16px; border-radius: 16px; background: var(--tint); text-align: center;
}
.change b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 2px 0 4px; color: var(--ink); }
.change.ok { background: rgba(47,143,78,.12); }
.change.ok b { color: var(--leaf); }
.change.short { background: rgba(232,84,63,.12); }
.change.short b { color: var(--coral); font-size: 26px; }
.change .muted { font-size: 12.5px; }
#map-svg .pin-lab {
  font-size: 11px; font-weight: 800; fill: var(--ink);
  paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
}
[data-theme="dark"] #map-svg .pin-lab { stroke: #14252b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #map-svg .pin-lab { stroke: #14252b; } }

/* ================= PORTFEL ================= */
.wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.wcur {
  background: var(--tint); border-radius: 16px; padding: 12px 10px; text-align: center;
}
.wcur.neg { background: rgba(232,84,63,.12); }
.wcur .wc-n { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--ink-soft); }
.wcur b { display: block; font-size: 21px; font-weight: 800; line-height: 1.2; margin: 1px 0; }
.wcur .muted { font-size: 11.5px; }
.wsum { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.wsum-r { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; font-size: 14px; }
.wsum-v { text-align: right; }
.wsum-r b { font-size: 17px; font-weight: 800; }
.wsum-r.dim { color: var(--ink-soft); }
.wsum-r.good b { color: var(--leaf); }
.wsum-r.bad b { color: var(--coral); }
.wsum-r .muted { font-size: 11.5px; }
.subform {
  margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--bg);
  border: 1px solid var(--line);
}
.subform p.muted { margin-top: 0; }
.wh-t { font-size: 12px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .6px; margin: 16px 0 2px; }
.wh { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.wh:last-child { border: 0; }
.wh-i { flex: 1; min-width: 0; }
.wh-i b { font-size: 15px; }
.wh-i .muted { font-size: 12px; }

/* zobowiązania */
.plan { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.plan:last-child { border: 0; }
.plan-chk {
  width: 28px; height: 28px; flex: none; border-radius: 9px; cursor: pointer;
  border: 2px solid var(--line); background: none; color: #fff; font-size: 15px; font-weight: 700;
}
.plan.paid .plan-chk { background: var(--leaf); border-color: var(--leaf); }
.plan.paid .plan-i b { text-decoration: line-through; color: var(--ink-soft); }
.plan.paid .plan-a { color: var(--ink-soft); text-decoration: line-through; }
.plan-i { flex: 1; min-width: 0; }
.plan-i b { font-size: 15px; }
.plan-i .muted { font-size: 12.5px; }
.plan-a { font-weight: 800; white-space: nowrap; font-size: 15px; }
.wcur .wc-r { font-size: 10.5px; color: var(--ocean); font-weight: 700; margin-top: 1px; }

/* pasek nowej wersji - pokazuje się tylko wtedy, gdy odświeżenie musi poczekać */
.update-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabh) + 14px); z-index: 70;
  border: 0; border-radius: 14px; padding: 13px 16px; cursor: pointer;
  background: var(--ocean); color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(15,107,125,.35);
}
[data-theme="dark"] .update-bar { color: #06222a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .update-bar { color: #06222a; } }

/* ================= WYCIĄG ================= */
.st-day {
  font-size: 11.5px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .6px; margin: 16px 0 4px; padding-top: 8px; border-top: 1px solid var(--line);
}
.st-day:first-child { margin-top: 6px; border: 0; padding-top: 0; }
.st { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.st-i { flex: 1; min-width: 0; }
.st-i b { font-size: 15px; }
.st-i .muted { font-size: 12px; }
.st-a { flex: none; text-align: right; }
.st-k { font-size: 15px; font-weight: 800; white-space: nowrap; }
.st-k.plus { color: var(--leaf); }
.st-k.minus { color: var(--ink); }
.st-s { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; margin-bottom: 4px; }

/* przycisk powrotu i karta-odnośnik */
.back {
  border: 0; background: none; color: var(--ocean); font-weight: 700; font-size: 14px;
  padding: 4px 2px 10px; cursor: pointer;
}
button.linkcard {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  border: 0; cursor: pointer; font: inherit; color: inherit;
}
button.linkcard img { width: 42px; height: 42px; flex: none; }
button.linkcard b { display: block; font-size: 16px; }
button.linkcard span span { font-size: 12.5px; color: var(--ink-soft); }
button.linkcard .go { margin-left: auto; color: var(--ink-soft); font-size: 24px; }
.home-wallet { cursor: pointer; }
.wgrid.mini { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.wgrid.mini .wcur { padding: 10px 8px; }
.wgrid.mini .wcur b { font-size: 18px; }
.home-wallet .wsum { margin-top: 11px; padding-top: 9px; }
.cash-sum { text-align: center; margin-top: 14px; }
.cash-sum b { display: block; font-size: 27px; font-weight: 800; color: var(--leaf); line-height: 1.15; }
.cash-sum span { font-size: 12.5px; color: var(--ink-soft); }
.cash-sum.bad b { color: var(--coral); }

/* ================= ZOBOWIĄZANIA W TRANSZACH ================= */
.plan { align-items: flex-start; }
.plan-r { flex: none; text-align: right; }
.plan-r .muted { font-size: 11.5px; }
.plan-bar { height: 6px; background: var(--tint); border-radius: 99px; overflow: hidden; margin: 7px 0 4px; }
.plan-bar > div { height: 100%; background: var(--leaf); border-radius: 99px; }
.plan-act { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.plan-act .btn.mini { font-size: 12.5px; padding: 8px 12px; }
.pays { padding: 4px 0 12px 4px; border-bottom: 1px solid var(--line); }
.pay { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.pay-i { flex: 1; }
.pay-i b { font-size: 14px; }
.pay-i .muted { font-size: 11.5px; }

/* ================= PODRÓŻ ================= */
.ts-big { font-size: 34px; font-weight: 800; color: var(--ocean); letter-spacing: -1px; margin: 2px 0 2px; }
#trip-status-card, .home-trip { text-align: center; }
#trip-status .btn, #trip-status .btn.sec { margin-top: 12px; }
.home-trip { cursor: pointer; }
.filebtn { display: block; }
.filebtn span {
  display: block; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line); border-radius: var(--r-sm); padding: 14px;
  color: var(--ocean); font-weight: 700; background: var(--bg);
}
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 12px; }
.doc {
  position: relative; border-radius: 14px; overflow: hidden; background: var(--tint);
  cursor: pointer; padding-bottom: 6px;
}
.doc img { width: 100%; height: 96px; object-fit: cover; display: block; }
.doc-pdf { height: 96px; display: grid; place-items: center; font-weight: 800; color: var(--ocean); }
.doc-n { font-size: 11px; padding: 5px 7px 0; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-x {
  position: absolute; top: 5px; right: 5px; border: 0; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 12px;
}

/* podgląd dokumentu */
#docview { position: fixed; inset: 0; z-index: 90; background: rgba(6,25,32,.94); display: grid; place-items: center; padding: 16px; }
#docview[hidden] { display: none !important; }
.dv-body img { max-width: 96vw; max-height: 86vh; border-radius: 10px; }
.dv-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; border: 0; cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 18px;
}

/* tryb lotu */
#flymode {
  position: fixed; inset: 0; z-index: 95; overflow: auto; padding: 18px 16px 26px;
  background: linear-gradient(180deg, #06202b, #0a3b4a 60%, #0f6b7d);
  color: #fff; text-align: center;
}
#flymode[hidden] { display: none !important; }
.fly-top { display: flex; align-items: flex-start; gap: 12px; text-align: left; }
.fly-route { font-size: 19px; font-weight: 800; }
.fly-sub { font-size: 12.5px; opacity: .8; }
.fly-close {
  margin-left: auto; border: 0; cursor: pointer; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 17px;
}
.fly-count { font-size: 46px; font-weight: 800; letter-spacing: -1.5px; margin-top: 18px; }
.fly-label { font-size: 13px; opacity: .8; text-transform: uppercase; letter-spacing: 1.4px; }
.fly-map { margin: 18px auto; max-width: 560px; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.06); }
#fly-svg { max-height: 44vh; }
#fly-svg { width: 100%; height: auto; display: block; }
#fly-svg .fly-sea { fill: rgba(255,255,255,.05); }
#fly-svg .fly-land { fill: rgba(255,255,255,.22); }
#fly-svg .fly-line { fill: none; stroke: #ffcc4d; stroke-width: 2.5; stroke-dasharray: 6 4; }
#fly-svg .fly-port { fill: #fff; }
#fly-svg .fly-txt { fill: #fff; font-size: 11px; font-weight: 700; }
#fly-svg .fly-halo { fill: rgba(255,204,77,.35); }
#fly-svg .fly-plane { fill: #ffcc4d; stroke: #fff; stroke-width: 1.5; }
.fly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fly-cell { background: rgba(255,255,255,.1); border-radius: 14px; padding: 12px 10px; }
.fly-cell b { display: block; font-size: 19px; font-weight: 800; }
.fly-cell span { font-size: 11.5px; opacity: .8; }
.fly-note { font-size: 12px; opacity: .75; margin-top: 16px; }

.export-row { display: flex; gap: 9px; flex-wrap: wrap; }
.export-row .btn { flex: 1; min-width: 150px; }

/* ================= ODCINKI LOTU I PRZESIADKI ================= */
.leg { padding: 12px 0; border-bottom: 1px solid var(--line); }
.leg-h { display: flex; align-items: baseline; gap: 10px; }
.leg-h b { font-size: 17px; font-weight: 800; }
.leg-no { font-size: 12.5px; color: var(--ink-soft); font-weight: 700; margin-left: auto; }
.leg-t { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; margin: 4px 0 3px; }
.leg-arrow { color: var(--ocean); }
.leg .muted { font-size: 12.5px; }
.leg-act { display: flex; gap: 7px; margin-top: 9px; }
.leg-act .btn.mini { font-size: 12.5px; padding: 7px 12px; }
.transfer { border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: 13px; }
.transfer b { display: block; font-size: 14px; }
.transfer.ok { background: var(--tint); color: var(--ink-soft); }
.transfer.uwaga { background: rgba(226,161,60,.14); color: #9a6b18; }
.transfer.zle { background: rgba(232,84,63,.13); color: #a03a25; }
[data-theme="dark"] .transfer.uwaga { color: #f0c078; }
[data-theme="dark"] .transfer.zle { color: #ffb49e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .transfer.uwaga { color: #f0c078; }
  :root:not([data-theme="light"]) .transfer.zle { color: #ffb49e; }
}
#fly-svg .fly-line.dim { stroke: rgba(255,255,255,.35); stroke-width: 1.8; }

/* ================= FAZA PODRÓŻY ================= */
.faza-h { display: flex; align-items: flex-start; gap: 12px; text-align: left; }
.faza-i { font-size: 30px; line-height: 1; }
.faza-h b { font-size: 17px; font-weight: 800; }
.faza-h .muted { font-size: 13px; }
.faza-zad { margin: 12px 0 10px; text-align: left; }
.faza-zad .chk { padding: 8px 0; }
.faza .progress { margin-top: 4px; }
.faza .btn, .faza .btn.sec { margin-top: 12px; }
.faza { text-align: left; }

/* ================= TRAVEL VAULT ================= */
.quick { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.quick-b {
  flex: none; border: 0; cursor: pointer; background: var(--tint); color: var(--ink);
  border-radius: 16px; padding: 11px 14px; display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.quick-b:active { transform: scale(.96); }
.quick-i { font-size: 19px; }
.quick-c { background: var(--ocean); color: #fff; border-radius: 99px; font-size: 11px; padding: 1px 7px; }
.dv-cap { color: #cfe6ec; font-size: 13px; text-align: center; margin-top: 12px; }
.dv-nav { display: flex; gap: 7px; justify-content: center; margin-top: 12px; }
.dv-dot {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.18); color: #fff; font-size: 13px; font-weight: 700;
}
.dv-dot.on { background: #fff; color: #0d3b49; }

/* ================= PLAN PODRÓŻY ================= */
.plan-item { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.plan-item:last-child { border: 0; }
.pi-ico { font-size: 22px; line-height: 1.2; flex: none; }
.pi-i { flex: 1; min-width: 0; }
.pi-i b { font-size: 15px; }
.pi-i .muted { font-size: 12.5px; }
.plan-item.minelo { opacity: .5; }
.plan-item.minelo .pi-i b { text-decoration: line-through; }
.home-plan { cursor: pointer; }
.home-plan .st-day:first-child { margin-top: 0; }

/* ================= PODSUMOWANIE WYJAZDU ================= */
.sum-head { text-align: center; margin-bottom: 14px; }
.sum-head b { font-size: 22px; font-weight: 800; display: block; }
.sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.sum-cell { background: var(--tint); border-radius: 16px; padding: 13px 10px; text-align: center; }
.sum-cell b { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; }
.sum-cell span { font-size: 11.5px; color: var(--ink-soft); }
.sum-cell.strong { background: linear-gradient(135deg, var(--ocean), var(--ocean2)); }
.sum-cell.strong b { color: #fff; font-size: 23px; }
.sum-cell.strong span { color: rgba(255,255,255,.85); }
.sum-t { font-size: 12px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .6px; margin: 20px 0 8px; }
.sum-list { display: flex; flex-direction: column; gap: 8px; }
.sum-li { font-size: 13.5px; background: var(--bg); border-radius: 12px; padding: 10px 12px; }

/* ================= MOJE PODRÓŻE ================= */
header h1 { cursor: pointer; }
.trip { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0 8px; }
.trip-i { flex: 1; min-width: 0; }
.trip-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trip-h b { font-size: 16.5px; font-weight: 800; }
.trip-badge {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  background: var(--ocean); color: #fff; border-radius: 99px; padding: 2px 9px;
}
.trip-badge.arch { background: var(--ink-soft); }
.trip.arch .trip-i b { color: var(--ink-soft); }
.trip .muted { font-size: 12.5px; }
.trip-act { display: flex; gap: 7px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.trip-act .btn.mini { font-size: 12.5px; padding: 7px 11px; }
.person { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.person:last-child { border: 0; }
.person .c-i { flex: 1; min-width: 0; }
.person .c-i b { font-size: 15px; }
.person .c-i .muted { font-size: 12px; }
.person .btn.mini { font-size: 12.5px; padding: 8px 12px; white-space: nowrap; }

/* ---------- grupa: role, salda, rozliczenia ---------- */
#podglad-bar {
  background: var(--sand); color: var(--ink); text-align: center;
  font-size: 12.5px; font-weight: 700; padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
/* Tryb podglądu zdejmuje z ekranu to, czego i tak nie da się zapisać.
   Prawdziwą blokadę stawia serwer - to tylko po to, żeby nie kusiło. */
body.podglad .del,
body.podglad #e-add,
body.podglad #w-add-btn,
body.podglad #w-fx-btn,
body.podglad #plan-add,
body.podglad #trip-new,
body.podglad #person-add,
body.podglad #budget-save { display: none !important; }

.person.ja { background: linear-gradient(90deg, rgba(15,107,125,.07), transparent); }
.person .trip-act { border: 0; padding: 0; }
select.mini {
  font-size: 12.5px; padding: 6px 9px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.hint-warn {
  background: rgba(232,84,63,.1); border-left: 3px solid var(--coral);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-bottom: 10px;
}

.bal { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bal .c-i { flex: 1; min-width: 0; }
.bal .c-i b { font-size: 15px; }
.bal .c-i .muted { font-size: 12px; }
.bal .amt { font-weight: 800; font-variant-numeric: tabular-nums; }
.bal.plus .amt { color: var(--leaf); }
.bal.minus .amt { color: var(--coral); }
.bal.zero .amt { color: var(--ink-soft); }

.settle { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.settle .c-i { flex: 1; min-width: 0; }
.settle .c-i b { font-size: 14.5px; }
.settle .c-i .muted { font-size: 12px; }
.settle.done .c-i b { color: var(--ink-soft); font-weight: 600; }
.ok-note {
  background: rgba(47,143,78,.1); border-radius: 10px; padding: 11px 13px;
  font-size: 13.5px; text-align: center; margin-top: 8px;
}

/* Kierunek bez obrysu w paczce - zamiast lądu rysujemy siatkę współrzędnych. */
#map-svg .grid line { stroke: var(--line); stroke-width: 1.2; opacity: .75; }

/* ---------- rozliczenia: udziały, plan ---------- */
.udzial { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.udzial > span:first-child { flex: 1; font-size: 14px; }
.udzial input { max-width: 110px; }
.udzial .muted { font-size: 12px; min-width: 34px; }
.plan-now b { font-size: 15.5px; }
.plan-konto { margin: 12px 0; }
.plan-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line); }
.plan-row .c-i { flex: 1; min-width: 0; }
.plan-row .c-i b { font-size: 14.5px; }
.plan-row .c-i .muted { font-size: 12px; }
a.btn { text-decoration: none; display: inline-block; text-align: center; }

/* ---------- wspomnienia ---------- */
.wsp-day { padding: 12px 0; border-bottom: 1px solid var(--line); }
.wsp-day:last-child { border-bottom: 0; }
.wsp-h { display: flex; align-items: baseline; gap: 10px; }
.wsp-h b { font-size: 16px; }
.wsp-facts { margin: 6px 0 4px; }
.wsp-fact { font-size: 13.5px; padding: 2px 0; }
.wsp-note { width: 100%; margin-top: 8px; resize: vertical; }
.wsp-ruch { margin-top: 6px; }
.wsp-ruch .row { margin-top: 6px; }
.wsp-photos { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 4px; scrollbar-width: none; }
.wsp-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex: none; }
.wsp-add { width: 72px; height: 72px; border-radius: 10px; border: 1.5px dashed var(--line);
  background: transparent; color: var(--ink-soft); font-size: 26px; flex: none; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); margin: 8px 0; }
label.check input { width: auto; }
.replay { width: 100%; max-height: 62vh; border-radius: 14px; background: var(--navy); }
.replay .sea { fill: var(--navy); }
.replay .land { fill: var(--sand); stroke: var(--line); stroke-width: 1; }
.replay .trail-bg { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 5; }
.replay .trail { fill: none; stroke: var(--coral); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.replay .trail-dot { fill: var(--coral); stroke: #fff; stroke-width: 2.5; }
.replay .trail-photo { fill: #fff; stroke: var(--ocean); stroke-width: 2; }
.replay-photo { position: absolute; right: 14px; bottom: 74px; width: 34%; max-width: 220px; border-radius: 12px;
  border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
#map-layers { margin-bottom: 0; }

/* ---------- warstwa online ---------- */
.leg-link { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--ocean); text-decoration: none; font-weight: 700; }
#px-spol { margin-top: 10px; }

/* ---------- Aktualnie ---------- */
nav.tabs button { min-width: 0; }
.now-hero { border-radius: 22px; padding: 22px 18px; margin-bottom: 14px; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--ocean), var(--ocean2)); box-shadow: 0 12px 30px rgba(15,107,125,.28); }
.now-hero.fly { background: linear-gradient(135deg, #0b2a36, #0f6b7d); }
.now-k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.now-big { font-size: 34px; font-weight: 800; line-height: 1.15; margin-top: 4px; }
.now-sub { font-size: 13.5px; opacity: .92; margin-top: 6px; }
.now-cyfry { display: flex; justify-content: center; gap: 18px; margin: 8px 0 4px; }
.now-cyfra b { display: block; font-size: 40px; font-weight: 800; line-height: 1; }
.now-cyfra span { font-size: 12px; opacity: .85; }
.now-status .now-st { margin-bottom: 10px; }
.now-status .now-st b { font-size: 17px; }
.ok-btn { width: 100%; font-size: 17px; padding: 15px; background: linear-gradient(135deg, var(--coral), #ff8a6b); color: #fff; border-radius: 16px; }
.center { text-align: center; margin: 8px 0 10px; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.now-map { width: 100%; border-radius: 16px; background: #10202a; margin: 6px 0 10px; display: block; }
.now-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0; }
.now-cell { background: var(--navy); border-radius: 12px; padding: 10px 12px; }
.now-cell b { display: block; font-size: 17px; }
.now-cell span { font-size: 11.5px; color: var(--ink-soft); }
.now-lot b { font-size: 16px; }
.now-lot .muted { font-size: 13px; }
.now-odprawa { margin: 10px 0; padding: 9px 12px; border-radius: 10px; background: var(--navy); font-size: 13.5px; }
.now-odprawa.open { background: rgba(232,84,63,.12); font-weight: 700; }
.now-odprawa.ok { background: rgba(47,143,78,.12); }
.now-progress { margin: 8px 0 12px; }
.now-photo { width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; margin: 6px 0 10px; }
.fly-done { fill: none; stroke: var(--ocean2); stroke-width: 3.5; }
.fly-halo.est { opacity: .18; }
.fly-txt.small { font-size: 10px; opacity: .8; }
/* ---------- galeria, oś czasu, dziennik ---------- */
.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.gal-kafel { position: relative; }
.gal-kafel img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.gal-znak { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.45); color: #fff; border-radius: 99px; padding: 2px 7px; font-size: 12px; }
.dv-meta { margin-top: 10px; width: 100%; max-width: 520px; }
.dv-meta b { display: block; color: #fff; margin-bottom: 6px; }
.dv-meta input { margin-bottom: 6px; }
.tl { margin: 6px 0 4px; }
.tl-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.tl-t { width: 44px; flex: none; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-soft); }
.tl-i { width: 22px; flex: none; text-align: center; }
.tl-b { flex: 1; min-width: 0; font-size: 14px; }
.tl-b .muted { font-size: 12px; }
.tl-img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.wsp-tytul { margin: 6px 0 4px; }
.wsp-tytul input { font-weight: 700; }
.wsp-moment { display: flex; gap: 12px; align-items: center; margin-top: 8px; padding: 10px; border-radius: 14px; background: linear-gradient(90deg, rgba(232,84,63,.10), transparent); }
.wsp-moment img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; flex: none; }
.wsp-moment .muted { font-size: 13px; }

/* osiem zakładek w pasku: siatka ma tyle kolumn, ile przycisków - bez tego ósmy spada do drugiego rzędu */
nav.tabs { grid-template-columns: repeat(8, 1fr); }
nav.tabs button { flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; font-size: 10px; overflow: hidden; white-space: nowrap; }