/*
 * VaultKey — Design System V2.1 ESCUDO ESCENA
 * Base limpia: un solo asset maestro del escudo, sin parches, sin halos CSS, sin capturas montadas.
 */

/* ═══════════════════════════════════════
   TOKENS — valores exactos del mockup
═══════════════════════════════════════ */
:root {
  /* Fondos */
  --bg-top:    #001B38;
  --bg-mid:    #000F24;
  --bg-bot:    #00070D;
  --grad-bg:   linear-gradient(180deg, #00142B 0%, #000C1B 48%, #00060B 100%);
  --grad-glow:
    radial-gradient(circle at 50% 8%, rgba(0,95,210,.28) 0%, rgba(0,38,92,.14) 34%, rgba(0,5,15,0) 68%),
    radial-gradient(ellipse at 50% 0%, rgba(0,217,255,.10) 0%, rgba(0,50,130,.08) 30%, transparent 58%);

  /* Acentos */
  --cyan:      #00D9FF;
  --blue:      #007BFF;
  --blue-deep: #005BFF;
  --cyan-a20:  rgba(0,217,255,.20);
  --cyan-a10:  rgba(0,217,255,.10);

  /* Botón primario */
  --btn-grad:  linear-gradient(135deg, #6A35FF 0%, #007BFF 100%);
  --btn-shadow: 0 0 18px rgba(0,123,255,.45), 0 8px 22px rgba(0,0,0,.35);

  /* Cards */
  --card-bg:   linear-gradient(135deg, rgba(0,32,70,.72), rgba(0,14,32,.88));
  --card-bdr:  rgba(0,190,255,.18);
  --card-shd:  0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  --card-bg-hi: linear-gradient(135deg, rgba(0,74,142,.50), rgba(0,25,58,.88));
  --card-bdr-hi: rgba(0,217,255,.32);
  --card-shd-hi: 0 10px 28px rgba(0,0,0,.38), 0 0 22px rgba(0,123,255,.10), inset 0 1px 0 rgba(255,255,255,.08);

  /* Bordes */
  --border:    rgba(0,190,255,.18);
  --border2:   rgba(0,150,200,.12);

  /* Textos */
  --t1:  #F4F8FF;
  --t2:  #D8E6F5;
  --t3:  rgba(216,230,245,.68);
  --t4:  rgba(216,230,245,.35);

  /* Escudo maestro: sin filtros ni glow artificial por CSS */

  /* PIN keys */
  --key-bg:  rgba(0,18,40,.45);
  --key-bdr: rgba(0,160,255,.45);
  --key-shd: inset 0 0 12px rgba(0,90,180,.18), 0 0 10px rgba(0,120,255,.10);

  /* Nav */
  --nav-h: calc(84px + env(safe-area-inset-bottom, 0px));

  /* Legado JS */
  --panel: var(--bg-mid);
  --line:  var(--border);
  --line2: var(--border2);
  --text:  var(--t1);
  --muted: var(--t3);
  --red:   #FF5252;
  --green: #00E676;
  --yellow:#FFD740;
  --purple:#9C6FFF;
  --orange:#FF9100;
}

/* ═══════════════════════════════════════
   RESET
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; margin:0; padding:0; }
html, body { width:100%; height:100%; overflow:hidden; background:#070b14; background:var(--grad-bg); color:var(--t1);
  position:relative;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; font-size:15px; -webkit-font-smoothing:antialiased; }
button, input, textarea, select { font:inherit; cursor:pointer; }
input, textarea, select { cursor:text; }
.hidden { display:none !important; }
.spacer { flex:1; }

/* ═══════════════════════════════════════
   APP SHELL
═══════════════════════════════════════ */
.app {
  position:relative;
  width:100%; max-width:430px;
  height:100dvh;
  margin:0 auto;
  overflow:hidden;
  background:var(--grad-bg);
}
.app::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:var(--grad-glow);
}

/* ═══════════════════════════════════════
   PANTALLAS + TRANSICIONES
═══════════════════════════════════════ */
.screen {
  position:absolute; inset:0; display:none;
  flex-direction:column; overflow:hidden;
  background:var(--grad-bg); z-index:1;
}
.screen.active { display:flex; z-index:2; }
.screen.slide-in-right  { display:flex; z-index:3; animation:slideInR  .28s cubic-bezier(.22,1,.36,1) both; }
.screen.slide-in-left   { display:flex; z-index:3; animation:slideInL  .28s cubic-bezier(.22,1,.36,1) both; }
.screen.slide-out-left  { display:flex; z-index:2; animation:slideOutL .22s cubic-bezier(.4,0,1,1)  both; }
.screen.slide-out-right { display:flex; z-index:2; animation:slideOutR .22s cubic-bezier(.4,0,1,1)  both; }
@keyframes slideInR  { from{transform:translateX(100%);opacity:.7} to{transform:translateX(0);opacity:1} }
@keyframes slideInL  { from{transform:translateX(-100%);opacity:.7} to{transform:translateX(0);opacity:1} }
@keyframes slideOutL { from{transform:translateX(0);opacity:1} to{transform:translateX(-30%);opacity:0} }
@keyframes slideOutR { from{transform:translateX(0);opacity:1} to{transform:translateX(30%);opacity:0} }

.content { flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 16px calc(var(--nav-h) + 20px); position:relative; z-index:1; }

/* ═══════════════════════════════════════
   COMPONENTES BASE
═══════════════════════════════════════ */

/* Header */
.top {
  height:58px; flex-shrink:0;
  display:flex; align-items:center; gap:12px; padding:0 16px;
  background:rgba(0,15,36,.88); border-bottom:1px solid var(--border2);
  backdrop-filter:blur(20px); position:relative; z-index:5;
}
.title { font-size:20px; font-weight:900; letter-spacing:-.3px; color:var(--t1); }
.sub   { font-size:13px; color:var(--t3); line-height:1.4; }

/* Card */
.card {
  background:var(--card-bg); border:1px solid var(--card-bdr);
  border-radius:18px; padding:16px; box-shadow:var(--card-shd);
}

/* Botón primario */
.primary {
  display:block; width:100%; border:none; border-radius:14px;
  padding:15px 20px; font-size:16px; font-weight:900; color:#fff;
  background:var(--btn-grad); box-shadow:var(--btn-shadow);
  transition:transform .12s, opacity .12s;
}
.primary:active { transform:scale(.97); opacity:.9; }

/* Ghost */
.ghost {
  border:1px solid var(--border); border-radius:14px; padding:12px 16px;
  background:rgba(0,18,40,.5); color:var(--t2); font-weight:700;
}
.ghost:active { background:rgba(0,80,180,.2); }

/* Danger */
.danger { color:var(--red); border-color:rgba(255,82,82,.35); background:rgba(255,82,82,.06); }

/* Icon button */
.iconBtn {
  width:40px; height:40px; border-radius:12px;
  border:1px solid var(--border2); background:rgba(0,18,40,.5);
  color:var(--t2); display:grid; place-items:center;
}

/* Link button */
.linkBtn { border:0; background:transparent; color:var(--cyan); font-size:14px; font-weight:800; padding:8px 0; }

/* Inputs */
.inp, .txt, select {
  width:100%; background:rgba(0,35,75,.75); border:1.5px solid rgba(0,160,220,.28);
  border-radius:12px; padding:13px 14px; color:#e8f6ff; outline:none;
  transition:border-color .15s, box-shadow .15s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.25);
}
.inp::placeholder, .txt::placeholder { color:rgba(160,210,240,.55); }
.inp:focus, .txt:focus, select:focus {
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,217,255,.14), inset 0 1px 0 rgba(255,255,255,.06);
  background:rgba(0,45,95,.85);
}
.txt { min-height:82px; resize:vertical; }
select option { background:#001830; color:#e8f6ff; }

/* Field */
.field { margin-bottom:10px; }
.label { display:block; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.6px; color:#3de8ff; margin-bottom:7px; text-shadow:0 0 8px rgba(0,217,255,.3); }

/* Small button */
.smallBtn { border:1px solid var(--border); border-radius:11px; padding:9px 14px; background:rgba(0,80,200,.2); color:var(--cyan); font-weight:900; font-size:13px; }

/* Grid */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rowBtns { display:flex; gap:10px; }
.rowBtns > * { flex:1; }

/* Logo chip */
.logo { width:40px; height:40px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; overflow:hidden; color:#fff; font-weight:900; font-size:18px; }
.logo svg, .logo img { width:100%; height:100%; display:block; }

/* Pill */
.pill { display:inline-flex; align-items:center; border:1px solid var(--border2); background:rgba(0,18,40,.6); border-radius:999px; padding:6px 12px; color:var(--t2); font-size:12px; font-weight:800; }

/* ═══════════════════════════════════════
   ESCUDO
═══════════════════════════════════════ */
.pinLogo, .heroShield, .onboardHeroImg {
  display:block;
  background:transparent; border:0; box-shadow:none;
  -webkit-mask-image:none; mask-image:none;
  filter:none;
  opacity:1;
}
.shield, .homeBrand, .onboardHeroWrap {
  background:transparent; border:0; box-shadow:none; overflow:visible;
  position:relative; isolation:isolate;
}
/* IMPORTANTE: no crear halo CSS detrás del escudo.
   El brillo y partículas viven en vaultkey-shield-scene.png?v=221. */
.shield::before, .onboardHeroWrap::before, .homeBrand::before { display:none !important; content:none !important; }
.shield > *, .onboardHeroWrap > *, .homeBrand > * { position:relative; z-index:1; }
/* .shield margin merged into main rule below */

/* ═══════════════════════════════════════
   SPLASH
═══════════════════════════════════════ */
#vkSplash {
  position:fixed; inset:0; z-index:9999;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background:var(--grad-bg); padding:24px;
}
#vkSplash.vkSplashVisible { display:flex; }
#vkSplash.vkSplashOut { opacity:0; pointer-events:none; transition:opacity .4s; }

.vkSplashShield {
  width:min(76vw,292px); margin-bottom:20px;
  animation:splashDrop .7s cubic-bezier(.22,1,.36,1) both;
}
.vkSplashImg { width:100%; filter:none; }
.vkSplashBrand { font-size:36px; font-weight:950; letter-spacing:-1px; color:var(--t1); animation:splashFadeUp .6s .3s both; }
.vkSplashBrand span { color:var(--cyan); }
.vkSplashLine  { font-size:13px; color:var(--t3); margin-top:8px; min-height:18px; animation:splashFadeUp .5s .5s both; }
.vkSplashBar   { width:min(55vw,180px); height:3px; background:rgba(0,160,255,.15); border-radius:999px; margin-top:28px; overflow:hidden; animation:splashFadeUp .5s .6s both; }
.vkSplashFill  { height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--cyan)); border-radius:999px; transition:width .1s linear; }

