:root {
    --brand-1: #2a5f96;
    --brand-2: #56b8e9;
    --accent: #f6d957;
    --accent-soft: #f7b284;
    --brand-ink: #1d4d7f;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-border: rgba(148, 163, 184, 0.25);
}

* { box-sizing: border-box; }

body {
    font-family: "Nunito", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 0% 0%, rgba(86, 184, 233, 0.22), transparent 36%),
        radial-gradient(circle at 100% 15%, rgba(246, 217, 87, 0.22), transparent 34%),
        #f8fafc;
}

img,
video {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, .site-header a:first-child {
    font-family: "Baloo 2", "Nunito", sans-serif;
}

/* ── Header ── */
.site-header {
    background: linear-gradient(130deg, var(--brand-ink), var(--brand-1) 50%, var(--brand-2));
    color: #fff;
}

.site-logo-link {
    display: inline-flex;
    align-items: center;
}

.site-logo {
    width: clamp(90px, 14vw, 130px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(15, 36, 72, 0.2));
}

/* ── Mobile toggle ── */
.menu-toggle {
    border: none;
    background: none;
    color: #fff;
    padding: 0.4rem;
    display: inline-flex;
    align-items: center;
}


/* ── Desktop nav pills ── */
.nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.2s;
    text-decoration: none;
    border: none;
    background: none;
    position: relative;
}

.nav-pill::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: rgba(255,255,255,0.7);
    transition: all 0.2s;
    transform: translateX(-50%);
    border-radius: 1px;
}

.nav-pill:hover {
    color: #fff;
    background: none;
}

.nav-pill:hover::after {
    width: 60%;
}

.nav-login {
    background: #fff;
    color: var(--brand-ink);
    border: none;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.42rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.nav-login:hover {
    background: #fff;
    color: var(--brand-ink);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.nav-login-btn {
    background: none;
    color: rgba(255,255,255,0.6);
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
}

.nav-login-btn:hover {
    color: #fff;
}

/* ── Mobile nav (blue, matches header) ── */
.mobile-nav {
    background: linear-gradient(150deg, var(--brand-1), var(--brand-2));
}

@media (max-width: 767px) {
    .mobile-nav .nav-pill {
        color: rgba(255,255,255,0.9);
        font-size: 0.9rem;
        padding: 0.6rem 0.85rem;
        border-radius: 0.5rem;
    }
    .mobile-nav .nav-pill::after {
        display: none;
    }
    .mobile-nav .nav-pill:hover {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }
    .mobile-nav .nav-login {
        background: #fff;
        color: var(--brand-ink);
        box-shadow: none;
    }
    .mobile-nav .nav-login:hover {
        background: rgba(255,255,255,0.9);
        color: var(--brand-ink);
    }
    .mobile-nav .nav-login-btn {
        color: rgba(255,255,255,0.7);
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 0.5rem;
    }
    .mobile-nav .nav-login-btn:hover {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }
    .mobile-nav .border-t {
        border-color: rgba(255,255,255,0.15) !important;
    }
}

.nav-login:hover {
    background: linear-gradient(135deg, #ffe36f, #ffc49a);
    color: #0f2f4f;
}

.nav-login-btn {
    border: 1px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
}

.hero-card {
    background: linear-gradient(125deg, var(--brand-ink), var(--brand-1) 38%, var(--brand-2) 70%, var(--accent) 120%);
    box-shadow: 0 18px 38px rgba(29, 77, 127, 0.25);
}

.surface-card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

/* ── Program card ──
   The whole card opens the program, but the title is the only link: its ::after
   covers the card, so there is one focusable element and one accessible name
   rather than a div with an onclick nobody can reach from a keyboard. The enroll
   button lifts above that overlay instead of nesting inside it. */
.program-card {
    position: relative;
}

.program-card-link {
    color: inherit;
    text-decoration: none;
}

.program-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.program-card:hover {
    transform: translateY(-3px);
}

.program-card:focus-within {
    outline: 2px solid var(--brand-1);
    outline-offset: 3px;
}

.program-card-link:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .program-card:hover {
        transform: none;
    }
}

.btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding: 0.7rem 1rem;
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-1), var(--brand-2));
    color: #fff;
    font-weight: 800;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-weight: 700;
}

