/* Retro Stronghold — keep chrome. Load after page CSS so tokens and radius win. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700&family=Outfit:wght@500;600;700&display=swap");

:root {
  --bg: #070812;
  --surface: #101428;
  --elevated: #181e38;
  --panel-keep: #222a4a;
  --mortar: #3d4a78;
  --ink: #f2f4ff;
  --parchment: #b8c0e0;
  --muted: #7c86b0;
  --gold: #ffcc33;
  --gold-2: #ffe066;
  --blood: #e23b4a;
  --blood-2: #ff5a68;
  --moss: #2ea86a;
  --moss-2: #5ee89a;
  --torch: #ff8a1f;
  --shade: #05060c;
  --cart-crimson-a: #5a1420; --cart-crimson-b: #1a0810;
  --cart-forest-a: #14522a; --cart-forest-b: #07140c;
  --cart-navy-a: #1a2a6a; --cart-navy-b: #0a1028;
  --cart-gold-a: #6a4a10; --cart-gold-b: #181008;
  --cart-ember-a: #6a2410; --cart-ember-b: #160808;
  --cart-ink-a: #3a1a6a; --cart-ink-b: #100818;
  --cart-moss-a: #145a40; --cart-moss-b: #081410;
  --cart-slate-a: #2a3048; --cart-slate-b: #101018;

  --card: var(--elevated);
  --border: var(--mortar);
  --line: var(--mortar);
  --line-2: var(--mortar);
  --red: var(--blood);
  --red-lt: var(--blood-2);
  --red-ink: var(--blood-2);
  --blue: var(--gold);
  --blue-ink: var(--gold-2);
  --green: var(--moss);
  --teal: var(--moss-2);
  --white: var(--ink);
  --text: var(--parchment);
  --paper: var(--bg);
  --paper-2: var(--surface);
  --panel: var(--elevated);
  --panel-2: var(--surface);
  --panel-3: var(--panel-keep);
  --faint: var(--muted);
  --stripe-w: var(--gold);

  --sans: "IBM Plex Sans", "Trebuchet MS", "Segoe UI", sans-serif;
  --display: "Outfit", "Trebuchet MS", "Segoe UI", sans-serif;
  --body: var(--sans);
  --pixel: var(--display);
  --mono: var(--sans);

  --r: 0;
  --rad: 0;
  --rad-sm: 0;
  --rad-lg: 0;
  --sb: env(safe-area-inset-bottom, 0px);
  --maxw: 1240px;
  --shadow: 4px 4px 0 var(--shade);
  --shadow-sm: 3px 3px 0 var(--shade);
}

[data-theme="light"] {
  --bg: #070812;
  --surface: #101428;
  --elevated: #181e38;
  --panel-keep: #222a4a;
  --mortar: #3d4a78;
  --ink: #f2f4ff;
  --parchment: #b8c0e0;
  --muted: #7c86b0;
  --white: #f2f4ff;
  --text: #b8c0e0;
  --paper: #070812;
  --paper-2: #101428;
  --panel: #181e38;
  --panel-2: #101428;
  --panel-3: #222a4a;
  --line: #3d4a78;
  --card: #181e38;
  --border: #3d4a78;
}

*, *::before, *::after { border-radius: 0 !important; }
html, body {
  background-color: var(--bg) !important;
  color: var(--parchment);
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
body {
  background-image:
    radial-gradient(ellipse 90% 42% at 50% 0%, rgba(255,138,31,0.16), transparent 62%),
    repeating-linear-gradient(0deg, #0c1022 0 14px, #0a0e1c 14px 16px),
    repeating-linear-gradient(90deg, #0c1022 0 14px, #0a0e1c 14px 16px) !important;
  background-size: auto, 16px 16px, 16px 16px !important;
}
h1, h2, h3, h4, .display, .lk-title, .lk-sec, .lk-item-title, .grid-title, .item-title {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: 0;
  font-weight: 700;
  text-wrap: balance;
  text-transform: none;
}
p, .lede, body, .lk-sum-lede, .lk-sum-sec p { font-family: var(--sans); color: var(--parchment); line-height: 1.5; text-wrap: pretty; }
.num, .lk-stat-val, .lk-item-val, .lk-cat-n, .lk-bar-val { font-family: var(--display); font-variant-numeric: tabular-nums; }

.kicker, .eyebrow {
  font-family: var(--display) !important;
  font-weight: 600;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--gold) !important;
}

.keep-merlons {
  height: 16px;
  width: 100%;
  flex-shrink: 0;
  background: repeating-linear-gradient(90deg, var(--gold) 0 12px, transparent 12px 20px);
  box-shadow: 0 4px 0 var(--gold);
  position: relative;
  z-index: 301;
}
.mh .stripe, .stripe, #app-header::before, #guest-header::before, .lk-head::before { display: none !important; }

.mh {
  background: var(--surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 2px solid var(--gold) !important;
  position: sticky;
  top: 0;
  z-index: 300;
}
.mh-bar { height: 56px; gap: 16px; }
.mh-mark {
  border-right: 2px solid var(--mortar) !important;
  gap: 10px;
}
.mh-mark .wm, .mh-mark .logo-main {
  font-family: var(--display) !important;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink);
  line-height: 1.15;
}
.keep-crest, .mh-mark-icon, #mhCrest {
  width: 28px; height: 28px; object-fit: contain; display: block; flex-shrink: 0;
  image-rendering: auto;
  border: 2px solid var(--gold);
  background: var(--surface);
}
.mh-nav { height: 56px; flex-wrap: nowrap; overflow: hidden; }
.mh-link, .nav-tab, .lk-tab {
  font-family: var(--display) !important;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  color: var(--muted);
}
.mh-link::after, .nav-tab::after { background: var(--gold) !important; height: 2px !important; }
.mh-link.active, .nav-tab.active, .lk-tab.active { color: var(--ink); }
.lk-tab { border-bottom: 2px solid transparent; }
.lk-tab.active { border-bottom-color: var(--gold) !important; color: var(--ink); }
.lk-tabs { flex-wrap: nowrap; overflow-x: auto; }

.btn, .btn-login, button.btn {
  font-family: var(--display) !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-width: 2px !important;
  box-shadow: 3px 3px 0 var(--shade);
  min-height: 44px;
}
.btn:active, .btn.pressed { box-shadow: none; transform: translate(1px, 1px); }
.btn, .btn--primary, .btn.full, #auth-btn {
  background: var(--blood);
  border-color: var(--shade) !important;
  color: var(--ink) !important;
}
.btn:hover, .btn--primary:hover { background: var(--blood-2); color: var(--ink) !important; }
.btn.blue, .btn--ghost.gold, .btn.gold {
  background: transparent;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  box-shadow: 3px 3px 0 var(--shade);
}
.btn.blue:hover, .btn.gold:hover { background: var(--gold); color: var(--shade) !important; }
.btn.muted, .btn--ghost {
  background: transparent;
  border-color: var(--mortar) !important;
  color: var(--parchment) !important;
}
.btn.muted:hover, .btn--ghost:hover { border-color: var(--gold) !important; color: var(--ink) !important; background: transparent; }

.inp, .input, .select, select.inp, textarea.inp, input, textarea, select {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 2px solid var(--mortar) !important;
  font-family: var(--sans) !important;
}
.inp:focus, .input:focus, .select:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--gold) !important;
  box-shadow: none !important;
  outline: none;
}
label { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--sans); color: var(--muted); }

.card, .panel, .lk-block, .lk-item, .auth-card, .modal-box, .lk-panel, .cfg-panel,
.lk-watch-mail, .ghost-cta-box, #tfa-prompt, .acct-menu, .hma-friends-menu, .lk-more-menu {
  background: var(--elevated) !important;
  border: 2px solid var(--mortar) !important;
  box-shadow: 4px 4px 0 var(--shade);
}
.lk-item:hover, .card:hover { border-color: var(--gold) !important; }

.lk-stat {
  background: var(--elevated) !important;
  border: 2px solid var(--mortar) !important;
  border-top: 4px solid var(--gold) !important;
  position: relative;
  box-shadow: 4px 4px 0 var(--shade);
}
.lk-stat::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 6px; height: 6px;
  background: var(--torch);
}
.lk-stat-lbl { font-family: var(--display) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--muted); font-weight: 600; font-size: 12px !important; }
.lk-stat-val { color: var(--ink); }

.lk-cat { border: 2px solid var(--mortar) !important; background: var(--elevated) !important; box-shadow: 4px 4px 0 var(--shade); }
.lk-cat.active { border-color: var(--gold) !important; }
.lk-cat-l { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--display); }

.lk-head { background: transparent !important; border-bottom: none !important; padding-top: 18px; }
.lk-title { font-size: clamp(1.5rem, 4vw, 2.2rem); }

/* Cartridge tiles — keep cover photos, soft keep wash, pop-out stays */
.lk-grid { gap: 28px 16px; overflow: visible; }
.lk-item {
  overflow: visible !important;
  background: var(--elevated);
  padding: 10px 10px 12px;
}
.lk-art-stage { padding: 28px 8px 6px; overflow: visible; }
.lk-art-stage::before, .lk-art-stage::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 10px; height: 3px;
  background: var(--gold);
  z-index: 4;
}
.lk-art-stage::before { left: 14px; }
.lk-art-stage::after { right: 14px; }
.lk-box {
  border-radius: 0 !important;
  overflow: hidden;
  border: 2px solid var(--shade);
  box-shadow: 4px 4px 0 var(--shade);
  background: linear-gradient(180deg, var(--cart-navy-a), var(--cart-navy-b));
  position: relative;
}
.lk-box img, .lk-box-img, .lk-sum-cover img {
  filter: saturate(0.9) contrast(1.05) brightness(0.96);
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lk-box::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,30,56,0.10), rgba(7,8,18,0.28));
  pointer-events: none;
  mix-blend-mode: multiply;
}
.lk-media { filter: drop-shadow(4px 4px 0 var(--shade)); }
.lk-cart-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  line-height: 1.05;
  text-shadow: 1px 1px 0 var(--shade);
  max-width: 80%;
  overflow: hidden;
}
.lk-kind {
  font-family: var(--display);
  font-size: 11px;
  color: var(--muted);
  text-transform: none;
  margin-top: 2px;
}