@keyframes splashDrop   { from{transform:translateY(-30px) scale(.85);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }
@keyframes splashFadeUp { from{transform:translateY(14px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ═══════════════════════════════════════
   ONBOARDING
═══════════════════════════════════════ */
#onboardingModal {
  position:absolute; inset:0; z-index:90;
  display:none; align-items:stretch; background:var(--bg-bot);
}
#onboardingModal.open { display:flex; }
#onboardingModal .sheet {
  width:100%; height:100dvh; max-height:none; border:0; border-radius:0;
  padding:0 20px calc(24px + env(safe-area-inset-bottom,0px));
  background:var(--grad-bg);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
#onboardingModal .sheet::before {
  content:""; position:absolute; inset:0; background:none; pointer-events:none;
}

.onboardSlider { flex:1; display:flex; flex-direction:column; }
.onboardSlide  { display:none; flex:1; flex-direction:column; align-items:center; text-align:center; padding-top:24px; position:relative; z-index:1; }
.onboardSlide.active { display:flex; }

.onboardHeroWrap { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.onboardHeroImg  { width:min(82vw,320px); mix-blend-mode:screen; }

.onboardTitle { font-size:26px; font-weight:950; line-height:1.1; letter-spacing:-.5px; color:var(--t1); margin:20px 0 10px; }
.onboardTitle span { color:var(--cyan); }
.onboardText  { font-size:15px; line-height:1.55; color:var(--t2); max-width:320px; }

/* Animaciones onboarding — INTACTAS */
.obAnim { width:100%; max-width:320px; margin:16px auto 0; }
.obTerminal, .obPassWrap, .obCipherWrap, .obCheckWrap {
  background:linear-gradient(135deg,rgba(0,32,70,.72),rgba(0,14,32,.88));
  border:1px solid rgba(0,190,255,.20); border-radius:14px; padding:14px 16px; text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);
}

/* Terminal slide 0 */
.obLine { display:flex; align-items:center; gap:8px; font-size:12px; font-family:ui-monospace,Consolas,monospace; margin-bottom:7px; opacity:0; }
.obLine:last-child { margin-bottom:0; }
.obLine1 { animation:obFadeIn .4s .5s forwards; color:var(--cyan); }
.obLine2 { animation:obFadeIn .4s 1.3s forwards; color:var(--green); }
.obLine3 { animation:obFadeIn .4s 2.1s forwards; color:var(--green); }
.obDot   { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.obDot2  { background:var(--green); box-shadow:0 0 8px rgba(0,230,118,.7); }
.obDot4  { background:var(--blue);  box-shadow:0 0 8px rgba(0,123,255,.7); }

/* Password slide 1 */
.obPassLabel    { font-size:11px; color:var(--t3); font-family:monospace; margin-bottom:8px; display:block; }
.obPassValue    { font-family:ui-monospace,Consolas,monospace; font-size:15px; font-weight:700; color:var(--green); letter-spacing:.5px; margin-bottom:10px; display:block; animation:obPulse 2.5s 1s infinite; }
.obStrengthBar  { height:5px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-bottom:6px; }
.obStrengthFill { height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--cyan)); border-radius:999px; transition:width .3s; }
.obStrengthLabel{ font-size:11px; color:var(--green); display:block; }

/* Cipher slide 2 */
.obCipherRow  { display:flex; align-items:center; gap:6px; font-size:12px; font-family:monospace; margin-bottom:9px; overflow:hidden; }
.obCipherRow:last-child { margin-bottom:0; }
.obCipherKey  { font-size:10px; font-weight:900; text-transform:uppercase; color:var(--t4); width:54px; flex-shrink:0; }
.obCipherVal  { flex:1; color:var(--t3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.obCipherIcon { color:var(--cyan); font-weight:900; flex-shrink:0; }
.obCipherEnc  { flex:1; min-width:0; color:var(--green); font-size:11px; letter-spacing:.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.obCipherBadge{ display:inline-flex; align-items:center; gap:6px; background:rgba(0,230,118,.08); border:1px solid rgba(0,230,118,.25); border-radius:8px; padding:6px 10px; font-size:12px; color:var(--green); margin-top:10px; }

/* Check slide 3 */
.obCheckRow   { display:flex; align-items:center; gap:14px; font-size:13px; font-family:ui-monospace,Consolas,monospace; color:var(--green); margin-bottom:10px; opacity:0; padding:3px 0; }
.obCheckRow:last-of-type { margin-bottom:0; }
.obCheckIco   { font-size:16px; font-weight:900; color:var(--green); flex-shrink:0; width:20px; text-align:center; }
.obCheckTxt   { flex:1; text-align:left; color:var(--green); text-shadow:0 0 10px rgba(0,230,118,.32); font-weight:700; }
.obCheckBadge { display:flex; align-items:center; justify-content:center; gap:8px; background:rgba(0,230,118,.10); border:1px solid rgba(0,230,118,.34); border-radius:10px; padding:9px 14px; font-size:13px; font-weight:800; color:var(--green); text-shadow:0 0 10px rgba(0,230,118,.35); margin-top:12px; width:100%; }

/* Dots navegación */
.onboardDots    { display:flex; justify-content:center; gap:10px; margin:auto 0 18px; padding-top:16px; position:relative; z-index:2; }
.onboardDots i  { width:10px; height:10px; border-radius:999px; background:rgba(0,160,255,.2); transition:all .3s; display:block; }
.onboardDots i.on { width:36px; background:var(--cyan); box-shadow:0 0 14px rgba(0,217,255,.7); }
#onboardBtn { position:relative; z-index:2; height:56px; font-size:16px; border-radius:16px; }

@keyframes obFadeIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
@keyframes obPulse  { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ═══════════════════════════════════════
   PIN — ajustado para Android sin corte inferior
═══════════════════════════════════════ */
.pinScreen {
  align-items:center; justify-content:flex-start;
  text-align:center;
  /* Pantalla PIN sin navbar: menos padding para que el teclado no se corte en Android */
  padding:20px 22px calc(18px + env(safe-area-inset-bottom,0px));
  background:var(--grad-bg);
}
.pinAura  { display:none; }
.pinInner { width:100%; display:flex; flex-direction:column; align-items:center; }

.shield { width:min(86vw,350px); min-width:min(80vw,280px); margin:0 auto 8px; overflow:visible; padding:0; }
.pinLogo   { width:100%; height:auto; object-fit:contain; object-position:center; }
.pinTitle, .pinTag, .bioHint { display:none; }

.pinSub {
  font-size:16px; font-weight:700; color:var(--t1);
  margin:6px 0 18px;
  text-shadow:0 0 20px rgba(0,217,255,.5);
}

/* Dots */
.dots { display:flex; justify-content:center; gap:10px; margin-bottom:18px; }
.dot  { width:13px; height:13px; border-radius:50%; border:2px solid rgba(0,160,255,.45); background:transparent; transition:all .15s; }
.dot.on { background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 16px rgba(0,217,255,.85); }
.dots8 .dot { width:11px; height:11px; }

/* Teclado PIN — spec exacta */
.keys { display:grid; grid-template-columns:repeat(3,66px); gap:10px 20px; justify-content:center; }
.key  {
  width:66px; height:66px; border-radius:50%;
  background:var(--key-bg); border:1px solid var(--key-bdr);
  box-shadow:var(--key-shd);
  color:var(--t1); font-size:24px; font-weight:800;
  display:grid; place-items:center; transition:all .1s;
}
.key:active { transform:scale(.92); background:rgba(0,100,255,.4); border-color:var(--cyan); box-shadow:0 0 22px rgba(0,217,255,.55); }

/* Iconos bio y borrar */
.key svg.delIcon    { width:24px; height:24px; color:var(--t1); stroke:var(--t1); }
.key svg.fingerIcon { width:24px; height:24px; color:var(--t2); stroke:var(--t2); }
.key:has(svg.delIcon)    { border-color:rgba(0,140,220,.35); }
.key:has(svg.fingerIcon) { border-color:rgba(0,140,220,.30); }

.pinActions { margin-top:14px; }
.pinWarn    { color:#ffbd6b; }
.pinLocked  { color:var(--red); }

/* ═══════════════════════════════════════
   HOME
═══════════════════════════════════════ */
.homeHeroPremium, .targetHome { background:var(--grad-bg); }

.mockTop {
  position:relative; z-index:3; height:54px; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between; padding:0 16px;
}
.mockIconBtn { width:38px; height:38px; border:0; background:transparent; color:var(--t2); font-size:26px; display:grid; place-items:center; }

#homeMenu {
  position:absolute; top:54px; left:12px; z-index:50;
  background:linear-gradient(135deg,rgba(0,32,70,.95),rgba(0,14,32,.98));
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  min-width:180px; box-shadow:0 8px 32px rgba(0,0,0,.6);
}
#homeMenu button { width:100%; text-align:left; padding:13px 16px; border:0; background:transparent; color:var(--t2); font-size:14px; font-weight:700; border-bottom:1px solid var(--border2); transition:background .15s; }
#homeMenu button:last-child { border-bottom:0; }
#homeMenu button:active { background:var(--cyan-a10); }

.targetHomeContent { flex:1; overflow-y:auto; padding:0 18px calc(var(--nav-h)+18px); display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; z-index:1; }

.homeBrand.targetHero { width:100%; height:38vh; min-height:260px; display:flex; align-items:center; justify-content:center; padding-top:0; overflow:visible; }
.heroShield { width:min(88vw,354px); height:auto; object-fit:contain; object-position:center; filter:none; padding:0; }

.controlText.targetHomeText { margin-top:22px; width:100%; }
.heroBrandTitle { font-size:38px; font-weight:950; letter-spacing:-1.2px; color:var(--t1); line-height:1; }
.heroBrandTitle span { color:var(--blue); }
.targetHomeText strong { display:block; font-size:16px; font-weight:700; color:var(--t2); margin-top:8px; }
.targetHomeText p { font-size:14px; line-height:1.55; color:var(--t3); margin-top:10px; }
.hiddenStats, .targetRecent { display:none; }

.targetHomeContent > button[onclick*="vault"] {
  display:block; width:100%; margin-top:20px;
  padding:15px 20px; border-radius:14px; border:0;
  font-size:15px; font-weight:900; color:#fff;
  background:var(--btn-grad); box-shadow:var(--btn-shadow);
  transition:transform .12s;
}
.targetHomeContent > button[onclick*="vault"]:active { transform:scale(.97); }

/* FAB externo eliminado: el + vive dentro del nav para evitar cortes reales */

/* ═══════════════════════════════════════
   NAVBAR — V2.0.3 sin cortes
   Un solo nav real, sin botón flotante superpuesto.
═══════════════════════════════════════ */

/* Iconos por tab */


.vkSvgIcon { width:22px; height:22px; display:block; fill:none; stroke:rgba(255,255,255,.80); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ═══════════════════════════════════════
   VAULT (Entradas)
═══════════════════════════════════════ */
.targetVault { background:var(--grad-bg); }

.vaultHeader { height:54px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 14px; position:relative; z-index:5; background:rgba(0,11,28,.6); }
.vaultTitle  { position:absolute; left:0; right:0; text-align:center; pointer-events:none; font-size:18px; font-weight:900; color:var(--t1); }

.targetSearch { padding:8px 14px 4px; }
.targetSearch input, .search input {
  width:100%; height:46px; padding:0 16px; font-size:15px;
  background:linear-gradient(135deg,rgba(0,62,120,.44),rgba(0,20,50,.92));
  border:1px solid rgba(0,217,255,.30); border-radius:15px; color:#F4F8FF; outline:none;
  box-shadow:0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.targetSearch input::placeholder, .search input::placeholder { color:rgba(216,230,245,.72); }
.targetSearch input:focus, .search input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-a10),0 0 18px rgba(0,217,255,.18); }

/* Tabs */
.vaultTabs { display:flex; gap:8px; padding:6px 14px 10px; }
.vaultTabs button {
  border:1px solid rgba(0,170,255,.22); border-radius:13px; padding:9px 15px;
  background:linear-gradient(135deg,rgba(0,42,90,.62),rgba(0,13,32,.88));
  color:rgba(244,248,255,.78); font-size:12px; font-weight:900; letter-spacing:.05px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 16px rgba(0,0,0,.22);
  transition:all .15s;
}
.vaultTabs button.active {
  background:linear-gradient(135deg,rgba(0,170,255,.30),rgba(0,91,255,.26));
  border-color:rgba(0,217,255,.62); color:#42F1FF;
  text-shadow:0 0 8px rgba(0,217,255,.42);
  box-shadow:0 0 16px rgba(0,217,255,.24), inset 0 1px 0 rgba(255,255,255,.10);
}
.vaultTabs span { color:#7AF6FF; font-size:10px; margin-left:3px; text-shadow:0 0 7px rgba(0,217,255,.38); }

.targetListContent { padding-top:0; }

/* Entry card */
.entry {
  display:flex; gap:11px; align-items:center;
  background:linear-gradient(135deg,rgba(0,32,70,.72),rgba(0,14,32,.88));
  border:1px solid rgba(0,190,255,.18); border-radius:14px; margin-bottom:8px; padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);
  transition:background .12s, border-color .12s;
}
.entry:active { background:rgba(0,91,255,.2); border-color:rgba(0,217,255,.4); }
.entry h3 { font-size:15px; font-weight:800; color:var(--t1); display:flex; align-items:center; gap:6px; }
.entry p  { font-size:12px; color:var(--t3); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entry .go{ font-size:18px; color:rgba(0,190,255,.4); }

/* Empty */
.emptyVault, .empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 20px; gap:12px; color:var(--t3); }
.emptyVault b, .empty b { font-size:18px; color:var(--t1); }
.emptyVault p, .empty p { font-size:14px; color:var(--t3); }


/* ═══════════════════════════════════════
   FAVORITOS
═══════════════════════════════════════ */
.favGrid { padding:0; }
.favRow { display:flex; align-items:center; gap:12px; background:var(--card-bg); border:1px solid var(--card-bdr); border-radius:16px; margin-bottom:9px; padding:13px 12px; box-shadow:var(--card-shd); cursor:pointer; transition:border-color .15s; }
.favRow:active { border-color:var(--cyan-a20); }
.favRowIco  { width:48px; height:48px; border-radius:14px; overflow:hidden; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,190,255,.18); }
.favRowIco .logo { width:48px; height:48px; border-radius:14px; }
.favRowInfo { flex:1; min-width:0; }
.favRowName { font-size:15px; font-weight:800; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.favRowId   { font-size:12px; color:var(--t3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.favRowBtns { display:flex; gap:6px; flex-shrink:0; }
.favRowBtn  { height:32px; padding:0 10px; border-radius:9px; font-size:11px; font-weight:900; border:1px solid rgba(0,190,255,.22); background:rgba(0,91,255,.18); color:var(--cyan); cursor:pointer; white-space:nowrap; transition:background .12s; }
.favRowBtn:active { background:rgba(0,91,255,.35); }
.favRowBtn2 { height:32px; padding:0 10px; border-radius:9px; font-size:11px; font-weight:900; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06); color:var(--t2); cursor:pointer; white-space:nowrap; transition:background .12s; }
.favRowBtn2:active { background:rgba(255,255,255,.12); }
.favRowWeak { font-size:9px; font-weight:900; color:#ff6b6b; background:rgba(255,80,80,.12); border:1px solid rgba(255,80,80,.25); border-radius:5px; padding:1px 5px; margin-left:5px; vertical-align:middle; letter-spacing:.3px; }

/* ═══════════════════════════════════════
   AJUSTES — mismo sistema visual
═══════════════════════════════════════ */
.settingBlock { margin-bottom:18px; }
.settingBlock > .label { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.7px; color:var(--cyan); margin-bottom:8px; padding-left:2px; }
.settingsGrid { display:grid; gap:8px; }

.settingsRow {
  display:flex; align-items:center; gap:13px;
  background:var(--card-bg); border:1px solid var(--card-bdr);
  border-radius:16px; padding:13px 14px; box-shadow:var(--card-shd);
  transition:background .12s;
}
.settingsRow:active { background:rgba(0,91,255,.15); }
.settingsRow > div:last-child { color:var(--t3); font-size:18px; }

.sico { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; font-size:20px; flex-shrink:0; border:1px solid transparent; }

/* Colores sico por sección seguridad */
.settingBlock:nth-child(1) .settingsRow:nth-child(1) .sico { background:rgba(0,91,255,.25);  border-color:rgba(0,123,255,.35); }
.settingBlock:nth-child(1) .settingsRow:nth-child(2) .sico { background:rgba(0,160,100,.22); border-color:rgba(0,200,120,.30); }
.settingBlock:nth-child(1) .settingsRow:nth-child(3) .sico { background:rgba(255,170,0,.20); border-color:rgba(255,200,0,.28); }
.settingBlock:nth-child(1) .settingsRow:nth-child(4) .sico { background:rgba(255,100,0,.18); border-color:rgba(255,140,0,.26); }
.settingBlock:nth-child(1) .settingsRow:nth-child(5) .sico { background:rgba(0,180,255,.20); border-color:rgba(0,217,255,.28); }
.settingBlock:nth-child(1) .settingsRow:nth-child(6) .sico { background:rgba(120,60,255,.22);border-color:rgba(160,100,255,.30);}
.settingBlock:nth-child(1) .settingsRow:nth-child(7) .sico { background:rgba(255,60,60,.18); border-color:rgba(255,80,80,.26);  }
.settingBlock:nth-child(2) .settingsRow:nth-child(1) .sico { background:rgba(0,200,160,.20); border-color:rgba(0,230,190,.28); }
.settingBlock:nth-child(2) .settingsRow:nth-child(2) .sico { background:rgba(0,123,255,.22); border-color:rgba(0,160,255,.30); }
.settingBlock:nth-child(4) .settingsRow .sico              { background:rgba(0,91,255,.18);  border-color:rgba(0,123,255,.25); }

.stxt { flex:1; min-width:0; }
.stxt b { display:block; font-size:15px; font-weight:800; color:var(--t1); }
.stxt span { display:block; font-size:12px; color:var(--t3); margin-top:2px; }

.settingSelect { width:100%; margin-top:10px; background:rgba(0,14,32,.85); border:1px solid var(--border); border-radius:12px; padding:12px 14px; color:var(--t1); outline:none; }
.settingSelect:focus { border-color:var(--cyan); }


/* ═══════════════════════════════════════
   MODALES
═══════════════════════════════════════ */
.modal { position:absolute; inset:0 0 var(--nav-h) 0; z-index:60; background:rgba(0,7,18,.85); backdrop-filter:blur(14px); display:none; align-items:flex-end; }
.modal.open { display:flex; }
.sheet { position:relative; width:100%; max-height:calc(92dvh - var(--nav-h)); overflow-y:auto; background:linear-gradient(180deg,#001A34 0%,#000C1E 52%,#000812 100%); border:1px solid rgba(0,217,255,.20); border-radius:24px 24px 0 0; padding:20px 16px 28px; box-shadow:0 -18px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
.sheetHead  { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.sheetTitle { font-size:18px; font-weight:950; color:var(--t1); text-shadow:0 0 10px rgba(0,217,255,.16); }

/* Nueva entrada fullscreen */
#entryModal { position:absolute; inset:0; align-items:stretch; background:rgba(0,7,18,.96); backdrop-filter:none; }
#entryModal .sheet { min-height:100dvh; height:auto; max-height:none; border-radius:0; border:0; padding:0 14px calc(32px + env(safe-area-inset-bottom,0px)); background:var(--grad-bg); position:relative; }
#entryModal .sheet::before { content:""; position:absolute; inset:0; background:var(--grad-glow); pointer-events:none; }

.entryTargetHead { height:58px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin-bottom:10px; position:relative; z-index:1; }
.entryTargetHead .sheetTitle { text-align:center; font-size:17px; }
.entryTargetHead .linkBtn:first-child { text-align:left; }
.entryTargetHead .linkBtn:last-child  { text-align:right; }

#entryModal .field { background:var(--card-bg); border:1px solid var(--card-bdr); border-radius:16px; padding:13px 14px; margin-bottom:9px; position:relative; z-index:1; box-shadow:var(--card-shd); }
#entryModal .label { color:var(--cyan); font-size:11px; font-weight:900; letter-spacing:.6px; margin-bottom:7px; }
#entryModal .inp, #entryModal .txt, #entryModal select { background:rgba(0,14,32,.88); border:1px solid rgba(0,150,200,.18); color:var(--t1); font-size:15px; }
#entryModal .inp::placeholder, #entryModal .txt::placeholder { color:var(--t4); }
#entryModal .inp:focus, #entryModal .txt:focus { border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-a10); }

.strength   { height:5px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-top:7px; }
.strength i { display:block; height:100%; width:0; background:var(--red); transition:.25s; }
.fieldError { border-color:rgba(255,82,82,.6); box-shadow:0 0 0 2px rgba(255,82,82,.1); }
.fieldErrorNote { display:block; margin-top:5px; color:#ff8888; font-size:11px; font-weight:700; }

/* Icon strip */
#iconStripRow { overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:none; padding:4px 0 8px; cursor:grab; scroll-behavior:smooth; touch-action:pan-x; }
#iconStripRow.dragging { cursor:grabbing; user-select:none; }
#iconStripRow::-webkit-scrollbar { display:none; }
@media (pointer:fine){
  #iconStripRow { scrollbar-width:thin; padding-bottom:10px; }
  #iconStripRow::-webkit-scrollbar { display:block; height:8px; }
  #iconStripRow::-webkit-scrollbar-track { background:rgba(255,255,255,.06); border-radius:999px; }
  #iconStripRow::-webkit-scrollbar-thumb { background:rgba(0,217,255,.38); border-radius:999px; }
}
.vkStripIconBtn {
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:13px;
  border:1.5px solid rgba(0,150,200,.15);
  background:transparent;
  vertical-align:top; margin-right:6px;
  overflow:hidden; padding:3px;
  transition:border-color .15s, box-shadow .15s;
  flex-shrink:0;
}
.vkStripIconBtn svg {
  width:48px !important; height:48px !important;
  display:block; border-radius:10px; flex-shrink:0;
}
.vkStripIconBtn.active { border-color:var(--cyan); border:1.5px solid var(--cyan); box-shadow:0 0 0 2px rgba(0,217,255,.20), 0 0 14px rgba(0,217,255,.25); }

.iconChoice { width:100%; height:74px; border-radius:14px; border:1px solid var(--border2); background:rgba(0,14,32,.85); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; transition:border-color .15s; }
.iconChoice .logo { width:40px; height:40px; border-radius:11px; }
.iconChoice.active { border-color:var(--cyan); box-shadow:0 0 0 2px var(--cyan-a10); }
.tiny { font-size:9px; color:var(--t3); max-width:64px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Quick view fullscreen */
#quickModal { position:absolute; inset:0; align-items:stretch; background:rgba(0,7,18,.96); }
#quickModal .sheet { height:100dvh; max-height:none; border-radius:0; border:0; padding:0; background:var(--grad-bg); display:flex; flex-direction:column; }
#quickBody { flex:1; overflow-y:auto; padding:0 16px 24px; }

.qvFieldRow { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--card-bg); border-bottom:1px solid var(--border2); transition:background .12s; }
.qvFieldRow:last-child { border-bottom:0; }
.qvFieldRow:active { background:rgba(0,91,255,.15); }
.qvFieldIcon { width:36px; height:36px; border-radius:11px; background:rgba(0,150,200,.14); border:1px solid rgba(0,150,200,.18); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.qvFieldLabel { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.6px; color:var(--t4); margin-bottom:3px; }
.qvFieldValue { font-size:15px; color:var(--t1); font-weight:500; word-break:break-all; }
.qvActionBtn  { flex-shrink:0; height:36px; min-width:56px; border-radius:10px; border:1px solid var(--border); background:rgba(0,91,255,.18); color:var(--cyan); font-size:12px; font-weight:900; padding:0 12px; transition:all .1s; }
.qvActionBtn:active { background:rgba(0,123,255,.32); transform:scale(.95); }
.qvTimestamp  { text-align:center; font-size:11px; color:var(--t4); margin:8px 0 16px; }
.qvBotEdit    { display:block; width:100%; padding:15px; border-radius:16px; font-size:15px; font-weight:900; background:var(--btn-grad); color:#fff; border:0; box-shadow:var(--btn-shadow); margin-bottom:10px; transition:transform .1s; }
.qvBotEdit:active { transform:scale(.97); }
.qvBotBtn     { padding:14px; border-radius:16px; font-size:14px; font-weight:900; border:1px solid; transition:transform .1s; }
.qvBotBtn:active { transform:scale(.97); }
.qvBotFav      { border-color:rgba(255,215,60,.30); background:rgba(255,215,60,.07); color:var(--yellow); }
.qvBotFavActive{ border-color:rgba(255,215,60,.50); background:rgba(255,215,60,.14); color:var(--yellow); }
.qvBotDel      { border-color:rgba(255,82,82,.28);  background:rgba(255,82,82,.07);  color:var(--red); }

/* ═══════════════════════════════════════
   GENERADOR
═══════════════════════════════════════ */
.genOut {
  font-family:ui-monospace,Consolas,monospace;
  background:rgba(0,14,32,.92); border:1.5px solid rgba(0,190,255,.35);
  border-radius:14px; padding:16px; word-break:break-all; margin:10px 0;
  color:var(--cyan); font-size:17px; font-weight:700; letter-spacing:1px;
  min-height:54px; display:flex; align-items:center; justify-content:center; text-align:center;
  box-shadow:0 0 20px rgba(0,190,255,.08);
}
.recCode {
  font-family:ui-monospace,Consolas,monospace;
  background:rgba(0,14,32,.92); border:1.5px solid rgba(0,190,255,.35);
  border-radius:14px; padding:16px; word-break:break-all; margin:10px 0;
  color:var(--t2); font-size:14px; font-weight:700; letter-spacing:.4px;
  min-height:54px; display:flex; align-items:center; justify-content:center; text-align:center;
  box-shadow:0 0 20px rgba(0,190,255,.08);
}

.rangeField {
  background:linear-gradient(135deg,rgba(0,78,150,.48),rgba(0,20,52,.92));
  border:1px solid rgba(0,217,255,.30); border-radius:16px; padding:15px 16px; margin-bottom:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.36),0 0 18px rgba(0,123,255,.10),inset 0 1px 0 rgba(255,255,255,.08);
}
.rangeTop   { display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; }
.rangeTop b { font-size:11px; text-transform:uppercase; color:#E7F3FF; letter-spacing:.65px; font-weight:950; text-shadow:0 0 9px rgba(0,217,255,.22); }
.rangeTop span { font-size:18px; font-weight:950; color:#42F1FF; text-shadow:0 0 10px rgba(0,217,255,.46); }

input[type=range] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:16px; cursor:pointer; border-radius:999px; background:transparent;
  --fill:0%;
}
input[type=range]::-webkit-slider-runnable-track {
  height:8px; border-radius:999px;
  background:linear-gradient(90deg,
    #20F3FF 0%,
    #008CFF var(--fill,0%),
    rgba(126,175,210,.36) var(--fill,0%),
    rgba(126,175,210,.36) 100%);
  border:1px solid rgba(160,225,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 12px rgba(0,217,255,.12);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:24px; margin-top:-8px;
  border:1.5px solid rgba(235,252,255,.75);
  background:linear-gradient(135deg,#F5FFFF 0%,#45F5FF 35%,#008CFF 100%);
  clip-path:polygon(50% 0%,100% 28%,100% 72%,50% 100%,0% 72%,0% 28%);
  box-shadow:0 0 12px rgba(0,217,255,.95),0 0 26px rgba(0,123,255,.55),inset 0 1px 0 rgba(255,255,255,.65);
  cursor:pointer;
}
input[type=range]::-moz-range-track {
  height:8px; border-radius:999px;
  background:linear-gradient(90deg,
    #20F3FF 0%,
    #008CFF var(--fill,0%),
    rgba(126,175,210,.36) var(--fill,0%),
    rgba(126,175,210,.36) 100%);
  border:1px solid rgba(160,225,255,.24);
}
input[type=range]::-moz-range-progress {
  height:8px; border-radius:999px;
  background:linear-gradient(90deg,#20F3FF,#008CFF);
}
input[type=range]::-moz-range-thumb {
  width:18px; height:24px; border:1.5px solid rgba(235,252,255,.75);
  border-radius:5px;
  background:linear-gradient(135deg,#F5FFFF 0%,#45F5FF 35%,#008CFF 100%);
  box-shadow:0 0 12px rgba(0,217,255,.95),0 0 26px rgba(0,123,255,.55),inset 0 1px 0 rgba(255,255,255,.65);
  cursor:pointer;
}

.presetBtns { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:6px 0 12px; }
.presetBtns button { border:1px solid rgba(0,170,255,.24); border-radius:13px; background:linear-gradient(135deg,rgba(0,55,110,.46),rgba(0,16,38,.88)); color:#E7F3FF; padding:11px 4px; font-weight:900; font-size:14px; transition:all .15s; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.presetBtns button:active, .presetBtns button.presetActive { background:rgba(0,91,255,.28); border-color:rgba(0,217,255,.6); color:var(--cyan); box-shadow:0 0 14px rgba(0,217,255,.2); }
.checkrow   { display:flex; gap:9px; align-items:center; margin:8px 0; color:var(--t2); font-size:14px; }
.checkrow input { width:18px; height:18px; accent-color:var(--blue); }


/* Pulido final — entradas y generador */
#genModal { align-items:stretch; }
#genModal .sheetTitle { color:#F4F8FF; font-size:20px; letter-spacing:-.2px; }
#genModal .sheet {
  width:100%; height:100dvh; max-height:100dvh;
  border-radius:0; border:0;
  padding:18px 16px calc(24px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;
}
#genModal .iconBtn { background:rgba(0,25,55,.72); border-color:rgba(0,217,255,.18); color:#DFF6FF; }
#genModal .checkrow { color:#E7F3FF; font-weight:500; }
#genModal .checkrow input { width:20px; height:20px; accent-color:var(--blue); filter:drop-shadow(0 0 7px rgba(0,123,255,.45)); }
#genModal .ghost { color:#39F3FF; border-color:rgba(0,217,255,.34); background:linear-gradient(135deg,rgba(0,70,130,.28),rgba(0,12,28,.78)); letter-spacing:.08em; }
#genModal .sub { color:rgba(216,230,245,.76); }
#genModal .label { color:#24EFFF; text-shadow:0 0 8px rgba(0,217,255,.35); }
.targetVault .vaultTitle { text-shadow:0 0 10px rgba(0,217,255,.16); }

/* ═══════════════════════════════════════
   PRIVACY OVERLAY
═══════════════════════════════════════ */
.privacyOverlay { position:fixed; inset:0; z-index:99999; background:var(--bg-bot); display:none; place-items:center; }
.privacyOverlay.show { display:grid; }
.privacyBox  { text-align:center; }
.privacyIcon { font-size:52px; margin-bottom:10px; }

/* ═══════════════════════════════════════
   UTILIDADES
═══════════════════════════════════════ */
.safeArt      { font-size:56px; filter:drop-shadow(0 0 20px rgba(0,190,255,.35)); }
.securityNote { font-size:12px; color:var(--t3); margin-top:8px; line-height:1.4; }
.vkGenericLogo{ width:100%; height:100%; display:grid; place-items:center; font-weight:900; border-radius:inherit; }
.controlText  { flex:1; }
.delIcon      { color:var(--t1); font-size:20px; padding:4px; }
.fingerIcon   { font-size:24px; }

/* Scroll */
* { scrollbar-width:thin; scrollbar-color:rgba(0,160,200,.2) transparent; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,160,200,.22); border-radius:2px; }

/* Media pequeño */
@media (max-height:740px) {
  .shield { width:min(78vw,300px); }
  .onboardHeroImg { width:min(74vw,280px); mix-blend-mode:screen; }
  .onboardTitle { font-size:22px; margin:14px 0 8px; }
  .keys { grid-template-columns:repeat(3,60px); gap:8px 18px; }
  .key  { width:60px; height:60px; font-size:22px; }
  .homeBrand.targetHero { height:37vh; min-height:240px; }
  .heroShield { width:min(86vw,316px); }
  .pinScreen { padding-top:18px; }
}



/* Escritorio — fondo cubre todo el viewport */
@media (min-width:431px) {
  html, body { background:linear-gradient(180deg,#001B38 0%,#000F24 45%,#00070D 100%); }
  body { background-attachment:fixed; }
}
.catChip{border:1px solid rgba(0,210,255,.4);background:rgba(0,40,80,.7);color:#e0f4ff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:20px;white-space:nowrap;cursor:pointer;transition:.2s;flex-shrink:0;scroll-snap-align:center}
.catChip.active{background:rgba(0,180,220,.35);color:#00e5ff;border-color:rgba(0,210,255,.7)}
#catFilterRow::-webkit-scrollbar{display:none}

/* ── Bloques de campos especiales — formularios nuevos ── */
#fieldCard, #fieldSecureNote, #fieldId, #fieldLicense, #fieldMedical, #fieldWifi {
  background:linear-gradient(135deg, rgba(0,40,90,.6), rgba(0,20,55,.75));
  border:1px solid rgba(0,180,255,.18);
  border-radius:16px;
  padding:14px 14px 4px;
  margin-bottom:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 4px 16px rgba(0,0,0,.3);
}
#fieldCard .inp, #fieldSecureNote .inp,
#fieldId .inp, #fieldLicense .inp,
#fieldMedical .inp, #fieldWifi .inp,
#fieldCard select, #fieldId select,
#fieldLicense select, #fieldMedical select, #fieldWifi select,
#fieldCard textarea, #fieldMedical textarea {
  background:rgba(0,20,55,.8);
  border-color:rgba(0,150,210,.22);
}
#fieldCard .inp:focus, #fieldId .inp:focus, #fieldLicense .inp:focus,
#fieldMedical .inp:focus, #fieldWifi .inp:focus,
#fieldCard select:focus, #fieldId select:focus,
#fieldLicense select:focus, #fieldMedical select:focus, #fieldWifi select:focus {
  background:rgba(0,35,80,.95);
  border-color:var(--cyan);
}
/* Sheet del formulario de entrada — fondo ligeramente más claro */
#entryModal .sheet {
  background:linear-gradient(180deg, rgba(0,18,48,.98) 0%, rgba(0,12,32,.99) 100%);
}
/* Texto de selects más visible */
#fieldMedical select, #fieldCard select,
#fieldId select, #fieldLicense select, #fieldWifi select {
  color:#e8f6ff;
}

/* ── Fondo de partículas en todas las pantallas ── */
.screen {
  background: radial-gradient(ellipse at 50% 20%, #0a1f3d 0%, #040c1a 55%, #020810 100%);
}
#pin.screen {
  background: linear-gradient(180deg, #060e1f 0%, #020810 100%);
}
.screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 8% 8%, rgba(0,230,255,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(100,180,255,1) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 88% 6%, rgba(0,230,255,1) 0%, transparent 100%),
    radial-gradient(2px 2px at 81% 16%, rgba(160,210,255,.95) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 4% 25%, rgba(0,200,255,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 95% 31%, rgba(0,230,255,.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 25% 12%, rgba(130,180,255,.9) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 73% 11%, rgba(0,230,255,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 43% 5%, rgba(160,220,255,.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 59% 9%, rgba(0,200,255,1) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 10% 42%, rgba(100,160,255,.95) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 48%, rgba(0,230,255,.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 3% 61%, rgba(0,230,255,1) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 97% 66%, rgba(160,200,255,.95) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 73%, rgba(0,230,255,.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 67% 79%, rgba(100,180,255,.95) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 15% 88%, rgba(0,230,255,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 84% 91%, rgba(0,200,255,.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 50% 96%, rgba(160,220,255,.85) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 76% 52%, rgba(0,230,255,.95) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 28% 45%, rgba(0,200,255,1) 0%, transparent 100%),
    radial-gradient(2px 2px at 55% 35%, rgba(100,180,255,.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 58%, rgba(0,230,255,.85) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 62% 68%, rgba(160,210,255,.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 7% 77%, rgba(0,230,255,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 93% 82%, rgba(0,200,255,.9) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 22% 95%, rgba(0,230,255,1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 98%, rgba(100,160,255,.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 47% 84%, rgba(0,230,255,.9) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 2% 50%, rgba(0,230,255,1) 0%, transparent 100%);
  animation: vkStars 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes vkStars {
  0%   { opacity: .75; }
  50%  { opacity: 1;  }
  100% { opacity: .8; }
}

/* Glow central sutil */
.screen::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,100,220,.12) 0%, rgba(0,50,150,.06) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}


.vkShieldBg {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  max-width: 280px;
  opacity: .055;
  filter: blur(1.5px) saturate(1.5);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Contenido por encima del fondo */
.screen > * { position: relative; z-index: 1; }

/* Desktop navigation fallback */
#screenDots {
  pointer-events: none !important;
}

#screenDots .dot {
  pointer-events: auto !important;
  cursor: pointer;
}

/* FAB global dentro del shell principal */
.app > #fabAdd {
  position: absolute !important;
  right: 20px !important;
  bottom: 28px !important;
  z-index: 90 !important;
}

/* Category paged carousel */
#catFilterRow {
  overflow: hidden !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  align-items: center;
  scroll-snap-type: none !important;
  overscroll-behavior-x: contain;
  user-select: none;
  touch-action: pan-y;
}

#catFilterRow .catChip {
  flex: 0 0 auto;
}

#catFilterRow:focus {
  outline: none;
}

#catFilterRow:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(0,210,255,.45);
}

/* Category fixed paged carousel: 4 complete chips per page */
#catFilterRow {
  overflow: hidden !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  scroll-snap-type: none !important;
  overscroll-behavior-x: contain;
  user-select: none;
  touch-action: pan-y;
}

#catFilterRow > * {
  max-width: calc((100% - 30px) / 4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 0 auto;
}

#catFilterRow:focus {
  outline: none;
}

#catFilterRow:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(0,210,255,.45);
}

/* ==========================================================================
   VAULTKEY UI v2.1 — Nueva entrada compacta + fondo limpio
   Corrección: elimina puntos brillantes y hace más visible el cambio del formulario.
   Solo CSS. No toca lógica, JS, cifrado, categorías ni guardado.
   ========================================================================== */

/* 1) Fondo limpio: cero partículas en pantallas y modales */
.screen::before,
#entryModal .sheet::before,
#genModal .sheet::before,
#quickModal .sheet::before,
.modal .sheet::before {
  background-image: none !important;
  background: none !important;
  opacity: 0 !important;
  animation: none !important;
  display: none !important;
  content: none !important;
}

.screen::after,
#entryModal .sheet::after,
.modal .sheet::after {
  background: none !important;
  opacity: 0 !important;
  display: none !important;
  content: none !important;
}

.app::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(35,123,255,.09) 0%, rgba(35,123,255,.035) 34%, transparent 66%) !important;
  opacity: .75 !important;
}

/* 2) Nueva entrada: layout más limpio y notablemente más compacto */
#entryModal .sheet {
  padding: 0 12px calc(20px + env(safe-area-inset-bottom,0px)) !important;
  background: linear-gradient(180deg, #071426 0%, #050e1c 54%, #030812 100%) !important;
}

.entryTargetHead {
  height: 48px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid rgba(132,178,220,.10) !important;
  background: rgba(5,14,28,.78) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  backdrop-filter: blur(16px) !important;
}

.entryTargetHead .sheetTitle {
  font-size: 15.5px !important;
  font-weight: 800 !important;
}

.entryTargetHead .linkBtn {
  font-size: 13px !important;
  padding: 6px 0 !important;
  font-weight: 760 !important;
}

/* Botones de tipo: menos altos, más estilo segmented control */
#entryModal .sheet > div[style*="grid-template-columns:1fr 1fr 1fr"],
#entryModal .sheet > div[style*="grid-template-columns:1fr 1fr"] {
  gap: 6px !important;
  margin-bottom: 7px !important;
}

#typeBtnPass,
#typeBtnNote,
#typeBtnCard,
#typeBtnId,
#typeBtnLicense,
#typeBtnMedical,
#typeBtnWifi {
  min-height: 34px !important;
  padding: 6px 5px !important;
  border-radius: 11px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 760 !important;
  background: rgba(9,27,50,.78) !important;
  border: 1px solid rgba(132,178,220,.16) !important;
  color: rgba(213,224,236,.74) !important;
  box-shadow: none !important;
}

#typeBtnPass[style*="var(--cyan)"],
#typeBtnNote[style*="var(--cyan)"],
#typeBtnCard[style*="var(--cyan)"],
#typeBtnId[style*="var(--cyan)"],
#typeBtnLicense[style*="var(--cyan)"],
#typeBtnMedical[style*="var(--cyan)"],
#typeBtnWifi[style*="var(--cyan)"] {
  background: rgba(35,123,255,.22) !important;
  border-color: rgba(92,200,255,.48) !important;
  color: #F4F7FB !important;
}

/* 3) Barra de iconos: más baja, menos protagonista */
#entryModal .sheet > div:has(#iconStripRow) {
  margin-bottom: 8px !important;
  padding: 8px 9px 7px !important;
  border: 1px solid rgba(132,178,220,.12) !important;
  border-radius: 15px !important;
  background: rgba(7,20,38,.70) !important;
}

#iconStripRow {
  padding: 2px 0 6px !important;
  gap: 6px !important;
  min-height: 44px !important;
}

.vkStripIconBtn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
  padding: 2px !important;
  margin-right: 4px !important;
  background: rgba(9,27,50,.80) !important;
}

.vkStripIconBtn svg,
.vkStripIconBtn img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
}

#eIconSearch {
  height: 34px !important;
  min-height: 34px !important;
  margin-top: 2px !important;
  padding: 7px 10px !important;
  font-size: 12.5px !important;
}

/* 4) Campos base: más pequeños, menos tarjetas gigantes */
#entryModal .field {
  padding: 9px 10px !important;
  margin-bottom: 7px !important;
  border-radius: 13px !important;
  background: rgba(8,22,40,.76) !important;
  border-color: rgba(132,178,220,.12) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

#entryModal .label {
  font-size: 9.8px !important;
  margin-bottom: 5px !important;
  letter-spacing: .48px !important;
  color: rgba(143,215,255,.86) !important;
}

#entryModal .inp,
#entryModal .txt,
#entryModal select,
#entryModal textarea {
  min-height: 36px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  background: rgba(5,14,28,.86) !important;
}

#entryModal textarea.inp,
#entryModal .txt {
  min-height: 72px !important;
  line-height: 1.42 !important;
}

#fieldPass .sub,
#strTxt {
  font-size: 11px !important;
  margin-top: 5px !important;
  line-height: 1.25 !important;
}

.strength {
  height: 4px !important;
  margin-top: 6px !important;
}

#fieldPass .smallBtn,
#fieldWifi .smallBtn {
  width: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

/* 5) Bloques especiales: compactos y separados con borde sobrio */
#fieldCard,
#fieldSecureNote,
#fieldId,
#fieldLicense,
#fieldMedical,
#fieldWifi {
  padding: 9px 9px 2px !important;
  margin-bottom: 8px !important;
  border-radius: 14px !important;
  background: rgba(8,22,40,.70) !important;
  border: 1px solid rgba(132,178,220,.13) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

#fieldCard .field,
#fieldSecureNote .field,
#fieldId .field,
#fieldLicense .field,
#fieldMedical .field,
#fieldWifi .field {
  background: rgba(5,14,28,.45) !important;
  box-shadow: none !important;
}

/* 6) Favorito / Extras / Categoría / Etiquetas más profesionales */
#favToggleBtn {
  width: 42px !important;
  height: 24px !important;
  background: rgba(132,178,220,.14) !important;
}

#favThumb {
  width: 18px !important;
  height: 18px !important;
}

#entryModal .sheet > div[style*="Favorito"],
#fieldExtraBtns,
#entryModal .field:has(#eCategory),
#entryModal .field:has(#tagInputWrap) {
  margin-bottom: 8px !important;
}

#fieldExtraBtns {
  gap: 7px !important;
}

