/* ===========================================================
   وراثه — Global stylesheet
   Professional White / Black / Beige theme
   =========================================================== */

:root {
    /* Background — slightly darker light blue */
    --bg:            #d7e3f3;
    --bg-alt:        #ffffff;
    --bg-soft:       #e5edf7;
    --bg-muted:      #c6d4ea;

    /* Blue-purple tints (kept --beige-* names for cascade) — purple-leaning */
    --beige-50:      #e0dbef;
    --beige-100:     #cabae8;
    --beige-200:     #ad93db;
    --beige-300:     #8e6cc9;
    --beige-400:     #8b5cf6;
    --beige-500:     #6542a5;
    --beige-600:     #422570;

    /* Dark blue ink — slightly lighter so text is more approachable */
    --ink-900:       #2a3e6a;
    --ink-800:       #35507a;
    --ink-700:       #4b618c;
    --ink-600:       #6478a5;
    --ink-500:       #8290b5;
    --ink-400:       #a0acc6;
    --ink-300:       #bec7d8;
    --ink-200:       #dbe1eb;

    /* Borders */
    --border:        #bccae0;
    --border-soft:   #d1dae9;

    /* Semantic — dark blue primary + vivid purple accent */
    --primary:       #2a3e6a;
    --primary-dark:  #2a3e6a;
    --primary-light: #4b618c;
    --accent:        #8b5cf6;
    --accent-dark:   #7c3aed;
    --accent-soft:   #ede4fd;

    /* Status colors */
    --good:          #5f8f6b;
    --good-soft:     #dcecdf;
    --warn:          #d49a52;
    --warn-soft:     #f5e2c3;
    --bad:           #b8593f;
    --bad-soft:      #f0d2c6;
    --info:          #4a6f8a;
    --info-soft:     #d8e2ea;

    /* Shadows (blue-tinted) */
    --shadow-sm:     0 1px 2px rgba(42,62,106,.06), 0 1px 3px rgba(42,62,106,.03);
    --shadow-md:     0 2px 4px rgba(42,62,106,.06), 0 8px 24px rgba(42,62,106,.1);
    --shadow-lg:     0 4px 8px rgba(42,62,106,.06), 0 20px 48px rgba(42,62,106,.12);
    --shadow-glow:   0 0 0 4px rgba(139,92,246,.2);

    /* Smoother, more consistent radii */
    --radius-sm:     10px;
    --radius:        14px;
    --radius-lg:     18px;
    --radius-xl:     24px;

    /* 8px spacing grid — tightened */
    --sp-1:          0.35rem;
    --sp-2:          0.7rem;
    --sp-3:          1rem;
    --sp-4:          1.4rem;
    --sp-5:          1.8rem;
    --sp-6:          2.2rem;

    /* Motion */
    --ease:          cubic-bezier(.4,0,.2,1);
    --t-fast:        .15s;
    --t-base:        .25s;
    --t-slow:        .4s;

    --font:          "Cairo", "IBM Plex Sans Arabic", "Segoe UI", "Tahoma", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    color: var(--ink-900);
    background: var(--bg);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0em;
    min-height: 100vh;
}

a { color: var(--ink-900); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }

h1, h2, h3, h4, h5 {
    margin: 0 0 .6rem;
    color: var(--ink-900);
    font-weight: 700;
    letter-spacing: -0.01em;
}

p { margin: 0 0 .8rem; color: var(--ink-700); }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

::selection { background: var(--beige-200); color: var(--ink-900); }

/* ============ Scrollbars ============ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-muted); }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 10px; border: 2px solid var(--bg-muted); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

/* ============ Layout shells ============ */
.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}
.app-main {
    padding: 1rem 1.4rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
}
.app-footer {
    padding: 1.2rem 1.5rem;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-alt);
    text-align: center;
    color: var(--ink-500);
    font-size: .97rem;
    margin-top: auto;
}
.app-footer a {
    color: var(--ink-700);
    font-weight: 600;
}
.app-footer a:hover { color: var(--accent-dark); }

/* ============ Topbar ============ */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #ffffff;
    border-bottom: 2px solid #f1f5f9;
    padding: 0 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 60px;
    min-height: 60px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.topbar-title,
.app-topbar-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink-900);
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .45rem;
    letter-spacing: -.01em;
}
.app-topbar-right {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
    margin-inline-start: auto;
}

/* ============ Custom color select dropdown ============ */
.color-select-wrap { position: relative; }
.color-select-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .48rem .75rem;
    background: var(--bg-alt, #fff);
    border: 1px solid var(--border, #bccae0);
    border-radius: 8px;
    cursor: pointer;
    font-size: .95rem;
    direction: rtl;
    text-align: right;
    transition: border-color .2s;
}
.color-select-btn:hover { border-color: var(--accent, #8b5cf6); }
.color-select-btn:focus { outline: 2px solid var(--accent, #8b5cf6); outline-offset: 1px; }
.cs-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    border: 1.5px solid rgba(0,0,0,.15);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cs-text { flex: 1; }
.cs-arrow { font-size: .7rem; color: #888; margin-right: auto; flex-shrink: 0; }
.color-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    background: #fff;
    border: 1px solid var(--border, #bccae0);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(42,62,106,.15);
    z-index: 300;
    display: none;
    overflow: hidden;
}
.color-select-dropdown.open { display: block; }
.cs-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .48rem .75rem;
    cursor: pointer;
    direction: rtl;
    font-size: .93rem;
    transition: background .15s;
}
.cs-option:hover { background: var(--beige-50, #f5f0ff); }
.cs-option.selected { background: var(--beige-100, #ede9fe); font-weight: 600; }

/* ============ Topbar menu button + dropdown ============ */
.topbar-menu-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border-radius: 12px;
    background: #1e293b;
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    border: none;
    transition: background .18s, box-shadow .18s;
    box-shadow: 0 2px 8px rgba(30,41,59,.18);
    letter-spacing: .01em;
}
.topbar-menu-btn:hover { background: #0f172a; box-shadow: 0 4px 16px rgba(30,41,59,.28); }

.menu-hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
    flex-shrink: 0;
}
.menu-hamburger span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all .2s;
}
.topbar-menu-btn.is-open .menu-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar-menu-btn.is-open .menu-hamburger span:nth-child(2) { opacity: 0; }
.topbar-menu-btn.is-open .menu-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Dropdown panel */
.topbar-menu-dd {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06);
    min-width: 240px;
    z-index: 9999;
    padding: .6rem;
    flex-direction: column;
    gap: .15rem;
    animation: ddFadeIn .18s ease;
}
@keyframes ddFadeIn {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.topbar-menu-dd.open { display: flex; }

/* Divider inside dropdown */
.topbar-menu-dd .dd-divider {
    height: 1px;
    background: #f1f5f9;
    margin: .3rem .4rem;
    border: none;
}

.topbar-menu-dd a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem 1rem;
    border-radius: 11px;
    font-size: .88rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: background .12s, color .12s;
    white-space: nowrap;
    direction: rtl;
}
.topbar-menu-dd a .dd-icon { font-size: 1rem; flex-shrink: 0; width: 22px; text-align: center; }
.topbar-menu-dd a:hover  { background: #f8fafc; color: #0f172a; }
.topbar-menu-dd a.active {
    background: #1e293b;
    color: #fff;
}
.topbar-menu-dd a.active:hover { background: #0f172a; }

/* Mobile: full-width dropdown, anchored to viewport edge */
@media (max-width: 600px) {
    .app-topbar { padding: 0 1rem; }
    .app-topbar-title { font-size: .95rem; }
    .topbar-menu-btn { padding: .45rem .8rem; font-size: .82rem; }
    .topbar-menu-dd {
        right: auto;
        left: 50%;
        transform: translateX(50%);
        min-width: 200px;
    }
}

/* Bell button */
.topbar-notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.topbar-notif-bell:hover { background: #f1f5f9; border-color: #cbd5e1; }
.topbar-notif-count {
    position: absolute;
    top: -5px;
    left: -5px;
    background: #ef4444;
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    padding: 0 3px;
}
.topbar-user-chip {
    display: none !important;
    background: var(--beige-50);
    color: var(--ink-900);
    border: 1px solid var(--border);
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: .97rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: background .2s, border-color .2s;
}
.topbar-user-chip:hover { background: var(--beige-100); border-color: var(--beige-300); }
.topbar-user-chip.active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }

/* ============ Page headers ============ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.page-header h2 {
    font-size: 1.75rem;
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}
.page-header h3 { font-size: 1.1rem; margin: 0; color: var(--ink-700); font-weight: 700; }

/* ============ Cards — unified 24px padding on 8px grid ============ */
.card,
.form-card,
.chart-card,
.table-card,
.info-card,
.faq-card,
.social-card,
.gauge-card,
.rev-form-card,
.rev-result-card {
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-3);
    transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.card:hover,
.chart-card:hover,
.table-card:hover { box-shadow: var(--shadow-md); }
.gauge-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: .2rem; }
.gauge-card-subtitle { color: var(--ink-500); font-size: 1.05rem; margin-bottom: .6rem; }
.gauge-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 340px;
    margin: 0 auto;
}
.gauge-svg {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: block;
}

/* ============ Buttons ============ */
.btn-submit, .btn-login, .btn-register, .btn-send, .btn-infer, .btn-go,
.btn-next, .btn-action, .btn-new, .btn-detail, .btn-delete,
.btn-confirm, .btn-cancel, .btn-complete,
.btn-submit-modal, .btn-go-login, .btn-new-appt, .btn-new-conv,
.btn-appt-action, .btn-back-conv, .btn-close-conv, .btn-send-conv,
.btn-prev {
    appearance: none;
    border: 1px solid transparent;
    background: var(--ink-900);
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: .95rem;
    padding: .75rem 1.4rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease), background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    line-height: 1;
    letter-spacing: -0.005em;
    position: relative;
    overflow: hidden;
}
.btn-submit::after, .btn-login::after, .btn-register::after, .btn-new::after,
.btn-next::after, .btn-send::after, .btn-new-appt::after, .btn-new-conv::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease);
    pointer-events: none;
}
.btn-submit:hover::after, .btn-login:hover::after, .btn-register:hover::after,
.btn-new:hover::after, .btn-next:hover::after, .btn-send:hover::after,
.btn-new-appt:hover::after, .btn-new-conv:hover::after {
    transform: translateX(100%);
}
.btn-submit:hover, .btn-login:hover, .btn-register:hover, .btn-send:hover,
.btn-infer:hover, .btn-go:hover, .btn-next:hover, .btn-new:hover,
.btn-submit-modal:hover, .btn-go-login:hover, .btn-new-appt:hover,
.btn-new-conv:hover, .btn-send-conv:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(42,62,106,.18);
}
.btn-submit:active, .btn-login:active, .btn-new:active, .btn-next:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}
button:disabled, .btn-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-prev {
    background: transparent;
    color: var(--ink-900);
    border-color: var(--border);
}
.btn-prev:hover { background: var(--beige-50); border-color: var(--beige-300); }

/* Color variants */
.btn-action.btn-blue   { background: var(--ink-900); color: #fff; }
.btn-action.btn-gray   { background: var(--beige-50); color: var(--ink-900); border-color: var(--border); }
.btn-action.btn-teal   { background: var(--beige-500); color: #fff; }
.btn-action.btn-purple { background: var(--ink-800); color: #fff; }
.btn-action.btn-orange { background: var(--beige-400); color: #fff; }
.btn-action.btn-share  { background: #059669; color: #fff; }
.btn-action:hover      { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-detail { background: var(--ink-900); color: #fff; }
.btn-delete { background: transparent; color: var(--bad); border-color: var(--border); }
.btn-delete:hover { background: var(--bad-soft); border-color: var(--bad); }

/* Primary "new" button — hero action, unmistakable */
.btn-new {
    background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);
    color: #fff;
    font-weight: 800;
    padding: var(--sp-2) var(--sp-3);
    font-size: .95rem;
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(42,62,106,.22), 0 2px 4px rgba(42,62,106,.12);
    letter-spacing: -0.005em;
    border: 1px solid rgba(139,92,246,.2);
    gap: var(--sp-1);
}
.btn-new::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink-900);
    font-weight: 900;
    font-size: 1rem;
    margin-inline-end: .2rem;
}
.btn-new:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(42,62,106,.3), 0 4px 8px rgba(42,62,106,.18);
}
.btn-new:hover::before { background: #c4b5fd; }
.btn-new:active { transform: translateY(0); }

.btn-confirm, .btn-appt-action.btn-confirm  { background: var(--good); color: #fff; }
.btn-cancel,  .btn-appt-action.btn-cancel   { background: transparent; color: var(--bad); border-color: var(--border); }
.btn-cancel:hover { background: var(--bad-soft); }
.btn-complete, .btn-appt-action.btn-complete { background: var(--ink-900); color: #fff; }

.btn-appt-action {
    padding: .45rem .9rem;
    font-size: .95rem;
    border-radius: 8px;
}

.btn-back-conv, .btn-close-conv {
    background: transparent;
    color: var(--ink-900);
    border-color: var(--border);
    padding: .45rem .75rem;
    font-size: .97rem;
}
.btn-back-conv:hover, .btn-close-conv:hover { background: var(--beige-50); }

/* Secondary/ghost small buttons — clearly below primary */
.btn-sm, .btn-sm.save, .btn-sm.delete {
    padding: var(--sp-1) var(--sp-2);
    font-size: .95rem;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    color: var(--ink-900);
    font-family: inherit;
    font-weight: 700;
    transition: all var(--t-base) var(--ease);
}
.btn-sm:hover { background: var(--bg-muted); border-color: var(--beige-300); }
.btn-sm.save {
    background: var(--ink-900);
    color: #fff;
    border-color: var(--ink-900);
    box-shadow: 0 2px 6px rgba(42,62,106,.12);
}
.btn-sm.save:hover { background: #000; box-shadow: 0 4px 10px rgba(42,62,106,.18); }
.btn-sm.delete { background: transparent; color: var(--bad); border-color: var(--border); }
.btn-sm.delete:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }

.btn-login-nav {
    background: var(--ink-900);
    color: #fff;
    padding: .55rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid var(--ink-900);
    transition: background .2s, color .2s;
}
.btn-login-nav:hover { background: transparent; color: var(--ink-900); }

/* ============ Forms ============ */
label {
    display: block;
    font-weight: 600;
    margin-bottom: .3rem;
    font-size: .95rem;
    color: var(--ink-800);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-alt);
    color: var(--ink-900);
    font-family: inherit;
    font-size: .95rem;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea { resize: vertical; min-height: 96px; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
    background: var(--bg-alt);
}
input::placeholder, textarea::placeholder { color: var(--ink-300); }

.form-group { margin-bottom: .7rem; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.form-row.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-row.two { grid-template-columns: 1fr; } }

.input-box, .input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.input-wrap input,
.input-wrap select,
.input-wrap textarea { padding-right: 2.5rem; }
.input-icon, .input-wrap .ico {
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-400);
    pointer-events: none;
    font-size: 1rem;
}
/* RTL: keep icon on right by default */
html[dir="rtl"] .input-icon,
html[dir="rtl"] .input-wrap .ico { right: .85rem; left: auto; }

.checkbox-group { display: flex; align-items: center; gap: .55rem; }
.checkbox-group input { width: auto; margin: 0; }
.checkbox-group label { margin: 0; font-weight: 500; color: var(--ink-700); }

/* Form sections */
.form-section {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-top: 4px solid var(--ink-900);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: .8rem;
    box-shadow: var(--shadow-sm);
}
.form-section h2 {
    color: var(--ink-900);
    font-size: 1.2rem;
    margin-bottom: .7rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--border);
}
.form-section.mother { border-top-color: var(--beige-500); }
.form-section.extra  { border-top-color: var(--beige-400); }
.form-section.review { border-top-color: var(--ink-900); }

/* Form hero banner */
.form-hero {
    position: relative;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(139,92,246,.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 70%, rgba(139,92,246,.12) 0%, transparent 60%),
        linear-gradient(135deg, #1a2847 0%, #4c2d85 100%);
    color: #fff;
    padding: 1.4rem 1.5rem;
    border-radius: var(--radius-xl);
    margin-bottom: 1rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 140px;
}
.form-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(139,92,246,.04) 30px, rgba(139,92,246,.04) 31px);
    pointer-events: none;
}
.form-hero-text { flex: 1; z-index: 2; }
.form-hero-text h1 { color: #fff; font-size: 1.4rem; margin-bottom: .3rem; }
.form-hero-text p  { color: var(--beige-100); margin: 0; font-size: .95rem; }
.form-hero-dna, .form-hero-dna-r { opacity: .25; max-width: 120px; }
.form-hero-dna-r { position: absolute; left: 1rem; bottom: 0; }

.hero-steps {
    display: flex;
    gap: .4rem;
    margin-top: .8rem;
    flex-wrap: wrap;
}
.hero-step {
    background: rgba(255,255,255,.1);
    color: #fff;
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: .90rem;
    border: 1px solid rgba(255,255,255,.2);
}

/* ============ Wizard ============ */
.wizard-wrap {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.wizard-steps {
    display: flex;
    justify-content: space-between;
    gap: 0;
    background: var(--bg-alt);
    padding: .8rem 1rem .6rem;
    border-radius: 0;
    border: none;
    border-bottom: none;
    box-shadow: none;
    margin-bottom: 0;
}
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: .3rem;
    padding: .4rem .3rem;
    color: var(--ink-400);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s;
}
.step-item:hover { color: var(--ink-700); }
.step-item.active { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.step-item.done   { color: var(--beige-500); border-bottom-color: var(--beige-400); cursor: pointer; }
.step-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--ink-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    transition: background .2s, color .2s;
}
.step-item.active .step-num { background: var(--ink-900); color: #fff; }
.step-item.done .step-num   { background: var(--beige-400); color: #fff; }
.step-label { white-space: nowrap; font-size: .85rem; }

.progress-bar-wrap {
    height: 5px !important;
    background: var(--bg-muted) !important;
    border-radius: 0 !important;
    overflow: hidden;
    margin: 0 !important;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ink-900), var(--accent));
    transition: width .4s ease;
    width: 0;
}

.wizard-inner {
    padding: 1.5rem;
}

.wizard-panel { display: none; animation: fadeIn .3s ease; }
.wizard-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* Stagger cards on page-load */
.stats-row > *,
.summary-bar > * {
    animation: slideUp .4s var(--ease) both;
}
.stats-row > *:nth-child(1), .summary-bar > *:nth-child(1) { animation-delay: .02s; }
.stats-row > *:nth-child(2), .summary-bar > *:nth-child(2) { animation-delay: .08s; }
.stats-row > *:nth-child(3), .summary-bar > *:nth-child(3) { animation-delay: .14s; }
.stats-row > *:nth-child(4), .summary-bar > *:nth-child(4) { animation-delay: .2s; }

.charts-grid > .chart-card {
    animation: fadeIn .45s var(--ease) both;
}
.charts-grid > .chart-card:nth-child(1) { animation-delay: .1s; }
.charts-grid > .chart-card:nth-child(2) { animation-delay: .18s; }
.charts-grid > .chart-card:nth-child(3) { animation-delay: .26s; }
.charts-grid > .chart-card:nth-child(4) { animation-delay: .34s; }

.progress-bar-wrap {
    height: 6px;
    background: var(--beige-100);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 1.2rem;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ink-900), var(--beige-500));
    transition: width .4s ease;
    width: 0;
}

.nav-btns {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.5rem;
}

/* ============ Review table ============ */
.review-section-title {
    background: var(--beige-50);
    color: var(--ink-900);
    padding: .55rem .85rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    margin: .8rem 0 .4rem;
    font-size: .97rem;
    border-right: 3px solid var(--ink-900);
}
.review-section-title.mother-color { border-right-color: var(--beige-500); }
.review-section-title.extra-color  { border-right-color: var(--beige-400); }

.review-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
.review-table th,
.review-table td {
    padding: .6rem .9rem;
    text-align: right;
    border-bottom: 1px solid var(--border);
    font-size: .95rem;
}
.review-table th { background: var(--beige-50); color: var(--ink-700); font-weight: 600; }

/* ============ Tables (generic) ============ */
.table-card { padding: var(--sp-3); }
table.data-table,
#resultsTable,
#usersTable,
.patients-table,
.compare-table,
.detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}
.data-table th, .data-table td,
#resultsTable th, #resultsTable td,
#usersTable th, #usersTable td,
.patients-table th, .patients-table td,
.compare-table th, .compare-table td,
.detail-table th, .detail-table td {
    padding: .65rem .9rem;
    text-align: right;
    border-bottom: 1px solid var(--border-soft);
}
.data-table thead th,
#resultsTable thead th,
#usersTable thead th,
.patients-table thead th,
.compare-table thead th,
.detail-table thead th {
    background: var(--beige-50);
    color: var(--ink-600);
    font-weight: 700;
    font-size: .97rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    padding: .65rem .9rem;
}
.data-table tbody tr:hover,
.patients-table tbody tr:hover,
#usersTable tbody tr:hover,
#resultsTable tbody tr:hover {
    background: var(--beige-50);
}

.loading { color: var(--ink-400); font-style: italic; }
.loading-placeholder {
    text-align: center;
    color: var(--ink-400);
    padding: 2rem;
    font-style: italic;
}

/* Search bar */
.search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1;
    max-width: 340px;
}
.search-wrap input {
    padding-right: 2.5rem;
}
.search-icon {
    position: absolute;
    right: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-400);
    pointer-events: none;
}

