/* ===========================================================================
 * kanju 主题 · 壳层
 *
 * 结构（对齐参照站实测）：
 *   html[data-app-shell-layout=standard|immersive]
 *   ┌ #k-shell ──────────────────────────────────────────────┐
 *   │  aside#k-sidebar 272px   │  div#k-main                  │
 *   │  （桌面固定，移动收起）   │    header#k-topnav           │
 *   │                          │    main#app-main  ← htmx 替换 │
 *   │                          │    nav#k-tabbar（移动）       │
 *   └────────────────────────────────────────────────────────┘
 *
 * #app-main 是 htmx 的唯一替换目标（决策 3.2）；侧栏 / 顶栏 / 底部 tab bar 留在其外，
 * 切页时保持存活不重建（决策 3.2 壳层常驻）。
 * ========================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--k-bg);
    color: var(--k-text);
    font-family: var(--k-font);
    font-size: 16px;
    line-height: 1.5;
    overscroll-behavior-x: none;
}

body {
    margin: 0;
    background: var(--k-bg);
    color: var(--k-text);
    min-height: 100dvh;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* ── 首页氛围层（参照站 .movie-atmosphere 的等价物）── */
.k-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--k-home-gradient);
}

/* ── 壳 ── */
#k-shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    min-height: 100dvh;
}

/* ── 侧栏 ── */
#k-sidebar {
    flex: 0 0 var(--k-sidebar-w);
    width: var(--k-sidebar-w);
    max-width: var(--k-sidebar-w);
    position: fixed;
    transition: width 0.2s ease, max-width 0.2s ease;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    /* 参照：侧栏上下留安全区（桌面 inset=0 无感） */
    padding-top: max(0.5rem, var(--k-safe-top));
    padding-bottom: max(0.5rem, var(--k-safe-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--k-surface);
    border-right: 1px solid var(--k-border-soft);
    padding: 0.625rem 0.625rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* ── 主区 ── */
#k-main {
    flex: 1;
    min-width: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    margin-left: var(--k-sidebar-w);
    transition: margin-left 0.2s ease;
}

/* ── 顶栏（胶囊导航）──
   参照站实测：顶栏是**浮层**（不占流），内容区从视口顶部起算——
   所以 hero 标题能落在 y≈45。若做成 sticky 流内元素会把整页推低约 40px（实测过）。 */
#k-topnav {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    /* 参照：顶部取 max(基础值, 安全区) —— 刘海屏 PWA 下不被状态栏压住 */
    padding: max(0.375rem, var(--k-safe-top)) max(1rem, var(--k-safe-right)) 0 0;
    pointer-events: none;
}

#k-topnav > * {
    pointer-events: auto;
}

@media (min-width: 1024px) {
    #k-topnav {
        /* 参照源站 floating control：right = max(page-edge, .75rem)；与主列右缘对齐 */
        padding: 0.875rem max(var(--k-page-edge), 0.75rem) 0;
    }
}

.k-navpill {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem;
    border-radius: 999px;
    border: 1px solid var(--k-border-soft, var(--k-border));
    background: rgb(var(--k-hover-rgb) / 74%);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    box-shadow: inset 0 1px rgb(255 255 255 / 11%), 0 16px 38px rgb(0 0 0 / 16%);
}

.k-navpill a {
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    border: 1px solid transparent; /* 预留边框，避免 current 项 1px 边把胶囊撑高错位 */
    font-size: 0.875rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.88); /* 对照 mirror 未选中近白，而非 0.68 muted */
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
html.light .k-navpill a {
    color: var(--k-text-muted);
}

.k-navpill a:hover {
    color: var(--k-text);
}

.k-navpill a[aria-current="page"] {
    background: rgb(var(--k-primary-rgb) / 16%);
    border-color: rgb(var(--k-primary-rgb) / 55%);
    color: var(--k-primary);
    box-shadow: inset 0 1px rgb(255 255 255 / 8%);
}

/* ── 内容区（htmx 替换目标）── */
#app-main {
    flex: 1;
    min-width: 0;
    padding: 0 var(--k-page-edge) 1rem;
}

@media (min-width: 1024px) {
    #app-main {
        /* 主列安全区：左 = --k-sidebar-content-gap（源站 1rem），右 = --k-page-edge（源站 1280+ 为 2rem）。
           对齐 kanju41 main-BZ6il-sR：.movie-content-page-shell padding-left/right；侧栏 17rem。 */
        padding: 0 var(--k-page-edge) 1.25rem 0;
        padding-left: var(--k-sidebar-content-gap);
    }
}

