/* HAFEZ design system — loaded after app.css and components.css, so it defines the final look.
   Rules of the palette: the brand blue (in shades) for actions and structure, gold ONLY for highlights (points, stars,
   counters, focus glow), red ONLY for errors. Success and warning have no colours of their own: an icon carries them.
   Sizes: 18px base, nothing below ~14px, controls at least 52px tall, so young readers and parents read and tap easily.
   Layout: phone (< 640) bottom bar; tablet (640–899) bottom bar with wider content; desktop (>= 900) side menu. */

/* ================= Typography ================= */

.field-hint, .data-note, .pager-status, .status-line, .stat-label, .tile-text, .self-head small { font-size: 0.875rem; }
.section-title { font-size: 1.05rem; color: var(--text); font-weight: 800; }
.card-title { font-size: 1.15rem; font-weight: 800; }
.muted { color: var(--muted); }
a { text-underline-offset: 3px; }

/* ================= Top bar ================= */

.topbar { min-height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); box-shadow: 0 1px 0 var(--border), 0 4px 14px rgb(15 23 42 / 0.04); }
.brand { font-size: 1.15rem; font-weight: 800; gap: 0.6rem; min-width: 0; }
.brand-logo { width: 38px; height: 38px; border-radius: 11px; }
.brand-logo-org { width: auto; max-width: 84px; height: 38px; }
.brand-name { max-width: 12.5rem; }
@media (max-width: 380px) { .brand { font-size: 0.95rem; } .brand-name { max-width: 9.5rem; } }
.avatar { width: 42px; height: 42px; background: var(--primary); color: var(--primary-contrast); font-size: 1.05rem; }
.topbar-bell { min-width: 48px; min-height: 48px; }
/* Brand at the start; the bell and the account sit together at the end. */
.topbar > :nth-child(2) { margin-inline-start: auto; }
.bell-badge { background: var(--accent); color: var(--on-accent); font-weight: 800; }

/* ================= Navigation ================= */

/* Phone / tablet: bottom bar with Home, three shortcuts and «More». */
.bottomnav {
    box-shadow: 0 -6px 18px rgb(15 23 42 / 0.08);
    padding-inline: 0.25rem;
}

.bottomnav .nav-item {
    position: relative;
    isolation: isolate;
    gap: 0;
    padding-block: 0.4rem 0.3rem;
    font-size: 0.8125rem;
    font-weight: 700;
    justify-content: flex-end;
}

.bottomnav .nav-item .icon { margin-block-end: 0.15rem; }
.bottomnav .nav-item.active { color: var(--primary); }

.bottomnav .nav-item.active::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0.35rem;
    width: 3.75rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--primary-soft);
}

/* Side menu: grouped, always visible from 900px. */
.nav-group { display: grid; gap: 0.125rem; margin-block-end: 0.75rem; }
.nav-group-title { margin: 0.5rem 0.9rem 0.25rem; font-size: 0.85rem; font-weight: 800; color: var(--muted); }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-count {
    margin-inline-start: auto;
    min-width: 1.5rem;
    padding-inline: 0.4rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
}

@media (min-width: 900px) {
    .shell {
        display: grid;
        grid-template-columns: 17rem minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "top top" "side main";
    }

    .topbar { grid-area: top; padding-inline: 1.5rem; }
    .topbar-user-name { display: inline; font-weight: 700; }

    .sidenav {
        grid-area: side;
        display: block;
        position: sticky;
        top: var(--topbar-h);
        align-self: start;
        height: calc(100dvh - var(--topbar-h));
        overflow-y: auto;
        padding: 1rem 0.75rem 2rem;
        background: var(--surface);
        border-inline-end: 1px solid var(--border);
    }

    .sidenav .nav-item {
        position: relative;
        min-height: 48px;
        gap: 0.75rem;
        padding-inline: 0.9rem;
        font-weight: 600;
        border-radius: var(--radius-sm);
    }

    .sidenav .nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 800; }

    .sidenav .nav-item.active::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 10px;
        bottom: 10px;
        width: 4px;
        border-radius: 4px;
        background: var(--accent);
    }

    .bottomnav { display: none; }
    .content { grid-area: main; max-width: none; padding: 2rem max(2.5rem, calc((100% - 80rem) / 2)) 3rem; }
}

@media (min-width: 640px) and (max-width: 899px) {
    .content { max-width: none; padding-inline: max(1.5rem, calc((100% - 60rem) / 2)); }
}

@media (min-width: 1500px) {
    .shell { grid-template-columns: 18rem minmax(0, 1fr); }
    .content { padding-inline: max(3rem, calc((100% - 92rem) / 2)); }
}

/* «More» page (phones). */
.more-group + .more-group { margin-block-start: 1rem; }

/* ================= Page structure ================= */

.page-header { margin-block-end: 1.25rem; }
.page-header h1 { font-size: 1.6rem; }
.back-link { font-size: 0.95rem; font-weight: 600; color: var(--primary); }

.card { border-radius: var(--radius); padding: 1.1rem; }
@media (min-width: 640px) { .card { padding: 1.5rem; } }
.form-card { max-width: 42rem; }

.stack { gap: 1.25rem; }

/* ================= Cards, tiles, stats ================= */

.tiles { gap: 0.875rem; }
.tile { border-radius: var(--radius); min-height: 84px; padding: 1rem 1.1rem; transition: border-color 0.15s, transform 0.15s; }
.tile:hover { border-color: var(--primary); }
.tile-icon { width: 50px; height: 50px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.tile-title { font-weight: 800; font-size: 1.05rem; }

.stat { border-radius: var(--radius); padding: 1rem; gap: 0.15rem; }
.stat-value { font-size: 1.75rem; font-weight: 800; color: var(--primary); }
.stat-label { color: var(--muted); font-weight: 600; }
.stat-ok .stat-value { color: var(--success); }
.stat-warn .stat-value { color: var(--warn); }
.stat-danger .stat-value { color: var(--danger); }
.stat-active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }

.hero {
    position: relative;
    overflow: hidden;
    padding: 1.4rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
    color: var(--on-hero);
}

.hero .btn { color: inherit; border-color: currentColor; background: transparent; }
.hero .badge-role { background: rgb(255 255 255 / 0.2); color: inherit; }
.hero .star { color: var(--accent); }
.hero-number { font-size: 2.9rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-line { display: flex; align-items: baseline; gap: 0.5rem; }
.hero-next { display: grid; gap: 0.4rem; margin-block: 0.5rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.95rem; }
.hero-stats b { font-weight: 800; }
.hero-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.95rem; opacity: 0.95; }

.hero::after {
    content: "";
    position: absolute;
    inset-inline-end: -2.5rem;
    top: -2.5rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.12);
    pointer-events: none;
}

.hero h1 { font-size: 1.7rem; }

