/* ============================================================================
   EduTaq — Dashboard Design System
   Supplemental stylesheet for tutor & student dashboards (and shared chrome).

   Load AFTER static/css/tailwind.css and static/css/admin.css
   (see templates/base.html). All rules are namespaced under `.edq-*`
   (plus a shared `:focus-visible` polish), so nothing here interferes with
   the rest of the site. The dashboards intentionally use this vocabulary
   instead of ad-hoc Tailwind utilities (the shipped tailwind.css is a stale
   purged build and must not be treated as a source of truth).
   ========================================================================== */

:root {
    --edq-bg: #ffffff;
    --edq-page: #faf8f5;
    --edq-ink: #191512;
    --edq-ink-2: #4e463f;
    --edq-ink-3: #8a8178;
    --edq-line: #e9e3dc;
    --edq-line-2: #d9d0c6;
    --edq-red: #c3142f;
    --edq-red-deep: #9e0e24;
    --edq-red-soft: #fbeeF0;
    --edq-red-line: #f3d3d8;
    --edq-green: #0e7a52;
    --edq-green-soft: #e8f5ef;
    --edq-green-line: #c8e6d7;
    --edq-amber: #a85a00;
    --edq-amber-soft: #fcf3e4;
    --edq-amber-line: #f0ddbb;
    --edq-gold: #f0b429;
    --edq-radius: 18px;
    --edq-shadow-sm: 0 10px 28px -14px rgba(25, 21, 18, 0.16);
    --edq-shadow: 0 24px 60px -24px rgba(25, 21, 18, 0.22);
    --edq-ff-body: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --edq-ff-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
}

:focus-visible {
    outline: 2px solid var(--edq-red);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   1. Page shell
   --------------------------------------------------------------------------- */
.edq-page {
    background: var(--edq-page);
    padding: 0 0 3rem;
    min-height: 100%;
}

.edq-wrap {
    max-width: 1120px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   2. Typography helpers
   --------------------------------------------------------------------------- */
.edq-overline {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--edq-ink-3);
}

.edq-h1 {
    font-family: var(--edq-ff-display);
    font-size: clamp(1.6rem, 4.5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--edq-ink);
}

.edq-h2 {
    font-family: var(--edq-ff-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--edq-ink);
}

.edq-h3 {
    font-family: var(--edq-ff-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--edq-ink);
}

.edq-soft { color: var(--edq-ink-2); }
.edq-muted { color: var(--edq-ink-3); }
.edq-strong { font-weight: 700; color: var(--edq-ink); }
.edq-text-red { color: var(--edq-red); }
.edq-text-red:hover { color: var(--edq-red-deep); }
.edq-text-green { color: var(--edq-green); }
.edq-text-amber { color: var(--edq-amber); }
.edq-text-center { text-align: center; }
.edq-cap {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.edq-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   3. Spotlight / greeting hero
   --------------------------------------------------------------------------- */
.edq-hero {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 2.4rem 0 1.25rem;
    border-bottom: 1px solid var(--edq-line);
    margin-bottom: 1.6rem;
}

@media (min-width: 768px) {
    .edq-hero {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding-top: 3rem;
    }
}

.edq-hero-overline { color: var(--edq-red); }
.edq-hero-title { margin-top: 0.35rem; }
.edq-hero-sub { color: var(--edq-ink-3); margin-top: 0.4rem; font-size: 0.95rem; }
.edq-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---------------------------------------------------------------------------
   4. Cards
   --------------------------------------------------------------------------- */
.edq-card {
    background: var(--edq-bg);
    border: 1px solid var(--edq-line);
    border-radius: var(--edq-radius);
    box-shadow: var(--edq-shadow-sm);
}

.edq-card--pad { padding: 1.25rem; }
@media (min-width: 768px) {
    .edq-card--pad { padding: 1.5rem; }
}

.edq-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem 0.9rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--edq-line);
}

.edq-card-head + .edq-card-body { padding-top: 1rem; }
.edq-card-title { font-size: 1.2rem; }
.edq-card-sub { color: var(--edq-ink-3); font-size: 0.85rem; }

.edq-rule { border: 0; border-top: 1px solid var(--edq-line); margin: 0; }

/* ---------------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------------- */
.edq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 1.3rem;
    border-radius: 999px;
    font-family: var(--edq-ff-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.25s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.edq-btn:hover { text-decoration: none; transform: translateY(-1.5px); }
.edq-btn:active { transform: translateY(0.5px) scale(0.985); transition-duration: 0.06s; }
.edq-btn:disabled { opacity: 0.55; pointer-events: none; }

/* Liquid shine that sweeps across filled buttons on hover */
.edq-btn--primary::after,
.edq-btn--dark::after,
.edq-wiz-next::after {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -70%;
    width: 45%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.32) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.32) 55%, transparent 100%);
    transform: skewX(-20deg);
    opacity: 0;
    pointer-events: none;
}
.edq-btn--primary:hover::after,
.edq-btn--dark:hover::after,
.edq-wiz-next:hover::after {
    opacity: 1;
    animation: edq-shine 0.75s cubic-bezier(0.3, 0.6, 0.4, 1) forwards;
}
@keyframes edq-shine {
    from { left: -70%; }
    to { left: 135%; }
}

.edq-btn-ico, .edq-chip-ico, .edq-badge-ico, .edq-contact-ico, .edq-wiz-note-ico { flex: none; }
.edq-btn-ico { width: 15px; height: 15px; }
.edq-chip-ico { width: 18px; height: 18px; }
.edq-badge-ico { width: 11px; height: 11px; }
.edq-contact-ico { width: 16px; height: 16px; }
.edq-wiz-note-ico { width: 15px; height: 15px; margin-top: 2px; }

