/* Vordenk — Get Started page, #detail dialog, Utilities panel.
   Borrows the site's own variables so every mode/theme keeps working. Font: Google Sans (loaded in index.html). */

/* =================================================================== GET STARTED */
#stage-getstarted{ padding:0; justify-content:stretch; overflow-y:auto; }
.gs{
  position:relative; flex:1; width:100%; max-width:560px; margin:0 auto; min-height:100%;
  display:flex; flex-direction:column; justify-content:space-between; gap:24px; overflow:hidden;
  padding:calc(26px + env(safe-area-inset-top,0px)) 26px calc(24px + env(safe-area-inset-bottom,0px));
  font-family:'Google Sans',Roboto,'Noto Sans SC',sans-serif; color:var(--foam);
  isolation:isolate;
}
.gs *{ font-family:inherit; }

/* decoration: two soft drifting lights + a faint grid that fades out */
.gs-orb{ position:absolute; z-index:-1; border-radius:50%; filter:blur(46px); pointer-events:none; will-change:transform; }
.gs-orb-a{ width:300px; height:300px; top:-90px; right:-110px; background:radial-gradient(circle at 35% 35%, rgba(var(--accent-rgb),.55), rgba(var(--accent-rgb),0) 70%); animation:gsFloatA 14s ease-in-out infinite; }
.gs-orb-b{ width:340px; height:340px; bottom:-130px; left:-130px; background:radial-gradient(circle at 60% 40%, rgba(173,208,204,.40), rgba(173,208,204,0) 70%); animation:gsFloatB 17s ease-in-out infinite; }
.gs-grid{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 38%, #000 0%, transparent 100%); mask-image:radial-gradient(70% 55% at 50% 38%, #000 0%, transparent 100%);
}
@keyframes gsFloatA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-30px,40px) scale(1.12); } }
@keyframes gsFloatB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(40px,-34px) scale(1.1); } }

.gs-top{ display:flex; align-items:center; gap:11px; }
.gs-logo{ border-radius:26%; box-shadow:0 10px 26px -10px rgba(var(--accent-rgb),.6), 0 0 0 1px rgba(var(--accent-rgb),.3); }
.gs-brand{ font-size:21px; font-weight:700; letter-spacing:-.01em; }
.gs-brand span{ color:var(--teal-400); font-weight:500; }

.gs-mid{ display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:8px 0; }
.gs-kicker{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 20px; padding:7px 14px 7px 12px; border-radius:999px;
  font-size:12.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-300);
  background:rgba(var(--accent-rgb),.10); border:1px solid rgba(var(--accent-rgb),.28);
}
.gs-kicker i{ width:7px; height:7px; border-radius:50%; background:var(--teal-400); box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6); animation:gsPing 2.2s ease-out infinite; }
@keyframes gsPing{ 70%,100%{ box-shadow:0 0 0 9px rgba(var(--accent-rgb),0); } }

