/* ============================================
   BroadcastKit — style.css v3
   ============================================ */

:root {
  --orange:        #ff6b1a;
  --orange-glow:   #ff6b1a55;
  --orange-dim:    #ff6b1a18;
  --orange-light:  #ff8c42;
  --black:         #060608;
  --surface:       rgba(255,255,255,0.04);
  --surface-hover: rgba(255,255,255,0.07);
  --glass-border:  rgba(255,255,255,0.07);
  --glass-border-o:rgba(255,107,26,0.3);
  --text-primary:  #f0ede8;
  --text-secondary:#8a8680;
  --text-dim:      #484642;
  --font-head:     'Syne', sans-serif;
  --font-mono:     'DM Mono', monospace;
  --radius-card:   18px;
  --radius-btn:    10px;
  --tr:            0.22s cubic-bezier(0.4,0,0.2,1);
  --green:         #4ade80;
  --red:           #f87171;
  --yellow:        #facc15;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--text-primary);
  font-family: var(--font-head);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── BG ── */
.bg-orb { position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;animation:drift 20s ease-in-out infinite alternate; }
.orb-1 { width:600px;height:600px;background:radial-gradient(circle,#ff6b1a28 0%,transparent 70%);top:-200px;right:-150px; }
.orb-2 { width:400px;height:400px;background:radial-gradient(circle,#ff4d0018 0%,transparent 70%);bottom:10%;left:-100px;animation-duration:25s;animation-delay:-8s; }
.orb-3 { width:300px;height:300px;background:radial-gradient(circle,#ffffff06 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation-duration:15s;animation-delay:-4s; }
@keyframes drift { 100%{transform:translate(30px,40px) scale(1.08);} }
.noise-overlay { position:fixed;inset:0;z-index:1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");background-size:200px; }

/* ── HEADER ── */
.header { position:sticky;top:0;z-index:100;padding:0 clamp(20px,5vw,60px);height:64px;backdrop-filter:blur(24px) saturate(1.4);background:rgba(6,6,8,0.82);border-bottom:1px solid var(--glass-border); }
.header-inner { max-width:1200px;margin:auto;height:100%;display:flex;align-items:center;justify-content:space-between; }
.logo { display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;letter-spacing:-.02em; }
.logo-dot { position:relative;width:11px;height:11px;background:var(--orange);border-radius:50%;flex-shrink:0;animation:on-air-glow 1.8s ease-in-out infinite; }
.logo-dot::before { content:'';position:absolute;inset:-5px;border-radius:50%;background:var(--orange);opacity:0;animation:on-air-ping 1.8s ease-out infinite; }
@keyframes on-air-glow { 0%,100%{box-shadow:0 0 5px 1px var(--orange-glow);}50%{box-shadow:0 0 16px 5px var(--orange-glow);opacity:.65;} }
@keyframes on-air-ping { 0%{transform:scale(1);opacity:.45;}100%{transform:scale(3);opacity:0;} }
.header-right { display:flex;align-items:center;gap:14px; }
.os-badge { display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.72rem;color:var(--text-secondary);background:var(--surface);border:1px solid var(--glass-border);border-radius:100px;padding:6px 14px;backdrop-filter:blur(12px); }
.os-dot { width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 8px var(--orange);animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;box-shadow:0 0 6px var(--orange);}50%{opacity:.5;box-shadow:0 0 14px var(--orange);} }
.header-nav { display:flex;gap:4px; }
.nav-link { font-family:var(--font-mono);font-size:.72rem;text-decoration:none;color:var(--text-secondary);padding:6px 14px;border-radius:100px;border:1px solid transparent;transition:all var(--tr); }
.nav-link:hover,.nav-link.active { color:var(--text-primary);border-color:var(--glass-border);background:var(--surface); }
.nav-link.active { color:var(--orange); }
.nav-link-contact { border-color:var(--glass-border-o) !important;color:var(--orange) !important; }
.nav-link-contact:hover { background:var(--orange-dim) !important; }

/* ── MAIN ── */
main { position:relative;z-index:2;max-width:1200px;margin:auto;padding:0 clamp(20px,5vw,60px) 80px; }

/* ── HERO ── */
.hero { padding:80px 0 52px;max-width:640px; }
.hero-eyebrow { font-family:var(--font-mono);font-size:.75rem;color:var(--orange);text-transform:uppercase;letter-spacing:.15em;margin-bottom:16px; }
.hero-title { font-size:clamp(2.8rem,7vw,5.2rem);font-weight:800;line-height:.95;letter-spacing:-.04em;margin-bottom:24px; }
.hero-title em { font-style:italic;color:var(--orange);text-shadow:0 0 60px var(--orange-glow); }
.hero-sub { font-size:.95rem;color:var(--text-secondary);line-height:1.7;font-family:var(--font-mono); }

/* ── SEARCH + STATUS ROW ── */
.search-status-row { display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap; }

.search-wrap {
  flex:1;min-width:240px;
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--glass-border);
  border-radius:100px;padding:10px 18px;
  backdrop-filter:blur(16px);
  transition:border-color var(--tr);
}
.search-wrap:focus-within { border-color:var(--glass-border-o); }
.search-icon { font-size:.9rem; }
.search-input {
  flex:1;background:none;border:none;outline:none;
  font-family:var(--font-mono);font-size:.82rem;color:var(--text-primary);
}
.search-input::placeholder { color:var(--text-dim); }
.search-clear { background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.8rem;padding:0;transition:color var(--tr);display:none; }
.search-clear.visible { display:block; }
.search-clear:hover { color:var(--red); }

.status-bar { display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim);padding:10px 16px;background:var(--surface);border:1px solid var(--glass-border);border-radius:100px;white-space:nowrap;transition:all var(--tr); }
.status-bar.done { color:var(--green);border-color:#4ade8025; }
.status-bar.error { color:var(--red);border-color:#f8717125; }
.pulse-dot { width:6px;height:6px;background:var(--orange);border-radius:50%;flex-shrink:0;animation:pulse-dot 1.5s ease-in-out infinite; }
.status-bar.done .pulse-dot,.status-bar.error .pulse-dot { animation:none; }
.status-bar.done .pulse-dot { background:var(--green); }

/* ── FILTER BAR ── */
.filter-bar { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;padding:12px 14px;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-card);backdrop-filter:blur(16px); }
.filter-btn { font-family:var(--font-mono);font-size:.72rem;padding:7px 14px;border-radius:100px;border:1px solid var(--glass-border);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all var(--tr);white-space:nowrap; }
.filter-btn:hover { color:var(--text-primary);border-color:rgba(255,255,255,.15); }
.filter-btn.active { background:var(--orange);color:#000;border-color:var(--orange);font-weight:700; }

.no-results { text-align:center;padding:48px;font-family:var(--font-mono);font-size:.85rem;color:var(--text-dim); }

/* ── GRID ── */
.grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px; }

/* ── CARD ── */
.card { position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:22px;backdrop-filter:blur(18px) saturate(1.2);transition:transform var(--tr),border-color var(--tr),background var(--tr);animation:cardIn .45s both; }
.card:hover { transform:translateY(-4px);background:var(--surface-hover);border-color:var(--glass-border-o); }
.card::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,107,26,.06) 0%,transparent 60%);opacity:0;transition:opacity var(--tr);pointer-events:none; }
.card:hover::before { opacity:1; }
.card[data-hidden="true"] { display:none; }
@keyframes cardIn { from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);} }

.card-top { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px; }
.card-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:var(--orange-dim);border:1px solid var(--orange-glow);flex-shrink:0; }
.card-tag { font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);background:var(--orange-dim);border:1px solid var(--orange-glow);border-radius:100px;padding:4px 10px; }
.card-name { font-size:1.08rem;font-weight:700;letter-spacing:-.02em;margin-bottom:5px; }
.card-desc { font-family:var(--font-mono);font-size:.71rem;color:var(--text-secondary);line-height:1.6;margin-bottom:14px; }