.btn-mini,
.btn-mini-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.btn-mini {
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-1));
    color: #fff;
}

.btn-mini-secondary {
    background: #fff2b3;
    color: var(--brand-ink);
    border: 1px solid #f7da6f;
}

.admin-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: #e9f6ff;
    color: var(--brand-ink);
    border: 1px solid #9bd1f1;
}

.portal-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.6rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.15s;
    text-decoration: none;
}

.portal-menu-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

.admin-pill:hover {
    background: #d5efff;
}

.pill-item {
    display: inline-flex;
    width: 100%;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 0.5rem 0.7rem;
    border-radius: 0.7rem;
}

.schedule-item {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 0.6rem 0.8rem;
}

.schedule-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
}

.schedule-item summary::-webkit-details-marker {
    display: none;
}

.note-item {
    border-left: 4px solid var(--brand-2);
    background: #f8fafc;
    border-radius: 0.65rem;
    padding: 0.7rem 0.8rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    border-radius: 0.7rem;
    border: 1px solid #cbd5e1;
    padding: 0.55rem 0.7rem;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand-1);
    box-shadow: 0 0 0 3px rgba(42, 95, 150, 0.15);
}

/* Error-state form fields */
.field-error input,
.field-error select,
.field-error textarea {
    border-color: #e11d48;
    background: #fff1f2;
    box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.12);
}

.field-error input:focus,
.field-error select:focus,
.field-error textarea:focus {
    border-color: #e11d48;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.18);
}

.form-error-summary {
    border: 1px solid #fecdd3;
    background: #fff1f2;
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.form-error-summary p {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: #9f1239;
}

.form-error-summary ul {
    margin: 0;
    padding-left: 1.25rem;
    color: #be123c;
    font-size: 0.875rem;
    line-height: 1.5;
}

label {
    display: inline-block;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.consent-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.consent-line input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.1rem;
}

.consent-line span {
    font-weight: 700;
}

.child-remove-btn {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #be123c;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 800;
}

.child-remove-btn:hover {
    background: #ffe4e6;
}

/* ═══════════════════════════════════════════════════════════════════
   Auth Pages – Login / Signup / Password-Reset / Closed pages
   ═══════════════════════════════════════════════════════════════════ */

.auth-page-wrapper {
    display: flex;
    justify-content: center;
    padding: 1rem 0 3rem;
}

.auth-card {
    width: 100%;
    max-width: 28rem;           /* 448px – comfortable for single-column forms */
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 1.25rem;
    box-shadow:
        0 4px 6px rgba(15, 23, 42, 0.04),
        0 12px 28px rgba(15, 23, 42, 0.08);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-card-wide {
    max-width: 38rem;           /* 608px – for the signup form with sections */
}

/* ── Card Header ── */
.auth-card-header {
    text-align: center;
    margin-bottom: 0.25rem;
}

.auth-icon-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(42, 95, 150, 0.12), rgba(86, 184, 233, 0.18));
    color: var(--brand-1);
    margin-bottom: 0.75rem;
}

.auth-icon-ring svg {
    width: 1.25rem;
    height: 1.25rem;
}

.auth-icon-ring-lg {
    width: 3.25rem;
    height: 3.25rem;
}

.auth-icon-ring-lg svg {
    width: 1.5rem;
    height: 1.5rem;
}

.auth-icon-ring-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(52, 211, 153, 0.22));
    color: #059669;
}

.auth-icon-ring-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(251, 191, 36, 0.22));
    color: #d97706;
}

.auth-icon-ring-error {
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.12), rgba(251, 113, 133, 0.18));
    color: #e11d48;
}

.auth-icon-pulse {
    animation: auth-pulse 2.4s ease-in-out infinite;
}

@keyframes auth-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

