/* ============================================================
   OQUARI — motyw morski marki (oquari.com), na bazie aqua.css z PMT.Web.
   Ładowany PO site.css (globalnie, w _Layout): najpierw nadpisuje tokeny
   marki (paleta morska — niebieski #1F7AD9 z logo + teal), potem style
   komponentów pionu akwarystycznego (aqua-*).
   ============================================================ */

:root{
  /* ---- Tokeny marki Oquari (nadpisują :root z site.css) ---- */
  --bg:#050E1A;                   /* głęboki granat morski */
  --surface:#0B1B2C;
  --surface-alt:#102338;
  --text-primary:#EAF4FF;
  --text-muted:#8FA9C6;

  --accent:#3D9BF0;               /* niebieski logo (rozjaśniony pod ciemne tło) */
  --accent-2:#22E6D2;             /* teal — woda */
  --success:#37E0A5;              /* morska zieleń — OK/rośliny */
  --border:#1D3350;

  --grad-from:#1F7AD9;
  --grad-to:#22E6D2;

  --accent-a10:rgba(61,155,240,.10);
  --accent-a35:rgba(61,155,240,.35);
  --accent2-a12:rgba(34,230,210,.12);
  --accent2-a40:rgba(34,230,210,.40);
  --success-a15:rgba(55,224,165,.15);
  --success-a40:rgba(55,224,165,.40);

  --glow-btn:0 0 0 1px var(--accent2-a40),0 8px 24px rgba(31,122,217,.30);
  --glow-accent:0 0 6px var(--accent);

  /* ---- Tokeny pionu akwarystycznego ---- */
  --aqua:#3D9BF0;                 /* = --accent — dominanta marki */
  --aqua-deep:#0E4E90;            /* głęboka woda */
  --aqua-glow:rgba(61,155,240,.16);
  --aqua-a08:rgba(61,155,240,.08);
  --aqua-a12:rgba(61,155,240,.12);
  --aqua-a25:rgba(61,155,240,.25);
  --coral:#FF7A6B;                /* alarm / bezpieczeństwo (koral) */
  --coral-a15:rgba(255,122,107,.15);
  --coral-a40:rgba(255,122,107,.40);
  --kelp:#37E0A5;                 /* = --success — rośliny/OK */
}

/* ---------- Hero Aqua ---------- */
.aqua-hero{ position:relative; overflow:hidden; }
.aqua-hero .hero-sub{ max-width:58ch; }
.aqua-waves{
  position:absolute; left:0; right:0; bottom:-1px; height:120px; pointer-events:none; opacity:.5;
}
.aqua-waves svg{ width:100%; height:100%; display:block; }

/* Badge „natywne HA" */
.aqua-ha-badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:5px 14px; border-radius:var(--r-pill);
  background:var(--aqua-a12); border:1px solid var(--aqua-a25); color:var(--aqua);
  font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:var(--tracking-mono);
}
.aqua-ha-badge svg{ flex:0 0 auto; }

/* ---------- Wizual akwarium (hero, CSS-only) ---------- */
.aqua-tank{
  position:relative; border:1px solid var(--border); border-radius:var(--r-card);
  background:linear-gradient(180deg, rgba(14,116,144,.18), rgba(7,11,20,.6) 70%);
  box-shadow:var(--shadow-card), inset 0 0 60px rgba(34,230,210,.06);
  overflow:hidden; min-height:320px;
}
.aqua-tank__water{
  position:absolute; inset:0;
  background:
    radial-gradient(420px circle at 78% 12%, rgba(34,230,210,.22), transparent 60%),
    radial-gradient(300px circle at 15% 85%, rgba(124,92,255,.14), transparent 65%);
  animation:aquaShimmer 9s ease-in-out infinite alternate;
}
@keyframes aquaShimmer{ from{ opacity:.7; } to{ opacity:1; } }
.aqua-tank__grid{ position:relative; padding:20px; display:flex; flex-direction:column; gap:.65rem; }
.aqua-tank__row{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background:rgba(7,11,20,.55); border:1px solid var(--border); border-radius:12px;
  padding:.6rem .9rem; backdrop-filter:blur(6px);
}
.aqua-tank__row .lbl{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:var(--tracking-mono); color:var(--text-muted); }
.aqua-tank__row .val{ font-family:var(--font-mono); font-size:1.02rem; color:var(--aqua); font-variant-numeric:tabular-nums; }
.aqua-tank__row .val.ok{ color:var(--kelp); }
.aqua-tank__row .val.warn{ color:var(--coral); }
.aqua-tank__foot{
  position:relative; display:flex; align-items:center; gap:.55rem; padding:0 20px 16px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--text-muted);
}
.aqua-bubble{ position:absolute; bottom:-12px; width:8px; height:8px; border-radius:50%;
  border:1px solid var(--aqua-a25); background:var(--aqua-a08); animation:aquaBubble 7s linear infinite; }
