/* Vi Natura listening station, hosted on Warble UK. Every rule is scoped to .vn-station. */
  .vn-station *, .vn-station *::before, .vn-station *::after { box-sizing: border-box; margin: 0; padding: 0; }
  .vn-station {
    background: var(--night);
    --night: #0d1f0e; --panel: #122318; --panel-2: #1a2e1b; --line: rgba(200,212,184,0.12); --line-2: rgba(200,212,184,0.22);
    --cream: #f4efe4; --text: rgba(220,210,190,0.86); --muted: rgba(220,210,190,0.55); --faint: rgba(220,210,190,0.32);
    --sage: #c8d4b8; --leaf: #8aa870; --moss: #4a5c3a; --bar: #5f7a4a; --bar-hi: #a7c48b;
    --serif: 'Georgia','Times New Roman',serif; --sans: 'Helvetica Neue',Arial,sans-serif;
  }
  /* Undo Warble UK's site-wide rules for class names the station also uses (card, play, grid, note, tag…).
     The site's own rules are less specific, so only properties the station doesn't set need resetting here. */
  .vn-station .grid { grid-template-columns: none; }
  .vn-station .controls { position: static; z-index: auto; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; border-bottom: 0; }
  .vn-station .tag { background: none; }
  .vn-station .note { background: none; border: 0; border-radius: 0; padding: 0; }
  .vn-station .note p, .vn-station .note h2 { font-size: inherit; margin: 0; }
  .vn-station .facts dt, .vn-station .facts dd { padding: 0; border-bottom: 0; }
  .vn-station .eyebrow { font-weight: 400; line-height: inherit; font-family: var(--sans); }
  .vn-station .chip { border: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
  .vn-station .play { position: static; background: transparent; padding: 0; cursor: pointer; }
  .vn-station .play svg { width: 12px; height: 12px; }

  
  .vn-station { background: var(--night); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
  .vn-station a { color: inherit; }
  .vn-station button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  .vn-station img { display: block; }
  /* Header */
  .vn-station header.station { padding: 3.5rem 3rem 2.2rem; background: radial-gradient(ellipse at 20% 0%, rgba(74,92,58,0.35), transparent 60%), var(--night); }
  .vn-station .inner { max-width: 1080px; margin: 0 auto; }
  .vn-station .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
  .vn-station .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); animation: pulse 2.4s infinite; flex: none; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(138,168,112,0.55); } 70% { box-shadow: 0 0 0 9px rgba(138,168,112,0); } 100% { box-shadow: 0 0 0 0 rgba(138,168,112,0); } }
  .vn-station header h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem,5vw,3.6rem); line-height: 1.08; color: var(--cream); }
  .vn-station header h1 em { font-style: italic; color: var(--sage); }
  .vn-station .sub { margin-top: 0.6rem; color: var(--muted); font-size: 0.95rem; }
  .vn-station .kpis { display: flex; gap: 2.8rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.4rem; border-top: 0.5px solid var(--line); }
  .vn-station .kpi strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 2.1rem; line-height: 1.1; color: var(--cream); font-variant-numeric: tabular-nums; }
  .vn-station .kpi span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  /* Tabs */
  .vn-station .tabs { position: sticky; top: 65px; z-index: 150; background: rgba(18,26,21,0.94); backdrop-filter: blur(8px); border-bottom: 0.5px solid var(--line); padding: 0 3rem; }
  .vn-station .tabs .inner { display: flex; gap: 2.2rem; overflow-x: auto; scrollbar-width: none; }
  .vn-station .tabs .inner::-webkit-scrollbar { display: none; }
  .vn-station .tab { padding: 1rem 0 0.9rem; font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 1.5px solid transparent; white-space: nowrap; transition: color 0.2s, border-color 0.2s; }
  .vn-station .tab:hover { color: var(--cream); }
  .vn-station .tab[aria-current="page"] { color: var(--cream); border-color: var(--leaf); }
  .vn-station main { padding: 2.4rem 3rem 5rem; }
  .vn-station .view[hidden] { display: none; }
  /* Cards */
  .vn-station .grid { display: grid; gap: 1.25rem; }
  .vn-station .g2 { grid-template-columns: 1.35fr 1fr; }
  .vn-station .g2e { grid-template-columns: 1fr 1fr; }
  .vn-station .vn-card { background: var(--panel); border: 0.5px solid var(--line); border-radius: 3px; padding: 1.5rem 1.6rem; min-width: 0; }
  .vn-station .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; }
  .vn-station .label { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--leaf); }
  .vn-station .card-head a, .vn-station .linkish { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 0.5px solid var(--line-2); padding-bottom: 1px; transition: color 0.2s; }
  .vn-station .card-head a:hover, .vn-station .linkish:hover { color: var(--cream); }
  .vn-station .note { font-size: 0.78rem; color: var(--faint); }
  .vn-station .mt { margin-top: 1.25rem; }
  /* Charts */
  .vn-station svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
  .vn-station .chart text { fill: var(--muted); font-family: var(--sans); font-size: 10px; }
  .vn-station .chart .grid-l { stroke: var(--line); stroke-width: 0.5; }
  .vn-station .chart .bar { fill: var(--bar); transition: fill 0.15s; }
  .vn-station .chart .bar:hover, .vn-station .chart .bar.hi { fill: var(--bar-hi); }
  .vn-station .chart .ring { fill: none; stroke: var(--line); stroke-width: 0.6; }
  .vn-station .chart .wedge { fill: var(--bar); stroke: var(--night); stroke-width: 0.6; transition: fill 0.15s; }
  .vn-station .chart .wedge:hover { fill: var(--bar-hi); }
  .vn-station .chart .hbar-label { fill: var(--text); font-size: 11px; }
  .vn-station .chart .hbar-row { cursor: pointer; }
  .vn-station .chart .hbar-row:hover .bar { fill: var(--bar-hi); }
  .vn-station .chart .hbar-row:hover .hbar-label { fill: var(--cream); }
  .vn-station .chart .val { fill: var(--muted); font-size: 10px; }
  .vn-station .tip { position: fixed; z-index: 400; pointer-events: none; background: #0c120e; border: 0.5px solid var(--line-2); border-radius: 2px; padding: 0.4rem 0.65rem; font-size: 0.78rem; color: var(--cream); white-space: nowrap; opacity: 0; transition: opacity 0.1s; }
  .vn-station .tip b { font-weight: 400; color: var(--sage); }
  /* Species lists */
  .vn-station .slist { list-style: none; }
  .vn-station .srow { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.9rem; align-items: center; padding: 0.55rem 0.4rem; border-bottom: 0.5px solid var(--line); cursor: pointer; border-radius: 2px; transition: background 0.15s; }
  .vn-station .srow:last-child { border-bottom: 0; }
  .vn-station .srow:hover { background: rgba(200,212,184,0.04); }
  .vn-station .thumb { width: 44px; height: 44px; border-radius: 2px; object-fit: cover; background: var(--panel-2); }
  .vn-station .sname { font-family: var(--serif); font-size: 1.02rem; color: var(--cream); line-height: 1.25; }
  .vn-station .ssci { font-size: 0.78rem; font-style: italic; color: var(--faint); }
  .vn-station .warble-link { margin: 10px 0 2px; font-size: 0.85rem; }
  .vn-station .warble-link a { color: var(--cream); text-decoration: none; border-bottom: 0.5px solid var(--line-2); }
  .vn-station .warble-link a:hover { border-bottom-color: var(--cream); }
  .vn-station .scount { font-family: var(--serif); font-size: 1.05rem; color: var(--sage); font-variant-numeric: tabular-nums; }
  .vn-station .meter { height: 4px; background: rgba(200,212,184,0.08); border-radius: 2px; margin-top: 0.35rem; overflow: hidden; }
  .vn-station .meter i { display: block; height: 100%; background: var(--bar); border-radius: 2px; }
  .vn-station .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1.6rem; }
  .vn-station .chip { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 0.5px solid var(--line); font-size: 0.9rem; cursor: pointer; transition: color 0.15s; }
  .vn-station .chip:hover { color: var(--cream); }
  .vn-station .chip span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
  /* Detections feed */
  .vn-station .feed-meta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .vn-station .det { display: grid; grid-template-columns: 44px 104px 1fr 40px; gap: 0.9rem; align-items: center; padding: 0.6rem 0; border-bottom: 0.5px solid var(--line); }
  .vn-station .det:last-child { border-bottom: 0; }
  .vn-station .det.new { animation: fresh 2.5s ease-out; }
  @keyframes fresh { from { background: rgba(138,168,112,0.14); } to { background: transparent; } }
  .vn-station .spec { width: 104px; height: 44px; object-fit: cover; border-radius: 2px; background: #0c120e; cursor: zoom-in; border: 0.5px solid var(--line); }
  .vn-station .det-name { font-family: var(--serif); color: var(--cream); font-size: 1rem; line-height: 1.25; cursor: pointer; }
  .vn-station .det-name:hover { color: var(--sage); }
  .vn-station .det-when { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .vn-station .conf { color: var(--sage); }
  .vn-station .play { width: 36px; height: 36px; border-radius: 50%; border: 0.5px solid var(--line-2); display: grid; place-items: center; color: var(--sage); transition: background 0.2s, border-color 0.2s; }
  .vn-station .play:hover { border-color: var(--leaf); background: rgba(138,168,112,0.12); }
  .vn-station .play.on { background: var(--moss); border-color: var(--moss); color: var(--cream); }
  .vn-station .pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.1rem; font-size: 0.78rem; color: var(--muted); }
  .vn-station .pager button { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.55rem 1rem; border: 0.5px solid var(--line-2); border-radius: 2px; color: var(--sage); transition: border-color 0.2s, color 0.2s; }
  .vn-station .pager button:hover:not(:disabled) { border-color: var(--leaf); color: var(--cream); }
  .vn-station .pager button:disabled { opacity: 0.3; cursor: default; }
  /* Controls */
  .vn-station .controls { display: grid; grid-template-columns: 1fr 1.4fr 1fr auto; gap: 1.4rem; align-items: end; }
  .vn-station .field label { display: block; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem; }
  .vn-station select { width: 100%; appearance: none; background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23c8d4b8' stroke-width='1.2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.8rem center; border: 0.5px solid var(--line-2); border-radius: 2px; color: var(--cream); font: inherit; font-size: 0.92rem; padding: 0.6rem 2rem 0.6rem 0.8rem; }
  .vn-station select:focus, .vn-station input:focus-visible, .vn-station button:focus-visible, .vn-station a:focus-visible { outline: 1px solid var(--leaf); outline-offset: 2px; }
  .vn-station input[type=range] { width: 100%; accent-color: var(--leaf); }
  .vn-station .ctl-total { text-align: right; }
  .vn-station .ctl-total strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.8rem; color: var(--cream); line-height: 1.1; font-variant-numeric: tabular-nums; }
  .vn-station .ctl-total span { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  /* Species detail */
  .vn-station .sp-hero { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
  .vn-station .sp-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; background: var(--panel-2); }
  .vn-station .credit { font-size: 0.68rem; color: var(--faint); margin-top: 0.45rem; line-height: 1.4; }
  .vn-station .credit a { text-decoration: none; border-bottom: 0.5px solid var(--line-2); }
  .vn-station .sp-hero h2 { font-family: var(--serif); font-weight: 400; font-size: 2rem; color: var(--cream); line-height: 1.1; }
  .vn-station .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 1.2rem 1.6rem; margin-top: 1.4rem; }
  .vn-station .fact span { display: block; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  .vn-station .fact strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--cream); font-variant-numeric: tabular-nums; }
  .vn-station .back-all { margin-top: 1.4rem; display: inline-block; }
  /* Today */
  .vn-station .today-head h2 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; color: var(--cream); }
  .vn-station .today .srow { grid-template-columns: 52px 1fr 60px; }
  .vn-station .firsts-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
  .vn-station .firsts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
  .vn-station .first { position: relative; background: var(--panel); border: 0.5px solid var(--line); border-radius: 3px; overflow: hidden; cursor: pointer; transition: border-color 0.2s; }
  .vn-station .first:hover { border-color: var(--line-2); }
  .vn-station .first img, .vn-station .first .ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 30%; display: block; background: var(--panel-2); }
  .vn-station .first .ord { position: absolute; top: 0.6rem; left: 0.6rem; font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--cream); background: rgba(12,18,14,0.72); border: 0.5px solid var(--line-2); border-radius: 2px; padding: 0.1rem 0.55rem; }
  .vn-station .first .meta { padding: 0.8rem 0.9rem 0.9rem; }
  .vn-station .first .nm { font-family: var(--serif); font-size: 1.05rem; color: var(--cream); line-height: 1.25; }
  .vn-station .first .tm { margin-top: 0.25rem; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .vn-station .first .tm b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--sage); margin-left: 0.3rem; font-variant-numeric: tabular-nums; }
  .vn-station .first.wait { cursor: default; opacity: 0.55; }
  .vn-station .first .rel { margin-top: 0.15rem; font-size: 0.74rem; color: var(--faint); }
  .vn-station .sunline { stroke: #d9b36c; stroke-width: 1; stroke-dasharray: 3 3; }
  .vn-station .chart .sunlbl { fill: #d9b36c; font-size: 10px; }
  .vn-station .chart .night { fill: rgba(43,61,82,0.32); }
  .vn-station .chart .nowline { stroke: var(--sage); stroke-width: 0.8; opacity: 0.6; }
  .vn-station .chart .dot { fill: var(--bar-hi); }
  .vn-station .chart .rowlbl { fill: var(--text); font-size: 11px; }
  .vn-station .chart .offs { fill: var(--muted); font-size: 10px; }
  .vn-station .chart .crow { cursor: pointer; }
  .vn-station .chart .crow:hover .rowlbl { fill: var(--cream); }
  .vn-station .chart .crow:hover .dot { fill: var(--cream); }
  .vn-station .chips-inline { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin-top: 0.9rem; font-size: 0.82rem; color: var(--muted); align-items: center; }
  .vn-station .chips-inline .pill { border: 0.5px solid var(--line-2); border-radius: 2px; padding: 0.15rem 0.55rem; color: var(--text); cursor: pointer; }
  .vn-station .chips-inline .pill:hover { color: var(--cream); border-color: var(--leaf); }
  .vn-station .split-bar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; background: rgba(200,212,184,0.08); margin: 0.2rem 0 0.6rem; }
  .vn-station .split-bar i { display: block; height: 100%; }
  .vn-station .split-nums { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.82rem; color: var(--muted); flex-wrap: wrap; }
  .vn-station .split-nums strong { font-family: var(--serif); font-weight: 400; color: var(--cream); font-size: 1.05rem; }
  .vn-station .rotd-spec { position: relative; aspect-ratio: 2.64; overflow: hidden; background: #06243a; border-radius: 2px; cursor: zoom-in; }
  .vn-station .rotd-spec img { position: absolute; width: 121.5%; max-width: none; height: auto; left: -8.6%; top: -10.2%; }
  .vn-station .rotd-meta { display: grid; grid-template-columns: 52px 1fr auto; gap: 0.9rem; align-items: center; margin-top: 1rem; }
  .vn-station .rotd-meta .thumb { width: 52px; height: 52px; }
  .vn-station .cg { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .vn-station .cg h3 { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--cream); margin-bottom: 0.2rem; }
  .vn-station .cg .cg-sub { font-size: 0.78rem; color: var(--faint); margin-bottom: 0.6rem; }
  .vn-station .cg .srow { grid-template-columns: 40px 1fr auto; }
  .vn-station .cg .thumb { width: 40px; height: 40px; }
  .vn-station .cg .when { font-size: 0.78rem; color: var(--muted); }
  .vn-station .tag { display: inline-block; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.12rem 0.45rem; border-radius: 2px; border: 0.5px solid var(--line-2); color: var(--muted); white-space: nowrap; }
  .vn-station .tag.warn { color: #e1c48a; border-color: rgba(225,196,138,0.45); }
  .vn-station .tag.gone { color: #9fb6cf; border-color: rgba(159,182,207,0.4); }
  .vn-station .chart .rain { fill: #6f9cc4; }
  .vn-station .chart .rainlbl { fill: #8fb3d4; font-size: 9px; }
  .vn-station .chart .wind { fill: #8a9aa6; }
  .vn-station .chart .gust { fill: none; stroke: #8a9aa6; stroke-width: 0.8; stroke-dasharray: 2 1.5; }
  .vn-station .chart .windlbl { fill: #a9b6bf; font-size: 9px; }
  .vn-station .chart .warrow { fill: #c9d3d9; }
  .vn-station .chart .skylbl { fill: #c9c3b4; font-size: 9px; }
  .vn-station .wxi { stroke: #d8d2c4; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
  .vn-station .wxi .sun { stroke: #d9b36c; }
  .vn-station .wxi .cloud { fill: var(--panel); }
  .vn-station .wxi .cloud.dark { fill: #3a4440; }
  .vn-station .wxi .drop { stroke: #6f9cc4; }
  .vn-station .wxi .bolt { stroke: #e1c48a; }
  .vn-station .sun-note { display: inline-flex; align-items: center; gap: 0.4rem; }
  .vn-station .sun-note svg { width: 18px; height: 18px; flex: none; }
  .vn-station .wx-credit { font-size: 0.68rem; color: var(--faint); margin-top: 0.4rem; }
  .vn-station .wx-credit a { text-decoration: none; border-bottom: 0.5px solid var(--line-2); }
  .vn-station .heat { width: 100%; }
  .vn-station .heat-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 0.6rem; cursor: pointer; }
  .vn-station .heat-row:hover .heat-name { color: var(--cream); }
  .vn-station .heat-name { font-size: 0.82rem; color: var(--text); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vn-station .heat-cells { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
  .vn-station .heat-cells i { display: block; height: 18px; border-radius: 1px; background: rgba(200,212,184,0.05); }
  .vn-station .heat-axis { display: grid; grid-template-columns: 150px 1fr; gap: 0.6rem; margin-top: 0.3rem; }
  .vn-station .heat-axis div { display: grid; grid-template-columns: repeat(24, 1fr); font-size: 0.66rem; color: var(--faint); }
  .vn-station .heat-axis div span { grid-column: span 3; }
  .vn-station .heat + .heat-axis, .vn-station .heat-row + .heat-row { margin-top: 3px; }
  .vn-station .nal-intro { font-size: 0.88rem; color: var(--muted); margin-bottom: 1rem; max-width: 640px; }
  .vn-station .nal { display: grid; grid-template-columns: 40px 1fr 96px 36px; gap: 0.9rem; align-items: center; padding: 0.6rem 0; border-bottom: 0.5px solid var(--line); }
  .vn-station .nal:last-child { border-bottom: 0; }
  .vn-station .nal .thumb { width: 40px; height: 40px; }
  .vn-station .nal .spec { width: 96px; height: 40px; }
  .vn-station .chip .flag { color: #e1c48a; margin-left: 0.35rem; font-size: 0.75rem; }
  .vn-station .sn-facts { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; margin-bottom: 1.4rem; }
  .vn-station .sn-facts div span { display: block; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  .vn-station .sn-facts div strong { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--cream); font-variant-numeric: tabular-nums; }
  .vn-station .chart .tally { fill: none; stroke: var(--bar-hi); stroke-width: 2; }
  .vn-station .chart .tally-area { fill: rgba(167,196,139,0.08); }
  .vn-station .chart .daybar { fill: rgba(95,122,74,0.55); }
  .vn-station .chart .daybar:hover { fill: var(--bar-hi); }
  .vn-station .chart .endlbl { fill: var(--cream); font-family: var(--serif); font-size: 13px; }
  .vn-station .legend { display: flex; gap: 1.2rem; font-size: 0.74rem; color: var(--muted); margin-top: 0.5rem; flex-wrap: wrap; }
  .vn-station .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
  .vn-station .cal-wrap { overflow-x: auto; }
  .vn-station .cal-scale { display: flex; align-items: center; gap: 3px; font-size: 0.7rem; color: var(--faint); margin-top: 0.6rem; justify-content: flex-end; }
  .vn-station .cal-scale i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
  .vn-station .chart .cal-day { stroke: none; }
  .vn-station .chart .cal-future { fill: none; stroke: rgba(200,212,184,0.08); stroke-width: 0.8; }
  .vn-station .ev-month { font-family: var(--serif); font-size: 1.05rem; color: var(--cream); margin: 1.2rem 0 0.4rem; }
  .vn-station .ev-month:first-child { margin-top: 0; }
  .vn-station .ev { display: grid; grid-template-columns: 64px 40px 1fr auto; gap: 0.9rem; align-items: center; padding: 0.5rem 0; border-bottom: 0.5px solid var(--line); cursor: pointer; }
  .vn-station .ev:hover .sname { color: var(--sage); }
  .vn-station .ev .ev-date { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .vn-station .ev .thumb { width: 40px; height: 40px; }
  .vn-station .ev .when { font-size: 0.78rem; color: var(--muted); }
  .vn-station .tag.arr { color: var(--bar-hi); border-color: rgba(167,196,139,0.45); }
  .vn-station .loading-note { font-size: 0.82rem; color: var(--faint); padding: 1.2rem 0; text-align: center; }
  .vn-station .first.wait .ph { display: grid; place-items: center; color: var(--faint); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .vn-station .today .thumb { width: 52px; height: 52px; }
  /* Lightbox */
  .vn-station .lb { position: fixed; inset: 0; z-index: 500; background: rgba(8,12,9,0.88); display: none; align-items: center; justify-content: center; padding: 1.5rem; }
  .vn-station .lb.open { display: flex; }
  .vn-station .lb-box { max-width: 900px; width: 100%; background: var(--panel); border: 0.5px solid var(--line-2); border-radius: 3px; padding: 1.2rem; }
  .vn-station .lb-box img { width: 100%; height: auto; border-radius: 2px; background: #0c120e; }
  .vn-station .lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }
  .vn-station .lb-close { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .vn-station .lb-close:hover { color: var(--cream); }
  .vn-station .lb-box { max-height: calc(100dvh - 2rem); overflow-y: auto; }
  /* Owner-only correction tools (lightbox and Needs a listen) */
  .vn-station .lb-edit { margin-top: 1.1rem; padding-top: 1rem; border-top: 0.5px solid var(--line); display: grid; gap: 0.7rem; }
  .vn-station .lb-edit-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
  .vn-station .lb-edit input { flex: 1 1 220px; min-width: 0; background: #0c120e; border: 0.5px solid var(--line-2); border-radius: 2px; color: var(--cream); font: inherit; font-size: 16px; padding: 0.55rem 0.7rem; }
  .vn-station .lb-edit input:focus { outline: 1px solid var(--leaf); }
  .vn-station .lb-btn { font: inherit; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); background: var(--moss); border: 0.5px solid var(--line-2); border-radius: 2px; padding: 0.65rem 0.9rem; cursor: pointer; min-height: 40px; }
  .vn-station .lb-btn:hover { background: var(--bar); }
  .vn-station .lb-btn:disabled { opacity: 0.5; cursor: default; }
  .vn-station .lb-del { background: transparent; color: #e1a48a; border-color: rgba(225,164,138,0.4); }
  .vn-station .lb-del:hover { background: rgba(225,164,138,0.12); }
  .vn-station .lb-msg { font-size: 0.85rem; color: var(--sage); min-height: 1.2em; }
  .vn-station .lb-msg.err { color: #e1a48a; }
  .vn-station .dl { color: var(--sage); text-decoration: none; border-bottom: 0.5px solid var(--line-2); white-space: nowrap; }
  .vn-station .dl:hover { color: var(--cream); border-bottom-color: var(--cream); }
  .vn-station .lb-dl { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.5rem 0; }
  .vn-station .lb-dl[hidden] { display: none; }
  .vn-station .nal-fix { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .vn-station .fix { font: inherit; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); background: transparent; border: 0.5px solid var(--line-2); border-radius: 2px; padding: 0.5rem 0.75rem; cursor: pointer; min-height: 36px; }
  .vn-station .fix:hover { color: var(--cream); border-color: var(--sage); }
  .vn-station .fix.done { color: var(--faint); text-decoration: line-through; pointer-events: none; }
  .vn-station .state { padding: 2.5rem 1rem; text-align: center; color: var(--muted); font-size: 0.9rem; }
  .vn-station .err { color: #d9a48f; }
  @media (max-width: 900px) {
  .vn-station .firsts { grid-template-columns: repeat(2, 1fr); }
  .vn-station .cg { grid-template-columns: 1fr; }
  .vn-station .g2, .vn-station .g2e { grid-template-columns: 1fr; }
  .vn-station .controls { grid-template-columns: 1fr 1fr; }
  .vn-station .ctl-total { text-align: left; }
  .vn-station .sp-hero { grid-template-columns: 1fr; }
  .vn-station .sp-photo { max-width: 420px; }
  
  }
  @media (max-width: 768px) {
  .vn-station header.station { padding: 2.5rem 1.25rem 1.8rem; }
  .vn-station .kpis { gap: 1.8rem; }
  .vn-station .tabs { padding: 0 1.25rem; top: 65px; }
  .vn-station .tabs .inner { gap: 0.75rem; justify-content: space-between; }
  .vn-station .tab { font-size: 0.7rem; letter-spacing: 0.12em; }
  .vn-station main { padding: 1.6rem 1rem 4rem; }
  .vn-station .vn-card { padding: 1.2rem 1rem; }
  /* Phones: photo, name and play button on one line, the sonogram full width underneath */
  .vn-station .det { grid-template-columns: 40px 1fr 40px; grid-template-areas: "thumb text play" "spec spec spec"; gap: 0.5rem 0.7rem; padding: 0.8rem 0; }
  .vn-station .det .thumb { grid-area: thumb; width: 40px; height: 40px; }
  .vn-station .det .spec { grid-area: spec; width: 100%; height: auto; aspect-ratio: 19 / 8; object-fit: cover; }
  .vn-station .det > div { grid-area: text; min-width: 0; }
  .vn-station .det .play { grid-area: play; width: 40px; height: 40px; }
  .vn-station .heat-row, .vn-station .heat-axis { grid-template-columns: 92px 1fr; }
  .vn-station .heat-cells i { height: 14px; }
  .vn-station .nal { grid-template-columns: 36px 1fr 34px; }
  .vn-station .nal .spec { display: none; }
  .vn-station .ev { grid-template-columns: 52px 36px 1fr; }
  .vn-station .ev .tag { display: none; }
  .vn-station .ev .thumb { width: 36px; height: 36px; }
  
  }
  @media (max-width: 480px) {
  .vn-station .controls { grid-template-columns: 1fr; } 
  }
  @media (prefers-reduced-motion: reduce) {
  .vn-station .live-dot, .vn-station .det.new { animation: none; }
  .vn-station { scroll-behavior: auto; } 
  }

