:root { color-scheme: light dark; --font-mono: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace; --font-body: var(--font-mono); --font-ui: var(--font-mono); }
* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
body { background: var(--page-bg, var(--bg)); color: var(--fg); font-family: var(--font-body, var(--font-mono)); height: 100vh; display: flex; flex-direction: column; overflow: hidden; line-height: 1.4; letter-spacing: var(--body-letter-spacing, 0); transition: background-color 0.2s ease, color 0.2s ease; -webkit-font-smoothing: antialiased; }
a { color: var(--link-color, inherit); text-decoration: var(--link-decoration, none); }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; }
input, select, textarea { font: inherit; color: inherit; background: transparent; }
code, pre { font-family: var(--font-mono); }
table { width: 100%; border-collapse: collapse; }
ul, ol, dl { margin: 0; padding-left: var(--list-padding, 1.25rem); }
ul { list-style: var(--list-style, none); }
ul li::before { content: var(--list-marker, "- "); margin-left: calc(var(--list-marker-indent, 1.25rem) * -1); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track, var(--bg)); border-left: 1px solid var(--scroll-border, var(--gray-dark)); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb, var(--fg)); border: 2px solid var(--scroll-track, var(--bg)); }

.header { flex: 0 0 var(--header-h); height: var(--header-h); display: flex; justify-content: space-between; align-items: center; padding: 0 1.5rem; border-bottom: var(--bar-border-width, 1px) solid var(--bar-border, var(--border)); background: var(--bar-bg, var(--bg)); z-index: 100; }
.header-title { font-weight: var(--header-title-weight, 700); font-size: var(--header-title-size, 1.1rem); letter-spacing: var(--header-title-letter-spacing, 2px); text-transform: var(--header-title-transform, uppercase); }
.nav { display: flex; gap: 0.75rem; }
.main { flex: 1 1 auto; overflow-y: auto; padding: var(--main-padding, 2.5rem 1.5rem); width: 100%; }
.footer { flex: 0 0 var(--footer-h); height: var(--footer-h); display: flex; justify-content: space-between; align-items: center; padding: 0 1.5rem; border-top: var(--bar-border-width, 1px) solid var(--bar-border, var(--border)); background: var(--bar-bg, var(--bg)); z-index: 100; }
.footer-version { font-size: var(--footer-font-size, 0.65rem); font-weight: var(--footer-font-weight, bold); text-transform: var(--footer-transform, uppercase); letter-spacing: var(--footer-letter-spacing, 1px); opacity: 0.8; }
.footer-actions { display: flex; gap: 0.75rem; }

.btn { background: var(--btn-bg, transparent); border: var(--btn-border-width, 1px) var(--btn-border-style, solid) var(--btn-border, var(--border)); color: var(--btn-color, var(--fg)); padding: var(--btn-padding, 0.4rem 1rem); font-family: var(--font-ui, var(--font-mono)); font-size: var(--btn-font-size, 0.8rem); font-weight: var(--btn-font-weight, bold); text-transform: var(--btn-text-transform, uppercase); letter-spacing: var(--btn-letter-spacing, 0); cursor: pointer; display: inline-flex; align-items: center; gap: var(--btn-gap, 0.5rem); border-radius: var(--btn-radius, 0); box-shadow: var(--btn-shadow, none); transition: background 0.1s steps(2), color 0.1s steps(2), transform 0.1s ease; }
.btn:hover { background: var(--btn-hover-bg, var(--fg)); color: var(--btn-hover-color, var(--bg)); transform: var(--btn-hover-transform, none); }
.btn.active { background: var(--btn-active-bg, var(--fg)); color: var(--btn-active-color, var(--bg)); }

.icon { font-style: normal; font-size: var(--icon-size, 1.1rem); line-height: 1; }

.panel { border: var(--panel-border-width, 1px) var(--panel-border-style, solid) var(--panel-border, var(--border)); padding: var(--panel-padding, 1.5rem); margin-bottom: var(--panel-margin, 2rem); position: relative; background: var(--panel-bg, transparent); border-radius: var(--panel-radius, 0); box-shadow: var(--panel-shadow, none); }
.panel-label { position: absolute; top: var(--panel-label-top, -0.65rem); left: var(--panel-label-left, 1rem); background: var(--panel-label-bg, var(--bg)); padding: var(--panel-label-padding, 0 0.5rem); font-size: var(--panel-label-size, 0.75rem); font-weight: var(--panel-label-weight, bold); text-transform: var(--panel-label-transform, uppercase); letter-spacing: var(--panel-label-letter-spacing, 0); color: var(--panel-label-color, var(--fg)); border-radius: var(--panel-label-radius, 0); display: var(--panel-label-display, inline-block); }