#fieldExtraBtns button {
  padding: 9px 10px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
  background: rgba(8,22,40,.72) !important;
  border-color: rgba(132,178,220,.13) !important;
  color: rgba(213,224,236,.76) !important;
}

#tagInputWrap {
  min-height: 36px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  background: rgba(5,14,28,.86) !important;
  border-color: rgba(132,178,220,.16) !important;
}

#tagInput {
  font-size: 12.5px !important;
}

/* 7) Reduce campos en pantallas bajas */
@media (max-height: 760px) {
  #entryModal .field {
    padding: 8px 9px !important;
    margin-bottom: 6px !important;
  }
  #entryModal .inp,
  #entryModal select,
  #entryModal textarea {
    min-height: 34px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
  .vkStripIconBtn {
    width: 38px !important;
    height: 38px !important;
  }
  .vkStripIconBtn svg,
  .vkStripIconBtn img {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ========================================================================== 
   VAULTKEY UI v2.2 — Generator + detail polish
   Fase segura: solo overrides visuales. No cambia lógica.
   Objetivo: generador menos brillante/gigante y detalle más premium.
   ========================================================================== */

/* Blindaje: puntitos brillantes fuera en todas las pantallas */
.screen::before,
#entryModal .sheet::before,
#genModal .sheet::before,
#quickModal .sheet::before {
  background-image: none !important;
  animation: none !important;
}
.screen::before {
  opacity: 0 !important;
}

