/* 外壳：左侧导航栏 + 顶栏 + 登录页。颜色全部取 app.css 的 --dt-* 变量，三套皮肤（深空 / 明亮 / 护眼）自动适配。
   布局来自 prototype/ 原型：侧栏分组可折叠、当前页高亮、窄屏变抽屉。 */

.app { flex: 1; display: flex; min-height: 0; min-width: 0; }
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* ---------- 侧栏 ---------- */
.side { flex: none; width: 224px; display: flex; flex-direction: column; background: var(--dt-panel); border-right: 1px solid var(--dt-line); overflow: auto; padding: 12px 10px 20px; }
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; color: var(--dt-fg); text-decoration: none; font-weight: 700; letter-spacing: .06em; font-size: 15px; }
.logo i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; font: 700 12px var(--dt-f-body); font-style: normal; letter-spacing: 0; color: var(--dt-cyan); border: 1px solid var(--dt-cyan); background: var(--dt-cyan-soft); border-radius: 8px; }
.logo small { display: block; font-weight: 400; font-size: 11px; letter-spacing: 0; color: var(--dt-muted); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .ng-btn { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: var(--dt-muted); text-decoration: none; }
.nav a:hover { color: var(--dt-fg); background: var(--dt-cyan-soft); }
.nav a.on { color: var(--dt-fg); background: var(--dt-cyan-soft); box-shadow: inset 3px 0 0 var(--dt-cyan); }
.nav a.on .gl { color: var(--dt-cyan); }
.gl { width: 18px; flex: none; text-align: center; font-size: 14px; color: var(--dt-dim); }
.ng { margin-top: 10px; }
.ng-btn { width: 100%; justify-content: space-between; background: none; border: 0; cursor: pointer; font: inherit; font-size: 11.5px; letter-spacing: .08em; color: var(--dt-dim); padding: 4px 10px; }
.ng-btn:hover { color: var(--dt-fg); }
.ng-btn .badge { margin-left: auto; margin-right: 8px; letter-spacing: 0; }
.ng-btn .badge.crit { background: var(--dt-crit-soft); border-color: var(--dt-crit); color: var(--dt-crit); }
.ng-btn .badge.warn { background: var(--dt-amber-soft); border-color: var(--dt-amber); color: var(--dt-amber); }
.caret { width: 0; height: 0; flex: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .15s; }
.ng.fold .caret { transform: rotate(-90deg); }
.ng.fold .ng-items { display: none; }

/* ---------- 顶栏 ---------- */
.topbar { height: var(--dt-top-h); flex: none; display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--dt-panel); border-bottom: 1px solid var(--dt-line); }
.crumb { color: var(--dt-muted); font-size: 13px; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.crumb em { font-style: normal; color: var(--dt-dim); }
.crumb b { color: var(--dt-fg); font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--dt-cyan); color: var(--dt-on-accent); font-size: 12px; font-weight: 700; flex: none; }
.userbox .uname { color: var(--dt-fg); }
.menu-toggle { display: none; padding: 0 10px; font-size: 16px; }
.side-mask { display: none; }

/* 实例管理页自带的二级侧栏：已并入全局侧栏的「实例管理」分组，不再重复显示 */
.with-side > .sidenav { display: none; }

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .side { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--dt-shadow); }
  body.side-open .side { transform: none; }
  body.side-open .side-mask { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .45); }
  .topbar { padding: 0 12px; gap: 8px; }
  .userbox .uname, .help-btn { display: none; }
}