.progress { height: 0.8rem; border-radius: 999px; background: rgb(255 255 255 / 0.28); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.progress-plain { background: var(--surface-2); }

.balance-value { color: var(--primary); }
.balance-card { border-radius: var(--radius); }

/* ================= Buttons ================= */

.btn { min-height: var(--tap); padding-inline: 1.25rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 1rem; }
.btn-lg { min-height: 56px; }
.btn-sm { min-height: 44px; padding: 0.25rem 0.9rem; font-size: 0.95rem; }
.btn-primary { background: var(--primary); color: var(--primary-contrast); }
.btn-secondary { background: var(--surface); color: var(--primary); border: 2px solid var(--primary); }
.btn-secondary:hover:not(:disabled) { background: var(--primary-soft); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover:not(:disabled) { filter: brightness(0.95); }
.btn-danger { background: var(--danger); color: var(--danger-soft); }
.btn-ghost { color: var(--danger); }
.btn-ghost-neutral { color: var(--muted); }

/* ================= Forms ================= */

.input, select { border: 2px solid var(--border); border-radius: var(--radius-sm); min-height: var(--tap); font-size: 1rem; }
textarea.input { line-height: 1.6; }
.input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--accent-soft); }
.field > label, .field > legend { font-size: 1rem; font-weight: 700; }
.form { gap: 1.25rem; }
.form-section { color: var(--text); font-weight: 800; font-size: 1.05rem; }
.choice, .tab { min-height: var(--tap); border-width: 2px; }
.tab.active, .tabs .btn-primary { background: var(--primary); color: var(--primary-contrast); }

@media (min-width: 900px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-actions { justify-content: flex-start; }
    .form-actions .btn { min-width: 9rem; }
}

/* ================= Badges and states (icons, not extra colours) ================= */

.badge { font-size: 0.875rem; padding: 0.15rem 0.75rem; font-weight: 700; }
.badge-ok::before, .badge-warn::before, .badge-danger::before { margin-inline-end: 0.35em; font-weight: 800; }
.badge-ok::before { content: "✓"; }
.badge-warn::before { content: "⚠"; }
.badge-danger::before { content: "✕"; }
.badge-role { background: var(--primary-soft); color: var(--primary); }

.alert { font-size: 1rem; border-radius: var(--radius-sm); padding: 0.85rem 1rem; }
.alert-danger::before { content: "✕"; font-weight: 800; }
.alert-success::before { content: "✓"; font-weight: 800; }
.alert-info::before { content: "ℹ"; font-weight: 800; }
.alert-danger { border-inline-start: 4px solid var(--danger); }
.alert-success, .alert-info { border-inline-start: 4px solid var(--primary); }

.points { font-weight: 800; font-variant-numeric: tabular-nums; }
.points-plus { color: var(--ok); }
.points-minus { color: var(--danger); }

/* ================= Lists ================= */

.data-row { border-radius: var(--radius); padding: 1rem 1.1rem; }
.data-primary { font-weight: 800; font-size: 1.05rem; }
.data-secondary { font-size: 0.95rem; color: var(--muted); }
.data-head { font-size: 0.9rem; font-weight: 800; color: var(--muted); }
@media (min-width: 768px) { .data-row { padding-block: 0.85rem; min-height: 60px; } }
.pager { flex-wrap: wrap; gap: 0.75rem; }
.list-toolbar .input { min-height: var(--tap); }
.empty-state { color: var(--muted); }
.empty-state .icon { color: var(--primary); opacity: 0.8; }

/* ================= Dashboard, charts ================= */

.bar-earned, .dot-earned { background: var(--primary); }
.bar-spent, .dot-spent { background: var(--accent); }
.bar-fill { background: var(--primary); }
.chart-legend { font-size: 0.875rem; }
.dash-grid { gap: 1rem; }
.self-card { border-radius: 22px; }
.tap-zone { border-radius: var(--radius); }

/* ================= Sign-in ================= */

.auth-shell { background: linear-gradient(180deg, var(--primary-soft), var(--bg) 55%); }
.auth-card { border-radius: 26px; box-shadow: var(--shadow); }
.auth-brand h1 { font-size: 1.7rem; }

/* ================= Motion ================= */

@media (prefers-reduced-motion: reduce) {
    .tile { transition: none; }
}

/* ================= Home ================= */

.home-hero { margin-block-end: 1.25rem; padding-block: 1.1rem; }
.home-hero p { opacity: 0.92; }
.self-card { margin-block-end: 1rem; gap: 0.4rem; display: grid; }
.self-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stat-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }

.greeting { display: grid; gap: 0.15rem; margin-block-end: 1rem; }
.greeting h1 { font-size: 1.7rem; }
.dash-grid > .card { margin: 0; }

/* Tiles with a title only (no description): centred on the icon. */
.tile:not(:has(.tile-text)) { grid-template-areas: "icon title"; }

/* «More» and shortcut grids: compact vertical tiles, two per row on phones. */
.tiles-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles-compact .tile {
    grid-template-columns: 1fr;
    grid-template-areas: "icon" "title";
    justify-items: center;
    align-content: center;
    gap: 0.5rem;
    min-height: 116px;
    text-align: center;
}
@media (min-width: 640px) { .tiles-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tiles-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Larger mark on the sign-in page (declared after .brand-logo so it wins). */
.brand-logo-lg { width: 84px; height: 84px; border-radius: 24px; }

/* ================= Detail pages and history tables ================= */

/* Wide screens: the participant page uses two columns; the balance and the history span both. */
@media (min-width: 1100px) {
    .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.25rem; }
    .detail-grid > .balance-card, .detail-grid > .detail-wide { grid-column: 1 / -1; }
    .detail-grid .form-card { max-width: none; }
}

/* History tables: the date and the actor get room and never break in the middle of the date. */
.data-secondary bdi { white-space: nowrap; }

@media (min-width: 768px) {
    .data-list-points.cols-5 .data-row { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1.7fr 1.3fr 1.6fr 1fr 1.5fr; }
    .data-list-points.cols-4 .data-row { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1.3fr 1.8fr 1fr 1.5fr; }
}

/* ================= Account menu (avatar dropdown) ================= */

.account-menu { position: relative; }
button.topbar-user { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.account-menu-backdrop { position: fixed; inset: 0; z-index: 30; background: transparent; border: 0; cursor: default; }
.account-menu-panel {
    position: absolute; inset-block-start: calc(100% + 0.25rem); inset-inline-end: 0; z-index: 31;
    width: min(20rem, calc(100vw - 2rem)); padding: 0.5rem 0; box-shadow: 0 12px 32px rgb(15 23 42 / 0.18);
}
.account-menu-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem 0.75rem; }
.account-menu-theme { display: flex; gap: 0.25rem; margin: 0 1rem 0.5rem; padding: 0.25rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.theme-opt {
    flex: 1; min-height: 44px; padding-inline: 0.5rem; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text); font: inherit; font-size: 0.9rem; cursor: pointer;
}
.theme-opt.active { background: var(--primary); color: var(--primary-contrast); font-weight: 700; }
.account-menu-panel .list-menu-item { border-block-end: 0; border-block-start: 1px solid var(--border); }

