/*
 * DTT Premium Subpages
 * Shared visual system for: Categories, Editorial, Completed, Rankings, Library, History.
 * Intentionally scoped to body.dtt-premium-subpage so homepage / reader pages stay isolated.
 */

body.dtt-premium-subpage {
    --dtt-sub-ink: #17151d;
    --dtt-sub-ink-2: #2d2933;
    --dtt-sub-muted: #7a7380;
    --dtt-sub-line: rgba(80, 67, 58, .12);
    --dtt-sub-paper: rgba(255,255,255,.88);
    --dtt-sub-page: #f8f6f3;
    --dtt-sub-orange: #f56a1f;
    --dtt-sub-orange-dark: #c84b0b;
    --dtt-sub-purple: #6657f2;
    --dtt-sub-green: #169b70;
    --dtt-sub-gold: #e8a321;
    --dtt-sub-accent: var(--dtt-sub-orange);
    --dtt-sub-accent-2: var(--dtt-sub-purple);
    --dtt-sub-accent-soft: rgba(245,106,31,.10);
    --dtt-sub-shadow: 0 24px 70px rgba(39,31,24,.08);
    --dtt-sub-shadow-soft: 0 12px 34px rgba(39,31,24,.06);
    background:
        radial-gradient(circle at 6% 2%, color-mix(in srgb, var(--dtt-sub-accent) 9%, transparent), transparent 25rem),
        radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--dtt-sub-accent-2) 7%, transparent), transparent 30rem),
        linear-gradient(180deg, #fbfaf8 0%, var(--dtt-sub-page) 48%, #f9f7f4 100%) !important;
    color: var(--dtt-sub-ink-2);
}