/* ── 底部 tab bar（仅移动）── */
#k-tabbar {
    display: none;
}

@media (max-width: 1023.98px) {
    #k-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 120;
        width: 82vw;
        max-width: 20rem;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
        box-shadow: 0 2rem 4rem rgb(0 0 0 / 50%);
    }

    body[data-sidebar-open] #k-sidebar {
        transform: translateX(0);
    }

    #k-main {
        margin-left: 0;
    }

    /* 参照 .app-primary-bottom-nav：居中胶囊浮层 + safe-area-inset-bottom */
    #k-tabbar {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: calc(0.45rem + var(--k-safe-bottom, 0px));
        z-index: 118;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
        gap: 0.18rem;
        width: min(calc(100vw - 1.5rem), 24rem);
        transform: translateX(-50%);
        padding: 0.32rem;
        background: var(--k-tabbar-bg, color-mix(in srgb, var(--k-surface) 82%, transparent));
        border: 1px solid var(--k-border-soft, rgb(255 255 255 / 7.5%));
        border-radius: 999px;
        backdrop-filter: blur(26px) saturate(180%);
        -webkit-backdrop-filter: blur(26px) saturate(180%);
        box-shadow: inset 0 1px rgb(255 255 255 / 14%), 0 14px 38px rgb(0 0 0 / 24%);
        /* 安全区：bottom 用 --k-safe-bottom（= max(env(safe-area-inset-bottom), 0)）抬离手势条 */
    }

    #k-tabbar a,
    #k-tabbar button.k-tabbar__share {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.12rem;
        min-height: 3.08rem;
        min-width: 0;
        position: relative;
        margin: 0;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        font: inherit;
        font-size: 0.68rem;
        font-weight: 900;
        line-height: 0.78rem;
        color: var(--k-text-subtle);
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
    }

    #k-tabbar a:active {
        transform: translateY(1px);
    }

    /* 页面声明隐底栏（播放页）：参照的移动播放页没有底栏 */
    html[data-k-hide-tabbar] #k-tabbar {
        display: none;
    }

    /* 激活态：对标 mirror .app-primary-bottom-link.is-active */
    #k-tabbar a[aria-current="page"],
    #k-tabbar a.is-active {
        color: var(--k-primary);
        border-color: color-mix(in srgb, var(--k-primary-strong, #087a54) 42%, transparent);
        background: color-mix(in srgb, var(--k-primary-strong, #087a54) 5.3%, transparent);
        box-shadow: inset 0 1px rgb(255 255 255 / 12%), 0 8px 18px color-mix(in srgb, var(--k-primary) 10%, transparent);
    }

    /* 中央分享：button，参照 share-icon 2.8rem / top -0.98rem */
    #k-tabbar button.k-tabbar__share {
        justify-content: flex-end;
        padding-bottom: 0.38rem;
        /* 文案跟未激活 tab 同色；绿色只留给浮起圆钮，避免「分享误亮」 */
        color: var(--k-text-subtle);
        font-weight: 900;
    }

    #k-tabbar button.k-tabbar__share .k-tabbar__icon {
        position: absolute;
        top: -0.98rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.8rem;
        height: 2.8rem;
        margin-top: 0;
        border-radius: 999px;
        border: 2px solid rgb(255 255 255 / 12%);
        background: var(--k-primary-strong, #087a54);
        color: #fff;
        display: grid;
        place-items: center;
        box-shadow: inset 0 1px rgb(255 255 255 / 34%), 0 8px 20px rgb(8 122 84 / 20%);
        overflow: hidden;
        transition: filter 0.15s, transform 0.15s;
    }

    #k-tabbar button.k-tabbar__share .k-tabbar__icon > svg {
        width: 1.32rem;
        height: 1.32rem;
        display: block;
    }

    #k-tabbar button.k-tabbar__share:hover .k-tabbar__icon,
    #k-tabbar button.k-tabbar__share:focus-visible .k-tabbar__icon {
        filter: brightness(1.08);
        transform: translateX(-50%) translateY(-1px);
        outline: none;
    }

    #k-tabbar button.k-tabbar__share:active .k-tabbar__icon {
        transform: translateX(-50%) translateY(1px) scale(0.97);
    }

    /* 浅色主题底栏：选中态改深薄荷绿、减弱荧光/外发光；分享钮略压饱和与外圈 glow（只动 #k-tabbar） */
    html.light #k-tabbar a[aria-current="page"],
    html.light #k-tabbar a.is-active {
        color: #0a8f63; /* was var(--k-primary) #16e09d 荧光绿 */
        border-color: color-mix(in srgb, #0a8f63 48%, transparent);
        background: color-mix(in srgb, #0a8f63 7%, transparent);
        /* 外发光从 8px/18px@10% 压到更克制的阴影，去掉荧光感 */
        box-shadow: inset 0 1px rgb(255 255 255 / 55%), 0 2px 8px color-mix(in srgb, #0a8f63 9%, transparent);
    }

    html.light #k-tabbar button.k-tabbar__share .k-tabbar__icon {
        /* was #087a54（高饱和深绿）；略降饱和 → #1a6e50 */
        background: #1a6e50;
        border-color: rgb(255 255 255 / 18%);
        /* was 0 8px 20px rgb(8 122 84 / 20%) */
        box-shadow: inset 0 1px rgb(255 255 255 / 28%), 0 4px 12px rgb(26 110 80 / 12%);
    }

    html.light #k-tabbar button.k-tabbar__share:hover .k-tabbar__icon,
    html.light #k-tabbar button.k-tabbar__share:focus-visible .k-tabbar__icon {
        filter: brightness(1.04); /* was 1.08，浅色少抬亮 */
    }

    /* 参照实测：移动端页面左右边距 17px（桌面 12px），播放盒因此宽 356 而非 366 */
    :root {
        --k-page-edge: 17px;
    }

    /* 顶栏在移动端改为**回流**（sticky）而不是绝对定位：
       绝对定位会让正文压在顶栏下，得给 #app-main 加全局 padding-top；
       但播放页这类页面 `show_topnav=false`（参照的播放页自带一条顶栏），
       全局留位就会凭空多出 50px。改成回流后，有顶栏的页自然被顶下去，
       没有顶栏的页从 0 开始 —— 一个规则同时满足两种页面。 */
    #k-topnav {
        position: sticky;
        top: 0;
        left: auto;
        right: auto;
        z-index: 30;
    }

    #app-main {
        padding-top: 0;
        /* 浮层底栏高度 + bottom 偏移 + 间隙 */
        padding-bottom: calc(3.08rem + 0.64rem + 0.45rem + 0.5rem + var(--k-safe-bottom, 0px));
    }
    /* 播放页隐底栏：不要再留 4.5rem 空白，参照移动播放页贴底 */
    html[data-k-hide-tabbar] #app-main {
        padding-bottom: 1rem;
    }
}


