:root {
    --bg:#111418; --surface:#1A1D24; --card:#22262F; --card-hi:#2A2E38;
    --border:rgba(255,255,255,.06); --border2:rgba(255,255,255,.10);
    --text:#fff; --text2:#D8DCE5; --text3:#9CA3AF; --text4:#686F7D;
    --accent:#0D61F3; --accent-lt:#3882FF;
    --accent-bg:rgba(13,97,243,.22); --accent-glow:rgba(13,97,243,.30);
    --danger:#EF4444; --success:#22C55E; --warn:#EAB308;
  }
  *{box-sizing:border-box;-webkit-font-smoothing:antialiased}
  html,body{margin:0;padding:0;background:#06080B;font-family:"Segoe UI","Inter",system-ui,-apple-system,sans-serif;color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center}
  .panel{width:800px;height:580px;background:var(--bg);border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.4);overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.03)}
  /* HEADER */
  .hdr{height:60px;flex:none;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 22px}
  .logo{display:flex;align-items:center;gap:10px}
  .logo-img{height:48px;width:auto;display:block}
  .logo-glyph{width:38px;height:38px;background:linear-gradient(135deg,var(--accent),var(--accent-lt));border-radius:9px;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(13,97,243,.35)}
  .logo-glyph svg{width:24px;height:24px;color:#fff}
  .wordmark{font-weight:700;font-size:26px;letter-spacing:-.02em;line-height:1}
  .wordmark .kylo{color:var(--accent)}.wordmark .gg{color:var(--text)}
  .hdr-right{margin-left:auto;display:flex;align-items:center;gap:12px}
  .product-tag{font-weight:700;font-size:13px;color:var(--text2);letter-spacing:.04em}
  .ver-pill{background:var(--accent);color:#fff;font-weight:600;font-size:11.5px;padding:3px 8px;border-radius:4px}
  /* TABS */
  .tabbar{height:44px;flex:none;border-bottom:1px solid var(--border);display:flex;align-items:stretch;padding-left:14px;background:var(--bg)}
  .tab{display:flex;align-items:center;gap:8px;padding:0 18px;color:var(--text3);font-weight:600;font-size:13.5px;cursor:pointer;position:relative;transition:color .15s;user-select:none}
  .tab:hover{color:var(--text)}
  .tab.active{color:var(--text)}
  .tab.active::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--accent);border-radius:2px}
  .tab .ic{width:18px;height:18px;display:inline-block;color:var(--text3)}
  .tab.active .ic{color:var(--accent)}
  /* CONTENT */
  .content{flex:1;min-height:0;padding:16px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
  /* Toolbar */
  .toolbar{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
  .lbl-dim{color:var(--text3);font-size:12px}
  .combo-mini{background:#15181E;border:1px solid var(--border2);color:var(--text);font-size:12.5px;padding:5px 22px 5px 8px;border-radius:4px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text3) 50%),linear-gradient(135deg,var(--text3) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .slider-inline{flex:1;max-width:180px;height:22px;display:flex;align-items:center;position:relative}
  .slider-inline .track{flex:1;height:4px;background:var(--surface);border-radius:4px;position:relative}
  .slider-inline .fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:4px;width:40%}
  .slider-inline .knob{position:absolute;left:calc(40% - 7px);top:50%;transform:translateY(-50%);width:14px;height:14px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px rgba(13,97,243,.25),0 1px 3px rgba(0,0,0,.5)}
  .slider-inline .knob::after{content:"";position:absolute;inset:4px;background:#fff;border-radius:50%}
  .pill-toggle{display:inline-flex;align-items:center;gap:8px;color:var(--text2);font-size:12.5px;cursor:pointer}
  .pill-sw{width:32px;height:16px;background:var(--accent);border-radius:16px;position:relative}
  .pill-sw::after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;background:#fff;border-radius:50%}
  .pill-sw.off{background:#2C313D}.pill-sw.off::after{left:2px;right:auto}
  /* Search + bulk */
  .ctrl-row{display:flex;align-items:center;gap:6px;margin-top:4px}
  .search{flex:1;height:26px;background:#0E0E16;border:1.5px solid var(--accent);border-radius:5px;display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--text3);font-size:12.5px}
  .search .mag{width:12px;height:12px;border:1.5px solid var(--accent-lt);border-radius:50%;position:relative;flex:none}
  .search .mag::after{content:"";position:absolute;bottom:-4px;right:-4px;width:5px;height:2px;background:var(--accent-lt);transform:rotate(45deg);transform-origin:0 0}
  .search input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-size:12.5px;font-family:inherit}
  .search input::placeholder{color:var(--text3)}
  .btn-bulk{height:26px;padding:0 14px;background:#1A1A22;color:var(--text2);border:1px solid var(--border2);border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
  .btn-bulk:hover{background:#22222E}
  /* Body */
  .body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px;overflow-y:auto;padding-right:4px}
  .body::-webkit-scrollbar{width:8px}
  .body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
  .col{display:flex;flex-direction:column;gap:4px}
  /* Group */
  .group{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));background-color:rgba(22,22,32,.4);border:1px solid var(--border2);border-radius:7px;padding:4px 8px}
  .group-hdr{display:flex;align-items:center;gap:8px;padding:1px 0;cursor:pointer;user-select:none}
  .chevron{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--accent);transition:transform .15s}
  .group.collapsed .chevron{transform:rotate(-90deg)}
  .group.collapsed .legend,.group.collapsed .row{display:none}
  .group-title{color:var(--accent);font-weight:700;font-size:12px;letter-spacing:.03em;flex:1;border-bottom:1px solid var(--accent-bg);padding-bottom:1px}
  .count-badge{font-size:11px;font-weight:600;color:var(--text2)}
  .master-pill{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:3px;border:1px solid var(--border2);color:var(--text3);background:rgba(255,255,255,.06);cursor:pointer;user-select:none}
  .master-pill.on{color:#fff;border-color:var(--accent);background:var(--accent-bg)}
  /* Legend */
  .legend{display:grid;grid-template-columns:16px 4px 22px 4px 1fr 4px 64px 4px 50px 4px minmax(78px,1fr);align-items:center;color:var(--text3);font-size:10px;padding-top:1px;border-bottom:1px solid var(--border);padding-bottom:1px;margin-bottom:1px}
  .legend .l-near{grid-column:7;text-align:center}
  .legend .l-line{grid-column:9;text-align:center}
  .legend .l-dist{grid-column:11;padding-left:2px}
  /* Rows */
  .row{display:grid;grid-template-columns:16px 4px 22px 4px 1fr 4px 64px 4px 50px 4px minmax(78px,1fr);align-items:center;height:18px;cursor:pointer}
  .row.disabled{opacity:.55}
  .row:hover{background:rgba(255,255,255,.04);border-radius:4px}
  .cb{width:14px;height:14px;border:1px solid var(--border2);border-radius:3px;background:var(--surface);position:relative;cursor:pointer}
  .cb.on{background:var(--accent);border-color:var(--accent-lt)}
  .cb.on::after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(45deg)}
  .icn{width:20px;height:20px;background:rgba(255,255,255,.06);border:1px solid var(--border2);border-radius:3px;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .icn img{width:18px;height:18px;object-fit:contain}
  .row-label{color:var(--text);font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .col-cb-wrap{display:flex;align-items:center;justify-content:center}
  .col-cb{width:13px;height:13px;border:1px solid var(--border2);background:var(--surface);border-radius:3px;position:relative;cursor:pointer}
  .col-cb.on{background:var(--accent);border-color:var(--accent-lt)}
  .col-cb.on::after{content:"";position:absolute;left:3px;top:0;width:3px;height:7px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg)}
  .row-slider{display:flex;align-items:center;gap:1px;height:13px}
  .row-slider .track{flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:4px;position:relative}
  .row-slider .track .fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:4px}
  .row-slider .knob{position:absolute;top:50%;transform:translateY(-50%);width:7px;height:7px;background:#fff;border-radius:50%;box-shadow:0 0 0 1.5px var(--accent)}
  .row-slider .chip{background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:4px;height:14px;min-width:42px;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--text);padding:0 2px}
  /* Generic tab content */
  .tab-content{flex:1;min-height:0;display:none;flex-direction:column;gap:4px;overflow:hidden}
  .tab-content.active{display:flex}
  /* Grid layout for ESP/Radar/Visuals/Config tabs */
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow-y:auto;padding-right:4px;min-height:0}
  .three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;overflow-y:auto;padding-right:4px;min-height:0}
  .group.compact{padding:6px 10px}
  .opt-row{display:flex;align-items:center;justify-content:space-between;height:22px;color:var(--text2);font-size:12px}
  .opt-row.tall{height:24px}
  .opt-label{flex:1;color:var(--text2)}
  /* Long-form slider used in side tabs */
  .ls{display:flex;align-items:center;gap:6px;flex:1;max-width:170px}
  .ls .t{flex:1;height:4px;background:var(--surface);border-radius:4px;position:relative}
  .ls .t .f{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:4px}
  .ls .t .k{position:absolute;top:50%;transform:translateY(-50%);width:11px;height:11px;background:#fff;border-radius:50%;box-shadow:0 0 0 2px var(--accent)}
  .ls .v{min-width:48px;background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:4px;text-align:center;font-size:10.5px;padding:2px 4px;color:var(--text)}
  /* Color chip */
  .clr-chip{width:18px;height:18px;border-radius:3px;border:1px solid var(--border2);cursor:pointer}
  /* Footer */
  .footer{height:28px;flex:none;background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:var(--text4);font-size:11.5px}
  /* Tab icons via inline SVG mask */
  .ic-eye   { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%239CA3AF' stroke-width='1.6'><path d='M1.5 9c1.8-3 4.4-5 7.5-5s5.7 2 7.5 5c-1.8 3-4.4 5-7.5 5S3.3 12 1.5 9z'/><circle cx='9' cy='9' r='2.3'/></svg>"); background-repeat:no-repeat; background-position:center; }
  .ic-box   { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%239CA3AF' stroke-width='1.6'><rect x='3' y='6' width='12' height='9' rx='1'/><path d='M3 6l3-3h6l3 3'/></svg>"); background-repeat:no-repeat; background-position:center; }
  .ic-radar { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%239CA3AF' stroke-width='1.6'><circle cx='9' cy='9' r='6'/><line x1='2' y1='9' x2='16' y2='9'/><line x1='9' y1='2' x2='9' y2='16'/><line x1='9' y1='9' x2='13' y2='5'/></svg>"); background-repeat:no-repeat; background-position:center; }
  .ic-star  { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><polygon points='9,2 11,7 16,7.5 12,11 13,16 9,13.5 5,16 6,11 2,7.5 7,7' fill='%239CA3AF'/></svg>"); background-repeat:no-repeat; background-position:center; }
  .ic-gear  { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%239CA3AF' stroke-width='1.6'><circle cx='9' cy='9' r='3'/><path d='M9 1v3M9 14v3M17 9h-3M4 9H1M14.5 3.5l-2 2M5.5 12.5l-2 2M14.5 14.5l-2-2M5.5 5.5l-2-2'/></svg>"); background-repeat:no-repeat; background-position:center; }
  .tab.active .ic-eye   { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230D61F3' stroke-width='1.7'><path d='M1.5 9c1.8-3 4.4-5 7.5-5s5.7 2 7.5 5c-1.8 3-4.4 5-7.5 5S3.3 12 1.5 9z'/><circle cx='9' cy='9' r='2.3' fill='%230D61F3'/></svg>"); }
  .tab.active .ic-box   { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230D61F3' stroke-width='1.7'><rect x='3' y='6' width='12' height='9' rx='1'/><path d='M3 6l3-3h6l3 3'/></svg>"); }
  .tab.active .ic-radar { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230D61F3' stroke-width='1.7'><circle cx='9' cy='9' r='6'/><line x1='2' y1='9' x2='16' y2='9'/><line x1='9' y1='2' x2='9' y2='16'/><line x1='9' y1='9' x2='13' y2='5'/></svg>"); }
  .tab.active .ic-star  { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><polygon points='9,2 11,7 16,7.5 12,11 13,16 9,13.5 5,16 6,11 2,7.5 7,7' fill='%230D61F3'/></svg>"); }
  .tab.active .ic-gear  { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230D61F3' stroke-width='1.7'><circle cx='9' cy='9' r='3'/><path d='M9 1v3M9 14v3M17 9h-3M4 9H1M14.5 3.5l-2 2M5.5 12.5l-2 2M14.5 14.5l-2-2M5.5 5.5l-2-2'/></svg>"); }
.ic-cross { background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27 fill=%27none%27 stroke=%27%239CA3AF%27 stroke-width=%271.6%27><circle cx=%279%27 cy=%279%27 r=%276%27/><circle cx=%279%27 cy=%279%27 r=%271.6%27 fill=%27%239CA3AF%27/><line x1=%279%27 y1=%271%27 x2=%279%27 y2=%274%27/><line x1=%279%27 y1=%2714%27 x2=%279%27 y2=%2717%27/><line x1=%271%27 y1=%279%27 x2=%274%27 y2=%279%27/><line x1=%2714%27 y1=%279%27 x2=%2717%27 y2=%279%27/></svg>"); background-repeat:no-repeat; background-position:center; }
.tab.active .ic-cross { background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27 fill=%27none%27 stroke=%27%230D61F3%27 stroke-width=%271.7%27><circle cx=%279%27 cy=%279%27 r=%276%27/><circle cx=%279%27 cy=%279%27 r=%271.6%27 fill=%27%230D61F3%27/><line x1=%279%27 y1=%271%27 x2=%279%27 y2=%274%27/><line x1=%279%27 y1=%2714%27 x2=%279%27 y2=%2717%27/><line x1=%271%27 y1=%279%27 x2=%274%27 y2=%279%27/><line x1=%2714%27 y1=%279%27 x2=%2717%27 y2=%279%27/></svg>"); }
.ic-shield { background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27 fill=%27none%27 stroke=%27%239CA3AF%27 stroke-width=%271.6%27><path d=%27M9 1l6 2v5c0 4-3 7-6 8-3-1-6-4-6-8V3z%27/></svg>"); background-repeat:no-repeat; background-position:center; }
.tab.active .ic-shield { background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27 fill=%27none%27 stroke=%27%230D61F3%27 stroke-width=%271.7%27><path d=%27M9 1l6 2v5c0 4-3 7-6 8-3-1-6-4-6-8V3z%27/></svg>"); }
.icn-svg svg{width:18px;height:18px;display:block}
.row.no-icon {
  grid-template-columns: 16px 4px 1fr 4px 64px 4px 50px 4px minmax(78px,1fr);
}
.legend.no-icon {
  grid-template-columns: 16px 4px 1fr 4px 64px 4px 50px 4px minmax(78px,1fr);
}
.row.no-icon .row-label {
  padding-left: 4px;
}
.legend.no-icon .l-near { grid-column: 5; }
.legend.no-icon .l-line { grid-column: 7; }
.legend.no-icon .l-dist { grid-column: 9; }