@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Rajdhani:wght@600;700&family=Space+Mono&display=swap');
:root{--bp:#070d17;--bc:#0b1220;--bh:#111a2a;--ac:#4ec97b;--ag:rgba(78,201,123,0.18);--tp:#e8eaf0;--ts:#7a8296;--tm:#3f4558;--bd:rgba(255,255,255,0.06);--fb:'Inter',sans-serif;--fh:'Rajdhani',sans-serif;--fm:'Space Mono',monospace}
*{box-sizing:border-box;margin:0;padding:0;user-select:none}
body{background:transparent;font-family:var(--fb);color:var(--tp);display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:2px}

/* BACKGROUND GLOWS */
.ambient-glow { position: fixed; width: 800px; height: 800px; background: radial-gradient(circle, rgba(78, 201, 123, 0.15) 0%, transparent 60%); border-radius: 50%; top: -300px; right: -300px; z-index: -1; animation: pulseGlow 8s ease-in-out infinite alternate; pointer-events: none; }
.ambient-glow-2 { position: fixed; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 184, 255, 0.1) 0%, transparent 60%); border-radius: 50%; bottom: -200px; left: -200px; z-index: -1; animation: pulseGlow 12s ease-in-out infinite alternate-reverse; pointer-events: none; }
@keyframes pulseGlow { 0% { transform: scale(1) translate(0, 0); opacity: 0.5; } 100% { transform: scale(1.2) translate(-50px, 50px); opacity: 1; } }

.mu{width:100%;height:100%;background:rgba(7,13,23,0.92);backdrop-filter:blur(12px);display:flex;flex-direction:column;border-radius:10px;overflow:hidden;position:relative}
.mu::after{content:'';position:absolute;inset:0;border-radius:10px;border:1px solid rgba(255,255,255,0.03);pointer-events:none}

/* TOP BAR */
.tb{height:50px;background:rgba(11,18,32,0.92);display:flex;align-items:center;padding:0 12px;position:relative;z-index:10}
.tb::after{content:'';position:absolute;bottom:0;left:14px;right:14px;height:1px;background:rgba(255,255,255,0.04)}

.br{display:flex;align-items:center;gap:8px;cursor:pointer;flex-shrink:0}
.br-logo{width:36px;height:36px;position:relative}
.br-logo svg{width:100%;height:100%}
.br-name{font-family:var(--fh);font-size:22px;font-weight:700;letter-spacing:-0.5px}

/* SUBTABS */
.st-wrap{position:absolute;left:50%;transform:translateX(-50%);display:flex}
.st{display:flex;background:var(--bp);border-radius:14px;padding:2px;gap:2px;position:relative;z-index:1}
.st-pill{position:absolute;top:2px;bottom:2px;left:0;background:var(--ac);border-radius:12px;z-index:-1;transition:all .2s cubic-bezier(0.16, 1, 0.3, 1)}
.st-item{padding:4px 14px;font-size:12px;font-family:var(--fh);font-weight:600;color:var(--ts);border-radius:12px;cursor:pointer;transition:color .15s;white-space:nowrap;position:relative}
.st-item:not(.ac):hover{color:var(--tp);background:rgba(17,26,42,0.5)}
.st-item.ac{color:#fff;background:transparent}

/* HEADER PILLS */
.hp{display:flex;gap:0;background:var(--bc);border-radius:6px;margin-left:auto;margin-right:8px;flex-shrink:0}
.hp-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:var(--ts);transition:color .15s}
.hp-btn:hover{color:var(--ac)}
.hp-btn svg{width:16px;height:16px}
.hp-sep{width:1px;background:rgba(255,255,255,0.03);margin:9px 0}