/* ── VERSION SELECTOR ── */
.version-row { display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap; }
.version-label { font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim); }
.version-select {
  background:var(--orange-dim);border:1px solid var(--orange-glow);border-radius:100px;
  padding:3px 10px;font-family:var(--font-mono);font-size:.68rem;color:var(--orange-light);
  outline:none;cursor:pointer;transition:all var(--tr);max-width:200px;
  -webkit-appearance:none;appearance:none;
}
.version-select:focus { border-color:var(--orange); }
.version-select option { background:#1a1a1a;color:var(--text-primary); }
.version-select:disabled { opacity:.5;cursor:default; }
.version-tag { font-family:var(--font-mono);font-size:.68rem;color:var(--orange-light);background:var(--orange-dim);padding:3px 10px;border-radius:100px;border:1px solid var(--orange-glow); }
.card-link-badge { font-family:var(--font-mono);font-size:.63rem;color:var(--text-secondary);background:rgba(255,255,255,.04);border:1px solid var(--glass-border);border-radius:100px;padding:3px 9px; }

/* loading spinner on version change */
.version-loading { opacity:.5;pointer-events:none; }

/* ── BUTTONS ── */
.btn-group { display:flex;flex-direction:column;gap:8px; }
.btn-primary { display:flex;align-items:center;justify-content:center;gap:8px;background:var(--orange);color:#000;font-family:var(--font-head);font-weight:700;font-size:.82rem;text-decoration:none;border-radius:var(--radius-btn);padding:11px 18px;transition:background var(--tr),box-shadow var(--tr),transform var(--tr);border:none;cursor:pointer;box-shadow:0 4px 18px var(--orange-glow); }
.btn-primary:hover { background:var(--orange-light);box-shadow:0 6px 28px #ff6b1a60;transform:translateY(-1px); }
.btn-primary.btn-web { background:rgba(255,107,26,.15);color:var(--orange-light);border:1px solid var(--glass-border-o); }
.btn-primary.btn-web:hover { background:rgba(255,107,26,.25); }
.btn-secondary-group { display:flex;gap:6px;flex-wrap:wrap; }
.btn-secondary { flex:1;min-width:70px;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--surface);color:var(--text-secondary);font-family:var(--font-mono);font-size:.65rem;text-decoration:none;border:1px solid var(--glass-border);border-radius:var(--radius-btn);padding:8px 10px;transition:all var(--tr);cursor:pointer;backdrop-filter:blur(10px); }
.btn-secondary:hover { color:var(--text-primary);border-color:var(--glass-border-o);background:var(--surface-hover); }
.companion-note { font-family:var(--font-mono);font-size:.63rem;color:var(--text-dim);margin-top:6px;padding:6px 10px;background:rgba(250,204,21,.06);border:1px solid rgba(250,204,21,.2);border-radius:6px; }

/* ── SKELETON ── */
.skeleton { background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;border-radius:6px;animation:shimmer 1.4s infinite; }
@keyframes shimmer { to{background-position:-200% 0;} }
.card-loading .sk-icon { width:44px;height:44px;border-radius:12px;margin-bottom:12px; }
.card-loading .sk-title { height:16px;width:55%;margin-bottom:8px; }
.card-loading .sk-desc { height:11px;width:90%;margin-bottom:5px; }
.card-loading .sk-desc2 { height:11px;width:70%;margin-bottom:16px; }
.card-loading .sk-btn { height:40px;width:100%;border-radius:var(--radius-btn); }

/* ── SECTION / TOOLS ── */
.section-header { padding:72px 0 28px; }
.section-title { font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1;letter-spacing:-.04em;margin-top:10px; }
.section-title em { font-style:italic;color:var(--orange); }
.tools-tabs { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px; }
.tool-tab { font-family:var(--font-mono);font-size:.75rem;padding:10px 18px;border-radius:100px;border:1px solid var(--glass-border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:all var(--tr); }
.tool-tab:hover { color:var(--text-primary);border-color:rgba(255,255,255,.14); }
.tool-tab.active { background:var(--orange);color:#000;border-color:var(--orange);font-weight:700; }
.tool-panel { display:none; }
.tool-panel.active { display:block; }

/* ── GLASS CARD ── */
.glass-card { background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-card);padding:26px;backdrop-filter:blur(18px); }
.glass-inner { background:rgba(255,255,255,.03);border:1px solid var(--glass-border);border-radius:12px;padding:18px;margin-bottom:14px; }

/* ── TOOL GRID ── */
.tool-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start; }
.tool-grid.single { grid-template-columns:1fr; }
.tool-grid.power-layout { grid-template-columns:1fr 1fr; }
.tool-subtitle { font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--orange);margin-bottom:18px; }
.tool-subtitle-small { font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:10px; }

/* ── FORM ── */
.form-row { display:flex;flex-direction:column;gap:6px;margin-bottom:14px; }
.form-row label { font-family:var(--font-mono);font-size:.7rem;color:var(--text-secondary); }
.form-row select,.form-row input[type="number"],.form-row input[type="text"] { background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:8px;padding:9px 12px;color:var(--text-primary);font-family:var(--font-mono);font-size:.8rem;outline:none;transition:border-color var(--tr);-webkit-appearance:none;appearance:none; }
.form-row select:focus,.form-row input:focus { border-color:var(--orange-glow); }
.form-row select option { background:#111;color:var(--text-primary); }

/* ── RESULT BOX ── */
.result-box { margin-top:18px;padding:18px;text-align:center;background:linear-gradient(135deg,rgba(255,107,26,.1),rgba(255,107,26,.04));border:1px solid var(--glass-border-o);border-radius:12px; }
.result-val { font-size:2.4rem;font-weight:800;color:var(--orange);letter-spacing:-.04em;line-height:1; }
.result-label { font-family:var(--font-mono);font-size:.72rem;color:var(--text-secondary);margin-top:6px; }
.result-sub { font-family:var(--font-mono);font-size:.66rem;color:var(--text-dim);margin-top:4px; }

/* ── BANDWIDTH GAUGE ── */
.bw-right-col { display:flex;flex-direction:column; }
.gauge-wrap { margin:16px 0;padding:16px;background:rgba(255,255,255,.03);border:1px solid var(--glass-border);border-radius:12px; }
.gauge-labels { display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.68rem;color:var(--text-secondary);margin-bottom:8px; }
.gauge-bar { position:relative;height:14px;background:rgba(255,255,255,.07);border-radius:100px;overflow:hidden; }
.gauge-fill { position:absolute;left:0;top:0;height:100%;border-radius:100px;transition:width .5s cubic-bezier(0.4,0,0.2,1),background .4s; }
.gauge-fill.ok   { background:linear-gradient(90deg,#4ade80,#22c55e); }
.gauge-fill.warn { background:linear-gradient(90deg,#facc15,#f59e0b); }
.gauge-fill.fail { background:linear-gradient(90deg,#f87171,#ef4444); }
.gauge-bar::after { content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(255,255,255,.06));border-radius:100px; }
.gauge-pct { text-align:center;font-family:var(--font-mono);font-size:1.1rem;font-weight:700;margin-top:10px; }
.gauge-verdict { text-align:center;font-family:var(--font-mono);font-size:.72rem;margin-top:4px;padding:5px 12px;border-radius:100px;display:inline-block;width:100%;box-sizing:border-box; }
.gauge-verdict.ok   { background:rgba(74,222,128,.1);color:var(--green);border:1px solid rgba(74,222,128,.25); }
.gauge-verdict.warn { background:rgba(250,204,21,.1);color:var(--yellow);border:1px solid rgba(250,204,21,.25); }
.gauge-verdict.fail { background:rgba(248,113,113,.1);color:var(--red);border:1px solid rgba(248,113,113,.25); }

/* ── INTERFACE LIST ── */
.interface-list { display:flex;flex-direction:column;gap:6px; }
.iface-row { display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:9px;border:1px solid transparent;transition:all var(--tr); }
.iface-row.ok   { background:rgba(74,222,128,.05);border-color:rgba(74,222,128,.18); }
.iface-row.warn { background:rgba(250,204,21,.05);border-color:rgba(250,204,21,.18); }
.iface-row.fail { background:rgba(248,113,113,.05);border-color:rgba(248,113,113,.18); }
.iface-name { font-family:var(--font-mono);font-size:.71rem; }
.iface-speed { font-family:var(--font-mono);font-size:.67rem;color:var(--text-secondary); }
.iface-status { font-family:var(--font-mono);font-size:.72rem;font-weight:700; }
.iface-row.ok .iface-status   { color:var(--green); }
.iface-row.warn .iface-status { color:var(--yellow); }
.iface-row.fail .iface-status { color:var(--red); }

/* ── CABLE GRID ── */
.cable-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px; }
.cable-row { display:flex;flex-direction:column;padding:11px 13px;border-radius:9px;border:1px solid transparent; }
.cable-row.ok   { background:rgba(74,222,128,.05);border-color:rgba(74,222,128,.18); }
.cable-row.warn { background:rgba(250,204,21,.05);border-color:rgba(250,204,21,.18); }
.cable-row.fail { background:rgba(248,113,113,.05);border-color:rgba(248,113,113,.18); }
.cable-name { font-family:var(--font-mono);font-size:.72rem;margin-bottom:2px; }
.cable-max { font-family:var(--font-mono);font-size:.65rem;color:var(--text-secondary); }
.cable-status { font-family:var(--font-mono);font-size:.67rem;font-weight:700;margin-top:4px; }
.cable-row.ok .cable-status   { color:var(--green); }
.cable-row.warn .cable-status { color:var(--yellow); }
.cable-row.fail .cable-status { color:var(--red); }
.input-unit-group { display:flex;gap:8px; }
.input-unit-group input { flex:1; }
.input-unit-group select { width:110px; }

/* ── POWER ── */
.preset-search-wrap { margin-bottom:10px; }
.preset-search { width:100%;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:8px;padding:8px 12px;color:var(--text-primary);font-family:var(--font-mono);font-size:.75rem;outline:none;transition:border-color var(--tr); }
.preset-search:focus { border-color:var(--orange-glow); }

.preset-cats-scroll { display:flex;flex-direction:column;gap:3px;max-height:300px;overflow-y:auto;margin-bottom:14px;padding-right:4px; }
.preset-cats-scroll::-webkit-scrollbar { width:4px; }
.preset-cats-scroll::-webkit-scrollbar-thumb { background:var(--glass-border);border-radius:2px; }
.preset-cat-header { font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);padding:8px 6px 4px; }
.preset-item-btn { display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--surface);border:1px solid var(--glass-border);border-radius:7px;padding:8px 12px;color:var(--text-primary);font-family:var(--font-mono);font-size:.72rem;cursor:pointer;transition:all var(--tr);text-align:left; }
.preset-item-btn:hover { border-color:var(--glass-border-o);background:var(--surface-hover); }
.preset-item-btn.hidden { display:none; }
.preset-watt { font-size:.66rem;color:var(--orange);font-weight:700; }

.power-custom { margin-top:4px; }
.custom-row { display:flex;gap:8px; }
.custom-row input { flex:1;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:8px;padding:8px 10px;color:var(--text-primary);font-family:var(--font-mono);font-size:.75rem;outline:none; }
.custom-row input:focus { border-color:var(--orange-glow); }
.btn-add { background:var(--orange);color:#000;border:none;border-radius:8px;padding:0 16px;font-size:1.2rem;cursor:pointer;transition:background var(--tr);font-weight:700; }
.btn-add:hover { background:var(--orange-light); }

/* Power category filter chips */
.power-cat-filter { display:flex;gap:5px;overflow-x:auto;margin-bottom:10px;padding-bottom:3px;flex-shrink:0; }
.power-cat-filter::-webkit-scrollbar { height:3px; }
.power-cat-filter::-webkit-scrollbar-thumb { background:var(--glass-border);border-radius:2px; }
.power-cat-chip { flex-shrink:0;font-family:var(--font-mono);font-size:.6rem;padding:4px 9px;border-radius:100px;border:1px solid var(--glass-border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:all var(--tr);white-space:nowrap; }
.power-cat-chip:hover { border-color:var(--glass-border-o);color:var(--text-primary); }
.power-cat-chip.active { background:var(--orange);color:#000;border-color:var(--orange);font-weight:700; }

.pw-count { font-weight:400;font-size:.7rem;color:var(--text-secondary); }
.power-list { display:flex;flex-direction:column;gap:5px;min-height:100px;margin-bottom:16px; }
.empty-msg { font-family:var(--font-mono);font-size:.75rem;color:var(--text-dim);padding:20px 0;text-align:center; }
.power-item { display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,.04);border:1px solid var(--glass-border);border-radius:7px; }
.power-item-name { font-family:var(--font-mono);font-size:.73rem;flex:1;min-width:0; }
.power-item-right { display:flex;align-items:center;gap:6px;flex-shrink:0; }
.qty-control { display:flex;align-items:center;gap:3px; }
.qty-btn { background:var(--surface);border:1px solid var(--glass-border);border-radius:4px;color:var(--text-secondary);cursor:pointer;font-size:.8rem;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all var(--tr);padding:0;line-height:1; }
.qty-btn:hover { border-color:var(--orange);color:var(--orange); }
.qty-val { font-family:var(--font-mono);font-size:.7rem;color:var(--text-primary);font-weight:700;min-width:18px;text-align:center; }
.power-item-w { font-family:var(--font-mono);font-size:.73rem;color:var(--orange);font-weight:700;min-width:48px;text-align:right; }
.power-item-del { background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.85rem;padding:0 2px;transition:color var(--tr); }
.power-item-del:hover { color:var(--red); }
.power-totals { border-top:1px solid var(--glass-border);padding-top:14px; }
.total-row { display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-family:var(--font-mono);font-size:.74rem;color:var(--text-secondary); }
.total-val { color:var(--text-primary);font-weight:700; }
.total-val.orange { color:var(--orange); }
.total-sep { height:1px;background:var(--glass-border);margin:7px 0; }

/* ── PATCH LIST ── */
.patch-card { padding:22px; }
.patch-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px; }
.patch-actions { display:flex;gap:8px; }
.btn-outline { background:transparent;border:1px solid var(--glass-border);color:var(--text-secondary);font-family:var(--font-mono);font-size:.7rem;padding:7px 14px;border-radius:8px;cursor:pointer;transition:all var(--tr); }
.btn-outline:hover { border-color:var(--glass-border-o);color:var(--text-primary); }
.patch-form-grid { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px; }
.pf-group { display:flex;flex-direction:column;gap:4px; }
.pf-group label { font-family:var(--font-mono);font-size:.68rem;color:var(--text-secondary); }
.pf-group input,.pf-group select { background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:8px;padding:8px 10px;color:var(--text-primary);font-family:var(--font-mono);font-size:.75rem;outline:none;transition:border-color var(--tr); }
.pf-group input:focus,.pf-group select:focus { border-color:var(--orange-glow); }
.pf-group select option { background:#111; }
.btn-primary-sm { display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:#000;font-family:var(--font-head);font-weight:700;font-size:.8rem;border:none;border-radius:8px;padding:10px 18px;cursor:pointer;transition:background var(--tr); }
.btn-primary-sm:hover { background:var(--orange-light); }
.patch-filter-row { display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 8px; }
.patch-filter-chip { font-family:var(--font-mono);font-size:.64rem;padding:4px 10px;border-radius:100px;border:1px solid var(--glass-border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:all var(--tr); }
.patch-filter-chip.active { background:var(--orange);color:#000;border-color:var(--orange); }
.patch-table-wrap { overflow-x:auto;margin-top:6px; }
.patch-table { width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.71rem; }
.patch-table th { text-align:left;padding:7px 10px;color:var(--text-dim);font-weight:400;border-bottom:1px solid var(--glass-border);text-transform:uppercase;letter-spacing:.08em;font-size:.64rem; }
.patch-table td { padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.03);vertical-align:middle; }
.empty-row td { text-align:center;color:var(--text-dim);padding:28px;font-size:.74rem; }
.cable-chip { display:inline-block;padding:2px 7px;border-radius:100px;font-size:.62rem;font-weight:700;background:var(--orange-dim);color:var(--orange);border:1px solid var(--orange-glow); }
.cable-chip.hdmi  { background:rgba(59,130,246,.12);color:#60a5fa;border-color:rgba(59,130,246,.3); }
.cable-chip.sdi   { background:rgba(168,85,247,.12);color:#c084fc;border-color:rgba(168,85,247,.3); }
.cable-chip.xlr   { background:rgba(34,197,94,.12);color:#4ade80;border-color:rgba(34,197,94,.3); }
.cable-chip.eth   { background:rgba(251,191,36,.12);color:#fbbf24;border-color:rgba(251,191,36,.3); }
.cable-chip.dante { background:rgba(239,68,68,.12);color:#f87171;border-color:rgba(239,68,68,.3); }
.cable-chip.ndi   { background:rgba(236,72,153,.12);color:#f472b6;border-color:rgba(236,72,153,.3); }
.check-input { accent-color:var(--orange);width:15px;height:15px;cursor:pointer; }
.del-btn { background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.85rem;padding:0 4px;transition:color var(--tr); }
.del-btn:hover { color:var(--red); }
.patch-table tr.confirmed td { opacity:.5; }

/* ── MANUELS ── */
.manual-manufacturer { font-family:var(--font-mono);font-size:.68rem;color:var(--text-secondary);margin-bottom:6px;margin-top:-6px; }
.manual-type-badge { display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.63rem;font-weight:700;padding:3px 10px;border-radius:100px; }
.manual-type-badge.pdf  { background:rgba(74,222,128,.1);color:var(--green);border:1px solid rgba(74,222,128,.25); }
.manual-type-badge.page { background:var(--surface);color:var(--text-secondary);border:1px solid var(--glass-border); }

/* ── FOOTER ── */
.page-footer { margin-top:80px;padding-top:22px;border-top:1px solid var(--glass-border);font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim);text-align:center; }

/* ── RESPONSIVE ── */
@media(max-width:960px) {
  .tool-grid,.tool-grid.power-layout { grid-template-columns:1fr; }
  .patch-form-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px) {
  .grid { grid-template-columns:1fr; }
  .cable-grid { grid-template-columns:1fr; }
  .patch-form-grid { grid-template-columns:1fr; }
  .header-nav { display:none; }
  .btn-secondary-group { flex-direction:column; }
  .search-status-row { flex-direction:column;align-items:stretch; }
}