:root {
    --navy:       #1a2236;
    --primary:    #2563eb;
    --green:      #16a34a;
    --red:        #dc2626;
    --amber:      #d97706;
    --gray-50:    #f9fafb;
    --gray-100:   #f3f4f6;
    --gray-200:   #e5e7eb;
    --gray-500:   #6b7280;
    --gray-700:   #374151;
    --shadow-sm:  0 2px 8px rgba(0,0,0,.06);
    --shadow-md:  0 4px 20px rgba(0,0,0,.10);
    --radius:     .875rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--gray-100);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--gray-700);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
    background: var(--navy);
    padding: .9rem 0;
    flex-shrink: 0;
}
.header-brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
}
.header-brand:hover { color: rgba(255,255,255,.8); }

/* ── Hero / form ─────────────────────────────────────────────────────────── */
.hero-section {
    background: var(--navy);
    padding: 2.75rem 1rem 4.5rem;
    color: #fff;
    flex-shrink: 0;
}
.hero-title {
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0 0 .4rem;
}
.hero-subtitle {
    color: rgba(255,255,255,.65);
    font-size: 1rem;
    margin: 0 0 1.75rem;
}

.check-form { max-width: 620px; margin: 0 auto; }

.check-input-group {
    display: flex;
    gap: .5rem;
}
.check-input-group .form-control {
    border-radius: .55rem;
    border: none;
    padding: .7rem 1rem;
    font-size: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.check-input-group .form-control:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.35), 0 2px 10px rgba(0,0,0,.2);
}
.check-btn {
    border-radius: .55rem;
    min-width: 95px;
    font-weight: 600;
    flex-shrink: 0;
}
.input-error {
    color: #fca5a5;
    font-size: .85rem;
    margin-top: .4rem;
    text-align: left;
}

/* ── Results section ─────────────────────────────────────────────────────── */
.results-section {
    margin-top: -2rem;
    padding-bottom: .5rem;
}

/* ── Result card ─────────────────────────────────────────────────────────── */
.result-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.result-status-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}
.result-status-bar.is-valid   { background: #f0fdf4; border-bottom: 3px solid var(--green); }
.result-status-bar.is-warning { background: #fffbeb; border-bottom: 3px solid var(--amber); }
.result-status-bar.is-invalid { background: #fff1f2; border-bottom: 3px solid var(--red); }

.status-icon  { font-size: 2.2rem; flex-shrink: 0; line-height: 1; }
.status-host  { font-size: 1.2rem; font-weight: 700; color: #111; word-break: break-all; }
.status-sub   { font-size: .875rem; color: var(--gray-500); margin-top: .1rem; }
.status-badge { margin-left: auto; flex-shrink: 0; }

/* ── Checks grid ─────────────────────────────────────────────────────────── */
.checks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .35rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
}
.check-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    padding: .35rem .25rem;
}
.check-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .65rem;
    font-weight: 800;
    color: #fff;
}
.check-dot.pass { background: var(--green); }
.check-dot.fail { background: var(--red); }

/* ── Certificate details ─────────────────────────────────────────────────── */
.cert-details { padding: 1.1rem 1.25rem; }

.cert-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .45rem .9rem;
    font-size: .875rem;
}
.cert-label {
    color: var(--gray-500);
    font-weight: 500;
    white-space: nowrap;
    padding-top: .05rem;
}
.cert-value { color: #111; word-break: break-all; }

.san-list { display: flex; flex-wrap: wrap; gap: .25rem; }
.san-badge {
    background: #eff6ff;
    color: #1d4ed8;
    padding: .1rem .45rem;
    border-radius: .25rem;
    font-size: .78rem;
    font-family: ui-monospace, monospace;
}

.days-pill {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .25rem;
    font-weight: 600;
    font-size: .78rem;
    margin-left: .35rem;
}
.days-ok      { background: #d1fae5; color: #065f46; }
.days-warning { background: #fef3c7; color: #92400e; }
.days-danger  { background: #fee2e2; color: #991b1b; }

/* ── Technical details toggle ────────────────────────────────────────────── */
.tech-toggle {
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid var(--gray-200);
    padding: .7rem 1.25rem;
    text-align: left;
    font-size: .83rem;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.tech-toggle:hover { background: var(--gray-50); }
.tech-toggle .arrow { transition: transform .2s; display: inline-block; }
.tech-toggle[aria-expanded="true"] .arrow { transform: rotate(180deg); }

.tech-panel {
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--gray-200);
    font-size: .8rem;
}
.tech-panel code {
    font-size: .75rem;
    word-break: break-all;
}

/* ── Connection error card ───────────────────────────────────────────────── */
.conn-error {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 2.5rem 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
}
.conn-error-icon  { font-size: 2.5rem; }
.conn-error-title { font-weight: 700; font-size: 1.1rem; margin: .75rem 0 .25rem; }
.conn-error-msg   { color: var(--gray-500); }

/* ── History section ─────────────────────────────────────────────────────── */
.history-section { padding-bottom: 3rem; }

.history-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gray-500);
    margin-bottom: .75rem;
}

.history-wrap {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.history-wrap table { margin: 0; font-size: .855rem; }
.history-wrap th {
    background: var(--gray-50);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gray-500);
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    border-top: none;
}
.history-wrap td {
    padding: .55rem 1rem;
    vertical-align: middle;
    border-color: var(--gray-200);
}
.history-domain-link {
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    font-family: ui-monospace, monospace;
    font-size: .82rem;
}
.history-domain-link:hover { text-decoration: underline; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
    margin-top: auto;
    padding: 1.25rem 0;
    border-top: 1px solid var(--gray-200);
    background: #fff;
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .hero-title { font-size: 1.45rem; }
    .check-input-group { flex-direction: column; }
    .check-btn { width: 100%; }
    .cert-grid { grid-template-columns: 1fr; }
    .cert-label { color: var(--gray-700); font-size: .78rem; margin-bottom: -.25rem; }
    .checks-grid { grid-template-columns: 1fr 1fr; }
    .status-sub { display: none; }

    .history-wrap th:nth-child(3),
    .history-wrap th:nth-child(4),
    .history-wrap td:nth-child(3),
    .history-wrap td:nth-child(4) { display: none; }
}