#dns-workspace { max-width: 1320px; margin: 0 auto; }
.dns-hero, .dns-section-heading, .dns-history-row, .dns-candidate, .dns-source-list > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.dns-hero { padding: 20px 0 24px; }
.dns-hero h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -1.3px; margin: 8px 0; }
.dns-hero p, .dns-section-heading p { color: var(--muted, #97a5b7); }
.dns-hero-actions, .dns-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dns-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid #293643; border-radius: 14px; overflow: hidden; margin-bottom: 24px; background: #293643; }
.dns-summary article { background: #111b25; padding: 20px; display: grid; gap: 10px; }
.dns-summary span, .dns-summary small { color: #94a4b7; font-size: 11px; }
.dns-summary strong { font-size: 20px; }
#dns-workspace .panel { margin-bottom: 22px; padding: 26px; }
#dns-workspace label { display: grid; gap: 7px; font-size: 12px; color: #b9c5d3; }
#dns-workspace input, #dns-workspace select { min-width: 0; width: 100%; border: 1px solid #344454; border-radius: 7px; background: #0d151f; color: #e5edf4; padding: 10px 12px; }
#dns-workspace form:not([method="dialog"]) { display: flex; align-items: end; gap: 12px; }
#dns-workspace form label { flex: 1; }
.dns-investigate h2 { margin: 7px 0; }
.dns-investigate > div > p { color: #9aaabd; }
.dns-investigate form { margin-top: 22px; }
.dns-help { color: #94a4b7; font-size: 12px; line-height: 1.6; }
.dns-rule-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 18px; }
.dns-rule-columns > div { min-width: 0; }
.dns-rule-columns h3 span { font-size: 12px; color: #89b9ad; padding-left: 6px; }
.dns-rules { list-style: none; padding: 0; max-height: 310px; overflow: auto; }
.dns-rules li { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #243241; }
.dns-rules code { overflow-wrap: anywhere; font-size: 12px; }
.dns-rules .button { flex: none; font-size: 11px; padding: 5px 8px; }
.dns-sources, .dns-scan-coverage { border-top: 1px solid #2a3947; margin-top: 24px; padding-top: 18px; }
#dns-workspace summary { cursor: pointer; color: #b7cbdb; }
.dns-source-list { margin: 18px 0; }
.dns-source-list > div { padding: 10px 0; border-bottom: 1px solid #243241; align-items: center; }
.dns-source-list > div > div { flex: 1; overflow-wrap: anywhere; }
.dns-source-list small { display: block; color: #899fb0; margin-top: 5px; }
.dns-source-state { color: #83bea8; }
.dns-policy-toggle { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.dns-policy-toggle p { color: #97a9bd; font-size: 12px; }
.dns-scan-heading { border-top: 1px solid #2a3947; padding-top: 18px; margin-top: 22px; }
.dns-scan-heading small, .dns-candidate small, .dns-history small { color: #9aaabd; font-size: 11px; }
.dns-candidate { padding: 18px 0; border-bottom: 1px solid #243241; }
.dns-candidate > div { min-width: 0; }
.dns-candidate strong { display: block; margin: 8px 0; overflow-wrap: anywhere; }
.dns-candidate p { color: #b1bfce; font-size: 12px; line-height: 1.6; }
.dns-candidate .button { flex-shrink: 0; }
.dns-candidate details { margin-top: 10px; font-size: 12px; }
.dns-badge { color: #8dbbac; border-radius: 4px; padding: 3px 7px; background: #18362c; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.blocked .dns-badge { color: #e5bd81; background: #3b2c19; }
.unknown .dns-badge { color: #bdc6d6; background: #263342; }
.dns-history-row { padding: 18px 0; border-bottom: 1px solid #243241; }
.dns-history-row p, .dns-coverage p, .dns-scan-coverage p { color: #98aabc; font-size: 12px; line-height: 1.7; }
.dns-history-row .button { flex-shrink: 0; }
.dns-feedback:not(:empty), .dns-notice { padding: 14px 18px; border-radius: 8px; background: #18312e; color: #bce0d5; margin-bottom: 18px; }
.dns-feedback.error, .dns-notice { background: #3d2924; color: #edc0ae; }
#dns-review { width: min(650px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; border: 1px solid #425361; border-radius: 16px; background: #131f2b; color: #dce7ef; padding: 30px; }
#dns-review::backdrop { background: #030a11b8; }
#dns-review p { line-height: 1.7; }
#dns-review pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; background: #0a131b; padding: 12px; }
#dns-review .dialog-close { float: right; color: #b2c6d7; background: transparent; border: 0; font-size: 24px; cursor: pointer; }
@media (max-width: 850px) { .dns-hero { flex-direction: column; } .dns-summary { grid-template-columns: 1fr 1fr; } .dns-rule-columns { grid-template-columns: 1fr; } #dns-workspace form:not([method="dialog"]) { flex-wrap: wrap; } .dns-candidate { flex-direction: column; } }
@media (max-width: 500px) { #dns-workspace .panel { padding: 18px; } .dns-section-heading, .dns-history-row { flex-direction: column; } #dns-workspace form:not([method="dialog"]) { flex-direction: column; align-items: stretch; } .dns-summary article { padding: 14px; } }