/* 串口调试工具（/tools/serial）—— 页面独享样式，模板直引（不进 assets_frontend）。
   控制台/绘图区为深色工作台（品牌规范禁纯黑：用 #16181D）；其余面板走品牌 tokens。 */

.cc-serialtool { padding-bottom: 40px; }
.cc-serialtool .cct-wrap { padding-top: 12px; }
.cc-serialtool .cct-boot { padding: 48px 0; color: var(--cc-text-2, #828282); }

/* ---- 兼容性横幅 ---- */
.cct-banner {
    display: none;
    border: 1px solid var(--cc-warn, #F0B429);
    background: #FFFDF5;
    color: var(--cc-text, #505050);
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 10px;
    line-height: 1.7;
}
.cct-banner.show { display: block; }

/* ---- 标签栏 ---- */
.cct-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cct-tab {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--cc-line, #E0E0E0); border-radius: 4px;
    background: #fff; padding: 6px 10px; font-size: 13px; color: var(--cc-text, #505050);
    cursor: pointer; max-width: 260px; user-select: none;
}
.cct-tab.on { border-color: var(--cc-red, #AA1615); color: var(--cc-red, #AA1615); background: var(--cc-red-bg, #FEF0F0); }
.cct-tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc-text-3, #B4B4B4); flex: 0 0 auto; }
.cct-tab.connected .dot { background: var(--cc-ok, #4CAF50); }
.cct-tab.error .dot { background: var(--cc-err, #F44336); }
.cct-tab .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cct-tab .cct-tab-mode { color: var(--cc-text-3, #B4B4B4); font-size: 11px; }
.cct-tab .x { border: none; background: none; color: var(--cc-text-3, #B4B4B4); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; }
.cct-tab .x:hover { color: var(--cc-err, #F44336); }
.cct-tab-add {
    border: 1px dashed var(--cc-line, #E0E0E0); border-radius: 4px; background: #fff;
    width: 32px; height: 32px; font-size: 16px; color: var(--cc-text-2, #828282); cursor: pointer;
}
.cct-tab-add:hover { border-color: var(--cc-red, #AA1615); color: var(--cc-red, #AA1615); }
.cct-tabs-right { margin-left: auto; display: flex; gap: 8px; }

/* ---- 通用小组件 ---- */
.cct-btn {
    border: 1px solid var(--cc-line, #E0E0E0); border-radius: 4px; background: #fff;
    color: var(--cc-text, #505050); padding: 6px 14px; font-size: 13px; cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}
.cct-btn:hover { border-color: var(--cc-red, #AA1615); color: var(--cc-red, #AA1615); }
.cct-btn.primary { background: var(--cc-red, #AA1615); border-color: var(--cc-red, #AA1615); color: #fff; }
.cct-btn.primary:hover { background: var(--cc-red-dark, #8B1211); color: #fff; }
.cct-btn.small { padding: 3px 10px; font-size: 12px; }
.cct-btn.on { background: var(--cc-red-bg, #FEF0F0); border-color: var(--cc-red, #AA1615); color: var(--cc-red, #AA1615); }
.cct-btn:disabled { opacity: .45; cursor: not-allowed; }
.cct-select, .cct-input {
    border: 1px solid var(--cc-line, #E0E0E0); border-radius: 4px; background: #fff;
    color: var(--cc-text, #505050); font-size: 13px; padding: 5px 8px;
}
.cct-select:focus, .cct-input:focus { outline: none; border-color: var(--cc-blue, #0078D4); }

/* ---- 布局骨架（19.0.1.14.0，参考串口调试助手）：左设置栏 + 右主区 ---- */
.cct-hint { font-size: 11.5px; color: var(--cc-text-3, #B4B4B4); }
.cct-layout { display: flex; gap: 12px; align-items: flex-start; }
.cct-sidebar {
    flex: 0 0 218px; max-width: 218px; display: flex; flex-direction: column; gap: 10px;
}
.cct-sbg { border: 1px solid var(--cc-line, #E0E0E0); border-radius: 4px; background: #fff; padding: 8px 10px; }
.cct-sbg.dim { opacity: .55; }
.cct-sbg-t { font-size: 11px; font-weight: 600; color: var(--cc-text-3, #B4B4B4); letter-spacing: .04em; margin-bottom: 6px; }
.cct-sb-connect { width: 100%; margin-bottom: 6px; }
.cct-sbg .cct-btn[data-op="choose"] { width: 100%; margin-bottom: 6px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.cct-sbrow { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.cct-sbrow > label { font-size: 12px; color: var(--cc-text-2, #828282); flex: 0 0 52px; }
.cct-sbctl { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.cct-sbctl .cct-select, .cct-sbctl .cct-input { width: 100%; min-width: 0; padding: 4px 6px; font-size: 12.5px; }
.cct-sbbtns { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.cct-fontlbl { flex: 0 0 auto; }
.cct-chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cc-text, #505050); cursor: pointer; padding: 3px 0; user-select: none; }
.cct-chk input { accent-color: var(--cc-red, #AA1615); margin: 0; }
.cct-sig { display: flex; gap: 6px; }
.cct-sig-st { font-size: 11px; color: var(--cc-text-3, #B4B4B4); margin-top: 6px; font-family: Consolas, monospace; }
.cct-peri { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.cct-peri .cct-input { width: 64px; min-width: 64px; padding: 4px 6px; }
.cct-peri .cct-chk { padding: 0; }
.cct-sb-hint { line-height: 1.6; margin: 0; }

.cct-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cct-debug-row { display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.cct-debug-row .cct-debug { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.cct-atpanel { flex: 0 0 240px; max-width: 240px; align-self: stretch; display: flex; flex-direction: column; }
.cct-atpanel.folded { flex: 0 0 36px; max-width: 36px; cursor: pointer; }
.cct-atpanel.folded .cct-at-search, .cct-atpanel.folded .cct-at-list { display: none; }
.cct-atpanel .cct-panel-h { flex-wrap: nowrap; overflow: hidden; }
.cct-atpanel.folded .cct-panel-h { justify-content: center; border-bottom: none; }
.cct-atpanel.folded .cct-panel-h > span:first-child,
.cct-atpanel.folded .cct-panel-h .ops [data-op="at-add"] { display: none; }   /* 折叠态只留展开箭头（无残留） */
.cct-debug .cct-console { height: 38vh; min-height: 220px; }
.cct-term-wide .cct-console { height: 58vh; }
.cct-plot-main { height: 46vh; }
.cct-plot-wrap { margin-top: 0; }
/* 绘图面板头控件等高（select 与 button 统一 26px，2026-10-25 反馈⑥） */
.cct-plot-wrap .cct-panel-h .ops .cct-select,
.cct-plot-wrap .cct-panel-h .ops .cct-btn {
    height: 26px; padding-top: 2px; padding-bottom: 2px; line-height: 1.2; box-sizing: border-box; vertical-align: middle;
}
.cct-cloud { align-self: center; }
.cct-mini-in { border: 1px solid var(--cc-line, #E0E0E0); border-radius: 3px; font-size: 12px; padding: 2px 4px; width: 64px; }
@media (max-width: 991.98px) {
    .cct-layout { flex-direction: column; }
    .cct-sidebar { flex: 1 1 auto; max-width: none; flex-direction: row; flex-wrap: wrap; }
    .cct-sidebar .cct-sbg { flex: 1 1 240px; }
    .cct-sb-hint { display: none; }
    .cct-debug-row { flex-direction: column; }
    .cct-atpanel { flex: 1 1 auto; max-width: none; }
}

/* ---- 全屏：白底（浏览器全屏默认黑底反制，2026-10-25 反馈④） ---- */
#cc_serial_root:fullscreen { background: #fff; }
#cc_serial_root:-webkit-full-screen { background: #fff; }
#cc_serial_root:fullscreen .cct-app,
#cc_serial_root:-webkit-full-screen .cct-app { background: #fff; padding: 8px 16px 24px; }

/* ---- 发送区（调试模式：接收终端下方，参考串口助手） ---- */
.cct-sendarea { display: flex; flex-direction: column; border: 1px solid var(--cc-line, #E0E0E0); border-top: none; border-radius: 0 0 4px 4px; background: #fff; }
.cct-sendta {
    border: none; outline: none; resize: vertical; min-height: 58px; max-height: 200px;
    padding: 8px 10px; font-family: Consolas, 'Courier New', monospace; font-size: 12.5px;
    color: var(--cc-text, #505050); background: #fff; border-bottom: 1px solid var(--cc-line, #E0E0E0);
}
.cct-sendops { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.cct-sendops .cct-btn.primary { margin-left: auto; }

.cct-panel { border: 1px solid var(--cc-line, #E0E0E0); border-radius: 4px; background: #fff; display: flex; flex-direction: column; min-width: 0; }
.cct-panel-h {
    padding: 8px 12px; border-bottom: 1px solid var(--cc-line, #E0E0E0);
    font-size: 13px; font-weight: 600; color: var(--cc-text, #505050);
    display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap;
}
.cct-panel-h .ops { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ---- 控制台（深色） ---- */
.cct-console {
    background: #16181D; border-radius: 0 0 4px 4px;
    font-family: Consolas, 'Courier New', 'JetBrains Mono', monospace;
    font-size: 12.5px; line-height: 1.55;
    height: 44vh; min-height: 260px; overflow-y: auto; padding: 8px 10px;
    position: relative; user-select: text;
}
.cct-line { white-space: pre-wrap; word-break: break-all; }
.cct-line .ts { color: #5C616B; margin-right: 8px; user-select: none; }
.cct-line .tag { color: #5C616B; margin-right: 6px; }
.cct-rx  { color: #6BCB77; }
.cct-tx  { color: #5AA7E8; }
.cct-info{ color: #C9A227; }
.cct-err { color: #E57373; }
.cct-atok { color: #4CAF50; font-weight: 700; }
.cct-aterr{ color: #EF5350; font-weight: 700; }
.cct-atdata { color: #4DD0E1; }
.cct-hexb { color: #8A919E; }
.cct-hexa { color: #5C616B; }
.cct-scrollbtn {
    position: absolute; right: 14px; bottom: 10px; display: none;
    background: #2A2E37; color: #C9D1DC; border: 1px solid #3A3F4A; border-radius: 4px;
    font-size: 12px; padding: 3px 10px; cursor: pointer;
}
.cct-console:hover .cct-scrollbtn.need { display: block; }

/* ---- 控制台（串口控制台模式）窗口内联输入行：贴在终端底部，视觉融合为"在窗口里打字" ---- */
.cct-inline {
    position: sticky; bottom: 0; left: 0; display: flex; align-items: center; gap: 8px;
    background: linear-gradient(to bottom, rgba(22,24,29,0), #16181D 26%);
    padding: 6px 2px 2px;
}
.cct-inline .ps1 { color: #6BCB77; font-family: Consolas, monospace; font-size: 13px; user-select: none; }
.cct-inline .cct-termin {
    flex: 1; background: transparent; border: none; outline: none;
    color: #DEE3EA; font-family: Consolas, 'Courier New', monospace; font-size: inherit; padding: 2px 0; caret-color: #6BCB77;
}
.cct-inline .cct-termin::placeholder { color: #5C616B; }

/* ---- AT 库 ---- */
.cct-at-search { padding: 8px 10px; border-bottom: 1px solid var(--cc-line, #E0E0E0); display: flex; gap: 6px; }
.cct-at-search input { flex: 1; }
.cct-at-list { overflow-y: auto; max-height: 40vh; min-height: 120px; }
.cct-at-group { font-size: 11px; color: var(--cc-text-3, #B4B4B4); padding: 6px 10px 2px; }
.cct-at-item { padding: 5px 10px; cursor: pointer; border-bottom: 1px dashed var(--cc-line, #E0E0E0); }
.cct-at-item:hover { background: var(--cc-bg-soft, #F8F8F8); }
.cct-at-item .cmd { font-family: Consolas, monospace; font-size: 12.5px; color: var(--cc-text, #505050); font-weight: 600; }
.cct-at-item:hover .cmd { color: var(--cc-red, #AA1615); }
.cct-at-item .note { font-size: 11px; color: var(--cc-text-3, #B4B4B4); margin-top: 1px; }
.cct-at-item .ops { float: right; display: none; gap: 4px; }
.cct-at-item:hover .ops { display: inline-flex; }
.cct-at-item .ops button { border: none; background: none; color: var(--cc-text-3, #B4B4B4); cursor: pointer; font-size: 12px; padding: 0 2px; }
.cct-at-item .ops button:hover { color: var(--cc-blue, #0078D4); }
.cct-at-item .ops button.del:hover { color: var(--cc-err, #F44336); }
.cct-freq { font-size: 10px; color: var(--cc-text-3, #B4B4B4); margin-left: 6px; }

/* ---- 绘图 ---- */
.cct-plot-wrap { margin-top: 12px; }
.cct-plot-body { display: none; }
.cct-plot-open .cct-plot-body { display: block; }
.cct-canvas-stack { position: relative; background: #16181D; border-radius: 0 0 4px 4px; height: 320px; }
.cct-canvas-stack canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cct-canvas-stack .cv-grid { z-index: 0; }   /* 网格最底层 */
.cct-canvas-stack .cv-gl { z-index: 1; }     /* 曲线盖住网格线（用户反馈②：曲线应显示在背景分割线上方） */
.cct-canvas-stack .cv-ov { z-index: 2; }
.cct-canvas-stack .cct-plot-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #5C616B; font-size: 12.5px; pointer-events: none;
}
.cct-annpop {
    position: absolute; z-index: 5; display: none;
    background: #fff; border: 1px solid var(--cc-line, #E0E0E0); border-radius: 4px; padding: 6px;
}
.cct-annpop input { border: 1px solid var(--cc-line, #E0E0E0); border-radius: 3px; font-size: 12px; padding: 4px 6px; width: 140px; }
.cct-chtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.cct-chtable th { text-align: left; color: var(--cc-text-2, #828282); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--cc-line, #E0E0E0); }
.cct-chtable td { padding: 4px 8px; border-bottom: 1px dashed var(--cc-line, #E0E0E0); color: var(--cc-text, #505050); }
.cct-chtable input[type="text"] { border: 1px solid var(--cc-line, #E0E0E0); border-radius: 3px; font-size: 12px; padding: 2px 6px; width: 110px; }
.cct-sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; cursor: pointer; border: 1px solid rgba(255,255,255,.25); }
.cct-stats { font-size: 11px; color: var(--cc-text-2, #828282); font-family: Consolas, monospace; }

/* ---- 弹窗 ---- */
dialog.cct-modal {
    border: 1px solid var(--cc-line, #E0E0E0); border-radius: 8px; padding: 0;
    width: min(520px, calc(100vw - 32px)); background: #fff; color: var(--cc-text, #505050);
}
dialog.cct-modal::backdrop { background: rgba(0, 0, 0, .35); }
.cct-modal-h { padding: 12px 16px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--cc-line, #E0E0E0); }
.cct-modal-b { padding: 14px 16px; max-height: 65vh; overflow-y: auto; }
.cct-modal-f { padding: 10px 16px; border-top: 1px solid var(--cc-line, #E0E0E0); display: flex; justify-content: flex-end; gap: 8px; }
.cct-form-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; }
.cct-form-row > label { font-size: 13px; flex: 0 0 auto; }
.cct-form-row .ctl { display: flex; gap: 6px; align-items: center; }
.cct-radio-row { display: flex; gap: 8px; margin-bottom: 8px; }
.cct-radio-row .cct-btn { flex: 1; text-align: center; }
.cct-help { font-size: 11.5px; color: var(--cc-text-3, #B4B4B4); line-height: 1.7; margin-top: 10px; }

@media print { .cc-serialtool, .cct-app { display: none !important; } }