.lk-badge, .lk-badge-chip {
  border: 2px solid var(--mortar) !important;
  background: var(--elevated) !important;
}
.lk-badge-ring, .badge-pip-ring, .pub-badge-ring {
  border-radius: 0 !important;
  border: 2px solid var(--gold) !important;
  background: var(--surface) !important;
  width: 48px; height: 48px;
}
.lk-badge.locked .lk-badge-ring, .lk-badge.locked .badge-pip-ring {
  border-style: dashed !important;
  border-color: var(--mortar) !important;
  filter: grayscale(1);
  opacity: 0.55;
}
.lk-badge-ring img, .badge-pip-art, .pub-badge-art, .lk-badge-ic img {
  image-rendering: pixelated;
  width: 32px; height: 32px; object-fit: contain;
}
.keep-portrait, .avatar-ring img, .pfp-opt img, .hma-friend-av img {
  image-rendering: pixelated;
  border: 2px solid var(--gold);
  background: var(--surface);
  object-fit: cover;
}
.keep-portrait { width: 96px; height: 96px; display: block; }
.keep-portrait.sm { width: 48px; height: 48px; }

.toast, .ok-box, .err-box, .warn-box, .info-box, .ok, .err, .warn, #badge-toast, #badge-popup {
  background: var(--surface) !important;
  border: 2px solid var(--gold) !important;
  box-shadow: 4px 4px 0 var(--shade);
  font-family: var(--sans) !important;
  border-radius: 0 !important;
}
.err-box, .err { border-color: var(--blood) !important; color: var(--blood-2); }
.ok-box, .ok { border-color: var(--moss) !important; color: var(--moss-2); }