/* Direct-access zap softly pulses — the lead is "live" */
.edq-zap { animation: edq-zap-pulse 2.4s ease-in-out infinite; }
@keyframes edq-zap-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.edq-btn--primary { background: var(--edq-red); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 22px -12px rgba(195, 20, 47, 0.55); }
.edq-btn--primary:hover { background: var(--edq-red-deep); color: #fff; }

.edq-btn--dark { background: var(--edq-ink); color: #fff; }
.edq-btn--dark:hover { background: #000; color: #fff; }

.edq-btn--outline { border-color: var(--edq-line-2); background: #fff; color: var(--edq-ink); }
.edq-btn--outline:hover { border-color: var(--edq-ink); color: var(--edq-ink); }

.edq-btn--ghost { background: var(--edq-page); border: 1px solid var(--edq-line); color: var(--edq-ink-2); }
.edq-btn--ghost:hover { background: var(--edq-ink); border-color: var(--edq-ink); color: #fff; }

.edq-btn--danger { background: var(--edq-red-soft); border-color: var(--edq-red-line); color: var(--edq-red); }
.edq-btn--danger:hover { background: var(--edq-red); border-color: var(--edq-red); color: #fff; }

.edq-btn--white { background: #fff; color: var(--edq-red); }
.edq-btn--white:hover { background: var(--edq-red-soft); color: var(--edq-red); }

.edq-btn--sm { min-height: 38px; padding: 0.4rem 0.9rem; font-size: 0.88rem; }
.edq-btn--block { width: 100%; }

/* Outline button for dark surfaces (referral strip) — plain --outline has a
   white background, which turned its white label invisible on the dark card. */
.edq-btn--on-dark { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.edq-btn--on-dark:hover { background: #fff; border-color: #fff; color: var(--edq-ink); }

/* ---------------------------------------------------------------------------
   6. Badges
   --------------------------------------------------------------------------- */
.edq-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.edq-badge--live { color: var(--edq-green); background: var(--edq-green-soft); border-color: var(--edq-green-line); }
.edq-badge--pending { color: var(--edq-amber); background: var(--edq-amber-soft); border-color: var(--edq-amber-line); }
.edq-badge--attention { color: var(--edq-red); background: var(--edq-red-soft); border-color: var(--edq-red-line); }
.edq-badge--neutral { color: var(--edq-ink-2); background: var(--edq-page); border-color: var(--edq-line); }
.edq-badge--muted { color: var(--edq-ink-3); background: transparent; border-color: var(--edq-line); }
.edq-badge--pro { color: #fff; background: var(--edq-ink); border-color: var(--edq-ink); }

/* ---------------------------------------------------------------------------
   7. Stats
   --------------------------------------------------------------------------- */
.edq-statgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .edq-statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}

.edq-stat {
    background: var(--edq-bg);
    border: 1px solid var(--edq-line);
    border-radius: var(--edq-radius);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 100px;
    box-shadow: var(--edq-shadow-sm);
}

.edq-stat--accent { border-top: 3px solid var(--edq-red); }
.edq-stat-num {
    font-family: var(--edq-ff-display);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--edq-ink);
}
.edq-stat-num small { font-family: var(--edq-ff-body); font-size: 0.85rem; font-weight: 600; color: var(--edq-ink-3); }
.edq-stat-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--edq-ink-3);
}
.edq-stat-sub { font-size: 0.78rem; color: var(--edq-ink-2); }

/* ---------------------------------------------------------------------------
   8. Layout helpers (self-contained grid + flex utilities)
   --------------------------------------------------------------------------- */
.edq-bigrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 1024px) { .edq-bigrid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

.edq-splits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 1024px) { .edq-splits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.edq-flex { display: flex; }
.edq-flex-col { flex-direction: column; }
.edq-items-center { align-items: center; }
.edq-items-start { align-items: flex-start; }
.edq-between { justify-content: space-between; }
.edq-center { justify-content: center; }
.edq-end { justify-content: flex-end; }
.edq-wrap { flex-wrap: wrap; }
.edq-grow { flex: 1 1 0%; min-width: 0; }
.edq-shrink-0 { flex: none; }
.edq-gap-1 { gap: 0.25rem; }
.edq-gap-2 { gap: 0.5rem; }
.edq-gap-3 { gap: 0.75rem; }
.edq-gap-4 { gap: 1rem; }
.edq-block { display: block; }
.edq-inline { display: inline; }
.edq-w-full { width: 100%; }

.edq-mt-1 { margin-top: 0.25rem; }
.edq-mt-2 { margin-top: 0.5rem; }
.edq-mt-3 { margin-top: 0.75rem; }
.edq-mt-4 { margin-top: 1rem; }
.edq-mt-6 { margin-top: 1.5rem; }
.edq-mt-8 { margin-top: 2rem; }
.edq-mb-2 { margin-bottom: 0.5rem; }
.edq-mb-4 { margin-bottom: 1rem; }

/* ---------------------------------------------------------------------------
   9. Lists & rows
   --------------------------------------------------------------------------- */
.edq-list { display: flex; flex-direction: column; }
.edq-list > * + * { border-top: 1px solid var(--edq-line); }
.edq-list-gap { display: flex; flex-direction: column; gap: 0.8rem; }

.edq-lrow {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 0.1rem;
    min-height: 64px;
}

.edq-lrow-main { flex: 1 1 0%; min-width: 0; }

/* Avatar */
.edq-avatar {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--edq-red-soft);
    color: var(--edq-red);
    border: 1px solid var(--edq-red-line);
    overflow: hidden;
    letter-spacing: 0.02em;
}
.edq-avatar img { width: 100%; height: 100%; object-fit: cover; }
.edq-avatar--sm { width: 40px; height: 40px; font-size: 0.85rem; }

/* Inbox */
.edq-inbox-name { font-weight: 700; color: var(--edq-ink); font-size: 0.95rem; }
.edq-inbox-preview { color: var(--edq-ink-3); font-size: 0.8rem; line-height: 1.3; }
.edq-inbox-time { flex: none; color: var(--edq-ink-3); font-size: 0.75rem; white-space: nowrap; }
.edq-unread {
    flex: none;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--edq-red);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* Sessions */
.edq-sesh { display: flex; gap: 1rem; align-items: flex-start; }
.edq-day {
    flex: none;
    width: 64px;
    text-align: center;
    border: 1px solid var(--edq-line);
    border-radius: 14px;
    background: var(--edq-page);
    padding: 0.55rem 0.25rem;
}
.edq-day.is-today { border-color: var(--edq-red-line); background: var(--edq-red-soft); }
.edq-day-label { display: block; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--edq-red); }
.edq-day:not(.is-today) .edq-day-label { color: var(--edq-ink-3); }
.edq-day-time { display: block; font-weight: 800; font-size: 0.88rem; color: var(--edq-ink); margin-top: 0.2rem; white-space: nowrap; }
.edq-sesh-body { min-width: 0; flex: 1 1 0%; }
.edq-sesh-title { font-weight: 700; color: var(--edq-ink); font-size: 0.95rem; }
.edq-sesh-student { color: var(--edq-ink-3); font-size: 0.85rem; margin-top: 0.2rem; }

/* Leads / requests */
.edq-lead {
    border: 1px solid var(--edq-line);
    border-radius: 16px;
    padding: 1rem;
    background: var(--edq-bg);
}
.edq-lead--locked { border-style: dashed; border-color: var(--edq-amber-line); background: var(--edq-amber-soft); }
.edq-lead--open { border-color: var(--edq-green-line); background: var(--edq-green-soft); }
.edq-lead-top { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; }
.edq-lead-subject { font-weight: 800; color: var(--edq-ink); font-size: 0.98rem; font-family: var(--edq-ff-display); }
.edq-lead-meta {
    margin-top: 0.45rem;
    color: var(--edq-ink-3);
    font-size: 0.84rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
}
.edq-lead-meta strong { color: var(--edq-ink); font-weight: 600; }
.edq-lead-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.7rem; }

.edq-contact {
    background: var(--edq-bg);
    border: 1px solid var(--edq-green-line);
    border-radius: 12px;
    padding: 0.6rem 0.85rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--edq-green);
}

.edq-tag { display: inline-flex; gap: 0.4rem; align-items: center; color: var(--edq-ink-2); font-size: 0.82rem; }
.edq-unlock-note, .edq-unlock-note strong { color: var(--edq-amber); }

/* "+X more" card footer — the dashboard is an overview, the page has the rest */
.edq-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    border: 1px dashed var(--edq-line-2);
    color: var(--edq-ink-2);
    font-family: var(--edq-ff-body);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.edq-more::before { content: "+"; font-size: 1rem; line-height: 1; color: var(--edq-red); font-weight: 800; }
.edq-more:hover { color: var(--edq-red); border-color: var(--edq-red); background: var(--edq-red-soft); text-decoration: none; transform: translateY(-1px); }

/* Unlocked contacts page */
.edq-contact-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.edq-contact-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--edq-green-soft); border: 1px solid var(--edq-green-line);
    color: var(--edq-green); font-weight: 700; font-size: 0.88rem;
    border-radius: 999px; padding: 0.5rem 0.95rem; text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.edq-contact-chip:hover { background: #d9efe4; border-color: var(--edq-green); color: var(--edq-green); text-decoration: none; }
.edq-contact-ico { font-size: 0.95rem; }

/* ---------------------------------------------------------------------------
   10. Attention strip
   --------------------------------------------------------------------------- */
.edq-attention { display: flex; flex-direction: column; gap: 0.6rem; }

.edq-att-item {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--edq-line);
    background: var(--edq-bg);
}
.edq-att-item--red { border-color: var(--edq-red-line); background: var(--edq-red-soft); }
.edq-att-item--amber { border-color: var(--edq-amber-line); background: var(--edq-amber-soft); }
.edq-att-item--neutral { border-color: var(--edq-line); background: var(--edq-page); }

.edq-att-ico {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--edq-ink);
}
.edq-att-item--red .edq-att-ico { background: var(--edq-red); }
.edq-att-item--amber .edq-att-ico { background: var(--edq-amber); }
.edq-att-ico svg { width: 17px; height: 17px; }