/* ================= PDF preview popup (wide screens) ================= */

.pdf-modal { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.5rem; background: rgb(15 23 42 / 0.72); }
.pdf-modal-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.pdf-modal-frame { flex: 1; width: min(60rem, 100%); align-self: center; border: 0; border-radius: var(--radius-sm); background: #fff; }
body.modal-open { overflow: hidden; }

/* ================= Participant dashboard: badges and activity ================= */

.badge-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.badge-tile { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.85rem 0.5rem; text-align: center; background: var(--surface-2); border-radius: var(--radius); }
.badge-tile-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-item { display: flex; align-items: center; gap: 0.75rem; min-height: 56px; padding-block: 0.5rem; border-block-end: 1px solid var(--border); }
.activity-item:last-child { border-block-end: 0; }
.activity-icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.activity-achievement { background: var(--accent); color: var(--on-accent); }
.activity-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.activity-amount { font-size: 1.1rem; }

/* ================= Shared Modal (create/edit popup used by list screens) ================= */

body.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(15 23 42 / 0.55); animation: modal-fade 0.15s ease-out; }
.modal-sheet {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 51; display: flex; flex-direction: column;
    max-height: 92vh; max-height: 92dvh; background: var(--surface); border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -8px 32px rgb(15 23 42 / 0.22); animation: modal-sheet-up 0.2s ease-out;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem 1rem 0.5rem; }
.modal-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.modal-close {
    display: grid; place-items: center; width: var(--tap); height: var(--tap); flex: none;
    background: none; border: 0; border-radius: 999px; color: var(--muted); cursor: pointer;
}
.modal-close:hover { background: var(--surface-2); }
.modal-body { flex: 1; overflow-y: auto; padding: 0 1rem 1rem; }
.modal-footer {
    display: flex; gap: 0.5rem; padding: 0.75rem 1rem; padding-block-end: max(0.75rem, env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--border); background: var(--surface); position: sticky; inset-block-end: 0;
}
.modal-footer .btn { flex: 1; }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (min-width: 640px) {
    .modal-sheet {
        inset: 0; margin: auto; inset-block-start: 5vh; inset-block-end: auto;
        width: min(34rem, calc(100vw - 2rem)); max-height: 88vh; border-radius: 1rem;
        animation: modal-pop 0.15s ease-out;
    }
    .modal-footer { border-radius: 0 0 1rem 1rem; }
    @keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
}

/* Quick actions in the top bar: desktop/tablet only (phones already have them in the bottom bar). Tokens keep dark mode automatic. */
.topbar-quick { display: none; align-items: center; gap: 0.5rem; margin-inline-start: auto; }
.topbar-quick .btn { gap: 0.4rem; }
@media (min-width: 640px) { .topbar-quick { display: flex; } }

/* ================= Design adoption (Stitch): hero header, stat tiles, filter chips, toast, skeleton ================= */

.page-hero {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem;
    padding: 1rem 1.1rem; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 4px 12px rgb(15 23 42 / 0.04);
}
.page-hero .page-header-text { flex: 1 1 14rem; min-width: 0; }
.page-hero h1 { font-size: 1.45rem; font-weight: 800; line-height: 1.35; }
.page-hero .page-header-actions { margin-inline-start: auto; }
.page-hero-icon {
    display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px;
    background: var(--primary-soft); color: var(--primary);
}
@media (min-width: 900px) { .page-hero { padding: 1.25rem 1.5rem; } .page-hero h1 { font-size: 1.75rem; } .page-hero-icon { width: 60px; height: 60px; } }

.stat { border: 2px solid var(--border); box-shadow: 0 4px 12px rgb(15 23 42 / 0.04); }
a.stat:hover, button.stat:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgb(11 94 215 / 0.08); }
.stat { transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }

/* Applied-filter chips with «clear all» */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block: 0.5rem 1rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.15rem 0.75rem; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary); font-size: 0.875rem; font-weight: 700; border: 2px solid transparent;
}
.filter-chip button { all: unset; cursor: pointer; display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; border-radius: 50%; }
.filter-chip button:hover, .filter-chip button:focus-visible { background: var(--surface); outline: 2px solid var(--primary); }

/* Toasts: success = green with ✓, danger = red with !, always icon + text */
.toast-host { position: fixed; z-index: 60; inset-block-end: calc(var(--bottomnav-h) + 0.75rem); inset-inline: 0.75rem; display: grid; gap: 0.5rem; pointer-events: none; }
.toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1rem; background: var(--surface);
    border: 2px solid var(--border); border-inline-start-width: 6px; border-radius: var(--radius-sm); box-shadow: 0 16px 40px rgb(11 18 32 / 0.16);
}
.toast-success { border-color: var(--success); color: var(--text); }
.toast-success .icon { color: var(--success); }
.toast-danger { border-color: var(--danger); }
.toast-danger .icon { color: var(--danger); }
@media (min-width: 900px) { .toast-host { inset-block-end: 1.5rem; inset-inline: auto; inset-inline-start: 1.5rem; width: 24rem; } }

