:root {
  --bg: #000;
  --shell: #101010;
  --surface: #151515;
  --surface-2: #181818;
  --surface-3: #202020;
  --line: #262626;
  --line-soft: #1d1d1d;
  --text: #f5f5f5;
  --text-soft: #d7d7d7;
  --muted: #777;
  --muted-2: #cbcbcb;
  --hover: #1a1a1a;
  --strong-hover: #212121;
  --white: #fff;
  --radius-shell: 22px;
  --radius-card: 15px;
  --head: 64px;
  --left: 236px;
  --right: 236px;
  --shell-max: 1280px;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100dvh;
  padding: 24px;
  overflow: hidden;

  font-family: "Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font-family: "Montserrat", sans-serif; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #5f5f5f; outline-offset: 2px; }

/* BASE SHELL — strict three-column frame from the supplied reference */
.app-shell {
  width: min(100%, var(--shell-max));
  height: calc(100dvh - 48px);
  min-height: 620px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--left) minmax(0, 808px) var(--right);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-shell);
  background: var(--shell);

}
.left-panel, .center-panel, .right-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: var(--head) minmax(0,1fr);
  background: var(--shell);
}
.left-panel { border-right: 1px solid var(--line-soft); }
.right-panel { border-left: 1px solid var(--line-soft); }
.pane-head {
  height: var(--head);
  min-width: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);

}
.pane-head--left { padding: 0 16px 0 17px; justify-content: space-between; }
.pane-head--center { gap: 8px; padding: 0 18px; }
.pane-head--right { justify-content: flex-end; gap: 6px; padding: 0 13px; }
.panel-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.panel-scroll::-webkit-scrollbar { display: none; }

/* BRAND / COMMON CONTROLS */
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark {

  display: grid; place-items: center;

  border: 0;
  box-shadow: none;
  flex: none;
}
.brand-mark i { display: none; }

