/* ===========================================================================
 * kanju 主题 · 首页主区
 *
 * 规格取自 `kanju41-mirror/screenshots/home.png`：
 *   hero    站点名（居中大字）+ 品牌域名行 + AI 搜索 composer + 推荐输入 chips
 *   sec    区块标题（左图标 + 标题 + 副标题 / 右侧操作）
 * ========================================================================= */

/* ── hero ── */
.k-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 参照：标题 58–85、域名行 ~92、composer 118 —— 行间距比原先的 12px 紧一半 */
    gap: 0.25rem;
    /* 参照站实测：标题文字带 y58–85（桌面，CJK 约 31px），顶栏是浮层。
       上留白 2.9375rem→3.625rem（标题 y47→58）；下留白收 17px（composer y129→118）。 */
    padding: 3.625rem 0 0;
    text-align: center;
}

.k-hero__title {
    margin: 0;
    font-size: 1.9375rem; /* 31px */
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--k-text);
}

/* 对照 mirror「永久域名 kanju.ai」行：左 muted 文案 + 右主色域名（裁定 9 不照搬「永久域名」措辞） */
.k-hero__brand {
    margin: 0.125rem 0 0.625rem;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.4;
    color: var(--k-text-muted);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.375rem;
    font-weight: 500;
}
.k-hero__brand-label {
    color: var(--k-text-subtle);
    font-weight: 400;
}
.k-hero__brand > em,
.k-hero__brand-domain {
    font-style: normal;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    color: var(--k-primary);
    letter-spacing: 0.01em;
}

/* ── AI 搜索 composer ── */
.k-composer {
    width: 100%;
    /* 贴近 mirror ~736；大屏不加宽填空（边距靠 page-edge/gap） */
    max-width: 46rem;
    border-radius: 1rem; /* rounded-2xl */
    border: 1px solid rgba(86, 164, 157, 0.43); /* --dytt-home-composer-border */
    background: var(--k-composer-bg, color-mix(in srgb, var(--k-surface) 88%, transparent));
    -webkit-backdrop-filter: blur(18px) saturate(118%);
    backdrop-filter: blur(18px) saturate(118%);
    box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 16px 42px rgb(0 0 0 / 12%);
    /* 参照实测 composer 高 ~80（y118–198） */
    padding: 0.375rem 0.75rem 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: left;
}

.k-composer:focus-within {
    border-color: rgb(var(--k-primary-rgb) / 56%);
    box-shadow: inset 0 1px rgb(255 255 255 / 6%), 0 0 0 3px rgb(var(--k-primary-rgb) / 14%), 0 16px 42px rgb(0 0 0 / 22%);
}

.k-composer__plus:hover {
    color: var(--k-text);
    border-color: var(--k-interactive-border-hover, var(--k-border));
    background: rgb(var(--k-hover-rgb) / 72%);
}

.k-composer__chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.5rem;
    padding: 0 0.625rem;
    border-radius: 999px;
    border: 1px solid rgb(var(--k-primary-rgb) / 34%);
    background: rgb(var(--k-primary-rgb) / 10%);
    color: var(--k-primary);
    font-size: var(--k-fs-sm);
    line-height: 1;
    margin-bottom: 0;
}

.k-composer__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.k-composer__plus {
    flex: 0 0 auto;
    width: 2.25rem; /* size-9 */
    height: 2.25rem;
    border-radius: 50%;
    border: 0;
    background: rgb(var(--k-hover-rgb) / 55%);
    color: var(--k-text-muted);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.k-composer__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--k-text);
    font-family: inherit;
    font-size: 1rem;
    padding: 0.5rem 0.25rem;
    outline: none;
}

.k-composer__input::placeholder {
    color: var(--k-text-subtle);
}

.k-composer__mic {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 0;
    background: rgb(var(--k-hover-rgb) / 55%);
    color: var(--k-text-muted);
    cursor: pointer;
}

.k-composer__mic:hover {
    color: var(--k-text);
    background: rgb(var(--k-hover-rgb) / 72%);
}


.k-composer__send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: var(--k-primary);
    color: var(--k-primary-ink, #07140f);
    cursor: pointer;
    transition: filter 0.15s;
}