/* Loading skeletons (shimmer) */
.skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: skeleton-pulse 1.4s ease-in-out infinite; min-height: 1rem; }
@keyframes skeleton-pulse { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* Stepper (sell flow) */
.stepper { list-style: none; margin: 0 0 1rem; padding: 0.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; background: var(--primary-soft); border-radius: var(--radius); }
.stepper-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem 0.25rem; border-radius: var(--radius-sm); color: var(--muted); text-align: center; font-weight: 700; font-size: 0.875rem; }
.stepper-item.current { background: var(--surface); color: var(--primary); box-shadow: 0 4px 12px rgb(15 23 42 / 0.08); }
.stepper-item.done { color: var(--success); }
.stepper-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid currentColor; font-variant-numeric: tabular-nums; }
.stepper-item.current .stepper-dot { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
@media (min-width: 640px) { .stepper-item { flex-direction: row; justify-content: center; gap: 0.6rem; font-size: 1rem; } }

/* «الأكثر طلباً» badge: gold is for highlights (points, stars) */
.badge-gold { background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; gap: 0.25rem; }

/* Recent operations with undo */
.recent-ops { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.recent-op { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; background: var(--surface-2); border-radius: var(--radius-sm); flex-wrap: wrap; }
.recent-op-text { display: grid; flex: 1 1 10rem; min-width: 0; }

/* Rewards within reach (participant home) */
.near-rewards { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 900px) { .near-rewards { grid-template-columns: repeat(3, 1fr); } }
.near-reward { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); flex-wrap: wrap; }
.near-reward-off { opacity: 0.85; }
.near-reward-image { flex: none; width: 60px; height: 60px; border-radius: 12px; object-fit: cover; }
.near-reward-empty { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.near-reward-body { display: grid; flex: 1 1 8rem; min-width: 0; }

.field-label { display: block; font-size: 1rem; font-weight: 700; margin-block-end: 0.35rem; }

/* Install guide (iPhone): numbered step cards */
.push-install-steps ol { list-style: none; counter-reset: step; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 900px) { .push-install-steps ol { grid-template-columns: repeat(3, 1fr); } }
.push-install-steps li { counter-increment: step; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.8rem; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); }
.push-install-steps li::before { content: counter(step); display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.audience-cards .choice { justify-content: flex-start; }

/* Permission groups as cards (roles editor) */
.permission-cards { display: grid; gap: 0.75rem; margin-block-start: 0.75rem; }
@media (min-width: 900px) { .permission-cards { grid-template-columns: repeat(2, 1fr); } }
.permission-card { margin: 0; padding: 0.9rem; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); align-content: start; }
.permission-group-head { display: flex; align-items: center; gap: 0.5rem; }
.permission-group-head .permission-group-title { flex: 1; font-size: 1rem; font-weight: 800; color: var(--text); }

/* «More» profile card */
.more-profile { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; margin-block-end: 1rem; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.more-profile-text { display: grid; flex: 1; min-width: 0; }
.more-profile:hover { border-color: var(--primary); }


/* Reward cards (design): media with chips, description, price row, action row */
.reward-cell { display: grid !important; grid-template-rows: 1fr auto; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 12px rgb(15 23 42 / 0.04); }
.reward-cell:hover { border-color: var(--primary); }
.reward-cell .reward-card { border: 0; box-shadow: none; background: transparent; border-radius: 0; height: auto; }
.reward-card-media { position: relative; display: block; }
.reward-chip { position: absolute; display: inline-flex; align-items: center; gap: 0.25rem; max-width: 75%; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; background: var(--surface); color: var(--text); border: 2px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reward-chip-top { inset-block-start: 0.5rem; inset-inline-end: 0.5rem; color: var(--primary); }
.reward-chip-popular { inset-block-start: 0.5rem; inset-inline-start: 0.5rem; background: var(--accent-soft); color: var(--accent-text); }
.reward-chip-stock { inset-block-end: 0.5rem; inset-inline-start: 0.5rem; }
.reward-chip-stock.badge-danger { background: var(--danger-soft); color: var(--danger); }
.reward-chip-stock.badge-warn { background: var(--warn-soft); color: var(--warn); }
.reward-card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reward-card-price { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-start: 0.35rem; padding: 0.4rem 0.6rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.reward-card-price .points { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 1.25rem; font-weight: 800; color: var(--accent-text); }
.reward-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 0.75rem 0.75rem; }
.reward-card-actions .btn { flex: 1 1 auto; min-height: 44px; }
.btn-gold { background: var(--accent); color: var(--on-accent); border: 2px solid var(--accent); font-weight: 800; }
.btn-gold:hover { filter: brightness(0.95); }

/* ================= Modern links: no underlines inside content ================= */
/* Plain links (names in lists, tables, cards) read as strong text with a soft pill on hover/focus. */
.content a:not([class]) {
    color: var(--text); font-weight: 700; text-decoration: none;
    padding: 0.1rem 0.4rem; margin-inline: -0.4rem; border-radius: 8px;
    transition: background-color 0.15s, color 0.15s;
}
.content a:not([class]):hover, .content a:not([class]):focus-visible { color: var(--primary); background: var(--primary-soft); }
/* Links written inside running text keep a colour hint (never an underline) */
.content p a:not([class]), .content small a:not([class]), .content .field-hint a:not([class]) { color: var(--primary); }
.content .data-primary a { font-size: 1.05rem; }

/* Top lists: a slimmer, rounder track, value as a small pill */
.bar-list { gap: 0.9rem; }
.bar-list li { gap: 0.35rem 0.5rem; align-items: center; }
.bar-label { font-weight: 700; }
.bar-track { height: 0.6rem; }
.bar-fill { background: linear-gradient(90deg, var(--primary), var(--primary-hover)); }
.bar-value { padding: 0.05rem 0.6rem; background: var(--primary-soft); color: var(--primary); border-radius: 999px; font-weight: 800; }

/* Stock alerts and plain lists as tidy rows */
.plain-list { gap: 0.4rem; }
.plain-list li { justify-content: space-between; padding: 0.55rem 0.75rem; background: var(--surface-2); border-radius: var(--radius-sm); }

/* Participant home (design): icon stat tiles, amounts as pills, two columns on wide screens */
.stat-grid-icons { grid-template-columns: repeat(3, 1fr); }
.stat-icon-tile { position: relative; padding-inline-end: 3.6rem; }
.stat-icon { position: absolute; inset-block-start: 0.75rem; inset-inline-end: 0.75rem; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.stat-icon-tile .stat-value { font-size: 1.6rem; }
@media (max-width: 480px) { .stat-icon-tile { padding-inline-end: 0.75rem; padding-block-start: 3.3rem; } .stat-icon { inset-inline-start: 0.75rem; inset-inline-end: auto; } }
.dash-grid-top { align-items: start; }
.dash-grid-top > .card { margin: 0; }
.activity-amount { padding: 0.1rem 0.7rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.activity-amount.activity-neg { background: var(--danger-soft); color: var(--danger); }

/* Record points (design): balance chip, quick reason tiles, expected balance */
.balance-chip { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.reason-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 640px) { .reason-tiles { grid-template-columns: repeat(3, 1fr); } }
.reason-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-height: 4.2rem; padding: 0.7rem 0.8rem; text-align: start; font: inherit; color: var(--text); background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.reason-tile:hover { border-color: var(--primary); }
.reason-tile.active { border-color: var(--primary); background: var(--primary-soft); }
.reason-tile-points { padding: 0.05rem 0.6rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 0.875rem; }
.reason-tile.active .reason-tile-points { background: var(--primary); color: var(--primary-contrast); }
.expected-balance { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 2px solid var(--border); }
.expected-balance strong { font-size: 1.6rem; font-weight: 800; color: var(--accent-text); }
.expected-balance-bad { border-color: var(--danger); }
.expected-balance-bad strong { color: var(--danger); }

/* Achievement cards (design) */
.badge-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .badge-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .badge-cards { grid-template-columns: repeat(3, 1fr); } }
.badge-card { position: relative; display: grid; gap: 0.5rem; align-content: start; padding: 1.1rem; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgb(15 23 42 / 0.04); }
.badge-card-off { opacity: 0.75; }
.badge-card-medal { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--accent); background: linear-gradient(135deg, var(--accent-soft), var(--surface)); color: var(--accent-text); }
.badge-card-status { position: absolute; inset-block-start: 1.1rem; inset-inline-end: 1.1rem; }
.badge-card-name { margin: 0.25rem 0 0; font-size: 1.15rem; font-weight: 800; }
.badge-card-desc { margin: 0; }
.badge-card-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0; }
.badge-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; padding-top: 0.75rem; border-top: 2px solid var(--border); }

/* ================= List toolbar: search on its own row, filters in a tidy grid below ================= */
.list-toolbar { grid-template-columns: 1fr !important; gap: 0.75rem; }
.list-filters { display: grid !important; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 640px) { .list-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .list-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.list-filters .filter, .list-filters .filter-wide { min-width: 0 !important; width: 100%; }
/* Date filters: caption on top of the field, same height as the selects */
.list-filters label.filter:has(input[type="date"]) { flex-direction: column; align-items: stretch; gap: 0.15rem; }
.list-filters .filter-label { font-size: 0.875rem; font-weight: 700; color: var(--muted); margin: 0; }
.list-filters input[type="date"] { width: 100%; min-width: 0 !important; }

/* Reports on phones/tablets: report types as a swipeable carousel above the form (side by side) */
@media (max-width: 899px) {
    .report-list { display: flex; overflow-x: auto; gap: 0.6rem; padding-block-end: 0.5rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .report-list li { flex: 0 0 min(15rem, 72%); scroll-snap-align: start; }
    .report-list .report-item { height: 100%; }
    .report-item small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Reasons: swipeable carousel of tiles */
.reason-carousel { list-style: none; margin: 0; padding: 0 0 0.5rem; display: flex; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.reason-carousel li { flex: 0 0 min(11rem, 62%); scroll-snap-align: start; }
.reason-carousel .reason-tile { width: 100%; height: 100%; }
@media (min-width: 900px) { .reason-carousel { flex-wrap: wrap; overflow: visible; } .reason-carousel li { flex: 0 0 calc(33.333% - 0.4rem); } }

/* Reward picker (sell): cards with photo */
.pick-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
@media (min-width: 640px) { .pick-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .pick-grid { grid-template-columns: repeat(4, 1fr); } }
.pick-card { position: relative; display: grid; grid-template-rows: auto 1fr; width: 100%; height: 100%; padding: 0; overflow: hidden; text-align: start; font: inherit; color: var(--text); background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.pick-card:hover { border-color: var(--primary); }
.pick-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pick-card-body { display: grid; gap: 0.25rem; padding: 0.6rem 0.75rem 0.75rem; align-content: start; }
.pick-card-check { position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--primary-contrast); }
.pick-actions { position: sticky; inset-block-end: calc(var(--bottomnav-h) + 0.5rem); padding-block: 0.5rem; }
@media (min-width: 900px) { .pick-actions { inset-block-end: 0.5rem; } }

/* Never let a long label push the page wider than the screen (this broke the account page on phones) */
.card .badge, .content .badge { white-space: normal; max-width: 100%; text-align: start; }
.content { min-width: 0; overflow-wrap: break-word; }

/* ================= Spacing system: one rhythm, equal-height cards ================= */
/* Vertical rhythm between the blocks of a page: header, stats, toolbar, lists, cards */
.content > * + * { margin-block-start: 1rem; }
.content > .page-header { margin-block-end: 0; }
.stack > * + * { margin-block-start: 0; }
.stack { display: grid; gap: 1rem; }
.card { margin-block: 0; }
.card + .card { margin-block-start: 0; }
.card-title { margin-block: 0 0.75rem; }
.form { display: grid; gap: 1rem; }
.form-actions { margin-block-start: 0.5rem; }
.data-list, .stat-grid, .filter-chips, .list-toolbar { margin-block: 0; }
.pager { margin-block-start: 0.75rem; }

/* Cards in a row are always the same height, with their action rows pinned to the bottom */
.stat-grid, .tiles, .dash-grid, .reward-grid, .badge-cards, .near-rewards, .permission-cards, .pick-grid { align-items: stretch; }
.stat-grid > *, .tiles > *, .badge-cards > li, .near-rewards > li, .reward-grid > li { height: 100%; }
.dash-grid > .card { height: 100%; }
.badge-card { height: 100%; grid-template-rows: auto auto auto 1fr auto; }
.badge-card-actions { align-self: end; }
.reward-cell { height: 100%; }
.stat { min-height: 5.25rem; align-content: center; }
.stat-grid-icons .stat { min-height: 6rem; }
.tile { height: 100%; }
/* Items inside rows never touch each other */
.data-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.inline-form, .page-header-actions, .form-actions { gap: 0.6rem; }
.badge + .badge { margin-inline-start: 0.35rem; }
.chip-btn + .chip-btn { margin-inline-start: 0; }

/* Cards lay out their children with one consistent gap (nothing glued together) */
.card { display: grid; gap: 0.75rem; align-content: start; }
.card > * { margin-block: 0; }
.card > p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.card h2, .card h3 { margin: 0; }
.card > h3.card-title { margin-block-start: 0.5rem; }

/* One vertical rhythm for every page: the content column is a grid with a fixed gap (no margin fights) */
.content { display: grid; gap: 1rem; align-content: start; grid-template-columns: minmax(0, 1fr); }
.content > * { margin-block: 0 !important; min-width: 0; }
.content > .page-header, .content > .page-hero { margin-block-end: 0 !important; }
@media (min-width: 900px) { .content { gap: 1.25rem; } }

/* Reward cards: price row sits at the same height in every card of a row */
.reward-cell .reward-card { grid-template-rows: auto 1fr; height: 100%; }
.reward-cell .reward-card-body { grid-template-rows: auto auto 1fr; }
.reward-card-price { align-self: end; }

/* Row actions stay on one line (edit + deactivate side by side); the last column sizes to its buttons */
@media (min-width: 900px) {
    .data-actions { flex-wrap: nowrap; white-space: nowrap; }
    .data-list-users .data-row { grid-template-columns: 1.6fr 1.3fr 1.6fr 0.8fr 13rem; }
    .data-list-orgs .data-row { grid-template-columns: 2fr 1.2fr 1fr 0.8fr 13rem; }
    .data-list-roles .data-row { grid-template-columns: 2.2fr 1fr 1fr 0.8fr 13rem; }
    .data-list-permissions .data-row { grid-template-columns: 2.4fr 1fr 0.8fr 13rem; }
    .data-list-4 .data-row { grid-template-columns: 2fr 1fr 0.8fr 13rem; }
    .data-list-units .data-row { grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr 0.8fr 13rem; }
    .data-list-participants .data-row { grid-template-columns: 1.8fr 1.2fr 1fr 0.7fr 0.8fr 13rem; }
}
/* More page: tiles keep an even height and center a lone tile */
.tiles-compact .tile { min-height: 7rem; }

/* Reward detail page: tidy layout — one column until the screen is really wide; hero = photo beside its facts */
@media (min-width: 1024px) { .reward-layout { grid-template-columns: 1fr; } }
@media (min-width: 1500px) { .reward-layout { grid-template-columns: 3fr 2fr; } }
@media (min-width: 700px) {
    .reward-hero { grid-template-columns: minmax(12rem, 20rem) 1fr; align-items: center; gap: 1.25rem; }
    .reward-hero-info { justify-items: start; text-align: start; }
    .reward-hero .reward-image-actions, .reward-hero > .field-hint { grid-column: 1 / -1; justify-content: flex-start; }
}
.reward-hero .reward-image-lg { max-height: 16rem; }
.reward-hero-info .badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.reward-hero-info .balance-value { font-size: 2.5rem; line-height: 1.1; }
/* Option groups never break a word in the middle */
.reward-layout .choice-grid, .choice-grid-3 { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)) !important; }
.choice { white-space: nowrap; }
.reward-layout .stack { align-content: start; }
.reward-layout .stack > .card { height: auto; }
.reward-layout .form-card { max-width: none; width: 100%; }
@media (min-width: 1100px) { .reward-layout .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Words are never cut in the middle: option buttons/tabs/status choices keep their words whole and wrap as a row of full-width items when narrow */
.choice, .tab, .btn, .badge, .chip-btn { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.choice-grid, .choice-grid-2, .choice-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)) !important; }
.status-row, .status-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pick-actions .btn { box-shadow: 0 8px 24px rgb(11 18 32 / 0.25); }

/* Friendly "all good" state (reconciliation and similar) */
.status-hero { justify-items: center; text-align: center; padding-block: 2rem; }
.status-hero-icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--success-soft); color: var(--success); border: 2px solid var(--success); }
.status-hero-title { font-size: 1.35rem; font-weight: 800; }
.status-hero-stats { width: 100%; max-width: 26rem; grid-template-columns: repeat(2, 1fr); margin-block-start: 0.5rem; }
.status-hero-stats .stat { text-align: center; justify-items: center; }