/* WINDOW DOTS */
.wd{display:flex;gap:6px;align-items:center;flex-shrink:0}
.wd-d{width:12px;height:12px;border-radius:50%;cursor:pointer;transition:opacity .15s}
.wd-d:hover{opacity:.8}
.wd-y{background:#febc2e}.wd-r{background:#ff5f57}

/* MAIN AREA */
.ma{display:flex;flex:1;overflow:hidden}

/* SIDEBAR */
.sb{width:200px;background:var(--bc);display:flex;flex-direction:column;padding-top:16px;flex-shrink:0;border-radius:0 0 0 10px}
.sb-lbl{font-family:var(--fh);font-size:12px;font-weight:700;color:var(--tm);padding:0 14px;margin-bottom:4px;letter-spacing:0.5px}
.sb-div{height:1px;background:rgba(255,255,255,0.03);margin:6px 12px 10px}
.sb-item{display:flex;align-items:center;padding:0 14px;height:38px;cursor:pointer;color:var(--ts);font-family:var(--fh);font-size:15px;font-weight:600;gap:14px;position:relative;transition:all .15s;letter-spacing:0.3px}
.sb-item:hover{background:var(--bh);color:var(--tp)}
.sb-item.ac{color:var(--ac);background:rgba(78,201,123,0.05)}
.sb-item.ac::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac);border-radius:0 2px 2px 0}
.sb-item svg{width:16px;height:16px;flex-shrink:0}

/* USER CARD - avatar matches C++ sidebar.cpp exactly */
.uc{margin:auto 8px 10px;background:var(--bp);border-radius:7px;padding:12px}
.uc-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
/* Avatar: green glow ring → dark fill → head circle + shoulders (clipped) → status dot */
.uc-av{
  width:36px;height:36px;border-radius:50%;position:relative;flex-shrink:0;
  background:var(--bh);
  box-shadow:0 0 0 2px rgba(78,201,123,0.12);
}
/* Person silhouette using pseudo-elements */
.uc-av-head{
  position:absolute;
  width:11px;height:11px;
  background:var(--ac);
  border-radius:50%;
  left:50%;top:7px;
  transform:translateX(-50%);
}
.uc-av-shoulders{
  position:absolute;
  width:23px;height:10px;
  background:var(--ac);
  border-radius:6px 6px 0 0;
  left:50%;bottom:-1px;
  transform:translateX(-50%);
  overflow:hidden;
  clip-path:inset(0 0 0 0 round 6px 6px 0 0);
}
/* Clip the bottom overflow so shoulders don't bleed out */
.uc-av{overflow:hidden}
/* Status dot: absolute over the avatar, break out of overflow:hidden */
.uc-av-wrap{position:relative;flex-shrink:0;width:36px;height:36px}
.uc-av-dot{
  position:absolute;
  bottom:0;right:0;
  width:10px;height:10px;
  background:var(--ac);
  border-radius:50%;
  border:2px solid var(--bp);
  z-index:1;
}
.uc-name{font-family:var(--fh);font-size:15px;font-weight:700}
.uc-tag{font-size:11px;color:var(--tm)}
.uc-badge{margin-left:auto;background:rgba(78,201,123,0.18);color:var(--ac);font-family:var(--fh);font-size:11px;font-weight:700;padding:2px 8px;border-radius:5px}
.uc-sep{height:1px;background:rgba(255,255,255,0.06);margin-bottom:8px}
.uc-stats{display:flex;gap:4px}
.uc-st{flex:1;border-radius:5px;padding:6px 0;text-align:center}
.uc-st:first-child{background:rgba(78,201,123,0.08)}
.uc-st:not(:first-child){background:var(--bh)}
.uc-sv{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--ac)}
.uc-sl{font-family:var(--fm);font-size:9px;color:var(--ts);margin-top:2px}

