/*!
 * 追剧表 · drama-tracker-table
 * 独立设计系统「放映排期板」：影院米 + 深紫 + 霓虹粉 + 荧黄
 * 版式：4 周周历首屏 / 左窄录入表单 / 右宽进度卡片与日历网格 / 本地清单
 * 浮层共享变量作用域；深浅主题跟随导航 #themeToggle。
 */
.dtt-page, .dtt-modal, .dtt-sheet, .dtt-toast {
    --dtt-bg: #f6f2e9;
    --dtt-bg2: #ede6d9;
    --dtt-card: #fffdf7;
    --dtt-line: #e2d8c6;
    --dtt-line2: #c9b99c;
    --dtt-ink: #3c2a56;
    --dtt-ink2: #6a587c;
    --dtt-ink3: #94879f;
    --dtt-purple: #4a2f6f;
    --dtt-purple-soft: rgba(74, 47, 111, .10);
    --dtt-pink: #c03d72;
    --dtt-pink-soft: rgba(192, 61, 114, .12);
    --dtt-yellow: #a8791b;
    --dtt-yellow-soft: rgba(168, 121, 27, .14);
    --dtt-shadow: 0 22px 46px -30px rgba(60, 42, 86, .5);
    --dtt-shadow-s: 0 10px 22px -16px rgba(60, 42, 86, .45);
    --dtt-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --dtt-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
:root[data-theme="dark"] .dtt-page,
:root[data-theme="dark"] .dtt-modal,
:root[data-theme="dark"] .dtt-sheet,
:root[data-theme="dark"] .dtt-toast {
    --dtt-bg: #15101d;
    --dtt-bg2: #1d1629;
    --dtt-card: #241b33;
    --dtt-line: #372a4b;
    --dtt-line2: #4c3a65;
    --dtt-ink: #f1e9fa;
    --dtt-ink2: #c9b8dc;
    --dtt-ink3: #9582ab;
    --dtt-purple: #b79ae8;
    --dtt-purple-soft: rgba(183, 154, 232, .15);
    --dtt-pink: #f07fb0;
    --dtt-pink-soft: rgba(240, 127, 176, .15);
    --dtt-yellow: #f2d27a;
    --dtt-yellow-soft: rgba(242, 210, 122, .15);
    --dtt-shadow: 0 22px 46px -28px rgba(0, 0, 0, .88);
    --dtt-shadow-s: 0 10px 22px -14px rgba(0, 0, 0, .78);
}
.dtt-page {
    background:
        radial-gradient(860px 410px at 4% -8%, var(--dtt-pink-soft), transparent 62%),
        radial-gradient(700px 380px at 100% 2%, var(--dtt-yellow-soft), transparent 60%),
        var(--dtt-bg);
    color: var(--dtt-ink); font-family: var(--dtt-sans); font-size: 15px; line-height: 1.85; min-height: 60vh;
}
.dtt-page *, .dtt-page *::before, .dtt-page *::after, .dtt-modal *, .dtt-sheet * { box-sizing: border-box; }
.dtt-page b, .dtt-page strong { color: var(--dtt-pink); font-weight: 800; }
.dtt-wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 12px; }
.dtt-page .detail-breadcrumb { margin: 0 0 16px; font-size: 13px; color: var(--dtt-ink2); }
.dtt-page .detail-breadcrumb a { color: var(--dtt-yellow); text-decoration: none; }
.dtt-page .detail-breadcrumb .sep { margin: 0 8px; color: var(--dtt-ink3); }

