/* ── Wilson LED Calculator — front-end styles ── */
#wled-app {
    --wled-bg:#0a0a0a;--wled-panel:#111214;--wled-border:#2a2d33;
    --wled-accent:#f0c040;--wled-accent2:#4af0c8;--wled-text:#e8e8e8;
    --wled-muted:#666b75;--wled-danger:#f05050;--wled-screen:#0d1b2a;
    --wled-nova:#7090f0;--wled-pwr:#f07840;
    background: var(--wled-bg);
    color: var(--wled-text);
    font-family: 'IBM Plex Sans', sans-serif;
    position: relative;
    overflow: hidden;
}

#wled-app::before {
    content:'';position:absolute;inset:0;
    background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.07) 2px,rgba(0,0,0,.07) 4px);
    pointer-events:none;z-index:1;
}

#wled-app * { box-sizing: border-box; }

/* Header */
.wled-header {
    display:flex;align-items:center;justify-content:space-between;gap:.75rem;
    background:#000;padding:.75rem 16px;border-bottom:2px solid var(--wled-accent);width:100%;
}
.wled-header-logo { height:40px;width:auto;flex-shrink:0; }
.wled-header-title {
    font-family:'Bebas Neue',sans-serif;font-size:clamp(1.2rem,5vw,3rem);
    letter-spacing:.08em;color:#fff;line-height:1;flex:1;text-align:right;
}

/* Layout */
.wled-grid {
    display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start;
    max-width:1140px;margin:0 auto;padding:1.5rem 16px 2rem;
}
@media(min-width:860px){ .wled-grid{grid-template-columns:360px minmax(0,1fr);} }
.wled-left { display:flex;flex-direction:column;gap:0;min-width:0; }
.wled-results { display:flex;flex-direction:column;gap:0;min-width:0; }

/* Box */
.wled-box,.wled-spec-box,.wled-wiring-box {
    background:var(--wled-panel);border:1px solid var(--wled-border);padding:1.25rem;
}
.wled-box-label {
    font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--wled-accent);
    text-transform:uppercase;letter-spacing:.1em;padding:.9rem 0 .4rem;display:block;
}
.wled-box-label:first-child { padding-top:.2rem; }
.wled-nova-card-label {
    font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--wled-nova);
    text-transform:uppercase;letter-spacing:.1em;padding:.9rem 0 .4rem;display:block;
}

/* Field */
.wled-field { margin-bottom:1.1rem; }
.wled-field > label {
    display:block;font-family:'IBM Plex Mono',monospace;font-size:.68rem;
    text-transform:uppercase;letter-spacing:.1em;color:var(--wled-muted);margin-bottom:.4rem;
}
.wled-sub-lbl {
    display:block;font-family:'IBM Plex Mono',monospace;font-size:.6rem;
    text-transform:uppercase;letter-spacing:.08em;color:var(--wled-muted);margin-bottom:.3rem;
}

/* Inputs */
#wled-app input[type=number],
#wled-app select {
    width:100%;background:#0a0c0f;border:1px solid var(--wled-border);
    color:var(--wled-text);font-family:'IBM Plex Mono',monospace;font-size:16px;
    padding:.6rem .75rem;outline:none;transition:border-color .15s;
    -moz-appearance:textfield;border-radius:0;-webkit-appearance:none;appearance:none;
}
#wled-app input[type=number]::-webkit-inner-spin-button,
#wled-app input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; }
#wled-app input:focus,#wled-app select:focus { border-color:var(--wled-accent); }
#wled-app select option,#wled-app select optgroup { background:#111; }

/* Size row */
.wled-size-row { display:grid;grid-template-columns:1fr 20px 1fr;align-items:end;gap:.4rem; }
.wled-size-x { display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--wled-muted);padding-bottom:.25rem; }

/* Snap bar */
.wled-snap-bar { display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.65rem; }
.wled-snap-btn {
    font-family:'IBM Plex Mono',monospace;font-size:.75rem;padding:.6rem .5rem;
    background:transparent;border:1px solid var(--wled-border);color:var(--wled-muted);
    cursor:pointer;transition:all .12s;letter-spacing:.04em;text-align:center;line-height:1.3;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:44px;
}
.wled-snap-btn:active { border-color:var(--wled-accent);color:var(--wled-accent); }
@media(hover:hover){ .wled-snap-btn:hover{border-color:var(--wled-accent);color:var(--wled-accent);} }
.wled-snap-btn.wled-active-brand {
    background:rgba(74,240,200,.12)!important;border-color:var(--wled-accent2)!important;
    color:var(--wled-accent2)!important;font-weight:600;
}
.wled-snap-btn.wled-ratio-active {
    background:rgba(240,192,64,.15);border-color:var(--wled-accent);color:var(--wled-accent);font-weight:600;
}

