:root {
    --primary: #007c8a;
    --primary-dark: #005b78;
    --primary-soft: #e8f8fa;
    --ink: #071d3a;
    --muted: #64748b;
    --line: #e6ecef;
    --surface: #ffffff;
    --background: #f5f8fb;
    --danger: #c73b4c;
    --success: #148c67;
    --shadow-sm: 0 8px 26px rgba(24, 52, 70, .07);
    --shadow-md: 0 18px 50px rgba(13, 67, 82, .12);
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 13px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--background);
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }

/* Login */
.login-page { min-height: 100vh; background: #eef5f6; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 48%) 1fr; }
.login-visual {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background: linear-gradient(145deg, #eaf7fa 0%, #d9eef3 58%, #cfe8ee 100%);
    color: var(--ink);
}
.visual-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .16; background: #fff; }
.visual-orb-one { width: 430px; height: 430px; left: -150px; top: -160px; }
.visual-orb-two { width: 520px; height: 520px; right: -250px; bottom: -260px; }
.visual-content { position: relative; z-index: 2; height: 100%; min-height: 100vh; padding: 48px 56px; display: flex; flex-direction: column; }
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-lockup .brand-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 20px; background: #fff; padding: 7px; }
.brand-lockup div { display: flex; flex-direction: column; gap: 4px; }
.brand-lockup strong { font-size: 1.2rem; }
.brand-lockup span { font-size: .82rem; opacity: .72; }
.visual-message { margin: auto 0; max-width: 540px; }
.eyebrow, .page-eyebrow, .section-kicker, .login-kicker { color: #52d2c2; font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.visual-message h1 { margin: 14px 0 18px; font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: 1.12; letter-spacing: -.04em; }
.visual-message p { margin: 0; max-width: 490px; font-size: 1.05rem; line-height: 2; color: var(--muted); }
.security-note { display: flex; gap: 10px; align-items: center; padding: 14px 16px; width: fit-content; border: 1px solid rgba(0,124,138,.14); border-radius: 16px; background: rgba(255,255,255,.72); color: var(--ink); font-size: .82rem; }
.security-note svg { flex: 0 0 auto; }
.login-panel { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 34px 24px 20px; background: #fff; }
.login-card { width: min(100%, 430px); }
.login-mobile-brand { display: none; align-items: center; gap: 12px; margin-bottom: 42px; }
.login-mobile-brand img { width: 58px; height: 58px; object-fit: contain; }
.login-mobile-brand div { display: flex; flex-direction: column; gap: 3px; }
.login-mobile-brand strong { font-size: 1rem; }
.login-mobile-brand span { color: var(--muted); font-size: .73rem; }
.login-header { margin-bottom: 28px; }
.login-header h2 { font-size: 2rem; margin: 8px 0 10px; letter-spacing: -.03em; }
.login-header p { color: var(--muted); margin: 0; line-height: 1.8; }
.login-form { display: grid; gap: 18px; }
.field-group { display: grid; gap: 8px; }
.field-group label { font-size: .86rem; font-weight: 700; }
.input-shell { display: flex; align-items: center; gap: 10px; min-height: 55px; padding: 0 15px; border: 1px solid #dce5e8; border-radius: 15px; background: #fbfcfd; transition: .2s ease; }
.input-shell:focus-within { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(8,127,122,.10); }
.input-shell svg { color: #91a1ab; flex: 0 0 auto; }
.input-shell input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; min-width: 0; direction: rtl; }
.input-shell input::placeholder { color: #aab6bd; }
.field-error { min-height: 1em; color: var(--danger); font-size: .76rem; }
.validation-summary { display: none; color: #8d2838; background: #fff1f3; border: 1px solid #ffd5dc; border-radius: 13px; padding: 12px 14px; font-size: .82rem; line-height: 1.65; }
.validation-summary.validation-summary-errors { display: block; }
.validation-summary ul { margin: 0; padding-right: 18px; }
.remember-row { display: flex; align-items: center; gap: 9px; width: fit-content; color: var(--muted); font-size: .83rem; cursor: pointer; }
.remember-row input { accent-color: var(--primary); width: 17px; height: 17px; }
.primary-button { min-height: 55px; border: 0; border-radius: 15px; background: linear-gradient(135deg, var(--primary), #0a958c); color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 25px rgba(8,127,122,.22); transition: transform .15s ease, box-shadow .15s ease; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 15px 32px rgba(8,127,122,.28); }
.login-help { text-align: center; padding-top: 24px; }
.login-help a { color: var(--primary); font-weight: 700; font-size: .84rem; }
.login-help p { color: #9aa7af; font-size: .76rem; margin: 13px 0 0; }
.login-footer { margin-top: auto; padding-top: 34px; color: #a0abb1; font-size: .72rem; }

/* App shell */
.portal-body { min-height: 100vh; background: var(--background); }
.portal-app { min-height: 100vh; display: flex; }
.desktop-sidebar { width: 255px; flex: 0 0 255px; min-height: 100vh; position: sticky; top: 0; align-self: flex-start; display: flex; flex-direction: column; background: linear-gradient(180deg, #007c8a 0%, #006c78 62%, #005b78 100%); color: #fff; padding: 26px 17px 20px; }
.sidebar-brand {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 0 7px 25px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar-brand img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    padding: 5px;
    border-radius: 15px;
    background: #fff;
}
.sidebar-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    text-align: start;
}
.sidebar-brand-title {
    display: block;
    max-width: 100%;
    color: #fff;
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.65;
    letter-spacing: 0;
    text-wrap: balance;
}
.sidebar-brand-tagline {
    display: block;
    max-width: 100%;
    color: rgba(255,255,255,.78);
    font-size: .62rem;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0;
    white-space: nowrap;
}
.sidebar-nav { display: grid; gap: 7px; margin-top: 24px; }
.sidebar-link { min-height: 49px; display: flex; align-items: center; gap: 11px; padding: 0 13px; border-radius: 13px; color: rgba(255,255,255,.82); font-size: .84rem; position: relative; transition: .18s ease; }
.sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-link.active { background: #fff; color: var(--primary-dark); box-shadow: 0 10px 22px rgba(0,0,0,.10); font-weight: 800; }
.sidebar-link.disabled { cursor: default; opacity: .62; }
.sidebar-link small { margin-right: auto; font-size: .58rem; padding: 3px 6px; border-radius: 999px; background: rgba(255,255,255,.13); }
.sidebar-link.active small { background: var(--primary-soft); }
.nav-icon { width: 25px; display: inline-flex; justify-content: center; }
.nav-icon svg { width: 1.25rem; height: 1.25rem; }
.sidebar-logout { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding-top: 17px; }
.sidebar-logout button { border: 0; background: transparent; color: rgba(255,255,255,.85); width: 100%; display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 12px; cursor: pointer; }
.sidebar-logout button:hover { background: rgba(255,255,255,.08); }
.portal-main { min-width: 0; flex: 1; }
.topbar { height: 76px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); }
.desktop-breadcrumb { display: flex; flex-direction: column; gap: 4px; }
.desktop-breadcrumb span { color: var(--muted); font-size: .72rem; }
.desktop-breadcrumb strong { font-size: 1rem; }
.mobile-page-title { display: none; font-weight: 800; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.user-chip > div { display: flex; flex-direction: column; gap: 2px; }
.user-chip strong { max-width: 170px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .78rem; }
.user-chip span { color: var(--muted); font-size: .68rem; }
.user-avatar { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff !important; background: linear-gradient(135deg, var(--primary), #1ea89b); font-weight: 800; }
.portal-content { padding: 28px; max-width: 1480px; margin: 0 auto; }
.portal-alert { background: #fff5e8; border: 1px solid #ffe0b7; color: #87541c; padding: 13px 16px; border-radius: 14px; margin-bottom: 18px; font-size: .84rem; }

/* Dashboard */
.welcome-section { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.welcome-section h1, .page-heading-row h1 { margin: 6px 0 8px; font-size: clamp(1.45rem, 2vw, 2rem); letter-spacing: -.03em; }
.welcome-section p, .page-heading-row p { margin: 0; color: var(--muted); line-height: 1.7; font-size: .85rem; }
.page-eyebrow { color: var(--primary); }
.patient-status-pill { display: inline-flex; align-items: center; gap: 7px; color: #15775d; background: #e9f8f2; border: 1px solid #d2f0e4; padding: 8px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.patient-status-pill span { width: 8px; height: 8px; border-radius: 50%; background: #1aae7c; box-shadow: 0 0 0 4px rgba(26,174,124,.12); }
.patient-mobile-card { display: none; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 17px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
a.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.metric-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; }
.metric-card > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.metric-card strong { font-size: 1.45rem; line-height: 1; }
.metric-card span:not(.metric-icon) { font-size: .79rem; font-weight: 700; margin-top: 4px; }
.metric-card small { color: var(--muted); font-size: .65rem; }
.metric-teal .metric-icon { background: #e9f8f5; color: #0b8a7c; }
.metric-blue .metric-icon { background: #ebf4ff; color: #3078cb; }
.metric-violet .metric-icon { background: #f1edff; color: #7358c8; }
.metric-orange .metric-icon { background: #fff3e5; color: #d47a20; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.portal-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 21px; }
.card-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.card-header-row h2, .quick-actions-section h2 { margin: 4px 0 0; font-size: 1rem; }
.card-header-row a { color: var(--primary); font-size: .74rem; font-weight: 800; }
.section-kicker { color: var(--muted); font-size: .67rem; }
.coming-tag { font-size: .63rem; color: #7f8e96; background: #f1f4f5; border-radius: 999px; padding: 5px 8px; white-space: nowrap; }
.next-appointment-content { display: flex; gap: 18px; align-items: stretch; }
.appointment-date-box { width: 92px; flex: 0 0 92px; min-height: 132px; border-radius: 19px; background: linear-gradient(180deg, #e9f8f5, #f7fcfb); border: 1px solid #d8f0eb; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--primary-dark); }
.appointment-date-box span { font-size: .7rem; font-weight: 700; }
.appointment-date-box strong { font-size: 2.2rem; line-height: 1.15; }
.appointment-date-box small { color: var(--muted); font-size: .68rem; }
.appointment-main-info { min-width: 0; flex: 1; }
.status-badge { display: inline-flex; align-items: center; width: fit-content; color: #14795d; background: #e8f7f1; border: 1px solid #d1eee2; padding: 4px 9px; border-radius: 999px; font-size: .67rem; font-weight: 800; }
.appointment-main-info h3 { margin: 11px 0 5px; font-size: 1rem; }
.appointment-main-info > p { margin: 0 0 15px; color: var(--muted); font-size: .78rem; }
.appointment-meta { display: grid; gap: 8px; }
.appointment-meta span { display: flex; align-items: center; gap: 7px; color: #50636e; font-size: .74rem; }
.appointment-meta svg { width: 1rem; height: 1rem; color: var(--primary); flex: 0 0 auto; }
.activity-list { display: grid; }
.activity-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid #eef2f3; }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #edf7ff; color: #397ec3; flex: 0 0 auto; }
.activity-icon svg { width: 1rem; height: 1rem; }
.activity-item > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.activity-item strong { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .76rem; }
.activity-item span { color: var(--muted); font-size: .65rem; }
.result-ready { margin-right: auto; color: #167b5f !important; background: #e9f7f1; border-radius: 999px; padding: 4px 8px; font-weight: 700; }
.patient-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 0; }
.patient-details-grid > div { padding: 12px 13px; border-radius: 14px; background: #f8fafb; border: 1px solid #edf1f3; }
.patient-details-grid dt { color: var(--muted); font-size: .65rem; margin-bottom: 6px; }
.patient-details-grid dd { margin: 0; font-size: .78rem; font-weight: 800; overflow-wrap: anywhere; }
.timeline-list { display: grid; }
.timeline-row { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px 0; }
.timeline-row:not(:last-child)::after { content: ""; position: absolute; right: 6px; top: 29px; bottom: -6px; width: 1px; background: #dce6e8; }
.timeline-dot { width: 13px; height: 13px; border: 3px solid #d6f0eb; border-radius: 50%; background: var(--primary); z-index: 1; }
.timeline-dot.emergency { background: #d84b5b; border-color: #f8dce0; }
.timeline-row > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.timeline-row strong { font-size: .77rem; }
.timeline-row span { color: var(--muted); font-size: .66rem; }
.timeline-row time { color: var(--muted); font-size: .65rem; white-space: nowrap; }
.empty-list { color: var(--muted); text-align: center; padding: 28px 10px; font-size: .78rem; }
.empty-state { display: flex; align-items: center; gap: 13px; padding: 18px 0 8px; }
.empty-state.compact .empty-icon { width: 45px; height: 45px; }
.empty-state strong { display: block; font-size: .82rem; }
.empty-state p { color: var(--muted); margin: 5px 0 0; font-size: .7rem; }
.empty-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: var(--primary-soft); border-radius: 15px; }
.quick-actions-section { margin-top: 18px; }
.quick-actions-section > header { margin-bottom: 12px; }
.quick-actions-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.quick-actions-grid > a, .quick-actions-grid > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 15px; display: grid; grid-template-columns: 38px minmax(0,1fr); column-gap: 10px; row-gap: 2px; align-items: center; box-shadow: var(--shadow-sm); }
.quick-actions-grid > div { opacity: .72; }
.quick-actions-grid > * > span { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: var(--primary-soft); }
.quick-actions-grid strong { font-size: .76rem; }
.quick-actions-grid small { color: var(--muted); font-size: .62rem; }

/* Appointments page */
.page-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 19px; }
.page-count-chip { display: flex; align-items: baseline; gap: 5px; padding: 10px 14px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-dark); }
.page-count-chip strong { font-size: 1.35rem; }
.page-count-chip span { font-size: .7rem; }
.appointments-list { display: grid; gap: 13px; }
.appointment-list-card { display: flex; align-items: stretch; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 17px; box-shadow: var(--shadow-sm); }
.appointment-list-date { width: 86px; flex: 0 0 86px; min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 17px; color: var(--primary-dark); background: #edf9f7; border: 1px solid #d9f0eb; }
.appointment-list-date span { font-size: .68rem; font-weight: 800; }
.appointment-list-date strong { font-size: 2rem; line-height: 1.15; }
.appointment-list-date small { color: var(--muted); font-size: .64rem; }
.appointment-list-main { min-width: 0; flex: 1; }
.appointment-list-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.appointment-number { color: #a1adb3; font-size: .64rem; }
.appointment-list-main h2 { margin: 11px 0 4px; font-size: 1rem; }
.appointment-list-main > p { margin: 0 0 15px; color: var(--muted); font-size: .75rem; }
.appointment-list-meta { display: flex; flex-wrap: wrap; gap: 9px 18px; }
.appointment-list-meta span { display: inline-flex; align-items: center; gap: 6px; color: #566a74; font-size: .7rem; }
.appointment-list-meta svg { width: 1rem; height: 1rem; color: var(--primary); }
.page-empty-state { text-align: center; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.empty-icon.large { width: 74px; height: 74px; border-radius: 24px; }
.empty-icon.warning { color: #c17920; background: #fff4e6; }
.page-empty-state h1, .page-empty-state h2 { margin: 17px 0 8px; }
.page-empty-state p { color: var(--muted); margin: 0 0 18px; }
.primary-inline-button { display: inline-flex; padding: 10px 16px; border-radius: 12px; color: #fff; background: var(--primary); font-weight: 800; font-size: .8rem; }

/* Mobile menu */
.mobile-bottom-nav, .mobile-menu-sheet, .mobile-menu-backdrop { display: none; }

@media (max-width: 1100px) {
    .desktop-sidebar { width: 220px; flex-basis: 220px; }
    .sidebar-brand { grid-template-columns: 48px minmax(0, 1fr); gap: 9px; padding-inline: 3px; }
    .sidebar-brand img { width: 48px; height: 48px; border-radius: 14px; }
    .sidebar-brand-title { font-size: .76rem; line-height: 1.7; }
    .sidebar-brand-tagline { font-size: .56rem; }
    .portal-content { padding: 22px; }
    .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    html { font-size: 15px; }
    .login-shell { display: block; }
    .login-visual { display: none; }
    .login-panel { min-height: 100dvh; padding: 28px 20px 18px; justify-content: flex-start; }
    .login-card { margin-top: auto; margin-bottom: auto; }
    .login-mobile-brand { display: flex; }
    .desktop-sidebar { display: none; }
    .topbar { height: 62px; padding: 0 16px; background: linear-gradient(135deg, var(--primary), #076b72); color: #fff; border: 0; }
    .desktop-breadcrumb, .user-chip { display: none; }
    .mobile-page-title { display: block; }
    .portal-content { padding: 18px 14px 92px; }
    .welcome-section { display: none; }
    .patient-mobile-card { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 16px; border-radius: 19px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
    .patient-avatar-large { width: 46px; height: 46px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--primary), #1aa99c); font-weight: 800; flex: 0 0 auto; }
    .patient-mobile-info { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
    .patient-mobile-info strong { max-width: 210px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .83rem; }
    .patient-mobile-info span { color: var(--muted); font-size: .64rem; }
    .patient-mobile-status { margin-right: auto; color: #15775d; background: #e8f7f1; padding: 5px 8px; border-radius: 999px; font-size: .62rem; }
    .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .metric-card { padding: 13px 11px; gap: 9px; min-height: 88px; }
    .metric-icon { width: 39px; height: 39px; flex-basis: 39px; border-radius: 12px; }
    .metric-card strong { font-size: 1.15rem; }
    .metric-card span:not(.metric-icon) { font-size: .67rem; }
    .metric-card small { font-size: .57rem; }
    .dashboard-grid { grid-template-columns: 1fr; gap: 13px; }
    .portal-card { padding: 16px; border-radius: 19px; }
    .profile-summary-card { order: 3; }
    .recent-visits-card { order: 4; }
    .quick-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .quick-actions-grid > a, .quick-actions-grid > div { padding: 12px; grid-template-columns: 34px minmax(0,1fr); }
    .quick-actions-grid > * > span { width: 34px; height: 34px; }
    .mobile-bottom-nav { position: fixed; z-index: 50; bottom: 0; left: 0; right: 0; min-height: 69px; padding: 7px 10px calc(7px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: 0 -8px 28px rgba(25,55,70,.08); backdrop-filter: blur(14px); }
    .mobile-bottom-nav > a, .mobile-bottom-nav > span, .mobile-bottom-nav > button { border: 0; background: transparent; padding: 2px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: #84939b; font-size: .58rem; }
    .mobile-bottom-nav svg { width: 1.35rem; height: 1.35rem; }
    .mobile-bottom-nav .active { color: var(--primary); font-weight: 800; }
    .mobile-bottom-nav .disabled { opacity: .55; }
    .mobile-menu-backdrop { position: fixed; z-index: 69; inset: 0; background: rgba(12,34,45,.38); opacity: 0; pointer-events: none; transition: .2s ease; }
    .mobile-menu-backdrop.open { display: block; opacity: 1; pointer-events: auto; }
    .mobile-menu-sheet { display: block; position: fixed; z-index: 70; bottom: 0; left: 0; right: 0; transform: translateY(105%); transition: transform .24s ease; background: #fff; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; box-shadow: 0 -18px 60px rgba(20,48,65,.18); }
    .mobile-menu-sheet.open { transform: translateY(0); }
    .mobile-menu-handle { width: 46px; height: 5px; background: #dbe3e6; border-radius: 999px; margin: 0 auto 17px; }
    .mobile-menu-user { display: flex; gap: 11px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
    .mobile-menu-user div { display: flex; flex-direction: column; gap: 3px; }
    .mobile-menu-user strong { font-size: .82rem; }
    .mobile-menu-user span { color: var(--muted); font-size: .65rem; }
    .mobile-menu-items { display: grid; gap: 1px; padding: 10px 0; }
    .mobile-menu-items > span { display: flex; justify-content: space-between; padding: 12px 3px; color: #536873; font-size: .78rem; }
    .mobile-menu-items small { color: #9ba8ae; }
    .mobile-logout { width: 100%; min-height: 45px; border: 1px solid #ffd8dd; border-radius: 13px; color: var(--danger); background: #fff5f6; font-weight: 800; }
    .page-heading-row { align-items: center; }
    .page-heading-row h1 { font-size: 1.35rem; }
    .appointment-list-card { gap: 12px; padding: 13px; border-radius: 18px; }
    .appointment-list-date { width: 67px; flex-basis: 67px; min-height: 104px; border-radius: 15px; }
    .appointment-list-date strong { font-size: 1.7rem; }
    .appointment-list-meta { display: grid; gap: 7px; }
}

@media (max-width: 430px) {
    .login-header h2 { font-size: 1.7rem; }
    .login-mobile-brand { margin-bottom: 34px; }
    .metrics-grid { gap: 8px; }
    .metric-card { padding: 11px 9px; }
    .metric-icon { width: 35px; height: 35px; flex-basis: 35px; }
    .next-appointment-content { gap: 12px; }
    .appointment-date-box { width: 72px; flex-basis: 72px; min-height: 124px; }
    .appointment-date-box strong { font-size: 1.85rem; }
    .patient-details-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .quick-actions-grid { grid-template-columns: 1fr 1fr; }
    .quick-actions-grid small { display: none; }
    .appointment-list-card { align-items: flex-start; }
    .appointment-list-date { width: 58px; flex-basis: 58px; min-height: 93px; }
    .appointment-list-date strong { font-size: 1.5rem; }
}

/* V2 visual alignment with the existing laboratory portal */
.login-language-row { display: flex; justify-content: center; margin-bottom: 14px; }
.login-language-row button { min-width: 72px; height: 34px; border-radius: 999px; border: 1px solid #bfe2e8; color: var(--primary-dark); background: #fff; font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: .72rem; font-weight: 800; }
.login-visual .brand-lockup strong, .login-visual .visual-message h1 { color: var(--ink); }
.login-visual .brand-lockup span, .login-visual .visual-message p { color: var(--muted); }
.login-visual .eyebrow { color: var(--primary); }
.login-visual .security-note { color: var(--ink); background: rgba(255,255,255,.72); border-color: rgba(0,124,138,.14); }
.login-visual .visual-orb { background: var(--primary); opacity: .08; }
.login-card { position: relative; }
.login-panel { background: #fff; }
.login-shell { background: radial-gradient(circle at top, #fff 0%, #f4f8fb 52%, #edf4f8 100%); }
.primary-button { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }
.topbar { box-shadow: 0 4px 18px rgba(7,29,58,.03); }
.portal-card, .metric-card, .patient-mobile-card { border-color: #dbe4ee; }

@media (min-width: 821px) {
    .login-shell { grid-template-columns: minmax(430px, 48%) minmax(480px, 52%); padding: 5vh 7vw; min-height: 100vh; }
    .login-panel, .login-visual { min-height: min(640px, 90vh); }
    .login-panel { order: 1; border-radius: 22px 0 0 22px; border: 1px solid #dbe4ee; border-left: 0; box-shadow: 0 18px 48px rgba(9,30,66,.09); }
    .login-visual { order: 2; border-radius: 0 22px 22px 0; border: 1px solid #dbe4ee; overflow: hidden; box-shadow: 0 18px 48px rgba(9,30,66,.09); }
    .visual-content { min-height: min(640px, 90vh); padding: 46px 42px; align-items: center; text-align: center; }
    .brand-lockup { flex-direction: column; }
    .brand-lockup .brand-logo { width: 94px; height: 94px; border-radius: 26px; }
    .visual-message { margin: auto 0; }
    .visual-message h1 { font-size: clamp(2rem, 3vw, 3.1rem); }
    .security-note { margin-top: auto; }
}

/* V3 dashboard hierarchy and readability */
.profile-summary-wide {
    margin-bottom: 18px;
}
.patient-details-wide {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.dashboard-grid-reordered .portal-card {
    min-height: 310px;
}
.card-header-row h2,
.quick-actions-section h2 {
    font-size: 1.12rem;
}
.metric-card strong {
    font-size: 1.58rem;
}
.metric-card span:not(.metric-icon) {
    font-size: .86rem;
}
.metric-card small {
    font-size: .7rem;
}
.patient-details-grid dt {
    font-size: .72rem;
}
.patient-details-grid dd {
    font-size: .88rem;
}
.timeline-row strong,
.activity-item strong {
    font-size: .88rem;
}
.timeline-row span,
.activity-item span,
.timeline-row time {
    font-size: .72rem;
}
.dashboard-lab-list .activity-item {
    min-height: 58px;
}
.dashboard-lab-list .activity-item strong {
    max-width: 360px;
}

.appointments-preview-stack {
    display: grid;
    gap: 12px;
}
.appointment-preview-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 12px;
    border: 1px solid #e3ebee;
    border-radius: 17px;
    background: linear-gradient(135deg, #ffffff, #f8fcfc);
}
.appointment-preview-date {
    width: 70px;
    min-height: 94px;
    flex: 0 0 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--primary-dark);
    background: #edf9f7;
    border: 1px solid #d9f0eb;
}
.appointment-preview-date span,
.appointment-preview-date small {
    font-size: .65rem;
    color: var(--muted);
}
.appointment-preview-date strong {
    font-size: 1.65rem;
    line-height: 1.1;
}
.appointment-preview-main {
    min-width: 0;
    flex: 1;
}
.appointment-preview-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.appointment-preview-title-row time {
    color: var(--primary-dark);
    font-size: .73rem;
    font-weight: 800;
    white-space: nowrap;
}
.appointment-preview-main h3 {
    margin: 8px 0 3px;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appointment-preview-main p {
    margin: 0 0 7px;
    color: var(--muted);
    font-size: .72rem;
}
.appointment-doctor {
    display: block;
    color: #50636e;
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sick-leaves-list {
    display: grid;
}
.sick-leave-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f3;
}
.sick-leave-row:last-child {
    border-bottom: 0;
}
.sick-leave-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #7358c8;
    background: #f1edff;
}
.sick-leave-icon svg {
    width: 1rem;
    height: 1rem;
}
.sick-leave-row > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sick-leave-row strong {
    font-size: .85rem;
}
.sick-leave-row span {
    color: var(--muted);
    font-size: .7rem;
}
.sick-leave-row time {
    color: var(--muted);
    font-size: .7rem;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .patient-details-wide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .profile-summary-wide {
        margin-bottom: 13px;
    }
    .patient-details-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-grid-reordered .portal-card {
        min-height: 0;
    }
    .metric-card strong {
        font-size: 1.28rem;
    }
    .metric-card span:not(.metric-icon) {
        font-size: .73rem;
    }
    .metric-card small {
        font-size: .62rem;
    }
    .card-header-row h2,
    .quick-actions-section h2 {
        font-size: 1.02rem;
    }
    .appointment-preview-row {
        padding: 10px;
        gap: 11px;
    }
    .appointment-preview-date {
        width: 62px;
        min-height: 88px;
        flex-basis: 62px;
    }
    .appointment-preview-date strong {
        font-size: 1.48rem;
    }
    .appointment-preview-main h3 {
        font-size: .82rem;
    }
    .sick-leave-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }
    .sick-leave-row time {
        grid-column: 2;
    }
}

/* V4 sick-leave dashboard and full-page cards */
.sick-leaves-card .card-header-row > a {
    color: var(--primary);
    font-size: .72rem;
    font-weight: 800;
}
.sick-leaves-card .sick-leaves-list {
    align-content: start;
}
.sick-leave-row {
    color: inherit;
    transition: background .18s ease, transform .18s ease;
}
a.sick-leave-row:hover {
    background: #fbfdfe;
    transform: translateX(-2px);
}
.sick-leave-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sick-leave-summary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sick-leave-duration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    min-height: 29px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #7358c8 !important;
    background: #f1edff;
    font-size: .67rem !important;
    font-weight: 900;
    white-space: nowrap;
}

.sick-leaves-page-list {
    display: grid;
    gap: 14px;
}
.sick-leave-card {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
    scroll-margin-top: 92px;
    border: 1px solid #dbe4ee;
    border-radius: 21px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.sick-leave-card:target {
    border-color: #a99ae9;
    box-shadow: 0 14px 34px rgba(115, 88, 200, .16);
}
.sick-leave-card-date {
    width: 82px;
    min-height: 118px;
    flex: 0 0 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: #5f48b4;
    background: linear-gradient(145deg, #f5f2ff, #ece6ff);
    border: 1px solid #e1d9ff;
}
.sick-leave-card-date span,
.sick-leave-card-date small {
    color: #766c98;
    font-size: .7rem;
}
.sick-leave-card-date strong {
    font-size: 1.9rem;
    line-height: 1.15;
}
.sick-leave-card-main {
    min-width: 0;
    flex: 1;
}
.sick-leave-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sick-leave-status,
.sick-leave-duration-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    color: #6750ba;
    background: #f1edff;
    font-size: .7rem;
    font-weight: 900;
    white-space: nowrap;
}
.sick-leave-number {
    color: var(--muted);
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: .7rem;
}
.sick-leave-card-main h2 {
    margin: 10px 0 4px;
    font-size: 1.05rem;
}
.sick-leave-card-main > p {
    margin: 0 0 12px;
    color: var(--primary-dark);
    font-size: .8rem;
    font-weight: 800;
}
.sick-leave-card-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 16px;
    color: #556b78;
    font-size: .75rem;
}
.sick-leave-card-meta span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}
.sick-leave-card-meta svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: var(--primary);
}
.sick-leave-duration-badge {
    align-self: center;
    min-width: 94px;
    color: #fff;
    background: linear-gradient(135deg, #7358c8, #9278e2);
}

@media (max-width: 820px) {
    .sick-leave-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 9px;
        padding: 10px 0;
    }
    .sick-leave-duration {
        min-width: 66px;
        font-size: .62rem !important;
    }
    .sick-leave-card {
        gap: 12px;
        padding: 13px;
        border-radius: 18px;
    }
    .sick-leave-card-date {
        width: 65px;
        min-height: 105px;
        flex-basis: 65px;
        border-radius: 15px;
    }
    .sick-leave-card-date strong {
        font-size: 1.55rem;
    }
    .sick-leave-card-main h2 {
        font-size: .92rem;
    }
    .sick-leave-card-meta {
        grid-template-columns: 1fr;
        gap: 7px;
        font-size: .69rem;
    }
    .sick-leave-duration-badge {
        display: none;
    }
}

@media (max-width: 520px) {
    .sick-leave-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    .sick-leave-duration {
        grid-column: 2;
        justify-self: start;
    }
    .sick-leave-card {
        align-items: flex-start;
    }
    .sick-leave-card-date {
        width: 58px;
        min-height: 92px;
        flex-basis: 58px;
    }
    .sick-leave-card-date strong {
        font-size: 1.4rem;
    }
    .sick-leave-card-topline {
        align-items: flex-start;
    }
}

/* V4.1 exact sick-leave summary layout */
.sick-leave-summary strong {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
}
.sick-leave-date-text { color: var(--text); }
.sick-leave-inline-separator { color: #97a6b4; font-weight: 700; }
.sick-leave-clinic-text { color: #405367; font-weight: 800; }
@media (max-width: 520px) {
    .sick-leave-summary strong { gap: 4px; }
    .sick-leave-inline-separator { display: inline; }
}

/* V5 shared back navigation and sick-leave workplace */
.portal-back-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 14px;
}
.portal-back-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid #d9e4ea;
    border-radius: 12px;
    color: var(--primary-dark);
    background: #fff;
    box-shadow: 0 5px 14px rgba(25, 54, 71, .06);
    font-size: .78rem;
    font-weight: 900;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.portal-back-button:hover {
    transform: translateX(2px);
    border-color: #bcd7df;
    background: #f8fcfd;
}
.portal-back-button svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}
.sick-leave-workplace strong {
    color: var(--ink);
    white-space: nowrap;
}
.sick-leave-workplace {
    line-height: 1.65;
}

@media (max-width: 820px) {
    .portal-back-row { margin-bottom: 10px; }
    .portal-back-button {
        min-height: 38px;
        padding: 0 11px;
        border-radius: 11px;
        font-size: .74rem;
    }
}


/* V6 - Cairo is the single portal font on desktop and mobile */
html, body, body *, button, input, select, textarea, option {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* V6 - Appointment tabs and attended history */
.appointments-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: -4px 0 18px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.appointments-tab {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 12px;
    color: #637985;
    font-size: .78rem;
    font-weight: 800;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.appointments-tab:hover { background: #f3fafb; }
.appointments-tab.active {
    color: #fff;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    box-shadow: 0 8px 18px rgba(0, 124, 138, .18);
}
.appointments-tab small {
    min-width: 26px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: .67rem;
    font-weight: 900;
}
.appointments-tab.active small { color: var(--primary-dark); background: #fff; }
.status-badge.attended { color: #176a4b; background: #e9f8f1; border-color: #ccebdd; }
.past-appointment .appointment-list-date { color: #4b6680; background: #f2f6fa; border-color: #dfe8ef; }

@media (max-width: 520px) {
    .appointments-tabs { gap: 6px; padding: 4px; border-radius: 14px; }
    .appointments-tab { min-height: 46px; gap: 5px; padding: 7px 6px; font-size: .69rem; text-align: center; }
    .appointments-tab small { min-width: 23px; height: 22px; padding: 0 6px; font-size: .61rem; }
}

/* V7 - Lab portal inspired authentication window */
.auth-page {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 14% 12%, rgba(0, 124, 138, .08), transparent 30%),
        radial-gradient(circle at 90% 88%, rgba(38, 174, 166, .08), transparent 32%),
        #f3f7fb;
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

.auth-page.modal-open { overflow: hidden; }

.auth-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 5vw, 64px);
}

.auth-card {
    width: min(100%, 980px);
    min-height: 590px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-areas: "form brand";
    overflow: hidden;
    border: 1px solid #d5e1e8;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(21, 52, 71, .14);
}

.auth-brand-panel {
    grid-area: brand;
    position: relative;
    overflow: hidden;
    min-height: 590px;
    color: var(--ink);
    background:
        linear-gradient(145deg, rgba(255,255,255,.25), rgba(255,255,255,.04)),
        linear-gradient(145deg, #dff3f6 0%, #d2edf2 52%, #c6e5ec 100%);
}

.auth-brand-panel::before,
.auth-brand-panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.42);
}

.auth-brand-panel::before {
    width: 330px;
    height: 330px;
    top: -165px;
    left: -120px;
}

.auth-brand-panel::after {
    width: 420px;
    height: 420px;
    right: -240px;
    bottom: -250px;
}

.auth-brand-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,124,138,.025));
}

.auth-brand-content {
    position: relative;
    z-index: 2;
    min-height: 590px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 44px 42px 38px;
    text-align: center;
}

.auth-brand-top {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-logo {
    width: 104px;
    height: 104px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 84, 107, .08));
}

.auth-brand-ar {
    margin-top: 8px;
    color: #006079;
    font-size: 1rem;
    font-weight: 900;
}

.auth-brand-en {
    color: #315b6a;
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.auth-brand-middle {
    margin: auto 0;
    max-width: 430px;
}

.auth-brand-kicker {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(255,255,255,.66);
    font-size: .72rem;
    font-weight: 800;
}

.auth-brand-middle h1 {
    margin: 17px 0 10px;
    color: #071d3a;
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    line-height: 1.35;
    letter-spacing: -.035em;
}

.auth-brand-middle p {
    margin: 0;
    color: #557185;
    font-size: .98rem;
    line-height: 2;
}

.auth-security-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #102d44;
    font-size: .82rem;
}

.auth-security-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.86);
    box-shadow: 0 7px 18px rgba(10, 71, 91, .1);
}

.auth-form-panel {
    grid-area: form;
    min-height: 590px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 38px 46px;
    background: #fff;
}

.auth-form-wrap { width: min(100%, 410px); }

.auth-form {
    display: grid;
    gap: 15px;
}

.auth-mobile-brand { display: none; text-align: center; }

.auth-language-row {
    display: flex;
    justify-content: center;
    margin-bottom: 1px;
}

.auth-language-switch {
    min-width: 74px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 15px;
    border: 1px solid #b9dfe5;
    border-radius: 999px;
    color: #006179;
    background: #fff;
    font-size: .72rem;
    font-weight: 900;
    transition: .18s ease;
}

.auth-language-switch:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.auth-form-header {
    margin-bottom: 4px;
    text-align: center;
}

.auth-form-header h2 {
    margin: 0 0 7px;
    color: var(--ink);
    font-size: 2rem;
    line-height: 1.4;
    letter-spacing: -.035em;
}

.auth-form-header p {
    margin: 0;
    color: #687b91;
    font-size: .86rem;
    line-height: 1.9;
}

.auth-validation-summary:empty { display: none; }
.auth-validation-summary {
    padding: 11px 13px;
    border: 1px solid #ffd6dc;
    border-radius: 12px;
    color: #a92f40;
    background: #fff5f6;
    font-size: .76rem;
    line-height: 1.7;
}
.auth-validation-summary ul { margin: 0; padding-inline-start: 20px; }

.auth-input-wrap {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 15px;
    border: 1px solid #d7e2ea;
    border-radius: 14px;
    background: #fbfdff;
    transition: .18s ease;
}

.auth-input-wrap:focus-within {
    border-color: #0093a0;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 124, 138, .09);
}

.auth-input-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7c91a3;
    flex: 0 0 auto;
}

.auth-input-icon svg { width: 20px; height: 20px; }

.auth-input-wrap input {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: .87rem;
    direction: inherit;
}

.auth-input-wrap input::placeholder { color: #9aabba; }

.auth-field-error {
    display: block;
    min-height: 2px;
    margin-top: -9px;
    color: #ba3546;
    font-size: .68rem;
}

.auth-remember-row {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #60758a;
    font-size: .75rem;
    cursor: pointer;
}

.auth-remember-row input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.auth-primary-button {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #00677f, #008d92);
    box-shadow: 0 13px 28px rgba(0, 124, 138, .22);
    font-weight: 900;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease;
}

.auth-primary-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(0, 124, 138, .28);
}

.auth-lookup-link {
    width: fit-content;
    margin: -3px auto 2px;
    border: 0;
    color: #006d83;
    background: transparent;
    font-size: .75rem;
    font-weight: 800;
    cursor: pointer;
}

.auth-lookup-link:hover { text-decoration: underline; }

.auth-support-box {
    margin-top: 5px;
    padding: 15px 16px;
    border: 1px solid #d9e4ec;
    border-radius: 14px;
    color: #62758a;
    background: #fbfdff;
    text-align: center;
    font-size: .75rem;
    line-height: 1.8;
}

.auth-support-box strong {
    display: block;
    margin-top: 2px;
    color: var(--ink);
    font-size: .95rem;
}

.auth-modal-backdrop {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(8, 27, 43, .52);
    backdrop-filter: blur(5px);
}

.auth-modal-backdrop[hidden] { display: none; }

.auth-modal {
    position: relative;
    width: min(100%, 430px);
    padding: 30px 26px 24px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 25px 80px rgba(4, 27, 42, .28);
    text-align: center;
}

.auth-modal-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: #617485;
    background: #f2f6f8;
    font-size: 1.3rem;
    cursor: pointer;
}

.auth-modal-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--primary-soft);
    font-size: 1.7rem;
}

.auth-modal h3 { margin: 17px 0 8px; font-size: 1.25rem; }
.auth-modal p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.9; }

.auth-modal-support {
    margin-top: 18px;
    padding: 13px;
    border-radius: 13px;
    color: #556b7c;
    background: #f5f9fb;
    font-size: .75rem;
}

.auth-modal-support strong {
    display: block;
    margin-top: 3px;
    color: var(--primary-dark);
    font-size: 1rem;
}

/* Appointment history status colors */
.status-badge.booked { color: #116f5b; background: #e8f7f1; border-color: #cfeadd; }
.status-badge.completed { color: #176a4b; background: #e6f7ef; border-color: #c5e9d9; }
.status-badge.arrived { color: #15657b; background: #e9f6fa; border-color: #cae5ed; }
.status-badge.with-doctor { color: #5e4c98; background: #f0ecfb; border-color: #ddd4f5; }
.status-badge.cancelled { color: #b23b4a; background: #fff0f2; border-color: #f4ccd2; }
.status-badge.neutral { color: #657586; background: #f1f4f7; border-color: #dce3e8; }

@media (max-width: 820px) {
    .auth-shell { align-items: stretch; padding: 0; background: #fff; }
    .auth-card {
        min-height: 100dvh;
        display: block;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .auth-brand-panel { display: none; }
    .auth-form-panel {
        min-height: 100dvh;
        padding: 28px 20px calc(24px + env(safe-area-inset-bottom));
    }
    .auth-form-wrap { width: min(100%, 430px); }
    .auth-mobile-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 18px;
    }
    .auth-mobile-brand .auth-logo { width: 86px; height: 86px; }
    .auth-mobile-brand .auth-brand-ar { margin-top: 2px; }
    .auth-form-header h2 { font-size: 1.72rem; }
}

@media (max-width: 390px) {
    .auth-form-panel { padding-inline: 16px; }
    .auth-input-wrap { min-height: 53px; }
    .auth-primary-button { min-height: 53px; }
    .auth-support-box { padding: 13px; }
}


/* V8 - login gate, card badges and hierarchical navigation */
.card-badge-group {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}
.specialty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid #d7e8eb;
    border-radius: 999px;
    color: #176f78;
    background: #eef9fa;
    font-size: .68rem;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
}
.sick-leave-specialty-badge {
    color: #6048ae;
    border-color: #ded5ff;
    background: #f5f1ff;
}
.appointment-visit-date-meta {
    flex-wrap: wrap;
}
.appointment-visit-date-meta strong {
    color: var(--ink);
    font-weight: 900;
}
.appointment-visit-date-meta i {
    color: #a5b1b7;
    font-style: normal;
    font-weight: 900;
}
.appointment-visit-date-meta > span {
    color: #566a74;
}

@media (max-width: 520px) {
    .card-badge-group { gap: 5px; }
    .specialty-badge {
        min-height: 25px;
        padding: 4px 8px;
        font-size: .62rem;
    }
    .appointment-list-topline,
    .sick-leave-card-topline {
        align-items: flex-start;
    }
    .appointment-visit-date-meta {
        row-gap: 3px !important;
    }
}

/* V9: unified language switch and progressive dashboard loading */
.portal-language-switch {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid #dce8eb;
    border-radius: 12px;
    background: #fff;
    color: var(--primary-dark);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
    transition: .18s ease;
}
.portal-language-switch:hover { border-color: var(--primary); background: var(--primary-soft); }
.portal-language-switch span { font-size: .95rem; }

.dashboard-async-section { min-width: 0; }
.dashboard-metrics-host { margin-bottom: 18px; }
.dashboard-metrics-host > .metrics-grid { margin-bottom: 0; }
.dashboard-skeleton-panel { min-height: 286px; display: grid; align-content: start; gap: 15px; }
.dashboard-skeleton-card { pointer-events: none; }
.skeleton-block {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 9px;
    background: #edf2f4;
}
.skeleton-block::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    animation: portal-skeleton 1.35s infinite;
}
.skeleton-icon { width: 48px; height: 48px; border-radius: 15px; }
.skeleton-number { width: 54px; height: 22px; margin-bottom: 7px; }
.skeleton-line { width: 110px; height: 10px; margin-bottom: 6px; }
.skeleton-line.small { width: 76px; height: 8px; }
.skeleton-title { width: 145px; height: 18px; margin-bottom: 10px; }
.skeleton-row { width: 100%; height: 38px; }
.skeleton-appointment { width: 100%; height: 88px; border-radius: 15px; }
@keyframes portal-skeleton { to { transform: translateX(100%); } }

.dashboard-section-error {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: var(--muted);
}
.dashboard-section-error button {
    border: 0;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    padding: 8px 14px;
    font-weight: 800;
    cursor: pointer;
}

.lang-en .sidebar-brand-title { font-size: .78rem; line-height: 1.5; }
.lang-en .sidebar-brand-tagline { font-size: .57rem; white-space: normal; }
.lang-en .sidebar-link small { margin-right: 0; margin-left: auto; }
.lang-en .result-ready { margin-right: 0; margin-left: auto; }
.lang-en .patient-mobile-status { margin-right: 0; margin-left: auto; }
.lang-en .timeline-row:not(:last-child)::after { right: auto; left: 6px; }
.lang-en .portal-back-button svg,
.lang-en .lab-view-button svg { transform: scaleX(-1); }
.lang-en .input-shell input { direction: ltr; }

@media (max-width: 767px) {
    .portal-language-switch { min-height: 34px; padding: 5px 8px; color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.12); }
    .portal-language-switch strong { display: none; }
    .dashboard-skeleton-panel { min-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-block::after { animation: none; }
}

@media (max-width: 767px) {
    .mobile-menu-items > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 3px;
        color: var(--primary-dark);
        font-size: .78rem;
        font-weight: 800;
    }
}

/* V11: center patient-file summary content without changing dashboard card layout */
.profile-summary-card .card-header-row {
    justify-content: center;
    text-align: center;
}
.profile-summary-card .card-header-row > div {
    width: 100%;
}
.profile-summary-card .patient-details-wide > div {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.profile-summary-card .patient-details-wide dt,
.profile-summary-card .patient-details-wide dd {
    width: 100%;
    text-align: center;
}
@media (max-width: 820px) {
    .profile-summary-card .patient-details-wide > div {
        min-height: 70px;
    }
}

/* V12: equal dashboard cards, right-aligned file-summary labels, and 404 page */
@media (min-width: 821px) {
    .dashboard-grid-reordered {
        align-items: stretch;
        grid-auto-rows: 390px;
    }

    .dashboard-grid-reordered > .dashboard-async-section {
        display: flex;
        min-width: 0;
        height: 390px;
    }

    .dashboard-grid-reordered > .dashboard-async-section > .portal-card {
        width: 100%;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .dashboard-grid-reordered .dashboard-skeleton-panel {
        height: 100%;
    }

    .dashboard-grid-reordered .timeline-list,
    .dashboard-grid-reordered .activity-list,
    .dashboard-grid-reordered .sick-leaves-list,
    .dashboard-grid-reordered .appointments-preview-stack,
    .dashboard-grid-reordered .next-appointment-content,
    .dashboard-grid-reordered .empty-state {
        flex: 1 1 auto;
        min-height: 0;
    }

    .dashboard-grid-reordered .timeline-list,
    .dashboard-grid-reordered .activity-list,
    .dashboard-grid-reordered .sick-leaves-list,
    .dashboard-grid-reordered .appointments-preview-stack {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #cfdce2 transparent;
        padding-inline-end: 4px;
    }

    .dashboard-grid-reordered .empty-state {
        justify-content: center;
    }
}

.profile-summary-card .card-header-row {
    justify-content: flex-start;
    text-align: start;
}

.profile-summary-card .card-header-row > div {
    width: auto;
    text-align: start;
}

.profile-summary-card .patient-details-wide > div {
    min-height: 78px;
    display: grid;
    grid-template-rows: auto minmax(32px, 1fr);
    align-items: stretch;
    text-align: initial;
}

.profile-summary-card .patient-details-wide dt {
    width: 100%;
    text-align: start;
    align-self: start;
}

.profile-summary-card .patient-details-wide dd {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.not-found-page {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 124, 138, .12), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(82, 210, 194, .14), transparent 32%),
        #f4f8fb;
    color: var(--ink);
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

.not-found-shell {
    min-height: 100vh;
    padding: 24px;
    display: grid;
    place-items: center;
}

.not-found-card {
    width: min(100%, 620px);
    min-height: 520px;
    padding: clamp(28px, 6vw, 58px);
    border: 1px solid #dbe4ee;
    border-radius: 30px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 70px rgba(13, 67, 82, .14);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.not-found-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: var(--primary-soft);
    inset-inline-end: -130px;
    top: -130px;
    opacity: .85;
}

.not-found-brand {
    position: absolute;
    top: 24px;
    inset-inline-start: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    font-weight: 800;
    color: var(--primary-dark);
}

.not-found-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 13px;
}

.not-found-code {
    font-size: clamp(5rem, 18vw, 9rem);
    line-height: .9;
    font-weight: 900;
    letter-spacing: -.08em;
    color: #dff3f4;
    text-shadow: 0 4px 0 #cce9eb;
    margin-bottom: 18px;
}

.not-found-kicker {
    color: var(--primary);
    font-size: .8rem;
    font-weight: 800;
}

.not-found-card h1 {
    margin: 10px 0 12px;
    font-size: clamp(1.65rem, 4vw, 2.35rem);
}

.not-found-card p {
    margin: 0;
    max-width: 440px;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.9;
}

.not-found-action {
    margin-top: 28px;
    min-height: 48px;
    padding: 10px 20px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #fff;
    font-size: .83rem;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(0, 124, 138, .22);
}

.not-found-action svg {
    width: 1.15rem;
    height: 1.15rem;
}

@media (max-width: 820px) {
    .dashboard-grid-reordered > .dashboard-async-section > .portal-card {
        width: 100%;
    }

    .profile-summary-card .patient-details-wide > div {
        min-height: 70px;
    }

    .not-found-shell {
        padding: 14px;
    }

    .not-found-card {
        min-height: 480px;
        border-radius: 24px;
    }

    .not-found-brand {
        top: 20px;
        inset-inline-start: 20px;
    }
}


/* V13: all dashboard service cards use the sick-leave card height; no inner scrollbars. */
@media (min-width: 821px) {
    .dashboard-grid-reordered {
        --dashboard-service-card-height: 468px;
        grid-auto-rows: var(--dashboard-service-card-height);
        align-items: stretch;
    }

    .dashboard-grid-reordered > .dashboard-async-section {
        height: var(--dashboard-service-card-height);
        min-height: var(--dashboard-service-card-height);
        display: flex;
        min-width: 0;
    }

    .dashboard-grid-reordered > .dashboard-async-section > .portal-card {
        width: 100%;
        height: 100%;
        min-height: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .dashboard-grid-reordered .dashboard-skeleton-panel {
        height: 100%;
        min-height: 100%;
    }

    .dashboard-grid-reordered .timeline-list,
    .dashboard-grid-reordered .activity-list,
    .dashboard-grid-reordered .sick-leaves-list,
    .dashboard-grid-reordered .appointments-preview-stack {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        padding-inline-end: 0;
        scrollbar-width: none;
    }

    .dashboard-grid-reordered .timeline-list::-webkit-scrollbar,
    .dashboard-grid-reordered .activity-list::-webkit-scrollbar,
    .dashboard-grid-reordered .sick-leaves-list::-webkit-scrollbar,
    .dashboard-grid-reordered .appointments-preview-stack::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Five sick leaves fit naturally without scrolling. */
    .dashboard-grid-reordered .sick-leave-row {
        min-height: 63px;
        padding-block: 10px;
    }

    /* Four visits and four lab results remain fully visible at the same card height. */
    .dashboard-grid-reordered .timeline-row,
    .dashboard-grid-reordered .activity-item {
        min-height: 68px;
    }

    .dashboard-grid-reordered .empty-state,
    .dashboard-grid-reordered .empty-list {
        flex: 1 1 auto;
        align-content: center;
        justify-content: center;
    }
}

/* V15 - medical file number recovery by SMS */
.auth-modal-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 15px;
    padding: 11px 13px;
    border: 1px solid #d5ece8;
    border-radius: 13px;
    color: #176b61;
    background: #effaf7;
    font-size: .73rem;
    line-height: 1.75;
}

.auth-modal-security-note span {
    flex: 0 0 auto;
    font-size: 1rem;
}

.auth-lookup-form {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    text-align: start;
}

.auth-lookup-form .auth-input-wrap {
    background: #fff;
}

.auth-lookup-submit {
    width: 100%;
    min-height: 50px;
    border-radius: 13px;
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

.auth-lookup-result {
    min-height: 0;
    margin-top: 13px;
}

.auth-lookup-message {
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
}

.auth-lookup-message.is-loading {
    color: #315f70;
    border-color: #d7e7ee;
    background: #f3f9fb;
}

.auth-lookup-message.is-success {
    color: #176b4e;
    border-color: #cdebdc;
    background: #eefaf4;
}

.auth-lookup-message.is-error {
    color: #a43545;
    border-color: #f0cbd1;
    background: #fff3f5;
}

.auth-lookup-form input:disabled,
.auth-lookup-form button:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.auth-modal-backdrop.is-en .auth-modal {
    text-align: center;
}

@media (max-width: 520px) {
    .auth-modal {
        padding: 27px 18px 20px;
        border-radius: 19px;
    }

    .auth-modal-security-note {
        align-items: flex-start;
    }
}

/* V16 - polished recovery experience, icons and login title sizing */
.auth-brand-middle h1 {
    font-size: clamp(1.68rem, 2.45vw, 2.28rem);
    line-height: 1.42;
    letter-spacing: -.025em;
}

.auth-stroke-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-input-icon {
    color: #5f7e91;
}

.auth-input-icon .auth-stroke-icon {
    width: 21px;
    height: 21px;
}

.auth-button-icon,
.auth-lookup-link-icon,
.auth-modal-security-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.auth-button-icon .auth-stroke-icon {
    width: 20px;
    height: 20px;
    stroke-width: 1.9;
}

.auth-security-icon {
    color: #087c82;
}

.auth-security-icon .auth-stroke-icon {
    width: 23px;
    height: 23px;
    stroke-width: 1.8;
}

.auth-lookup-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: -2px auto 1px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #006d83;
    background: transparent;
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: .75rem;
    font-weight: 800;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.auth-lookup-link:hover {
    border-color: #cce7eb;
    color: #005b70;
    background: #f0fafb;
    text-decoration: none;
    transform: translateY(-1px);
}

.auth-lookup-link-icon {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    color: #007c8a;
    background: #e8f7f8;
}

.auth-lookup-link-icon .auth-stroke-icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.9;
}

.auth-modal-backdrop {
    animation: auth-backdrop-in .2s ease both;
    transition: opacity .18s ease;
}

.auth-modal {
    animation: auth-modal-in .24s cubic-bezier(.2, .8, .2, 1) both;
    transition: opacity .18s ease, transform .18s ease;
}

.auth-modal-backdrop.is-closing {
    opacity: 0;
}

.auth-modal-backdrop.is-closing .auth-modal {
    opacity: 0;
    transform: translateY(8px) scale(.985);
}

@keyframes auth-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes auth-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5c7385;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.auth-modal-close:hover {
    color: #17384a;
    background: #e8f1f4;
    transform: rotate(4deg);
}

.auth-modal-close .auth-stroke-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.auth-modal-icon {
    color: #007c8a;
    background: linear-gradient(145deg, #e9f8f8, #d9f0f2);
    box-shadow: 0 9px 22px rgba(0, 124, 138, .12);
}

.auth-modal-icon .auth-stroke-icon {
    width: 30px;
    height: 30px;
    stroke-width: 1.65;
}

.auth-modal-security-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: #17806f;
    background: rgba(255, 255, 255, .78);
}

.auth-modal-security-icon .auth-stroke-icon {
    width: 18px;
    height: 18px;
    stroke-width: 1.85;
}

.auth-lookup-submit {
    position: relative;
    overflow: hidden;
}

.auth-lookup-submit::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.16) 48%, transparent 76%);
    transform: translateX(-130%);
}

.auth-lookup-submit:not(:disabled):hover::after {
    animation: auth-button-shine .7s ease;
}

@keyframes auth-button-shine {
    to { transform: translateX(130%); }
}

.auth-submit-spinner,
.auth-result-spinner {
    display: none;
    border-radius: 50%;
    border-style: solid;
    animation: auth-spin .72s linear infinite;
}

.auth-submit-spinner {
    width: 20px;
    height: 20px;
    border-width: 2px;
    border-color: rgba(255,255,255,.36);
    border-top-color: #fff;
}

.auth-lookup-submit.is-loading .auth-submit-spinner {
    display: inline-block;
}

.auth-lookup-submit.is-loading .auth-submit-icon {
    display: none;
}

.auth-lookup-submit.is-loading {
    cursor: wait;
    opacity: 1;
    transform: none;
    box-shadow: 0 9px 22px rgba(0, 124, 138, .18);
}

.auth-result-spinner {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-block;
    border-width: 3px;
    border-color: #d5e8ee;
    border-top-color: #087f8b;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

.auth-lookup-result {
    min-height: 0;
    transition: min-height .18s ease;
}

.auth-lookup-message {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 13px 14px;
    text-align: start;
    animation: auth-result-in .22s ease both;
}

@keyframes auth-result-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-result-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(255,255,255,.78);
}

.auth-result-icon .auth-stroke-icon {
    width: 23px;
    height: 23px;
    stroke-width: 1.9;
}

.auth-result-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.auth-result-copy strong {
    font-size: .79rem;
    font-weight: 900;
    line-height: 1.6;
}

.auth-result-copy small {
    color: inherit;
    opacity: .82;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.75;
}

.auth-lookup-message.is-success {
    color: #176b4e;
    border-color: #bfe6d2;
    background: linear-gradient(135deg, #effbf5, #e8f8f0);
}

.auth-lookup-message.is-error {
    color: #a43545;
    border-color: #efc4cc;
    background: linear-gradient(135deg, #fff5f6, #fff0f3);
}

.auth-lookup-message.is-info {
    color: #315f70;
    border-color: #d2e5ec;
    background: linear-gradient(135deg, #f5fafc, #eef7fa);
}

.auth-lookup-message.is-loading {
    color: #315f70;
    border-color: #d4e6ec;
    background: linear-gradient(135deg, #f5fafc, #eef8fa);
}

@media (max-width: 820px) {
    .auth-brand-middle h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 520px) {
    .auth-lookup-message {
        gap: 10px;
        padding: 12px;
    }

    .auth-result-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .auth-result-copy strong {
        font-size: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-modal-backdrop,
    .auth-modal,
    .auth-lookup-message,
    .auth-submit-spinner,
    .auth-result-spinner,
    .auth-lookup-submit::after {
        animation: none !important;
        transition: none !important;
    }
}