/* Section bar: title + primary action on one row (wraps on phones) */
.section-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.section-bar .card-title { margin: 0; }
@media (max-width: 639px) { .section-bar .btn { width: 100%; } }
/* Whatever follows a toolbar / chips keeps a clear gap, and stacked list rows are separate cards */
.list-toolbar + *, .filter-chips + * { margin-block-start: 1rem; }
.stack > .list-toolbar, .stack > .data-list { margin-block: 0; }
@media (max-width: 899px) { .data-list { display: grid; gap: 0.75rem; } .data-list .data-row { border-radius: var(--radius); } }

/* Pictures of badges and users: round/cropped, icon or initial when there is none */
.owner-image { display: inline-grid; place-items: center; flex: none; object-fit: cover; overflow: hidden; }
.owner-image-empty { font-weight: 800; }
img.owner-image.avatar, .avatar img.owner-image { border-radius: 50%; }
.badge-card-medal.owner-image, .badge-tile-icon.owner-image { border-radius: 50%; }
img.badge-card-medal { width: 64px; height: 64px; border: 2px solid var(--accent); }
img.badge-tile-icon { width: 56px; height: 56px; border: 2px solid var(--accent); }
.image-picker { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.image-picker-preview { width: 96px; height: 96px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); border: 2px solid var(--border); font-size: 2.2rem; }
.image-picker-preview.owner-image-empty { background: var(--accent-soft); color: var(--accent-text); }
.image-picker-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.user-cell { display: flex; align-items: center; gap: 0.6rem; }
.user-cell .avatar { width: 40px; height: 40px; font-size: 1rem; }