/* Ratio hint */
.wled-ratio-hint { font-family:'IBM Plex Mono',monospace;font-size:.63rem;min-height:.9rem;letter-spacing:.03em; }
.wled-ratio-hint .ok { color:var(--wled-accent2); }
.wled-ratio-hint .off { color:var(--wled-accent); }

/* Fit card */
.wled-fit-card {
    background:#0a0c0f;border:1px solid var(--wled-border);padding:.7rem .9rem;
    margin-top:.65rem;font-family:'IBM Plex Mono',monospace;font-size:.68rem;line-height:1.75;
}
.wled-fc-title { color:var(--wled-accent2);font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.3rem; }
.wled-fc-row { display:flex;justify-content:space-between;flex-wrap:wrap;gap:.2rem; }
.wled-fc-k { color:var(--wled-muted); }
.wled-fc-v { color:var(--wled-text);font-weight:600; }

/* HR */
.wled-hr { height:1px;background:var(--wled-border);margin:1rem 0; }

/* Dist card */
.wled-dist-card {
    margin-top:.55rem;font-family:'IBM Plex Mono',monospace;
    font-size:clamp(.6rem,.7rem,1rem);line-height:1.7;padding:.55rem .75rem;
    background:#0a0c0f;border:1px solid var(--wled-border);
}

/* Reset btn */
.wled-reset-btn {
    font-family:'IBM Plex Mono',monospace;font-size:.6rem;padding:.3rem .6rem;
    min-height:36px;background:transparent;border:1px solid var(--wled-border);
    color:var(--wled-muted);cursor:pointer;letter-spacing:.06em;text-transform:uppercase;
    transition:all .12s;touch-action:manipulation;
}

