/*
      Stylesheet for the weather-station dashboard.
      Organized by base layout, cards/widgets, compass/barometer, themes, and modals.
    */
    :root {
        --card: rgba(245,246,248,.92);
        --text:#0f172a;
        --muted:#6b7280;
        --radius:22px;
        --gap:14px;
        --tick-major: rgba(15, 23, 42, .35);
        --tick-medium: rgba(15, 23, 42, .28);
        --tick-minor: rgba(15, 23, 42, .20);
        --pointer: rgb(15, 23, 42);
        --center-disc: rgba(245,246,248,.92);
        --center-stroke: rgba(15,23,42,.06);
        --shadow: rgba(15,23,42,.12);
        --compass-size: clamp(101.2px, 28.6vw, 137.5px);
        --tick-radius: calc(var(--compass-size) * 0.392);
        --center-size: calc(var(--compass-size) * 0.48);

    }
    :root {
        color-scheme: light dark;

    }
    * {
        box-sizing:border-box;

    }
    body {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;

    }
    button, a, input, textarea, select {
        -webkit-user-select: none;
        user-select: none;

    }
    body {
        margin:0;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
        color:var(--text);
        background: radial-gradient(900px 520px at 18% 10%, rgba(191,230,214,.9), rgba(191,230,214,0) 55%), radial-gradient(900px 520px at 85% 18%, rgba(231,216,255,.95), rgba(231,216,255,0) 55%), radial-gradient(900px 520px at 50% 95%, rgba(255,240,214,.95), rgba(255,240,214,0) 60%), linear-gradient(180deg, #eaf7f2, #f7f4ff);
        min-height:100vh;

    }
    body, .card, .titleCard, .icon, .center-disc {
        transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;

    }
    .wrap {
        max-width: 520px;
        margin: 0 auto;
        padding: 16px 16px 28px;

    }
    .titleCard {
        background: rgba(255,255,255,.78);
        border: 1px solid rgba(15,23,42,.06);
        border-radius: 18px;
        padding: 18px 16px;
        box-shadow: 0 16px 34px rgba(15,23,42,.12);
        backdrop-filter: blur(12px);
        text-align:center;
        margin-bottom: 14px;

    }
    .titleCardLink {
        display: block;
        color: inherit;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;

    }
    .titleCardLink:active {
        transform: translateY(1px);

    }
    .titleCardLink:focus-visible {
        outline: 2px solid rgba(15,23,42,.30);
        outline-offset: 3px;

    }
    .titleCard h1 {
        margin:0;
        font-size: 26px;
        font-weight: 500;
        letter-spacing: .2px;
        color: rgba(15,23,42,.88);

    }
    .titleCard .sub {
        margin-top: 6px;
        font-size: 13px;
        color: rgba(15,23,42,.60);

    }
    .top {
        padding: 4px 2px 12px;

    }
    .sectionHint {
        font-size: 12px;
        color: rgba(15,23,42,.60);
        letter-spacing: .2px;
        margin-bottom: 10px;
        display:flex;
        align-items:center;
        gap:10px;
        justify-content:space-between;

    }
    .sectionHint .updatedAt {
        font-size: 11px;
        color: rgba(15,23,42,.55);
        letter-spacing: 0;

    }
    .rightTools {
        display:flex;
        align-items:center;
        gap:10px;

    }
    .themeToggle {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        border: 1px solid rgba(15,23,42,.10);
        background: rgba(255,255,255,.55);
        display:grid;
        place-items:center;
        box-shadow: 0 10px 20px rgba(15,23,42,.10);
        backdrop-filter: blur(10px);
        cursor:pointer;
        -webkit-tap-highlight-color: transparent;

    }
    .themeToggle svg {
        width: 18px;
        height: 18px;
        stroke: rgba(15,23,42,.78);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;

    }
    .themeToggle .sun {
        display:none;

    }
    .themeToggle .moon {
        display:block;

    }
    .heroTemp {
        display:flex;
        align-items: baseline;
        gap: 10px;
        flex-wrap:wrap;

    }
    .heroNowButton {
        width: 100%;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        padding: 0;
        margin: 0;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;

    }
    .heroNowButton:focus-visible {
        outline: 2px solid rgba(15,23,42,.35);
        outline-offset: 6px;
        border-radius: 12px;

    }
    html[data-theme="dark"] .heroNowButton:focus-visible {
        outline-color: rgba(248,250,252,.45);

    }
    .heroNowButton:active {
        transform: translateY(1px);

    }
    .heroTemp .temp {
        font-size: 56px;
        line-height: 1;
        font-weight: 720;
        letter-spacing: -.6px;

    }
    .heroTemp .unit {
        font-size: 18px;
        color: rgba(15,23,42,.70);
        font-weight: 650;
        margin-left: 2px;

    }
    .heroSub {
        margin-top: 8px;
        color: rgba(15,23,42,.72);
        font-size: 14px;

    }
    .heroSub strong {
        color: rgba(15,23,42,.92);
        font-weight: 750;

    }
    .grid {
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);
        margin-top: 10px;

    }
    .card {
        background: var(--card);
        border: 1px solid rgba(15,23,42,.06);
        border-radius: var(--radius);
        padding: 10px 14px 12px;
        box-shadow: 0 14px 30px rgba(15,23,42,.10);
        backdrop-filter: blur(10px);
        aspect-ratio: 1 / 1;
        position: relative;
        overflow:hidden;

    }
    .card[data-series-card] {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;

    }
    .card[data-series-card]:active {
        transform: translateY(1px);

    }
    .rowTop {
        display:flex;
        align-items: center;
        gap:10px;

    }
    .icon {
        width: 34px;
        height: 34px;
        display:grid;
        place-items:center;
        border-radius: 12px;
        background: rgba(15,23,42,.04);
        flex: 0 0 auto;

    }
    .icon svg {
        width: 18px;
        height: 18px;
        stroke: rgba(15,23,42,.72);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;

    }
    .label {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.2;

    }
    .value {
        margin-top: 12px;
        font-weight: 820;
        letter-spacing: -.2px;
        font-size: 26px;
        line-height: 1.1;

    }
    .value .unit {
        font-size: 14px;
        font-weight: 700;
        color: rgba(15,23,42,.72);
        margin-left: 6px;
        letter-spacing: 0;

    }
    .subline {
        margin-top: 6px;
        font-size: 12px;
        color: rgba(107,114,128,.95);
        line-height: 1.25;

    }
    .emph {
        color: rgba(15,23,42,.85);
        font-weight: 750;

    }
    .card[data-disabled="true"] {
        filter: grayscale(1);
        opacity: .88;
        pointer-events: none;
        user-select: none;

    }
    .card[data-disabled="true"]::after {
        content: "Kommt bald";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        background: rgba(160,160,160,.35);
        backdrop-filter: blur(3px);
        border-radius: inherit;
        font-weight: 600;
        font-size: 13px;
        color: rgba(15,23,42,.8);

    }
    .card.compass-card {
        padding: 10px 14px 14px;
        display: flex;
        flex-direction: column;

    }
    .card.barometer-card {
        padding: 10px 14px 14px;
        display: flex;
        flex-direction: column;

    }
    .card.system-card {
        display: flex;
        flex-direction: column;
        gap: 6px;

    }
    .card.system-card .system-lines {
        margin-top: 2px;
        display: flex;
        flex-direction: column;
        gap: 4px;

    }
    .card.system-card .system-lines .subline {
        margin-top: 0;
        font-size: 11px;
        line-height: 1.25;

    }
    .card.system-card .system-meta {
        margin-top: 4px;
        font-size: 10px;
        color: rgba(107,114,128,.90);

    }
    html[data-theme="dark"] .card.system-card .system-meta {
        color: rgba(203,213,225,.72);

    }
    .barometer-card .tick  {
        height: calc(var(--compass-size) * 0.075);

    }
    .barometer-card .tick.major  {
        width: 2px;

    }
    .barometer-card .tick.medium  {
        width: 1.4px;

    }
    .barometer-card .tick.minor  {
        width: 1px;

    }
    .barometer-end-arrow {
        position: absolute;
        bottom: calc(var(--compass-size) * 0.08);
        width: calc(var(--compass-size) * 0.11);
        height: calc(var(--compass-size) * 0.11);
        color: rgb(15,23,42);
        z-index: 32;
        pointer-events: none;
        display: grid;
        place-items: center;

    }
    .barometer-end-arrow-left {
        left: calc(var(--compass-size) * 0.22);
        transform: translateX(-50%);

    }
    .barometer-end-arrow-right {
        right: calc(var(--compass-size) * 0.22);
        transform: translateX(50%);

    }
    .barometer-end-arrow svg {
        width: 100%;
        height: 100%;

    }
    .barometer-end-arrow path {
        fill: none;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;

    }
    html[data-theme="dark"] .barometer-end-arrow {
        color: rgba(248,250,252,.92);

    }
    .barometer-center .direction-unit {
        font-size: clamp(8px, calc(var(--compass-size) * 0.068), 9px);
        color: rgba(15,23,42,.72);

    }
    html[data-theme="dark"] .barometer-center .direction-unit {
        color: rgba(203,213,225,.72);

    }
    #pressurePointer {
        filter: drop-shadow(0 6px 12px rgba(15,23,42,.12));

    }
    .baro-marker {
        position: absolute;
        left: 50%;
        bottom: 50%;
        transform: translateX(-50%) translateY(calc(-1 * var(--tick-radius)));
        width: calc(var(--compass-size) * 0.025);
        height: calc(var(--compass-size) * 0.10);
        border-radius: 999px;
        background: var(--pointer);
        transform: translateX(-50%) translateY(calc(-1 * (var(--tick-radius) - 2px)));

    }
    .compass-container  {
        position: relative;
        width: var(--compass-size);
        height: var(--compass-size);
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .scale-ring  {
        position: absolute;
        width: 100%;
        height: 100%;

    }
    .tick  {
        position: absolute;
        height: calc(var(--compass-size) * 0.056);
        transform-origin: bottom center;
        left: 50%;
        bottom: 50%;
        transform: translateX(-50%) rotate(var(--rot)) translateY(calc(-1 * var(--tick-radius)));
        border-radius: 1.5px;

    }
    .tick.major  {
        width: 1.5px;
        background-color: var(--tick-major);

    }
    .tick.medium  {
        width: 1px;
        background-color: var(--tick-medium);

    }
    .tick.minor  {
        width: 0.6px;
        background-color: var(--tick-minor);

    }
    .cardinal-label  {
        position: absolute;
        color: rgb(15,23,42);
        font-weight: 800;
        font-size: clamp(9px, calc(var(--compass-size) * 0.088), 11px);
        text-align: center;
        z-index: 30;
        line-height: 1;
        letter-spacing: .1px;

    }
    .label-n  {
        top: 4px;
        left: 50%;
        transform: translateX(-50%);

    }
    .label-o  {
        right: 4px;
        top: 50%;
        transform: translateY(-50%);

    }
    .label-s  {
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);

    }
    .label-w  {
        left: 4px;
        top: 50%;
        transform: translateY(-50%);

    }
    .pointer-wrapper  {
        position: absolute;
        width: 100%;
        height: 100%;
        transform: rotate(0deg);
        z-index: 10;
        pointer-events: none;
        filter: drop-shadow(0 8px 14px rgba(15,23,42,.10));
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

    }
    .arrow-head {
        position: absolute;
        top: calc(var(--compass-size) * 0.032);
        left: 50%;
        transform: translateX(-50%);
        width: calc(var(--compass-size) * 0.16);
        height: calc(var(--compass-size) * 0.16);
        z-index: 12;
        pointer-events: none;
        color: var(--pointer);

    }
    .arrow-head svg {
        width:100%;
        height:100%;
        display:block;

    }
    .arrow-shaft  {
        position: absolute;
        top: calc(var(--compass-size) * 0.152);
        left: 50%;
        transform: translateX(-50%);
        width: calc(var(--compass-size) * 0.02);
        height: calc(var(--compass-size) * 0.200);
        background-color: var(--pointer);
        border-radius: calc(var(--compass-size) * 0.012);

    }
    .tail-shaft  {
        position: absolute;
        bottom: calc(var(--compass-size) * 0.088);
        left: 50%;
        transform: translateX(-50%);
        width: calc(var(--compass-size) * 0.02);
        height: calc(var(--compass-size) * 0.248);
        background-color: var(--pointer);
        border-radius: calc(var(--compass-size) * 0.012);

    }
    .tail-circle  {
        position: absolute;
        bottom: calc(var(--compass-size) * 0.04);
        left: 50%;
        transform: translateX(-50%);
        width: calc(var(--compass-size) * 0.08);
        height: calc(var(--compass-size) * 0.08);
        background-color: var(--pointer);
        border-radius: 50%;

    }
    .center-disc  {
        position: absolute;
        width: var(--center-size);
        height: var(--center-size);
        border-radius: 50%;
        background: var(--center-disc);
        border: 1px solid var(--center-stroke);
        z-index: 20;
        pointer-events: none;
        box-shadow: 0 8px 18px var(--shadow);
        backdrop-filter: blur(6px);

    }
    .barometer-card .center-disc {
        width: calc(var(--center-size) * 1.2);
        height: calc(var(--center-size) * 1.2);
        opacity: 0.1;

    }
    .info-center  {
        position: relative;
        z-index: 25;
        text-align: center;
        color: rgb(15,23,42);

    }
    .direction-value  {
        font-size: clamp(14px, calc(var(--compass-size) * 0.152), 19px);
        font-weight: 720;
        line-height: 0.9;
        letter-spacing: -0.8px;

    }
    .direction-unit  {
        font-size: clamp(8px, calc(var(--compass-size) * 0.072), 9px);
        font-weight: 700;
        margin-top: 1px;
        color: rgb(15,23,42);
        letter-spacing: .1px;

    }
    .direction-compass  {
        font-size: clamp(9px, calc(var(--compass-size) * 0.08), 10px);
        font-weight: 800;
        margin-top: 1px;
        color: rgb(15,23,42);
        letter-spacing: .2px;

    }
    @media (max-width: 340px) {
        .grid {
            grid-template-columns: 1fr;

        }
        .heroTemp .temp {
            font-size: 50px;

        }
        .titleCard h1 {
            font-size: 24px;

        }
        .sectionHint {
            flex-direction:column;
            align-items:flex-start;
            gap:4px;

        }
        :root {
            --compass-size: 100px;

        }

    }
    html[data-theme="dark"] {
        --card: rgba(17, 24, 39, .72);
        --text: rgba(248,250,252,.92);
        --muted: rgba(203,213,225,.72);
        --tick-major: rgba(248,250,252,.40);
        --tick-medium: rgba(248,250,252,.30);
        --tick-minor: rgba(248,250,252,.22);
        --pointer: rgb(248,250,252);
        --center-disc: rgb(15, 23, 42);
        --center-stroke: rgba(248,250,252,.08);
        --shadow: rgba(0,0,0,.45);

    }
    html[data-theme="dark"] body {
        background: radial-gradient(900px 520px at 18% 10%, rgba(34,211,238,.18), rgba(34,211,238,0) 55%), radial-gradient(900px 520px at 85% 18%, rgba(168,85,247,.16), rgba(168,85,247,0) 55%), radial-gradient(900px 520px at 50% 95%, rgba(251,146,60,.12), rgba(251,146,60,0) 60%), linear-gradient(180deg, #070a12, #0b1020);

    }
    html[data-theme="dark"] .titleCard {
        background: rgba(2,6,23,.55);
        border: 1px solid rgba(148,163,184,.12);
        box-shadow: 0 18px 40px rgba(0,0,0,.45);

    }
    html[data-theme="dark"] .titleCard h1 {
        color: rgba(248,250,252,.92);

    }
    html[data-theme="dark"] .titleCard .sub {
        color: rgba(203,213,225,.68);

    }
    html[data-theme="dark"] .titleCardLink:focus-visible {
        outline-color: rgba(248,250,252,.40);

    }
    .project-wrap {
        max-width: 860px;
        padding-top: 8px;

    }
    .backLink {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 2px 2px 12px;
        color: rgba(15,23,42,.82);
        text-decoration: none;
        font-size: 13px;
        font-weight: 650;
        padding: 6px 10px;
        border-radius: 10px;
        border: 1px solid rgba(15,23,42,.10);
        background: rgba(255,255,255,.60);

    }
    .backLink:hover {
        text-decoration: none;
        transform: translateY(-1px);

    }
    .project-title {
        margin-bottom: 10px;

    }
    .project-hero {
        aspect-ratio: auto;
        min-height: 0;
        padding: 16px 18px;
        background: linear-gradient(145deg, rgba(223,244,255,.60), rgba(255,245,227,.62));
        border: 1px solid rgba(15,23,42,.10);

    }
    .project-lead {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: rgba(15,23,42,.82);

    }
    .project-kpis {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

    }
    .project-kpi {
        display: inline-flex;
        align-items: center;
        padding: 5px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        color: rgba(15,23,42,.82);
        background: rgba(255,255,255,.78);
        border: 1px solid rgba(15,23,42,.10);

    }
    .project-grid {
        margin-top: 12px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);

    }
    .project-card {
        aspect-ratio: auto;
        min-height: 0;
        padding: 14px 16px;

    }
    .project-card h2 {
        margin: 0 0 8px;
        font-size: 16px;
        color: rgba(15,23,42,.88);

    }
    .project-card p {
        margin: 0;
        font-size: 13px;
        line-height: 1.45;
        color: rgba(15,23,42,.76);

    }
    .project-list {
        margin: 0;
        padding-left: 18px;
        font-size: 13px;
        line-height: 1.45;
        color: rgba(15,23,42,.76);

    }
    .project-list li + li {
        margin-top: 4px;

    }
    .project-note {
        aspect-ratio: auto;
        min-height: 0;
        margin-top: 12px;
        padding: 14px 16px;
        border-style: dashed;
        border-width: 1px;
        border-color: rgba(15,23,42,.16);
        background: rgba(255,255,255,.55);

    }
    .project-note h2 {
        margin: 0 0 8px;
        font-size: 16px;
        color: rgba(15,23,42,.88);

    }
    .project-note p {
        margin: 0;
        font-size: 13px;
        line-height: 1.45;
        color: rgba(15,23,42,.76);

    }
    @media (max-width: 620px) {
        .project-grid {
            grid-template-columns: 1fr;

        }
        .project-hero {
            padding: 14px;

        }

    }
    html[data-theme="dark"] .backLink {
        color: rgba(203,213,225,.82);
        background: rgba(2,6,23,.48);
        border: 1px solid rgba(148,163,184,.20);

    }
    html[data-theme="dark"] .project-hero {
        background: linear-gradient(145deg, rgba(3,24,44,.58), rgba(48,22,58,.52));
        border: 1px solid rgba(148,163,184,.18);

    }
    html[data-theme="dark"] .project-lead {
        color: rgba(226,232,240,.86);

    }
    html[data-theme="dark"] .project-kpi {
        color: rgba(248,250,252,.88);
        background: rgba(2,6,23,.60);
        border: 1px solid rgba(148,163,184,.20);

    }
    html[data-theme="dark"] .project-card h2 {
        color: rgba(248,250,252,.92);

    }
    html[data-theme="dark"] .project-card p,
    html[data-theme="dark"] .project-list {
        color: rgba(203,213,225,.78);

    }
    html[data-theme="dark"] .project-note {
        border-color: rgba(148,163,184,.24);
        background: rgba(2,6,23,.46);

    }
    html[data-theme="dark"] .project-note h2 {
        color: rgba(248,250,252,.92);

    }
    html[data-theme="dark"] .project-note p {
        color: rgba(203,213,225,.78);

    }
    html[data-theme="dark"] .card {
        border: 1px solid rgba(148,163,184,.12);
        box-shadow: 0 14px 30px rgba(0,0,0,.38);

    }
    html[data-theme="dark"] .icon {
        background: rgba(248,250,252,.06);

    }
    html[data-theme="dark"] .icon svg {
        stroke: rgba(248,250,252,.75);

    }
    html[data-theme="dark"] .sectionHint, html[data-theme="dark"] .sectionHint .updatedAt, html[data-theme="dark"] .heroSub, html[data-theme="dark"] .value .unit, html[data-theme="dark"] .subline {
        color: rgba(203,213,225,.72);

    }
    html[data-theme="dark"] .emph {
        color: rgba(248,250,252,.90);

    }
    html[data-theme="dark"] .cardinal-label, html[data-theme="dark"] .info-center {
        color: rgba(248,250,252,.92);

    }
    html[data-theme="dark"] .direction-unit {
        color: rgba(203,213,225,.70);

    }
    html[data-theme="dark"] .direction-compass {
        color: rgba(248,250,252,.92);

    }
    html[data-theme="dark"] .heroTemp .unit {
        color: rgba(203,213,225,.72);

    }
    html[data-theme="dark"] .heroSub strong {
        color: rgba(248,250,252,.92);

    }
    html[data-theme="dark"] .card[data-disabled="true"]::after {
        background: rgba(15,23,42,.55);
        color: rgba(248,250,252,.82);

    }
    html[data-theme="dark"] .themeToggle {
        border: 1px solid rgba(148,163,184,.14);
        background: rgba(2,6,23,.50);
        box-shadow: 0 12px 26px rgba(0,0,0,.55);

    }
    html[data-theme="dark"] .themeToggle svg {
        stroke: rgba(248,250,252,.85);

    }
    html[data-theme="dark"] .themeToggle .sun {
        display:block;

    }
    html[data-theme="dark"] .themeToggle .moon {
        display:none;

    }
    .stationButton {
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        padding: 0;
        cursor: pointer;
        letter-spacing: .2px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        -webkit-tap-highlight-color: transparent;

    }
    .stationButton::after {
        content: "▾";
        font-size: 12px;
        opacity: .75;
        transform: translateY(-1px);

    }
    html[data-theme="dark"] .stationButton::after {
        opacity: .85;

    }
    .modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
        z-index: 999;

    }
    .modal[aria-hidden="false"] {
        display:flex;

    }
    .modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15,23,42,.35);
        backdrop-filter: blur(6px);

    }
    html[data-theme="dark"] .modal-backdrop {
        background: rgba(2,6,23,.55);

    }
    .modal-card {
        position: relative;
        width: min(460px, 100%);
        border-radius: 18px;
        padding: 16px;
        background: rgba(255,255,255,.85);
        border: 1px solid rgba(15,23,42,.08);
        box-shadow: 0 18px 50px rgba(15,23,42,.20);
        backdrop-filter: blur(14px);

    }
    html[data-theme="dark"] .modal-card {
        background: rgba(2,6,23,.62);
        border: 1px solid rgba(148,163,184,.14);
        box-shadow: 0 18px 60px rgba(0,0,0,.55);

    }
    .modal-head {
        display:flex;
        align-items:flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;

    }
    .modal-title {
        margin: 0;
        font-size: 15px;
        font-weight: 760;
        letter-spacing: .2px;
        color: rgba(15,23,42,.88);

    }
    html[data-theme="dark"] .modal-title {
        color: rgba(248,250,252,.92);

    }
    .modal-sub {
        margin-top: 4px;
        font-size: 12px;
        color: rgba(15,23,42,.62);

    }
    html[data-theme="dark"] .modal-sub {
        color: rgba(203,213,225,.72);

    }
    .modal-close {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        border: 1px solid rgba(15,23,42,.10);
        background: rgba(255,255,255,.55);
        display:grid;
        place-items:center;
        cursor:pointer;
        -webkit-tap-highlight-color: transparent;
        flex: 0 0 auto;

    }
    html[data-theme="dark"] .modal-close {
        border: 1px solid rgba(148,163,184,.14);
        background: rgba(2,6,23,.50);

    }
    .modal-close svg {
        width: 18px;
        height: 18px;
        stroke: rgba(15,23,42,.78);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;

    }
    html[data-theme="dark"] .modal-close svg {
        stroke: rgba(248,250,252,.85);

    }
    .station-list {
        display:flex;
        flex-direction: column;
        gap: 10px;
        margin: 12px 0 14px;

    }
    .station-item {
        display:flex;
        align-items:center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 16px;
        border: 1px solid rgba(15,23,42,.08);
        background: rgba(245,246,248,.65);
        cursor:pointer;
        -webkit-tap-highlight-color: transparent;

    }
    html[data-theme="dark"] .station-item {
        border: 1px solid rgba(148,163,184,.14);
        background: rgba(15, 23, 42, .50);

    }
    .station-item input {
        margin: 0;

    }
    .station-meta {
        display:flex;
        flex-direction: column;
        line-height: 1.15;

    }
    .station-name {
        font-weight: 760;
        font-size: 13px;
        color: rgba(15,23,42,.88);

    }
    html[data-theme="dark"] .station-name {
        color: rgba(248,250,252,.92);

    }
    .station-code {
        font-size: 11px;
        color: rgba(15,23,42,.55);

    }
    html[data-theme="dark"] .station-code {
        color: rgba(203,213,225,.70);

    }
    .modal-actions {
        display:flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: 6px;

    }
    .btn {
        border: 1px solid rgba(15,23,42,.12);
        background: rgba(255,255,255,.55);
        color: rgba(15,23,42,.88);
        padding: 10px 12px;
        border-radius: 14px;
        font-weight: 740;
        font-size: 13px;
        cursor:pointer;
        -webkit-tap-highlight-color: transparent;
        backdrop-filter: blur(10px);

    }
    html[data-theme="dark"] .btn {
        border: 1px solid rgba(148,163,184,.16);
        background: rgba(2,6,23,.50);
        color: rgba(248,250,252,.92);

    }
    .btn.primary {
        border-color: rgba(15,23,42,.16);
        background: rgba(15,23,42,.08);

    }
    html[data-theme="dark"] .btn.primary {
        border-color: rgba(148,163,184,.18);
        background: rgba(248,250,252,.10);

    }
    .seriesModal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
        z-index: 1000;

    }
    .seriesModal[aria-hidden="false"] {
        display:flex;

    }
    .seriesModal .modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15,23,42,.35);
        backdrop-filter: blur(6px);

    }
    html[data-theme="dark"] .seriesModal .modal-backdrop {
        background: rgba(2,6,23,.55);

    }
    .seriesModal .modal-card {
        position: relative;
        width: min(520px, 100%);
        border-radius: 18px;
        padding: 16px;
        background: rgba(255,255,255,.88);
        border: 1px solid rgba(15,23,42,.08);
        box-shadow: 0 18px 50px rgba(15,23,42,.20);
        backdrop-filter: blur(14px);

    }
    html[data-theme="dark"] .seriesModal .modal-card {
        background: rgba(2,6,23,.62);
        border: 1px solid rgba(148,163,184,.14);
        box-shadow: 0 18px 60px rgba(0,0,0,.55);

    }
    .seriesCanvasWrap {
        margin-top: 10px;
        /* no extra “card” around the chart inside the popup */
        padding: 0;
        border: none;
        background: transparent;
        border-radius: 0;
        overflow: visible;
    }
    html[data-theme="dark"] .seriesCanvasWrap {
        border: none;
        background: transparent;
    }
    canvas.seriesChart {
        width: 100%;
        height: 240px;
        display:block;

    }
    .seriesCursorTime {
        margin-top: 10px;
        font-size: 12px;
        color: rgba(15,23,42,.62);
        text-align: center;
        min-height: 16px;
        letter-spacing: .1px;
    }
    html[data-theme="dark"] .seriesCursorTime {
        color: rgba(203,213,225,.72);
    }

    .seriesHintRow {
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 10px;
        font-size: 12px;
        color: rgba(15,23,42,.62);

    }
    html[data-theme="dark"] .seriesHintRow {
        color: rgba(203,213,225,.72);

    }
    .seriesStatus {
        font-size: 12px;
        color: rgba(15,23,42,.62);
        margin-top: 8px;

    }
    html[data-theme="dark"] .seriesStatus {
        color: rgba(203,213,225,.72);

    }
    .seriesModalCard {
        padding-top: 14px;

    }
    .seriesCloseAbs {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 5;

    }
    .seriesHeadSimple {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 6px;
        margin-bottom: 12px;

    }
    .seriesHeadTop {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;

    }
    .seriesHeadIcon .icon {
        margin: 0 auto;

    }
    .seriesMainValue {
        font-size: 30px;
        font-weight: 820;
        letter-spacing: -.2px;
        line-height: 1.05;
        color: rgba(15,23,42,.92);
        width: 100%;
        text-align: left;
        padding-left: 22px;

    }
    html[data-theme="dark"] .seriesMainValue {
        color: rgba(248,250,252,.92);

    }
    .seriesSecondaryValue {
        font-size: 13px;
        color: rgba(107,114,128,.95);
        line-height: 1.25;
        min-height: 16px;
        width: 100%;
        text-align: left;
        padding-left: 22px;

    }
    html[data-theme="dark"] .seriesSecondaryValue {
        color: rgba(203,213,225,.72);

    }
    body.modal-open  {
        overflow: hidden;

    }

