/* Extracted from kgtools-tool-page.html. STAGE tokens must stay. */
@import url("/fonts/tool/jetbrains-mono.css");
@import url("/fonts/tool/misans.css");
html.kg-tool {
/* 赛博朋克 HUD。静态边框 5892E8，选中/可操作 3CE5E5 */
--accent: #5892E8;
--hot: #3CE5E5;
--accent-grad: var(--accent);
--ok: #3CE5E5;
--danger: #ff2a32;
--text: #f7f7fb;
--muted: #8291AB;
--line: rgba(88, 146, 232, .22);
--glass: rgba(10, 14, 26, .72);
--glass-strong: rgba(12, 16, 28, .86);
--code: #f4f5f8;
--tok-key: #4CC9F0;
--tok-str: #F72585;
--tok-num: #4895EF;
--tok-kw: #B5179E;
--tok-punc: #4361EE;
--radius-shell: 0px;
--radius-stage: 0px;
--radius-ctrl: 0px;
--radius-inner: 0px;
--tab-strip: rgba(8, 10, 18, .88);
--tab-surface: rgba(16, 20, 32, .92);
--panel-head-h: 52px;
--cut: 10px;
/* STAGE 锁定。加工具只往 .stage 里填内容，禁止改这些值，也禁止覆盖 .stage 的 margin / 滚动条。
--guide-inset 内框到主边
--guide-cut 内框切角；滚动条宽度；滚动条相对内框的上下收进
--content-inset 正文到主边（含中缝枢纽）
--line-pad-y 首行在滚动区内的顶距（与切角相加后，行号仍离顶线 12px） */
--guide-inset: 7px;
--guide-cut: 8px;
--scroll-edge: var(--guide-cut);
--content-inset: 52px;
--gutter-w: 48px;
--line-pad-y: 2px;
--line-pad-left: 4px;
--line-pad-right: calc(var(--content-inset) - var(--scroll-edge));
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", monospace;
--sans: "MiSans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
--display: var(--sans);
--nav: var(--sans);
--scroll-size: 10px;
--scroll-track: rgba(88, 146, 232, .16);
--scroll-track-line: rgba(88, 146, 232, .35);
--scroll-thumb: rgba(60, 229, 229, .7);
--scroll-thumb-border: rgba(60, 229, 229, .85);
--scroll-thumb-hover: rgba(60, 229, 229, .68);
--scroll-glow: rgba(60, 229, 229, .32);
}
html.kg-tool[data-theme="light"] {
--accent: #5892E8;
--hot: #1aa8a8;
--text: #111827;
--muted: #8291AB;
--line: #d7e3f7;
--glass: #ffffff;
--glass-strong: #ffffff;
--code: #111827;
--tok-key: #4361EE;
--tok-str: #F72585;
--tok-num: #3F37C9;
--tok-kw: #7209B7;
--tok-punc: #560BAD;
--tab-strip: #e8eaed;
--tab-surface: #ffffff;
--scroll-track: rgba(232, 237, 247, .92);
--scroll-track-line: rgba(88, 146, 232, .24);
--scroll-thumb: rgba(88, 146, 232, .36);
--scroll-thumb-border: rgba(88, 146, 232, .48);
--scroll-thumb-hover: rgba(26, 168, 168, .58);
--scroll-glow: rgba(26, 168, 168, .24);
}
* { box-sizing: border-box; }
@supports (-moz-appearance: none) {
textarea,
.code-sheet,
.editor.is-live,
.tree,
.ua-wrap,
.panel-body,
.charset-menu,
.tabs,
.img-preview {
scrollbar-width: thin;
scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
}
textarea::-webkit-scrollbar,
.code-sheet::-webkit-scrollbar,
.editor.is-live::-webkit-scrollbar,
.tree::-webkit-scrollbar,
.ua-wrap::-webkit-scrollbar,
.charset-menu::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
.img-preview::-webkit-scrollbar,
html.kg-tool[data-theme="light"] body::-webkit-scrollbar {
width: var(--scroll-size);
height: var(--scroll-size);
}
textarea::-webkit-scrollbar-track,
.code-sheet::-webkit-scrollbar-track,
.editor.is-live::-webkit-scrollbar-track,
.tree::-webkit-scrollbar-track,
.ua-wrap::-webkit-scrollbar-track,
.charset-menu::-webkit-scrollbar-track,
.tabs::-webkit-scrollbar-track,
.img-preview::-webkit-scrollbar-track,
html.kg-tool[data-theme="light"] body::-webkit-scrollbar-track {
background:
repeating-linear-gradient(0deg, transparent 0 3px, rgba(88, 146, 232, .05) 3px 4px),
var(--scroll-track);
border-left: 1px solid var(--scroll-track-line);
}
textarea::-webkit-scrollbar-track:horizontal,
.code-sheet::-webkit-scrollbar-track:horizontal,
.editor.is-live::-webkit-scrollbar-track:horizontal,
.tree::-webkit-scrollbar-track:horizontal,
.ua-wrap::-webkit-scrollbar-track:horizontal,
.charset-menu::-webkit-scrollbar-track:horizontal,
.tabs::-webkit-scrollbar-track:horizontal,
.img-preview::-webkit-scrollbar-track:horizontal,
html.kg-tool[data-theme="light"] body::-webkit-scrollbar-track:horizontal {
border-left: 0;
border-top: 1px solid var(--scroll-track-line);
}
textarea::-webkit-scrollbar-thumb,
.code-sheet::-webkit-scrollbar-thumb,
.editor.is-live::-webkit-scrollbar-thumb,
.tree::-webkit-scrollbar-thumb,
.ua-wrap::-webkit-scrollbar-thumb,
.charset-menu::-webkit-scrollbar-thumb,
.tabs::-webkit-scrollbar-thumb,
.img-preview::-webkit-scrollbar-thumb,
html.kg-tool[data-theme="light"] body::-webkit-scrollbar-thumb {
border-radius: 0;
background:
linear-gradient(180deg, rgba(60, 229, 229, .28) 0%, var(--scroll-thumb) 42%, rgba(88, 146, 232, .55) 100%);
border: 1px solid var(--scroll-thumb-border);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .04),
0 0 8px rgba(88, 146, 232, .12);
}
textarea::-webkit-scrollbar-thumb:hover,
.code-sheet::-webkit-scrollbar-thumb:hover,
.editor.is-live::-webkit-scrollbar-thumb:hover,
.tree::-webkit-scrollbar-thumb:hover,
.ua-wrap::-webkit-scrollbar-thumb:hover,
.charset-menu::-webkit-scrollbar-thumb:hover,
.tabs::-webkit-scrollbar-thumb:hover,
.img-preview::-webkit-scrollbar-thumb:hover,
html.kg-tool[data-theme="light"] body::-webkit-scrollbar-thumb:hover {
background:
linear-gradient(180deg, rgba(60, 229, 229, .55) 0%, var(--scroll-thumb-hover) 48%, rgba(88, 146, 232, .72) 100%);
border-color: var(--hot);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .08),
0 0 10px var(--scroll-glow);
}
textarea::-webkit-scrollbar-thumb:active,
.code-sheet::-webkit-scrollbar-thumb:active,
.editor.is-live::-webkit-scrollbar-thumb:active,
.tree::-webkit-scrollbar-thumb:active,
.ua-wrap::-webkit-scrollbar-thumb:active,
.charset-menu::-webkit-scrollbar-thumb:active,
.tabs::-webkit-scrollbar-thumb:active,
.img-preview::-webkit-scrollbar-thumb:active,
html.kg-tool[data-theme="light"] body::-webkit-scrollbar-thumb:active {
background: linear-gradient(180deg, rgba(60, 229, 229, .72), rgba(88, 146, 232, .82));
box-shadow: 0 0 14px var(--scroll-glow);
}
textarea::-webkit-scrollbar-corner,
.code-sheet::-webkit-scrollbar-corner,
.editor.is-live::-webkit-scrollbar-corner,
.tree::-webkit-scrollbar-corner,
.ua-wrap::-webkit-scrollbar-corner,
.charset-menu::-webkit-scrollbar-corner,
.tabs::-webkit-scrollbar-corner,
.img-preview::-webkit-scrollbar-corner,
html.kg-tool[data-theme="light"] body::-webkit-scrollbar-corner {
background: var(--scroll-track);
}
html.kg-tool, html.kg-tool body {
height: 100%;
min-height: 100%;
min-height: 100dvh;
margin: 0;
}
html.kg-tool {
background: #080c18;
}
html.kg-tool body {
position: relative;
color: var(--text);
font: 13px/1.45 var(--sans);
letter-spacing: .04em;
overflow: hidden;
background:
radial-gradient(90% 60% at 8% -10%, rgba(88, 146, 232, .18), transparent 52%),
radial-gradient(70% 50% at 92% 8%, rgba(88, 146, 232, .08), transparent 58%),
radial-gradient(80% 50% at 88% 110%, rgba(88, 146, 232, .07), transparent 56%),
linear-gradient(180deg, #0c1428 0%, #0b1020 42%, #080c18 100%);
}
.stage {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
min-height: 100dvh;
z-index: 0;
pointer-events: none;
background:
radial-gradient(90% 60% at 8% -10%, rgba(88, 146, 232, .18), transparent 52%),
radial-gradient(70% 50% at 92% 8%, rgba(88, 146, 232, .08), transparent 58%),
radial-gradient(80% 50% at 88% 110%, rgba(88, 146, 232, .07), transparent 56%),
linear-gradient(180deg, #0c1428 0%, #0b1020 42%, #080c18 100%);
}
.stage::before {
content: "";
position: absolute;
inset: -22%;
pointer-events: none;
opacity: .45;
background-image:
linear-gradient(rgba(88, 146, 232, .07) 1px, transparent 1px),
linear-gradient(90deg, rgba(88, 146, 232, .05) 1px, transparent 1px);
background-size: 36px 36px;
transform: skewY(-6deg);
transform-origin: center;
}
.stage::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .14) 3px),
radial-gradient(ellipse 42% 32% at 12% 8%, rgba(88, 146, 232, .22), transparent 70%),
radial-gradient(ellipse 38% 28% at 88% 18%, rgba(88, 146, 232, .1), transparent 72%);
opacity: .7;
}
html.kg-tool[data-theme="light"] body {
overflow: auto;
background:
radial-gradient(900px 520px at 16% 0%, rgba(88, 146, 232, .18), transparent 58%),
radial-gradient(720px 480px at 88% 12%, rgba(88, 146, 232, .08), transparent 52%),
#f6f7f9;
}
html.kg-tool[data-theme="light"] .stage { display: none; }
button { font: inherit; }
.frost {
background: var(--glass);
border: 1px solid var(--line);
}
.shell {
position: relative;
z-index: 1;
height: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) 56px;
grid-template-rows: 44px 44px minmax(0, 1fr) 40px;
}
.app {
display: contents;
}
.sub { grid-column: 1; grid-row: 2; }
#main {
grid-column: 1;
grid-row: 3;
display: grid;
min-height: 0;
height: 100%;
}
.site-foot {
grid-column: 1;
grid-row: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 16px;
min-height: 0;
color: rgba(156, 166, 185, .42);
font-size: 12px;
font-weight: 400;
letter-spacing: .02em;
line-height: 1;
}
.site-foot-note {
color: inherit;
font-weight: inherit;
margin-left: auto;
flex: 0 0 auto;
}
.site-foot a {
color: inherit;
font-weight: inherit;
text-decoration: none;
}
.site-foot a:hover {
color: var(--accent);
}
html.kg-tool[data-theme="light"] .site-foot {
color: rgba(120, 130, 148, .55);
}
.top {
position: relative;
display: flex;
align-items: center;
gap: 8px;
grid-column: 1 / -1;
grid-row: 1;
margin: 0;
padding: 0 16px;
height: 44px;
border-radius: 0;
border-width: 0;
background: transparent;
overflow: visible;
}
.top-strip {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: var(--tab-strip);
}
.logo {
display: flex;
align-items: center;
position: relative;
z-index: 1;
margin-right: 12px;
height: 32px;
}
.logo img {
display: block;
height: 22px;
width: auto;
}
.nav { display: flex; align-items: stretch; align-self: stretch; position: relative; z-index: 1; gap: 4px; min-width: 0; }
.nav button, .icon-btn, .seg button, .ghost, .primary, .copy-btn {
border: 0;
cursor: pointer;
background: transparent;
}
.nav button {
position: relative;
display: flex;
align-items: center;
height: auto;
padding: 0 22px;
border-radius: 0;
color: var(--muted);
font-family: var(--nav);
font-size: 15px;
font-weight: 600;
line-height: 1;
letter-spacing: .04em;
}
.nav button span {
position: relative;
z-index: 1;
}
.nav button:hover { color: var(--hot); background: transparent; }
html.kg-tool[data-theme="light"] .nav button:hover { background: transparent; }
.nav button.active {
color: var(--hot);
background: transparent;
padding: 8px 22px 0;
text-shadow: 0 0 12px rgba(60, 229, 229, .45);
z-index: 2;
}
.nav .nav-frame { display: none; }
.nav button.active::before,
.nav button.active::after {
content: "";
position: absolute;
top: 8px;
bottom: 0;
width: 16px;
z-index: 1;
pointer-events: none;
}
.nav button.active::before {
left: 0;
background:
linear-gradient(135deg, transparent calc(50% - 1px), var(--hot) calc(50% - 1px), var(--hot) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 10px 10px no-repeat,
linear-gradient(var(--hot), var(--hot)) 10px 0 / 12px 2px no-repeat,
linear-gradient(var(--hot), var(--hot)) 0 10px / 2px 12px no-repeat,
linear-gradient(var(--hot), var(--hot)) 0 50% / 2px 10px no-repeat,
linear-gradient(var(--hot), var(--hot)) 0 calc(100% - 12px) / 2px 12px no-repeat,
linear-gradient(var(--hot), var(--hot)) 0 100% / 12px 2px no-repeat;
}
.nav button.active::after {
right: 0;
left: auto;
background:
linear-gradient(var(--hot), var(--hot)) calc(100% - 12px) 0 / 12px 2px no-repeat,
linear-gradient(var(--hot), var(--hot)) 100% 0 / 2px 12px no-repeat,
linear-gradient(var(--hot), var(--hot)) 100% 50% / 2px 10px no-repeat,
linear-gradient(var(--hot), var(--hot)) 100% calc(100% - 12px) / 2px 12px no-repeat,
linear-gradient(var(--hot), var(--hot)) calc(100% - 12px) 100% / 12px 2px no-repeat;
}
.nav button:not(.active):not(:hover) + button:not(.active):not(:hover)::before {
content: "";
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 1px;
background: rgba(88, 146, 232, .28);
pointer-events: none;
}
html.kg-tool[data-theme="light"] .nav button:not(.active):not(:hover) + button:not(.active):not(:hover)::before {
background: rgba(88, 146, 232, .35);
}
.top-actions { margin-left: auto; display: flex; position: relative; z-index: 1; gap: 6px; padding-right: 8px; }
.top-end {
margin-left: auto;
position: relative;
z-index: 1;
width: 132px;
align-self: stretch;
pointer-events: none;
background:
repeating-linear-gradient(-45deg, var(--accent) 0 3px, transparent 3px 7px) 100% 10px / 72px 16px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% 100% / 108px 3px no-repeat;
}
.icon-btn, .ghost, .copy-btn, .icon-act {
width: 28px;
height: 28px;
padding: 0;
display: grid;
place-items: center;
border-radius: 0;
border: 1px solid var(--accent);
color: var(--muted);
background: rgba(8, 12, 22, .55);
clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.ghost, .copy-btn {
width: 28px;
height: 28px;
clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.ghost svg, .copy-btn svg {
width: 16px;
height: 16px;
max-width: 16px;
max-height: 16px;
display: block;
}
.ghost .letter-mark {
display: grid;
place-items: center;
width: 18px;
height: 18px;
font: 700 16px/1 var(--sans);
letter-spacing: 0;
}
button svg {
max-width: 22px;
max-height: 22px;
}
.icon-btn:hover, .icon-act:hover {
color: var(--hot);
}
.ghost:hover:not(:disabled):not(.is-on), .copy-btn:hover:not(:disabled) {
color: var(--hot);
border-color: var(--hot);
background: rgba(60, 229, 229, .12);
box-shadow: 0 0 12px rgba(60, 229, 229, .28);
}
.ghost.is-on {
color: var(--hot);
border-color: var(--hot);
background: rgba(60, 229, 229, .16);
}
.ghost.is-on:hover {
color: var(--hot);
border-color: var(--hot);
background: rgba(60, 229, 229, .16);
box-shadow: none;
}
.ghost.is-on:disabled,
.ghost.is-on:disabled:hover {
color: var(--muted);
border-color: var(--accent);
background: rgba(8, 12, 22, .55);
box-shadow: none;
}
.icon-btn.active {
color: var(--hot);
border-color: var(--hot);
background: rgba(60, 229, 229, .16);
box-shadow: 0 0 12px rgba(60, 229, 229, .28);
}
html.kg-tool[data-theme="light"] .icon-btn:hover,
html.kg-tool[data-theme="light"] .icon-act:hover { color: var(--hot); }
html.kg-tool[data-theme="light"] .ghost:hover:not(:disabled):not(.is-on),
html.kg-tool[data-theme="light"] .copy-btn:hover:not(:disabled) {
color: var(--hot);
background: rgba(60, 229, 229, .12);
}
html.kg-tool[data-theme="light"] .ghost.is-on,
html.kg-tool[data-theme="light"] .ghost.is-on:hover {
background: rgba(26, 168, 168, .16);
}
html.kg-tool[data-theme="light"] .ghost.is-on:disabled,
html.kg-tool[data-theme="light"] .ghost.is-on:disabled:hover {
color: var(--muted);
background: rgba(8, 12, 22, .55);
}
.ghost {
color: var(--muted);
}
.copy-btn.is-copied,
.is-copy-act.is-copied { color: var(--hot); }
.is-copy-act .copy-face { display: grid; place-items: center; }
.is-copy-act .copy-face.is-ok { display: none; }
.is-copy-act.is-copied .copy-face.is-copy { display: none; }
.is-copy-act.is-copied .copy-face.is-ok { display: grid; }
.copy-btn:disabled, .ghost:disabled { opacity: .38; cursor: not-allowed; }
.seg {
display: flex;
padding: 0;
border: 0;
background: rgba(0,0,0,.28);
clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
html.kg-tool[data-theme="light"] .seg { background: rgba(88, 146, 232, .08); }
.seg button {
position: relative;
width: 28px;
height: 28px;
padding: 0;
border-radius: 0;
border: 1px solid var(--accent);
margin-right: -1px;
color: var(--muted);
display: grid;
place-items: center;
}
.seg button:last-child { margin-right: 0; }
.seg button svg { width: 16px; height: 16px; }
.seg button:hover { color: var(--hot); }
.seg button.active {
z-index: 1;
color: var(--hot);
border-color: var(--hot);
background: rgba(60, 229, 229, .16);
}
.seg button.active:hover { color: var(--hot); }
.seg button.is-label {
width: auto;
min-width: 36px;
padding: 0 8px;
font: 600 11px/28px var(--sans);
letter-spacing: .04em;
}
html.kg-tool[data-theme="light"] .seg button.active { background: rgba(26, 168, 168, .16); }
.charset-drop {
position: relative;
z-index: 8;
}
.charset-btn {
position: relative;
width: auto;
min-width: 64px;
padding: 0 18px 0 8px;
font: 600 11px/28px var(--sans);
letter-spacing: .04em;
}
.charset-btn::after {
content: "";
position: absolute;
right: 7px;
top: 50%;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-70%) rotate(45deg);
}
.charset-drop.is-open .charset-btn {
color: var(--hot);
border-color: var(--hot);
}
.charset-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 6px);
min-width: 108px;
max-height: min(360px, calc(100vh - 160px));
overflow: auto;
padding: 4px;
border: 1px solid var(--hot);
background: color-mix(in srgb, var(--hot) 10%, #05080f);
box-shadow: 0 0 14px color-mix(in srgb, var(--hot) 18%, transparent);
z-index: 12;
}
.charset-drop.is-open .charset-menu { display: block; }
.charset-btn.is-wide {
min-width: 88px;
max-width: 148px;
}
.ghost.hash-key {
position: relative;
width: 188px;
min-width: 188px;
max-width: 188px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 2px 0 0;
cursor: text;
}
.ghost.hash-key > svg {
flex: 0 0 16px;
margin: 0 6px 0 6px;
}
.ghost.hash-key input {
flex: 1;
min-width: 0;
height: 26px;
padding: 0 22px 0 0;
border: 0;
background: transparent;
color: var(--text);
font: 12px/26px var(--mono);
outline: none;
caret-color: var(--hot);
}
.ghost.hash-key input::placeholder {
color: var(--muted);
opacity: 1;
font: 12px/26px var(--mono);
}
.hash-key-clear {
position: absolute;
top: 50%;
right: 2px;
transform: translateY(-50%);
width: 22px;
height: 22px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
display: grid;
place-items: center;
clip-path: none;
box-shadow: none;
}
.hash-key-clear svg {
width: 12px;
height: 12px;
max-width: 12px;
max-height: 12px;
}
.hash-key-clear:hover {
color: var(--hot);
background: transparent;
border-color: transparent;
box-shadow: none;
}
.hash-key-clear[hidden] { display: none; }
.ghost.hash-key:focus-within {
color: var(--hot);
border-color: var(--hot);
background: rgba(60, 229, 229, .12);
}
html.kg-tool[data-theme="light"] .ghost.hash-key:focus-within {
background: rgba(26, 168, 168, .16);
}
.ghost.hash-key.is-iv {
width: 128px;
min-width: 128px;
max-width: 128px;
}
.ghost.hash-key.is-pem {
width: 248px;
min-width: 248px;
max-width: 248px;
}
.curl-group {
padding: 8px 8px 2px;
color: var(--accent);
font: 700 9px/1 var(--sans);
letter-spacing: .16em;
text-transform: uppercase;
opacity: .72;
}
.curl-group:first-child { padding-top: 4px; }
.charset-menu button {
display: block;
width: 100%;
height: 28px;
padding: 0 8px;
border: 0;
background: transparent;
color: var(--muted);
font: 600 11px/28px var(--sans);
letter-spacing: .04em;
text-align: left;
cursor: pointer;
}
.charset-menu button:hover,
.charset-menu button.is-on {
color: var(--hot);
background: color-mix(in srgb, var(--hot) 12%, transparent);
}
html.kg-tool[data-theme="light"] .charset-menu {
background: #fff;
box-shadow: 0 8px 24px rgba(17, 24, 39, .12);
}
html.kg-tool[data-theme="light"] .charset-menu button:hover,
html.kg-tool[data-theme="light"] .charset-menu button.is-on {
background: rgba(26, 168, 168, .12);
}
.sub {
display: flex;
align-items: center;
gap: 12px;
padding: 0 16px 0 32px;
background: transparent;
}
.tabs { display: flex; gap: 2px; min-width: 0; overflow: auto; }
.tabs button {
position: relative;
height: 32px;
padding: 0 12px;
border: 0;
color: var(--muted);
background: transparent;
cursor: pointer;
white-space: nowrap;
font-family: var(--nav);
font-size: 13px;
font-weight: 500;
letter-spacing: .04em;
}
.tabs button:first-child { padding-left: 0; }
.tabs button:hover { color: var(--hot); }
.tabs button.active { color: var(--hot); }
.tabs button.active::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 4px;
height: 2px;
border-radius: 0;
background: var(--hot);
box-shadow: 0 0 8px rgba(60, 229, 229, .55);
clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.tabs button:first-child.active::after { left: 0; }
.workspace, .compare {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 0;
margin: 0 16px;
overflow: visible;
border-radius: 0;
clip-path: polygon(
var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut),
100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)
);
background: var(--glass);
border: 1px solid var(--accent);
filter: drop-shadow(0 18px 40px rgba(0,0,0,.42));
}
.workspace::before, .compare::before {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
background:
linear-gradient(var(--accent), var(--accent)) var(--cut) 0 / 28px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) 0 var(--cut) / 2px 28px no-repeat,
linear-gradient(var(--accent), var(--accent)) calc(100% - var(--cut) - 28px) 0 / 28px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% var(--cut) / 2px 28px no-repeat,
linear-gradient(var(--accent), var(--accent)) var(--cut) 100% / 28px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) 0 calc(100% - var(--cut) - 28px) / 2px 28px no-repeat,
linear-gradient(var(--accent), var(--accent)) calc(100% - var(--cut) - 28px) 100% / 28px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% calc(100% - var(--cut) - 28px) / 2px 28px no-repeat,
linear-gradient(var(--accent), var(--accent)) 50% 0 / 18px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) 50% 100% / 18px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) 0 50% / 2px 18px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% 50% / 2px 18px no-repeat;
}
.workspace > .panel::after,
.compare > .panel::after {
content: "";
position: absolute;
top: calc(var(--panel-head-h) + var(--guide-inset));
right: var(--guide-inset);
bottom: var(--guide-inset);
left: var(--guide-inset);
z-index: 4;
pointer-events: none;
border: 1px solid rgba(88, 146, 232, .38);
clip-path: polygon(
var(--guide-cut) 0, calc(100% - var(--guide-cut)) 0, 100% var(--guide-cut),
100% calc(100% - var(--guide-cut)), calc(100% - var(--guide-cut)) 100%,
var(--guide-cut) 100%, 0 calc(100% - var(--guide-cut)), 0 var(--guide-cut)
);
}
.hub {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 8;
display: grid;
justify-items: center;
pointer-events: none;
}
.hub-tip {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
padding: 6px 10px;
border-radius: 0;
color: #ffd6d6;
background: #140406;
border: 1px solid var(--danger);
font-size: 10px;
font-weight: 700;
letter-spacing: .22em;
box-shadow: 0 0 16px rgba(255, 42, 50, .45);
}
.hub-tip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #1a1014;
}
.hub-circle, .hub-elliptic {
display: grid;
place-items: center;
background: #141822;
border: 1px solid var(--accent);
box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 0 1px rgba(88, 146, 232, .18);
}
html.kg-tool[data-theme="light"] .hub-circle,
html.kg-tool[data-theme="light"] .hub-elliptic {
background: #fff;
box-shadow: 0 8px 24px rgba(17, 24, 39, .08);
}
.hub-circle {
position: relative;
isolation: isolate;
overflow: visible;
width: 76px;
height: 76px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--muted);
--hub-hex: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}
.hub-circle::before {
content: "";
position: absolute;
inset: 10px;
z-index: 0;
pointer-events: none;
background:
repeating-linear-gradient(135deg, rgba(88, 146, 232, .16) 0 1px, transparent 1px 5px),
#141822;
clip-path: var(--hub-hex);
filter:
drop-shadow(0 0 0.8px var(--accent))
drop-shadow(0 8px 16px rgba(0,0,0,.48));
}
.hub-circle::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(var(--accent), var(--accent)) 50% 1px / 12px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) 50% calc(100% - 2px) / 16px 3px no-repeat,
linear-gradient(var(--accent), var(--accent)) 1px 28% / 8px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) 0 50% / 6px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) 1px 72% / 8px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) calc(100% - 1px) 30% / 10px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% 42% / 6px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) calc(100% - 1px) 54% / 12px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% 66% / 7px 2px no-repeat;
}
.hub-fx {
position: absolute;
inset: 18px;
z-index: 1;
pointer-events: none;
background: rgba(88, 146, 232, .08);
clip-path: var(--hub-hex);
filter: drop-shadow(0 0 0.6px var(--accent));
}
.hub-code {
position: absolute;
top: 2px;
left: calc(100% - 6px);
z-index: 3;
font: 700 8px/1 var(--sans);
letter-spacing: .14em;
color: var(--accent);
pointer-events: none;
white-space: nowrap;
}
.hub-circle svg {
position: relative;
z-index: 3;
width: 22px;
height: 22px;
display: block;
}
.hub-count {
position: relative;
z-index: 3;
}
.hub-circle.is-ok { color: var(--hot); }
.hub-circle.is-ok::before {
background:
repeating-linear-gradient(135deg, rgba(60, 229, 229, .2) 0 1px, transparent 1px 5px),
#141822;
filter:
drop-shadow(0 0 0.8px var(--hot))
drop-shadow(0 0 12px rgba(60, 229, 229, .4))
drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
.hub-circle.is-ok::after {
background:
linear-gradient(var(--hot), var(--hot)) 50% 1px / 12px 2px no-repeat,
linear-gradient(var(--hot), var(--hot)) 50% calc(100% - 2px) / 16px 3px no-repeat,
linear-gradient(var(--hot), var(--hot)) 1px 28% / 8px 2px no-repeat,
linear-gradient(var(--hot), var(--hot)) 0 50% / 6px 2px no-repeat,
linear-gradient(var(--hot), var(--hot)) 1px 72% / 8px 2px no-repeat,
linear-gradient(var(--hot), var(--hot)) calc(100% - 1px) 30% / 10px 2px no-repeat,
linear-gradient(var(--hot), var(--hot)) 100% 42% / 6px 2px no-repeat,
linear-gradient(var(--hot), var(--hot)) calc(100% - 1px) 54% / 12px 2px no-repeat,
linear-gradient(var(--hot), var(--hot)) 100% 66% / 7px 2px no-repeat;
}
.hub-circle.is-ok .hub-fx {
background: rgba(60, 229, 229, .1);
filter: drop-shadow(0 0 0.7px var(--hot));
}
.hub-circle.is-ok .hub-code { color: var(--hot); }
.hub-circle.is-error { color: var(--danger); }
.hub-circle.is-error::before {
background:
repeating-linear-gradient(135deg, rgba(255, 42, 50, .22) 0 1px, transparent 1px 5px),
#1a080a;
filter:
drop-shadow(0 0 0.8px var(--danger))
drop-shadow(0 0 12px rgba(255, 42, 50, .45))
drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
.hub-circle.is-error::after {
background:
linear-gradient(var(--danger), var(--danger)) 50% 1px / 12px 2px no-repeat,
linear-gradient(var(--danger), var(--danger)) 50% calc(100% - 2px) / 16px 3px no-repeat,
linear-gradient(var(--danger), var(--danger)) 1px 28% / 8px 2px no-repeat,
linear-gradient(var(--danger), var(--danger)) 0 50% / 6px 2px no-repeat,
linear-gradient(var(--danger), var(--danger)) 1px 72% / 8px 2px no-repeat,
linear-gradient(var(--danger), var(--danger)) calc(100% - 1px) 30% / 10px 2px no-repeat,
linear-gradient(var(--danger), var(--danger)) 100% 42% / 6px 2px no-repeat,
linear-gradient(var(--danger), var(--danger)) calc(100% - 1px) 54% / 12px 2px no-repeat,
linear-gradient(var(--danger), var(--danger)) 100% 66% / 7px 2px no-repeat;
}
.hub-circle.is-error .hub-fx {
background: rgba(255, 42, 50, .14);
filter: drop-shadow(0 0 0.7px var(--danger));
}
.hub-circle.is-error .hub-code { color: var(--danger); }
.hub-circle.is-same { color: #06210f; }
.hub-circle.is-same::before {
background:
repeating-linear-gradient(135deg, rgba(6, 33, 15, .12) 0 1px, transparent 1px 5px),
#5eea91;
filter:
drop-shadow(0 0 0.8px #5eea91)
drop-shadow(0 0 12px rgba(94, 234, 145, .4))
drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
.hub-circle.is-same .hub-fx { background: rgba(6, 33, 15, .08); filter: none; }
.hub-circle.is-diff {
color: #fff;
font: 600 18px/1 var(--sans);
letter-spacing: .02em;
}
.hub-circle.is-diff::before {
background:
repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 5px),
var(--danger);
filter:
drop-shadow(0 0 0.8px var(--danger))
drop-shadow(0 0 12px rgba(255, 42, 50, .45))
drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
.hub-circle.is-diff .hub-fx { background: rgba(255, 255, 255, .1); filter: none; }
.hub-circle.is-plain {
--hub-outer-w: 48px;
--hub-solid: #141822;
--hub-edge: var(--accent);
width: var(--hub-outer-w);
height: var(--hub-outer-w);
background: transparent;
}
.hub-circle.is-plain > svg:not(.hub-rings) {
width: 16px;
height: 16px;
}
.hub-circle.is-plain.is-diff {
font-size: 14px;
font-weight: 400;
}
.hub-circle.is-plain::before,
.hub-circle.is-plain::after { display: none; }
.hub-circle.is-plain .hub-fx {
background: transparent;
filter: none;
}
.hub-circle.is-plain .hub-rings {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.hub-circle.is-plain .hub-ring-lg-stroke {
fill: var(--hub-edge);
}
.hub-circle.is-plain .hub-ring-lg {
fill: var(--hub-solid);
}
.hub-circle.is-plain .hub-ring-sm-stroke {
fill: rgba(88, 146, 232, .38);
}
.hub-circle.is-plain .hub-ring-sm {
fill: none;
}
.hub-circle.is-plain.is-diff {
--hub-fill: var(--danger);
--hub-edge: var(--danger);
--hub-wash: color-mix(in srgb, var(--danger) 28%, var(--hub-solid));
}
.hub-circle.is-plain.is-same {
--hub-fill: var(--hot);
--hub-edge: var(--hot);
--hub-wash: color-mix(in srgb, var(--hot) 28%, var(--hub-solid));
color: #041616;
}
.hub-circle.is-plain.is-ok {
--hub-fill: var(--hot);
--hub-edge: var(--hot);
--hub-wash: color-mix(in srgb, var(--hot) 28%, var(--hub-solid));
}
.hub-circle.is-plain.is-error {
--hub-fill: var(--danger);
--hub-edge: var(--danger);
--hub-wash: color-mix(in srgb, var(--danger) 28%, var(--hub-solid));
}
.hub-circle.is-plain.is-diff .hub-ring-lg,
.hub-circle.is-plain.is-same .hub-ring-lg,
.hub-circle.is-plain.is-ok .hub-ring-lg,
.hub-circle.is-plain.is-error .hub-ring-lg {
fill: var(--hub-wash);
}
.hub-circle.is-plain.is-diff .hub-ring-sm,
.hub-circle.is-plain.is-same .hub-ring-sm,
.hub-circle.is-plain.is-ok .hub-ring-sm,
.hub-circle.is-plain.is-error .hub-ring-sm {
fill: var(--hub-fill);
}
.hub-circle.is-plain.is-diff .hub-ring-sm-stroke,
.hub-circle.is-plain.is-same .hub-ring-sm-stroke,
.hub-circle.is-plain.is-ok .hub-ring-sm-stroke,
.hub-circle.is-plain.is-error .hub-ring-sm-stroke {
fill: none;
}
html.kg-tool[data-theme="light"] .hub-circle.is-plain {
--hub-solid: #fff;
}
html.kg-tool[data-theme="light"] .hub-circle.is-plain.is-diff,
html.kg-tool[data-theme="light"] .hub-circle.is-plain.is-error {
--hub-wash: color-mix(in srgb, var(--danger) 16%, var(--hub-solid));
}
html.kg-tool[data-theme="light"] .hub-circle.is-plain.is-same {
--hub-wash: color-mix(in srgb, var(--hot) 16%, var(--hub-solid));
}
html.kg-tool[data-theme="light"] .hub-circle.is-plain.is-ok {
--hub-wash: color-mix(in srgb, var(--hot) 16%, var(--hub-solid));
}
html.kg-tool[data-theme="light"] .hub-circle::before,
html.kg-tool[data-theme="light"] .hub-circle.is-ok::before {
background:
repeating-linear-gradient(135deg, rgba(88, 146, 232, .12) 0 1px, transparent 1px 5px),
#fff;
}
html.kg-tool[data-theme="light"] .hub-circle.is-error::before {
background:
repeating-linear-gradient(135deg, rgba(255, 42, 50, .16) 0 1px, transparent 1px 5px),
#fff5f5;
}
html.kg-tool[data-theme="light"] .hub-circle.is-same::before {
background:
repeating-linear-gradient(135deg, rgba(6, 33, 15, .1) 0 1px, transparent 1px 5px),
#5eea91;
}
html.kg-tool[data-theme="light"] .hub-circle.is-diff::before {
background:
repeating-linear-gradient(135deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 5px),
var(--danger);
}
.hub-elliptic {
width: 56px;
padding: 6px;
border-radius: 0;
clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
gap: 6px;
pointer-events: auto;
}
.hub-elliptic button {
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 0;
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
color: var(--muted);
background: transparent;
cursor: pointer;
display: grid;
place-items: center;
}
.hub-elliptic button svg { width: 18px; height: 18px; display: block; }
.hub-elliptic button:hover { color: var(--hot); }
.hub-elliptic button.active {
color: #041616;
background: var(--hot);
box-shadow: 0 0 12px rgba(60, 229, 229, .4);
}
/* Panel 组件锁定：标题栏 .panel-head + 内容区 .panel-body。加工具只往 renderPanel 里填标题/按钮/内容，勿改 token、margin、滚动条。 */
.panel {
position: relative;
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: var(--panel-head-h) minmax(0, 1fr);
overflow: visible;
}
.panel + .panel {
border-left: 1px solid var(--accent);
}
html.kg-tool[data-theme="light"] .panel + .panel { background: #fff; }
html.kg-tool[data-theme="light"] .hub-circle,
html.kg-tool[data-theme="light"] .hub-elliptic {
background: #fff;
box-shadow: 0 8px 24px rgba(17, 24, 39, .08);
}
.panel-head {
display: flex;
align-items: center;
gap: 8px;
height: var(--panel-head-h);
padding: 0 16px;
overflow: visible;
position: relative;
z-index: 6;
border-bottom: 1px solid var(--accent);
}
.panel-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
color: var(--accent);
}
.panel-title::before {
content: "";
width: 7px;
height: 7px;
background: var(--accent);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
box-shadow: 0 0 8px rgba(88, 146, 232, .55);
flex-shrink: 0;
}
.panel-head .spacer { flex: 1; }
.panel-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex-shrink: 0;
}
.panel-actions .ghost:not(.is-on):not(:hover):not(.is-copy-act),
.panel-actions .seg button:not(.active):not(:hover) {
color: var(--accent);
}
.panel-actions .ghost:disabled:not(.is-copy-act),
.panel-actions .ghost.is-on:disabled,
.panel-actions .ghost.is-on:disabled:hover {
color: var(--accent);
}
html.kg-tool[data-theme="light"] .panel-actions .ghost.is-on:disabled,
html.kg-tool[data-theme="light"] .panel-actions .ghost.is-on:disabled:hover {
color: var(--accent);
}
.panel-actions .copy-btn,
.panel-actions .ghost.is-copy-act {
color: #080c18;
background: var(--accent);
border-color: var(--accent);
box-shadow: none;
}
.panel-actions .copy-btn:hover:not(:disabled),
.panel-actions .ghost.is-copy-act:hover:not(:disabled),
.panel-actions .copy-btn.is-copied,
.panel-actions .ghost.is-copy-act.is-copied {
color: #080c18;
background: var(--hot);
border-color: var(--hot);
box-shadow: 0 0 12px rgba(60, 229, 229, .28);
}
.panel-actions .copy-btn:disabled,
.panel-actions .ghost.is-copy-act:disabled,
.panel-actions .copy-btn:disabled:hover,
.panel-actions .ghost.is-copy-act:disabled:hover {
color: #080c18;
background: var(--accent);
border-color: var(--accent);
box-shadow: none;
}
html.kg-tool[data-theme="light"] .panel-actions .copy-btn:hover:not(:disabled),
html.kg-tool[data-theme="light"] .panel-actions .ghost.is-copy-act:hover:not(:disabled) {
color: #080c18;
background: var(--hot);
border-color: var(--hot);
}
.view-cluster {
display: flex;
align-items: center;
gap: 0;
flex-shrink: 0;
}
.view-lead {
--lead: rgba(88, 146, 232, .55);
width: 16px;
height: 7px;
flex-shrink: 0;
pointer-events: none;
background:
linear-gradient(var(--lead), var(--lead)) 0 50% / 100% 1px no-repeat,
linear-gradient(var(--lead), var(--lead)) 0 0 / 1px 7px no-repeat,
linear-gradient(var(--lead), var(--lead)) 100% 0 / 1px 7px no-repeat;
}
.view-cluster:has([data-convert].is-on:not(:disabled)) .view-lead {
--lead: var(--hot);
}
.editor, .output {
min-height: 0;
background: transparent;
}
.editor.output {
display: flex;
flex-direction: column;
overflow: hidden;
}
.code-sheet {
min-width: 0;
padding: var(--line-pad-y) 0;
}
.editor.output .code-sheet {
flex: 1;
min-height: 0;
overflow: auto;
color: var(--code);
}
.code-row {
display: grid;
grid-template-columns: var(--gutter-w) minmax(0, 1fr);
align-items: start;
}
.editor.is-live .code-row {
overflow: hidden;
}
.gutter-n {
padding: 0 16px 0 20px;
color: rgba(247, 247, 251, .32);
font: 14px/20px var(--mono);
text-align: left;
user-select: none;
}
.code-row.is-err .gutter-n,
.code-row.is-diff .gutter-n {
color: var(--danger);
font-weight: 700;
text-shadow: 0 0 8px rgba(255, 42, 50, .4);
}
html.kg-tool[data-theme="light"] .gutter-n { color: #b4b8bf; }
html.kg-tool[data-theme="light"] .code-row.is-err .gutter-n,
html.kg-tool[data-theme="light"] .code-row.is-diff .gutter-n { text-shadow: none; }
mark.cmp-hit {
background: color-mix(in srgb, var(--danger) 28%, transparent);
color: inherit;
box-shadow: inset 0 -1px 0 var(--danger);
border-radius: 0;
padding: 0;
}
html.kg-tool[data-theme="light"] mark.cmp-hit {
background: color-mix(in srgb, var(--danger) 16%, transparent);
}
mark.cmp-hit.is-caret {
display: inline-block;
width: 2px;
min-width: 2px;
padding: 0;
margin: 0 1px 0 0;
color: transparent;
background: var(--danger);
box-shadow: none;
}
.code-line {
position: relative;
margin: 0;
padding: 0 var(--line-pad-right) 0 var(--line-pad-left);
min-width: 0;
min-height: 20px;
font: 14px/20px var(--mono);
font-kerning: none;
font-variant-ligatures: none;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
tab-size: 2;
}
.copy-line {
--tree-gutter: 16px;
--copy-inner: 4px;
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
user-select: text;
}
.copy-line:focus { outline: none; }
.copy-line::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: var(--tree-gutter);
right: calc(var(--tree-gutter) - var(--scroll-edge));
background: color-mix(in srgb, var(--hot) 22%, transparent);
box-shadow: 0 1px 0 var(--hot);
pointer-events: none;
opacity: 0;
z-index: 0;
transition: opacity .12s ease;
}
.copy-line:hover::after,
.copy-line:focus-visible::after { opacity: 1; }
.copy-line .gutter-n {
transition: color .12s ease;
}
.copy-line:hover .gutter-n,
.copy-line:focus-visible .gutter-n {
color: var(--hot);
}
html.kg-tool[data-theme="light"] .copy-line::after {
background: color-mix(in srgb, var(--hot) 14%, transparent);
}
.copy-line .code-row { position: relative; z-index: 1; }
.copy-line-mark {
position: absolute;
top: 0;
right: calc(var(--tree-gutter) - var(--scroll-edge) + var(--copy-inner));
z-index: 2;
width: 14px;
height: 20px;
display: grid;
place-items: center;
color: var(--muted);
opacity: 0;
pointer-events: none;
transition: opacity .12s ease, color .12s ease;
}
.copy-line:hover .copy-line-mark,
.copy-line:focus-visible .copy-line-mark {
opacity: 1;
color: var(--hot);
}
.copy-line-mark svg {
width: 14px;
height: 14px;
display: block;
}
.copy-line-mark .copy-face { grid-area: 1 / 1; }
textarea, .empty, .error-box, .ua-wrap, .tree, .time-board, .hash-board, .jwt-board {
min-width: 0;
}
.panel-body.time-board {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
padding: 0;
overflow: auto;
scrollbar-gutter: stable;
}
.time-row.copy-line {
display: flex;
align-items: center;
gap: 20px;
min-height: 0;
padding: 0 calc(var(--tree-gutter) - var(--scroll-edge) + 22px) 0 var(--content-inset);
}
.time-row.copy-line::before {
content: "";
position: absolute;
left: var(--guide-inset);
right: calc(var(--guide-inset) - var(--scroll-edge));
bottom: 0;
height: 1px;
background: var(--line);
pointer-events: none;
z-index: 1;
}
.time-row.copy-line:last-child::before { content: none; }
.time-row.copy-line:last-child::after { bottom: 1px; }
.time-row .copy-line-mark {
top: 50%;
transform: translateY(-50%);
opacity: .45;
}
.time-k,
.time-v { position: relative; z-index: 1; }
.time-k {
flex: 0 0 108px;
color: var(--muted);
font-size: 14px;
font-weight: 400;
}
.time-v {
flex: 1;
min-width: 0;
color: var(--text);
font: 700 22px/1.25 var(--mono);
font-variant-numeric: tabular-nums;
word-break: break-all;
}
.panel-body.hash-board {
display: grid;
grid-auto-rows: 1fr;
padding: 0;
overflow: auto;
scrollbar-gutter: stable;
}
.hash-board .time-k { flex-basis: 118px; }
.hash-board .time-v {
font: 400 14px/1.4 var(--mono);
font-weight: 400;
}
.panel-body.jwt-board {
display: flex;
flex-direction: column;
padding: 0;
overflow: auto;
scrollbar-gutter: stable;
}
.jwt-block {
position: relative;
padding: 14px calc(var(--content-inset) - var(--scroll-edge) + 22px) 16px var(--content-inset);
}
.jwt-block::before {
content: "";
position: absolute;
left: var(--guide-inset);
right: calc(var(--guide-inset) - var(--scroll-edge));
bottom: 0;
height: 1px;
background: var(--line);
pointer-events: none;
z-index: 1;
}
.jwt-block.copy-line .copy-line-mark {
top: 16px;
opacity: .45;
}
.jwt-block:last-child::before { content: none; }
.jwt-k {
margin-bottom: 8px;
color: var(--muted);
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
}
.jwt-json {
margin: 0;
color: var(--code);
font: 13px/20px var(--mono);
white-space: pre-wrap;
word-break: break-all;
}
.jwt-note {
padding: 12px var(--content-inset);
color: var(--muted);
font-size: 12px;
}
.jwt-claim {
display: flex;
align-items: baseline;
gap: 16px;
padding: 8px 0 0;
font: 13px/1.4 var(--mono);
}
.jwt-claim b {
flex: 0 0 40px;
color: var(--muted);
font-weight: 400;
}
.jwt-claim em {
font-style: normal;
color: var(--hot);
}
.jwt-claim em.is-dead { color: var(--danger); }
.editor.is-live {
overflow: auto;
cursor: text;
letter-spacing: 0;
}
.editor.is-live textarea,
.editor.is-live .code-line,
.editor.is-live .gutter-n {
letter-spacing: 0;
}
.live-sizer {
position: relative;
min-height: 100%;
}
.editor.is-live .code-sheet {
color: transparent;
pointer-events: none;
}
.editor.is-live.is-compare textarea {
color: transparent;
-webkit-text-fill-color: transparent;
}
.editor.is-live.is-compare .code-sheet {
color: var(--code);
}
.err-bar {
position: absolute;
top: 0;
height: 20px;
background: color-mix(in srgb, var(--danger) 28%, transparent);
border-bottom: 1px solid var(--danger);
border-radius: 1px;
pointer-events: none;
box-sizing: border-box;
}
.err-bar.is-caret {
width: 7px;
height: 16px;
margin-top: 2px;
background: var(--danger);
border-bottom: 1px solid var(--danger);
box-shadow: 0 0 8px rgba(255, 42, 50, .55);
}
html.kg-tool[data-theme="light"] .err-bar {
background: color-mix(in srgb, var(--danger) 18%, transparent);
}
textarea {
width: 100%;
height: 100%;
padding: var(--line-pad-y) var(--line-pad-right) var(--line-pad-y) var(--line-pad-left);
border: 0;
resize: none;
outline: none;
color: var(--code);
caret-color: var(--hot);
background: transparent;
font: 14px/20px var(--mono);
font-kerning: none;
font-variant-ligatures: none;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
tab-size: 2;
}
.editor.is-live textarea {
position: absolute;
inset: 0;
z-index: 1;
padding: var(--line-pad-y) var(--line-pad-right) var(--line-pad-y) calc(var(--gutter-w) + var(--line-pad-left));
overflow: hidden;
color: var(--code);
-webkit-text-fill-color: var(--code);
}
textarea::placeholder {
color: var(--muted);
font: 400 14px/20px var(--sans);
letter-spacing: .04em;
font-kerning: normal;
}
.editor.is-live textarea::placeholder {
color: var(--muted);
-webkit-text-fill-color: var(--muted);
font: 400 14px/20px var(--sans);
letter-spacing: .04em;
font-kerning: normal;
}
textarea::-moz-placeholder {
color: var(--muted);
font: 400 14px/20px var(--sans);
letter-spacing: .04em;
opacity: 1;
}
.empty, .upload-zone {
font-family: var(--sans);
letter-spacing: .04em;
}
.editor.is-live textarea.line-probe {
position: absolute;
left: 0;
top: 0;
inset: auto;
width: 0;
height: 0;
min-height: 0;
padding: 0;
border: 0;
margin: 0;
overflow: hidden;
resize: none;
opacity: 0;
pointer-events: none;
color: transparent;
-webkit-text-fill-color: transparent;
background: transparent;
}
.tok-key { color: var(--tok-key); }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--tok-num); }
.tok-kw { color: var(--tok-kw); }
.tok-punc { color: var(--tok-punc); }
.empty {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 24px;
text-align: center;
}
.empty { color: var(--muted); }
.empty strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 15px; }
.panel > .panel-body {
grid-row: 2;
min-width: 0;
min-height: 0;
overflow: auto;
margin: calc(var(--guide-inset) + var(--guide-cut)) 0;
scrollbar-gutter: stable;
}
.panel-body.editor.output {
overflow: hidden;
scrollbar-gutter: auto;
}
.panel + .panel .editor.output {
--line-pad-right: calc(var(--content-inset) - var(--scroll-edge));
}
.panel-body.editor.output .code-sheet,
.panel-body.ua-wrap,
.panel-body.time-board,
.panel-body.hash-board,
.panel-body.jwt-board,
.panel-body.tree,
.panel-body.editor.is-live {
scrollbar-gutter: stable;
}
.panel-body.ua-wrap {
padding: 16px calc(var(--content-inset) - var(--scroll-edge)) 20px var(--content-inset);
}
.panel-body.tree {
--tree-pad-left: var(--content-inset);
--tree-pad-right: calc(var(--content-inset) - var(--scroll-edge));
}
.panel-body::-webkit-scrollbar,
.panel-body .code-sheet::-webkit-scrollbar,
.panel-body.ua-wrap::-webkit-scrollbar,
.panel-body.tree::-webkit-scrollbar,
.panel-body.editor::-webkit-scrollbar,
.charset-menu::-webkit-scrollbar {
width: var(--scroll-edge);
height: var(--scroll-edge);
}
.panel-body::-webkit-scrollbar-thumb,
.panel-body .code-sheet::-webkit-scrollbar-thumb,
.panel-body.ua-wrap::-webkit-scrollbar-thumb,
.panel-body.tree::-webkit-scrollbar-thumb,
.panel-body.editor::-webkit-scrollbar-thumb {
border: 0;
box-shadow: none;
}
.error-box {
position: relative;
align-self: stretch;
width: auto;
height: auto;
min-height: 0;
overflow: hidden;
color: #ff3b3b;
background:
radial-gradient(80% 70% at 50% 50%, rgba(255, 32, 40, .16), transparent 62%),
repeating-linear-gradient(0deg, rgba(255, 40, 48, .05) 0 1px, transparent 1px 3px),
#050103;
text-align: left;
}
.panel > .panel-body.error-box {
margin-left: var(--guide-inset);
margin-right: var(--guide-inset);
}
.error-hud {
position: absolute;
left: 50%;
top: calc(50% - 22px);
transform: translate(-50%, -50%);
width: min(calc(100% - 48px), 440px);
margin: 0;
z-index: 1;
}
.error-hud-panel {
position: relative;
padding: 14px 16px 12px;
background: linear-gradient(180deg, rgba(196, 18, 28, .72), rgba(72, 4, 8, .88));
border: 2px solid #ff2a32;
clip-path: polygon(12px 0, calc(100% - 18px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
box-shadow: 0 0 22px rgba(255, 42, 50, .55), inset 0 0 24px rgba(255, 42, 50, .14);
}
.error-hud-panel::before,
.error-hud-panel::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
pointer-events: none;
border: 2px solid #ff6a6a;
}
.error-hud-panel::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.error-hud-panel::after { right: 10px; bottom: -2px; border-left: 0; border-top: 0; }
.error-hud-kicker {
color: #ffd0d0;
font-size: 11px;
font-weight: 700;
letter-spacing: .32em;
text-shadow: 0 0 8px rgba(255, 42, 50, .7);
}
.error-hud-banner {
margin: 8px 0 0;
color: #fff5f5;
font: 700 22px/1.25 var(--sans);
letter-spacing: .04em;
text-shadow: 0 0 12px rgba(255, 70, 70, .85);
word-break: break-word;
}
.error-hud-msg {
margin-top: 10px;
color: #ffc4c4;
font-size: 12px;
font-weight: 700;
line-height: 1.45;
letter-spacing: .18em;
}
.error-hud-bars {
display: flex;
gap: 6px;
margin-top: 12px;
}
.error-hud-bars i {
display: block;
height: 3px;
flex: 1;
background: rgba(255, 80, 80, .85);
box-shadow: 0 0 8px rgba(255, 42, 50, .7);
}
.error-hud-bars i:nth-child(2) { opacity: .55; flex: .6; }
.error-hud-bars i:nth-child(3) { opacity: .28; flex: .35; }
html.kg-tool[data-theme="light"] .error-box {
background:
radial-gradient(80% 70% at 50% 50%, rgba(255, 32, 40, .12), transparent 62%),
#140406;
}
.copy-wrap {
position: relative;
display: grid;
place-items: center;
flex-shrink: 0;
}
.tip-host {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
cursor: not-allowed;
}
.tip-host button:disabled {
pointer-events: none;
cursor: not-allowed;
}
.action-tip {
position: fixed;
left: 0;
top: 0;
z-index: 80;
display: flex;
align-items: stretch;
min-height: 28px;
padding: 0;
white-space: nowrap;
color: var(--hot);
background: color-mix(in srgb, var(--hot) 14%, #05080f);
border: 1px solid var(--hot);
box-shadow: 0 0 12px color-mix(in srgb, var(--hot) 22%, transparent);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, calc(-100% - 6px));
transition: opacity .16s, visibility 0s linear .16s;
}
.action-tip-bar {
width: 8px;
flex-shrink: 0;
background: var(--hot);
}
.action-tip-titles {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
padding: 4px 12px 4px 10px;
}
.action-tip-zh {
color: var(--hot);
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
line-height: 1.2;
}
.action-tip-en {
color: var(--hot);
font: 500 9px/1.2 var(--sans);
letter-spacing: .16em;
text-transform: uppercase;
opacity: .55;
}
.action-tip-en:empty { display: none; }
html.kg-tool[data-theme="light"] .action-tip {
background: color-mix(in srgb, var(--hot) 10%, #fff);
}
.action-tip.is-on {
opacity: 1;
visibility: visible;
transition: opacity .16s, visibility 0s;
}
.toast {
position: absolute;
right: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
padding: 4px 8px;
white-space: nowrap;
border-radius: 0;
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
color: #041616;
background: var(--hot);
border: 1px solid var(--hot);
box-shadow: 0 0 14px rgba(60, 229, 229, .4);
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s, visibility 0s linear .2s;
}
.toast.show {
opacity: 1;
visibility: visible;
transition: opacity .2s, visibility 0s;
}
.tree {
--tree-pad-left: 16px;
--tree-pad-right: 52px;
--tree-gutter: 16px;
--tree-step: 14px;
padding: 10px var(--tree-pad-right) 36px var(--tree-pad-left);
overflow: auto;
font: 14px/20px var(--mono);
}
.tree details { margin-left: var(--tree-step); }
.tree summary { cursor: pointer; color: var(--muted); }
.tree-row {
position: relative;
--tree-depth: 0;
--tree-inset: calc(var(--tree-depth) * var(--tree-step));
}
.tree-row:hover { z-index: 4; }
.tree-row::after {
content: "";
position: absolute;
left: calc(-1 * var(--tree-inset) - var(--tree-pad-left) + var(--tree-gutter));
right: calc(-1 * var(--tree-pad-left) + var(--tree-gutter));
top: 0;
bottom: 0;
background: color-mix(in srgb, var(--hot) 22%, transparent);
box-shadow: 0 1px 0 var(--hot);
pointer-events: none;
opacity: 0;
z-index: -1;
transition: opacity .12s ease;
}
.tree-row:hover::after { opacity: 1; }
html.kg-tool[data-theme="light"] .tree-row::after {
background: color-mix(in srgb, var(--hot) 14%, transparent);
}
.tree-path-wrap {
display: none;
position: absolute;
left: auto;
right: calc(-1 * var(--tree-pad-left) + var(--tree-gutter));
top: 100%;
z-index: 5;
width: max-content;
max-width: min(420px, calc(100% + var(--tree-inset) + var(--tree-pad-left) - var(--tree-gutter)));
padding-top: 6px;
}
.tree-row:hover > .tree-path-wrap { display: block; }
.tree-path-card {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 6px 8px 6px 10px;
border: 1px solid var(--hot);
background: var(--glass-strong);
box-shadow: 0 0 14px rgba(60, 229, 229, .18);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
appearance: none;
}
.tree-path-kicker {
flex-shrink: 0;
color: var(--muted);
font: 600 12px/16px var(--sans);
}
.tree-path-expr {
min-width: 0;
color: var(--text);
font: 14px/20px var(--mono);
word-break: break-all;
}
.tree-path-copy {
width: 16px;
height: 16px;
flex-shrink: 0;
display: grid;
place-items: center;
color: var(--muted);
}
.tree-path-card:hover .tree-path-copy,
.tree-path-card.is-copied .tree-path-copy { color: var(--hot); }
.tree-path-copy svg {
width: 14px;
height: 14px;
display: block;
}
.tree-path-copy-icon { display: grid; place-items: center; }
.tree-path-copy .is-ok { display: none; }
.tree-path-card.is-copied .is-copy { display: none; }
.tree-path-card.is-copied .is-ok { display: grid; }
.k { color: var(--tok-key); }
.s { color: var(--tok-str); }
.n { color: var(--tok-num); }
.ua-wrap { padding: 16px 52px 20px; overflow: auto; }
.ua-overview-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.ua-section-title {
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
}
.ua-section .ua-section-title { margin-bottom: 12px; }
.ua-section-title::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 8px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
vertical-align: 1px;
background: var(--hot);
}
.ua-section-title.is-browser::before { background: #ff9f43; }
.ua-section-title.is-device::before { background: var(--accent); }
.ua-status {
font-size: 13px;
color: var(--hot);
white-space: nowrap;
}
.ua-status::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 6px;
background: currentColor;
vertical-align: 1px;
}
.ua-status.is-bot { color: var(--danger); }
.ua-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-bottom: 18px;
}
.ua-card {
padding: 12px 14px;
min-height: 72px;
border-radius: 0;
clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
background: rgba(88, 146, 232, .06);
border: 1px solid var(--accent);
box-shadow: inset 3px 0 0 var(--accent);
}
.ua-card.is-browser { box-shadow: inset 3px 0 0 #ff9f43; }
.ua-card.is-os { box-shadow: inset 3px 0 0 var(--accent); }
.ua-card.is-device { box-shadow: inset 3px 0 0 #ff6b9d; }
.ua-card.is-bot { box-shadow: inset 3px 0 0 var(--hot); }
html.kg-tool[data-theme="light"] .ua-card { background: #f6f7f9; }
.ua-card small { color: var(--muted); }
.ua-card div {
margin-top: 8px;
font-weight: 600;
line-height: 1.4;
word-break: break-all;
}
.ua-section + .ua-section { margin-top: 18px; }
.ua-rows { border: 1px solid var(--line); }
.ua-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 12px 14px;
font-size: 13px;
line-height: 1.5;
}
.ua-row + .ua-row { border-top: 1px solid var(--line); }
.ua-row span:first-child { flex: 0 0 88px; color: var(--muted); }
.ua-row span:last-child { flex: 1; text-align: right; word-break: break-all; }
.url-tables .ua-row span:first-child { flex-basis: 96px; }
.url-table + .url-table { margin-top: 22px; }
.status-ok { color: var(--ok); font-weight: 600; }
.status-bot { color: var(--danger); font-weight: 600; }
.upload-zone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
height: auto;
min-height: 0;
margin: 16px;
padding: 24px;
color: var(--muted);
text-align: center;
cursor: pointer;
}
.upload-mark {
display: block;
flex: none;
width: 160px;
height: 160px;
overflow: visible;
}
.upload-mark svg {
display: block;
width: 160px;
height: 160px;
overflow: visible;
flex-shrink: 0;
}
.upload-copy {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.upload-zone strong { display: block; margin: 0; color: var(--text); font-size: 15px; }
.img-preview {
display: grid;
place-items: center;
/* 不要 height:100%：.panel-body 已有上下 margin，100% 会按整行算高，居中点被整体顶下去 */
height: auto;
min-height: 0;
padding: 16px;
overflow: auto;
}
.img-preview img { max-width: 85%; max-height: 85%; object-fit: contain; }
.rail {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
grid-column: 2;
grid-row: 3;
align-self: stretch;
height: auto;
min-height: 0;
margin: 0;
padding: calc(var(--panel-head-h) + 7px) 16px 8px 0;
background: transparent;
border: 0;
overflow: visible;
}
.rail::before {
content: "";
position: absolute;
left: -16px;
top: calc(var(--panel-head-h) + 7px);
bottom: 7px;
width: 16px;
pointer-events: none;
z-index: 0;
background:
linear-gradient(rgba(88, 146, 232, .55), rgba(88, 146, 232, .55)) 6px 0 / 1px 100% no-repeat,
linear-gradient(rgba(88, 146, 232, .55), rgba(88, 146, 232, .55)) 0 0 / 7px 1px no-repeat,
linear-gradient(rgba(88, 146, 232, .55), rgba(88, 146, 232, .55)) 0 100% / 7px 1px no-repeat;
}
.rail-lead {
position: absolute;
right: 100%;
top: 50%;
width: 10px;
height: 1px;
margin-top: -0.5px;
pointer-events: none;
z-index: 1;
background: rgba(88, 146, 232, .55);
}
.rail-item:hover .rail-lead,
.rail-item:focus-visible .rail-lead {
background: var(--hot);
}
.rail-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.rail-title { display: none; }
.rail-item {
position: relative;
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 0;
color: var(--muted);
background: transparent;
text-decoration: none;
cursor: pointer;
font: inherit;
overflow: visible;
}
.rail-item::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill-opacity='0.5'%3E%3Cpolygon fill='%235892E8' points='16,0 24,0 20,4'/%3E%3Cpolygon fill='%235892E8' points='16,40 24,40 20,36'/%3E%3Cpolygon fill='%235892E8' points='0,16 0,24 4,20'/%3E%3Cpolygon fill='%235892E8' points='40,16 40,24 36,20'/%3E%3C/svg%3E") center / 40px 40px no-repeat,
linear-gradient(rgba(12, 16, 28, .9), rgba(12, 16, 28, .9)) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat,
linear-gradient(var(--accent), var(--accent)) 0 0 / 13px 1px no-repeat,
linear-gradient(var(--accent), var(--accent)) 0 0 / 1px 13px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% 0 / 13px 1px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% 0 / 1px 13px no-repeat,
linear-gradient(var(--accent), var(--accent)) 0 100% / 13px 1px no-repeat,
linear-gradient(var(--accent), var(--accent)) 0 100% / 1px 13px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% 100% / 13px 1px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% 100% / 1px 13px no-repeat;
}
.rail-item::after {
content: "";
position: absolute;
inset: 7px;
z-index: 0;
pointer-events: none;
border: 1px solid rgba(88, 146, 232, .4);
}
.rail-item:hover,
.rail-item:focus-visible {
color: #041016;
}
.rail-item:hover::before,
.rail-item:focus-visible::before {
background: var(--hot);
clip-path: polygon(
0 0,
16px 0, 20px 4px, 24px 0,
100% 0,
100% 16px, calc(100% - 4px) 20px, 100% 24px,
100% 100%,
24px 100%, 20px calc(100% - 4px), 16px 100%,
0 100%,
0 24px, 4px 20px, 0 16px
);
filter: drop-shadow(0 0 10px rgba(60, 229, 229, .4));
}
.rail-item:hover::after,
.rail-item:focus-visible::after {
inset: 0;
z-index: 2;
border: 0;
box-shadow: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' stroke='%23041016' stroke-width='1' stroke-linejoin='miter'%3E%3Cpath d='M7 7H16L20 11L24 7H33V16L29 20L33 24V33H24L20 29L16 33H7V24L11 20L7 16Z'/%3E%3C/svg%3E") center / 40px 40px no-repeat;
}
html.kg-tool[data-theme="light"] .rail-item::before {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill-opacity='0.5'%3E%3Cpolygon fill='%235892E8' points='16,0 24,0 20,4'/%3E%3Cpolygon fill='%235892E8' points='16,40 24,40 20,36'/%3E%3Cpolygon fill='%235892E8' points='0,16 0,24 4,20'/%3E%3Cpolygon fill='%235892E8' points='40,16 40,24 36,20'/%3E%3C/svg%3E") center / 40px 40px no-repeat,
linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat,
linear-gradient(var(--accent), var(--accent)) 0 0 / 13px 1px no-repeat,
linear-gradient(var(--accent), var(--accent)) 0 0 / 1px 13px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% 0 / 13px 1px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% 0 / 1px 13px no-repeat,
linear-gradient(var(--accent), var(--accent)) 0 100% / 13px 1px no-repeat,
linear-gradient(var(--accent), var(--accent)) 0 100% / 1px 13px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% 100% / 13px 1px no-repeat,
linear-gradient(var(--accent), var(--accent)) 100% 100% / 1px 13px no-repeat;
}
html.kg-tool[data-theme="light"] .rail-item:hover::before,
html.kg-tool[data-theme="light"] .rail-item:focus-visible::before {
background: var(--hot);
clip-path: polygon(
0 0,
16px 0, 20px 4px, 24px 0,
100% 0,
100% 16px, calc(100% - 4px) 20px, 100% 24px,
100% 100%,
24px 100%, 20px calc(100% - 4px), 16px 100%,
0 100%,
0 24px, 4px 20px, 0 16px
);
filter: drop-shadow(0 0 10px rgba(26, 168, 168, .35));
}
html.kg-tool[data-theme="light"] .rail-item:hover::after,
html.kg-tool[data-theme="light"] .rail-item:focus-visible::after {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' stroke='%23041016' stroke-width='1' stroke-linejoin='miter'%3E%3Cpath d='M7 7H16L20 11L24 7H33V16L29 20L33 24V33H24L20 29L16 33H7V24L11 20L7 16Z'/%3E%3C/svg%3E") center / 40px 40px no-repeat;
}
.rail-item svg {
position: relative;
z-index: 1;
width: 24px;
height: 24px;
max-width: 24px;
max-height: 24px;
flex-shrink: 0;
}
.rail-item svg .plate {
fill: #0c101c;
}
html.kg-tool[data-theme="light"] .rail-item svg .plate {
fill: #fff;
}
.rail-item:hover svg .plate,
.rail-item:focus-visible svg .plate {
fill: var(--hot);
}
.rail-badge {
position: absolute;
left: 50%;
bottom: 4px;
z-index: 2;
transform: translateX(-50%);
padding: 0 3px;
background: #0c101c;
color: inherit;
font: 700 7px/1 var(--sans);
letter-spacing: .1em;
pointer-events: none;
}
html.kg-tool[data-theme="light"] .rail-badge {
background: #fff;
}
.rail-item:hover .rail-badge,
.rail-item:focus-visible .rail-badge {
background: var(--hot);
color: #041016;
}
.rail-label {
position: absolute;
right: calc(100% + 8px);
top: 0;
display: flex;
align-items: center;
min-height: 40px;
padding: 0 22px 0 14px;
border: 1px solid var(--accent);
border-radius: 0;
color: #c4d4f4;
background: rgba(62, 68, 102, .92);
box-shadow: none;
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 8px),
calc(100% - 8px) 100%,
0 100%,
0 58%,
5px 58%,
5px 42%,
0 42%
);
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
line-height: 1;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translateX(6px);
transition: opacity .16s, transform .16s;
z-index: 8;
}
.rail-label::after {
content: "";
position: absolute;
top: 7px;
right: 8px;
width: 8px;
height: 3px;
pointer-events: none;
background:
radial-gradient(circle closest-side, var(--accent) 1.1px, transparent 1.2px) 0 50% / 3px 3px no-repeat,
radial-gradient(circle closest-side, var(--accent) 1.1px, transparent 1.2px) 100% 50% / 3px 3px no-repeat;
}
html.kg-tool[data-theme="light"] .rail-label {
color: #1e293b;
background: rgba(226, 232, 247, .96);
}
.rail-item:hover .rail-label,
.rail-item:focus-visible .rail-label {
opacity: 1;
transform: none;
color: var(--hot);
background: color-mix(in srgb, var(--hot) 12%, #0b1020);
border-color: var(--hot);
box-shadow: 0 0 12px rgba(60, 229, 229, .28);
}
.rail-item:hover .rail-label::after,
.rail-item:focus-visible .rail-label::after {
background:
radial-gradient(circle closest-side, var(--hot) 1.1px, transparent 1.2px) 0 50% / 3px 3px no-repeat,
radial-gradient(circle closest-side, var(--hot) 1.1px, transparent 1.2px) 100% 50% / 3px 3px no-repeat;
}
html.kg-tool[data-theme="light"] .rail-item:hover .rail-label,
html.kg-tool[data-theme="light"] .rail-item:focus-visible .rail-label {
color: var(--hot);
background: color-mix(in srgb, var(--hot) 12%, #fff);
}
.rail-foot { margin-top: auto; }
.rail-pop { position: relative; }
.rail-pop:hover .rail-item .rail-label,
.rail-pop:focus-within .rail-item .rail-label { opacity: 0; }
.rail-card {
position: absolute;
right: calc(100% + 8px);
bottom: 0;
width: 196px;
padding: 14px;
border-radius: 0;
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 8px),
calc(100% - 8px) 100%,
0 100%,
0 calc(50% + 4px),
5px calc(50% + 4px),
5px calc(50% - 4px),
0 calc(50% - 4px)
);
color: var(--hot);
background: color-mix(in srgb, var(--hot) 12%, #0b1020);
border: 1px solid var(--hot);
box-shadow: 0 0 12px rgba(60, 229, 229, .28);
opacity: 0;
pointer-events: none;
transform: translateX(6px);
transition: opacity .16s, transform .16s;
z-index: 8;
}
.rail-card::after {
content: "";
position: absolute;
top: 7px;
right: 14px;
width: 8px;
height: 3px;
pointer-events: none;
background:
radial-gradient(circle closest-side, var(--hot) 1.1px, transparent 1.2px) 0 50% / 3px 3px no-repeat,
radial-gradient(circle closest-side, var(--hot) 1.1px, transparent 1.2px) 100% 50% / 3px 3px no-repeat;
}
html.kg-tool[data-theme="light"] .rail-card {
background: color-mix(in srgb, var(--hot) 12%, #fff);
}
.rail-pop:hover .rail-card, .rail-pop:focus-within .rail-card {
opacity: 1;
pointer-events: auto;
transform: none;
}
.rail-card b {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
line-height: 1;
}
.rail-card p {
margin: 0 0 10px;
color: color-mix(in srgb, var(--hot) 70%, #8aa0c4);
font-size: 12px;
line-height: 1.45;
}
.rail-qr {
position: relative;
width: 100%;
padding: 6px;
line-height: 0;
background: var(--hot);
box-shadow: inset 0 0 18px rgba(4, 16, 22, .35);
}
.rail-qr img {
display: block;
width: 100%;
height: auto;
filter: invert(1);
mix-blend-mode: multiply;
}
.hidden { display: none !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.frost, .workspace, .compare, .top { background: rgba(18, 18, 26, .92); }
}
html.kg-tool #__nuxt,
html.kg-tool #__layout,
html.kg-tool .kg-tool-root {
height: 100%;
}
@media (max-width: 980px) {
.workspace, .compare { grid-template-columns: 1fr; }
.panel + .panel { border-left: 0; border-top: 1px solid var(--accent); }
.ua-cards { grid-template-columns: 1fr 1fr; }
.rail { display: none; }
.shell { grid-template-columns: minmax(0, 1fr); }
.top-actions { padding-right: 0; }
}