/* ============================
   GENERADOR PROFESIONAL — v2.2
   ============================ */
#genModal .sheet {
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom,0px)) !important;
  background: linear-gradient(180deg,#061426 0%,#040c18 100%) !important;
}

#genModal .sheetHead {
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(132,178,220,.10) !important;
}

#genModal .sheetTitle {
  font-size: 20px !important;
  font-weight: 820 !important;
  color: #F4F7FB !important;
  letter-spacing: -.35px !important;
  text-shadow: none !important;
}

#genModal .iconBtn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
  font-size: 22px !important;
  background: rgba(8,25,46,.88) !important;
  border-color: rgba(132,178,220,.18) !important;
  color: rgba(244,247,251,.82) !important;
}

#genModal .rangeField {
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  border-radius: 17px !important;
  background: linear-gradient(180deg,rgba(11,34,61,.90),rgba(7,22,42,.96)) !important;
  border-color: rgba(132,178,220,.17) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#genModal .rangeTop {
  margin-bottom: 10px !important;
}

#genModal .rangeTop b {
  font-size: 11px !important;
  color: rgba(244,247,251,.86) !important;
  letter-spacing: .65px !important;
}

#genModal .rangeTop span {
  font-size: 20px !important;
  color: #6ED0FF !important;
  text-shadow: none !important;
}