.auth-title {
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.auth-subtitle {
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ── Form ── */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.auth-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    letter-spacing: 0.01em;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.auth-input-icon svg {
    width: 1rem;
    height: 1rem;
}

.auth-input-wrap input,
.auth-input-wrap select,
.auth-input-wrap textarea {
    padding-left: 2.3rem;
}

/* When there is no icon inside the wrap, reset padding */
.auth-input-wrap:not(:has(.auth-input-icon)) input,
.auth-input-wrap:not(:has(.auth-input-icon)) select,
.auth-input-wrap:not(:has(.auth-input-icon)) textarea {
    padding-left: 0.7rem;
}

.auth-field-error input,
.auth-field-error select,
.auth-field-error textarea {
    border-color: #fb7185;
    background: #fff1f2;
    box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.1);
}

.auth-field-msg {
    font-size: 0.8rem;
    color: #e11d48;
    font-weight: 600;
    margin-top: 0.15rem;
}

/* ── Error Banner ── */
.auth-error-banner {
    border: 1px solid #fecdd3;
    background: linear-gradient(135deg, #fff1f2, #ffe4e6);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    color: #9f1239;
}

.auth-error-banner ul {
    list-style: disc;
    padding-left: 1.1rem;
    color: #be123c;
}

/* ── Info Box ── */
.auth-info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border: 1px solid #bae6fd;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    color: #0c4a6e;
}

/* ── Buttons ── */
.auth-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    border-radius: 0.85rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-1), var(--brand-2));
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    box-shadow: 0 4px 14px rgba(29, 77, 127, 0.25);
}

.auth-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(29, 77, 127, 0.35);
}

.auth-btn-primary:active {
    transform: translateY(0);
}

.auth-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.auth-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.85rem;
    padding: 0.7rem 1.25rem;
    border: 2px solid var(--brand-1);
    color: var(--brand-ink);
    font-weight: 700;
    font-size: 0.92rem;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.auth-btn-outline:hover {
    background: rgba(42, 95, 150, 0.06);
}

/* ── Card Footer ── */
.auth-card-footer {
    text-align: center;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.auth-card-footer p {
    font-size: 0.85rem;
    color: #64748b;
}

.auth-card-footer a {
    color: var(--brand-1);
    font-weight: 700;
}

.auth-card-footer a:hover {
    text-decoration: underline;
}

/* ── Signup Sections ── */
.auth-section {
    border: 1px solid #e2e8f0;
    border-radius: 0.95rem;
    overflow: hidden;
    background: #fff;
}

.auth-section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
}

.auth-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-1));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}

.auth-section-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #1e293b;
}

.auth-section-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Consent Rows ── */
.auth-consent-row {
    padding: 0.65rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #f8fafc;
    transition: border-color 0.15s;
}

.auth-consent-row:hover {
    border-color: #cbd5e1;
}

.auth-consent-row.auth-field-error {
    border-color: #fb7185;
    background: #fff1f2;
}

.auth-consent-row input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--brand-1);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* ── Child Cards ── */
.child-card {
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    background: #fafbfc;
    transition: border-color 0.15s;
}

.child-card:hover {
    border-color: #cbd5e1;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .auth-card {
        padding: 1.5rem 1.15rem;
        border-radius: 1rem;
    }

    .auth-title {
        font-size: 1.35rem;
    }

    .auth-section-body {
        padding: 0.75rem;
    }
}

.phone-inline-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
}

.phone-inline-row > div {
    flex: 0 0 auto;
}

.phone-inline-row .phone-number-grow {
    flex: 1 1 auto;
}

.site-footer {
    background: linear-gradient(180deg, rgba(233, 246, 255, 0.4), rgba(255, 255, 255, 0.82));
}

.testimonial-track {
    position: relative;
    overflow: hidden;
}

.testimonial-track-row {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: testimonials-slide 38s linear infinite;
    will-change: transform;
}

.testimonial-track:hover .testimonial-track-row {
    animation-play-state: paused;
}

.testimonial-card {
    width: min(310px, 80vw);
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 0.95rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    padding: 1rem;
}

.testimonial-quote {
    color: #1e293b;
    font-weight: 700;
    line-height: 1.5;
}

.testimonial-author {
    margin-top: 0.6rem;
    color: #0369a1;
    font-size: 0.9rem;
    font-weight: 700;
}