.role-select {
    padding: .5rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-alt);
    font-weight: 600;
    font-size: .97rem;
}

/* ============ Badges — solid pill style (mockup-matching) ============ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    font-size: .97rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
    background: var(--beige-100);
    color: var(--ink-900);
}
.badge-low,    .risk-badge.risk-low,   .risk-low    { background: var(--good); color: #fff; }
.badge-medium, .badge-med, .risk-badge.risk-medium, .risk-medium { background: var(--warn); color: #fff; }
.badge-high,   .risk-badge.risk-high,  .risk-high   { background: var(--bad); color: #fff; }
.risk-badge.risk-none, .risk-none { background: var(--beige-100); color: var(--ink-700); }

.badge-admin  { background: var(--ink-900); color: #fff; }
.badge-doctor { background: var(--good); color: #fff; }
.badge-user   { background: var(--beige-200); color: var(--ink-900); }

.risk-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .85rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    border: 1px solid transparent;
    color: #fff;
}

.me-badge {
    display: inline-block;
    background: var(--ink-900);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
    margin-right: .3rem;
}

/* ============ Dashboard stats ============ */
.stats-row,
.summary-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(192px, 1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.stat-card,
.sum-box {
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
    position: relative;
    overflow: hidden;
}
.stat-card::before,
.sum-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ink-900);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}
.stat-card:hover, .sum-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--beige-200);
}
.stat-card .num, .sum-num, .num {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--ink-900);
    line-height: 1;
    margin-bottom: var(--sp-1);
    font-feature-settings: "tnum";
    letter-spacing: -0.03em;
}
.stat-card .lbl, .sum-lbl, .lbl {
    font-size: .95rem;
    color: var(--ink-500);
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
}

.stat-card.blue::before   { background: var(--ink-900); }
.stat-card.green::before, .sum-box.green::before   { background: var(--good); }
.stat-card.orange::before, .sum-box.orange::before { background: var(--warn); }
.stat-card.red::before, .sum-box.red::before       { background: var(--bad); }

/* ============ Charts grid ============ */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.chart-card {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
}
.chart-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--sp-2);
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid var(--border-soft);
    color: var(--ink-900);
    letter-spacing: -0.01em;
}
.chart-wrap {
    position: relative;
    height: 240px;
    width: 100%;
    flex: 0 0 auto;
}
.chart-wrap canvas {
    max-width: 100% !important;
    max-height: 100% !important;
    display: block;
}

/* ============ Table toolbar (dashboard) ============ */
.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
}
.table-toolbar-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-900);
}
.table-toolbar-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}
.table-toolbar-actions .search-wrap {
    width: 260px;
    max-width: 100%;
    margin: 0;
}
.table-toolbar-actions .search-wrap input {
    padding: .55rem .9rem .55rem 2.5rem;
    border-radius: 10px;
    font-size: .97rem;
}
.table-toolbar-actions .role-select {
    padding: .55rem .9rem;
    border-radius: 10px;
    font-size: .97rem;
    min-width: 150px;
}
.table-scroll {
    overflow-x: auto;
    margin: 0 calc(var(--sp-3) * -1);
    padding: 0 var(--sp-3);
}
.table-pager {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border-soft);
    font-size: .97rem;
    color: var(--ink-500);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
}
.pager-info strong { color: var(--ink-900); font-weight: 800; }
.pager-nav { display: inline-flex; gap: .5rem; }
.pager-nav a {
    display: inline-flex;
    align-items: center;
    padding: .4rem .9rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-weight: 600;
    color: var(--ink-700);
    transition: all .2s;
    text-decoration: none;
}
.pager-nav a:hover {
    background: var(--ink-900);
    color: #fff;
    border-color: var(--ink-900);
}

.btn-view-sm {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .85rem;
    background: var(--ink-900);
    color: #fff;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, transform .15s;
}
.btn-view-sm:hover {
    background: #000;
    color: #fff;
    transform: translateY(-1px);
}

/* ============ Role notice ============ */
.role-notice {
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-right: 3px solid var(--ink-900);
    padding: .95rem 1.2rem;
    border-radius: var(--radius);
    margin-bottom: 1.3rem;
    color: var(--ink-800);
    font-size: .92rem;
    box-shadow: var(--shadow-sm);
}
.role-notice strong { color: var(--ink-900); font-weight: 800; }
.role-notice.doctor-notice { border-right-color: var(--beige-400); }

/* ============ Modals ============ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(42,62,106,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(3px);
    padding: 1rem;
    animation: fadeIn .18s ease;
}
.modal-box {
    background: var(--bg-alt);
    border-radius: var(--radius-xl);
    padding: 0;
    max-width: 520px;
    width: 100%;
    max-height: 92vh;
    overflow: auto;
    box-shadow: var(--shadow-lg);
    animation: modalIn .22s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.3rem;
    border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 1.05rem; }
.modal-close {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--ink-500);
    padding: .25rem .5rem;
    border-radius: 8px;
    transition: background .2s;
}
.modal-close:hover { background: var(--beige-50); color: var(--ink-900); }
.modal-box form { padding: 1.3rem; }
.btn-submit-modal { width: 100%; margin-top: .6rem; }

/* ============ Empty states ============ */
.empty-state, .empty-result, .appt-empty, .conv-empty, .chat-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--ink-500);
}
.empty-state .big-icon, .chat-empty-icon, .appt-empty-icon {
    font-size: 3rem;
    margin-bottom: .6rem;
    opacity: .6;
}

/* ============ Result page — FULL DARK ============ */
body.page-dark {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(167,139,250,.12) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 85%, rgba(139,92,246,.1) 0%, transparent 60%),
        linear-gradient(180deg, #1a2847 0%, #2a3e6a 50%, #1a2847 100%);
    color: #fff;
    min-height: 100vh;
}
body.page-dark::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(167,139,250,.05) 1px, transparent 1.5px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}
body.page-dark > * { position: relative; z-index: 1; }
body.page-dark .app-topbar {
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(167,139,250,.1);
}
body.page-dark .app-topbar-title,
body.page-dark .topbar-title { color: #fff; }
body.page-dark .topbar-user-chip {
    background: rgba(167,139,250,.12);
    border-color: rgba(167,139,250,.25);
    color: var(--beige-100);
}
body.page-dark .topbar-user-chip:hover { background: rgba(167,139,250,.2); }
body.page-dark h1, body.page-dark h2, body.page-dark h3, body.page-dark h4 { color: #fff; }
body.page-dark p { color: rgba(255,255,255,.75); }
body.page-dark .hamburger-btn {
    background: rgba(167,139,250,.1);
    border-color: rgba(167,139,250,.2);
}
body.page-dark .hamburger-btn span { background: var(--beige-200); }

.result-hero {
    position: relative;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(167,139,250,.18) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 80%, rgba(139,92,246,.12) 0%, transparent 60%),
        linear-gradient(135deg, #2a3e6a 0%, #5d3a9f 100%);
    color: #fff;
    padding: 1rem 1.2rem;
    margin: 0 0 .8rem;
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.result-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(167,139,250,.06) 1px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: .5;
    pointer-events: none;
}
.result-hero > * { position: relative; z-index: 2; }
.result-hero h1,
.result-hero h2 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
}
.result-hero .sub {
    color: var(--beige-100);
    font-size: 1rem;
    max-width: 480px;
    margin: 0 auto;
}
.risk-badge-hero {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    padding: .7rem 1.3rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
}

.disclaimer-bar, .medical-disclaimer {
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-right: 4px solid var(--warn);
    padding: .75rem 1.1rem;
    border-radius: var(--radius);
    margin-bottom: .7rem;
    color: var(--ink-700);
    font-size: 1.1rem;
}

.actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .8rem;
}