/* ---------- 登录页：左品牌区 + 右表单 ---------- */
.login-split { flex: 1; display: grid; grid-template-columns: minmax(0, 65fr) minmax(408px, 35fr); min-height: 0; } /* 登录区占宽度 35%；窄屏不低于 360px 卡片 + 两侧内边距 */
.login-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 20px; padding: 48px 56px; background: linear-gradient(150deg, var(--dt-raise) 0%, var(--dt-panel) 60%, var(--dt-bg) 100%); border-right: 1px solid var(--dt-line); }
.login-brand::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, var(--dt-cyan-soft), transparent 70%); pointer-events: none; }
.login-brand .lg { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; letter-spacing: .06em; color: var(--dt-fg); border: 0; border-radius: 0; padding: 0; }
.login-brand .lg i { width: 38px; height: 38px; display: grid; place-items: center; font: 700 14px var(--dt-f-body); font-style: normal; letter-spacing: 0; color: var(--dt-cyan); border: 1px solid var(--dt-cyan); background: var(--dt-cyan-soft); border-radius: 10px; }
.login-brand p { margin: 0; color: var(--dt-muted); max-width: 520px; }
.login-brand .lg small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--dt-muted); }
.login-brand .kicker { font-size: 12px; letter-spacing: .12em; color: var(--dt-cyan); position: relative; z-index: 1; }
.login-brand h2 { margin: 0; font-size: 44px; line-height: 1.2; position: relative; z-index: 1; }
.login-brand h2 em { font-style: normal; color: var(--dt-cyan); }
.login-brand .engines { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; position: relative; z-index: 1; }
.login-brand .engines li { padding: 3px 10px; border: 1px solid var(--dt-line-hi); border-radius: 4px; font-size: 12px; color: var(--dt-muted); }
.login-pane .login-card h1 { margin-top: 2px; }
.login-pane { position: relative; display: grid; place-items: center; padding: 32px 24px; overflow: auto; }
.login-pane .tools-bar { position: absolute; top: 16px; right: 20px; display: flex; gap: 8px; align-items: center; }
.login-pane .tools { position: static; }
.login-pane .login-card { margin: 0; width: min(360px, 100%); }
.login-pane .login-card.wide { width: min(440px, 100%); } /* 登录区只占 35% 宽，宽卡片（两步验证等）在 1280px 以下放不下 440px，随登录区收窄 */
@media (max-width: 900px) { .login-split { grid-template-columns: 1fr; } .login-brand { display: none; } }

/* ---------- 侧栏角标（待我处理的数量） ---------- */
.nav .badge { padding: 0 7px; font-size: 11.5px; line-height: 18px; border-radius: 9px; border-color: var(--dt-cyan); background: var(--dt-cyan-soft); color: var(--dt-cyan); letter-spacing: 0; }
.nav .badge.warn { border-color: var(--dt-amber); background: var(--dt-amber-soft); color: var(--dt-amber); }
.nav .ng-items a .badge.nb { margin-left: auto; }
/* 分组标题上的合计角标只在分组折叠时显示（展开时各条目自己带角标） */
.ng:not(.fold) .ng-btn .badge.gb { display: none; }

/* ---------- 顶栏：帮助按钮 + 个人菜单 ---------- */
.help-btn { text-decoration: none; color: var(--dt-muted); }
.help-btn:hover { color: var(--dt-fg); }
.help-btn b { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; line-height: 1; }
.umenu { position: relative; }
.um-btn { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; color: var(--dt-fg); font: inherit; }
.um-btn:hover, .um-btn[aria-expanded="true"] { background: var(--dt-cyan-soft); border-color: var(--dt-line-hi); }
.um-btn .caret { color: var(--dt-muted); }
.um-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 220px; padding: 6px; background: var(--dt-panel); border: 1px solid var(--dt-line-hi); border-radius: 8px; box-shadow: var(--dt-shadow); display: flex; flex-direction: column; gap: 1px; }
.um-pop[hidden] { display: none; }
.um-pop form { margin: 0; }
.um-head { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--dt-line); display: flex; flex-direction: column; gap: 1px; }
.um-head span { color: var(--dt-muted); font-size: 12px; }
.um-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 10px; border: 0; border-radius: 5px; background: none; color: var(--dt-fg); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.um-item[hidden] { display: none; }
a.um-item:hover, button.um-item:hover, a.um-item:focus-visible, button.um-item:focus-visible { background: var(--dt-cyan-soft); }
.um-static { cursor: default; color: var(--dt-muted); }
.um-out { color: var(--dt-crit); }
.um-state { font-size: 12px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--dt-line-hi); }
.um-state.ok { color: var(--dt-ok); border-color: var(--dt-ok); background: var(--dt-ok-soft); }
.um-state.off { color: var(--dt-muted); }