#genModal .grid2 {
  gap: 10px !important;
}

#genModal .presetBtns {
  gap: 9px !important;
  margin: 10px 0 14px !important;
}

#genModal .presetBtns button {
  padding: 12px 4px !important;
  border-radius: 15px !important;
  background: rgba(8,25,46,.90) !important;
  border-color: rgba(132,178,220,.16) !important;
  color: rgba(244,247,251,.88) !important;
  font-size: 15px !important;
  font-weight: 760 !important;
}

#genModal .presetBtns button.presetActive,
#genModal .presetBtns button:active {
  background: rgba(35,123,255,.18) !important;
  border-color: rgba(92,200,255,.35) !important;
  color: #F4F7FB !important;
}

#genModal .checkrow,
#genModal div[onclick*="gPinMode"] {
  margin: 8px 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(7,22,42,.72) !important;
  border: 1px solid rgba(132,178,220,.12) !important;
  color: rgba(244,247,251,.86) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

#genModal .checkrow input,
#genModal div[onclick*="gPinMode"] input {
  width: 19px !important;
  height: 19px !important;
  filter: none !important;
}

#genModal .field {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

#genModal .inp {
  height: 50px !important;
  border-radius: 15px !important;
  font-size: 15px !important;
  background: rgba(7,22,42,.92) !important;
}

