:root {
    --pe1hud-cyan: #33ccdd;
}

.pe1hud-sw {
    --sw-bg: #0b151b;
    --sw-panel: #101e26;
    --sw-panel-2: #142731;
    --sw-text: #edf8fa;
    --sw-muted: #88a5ae;
    --sw-line: rgba(51, 204, 221, .20);
    --sw-cyan: #33ccdd;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 1.2rem 0;
    padding: clamp(14px, 2vw, 24px);
    overflow: hidden;
    color: var(--sw-text);
    background:
        radial-gradient(circle at 85% -20%, rgba(51, 204, 221, .16), transparent 36%),
        radial-gradient(circle at -10% 120%, rgba(51, 204, 221, .08), transparent 32%),
        var(--sw-bg);
    border: 1px solid rgba(51, 204, 221, .28);
    box-shadow: 0 16px 38px rgba(0,0,0,.22);
    font-family: inherit;
}

.pe1hud-sw *, .pe1hud-sw *::before, .pe1hud-sw *::after { box-sizing: border-box; }

.pe1hud-sw__topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.pe1hud-sw__title {
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: var(--sw-text) !important;
    font-size: clamp(1.25rem, 2.1vw, 1.8rem) !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em;
}

.pe1hud-sw__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--sw-muted);
    font-size: 12px;
    letter-spacing: .02em;
}

.pe1hud-sw__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sw-cyan);
    box-shadow: 0 0 0 0 rgba(51, 204, 221, .55);
    animation: pe1hudLivePulse 2s infinite;
}

.pe1hud-sw__live-label {
    color: var(--sw-cyan);
    font-weight: 800;
    letter-spacing: .08em;
}

.pe1hud-sw__separator, .pe1hud-sw__footer-dot { opacity: .45; }

.pe1hud-sw__refresh {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    color: var(--sw-cyan);
    background: rgba(51, 204, 221, .08);
    border: 1px solid rgba(51, 204, 221, .34);
    border-radius: 50%;
    cursor: pointer;
    transition: .2s ease;
}

.pe1hud-sw__refresh:hover { background: rgba(51, 204, 221, .16); transform: translateY(-1px); }
.pe1hud-sw__refresh:focus-visible { outline: 2px solid var(--sw-cyan); outline-offset: 2px; }
.pe1hud-sw__refresh svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pe1hud-sw__refresh.is-loading svg { animation: pe1hudSpin .9s linear infinite; }

.pe1hud-sw__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.pe1hud-sw-card {
    --sw-state: #33ccdd;
    --sw-pct: 0;
    position: relative;
    min-width: 0;
    min-height: 326px;
    padding: 17px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.028), transparent 44%),
        var(--sw-panel);
    border: 1px solid rgba(255,255,255,.065);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 24px rgba(0,0,0,.12);
    isolation: isolate;
}

.pe1hud-sw-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sw-state), transparent);
    opacity: .85;
}

.pe1hud-sw-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 150px;
    height: 150px;
    right: -70px;
    top: 55px;
    border-radius: 50%;
    background: var(--sw-state);
    filter: blur(60px);
    opacity: .055;
}

.pe1hud-sw-card__head {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.pe1hud-sw-card__head h3 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 780 !important;
    line-height: 1.15 !important;
}

.pe1hud-sw-card__head p {
    margin: 4px 0 0 !important;
    color: var(--sw-muted) !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
}

.pe1hud-sw-card__info {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 1px solid rgba(51,204,221,.38);
    border-radius: 50%;
    color: var(--sw-cyan);
    font: 800 12px/1 inherit;
    cursor: help;
}

.pe1hud-sw-card__info::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 50;
    width: min(250px, 72vw);
    right: -5px;
    top: 30px;
    padding: 10px 11px;
    color: #dcecef;
    background: #071116;
    border: 1px solid rgba(51,204,221,.3);
    box-shadow: 0 12px 25px rgba(0,0,0,.35);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: .16s ease;
}

.pe1hud-sw-card__info:hover::after,
.pe1hud-sw-card__info:focus::after { opacity: 1; visibility: visible; transform: translateY(0); }

.pe1hud-sw-card__visual {
    position: relative;
    height: 192px;
    margin-top: 5px;
}

/* Meter */
.pe1hud-sw-gauge {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 180px;
    max-width: 100%;
    height: 106px;
    transform: translateX(-50%);
}