.lk-bar-fill { background: var(--gold) !important; border-radius: 0 !important; }
.lk-bar-track { background: var(--panel-keep) !important; border-radius: 0 !important; }

.voice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.voice-card {
  border: 2px solid var(--mortar);
  background: var(--surface);
  padding: 16px;
  cursor: pointer;
  text-align: left;
  box-shadow: 4px 4px 0 var(--shade);
  color: var(--parchment);
}
.voice-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.voice-card p { margin: 0; font-size: 0.85rem; color: var(--muted); }
.voice-card.on { border-color: var(--gold); }
.portrait-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 600px) { .portrait-grid { grid-template-columns: repeat(3, 1fr); } .voice-cards { grid-template-columns: 1fr; } }
.portrait-opt { border: 2px solid var(--mortar); padding: 0; background: var(--surface); cursor: pointer; }
.portrait-opt.on { border-color: var(--gold); }
.portrait-opt img { width: 100%; aspect-ratio: 1; display: block; image-rendering: pixelated; }

#app-header, #guest-header {
  background: var(--surface) !important;
  border-bottom: 2px solid var(--gold) !important;
  backdrop-filter: none !important;
}
.mh-search input { border-radius: 0 !important; width: 180px; }

/* ── Right drawer ── */
html.keep-drawer-open, html.keep-drawer-open body { overflow: hidden !important; }
.keep-drawer-backdrop {
  position: fixed; inset: 0; z-index: 420;
  background: rgba(5,6,12,0.72);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.keep-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.keep-drawer, .mobile-menu#navMobileMenu {
  position: fixed !important;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 88vw);
  max-width: 320px;
  z-index: 421;
  display: flex !important;
  flex-direction: column;
  background: var(--surface) !important;
  border: none !important;
  border-left: 2px solid var(--gold) !important;
  box-shadow: -8px 0 0 var(--shade);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
  overflow: hidden;
  pointer-events: none;
  max-height: none !important;
}
.keep-drawer.open, .mobile-menu#navMobileMenu.open {
  transform: translateX(0);
  pointer-events: auto;
}
.keep-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 14px 12px;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
  border-bottom: 2px solid var(--mortar);
  flex-shrink: 0;
}
.keep-drawer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; color: var(--ink); }
.keep-drawer-close {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--elevated); border: 2px solid var(--mortar); color: var(--ink);
  cursor: pointer; box-shadow: 3px 3px 0 var(--shade);
}
.keep-drawer-close:active { box-shadow: none; transform: translate(1px,1px); }
.keep-drawer-user {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 2px solid var(--mortar);
  color: var(--ink); font-family: var(--display); font-weight: 600;
}
.keep-drawer-user[hidden] { display: none !important; }
.keep-drawer-av {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--gold); color: var(--shade); font-weight: 700;
}
.keep-drawer-nav { flex: 1; overflow-y: auto; padding: 8px 0 12px; -webkit-overflow-scrolling: touch; }
.keep-drawer-label {
  margin: 14px 16px 6px; font-family: var(--display); font-weight: 600;
  font-size: 12px; color: var(--gold); letter-spacing: 0.04em;
}
.keep-drawer-nav a, .keep-drawer-voice {
  display: flex; align-items: center;
  width: 100%; min-height: 48px; padding: 0 16px;
  color: var(--parchment); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  background: none; border: none; border-left: 3px solid transparent;
  text-align: left; cursor: pointer;
  text-transform: none !important; letter-spacing: 0 !important;
}
.keep-drawer-nav a:active, .keep-drawer-voice:active { background: var(--elevated); }
.keep-drawer-nav a.active { color: var(--ink); border-left-color: var(--gold); background: var(--elevated); }
.keep-drawer-foot {
  flex-shrink: 0; padding: 12px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--mortar);
}
.keep-drawer-out { display: block; text-align: center; color: var(--blood-2); font-family: var(--display); font-weight: 600; min-height: 44px; line-height: 44px; text-decoration: none; }