/* PLAYER NAME INPUT - green text + blinking cursor (matches C++ VxInput) */
.inp-green{
  background:var(--bh);
  border-radius:4px;
  padding:4px 8px;
  font-size:12px;
  color:var(--ac);
  min-width:140px;
  border:1px solid rgba(78,201,123,0.15);
  outline:none;
  font-family:var(--fb);
  transition:border-color .15s, box-shadow .15s;
  caret-color:var(--ac);
}
.inp-green:focus{
  border-color:rgba(78,201,123,0.4);
  box-shadow:0 0 0 2px rgba(78,201,123,0.08);
  background:rgba(78,201,123,0.06);
}
.inp-green::placeholder{color:var(--tm)}

/* CONTENT */
.ct{flex:1;padding:12px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.ct-full{grid-template-columns:1fr}

/* CARDS */
.cd{background:rgba(11,18,32,0.82);border-radius:8px;overflow:visible}
.cd-h{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--tp);padding:7px 12px;background:rgba(11,18,32,0.9);border-bottom:1px solid rgba(255,255,255,0.01);letter-spacing:0.5px;border-radius:8px 8px 0 0}
.cd-b{padding:4px 0}

/* WIDGETS */
.wg{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;min-height:36px}
.wg-l{font-size:13px;color:var(--ts)}
.wg-r{display:flex;align-items:center;gap:6px}

/* TOGGLE */
.tg{width:38px;height:20px;background:var(--bh);border-radius:10px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.tg.on{background:rgba(78,201,123,0.7)}
.tg-d{width:10px;height:10px;border-radius:50%;position:absolute;top:5px;left:5px;transition:all .2s}
.tg:not(.on) .tg-d{background:#4a5168}
.tg.on .tg-d{left:23px;background:#f3edf0;box-shadow:0 0 6px rgba(78,201,123,0.3)}

/* DROPDOWN & MULTI-COMBO */
.dd{background:var(--bh);border-radius:4px;font-size:12px;color:var(--tp);display:flex;align-items:stretch;width:185px;height:28px;cursor:pointer;position:relative;border:1px solid transparent;transition:all .15s}
.dd:hover{background:rgba(255,255,255,0.06)}
.dd-open{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.03);z-index:900}
.dd-val{padding:0 10px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:28px}
.dd-arr-bx{width:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.03);border-radius:0 4px 4px 0;position:relative;flex-shrink:0}
.dd-arr{width:8px;height:4px;position:relative;transition:transform .2s}
.dd-arr::before, .dd-arr::after{content:'';position:absolute;width:5px;height:1.6px;background:var(--ac);border-radius:1px;top:1.2px}
.dd-arr::before{left:0;transform:rotate(45deg)}
.dd-arr::after{right:0;transform:rotate(-45deg)}
.dd-open .dd-arr{transform:rotate(180deg)}
.dd-list{position:fixed;background:var(--bc);border:1px solid var(--bd);border-radius:6px;z-index:999;min-width:185px;max-height:0;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.5);transition:max-height .25s cubic-bezier(0.16, 1, 0.3, 1)}
.dd-list.show{max-height:180px;overflow-y:auto}
.dd-opt{padding:0 10px;height:28px;display:flex;align-items:center;font-size:12px;color:var(--ts);cursor:pointer;transition:all .1s;white-space:nowrap;position:relative}
.dd-opt:hover{background:rgba(255,255,255,0.04);color:var(--tp)}
.dd-opt.selected{color:var(--ac)}
.dd-opt.selected::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:4px;background:var(--ac);border-radius:2px}

/* MULTI COMBO CHECKBOX */
.dd-opt.mc-opt.selected::before{display:none} /* Hide standard left bar for multi combo */
.dd-cb{width:12px;height:12px;border-radius:2px;background:rgba(255,255,255,0.04);margin-right:8px;position:relative;flex-shrink:0}
.dd-opt.selected .dd-cb{background:rgba(78,201,123,0.25)}
.dd-opt.selected .dd-cb::after{content:'';position:absolute;left:4px;top:1px;width:3px;height:7px;border:solid var(--ac);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}