.heading { font-size: var(--heading-size, 1.5rem); font-weight: var(--heading-weight, 700); margin-bottom: var(--heading-margin, 1.5rem); text-transform: var(--heading-transform, uppercase); letter-spacing: var(--heading-letter-spacing, 0); }
.heading::before { content: var(--heading-prefix, "> "); }

.tui-table { margin-top: 0.5rem; border-radius: var(--table-radius, 0); overflow: hidden; }
.tui-table th, .tui-table td { border: var(--table-border-width, 1px) var(--table-border-style, solid) var(--table-border, var(--border)); padding: 0.6rem; text-align: left; font-size: 0.85rem; }
.tui-table th { background: var(--table-head-bg, var(--fg)); color: var(--table-head-color, var(--bg)); text-transform: var(--table-head-transform, uppercase); font-weight: var(--table-head-weight, bold); border-color: var(--table-head-border, var(--table-head-bg, var(--fg))); }

.status-dot { margin-right: 0.5rem; font-size: 1.1rem; line-height: 0; display: inline-block; vertical-align: middle; }
.status-ok { color: var(--status-ok); }
.status-warn { color: var(--status-warn); }
.status-err { color: var(--status-err); }

.tui-input-group { margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.tui-label { font-size: 0.8rem; font-weight: var(--label-weight, bold); text-transform: var(--label-transform, uppercase); letter-spacing: var(--label-letter-spacing, 0); }
.tui-input { background: var(--input-bg, transparent); border: var(--input-border-width, 1px) var(--input-border-style, solid) var(--input-border, var(--border)); color: var(--fg); padding: var(--input-padding, 0.6rem); font-family: var(--font-ui, var(--font-mono)); font-size: var(--input-font-size, 0.9rem); width: 100%; border-radius: var(--input-radius, 0); }
select.tui-input { background: var(--input-select-bg, var(--bg)); }
select.tui-input option, select.tui-input optgroup { background: var(--input-select-bg, var(--bg)); color: var(--fg); }
.tui-input:focus { outline: 2px solid var(--input-focus, var(--border)); outline-offset: 2px; }

.tui-badge { padding: 0.1rem 0.4rem; font-size: 0.7rem; font-weight: var(--badge-weight, bold); background: var(--badge-bg, var(--fg)); color: var(--badge-color, var(--bg)); text-transform: var(--badge-transform, uppercase); letter-spacing: var(--badge-letter-spacing, 0); border-radius: var(--badge-radius, 0); }
.tui-badge.outline { background: transparent; color: var(--badge-outline-color, var(--fg)); border: var(--badge-outline-width, 1px) solid var(--badge-outline-border, var(--border)); }

.progress-container { height: var(--progress-height, 1.2rem); border: var(--progress-border-width, 1px) solid var(--progress-border, var(--border)); margin: 0.5rem 0; position: relative; overflow: hidden; background: var(--progress-bg, transparent); border-radius: var(--progress-radius, 0); }
.progress-bar { height: 100%; background: var(--progress-fill, var(--fg)); width: 0%; transition: width 0.3s ease; }
.progress-blocks { font-size: 0.9rem; letter-spacing: -2px; overflow: hidden; white-space: nowrap; color: var(--progress-blocks-color, var(--fg)); }

.code-block { background: var(--code-bg, var(--gray-dark)); color: var(--code-color, var(--fg)); padding: 1rem; font-size: 0.8rem; overflow-x: auto; border-left: var(--code-border-width, 4px) solid var(--code-border, var(--fg)); border-radius: var(--code-radius, 0); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--grid-gap, 2rem); }

.text-dim { color: var(--text-dim, var(--gray-mid)); }
.cursor { display: var(--cursor-display, inline-block); width: 0.6rem; height: 1.2rem; background: var(--cursor-color, var(--fg)); margin-left: 0.4rem; animation: blink 1s steps(2) infinite; }
.divider { height: 1px; background: var(--divider-color, var(--gray-dark)); margin: var(--divider-margin, 2rem 0); }
.divider.compact { margin: var(--divider-compact-margin, 1rem 0); }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (max-width: 600px) { .btn-label { display: none; } .header, .footer { padding: 0 1rem; } .main { padding: 1.5rem 1rem; } .footer-version { font-size: 0.6rem; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }