:root {
  --bg:          #0d1117;
  --bg-2:        #131a23;
  --panel:       #171f2a;
  --panel-2:     #1d2734;
  --line:        #263243;
  --text:        #e6edf3;
  --text-dim:    #93a1b1;
  --text-faint:  #64748b;
  --accent:      #4ea3e0;
  --accent-soft: #4ea3e022;
  --warn:        #e0a13f;
  --ok:          #58b368;
  --err:         #d1626b;
  --radius:      10px;
  --shadow:      0 8px 28px rgba(0,0,0,.45);
  --sidebar-w:   256px;
  --detail-w:    340px;
  --bar-h:       56px;   /* viršutinė meniu eilutė */
  --sub-h:       40px;   /* antroji – skilties puslapiai */
  --top-h:       var(--bar-h);
  --knot-bg:     #0f151d;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }

#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--detail-w);
  grid-template-rows: var(--top-h) 1fr;
  grid-template-areas: "top top top" "side stage detail";
  height: 100%;
  height: 100dvh;   /* telefone – be naršyklės adreso juostos */
}

/* ------------------------------------------------------------------ TOPBAR */
/* Antroji eilutė rodoma tik skiltims, turinčioms kelis puslapius. */
#app.has-sub { --top-h: calc(var(--bar-h) + var(--sub-h)); }
#topbar {
  grid-area: top;
  display: flex; flex-direction: column;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  z-index: 20; min-width: 0;
}
#topbar .bar { height: var(--bar-h); display: flex; align-items: center; gap: 20px; padding: 0 16px; min-width: 0; }
#subnav {
  height: var(--sub-h); display: none; align-items: stretch; gap: 4px;
  padding: 0 16px 0 calc(16px + 210px + 20px);   /* po skilčių meniu */
  border-top: 1px solid var(--line); background: var(--bg-2);
  overflow-x: auto; scrollbar-width: none;
}
#subnav::-webkit-scrollbar { display: none; }
#app.has-sub #subnav { display: flex; }
.sub {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  color: var(--text-dim); padding: 0 14px; white-space: nowrap; font-size: 13.5px;
}
.sub:hover { color: var(--text); }
.sub.is-active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.brand-mark { font-size: 22px; }
.brand strong { display: block; font-size: 14px; letter-spacing: .2px; }
.brand small { display: block; color: var(--text-faint); font-size: 11px; }

#modes { display: flex; gap: 4px; background: var(--bg-2); padding: 4px; border-radius: 999px; }
.mode {
  border: 0; background: transparent; color: var(--text-dim);
  padding: 6px 16px; border-radius: 999px; cursor: pointer; transition: .15s;
  white-space: nowrap;
}
.mode:hover { color: var(--text); }
.mode.is-active { background: var(--accent); color: #06121c; font-weight: 600; }
.mode .lbl-short, .sub .lbl-short { display: none; }



.top-actions { margin-left: auto; }
.icon-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text-dim);
  cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }

/* ----------------------------------------------------------------- SIDEBAR */
#sidebar {
  grid-area: side;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.search-wrap { padding: 10px; border-bottom: 1px solid var(--line); }
#search, #gl-search {
  width: 100%; padding: 8px 11px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 8px; outline: none;
}
#search:focus, #gl-search:focus { border-color: var(--accent); }

.scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: #2b3746; border-radius: 4px; }

#part-list { flex: 1; padding: 6px 0 14px; min-height: 0; }

.cat-block { margin-bottom: 2px; }
.cat-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; user-select: none;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint);
}
.cat-head:hover { color: var(--text-dim); }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cat-head .n { margin-left: auto; font-size: 10px; opacity: .6; }

.part-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 12px 5px 28px; cursor: pointer; border-left: 2px solid transparent;
}
.part-row:hover { background: var(--panel-2); }
.part-row.is-sel { background: var(--accent-soft); border-left-color: var(--accent); }
.part-row .lt { flex: 1; }
.part-row .en { color: var(--text-faint); font-size: 11px; }
.part-row.is-done .lt::after { content: " ✓"; color: var(--ok); }

.side-foot {
  padding: 8px 12px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--text-faint);
}

/* ------------------------------------------------------------------- STAGE */
#stage { grid-area: stage; position: relative; background:
  radial-gradient(120% 90% at 50% 0%, #1b2836 0%, #0d1117 65%); min-height: 0; }
#scene { display: block; width: 100%; height: 100%; }

#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl {
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: auto; cursor: pointer;
  white-space: nowrap;
}
.lbl .dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid #0d1117; box-shadow: 0 0 0 1px currentColor;
  background: currentColor; margin: 0 auto;
}
.lbl .txt {
  position: absolute; left: 14px; top: -8px;
  background: rgba(13,17,23,.86); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 8px; font-size: 11.5px; color: var(--text);
}
.lbl.is-sel .txt { border-color: var(--accent); color: #fff; }
.lbl.dim { opacity: .38; }

#hover-chip {
  position: absolute; pointer-events: none; z-index: 5;
  background: rgba(13,17,23,.92); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 10px; font-size: 12.5px;
  transform: translate(12px, -50%); box-shadow: var(--shadow);
}
#hover-chip .en { color: var(--text-faint); font-size: 11px; margin-left: 6px; }

#viewbar {
  position: absolute; left: 12px; bottom: 12px; right: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  background: rgba(19,26,35,.86); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 12px; box-shadow: var(--shadow);
}
.vb-group { display: flex; align-items: center; gap: 8px; }
.vb {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-dim);
  padding: 4px 11px; border-radius: 7px; cursor: pointer;
}
.vb:hover, .vb.is-active { border-color: var(--accent); color: var(--text); }
.chk { display: flex; align-items: center; gap: 6px; color: var(--text-dim); cursor: pointer; font-size: 12.5px; }
.chk input { accent-color: var(--accent); }
.vb-group.trim { margin-left: auto; color: var(--text-dim); font-size: 12.5px; }
.vb-group.trim label { display: flex; align-items: center; gap: 8px; }
#trim { width: 130px; accent-color: var(--accent); }

/* -------------------------------------------------------------------- QUIZ */
#quiz-panel {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(520px, calc(100% - 28px));
  background: rgba(19,26,35,.94); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 14px; z-index: 6;
}
.q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.q-badge {
  background: var(--warn); color: #1a1205; font-weight: 700;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
}
#q-score { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.q-head .ghost-btn { margin-left: auto; }
.q-prompt { margin: 0; font-size: 15px; }
.q-prompt b { color: var(--accent); }
.q-feedback { margin: 8px 0 0; font-size: 13px; }
.q-feedback.ok { color: var(--ok); }
.q-feedback.err { color: var(--err); }
.q-actions { display: flex; gap: 8px; margin-top: 10px; }
.q-progress { height: 3px; background: var(--line); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.q-progress i { display: block; height: 100%; background: var(--accent); transition: width .25s; }

/* ------------------------------------------------------------------ DETAIL */
#detail {
  grid-area: detail; background: var(--panel);
  border-left: 1px solid var(--line);
  padding: 16px; overflow-y: auto; min-height: 0;
}
#detail h2 { margin: 6px 0 2px; font-size: 19px; line-height: 1.25; }
#detail-empty p { color: var(--text-dim); }
.cat-chip {
  display: inline-block; font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
}
#d-en { color: var(--text-faint); font-style: italic; margin: 0 0 12px; }
.desc { color: var(--text-dim); }
.d-actions { display: flex; gap: 8px; margin: 16px 0 4px; }
.primary-btn {
  background: var(--accent); color: #06121c; border: 0; font-weight: 600;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
}
.ghost-btn {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--line); padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
.ghost-btn:hover { color: var(--text); border-color: var(--accent); }

#d-related { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
#d-related h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.rel-chip {
  display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; font-size: 12px; cursor: pointer;
}
.rel-chip:hover { border-color: var(--accent); }

.legend { list-style: none; margin: 20px 0 0; padding: 0; }
.legend li { display: flex; align-items: center; gap: 9px; padding: 3px 0; color: var(--text-dim); font-size: 12.5px; }
.legend .cat-dot { width: 9px; height: 9px; }

/* ---------------------------------------------------------------- GLOSSARY */
#glossary {
  position: fixed; inset: var(--top-h) 0 0 0; background: var(--bg);
  z-index: 15; display: flex; flex-direction: column;
}
#glossary[hidden], [hidden] { display: none !important; }
#windcalc, #aid {
  position: fixed; inset: var(--top-h) 0 0 0; background: var(--bg);
  z-index: 15; display: flex; flex-direction: column;
}
.gl-head {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px; border-bottom: 1px solid var(--line);
}
.gl-head h2 { margin: 0; font-size: 17px; }
.gl-head input { max-width: 320px; }
.gl-help { display: none; margin-left: auto; }
#gl-body { flex: 1; padding: 20px 24px 60px; }
.gl-group { max-width: 1000px; margin: 0 auto 34px; }
.gl-group h3 { margin: 0 0 2px; font-size: 15px; }
.gl-group .note { margin: 0 0 12px; color: var(--text-faint); font-size: 12px; }
.gl-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.gl-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 13px;
}
.gl-card b { display: block; }
.gl-card .en { color: var(--text-faint); font-style: italic; font-size: 12px; }
.gl-card p { margin: 6px 0 0; color: var(--text-dim); font-size: 12.5px; }
.gl-empty { color: var(--text-faint); text-align: center; padding: 40px; }

/* ------------------------------------------------------------------ DIALOG */
dialog#help {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--text);
  max-width: 460px; padding: 22px; box-shadow: var(--shadow);
}
dialog#help::backdrop { background: rgba(0,0,0,.6); }
dialog#help h3 { margin: 0 0 12px; }
dialog#help ul { margin: 0 0 14px; padding-left: 18px; color: var(--text-dim); }
dialog#help li { margin-bottom: 7px; }
.hint { color: var(--text-faint); font-size: 12px; }
kbd {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; font-size: 11px; font-family: ui-monospace, monospace;
}

#loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--bg); color: var(--text-faint); z-index: 30;
  transition: opacity .4s; 
}
#loading.hide { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ RESPONSYVUMAS */
@media (max-width: 1180px) {
  :root { --sidebar-w: 216px; --detail-w: 300px; }
}
/* Siauresni ekranai – žr. skyrių „MOBILUSIS“ failo gale. */

/* ------------------------------- „Zonos“ – „Vidaus“ pojungiklis viewbar'e */
.chk-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 2px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
}
.chk-sub {
  position: relative;
  padding-left: 12px;
  font-size: 12px;
  opacity: .9;
}
/* kampinė linija rodo, kad tai „Vidaus“ pojungiklis */
.chk-sub::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: translateY(-70%);
}
.chk input:disabled { cursor: not-allowed; }
.chk:has(input:disabled) { opacity: .38; cursor: not-allowed; }