#genModal .sub,
#genModal #genInfo {
  color: rgba(213,224,236,.64) !important;
  font-size: 13px !important;
  margin: 8px 0 12px !important;
}

#genModal .primary {
  height: 58px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
  font-weight: 820 !important;
  background: linear-gradient(135deg,#4D3DFF 0%,#147CFF 100%) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.28) !important;
}

#genModal .genOut {
  min-height: 58px !important;
  margin: 12px 0 12px !important;
  border-radius: 16px !important;
  background: rgba(3,13,25,.94) !important;
  border-color: rgba(92,200,255,.24) !important;
  color: #4ED9FF !important;
  font-size: 16px !important;
  letter-spacing: 1.6px !important;
  box-shadow: none !important;
}

#genModal .rowBtns {
  gap: 10px !important;
}

#genModal .rowBtns .ghost {
  min-height: 48px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  color: #BEEAFF !important;
  background: rgba(8,25,46,.90) !important;
  border-color: rgba(92,200,255,.18) !important;
  letter-spacing: .02em !important;
}

/* Sliders menos brillantes */
#genModal input[type=range]::-webkit-slider-runnable-track {
  height: 7px !important;
  background: linear-gradient(90deg,
    #5cc8ff 0%,
    #237bff var(--fill,0%),
    rgba(132,178,220,.24) var(--fill,0%),
    rgba(132,178,220,.24) 100%) !important;
  box-shadow: none !important;
}