@keyframes testimonials-slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.prose {
    color: #1f2937;
    line-height: 1.75;
}

.prose > *:first-child {
    margin-top: 0;
}

.prose > *:last-child {
    margin-bottom: 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    color: #0f172a;
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 1.6rem;
    margin-bottom: 0.7rem;
}

.prose h1 {
    font-size: 2rem;
}

.prose h2 {
    font-size: 1.6rem;
}

.prose h3 {
    font-size: 1.3rem;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre,
.prose table {
    margin-bottom: 1rem;
}

.prose ul {
    list-style: disc;
    padding-left: 1.5rem;
}

.prose ol {
    list-style: decimal;
    padding-left: 1.5rem;
}

.prose li + li {
    margin-top: 0.35rem;
}

.prose a {
    color: #0f766e;
    text-decoration: underline;
}

.prose code {
    background: #e2e8f0;
    border-radius: 0.25rem;
    padding: 0.1rem 0.35rem;
}

.prose pre {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    overflow-x: auto;
}

.prose pre code {
    background: transparent;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Portal Pages – Dashboard / Teacher / Parent / Student
   ═══════════════════════════════════════════════════════════════════ */

/* ── Portal Header ── */
.portal-header {
    margin-bottom: 1.75rem;
}

.portal-header h1 {
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
}

.portal-header-sub {
    color: #64748b;
    font-size: 0.95rem;
    margin-top: 0.25rem;
}

.portal-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.portal-role-badge-student {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
}

.portal-role-badge-parent {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
}

.portal-role-badge-teacher {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #5b21b6;
}

.portal-role-badge-admin {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

/* ── Stat Cards ── */
.portal-stats {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.portal-stat {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    transition: transform 0.15s, box-shadow 0.15s;
}

.portal-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.09);
}

.portal-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.portal-stat-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.portal-stat-icon-blue {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #2563eb;
}

.portal-stat-icon-teal {
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
    color: #0d9488;
}

.portal-stat-icon-amber {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #d97706;
}

.portal-stat-icon-purple {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #7c3aed;
}

.portal-stat-icon-rose {
    background: linear-gradient(135deg, #ffe4e6, #fecdd3);
    color: #e11d48;
}

.portal-stat-icon-green {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #059669;
}

.portal-stat-body {
    flex: 1;
    min-width: 0;
}

.portal-stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.portal-stat-value {
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
}

/* ── Portal Sections ── */
.portal-section {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.portal-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.portal-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}

.portal-section-title svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--brand-1);
    flex-shrink: 0;
}

.portal-section-body {
    padding: 1rem 1.25rem;
}

/* ── Portal Tables ── */
.portal-table {
    width: 100%;
    text-align: left;
    font-size: 0.875rem;
    border-collapse: separate;
    border-spacing: 0;
}

.portal-table thead th {
    padding: 0.65rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.portal-table thead th:first-child {
    border-radius: 0.5rem 0 0 0;
}

.portal-table thead th:last-child {
    border-radius: 0 0.5rem 0 0;
}

.portal-table tbody td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.portal-table tbody tr:last-child td {
    border-bottom: none;
}

.portal-table tbody tr:hover td {
    background: rgba(42, 95, 150, 0.04);
}

.portal-table tbody tr:nth-child(even) td {
    background: rgba(248, 250, 252, 0.6);
}

.portal-table tbody tr:nth-child(even):hover td {
    background: rgba(42, 95, 150, 0.04);
}

/* ── Filter Bar ── */
.portal-filter-bar {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 1rem 1.15rem;
    margin-top: 1rem;
    display: grid;
    gap: 0.75rem;
    align-items: end;
}

.portal-filter-bar label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
}

.portal-filter-bar select {
    font-size: 0.875rem;
}

.portal-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── Timeline Improvements ── */
.portal-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.portal-day {
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s;
}

.portal-day:hover {
    border-color: #cbd5e1;
}

.portal-day[open] {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(42, 95, 150, 0.08);
}

.portal-day summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 700;
    color: #1e293b;
    user-select: none;
    transition: background 0.15s;
}