/* Notice / device rows: compact, evenly spaced, long text wraps inside the row */
.notice-list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.notice-list .notice { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--radius-sm); min-width: 0; }
.notice-list .notice-body { flex: 1; min-width: 0; display: grid; gap: 0.15rem; overflow-wrap: anywhere; }
.device-remove { flex: none; min-width: 44px; padding-inline: 0.6rem; color: var(--danger); }
.card .notice-list { margin-block-start: 0.25rem; }

/* Option cards: long labels wrap between words inside the card (never overflow, never cut a word) */
.choice { white-space: normal; min-width: 0; text-align: start; line-height: 1.35; }
.choice > span, .choice { overflow-wrap: normal; }
.choice-grid { align-items: stretch; }

/* User-written text (messages, names, notes) can hold very long unbroken strings: it wraps anywhere inside its box and never widens the page */
.data-row, .data-primary, .data-secondary, .data-note, .card p, .card small, .card h2, .card h3, .notice-body, .activity-text, .badge-card-desc, .reward-card-desc { overflow-wrap: anywhere; min-width: 0; }
.data-row > * { min-width: 0; }
.choice, .btn, .badge, .tab, .chip-btn { overflow-wrap: normal; }
html, body { max-width: 100%; overflow-x: clip; }
.shell, .content { max-width: 100vw; }

/* Text size: default follows the device at 90% (Cairo looks larger than system fonts; see app.css); the user can pick a fixed step (80% / 112.5% / 130%) */
html[data-text-size="small"] { font-size: 80%; }
html[data-text-size="large"] { font-size: 112.5%; }
html[data-text-size="xlarge"] { font-size: 130%; }
.account-menu-textsize { margin-block-start: 0.5rem; }
.account-menu-textsize .theme-opt { font-size: 0.85rem; padding-inline: 0.4rem; }

/* ================= News: banner on the home page and the news screen ================= */
.news-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); }
.news-banner { position: relative; overflow: hidden; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgb(15 23 42 / 0.04); }
.news-banner-slide { display: grid; color: var(--text); text-decoration: none; }
@media (min-width: 700px) { .news-banner-slide:has(.news-image) { grid-template-columns: minmax(12rem, 22rem) 1fr; align-items: stretch; } .news-banner .news-image { height: 100%; aspect-ratio: auto; } }
.news-banner-text { display: grid; gap: 0.35rem; align-content: center; padding: 1rem 1.25rem 3.4rem; }
.news-banner-kicker { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--primary); font-weight: 800; }
.news-banner-title { font-size: 1.25rem; font-weight: 800; line-height: 1.4; }
.news-banner-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
.news-banner-controls { position: absolute; inset-block-end: 0.6rem; inset-inline: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; pointer-events: none; }
.news-banner-controls > * { pointer-events: auto; }
.news-banner-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); color: var(--primary); cursor: pointer; }
.news-banner-btn:hover, .news-banner-btn:focus-visible { border-color: var(--primary); }
.news-banner-dots { display: inline-flex; gap: 0.4rem; }
.news-banner-dot { width: 12px; height: 12px; padding: 0; border-radius: 999px; border: 2px solid var(--primary); background: transparent; cursor: pointer; }
.news-banner-dot.active { width: 28px; background: var(--primary); }

.news-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 700px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; height: 100%; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgb(15 23 42 / 0.04); }
.news-card-pinned { border-color: var(--accent); }
.news-card-body { display: grid; gap: 0.5rem; align-content: start; padding: 1rem; }
.news-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.news-card-title { margin: 0; font-size: 1.15rem; font-weight: 800; }
.news-card-text { margin: 0; white-space: pre-line; }
.news-card-text-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-units { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.news-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.75rem; border-top: 2px solid var(--border); }