.k-composer:has(.k-composer__input:placeholder-shown) .k-composer__send,
.k-chat__form:has(.k-chat__input:placeholder-shown) .k-composer__send {
    opacity: 0.55;
}

.k-composer__send:hover {
    filter: brightness(1.08);
}
.k-composer__send:active {
    filter: brightness(0.95);
    transform: scale(0.96);
}

/* 登录态词元摘要：仅在有文案时由 JS 插入，不用 AI 搜索页的大条样式 */
.k-composer .k-composer__quota {
    margin: 0.2rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: var(--k-fs-sm, 12px);
    line-height: 1.3;
    color: var(--k-text-subtle);
}

/* 第二行 chips：推荐输入 + 带绿底的 AI 漫剧（参照站两行结构） */
.k-chips--sub > a[data-k-accent] {
    border-color: rgb(var(--k-primary-rgb) / 34%);
    background: rgb(var(--k-primary-rgb) / 10%);
    color: var(--k-primary);
}

.k-chips--sub > a[data-k-accent]::before {
    display: none;
}

/* ── 推荐输入 chips ── */
.k-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* 参照实测宽 770；与 composer 同保持居中限宽，不随大屏加宽 */
    max-width: 48.125rem;
    margin-top: 1.375rem;
    width: 100%;
}

/* composer/chips 保持接近 mirror 的居中限宽（~46/48rem），不随 1920 加宽填空。
   两侧留白由 --k-page-edge / --k-sidebar-content-gap 控制，不靠放宽搜索条填满。 */

.k-chips__label {
    font-size: var(--k-fs-sm);
    color: var(--k-text-subtle);
}

.k-chips > a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--k-interactive-border);
    background: rgb(var(--k-hover-rgb) / 46%);
    color: var(--k-text-muted);
    font-size: var(--k-fs-sm);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.k-chips > a:hover {
    color: var(--k-text);
    border-color: var(--k-interactive-border-hover);
    background: rgb(var(--k-primary-rgb) / 8%);
}

.k-chips > a::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.25rem 0 0.25rem 0.375rem;
    border-color: transparent transparent transparent var(--k-primary);
}

/* ── 区块 ── */
/* 对齐源站 main-BZ6il-sR / HomeFeed：
 *   .home-feed-section-list / .home-watch-calendar / .movie-resume-section
 *   均为 max-width:80rem + margin-inline:auto 居中。
 * 大屏（1920）主列内宽 ~1600，80rem=1280 → 左右各多约 160 呼吸区；
 * 侧栏后视觉左间隙 ≈ gap(16) + 160 ≈ 176（对照 mirror 标题 x≈448）。
 * page-edge / sidebar-content-gap 令牌保持源站断点，不靠加大 edge 假充。 */
.k-home > .k-sec,
.k-home > .k-catrows {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

.k-sec {
    /* 参照实测区块间距：周追剧标题 y325、日卡 y378、分类 y470、feed y668。
       原先 1.5rem 使各区块逐步下移（标题 +31、日卡 +44、分类 +56）。 */
    margin-top: 0.5rem;
}

/* feed 区（大家都在看）：参照 分类底部(560)→标题(610) 间距 50，比常规区块大 */
.k-sec--feed {
    margin-top: 2.25rem; /* 分类底→feed 标题：对照 mirror ~1.5–2.5rem，原 3.125 偏空 */
}
.k-sec--feed + .k-sec--feed {
    margin-top: 1.75rem;
}

.k-sec__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    /* 原先 0.75rem：日卡带因此比参照低 13（参照 标题→日卡 53，量得本主题 66） */
    margin-bottom: 0.25rem;
}

.k-sec__title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--k-text);
}

/* 区块标题图标改用内联 SVG（裁定 14），不再用占位方块 */
.k-sec__title > svg {
    flex: 0 0 auto;
    color: var(--k-primary);
}

.k-sec__head > div:first-child {
    min-width: 0;
    text-align: left;
}

.k-sec__sub {
    /* 与标题列左缘齐平（去掉原 1.625rem 图标缩进）；强制左对齐 */
    display: block;
    margin: 0.25rem 0 0;
    padding: 0;
    text-align: left;
    font-size: var(--k-fs-md);
    color: var(--k-text-subtle);
}

