/* 产品路线图生成 · 战略室看板设计系统（前缀 prm-）
   浅色：冷白 + 蓝紫 + 青；深色：深石板 + 亮靛 + 亮青 */
.prm-page, .prm-modal, .ws-toast {
    --prm-bg: #f2f6fb; --prm-paper: #ffffff; --prm-ink: #16223a; --prm-sub: #65748d;
    --prm-brand: #4f46e5; --prm-brand-soft: #ecebfe; --prm-cyan: #0891b2; --prm-amber: #d97706;
    --prm-green: #17876a; --prm-red: #dc4b56; --prm-line: #dde5f0; --prm-fill: #f4f7fc;
    --prm-shadow: 0 10px 26px rgba(31,52,95,.09);
    --prm-font: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
:root[data-theme="dark"] .prm-page, :root[data-theme="dark"] .prm-modal, :root[data-theme="dark"] .ws-toast {
    --prm-bg: #0f1622; --prm-paper: #172233; --prm-ink: #e6ecf8; --prm-sub: #9cabc2;
    --prm-brand: #a5b4fc; --prm-brand-soft: #242f52; --prm-cyan: #67e8f9; --prm-amber: #fbbf5c;
    --prm-green: #5fd6ae; --prm-red: #f28b93; --prm-line: #2b3b52; --prm-fill: #1c293c;
    --prm-shadow: 0 14px 32px rgba(0,0,0,.34);
}
.prm-page { background: var(--prm-bg); color: var(--prm-ink); font-family: var(--prm-font);
    font-size: 14.5px; line-height: 1.75; padding-bottom: 56px; }
.prm-wrap { max-width: 1220px; margin: 0 auto; padding: 0 20px; }
.prm-page .detail-breadcrumb { padding: 18px 0 0; font-size: 13px; color: var(--prm-sub); }
.prm-page .detail-breadcrumb a { color: var(--prm-brand); text-decoration: none; }
.prm-page .detail-breadcrumb .sep { margin: 0 8px; }
.prm-page b { font-weight: 700; }
.prm-kicker { font-size: 11px; letter-spacing: .16em; color: var(--prm-cyan); text-transform: uppercase; }

/* 首屏 */
.prm-hero { display: grid; grid-template-columns: 1.55fr .7fr; gap: 22px; margin: 22px 0 24px; }
.prm-hero-copy { background: linear-gradient(120deg, var(--prm-brand) 0%, #3b6ee0 100%); color: #fff;
    border-radius: 12px; padding: 30px 32px; box-shadow: var(--prm-shadow); }
.prm-hero h1 { font-size: clamp(25px, 3vw, 35px); line-height: 1.35; margin: 10px 0 10px; }
.prm-sub { font-size: 14px; line-height: 1.95; color: rgba(255,255,255,.87); margin: 0 0 20px; max-width: 680px; }
.prm-sub b { color: #ffe08a; }
.prm-quick-add { display: flex; gap: 8px; flex-wrap: wrap; }
.prm-page input, .prm-page select, .prm-page textarea { font: inherit; color: var(--prm-ink); background: var(--prm-paper);
    border: 1px solid var(--prm-line); border-radius: 7px; padding: 9px 12px; outline: none; box-sizing: border-box; }
.prm-page input:focus, .prm-page select:focus, .prm-page textarea:focus { border-color: var(--prm-brand); }
.prm-quick-add input { flex: 1 1 260px; min-width: 0; }
.prm-quick-add select { width: 108px; }
.prm-btn { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--prm-line);
    background: var(--prm-paper); color: var(--prm-ink); border-radius: 7px; padding: 9px 15px; white-space: nowrap; }
.prm-btn:hover:not(:disabled) { border-color: var(--prm-brand); }
.prm-btn:disabled { opacity: .5; cursor: not-allowed; }
.prm-btn--main { background: var(--prm-ink); color: #fff; border-color: var(--prm-ink); }
.prm-btn--main:hover { background: var(--prm-brand); border-color: var(--prm-brand); }
.prm-btn--ai { background: var(--prm-cyan); color: #fff; border-color: var(--prm-cyan); }
.prm-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.prm-chip { font: inherit; font-size: 12px; cursor: pointer; color: #fff; background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.36); border-radius: 16px; padding: 4px 12px; }
.prm-chip:hover { background: rgba(255,255,255,.26); }
.prm-hero-stat { background: var(--prm-paper); border: 1px solid var(--prm-line); border-radius: 12px;
    padding: 18px 20px; box-shadow: var(--prm-shadow); }
.prm-stat-h { font-size: 10px; letter-spacing: .15em; color: var(--prm-sub); border-bottom: 1px solid var(--prm-line); padding-bottom: 9px; }
.prm-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.prm-stat-grid div { background: var(--prm-fill); border-radius: 8px; padding: 10px 12px; }
.prm-stat-grid b { display: block; font-size: 25px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.prm-stat-grid span { font-size: 11px; color: var(--prm-sub); }
.prm-stat-lanes { display: flex; flex-direction: column; gap: 7px; }
.prm-stat-lanes div { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--prm-sub); }
.prm-stat-lanes i { display: block; height: 7px; border-radius: 4px; background: var(--prm-brand); min-width: 4px; }

/* 看板 */
.prm-board { background: var(--prm-paper); border: 1px solid var(--prm-line); border-radius: 12px;
    padding: 18px 20px 22px; box-shadow: var(--prm-shadow); }
.prm-board-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    border-bottom: 1px solid var(--prm-line); padding-bottom: 12px; }
.prm-board-h b { font-size: 17px; margin-right: 10px; }
.prm-board-h input { width: 200px; font-size: 12px; padding: 5px 8px; }
.prm-board-h > span { font-size: 12px; color: var(--prm-sub); }
.prm-quarters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 18px; }
.prm-quarter { text-align: center; border: 1px dashed var(--prm-line); border-radius: 7px; padding: 7px;
    font-size: 12px; color: var(--prm-sub); background: var(--prm-fill); }
.prm-quarter b { display: block; font-size: 15px; color: var(--prm-ink); }
.prm-quarter.is-on { border-style: solid; border-color: var(--prm-brand); background: var(--prm-brand-soft); }
.prm-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.prm-lane { background: var(--prm-fill); border-radius: 9px; padding: 12px; min-width: 0; border-top: 4px solid var(--prm-brand); }
.prm-lane[data-lane="now"] { border-top-color: var(--prm-brand); }
.prm-lane[data-lane="next"] { border-top-color: var(--prm-cyan); }
.prm-lane[data-lane="later"] { border-top-color: var(--prm-amber); }
.prm-lane-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.prm-lane-h b { font-size: 14px; letter-spacing: .04em; }
.prm-lane-h span { font-size: 11px; color: var(--prm-sub); }
.prm-card { background: var(--prm-paper); border: 1px solid var(--prm-line); border-radius: 8px;
    padding: 11px 12px; margin-bottom: 9px; box-shadow: 0 2px 6px rgba(31,52,95,.05); min-width: 0; }
.prm-card-h { display: flex; align-items: flex-start; gap: 7px; }
.prm-card-h strong { flex: 1; font-size: 13.5px; line-height: 1.55; word-break: break-word; }
.prm-pill { font-size: 10px; padding: 1px 7px; border-radius: 10px; background: var(--prm-fill); color: var(--prm-sub); white-space: nowrap; }
.prm-pill.is-p0 { background: var(--prm-red); color: #fff; }
.prm-pill.is-q { background: var(--prm-brand-soft); color: var(--prm-brand); }
.prm-card .goal { font-size: 11.5px; color: var(--prm-sub); margin: 6px 0 0; word-break: break-word; }
.prm-card .meta { font-size: 11px; color: var(--prm-sub); margin-top: 7px; display: flex; gap: 8px; flex-wrap: wrap; }
.prm-progress { height: 5px; background: var(--prm-fill); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.prm-progress i { display: block; height: 100%; background: var(--prm-green); }
.prm-card .ops { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.prm-card .ops button { font: inherit; font-size: 10.5px; cursor: pointer; border: 1px solid var(--prm-line);
    background: var(--prm-paper); color: var(--prm-sub); border-radius: 5px; padding: 3px 7px; }
.prm-card .ops button:hover { border-color: var(--prm-brand); color: var(--prm-brand); }
.prm-lane-empty { font-size: 12px; color: var(--prm-sub); text-align: center; padding: 18px 6px; }

/* 表单与导出 */
.prm-panel { background: var(--prm-paper); border: 1px solid var(--prm-line); border-radius: 12px;
    padding: 18px 20px; margin-top: 18px; box-shadow: var(--prm-shadow); min-width: 0; }
.prm-panel-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    border-bottom: 1px solid var(--prm-line); padding-bottom: 10px; margin-bottom: 14px; }
.prm-panel-h b { font-size: 16px; }
.prm-panel-h span { font-size: 11.5px; color: var(--prm-sub); }
.prm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.prm-field { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--prm-sub); }
.prm-btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.prm-form-state { font-size: 11.5px; color: var(--prm-sub); }
.prm-err { color: var(--prm-red); font-size: 12.5px; min-height: 20px; margin: 8px 0 0; }
.prm-panel textarea { width: 100%; resize: vertical; font-size: 12px; margin-top: 12px; }
.prm-hint { font-size: 11.5px; color: var(--prm-sub); line-height: 1.8; margin: 8px 0 0; }
.prm-ai-out[hidden] { display: none !important; }
.prm-ai-out { margin-top: 14px; padding: 16px; background: var(--prm-brand-soft); border-radius: 8px;
    font-size: 13px; line-height: 1.95; white-space: pre-wrap; word-break: break-word; }
.prm-ai-out.is-err { background: var(--prm-fill); color: var(--prm-red); }

/* 弹窗：完成导出 / AI 复核后才出现 */
.prm-modal[hidden] { display: none !important; }
.prm-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
    background: rgba(14,22,38,.62); padding: 20px; }
.prm-modal-box { position: relative; width: min(450px, 100%); background: var(--prm-paper); color: var(--prm-ink);
    padding: 28px 30px; border-radius: 12px; border-top: 5px solid var(--prm-brand); box-shadow: 0 22px 54px rgba(0,0,0,.32); }
.prm-modal-x { position: absolute; right: 12px; top: 6px; border: 0; background: none; font-size: 24px; color: var(--prm-sub); cursor: pointer; }
.prm-modal-box h2 { margin: 8px 0 10px; font-size: 22px; }
.prm-modal-box p { font-size: 14px; color: var(--prm-sub); line-height: 1.9; }
.ws-toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 16px); z-index: 10000;
    background: var(--prm-ink); color: var(--prm-paper); padding: 10px 20px; border-radius: 7px;
    font-size: 13px; opacity: 0; pointer-events: none; transition: .25s; }
.ws-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ws-toast.is-err { background: var(--prm-red); color: #fff; }

@media (max-width: 980px) {
    .prm-hero { grid-template-columns: 1fr; }
    .prm-lanes { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .prm-wrap { padding: 0 12px; }
    .prm-hero-copy, .prm-board, .prm-panel { padding: 20px 14px; }
    .prm-quarters { grid-template-columns: repeat(2, 1fr); }
    .prm-quick-add select { flex: 1; }
}
@media print { .prm-hero-stat, .prm-editor, .prm-panel .prm-btn-row, .tskb, .prm-modal { display: none !important; } }

/* hero kicker + dark hero contrast fix */
.prm-hero .prm-kicker { color: #ffe08a; border-color: rgba(255,255,255,.5); }
:root[data-theme="dark"] .prm-hero-copy { background: linear-gradient(120deg, #273b66 0%, #1e3357 100%); }

/* dark button contrast fix */
:root[data-theme="dark"] .prm-btn--main { background: #a5b4fc; border-color: #a5b4fc; color: #101828; }
:root[data-theme="dark"] .prm-btn--ai { color: #0c1a12; }