body.dtt-subpage-articles { --dtt-sub-accent:#7c5df6; --dtt-sub-accent-2:#f56a1f; --dtt-sub-accent-soft:rgba(124,93,246,.10); }
body.dtt-subpage-completed { --dtt-sub-accent:#169b70; --dtt-sub-accent-2:#f56a1f; --dtt-sub-accent-soft:rgba(22,155,112,.10); }
body.dtt-subpage-ranking { --dtt-sub-accent:#e8a321; --dtt-sub-accent-2:#f56a1f; --dtt-sub-accent-soft:rgba(232,163,33,.10); }
body.dtt-subpage-library { --dtt-sub-accent:#6657f2; --dtt-sub-accent-2:#169b70; --dtt-sub-accent-soft:rgba(102,87,242,.10); }
body.dtt-subpage-history { --dtt-sub-accent:#6657f2; --dtt-sub-accent-2:#3b82f6; --dtt-sub-accent-soft:rgba(102,87,242,.10); }
body.dtt-subpage-genre { --dtt-sub-accent:#f56a1f; --dtt-sub-accent-2:#6657f2; }

/* Header / navigation ----------------------------------------------------- */
body.dtt-premium-subpage .mkm-header {
    background: rgba(250,248,245,.82) !important;
    border-bottom: 1px solid rgba(82,69,58,.09);
    box-shadow: 0 8px 30px rgba(37,29,24,.055) !important;
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
}
body.dtt-premium-subpage .mkm-header::after {
    content:"";
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:1px;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--dtt-sub-accent) 28%,transparent),color-mix(in srgb,var(--dtt-sub-accent-2) 22%,transparent),transparent);
    pointer-events:none;
}
body.dtt-premium-subpage .mkm-header-container {
    max-width: 1480px !important;
    height: 70px !important;
    gap: 12px;
}
body.dtt-premium-subpage .mkm-logo span {
    color: var(--dtt-sub-ink) !important;
    letter-spacing: -.06em !important;
}
body.dtt-premium-subpage .mkm-logo span span { color:var(--dtt-sub-accent) !important; }
body.dtt-premium-subpage .mkm-search-form { max-width:330px; margin:0 10px 0 18px; }
body.dtt-premium-subpage .mkm-search-form input {
    height: 42px;
    border: 1px solid rgba(82,69,58,.11);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(39,31,24,.035);
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s ease;
}
body.dtt-premium-subpage .mkm-search-form input:focus {
    background:#fff;
    border-color:color-mix(in srgb,var(--dtt-sub-accent) 45%,#ddd);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--dtt-sub-accent) 10%,transparent),0 13px 30px rgba(39,31,24,.06);
    transform:translateY(-1px);
}
body.dtt-premium-subpage .mkm-nav { gap:3px !important; }
body.dtt-premium-subpage .mkm-nav > a,
body.dtt-premium-subpage .mkm-nav > button {
    position:relative;
    display:inline-flex !important;
    align-items:center;
    gap:6px;
    min-height:40px;
    padding:9px 10px !important;
    border:1px solid transparent;
    border-radius:999px;
    color:#3d383f !important;
    font-size:13px !important;
    font-weight:780 !important;
    letter-spacing:-.01em;
    white-space:nowrap;
    transition:transform .22s cubic-bezier(.2,.8,.2,1),color .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease !important;
}
body.dtt-premium-subpage .mkm-nav > a:hover,
body.dtt-premium-subpage .mkm-nav > button:hover {
    color:var(--dtt-sub-accent) !important;
    background:rgba(255,255,255,.75) !important;
    border-color:rgba(82,69,58,.09);
    box-shadow:0 8px 20px rgba(39,31,24,.05);
    transform:translateY(-2px);
}
body.dtt-premium-subpage .mkm-nav > a.is-active {
    color:#fff !important;
    border-color:rgba(255,255,255,.07);
    background:
        radial-gradient(circle at 82% 20%, color-mix(in srgb,var(--dtt-sub-accent) 40%,transparent), transparent 52%),
        linear-gradient(135deg,#1c171b,#29222b) !important;
    box-shadow:0 12px 28px rgba(28,20,23,.15),inset 0 1px 0 rgba(255,255,255,.08);
}
body.dtt-premium-subpage .mkm-nav > a.is-active::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:4px;
    width:18px;
    height:2px;
    border-radius:999px;
    transform:translateX(-50%);
    background:linear-gradient(90deg,var(--dtt-sub-accent),var(--dtt-sub-accent-2));
    box-shadow:0 0 10px color-mix(in srgb,var(--dtt-sub-accent) 60%,transparent);
}
body.dtt-premium-subpage .dtt-nav-unread {
    background:linear-gradient(135deg,#ff6d2f,#d83c13) !important;
    box-shadow:0 5px 13px rgba(216,60,19,.24) !important;
}
body.dtt-premium-subpage .mkm-mobile-menu {
    top:70px;
    margin:0 10px;
    border:1px solid rgba(82,69,58,.10);
    border-radius:0 0 24px 24px;
    background:rgba(252,250,247,.96);
    box-shadow:0 24px 50px rgba(28,21,18,.13);
    backdrop-filter:blur(20px);
}
body.dtt-premium-subpage .mkm-mobile-nav a {
    border-bottom-color:rgba(82,69,58,.09);
    border-radius:12px;
    transition:.2s ease;
}
body.dtt-premium-subpage .mkm-mobile-nav a.is-active {
    margin:3px 0;
    padding-left:12px;
    color:#fff;
    border-bottom-color:transparent;
    background:linear-gradient(135deg,#1c171b,#2c242f);
    box-shadow:0 8px 20px rgba(28,21,18,.10);
}

/* Shared shell / hero ----------------------------------------------------- */
body.dtt-premium-subpage .dtt-subpage-main,
body.dtt-premium-subpage main.dtt-subpage-main {
    width:min(1500px,calc(100% - 32px)) !important;
    max-width:1500px !important;
    margin-inline:auto !important;
    padding-top:clamp(24px,3.5vw,52px) !important;
    padding-bottom:clamp(70px,7vw,110px) !important;
}
body.dtt-premium-subpage [data-dtt-subpage-hero],
body.dtt-premium-subpage .dtt-subpage-hero {
    --spot-x:78%; --spot-y:22%;
    position:relative !important;
    isolation:isolate;
    overflow:hidden !important;
    min-height:310px;
    padding:clamp(30px,4.8vw,68px) !important;
    border:1px solid rgba(255,255,255,.07) !important;
    border-radius:clamp(28px,3.2vw,42px) !important;
    background:
        radial-gradient(circle at var(--spot-x) var(--spot-y),color-mix(in srgb,var(--dtt-sub-accent) 30%,transparent),transparent 24rem),
        radial-gradient(circle at 86% 84%,color-mix(in srgb,var(--dtt-sub-accent-2) 23%,transparent),transparent 27rem),
        linear-gradient(135deg,#171319 0%,#241a20 54%,#17151d 100%) !important;
    box-shadow:0 34px 88px rgba(28,20,24,.17) !important;
    color:#fff !important;
    transform:translateZ(0);
}
body.dtt-premium-subpage [data-dtt-subpage-hero]::before,
body.dtt-premium-subpage .dtt-subpage-hero::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    opacity:.52;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size:38px 38px;
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.08),#000 58%,#000);
    mask-image:linear-gradient(90deg,rgba(0,0,0,.08),#000 58%,#000);
    animation:dttSubMesh 20s linear infinite;
}
body.dtt-premium-subpage [data-dtt-subpage-hero]::after,
body.dtt-premium-subpage .dtt-subpage-hero::after {
    content:"";
    position:absolute;
    width:440px;height:440px;
    right:-210px;bottom:-300px;
    z-index:-1;
    border:1px solid rgba(255,255,255,.07);
    border-radius:50%;
    box-shadow:0 0 0 54px rgba(255,255,255,.018),0 0 0 112px rgba(255,255,255,.012);
}
body.dtt-premium-subpage [data-dtt-subpage-hero] nav,
body.dtt-premium-subpage .dtt-subpage-hero nav {
    color:rgba(255,255,255,.58) !important;
}
body.dtt-premium-subpage [data-dtt-subpage-hero] nav a,
body.dtt-premium-subpage .dtt-subpage-hero nav a { color:rgba(255,255,255,.72) !important; text-decoration:none; }
body.dtt-premium-subpage [data-dtt-subpage-hero] nav a:hover,
body.dtt-premium-subpage .dtt-subpage-hero nav a:hover { color:#fff !important; }
body.dtt-premium-subpage [data-dtt-subpage-hero] nav span:last-child,
body.dtt-premium-subpage .dtt-subpage-hero nav span:last-child { color:#ff9f6d !important; border-color:rgba(255,159,109,.3) !important; }
body.dtt-premium-subpage [data-dtt-subpage-hero] h1,
body.dtt-premium-subpage .dtt-subpage-hero h1 {
    max-width:780px;
    margin:0 0 20px !important;
    color:#fff !important;
    font-size:clamp(38px,5.1vw,76px) !important;
    font-weight:900 !important;
    line-height:.98 !important;
    letter-spacing:-.055em !important;
    text-wrap:balance;
}
body.dtt-premium-subpage [data-dtt-subpage-hero] h1 span,
body.dtt-premium-subpage .dtt-subpage-hero h1 span,
body.dtt-premium-subpage .dtt-article-archive__title-accent {
    color:transparent !important;
    background:linear-gradient(90deg,#ff9a60,var(--dtt-sub-accent) 45%,#b9afff 94%) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
}
body.dtt-premium-subpage [data-dtt-subpage-hero] p,
body.dtt-premium-subpage .dtt-subpage-hero p {
    max-width:720px;
    color:rgba(255,255,255,.68) !important;
    border-left-color:color-mix(in srgb,var(--dtt-sub-accent) 55%,transparent) !important;
    font-size:clamp(14px,1.5vw,18px) !important;
    line-height:1.72 !important;
}
body.dtt-premium-subpage .dtt-subpage-hero__copy { position:relative;z-index:3; }
body.dtt-premium-subpage .dtt-subpage-hero__art {
    position:relative;
    z-index:2;
    min-width:260px;
    min-height:250px;
    display:grid !important;
    place-items:center;
    perspective:900px;
}
body.dtt-premium-subpage .dtt-subpage-hero__art::before,
body.dtt-premium-subpage .dtt-subpage-hero__art::after {
    content:"";
    position:absolute;
    width:152px;height:214px;
    border-radius:22px 12px 12px 22px;
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(145deg,color-mix(in srgb,var(--dtt-sub-accent-2) 70%,#221a25),#17131a);
    box-shadow:0 24px 50px rgba(0,0,0,.24);
}
body.dtt-premium-subpage .dtt-subpage-hero__art::before { transform:translate(47px,-14px) rotate(10deg);opacity:.74; }
body.dtt-premium-subpage .dtt-subpage-hero__art::after { transform:translate(74px,20px) rotate(18deg);opacity:.46; }
body.dtt-premium-subpage .dtt-subpage-hero__art > div {
    position:relative;
    z-index:3;
    width:176px !important;
    height:238px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:24px 12px 12px 24px !important;
    overflow:hidden;
    box-shadow:0 34px 60px rgba(0,0,0,.30) !important;
    transform:rotate(-5deg) translateY(var(--hero-float,0px)) !important;
    animation:dttSubCoverFloat 6s ease-in-out infinite;
}
body.dtt-premium-subpage .dtt-subpage-hero__art img { width:100%;height:100%;object-fit:cover; }
body.dtt-premium-subpage .dtt-subpage-hero__stats {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:24px;
}
body.dtt-premium-subpage .dtt-subpage-hero__stat {
    display:inline-flex;
    align-items:baseline;
    gap:7px;
    min-height:38px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    background:rgba(255,255,255,.055);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter:blur(13px);
    color:rgba(255,255,255,.62);
    font-size:10px;
    font-weight:760;
    letter-spacing:.03em;
    text-transform:uppercase;
}
body.dtt-premium-subpage .dtt-subpage-hero__stat strong { color:#fff;font-size:17px;letter-spacing:-.04em; }
body.dtt-premium-subpage .dtt-subpage-hero__stat:first-child strong { color:#ff9f6d; }

/* Filters / discovery dock ------------------------------------------------ */
body.dtt-premium-subpage .dtt-subpage-filter,
body.dtt-premium-subpage .dtt-ranking-filter {
    position:relative;
    z-index:30;
    margin-top:-22px !important;
    margin-bottom:34px !important;
    padding:15px 17px !important;
    border:1px solid rgba(82,69,58,.11) !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.84) !important;
    box-shadow:0 18px 46px rgba(40,31,25,.075) !important;
    backdrop-filter:blur(20px) saturate(1.1);
    -webkit-backdrop-filter:blur(20px) saturate(1.1);
}
body.dtt-premium-subpage .dtt-subpage-filter a,
body.dtt-premium-subpage .dtt-ranking-filter a {
    border-radius:999px !important;
    border:1px solid rgba(82,69,58,.08) !important;
    background:#f7f3ef !important;
    color:#6d635d !important;
    box-shadow:none !important;
    text-decoration:none !important;
    transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease !important;
}
body.dtt-premium-subpage .dtt-subpage-filter a:hover,
body.dtt-premium-subpage .dtt-ranking-filter a:hover {
    transform:translateY(-2px);
    color:var(--dtt-sub-accent) !important;
    border-color:color-mix(in srgb,var(--dtt-sub-accent) 24%,#ddd) !important;
    background:#fff !important;
    box-shadow:0 8px 20px color-mix(in srgb,var(--dtt-sub-accent) 8%,transparent) !important;
}
body.dtt-premium-subpage .dtt-subpage-filter a.bg-blue-600,
body.dtt-premium-subpage .dtt-ranking-filter a.bg-blue-600,
body.dtt-premium-subpage .dtt-ranking-filter a[class*="bg-blue-600"] {
    color:#fff !important;
    border-color:transparent !important;
    background:linear-gradient(135deg,var(--dtt-sub-accent),color-mix(in srgb,var(--dtt-sub-accent) 62%,#7c3aed)) !important;
    box-shadow:0 10px 22px color-mix(in srgb,var(--dtt-sub-accent) 22%,transparent) !important;
}
body.dtt-premium-subpage .dtt-subpage-filter select,
body.dtt-premium-subpage .dtt-ranking-filter select {
    min-height:40px;
    border:1px solid rgba(82,69,58,.10) !important;
    border-radius:12px !important;
    background:#fbfaf8 !important;
    color:#332d30 !important;
}
body.dtt-premium-subpage .dtt-subpage-filter input[type="checkbox"] { accent-color:var(--dtt-sub-accent); }

/* Story grids ------------------------------------------------------------- */
body.dtt-premium-subpage .dtt-story-grid.mkm-grid,
body.dtt-subpage-category .mkm-grid,
body.dtt-subpage-genre .mkm-grid {
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:clamp(14px,1.7vw,24px) !important;
}
body.dtt-premium-subpage .mkm-card {
    position:relative;
    overflow:hidden !important;
    border:1px solid rgba(82,69,58,.10) !important;
    border-radius:22px !important;
    background:rgba(255,255,255,.94) !important;
    box-shadow:0 10px 30px rgba(40,31,25,.05) !important;
    transform:translateY(0);
    transition:transform .30s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease !important;
}
body.dtt-premium-subpage .mkm-card::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(300px circle at var(--card-x,50%) var(--card-y,20%),color-mix(in srgb,var(--dtt-sub-accent) 12%,transparent),transparent 45%);
    transition:opacity .28s ease;
}
body.dtt-premium-subpage .mkm-card:hover {
    transform:translateY(-8px) !important;
    border-color:color-mix(in srgb,var(--dtt-sub-accent) 24%,#eee) !important;
    box-shadow:0 24px 52px rgba(40,31,25,.11),0 7px 18px color-mix(in srgb,var(--dtt-sub-accent) 6%,transparent) !important;
}
body.dtt-premium-subpage .mkm-card:hover::after { opacity:1; }
body.dtt-premium-subpage .mkm-card-img {
    aspect-ratio:3/4 !important;
    min-height:0 !important;
    background:#201b1f !important;
}
body.dtt-premium-subpage .mkm-card-img::before { opacity:.25 !important;filter:blur(22px) brightness(.56) saturate(.8) !important; }
body.dtt-premium-subpage .mkm-card-img > img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transform:scale(1.001);
    transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease !important;
}
body.dtt-premium-subpage .mkm-card:hover .mkm-card-img > img { transform:scale(1.045);filter:saturate(1.04) contrast(1.015); }
body.dtt-premium-subpage .mkm-card > div:last-child { padding:14px !important; }
body.dtt-premium-subpage .mkm-card p { color:#241f22 !important;font-weight:820 !important;letter-spacing:-.018em; }
body.dtt-premium-subpage .mkm-card [style*="background:#f3f4f6"] {
    border:1px solid rgba(82,69,58,.07);
    background:#f7f3ef !important;
    color:#7d716b !important;
}
body.dtt-premium-subpage .mkm-card-btns { gap:7px !important; }
body.dtt-premium-subpage .mkm-btn-card {
    min-height:38px !important;
    border-radius:11px !important;
    border:1px solid rgba(82,69,58,.09) !important;
    transition:.22s ease !important;
}
body.dtt-premium-subpage .mkm-btn-card-start {
    background:#f7f3ef !important;color:#514842 !important;
}
body.dtt-premium-subpage .mkm-btn-card-new {
    color:#fff !important;
    border-color:transparent !important;
    background:linear-gradient(135deg,var(--dtt-sub-accent),color-mix(in srgb,var(--dtt-sub-accent) 60%,var(--dtt-sub-accent-2))) !important;
    box-shadow:0 7px 18px color-mix(in srgb,var(--dtt-sub-accent) 16%,transparent);
}
body.dtt-premium-subpage .mkm-btn-card:hover { transform:translateY(-2px); }
body.dtt-premium-subpage .mkm-pagination a,
body.dtt-premium-subpage .mkm-pagination span {
    min-width:42px;min-height:42px;
    display:inline-grid;place-items:center;
    margin:3px;
    border:1px solid rgba(82,69,58,.10);
    border-radius:12px;
    background:#fff;
    color:#625851;
    box-shadow:0 6px 18px rgba(39,31,24,.035);
}
body.dtt-premium-subpage .mkm-pagination .current {
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg,var(--dtt-sub-accent),var(--dtt-sub-accent-2));
    box-shadow:0 9px 22px color-mix(in srgb,var(--dtt-sub-accent) 18%,transparent);
}

/* Completed --------------------------------------------------------------- */
body.dtt-subpage-completed .dtt-completed-layout { align-items:flex-start;gap:28px !important; }
body.dtt-subpage-completed .dtt-completed-sidebar {
    width:290px !important;
    padding:22px !important;
    border:1px solid rgba(82,69,58,.10);
    border-radius:26px;
    background:rgba(255,255,255,.78);
    box-shadow:var(--dtt-sub-shadow-soft);
    backdrop-filter:blur(16px);
}
body.dtt-subpage-completed .dtt-completed-sidebar > div:first-child > h3 { color:#292226 !important;font-size:18px; }
body.dtt-subpage-completed .dtt-completed-sidebar a,
body.dtt-subpage-completed .dtt-completed-sidebar span[class*="bg-primary"] { border-radius:999px !important; }
body.dtt-subpage-completed .dtt-completed-sidebar > div:last-child {
    border-radius:20px !important;
    background:
        radial-gradient(circle at 80% 5%,rgba(22,155,112,.13),transparent 45%),
        linear-gradient(145deg,#fbfffd,#f3f9f6) !important;
    border-color:rgba(22,155,112,.12) !important;
}
body.dtt-subpage-completed .dtt-completed-results { min-width:0; }
body.dtt-subpage-completed .dtt-completed-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }

/* Rankings --------------------------------------------------------------- */
body.dtt-subpage-ranking .dtt-ranking-filter { position:sticky !important;top:82px !important; }
body.dtt-subpage-ranking .dtt-ranking-podium {
    position:relative;
    margin-top:10px !important;
    padding:34px 26px 30px;
    border:1px solid rgba(82,69,58,.09);
    border-radius:34px;
    background:
        radial-gradient(circle at 50% 18%,rgba(232,163,33,.10),transparent 25rem),
        linear-gradient(145deg,rgba(255,255,255,.85),rgba(252,249,244,.92));
    box-shadow:var(--dtt-sub-shadow-soft);
}
body.dtt-subpage-ranking .dtt-ranking-podium::before {
    content:"TOP 03";
    position:absolute;left:28px;top:20px;
    color:#a48454;font-size:10px;font-weight:900;letter-spacing:.18em;
}
body.dtt-subpage-ranking .dtt-ranking-podium > div > div:first-child {
    border:1px solid rgba(82,69,58,.10) !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.93) !important;
    box-shadow:0 18px 42px rgba(39,31,24,.08) !important;
    transition:transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .34s ease,border-color .34s ease !important;
}
body.dtt-subpage-ranking .dtt-ranking-podium > div:hover > div:first-child { transform:translateY(-9px);box-shadow:0 30px 60px rgba(39,31,24,.13) !important; }
body.dtt-subpage-ranking .dtt-ranking-podium > .order-1 > div:first-child {
    border-color:rgba(232,163,33,.28) !important;
    background:
        radial-gradient(circle at 50% 8%,rgba(255,210,98,.16),transparent 33%),
        #fffdf8 !important;
    box-shadow:0 26px 60px rgba(176,119,22,.16) !important;
}
body.dtt-subpage-ranking .dtt-ranking-list {
    border:1px solid rgba(82,69,58,.10) !important;
    border-radius:28px !important;
    background:rgba(255,255,255,.90) !important;
    box-shadow:var(--dtt-sub-shadow-soft) !important;
}
body.dtt-subpage-ranking .dtt-ranking-list a { border-radius:16px !important; }
body.dtt-subpage-ranking .dtt-ranking-list a:hover {
    background:#fffaf2 !important;
    border-color:rgba(232,163,33,.15) !important;
    box-shadow:0 9px 24px rgba(127,82,13,.06) !important;
    transform:translateX(4px);
}

/* Editorial -------------------------------------------------------------- */
body.dtt-subpage-articles .dtt-article-archive-page { width:min(1500px,calc(100% - 32px));max-width:1500px;margin:0 auto;padding:clamp(24px,3.5vw,52px) 0 clamp(80px,8vw,120px); }
body.dtt-subpage-articles .dtt-article-archive__hero {
    border-radius:38px !important;
    border:1px solid rgba(255,255,255,.07) !important;
    box-shadow:0 34px 88px rgba(28,20,24,.17) !important;
    background:
        radial-gradient(circle at var(--spot-x,76%) var(--spot-y,20%),rgba(124,93,246,.26),transparent 26rem),
        radial-gradient(circle at 90% 84%,rgba(245,106,31,.16),transparent 27rem),
        linear-gradient(135deg,#18131b,#241a27 58%,#17151d) !important;
}
body.dtt-subpage-articles .dtt-article-archive-card,
body.dtt-subpage-articles .dtt-article-sidebar__card {
    border-color:rgba(82,69,58,.10) !important;
    border-radius:22px !important;
    box-shadow:0 10px 30px rgba(40,31,25,.05) !important;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease !important;
}
body.dtt-subpage-articles .dtt-article-archive-card:hover {
    transform:translateY(-7px);
    border-color:rgba(124,93,246,.22) !important;
    box-shadow:0 24px 52px rgba(57,43,94,.11) !important;
}
body.dtt-subpage-articles .dtt-article-sidebar__cta {
    border-radius:24px !important;
    background:
        radial-gradient(circle at 86% 8%,rgba(245,106,31,.18),transparent 48%),
        linear-gradient(145deg,#1c171f,#29202c) !important;
    box-shadow:0 22px 50px rgba(34,25,39,.14);
}

/* Library / history ------------------------------------------------------ */
body.dtt-subpage-library .dtt-library-page,
body.dtt-subpage-history .dtt-history-page {
    min-height:70vh;
    padding:clamp(26px,4vw,54px) 16px clamp(80px,8vw,120px) !important;
    background:transparent !important;
}
body.dtt-subpage-library .dtt-library-shell,
body.dtt-subpage-history .dtt-history-shell { max-width:1460px !important; }
body.dtt-subpage-library .dtt-library-hero,
body.dtt-subpage-history .dtt-history-hero {
    position:relative;
    overflow:hidden;
    min-height:240px;
    padding:clamp(28px,4.4vw,56px) !important;
    border:1px solid rgba(255,255,255,.07) !important;
    border-radius:34px !important;
    background:
        radial-gradient(circle at var(--spot-x,82%) var(--spot-y,18%),color-mix(in srgb,var(--dtt-sub-accent) 28%,transparent),transparent 24rem),
        radial-gradient(circle at 88% 90%,color-mix(in srgb,var(--dtt-sub-accent-2) 18%,transparent),transparent 24rem),
        linear-gradient(135deg,#18141d,#241a27 58%,#17151d) !important;
    box-shadow:0 30px 72px rgba(28,20,24,.15) !important;
    color:#fff;
}
body.dtt-subpage-library .dtt-library-hero::before,
body.dtt-subpage-history .dtt-history-hero::before {
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size:38px 38px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%);
}
body.dtt-subpage-library .dtt-library-hero h1,
body.dtt-subpage-history .dtt-history-hero h1 { color:#fff !important;font-size:clamp(38px,5vw,64px) !important;letter-spacing:-.055em !important; }
body.dtt-subpage-library .dtt-library-hero p,
body.dtt-subpage-history .dtt-history-hero p { color:rgba(255,255,255,.65) !important; }
body.dtt-subpage-library .dtt-library-kicker,
body.dtt-subpage-history .dtt-history-kicker { color:#ff9e6b !important; }
body.dtt-subpage-library .dtt-library-tabs a {
    border-color:rgba(255,255,255,.10) !important;
    background:rgba(255,255,255,.055) !important;
    color:rgba(255,255,255,.66) !important;
    backdrop-filter:blur(12px);
}
body.dtt-subpage-library .dtt-library-tabs a.is-active {
    color:#1e1821 !important;
    background:#fff !important;
    box-shadow:0 10px 26px rgba(0,0,0,.15) !important;
}
body.dtt-subpage-library .dtt-library-sync-banner,
body.dtt-subpage-history .dtt-history-privacy,
body.dtt-subpage-history .dtt-history-toolbar {
    border-color:rgba(82,69,58,.10) !important;
    background:rgba(255,255,255,.80) !important;
    box-shadow:var(--dtt-sub-shadow-soft) !important;
    backdrop-filter:blur(16px);
}
body.dtt-subpage-library .dtt-library-stats > *,
body.dtt-subpage-library .dtt-library-featured,
body.dtt-subpage-library .dtt-library-featured-empty,
body.dtt-subpage-library .dtt-library-grid > *,
body.dtt-subpage-history .dtt-history-list > * {
    border-color:rgba(82,69,58,.10) !important;
    box-shadow:0 10px 30px rgba(40,31,25,.05) !important;
}
body.dtt-subpage-library .dtt-library-grid > *,
body.dtt-subpage-history .dtt-history-list > * { transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease; }
body.dtt-subpage-library .dtt-library-grid > *:hover,
body.dtt-subpage-history .dtt-history-list > *:hover { transform:translateY(-5px);box-shadow:0 22px 48px rgba(40,31,25,.09) !important;border-color:color-mix(in srgb,var(--dtt-sub-accent) 20%,#eee) !important; }

/* Reveal / pointer effects ---------------------------------------------- */
body.dtt-premium-subpage.dtt-subpage-js [data-dtt-reveal] {
    opacity:0;
    transform:translateY(18px) scale(.992);
    transition:opacity .72s cubic-bezier(.2,.75,.2,1),transform .72s cubic-bezier(.2,.75,.2,1);
    transition-delay:var(--reveal-delay,0ms);
}
body.dtt-premium-subpage.dtt-subpage-js [data-dtt-reveal].is-visible { opacity:1;transform:none; }
body.dtt-premium-subpage .dtt-subpage-scroll-progress {
    position:fixed;z-index:1400;left:0;top:0;width:var(--page-progress,0%);height:2px;
    pointer-events:none;background:linear-gradient(90deg,var(--dtt-sub-accent),var(--dtt-sub-accent-2));
    box-shadow:0 0 12px color-mix(in srgb,var(--dtt-sub-accent) 55%,transparent);
}

@keyframes dttSubMesh { to { background-position:38px 38px; } }
@keyframes dttSubCoverFloat { 0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-10px)} }

/* Responsive ------------------------------------------------------------ */
@media (max-width:1280px) {
    body.dtt-premium-subpage .mkm-header-container { max-width:1200px !important; }
    body.dtt-premium-subpage .mkm-search-form { max-width:270px; }
    body.dtt-premium-subpage .mkm-nav > a { padding-inline:8px !important;font-size:12px !important; }
    body.dtt-premium-subpage .dtt-story-grid.mkm-grid,
    body.dtt-subpage-category .mkm-grid,
    body.dtt-subpage-genre .mkm-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
@media (max-width:1024px) {
    body.dtt-premium-subpage .dtt-subpage-main { width:min(100% - 24px,1500px) !important; }
    body.dtt-premium-subpage [data-dtt-subpage-hero],body.dtt-premium-subpage .dtt-subpage-hero { min-height:280px; }
    body.dtt-premium-subpage .dtt-subpage-hero__art { min-width:210px; }
    body.dtt-premium-subpage .dtt-story-grid.mkm-grid,
    body.dtt-subpage-category .mkm-grid,
    body.dtt-subpage-genre .mkm-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    body.dtt-subpage-completed .dtt-completed-layout { flex-direction:column !important; }
    body.dtt-subpage-completed .dtt-completed-sidebar { position:relative !important;top:auto !important;width:100% !important; }
    body.dtt-subpage-completed .dtt-completed-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:768px) {
    body.dtt-premium-subpage .mkm-header-container { height:64px !important; }
    body.dtt-premium-subpage .mkm-mobile-menu { top:64px; }
    body.dtt-premium-subpage [data-dtt-subpage-hero],body.dtt-premium-subpage .dtt-subpage-hero {
        padding:30px 24px 34px !important;
        min-height:0;
        border-radius:28px !important;
    }
    body.dtt-premium-subpage [data-dtt-subpage-hero] h1,body.dtt-premium-subpage .dtt-subpage-hero h1 { font-size:clamp(38px,11vw,58px) !important; }
    body.dtt-premium-subpage .dtt-subpage-hero__art { display:none !important; }
    body.dtt-premium-subpage .dtt-subpage-filter,body.dtt-premium-subpage .dtt-ranking-filter { margin-top:-14px !important;border-radius:20px !important; }
    body.dtt-premium-subpage .dtt-story-grid.mkm-grid,
    body.dtt-subpage-category .mkm-grid,
    body.dtt-subpage-genre .mkm-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important; }
    body.dtt-subpage-completed .dtt-completed-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    body.dtt-premium-subpage .mkm-card { border-radius:17px !important; }
    body.dtt-premium-subpage .mkm-card > div:last-child { padding:10px !important; }
    body.dtt-subpage-ranking .dtt-ranking-podium { padding:28px 10px 16px;border-radius:24px; }
    body.dtt-subpage-ranking .dtt-ranking-podium > div > div:first-child { border-radius:16px !important; }
    body.dtt-subpage-library .dtt-library-page,body.dtt-subpage-history .dtt-history-page { padding-inline:12px !important; }
    body.dtt-subpage-library .dtt-library-hero,body.dtt-subpage-history .dtt-history-hero { border-radius:26px !important;padding:28px 22px !important; }
    body.dtt-subpage-articles .dtt-article-archive-page { width:calc(100% - 24px); }
    body.dtt-subpage-articles .dtt-article-archive__hero { border-radius:28px !important; }
}
@media (max-width:480px) {
    body.dtt-premium-subpage .dtt-subpage-main { width:calc(100% - 18px) !important; }
    body.dtt-premium-subpage .dtt-subpage-hero__stat { padding:7px 9px;font-size:8px; }
    body.dtt-premium-subpage .dtt-subpage-hero__stat strong { font-size:14px; }
    body.dtt-premium-subpage .mkm-card-btns { display:grid !important;grid-template-columns:1fr !important; }
    body.dtt-subpage-ranking .dtt-ranking-filter { top:70px !important; }
}

@media (prefers-reduced-motion:reduce) {
    body.dtt-premium-subpage *,body.dtt-premium-subpage *::before,body.dtt-premium-subpage *::after { animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important; }
    body.dtt-premium-subpage.dtt-subpage-js [data-dtt-reveal] { opacity:1 !important;transform:none !important;transition:none !important; }
}