/* ======================================================================
 *  host-speech-generator.css · 主持词生成器
 *  视觉：米色稿纸 + 酒红幕布 + 金线；结果像带编号的串场卡片
 *  作用域：.tsk.host（前缀 host-）
 * ====================================================================== */

.tsk.host {
    --tsk-bg: #faf6ef;
    --tsk-bg-2: #f4ede1;
    --tsk-card: #fffdf9;
    --tsk-card-2: #faf5ec;
    --tsk-ink: #2b2118;
    --tsk-sub: #6b5a49;
    --tsk-faint: #9c8b78;
    --tsk-line: #eae0d1;
    --tsk-line-2: #f2eadf;
    --tsk-brand: #8b1e3f;
    --tsk-brand-2: #b8860b;
    --tsk-brand-soft: #f7e9ee;
    --tsk-brand-ink: #7a1736;
    --tsk-accent: #c27c0e;
    --tsk-ok: #2f7d52;
    --tsk-ok-soft: #e8f4ec;
    --tsk-warn: #a26a00;
    --tsk-warn-soft: #fdf2dc;
    --tsk-bad: #b8323f;
    --tsk-bad-soft: #fbe9ea;
    --tsk-info: #2c5f8a;
    --tsk-info-soft: #e8f1f8;
    --tsk-shadow-sm: 0 1px 2px rgba(43, 33, 24, .05), 0 6px 16px rgba(43, 33, 24, .06);
    --tsk-shadow: 0 2px 6px rgba(43, 33, 24, .08), 0 18px 44px rgba(43, 33, 24, .1);
    --tsk-shadow-lg: 0 6px 16px rgba(43, 33, 24, .1), 0 32px 72px rgba(43, 33, 24, .18);
    --tsk-r: 18px;
    --tsk-r-sm: 11px;
    background: linear-gradient(180deg, #fcf8f2 0%, #f8f2e8 55%, #faf6ef 100%);
}

:root[data-theme="dark"] .tsk.host {
    --tsk-bg: #17110d;
    --tsk-bg-2: #1f1712;
    --tsk-card: #221a14;
    --tsk-card-2: #2a2019;
    --tsk-ink: #f4eadb;
    --tsk-sub: #c3b29c;
    --tsk-faint: #937f6b;
    --tsk-line: #3a2c22;
    --tsk-line-2: #2d221b;
    --tsk-brand: #e06a8d;
    --tsk-brand-2: #e0b04a;
    --tsk-brand-soft: rgba(224, 106, 141, .14);
    --tsk-brand-ink: #f08aa9;
    --tsk-accent: #efc06a;
    --tsk-ok: #5bd6a2;
    --tsk-ok-soft: rgba(91, 214, 162, .14);
    --tsk-warn: #ffc857;
    --tsk-warn-soft: rgba(255, 200, 87, .14);
    --tsk-bad: #ff8f9c;
    --tsk-bad-soft: rgba(255, 143, 156, .14);
    --tsk-info: #82b6e0;
    --tsk-info-soft: rgba(130, 182, 224, .14);
    --tsk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .32);
    --tsk-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .4);
    --tsk-shadow-lg: 0 6px 16px rgba(0, 0, 0, .6), 0 32px 72px rgba(0, 0, 0, .5);
    background: #17110d;
}

/* ---------- 1. 首屏栅格 ---------- */
.host-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 394px;
    gap: 30px;
    padding: 30px 0 24px;
    align-items: stretch;
}
.host-hero-l {
    display: flex;
    flex-direction: column;
}
.host-hero-l > .tsk-hs {
    flex: 1 1 auto;
}
@media (max-width: 900px) {
    .host-hero {
        grid-template-columns: 1fr;
    }
}
.host-hero-r {
    min-width: 0;
}
.host .tsk-kicker {
    background: #f7e9ee;
    color: #7a1736;
}
.host .tsk-h1 b {
    color: #8b1e3f;
    position: relative;
}
.host .tsk-h1 b::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 6px;
    background: linear-gradient(90deg, rgba(184, 134, 11, .38), rgba(184, 134, 11, 0));
    z-index: -1;
}
.host .tsk-chips span {
    background: rgba(255, 255, 255, .82);
    border-color: #eadfce;
}

/* ---------- 2. 工作台 ---------- */
.host-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--tsk-card);
    border: 1px solid var(--tsk-line);
    border-radius: 18px;
    box-shadow: var(--tsk-shadow);
    overflow: hidden;
}
.host-panel-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 19px;
    background: linear-gradient(105deg, #5c1229, #8b1e3f 62%, #a8752b);
    color: #fdf7ee;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .02em;
}
.host-panel-hd i {
    font: 700 10px/1 var(--tsk-num);
    letter-spacing: .16em;
    color: rgba(255, 233, 196, .8);
}
.host-panel-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 15px 17px 17px;
}

