/* Vordenk — one look for every menu and popup: the Translate dialog is the reference
   (28px card, soft glow, big pill rows, outlined fields). Colours come from the tokens, so every mode and theme follows. */
.camera-menu, .composer-menu, .style-menu, .download-menu, .source-pop, .mode-bar.mode-bar-pop{
  background:var(--navy-900); border:1px solid var(--navy-700); border-radius:28px;
  box-shadow:0 0 70px -22px rgba(var(--glow-rgb,216,190,132),.35), 0 30px 60px -30px rgba(0,0,0,.7);
}
.camera-menu:not([hidden]), .style-menu:not([hidden]), .download-menu:not([hidden]), .source-pop:not([hidden]){ display:flex; flex-direction:column; padding:12px; gap:8px; }
.composer-menu{ padding:16px; gap:10px; }

/* rows: big rounded pills */
.camera-menu-item, .download-item, .source-opt{
  display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:12px 16px; margin:0;
  border-radius:20px; background:var(--navy-800); border:1px solid var(--navy-700); color:var(--foam); font-size:15.5px;
}
.style-option{ width:100%; min-height:46px; padding:9px 16px; margin:0; border-radius:20px; background:var(--navy-800); border:1px solid var(--navy-700); color:var(--foam); font-size:14.5px; }
.style-menu{ max-height:min(310px, 46vh); overflow-y:auto; }
.camera-menu-item:hover, .style-option:hover, .download-item:hover, .source-opt:hover{ border-color:var(--navy-600); background:var(--navy-800); }
.style-option.highlighted, .style-option.active, .source-opt[aria-checked="true"], .download-item:focus-visible{
  border-color:var(--teal-400); background:linear-gradient(135deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.06)); color:var(--foam);
}
.style-option .style-hint, .style-option small, .download-item .ext{ margin-inline-start:auto; color:var(--slate-400); font-size:13px; }

/* chips and fields inside the + menu: every chip the same size and shape */
.composer-menu .vk-chip{
  border-radius:18px; padding:9px 14px; min-height:38px; font-size:14.5px; background:var(--navy-800); border:1px solid var(--navy-700); color:var(--foam);
}
.composer-menu .vk-chip:hover{ border-color:var(--navy-600); }
.composer-menu :is(.vk-tools,.vk-menu-section,.vk-chips){ display:flex; flex-wrap:wrap; gap:8px; }
.composer-menu select, .composer-menu input[type="text"], .composer-menu input[type="search"], .song-search-row input{
  border-radius:18px; padding:12px 16px; font-size:16px; background:var(--navy-900); border:1px solid var(--navy-600); color:var(--foam);
}
.composer-menu select:focus, .composer-menu input:focus, .song-search-row input:focus{ border-color:var(--teal-400); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14); outline:none; }

/* the Options popup lists */
.mode-bar.mode-bar-pop{ padding:12px; }
.mode-bar.mode-bar-pop :is(.mode-opt, .mode-pro-opt, .mode-bar-item){ border-radius:20px; }

/* drawers / chats search */
.chats-search, .search-field{ border-radius:20px; }
.chat-history-item{ border-radius:20px; }

/* ---------- eye comfort button, beside Help ---------- */
.header-eye .ico{ width:19px; height:19px; }
.chat-header-brand-row .header-eye{ position:relative; }
.header-eye.on{ color:var(--teal-300); }
.header-eye[data-level]:not([data-level="0"])::after{
  content:attr(data-level); position:absolute; right:2px; bottom:2px; min-width:12px; height:12px; padding:0 2px; border-radius:6px;
  font:700 9px/12px system-ui,sans-serif; text-align:center; background:var(--teal-400); color:var(--on-accent,#062028);
}
#eye-shade{ position:fixed; inset:0; pointer-events:none; z-index:2147483000; background:var(--eye-tint, transparent); mix-blend-mode:multiply; transition:background .35s ease; }
html[data-eye="1"]{ --eye-tint:rgba(255,226,170,.20); }
html[data-eye="2"]{ --eye-tint:rgba(255,200,120,.34); }
html[data-eye="3"]{ --eye-tint:rgba(255,170,80,.48); }
html[data-eye="0"], html:not([data-eye]){ --eye-tint:transparent; }
@media print{ #eye-shade{ display:none; } }