@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&family=Cormorant+Garamond:wght@600;700&display=swap');

:root {
    --lux-bg: #f4f1eb;
    --lux-bg-2: #fdfbf7;
    --lux-surface: rgba(255, 255, 255, 0.9);
    --lux-line: #e4dccf;
    --lux-title: #2f2b24;
    --lux-text: #49433a;
    --lux-muted: #7d7568;
    --lux-gold: #b9925c;
    --lux-gold-dark: #96723f;
    --lux-danger: #a44747;
    --lux-shadow: 0 10px 35px rgba(53, 42, 24, 0.08);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    color: var(--lux-text);
    background:
        radial-gradient(900px 500px at 90% -10%, #fff7e8 0%, transparent 60%),
        linear-gradient(180deg, var(--lux-bg-2) 0%, var(--lux-bg) 100%);
}

.page-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 270px 1fr;
}

.sidebar {
    background: linear-gradient(180deg, #fffdf9 0%, #f5efe4 100%);
    border-right: 1px solid var(--lux-line);
    padding: 24px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand {
    font-family: 'Cormorant Garamond', serif;
    color: var(--lux-title);
    font-weight: 700;
    letter-spacing: 0.03em;
    font-size: 1.65rem;
    margin-bottom: 20px;
}

.sidebar nav {
    display: grid;
    gap: 8px;
}

.sidebar a {
    text-decoration: none;
    color: var(--lux-title);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: .2s ease;
}

.sidebar a:hover {
    background: #fff;
    border-color: var(--lux-line);
    transform: translateX(2px);
}

.main {
    padding: 28px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--lux-title);
}

h1 { margin: 0; font-size: 2rem; }
h2 { margin-bottom: 12px; font-size: 1.55rem; }

.user-chip {
    border: 1px solid var(--lux-line);
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: .9rem;
    color: var(--lux-muted);
}

.panel, .card {
    border: 1px solid var(--lux-line);
    background: var(--lux-surface);
    box-shadow: var(--lux-shadow);
    border-radius: 16px;
}

.panel { padding: 18px; }
.card { padding: 16px; }

.grid.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

label {
    font-size: .86rem;
    font-weight: 600;
    color: var(--lux-muted);
    margin-bottom: 6px;
}

input, select, textarea {
    border: 1px solid var(--lux-line) !important;
    border-radius: 10px !important;
}

input:focus, select:focus, textarea:focus {
    border-color: #c6ac83 !important;
    box-shadow: 0 0 0 .2rem rgba(185, 146, 92, .2) !important;
}

.btn-lux {
    background: linear-gradient(145deg, var(--lux-gold), var(--lux-gold-dark));
    color: #fff;
    border: 0;
    border-radius: 9px;
    padding: 7px 12px;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .01em;
    box-shadow: 0 2px 8px rgba(72, 50, 18, 0.15);
}

.btn-lux:hover { color: #fff; filter: brightness(1.03); }

.btn-lux.btn-sm {
    padding: 5px 10px;
    font-size: .86rem;
    border-radius: 8px;
}

.btn-danger-soft {
    background: linear-gradient(145deg, #c46868, var(--lux-danger));
    color: #fff;
    border: 0;
    border-radius: 9px;
    padding: 6px 10px;
    font-size: .88rem;
}

.flash {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid;
    margin-bottom: 12px;
}

.flash.success {
    border-color: #cde7d8;
    background: #edf8f1;
    color: #2d7a4f;
}

.flash.error {
    border-color: #efc7c7;
    background: #fff1f1;
    color: #9f3939;
}

pre {
    margin: 0;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--lux-line);
    background: #faf7f1;
    max-height: 460px;
    overflow: auto;
}

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 22px;
}

.login-card {
    width: min(500px, 100%);
    border: 1px solid var(--lux-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--lux-shadow);
    padding: 28px;
}

.login-card h1 {
    font-size: 2.1rem;
    margin-bottom: 2px;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.helper-text {
    font-size: .86rem;
    color: var(--lux-muted);
}

.handle-hover {
    border-bottom: 1px dashed var(--lux-gold-dark);
    cursor: help;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.status-failed {
    background: #ffe9e9;
    color: #b22727;
    border: 1px solid #f4b5b5;
}

.status-successful {
    background: #edf8f1;
    color: #2f7b4f;
    border: 1px solid #b8dec7;
}

.status-notify {
    background: #eaf3ff;
    color: #1f5ea8;
    border: 1px solid #bfd6f5;
}

.status-other {
    background: #fff7e5;
    color: #8f640a;
    border: 1px solid #ead39f;
}

.record-form-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr 2fr .8fr .8fr .8fr;
    gap: 8px;
}

.table thead th {
    color: #6e6558;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.table-filter-row th {
    background: #fcfaf5;
}

.table-filter-input {
    min-width: 90px;
}

.table-pager {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;
}

.toggle-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #d7cfbf;
    transition: .2s ease;
    border-radius: 999px;
    border: 1px solid #cabfae;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    top: 2px;
    background: #fff;
    transition: .2s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.switch input:checked + .switch-slider {
    background: linear-gradient(145deg, var(--lux-gold), var(--lux-gold-dark));
    border-color: #b68f5c;
}

.switch input:checked + .switch-slider:before {
    transform: translateX(20px);
}

.switch-state {
    font-size: .83rem;
    color: var(--lux-muted);
    min-width: 38px;
}

.dnssec-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dnssec-stat {
    border: 1px solid var(--lux-line);
    background: #fffcf8;
    border-radius: 12px;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
}

.dnssec-stat-label {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--lux-muted);
}

.dnssec-toggle-wrap {
    border: 1px solid var(--lux-line);
    background: #fffcf8;
    border-radius: 12px;
    padding: 10px 12px;
    justify-content: center;
}

.dnssec-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.dnssec-on {
    background: #e9f8ef;
    border: 1px solid #b8dfc7;
    color: #2d7c4f;
}

.dnssec-off {
    background: #fff0f0;
    border: 1px solid #ebc2c2;
    color: #a03f3f;
}

.dnssec-unknown {
    background: #fff7e6;
    border: 1px solid #ebd5a8;
    color: #8a6620;
}

.dnssec-key-fragment {
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dnskey-modal {
    position: fixed;
    inset: 0;
    background: rgba(24, 20, 15, 0.48);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 18px;
}

.dnskey-modal.open {
    display: flex;
}

.dnskey-modal-dialog {
    width: min(900px, 100%);
    border: 1px solid var(--lux-line);
    background: #fffdf9;
    border-radius: 14px;
    box-shadow: var(--lux-shadow);
    padding: 14px;
}

.dnskey-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

@media (max-width: 1080px) {
    .page-shell { grid-template-columns: 1fr; }
    .sidebar { position: relative; height: auto; }
    .grid.two { grid-template-columns: 1fr; }
    .record-form-grid { grid-template-columns: 1fr; }
    .dnssec-overview { grid-template-columns: 1fr; }
}