/* ================================================= KURSAI IR VĖJAS */
#courses {
  position: fixed; inset: var(--top-h) 0 0 0; background: var(--bg);
  z-index: 15; display: flex; flex-direction: column;
}
.crs-head { padding: 14px 24px 10px; border-bottom: 1px solid var(--line); }
.crs-head h2 { margin: 0; font-size: 17px; }
.crs-sub { margin: 2px 0 0; color: var(--text-faint); font-size: 12px; }
.crs-body { flex: 1; padding: 18px 24px 60px; }
.crs-card {
  max-width: 1180px; margin: 0 auto 22px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 18px;
}
.crs-card h3 { margin: 0 0 2px; font-size: 15px; }
.crs-card .note { margin: 0 0 14px; color: var(--text-faint); font-size: 12.5px; max-width: 78ch; }
.crs-split { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 380px); gap: 20px; align-items: start; }
@media (max-width: 900px) { .crs-split { grid-template-columns: 1fr; } }
.crs-fig { min-width: 0; }
.crs-svg { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; touch-action: none; cursor: grab; }
.crs-svg:active { cursor: grabbing; }

/* rodmenys */
.crs-read {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 12px;
}
.rd-top { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.rd-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.rd-en { color: var(--text-faint); font-style: italic; font-size: 12px; margin-top: 1px; }
.rd-nums { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 2px; }
.rd-big { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--accent); }
.rd-rmb { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rd-tack { font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); }
.rd-tack.port { color: #ef8b93; border-color: #ef8b9355; background: #ef8b9312; }
.rd-tack.stbd { color: #7cd493; border-color: #7cd49355; background: #7cd49312; }
.rd-tack.none { color: var(--text-faint); }
.rd-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.rd-sub span { color: var(--text-faint); }
.rd-tip { font-size: 12.5px; color: var(--warn); margin-top: 8px; }
.rs-abbr { font-size: 22px; letter-spacing: .5px; }
.rs-ltname { color: var(--text-dim); font-size: 13px; }

/* valdikliai */
.crs-ctl label { display: block; color: var(--text-dim); font-size: 12.5px; margin-bottom: 8px; }
.crs-ctl input[type="range"] { width: 100%; accent-color: var(--accent); margin-top: 4px; }
.crs-seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; margin-bottom: 12px; }
.seg {
  background: none; border: 0; color: var(--text-dim); cursor: pointer;
  padding: 5px 13px; border-radius: 999px; font-size: 12.5px;
}
.seg:hover { color: var(--text); }
.seg.is-on { background: var(--accent); color: #06121c; font-weight: 600; }
.crs-btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.crs-btns .chk { margin: 0; }
.crs-conv { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.crs-conv label { margin: 0; }
.crs-conv input[type="number"] {
  width: 92px; margin-left: 6px; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-variant-numeric: tabular-nums;
}
.crs-conv .chk { margin: 0; }

/* legenda */
.crs-legend, .crs-classes { list-style: none; margin: 14px 0 0; padding: 0; }
.crs-legend li {
  display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 7px;
  cursor: pointer; font-size: 13px; border: 1px solid transparent;
}
.crs-legend li:hover { background: var(--panel-2); }
.crs-legend li.is-on { background: var(--accent-soft); border-color: var(--accent); }
.crs-legend i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.crs-legend .lg-name { flex: 1; }
.crs-legend .lg-deg { color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: 12px; }
.crs-classes li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.crs-classes li:last-child { border-bottom: 0; }
.crs-classes b { display: block; color: var(--text); }
.crs-classes span { color: var(--text-faint); }
.crs-desc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.crs-desc .en { color: var(--text-faint); font-style: italic; }
.crs-desc p { margin: 4px 0 0; color: var(--text-dim); max-width: 92ch; }

/* --- kursų schema (SVG) --- */
.cd-windarrow { stroke: #6fb7e8; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.cd-windtxt { fill: #6fb7e8; font-size: 12px; letter-spacing: 2px; }
.cd-tack { fill: none; stroke-width: 7; stroke-linecap: round; }
.cd-tack.port { stroke: #d1626b; }
.cd-tack.stbd { stroke: #58b368; }
.cd-tack.none { stroke: #3a4757; }
.cd-tacklbl { font-size: 12.5px; }
.cd-tackdot.stbd { fill: #58b368; }
.cd-tackdot.port { fill: #d1626b; }
.cd-windrel { transition: transform .12s linear; }
.cd-tacklbl.port { fill: #ef8b93; }
.cd-tacklbl.stbd { fill: #7cd493; }
.cd-sector { opacity: .4; stroke: var(--bg); stroke-width: 1.5; transition: opacity .15s; }
.cd-sector.is-on { opacity: .78; }
.cd-sname { fill: #e6edf3; font-size: 12.5px; font-weight: 600; pointer-events: none; }
.cd-tick { stroke: var(--text-faint); stroke-width: 1.6; }
.cd-tick.minor { stroke-width: 1; opacity: .55; }
.cd-tnum { fill: var(--text-dim); font-size: 11px; }
.cd-tnum.minor { fill: var(--text-faint); font-size: 9.5px; }
.cd-axis { stroke: #4a5a6d; stroke-width: 1; stroke-dasharray: 5 6; }
.cd-hull { fill: #22303f; stroke: #cfe0f0; stroke-width: 2.5; }
.cd-deck { fill: #2c3d51; stroke: #6f849b; stroke-width: 1.2; }
.cd-sail { fill: #ffffff; fill-opacity: .95; stroke: #0d1117; stroke-width: 1.2; stroke-linejoin: round; }
.cd-sail.luff { fill-opacity: .25; stroke: #ffffff; stroke-dasharray: 5 4; animation: luff .5s linear infinite alternate; }
@keyframes luff { from { transform: skewX(-4deg); } to { transform: skewX(4deg); } }
.cd-cockpit { fill: #16202c; stroke: #7c92a9; stroke-width: 1; }
.cd-tiller { stroke: #9fb4c9; stroke-width: 2; stroke-linecap: round; }
.cd-boom { stroke: #0d1117; stroke-width: 3; stroke-linecap: round; }
.cd-mast { fill: #f0f6fc; }
.cd-boat { transition: transform .12s linear; }
.cd-vane-tab { stroke: #c9d4df; stroke-width: 2.5; stroke-linecap: round; }
.cd-vane-shaft { stroke: #f0c766; stroke-width: 2.5; stroke-linecap: round; }
.cd-vane-head, .cd-vane-fin { fill: #f0c766; stroke: #1a1205; stroke-width: 1; }
.cd-vane-hub { fill: #1a1205; stroke: #f0c766; stroke-width: 1.5; }
.cd-vane.is-luff .cd-vane-shaft { stroke: #ef8b93; }
.cd-vane.is-luff .cd-vane-head, .cd-vane.is-luff .cd-vane-fin { fill: #ef8b93; }
.cd-vane-note b { color: #f0c766; }
.cd-inset-bg { fill: #131a23; stroke: #3a4757; stroke-width: 1.5; }
.cd-inset-hull { fill: #22303f; stroke: #8193a6; stroke-width: 1.5; }
.cd-inset-lbl { fill: #f0c766; font-size: 12px; font-weight: 600; }

/* --- kompaso rožė (SVG) --- */
.rs-plate { fill: #eef2f7; stroke: #b9c6d4; stroke-width: 2; }
.rs-ring { fill: none; stroke: #4a5a6d; stroke-width: 1.2; }
.rs-tick { stroke: #4a5a6d; stroke-width: 1; }
.rs-tick.long { stroke-width: 1.6; }
.rs-deg { fill: #33414f; font-size: 10px; }
.rs-pt.dark { fill: #16202c; }
.rs-pt.light { fill: #9fb0c2; stroke: #16202c; stroke-width: .6; }
.rs-hair { stroke: #16202c; stroke-width: .7; }
.rs-hub { fill: #eef2f7; stroke: #16202c; stroke-width: 1.4; }
.rs-hub2 { fill: #9fb0c2; stroke: #16202c; stroke-width: 1; }
.rs-hub3 { fill: #16202c; }
.rs-name { fill: #16202c; font-weight: 600; }
.rs-name.main { font-size: 15px; }
.rs-name.quad { font-size: 12.5px; }
.rs-name.eighth { font-size: 9.5px; }
.rs-name.tiny { font-size: 7px; font-weight: 500; fill: #48586a; }
.rs-name.is-on { fill: #c2410c; }
.rs-needle path { fill: #d1442f; stroke: #7f2d33; stroke-width: 1; }
.rs-needle .rs-outer { fill: #d1442f; stroke: none; }
.rs-nline { stroke: #d1442f; stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .7; }
.rs-needle { transition: transform .12s linear; }

/* ------------------------------------------------ Kursų skilties testas */
.crs-quiz {
  border-bottom: 1px solid var(--line); background: var(--panel);
  padding: 12px 24px 14px; box-shadow: var(--shadow);
}
.cq-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cq-head #cq-score { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cq-head .ghost-btn { padding: 4px 10px; font-size: 12px; }
.cq-head #cq-skip { margin-left: auto; }
.crs-quiz .q-prompt { margin: 0; font-size: 15px; }
.cq-n { color: var(--text-faint); font-variant-numeric: tabular-nums; margin-right: 6px; }
.cq-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cq-opt {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.cq-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.crs-quiz .q-feedback:empty { display: none; }
.crs-quiz .q-progress { margin-top: 10px; }

/* Testo metu paliekamos tik schemos: šoniniai rodmenys, legendos ir
 * paaiškinimai atsakymus tiesiog pasakytų. */
#courses.is-quiz .crs-side,
#courses.is-quiz .crs-desc,
#courses.is-quiz .crs-card > .note { display: none; }
#courses.is-quiz .crs-split { grid-template-columns: 1fr; }

/* Testo metu pavadinimai paslepiami – atsakymą reikia žinoti, o ne perskaityti. */
.cd-sectors.is-quiz .cd-sname, .rs-names.is-quiz .rs-name { opacity: 0; }
.cd-sectors.is-quiz .is-flash .cd-sname,
.rs-names.is-quiz .rs-name.is-flash { opacity: 1; fill: #25ff7a; }
.cd-sector.is-flash { opacity: .95 !important; }
.rs-needle.is-hidden { display: none; }
.crs-svg.is-picking { cursor: pointer; }



/* ══════════════════════════════════════════════════════════ MAZGAI */
#knots {
  position: fixed; inset: var(--top-h) 0 0 0; background: var(--bg);
  z-index: 15; display: flex; flex-direction: column;
}
.kn-wrap { flex: 1; display: grid; grid-template-columns: 268px 1fr; min-height: 0; }
.kn-list { border-right: 1px solid var(--line); padding: 10px 0 30px; }
.kn-group { margin-bottom: 10px; }
.kn-group h4 {
  margin: 0; padding: 10px 14px 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-faint); display: flex; gap: 8px;
}
.kn-group h4 span { margin-left: auto; opacity: .7; }
.kn-row {
  display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; width: 100%;
  background: none; border: 0; border-left: 2px solid transparent; text-align: left;
  padding: 6px 14px; cursor: pointer; color: var(--text);
}
.kn-row:hover { background: var(--panel-2); }
.kn-row.is-sel { background: var(--accent-soft); border-left-color: var(--accent); }
.kn-row-num { grid-row: span 2; color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.kn-row-lt { font-size: 13px; }
.kn-row-en { font-size: 11px; color: var(--text-faint); }
.kn-main { padding: 18px 24px 50px; }
.kn-card { max-width: 780px; margin: 0 auto; }
.kn-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kn-num {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; font-size: 12px; color: var(--text-dim); white-space: nowrap;
}
.kn-title h3 { margin: 0; font-size: 19px; }
.kn-title .en { margin: 0; font-size: 12.5px; color: var(--text-faint); font-style: italic; }
.kn-str {
  margin-left: auto; font-size: 12px; color: var(--warn);
  border: 1px solid #e0a13f44; background: #e0a13f12; padding: 3px 10px; border-radius: 999px;
}
.kn-stage {
  background: var(--knot-bg); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.knot-svg { display: block; width: 100%; height: auto; }
.kn-ctl { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; }
.kn-ctl .primary-btn { min-width: 116px; }
.kn-ctl select { background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; font: inherit; font-size: 12.5px; }
.kn-str { cursor: help; }
#kn-scrub { flex: 1; accent-color: var(--accent); }
.kn-steps { margin: 12px 0 0; padding-left: 22px; color: var(--text-dim); font-size: 13.5px; }
.kn-steps li { padding: 3px 0; transition: color .15s; }
.kn-steps li.is-on { color: var(--accent); font-weight: 600; }
.kn-use { color: var(--text-dim); font-size: 13.5px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }

/* virvės piešinys – atkarpos rikiuojamos pagal gylį, spalva tamsinama */
.kseg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ks-lay { stroke-linecap: butt; opacity: .55; }
/* Ketera nutraukiama stačiai: apvalus antgalis ruožų sandūrose virsta ryškia
 * šviesia dėme (ruožai persidengia, tad stačias nutrūkimas nesimato). */
/* .kseg path (klasė + elementas) nusveria vien klasę, todėl čia reikia tokio pat
 * specifiškumo – antraip ketera gauna apvalius galus, o nulinio ilgio punktyro
 * brūkšnys su apvaliu galu piešiamas kaip taškas ruožo gale. */
.kseg path.ks-lit { stroke-linecap: butt; }
/* kontūras – plokšti galai, kad ruožų sandūrose nesimatytų tamsių lankų */
.kseg path.ks-edge { stroke-linecap: butt; }
.knot-svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.knot-cyl { fill: #b99a6b; stroke: #6d5433; stroke-width: 1.5; }
.knot-cyl.rope-cyl { fill: #b0503f; stroke: #4a1a12; }
.knot-cyl-hl { fill: #ffffff1f; }
.knot-obj rect { transition: fill-opacity .18s, opacity .18s; }
.knot-svg.is-xray .knot-cyl { fill-opacity: .22; }
.knot-svg.is-xray .knot-cyl-hl { opacity: .18; }
.knot-arrow { fill: none; stroke: #6fb7e8; stroke-width: 3; }
.knot-ahp { fill: #6fb7e8; }
.knot-lbl { fill: var(--text-dim); font-size: 12px; }
.knot-cyl.wire-cyl { fill: #8d98a6; stroke: #3b4450; }
.knot-steel { fill: none; stroke: #9aa6b4; stroke-linecap: round; stroke-linejoin: round; }
.knot-steel-edge { fill: none; stroke: #39424e; stroke-linecap: round; stroke-linejoin: round; }
.knot-steel-hl { fill: none; stroke: #d5dde6; stroke-linecap: round; opacity: .55; }
.knot-wood { fill: #b99a6b; stroke: #6d5433; stroke-width: 1.5; }
.knot-wood-ring { fill: none; stroke: #8a6c43; stroke-width: 1.2; opacity: .7; }
.knot-twine { fill: #e0ac48; stroke: #5a3d12; stroke-width: 1; }
.knot-cap rect { fill: #c9a06a; stroke: #1b0f0b; stroke-width: 2.2; }

/* ══════════════════════════════════════════════════════════ BURĖS */
#sails {
  position: fixed; inset: var(--top-h) 0 0 0; background: var(--bg);
  z-index: 15; display: flex; flex-direction: column;
}
.sl-wrap {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px;
  grid-template-areas: "side fig info";
}
.sl-side { grid-area: side; border-right: 1px solid var(--line); padding: 8px 0 24px; overflow-y: auto; }
.sl-side h4 {
  margin: 0; padding: 10px 14px 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-faint);
}
.sl-plan-list { display: flex; flex-direction: column; gap: 4px; padding: 0 10px 8px; }
.sl-plan {
  display: flex; align-items: baseline; gap: 8px; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; cursor: pointer; color: var(--text);
}
.sl-plan b { font-weight: 500; font-size: 13px; }
.sl-plan span { margin-left: auto; color: var(--text-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-plan:hover { border-color: var(--accent); }
.sl-plan.is-on { background: var(--accent-soft); border-color: var(--accent); }
.sl-plan.is-on span { color: var(--text-dim); }

.sl-row { display: flex; align-items: center; gap: 2px; padding: 0 8px 0 10px; border-left: 2px solid transparent; }
.sl-row:hover { background: var(--panel-2); }
.sl-row.is-sel { background: color-mix(in srgb, var(--c) 16%, transparent); border-left-color: var(--c); }
.sl-row.is-sel .sl-name .lt { font-weight: 600; }
.sl-row.is-off .sl-name { opacity: .5; }
.sl-tog { display: grid; place-items: center; width: 34px; height: 40px; cursor: pointer; flex: 0 0 auto; }
.sl-tog input { position: absolute; opacity: 0; pointer-events: none; }
.sl-tog i {
  width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--c);
  background: transparent; transition: background .12s;
}
.sl-tog input:checked + i { background: var(--c); box-shadow: inset 0 0 0 2px var(--panel); }
.sl-tog input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.sl-name {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  background: none; border: 0; padding: 6px 4px; cursor: pointer; text-align: left; color: var(--text);
}
.sl-name .lt { font-size: 13.5px; }
.sl-name .en { font-size: 11px; color: var(--text-faint); }

.sl-fig { grid-area: fig; min-width: 0; min-height: 0; display: flex; padding: 10px 12px; }
.sl-svg { width: 100%; height: 100%; display: block; }
.sl-info { grid-area: info; border-left: 1px solid var(--line); background: var(--panel); padding: 16px 18px 30px; overflow-y: auto; }

/* schema */
.sl-water { fill: #10304a; opacity: .45; }
.sl-wl { stroke: #4e7fa6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sl-hull { fill: #dfe6ee; stroke: #8193a6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sl-bottom { fill: #4d7fd6; stroke: #2b4f8f; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sl-cabin { fill: #eef2f6; stroke: #8193a6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sl-port { fill: #4b5d70; }
.sl-rail { fill: none; stroke: #9fb0c2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sl-stay { stroke: #93a1b1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sl-stay.thin { opacity: .45; }
.sl-spar { fill: #c9d4df; stroke: #5d6e80; stroke-width: .8; vector-effect: non-scaling-stroke; }
.sl-pole { stroke: #c9d4df; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sl-rig { pointer-events: none; }

.sl-sail { cursor: pointer; }
.sl-cloth {
  fill: var(--c); fill-opacity: .12; stroke: var(--c); stroke-width: 2;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill-opacity .15s;
}
.sl-sail:hover .sl-cloth { fill-opacity: .2; }
.sl-sail.is-sel .sl-cloth { fill-opacity: .42; stroke-width: 3.5; }
/* Pasirinkta burė turi išsiskirti iš visų kitų: kitos pritemdomos, jos – švyti. */
.sl-sails-g .sl-sail { transition: opacity .2s; }
.sl-sails-g.has-sel .sl-sail:not(.is-sel) { opacity: .3; }
.sl-sails-g.has-sel .sl-sail:not(.is-sel):hover { opacity: .65; }
.sl-glow {
  fill: none; stroke: var(--c); stroke-width: 12; stroke-opacity: .28;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none;
}
.sl-sail.is-flash .sl-cloth { animation: sl-flash .7s ease-out; }
.sl-sail.is-flash .sl-glow { animation: sl-glow .7s ease-out; }
@keyframes sl-flash { from { fill-opacity: .75; } to { fill-opacity: .42; } }
@keyframes sl-glow { from { stroke-width: 22; stroke-opacity: .5; } to { stroke-width: 12; stroke-opacity: .28; } }
@media (prefers-reduced-motion: reduce) { .sl-sail.is-flash .sl-cloth, .sl-sail.is-flash .sl-glow { animation: none; } }
.sl-reef { stroke: var(--c); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.sl-lbl { cursor: pointer; }
.sl-lbl text {
  fill: var(--c); font-weight: 700; letter-spacing: .02em;
  paint-order: stroke; stroke: var(--bg); stroke-linejoin: round;  /* storis – JS, metrais */
}
.sl-lead { stroke: #7d8b9b; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sl-dot { fill: var(--c); }
.sl-lbl.is-sel text { text-decoration: underline; text-underline-offset: 3px; }
.sl-labels .sl-lbl { transition: opacity .2s; }
.sl-labels.has-sel .sl-lbl:not(.is-sel) { opacity: .4; }
.sl-lbl.is-sel .sl-lead { stroke: var(--c); stroke-width: 1.6; }

/* aprašymas */
.sl-plan-note {
  margin: 0 0 14px; padding: 9px 11px; border-radius: 8px; font-size: 12.5px;
  background: var(--accent-soft); border: 1px solid #4ea3e055; color: var(--text-dim);
}
.sl-plan-note b { color: var(--text); font-weight: 600; }
.sl-title { display: flex; align-items: center; gap: 11px; }
.sl-title i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); flex: 0 0 auto; }
.sl-title h3 { margin: 0; font-size: 19px; }
.sl-title .en { margin: 0; color: var(--text-faint); font-style: italic; font-size: 12.5px; }
.sl-clear { margin-left: auto; flex: 0 0 auto; }
.sl-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.sl-facts div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; flex: 1 1 80px; }
.sl-facts dt { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.sl-facts dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.sl-facts small { display: block; color: var(--text-faint); font-size: 11px; }
.sl-set, .sl-desc { color: var(--text-dim); font-size: 13.5px; margin: 0 0 10px; }
.sl-set b { color: var(--text); font-weight: 600; }
.sl-reefchk { margin: 4px 0 10px; font-size: 13.5px; }
.sl-inplans { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.sl-inplans h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.sl-inplans .rel-chip { color: var(--text); }
.sl-empty { color: var(--text-faint); }

@media (max-width: 1180px) {
  .sl-wrap { grid-template-columns: 230px minmax(0, 1fr); grid-template-areas: "side fig" "side info"; grid-template-rows: minmax(0, 1fr) auto; }
  .sl-info { border-left: 0; border-top: 1px solid var(--line); max-height: 38vh; }
}

/* ------------------------------------------------ Modelio valdymo kortelė */
.ctl-help {
  position: absolute; top: 12px; right: 12px; z-index: 6; max-width: 280px;
  background: rgba(19,26,35,.9); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  font-size: 12.5px;
}
.ctl-toggle {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  color: var(--text); font-weight: 600; padding: 8px 12px;
}
.ctl-toggle::after { content: "▾"; float: right; color: var(--text-faint); }
.ctl-help.is-closed .ctl-toggle::after { content: "▸"; }
.ctl-help.is-closed .ctl-body { display: none; }
.ctl-body { padding: 0 12px 10px; }
.ctl-body dl { margin: 0; display: grid; gap: 4px; }
.ctl-body dl + dl { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.ctl-body dl div { display: flex; gap: 10px; align-items: baseline; }
.ctl-body dt { flex: 0 0 118px; color: var(--text); white-space: nowrap; }
.ctl-body dt kbd { margin-right: 2px; }
.ctl-body dd { margin: 0; color: var(--text-dim); }
.ctl-body small { color: var(--text-faint); display: block; }
/* Lietimo ekrane – pirštų gestai, kompiuteryje – pelė ir klaviatūra. */
.ctl-touch { display: none !important; }
@media (hover: none) and (pointer: coarse) {
  .ctl-mouse, .ctl-keys { display: none !important; }
  .ctl-touch { display: grid !important; margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
}
#app:has(#quiz-panel:not([hidden])) .ctl-help { top: auto; bottom: 76px; }

/* ═══════════════════════════════════════════════════════════ MOBILUSIS */
#btn-parts, #side-backdrop { display: none; }
.stage-btn {
  position: absolute; top: 10px; left: 10px; z-index: 7;
  background: rgba(19,26,35,.9); backdrop-filter: blur(8px);
  border: 1px solid var(--line); color: var(--text); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; box-shadow: var(--shadow);
}

/* Lietimo ekranuose užvedimo nėra – užvedimo etiketė liktų kabėti po paspaudimo. */
@media (hover: none) { #hover-chip { display: none !important; } }

@media (max-width: 1000px) {
  .brand small { display: none; }
  .brand { min-width: 0; }
  /* Skirtukų juosta slenkama – visi netelpa. */
  #modes { min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  #modes::-webkit-scrollbar { display: none; }
  #topbar .bar { gap: 12px; padding: 0 10px; }
  #subnav { padding-left: 10px; }
  .top-actions { flex: 0 0 auto; }
}

@media (max-width: 900px) {
  :root { --bar-h: 52px; --sub-h: 40px; }
  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--top-h) minmax(0, 1fr) auto;
    grid-template-areas: "top" "stage" "detail";
  }

  /* dalių sąrašas – stalčius iš kairės */
  #btn-parts { display: block; }
  #sidebar {
    position: fixed; top: var(--top-h); bottom: 0; left: 0; z-index: 25;
    width: min(86vw, 330px); box-shadow: var(--shadow);
    transform: translateX(-105%); transition: transform .22s ease;
  }
  #app.side-open #sidebar { transform: none; }
  #side-backdrop {
    display: block; position: fixed; inset: var(--top-h) 0 0 0; z-index: 24;
    background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .22s;
  }
  #app.side-open #side-backdrop { opacity: 1; pointer-events: auto; }
  .part-row { padding-top: 8px; padding-bottom: 8px; }

  /* aprašymas – apačioje, tik kai dalis pasirinkta */
  #detail { max-height: 42dvh; border-left: 0; border-top: 1px solid var(--line); padding: 12px 14px 14px; }
  #detail:has(#detail-empty:not([hidden])) { display: none; }
  #detail h2 { font-size: 17px; }
  .d-actions { margin-top: 10px; }

  /* rodinio juosta – viena slenkama eilutė */
  #viewbar {
    left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; gap: 12px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; font-size: 12px;
  }
  #viewbar::-webkit-scrollbar { display: none; }
  .vb-group { flex: 0 0 auto; }
  .vb-group.trim { margin-left: 0; }
  .vb { padding: 6px 11px; }
  .chk { white-space: nowrap; }
  #trim { width: 110px; }
  #quiz-panel { top: 56px; padding: 10px 12px; }
  .ctl-help { top: 10px; right: 10px; max-width: 220px; }
  .ctl-help .ctl-body dt { flex-basis: 96px; }
  .lbl .txt { font-size: 10.5px; }

  /* iOS priartina lauką, kurio šriftas < 16 px */
  input[type="search"], input[type="number"], select { font-size: 16px !important; }

  /* bendros skilčių antraštės */
  .crs-head { padding: 10px 14px 8px; }
  .crs-head h2 { font-size: 16px; }
  .crs-sub { font-size: 11.5px; }

  /* žodynas */
  .gl-head { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
  .gl-head input { max-width: none; flex: 1 1 200px; }
  #gl-body { padding: 14px 12px 40px; }
  .gl-grid { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }

  /* kursai */
  .crs-body { padding: 12px 10px 40px; }
  .crs-card { padding: 12px 12px 14px; margin-bottom: 14px; }
  .crs-split { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .crs-quiz { padding: 10px 14px 12px; }
  .cq-opt { padding: 9px 14px; }

  /* mazgai: sąrašas viršuje (ribotas aukštis), žemiau – mazgas */
  .kn-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .kn-list { max-height: 30dvh; border-right: 0; border-bottom: 1px solid var(--line); padding: 4px 0 8px; }
  .kn-main { padding: 12px 12px 40px; }
  .kn-title { flex-wrap: wrap; gap: 8px 10px; }
  .kn-title h3 { font-size: 17px; }
  .kn-str { margin-left: 0; }
  .kn-ctl { flex-wrap: wrap; gap: 10px 14px; }
  #kn-scrub { flex: 1 1 100%; order: 5; }

  /* burės: viena slenkama skiltis – schema, komplektai, burės, aprašymas */
  .sl-wrap {
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  }
  .sl-fig { order: 1; padding: 4px 6px 0; flex: 0 0 auto; }
  .sl-svg { height: auto; max-height: 64dvh; }
  .sl-side { order: 2; display: contents; }
  .sl-plans { order: 2; }
  .sl-sails { order: 3; }
  .sl-info { order: 4; border: 0; border-top: 1px solid var(--line); max-height: none; overflow: visible; padding: 14px 14px 40px; }
  .sl-side h4 { padding: 10px 14px 6px; }
  .sl-plan-list {
    flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 0 12px 6px;
  }
  .sl-plan-list::-webkit-scrollbar { display: none; }
  .sl-plan { flex: 0 0 auto; flex-direction: column; gap: 0; padding: 6px 12px; }
  .sl-plan span { margin-left: 0; }
  .sl-sail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; padding: 0 10px 10px; }
  .sl-row { border: 1px solid var(--line); border-radius: 8px; padding: 0 6px 0 2px; background: var(--bg-2); }
  .sl-row.is-sel { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, var(--bg-2)); }
  .sl-name .en { display: none; }

  dialog#help { width: calc(100% - 24px); max-height: 86dvh; overflow: auto; padding: 18px; }
}

@media (max-width: 520px) {
  /* Penkios skiltys turi tilpti be slinkimo: ženklas paslepiamas, tarpai mažesni. */
  .brand { display: none; }
  #topbar .bar { gap: 8px; }
  #modes { gap: 0; padding: 3px; flex: 1 1 auto; justify-content: space-between; }
  .mode { padding: 7px 5px; font-size: 13px; }
  #topbar .bar { padding: 0 6px; gap: 6px; }
  .mode .lbl-long, .sub .lbl-long { display: none; }
  .mode .lbl-short, .sub .lbl-short { display: inline; }
  .icon-btn { width: 28px; height: 28px; }
  .sub { padding: 0 12px; }
}

/* ------------------------------------------ Burės: burių ir laivų tipai */
.sl-head { display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; }
.sl-views { margin: 0 0 0 auto; }
.rg-wrap { flex: 1; min-height: 0; padding: 18px 24px 60px; }
.rg-group { max-width: 1180px; margin: 0 auto 30px; }
.rg-term { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 12px 16px; margin: 8px 0 10px; max-width: 820px; }
.rg-term h4 { margin: 0 0 4px; font-size: 16px; }
.rg-term h4 span { font-weight: 400; font-size: 12.5px; color: var(--text-faint); font-style: italic; }
.rg-term p { margin: 0; color: var(--text-dim); font-size: 13.5px; }
.rg-term b { color: var(--text); font-weight: 600; }
.rg-group h3 { margin: 0 0 2px; font-size: 15px; }
.rg-group .note { margin: 0 0 12px; color: var(--text-faint); font-size: 12.5px; }
.rg-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.rg-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 14px; }
.rg-card h4 { margin: 8px 0 4px; font-size: 15px; }
.rg-num { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line); font-size: 11.5px; color: var(--text-dim); vertical-align: 1px; }
.rg-card h4 span { display: block; font-weight: 400; font-style: italic; font-size: 12px; color: var(--text-faint); }
.rg-key-txt { margin: 0 0 6px; font-size: 13px; color: #f0c766; }
.rg-desc { margin: 0; font-size: 13px; color: var(--text-dim); }
.rg-svg { display: block; width: 100%; height: auto; background: #0f151d; border-radius: 8px; }
.rg-water { fill: #10304a; opacity: .5; }
.rg-wl { stroke: #4e7fa6; stroke-width: .6; }
.rg-hull { fill: #dfe6ee; stroke: #8193a6; stroke-width: .6; }
.rg-keel { fill: #4d7fd6; }
.rg-spar { stroke: #c9d4df; stroke-width: 1.6; stroke-linecap: round; }
.rg-stay { stroke: #7d8b9b; stroke-width: .5; }
.rg-sail { fill: #e6edf3; fill-opacity: .16; stroke: #b9c6d4; stroke-width: .9; stroke-linejoin: round; }
.rg-spar.rg-key { stroke: #f0c766; stroke-width: 2.2; }
.rg-sail.rg-key { fill: #f0c766; fill-opacity: .22; stroke: #f0c766; stroke-width: 1.3; }
.rg-post { stroke: #ef8b93; stroke-width: .8; stroke-dasharray: 2.5 2; }
.rg-lbl.rg-post-lbl { fill: #ef8b93; }
.rg-lbl { fill: #f0c766; font-size: 6.5px; font-weight: 600; paint-order: stroke; stroke: #0f151d; stroke-width: 2px; }
@media (max-width: 900px) {
  .sl-views { margin-left: 0; }
  .rg-wrap { padding: 12px 12px 40px; }
}
@media (max-width: 430px) {
  .sub { padding: 0 9px; }
  /* Septynios skiltys telpa tik be „?“ – telefone pagalba atveriama iš žodyno. */
  .top-actions { display: none; }
  .gl-help { display: inline-block; }
}
@media (max-width: 380px) {
  .mode { padding: 7px 3px; font-size: 12px; }
  #topbar .bar { padding: 0 6px; gap: 6px; }
  .icon-btn { width: 26px; height: 26px; }
  .sub { padding: 0 8px; font-size: 13px; }
}

/* ------------------------------------------------ Testas su variantais (burės, tipai) */
.mq { max-width: 720px; margin: 0 auto; }
.mq-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mq-score { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mq-head #mq-skip { margin-left: auto; }
.mq-head .ghost-btn { padding: 4px 10px; font-size: 12px; }
.mq-prompt { margin: 12px 0 10px; font-size: 16px; }
.mq-prompt q { color: var(--warn); quotes: "„" "“"; }
.mq-fig { background: #0f151d; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; margin-bottom: 4px; }
.mq-fig svg { display: block; width: 100%; height: auto; max-height: 46dvh; }
.mq-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.mq-options .cq-opt { text-align: left; padding: 10px 14px; font-size: 14px; }
.cq-opt.is-wrong { border-color: var(--err); color: var(--err); background: #d1626b14; }
.cq-opt.is-right { border-color: var(--ok); color: var(--ok); background: #58b36818; font-weight: 600; }
.cq-opt:disabled { cursor: default; }
.mq-explain { margin: 6px 0 12px; color: var(--text-dim); font-size: 13.5px; }
.mq-explain b { color: var(--text); }
/* teste paslepiami užrašai, kurie išduotų atsakymą (lieka tik paaiškinamieji) */
.quiz-fig .rg-lbl:not(.rg-keep) { display: none; }

/* ------------------------------------------------ Burės konstrukcija */
.bk-fig { align-items: center; justify-content: center; cursor: default; }
.bk-svg { display: block; width: 100%; height: 100%; max-height: 100%; }
.bk-cloth { fill: #e6edf3; fill-opacity: .08; stroke: #b9c6d4; stroke-width: 1.6; stroke-linejoin: round; }
.bk-line { stroke: #7d8b9b; stroke-width: 1; }
.bk-area { fill: transparent; }
.bk-chord { stroke: #64748b; stroke-width: 1; stroke-dasharray: 4 4; opacity: 0; }
.bk-edge { fill: none; stroke: transparent; stroke-width: 10; }
.bk-rope { stroke: #c9d4df; stroke-width: 3; stroke-linecap: round; }
.bk-slide { fill: none; stroke: #c9d4df; stroke-width: 1.6; }
.bk-pocket { fill: none; stroke: #93a1b1; stroke-width: 1.2; stroke-dasharray: 5 3; }
.bk-band { stroke: #93a1b1; stroke-width: 1.2; }
.bk-eyepatch { fill: #263243; stroke: #93a1b1; stroke-width: 1; }
.bk-eye { fill: none; stroke: #c9d4df; stroke-width: 1.2; }
.bk-nettle { fill: none; stroke: #c9d4df; stroke-width: 1.1; }
.bk-patch { fill: #263243; stroke: #93a1b1; stroke-width: 1.1; }
.bk-ring { fill: none; stroke: #e6edf3; stroke-width: 1.8; }
.bk-board { fill: #93a1b1; stroke: #e6edf3; stroke-width: 1; }
.bk-corner { fill: none; stroke: transparent; stroke-width: 10; }
.bk-part { cursor: pointer; }
/* pasirinkta dalis – akcentine spalva; kitos detalės pritemdomos */
.bk-svg.has-sel .bk-part:not(.is-sel) { opacity: .45; }
.bk-part.is-sel .bk-line, .bk-part.is-sel .bk-band, .bk-part.is-sel .bk-pocket, .bk-part.is-sel .bk-nettle,
.bk-part.is-sel .bk-slide, .bk-part.is-sel .bk-eye, .bk-part.is-sel .bk-ring { stroke: #f0c766; stroke-width: 2.4; }
.bk-part.is-sel .bk-rope { stroke: #f0c766; stroke-width: 5; }
.bk-part.is-sel .bk-edge, .bk-part.is-sel .bk-corner { stroke: #f0c766; stroke-width: 4; stroke-linecap: round; }
.bk-part.is-sel .bk-area { fill: #f0c766; fill-opacity: .3; }
.bk-part.is-sel .bk-chord { opacity: 1; stroke: #f0c766; }
.bk-part.is-sel .bk-patch, .bk-part.is-sel .bk-eyepatch, .bk-part.is-sel .bk-board { fill: #f0c76655; stroke: #f0c766; stroke-width: 2; }
.bk-num { cursor: pointer; }
.bk-num line { stroke: #64748b; stroke-width: 1; }
.bk-num circle { fill: #64748b; }
.bk-num .bk-badge { fill: #1d2734; stroke: #4ea3e0; stroke-width: 1.4; }
.bk-num text { fill: #e6edf3; font-size: 12px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.bk-num:hover .bk-badge { fill: #4ea3e033; }
.bk-num.is-sel .bk-badge { fill: #f0c766; stroke: #f0c766; }
.bk-num.is-sel text { fill: #1a1205; }
.bk-num.is-sel line { stroke: #f0c766; }
.bk-list { display: flex; flex-direction: column; padding: 0 8px 12px; }
.bk-row {
  display: grid; grid-template-columns: minmax(26px, max-content) 1fr; gap: 0 8px; text-align: left; align-items: baseline;
  background: none; border: 0; border-left: 2px solid transparent; color: var(--text); padding: 6px 8px; cursor: pointer;
}
.bk-row:hover { background: var(--panel-2); }
.bk-row.is-sel { background: #f0c76618; border-left-color: #f0c766; }
.bk-row .bk-n { grid-row: span 2; color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-row .lt { font-size: 13.5px; }
.bk-row .en { font-size: 11px; color: var(--text-faint); }
.bk-title { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bk-title .bk-n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: #f0c766; color: #1a1205; font-weight: 700;
}
.bk-title h3 { margin: 0; font-size: 19px; }
.bk-title .en { margin: 0; color: var(--text-faint); font-style: italic; font-size: 12.5px; }
.quiz-parts { max-height: 46dvh; }
.bk-mark { fill: none; stroke: #f0c766; stroke-width: 2.5; stroke-dasharray: 6 4; }
@media (max-width: 900px) {
  .bk-fig { padding: 6px; }
  .bk-svg { height: auto; max-height: 62dvh; }
  .bk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px; }
  .bk-row .en { display: none; }
}

/* ------------------------------------------------ Korpuso konstrukcija */
.hp-water { fill: #10304a; opacity: .45; }
.hp-wl { stroke: #4e7fa6; stroke-width: 1; stroke-dasharray: 6 4; }
.hp-axis { stroke: #64748b; stroke-width: 1; stroke-dasharray: 8 5; opacity: .6; }
.hp-hull { fill: #e6edf3; fill-opacity: .06; }
.hp-shell { fill: none; stroke: #c9d4df; stroke-linecap: round; stroke-linejoin: round; }
.hp-wood { fill: #8a6c43; stroke: #c9a26e; stroke-width: 1; }
.hp-frame { fill: none; stroke: #a8854f; stroke-linecap: round; }
.hp-web { stroke: #a8854f; stroke-opacity: .55; }
.hp-floor { stroke: #a8854f; stroke-opacity: .7; }
.hp-ballast { fill: #4b5d70; stroke: #93a1b1; stroke-width: 1; }
.hp-bolt { stroke: #c9d4df; stroke-width: 2; fill: none; }
.hp-dash { fill: none; stroke: #c9a26e; stroke-width: 1; stroke-dasharray: 4 3; }
.hp-tiller { stroke: #c9a26e; stroke-width: 3; stroke-linecap: round; }
.hp-steel { fill: none; stroke: #c9d4df; stroke-width: 4; stroke-linecap: round; }
.hp-rope { fill: none; stroke: #e0ac48; stroke-width: 1.5; }
.bk-part.is-sel .hp-wood { fill: #f0c766; stroke: #fff3c4; }
.bk-part.is-sel .hp-frame, .bk-part.is-sel .hp-shell, .bk-part.is-sel .hp-steel { stroke: #f0c766; stroke-opacity: 1; }
.bk-part.is-sel .hp-rope { stroke: #fff3c4; }
.hp-svg.has-sel .bk-part:not(.is-sel) { opacity: .55; }

/* ------------------------------------------------ Priekinių burių panaudojimas */
.hs-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; overflow: hidden; }
.hs-fig { min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px; }
.hs-svg { width: 100%; height: 100%; max-height: 100%; touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hs-svg text { pointer-events: none; }
.hs-side { border-left: 1px solid var(--line); background: var(--panel); padding: 16px 18px 30px; overflow-y: auto; }
.hs-cell { fill: none; stroke: #2a3646; stroke-width: 1; }
.hs-band { opacity: .28; transition: opacity .15s; }
.hs-band.is-on { opacity: .95; }
.hs-grid { fill: none; stroke: #3a4757; stroke-width: 1; }
.hs-deg { fill: var(--text-dim); font-size: 11px; text-anchor: middle; }
.hs-lead { stroke: #64748b; stroke-width: 1; }
.hs-name { fill: var(--text-dim); font-size: 11.5px; text-anchor: end; }
.hs-name.is-on { fill: var(--text); font-weight: 700; }
.hs-wind { stroke: #6fb7e8; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hs-windtxt { fill: #6fb7e8; font-size: 12px; text-anchor: middle; letter-spacing: 1px; }
.hs-ray { stroke: #f0c766; stroke-width: 2; stroke-dasharray: 5 4; }
.hs-boat { fill: #dfe6ee; stroke: #8193a6; stroke-width: 1.2; }
.hs-handle { fill: #f0c766; stroke: #1a1205; stroke-width: 2; cursor: grab; }
.hs-read { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.hs-big { font-size: 32px; color: var(--accent); font-variant-numeric: tabular-nums; }
.hs-course { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.hs-slider { display: block; color: var(--text-dim); font-size: 12.5px; margin-bottom: 14px; }
.hs-slider input { width: 100%; accent-color: var(--accent); margin-top: 4px; }
.hs-row { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); opacity: .5; transition: opacity .15s; }
.hs-row.is-on { opacity: 1; }
.hs-row i { width: 14px; height: 14px; border-radius: 3px; margin-top: 3px; }
.hs-row b { font-size: 14px; }
.hs-range { color: var(--text-faint); font-size: 12px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.hs-ok { float: right; font-size: 12px; color: var(--ok); }
.hs-row:not(.is-on) .hs-ok { color: var(--text-faint); }
.hs-row p { margin: 3px 0 0; color: var(--text-dim); font-size: 12.5px; }
.hs-note { color: var(--text-faint); font-size: 11.5px; margin-top: 12px; }
@media (max-width: 900px) {
  .hs-wrap { display: block; overflow-y: auto; }
  .hs-fig { padding: 4px 8px 0; }
  .hs-svg { height: auto; max-height: 58dvh; }
  .hs-side { border-left: 0; border-top: 1px solid var(--line); }
}

/* ------------------------------------------------ Pirmoji pagalba */
.fa-urgent { color: var(--err); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.fa-icon { font-size: 26px; }
.fa-urgent-chip { color: var(--err); border-color: #d1626b55; background: #d1626b14; cursor: default; }
.fa-summary { color: var(--text); font-size: 14.5px; margin: 0 0 6px; }
.fa-h { margin: 16px 0 6px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.fa-h.fa-dont { color: var(--err); }
.fa-steps, .fa-list { margin: 0; padding-left: 22px; color: var(--text-dim); font-size: 14px; }
.fa-steps li, .fa-list li { padding: 3px 0; }
.fa-steps b, .fa-list b { color: var(--text); }
.fa-note b, .fa-summary b { color: var(--text); }
.fa-metro { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px 14px; margin: 16px 0 4px;
  padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.fa-beat { justify-self: end; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: #d1626b22; border: 2px solid #d1626b88; font-size: 22px; font-variant-numeric: tabular-nums; text-align: center; }
.fa-beat.is-beat { animation: fa-beat .25s ease-out; }
.fa-beat.is-breath { background: #4ea3e022; border-color: var(--accent); font-size: 14px; }
@keyframes fa-beat { from { transform: scale(1.14); background: #d1626baa; } to { transform: scale(1); } }
.fa-metro-note { grid-column: 1 / -1; margin: 0; color: var(--text-faint); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .fa-beat.is-beat { animation: none; background: #d1626b66; } }

/* ------------------------------------------------ Pirmosios pagalbos iliustracijos */
.fa-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin: 12px 0 4px; }
.fa-figs:has(> :only-child) { grid-template-columns: minmax(0, 480px); }
.fa-cockpit { fill: #263243; stroke: #3a4757; }
.fa-fig { margin: 0; background: #0f151d; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 8px 10px; }
.fa-svg { display: block; width: 100%; height: auto; }
.fa-fig figcaption { color: var(--text-dim); font-size: 12.5px; margin-top: 6px; }
.fa-lbl { fill: var(--text-dim); font-size: 11px; }
.fa-lbl.fa-strong { fill: #f0c766; font-weight: 600; }
.fa-arrow { fill: none; stroke: #f0c766; stroke-width: 2; }
.fa-deck { stroke: #3a4757; stroke-width: 2; }
.fa-water { fill: #10304a; opacity: .6; }
.fa-hull { fill: #dfe6ee; stroke: #8193a6; stroke-width: 1.2; }
.fa-boat { fill: #1d2734; stroke: #c9d4df; stroke-width: 2; }
.fa-mat { fill: #1d2734; stroke: #2a3646; }
.fa-wind { stroke: #6fb7e8; stroke-width: 3; stroke-linecap: round; fill: none; opacity: .8; }
.fa-block { stroke: #c9d4df; stroke-width: 5; stroke-linecap: round; }
.fa-sling { fill: #f2f4f7; stroke: #c9d4df; stroke-width: 1.5; stroke-linejoin: round; }
.fa-sling-strap { stroke: #f2f4f7; stroke-width: 6; stroke-linecap: round; fill: none; }
.fa-tap { fill: #93a1b1; }
.fa-a-drops circle { fill: #6fb3e0; }
.fa-awning { fill: #4ea3e0; opacity: .7; }
.fa-horizon { stroke: #6fb7e8; stroke-width: 1.5; }
.fa-gaze { stroke: #f0c766; stroke-width: 1.5; stroke-dasharray: 5 4; }
.fa-lcd { font-family: ui-monospace, monospace; font-size: 22px; font-weight: 700; fill: #10301a; }
.fa-say { fill: #fff; font-weight: 800; font-size: 16px; }
.fa-say-sm { fill: #fff; font-size: 11px; }
.fa-bubble .fa-say { fill: #1a1205; }

/* animacijos – visos sustabdomos, jei prašoma mažiau judesio */
.fa-guide { stroke: #f0c766; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; }
.fa-strap { stroke: #e0ac48; stroke-width: 3; fill: none; }
.fa-tongue { fill: #c46a6a; }
.fa-air-bad { fill: none; stroke: #d1626b; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 4 5; }
.fa-air-good { fill: none; stroke: #58b368; stroke-width: 4; stroke-linecap: round; }
.fa-airway { fill: none; stroke: #d1626b; stroke-width: 5; stroke-linecap: round; animation: fa-airway 4s ease-in-out infinite; }
.fa-lbl.fa-bad { fill: #ef8b93; font-weight: 600; }
.fa-lbl.fa-good { fill: #7cd493; font-weight: 600; }
.fa-arrow-soft { opacity: .6; }
/* paspaudimai: 110/min = 0,545 s; žemyn greitai, atsitiesia visiškai */
.fa-a-compress { animation: fa-compress 0.545s ease-in-out infinite; }
@keyframes fa-compress { 0%, 100% { transform: translateY(0); } 40%, 50% { transform: translateY(14px); } }
.fa-a-chest { transform-origin: 112px 166px; animation: fa-chest 0.545s ease-in-out infinite; }
@keyframes fa-chest { 0%, 100% { transform: scaleY(1); } 40%, 50% { transform: scaleY(.6); } }
.fa-depth { animation: fa-blink 0.545s steps(1) infinite; }
/* kvėpavimo takai: galva atsilošia → liežuvis atsitraukia → takas žalias */
.fa-a-tilt { transform-origin: 128px 136px; animation: fa-tilt 4s ease-in-out infinite; }
@keyframes fa-tilt { 0%, 15% { transform: rotate(16deg); } 45%, 85% { transform: rotate(-12deg); } 100% { transform: rotate(16deg); } }
.fa-a-hands { animation: fa-hands 4s ease-in-out infinite; }
@keyframes fa-hands { 0%, 15% { opacity: 0; } 30%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fa-airway { 0%, 30% { stroke: #d1626b; stroke-dasharray: 4 6; } 45%, 85% { stroke: #58b368; stroke-dasharray: none; } 100% { stroke: #d1626b; } }
.fa-a-closed { animation: fa-show-a 4s steps(1) infinite; }
.fa-a-open { animation: fa-show-b 4s steps(1) infinite; }
@keyframes fa-show-a { 0% { opacity: 1; } 42% { opacity: 0; } 92% { opacity: 1; } }
@keyframes fa-show-b { 0% { opacity: 0; } 42% { opacity: 1; } 92% { opacity: 0; } }
.fa-a-lift { animation: fa-lift 4s ease-in-out infinite; }
@keyframes fa-lift { 0%, 10% { transform: translateY(150px); } 70%, 100% { transform: translateY(98px); } }
/* juosta nuo rankos (y 84) iki kūno: 66 px vandenyje → 14 px ant denio */
.fa-a-strap { transform-box: view-box; transform-origin: 0 84px; animation: fa-strap 4s ease-in-out infinite; }
@keyframes fa-strap { 0%, 10% { transform: scaleY(1); } 70%, 100% { transform: scaleY(.21); } }
.fa-a-shiver { animation: fa-shiver .18s linear infinite; }
@keyframes fa-shiver { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
/* gikas iš laivagalio: giko galas eina iš kairės į dešinę ir atgal; įgula pasilenkia, kol jis virš kokpito */
.fa-a-boomx { animation: fa-boomx 4s ease-in-out infinite; }
@keyframes fa-boomx { 0%, 10% { transform: translateX(-130px); } 40%, 60% { transform: translateX(130px); } 90%, 100% { transform: translateX(-130px); } }
.fa-a-duck { animation: fa-duck 4s ease-in-out infinite; }
@keyframes fa-duck { 0%, 4%, 46%, 54%, 96%, 100% { transform: translateY(0); } 14%, 36%, 64%, 86% { transform: translateY(46px); } }
.fa-bubble { animation: fa-blink 1.6s steps(1) infinite; }
.fa-a-press { animation: fa-press 1.2s ease-in-out infinite; }
@keyframes fa-press { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.fa-a-drops { animation: fa-drops .6s linear infinite; }
@keyframes fa-drops { from { transform: translateY(-18px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
.fa-a-hand { transform-origin: 260px 76px; animation: fa-spin 4s linear infinite; }
@keyframes fa-spin { to { transform: rotate(360deg); } }
.fa-a-strike { transform-origin: 82px 66px; animation: fa-strike 1s ease-in infinite; }
@keyframes fa-strike { 0%, 30% { transform: rotate(-55deg); } 55% { transform: rotate(0); } 70%, 100% { transform: rotate(-55deg); } }
.fa-a-hit { animation: fa-hit 1s steps(1) infinite; }
@keyframes fa-hit { 0%, 52% { opacity: 0; } 53%, 68% { opacity: 1; } 69%, 100% { opacity: 0; } }
.fa-a-thrust { animation: fa-thrust 1s ease-in-out infinite; }
@keyframes fa-thrust { 0%, 25%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, -12px); } }
.fa-a-bend { transform-origin: 140px 118px; animation: fa-bend 1s ease-in-out infinite; }
@keyframes fa-bend { 0%, 25%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg); } }
.fa-a-sun { transform-origin: 270px 40px; animation: fa-spin 18s linear infinite; }
.fa-a-rock { transform-origin: 170px 170px; animation: fa-rock 3s ease-in-out infinite; }
@keyframes fa-rock { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.fa-a-blink { animation: fa-blink 1.2s steps(1) infinite; }
@keyframes fa-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .35; } }
/* kraujavimas – keturi žingsniai po 2 s (vaizdas iš viršaus) */
.fa-b-drops { animation: fa-b-drops 8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes fa-b-drops { 0% { opacity: .4; transform: scale(.6); } 22% { opacity: 1; transform: scale(1.1); } 25%, 100% { opacity: 0; } }
.fa-b-pad1 { animation: fa-b-pad1 8s steps(1) infinite; }
@keyframes fa-b-pad1 { 0% { opacity: 0; } 25% { opacity: 1; } }
.fa-b-soak { animation: fa-b-soak 8s ease-in infinite; transform-box: fill-box; transform-origin: center; }
@keyframes fa-b-soak { 0%, 50% { opacity: 0; transform: scale(.3); } 64%, 100% { opacity: .75; transform: scale(1); } }
.fa-b-pad2 { animation: fa-b-pad2 8s steps(1) infinite; }
@keyframes fa-b-pad2 { 0% { opacity: 0; } 75% { opacity: 1; } }
/* delnas atsiranda 2 žingsnyje, 4 žingsnyje trumpam pakyla (dedamas naujas tvarstis) */
.fa-b-press { animation: fa-b-press 8s ease-in-out infinite; }
@keyframes fa-b-press { 0%, 24.9% { opacity: 0; transform: translateY(40px); } 25% { opacity: 1; transform: translateY(40px); } 30% { transform: translateY(0); }
  71% { opacity: 1; transform: translateY(0); } 73% { opacity: 0; transform: translateY(40px); } 76% { opacity: 0; transform: translateY(40px); } 80%, 100% { opacity: 1; transform: translateY(0); } }
.fa-b-squeeze { transform-box: fill-box; transform-origin: center; animation: fa-b-squeeze .9s ease-in-out infinite; }
@keyframes fa-b-squeeze { 0%, 100% { transform: scale(1); } 50% { transform: scale(.95); } }
.fa-b-ring { fill: none; stroke: #f0c766; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: fa-b-ring 1.2s ease-out infinite; }
.fa-b-ring2 { animation-delay: .6s; }
@keyframes fa-b-ring { from { transform: scale(1.25); opacity: .9; } to { transform: scale(.75); opacity: 0; } }
.fa-b-cap1 { animation: fa-c4a 8s steps(1) infinite; }
.fa-b-cap2 { animation: fa-c4b 8s steps(1) infinite; }
.fa-b-cap3 { animation: fa-c4c 8s steps(1) infinite; }
.fa-b-cap4 { animation: fa-c4d 8s steps(1) infinite; }
@keyframes fa-c4a { 0% { opacity: 1; } 25% { opacity: 0; } }
@keyframes fa-c4b { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } }
@keyframes fa-c4c { 0% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } }
@keyframes fa-c4d { 0% { opacity: 0; } 75% { opacity: 1; } }

/* trikampė skarelė – trys žingsniai po 2 s */
.fa-step2 { animation: fa-st2 6s steps(1) infinite; }
.fa-step3 { animation: fa-st3 6s steps(1) infinite; }
.fa-cap1 { animation: fa-c1 6s steps(1) infinite; }
.fa-cap2 { animation: fa-c2 6s steps(1) infinite; }
.fa-cap3 { animation: fa-c3 6s steps(1) infinite; }
@keyframes fa-st2 { 0% { opacity: 0; } 33% { opacity: 1; } }
@keyframes fa-st3 { 0% { opacity: 0; } 66% { opacity: 1; } }
@keyframes fa-c1 { 0% { opacity: 1; } 33% { opacity: 0; } }
@keyframes fa-c2 { 0% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 0; } }
@keyframes fa-c3 { 0% { opacity: 0; } 66% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [class*="fa-a-"], [class*="fa-b-"], .fa-bubble, .fa-step2, .fa-step3, .fa-cap3 { animation: none !important; }
  .fa-cap1, .fa-cap2, .fa-b-cap1, .fa-b-cap2, .fa-b-cap3, .fa-b-drops { display: none; }
  .fa-b-ring { display: none; }
}

/* Išgyvenimo vandenyje grafikas (hipotermija) */
.sv-fig { max-width: 560px; }
.sv-grid { stroke: #1f2a37; stroke-width: 1; }
.sv-tick { fill: var(--text-faint); font-size: 12px; }
.sv-axis { fill: var(--text-dim); font-size: 12.5px; }
.sv-band { fill: #3d8fd6; opacity: .55; }
.sv-mean { fill: none; stroke: #ef4f5c; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.sv-mean-lbl { fill: #ff8a93; font-size: 13px; font-weight: 600; }
.sv-zone { fill: var(--text-dim); font-size: 12.5px; }
.sv-zone.sv-on-band { fill: #e6f1fb; }
.sv-cursor { stroke: #f0c766; stroke-width: 1.5; stroke-dasharray: 4 3; }
.sv-dot { stroke: #0f151d; stroke-width: 2; }
.sv-dot-mean { fill: #ef4f5c; }
.sv-dot-slow, .sv-dot-fast { fill: #8cc6ef; }
.sv-ctrl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 4px 0; font-size: 13px; color: var(--text-dim); }
.sv-ctrl b { color: var(--text); font-variant-numeric: tabular-nums; }
.sv-ctrl input { flex: 1 1 200px; accent-color: var(--accent); }
.sv-read { margin: 6px 4px 0; font-size: 13.5px; color: var(--text-dim); }
.sv-read b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ Apžvalginiai sąrašai */
.rg-rigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 6px 18px; margin-top: 10px; }
.rg-rig { font-size: 13px; color: var(--text-dim); }
.rg-rig > b { color: var(--text); }
.rg-rig ul { margin: 6px 0 0; padding-left: 18px; }
.rg-rig li { padding: 2px 0; }
.rg-go { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.rg-go:hover { text-decoration: underline; }
.rg-nogo { color: var(--text); font-weight: 600; }
.ship-parts { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.ship-parts h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .04em; }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list li { padding: 5px 0; border-bottom: 1px solid #ffffff08; font-size: 12.5px; color: var(--text-dim); }
.sp-list li > b, .sp-go { color: var(--text); font-weight: 600; }
.sp-list li > span { display: block; }
.sp-go { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.sp-go:hover { text-decoration: underline; }
.sp-subs { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sp-sub { font-weight: 400; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.hp-els { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 10px; }
.hp-el { background: var(--bg-2); border: 1px solid var(--line); color: var(--text-dim); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.hp-el:hover { color: var(--text); border-color: var(--accent); }
.hp-el.is-sel { background: #f0c76626; border-color: #f0c766; color: var(--text); }

/* nuorodos į 3D modelį, piešinius ir žodyną */
.go-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.go-link:hover { text-decoration: underline; }
.go-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; margin-left: 3px; padding: 0 4px; border-radius: 4px; vertical-align: 5px; }
.go-part { color: #7cd493; border: 1px solid #7cd49366; }
.go-card { color: #f0c766; border: 1px solid #f0c76666; }
.go-gloss { color: #93a1b1; border: 1px solid #93a1b166; }
.rg-card.is-flash { animation: rg-flash 1.6s ease-out; }
@keyframes rg-flash { 0%, 30% { box-shadow: 0 0 0 3px #f0c766; } 100% { box-shadow: 0 0 0 3px transparent; } }

/* ------------------------------------------------ Vairas */
.rd-hull { fill: #dfe6ee; fill-opacity: .12; stroke: #8193a6; stroke-width: 1.5; }
.rd-transom { stroke: #c9d4df; stroke-width: 5; stroke-linecap: round; }
.rd-wood { fill: #8a6c43; stroke: #c9a26e; stroke-width: 1.2; }
.rd-metal { fill: #9aa6b4; stroke: #39424e; stroke-width: 1; }
.rd-hole { fill: #1a2230; }
.rd-pin { stroke: #c9d4df; stroke-width: 3; }
.rd-axis { stroke: #f0c766; stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .7; }
.rd-ext { stroke: #c9d4df; stroke-width: 4; stroke-linecap: round; }
.rd-hinge { fill: #39424e; stroke: #c9d4df; stroke-width: 1.5; }
.rd-knob { fill: #d1626b; }
.rd-note { fill: var(--text-faint); font-size: 11px; }
.bk-part.is-sel .rd-wood, .bk-part.is-sel .rd-metal { fill: #f0c766; stroke: #fff3c4; }
.bk-part.is-sel .rd-pin, .bk-part.is-sel .rd-ext { stroke: #f0c766; }
.bk-part.is-sel .rd-axis { stroke: #f0c766; opacity: 1; stroke-width: 3; }
.rd-play { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.rd-play h4 { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.rd-topview { display: block; width: 100%; max-width: 300px; margin: 0 auto 6px; height: auto; background: #0f151d; border-radius: 8px; }
.rd-boat { fill: #1d2734; stroke: #c9d4df; stroke-width: 2; }
.rd-cockpit { fill: #263243; stroke: #3a4757; }
.rd-tiller { stroke: #c9a26e; stroke-width: 8; stroke-linecap: round; transition: all .15s; }
.rd-blade { stroke: #8a6c43; stroke-width: 10; stroke-linecap: round; }
.rd-turn { fill: none; stroke: #f0c766; stroke-width: 3; }
.rd-rule { font-size: 13.5px; color: var(--text); margin: 6px 0 0; }
.rd-rule b { color: #f0c766; }
.rd-rule span { color: var(--text-faint); font-size: 12px; }

/* ------------------------------------------------ Vėjų skaičiavimas */
#windcalc, #forces, #maneuvers { position: fixed; inset: var(--top-h) 0 0 0; background: var(--bg); z-index: 15; display: flex; flex-direction: column; }
.wc-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; margin: 8px 0 10px; }
.wc-def { background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid; border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--text-dim); }
.wc-def b { display: block; color: var(--text); margin-bottom: 2px; }
.wc-def.wc-t { border-left-color: #58b368; } .wc-def.wc-k { border-left-color: #d1626b; } .wc-def.wc-v { border-left-color: #e6edf3; }
.wc-svg { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.wc-axis { stroke: #3a4757; stroke-width: 1; stroke-dasharray: 5 6; }
.wc-boat path { fill: #22303f; stroke: #cfe0f0; stroke-width: 2; }
.wc-mast { fill: #f0f6fc; }
.wc-vec line { stroke-width: 3; stroke-linecap: round; }
.wc-vec.wc-t line { stroke: #58b368; } .wc-vec.wc-t path { fill: #58b368; }
.wc-vec.wc-k line { stroke: #d1626b; } .wc-vec.wc-k path { fill: #d1626b; }
.wc-vec.wc-v line { stroke: #e6edf3; } .wc-vec.wc-v path { fill: #e6edf3; }
.wc-vec line + line { stroke-width: 1.6; }
.wc-lbl { font-size: 13px; font-weight: 700; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.wc-lbl.wc-t { fill: #7cd493; } .wc-lbl.wc-k { fill: #ef8b93; } .wc-lbl.wc-v { fill: #ffffff; }
.wc-arc { fill: none; stroke-width: 1.5; stroke-dasharray: 3 3; }
.wc-arc.wc-t { stroke: #58b368; } .wc-arc.wc-v { stroke: #e6edf3; }
.wc-note { fill: var(--text-faint); font-size: 11px; }
.wc-legend rect { fill: #131a23; stroke: var(--line); }
.wc-ang { font-size: 13px; font-weight: 700; font-style: italic; }
.wc-ang.wc-t { fill: #7cd493; } .wc-ang.wc-v { fill: #ffffff; }
.wc-ctl label { display: block; color: var(--text-dim); font-size: 12.5px; margin-bottom: 10px; }
.wc-ctl b { color: var(--text); }
.wc-ctl input[type="range"] { width: 100%; accent-color: var(--accent); margin-top: 4px; }
.wc-score { font-weight: 400; font-size: 12.5px; color: var(--text-faint); margin-left: 8px; }
.wc-q { font-size: 15px; margin: 4px 0 10px; }
.wc-q b { color: var(--accent); }
.wc-fields { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.wc-fields label { display: flex; flex-direction: column; gap: 4px; color: var(--text-dim); font-size: 12.5px; }
.wc-fields input { width: 150px; background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 16px; font-variant-numeric: tabular-nums; }
.wc-fields input.is-ok { border-color: var(--ok); } .wc-fields input.is-bad { border-color: var(--err); }
.wc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.wc-sol { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-top: 8px; font-size: 13.5px; color: var(--text-dim); }
.wc-sol ol { margin: 0; padding-left: 20px; } .wc-sol li { padding: 3px 0; } .wc-sol b { color: var(--text); }

/* ------------------------------------------------ Jėgos burėje */
.fc-defs { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.wc-def.fc-a { border-left-color: #f0c766; } .wc-def.fc-y { border-left-color: #4ea3e0; } .wc-def.fc-x { border-left-color: #b48ef0; }
.wc-def.fc-t { border-left-color: #58b368; } .wc-def.fc-d { border-left-color: #d1626b; }
.fc-svg { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.fc-boat { fill: #22303f; stroke: #cfe0f0; stroke-width: 2; }
.fc-sail { fill: none; stroke: #f2f4f7; stroke-width: 5; stroke-linecap: round; }
.fc-mast { fill: #f0f6fc; stroke: #0d1117; stroke-width: 1.5; }
.fc-arrow line { stroke-width: 4; stroke-linecap: round; }
.fc-arrow text { font-size: 15px; font-weight: 800; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.fc-arrow.is-ghost line { stroke-dasharray: 6 4; stroke-width: 2.5; opacity: .75; }
.fc-arrow.is-ghost path { opacity: .6; }
.fc-a line { stroke: #f0c766; stroke-width: 5; } .fc-a path, .fc-a text { fill: #f0c766; }
.fc-y line { stroke: #4ea3e0; } .fc-y path, .fc-y text { fill: #6fb7e8; }
.fc-x line { stroke: #b48ef0; } .fc-x path, .fc-x text { fill: #c9a8f5; }
.fc-t line { stroke: #58b368; } .fc-t path, .fc-t text { fill: #7cd493; }
.fc-d line { stroke: #d1626b; } .fc-d path, .fc-d text { fill: #ef8b93; }
.fc-wnd line { stroke: #6fb7e8; stroke-width: 6; stroke-dasharray: 3 3; } .fc-wnd path, .fc-wnd text { fill: #6fb7e8; }
.fc-dash { stroke: #93a1b1; stroke-width: 1.2; stroke-dasharray: 4 4; }
.fc-dash.fc-dash-b { stroke: #7d8b9b; }
.fc-courses { flex-wrap: wrap; }
.fc-toggles { display: grid; gap: 6px; margin: 4px 0 12px; }
.fc-bars { display: grid; gap: 8px; margin: 6px 0 10px; }
.fc-bar { display: grid; grid-template-columns: 130px 1fr 70px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); position: relative; }
.fc-bar i { grid-column: 2; grid-row: 1; height: 12px; border-radius: 0 4px 4px 0; }
.fc-bar i.fc-t { background: #58b368; } .fc-bar i.fc-d { background: #d1626b; }
.fc-bar i.is-ghost { background: transparent !important; border: 2px dashed #e6edf3; height: 14px; opacity: .7; }
.fc-bar b { color: var(--text); font-variant-numeric: tabular-nums; }
.fc-text { font-size: 13.5px; color: var(--text-dim); margin: 0; }
.fc-text b { color: var(--text); }
.fc-delta { display: inline-block; margin-top: 6px; color: #f0c766; }

/* ------------------------------------------------ Posūkiai */
.mv-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.mv-col { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.mv-col h3 { margin: 0 0 4px; font-size: 16px; } .mv-col h3 span { font-weight: 400; font-style: italic; font-size: 12px; color: var(--text-faint); }
.mv-col p { margin: 0; font-size: 13.5px; color: var(--text-dim); } .mv-col b { color: var(--text); }
.mv-svg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.mv-wind { fill: none; stroke: #6fb7e8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.mv-windtxt { fill: #6fb7e8; font-size: 12px; letter-spacing: 2px; }
.mv-windline { stroke: #6fb7e8; stroke-width: 1.2; stroke-dasharray: 5 6; opacity: .45; }
.mv-windline.is-on { stroke: #f0c766; opacity: 1; stroke-width: 2; }
.mv-track { fill: none; stroke: #3a4757; stroke-width: 2; stroke-dasharray: 4 5; }
.mv-done { fill: none; stroke: #93a1b1; stroke-width: 2.5; }
.mv-hull { stroke-width: 2.5; fill: #22303f; }
.mv-hull.stbd { stroke: #58b368; } .mv-hull.port { stroke: #d1626b; }
.mv-sail { fill: none; stroke: #f2f4f7; stroke-width: 3; stroke-linecap: round; }
.mv-boom { stroke: #c9d4df; stroke-width: 2; }
.mv-mast { fill: #f0f6fc; }
.mv-legend text { fill: var(--text-dim); font-size: 12px; }
.mv-dot.stbd { fill: #58b368; } .mv-dot.port { fill: #d1626b; }
.mv-alert { fill: #f0c766; font-size: 15px; font-weight: 700; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.mv-key { font-size: 14px; color: var(--text-dim); margin: 0 0 8px; } .mv-key b { color: var(--text); }
.mv-name { font-size: 18px; } .mv-en { color: var(--text-faint); font-style: italic; font-size: 12.5px; }
.mv-ctl #mv-scrub { flex: 1; accent-color: var(--accent); }

/* ------------------------------------------------ Inkaras */
.an-wrap { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.an-wrap > .an-body { flex: 1; min-height: 0; }
.an-body { padding: 18px 24px 60px; }
.an-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 16px; align-items: start; }
.an-fig .bk-svg { max-height: 360px; }
.an-desc { margin-top: 10px; font-size: 13.5px; color: var(--text-dim); } .an-desc b { color: var(--text); }
.an-metal { fill: #9aa6b4; stroke: #39424e; stroke-width: 1.5; }
.an-metal-ring { fill: none; stroke: #9aa6b4; stroke-width: 6; }
.an-hole { fill: #0f151d; }
.an-palm { fill: #b4bfcc; }
.an-shank { fill: none; stroke: #9aa6b4; stroke-width: 7; stroke-linecap: round; }
.an-arm { fill: none; stroke: #9aa6b4; stroke-width: 5; stroke-linecap: round; }
.an-wood { fill: #8a6c43; stroke: #c9a26e; stroke-width: 1.2; }
.an-ball { fill: #9aa6b4; stroke: #39424e; }
.an-sea { fill: #f0c766; fill-opacity: .25; stroke: #f0c766; stroke-width: 2; }
.an-line { fill: none; stroke: #c9d4df; stroke-width: 1.5; }
.an-ridge { fill: none; stroke: #5d6e80; stroke-width: 1.5; }
.an-rollbar { fill: none; stroke: #9aa6b4; stroke-width: 4; stroke-linecap: round; }
.an-rope { fill: none; stroke: #c9a26e; stroke-width: 2.5; }
.bk-part.is-sel .an-metal, .bk-part.is-sel .an-wood, .bk-part.is-sel .an-ball, .bk-part.is-sel .an-palm { fill: #f0c766; stroke: #fff3c4; }
.bk-part.is-sel .an-metal-ring, .bk-part.is-sel .an-arm { stroke: #f0c766; }
.an-icon { display: block; width: 100%; height: 130px; background: #0f151d; border-radius: 8px; padding: 8px; }
.an-scope { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.an-seabed { fill: #5b4a32; }
.an-hull { fill: #dfe6ee; stroke: #8193a6; }
.an-chain { fill: none; stroke: #c9d4df; stroke-width: 3; stroke-dasharray: 5 2; }
.an-roller { fill: #f0c766; }
.an-dim { stroke: #93a1b1; stroke-width: 1; stroke-dasharray: 3 3; }
.an-dimv { stroke: #e6edf3; stroke-dasharray: none; stroke-width: 1.5; }
.an-dimlbl { fill: var(--text); font-size: 13px; font-weight: 700; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.an-dimlbl.an-a { fill: #f0c766; }
.an-table { border-collapse: collapse; margin: 12px 0 4px; font-size: 13px; width: 100%; max-width: 620px; }
.an-table th, .an-table td { border: 1px solid var(--line); padding: 5px 8px; text-align: center; font-variant-numeric: tabular-nums; }
.an-table td:first-child, .an-table th:first-child { text-align: left; color: var(--text-dim); }
@media (max-width: 900px) { .an-split { grid-template-columns: 1fr; } .an-body { padding: 12px 10px 40px; } .an-table { font-size: 11.5px; } .an-table th, .an-table td { padding: 4px; } }
/* dreifas */
.mv-sail.backed { stroke: #f0c766; }
.mv-tiller { stroke: #c9a26e; stroke-width: 3; stroke-linecap: round; }
.mv-ghost { opacity: .32; }
.mv-route { fill: none; stroke: #d1626b; stroke-width: 2.5; }
.mv-numc { fill: #1d2734; stroke: #93a1b1; } .mv-num { fill: var(--text); font-size: 11px; font-weight: 700; }
.mv-drogue { margin-top: 8px; }
.mv-sea { fill: #10304a; }
.mv-rope { fill: none; stroke: #c9a26e; stroke-width: 2.5; }
.mv-chain { fill: none; stroke: #c9d4df; stroke-width: 3; stroke-dasharray: 4 2; }
.mv-drogue-c { fill: #f0c766; stroke: #b8902e; }
.mv-yacht { fill: #dfe6ee; stroke: #8193a6; } .mv-mastline { stroke: #c9d4df; stroke-width: 2; }
.mv-dl { fill: var(--text-dim); font-size: 12px; }

/* ------------------------------------------------ Manevrai: skirtukai, švartavimasis */
#maneuvers .sm-tabs { margin: 10px 24px 0; align-self: flex-start; flex-wrap: wrap; }
.sm-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sm-pane[hidden] { display: none !important; }
.mo-svg { width: 100%; max-width: 600px; height: auto; display: block; margin: 0 auto; }
.mo-quay { fill: #4b5563; }
.mo-bollard { fill: #c9d4df; stroke: #39424e; }
.mo-fender { fill: #e8924a; stroke: #6b3a12; }
.mo-boat { fill: #22303f; stroke: #cfe0f0; stroke-width: 2; }
.mo-cabin { fill: #2c3d51; stroke: #6f849b; }
.mo-mast { fill: #f0f6fc; }
.mo-line { fill: none; stroke: #c9a26e; stroke-width: 2.2; }
.mo-svg.has-sel .mo-line:not(.is-sel) { opacity: .25; }
.mo-line.is-sel { stroke: #f0c766; stroke-width: 3.5; }
.mo-lbl { fill: var(--text-dim); font-size: 12px; }
.mo-qlbl { fill: #e6edf3; font-size: 11px; }
.mo-keel { fill: #4d7fd6; }
.mo-rig { stroke: #c9d4df; stroke-width: 2; } .mo-rig.thin { stroke-width: 1; }
.mo-sand { fill: #b8955a; opacity: .8; }
.mo-anc { fill: none; stroke: #c9d4df; stroke-width: 2.5; stroke-linecap: round; }
.mo-boom { stroke: #c9d4df; stroke-width: 3; }
.mo-crew { fill: #d4604a; }
.mo-hal { stroke: #f0c766; stroke-dasharray: 6 4; }
.mo-arrow { stroke: #f0c766; stroke-width: 2.5; fill: none; }
.mo-current { fill: none; stroke: #6fb7e8; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mo-leaving { stroke: #f0c766; }
.mo-slack { stroke-dasharray: 5 4; opacity: .7; }
.mo-lines { display: grid; gap: 6px; }
.mo-lrow { text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); cursor: pointer; }
.mo-lrow span { color: var(--text-faint); font-style: italic; font-size: 12px; }
.mo-lrow p { margin: 3px 0 0; color: var(--text-dim); font-size: 12.5px; }
.mo-lrow.is-sel { border-color: #f0c766; background: #f0c76614; }
.mo-sw { display: inline-block; width: 18px; height: 3px; background: #c9a26e; vertical-align: middle; margin-right: 6px; }
.mo-gpanel figcaption b { color: var(--text); }
@media (max-width: 900px) { #maneuvers .sm-tabs { margin: 8px 10px 0; } }

/* peteliškė */
.mv-cockpitw { fill: #16202c; stroke: #3a4757; }
.mv-sailw { fill: #f2f4f7; fill-opacity: .9; stroke: #f2f4f7; stroke-width: 2; }
.mv-pole { stroke: #f0c766; stroke-width: 3; stroke-linecap: round; }
.mv-prev { stroke: #d1626b; stroke-width: 2; stroke-dasharray: 6 4; }
.mv-msheet { stroke: #c9a26e; stroke-width: 1.8; }
.mv-wl { fill: var(--text); font-size: 13px; font-weight: 600; }
.mv-lead { stroke: #93a1b1; stroke-width: 1; }