/* ── immersive 午夜底色（参照 --midnight-theme-bg*）── */
html[data-app-shell-layout="immersive"] {
    /* 午夜强制深色体验：同时重置文字/边框，避免 html.light 深字压深底 */
    --k-bg: #0b1113;
    --k-surface: #11191d;
    --k-bg-deep: #010304;
    --k-bg-elevated: #11191d;
    --k-surface-1: #11191d;
    --k-hover-rgb: 17 25 29;
    --k-card: rgb(17 25 29 / 72%);
    --k-card-hover: rgb(17 25 29 / 88%);
    --k-card-inner: rgb(1 3 4 / 45%);
    --k-tint: rgb(255 255 255 / 4%);
    --k-text: #ffffff;
    --k-text-muted: rgba(255, 255, 255, 0.68);
    --k-text-subtle: rgba(255, 255, 255, 0.52);
    --k-border: rgba(var(--k-primary-rgb) / 18%);
    --k-border-soft: rgba(var(--k-primary-rgb) / 10.6%);
    --k-interactive-border: rgba(255, 255, 255, 0.1);
    --k-interactive-border-hover: rgba(255, 255, 255, 0.18);
    --k-panel-tint: rgba(255, 255, 255, 0.04);
    --k-composer-bg: rgb(37 38 43 / 72%);
    --k-tabbar-bg: rgb(18 42 40 / 78%);
}
html[data-app-shell-layout="immersive"],
html[data-app-shell-layout="immersive"] body {
    background: var(--k-bg);
}

/* ── immersive 壳（午夜剧场，决策 10.6）── */
html[data-app-shell-layout="immersive"] #k-sidebar,
html[data-app-shell-layout="immersive"] #k-topnav,
html[data-app-shell-layout="immersive"] #k-tabbar {
    display: none;
}

html[data-app-shell-layout="immersive"] #k-main {
    margin-left: 0;
}

html[data-app-shell-layout="immersive"] #app-main {
    padding: 0;
}

/* ── 占位与空态（骨架阶段用）── */
.k-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--k-text-subtle);
    border: 1px solid var(--k-border-soft);
    border-radius: var(--k-radius);
    background: rgb(var(--k-hover-rgb) / 40%);
}