.aqua-bubble:nth-child(2){ left:12%; animation-delay:0s; }
.aqua-bubble:nth-child(3){ left:28%; width:5px; height:5px; animation-delay:2.1s; }
.aqua-bubble:nth-child(4){ left:64%; animation-delay:3.4s; }
.aqua-bubble:nth-child(5){ left:83%; width:6px; height:6px; animation-delay:1.2s; }
@keyframes aquaBubble{
  0%{ transform:translateY(0); opacity:0; }
  12%{ opacity:.9; }
  100%{ transform:translateY(-340px); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .aqua-bubble,.aqua-tank__water{ animation:none; }
}

/* ---------- Sekcja bezpieczeństwa ---------- */
.aqua-safe{ border-left:3px solid var(--coral); }
.aqua-safe h3{ color:var(--coral); display:flex; align-items:center; gap:.6rem; font-size:1.12rem; }
.aqua-safe p{ color:var(--text-muted); font-size:.94rem; margin:0; }
.aqua-safe .mono-note{ font-family:var(--font-mono); font-size:.72rem; color:var(--coral); text-transform:uppercase; letter-spacing:var(--tracking-mono); margin-top:.7rem; display:block; }

/* ---------- Karty presetów ---------- */
.aqua-preset{ display:flex; flex-direction:column; gap:.7rem; height:100%; }
.aqua-preset__head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.aqua-preset__icon{ color:var(--aqua); flex:0 0 auto; }
.aqua-preset h3{ font-size:1.14rem; margin:0; }
.aqua-preset p{ color:var(--text-muted); font-size:.93rem; margin:0; flex:1; }
.aqua-preset__viz{ border:1px solid var(--border); border-radius:12px; background:rgba(7,11,20,.5); padding:10px; }
.aqua-preset__viz svg{ width:100%; height:auto; display:block; }
.aqua-preset__meta{ display:flex; flex-wrap:wrap; gap:.4rem; }

/* Schematy SVG — wspólne kolory linii */
.aqua-viz-axis{ stroke:var(--border); stroke-width:1; }
.aqua-viz-line{ stroke:var(--aqua); stroke-width:2; fill:none; stroke-linecap:round; }
.aqua-viz-line2{ stroke:var(--accent-2); stroke-width:2; fill:none; stroke-linecap:round; stroke-dasharray:5 4; }
.aqua-viz-alarm{ stroke:var(--coral); stroke-width:1.5; stroke-dasharray:3 4; }
.aqua-viz-fill{ fill:var(--aqua-glow); }
.aqua-viz-txt{ fill:var(--text-muted); font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; }
.aqua-viz-txt--on{ fill:var(--kelp); }
.aqua-viz-txt--alarm{ fill:var(--coral); }
.aqua-viz-bar{ fill:var(--aqua-a25); }
.aqua-viz-bar--on{ fill:var(--aqua); }

/* ---------- Encje HA (zrzut zastępczy CSS-owy) ---------- */
.aqua-ha-card{
  border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden;
  background:linear-gradient(170deg, rgba(19,31,51,.7), rgba(14,22,38,.5));
  box-shadow:var(--shadow-card);
}
.aqua-ha-card__bar{
  display:flex; align-items:center; gap:.6rem; padding:.65rem 1rem; border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.25); font-family:var(--font-mono); font-size:.74rem;
  text-transform:uppercase; letter-spacing:var(--tracking-mono); color:var(--text-muted);
}
.aqua-ha-card__bar .dot{ width:9px; height:9px; border-radius:50%; background:var(--aqua); box-shadow:0 0 8px var(--aqua); }
.aqua-ha-entity{
  display:flex; align-items:center; gap:.8rem; padding:.62rem 1rem; border-bottom:1px solid rgba(38,52,77,.5);
}
.aqua-ha-entity:last-child{ border-bottom:none; }
.aqua-ha-entity .ico{ color:var(--aqua); flex:0 0 22px; }
.aqua-ha-entity .name{ flex:1; font-size:.92rem; }
.aqua-ha-entity .eid{ display:block; font-family:var(--font-mono); font-size:.7rem; color:var(--text-muted); }
.aqua-ha-entity .state{ font-family:var(--font-mono); font-size:.9rem; color:var(--aqua); font-variant-numeric:tabular-nums; }
.aqua-ha-entity .state.on{ color:var(--kelp); }
.aqua-ha-entity .state.alarm{ color:var(--coral); }

/* ---------- Jak działa: schemat magistrali ---------- */
.aqua-bus{ border:1px solid var(--border); border-radius:var(--r-card); padding:22px; background:var(--grad-card); overflow-x:auto; }
.aqua-bus svg{ width:100%; min-width:560px; height:auto; display:block; }
.aqua-bus-node{ fill:rgba(14,22,38,.9); stroke:var(--border); }
.aqua-bus-node--core{ stroke:var(--aqua); }
.aqua-bus-wire{ stroke:var(--aqua); stroke-width:2; }
.aqua-bus-label{ fill:var(--text-primary); font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; }
.aqua-bus-sub{ fill:var(--text-muted); font-family:var(--font-mono); font-size:9px; }