.portal-day summary:hover {
    background: #f8fafc;
}

.portal-day summary::-webkit-details-marker {
    display: none;
}

.portal-day-date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.portal-day-date svg {
    width: 1rem;
    height: 1rem;
    color: var(--brand-1);
}

.portal-day-counts {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.portal-day-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

.portal-day-pill-hw {
    background: #dbeafe;
    color: #1e40af;
}

.portal-day-pill-pn {
    background: #d1fae5;
    color: #065f46;
}

.portal-day-pill-gr {
    background: #fef3c7;
    color: #92400e;
}

.portal-day-content {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid #f1f5f9;
}

.portal-day-group {
    margin-bottom: 0.75rem;
}

.portal-day-group:last-child {
    margin-bottom: 0;
}

.portal-day-group-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.35rem;
}

.portal-day-group-title svg {
    width: 0.9rem;
    height: 0.9rem;
}

.portal-day-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.portal-day-list li {
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #334155;
    border-left: 3px solid transparent;
}

.portal-day-list li:hover {
    background: #f8fafc;
}

.portal-day-list-hw li { border-left-color: #3b82f6; }
.portal-day-list-pn li { border-left-color: #10b981; }
.portal-day-list-gr li { border-left-color: #f59e0b; }

/* ── Halaqa Cards (Teacher Dashboard) ── */
.portal-halaqa-card {
    border: 1px solid #e2e8f0;
    border-radius: 0.95rem;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.portal-halaqa-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 16px rgba(42, 95, 150, 0.08);
}

.portal-halaqa-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
}

.portal-halaqa-head-info h3 {
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.portal-halaqa-head-info p {
    font-size: 0.82rem;
    color: #64748b;
}

.portal-halaqa-schedule {
    font-size: 0.82rem;
    color: #64748b;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.portal-halaqa-schedule svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--brand-2);
    flex-shrink: 0;
}

.portal-halaqa-body {
    padding: 0;
}

/* ── Log Cards ── */
.portal-log {
    border-left: 3px solid var(--brand-2);
    background: #f8fafc;
    border-radius: 0 0.65rem 0.65rem 0;
    padding: 0.75rem 0.9rem;
    transition: background 0.15s;
}

.portal-log:hover {
    background: #f1f5f9;
}

.portal-log-kind {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.portal-log-kind-homework {
    background: #dbeafe;
    color: #1e40af;
}

.portal-log-kind-progress {
    background: #d1fae5;
    color: #065f46;
}

.portal-log-kind-assessment {
    background: #fef3c7;
    color: #92400e;
}

.portal-log-kind-general {
    background: #ede9fe;
    color: #5b21b6;
}

.portal-log-meta {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 0.15rem;
}

.portal-log-text {
    font-size: 0.875rem;
    color: #334155;
    margin-top: 0.3rem;
}

/* ── Badges ── */
.portal-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.portal-badge-green {
    background: #d1fae5;
    color: #065f46;
}

.portal-badge-slate {
    background: #f1f5f9;
    color: #475569;
}

.portal-badge-amber {
    background: #fef3c7;
    color: #92400e;
}

.portal-badge-blue {
    background: #dbeafe;
    color: #1e40af;
}

.portal-badge-rose {
    background: #ffe4e6;
    color: #be123c;
}

/* ── Empty States ── */
.portal-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #94a3b8;
}

.portal-empty svg {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.5rem;
    opacity: 0.5;
}

.portal-empty p {
    font-size: 0.92rem;
    font-weight: 600;
}

/* ── Portal Forms ── */
.portal-form-card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 1.15rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    padding: 1.75rem 1.5rem;
    max-width: 36rem;
}

.portal-form-card h1 {
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.portal-form-card .portal-form-sub {
    color: #64748b;
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

.portal-form-field {
    margin-bottom: 1rem;
}

.portal-form-field label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.3rem;
}

/* ── Toggle switch (iOS-style) for single boolean checkboxes ── */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 40px;
    height: 22px;
    background: #cbd5e1;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    margin: 0;
}

.toggle-switch input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-1));
}