.k-sec__more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--k-fs-md);
    color: var(--k-primary);
    white-space: nowrap;
    padding-top: 0.25rem;
}

.k-sec__more:hover {
    color: var(--k-primary-soft);
}

/* feed 区「查看更多」：对照 mirror 描边小按钮，不是纯文字链 */
.k-sec--feed .k-sec__more {
    font: inherit;
    cursor: pointer;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--k-interactive-border);
    border-radius: 0.375rem;
    color: var(--k-text-muted);
    font-size: var(--k-fs-sm);
    background: transparent;
}
.k-sec--feed .k-sec__more:hover {
    color: var(--k-text);
    border-color: var(--k-interactive-border-hover);
    background: rgb(255 255 255 / 4%);
}

/* 骨架期的区块占位（任务 3.x 逐个替换） */
.k-ph {
    border-radius: var(--k-radius);
    border: 1px dashed var(--k-interactive-border);
    background: var(--k-tint);
    color: var(--k-text-subtle);
    font-size: var(--k-fs-md);
    padding: 2rem 1rem;
    text-align: center;
}

/* 推荐分区统一使用海报底部叠层文案，隐藏旧版横排文字。 */
.k-card__text {
    display: none;
}

/* ────────────────── 移动端（<1024）：对照 home-mobile.png 实测值 ────────────────── */

/* 移动首页热词：参照为带播放图标的描边胶囊，三行居中排列。 */
@media (max-width: 1023.98px) {
    .k-chips {
        gap: 8px;
        max-width: none;
        margin-top: 14px;
        line-height: 1.25;
    }

    .k-chips__label {
        font-size: 0.8125rem;
    }

    /* 参照首页大标题起于 y=80（顶栏占 50，标题自带 30）。
       必须是 padding 而不是 margin —— 基础样式里 .k-hero 的 padding-top 是 47（桌面调的），
       而 margin 会折叠到 .k-home 上（实测标题因此落在 y=127）。 */
    .k-hero {
        margin-top: 0;
        padding-top: 30px;
        /* 标题 y80 对齐后，composer 顶应对 ~152.5；gap 过大/过小都会偏 */
        gap: 0.35rem;
    }

    .k-hero__brand {
        margin-bottom: 0;
    }

    /* 参照 AI 搜索盒：17.5,152.5 355×95。
       hero 是 align-items:center，必须 stretch，否则 width 会被算成居中窄盒（实测 x34/w322）。 */
    .k-composer {
        align-self: stretch;
        max-width: none;
        width: auto;
        margin-top: 0;
        min-height: 95px;
        padding: 0.65rem 0.85rem;
        box-sizing: border-box;
        gap: 0.35rem;
        border-radius: 1.05rem;
    }

    .k-composer__input {
        padding: 0.5rem 0.25rem;
        font-size: 0.9375rem;
    }

    .k-chips > a {
        min-height: 34px;
        padding: 6px 12px;
        border: 1px solid var(--k-interactive-border);
        border-radius: 999px;
        background: rgb(var(--k-hover-rgb) / 46%);
        font-size: 14px;
    }

    .k-chips > a::before {
        border-color: transparent transparent transparent var(--k-text-muted);
    }

    .k-chips--sub {
        margin-top: 32px;
        margin-bottom: 8px;
    }

    /* 其它分区收紧；feed 单独加大（必须写在 .k-sec 之后，同权重看顺序）
       目标参照 feed 顶 ≈668；实测 0.375rem 时 639，用 2.125rem 补约 29px。 */
    .k-sec {
        margin-top: 0.375rem;
    }
    .k-sec.k-sec--feed {
        margin-top: 2.125rem;
    }
}

/* feed 左右箭头：抬高层级，避免被横滑行 / 渐变遮罩 / overflow 挡住 */
.k-sec__head {
    position: relative;
    z-index: 2;
    overflow: visible;
}
.k-sec__head .k-sec__tools {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    pointer-events: auto;
}
.k-sec__head .k-sec__arrow {
    position: relative;
    z-index: 6;
    pointer-events: auto;
}

/* 分区箭头禁用态（任务 1.4：端点时置灰）
   注意：不要 pointer-events:none；真正 disabled 时浏览器仍会吞点击。
   若滚过仍不能点，是 app.js initSectionArrows 的 var 闭包未更新本行 disabled。 */