.pe1hud-sw-gauge svg { width: 100%; height: 104px; overflow: visible; }
.pe1hud-sw-gauge path { fill: none; stroke-linecap: round; stroke-width: 8; }
.pe1hud-sw-gauge__track { stroke: rgba(255,255,255,.08); }
.pe1hud-sw-gauge__value {
    stroke: var(--sw-state);
    stroke-dasharray: calc(var(--sw-pct) * 1) 100;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sw-state) 70%, transparent));
    transition: stroke-dasharray .7s cubic-bezier(.2,.8,.2,1), stroke .4s ease;
}

.pe1hud-sw-gauge__reading {
    position: absolute;
    inset: 49px 0 auto;
    text-align: center;
    white-space: nowrap;
}

.pe1hud-sw-gauge__number {
    display: inline-block;
    color: #fff;
    font-size: 34px;
    font-weight: 830;
    line-height: 1;
    letter-spacing: -.04em;
    text-shadow: 0 0 14px rgba(51,204,221,.11);
}

.pe1hud-sw-gauge__unit {
    margin-left: 4px;
    color: var(--sw-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.pe1hud-sw-card__bottom {
    border-top: 1px solid rgba(255,255,255,.055);
    padding-top: 11px;
}

.pe1hud-sw-card__state {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--sw-state);
    font-size: 12px;
}

.pe1hud-sw-card__state-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.pe1hud-sw-card__hint {
    margin-top: 4px;
    color: var(--sw-muted);
    font-size: 11px;
    line-height: 1.3;
}

.pe1hud-sw__footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
    color: #688791;
    font-size: 10.5px;
    line-height: 1.4;
    text-align: center;
}

/* Geïllustreerde iconen */
.pe1hud-sw-icon { position: absolute; left: 50%; top: 8px; width: 92px; height: 82px; transform: translateX(-50%); opacity: .96; }

.pe1hud-sw-icon--sun .sun-core,
.pe1hud-sw-icon--spots .spots-sun {
    position: absolute;
    width: 48px;
    height: 48px;
    left: 22px;
    top: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #fff6b4 0 7%, #ffd45c 28%, #f39732 72%, #cb5d28 100%);
    box-shadow: 0 0 19px rgba(255,177,55,.28), inset -7px -6px 12px rgba(148,61,27,.25);
}

.pe1hud-sw-icon--sun .ray {
    position: absolute;
    width: 2px;
    height: 11px;
    left: 45px;
    top: 2px;
    border-radius: 4px;
    background: #ffd15a;
    transform-origin: 1px 54px;
    opacity: .78;
    animation: pe1hudRay 3.4s ease-in-out infinite alternate;
}
.pe1hud-sw-icon--sun .r2 { transform: rotate(45deg); animation-delay: -.4s; }
.pe1hud-sw-icon--sun .r3 { transform: rotate(90deg); animation-delay: -.8s; }
.pe1hud-sw-icon--sun .r4 { transform: rotate(135deg); animation-delay: -1.2s; }
.pe1hud-sw-icon--sun .r5 { transform: rotate(180deg); animation-delay: -1.6s; }
.pe1hud-sw-icon--sun .r6 { transform: rotate(225deg); animation-delay: -2s; }
.pe1hud-sw-icon--sun .r7 { transform: rotate(270deg); animation-delay: -2.4s; }
.pe1hud-sw-icon--sun .r8 { transform: rotate(315deg); animation-delay: -2.8s; }
.pe1hud-sw-icon--sun .radio-wave { position:absolute; border:2px solid var(--sw-cyan); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:rotate(45deg); opacity:.6; }
.pe1hud-sw-icon--sun .w1 { width:18px;height:18px;right:2px;top:17px; animation: pe1hudWave 1.8s infinite; }
.pe1hud-sw-icon--sun .w2 { width:29px;height:29px;right:-4px;top:11px; animation: pe1hudWave 1.8s .55s infinite; }