.toggle-switch input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

.toggle-switch input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--brand-1);
    outline-offset: 2px;
}

/* ── Styled checkbox group for multi-select (program_days, enabled_subjects) ── */
.pill-checkbox-group ul,
.pill-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pill-checkbox-group li {
    margin: 0;
}

.pill-checkbox-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.6rem;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    margin: 0;
}

.pill-checkbox-group label:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.pill-checkbox-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    transition: all 0.15s;
}

.pill-checkbox-group input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-1));
    border-color: var(--brand-1);
}

.pill-checkbox-group input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pill-checkbox-group label:has(input:checked) {
    border-color: var(--brand-1);
    background: rgba(42, 95, 150, 0.05);
    color: var(--brand-ink);
}

.portal-form-footer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.5rem;
}

/* ── Messages Section ── */
.portal-messages-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.portal-msg-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.portal-msg-pill-count {
    background: var(--brand-1);
    color: #fff;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    font-size: 0.68rem;
    min-width: 1.2rem;
    text-align: center;
}

/* ── Roster Items ── */
.portal-roster-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
    text-decoration: none;
    color: #1e293b;
    font-weight: 600;
}

.portal-roster-item:hover {
    border-color: #93c5fd;
    background: #f0f9ff;
}

.portal-roster-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-1));
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* ── Activity Day Headers ── */
.portal-activity-day {
    margin-bottom: 1rem;
}

.portal-activity-day:last-child {
    margin-bottom: 0;
}