.result-tabs {
    display: inline-flex;
    gap: .3rem;
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: .3rem;
    margin-bottom: .8rem;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    max-width: 100%;
}
.result-tab {
    background: transparent;
    border: none;
    padding: .55rem 1.1rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--ink-500);
    cursor: pointer;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 1rem;
    transition: color .2s, background .25s;
}
.result-tab:hover { color: var(--ink-900); background: var(--beige-50); }
.result-tab.active {
    color: #fff;
    background: var(--ink-900);
    box-shadow: 0 2px 8px rgba(42,62,106,.2);
}

.result-tab-panel { display: none; }
.result-tab-panel.active { display: block; animation: fadeIn .25s ease; }

/* Dark-page overrides for cards */
body.page-dark .card,
body.page-dark .chart-card,
body.page-dark .table-card,
body.page-dark .info-card,
body.page-dark .gauge-card,
body.page-dark .baby-card,
body.page-dark .sim-card,
body.page-dark .punnett-card,
body.page-dark .id-card,
body.page-dark .prob-group,
body.page-dark .eye-color-section,
body.page-dark .rev-form-card,
body.page-dark .rev-result-card {
    background: rgba(255,255,255,.04);
    border-color: rgba(167,139,250,.18);
    color: rgba(255,255,255,.88);
    backdrop-filter: blur(8px);
}
body.page-dark .disclaimer-bar,
body.page-dark .medical-disclaimer,
body.page-dark .role-notice,
body.page-dark .info-box,
body.page-dark .edu-info-box,
body.page-dark .role-info,
body.page-dark .xlinked-note,
body.page-dark .doctor-notice {
    background: rgba(167,139,250,.08);
    border-color: rgba(167,139,250,.22);
    color: var(--beige-100);
}
body.page-dark .result-tabs {
    background: rgba(10,8,6,.5);
    border-color: rgba(167,139,250,.2);
    backdrop-filter: blur(10px);
}
body.page-dark .result-tab { color: rgba(255,255,255,.65); }
body.page-dark .result-tab:hover { color: #fff; background: rgba(167,139,250,.1); }
body.page-dark .result-tab.active {
    background: var(--accent);
    color: var(--ink-900);
    box-shadow: 0 2px 12px rgba(167,139,250,.3);
}
body.page-dark .btn-action,
body.page-dark .btn-view,
body.page-dark .btn-report,
body.page-dark .btn-print-card,
body.page-dark .btn-note,
body.page-dark .btn-dashboard {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-color: rgba(167,139,250,.25);
}
body.page-dark .btn-action:hover,
body.page-dark .btn-view:hover,
body.page-dark .btn-dashboard:hover {
    background: var(--accent);
    color: var(--ink-900);
    border-color: var(--accent);
}
body.page-dark .gauge-score-badge {
    background: rgba(10,8,6,.6);
    border-color: var(--accent);
    box-shadow: 0 0 0 12px rgba(167,139,250,.1), 0 24px 60px rgba(0,0,0,.6);
}
body.page-dark .gauge-score-label { color: #fff; }
body.page-dark .score-circle {
    background: rgba(10,8,6,.6);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 12px rgba(167,139,250,.1);
}
body.page-dark .score-num { color: var(--accent); }
body.page-dark .score-slash { color: var(--beige-200); }
body.page-dark .pc-cell {
    background: rgba(10,8,6,.6);
    border-color: rgba(167,139,250,.2);
    color: rgba(255,255,255,.85);
}
body.page-dark .punnett-parents { background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.2); color: #fff; }
body.page-dark .ptab {
    background: transparent;
    color: var(--beige-200);
    border-color: rgba(167,139,250,.25);
}
body.page-dark .ptab.active {
    background: var(--accent);
    color: var(--ink-900);
    border-color: var(--accent);
}
body.page-dark .eye-prob-item,
body.page-dark .blood-item,
body.page-dark .prob-item,
body.page-dark .baby-info-box {
    background: rgba(255,255,255,.04);
    border-color: rgba(167,139,250,.15);
    color: #fff;
}
body.page-dark .disease-card {
    background: rgba(255,255,255,.04);
    border-color: rgba(167,139,250,.18);
    color: #fff;
}
body.page-dark .disease-card .dc-desc { color: rgba(255,255,255,.7); }
body.page-dark .disease-card .dc-en { color: var(--beige-200); }
body.page-dark .id-card {
    background: linear-gradient(135deg, rgba(167,139,250,.08), rgba(255,255,255,.03));
}
body.page-dark .id-card-lbl { color: var(--beige-200); }
body.page-dark .id-card-val { color: #fff; }
body.page-dark .id-card-row { border-bottom-color: rgba(167,139,250,.15); }
body.page-dark table,
body.page-dark .data-table,
body.page-dark #resultsTable,
body.page-dark .patients-table,
body.page-dark .compare-table,
body.page-dark .parents-tbl,
body.page-dark .disease-tbl { color: #fff; }
body.page-dark table thead th,
body.page-dark .data-table thead th,
body.page-dark .parents-tbl th,
body.page-dark .disease-tbl th {
    background: rgba(167,139,250,.1);
    color: var(--beige-100);
    border-bottom-color: rgba(167,139,250,.2);
}
body.page-dark table td,
body.page-dark .data-table td,
body.page-dark .parents-tbl td,
body.page-dark .disease-tbl td { border-bottom-color: rgba(167,139,250,.12); }
body.page-dark table tbody tr:hover td { background: rgba(167,139,250,.05); }
body.page-dark .field-label { background: rgba(167,139,250,.08); color: var(--beige-100); }

/* Info cards inside results */
.info-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.info-card-mini {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border-right: 3px solid var(--ink-900);
}
.info-card-mini.ic-1 { border-right-color: var(--ink-900); }
.info-card-mini.ic-2 { border-right-color: var(--beige-500); }
.info-card-mini.ic-3 { border-right-color: var(--beige-400); }
.info-card-mini.ic-4 { border-right-color: var(--warn); }
.ic-icon { font-size: 2.6rem; }
.ic-title { font-weight: 700; font-size: 1.05rem; margin-bottom: .3rem; }
.ic-desc  { font-size: .90rem; color: var(--ink-500); }

/* Disease cards */
.disease-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.disease-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-right: 4px solid var(--beige-400);
    border-radius: var(--radius);
    padding: .75rem 1rem;
}
.dc-name { font-weight: 700; font-size: 1.1rem; margin-bottom: .1rem; }
.dc-en   { font-size: .97rem; color: var(--ink-400); font-style: italic; margin-bottom: .3rem; }
.dc-desc { font-size: .95rem; color: var(--ink-700); }

.diseases-simple {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.ds-header {
    background: var(--beige-50);
    padding: .8rem 1.1rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}

/* Punnett */
.ptab {
    background: transparent;
    border: 1px solid var(--border);
    padding: .45rem .9rem;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    color: var(--ink-700);
    margin: 0 .2rem .35rem;
    transition: all .2s;
}
.ptab:hover { border-color: var(--ink-900); }
.ptab.active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }

.punnett-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
    margin: 1.2rem auto;
    max-width: 360px;
}
.punnett-cell {
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    padding: 1rem .5rem;
    text-align: center;
    font-weight: 800;
    border-radius: 12px;
    font-size: 1rem;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.punnett-cell:hover { transform: scale(1.03); box-shadow: var(--shadow-sm); }

/* Corner cell (top-right in RTL) */
.punnett-cell.punnett-corner {
    background: var(--ink-900);
    border-color: var(--ink-900);
}
.punnett-cell.punnett-corner:hover { transform: none; }

/* Allele headers (mother on top, father on side) */
.punnett-cell.punnett-header {
    background: linear-gradient(135deg, var(--ink-900), var(--ink-700));
    color: var(--accent);
    border-color: var(--ink-900);
    font-family: "Consolas", "Courier New", monospace;
    font-size: 1.15rem;
    box-shadow: 0 2px 8px rgba(42,62,106,.12);
}

/* Genotype result cells */
.punnett-cell.punnett-nn {
    background: var(--good-soft);
    border-color: var(--good);
    color: #3d6048;
    font-family: "Consolas", "Courier New", monospace;
}
.punnett-cell.punnett-carrier {
    background: var(--warn-soft);
    border-color: var(--warn);
    color: #8a5e2a;
    font-family: "Consolas", "Courier New", monospace;
}
.punnett-cell.punnett-affected {
    background: var(--bad-soft);
    border-color: var(--bad);
    color: #8a3e24;
    font-family: "Consolas", "Courier New", monospace;
}

.punnett-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .8rem;
}

/* ============ Analyses grid (my-analyses) ============ */
.analyses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.3rem;
}
.analysis-card {
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: .9rem 1rem;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .25s, border-color .25s;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    position: relative;
    overflow: hidden;
}
.analysis-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    background: radial-gradient(circle at top right, rgba(167,139,250,.08) 0%, transparent 70%);
    pointer-events: none;
}
.analysis-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--beige-300);
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .7rem;
}
.card-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--ink-900);
    flex: 1;
}
.card-date {
    font-size: .9rem;
    color: var(--ink-500);
    font-feature-settings: "tnum";
    font-weight: 600;
}
.card-body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .95rem;
    color: var(--ink-700);
}
.card-row {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}
.card-footer {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding-top: .8rem;
    margin-top: .3rem;
    border-top: 1px solid var(--border-soft);
}

/* ============ Compare page ============ */
.compare-selectors {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.3rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
}
@media (max-width: 720px) {
    .compare-selectors { grid-template-columns: 1fr; }
    .compare-vs { text-align: center; }
}
.compare-vs {
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--beige-500);
    padding: 0 .5rem;
}
.compare-select-box label { display: block; margin-bottom: .4rem; }

.compare-table-wrap {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: auto;
    box-shadow: var(--shadow-sm);
}
.compare-table { width: 100%; }
.compare-table thead th.col-a1 { background: var(--beige-50); }
.compare-table thead th.col-a2 { background: var(--beige-100); }
.field-label { font-weight: 700; color: var(--ink-700); background: var(--beige-50); }
.cell-good    { color: var(--good); background: var(--good-soft); }
.cell-bad     { color: var(--bad); background: var(--bad-soft); }
.cell-warn    { color: var(--warn); background: var(--warn-soft); }
.cell-neutral { color: var(--ink-700); }
.row-diff td  { background: var(--beige-50); }
.section-row td {
    background: var(--ink-900);
    color: #fff;
    font-weight: 700;
    padding: .6rem 1rem;
    text-align: right;
}
.same-warning {
    background: var(--warn-soft);
    border: 1px solid var(--warn);
    color: var(--warn);
    padding: .8rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: .9rem;
}

/* ============ Reverse analysis ============ */
/* 1. HERO — softer gradient, clearer text */
.rev-hero {
    position: relative;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(139,92,246,.16) 0%, transparent 60%),
        linear-gradient(135deg, #2a3e6a 0%, #5d3a9f 100%);
    color: #fff;
    padding: 1.2rem 1.5rem;
    border-radius: var(--radius-xl);
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(42,62,106,.08);
    animation: slideUp .5s var(--ease) both;
}
.rev-hero::before {
    content: "";
    position: absolute;
    top: -80px; left: -80px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(139,92,246,.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.rev-hero > * { position: relative; z-index: 2; }
.rev-hero h1 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: .3rem;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.rev-hero p {
    color: rgba(255,255,255,.85);
    font-size: 1rem;
    margin: 0 0 .8rem;
    max-width: 540px;
    line-height: 1.6;
}

/* 2. TOGGLE PILLS — stronger active, thinner borders */
.rev-mode-pills {
    display: inline-flex;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(139,92,246,.2);
    border-radius: 999px;
    padding: .3rem;
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
    gap: .15rem;
}
.rev-mode-pill {
    background: transparent;
    border: none;
    padding: .65rem 1.3rem;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    color: rgba(255,255,255,.7);
    font-size: .97rem;
    transition: all .25s var(--ease);
    white-space: nowrap;
}
.rev-mode-pill:hover:not(.active) {
    color: #fff;
    background: rgba(139,92,246,.1);
}
.rev-mode-pill.active {
    background: var(--accent);
    color: var(--ink-900);
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(139,92,246,.3);
}

/* 3. INFO/DISCLAIMER — attention-grabbing */
.info-box,
.medical-disclaimer {
    background: linear-gradient(135deg, #fff8e6 0%, #fef3d8 100%);
    border: 1px solid #e9d5a8;
    border-right: 4px solid var(--warn);
    padding: .65rem 1rem;
    border-radius: var(--radius);
    margin: .5rem 0 .8rem;
    color: #6b5224;
    font-size: 1rem;
    line-height: 1.6;
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    animation: fadeIn .4s var(--ease) both;
}
.info-box::before,
.medical-disclaimer::before {
    content: "";
    width: 6px;
    flex-shrink: 0;
}
.info-box strong:first-child,
.medical-disclaimer strong:first-of-type {
    color: var(--warn);
    font-weight: 800;
    display: inline-block;
    margin-left: .15rem;
}

/* 4. FORM CARDS — clearer sections, more spacing */
.rev-form-card {
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 1rem 1.2rem;
    margin-bottom: .8rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
    animation: slideUp .45s var(--ease) both;
}
.rev-form-card:nth-of-type(1) { animation-delay: .08s; }
.rev-form-card:nth-of-type(2) { animation-delay: .16s; }
.rev-form-card:hover { box-shadow: var(--shadow-md); }
.rev-form-card::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent), var(--accent-dark));
}
.rev-form-card:nth-of-type(2)::before {
    background: linear-gradient(180deg, var(--ink-700), var(--ink-900));
}

/* 6. SECTION TITLES — bigger, bolder */
.rev-form-card h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 .7rem;
    color: var(--ink-900);
    letter-spacing: -0.01em;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Form grid — tighter fields with better spacing */