.edq-att-body { flex: 1 1 0%; min-width: 0; }
.edq-att-title { font-weight: 700; color: var(--edq-ink); font-size: 0.95rem; }
.edq-att-desc { color: var(--edq-ink-2); font-size: 0.85rem; line-height: 1.45; margin-top: 0.15rem; }

.edq-attention--empty {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border: 1px dashed var(--edq-line-2);
    border-radius: 16px;
    background: var(--edq-bg);
    padding: 1rem 1.25rem;
    color: var(--edq-ink-2);
}
.edq-attention--empty .edq-check-circle {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--edq-green-soft);
    border: 1px solid var(--edq-green-line);
    color: var(--edq-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   11. Progress
   --------------------------------------------------------------------------- */
.edq-progress { height: 8px; border-radius: 999px; background: var(--edq-page); border: 1px solid var(--edq-line); overflow: hidden; }
.edq-progress-fill { height: 100%; border-radius: 999px; background: var(--edq-red); transition: width 0.3s ease; }

/* ---------------------------------------------------------------------------
   12. Forms
   --------------------------------------------------------------------------- */
.edq-field { display: flex; flex-direction: column; gap: 0.4rem; }
.edq-label { font-size: 0.78rem; font-weight: 700; color: var(--edq-ink-2); text-transform: uppercase; letter-spacing: 0.08em; }
.edq-hint { font-size: 0.8rem; color: var(--edq-ink-3); }
.edq-input,
.edq-select {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--edq-line-2);
    border-radius: 12px;
    background: var(--edq-bg);
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    font-family: var(--edq-ff-body);
    color: var(--edq-ink);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.edq-input::placeholder { color: var(--edq-ink-3); }
.edq-input:focus,
.edq-select:focus { border-color: var(--edq-red); box-shadow: 0 0 0 3px var(--edq-red-soft); }

.edq-form-feedback { font-size: 0.82rem; font-weight: 600; color: var(--edq-green); min-height: 1em; }

/* Switches */
.edq-switchrow { display: flex; flex-direction: column; }
.edq-switchrow > * + * { border-top: 1px solid var(--edq-line); }
.edq-switch { display: flex; align-items: center; gap: 0.8rem; justify-content: space-between; padding: 0.75rem 0; }
.edq-switch-label { flex: 1 1 0%; min-width: 0; }
.edq-switch-title { font-weight: 600; color: var(--edq-ink); font-size: 0.92rem; }
.edq-switch-desc { color: var(--edq-ink-3); font-size: 0.8rem; }
.edq-check {
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--edq-line-2);
    transition: background 0.18s ease;
    cursor: pointer;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}