/* Krokowe „jak działa" */
.aqua-flow{ display:flex; flex-direction:column; gap:1rem; }
.aqua-flow__item{ display:flex; gap:1rem; align-items:flex-start; }
.aqua-flow__num{
  flex:0 0 40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--aqua-a25); border-radius:12px; color:var(--aqua);
  font-family:var(--font-mono); font-size:.95rem; background:var(--aqua-a08);
}
.aqua-flow__item h3{ font-size:1.08rem; margin:0 0 .25rem; }
.aqua-flow__item p{ color:var(--text-muted); font-size:.93rem; margin:0; }

/* ---------- Cennik / zestawy ---------- */
.aqua-kit{ display:flex; flex-direction:column; gap:.8rem; height:100%; }
.aqua-kit--featured{ border-color:var(--aqua-a25); box-shadow:var(--shadow-card), 0 0 34px rgba(34,230,210,.10); }
.aqua-kit__price{ font-family:var(--font-mono); font-size:1.75rem; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.aqua-kit__price small{ font-size:.85rem; color:var(--text-muted); }
.aqua-kit__items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.42rem; }
.aqua-kit__items li{ display:flex; gap:.55rem; color:var(--text-muted); font-size:.9rem; }
.aqua-kit__items li::before{ content:""; flex:0 0 6px; height:6px; margin-top:.5rem; border-radius:50%; background:var(--aqua); box-shadow:0 0 6px var(--aqua); }
.aqua-badge-preorder{
  display:inline-flex; align-items:center; gap:.45rem; padding:4px 12px; border-radius:var(--r-pill);
  background:var(--coral-a15); border:1px solid var(--coral-a40); color:var(--coral);
  font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:var(--tracking-mono);
}
.aqua-badge-preorder::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:var(--glow-dot); }

/* PMT Guard */
.aqua-guard{ border-left:3px solid var(--accent-2); }
.aqua-guard .price{ font-family:var(--font-mono); font-size:1.3rem; color:var(--accent-2); }

/* ---------- Samouczek ---------- */
.aqua-guide-list{ display:flex; flex-direction:column; gap:1rem; }
.aqua-guide-item{ display:block; text-decoration:none; color:inherit; }
.aqua-guide-item h3{ font-size:1.15rem; margin:0 0 .3rem; color:var(--text-primary); }
.aqua-guide-item p{ color:var(--text-muted); font-size:.93rem; margin:0; }
.aqua-guide-item .pmt-card{ transition:transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), border-color 250ms ease; }
.aqua-guide-item:hover .pmt-card{ border-color:var(--aqua-a25); }

/* Artykuł markdown */
.aqua-article{ max-width:78ch; }
.aqua-article h1{ font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:1rem; }
.aqua-article h2{ font-size:1.45rem; margin:2.2rem 0 .8rem; }
.aqua-article h3{ font-size:1.15rem; margin:1.6rem 0 .6rem; }
.aqua-article p, .aqua-article li{ color:var(--text-muted); }
.aqua-article strong{ color:var(--text-primary); }
.aqua-article a{ color:var(--aqua); }
.aqua-article code{
  font-family:var(--font-mono); font-size:.85em; color:var(--aqua);
  background:rgba(34,230,210,.08); border:1px solid var(--aqua-a12); border-radius:6px; padding:.08em .35em;
}
.aqua-article pre{
  background:rgba(7,11,20,.7); border:1px solid var(--border); border-radius:12px; padding:1rem; overflow-x:auto;
}
.aqua-article pre code{ background:none; border:none; padding:0; color:var(--text-primary); }
.aqua-article blockquote{
  border-left:3px solid var(--aqua); margin:1.2rem 0; padding:.6rem 1rem;
  background:var(--aqua-a08); border-radius:0 12px 12px 0;
}
.aqua-article blockquote p{ margin:0; }
.aqua-article table{ width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.92rem; }
.aqua-article th, .aqua-article td{ border:1px solid var(--border); padding:.5rem .7rem; text-align:left; }
.aqua-article th{ color:var(--text-primary); font-family:var(--font-head); font-weight:600; background:rgba(19,31,51,.5); }
.aqua-article img{ max-width:100%; border-radius:12px; }
.aqua-article hr{ border-color:var(--border); margin:2rem 0; }

/* ---------- Drobne ---------- */
.aqua-chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:3px 11px; border-radius:var(--r-pill);
  background:var(--aqua-a08); border:1px solid var(--aqua-a25); color:var(--aqua);
  font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:var(--tracking-mono);
}
.aqua-local-note{
  display:flex; align-items:center; gap:.7rem; border:1px solid var(--aqua-a25); border-radius:var(--r-card);
  background:var(--aqua-a08); padding:1rem 1.3rem; color:var(--text-primary); font-size:.98rem;
}
.aqua-local-note .mono{ color:var(--aqua); }

/* ---------- Poprawki mobilne (tylko strony Aqua — aqua.css ładuje się per-strona) ---------- */
/* Karty modułów w siatce col-6: kod + badge statusu nie mieszczą się w jednej linii
   na wąskim ekranie — pozwól nagłówkowi karty zawijać zamiast wypychać badge poza kartę. */
.module-head{ flex-wrap: wrap; row-gap: .3rem; }