.rev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.4rem;
    max-width: 760px;
}
.rev-field {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.rev-field label {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-800);
    letter-spacing: -0.005em;
}
.rev-field label small {
    color: var(--ink-400) !important;
    font-weight: 500;
    font-size: .97rem;
}
.req-mark {
    color: var(--bad);
    font-weight: 700;
    margin-right: .2rem;
}
.rev-field select,
.rev-field input {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-alt);
    color: var(--ink-900);
    font-size: 1rem;
    font-weight: 600;
    transition: all var(--t-base) var(--ease);
    cursor: pointer;
}
.rev-field select:hover,
.rev-field input:hover {
    border-color: var(--beige-300);
}
.rev-field select:focus,
.rev-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
    background: var(--bg-alt);
}
.rev-field select::placeholder,
.rev-field input::placeholder {
    color: var(--ink-400);
    font-weight: 500;
}

/* 7. INFER BUTTON — larger, centered, primary */
.rev-form-card .btn-infer,
.btn-infer {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 1rem auto 0;
    padding: .85rem 1.5rem;
    background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(42,62,106,.18);
    transition: all var(--t-base) var(--ease);
}
.btn-infer:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(42,62,106,.25);
    background: #000;
}
.btn-infer:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Result card — prominent display */
.rev-result-card {
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-right: 4px solid var(--good);
    border-radius: var(--radius-lg);
    padding: 1rem 1.2rem;
    box-shadow: var(--shadow-md);
    margin-top: .8rem;
    animation: slideUp .5s var(--ease) both;
}
.rev-result-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 1rem;
    color: var(--ink-900);
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--border-soft);
}

.candidate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}
.candidate-chip {
    background: var(--bg-alt);
    border: 1.5px solid var(--border);
    padding: .85rem 1rem;
    border-radius: var(--radius);
    font-weight: 700;
    text-align: center;
    font-size: .95rem;
    color: var(--ink-900);
    transition: all var(--t-base) var(--ease);
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    animation: scaleIn .4s var(--ease) both;
}
.candidate-chip:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.candidate-chip.eye { background: var(--bg-soft); }
.candidate-pct {
    color: var(--accent-dark);
    font-weight: 800;
    font-size: .95rem;
    display: inline-block;
    background: var(--accent-soft);
    padding: .2rem .6rem;
    border-radius: 999px;
    margin-top: .2rem;
}

/* ============ Education ============ */
.edu-hero {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(139,92,246,.22) 0%, transparent 55%),
        linear-gradient(135deg, #1a2847 0%, #4c2d85 100%);
    color: #fff;
    padding: 1.4rem 1.5rem;
    border-radius: var(--radius-xl);
    margin-bottom: .9rem;
    text-align: center;
    overflow: hidden;
}
.edu-hero h1 { color: #fff; font-size: 1.8rem; }
.dna-icon { font-size: 2.6rem; margin-bottom: .3rem; }

.edu-sections { display: flex; flex-direction: column; gap: 1rem; }

.edu-accordion {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.edu-accordion-header {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem 1rem;
    cursor: pointer;
    background: var(--bg-alt);
    transition: background .2s;
}
.edu-accordion-header:hover { background: var(--beige-50); }
.acc-icon { font-size: 1.8rem; }
.acc-title { font-weight: 700; font-size: 1.1rem; flex: 1; }
.acc-subtitle { font-size: .92rem; color: var(--ink-500); }
.acc-arrow { transition: transform .3s; color: var(--ink-500); }
.edu-accordion.open .acc-arrow { transform: rotate(180deg); }

.edu-accordion-body {
    display: none;
    border-top: 1px solid var(--border);
}
.edu-accordion.open .edu-accordion-body { display: block; }
.edu-accordion-content { padding: .9rem 1rem; }

.edu-accordion.acc-theme-blue   { border-right: 4px solid var(--ink-900); }
.edu-accordion.acc-theme-green  { border-right: 4px solid var(--beige-500); }
.edu-accordion.acc-theme-purple { border-right: 4px solid var(--beige-400); }

.edu-visual-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.edu-visual-card {
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}
.vc-icon { font-size: 2rem; margin-bottom: .3rem; }
.vc-title { font-weight: 700; margin-bottom: .25rem; }
.vc-desc  { color: var(--ink-500); font-size: .95rem; }

.edu-svg-container { text-align: center; margin: 1rem 0; }
.edu-svg-container svg { max-width: 100%; }

.edu-info-box {
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-right: 3px solid var(--ink-900);
    padding: .9rem 1.1rem;
    border-radius: var(--radius);
    margin: .8rem 0;
}
.edu-info-box.warn { border-right-color: var(--warn); background: var(--warn-soft); }

.edu-divider { border-top: 1px dashed var(--border); margin: 1rem 0; }

.edu-punnett-demo {
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 1rem;
}
.edu-select-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1rem;
}

.video-section { margin-top: 1.5rem; }
.video-section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: .8rem; }
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.video-card {
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
    cursor: pointer;
}
.video-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--beige-300);
    color: inherit;
}
.video-thumb {
    position: relative;
    background:
        radial-gradient(circle at 50% 50%, rgba(139,92,246,.15) 0%, transparent 60%),
        linear-gradient(135deg, #2a3e6a 0%, #5d3a9f 100%);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.video-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(167,139,250,.06) 1px, transparent 1.5px);
    background-size: 18px 18px;
    pointer-events: none;
}
.play-ico {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink-900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 900;
    box-shadow: 0 6px 20px rgba(139,92,246,.5), inset 0 -2px 0 rgba(0,0,0,.1);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
    position: relative;
    z-index: 2;
    padding-right: .25rem;
}
.video-card:hover .play-ico {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(139,92,246,.7);
}
.video-meta { padding: var(--sp-2); }
.video-title {
    font-weight: 800;
    margin-bottom: .25rem;
    color: var(--ink-900);
    display: block;
    font-size: .95rem;
}
.video-desc {
    font-size: .97rem;
    color: var(--ink-500);
    display: block;
    line-height: 1.6;
}

/* ============ Patients page ============ */
.patients-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.pstat-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    box-shadow: var(--shadow-sm);
}
.pstat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: var(--beige-100);
    color: var(--ink-900);
}
.pstat-icon.blue  { background: var(--ink-900); color: #fff; }
.pstat-icon.green { background: var(--good-soft); color: var(--good); }
.pstat-icon.red   { background: var(--bad-soft); color: var(--bad); }
.pstat-num { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.pstat-lbl { font-size: .95rem; color: var(--ink-500); }

.patients-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }

.filter-bar {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .7rem .9rem;
    margin-bottom: 1rem;
}
.filter-label { font-weight: 600; font-size: .97rem; color: var(--ink-700); }
.filter-bar input, .filter-bar select {
    padding: .45rem .75rem;
    font-size: .97rem;
}

.patients-table-wrap {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: auto;
    box-shadow: var(--shadow-sm);
}

.patient-row.active-row { background: var(--beige-50); }
.patient-name { font-weight: 700; color: var(--ink-900); }
.patient-email { color: var(--ink-500); font-size: .97rem; }

.btn-toggle {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .3rem .6rem;
    cursor: pointer;
    color: var(--ink-700);
    font-family: inherit;
    transition: all .2s;
}
.btn-toggle:hover { border-color: var(--ink-900); }
.btn-toggle.open { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }

.patient-detail {
    background: var(--beige-50);
    border-top: 1px solid var(--border);
}
.detail-inner { padding: 1rem 1.3rem; }
.detail-title { font-weight: 700; margin-bottom: .6rem; color: var(--ink-900); }
.detail-table th { background: var(--beige-100); }

/* ============ Admin ============ */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: 1.2rem;
}
.msg-ok {
    background: var(--good-soft);
    color: var(--good);
    border: 1px solid var(--good);
    padding: .7rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: .9rem;
}
.msg-err {
    background: var(--bad-soft);
    color: var(--bad);
    border: 1px solid var(--bad);
    padding: .7rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: .9rem;
}

/* ============ Auth pages (login / register) ============ */

/* Legacy helpers kept for any other pages that use them */
.form-side, .auth-right, .auth-left {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
}
.form-side, .auth-right { background: var(--bg); flex: 1; max-width: 520px; }
.deco-side, .auth-left {
    flex: 1;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(139,92,246,.25) 0%, transparent 55%),
        linear-gradient(135deg, #15203d 0%, #4c2d85 60%, #15203d 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 3rem;
}
.deco-side::before, .auth-left::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(139,92,246,.08) 1px, transparent 1.5px);
    background-size: 28px 28px;
    opacity: .6;
    pointer-events: none;
}

/* ── Body reset for auth pages ── */
body.auth-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0 !important;
    margin: 0;
    background: var(--bg);
    overflow-x: hidden;
}

/* ── Two-column page grid ── */
.auth-page {
    flex: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/*
  RTL grid: column 1 → right side, column 2 → left side.
  Scene (dark panel) = LEFT  → order 2
  Main (form panel)  = RIGHT → order 1
*/
.auth-scene { order: 2; }
.auth-main   { order: 1; }

@media (max-width: 960px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-scene { display: none; }
}

/* ──────────────────────────────────────
   LEFT: Dark illustration panel
   ────────────────────────────────────── */
.auth-scene {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(139,92,246,.2) 0%, transparent 58%),
        radial-gradient(ellipse at 15% 85%, rgba(42,62,106,.35) 0%, transparent 50%),
        linear-gradient(160deg, #0d1729 0%, #1a2d52 45%, #2a3e6a 100%);
    color: #fff;
    padding: 2.5rem 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    min-height: 100vh;
}

.auth-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(139,92,246,.07) 1px, transparent 1.5px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

.auth-scene > * { position: relative; z-index: 1; }

.auth-scene-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.4rem;
    padding: 1.5rem 0;
}

.auth-scene-visual {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-dna {
    position: absolute;
    top: 0;
    right: 6%;
    height: 100%;
    opacity: .9;
    pointer-events: none;
}

.auth-family {
    position: relative;
    height: 260px;
    width: auto;
    z-index: 2;
    margin-top: 1rem;
    filter: drop-shadow(0 4px 36px rgba(139,92,246,.22));
}

.auth-scene-title {
    color: #fff;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    text-shadow: 0 2px 16px rgba(0,0,0,.35);
}

.auth-scene-desc {
    color: rgba(255,255,255,.68);
    font-size: .95rem;
    line-height: 1.9;
    max-width: 370px;
    margin: 0 auto;
}

/* Feature icons row */
.auth-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(255,255,255,.1);
}

.auth-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .45rem;
}

.auth-feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(139,92,246,.14);
    border: 1px solid rgba(139,92,246,.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    backdrop-filter: blur(4px);
    flex-shrink: 0;
}

.auth-feature-title {
    font-weight: 700;
    font-size: .93rem;
    color: #fff;
    letter-spacing: .01em;
}

.auth-feature-desc {
    font-size: .8rem;
    color: rgba(255,255,255,.48);
    line-height: 1.6;
    max-width: 130px;
}

/* ──────────────────────────────────────
   RIGHT: Form panel
   ────────────────────────────────────── */
.auth-main {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    min-height: 100vh;
    padding: 1.4rem 2.5rem 2rem;
}

/* Brand header */
.auth-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-direction: row;         /* logo on right in RTL, text on left */
}

.auth-brand-logo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ink-900), var(--ink-700));
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(42,62,106,.18);
}

.auth-brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.auth-brand-name { font-weight: 800; font-size: 1.15rem; color: var(--ink-900); }
.auth-brand-tag  { font-size: .88rem; color: var(--ink-500); }

/* Card wrapper */
.auth-form-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 1.2rem 1rem 2rem;
}

/* Login / register card */
.auth-form-card {
    width: 100%;
    max-width: 520px;
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 3rem 3rem 2.8rem;
    box-shadow:
        0 2px 4px rgba(42,62,106,.05),
        0 16px 48px rgba(42,62,106,.12);
}

.auth-form-title {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 .4rem;
    text-align: center;
    color: var(--ink-900);
    letter-spacing: -0.02em;
}

.auth-form-sub {
    text-align: center;
    color: var(--ink-500);
    font-size: .95rem;
    margin: 0 0 1.8rem;
    line-height: 1.7;
}

.auth-form-card form { display: flex; flex-direction: column; gap: 1.2rem; }

/* Input fields */
.auth-field {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-field input {
    width: 100%;
    padding: 1.05rem 3rem 1.05rem 3rem;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--ink-900);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.auth-field input:focus {
    outline: none;
    background: var(--bg-alt);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

.auth-field input::placeholder { color: var(--ink-400); font-size: .95rem; }

.auth-field-ico {
    position: absolute;
    right: 1rem;
    color: var(--ink-400);
    font-size: 1.1rem;
    pointer-events: none;
    line-height: 1;
}

.auth-field-eye {
    position: absolute;
    left: 1rem;
    color: var(--ink-400);
    font-size: 1.05rem;
    cursor: pointer;
    transition: color .2s;
    line-height: 1;
    user-select: none;
}
.auth-field-eye:hover { color: var(--ink-900); }

/* Remember / forgot row */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .95rem;
    margin-top: -.15rem;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--ink-700);
    cursor: pointer;
    font-weight: 500;
    user-select: none;
}
.auth-remember input {
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
    cursor: pointer;
}

.auth-forgot {
    color: var(--ink-500);
    font-weight: 500;
    font-size: .95rem;
    transition: color .2s;
}
.auth-forgot:hover { color: var(--accent-dark); }

/* Primary button */
.auth-btn-primary {
    width: 100%;
    padding: 1rem 1.4rem;
    background: var(--ink-900);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    letter-spacing: .01em;
    transition: transform .15s var(--ease), background .2s, box-shadow .2s;
    margin-top: .3rem;
}
.auth-btn-primary:hover {
    background: #1a2d52;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(42,62,106,.22);
}

/* OR divider */
.auth-divider-line {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.6rem 0 1.2rem;
    color: var(--ink-400);
    font-size: .95rem;
    font-weight: 500;
}
.auth-divider-line::before,
.auth-divider-line::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

/* Secondary / create-account button */
.auth-btn-secondary {
    width: 100%;
    padding: .95rem 1.2rem;
    background: transparent;
    color: var(--ink-900);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: background .2s, border-color .2s, box-shadow .2s;
    text-decoration: none;
}
.auth-btn-secondary:hover {
    background: var(--beige-50);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(139,92,246,.08);
}