/* KEYBIND WIDGET - matches C++ VxKeybind (key badge + Toggle/Hold/Always mode) */
.kbw{display:flex;align-items:center;gap:4px}
.kb{background:var(--bh);padding:3px 10px;border-radius:5px;color:var(--ac);font-size:11px;font-family:var(--fb);cursor:pointer;transition:all .15s;min-width:42px;text-align:center;border:1px solid transparent}
.kb:hover{background:rgba(78,201,123,0.12);border-color:rgba(78,201,123,0.2)}
.kb-waiting{animation:kbPulse 0.6s ease infinite !important;background:rgba(78,201,123,0.18) !important;color:var(--ac);border-color:rgba(78,201,123,0.4) !important}
@keyframes kbPulse{0%,100%{opacity:1}50%{opacity:0.35}}
.kb-mode{background:var(--bh);padding:2px 6px;border-radius:4px;color:var(--ts);font-size:10px;cursor:pointer;display:flex;align-items:center;gap:3px;position:relative}
.kb-mode:hover{background:rgba(78,201,123,0.08);color:var(--ac)}
.kb-mode-list{position:fixed;background:var(--bc);border:1px solid var(--bd);border-radius:6px;z-index:999;box-shadow:0 8px 24px rgba(0,0,0,0.5);min-width:80px}
.kb-mode-opt{padding:5px 10px;font-size:11px;color:var(--ts);cursor:pointer;transition:all .1s}
.kb-mode-opt:hover{background:rgba(78,201,123,0.08);color:var(--ac)}
.kb-mode-opt.selected{color:var(--ac)}