/* Header: hamburger below lg; never wrap the bar */
@media (max-width: 1023px) {
  .mh-nav { display: none !important; }
  .mh-burger { display: inline-flex !important; min-width: 44px; min-height: 44px; }
  .mh-bar { flex-wrap: nowrap !important; height: 56px !important; min-height: 56px !important; padding: 0 12px !important; row-gap: 0 !important; }
  .mh-search, #voiceToggle, #navProfileWrap { display: none !important; }
  .mh-right { flex-wrap: nowrap !important; gap: 8px !important; flex: 0 0 auto !important; }
  .btn-login, #mhLoginBtn { min-height: 40px; padding: 0 12px; font-size: 0.85rem; }
  .hide-sm { display: none !important; }
}
@media (min-width: 1024px) {
  .mh-burger { display: none !important; }
  .keep-drawer, .mobile-menu#navMobileMenu, .keep-drawer-backdrop { display: none !important; }
}
@media (max-width: 1279px) {
  .mh-search { display: none !important; }
}
@media (min-width: 1280px) {
  .mh-search { display: block !important; }
}

.keep-empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.keep-empty .btn { margin-top: 12px; }

#scanlines { display: none !important; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 0; }
.badge, .lk-cond { text-transform: none !important; letter-spacing: 0 !important; border-radius: 0 !important; }
.lk-cond--cib, .lk-cond--sealed, .lk-cond--mint, .lk-cond--nearmint { color: var(--moss); border-color: var(--moss); }