/* 首屏 */
.dtt-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 26px; padding: 28px 30px 24px; border-radius: 22px; border: 1.5px solid var(--dtt-line); background: linear-gradient(145deg, var(--dtt-card) 0%, var(--dtt-bg2) 100%); box-shadow: var(--dtt-shadow); }
.dtt-kicker { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--dtt-pink); background: var(--dtt-pink-soft); border: 1px solid var(--dtt-line); }
.dtt-hero h1 { font-size: clamp(26px, 3.3vw, 38px); font-weight: 800; line-height: 1.32; margin: 13px 0 8px; }
.dtt-sub { margin: 0; color: var(--dtt-ink2); font-size: 15px; line-height: 1.9; max-width: 610px; }
.dtt-sub b { color: var(--dtt-pink); }
.dtt-facts { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.dtt-facts > div { flex: 1 1 120px; padding: 10px 14px; border-radius: 12px; background: var(--dtt-card); border: 1px solid var(--dtt-line); box-shadow: var(--dtt-shadow-s); }
.dtt-facts b { display: block; font-family: var(--dtt-mono); font-size: 20px; line-height: 1.3; color: var(--dtt-purple); }
.dtt-facts span { font-size: 12px; color: var(--dtt-ink3); }
.dtt-quick { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.dtt-quick > span { font-size: 12.5px; color: var(--dtt-ink3); }
.dtt-cta { padding: 8px 14px; border-radius: 9px; border: 1.5px solid var(--dtt-line2); background: var(--dtt-card); color: var(--dtt-ink2); font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--dtt-sans); transition: .16s; }
.dtt-cta:hover { border-color: var(--dtt-pink); color: var(--dtt-pink); }
.dtt-cta--go { border-radius: 999px; border-color: var(--dtt-yellow); color: var(--dtt-yellow); }
.dtt-cta--go:hover { background: var(--dtt-yellow); color: #fff; }

/* 周历预览 */
.dtt-hero-side { padding: 14px; border-radius: 16px; background: var(--dtt-bg2); border: 1px dashed var(--dtt-line2); }
.dtt-mini-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.dtt-mini-head b { font-size: 14px; }
.dtt-mini-head span { font-size: 11px; color: var(--dtt-ink3); font-family: var(--dtt-mono); }
.dtt-mini-week, .dtt-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.dtt-mini-week span, .dtt-cal-week span { text-align: center; font-size: 11px; color: var(--dtt-ink3); }
.dtt-mini-grid, .dtt-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dtt-mini-cell, .dtt-cal-cell { min-height: 34px; border-radius: 7px; border: 1px solid var(--dtt-line); background: var(--dtt-card); padding: 4px 3px; text-align: center; }
.dtt-mini-cell b, .dtt-cal-cell b { display: block; font-family: var(--dtt-mono); font-size: 11px; color: var(--dtt-ink2); }
.dtt-mini-cell i, .dtt-cal-cell i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dtt-pink); margin: 2px 1px 0; }
.dtt-mini-cell.is-hit, .dtt-cal-cell.is-hit { background: var(--dtt-pink-soft); border-color: var(--dtt-pink); }
.dtt-mini-cell.is-clash, .dtt-cal-cell.is-clash { background: var(--dtt-yellow-soft); border-color: var(--dtt-yellow); }
.dtt-cal-cell { min-height: 56px; cursor: default; }
.dtt-cal-cell small { display: block; font-size: 10px; color: var(--dtt-ink3); line-height: 1.3; }
.dtt-mini-cap { margin: 8px 0 0; font-size: 11px; color: var(--dtt-ink3); text-align: center; }