/* Alert boxes */
.auth-alert-ok,
.auth-alert-err {
    padding: .85rem 1.1rem;
    border-radius: var(--radius);
    font-size: .95rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.auth-alert-ok  { background: var(--good-soft); color: #3d6b45; border: 1px solid var(--good); }
.auth-alert-err { background: var(--bad-soft);  color: #8a3e2a; border: 1px solid var(--bad);  }

/* --- Register role cards (two in a row) --- */
.auth-roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.3rem;
}
@media (max-width: 520px) { .auth-roles { grid-template-columns: 1fr; } }

.auth-role {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .6rem;
    cursor: pointer;
    transition: all .25s;
    position: relative;
}
.auth-role:hover {
    border-color: var(--beige-300);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.auth-role.selected {
    border-color: var(--ink-900);
    background: var(--beige-50);
    box-shadow: 0 0 0 3px rgba(167,139,250,.2);
}
.auth-role-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--beige-50), var(--beige-100));
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin-bottom: .3rem;
}
.auth-role.selected .auth-role-avatar {
    background: linear-gradient(135deg, var(--ink-900), var(--ink-700));
    color: var(--accent);
    border-color: var(--ink-900);
}
.auth-role-name {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--ink-900);
}
.auth-role-desc {
    font-size: 1rem;
    color: var(--ink-500);
    line-height: 1.6;
    flex: 1;
}
.auth-role-pick {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-weight: 700;
    font-size: 1.1rem;
    border: 1px solid var(--ink-900);
    background: transparent;
    color: var(--ink-900);
    cursor: pointer;
    transition: all .2s;
    margin-top: .4rem;
}
.auth-role.selected .auth-role-pick {
    background: var(--ink-900);
    color: #fff;
}

.auth-footer-link {
    text-align: center;
    font-size: 1.1rem;
    color: var(--ink-500);
    margin-top: 1rem;
}
.auth-footer-link a {
    color: var(--ink-900);
    font-weight: 700;
    margin-right: .3rem;
}
.auth-footer-link a:hover { color: var(--accent-dark); text-decoration: underline; }

.logo-wrap, .form-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
}
.logo-box, .logo-icon {
    width: 46px;
    height: 46px;
    background: var(--ink-900);
    color: #fff;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.auth-error {
    background: var(--bad-soft);
    color: var(--bad);
    border: 1px solid var(--bad);
    padding: .7rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: .97rem;
}
.auth-success {
    background: var(--good-soft);
    color: var(--good);
    border: 1px solid var(--good);
    padding: .7rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: .97rem;
}

.auth-links {
    margin-top: 1rem;
    text-align: center;
    font-size: .97rem;
    color: var(--ink-500);
}
.auth-link {
    color: var(--ink-900);
    font-weight: 700;
    margin-right: .3rem;
}
.auth-link:hover { text-decoration: underline; }

.quick-links {
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin-top: .8rem;
    flex-wrap: wrap;
}
.quick-link {
    background: var(--beige-50);
    color: var(--ink-700);
    border: 1px solid var(--border);
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
}
.quick-link:hover { background: var(--beige-100); color: var(--ink-900); }

.divider {
    display: flex;
    align-items: center;
    color: var(--ink-400);
    font-size: .95rem;
    margin: 1rem 0;
    gap: .6rem;
}
.divider::before, .divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border);
}

.success-actions {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Decorative side animations */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: .35;
    pointer-events: none;
}
.orb.orb1, .orb1 { width: 280px; height: 280px; background: var(--beige-400); top: 10%; right: 10%; animation: floatOrb 9s ease-in-out infinite; }
.orb.orb2, .orb2 { width: 220px; height: 220px; background: var(--beige-300); bottom: 15%; left: 8%; animation: floatOrb 11s ease-in-out infinite reverse; }
.orb.orb3, .orb3 { width: 180px; height: 180px; background: var(--beige-200); top: 50%; left: 40%; animation: floatOrb 13s ease-in-out infinite; }
@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -30px); }
}

.scene-wrap { position: relative; z-index: 2; max-width: 460px; margin: auto; }
.scene-svg { width: 100%; height: auto; }
.dna-helix, .parent-dad, .parent-mom, .child-boy, .child-girl { transition: transform .4s; }

.heart1, .heart2, .heart3 { animation: pulseHeart 2s ease-in-out infinite; }
.heart2 { animation-delay: .3s; }
.heart3 { animation-delay: .6s; }
@keyframes pulseHeart { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

.sparkle { animation: sparkle 2.5s ease-in-out infinite; }
@keyframes sparkle { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

.chromosome, .molecule { animation: floatOrb 6s ease-in-out infinite; }

.deco-text {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 1.5rem;
}
.deco-text h2 { color: #fff; font-size: 1.4rem; margin-bottom: .4rem; }
.deco-text p  { color: var(--beige-100); }

.deco-pills {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.deco-pill {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    padding: .35rem .9rem;
    border-radius: 999px;
    font-size: .8rem;
}

.bg-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bg-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
}

.left-content { position: relative; z-index: 2; max-width: 460px; margin: auto; color: #fff; }
.left-title { font-size: 2rem; color: #fff; margin-bottom: .5rem; }
.left-sub { color: var(--beige-100); font-size: 1rem; }

.steps-preview { margin-top: 2rem; display: flex; flex-direction: column; gap: .8rem; }
.steps-preview-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    padding: .7rem 1rem;
    border-radius: var(--radius);
    color: #fff;
    font-size: .92rem;
}
.step-dot {
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,.12);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.role-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
    margin-bottom: 1rem;
}
@media (max-width: 520px) { .role-cards { grid-template-columns: 1fr; } }
.role-card {
    background: var(--bg-alt);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.2rem;
    cursor: pointer;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    flex-direction: column;
    text-align: center;
    transition: all .25s;
    position: relative;
    overflow: hidden;
}
.role-card:hover {
    border-color: var(--beige-400);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.role-card.selected {
    border-color: var(--ink-900);
    background: var(--beige-50);
    box-shadow: 0 0 0 3px rgba(139,92,246,.15), var(--shadow-md);
}
.role-card .role-icon {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--beige-50), var(--beige-100));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin: 0 auto .3rem;
    border: 1px solid var(--border);
    transition: all .3s;
}
.role-card:hover .role-icon {
    background: linear-gradient(135deg, var(--beige-100), var(--beige-200));
    transform: scale(1.03);
}
.role-card.selected .role-icon {
    background: linear-gradient(135deg, var(--ink-900), var(--ink-700));
    color: var(--beige-200);
    border-color: var(--ink-900);
}
.role-name { font-weight: 800; margin-bottom: .1rem; font-size: 1rem; }
.role-desc { font-size: .97rem; color: var(--ink-500); line-height: 1.5; }
.role-info { align-items: center; text-align: center; width: 100%; }

/* Animation helpers */
.anim-float   { animation: floatOrb 5s ease-in-out infinite; }
.anim-bounce  { animation: bounceY 2.2s ease-in-out infinite; }
.anim-bounce2 { animation: bounceY 2.2s ease-in-out infinite .4s; }
.anim-heart   { animation: pulseHeart 1.6s ease-in-out infinite; }
.anim-star    { animation: sparkle 2.2s ease-in-out infinite; }
.anim-dna     { animation: rotateSlow 14s linear infinite; }
@keyframes bounceY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rotateSlow { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ============ Public pages (about, contact, index) ============ */
.pub-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(244,237,225,.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-soft);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.pub-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ink-900);
}
.pub-brand .icon {
    width: 36px;
    height: 36px;
    background: var(--ink-900);
    color: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.pub-nav-links {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;
}
.pub-nav-links a {
    padding: .5rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink-700);
    transition: background .2s, color .2s;
}
.pub-nav-links a:hover { background: var(--beige-50); color: var(--ink-900); }
.pub-nav-links a.active { background: var(--ink-900); color: #fff; }

.about-hero, .contact-hero {
    position: relative;
    background:
        radial-gradient(ellipse at 30% 60%, rgba(139,92,246,.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 40%, rgba(154,125,79,.18) 0%, transparent 60%),
        linear-gradient(135deg, #1a2847 0%, #4c2d85 60%, #2a3e6a 100%);
    color: #fff;
    padding: 5rem 2rem;
    text-align: center;
    overflow: hidden;
}
.about-hero::before, .about-hero::after, .contact-hero::before, .contact-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .25;
    pointer-events: none;
}
.about-hero::before, .contact-hero::before { width: 300px; height: 300px; background: var(--beige-400); top: -60px; right: -60px; }
.about-hero::after,  .contact-hero::after  { width: 240px; height: 240px; background: var(--beige-300); bottom: -80px; left: -80px; }

.about-hero::after,
.contact-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(167,139,250,.06) 1px, transparent 1.5px);
    background-size: 32px 32px;
    opacity: .5;
    pointer-events: none;
}
.about-hero h1, .contact-hero h1 {
    color: #fff;
    font-size: 2.4rem;
    margin-bottom: .6rem;
    position: relative;
    z-index: 2;
    letter-spacing: -0.02em;
}
.about-hero p, .contact-hero p {
    color: var(--beige-100);
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.02rem;
    position: relative;
    z-index: 2;
    line-height: 1.8;
}

.hero-badge {
    display: inline-block;
    padding: .4rem 1.1rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.particle, .float-ico { position: absolute; opacity: .5; animation: floatOrb 6s ease-in-out infinite; }

.page-container { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem; }

.sec-title { text-align: center; margin-bottom: 2rem; }
.sec-title .badge {
    display: inline-block;
    margin-bottom: .6rem;
    background: var(--beige-50);
    color: var(--beige-600);
    border-color: var(--beige-200);
}
.sec-title h2 { font-size: 1.8rem; margin-bottom: .3rem; }
.sec-title p  { color: var(--ink-500); max-width: 640px; margin: 0 auto; }

.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.3rem;
    margin-bottom: 3rem;
}
.mission-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    position: relative;
    overflow: hidden;
    transition: transform .15s, box-shadow .2s;
}
.mission-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mission-card::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 80px; height: 80px;
    background: var(--beige-50);
    border-radius: 0 var(--radius-lg) 0 100%;
    opacity: .6;
}
.mission-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: var(--ink-900);
    color: #fff;
    margin-bottom: .8rem;
    position: relative;
}
.mission-icon.blue   { background: var(--ink-900); }
.mission-icon.green  { background: var(--beige-500); }
.mission-icon.orange { background: var(--beige-400); }
.mission-card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.mission-card p  { color: var(--ink-500); font-size: .92rem; }

.how-section {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2.5rem 1.8rem;
    position: relative;
    overflow: hidden;
}
.how-section::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: var(--beige-50);
    border-radius: 50%;
}

.steps-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    position: relative;
}
.step-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.3rem;
    text-align: center;
    position: relative;
}
.step-connector { display: none; }
.step-desc { font-size: .97rem; color: var(--ink-500); margin-top: .3rem; }

.faq-item {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: .7rem;
    overflow: hidden;
    transition: box-shadow .2s;
}
.faq-item:hover { box-shadow: var(--shadow-sm); }
.faq-q {
    padding: 1rem 1.2rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ink-900);
}
.faq-q::after {
    content: "+";
    color: var(--ink-500);
    font-size: 1.3rem;
    transition: transform .3s;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
    display: none;
    padding: 0 1.2rem 1rem;
    color: var(--ink-700);
    font-size: .92rem;
    line-height: 1.7;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}
.faq-item.open .faq-a { display: block; }

/* Contact page */
.contact-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin: 2rem auto;
    max-width: 1100px;
    padding: 0 1.5rem;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 640px) { .f-row { grid-template-columns: 1fr; } }
.f-group { display: flex; flex-direction: column; }
.f-group label { font-size: .97rem; }
.f-group .req { color: var(--bad); margin-right: .2rem; }

.contact-sidebar { display: flex; flex-direction: column; gap: 1rem; }

.info-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.info-item:last-child { border-bottom: none; }
.info-ico {
    width: 40px;
    height: 40px;
    background: var(--beige-50);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.info-txt strong { display: block; font-size: .9rem; color: var(--ink-900); }
.info-txt span   { font-size: .97rem; color: var(--ink-500); }

.social-btns { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: 600;
    color: var(--ink-900);
    transition: all .2s;
    font-size: .9rem;
}
.social-btn:hover { background: var(--beige-50); transform: translateY(-1px); }
.social-btn.email    { border-right: 3px solid var(--ink-900); }
.social-btn.whatsapp { border-right: 3px solid var(--good); }
.social-btn.github   { border-right: 3px solid var(--beige-500); }

.page-footer {
    background: var(--ink-900);
    color: var(--beige-100);
    padding: 2rem 1.5rem;
    text-align: center;
    margin-top: 3rem;
    font-size: .97rem;
}

/* ============ Gauge helpers ============ */
.risk-badge-hero + .result-hero-actions { display: flex; gap: .5rem; }

/* ============ Print ============ */
@media print {
    .app-sidebar, .sidebar-overlay, .app-topbar, .hamburger-btn,
    .sidebar-close-btn, .pub-navbar, .actions-bar, .result-tabs,
    .btn-action, button { display: none !important; }
    body { background: #fff; }
    .app-main { padding: 0; max-width: none; }
}

/* ============ Responsive ============ */
@media (max-width: 820px) {
    .app-main { padding: 1rem; }
    .result-hero { flex-direction: column; text-align: center; padding: 1.5rem; }
    .form-hero { flex-direction: column; text-align: center; padding: 1.5rem; }
    .wizard-steps { overflow-x: auto; gap: .2rem; }
    .step-label { display: none; }
    .page-header { align-items: flex-start; flex-direction: column; }
}

/* ===========================================================
   RESULT PAGE — extended genetic display classes
   =========================================================== */

/* ============ Score (gauge/result circle) ============ */
.score-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--bg-alt);
    border: 6px solid var(--ink-900);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ink-900);
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 8px rgba(139,92,246,.15), var(--shadow-md);
}
.score-num   { font-size: 2.4rem; font-weight: 900; }
.score-slash { font-size: .95rem; color: var(--ink-500); margin-top: .2rem; font-weight: 600; }
.score-info  { text-align: center; margin-top: .6rem; }
.score-info h2 { font-size: 1.15rem; margin-bottom: .15rem; }
.score-info p  { color: var(--ink-500); font-size: .97rem; margin: 0; }

.score-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.3rem;
    margin: 1rem 0;
}