/* Participant photo next to names */
.self-who { display: flex; align-items: center; gap: 0.75rem; }
.self-who > span { display: grid; gap: 0.1rem; }
.self-photo-link { color: inherit; opacity: 0.9; font-size: 0.85rem; font-weight: 700; }
.data-primary .avatar { width: 36px; height: 36px; font-size: 0.95rem; margin-inline-end: 0.4rem; vertical-align: middle; }

/* Periods */
.period-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; padding: 0.6rem 0.9rem; background: var(--primary-soft); color: var(--primary); border-radius: var(--radius-sm); font-weight: 700; }
.period-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) { .period-grid { grid-template-columns: repeat(2, 1fr); } }
.period-card { display: grid; gap: 0.6rem; align-content: start; height: 100%; padding: 1.1rem; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgb(15 23 42 / 0.04); }
.period-card-active { border-color: var(--success); }
.period-card-title { margin: 0; font-size: 1.2rem; font-weight: 800; }
.period-dates { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0; color: var(--muted); }
.period-counts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.period-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-self: end; padding-top: 0.75rem; border-top: 2px solid var(--border); }

/* ================= News banner as an endless marquee ================= */
/* Overrides the earlier single-slide banner: cards side by side on a track that slides forever. The direction is the
   sign of the end translate (positive = moves toward the right, matching right-to-left reading). */
.news-marquee { position: relative; overflow: hidden; direction: rtl; background: transparent; border: 0; box-shadow: none; border-radius: var(--radius); }
.news-track { display: flex; gap: 1rem; width: max-content; animation: news-slide var(--news-duration, 36s) linear infinite; will-change: transform; }
.news-marquee:hover .news-track, .news-marquee:focus-within .news-track, .news-marquee:active .news-track { animation-play-state: paused; }
@keyframes news-slide { from { transform: translateX(0); } to { transform: translateX(calc(50% + 0.5rem)); } }
.news-marquee-still .news-track { width: 100%; animation: none; }
.news-marquee-still .news-slide { width: 100%; }
.news-slide { flex: none; display: grid; grid-template-rows: auto 1fr; width: min(82vw, 22rem); overflow: hidden; color: var(--text); text-decoration: none; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgb(15 23 42 / 0.04); transition: border-color 0.15s; }
.news-slide:hover, .news-slide:focus-visible { border-color: var(--primary); }
.news-slide .news-image { aspect-ratio: 16 / 9; height: auto; }
.news-slide-text { display: grid; gap: 0.3rem; align-content: start; padding: 0.8rem 1rem 1rem; }
@media (min-width: 900px) { .news-slide { width: 24rem; } .news-marquee-still .news-slide { width: min(100%, 34rem); } }
@media (prefers-reduced-motion: reduce) {
    .news-marquee { overflow-x: auto; }
    .news-track { animation: none; }
}

/* Marquee driven by scrolling (marquee.js): drag with the mouse, swipe with a finger, or let it move by itself */
.news-marquee { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; cursor: grab; }
.news-marquee::-webkit-scrollbar { display: none; }
.news-marquee.is-dragging { cursor: grabbing; user-select: none; }
.news-marquee .news-track { animation: none !important; transform: none !important; }
.news-marquee-still { overflow-x: hidden; cursor: default; }
.news-slide img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* Student home: no badge counter; every badge is a card with its picture (or medal) and name */
.stat-grid-icons { grid-template-columns: repeat(2, 1fr); }
.badge-gallery { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); align-items: stretch; }
.badge-tile { height: 100%; justify-content: flex-start; gap: 0.4rem; padding: 1rem 0.75rem; background: var(--surface); border: 2px solid var(--border); box-shadow: 0 4px 12px rgb(15 23 42 / 0.04); }
.badge-tile-icon { width: 4.5rem; height: 4.5rem; border: 2px solid var(--accent); }
img.badge-tile-icon { width: 4.5rem; height: 4.5rem; object-fit: cover; }
.badge-tile strong { font-size: 1.05rem; }
.dash-grid-one { grid-template-columns: 1fr !important; }

.news-image-empty { display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--primary-soft), var(--surface-2)); color: var(--primary); }

/* Bottom bar: the active pill sits exactly behind the icon (it used to float above it) */
.bottomnav .nav-item.active::before { content: none; display: none; }
.bottomnav .nav-item { justify-content: center; gap: 0.15rem; }
.bottomnav .nav-item .icon { box-sizing: content-box; padding: 0.3rem 1.1rem; border-radius: 999px; margin-block-end: 0; transition: background-color 0.15s; }
.bottomnav .nav-item.active .icon { background: var(--primary-soft); }

/* Success messages fade away by themselves (they used to stay on screen forever) */
.alert-success { max-height: 14rem; overflow: hidden; animation: alert-fade 0.5s ease 6s forwards; }
@keyframes alert-fade { to { opacity: 0; max-height: 0; padding-block: 0; margin-block: 0; border-width: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .alert-success { animation-duration: 0.01s; } }
/* Dashboard tiles are links to their lists */
a.stat { color: inherit; text-decoration: none; }
a.stat:hover, a.stat:focus-visible { border-color: var(--primary); }

/* "What is this?" boxes */
.info-box { background: var(--primary-soft); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; }
.info-box summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 700; color: var(--primary); list-style: none; }
.info-box summary::-webkit-details-marker { display: none; }
.info-box-body { margin-top: 0.5rem; color: var(--text); line-height: 1.7; }

/* Report cards (phone carousel and desktop list): text never overlaps */
.report-item { display: flex; flex-direction: column; justify-content: flex-start; gap: 0.3rem; line-height: 1.5; min-height: 4.5rem; overflow: visible; }
.report-item small { display: block; overflow: visible; -webkit-line-clamp: unset; }
@media (max-width: 899px) { .report-list li { display: flex; } .report-list .report-item { height: auto; width: 100%; } }

/* Rows with several action buttons wrap instead of overlapping */
.data-actions { flex-wrap: wrap !important; row-gap: 0.4rem; }
.data-actions > * { flex: 0 0 auto; }

/* Period separator inside the point history */
.period-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.2rem; color: var(--primary); font-weight: 700; }
.period-divider::before, .period-divider::after { content: ""; flex: 1; height: 2px; background: var(--border); }

/* Platform report: three summary tiles */
.platform-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.platform-stats .stat { display: flex; flex-direction: column; gap: 0.2rem; align-items: center; text-align: center; padding: 0.7rem 0.4rem; }
.platform-stats .stat strong { font-size: 1.6rem; }
@media (min-width: 900px) { .data-list-platform .data-row { grid-template-columns: 2fr 0.8fr 1.2fr 1.2fr 1fr; } }
@media (min-width: 900px) { .mobile-label { display: none; } }

/* Reasons: one full-width row each, stacked (no sideways scrolling) */
.reason-carousel { flex-direction: column; overflow: visible; scroll-snap-type: none; }
.reason-carousel li, .reason-carousel li { flex: 0 0 auto; width: 100%; }
.reason-carousel .reason-tile { flex-direction: row; align-items: center; justify-content: space-between; min-height: 3.4rem; width: 100%; }
@media (min-width: 900px) { .reason-carousel li { flex: 0 0 auto; width: 100%; } }

