/* DTN Phase 4C — Content Hub Visual Identity Pass
   Goal: separate Content Hub from homepage with a broadcast/media-bay layout.
   Scope: /content-hub.html only. No backend/auth/feed logic changes. */

body.dtn-content-hub-page{
  --media-bg:#02040a;
  --media-void:#01030a;
  --media-panel:rgba(3, 12, 22, .88);
  --media-panel-2:rgba(7, 23, 38, .78);
  --media-screen:rgba(1, 9, 20, .94);
  --media-line:rgba(41, 196, 255, .28);
  --media-line-strong:rgba(55, 213, 255, .58);
  --media-blue:#06c9ff;
  --media-blue-2:#1978ff;
  --media-gold:#f6aa2f;
  --media-gold-2:#ffdb77;
  --media-gold-soft:rgba(246, 170, 47, .42);
  --media-violet:#7955ff;
  --media-text:#effaff;
  --media-muted:#9fc9de;
  --media-dim:#68879a;
  --media-danger:#ff6573;
  --media-success:#44e9a7;
  --media-shadow:0 26px 80px rgba(0,0,0,.64);
  color:var(--media-text);
  background:
    radial-gradient(circle at 50% -14%, rgba(6,201,255,.15), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(121,85,255,.12), transparent 26%),
    radial-gradient(circle at 12% 28%, rgba(246,170,47,.10), transparent 24%),
    linear-gradient(180deg, #02050b 0%, #03111d 48%, #010309 100%) !important;
}

body.dtn-content-hub-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,201,255,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(6,201,255,.035) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 46%, rgba(246,170,47,.075) 46.2% 46.6%, transparent 46.8% 100%);
  background-size:94px 94px, 94px 94px, 100% 100%;
  mask-image:linear-gradient(180deg, black 0%, rgba(0,0,0,.72) 58%, transparent 100%);
}

body.dtn-content-hub-page::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.52;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 42%, transparent 0 38%, rgba(0,0,0,.48) 100%);
  mix-blend-mode:screen;
}

.dtn-content-main{min-height:100vh; overflow:hidden;}
.dtn-content-wrap{max-width:1460px; margin:0 auto; padding:0 clamp(16px, 3vw, 38px);}
.wrap.dtn-content-wrap{width:100%;}

.dtn-broadcast-stage{
  position:relative;
  padding:clamp(28px, 5vw, 70px) 0 clamp(20px, 4vw, 44px);
  isolation:isolate;
}
.dtn-broadcast-stage::before{
  content:"";
  position:absolute;
  left:50%; top:18px;
  width:min(1100px, 92vw);
  height:420px;
  transform:translateX(-50%);
  z-index:-1;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(6,201,255,.18), transparent 58%),
    radial-gradient(ellipse at 82% 46%, rgba(246,170,47,.13), transparent 34%);
  filter:blur(2px);
}
.dtn-broadcast-stage__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.52fr) minmax(320px, .58fr);
  gap:clamp(16px, 2vw, 28px);
  align-items:stretch;
}

.dtn-stage-screen{
  position:relative;
  min-height:clamp(360px, 37vw, 520px);
  background:
    linear-gradient(180deg, rgba(0,0,0,.20), transparent 54%),
    radial-gradient(circle at 48% 38%, rgba(6,201,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(3,13,28,.96), rgba(1,8,17,.98));
  border:1px solid var(--media-line-strong);
  border-top-color:var(--media-gold-soft);
  box-shadow:var(--media-shadow), 0 0 48px rgba(6,201,255,.10), inset 0 0 0 1px rgba(255,255,255,.035);
  overflow:hidden;
  clip-path:polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.dtn-stage-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(110deg, transparent 0 29%, rgba(6,201,255,.12) 29.3% 29.8%, transparent 30% 66%, rgba(246,170,47,.10) 66.2% 66.8%, transparent 67%),
    repeating-linear-gradient(90deg, rgba(6,201,255,.08) 0 1px, transparent 1px 58px);
  opacity:.75;
}
.dtn-stage-screen::after{
  content:"";
  position:absolute;
  right:-120px; top:-92px;
  width:360px; height:360px;
  border:1px solid rgba(6,201,255,.18);
  background:radial-gradient(circle, rgba(6,201,255,.13), transparent 61%);
  transform:rotate(18deg);
  clip-path:polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
}
.dtn-stage-screen__topline{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 18px;
  font:800 11px/1 Orbitron, sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--media-muted);
  border-bottom:1px solid rgba(6,201,255,.22);
  background:linear-gradient(90deg, rgba(6,201,255,.10), rgba(0,0,0,.22), rgba(246,170,47,.08));
}
.dtn-stage-screen__topline span:last-child{margin-left:auto; color:var(--media-gold-2);}
.dtn-live-dot{
  width:9px; height:9px;
  border-radius:999px;
  background:#ff3d59;
  box-shadow:0 0 12px rgba(255,61,89,.88);
}
.dtn-stage-screen__body{
  position:relative;
  z-index:2;
  min-height:calc(100% - 44px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px, 5vw, 70px);
}
.dtn-stage-brand{
  display:flex;
  align-items:center;
  gap:clamp(16px, 3vw, 28px);
}
.dtn-stage-brand img{
  width:clamp(84px, 11vw, 148px);
  filter:drop-shadow(0 0 20px rgba(6,201,255,.34)) drop-shadow(0 0 14px rgba(246,170,47,.24));
}
.dtn-content-kicker,
.dtn-content-section-head > span,
.dtn-content-panel__head > span,
.dtn-lane-card span,
.dtn-channel-tile span,
.dtn-content-mini-panel span,
.dtn-content-ad-slot > span{
  display:inline-flex;
  width:max-content;
  color:var(--media-blue);
  font:800 11px/1 Orbitron, sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.dtn-content-kicker{
  padding:8px 10px;
  color:#02101b;
  background:linear-gradient(90deg, var(--media-blue), #7ee8ff);
  box-shadow:0 0 18px rgba(6,201,255,.22);
}
.dtn-stage-brand h1{
  margin:12px 0 0;
  font:800 clamp(42px, 7vw, 94px)/.9 Orbitron, sans-serif;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--media-text);
  text-shadow:0 0 30px rgba(6,201,255,.22);
}
.dtn-stage-copy{
  max-width:760px;
  margin:18px 0 0;
  color:var(--media-muted);
  font:700 clamp(16px, 1.8vw, 22px)/1.45 Atkinson Hyperlegible, system-ui, sans-serif;
}
.dtn-content-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.dtn-content-btn,
.dtn-content-card__actions a,
.dtn-content-card__actions button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(6,201,255,.45);
  background:linear-gradient(180deg, rgba(6,201,255,.15), rgba(6,201,255,.055));
  color:var(--media-text) !important;
  font:800 12px/1 Orbitron, sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none !important;
  cursor:pointer;
  box-shadow:0 0 20px rgba(6,201,255,.08), inset 0 0 0 1px rgba(255,255,255,.035);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.dtn-content-btn:hover,
.dtn-content-card__actions a:hover,
.dtn-content-card__actions button:hover{
  transform:translateY(-1px);
  border-color:rgba(6,201,255,.82);
  box-shadow:0 0 26px rgba(6,201,255,.16);
}
.dtn-content-btn--gold{
  color:#120b02 !important;
  border-color:rgba(255,216,112,.72);
  background:linear-gradient(180deg, var(--media-gold-2), var(--media-gold));
  box-shadow:0 0 26px rgba(246,170,47,.22);
}
.dtn-content-btn--small{min-height:36px; padding:0 12px; font-size:11px;}
button.dtn-content-btn:disabled{opacity:.55; cursor:not-allowed; transform:none;}
.dtn-stage-screen__scan{
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(6,201,255,.92), transparent);
  animation:dtnContentScan 5.8s linear infinite;
  opacity:.55;
}
@keyframes dtnContentScan{0%{transform:translateY(0)}100%{transform:translateY(540px)}}