/* Make series modal full width like main */
.seriesModal,
.series-modal,
.modal-series {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.seriesModalContent,
.series-modal-content,
.modal-series-content {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
}

/* Full-bleed series modal on narrow screens (no outer gap) */
@media (max-width: 560px) {
  .seriesModal{
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .seriesModal .modal-card{
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    /* optional: keep content clear of phone notches */
    padding-top: calc(16px + env(safe-area-inset-top)) !important;
    padding-left: calc(16px + env(safe-area-inset-left)) !important;
    padding-right: calc(16px + env(safe-area-inset-right)) !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
}

/* Bottom-sheet style on narrow screens: flush to bottom, gap at top, rounded top corners */
@media (max-width: 560px) {
  .seriesModal{
    align-items: flex-end !important;
    justify-content: center !important;
    /* no side/bottom gap; keep a little top gap + respect safe area */
    padding: max(14px, env(safe-area-inset-top)) 0 0 0 !important;
  }
  .seriesModal .modal-card{
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    /* keep it from touching the very top */
    max-height: calc(100vh - max(14px, env(safe-area-inset-top))) !important;
    overflow: auto !important;
    /* comfy padding + safe-area bottom */
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) 16px !important;
  }
}

.seriesModal .modal-card{
    height: 82vh !important;
  
}