.pe1hud-sw-icon--spots .spots-sun { width: 60px; height:60px; left:16px; top:8px; background:radial-gradient(circle at 35% 32%, #fff0a6, #f9b942 48%, #e37b32 100%); }
.pe1hud-sw-icon--spots i { position:absolute; display:block; border-radius:50%; background:#5a2b26; box-shadow:0 0 0 1px rgba(97,39,30,.22); opacity:.9; }
.pe1hud-sw-icon--spots i:nth-child(1){width:7px;height:7px;left:16px;top:15px}.pe1hud-sw-icon--spots i:nth-child(2){width:4px;height:4px;left:30px;top:11px}.pe1hud-sw-icon--spots i:nth-child(3){width:9px;height:6px;left:35px;top:27px}.pe1hud-sw-icon--spots i:nth-child(4){width:5px;height:8px;left:17px;top:35px}.pe1hud-sw-icon--spots i:nth-child(5){width:4px;height:4px;left:41px;top:44px}.pe1hud-sw-icon--spots i:nth-child(6){width:3px;height:3px;left:26px;top:47px}.pe1hud-sw-icon--spots i:nth-child(7){width:5px;height:4px;left:9px;top:27px}.pe1hud-sw-icon--spots i:nth-child(8){width:3px;height:5px;left:46px;top:17px}

.pe1hud-sw-icon--magnetosphere .earth,
.pe1hud-sw-icon--aindex .earth-mini { position:absolute; left:37px; top:25px; width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 36% 35%, #7ae3ed 0 20%, #2797b1 55%, #165268 100%); box-shadow:0 0 13px rgba(51,204,221,.28); }
.pe1hud-sw-icon--magnetosphere .earth::before { content:""; position:absolute; width:9px;height:6px;left:3px;top:5px;border-radius:60% 40%;background:#77bd75;transform:rotate(-18deg);opacity:.9; }
.pe1hud-sw-icon--magnetosphere .field { position:absolute; left:17px; top:7px; width:63px; height:58px; border:1.5px solid rgba(51,204,221,.64); border-left-color:transparent; border-radius:50%; transform:rotate(7deg); }
.pe1hud-sw-icon--magnetosphere .f2 { left:10px;top:2px;width:77px;height:69px;opacity:.55;animation:pe1hudField 2.6s ease-in-out infinite alternate; }
.pe1hud-sw-icon--magnetosphere .f3 { left:3px;top:-3px;width:91px;height:80px;opacity:.28;animation:pe1hudField 2.6s .7s ease-in-out infinite alternate; }
.pe1hud-sw-icon--magnetosphere .solar-arrow { position:absolute; left:0; width:20px; height:1px; background:#f7b34c; box-shadow:0 0 5px rgba(247,179,76,.45); }
.pe1hud-sw-icon--magnetosphere .solar-arrow::after { content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid #f7b34c;border-top:3px solid transparent;border-bottom:3px solid transparent; }
.pe1hud-sw-icon--magnetosphere .a1{top:27px;animation:pe1hudSolarWind 1.8s linear infinite}.pe1hud-sw-icon--magnetosphere .a2{top:45px;animation:pe1hudSolarWind 1.8s .8s linear infinite}

.pe1hud-sw-icon--aindex .earth-mini { left:35px;top:27px;width:24px;height:24px; }
.pe1hud-sw-icon--aindex .pulse { position:absolute; left:25px; top:17px; width:44px;height:44px;border:1.5px solid rgba(51,204,221,.5);border-radius:50%;animation:pe1hudAPulse 2.2s infinite; }
.pe1hud-sw-icon--aindex .p2{animation-delay:.7s}.pe1hud-sw-icon--aindex .p3{animation-delay:1.4s}
.pe1hud-sw-icon--aindex .field-bar { position:absolute; bottom:8px; width:5px; border-radius:2px 2px 0 0; background:linear-gradient(to top, rgba(51,204,221,.18), var(--sw-cyan)); box-shadow:0 0 7px rgba(51,204,221,.18); }
.pe1hud-sw-icon--aindex .b1{height:17px;left:5px}.pe1hud-sw-icon--aindex .b2{height:30px;left:13px}.pe1hud-sw-icon--aindex .b3{height:22px;left:21px}

@keyframes pe1hudLivePulse { 70% { box-shadow:0 0 0 7px rgba(51,204,221,0) } 100% { box-shadow:0 0 0 0 rgba(51,204,221,0) } }
@keyframes pe1hudSpin { to { transform: rotate(360deg); } }
@keyframes pe1hudRay { from { opacity:.45; height:9px } to { opacity:.9; height:13px } }
@keyframes pe1hudWave { 0% { opacity:0; transform:rotate(45deg) scale(.65) } 35% { opacity:.65 } 100% { opacity:0; transform:rotate(45deg) scale(1.18) } }
@keyframes pe1hudField { from { transform:rotate(7deg) scale(.96); opacity:.25 } to { transform:rotate(7deg) scale(1.03); opacity:.62 } }
@keyframes pe1hudSolarWind { from { transform:translateX(-12px); opacity:0 } 35%{opacity:.85} to{transform:translateX(14px);opacity:0} }
@keyframes pe1hudAPulse { 0%{transform:scale(.45);opacity:.75} 100%{transform:scale(1.25);opacity:0} }

@media (max-width: 1080px) {
    .pe1hud-sw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .pe1hud-sw { padding: 13px; }
    .pe1hud-sw__grid { grid-template-columns: 1fr; gap: 11px; }
    .pe1hud-sw-card { min-height: 300px; }
    .pe1hud-sw-card__visual { height: 175px; }
    .pe1hud-sw__separator { display:none; }
    .pe1hud-sw__meta { gap:5px 7px; }
    .pe1hud-sw__updated { flex-basis:100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pe1hud-sw *, .pe1hud-sw *::before, .pe1hud-sw *::after { animation: none !important; transition: none !important; }
}

/* Brede gecombineerde HF-indicatie */
.pe1hud-sw-hf {
    --hf-score: 0;
    --hf-color: #33ccdd;
    position: relative;
    margin-top: 14px;
    padding: 16px 18px 15px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(51,204,221,.075), rgba(255,255,255,.018) 44%, rgba(0,0,0,.06)), var(--sw-panel);
    border: 1px solid rgba(51,204,221,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.pe1hud-sw-hf::before { content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px; background:linear-gradient(90deg, transparent, var(--hf-color), transparent); opacity:.9; }
.pe1hud-sw-hf::after { content:""; position:absolute; width:220px; height:130px; right:-80px; top:-45px; border-radius:50%; background:var(--hf-color); filter:blur(70px); opacity:.07; pointer-events:none; }
.pe1hud-sw-hf__head { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pe1hud-sw-hf__eyebrow { display:block; margin-bottom:3px; color:var(--sw-cyan); font-size:10px; font-weight:850; letter-spacing:.12em; }
.pe1hud-sw-hf__label { color:var(--hf-color); font-size:clamp(19px,2vw,27px); line-height:1.05; text-shadow:0 0 13px color-mix(in srgb, var(--hf-color) 30%, transparent); }
.pe1hud-sw-hf__score { flex:0 0 auto; color:#fff; font-size:29px; font-weight:850; line-height:1; letter-spacing:-.04em; }
.pe1hud-sw-hf__score small { margin-left:3px; color:var(--sw-muted); font-size:11px; font-weight:700; letter-spacing:0; }
.pe1hud-sw-hf__scale { margin-top:13px; }
.pe1hud-sw-hf__track { position:relative; height:10px; border-radius:20px; background:linear-gradient(90deg, rgba(239,106,91,.3) 0 42%, rgba(241,200,75,.3) 42% 60%, rgba(88,214,141,.3) 60% 78%, rgba(126,227,108,.3) 78% 100%); box-shadow:inset 0 1px 3px rgba(0,0,0,.28); }
.pe1hud-sw-hf__fill { position:absolute; inset:0 auto 0 0; width:calc(var(--hf-score) * 1%); border-radius:20px; background:linear-gradient(90deg, rgba(51,204,221,.6), var(--hf-color)); box-shadow:0 0 10px color-mix(in srgb, var(--hf-color) 35%, transparent); transition:width .7s cubic-bezier(.2,.8,.2,1), background .4s ease; }
.pe1hud-sw-hf__marker { position:absolute; left:calc(var(--hf-score) * 1%); top:50%; width:16px; height:16px; border:3px solid #0b151b; border-radius:50%; background:var(--hf-color); box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 0 13px var(--hf-color); transform:translate(-50%,-50%); transition:left .7s cubic-bezier(.2,.8,.2,1), background .4s ease; }
.pe1hud-sw-hf__ticks { display:grid; grid-template-columns:42fr 18fr 18fr 22fr; margin-top:7px; color:#74939c; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.045em; }
.pe1hud-sw-hf__ticks span:nth-child(1){text-align:left}.pe1hud-sw-hf__ticks span:nth-child(2),.pe1hud-sw-hf__ticks span:nth-child(3){text-align:center}.pe1hud-sw-hf__ticks span:nth-child(4){text-align:right}
.pe1hud-sw-hf__hint { margin-top:11px; color:#d8e9ed; font-size:12px; line-height:1.4; }
.pe1hud-sw-hf__note { margin-top:4px; color:#6f8d96; font-size:10.5px; line-height:1.4; }

@media (max-width:560px) {
    .pe1hud-sw-hf { padding:14px; }
    .pe1hud-sw-hf__score { font-size:24px; }
    .pe1hud-sw-hf__ticks { font-size:8.5px; }
}

/* v1.2: thema-keuze + compacte HF-widget */
.pe1hud-sw__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.pe1hud-sw__theme-toggle {
    position: relative;
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--sw-cyan);
    background: rgba(51, 204, 221, .08);
    border: 1px solid rgba(51, 204, 221, .34);
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.pe1hud-sw__theme-toggle:hover { background: rgba(51, 204, 221, .16); transform: translateY(-1px); }
.pe1hud-sw__theme-toggle:focus-visible { outline: 2px solid var(--sw-cyan); outline-offset: 2px; }
.pe1hud-sw__theme-sun,
.pe1hud-sw__theme-moon { position: absolute; font: 700 20px/1 Arial,sans-serif; transition: .25s ease; }
.pe1hud-sw__theme-sun { opacity: .35; transform: translateY(18px) rotate(35deg); }
.pe1hud-sw__theme-moon { opacity: 1; transform: translateY(0) rotate(0); }

.pe1hud-sw--theme-light .pe1hud-sw__theme-sun,
.pe1hud-sw-compact--theme-light .pe1hud-sw__theme-sun { opacity: 1; transform: translateY(0) rotate(0); }
.pe1hud-sw--theme-light .pe1hud-sw__theme-moon,
.pe1hud-sw-compact--theme-light .pe1hud-sw__theme-moon { opacity: .25; transform: translateY(-18px) rotate(-35deg); }

/* Lichte complete template */
.pe1hud-sw--theme-light {
    --sw-bg: #f4fbfc;
    --sw-panel: #ffffff;
    --sw-panel-2: #eaf7f9;
    --sw-text: #17343c;
    --sw-muted: #607b84;
    --sw-line: rgba(21, 89, 99, .15);
    color: var(--sw-text);
    background:
        radial-gradient(circle at 85% -20%, rgba(51, 204, 221, .18), transparent 36%),
        radial-gradient(circle at -10% 120%, rgba(51, 204, 221, .09), transparent 32%),
        var(--sw-bg);
    border-color: rgba(35, 153, 168, .28);
    box-shadow: 0 14px 30px rgba(29, 70, 78, .10);
}
.pe1hud-sw--theme-light .pe1hud-sw-card {
    background: linear-gradient(180deg, rgba(51,204,221,.035), transparent 44%), var(--sw-panel);
    border-color: rgba(24, 86, 96, .11);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 20px rgba(27, 67, 74, .07);
}
.pe1hud-sw--theme-light .pe1hud-sw-card__head h3,
.pe1hud-sw--theme-light .pe1hud-sw-gauge__number,
.pe1hud-sw--theme-light .pe1hud-sw-hf__score { color: var(--sw-text) !important; }
.pe1hud-sw--theme-light .pe1hud-sw-card__bottom { border-top-color: rgba(22, 70, 78, .10); }
.pe1hud-sw--theme-light .pe1hud-sw-gauge__track { stroke: rgba(20, 67, 75, .10); }
.pe1hud-sw--theme-light .pe1hud-sw-card__info::after {
    color: #eefcfd;
    background: #15343c;
    box-shadow: 0 10px 22px rgba(22, 62, 70, .20);
}
.pe1hud-sw--theme-light .pe1hud-sw-hf {
    background: linear-gradient(135deg, rgba(51,204,221,.10), rgba(255,255,255,.65) 50%), var(--sw-panel);
    border-color: rgba(26, 117, 130, .16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.pe1hud-sw--theme-light .pe1hud-sw-hf__hint { color: #385962; }
.pe1hud-sw--theme-light .pe1hud-sw-hf__note,
.pe1hud-sw--theme-light .pe1hud-sw-hf__ticks { color: #69858d; }
.pe1hud-sw--theme-light .pe1hud-sw-hf__marker { border-color: #f4fbfc; }

/* Alleen-HF shortcode voor zijbalken / widgets */
.pe1hud-sw-compact {
    --sw-bg: #0b151b;
    --sw-panel: #101e26;
    --sw-panel-2: #142731;
    --sw-text: #edf8fa;
    --sw-muted: #88a5ae;
    --sw-cyan: #33ccdd;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: .8rem 0;
    padding: 11px;
    overflow: hidden;
    color: var(--sw-text);
    background: radial-gradient(circle at 100% 0%, rgba(51,204,221,.13), transparent 45%), var(--sw-bg);
    border: 1px solid rgba(51, 204, 221, .26);
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
    font-family: inherit;
}
.pe1hud-sw-compact *, .pe1hud-sw-compact *::before, .pe1hud-sw-compact *::after { box-sizing: border-box; }
.pe1hud-sw-compact__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 30px;
    margin-bottom: 8px;
}
.pe1hud-sw-compact__title {
    min-width: 0;
    color: var(--sw-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}
.pe1hud-sw-compact .pe1hud-sw__theme-toggle {
    width: 30px;
    height: 30px;
    min-width: 30px;
}
.pe1hud-sw-compact .pe1hud-sw__theme-sun,
.pe1hud-sw-compact .pe1hud-sw__theme-moon { font-size: 16px; }
.pe1hud-sw-hf--compact {
    margin-top: 0;
    padding: 11px 10px 10px;
}
.pe1hud-sw-hf--compact .pe1hud-sw-hf__head { gap: 8px; }
.pe1hud-sw-hf--compact .pe1hud-sw-hf__label { font-size: clamp(18px, 8vw, 23px); }
.pe1hud-sw-hf--compact .pe1hud-sw-hf__score { font-size: 22px; }
.pe1hud-sw-hf--compact .pe1hud-sw-hf__score small { font-size: 9px; }
.pe1hud-sw-hf--compact .pe1hud-sw-hf__scale { margin-top: 10px; }
.pe1hud-sw-hf--compact .pe1hud-sw-hf__track { height: 8px; }
.pe1hud-sw-hf--compact .pe1hud-sw-hf__marker { width: 14px; height: 14px; border-width: 2px; }
.pe1hud-sw-hf--compact .pe1hud-sw-hf__ticks { margin-top: 6px; font-size: 7.7px; letter-spacing: .015em; }
.pe1hud-sw-hf--compact .pe1hud-sw-hf__hint { margin-top: 8px; font-size: 10.5px; }
.pe1hud-sw-compact__updated {
    margin-top: 7px;
    color: var(--sw-muted);
    font-size: 9.5px;
    line-height: 1.25;
    text-align: right;
}

.pe1hud-sw-compact--theme-light {
    --sw-bg: #f4fbfc;
    --sw-panel: #ffffff;
    --sw-panel-2: #eaf7f9;
    --sw-text: #17343c;
    --sw-muted: #607b84;
    color: var(--sw-text);
    background: radial-gradient(circle at 100% 0%, rgba(51,204,221,.18), transparent 48%), var(--sw-bg);
    border-color: rgba(35, 153, 168, .25);
    box-shadow: 0 8px 20px rgba(29, 70, 78, .09);
}
.pe1hud-sw-compact--theme-light .pe1hud-sw-hf {
    background: linear-gradient(135deg, rgba(51,204,221,.10), rgba(255,255,255,.7) 55%), var(--sw-panel);
    border-color: rgba(26, 117, 130, .16);
}
.pe1hud-sw-compact--theme-light .pe1hud-sw-hf__score { color: var(--sw-text); }
.pe1hud-sw-compact--theme-light .pe1hud-sw-hf__ticks { color: #69858d; }
.pe1hud-sw-compact--theme-light .pe1hud-sw-hf__hint { color: #385962; }
.pe1hud-sw-compact--theme-light .pe1hud-sw-hf__marker { border-color: #f4fbfc; }

@media (max-width: 360px) {
    .pe1hud-sw-hf--compact .pe1hud-sw-hf__ticks { font-size: 7px; }
    .pe1hud-sw-hf--compact .pe1hud-sw-hf__label { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .pe1hud-sw-compact *, .pe1hud-sw-compact *::before, .pe1hud-sw-compact *::after { animation: none !important; transition: none !important; }
}
.pe1hud-sw-compact__top .pe1hud-sw__theme-toggle { margin-left: auto; }