/* Points: number in the middle, + on the right, - on the left */
.points-stepper { display: flex; align-items: stretch; gap: 0.6rem; }
.points-stepper .input-points { flex: 1; min-width: 0; text-align: center; font-size: 1.4rem; font-weight: 800; }
.stepper-btn { flex: 0 0 4rem; font: inherit; font-size: 1.8rem; font-weight: 800; line-height: 1; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--primary-soft); color: var(--primary); cursor: pointer; }
.stepper-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.check-row { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; cursor: pointer; }
.check-row input { width: 1.3rem; height: 1.3rem; }

/* One icon per message (the component already draws it); nicer success message */
.alert-danger::before, .alert-success::before, .alert-info::before { content: none; }
.alert-success {
    display: flex; align-items: center; gap: 0.75rem; font-weight: 700; padding: 0.7rem 1rem;
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); border-inline-start-width: 1px;
    border-radius: 999px; box-shadow: 0 4px 14px color-mix(in srgb, var(--success) 18%, transparent);
    animation: alert-pop 0.35s ease, alert-fade 0.5s ease 6s forwards;
}
.alert-success .icon, .alert-success svg { flex: 0 0 auto; padding: 0.25rem; box-sizing: content-box; border-radius: 50%; background: var(--success); color: var(--surface, #fff); }
@keyframes alert-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }

/* New participant: generated sign-in details */
.cred { display: grid; gap: 0.35rem; padding: 0.7rem 0.9rem; margin-block: 0.6rem; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--primary-soft); }
.cred > div { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.cred > div span { color: var(--text-muted, inherit); }
.cred .cred-value { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.cred .cred-actions { justify-content: flex-start; }
.copy-btn { display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; min-height: 36px; padding: 0.15rem 0.75rem; border-radius: 999px; border: 1.5px solid var(--primary); background: var(--surface); color: var(--primary); font-size: 0.85rem; font-weight: 700; line-height: 1; cursor: pointer; }
.copy-btn:hover { background: var(--primary-soft); }
.copy-btn.copied { background: var(--success); border-color: var(--success); color: #fff; }
.cred bdi { font-weight: 800; font-family: ui-monospace, Consolas, monospace; user-select: all; }

/* Points confirmation toast: check badge, participant + balance, big signed amount, countdown bar */
.toast-rich { position: relative; overflow: hidden; align-items: center; padding: 0.85rem 1rem; border-width: 1px; border-inline-start-width: 1px; border-radius: 1.1rem; animation: toast-in 0.35s cubic-bezier(.2,.9,.3,1.2); }
.toast-rich .toast-badge { flex: 0 0 auto; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--success); color: #fff; }
.toast-rich .toast-badge .icon { color: #fff; }
.toast-rich .toast-body { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.toast-rich .toast-title { font-size: 1rem; }
.toast-rich .toast-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-rich .toast-detail { color: var(--text-muted, var(--muted)); }
.toast-rich .toast-amount { font-size: 1.5rem; font-weight: 800; padding: 0.15rem 0.75rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.toast-plus { border-color: var(--success); } .toast-plus .toast-amount { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.toast-minus { border-color: var(--danger); } .toast-minus .toast-badge { background: var(--danger); } .toast-minus .toast-amount { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.toast-close { position: absolute; inset-block-start: 0.2rem; inset-inline-start: 0.35rem; border: 0; background: none; color: var(--muted, inherit); font-size: 0.9rem; cursor: pointer; opacity: 0.7; }
.toast-timer { position: absolute; inset-inline: 0; inset-block-end: 0; height: 4px; background: var(--success); transform-origin: right; animation: toast-timer 6s linear forwards; }
.toast-minus .toast-timer { background: var(--danger); }
@keyframes toast-timer { to { transform: scaleX(0); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast-rich, .toast-timer { animation: none; } }

/* Confirm dialog (unsaved changes / ConfirmButton) — replaces the browser's confirm box */
.confirm-layer { position: fixed; inset: 0; z-index: 70; background: rgb(15 23 42 / 0.6); animation: modal-fade 0.15s ease-out; }
.confirm-dialog {
    position: fixed; z-index: 71; inset-inline: 1rem; inset-block-start: 50%; transform: translateY(-50%); max-width: 26rem; margin-inline: auto;
    display: grid; gap: 0.6rem; justify-items: center; text-align: center; padding: 1.5rem 1.25rem 1.25rem;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgb(11 18 32 / 0.35); animation: confirm-pop 0.22s cubic-bezier(.2,.9,.3,1.2);
}
.confirm-dialog h3 { margin: 0; font-size: 1.2rem; }
.confirm-dialog p { margin: 0; color: var(--muted, inherit); line-height: 1.7; }
.confirm-icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: color-mix(in srgb, var(--warning, #f59e0b) 20%, transparent); color: var(--warning, #d97706); }
.confirm-icon-danger { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.confirm-actions { display: grid; gap: 0.5rem; width: 100%; margin-block-start: 0.5rem; }
.btn-danger-text { color: var(--danger); border-color: var(--danger); }
@keyframes confirm-pop { from { opacity: 0; transform: translateY(-46%) scale(0.95); } to { opacity: 1; transform: translateY(-50%); } }
.sell .search-box, .sell .search-box .input { width: 100%; }
.sell { width: 100%; }

/* System logo (inline SVG) and the footer */
.system-logo { display: block; flex: none; }
.brand .system-logo.brand-logo { border-radius: 0; background: none; }
.system-logo.brand-logo-lg { margin-inline: auto; width: 84px; height: 84px; border-radius: 0; }
.app-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
    margin-block-start: 2.5rem; padding: 1rem 0.25rem 0.5rem; border-block-start: 1px solid var(--border);
    color: var(--muted); font-size: 0.85rem;
}
.app-footer-brand { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 800; color: var(--text); }
.app-footer-by strong { color: var(--primary); font-weight: 800; }

/* Simple toast (saved / failed): same look as the points toast - round badge, text, close button, countdown bar */
.toast-simple { position: relative; overflow: hidden; align-items: center; padding: 0.8rem 1rem; border-width: 1px; border-inline-start-width: 1px; border-radius: 1.1rem; animation: toast-in 0.35s cubic-bezier(.2,.9,.3,1.2); }
.toast-simple .toast-badge { flex: 0 0 auto; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--success); color: #fff; }
.toast-simple .toast-badge .icon { color: #fff; }
.toast-simple.toast-danger .toast-badge { background: var(--danger); }
.toast-simple .toast-text { flex: 1; min-width: 0; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.toast-close-inline { position: static; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; }
.toast-close-inline:hover { background: var(--primary-soft); opacity: 1; }
.toast-simple.toast-danger .toast-timer { background: var(--danger); }
@media (prefers-reduced-motion: reduce) { .toast-simple { animation: none; } }