/* ============================================================
   Dhliz v2 — global stylesheet for the modernized site
   Light theme + dark header/footer. Replaces legacy common-new.css.
   ============================================================ */

:root {
    --dh2-bg:#f6f6fa; --dh2-bg-2:#fff;
    --dh2-surface:#fff; --dh2-surface-2:#f4f4f8;
    --dh2-border:rgba(15,18,38,0.10); --dh2-shadow:rgba(15,18,38,0.08);
    --dh2-text:#1a1a2e; --dh2-muted:#555570; --dh2-faint:#8888a0;
    --dh2-gold:#c98a1a; --dh2-gold-2:#b87715; --dh2-gold-bright:#f5c451;
    --dh2-accent:#7a4cf0; --dh2-accent-2:#d83388;
    --dh2-good:#15803d; --dh2-bad:#dc2626;
    --dh2-chrome-bg:rgba(11,11,20,0.92); --dh2-chrome-bg-solid:#0b0b14;
    --dh2-chrome-text:#f4f4f7; --dh2-chrome-muted:#c8c8d6; --dh2-chrome-border:rgba(255,255,255,0.10);
  }

/* ----------- Page shell + light theme background ----------- */
html, body {
  background: var(--dh2-bg);
  color: var(--dh2-text);
  font-family: 'Cairo','Tajawal','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(1400px 700px at 80% -10%,rgba(122,76,240,0.06),transparent 60%),radial-gradient(1100px 600px at 10% 5%,rgba(216,51,136,0.05),transparent 60%),linear-gradient(180deg,#f7f7fb,#fff);background-attachment:fixed;padding-top:68px}
body > main, body > .dh2-main { flex: 1 0 auto; }
body > footer, body > .dh2-footer { flex-shrink: 0; }

a { color: var(--dh2-accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--dh2-accent-2); }
hr { border-color: var(--dh2-border); }

/* Default text color for content */
body, body p, body span, body div, body li, body td, body th, body label,
body h1, body h2, body h3, body h4, body h5, body h6 { color: var(--dh2-text); }
body small, body .small { color: var(--dh2-muted); }

/* ============ Modern navbar (DARK chrome) ============ */
.dh2-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  background: var(--dh2-chrome-bg);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--dh2-chrome-border);
  color: var(--dh2-chrome-text);
}
.dh2-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  max-width: 1400px; margin: 0 auto;
  padding: 6px 22px; min-height: 56px;
}
.dh2-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 900; font-size: 20px; text-decoration: none; }
.dh2-brand img { height: 44px; width: auto; filter: drop-shadow(0 0 12px rgba(245,196,81,0.30)); }
.dh2-brand:hover { color: var(--dh2-gold-bright); }
.dh2-links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.dh2-link {
  position: relative; padding: 8px 14px; border-radius: 999px;
  color: var(--dh2-chrome-text); font-weight: 600; font-size: 15px;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
  text-decoration: none;
}
.dh2-link:hover { color: #fff; background: rgba(255,255,255,0.10); }
.dh2-link.active {
  background: linear-gradient(135deg, rgba(122,76,240,0.95), rgba(216,51,136,0.95));
  color: #fff; box-shadow: 0 4px 16px rgba(122,76,240,0.45);
}
.dh2-link.active:hover { color: #fff; }
.dh2-link-with-caret { display: inline-flex; align-items: center; gap: 6px; }
.dh2-caret { width: 0; height: 0; border-top: 5px solid currentColor; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .7; }
/* Caret follows the chrome (navbar) text colour in all states so it stays visible on the dark navbar and white when the item is highlighted/active. */
.dh2-link-with-caret .dh2-caret { border-top-color: var(--dh2-chrome-text); }
.dh2-link-with-caret:hover .dh2-caret,
.dh2-link-with-caret.active .dh2-caret,
.dh2-link-with-caret[aria-expanded="true"] .dh2-caret { border-top-color: #fff; opacity: 1; }
.dh2-actions { display: flex; align-items: center; gap: 8px; }
.dh2-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08); color: var(--dh2-chrome-text);
  transition: all .2s ease; text-decoration: none;
}
.dh2-btn:hover { background: rgba(255,255,255,0.16); color: #fff; border-color: var(--dh2-gold-bright); }
.dh2-btn-primary { background: linear-gradient(135deg, var(--dh2-accent), var(--dh2-accent-2)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(122,76,240,0.35); }
.dh2-btn-primary:hover { color: #fff; box-shadow: 0 10px 22px rgba(122,76,240,0.55); border-color: transparent; }
.dh2-btn-gold { background: linear-gradient(135deg, #f5c451, #d99a25); border-color: transparent; color: #000; }
.dh2-btn-gold:hover { color: #000; background: linear-gradient(135deg, #ffe39a, #f0b540); border-color: transparent; }
.dh2-btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.20); }
.dh2-user-dropdown .dropdown-menu, .dh2-meme-dropdown .dropdown-menu {
  background: #fff; backdrop-filter: blur(12px);
  border: 1px solid var(--dh2-border);
  border-radius: 14px; padding: 6px; margin-top: 8px !important; min-width: 200px;
  box-shadow: 0 10px 30px var(--dh2-shadow);
}
.dh2-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); color: #fff; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.dh2-toggle svg { width: 22px; height: 22px; }
@media (max-width: 991px) {
  /* Disable backdrop-filter on header so position:fixed children escape the containing-block trap */
  .dh2-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11,11,20,0.98); }
  .dh2-toggle {display:inline-flex}
  .dh2-nav {padding:8px 14px;gap:8px}
  .dh2-brand img {height:36px}
  .dh2-links {display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(11,11,20,0.97);padding:14px 18px 100px;flex-direction:column;align-items:stretch;gap:2px;overflow-y:auto;z-index:1000}
  .dh2-actions {display:none;position:fixed;left:0;right:0;bottom:0;top:auto;background:rgba(11,11,20,0.98);backdrop-filter:blur(20px);padding:12px 18px;flex-direction:row;align-items:stretch;gap:8px;z-index:1001;border-top:1px solid rgba(255,255,255,0.08)}
  body.dh2-menu-open .dh2-links { display: flex; }
  body.dh2-menu-open .dh2-actions {display:flex}
  body.dh2-menu-open { overflow: hidden; }
  [dir="rtl"] .dh2-link { text-align: right; padding: 12px 14px; }
  [dir="ltr"] .dh2-link, html:not([dir]) .dh2-link { text-align: left; padding: 12px 14px; }
  .dh2-link { border-radius: 10px; font-size: 15px; }
  .dh2-link:hover, .dh2-link.active { background: rgba(255,255,255,0.06); }
  .dh2-actions .dh2-btn { flex: 1; justify-content: center; padding: 10px 14px; font-size: 14px; }
  .dh2-meme-dropdown .dropdown-menu {
    position: static !important; display: block !important; float: none;
    background: transparent; border: 0; box-shadow: none;
    padding: 0 0 0 14px; margin: 0 0 4px;
    transform: none !important; inset: auto !important;
  }
  .dh2-meme-dropdown .dropdown-menu .dropdown-item {
    color: rgba(255,255,255,0.88); padding: 10px 14px; border-radius: 8px; background: transparent;
  }
  .dh2-meme-dropdown .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
  .dh2-link-with-caret .dh2-caret { display: none; }
  /* Tighter mobile padding for main content */
  .dh2-main { padding: 14px 12px 32px; }
  /* Mobile hero adjustments */
  /* [before-parity] .dh-hero mobile padding override removed (context-variant: home=28/16/36, person=22px). */
  .dh-list-hero { padding: 14px; }
}

@media (max-width: 560px) {
  .dh-hero-inner { grid-template-columns: 110px 1fr !important; gap: 10px !important; }
  .dh-hero-meta h1, .dh-hero-meta .h1 { font-size: 22px !important; line-height: 1.25 !important; }
  .dh-hero-rating-row { gap: 10px; }
  .dh-hero-badges { gap: 4px; }
  .dh-hero-badges .badge-set > div { padding: 4px 8px; font-size: 12px; }
  .dh-hero-badges img { width: 32px !important; height: 32px !important; }
  .dh-list-hero h1 { font-size: 20px !important; }
  .dh-list-hero p { font-size: 13.5px !important; line-height: 1.7; }
  .panel-heading .h1 { font-size: 18px !important; }
  .panel-body { padding: 12px !important; }
  /* Prevent horizontal scroll */
  body, html { overflow-x: hidden; max-width: 100vw; }
  img, video, iframe { max-width: 100%; height: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.dh2-main {max-width:1120px;margin:0 auto;padding:18px 22px 40px;width:100%}

/* ----------- Search bar (light card on light bg) ----------- */
.dh2-search-wrap { display: flex; justify-content: center; margin: 10px 0 26px; }
.dh2-search {
  display: flex; align-items: stretch;
  width: 100%; max-width: 720px;
  background: var(--dh2-surface); border: 1px solid var(--dh2-border);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 12px var(--dh2-shadow);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dh2-search:focus-within { border-color: var(--dh2-accent); box-shadow: 0 0 0 4px rgba(122,76,240,0.10); }
.dh2-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--dh2-text); padding: 14px 18px; font-size: 16px; font-family: inherit; }
.dh2-search input::placeholder { color: var(--dh2-faint); }
.dh2-search button { border: 0; background: linear-gradient(135deg, var(--dh2-accent), var(--dh2-accent-2)); color: #fff; padding: 0 22px; font-size: 18px; cursor: pointer; }

.dh2-quicknav { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; 
  padding: 0 6px;
}
.dh2-quicknav a { background: var(--dh2-surface); border: 1px solid var(--dh2-border); color: var(--dh2-text); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; 
  white-space: nowrap;
  display: inline-block;
  flex: 0 0 auto;
  line-height: 1.2;
}
.dh2-quicknav a:hover { background: var(--dh2-surface-2); color: var(--dh2-accent); }

/* ----------- Ad slot (light) ----------- */
.dh2-ad-wrap { max-width: 1400px; margin: 30px auto 0; padding: 0 22px; width: 100%; }
.dh2-ad { position: relative; background: var(--dh2-surface); border: 1px solid var(--dh2-border); border-radius: 16px; padding: 30px 16px 16px; overflow: hidden; box-shadow: 0 4px 12px var(--dh2-shadow); }
.dh2-ad-label { position: absolute; top: 8px; right: 14px; color: var(--dh2-faint); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
[dir="ltr"] .dh2-ad-label, html:not([dir]) .dh2-ad-label { right: auto; left: 14px; }
.dh2-ad-label:before { content: "•"; margin-left: 6px; color: var(--dh2-gold); }

/* ----------- Feedback box (light) ----------- */
.dh2-feedback { max-width: 1100px; margin: 28px auto 0; padding: 22px; background: var(--dh2-surface); border: 1px solid var(--dh2-border); border-radius: 18px; box-shadow: 0 4px 14px var(--dh2-shadow); }
.dh2-feedback label { color: var(--dh2-text); font-weight: 700; font-size: 16px; margin-bottom: 10px; display: block; }
.dh2-feedback textarea { width: 100%; background: #fff; border: 1px solid var(--dh2-border); border-radius: 12px; color: var(--dh2-text); padding: 12px 14px; font-size: 15px; resize: vertical; }
.dh2-feedback textarea:focus { outline: none; border-color: var(--dh2-accent); }

/* ----------- Footer (DARK chrome) ----------- */
.dh2-footer {margin-top:40px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(11,11,20,1) 18%),var(--dh2-chrome-bg-solid);color:var(--dh2-chrome-text);border-top:1px solid var(--dh2-chrome-border)}
.dh2-footer-inner {max-width:1400px;margin:0 auto;padding:50px 22px 24px}
.dh2-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 800px) { .dh2-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .dh2-footer-grid { grid-template-columns: 1fr; } }
.dh2-footer h5 { color: #fff; font-weight: 800; font-size: 14px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 1.2px; }
.dh2-footer-col a { display: block; color: var(--dh2-chrome-muted); padding: 4px 0; font-size: 14px; font-weight: 500; }
.dh2-footer-col a:hover { color: var(--dh2-gold-bright); }
.dh2-footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 900; font-size: 18px; margin-bottom: 10px; }
.dh2-footer-brand img { height: 40px; }
.dh2-footer-about { color: var(--dh2-chrome-muted); font-size: 14px; line-height: 1.7; margin: 0; }
.dh2-footer-bottom { border-top: 1px solid var(--dh2-chrome-border); margin-top: 28px; padding-top: 18px; text-align: center; color: #9a9ab0; font-size: 13px; }

/* ----------- Bootstrap 5 defaults overridden for light theme ----------- */
.form-control, .form-select, input.form-control, textarea.form-control { background-color: #fff; color: var(--dh2-text); border: 1px solid var(--dh2-border); }
.form-control:focus, .form-select:focus { background-color: #fff; color: var(--dh2-text); border-color: var(--dh2-accent); box-shadow: 0 0 0 3px rgba(122,76,240,0.12); }
.form-control::placeholder { color: var(--dh2-faint); }
.input-group-text, .input-group-addon { background-color: var(--dh2-surface-2); border: 1px solid var(--dh2-border); color: var(--dh2-text); }
/* Professional-network "common works with…" search bar */
.dh-common-search { max-width: 640px; }
.dh-common-search .input-group-text { font-weight: 600; }
.dh-common-search .form-control { background: #fff; }
.dh-common-search .form-control:focus { border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212,175,55,0.18); }
.dh-common-search .btn-yellow { background: linear-gradient(135deg, #f5c451, #d99a25); color: #fff !important; font-weight: 700; border: none; text-shadow: 0 1px 1px rgba(0,0,0,0.15); }
.dh-common-search .btn-yellow:hover { filter: brightness(1.05); color: #fff !important; }

/* Common-works modal grid: poster tiles flow in an auto-fill grid */
.dh-common-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.dh-common-grid .dh-common-cell { background: var(--dh2-surface-2); border: 1px solid var(--dh2-border); border-radius: 12px; padding: 10px; }
.dh-common-grid .film-item img, .dh-common-grid .series-item img, .dh-common-grid .play-item img { width: 100%; height: auto; border-radius: 8px; display: block; }
.dh-common-grid .film-item a, .dh-common-grid .series-item a, .dh-common-grid .play-item a { color: var(--dh2-text); text-decoration: none; display: block; }
.dh-common-grid .film-item .h4, .dh-common-grid .series-item .h4, .dh-common-grid .play-item .h4 { display: block; margin-top: 8px; font-size: 14px; line-height: 1.3; }
/* Work-type qualifier (film / series / play) on common-works and network tiles */
.dh-work-type { display: inline-block; margin-top: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; line-height: 1.6; color: var(--dh2-text-muted, #9a9ab0); background: var(--dh2-surface, rgba(128,128,128,0.12)); border: 1px solid var(--dh2-border, rgba(128,128,128,0.35)); border-radius: 999px; }

/* Make-meme picture grid */
.dh-meme-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.dh-meme-cell { background: var(--dh2-surface-2); border: 1px solid var(--dh2-border); border-radius: 12px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.dh-meme-cell > a { display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 8px; background: var(--dh2-surface); }
.dh-meme-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-meme-cell .cr-meme { align-self: center; }
.dh-tag-menu { max-height: 260px; overflow-y: auto; }
.dh-tag-menu .dropdown-item { font-weight: 600; padding: 6px 12px; }

/* Modern color picker: native input + preset swatches */
.dh-color-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dh-color-picker input[type="color"] { width: 48px; height: 36px; border: 1px solid var(--dh2-border); border-radius: 10px; padding: 2px; cursor: pointer; background: var(--dh2-surface); }
.dh-color-picker input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.dh-color-picker input[type="color"]::-webkit-color-swatch { border: none; border-radius: 7px; }
.dh-color-swatches { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dh-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.10); cursor: pointer; padding: 0; transition: transform .12s ease, box-shadow .12s ease; }
.dh-swatch:hover { transform: scale(1.10); }
.dh-swatch.active, .dh-swatch:focus { outline: none; box-shadow: 0 0 0 3px rgba(212,175,55,0.55); transform: scale(1.10); }

/* Generic tiled picture grid — opt-in wrapper around gallery_item.html loops that
   would otherwise stack one image per row. Used on character page, person page
   age_pics / gallery, gallery-image related sections, etc. */
.dh-pic-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.dh-pic-grid > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; margin: 0 !important; }
.dh-pic-grid > .clearfix { display: none; }
.dh-pic-grid .gallery-item { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
/* Only the FIRST <a> (the one wrapping the image) becomes the aspect-ratio frame.
   Subsequent <a>s in the same .gallery-item are film/series text links and must stay inline. */
.dh-pic-grid .gallery-item > a:first-of-type { display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 10px; background: var(--dh2-surface-2); }
.dh-pic-grid .gallery-item > a:first-of-type img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-pic-grid .gallery-item > a:not(:first-of-type) { color: var(--dh2-text); font-weight: 600; font-size: 13px; }
.dh-pic-grid .gallery-item > a:not(:first-of-type):hover { color: var(--dh2-accent); }
/* In tile mode the "Make meme" button is too big; replace with a small icon-only button via CSS. */
.dh-pic-grid .cr-meme {
  margin: 6px 0 0; padding: 4px 10px; font-size: 12px; font-weight: 700;
  align-self: center; min-width: 0;
}
.dh-pic-grid .gallery-item .h4 { font-size: 12px; line-height: 1.3; margin: 4px 0 0; font-weight: 600; }
.dh-pic-grid .gallery-item .h4 a { color: var(--dh2-text); }
.dh-pic-grid .gallery-item .h4 a:hover { color: var(--dh2-accent); }
.dh-pic-grid .gallery-item span.h4 { font-size: 11px; color: var(--dh2-muted); }
.dh-pic-grid .gallery-item { text-align: center; padding: 6px; background: var(--dh2-surface); border: 1px solid var(--dh2-border); border-radius: 12px; }

/* Modern breadcrumb (transparent, BS5 markup) */
.dh-breadcrumb { background: transparent !important; border: none !important; padding: 4px 0 !important; font-size: 14px; font-weight: 600; margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; list-style: none; }
.dh-breadcrumb .breadcrumb-item { font-size: 14px; }
.dh-breadcrumb .breadcrumb-item a { color: var(--dh2-accent); text-decoration: none; }
.dh-breadcrumb .breadcrumb-item a:hover { color: var(--dh2-accent-2); text-decoration: underline; }
.dh-breadcrumb .breadcrumb-item.active { color: var(--dh2-muted); }
/* Always render a literal "›" separator. unicode-bidi:isolate + direction:ltr stop the browser from
   bidi-flipping the angle bracket inside an RTL parent. */
.dh-breadcrumb, .breadcrumb { --bs-breadcrumb-divider: none !important; }
.dh-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: '\203A' !important;
  color: var(--dh2-muted);
  padding: 0 8px;
  font-weight: 700;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block !important;
}
/* No need to override under RTL — the chevron stays right-pointing because direction:ltr on ::before */
.modal-content { background: #fff; border: 1px solid var(--dh2-border); border-radius: 18px; color: var(--dh2-text); box-shadow: 0 18px 50px rgba(15,18,38,0.20); }
.modal-header, .modal-footer { border-color: var(--dh2-border); }
.modal-title { color: var(--dh2-text); font-weight: 800; }
.modal-content .btn-close { filter: none; }
.modal-content .close { color: var(--dh2-text); opacity: .85; background: transparent; border: 0; font-size: 22px; }
.dropdown-menu { background: #fff; border: 1px solid var(--dh2-border); color: var(--dh2-text); border-radius: 14px; padding: 6px; box-shadow: 0 10px 30px var(--dh2-shadow); }
.dropdown-item { color: var(--dh2-text); border-radius: 10px; padding: 8px 14px; font-weight: 600; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active, .dropdown-item:active { background-color: var(--dh2-surface-2); color: var(--dh2-accent); }
.dropdown-divider { border-color: var(--dh2-border); }

.btn { color: var(--dh2-text); }
.btn-default { background: #fff; border: 1px solid var(--dh2-border); color: var(--dh2-text); border-radius: 999px; }
.btn-default:hover { background: var(--dh2-surface-2); color: var(--dh2-text); }
.btn-primary { background: linear-gradient(135deg, var(--dh2-accent), var(--dh2-accent-2)); border: 0; color: #fff; border-radius: 999px; padding: 6px 20px; font-weight: 700; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #fff; background: linear-gradient(135deg, #9a6cff, #f55ba8); border: 0; box-shadow: 0 8px 22px rgba(122,76,240,0.45); }
.btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); border: 0; color: #fff; border-radius: 999px; font-weight: 700; }
.btn-success:hover, .btn-success:focus { color: #fff; }
.btn-danger { background: linear-gradient(135deg, #ef4444, var(--dh2-bad)); border: 0; color: #fff; border-radius: 999px; font-weight: 700; }
.btn-danger:hover, .btn-danger:focus { color: #fff; }
/* Unified gold button — white text on gold gradient, used everywhere */
.btn-warning, .btn-gold, .btn-yellow { background: linear-gradient(135deg, #f5c451, #d99a25); border: 0; color: #fff !important; border-radius: 999px; font-weight: 700; padding: 6px 16px; font-size: 14px; text-shadow: 0 1px 1px rgba(0,0,0,0.15); }
.btn-warning:hover, .btn-gold:hover, .btn-yellow:hover { color: #fff !important; filter: brightness(1.05); }
.btn-warning *, .btn-gold *, .btn-yellow *, .btn-primary *, .btn-success *, .btn-danger *, .btn-info * { color: inherit !important; }
.btn-warning:focus, .btn-gold:focus, .btn-yellow:focus { color: #fff !important; box-shadow: 0 0 0 3px rgba(212,175,55,0.30); }
.btn-warning.disabled, .btn-warning:disabled, .btn-gold.disabled, .btn-gold:disabled, .btn-yellow.disabled, .btn-yellow:disabled { color: #fff !important; opacity: 0.7; }
.btn-info { background: linear-gradient(135deg, #3b82f6, #1d4ed8); border: 0; color: #fff; border-radius: 999px; font-weight: 700; }
.btn-info:hover { color: #fff; }

.cookielaw-banner, .cookielaw-banner * { color: var(--dh2-text); }
.cookielaw-banner { background: var(--dh2-surface); border-top: 1px solid var(--dh2-border); box-shadow: 0 -4px 14px var(--dh2-shadow); }
.ui-autocomplete { background: #fff !important; border: 1px solid var(--dh2-border) !important; border-radius: 12px; padding: 4px; z-index: 1050; box-shadow: 0 12px 30px var(--dh2-shadow); }
.ui-autocomplete .ui-menu-item-wrapper, .ui-autocomplete a { color: var(--dh2-text) !important; padding: 6px 10px; border-radius: 8px; }
.ui-autocomplete .ui-state-active, .ui-autocomplete .ui-menu-item-wrapper.ui-state-active { background: var(--dh2-surface-2) !important; color: var(--dh2-accent) !important; border: 0 !important; }

/* ============ BS3 compatibility layer ============ */
.col-xs-6 { padding: 5px; }
.col-xs-12 { padding: 6px; }
[class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"] { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
[dir="rtl"] .col-xs-1, [dir="rtl"] .col-xs-2, [dir="rtl"] .col-xs-3, [dir="rtl"] .col-xs-4, [dir="rtl"] .col-xs-5, [dir="rtl"] .col-xs-6, [dir="rtl"] .col-xs-7, [dir="rtl"] .col-xs-8, [dir="rtl"] .col-xs-9, [dir="rtl"] .col-xs-10, [dir="rtl"] .col-xs-11, [dir="rtl"] .col-xs-12 { float: right; }
[dir="ltr"] [class*="col-xs-"], html:not([dir]) [class*="col-xs-"] { float: left; }
.col-xs-1 { width: 8.3333%; } .col-xs-2 { width: 16.6667%; } .col-xs-3 { width: 25%; }
.col-xs-4 { width: 33.3333%; } .col-xs-5 { width: 41.6667%; } .col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.3333%; } .col-xs-8 { width: 66.6667%; } .col-xs-9 { width: 75%; }
.col-xs-10 { width: 83.3333%; } .col-xs-11 { width: 91.6667%; } .col-xs-12 { width: 100%; }
@media (min-width: 768px) {
  [dir="rtl"] [class*="col-sm-"] { float: right; }
  [dir="ltr"] [class*="col-sm-"], html:not([dir]) [class*="col-sm-"] { float: left; }
  .col-sm-1 { width: 8.3333%; } .col-sm-2 { width: 16.6667%; } .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.3333%; } .col-sm-5 { width: 41.6667%; } .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.3333%; } .col-sm-8 { width: 66.6667%; } .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.3333%; } .col-sm-11 { width: 91.6667%; } .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
  [dir="rtl"] [class*="col-md-"] { float: right; }
  [dir="ltr"] [class*="col-md-"], html:not([dir]) [class*="col-md-"] { float: left; }
  .col-md-1 { width: 8.3333%; } .col-md-2 { width: 16.6667%; } .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.3333%; } .col-md-5 { width: 41.6667%; } .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.3333%; } .col-md-8 { width: 66.6667%; } .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.3333%; } .col-md-11 { width: 91.6667%; } .col-md-12 { width: 100%; }
}
@media (min-width: 1200px) {
  [dir="rtl"] [class*="col-lg-"] { float: right; }
  [dir="ltr"] [class*="col-lg-"], html:not([dir]) [class*="col-lg-"] { float: left; }
  .col-lg-1 { width: 8.3333%; } .col-lg-2 { width: 16.6667%; } .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.3333%; } .col-lg-5 { width: 41.6667%; } .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.3333%; } .col-lg-8 { width: 66.6667%; } .col-lg-9 { width: 75%; }
  .col-lg-10 { width: 83.3333%; } .col-lg-11 { width: 91.6667%; } .col-lg-12 { width: 100%; }
}
.visible-xs, .visible-sm, .visible-md, .visible-lg, .visible-xs-block, .visible-sm-block, .visible-md-block, .visible-lg-block, .visible-xs-inline, .visible-sm-inline, .visible-md-inline, .visible-lg-inline, .visible-xs-inline-block, .visible-sm-inline-block, .visible-md-inline-block, .visible-lg-inline-block { display: none !important; }
@media (max-width: 767.98px) {
  .visible-xs, .visible-xs-block { display: block !important; }
  .visible-xs-inline { display: inline !important; }
  .visible-xs-inline-block { display: inline-block !important; }
  .hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .visible-sm, .visible-sm-block { display: block !important; }
  .visible-sm-inline { display: inline !important; }
  .visible-sm-inline-block { display: inline-block !important; }
  .hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .visible-md, .visible-md-block { display: block !important; }
  .visible-md-inline { display: inline !important; }
  .visible-md-inline-block { display: inline-block !important; }
  .hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
  .visible-lg, .visible-lg-block { display: block !important; }
  .visible-lg-inline { display: inline !important; }
  .visible-lg-inline-block { display: inline-block !important; }
  .hidden-lg { display: none !important; }
}
.pull-right { float: right !important; }
.pull-left  { float: left !important; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-rounded { border-radius: 10px; }
.clearfix::before, .clearfix::after, .row::before, .row::after, .row-fluid::before, .row-fluid::after { display: table; content: " "; }
.clearfix::after, .row::after, .row-fluid::after { clear: both; }
.row-fluid { width: 100%; }

/* Bootstrap 3 `.hide` shim — krajee rating widget toggles it on the input */
.hide { display: none !important; }
input.rating, input.rating-loading, .rating-loading { background-image: none !important; }

/* ============ Glyphicons ============ */
@font-face { font-family: 'Glyphicons Halflings'; src: url('/static/static/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/static/static/fonts/glyphicons-halflings-regular.woff') format('woff'); }
.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.glyphicon-search::before { content: "\e003"; }
.glyphicon-heart::before { content: "\e005"; }
.glyphicon-star::before { content: "\e006"; color: var(--dh2-gold); }
.glyphicon-ok::before { content: "\e013"; color: var(--dh2-good); }
.glyphicon-remove::before { content: "\e014"; }
.glyphicon-remove { color: var(--dh2-bad); }
.glyphicon-triangle-right::before { content: "\e250"; }
.glyphicon-triangle-left::before { content: "\e251"; }
.glyphicon-triangle-bottom::before { content: "\e252"; }
.glyphicon-triangle-top::before { content: "\e253"; }

/* ============ Panels (light cards) ============ */
.panel {
  margin-bottom: 22px;
  background: var(--dh2-surface);
  border: 1px solid var(--dh2-border);
  border-radius: 18px;
  box-shadow: 0 4px 16px var(--dh2-shadow);
  overflow: hidden;
  color: var(--dh2-text);
}
.panel-default > .panel-heading,
.panel-default .panel-heading.bg-info {
  padding: 14px 18px 8px;
  background: linear-gradient(135deg, rgba(122,76,240,0.08), rgba(216,51,136,0.05));
  color: var(--dh2-text);
  border: 0;
  border-bottom: 1px solid var(--dh2-border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.panel-heading .h1, .panel-heading h1,
.panel-heading .h2, .panel-heading h2,
.panel-heading .h3, .panel-heading h3 {
  margin: 0; font-weight: 800; color: var(--dh2-text);
  font-size: 20px;
  display: inline-flex; align-items: center; gap: 10px;
}
.panel-heading .h1::before, .panel-heading h1::before,
.panel-heading .h2::before, .panel-heading h2::before,
.panel-heading .h3::before, .panel-heading h3::before {
  content: ""; width: 5px; height: 22px; border-radius: 3px;
  background: linear-gradient(180deg, var(--dh2-gold), var(--dh2-accent));
  display: inline-block; vertical-align: middle;
}
.panel-heading .panel-txt, .panel-txt {
  background-color: transparent !important; background: transparent;
  color: var(--dh2-text) !important; margin: 0 !important;
}
.panel-body { padding: 16px; background: transparent; color: var(--dh2-text); font-size: 15px; line-height: 1.7; }
.panel-body a { color: var(--dh2-accent); }
.panel-body a:hover { color: var(--dh2-accent-2); }
.panel-body .h3, .panel-body h3 { font-size: 17px; font-weight: 700; }
.panel-body .h4, .panel-body h4 { font-size: 15px; font-weight: 700; }
.panel-body .h5, .panel-body h5 { font-size: 14px; font-weight: 700; }

/* Headings outside panels */
.h1, h1 { color: var(--dh2-text); font-weight: 800; }
.h2, h2 { color: var(--dh2-text); font-weight: 800; }
.h3, h3 { color: var(--dh2-text); font-weight: 700; font-size: 17px; }
.h4, h4 { color: var(--dh2-text); font-weight: 700; font-size: 15px; }
.h5, h5 { color: var(--dh2-text); font-weight: 700; font-size: 14px; }

/* Legacy labels */
.text-label { color: var(--dh2-muted); font-weight: 700; background: transparent; }
.text-info { color: var(--dh2-accent) !important; }
.text-muted { color: var(--dh2-muted) !important; }
.text-success { color: var(--dh2-good) !important; }
.text-danger { color: var(--dh2-bad) !important; }
.text-warning { color: var(--dh2-gold-2) !important; }

.highlight { background: var(--dh2-surface); border: 1px solid var(--dh2-border); padding: 14px 18px; border-radius: 14px; color: var(--dh2-text); box-shadow: 0 2px 8px var(--dh2-shadow); }
.highlight a { color: var(--dh2-accent); }
.highlight a:hover { color: var(--dh2-accent-2); }

.blue-container, .red-container, .pink-container, .green-container, .gray-container { background: var(--dh2-surface); border: 1px solid var(--dh2-border); border-radius: 14px; padding: 10px; color: var(--dh2-text); }
.red-container  { border-color: rgba(220,38,38,0.30); background: rgba(220,38,38,0.06); }
.pink-container { border-color: rgba(216,51,136,0.30); background: rgba(216,51,136,0.06); }
.green-container { border-color: rgba(22,163,74,0.30); background: rgba(22,163,74,0.06); }
.blue-container  { border-color: rgba(59,130,246,0.25); background: rgba(59,130,246,0.04); }
.gray-container  { background: var(--dh2-surface-2); }

.search-bar { width: 100%; margin-top: 18px; flex-wrap: nowrap; }
.search-bar .ui-widget { display: flex; flex: 1 1 auto; width: auto; align-items: stretch; }
.search-bar .form-control { height: 46px; background: #fff; color: var(--dh2-text); border: 1px solid var(--dh2-border); }
.search-bar .input-group-btn .btn { height: 46px; background: linear-gradient(135deg, var(--dh2-accent), var(--dh2-accent-2)); border: 0; color: #fff; }

#uds, #uds > div { display: none; }
.videowrapper { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 12px; background: #000; }
.videowrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.star { margin: 0px !important; }
.film-video { overflow: hidden; position: relative; width: 100%; border-radius: 12px; background: #000; }
.film-video::after { padding-top: 75%; display: block; content: ''; }
.film-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.meme-font { font-size: 16px; }
.hidden-pic { display: none; }

/* ============ Reusable card grid (character / cast / poster lists) ============ */
.dh-grid-cards-roomy {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
@media (max-width: 480px) {
  .dh-grid-cards-roomy { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}
.dh-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
@media (max-width: 480px) {
  .dh-grid-cards {grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
}
.dh-card {
  background: var(--dh2-surface);
  border: 1px solid var(--dh2-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 8px var(--dh2-shadow);
}
.dh-card:hover { transform: translateY(-3px); border-color: var(--dh2-accent); box-shadow: 0 10px 24px rgba(122,76,240,0.18); }
.dh-card a { color: var(--dh2-text); display: block; text-decoration: none; }
.dh-card .pic {position:relative;width:100%;aspect-ratio:4/3;background:var(--dh2-surface-2);overflow:hidden}
.dh-card .pic.tall {aspect-ratio:2/3}
.dh-card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-card .body { padding: 10px 12px; }
.dh-card .title { font-weight: 700; font-size: 14px; color: var(--dh2-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.dh-card .sub { display: block; margin-top: 4px; font-size: 12px; color: var(--dh2-muted); font-weight: 600; }
.dh-card .sub:hover { color: var(--dh2-accent); }
.dh-card .rating-pill { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.75); color: var(--dh2-gold-bright); font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }

/* ============ Hero block (detail pages) — compact variant ============ */
.dh-hero {position:relative;border-radius:22px;margin:4px 0 22px;padding:22px;background:linear-gradient(135deg,rgba(122,76,240,0.08),rgba(216,51,136,0.05)),var(--dh2-surface);border:1px solid var(--dh2-border);box-shadow:0 10px 30px var(--dh2-shadow);overflow:hidden}
.dh-hero::before {content:"";position:absolute;inset:0;z-index:0;background-image:var(--dh-hero-bg,none);background-size:cover;background-position:center;filter:blur(38px) saturate(140%);opacity:0.20;pointer-events:none}
/* Make sure direct children of the hero (h1, .dh-cta-row, buttons) sit above the ::before overlay */
.dh-hero > * { position: relative; z-index: 1; }
.dh-hero-inner {position:relative;z-index:1;display:grid;gap:14px;grid-template-columns:130px 1fr;align-items:start}
@media (max-width: 700px) { .dh-hero-inner {grid-template-columns:100px 1fr;gap:10px} }
.dh-hero-portrait { position: relative; }
.dh-hero-portrait.square { aspect-ratio: 1/1; }
.dh-hero-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-hero-meta h1, .dh-hero-meta .h1 {
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 800; margin: 0; line-height: 1.2;
}
.dh-hero-meta-en, .dh-hero-meta-en a {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 600; margin: 0; line-height: 1.2;
}
.dh-hero-meta h1 { color: var(--dh2-text); }
.dh-hero-meta h1 a { color: var(--dh2-text); }
.dh-hero-meta-en { color: var(--dh2-accent); margin-top: 2px; }
.dh-hero-meta-en a { color: var(--dh2-accent) !important; }
.dh-hero-rating-row {display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;align-items:center}
.dh-hero-rating-row .rating-block {display:flex;flex-direction:column;gap:4px}
.dh-hero-rating-row .label {color:var(--dh2-muted);font-size:13px;font-weight:600}
.dh-hero-badges {display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.dh-hero-badges .badge-set {display:flex;flex-wrap:wrap;gap:10px;float:none !important;border:0 !important;padding:0 !important;margin:0 !important}
.dh-hero-badges .badge-set > div {display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:var(--dh2-surface);border:1px solid var(--dh2-border);border-radius:14px;padding:10px 12px;min-width:100px;float:none !important;transition:border-color .2s ease,transform .2s ease;box-shadow:0 2px 6px var(--dh2-shadow)}
.dh-hero-badges .badge-set > div:hover {border-color:var(--dh2-accent);transform:translateY(-2px)}
.dh-hero-badges img { width: 40px !important; height: 40px !important; display: block; }
.dh-hero-badges .badge-set > div,
.dh-hero-badges .badge-set > div a,
.dh-hero-badges .badge-set > div span {color:var(--dh2-accent);font-weight:700;font-size:12px;text-decoration:none;line-height:1.3}
.dh-hero-badges .badge-set > div a {display:flex;flex-direction:column;align-items:center;gap:6px}
.dh-hero-badges .badge-set > div a:hover { color: var(--dh2-accent-2); }
.dh-hero-portrait .rating-pill { font-size: 11px; padding: 2px 7px; top: 6px; right: 6px; }

/* Sticky in-page section nav */
.dh-section-nav {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 18px;
  position: sticky; top: 76px; z-index: 5;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  padding: 10px; border-radius: 14px;
  border: 1px solid var(--dh2-border);
  box-shadow: 0 4px 14px var(--dh2-shadow);
}
.dh-section-nav a {
  padding: 6px 12px; border-radius: 999px;
  font-weight: 700; font-size: 13px;
  background: var(--dh2-surface-2);
  color: var(--dh2-text);
  border: 1px solid var(--dh2-border);
}
.dh-section-nav a:hover {
  background: rgba(122,76,240,0.10);
  color: var(--dh2-accent);
  border-color: var(--dh2-accent);
}
.panel[id] { scroll-margin-top: 140px; }

/* List-page intro hero */
.dh-list-hero {
  position: relative; border-radius: 22px; margin: 4px 0 22px; padding: 22px 24px;
  background:
    linear-gradient(135deg, rgba(122,76,240,0.10), rgba(216,51,136,0.06)),
    var(--dh2-surface);
  border: 1px solid var(--dh2-border);
  box-shadow: 0 10px 30px var(--dh2-shadow);
}
.dh-list-hero h1 {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 900; color: var(--dh2-text); margin: 0 0 8px;
  background: linear-gradient(120deg, var(--dh2-text) 0%, var(--dh2-accent) 50%, var(--dh2-accent-2) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dh-list-hero p { color: var(--dh2-muted); line-height: 1.8; font-size: 15px; margin: 0; }
.dh-list-hero p a { color: var(--dh2-accent); font-weight: 700; }
.dh-list-hero p a:hover { color: var(--dh2-accent-2); }

/* ============ Rating widget — krajee star-rating ============
   Hard-enforce the positioning so the filled-stars overlay can never escape
   its container. (The krajee theme CSS sets these but we override here to
   survive any cascade order issue or CDN miss.) */
.theme-krajee-fa .rating-container .rating,
.theme-krajee-fa .rating { position: relative !important; display: inline-block; line-height: 1; }
.theme-krajee-fa .empty-stars,
.theme-krajee-fa .filled-stars { display: inline-block; line-height: 1; white-space: nowrap; }
.theme-krajee-fa .empty-stars { position: relative; color: #9a9ab0 !important; }
.theme-krajee-fa .filled-stars {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: auto !important;
  overflow: hidden;
}
[dir="rtl"] .theme-krajee-fa .filled-stars,
.rating-rtl .filled-stars { left: auto !important; right: 0 !important; }
.theme-krajee-fa .filled-stars .star { color: var(--dh2-gold) !important; text-shadow: none !important; }
.theme-krajee-fa .star { color: #9a9ab0 !important; }
.theme-krajee-fa .filled-stars .star { color: var(--dh2-gold) !important; }
.theme-krajee-fa .clear-rating { display: none; }

/* Strict 3-column grid (used by person "see-also") */
.dh-grid-3 {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width: 380px) { .dh-grid-3 {grid-template-columns:1fr} }

/* Rounded poster corners + size cap for legacy AR cast / poster images */
.person-img, img.poster { border-radius: 10px !important; overflow: hidden; }
/* Cap the placeholder when there's no real poster — keep it at the same size as a real poster (140x200) */
.person-item img.person-img[src$="no-pic-p.jpg"], .person-item img.person-img[src*="no-pic-p.jpg"] {
  width: 100% !important; height: auto !important; object-fit: cover;
  background: transparent; padding: 0;
}
/* Also cap the legacy .poster placeholder used on series/film top sections */
img.poster[src$="no-pic-p.jpg"] { max-width: 140px; max-height: 200px; object-fit: contain; }

/* Single-column grid (used by person roles list) */
.dh-grid-1 { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* AJAX-pagination loading state */
.dh-ajax-loading { opacity: 0.55; pointer-events: none; transition: opacity .2s ease; }

/* ============ Hero portrait — rating pill overlay (person + film) ============ */
.dh-hero-portrait { position: relative; }
.dh-hero-portrait .rating-pill {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: var(--dh2-gold-bright);
  font-size: 13px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.30);
  letter-spacing: 0.3px;
}

/* ============ Wide character card (person "roles" — full size, 1 per row) ============ */
.dh-role-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--dh2-surface);
  border: 1px solid var(--dh2-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px var(--dh2-shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dh-role-card:hover { transform: translateY(-3px); border-color: var(--dh2-accent); box-shadow: 0 14px 28px rgba(122,76,240,0.18); }
.dh-role-card .pic {
  position: relative; width: 100%; background: var(--dh2-surface-2);
  /* Show the full image without cropping */
  display: flex; justify-content: center; align-items: center;
}
.dh-role-card .pic img {
  display: block;
  width: 100%; height: auto;
  max-width: 100%;
}
/* When a tile only has the placeholder ("no picture"), don't stretch it across the card.
   Targets images whose src or data-src ends in the placeholder filename. */
.dh-role-card .pic img[src$="no-pic-l.jpg"],
.dh-role-card .pic img[data-src$="no-pic-l.jpg"],
.dh-role-card .pic img[src$="no-pic-p.jpg"],
.dh-role-card .pic img[data-src$="no-pic-p.jpg"] {
  width: 100%; height: auto; max-width: 100%; max-height: none;
  margin: 0; padding: 0;
  object-fit: cover; opacity: 1;
}
/* Same restraint inside the smaller dh-card pic frames */
.dh-card .pic img[src$="no-pic-l.jpg"],
.dh-card .pic img[data-src$="no-pic-l.jpg"],
.dh-card .pic img[src$="no-pic-p.jpg"],
.dh-card .pic img[data-src$="no-pic-p.jpg"] {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; object-fit: cover; opacity: 1;
  position: absolute; inset: 0;
}
.dh-card .pic {position:relative;width:100%;aspect-ratio:4/3;background:var(--dh2-surface-2);overflow:hidden}
.dh-role-card .body { padding: 14px 18px 16px; }

/* === Focused section page (e.g. /artist/X/gallery) — render full-width === */
body.dh-focused-section .col-md-6 { flex: 0 0 100%; max-width: 100%; width: 100%; }
body.dh-focused-section .col-md-6:empty { display: none; }
body.dh-focused-section .dh-grid-3 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
body.dh-focused-section .dh-grid-1 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
body.dh-focused-section .dh-grid-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
/* Gallery / posters / rare-pics in focused mode: convert stacked rows to multi-col grid */
body.dh-focused-section #sec-gallery .panel-body > .row-fluid,
body.dh-focused-section #sec-posters .panel-body > .row-fluid,
body.dh-focused-section #sec-rare-pics .panel-body > .row-fluid,
body.dh-focused-section #sec-user-memes .panel-body > .row-fluid,
body.dh-focused-section #sec-memes .panel-body > .row-fluid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
body.dh-focused-section #sec-posters .panel-body > .row-fluid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
body.dh-focused-section #sec-gallery .panel-body > .row-fluid > [class*="col-"],
body.dh-focused-section #sec-posters .panel-body > .row-fluid > [class*="col-"],
body.dh-focused-section #sec-rare-pics .panel-body > .row-fluid > [class*="col-"],
body.dh-focused-section #sec-user-memes .panel-body > .row-fluid > [class*="col-"],
body.dh-focused-section #sec-memes .panel-body > .row-fluid > [class*="col-"] {
  width: 100% !important; max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important; margin: 0 !important;
}
body.dh-focused-section #sec-gallery .panel-body > .row-fluid > .clearfix,
body.dh-focused-section #sec-posters .panel-body > .row-fluid > .clearfix,
body.dh-focused-section #sec-rare-pics .panel-body > .row-fluid > .clearfix,
body.dh-focused-section #sec-user-memes .panel-body > .row-fluid > .clearfix,
body.dh-focused-section #sec-memes .panel-body > .row-fluid > .clearfix { display: none; }
body.dh-focused-section #sec-gallery .gallery-item img,
body.dh-focused-section #sec-rare-pics .gallery-item img { width: 100%; height: auto; }
body.dh-focused-section #sec-posters .poster-item img { width: 100%; height: auto; }

/* === Smart pagination jump-to-page === */
.dh-pg-jump {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 8px 14px; padding: 6px 10px;
  font-size: 14px; color: #1f2330;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  vertical-align: middle;
}
.dh-pg-jump label { margin: 0; font-weight: 600; color: #555; }
.dh-pg-jump .of { color: #7a7a86; }
.dh-pg-jump input {
  width: 72px; padding: 4px 8px; border-radius: 8px;
  border: 1px solid #d0d0d8; background: #fff; color: #1f2330;
  text-align: center; font-weight: 600;
}
.dh-pg-jump input:focus { outline: none; border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212,175,55,0.18); }
.dh-pg-jump button { padding: 5px 14px; border-radius: 999px; background: linear-gradient(180deg, #f0c14b 0%, #d4af37 100%); color: #1f2330; border: none; font-weight: 700; cursor: pointer; transition: filter .15s ease, transform .1s ease; }
.dh-pg-jump button:hover { filter: brightness(1.05); }
.dh-pg-jump button:active { transform: translateY(1px); }
.pagination .page-item.dh-pg-first .page-link,
.pagination .page-item.dh-pg-last .page-link { font-weight: 800; }

/* === Pagination controls: consistent, brand-styled, mobile-safe === */
.step-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  width: 100%;
  max-width: 100%;
  margin: 16px 0 6px !important;
  padding: 0;
  font-size: inherit;
}
.step-links .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100%;
  border-radius: 0;
}
.step-links .pagination .page-item { margin: 0; }
.step-links .pagination .page-link {
  display: block;
  min-width: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--dh2-border);
  border-radius: 10px;
  background: var(--dh2-surface);
  color: var(--dh2-text);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 2px var(--dh2-shadow);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.step-links .pagination .page-link:hover {
  border-color: var(--dh2-gold);
  color: var(--dh2-gold-2);
  background: var(--dh2-surface-2);
}
.step-links .pagination .page-link:active { transform: translateY(1px); }
.step-links .pagination .page-item.active .page-link {
  background: linear-gradient(180deg, var(--dh2-gold-bright) 0%, var(--dh2-gold) 100%);
  border-color: var(--dh2-gold);
  color: #1f2330;
  box-shadow: 0 2px 6px rgba(201,138,26,0.30);
}
.step-links .pagination .page-item.disabled .page-link {
  opacity: 0.45;
  pointer-events: none;
  box-shadow: none;
}
.step-links .pagination .page-item.dh-pg-first .page-link,
.step-links .pagination .page-item.dh-pg-last .page-link { font-weight: 900; }
.step-links .dh-pg-jump { margin: 0; flex: 0 0 auto; }
@media (max-width: 575px) {
  .step-links { gap: 6px; margin: 12px 0 4px !important; }
  .step-links .pagination { gap: 5px; }
  .step-links .pagination .page-link { min-width: 34px; padding: 7px 9px; font-size: 14px; }
  .step-links .dh-pg-jump { flex-basis: 100%; justify-content: center; margin: 4px auto 0; }
  .step-links .dh-pg-jump input { width: 60px; }
}

/* === Constrained main content + side ad rails on large screens === */
.dh-ad-rail {display:none}
@media (min-width: 1480px) {
  .dh-ad-rail {
    display: block; position: fixed; top: 90px;
    width: 160px; height: calc(100vh - 170px);
    z-index: 5; background: transparent;
    border: 1px dashed rgba(0,0,0,0.08); border-radius: 14px;
    color: #9a9aa6; font-size: 12px; text-align: center;
    padding-top: 14px; pointer-events: auto;
  }
  .dh-ad-rail.left { left: max(16px, calc((100vw - 1120px) / 2 - 180px)); }
  .dh-ad-rail.right { right: max(16px, calc((100vw - 1120px) / 2 - 180px)); }
  .dh-ad-rail .dh-ad-label {
    color: #bdbdc8; letter-spacing: 0.08em; text-transform: uppercase;
    font-size: 11px; margin-top: 6px;
  }
}
.dh-role-card .title {
  display: block; color: var(--dh2-text); font-size: 18px; font-weight: 800; line-height: 1.3; margin: 0 0 6px;
  text-decoration: none;
}
.dh-role-card a.title:hover { color: var(--dh2-accent); }
.dh-role-card .sub { color: var(--dh2-muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.dh-role-card a.sub:hover { color: var(--dh2-accent); }

/* ============ Polished autocomplete dropdown ============ */
.ui-autocomplete {
  background: #fff !important;
  border: 1px solid var(--dh2-border) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  z-index: 1050 !important;
  box-shadow: 0 16px 38px rgba(15,18,38,0.18), 0 4px 10px rgba(15,18,38,0.05) !important;
  min-width: 320px;
  max-height: 70vh; overflow-y: auto;
}
.ui-autocomplete .ui-menu-item { list-style: none; margin: 0; }
.ui-autocomplete .ui-menu-item-wrapper,
.ui-autocomplete a {
  display: flex !important; align-items: center; gap: 12px;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  color: var(--dh2-text) !important;
  font-weight: 600; font-size: 14px;
  border: 1px solid transparent !important;
}
.ui-autocomplete .ui-menu-item-wrapper img {
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--dh2-border);
  box-shadow: 0 2px 6px var(--dh2-shadow);
  background: var(--dh2-surface-2);
}
.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper:hover {
  background: linear-gradient(135deg, rgba(122,76,240,0.10), rgba(216,51,136,0.06)) !important;
  color: var(--dh2-accent) !important;
  border-color: rgba(122,76,240,0.20) !important;
}
.ui-autocomplete::-webkit-scrollbar { width: 8px; }
.ui-autocomplete::-webkit-scrollbar-thumb { background: var(--dh2-border); border-radius: 4px; }
.ui-autocomplete::-webkit-scrollbar-thumb:hover { background: var(--dh2-accent); }

/* ================================================================
   v3 patch — aggressive rounded corners, top hero portrait sizing,
   cast placeholder cap, and a full mobile responsive overhaul.
   ================================================================ */

/* ---------- Universal poster rounding ----------
   Catch every poster image variant — homepage rails, panels, cast,
   posters sections, person/film/series items. Use !important so legacy
   img-rounded / img-responsive markup can't beat us. */
/* [before-parity] Non-deployed 12px poster unification removed; radii restored to the 'before' look via the parity layer below. */
/* Wrappers must clip child images that themselves were rounded — needed
   when the inner img is bigger than rounded-corner radius. */
.dh-poster, .dh-poster .poster-wrap, .dh-card, .dh-card .pic,
.poster-item, .person-img-wrap, .dh-hero-portrait { overflow: hidden; }

/* ---------- Hero portrait — small size bump on all detail pages ---------- */
.dh-hero-inner {position:relative;z-index:1;display:grid;gap:14px;grid-template-columns:130px 1fr;align-items:start}
@media (max-width: 991px) { .dh-hero-inner { grid-template-columns: 140px 1fr !important; gap: 14px !important; } }
@media (max-width: 700px) { .dh-hero-inner {grid-template-columns:100px 1fr;gap:10px} }
@media (max-width: 480px) { .dh-hero-inner { grid-template-columns: 110px 1fr !important; gap: 10px !important; } }
.dh-hero-meta h1, .dh-hero-meta .h1 { font-size: clamp(18px, 2vw, 22px); }

/* ---------- Cast placeholder — match real poster footprint (140×200) ---------- */
.person-item img.person-img[src$="no-pic-p.jpg"],
.person-item img.person-img[src*="no-pic-p.jpg"],
.person-item img[src$="no-pic-p.jpg"],
.person-item img[src*="no-pic-p.jpg"] {
  width: 100% !important; height: auto !important;
  max-width: 100% !important; max-height: none !important;
  object-fit: cover !important;
  padding: 0 !important;
  background: transparent !important;
  margin: 0 auto;
  display: block;
}
/* Group placeholder (no .person-img class) used in cast */
.person-item img.img-responsive[src$="no-pic-p.jpg"],
.person-item img.img-responsive[src*="no-pic-p.jpg"] {
  width: 100% !important; height: auto !important;
  object-fit: cover !important; padding: 0 !important;
  background: transparent !important; margin: 0 auto; display: block;
}

/* ---------- Home (modern landing) CTA defensive z-index ---------- */
.dh-modern .dh-hero { position: relative; z-index: 1; }
.dh-modern .dh-cta-row { position: relative; z-index: 5; pointer-events: auto; }
.dh-modern .dh-cta-row > a,
.dh-modern .dh-cta-row > a.dh-btn {
  position: relative; z-index: 5; pointer-events: auto;
  cursor: pointer;
}
.dh-modern .stat-strip { position: relative; z-index: 2; }
/* Hide ad rails entirely (no real ads served) */
.dh-ad-rail {display:none}

/* ---------- "Bottom ad" / extra empty footer — kill leftover slots ---------- */
.dh2-ad-wrap, .dh2-ad, .dh-bottom-ad,
[id*="bottom-ad"], [class*="bottom-ad"],
.dh2-feedback + .dh2-ad,
.dh2-main + .dh2-ad-wrap { display: none !important; }
/* Tighten footer top spacing — was creating large empty band on mobile */
.dh2-footer {margin-top:40px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(11,11,20,1) 18%),var(--dh2-chrome-bg-solid);color:var(--dh2-chrome-text);border-top:1px solid var(--dh2-chrome-border)}
.dh2-footer-inner {max-width:1400px;margin:0 auto;padding:50px 22px 24px}
/* Strip the large gradient fade band above the footer (was eating ~80px
   of visible vertical space, appearing as an empty "ad" strip). */
.dh2-footer {margin-top:40px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(11,11,20,1) 18%),var(--dh2-chrome-bg-solid);color:var(--dh2-chrome-text);border-top:1px solid var(--dh2-chrome-border)}
@media (max-width: 700px) {
  .dh2-footer-inner { padding: 24px 14px 14px; }
}

/* ================================================================
   COMPREHENSIVE MOBILE RESPONSIVE OVERHAUL
   ================================================================ */

/* Bigger touch target hit area: links and buttons inside main */
@media (max-width: 991px) {
  .dh2-main a, .dh2-main button { min-height: 36px; }
}

/* ---------- Header / nav — fix overlapping on small screens ---------- */
@media (max-width: 991px) {
  /* Stop links/actions from overlapping the brand */
  .dh2-nav { padding: 6px 12px !important; gap: 6px !important; min-height: 56px !important; flex-wrap: nowrap !important; }
  .dh2-brand { flex-shrink: 0; }
  .dh2-brand img { height: 32px !important; }

  /* Push body content down to clear shorter mobile header */
  body { padding-top: 60px !important; }

  /* dh2-actions: NEVER an always-visible fixed bottom bar. Hide outside the
     drawer; when the drawer is open, dock the login/EN buttons at the
     bottom of the drawer overlay — clearly inside the menu, not a stray
     band at the foot of the page. */
  .dh2-actions {
    display: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-top: 0 !important;
  }
  body.dh2-menu-open .dh2-actions {
    display: flex !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    flex-direction: row !important;
    gap: 8px !important;
    background: rgba(11,11,20,0.98) !important;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    z-index: 1042 !important;
  }
  body.dh2-menu-open .dh2-actions .dh2-btn {
    flex: 1; justify-content: center;
    padding: 10px 14px !important; font-size: 14px !important;
    min-height: 40px;
  }

  /* Mobile menu drawer: links slide in; actions dock at its bottom */
  .dh2-links {
    display: none;
    position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
    background: rgba(11,11,20,0.98);
    padding: 14px 18px 96px;
    flex-direction: column; align-items: stretch; gap: 4px;
    overflow-y: auto;
    z-index: 1040;
  }
  body.dh2-menu-open .dh2-links { display: flex; }
  body.dh2-menu-open { overflow: hidden; }
  /* When menu is closed, ensure backdrop is gone */
  .dh2-menu-backdrop { display: none !important; }
  body.dh2-menu-open .dh2-menu-backdrop {
    display: block !important;
    position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); z-index: 1039;
  }

  /* Hamburger: clearer affordance + always visible/clickable above menu */
  .dh2-toggle {
    display: inline-flex !important; flex-shrink: 0; width: 40px; height: 40px;
    position: relative; z-index: 1100;
  }
  /* Brand also above the menu so it stays tappable */
  .dh2-brand { position: relative; z-index: 1100; }
  /* When menu is open: morph hamburger into an X to make close obvious */
  body.dh2-menu-open .dh2-toggle svg line:nth-child(1) {
    transform: rotate(45deg) translate(2px, 4px); transform-origin: center;
  }
  body.dh2-menu-open .dh2-toggle svg line:nth-child(2) { opacity: 0; }
  body.dh2-menu-open .dh2-toggle svg line:nth-child(3) {
    transform: rotate(-45deg) translate(2px, -4px); transform-origin: center;
  }
  body.dh2-menu-open .dh2-toggle svg line { transition: transform .2s ease, opacity .2s ease; }

  /* Make sure body padding stays right when menu drawer is shown */
  body.dh2-menu-open .dh2-links { padding-bottom: 100px; }
}

/* ---------- Detail-page top section padding ---------- */
@media (max-width: 700px) {
  .dh2-main { padding: 12px 10px 28px; }
  /* [before-parity] .dh-hero mobile padding override removed (context-variant: home=28/16/36, person=22px). */
  .dh-hero-portrait { max-width: 120px; }
  .dh-hero-badges { gap: 6px; margin-top: 8px; }
  .dh-hero-badges .badge-set > div { padding: 4px 6px; min-width: 50px; font-size: 11px; }
  .dh-hero-badges img { width: 32px !important; height: 32px !important; }
  .dh-hero-rating-row { gap: 8px; }
  .dh-section-nav { padding: 6px; gap: 4px; top: 60px; }
  .dh-section-nav a { padding: 5px 9px; font-size: 12px; }
  .panel { border-radius: 14px; }
  .panel-heading { padding: 10px 12px 6px !important; }
  .panel-heading .h1, .panel-heading .h2, .panel-heading .h3 { font-size: 16px !important; }
  .panel-body { padding: 10px !important; font-size: 14px; }
  /* Two-column body becomes a single column on small screens */
  .col-xs-12.col-md-6 { width: 100% !important; }
  .col-xs-12.col-sm-6 { width: 100% !important; }
  /* Keep full-width columns un-floated; half-width columns (col-xs-6, etc.) keep their float so they stay 2-per-row */
  .col-xs-12 { float: none !important; }
  /* Reduce big tab heading on detail-pages */
  .dh-hero-meta h1 { font-size: 18px !important; }
  /* Stop horizontal scroll caused by stray images */
  body, html { overflow-x: hidden; }
  img, video, iframe { max-width: 100%; height: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- Form / login modal sizing on mobile ---------- */
@media (max-width: 700px) {
  .modal-dialog { margin: 12px; }
  .modal-content { border-radius: 14px; }
  .modal-body { padding: 14px; }
}

/* ---------- Home (modern landing) mobile adjustments ---------- */
@media (max-width: 700px) {
  .dh-modern { padding: 14px 10px 24px !important; margin: 0 !important; border-radius: 14px !important; }
  .dh-hero h1 { font-size: 26px !important; }
  .dh-hero p.lede { font-size: 14px !important; }
  .dh-stat { min-width: 110px !important; padding: 10px 14px !important; }
  .dh-stat .num { font-size: 22px !important; }
  .dh-stat .label { font-size: 12px !important; }
  .dh-cta-row { gap: 8px !important; }
  .dh-btn { padding: 10px 16px !important; font-size: 14px !important; }
  .dh-section-head h2 { font-size: 20px !important; }
  .dh-poster { width: 130px !important; }
  .dh-pills { gap: 6px; }
  .dh-pill { padding: 6px 10px !important; font-size: 12px !important; }
  .dh-feature { padding: 16px !important; border-radius: 14px !important; }
  .dh-feature h3 { font-size: 18px !important; }
  .dh-end-cta { padding: 22px 14px !important; }
  .dh-end-cta h3 { font-size: 20px !important; }
}

/* ---------- Series-list histogram — give it room ---------- */
#series-graph { min-height: 280px; }

/* ---------- Mobile-only nav links + dh2-actions handling ---------- */
/* Inline auth + lang links inside the drawer; hide outside mobile.
   !important is required so legacy .dh2-link rules can't reveal them. */
.dh2-link-mobile-only,
.dh2-link-divider,
a.dh2-link.dh2-link-mobile-only,
span.dh2-link-divider {
  display: none !important;
}
@media (max-width: 991px) {
  .dh2-link-mobile-only,
  a.dh2-link.dh2-link-mobile-only { display: block !important; }
  .dh2-link-divider,
  span.dh2-link-divider {
    display: block !important;
    height: 1px; margin: 8px 8px;
    background: rgba(255,255,255,0.12);
  }
  /* Truly hide dh2-actions on mobile (closed AND open) — login/EN are now
     surfaced inside the drawer's link list, removing the empty "bottom ad"
     band the user reported. */
  .dh2-actions, body.dh2-menu-open .dh2-actions {
    display: none !important;
  }
}
/* Belt-and-suspenders: even at desktop widths, force-hide the mobile-only
   items so a stale CSS cache or specificity collision can't push them into
   the visible nav and inflate its height. Also clamp the nav box so it
   stays a single row of pills under any cascade. */
@media (min-width: 992px) {
  .dh2-link-mobile-only,
  .dh2-link-divider,
  a.dh2-link.dh2-link-mobile-only,
  span.dh2-link-divider {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  /* Desktop nav stays compact, single row, no wrap.
     NOTE: don't overflow:hidden on dh2-links — that would clip the meme
     dropdown menu. flex-wrap: nowrap is enough to keep the row tight. */
  .dh2-nav {
    flex-wrap: nowrap !important;
    min-height: 56px !important;
    align-items: center !important;
  }
  .dh2-links {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
}

/* ---------- Login modal styling parity with registration form ---------- */
#login-popup .modal-body .input-group { margin-bottom: 8px; }
#login-popup .modal-body .input-group .input-group-text {
  min-width: 130px; background: var(--dh2-surface-2);
  border: 1px solid var(--dh2-border); color: var(--dh2-text); font-weight: 600;
}
#login-popup .modal-body input.form-control {
  background: #fff; border: 1px solid var(--dh2-border); color: var(--dh2-text);
  border-radius: 0 8px 8px 0;
}
[dir="rtl"] #login-popup .modal-body input.form-control { border-radius: 8px 0 0 8px; }
#login-popup .modal-body input.form-control:focus {
  border-color: var(--dh2-accent);
  box-shadow: 0 0 0 3px rgba(122,76,240,0.12); outline: none; z-index: 2;
}


/* ===== Reconciled from inline base template (AR truth) ===== */
[dir="rtl"] [class*="col-xs-"] {float:right}
.dh-hero-meta h1,.dh-hero-meta .h1,.dh-hero-meta-en,.dh-hero-meta-en a {font-size:clamp(22px,2.8vw,32px);font-weight:800;margin:0;line-height:1.25}
@media (max-width:480px) {
  .dh2-quicknav { gap: 6px; }
  .dh2-quicknav a { font-size: 12px; padding: 5px 10px; }
}
@media (max-width:700px) {
  .dh-grid-3 {grid-template-columns:repeat(2,1fr)}
}

/* ===== EN (LTR) base-template shims (reconciled from index-en.html inline) ===== */
[dir="ltr"] body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }  /* before: EN uses Inter */
[dir="ltr"] .h2,[dir="ltr"] h2 { color: var(--dh2-text); font-weight: 800; }
[dir="ltr"] .visible-xs,[dir="ltr"] .visible-sm,[dir="ltr"] .visible-md,[dir="ltr"] .visible-lg,[dir="ltr"] .visible-xs-block,[dir="ltr"] .visible-sm-block,[dir="ltr"] .visible-md-block,[dir="ltr"] .visible-lg-block { display: none !important; }
@media (max-width: 767.98px) { [dir="ltr"] .visible-xs,[dir="ltr"] .visible-xs-block { display: block !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { [dir="ltr"] .visible-sm,[dir="ltr"] .visible-sm-block { display: block !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { [dir="ltr"] .visible-md,[dir="ltr"] .visible-md-block { display: block !important; } }
@media (min-width: 1200px) { [dir="ltr"] .visible-lg,[dir="ltr"] .visible-lg-block { display: block !important; } }
[dir="ltr"] [class*="col-xs-"] { float: left; }
@media (min-width:768px){ [dir="ltr"] [class*="col-sm-"] { float: left; } }
@media (min-width:992px){ [dir="ltr"] [class*="col-md-"] { float: left; } }
@media (min-width:1200px){ [dir="ltr"] [class*="col-lg-"] { float: left; } }


/* ============================================================================
   BEFORE-PARITY LAYER  (added during inline->commonv2 propagation)
   ----------------------------------------------------------------------------
   These rules reproduce the exact "before" (inline-preview) look that the
   product owner chose. They override the repo's never-deployed "mobile
   overhaul" / poster-rounding additions. Values are taken verbatim from the
   inline <style> block that base templates used to carry. `display` is never
   forced here so the mobile menu's .open toggle keeps working.
   If you intentionally change one of these selectors elsewhere in this file,
   update or drop the matching rule here too.
   ========================================================================= */

/* ---- base (all widths) ---- */
.dh-hero-portrait {
  border-radius: 14px !important;
  overflow: hidden !important;
  aspect-ratio: 2 / 3 !important;
  box-shadow: 0 10px 28px var(--dh2-shadow) !important;
  border: 1px solid var(--dh2-border) !important;
  background: var(--dh2-surface-2) !important;
  max-width: none !important;
}
.dh-card .pic { border-radius: 0 !important; }      /* before: square thumbs */
.panel { border-radius: 18px !important; }
.panel-body { padding: 16px !important; font-size: 15px !important; }
:root, html, body { max-width: none !important; }   /* drop repo width guards */
.dh2-brand img { max-width: none !important; }
.dh2-main { padding: 18px 22px 40px !important; }    /* before: no mobile shrink */
.dh2-footer-inner { padding: 50px 22px 24px !important; }
.dh2-quicknav a { min-height: 0 !important; }
.dh-grid-cards {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* ---- mobile <=991px (before chrome) ---- */
@media (max-width: 991px) {
  .dh2-nav { padding: 8px 14px !important; gap: 8px !important; min-height: 64px !important; }
  .dh2-brand img { height: 36px !important; }
  body { padding-top: 76px !important; }
  .dh2-links {
    position: fixed !important;
    top: 64px !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(11,11,20,0.97) !important;
    padding: 14px 18px 100px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
  }
  .dh2-actions {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    background: rgba(11,11,20,0.98) !important;
    backdrop-filter: blur(20px) !important;
    padding: 12px 18px !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    z-index: 1001 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }
  .dh2-toggle {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    z-index: auto !important;
    flex: 0 1 auto !important;
  }
  .dh-hero-inner { grid-template-columns: 130px 1fr !important; gap: 14px !important; }
  .dh-hero-badges { margin-top: 14px !important; gap: 10px !important; }
}

/* ---- mobile <=700px (before hero) ---- */
@media (max-width: 700px) {
  .dh-hero-inner { grid-template-columns: 100px 1fr !important; gap: 10px !important; }
}

/* ---- mobile <=480px (before grid) ---- */
@media (max-width: 480px) {
  .dh-grid-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 10px !important; }
}
/* ===================== end before-parity layer ===================== */


/* ============================================================================
   Mobile artist-page polish (About info + hero badges)
   ----------------------------------------------------------------------------
   Phone/tablet-only refinements. Desktop (>=768px) layout is unchanged.
   - About panel: BS3 col-xs-4/col-xs-8 label/value pairs render as narrow
     blocks on phones (label wraps one word per line + wasted whitespace).
     Stack them full-width: a muted label caption above its value.
   - Hero badges: tall icon-over-text column cards are sparse in the narrow
     hero column; switch to compact horizontal icon + label rows.
   ========================================================================= */
@media (max-width: 767.98px) {
  /* --- About / person-data: stack label above value, full width --- */
  .panel-body .person-data.col-xs-4,
  .panel-body .person-data.col-xs-8 {
    width: 100% !important;
    float: none !important;
    padding: 0 15px;
  }
  .panel-body .person-data.col-xs-4 {           /* label line */
    margin: 0 0 1px;
    line-height: 1.3;
  }
  .panel-body .person-data.col-xs-8 {           /* value line */
    margin: 0 0 14px;
    line-height: 1.45;
  }
  .panel-body .person-data .text-label {
    color: var(--dh2-muted);
    font-weight: 600;
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  /* --- Hero badges: horizontal icon + label rows --- */
  .dh-hero-badges .badge-set { flex-direction: column; gap: 8px; }
  .dh-hero-badges .badge-set > div {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
    text-align: start;
  }
  .dh-hero-badges .badge-set > div img {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 auto;
  }
  .dh-hero-badges .badge-set > div span {
    font-size: 12.5px !important;
    line-height: 1.3;
    text-align: start;
  }
}
/* ================= end mobile artist-page polish ================= */

/* mobile: shrink vis network widgets (largely blank at 500px on phones) */
@media (max-width: 767.98px) {
  #prof-network, #family-network { height: 300px !important; }
}

/* === dh2-profile-redesign === */
.dh2-prof-head { display:flex; align-items:center; gap:18px; margin:4px 0 22px; padding:22px 24px;
  border-radius:22px;
  background: linear-gradient(135deg, rgba(122,76,240,0.10), rgba(216,51,136,0.06)), var(--dh2-surface);
  border:1px solid var(--dh2-border); box-shadow:0 10px 30px var(--dh2-shadow); }
.dh2-prof-avatar { width:82px; height:82px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:3px solid var(--dh2-surface); background:var(--dh2-surface-2);
  box-shadow:0 4px 14px var(--dh2-shadow); }
.dh2-prof-sub { color:var(--dh2-muted); font-weight:700; font-size:14px; margin-bottom:2px; }
.dh2-prof-head h1 { margin:0; font-size:clamp(22px,2.8vw,30px); font-weight:900; line-height:1.15; }
.dh2-prof-head h1 a { color:var(--dh2-text); }
.dh2-prof-head h1 a:hover { color:var(--dh2-accent); }

.dh2-prof-card { background:var(--dh2-surface); border:1px solid var(--dh2-border);
  border-radius:18px; box-shadow:0 4px 14px var(--dh2-shadow); padding:22px 24px; margin-bottom:20px; }
.dh2-prof-card > h2 { display:flex; align-items:center; gap:10px; margin:0 0 18px;
  font-size:19px; font-weight:900; color:var(--dh2-text); }
.dh2-prof-card > h2 .fa { color:var(--dh2-accent); font-size:18px; width:1.1em; text-align:center; }
.dh2-list-title { color:var(--dh2-muted); font-weight:700; font-size:15px; }

.dh2-prof-dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; margin:0; }
.dh2-prof-row { display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:14px;
  align-items:baseline; padding:11px 2px; border-bottom:1px solid var(--dh2-border); }
.dh2-prof-row dt { color:var(--dh2-muted); font-weight:700; font-size:14px; }
.dh2-prof-row dd { margin:0; color:var(--dh2-text); font-size:15px; word-break:break-word; }
.dh2-prof-row dd a { color:var(--dh2-accent); font-weight:700; }
.dh2-prof-actions { margin-top:16px; }
.dh2-prof-quiet-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  border-radius:999px; border:1px solid var(--dh2-border); background:var(--dh2-surface-2);
  color:var(--dh2-text); font-weight:700; font-size:14px; transition:border-color .2s ease, color .2s ease; }
.dh2-prof-quiet-btn:hover { border-color:var(--dh2-accent); color:var(--dh2-accent); }
.dh2-prof-quiet-btn .fa { color:var(--dh2-accent); }

.dh2-list-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.dh2-list-tile { position:relative; background:var(--dh2-surface-2); border:1px solid var(--dh2-border);
  border-radius:14px; padding:16px 18px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.dh2-list-tile:hover { border-color:var(--dh2-accent); box-shadow:0 6px 16px var(--dh2-shadow); transform:translateY(-2px); }
.dh2-list-link { display:block; }
.dh2-list-name { font-size:16px; font-weight:800; color:var(--dh2-text); margin-bottom:4px; word-break:break-word; }
.dh2-list-tile:hover .dh2-list-name { color:var(--dh2-accent); }
.dh2-list-desc { font-size:13px; color:var(--dh2-muted); line-height:1.6; word-break:break-word; }
.dh2-list-del { position:absolute; top:8px; inset-inline-start:8px; width:26px; height:26px;
  border-radius:50%; display:grid; place-items:center; padding:0; border:0; cursor:pointer;
  background:rgba(15,18,38,0.06); color:var(--dh2-muted); font-size:18px; line-height:1;
  transition:background .2s ease, color .2s ease; z-index:2; }
.dh2-list-del:hover { background:var(--dh2-bad); color:#fff; }

.dh2-addlist { margin-top:22px; padding-top:20px; border-top:1px solid var(--dh2-border); }
.dh2-addlist h3 { margin:0 0 14px; font-size:16px; font-weight:800; color:var(--dh2-text); }
.dh2-field { margin-bottom:14px; }
.dh2-field label { display:block; margin-bottom:6px; font-size:13.5px; font-weight:700; color:var(--dh2-muted); }
.dh2-input { width:100%; max-width:520px; background:#fff; border:1px solid var(--dh2-border);
  border-radius:12px; color:var(--dh2-text); padding:11px 14px; font-size:15px;
  transition:border-color .2s ease, box-shadow .2s ease; }
.dh2-input::placeholder { color:var(--dh2-faint); }
.dh2-input:focus { outline:none; border-color:var(--dh2-accent); box-shadow:0 0 0 3px rgba(122,76,240,0.12); }
.dh2-prof-submit { display:inline-flex; align-items:center; gap:8px; padding:11px 24px; border:0;
  border-radius:999px; cursor:pointer; font-weight:800; font-size:15px; color:#fff;
  background:linear-gradient(135deg,var(--dh2-accent),var(--dh2-accent-2));
  box-shadow:0 6px 16px rgba(122,76,240,0.30); transition:box-shadow .2s ease, transform .2s ease; }
.dh2-prof-submit:hover { box-shadow:0 10px 22px rgba(122,76,240,0.45); transform:translateY(-1px); color:#fff; }
.dh2-err { color:var(--dh2-bad); font-weight:600; margin:0 0 12px; }
.dh2-empty { color:var(--dh2-muted); font-size:15px; margin:0; padding:6px 2px; }
.dh2-back { display:inline-flex; align-items:center; gap:6px; margin-bottom:12px;
  color:var(--dh2-muted); font-weight:700; font-size:14px; }
.dh2-back:hover { color:var(--dh2-accent); }

@media (max-width: 767.98px) {
  .dh2-prof-head { padding:16px 16px; gap:14px; }
  .dh2-prof-avatar { width:64px; height:64px; }
  .dh2-prof-card { padding:18px 16px; }
  .dh2-prof-dl { grid-template-columns:1fr; }
  .dh2-list-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .dh2-input { max-width:none; }
}
/* === end dh2-profile-redesign === */