/* 场景按钮 */
.host-field {
    display: block;
}
.host-label {
    display: block;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tsk-sub);
    letter-spacing: .03em;
}
.host-scenes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.host-scenes button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 2px;
    border: 1.5px solid var(--tsk-line);
    border-radius: 10px;
    background: var(--tsk-card-2);
    color: var(--tsk-sub);
    cursor: pointer;
    transition: .15s;
    min-width: 0;
}
.host-scenes button span {
    font-size: 15px;
    line-height: 1.2;
}
.host-scenes button b {
    font: 700 11px/1.3 var(--tsk-font);
    white-space: nowrap;
}
.host-scenes button:hover {
    border-color: #b8860b;
    color: #7a1736;
}
.host-scenes button.on {
    border-color: #8b1e3f;
    background: #8b1e3f;
    color: #fff;
    box-shadow: 0 6px 14px rgba(139, 30, 63, .26);
}
:root[data-theme="dark"] .host-scenes button.on {
    color: #17110d;
}
.host-note {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--tsk-warn-soft);
    color: var(--tsk-warn);
    font-size: 11px;
    line-height: 1.65;
}

/* 输入框 */
.host-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.host-inp {
    display: block;
    min-width: 0;
}
.host-inp span {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--tsk-faint);
}
.host-inp input {
    width: 100%;
    border: 1.5px solid var(--tsk-line);
    border-radius: 9px;
    background: var(--tsk-card-2);
    color: var(--tsk-ink);
    font: 500 13px/1.5 var(--tsk-font);
    padding: 8px 10px;
    outline: none;
    transition: .15s;
}
.host-inp input:focus {
    border-color: #b8860b;
    background: var(--tsk-card);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, .13);
}
.host-inp input::placeholder {
    color: var(--tsk-faint);
}

/* 数量 */
.host-count {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tsk-sub);
}
.host-count input[type="range"] {
    width: 100%;
    accent-color: #8b1e3f;
}
.host-count b {
    font: 800 12px/1 var(--tsk-num);
    color: #7a1736;
    white-space: nowrap;
}

/* 错误 */
.host-err {
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid #eec3c7;
    background: var(--tsk-bad-soft);
    color: var(--tsk-bad);
    font-size: 11.5px;
    line-height: 1.7;
    font-weight: 600;
}

/* 动作 */
.host-acts {
    display: flex;
    gap: 7px;
    margin-top: auto;
}
.host-acts .tsk-btn-main {
    flex: 1 1 auto;
}
.host-acts .host-sample,
.host-acts .host-reset {
    flex: 0 0 auto;
    padding: 10px 12px;
}
.host-foot {
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--tsk-faint);
    text-align: center;
}

/* ---------- 3. 结果区 ---------- */
.host-result {
    margin-top: 4px;
    background: var(--tsk-card);
    border: 1px solid var(--tsk-line);
    border-radius: 18px;
    box-shadow: var(--tsk-shadow-sm);
    padding: 17px 19px 19px;
}
.host-result-hd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 13px;
    border-bottom: 1px dashed var(--tsk-line);
}
.host-result-meta b {
    display: block;
    font-size: 15px;
    color: var(--tsk-ink);
}
.host-result-meta span {
    font-size: 11.5px;
    color: var(--tsk-faint);
}
.host-result-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.host-segments {
    display: grid;
    gap: 11px;
    margin-top: 15px;
}
.host-seg {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 15px 14px;
    border: 1px solid var(--tsk-line);
    border-left: 3px solid #b8860b;
    border-radius: 12px;
    background:
        linear-gradient(180deg, var(--tsk-card), var(--tsk-card-2));
    box-shadow: var(--tsk-shadow-sm);
}
.host-seg-no {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-top: 2px;
}
.host-seg-no b {
    font: 800 18px/1 var(--tsk-num);
    color: #8b1e3f;
    opacity: .82;
}
.host-seg-no small {
    font-size: 9px;
    letter-spacing: .06em;
    color: var(--tsk-faint);
    text-transform: uppercase;
}
.host-seg-main {
    min-width: 0;
}
.host-seg-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 7px;
}
.host-seg-title b {
    font-size: 13px;
    color: #7a1736;
}
.host-seg-title span {
    font-size: 10.5px;
    color: var(--tsk-faint);
}
:root[data-theme="dark"] .host-seg-title b {
    color: var(--tsk-brand-ink);
}
.host-seg textarea {
    width: 100%;
    min-height: 92px;
    resize: vertical;
    border: 1px solid var(--tsk-line);
    border-radius: 9px;
    background: var(--tsk-card);
    color: var(--tsk-ink);
    font: 500 13.5px/1.85 var(--tsk-font);
    padding: 10px 12px;
    outline: none;
    transition: .15s;
}
.host-seg textarea:focus {
    border-color: #b8860b;
    box-shadow: 0 0 0 3px rgba(184, 134, 11, .13);
}
.host-seg-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 10px;
    color: var(--tsk-faint);
}
.host-seg-foot button {
    border: 0;
    background: transparent;
    color: #8b1e3f;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.host-seg-foot button:hover {
    text-decoration: underline;
}
.host-tip-foot {
    margin-top: 13px;
    font-size: 11px;
    color: var(--tsk-faint);
    text-align: center;
}