#genModal input[type=range]::-webkit-slider-thumb {
  width: 20px !important;
  height: 20px !important;
  margin-top: -7px !important;
  border-radius: 8px !important;
  clip-path: none !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.28) !important;
}

/* ============================
   DETALLE DE ENTRADA — v2.2
   ============================ */
#quickModal .sheet {
  background: linear-gradient(180deg,#061426 0%,#030812 100%) !important;
}

#quickModal .sheetHead,
#quickModal [style*="Detalle"] {
  text-shadow: none !important;
}

#quickBody {
  padding: 0 16px 22px !important;
}

/* Evita el duplicado: ya hay Editar arriba */
#quickModal .qvBotEdit {
  display: none !important;
}

/* Tarjeta de campos del detalle */
#quickModal .qvFieldRow {
  padding: 13px 14px !important;
  background: linear-gradient(180deg,rgba(11,34,61,.92),rgba(7,22,42,.97)) !important;
  border-bottom-color: rgba(132,178,220,.11) !important;
}

#quickModal .qvFieldRow:first-child {
  border-radius: 18px 18px 0 0 !important;
}

#quickModal .qvFieldRow:last-child {
  border-radius: 0 0 18px 18px !important;
}

#quickModal .qvFieldIcon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg,rgba(35,123,255,.28),rgba(92,200,255,.10)) !important;
  border-color: rgba(92,200,255,.24) !important;
  color: #DDF5FF !important;
  font-size: 19px !important;
}