.gs-title{
  margin:0 0 22px; text-wrap:balance; font-size:clamp(46px,14vw,84px); line-height:.98; font-weight:700; letter-spacing:-.035em; color:var(--foam);
}
.gs-title em{
  font-style:normal; display:inline-block;
  background:linear-gradient(100deg, var(--teal-300) 0%, var(--teal-400) 40%, #fff3c9 55%, var(--teal-400) 70%, var(--teal-600) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation:gsShine 5s ease-in-out infinite;
}
@keyframes gsShine{ 0%,100%{ background-position:100% 0; } 50%{ background-position:0 0; } }

.gs-lead{ margin:0 0 10px; font-size:clamp(18px,4.6vw,21px); line-height:1.35; font-weight:600; color:var(--foam); max-width:30ch; }
.gs-copy{ margin:0; font-size:clamp(15px,3.9vw,17px); line-height:1.6; color:var(--slate-400); max-width:46ch; }
.gs-pills{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.gs-pills li{
  padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--foam);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.gs-pills li::before{ content:"✓"; margin-right:7px; color:var(--teal-400); font-weight:700; }

.gs-bottom{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.gs-btn{
  position:relative; overflow:hidden; width:100%; max-width:440px; min-height:60px; padding:0 26px; border:0; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:'Google Sans',Roboto,sans-serif; font-size:18px; font-weight:600; letter-spacing:.005em; color:var(--on-accent);
  background:linear-gradient(135deg, var(--teal-300), var(--teal-400) 45%, var(--teal-600));
  box-shadow:0 18px 40px -16px rgba(var(--accent-rgb),.85), 0 0 0 1px rgba(255,255,255,.25) inset;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  -webkit-tap-highlight-color:transparent;
}
.gs-btn::after{ /* light sweep */
  content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation:gsSweep 3.6s 1.2s ease-in-out infinite;
}
@keyframes gsSweep{ 0%{ left:-60%; } 55%,100%{ left:130%; } }
.gs-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.gs-btn:hover{ transform:translateY(-2px); box-shadow:0 24px 48px -16px rgba(var(--accent-rgb),.95), 0 0 0 1px rgba(255,255,255,.35) inset; }
.gs-btn:hover svg{ transform:translateX(5px); }
.gs-btn:active{ transform:translateY(0) scale(.985); }
.gs-btn:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; }
.gs-foot{ margin:0; font-size:13px; color:var(--slate-500); }

/* entrance: everything rises in turn */
.gs-top,.gs-kicker,.gs-title,.gs-lead,.gs-copy,.gs-pills,.gs-btn,.gs-foot{ opacity:0; animation:gsRise .75s cubic-bezier(.16,1,.3,1) forwards; }
.gs-top{ animation-delay:.05s; } .gs-kicker{ animation-delay:.14s; } .gs-title{ animation-delay:.22s; }
.gs-lead{ animation-delay:.34s; } .gs-copy{ animation-delay:.42s; } .gs-pills{ animation-delay:.52s; }
.gs-btn{ animation-delay:.64s; } .gs-foot{ animation-delay:.74s; }
@keyframes gsRise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@media (max-height:820px){ .gs{ gap:16px; } .gs-title{ font-size:clamp(40px,11vw,68px); margin-bottom:16px; } .gs-kicker{ margin-bottom:14px; } .gs-pills{ margin-top:16px; } .gs-copy{ line-height:1.5; } }
@media (max-height:640px){ .gs{ gap:14px; } .gs-title{ font-size:clamp(38px,11vw,60px); margin-bottom:14px; } .gs-pills{ margin-top:14px; } .gs-kicker{ margin-bottom:12px; } }
@media (prefers-reduced-motion:reduce){
  .gs-orb,.gs-kicker i,.gs-title em,.gs-btn::after{ animation:none; }
  .gs-top,.gs-kicker,.gs-title,.gs-lead,.gs-copy,.gs-pills,.gs-btn,.gs-foot{ animation:none; opacity:1; }
}

/* =================================================================== shared dialog shell */
html.vkv-lock{ overflow:hidden; }
.vkv-back{
  position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:16px;
  padding-top:calc(16px + env(safe-area-inset-top,0px)); padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  background:rgba(2,10,13,.62); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); animation:vkvFade .2s ease both;
}
@keyframes vkvFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes vkvPop{ from{ opacity:0; transform:translateY(14px) scale(.975); } to{ opacity:1; transform:none; } }
.vkv-box{
  position:relative; width:100%; max-width:480px; max-height:100%; overflow:auto; border-radius:22px; padding:24px 22px 20px;
  background:var(--surface,#062c35); color:var(--foam,#eef3ea); border:1px solid var(--line,#0b4046);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7); animation:vkvPop .32s cubic-bezier(.16,1,.3,1) both;
  font-family:'Google Sans',Roboto,'Noto Sans SC',sans-serif;
}
.vkv-box *{ font-family:inherit; }
.vkv-x{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:0; cursor:pointer; font-size:22px; line-height:1;
  color:var(--slate-400,#9db8b3); background:rgba(255,255,255,.06);
}
.vkv-x:hover{ color:var(--foam,#fff); background:rgba(255,255,255,.12); }
.vkv-eyebrow{ margin:0 0 4px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-400,#d8be84); }
.vkv-h{ margin:0 0 14px; font-size:24px; font-weight:700; letter-spacing:-.01em; }
.vkv-sub,.vkv-note{ margin:0 0 12px; font-size:13px; color:var(--slate-400,#9db8b3); line-height:1.45; }
.vkv-note{ margin:-2px 0 12px; }

.vkv-f{ display:flex; flex-direction:column; gap:6px; min-width:0; font-size:12.5px; font-weight:500; color:var(--slate-400,#9db8b3); }
.vkv-f small{ font-weight:400; opacity:.8; }
.vkv-f.grow{ flex:1 1 180px; }
.vkv-f input,.vkv-f select,.vkv-f textarea,.vkv-search{
  width:100%; min-width:0; padding:11px 13px; border-radius:12px; font:inherit; font-size:15px; color:var(--foam,#eef3ea);
  background:rgba(0,0,0,.22); border:1px solid var(--line,#0b4046); outline:none; transition:border-color .15s, box-shadow .15s;
}
.vkv-tool textarea{
  width:100%; min-width:0; padding:11px 13px; border-radius:12px; font-size:13.5px; color:var(--foam,#eef3ea);
  background:rgba(0,0,0,.22); border:1px solid var(--line,#0b4046); outline:none; transition:border-color .15s, box-shadow .15s;
}
.vkv-tool textarea:focus{ border-color:var(--teal-400,#d8be84); box-shadow:0 0 0 3px rgba(var(--accent-rgb,216,190,132),.18); }
.vkv-tool textarea[readonly]{ background:rgba(0,0,0,.32); }
.vkv-f textarea,.vkv-tool textarea{ resize:vertical; line-height:1.5; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13.5px; }
.vkv-f input:focus,.vkv-f select:focus,.vkv-f textarea:focus,.vkv-search:focus{ border-color:var(--teal-400,#d8be84); box-shadow:0 0 0 3px rgba(var(--accent-rgb,216,190,132),.18); }
.vkv-f select option{ background:#062c35; color:#eef3ea; }
.vkv-f input[type=range]{ padding:0; height:36px; accent-color:var(--teal-400,#d8be84); background:none; border:0; box-shadow:none; }
.vkv-f input[type=color]{ padding:3px; height:46px; width:64px; cursor:pointer; }
.vkv-f input[type=date]{ color-scheme:dark; }

/* =================================================================== #detail */
.vkv-sum{ display:grid; gap:8px; margin:0 0 16px; padding:14px; border-radius:16px; background:rgba(var(--accent-rgb,216,190,132),.08); border:1px solid rgba(var(--accent-rgb,216,190,132),.22); }
.vkv-sum div{ display:flex; justify-content:space-between; gap:14px; align-items:baseline; }
.vkv-sum span{ font-size:12.5px; color:var(--slate-400,#9db8b3); flex:none; }
.vkv-sum b{ font-weight:600; font-size:15px; text-align:right; overflow-wrap:anywhere; }
.vkv-form{ display:flex; flex-direction:column; gap:12px; }
.vkv-row3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
@media (max-width:460px){ .vkv-row3{ grid-template-columns:1fr; } }
.vkv-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.vkv-chip{ padding:6px 11px; border-radius:999px; cursor:pointer; font:inherit; font-size:12.5px; color:var(--foam,#eef3ea); background:transparent; border:1px solid var(--line,#0b4046); }
.vkv-chip:hover{ border-color:var(--teal-400,#d8be84); }
.vkv-err{ margin:0; font-size:13px; color:var(--danger,#d9704a); }
.vkv-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* =================================================================== Utilities */
.vkv-utils .vkv-box{ max-width:920px; height:min(720px,100%); display:flex; flex-direction:column; padding:20px 20px 16px; overflow:hidden; }
.vkv-uhead{ display:flex; justify-content:space-between; align-items:flex-start; padding-right:44px; }
.vkv-uhead .vkv-h{ margin-bottom:4px; }
.vkv-search{ margin:2px 0 12px; }
.vkv-ubody{ flex:1; min-height:0; display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px; }
.vkv-nav{ display:flex; flex-direction:column; gap:2px; overflow-y:auto; padding-right:6px; }
.vkv-group{ margin:12px 10px 4px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-500,#7a9995); }
.vkv-group:first-child{ margin-top:0; }
.vkv-navbtn{ text-align:left; padding:10px 12px; border-radius:11px; border:0; cursor:pointer; font:inherit; font-size:14.5px; color:var(--slate-400,#9db8b3); background:none; }
.vkv-navbtn:hover{ color:var(--foam,#fff); background:rgba(255,255,255,.05); }
.vkv-navbtn.on{ color:var(--on-accent,#062028); background:linear-gradient(135deg,var(--teal-300,#ecdca0),var(--teal-400,#d8be84)); font-weight:600; }
.vkv-tool{ min-width:0; overflow-y:auto; padding:2px 4px 8px 2px; outline:none; }
.vkv-th{ margin:0 0 2px; font-size:19px; font-weight:700; }
.vkv-tbody{ display:flex; flex-direction:column; gap:12px; }
@media (max-width:700px){
  .vkv-utils{ padding:0; } .vkv-utils .vkv-box{ height:100%; max-width:none; border-radius:0; }
  .vkv-ubody{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:10px; }
  .vkv-nav{ flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:0 0 6px; gap:6px; scrollbar-width:thin; }
  .vkv-group{ display:none; } .vkv-navbtn{ white-space:nowrap; flex:none; border:1px solid var(--line,#0b4046); border-radius:999px; padding:8px 14px; }
}

.vkv-line{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.vkv-line > .vkv-f{ flex:1 1 120px; }
.vkv-acts{ gap:8px; }
.vkv-card{ display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:16px; background:rgba(0,0,0,.16); border:1px solid var(--line,#0b4046); }
.vkv-card h4{ margin:0; font-size:14px; font-weight:600; color:var(--teal-300,#ecdca0); }
.vkv-btn{ padding:10px 16px; border-radius:11px; cursor:pointer; font:inherit; font-size:14px; font-weight:600; border:1px solid var(--line,#0b4046); color:var(--foam,#eef3ea); background:transparent; transition:transform .12s, border-color .15s; }
.vkv-btn:hover{ border-color:var(--teal-400,#d8be84); }
.vkv-btn:active{ transform:scale(.97); }
.vkv-btn.primary{ border:0; color:var(--on-accent,#062028); background:linear-gradient(135deg,var(--teal-400,#d8be84),var(--teal-600,#a58c52)); }
.vkv-btn.ghost{ background:rgba(255,255,255,.04); }
.vkv-btns{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.vkv-btns .vkv-btn{ padding:7px 11px; font-size:13px; font-weight:500; }
.vkv-btnlabel{ flex:0 0 52px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-500,#7a9995); }

.vkv-out{ min-height:44px; padding:12px 14px; border-radius:12px; font-size:14.5px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; background:rgba(0,0,0,.25); border:1px solid var(--line,#0b4046); }
.vkv-out.bad{ color:var(--danger,#d9704a); border-color:rgba(217,112,74,.45); }
.vkv-result{ font-size:22px; font-weight:600; color:var(--teal-300,#ecdca0); }
.vkv-result.bad{ font-size:14.5px; font-weight:500; }
.vkv-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:16px; letter-spacing:.02em; word-break:break-all; }
.vkv-big input{ font-size:20px !important; padding:14px !important; }

.vkv-pad{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.vkv-key{ padding:12px 0; border-radius:11px; cursor:pointer; font:inherit; font-size:16px; font-weight:500; border:1px solid var(--line,#0b4046); color:var(--foam,#eef3ea); background:rgba(255,255,255,.04); }
.vkv-key:hover{ border-color:var(--teal-400,#d8be84); } .vkv-key:active{ transform:scale(.95); }
.vkv-hist{ display:flex; flex-direction:column; gap:4px; }
.vkv-histitem{ text-align:left; padding:8px 11px; border-radius:9px; border:0; cursor:pointer; font:inherit; font-size:13.5px; color:var(--slate-400,#9db8b3); background:rgba(255,255,255,.03); }
.vkv-histitem:hover{ color:var(--foam,#fff); background:rgba(255,255,255,.07); }

.vkv-table{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
.vkv-table div{ display:flex; flex-direction:column; padding:8px 11px; border-radius:10px; background:rgba(255,255,255,.03); font-size:12px; color:var(--slate-400,#9db8b3); }
.vkv-table b{ font-size:14px; font-weight:600; color:var(--foam,#eef3ea); overflow-wrap:anywhere; }
.vkv-stats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px; }
.vkv-stats div{ display:flex; flex-direction:column; align-items:center; padding:9px 6px; border-radius:11px; background:rgba(255,255,255,.04); }
.vkv-stats b{ font-size:17px; font-weight:700; color:var(--teal-300,#ecdca0); } .vkv-stats span{ font-size:11px; color:var(--slate-500,#7a9995); }
.vkv-checks{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.vkv-check{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; cursor:pointer; color:var(--foam,#eef3ea); }
.vkv-check input{ accent-color:var(--teal-400,#d8be84); width:16px; height:16px; }
.vkv-hashrow{ display:grid; grid-template-columns:70px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border-radius:11px; background:rgba(0,0,0,.2); border:1px solid var(--line,#0b4046); }
.vkv-hashrow b{ font-size:12px; color:var(--teal-300,#ecdca0); } .vkv-hashrow code{ font-size:12px; word-break:break-all; color:var(--foam,#eef3ea); }
.vkv-hashrow .vkv-btn{ padding:6px 10px; font-size:12px; }
.vkv-hashes{ display:flex; flex-direction:column; gap:8px; }
.vkv-swatch{ height:84px; border-radius:16px; border:1px solid rgba(255,255,255,.18); transition:background .15s; }
.vkv-clock{ font-size:44px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; text-align:center; padding:6px 0; color:var(--foam,#eef3ea); }
.vkv-clock.done{ color:var(--teal-400,#d8be84); animation:vkvBlink 1s ease-in-out infinite; }
@keyframes vkvBlink{ 50%{ opacity:.45; } }
.vkv-laps{ margin:0; padding:0 0 0 22px; max-height:160px; overflow:auto; font-size:13.5px; color:var(--slate-400,#9db8b3); font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:reduce){ .vkv-back,.vkv-box,.vkv-clock.done{ animation:none; } }

/* Get Started: the founder's name in small type beside the big brand name */
.gs-top{ flex-wrap:wrap; }
.gs-by{ font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--slate-400,#9db8b3); opacity:.9; align-self:flex-end; padding-bottom:4px; }
@media (max-width:420px){ .gs-by{ flex-basis:100%; padding:0 0 0 56px; margin-top:-6px; } }

/* =================================================================== @intro: the Get Started screen again, over the chat */
.vkv-intro{ position:fixed; inset:0; z-index:9000; overflow-y:auto; background:linear-gradient(180deg,var(--bg-a,#0b1517),var(--bg-b,#0b1517)); animation:stage-in .35s ease both; }
.vkv-intro .gs{ min-height:100%; }
.vkv-intro .gs-foot b{ color:var(--teal-400); }

/* ---- Utilities: the Al Fikra navy and teal palette (taken from alfikra-site) ---- */
.vkv-utils{
  --teal-400:#2fd1b5; --teal-300:#57e0c8; --teal-600:#1b8e7a; --foam:#eaf3f3; --slate-400:#8ba0b6; --slate-500:#6c8299;
  --line:#123253; --on-accent:#0d2136; --accent-rgb:47,209,181; --danger:#e5827a;
}
.vkv-utils.vkv-back{ background:rgba(4,12,24,.7); }
.vkv-utils .vkv-box{ background:linear-gradient(180deg,#0b2340,#071527); border-color:#123253; box-shadow:0 40px 90px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(47,209,181,.06); }
.vkv-utils .vkv-f select option{ background:#0b2340; color:#eaf3f3; }
.vkv-utils .vkv-card{ background:rgba(7,21,39,.55); }
.vkv-utils .vkv-out{ background:rgba(4,12,24,.55); border-color:#123253; }
.vkv-utils .vkv-f input,.vkv-utils .vkv-f select,.vkv-utils .vkv-f textarea,.vkv-utils .vkv-search,.vkv-utils .vkv-tool textarea{ background:rgba(4,12,24,.5); border-color:#123253; color:#eaf3f3; }
.vkv-utils .vkv-box .vkv-eyebrow{ color:#57e0c8; }
.vkv-utils .vkv-box .vkv-out{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13.5px; }
.vkv-utils .vkv-f input:focus,.vkv-utils .vkv-f select:focus,.vkv-utils .vkv-f textarea:focus,.vkv-utils .vkv-search:focus,.vkv-utils .vkv-tool textarea:focus{ border-color:#2fd1b5; box-shadow:0 0 0 3px rgba(47,209,181,.18); }

/* Utilities: a plain dim instead of a blurred backdrop (blur is the costliest thing on phones) */
.vkv-utils.vkv-back{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(4,12,24,.82); }