:root {
    --eco-bg: #080b10;
    --eco-surface: #111720;
    --eco-surface-2: #171f2b;
    --eco-border: rgba(255, 255, 255, .1);
    --eco-text: #f5f7fa;
    --eco-muted: #98a4b3;
    --eco-pink: #f20c57;
    --eco-pink-soft: #ff4f85;
    --eco-green: #39d98a;
    --eco-radius: 22px;
    --eco-shadow: 0 24px 80px rgba(0, 0, 0, .34);
}

html { min-height: 100%; scroll-behavior: smooth; }
html[data-bs-theme="dark"] { color-scheme: dark; }

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color: var(--eco-text);
    background:
        radial-gradient(circle at 86% 10%, rgba(242, 12, 87, .12), transparent 30rem),
        radial-gradient(circle at 10% 90%, rgba(57, 217, 138, .07), transparent 28rem),
        var(--eco-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html, body { max-width: 100%; overflow-x: hidden; }

a { color: #ff6f9b; }
a:hover { color: #ff9bba; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    border-bottom: 1px solid var(--eco-border);
    background: rgba(8, 11, 16, .86);
    backdrop-filter: blur(18px);
}

.site-header .navbar { min-height: 72px; }
.brand-lockup { display: inline-flex; align-items: center; gap: .75rem; letter-spacing: -.02em; }
.brand-lockup img { object-fit: contain; filter: drop-shadow(0 0 12px rgba(242, 12, 87, .35)); }
.brand-lockup strong { color: var(--eco-pink-soft); }
.navbar .nav-link { color: rgba(255, 255, 255, .72); font-weight: 600; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #fff; }
.dropdown-menu { border: 1px solid var(--eco-border); background: #111720; padding: .5rem; }
.dropdown-item { border-radius: 10px; color: rgba(255,255,255,.82); }
.dropdown-item:hover, .dropdown-item:focus { color: #fff; background: rgba(242, 12, 87, .16); }
.account-nav { display: flex; flex-direction: row; gap: .7rem; }
.account-link { display: flex; align-items: center; gap: .55rem; }
.account-avatar {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    color: #fff; background: linear-gradient(135deg, var(--eco-pink), #8d0ef2); font-size: .78rem;
}

.site-main { min-height: calc(100vh - 145px); padding-top: clamp(1.5rem, 4vw, 3.5rem); padding-bottom: 4rem; }
.site-footer { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1030; padding: 0; border: 0; color: var(--eco-muted); font-size: .72rem; }
.medware-signature { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .2rem; padding: .4rem .5rem; border: 1px solid var(--eco-border); border-radius: 10px; color: var(--eco-muted); background: rgba(8,11,16,.82); box-shadow: 0 10px 28px rgba(0,0,0,.28); backdrop-filter: blur(14px); text-decoration: none; }
.medware-signature span { padding-right: .1rem; font-size: .6rem; line-height: 1; letter-spacing: .04em; }
.medware-signature:hover { color: #fff; border-color: rgba(255,255,255,.24); }

.btn { border-radius: 12px; font-weight: 700; padding: .65rem 1.05rem; }
.btn-sm { border-radius: 10px; padding: .45rem .8rem; }
.btn-brand, .btn-brand:visited {
    color: #fff; border-color: var(--eco-pink); background: linear-gradient(135deg, var(--eco-pink), #c70745);
    box-shadow: 0 10px 30px rgba(242, 12, 87, .22);
}
.btn-brand:hover, .btn-brand:focus { color: #fff; border-color: #ff3978; background: linear-gradient(135deg, #ff3978, #d20a4d); transform: translateY(-1px); }

.heart-hero {
    position: relative; min-height: min(730px, calc(100vh - 145px)); overflow: hidden;
    display: grid; grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr); align-items: center;
    border: 1px solid var(--eco-border); border-radius: 32px; padding: clamp(2rem, 6vw, 5rem);
    background: linear-gradient(135deg, rgba(19, 25, 35, .95), rgba(7, 10, 15, .9)); box-shadow: var(--eco-shadow);
}
.hero-glow { position: absolute; width: 460px; height: 460px; right: 10%; border-radius: 50%; background: rgba(242, 12, 87, .16); filter: blur(90px); }
.hero-copy { position: relative; z-index: 2; max-width: 640px; }
.eyebrow { display: block; margin-bottom: .65rem; color: var(--eco-pink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero-copy h1 { margin: 0; font-size: clamp(3.4rem, 8vw, 7.5rem); font-weight: 900; letter-spacing: -.075em; line-height: .79; }
.hero-copy h1 span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); }
.hero-copy p { max-width: 560px; margin: 2rem 0; color: #b9c1cb; font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.7; }
.heart-stage { position: relative; z-index: 1; display: grid; place-items: center; min-height: 480px; }
.heart-stage img { width: min(100%, 520px); aspect-ratio: 1; object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(0 0 38px rgba(242, 12, 87, .3)); }
.orbit-label { position: absolute; padding: .45rem .8rem; border: 1px solid var(--eco-border); border-radius: 999px; color: var(--eco-muted); background: rgba(8,11,16,.75); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.orbit-one { top: 17%; right: 4%; }
.orbit-two { bottom: 18%; left: 2%; }
.hero-footnote { position: absolute; left: clamp(2rem, 6vw, 5rem); bottom: 1.6rem; display: flex; align-items: center; gap: .6rem; color: var(--eco-muted); font-size: .78rem; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--eco-green); box-shadow: 0 0 0 0 rgba(57,217,138,.5); animation: eco-pulse 2s infinite; }
@keyframes eco-pulse { 70% { box-shadow: 0 0 0 10px rgba(57,217,138,0); } 100% { box-shadow: 0 0 0 0 rgba(57,217,138,0); } }

.page-heading { margin-bottom: 2rem; }
.page-heading h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 850; letter-spacing: -.045em; }
.page-heading p { margin: .75rem 0 0; color: var(--eco-muted); }
.surface-card { border: 1px solid var(--eco-border); border-radius: var(--eco-radius); background: rgba(17, 23, 32, .94); box-shadow: 0 20px 50px rgba(0,0,0,.18); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.metric-card { position: relative; overflow: hidden; min-height: 154px; padding: 1.3rem; border: 1px solid var(--eco-border); border-radius: 18px; background: linear-gradient(145deg, #131a24, #0d121a); }
.metric-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -40px; bottom: -45px; border-radius: 50%; background: rgba(255,255,255,.04); }
.metric-card.accent { border-color: rgba(57,217,138,.28); }
.metric-card span, .metric-card small { display: block; color: var(--eco-muted); }
.metric-card strong { display: block; margin: .3rem 0; font-size: 2.5rem; letter-spacing: -.05em; }
.dashboard-grid { display: grid; grid-template-columns: 1.6fr .8fr; gap: 1rem; margin-top: 1rem; }
.dashboard-panel { padding: clamp(1rem, 2vw, 1.5rem); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.panel-heading h2 { margin: 0; font-size: 1.25rem; }
.status-pill { padding: .38rem .65rem; border-radius: 999px; color: var(--eco-green); background: rgba(57,217,138,.1); font-size: .72rem; }
.activity-chart { display: grid; gap: .85rem; min-height: 250px; align-content: center; }
.chart-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 38px; align-items: center; gap: .75rem; font-size: .82rem; }
.chart-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-track { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.chart-bar { height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, var(--eco-pink), #ff7aa3); transition: width .55s ease; }
.quick-actions { display: flex; flex-direction: column; }
.quick-actions a { display: flex; flex-direction: column; padding: .85rem; border-radius: 12px; color: #fff; text-decoration: none; }
.quick-actions a:hover { background: rgba(255,255,255,.055); }
.quick-actions small { color: var(--eco-muted); }
.modern-table { --bs-table-bg: transparent; --bs-table-color: var(--eco-text); --bs-table-border-color: var(--eco-border); }
.modern-table thead th { color: var(--eco-muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

.auth-page .auth-main { display: grid; min-height: calc(100dvh - 73px); padding-top: 1rem; padding-bottom: 1rem; }
.auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); gap: clamp(2rem, 6vw, 5rem); align-items: center; width: 100%; min-width: 0; max-width: 1050px; margin: auto; }
.auth-intro h1 { max-width: 600px; margin-bottom: 1rem; font-size: clamp(2.6rem, 4.6vw, 4.4rem); font-weight: 900; letter-spacing: -.055em; line-height: .96; }
.auth-intro p { max-width: 540px; color: var(--eco-muted); font-size: 1.08rem; }
.auth-heart { width: 86px; height: 86px; object-fit: cover; border-radius: 50%; mix-blend-mode: screen; }
.auth-card { width: 100%; min-width: 0; max-width: 100%; padding: clamp(1.25rem, 3vw, 1.8rem); }
.auth-card h2 { font-weight: 800; }
.auth-card .form-control, .auth-card .form-select, .surface-card .form-control, .surface-card .form-select {
    min-height: 48px; border: 1px solid var(--eco-border); border-radius: 12px; color: #fff; background-color: rgba(0,0,0,.2);
}
.form-select { color-scheme: dark; }
.form-select option { color: var(--eco-text); background-color: var(--eco-surface); }
.form-select option:checked { color: #fff; background-color: #29384c; }
.auth-card .form-control:focus, .auth-card .form-select:focus { border-color: var(--eco-pink); box-shadow: 0 0 0 .2rem rgba(242,12,87,.14); }
.google-button { display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; min-height: 48px; border: 1px solid var(--eco-border); border-radius: 12px; color: #fff; background: rgba(255,255,255,.04); font-weight: 700; }
.google-button:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.google-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #4285f4; background: #fff; font-weight: 900; }
.auth-divider { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; color: var(--eco-muted); font-size: .78rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--eco-border); }

.modal.fade { z-index: 1055; background: transparent; }
.modal-backdrop { z-index: 1050; }
.modal.fade .modal-dialog { margin-top: 1rem; margin-bottom: 1rem; }
.modal.fade .modal-content {
    display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 2rem); top: auto;
    overflow: hidden; color: var(--eco-text); text-align: left; background: #111720;
    border: 1px solid var(--eco-border); border-radius: 20px; box-shadow: var(--eco-shadow);
}
.modal.fade .modal-header, .modal.fade .modal-footer {
    flex: 0 0 auto; padding: 1rem 1.25rem; background: #111720; border-color: var(--eco-border);
}
.modal.fade .modal-header { min-height: 68px; }
.modal.fade .modal-title { margin: 0; color: #fff; font-size: 1.15rem; font-weight: 800; }
.modal.fade .modal-body { flex: 1 1 auto; min-height: 0; padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; }
.modal.fade .modal-footer { min-height: 72px; gap: .65rem; }
.modal.fade .btn-close { flex: 0 0 auto; }
.modal.fade textarea.form-control { min-height: 130px; }
.validation-summary-valid { display: none; }
.alert.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }
.media-preview-body {
    display: grid;
    place-items: center;
    min-height: min(55dvh, 420px);
    background: #070b10;
}
.media-preview-content {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 68dvh;
    border-radius: 12px;
    object-fit: contain;
    background: #000;
}
.media-preview-content[hidden] { display: none !important; }
.message-content { color: #d1d6dc; line-height: 1.7; }
.message-preview { min-width: 340px; max-width: 720px; line-height: 1.45; }
.nav-pills { gap: .4rem; }
.nav-pills > li > a { display: block; padding: .7rem .85rem; border-radius: 10px; color: var(--eco-muted); text-decoration: none; }
.nav-pills > li.active > a, .nav-pills > li > a:hover { color: #fff; background: rgba(242,12,87,.16); }
.account-heading { margin-bottom: 1.4rem; }
.account-settings { padding: clamp(1rem, 3vw, 1.75rem); }
.manage-nav { flex-wrap: nowrap; width: 100%; }
.manage-nav > li { display: block; width: 100%; }
.manage-nav > li > a { width: 100%; }
.account-settings-content { min-width: 0; }
.account-settings-content > h4:first-child { margin-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { margin-bottom: .35rem; }
.boolean-field {
    display: flex; align-items: center; min-height: 48px; padding: .65rem .85rem;
    border: 1px solid var(--eco-border); border-radius: 12px; background: rgba(0,0,0,.2);
}
.boolean-field .form-check { display: flex; align-items: center; gap: .65rem; padding-left: 0; }
.boolean-field .form-check-input { flex: 0 0 auto; width: 2.45rem; height: 1.3rem; margin: 0; cursor: pointer; }
.boolean-field .form-check-label { cursor: pointer; color: #dfe7f0; }
.table-responsive { max-width: 100%; border: 1px solid var(--eco-border); border-radius: 15px; }
.table-fill { width: 100%; margin: 0; overflow: hidden; border: 0; border-collapse: separate; border-spacing: 0; color: var(--eco-text); background: var(--eco-surface); box-shadow: none; }
.table-fill th { padding: .8rem .75rem; color: #dfe7f0; background: #1a2330; font-weight: 700; text-shadow: none; white-space: nowrap; }
.table-fill td { padding: .75rem; color: #cbd5e1; border-color: var(--eco-border); background: #111720; text-shadow: none; }
.table-fill tbody tr, .table-fill-blue tbody tr { color: var(--eco-text) !important; border-color: var(--eco-border); }
.table-fill tbody tr:nth-child(even) td { background: #141c27; }
.table-fill tbody tr:hover td, .table-fill tbody tr:nth-child(odd):hover td,
.table-fill-blue tbody tr:hover td, .table-fill-blue tbody tr:nth-child(odd):hover td {
    color: #fff !important; background: rgba(242, 12, 87, .16) !important;
}
.table-fill .status-active td { color: #d9fbe9; }
.table-fill .status-inactive td { color: #ff8cac; }
.admin-page { padding: clamp(1rem, 2vw, 1.5rem); }
.admin-page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.admin-page-header h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.3rem); }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: .65rem; margin: 1rem 0; }
.admin-toolbar .form-control, .admin-toolbar .form-select { width: min(100%, 300px); }
.users-page { max-width: 100%; }
.users-table-wrap { width: 100%; max-width: 100%; overflow: auto; max-height: 65dvh; }
.users-table { width: max-content; min-width: 100%; }
.users-table thead th { position: sticky; top: 0; z-index: 2; }
.users-table thead th[onclick^="sortTable"] { cursor: pointer; user-select: none; }
.users-table thead th[onclick^="sortTable"]::after { content: "↕"; margin-left: .45rem; color: var(--eco-muted); font-size: .75rem; opacity: .65; }
.users-table thead th[aria-sort="ascending"]::after { content: "↑"; color: var(--eco-pink-soft); opacity: 1; }
.users-table thead th[aria-sort="descending"]::after { content: "↓"; color: var(--eco-pink-soft); opacity: 1; }
.users-table th, .users-table td { min-width: 110px; }
.users-table th:nth-child(1), .users-table td:nth-child(1) { min-width: 125px; }
.users-table th:nth-child(2), .users-table td:nth-child(2) { min-width: 180px; }
.users-table th:nth-child(5), .users-table td:nth-child(5) { min-width: 230px; }
.admin-permission { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 30px; }
.admin-permission .form-check { display: flex; align-items: center; min-height: 0; padding-left: 2.7rem; }
.admin-permission .form-check-input { width: 2.35rem; height: 1.25rem; margin-top: 0; cursor: pointer; border-color: rgba(255,255,255,.28); background-color: #28313c; box-shadow: none; }
.admin-permission .form-check-input:checked { border-color: var(--eco-green); background-color: var(--eco-green); }
.admin-permission .form-check-input:disabled { cursor: not-allowed; opacity: .6; }
.admin-permission-status { min-width: 3.5rem; color: var(--eco-muted); font-size: .7rem; }
.admin-permission-status.is-saved { color: var(--eco-green); }
.admin-permission-status.is-error { color: #ff6f82; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.summary-card { padding: 1rem 1.2rem; }
.summary-card strong { display: block; font-size: 1.7rem; }
.summary-card span { color: var(--eco-muted); }
.result-match-list { display: grid; gap: .65rem; }
.result-match-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .9rem 1rem; border: 1px solid var(--eco-border); border-radius: 12px; color: #fff; background: #0b1017; }
.result-match-button:hover { border-color: rgba(242,12,87,.55); background: rgba(242,12,87,.12); }
.result-match-button[hidden] { display: none !important; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; width: 100%; max-width: 980px; margin: 0 auto; }
.game-item { display: grid; grid-template-rows: 170px auto; gap: .65rem; min-width: 0; }
.game-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
    width: 100% !important; min-width: 0 !important; max-width: none !important; height: 170px; margin: 0;
    padding: 1.25rem; border: 1px solid var(--eco-border); border-radius: 18px; color: #fff;
    text-align: center; text-decoration: none; background: linear-gradient(145deg, #121923, #0b1017);
    box-shadow: 0 14px 36px rgba(0,0,0,.2); transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
button.game-card:hover { transform: translateY(-2px); border-color: rgba(242,12,87,.55); }
.game-card strong { display: -webkit-box; overflow: hidden; font-size: clamp(1.25rem, 2.5vw, 1.7rem); line-height: 1.15; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.game-card-period { color: #d9e3ee; font-weight: 700; }
.game-card small { color: var(--eco-muted); }
.game-card--active { border-color: rgba(57,217,138,.45); background: linear-gradient(145deg, rgba(12,65,42,.72), #0c1715); }
.game-card--played { border-color: rgba(255,197,61,.42); background: linear-gradient(145deg, rgba(86,67,10,.7), #17150c); }
.game-card--scheduled { border-color: rgba(255,197,61,.3); background: linear-gradient(145deg, #25210f, #12130d); }
.game-card--closed { opacity: .82; border-color: rgba(255,255,255,.12); background: linear-gradient(145deg, #171a20, #0d1015); }
.game-result-link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 42px; border: 0; color: #fff; background: transparent; font-weight: 700; }
.game-result-link:hover { color: var(--eco-pink-soft); }
.game-result-link img { width: 22px; height: 22px; object-fit: contain; }
.game-result-status { display: flex; align-items: center; justify-content: center; min-height: 42px; color: var(--eco-muted); font-size: .85rem; text-align: center; }
.site-footer img { width: auto; max-width: 92px; height: 24px; border-radius: 3px; object-fit: contain; }
.game-flow { width: 100%; max-width: 920px; margin: 0 auto; }
#quiz { position: relative; width: 100%; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--eco-border); border-radius: 22px; background: rgba(17,23,32,.78); }
.quiz-timer { display: flex; justify-content: flex-end; min-height: 62px; }
#timer-circle { flex: 0 0 64px; margin: 0; background: rgba(8,11,16,.72); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.questions { min-height: 0; margin: .75rem 0 1rem; padding: 0 5rem .9rem 0; color: #fff; font-size: clamp(1.2rem, 3vw, 1.75rem); line-height: 1.35; text-align: left; }
.midias { display: grid; place-items: center; width: 100%; }
.quiz-media { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto 1rem; border-radius: 16px; object-fit: contain; background: #05070a; }
.answers { display: grid; gap: .7rem; width: 100%; font-size: 1rem; }
.answers button { min-height: 56px; padding: .85rem 1rem; border: 1px solid var(--eco-border); border-radius: 12px; color: #fff; background: #0b1017; line-height: 1.35; text-align: left; touch-action: manipulation; }
.answers button:hover, .answers button:focus-visible { border-color: rgba(242,12,87,.55); background: rgba(242,12,87,.14); box-shadow: none; }
.checkAnswers { margin-top: 2rem !important; }
.checker { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: .35rem; width: min(100%, 420px); }
.correct, .false, .ignorado { float: none; width: 100%; height: 38px; margin: 0; padding: 0; border-radius: 8px; line-height: 38px; }
.result-page { width: 100%; max-width: 920px; margin: 0 auto; }
.result-question-card { margin-bottom: 1rem; padding: clamp(1rem, 3vw, 1.5rem); text-align: left; }
.result-question-card .quiz-question { margin-bottom: 1rem; font-size: clamp(1.15rem, 3vw, 1.5rem); }
.result-media { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto 1rem; border-radius: 14px; object-fit: contain; }
.result-answer { margin: .55rem 0; padding: .8rem 1rem; border: 1px solid var(--eco-border); border-radius: 12px; color: #d9e3ee; background: #111720; }
.result-answer.correct-answer { color: #9af1c5; border-color: rgba(57,217,138,.36); background: rgba(57,217,138,.08); }
.result-answer.wrong-answer { color: #ff9ab8; border-color: rgba(242,12,87,.35); background: rgba(242,12,87,.08); }
.result-explanation { margin-top: 1rem; padding: 1rem; border-radius: 12px; color: #dce5ef; background: #1a2330; }
.ranking-section { margin-bottom: 1.5rem; }
.ranking-table th, .ranking-table td { text-align: center; }
.ranking-table th:nth-child(2), .ranking-table td:nth-child(2) { text-align: left; }

body.embedded-view { padding: 0; color: #111; background: #fff; }
body.embedded-view .site-header, body.embedded-view .site-footer { display: none; }
body.embedded-view .site-main { max-width: none; padding: 0; }

@media (max-width: 991.98px) {
    .heart-hero { grid-template-columns: 1fr; padding-bottom: 5rem; }
    .heart-stage { min-height: 360px; grid-row: 1; }
    .heart-stage img { width: min(82vw, 420px); }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid, .auth-shell { grid-template-columns: 1fr; }
    .auth-intro { display: none; }
    .navbar-collapse { padding: 1rem 0; }
    .account-nav { align-items: stretch !important; flex-direction: column; margin-top: .8rem; }
    .account-nav form, .account-nav form .btn { width: 100%; }
    .account-link { justify-content: flex-start; }
    .navbar .dropdown-menu { width: 100%; }
    .account-settings { padding: 1rem; }
}

@media (max-width: 575.98px) {
    .site-header .navbar { min-height: 64px; }
    .site-header .container-xl, .site-main.container-xl { padding-left: .85rem; padding-right: .85rem; }
    .site-main { padding-top: .85rem; padding-bottom: 4.5rem; }
    .heart-hero { min-height: calc(100vh - 105px); border-radius: 22px; padding: 1.4rem 1.3rem 5rem; }
    .heart-stage { min-height: 290px; }
    .hero-copy h1 { font-size: 3.35rem; }
    .hero-copy p { margin: 1.25rem 0; }
    .metric-grid { grid-template-columns: 1fr; }
    .chart-row { grid-template-columns: 90px 1fr 28px; }
    .hero-footnote { left: 1.3rem; }
    .summary-grid { grid-template-columns: 1fr; }
    .admin-page-header { align-items: stretch; flex-direction: column; }
    .admin-page-header > .d-flex { width: 100%; }
    .admin-page-header > .d-flex > .btn { flex: 1; }
    .modal.fade .modal-dialog { margin: .5rem; }
    .modal.fade .modal-content { max-height: calc(100dvh - 1rem); border-radius: 16px; }
    .game-item { grid-template-rows: 160px auto; }
    .game-card { height: 160px; }
    .auth-card { padding: 1.1rem; }
    .auth-card .form-control { width: 100%; min-width: 0; }
    .auth-card .form-text { white-space: normal; }
    .game-grid { gap: 1rem; }
    .game-result-link { min-height: 48px; }
    #quiz { padding: .9rem; border-radius: 16px; }
    .quiz-timer { min-height: 58px; }
    #timer-circle { flex-basis: 58px; width: 58px; height: 58px; }
    .questions { margin-top: .4rem; padding-right: 0; font-size: 1.18rem; }
    .quiz-media, .result-media { width: 100%; max-width: 100%; height: auto; max-height: none; border-radius: 12px; }
    .answers button { min-height: 58px; font-size: 1rem; }
    .modal.fade .modal-header, .modal.fade .modal-body, .modal.fade .modal-footer { padding-left: 1rem; padding-right: 1rem; }
    .modal.fade .modal-footer { flex-wrap: nowrap; }
    .modal.fade .modal-footer .btn { flex: 1 1 0; min-height: 46px; }
    .admin-page { padding: .9rem; border-radius: 16px; }
    .admin-toolbar { align-items: stretch; flex-direction: column; }
    .admin-toolbar > *, .admin-toolbar .form-control { width: 100%; max-width: none; }
    .table-fill th, .table-fill td { padding: .65rem; font-size: .82rem; }
    .users-table-wrap { max-height: 58dvh; }
    .site-footer { right: max(.5rem, env(safe-area-inset-right)); bottom: max(.5rem, env(safe-area-inset-bottom)); }
    .medware-signature { padding: .32rem .4rem; opacity: .9; }
    .site-footer img { max-width: 78px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}