/* ── 顶栏品牌字标（移动端可见；桌面由胶囊导航承担）── */
.k-brand {
    display: none;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.k-brand__mark {
    flex: 0 0 auto;
    width: 1.625rem; /* 26px，参照 home-mobile logo */
    height: 1.625rem;
    object-fit: contain;
}

/* 深浅两版：本主题默认是深色壳，所以**默认就出白色版**。
   原先写的是 `html:not(.dark)` 才出黑色版，而 <html> 上根本没有人加 `dark` 类，
   于是深色页面显示黑 logo（实测是看不见的一个圆）。反过来了。 */
.k-brand__mark--light { display: none; }
html.light .k-brand__mark--dark { display: none; }
html.light .k-brand__mark--light { display: block; }

.k-brand__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--k-text);
}

.k-brand__text strong {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 品牌域名小字标（移动端才显示；参照是 logo 下方的字母间距小字） */
.k-brand__text small {
    display: none;
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--k-text-subtle);
}

/* 汉堡：移动端开侧栏抽屉。原先没有任何触发器 —— 抽屉样式在，但打不开。 */
.k-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--k-card);
    color: var(--k-text);
    cursor: pointer;
}

@media (max-width: 1023.98px) {
    .k-brand { display: flex; }
    /* 移动端顶栏：汉堡在左、品牌紧随，右侧不再有胶囊导航
       （原先仍渲染桌面胶囊，被挤成竖排文字并压住品牌） */
    #k-topnav {
        left: 0;              /* 必须补 left：只有 right:0 时盒宽收缩到内容宽并贴右，flex-start 无效 */
        justify-content: flex-start;
        gap: 0.25rem;
        /* 别盖掉 --k-safe-top：基础 0.625rem + 刘海/状态栏安全区 */
        padding: calc(0.625rem + var(--k-safe-top, env(safe-area-inset-top, 0px))) 0.625rem 0;
    }
    .k-burger { display: inline-flex; }
    .k-navpill { display: none; }
    .k-brand__text small { display: block; }

    .k-burger:hover {
        border-color: var(--k-interactive-border-hover, var(--k-border));
        color: var(--k-text);
        background: rgb(255 255 255 / 6%);
    }
    .k-burger[aria-expanded="true"] {
        border-color: rgb(var(--k-primary-rgb) / 48%);
        color: var(--k-primary);
    }
}

/* ── 侧栏折叠态（任务 1.3；2026-10-11 样式对齐参照 side menu 收起态）──
   参照：72px 宽度 + 一列居中 40px 图标钮（展开/品牌/主题/分隔/历史/收藏/APP/
   通知/登录）。k-rail-mini 常驻 DOM、默认隐藏，折叠时显示并隐藏宽栏内容。 */
#k-shell[data-rail-collapsed] {
    --rail-w: 72px;
}

#k-shell[data-rail-collapsed] #k-sidebar {
    width: 72px;
    max-width: 72px;
    padding-inline: 10px;
    overflow: hidden;
    transition: width 0.2s ease, max-width 0.2s ease;
}

#k-shell[data-rail-collapsed] #k-main {
    margin-left: 72px;
}

/* 收起态：宽栏内容整体让位，显示图标列 */
.k-rail-mini { display: none; }

#k-shell[data-rail-collapsed] .k-rail > *:not(.k-rail-mini) {
    display: none !important;
}

#k-shell[data-rail-collapsed] .k-rail-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0 0.5rem;
}

#k-shell[data-rail-collapsed] .k-rail-mini .k-iconbtn {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
}

#k-shell[data-rail-collapsed] .k-rail-mini__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
}

#k-shell[data-rail-collapsed] .k-rail-mini__brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#k-shell[data-rail-collapsed] .k-rail-mini__sep {
    width: 2rem;
    height: 1px;
    flex: 0 0 auto;
    background: var(--k-interactive-border);
    margin-block: 0.125rem;
}

/* 折叠钮图标翻转提示（收起 ↔ 展开） */
#k-shell[data-rail-collapsed] [data-k-rail-collapse] svg {
    transform: scaleX(-1);
}


/* ── 登录态宽栏：已停用 ──
 * 原对照 mirror 登录后栏宽 390（--k-sidebar-w-user）。
 * 用户要求全站侧栏与首页一致（游客首页 272 / 17rem）；
 * data-k-auth 在部分路由上还会误判为 user，导致页间 272↔390 跳动。
 * 令牌 --k-sidebar-w-user 仍保留在 tokens.css，需要时再开。
 */
/* html[data-k-auth="user"] {
    --k-sidebar-w: var(--k-sidebar-w-user, 24.375rem);
} */