.edq-check::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.18s ease;
}
.edq-check:checked { background: var(--edq-red); }
.edq-check:checked::after { transform: translateX(20px); }
.edq-check:focus-visible { outline: 2px solid var(--edq-red); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   13. Theme picker
   --------------------------------------------------------------------------- */
.edq-themegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 768px) { .edq-themegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.edq-theme {
    position: relative;
    text-align: left;
    border: 1px solid var(--edq-line);
    border-radius: 14px;
    background: var(--edq-bg);
    padding: 0.6rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.edq-theme:disabled { cursor: not-allowed; opacity: 0.65; }
.edq-theme:hover:not(:disabled):not(.edq-theme--sel) { border-color: var(--edq-line-2); box-shadow: var(--edq-shadow-sm); }
.edq-theme--sel { border-color: var(--edq-red); box-shadow: 0 0 0 2px var(--edq-red-soft); }
.edq-theme-swatches { display: flex; gap: 4px; }
.edq-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); }
.edq-theme-name { font-size: 0.85rem; font-weight: 700; color: var(--edq-ink); }
.edq-theme-locked-note { font-size: 0.72rem; font-weight: 600; color: var(--edq-amber); margin-top: auto; }

/* ---------------------------------------------------------------------------
   14. Modal (welcome)
   --------------------------------------------------------------------------- */
.edq-modal-bg {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(25, 21, 18, 0.55);
    backdrop-filter: blur(4px);
}
.edq-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    overflow: auto;
    background: var(--edq-bg);
    border-radius: 22px;
    box-shadow: var(--edq-shadow);
    padding: 1.5rem;
}
@media (min-width: 640px) { .edq-modal { padding: 2rem; } }
.edq-modal-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--edq-ink-3);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
}
.edq-modal-close:hover { background: var(--edq-page); color: var(--edq-ink); }
.edq-modal-art { margin-bottom: 1.25rem; }
.edq-modal-logo {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--edq-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--edq-ff-display);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    box-shadow: 0 10px 22px -12px rgba(195, 20, 47, 0.6);
}
.edq-modal-title { font-size: 1.5rem; }
.edq-modal-sub { color: var(--edq-ink-2); font-size: 0.95rem; line-height: 1.55; margin-top: 0.5rem; }
.edq-modal-list { margin-top: 1rem; display: grid; gap: 0.55rem; }
.edq-modal-list li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--edq-ink-2); font-size: 0.9rem; }
.edq-modal-list li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--edq-red);
    margin-top: 0.45rem;
}

/* ---------------------------------------------------------------------------
   15. Referral strip
   --------------------------------------------------------------------------- */
.edq-refer {
    border: 1px solid var(--edq-ink);
    border-radius: var(--edq-radius);
    background: var(--edq-ink);
    color: #fff;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 768px) {
    .edq-refer { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.5rem 1.75rem; }
}
.edq-refer-title { font-family: var(--edq-ff-display); font-weight: 700; font-size: 1.15rem; }
.edq-refer-meta { color: rgba(255, 255, 255, 0.72); font-size: 0.85rem; margin-top: 0.3rem; }
.edq-refer-count { font-weight: 800; color: var(--edq-gold); }
.edq-refer-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.edq-linkbox {
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    min-width: 0;
}
.edq-linkbox summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    color: #fff;
    min-width: 0;
}
.edq-linkbox summary::-webkit-details-marker { display: none; }
.edq-linkbox-chevron { flex: none; width: 14px; height: 14px; transition: transform 0.22s ease; opacity: 0.75; }
.edq-linkbox-ico { flex: none; width: 14px; height: 14px; opacity: 0.85; }
.edq-linkbox[open] .edq-linkbox-chevron { transform: rotate(180deg); }
.edq-linkbox-preview {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
    opacity: 0.9;
    direction: rtl;
    text-align: left;
}
.edq-linkbox-body {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.7rem 0.6rem;
    min-width: 0;
}
.edq-linkbox-body code {
    flex: 1 1 0%;
    min-width: 0;
    word-break: break-all;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.45;
    opacity: 0.92;
}
.edq-linkbox-body .edq-btn { flex: none; }

.edq-copybar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 0.35rem 0.4rem 0.35rem 0.9rem;
    min-width: 0;
}
.edq-copybar code {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
   16. Notes & empty states
   --------------------------------------------------------------------------- */
.edq-note {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    background: var(--edq-page);
    border: 1px solid var(--edq-line);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    color: var(--edq-ink-2);
    font-size: 0.85rem;
    line-height: 1.5;
}

.edq-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 2.1rem 1rem;
    color: var(--edq-ink-3);
}
.edq-empty-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--edq-page);
    border: 1px solid var(--edq-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--edq-ink-3);
    margin-bottom: 0.2rem;
}
.edq-empty-icon svg { width: 20px; height: 20px; }
.edq-empty-title { font-weight: 700; color: var(--edq-ink); font-size: 0.95rem; }
.edq-empty-desc { font-size: 0.85rem; max-width: 34ch; }

.edq-hint-list { margin-top: 0.5rem; display: grid; gap: 0.35rem; color: var(--edq-amber); font-size: 0.82rem; }
.edq-hint-list li { display: flex; gap: 0.5rem; align-items: flex-start; }
.edq-hint-list li::before { content: "—"; flex: none; color: var(--edq-amber); }

/* ---------------------------------------------------------------------------
   17. Push-banner placement (app chrome)
   --------------------------------------------------------------------------- */
.edq-push {
    position: fixed;
    top: 4.3rem;
    right: 1rem;
    left: 1rem;
    z-index: 60;
    width: auto;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--edq-red-line);
    border-left: 4px solid var(--edq-red);
    box-shadow: var(--edq-shadow-sm);
}
@media (min-width: 640px) {
    .edq-push { left: auto; width: 26rem; right: 1.5rem; }
}

/* ---------------------------------------------------------------------------
   18. Request wizard (student, tick-tick-tick flow)
   --------------------------------------------------------------------------- */
.edq-wiz-progress { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 1.4rem; }
.edq-wiz-dot {
    width: 10px; height: 10px; border-radius: 999px;
    background: var(--edq-line-2); transition: background 0.2s ease, width 0.2s ease;
}
.edq-wiz-dot.is-on { background: var(--edq-red); width: 26px; }
.edq-wiz-step { margin-left: auto; font-size: 0.8rem; color: var(--edq-ink-3); }