/* Panel card */
.wled-panel-card {
    background:#0a0c0f;border:1px solid var(--wled-border);
    border-left:3px solid var(--wled-accent2);padding:.8rem 1rem;margin-top:.65rem;
}
.wled-pc-title {
    font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--wled-accent2);
    letter-spacing:.05em;margin-bottom:.45rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
}
.wled-badge {
    font-family:'IBM Plex Mono',monospace;font-size:.55rem;padding:.12rem .35rem;border:1px solid;
    letter-spacing:.07em;text-transform:uppercase;
}
.wled-b-in  { border-color:var(--wled-accent2);color:var(--wled-accent2); }
.wled-b-out { border-color:#f07040;color:#f07040; }
.wled-b-fix { border-color:#a070f0;color:#a070f0; }
.wled-pc-specs {
    display:grid;grid-template-columns:1fr 1fr;gap:.15rem .75rem;
    font-family:'IBM Plex Mono',monospace;font-size:.64rem;
}
.wled-srow { display:flex;justify-content:space-between;gap:.5rem; }
.wled-sk { color:var(--wled-muted); }
.wled-sv { color:var(--wled-text);font-weight:600; }

/* Stats */
.wled-stats {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;background:var(--wled-border);border:1px solid var(--wled-border);
}
@media(min-width:860px){ .wled-stats{grid-template-columns:repeat(3,minmax(0,1fr));} }
.wled-stat { background:var(--wled-panel);padding:.75rem .6rem;min-width:0;overflow:hidden; }
.wled-stat-lbl {
    font-family:'IBM Plex Mono',monospace;font-size:.52rem;text-transform:uppercase;
    color:var(--wled-muted);margin-bottom:.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wled-stat-val {
    font-family:'Bebas Neue',sans-serif;font-size:clamp(1.1rem,6vw,1.75rem);
    color:var(--wled-accent);line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wled-stat-unit { font-family:'IBM Plex Mono',monospace;font-size:.52rem;color:var(--wled-muted);margin-top:.1rem; }
.wled-hi .wled-stat-val { color:var(--wled-accent2); }
.wled-pw .wled-stat-val { color:#f0a040; }
.wled-nv .wled-stat-val { color:var(--wled-nova); }

/* Nova / processor card */
.wled-nova-card {
    background:#0a0c10;border:1px solid var(--wled-nova);
    border-left:3px solid var(--wled-nova);padding:1rem 1.1rem;overflow:hidden;
}
.wled-nova-name {
    font-family:'Bebas Neue',sans-serif;font-size:clamp(1.1rem,6vw,1.5rem);
    color:var(--wled-nova);letter-spacing:.03em;line-height:1;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.wled-nova-sub { font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--wled-muted);margin-bottom:.65rem; }
.wled-nova-specs { display:grid;grid-template-columns:1fr;gap:.2rem;font-family:'IBM Plex Mono',monospace;font-size:.63rem; }
@media(min-width:860px){ .wled-nova-specs{grid-template-columns:1fr 1fr;} }
.wled-nr { display:flex;justify-content:space-between;align-items:baseline;gap:.3rem;min-width:0;overflow:hidden; }
.wled-nk { color:var(--wled-muted);flex-shrink:0;white-space:nowrap; }
.wled-nv2 { color:var(--wled-nova);font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1; }
.wled-nova-note {
    font-family:'IBM Plex Mono',monospace;font-size:.63rem;color:var(--wled-accent);
    margin-top:.65rem;padding-top:.55rem;border-top:1px solid rgba(112,144,240,.2);word-break:break-word;
}
.wled-nova-link { font-family:'IBM Plex Mono',monospace;font-size:.63rem;color:var(--wled-nova);text-decoration:none;opacity:.8; }
@media(hover:hover){ .wled-nova-link:hover{opacity:1;text-decoration:underline;} }

/* Warning */
.wled-warn {
    display:none;background:rgba(240,80,80,.1);border:1px solid var(--wled-danger);
    padding:.65rem .9rem;font-family:'IBM Plex Mono',monospace;font-size:.7rem;
    color:var(--wled-danger);letter-spacing:.04em;
}
.wled-warn.on { display:block; }

/* Wiring */
.wled-wiring-box { overflow-x:auto;-webkit-overflow-scrolling:touch; }
.wled-wiring-legend {
    display:flex;gap:.5rem .75rem;flex-wrap:wrap;margin-bottom:.65rem;
    font-family:'IBM Plex Mono',monospace;font-size:.58rem;
}
.wled-leg-item { display:flex;align-items:center;gap:.35rem;min-width:0; }
.wled-leg-dot { width:9px;height:9px;border-radius:50%;flex-shrink:0; }
#wled-dataCanvas,#wled-pwrCanvas { width:100%;display:block;cursor:default; }

/* Spec table */
.wled-spec-box table { width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:.75rem; }
.wled-spec-box tr { border-bottom:1px solid var(--wled-border); }
.wled-spec-box tr:last-child { border-bottom:none; }
.wled-spec-box td { padding:.45rem .2rem; }
.wled-spec-box td:first-child { color:var(--wled-muted);text-transform:uppercase;letter-spacing:.07em;font-size:.63rem;width:52%; }
.wled-spec-box td:last-child { color:var(--wled-text);font-weight:600;text-align:right;word-break:break-word; }
.wled-tr-pw td:last-child { color:#f0a040; }
.wled-tr-nv td:last-child { color:var(--wled-nova); }

/* Quote button */
.wled-quote-btn {
    width:100%;padding:1rem;background:var(--wled-accent);color:#000;border:none;
    font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.1em;
    cursor:pointer;transition:opacity .15s;
}
.wled-quote-btn:hover { opacity:.85; }
.wled-quote-sub {
    font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--wled-muted);
    text-align:center;margin-top:.4rem;letter-spacing:.05em;
}

/* Mobile tweaks */
@media(max-width:500px){
    .wled-header-logo { height:30px; }
    .wled-header-title { font-size:1.2rem; }
    .wled-stat-val { font-size:1.4rem; }
    .wled-nova-specs { grid-template-columns:1fr; }
    .wled-pc-specs { grid-template-columns:1fr; }
    #wled-app .wled-box,.wled-spec-box,.wled-wiring-box,.wled-nova-card { padding:.75rem; }
    .wled-snap-btn { font-size:.68rem;padding:.55rem .35rem; }
}
@media(max-width:390px){
    .wled-header-title { font-size:1rem; }
    .wled-stat-val { font-size:1.2rem; }
}