#quickModal .qvFieldLabel {
  color: #82CFFF !important;
  opacity: .88 !important;
  font-size: 10.5px !important;
  letter-spacing: .65px !important;
}

#quickModal .qvFieldValue {
  color: #F4F7FB !important;
  font-weight: 650 !important;
  font-size: 15px !important;
}

#quickModal .qvActionBtn {
  height: 38px !important;
  min-width: 72px !important;
  border-radius: 13px !important;
  background: rgba(35,123,255,.18) !important;
  border-color: rgba(92,200,255,.22) !important;
  color: #74D7FF !important;
  font-size: 13px !important;
  font-weight: 780 !important;
}

#quickModal .qvTimestamp {
  color: rgba(213,224,236,.48) !important;
  font-size: 12px !important;
  margin: 12px 0 18px !important;
}

#quickModal .rowBtns {
  gap: 12px !important;
}

#quickModal .qvBotBtn {
  min-height: 54px !important;
  border-radius: 17px !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  background: rgba(7,22,42,.88) !important;
  box-shadow: none !important;
}

#quickModal .qvBotFav,
#quickModal .qvBotFavActive {
  color: #FFD166 !important;
  border-color: rgba(245,184,46,.32) !important;
  background: rgba(245,184,46,.07) !important;
}

#quickModal .qvBotDel {
  color: #FF7B7B !important;
  border-color: rgba(239,68,68,.32) !important;
  background: rgba(239,68,68,.07) !important;
}

/* El badge CUENTA / tipo de entrada más visible si cae dentro del quick modal */
#quickModal .pill,
#quickModal [class*="pill"] {
  background: rgba(92,200,255,.10) !important;
  border-color: rgba(92,200,255,.25) !important;
  color: #8FD7FF !important;
  font-weight: 800 !important;
}

/* Logo del detalle: un poco más elegante y menos gigante en móvil */
#quickModal .logo {
  border-radius: 22px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(92,200,255,.16) !important;
}

/* ============================
   ICON STRIP — contención visual
   La paginación real tipo categorías queda para v3 con app.js.
   ============================ */
#entryModal #iconStripRow {
  padding: 3px 0 8px !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

#entryModal .vkStripIconBtn {
  width: 50px !important;
  height: 50px !important;
  border-radius: 14px !important;
  margin-right: 7px !important;
}

#entryModal .vkStripIconBtn svg {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
}