.admin-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0; border-bottom: 2px solid var(--mortar); margin: 0 0 18px; }
.admin-tabs a, .admin-tabs button {
  padding: 12px 14px; color: var(--muted); background: none; border: none;
  border-bottom: 2px solid transparent; font-family: var(--display); font-weight: 600;
  white-space: nowrap; min-height: 44px; cursor: pointer;
}
.admin-tabs a.on, .admin-tabs button.on { color: var(--ink); border-bottom-color: var(--gold); }
.rule-tree { border: 2px solid var(--mortar); background: var(--surface); padding: 12px; }
.rule-node { margin: 8px 0; padding: 8px; border: 2px solid var(--mortar); background: var(--elevated); }
.rule-node.group { border-color: var(--gold); }
.cover-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.cover-admin-card { border: 2px solid var(--mortar); background: var(--elevated); padding: 8px; }
.cover-admin-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: saturate(0.9) contrast(1.05); }
.cover-admin-card.on { border-color: var(--gold); }

.cart-preview {
  width: 160px; aspect-ratio: 3/4; position: relative; overflow: visible;
  background: linear-gradient(180deg, var(--cart-navy-a), var(--cart-navy-b));
  border: 2px solid var(--shade); box-shadow: 4px 4px 0 var(--shade);
}
.cart-preview .pop {
  position: absolute; left: 16%; right: 16%; bottom: 18%; height: 70%;
  transform: translateY(-28%);
}
.cart-preview .pop img { width: 100%; height: 100%; object-fit: contain; }

/* ── Mobile layout ── */
html, body { overflow-x: hidden; max-width: 100%; }
#guest-ham-menu { display: none !important; }