.portal-activity-day-head {
    font-size: 0.78rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.portal-activity-day-head svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* ── Grade Band Colors ── */
.portal-grade-a { color: #059669; font-weight: 700; }
.portal-grade-b { color: #2563eb; font-weight: 700; }
.portal-grade-c { color: #d97706; font-weight: 700; }
.portal-grade-d { color: #ea580c; font-weight: 700; }
.portal-grade-f { color: #dc2626; font-weight: 700; }

/* ── Responsive Portal ── */
@media (max-width: 640px) {
    .portal-stat {
        padding: 0.75rem 0.85rem;
    }

    .portal-stat-icon {
        width: 2.25rem;
        height: 2.25rem;
    }

    .portal-stat-icon svg {
        width: 1.1rem;
        height: 1.1rem;
    }

    .portal-stat-value {
        font-size: 1.35rem;
    }

    .portal-section-body {
        padding: 0.75rem 0.85rem;
    }

    .portal-section-head {
        padding: 0.75rem 0.85rem;
    }

    .portal-form-card {
        padding: 1.25rem 1rem;
    }

    .portal-day summary {
        padding: 0.6rem 0.75rem;
    }

    .portal-day-content {
        padding: 0.6rem 0.75rem 0.75rem;
    }
}

@media (max-width: 1024px) {
    .site-menu {
        font-size: 0.95rem;
    }

    .surface-card {
        border-radius: 0.9rem;
    }
}

@media (max-width: 640px) {
    .site-menu .nav-pill {
        padding: 0.6rem 0.75rem;
        width: 100%;
        border-radius: 0.45rem;
        font-size: 0.9rem;
    }

    .site-logo {
        width: 100px;
    }

    .hero-card {
        border-radius: 1.1rem;
    }

    .site-logo {
        width: 140px;
    }

    h1 {
        font-size: 1.7rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.35rem;
        line-height: 1.25;
    }

    .btn-solid,
    .btn-mini,
    .btn-mini-secondary {
        min-height: 42px;
    }

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    .site-footer > div {
        flex-direction: column;
        align-items: flex-start;
    }

    .testimonial-card {
        width: min(280px, 86vw);
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Internationalization (i18n)
   ────────────────────────────────────────────────────────────────────── */

/* Language switcher (header nav) */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.lang-switcher-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    padding: 0.25rem 1.75rem 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.85rem;
}
.lang-switcher-select option {
    color: #1e293b;
}
/* On the white mobile dropdown the pill needs darker text */
.mobile-nav .lang-switcher-select {
    background-color: rgba(15, 23, 42, 0.06);
    color: #1e293b;
    border-color: rgba(15, 23, 42, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231e293b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    width: 100%;
}

/* ── RTL foundation (Arabic) ───────────────────────────────────────────
   Layout flips automatically for elements using logical Tailwind utilities
   (ms-/me-/ps-/pe-/start-/end-). The rules below cover the few cases that
   rely on physical direction or fixed transforms. As more templates migrate
   to logical utilities (Layer 3), this block should stay small. */
[dir="rtl"] body,
[dir="rtl"] .site-shell {
    font-family: "Cairo", "Nunito", system-ui, sans-serif;
}
[dir="rtl"] .lang-switcher-select {
    padding: 0.25rem 0.75rem 0.25rem 1.75rem;
    background-position: left 0.5rem center;
}

/* ── RTL overrides for hand-written components ─────────────────────────
   Tailwind utilities in templates flip automatically (migrated to logical
   ms-/me-/ps-/pe-/text-start/text-end/start-/end- classes). These rules
   cover the custom CSS that still uses physical left/right. */

/* Text alignment */
[dir="rtl"] .portal-table { text-align: right; }

/* Auth input icon sits on the start (right) side; flip the icon padding */
[dir="rtl"] .auth-input-icon { left: auto; right: 0.7rem; }
[dir="rtl"] .auth-input-wrap input,
[dir="rtl"] .auth-input-wrap select,
[dir="rtl"] .auth-input-wrap textarea { padding-left: 0.7rem; padding-right: 2.3rem; }
[dir="rtl"] .auth-input-wrap:not(:has(.auth-input-icon)) input,
[dir="rtl"] .auth-input-wrap:not(:has(.auth-input-icon)) select,
[dir="rtl"] .auth-input-wrap:not(:has(.auth-input-icon)) textarea { padding-right: 0.7rem; }

/* List indentation flips to the start (right) side */
[dir="rtl"] .form-error-summary ul { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .auth-error-banner ul { padding-left: 0; padding-right: 1.1rem; }
[dir="rtl"] .prose ul,
[dir="rtl"] .prose ol { padding-left: 0; padding-right: 1.5rem; }

/* Accent border stripes move to the start (right) edge */
[dir="rtl"] .note-item { border-left: none; border-right: 4px solid var(--brand-2); }
[dir="rtl"] .portal-log { border-left: none; border-right: 3px solid var(--brand-2); }
[dir="rtl"] .portal-day-list li { border-left: none; border-right: 3px solid transparent; }
[dir="rtl"] .portal-day-list-hw li { border-right-color: #3b82f6; }
[dir="rtl"] .portal-day-list-pn li { border-right-color: #10b981; }
[dir="rtl"] .portal-day-list-gr li { border-right-color: #f59e0b; }

/* Toggle switch knob slides from the right in RTL */
[dir="rtl"] .toggle-switch input[type="checkbox"]::before { left: auto; right: 2px; }
[dir="rtl"] .toggle-switch input[type="checkbox"]:checked::before { transform: translateX(-18px); }

/* ── Square icon action button ───────────────────────────────────────
   The row-level verbs (view, edit, delete, add) on the Organizations page.
   In CSS rather than repeated utility strings because an organization row and
   a program row sit one above the other: written inline, the two drifted into
   words on one and icons on the other, which read as two different kinds of
   thing when they are the same four actions at two levels. */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #1e293b; }
.icon-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.icon-btn svg { width: 1rem; height: 1rem; }
/* Carries a label beside the icon; the label hides on narrow screens. */
.icon-btn-labelled { width: auto; padding: 0 0.7rem; font-size: 0.75rem; font-weight: 600; }
.icon-btn-primary {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-ink), var(--brand-1));
}
.icon-btn-primary:hover { color: #fff; filter: brightness(1.06); border-color: transparent; }
.icon-btn-danger { color: #f43f5e; }
.icon-btn-danger:hover { background: #fff1f2; border-color: #fecdd3; color: #e11d48; }
@media (max-width: 639px) {
    .icon-btn-labelled .icon-btn-label { display: none; }
    .icon-btn-labelled { width: 2rem; padding: 0; }
}