/* ── TCP Monitor scoped styles ── */
.tc-grid { display:grid; grid-template-columns:320px 1fr; gap:14px; align-items:start; }
@media (max-width:900px) { .tc-grid { grid-template-columns:1fr; } }

.tc-card { background:var(--surface,#fff); border:1px solid var(--gray-200); border-radius:12px; overflow:hidden; }
.tc-card-hd { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--gray-200); }
.tc-card-ic { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--blue-50,#eff6ff); color:var(--blue-600); flex-shrink:0; }
.tc-card-ic svg { width:16px; height:16px; }
.tc-card-nm { font-size:13px; font-weight:700; color:var(--text,#111827); }
.tc-card-sub { font-size:11px; color:var(--gray-500,#6b7280); margin-top:1px; }
.tc-card-bd { padding:14px; }

.tc-fld { margin-bottom:12px; }
.tc-fld.last { margin-bottom:0; }
.tc-lbl { display:block; font-size:11px; font-weight:600; color:var(--gray-500,#6b7280); margin-bottom:5px; text-transform:uppercase; letter-spacing:.03em; }
.tc-inp { width:100%; padding:8px 10px; border:1px solid var(--gray-200); border-radius:8px; font-size:13px; background:var(--surface,#fff); color:var(--text,#111827); font-family:inherit; }
.tc-inp:focus { outline:none; border-color:var(--blue-600); }
.tc-inp:disabled { opacity:.6; cursor:not-allowed; }
.tc-inp[readonly] { background:var(--gray-100,#f3f4f6); color:var(--gray-500,#6b7280); cursor:not-allowed; }
.tc-inp[readonly]:focus { border-color:var(--gray-200); }
.tc-hint { display:block; font-size:11px; color:var(--gray-500,#6b7280); margin-top:4px; line-height:1.5; }

.tc-power { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 14px; border-radius:10px; border:1px solid var(--gray-200); background:var(--gray-100,#f3f4f6); color:var(--gray-500,#6b7280); font-size:13px; font-weight:700; letter-spacing:.02em; cursor:pointer; transition:all .2s; }
.tc-power:hover { border-color:var(--blue-600); color:var(--blue-600); }
.tc-power.on { background:#10b981; border-color:#10b981; color:#fff; box-shadow:0 2px 10px rgba(16,185,129,.35); }
.tc-power.on:hover { background:#0f9d76; border-color:#0f9d76; color:#fff; }
.tc-power svg { width:15px; height:15px; }
.tc-power-state { font-size:11px; opacity:.85; font-weight:600; }

.tc-info { display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:9px 11px; border-radius:8px; background:var(--gray-100,#f3f4f6); font-size:11.5px; line-height:1.55; color:var(--gray-500,#6b7280); }
.tc-info svg { width:13px; height:13px; flex-shrink:0; margin-top:1px; }
.tc-info.err { background:#fef2f2; color:#b91c1c; }
.tc-info.ok { background:#ecfdf5; color:#047857; }


.tc-term-wrap { background:var(--surface,#fff); border:1px solid var(--gray-200); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.tc-term-hd { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 12px; border-bottom:1px solid var(--gray-200); background:var(--gray-100,#f9fafb); }
.tc-term-title { font-size:12px; font-weight:700; color:var(--text,#111827); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.tc-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:100px; background:var(--surface,#fff); border:1px solid var(--gray-200); font-size:10.5px; font-weight:600; color:var(--gray-500,#6b7280); }
.tc-chip b { color:var(--text,#111827); font-weight:700; }
.tc-tools { margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tc-tbtn { padding:5px 9px; border-radius:7px; border:1px solid var(--gray-200); background:var(--surface,#fff); color:var(--gray-500,#6b7280); font-size:11px; font-weight:600; cursor:pointer; transition:all .18s; }
.tc-tbtn:hover { border-color:var(--blue-600); color:var(--blue-600); }
.tc-tbtn.active { background:var(--blue-600); border-color:var(--blue-600); color:#fff; }
.tc-sel { padding:5px 7px; border-radius:7px; border:1px solid var(--gray-200); background:var(--surface,#fff); color:var(--gray-500,#6b7280); font-size:11px; font-weight:600; }

.tc-term { height:calc(100vh - 330px); min-height:340px; overflow-y:auto; padding:12px 14px; background:#0b1020; color:#cbd5e1; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace; font-size:12.5px; line-height:1.65; }
.tc-term::-webkit-scrollbar { width:8px; }
.tc-term::-webkit-scrollbar-track { background:transparent; }
.tc-term::-webkit-scrollbar-thumb { background:#1e293b; border-radius:99px; }
.tc-ln { display:block; white-space:pre-wrap; word-break:break-word; padding:1px 0; animation:tcIn .16s ease; }
@keyframes tcIn { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
.tc-t { color:#64748b; }
.tc-src { color:#38bdf8; }
.tc-arrow { color:#475569; }
.tc-len { color:#f59e0b; }
.tc-msg { color:#e2e8f0; }
.tc-hex { color:#a78bfa; }
.tc-id { color:#818cf8; }
.tc-open { color:#34d399; }
.tc-close { color:#94a3b8; }
.tc-err { color:#f87171; }
.tc-out { color:#fbbf24; }
.tc-sys { color:#10b981; }
.tc-sys.warn { color:#fbbf24; }
.tc-sys.err { color:#f87171; }
.tc-cursor { display:inline-block; width:7px; height:14px; background:#10b981; vertical-align:-2px; animation:tcBlink 1.1s step-end infinite; }
@keyframes tcBlink { 50% { opacity:0; } }

.tc-doc { margin-top:14px; background:var(--surface,#fff); border:1px solid var(--gray-200); border-radius:12px; padding:14px 16px; font-size:12.5px; line-height:1.75; color:var(--gray-500,#6b7280); }
.tc-doc h3 { font-size:13px; font-weight:700; color:var(--text,#111827); margin:0 0 6px; }
.tc-doc h4 { font-size:12px; font-weight:700; color:var(--text,#111827); margin:14px 0 5px; }
.tc-doc pre { background:#0b1020; color:#cbd5e1; border-radius:8px; padding:10px 12px; overflow-x:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px; line-height:1.6; margin:0 0 8px; }
.tc-doc code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px; background:var(--gray-100,#f3f4f6); padding:1px 5px; border-radius:4px; color:var(--text,#111827); }
.tc-doc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }

html[data-theme="dark"] .tc-card,
html[data-theme="dark"] .tc-term-wrap,
html[data-theme="dark"] .tc-doc { background:#0f172a !important; border-color:#334155 !important; }
html[data-theme="dark"] .tc-card-hd { border-color:#334155 !important; }
html[data-theme="dark"] .tc-card-ic { background:#1e293b !important; color:#60a5fa !important; }
html[data-theme="dark"] .tc-card-nm { color:#e2e8f0 !important; }
html[data-theme="dark"] .tc-inp { background:#1e293b !important; border-color:#334155 !important; color:#e2e8f0 !important; }
html[data-theme="dark"] .tc-inp[readonly] { background:#0f172a !important; color:#94a3b8 !important; }
html[data-theme="dark"] .tc-term-hd { background:#1e293b !important; border-color:#334155 !important; }
html[data-theme="dark"] .tc-term-title { color:#e2e8f0 !important; }
html[data-theme="dark"] .tc-chip,
html[data-theme="dark"] .tc-tbtn,
html[data-theme="dark"] .tc-sel { background:#0f172a !important; border-color:#334155 !important; color:#94a3b8 !important; }
html[data-theme="dark"] .tc-chip b { color:#e2e8f0 !important; }
html[data-theme="dark"] .tc-tbtn.active { background:#2563eb !important; border-color:#2563eb !important; color:#fff !important; }
html[data-theme="dark"] .tc-power { background:#1e293b !important; border-color:#334155 !important; color:#94a3b8 !important; }
html[data-theme="dark"] .tc-power.on { background:#10b981 !important; border-color:#10b981 !important; color:#fff !important; }
html[data-theme="dark"] .tc-info { background:#1e293b !important; color:#94a3b8 !important; }
html[data-theme="dark"] .tc-info.err { background:#2d1515 !important; color:#f87171 !important; }
html[data-theme="dark"] .tc-info.ok { background:#052e26 !important; color:#34d399 !important; }
html[data-theme="dark"] .tc-doc h3,
html[data-theme="dark"] .tc-doc h4 { color:#e2e8f0 !important; }
html[data-theme="dark"] .tc-doc code { background:#1e293b !important; color:#cbd5e1 !important; }