.edq-wiz-pane { display: none; border: 0; padding: 0; margin: 0; }
.edq-wiz-pane.is-on { display: block; }
.edq-wiz-q {
    display: block;
    font-family: var(--edq-ff-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--edq-ink);
    padding: 0;
    margin: 0 0 0.9rem;
}
/* Second question in a pane: clear hierarchy gap above */
.edq-wiz-q.edq-mt-6 {
    margin-top: 2.6rem;
    padding-top: 1.6rem;
    border-top: 1px dashed var(--edq-line);
}
.edq-wiz-mini { display: block; font-size: 0.85rem; font-weight: 700; color: var(--edq-ink-2); margin-bottom: 0.4rem; }
.edq-wiz-err { margin-top: 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--edq-red); }
.edq-wiz-err.hidden { display: none; }

.edq-chipgrid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.edq-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid var(--edq-line-2);
    background: var(--edq-bg);
    color: var(--edq-ink);
    border-radius: 999px;
    padding: 0.8rem 1.25rem;
    min-height: 52px;
    font-family: var(--edq-ff-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.edq-chip:hover { border-color: var(--edq-red); transform: translateY(-1px); }
.edq-chip:active { transform: scale(0.97); }
.edq-chip.is-on {
    background: var(--edq-red); border-color: var(--edq-red); color: #fff;
    box-shadow: 0 10px 22px -12px rgba(195, 20, 47, 0.55);
    animation: edq-chip-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes edq-chip-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.edq-chip--other { border-style: dashed; }

.edq-wiz-check {
    display: flex; gap: 0.75rem; align-items: flex-start;
    margin-top: 1.4rem; padding: 0.9rem 1rem;
    border: 1px solid var(--edq-green-line); border-radius: 14px; background: var(--edq-green-soft);
    color: var(--edq-ink-2); font-size: 0.9rem; line-height: 1.45; cursor: pointer;
}
.edq-wiz-check input { margin-top: 0.2rem; width: 20px; height: 20px; accent-color: var(--edq-green); }

/* Dull "this is managed elsewhere" note in the wizard */
.edq-wiz-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.4rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    background: var(--edq-page);
    border: 1px dashed var(--edq-line);
    color: var(--edq-ink-3);
    font-size: 0.84rem;
    line-height: 1.45;
}

.edq-note-on-form { margin-left: auto; flex: none; }
.edq-mini-on {
    appearance: none; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.35rem;
    border-radius: 999px; background: var(--edq-green); color: #fff;
    font-family: var(--edq-ff-body); font-size: 0.8rem; font-weight: 700;
    padding: 0.45rem 0.95rem;
    transition: background 0.18s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.edq-mini-on:hover { background: #0a5c3d; transform: translateY(-1px); }

.edq-wiz-nav { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-top: 1.6rem; }
.edq-wiz-back {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font-family: var(--edq-ff-body); font-size: 0.95rem; font-weight: 600; color: var(--edq-ink-3);
    padding: 0.6rem 0.4rem;
    margin-right: auto;
}
.edq-wiz-back:hover { color: var(--edq-ink); }
.edq-wiz-next {
    appearance: none; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 54px; padding: 0.9rem 1.6rem;
    border-radius: 999px; background: var(--edq-red); color: #fff;
    font-family: var(--edq-ff-body); font-size: 1.05rem; font-weight: 700;
    box-shadow: 0 10px 22px -12px rgba(195, 20, 47, 0.55);
    transition: background 0.18s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.edq-wiz-next:hover { background: var(--edq-red-deep); }
.edq-wiz-next:active { transform: translateY(1px); }
.edq-wiz-nav .edq-wiz-next:last-child { margin-left: auto; }
.edq-wiz-back.hidden, .edq-wiz-next.hidden, .edq-chip.hidden { display: none; }

/* ---------------------------------------------------------------------------
   19. Profile style picker (tutor)
   --------------------------------------------------------------------------- */
.edq-stylegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.edq-style {
    position: relative;
    appearance: none; text-align: left; cursor: pointer;
    border: 1px solid var(--edq-line); border-radius: 14px; background: var(--edq-bg);
    padding: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem;
    font-family: var(--edq-ff-body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.edq-style:hover { border-color: var(--edq-line-2); box-shadow: var(--edq-shadow-sm); }
.edq-style--sel { border-color: var(--edq-red); box-shadow: 0 0 0 2px var(--edq-red-soft); }
.edq-style-preview {
    height: 44px; border-radius: 9px;
    background-image:
        linear-gradient(135deg, #7f1d1d 0%, #dc2626 60%, #f87171 100%);
    background-size: cover;
}
.edq-style-preview--waves { background-image: radial-gradient(120% 60% at 50% 115%, rgba(255,255,255,.35) 0 28%, transparent 29%), radial-gradient(130% 55% at 50% 130%, rgba(255,255,255,.22) 0 30%, transparent 31%), linear-gradient(135deg, #7f1d1d 0%, #dc2626 60%, #f87171 100%); }
.edq-style-preview--dots { background-image: radial-gradient(rgba(255,255,255,.85) 2px, transparent 2.4px), linear-gradient(135deg, #7f1d1d 0%, #dc2626 60%, #f87171 100%); background-size: 11px 11px, 100% 100%; background-position: center, center; }
.edq-style-preview--stripes { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 6px, transparent 6px 14px), linear-gradient(135deg, #7f1d1d 0%, #dc2626 60%, #f87171 100%); }
.edq-style-preview--glow { background-image: radial-gradient(60% 80% at 15% 15%, rgba(255,255,255,.45) 0%, transparent 60%), radial-gradient(60% 80% at 90% 90%, rgba(25,21,18,.55) 0%, transparent 55%), linear-gradient(135deg, #7f1d1d 0%, #dc2626 60%, #f87171 100%); }
.edq-style-preview--grid { background-image: linear-gradient(rgba(255,255,255,.75) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255,255,255,.75) 1.5px, transparent 1.5px), linear-gradient(135deg, #7f1d1d 0%, #dc2626 60%, #f87171 100%); background-size: 13px 13px, 13px 13px, 100% 100%; }
.edq-style-preview--ribbon { background-image: linear-gradient(115deg, transparent 0 62%, rgba(25,21,18,.5) 62% 78%, transparent 78%), linear-gradient(135deg, #7f1d1d 0%, #dc2626 60%, #f87171 100%); }
.edq-style-name { font-size: 0.8rem; font-weight: 700; color: var(--edq-ink); }

/* ---------------------------------------------------------------------------
   20. Mobile adjustments
   Small screens: rows that pair text with buttons/badges wrap instead of
   crushing the text column (flex: 1 1 0% + min-width: 0 collapses to nothing).
   --------------------------------------------------------------------------- */
@media (max-width: 639px) {
    /* Attention strip: action button drops under the text, aligned with it */
    .edq-att-item { flex-wrap: wrap; row-gap: 0.6rem; }
    .edq-att-item > .edq-btn {
        flex: 1 1 100%; /* shrinkable basis so the left indent can't push it out of the card */
        margin-left: calc(34px + 0.85rem);
        justify-content: center;
    }

    /* List rows: give the text a real basis so actions wrap to a new line
       (right-aligned) instead of squeezing the title away */
    .edq-lrow { flex-wrap: wrap; row-gap: 0.55rem; }
    .edq-lrow-main { flex: 1 1 210px; }
    .edq-lrow > form,
    .edq-lrow > .edq-flex { margin-left: auto; }

    /* Enrollment-request cards: buttons move under the student name */
    .edq-lead-actions { flex: 1 0 100%; }

    /* Lead filter: subject gets its own row, area + filter share the next */
    .edq-filterbar { flex-wrap: wrap; row-gap: 0.75rem; }
    .edq-filterbar .edq-field.edq-grow { flex: 1 1 0; min-width: 0; }
    .edq-filterbar .edq-field.edq-grow:first-of-type { flex: 1 0 100%; }

    /* Tutor Pro note: text wraps, button sits below aligned with the copy */
    .edq-note { flex-wrap: wrap; row-gap: 0.6rem; }
    .edq-note .edq-btn { flex: 1 1 100%; margin-left: calc(18px + 0.6rem); }

    /* ---- Compact feed (mobile-first dashboard) ----
       The dashboard is an overview: tight hero, one merged stats panel,
       clamped text with "view all" links doing the rest. */
    .edq-page { padding-bottom: 2.25rem; }
    .edq-hero { padding-top: 1.6rem; gap: 0.8rem; }
    .edq-card--pad { padding: 1.05rem; }
    .edq-empty { padding: 1.5rem 0.75rem; }

    /* Stats merge into a single panel with hairline dividers */
    .edq-statgrid {
        gap: 1px;
        background: var(--edq-line);
        border: 1px solid var(--edq-line);
        border-radius: var(--edq-radius);
        overflow: hidden;
        box-shadow: var(--edq-shadow-sm);
    }
    .edq-stat { border: 0; border-radius: 0; box-shadow: none; background: var(--edq-bg); padding: 0.8rem 0.9rem; min-height: 84px; }

    /* Clamp long copy — the full text lives on the section's own page */
    .edq-att-desc,
    .edq-lead-top .edq-grow .edq-lead-meta,
    .edq-lrow .edq-inbox-preview {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .edq-lead-top .edq-grow .edq-lead-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Quick actions: big two-column tap targets instead of small pills */
    .edq-toolnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .edq-toolnav .edq-btn {
        width: 100%;
        justify-content: center;
        background: var(--edq-bg);
        border: 1px solid var(--edq-line);
        border-radius: 14px;
        padding: 0.8rem 0.6rem;
    }
    .edq-toolnav .edq-btn--primary,
    .edq-toolnav .edq-btn--primary:hover {
        background: var(--edq-red);
        border-color: var(--edq-red);
        color: #fff; /* the generic tile style would otherwise paint white text on white */
    }
    .edq-toolnav .edq-btn--primary:hover { background: var(--edq-red-deep); border-color: var(--edq-red-deep); }
    .edq-toolnav .edq-btn:hover { border-color: var(--edq-red); color: var(--edq-red); background: var(--edq-bg); }

    /* Referral strip: full-width actions */
    .edq-refer-actions .edq-btn, .edq-refer-actions .edq-copybar { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   22. Motion & micro-interactions (premium feel)
   --------------------------------------------------------------------------- */
@keyframes edq-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes edq-rise-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.985); }
    to { opacity: 1; transform: none; }
}
@keyframes edq-modal-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.94); }
    to { opacity: 1; transform: none; }
}
@keyframes edq-logo-pop {
    0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
    60% { opacity: 1; transform: scale(1.12) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes edq-sheen {
    0% { transform: translateX(-120%) skewX(-18deg); }
    55%, 100% { transform: translateX(320%) skewX(-18deg); }
}
@keyframes edq-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes edq-spin {
    to { transform: rotate(360deg); }
}
.edq-msgs-loading svg { animation: edq-spin 0.8s linear infinite; }
@keyframes edq-dot-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(195, 20, 47, 0.35); }
    50% { box-shadow: 0 0 0 5px rgba(195, 20, 47, 0.08); }
}

/* Flash messages glide in and settle */
.flash-item { animation: edq-rise-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

/* Welcome modal: backdrop fades, card springs up, logo pops with a slow sheen */
.edq-modal-bg { animation: edq-fade-in 0.25s ease; }
.edq-modal { animation: edq-modal-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
.edq-modal-logo {
    animation: edq-logo-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s backwards;
}
.edq-modal-logo::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 40%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    transform: translateX(-120%) skewX(-18deg);
    animation: edq-sheen 2.8s ease-in-out 0.9s infinite;
    pointer-events: none;
}
.edq-modal .edq-modal-list li {
    animation: edq-rise-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.edq-modal .edq-modal-list li:nth-child(1) { animation-delay: 0.15s; }
.edq-modal .edq-modal-list li:nth-child(2) { animation-delay: 0.24s; }
.edq-modal .edq-modal-list li:nth-child(3) { animation-delay: 0.33s; }

/* "All caught up" check draws itself */
.edq-check-circle svg path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: edq-draw 0.5s ease-out 0.25s forwards;
}

/* Wizard progress: active dot breathes */
.edq-wiz-dot.is-on { animation: edq-dot-breathe 2.2s ease-in-out infinite; }

/* Contact chips nudge on hover */
.edq-contact-chip { transition: background 0.15s ease, border-color 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.edq-contact-chip:hover { transform: translateX(2px); }

/* Top-priority "Find a tutor" bar (student dashboard) */
.edq-findbar {
    display: flex; align-items: center; gap: 0.9rem;
    background: linear-gradient(90deg, #fff 0%, #fdf3f4 100%);
    border: 1.5px solid var(--edq-red-line);
    border-radius: 16px;
    padding: 0.8rem 1rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
    box-shadow: var(--edq-shadow-sm);
    transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.2s ease;
}
.edq-findbar:hover { transform: translateY(-2px); border-color: var(--edq-red); box-shadow: var(--edq-shadow); text-decoration: none; }
.edq-findbar-ico {
    flex: none; width: 38px; height: 38px; border-radius: 12px;
    background: var(--edq-red); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.edq-findbar-ico svg { width: 19px; height: 19px; }
.edq-findbar-text { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; }
.edq-findbar-text strong { color: var(--edq-ink); font-size: 0.95rem; }
.edq-findbar-text span:not(.edq-btn) { color: var(--edq-ink-2); font-size: 0.8rem; }
.edq-btn--on-soft { background: var(--edq-red-soft); border: 1px solid var(--edq-red-line); color: var(--edq-red); }
a:hover > .edq-btn--on-soft, .edq-findbar:hover .edq-btn--on-soft { background: var(--edq-red); color: #fff; border-color: var(--edq-red); }
@media (max-width: 639px) {
    .edq-findbar-text span:not(.edq-btn) { display: none; }
    .edq-btn--on-soft { flex: none; }
}

/* ---------------------------------------------------------------------------
   Mobile bottom tab bar — the app feel
   --------------------------------------------------------------------------- */
.edq-tabbar {
    position: fixed;
    bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: min(430px, calc(100% - 1.4rem));
    z-index: 55;
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    box-shadow: 0 22px 44px -18px rgba(25, 21, 18, 0.5), 0 4px 12px -6px rgba(25, 21, 18, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    padding: 0.4rem 0.55rem;
}
.edq-tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0.35rem 0.2rem;
    border-radius: 12px;
    color: var(--edq-ink-3);
    text-decoration: none;
    font-family: var(--edq-ff-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: color 0.15s ease, background 0.15s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.edq-tabbar-item svg { width: 21px; height: 21px; position: relative; z-index: 1; }
.edq-tabbar-item span { position: relative; z-index: 1; }
.edq-tabbar-item:active { transform: scale(0.92); }
.edq-tabbar-item.is-active { color: var(--edq-red); }
.edq-tabbar-item.is-active svg { transform: translateY(-1px); }
.edq-tabbar-item { position: relative; }
.edq-tabbar-item.is-active::before {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--edq-red-soft);
    z-index: -1;
}

/* Attention strip action pops in */
.edq-att-item { animation: edq-rise-in 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------------------------------------------------------------------------
   23. Premium avatar accessories (crown / spark) — layer over any avatar
   Add .edq-acc + .edq-acc-crown / .edq-acc-spark to the avatar wrapper.
   --------------------------------------------------------------------------- */
.edq-acc { position: relative; overflow: visible; }
/* avatars clip their own image; the accessory wrapper must never clip the badge */
.edq-avatar.edq-acc { overflow: visible; }
.edq-avatar img { border-radius: inherit; }
.edq-acc-crown::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -26%;
    left: 50%;
    width: 64%;
    height: 46%;
    transform: translateX(-50%) rotate(-8deg);
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15"><path d="M2.2 13.2 3.8 3.6l5 4.6L12 1.2l3.2 7 5-4.6 1.6 9.6z" fill="%23f0b429" stroke="%238a5a00" stroke-width="1.1" stroke-linejoin="round"/><circle cx="12" cy="10.6" r="1.1" fill="%23dc2626" stroke="%238a5a00" stroke-width=".6"/></svg>') no-repeat center / contain;
    filter: drop-shadow(0 2px 3px rgba(25, 21, 18, 0.35));
    pointer-events: none;
}
.edq-acc-spark::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: -12%;
    right: -14%;
    width: 48%;
    height: 48%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l2.2 7.8L22 12l-7.8 2.2L12 22l-2.2-7.8L2 12l7.8-2.2z" fill="%23f0b429" stroke="%23b47d00" stroke-width="1"/></svg>') no-repeat center / contain;
    filter: drop-shadow(0 1px 2px rgba(25, 21, 18, 0.3));
    transform-origin: center;
    animation: edq-twinkle 2.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes edq-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(0.72) rotate(18deg); opacity: 0.65; }
}
/* falling sparkle particles shared by several accessories */
@keyframes edq-fallp {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 0 38px, 0 38px, 0 38px, 0 38px; }
}
.edq-acc-particles::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -36%;
    left: -6%;
    width: 112%;
    height: 52%;
    pointer-events: none;
    background-image:
        radial-gradient(circle 2.2px at 15% 70%, rgba(251,191,36,.95) 99%, transparent),
        radial-gradient(circle 1.6px at 45% 40%, rgba(253,224,124,.9) 99%, transparent),
        radial-gradient(circle 2px at 72% 78%, rgba(251,191,36,.9) 99%, transparent),
        radial-gradient(circle 1.2px at 88% 30%, rgba(255,240,200,.95) 99%, transparent);
    background-size: 38px 38px;
    animation: edq-fallp 2.4s linear infinite;
}

.edq-acc-crown::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -20%;
    left: 0%;
    width: 100%;
    height: 46%;
    pointer-events: none;
    background-image:
        radial-gradient(circle 2px at 12% 60%, rgba(240,180,41,.9) 99%, transparent),
        radial-gradient(circle 1.4px at 38% 30%, rgba(255,214,102,.9) 99%, transparent),
        radial-gradient(circle 2px at 62% 70%, rgba(240,180,41,.85) 99%, transparent),
        radial-gradient(circle 1.2px at 88% 45%, rgba(255,231,155,.9) 99%, transparent);
    background-size: 42px 42px;
    animation: edq-fallp 2.1s linear infinite;
}
.edq-acc-crown { filter: none; }

/* star — 5-point golden star with falling sparkles */
.edq-acc-star::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -30%;
    left: 50%;
    width: 74%;
    height: 56%;
    transform: translateX(-50%) rotate(-4deg);
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l2.6 6.7 7.2.5-5.5 4.7 1.7 7L12 17l-6 3.9 1.7-7-5.5-4.7 7.2-.5z" fill="%23fbbf24" stroke="%2392500b" stroke-width="1"/></svg>') no-repeat center / contain;
    filter: drop-shadow(0 2px 3px rgba(25,21,18,0.35));
    pointer-events: none;
    animation: edq-twinkle 2.2s ease-in-out infinite;
}
.edq-acc-star::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -24%;
    left: -4%;
    width: 108%;
    height: 48%;
    pointer-events: none;
    background-image:
        radial-gradient(circle 2px at 20% 40%, rgba(251,191,36,.95) 99%, transparent),
        radial-gradient(circle 1.5px at 55% 65%, rgba(253,224,124,.9) 99%, transparent),
        radial-gradient(circle 2.2px at 80% 25%, rgba(251,191,36,.9) 99%, transparent),
        radial-gradient(circle 1px at 40% 85%, rgba(255,240,200,.95) 99%, transparent);
    background-size: 34px 34px;
    animation: edq-fallp 2.2s linear infinite;
}

/* gem — cut diamond with shimmering fall */
.edq-acc-gem::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -26%;
    left: 50%;
    width: 60%;
    height: 52%;
    transform: translateX(-50%) rotate(3deg);
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2h10l5 6-10 14L2 8z" fill="%2334d399" stroke="%23065f46" stroke-width="1.1" stroke-linejoin="round"/><path d="M2 8h20M7 2l2 6 3 14M17 2l-2 6-3 14" fill="none" stroke="%23065f46" stroke-width=".9"/></svg>') no-repeat center / contain;
    filter: drop-shadow(0 2px 3px rgba(25,21,18,0.35));
    pointer-events: none;
}
.edq-acc-gem::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -26%;
    left: -2%;
    width: 104%;
    height: 48%;
    pointer-events: none;
    background-image:
        radial-gradient(circle 2px at 25% 50%, rgba(52,211,153,.95) 99%, transparent),
        radial-gradient(circle 1.5px at 50% 70%, rgba(167,243,208,.9) 99%, transparent),
        radial-gradient(circle 2.2px at 75% 30%, rgba(52,211,153,.9) 99%, transparent),
        radial-gradient(circle 1px at 90% 65%, rgba(214,251,235,.95) 99%, transparent);
    background-size: 36px 36px;
    animation: edq-fallp 2.6s linear infinite;
}

/* angel — glowing ring behind the avatar */
.edq-acc-angel::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -30%;
    left: 50%;
    width: 96%;
    height: 74%;
    transform: translateX(-50%);
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><ellipse cx="12" cy="12" rx="10" ry="6" fill="none" stroke="%23c4b5fd" stroke-width="2.4"/><ellipse cx="12" cy="12" rx="10" ry="6" fill="none" stroke="%23fff" stroke-width=".6" opacity=".8"/></svg>') no-repeat center / contain;
    filter: drop-shadow(0 0 6px rgba(139,92,246,.75));
    pointer-events: none;
    animation: edq-angelglow 2.8s ease-in-out infinite;
}
@keyframes edq-angelglow {
    0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.12); }
}

/* bolt — lightning with flicker */
.edq-acc-bolt::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -28%;
    left: 50%;
    width: 52%;
    height: 62%;
    transform: translateX(-50%) rotate(-8deg);
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2L4 14h6l-1 8 9-12h-6z" fill="%23fbbf24" stroke="%2392500b" stroke-width="1.2" stroke-linejoin="round"/></svg>') no-repeat center / contain;
    filter: drop-shadow(0 2px 3px rgba(25,21,18,0.4));
    pointer-events: none;
    animation: edq-boltflicker 1.6s ease-in-out infinite;
}
@keyframes edq-boltflicker {
    0%, 100% { opacity: 1; }
    8% { opacity: .55; }
    12% { opacity: 1; }
    30% { opacity: .8; }
    34% { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   23b. Accessory picker / badge grids (tailwind build lacks grid-cols-* etc.)
   --------------------------------------------------------------------------- */
.edq-acc-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    max-width: 27rem;
}
.edq-acc-picker.pm6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 23rem;
}
@media (min-width: 640px) {
    .edq-acc-picker {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        max-width: 32rem;
    }
    .edq-acc-picker.pm6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        max-width: 36rem;
    }
}
.edq-acc-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    padding: 0.35rem 0.2rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #fff;
    color: #475569;
    cursor: pointer;
}
.edq-acc-btn:hover { border-color: #fca5a5; color: #b91c1c; }
.edq-acc-btn.is-sel { border-color: #ef4444; background: #fef2f2; color: #b91c1c; }
.edq-acc-btn:disabled { cursor: not-allowed; opacity: 0.45; }
.edq-acc-btn:disabled:hover { border-color: #e2e8f0; color: #475569; }
.edq-acc-prev {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 9999px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}
.edq-acc-name {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1;
    color: #64748b;
}
.edq-acc-btn.is-sel .edq-acc-name { color: #b91c1c; }
.edq-acc-lock {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 0.8rem;
    height: 0.8rem;
    color: #94a3b8;
}
.edq-acc-badge-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.35rem 0.2rem;
    color: #475569;
}

/* ---------------------------------------------------------------------------
   24. Accessibility & motion preferences
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .edq-tabbar { display: none; }
}
@media (max-width: 1023px) {
    body > footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .edq-btn, .edq-chip, .edq-contact-chip { transform: none !important; }
    .edq-btn:hover, .edq-chip:hover, .edq-contact-chip:hover { transform: none !important; }
    .edq-btn:active, .edq-chip:active { transform: none !important; }
    .edq-check-circle svg path { stroke-dashoffset: 0; animation: none; }
    #cursor-follower, #cursor-follower-ring { display: none !important; }
    .logo-pill .tagline-text, .tagline-text { transition: none !important; max-width: 0 !important; opacity: 0 !important; }
    html { scroll-behavior: auto !important; }
}