/* ============ Gauge breakdown bars ============ */
.gauge-breakdown {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-top: 1rem;
}
.gb-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "lbl pct"
        "track track";
    gap: .25rem .6rem;
    align-items: center;
}
.gb-lbl   { grid-area: lbl; font-size: 1.05rem; color: var(--ink-700); font-weight: 700; }
.gb-pct   { grid-area: pct; font-size: 1.05rem; font-weight: 800; color: var(--ink-900); }
.gb-track {
    grid-area: track;
    height: 8px;
    background: var(--beige-100);
    border-radius: 99px;
    overflow: hidden;
}
.gb-fill {
    height: 100%;
    background: var(--ink-900);
    border-radius: 99px;
    transition: width .5s ease;
}

/* ============ Score badge inside ID card ============ */
.id-card-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: .3rem .7rem;
    background: var(--ink-900);
    color: #fff;
    border-radius: 999px;
    font-weight: 800;
    font-size: .97rem;
}

/* ============ ID card ============ */
.id-card-section { margin-top: 1.2rem; }
.id-card-section-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .7rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}
.id-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.6rem;
    box-shadow: var(--shadow-sm);
    max-width: 520px;
    margin: 0 auto;
}
.id-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .7rem;
}
.id-card-logo-name { font-weight: 800; font-size: 1.05rem; color: var(--ink-900); }
.id-card-logo-sub  { font-size: .92rem; color: var(--ink-500); }
.id-card-qr-box {
    width: 74px;
    height: 74px;
    background: var(--beige-50);
    border: 1px dashed var(--beige-300);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--ink-500);
}
.id-card-divider {
    height: 1px;
    background: var(--border);
    margin: .7rem 0;
}
.id-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem 0;
    border-bottom: 1px dashed var(--border-soft);
    font-size: .9rem;
}
.id-card-row:last-child { border-bottom: none; }
.id-card-lbl { color: var(--ink-500); font-weight: 600; }
.id-card-val { color: var(--ink-900); font-weight: 700; }
.id-card-footer-line {
    text-align: center;
    font-size: .90rem;
    color: var(--ink-400);
    margin-top: .9rem;
    padding-top: .7rem;
    border-top: 1px solid var(--border);
}
.id-card-actions {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* ============ Baby prediction card ============ */
.baby-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.4rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.3rem;
}
.baby-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: .2rem;
    color: var(--ink-900);
}
.baby-card-subtitle {
    color: var(--ink-500);
    font-size: .97rem;
    margin-bottom: 1rem;
}
.baby-top-label {
    display: inline-block;
    background: var(--beige-50);
    border: 1px solid var(--border);
    color: var(--ink-900);
    padding: .25rem .8rem;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 700;
    margin-bottom: .6rem;
}
.baby-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
    align-items: flex-start;
}
@media (max-width: 760px) { .baby-layout { grid-template-columns: 1fr; } }

.baby-main-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--beige-50) 0%, var(--beige-100) 100%);
    border-radius: var(--radius-lg);
    padding: 1rem;
    min-height: 260px;
}
.baby-svg { width: 100%; max-width: 260px; height: auto; }

.baby-info-panel {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.baby-info-box {
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-right: 3px solid var(--ink-900);
    border-radius: var(--radius);
    padding: .8rem .95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
}
.baby-info-lbl {
    font-size: .97rem;
    font-weight: 600;
    color: var(--ink-700);
}
.baby-info-val {
    font-weight: 700;
    color: var(--ink-900);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.baby-probs {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-top: .6rem;
}

/* ============ Probability grids (shared) ============ */
.prob-group {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .9rem 1rem;
}
.prob-group-title {
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: .55rem;
    color: var(--ink-900);
}
.prob-items {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.prob-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: .55rem;
    padding: .35rem .5rem;
    border-radius: 8px;
    transition: background .15s;
}
.prob-item:hover { background: var(--beige-50); }
.prob-lbl { font-size: .97rem; color: var(--ink-700); }
.prob-pct { font-weight: 800; font-size: .9rem; color: var(--ink-900); font-feature-settings: "tnum"; }

.prob-eye-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: inline-block;
}
.prob-bt-badge {
    width: 28px;
    height: 28px;
    background: var(--ink-900);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .90rem;
}

/* ============ Blood type display ============ */
.blood-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .7rem;
    margin-top: .8rem;
}
.blood-item {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .8rem .5rem;
    text-align: center;
    transition: transform .15s, box-shadow .2s;
}
.blood-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.bt-circle, .bt-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ink-900);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .97rem;
    margin-bottom: .35rem;
}
.bt-type { font-weight: 700; color: var(--ink-900); font-size: .95rem; }
.bt-pct  { color: var(--ink-500); font-size: .97rem; font-feature-settings: "tnum"; }
.bt-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 0;
    border-bottom: 1px dashed var(--border-soft);
}
.bt-row:last-child { border-bottom: none; }

.blood-result-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--beige-50);
    border: 1px solid var(--border);
    padding: .35rem .9rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .97rem;
}

/* ============ Eye color display ============ */
.eye-color-section {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    margin-bottom: 1rem;
}
.eye-probs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .6rem;
    margin-top: .6rem;
}
.eye-prob-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .7rem;
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: background .2s;
}
.eye-prob-item:hover { background: var(--beige-100); }
.eye-prob-text { font-weight: 600; font-size: .97rem; color: var(--ink-700); flex: 1; }
.eye-prob-pct  { font-weight: 800; color: var(--ink-900); font-size: .97rem; }
.eye-circle, .eye-dot, .eye-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    display: inline-block;
    flex-shrink: 0;
}
.eye-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-weight: 700;
    font-size: .97rem;
}
.eye-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--border-soft);
}
.eye-row:last-child { border-bottom: none; }
.eye-hierarchy {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .9rem;
    color: var(--ink-700);
}
.eye-arrow { color: var(--ink-400); font-weight: 700; }
.green-eye { background: #6b8e5a; }
.hazel     { background: #a07a4b; }

/* ============ Punnett detailed ============ */
.punnett-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.3rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--shadow-sm);
}
.punnett-header {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--border);
}
.punnett-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--ink-900);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.punnett-title { font-weight: 700; font-size: 1.25rem; color: var(--ink-900); }
.punnett-sub   { font-size: 1.05rem; color: var(--ink-500); }

.punnett-tabs {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.punnett-parents {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: .7rem 1rem;
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .9rem;
}
.punnett-corner {
    background: var(--ink-900);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.pg-corner {
    background: var(--ink-900);
    color: #fff;
    font-weight: 800;
    text-align: center;
    padding: .6rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pg-header {
    background: var(--beige-100);
    color: var(--ink-900);
    font-weight: 700;
    text-align: center;
    padding: .55rem;
    border-radius: 8px;
}
.pg-header.father { background: var(--beige-200); }
.pg-header.mother { background: var(--beige-100); }

.pc-cell {
    background: var(--bg-alt);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: .7rem .5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 70px;
    transition: transform .15s;
}
.pc-cell:hover { transform: scale(1.03); }
.pc-emoji    { font-size: 1.2rem; }
.pc-genotype { font-family: "Consolas", "Courier New", monospace; font-weight: 700; color: var(--ink-700); font-size: .95rem; }
.pc-label    { font-size: .90rem; color: var(--ink-500); font-weight: 600; }

.ps-lbl, .ptbl-lbl {
    font-size: 1rem;
    color: var(--ink-500);
    font-weight: 600;
}
.pp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--beige-100);
    color: var(--ink-900);
    font-weight: 700;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-family: "Consolas", "Courier New", monospace;
}
.times-sign {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ink-400);
    margin: 0 .5rem;
}

/* ============ Rh & genetic alerts ============ */
.rh-alert,
.consanguinity-alert {
    background: var(--warn-soft);
    border: 1px solid var(--warn);
    border-right: 4px solid var(--warn);
    color: var(--ink-900);
    padding: 1rem 1.2rem;
    border-radius: var(--radius);
    margin: 1rem 0;
}
.rh-alert h3,
.consanguinity-alert h3 {
    color: var(--warn);
    font-size: 1rem;
    margin-bottom: .3rem;
}
.anti-d-box {
    background: var(--bg-alt);
    border: 1px solid var(--warn);
    border-radius: var(--radius);
    padding: .7rem .9rem;
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--ink-700);
}
.rh-children-info {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .6rem;
}
.rh-children-info > * {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: .45rem .8rem;
    border-radius: 8px;
    font-size: .97rem;
}
.rh-notice,
#rhNotice {
    background: var(--warn-soft);
    border: 1px solid var(--warn);
    color: var(--warn);
    padding: .7rem 1rem;
    border-radius: var(--radius);
    font-size: .97rem;
    margin: .6rem 0;
    display: none;
}
.rh-notice[style*="block"],
#rhNotice[style*="block"] { display: block !important; }

.xlinked-note {
    background: var(--beige-50);
    border-right: 3px solid var(--beige-500);
    color: var(--ink-700);
    padding: .7rem .9rem;
    border-radius: var(--radius-sm);
    margin: .6rem 0;
    font-size: .97rem;
    line-height: 1.6;
}

/* ============ Sim children (hypothetical kids) ============ */
.sim-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.3rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--shadow-sm);
}
.sim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.sim-title { font-weight: 700; font-size: 1.25rem; color: var(--ink-900); }
.sim-sub   { font-size: 1.05rem; color: var(--ink-500); }
.sim-disease-tag {
    background: var(--beige-50);
    color: var(--ink-900);
    border: 1px solid var(--border);
    padding: .22rem .7rem;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 700;
}
.sim-children {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .8rem;
}
.sim-child {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem .7rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    transition: transform .15s, box-shadow .2s;
}
.sim-child:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sim-child-num { font-weight: 800; color: var(--ink-900); font-size: .9rem; }
.sim-child-lbl { font-weight: 700; font-size: .95rem; color: var(--ink-700); }
.sim-child-sex {
    font-size: .90rem;
    color: var(--ink-500);
    background: var(--beige-50);
    padding: .15rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.sim-summary {
    margin-top: 1rem;
    padding: .8rem 1rem;
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .97rem;
    color: var(--ink-700);
    text-align: center;
}

/* ============ Notes & recommendations ============ */
.note-item,
.rec-item {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-right: 4px solid var(--ink-900);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    margin-bottom: .7rem;
}
.note-meta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .92rem;
    color: var(--ink-500);
    margin-bottom: .3rem;
    font-weight: 600;
}
.note-text {
    white-space: pre-wrap;
    color: var(--ink-800);
    font-size: 1rem;
    line-height: 1.6;
}
.rec-item.warning { border-right-color: var(--warn); background: var(--warn-soft); }
.rec-item.danger  { border-right-color: var(--bad); background: var(--bad-soft); }

/* ============ Parent cards (result) ============ */
.parents-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
}
@media (max-width: 680px) { .parents-section { grid-template-columns: 1fr; } }

.parent-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-top: 3px solid var(--ink-900);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}
.parent-card.father { border-top-color: var(--ink-900); }
.parent-card.mother { border-top-color: var(--beige-500); }
.parent-card h4 {
    font-size: 1rem;
    margin-bottom: .6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--border);
}

.parents-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: .97rem;
}
.parents-tbl td {
    padding: .4rem .5rem;
    border-bottom: 1px dashed var(--border-soft);
}
.parents-tbl td:first-child { color: var(--ink-500); font-weight: 600; }
.parents-tbl td:last-child  { color: var(--ink-900); font-weight: 600; text-align: left; }

/* ============ Mini card & calc row ============ */
.mini-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    box-shadow: var(--shadow-sm);
}
.calc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--border-soft);
}
.calc-row:last-child { border-bottom: none; }

.two-col, .two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) { .two-col, .two { grid-template-columns: 1fr; } }

/* ============ Edu blood calculator ============ */
.edu-blood-calc {
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-top: 1rem;
}

/* ============ Topbar navbar extras ============ */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink-900);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    line-height: 1;
}
.nav-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 .4rem;
}
.nav-label {
    font-size: .90rem;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}
.nav-user-area {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}
.nav-user-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--beige-50);
    border: 1px solid var(--border);
    padding: .28rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-900);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-logout-btn {
    display: inline-flex;
    align-items: center;
    padding: .28rem .6rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--ink-700);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all .2s;
}
.nav-logout-btn:hover {
    background: var(--bad-soft);
    border-color: var(--bad);
    color: var(--bad);
}

.no-analyses {
    color: var(--ink-400);
    font-style: italic;
    text-align: center;
    padding: 1.5rem !important;
}

/* ============ Team / Tech cards (about page) ============ */
.team-grid,
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.3rem;
    margin: 1.5rem 0;
}
.team-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.1rem;
    text-align: center;
    transition: transform .15s, box-shadow .2s;
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.team-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ink-900), var(--beige-500)) !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .7rem;
    font-weight: 800;
    font-size: 1.8rem;
}
.team-card h4 { font-size: 1.05rem; margin-bottom: .2rem; }
.team-card .role, .team-card p:first-of-type {
    color: var(--beige-600);
    font-weight: 600;
    font-size: .97rem;
    margin-bottom: .4rem;
}

.tech-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    transition: transform .15s, box-shadow .2s;
}
.tech-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tech-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--beige-100);
    color: var(--ink-900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.tech-info h4 { font-size: 1rem; margin-bottom: .2rem; }
.tech-info p  { color: var(--ink-500); font-size: .97rem; margin: 0; }

/* ============ Print report (print_report.php) ============ */
.print-btn,
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.2rem;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .2s;
    font-family: inherit;
}
.print-btn { background: var(--ink-900); color: #fff; }
.print-btn:hover { background: #000; }
.back-btn  { background: transparent; color: var(--ink-900); border-color: var(--border); }
.back-btn:hover { background: var(--beige-50); }

.report {
    max-width: 1440px;
    margin: 1.5rem auto;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    width: calc(100% - 2rem);
}

.rpt-header {
    background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);
    color: #fff;
    padding: 2rem 2rem 1.4rem;
    position: relative;
}
.rpt-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(184,154,110,.15), transparent 40%);
    pointer-events: none;
}
.rpt-logo {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .5rem;
    position: relative;
    z-index: 2;
}
.rpt-logo-title { font-size: 1.25rem; font-weight: 800; color: #fff; }
.rpt-logo-sub   { font-size: .97rem; color: var(--beige-200); }
.rpt-meta {
    display: flex;
    gap: 1.2rem;
    font-size: .97rem;
    color: var(--beige-100);
    position: relative;
    z-index: 2;
}

.rpt-section {
    padding: 1.4rem 2rem;
    border-bottom: 1px solid var(--border);
}
.rpt-section:last-child { border-bottom: none; }
.rpt-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: .8rem;
    padding-right: .85rem;
    border-right: 4px solid var(--ink-900);
}

