:root{--bg:#0a0e14;--surface:#12161f;--border:#1e2430;--text:#e8ecf2;--text-dim:#8b95a5;--cyan:#22d3ee;--blue:#2563eb;--grade-a:#2ecc71;--grade-f:#ef4444}
body { font-family: -apple-system, sans-serif; background: #1a1a1a; color: #eee; padding: 2rem; }
a { color: #6ab7ff; text-decoration: none; }
table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
th, td { text-align: left; padding: 0.6rem; border-bottom: 1px solid #333; vertical-align: top; }
.btn { background: #2d7dd2; color: #fff; padding: 0.5rem 1rem; border-radius: 4px; border: none; cursor: pointer; font-size: 1rem; display: inline-block; }
.btn + .btn { margin-left: 0.5rem; }
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.nav-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nav-actions .btn {
    margin: 0;
    padding: 0.5rem 1.1rem;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;

    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #04121c;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.nav-actions .btn:hover {
    opacity: 0.85;
}


@media (max-width: 600px) {
  .top-bar { gap: 0.8rem; }
  .nav-actions { gap: 0.4rem; }
  .nav-actions .btn { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
  .lang-switch { width: 100%; margin-top: 0.3rem; }
  .lang-switch {
    position: relative;
  }

  .lang-switch-menu {
    right: 0;
    left: auto;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
  }
}
/* --- Language switcher --- */

/* Language switcher */


.lang-switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.lang-switch {
    width: auto;
    margin-top: 0.3rem;
    align-self: flex-start;
}

.lang-switch summary {
    list-style: none;
}

.lang-switch summary::-webkit-details-marker {
    display: none;
}

.lang-switch-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: none;
    color: var(--text-dim, #8b95a5);
    padding: 0.35rem 0.4rem;
    margin: 0;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
}

.lang-switch-trigger::after {
    content: "▾";
    font-size: 0.7rem;
    opacity: 0.6;
    line-height: 1;
    transition: transform 0.15s ease;
}

.lang-switch[open] .lang-switch-trigger::after {
    transform: rotate(180deg);
}

.lang-switch-trigger:hover {
    color: var(--text, #e8ecf2);
}

.lang-switch-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 70px;
    background: var(--surface, #12161f);
    border: 1px solid var(--border, #1e2430);
    border-radius: 8px;
    padding: 0.3rem;
    z-index: 999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.lang-switch-menu a {
    display: block;
    padding: 0.4rem 0.65rem;
    border-radius: 5px;
    color: var(--text-dim, #8b95a5);
    text-decoration: none;
    margin: 0;
    opacity: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
}

.lang-switch-menu a:hover {
    background: var(--border, #1e2430);
    color: var(--text, #e8ecf2);
}

.lang-switch-menu a.active {
    color: var(--text, #e8ecf2);
    font-weight: 600;
}

.status-box { background: #222; padding: 1rem; border-radius: 6px; margin-bottom: 1.5rem; }
.field-group { margin-bottom: 1.2rem; }
.field-group label { display: block; font-size: 0.85rem; opacity: 0.8; margin-bottom: 0.3rem; }
.field-group input { width: 100%; padding: 0.6rem; background: #111; border: 1px solid #444; color: #eee; border-radius: 4px; box-sizing: border-box; font-family: monospace; font-size: 0.85rem; }
.field-hint { font-size: 0.75rem; opacity: 0.5; margin-top: 0.25rem; }
.password-wrapper { position:relative; margin: 0.5rem 0 1rem; }
.password-wrapper input { margin: 0; }
.password-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); cursor:pointer; opacity:0.6; user-select:none; }
.password-toggle:hover { opacity:1; }
.connected { color: #2ecc71; }
.not-connected { color: #f39c12; }
button { background: #2d7dd2; color: #fff; padding: 0.6rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; }
button.link-btn { background: none; border: none; color: #e74c3c; text-decoration: underline; cursor: pointer; padding: 0; font-size: 0.9rem; }
input { width: 100%; padding: 0.6rem; margin: 0.5rem 0 1rem; background: #222; border: 1px solid #444; color: #eee; border-radius: 4px; box-sizing: border-box; }
.error { color: #e74c3c; }
.success { color: #2ecc71; }

h1 { font-size: 1.4rem; }
.overall-banner { padding: 1.2rem; border-radius: 8px; text-align: center; font-size: 1.1rem; font-weight: bold; margin-bottom: 1.5rem; }
.overall-ok { background: #1e4620; color: #2ecc71; }
.overall-issue { background: #4a2020; color: #e74c3c; }
.category-row { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid #333; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.score-box { text-align: center; margin: 1.5rem 0; }
.score-letter { font-size: 2.5rem; font-weight: bold; }
.uptime-box { text-align: center; opacity: 0.8; font-size: 0.9rem; margin-bottom: 1.5rem; }
.footer { text-align: center; margin-top: 2rem; font-size: 0.8rem; opacity: 0.5; }
.footer a { color: #6ab7ff; }

.top-bar .logo-link {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.2rem;
  color: var(--text);
}
.top-bar .logo-link img { height: 28px; }

.info-bar {
  background: #222; padding: 1.2rem; border-radius: 6px; margin-bottom: 0.75rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.info-col { display: flex; flex-direction: column; }
.info-col-bordered { border-left: 1px solid #333; padding-left: 1.5rem; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 820px) {
  body { padding: 1rem; }
  .info-bar { grid-template-columns: 1fr; gap: 1.2rem; }
  .info-col-bordered { border-left: none; padding-left: 0; border-top: 1px solid #333; padding-top: 1rem; }
  table { font-size: 0.85rem; }
  th, td { padding: 0.45rem; }
  h1 { font-size: 1.4rem; }
}

@media (max-width: 600px) {
  .top-bar { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .top-bar > div { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }
  .btn { font-size: 0.85rem; padding: 0.45rem 0.8rem; }
  .btn + .btn { margin-left: 0; }
}

@media (max-width: 700px) {

  .table-scroll {
    overflow-x: visible !important;
    width: 100%;
    box-sizing: border-box;
  }

  .table-scroll > table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .table-scroll > table > thead {
    display: none !important;
  }

  .table-scroll > table > tbody,
  .table-scroll > table > tbody > tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .table-scroll > table > tbody > tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 0.4rem;
    gap: 0;
  }

  .table-scroll > table > tbody > tr > td {
    display: flex;
    flex-direction: column;
    border: none;
    padding: 0.5rem 0.7rem;
    box-sizing: border-box;
    min-width: 0;
  }

/* Details column takes the full card width */
.table-scroll > table > tbody > tr > td:nth-child(4) {
    grid-column: 1 / -1;
    width: 100%;
}

/* Inner scan-result table */
.table-scroll > table > tbody > tr > td > table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    margin: 0.4rem 0 0;
    box-sizing: border-box;
}

.table-scroll > table > tbody > tr > td > table > tbody {
    display: block !important;
    width: 100%;
}

/* Each scan result gets its own card */
.table-scroll > table > tbody > tr > td > table > tbody > tr {
    display: grid !important;
    grid-template-columns: 40% minmax(0, 60%);
    width: 100% !important;
    box-sizing: border-box;

    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;

    margin: 0 0 0.7rem;
    padding: 0.45rem 0;
}

/* DNS details row must use the full available width */
.table-scroll > table > tbody > tr > td > table > tbody > tr.dns-details-row {
    display: block !important;
    width: 100% !important;
    grid-template-columns: none !important;
}

.table-scroll > table > tbody > tr > td > table > tbody > tr.dns-details-row > td {
    display: block !important;
    width: 100% !important;
    padding: 0.45rem 0 !important;
    box-sizing: border-box;
}

.table-scroll .dns-details-row details,
.table-scroll .dns-details-row details > div {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* Inner cells */
.table-scroll > table > tbody > tr > td > table td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    border: none !important;
    padding: 0.55rem 0.7rem !important;
    box-sizing: border-box;
    vertical-align: top;
}

.table-scroll > table > tbody > tr > td > table td:first-child {
    white-space: normal;
    overflow-wrap: anywhere;
}

.table-scroll > table > tbody > tr > td > table td:last-child {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.table-scroll > table > tbody > tr > td > table td::before {
    content: none !important;
}

/* "How to fix" — full width inside the scan-result card */
.table-scroll details {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.table-scroll details > div {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.table-scroll details > div pre {
    display: block;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

  .table-scroll td .dot {
    margin-right: 0.4rem;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .status-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .table-scroll pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    box-sizing: border-box;
  }

  .table-scroll .alerts-table-row,
  #alerts-page .table-scroll tr {
    grid-template-columns: 1fr;
  }
  
/* Make "How to fix" span the full inner card width */
.table-scroll > table > tbody > tr > td > table details > div {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.table-scroll > table > tbody > tr > td > table details > div pre {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Status row: full width so the explanation can use the whole card */
.table-scroll > table > tbody > tr > td > table > tbody > tr:nth-child(2) {
    grid-template-columns: 1fr;
}

.table-scroll > table > tbody > tr > td > table > tbody > tr:nth-child(2) td {
    width: 100% !important;
}

.table-scroll > table > tbody > tr > td > table > tbody > tr:nth-child(2) td:first-child {
    padding-bottom: 0.2rem !important;
}

.table-scroll > table > tbody > tr > td > table > tbody > tr:nth-child(2) td:last-child {
    width: 100% !important;
}

/* How to fix: use the full width of the scan-result card */
.table-scroll > table > tbody > tr > td > table details {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.table-scroll > table > tbody > tr > td > table details > div {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.table-scroll > table > tbody > tr > td > table details > div pre {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* Scan result with "How to fix" — full card width */
.table-scroll > table > tbody > tr > td > table > tbody > tr.scan-result-row {
    grid-template-columns: 1fr !important;
}

.table-scroll > table > tbody > tr > td > table > tbody > tr.scan-result-row > td {
    width: 100% !important;
    box-sizing: border-box;
}

.table-scroll > table > tbody > tr > td > table > tbody > tr.scan-result-row > td.scan-result-value {
    width: 100% !important;
}

/* How to fix block */
.table-scroll .scan-result-row details {
    display: block;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.table-scroll .scan-result-row details > div {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

}

.auth-page-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 2rem 0; }
.auth-card {
  background: #12161f; border: 1px solid #1e2430; border-radius: 14px;
  padding: 2.2rem; width: 100%; max-width: 420px;
}
.auth-card h1 { font-size: 1.5rem; text-align: center; margin-bottom: 1.5rem; }
.auth-card input, .auth-card textarea {
  width: 100%; padding: 0.65rem; margin: 0.4rem 0 1rem;
  background: #0d1119; border: 1px solid #1e2430; color: #e8ecf2;
  border-radius: 8px; box-sizing: border-box; font-size: 0.92rem; font-family: inherit;
}
.auth-card label { font-size: 0.82rem; color: #8b95a5; }
.auth-card button[type="submit"] {
  width: 100%; padding: 0.75rem; border: none; border-radius: 8px;
  background: linear-gradient(135deg, #22d3ee, #2563eb); color: #04121c;
  font-weight: 600; cursor: pointer; font-size: 0.95rem;
}
.auth-card .auth-links { text-align: center; margin-top: 1.2rem; font-size: 0.85rem; }
.auth-card .success { color: #2ecc71; text-align:center; }
.auth-card .error { color: #e74c3c; text-align:center; }

.feedback-radio-group { display: flex; gap: 1.5rem; margin-bottom: 1.2rem; justify-content: center; flex-wrap: wrap; }
.feedback-radio-option { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.feedback-radio-option input { width: auto; padding: 0; margin: 0; flex-shrink: 0; }

@media (max-width: 600px) {
  .feedback-radio-group {
    justify-content: flex-start;
    gap: 0.8rem;
  }
}

.free-plan-banner {
    background: linear-gradient(135deg, rgba(34,211,238,0.08), rgba(37,99,235,0.08));
    border: 1px solid #2563eb;
    border-radius: 10px;
    padding: 0.9rem 1.3rem;
    margin: 3rem auto 0;
    max-width: 640px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (min-width: 900px) {
  .settings-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
  }
  .settings-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .settings-row-2col .status-box { margin-bottom: 0; }
}

.status-box input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0 0.4rem 0 0;
    vertical-align: middle;
}

.explain-fix-showcase {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2.5rem;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    width: 100%;
    box-sizing: border-box;
}

.explain-fix-text {
    min-width: 0;
}

.explain-fix-text h3 {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
}

.explain-fix-text p {
    color: var(--text-dim);
    font-size: 0.92rem;
}

.explain-fix-shot {
    min-width: 0;
    display: flex;
    justify-content: flex-start;
}

.explain-fix-shot img {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border);
}

@media (max-width: 700px) {
    .explain-fix-showcase {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .explain-fix-text,
    .explain-fix-shot {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .explain-fix-shot img {
        max-width: 100%;
        width: auto;
    }
}

.public-site {
    text-align: center;
    margin: 1.4rem 0 1.6rem;
}

.public-site-link {
    color: inherit;
    text-decoration: none;
    font-size: 1.45rem;
    font-weight: 600;
}

.public-site-link:hover {
    text-decoration: underline;
}

.public-site-label {
    margin-top: 0.3rem;
    opacity: 0.55;
    font-size: 0.85rem;
}


.scan-settings-list{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1rem;
    margin:1rem 0 0;
}

.scan-setting-group{
    min-width:0;
    background:#222;
    border:1px solid #1e2430;
    border-radius:10px;
    overflow:hidden;
}

.scan-setting-row{
    display:grid;
    grid-template-columns:6rem max-content max-content;
    justify-content:start;
    align-items:center;
    column-gap:.5rem;
    min-width:0;
    padding:.7rem .8rem;
    box-sizing:border-box;
}

.scan-setting-row + .scan-setting-row{
    border-top:1px solid rgba(255,255,255,.045);
}

.scan-setting-name{
    width:6rem;
    min-width:0;
    display:flex;
    align-items:center;
}

.scan-setting-name strong{
    font-size:.82rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.scan-setting-name span{
    margin-left:.35rem;
    color:#8b95a5;
    font-size:.6rem;
    padding:.1rem .3rem;
    border:1px solid #1e2430;
    border-radius:999px;
    white-space:nowrap;
}

.scan-settings-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: .5rem;
}

.scan-settings-footer .btn {
    width: auto;
    min-width: 0;
    padding: .45rem .9rem;
}

.scan-toggle{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    color:#8b95a5;
    font-size:.67rem;
    white-space:nowrap;
    cursor:pointer;
    user-select:none;
}

.scan-toggle input{
    width:14px;
    height:14px;
    margin:0;
    padding:0;
    flex:0 0 auto;
    accent-color:#22d3ee;
}

.scan-toggle input:disabled{
    accent-color:#555;
}

.scan-toggle input:checked ~ .toggle-label{
    color:#e8ecf2;
}

.scan-setting-locked{
    opacity:.5;
}

.scan-setting-locked .scan-toggle{
    cursor:not-allowed;
}

@media(max-width:1100px){
    .scan-settings-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:700px){
    .scan-settings-list{
        grid-template-columns:1fr;
        gap:.75rem;
    }

    .scan-setting-row{
        grid-template-columns:7rem max-content max-content;
    }

    .scan-setting-name{
        width:7rem;
    }

    .scan-toggle{
        font-size:.7rem;
    }
}




/* Domain overview cards */
.info-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.info-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: 20px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    background: #0a0e14;
    border: 1px solid #26313d;
    border-radius: 12px;
}

.info-col + .info-col {
    border-left: 1px solid #26313d;
}

.info-col > div,
.info-col > p,
.info-col > label {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.info-col a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.info-col input:not([type="checkbox"]),
.info-col select,
.info-col textarea {
    max-width: 100%;
    box-sizing: border-box;
}

.info-col img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 1000px) {
    .info-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .info-bar {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .info-col {
        width: 100%;
        padding: 16px;
    }
}


/* Domain page header */
.domain-back-link {
    display: inline-block;
    margin: 0 0 18px;
    color: #9aa8b7;
    text-decoration: none;
}

.domain-back-link:hover {
    color: #67d9f5;
}

.domain-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    width: 100%;
    margin: 0 0 18px;
    padding: 12px 16px;
    box-sizing: border-box;
    background: #0a0e14;
    border: 1px solid #26313d;
    border-radius: 12px;
}

.domain-folder-form {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
}

.domain-title-row h1 {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    color: #e8f0f8;
    font-size: 21px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.domain-events-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

.domain-notes-inline {
    flex: 1 1 120px;
    min-width: 0;
}

.domain-notes-inline summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
    list-style: none;
}

.domain-notes-inline summary::-webkit-details-marker {
    display: none;
}

.domain-notes-icon {
    flex: 0 0 auto;
}

.domain-notes-preview,
.domain-notes-empty {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.domain-notes-preview {
    color: #b9c9d3;
}

.domain-notes-empty {
    color: #71818c;
}

.domain-pause-form {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}

.domain-notes-editor {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(0, 200, 255, 0.18);
    border-radius: 10px;
    background: rgba(0, 200, 255, 0.035);
}

.domain-notes-editor textarea {
    display: block;
    width: 100%;
    min-height: 80px;
    resize: vertical;
    box-sizing: border-box;
    padding: 0.75rem;
    background: #0d1119;
    border: 1px solid #2a3040;
    border-radius: 6px;
    color: #eee;
    font: inherit;
    line-height: 1.5;
}

.domain-notes-textarea:focus {
    outline: none;
    border-color: rgba(34, 211, 238, 0.45);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.06);
}

.domain-notes-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.domain-verified-notice {
    margin-bottom: 10px;
    padding: 10px 14px;
    color: #a7e6c0;
    background: #0d2119;
    border: 1px solid #24583d;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 800px) {
    .domain-title-row {
        gap: 10px 12px;
        padding: 12px;
    }

    .domain-title-row h1 {
        font-size: 20px;
    }

    .domain-notes-inline {
        flex-basis: 100%;
        order: 5;
    }

    .domain-pause-form {
        margin-left: auto;
    }

    .domain-title-row .btn {
        max-width: 100%;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .domain-title-row {
        gap: 10px;
        padding: 12px;
    }

    .domain-title-row h1 {
        font-size: 18px;
    }
}


.account-danger-zone{
    margin-top:2rem;
    margin-bottom:1.5rem;
    padding:1rem 1.2rem;
    border:1px solid #5a2020;
    border-radius:6px;
    background:#2a1616;
}

.account-danger-title{
    color:#e74c3c;
    font-weight:bold;
    margin-bottom:.4rem;
}

.account-danger-warning{
    font-size:.85rem;
    opacity:.8;
    margin:.4rem 0 1rem;
}

.account-delete-form{
    margin-top:1rem;
}

.account-delete-fields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:1.2rem;
    row-gap:.8rem;
    max-width:800px;
    align-items:start;
}

.account-delete-fields .field-group{
    margin:0;
    align-self:start;
}

.account-delete-fields select,
.account-delete-fields textarea{
    width:100%;
    box-sizing:border-box;
    background:#111;
    border:1px solid #444;
    color:#eee;
    border-radius:4px;
    font:inherit;
}

.account-delete-fields select,
.account-delete-fields textarea{
    width:100%;
    padding:.6rem;
    margin:.5rem 0 1rem;
    box-sizing:border-box;
    background:#111;
    border:1px solid #444;
    color:#eee;
    border-radius:4px;
    font:inherit;
}

.account-delete-fields select{
    height:auto;
}

.account-delete-fields textarea{
    min-height:80px;
    resize:vertical;
}

.account-delete-fields input{
    margin:0.5rem 0 1rem;
}

.account-delete-form .danger-btn{
    margin-top:.2rem;
    background:#e74c3c;
}

.account-danger-zone .error{
    margin:.5rem 0;
    color:#e74c3c;
    font-size:.85rem;
}

@media(max-width:700px){
    .account-delete-fields{
        grid-template-columns:1fr;
    }
}


.scan-settings-mobile > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    padding: .7rem .9rem;
    border: 1px solid #333;
    border-radius: 8px;
    background: #1e1e1e;
    box-sizing: border-box;
    list-style: none;
}

.scan-settings-mobile > summary::-webkit-details-marker {
    display: none;
}

.scan-settings-mobile > summary::before {
    content: '▸';
    flex-shrink: 0;
    color: #67d5f5;
    font-size: 1rem;
    transition: transform .15s ease;
}

.scan-settings-mobile[open] > summary::before {
    content: '▾';
}

.scan-settings-mobile > summary strong {
    display: block;
    font-size: .9rem;
    font-weight: 600;
}

.scan-settings-mobile > summary span {
    display: block;
    margin-top: .2rem;
    font-size: .75rem;
    line-height: 1.4;
    color: #9ca3af;
}

.scan-settings-mobile > summary:hover {
    border-color: #46515d;
    background: #222831;
}

.scan-settings-mobile > .scan-settings-box {
    margin-top: .75rem;
}

.scan-settings-mobile > summary {
    justify-content: flex-start;
}

.scan-settings-mobile > summary > .scan-settings-summary-text {
    flex: 1;
    min-width: 0;
}

.scan-settings-mobile > summary > .scan-settings-summary-text > span {
    display: block;
}

@media (max-width: 700px) {
    .scan-settings-mobile {
        margin-bottom: .5rem;
    }

    .scan-settings-mobile > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        cursor: pointer;
        padding: .8rem 1rem;
        border: 1px solid #333;
        border-radius: 8px;
        background: #1e1e1e;
        box-sizing: border-box;
    }

    .scan-settings-mobile > summary::-webkit-details-marker {
        display: none;
    }

    .scan-settings-mobile > summary::before {
        content: '▸';
        flex-shrink: 0;
        font-size: 1rem;
    }

    .scan-settings-mobile > summary strong {
        display: block;
    }

    .scan-settings-mobile > summary span {
        display: block;
        margin-top: .2rem;
        font-size: .78rem;
        opacity: .65;
    }

    .scan-settings-mobile > .scan-settings-box {
        margin-top: .75rem;
    }
}

/* Keep scan settings aligned with scan history */
.scan-settings-mobile {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (min-width: 701px) {
    .scan-settings-mobile {
        width: min(100% - 40px, 1100px);
    }
}

.scan-settings-box {
    width: 100%;
    box-sizing: border-box;
}


/* Domain notes */
.domain-notes-inline {
    flex: 1 1 auto;
    min-width: 0;
}

.domain-notes-inline summary {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    cursor: pointer;
    list-style: none;
}

.domain-notes-inline summary::-webkit-details-marker {
    display: none;
}

.domain-notes-icon {
    flex: 0 0 auto;
    font-size: 0.95rem;
}

.domain-notes-preview,
.domain-notes-empty {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.domain-notes-preview {
    color: #b9c9d3;
}

.domain-notes-empty {
    color: #71818c;
}

.domain-notes-editor {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(0, 200, 255, 0.18);
    border-radius: 10px;
    background: rgba(0, 200, 255, 0.035);
}

.domain-notes-editor textarea {
    display: block;
    width: 100%;
    min-height: 80px;
    resize: vertical;
    box-sizing: border-box;
    padding: 0.75rem;
    background: #0d1119;
    border: 1px solid #2a3040;
    border-radius: 6px;
    color: #eee;
    font: inherit;
    line-height: 1.5;
}

.domain-notes-textarea:focus {
    outline: none;
    border-color: rgba(34, 211, 238, 0.45);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.06);
}

.domain-notes-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}


/* folders */

.domain-folders-row {
    align-items: stretch;
    margin-bottom: 1.5rem;
}

.domain-folders-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 1rem;
}

.domain-folder-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #252c39;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.015);
}

.domain-folder-rename-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.domain-folder-rename-form input {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.domain-folder-delete-form {
    flex: 0 0 auto;
    align-self: center;
}

.folder-delete-btn {
    padding: 0;
    border: 0;
    background: none;
    color: #e74c3c;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.folder-delete-btn:hover {
    color: #ff6b5f;
}

.domain-folders-empty {
    color: #8b95a5;
    font-size: 0.9rem;
    margin: 1rem 0;
}

.domain-folder-create-form {
    margin-top: 1.2rem;
}

.domain-folder-create-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.domain-folder-create-row input {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.domain-folder-create-row .btn {
    flex: 0 0 auto;
}

.settings-success {
    color: #2ecc71;
    font-size: 0.9rem;
    margin-top: 0.6rem;
}

.settings-error {
    color: #e74c3c;
    font-size: 0.9rem;
    margin-top: 0.6rem;
}

@media (max-width: 600px) {
    .domain-folders-row {
        margin-bottom: 1.5rem;
    }

    .domain-folder-item {
        align-items: stretch;
        flex-direction: column;
    }

    .domain-folder-rename-form {
        width: 100%;
    }

    .domain-folder-create-row {
        flex-direction: column;
        align-items: stretch;
    }

    .domain-folder-create-row .btn {
        width: 100%;
    }
}

.domain-folder-select {
    appearance: none;
    -webkit-appearance: none;

    min-width: 150px;
    max-width: 220px;

    padding: 7px 34px 7px 11px;

    background-color: #0d1119;
    background-image:
        linear-gradient(45deg, transparent 50%, #71818c 50%),
        linear-gradient(135deg, #71818c 50%, transparent 50%);
    background-position:
        calc(100% - 15px) 50%,
        calc(100% - 10px) 50%;
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;

    border: 1px solid #2a3040;
    border-radius: 7px;

    color: #cbd5df;
    font: inherit;
    font-size: 0.9rem;

    cursor: pointer;
}

.domain-folder-select:hover {
    border-color: #3b4658;
}

.domain-folder-select:focus {
    outline: none;
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.05);
}

/* alert routing */

.domain-folder-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #252c39;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.015);
}

.domain-folder-main {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.domain-folder-main .domain-folder-rename-form {
    flex: 1;
    min-width: 0;
}

.domain-folder-routing {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.domain-folder-routing-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.domain-folder-routing-title {
    color: #cbd5df;
    font-size: 0.85rem;
    font-weight: 600;
}

.domain-folder-routing-status {
    color: #71818c;
    font-size: 0.8rem;
}

.domain-folder-routing-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.domain-folder-routing-channels {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-width: 0;
}

.domain-folder-routing-channels label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: #aeb9c5;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}

.domain-folder-routing-channels input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.domain-folder-routing-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 0;
    flex: 0 0 auto;
}

.domain-folder-routing-default {
    display: flex;
    align-items: center;
    margin-left: 0;
    flex: 0 0 auto;
}

@media (min-width: 701px) and (max-width: 1100px) {
    .domain-folder-routing {
        align-items: flex-start;
    }

    .domain-folder-routing-form {
        flex-wrap: wrap;
    }

    .domain-folder-routing-actions {
        width: 100%;
        margin-left: 0;
        align-items: center;
    }

    .domain-folder-routing-actions .btn {
        height: auto;
        align-self: center;
    }
}

@media (max-width: 700px) {
    .domain-folder-main {
        flex-wrap: wrap;
    }

    .domain-folder-rename-form {
        width: 100%;
    }

    .domain-folder-routing {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .domain-folder-routing-header {
        flex-wrap: wrap;
    }

    .domain-folder-routing-form {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .domain-folder-routing-channels {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .domain-folder-routing-actions {
        align-items: center;
        margin-left: 0;
        width: auto;
    }

    .domain-folder-routing-actions .btn,
    .domain-folder-routing-default .btn {
        width: auto;
    }

    .domain-folder-routing-default {
        margin-left: 0;
    }
}

/* notification-destination */
.notification-destinations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification-destination-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.notification-destination-main {
    min-width: 0;
    flex: 1;
}

.notification-destination-name {
    font-weight: 600;
}

.notification-destination-type {
    margin-top: 3px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.notification-destination-value {
    margin-top: 6px;
    font-size: 0.9rem;
    color: #9fb0bd;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.notification-destination-status {
    flex-shrink: 0;
    text-align: right;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0.75;
}

/* Notification destination inline editing */
.notification-destination-edit-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification-destination-edit-form .field-group {
    margin-bottom: 0;
}

.notification-destination-edit-form label {
    margin-bottom: 4px;
}

.notification-destination-edit-form button {
    align-self: flex-start;
    margin-top: 2px;
}

.notification-destination-item {
    padding-top: 14px;
    padding-bottom: 14px;
}



/* Notification destination cards */
.notification-destination-item {
    padding-top: 14px;
    padding-bottom: 14px;
}

.notification-destination-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Keep the editing form compact */
.notification-destination-edit-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notification-destination-edit-form .field-group {
    margin-bottom: 0;
}

.notification-destination-edit-form label {
    margin-bottom: 3px;
}

.notification-destination-edit-form button {
    align-self: flex-start;
    margin-top: 2px;
}


.notification-destination-type {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.6rem 34px 0.6rem 0.6rem;
    background-color: #111;
    background-image:
        linear-gradient(45deg, transparent 50%, #71818c 50%),
        linear-gradient(135deg, #71818c 50%, transparent 50%);
    background-position:
        calc(100% - 15px) 50%,
        calc(100% - 10px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    border: 1px solid #444;
    border-radius: 4px;
    color: #eee;
    font: inherit;
    font-size: 0.85rem;
    box-sizing: border-box;
    cursor: pointer;
}

.notification-destination-type:hover {
    border-color: #555;
}

.notification-destination-type:focus {
    outline: none;
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.05);
}

.notification-destinations-title {
    display: block;
    margin-bottom: 12px;
}


.telegram-destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.telegram-destinations-grid .notification-destination-item {
    width: auto;
    min-width: 0;
}

/* CSV Import */
.csv-import-description {
    max-width: 760px;
    margin-bottom: 1.5rem;
    color: #aab4c3;
}

.csv-import-form {
    max-width: 760px;
}

.csv-import-help {
    margin: 0.75rem 0 1.25rem;
    color: #7f8b9c;
    font-size: 0.9rem;
    font-family: monospace;
}

.csv-import-link {
    margin-top: 1rem;
    color: #8d98a8;
}

.csv-import-link a {
    color: #6edfff;
}

.csv-import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.csv-import-summary span {
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(0, 200, 255, 0.18);
    border-radius: 7px;
    background: rgba(0, 200, 255, 0.04);
    font-size: 0.9rem;
}

.csv-import-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0;
}

.csv-import-table {
    width: 100%;
    border-collapse: collapse;
}

.csv-import-table th,
.csv-import-table td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
    vertical-align: top;
}

.csv-import-table th {
    color: #aab4c3;
    font-size: 0.85rem;
    font-weight: 600;
}

.csv-import-table td {
    color: #dce4ee;
}

.csv-status {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    font-size: 0.82rem;
}

.csv-status-ready {
    color: #9fffc1;
    background: rgba(60, 220, 130, 0.08);
}

.csv-status-skip {
    color: #ffd98a;
    background: rgba(255, 190, 60, 0.08);
}

.csv-status-error {
    color: #ff9d9d;
    background: rgba(255, 70, 70, 0.08);
}

.csv-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
}

.csv-import-card {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(0, 200, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.csv-import-card h2 {
    margin-top: 0;
}

.csv-format-info {
    margin: 1.25rem 0;
    padding: 1rem;
    border: 1px solid rgba(0, 200, 255, 0.15);
    border-radius: 10px;
    background: rgba(0, 200, 255, 0.035);
}

.csv-format-info pre {
    margin: 0.8rem 0;
    padding: 0.9rem;
    overflow-x: auto;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    font-family: monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

.csv-current-format {
    margin: 1rem 0 1.25rem;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    line-height: 1.7;
}

.csv-current-format code {
    font-family: monospace;
}

.csv-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.csv-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.csv-preview-table th,
.csv-preview-table td {
    padding: 0.65rem 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    vertical-align: top;
}

.csv-preview-table th {
    white-space: nowrap;
}

.csv-preview-table code {
    font-family: monospace;
}

.csv-row-ready {
    background: rgba(0, 200, 255, 0.025);
}

.csv-row-error {
    background: rgba(255, 70, 70, 0.045);
}

.csv-status-ok {
    color: #7ee7b5;
    font-weight: 600;
}

.csv-status-error {
    color: #ff8b8b;
    font-weight: 600;
}

.csv-file-errors {
    margin: 1rem 0;
}

.csv-file-errors ul {
    margin-bottom: 0;
}

.csv-preview-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.csv-import-summary {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.25rem 0;
}

.csv-import-summary > div {
    min-width: 130px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.csv-import-summary strong {
    display: block;
    font-size: 1.5rem;
}

.csv-import-summary span {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
}

.form-help {
    margin-top: 0.4rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
}

.csv-custom-separator {
    max-width: 260px;
}

.csv-file-input {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.csv-file-input input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.csv-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(0, 200, 255, 0.3);
    border-radius: 8px;
    background: rgba(0, 200, 255, 0.06);
    color: #dff9ff;
    cursor: pointer;
    font-size: 0.9rem;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.csv-file-button:hover {
    background: rgba(0, 200, 255, 0.11);
    border-color: rgba(0, 200, 255, 0.5);
}

.csv-file-name {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.88rem;
}

.csv-file-input {
    margin-top: 0.6rem;
}

.csv-separator-select {
    display: block;
    margin-top: 0.4rem;
    width: 100%;
    max-width: 260px;
    padding: 0.6rem 34px 0.6rem 0.6rem;

    appearance: none;
    -webkit-appearance: none;

    background-color: #111;
    background-image:
        linear-gradient(45deg, transparent 50%, #71818c 50%),
        linear-gradient(135deg, #71818c 50%, transparent 50%);
    background-position:
        calc(100% - 15px) 50%,
        calc(100% - 10px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;

    border: 1px solid #444;
    border-radius: 4px;
    color: #eee;
    font: inherit;
    font-size: 0.85rem;
    box-sizing: border-box;
    cursor: pointer;
}

.csv-separator-select:hover {
    border-color: #555;
}

.csv-separator-select:focus {
    outline: none;
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.05);
}


.email-auth-provider-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: #22d3ee;
}

.email-auth-domain-select {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;
    padding: 0.6rem 34px 0.6rem 0.7rem;

    background-color: #0d1119;
    background-image:
        linear-gradient(45deg, transparent 50%, #71818c 50%),
        linear-gradient(135deg, #71818c 50%, transparent 50%);
    background-position:
        calc(100% - 15px) 50%,
        calc(100% - 10px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;

    border: 1px solid #2a3040;
    border-radius: 7px;

    color: #cbd5df;
    font: inherit;
    font-size: 0.9rem;

    cursor: pointer;
    box-sizing: border-box;
}

.email-auth-domain-select:hover {
    border-color: #3b4658;
}

.email-auth-domain-select:focus {
    outline: none;
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.05);
}


/* Saved List */

.email-auth-history {
    margin-top: 28px;
	margin-bottom: 10px;
}

.email-auth-history-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

.email-auth-history-header h2 {
    margin: 0;
}

.email-auth-history-header > span {
    color: var(--muted, #8b95a5);
    font-size: .85rem;
}

.email-auth-history-list {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    overflow: hidden;
}

.email-auth-history-item {
    display: grid;
    grid-template-columns: 58px 150px minmax(0, 1fr) 150px 24px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    border-radius: 0;
    background: rgba(255,255,255,.02);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background .15s ease,
        border-color .15s ease;
}

.email-auth-history-item:last-child {
    border-bottom: 0;
}

.email-auth-history-item:hover {
    background: rgba(80,200,255,.045);
}

.email-auth-history-item:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(80,200,255,.35);
}

.email-auth-history-type {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #55cfff;
}

.email-auth-history-domain {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #cbd5df;
    font-size: .9rem;
}

.email-auth-history-record {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted, #8b95a5);
    font-size: .82rem;
}

.email-auth-history-date {
    color: var(--muted, #8b95a5);
    font-size: .78rem;
    white-space: nowrap;
}

.email-auth-history-arrow {
    color: #71818c;
    font-size: 1.1rem;
    text-align: right;
    transition: transform .15s ease, color .15s ease;
}

.email-auth-history-item:hover .email-auth-history-arrow {
    color: #55cfff;
    transform: translateX(2px);
}

@media (max-width: 800px) {
    .email-auth-history-item {
        grid-template-columns: 58px minmax(0, 1fr) 24px;
    }

    .email-auth-history-domain {
        grid-column: 2;
    }

    .email-auth-history-record {
        grid-column: 2;
    }

    .email-auth-history-date {
        display: none;
    }

    .email-auth-history-arrow {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 640px) {
    .email-auth-history-item {
        grid-template-columns: 50px minmax(0, 1fr) 20px;
        gap: 6px 10px;
        padding: 11px 12px;
    }

    .email-auth-history-type {
        grid-row: 1;
    }

    .email-auth-history-domain {
        grid-column: 2;
    }

    .email-auth-history-record {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .email-auth-history-arrow {
        grid-column: 3;
        grid-row: 1;
    }
}

.email-auth-generator button:disabled,
.email-auth-generator .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}



/* ==========================================================================
   Viglar Events
   ========================================================================== */

.events-page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 80px;
    box-sizing: border-box;
}

.events-back {
    margin-bottom: 20px;
}

.events-back a {
    color: var(--text-muted, #8b949e);
    font-size: 14px;
    text-decoration: none;
}

.events-back a:hover {
    color: var(--text, #e6edf3);
}

.events-header {
    margin-bottom: 28px;
}

.events-header h1 {
    margin: 0 0 8px;
}

.events-header p {
    margin: 0;
    color: var(--text-muted, #8b949e);
    font-size: 0.9rem;
    line-height: 1.5;
}


/* ==========================================================================
   Filters
   ========================================================================== */

.events-filters {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;

    margin-bottom: 28px;
    padding: 18px;

    direction: ltr;
    text-align: left;

    border: 1px solid var(--border, #30363d);
    border-radius: 12px;
    background: var(--surface, #11161d);
}

.events-filter {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 180px;
}

.events-filter label {
    display: block;
    color: var(--text-muted, #8b949e);
    font-size: 12px;
    text-align: left;
}

.events-filter select {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    box-sizing: border-box;

    color: var(--text, #e6edf3);
    background: var(--card-bg, #0f141b);

    border: 1px solid var(--border, #30363d);
    border-radius: 6px;

    direction: ltr;
    text-align: left;
}

.events-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;

    direction: ltr;
    text-align: left;
}

.events-clear-link {
    color: var(--text-muted, #8b949e);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.events-clear-link:hover {
    color: var(--text, #e6edf3);
}


/* ==========================================================================
   Event list and incident cards
   ========================================================================== */

.events-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.events-incident,
.events-standalone {
    min-width: 0;
    box-sizing: border-box;

    border: 1px solid var(--border, #30363d);
    border-radius: 12px;
    background: var(--surface, #11161d);
}

.events-incident {
    overflow: hidden;
}

.events-incident-preview {
    transition: border-color .15s ease;
}

.events-incident-preview:hover {
    border-color: rgba(88, 166, 255, .45);
}

.events-incident-header {
    padding: 20px 22px 18px;
    border-bottom: 1px solid var(--border, #30363d);
}

.events-incident-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.events-incident-type {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.events-incident-scan {
    color: var(--text, #e6edf3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.events-incident-state {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    box-sizing: border-box;

    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.events-state-recovered {
    color: #7ee787;
    border: 1px solid rgba(46, 160, 67, .35);
    background: rgba(46, 160, 67, .08);
}

.events-state-open {
    color: #ff7b72;
    border: 1px solid rgba(248, 81, 73, .35);
    background: rgba(248, 81, 73, .08);
}

.events-incident-domain {
    margin-top: 7px;
    color: var(--text-muted, #8b949e);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.events-incident-domain a {
    color: var(--text, #e6edf3);
    font-weight: 600;
    text-decoration: none;
}

.events-incident-domain a:hover {
    color: var(--accent, #58a6ff);
}


/* ==========================================================================
   Incident timeline — detail view
   ========================================================================== */

.events-incident-timeline {
    position: relative;
    margin: 8px 0 0;
    padding: 4px 0 8px;
}

.events-timeline-event {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px;
    min-height: 72px;
}

.events-timeline-marker {
    position: relative;
    display: flex;
    justify-content: center;
}

.events-timeline-marker::after {
    content: "";
    position: absolute;
    top: 30px;
    bottom: -8px;
    left: 50%;
    width: 1px;

    background: var(--border, #30363d);
    transform: translateX(-50%);
}

.events-timeline-event:last-child .events-timeline-marker::after {
    display: none;
}

.events-timeline-dot {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;
    margin-top: 2px;
    box-sizing: border-box;

    border: 1px solid var(--border, #30363d);
    border-radius: 5px;
    background: var(--surface, #11161d);

    font-size: 13px;
    line-height: 1;
}

.events-timeline-event-problem .events-timeline-dot {
    color: #ff7b72;
    border-color: rgba(248, 81, 73, .45);
}

.events-timeline-event-recovery .events-timeline-dot {
    color: #7ee787;
    border-color: rgba(46, 160, 67, .45);
}

.events-timeline-event-change .events-timeline-dot {
    color: #8d9aaa;
    border-color: rgba(141, 154, 170, .4);
}

.events-timeline-content {
    min-width: 0;
    padding: 0 0 22px;
}

.events-timeline-static,
.events-timeline-details {
    min-width: 0;
    box-sizing: border-box;

    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
    background: var(--card-bg, #0f141b);
}

.events-timeline-static {
    padding: 16px 18px;
}

.events-timeline-details {
    overflow: hidden;
}

.events-timeline-details > summary {
    display: block;
    cursor: pointer;
    list-style: none;
}

.events-timeline-details > summary::-webkit-details-marker {
    display: none;
}

.events-timeline-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
}

.events-timeline-summary-main {
    min-width: 0;
    flex: 1;
}

.events-timeline-summary-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 4px;
}

.events-timeline-summary-heading strong {
    color: var(--text, #e6edf3);
    font-size: 14px;
}

.events-timeline-summary-scan {
    color: var(--text-muted, #8b949e);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.events-timeline-summary time,
.events-timeline-static-heading time {
    display: block;
    color: var(--text-muted, #8b949e);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.events-timeline-summary-text {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.events-timeline-summary-text span {
    position: relative;
    min-width: 0;
}

.events-timeline-summary-text span + span::before {
    content: "•";
    position: absolute;
    left: -11px;
    opacity: .35;
}

.events-timeline-summary-arrow {
    flex: 0 0 auto;
    color: var(--text-muted, #8b949e);
    font-size: 20px;
    transition: transform .15s ease;
}

.events-timeline-details[open] .events-timeline-summary-arrow {
    transform: rotate(90deg);
}

.events-timeline-expanded {
    min-width: 0;
    padding: 0 18px 18px;
    border-top: 1px solid var(--border, #30363d);
}

.events-timeline-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 0;

    color: var(--text-muted, #8b949e);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.events-timeline-static-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.events-timeline-static-heading strong {
    display: block;
    margin-bottom: 4px;
}

.events-timeline-main-details {
    margin-top: 14px;
    background: transparent;
}

.events-timeline-main-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;

    color: var(--text-muted, #8b949e);
    font-size: 12px;
}

.events-timeline-main-details > summary span {
    font-size: 18px;
}

.events-timeline-main-details .events-timeline-expanded {
    padding: 12px;
}

.events-timeline-event-problem .events-timeline-static {
    border-left: 2px solid rgba(248, 81, 73, .65);
}

.events-timeline-event-recovery .events-timeline-static {
    border-left: 2px solid rgba(46, 160, 67, .65);
}

.events-timeline-event-change .events-timeline-details {
    border-left: 2px solid rgba(141, 154, 170, .4);
}

.events-timeline-event-change .events-timeline-details:hover {
    border-left-color: rgba(141, 154, 170, .75);
}

.events-timeline-static .events-status-transition {
    margin-top: 12px;
}


/* ==========================================================================
   Incident preview timeline — list view
   ========================================================================== */

.events-preview-timeline {
    position: relative;
    margin: 0;
    padding: 4px 0 8px;
}

.events-preview-timeline-row {
    display: grid;
    grid-template-columns: 26px 58px 76px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 6px 18px;
    box-sizing: border-box;

    border-top: 1px solid var(--border, #30363d);
    font-size: 13px;
}

.events-preview-timeline-row:first-child {
    border-top: 0;
}

.events-preview-timeline-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    box-sizing: border-box;

    border: 1px solid var(--border, #30363d);
    border-radius: 5px;
    font-size: 12px;
    line-height: 1;
}

.events-preview-timeline-row time {
    color: var(--text-muted, #8b949e);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.events-preview-timeline-row strong {
    font-size: 12px;
    font-weight: 600;
}

.events-preview-timeline-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    min-width: 0;
    color: var(--text, #e6edf3);
    overflow-wrap: anywhere;
}

.events-preview-timeline-summary > span {
    position: relative;
}

.events-preview-timeline-summary > span + span::before {
    content: "•";
    position: absolute;
    left: -9px;
    opacity: .35;
}

.events-preview-timeline-problem .events-preview-timeline-icon {
    color: #ff7b72;
    border-color: rgba(248, 81, 73, .45);
}

.events-preview-timeline-change .events-preview-timeline-icon {
    color: #8d9aaa;
    border-color: rgba(141, 154, 170, .4);
}

.events-preview-timeline-recovery .events-preview-timeline-icon {
    color: #7ee787;
    border-color: rgba(46, 160, 67, .45);
}

.events-preview-timeline-summary .events-status-transition {
    margin: 0;
}


/* ==========================================================================
   Status transitions
   ========================================================================== */

.events-status-transition {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;

    font-size: 14px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.events-status-old {
    color: var(--text-muted, #8b949e);
    opacity: .8;
}

.events-status-new {
    color: var(--text, #e6edf3);
    font-weight: 650;
}

.events-status-arrow {
    color: var(--text-muted, #8b949e);
}


/* ==========================================================================
   Change summaries and expandable details
   ========================================================================== */

.events-summary-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 14px;
}

.events-summary-item {
    display: flex;
    gap: 8px;
    min-width: 0;

    color: var(--text, #e6edf3);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.events-summary-item > span:first-child {
    flex: 0 0 auto;
    color: var(--text-muted, #8b949e);
}

.events-change-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.events-change-details {
    min-width: 0;
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
    background: rgba(255, 255, 255, .012);
    overflow: hidden;
}

.events-change-details > summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    cursor: pointer;
    list-style: none;
}

.events-change-details > summary::-webkit-details-marker {
    display: none;
}

.events-change-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;
    flex: 0 0 25px;

    border-radius: 50%;
    color: var(--accent, #58a6ff);
    background: rgba(88, 166, 255, .08);
    font-size: 12px;
}

.events-change-summary-main {
    min-width: 0;
    flex: 1;
}

.events-change-summary-title {
    display: block;
    color: var(--text, #e6edf3);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.events-change-summary-field {
    display: block;
    margin-top: 3px;
    color: var(--text-muted, #8b949e);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.events-change-summary-arrow {
    flex: 0 0 auto;
    color: var(--text-muted, #8b949e);
    font-size: 18px;
    transition: transform .15s ease;
}

.events-change-details[open] .events-change-summary-arrow {
    transform: rotate(90deg);
}

.events-change-expanded {
    min-width: 0;
    padding: 0 15px 15px;
    border-top: 1px solid var(--border, #30363d);
}

.events-change-detail {
    min-width: 0;
    padding-top: 14px;
}

.events-change-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.events-change-value {
    min-width: 0;
}

.events-change-value-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted, #8b949e);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.events-change-value-content {
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;

    border: 1px solid var(--border, #30363d);
    border-radius: 7px;
    color: var(--text, #e6edf3);
    background: rgba(0, 0, 0, .12);

    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.5;

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ==========================================================================
   DNS and list diffs
   ========================================================================== */

.events-dns-diff {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.events-dns-diff-type {
    min-width: 0;
    padding: 10px 0;
}

.events-dns-diff-heading {
    margin-bottom: 8px;
    color: var(--text, #e6edf3);
    font-size: 12px;
    font-weight: 700;
}

.events-diff-group {
    min-width: 0;
    margin-top: 8px;
}

.events-diff-label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted, #8b949e);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.events-diff-added .events-diff-label {
    color: #7ee787;
}

.events-diff-removed .events-diff-label {
    color: #ff7b72;
}

.events-diff-value {
    min-width: 0;
    margin-top: 4px;
    padding: 5px 8px;
    box-sizing: border-box;

    border-radius: 4px;
    background: rgba(0, 0, 0, .12);
    color: var(--text-muted, #8b949e);

    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.5;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.events-diff-added .events-diff-value {
    border-left: 2px solid #2ea043;
}

.events-diff-removed .events-diff-value {
    border-left: 2px solid #f85149;
}


/* ==========================================================================
   Incident footer
   ========================================================================== */

.events-incident-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 0;
    padding: 17px 22px;

    border-top: 1px solid var(--border, #30363d);
}

.events-incident-duration {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;

    color: var(--text-muted, #8b949e);
    font-size: 12px;
}

.events-incident-duration strong {
    color: var(--text, #e6edf3);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.events-view-incident {
    flex: 0 0 auto;
    color: var(--accent, #58a6ff);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.events-view-incident:hover {
    text-decoration: underline;
}


/* ==========================================================================
   Standalone events
   ========================================================================== */

.events-standalone {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px 20px;
}

.events-standalone-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;
    flex: 0 0 28px;

    border-radius: 50%;
    color: var(--accent, #58a6ff);
    background: rgba(88, 166, 255, .08);
    font-size: 12px;
}

.events-standalone-main {
    min-width: 0;
    flex: 1;
}

.events-standalone-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    min-width: 0;
}

.events-standalone-heading strong {
    color: var(--text, #e6edf3);
    font-size: 13px;
}

.events-standalone-heading > span {
    color: var(--text-muted, #8b949e);
    font-size: 11px;
}

.events-standalone-heading time {
    margin-left: auto;
    color: var(--text-muted, #8b949e);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.events-standalone-domain {
    margin-top: 5px;
    overflow-wrap: anywhere;
}

.events-standalone-domain a {
    color: var(--text-muted, #8b949e);
    font-size: 12px;
    text-decoration: none;
}

.events-standalone-domain a:hover {
    color: var(--accent, #58a6ff);
}

.events-standalone-details {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--border, #30363d);
}

.events-standalone-details > div {
    margin-top: 12px;
}


/* ==========================================================================
   Empty state
   ========================================================================== */

.events-empty {
    padding: 60px 20px;
    text-align: center;

    border: 1px solid var(--border, #30363d);
    border-radius: 12px;
    background: var(--surface, #11161d);
}

.events-empty-icon {
    margin-bottom: 12px;
    color: var(--text-muted, #8b949e);
    font-size: 28px;
}

.events-empty strong {
    display: block;
    color: var(--text, #e6edf3);
}

.events-empty p {
    margin: 8px 0 0;
    color: var(--text-muted, #8b949e);
    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 700px) {

    .events-page {
        padding: 24px 14px 60px;
    }

    .events-header {
        margin-bottom: 22px;
    }

    .events-filters {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        padding: 15px;

        direction: ltr;
        text-align: left;
    }

    .events-filter {
        width: 100%;
        min-width: 0;
        align-items: stretch;
    }

    .events-filter label {
        text-align: left;
    }

    .events-filter select {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .events-filter-actions {
        justify-content: flex-start;
        align-self: flex-start;
        width: auto;
        margin-top: 2px;
    }

    .events-filter-actions .btn {
        flex: 0 0 auto;
    }

    .events-incident-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .events-incident-header {
        padding: 16px;
    }

    .events-timeline-event {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 10px;
    }

    .events-timeline-dot {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .events-timeline-summary {
        padding: 13px 14px;
    }

    .events-timeline-static {
        padding: 14px;
    }

    .events-timeline-expanded {
        padding: 0 14px 14px;
    }

    .events-timeline-main-details .events-timeline-expanded {
        padding: 10px;
    }

    .events-preview-timeline-row {
        grid-template-columns: 26px 52px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 12px;
    }

    .events-preview-timeline-row strong {
        display: none;
    }

    .events-preview-timeline-summary {
        grid-column: 3;
        margin-top: -2px;
    }

    .events-change-values {
        grid-template-columns: minmax(0, 1fr);
    }

    .events-incident-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 15px 16px;
    }

    .events-view-incident {
        align-self: flex-start;
    }

    .events-standalone {
        gap: 10px;
        padding: 15px;
    }

    .events-standalone-heading time {
        width: 100%;
        margin-left: 0;
    }

    .events-empty {
        padding: 42px 16px;
    }

}

/* Viglar Events statistics */
.events-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0 24px;
}

.events-stat-card {
    min-width: 0;
    padding: 18px 20px;
    background: #0a0e14;
    border: 1px solid #26313d;
    border-radius: 12px;
}

.events-stat-label {
    color: #9aa8b7;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.events-stat-value {
    margin-top: 8px;
    color: #e8f0f8;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* Critical count gets emphasis only when non-zero */
.events-stat-card:last-child .events-stat-value {
    color: #f87171;
}

@media (max-width: 600px) {
    .events-stats {
        gap: 8px;
        margin: 16px 0 20px;
    }

    .events-stat-card {
        padding: 12px 10px;
        border-radius: 10px;
    }

    .events-stat-label {
        font-size: 11px;
        overflow-wrap: anywhere;
    }

    .events-stat-value {
        margin-top: 6px;
        font-size: 24px;
    }
}

@media (max-width: 360px) {
    .events-stats {
        gap: 6px;
    }

    .events-stat-card {
        padding: 10px 7px;
    }

    .events-stat-value {
        font-size: 21px;
    }
}



/* Events stats: align values consistently */
.events-stat-card {
    display: flex;
    flex-direction: column;
}

.events-stat-label {
    line-height: 1.4;
    min-height: 2.8em;
}

.events-stat-value {
    margin-top: auto;
}




/* Alerts page */
#alerts-page .alerts-container {
    width: min(100% - 40px, 1100px);
    margin: 28px auto 48px;
}

#alerts-page .alerts-back {
    display: inline-block;
    margin-bottom: 20px;
    color: #9aa8b7;
    text-decoration: none;
}

#alerts-page .alerts-back:hover {
    color: #67d5f5;
}

#alerts-page .alerts-container h1 {
    margin: 0 0 24px;
}

#alerts-page .alerts-list {
    display: grid;
    gap: 14px;
}

#alerts-page .alert-card {
    min-width: 0;
    padding: 18px 20px;
    background: #0a0e14;
    border: 1px solid #26313d;
    border-left: 3px solid #64748b;
    border-radius: 12px;
}

#alerts-page .alert-card.severity-info {
    border-left-color: #3498db;
}

#alerts-page .alert-card.severity-warning {
    border-left-color: #f39c12;
}

#alerts-page .alert-card.severity-critical {
    border-left-color: #e74c3c;
}

#alerts-page .alert-card.severity-resolved {
    border-left-color: #2ecc71;
}

#alerts-page .alert-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

#alerts-page .alert-domain {
    font-weight: 600;
    overflow-wrap: anywhere;
}

#alerts-page .alert-domain a {
    color: #e8f0f8;
    text-decoration: none;
}

#alerts-page .alert-domain a:hover {
    color: #67d5f5;
}

#alerts-page .alert-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    color: #9aa8b7;
    font-size: 13px;
}

#alerts-page .alert-severity {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

#alerts-page .severity-info .alert-severity {
    color: #7dd3fc;
    background: #123047;
}

#alerts-page .severity-warning .alert-severity {
    color: #fcd34d;
    background: #3b2d12;
}

#alerts-page .severity-critical .alert-severity {
    color: #fca5a5;
    background: #3b191c;
}

#alerts-page .severity-resolved .alert-severity {
    color: #86efac;
    background: #123124;
}

#alerts-page .alert-message {
    margin: 0;
    color: #dbe5ef;
    font: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#alerts-page .alert-delivery {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #26313d;
    color: #9aa8b7;
    font-size: 13px;
}

#alerts-page .alerts-empty {
    padding: 24px;
    background: #0a0e14;
    border: 1px solid #26313d;
    border-radius: 12px;
    color: #9aa8b7;
}

@media (max-width: 600px) {
    #alerts-page .alerts-container {
        width: calc(100% - 28px);
        margin-top: 20px;
    }

    #alerts-page .alert-card {
        padding: 15px;
    }

    #alerts-page .alert-card-header {
        align-items: flex-start;
        flex-direction: column;
    }
}




/* Add domain page */
#add-domain-page .add-domain-container {
    width: min(100% - 40px, 620px);
    margin: 36px auto 56px;
}

#add-domain-page .add-domain-back {
    display: inline-block;
    margin-bottom: 22px;
    color: #9aa8b7;
    text-decoration: none;
}

#add-domain-page .add-domain-back:hover {
    color: #67d5f5;
}

#add-domain-page .add-domain-container h1 {
    margin: 0 0 24px;
}

#add-domain-page .add-domain-card {
    padding: 28px;
    background: #0a0e14;
    border: 1px solid #26313d;
    border-radius: 14px;
}

#add-domain-page .add-domain-card form {
    display: grid;
    gap: 12px;
}

#add-domain-page .add-domain-card label {
    color: #dbe5ef;
    font-size: 14px;
    font-weight: 600;
}

#add-domain-page .add-domain-card input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 13px 14px;
    color: #e8f0f8;
    background: #0f1722;
    border: 1px solid #334155;
    border-radius: 8px;
    font: inherit;
}

#add-domain-page .add-domain-card input[type="text"]::placeholder {
    color: #64748b;
}

#add-domain-page .add-domain-card input[type="text"]:focus {
    outline: none;
    border-color: #67d5f5;
    box-shadow: 0 0 0 3px rgb(103 213 245 / 12%);
}

#add-domain-page .add-domain-card button[type="submit"] {
    justify-self: start;
    margin-top: 6px;
}

#add-domain-page .add-domain-message {
    margin: 0 0 18px;
    padding: 13px 15px;
    border: 1px solid #26313d;
    border-radius: 9px;
    overflow-wrap: anywhere;
}

#add-domain-page .add-domain-message.error {
    color: #fca5a5;
    background: #241417;
    border-color: #633039;
}

#add-domain-page .add-domain-message.success {
    color: #86efac;
    background: #10251b;
    border-color: #28543b;
}

#add-domain-page .add-domain-addon {
    margin: 14px 0 0;
    color: #9aa8b7;
    font-size: 13px;
    line-height: 1.6;
}

#add-domain-page .add-domain-addon a,
#add-domain-page .form-help a {
    color: #67d5f5;
    text-decoration: none;
}

#add-domain-page .add-domain-addon a:hover,
#add-domain-page .form-help a:hover {
    text-decoration: underline;
}

#add-domain-page .form-help {
    margin: 18px 0 0;
    color: #9aa8b7;
    font-size: 13px;
    line-height: 1.6;
}

#add-domain-page .add-domain-success-actions {
    margin-top: 18px;
}

#add-domain-page .add-domain-success-actions a {
    color: #67d5f5;
    text-decoration: none;
}

#add-domain-page .add-domain-success-actions a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    #add-domain-page .add-domain-container {
        width: calc(100% - 28px);
        margin-top: 22px;
    }

    #add-domain-page .add-domain-card {
        padding: 20px 16px;
    }
}



/* dashboard */

/* ==========================================================================
   Dashboard — domain cards
   ========================================================================== */

.dashboard-domains {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    margin-top: 20px;
}

.dashboard-domain-card {
    min-width: 0;
    overflow: hidden;
    background: #0a0e14;
    border: 1px solid #26313d;
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.dashboard-domain-card:hover {
    border-color: #3a4b5e;
}

.dashboard-domain-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #202b37;
}

.dashboard-domain-identity {
    min-width: 0;
}

.dashboard-domain-name {
    display: block;
    overflow-wrap: anywhere;
    color: #e8f0f8;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.4;
    text-decoration: none;
}

.dashboard-domain-name:hover {
    color: #67d9f5;
}

.dashboard-domain-state {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: #9aa8b7;
    font-size: 12px;
    line-height: 1.4;
}

.dashboard-state-dot {
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.dashboard-state-dot--muted {
    background: #687585;
}

.dashboard-state-dot--unknown {
    background: #687585;
}

.dashboard-domain-score {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-items: end;
    column-gap: 7px;
    row-gap: 2px;
    flex: 0 0 auto;
}

.dashboard-grade {
    grid-row: 1 / 3;
    color: #55d6a7;
    font-size: 27px;
    font-weight: 750;
    line-height: 1;
}

.dashboard-grade--a,
.dashboard-grade--b {
    color: #55d6a7;
}

.dashboard-grade--c {
    color: #f0b45b;
}

.dashboard-grade--d,
.dashboard-grade--e,
.dashboard-grade--f {
    color: #f87171;
}

.dashboard-grade--empty {
    color: #687585;
}

.dashboard-score-value {
    color: #e8f0f8;
    font-size: 14px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.dashboard-score-label {
    grid-column: 1 / -1;
    color: #8b98a7;
    font-size: 10px;
    text-align: right;
}

.dashboard-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 16px 20px;
}

.dashboard-check {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    background: #101720;
    border: 1px solid #202b37;
    border-radius: 8px;
}

.dashboard-check-label {
    color: #9aa8b7;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.dashboard-check-status {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #e0e8f0;
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.dashboard-domain-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 20px;
    border-top: 1px solid #202b37;
    background: rgba(255, 255, 255, .015);
}

.dashboard-domain-action {
    color: #9cc9e8;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.dashboard-domain-action:hover {
    color: #67d9f5;
}

.dashboard-domain-action--events {
    color: #67d9f5;
}

.dashboard-domain-paused {
    padding: 18px 20px;
    color: #9aa8b7;
    font-size: 13px;
}

.dashboard-domain-card--paused {
    border-color: #303a46;
}

@media (min-width: 1500px) {
    .dashboard-domains {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .dashboard-domains {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dashboard-domains {
        gap: 12px;
        margin-top: 16px;
    }

    .dashboard-domain-header {
        gap: 10px;
        padding: 15px;
    }

    .dashboard-domain-name {
        font-size: 15px;
    }

    .dashboard-grade {
        font-size: 24px;
    }

    .dashboard-check-grid {
        gap: 7px;
        padding: 12px 15px;
    }

    .dashboard-check {
        min-height: 54px;
        padding: 9px;
    }

    .dashboard-check-label {
        font-size: 10px;
    }

    .dashboard-check-status {
        font-size: 11px;
    }

    .dashboard-domain-footer {
        padding: 12px 15px;
    }
}

@media (max-width: 360px) {
    .dashboard-check-grid {
        grid-template-columns: 1fr;
    }
}


/* Compact dashboard domain cards */
.dashboard-domains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.dashboard-domain-card {
    border-radius: 10px;
}

.dashboard-domain-header {
    gap: 10px;
    padding: 12px 15px;
}

.dashboard-domain-name {
    font-size: 15px;
}

.dashboard-domain-state {
    margin-top: 5px;
}

.dashboard-grade {
    font-size: 24px;
}

.dashboard-check-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 12px;
}

.dashboard-check {
    min-height: 0;
    gap: 5px;
    padding: 8px;
    border-radius: 7px;
}

.dashboard-check-label {
    font-size: 10px;
}

.dashboard-check-status {
    gap: 5px;
    font-size: 11px;
}

.dashboard-domain-paused {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 15px 0;
    font-size: 12px;
}

.dashboard-pause-message {
    color: #9aa8b7;
}

.dashboard-domain-footer {
    gap: 8px;
    padding: 10px 15px;
}

.dashboard-domain-action {
    font-size: 11px;
}

@media (min-width: 2200px) {
    .dashboard-domains {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .dashboard-domains {
        grid-template-columns: 1fr;
    }

    .dashboard-check-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    .dashboard-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-domain-header {
        padding: 12px;
    }

    .dashboard-check-grid {
        padding: 10px 12px;
    }

    .dashboard-domain-footer {
        padding: 10px 12px;
    }
}

@media (max-width: 360px) {
    .dashboard-check-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-domain-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.dashboard-domain-state .dashboard-domain-action {
    white-space: nowrap;
}



/* Domain scan history */
.domain-scan-history {
    margin-top: 0px;
    border: 0;
    border-radius: 0;
    background: #1a1a1a;
    overflow-x: auto;
}

.domain-scan-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    border: 0;
}

.domain-scan-table > thead > tr > th {
    padding: 13px 16px;
    color: #9aa8b7;
    background: #101720;
    border-bottom: 1px solid #26313d;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.domain-scan-table > tbody > tr > td {
    padding: 15px 16px;
    color: #d8e2ec;
    border-bottom: 1px solid #202b37;
    vertical-align: top;
}

.domain-scan-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.domain-scan-table > tbody > tr > td:nth-child(1) {
    color: #9aa8b7;
    font-size: 12px;
    white-space: nowrap;
}

.domain-scan-table > tbody > tr > td:nth-child(2) {
    color: #e8f0f8;
    font-weight: 600;
}


/* Scan results: keep labels and values together */
.domain-scan-table > tbody > tr > td > table {
    width: auto !important;
    max-width: 100%;
    table-layout: auto;
    border: 0 !important;
    border-collapse: collapse;
}

.domain-scan-table > tbody > tr > td > table > tbody > tr {
    display: table-row !important;
    grid-template-columns: none !important;
}

.domain-scan-table > tbody > tr > td > table > tbody > tr > td {
    width: auto !important;
    max-width: none;
    display: table-cell !important;
    padding: 5px 12px 5px 0 !important;
    border: 0 !important;
    vertical-align: top;
}

.domain-scan-table > tbody > tr > td > table > tbody > tr > td:first-child {
    white-space: normal !important;
    color: #9aa8b7;
}

.domain-scan-table > tbody > tr > td > table > tbody > tr > td:last-child {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.domain-scan-table > tbody > tr > td > table .scan-result-value {
    width: auto !important;
    max-width: none;
}


.domain-scan-table details > summary {
    cursor: pointer;
}

.domain-scan-table details > summary:hover {
    color: #67d9f5 !important;
}

.domain-scan-table .scan-result-row > td {
    padding: 5px 0 !important;
    border: 0 !important;
}

.domain-scan-table .scan-result-row > td:first-child {
    padding-right: 12px !important;
    color: #9aa8b7;
    white-space: normal !important;
}

.domain-scan-table .scan-result-row > td.scan-result-value {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 700px) {
    .domain-scan-history {
        border-radius: 9px;
    }

    .domain-scan-table {
        min-width: 640px;
    }

    .domain-scan-table > thead > tr > th,
    .domain-scan-table > tbody > tr > td {
        padding: 12px;
    }
}


/* Domain page: prevent horizontal overflow */
.info-bar {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.info-col {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.info-col *,
.info-col *::before,
.info-col *::after {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.info-col input,
.info-col select,
.info-col textarea {
    width: 100%;
}

.info-col button {
    max-width: 100%;
    white-space: normal;
}

/* Domain scan history: shared layout */
.domain-scan-history {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overscroll-behavior-x: contain;
	background: #1a1a1a;
}

.domain-scan-table {
    width: 100%;
    max-width: 100%;
}

.domain-scan-table .scan-result-value {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Expandable scan and DNS details */
.domain-scan-table details {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.domain-scan-table details > summary {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    max-width: 100%;
    color: #67d9f5;
    font-size: .85rem;
    line-height: 1.5;
    cursor: pointer;
    overflow-wrap: anywhere;
    list-style: none;
}

.domain-scan-table details > summary::-webkit-details-marker {
    display: none;
}

.domain-scan-table details > summary::before {
    content: "▸";
    flex: 0 0 auto;
    color: #67d9f5;
}

.domain-scan-table details[open] > summary::before {
    content: "▾";
}

.domain-scan-table details > summary:hover {
    color: #a5ecff !important;
}

.domain-scan-table details > div {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.domain-scan-table details > div pre,
.domain-scan-table details > div code {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
}

.domain-scan-table .dns-details-row > td {
    min-width: 0;
    padding-top: 8px !important;
    padding-bottom: 12px !important;
}

.domain-scan-table .dns-details-row details {
    width: 100%;
    min-width: 0;
}

.domain-scan-table .dns-details-row details > div > div,
.domain-scan-table .dns-details-row details > div > div > div {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.domain-scan-table .dns-details-row [style*="font-family:monospace"] {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

@media (max-width: 650px) {
    .info-bar {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .info-col {
        width: 100%;
        padding: 16px;
    }

    .info-col + .info-col {
        border-left: 1px solid #26313d;
    }

    .domain-scan-table details > div {
        padding: 10px;
        font-size: .82rem;
    }
}

/* Mobile layout: only the domain scan history table */
@media (max-width: 700px) {
    .table-scroll.domain-scan-history {
        width: 100%;
        max-width: 100%;
        overflow-x: visible;
        box-sizing: border-box;
    }

	.table-scroll.domain-scan-history .scan-history-time .scan-type-badge {
		display: table;
		margin-top: 5px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: #67d5f5;
		font-size: 0.75rem;
		font-weight: 600;
		line-height: 1.2;
		text-transform: uppercase;
	}

    .table-scroll.domain-scan-history > table.domain-scan-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto;
    }

    .table-scroll.domain-scan-history > table.domain-scan-table > thead {
        display: none !important;
    }

    .table-scroll.domain-scan-history > table.domain-scan-table > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .table-scroll.domain-scan-history > table.domain-scan-table > tbody > tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 12px;
        padding: 8px;
        gap: 0;
        box-sizing: border-box;
        background: #0a0e14;
        border: 1px solid #26313d;
        border-radius: 10px;
    }

    .table-scroll.domain-scan-history > table.domain-scan-table > tbody > tr > td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 8px !important;
        border: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        box-sizing: border-box;
    }

	.table-scroll.domain-scan-history > table.domain-scan-table > tbody > tr > td:nth-child(2) {
		grid-column: 2;
		width: 100% !important;
		min-width: 0 !important;
	}

    .table-scroll.domain-scan-history > table.domain-scan-table > tbody > tr > td:nth-child(4) {
        grid-column: 1 / -1;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Inner table containing individual scan results */
    .table-scroll.domain-scan-history > table.domain-scan-table > tbody > tr > td > table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border: 0 !important;
        border-collapse: collapse;
    }

    .table-scroll.domain-scan-history > table.domain-scan-table > tbody > tr > td > table > tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Keep each label next to its value instead of spreading them apart */
    .table-scroll.domain-scan-history > table.domain-scan-table > tbody > tr > td > table > tbody > tr:not(.dns-details-row) {
        display: flex !important;
        align-items: flex-start;
        gap: 10px;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 8px;
        padding: 4px 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-sizing: border-box;
    }

    .table-scroll.domain-scan-history > table.domain-scan-table > tbody > tr > td > table > tbody > tr:not(.dns-details-row) > td {
        display: block !important;
        flex: 0 1 auto;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 5px 0 !important;
        border: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        box-sizing: border-box;
    }

    .table-scroll.domain-scan-history > table.domain-scan-table > tbody > tr > td > table > tbody > tr:not(.dns-details-row) > td:first-child {
        flex: 0 1 45%;
        max-width: 45% !important;
        padding-right: 0 !important;
        color: #9aa8b7;
    }

    .table-scroll.domain-scan-history > table.domain-scan-table > tbody > tr > td > table > tbody > tr:not(.dns-details-row) > td:last-child {
        flex: 1 1 0;
        min-width: 0 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* DNS details use the full width of the card */
    .table-scroll.domain-scan-history > table.domain-scan-table > tbody > tr > td > table > tbody > tr.dns-details-row {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        background: transparent;
        border: 0;
    }

    .table-scroll.domain-scan-history .dns-details-row > td,
    .table-scroll.domain-scan-history .dns-details-row details,
    .table-scroll.domain-scan-history .dns-details-row details > div {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .table-scroll.domain-scan-history .dns-details-row details > div {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .table-scroll.domain-scan-history .dns-details-row [style*="font-family:monospace"] {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
}


/* Desktop: separate scan history rows into cards */
@media (min-width: 701px) {
    .domain-scan-history {
        overflow-x: auto;
    }

	.domain-scan-table {
		border-collapse: separate;
		border-spacing: 0 10px;
		background: transparent;
	}

	.domain-scan-table > tbody > tr > td {
		background: #0a0e14;
		border-bottom: 0;
	}

	.domain-scan-table > tbody > tr > td:first-child {
		border-radius: 10px 0 0 10px;
	}

	.domain-scan-table > tbody > tr > td:last-child {
		border-radius: 0 10px 10px 0;
	}
}


@media (min-width: 701px) {
    .domain-scan-history {
        width: min(100% - 40px, 1100px);
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}


@media (min-width: 701px) {
    .domain-scan-table > tbody > tr > td.scan-history-time {
        white-space: nowrap;
        vertical-align: top;
    }

    .scan-history-date,
    .scan-history-clock {
        display: block;
    }

    .scan-history-clock {
        margin-top: 3px;
        color: #9aa8b7;
        font-size: 0.78rem;
    }
}

@media (min-width: 701px) {
    .scan-type-badge {
        display: table;
        margin-top: 5px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #67d5f5;
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1.2;
        text-transform: uppercase;
    }
}

.badge-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

.badge-actions .btn {
    box-sizing: border-box;
    height: 36px;
    padding: 0 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
}

.badge-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: auto;
}

@media (min-width: 701px) {
    .scan-settings-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        width: 100%;
        box-sizing: border-box;
    }
}


.domain-verified-status {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
}

.domain-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid #24583d;
    border-radius: 6px;
    background: #0d2119;
    color: #a7e6c0;
    font-weight: 600;
    white-space: nowrap;
}

.domain-verified-text {
    color: #8fa99a;
}

.domain-verified-status svg {
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .domain-verified-status {
        flex-basis: 100%;
        margin-top: 2px;
    }
}

.domain-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: center;
    padding: 3px 7px;
    border: 1px solid #24583d;
    border-radius: 6px;
    background: #0d2119;
    color: #a7e6c0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.domain-title-row .domain-events-link {
    color: #67d5f5;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.domain-title-row .domain-events-link:hover {
    color: #a2eaff;
    text-decoration: underline;
}


.domain-scans-active {
    align-self: center;
    color: #8fa99a;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .domain-scans-active {
        white-space: normal;
    }
}


.domain-verified-badge {
    color: #7ee2a8;
    border-color: #286747;
    background: #10281d;
}

.verified-shield {
    flex-shrink: 0;
    color: #65d995;
    filter: drop-shadow(0 0 3px rgb(101 217 149 / 25%));
}


/* Domain scan history: compact status below scan type */

.domain-scan-table > tbody > tr > td.scan-history-time {
    white-space: nowrap;
}

.domain-scan-table .scan-history-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
}

.domain-scan-table .scan-history-status .dot {
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}


/* Scan details: align with the top of the history row */
.domain-scan-table > tbody > tr > td > table.scan-results-table {
    margin-top: 0 !important;
    vertical-align: top;
}

.domain-scan-table > tbody > tr > td:last-child {
    padding-top: 8px;
}



/* Security report sharing */

.sr-share-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.sr-share-heading h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.sr-share-heading p {
    margin: 3px 0 0;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.4;
}

.sr-share-message {
    margin: 0;
    color: var(--text-dim);
    font-size: 12px;
}

.sr-share-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.sr-share-url-label {
    display: block;
    margin: 0;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.3;
}

.sr-share-copy-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}

.sr-share-copy-row input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 5px 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-family: monospace;
    font-size: 12px;
}

.sr-share-copy-btn,
.sr-share-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.sr-share-copy-btn {
    flex: 0 0 auto;
    border-color: var(--cyan);
    background: var(--cyan);
    color: #0a0e14;
    font-weight: 600;
}

.sr-share-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 7px;
}

.sr-share-actions form {
    display: flex;
    margin: 0;
}

.sr-share-actions .sr-share-create {
    border-color: #17677a;
    background: #122b35;
    color: #67e8f9;
}

.sr-share-actions .sr-share-revoke {
    border-color: #66353a;
    background: #281a1d;
    color: #fca5a5;
}

.sr-share-copy-btn:hover {
    filter: brightness(1.08);
}

.sr-share-actions .sr-share-create:hover {
    background: #193b46;
}

.sr-share-actions .sr-share-revoke:hover {
    background: #3a2227;
}

@media (max-width: 480px) {
    .sr-share-panel {
        padding: 12px;
    }

    .sr-share-actions {
        flex-wrap: wrap;
    }

    .sr-share-copy-row input {
        font-size: 11px;
    }
}


@media (max-width: 600px) {
    .top-bar .nav-actions .lang-switch {
        width: auto;
        align-self: flex-start;
    }

    .top-bar .nav-actions .lang-switch-menu {
        right: auto;
        left: 0;
    }
}

/* Security report: Copy button */
.sr-share-copy-row > button.sr-share-copy-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    background: #122b35;
    color: #67e8f9;
    border: 1px solid #17677a;
    border-radius: 6px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.sr-share-copy-row > button.sr-share-copy-btn:hover {
    background: #193b46;
}


.events-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.events-stat-card-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.events-stat-pair-item {
    min-width: 0;
}

.events-stat-critical {
    color: var(--danger, #ef4444);
}

.events-stat-card {
    text-align: center;
}

.events-stat-pair-item {
    text-align: center;
}





/* DMARC collection — reuse scan settings tile */
.dmarc-collection-settings {
    margin-top: 1rem;
}

.dmarc-collection-settings > summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
}

.dmarc-collection-settings > summary > span {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted, #8fa99a);
}

.dmarc-collection-settings-body {
    padding-top: .85rem;
}

.dmarc-collection-summary-status {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    margin-bottom: .85rem;
    font-size: 12px;
}

.dmarc-collection-summary-status > span {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
}

.dmarc-collection-summary-status .check-mark {
    font-weight: 700;
}

.dmarc-collection-summary-status .status-ok {
    color: #7ee2a8;
}

.dmarc-collection-summary-status .status-error {
    color: #e74c3c;
}

.dmarc-collection-summary-status .status-pending {
    color: var(--muted, #8fa99a);
}

.dmarc-collection-form {
    margin: 0 0 .85rem;
}

.dmarc-collection-toggle {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    cursor: pointer;
    white-space: nowrap;
    font-size: 13px;
}

.dmarc-collection-toggle input {
    flex: 0 0 auto;
    margin: 0;
    accent-color: #65d995;
}

.dmarc-collection-toggle span {
    width: auto;
}

.dmarc-collection-detail-status {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2rem;
}

.dmarc-collection-detail-status > div {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.dmarc-collection-status-label {
    color: var(--muted, #8fa99a);
    font-size: 12px;
}

.dmarc-collection-status-value {
    font-size: 12px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dmarc-collection-status-value.status-ok {
    color: #7ee2a8;
}

.dmarc-collection-status-value.status-error {
    color: #e74c3c;
}

.dmarc-collection-status-value.status-pending {
    color: var(--muted, #8fa99a);
}


/* DMARC collection panel */
.dmarc-collection-settings {
    margin-top: 1rem;
}

.dmarc-collection-heading {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: .85rem;
}

.dmarc-collection-heading > span {
    color: var(--muted, #8fa99a);
    font-size: 12px;
    font-weight: 400;
}

.dmarc-collection-summary-status {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .85rem;
}

.dmarc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.dmarc-status-ok {
    color: #7ee2a8;
    border-color: #286747;
    background: #10281d;
}

.dmarc-status-off {
    color: #8fa99a;
    border-color: #39443f;
    background: #171e1a;
}

.dmarc-status-error {
    color: #e74c3c;
    border-color: #5a2020;
    background: #2a1616;
}

.dmarc-status-badge .check-mark {
    flex-shrink: 0;
    font-weight: 700;
}

.dmarc-collection-form {
    margin: 0 0 .85rem;
}

.dmarc-collection-toggle {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap;
    cursor: pointer;
    font-size: 13px;
}

.dmarc-collection-toggle input {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    accent-color: #65d995;
}

.dmarc-collection-toggle span {
    display: inline;
    width: auto !important;
    white-space: nowrap;
}

.dmarc-collection-detail-status {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2rem;
}

.dmarc-collection-detail-status > div {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.dmarc-collection-status-label {
    color: var(--text, #e8ecf2);
    font-size: 13px;
    font-weight: 600;
}

.dmarc-collection-status-value {
    font-size: 12px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.dmarc-collection-status-value.status-ok {
    color: #7ee2a8;
}

.dmarc-collection-status-value.status-error {
    color: #e74c3c;
}

.dmarc-collection-status-value.status-pending {
    color: var(--muted, #8fa99a);
}

/* DMARC settings tile */
.dmarc-collection-settings {
    padding: 1rem;
    min-width: 0;
}

.dmarc-collection-settings .dmarc-collection-heading {
    margin-bottom: .85rem;
}

.dmarc-collection-summary-status {
    justify-content: center;
}

.dmarc-collection-detail-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 2rem;
}

@media (max-width: 600px) {
    .dmarc-collection-detail-status {
        grid-template-columns: 1fr;
    }
}



.viglar-primary-btn {
    box-sizing: border-box;
    padding: 0.5rem 1.1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #04121c;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.viglar-primary-btn:hover {
    filter: brightness(1.1);
}

.viglar-primary-btn:active {
    transform: translateY(1px);
}

.viglar-primary-btn:focus-visible {
    outline: 2px solid #00c6ff;
    outline-offset: 3px;
}

.viglar-primary-btn
{
	opacity: 0.85;
}



.top-bar .nav-actions .nav-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    min-height: 36px;
    margin: 0;
    padding: 0.5rem 0.8rem;

    background: transparent;
    color: var(--cyan);
    border: 1px solid var(--border);
    border-radius: 8px;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;

    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;

    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background 0.15s ease;
}

.top-bar .nav-actions .nav-outline-btn:hover {
    border-color: rgba(34, 211, 238, 0.45);
    color: var(--cyan);
    background: rgba(34, 211, 238, 0.04);
}

.top-bar .nav-actions .nav-outline-btn.active {
    color: var(--cyan);
    border-color: rgba(34, 211, 238, 0.45);
    background: rgba(34, 211, 238, 0.07);
}




/* csr + mw + etc */
.domain-tools-nav {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0.4rem 0.5rem;
    margin-top: 0.5rem;
    max-width: 100%;
}

.domain-tools-nav .domain-events-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    padding: 0.4rem 0.65rem;

    background: transparent;
    color: var(--cyan);
    border: 1px solid var(--border);
    border-radius: 8px;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;

    text-decoration: none;
    text-align: center;
    cursor: pointer;

    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background 0.15s ease;
}

.domain-tools-nav .domain-events-link:hover {
    border-color: rgba(34, 211, 238, 0.45);
    color: var(--cyan);
    background: rgba(34, 211, 238, 0.04);
}

@media (max-width: 600px) {
    .domain-tools-nav {
        grid-template-columns: repeat(2, minmax(0, max-content));
        gap: 0.35rem;
    }

    .domain-tools-nav .domain-events-link {
        padding: 0.45rem 0.55rem;
        font-size: 0.82rem;
    }
}