/* 主体 */
.dtt-body { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 22px; margin-top: 22px; align-items: start; }
.dtt-body > * { min-width: 0; }
.dtt-form, .dtt-result { background: var(--dtt-card); border: 1.5px solid var(--dtt-line); border-radius: 18px; padding: 20px 22px 22px; box-shadow: var(--dtt-shadow-s); }
.dtt-form { border-left: 4px solid var(--dtt-pink); }
.dtt-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dtt-h > span { font-family: var(--dtt-mono); font-size: 12px; color: var(--dtt-yellow); border: 1px solid var(--dtt-yellow-soft); padding: 2px 7px; border-radius: 6px; }
.dtt-h h2 { margin: 0; font-size: 17.5px; font-weight: 800; }
.dtt-field { margin-bottom: 13px; }
.dtt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dtt-label { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.dtt-label small { font-size: 11px; color: var(--dtt-ink3); font-weight: 400; }
.dtt-select, .dtt-input { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1.5px solid var(--dtt-line2); background: var(--dtt-bg2); color: var(--dtt-ink); font-size: 14px; outline: none; font-family: var(--dtt-sans); }
.dtt-input { font-family: var(--dtt-mono); }
.dtt-select:focus, .dtt-input:focus { border-color: var(--dtt-pink); box-shadow: 0 0 0 3px var(--dtt-pink-soft); }
.dtt-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dtt-day { padding: 6px 0; border-radius: 7px; border: 1.5px solid var(--dtt-line); background: var(--dtt-bg2); color: var(--dtt-ink2); font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: var(--dtt-sans); }
.dtt-day.is-on { background: var(--dtt-purple); border-color: var(--dtt-purple); color: #fff; }
:root[data-theme="dark"] .dtt-day.is-on { color: #15101d; }
.dtt-err { margin: 0 0 8px; font-size: 12px; color: var(--dtt-pink); }
.dtt-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.dtt-btn { padding: 9px 14px; border-radius: 9px; border: 1.5px solid var(--dtt-line2); background: var(--dtt-card); color: var(--dtt-ink2); font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--dtt-sans); transition: .15s; }
.dtt-btn:hover { border-color: var(--dtt-pink); color: var(--dtt-pink); }
.dtt-btn--main { background: var(--dtt-pink); border-color: var(--dtt-pink); color: #fff; flex: 1 1 100%; }
.dtt-btn--main:hover { color: #fff; filter: brightness(1.1); }
:root[data-theme="dark"] .dtt-btn--main { color: #15101d; }
.dtt-btn--sm { padding: 6px 11px; font-size: 12px; }
.dtt-local { margin: 12px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--dtt-ink3); }

/* 追剧卡片 */
.dtt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dtt-card { padding: 13px 14px; border-radius: 12px; background: var(--dtt-bg2); border: 1px solid var(--dtt-line); }
.dtt-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dtt-card-top b { font-size: 14.5px; color: var(--dtt-ink); word-break: break-all; }
.dtt-card-top span { font-family: var(--dtt-mono); font-size: 13px; color: var(--dtt-pink); }
.dtt-bar { height: 9px; border-radius: 999px; background: var(--dtt-card); border: 1px solid var(--dtt-line); overflow: hidden; margin: 9px 0 7px; }
.dtt-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--dtt-purple), var(--dtt-pink)); border-radius: 999px; transition: width .35s; }
.dtt-card-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--dtt-ink2); }
.dtt-empty { grid-column: 1 / -1; padding: 18px; border-radius: 11px; background: var(--dtt-bg2); border: 1px dashed var(--dtt-line2); font-size: 13px; color: var(--dtt-ink2); text-align: center; }
.dtt-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 18px 0 9px; flex-wrap: wrap; }
.dtt-block-head b { font-size: 15.5px; font-weight: 800; }
.dtt-block-head span { font-size: 11.5px; color: var(--dtt-ink3); }
.dtt-cal-note { margin: 8px 0 0; font-size: 11.5px; color: var(--dtt-ink3); }
.dtt-scroll { overflow-x: auto; }
.dtt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dtt-table th { text-align: left; padding: 8px 9px; background: var(--dtt-bg2); color: var(--dtt-ink3); font-weight: 700; border-bottom: 1.5px solid var(--dtt-line2); white-space: nowrap; }
.dtt-table td { padding: 8px 9px; border-bottom: 1px solid var(--dtt-line); color: var(--dtt-ink2); }
.dtt-table .dtt-mini { padding: 3px 8px; font-size: 11px; border-radius: 6px; border: 1px solid var(--dtt-line2); background: var(--dtt-card); color: var(--dtt-pink); cursor: pointer; }
.dtt-table input.dtt-inline { width: 62px; padding: 3px 5px; border-radius: 6px; border: 1px solid var(--dtt-line); background: var(--dtt-bg2); color: var(--dtt-ink); font-size: 12px; font-family: var(--dtt-mono); }
.dtt-table input.dtt-memo { width: 100%; min-width: 80px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--dtt-line); background: var(--dtt-bg2); color: var(--dtt-ink); font-size: 12px; }
.dtt-memo-view { display: block; font-size: 11px; color: var(--dtt-ink3); word-break: break-all; }
.dtt-tip { margin: 8px 0 0; font-size: 11.5px; color: var(--dtt-ink3); }
.dtt-batch-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dtt-batch-head b { font-size: 15.5px; font-weight: 800; }
.dtt-batch-head span { font-size: 11.5px; color: var(--dtt-ink3); }
.dtt-batch-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* 导读 */
.dtt-guide { margin: 22px 0 6px; padding: 20px 24px; border-radius: 18px; background: var(--dtt-card); border: 1.5px solid var(--dtt-line); }
.dtt-guide h2 { margin: 0 0 14px; font-size: 19px; font-weight: 800; }
.dtt-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dtt-guide article { padding: 12px 14px; border-radius: 12px; background: var(--dtt-bg2); border: 1px solid var(--dtt-line); }
.dtt-guide article > span { font-family: var(--dtt-mono); font-size: 12px; color: var(--dtt-yellow); font-weight: 700; }
.dtt-guide h3 { margin: 3px 0 5px; font-size: 15px; font-weight: 800; }
.dtt-guide p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--dtt-ink2); }

