*,
*::before,
*::after {
box-sizing: border-box;
}
img,
picture,
video,
canvas,
svg {
max-width: 100%;
}
.wrap { width: min(60rem, 100%); margin: 1.5rem auto; }
.bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.card {
border: 1px solid var(--border);
border-radius: .6rem;
padding: 1rem 1.25rem;
margin-top: 1rem;
background: var(--surface);
}
.grid { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
.grid dt { color: var(--text-muted); }
.form { display: grid; gap: .6rem; max-width: 32rem; }
.form label { display: grid; gap: .2rem; font-size: .85rem; color: var(--text-muted); }
.form input,
.form select {
padding: .4rem .5rem;
border: 1px solid var(--border);
border-radius: .3rem;
font: inherit;
background: var(--surface);
color: var(--text);
}
.err { color: var(--danger); margin: .5rem 0; }
.hint { color: var(--text-muted); font-size: .85rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
code { background: rgba(127, 127, 127, .14); padding: .1rem .35rem; border-radius: .25rem; font-size: .85em; }
.pill {
font-size: .72rem; font-weight: 600; padding: .12rem .55rem; border-radius: 1rem;
background: var(--brand-soft); color: var(--brand-strong); vertical-align: middle;
}
.console {
background: #0b0b14; color: #d7d7e0; padding: .75rem; border-radius: .4rem;
max-height: 26rem; overflow: auto; white-space: pre-wrap; word-break: break-all;
font: .8rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.navlink {
display: block; padding: 1.1rem 1.25rem; border: 1px solid var(--border);
border-radius: .6rem; text-decoration: none; color: var(--text); background: var(--surface);
}
.navlink:hover { border-color: var(--brand); }
.navlink strong { color: var(--brand-strong); display: block; margin-bottom: .25rem; }
.navlink span { color: var(--text-muted); font-size: .9rem; }
button,
.btn {
--_accent: var(--btn);
--_accent-hover: var(--btn-hover);
--_accent-soft: var(--brand-soft);
--_on-accent: #fff;
--_bg: var(--_accent);
--_bg-hover: var(--_accent-hover);
--_fg: var(--_on-accent);
--_border: transparent;
--_underline: none;
--_underline-hover: none;
--_pad: .45rem .9rem;
--_fs: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
padding: var(--_pad);
border: 1px solid var(--_border);
border-radius: .35rem;
background: var(--_bg);
color: var(--_fg);
font: inherit;
font-size: var(--_fs);
line-height: 1.2;
cursor: pointer;
text-decoration: var(--_underline);
white-space: nowrap;
transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
button:hover,
.btn:hover {
background: var(--_bg-hover);
border-color: var(--_border);
text-decoration: var(--_underline-hover);
}
button:focus-visible,
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
button:disabled,
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; cursor: default; }
:where(button, .btn)[color="danger"] {
--_accent: var(--danger);
--_accent-hover: var(--danger-hover);
--_accent-soft: var(--danger-soft);
}
:where(button, .btn)[color="neutral"] {
--_accent: var(--neutral);
--_accent-hover: var(--neutral-hover);
--_accent-soft: var(--neutral-soft);
}
:where(button, .btn)[variant="outline"] {
--_bg: transparent;
--_bg-hover: var(--_accent-soft);
--_fg: var(--_accent);
--_border: var(--_accent);
}
:where(button, .btn)[variant="ghost"] {
--_bg: transparent;
--_bg-hover: var(--_accent-soft);
--_fg: var(--_accent);
}
:where(button, .btn)[variant="link"] {
--_bg: transparent;
--_bg-hover: transparent;
--_fg: var(--_accent);
--_pad: 0;
--_underline-hover: underline;
white-space: normal;
}
:where(button, .btn)[small] { --_pad: .25rem .6rem; --_fs: .85rem; }
:where(button, .btn)[large] { --_pad: .6rem 1.2rem; --_fs: 1.05rem; }
dialog {
margin: auto;
border: 1px solid var(--border);
border-radius: .6rem;
background: var(--surface);
color: var(--text);
padding: 1.25rem 1.5rem;
width: min(34rem, 92vw);
max-height: 85vh;
overflow: auto;
}
dialog::backdrop {
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(2px);
}
.dialog-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 0 0 .75rem;
}
.dialog-head h2,
.dialog-head h3 { margin: 0; }
.dialog-foot {
display: flex;
justify-content: flex-end;
gap: .6rem;
margin-top: 1rem;
}