.rpt-footer {
    background: var(--ink-900);
    color: var(--beige-100);
    padding: 1.1rem 2rem;
    text-align: center;
    font-size: 1rem;
}

/* ============ Setup page (setup.php) ============ */
.step {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .8rem 1rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: .6rem;
}
.step .icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--beige-100);
    color: var(--ink-900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.success-banner {
    background: var(--good-soft);
    color: var(--good);
    border: 1px solid var(--good);
    padding: 1rem 1.2rem;
    border-radius: var(--radius);
    margin: 1rem 0;
    font-weight: 600;
}
.error-banner {
    background: var(--bad-soft);
    color: var(--bad);
    border: 1px solid var(--bad);
    padding: 1rem 1.2rem;
    border-radius: var(--radius);
    margin: 1rem 0;
    font-weight: 600;
}

/* ============ Risk bar fill (small progress helpers) ============ */
.risk-bar-fill {
    height: 8px;
    background: var(--ink-900);
    border-radius: 99px;
    transition: width .5s ease;
}

/* ============ Disease status light ============ */
.ds-light {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ink-300);
    margin-right: .4rem;
}

/* ============ Doctor notice (shared) ============ */
.doctor-notice {
    background: var(--beige-50);
    border-right: 3px solid var(--beige-500);
    color: var(--ink-800);
    padding: .8rem 1rem;
    border-radius: var(--radius);
    font-size: .9rem;
}

/* ============ SVG scene wrap ============ */
.svg-scene {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
}
.svg-scene svg { max-width: 100%; height: auto; }

/* ============ Stat chip (generic) ============ */
.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--beige-50);
    border: 1px solid var(--border);
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink-900);
}
.stat-chip.green  { background: var(--good);  color: #fff; border-color: var(--good); }
.stat-chip.yellow { background: var(--warn);  color: #fff; border-color: var(--warn); }
.stat-chip.red    { background: var(--bad);   color: #fff; border-color: var(--bad);  }

/* Stats container for Punnett result */
#eduPunnettStats,
.punnett-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-soft);
}

/* ============ FAQ card wrap ============ */
.faq-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
}
.faq-card > h3 {
    font-size: 1rem;
    margin-bottom: .7rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--border);
}

/* ============ Print overrides for print_report ============ */
@media print {
    .print-btn, .back-btn, .id-card-actions, .actions-bar { display: none !important; }
    .report { box-shadow: none; border: none; margin: 0; max-width: none; }
    .rpt-header {
        background: var(--ink-900) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .rpt-footer {
        background: var(--ink-900) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .pc-cell, .bt-circle, .prob-bt-badge, .punnett-icon,
    .score-circle, .id-card, .mission-icon {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body { padding-right: 0 !important; }
}

/* ===========================================================
   STANDALONE PAGES (index.html, dashboard.html)
   =========================================================== */

/* ============ Legacy navbar ============ */
.navbar {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    padding: .9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,.92);
}
.nav-brand {
    font-weight: 800;
    font-size: .9rem;
    color: var(--ink-900);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.nav-brand-name { font-weight: 800; }
.nav-links {
    display: flex;
    gap: .2rem;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
    padding: .38rem .7rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .82rem;
    color: var(--ink-700);
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.nav-links a:hover { background: var(--beige-50); color: var(--ink-900); }
.nav-links a.active { background: var(--ink-900); color: #fff; }

/* ============ Hero banner (standalone) ============ */
.hero-banner {
    background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 60%, var(--beige-600) 100%);
    color: #fff;
    padding: 3rem 1.5rem 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-banner h1 {
    color: #fff;
    font-size: 1.9rem;
    margin-bottom: .5rem;
    position: relative;
    z-index: 2;
}
.hero-banner p {
    color: var(--beige-100);
    max-width: 640px;
    margin: 0 auto;
    font-size: 1rem;
    position: relative;
    z-index: 2;
}
.hero-banner .hero-steps {
    justify-content: center;
    margin-top: 1.3rem;
    position: relative;
    z-index: 2;
}

/* ============ Result/chart panels ============ */
.charts-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}
.chart-panel {
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}
.chart-panel h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--sp-2);
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid var(--border-soft);
    color: var(--ink-900);
}

/* ============ Disease table ============ */
.disease-tbl {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.disease-tbl th,
.disease-tbl td {
    padding: .7rem .9rem;
    text-align: right;
    border-bottom: 1px solid var(--border-soft);
    font-size: .9rem;
}
.disease-tbl thead th {
    background: var(--beige-50);
    color: var(--ink-700);
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.disease-tbl tbody tr:hover { background: var(--beige-50); }

.ds-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    transition: background .15s;
}
.ds-row:last-child { border-bottom: none; }
.ds-row:hover { background: var(--beige-50); }

.ds-light { font-size: 1.6rem; flex-shrink: 0; }
.ds-info  { flex: 1; min-width: 0; }
.ds-name-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.ds-name { font-weight: 800; color: var(--ink-900); font-size: 1.05rem; }
.ds-desc { color: var(--ink-600); font-size: .95rem; margin-top: .15rem; }
.ds-pct  { font-weight: 800; font-feature-settings: "tnum"; }
.ds-status {
    font-size: .97rem;
    font-weight: 800;
    padding: .2rem .75rem;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============ Gauge score (detailed) ============ */
.gauge-score-badge {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--ink-900);
    border: 3px solid var(--beige-400);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    position: relative;
    box-shadow: 0 0 0 10px rgba(139,92,246,.12), 0 20px 40px rgba(42,62,106,.3);
}
.gauge-score-badge::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px dashed rgba(139,92,246,.3);
}
.gauge-score-num   { font-size: 2.8rem; font-weight: 900; color: #fff; line-height: 1; font-feature-settings: "tnum"; }
.gauge-score-slash { font-size: .97rem; color: var(--beige-200); margin-top: .15rem; font-weight: 600; }
.gauge-score-label {
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink-900);
    margin-top: .5rem;
    letter-spacing: .02em;
}

/* ============ Punnett extras ============ */
.ptab-content {
    display: none;
    animation: fadeIn .25s ease;
}
.ptab-content.active { display: block; }

.punnett-grid-wrap {
    display: grid;
    grid-template-columns: auto repeat(4, 1fr);
    gap: .3rem;
    max-width: 480px;
    margin: 0 auto 1rem;
}

.pc-type-tag {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--beige-100);
    color: var(--ink-700);
    margin-top: .2rem;
}

.ps-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .6rem .9rem;
    flex: 1;
    min-width: 120px;
}
.ps-pct {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ink-900);
    font-feature-settings: "tnum";
}

/* ============ Risk pill & bar ============ */
.risk-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .95rem;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: var(--beige-100);
    color: var(--ink-900);
}
.risk-pill.risk-low  { background: var(--good); color: #fff; }
.risk-pill.risk-medium { background: var(--warn); color: #fff; }
.risk-pill.risk-high { background: var(--bad); color: #fff; }

.risk-bar-bg {
    height: 8px;
    background: var(--beige-100);
    border-radius: 99px;
    overflow: hidden;
    margin: .3rem 0;
}

/* ============ CTA section ============ */
.cta-section {
    background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);
    color: #fff;
    padding: 3rem 1.5rem;
    text-align: center;
    border-radius: var(--radius-xl);
    margin: 2rem auto;
    max-width: 1100px;
    position: relative;
    overflow: hidden;
}
.cta-section h2 { color: #fff; font-size: 1.8rem; margin-bottom: .5rem; }
.cta-section p  { color: var(--beige-100); max-width: 560px; margin: 0 auto 1.2rem; }

.cta-btns {
    display: flex;
    gap: .7rem;
    justify-content: center;
    flex-wrap: wrap;
}
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .75rem 1.5rem;
    background: #fff;
    color: var(--ink-900);
    border: 1px solid #fff;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: .95rem;
    transition: transform .15s, background .2s, color .2s;
}
.cta-btn:hover { transform: translateY(-2px); background: var(--beige-50); }
.cta-btn.outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.4);
}
.cta-btn.outline:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ============ Compare columns ============ */
.compare-table thead th.c1,
.compare-table thead th.c2 {
    background: var(--beige-50);
}
.compare-table tbody td.c1,
.compare-table tbody td.c2 {
    font-size: .9rem;
}

/* Enrich compare cells with earth tones (as in mockup) */
.compare-table tbody .cell-good {
    background: #e3ecd6;
    color: #4a6b3b;
    font-weight: 700;
}
.compare-table tbody .cell-bad {
    background: #eed4c8;
    color: #8a3e2a;
    font-weight: 700;
}
.compare-table tbody .cell-warn {
    background: #f0e0c5;
    color: #8a5a24;
    font-weight: 700;
}
.compare-table tbody .cell-neutral {
    background: #2a3e6a;
    color: #f0e0c5;
    font-weight: 700;
}

/* ============ Accordion theme variants ============ */
.edu-accordion.acc-theme-amber { border-right: 4px solid var(--warn); }
.edu-accordion.acc-theme-red   { border-right: 4px solid var(--bad); }