/* ---------- 4. 场景说明 ---------- */
.host-sec-sub {
    margin-left: auto;
    font-size: 12px;
    color: var(--tsk-faint);
}
.host-scene-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 11px;
}
.host-scene-card {
    padding: 15px 16px;
    border: 1px solid var(--tsk-line);
    border-top: 3px solid #b8860b;
    border-radius: 12px;
    background: var(--tsk-card);
    box-shadow: var(--tsk-shadow-sm);
}
.host-scene-card-hd {
    display: flex;
    align-items: center;
    gap: 7px;
}
.host-scene-card-hd span {
    font-size: 16px;
}
.host-scene-card-hd b {
    font-size: 13.5px;
    color: var(--tsk-ink);
}
.host-scene-card p {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--tsk-sub);
    line-height: 1.72;
}
.host-scene-card small {
    display: block;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px dashed var(--tsk-line-2);
    font-size: 11px;
    line-height: 1.7;
    color: var(--tsk-faint);
}

/* ---------- 4.1 主持稿骨架 ---------- */
.host-structure {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 11px;
}
.host-structure-card {
    display: flex;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid var(--tsk-line);
    border-radius: 11px;
    background: var(--tsk-card);
    box-shadow: var(--tsk-shadow-sm);
    border-bottom: 3px solid #8b1e3f;
}
.host-structure-card > span {
    font: 800 17px/1 var(--tsk-num);
    color: #b8860b;
    opacity: .8;
    padding-top: 1px;
}
.host-structure-card b {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
}
.host-structure-card p {
    font-size: 12.5px;
    color: var(--tsk-sub);
    line-height: 1.74;
}

/* ---------- 4.2 硬规则 ---------- */
.host-rules {
    display: grid;
    gap: 9px;
}
.host-rules p {
    padding: 13px 16px;
    border-left: 3px solid #b8860b;
    border-radius: 0 10px 10px 0;
    background: var(--tsk-card);
    box-shadow: var(--tsk-shadow-sm);
    font-size: 13px;
    color: var(--tsk-sub);
    line-height: 1.8;
}
.host-rules b {
    color: var(--tsk-brand-ink);
}

/* ---------- 5. 建议卡 ---------- */
.host-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 11px;
}
.host-tip {
    display: flex;
    gap: 11px;
    padding: 14px 15px;
    border: 1px solid var(--tsk-line);
    border-radius: 11px;
    background: var(--tsk-card);
    box-shadow: var(--tsk-shadow-sm);
}
.host-tip > span {
    font: 800 16px/1 var(--tsk-num);
    color: #b8860b;
    opacity: .72;
    padding-top: 2px;
}
.host-tip b {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
}
.host-tip p {
    font-size: 12.5px;
    color: var(--tsk-sub);
    line-height: 1.75;
}

/* ---------- 6. 响应式 ---------- */
@media (max-width: 760px) {
    .host-fields {
        grid-template-columns: 1fr;
    }
    .host-scenes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .host-result-acts {
        width: 100%;
    }
    .host-seg {
        grid-template-columns: 1fr;
    }
    .host-seg-no {
        flex-direction: row;
        align-items: baseline;
        gap: 7px;
    }
}
@media (max-width: 520px) {
    .host-scenes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .host-count {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .host-count b {
        grid-column: 2;
        text-align: right;
    }
}

/* ---------- 7. 深色微调 ---------- */
:root[data-theme="dark"] .tsk.host {
    background: #17110d;
}
:root[data-theme="dark"] .host .tsk-chips span {
    background: #221a14;
    border-color: #3a2c22;
}
:root[data-theme="dark"] .host .tsk-kicker {
    background: rgba(224, 106, 141, .14);
    color: var(--tsk-brand-ink);
}
:root[data-theme="dark"] .host-seg-foot button {
    color: var(--tsk-brand-ink);
}

/* ---------- 8. 打印与减少动效 ---------- */
@media print {
    .host-panel,
    .host-result-hd,
    .host-seg-foot,
    .host-tip-foot,
    .tsk-sec,
    .tskb,
    .tsk-foot,
    .tsk-crumb-bar {
        display: none !important;
    }
    .tsk.host,
    .host-result {
        background: #fff;
        box-shadow: none;
        border: 0;
        padding: 0;
        margin: 0;
    }
    .host-seg {
        border: 0;
        border-bottom: 1px solid #ddd;
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
        background: #fff;
    }
    .host-seg textarea {
        border: 0;
        padding: 0;
        min-height: 0;
        height: auto;
        font-size: 13pt;
        line-height: 1.8;
        overflow: visible;
    }
}
@media (prefers-reduced-motion: reduce) {
    .host-scenes button,
    .host-seg textarea {
        transition: none;
    }
}