.dtn-channel-dock{
  display:grid;
  grid-template-rows:repeat(4, 1fr);
  gap:12px;
}
.dtn-channel-tile{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:112px;
  padding:16px 18px;
  color:var(--media-text) !important;
  text-decoration:none !important;
  background:linear-gradient(135deg, rgba(6,201,255,.10), rgba(2,9,18,.92) 55%, rgba(246,170,47,.06));
  border:1px solid rgba(6,201,255,.26);
  border-left:3px solid rgba(6,201,255,.68);
  box-shadow:0 14px 34px rgba(0,0,0,.38);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.dtn-channel-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 92% 20%, rgba(6,201,255,.18), transparent 36%);
  opacity:.75;
}
.dtn-channel-tile:hover{transform:translateX(-3px); border-color:rgba(6,201,255,.62); box-shadow:0 18px 42px rgba(0,0,0,.5), 0 0 24px rgba(6,201,255,.12);}
.dtn-channel-tile strong,
.dtn-channel-tile em,
.dtn-channel-tile span{position:relative; z-index:2;}
.dtn-channel-tile strong{margin:8px 0 5px; font:800 23px/1 Orbitron, sans-serif; text-transform:uppercase;}
.dtn-channel-tile em{font-style:normal; color:var(--media-muted); font-weight:800;}
.dtn-channel-tile--youtube{border-left-color:#ff4660;}
.dtn-channel-tile--twitch{border-left-color:#8d63ff;}
.dtn-channel-tile--tiktok{border-left-color:#41e7ff;}
.dtn-channel-tile--instagram{border-left-color:#ffb14a;}

.dtn-content-ad-slot{
  position:relative;
  margin-top:clamp(16px, 3vw, 26px);
  padding:14px;
  color:var(--media-dim);
  background:rgba(1, 8, 16, .62);
  border:1px dashed rgba(159,201,222,.24);
  text-align:center;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.dtn-content-ad-slot > span{color:var(--media-dim); margin:0 auto 8px;}
.dtn-content-ad-slot div{font-weight:800; font-size:13px;}
.dtn-content-ad-slot--leaderboard{max-width:1390px; margin:0 auto clamp(20px, 3vw, 34px);}
.dtn-content-ad-slot--wide{margin-top:22px;}

.dtn-media-lanes{padding:clamp(12px, 3vw, 32px) 0 clamp(28px, 4vw, 52px);}
.dtn-content-section-head{margin:0 0 18px;}
.dtn-content-section-head--row{display:flex; align-items:end; justify-content:space-between; gap:16px;}
.dtn-content-section-head h2,
.dtn-content-panel__head h2{
  margin:8px 0 0;
  font:800 clamp(22px, 3vw, 34px)/1.05 Orbitron, sans-serif;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--media-text);
}
.dtn-content-link{
  color:var(--media-gold-2) !important;
  font:800 12px/1 Orbitron, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none !important;
}
.dtn-lane-grid{
  display:grid;
  grid-template-columns:1.15fr repeat(3, minmax(0, 1fr));
  gap:14px;
}
.dtn-lane-card{
  position:relative;
  overflow:hidden;
  min-height:174px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:var(--media-text) !important;
  text-decoration:none !important;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.48)),
    radial-gradient(circle at 78% 18%, rgba(6,201,255,.16), transparent 36%),
    linear-gradient(135deg, rgba(4,20,34,.92), rgba(1,6,13,.94));
  border:1px solid rgba(6,201,255,.28);
  border-bottom-color:rgba(246,170,47,.34);
  box-shadow:0 16px 42px rgba(0,0,0,.36);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.dtn-lane-card::before{
  content:"";
  position:absolute;
  inset:-30% -20%;
  background:
    linear-gradient(112deg, transparent 0 45%, rgba(6,201,255,.16) 45.2% 46.2%, transparent 46.5% 58%, rgba(246,170,47,.11) 58.2% 59%, transparent 59.3%),
    radial-gradient(circle at 76% 12%, rgba(121,85,255,.14), transparent 28%);
  transform:rotate(-4deg);
}
.dtn-lane-card:hover{transform:translateY(-3px); border-color:rgba(6,201,255,.66); box-shadow:0 20px 52px rgba(0,0,0,.48), 0 0 28px rgba(6,201,255,.10);}
.dtn-lane-card strong,
.dtn-lane-card em,
.dtn-lane-card span{position:relative; z-index:2;}
.dtn-lane-card strong{margin:12px 0 8px; font:800 22px/1.1 Orbitron, sans-serif; text-transform:uppercase;}
.dtn-lane-card em{font-style:normal; color:var(--media-muted); font-weight:800;}
.dtn-lane-card--large{min-height:230px;}
.dtn-lane-card--large strong{font-size:clamp(24px, 3vw, 36px);}

.dtn-content-layout{padding:0 0 clamp(56px, 7vw, 96px);}
.dtn-content-layout__grid{
  display:grid;
  grid-template-columns:minmax(280px, 360px) minmax(0, 1fr);
  gap:clamp(16px, 2.3vw, 30px);
  align-items:start;
}
.dtn-upload-dock{position:sticky; top:88px; display:grid; gap:16px;}
.dtn-content-panel,
.dtn-feed-commandbar,
.dtn-content-card,
.dtn-content-mini-panel{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(6,201,255,.075), rgba(2,10,20,.88) 48%, rgba(246,170,47,.045));
  border:1px solid var(--media-line);
  box-shadow:0 18px 48px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.025);
}
.dtn-content-panel{
  padding:18px;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.dtn-content-panel__head{margin-bottom:16px;}
.dtn-content-auth-note{
  margin:0 0 14px;
  padding:12px;
  border:1px solid rgba(6,201,255,.24);
  background:rgba(6,201,255,.06);
  color:var(--media-muted);
  font-weight:800;
}
.dtn-content-auth-note.is-ready{border-color:rgba(68,233,167,.45); color:var(--media-success); background:rgba(68,233,167,.08);}
.dtn-content-auth-note.is-blocked{border-color:rgba(246,170,47,.36); color:var(--media-gold-2); background:rgba(246,170,47,.08);}
.dtn-content-auth-note a{color:var(--media-gold-2) !important; font-weight:900;}
.dtn-content-form{display:grid; gap:14px;}
.dtn-content-form label,
.dtn-content-search{display:grid; gap:7px;}
.dtn-content-form label > span,
.dtn-content-search > span,
.dtn-content-filter-group h4,
.dtn-content-filters h3{
  margin:0;
  color:var(--media-muted);
  font:800 11px/1 Orbitron, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.dtn-content-form input,
.dtn-content-form select,
.dtn-content-form textarea,
.dtn-content-search input{
  width:100%;
  color:var(--media-text);
  background:rgba(0, 8, 17, .78);
  border:1px solid rgba(6,201,255,.28);
  border-radius:0;
  padding:12px 13px;
  font:700 14px/1.35 Atkinson Hyperlegible, system-ui, sans-serif;
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.dtn-content-form input:focus,
.dtn-content-form select:focus,
.dtn-content-form textarea:focus,
.dtn-content-search input:focus{border-color:rgba(6,201,255,.75); box-shadow:0 0 0 3px rgba(6,201,255,.13);}
.dtn-content-form textarea{resize:vertical; min-height:98px;}
.dtn-content-form__hint{margin:0; color:var(--media-dim); font-size:13px; font-weight:800; line-height:1.45;}
.dtn-content-form__status{min-height:20px; color:var(--media-muted); font-weight:800;}
.dtn-content-form__status.is-error{color:var(--media-danger);}
.dtn-content-form__status.is-success{color:var(--media-success);}

.dtn-feed-commandbar{
  display:grid;
  grid-template-columns:minmax(180px, 260px) minmax(0, 1fr) auto;
  gap:16px;
  align-items:start;
  padding:18px;
  margin-bottom:16px;
  border-top-color:rgba(246,170,47,.36);
  clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.dtn-content-filters{display:grid; gap:12px;}
.dtn-content-filter-strip{display:grid; gap:12px;}
.dtn-content-filter-group{display:grid; gap:8px;}
.dtn-content-chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.dtn-content-chip-row--scroll{max-height:84px; overflow:auto; padding-right:4px;}
.dtn-content-chip{
  appearance:none;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(6,201,255,.26);
  color:var(--media-muted);
  background:rgba(1,8,17,.64);
  font:800 10px/1 Orbitron, sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.dtn-content-chip:hover{border-color:rgba(6,201,255,.58); color:var(--media-text);}
.dtn-content-chip.is-active{border-color:rgba(255,216,112,.62); background:linear-gradient(180deg, rgba(246,170,47,.22), rgba(246,170,47,.08)); color:var(--media-gold-2);}
.dtn-content-system-note{
  margin:0 0 16px;
  padding:14px;
  border:1px solid rgba(246,170,47,.32);
  background:rgba(246,170,47,.08);
  color:var(--media-gold-2);
  font-weight:800;
}

.dtn-media-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}
.dtn-content-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.dtn-content-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(112deg, transparent 0 43%, rgba(6,201,255,.13) 43.2% 44%, transparent 44.3% 100%);
  opacity:.58;
  pointer-events:none;
}
.dtn-content-card__thumb{
  position:relative;
  aspect-ratio:16/9;
  background:radial-gradient(circle at 50% 35%, rgba(6,201,255,.18), transparent 52%), rgba(0,0,0,.42);
  overflow:hidden;
  border-bottom:1px solid rgba(6,201,255,.22);
}
.dtn-content-card__thumb img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.06) contrast(1.04);}
.dtn-content-card__thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72));
}
.dtn-content-card__thumb-fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--media-blue);
  font:800 20px/1 Orbitron, sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.dtn-content-card__badges{
  position:absolute;
  z-index:2;
  left:10px; right:10px; bottom:10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.dtn-content-card__platform,
.dtn-content-pill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  color:#06111a;
  background:linear-gradient(180deg, #8deaff, var(--media-blue));
  font:900 9px/1 Orbitron, sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dtn-content-pill{background:linear-gradient(180deg, var(--media-gold-2), var(--media-gold));}
.dtn-content-card__body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  flex:1;
}
.dtn-content-card h3{
  margin:0;
  color:var(--media-text);
  font:800 18px/1.18 Orbitron, sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.dtn-content-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  color:var(--media-muted);
  font-size:12px;
  font-weight:800;
}
.dtn-content-card__desc{
  margin:0;
  color:var(--media-muted);
  line-height:1.45;
  font-weight:700;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dtn-content-card.is-expanded .dtn-content-card__desc{display:block; overflow:visible;}
.dtn-content-card__actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto;}
.dtn-content-card__actions a,
.dtn-content-card__actions button{min-height:32px; padding:0 10px; font-size:10px; background:rgba(6,201,255,.08);}
.dtn-content-card__actions button[data-content-report]{border-color:rgba(255,101,115,.34); color:#ff9aa4 !important; background:rgba(255,101,115,.06);}
.dtn-content-embed-slot{display:none; position:relative; z-index:1; padding:0 14px 14px;}
.dtn-content-card.is-embed-open .dtn-content-embed-slot{display:block;}
.dtn-content-embed-slot iframe{width:100%; aspect-ratio:16/9; border:1px solid rgba(6,201,255,.3); background:#000;}
.dtn-content-empty{
  grid-column:1 / -1;
  min-height:190px;
  display:grid;
  place-items:center;
  padding:28px;
  color:var(--media-muted);
  font:800 15px/1.5 Atkinson Hyperlegible, system-ui, sans-serif;
  text-align:center;
  background:rgba(1,8,17,.68);
  border:1px solid rgba(6,201,255,.22);
}

.dtn-content-row-panels{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:16px;}
.dtn-content-mini-panel{
  min-height:94px;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.dtn-content-mini-panel strong{margin-top:8px; color:var(--media-muted); line-height:1.35;}

@media (max-width:1180px){
  .dtn-broadcast-stage__grid{grid-template-columns:1fr;}
  .dtn-channel-dock{grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:auto;}
  .dtn-channel-tile{min-height:124px;}
  .dtn-lane-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .dtn-lane-card--large{grid-column:1 / -1; min-height:200px;}
  .dtn-content-layout__grid{grid-template-columns:1fr;}
  .dtn-upload-dock{position:static; grid-template-columns:minmax(0, 1fr) minmax(240px, .5fr);}
  .dtn-media-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

@media (max-width:840px){
  .dtn-stage-brand{align-items:flex-start; flex-direction:column;}
  .dtn-stage-screen{min-height:auto;}
  .dtn-stage-screen__body{padding:28px 18px 34px;}
  .dtn-stage-screen__topline{font-size:9px; letter-spacing:.11em;}
  .dtn-stage-screen__topline span:last-child{display:none;}
  .dtn-channel-dock{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .dtn-channel-tile strong{font-size:18px;}
  .dtn-content-section-head--row{align-items:flex-start; flex-direction:column;}
  .dtn-lane-grid{grid-template-columns:1fr;}
  .dtn-upload-dock{grid-template-columns:1fr;}
  .dtn-feed-commandbar{grid-template-columns:1fr;}
  .dtn-media-grid{grid-template-columns:1fr;}
  .dtn-content-row-panels{grid-template-columns:1fr;}
}

@media (max-width:520px){
  .dtn-content-wrap{padding:0 12px;}
  .dtn-broadcast-stage{padding-top:18px;}
  .dtn-stage-brand h1{font-size:38px;}
  .dtn-content-actions{flex-direction:column;}
  .dtn-content-btn{width:100%;}
  .dtn-channel-dock{grid-template-columns:1fr;}
  .dtn-lane-card{min-height:150px;}
}

@media (prefers-reduced-motion: reduce){
  .dtn-stage-screen__scan{animation:none;}
  .dtn-content-btn,
  .dtn-channel-tile,
  .dtn-lane-card{transition:none;}
}

/* Phase 3C — Official DTN Archive / Vault layer */
.dtn-official-vault{
  position:relative;
  padding:clamp(14px, 3vw, 30px) 0 clamp(34px, 5vw, 70px);
  isolation:isolate;
}
.dtn-official-vault::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 20%, rgba(246,170,47,.14), transparent 28%),
    radial-gradient(circle at 82% 42%, rgba(6,201,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 62%);
  pointer-events:none;
}
.dtn-vault-shell{
  position:relative;
  overflow:hidden;
  padding:clamp(18px, 2.6vw, 30px);
  background:
    linear-gradient(135deg, rgba(246,170,47,.09), rgba(2,10,20,.94) 32%, rgba(6,201,255,.08)),
    radial-gradient(circle at 72% 0%, rgba(255,220,120,.11), transparent 31%);
  border:1px solid rgba(255,216,112,.34);
  border-top-color:rgba(255,216,112,.62);
  box-shadow:0 28px 80px rgba(0,0,0,.50), 0 0 34px rgba(246,170,47,.10), inset 0 0 0 1px rgba(255,255,255,.035);
  clip-path:polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.dtn-vault-shell::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.62;
  pointer-events:none;
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(246,170,47,.16) 18.2% 18.5%, transparent 18.8% 44%, rgba(6,201,255,.13) 44.2% 44.6%, transparent 44.8%),
    repeating-linear-gradient(90deg, rgba(255,216,112,.05) 0 1px, transparent 1px 74px);
}
.dtn-vault-head,
.dtn-vault-feature,
.dtn-vault-filterbar,
.dtn-vault-grid,
.dtn-vault-admin-note{position:relative; z-index:1;}
.dtn-vault-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.dtn-vault-head span,
.dtn-vault-tab,
.dtn-official-feature-card__stamp,
.dtn-content-card__official{
  font-family:Orbitron, sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.dtn-vault-head span{
  display:inline-flex;
  color:#120b02;
  background:linear-gradient(180deg, var(--media-gold-2), var(--media-gold));
  padding:8px 10px;
  font-size:11px;
  font-weight:900;
  box-shadow:0 0 24px rgba(246,170,47,.18);
}
.dtn-vault-head h2{
  margin:12px 0 0;
  color:var(--media-text);
  font:800 clamp(28px, 4vw, 48px)/1 Orbitron, sans-serif;
  text-transform:uppercase;
  letter-spacing:.025em;
}
.dtn-vault-head p{
  max-width:820px;
  margin:10px 0 0;
  color:var(--media-muted);
  font-weight:800;
  line-height:1.45;
}
.dtn-vault-feature{margin-bottom:16px;}
.dtn-official-feature-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(300px, .78fr) minmax(0, 1fr);
  min-height:320px;
  background:
    linear-gradient(135deg, rgba(0,0,0,.12), rgba(3,12,24,.94)),
    radial-gradient(circle at 20% 30%, rgba(246,170,47,.18), transparent 34%);
  border:1px solid rgba(255,216,112,.42);
  box-shadow:0 18px 56px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.035);
  clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.dtn-official-feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, transparent 0 54%, rgba(6,201,255,.16) 54.2% 54.7%, transparent 55% 100%),
    radial-gradient(circle at 88% 18%, rgba(6,201,255,.14), transparent 24%);
  pointer-events:none;
}
.dtn-official-feature-card__thumb{
  position:relative;
  min-height:300px;
  background:radial-gradient(circle at 50% 38%, rgba(246,170,47,.18), transparent 52%), rgba(0,0,0,.55);
  border-right:1px solid rgba(255,216,112,.26);
  overflow:hidden;
}
.dtn-official-feature-card__thumb img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.12) contrast(1.06);}
.dtn-official-feature-card__thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.74)), linear-gradient(90deg, transparent, rgba(0,0,0,.28));
}
.dtn-official-feature-card__stamp{
  position:absolute;
  left:14px;
  top:14px;
  z-index:2;
  padding:8px 10px;
  color:#120b02;
  background:linear-gradient(180deg, var(--media-gold-2), var(--media-gold));
  font-size:10px;
  font-weight:900;
  box-shadow:0 0 24px rgba(246,170,47,.2);
}
.dtn-official-feature-card__body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:clamp(20px, 4vw, 42px);
}
.dtn-official-feature-card__body h3{
  margin:0;
  color:var(--media-text);
  font:800 clamp(24px, 3.6vw, 44px)/1.05 Orbitron, sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.dtn-official-feature-card__body p{
  max-width:760px;
  margin:0;
  color:var(--media-muted);
  font-weight:800;
  line-height:1.5;
}
.dtn-official-feature-card .dtn-content-embed-slot{grid-column:1 / -1; padding:0 18px 18px;}
.dtn-official-feature-card.is-embed-open .dtn-content-embed-slot{display:block;}
.dtn-vault-filterbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:14px;
  margin:0 0 16px;
  background:rgba(0,8,17,.56);
  border:1px solid rgba(255,216,112,.18);
}
.dtn-vault-tab{
  appearance:none;
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(255,216,112,.28);
  background:rgba(246,170,47,.055);
  color:var(--media-muted);
  font-size:10px;
  font-weight:900;
  cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.dtn-vault-tab:hover{transform:translateY(-1px); border-color:rgba(255,216,112,.56); color:var(--media-text);}
.dtn-vault-tab.is-active{color:#140c03; border-color:rgba(255,216,112,.76); background:linear-gradient(180deg, var(--media-gold-2), var(--media-gold));}
.dtn-vault-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.dtn-content-card--official{
  border-color:rgba(255,216,112,.38);
  border-top-color:rgba(255,216,112,.60);
  background:linear-gradient(135deg, rgba(246,170,47,.08), rgba(2,10,20,.92) 48%, rgba(6,201,255,.06));
}
.dtn-content-card--official::before{
  background:linear-gradient(112deg, transparent 0 38%, rgba(246,170,47,.16) 38.2% 39%, transparent 39.3% 66%, rgba(6,201,255,.12) 66.2% 66.7%, transparent 67% 100%);
}
.dtn-content-card__official{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  color:#120b02;
  background:linear-gradient(180deg, var(--media-gold-2), var(--media-gold));
  font-size:9px;
  font-weight:900;
}
.dtn-vault-admin-note{
  margin-top:16px;
  padding:12px 14px;
  color:var(--media-muted);
  background:rgba(1,8,17,.60);
  border:1px solid rgba(6,201,255,.18);
  font-weight:800;
  line-height:1.45;
}
.dtn-vault-admin-note strong{color:var(--media-gold-2);}
.dtn-vault-admin-note code{
  color:#7ee8ff;
  background:rgba(6,201,255,.08);
  border:1px solid rgba(6,201,255,.18);
  padding:2px 5px;
}

@media (max-width:1280px){
  .dtn-vault-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

@media (max-width:980px){
  .dtn-official-feature-card{grid-template-columns:1fr;}
  .dtn-official-feature-card__thumb{border-right:0; border-bottom:1px solid rgba(255,216,112,.26);}
  .dtn-vault-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

@media (max-width:640px){
  .dtn-vault-head{flex-direction:column;}
  .dtn-vault-shell{clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);}
  .dtn-vault-grid{grid-template-columns:1fr;}
  .dtn-official-feature-card__thumb{min-height:210px;}
  .dtn-vault-filterbar{max-height:148px; overflow:auto;}
}

/* ===== Phase 4A — condensed 12x12 media archive, uploader line, dropdown filters ===== */
.dtn-section-subcopy{
  margin:6px 0 0;
  max-width:520px;
  color:var(--media-dim);
  font-size:12px;
  font-weight:800;
  line-height:1.35;
}

.dtn-vault-filterbar--compact,
.dtn-content-filter-strip--compact{
  align-items:end;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(2, minmax(160px, 1fr));
  max-height:none;
  overflow:visible;
}
.dtn-vault-filterbar--compact{
  grid-template-columns:minmax(220px, 360px) minmax(180px, 1fr);
}
.dtn-filter-select,
.dtn-content-search{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dtn-filter-select span,
.dtn-content-search span{
  color:var(--media-gold-2);
  font:900 10px/1 Orbitron, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.dtn-filter-select select,
.dtn-content-search input{
  width:100%;
  min-height:38px;
  padding:0 12px;
  color:var(--media-text);
  border:1px solid rgba(6,201,255,.28);
  border-radius:0;
  background:linear-gradient(180deg, rgba(4,16,29,.92), rgba(0,6,13,.94));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025), 0 0 20px rgba(6,201,255,.045);
  font-weight:900;
  outline:none;
}
.dtn-filter-select select:focus,
.dtn-content-search input:focus{
  border-color:rgba(255,216,112,.62);
  box-shadow:0 0 0 3px rgba(246,170,47,.12), inset 0 0 0 1px rgba(255,255,255,.04);
}
.dtn-scroll-hint{
  align-self:center;
  justify-self:end;
  color:var(--media-muted);
  font:900 10px/1.2 Orbitron, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.dtn-scroll-grid{
  max-height:960px;
  overflow:auto;
  padding:10px;
  border:1px solid rgba(6,201,255,.18);
  background:linear-gradient(180deg, rgba(1,8,17,.42), rgba(1,5,11,.70));
  scrollbar-color:rgba(6,201,255,.54) rgba(1,8,17,.75);
  scrollbar-width:thin;
}
.dtn-scroll-grid::-webkit-scrollbar{width:10px; height:10px;}
.dtn-scroll-grid::-webkit-scrollbar-track{background:rgba(1,8,17,.78);}
.dtn-scroll-grid::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(6,201,255,.72), rgba(246,170,47,.72));}

.dtn-vault-grid,
.dtn-media-grid{
  grid-template-columns:repeat(auto-fill, minmax(205px, 1fr));
  gap:12px;
}
.dtn-content-card{
  min-height:0;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
}
.dtn-content-card__body{
  gap:7px;
  padding:10px;
}
.dtn-content-card h3{
  font-size:13px;
  line-height:1.18;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dtn-content-card__meta{
  gap:5px 8px;
  font-size:10px;
}
.dtn-content-card__desc{
  font-size:12px;
  line-height:1.32;
  -webkit-line-clamp:2;
}
.dtn-content-card__badges{
  left:7px;
  right:7px;
  bottom:7px;
  gap:4px;
}
.dtn-content-card__platform,
.dtn-content-pill,
.dtn-content-card__official{
  min-height:20px;
  padding:0 6px;
  font-size:8px;
}
.dtn-content-card__linkline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 8px;
  border:1px solid rgba(6,201,255,.16);
  background:rgba(0,7,15,.52);
}
.dtn-content-card__uploader{
  min-width:0;
  color:var(--media-gold-2);
  font-size:10px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dtn-content-card__linkline a{
  flex:0 0 auto;
  color:#06111a;
  background:linear-gradient(180deg, #8deaff, var(--media-blue));
  border:1px solid rgba(6,201,255,.62);
  padding:5px 7px;
  text-decoration:none;
  font:900 9px/1 Orbitron, sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.dtn-content-card__actions{
  gap:6px;
}
.dtn-content-card__actions a,
.dtn-content-card__actions button{
  min-height:28px;
  padding:0 8px;
  font-size:9px;
}
.dtn-content-embed-slot{padding:0 10px 10px;}

.dtn-feed-commandbar{
  grid-template-columns:minmax(220px, .8fr) minmax(360px, 1.2fr) auto;
  gap:12px;
}
.dtn-content-filters{
  padding:10px;
}
.dtn-content-filters h3{margin-bottom:8px;}

@media (min-width:1500px){
  .dtn-vault-grid,
  .dtn-media-grid{grid-template-columns:repeat(6, minmax(0, 1fr));}
}
@media (max-width:1180px){
  .dtn-feed-commandbar{grid-template-columns:1fr;}
  .dtn-scroll-hint{justify-self:start;}
}
@media (max-width:720px){
  .dtn-vault-filterbar--compact,
  .dtn-content-filter-strip--compact{grid-template-columns:1fr;}
  .dtn-scroll-grid{max-height:780px; padding:8px;}
  .dtn-vault-grid,
  .dtn-media-grid{grid-template-columns:1fr;}
  .dtn-content-card__linkline{align-items:flex-start; flex-direction:column;}
}

/* ===== Phase 4B — readable content feeds, official search, latest upload dock ===== */
.dtn-recent-dock{
  padding:clamp(16px, 3vw, 34px) 0 clamp(18px, 3vw, 38px);
}
.dtn-recent-dock__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.dtn-recent-dock__head span,
.dtn-recent-card__label{
  display:inline-flex;
  color:#07101a;
  background:linear-gradient(180deg, var(--media-gold-2), var(--media-gold));
  padding:7px 9px;
  font:900 10px/1 Orbitron, sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.dtn-recent-dock__head h2{
  margin:10px 0 0;
  color:var(--media-text);
  font:800 clamp(24px, 3.4vw, 40px)/1 Orbitron, sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.dtn-recent-dock__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.dtn-recent-slot{min-width:0;}
.dtn-recent-card{
  display:grid;
  grid-template-columns:minmax(180px, 260px) minmax(0, 1fr);
  min-height:196px;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(6,201,255,.09), rgba(1,7,16,.92) 52%, rgba(121,85,255,.08)),
    radial-gradient(circle at 12% 22%, rgba(6,201,255,.14), transparent 34%);
  border:1px solid rgba(6,201,255,.34);
  border-top-color:rgba(255,216,112,.38);
  box-shadow:0 18px 46px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.025);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.dtn-recent-card--official{
  border-color:rgba(255,216,112,.44);
  background:
    linear-gradient(135deg, rgba(246,170,47,.12), rgba(1,7,16,.92) 52%, rgba(6,201,255,.07)),
    radial-gradient(circle at 12% 22%, rgba(246,170,47,.18), transparent 34%);
}
.dtn-recent-card__thumb{
  position:relative;
  display:block;
  min-height:190px;
  background:rgba(0,0,0,.42);
  border-right:1px solid rgba(6,201,255,.2);
  overflow:hidden;
}
.dtn-recent-card__thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.dtn-recent-card__thumb .dtn-content-card__thumb-fallback{font-size:16px;}
.dtn-recent-card__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:16px;
}
.dtn-recent-card__body h3{
  margin:0;
  color:var(--media-text);
  font:800 clamp(18px, 1.9vw, 26px)/1.08 Orbitron, sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dtn-recent-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  color:var(--media-muted);
  font-size:12px;
  font-weight:900;
}
.dtn-recent-card__body p{
  margin:0;
  color:var(--media-muted);
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dtn-recent-card__foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:10px;
  border-top:1px solid rgba(6,201,255,.16);
}
.dtn-recent-card__foot span{
  min-width:0;
  color:var(--media-gold-2);
  font-size:11px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dtn-recent-card__foot a{
  flex:0 0 auto;
  color:#07101a !important;
  background:linear-gradient(180deg, #8deaff, var(--media-blue));
  border:1px solid rgba(6,201,255,.72);
  padding:7px 9px;
  text-decoration:none !important;
  font:900 10px/1 Orbitron, sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.dtn-vault-filterbar--compact{
  grid-template-columns:minmax(260px, 1.4fr) repeat(3, minmax(170px, .75fr));
  align-items:end;
}
.dtn-vault-filterbar--compact .dtn-scroll-hint{
  grid-column:1 / -1;
  justify-self:start;
  opacity:.9;
}
.dtn-content-search--official input{min-height:42px;}

/* Make the archive/card grids scrollable without crushing cards into unreadable columns. */
.dtn-scroll-grid{
  max-height:1040px;
  overflow:auto;
  padding:12px;
}
.dtn-vault-grid,
.dtn-media-grid{
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
}
@media (min-width:1500px){
  .dtn-vault-grid,
  .dtn-media-grid{grid-template-columns:repeat(5, minmax(0, 1fr));}
}
@media (min-width:1840px){
  .dtn-vault-grid,
  .dtn-media-grid{grid-template-columns:repeat(6, minmax(0, 1fr));}
}

.dtn-content-card{min-width:0;}
.dtn-content-card__thumb{aspect-ratio:16/8.8;}
.dtn-content-card__badges{
  align-items:flex-end;
  max-height:48px;
  overflow:hidden;
}
.dtn-content-card h3{
  font-size:15px;
  line-height:1.14;
  min-height:34px;
  overflow-wrap:anywhere;
}
.dtn-content-card__meta{
  min-height:15px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
}
.dtn-content-card__desc{
  min-height:32px;
  overflow-wrap:anywhere;
}
.dtn-content-card__linkline{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
}
.dtn-content-card__uploader{max-width:100%;}
.dtn-content-card__actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
}
.dtn-content-card__actions a,
.dtn-content-card__actions button{
  width:100%;
  min-width:0;
  padding:0 6px;
  white-space:nowrap;
}
.dtn-content-card__actions button[data-content-report]{grid-column:1 / -1;}
.dtn-content-card--official .dtn-content-card__actions{grid-template-columns:repeat(3, minmax(0, 1fr));}

/* Reduce section clutter now that Recent + Vault carry the page. */
.dtn-media-lanes{padding-top:8px; padding-bottom:28px;}
.dtn-lane-card{min-height:138px; padding:16px;}
.dtn-lane-card--large{min-height:168px;}
.dtn-lane-card strong{font-size:18px;}
.dtn-lane-card--large strong{font-size:clamp(22px, 2.3vw, 30px);}
.dtn-feed-commandbar{
  grid-template-columns:minmax(220px, .72fr) minmax(420px, 1.18fr) auto;
  align-items:center;
}
.dtn-content-layout__grid{
  grid-template-columns:minmax(260px, 330px) minmax(0, 1fr);
}
.dtn-upload-dock{top:82px;}

@media (max-width:1280px){
  .dtn-vault-filterbar--compact{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .dtn-recent-card{grid-template-columns:minmax(170px, 230px) minmax(0, 1fr);}
  .dtn-feed-commandbar{grid-template-columns:1fr;}
}
@media (max-width:980px){
  .dtn-recent-dock__grid{grid-template-columns:1fr;}
  .dtn-content-layout__grid{grid-template-columns:1fr;}
  .dtn-upload-dock{position:static; grid-template-columns:1fr;}
}
@media (max-width:720px){
  .dtn-recent-dock__head{align-items:flex-start; flex-direction:column;}
  .dtn-recent-card{grid-template-columns:1fr;}
  .dtn-recent-card__thumb{min-height:190px; border-right:0; border-bottom:1px solid rgba(6,201,255,.2);}
  .dtn-vault-filterbar--compact{grid-template-columns:1fr;}
  .dtn-vault-filterbar--compact .dtn-scroll-hint{grid-column:auto;}
  .dtn-scroll-grid{max-height:820px; padding:8px;}
  .dtn-vault-grid,
  .dtn-media-grid{grid-template-columns:1fr;}
  .dtn-content-card__actions{grid-template-columns:1fr;}
}


/* ===== Phase 4C — centered layout, horizontal 3x4 media grid, cleaner buttons ===== */
body.dtn-content-hub-page .wrap.dtn-content-wrap,
body.dtn-content-hub-page .dtn-content-wrap{
  width:min(1440px, calc(100vw - 48px));
  max-width:1440px;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
  box-sizing:border-box;
}

body.dtn-content-hub-page .wrap{
  margin-left:auto;
  margin-right:auto;
}

.dtn-content-main{
  overflow-x:hidden;
}

.dtn-vault-shell,
.dtn-content-layout__grid,
.dtn-recent-dock__grid,
.dtn-media-lanes .dtn-lane-grid,
.dtn-broadcast-stage__grid{
  width:100%;
}

/* 3 across / 4 down visible, then scroll. Cards are landscape instead of tall towers. */
.dtn-scroll-grid{
  max-height:920px;
  padding:14px;
  overflow:auto;
  overscroll-behavior:contain;
}

.dtn-vault-grid,
.dtn-media-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  align-items:stretch;
  gap:16px;
}

.dtn-content-card{
  display:grid;
  grid-template-columns:minmax(150px, 42%) minmax(0, 1fr);
  min-height:205px;
  max-height:240px;
  overflow:hidden;
  border-color:rgba(6,201,255,.25);
  background:
    linear-gradient(105deg, rgba(6,201,255,.07), rgba(1,8,17,.96) 42%, rgba(246,170,47,.045)),
    linear-gradient(180deg, rgba(0,0,0,.28), transparent);
}

.dtn-content-card--official{
  border-color:rgba(255,216,112,.36);
}

.dtn-content-card__thumb{
  height:100%;
  min-height:205px;
  aspect-ratio:auto;
  border-right:1px solid rgba(6,201,255,.22);
  border-bottom:0;
}

.dtn-content-card__thumb img{
  height:100%;
  object-fit:cover;
}

.dtn-content-card__badges{
  left:8px;
  right:8px;
  bottom:8px;
  max-height:none;
  align-items:flex-end;
  gap:5px;
}

/* Only platform/official badges on cards. The type is still searchable/filterable, just not stamped over every thumbnail. */
.dtn-content-pill{
  display:none !important;
}

.dtn-content-card__platform,
.dtn-content-card__official{
  min-height:22px;
  padding:0 8px;
  font-size:8.5px;
  white-space:nowrap;
}

.dtn-content-card__body{
  min-width:0;
  padding:12px;
  gap:8px;
  overflow:hidden;
}

.dtn-content-card h3{
  font-size:clamp(14px, .92vw, 17px);
  line-height:1.14;
  min-height:auto;
  -webkit-line-clamp:2;
  word-break:normal;
  overflow-wrap:anywhere;
}

.dtn-content-card__meta{
  min-height:14px;
  font-size:10px;
  line-height:1.2;
}

.dtn-content-card__desc{
  min-height:0;
  font-size:12px;
  line-height:1.3;
  -webkit-line-clamp:2;
}

.dtn-content-card.is-expanded{
  max-height:none;
}

.dtn-content-card__linkline{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:8px;
  padding:6px 7px;
}

.dtn-content-card__uploader{
  font-size:9.5px;
}

.dtn-content-card__linkline a{
  min-height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 9px;
  font-size:9px;
  color:#04101a !important;
  text-shadow:none;
}

.dtn-content-card__actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:7px;
}

.dtn-content-card--official .dtn-content-card__actions{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.dtn-content-card__actions a,
.dtn-content-card__actions button{
  min-height:34px;
  padding:0 8px;
  font-size:9.5px;
  letter-spacing:.045em;
  color:#effaff !important;
  background:linear-gradient(180deg, rgba(6,201,255,.22), rgba(6,201,255,.085));
  border-color:rgba(6,201,255,.62);
  text-shadow:0 1px 0 rgba(0,0,0,.75);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dtn-content-card__actions a:first-child{
  color:#06111a !important;
  background:linear-gradient(180deg, #91edff, var(--media-blue));
  text-shadow:none;
}

.dtn-content-card__actions button[data-content-report]{
  grid-column:1 / -1;
  color:#ffd6dc !important;
  border-color:rgba(255,101,115,.44);
  background:linear-gradient(180deg, rgba(255,101,115,.16), rgba(255,101,115,.06));
}

.dtn-content-card__actions button[data-content-embed-toggle]{
  grid-column:auto;
}

.dtn-content-embed-slot{
  grid-column:1 / -1;
}

/* Recent upload dock should also stay centered and clean. */
.dtn-recent-card__foot a,
.dtn-content-btn,
.dtn-content-actions a,
.dtn-content-actions button{
  text-shadow:none;
}

/* Keep filters compact without making the whole feed drift off-center. */
.dtn-vault-filterbar--compact{
  grid-template-columns:minmax(280px, 1.2fr) repeat(3, minmax(150px, .72fr));
}

.dtn-feed-commandbar{
  grid-template-columns:minmax(220px, .68fr) minmax(360px, 1.15fr) auto;
}

@media (max-width:1280px){
  body.dtn-content-hub-page .wrap.dtn-content-wrap,
  body.dtn-content-hub-page .dtn-content-wrap{
    width:min(1180px, calc(100vw - 36px));
  }
  .dtn-vault-grid,
  .dtn-media-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .dtn-content-card{
    grid-template-columns:minmax(150px, 40%) minmax(0, 1fr);
  }
}

@media (max-width:860px){
  body.dtn-content-hub-page .wrap.dtn-content-wrap,
  body.dtn-content-hub-page .dtn-content-wrap{
    width:min(100%, calc(100vw - 28px));
  }
  .dtn-vault-grid,
  .dtn-media-grid{
    grid-template-columns:1fr !important;
  }
  .dtn-content-card{
    grid-template-columns:1fr;
    max-height:none;
  }
  .dtn-content-card__thumb{
    min-height:190px;
    aspect-ratio:16/9;
    border-right:0;
    border-bottom:1px solid rgba(6,201,255,.22);
  }
  .dtn-vault-filterbar--compact,
  .dtn-feed-commandbar{
    grid-template-columns:1fr;
  }
}

@media (max-width:560px){
  .dtn-content-card__actions,
  .dtn-content-card--official .dtn-content-card__actions{
    grid-template-columns:1fr;
  }
}


/* ===== Phase 4D — full-thumbnail 3x4 media grid + centered page correction ===== */
body.dtn-content-hub-page{
  overflow-x:hidden;
}
body.dtn-content-hub-page .wrap.dtn-content-wrap,
body.dtn-content-hub-page .dtn-content-wrap{
  width:min(1400px, calc(100vw - 56px)) !important;
  max-width:1400px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}
body.dtn-content-hub-page .dtn-broadcast-stage,
body.dtn-content-hub-page .dtn-recent-dock,
body.dtn-content-hub-page .dtn-official-vault,
body.dtn-content-hub-page .dtn-media-lanes,
body.dtn-content-hub-page .dtn-content-layout{
  width:100%;
}

/* Exactly 3 columns on desktop; about 4 rows visible before scrolling. */
.dtn-vault-grid,
.dtn-media-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:18px !important;
}
.dtn-scroll-grid{
  max-height:1024px !important;
  padding:16px !important;
  overflow:auto !important;
}

/* Landscape cards: full thumbnail visible, no crop. */
.dtn-content-card{
  grid-template-columns:minmax(205px, 46%) minmax(0, 1fr) !important;
  min-height:238px !important;
  max-height:252px !important;
  border-color:rgba(6,201,255,.26) !important;
}
.dtn-content-card__thumb{
  min-height:238px !important;
  background:#000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.dtn-content-card__thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:#000 !important;
  filter:saturate(1.05) contrast(1.03) !important;
}
.dtn-content-card__thumb-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Official cards do not need repetitive uploader/powered-by wording. */
.dtn-content-card--official .dtn-content-card__meta span:first-child:not(:only-child){
  display:none !important;
}
.dtn-content-card__linkline--official{
  display:flex !important;
  justify-content:flex-end !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
.dtn-content-card__linkline--official a{
  min-width:96px;
  min-height:30px;
}
.dtn-recent-card__foot--official{
  justify-content:flex-end !important;
}

/* Button readability pass. */
.dtn-content-card__actions{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:8px !important;
}
.dtn-content-card__actions a,
.dtn-content-card__actions button{
  min-height:36px !important;
  padding:0 10px !important;
  font-size:10px !important;
  letter-spacing:.04em !important;
  color:#f6fbff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.88), 0 0 8px rgba(6,201,255,.20) !important;
  background:linear-gradient(180deg, rgba(19,92,145,.92), rgba(9,34,72,.98)) !important;
  border:1px solid rgba(92,218,255,.62) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.035) inset, 0 8px 18px rgba(0,0,0,.28) !important;
}
.dtn-content-card__actions a:first-child{
  color:#03101b !important;
  text-shadow:none !important;
  background:linear-gradient(180deg, #9df0ff, #17c8ff) !important;
  border-color:rgba(142,239,255,.88) !important;
}
.dtn-content-card__actions button[data-content-report]{
  grid-column:auto !important;
}
.dtn-content-card h3{
  font-size:clamp(16px, 1vw, 20px) !important;
  line-height:1.08 !important;
  -webkit-line-clamp:2 !important;
}
.dtn-content-card__desc{
  -webkit-line-clamp:2 !important;
}

/* Keep official type hidden visually but filterable via data attributes. */
.dtn-content-pill,
.dtn-content-card__type,
.dtn-content-card [data-content-type-pill]{
  display:none !important;
}

@media (max-width:1320px){
  body.dtn-content-hub-page .wrap.dtn-content-wrap,
  body.dtn-content-hub-page .dtn-content-wrap{
    width:min(1160px, calc(100vw - 40px)) !important;
  }
  .dtn-vault-grid,
  .dtn-media-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
}
@media (max-width:820px){
  body.dtn-content-hub-page .wrap.dtn-content-wrap,
  body.dtn-content-hub-page .dtn-content-wrap{
    width:min(100%, calc(100vw - 28px)) !important;
  }
  .dtn-vault-grid,
  .dtn-media-grid{grid-template-columns:1fr !important;}
  .dtn-content-card{
    grid-template-columns:1fr !important;
    max-height:none !important;
  }
  .dtn-content-card__thumb{
    min-height:220px !important;
    aspect-ratio:16/9 !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(6,201,255,.22) !important;
  }
  .dtn-content-card__actions{grid-template-columns:1fr !important;}
}


/* ===== Phase 5H — Creator Hub compact hero + share jump ===== */
html{scroll-behavior:smooth;}
body.dtn-content-hub-page .dtn-broadcast-stage{
  padding:18px 0 14px !important;
}
body.dtn-content-hub-page .dtn-broadcast-stage__grid{
  grid-template-columns:minmax(0,1.65fr) minmax(260px,.52fr) !important;
  gap:14px !important;
  align-items:stretch !important;
}
body.dtn-content-hub-page .dtn-stage-screen{
  min-height:260px !important;
}
body.dtn-content-hub-page .dtn-stage-screen__topline{
  min-height:36px !important;
  padding:0 14px !important;
  font-size:10px !important;
}
body.dtn-content-hub-page .dtn-stage-screen__body{
  min-height:calc(100% - 36px) !important;
  padding:24px 28px !important;
}
body.dtn-content-hub-page .dtn-stage-brand{
  gap:16px !important;
}
body.dtn-content-hub-page .dtn-stage-brand img{
  width:clamp(58px,7vw,96px) !important;
}
body.dtn-content-hub-page .dtn-stage-brand h1{
  margin-top:8px !important;
  font-size:clamp(34px,5vw,66px) !important;
  line-height:.9 !important;
}
body.dtn-content-hub-page .dtn-stage-copy{
  max-width:660px !important;
  margin-top:12px !important;
  font-size:clamp(13px,1.2vw,16px) !important;
  line-height:1.34 !important;
}
body.dtn-content-hub-page .dtn-content-actions{
  margin-top:16px !important;
  gap:8px !important;
}
body.dtn-content-hub-page .dtn-content-actions .dtn-content-btn{
  min-height:34px !important;
  padding:0 12px !important;
  font-size:10px !important;
}
body.dtn-content-hub-page .dtn-channel-dock{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}
body.dtn-content-hub-page .dtn-channel-tile{
  min-height:0 !important;
  padding:12px 12px !important;
}
body.dtn-content-hub-page .dtn-channel-tile strong{
  font-size:clamp(15px,1.25vw,19px) !important;
}
body.dtn-content-hub-page .dtn-channel-tile em{
  font-size:11px !important;
  line-height:1.25 !important;
}
body.dtn-content-hub-page #submit-content{
  scroll-margin-top:92px;
}
body.dtn-content-hub-page .dtn-vault-head .dtn-content-link,
body.dtn-content-hub-page .dtn-content-section-head--row .dtn-content-link{
  color:#06111b !important;
  background:linear-gradient(180deg,#ffe18a,#f2a529) !important;
  border-color:rgba(255,220,120,.82) !important;
  padding:10px 12px !important;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
body.dtn-content-hub-page .dtn-media-lanes{
  padding:18px 0 !important;
}
body.dtn-content-hub-page .dtn-lane-grid{
  gap:10px !important;
}
body.dtn-content-hub-page .dtn-lane-card{
  min-height:96px !important;
  padding:14px !important;
}
body.dtn-content-hub-page .dtn-lane-card strong{
  font-size:clamp(17px,1.25vw,23px) !important;
  line-height:1.05 !important;
}
@media (max-width:1040px){
  body.dtn-content-hub-page .dtn-broadcast-stage__grid{grid-template-columns:1fr !important;}
  body.dtn-content-hub-page .dtn-channel-dock{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}
@media (max-width:720px){
  body.dtn-content-hub-page .dtn-channel-dock{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  body.dtn-content-hub-page .dtn-stage-brand{align-items:flex-start !important;}
  body.dtn-content-hub-page .dtn-stage-screen{min-height:0 !important;}
}