.ghost-icon {
  position: relative;
    flex: none;
  display: grid; place-items: center;
  padding: 0; border: 1px solid transparent;
  background: transparent;  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.ghost-icon:active { transform: scale(.96); }

.avatar {
    flex: none;
  display: grid; place-items: center;
  border: 1px solid #343434; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #3b3b3b, #171717 68%);
  color: #dcdcdc;  font-weight: 800;
}
button.avatar { padding: 0; cursor: pointer; }
.avatar--me { background: linear-gradient(145deg,#333,#151515); }
.avatar--1 { background: linear-gradient(145deg,#3d3d3d,#181818); }
.avatar--2 { background: linear-gradient(145deg,#2f2f2f,#141414); }
.avatar--3 { background: radial-gradient(circle at 35% 30%,#434343,#171717 65%); }
.avatar--4 { background: linear-gradient(135deg,#424242,#141414); }
.avatar--5 { background: linear-gradient(20deg,#393939,#151515); }
.avatar--6 { background: linear-gradient(165deg,#363636,#101010); }
.avatar--7 { background: linear-gradient(145deg,#404040,#161616); }
.avatar--8 { background: radial-gradient(circle at 30% 30%,#484848,#131313 68%); }
.notification-dot, .unread-dot {
  width: 6px; height: 6px; border-radius: 50%;

}
.notification-dot { position: absolute; top: 7px; right: 7px; }

/* SEARCH */
.search-box {
   min-width: 0; flex: 1;
  display: flex; align-items: center;
  border: 1px solid var(--line);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.search-box:focus-within { background: #0e0e0e; }
.search-icon { margin-left: 13px; color: #6f6f6f; }
.search-box input {
  width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  padding: 0 10px;   font-weight: 500;
}
.search-box input::placeholder { color: #5d5d5d; }
.search-box.is-demo-typing {
  border-color:#343434;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}
.search-box.is-demo-typing .search-icon {
  color:#9a9a9a;
  animation:search-demo-pulse 1.25s ease-in-out infinite;
}
.search-box.is-demo-erasing .search-icon { color:#777;opacity:.72; }
@keyframes search-demo-pulse {
  0%,100% { opacity:.58;transform:scale(.96); }
  50% { opacity:1;transform:scale(1.05); }
}
.search-hint {
  margin-right: 8px;
  border: 1px solid #2e2e2e; border-radius: 6px;
  color: #676767;   font-weight: 600;
  white-space: nowrap;
}
.mobile-brand, .mobile-head-actions { display: none; }

/* LEFT PANEL */
.sidebar-body { padding: 10px 10px 20px; }
.nav-stack { display: grid; }
.nav-group { padding: 7px 0 12px; border-bottom: 1px solid var(--line-soft); }
.nav-group--first { padding-top: 1px; }
.nav-title { padding: 8px 11px 6px; color: #5d5d5d;  font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-item {
   padding: 0 11px; border-radius: 11px;
  display: flex; align-items: center;
    font-weight: 550;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.nav-item:active { transform: scale(.985); }
.nav-item.active { font-weight: 650; }
.nav-item > i { text-align: center;  flex: none; }
.nav-item > span:not(.mini-avatar) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .unread-dot { margin-left: auto; }
.mini-avatar { flex: none; display: grid; place-items: center; border: 1px solid #3a3a3a; border-radius: 50%; color: #cfcfcf;  font-weight: 800; }
.mini-avatar--1 { background: linear-gradient(145deg,#393939,#171717); }
.mini-avatar--2 { background: radial-gradient(circle at 35% 30%,#454545,#151515 70%); }
.mini-avatar--3 { background: linear-gradient(25deg,#383838,#121212); }
.sidebar-footer { padding: 16px 11px 4px; color: #505050;  line-height: 1.6; }
.sidebar-footer-links { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 6px; }
.sidebar-footer a:hover { color: #888; }

/* HOME CENTER */
.feed { padding: 16px 18px 28px; }
.chips {display: flex;gap: 7px;overflow-x: auto;scrollbar-width: none;margin-bottom: 16px;}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 31px; padding: 0 12px; flex: none;
  border: 1px solid var(--line); border-radius: 999px;
  background: #151515; color: #888;
   font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.chip:hover { background: #1c1c1c; color: #ddd; }
.chip:active { transform: scale(.96); }

.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.eyebrow { margin-bottom: 4px; color: #656565;  font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.section-head h1, .section-head h2 {margin: 0;line-height: 1.15;letter-spacing: -.035em;font-weight: 750;}
.section-head p { margin: 4px 0 0; color: #666; }
.text-action, .inline-link {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: #777;
   font-weight: 700; cursor: pointer;
}
.text-action:hover, .inline-link:hover { color: #d5d5d5; }

.video-grid {display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 14px 14px;}
.video-card { min-width: 0; }
.thumb {
  position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; isolation: isolate;
  border: 1px solid #262626; border-radius: var(--radius-card); background: #171717;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.video-card:hover .thumb { transform: translateY(-2px); border-color: #3a3a3a; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.thumb::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(to top,rgba(0,0,0,.28),transparent 42%); pointer-events:none; }
.orbit--1 { width: 36%; aspect-ratio: 1; left: 32%; top: 17%; }
.orbit--2 { width: 52%; aspect-ratio: 1; left: 24%; top: 1%; border-color: rgba(255,255,255,.09); }
.duration { position: absolute;   bottom: 7px;   border-radius: 6px;    font-weight: 800; letter-spacing: .01em; }
.card-info { display: grid;    align-items: start; }

.card-copy { min-width: 0; }
.card-copy h2 { margin: 0 0 4px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:#ededed;   font-weight:600; }
.card-copy p { margin:0; color:#6f6f6f; }
.verified { color: #969696; }
.more-button { display:grid; place-items:center; padding:0; border:0;  background:transparent;  cursor:pointer; }

.mobile-discovery { display:none; }

/* RIGHT RAIL */
.rail-body { padding: 15px 12px 24px; }
.rail-section { margin-bottom: 23px; }
.rail-head { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin:0 2px 10px; }
.rail-kicker { display:block; margin-bottom:3px; color:#5d5d5d;  font-weight:800; text-transform:uppercase; letter-spacing:.11em; }
.rail-head h3 { margin:0;  line-height:1.2; font-weight:600; }
.rail-head > a { color:#676767;  font-weight:600; }
.rail-head > a:hover { color:#cfcfcf; }
.continue-card { padding:8px; border:1px solid var(--line); border-radius:13px; background:#131313; }
.rail-media { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border:1px solid #292929; border-radius:10px; }
.rail-media:hover .rail-copy h4 { margin:7px 0 2px; font-size:10px; font-weight:600; }
.rail-copy p { margin:0; color:#686868;  line-height:1.45; }
.watch-progress { height:2px; margin-top:8px; overflow:hidden; border-radius:999px; }
.watch-progress i { display:block; width:58%; height:100%;  border-radius:inherit; }
.compact-list { display:grid; gap:11px; }
.compact-video { display:grid;   align-items:start; min-width:0; }
.compact-thumb, .watch-rail-thumb, .mobile-next-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid #282828; border-radius:9px; background:#1a1a1a; }
.compact-thumb--1 { background: radial-gradient(circle at 68% 34%,#383838,transparent 18%),linear-gradient(145deg,#222,#0d0d0d 69%); }
.compact-thumb--2 { background: linear-gradient(120deg,#262626,#0d0d0d 66%); }
.compact-thumb--3 { background: radial-gradient(circle at 32% 36%,#3a3a3a,transparent 18%),linear-gradient(25deg,#101010,#202020); }
.compact-thumb--4 { background: linear-gradient(155deg,#333 0 7%,#121212 8% 43%,#252525 44% 51%,#0b0b0b 52%); }
.compact-thumb--5 { background: repeating-linear-gradient(115deg,#101010 0 20px,#1c1c1c 21px 40px); }
.compact-video h4 { margin:1px 0 4px; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;   font-weight:650; }
.compact-video p { margin:0; color:#676767;  line-height:1.4; }
.rail-tags { display:flex; flex-wrap:wrap; gap:6px; }
.rail-tags a { padding:6px 8px; border:1px solid var(--line); border-radius:999px; background:#151515; color:#7f7f7f;  font-weight:650; }
.rail-tags a:hover { background:#1c1c1c; color:#cfcfcf; }

/* WATCH PAGE */
.watch-content { padding: 15px 18px 28px; }





















.watch-header { padding-top:13px; }
.watch-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.watch-title-row h1 { margin:0;   font-weight:650; }
.more-button--watch { flex:none; margin-top:8px; }
.watch-main-row { display:flex;  gap:12px; align-items:center; margin-top:11px; padding-bottom:13px; border-bottom:1px solid var(--line-soft); }
.channel-box { display:flex; align-items:center; min-width:0; }

.channel-copy { min-width:0; }
.channel-copy strong { display:block; color:#e9e9e9;  font-weight:700; white-space:nowrap; }
.channel-copy span { display:block; margin-top:2px; color:#666;  white-space:nowrap; }
.subscribe-button { height:31px; margin-left:4px; padding:0 12px; border:1px solid #f1f1f1; border-radius:999px;    font-weight:800; cursor:pointer; transition:.15s ease; }

.watch-actions { display:flex; gap:6px; min-width:0; }
.action-button, .split-action { height:31px; border:1px solid var(--line); border-radius:999px; background:#161616; color:#b8b8b8; }
.action-button { display:flex; align-items:center; gap:6px; padding:0 10px;  font-weight:650; cursor:pointer; }
.action-button:hover, .split-action:hover { background:#1d1d1d; color:#eee; }
.action-button i { font-size:10px; }
.split-action { display:flex; overflow:hidden; }
.split-action button { height:100%; display:flex;align-items:center;gap:5px;padding:0 9px;border:0;background:transparent;color:inherit;cursor:pointer;font-weight:650; }
.split-action button + button { border-left:1px solid #2a2a2a; }
.split-action i { font-size:10px; }
.description-card { margin-top:11px; padding:11px 12px; border:1px solid transparent; border-radius:12px; background:#171717; transition:border-color .15s ease; }

.description-meta { display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; color:#d3d3d3; }
.description-meta a { color:#999; font-weight:650; }
.description-card p { margin:7px 0 0; color:#acacac; }
.show-more { margin-top:5px; padding:0; border:0; background:none;   font-weight:700; cursor:pointer; }
.show-more i { margin-left:3px; }
.mobile-next { display:none; }
.comments { margin-top:19px; }
.comments-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:13px; }
.comments-head h2 { margin:0;  font-weight:600; }
.sort-button { display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--line); border-radius:9px; background:#151515; color:#7c7c7c;  font-weight:650; cursor:pointer; }
.sort-button:hover { color:#ccc; background:#1a1a1a; }
.comment-input { display:flex; align-items:center; gap:8px; }
.comment-input .avatar { width:28px;height:28px; }
.comment-field { flex:1; display:flex;align-items:center; border-bottom:1px solid #2a2a2a; }
.comment-field input { min-width:0; flex:1; padding:7px 2px; border:0;outline:0;background:transparent; }
.comment-field button { display:grid;place-items:center;border:0;background:transparent;cursor:pointer; }
.comment-field button:hover { color:#aaa; }
.comment { display:grid;   margin-top:15px; }
.comment .avatar { width:28px;height:28px; }
.comment-author { color:#bdbdbd;  font-weight:650; }
.comment-author span { color:#5f5f5f; font-weight:500; margin-left:4px; }
.comment p { margin:5px 0 0; color:#b8b8b8; }
.comment-actions { display:flex; align-items:center; gap:4px; margin-top:5px; }
.comment-actions button { padding:0 7px; border:0;border-radius:7px;background:transparent;color:#656565;cursor:pointer; }
.comment-actions button:hover { background:#191919;color:#aaa; }
.comment-actions i { margin-right:3px; }
.chips--rail { margin-bottom:15px; }
.watch-rail-list { display:grid; gap:12px; }
.watch-rail-card { display:grid;   align-items:start; }

.watch-rail-card h4 { margin:1px 0 4px; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;   font-weight:650; }
.watch-rail-card p { margin:0; color:#686868;  line-height:1.45; }

.mobile-nav { display:none; }

/* desktop / laptop */
@media (max-width: 1328px) {
  body { padding:16px; }
  .app-shell { height:calc(100dvh - 32px); grid-template-columns:220px minmax(0,1fr) 220px; min-height:560px; }
}

@media (max-width: 1120px) {
  .app-shell { grid-template-columns:190px minmax(0,1fr) 210px; }
  .brand-name { font-size:10px; }
.nav-item { font-size:9.5px; }
  .watch-actions .action-button span { display:none; }
  .action-button { width:31px; justify-content:center; padding:0; }
}

/* tablet: keep the frame, hide only the recommendation rail */
@media (max-width: 960px) {
  .app-shell { grid-template-columns:190px minmax(0,1fr); }
  .right-panel { display:none; }
  .video-grid { gap:22px 12px; }
}

@media (max-width: 780px) and (min-width: 641px) {
  body { padding:12px; }
  .app-shell { height:calc(100dvh - 24px); grid-template-columns:74px minmax(0,1fr); border-radius:18px; }
  .pane-head--left { padding:0; justify-content:center; }
  .brand-name, .nav-title, .nav-item > span:not(.mini-avatar), .nav-item .unread-dot, .sidebar-footer { display:none; }
  .brand { justify-content:center; }
  .nav-group { padding:8px 0; }
  .nav-item { width:44px; height:42px; min-height:42px; padding:0; margin:1px auto; justify-content:center; }
  .nav-item > i { width:auto; font-size:14px; }
  .channel-link .mini-avatar { margin:0; }
  .feed, .watch-content { padding-left:14px; padding-right:14px; }
  .search-hint { display:none; }
}

/* PHONE */
@media (max-width: 640px) {
  :root { --head:58px; }
  body { padding:0; overflow:auto; }
  .app-shell { border:0; border-radius:0; box-shadow:none; }

  .center-panel { grid-template-rows:var(--head) auto; min-height:100dvh; }
  .pane-head--center { position:sticky; z-index:40; top:0; gap:7px; padding:0 10px; }
  .mobile-brand { display:flex; align-items:center; flex:none; }
  .mobile-brand .brand-mark { width:31px;height:31px;border-radius:10px; }
  .mobile-back { width:32px;height:32px;display:grid;place-items:center;border-radius:9px; }

  .search-box { border-radius:11px; }
  .search-box input { padding:0 8px; }
  .search-icon { margin-left:11px; }
  .search-hint, .voice-search { display:none; }
  .mobile-head-actions { display:flex; align-items:center; gap:2px; }
  .mobile-head-actions .ghost-icon { width:33px;height:33px; }

  .feed, .watch-content { padding:12px 10px calc(84px + env(safe-area-inset-bottom)); }
  .chips { margin:0 -10px 17px; padding:0 10px; gap:6px; }
  .chip { padding:0 11px; }
  .section-head { margin-bottom:13px; }

  .video-grid { grid-template-columns:1fr; gap:24px; }
  .thumb { border-radius:13px; }

    .duration { bottom:8px; }

  .mobile-discovery { display:block; margin-top:28px; padding-top:18px; border-top:1px solid var(--line-soft); }
  .section-head--compact { align-items:center; }
  .mobile-feature { display:grid;   align-items:center;  border:1px solid var(--line); border-radius:14px; }
  .mobile-feature-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid #292929; border-radius:10px; }
  .mobile-feature h3 { margin:0 0 5px;  line-height:1.35; }
  .mobile-feature p { margin:0; color:#6d6d6d;  line-height:1.45; }

  .watch-content { padding-left:0; padding-right:0; padding-top:0; }
  .watch-page .pane-head--center .search-box { display:none; }
  .watch-page .pane-head--center { justify-content:space-between; }
  .watch-page .mobile-head-actions { margin-left:auto; }
  

  
  .watch-header, .description-card, .comments, .mobile-next { margin-left:10px; margin-right:10px; }
  .watch-header { padding-top:12px; }
  .watch-title-row h1 { line-height:1.35; }
  .watch-main-row { align-items:flex-start; flex-wrap:wrap; gap:11px; }
  .channel-box { width:100%; }
  .channel-copy { flex:1; }

  .subscribe-button { margin-left:auto; height:30px; }
  .watch-actions { width:100%; overflow:auto; padding-bottom:1px; scrollbar-width:none; }
  .watch-actions::-webkit-scrollbar { display:none; }
  .watch-actions .action-button span { display:inline; }
  .action-button { width:auto; padding:0 10px; flex:none; }
  .description-card { margin-top:11px; }

  .mobile-next { display:block; margin-top:20px; padding-top:17px; border-top:1px solid var(--line-soft); }
  .mobile-next-card { display:grid;   align-items:start; margin-top:10px; }
  .mobile-next-card h3 { margin:1px 0 4px;  line-height:1.35; }
  .mobile-next-card p { margin:0; color:#6b6b6b;  line-height:1.45; }
  .comments { margin-top:21px; padding-top:18px; border-top:1px solid var(--line-soft); }
  .comments-head { align-items:center; }

  .sort-button { border-radius:8px; }

  .mobile-nav {
    position:fixed; z-index:60; left:8px; right:8px; bottom:max(8px,env(safe-area-inset-bottom));
     display:grid; grid-template-columns:repeat(4,1fr);
    padding:5px 6px; border:1px solid #2a2a2a; border-radius:18px;
    background:rgba(17,17,17,.92); backdrop-filter:blur(20px); box-shadow:0 12px 38px rgba(0,0,0,.35);
 }
  .mobile-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center;  border-radius:13px; color:#666;  font-weight:650; }

  .mobile-nav a.active { background:#ededed; color:#0a0a0a; }
}

@media (max-width: 380px) {
  .mobile-head-actions .ghost-icon:first-child { display:none; }

  .action-button { padding:0 9px; }
}

/* ===== Final theme + media layer ===== */
html, body { background: var(--bg); color: var(--text); }
.app-shell,
.left-panel,
.center-panel,
.right-panel { background: var(--shell); }
.app-shell { border-color: var(--line); box-shadow: 0 0 0 1px color-mix(in srgb,var(--text) 1%,transparent), 0 32px 110px var(--shadow); }
.left-panel { border-right-color: var(--line-soft); }
.right-panel { border-left-color: var(--line-soft); }
.pane-head { border-bottom-color: var(--line-soft); }
.brand-mark { background: url("../images/logo.svg") center / contain no-repeat; color: transparent; border-color: transparent; }

.avatar,
.mini-avatar { border-color: var(--line); background: var(--surface-3); color: var(--text-soft); }
.avatar--me,.avatar--1,.avatar--2,.avatar--3,.avatar--4,.avatar--5,.avatar--6,.avatar--7,.avatar--8,
.mini-avatar--1,.mini-avatar--2,.mini-avatar--3 { background: var(--surface-3); }
.notification-dot,.unread-dot { background: var(--text); box-shadow: 0 0 0 2px var(--shell); }

.search-icon,.search-box input::placeholder,.search-hint { color: var(--muted); }

.nav-title,.sidebar-footer,.eyebrow,.section-head p,.text-action,.inline-link,.card-copy p,.rail-copy p,.compact-video p,.watch-rail-card p,.channel-copy span,.description-meta,.comment-author span,.comment-actions button { color: var(--muted); }

.sidebar-footer a:hover,.text-action:hover,.inline-link:hover { color: var(--text-soft); }
.chip,.sort-button,.action-button,.split-action,.rail-tags a { color: var(--muted-2); }
.chip:hover,.sort-button:hover,.action-button:hover,.split-action button:hover,.rail-tags a:hover { background:var(--strong-hover); color:var(--text); }

.card-copy h2,.rail-copy h4,.compact-video h4,.watch-rail-card h4,.watch-title-row h1,.comments-head h2,.comment-author { color:var(--text); }

.comment-field { border-bottom-color:var(--line); }

.comment-field button,.more-button { color:var(--muted); }
.comment-field button:hover,.more-button:hover { color:var(--text); background:var(--hover); }

/* Every video preview is an actual photo. Decorative illustration layers were removed. */
.thumb,
.compact-thumb,
.watch-rail-thumb,
.mobile-next-thumb,
.mobile-feature-thumb,
.rail-media { background:var(--surface-2) !important; border-color:var(--line); }
.thumb::after { display:none; }
.thumb-image{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center;
}
.thumb-image { transition:transform .38s var(--ease-out-quart), filter .22s ease; }
.video-card:hover .thumb-image,
.compact-video:hover .thumb-image,
.watch-rail-card:hover .thumb-image,
.mobile-next-card:hover .thumb-image { transform:scale(1.025); }
.duration {
  z-index:3;
  background:rgba(0,0,0,.78);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(5px);
}





@media (max-width:640px) {

  .mobile-feature { background:var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* ==========================================================================
   UX SCALE / MOTION / SKELETON
   Readability scale:
   - interactive targets: 40–44px desktop, 44px touch
   - Font Awesome UI icons: mostly 16–20px
   - metadata: 10.5–12px
   - controls / navigation: 12–14px
   - content titles: 13.5–22px
   ========================================================================== */

:root {
  --tap-desktop: 40px;
  --tap-touch: 44px;
  --icon-ui: 17px;
  --icon-compact: 15px;
  --font-caption: 10px;
  --font-meta: 10.5px;
  --font-ui: 12.5px;
  --font-body: 13px;
  --font-card-title: 13.5px;
  --font-section-title: 21px;
  --font-watch-title: 16px;
  --ease-out-quart: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.2,.7,.2,1);
  --skeleton-base: #181818;
  --skeleton-hi: #232323;
}

/* Product palette: fixed Threads-inspired dark theme. */
html {
  --bg:#000000; --shell:#101010; --surface:#151515; --surface-2:#181818; --surface-3:#202020;
  --line:#292929; --line-soft:#1d1d1d; --text:#f5f5f5; --text-soft:#d7d7d7; --muted:#777; --muted-2:#a0a0a0;
  --hover:#1a1a1a; --strong-hover:#222; --skeleton-base:#181818; --skeleton-hi:#232323;
  --shadow:rgba(0,0,0,.42); --control-bg:#0b0b0b; --control-soft:#141414; --inverse:#0a0a0a;
  color-scheme: dark;
}

body,
.pane-head,
.left-panel,
.center-panel,
.right-panel,
.app-shell {
  transition:
    background-color .28s var(--ease-soft),
    border-color .28s var(--ease-soft),
    color .28s var(--ease-soft);
}

/* Bring hard-coded surfaces into the active palette without changing the frame. */

.chip, .sort-button, .action-button, .split-action, .rail-tags a { background: var(--surface); border-color: var(--line); }

.thumb, .compact-thumb, .watch-rail-thumb, .mobile-next-thumb { border-color: var(--line); }

/* Readability: previous 7–10px copy was too small for a desktop video UI. */

.brand-mark { width: 34px; height: 34px; border-radius: 11px; }
.brand-mark i { font-size: 13px; }

.ghost-icon {
  width: var(--tap-desktop);
  height: var(--tap-desktop);
  border-radius: 99px;
}
.ghost-icon i { font-size: var(--icon-ui); }

.avatar { width: 36px; height: 36px; font-size: 11px; }
.search-box { height: 42px; border-radius: 13px; }
.search-icon { font-size: 15px; }
.search-box input { font-size: 13px; }
.search-hint { font-size: 10px; padding: 4px 7px; }

.nav-title { font-size: 10px; padding-top: 9px; }
.nav-item {
  min-height: 44px;
  font-size: var(--font-ui);
  line-height: 1.3;
  gap: 12px;
}
.nav-item > i { width: 20px; font-size: 16px; }
.mini-avatar { width: 26px; height: 26px; font-size: 8px; }
.sidebar-footer { font-size: 10px; }

.chip {
  min-height: 31px;
  padding-inline: 13px;
  font-size: 11.5px;
}
.eyebrow { font-size: 9.5px; }
.section-head h1,
.section-head h2 { font-size: var(--font-section-title); }
.section-head p { font-size: 11px; line-height: 1.45; }
.text-action,
.inline-link { min-height: 32px; font-size: 10.5px; }
.text-action i,
.inline-link i { font-size: 11px; }

.duration { font-size: 10px; padding: 4px 6px; }
.card-info {
  grid-template-columns: 36px minmax(0,1fr) 32px;
  gap: 10px;
  margin-top: 11px;
}
.card-info .avatar { width: 36px; height: 36px; }
.card-copy h2 {
  margin-bottom: 5px;
  font-size: var(--font-card-title);
  line-height: 1.38;
}
.card-copy p { font-size: var(--font-meta); line-height: 1.55; }
.verified { font-size: 9px; }
.more-button { width: 32px; height: 36px; border-radius: 9px; }
.more-button i { font-size: 15px; }

.rail-kicker { font-size: 9px; }
.rail-head h3 { font-size: 14px; }
.rail-head > a { min-height: 28px; display:inline-flex; align-items:center; font-size: 10px; }
.rail-copy h4 { font-size: 13px; }
.rail-copy p { font-size: 9.5px; }
.compact-video { grid-template-columns: 82px minmax(0,1fr); gap: 9px; }
.compact-video h4 { font-size: 11px; line-height: 1.4; }
.compact-video p { font-size: 9px; }
.rail-tags a { min-height: 30px; display:inline-flex; align-items:center; padding-inline:9px; font-size: 10px; }

/* Watch page scale */










.watch-title-row h1 { font-size: var(--font-watch-title); line-height: 1.32; }
.channel-box { gap: 10px; }
.channel-box .avatar { width: 40px; height: 40px; }
.channel-copy strong { font-size: 12px; }
.channel-copy span { font-size: 10px; }
.subscribe-button {
  min-height: 36px;
  padding-inline: 14px;
  font-size: 10.5px;
}
.action-button,
.split-action { min-height: 36px; }
.action-button { font-size: 10.5px; padding-inline: 11px; }
.action-button i,
.split-action i { font-size: 13px; }
.split-action button { min-width: 36px; padding-inline: 10px; font-size: 10.5px; }
.description-meta { font-size: 11px; }
.description-card p { font-size: 11.5px; line-height: 1.65; }
.show-more { min-height: 30px; font-size: 10.5px; }
.show-more i { font-size: 9px; }
.comments-head h2 { font-size: 14px; }
.sort-button { min-height: 34px; font-size: 10px; padding-inline: 10px; }
.comment-input .avatar,
.comment .avatar { width: 34px; height: 34px; }
.comment { grid-template-columns: 34px minmax(0,1fr); gap: 10px; }
.comment-field input { min-height: 36px; font-size: 11px; }
.comment-field button { width: 36px; height: 36px; font-size: 14px; }
.comment-author { font-size: 10.5px; }
.comment p { font-size: 11.5px; line-height: 1.58; }
.comment-actions button { min-height: 30px; font-size: 9.5px; }
.watch-rail-card { grid-template-columns: 98px minmax(0,1fr); gap: 9px; }
.watch-rail-thumb { width: 98px; }
.watch-rail-card h4 { font-size: 10.5px; line-height: 1.4; }
.watch-rail-card p { font-size: 8.8px; }

/* More tactile interaction without turning the interface into a "bouncy" app. */
button,
.nav-item,
.video-card,
.compact-video,
.watch-rail-card,
.mobile-next-card,
.mobile-feature,
.continue-card {
  -webkit-user-select: none;
  user-select: none;
}
button {
  transition:
    transform .16s var(--ease-out-quart),
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}
button:active { transform: scale(.965); }
.video-card .thumb,
.compact-video .compact-thumb,
.watch-rail-card .watch-rail-thumb,
.mobile-next-card .mobile-next-thumb {
  transition: transform .28s var(--ease-out-quart), border-color .22s ease, box-shadow .22s ease;
}
.compact-video:hover .compact-thumb,
.watch-rail-card:hover .watch-rail-thumb,
.mobile-next-card:hover .mobile-next-thumb { transform: scale(1.018); }

/* JS-driven reveal / refresh */
.js .reveal-item {
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity .46s var(--ease-out-quart),
    transform .46s var(--ease-out-quart);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal-item.is-visible { opacity: 1; transform: none; }
.video-grid.is-refreshing,
.watch-rail-list.is-refreshing { animation: softRefresh .42s var(--ease-soft); }
@keyframes softRefresh {
  0% { opacity:1; transform:none; }
  42% { opacity:.58; transform:translateY(3px); }
  100% { opacity:1; transform:none; }
}
.is-spinning { animation: spinOnce .48s var(--ease-out-quart); }
@keyframes spinOnce { to { transform:rotate(360deg); } }

.action-button.is-active,
.split-action button.is-active,
.comment-actions button.is-active {
  color: var(--text);
  background: var(--strong-hover);
}
.description-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.description-card.is-expanded p { display:block; }
.show-more i { transition: transform .22s var(--ease-out-quart); }
.description-card.is-expanded .show-more i { transform: rotate(180deg); }

.has-scrolled .pane-head--center {
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  border-bottom-color: var(--line);
}

/* Skeleton loading */
.skeleton-overlay { display:none; }
.js .skeleton-overlay {
  position:fixed;
  z-index:120;
  inset:0;
  display:block;
  padding:24px;
  background:var(--bg);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .34s ease, visibility .34s ease, background-color .25s ease;
}
.js body.is-ready .skeleton-overlay {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.js body.is-navigating .skeleton-overlay {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-duration:.16s;
}
.js .app-shell,
.js .mobile-nav {
  transition: opacity .34s ease, transform .34s var(--ease-out-quart);
}
.js body:not(.is-ready) .app-shell,
.js body:not(.is-ready) .mobile-nav,
.js body.is-navigating .app-shell,
.js body.is-navigating .mobile-nav {
  opacity:0;
  transform:scale(.997);
}

.skeleton-shell {
  width:min(100%,var(--shell-max));
  height:calc(100dvh - 48px);
  min-height:620px;
  margin:0 auto;
  display:grid;
  grid-template-columns:var(--left) minmax(0,808px) var(--right);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-shell);
  background:var(--shell);

}
.skeleton-pane {
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:var(--head) minmax(0,1fr);
}
.skeleton-left { border-right:1px solid var(--line-soft); }
.skeleton-right { border-left:1px solid var(--line-soft); }
.skeleton-head {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  border-bottom:1px solid var(--line-soft);
}
.skeleton-center-head { padding-inline:18px; }
.skeleton-right-head { justify-content:flex-end; padding-inline:13px; }
.sk {
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--skeleton-base);
}
.sk::after {
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-110%);
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--skeleton-hi) 88%,transparent) 48%,transparent 100%);
  animation:skeletonShimmer 1.18s ease-in-out infinite;
}
@keyframes skeletonShimmer { 100% { transform:translateX(110%); } }

.sk-logo { width:34px;height:34px;border-radius:11px;flex:none; }
.sk-brand { width:66px;height:11px;border-radius:6px; }
.sk-circle { width:36px;height:36px;border-radius:50%;flex:none; }
.sk-head-action { margin-left:auto; }
.sk-avatar { width:34px;height:34px;border-radius:50%;flex:none; }
.sk-avatar--lg { width:40px;height:40px; }
.sk-search { height:42px;flex:1;border-radius:13px; }

.skeleton-sidebar { padding:13px 10px; }
.sk-nav { height:38px;margin-bottom:6px;border-radius:10px; }
.sk-caption { width:58px;height:8px;margin:14px 11px 9px;border-radius:5px; }
.sk-divider { height:1px;margin:9px 0;background:var(--line-soft); }
.sk-divider::after { display:none; }

.skeleton-center-scroll {
  min-height:0;
  overflow:hidden;
  padding:16px 18px 28px;
}
.skeleton-watch-center { display:none; }
.watch-page .skeleton-home-center { display:none; }
.watch-page .skeleton-watch-center { display:block; }

.skeleton-chips { display:flex; gap:7px; margin-bottom:22px; overflow:hidden; }
.sk-chip { width:72px;height:34px;border-radius:999px;flex:none; }
.sk-chip--active { width:50px; }
.skeleton-title-row { display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px; }
.skeleton-title-row > div { min-width:0; }
.sk-eyebrow { width:86px;height:8px;border-radius:5px;margin-bottom:7px; }
.sk-title { width:150px;height:18px;border-radius:7px;margin-bottom:7px; }
.sk-title--watch { width:min(420px,70%);height:20px; }
.sk-title--comments { width:126px;height:14px;margin-bottom:14px; }
.sk-subtitle { width:172px;height:9px;border-radius:5px; }
.sk-action { width:66px;height:30px;border-radius:9px; }

.skeleton-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px; }
.skeleton-card { min-width:0; }
.sk-media { width:100%;aspect-ratio:16/9;border-radius:var(--radius-card); }
.skeleton-card-meta { display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;margin-top:11px; }
.skeleton-card-meta > div,
.skeleton-comment-row > div,
.skeleton-rail-row > div { min-width:0; }
.sk-line { height:8px;border-radius:5px;margin-bottom:7px; }
.sk-line--wide { width:92%; }
.sk-line--mid { width:68%; }
.sk-line--short { width:44%; }
.sk-line--small { width:28%; }

.sk-player { width:100%;aspect-ratio:16/9;border-radius:15px; }
.skeleton-watch-title { padding-top:16px; }
.skeleton-channel-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 0 14px;
  border-bottom:1px solid var(--line-soft);
}
.skeleton-channel-copy { width:120px; }
.sk-pill { width:92px;height:36px;border-radius:999px;margin-left:4px; }
.sk-pill--wide { width:108px;margin-left:auto; }
.skeleton-description {
  margin-top:12px;
  padding:14px;
  border-radius:13px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
}
.skeleton-comments { margin-top:22px; }
.sk-comment-input { width:100%;height:38px;border-radius:10px; }
.skeleton-comment-row { display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;margin-top:16px; }

.skeleton-rail { padding:16px 12px; }
.sk-rail-title { width:110px;height:13px;border-radius:6px;margin-bottom:12px; }
.sk-rail-media { width:100%;aspect-ratio:16/9;border-radius:10px;margin-bottom:10px; }
.skeleton-rail-row { display:grid;grid-template-columns:82px minmax(0,1fr);gap:9px;margin-top:13px; }
.sk-rail-thumb { width:82px;aspect-ratio:16/9;border-radius:9px; }
.skeleton-mobile-nav { display:none; }

/* Tablet */
@media (max-width:1328px) {
  .js .skeleton-overlay { padding:16px; }
  .skeleton-shell { height:calc(100dvh - 32px);grid-template-columns:220px minmax(0,1fr) 220px;min-height:560px; }
}
@media (max-width:1120px) {
  .skeleton-shell { grid-template-columns:190px minmax(0,1fr) 210px; }
}
@media (max-width:960px) {
  .skeleton-shell { grid-template-columns:190px minmax(0,1fr); }
  .skeleton-right { display:none; }
}
@media (max-width:780px) and (min-width:641px) {
  .js .skeleton-overlay { padding:12px; }
  .skeleton-shell { height:calc(100dvh - 24px);grid-template-columns:74px minmax(0,1fr);border-radius:18px; }
  .skeleton-left .sk-brand,
  .skeleton-left .sk-head-action,
  .skeleton-left .sk-caption { display:none; }
  .skeleton-left .skeleton-head { justify-content:center;padding:0; }
  .skeleton-sidebar { padding-inline:12px; }
  .skeleton-left .sk-nav { width:44px;height:42px;margin:4px auto;border-radius:11px; }
}

/* Phone: prioritize 44px touch targets and readable 11–17px UI text. */
@media (max-width:640px) {
  :root {
    --font-card-title:14px;
    --font-section-title:20px;
    --font-watch-title:18px;
 }
  .ghost-icon,
  .mobile-head-actions .ghost-icon,
  .mobile-back {
    width:var(--tap-touch);
    height:var(--tap-touch);
 }
  .ghost-icon i { font-size:18px; }
  .mobile-head-actions .avatar { width:36px;height:36px; }
  .search-box { height:40px; }
  .search-box input { font-size:13px; }
  .search-icon { font-size:15px; }
  .chip { min-height:36px;height:36px;font-size:11.5px; }
  .section-head h1,
  .section-head h2 { font-size:20px; }
  .section-head p { font-size:11px; }
  .eyebrow { font-size:9px; }
  .card-info { grid-template-columns:38px minmax(0,1fr) 36px;gap:10px; }
  .card-info .avatar { width:38px;height:38px; }
  .card-copy h2 { font-size:14px;line-height:1.4; }
  .card-copy p { font-size:10.5px; }
  .more-button { width:36px;height:40px; }
  .mobile-feature { grid-template-columns:148px minmax(0,1fr);gap:11px;padding:9px; }
  .mobile-feature h3 { font-size:12px; }
  .mobile-feature p { font-size:9.5px; }

  

  .channel-copy strong { font-size:12px; }
  .channel-copy span { font-size:10px; }
  .subscribe-button { min-height:38px;font-size:10.5px; }
  .action-button,.split-action { min-height:40px; }
  .action-button { font-size:10.5px; }
  .description-meta { font-size:9.5px; }
  .description-card p { font-size:11.5px; }
  .comments-head h2 { font-size:14px; }
  .sort-button { min-height:38px;font-size:9.5px; }
  .comment-field input { font-size:12px; }
  .comment-author { font-size:10.5px; }
  .comment p { font-size:11.5px; }
  .comment-actions button { min-height:34px;font-size:10px; }
  .mobile-next-card { grid-template-columns:148px minmax(0,1fr);gap:10px; }
  .mobile-next-card h3 { font-size:12px; }
  .mobile-next-card p { font-size:9.5px; }

  .mobile-nav { height:66px; }
  .mobile-nav a { font-size:9px;gap:5px; }
  .mobile-nav a i { font-size:18px; }

  .skeleton-overlay { padding:0;background:var(--shell); }
  .skeleton-shell {
    width:100%;
    min-height:100dvh;
    height:100dvh;
    display:block;
    overflow:hidden;
    border:0;
    border-radius:0;
    box-shadow:none;
 }
  .skeleton-left,.skeleton-right { display:none; }
  .skeleton-center { display:grid;grid-template-rows:var(--head) minmax(0,1fr);height:100%; }
  .skeleton-center-head { gap:8px;padding:0 10px; }
  .skeleton-center-head::before {
    content:"";
    width:34px;height:34px;flex:none;border-radius:11px;background:var(--skeleton-base);
 }
  .skeleton-center-head .sk-search { height:40px; }
  .skeleton-center-scroll { padding:13px 10px 90px;overflow:hidden; }
  .skeleton-grid { grid-template-columns:1fr;gap:24px; }
  .skeleton-card:nth-child(n/**/+4) { display:none; }
  .sk-media { border-radius:13px; }
  .watch-page .skeleton-center-scroll { padding:0 0 90px; }
  .watch-page .sk-player { border-radius:0; }
  .watch-page .skeleton-watch-title,
  .watch-page .skeleton-channel-row,
  .watch-page .skeleton-description,
  .watch-page .skeleton-comments { margin-left:10px;margin-right:10px; }
  .watch-page .skeleton-watch-title { padding-top:14px; }
  .skeleton-channel-row { flex-wrap:wrap; }
  .sk-pill--wide { margin-left:0; }
  .skeleton-mobile-nav {
    position:fixed;
    left:8px;right:8px;
    bottom:max(8px,env(safe-area-inset-bottom));
    height:66px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
    padding:6px;
    border:1px solid var(--line);
    border-radius:18px;
    background:color-mix(in srgb,var(--shell) 94%,transparent);
 }
  .sk-mobile-nav-item { border-radius:12px; }
}

@media (max-width:380px) {
  .mobile-feature,
  .mobile-next-card { grid-template-columns:128px minmax(0,1fr); }
}

/* Motion accessibility always wins. */
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation:none !important; }
  .js .reveal-item { opacity:1 !important; transform:none !important; }
  .skeleton-overlay,
  .app-shell,
  .mobile-nav { transition:none !important; }
}

/* ===== Theme consistency overrides (must stay last) ===== */
html { background:var(--bg); color:var(--text); }
body { background:var(--bg); color:var(--text); }
.app-shell,.left-panel,.center-panel,.right-panel,.skeleton-shell { background:var(--shell); }
.pane-head { background:color-mix(in srgb,var(--shell) 96%,transparent); border-color:var(--line-soft); }
.ghost-icon { color:var(--muted); }
.ghost-icon:hover { background:var(--hover); color:var(--text); border-color:var(--line-soft); }
.search-box { border-color:var(--line); background: #0e0e0e; }
.search-box input { color:var(--text); }
.search-box input::placeholder,.search-icon,.search-hint { color:var(--muted); }
.search-hint { background:var(--control-soft); border-color:var(--line); }
.nav-title,.sidebar-footer,.eyebrow,.section-head p,.rail-kicker,.rail-copy p,.compact-video p,.watch-rail-card p,.channel-copy span,.description-meta,.description-meta a,.comment-author span,.mobile-feature p,.mobile-next-card p { color:var(--muted); }
.nav-item { color:var(--muted-2); }
.nav-item:hover { color:var(--text); background:var(--hover); }
.nav-item.active { color:var(--text); background:var(--strong-hover); }
.card-copy h2,.rail-copy h4,.compact-video h4,.watch-rail-card h4,.channel-copy strong,.watch-title-row h1,.comments-head h2,.comment-author { color:var(--text); font-weight: 600; }
.card-copy p,.comment-actions button { color:var(--muted); }
.more-button { color:var(--muted); }
.more-button:hover { color:var(--text); background:var(--hover); }
.continue-card,.description-card,.mobile-feature { background:var(--surface); border-color:var(--line); }
.watch-progress { background:var(--surface-3); }
.watch-progress i { background:var(--text); }
.compact-thumb,.watch-rail-thumb,.mobile-next-thumb,.mobile-feature-thumb,.thumb,.rail-media { background:var(--surface-2) !important; border-color:var(--line); }
.rail-tags a,.chip,.sort-button,.action-button,.split-action { background:var(--surface); color:var(--muted-2); border-color:var(--line); }
.rail-tags a:hover,.chip:hover,.sort-button:hover,.action-button:hover,.split-action:hover { background:var(--strong-hover); color:var(--text); }
.chip.active { background:var(--text); border-color:var(--text); color:var(--inverse); }
.subscribe-button { background:var(--text); border-color:var(--text); color:var(--inverse); }
.subscribe-button:hover { background:var(--text-soft); }
.subscribe-button.is-subscribed { background:var(--surface-3); border-color:var(--line); color:var(--text-soft); }
.description-card:hover { border-color:var(--line); }
.description-card p,.comment p { color:var(--text-soft); }
.show-more { color:var(--text); }
.comment-field { border-color:var(--line); }
.comment-field input { color:var(--text); }
.comment-field button { color:var(--muted); }
.comment-field button:hover,.comment-actions button:hover { background:var(--hover); color:var(--text-soft); }
.mobile-nav { background:color-mix(in srgb,var(--shell) 92%,transparent); border-color:var(--line); box-shadow:0 12px 38px var(--shadow); }
.mobile-nav a { color:var(--muted); }
.mobile-nav a.active { background:var(--text); color:var(--inverse); }
.skeleton-shell { box-shadow:0 32px 110px var(--shadow); }

@media (max-width:640px) {
  body { background:var(--shell); }
  .pane-head--center { border-bottom-color:var(--line-soft); }
  .mobile-back { color:var(--muted); }
  .mobile-back:hover { background:var(--hover); color:var(--text); }
}
@media (max-width:380px) {
}

/* ===== Right rail: one video per row, full-width preview with all copy below ===== */
.right-panel .compact-list,
.right-panel .watch-rail-list {
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.right-panel .compact-video,
.right-panel .watch-rail-card {
  display:block;
  width:100%;
  min-width:0;
}
.right-panel .compact-thumb,
.right-panel .watch-rail-thumb {
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  margin:0 0 8px;
  border-radius:11px;
  overflow:hidden;
}
.right-panel .compact-video > div:last-child,
.right-panel .watch-rail-card > div:last-child {
  min-width:0;
}
.right-panel .compact-video h4,
.right-panel .watch-rail-card h4 {
  margin:0 0 4px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  font-size:12px;
  line-height:1.42;
  font-weight:600;
  letter-spacing:-.012em;
}
.right-panel .compact-video p,
.right-panel .watch-rail-card p {
  margin:0;
  font-size:9.5px;
  line-height:1.5;
}
.right-panel .watch-rail-card p + p { margin-top:1px; }
.right-panel .compact-video:hover .compact-thumb,
.right-panel .watch-rail-card:hover .watch-rail-thumb {
  transform:translateY(-1px);
}

/* Skeleton mirrors the new vertical recommendation cards. */
.skeleton-right .skeleton-rail-row {
  display:block;
  margin-top:16px;
}
.skeleton-right .sk-rail-thumb {
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  margin:0 0 8px;
  border-radius:11px;
}
.skeleton-right .skeleton-rail-row > div { display:grid; gap:6px; }

/* HOME VIDEO CARDS — simplified metadata for DLE-ready feed */
.video-grid .card-info,
.video-grid .card-info--compact {
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 10px;
  margin-top: 10px;
  align-items: start;
}
.video-grid .card-info > .avatar { display: none !important; }
.video-grid .card-copy h2 {
  margin-bottom: 5px;
}
.video-grid .card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-meta);
  line-height: 1.45;
}
.video-grid .more-button {
  width: 36px;
  height: 36px;
  justify-self: end;
  margin-top: -2px;
}
.skeleton-grid .skeleton-card-meta {
  display: block;
  margin-top: 11px;
}
.skeleton-grid .skeleton-card-meta > div { width: 100%; }

@media (max-width: 640px) {
  .video-grid .card-info,
  .video-grid .card-info--compact {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 10px;
 }
  .video-grid .more-button {
    width: 40px;
    height: 40px;
 }
}

/* ===== Glass header + preview stats ===== */
/* Desktop/tablet: content scrolls underneath the translucent header so backdrop blur is visible. */
@media (min-width: 641px) {
  .left-panel,
  .center-panel,
  .right-panel {
    position: relative;
    grid-template-rows: minmax(0, 1fr);
 }

  .pane-head {
    position: absolute;
    z-index: 60;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(16, 16, 16, .66);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 1px 0 rgba(255,255,255,.025);
 }

  .panel-scroll {
    grid-row: 1;
    height: 100%;
 }

  .sidebar-body { padding-top: calc(var(--head) + 10px); }
  .feed {padding-top: calc(var(--head) + 10px);}
  .watch-content { padding-top: calc(var(--head) + 15px); }
  .rail-body { padding-top: calc(var(--head) + 15px); }

  .has-scrolled .pane-head {
    background: rgba(16, 16, 16, .72);
    border-bottom-color: rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.20);
 }
}

/* Phone already uses a sticky header; make it genuinely glassy as content passes beneath it. */
@media (max-width: 640px) {
  .pane-head--center {
    background: rgba(16, 16, 16, .68) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
 }
  .has-scrolled .pane-head--center {
    background: rgba(16, 16, 16, .74) !important;
 }
}

/* View count uses the same visual language as duration, anchored to the opposite corner. */
.duration, .views-badge {
    position: absolute;
    z-index: 4;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 4px 7px;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 9px;
    background: rgb(255 255 255 / 10%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .005em;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
}

.duration { right: 8px; }
.views-badge { left: 8px; }
.views-badge i {font-size: 12px;line-height: 1;}
.views-badge span { white-space: nowrap; }

/* Views are now carried by the preview badge, not by a metadata line below the main feed title. */
.video-grid .card-copy p { display: none; }

@media (max-width: 640px) {
  .duration,
  .views-badge {
    bottom: 8px;
    min-height: 25px;
    padding: 5px 7px;
    font-size: 10px;
 }
  .duration { right: 8px; }
  .views-badge { left: 8px; }
}

/* animated trending flame */
.trend-heading { display:inline-flex; align-items:center; gap:7px; }
.flame-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  animation: flameHalo 2.6s ease-in-out infinite;
  flex: 0 0 auto;
}
.flame-icon i {
  font-size: 12px;
  background: linear-gradient(180deg, #ffd36a 0%, #ff9b3d 38%, #ff6a1a 68%, #ff3d00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 109, 36, .35));
  animation: flameFlicker 1.45s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes flameFlicker {
  0%, 100% { transform: translateY(0) scale(1) rotate(-3deg); filter: drop-shadow(0 0 8px rgba(255, 109, 36, .35)); }
  25% { transform: translateY(-1px) scale(1.05) rotate(2deg); filter: drop-shadow(0 0 10px rgba(255, 136, 42, .5)); }
  50% { transform: translateY(-.5px) scale(.97) rotate(-1deg); filter: drop-shadow(0 0 7px rgba(255, 82, 26, .42)); }
  75% { transform: translateY(-1.5px) scale(1.08) rotate(3deg); filter: drop-shadow(0 0 11px rgba(255, 168, 59, .55)); }
}
@keyframes flameHalo {
  0%, 100% { transform: scale(1); opacity: .95; }
  50% { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .flame-icon, .flame-icon i { animation: none !important; }
}

/* video author/publication metadata intentionally removed from viewer cards */
.watch-main-row { justify-content:flex-start; }
.skeleton-actions-only { justify-content:flex-start; }
@media (max-width: 760px) {
  .watch-main-row { flex-wrap:nowrap; }
}

/* ==========================================================================\n   DataLife Engine 20.0 integration\n   ========================================================================== */
.video-grid > #dle-content,
.watch-content > #dle-content { display: contents; }

.system-content {padding: 0px;min-width: 0;}
.system-content > #dle-content { width: 100%; }

/* Search and profile feeds use the same card grid as the home page. */
.system-content:has(> .video-card) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 14px;
}
.system-content:has(> .video-card) > :not(.video-card) { grid-column: 1 / -1; }
.system-content:has(> .video-card) > .video-card { min-width: 0; }
.system-content:has(> .video-card) .card-info,
.system-content:has(> .video-card) .card-info--compact {
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 10px;
  margin-top: 10px;
  align-items: start;
}
.system-content:has(> .video-card) .card-info > .avatar { display: none !important; }
.system-content:has(> .video-card) .card-copy p { display: none; }
.system-content:has(> .video-card) .more-button {
  width: 36px;
  height: 36px;
  justify-self: end;
  margin-top: -2px;
}

@media (max-width: 640px) {
  .system-content:has(> .video-card) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
 }
  .system-content:has(> .video-card) .card-info,
  .system-content:has(> .video-card) .card-info--compact {
    grid-template-columns: minmax(0, 1fr) 40px;
 }
  .system-content:has(> .video-card) .more-button {
    width: 40px;
    height: 40px;
 }
}

.dle-info,
.dle-system-card,
.dle-search-page,
.dle-static,
.dle-auth-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text-soft);
}
.dle-info h3,
.dle-system-card h1,
.dle-system-card h2,
.dle-search-page h1,
.dle-static h1 { margin: 0 0 10px; color: var(--text); font-size: 18px; line-height: 1.25; }
.dle-info p,
.dle-system-card p,
.dle-static__content { margin: 0; font-size: 13px; line-height: 1.7; }

/* DLE pagination becomes a full-width item inside the home grid. */
.pagination { grid-column: 1 / -1; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:18px 0 8px; }
.pagination > a,
.pagination > span:not(.pages) > span,
.pagination .pages > a,
.pagination .pages > span {
  min-width: 38px; height: 38px; padding: 0 12px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--text-soft);
  font-size:11px; font-weight:700; text-decoration:none;
}
.pagination > span:not(.pages) { display:inline-flex; }
.pagination > a > span {
  display:inline-flex; align-items:center; justify-content:center; min-width:0; height:auto; padding:0;
  border:0; border-radius:0; background:transparent; color:inherit;
}
.pagination > a:hover,
.pagination .pages > a:hover { background:var(--surface-3); color:var(--text); }
.pagination .pages { display:flex; gap:6px; align-items:center; }
.pagination .pages > span {
  border-color:var(--text);
  background:var(--text);
  color:var(--inverse);
  font-weight:800;
  box-shadow:0 0 0 4px rgba(255,255,255,.055);
  cursor:default;
}

/* Search page generated by DLE. */
.dle-search-page { display:grid; gap:14px; }
.dle-search-page .searchtable { overflow:auto; }
.dle-search-page .searchtable table { width:100%; border-spacing:0 10px; }
.dle-search-page input[type="text"],
.dle-search-page input[type="search"],
.dle-search-page select,
.dle-search-page textarea,
.dle-comment-form input[type="text"],
.dle-comment-form input[type="email"],
.dle-comment-form textarea,
.dle-auth-card input[type="text"],
.dle-auth-card input[type="password"],
.dle-auth-card input[type="email"] {
  width:100%; min-height:42px; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--text); font:500 12px/1.4 "Montserrat",sans-serif; outline:none;
}
.dle-search-page input:focus,
.dle-search-page select:focus,
.dle-comment-form input:focus,
.dle-comment-form textarea:focus,
.dle-auth-card input:focus { border-color:#505050; box-shadow:0 0 0 3px rgba(255,255,255,.035); }
.dle-search-message { color:var(--muted); font-size:12px; }

/* Video player CSS is consolidated in the final section. */








.dle-action-link { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 11px; color:inherit; }
.watch-actions > a { text-decoration:none; }
.watch-actions > a .dle-action-link { border:1px solid var(--line); border-radius:999px; background:var(--surface-2); }
.watch-actions > a:hover .dle-action-link { background:var(--surface-3); }
.dle-rating-wrap { display:flex; align-items:center; }
.dle-rating-wrap > a { color:inherit; text-decoration:none; }
.dle-rating-wrap .split-action > a,
.split-action > a { display:flex; align-items:center; text-decoration:none; color:inherit; }
.dle-rating-native { display:flex; align-items:center; min-height:36px; }

.description-tags { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.description-tags a { color:var(--muted); text-decoration:none; }
.description-tags a:hover { color:var(--text-soft); }
.description-story { position:relative; max-height:78px; overflow:hidden; transition:max-height .35s ease; }
.description-card.is-expanded .description-story { max-height:2000px; }
.description-story > :first-child { margin-top:0; }
.description-story > :last-child { margin-bottom:0; }

/* DLE comment form/editor. */
.dle-comment-form { margin: 0 0 18px; padding:14px; border:1px solid var(--line-soft); border-radius:13px; background:var(--surface-2); }
.dle-comment-guest { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.dle-editor { min-width:0; }
.dle-editor .editor,
.dle-editor textarea { width:100% !important; max-width:100%; min-height:100px; }
.dle-comment-extra { display:grid; gap:10px; margin-top:10px; }
.dle-comment-extra label { display:grid; gap:6px; color:var(--muted); font-size:10px; font-weight:700; }
.dle-comment-submit {
  min-height:40px; margin-top:12px; padding:0 15px; border:1px solid var(--text); border-radius:999px;
  background:var(--text); color:var(--inverse); font:800 11px/1 "Montserrat",sans-serif; cursor:pointer;
}
.dle-comment-submit:hover { filter:brightness(1.08); }
.dle-comments-list { display:grid; gap:0; }
.comment-avatar-img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.comment-body { min-width:0; }
.comment-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:8px; }
.comment-tools i { margin-right:5px; font-size:11px; }
.comment-tools span { display:inline-flex; align-items:center; gap:2px; }
.comment-tools a { color:var(--muted); font-size:9px; font-weight:700; text-decoration:none; }
.comment-tools a:hover { color:var(--text); }
.comment-actions > a { color:inherit; text-decoration:none; }
.comment-actions > a span { display:inline-flex; align-items:center; gap:5px; }

/* Related videos are generated inside fullstory.tpl and hydrated into the right rail. */
.dle-related-source { display:none !important; }
[data-related-section][hidden], [data-related-mobile][hidden] { display:none !important; }
.mobile-related-target { display:grid; gap:10px; }
.mobile-related-target .mobile-next-card { margin-top:0; }

/* Fast search suggestions. */
.fastsearch-row { display:flex; align-items:center; gap:10px; padding:10px; color:var(--text); text-decoration:none; }
.fastsearch-row:hover { background:var(--surface-3); }
.fastsearch-row__media { width:72px; aspect-ratio:16/9; overflow:hidden; border-radius:7px; background:var(--surface-3); flex:0 0 auto; }
.fastsearch-row__media img { width:100%; height:100%; object-fit:cover; }
.fastsearch-row__copy { min-width:0; }
.fastsearch-row__copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.fastsearch-row__copy span { display:block; margin-top:3px; color:var(--muted); font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Generic DLE controls keep the dark Threads-like palette. */
button, input, select, textarea { font-family:"Montserrat",sans-serif; }

/* DLE 20 dialogs: complaints, confirms, replies, PM, profile, uploads and editors. */
body.has-dle-modal,
body.has-dle-modal .panel-scroll { overflow:hidden !important; }
.slitoe-modal-backdrop,
#modal-overlay {
  position:fixed !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  z-index:1090 !important;
  background:rgba(0,0,0,.68) !important;
  opacity:1 !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
body:has(> #modal-overlay) > .slitoe-modal-backdrop { display:none; }
.ui-dialog,
.dle-popup,
dialog.slitoe-modal {
  box-sizing:border-box;
  z-index:1100 !important;
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100dvh - 32px) !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid #2b2b2b !important;
  border-radius:22px !important;
  background:#151515 !important;
  color:var(--text) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.ui-dialog {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
.ui-dialog[style*="display: none"] { display:none !important; }
.ui-dialog .ui-dialog-titlebar {
  position:relative;
  display:flex;
  align-items:center;
  min-height:64px;
  padding:18px 62px 17px 22px !important;
  border:0 !important;
  border-bottom:1px solid #272727 !important;
  background:#181818 !important;
  color:var(--text) !important;
}
.ui-dialog .ui-dialog-title {
  min-width:0;
  overflow:hidden;
  color:#f4f4f4;
  font-size:17px;
  font-weight:800;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ui-dialog .ui-dialog-titlebar-close {
  position:absolute;
  top:50%;
  right:16px;
  width:36px;
  height:36px;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  border:1px solid #303030 !important;
  border-radius:50% !important;
  background:#202020 !important;

  transform:translateY(-50%);
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.ui-dialog .ui-dialog-titlebar-close::before,
.ui-dialog .ui-dialog-titlebar-close::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:14px;
  height:2px;
  border-radius:2px;
  background:#d4d4d4;
}
.ui-dialog .ui-dialog-titlebar-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.ui-dialog .ui-dialog-titlebar-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.ui-dialog .ui-dialog-titlebar-close:hover { border-color:#444 !important; background:#292929 !important; }
.ui-dialog .ui-dialog-titlebar-close:active { transform:translateY(-50%) scale(.94); }
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space { display:none !important; }
.ui-dialog .ui-dialog-content,
.dle-popup,
dialog.slitoe-modal .slitoe-modal__content {
  box-sizing:border-box;
  min-width:0;
  padding:22px !important;
  overflow:auto !important;
  border:0 !important;
  background:#151515 !important;
  color:#bdbdbd !important;
  font-size:13px;
  line-height:1.65;
  scrollbar-color:#3c3c3c transparent;
  scrollbar-width:thin;
}
.ui-dialog .ui-dialog-content > :first-child { margin-top:0; }
.ui-dialog .ui-dialog-content > :last-child { margin-bottom:0; }
.ui-dialog .ui-dialog-content a { color:#f0f0f0; }
.ui-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.ui-dialog select,
.ui-dialog textarea,
.dle-popup input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.dle-popup select,
.dle-popup textarea,
dialog.slitoe-modal input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
dialog.slitoe-modal select,
dialog.slitoe-modal textarea {
  box-sizing:border-box;
  width:100% !important;
  max-width:100%;
  min-height:44px;
  margin:7px 0 14px;
  padding:10px 12px;
  border:1px solid #303030 !important;
  border-radius:11px !important;
  outline:0;
  background:#101010 !important;
  color:#f1f1f1 !important;
  font:500 13px/1.5 "Montserrat",sans-serif !important;
  caret-color:#fff;
}
.ui-dialog textarea,
.dle-popup textarea,
dialog.slitoe-modal textarea { min-height:112px; resize:vertical; }
.ui-dialog input:focus,
.ui-dialog select:focus,
.ui-dialog textarea:focus,
.dle-popup input:focus,
.dle-popup select:focus,
.dle-popup textarea:focus,
dialog.slitoe-modal input:focus,
dialog.slitoe-modal select:focus,
dialog.slitoe-modal textarea:focus {
  border-color:#686868 !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.055) !important;
}
.ui-dialog .ui-state-error { border-color:#a94c4c !important; box-shadow:0 0 0 3px rgba(197,67,67,.11) !important; }
.ui-dialog .ui-dialog-buttonpane {
  margin:0 !important;
  padding:14px 18px 18px !important;
  border:0 !important;
  border-top:1px solid #272727 !important;
  background:#181818 !important;
}
.ui-dialog .ui-dialog-buttonset {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.ui-dialog .ui-button,
.dle-popup button,
.dle-popup input[type="button"],
.dle-popup input[type="submit"],
dialog.slitoe-modal button {
  min-height:42px;
  margin:0 !important;
  padding:0 17px !important;
  border:1px solid #343434 !important;
  border-radius:12px !important;
  background:#222 !important;
  color:#dedede !important;
  font:750 12px/1 "Montserrat",sans-serif !important;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.ui-dialog .ui-dialog-buttonset .ui-button:last-child,
.dle-popup input[type="submit"],
dialog.slitoe-modal [data-modal-primary] {
  border-color:#f3f3f3 !important;
  background:#f3f3f3 !important;
  color:#111 !important;
}
.ui-dialog .ui-dialog-titlebar-close {
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
}
.ui-dialog .ui-button:hover,
.dle-popup button:hover,
dialog.slitoe-modal button:hover { border-color:#4a4a4a !important; background:#2c2c2c !important; color:#fff !important; }
.ui-dialog .ui-dialog-buttonset .ui-button:last-child:hover,
.dle-popup input[type="submit"]:hover,
dialog.slitoe-modal [data-modal-primary]:hover { border-color:#fff !important; background:#fff !important; color:#000 !important; }
.ui-dialog .ui-button:active,
.dle-popup button:active,
dialog.slitoe-modal button:active { transform:scale(.97); }
.ui-dialog :focus-visible,
.dle-popup :focus-visible,
dialog.slitoe-modal :focus-visible { outline:2px solid #f4f4f4 !important; outline-offset:3px; }
.dle-popup-confirm .ui-dialog-content,
.dle-popup-alert .ui-dialog-content,
.dle-popup-newsdelete .ui-dialog-content { font-size:14px; }
.dle-popup-userprofile .ui-dialog-content,
.dle-popup-sendpm .ui-dialog-content,
.dle-popup-replycomments .ui-dialog-content,
.dle-popup-mediaupload .ui-dialog-content,
.dle-popup-quickedit .ui-dialog-content { padding:18px !important; }
.dle-popup-mediaupload,
.dle-popup-quickedit { border-radius:18px !important; }
#loading-layer {
  min-width:52px;
  min-height:52px;
  display:grid !important;
  place-items:center;
  padding:12px;
  border:1px solid #303030;
  border-radius:15px;
  background:rgba(20,20,20,.94);
  box-shadow:0 18px 55px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
}
dialog.slitoe-modal::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(7px); }
.highslide-wrapper { color:var(--text); border:1px solid #2b2b2b; border-radius:18px; background:#151515; box-shadow:0 28px 90px rgba(0,0,0,.68); }

@media (max-width: 640px) {
  .ui-dialog,
  .dle-popup,
  dialog.slitoe-modal {
    top:max(12px,env(safe-area-inset-top)) !important;
    left:12px !important;
    width:calc(100vw - 24px) !important;
    max-width:none !important;
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius:18px !important;
 }
  .ui-dialog .ui-dialog-titlebar { min-height:56px; padding:15px 56px 14px 16px !important; }
  .ui-dialog .ui-dialog-title { font-size:15px; }
  .ui-dialog .ui-dialog-titlebar-close { right:12px; width:34px; height:34px; }
  .ui-dialog .ui-dialog-content,
  .dle-popup,
  dialog.slitoe-modal .slitoe-modal__content { height:auto !important; padding:16px !important; }
  .ui-dialog .ui-dialog-buttonpane { padding:12px 14px 14px !important; }
  .ui-dialog .ui-dialog-buttonset { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .ui-dialog .ui-dialog-buttonpane .ui-button { width:100%; padding:0 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-dialog .ui-button,
  .ui-dialog .ui-dialog-titlebar-close { transition:none; }
}

@media (max-width: 640px) {
  .system-content { padding:12px 10px 92px; }

  .pagination { padding-bottom:20px; overflow-x:auto; justify-content:flex-start; }
  .pagination > a,.pagination > span:not(.pages) > span,.pagination .pages > a,.pagination .pages > span { min-width:40px; height:40px; }
  .mobile-related-target .mobile-next-card { display:grid; grid-template-columns:128px minmax(0,1fr); gap:10px; align-items:start; }
  .mobile-related-target .watch-rail-thumb { width:100%; }
  .mobile-related-target h4 { margin:2px 0 0; color:var(--text); font-size:12px; line-height:1.35; }
}
.rating, .unit-rating { width: 150px; height: 30px; }
	.rating { font-size: 11px; }
	.unit-rating, .unit-rating li a:hover, .unit-rating li.current-rating {
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAC0CAMAAAD/wb/1AAACuFBMVEUAAACqrbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACqrbACAAAAAAACAQGqrbAEAQEAAAAcCQuqrbCul5yqrbCqrbCqrbCqrbCqrbD/ZHmqrbCqrbCqrbCqrbCqrbCqrbD/SFuqrbCqrbCqrbCqrbCqrbD6VGf/SFv+R1qqrbCqrbCqrbCqrbCqrbCqrbCqrbD/Y3j/Y3f/YnaqrbCqrbCqrbCqrbCqrbCqrbCqrbCqrbD9TmKqrbD8V2v/SFv/SFv+R1r/Y3j4Rlj9R1r/YXSqrbCqrbD1RVeqrbDHOEeqrbCqrbCqrbD/Y3f8R1qqrbD/Y3hxJi5SFx2qrbAoDBD6U2f/ZHn/ZHn/ZHn/Y3j/Y3j8R1r/SFv/ZHn1RVf/Ynb7RlqqrbD/Ynb/ZHn/YHT/SFuqrbDyRFb/YHX/Y3f/SFv8WWz/SFuqrbD/ZHnjUGK8NUOtMD2XKjX/X3OqrbCqrbBZICY7EheqrbDdRFT/YXT8TmKqrbDjQFGqrbD/SFv/Y3j8R1r5Rln5Rln9R1r/ZHn/YXT/YnX9R1r/Ynb/Y3f/YHPwRFbuQ1WqrbD2RVf6Rln/Y3j/YnbfP0//YXTcPk7/YXWqrbDzVmn/YXX3RVjUO0v/ZHn/Y3jrU2XNOknmUWPHOEf/X3LoQVKqrbD/SFv/Y3bVS1r/X3TLR1f/X3PCRVOiLjm5QU/7RlmQLjncPk6qrbD1RVf7XG+qrbCqrbD/YnbtS12QLjmYMD0AAABGFhvtTmH/ZHn1RVf1RVf4RljpQlP/Y3j8R1r/W3DlQVL1RVf8R1r7R1r3RVj4WGvWPEzvVWj7R1rvQ1X/XHD/ZHn/SFv/SFv6R1naTl//X3LvVWj6R1nsQ1TgT2HqQlT5Rln4RlnoQlP3RljkQFGyP03/ZHmKMTvYPU3LOUj/SFv/ZHn/SFtkveWoAAAA5nRSTlMAxwMHBRgKDR4cwxMWEX8hDyUEApgaHhAL/L63g2lJF9+7sI9hIgf586yjlHt1NC/g3diMiHBkXkU6NjQUEP786ujYxLeeiYh3ZFpXUEVFQjMuLSkhDPr38/Lu7s/NxMK3s7GqqqqpqKWbmox3bWZmXFNDPz4sKigcGBYTDgkI9uvm4d3X1NHMzMfFvLy3sbCnmJGOiomHhoB/f3t4dHJybW1sbGdnYFlTUU1MTEY5ODUxLy4nJSEhHg8MCQXi0dDKpKGhnZ2cl5COiIJ6dHNwaWllYmFfX19fV1RSTU1BQT83Mi4iIblmODwAAAXaSURBVGje7dn1UxtBFAfwexEgaUuFNCkh0EKpIKUClJa6GxWg7u7u7u7u7u7u7u7uvfs3ukm4sgfZfXc3nWl/yPcHmLnw2cvd7ttl5gn+/DfZ9Uu/bVVzqX68Xqp+XK+dUFqSuurFdyWSz/rsmVJuXEcfviF58kGPPV7Di2de1IG7Sll5od0eluQUm6QZ15H+5JFW+1HKTs1q2mxIR4lKA234jUSn9DgttmQxSZE7amG1ZgN7EatIjbn9n1cpiVSCx7FSqmP/XWQE3PFGeHZYOfFVUKd8ijqtKGxooAlPaWagsDFPHy03blTARGFTvvwL1eMN5kCDoLj1mCtq7QqL+8YKnTejtjp7LSifUVDGEJD3yDQ1dlH+PMTm0ubhHXDbuSVlFXrYFMzWzqCsQgeaG5Xi2+npeQMMgs+YAi1bqvNsh+FmliW6gGUVx5Y+yLFE57PcYtfEUPN5hpUXy1D2jc2BJp4leofEzFm2xevrqIBhTnm9x7CpMxs/NiDYyNlT7mH4AmeNLTEh+KfEzlwMf+HgmkYEv5XozCgt0TmHzNR6uv62FcxYQdf4DwTfluRcblQwyGwJylhVU5LzCZlm+Z+Jq0PzB5kLBATkMQeNeSDvTzsQPNO72QxzU6OBXAjIZw4quGG695zmT7SRvKHqCwnNG0goicy3zCB4KX+uxknVFx3Mb5EpzbfVlurw8dE+w2mq5I2W8Cc6wExRBTcWMFvy8LExkFDGLJLPTPx5Nhn4H/rjz99MeIh+Owoi9GMbRBXSaytDLDTRaUNiIQXCiujDEWATEqGiLlsoBtKEBHA69OAmEEd+JkEZHbZIGDQnv06BtbB2XBGKe34HQ7Bm63BCquBOUbCe0oqTIUnwpiEkarSFrXBSfvgoKKuFKp80HGyabAkrUO84FkaqhUVH7iweBg2pK43BGTeokj0EedLm4cS548rxEO5Eekbgu6j60ZUdOVdMQmNXjHcEW3JECeUITSK9Lknpco/QG9xxDqKvT7aBLSWVODRFjjWuDzEO5bVYSFS5abig29ic73gxrFFl4yGyRK6L9jBVFdAQrAm+tkonxKO2Elh9L5jKVrTwUwHSmJsWVOavWuBsaSnALSB7N+5XC4dIO3vR94b6vPUdEgxRrC1rog3i+EuhUCLUY3xUHGKxA2ByPcZjj4WYqvipCik+rzdXswJdUMnn9Uyoh2Mb42tXhTAcL4aigs9YAS27QlZgzGVvsKMbNsQwpyoVwwkQxyzGNAxHKKr6JPWY0bATw9HZdeNIrgcQb6eGxXeZiKwyKAMAsVaA4Kxd5xh+6sRBgue9xRNaP1OwxxPuyvSetVEYjoGxpOiDAawu7x0LlyE8qSyZRLAiEx1ClkKmi9Bge/baSnYCJKYKUVCUj6tCtyRCyyiL2hEeCVDchp3TowDAmZy79iZGEw4R2NbqDHf4PmdSwiCaj9MqTmTvE02iBX/88UcQBp/Wb1vV6qsfrxNDW+i149uKYl29eLlIMkKfPd3Gjefpw9dFT/bqsSdCvXjWRR24u5iV3drtCFHOpUma8XzxTzZptfvF7EzV2pecJVJZrQ3vFum0Ha/FliwnKrJMLazWdFOP8qIyoZ2WDW5REnMbiWOldad+jBHGKx1vhKfflCO0KCdqSWgXRV9ypSbcpqmyL9lTy41f5+hLtlygHq/N1ZccPVutHeCjL5leQZ3t67svWUuNrdvSd1/yUHvczmP2Jfe1wWyFdHZfckgo35b7zutLbuba9l/5fckBHNvuANaXvMleWHvQvuQ79o3xvuR2kRm8L7majasIGO7LtPipZerCxk/QviRnT1mO4Qut2bi7CcFnRHbmYHgEB9cyIviVSKd8O5EO1pdcR9ff1oLpA+gaP4HgfqKc2UM8fcnR96eKcvYj01xXfjkv//QlR6+V96ftCPbugl32KPqSYx56Z38l0pdsS/5mwb7cfcnN7oOsJ9KXFEPrHvDdl9xaQZzPx1V6HmL3JYd09/cl/2F+A0wiyl4XvH/ZAAAAAElFTkSuQmCC);
		-webkit-background-size: 30px auto; background-size: 30px auto;
 }
	.unit-rating {
		list-style: none;
		margin: 0; padding: 0;
		position: relative;
		background-position: 0 -30px;
 }
	.unit-rating li {
		text-indent: -90000px;
		padding: 0; margin: 0;
		float: left;
 }
	.unit-rating li a {
		display: block;
		width: 30px; height: 30px;
		text-decoration: none;
		border: 0 none !important;
		text-indent: -9000px;
		z-index: 17;
		position: absolute;
		padding: 0;
 }
	.unit-rating li a:hover {
		background-position: 0 -60px;
		z-index: 2;
		left: 0;
 }
	.unit-rating a.r1-unit { left: 0; }
	.unit-rating a.r1-unit:hover { width: 30px; }
	.unit-rating a.r2-unit { left: 30px; }
	.unit-rating a.r2-unit:hover { width: 60px; }
	.unit-rating a.r3-unit { left: 60px; }
	.unit-rating a.r3-unit:hover { width: 90px; }
	.unit-rating a.r4-unit { left: 90px; }
	.unit-rating a.r4-unit:hover { width: 120px; }
	.unit-rating a.r5-unit { left: 120px; }
	.unit-rating a.r5-unit:hover { width: 150px; }
	.unit-rating li.current-rating {
		background-position: 0 0;
		position: absolute;
		height: 30px;
		display: block;
		text-indent: -9000px;
		z-index: 1;
 }

/* COMMENTS / MINIMAL */
#add-comments-form.dle-comment-form{margin-top:18px;padding:16px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-card)}
#add-comments-form .dle-comment-guest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
#add-comments-form .dle-comment-guest input,#add-comments-form #sec_code{width:100%;height:44px;padding:0 13px;border:1px solid var(--line);border-radius:12px;outline:0;background:var(--surface-2);color:var(--text);font:inherit}
#add-comments-form .dle-comment-guest input:focus,#add-comments-form #sec_code:focus{border-color:var(--muted-2)}
#add-comments-form .dle-editor{margin:0}
#add-comments-form .tox-tinymce{height:170px!important;border:1px solid var(--line)!important;border-radius:14px!important;overflow:hidden!important;box-shadow:none!important}
#add-comments-form .tox .tox-editor-header{padding:4px!important;background:var(--surface-2)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
#add-comments-form .tox .tox-toolbar,#add-comments-form .tox .tox-toolbar__overflow,#add-comments-form .tox .tox-toolbar__primary{background:var(--surface-2)!important}
#add-comments-form .tox .tox-toolbar__group{padding:0 3px!important;border:0!important}
#add-comments-form .tox .tox-tbtn{width:32px!important;height:32px!important;margin:0 1px!important;border-radius:8px!important}
#add-comments-form .tox .tox-tbtn:hover,#add-comments-form .tox .tox-tbtn--enabled{background:var(--strong-hover)!important}
#add-comments-form .tox .tox-tbtn svg{fill:var(--text-soft)!important}
#add-comments-form .tox .tox-edit-area__iframe{background:var(--surface-2)!important}
#add-comments-form label:has(#sec_code){display:grid;grid-template-columns:auto minmax(140px,220px);align-items:end;gap:8px 12px;margin-top:12px;color:var(--muted-2);font-size:13px;font-weight:700}
#add-comments-form label:has(#sec_code)>a,#add-comments-form label:has(#sec_code)>#sec_code{grid-row:2}
#add-comments-form #dle-captcha img{display:block;width:120px;height:44px;object-fit:cover;border-radius:10px;opacity:.86}
#dle-comments-form button[type="submit"],#dle-comments-form input[type="submit"]{min-height:44px;margin-top:14px;padding:0 20px;border:0;border-radius:999px;background:var(--white);color:#111;font-weight:800}
#add-comments-form .dle-upload-area,#add-comments-form .qq-uploader,#add-comments-form [class*="upload-area"],#add-comments-form [id*="upload-area"]{display:none!important}
@media(max-width:640px){#add-comments-form.dle-comment-form{padding:12px;border-radius:16px}#add-comments-form .dle-comment-guest{grid-template-columns:1fr}#add-comments-form .tox-tinymce{height:150px!important}}

/* Recommendation rail */
.chips--rail .chip {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
}
.chips--rail .chip.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--shell);
}
.chips--rail .chip:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.rail-section[hidden], .chips--rail .chip[hidden] { display: none !important; }
.rail-empty {
  margin: 22px 0 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

/* Dynamic hashtag filters */
.tag-chip-list > span { display: contents; }
.tag-chip-list > span > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 31px;
  padding: 0 12px;
  flex: none;
  /* border: 1px solid var(--line); */
  border-radius: 999px;
  /* background: var(--surface); */
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.tag-chip-list > span > a:hover { background: var(--strong-hover); color: var(--text); }
.tag-chip-list > span > a:active { transform: scale(.96); }
.tag-chip-list > span > a.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--inverse);
}
.tag-chip-list > span > a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* Custom animated trending icon */
.flame-icon > img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  transform: scale(1.45);
  transform-origin: center;
  filter: drop-shadow(0 0 7px rgba(255, 109, 36, .32));
}
/* Story taxonomy and mobile flow v2 */
.story-taxonomy {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.taxonomy-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.taxonomy-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 102px;
  padding-top: 7px;
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.taxonomy-label i { color: var(--muted); font-size: 11px; }
.taxonomy-values {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  font-size: 0;
}
.taxonomy-values a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  max-width: 100%;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.taxonomy-values a:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
}
@media (max-width: 640px) {
  html, body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
 }
  body { position: static !important; }
  .app-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
 }
  .left-panel, .right-panel { display: none !important; }
  .center-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
 }
  .panel-scroll, .watch-content, .feed-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
 }
  .pane-head, .watch-page, .watch-header, .watch-title-row, .watch-rating-slot, .description-card, .comments-wrap, .comments-form {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
 }
  .watch-player,
.video-box,
.description-story{
    max-width: 100%;
    min-width: 0;
 }
  .watch-player video,
.watch-player iframe,
.description-story img,
.description-story video,
.description-story iframe{
    display: block;
    max-width: 100% !important;
    height: auto;
 }
  .description-story, .description-story p, .description-story a, .description-meta {
    overflow-wrap: anywhere;
    word-break: break-word;
 }
  .description-story pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
 }
  .description-story table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
 }
  .story-taxonomy { margin-top: 15px; padding-top: 13px; }
  .taxonomy-row { flex-direction: column; gap: 7px; }
  .taxonomy-label { flex-basis: auto; padding-top: 0; }
  .taxonomy-values { width: 100%; }
  .taxonomy-values a { min-height: 29px; padding: 0 10px; }
  .xfields, .xfieldimagegallery, .highslide, .quote, .scriptcode {
    max-width: 100% !important;
    box-sizing: border-box;
 }
}
/* Mobile form containment v3 */
@media (max-width: 640px) {
  .dle-fullstory, #add-comments-form, .dle-comment-form, .dle-comment-guest, .dle-editor, .dleaddcomments-editor, .tox-tinymce, .tox-editor-container, .tox-editor-header, .tox-toolbar-overlord, .tox-toolbar__primary, .tox-sidebar-wrap, .tox-edit-area, .dle-comment-extra {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
 }
  .dle-comment-guest {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
 }
  .dle-comment-guest input, #sec_code {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
 }
  .tox-toolbar__primary {
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
 }
  .tox .tox-toolbar__group {
    padding: 0 2px !important;
 }
  .dle-comment-extra {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
 }
  .watch-title-row {
    align-items: flex-start;
    gap: 12px;
 }
  .watch-title-row h1 {
    min-width: 0;
    font-size: clamp(21px, 7vw, 30px);
    overflow-wrap: anywhere;
 }
  .watch-actions, .action-row {
    flex-wrap: wrap;
    max-width: 100%;
 }
}

/* mobile-watch-polish-v4 */
@media (max-width:760px){
body.watch-page .watch-header,body.watch-page .watch-rating-slot,body.watch-page .description-card,body.watch-page .comments{width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important}
body.watch-page .watch-title-row>div{width:100%;min-width:0}
body.watch-page .watch-title-row h1{display:-webkit-box;max-height:2.36em;overflow:hidden;font-size:clamp(20px,5.8vw,25px)!important;line-height:1.18!important;overflow-wrap:anywhere;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}
body.watch-page .watch-rating-slot,body.watch-page .description-card,body.watch-page .comments,body.watch-page #dle-comments-form,body.watch-page #add-comments-form,body.watch-page .dle-editor,body.watch-page .tox,body.watch-page .tox-tinymce{min-width:0!important;max-width:100%!important}
body.watch-page .description-card{padding:16px!important;overflow:hidden}
body.watch-page .description-meta,body.watch-page .description-story,body.watch-page .story-taxonomy,body.watch-page .taxonomy-row,body.watch-page .taxonomy-values{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
body.watch-page .description-story{overflow-wrap:anywhere}
body.watch-page .story-taxonomy{margin-top:14px;padding-top:14px}
body.watch-page .taxonomy-row{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
body.watch-page .taxonomy-values{display:flex;flex-wrap:wrap;gap:8px}
body.watch-page .taxonomy-values a{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.watch-page .comments{padding-top:28px!important;overflow:hidden}
body.watch-page .comments-head{margin-bottom:14px}
body.watch-page .comments-head h2{font-size:22px;line-height:1.15}
body.watch-page #dle-comments-form{width:100%;margin:0}
body.watch-page #add-comments-form.dle-comment-form{width:100%;margin:0;padding:12px!important;border:1px solid #242424!important;border-radius:18px!important;background:#111!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
body.watch-page #add-comments-form .dle-comment-guest{grid-template-columns:minmax(0,1fr)!important;gap:8px;margin-bottom:10px}
body.watch-page #add-comments-form input[type="text"],body.watch-page #add-comments-form input[type="email"]{width:100%;min-height:44px;padding:0 13px;border:1px solid #2a2a2a!important;border-radius:12px!important;outline:0;color:var(--text);background:#161616!important;box-shadow:none!important}
body.watch-page #add-comments-form input:focus{border-color:#484848!important;box-shadow:0 0 0 3px rgba(255,255,255,.045)!important}
body.watch-page #add-comments-form .tox-tinymce{height:160px!important;overflow:hidden!important;border:1px solid #292929!important;border-radius:14px!important;background:#151515!important;box-shadow:none!important}
body.watch-page #add-comments-form .tox-editor-header,body.watch-page #add-comments-form .tox-toolbar-overlord,body.watch-page #add-comments-form .tox-toolbar__primary{border-color:#292929!important;background:#171717!important;box-shadow:none!important}
body.watch-page #add-comments-form .tox-edit-area,body.watch-page #add-comments-form .tox-edit-area iframe{border:0!important;background:#151515!important}
body.watch-page #add-comments-form .dle-comment-extra{gap:12px!important;margin-top:12px}
body.watch-page #add-comments-form .dle-comment-extra label{grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important;gap:8px!important;color:#8c8c8c!important;font-size:12px!important}
body.watch-page #add-comments-form #dle-captcha{display:block;width:120px;max-width:100%;height:44px;border:1px solid #292929;border-radius:10px;object-fit:cover;opacity:.9}
body.watch-page #add-comments-form .dle-comment-submit{width:100%;min-height:46px;margin-top:14px;justify-content:center}
}

/* Comments: compact composer and readable discussion on every screen. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Native DLE material sorting */
.feed-sort {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:-5px -18px 18px;
  padding:10px 18px;
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
.feed-sort__native { display:none !important; }
.feed-sort__modes {
  min-width:0;
  display:flex;
  align-items:center;
  gap:3px;
  overflow-x:auto;
  scrollbar-width:none;
}
.feed-sort__modes::-webkit-scrollbar { display:none; }
.sort-option {
  min-height: 32px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:var(--muted-2);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.sort-option i { width:15px;text-align:center;font-size:13px; }
.sort-option:hover { background:var(--hover);border-color:var(--line);color:var(--text); }
.sort-option:active { background:var(--strong-hover); }
.sort-option.active {
  background:var(--text);
  border-color:var(--text);
  color:var(--inverse);
}
.sort-option:focus-visible,
.sort-order select:focus-visible,
.sort-reset:focus-visible { outline:2px solid #5f5f5f;outline-offset:2px; }
.feed-sort__actions { flex:0 0 auto;display:flex;align-items:center;gap:5px; }
.sort-order { position:relative;display:block; }
.sort-order select {
  min-width:164px;
  height: 34px;
  appearance:none;
  color-scheme:dark;
  padding:0 34px 0 13px;
  border:1px solid #303030;
  border-radius:11px;
  background:transparent;
  color:var(--text-soft);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.sort-order select:hover { background:rgba(255,255,255,.025);border-color:#414141;color:var(--text); }
.sort-order select option {
  background:#151515;
  color:#e4e4e4;
  font-size:13px;
  font-weight:500;
}
.sort-order select option:checked { background:#292929;color:#fff; }
.sort-order > i {
  position:absolute;
  top:50%;
  right:13px;
  translate:0 -50%;
  color:var(--muted);
  font-size:10px;
  pointer-events:none;
}
.sort-reset {
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:11px;
  background:transparent;
  color:var(--muted-2);
  font-size:13px;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.sort-reset:hover { background:rgba(255,255,255,.025);border-color:#414141;color:var(--text); }
.sort-reset:active { background:var(--strong-hover); }

@media (max-width:980px) {
  .feed-sort { flex-wrap:wrap; }
  .feed-sort__modes { width:100%; }
  .feed-sort__actions { margin-left:auto; }
}

@media (max-width:640px) {
  .feed-sort { display:grid;gap:7px;margin:-4px -10px 14px;padding:10px;border-radius:0; }
  .feed-sort__modes { width:100%;padding-bottom:1px; }
  .sort-option { min-height:42px;padding:0 12px;font-size:11px;font-weight:600; }
  .sort-option i { font-size:13px; }
  .feed-sort__actions { width:100%;display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:6px;margin:0; }
  .sort-order select { width:100%;height:42px;font-size:11px; }
  .sort-reset { width:42px;height:42px;font-size:13px; }
}
.comments,.comments *{box-sizing:border-box}
.comments .comments-head{margin-bottom:18px}
.comments .comments-head h2{font-size:clamp(16px,2vw,16px);line-height:1.25}
.comments #add-comments-form.dle-comment-form{width:100%;max-width:100%;margin:0 0 22px;padding:20px;border:1px solid #2a2a2a;border-radius:20px;background:#191919;box-shadow:none}
.comment-compose-identity{display:flex;align-items:center;gap:11px;margin-bottom:14px;color:#aaa;font-size:13px;line-height:1.45}
.comment-compose-identity strong{color:#f5f5f5;font-weight:700}
.comment-compose-avatar{display:grid;flex:none;place-items:center;width:36px;height:36px;border:1px solid #353535;border-radius:50%;background:#242424;font-size:20px}
.comments #add-comments-form .tox-tinymce{height:170px!important;border:1px solid #343434!important;border-radius:14px!important;background:#1e1e1e!important}
.comments #add-comments-form .tox-editor-header,.comments #add-comments-form .tox-toolbar__primary,.comments #add-comments-form .tox-toolbar-overlord{background:#202020!important;border-color:#343434!important}
.comments #add-comments-form .tox-edit-area,.comments #add-comments-form .tox-edit-area iframe{background:#1e1e1e!important}
.comments #add-comments-form .dle-comment-extra{margin-top:0;gap:0}
.comments #add-comments-form .dle-comment-extra:empty{display:none}
.comments #add-comments-form .comment-captcha-label{display:grid;grid-template-columns:160px minmax(0,220px);align-items:center;gap:10px 14px;max-width:480px;margin-top:16px;color:#bdbdbd;font-size:13px;font-weight:600}
.comments #add-comments-form .comment-captcha-label>span:first-child{grid-column:1/-1}
.comments #add-comments-form .comment-captcha-label>a{grid-column:1;grid-row:2;display:block;width:160px}
.comments #add-comments-form #dle-captcha,.comments #add-comments-form #dle-captcha img{display:block;width:160px;height:64px;border:0;border-radius:10px;object-fit:cover;opacity:1}
.comments #add-comments-form #sec_code{grid-column:2;grid-row:2;width:100%;height:48px;border:1px solid #393939;border-radius:11px;background:#222;color:#f5f5f5;font-size:14px;outline:0}
.comments #add-comments-form #sec_code:focus{border-color:#9c9c9c;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.comment-compose-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px}
.comment-compose-hint{color:#858585;font-size:12px;line-height:1.4}
.comments #add-comments-form .dle-comment-submit{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:auto;min-height:40px;margin:0;padding: 0 15px;border:0;border-radius: 15px;background:#f5f5f5;color: #000000;font-size:13px;font-weight: 550;transition:background .2s ease,transform .2s ease}.comments #add-comments-form .dle-comment-submit:hover{background:#dcdcdc;transform:translateY(-1px)}
.comments #add-comments-form .dle-comment-submit:focus-visible,.comments .comment-actions a:focus-visible,.comments .comment-tools a:focus-visible{outline:2px solid #f5f5f5;outline-offset:3px}
.comments .dle-comments-list{display:grid;gap:0;min-width:0}
.comments .comment{display:grid;grid-template-columns:42px minmax(0,1fr);gap:13px;width:100%;min-width:0;margin:0;padding:20px 0;border-bottom:1px solid #292929}
.comments .comment:first-child{border-top:1px solid #292929}
.comments .comment .comment-avatar{display:grid;place-items:center;width:42px;height:42px;overflow:hidden;border:1px solid #393939;border-radius:50%;background:#292929}
.comments .comment--guest .comment-avatar-img{display:none}
.comments .comment-avatar-emoji{font-size:24px;line-height:1}
.comments .comment-body{min-width:0}
.comments .comment-author{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;color:#f0f0f0;font-size:14px;line-height:1.4}
.comments .comment-author strong{font-weight:700}
.comments .comment-author a{color:inherit;text-decoration:none}
.comments .comment-author time{color:#858585;font-size:12px;font-weight:500}
.comments .comment-text,.comments .comment-text *{max-width:100%;overflow-wrap:anywhere;word-break:normal}
.comments .comment-text{margin-top:7px;color:#d0d0d0;font-size:14px;line-height:1.6}
.comments .comment-text p{margin:0 0 8px;color:inherit;font-size:inherit;line-height:inherit}
.comments .comment-text p:last-child{margin-bottom:0}
.comments .comment-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:11px}
.comments .comment-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 10px;border:1px solid transparent;border-radius:999px;color:#a2a2a2;font-size:12px;font-weight:600;text-decoration:none;transition:background .2s ease,color .2s ease}
.comments .comment-actions a>span{display:inline-flex;align-items:center;gap:6px}
.comments .comment-actions a:hover{background:#292929;color:#f5f5f5}
.comments .comment-actions i{margin:0;font-size:14px}
.comments .comment-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}
.comments .comment-tools a{color:#858585;font-size:11px;text-decoration:none}
.comments .comment-tools a:hover{color:#f5f5f5}
@media(max-width:760px){
  body.watch-page .comments #add-comments-form.dle-comment-form{padding:14px!important;border-color:#2a2a2a!important;background:#191919!important}
  .comments .comment-compose-identity{font-size:12px}
  .comments .comment{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:17px 0}
  .comments .comment .comment-avatar{width:38px;height:38px}
  .comments .comment-author{font-size:13px}
  .comments .comment-text{font-size:13px;line-height:1.55}
  body.watch-page .comments #add-comments-form .comment-captcha-label{grid-template-columns:120px minmax(0,1fr)!important;max-width:100%}
  .comments #add-comments-form .comment-captcha-label>a,.comments #add-comments-form #dle-captcha,.comments #add-comments-form #dle-captcha img{width:120px;height:50px}
  .comments .comment-compose-footer{flex-direction:column;align-items:stretch}
  .comments #add-comments-form .dle-comment-submit{width:100%!important;min-height:40px}
}

/* DLE system notices: validation, success, warning and error messages. */
#DLEPush.DLEPush {
  position:fixed;
  z-index:1400;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(380px,calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  color:#ededed;
  font-family:inherit;
  pointer-events:none;
}
#DLEPush.top-right { top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right)); }
#DLEPush.top-left { top:max(20px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left)); }
#DLEPush.bottom-right { right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom)); }
#DLEPush.bottom-left { bottom:max(20px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left)); }
#DLEPush.center { top:50%;left:50%;transform:translate(-50%,-50%); }
#DLEPush > .DLEPush-notification:empty { display:none!important; }
#DLEPush .DLEPush-notification.wrapper {
  position:relative;
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:2px 12px;
  min-height:72px;
  margin:0;
  padding:15px 44px 15px 15px;
  overflow:hidden;
  border:1px solid #353535;
  border-radius:16px;
  background:rgba(24,24,24,.97);
  box-shadow:0 18px 54px rgba(0,0,0,.46),0 2px 8px rgba(0,0,0,.28);
  color:#ededed;
  pointer-events:auto;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
#DLEPush .DLEPush-notification.wrapper::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:#8a8a8a;
}
#DLEPush .DLEPush-icon {
  grid-column:1;
  grid-row:1 / 3;
  align-self:center;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:#272727;
  color:#cfcfcf;
}
#DLEPush .DLEPush-icon svg { display:block;width:22px;height:22px; }
#DLEPush .DLEPush-header {
  grid-column:2;
  color:#f5f5f5;
  font-size:13px;
  font-weight:750;
  line-height:1.35;
}
#DLEPush .DLEPush-header:empty { display:none; }
#DLEPush .DLEPush-message {
  grid-column:2;
  align-self:center;
  color:#cfcfcf;
  font-size:13px;
  font-weight:550;
  line-height:1.45;
  overflow-wrap:anywhere;
}
#DLEPush .DLEPush-message a { color:#fff;text-decoration:underline;text-underline-offset:3px; }
#DLEPush .DLEPush-close {
  position:absolute;
  top:9px;
  right:9px;
  z-index:1;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  margin:0;
  padding:0;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#8f8f8f;
  font:600 20px/1 Arial,sans-serif;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
#DLEPush .DLEPush-close:hover { border-color:#3b3b3b;background:#292929;color:#fff; }
#DLEPush .DLEPush-close:focus-visible { outline:2px solid #eee;outline-offset:2px; }
#DLEPush .push-success::before { background:#62ad7a; }
#DLEPush .push-success .DLEPush-icon { background:rgba(71,151,97,.16);color:#78c68f; }
#DLEPush .push-warning::before { background:#c79b50; }
#DLEPush .push-warning .DLEPush-icon { background:rgba(190,139,49,.16);color:#dfb866; }
#DLEPush .push-error::before { background:#c75f5f; }
#DLEPush .push-error .DLEPush-icon { background:rgba(183,69,69,.16);color:#dc7777; }

@media(max-width:640px){
  #DLEPush.DLEPush {
    top:max(10px,env(safe-area-inset-top));
    right:10px;
    bottom:auto;
    left:10px;
    width:auto;
    max-width:none;
    gap:8px;
  }
  #DLEPush .DLEPush-notification.wrapper {
    grid-template-columns:36px minmax(0,1fr);
    min-height:66px;
    padding:13px 42px 13px 13px;
    border-radius:14px;
  }
  #DLEPush .DLEPush-icon { width:36px;height:36px;border-radius:11px; }
  #DLEPush .DLEPush-icon svg { width:20px;height:20px; }
  #DLEPush .DLEPush-message { font-size:12.5px; }
}
.brand-name {
    font-size: 18px;
    letter-spacing: .01em;
    font-weight: 700;
}
/* Site-wide 21+ age gate */
.age-gate {
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  place-items:center;
  min-height:100dvh;
  padding:clamp(18px,4vw,42px);
  isolation:isolate;
}
.age-gate__backdrop {
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(9px) saturate(.72);
  -webkit-backdrop-filter:blur(9px) saturate(.72);
}
.age-gate__card {
  width:min(100%,470px);
  padding:clamp(28px,5vw,46px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(27,27,27,.98),rgba(13,13,13,.98));
  box-shadow:0 28px 90px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.045);
  color:#f5f5f5;
  text-align:center;
}
.age-gate__badge {
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  margin:0 auto 24px;
  border-radius:22px;
  background:#f4f4f4;
  color:#0d0d0d;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.04em;
  box-shadow:0 10px 34px rgba(0,0,0,.3);
}
.age-gate__eyebrow {
  margin:0 0 10px;
  color:#858585;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.age-gate__title {
  margin:0;
  color:#fff;
  font-size: clamp(22px,2.6vw,22px);
  font-weight: 700;
  line-height:1.12;
  letter-spacing:-.035em;
}
.age-gate__description {
  max-width:380px;
  margin:16px auto 0;
  color:#a7a7a7;
  font-size:14px;
  line-height:1.65;
}
.age-gate__actions {
  display:grid;
  gap:10px;
  margin-top:28px;
}
.age-gate__confirm,
.age-gate__leave {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  border-radius:999px;
  font:700 14px/1 Montserrat,sans-serif;
  text-decoration:none;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
}
.age-gate__confirm {
  border:1px solid #fff;
  background:#fff;
  color:#0b0b0b;
  cursor:pointer;
}
.age-gate__confirm:hover { background:#dedede; border-color:#dedede; transform:translateY(-1px); }
.age-gate__leave { border:1px solid #303030; background:#181818; color:#9a9a9a; }
.age-gate__leave:hover { border-color:#444; background:#202020; color:#eee; transform:translateY(-1px); }
.age-gate__confirm:focus-visible,
.age-gate__leave:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.age-gate__note {
  margin:18px auto 0;
  color:#5f5f5f;
  font-size:10px;
  line-height:1.55;
}
html.age-gate-pending,
html.age-gate-pending body { overflow:hidden !important; }
html.age-gate-pending .age-gate { display:grid; }
html.age-gate-pending body > .app-shell,
html.age-gate-pending body > .skeleton-shell,
html.age-gate-pending body > .mobile-bottom-nav {
  filter:blur(14px);
  transform:scale(1.012);
  pointer-events:none;
  user-select:none;
}
html.age-verified .age-gate { display:none; }

@media (max-width:600px) {
  .age-gate { align-items:end; padding:12px; }
  .age-gate__card { padding:28px 22px 24px; border-radius:24px; }
  .age-gate__badge { width:62px; height:62px; margin-bottom:20px; border-radius:19px; font-size:21px; }
  .age-gate__title {font-size: 20px;}
  .age-gate__description { font-size:13px; line-height:1.58; }
  .age-gate__actions { margin-top:24px; }
}

@media (prefers-reduced-motion:reduce) {
  .age-gate__confirm,
  .age-gate__leave { transition:none; }
}

/* Comment threads: compact YouTube-like hierarchy and composers. */
.comments .dle-comments-list,
.comments .comments-tree-list,
.comments .comments-tree-item{min-width:0}
.comments .comments-tree-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.comments .comments-tree-list[hidden]{display:none!important}
.comments .comments-tree-list .comments-tree-list{position:relative;margin:0 0 0 54px;padding:0 0 0 18px}
.comments .comments-tree-list .comments-tree-list::before{content:"";position:absolute;top:0;bottom:14px;left:0;width:1px;background:#303030}
.comments .comments-tree-item{position:relative;margin:0;padding:0;list-style:none}
.comments .comments-tree-list .comments-tree-list>.comments-tree-item::before{content:"";position:absolute;top:35px;left:-18px;width:14px;height:14px;border:solid #303030;border-width:0 0 1px 1px;border-radius:0 0 0 11px}
.comments .comments-tree-list--enhanced{margin-left:54px;padding-left:18px}
.comments .comment{border-bottom:0!important}
.comments .comments-tree-list--root>.comments-tree-item>.comment,
.comments .dle-comments-list>form>#dle-comments-list>div[id^="comment-id-"]>.comment{border-top:1px solid #262626!important}
.comments .comment-text .quote_block[hidden]{display:none!important}
.comments .comment-replying-to{display:inline-block;margin:0 6px 3px 0;color:#3ea6ff;font-size:13px;font-weight:600}
.comments .comment-replies-toggle{display:inline-flex;align-items:center;gap:9px;min-height:36px;margin: 5px 0 0 -10px;padding:0 12px;border:0;border-radius:999px;background: #202020;color: #ffffff;font:inherit;font-size: 12px;font-weight: 600;cursor:pointer;transition:background .18s ease,color .18s ease}
.comments .comment-replies-toggle:hover{background:rgb(255 255 255 / 12%)}
.comments .comment-replies-toggle:focus-visible{outline:2px solid #3ea6ff;outline-offset:2px}
.comments .comment-replies-toggle i{font-size:11px;transition:transform .2s ease}
.comments .comment-replies-toggle.is-open i{transform:rotate(180deg)}

.comments #add-comments-form.dle-comment-form{padding:14px 16px!important;border:1px solid #292929!important;border-radius:18px!important;background:#141414!important;transition:border-color .18s ease,background .18s ease}
.comments #add-comments-form.dle-comment-form:focus-within{border-color:#3a3a3a!important;background:#161616!important}
.comments .comment-compose-identity{margin-bottom:10px;font-size:12px}
.comments .comment-compose-avatar{width:32px;height:32px;border-color:#333;background:#222;font-size:18px}
.comments #add-comments-form .bb-editor,
.comments #dlefastreplycomments .bb-editor{border:0;background:transparent}
.comments #add-comments-form textarea,
.comments #dlefastreplycomments textarea{display:block;width:100%;min-height:44px!important;height:44px;padding:11px 2px 8px!important;resize:none;border:0!important;/* border-bottom:1px solid #3a3a3a!important; */border-radius:0!important;outline:0;background:transparent!important;color:#f1f1f1!important;font:inherit;font-size:14px;line-height:1.55;transition:min-height .18s ease,border-color .18s ease}
.comments #add-comments-form textarea:focus,
.comments #dlefastreplycomments textarea:focus{min-height:84px!important;border-bottom-color:#f1f1f1!important;box-shadow:none!important}
.comments #add-comments-form textarea::placeholder,
.comments #dlefastreplycomments textarea::placeholder{color:#777;opacity:1}
.comments #add-comments-form:not(:focus-within) .comment-compose-footer{display:none}
.comments .comment-compose-footer{margin-top:10px}
.comments #add-comments-form .dle-comment-submit{min-height:36px!important;padding:0 16px!important;border-radius:999px!important;font-size:12px!important}

.comments #dlefastreplycomments{position:relative;margin:6px 0 14px 54px;padding:13px 15px 12px;border:1px solid #2b2b2b;border-radius:16px;background:#151515;color:transparent;font-size:0;line-height:1.4}
.comments #dlefastreplycomments>br{display:none}
.comments #dlefastreplycomments>form{margin-top:0;color:#8e8e8e;font-size:12px}
.comments #dlefastreplycomments .comment-reply-identity{margin-bottom:7px;color:#999;font-size:12px}
.comments #dlefastreplycomments .comment-reply-identity strong{color:#eee}
.comments #dlefastreplycomments .save-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:10px!important;text-align:initial!important}
.comments #dlefastreplycomments .save-buttons input{min-height:34px;padding:0 14px;border:0;border-radius:999px;background:#f1f1f1;color:#111;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.comments #dlefastreplycomments .save-buttons .cancelchanges{background:transparent;color:#aaa}
.comments #dlefastreplycomments .save-buttons .cancelchanges:hover{background:#272727;color:#fff}
.comments #dlefastreplycomments .save-buttons .applychanges:hover{background:#d9d9d9}

@media(max-width:640px){
  .comments .comments-tree-list .comments-tree-list,
  .comments .comments-tree-list--enhanced{margin-left:24px;padding-left:13px}
  .comments .comments-tree-list .comments-tree-list>.comments-tree-item::before{left:-13px;width:9px}
  .comments #dlefastreplycomments{margin-left:0;padding:12px}
  .comments #add-comments-form.dle-comment-form{padding:12px!important}
  .comments .comment-replies-toggle{min-height:38px;font-size:12px}
}

.seo-h1 {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted-2);
  margin: 0px;
  margin-top: 20px;
}

.seo-text {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

/* Guest authentication — native DLE login in a site-styled modal. */
.auth-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:88px;height:38px;padding:0 13px;border:1px solid #303030;border-radius:999px;background:#1c1c1c;color:#f2f2f2;font:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.auth-trigger:hover{background:#242424;border-color:#3b3b3b}
.auth-trigger:active{transform:scale(.97)}
.auth-trigger i{font-size:13px}
.auth-trigger--compact{min-width:36px;width:auto;height:36px;padding:0 11px}
.auth-modal[hidden]{display:none!important}
.auth-modal{position:fixed;inset:0;z-index:3100;display:grid;place-items:center;padding:20px;overflow:auto;opacity:0;transition:opacity .18s ease}
.auth-modal.is-open{opacity:1}
.auth-modal__backdrop{position:fixed;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(0,0,0,.76);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:default}
.auth-modal__card{position:relative;z-index:1;width:min(430px,100%);padding:28px;border:1px solid #2d2d2d;border-radius:24px;background:#181818;box-shadow:0 28px 80px rgba(0,0,0,.58);transform:translateY(12px) scale(.985);transition:transform .18s ease}
.auth-modal.is-open .auth-modal__card{transform:none}
.auth-modal__close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:#8d8d8d;font-size:15px;cursor:pointer}
.auth-modal__close:hover{border-color:#313131;background:#222;color:#fff}
.auth-modal__brand{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border-radius:16px;background:#087fff}
.auth-modal__brand img{display:block;width:34px;height:34px;object-fit:contain}
.auth-modal__eyebrow{margin:0 0 6px;color:#777;text-align:center;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.auth-modal__title{margin:0;color:#f6f6f6;text-align:center;font-size:25px;line-height:1.2;font-weight:800;letter-spacing:-.035em}
.auth-modal__lead{max-width:340px;margin:10px auto 22px;color:#8b8b8b;text-align:center;font-size:12px;line-height:1.55}
.auth-modal__tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:22px;padding:4px;border:1px solid #292929;border-radius:15px;background:#111}
.auth-modal__tab{height:44px;padding:0 12px;border:0;border-radius:11px;background:transparent;color:#828282;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .16s ease,color .16s ease}
.auth-modal__tab:hover{color:#dcdcdc}
.auth-modal__tab.is-active{background:#242424;color:#fff}
.auth-modal__panel[hidden]{display:none!important}
.auth-modal__form{display:grid;gap:15px}
.auth-field{display:grid;gap:7px;color:#aaa;font-size:10px;font-weight:700}
.auth-field__control{position:relative;display:flex;align-items:center;height:52px;border:1px solid #2d2d2d;border-radius:13px;background:#121212;transition:border-color .16s ease,background .16s ease}
.auth-field__control:focus-within{border-color:#555;background:#141414}
.auth-field__control>i{width:42px;color:#707070;text-align:center;font-size:13px}
.auth-field__control input{min-width:0;flex:1;height:100%;padding:0 12px 0 0;border:0;outline:0;background:transparent;color:#f1f1f1;font:inherit;font-size:12px;font-weight:500}
.auth-field__control input::placeholder{color:#5f5f5f}
.auth-password-toggle{display:grid;place-items:center;width:46px;height:100%;padding:0;border:0;background:transparent;color:#777;font-size:14px;cursor:pointer}
.auth-password-toggle:hover{color:#fff}
.auth-modal__submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-top:4px;padding:0 18px;border:1px solid #f5f5f5;border-radius:13px;background:#f5f5f5;color:#111;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.auth-modal__submit:hover{border-color:#fff;background:#fff}
.auth-modal__submit:active{transform:scale(.985)}
.auth-modal__submit i{font-size:11px}
.auth-modal__help{display:block;width:max-content;margin:17px auto 0;color:#8e8e8e;font-size:11px;font-weight:600}
.auth-modal__help:hover,.auth-modal__legal a:hover{color:#fff}
.auth-register-copy{padding:20px 18px 22px;text-align:center;border:1px solid #292929;border-radius:15px;background:#131313}
.auth-register-copy__icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 13px;border:1px solid #323232;border-radius:50%;background:#1d1d1d;color:#e8e8e8;font-size:20px}
.auth-register-copy h3{margin:0 0 8px;color:#f2f2f2;font-size:16px}
.auth-register-copy p{margin:0;color:#858585;font-size:11px;line-height:1.6}
.auth-modal__legal{margin:15px 10px 0;color:#656565;text-align:center;font-size:9px;line-height:1.55}
.auth-modal__legal a{color:#a5a5a5;text-decoration:underline;text-underline-offset:2px}
body.has-auth-modal{overflow:hidden!important}
body.has-auth-modal .panel-scroll{overflow:hidden!important}



@media(max-width:640px){
  .auth-trigger--compact{width:36px;min-width:36px;padding:0;border-radius:50%}
  .auth-trigger--compact .auth-trigger__label{display:none}
  .auth-modal{align-items:end;padding:10px}
  .auth-modal__card{width:100%;padding:24px 18px 20px;border-radius:22px}
  .auth-modal__title{font-size:22px}
  .auth-modal__lead{margin-bottom:18px}
  .auth-modal__tabs{margin-bottom:18px}
}

@media (max-width:600px) {
  .age-gate { align-items:end; padding:12px; }
  .age-gate__card { padding:28px 22px 24px; border-radius:24px; }
  .age-gate__badge { width:62px; height:62px; margin-bottom:20px; border-radius:19px; font-size:21px; }
  .age-gate__title {font-size: 20px;}
  .age-gate__description { font-size:13px; line-height:1.58; }
  .age-gate__actions { margin-top:24px; }
}

@media (prefers-reduced-motion:reduce) {
  .age-gate__confirm,
  .age-gate__leave { transition:none; }
}

/* Comment threads: compact YouTube-like hierarchy and composers. */
.comments .dle-comments-list,
.comments .comments-tree-list,
.comments .comments-tree-item{min-width:0}
.comments .comments-tree-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.comments .comments-tree-list[hidden]{display:none!important}
.comments .comments-tree-list .comments-tree-list{position:relative;margin:0 0 0 54px;padding:0 0 0 18px}
.comments .comments-tree-list .comments-tree-list::before{content:"";position:absolute;top:0;bottom:14px;left:0;width:1px;background:#303030}
.comments .comments-tree-item{position:relative;margin:0;padding:0;list-style:none}
.comments .comments-tree-list .comments-tree-list>.comments-tree-item::before{content:"";position:absolute;top:35px;left:-18px;width:14px;height:14px;border:solid #303030;border-width:0 0 1px 1px;border-radius:0 0 0 11px}
.comments .comments-tree-list--enhanced{margin-left:54px;padding-left:18px}
.comments .comment{border-bottom:0!important}
.comments .comments-tree-list--root>.comments-tree-item>.comment,
.comments .dle-comments-list>form>#dle-comments-list>div[id^="comment-id-"]>.comment{border-top:1px solid #262626!important}
.comments .comment-text .quote_block[hidden]{display:none!important}
.comments .comment-replying-to{display:inline-block;margin:0 6px 3px 0;color:#3ea6ff;font-size:13px;font-weight:600}
.comments .comment-replies-toggle{display:inline-flex;align-items:center;gap:9px;min-height:36px;margin: 5px 0 0 -10px;padding:0 12px;border:0;border-radius:999px;background: #202020;color: #ffffff;font:inherit;font-size: 12px;font-weight: 600;cursor:pointer;transition:background .18s ease,color .18s ease}
.comments .comment-replies-toggle:hover{background:rgb(255 255 255 / 12%)}
.comments .comment-replies-toggle:focus-visible{outline:2px solid #3ea6ff;outline-offset:2px}
.comments .comment-replies-toggle i{font-size:11px;transition:transform .2s ease}
.comments .comment-replies-toggle.is-open i{transform:rotate(180deg)}

.comments #add-comments-form.dle-comment-form{padding:14px 16px!important;border:1px solid #292929!important;border-radius:18px!important;background:#141414!important;transition:border-color .18s ease,background .18s ease}
.comments #add-comments-form.dle-comment-form:focus-within{border-color:#3a3a3a!important;background:#161616!important}
.comments .comment-compose-identity{margin-bottom:10px;font-size:12px}
.comments .comment-compose-avatar{width:32px;height:32px;border-color:#333;background:#222;font-size:18px}
.comments #add-comments-form .bb-editor,
.comments #dlefastreplycomments .bb-editor{border:0;background:transparent}
.comments #add-comments-form textarea,
.comments #dlefastreplycomments textarea{display:block;width:100%;min-height:44px!important;height:44px;padding:11px 2px 8px!important;resize:none;border:0!important;/* border-bottom:1px solid #3a3a3a!important; */border-radius:0!important;outline:0;background:transparent!important;color:#f1f1f1!important;font:inherit;font-size:14px;line-height:1.55;transition:min-height .18s ease,border-color .18s ease}
.comments #add-comments-form textarea:focus,
.comments #dlefastreplycomments textarea:focus{min-height:84px!important;border-bottom-color:#f1f1f1!important;box-shadow:none!important}
.comments #add-comments-form textarea::placeholder,
.comments #dlefastreplycomments textarea::placeholder{color:#777;opacity:1}
.comments #add-comments-form:not(:focus-within) .comment-compose-footer{display:none}
.comments .comment-compose-footer{margin-top:10px}
.comments #add-comments-form .dle-comment-submit{min-height:36px!important;padding:0 16px!important;border-radius:999px!important;font-size:12px!important}

.comments #dlefastreplycomments{position:relative;margin:6px 0 14px 54px;padding:13px 15px 12px;border:1px solid #2b2b2b;border-radius:16px;background:#151515;color:transparent;font-size:0;line-height:1.4}
.comments #dlefastreplycomments>br{display:none}
.comments #dlefastreplycomments>form{margin-top:0;color:#8e8e8e;font-size:12px}
.comments #dlefastreplycomments .comment-reply-identity{margin-bottom:7px;color:#999;font-size:12px}
.comments #dlefastreplycomments .comment-reply-identity strong{color:#eee}
.comments #dlefastreplycomments .save-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:10px!important;text-align:initial!important}
.comments #dlefastreplycomments .save-buttons input{min-height:34px;padding:0 14px;border:0;border-radius:999px;background:#f1f1f1;color:#111;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.comments #dlefastreplycomments .save-buttons .cancelchanges{background:transparent;color:#aaa}
.comments #dlefastreplycomments .save-buttons .cancelchanges:hover{background:#272727;color:#fff}
.comments #dlefastreplycomments .save-buttons .applychanges:hover{background:#d9d9d9}

@media(max-width:640px){
  .comments .comments-tree-list .comments-tree-list,
  .comments .comments-tree-list--enhanced{margin-left:24px;padding-left:13px}
  .comments .comments-tree-list .comments-tree-list>.comments-tree-item::before{left:-13px;width:9px}
  .comments #dlefastreplycomments{margin-left:0;padding:12px}
  .comments #add-comments-form.dle-comment-form{padding:12px!important}
  .comments .comment-replies-toggle{min-height:38px;font-size:12px}
}

/* Guest authentication — native DLE login in a site-styled modal. */
.auth-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:88px;height:38px;padding:0 13px;border:1px solid #303030;border-radius:999px;background:#1c1c1c;color:#f2f2f2;font:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.auth-trigger:hover{background:#242424;border-color:#3b3b3b}
.auth-trigger:active{transform:scale(.97)}
.auth-trigger i{font-size:13px}
.auth-trigger--compact{min-width:36px;width:auto;height:36px;padding:0 11px}
.auth-modal[hidden]{display:none!important}
.auth-modal{position:fixed;inset:0;z-index:3100;display:grid;place-items:center;padding:20px;overflow:auto;opacity:0;transition:opacity .18s ease}
.auth-modal.is-open{opacity:1}
.auth-modal__backdrop{position:fixed;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(0,0,0,.76);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:default}
.auth-modal__card{position:relative;z-index:1;width:min(430px,100%);padding:28px;border:1px solid #2d2d2d;border-radius:24px;background:#181818;box-shadow:0 28px 80px rgba(0,0,0,.58);transform:translateY(12px) scale(.985);transition:transform .18s ease}
.auth-modal.is-open .auth-modal__card{transform:none}
.auth-modal__close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:#8d8d8d;font-size:15px;cursor:pointer}
.auth-modal__close:hover{border-color:#313131;background:#222;color:#fff}
.auth-modal__brand{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border-radius:16px;background:#087fff}
.auth-modal__brand img{display:block;width:34px;height:34px;object-fit:contain}
.auth-modal__eyebrow{margin:0 0 6px;color:#777;text-align:center;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.auth-modal__title{margin:0;color:#f6f6f6;text-align:center;font-size:25px;line-height:1.2;font-weight:800;letter-spacing:-.035em}
.auth-modal__lead{max-width:340px;margin:10px auto 22px;color:#8b8b8b;text-align:center;font-size:12px;line-height:1.55}
.auth-modal__tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:22px;padding:4px;border:1px solid #292929;border-radius:15px;background:#111}
.auth-modal__tab{height:44px;padding:0 12px;border:0;border-radius:11px;background:transparent;color:#828282;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .16s ease,color .16s ease}
.auth-modal__tab:hover{color:#dcdcdc}
.auth-modal__tab.is-active{background:#242424;color:#fff}
.auth-modal__panel[hidden]{display:none!important}
.auth-modal__form{display:grid;gap:15px}
.auth-field{display:grid;gap:7px;color:#aaa;font-size:10px;font-weight:700}
.auth-field__control{position:relative;display:flex;align-items:center;height:52px;border:1px solid #2d2d2d;border-radius:13px;background:#121212;transition:border-color .16s ease,background .16s ease}
.auth-field__control:focus-within{border-color:#555;background:#141414}
.auth-field__control>i{width:42px;color:#707070;text-align:center;font-size:13px}
.auth-field__control input{min-width:0;flex:1;height:100%;padding:0 12px 0 0;border:0;outline:0;background:transparent;color:#f1f1f1;font:inherit;font-size:12px;font-weight:500}
.auth-field__control input::placeholder{color:#5f5f5f}
.auth-password-toggle{display:grid;place-items:center;width:46px;height:100%;padding:0;border:0;background:transparent;color:#777;font-size:14px;cursor:pointer}
.auth-password-toggle:hover{color:#fff}
.auth-modal__submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-top:4px;padding:0 18px;border:1px solid #f5f5f5;border-radius:13px;background:#f5f5f5;color:#111;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.auth-modal__submit:hover{border-color:#fff;background:#fff}
.auth-modal__submit:active{transform:scale(.985)}
.auth-modal__submit i{font-size:11px}
.auth-modal__help{display:block;width:max-content;margin:17px auto 0;color:#8e8e8e;font-size:11px;font-weight:600}
.auth-modal__help:hover,.auth-modal__legal a:hover{color:#fff}
.auth-register-copy{padding:20px 18px 22px;text-align:center;border:1px solid #292929;border-radius:15px;background:#131313}
.auth-register-copy__icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 13px;border:1px solid #323232;border-radius:50%;background:#1d1d1d;color:#e8e8e8;font-size:20px}
.auth-register-copy h3{margin:0 0 8px;color:#f2f2f2;font-size:16px}
.auth-register-copy p{margin:0;color:#858585;font-size:11px;line-height:1.6}
.auth-modal__legal{margin:15px 10px 0;color:#656565;text-align:center;font-size:9px;line-height:1.55}
.auth-modal__legal a{color:#a5a5a5;text-decoration:underline;text-underline-offset:2px}
body.has-auth-modal{overflow:hidden!important}
body.has-auth-modal .panel-scroll{overflow:hidden!important}

@media(max-width:640px){
  .auth-trigger--compact{width:36px;min-width:36px;padding:0;border-radius:50%}
  .auth-trigger--compact .auth-trigger__label{display:none}
  .auth-modal{align-items:end;padding:10px}
  .auth-modal__card{width:100%;padding:24px 18px 20px;border-radius:22px}
  .auth-modal__title{font-size:22px}
  .auth-modal__lead{margin-bottom:18px}
  .auth-modal__tabs{margin-bottom:18px}
}

@media (max-width:600px) {
  .age-gate { align-items:end; padding:12px; }
  .age-gate__card { padding:28px 22px 24px; border-radius:24px; }
  .age-gate__badge { width:62px; height:62px; margin-bottom:20px; border-radius:19px; font-size:21px; }
  .age-gate__title {font-size: 20px;}
  .age-gate__description { font-size:13px; line-height:1.58; }
  .age-gate__actions { margin-top:24px; }
}

@media (prefers-reduced-motion:reduce) {
  .age-gate__confirm,
  .age-gate__leave { transition:none; }
}

/* Comment threads: compact YouTube-like hierarchy and composers. */
.comments .dle-comments-list,
.comments .comments-tree-list,
.comments .comments-tree-item{min-width:0}
.comments .comments-tree-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.comments .comments-tree-list[hidden]{display:none!important}
.comments .comments-tree-list .comments-tree-list{position:relative;margin:0 0 0 54px;padding:0 0 0 18px}
.comments .comments-tree-list .comments-tree-list::before{content:"";position:absolute;top:0;bottom:14px;left:0;width:1px;background:#303030}
.comments .comments-tree-item{position:relative;margin:0;padding:0;list-style:none}
.comments .comments-tree-list .comments-tree-list>.comments-tree-item::before{content:"";position:absolute;top:35px;left:-18px;width:14px;height:14px;border:solid #303030;border-width:0 0 1px 1px;border-radius:0 0 0 11px}
.comments .comments-tree-list--enhanced{margin-left:54px;padding-left:18px}
.comments .comment{border-bottom:0!important}
.comments .comments-tree-list--root>.comments-tree-item>.comment,
.comments .dle-comments-list>form>#dle-comments-list>div[id^="comment-id-"]>.comment{border-top:1px solid #262626!important}
.comments .comment-text .quote_block[hidden]{display:none!important}
.comments .comment-replying-to{display:inline-block;margin:0 6px 3px 0;color:#3ea6ff;font-size:13px;font-weight:600}
.comments .comment-replies-toggle{display:inline-flex;align-items:center;gap:9px;min-height:36px;margin: 5px 0 0 -10px;padding:0 12px;border:0;border-radius:999px;background: #202020;color: #ffffff;font:inherit;font-size: 12px;font-weight: 600;cursor:pointer;transition:background .18s ease,color .18s ease}
.comments .comment-replies-toggle:hover{background:rgb(255 255 255 / 12%)}
.comments .comment-replies-toggle:focus-visible{outline:2px solid #3ea6ff;outline-offset:2px}
.comments .comment-replies-toggle i{font-size:11px;transition:transform .2s ease}
.comments .comment-replies-toggle.is-open i{transform:rotate(180deg)}

.comments #add-comments-form.dle-comment-form{padding:14px 16px!important;border:1px solid #292929!important;border-radius:18px!important;background:#141414!important;transition:border-color .18s ease,background .18s ease}
.comments #add-comments-form.dle-comment-form:focus-within{border-color:#3a3a3a!important;background:#161616!important}
.comments .comment-compose-identity{margin-bottom:10px;font-size:12px}
.comments .comment-compose-avatar{width:32px;height:32px;border-color:#333;background:#222;font-size:18px}
.comments #add-comments-form .bb-editor,
.comments #dlefastreplycomments .bb-editor{border:0;background:transparent}
.comments #add-comments-form textarea,
.comments #dlefastreplycomments textarea{display:block;width:100%;min-height:44px!important;height:44px;padding:11px 2px 8px!important;resize:none;border:0!important;/* border-bottom:1px solid #3a3a3a!important; */border-radius:0!important;outline:0;background:transparent!important;color:#f1f1f1!important;font:inherit;font-size:14px;line-height:1.55;transition:min-height .18s ease,border-color .18s ease}
.comments #add-comments-form textarea:focus,
.comments #dlefastreplycomments textarea:focus{min-height:84px!important;border-bottom-color:#f1f1f1!important;box-shadow:none!important}
.comments #add-comments-form textarea::placeholder,
.comments #dlefastreplycomments textarea::placeholder{color:#777;opacity:1}
.comments #add-comments-form:not(:focus-within) .comment-compose-footer{display:none}
.comments .comment-compose-footer{margin-top:10px}
.comments #add-comments-form .dle-comment-submit{min-height:36px!important;padding:0 16px!important;border-radius:999px!important;font-size:12px!important}

.comments #dlefastreplycomments{position:relative;margin:6px 0 14px 54px;padding:13px 15px 12px;border:1px solid #2b2b2b;border-radius:16px;background:#151515;color:transparent;font-size:0;line-height:1.4}
.comments #dlefastreplycomments>br{display:none}
.comments #dlefastreplycomments>form{margin-top:0;color:#8e8e8e;font-size:12px}
.comments #dlefastreplycomments .comment-reply-identity{margin-bottom:7px;color:#999;font-size:12px}
.comments #dlefastreplycomments .comment-reply-identity strong{color:#eee}
.comments #dlefastreplycomments .save-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:10px!important;text-align:initial!important}
.comments #dlefastreplycomments .save-buttons input{min-height:34px;padding:0 14px;border:0;border-radius:999px;background:#f1f1f1;color:#111;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.comments #dlefastreplycomments .save-buttons .cancelchanges{background:transparent;color:#aaa}
.comments #dlefastreplycomments .save-buttons .cancelchanges:hover{background:#272727;color:#fff}
.comments #dlefastreplycomments .save-buttons .applychanges:hover{background:#d9d9d9}

@media(max-width:640px){
  .comments .comments-tree-list .comments-tree-list,
  .comments .comments-tree-list--enhanced{margin-left:24px;padding-left:13px}
  .comments .comments-tree-list .comments-tree-list>.comments-tree-item::before{left:-13px;width:9px}
  .comments #dlefastreplycomments{margin-left:0;padding:12px}
  .comments #add-comments-form.dle-comment-form{padding:12px!important}
  .comments .comment-replies-toggle{min-height:38px;font-size:12px}
}
.nav-group--categories .category-nav-items{max-height:166px;overflow:hidden;transition:max-height .25s ease}.nav-group--categories.is-expanded .category-nav-items{max-height:calc(100dvh - 250px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#444 transparent}.category-nav-toggle{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 12px);min-height:32px;margin:5px 6px 0;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:10px;font-weight:700;cursor:pointer}.category-nav-toggle:hover{background:var(--hover);color:var(--text)}.category-nav-toggle i{font-size:9px;transition:transform .2s ease}.nav-group--categories.is-expanded .category-nav-toggle i{transform:rotate(180deg)}@media(max-width:780px){.nav-group--categories.is-expanded .category-nav-items{max-height:calc(100dvh - 180px)}}
.nav-group--categories .category-nav-items{max-height:166px;overflow:hidden;transition:max-height .25s ease}.nav-group--categories:has(.category-nav-check:checked) .category-nav-items{max-height:min(420px,calc(100dvh - 330px));overflow-y:scroll;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#555 transparent}.nav-group--categories:has(.category-nav-check:checked) .category-nav-toggle i{transform:rotate(180deg)}.nav-group--categories:has(.category-nav-check:checked) .category-nav-toggle span{font-size:0}.nav-group--categories:has(.category-nav-check:checked) .category-nav-toggle span::after{content:"Скрыть категории";font-size:10px}
@media(max-width:640px){body.watch-page .watch-header,body.watch-page .watch-rating-slot,body.watch-page .description-card,body.watch-page .comments{width:calc(100% - 20px)!important;max-width:none!important;margin-left:10px!important;margin-right:10px!important;box-sizing:border-box!important}body.watch-page .watch-content{padding-left:0!important;padding-right:0!important}}


@media (max-width:640px) { .js .skeleton-overlay { padding:0; } }

@media (max-width:640px) { .mobile-nav .mobile-nav__menu { display:flex; flex-direction:column; align-items:center; justify-content:center; border:0; background:transparent; color:#666; font:inherit; font-weight:650; } }

@media (max-width:760px) { body.watch-page .watch-title-row h1 { font-size:clamp(16px,4.4vw,20px)!important; line-height:1.2!important; } body.watch-page .comments-head h2 { font-size:16px; line-height:1.2; } }

/* Category page cards */ .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .category-thumb { aspect-ratio:1/1; } .category-info { background:transparent; } @media (max-width:640px) { .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px; } .category-card { background:transparent; border-color:transparent; } .category-info { padding:10px 2px 0; } .category-card:hover { background:transparent; border-color:transparent; transform:none; } }

/* Category grid fallback when the page-specific stylesheet is cached */ .category-grid { display:grid; }

/* Hide overflow menu action on video cards site-wide. */ .video-card .more-button, .system-content .more-button { display:none !important; }

.after-comments-videos{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft)}.after-comments-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.after-comments-grid .watch-rail-card{display:block;min-width:0}.after-comments-grid .watch-rail-thumb{width:100%;aspect-ratio:16/9;margin-bottom:7px}.after-comments-grid .watch-rail-card h4{margin:0;font-size:12px;line-height:1.35}@media(max-width:640px){.after-comments-videos{margin:22px 10px 0;padding-top:17px}.after-comments-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}.after-comments-grid .watch-rail-card h4{font-size:11px}}
.profile-page{display:grid;gap:18px;margin:0 auto;max-width:900px;padding:24px 0 48px}.profile-hero{display:flex;align-items:center;gap:18px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-card);background:linear-gradient(135deg,var(--surface-2),var(--surface));}.profile-avatar{width:88px;height:88px;flex:0 0 88px;overflow:hidden;border-radius:50%;border:1px solid var(--line);background:var(--surface-3)}.profile-avatar img{width:100%;height:100%;display:block;object-fit:cover}.profile-heading{min-width:0}.profile-heading h1{margin:4px 0 3px;color:var(--text);font-size:28px;line-height:1.1}.profile-heading p{margin:0;color:var(--muted)}.profile-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}.profile-action{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;color:var(--text-soft);font-size:12px;font-weight:700;background:transparent}.profile-action:hover{background:var(--hover);border-color:#3a3a3a}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--line)}.profile-stats>div{display:grid;gap:5px;padding:18px;background:var(--surface);text-align:center}.profile-stats strong{font-size:20px;color:var(--text)}.profile-stats span{font-size:11px;color:var(--muted);font-weight:700}.profile-card{padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface)}.profile-card__label{display:block;margin-bottom:8px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.profile-card p{margin:0;color:var(--text-soft);line-height:1.6}.profile-links{display:flex;gap:10px;flex-wrap:wrap}.profile-links a{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;color:var(--text-soft);font-size:12px;font-weight:700}.profile-links a:hover{background:var(--hover);color:var(--text)}@media(max-width:640px){.profile-page{padding:14px 10px 32px}.profile-hero{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:16px}.profile-avatar{width:64px;height:64px;flex-basis:64px}.profile-heading h1{font-size:21px}.profile-heading p{font-size:12px}.profile-actions{grid-column:1/-1;margin:0}.profile-action{flex:1;justify-content:center}.profile-stats strong{font-size:16px}.profile-stats span{font-size:9px}.profile-links a{width:100%;justify-content:center}}.profile-avatar{position:relative}.profile-avatar__emoji{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--surface);border-radius:50%;background:var(--surface-3);font-size:18px;line-height:1}@media(max-width:640px){.profile-avatar__emoji{width:24px;height:24px;font-size:15px}}.profile-popup-card{padding:20px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);color:var(--text)}.profile-popup-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}.profile-popup-avatar{width:56px;height:56px;overflow:hidden;border-radius:50%;background:var(--surface-3)}.profile-popup-avatar img{width:100%;height:100%;object-fit:cover}.profile-popup-head h2{margin:3px 0;color:var(--text);font-size:20px}.profile-popup-head p{margin:0;color:var(--muted);font-size:12px}.profile-popup-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.profile-popup-actions .profile-action{justify-content:center;text-align:center}.profile-action--primary{background:var(--text);color:var(--bg)!important}@media(max-width:640px){.profile-popup-actions{grid-template-columns:1fr}.profile-popup-actions .profile-action{width:100%}}

/* ============================================================================
   SLITOE HTML5 VIDEO PLAYER — ONE CONSOLIDATED STYLESHEET SECTION
   Works with existing fullstory.tpl and the updated iPhone-aware app.js.
   iPhone native video fullscreen is opened by JS; CSS controls inline/fullscreen
   presentation in browsers that support element fullscreen.
   ============================================================================ */
.player {
  --player-position: 0%;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line, #292929);
  border-radius: 15px;
  background: #000;
  color: #fff;
}

.player-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #080808;
}

.player-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.82);
}

.player-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop video */
  object-position: center;
  background: #000;
}

.player-missing {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  color: #aaa;
  font-size: 12px;
  line-height: 1.6;
  background: #080808;
}

.big-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: rgba(7, 7, 7, .74);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translate(-50%, -50%);
  transition: opacity .18s ease, background-color .18s ease, transform .18s ease;
}
.big-play i { font-size: 18px; margin-left: 2px; }
.big-play:hover { background: rgba(24, 24, 24, .90); }
.player.is-playing .big-play {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.94);
}
@media (hover: hover) and (pointer: fine) {
  .player:hover.is-playing .big-play {
    opacity: .82;
    pointer-events: auto;
    transform: translate(-50%, -50%);
  }
}

.player-controls {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 25px 12px 9px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .78));
}
.player[data-video-missing="true"] .player-controls {
  opacity: .35;
  pointer-events: none;
}

.player-progress {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 16px;
  cursor: pointer;
  touch-action: manipulation;
}
.player-progress::before,
.player-progress > span {
  position: absolute;
  top: 50%;
  left: 0;
  height: 3px;
  border-radius: 99px;
  transform: translateY(-50%);
}
.player-progress::before {
  content: "";
  width: 100%;
  background: rgba(255, 255, 255, .4);
}
.player-progress > span {
  width: var(--player-position, 0%);
  background: #f5f5f5;
  pointer-events: none;
}
.player-progress > i {
  position: absolute;
  top: 50%;
  left: var(--player-position, 0%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .player:hover .player-progress > i { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .player-progress > i { opacity: 1; }
}

.player-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-top: 1px;
}
.player-control-group {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.player-control-group button {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #e5e5e5;
  cursor: pointer;
}
.player-control-group button i { font-size: 15px; }
.player-control-group button:hover {
  background: rgba(255, 255, 255, .13);
  color: #fff;
}
.player-control-group button:focus-visible,
.big-play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.timecode {
  margin-left: 4px;
  color: #e0e0e0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px #000;
}

/* Element fullscreen on desktop / Android / browsers that support it. */
.player:fullscreen,
.player:-webkit-full-screen {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #000;
}
.player:fullscreen .player-video,
.player:-webkit-full-screen .player-video,
.player-video:fullscreen,
.player-video:-webkit-full-screen {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.player:fullscreen .player-controls,
.player:-webkit-full-screen .player-controls {
  padding-right: max(18px, env(safe-area-inset-right));
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  padding-left: max(18px, env(safe-area-inset-left));
}

/* Inline video on phones. Native iPhone fullscreen uses Safari controls. */
@media (max-width: 640px) {
  .player {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  .big-play { width: 54px; height: 54px; }
  .player-controls { padding: 16px 9px 6px; }
  .player-control-row { gap: 4px; }
  .player-control-group { gap: 1px; }
  .player-control-group button { width: 40px; height: 40px; }
  .timecode { margin-left: 2px; font-size: 10px; }
  .player:fullscreen,
  .player:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .player:fullscreen .player-controls,
  .player:-webkit-full-screen .player-controls {
    padding: 26px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
}
@media (max-width: 360px) {
  .player-control-group button { width: 36px; height: 40px; }
  .timecode { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .big-play,
  .player-progress > i { transition: none; }
}

/* === slitoe | minimal model avatars (fullstory.tpl) === */
.watch-models {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
  margin: 18px 0;
  box-sizing: border-box;
  color: var(--text, #f5f5f5);
}

.watch-models__title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.watch-models__title i { font-size: 18px; }

.watch-models__values {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}

/* Also looks acceptable until models.js has run. */
.watch-models__values > a,
.watch-models__person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 48px;
  padding: 4px 14px 4px 4px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: #1b1b1b;
  color: #f1f1f1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
}

.watch-models__person:hover,
a.watch-models__person:focus-visible {
  background: #242424;
  border-color: rgba(255,255,255,.25);
  color: #fff;
  text-decoration: none;
}

a.watch-models__person:focus-visible { outline: 2px solid #d6df54; outline-offset: 3px; }

.watch-models__avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: #333;
  color: #c6c6c6;
}

.watch-models__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.watch-models__avatar i { font-size: 16px; }
.watch-models__name { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  body.watch-page .watch-models { margin: 15px 10px; gap: 10px; }
  .watch-models__title { font-size: 15px; }
  .watch-models__title i { font-size: 15px; }
  .watch-models__values { gap: 7px; }
  .watch-models__values > a,
  .watch-models__person { min-height: 44px; padding: 3px 11px 3px 3px; font-size: 13px; }
  .watch-models__avatar { flex-basis: 36px; width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .watch-models__person { transition: none; }
}
/* === end minimal model avatars === */