/* Anzen / SCRTY design tokens. Matches the marketing site + product. */
:root {
    /* core palette */
    --background:         hsl(230 20% 98%);
    --foreground:         hsl(229 28% 28%);    /* SCRTY slate */
    --card:               hsl(0   0% 100%);
    --card-foreground:    hsl(229 28% 28%);
    --border:             hsl(230 12% 90%);
    --input:              hsl(230 12% 90%);
    --muted:              hsl(230 12% 94%);
    --muted-foreground:   hsl(233 13% 40%);

    --primary:            hsl(36 80% 59%);     /* SCRTY orange */
    --primary-foreground: hsl(0  0% 100%);
    --primary-hover:      hsl(36 80% 50%);

    --accent:             hsl(184 38% 50%);    /* teal */
    --accent-foreground:  hsl(0   0% 100%);

    --destructive:        hsl(0 84% 60%);
    --destructive-hover:  hsl(0 78% 50%);
    --destructive-foreground: hsl(0 0% 100%);

    --success:            hsl(160 60% 38%);
    --success-bg:         hsl(160 70% 95%);
    --success-border:     hsl(160 50% 80%);

    --error-bg:           hsl(0  90% 97%);
    --error-border:       hsl(0  84% 86%);

    --radius:             0.5rem;
    --shadow-card:        0 0 0 1px hsl(229 28% 28% / 0.05), 0 2px 4px hsl(0 0% 0% / 0.02);
    --shadow-card-hover:  0 0 0 1px hsl(229 28% 28% / 0.1),  0 8px 16px hsl(0 0% 0% / 0.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    background: var(--background);
    color: var(--foreground);
}

a       { color: var(--primary); text-decoration: none; font-weight: 500; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

.wrap        { max-width: 980px; margin: 32px auto; padding: 0 16px; }
.wrap.narrow { max-width: 440px; }

/* card */
.card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 28px 32px;
    box-shadow: var(--shadow-card);
}

/* typography */
h1 { font-size: 22px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 14px; font-weight: 600; margin: 28px 0 12px;
     text-transform: uppercase; letter-spacing: 0.06em;
     color: var(--muted-foreground); }
p, .muted { color: var(--muted-foreground); margin: 4px 0 16px; }

/* form fields */
label {
    display: block;
    margin: 14px 0 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
input[type=text], input[type=email], input[type=password], input[type=number], select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input);
    border-radius: var(--radius);
    font: inherit;
    background: var(--card);
    color: var(--foreground);
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px hsl(36 80% 59% / 0.2);
}

/* buttons */
button, .btn {
    display: inline-block;
    padding: 9px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
button:hover, .btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    text-decoration: none;
    color: var(--primary-foreground);
}
.btn.secondary {
    background: var(--card);
    color: var(--foreground);
    border-color: var(--border);
}
.btn.secondary:hover { background: var(--muted); color: var(--foreground); border-color: var(--border); }
.btn.danger {
    background: var(--destructive);
    border-color: var(--destructive);
    color: var(--destructive-foreground);
}
.btn.danger:hover { background: var(--destructive-hover); border-color: var(--destructive-hover); }
.btn.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--muted-foreground);
    padding: 6px 10px;
}
.btn.ghost:hover { background: var(--muted); color: var(--foreground); }
.btn.sm { padding: 5px 10px; font-size: 13px; }

/* flash messages */
.flash {
    padding: 10px 14px;
    border-radius: var(--radius);
    margin: 0 0 16px;
    font-size: 14px;
    border: 1px solid transparent;
}
.flash.err { background: var(--error-bg);   color: var(--destructive); border-color: var(--error-border); }
.flash.ok  { background: var(--success-bg); color: var(--success);     border-color: var(--success-border); }

/* navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 24px;
    padding: 14px 20px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.brand {
    display: flex; align-items: center; gap: 12px;
    font-weight: 600; color: var(--foreground);
}
.brand-logo {
    height: 28px;
    width: auto;
    display: block;
}
.brand-logo.lg { height: 52px; }
.brand-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    display: inline-block;
}
.brand-label {
    color: var(--muted-foreground);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.01em;
}
.navbar nav a {
    margin-left: 18px;
    color: var(--muted-foreground);
    font-weight: 500;
}
.navbar nav a.active { color: var(--foreground); }
.navbar nav a:hover  { color: var(--foreground); text-decoration: none; }

/* tables */
table { width: 100%; border-collapse: collapse; }
th, td {
    text-align: left;
    padding: 10px 12px;
    font-size: 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
    background: hsl(230 20% 99%);
}
tbody tr:hover { background: hsl(230 20% 99%); }
tbody tr:last-child td { border-bottom: 0; }
td.actions { text-align: right; white-space: nowrap; }
td.actions form { display: inline-block; margin-left: 4px; }

/* record-type pill */
.type-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: var(--muted);
    color: var(--foreground);
}
.type-pill.t-A     { background: hsl(36 80% 59% / 0.15);  color: hsl(36 80% 35%); }
.type-pill.t-AAAA  { background: hsl(36 80% 59% / 0.15);  color: hsl(36 80% 35%); }
.type-pill.t-CNAME { background: hsl(184 38% 50% / 0.15); color: hsl(184 38% 30%); }
.type-pill.t-MX    { background: hsl(280 50% 60% / 0.15); color: hsl(280 50% 35%); }
.type-pill.t-TXT   { background: hsl(230 12% 60% / 0.18); color: hsl(229 28% 28%); }
.type-pill.t-NS    { background: hsl(160 60% 38% / 0.15); color: hsl(160 60% 28%); }
.type-pill.t-SRV   { background: hsl(220 60% 55% / 0.15); color: hsl(220 60% 35%); }
.type-pill.t-SOA   { background: var(--muted); color: var(--muted-foreground); }

code.value {
    font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--foreground);
    word-break: break-all;
}

/* layouts */
.row { display: flex; gap: 12px; align-items: flex-end; }
.row > .col { flex: 1; }
.row > .col-narrow { width: 110px; flex: 0 0 110px; }

.checkbox { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.checkbox input { width: auto; }
.checkbox label { margin: 0; color: var(--foreground); text-transform: none; letter-spacing: 0; font-weight: 400; }

/* record edit row: inputs sit tighter and clearly stand apart from view rows */
tr.rec-edit td   { background: hsl(230 20% 98%); padding: 8px 12px; }
tr.rec-edit input,
tr.rec-edit select { padding: 6px 8px; font-size: 13px; }

/* small inline form spacing */
form.inline { display: inline-block; margin: 0; }

/* footer/help */
.help { color: var(--muted-foreground); font-size: 13px; }