/* 浮层 */
.dtt-modal[hidden] { display: none !important; }
.dtt-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(24, 14, 32, .66); backdrop-filter: blur(3px); font-family: var(--dtt-sans); color: var(--dtt-ink); }
.dtt-sheet { width: min(460px, 100%); padding: 24px; border-radius: 18px; background: var(--dtt-card); border: 1.5px solid var(--dtt-line); box-shadow: var(--dtt-shadow); }
.dtt-sheet h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.dtt-sheet p { margin: 0 0 12px; font-size: 13.5px; color: var(--dtt-ink2); line-height: 1.8; }
.dtt-sheet code { display: block; padding: 10px 12px; border-radius: 9px; background: var(--dtt-bg2); border: 1px dashed var(--dtt-line2); font-family: var(--dtt-mono); font-size: 11.5px; word-break: break-all; color: var(--dtt-pink); max-height: 110px; overflow: auto; }
.dtt-sheet-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.dtt-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px); z-index: 9500; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--dtt-ink); color: var(--dtt-card); opacity: 0; pointer-events: none; transition: .25s; font-family: var(--dtt-sans); }
.dtt-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 980px) {
    .dtt-hero, .dtt-body { grid-template-columns: minmax(0, 1fr); }
    .dtt-guide-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .dtt-wrap { padding: 14px 12px 8px; }
    .dtt-hero { padding: 20px 16px; }
    .dtt-form, .dtt-result, .dtt-guide { padding: 16px 14px; }
    .dtt-cards { grid-template-columns: minmax(0, 1fr); }
    .dtt-cal-cell { min-height: 44px; }
    .dtt-table { min-width: 0; }
    .dtt-table th, .dtt-table td { padding: 6px 5px; font-size: 11.5px; }
}


/* 390 窄屏：公共「下一步推荐」卡片的 grid item 默认 min-width:auto 会被长文本撑开，
   这里做页面级兼容修复（本 CSS 只在本页加载，不影响站内其它页面）。 */
@media (max-width: 640px) {
    .tool-rec-grid > * { min-width: 0; }
    .tool-rec-item { min-width: 0; max-width: 100%; }
    .tool-rec-body b, .tool-rec-body small { white-space: normal; word-break: break-word; }
}