/* ---------- 个人信息与权限抽屉 ---------- */
.pf-mask { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .45); }
.pf-drawer { position: fixed; z-index: 81; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); display: flex; flex-direction: column; background: var(--dt-panel); border-left: 1px solid var(--dt-line-hi); box-shadow: var(--dt-shadow); }
.pf-drawer[hidden], .pf-mask[hidden] { display: none; }
.pf-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--dt-line); }
.pf-head h2 { margin: 0; font-size: 16px; }
.pf-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 24px; }
.pf-sec { margin-bottom: 18px; }
.pf-sec h3 { margin: 0 0 8px; font-size: 14px; }
.pf-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pf-links { display: flex; gap: 8px; margin: -6px 0 16px; flex-wrap: wrap; }
.pf-links .btn { text-decoration: none; color: var(--dt-fg); }
.pf-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 10px; }
.pf-filter input[type=search] { flex: 1 1 200px; min-width: 160px; }
.pf-mod h4 { margin: 12px 0 4px; font-size: 12.5px; letter-spacing: .06em; color: var(--dt-dim); }
.pf-page { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--dt-line); }
.pf-pname { color: var(--dt-muted); padding-top: 2px; }
.pf-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-btn { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 4px; border: 1px solid var(--dt-line-hi); font-size: 12.5px; }
.pf-btn i { font-style: normal; font-size: 11px; color: var(--dt-crit); border: 1px solid var(--dt-crit); border-radius: 3px; padding: 0 3px; }
.pf-btn i.g { color: var(--dt-cyan); border-color: var(--dt-cyan); }
.pf-btn i.x { color: var(--dt-crit); border-color: var(--dt-crit); }
.pf-btn.ok { color: var(--dt-fg); background: var(--dt-ok-soft); border-color: var(--dt-ok); }
.pf-btn.no { color: var(--dt-dim); border-style: dashed; }
.pf-btn.deny { color: var(--dt-crit); background: var(--dt-crit-soft); border-color: var(--dt-crit); text-decoration: line-through; }
.pf-btn.deny i { text-decoration: none; }
@media (max-width: 800px) { .pf-page { grid-template-columns: 1fr; gap: 2px; } }