.k-sec__arrow:disabled {
    opacity: 0.32;
    cursor: default;
}

/* 首页分区渐显：不再用 opacity:0 藏内容（会与 IO/减动效打架，整段空白）。
   仅做轻位移，默认可读。 */
.k-sec[data-k-reveal] {
    opacity: 1;
    transform: translateY(8px);
    transition: transform 0.35s ease;
}
.k-sec[data-k-reveal].is-in {
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .k-sec[data-k-reveal] {
        transform: none;
        transition: none;
    }
}



/* ── 继续观看：对照 mirror movie-resume-*（仅登录态；无数据整区 hidden）──
 * 矮横滑卡：移动 min(68vw,16rem)/9rem；sm 16.5rem/10rem；lg 17.5rem。
 * 信息面板内：片名 +「第N集 · 上次看到」+ 左时间/右% + 青绿进度条。
 */
.k-sec--resume {
    margin-top: 1.25rem;
}
.k-sec--resume[hidden] {
    display: none !important;
}
.k-sec--resume .k-sec__title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
}
.k-sec--resume .k-sec__head {
    align-items: flex-end;
    margin-bottom: 0.25rem;
}
.k-sec__more--btn,
.k-sec--resume .k-sec__more {
    padding: 0 0.75rem;
    height: 2rem;
    border: 1px solid var(--k-interactive-border);
    border-radius: 0.25rem;
    color: var(--k-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    background: transparent;
    padding-top: 0;
    align-items: center;
    display: inline-flex;
}
.k-sec__more--btn:hover,
.k-sec--resume .k-sec__more:hover {
    color: var(--k-text);
    border-color: var(--k-interactive-border-hover);
    background: rgb(255 255 255 / 4%);
}

.k-resume {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0.125rem 0.75rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}
.k-resume[hidden] { display: none !important; }
.k-resume::-webkit-scrollbar { display: none; }

.k-resume__card {
    position: relative;
    flex: 0 0 min(68vw, 16rem);
    width: min(68vw, 16rem);
    height: 9rem;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
}
.k-resume__card:hover {
    border-color: rgb(var(--k-primary-rgb) / 35%);
    box-shadow: 0 0 0 1px rgb(103 232 249 / 14%), 0 9px 24px rgb(0 0 0 / 22%);
}
.k-resume__card:hover .k-resume__img {
    transform: scale(1.05);
}
.k-resume__card:hover .k-resume__panel {
    background: linear-gradient(rgb(9 30 35 / 10%), rgb(8 21 24 / 42%)), rgb(8 21 24 / 32%);
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgb(0 0 0 / 30%), 0 0 18px rgb(103 232 249 / 12%), inset 0 1px rgb(255 255 255 / 12%);
}
.k-resume__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 70% 30%, rgb(var(--k-primary-rgb) / 16%), transparent 55%),
        linear-gradient(135deg, rgb(20 28 32), rgb(12 16 18));
}
.k-resume__img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    opacity: 0.92;
    transition: transform 0.3s;
}
.k-resume__shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow:
        inset 3.25rem 0 3.5rem -3.25rem rgb(0 0 0 / 58%),
        inset 0 -4rem 3.75rem -4rem rgb(0 0 0 / 50%);
}
.k-resume__panel {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    background: linear-gradient(rgb(7 16 19 / 8%), rgb(7 16 19 / 34%)), rgb(7 16 19 / 24%);
    box-shadow: 0 10px 26px rgb(0 0 0 / 22%), inset 0 1px rgb(255 255 255 / 8%);
    pointer-events: none;
    transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
}
.k-resume__copy {
    min-width: 0;
    color: rgb(255 255 255 / 96%);
    text-shadow: 0 1px 10px rgb(0 0 0 / 36%);
}
.k-resume__name,
.k-resume__meta strong {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 92%;
}
.k-resume__ep,
.k-resume__meta em {
    display: block;
    margin-top: 0.25rem;
    font-style: normal;
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(255 255 255 / 62%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.k-resume__prog {
    margin-top: 0.75rem;
}
.k-resume__prog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    line-height: 1;
    color: rgb(255 255 255 / 62%);
    font-variant-numeric: tabular-nums;
}
.k-resume__bar {
    display: block;
    height: 0.375rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 14%);
    overflow: hidden;
}
.k-resume__bar > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--k-primary, #a5f3fc);
    box-shadow: 0 0 14px rgb(103 232 249 / 45%);
}