/* ============ Action buttons (result / analyses) ============ */
.btn-view, .btn-note, .btn-report, .btn-print-card, .btn-dashboard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: .97rem;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    transition: transform .15s, background .2s, color .2s, border-color .2s;
    text-decoration: none;
}
.btn-view        { background: var(--ink-900); color: #fff; }
.btn-view:hover  { background: #000; transform: translateY(-1px); }
.btn-note        { background: transparent; color: var(--ink-900); border-color: var(--border); }
.btn-note:hover  { background: var(--beige-50); }
.btn-report      { background: var(--beige-500); color: #fff; }
.btn-report:hover { background: var(--beige-600); }
.btn-print-card  { background: transparent; color: var(--ink-900); border-color: var(--border); }
.btn-print-card:hover { background: var(--beige-50); border-color: var(--ink-900); }
.btn-dashboard   {
    background: var(--ink-900);
    color: #fff;
    padding: .7rem 1.6rem;
    border-radius: 999px;
}
.btn-dashboard:hover { background: #000; transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ============ Parent row & role info ============ */
.parent-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    padding: .45rem 0;
    border-bottom: 1px dashed var(--border-soft);
    font-size: .97rem;
}
.parent-row:last-child { border-bottom: none; }
.parent-row .lbl { color: var(--ink-500); font-weight: 600; }
.parent-row .val { color: var(--ink-900); font-weight: 700; }

.role-info {
    background: var(--beige-50);
    border: 1px solid var(--border);
    border-right: 3px solid var(--ink-900);
    padding: .7rem 1rem;
    border-radius: var(--radius);
    font-size: .97rem;
    color: var(--ink-700);
    margin-bottom: 1rem;
}

/* ============ Scroll cue (legacy) ============ */
.scroll-cue {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.7);
    font-size: .8rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    animation: bounceY 2.2s ease-in-out infinite;
    cursor: pointer;
    text-decoration: none;
    transition: color .2s;
}
.scroll-cue:hover { color: #fff; }

/* ============ About toggle button & collapsible ============ */
.about-toggle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin-top: 2.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.8);
    position: relative;
    z-index: 2;
}
.about-toggle-btn:hover { color: #fff; }
.about-toggle-label {
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.about-toggle-arrow {
    font-size: 1.6rem;
    line-height: 1;
    display: block;
    transition: transform .4s ease;
    animation: bounceY 2.2s ease-in-out infinite;
}
.about-toggle-btn[aria-expanded="true"] .about-toggle-arrow {
    animation: none;
}
.about-collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height .42s cubic-bezier(.4,0,.2,1);
}

/* ============ About hero — particle & float positions ============ */
.particle.p1 { top: 10%;  left: 12%; width: 10px; height: 10px; background: rgba(255,255,255,.4); border-radius: 50%; animation-delay: 0s; }
.particle.p2 { top: 20%;  right: 15%; width: 14px; height: 14px; background: rgba(255,255,255,.3); border-radius: 50%; animation-delay: .5s; }
.particle.p3 { top: 60%;  left: 20%; width: 8px;  height: 8px;  background: rgba(255,255,255,.35); border-radius: 50%; animation-delay: 1s; }
.particle.p4 { top: 70%;  right: 25%; width: 12px; height: 12px; background: rgba(255,255,255,.25); border-radius: 50%; animation-delay: 1.5s; }
.particle.p5 { top: 30%;  left: 40%; width: 6px;  height: 6px;  background: rgba(255,255,255,.45); border-radius: 50%; animation-delay: 2s; }
.particle.p6 { top: 80%;  left: 55%; width: 10px; height: 10px; background: rgba(255,255,255,.3); border-radius: 50%; animation-delay: .8s; }
.particle.p7 { top: 15%;  right: 40%; width: 8px;  height: 8px;  background: rgba(255,255,255,.4); border-radius: 50%; animation-delay: 1.2s; }
.particle.p8 { top: 50%;  right: 8%;  width: 14px; height: 14px; background: rgba(255,255,255,.25); border-radius: 50%; animation-delay: 2.5s; }

.float-ico.i1 { top: 15%; left: 8%;  font-size: 1.6rem; animation-delay: 0s; }
.float-ico.i2 { top: 25%; right: 12%; font-size: 1.4rem; animation-delay: .6s; }
.float-ico.i3 { top: 55%; left: 15%; font-size: 1.8rem; animation-delay: 1.2s; }
.float-ico.i4 { top: 65%; right: 18%; font-size: 1.5rem; animation-delay: 1.8s; }
.float-ico.i5 { top: 40%; left: 45%; font-size: 1.3rem; animation-delay: 2.4s; }
.float-ico.i6 { top: 75%; right: 35%; font-size: 1.6rem; animation-delay: 3s; }

/* ============ Hero DNA side decorations (form-hero) ============ */
.hero-dna-left,
.hero-dna-right {
    opacity: .2;
    max-width: 140px;
    flex-shrink: 0;
}
.hero-dna-left  { order: -1; }
.hero-dna-right { order: 2; }

/* ============ Utility / state helpers ============ */
.box {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
}

.arrow {
    color: var(--ink-400);
    font-weight: 700;
    margin: 0 .3rem;
}

.hint {
    display: block;
    font-size: .92rem;
    color: var(--ink-400);
    margin-top: .2rem;
    font-style: italic;
}

.date {
    font-size: .95rem;
    color: var(--ink-500);
    font-feature-settings: "tnum";
}

.detail {
    font-size: .97rem;
    color: var(--ink-700);
    line-height: 1.6;
}

.val { font-weight: 700; color: var(--ink-900); }
.lbl { color: var(--ink-500); font-weight: 600; }

.ic-text {
    font-size: .97rem;
    color: var(--ink-700);
}

.success { color: var(--good); }
.err     { color: var(--bad); }
.primary { color: var(--ink-900); font-weight: 700; }

/* Color name helpers used in swatches */
.yellow { background: #d4a84b; }
.brown  { background: #7a5a3a; }

/* Standalone bpct/btype used in blood grid items */
.bpct  { font-size: .97rem; color: var(--ink-500); font-weight: 600; font-feature-settings: "tnum"; }
.btype { font-weight: 700; color: var(--ink-900); font-size: .95rem; }

/* Generic spin */
.spin {
    display: inline-block;
    animation: rotateSlow 1s linear infinite;
}

/* Generic outline button variant (used on cta-btn etc.) */
.outline {
    background: transparent !important;
    border-width: 1.5px;
}

/* ============ Responsive extras ============ */
@media (max-width: 640px) {
    .navbar { flex-direction: column; gap: .6rem; padding: .75rem 1rem; }
    .nav-links { justify-content: center; }
    .hero-banner { padding: 2rem 1rem 1.8rem; }
    .hero-banner h1 { font-size: 1.4rem; }
    .cta-section { padding: 2rem 1rem; }
    .cta-section h2 { font-size: 1.4rem; }
}

/* ===========================================================
   RESULT PAGE — Comprehensive dark-page refinements
   =========================================================== */

/* --- Hero region --- */
body.page-dark .result-hero {
    padding: var(--sp-4) var(--sp-3);
    min-height: auto;
    margin-bottom: var(--sp-3);
    text-align: center;
}
body.page-dark .result-hero h2,
body.page-dark .result-hero h1 {
    color: #fff;
    font-size: 1.9rem;
    font-weight: 800;
    margin: 0 0 .4rem;
    letter-spacing: -0.02em;
}
body.page-dark .result-hero .sub {
    color: var(--beige-100);
    font-size: .95rem;
    margin-bottom: var(--sp-2);
    display: inline-block;
}
body.page-dark .risk-badge-hero {
    display: inline-block;
    padding: .55rem 1.3rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .95rem;
    border: 1.5px solid;
    margin-top: var(--sp-1);
}

/* --- Actions bar (buttons) --- */
body.page-dark .actions-bar {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var(--sp-3);
}
body.page-dark .actions-bar .btn-action {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
    border: 1px solid rgba(167,139,250,.25) !important;
    padding: .65rem 1.1rem;
    font-size: .97rem;
    border-radius: var(--radius);
    transition: all var(--t-base) var(--ease);
    backdrop-filter: blur(8px);
}
body.page-dark .actions-bar .btn-action:hover {
    background: var(--accent) !important;
    color: var(--ink-900) !important;
    border-color: var(--accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139,92,246,.35);
}

/* --- Disclaimer --- */
body.page-dark .disclaimer-bar {
    background: rgba(167,139,250,.1);
    border: 1px solid rgba(167,139,250,.3);
    border-right: 4px solid var(--warn);
    color: var(--beige-100);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    font-size: .92rem;
    margin-bottom: var(--sp-3);
    line-height: 1.7;
}
body.page-dark .disclaimer-bar strong { color: var(--warn); }

/* --- Gauge card --- */
body.page-dark .gauge-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(167,139,250,.18);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    backdrop-filter: blur(10px);
    text-align: center;
}
body.page-dark .gauge-card-title {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
}
body.page-dark .gauge-card-subtitle {
    color: var(--beige-200);
    font-size: .97rem;
    margin-bottom: var(--sp-2);
}

/* Gauge SVG — text visibility on dark background */
body.page-dark .gauge-card svg text[fill="#a39d93"] { fill: var(--beige-200) !important; }
body.page-dark .gauge-card svg line[stroke*="rgba(255,255,255"] { stroke: rgba(255,255,255,.65) !important; }

/* --- Gauge score badge --- */
body.page-dark .gauge-score-badge {
    width: 160px;
    height: 160px;
    margin: var(--sp-2) auto;
}

/* --- Gauge breakdown (factors) --- */
body.page-dark .gauge-breakdown {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px dashed rgba(167,139,250,.18);
}
body.page-dark .gb-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "lbl pct" "track track";
    gap: .2rem .6rem;
    align-items: center;
}
body.page-dark .gb-lbl {
    grid-area: lbl;
    font-size: 1.05rem;
    color: var(--beige-100);
    font-weight: 700;
}
body.page-dark .gb-pct {
    grid-area: pct;
    font-size: 1.05rem;
    font-weight: 800;
    font-feature-settings: "tnum";
}
body.page-dark .gb-track {
    grid-area: track;
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
    display: block;
}
body.page-dark .gb-fill { height: 100%; border-radius: 999px; }

/* --- Baby card --- */
body.page-dark .baby-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(167,139,250,.18);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    backdrop-filter: blur(10px);
}
body.page-dark .baby-card-title {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
}
body.page-dark .baby-card-subtitle {
    color: var(--beige-200);
    text-align: center;
    margin-bottom: var(--sp-2);
}
body.page-dark .baby-main-wrap {
    background: linear-gradient(135deg, rgba(167,139,250,.1), rgba(255,255,255,.03));
    border: 1px solid rgba(167,139,250,.15);
    border-radius: var(--radius);
    padding: var(--sp-2);
}
body.page-dark .baby-top-label {
    background: var(--accent);
    color: var(--ink-900);
    border: none;
    font-weight: 800;
    padding: .25rem .8rem;
}
body.page-dark .baby-info-box {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(167,139,250,.18) !important;
    border-right: 3px solid var(--accent) !important;
    color: #fff !important;
}
body.page-dark .baby-info-lbl {
    color: var(--beige-200);
    font-weight: 700;
}
body.page-dark .baby-info-val strong {
    color: #fff !important;
}
body.page-dark .baby-info-val span {
    color: var(--beige-200) !important;
}

/* --- Probability groups --- */
body.page-dark .prob-group {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(167,139,250,.18);
    border-radius: var(--radius);
    padding: var(--sp-2);
}
body.page-dark .prob-group-title {
    color: #fff;
    font-weight: 800;
}
body.page-dark .prob-item {
    color: #fff;
}
body.page-dark .prob-item:hover { background: rgba(167,139,250,.08); }
body.page-dark .prob-lbl { color: var(--beige-100); }

/* --- Diseases-simple container --- */
body.page-dark .diseases-simple {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(167,139,250,.18);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--sp-3);
}
body.page-dark .ds-header {
    background: rgba(167,139,250,.08);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid rgba(167,139,250,.18);
}
body.page-dark .ds-header h3 { color: #fff !important; }
body.page-dark .ds-header p { color: var(--beige-200) !important; }
body.page-dark .ds-row {
    background: transparent;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(167,139,250,.12);
}
body.page-dark .ds-row:last-child { border-bottom: none; }
body.page-dark .ds-row:hover { background: rgba(167,139,250,.05); }
body.page-dark .ds-name { color: #fff; font-size: 1.05rem; }
body.page-dark .ds-desc { color: var(--beige-200); font-size: .95rem; }
body.page-dark .ds-light { font-size: 1.6rem; }
body.page-dark .ds-status {
    font-weight: 800;
    padding: .2rem .75rem;
    border-radius: 999px;
}

/* --- Punnett section --- */
body.page-dark .punnett-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(167,139,250,.18);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    backdrop-filter: blur(10px);
}
body.page-dark .punnett-title { color: #fff; }
body.page-dark .punnett-sub { color: var(--beige-200); }
body.page-dark .punnett-icon {
    background: var(--accent);
    color: var(--ink-900);
}
body.page-dark .punnett-header {
    border-bottom-color: rgba(167,139,250,.18);
}
body.page-dark .pp-badge {
    background: rgba(167,139,250,.1);
    color: #fff;
    border: 1px solid rgba(167,139,250,.2);
    padding: .45rem 1rem;
    border-radius: 999px;
    font-weight: 700;
}
body.page-dark .pp-badge.father { border-right: 3px solid var(--accent); }
body.page-dark .pp-badge.mother { border-right: 3px solid #e8b8a5; }

body.page-dark .punnett-grid-wrap {
    display: grid;
    grid-template-columns: auto repeat(2, 1fr);
    gap: .4rem;
    max-width: 420px;
    margin: var(--sp-2) auto;
}
body.page-dark .pg-corner {
    background: var(--ink-900);
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    aspect-ratio: 1;
}
body.page-dark .pg-header {
    background: linear-gradient(135deg, rgba(167,139,250,.2), rgba(139,92,246,.1));
    border: 1px solid rgba(167,139,250,.3);
    color: var(--accent);
    font-family: "Consolas", "Courier New", monospace;
    font-weight: 800;
    font-size: 1rem;
    padding: .75rem;
    text-align: center;
    border-radius: 12px;
}
body.page-dark .pc-cell {
    border-radius: 12px;
    padding: .75rem .5rem;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    position: relative;
}
body.page-dark .pc-emoji { font-size: 1.2rem; }
body.page-dark .pc-genotype {
    font-family: "Consolas", "Courier New", monospace;
    font-weight: 800;
    font-size: .97rem;
    color: var(--ink-800);
}
body.page-dark .pc-type-tag {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: .6rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: rgba(42,62,106,.65);
    color: #fff;
    font-weight: 700;
}

/* --- Punnett stats --- */
body.page-dark .punnett-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    justify-content: center;
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px dashed rgba(167,139,250,.18);
}
body.page-dark .ps-item {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(167,139,250,.18);
    padding: .6rem 1rem;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    min-width: 100px;
}
body.page-dark .ps-pct {
    font-size: 1.2rem;
    font-weight: 900;
    font-feature-settings: "tnum";
}
body.page-dark .ps-lbl {
    font-size: .92rem;
    color: var(--beige-200) !important;
    font-weight: 600;
}

/* --- Tabs under ptabs --- */
body.page-dark .ptab {
    background: transparent;
    color: var(--beige-200);
    border: 1px solid rgba(167,139,250,.25);
    padding: .5rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    transition: all var(--t-base) var(--ease);
}
body.page-dark .ptab:hover {
    background: rgba(167,139,250,.1);
    color: #fff;
}
body.page-dark .ptab.active {
    background: var(--accent);
    color: var(--ink-900);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(139,92,246,.25);
}

/* --- Sim card (hypothetical kids) --- */
body.page-dark .sim-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(167,139,250,.18);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    backdrop-filter: blur(10px);
}
body.page-dark .sim-title { color: #fff; }
body.page-dark .sim-sub { color: var(--beige-200); }
body.page-dark .sim-header { border-bottom-color: rgba(167,139,250,.18); }
body.page-dark .sim-disease-tag {
    background: var(--accent);
    color: var(--ink-900);
    border: none;
    font-weight: 800;
}
body.page-dark .sim-child {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(167,139,250,.18);
}
body.page-dark .sim-child-num { color: #fff; }
body.page-dark .sim-child-sex {
    background: rgba(167,139,250,.1);
    color: var(--beige-100);
    border-color: rgba(167,139,250,.2);
}
body.page-dark .sim-summary {
    background: rgba(167,139,250,.08);
    border: 1px solid rgba(167,139,250,.2);
    color: var(--beige-100);
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
}
body.page-dark .sim-summary > div { color: var(--beige-100) !important; }
body.page-dark .sim-summary > div > div:first-child { color: #fff !important; }
body.page-dark .sim-summary > div > div:last-child { color: var(--beige-200) !important; }

/* --- Eye color / hair color sections --- */
body.page-dark .eye-color-section {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(167,139,250,.18);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    backdrop-filter: blur(10px);
}
body.page-dark .eye-color-section h3 { color: #fff; }
body.page-dark .eye-prob-item {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(167,139,250,.18) !important;
    color: #fff !important;
}
body.page-dark .eye-prob-item:hover { background: rgba(167,139,250,.08) !important; }
body.page-dark .eye-prob-text { color: #fff; }
body.page-dark .eye-prob-pct { color: var(--accent); font-weight: 800; }

/* --- Alerts (Rh, consanguinity) --- */
body.page-dark .rh-alert,
body.page-dark .consanguinity-alert {
    background: rgba(184,89,63,.1);
    border: 1px solid rgba(184,89,63,.35);
    border-right: 4px solid var(--bad);
    color: #fff;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    margin-bottom: var(--sp-3);
}
body.page-dark .rh-alert h3,
body.page-dark .consanguinity-alert h3 {
    color: #e8b8a5 !important;
    margin: 0 0 .5rem;
}
body.page-dark .anti-d-box {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(167,139,250,.15);
    color: var(--beige-100);
    margin-top: var(--sp-1);
}

/* --- General override for hardcoded dark inline colors --- */
body.page-dark [style*="color:#0f172a"],
body.page-dark [style*="color:#0d2137"],
body.page-dark [style*="color:#1e293b"],
body.page-dark [style*="color: #0f172a"] {
    color: #fff !important;
}
body.page-dark [style*="color:#64748b"],
body.page-dark [style*="color:#8aadcc"],
body.page-dark [style*="color:#7a9ab8"],
body.page-dark [style*="color:#6a8fb0"] {
    color: var(--beige-200) !important;
}
body.page-dark [style*="background:#fff"]:not(.bt-circle):not(.eye-circle):not(.eye-swatch):not(.prob-eye-dot):not(svg):not(svg *) {
    background: rgba(255,255,255,.04) !important;
}

/* --- Tab panels spacing --- */
body.page-dark .result-tab-panel { padding-top: var(--sp-1); }
body.page-dark .result-tab-panel.active { animation: fadeIn .3s var(--ease); }

/* --- Chart panels on dark page --- */
body.page-dark .chart-panel {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(167,139,250,.18);
    backdrop-filter: blur(10px);
}
body.page-dark .chart-panel h3 {
    color: #fff !important;
    border-bottom-color: rgba(167,139,250,.18);
}