/* ---- 顶栏右侧：时间 / 帮助 / 主题分段切换 / 用户胶囊 / 退出 ---- */
.tb-clock { color: var(--dt-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.help-btn.tb-help { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--dt-line-hi); border-radius: 8px; background: var(--dt-panel); color: var(--dt-fg); font-size: 13px; white-space: nowrap; }
.help-btn.tb-help:hover { border-color: var(--dt-cyan); }
.tb-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--dt-line-hi); border-radius: 8px; background: var(--dt-panel); }
.tb-seg button span { display: none; } /* 主题只留图标，名称在 title / aria-label 里 */
.tb-seg button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 0; border-radius: 6px; background: none; color: var(--dt-muted); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.tb-seg button i { font-style: normal; }
.tb-seg button:hover { color: var(--dt-fg); }
.tb-seg button[aria-pressed="true"] { background: var(--dt-cyan-soft); color: var(--dt-cyan); font-weight: 600; }
.umenu .um-btn { height: 36px; padding: 0 14px 0 4px; border: 1px solid var(--dt-line-hi); border-radius: 999px; background: var(--dt-panel); }
.umenu .um-btn:hover, .umenu .um-btn[aria-expanded="true"] { border-color: var(--dt-cyan); background: var(--dt-panel); }
.umenu .um-btn .uname { font-size: 13px; white-space: nowrap; }
.tb-out { margin: 0; }
.tb-logout { height: 34px; padding: 0 14px; border: 1px solid var(--dt-line-hi); border-radius: 8px; background: var(--dt-panel); color: var(--dt-fg); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.tb-logout:hover { border-color: var(--dt-crit); color: var(--dt-crit); }

/* 窄屏：时间 / 帮助 / 用户名隐藏（使用文档与个人信息在头像菜单里），主题只留图标；放在文件末尾，优先于上面同权重的规则 */
@media (max-width: 900px) {
  .tb-clock, .help-btn.tb-help, .umenu .um-btn .uname { display: none; }
  .umenu .um-btn { padding: 0 4px; }
  .tb-logout { padding: 0 10px; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .tb-clock { display: none; }
}

/* ---- 实例下拉：输入即筛选（searchselect.js）---- */
.ss { position: relative; display: inline-block; vertical-align: middle; min-width: 160px; max-width: 100%; }
.ss-input { width: 100%; box-sizing: border-box; padding-right: 22px !important; background-image: linear-gradient(45deg, transparent 50%, var(--dt-muted) 50%), linear-gradient(135deg, var(--dt-muted) 50%, transparent 50%); background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; text-overflow: ellipsis; }
.ss-input:disabled { background-color: var(--dt-input-ro); color: var(--dt-dim); }
.ss-native { display: none !important; }
.ss-list { position: fixed; z-index: 300; width: max-content; max-width: min(560px, 92vw); max-height: 300px; overflow: auto; margin: 0; padding: 4px; list-style: none; background: var(--dt-panel); border: 1px solid var(--dt-line-hi); border-radius: 6px; box-shadow: var(--dt-shadow); }
.ss-list[hidden] { display: none; }
.ss-opt { padding: 6px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dt-fg); }
.ss-opt.on { background: var(--dt-cyan-soft); }
.ss-opt.sel { color: var(--dt-cyan); font-weight: 600; }
.ss-empty, .ss-more { padding: 6px 8px; color: var(--dt-muted); font-size: 12.5px; }
.form-grid label .ss { display: block; width: 100%; margin-top: 4px; }

/* ---- 登录页左侧视觉（login_visual.js 生成的 SVG）---- */
.login-brand { --lv-violet: #b79cff; --lv-pink: #ff7ab8; --lv-teal: #3de0c4; --lv-grid: rgba(56, 225, 255, .07); }
:root[data-skin="light"] .login-brand { --lv-violet: #7a52e0; --lv-pink: #d6377f; --lv-teal: #0f9d86; --lv-grid: rgba(31, 111, 235, .08); }
:root[data-skin="sepia"] .login-brand { --lv-violet: #7d55b8; --lv-pink: #b8456f; --lv-teal: #2a8a78; --lv-grid: rgba(47, 125, 109, .09); }
.login-brand .login-clock { position: absolute; top: 40px; right: 48px; z-index: 2; font: 12px var(--dt-f-mono); color: var(--dt-muted); }
.login-brand .visual { position: relative; flex: 1 1 auto; min-height: 220px; z-index: 1; margin: -8px -24px -4px; }
.login-brand .visual svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lv-grid { stroke: var(--lv-grid); stroke-width: 1; fill: none; }
.lv-ring { fill: none; stroke: var(--dt-line-hi); stroke-width: 1; }
.lv-ring.lv-dash { stroke-dasharray: 3 7; }
.lv-ring.lv-soft { stroke-opacity: .5; }
.lv-ring.lv-gate { stroke: var(--dt-cyan); stroke-opacity: .55; stroke-width: 1.4; }
.lv-tick { stroke: var(--dt-dim); stroke-width: 1; stroke-opacity: .4; }
.lv-tick.lv-tick-major { stroke-opacity: .9; }
.lv-spoke { stroke: var(--dt-line-hi); stroke-width: 1; fill: none; }
.lv-sat-line { stroke: var(--dt-line-hi); stroke-width: .8; opacity: .8; }
.lv-sat { fill: var(--dt-muted); }
.lv-hex { fill: var(--dt-cyan-soft); stroke: var(--dt-cyan); stroke-width: 1.6; }
.lv-hub-text { fill: var(--dt-cyan); font: 700 14px var(--dt-f-body); text-anchor: middle; dominant-baseline: central; letter-spacing: .04em; }
.lv-pulse { fill: none; stroke: var(--dt-cyan); stroke-width: 1.2; }
.lv-chip { fill: var(--dt-panel); stroke: var(--dt-cyan); stroke-width: 1.2; }
.lv-gate-text { fill: var(--dt-cyan); font: 600 11px var(--dt-f-body); text-anchor: middle; dominant-baseline: central; }
.lv-label { font: 11px var(--dt-f-mono); fill: var(--c); }
.lv-core { fill: var(--dt-panel); stroke: var(--c); stroke-width: 1.6; }
.lv-dot { fill: var(--c); }
.lv-halo { fill: var(--c); opacity: .14; }
.lv-packet { fill: var(--c); }
.lv-sweep { fill: url(#lv-sweep); }
.lv-stop0 { stop-color: var(--dt-cyan); stop-opacity: 0; }
.lv-stop1 { stop-color: var(--dt-cyan); stop-opacity: .28; }
.lv-n-mysql { --c: var(--dt-cyan); } .lv-n-polardb { --c: var(--dt-amber); } .lv-n-polardbx { --c: var(--lv-violet); } .lv-n-selectdb { --c: var(--dt-ok); }
.lv-n-adb { --c: var(--lv-pink); } .lv-n-mssql { --c: var(--dt-info); } .lv-n-redis { --c: var(--dt-crit); } .lv-n-mongo { --c: var(--lv-teal); }
@keyframes lv-spin { to { transform: rotate(360deg); } }
@keyframes lv-spin-r { to { transform: rotate(-360deg); } }
@keyframes lv-pulse { 0% { r: 34; opacity: .55; } 100% { r: 92; opacity: 0; } }
@keyframes lv-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes lv-breathe { 0%, 100% { opacity: .1; } 50% { opacity: .22; } }
.lv-spin-slow { transform-origin: 320px 320px; animation: lv-spin 140s linear infinite; }
.lv-spin-rev { transform-origin: 320px 320px; animation: lv-spin-r 90s linear infinite; }
.lv-sweep-g { transform-origin: 320px 320px; animation: lv-spin 14s linear infinite; }
.lv-pulse { animation: lv-pulse 3.6s ease-out infinite; }
.lv-pulse2 { animation-delay: 1.8s; }
.lv-sat { animation: lv-twinkle 4s ease-in-out infinite; }
.lv-halo { animation: lv-breathe 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lv-spin-slow, .lv-spin-rev, .lv-sweep-g, .lv-pulse, .lv-sat, .lv-halo { animation: none; } .lv-pulse { opacity: .25; } }

/* ---- 登录页的数据库关键字背景层（login_bg.js 生成的 SVG）：拓扑是主角，这一层只做氛围 ---- */
.login-brand, .login-pane { isolation: isolate; } /* 让 z-index:-1 的背景层停在面板背景之上、内容之下 */
.lk-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.lk { opacity: .5; } /* 总可见度；贴近拓扑的元素在 JS 里再乘 .4～1 */
.lk-w { font-family: var(--dt-f-mono); font-weight: 600; letter-spacing: .08em; animation: lk-breathe 8s ease-in-out infinite; }
.lk-c-dql { fill: var(--dt-cyan); } .lk-c-dml { fill: var(--dt-ok); } .lk-c-ddl { fill: var(--dt-amber); }
.lk-c-dcl { fill: var(--lv-violet, var(--dt-info)); } /* 登录区不在 .login-brand 里，没有 --lv-violet，退回信息色 */
.lk-c-cc { fill: var(--dt-muted); font-weight: 500; letter-spacing: .02em; }
.lk-o1 { fill-opacity: .24; } .lk-o2 { fill-opacity: .38; } .lk-o3 { fill-opacity: .55; }
.lk-spot0 { stop-color: var(--dt-cyan); stop-opacity: .1; } .lk-spot1 { stop-color: var(--dt-cyan); stop-opacity: 0; }
.lk-ghost { font-family: var(--dt-f-mono); font-weight: 700; fill: none; stroke: var(--dt-cyan); stroke-opacity: .16; stroke-width: 1; letter-spacing: .06em; }
.lk-chip { fill: none; stroke: var(--dt-line-hi); stroke-width: 1; }
.lk-chip-t { font-family: var(--dt-f-mono); fill: var(--dt-muted); }
.lk-card-bg { fill: var(--dt-panel); fill-opacity: .72; stroke: var(--dt-line-hi); stroke-width: 1; }
.lk-card-hr { stroke: var(--dt-line); stroke-width: 1; shape-rendering: crispEdges; }
.lk-card-dot { fill: var(--dt-line-hi); }
.lk-card-title { font: 10px var(--dt-f-mono); fill: var(--dt-dim); letter-spacing: .04em; }
.lk-code { font: 11.5px var(--dt-f-mono); white-space: pre; fill: var(--dt-code-text); }
.lk-t-kw { fill: var(--dt-code-kw); font-weight: 600; } .lk-t-tx { fill: var(--dt-code-text); } .lk-t-id { fill: var(--dt-code-fn); }
.lk-t-str { fill: var(--dt-code-str); } .lk-t-num { fill: var(--dt-code-num); } .lk-t-op { fill: var(--dt-code-op); }
.lk-t-cm { fill: var(--dt-code-cm); } .lk-t-ok { fill: var(--dt-ok); font-weight: 700; }
@keyframes lk-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lk-w { animation: none; } }