/* teleprompter 在线提词器页(正式版源自 uidemo tool-teleprompter v2+v1 控制条, 前缀 tp-)
   两栏: 主栏(工作台+文档+FAQ) + 300px 右栏(widget 形态同 case-converter cc-col-side)
   品牌色走全站绿 #18816a(原型期蓝 #2563eb 已弃) */
.tp-page{background:#f6f7f9;min-height:60vh;padding:24px 0 64px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;color:#1f2937}
.tp-layout{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr;gap:22px}
.tp-col-main{min-width:0;display:flex;flex-direction:column}
.tp-col-side{display:flex;flex-direction:column;gap:16px}
@media (min-width:996px){
.tp-layout{grid-template-columns:minmax(0,1fr) 300px}
}

/* ---------- 面包屑 / 标题 ---------- */
.tp-crumb{font-size:13px;color:#6b7280;margin-bottom:12px}
.tp-crumb a{color:#6b7280;text-decoration:none}
.tp-crumb a:hover{color:#18816a}
.tp-crumb-sep{margin:0 7px;color:#d1d5db}
.tp-titlebox h1{font-size:1.35rem;font-weight:700;margin:0 0 6px;color:#111827}
.tp-titlebox p{font-size:.85rem;color:#6b7280;margin:0 0 18px;line-height:1.6}

/* ---------- 工作台(两栏等高, 底边齐平) ---------- */
.tp-workbench{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px}
.tp-wcolL,.tp-wcolR{display:flex;flex-direction:column;min-width:0}
.tp-wcolL .tp-panel{flex:1;display:flex;flex-direction:column}
.tp-wcolR .tp-panel:last-child{flex:1}
.tp-panel{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.03);margin-bottom:12px}
.tp-wcolL .tp-panel:last-child,.tp-wcolR .tp-panel:last-child{margin-bottom:0}
.tp-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.tp-panel-head h2{font-size:.95rem;font-weight:700;margin:0;color:#111827}
.tp-panel-sub{font-size:.74rem;color:#9ca3af}
.tp-in-label{font-size:.9rem;font-weight:600}
.tp-stat{font-size:.78rem;color:#6b7280}
.tp-stat b{color:#18816a}
.tp-textarea{flex:1;width:100%;box-sizing:border-box;min-height:420px;border:1px solid #d1d5db;border-radius:8px;padding:12px 14px;font-size:.92rem;line-height:1.75;color:#1f2937;resize:none;font-family:inherit;background:#fafafa}
.tp-textarea:focus{outline:2px solid rgba(24,129,106,.35);border-color:#18816a;background:#fff}
.tp-editor-foot{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap}
.tp-seglist{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0;max-height:30px;overflow:hidden}
.tp-seg{font-size:.72rem;color:#6b7280;background:#f3f4f6;border-radius:999px;padding:3px 10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-input-ops{display:flex;align-items:center;gap:8px;margin-left:auto}
.tp-mini{padding:4px 12px;border:1px solid #d1d5db;border-radius:999px;background:#fff;cursor:pointer;font-size:.74rem;color:#374151;transition:all .15s}
.tp-mini:hover{border-color:#18816a;color:#18816a}
.tp-btn-primary{width:100%;background:#18816a;color:#fff;border:none;border-radius:8px;padding:12px 20px;font-size:.95rem;font-weight:600;cursor:pointer;box-shadow:0 1px 3px rgba(24,129,106,.35)}
.tp-btn-primary:hover{background:#116a56}

/* ---------- 预览窗 ---------- */
.tp-preview{position:relative;height:150px;border-radius:8px;overflow:hidden;background:#0f172a}
.tp-pv-scroll{position:absolute;inset:0;overflow:hidden}
.tp-pv-content{will-change:transform;text-align:center;font-weight:600;color:#fff}
.tp-pv-content p{margin:0 0 1em;white-space:pre-wrap}
.tp-pv-guide{position:absolute;left:0;right:0;top:33%;z-index:5;pointer-events:none}
.tp-pv-guide i{display:block;height:1px;background:linear-gradient(90deg,transparent,#f59e0b 15%,#f59e0b 85%,transparent)}
.tp-pv-guide-arrow::before{content:"▸";position:absolute;left:6px;top:50%;transform:translateY(-56%);color:#f59e0b;font-size:9px}
.tp-pv-guide-arrow::after{content:"◂";position:absolute;right:6px;top:50%;transform:translateY(-56%);color:#f59e0b;font-size:9px}
.tp-pv-guide-none{display:none}
.tp-preview.tp-pv-white{background:#fff}
.tp-preview.tp-pv-white .tp-pv-content{color:#111827}
.tp-preview.tp-pv-green{background:#00b140}
.tp-preview.tp-pv-green .tp-pv-content{color:#022d13}

/* ---------- 参数区 ---------- */
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.tp-compact{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-top:12px}
.tp-ctl-name{display:flex;justify-content:space-between;font-size:.78rem;color:#374151;margin-bottom:4px}
.tp-ctl-name b{color:#18816a;font-variant-numeric:tabular-nums}
.tp-ctl input[type=range]{width:100%;accent-color:#18816a}
.tp-pills{display:flex;gap:6px;flex-wrap:wrap}
.tp-pill{font-size:.74rem;padding:4px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#6b7280;cursor:pointer;transition:all .15s}
.tp-pill:hover{border-color:#5eceb4}
.tp-pill-on{background:#f0faf7;border-color:#18816a;color:#116a56;font-weight:600}
.tp-mirrorrow{display:flex;gap:14px;flex-wrap:wrap;padding-top:2px}
.tp-chk{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#374151;cursor:pointer}
.tp-chk input{accent-color:#18816a;width:15px;height:15px}

/* ---------- 文档区(md content_html, 形态同 cc-doc) ---------- */
.tp-doc{margin-top:28px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:24px}
.tp-doc h3{font-size:1.05rem;font-weight:700;margin:0 0 10px;color:#111827}
.tp-doc h2{font-size:1.02rem;font-weight:700;color:#111827;margin:22px 0 8px}
.tp-doc h2:first-child{margin-top:0}
.tp-doc p{font-size:.85rem;color:#4b5563;line-height:1.7;margin:0 0 12px}
.tp-doc ul,.tp-doc ol{margin:0 0 12px;padding-left:20px}
.tp-doc li{font-size:.85rem;color:#4b5563;line-height:1.7}
.tp-doc a{color:#18816a;text-decoration:none}
.tp-doc a:hover{text-decoration:underline}
.tp-doc code{background:#f0faf7;color:#116a56;padding:1px 6px;border-radius:4px;font-size:.8rem}
.tp-doc table{width:100%;border-collapse:collapse;font-size:.82rem;margin:0 0 14px}
.tp-doc th{background:#f6f7f9;text-align:left;padding:8px 10px;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb}
.tp-doc td{padding:8px 10px;border-bottom:1px solid #f0f1f3;color:#4b5563;line-height:1.55;vertical-align:top}
.tp-doc blockquote{margin:0 0 12px;padding:8px 14px;border-left:3px solid #18816a;background:#f0faf7;color:#116a56;font-size:.85rem}

/* ---------- 右栏 widget(形态同 cc-col-side) ---------- */
.tp-widget{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px}
.tp-widget-title{font-size:.95rem;font-weight:700;color:#111827;margin:0 0 12px}
.tp-keys{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tp-keys li{display:flex;align-items:center;gap:10px;font-size:.78rem;color:#4b5563}
.tp-kbd{flex:none;min-width:52px;text-align:center;background:#f2f3f5;border:1px solid #e5e7eb;border-bottom-width:2px;border-radius:6px;padding:3px 8px;font-size:.72rem;font-weight:600;color:#1c1e21;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.tp-side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tp-side-list li{display:flex;gap:10px;align-items:flex-start}
.tp-side-ico{flex:none;width:28px;height:28px;border-radius:7px;margin-top:1px;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.tp-side-list b{display:block;font-size:.86rem;font-weight:600;color:#111827}
.tp-side-list li>div>span{display:block;font-size:.76rem;color:#6b7280;margin-top:2px;line-height:1.5}
.tp-tool-link{display:flex;align-items:center;gap:10px;padding:8px 6px;margin:0 -6px;border-radius:9px;text-decoration:none;transition:background .15s}
.tp-tool-link:hover{background:rgba(0,0,0,.05)}
.tp-tool-link b{display:block;font-size:.86rem;color:#111827;font-weight:600}
.tp-tool-link div>span{display:block;font-size:.76rem;color:#6b7280;margin-top:1px}
.tp-tool-ico{flex:none;width:32px;height:32px;border-radius:8px;background:rgba(24,129,106,.1);color:#116a56;font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.tp-tool-ico-zh{background:#fef3c7;color:#b45309}
.tp-tool-ico-all{background:#eef2ff;color:#4338ca}
.tp-widget-priv{background:#ecfdf5;border-color:#a7f3d0}
.tp-widget-priv b{font-size:.86rem;color:#065f46}
.tp-widget-priv p{font-size:.78rem;color:#047857;line-height:1.65;margin:6px 0 0}

/* ---------- 全屏提词层 ---------- */
.tp-overlay{display:none;position:fixed;inset:0;z-index:9999;background:#0f172a;overflow:hidden}
.tp-overlay.tp-on{display:block}
.tp-progress{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.12);z-index:20}
.tp-progress i{display:block;height:100%;width:0;background:#34d399;transition:width .2s linear}
.tp-stage{position:absolute;inset:0;overflow:hidden}
.tp-content{will-change:transform;font-weight:600;line-height:1.6;text-align:center;margin:0 auto;padding:0 16px 18vh;color:#fff}
.tp-content p{margin:0 0 1em;white-space:pre-wrap}
.tp-fsguide{position:absolute;left:0;right:0;top:33%;z-index:10;pointer-events:none}
.tp-fsguide i{display:block;height:2px;background:linear-gradient(90deg,transparent,#f59e0b 15%,#f59e0b 85%,transparent);box-shadow:0 0 12px rgba(245,158,11,.55)}
.tp-fsguide-arrow::before{content:"▶";position:absolute;left:3vw;top:50%;transform:translateY(-58%);color:#f59e0b;font-size:18px}
.tp-fsguide-arrow::after{content:"◀";position:absolute;right:3vw;top:50%;transform:translateY(-58%);color:#f59e0b;font-size:18px}
.tp-fsguide-none{display:none}
.tp-countdown{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:120px;font-weight:700;color:#fff;background:rgba(10,15,25,.92);z-index:30}
.tp-countdown.tp-show{display:flex}
.tp-ctrlbar{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;background:rgba(15,23,42,.88);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 14px;z-index:25;max-width:94vw}
.tp-cbtn{background:rgba(255,255,255,.08);color:#e5e7eb;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:7px 12px;font-size:.8rem;cursor:pointer;white-space:nowrap}
.tp-cbtn:hover{background:rgba(255,255,255,.18)}
.tp-cbtn-play{background:#18816a;border-color:#18816a;font-weight:600;min-width:88px}
.tp-cbtn-play:hover{background:#116a56}
.tp-cbtn-exit:hover{background:rgba(239,68,68,.3);border-color:rgba(239,68,68,.5)}
.tp-cgroup{display:flex;align-items:center;gap:6px}
.tp-clabel{font-size:.72rem;color:#9ca3af}
.tp-cval{color:#fff;font-size:.8rem;min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
/* 全屏主题 */
.tp-overlay.tp-o-white{background:#fff}
.tp-overlay.tp-o-white .tp-content{color:#111827}
.tp-overlay.tp-o-white .tp-ctrlbar{background:rgba(255,255,255,.9);border-color:rgba(0,0,0,.1)}
.tp-overlay.tp-o-white .tp-cbtn{color:#374151;background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.12)}
.tp-overlay.tp-o-white .tp-cbtn:hover{background:rgba(0,0,0,.1)}
.tp-overlay.tp-o-white .tp-cval{color:#111827}
.tp-overlay.tp-o-white .tp-clabel{color:#6b7280}
.tp-overlay.tp-o-green{background:#00b140}
.tp-overlay.tp-o-green .tp-content{color:#022d13}

/* ---------- 响应式 ---------- */
@media (max-width:860px){
.tp-workbench{grid-template-columns:1fr}
.tp-textarea{min-height:300px}
}
@media (max-width:520px){
.tp-grid,.tp-compact{grid-template-columns:1fr}
.tp-countdown{font-size:80px}
}