/* SLIDER */
.sl{padding:6px 12px;cursor:pointer}
.sl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sl-val{background:var(--bh);padding:2px 8px;border-radius:6px;color:var(--ac);font-size:12px}
.sl-trk{height:8px;background:var(--bh);border-radius:4px;position:relative}
.sl-fill{height:100%;background:var(--ac);border-radius:4px;transition:width .05s}
.sl-th{width:12px;height:12px;background:var(--ac);border-radius:50%;position:absolute;top:-2px;transform:translateX(-50%);border:2px solid #f3edf0;transition:left .05s;cursor:grab}
.sl-th:active{cursor:grabbing;box-shadow:0 0 8px var(--ag)}

/* COLOR DOT */
.clr{width:14px;height:14px;border-radius:3px;cursor:pointer;flex-shrink:0;transition:transform .1s;border:1px solid rgba(255,255,255,0.1)}
.clr:hover{transform:scale(1.3)}

/* KEYBIND BADGE */
.kb{background:var(--bh);padding:3px 10px;border-radius:5px;color:var(--ac);font-size:11px;font-family:var(--fb);cursor:pointer;transition:all .15s;min-width:36px;text-align:center}
.kb:hover{background:rgba(78,201,123,0.12)}
.kb-waiting{animation:kbPulse 0.6s ease infinite;background:rgba(78,201,123,0.18);color:var(--ac)}
@keyframes kbPulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* COLOR PICKER POPUP */
.cp-popup{background:var(--bc);border:1px solid var(--bd);border-radius:8px;padding:10px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.cp-label{font-family:var(--fh);font-size:11px;color:var(--tm);margin-bottom:8px;letter-spacing:0.5px}
.cp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cp-swatch{width:24px;height:24px;border-radius:4px;cursor:pointer;transition:transform .1s;border:1px solid rgba(255,255,255,0.1)}
.cp-swatch:hover{transform:scale(1.2)}

/* ACTION BUTTON */
.ab{margin:4px 12px 6px;padding:6px;border-radius:6px;text-align:center;font-family:var(--fh);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.ab-ac{background:rgba(78,201,123,0.14);border:1px solid rgba(78,201,123,0.35);color:var(--ac)}
.ab-ac:hover{background:rgba(78,201,123,0.24)}
.ab-sec{background:var(--bh);border:1px solid rgba(255,255,255,0.08);color:var(--ts)}
.ab-sec:hover{background:rgba(17,26,42,0.9)}

/* WELCOME */
.wel{grid-column:1/-1;padding:4px}
.wel-greet{font-family:var(--fh);font-size:22px;font-weight:700;margin-bottom:4px}
.wel-sub{font-size:13px;color:var(--tm);margin-bottom:14px}
.wel-sep{height:1px;background:rgba(255,255,255,0.05);margin-bottom:12px}
.wel-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.wel-card{background:var(--bc);border-radius:8px;padding:12px}
.wel-card-l{font-size:11px;color:var(--tm);margin-bottom:6px;letter-spacing:0.5px}
.wel-card-v{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--ac)}
.wel-tip{background:var(--bc);border-radius:7px;padding:10px 14px;font-size:12px;margin-bottom:14px;display:flex;gap:6px}
.wel-tip b{color:var(--ac)}
.wel-tip span{color:var(--ts)}
.wel-links-lbl{font-size:11px;color:var(--tm);margin-bottom:8px;letter-spacing:0.5px}
.wel-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.wel-link{background:var(--bc);border-radius:8px;padding:12px;cursor:pointer;transition:background .15s}
.wel-link:hover{background:rgba(78,201,123,0.04)}
.wel-link-icon{width:26px;height:26px;background:rgba(78,201,123,0.13);border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.wel-link-icon::after{content:'';width:8px;height:8px;background:var(--ac);border-radius:50%}
.wel-link-name{font-size:13px;margin-bottom:2px}
.wel-link-url{font-size:11px;color:var(--tm)}
.wel-key{background:var(--bc);border-radius:8px;padding:10px 14px}
.wel-key-l{font-size:11px;color:var(--tm);margin-bottom:4px}
.wel-key-v{font-size:12px;color:var(--ac)}

/* INPUT FIELD */
.inp{background:var(--bh);border-radius:4px;padding:4px 8px;font-size:12px;color:var(--tm);min-width:140px;border:none;outline:none;font-family:var(--fb)}

/* LIST */
.lst{margin:4px 8px;background:rgba(255,255,255,0.025);border:1px solid var(--bd);border-radius:6px;max-height:160px;overflow-y:auto}
.lst-row{padding:5px 10px;font-size:12px;color:var(--ts);cursor:pointer;transition:background .1s}
.lst-row:hover{background:rgba(255,255,255,0.04)}
.lst-row.ac{background:rgba(78,201,123,0.12);color:var(--ac)}

/* STAT TABLE */
.stbl{width:100%;font-size:12px}
.stbl-hd{display:flex;padding:4px 10px;color:var(--tm);border-bottom:1px solid var(--bd)}
.stbl-r{display:flex;padding:6px 10px;align-items:center}
.stbl-r:nth-child(even){background:rgba(255,255,255,0.02)}

/* TOGGLE GLOW - match C++ */
.tg.on::after{content:'';position:absolute;inset:-2px;border-radius:12px;background:rgba(78,201,123,0.18);z-index:-1}

/* POPUPS */
.popup{position:absolute;right:80px;top:52px;background:var(--bc);border:1px solid var(--bd);border-radius:8px;z-index:50;opacity:0;transform:translateY(-8px);pointer-events:none;transition:all .2s ease;overflow:hidden}
.popup.open{opacity:1;transform:translateY(0);pointer-events:all}
.popup-hd{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--bd)}
.popup-hd-t{font-family:var(--fh);font-size:15px;font-weight:700}
.popup-hd-s{font-size:11px;color:var(--tm)}

/* SETTINGS POPUP */
.pop-st{width:300px}
.pop-st-sect{padding:8px 16px;font-family:var(--fh);font-size:13px;font-weight:700;color:var(--ts);display:flex;align-items:center;gap:8px}
.pop-st-sect::after{content:'';flex:1;height:1px;background:var(--bd)}
.pop-st-row{display:flex;justify-content:space-between;align-items:center;padding:6px 16px}
.pop-st-row-l{font-size:13px;color:var(--ts)}

/* CHANGELOG POPUP */
.pop-cl{width:370px;max-height:360px;overflow-y:auto}
.pop-cl-badge{display:inline-block;background:rgba(78,201,123,0.12);color:var(--ac);font-size:11px;padding:2px 10px;border-radius:6px;font-family:var(--fh);font-weight:700}
.pop-cl-ver{font-family:var(--fh);font-size:20px;font-weight:700;margin-left:8px}
.pop-cl-date{font-size:11px;color:var(--tm)}
.pop-cl-sect{padding:6px 16px;font-family:var(--fh);font-size:13px;font-weight:700;color:var(--ts);display:flex;align-items:center;gap:8px}
.pop-cl-sect::after{content:'';flex:1;height:1px;background:var(--bd)}
.pop-cl-item{display:flex;align-items:center;gap:8px;padding:3px 16px 3px 20px;font-size:12px}
.pop-cl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pop-cl-b{color:var(--tp)}
.pop-cl-r{color:var(--ts)}
.pop-cl-foot{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-top:1px solid var(--bd);margin-top:6px}
.pop-cl-foot-v{font-size:12px;color:var(--tm)}
.pop-cl-btn{background:rgba(78,201,123,0.1);color:var(--ac);font-family:var(--fb);font-size:11px;padding:4px 12px;border-radius:6px;cursor:pointer;transition:background .15s;text-align:center}
.pop-cl-btn:hover{background:rgba(78,201,123,0.22)}

/* LIGHT THEME */
.light{--bp:#e8ecf2;--bc:#f8fafc;--bh:#dde4ee;--tp:#141821;--ts:#525a6d;--tm:#7f889c;--bd:rgba(0,0,0,0.08)}
.light .mu{background:rgba(232,236,242,0.97)}
.light .tb{background:rgba(248,250,252,0.98)}
.light .tb::after{background:rgba(0,0,0,0.06)}
.light .sb{background:var(--bc)}
.light .cd{background:rgba(248,250,252,0.98)}
.light .cd-h{background:rgba(248,250,252,0.95)}
.light .tg:not(.on){background:var(--bh)}
.light .tg:not(.on) .tg-d{background:#7f889c}
.light .dd,.light .inp,.light .sl-trk,.light .sl-val,.light .kb{background:var(--bh)}
.light .uc{background:rgba(221,228,238,0.6)}
.light .wd-y{background:#febc2e}.light .wd-r{background:#ff5f57}
.light .popup{background:var(--bc)}

/* HP active state */
.hp-btn.ac{color:var(--ac)}
.hp-btn.ac::after{content:'';position:absolute;inset:3px;border-radius:4px;background:rgba(78,201,123,0.18)}

/* VX-INPUT CUSTOM ELEMENT (ANIMATED) */
.vx-inp { position: relative; background: var(--bh); border-radius: 6px; min-width: 150px; height: 24px; cursor: text; outline: none; font-family: var(--fb); font-size: 13px; overflow: hidden; }
.vx-inp.green:focus { background: rgba(78,201,123,0.12); }
.vx-inp::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.018); pointer-events: none; }
.vx-inp.green:focus::after { background: rgba(255,255,255,0.035); }
.vx-txt { position: absolute; top: 0; left: 8px; right: 8px; bottom: 0; pointer-events: none; white-space: pre; }
.vx-char { position: absolute; color: var(--tp); top: 50%; transform: translateY(-50%); }
.vx-ph { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); color: var(--tm); pointer-events: none; }
.vx-car { position: absolute; width: 1.2px; height: 16px; background: var(--ac); top: 4px; display: none; }
.vx-inp:focus .vx-car { display: block; }
.vx-sel { position: absolute; top: 3px; bottom: 3px; background: rgba(78,201,123,0.20); border-radius: 3px; display: none; }
.vx-inp.has-sel .vx-sel { display: block; }