:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: #0f0f0f;
background-color: #f6f6f6;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
input,
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.55em 0.9em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
color: #0f0f0f;
background-color: #ffffff;
transition: border-color 0.25s;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
button {
cursor: pointer;
}
button:hover {
border-color: #396cd8;
}
button:active {
border-color: #396cd8;
background-color: #e8e8e8;
}
input,
button {
outline: none;
}
textarea {
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 0.6em 0.8em;
font-size: 0.95em;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
width: 100%;
min-height: 110px;
resize: vertical;
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
font-size: 0.92em;
}
.appShell {
height: 100vh;
display: flex;
background: #f6f6f6;
}
.sidebar {
width: 240px;
padding: 16px;
border-right: 1px solid rgba(0, 0, 0, 0.08);
background: #ffffff;
display: flex;
flex-direction: column;
gap: 16px;
}
.brandTitle {
font-size: 18px;
font-weight: 700;
}
.brandSub {
opacity: 0.7;
font-size: 12px;
}
.nav {
display: grid;
gap: 8px;
}
.navBtn {
text-align: left;
box-shadow: none;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.navBtnActive {
border-color: #396cd8;
background: rgba(57, 108, 216, 0.08);
}
.sidebarFooter {
margin-top: auto;
display: grid;
gap: 8px;
}
.primaryBtn {
border-color: #396cd8;
}
.content {
flex: 1;
padding: 18px;
overflow: auto;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.topbarTitle {
font-size: 18px;
font-weight: 700;
}
.pill {
font-size: 12px;
opacity: 0.85;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 4px 10px;
border-radius: 999px;
background: #fff;
}
.grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stack {
display: grid;
gap: 12px;
}
.card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
padding: 14px;
}
.cardTitle {
font-weight: 700;
margin-bottom: 10px;
}
.kv {
display: grid;
grid-template-columns: 120px 1fr;
gap: 10px;
padding: 6px 0;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.kv:first-of-type {
border-top: none;
}
.k {
opacity: 0.7;
}
.v {
overflow: hidden;
text-overflow: ellipsis;
}
.note {
margin-top: 10px;
opacity: 0.75;
font-size: 12px;
}
.muted {
opacity: 0.7;
}
.ok {
color: #0b7a2a;
font-weight: 700;
}
.bad {
color: #b42318;
font-weight: 700;
}
.errorBox {
border: 1px solid rgba(180, 35, 24, 0.35);
background: rgba(180, 35, 24, 0.07);
padding: 10px 12px;
border-radius: 10px;
color: #7a271a;
white-space: pre-wrap;
margin-bottom: 12px;
}
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.sectionTitle {
font-weight: 700;
margin-bottom: 8px;
}
.checks {
display: grid;
gap: 6px;
margin-bottom: 8px;
}
.toolbar {
display: flex;
gap: 10px;
align-items: center;
margin-top: 10px;
}
.table {
display: grid;
gap: 8px;
}
.rowItem {
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 10px;
padding: 10px;
background: #fff;
}
.rowOpen {
border-color: rgba(57, 108, 216, 0.35);
background: rgba(57, 108, 216, 0.03);
}
.rowMain {
display: grid;
grid-template-columns: 92px 160px 1fr 120px;
gap: 10px;
align-items: center;
}
.toggle {
display: flex;
align-items: center;
gap: 8px;
}
.toggleLabel {
font-size: 12px;
opacity: 0.8;
}
.rowName {
box-shadow: none;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.rowCmd {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0.85;
}
.rowActions {
display: flex;
justify-content: flex-end;
}
.rowDetails {
margin-top: 10px;
display: grid;
gap: 6px;
font-size: 13px;
}
@media (max-width: 1100px) {
.grid {
grid-template-columns: 1fr;
}
.split {
grid-template-columns: 1fr;
}
.rowMain {
grid-template-columns: 92px 1fr;
grid-template-rows: auto auto;
}
.rowCmd {
grid-column: 1 / -1;
}
.rowActions {
grid-column: 1 / -1;
justify-content: flex-start;
}
}
@media (prefers-color-scheme: dark) {
:root {
color: #f6f6f6;
background-color: #2f2f2f;
}
a:hover {
color: #24c8db;
}
.appShell {
background: #121212;
}
.sidebar,
.card,
textarea,
input,
button,
.pill,
.rowItem {
color: #ffffff;
background-color: rgba(20, 20, 20, 0.8);
border-color: rgba(255, 255, 255, 0.12);
}
.navBtnActive {
background: rgba(36, 200, 219, 0.1);
border-color: rgba(36, 200, 219, 0.4);
}
.errorBox {
color: #ffd7d2;
border-color: rgba(255, 93, 80, 0.35);
background: rgba(255, 93, 80, 0.08);
}
.ok {
color: #46c26f;
}
.bad {
color: #ff5d50;
}
}