@media (max-width: 1023px) {
  #app-header, #guest-header { display: none !important; }
  .lk-head .between { flex-direction: column; align-items: stretch; gap: 12px; }
  .lk-head .between > div:last-child { justify-content: flex-start; flex-wrap: wrap; }
  .lk-title { font-size: clamp(1.35rem, 7vw, 1.9rem); }
  .lede { font-size: 0.95rem !important; max-width: none; }
  .lk-content.wrap, .wrap { padding-left: 14px !important; padding-right: 14px !important; }
  .lk-content.wrap { padding-bottom: 32px !important; }
  .lk-tabs {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    margin-top: 12px;
    scrollbar-width: none;
  }
  .lk-tabs::-webkit-scrollbar { display: none; }
  .lk-tab { min-height: 44px; padding: 10px 12px; flex-shrink: 0; }
  .lk-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .lk-dash-grid { grid-template-columns: 1fr !important; }
  .lk-cats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .lk-cat-v { display: none; }
  .lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 10px !important; }
  .lk-badges { grid-template-columns: 1fr 1fr !important; }
  .lk-bar-row { grid-template-columns: 1fr 2fr auto; gap: 8px; }
  .field-row, .grid-2 { grid-template-columns: 1fr !important; }
  .cat-controls { flex-direction: column; align-items: stretch; }
  .cat-search { min-width: 0; width: 100%; }
  .cat-sort { width: 100%; }
  .cat-select, .select.cat-select { width: 100%; }
  /* Enlist / item view: centered sheet, clear of notch and home bar */
  .lk-overlay {
    z-index: 500;
    background: rgba(5, 6, 12, 0.72);
  }
  .lk-panel, .lk-panel.lk-summary-panel {
    z-index: 501;
    top: 50% !important;
    left: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 440px !important;
    height: auto !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px) !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    transform: translateY(-46%) scale(0.98);
    opacity: 0;
    pointer-events: none;
    border: 2px solid var(--mortar) !important;
    border-top: 4px solid var(--gold) !important;
    box-shadow: 4px 4px 0 var(--shade);
  }
  .lk-panel.open {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    pointer-events: auto;
  }
  .lk-panel-head {
    flex-shrink: 0;
    gap: 10px;
    padding: 12px 12px 12px 16px !important;
    position: relative !important;
    top: auto !important;
  }
  .lk-panel-head h3 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.1rem !important;
  }
  .lk-panel-head .btn, .lk-panel-head .btn--icon {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
  }
  .lk-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px max(20px, env(safe-area-inset-bottom, 0px)) !important;
  }
  #login-modal-overlay, #tfa-prompt-overlay {
    padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
    align-items: center;
  }
  #login-modal, #tfa-prompt { max-width: 100%; max-height: 82dvh; overflow-y: auto; }
  .modal-overlay { align-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px)); }
  .modal-box { max-width: 100% !important; max-height: 82dvh; }
  .cover-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-tabs { margin-left: -14px; margin-right: -14px; padding: 0 14px; }
  .hma-friends-menu {
    position: fixed !important;
    top: auto !important; right: 0 !important; left: 0 !important;
    bottom: 0; width: 100% !important; max-width: 100% !important;
    max-height: 70vh; border-left: none !important; border-right: none !important;
  }
  .lk-watch-mail { flex-direction: column; align-items: stretch; }
  .form-footer { flex-wrap: wrap; }
  .form-footer .btn { flex: 1 1 auto; min-width: 140px; }
  .mh-mark { padding-right: 10px !important; gap: 8px !important; }
  .mh-mark .wm { font-size: 0.82rem !important; }
  .keep-crest, .mh-mark-icon, #mhCrest { width: 24px; height: 24px; }
  .btn--icon { min-width: 44px; }
  .lk-more-menu { right: 0; left: auto; min-width: 200px; }
  .lk-add-type { flex-wrap: wrap; }
  .lk-upc-row { flex-direction: column; }
  .lk-upc-row .input, .lk-upc-row .btn { width: 100%; }
}

@media (max-width: 480px) {
  #mhLoginBtn { display: none !important; }
  .lk-stats { gap: 8px !important; }
  .lk-stat { padding: 12px; }
  .lk-stat-val { font-size: clamp(1.15rem, 6vw, 1.6rem); }
  .lk-cat { padding: 12px; gap: 10px; }
  .lk-grid { gap: 14px 8px !important; }
  .portrait-grid { grid-template-columns: repeat(3, 1fr); }
  .voice-cards { grid-template-columns: 1fr; }
  .wrap.narrow { padding: 0 14px; }
}

@media (max-width: 390px) {
  .mh-bar { padding: 0 10px !important; gap: 8px !important; }
  .lk-content.wrap, .wrap { padding-left: 12px !important; padding-right: 12px !important; }
  .lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .btn, .mh-burger, .lk-tab { min-height: 44px; }
  #mhLoginBtn { padding: 0 10px; }
}