@media (min-width: 640px) {
    .k-resume { gap: 0.75rem; }
    .k-resume__card {
        flex-basis: 16.5rem;
        width: 16.5rem;
        height: 10rem;
    }
    .k-resume__name,
    .k-resume__meta strong { font-size: 1rem; line-height: 1.5rem; }
}
@media (min-width: 768px) {
    .k-sec--resume { margin-top: 1.5rem; }
    .k-sec--resume .k-sec__title { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
    .k-resume__card {
        flex-basis: 17.5rem;
        width: 17.5rem;
    }
}

/* ── composer 语音按住说话（对照源站 movie-voice-pad） ── */
/* 语音态：保留 + / 键盘 / 发送，仅用 voice-pad 替换输入框 */
.k-composer[data-k-voice="1"] .k-composer__input,
.k-chat__form[data-k-voice="1"] .k-chat__input {
    display: none !important;
}
.k-composer[data-k-voice="1"] .k-composer__row > .k-voice-pad,
.k-chat__form[data-k-voice="1"] .k-chat__row > .k-voice-pad {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.k-composer[data-k-voice="1"] [data-k-voice-mic-ico],
.k-chat__form[data-k-voice="1"] [data-k-voice-mic-ico] {
    display: none !important;
}
.k-composer[data-k-voice="1"] [data-k-voice-kbd-ico],
.k-chat__form[data-k-voice="1"] [data-k-voice-kbd-ico] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.k-composer__kbd-ico[hidden] { display: none !important; }
.k-composer__mic-ico,
.k-composer__kbd-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.k-voice-pad {
    position: relative;
    display: none;
    width: 100%;
    min-height: 2.5rem;
    margin: 0;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--k-border-soft, rgba(255,255,255,.08));
    border-radius: 0.75rem;
    background: var(--k-surface, rgb(255 255 255 / 4%));
    color: var(--k-text);
    text-align: left;
    cursor: pointer;
    user-select: none;
    touch-action: none;
    overflow: hidden;
    transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.k-voice-pad:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--k-primary-rgb) / 45%);
}
.k-voice-pad__progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: rgba(var(--k-primary-rgb) / 12%);
    pointer-events: none;
    transition: width .12s linear;
}
.k-voice-pad__pulse {
    position: absolute;
    inset: 0;
    opacity: .8;
    background:
      linear-gradient(90deg, transparent, rgba(var(--k-primary-rgb) / 10%), transparent),
      repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 8px);
    animation: 1.45s linear infinite k-voice-scan;
    pointer-events: none;
}
.k-voice-pad__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.k-voice-pad__orb {
    position: relative;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--k-primary);
}
.k-voice-pad__orb-ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: conic-gradient(var(--k-primary) 0deg, rgba(255,255,255,.12) 0deg);
    opacity: .9;
}
.k-voice-pad__orb-core {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 999px;
    background: var(--k-bg-elevated);
}
.k-voice-pad[data-state="recording"] .k-voice-pad__orb::before,
.k-voice-pad[data-state="recording"] .k-voice-pad__orb::after {
    content: "";
    position: absolute;
    inset: -0.35rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--k-primary-rgb) / 32%);
    animation: 1.4s ease-out infinite k-voice-ring;
    pointer-events: none;
}
.k-voice-pad[data-state="recording"] .k-voice-pad__orb::after {
    animation-delay: .42s;
}
.k-voice-pad__text {
    flex: 1;
    min-width: 0;
}
.k-voice-pad__title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--k-text);
}
.k-voice-pad__hint {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1rem;
    color: var(--k-text-subtle, rgb(255 255 255 / 45%));
}
.k-voice-pad__meta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--k-text-subtle, rgb(255 255 255 / 45%));
    font-variant-numeric: tabular-nums;
}
.k-voice-pad__wave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    width: 2.75rem;
    height: 1rem;
}
.k-voice-pad__wave i {
    display: block;
    width: 0.12rem;
    min-height: 0.22rem;
    border-radius: 999px;
    background: rgba(var(--k-primary-rgb) / 76%);
    transform-origin: center bottom;
}
.k-voice-pad[data-state="recording"] .k-voice-pad__wave i {
    animation: .72s ease-in-out infinite alternate k-voice-wave;
}
.k-voice-pad[data-state="recording"] .k-voice-pad__wave i:nth-child(1) { height: 34%; animation-delay: 0ms; }
.k-voice-pad[data-state="recording"] .k-voice-pad__wave i:nth-child(2) { height: 51%; animation-delay: 58ms; }
.k-voice-pad[data-state="recording"] .k-voice-pad__wave i:nth-child(3) { height: 68%; animation-delay: 116ms; }
.k-voice-pad[data-state="recording"] .k-voice-pad__wave i:nth-child(4) { height: 42%; animation-delay: 174ms; }
.k-voice-pad[data-state="recording"] .k-voice-pad__wave i:nth-child(5) { height: 59%; animation-delay: 232ms; }
.k-voice-pad[data-state="recording"] .k-voice-pad__wave i:nth-child(6) { height: 48%; animation-delay: 290ms; }
.k-voice-pad__spin {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid rgba(255,255,255,.18);
    border-top-color: var(--k-primary);
    border-radius: 50%;
    animation: .7s linear infinite k-voice-spin;
}

/* recording */
.k-voice-pad[data-state="recording"] {
    border-color: var(--k-primary);
    background: rgba(var(--k-primary-rgb) / 10%);
    box-shadow: 0 0 0 1px rgba(var(--k-primary-rgb) / 16%), 0 12px 30px rgba(8,145,167,.18);
    animation: 1.7s ease-in-out infinite k-voice-breathe;
}
.k-voice-pad[data-state="recording"] .k-voice-pad__pulse { display: block !important; }

/* requesting / transcribing / timeout */
.k-voice-pad[data-state="requesting"],
.k-voice-pad[data-state="timeout"],
.k-voice-pad[data-state="transcribing"] {
    cursor: wait;
}

/* error */
.k-voice-pad[data-state="error"] {
    border-color: rgba(248, 113, 113, .55) !important;
    background: rgba(127, 29, 29, .28) !important;
}
.k-voice-pad[data-state="error"] .k-voice-pad__orb {
    color: #fecaca;
}
.k-voice-pad[data-state="error"] .k-voice-pad__progress {
    background: rgba(248, 113, 113, .18);
}
/* 图标互斥：SVG 的 [hidden] 不可靠，一律用 display !important */
.k-voice-pad__ico--mic { display: block; }
.k-voice-pad__ico--err,
.k-voice-pad__ico--err[hidden] { display: none !important; }
.k-voice-pad[data-state="error"] .k-voice-pad__ico--mic,
.k-voice-pad[data-state="error"] .k-voice-pad__ico--mic[hidden] { display: none !important; }
.k-voice-pad[data-state="error"] .k-voice-pad__ico--err,
.k-voice-pad[data-state="error"] .k-voice-pad__ico--err[hidden] { display: block !important; }

.k-composer__mic.is-voice-on {
    color: var(--k-primary);
    background: rgba(var(--k-primary-rgb) / 14%);
}

@keyframes k-voice-scan {
    from { background-position: -40% 0, 0 0; }
    to { background-position: 140% 0, 0 0; }
}
@keyframes k-voice-ring {
    0% { transform: scale(.85); opacity: .7; }
    100% { transform: scale(1.35); opacity: 0; }
}
@keyframes k-voice-wave {
    from { transform: scaleY(.45); }
    to { transform: scaleY(1); }
}
@keyframes k-voice-spin { to { transform: rotate(360deg); } }
@keyframes k-voice-breathe {
    0%, 100% { transform: translateZ(0); }
    50% { transform: translateZ(0) scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
    .k-voice-pad__pulse,
    .k-voice-pad[data-state="recording"],
    .k-voice-pad[data-state="recording"] .k-voice-pad__orb::before,
    .k-voice-pad[data-state="recording"] .k-voice-pad__orb::after,
    .k-voice-pad[data-state="recording"] .k-voice-pad__wave i,
    .k-voice-pad__spin {
        animation: none !important;
    }
}