/* ============================================================
   Meditatii Platform — Frontend Design System (M7+)
   Scoped to plugin shortcode output (.mp-* roots).
   Flat design: borders + whitespace, no heavy shadows.

   Spacing follows Apple Human Interface Guidelines (Layout):
   - 4pt micro grid for component internals
   - 8pt layout grid for page structure (values: 8, 16, 24, 32, 48…)
   - Screen edge insets: 16pt compact / 20pt regular
   - Touch targets: minimum 44×44pt
   - EduVirtualSchool brand colors unchanged
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
    --mp-brand: #007bff;
    --mp-brand-600: #0067d6;
    --mp-brand-700: #0056b3;
    --mp-brand-50: #eaf3ff;
    --mp-brand-100: #d6e8ff;

    --mp-accent: #eb3778;
    --mp-accent-600: #d62768;
    --mp-accent-50: #fdeaf1;

    --mp-ink: #002968;
    --mp-ink-2: #4a5b80;
    --mp-ink-3: #8593b0;

    --mp-bg: #f4f7fc;
    --mp-surface: #ffffff;
    --mp-surface-2: #f8fafd;

    --mp-line: #e3e9f3;
    --mp-line-strong: #d3dcec;

    --mp-success: #1f9d6b;
    --mp-success-bg: #e7f6ef;
    --mp-warning: #e29010;
    --mp-warning-bg: #fdf2dd;
    --mp-danger: #e5484d;
    --mp-danger-bg: #fdeaea;
    --mp-info: #007bff;
    --mp-info-bg: #eaf3ff;
    --mp-neutral: #6b7896;
    --mp-neutral-bg: #eef1f7;

    --mp-r-sm: 8px;
    --mp-r-md: 12px;
    --mp-r-lg: 16px;
    --mp-r-xl: 22px;
    --mp-r-pill: 999px;

    --mp-shadow-sm: 0 4px 14px rgba(0, 41, 104, 0.08);

    --mp-font-head: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --mp-font-body: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* Apple HIG 4pt/8pt spacing scale */
    --mp-space-1: 4px;
    --mp-space-2: 8px;
    --mp-space-3: 12px;
    --mp-space-4: 16px;
    --mp-space-5: 20px;
    --mp-space-6: 24px;
    --mp-space-7: 32px;
    --mp-space-8: 48px;
    --mp-space-9: 64px;

    /* Semantic spacing (Apple HIG roles) */
    --mp-gutter-compact: var(--mp-space-4);
    --mp-gutter-regular: var(--mp-space-5);
    --mp-inset-card: var(--mp-space-4);
    --mp-inset-card-lg: var(--mp-space-6);
    --mp-gap-inline: var(--mp-space-2);
    --mp-gap-control: var(--mp-space-2);
    --mp-gap-stack: var(--mp-space-4);
    --mp-gap-form: var(--mp-space-4);
    --mp-gap-section: var(--mp-space-6);
    --mp-gap-region: var(--mp-space-7);
    --mp-touch-min: 44px;
    --mp-line-height-body: 1.47;
    --mp-line-height-tight: 1.25;

    /* Legacy aliases (backward compatible) */
    --mp-s1: var(--mp-space-1);
    --mp-s2: var(--mp-space-2);
    --mp-s3: var(--mp-space-3);
    --mp-s4: var(--mp-space-4);
    --mp-s5: var(--mp-space-5);
    --mp-s6: var(--mp-space-6);
    --mp-s7: var(--mp-space-7);
    --mp-s8: var(--mp-space-8);

    /* Vertical rhythm */
    --mp-rhythm: var(--mp-gap-section);
    --mp-rhythm-sm: var(--mp-gap-section);
    --mp-rhythm-lg: var(--mp-gap-region);
}

/* ---------- Scope root ---------- */
:is(
    .mp-dashboard,
    .mp-group-page,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-subscription,
    .mp-profile,
    .mp-app,
    .mp-shortcode-placeholder
) {
    box-sizing: border-box;
    color: var(--mp-ink);
    font-family: var(--mp-font-head);
    font-size: 15px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    line-height: var(--mp-line-height-body);
    max-width: 100%;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

:is(
    .mp-dashboard,
    .mp-group-page,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-subscription,
    .mp-profile,
    .mp-app
) *,
:is(
    .mp-dashboard,
    .mp-group-page,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-subscription,
    .mp-profile,
    .mp-app
) *::before,
:is(
    .mp-dashboard,
    .mp-group-page,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-subscription,
    .mp-profile,
    .mp-app
) *::after {
    box-sizing: border-box;
}

:is(
    .mp-dashboard,
    .mp-group-page,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-subscription,
    .mp-profile,
    .mp-app
) h1,
:is(
    .mp-dashboard,
    .mp-group-page,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-subscription,
    .mp-profile,
    .mp-app
) h2,
:is(
    .mp-dashboard,
    .mp-group-page,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-subscription,
    .mp-profile,
    .mp-app
) h3,
:is(
    .mp-dashboard,
    .mp-group-page,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-subscription,
    .mp-profile,
    .mp-app
) h4 {
    color: var(--mp-ink);
    font-family: var(--mp-font-head);
    line-height: 1.2;
    margin: 0;
}

/* ---------- Page titles ---------- */
.mp-dashboard > h2,
.mp-group-page > h2,
.mp-admin > h2,
.mp-feedback > h2,
.mp-homework > h2,
.mp-subscription > h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: var(--mp-s6);
}

.mp-feedback-recent h3,
.mp-homework-recent h3,
.mp-subscription-recent h3,
.mp-child-section > h3,
.mp-group-people h3,
.mp-subscription-detail h3,
.mp-subscription-terms h4,
.mp-subscription-history h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--mp-s4);
}

/* ---------- Sections / cards ---------- */
.mp-feedback-recent,
.mp-homework-recent,
.mp-subscription-recent,
.mp-child-section,
.mp-group-people {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    margin-bottom: var(--mp-s5);
    padding: var(--mp-s6);
}

.mp-child-section:last-child {
    margin-bottom: 0;
}

/* ---------- Placeholder / denied ---------- */
.mp-shortcode-placeholder {
    background: var(--mp-surface-2);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-md);
    color: var(--mp-ink);
    font-size: 15px;
    line-height: var(--mp-line-height-body);
    padding: var(--mp-s4);
}

.mp-shortcode-placeholder--denied {
    background: var(--mp-danger-bg);
    border-color: #f0b7b7;
    color: #8a1f1f;
}

/* ---------- Empty / info states ---------- */
.mp-empty-state {
    background: var(--mp-surface-2);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    color: var(--mp-ink-2);
    margin: 0 0 var(--mp-s4);
    padding: var(--mp-s5) var(--mp-s6);
    text-align: center;
}

.mp-empty-state--info {
    background: var(--mp-warning-bg);
    border-color: #f0d58a;
    color: #7a5d00;
    text-align: left;
}

/* ---------- Notices ---------- */
.mp-notice {
    border-radius: var(--mp-r-md);
    font-size: 14px;
    margin: 0 0 var(--mp-s4);
    padding: var(--mp-s3) var(--mp-s4);
}

.mp-notice--success {
    background: var(--mp-success-bg);
    border: 1px solid #86efac;
    color: var(--mp-success);
}

.mp-notice--error {
    background: var(--mp-danger-bg);
    border: 1px solid #f0b7b7;
    color: #8a1f1f;
}

.mp-notice--warning {
    background: var(--mp-warning-bg);
    border: 1px solid #f0d58a;
    color: #7a5d00;
}

.mp-notice--info {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    color: #1e40af;
}

.mp-admin-role-notice {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    line-height: 1.45;
}

.mp-admin-role-notice i {
    flex-shrink: 0;
    margin-top: 2px;
}

.mp-app .main-inner > .mp-admin-role-notice {
    margin-bottom: var(--mp-gap-stack);
}

.mp-admin-role-fallback {
    gap: var(--mp-space-4);
    max-width: 36rem;
}

/* ---------- Badges (mockup .badge) ---------- */
.mp-badge {
    align-items: center;
    border-radius: var(--mp-r-pill);
    display: inline-flex;
    font-family: var(--mp-font-head);
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    line-height: 1.2;
    padding: 4px 10px;
    white-space: nowrap;
}

.mp-badge--wrap {
    white-space: normal;
}

.mp-badge--stacked {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    line-height: 1.3;
    padding: 8px 14px;
    white-space: normal;
}

.mp-badge__line {
    display: block;
}

.mp-badge__line--sub {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.92;
}

.mp-badge::before {
    content: none;
    display: none;
}

.mp-badge--dot::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    display: block;
    flex-shrink: 0;
    height: 7px;
    width: 7px;
}

.mp-badge--success {
    background: var(--mp-success-bg);
    color: var(--mp-success);
}

.mp-badge--warning {
    background: var(--mp-warning-bg);
    color: var(--mp-warning);
}

.mp-badge--danger {
    background: var(--mp-danger-bg);
    color: var(--mp-danger);
}

.mp-subscription-banner__badge.mp-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.mp-subscription-banner__badge.mp-badge::before {
    background: #fff;
    content: "";
    display: block;
}

/* ---------- Buttons (mockup .btn) ---------- */
.mp-button {
    align-items: center;
    background: var(--mp-surface);
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-r-md);
    color: var(--mp-ink);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--mp-font-head);
    font-size: 14px;
    font-weight: 600;
    gap: var(--mp-gap-inline);
    justify-content: center;
    min-height: var(--mp-touch-min);
    padding: var(--mp-space-3) var(--mp-space-4);
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}

.mp-button:hover {
    background: var(--mp-surface-2);
    border-color: var(--mp-ink-3);
    opacity: 1;
    text-decoration: none;
}

.mp-button--primary {
    background: var(--mp-brand);
    border-color: var(--mp-brand);
    color: #fff;
}

.mp-button--primary:hover {
    background: var(--mp-brand-600);
    border-color: var(--mp-brand-600);
    color: #fff;
}

.mp-button--secondary {
    background: var(--mp-surface);
    border-color: var(--mp-line-strong);
    color: var(--mp-ink);
}

.mp-button--secondary:hover,
.mp-button--secondary:focus-visible {
    background: var(--mp-surface-2);
    border-color: var(--mp-ink-3);
    color: var(--mp-ink);
    text-decoration: none;
}

.mp-button--link {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--mp-brand);
    min-height: 0;
    padding: 0;
}

.mp-button--link:hover,
.mp-button--link:focus-visible {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--mp-brand-700);
    text-decoration: none;
}

.mp-admin-header .mp-button--primary::before {
    content: "\f067";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* ---------- Links (mockup: no default underline; color/bg on hover) ---------- */
.mp-link {
    color: var(--mp-brand);
    font-family: var(--mp-font-head);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.12s ease;
}

.mp-link:hover,
.mp-link:focus-visible {
    color: var(--mp-brand-700);
    text-decoration: none;
}

.mp-link[target="_blank"]::after {
    content: "\f35d";
    font-family: "Font Awesome 6 Free";
    font-size: 0.85em;
    font-weight: 900;
    margin-left: 4px;
    opacity: 0.7;
}

/* ---------- Forms (mockup .field / .input) ---------- */
.mp-form {
    margin: 0 0 var(--mp-s5);
}

.mp-form-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: var(--mp-s4);
}

.mp-form-label {
    color: var(--mp-ink);
    font-family: var(--mp-font-head);
    font-size: 13px;
    font-weight: 600;
}

.mp-form-field {
    min-width: 0;
}

.mp-form-help {
    color: var(--mp-ink-3);
    font-size: 12px;
    margin: 0 0 var(--mp-s3);
}

.mp-form-actions {
    margin-top: var(--mp-s4);
}

.mp-form--filter {
    background: var(--mp-surface-2);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-s3);
    margin-bottom: var(--mp-s5);
    padding: var(--mp-s4);
}

.mp-form--filter .mp-select {
    flex: 1;
    min-width: 160px;
}

.mp-input,
.mp-select,
.mp-textarea {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-r-md);
    color: var(--mp-ink);
    font-family: var(--mp-font-head);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    max-width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    transition: border-color 0.12s, box-shadow 0.12s;
    width: 100%;
    -webkit-text-fill-color: currentColor;
}

.mp-input::placeholder,
.mp-textarea::placeholder {
    color: var(--mp-ink-3);
    opacity: 1;
}

.mp-input:focus,
.mp-select:focus,
.mp-textarea:focus {
    border-color: var(--mp-brand);
    box-shadow: 0 0 0 3px var(--mp-brand-50);
    outline: none;
}

.mp-textarea {
    line-height: 1.55;
    min-height: 100px;
    resize: vertical;
}

.mp-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238593b0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-position: right 13px center;
    background-repeat: no-repeat;
    padding-right: 38px;
    text-overflow: ellipsis;
}

.mp-select option {
    color: var(--mp-ink);
}

.mp-input--date {
    max-width: 220px;
}

.mp-feedback-date-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-s2);
    margin-bottom: var(--mp-s5);
}

/* File upload — dropzone feel */
.mp-form input[type="file"].mp-input {
    background: var(--mp-surface-2);
    border-style: dashed;
    padding: var(--mp-s5);
}

/* ---------- Tables (mockup .tbl) ---------- */
.mp-table-wrap {
    margin-bottom: var(--mp-s4);
    min-width: 0;
    overflow-x: visible;
    width: 100%;
}

.mp-table {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-collapse: collapse;
    border-radius: var(--mp-r-lg);
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.mp-table th {
    background: var(--mp-surface-2);
    border-bottom: 1px solid var(--mp-line);
    color: var(--mp-ink-3);
    font-family: var(--mp-font-head);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 12px 16px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.mp-table td {
    border-bottom: 1px solid var(--mp-line);
    font-size: 14px;
    padding: 14px 16px;
    vertical-align: middle;
}

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

.mp-table tbody tr:hover {
    background: var(--mp-surface-2);
}

.mp-table td strong {
    font-family: var(--mp-font-head);
    font-weight: 600;
}

.mp-actions {
    white-space: normal;
}

.mp-inline-form {
    display: inline;
}

/* ---------- Admin header (mockup .page-head) ---------- */
.mp-admin-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-s4);
    justify-content: space-between;
    margin-bottom: var(--mp-s6);
}

.mp-admin-header h2 {
    margin-bottom: 0;
}

.mp-admin-columns {
    display: grid;
    gap: var(--mp-s5);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: var(--mp-s5);
}

/* ---------- Details list (mockup .kv) ---------- */
.mp-details {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    display: grid;
    gap: var(--mp-s3) var(--mp-s5);
    grid-template-columns: max-content minmax(0, 1fr);
    margin-bottom: var(--mp-s5);
    padding: var(--mp-s6);
}

.mp-details dt {
    color: var(--mp-ink-3);
    font-family: var(--mp-font-head);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mp-details dd {
    font-family: var(--mp-font-head);
    font-size: 14.5px;
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;
}

.mp-group-description {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    color: var(--mp-ink-2);
    line-height: 1.6;
    margin-bottom: var(--mp-s5);
    padding: var(--mp-s5);
}

/* ---------- Lists ---------- */
.mp-list {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    list-style: none;
    margin: 0 0 var(--mp-s4);
    padding: var(--mp-s3) var(--mp-s5);
}

.mp-list li {
    border-bottom: 1px solid var(--mp-line);
    font-size: 14px;
    overflow-wrap: anywhere;
    padding: 12px 0;
}

.mp-list li:last-child {
    border-bottom: none;
}

/* ---------- Feedback ---------- */
.mp-feedback-meta {
    color: var(--mp-ink-2);
    font-size: 14px;
    margin-bottom: var(--mp-s5);
}

.mp-feedback-grid {
    display: grid;
    gap: var(--mp-s5);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: var(--mp-s5);
}

.mp-feedback-card {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    display: flex;
    flex-direction: column;
    gap: var(--mp-s3);
    padding: var(--mp-s5);
}

.mp-feedback-card__header strong {
    font-family: var(--mp-font-head);
    font-size: 15px;
    font-weight: 600;
}

.mp-feedback-card__sub {
    color: var(--mp-ink-3);
    display: block;
    font-size: 12.5px;
    margin-top: 2px;
}

.mp-feedback-card__saved {
    color: var(--mp-success);
    font-size: 13px;
    margin: 0;
}

.mp-feedback-list {
    display: grid;
    gap: var(--mp-s3);
}

.mp-feedback-item {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    padding: var(--mp-s4) var(--mp-s5);
}

.mp-feedback-item__header {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-s2);
    margin-bottom: var(--mp-s3);
}

.mp-feedback-item__header strong {
    font-family: var(--mp-font-head);
    font-size: 14px;
}

.mp-feedback-item__date {
    color: var(--mp-ink-3);
    font-size: 12px;
    margin-left: auto;
}

.mp-feedback-item__teacher {
    color: var(--mp-ink-2);
    font-size: 14px;
    margin-bottom: var(--mp-s3);
}

.mp-feedback-item__content {
    color: var(--mp-ink);
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.mp-feedback-item__content p {
    margin: 0 0 var(--mp-s2);
}

.mp-feedback-item__rating {
    color: var(--mp-ink-2);
    font-size: 14px;
    margin-top: var(--mp-s3);
}

/* ---------- Homework ---------- */
.mp-homework-status {
    background: var(--mp-info-bg);
    border: 1px solid var(--mp-brand-100);
    border-radius: var(--mp-r-md);
    color: var(--mp-brand-700);
    font-family: var(--mp-font-head);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: var(--mp-s4);
    padding: var(--mp-s3) var(--mp-s4);
}

.mp-homework-feedback {
    background: var(--mp-surface-2);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    color: var(--mp-ink-2);
    line-height: 1.55;
    margin-bottom: var(--mp-s4);
    padding: var(--mp-s4) var(--mp-s5);
}

/* ---------- Subscription (mockup payment-status) ---------- */
.mp-subscription-intro {
    color: var(--mp-ink-2);
    margin-bottom: var(--mp-s5);
}

.mp-subscription-summary {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    margin-bottom: var(--mp-s4);
    padding: var(--mp-s5);
}

.mp-subscription-summary__due {
    color: var(--mp-ink-2);
    font-size: 14px;
    margin-top: var(--mp-s3);
}

.mp-subscription-detail {
    margin-bottom: var(--mp-s7);
}

.mp-subscription-banner {
    background: var(--mp-brand);
    border: none;
    border-radius: var(--mp-r-lg);
    color: #fff;
    margin-bottom: var(--mp-s5);
    padding: var(--mp-s6);
}

.mp-subscription-banner--active {
    background: var(--mp-success);
}

.mp-subscription-banner__amount {
    font-family: var(--mp-font-head);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin: var(--mp-s3) 0 var(--mp-s1);
}

.mp-subscription-banner__plan {
    margin: 0 0 var(--mp-s4);
    opacity: 0.9;
}

.mp-subscription-banner__meta {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    display: grid;
    gap: var(--mp-s3) var(--mp-s6);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin: 0;
    padding-top: var(--mp-s4);
}

.mp-subscription-banner__meta dt {
    font-size: 12px;
    margin-bottom: 4px;
    opacity: 0.85;
}

.mp-subscription-banner__meta dd {
    font-family: var(--mp-font-head);
    font-weight: 700;
    margin: 0;
}

.mp-subscription-terms,
.mp-subscription-history {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    margin-bottom: var(--mp-s4);
    padding: var(--mp-s5);
}

.mp-subscription-note {
    margin-top: var(--mp-s4);
}

/* ---------- Overflow guards ---------- */
.mp-table-wrap,
.mp-feedback-grid,
.mp-admin-columns,
.mp-details,
.mp-subscription-banner__meta {
    min-width: 0;
}

/* ============================================================
   RESPONSIVE — tables → card rows, zero horizontal scroll
   Breakpoint aligned with mockup (~760px)
   ============================================================ */
@media (max-width: 760px) {
    .mp-dashboard > h2,
    .mp-group-page > h2,
    .mp-admin > h2,
    .mp-feedback > h2,
    .mp-homework > h2,
    .mp-subscription > h2 {
        font-size: 22px;
        margin-bottom: var(--mp-s5);
    }

    .mp-feedback-recent,
    .mp-homework-recent,
    .mp-subscription-recent,
    .mp-child-section,
    .mp-group-people {
        padding: var(--mp-s4);
    }

    .mp-admin-header {
        flex-direction: column;
        align-items: stretch;
    }

    .mp-admin-header .mp-button--primary {
        justify-content: center;
        width: 100%;
    }

    .mp-details {
        grid-template-columns: 1fr;
        padding: var(--mp-s4);
    }

    .mp-details dt {
        margin-top: var(--mp-s2);
    }

    .mp-details dt:first-child {
        margin-top: 0;
    }

    .mp-feedback-grid {
        grid-template-columns: 1fr;
    }

    .mp-form--filter {
        flex-direction: column;
    }

    .mp-form--filter .mp-button {
        width: 100%;
    }

    .mp-button {
        min-height: 44px;
    }

    .mp-input,
    .mp-select {
        min-height: 46px;
    }

    .mp-subscription-banner {
        padding: var(--mp-s5);
    }

    .mp-subscription-banner__amount {
        font-size: 24px;
    }

    /* Table → stacked cards (CSS-only, no data-label) */
    .mp-table {
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .mp-table thead {
        border: 0;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .mp-table tbody {
        display: flex;
        flex-direction: column;
        gap: var(--mp-s3);
    }

    .mp-table tbody tr {
        background: var(--mp-surface);
        border: 1px solid var(--mp-line);
        border-radius: var(--mp-r-lg);
        display: block;
        overflow: hidden;
    }

    .mp-table tbody tr:hover {
        background: var(--mp-surface);
    }

    .mp-table tbody td {
        border-bottom: 1px solid var(--mp-line);
        display: block;
        overflow-wrap: anywhere;
        padding: 10px 16px;
        text-align: left;
    }

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

    .mp-table tbody td:first-child {
        background: var(--mp-surface-2);
        font-family: var(--mp-font-head);
        font-size: 15px;
        font-weight: 600;
        padding-bottom: 12px;
        padding-top: 14px;
    }

    .mp-table tbody td.mp-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--mp-s2);
    }

    .mp-table tbody td.mp-actions .mp-link,
    .mp-table tbody td.mp-actions .mp-button {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 380px) {
    .mp-dashboard > h2,
    .mp-group-page > h2,
    .mp-admin > h2,
    .mp-feedback > h2,
    .mp-homework > h2,
    .mp-subscription > h2 {
        font-size: 20px;
    }

    .mp-subscription-banner__amount {
        font-size: 22px;
    }
}

/* ============================================================
   M7.1 — App shell (mockup .app / sidebar / topbar / layout)
   Scoped under .mp-app — aliases mockup token names.
   ============================================================ */

.mp-app {
    --brand: var(--mp-brand);
    --brand-600: var(--mp-brand-600);
    --brand-700: var(--mp-brand-700);
    --brand-50: var(--mp-brand-50);
    --brand-100: var(--mp-brand-100);
    --accent: var(--mp-accent);
    --accent-600: var(--mp-accent-600);
    --accent-50: var(--mp-accent-50);
    --ink: var(--mp-ink);
    --ink-2: var(--mp-ink-2);
    --ink-3: var(--mp-ink-3);
    --bg: var(--mp-bg);
    --surface: var(--mp-surface);
    --surface-2: var(--mp-surface-2);
    --line: var(--mp-line);
    --line-strong: var(--mp-line-strong);
    --success: var(--mp-success);
    --success-bg: var(--mp-success-bg);
    --warning: var(--mp-warning);
    --warning-bg: var(--mp-warning-bg);
    --danger: var(--mp-danger);
    --danger-bg: var(--mp-danger-bg);
    --info: var(--mp-info);
    --info-bg: var(--mp-info-bg);
    --neutral: var(--mp-neutral);
    --neutral-bg: var(--mp-neutral-bg);
    --r-sm: var(--mp-r-sm);
    --r-md: var(--mp-r-md);
    --r-lg: var(--mp-r-lg);
    --r-xl: var(--mp-r-xl);
    --r-pill: var(--mp-r-pill);
    --font-head: var(--mp-font-head);
    --font-body: var(--mp-font-body);
    --s1: var(--mp-s1);
    --s2: var(--mp-s2);
    --s3: var(--mp-s3);
    --s4: var(--mp-s4);
    --s5: var(--mp-s5);
    --s6: var(--mp-s6);
    --s7: var(--mp-s7);
    --s8: var(--mp-s8);

    --gutter-compact: var(--mp-gutter-compact);
    --gutter-regular: var(--mp-gutter-regular);
    --gap-section: var(--mp-gap-section);
    --gap-region: var(--mp-gap-region);
    --touch-min: var(--mp-touch-min);

    --mp-drawer-duration: 0.28s;
    --mp-drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);

    background: var(--bg);
    box-sizing: border-box;
    color: var(--ink);
    container-name: mp-app;
    container-type: inline-size;
    display: grid;
    font-family: var(--font-head);
    font-weight: 400;
    grid-template-areas: "sidebar topbar" "sidebar main";
    grid-template-columns: 256px 1fr;
    grid-template-rows: auto 1fr;
    min-height: min(100vh, 100dvh);
    min-width: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.mp-app *,
.mp-app *::before,
.mp-app *::after {
    box-sizing: border-box;
}

.mp-app h1,
.mp-app h2,
.mp-app h3,
.mp-app h4 {
    color: var(--ink);
    font-family: var(--font-head);
    line-height: 1.2;
    margin: 0;
}

.mp-app a {
    color: inherit;
    text-decoration: none;
}

body.mp-platform-shell .elementor-widget-shortcode,
body.mp-platform-shell .elementor-shortcode {
    width: 100%;
}

body.mp-platform-shell .elementor-section .elementor-container {
    max-width: none;
}

body.mp-platform-shell .elementor-column .elementor-widget-wrap {
    min-width: 0;
}

@media (max-width: 768px) {
    body.mp-platform-shell {
        overflow-x: hidden;
    }

    body.mp-platform-shell .elementor-section .elementor-container,
    body.mp-platform-shell .elementor-column,
    body.mp-platform-shell .elementor-widget-wrap,
    body.mp-platform-shell .elementor-widget-shortcode,
    .mp-app .elementor-section .elementor-container,
    .mp-app .elementor-column,
    .mp-app .elementor-widget-wrap {
        max-width: 100%;
        width: 100%;
    }

    .mp-app {
        grid-template-areas: "topbar" "main";
        grid-template-columns: minmax(0, 1fr);
        max-width: 100%;
        overflow-x: hidden;
        width: 100%;
    }

    .mp-app > .sidebar {
        display: none;
    }

    .mp-app .hamburger {
        display: grid;
    }

    .mp-app .topbar-title {
        display: block;
        flex: 1;
    }

    .mp-app .topbar-spacer {
        display: none;
    }

    .mp-app .topbar-user .u-text {
        display: none;
    }

    .mp-app .bottom-nav {
        display: flex;
        position: fixed;
    }

    .mp-app .mp-drawer-host {
        inset: 0;
        position: fixed;
        z-index: var(--mp-drawer-z, 100001);
    }

    .mp-app .drawer-overlay {
        background: rgba(0, 41, 104, 0.55);
        inset: 0;
        position: fixed;
    }

    .mp-app .drawer {
        position: fixed;
    }

    .mp-app .hamburger {
        height: 44px;
        width: 44px;
    }

    .mp-cols--aside,
    .mp-cols--c14,
    .mp-cols--c15,
    .mp-cols--even,
    .mp-cols--review,
    .mp-cols--pay {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Sidebar */
.mp-app .sidebar {
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-2);
    grid-area: sidebar;
    min-height: 100%;
    padding: var(--mp-gutter-regular) var(--mp-space-4);
}

.mp-app .sidebar-logo {
    align-items: center;
    display: flex;
    gap: 11px;
    padding: 6px 8px 18px;
}

.mp-app .mp-logo-mark {
    align-items: center;
    background: var(--brand);
    border-radius: 50%;
    color: #fff;
    display: grid;
    flex-shrink: 0;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    height: 40px;
    place-items: center;
    width: 40px;
}

.mp-app .sidebar-logo .name {
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.mp-app .sidebar-logo .name span {
    color: var(--ink-3);
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.mp-app .mp-site-logo-link {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    max-width: 100%;
    min-width: 0;
    text-decoration: none;
}

.mp-app .mp-site-logo-link:hover,
.mp-app .mp-site-logo-link:focus-visible {
    text-decoration: none;
}

.mp-app .mp-site-logo {
    display: block;
    height: auto;
    max-height: 44px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.mp-app .mp-site-icon {
    border-radius: 50%;
    flex-shrink: 0;
    height: 40px;
    max-height: 40px;
    max-width: 40px;
    object-fit: cover;
    width: 40px;
}

.mp-app .nav-item {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--r-md);
    color: var(--ink-2);
    display: flex;
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 500;
    gap: 12px;
    padding: 10px 12px;
    text-align: left;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
    width: 100%;
}

.mp-app a.nav-item,
.mp-app a.nav-item .nav-text {
    text-decoration: none;
}

.mp-app .nav-item i {
    flex-shrink: 0;
    font-size: 18px;
    text-align: center;
    width: 20px;
}

.mp-app .nav-item:hover,
.mp-app .nav-item:focus-visible {
    background: var(--surface-2);
    color: var(--ink);
    text-decoration: none;
}

.mp-app .nav-item:hover .nav-text,
.mp-app .nav-item:focus-visible .nav-text {
    color: inherit;
    text-decoration: none;
}

.mp-app .nav-item.active {
    background: var(--brand-50);
    color: var(--brand-700);
}

.mp-app .nav-item.active i {
    color: var(--brand);
}

.mp-app .nav-item .nav-badge {
    align-items: center;
    background: var(--accent);
    border-radius: var(--r-pill);
    color: #fff;
    display: grid;
    font-size: 11px;
    font-weight: 600;
    height: 20px;
    margin-left: auto;
    min-width: 20px;
    padding: 0 6px;
    place-items: center;
}

.mp-app .sidebar-foot {
    border-top: 1px solid var(--line);
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 16px;
}

.mp-app .sidebar-foot .nav-item--logout,
.mp-app .drawer-foot .nav-item--logout {
    color: var(--ink-2);
    margin-top: 0;
}

.mp-app .sidebar-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
}

/* Topbar — page title lives in content (mp-page-head), not duplicated here */
.mp-app .topbar {
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    grid-area: topbar;
    height: 68px;
    justify-content: flex-end;
    padding: 0 26px;
}

.mp-app .topbar-spacer {
    flex: 1;
}

.mp-app .icon-btn {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink-2);
    display: grid;
    height: 40px;
    place-items: center;
    position: relative;
    width: 40px;
}

.mp-app .icon-btn:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.mp-app .topbar-user {
    align-items: center;
    border-radius: var(--r-md);
    color: inherit;
    display: flex;
    gap: 11px;
    margin: -4px -8px;
    padding: 4px 8px;
    text-decoration: none;
    transition: background 0.12s ease;
}

.mp-app a.topbar-user,
.mp-app a.topbar-user:hover,
.mp-app a.topbar-user:focus,
.mp-app a.topbar-user:focus-visible,
.mp-app a.topbar-user:active,
.mp-app a.topbar-user *,
.mp-app a.topbar-user:hover *,
.mp-app a.topbar-user:focus-visible * {
    text-decoration: none !important;
}

.mp-app a.topbar-user:hover,
.mp-app a.topbar-user:focus-visible {
    background: var(--surface-2);
    text-decoration: none !important;
}

.mp-app .topbar-user .uname {
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.mp-app .topbar-user .urole {
    color: var(--ink-3);
    font-size: 11.5px;
}

.mp-app .hamburger {
    appearance: none;
    cursor: pointer;
    display: none;
    flex-shrink: 0;
    padding: 0;
}

.mp-app .hamburger i {
    display: block;
    font-size: 18px;
    line-height: 1;
}

.mp-app .hamburger.is-open {
    background: var(--brand-50);
    border-color: var(--brand);
    color: var(--brand);
}

.mp-app .topbar-title {
    display: none;
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Main — Apple HIG window insets (20pt regular / 16pt compact) */
.mp-app .main {
    grid-area: main;
    min-width: 0;
    overflow: auto;
    overflow-x: hidden;
    padding: var(--mp-gutter-regular);
}

.mp-app .main-inner {
    margin: 0;
    max-width: none;
    min-width: 0;
    width: 100%;
}

.mp-app .stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Bottom nav — hidden desktop */
.mp-app .bottom-nav {
    display: none;
    transition: opacity var(--mp-drawer-duration) var(--mp-drawer-ease);
}

/* Drawer */
.mp-app .mp-drawer-host {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 160;
}

.mp-app.mp-drawer-open .mp-drawer-host {
    pointer-events: auto;
}

.mp-app .drawer-overlay {
    background: rgba(0, 41, 104, 0.45);
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity var(--mp-drawer-duration) var(--mp-drawer-ease);
}

.mp-app .drawer {
    background: var(--surface);
    bottom: 0;
    box-shadow: 4px 0 24px rgba(0, 41, 104, 0.1);
    display: flex;
    flex-direction: column;
    left: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    transform: translate3d(-100%, 0, 0);
    transition: transform var(--mp-drawer-duration) var(--mp-drawer-ease);
    width: min(320px, 88vw);
    will-change: transform;
    z-index: 161;
}

.mp-app .drawer-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-shrink: 0;
    gap: 12px;
    justify-content: space-between;
    padding: 20px 16px 18px;
}

.mp-app .drawer-user {
    align-items: center;
    color: inherit;
    display: flex;
    flex: 1;
    gap: 14px;
    min-width: 0;
    text-decoration: none;
}

.mp-app .drawer-user:hover,
.mp-app .drawer-user:focus-visible {
    text-decoration: none;
}

.mp-app .drawer-user__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mp-app .drawer-user__hello {
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 500;
}

.mp-app .drawer-user__name {
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-app .drawer-user__role {
    color: var(--ink-3);
    font-size: 12.5px;
    font-weight: 500;
}

.mp-app .drawer-close {
    background: var(--surface);
    border: 1px solid var(--line-strong, var(--line));
    color: var(--ink);
    flex-shrink: 0;
    height: 40px;
    width: 40px;
}

.mp-app .drawer-close i {
    font-size: 20px;
    line-height: 1;
}

.mp-app .drawer-close:hover,
.mp-app .drawer-close:focus-visible {
    background: var(--surface-2);
    color: var(--ink);
}

.mp-app .drawer-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 10px;
}

.mp-app .drawer-foot {
    border-top: 1px solid var(--line);
    flex-shrink: 0;
    margin-top: auto;
    padding: 16px 10px calc(16px + env(safe-area-inset-bottom, 0px));
}

.mp-app .drawer .nav-item {
    font-size: 15px;
    gap: 14px;
    padding: 14px 12px;
}

.mp-app .drawer .nav-item i {
    font-size: 18px;
    width: 22px;
}

.mp-app .drawer .nav-item .nav-text {
    display: inline;
}

.mp-app .drawer .nav-item--logout {
    color: var(--ink-2);
}

.mp-app .avatar.lg {
    font-size: 18px;
    height: 52px;
    width: 52px;
}

.mp-app.mp-drawer-open .drawer-overlay {
    opacity: 1;
}

.mp-app.mp-drawer-open .drawer {
    transform: translate3d(0, 0, 0);
}

body.mp-drawer-open {
    overflow: hidden;
}

body.mp-drawer-open .mp-app .bottom-nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mp-drawer-duration) var(--mp-drawer-ease);
}

@media (prefers-reduced-motion: reduce) {
    .mp-app .drawer,
    .mp-app .drawer-overlay,
    .mp-app .bottom-nav {
        transition-duration: 0.01ms;
    }

    .mp-app .drawer {
        will-change: auto;
    }
}

.mp-app .mp-app-more-toggle.is-open {
    color: var(--brand);
}

.mp-app .mp-app-more-toggle.is-open .bn-icon i {
    font-size: 18px;
}

/* Avatar (shell) */
.mp-app .avatar {
    align-items: center;
    aspect-ratio: 1;
    background: var(--brand);
    border-radius: 50%;
    color: #fff;
    display: grid;
    flex-shrink: 0;
    font-family: var(--font-head);
    font-weight: 600;
    overflow: hidden;
    place-items: center;
}

.mp-app .avatar.md {
    font-size: 14px;
    height: 40px;
    width: 40px;
}

/* Layout helpers (mockup grids — used by M7.3 markup) */
.mp-app .grid {
    display: grid;
    gap: var(--s5);
}

.mp-app .grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.mp-app .grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.mp-app .grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.mp-app .cols {
    align-items: start;
    display: grid;
    gap: var(--s5);
}

.mp-app .cols.c15 {
    grid-template-columns: 1.5fr 1fr;
}

.mp-app .cols.c16 {
    grid-template-columns: 1.6fr 1fr;
}

.mp-app .cols.even {
    grid-template-columns: 1fr 1fr;
}

.mp-app .between {
    align-items: center;
    display: flex;
    gap: var(--s4);
    justify-content: space-between;
}

.mp-app .banner {
    background: var(--brand);
    border: none;
    border-radius: var(--r-lg);
    color: #fff;
    padding: 24px;
}

.mp-app .banner h2,
.mp-app .banner h3 {
    color: #fff;
}

.mp-app .banner .b-soft {
    color: rgba(255, 255, 255, 0.82);
}

.mp-app .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--mp-inset-card-lg);
}

.mp-app .card-head {
    align-items: center;
    display: flex;
    gap: var(--mp-space-3);
    margin-bottom: var(--mp-gap-stack);
}

.mp-app .card-head h3 {
    font-size: 16px;
    font-weight: 600;
}

.mp-app .stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
}

.mp-app .stat .stat-val {
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 8px;
}

.mp-app .stat .stat-label {
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
}

.mp-app .li-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 13px;
    min-width: 0;
    padding: 12px 0;
}

.mp-app .li-row:last-child {
    border-bottom: none;
}

.mp-app .page-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-gap-stack);
    margin-bottom: var(--mp-gap-section);
}

.mp-app .page-head h1 {
    font-size: 26px;
    font-weight: 700;
}

.mp-app .page-head .ph-sub {
    color: var(--ink-2);
    font-size: 14px;
    margin-top: 4px;
}

/* Hide duplicate h2 titles inside shell (topbar shows page title) */
.mp-app .main-inner > .mp-dashboard > h2:first-child,
.mp-app .main-inner > .mp-group-page > h2:first-child,
.mp-app .main-inner > .mp-homework > h2:first-child,
.mp-app .main-inner > .mp-feedback > h2:first-child,
.mp-app .main-inner > .mp-subscription > h2:first-child,
.mp-app .main-inner > .mp-admin > h2:first-child {
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Shell responsive — tablet: collapsed icon sidebar (container 721–1080px) */
@container mp-app (min-width: 721px) and (max-width: 1080px) {
    .mp-app {
        grid-template-columns: 76px 1fr;
    }

    .mp-app .sidebar {
        align-items: center;
        gap: 0;
        min-height: 100%;
        overflow: hidden;
        padding: 12px 0 14px;
    }

    .mp-app .sidebar-logo {
        flex-shrink: 0;
        justify-content: center;
        margin: 0;
        padding: 4px 0 12px;
        width: 100%;
    }

    .mp-app .sidebar-logo .name {
        display: none;
    }

    .mp-app .mp-site-icon,
    .mp-app .mp-logo-mark {
        height: 40px;
        max-height: 40px;
        max-width: 40px;
        width: 40px;
    }

    .mp-app .sidebar-nav {
        align-items: center;
        flex: 1;
        gap: 4px;
        -ms-overflow-style: none;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 8px 0;
        scrollbar-width: none;
        width: 100%;
    }

    .mp-app .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .mp-app .sidebar-nav .nav-item,
    .mp-app .sidebar-foot .nav-item {
        align-items: center;
        flex-shrink: 0;
        height: 44px;
        justify-content: center;
        margin: 0;
        padding: 0;
        position: relative;
        width: 44px;
    }

    .mp-app .sidebar-nav .nav-item i,
    .mp-app .sidebar-foot .nav-item i {
        font-size: 20px;
        line-height: 1;
        width: auto;
    }

    .mp-app .sidebar-nav .nav-item .nav-text,
    .mp-app .sidebar-foot .nav-item .nav-text {
        display: none;
    }

    .mp-app .sidebar-nav .nav-item .nav-badge {
        font-size: 10px;
        height: 18px;
        margin-left: 0;
        min-width: 18px;
        padding: 0 4px;
        position: absolute;
        right: 2px;
        top: 2px;
        transform: none;
    }

    .mp-app .sidebar-nav .nav-item.active {
        background: var(--brand-50);
        box-shadow: inset 0 0 0 1px var(--brand-100);
    }

    .mp-app .sidebar-foot {
        flex-shrink: 0;
        margin-top: auto;
        padding: 12px 0 0;
        width: 100%;
    }

    .mp-app .sidebar-foot .nav-item {
        margin: 0 auto;
    }

    .mp-app .main {
        padding: var(--mp-gutter-compact) var(--mp-gutter-compact) calc(var(--mp-space-8) + env(safe-area-inset-bottom, 0px));
    }

    .mp-stat-grid {
        gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-stat {
        padding: 16px;
    }

    .mp-stat__val {
        font-size: 26px;
    }

    .mp-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-hw-grid,
    .mp-feedback-list.mp-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-cols--c14,
    .mp-cols--c15,
    .mp-cols--even,
    .mp-cols--aside,
    .mp-cols--review,
    .mp-cols--pay {
        grid-template-columns: 1fr;
    }

    .mp-dash-head__titles h1 {
        font-size: 24px;
    }

    .mp-page-head h1 {
        font-size: 24px;
    }

    .mp-seg-tabs {
        flex-wrap: nowrap;
        margin-bottom: 16px;
        -ms-overflow-style: none;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .mp-seg-tabs::-webkit-scrollbar {
        display: none;
    }

    .mp-seg-tab {
        flex-shrink: 0;
    }

    .mp-group-meet-banner {
        align-items: center;
        flex-direction: row;
    }

    .mp-group-page .mp-page-head--split .mp-page-head__actions {
        margin-left: auto;
        width: auto;
    }

    .mp-page-head--split {
        flex-wrap: nowrap;
    }
}

@container mp-app (min-width: 1081px) {
    .mp-app .sidebar {
        min-height: 100%;
    }

    .mp-app .sidebar-nav {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .mp-app .sidebar-foot {
        margin-top: auto;
    }
}

/* Tablet sidebar — viewport fallback when Elementor wrapper is wider than device */
@media (min-width: 769px) and (max-width: 1080px) {
    body.mp-platform-shell .mp-app {
        grid-template-areas: "sidebar topbar" "sidebar main" !important;
        grid-template-columns: 76px 1fr !important;
    }

    body.mp-platform-shell .mp-app > .sidebar {
        align-items: center !important;
        display: flex !important;
        gap: 0 !important;
        min-height: 100% !important;
        overflow: hidden !important;
        padding: 12px 0 14px !important;
    }

    body.mp-platform-shell .mp-app .sidebar-logo {
        justify-content: center !important;
        padding: 4px 0 12px !important;
    }

    body.mp-platform-shell .mp-app .sidebar-logo .name {
        display: none !important;
    }

    body.mp-platform-shell .mp-app .sidebar-nav {
        align-items: center !important;
        flex: 1 !important;
        gap: 4px !important;
        overflow-y: auto !important;
        padding: 8px 0 !important;
        width: 100% !important;
    }

    body.mp-platform-shell .mp-app .sidebar-nav .nav-item,
    body.mp-platform-shell .mp-app .sidebar-foot .nav-item {
        height: 44px !important;
        justify-content: center !important;
        padding: 0 !important;
        width: 44px !important;
    }

    body.mp-platform-shell .mp-app .sidebar-nav .nav-item .nav-text,
    body.mp-platform-shell .mp-app .sidebar-foot .nav-item .nav-text {
        display: none !important;
    }

    body.mp-platform-shell .mp-app .sidebar-foot {
        margin-top: auto !important;
        padding-top: 12px !important;
        width: 100% !important;
    }

    body.mp-platform-shell .mp-app .sidebar-foot .nav-item {
        margin: 0 auto !important;
    }
}

/* Tablet landscape — wider content, closer to desktop density */
@container mp-app (min-width: 900px) and (max-width: 1080px) {
    .mp-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mp-stat {
        padding: 14px 12px;
    }

    .mp-stat__val {
        font-size: 22px;
    }

    .mp-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mp-cols--c14 {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }

    .mp-cols--c15 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .mp-cols--aside {
        grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    }
}

@container mp-app (max-width: 880px) {
    .mp-table-wrap--responsive .mp-table {
        display: none;
    }

    .mp-list-cards {
        display: flex;
    }
}

@container mp-app (max-width: 720px) {
    .mp-app {
        grid-template-areas: "topbar" "main";
        grid-template-columns: 1fr;
        min-height: 100dvh;
    }

    .mp-app .sidebar {
        display: none;
    }

    .mp-app .hamburger {
        display: grid;
        flex-shrink: 0;
    }

    .mp-app .topbar {
        gap: 12px;
        height: 60px;
        justify-content: flex-start;
        padding: 0 16px;
    }

    .mp-app .topbar-title {
        display: block;
        flex: 1;
    }

    .mp-app .topbar-spacer {
        display: none;
    }

    .mp-app .topbar-user {
        flex-shrink: 0;
        margin: 0;
        padding: 0;
    }

    .mp-app .topbar-user .u-text {
        display: none;
    }

    .mp-app .icon-btn {
        height: 44px;
        width: 44px;
    }

    .mp-app .main {
        padding: var(--mp-gutter-compact) var(--mp-gutter-compact) calc(var(--mp-space-8) + env(safe-area-inset-bottom, 0px));
    }

    .mp-app .grid-2,
    .mp-app .grid-3 {
        grid-template-columns: 1fr;
    }

    .mp-app .grid-4 {
        gap: 12px;
        grid-template-columns: 1fr 1fr;
    }

    .mp-app .bottom-nav {
        background: var(--surface);
        border-top: 1px solid var(--line);
        bottom: 0;
        display: flex;
        justify-content: space-around;
        left: 0;
        padding: var(--mp-space-2) var(--mp-space-1) calc(var(--mp-space-2) + env(safe-area-inset-bottom, 0px));
        position: fixed;
        right: 0;
        width: 100%;
        z-index: 9990;
    }

    .mp-app .bottom-nav .bn-item {
        align-items: center;
        appearance: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        color: var(--ink-3);
        cursor: pointer;
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        font-family: var(--font-head);
        font-size: 10px;
        font-weight: 600;
        gap: 4px;
        justify-content: center;
        line-height: 1.2;
        margin: 0;
        min-height: 52px;
        min-width: 0;
        padding: 6px 2px;
        position: relative;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mp-app .bottom-nav .bn-icon {
        align-items: center;
        display: inline-flex;
        flex-shrink: 0;
        height: 24px;
        justify-content: center;
        position: relative;
        width: 24px;
    }

    .mp-app .bottom-nav .bn-icon i {
        display: block;
        font-size: 20px;
        line-height: 1;
        text-align: center;
        width: 20px;
    }

    .mp-app .bottom-nav .bn-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
    }

    .mp-app .bottom-nav .bn-item.active {
        color: var(--brand);
    }

    .mp-app .bottom-nav .bn-badge {
        align-items: center;
        background: var(--accent);
        border-radius: var(--r-pill);
        color: #fff;
        display: grid;
        font-size: 9px;
        font-weight: 600;
        height: 16px;
        min-width: 16px;
        padding: 0 4px;
        place-items: center;
        position: absolute;
        right: -6px;
        top: -2px;
    }

    .mp-app .mp-drawer-host {
        position: fixed;
        z-index: var(--mp-drawer-z, 100001);
    }

    .mp-app .drawer-overlay {
        position: fixed;
    }

    .mp-app .drawer {
        position: fixed;
    }

    .mp-grid-3,
    .mp-hw-grid,
    .mp-feedback-list.mp-grid-2 {
        grid-template-columns: 1fr;
    }

    .mp-stat-grid {
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-stat {
        padding: 15px;
    }

    .mp-dash-head__titles h1 {
        font-size: 22px;
    }

    .mp-dash-head__actions {
        width: 100%;
    }

    .mp-dash-head__actions .mp-button {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }

    .mp-page-head h1 {
        font-size: 22px;
    }

    .mp-page-head--split {
        flex-wrap: wrap;
        gap: 12px;
    }

    .mp-page-head--split .mp-page-head__actions {
        width: 100%;
    }

    .mp-page-head--split .mp-page-head__actions .mp-button {
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }

    .mp-banner__actions .mp-button {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }

    .mp-stat__val {
        font-size: 24px;
    }

    .mp-button:not(.mp-button--sm) {
        min-height: 44px;
    }

    .mp-button--sm {
        min-height: 38px;
    }

    .mp-input,
    .mp-select,
    .mp-textarea {
        min-height: 46px;
    }

    .mp-seg-tab {
        padding: 11px 14px;
    }

    .mp-user-card {
        flex-wrap: wrap;
        position: relative;
    }

    .mp-user-card__left {
        align-items: flex-start;
        display: flex;
        flex: 1;
        gap: 12px;
        min-width: 0;
        padding-right: 72px;
    }

    .mp-user-card__role--desktop {
        display: none;
    }

    .mp-user-card__role--mobile {
        display: inline-flex;
    }

    .mp-user-card__right {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 12px;
        width: 100%;
    }

    .mp-user-card__status {
        position: absolute;
        right: 16px;
        top: 16px;
    }

    .mp-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .mp-modal {
        border-radius: var(--mp-r-xl, 16px) var(--mp-r-xl, 16px) 0 0;
        max-height: 92vh;
        max-width: 100%;
    }

    .mp-modal__foot {
        flex-direction: column-reverse;
    }

    .mp-modal__foot .mp-button {
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }

    .mp-cols--c14,
    .mp-cols--c15,
    .mp-cols--aside {
        grid-template-columns: 1fr;
    }

    .mp-group-meet-banner {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .mp-group-meet-banner .mp-button {
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }

    .mp-group-page .mp-page-head--split .mp-page-head__actions {
        width: 100%;
    }

    .mp-group-page .mp-page-head--split .mp-page-head__actions .mp-button {
        flex: 1;
        min-height: 44px;
    }
}

/* ============================================================
   M7.2 Sprint 1 — Dashboard layouts (mockup p-dash / t-dash)
   Self-contained, scoped to .mp-dashboard.
   Works standalone and inside the .mp-app shell.
   ============================================================ */

/* Button variants (global) */
.mp-button--accent {
    background: var(--mp-accent);
    border-color: var(--mp-accent);
    color: #fff;
}

.mp-button--accent:hover {
    background: var(--mp-accent-600);
    border-color: var(--mp-accent-600);
    color: #fff;
}

.mp-button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--mp-ink-2);
}

.mp-button--ghost:hover {
    background: var(--mp-surface-2);
    border-color: transparent;
    color: var(--mp-ink);
}

.mp-button--sm {
    border-radius: var(--mp-r-sm);
    font-size: 13px;
    min-height: 36px;
    padding: var(--mp-space-2) var(--mp-space-3);
}

/* Badge variants (global) */
.mp-badge--info {
    background: var(--mp-info-bg);
    color: var(--mp-brand-700);
}

.mp-badge--neutral {
    background: var(--mp-neutral-bg);
    color: var(--mp-neutral);
}

.mp-badge--accent {
    background: var(--mp-accent-50);
    color: var(--mp-accent-600);
}

/* Page head (greeting + actions) */
.mp-dash-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-gap-stack);
    justify-content: space-between;
    margin-bottom: var(--mp-gap-section);
}

.mp-dash-head__titles h1 {
    font-size: 26px;
    font-weight: 700;
}

.mp-dash-head__sub {
    color: var(--mp-ink-3);
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
}

.mp-dash-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-s2);
    margin-left: auto;
}

/* Column layouts */
.mp-cols {
    align-items: start;
    display: grid;
    gap: var(--mp-s5);
    margin-bottom: var(--mp-s5);
    min-width: 0;
}

.mp-cols--c15 {
    grid-template-columns: 1.5fr 1fr;
}

.mp-cols--even {
    grid-template-columns: 1fr 1fr;
}

.mp-stack {
    display: flex;
    flex-direction: column;
    gap: var(--mp-s4);
    min-width: 0;
}

.mp-dashboard .mp-row {
    align-items: center;
    display: flex;
    gap: var(--mp-s4);
    min-width: 0;
}

/* Icon chip (mockup .stat-ico) */
.mp-ico {
    align-items: center;
    border-radius: var(--mp-r-md);
    display: grid;
    flex-shrink: 0;
    height: 42px;
    place-items: center;
    width: 42px;
}

.mp-ico i {
    font-size: 19px;
}

.mp-ico--sm {
    height: 40px;
    width: 40px;
}

.mp-ico--brand {
    background: var(--mp-brand-50);
    color: var(--mp-brand);
}

.mp-ico--accent {
    background: var(--mp-accent-50);
    color: var(--mp-accent);
}

.mp-ico--success {
    background: var(--mp-success-bg);
    color: var(--mp-success);
}

.mp-ico--warning {
    background: var(--mp-warning-bg);
    color: var(--mp-warning);
}

.mp-ico--danger {
    background: var(--mp-danger-bg);
    color: var(--mp-danger);
}

.mp-ico--on-brand {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Banner (mockup .banner) */
.mp-banner {
    background: var(--mp-brand);
    border-radius: var(--mp-r-lg);
    color: #fff;
    min-width: 0;
    padding: var(--mp-s6);
}

.mp-banner h2,
.mp-banner h3 {
    color: #fff;
}

.mp-banner__head {
    align-items: flex-start;
    display: flex;
    gap: var(--mp-s4);
    justify-content: space-between;
}

.mp-banner__title {
    color: #fff;
    font-size: 22px;
    margin: 12px 0 6px;
    overflow-wrap: anywhere;
}

.mp-banner__soft {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
}

.mp-banner__divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 18px 0;
}

.mp-banner__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-s6);
}

.mp-banner__meta-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.mp-banner__meta-val {
    color: #fff;
    font-family: var(--mp-font-head);
    font-weight: 600;
}

.mp-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-s2);
    margin-top: var(--mp-s5);
}

.mp-badge--ghost {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.mp-button--on-brand {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.mp-button--on-brand:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

/* Avatar */
.mp-avatar {
    align-items: center;
    aspect-ratio: 1;
    background: var(--mp-brand);
    border-radius: 50%;
    color: #fff;
    display: grid;
    flex-shrink: 0;
    font-family: var(--mp-font-head);
    font-weight: 600;
    overflow: hidden;
    place-items: center;
}

.mp-avatar--sm {
    font-size: 12px;
    height: 32px;
    width: 32px;
}

.mp-avatar--md {
    font-size: 14px;
    height: 40px;
    width: 40px;
}

.mp-avatar--lg {
    font-size: 19px;
    height: 56px;
    width: 56px;
}

.mp-avatar--xl {
    font-size: 26px;
    height: 76px;
    width: 76px;
}

.mp-avatar--on-brand {
    background: rgba(255, 255, 255, 0.2);
}

/* Stat grid (mockup .grid-4 + .stat) */
.mp-stat-grid {
    display: grid;
    gap: var(--mp-s5);
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: var(--mp-s6);
}

.mp-stat {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 20px;
}

.mp-stat__top {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.mp-stat__val {
    font-family: var(--mp-font-head);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 8px;
}

.mp-stat__label {
    color: var(--mp-ink-2);
    font-size: 13px;
    font-weight: 500;
}

/* Dashboard cards */
.mp-dash-card {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    min-width: 0;
    padding: var(--mp-s6);
}

.mp-dash-card--flush {
    overflow: hidden;
    padding: 0;
}

.mp-dash-card__head {
    align-items: center;
    display: flex;
    gap: var(--mp-space-3);
    margin-bottom: var(--mp-gap-stack);
}

.mp-dash-card--flush .mp-dash-card__head {
    margin-bottom: 0;
    padding: 20px 22px 4px;
}

.mp-dash-card__head h3 {
    font-size: 16px;
    font-weight: 600;
}

.mp-dash-card__action {
    margin-left: auto;
}

a.mp-dash-card__action {
    align-items: center;
    border-radius: var(--mp-r-sm);
    color: var(--mp-ink-2);
    display: inline-flex;
    font-family: var(--mp-font-head);
    font-size: 13px;
    font-weight: 600;
    gap: 4px;
    padding: 7px 13px;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

a.mp-dash-card__action:hover,
a.mp-dash-card__action:focus-visible {
    background: var(--mp-surface-2);
    color: var(--mp-ink);
    text-decoration: none;
}

.mp-dash-card--flush .mp-dash-card__body {
    padding: 4px 22px 14px;
}

/* List rows (mockup .li-row) */
.mp-li-row {
    align-items: center;
    border-bottom: 1px solid var(--mp-line);
    color: inherit;
    display: flex;
    gap: 13px;
    min-width: 0;
    padding: 12px 0;
}

.mp-li-row:last-child {
    border-bottom: none;
}

.mp-li-row__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mp-li-row__name {
    font-family: var(--mp-font-head);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mp-li-row__sub {
    color: var(--mp-ink-3);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.mp-li-row__end {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-left: auto;
}

a.mp-li-row--link {
    border-radius: var(--mp-r-md);
    cursor: pointer;
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    transition: background 0.12s;
}

a.mp-li-row--link:hover {
    background: var(--mp-surface-2);
    text-decoration: none;
}

/* Pills (mockup .pill) */
.mp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-pill {
    align-items: center;
    background: var(--mp-surface);
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-r-pill);
    color: var(--mp-ink-2);
    display: inline-flex;
    font-family: var(--mp-font-head);
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    padding: 5px 14px 5px 6px;
    text-decoration: none;
}

.mp-pill:hover {
    border-color: var(--mp-ink-3);
    color: var(--mp-ink);
    text-decoration: none;
}

.mp-pill.is-active {
    background: var(--mp-ink);
    border-color: var(--mp-ink);
    color: #fff;
}

.mp-pill.is-active .mp-avatar {
    background: rgba(255, 255, 255, 0.25);
}

/* Status cards (mockup .card.between with status border) */
.mp-status-card {
    align-items: center;
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-left-width: 3px;
    border-radius: var(--mp-r-lg);
    display: flex;
    gap: var(--mp-s4);
    justify-content: space-between;
    min-width: 0;
    padding: var(--mp-s5);
}

.mp-status-card--success {
    border-left-color: var(--mp-success);
}

.mp-status-card--danger {
    border-left-color: var(--mp-danger);
}

.mp-status-card--warning {
    border-left-color: var(--mp-warning);
}

.mp-status-card__main {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.mp-status-card__label {
    color: var(--mp-ink-2);
    font-size: 12px;
}

.mp-status-card__val {
    font-family: var(--mp-font-head);
    font-weight: 600;
}

/* Task card (mockup accent card) */
.mp-task-card {
    background: var(--mp-accent-50);
    border: 1px solid var(--mp-accent);
    border-radius: var(--mp-r-lg);
    min-width: 0;
    padding: var(--mp-s6);
}

.mp-task-card__head {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.mp-task-card__head strong {
    font-family: var(--mp-font-head);
}

.mp-task-card__head .mp-ico {
    background: #fff;
}

.mp-task-card__text {
    color: var(--mp-ink);
    font-size: 14px;
    line-height: var(--mp-line-height-body);
    margin: 0 0 var(--mp-s3);
}

/* Feedback mini list */
.mp-fb-mini {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mp-fb-mini__item {
    border-bottom: 1px solid var(--mp-line);
    padding-bottom: 14px;
}

.mp-fb-mini__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mp-fb-mini__meta {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.mp-fb-mini__date {
    color: var(--mp-ink-3);
    font-size: 12.5px;
}

.mp-fb-mini__text {
    color: var(--mp-ink-2);
    font-size: 13.5px;
    line-height: var(--mp-line-height-body);
    overflow-wrap: anywhere;
}

/* Text helpers (global) */
.mp-muted {
    color: var(--mp-ink-2);
    font-weight: 400;
}

.mp-tiny {
    font-size: 12px;
    font-weight: 400;
}

.mp-lead {
    color: var(--mp-ink-2);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

/* Legacy scoped aliases */
.mp-dashboard .mp-muted {
    color: var(--mp-ink-2);
}

.mp-dashboard .mp-tiny {
    font-size: 12px;
}

.mp-dashboard .mp-lead {
    color: var(--mp-ink-2);
    font-size: 14px;
    line-height: 1.6;
}

.mp-child-block {
    margin-bottom: var(--mp-s6);
}

.mp-child-block:last-child {
    margin-bottom: 0;
}

/* Responsive — collapse columns, no horizontal scroll */
@media (max-width: 760px) {
    .mp-cols--c15,
    .mp-cols--even {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .mp-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* Container-query collapse when rendered inside the .mp-app shell */
@container mp-app (max-width: 920px) {
    .mp-cols--c15,
    .mp-cols--even {
        grid-template-columns: 1fr;
    }
}

@container mp-app (max-width: 480px) {
    .mp-stat-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Parent Sprint A — minimal layout helpers */
.mp-page-head {
    margin: 0 0 var(--mp-gap-section);
}

.mp-page-head h1 {
    font-size: 26px;
    font-weight: 700;
    line-height: var(--mp-line-height-tight);
    margin: 0 0 var(--mp-space-1);
}

.mp-page-head__sub {
    color: var(--mp-ink-3);
    font-size: 14px;
    font-weight: 500;
    line-height: var(--mp-line-height-body);
    margin: 0;
}

.mp-grid {
    display: grid;
    gap: var(--mp-gap-stack);
}

.mp-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mp-card {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-3);
    padding: var(--mp-inset-card);
}

.mp-card--stack {
    gap: var(--mp-space-3);
}

.mp-card--link {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s;
}

.mp-card--link:hover {
    border-color: var(--mp-brand);
    text-decoration: none;
}

.mp-card__title {
    font-size: 17px;
    margin: 0;
}

.mp-kv__k {
    color: var(--mp-ink-3);
    display: block;
    font-size: 12px;
}

.mp-kv__v {
    display: block;
    font-weight: 600;
}

.mp-kv-grid {
    gap: 16px;
}

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

.mp-pill {
    cursor: pointer;
    font: inherit;
}

button.mp-pill {
    appearance: none;
}

.mp-child-panels [hidden] {
    display: none !important;
}

@media (max-width: 720px) {
    .mp-grid-2 {
        grid-template-columns: 1fr;
    }
}

.mp-cols--aside {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
}

.mp-stack--gap-lg {
    gap: 20px;
}

.mp-stack--gap-sm {
    gap: 10px;
}

.mp-profile-summary__hero {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.mp-profile-summary__identity h3 {
    font-size: 18px;
    margin: 0;
}

.mp-form-row--stacked {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
}

.mp-input--disabled {
    background: var(--mp-surface-2, #f7f9fc);
    color: var(--mp-ink-3, #6b7280);
}

@media (max-width: 900px) {
    .mp-cols--aside {
        grid-template-columns: 1fr;
    }
}

.mp-between {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
}

.mp-teacher-group-card .mp-card__title {
    font-size: 20px;
    margin: 0;
}

.mp-teacher-groups__grid {
    gap: var(--mp-gap-section);
}

.mp-teacher-group-card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 228px;
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.mp-teacher-group-card:focus-visible {
    outline: 2px solid var(--mp-brand, #007bff);
    outline-offset: 2px;
}

.mp-teacher-group-card:hover {
    border-color: var(--mp-brand, #007bff);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.mp-teacher-group-card:hover .mp-teacher-group-card__title,
.mp-teacher-group-card:hover .mp-teacher-group-card__open-hint {
    color: var(--mp-brand, #007bff);
}

.mp-teacher-group-card__body {
    flex: 1;
    padding: 24px 24px 16px;
}

.mp-teacher-group-card__actions {
    align-items: center;
    border-top: 1px solid var(--mp-line, #e8edf3);
    cursor: default;
    margin-top: auto;
    padding: 16px 24px 24px;
    position: relative;
    z-index: 2;
}

.mp-teacher-group-card__top {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mp-teacher-group-card__subject {
    flex: 1 1 auto;
    max-width: calc(100% - 96px);
}

.mp-teacher-group-card__count {
    flex-shrink: 0;
    white-space: nowrap;
}

.mp-teacher-group-card__title {
    color: var(--mp-ink, #0f172a);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 12px;
}

.mp-teacher-group-card__title-link {
    color: inherit;
    text-decoration: none;
}

.mp-teacher-group-card__title-link:hover {
    color: var(--mp-brand, #007bff);
}

.mp-teacher-group-card__schedule {
    align-items: center;
    color: var(--mp-ink-3, #64748b);
    display: flex;
    font-size: 14px;
    gap: 8px;
    margin-bottom: 14px;
}

.mp-teacher-group-card__open-hint {
    align-items: center;
    color: var(--mp-ink-3, #64748b);
    display: inline-flex;
    font-size: 13px;
    font-weight: 500;
    gap: 6px;
    transition: color 0.2s ease;
}

.mp-teacher-group-card__feedback {
    position: relative;
    z-index: 3;
}

.mp-button--copy-meet {
    pointer-events: auto;
}

.mp-button--copy-meet:hover:not(:disabled) {
    border-color: var(--mp-brand, #007bff);
    color: var(--mp-brand, #007bff);
}

.mp-button--copy-meet.is-copied {
    background: rgba(31, 157, 107, 0.08);
    border-color: var(--mp-success, #1f9d6b);
    color: var(--mp-success, #1f9d6b);
}

.mp-button--copy-meet.is-unavailable,
.mp-button--copy-meet:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

[data-mp-copy-meet].is-copied {
    border-color: var(--mp-success);
    color: var(--mp-success);
}

.mp-session-row__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mp-session-row__cta {
    pointer-events: none;
    white-space: nowrap;
}

.mp-session-row:hover .mp-session-row__cta {
    color: var(--mp-brand, #007bff);
}

.mp-skeleton {
    animation: mp-skeleton-pulse 1.4s ease-in-out infinite;
    background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%);
    background-size: 200% 100%;
    border-radius: 10px;
    min-height: 16px;
}

.mp-skeleton--card {
    min-height: 228px;
}

@keyframes mp-skeleton-pulse {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@media (max-width: 768px) {
    .mp-teacher-groups__grid {
        gap: 16px;
        grid-template-columns: 1fr;
    }

    .mp-teacher-group-card__body {
        padding: 20px 20px 14px;
    }

    .mp-teacher-group-card__actions {
        padding: 14px 20px 20px;
    }
}

.mp-banner--live {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.mp-banner__live-badge {
    margin-top: 10px;
}

.mp-meet-schedule-note {
    display: inline-block;
    line-height: 1.4;
    max-width: 220px;
}

[data-mp-copy-meet].is-copied {
    border-color: var(--mp-success);
    color: var(--mp-success);
}

/* Parent Sprint B — Plăți, Teme, Copiii mei */

/* Task 2 — Plăți (cols pay) */
.mp-cols--pay {
    grid-template-columns: 1fr 1.3fr;
}

.mp-subscription-banner__foot {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: var(--mp-s5);
    padding-top: var(--mp-s5);
}

.mp-trust-note {
    align-items: flex-start;
    background: var(--mp-surface-2, #f7f9fc);
    border-radius: var(--mp-r-md);
    color: var(--mp-ink-3);
    display: flex;
    font-size: 13px;
    gap: 10px;
    line-height: var(--mp-line-height-body);
    margin-top: var(--mp-s5);
    padding: 12px 14px;
}

.mp-trust-note i {
    color: var(--mp-brand);
    flex-shrink: 0;
    margin-top: 2px;
}

.mp-subscription-detail__child {
    margin: 0 0 var(--mp-s4);
}

/* Task 3 — Teme (hw-card grid) */
.mp-hw-filters {
    flex-wrap: nowrap;
    margin-bottom: var(--mp-gap-stack);
    -ms-overflow-style: none;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.mp-hw-filters::-webkit-scrollbar {
    display: none;
}

.mp-hw-filters .mp-hw-filter {
    flex-shrink: 0;
    min-height: 40px;
}

.mp-hw-card__hint {
    line-height: 1.45;
    margin: -4px 0 0;
}

.mp-homework--student .mp-hw-filters,
.mp-homework--parent .mp-hw-filters {
    align-self: flex-start;
    max-width: 100%;
    text-align: left;
    width: 100%;
}

.mp-hw-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mp-hw-grid > .mp-hw-card,
.mp-hw-grid > a.mp-hw-card {
    min-width: 0;
}

.mp-hw-card {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    display: flex;
    flex-direction: column;
    gap: var(--mp-s4);
    min-width: 0;
    padding: var(--mp-s5);
}

.mp-hw-card__top {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.mp-hw-card--student .mp-hw-card__top {
    align-items: start;
    display: grid;
    column-gap: 12px;
    grid-template-columns: 42px minmax(0, 1fr);
    row-gap: 10px;
}

.mp-hw-card--student .mp-hw-card__top > .mp-ico {
    align-self: start;
    grid-column: 1;
    grid-row: 1;
}

.mp-hw-card--student .mp-hw-card__top > .mp-hw-card__head {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.mp-hw-card--student .mp-hw-card__top > .mp-badge {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    max-width: 100%;
    padding: 8px 14px;
    white-space: normal;
}

.mp-hw-card__top > .mp-ico {
    flex-shrink: 0;
}

.mp-hw-card__top > .fa-chevron-right,
.mp-hw-card__top > i.fa-chevron-right {
    flex-shrink: 0;
    margin-left: auto;
    margin-top: 2px;
}

.mp-hw-card__head {
    flex: 1;
    min-width: 0;
}

.mp-hw-card__title {
    display: block;
    font-family: var(--mp-font-head);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: normal;
}

.mp-hw-card__meta {
    color: var(--mp-ink-3);
    display: block;
    font-size: 13px;
    line-height: 1.45;
    margin-top: 2px;
    overflow-wrap: break-word;
    word-break: normal;
}

.mp-hw-card--correction .mp-hw-card__top {
    align-items: center;
}

.mp-hw-card__session {
    align-self: flex-start;
    margin-top: 4px;
}

.mp-hw-grid--correction {
    gap: var(--mp-s4);
}

.mp-teacher-observations {
    margin-bottom: var(--mp-s5);
}

.mp-teacher-observations__cta {
    margin-top: var(--mp-s5);
}

.mp-check {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.mp-check input {
    accent-color: var(--mp-brand);
}

.mp-form-section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 var(--mp-s3);
}

.mp-hw-card__count {
    font-weight: 600;
    white-space: nowrap;
}

.mp-hw-card__foot {
    align-items: center;
    border-top: 1px solid var(--mp-line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-s3);
    justify-content: space-between;
    padding-top: var(--mp-s4);
}

.mp-deadline-chip {
    align-items: center;
    background: var(--mp-surface-2, #f7f9fc);
    border-radius: 999px;
    color: var(--mp-ink-3);
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    padding: 5px 12px;
}

.mp-deadline-chip--urgent {
    background: var(--mp-warning-bg, #fff4e5);
    color: var(--mp-warning, #b26a00);
}

.mp-deadline-chip--expired,
.mp-deadline-chip--late {
    background: var(--mp-danger-bg, #fdecec);
    color: var(--mp-danger, #c0392b);
}

/* Task 4 — Copiii mei: card-link nu trebuie să sublinieze textul intern */
.mp-card--link,
.mp-card--link:hover,
.mp-card--link:focus,
.mp-card--link *,
.mp-card--link:hover * {
    color: var(--mp-ink);
    text-decoration: none;
}

.mp-card--link .mp-muted,
.mp-card--link .mp-li-row__sub {
    color: var(--mp-ink-3);
}

@media (max-width: 760px) {
    .mp-cols--pay {
        grid-template-columns: 1fr;
    }
}

@container mp-app (max-width: 720px) {
    .mp-cols--pay {
        grid-template-columns: 1fr;
    }
}

/* Teacher Sprint B — Grupele mele, Feedback overview + feedback-session */

/* Row/stack helpers (folosite în renderere, erau nedefinite) */
.mp-row {
    align-items: center;
    display: flex;
    gap: var(--mp-s4);
    min-width: 0;
}

.mp-row--wrap {
    flex-wrap: wrap;
}

.mp-row--gap-sm,
.mp-dashboard .mp-row--gap-sm {
    gap: 8px;
}

.mp-row--gap-md,
.mp-dashboard .mp-row--gap-md {
    gap: 12px;
}

.mp-stack--gap-md {
    gap: var(--mp-s4);
}

.mp-bdot {
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
    height: 6px;
    margin-right: 6px;
    width: 6px;
}

.mp-button--block {
    justify-content: center;
    width: 100%;
}

.mp-back-link {
    margin-bottom: var(--mp-s4);
    padding-left: 0;
}

.mp-section-title {
    font-family: var(--mp-font-head);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 var(--mp-s4);
}

/* Card variants */
.mp-card--accent {
    background: var(--mp-accent-50, #eef2ff);
    border-color: var(--mp-accent, #6366f1);
}

/* Feedback overview CTA */
.mp-feedback-cta {
    margin-bottom: var(--mp-s6);
}

.mp-feedback-cta__title {
    font-family: var(--mp-font-head);
}

.mp-feedback-cta__groups {
    margin-top: var(--mp-s2);
}

/* Actionbar sticky (mockup .actionbar) */
.mp-actionbar {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-lg);
    margin-bottom: var(--mp-s5);
    padding: var(--mp-s4) var(--mp-s5);
    position: sticky;
    top: 0;
    z-index: 5;
}

.mp-actionbar__count {
    font-family: var(--mp-font-head);
}

/* Progress bar (mockup .progress) */
.mp-progress {
    background: var(--mp-line);
    border-radius: 999px;
    height: 8px;
    margin-bottom: var(--mp-s5);
    overflow: hidden;
    width: 100%;
}

.mp-progress > span {
    background: var(--mp-success);
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width 0.25s ease;
}

/* Feedback-session student cards */
.mp-feedback-card--done {
    border-color: var(--mp-success);
}

/* Star rating control (pură CSS, accesibilă) */
.mp-rating {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-s4);
}

.mp-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
    justify-content: flex-end;
}

.mp-stars__input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.mp-stars__star {
    color: var(--mp-line);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    transition: color 0.12s ease;
}

.mp-stars__star:hover,
.mp-stars__star:hover ~ .mp-stars__star,
.mp-stars__input:checked ~ .mp-stars__star {
    color: var(--mp-warning, #f5a623);
}

.mp-stars__input:focus-visible + .mp-stars__star {
    outline: 2px solid var(--mp-brand);
    outline-offset: 2px;
}

.mp-rating__clear {
    align-items: center;
    color: var(--mp-ink-3);
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    gap: 6px;
}

@media (max-width: 760px) {
    .mp-feedback-grid {
        grid-template-columns: 1fr;
    }
}

/* Teacher homework — modal + dropzone */
body.mp-modal-open {
    overflow: hidden;
}

.mp-modal-host {
    inset: 0;
    position: fixed;
    z-index: 200;
}

.mp-modal-host[hidden] {
    display: none !important;
}

.mp-modal-overlay {
    align-items: center;
    background: rgba(0, 41, 104, 0.4);
    display: flex;
    inset: 0;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    position: absolute;
}

.mp-modal {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-xl, 16px);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin: auto;
    max-height: min(90dvh, calc(100vh - 40px));
    max-width: 520px;
    overflow: hidden;
    width: 100%;
}

.mp-modal--form-scroll {
    max-height: min(85dvh, calc(100dvh - 32px));
}

.mp-modal--form-scroll > .mp-homework-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.mp-modal--form-scroll .mp-modal__body {
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mp-modal--form-scroll .mp-modal__foot {
    background: var(--mp-surface);
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 2;
}

@media (max-width: 1024px) and (orientation: landscape) {
    .mp-modal-overlay {
        align-items: flex-start;
        padding: 12px;
    }

    .mp-modal--form-scroll {
        max-height: min(92dvh, calc(100dvh - 24px));
    }
}

.mp-modal--wide {
    max-width: 620px;
}

.mp-modal__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.mp-modal__content > .mp-form,
.mp-modal__content > .mp-homework-form,
.mp-modal__content > .mp-modal-user-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.mp-modal .mp-modal__body {
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mp-modal__body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 28px 28px 32px;
}

.mp-modal-host .mp-field {
    gap: 8px;
}

.mp-modal-host .mp-form-section-title {
    margin: 8px 0 4px;
    padding-top: 8px;
}

.mp-modal-host .mp-student-profile-fields {
    border-top: 1px solid var(--mp-line);
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 4px;
    padding-top: 20px;
}

.mp-modal-host .mp-teacher-profile-fields {
    border-top: 1px solid var(--mp-line);
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 4px;
    padding-top: 20px;
}

.mp-modal-host [data-mp-role-field][hidden] {
    display: none !important;
}

.mp-modal-host .mp-parent-child-fields {
    border-top: 1px solid var(--mp-line);
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
    padding-top: 20px;
}

.mp-modal-host .mp-parent-child-fields__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mp-modal-host .mp-parent-child-fields__body[hidden] {
    display: none !important;
}

.mp-modal-host .mp-student-profile-fields .mp-form-section-title {
    margin: 0 0 2px;
    padding-top: 0;
}

.mp-modal-host .mp-field-hint {
    margin-top: 2px;
}

.mp-modal-host .mp-grid-2 {
    gap: 20px;
}

.mp-user-children {
    border-top: 1px solid var(--mp-line);
    padding: 20px 24px 24px;
}

.mp-user-children__head h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
}

.mp-user-children__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 16px 0;
    padding: 0;
}

.mp-user-children__item {
    align-items: center;
    background: var(--mp-surface-2, #f7f9fc);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-md);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px;
}

.mp-user-children__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mp-user-children__meta strong {
    font-size: 14px;
}

.mp-user-children__empty {
    color: var(--mp-ink-3);
    font-size: 13px;
    margin: 12px 0 16px;
}

.mp-user-children__add {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mp-modal__head {
    align-items: center;
    border-bottom: 1px solid var(--mp-line);
    display: flex;
    flex-shrink: 0;
    gap: 12px;
    padding: 22px 24px;
}

.mp-modal__head h3 {
    flex: 1;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.mp-modal__close {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--mp-ink-3);
    cursor: pointer;
    display: inline-flex;
    font-size: 18px;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.mp-modal__foot {
    background: var(--mp-surface);
    border-top: 1px solid var(--mp-line);
    bottom: 0;
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    justify-content: flex-end;
    padding: 18px 24px;
    position: sticky;
    z-index: 2;
}

.mp-modal > .mp-homework-form,
.mp-modal > .mp-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.mp-modal-host .mp-field {
    position: relative;
}

.mp-modal-host .mp-form-label {
    display: block;
    position: static;
}

.mp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mp-field-hint {
    color: var(--mp-ink-3);
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}

.mp-field-error {
    color: #dc2626;
    display: none;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    margin: 6px 0 0;
}

.mp-field-error.is-visible {
    display: block;
}

.mp-password-pair .mp-field-error[data-mp-password-match-error].is-visible {
    margin-top: 8px;
}

@keyframes mp-autofill-start {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

.mp-auth__input:-webkit-autofill {
    animation-name: mp-autofill-start;
    animation-duration: 0.001s;
}

.mp-auth__input.is-invalid,
.mp-input.is-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.mp-auth__input.is-invalid:focus,
.mp-input.is-invalid:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.mp-dropzone {
    align-items: center;
    background: var(--mp-surface-2, #f7f9fc);
    border: 2px dashed var(--mp-line-strong, #d8dee9);
    border-radius: var(--mp-r-lg);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px;
    text-align: center;
    transition: border-color 0.12s ease, background 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.mp-dropzone.is-invalid {
    background: #fef2f2;
    border-color: #ef4444;
}

.mp-dropzone__error {
    color: #dc2626;
    margin: 0;
}

.mp-dropzone:hover,
.mp-dropzone.is-dragover {
    background: var(--mp-brand-50, #eef5ff);
    border-color: var(--mp-brand);
}

.mp-dropzone.is-filled {
    border-color: var(--mp-brand);
}

.mp-dropzone__ico {
    align-items: center;
    background: var(--mp-brand-50, #eef5ff);
    border-radius: var(--mp-r-md);
    color: var(--mp-brand);
    display: grid;
    height: 52px;
    place-items: center;
    width: 52px;
}

.mp-dropzone__ico i {
    font-size: 22px;
}

.mp-dropzone__title {
    font-family: var(--mp-font-head);
    font-size: 14.5px;
    font-weight: 600;
}

.mp-dropzone__sub {
    color: var(--mp-ink-3);
    font-size: 12.5px;
    max-width: 320px;
}

.mp-hw-card--link {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s ease;
}

.mp-hw-card--link:hover {
    border-color: var(--mp-brand);
    text-decoration: none;
}

.mp-hw-card--link *,
.mp-hw-card--link:hover * {
    color: inherit;
    text-decoration: none;
}

.mp-hw-card--link .mp-hw-card__meta,
.mp-hw-card--link .mp-muted {
    color: var(--mp-ink-3);
}

.mp-hw-card__stats {
    align-items: center;
    gap: 8px;
    min-width: 0;
}

@media (max-width: 760px) {
    .mp-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .mp-modal {
        border-radius: var(--mp-r-xl, 16px) var(--mp-r-xl, 16px) 0 0;
        max-height: 92vh;
    }
}

/* Homework submissions + review (teacher) */
.mp-stat-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mp-page-head--split {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-s4);
    justify-content: space-between;
}

.mp-page-head--split .mp-page-head__main {
    flex: 1;
    min-width: 0;
}

.mp-page-head--split .mp-page-head__actions {
    flex-shrink: 0;
}

.mp-cols--review {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.mp-card--dashed {
    background: var(--mp-surface-2, var(--mp-bg));
    border-style: dashed;
}

.mp-card--flush {
    padding: 0;
}

.mp-card--flush > .mp-table-wrap,
.mp-card--flush > .mp-table-wrap--responsive {
    border-radius: inherit;
}

.mp-button--lg {
    font-size: 15px;
    min-height: 48px;
    padding-left: var(--mp-s5);
    padding-right: var(--mp-s5);
}

.mp-file-chip {
    align-items: center;
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-md);
    display: flex;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
}

.mp-file-chip__ico {
    align-items: center;
    background: var(--mp-danger-bg, #fef2f2);
    border-radius: 6px;
    color: var(--mp-danger, #dc2626);
    display: grid;
    flex-shrink: 0;
    font-family: var(--mp-font-head);
    font-size: 10px;
    font-weight: 700;
    height: 46px;
    place-items: center;
    width: 38px;
}

.mp-file-chip__name {
    font-family: var(--mp-font-head);
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-file-chip__meta {
    color: var(--mp-ink-3);
    font-size: 12px;
}

.mp-cell-user {
    align-items: center;
    display: flex;
    gap: 11px;
    min-width: 0;
}

.mp-cell-user__name {
    font-family: var(--mp-font-head);
    font-size: 13.5px;
    font-weight: 600;
}

.mp-grade-cell {
    color: var(--mp-ink-3);
    font-family: var(--mp-font-head);
    font-weight: 700;
}

.mp-grade-cell--set {
    color: var(--mp-success);
}

.mp-list-cards {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.mp-users-card .mp-list-cards {
    gap: 10px;
    padding: 12px;
}

.mp-user-card {
    align-items: stretch;
    background: var(--surface, var(--mp-surface));
    border: 1px solid var(--line, var(--mp-line));
    border-radius: var(--mp-r-lg, 14px);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 16px;
}

.mp-user-card__left {
    align-items: flex-start;
    display: flex;
    flex: 1;
    gap: 12px;
    min-width: 0;
}

.mp-user-card__identity {
    gap: 4px;
}

.mp-user-card__name {
    font-family: var(--mp-font-head);
    font-size: 15px;
    font-weight: 700;
}

.mp-user-card__email {
    color: var(--mp-ink-3);
    font-size: 13px;
}

.mp-user-card__right {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 12px;
    justify-content: space-between;
}

.mp-user-card__role--mobile {
    display: none;
}

.mp-user-card__edit {
    white-space: nowrap;
}

.mp-dash-user-card {
    background: var(--surface, var(--mp-surface));
    border: 1px solid var(--line, var(--mp-line));
    border-radius: var(--mp-r-lg, 14px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.mp-dash-user-card__left {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.mp-dash-user-card__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-list-cards--dash-users {
    gap: 10px;
    padding: 12px;
}

.mp-hw-card--submission {
    gap: var(--mp-s4);
}

.mp-table-wrap--responsive .mp-table--submissions {
    margin: 0;
}

.mp-review-v2-note strong {
    font-family: var(--mp-font-head);
}

@media (max-width: 960px) {
    .mp-stat-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-cols--review {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 880px) {
    .mp-table-wrap--responsive .mp-table--submissions {
        display: none;
    }

    .mp-list-cards {
        display: flex;
    }
}

@media (max-width: 720px) {
    .mp-stat-grid--3 {
        grid-template-columns: 1fr;
    }

    .mp-page-head--split .mp-page-head__actions {
        width: 100%;
    }
}

/* Admin — users directory */
.mp-sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.mp-seg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--mp-rhythm-sm);
}

.mp-seg-tab {
    align-items: center;
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: 999px;
    color: var(--mp-ink-2);
    display: inline-flex;
    font-family: var(--mp-font-head);
    font-size: 13.5px;
    font-weight: 600;
    gap: 8px;
    padding: 8px 15px;
    text-decoration: none;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.mp-seg-tab:hover:not(.is-active),
.mp-seg-tab:focus-visible:not(.is-active) {
    background: var(--mp-surface-2);
    border-color: var(--mp-brand);
    color: var(--mp-brand-700);
    text-decoration: none;
}

.mp-seg-tab.is-active {
    background: var(--mp-brand);
    border-color: var(--mp-brand);
    color: #fff;
}

.mp-seg-tab__count {
    background: var(--mp-surface-2, #eef2f7);
    border-radius: 999px;
    color: var(--mp-ink-3);
    font-size: 12px;
    min-width: 20px;
    padding: 1px 7px;
    text-align: center;
    text-decoration: none;
}

.mp-seg-tab:hover:not(.is-active) .mp-seg-tab__count {
    background: var(--mp-brand-50);
    color: var(--mp-brand-700);
}

.mp-seg-tab.is-active .mp-seg-tab__count {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.mp-tag {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-family: var(--mp-font-head);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    white-space: nowrap;
}

.mp-tag--teacher {
    background: var(--mp-info-bg);
    color: var(--mp-brand-700);
}

.mp-tag--student {
    background: var(--mp-success-bg);
    color: var(--mp-success);
}

.mp-tag--parent {
    background: var(--mp-warning-bg);
    color: var(--mp-warning);
}

.mp-tag--corrector {
    background: #efe9fb;
    color: #6d3bd0;
}

.mp-row-action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--mp-ink-3);
    cursor: pointer;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
    width: 34px;
}

.mp-row-action:hover {
    background: var(--mp-brand-50, #eef5ff);
    color: var(--mp-brand);
    text-decoration: none;
}

.mp-users-card {
    overflow: hidden;
}

.mp-table--users td .mp-tag {
    vertical-align: middle;
}

/* ============================================================
   Platform polish — theme-safe forms + interaction refinements
   ============================================================ */

/* Zero underline + theme-safe interactive colors */
body.mp-platform-shell .mp-app a.nav-item,
body.mp-platform-shell .mp-app a.nav-item:hover,
body.mp-platform-shell .mp-app a.nav-item:focus,
body.mp-platform-shell .mp-app a.nav-item:focus-visible,
body.mp-platform-shell .mp-app a.nav-item.active,
body.mp-platform-shell .mp-app a.nav-item .nav-text,
body.mp-platform-shell .mp-app a.mp-seg-tab,
body.mp-platform-shell .mp-app a.mp-seg-tab:hover,
body.mp-platform-shell .mp-app a.mp-seg-tab:focus-visible,
body.mp-platform-shell .mp-app a.mp-seg-tab.is-active,
body.mp-platform-shell .mp-app a.mp-seg-tab .mp-seg-tab__count,
body.mp-platform-shell .mp-modal-host .mp-button,
body.mp-platform-shell .mp-modal-host .mp-button:hover,
body.mp-platform-shell .mp-modal-host .mp-button:focus-visible,
body.mp-platform-shell :is(
    .mp-app,
    .mp-dashboard,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-profile,
    .mp-subscription,
    .mp-group-page,
    .mp-modal-host
) :is(a, a:hover, a:focus, a:focus-visible, a:active, span, div, p, label):not(.mp-button):not(.mp-seg-tab):not(.mp-row-action) {
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration: none !important;
    border-bottom: none !important;
    box-decoration-break: clone;
}

/* Borderless actions — must win over theme link/button resets */
body.mp-platform-shell :is(.mp-app, .mp-modal-host) :is(
    .mp-button--link,
    .mp-button--ghost,
    .mp-row-action
),
body.mp-platform-shell :is(.mp-app, .mp-modal-host) :is(
    .mp-button--link,
    .mp-button--ghost,
    .mp-row-action
):is(:hover, :focus, :focus-visible) {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    outline-offset: 2px;
    text-decoration: none !important;
}

body.mp-platform-shell :is(.mp-app, .mp-modal-host) .mp-button--link,
body.mp-platform-shell :is(.mp-app, .mp-modal-host) .mp-button--link:is(:hover, :focus, :focus-visible) {
    color: var(--mp-brand) !important;
    padding: 0 !important;
    -webkit-text-fill-color: var(--mp-brand) !important;
}

body.mp-platform-shell :is(.mp-app, .mp-modal-host) .mp-button--link:hover,
body.mp-platform-shell :is(.mp-app, .mp-modal-host) .mp-button--link:focus-visible {
    color: var(--mp-brand-700) !important;
    -webkit-text-fill-color: var(--mp-brand-700) !important;
}

body.mp-platform-shell :is(.mp-app, .mp-modal-host) .mp-button--ghost:is(:hover, :focus, :focus-visible) {
    background: var(--mp-surface-2) !important;
    border-radius: var(--mp-r-md) !important;
    color: var(--mp-ink) !important;
}

body.mp-platform-shell :is(.mp-app, .mp-modal-host) :is(a.mp-button, button.mp-button):not(.mp-button--link):not(.mp-button--ghost) {
    border: 1px solid var(--mp-line-strong);
    box-shadow: none;
}

body.mp-platform-shell .mp-button--secondary,
body.mp-platform-shell .mp-button--secondary:hover,
body.mp-platform-shell .mp-button--secondary:focus-visible {
    background-color: var(--mp-surface) !important;
    border: 1px solid var(--mp-line-strong) !important;
    color: var(--mp-ink) !important;
    -webkit-text-fill-color: var(--mp-ink) !important;
}

body.mp-platform-shell .mp-button--secondary:hover,
body.mp-platform-shell .mp-button--secondary:focus-visible {
    background-color: var(--mp-surface-2) !important;
    border-color: var(--mp-ink-3) !important;
}

body.mp-platform-shell .mp-button--primary,
body.mp-platform-shell .mp-button--primary:hover,
body.mp-platform-shell .mp-button--primary:focus-visible {
    border: 1px solid var(--mp-brand) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.mp-platform-shell .mp-button--primary:hover,
body.mp-platform-shell .mp-button--primary:focus-visible {
    border-color: var(--mp-brand-600) !important;
}

body.mp-platform-shell :is(.mp-input, .mp-select, .mp-textarea) {
    background-color: var(--mp-surface) !important;
    border-color: var(--mp-line-strong) !important;
    box-shadow: none;
    color: var(--mp-ink) !important;
    font-family: var(--mp-font-head) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    min-height: 44px;
    -webkit-text-fill-color: var(--mp-ink) !important;
}

body.mp-platform-shell :is(.mp-input, .mp-textarea)::placeholder {
    color: #94a3b8 !important;
    font-style: italic;
    font-weight: 400 !important;
    opacity: 0.9 !important;
}

body.mp-platform-shell .mp-textarea--placeholder-soft::placeholder {
    color: #b0bac9 !important;
    font-style: italic;
    opacity: 0.85 !important;
}

body.mp-platform-shell .mp-textarea {
    min-height: 100px;
}

body.mp-platform-shell .mp-field,
body.mp-platform-shell .mp-form-field,
body.mp-platform-shell .mp-form-row {
    min-width: 0;
}

body.mp-platform-shell .mp-modal .mp-grid-2 {
    gap: 20px;
}

body.mp-platform-shell .mp-modal .mp-grid-2 .mp-field {
    min-width: 0;
}

/* Meet / action text links (mockup .meet-link) */
.mp-meet-link {
    align-items: center;
    color: var(--mp-brand);
    display: inline-flex;
    font-family: var(--mp-font-head);
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    text-decoration: none;
    transition: color 0.12s ease;
}

.mp-meet-link:hover,
.mp-meet-link:focus-visible {
    color: var(--mp-brand-700);
    text-decoration: none;
}

.mp-meet-actions {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.mp-meet-actions__open,
.mp-meet-actions__copy {
    justify-content: center;
    min-height: 48px;
}

.mp-meet-actions .mp-meet-schedule-note {
    margin: 0;
    width: 100%;
}

@media (min-width: 480px) {
    .mp-meet-actions {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mp-meet-actions__open,
    .mp-meet-actions__copy {
        flex: 1 1 auto;
        width: auto;
    }
}

body.mp-modal-open .mp-app .bottom-nav {
    display: none !important;
}

body.mp-platform-shell .mp-app .main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

body.mp-modal-open .mp-modal-overlay {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mp-modal--form-scroll .mp-modal__body {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

.mp-modal--form-scroll .mp-modal__foot {
    border-top: 1px solid var(--mp-line);
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.mp-student-hw-summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 16px 18px;
}

.mp-student-hw-summary__text {
    font-weight: 600;
    margin: 0;
}

.mp-hw-card--urgent {
    border-color: var(--mp-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mp-accent) 35%, transparent);
}

.mp-page-head__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Card / heading links — color only, no underline */
.mp-card__title .mp-link:hover,
.mp-card__title .mp-link:focus-visible,
h3 .mp-link:hover,
h3 .mp-link:focus-visible {
    color: var(--mp-brand-700);
    text-decoration: none;
}

/* Focus rings — visible keyboard navigation */
.mp-app .nav-item:focus-visible,
:is(.mp-app, .mp-dashboard, .mp-admin, .mp-feedback, .mp-homework, .mp-profile) :is(
    a.mp-button,
    button.mp-button,
    .mp-seg-tab,
    .mp-row-action,
    a.topbar-user
):focus-visible {
    outline: 2px solid var(--mp-brand);
    outline-offset: 2px;
}

:is(.mp-input, .mp-select, .mp-textarea):focus-visible {
    outline: none;
}

@media (max-width: 560px) {
    body.mp-platform-shell .mp-modal .mp-grid-2,
    body.mp-platform-shell .mp-form .mp-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Admin groups + group page (g-page) */
.mp-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mp-group-card {
    gap: 14px;
}

.mp-group-card__title {
    font-family: var(--mp-font-head);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.mp-group-card__meta {
    font-size: 13.5px;
    font-weight: 500;
}

.mp-group-card__foot {
    font-family: var(--mp-font-head);
    font-size: 13.5px;
    font-weight: 600;
}

.mp-cols--c14 {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.mp-group-page h1 {
    color: var(--mp-ink);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 4px;
}

.mp-group-page__badges {
    gap: 8px;
    margin-bottom: 8px;
}

.mp-group-page__badges .mp-badge--info {
    background: var(--mp-info-bg);
    color: var(--mp-brand-700, var(--mp-brand));
}

.mp-group-page__badges .mp-badge--neutral {
    background: var(--mp-neutral-bg);
    color: var(--mp-neutral);
}

.mp-group-meet-banner {
    align-items: center;
    background: var(--mp-brand-50);
    border-color: var(--mp-brand-100, #cce0ff);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.mp-group-meet-banner .mp-ico {
    height: 42px;
    width: 42px;
}

.mp-group-page .mp-page-head {
    margin-bottom: var(--mp-gap-section);
}

.mp-group-page .mp-page-head__sub {
    color: var(--mp-ink-2);
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
}

.mp-group-page .mp-page-head--split .mp-page-head__actions {
    margin-left: auto;
}

.mp-group-page .mp-dash-card__head h3,
.mp-group-page .mp-card__title {
    color: var(--mp-ink);
    font-family: var(--mp-font-head);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.mp-group-page .mp-dash-card__head {
    justify-content: space-between;
}

.mp-group-page .mp-dash-card--flush .mp-dash-card__head {
    padding: 20px 22px 4px;
}

.mp-group-page .mp-dash-card--flush .mp-dash-card__body {
    padding: 4px 22px 12px;
}

.mp-group-page .mp-group-panel {
    min-width: 0;
}

.mp-group-page .mp-cols--c14 {
    gap: 20px;
    margin-bottom: 0;
}

.mp-group-settings {
    gap: 14px;
}

.mp-group-page .mp-form--stacked {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mp-group-page .mp-form--stacked .mp-field {
    margin: 0;
}

.mp-group-page .mp-form-label {
    color: var(--mp-ink-2);
    display: block;
    font-family: var(--mp-font-head);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

button.mp-dash-card__action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--mp-r-sm);
    color: var(--mp-brand);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--mp-font-head);
    font-size: 13px;
    font-weight: 600;
    gap: 4px;
    margin-left: auto;
    padding: 7px 13px;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

button.mp-dash-card__action:hover,
button.mp-dash-card__action:focus-visible {
    background: var(--mp-surface-2);
    color: var(--mp-brand-700, var(--mp-brand));
    text-decoration: none;
}

.mp-group-page .mp-li-row--interactive {
    border-radius: var(--mp-r-sm);
    cursor: pointer;
    margin-inline: -8px;
    padding-inline: 8px;
    transition: background 0.12s ease;
}

.mp-group-page .mp-li-row--interactive:hover {
    background: var(--mp-surface-2, #f7f9fc);
}

.mp-group-page .mp-li-row__end i {
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--mp-ink-3);
    font-size: 18px;
    min-height: 0;
    min-width: 0;
    padding: 0;
}

.mp-group-page .mp-li-row__name {
    color: var(--mp-ink);
    font-family: var(--mp-font-head);
    font-size: 14px;
    font-weight: 600;
}

.mp-group-page .mp-page-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mp-group-page .mp-stack--gap-lg {
    gap: 20px;
}

.mp-group-meet-banner__url {
    font-family: var(--mp-font-head);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mp-ico--on-white {
    background: #fff;
    color: var(--mp-brand);
}

.mp-ico--xs {
    height: 38px;
    width: 38px;
}

.mp-ico--xs i {
    font-size: 17px;
}

.mp-activity {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mp-group-page .mp-activity {
    padding: 0 22px 8px;
}

.mp-activity-item {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    padding: 12px 0;
}

.mp-activity-item + .mp-activity-item {
    border-top: 1px solid var(--mp-line);
}

.mp-activity-item__title {
    font-family: var(--mp-font-head);
    font-weight: 600;
}

.mp-activity-item__sub {
    color: var(--mp-ink-3);
    font-size: 13px;
    margin-top: 2px;
}

@media (max-width: 1024px) {
    .mp-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .mp-grid-3 {
        grid-template-columns: 1fr;
    }

    .mp-group-meet-banner {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }
}

/* Font Awesome — Elementor/theme often force eicons/Poppins on <i>, causing tofu glyphs */
body.mp-platform-shell :is(
    .mp-app,
    .mp-dashboard,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-subscription,
    .mp-profile,
    .mp-group-page,
    .mp-modal-host,
    .elementor-widget-shortcode,
    .elementor-shortcode
) :is(i[class*="fa-"], .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands) {
    display: inline-block;
    font-style: normal !important;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

body.mp-platform-shell :is(
    .mp-app,
    .mp-dashboard,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-subscription,
    .mp-profile,
    .mp-group-page,
    .mp-modal-host,
    .elementor-widget-shortcode,
    .elementor-shortcode
) :is(i.fa-solid, i[class*="fa-solid"], .fa-solid, .fas) {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

body.mp-platform-shell :is(
    .mp-app,
    .mp-dashboard,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-subscription,
    .mp-profile,
    .mp-group-page,
    .mp-modal-host,
    .elementor-widget-shortcode,
    .elementor-shortcode
) :is(i.fa-regular, i[class*="fa-regular"], .fa-regular, .far) {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

body.mp-platform-shell :is(
    .mp-app,
    .mp-dashboard,
    .mp-admin,
    .mp-feedback,
    .mp-homework,
    .mp-subscription,
    .mp-profile,
    .mp-group-page,
    .mp-modal-host,
    .elementor-widget-shortcode,
    .elementor-shortcode
) :is(i.fa-brands, i[class*="fa-brands"], .fa-brands, .fab) {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

body.mp-platform-shell .mp-ico :is(i[class*="fa-"], .fa-solid, .fa-regular) {
    line-height: 1;
}

body.mp-platform-shell .mp-button :is(i[class*="fa-"], .fa-solid, .fa-regular) {
    flex-shrink: 0;
    font-size: 0.95em;
}

body.mp-platform-shell .mp-app .bottom-nav .bn-icon :is(i[class*="fa-"], .fa-solid, .fa-regular) {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1;
    text-align: center;
    width: 20px;
}

/* Same fix when shell body class is missing but platform markup is present */
:is(.mp-app, .mp-dashboard, .mp-admin, .mp-group-page, .mp-modal-host) :is(i.fa-solid, i[class*="fa-solid"], .fa-solid, .fas) {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

:is(.mp-app, .mp-dashboard, .mp-admin, .mp-group-page, .mp-modal-host) :is(i.fa-regular, i[class*="fa-regular"], .fa-regular, .far) {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

/* Mobile shell — viewport fallback (wins over container queries / wide Elementor wrappers) */
@media (max-width: 768px) {
    .mp-app {
        grid-template-areas: "topbar" "main" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    .mp-app > .sidebar {
        display: none !important;
    }

    .mp-app > .main {
        grid-area: main;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .mp-app .main-inner {
        max-width: 100%;
        min-width: 0;
    }

    .mp-cols--aside {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .mp-app .bottom-nav {
        align-items: stretch;
        background: var(--surface) !important;
        border-top: 1px solid var(--line);
        bottom: 0;
        box-shadow: none;
        display: flex !important;
        justify-content: space-around;
        left: 0;
        margin: 0;
        max-width: 100vw;
        padding: var(--mp-space-2) var(--mp-space-1) calc(var(--mp-space-2) + env(safe-area-inset-bottom, 0px));
        position: fixed !important;
        right: 0;
        width: 100%;
        z-index: 9990;
    }

    .mp-app .bottom-nav .bn-item,
    .mp-app .bottom-nav button.bn-item {
        align-items: center;
        appearance: none;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: var(--ink-3);
        cursor: pointer;
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        font-family: var(--font-head);
        font-size: 10px;
        font-weight: 600;
        gap: 4px;
        justify-content: center;
        line-height: 1.2;
        margin: 0;
        min-height: 52px;
        min-width: 0;
        outline: none;
        padding: 6px 2px;
        position: relative;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mp-app .bottom-nav .bn-item.active {
        color: var(--brand);
    }

    .mp-app .bottom-nav .bn-icon {
        align-items: center;
        display: inline-flex;
        flex-shrink: 0;
        height: 24px;
        justify-content: center;
        position: relative;
        width: 24px;
    }

    .mp-app .bottom-nav .bn-icon i {
        display: block;
        font-size: 20px;
        line-height: 1;
        text-align: center;
        width: 20px;
    }

    .mp-app .bottom-nav .bn-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
    }

    .mp-app .bottom-nav .bn-badge {
        position: absolute;
        right: -6px;
        top: -2px;
    }

    .mp-app .main {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .mp-hw-grid {
        gap: 12px;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .mp-hw-card {
        padding: 16px;
    }

    .mp-hw-card__title {
        font-size: 16px;
    }

    .mp-hw-card__meta {
        font-size: 13px;
    }

    .mp-hw-card--student .mp-hw-card__foot {
        align-items: stretch;
        flex-direction: column;
    }

    .mp-hw-card--student .mp-hw-card__foot .mp-button {
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }

    .mp-homework--teacher .mp-dash-head__sub {
        max-width: none;
    }

    .mp-app .mp-drawer-host {
        position: fixed;
        z-index: var(--mp-drawer-z, 100001);
    }

    .mp-app .drawer-overlay,
    .mp-app .drawer {
        position: fixed;
    }
}

/* WordPress admin bar + Astra — shell pages use app chrome only */
body.admin-bar.mp-platform-shell {
    --mp-admin-bar-height: var(--wp-admin--admin-bar--height, 32px);
    --mp-drawer-z: 100001;
}

html:has(body.admin-bar.mp-platform-shell) {
    margin-top: 0 !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar.mp-platform-shell {
        --mp-admin-bar-height: var(--wp-admin--admin-bar--height, 46px);
    }
}

body.mp-platform-shell .site-header,
body.mp-platform-shell .ast-header-wrap,
body.mp-platform-shell .ast-mobile-header-wrap,
body.mp-platform-shell .ast-above-header-wrap,
body.mp-platform-shell .ast-below-header-wrap,
body.mp-platform-shell .ast-footer-wrap,
body.mp-platform-shell .site-footer {
    display: none !important;
}

body.admin-bar.mp-platform-shell #page,
body.admin-bar.mp-platform-shell .site-content,
body.admin-bar.mp-platform-shell #content,
body.admin-bar.mp-platform-shell .content-area,
body.admin-bar.mp-platform-shell .ast-container,
body.admin-bar.mp-platform-shell .entry-content,
body.admin-bar.mp-platform-shell .elementor-section-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.admin-bar.mp-platform-shell .elementor-section:has(.mp-app),
body.admin-bar.mp-platform-shell .elementor-section:has(.mp-app) > .elementor-container,
body.admin-bar.mp-platform-shell .elementor-column:has(.mp-app),
body.admin-bar.mp-platform-shell .elementor-widget-wrap:has(.mp-app),
body.admin-bar.mp-platform-shell .elementor-element:has(.mp-app) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.admin-bar.mp-platform-shell .mp-app .topbar {
    box-sizing: border-box;
    padding-top: var(--mp-admin-bar-height);
    position: sticky;
    top: 0;
    z-index: 100;
}

@media (max-width: 782px) {
    body.admin-bar.mp-platform-shell .mp-app .topbar {
        height: calc(60px + var(--mp-admin-bar-height));
    }

    body.mp-drawer-open .mp-app .mp-drawer-host {
        z-index: var(--mp-drawer-z, 100001);
    }
}

@media (min-width: 783px) {
    body.admin-bar.mp-platform-shell .mp-app .topbar {
        height: calc(68px + var(--mp-admin-bar-height));
    }
}

/* M9 — Group sessions / istoric ședințe */
.mp-group-tabs {
    margin: 0 0 var(--mp-gap-section);
}

.mp-group-page__titlebar {
    margin: 0;
}

.mp-group-page__name {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin: 8px 0 0;
}

.mp-session-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-session-row {
    text-decoration: none;
}

.mp-session-row:hover,
.mp-session-row:focus-visible {
    text-decoration: none;
}

.mp-session-meta {
    gap: 12px;
    margin-bottom: 20px;
}

.mp-session-meta__item {
    min-height: 84px;
}

.mp-session-meta__value {
    display: block;
    font-size: 15px;
    line-height: 1.35;
    margin-top: 6px;
}

.mp-session-meta__value a {
    color: var(--brand);
    text-decoration: none;
}

.mp-session-recording {
    margin-bottom: 20px;
}

.mp-session-recording--locked {
    border-color: var(--line);
}

.mp-session-student {
    margin-bottom: 12px;
}

.mp-session-student__feedback {
    color: var(--ink-2);
    font-size: 14px;
    line-height: var(--mp-line-height-body);
    margin: 0;
}

.mp-activity-item--link {
    align-items: center;
    color: inherit;
    display: flex;
    gap: 12px;
    text-decoration: none;
}

.mp-activity-item--link:hover,
.mp-activity-item--link:focus-visible {
    background: var(--surface-2);
    text-decoration: none;
}

.mp-feedback-recording {
    margin-bottom: 16px;
}

.mp-field--inline {
    min-width: 140px;
}

.mp-select--sm {
    min-height: 38px;
    padding: 6px 10px;
}

.mp-group-details-meta {
    margin-bottom: 20px;
}

.mp-group-details-meta__value {
    display: block;
    font-size: 15px;
    margin-top: 6px;
}

.mp-teacher-reminders {
    margin-bottom: 20px;
}

.mp-teacher-reminder {
    gap: 16px;
}

.mp-teacher-reminder--upcoming {
    border-left: 4px solid var(--info);
}

.mp-teacher-reminder--feedback {
    border-left: 4px solid var(--warning);
}

.mp-session-section {
    margin-bottom: 20px;
}

.mp-session-section__title {
    font-size: 18px;
    margin: 0 0 16px;
}

.mp-session-workflow-form .mp-session-student {
    margin-bottom: 16px;
}

.mp-session-student__feedback {
    margin: 8px 0 0;
}

.mp-session-homework {
    background: var(--mp-surface-2, #f8fafc);
    margin-bottom: 12px;
}

.mp-group-page--session-detail {
    display: flex;
    flex-direction: column;
    gap: var(--mp-gap-section);
}

.mp-group-page--session-detail > .mp-page-head,
.mp-group-page--session-detail > .mp-back-link {
    margin-bottom: 0;
}

.mp-group-page--session-detail > .mp-back-link {
    align-self: flex-start;
    justify-content: flex-start;
    width: auto;
}

.mp-group-page--session-detail .mp-back-link {
    margin-bottom: 0;
}

.mp-group-students-list {
    margin-top: 4px;
}

.mp-group-student-card {
    overflow: hidden;
}

.mp-group-student-card__head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 14px;
    padding: 18px 20px;
}

.mp-group-student-card__identity {
    min-width: 0;
}

.mp-group-student-card__name {
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
}

.mp-group-student-card__meta {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

.mp-group-student-card__body {
    display: grid;
    gap: 0;
}

.mp-group-student-card__section {
    border-top: 1px solid var(--line);
    padding: 18px 20px;
}

.mp-group-student-card__section:first-child {
    border-top: 0;
}

.mp-group-student-card__section-title {
    align-items: center;
    display: flex;
    font-size: 15px;
    gap: 8px;
    margin: 0 0 14px;
}

.mp-group-student-card__section-title i {
    color: var(--brand);
}

.mp-group-student-homework-list {
    display: grid;
    gap: 10px;
}

.mp-group-student-homework-row {
    align-items: center;
    background: var(--mp-surface-2, #f8fafc);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 10px 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 14px;
}

.mp-group-student-homework-row__title {
    display: block;
    font-weight: 600;
}

.mp-group-student-homework-row__sub {
    color: var(--ink-2);
    display: block;
    font-size: 13px;
    margin-top: 2px;
}

.mp-group-student-homework-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / -1;
}

/* Group hub — teacher overview */
.mp-group-page--overview {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mp-group-hub-stats {
    margin-bottom: 4px;
}

.mp-group-hub-section {
    gap: 14px;
}

.mp-group-hub-section__title {
    font-size: 1.125rem;
    margin: 0;
}

.mp-group-hub-list {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mp-group-hub-list__item {
    align-items: center;
    background: var(--mp-surface-2, #f8fafc);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 12px 14px;
}

.mp-group-hub-list__label {
    flex: 1 1 auto;
    font-weight: 600;
    min-width: 0;
}

.mp-group-hub-next-session {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mp-session-referenced-homework__list {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.mp-session-referenced-homework__item {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-teacher-groups-quick {
    margin-top: var(--mp-rhythm-lg);
}

/* Dashboard sections — Apple HIG: 32pt between regions, 24pt title→content */
.mp-dash-section {
    margin-top: var(--mp-rhythm-lg);
}

.mp-dash-section__header,
.mp-dash-section > .mp-between:first-child {
    align-items: center;
    gap: var(--mp-gap-stack);
    margin-bottom: var(--mp-gap-section);
}

.mp-dash-section__title {
    font-family: var(--mp-font-head);
    font-size: 20px;
    font-weight: 700;
    line-height: var(--mp-line-height-tight);
    margin: 0;
}

/* M10 — Teacher group hub UX (expandable students, square tabs, spacing) */
.mp-teacher-groups__head {
    margin-bottom: var(--mp-gap-section);
}

.mp-teacher-groups__head + .mp-grid,
.mp-teacher-groups__head + .mp-teacher-groups__grid {
    margin-top: 0;
}

/* Group hub pages — 24pt rhythm between header, tabs, content (Apple content blocks) */
.mp-group-page--students,
.mp-group-page--homework,
.mp-group-page--sessions,
.mp-group-page--student-hub,
.mp-group-page--overview {
    display: flex;
    flex-direction: column;
    gap: var(--mp-gap-section);
}

.mp-group-page--students > .mp-group-page__titlebar--teacher,
.mp-group-page--homework > .mp-group-page__titlebar--teacher,
.mp-group-page--sessions > .mp-group-page__titlebar--teacher,
.mp-group-page--details > .mp-group-page__titlebar--teacher,
.mp-group-page--student-hub > .mp-student-hub__head,
.mp-group-page--student-hub > .mp-group-tabs,
.mp-group-page--student-hub > .mp-page-head,
.mp-group-page--students > .mp-group-tabs,
.mp-group-page--students > .mp-group-page__nav,
.mp-group-page--students > .mp-page-head,
.mp-group-page--homework > .mp-group-tabs,
.mp-group-page--homework > .mp-group-page__nav,
.mp-group-page--homework > .mp-page-head,
.mp-group-page--sessions > .mp-group-tabs,
.mp-group-page--sessions > .mp-group-page__nav,
.mp-group-page--sessions > .mp-page-head,
.mp-group-page--details > .mp-group-page__nav {
    margin-bottom: 0;
}

.mp-group-page__titlebar--teacher {
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-3);
    margin-bottom: 0;
}

.mp-group-page__titlebar-row--top {
    align-items: flex-start;
    gap: 16px;
}

.mp-group-page__titlebar-row--top .mp-group-page__name {
    margin: 0;
}

.mp-group-page__subtitle {
    margin: 0;
}

.mp-group-page__titlebar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mp-session-links-form {
    gap: 16px;
}

.mp-session-links-form .mp-field + .mp-field {
    margin-top: 0;
}

@media (max-width: 767px) {
    .mp-group-page__nav-top {
        align-items: stretch;
        flex-direction: column;
    }

    .mp-group-page__nav-tabs {
        flex-basis: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    .mp-group-page__nav-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .mp-group-page__nav-subactions {
        width: 100%;
    }

    .mp-group-page__nav-actions-group .mp-button {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        min-height: 44px;
    }

    .mp-group-tabs--square.mp-group-tabs--teacher {
        display: flex;
        min-width: 100%;
        width: max-content;
    }

    .mp-group-tabs--square.mp-group-tabs--teacher .mp-group-tab {
        flex: 0 0 auto;
        min-width: 96px;
    }

    .mp-group-page__titlebar-row--top {
        flex-direction: column;
        align-items: stretch;
    }

    .mp-group-page__back {
        align-self: flex-start;
    }

    .mp-group-page__titlebar-actions .mp-button {
        flex: 1 1 calc(50% - 5px);
        justify-content: center;
        min-height: 44px;
    }
}

.mp-group-page__toolbar {
    display: contents;
}

.mp-group-page__nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: var(--mp-gap-section);
}

.mp-group-page__nav-top {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    justify-content: space-between;
}

.mp-group-page__nav-tabs {
    flex: 1 1 280px;
    min-width: 0;
}

.mp-group-page__nav-actions,
.mp-group-page__nav-subactions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-group-page__nav-actions {
    flex: 0 1 auto;
    justify-content: flex-end;
}

.mp-group-page__nav-subactions {
    background: var(--mp-surface-2, #f3f6fa);
    border: 1px solid var(--mp-line);
    border-radius: 12px;
    padding: 10px 12px;
}

.mp-group-page__nav-actions-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-group-page__nav .mp-group-tabs {
    margin-bottom: 0;
}

.mp-group-page__actions {
    align-items: center;
    gap: 10px;
}

.mp-group-tabs--square {
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.mp-group-tabs--square::-webkit-scrollbar {
    display: none;
}

.mp-group-tabs--square .mp-group-tab {
    border-radius: 10px;
    flex: 0 0 auto;
    font-size: 14px;
    justify-content: center;
    min-height: 44px;
    min-width: 96px;
    padding: 10px 18px;
}

.mp-group-tabs--square.mp-group-tabs--teacher {
    background: var(--mp-surface-2, #eef2f7);
    border: 1px solid var(--mp-line);
    border-radius: 12px;
    display: inline-flex;
    gap: 4px;
    max-width: 100%;
    padding: 4px;
    padding-bottom: 4px;
}

.mp-group-tabs--square.mp-group-tabs--teacher .mp-group-tab {
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--mp-ink-2);
    flex: 1 1 0;
    min-height: 40px;
    min-width: 88px;
    padding: 8px 14px;
}

.mp-group-tabs--square.mp-group-tabs--teacher .mp-group-tab:hover:not(.is-active),
.mp-group-tabs--square.mp-group-tabs--teacher .mp-group-tab:focus-visible:not(.is-active) {
    background: rgba(255, 255, 255, 0.72);
    border-color: transparent;
    color: var(--mp-brand-700);
}

.mp-group-tabs--square.mp-group-tabs--teacher .mp-group-tab.is-active {
    background: var(--mp-brand);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    color: #fff;
}

.mp-page-head--students {
    margin-bottom: 0;
}

.mp-page-head--students h1 {
    margin-bottom: 6px;
}

.mp-session-list-section {
    margin-bottom: 28px;
}

.mp-session-list-section__title {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 14px;
}

.mp-session-row__time {
    display: block;
    font-weight: 600;
    margin-top: 2px;
}

.mp-session-row__meta {
    margin-top: 2px;
}

.mp-session-row__actions {
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
}

.mp-session-link-simple .mp-form {
    gap: 14px;
}

.mp-session-link-simple .mp-input {
    max-width: 100%;
}

.mp-student-group-simple__announcement {
    margin-bottom: 16px;
}

.mp-student-group-header {
    margin-bottom: 8px;
}

.mp-student-homework-list {
    margin-top: 4px;
}

.mp-student-homework-card__head {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
}

.mp-student-homework-card__title {
    font-size: 18px;
    grid-column: 1;
    grid-row: 1;
    line-height: 1.3;
    margin: 0;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

.mp-student-homework-card__head > .mp-badge {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    max-width: 100%;
    padding: 8px 14px;
    white-space: normal;
}

.mp-student-homework-card__context,
.mp-student-homework-card__due {
    color: var(--ink-2);
    font-size: 14px;
    margin: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

.mp-student-homework-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.mp-student-feedback-section__title {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 12px;
}

.mp-student-feedback-entry__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.mp-student-feedback-entry__teacher {
    color: var(--ink-2);
    font-size: 13px;
    margin: 0 0 8px;
}

.mp-student-feedback-entry__content {
    margin: 0;
}

.mp-student-session-card .mp-parent-session-card__meta {
    gap: 6px;
}

.mp-student-session-detail__head {
    margin-bottom: 16px;
}

.mp-student-session-detail__summary {
    margin-bottom: 16px;
}

.mp-student-session-homework-row {
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.mp-student-session-homework-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.mp-student-session-homework-row__title {
    margin: 0 0 4px;
}

.mp-student-session-homework-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

@media (max-width: 767px) {
    .mp-student-homework-card__actions .mp-button,
    .mp-student-session-homework-row__actions .mp-button {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        min-height: 44px;
    }

    .mp-group-tabs--student .mp-group-tab {
        min-width: 108px;
    }
}

.mp-group-student-card--expandable {
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 0;
}

.mp-group-student-card--expandable .mp-group-student-card__details {
    display: block;
}

.mp-group-student-card--expandable .mp-group-student-card__summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 14px;
    list-style: none;
    padding: 16px 18px;
    transition: background 0.15s ease;
}

.mp-group-student-card--expandable .mp-group-student-card__summary::-webkit-details-marker {
    display: none;
}

.mp-group-student-card--expandable .mp-group-student-card__summary:hover {
    background: var(--surface-2, #f8fafc);
}

.mp-group-student-card--expandable .mp-group-student-card__summary-main {
    display: grid;
    flex: 1;
    gap: 3px;
    min-width: 0;
}

.mp-group-student-card--expandable .mp-group-student-card__summary-line {
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.4;
}

.mp-group-student-card--expandable .mp-group-student-card__chevron {
    align-items: center;
    color: var(--ink-3);
    display: inline-flex;
    flex-shrink: 0;
    height: 36px;
    justify-content: center;
    transition: transform 0.22s ease;
    width: 36px;
}

.mp-group-student-card--expandable .mp-group-student-card__details[open] .mp-group-student-card__chevron {
    transform: rotate(180deg);
}

.mp-group-student-card--expandable .mp-group-student-card__body {
    animation: mp-student-expand-in 0.22s ease;
    border-top: 1px solid var(--line);
}

@keyframes mp-student-expand-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mp-group-students-list {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

@media (max-width: 767px) {
    .mp-group-page__titlebar--teacher {
        flex-direction: column;
        gap: 16px;
    }

    .mp-group-page__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .mp-group-page__actions .mp-button {
        flex: 1 1 calc(50% - 5px);
        justify-content: center;
        min-height: 44px;
    }

    .mp-session-row__actions {
        align-items: stretch;
        width: 100%;
    }

    .mp-session-row__actions .mp-button {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .mp-group-hub-list__item {
        flex-direction: column;
        align-items: stretch;
    }

    .mp-group-hub-list__item .mp-button {
        width: 100%;
    }
}

.mp-group-student-feedback-history {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.mp-group-student-feedback-entry {
    background: var(--mp-surface-2, #f8fafc);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
}

.mp-group-student-feedback-entry__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.mp-group-student-feedback-entry__content {
    color: var(--ink-2);
    font-size: 14px;
    line-height: var(--mp-line-height-body);
    margin: 0;
    white-space: pre-wrap;
}

.mp-group-student-feedback-form {
    border-top: 1px dashed var(--line);
    margin-top: 4px;
    padding-top: 16px;
}

@media (min-width: 768px) {
    .mp-group-student-homework-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .mp-group-student-homework-row__actions {
        grid-column: auto;
        justify-content: flex-end;
    }
}

.mp-session-student-list {
    display: grid;
    gap: 14px;
}

.mp-session-student-card {
    background: var(--mp-surface-2, #f8fafc);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
}

.mp-session-student-card__head {
    align-items: center;
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}

.mp-session-student-card__name {
    font-size: 17px;
    line-height: 1.3;
    margin: 0;
}

.mp-session-student-card__parent {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

.mp-session-student-card__grid {
    display: grid;
    gap: 12px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
}

.mp-session-student-card__homework {
    border-top: 1px dashed var(--line);
    margin-top: 4px;
    padding-top: 14px;
}

.mp-session-student-card__homework-status {
    margin: 8px 0;
}

.mp-modal--workspace {
    max-height: min(92vh, 980px);
    max-width: min(96vw, 1180px);
    width: 100%;
}

.mp-modal--workspace .mp-modal__head {
    align-items: flex-start;
}

.mp-hw-workspace__layout {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
    max-height: calc(min(92vh, 980px) - 72px);
    min-height: 520px;
}

.mp-hw-workspace__viewer {
    background: var(--mp-surface-2, #f1f5f9);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mp-hw-workspace__viewer-tabs {
    background: var(--mp-surface, #fff);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 8px;
    padding: 10px 12px;
}

.mp-hw-workspace__tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--ink-2);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
}

.mp-hw-workspace__tab.is-active {
    background: var(--mp-info-bg, #eef4ff);
    border-color: var(--mp-brand-100, #cfe0ff);
    color: var(--brand);
}

.mp-hw-workspace__canvas {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px;
}

.mp-hw-workspace__canvas[hidden] {
    display: none;
}

.mp-hw-workspace__iframe {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: block;
    height: min(68vh, 720px);
    min-height: 420px;
    width: 100%;
}

.mp-hw-workspace__figure {
    margin: 0;
}

.mp-hw-workspace__image {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: block;
    height: auto;
    max-height: min(68vh, 720px);
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.mp-hw-workspace__fallback {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-height: 280px;
    text-align: center;
}

.mp-hw-workspace__panel {
    min-height: 0;
    overflow: auto;
    padding: 18px 20px;
}

.mp-hw-workspace__panel-title {
    font-size: 16px;
    margin: 0 0 8px;
}

.mp-hw-workspace__panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

.mp-hw-workspace--focus-panel .mp-hw-workspace__panel {
    box-shadow: inset 0 0 0 2px rgba(0, 123, 255, 0.18);
}

.mp-dropzone--compact {
    min-height: 120px;
    padding: 16px;
}

@media (max-width: 960px) {
    .mp-hw-workspace__layout {
        grid-template-columns: 1fr;
        max-height: none;
        min-height: 0;
    }

    .mp-hw-workspace__viewer {
        border-bottom: 1px solid var(--line);
        border-right: 0;
        min-height: 360px;
    }

    .mp-hw-workspace__iframe {
        min-height: 320px;
    }
}

@media (max-width: 767px) {
    .mp-session-student-card__grid {
        grid-template-columns: 1fr;
    }
}

/* Teacher UI simplification — dashboard, groups, sessions */
.mp-dashboard--teacher {
    max-width: 880px;
}

.mp-banner--next {
    margin-bottom: 24px;
}

.mp-banner__content {
    display: grid;
    gap: 0;
    min-width: 0;
}

.mp-banner__badge-wrap {
    margin-bottom: 16px;
}

.mp-banner__title {
    margin: 0 0 10px;
}

.mp-banner__soft {
    margin: 0;
}

.mp-banner__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.mp-teacher-reminder {
    align-items: center;
    padding: 16px 18px;
    text-align: left;
}

.mp-teacher-reminder__body {
    flex: 1;
    min-width: 0;
}

.mp-teacher-reminder__title {
    display: block;
    font-size: 1rem;
    margin-bottom: 6px;
}

.mp-teacher-reminder__meta {
    display: block;
    line-height: 1.45;
}

.mp-teacher-reminder__action {
    flex-shrink: 0;
}

.mp-teacher-group-card {
    min-height: auto;
}

.mp-teacher-group-card__top {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mp-teacher-group-card__title {
    flex: 1;
    margin: 0;
    min-width: 0;
}

.mp-teacher-group-card__title-text {
    color: inherit;
    font-size: 1.25rem;
    font-weight: 700;
}

.mp-teacher-group-card__schedule {
    color: var(--ink-2, #64748b);
    font-size: 0.95rem;
    margin: 0;
}

.mp-teacher-group-card__actions {
    align-items: center;
    min-height: 52px;
    padding: 12px 18px 16px;
}

.mp-teacher-group-card__meet-missing {
    padding: 4px 0;
}

.mp-group-page__admin-actions {
    margin-bottom: 16px;
}

.mp-kv-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.mp-kv-list__row {
    align-items: baseline;
    display: grid;
    gap: 8px 16px;
    grid-template-columns: minmax(120px, 160px) 1fr;
}

.mp-kv-list__key {
    color: var(--ink-2, #64748b);
    font-size: 0.875rem;
    margin: 0;
}

.mp-kv-list__value {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.mp-session-details-compact__recording {
    border-top: 1px dashed var(--line, #e8edf3);
    margin-top: 16px;
    padding-top: 16px;
}

.mp-session-homework__intro {
    line-height: 1.55;
    margin: 0 0 28px;
}

.mp-session-homework--upload {
    padding: 24px 26px 28px;
}

.mp-session-homework--upload .mp-session-section__title {
    margin-bottom: 10px;
}

.mp-form--session-homework {
    display: grid;
    gap: 24px;
}

.mp-form--session-homework .mp-field--spacious {
    display: grid;
    gap: 10px;
}

.mp-form--session-homework .mp-form-label {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.mp-form--session-homework .mp-input--touch {
    font-size: 1rem;
    min-height: 48px;
    padding: 12px 14px;
}

.mp-grid--session-homework {
    gap: 20px;
}

.mp-dropzone--session-hw {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-height: 148px;
    padding: 28px 24px;
}

.mp-dropzone--session-hw .mp-dropzone__ico {
    font-size: 1.75rem;
    margin-bottom: 4px;
}

.mp-dropzone--session-hw .mp-dropzone__title {
    font-size: 0.975rem;
    line-height: 1.45;
    max-width: 28rem;
    text-align: center;
}

.mp-session-homework__actions {
    border-top: 1px solid var(--line, #e8edf3);
    margin-top: 4px;
    padding-top: 24px;
}

.mp-session-homework__submit {
    margin: 0;
    min-height: 52px;
    width: 100%;
}

@media (max-width: 640px) {
    .mp-grid--session-homework {
        grid-template-columns: 1fr;
    }

    .mp-session-homework--upload {
        padding: 20px 18px 24px;
    }
}

.mp-session-student-card--simple {
    border: 1px solid var(--line, #e8edf3);
    border-radius: 14px;
    display: grid;
    gap: 14px;
    padding: 16px 18px;
}

.mp-session-student-card--simple .mp-session-student-card__head {
    margin: 0;
}

.mp-session-student-card--simple .mp-session-student-card__name {
    font-size: 1.05rem;
    margin: 0;
}

.mp-session-student-card__status-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.mp-session-student-card__status-row {
    align-items: center;
    display: grid;
    gap: 8px 12px;
    grid-template-columns: minmax(90px, 110px) 1fr;
}

.mp-session-student-card__status-row dt {
    color: var(--ink-2, #64748b);
    font-size: 0.875rem;
    margin: 0;
}

.mp-session-student-card__status-row dd {
    margin: 0;
}

.mp-session-student-card--simple .mp-session-student-card__actions {
    gap: 10px;
    margin: 0;
}

.mp-session-student-card--simple .mp-session-student-card__feedback {
    border: 0;
    margin: 0;
    padding: 0;
}

.mp-session-student-card--simple .mp-session-student-card__feedback-toggle {
    list-style: none;
}

@media (max-width: 640px) {
    .mp-kv-list__row,
    .mp-session-student-card__status-row {
        grid-template-columns: 1fr;
    }

    .mp-teacher-reminder {
        align-items: stretch;
        flex-direction: column;
    }

    .mp-teacher-reminder__action {
        width: 100%;
    }
}

.mp-hw-preview {
    margin-top: 12px;
}

.mp-hw-preview__iframe {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: block;
    height: min(420px, 55vh);
    width: 100%;
}

.mp-hw-preview__image {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: block;
    height: auto;
    max-height: min(420px, 55vh);
    max-width: 100%;
}

.mp-session-homework__current {
    display: grid;
    gap: 8px;
}

.mp-group-roster {
    display: grid;
    gap: 12px;
}

.mp-group-roster__row {
    align-items: center;
    display: flex;
    gap: 12px;
}

.mp-session-list-section {
    margin-bottom: 24px;
}

.mp-session-list-section__title {
    font-size: 1rem;
    margin: 0 0 12px;
}

.mp-session-schedule-summary {
    margin-bottom: 20px;
}

.mp-session-admin-panel .mp-form + .mp-form {
    margin-top: 12px;
}

.mp-cols--internal-review {
    grid-template-columns: 1fr;
}

.mp-pdf-correction-panel {
    position: sticky;
    bottom: 12px;
    z-index: 2;
}

.mp-pdf-corrector {
    display: grid;
    gap: 12px;
}

.mp-hw-download-card {
    align-items: center;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px 20px;
}

.mp-hw-download-card--success {
    background: linear-gradient(135deg, #ecfdf5 0%, #f8fafc 100%);
    border-color: #a7f3d0;
}

.mp-hw-download-card__icon {
    align-items: center;
    background: #fff;
    border-radius: 14px;
    color: #2563eb;
    display: flex;
    flex-shrink: 0;
    font-size: 1.75rem;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.mp-hw-download-card--success .mp-hw-download-card__icon {
    color: #059669;
}

.mp-hw-download-card__body {
    flex: 1 1 220px;
    min-width: 0;
}

.mp-hw-download-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.mp-hw-download-card__sub {
    color: var(--ink-3, #64748b);
    font-size: 0.92rem;
    margin: 0;
}

.mp-hw-download-card__action {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .mp-hw-download-card {
        flex-direction: column;
        align-items: stretch;
    }

    .mp-hw-download-card__action {
        width: 100%;
        justify-content: center;
    }
}

.mp-pdf-corrector__toolbar {
    align-items: center;
    background: var(--surface, #fff);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.mp-pdf-corrector__toolbar .is-active,
.mp-pdf-corrector__toolbar [aria-pressed="true"] {
    background: rgba(0, 123, 255, 0.12);
    border-color: rgba(0, 123, 255, 0.35);
    box-shadow: inset 0 0 0 1px rgba(0, 123, 255, 0.2);
}

.mp-pdf-corrector__color,
.mp-pdf-corrector__size {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.mp-pdf-corrector__pager {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}

.mp-pdf-corrector__viewport {
    -webkit-overflow-scrolling: touch;
    background: #eef2f7;
    border: 1px solid var(--line);
    border-radius: 16px;
    max-height: min(72dvh, 820px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 12px;
    touch-action: pan-y pinch-zoom;
}

.mp-pdf-corrector__page-wrap {
    margin: 0;
    position: relative;
    transform-origin: 0 0;
    width: fit-content;
    will-change: transform;
}

.mp-pdf-corrector__canvas {
    display: block;
    max-width: 100%;
}

.mp-pdf-corrector__canvas--base {
    pointer-events: none;
}

.mp-pdf-corrector__canvas--ink {
    cursor: crosshair;
    left: 0;
    position: absolute;
    top: 0;
    touch-action: none;
    z-index: 2;
}

.mp-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (max-width: 960px) {
    .mp-pdf-correction-panel {
        bottom: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
    }

    .mp-pdf-corrector__viewport {
        max-height: 58vh;
    }

    .mp-correction-queue__nav {
        flex-direction: column;
    }

    .mp-correction-queue__next {
        margin-left: 0;
    }

    .mp-pdf-corrector__toolbar {
        gap: 10px;
    }

    .mp-pdf-tool span {
        display: none;
    }
}

/* Correction flow — tablet-friendly, airy forms */
.mp-correction-flow {
    max-width: 920px;
}

.mp-correction-flow > .mp-back-link {
    display: inline-flex;
    margin-bottom: 18px;
}

.mp-page-head--correction {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.mp-page-head--correction h1 {
    margin: 0;
}

.mp-page-head--correction .mp-page-head__sub {
    margin: 0;
}

.mp-correction-flow .mp-notice,
.mp-correction-flow .mp-flash {
    margin-bottom: 24px;
}

.mp-correction-queue {
    background: var(--surface-2, #f8fafc);
    border: 1px solid var(--line);
    border-radius: 16px;
    display: grid;
    gap: 16px;
    margin-bottom: 32px;
    padding: 18px 20px;
}

.mp-correction-queue__summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.mp-correction-queue__label {
    color: var(--ink-2);
    font-size: 0.875rem;
}

.mp-correction-queue__name {
    font-size: 1.05rem;
}

.mp-correction-queue__track {
    background: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.mp-correction-queue__fill {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width 0.25s ease;
}

.mp-correction-queue__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.mp-correction-queue__next {
    margin-left: auto;
}

.mp-correction-step {
    gap: 24px;
    padding: 24px;
}

.mp-correction-step--draw {
    gap: 28px;
}

.mp-correction-step__head {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    margin-bottom: 4px;
}

.mp-correction-step__head .mp-stack--gap-sm {
    gap: 10px;
}

.mp-correction-step__badge {
    align-items: center;
    background: #2563eb;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.mp-correction-step__title {
    font-size: 1.15rem;
    margin: 0;
}

.mp-correction-step__hint {
    color: var(--ink-3, #64748b);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
    max-width: 40rem;
}

.mp-pdf-correction-head {
    border-top: 1px solid var(--line, #e2e8f0);
    margin-top: 4px;
    padding-top: 20px;
}

.mp-pdf-correction-stage {
    display: grid;
    gap: 18px;
}

.mp-pdf-correction-stage__open {
    display: grid;
    gap: 10px;
}

.mp-pdf-correction-stage__note {
    color: var(--ink-3, #64748b);
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0;
}

.mp-pdf-correction-stage__slot .mp-pdf-corrector__viewport {
    max-height: min(48vh, 480px);
}

.mp-pdf-corrector--expanded {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0;
}

.mp-pdf-corrector--expanded .mp-pdf-corrector__viewport {
    flex: 1;
    max-height: none;
    min-height: 240px;
}

.mp-corrector-fs {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 5vh 5vw;
    position: fixed;
    z-index: 10050;
}

.mp-corrector-fs[hidden] {
    display: none !important;
}

body.mp-corrector-fs-open {
    overflow: hidden;
}

.mp-corrector-fs__overlay {
    background: rgba(15, 23, 42, 0.58);
    inset: 0;
    position: absolute;
}

.mp-corrector-fs__panel {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
    height: 90vh;
    max-width: 1400px;
    overflow: hidden;
    position: relative;
    width: 90vw;
    z-index: 1;
}

.mp-corrector-fs__head {
    align-items: flex-start;
    border-bottom: 1px solid var(--line, #e2e8f0);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 16px 18px;
}

.mp-corrector-fs__title {
    font-size: 1.15rem;
    margin: 0;
}

.mp-corrector-fs__sub {
    color: var(--ink-3, #64748b);
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 6px 0 0;
}

.mp-corrector-fs__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 16px 16px;
    -webkit-overflow-scrolling: touch;
}

.mp-corrector-fs__foot {
    border-top: 1px solid var(--line, #e2e8f0);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 16px;
}

.mp-corrector-fs__foot .mp-button {
    min-height: 48px;
}

@media (max-width: 640px) {
    .mp-corrector-fs {
        padding: 0;
    }

    .mp-corrector-fs__panel {
        border-radius: 0;
        height: 100vh;
        width: 100vw;
    }

    .mp-corrector-fs__foot {
        justify-content: stretch;
    }

    .mp-corrector-fs__foot .mp-button {
        flex: 1 1 140px;
    }
}

@media (min-width: 768px) and (max-width: 1180px) {
    .mp-correction-step {
        padding: 28px;
    }

    .mp-pdf-corrector__toolbar {
        gap: 10px;
        padding: 12px 14px;
    }
}

.mp-form--correction {
    display: grid;
    gap: 20px;
}

.mp-form--correction .mp-field--spacious {
    display: grid;
    gap: 8px;
}

.mp-input--touch,
.mp-form--correction .mp-select.mp-input--touch,
.mp-form--correction .mp-textarea.mp-input--touch {
    font-size: 1rem;
    min-height: 48px;
    padding: 12px 14px;
}

.mp-form--correction .mp-textarea.mp-input--touch {
    line-height: var(--mp-line-height-body);
    min-height: 120px;
    resize: vertical;
}

.mp-grid--correction-fields {
    gap: 16px;
}

.mp-correction-actions {
    display: grid;
    gap: 12px;
    margin-top: 4px;
}

.mp-correction-actions__primary {
    min-height: 52px;
}

.mp-correction-actions__hint {
    margin: 0;
    text-align: center;
}

/* Review queue — card list (Apple-inspired) */
.mp-review-queue-cards {
    display: grid;
    gap: 14px;
}

.mp-review-card {
    background: var(--mp-surface, #fff);
    border: 1px solid var(--mp-line, #e2e8f0);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 18px 16px;
}

.mp-review-card__head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.mp-review-card__copy {
    flex: 1;
    min-width: 0;
}

.mp-review-card__title {
    color: var(--mp-ink, #0f172a);
    font-family: var(--mp-font-head, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}

.mp-review-card__student {
    color: var(--mp-ink-2, #475569);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 4px 0 0;
}

.mp-review-card__meta {
    color: var(--mp-ink-3, #64748b);
    display: flex;
    flex-direction: column;
    font-size: 0.8125rem;
    gap: 6px;
    line-height: 1.4;
}

.mp-review-card__meta-item {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.mp-review-card__meta-item i {
    color: var(--mp-brand, #2563eb);
    flex-shrink: 0;
    font-size: 0.75rem;
    opacity: 0.85;
    width: 1rem;
}

.mp-review-card__action {
    justify-content: center;
    margin-top: 4px;
    min-height: 48px;
    width: 100%;
}

.mp-homework--review-queue .mp-review-queue-cards,
.mp-homework--corrector .mp-review-queue-cards {
    margin-top: 8px;
}

@media (min-width: 768px) {
    .mp-review-queue-cards {
        gap: 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .mp-review-queue-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Full-page correction studio (Goodnotes-style) */
body.mp-correction-studio-open {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    overflow: hidden;
    overscroll-behavior: none;
    user-select: none;
}

body.mp-pdf-corrector-scroll-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}

@media (max-width: 767px) {
    body.mp-pdf-corrector-scroll-lock {
        touch-action: auto;
    }
}

.mp-correction-studio {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    overscroll-behavior: contain;
    user-select: none;
}

.mp-correction-studio .mp-pdf-corrector__toolbar,
.mp-correction-studio .mp-pdf-corrector__toolbar * {
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    touch-action: auto;
    user-select: auto;
}

body.mp-correction-studio-open .mp-app > .sidebar,
body.mp-correction-studio-open .mp-app > .topbar,
body.mp-correction-studio-open .mp-app > .bottom-nav,
body.mp-correction-studio-open .mp-app .mp-drawer-host {
    display: none !important;
}

body.mp-correction-studio-open .mp-app > .main {
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
}

.mp-correction-studio {
    background: #e8edf3;
    display: flex;
    flex-direction: column;
    inset: 0;
    min-height: 100dvh;
    position: fixed;
    z-index: 10040;
}

.mp-correction-studio__header {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--line, #e2e8f0);
    display: flex;
    flex-shrink: 0;
    gap: 12px;
    justify-content: space-between;
    min-height: 56px;
    padding: 8px 12px;
    z-index: 5;
}

.mp-correction-studio__header-start,
.mp-correction-studio__header-end {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    min-width: 0;
}

.mp-correction-studio__header-start {
    flex: 1 1 auto;
}

.mp-correction-studio__header-center {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    justify-content: center;
}

.mp-correction-studio__header-end {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.mp-correction-studio__back {
    align-items: center;
    color: var(--ink-2, #475569);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 4px;
    text-decoration: none;
    white-space: nowrap;
}

.mp-correction-studio__meta {
    display: grid;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.mp-correction-studio__student {
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-correction-studio__homework {
    color: var(--ink-3, #64748b);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-correction-studio__pages {
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

.mp-correction-studio__details {
    background: #f8fafc;
    border-bottom: 1px solid var(--line, #e2e8f0);
    color: var(--ink-3, #64748b);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 8px 16px;
    padding: 8px 16px;
}

.mp-correction-studio__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.mp-correction-studio__fallback {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.mp-correction-studio__drawer,
.mp-correction-studio__drawer .mp-homework-review-form,
.mp-correction-studio__drawer .mp-pdf-correction-form {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    touch-action: manipulation;
    user-select: text;
}

.mp-correction-studio__drawer input,
.mp-correction-studio__drawer textarea,
.mp-correction-studio__drawer select,
.mp-correction-studio__drawer button {
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-user-select: text;
    user-select: text;
}

.mp-correction-studio__drawer textarea {
    overflow-y: auto;
    resize: vertical;
}

.mp-correction-studio__drawer {
    background: #fff;
    border-left: 1px solid var(--line, #e2e8f0);
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    inset: 0 0 0 auto;
    max-width: min(420px, 100vw);
    position: fixed;
    width: min(420px, 100vw);
    z-index: 10060;
}

.mp-correction-studio__drawer[hidden] {
    display: none !important;
}

.mp-correction-studio__drawer-head {
    align-items: center;
    border-bottom: 1px solid var(--line, #e2e8f0);
    display: flex;
    justify-content: space-between;
    padding: 16px 18px;
}

.mp-correction-studio__drawer-head h2 {
    font-size: 1.05rem;
    margin: 0;
}

.mp-correction-studio__drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 18px;
    -webkit-overflow-scrolling: touch;
}

.mp-correction-studio__status {
    bottom: 12px;
    left: 50%;
    position: fixed;
    transform: translateX(-50%);
    z-index: 10070;
}

.mp-correction-studio__status:not(.mp-visually-hidden) {
    background: rgba(15, 23, 42, 0.88);
    border-radius: 999px;
    clip: auto;
    color: #fff;
    font-size: 0.875rem;
    height: auto;
    margin: 0;
    overflow: visible;
    padding: 10px 18px;
    position: fixed;
    width: auto;
}

.mp-correction-studio__status--error {
    background: rgba(220, 38, 38, 0.92) !important;
}

.mp-pdf-corrector--studio {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

.mp-pdf-corrector__toolbar--studio {
    border: 0;
    border-bottom: 1px solid var(--line, #e2e8f0);
    border-radius: 0;
    flex-shrink: 0;
    gap: 6px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 8px 10px;
    position: relative;
    top: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

@media (min-width: 1025px) {
    .mp-pdf-corrector__toolbar-more-toggle,
    .mp-pdf-corrector__help-toggle {
        display: none !important;
    }

    .mp-pdf-corrector__tool-group--chips {
        display: none !important;
    }

    .mp-correction-studio__compact-context {
        display: none !important;
    }
}

/* Studio toolbar — active tools albastru brand (câștigă peste ghost reset) */
body.mp-correction-studio-open .mp-pdf-corrector__toolbar--studio button.mp-pdf-tool[data-tool].is-active,
body.mp-correction-studio-open .mp-pdf-corrector__toolbar--studio button.mp-pdf-tool[data-tool][aria-pressed="true"] {
    background: var(--mp-brand, #007bff) !important;
    border: 1px solid var(--mp-brand-600, #0067d6) !important;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.32) !important;
    color: #fff !important;
    opacity: 1 !important;
}

body.mp-correction-studio-open .mp-pdf-corrector__toolbar--studio button.mp-pdf-tool[data-tool].is-active i,
body.mp-correction-studio-open .mp-pdf-corrector__toolbar--studio button.mp-pdf-tool[data-tool].is-active span,
body.mp-correction-studio-open .mp-pdf-corrector__toolbar--studio button.mp-pdf-tool[data-tool][aria-pressed="true"] i,
body.mp-correction-studio-open .mp-pdf-corrector__toolbar--studio button.mp-pdf-tool[data-tool][aria-pressed="true"] span {
    color: #fff !important;
}

body.mp-correction-studio-open .mp-pdf-corrector__toolbar--studio .mp-pdf-corrector__toolbar-more-toggle.is-active {
    background: var(--mp-brand, #007bff) !important;
    border-color: var(--mp-brand-600, #0067d6) !important;
    color: #fff !important;
}

body.mp-correction-studio-open .mp-pdf-corrector__toolbar--studio .mp-pdf-corrector__toolbar-more-toggle.is-active i,
body.mp-correction-studio-open .mp-pdf-corrector__toolbar--studio .mp-pdf-corrector__toolbar-more-toggle.is-active span {
    color: #fff !important;
}

.mp-pdf-corrector__toolbar-actions {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 4px;
}

.mp-pdf-corrector__tool-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    gap: 6px;
}

.mp-pdf-corrector__tool-section-label {
    color: var(--ink-3, #64748b);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.mp-pdf-corrector__tool-section--input .mp-pdf-corrector__input-mode-label {
    display: none;
}

.mp-pdf-corrector__hint--mobile {
    display: none;
}

.mp-correction-studio__mobile-context {
    display: none;
}

.mp-pdf-corrector__tool-group {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 4px;
}

.mp-pdf-corrector__tool-group--draw {
    background: var(--surface-2, #f8fafc);
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    padding: 2px;
}

.mp-pdf-corrector__active-tool {
    align-items: center;
    background: var(--surface-2, #f1f5f9);
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 1px;
    justify-content: center;
    min-height: 44px;
    min-width: 5.5rem;
    padding: 4px 12px;
}

.mp-pdf-corrector__active-tool-kicker {
    color: var(--ink-3, #64748b);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.mp-pdf-corrector__active-tool-value {
    align-items: center;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 700;
    gap: 6px;
    line-height: 1.2;
}

.mp-pdf-corrector__active-tool[data-tool="pen"] {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.35);
}

.mp-pdf-corrector__active-tool[data-tool="pen"] .mp-pdf-corrector__active-tool-value {
    color: #dc2626;
}

.mp-pdf-corrector__active-tool[data-tool="highlight"] {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.35);
}

.mp-pdf-corrector__active-tool[data-tool="highlight"] .mp-pdf-corrector__active-tool-value {
    color: #b45309;
}

.mp-pdf-corrector__active-tool[data-tool="eraser"] {
    background: rgba(71, 85, 105, 0.1);
    border-color: rgba(71, 85, 105, 0.35);
}

.mp-pdf-corrector__active-tool[data-tool="eraser"] .mp-pdf-corrector__active-tool-value {
    color: #334155;
}

.mp-pdf-corrector__active-tool[data-tool="pan"] {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.35);
}

.mp-pdf-corrector__active-tool[data-tool="pan"] .mp-pdf-corrector__active-tool-value {
    color: #2563eb;
}

.mp-pdf-corrector__toolbar--studio button[data-tool] {
    opacity: 0.78;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.mp-pdf-corrector__toolbar--studio button[data-tool].is-active {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    color: #fff;
    opacity: 1;
}

.mp-pdf-corrector__toolbar--studio button[data-tool="pen"].is-active {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

.mp-pdf-corrector__toolbar--studio button[data-tool="highlight"].is-active {
    background: #d97706;
    border-color: #d97706;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}

.mp-pdf-corrector__toolbar--studio button[data-tool="eraser"].is-active {
    background: #475569;
    border-color: #475569;
    box-shadow: 0 2px 8px rgba(71, 85, 105, 0.35);
}

.mp-pdf-corrector__toolbar--studio button[data-tool="pan"].is-active {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.mp-pdf-corrector__toolbar--studio button[data-tool].is-active i {
    color: #fff;
}

.mp-pdf-corrector__toolbar--studio button[data-tool].is-active span {
    color: #fff;
    font-weight: 700;
}

.mp-pdf-corrector__toolbar--studio .mp-pdf-corrector__pager {
    margin-left: 0;
}

.mp-pdf-color-swatch {
    background: var(--swatch, #dc2626);
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.15);
    cursor: pointer;
    flex-shrink: 0;
    height: 28px;
    padding: 0;
    width: 28px;
}

.mp-pdf-color-swatch.is-active {
    box-shadow: 0 0 0 2px #2563eb;
}

.mp-pdf-size-preset {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    min-width: 36px;
    padding: 0 8px;
}

.mp-pdf-size-preset.is-active {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.35);
    color: #2563eb;
}

.mp-pdf-corrector__input-mode {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 6px;
}

.mp-pdf-corrector__input-mode-label {
    color: var(--ink-3, #64748b);
    font-size: 0.75rem;
}

.mp-pdf-corrector__input-mode-select {
    font-size: 0.8rem;
    max-width: 11rem;
    min-height: 36px;
    padding: 6px 10px;
}

.mp-pdf-corrector__workspace {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

.mp-pdf-corrector__viewport--studio {
    background: #dde4ec;
    border: 0;
    border-radius: 0;
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow: hidden;
    padding: 16px;
    position: relative;
}

@media (min-width: 768px) {
    .mp-pdf-corrector__viewport--studio {
        touch-action: none;
    }
}

.mp-pdf-corrector__viewport--studio .mp-pdf-corrector__page-wrap {
    backface-visibility: hidden;
    transform-origin: 0 0;
    will-change: transform;
}

.mp-pdf-corrector--studio .mp-pdf-corrector__hint {
    background: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
    margin: 0;
    padding: 6px 12px;
    text-align: center;
}

.mp-pdf-corrector__loading {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    flex-direction: column;
    gap: 12px;
    inset: 0;
    justify-content: center;
    position: absolute;
    z-index: 4;
}

.mp-pdf-corrector__loading[hidden] {
    display: none !important;
}

.mp-pdf-corrector__spinner {
    animation: mp-pdf-spin 0.8s linear infinite;
    border: 3px solid rgba(37, 99, 235, 0.2);
    border-radius: 999px;
    border-top-color: #2563eb;
    height: 36px;
    width: 36px;
}

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

.mp-pdf-corrector__status--error {
    color: #dc2626;
}

@media (min-width: 768px) {
    .mp-pdf-corrector__viewport--studio {
        touch-action: none;
    }
}

@media (max-width: 767px) {
    body.mp-correction-studio-open {
        position: fixed;
        width: 100%;
    }

    .mp-correction-studio {
        background: #f2f2f7;
        height: 100dvh;
        max-height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mp-correction-studio__header {
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
        flex-wrap: nowrap;
        gap: 6px;
        min-height: 50px;
        padding: 4px 8px 4px 4px;
        position: sticky;
        top: 0;
        z-index: 6;
    }

    .mp-correction-studio__back {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        padding: 0;
    }

    .mp-correction-studio__back-label {
        display: none;
    }

    .mp-correction-studio__header-center {
        flex: 1 1 auto;
        gap: 8px;
        justify-content: center;
        order: 0;
        width: auto;
    }

    .mp-correction-studio__pages {
        background: var(--mp-brand-50, #eaf3ff);
        border-radius: 999px;
        color: var(--mp-brand-700, #0056b3);
        font-size: 0.8125rem;
        padding: 4px 10px;
    }

    .mp-correction-studio__header-end {
        flex: 0 0 auto;
        gap: 4px;
    }

    .mp-correction-studio__header-end .mp-button {
        min-height: 44px;
        min-width: 44px;
        padding: 0 10px;
    }

    .mp-correction-studio__details-toggle {
        display: none;
    }

    .mp-correction-studio__btn-label {
        display: none;
    }

    .mp-correction-studio__mobile-context {
        background: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px 14px 10px;
    }

    .mp-correction-studio__mobile-student {
        color: var(--mp-ink, #0f172a);
        font-size: 0.9375rem;
        font-weight: 700;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mp-correction-studio__mobile-homework {
        color: var(--mp-ink-3, #64748b);
        font-size: 0.8125rem;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mp-correction-studio__body {
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    .mp-pdf-corrector--studio {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        min-height: min-content;
    }

    .mp-pdf-corrector__toolbar--studio {
        background: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
        flex-direction: column;
        gap: 0;
        overflow: visible;
        padding: 0;
        position: sticky;
        top: 0;
        white-space: normal;
        z-index: 5;
    }

    .mp-pdf-corrector__active-tool {
        align-items: center;
        background: linear-gradient(180deg, var(--mp-brand-50, #eaf3ff) 0%, #fff 100%);
        border: 0;
        border-bottom: 1px solid rgba(0, 123, 255, 0.12);
        border-radius: 0;
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: space-between;
        margin: 0;
        min-height: 44px;
        min-width: 0;
        padding: 8px 14px;
        width: 100%;
    }

    .mp-pdf-corrector__active-tool-kicker {
        color: var(--mp-brand-700, #0056b3);
        font-size: 0.6875rem;
        text-transform: uppercase;
    }

    .mp-pdf-corrector__active-tool-value {
        background: var(--mp-brand, #007bff);
        border-radius: 999px;
        color: #fff;
        font-size: 0.8125rem;
        gap: 6px;
        padding: 6px 12px;
    }

    .mp-pdf-corrector__active-tool[data-tool] {
        background: linear-gradient(180deg, var(--mp-brand-50, #eaf3ff) 0%, #fff 100%);
        border-color: transparent;
    }

    .mp-pdf-corrector__active-tool[data-tool] .mp-pdf-corrector__active-tool-value {
        color: #fff;
    }

    .mp-pdf-corrector__active-tool[data-tool] .mp-pdf-corrector__active-tool-value i {
        color: #fff;
    }

    .mp-pdf-corrector__toolbar-main {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: visible;
        padding: 0;
        width: 100%;
    }

    .mp-pdf-corrector__tool-group--draw {
        background: #e5e5ea;
        border: 0;
        border-radius: 12px;
        display: grid;
        gap: 3px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin: 10px 12px 8px;
        padding: 3px;
    }

    .mp-pdf-corrector__tool-group--draw .mp-pdf-tool {
        border-radius: 10px;
        flex-direction: row;
        justify-content: center;
        margin: 0;
        min-height: 44px;
        min-width: 0;
        width: 100%;
    }

    .mp-pdf-corrector__pager-bar--mobile {
        display: flex;
        justify-content: center;
        padding: 0 12px 6px;
        width: 100%;
    }

    .mp-pdf-corrector__pager--mobile {
        align-items: center;
        background: #e5e5ea;
        border-radius: 12px;
        display: inline-flex;
        gap: 4px;
        margin: 0;
        padding: 3px;
        width: min(100%, 280px);
    }

    .mp-pdf-corrector__pager--mobile .mp-pdf-corrector__page-btn {
        background: #fff;
        border: 0;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
        color: var(--mp-brand, #007bff);
        flex: 0 0 44px;
        min-height: 44px;
        min-width: 44px;
        padding: 0;
    }

    .mp-pdf-corrector__pager--mobile .mp-pdf-corrector__page-label {
        color: var(--mp-ink, #0f172a);
        flex: 1 1 auto;
        font-size: 0.9375rem;
        font-weight: 700;
        min-width: 4.5rem;
        text-align: center;
    }

    .mp-pdf-corrector__tool-section .mp-pdf-corrector__pager {
        display: none;
    }

    .mp-pdf-corrector__toolbar--studio .mp-pdf-tool span {
        display: none;
    }

    .mp-pdf-corrector__toolbar-actions {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding: 0 8px 10px;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    .mp-pdf-corrector__toolbar-actions .mp-pdf-tool,
    .mp-pdf-corrector__toolbar-actions .mp-button {
        flex-shrink: 0;
    }

    .mp-pdf-corrector__toolbar-more {
        background: #f2f2f7;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
        padding: 12px 14px 14px;
    }

    .mp-pdf-corrector__toolbar-more[hidden] {
        display: none !important;
    }

    .mp-pdf-corrector__tool-section {
        background: #fff;
        border-radius: 14px;
        padding: 10px 12px;
    }

    .mp-pdf-corrector__tool-section .mp-pdf-corrector__tool-group,
    .mp-pdf-corrector__tool-section .mp-pdf-corrector__pager {
        flex-wrap: wrap;
    }

    .mp-pdf-corrector__tool-section--input .mp-pdf-corrector__input-mode {
        flex-direction: column;
        width: 100%;
    }

    .mp-pdf-corrector__input-mode-select {
        background: #fff;
        border-radius: 10px;
        flex: 1;
        font-size: 0.9375rem;
        max-width: none;
        min-height: 44px;
        width: 100%;
    }

    .mp-pdf-corrector__workspace {
        flex: 1 0 auto;
        min-height: 42dvh;
    }

    .mp-pdf-corrector__viewport--studio {
        background: #d1d5db;
        min-height: 38dvh;
        padding: 10px;
        touch-action: auto;
    }

    .mp-pdf-corrector__page-wrap {
        touch-action: auto;
    }

    .mp-pdf-corrector__hint--desktop {
        display: none !important;
    }

    .mp-pdf-corrector__hint--mobile {
        background: #fff;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        display: block;
        font-size: 0.75rem;
        line-height: 1.45;
        margin: 0;
        padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        text-align: left;
    }

    .mp-correction-studio__drawer {
        inset: auto 0 0;
        max-width: none;
        width: 100%;
        max-height: 85dvh;
        border-left: 0;
        border-top: 1px solid var(--line, #e2e8f0);
        border-radius: 16px 16px 0 0;
    }
}

@media (max-width: 480px) {
    .mp-correction-studio__details-toggle {
        display: none;
    }

    .mp-pdf-corrector--studio .mp-pdf-corrector__hint {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
}

.mp-pdf-corrector--studio .mp-pdf-corrector__canvas--ink {
    touch-action: none;
}

.mp-pdf-corrector--interaction-guard .mp-pdf-corrector__workspace,
.mp-pdf-corrector--interaction-guard .mp-pdf-corrector__viewport,
.mp-pdf-corrector--interaction-guard .mp-pdf-corrector__page-wrap,
.mp-pdf-corrector--interaction-guard .mp-pdf-corrector__canvas {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-user-modify: read-only;
    -webkit-user-select: none;
    overscroll-behavior: contain;
    user-select: none;
    outline: none;
}

.mp-pdf-corrector--interaction-guard .mp-pdf-corrector__canvas:focus,
.mp-pdf-corrector--interaction-guard .mp-pdf-corrector__canvas:focus-visible,
.mp-pdf-corrector--interaction-guard .mp-pdf-corrector__viewport:focus,
.mp-pdf-corrector--interaction-guard .mp-pdf-corrector__viewport:focus-visible {
    outline: none;
}

@media (min-width: 768px) {
    .mp-pdf-corrector--interaction-guard:not(.mp-pdf-corrector--tool-pan) .mp-pdf-corrector__viewport,
    .mp-pdf-corrector--interaction-guard:not(.mp-pdf-corrector--tool-pan) .mp-pdf-corrector__canvas--ink {
        touch-action: none;
    }

    .mp-pdf-corrector--interaction-guard.mp-pdf-corrector--tool-pan .mp-pdf-corrector__viewport {
        touch-action: none;
    }

    .mp-correction-studio .mp-pdf-corrector--interaction-guard .mp-pdf-corrector__viewport--studio {
        touch-action: none;
    }
}

@media (max-width: 767px) {
    .mp-pdf-corrector--interaction-guard .mp-pdf-corrector__viewport,
    .mp-pdf-corrector--interaction-guard .mp-pdf-corrector__page-wrap,
    .mp-pdf-corrector--interaction-guard .mp-pdf-corrector__canvas--base {
        touch-action: auto;
    }

    .mp-pdf-corrector--interaction-guard .mp-pdf-corrector__canvas--ink {
        touch-action: none;
    }
}

.mp-pdf-corrector--interaction-guard .mp-pdf-corrector__toolbar,
.mp-pdf-corrector--interaction-guard .mp-pdf-corrector__toolbar * {
    -webkit-user-select: auto;
    user-select: auto;
    touch-action: auto;
}

.mp-correction-studio > .mp-notice {
    flex-shrink: 0;
    margin: 0;
}

.mp-button--touch {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
}

.mp-pdf-tool {
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    justify-content: center;
    min-width: 56px;
}

.mp-pdf-tool__label {
    font-size: 0.75rem;
}

.mp-pdf-corrector__page-label {
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 3.5rem;
    text-align: center;
}

.mp-dropzone--touch {
    min-height: 120px;
    padding: 20px;
}

@media (max-width: 640px) {
    .mp-grid--correction-fields {
        grid-template-columns: 1fr;
    }

    .mp-correction-step__head {
        flex-direction: row;
    }
}

.mp-session-student-card__value {
    display: block;
}

.mp-session-student-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.mp-session-student-card__feedback {
    border-top: 1px dashed var(--line);
    margin-top: 4px;
    padding-top: 12px;
}

.mp-session-student-card__feedback-toggle {
    cursor: pointer;
    list-style: none;
    margin-bottom: 12px;
}

.mp-session-student-card__feedback[open] .mp-session-student-card__feedback-toggle {
    margin-bottom: 10px;
}

.mp-session-student-card__feedback-readonly {
    border-top: 1px dashed var(--line);
    margin-top: 4px;
    padding-top: 12px;
}

/* Parent & student flows */
.mp-student-dashboard .mp-student-next__actions,
.mp-student-dashboard .mp-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mp-student-quick {
    margin: 20px 0;
}

.mp-student-quick__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    min-height: 88px;
}

.mp-student-section {
    margin-top: 28px;
}

.mp-student-section .mp-dash-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.mp-hw-card--student .mp-hw-card__foot {
    flex-wrap: wrap;
}

.mp-session-row--student .mp-session-row__actions {
    gap: 8px;
}

.mp-session-detail--student .mp-student-session__meet {
    margin-bottom: 16px;
}

.mp-session-detail--student .mp-student-session__homework {
    margin-bottom: 16px;
}

.mp-session-detail--student .mp-student-session__observations {
    margin-bottom: 16px;
}

.mp-session-detail--student .mp-student-session-detail__summary .mp-kv-list__row {
    justify-items: start;
}

.mp-session-detail--student .mp-kv-list__row dt,
.mp-session-detail--student .mp-kv-list__row dd {
    margin: 0;
    text-align: left;
}

.mp-session-detail--student .mp-kv-list__row dt {
    color: var(--ink-2, #64748b);
    font-size: 0.875rem;
}

.mp-session-detail--student .mp-kv-list__row dd {
    font-size: 0.95rem;
    font-weight: 600;
}

.mp-session-detail--student .mp-student-session__observations .mp-empty-state--inline {
    text-align: left;
}

.mp-meet-link {
    align-items: center;
    color: var(--mp-brand);
    display: inline-flex;
    font-weight: 600;
    gap: 8px;
    text-decoration: none;
}

.mp-meet-link:hover {
    text-decoration: underline;
}

.mp-parent-group-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mp-parent-group-details__announcements,
.mp-parent-group-details__meet {
    margin-top: 0;
}

.mp-session-list-section__title--inline {
    font-size: 14px;
    margin: 12px 0 8px;
}

.mp-parent-session-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mp-parent-session-card {
    background: var(--mp-surface, #fff);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-md);
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.mp-parent-session-card:hover {
    border-color: var(--mp-brand);
    box-shadow: 0 4px 14px rgb(15 35 80 / 6%);
    text-decoration: none;
}

.mp-parent-session-card__head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
}

.mp-parent-session-card__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mp-parent-session-card__title {
    color: var(--mp-ink);
    font-family: var(--mp-font-head);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.mp-parent-session-card__time {
    color: var(--mp-ink-3);
    font-size: 13px;
}

.mp-parent-session-card__hint {
    color: var(--mp-brand);
    font-size: 12.5px;
    line-height: 1.4;
}

.mp-parent-session-card__meta {
    color: var(--mp-ink-3);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    gap: 4px;
}

.mp-parent-session-card__stat {
    line-height: 1.4;
}

.mp-parent-session-card__cta {
    align-items: center;
    color: var(--mp-brand);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 6px;
}

.mp-student-hub__head .mp-back-link {
    margin-bottom: 8px;
}

.mp-student-hub__head .mp-group-page__name {
    margin-top: 4px;
}

.mp-student-section--todo {
    margin-top: 4px;
}

.mp-group-page--parent .mp-group-page__titlebar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
}

.mp-group-page--parent .mp-page-head__actions {
    order: -1;
    width: 100%;
}

@media (min-width: 769px) {
    .mp-group-page--parent .mp-group-page__titlebar {
        align-items: center;
        flex-direction: row;
    }

    .mp-group-page--parent .mp-page-head__actions {
        order: 0;
        width: auto;
    }
}

.mp-subscription-activate__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 12px 0;
}

.mp-subscription-activate__amount {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.mp-subscription-activate__form {
    margin-top: 16px;
}

.mp-subscription-child__name {
    margin: 0 0 16px;
}

.mp-subscription-children {
    display: flex;
    flex-direction: column;
    gap: var(--mp-gap-section, 24px);
}

.mp-subscription-child-card {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--mp-gap-stack, 16px);
    padding: 20px;
}

.mp-subscription-child-card__head {
    margin: 0;
}

.mp-subscription-child-card__titles {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}

.mp-subscription-child-card__name {
    font-size: 1.25rem;
    margin: 0;
}

.mp-subscription-child-card__group {
    margin: 0;
}

.mp-subscription-banner__meta--billing {
    margin-top: 16px;
}

/* Card abonament per copil — text lizibil (nu alb pe fundal deschis) */
.mp-subscription-child-card .mp-subscription-banner {
    background: var(--mp-surface, #fff);
    border: 1px solid var(--mp-line, #e2e8f0);
    color: var(--mp-text, #0f172a);
}

.mp-subscription-child-card .mp-subscription-banner--active {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #0f172a;
}

.mp-subscription-child-card .mp-subscription-banner--past_due,
.mp-subscription-child-card .mp-subscription-banner--canceled,
.mp-subscription-child-card .mp-subscription-banner--expired,
.mp-subscription-child-card .mp-subscription-banner--pending {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #0f172a;
}

.mp-subscription-child-card .mp-subscription-banner__meta {
    border-top-color: rgba(15, 23, 42, 0.12);
}

.mp-subscription-child-card .mp-subscription-banner__meta dt {
    color: #64748b;
    opacity: 1;
}

.mp-subscription-child-card .mp-subscription-banner__meta dd {
    color: #0f172a;
}

.mp-subscription-child-card .mp-subscription-banner__amount {
    color: #0f172a;
}

.mp-subscription-child-card .mp-subscription-banner__plan {
    color: #334155;
    opacity: 1;
}

.mp-subscription-child-card .mp-subscription-banner__meta-note {
    grid-column: 1 / -1;
}

.mp-subscription-overview-stats {
    margin-bottom: var(--mp-gap-section);
    grid-template-columns: minmax(0, 14rem);
}

.mp-subscription-banner__portal-note {
    margin: var(--mp-s2) 0 0;
    max-width: 22rem;
}

.mp-student-dashboard--locked .mp-student-access-blocked {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--mp-s2);
    max-width: 36rem;
}

@media (min-width: 900px) {
    .mp-subscription-child-card .mp-cols--pay {
        align-items: start;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }
}

.mp-parent-overview__grid {
    margin: var(--mp-gap-stack) 0;
}

.mp-parent-overview__section {
    margin-top: var(--mp-gap-section);
}

/* Standalone pages — title → content rhythm */
:is(.mp-parent-page, .mp-homework, .mp-feedback, .mp-admin, .mp-profile, .mp-subscription) > .mp-page-head {
    margin-bottom: var(--mp-gap-section);
}

:is(.mp-parent-page, .mp-homework, .mp-feedback, .mp-admin, .mp-profile) > .mp-page-head + :is(.mp-grid, .mp-stack, .mp-dash-card, .mp-card, .mp-empty-state, .mp-cols) {
    margin-top: 0;
}

.mp-dash-card__head + .mp-dash-card__body,
.mp-dash-card__head + .mp-stack,
.mp-dash-card__head + .mp-grid {
    padding-top: var(--mp-s2);
}

.mp-child-hub {
    display: flex;
    flex-direction: column;
    gap: var(--mp-gap-section);
}

.mp-child-hub__header {
    margin-bottom: 0;
}

.mp-child-hub__meta {
    margin-top: 0;
}

.mp-child-hub__section {
    margin: 0;
}

.mp-child-hub__meet {
    margin: 12px 0;
}

.mp-child-hub__feedback-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mp-attendance-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mp-attendance-list__item {
    align-items: center;
    background: var(--mp-surface-2, #f7f9fc);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-md);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px;
}

.mp-session-row__actions--stack {
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
}

.mp-status-card--info {
    border-left: 3px solid var(--mp-brand);
}

@media (max-width: 768px) {
    .mp-session-row--parent .mp-session-row__actions--stack {
        align-items: flex-start;
        width: 100%;
    }

    .mp-child-hub__header .mp-banner__meta {
        grid-template-columns: 1fr;
    }

    .mp-child-hub .mp-button {
        justify-content: center;
        width: 100%;
    }

    .mp-group-page--student-hub .mp-child-hub__meta {
        grid-template-columns: 1fr;
    }

    .mp-student-hub__head .mp-page-head__main {
        width: 100%;
    }

    .mp-student-dashboard .mp-hw-grid {
        grid-template-columns: 1fr;
    }

    .mp-group-page--student-hub .mp-parent-session-card__meta {
        font-size: 12.5px;
    }
}

.mp-hw-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.mp-hw-card--compact {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

@media (max-width: 768px) {
    .mp-student-dashboard .mp-banner__actions .mp-button,
    .mp-student-dashboard .mp-student-next__actions .mp-button {
        width: 100%;
        justify-content: center;
    }

    .mp-student-quick {
        grid-template-columns: 1fr;
    }

    .mp-subscription-activate__form .mp-button--lg {
        width: 100%;
    }

    .mp-parent-overview__grid {
        grid-template-columns: 1fr;
    }

    .mp-hw-grid,
    .mp-hw-grid--compact {
        grid-template-columns: 1fr;
    }
}

/* Auth — login & resetare parolă */
body.mp-auth-page {
    background: var(--mp-bg);
}

body.mp-auth-page #wpadminbar {
    display: none !important;
}

body.mp-auth-page.admin-bar {
    margin-top: 0 !important;
}

body.mp-auth-page .site-header,
body.mp-auth-page header.header,
body.mp-auth-page .elementor-location-header,
body.mp-auth-page .site-footer,
body.mp-auth-page footer.footer,
body.mp-auth-page .elementor-location-footer {
    display: none !important;
}

body.mp-auth-page .site-content,
body.mp-auth-page #content,
body.mp-auth-page main,
body.mp-auth-page .site-main,
body.mp-auth-page #page,
body.mp-auth-page .site,
body.mp-auth-page .elementor-section,
body.mp-auth-page .elementor-container,
body.mp-auth-page .elementor-column,
body.mp-auth-page .elementor-widget-wrap,
body.mp-auth-page .elementor-widget-shortcode,
body.mp-auth-page .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100%;
}

body.mp-auth-page .entry-content > .mp-auth {
    width: 100%;
}

.mp-auth__card--register {
    max-width: 560px;
}

.mp-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--mp-bg);
    box-sizing: border-box;
}

.mp-auth__card {
    width: 100%;
    max-width: 460px;
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-r-xl);
    padding: 32px 28px 28px;
    box-shadow: 0 12px 40px rgba(0, 41, 104, 0.06);
    box-sizing: border-box;
}

.mp-auth__logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.mp-auth__logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}

.mp-auth__logo--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mp-brand), var(--mp-brand-700));
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
}

.mp-auth__title {
    margin: 0 0 6px;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--mp-ink);
    text-align: center;
    line-height: 1.25;
}

.mp-auth__subtitle {
    margin: 0 0 22px;
    color: var(--mp-ink-2);
    text-align: center;
    font-size: 0.95rem;
    line-height: var(--mp-line-height-body);
}

.mp-auth__notice {
    margin-bottom: 16px;
}

.mp-auth__notice--password {
    border-left: 4px solid #dc2626;
}

.mp-auth__field {
    margin-bottom: 14px;
}

.mp-auth__input-wrap {
    position: relative;
}

.mp-auth__input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mp-ink-3);
    pointer-events: none;
    font-size: 0.95rem;
}

.mp-auth__input {
    width: 100%;
    min-height: 48px;
    padding-left: 42px !important;
    box-sizing: border-box;
}

.mp-auth__input-wrap--password .mp-auth__input {
    padding-right: 46px !important;
}

.mp-auth__toggle-pw {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--mp-ink-3);
    border-radius: var(--mp-r-sm);
    cursor: pointer;
}

.mp-auth__toggle-pw:hover {
    color: var(--mp-brand);
    background: var(--mp-brand-50);
}

.mp-auth__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 18px;
    font-size: 0.875rem;
}

.mp-auth__remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mp-ink-2);
    cursor: pointer;
}

.mp-auth__remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--mp-brand);
}

.mp-auth__link {
    color: var(--mp-brand);
    font-weight: 600;
    text-decoration: none;
}

.mp-auth__link:hover {
    color: var(--mp-brand-700);
    text-decoration: underline;
}

.mp-auth__submit {
    width: 100%;
    justify-content: center;
    min-height: 50px;
}

.mp-auth__submit.is-loading {
    opacity: 0.85;
    cursor: wait;
}

.mp-auth__trust {
    margin-top: 20px;
    font-size: 0.85rem;
}

.mp-auth__back {
    margin-top: 18px;
    text-align: center;
}

@media (max-width: 480px) {
    .mp-auth {
        padding: 16px 12px;
        align-items: flex-start;
        padding-top: 32px;
    }

    .mp-auth__card {
        padding: 24px 18px 20px;
        border-radius: var(--mp-r-lg);
    }

    .mp-auth__logo {
        width: 60px;
        height: 60px;
    }

    .mp-auth__title {
        font-size: 1.35rem;
    }

    .mp-auth__options {
        flex-direction: column;
        align-items: flex-start;
    }
}

.mp-auth__register-link {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 0.95rem;
    color: var(--mp-text-muted, #64748b);
}

body.mp-auth-page .mp-register {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

body.mp-auth-page .mp-register--form-only {
    display: block;
    grid-template-columns: none;
    max-width: 560px;
}

.mp-register__form-wrap {
    background: #fff;
    padding: 2rem 2.25rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    width: 100%;
}

.mp-register__card {
    width: 100%;
    max-width: 520px;
}

.mp-register__title {
    margin: 0.75rem 0 0.35rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
}

.mp-register__subtitle {
    margin: 0 0 1.5rem;
    color: #64748b;
    font-size: 0.98rem;
}

.mp-register__section {
    margin-bottom: 1.5rem;
}

.mp-register__section-title {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    text-align: center;
    position: relative;
}

.mp-register__section-title::before,
.mp-register__section-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 5.5rem);
    height: 1px;
    background: #e2e8f0;
}

.mp-register__section-title::before {
    left: 0;
}

.mp-register__section-title::after {
    right: 0;
}

.mp-register-child-choice {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mp-register-choice {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #334155;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.mp-register-choice:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
}

.mp-register-choice input {
    margin: 0;
}

.mp-register-child-fields {
    margin-top: 1rem;
    padding-top: 0.25rem;
}

.mp-register-children-list {
    display: grid;
    gap: 1rem;
}

.mp-register-child-block {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1rem 1rem 0.25rem;
}

.mp-register-child-block__head {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.mp-register-child-block__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.mp-register-add-child {
    margin-top: 1rem;
    width: 100%;
}

.mp-register__legal {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.mp-register__check {
    align-items: flex-start;
    line-height: 1.45;
}

.mp-register__submit {
    width: 100%;
}

.mp-register__login-link {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 0.95rem;
    color: #64748b;
}

.mp-register__logo-wrap {
    margin-bottom: 0.5rem;
}

.mp-register__logo {
    max-height: 42px;
    width: auto;
}

.mp-register__logo--lg {
    max-height: 56px;
}

.mp-register__logo--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
}

@media (max-width: 960px) {
    .mp-auth__card--register {
        max-width: 100%;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    body.mp-auth-page .mp-register {
        border-radius: 0;
        box-shadow: none;
        max-width: 100%;
    }

    .mp-register__form-wrap {
        padding: 1.5rem 1.25rem 2rem;
    }

    .mp-register__title {
        font-size: 1.45rem;
    }

    .mp-register__section-title::before,
    .mp-register__section-title::after {
        width: calc(50% - 4.5rem);
    }
}

@media (max-width: 640px) {
    body.mp-auth-page .site-content,
    body.mp-auth-page #content,
    body.mp-auth-page main,
    body.mp-auth-page .entry-content {
        padding-left: 0;
        padding-right: 0;
    }

    .mp-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Homework submit: upload + camera scan */
.mp-hw-submit {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mp-hw-submit__tabs {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.mp-hw-submit__tab {
    align-items: center;
    background: var(--mp-surface-2, #f7f9fc);
    border: 2px solid var(--mp-line-strong, #d8dee9);
    border-radius: var(--mp-r-lg);
    color: var(--mp-ink-2);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    min-height: 52px;
    padding: 12px 16px;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.mp-hw-submit__tab.is-active {
    background: #eef4ff;
    border-color: var(--mp-accent, #2563eb);
    color: var(--mp-accent, #2563eb);
}

.mp-hw-submit__panel[hidden] {
    display: none !important;
}

.mp-hw-scanner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mp-hw-scanner__intro {
    color: var(--mp-ink-2);
    line-height: var(--mp-line-height-body);
    margin: 0;
}

.mp-hw-scanner__unavailable {
    background: #fff8e6;
    border: 1px solid #f5d07a;
    border-radius: var(--mp-r-md);
    color: #7a5b00;
    line-height: var(--mp-line-height-body);
    padding: 14px 16px;
}

.mp-hw-scanner__capture-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mp-hw-scanner__capture {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    margin: 0;
    text-align: center;
    width: 100%;
}

.mp-hw-scanner__capture.is-disabled,
.mp-hw-scanner__capture[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

.mp-hw-scanner__page-count {
    color: var(--mp-ink-2);
    font-weight: 600;
    margin: 0;
}

.mp-hw-scanner__page-count[hidden] {
    display: none !important;
}

.mp-hw-scanner__tools {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

.mp-hw-scanner__reorder {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-hw-scanner__page-view-wrap {
    background: var(--mp-surface-2, #f7f9fc);
    border: 1px solid var(--mp-line-strong, #d8dee9);
    border-radius: var(--mp-r-lg);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.mp-hw-scanner__page-view-wrap[hidden] {
    display: none !important;
}

.mp-hw-scanner__preview-title {
    font-size: 16px;
    margin: 0 0 10px;
}

.mp-hw-scanner__pages {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.mp-hw-scanner__page {
    background: var(--mp-surface-2, #f7f9fc);
    border: 2px solid transparent;
    border-radius: var(--mp-r-md);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    transition: border-color 0.12s ease;
}

.mp-hw-scanner__page.is-selected {
    border-color: var(--mp-accent, #2563eb);
}

.mp-hw-scanner__thumb {
    aspect-ratio: 3 / 4;
    background: #fff;
    border-radius: 6px;
    display: block;
    object-fit: cover;
    width: 100%;
}

.mp-hw-scanner__page-label {
    color: var(--mp-ink-3);
    font-size: 12px;
    text-align: center;
}

.mp-hw-scanner__status {
    margin: 0;
    min-height: 1.25em;
}

.mp-hw-scanner__status.is-error {
    color: #b91c1c;
}

.mp-hw-scanner__actions .mp-button {
    width: 100%;
}

@media (min-width: 640px) {
    .mp-hw-scanner__tools {
        grid-template-columns: repeat(3, 1fr);
    }

    .mp-hw-scanner__actions .mp-button,
    .mp-hw-scanner__capture {
        width: auto;
    }
}

.mp-hw-scanner__editor-title {
    font-size: 16px;
    margin: 0;
}

.mp-hw-scanner__tools[hidden],
.mp-hw-scanner__reorder[hidden] {
    display: none !important;
}

.mp-hw-scanner__page-view {
    background: #fff;
    border: 1px solid var(--mp-line-strong, #d8dee9);
    border-radius: var(--mp-r-md);
    display: block;
    margin: 0 auto;
    max-height: min(55vh, 480px);
    object-fit: contain;
    width: 100%;
}

/* Crop editor: autocrop + perspective correction */
.mp-hw-scanner__crop {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mp-hw-scanner__crop[hidden] {
    display: none !important;
}

.mp-hw-scanner__crop-title {
    font-size: 18px;
    margin: 0;
}

.mp-hw-scanner__crop-hint {
    color: var(--mp-ink-2);
    line-height: var(--mp-line-height-body);
    margin: 0;
}

.mp-hw-scanner__view[hidden] {
    display: none !important;
}

.mp-hw-scanner__pages-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mp-hw-scanner__pages-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mp-hw-scanner__pages-toolbar {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

.mp-hw-scanner__pages-submit {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 640px) {
    .mp-hw-scanner__pages-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mp-hw-scanner__crop-banner {
    border-radius: var(--mp-r-md);
    line-height: var(--mp-line-height-body);
    padding: 12px 14px;
}

.mp-hw-scanner__crop-banner--detecting {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    display: flex;
    font-weight: 600;
    gap: 10px;
}

.mp-hw-scanner__crop-banner--detecting[hidden],
.mp-hw-scanner__crop-banner--fail[hidden] {
    display: none !important;
}

.mp-hw-scanner__crop-banner--fail {
    background: #fff8e6;
    border: 1px solid #f5d07a;
    color: #7a5b00;
}

.mp-hw-scanner__crop-view {
    max-height: none;
    overflow: visible;
}

.mp-hw-scanner__view[data-mp-scanner-view='crop'] {
    overflow: visible;
    padding-bottom: 8px;
}

.mp-hw-scanner__crop-spinner {
    animation: mp-hw-spin 0.8s linear infinite;
    border: 3px solid #dbeafe;
    border-radius: 50%;
    border-top-color: var(--mp-accent, #2563eb);
    display: inline-block;
    height: 22px;
    width: 22px;
}

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

.mp-hw-scanner__crop-fail {
    background: #fff8e6;
    border: 1px solid #f5d07a;
    border-radius: var(--mp-r-md);
    color: #7a5b00;
    line-height: var(--mp-line-height-body);
    padding: 12px 14px;
}

.mp-hw-scanner__crop-fail[hidden] {
    display: none !important;
}

/* legacy alias – kept for cached HTML */
.mp-hw-scanner__crop-loading[hidden] {
    display: none !important;
}

.mp-hw-scanner__crop-stage {
    background: #0f172a;
    border-radius: var(--mp-r-lg);
    margin: 0 auto;
    max-width: 100%;
    overflow: visible;
    padding: 28px 16px 40px;
    width: 100%;
}

.mp-hw-scanner__crop-stage[hidden] {
    display: none !important;
}

.mp-hw-scanner__crop-frame {
    margin: 0 auto;
    max-width: 100%;
    overflow: visible;
    position: relative;
    touch-action: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    width: fit-content;
}

.mp-hw-scanner__crop-image {
    display: block;
    max-height: min(58vh, 520px);
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
    vertical-align: top;
    width: auto;
}

.mp-hw-scanner__crop-overlay {
    height: 100%;
    inset: 0;
    pointer-events: none;
    position: absolute;
    touch-action: none;
    user-select: none;
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

.mp-hw-scanner__crop-polygon {
    fill: rgba(37, 99, 235, 0.14);
    pointer-events: none;
    stroke: var(--mp-accent, #2563eb);
    stroke-width: 0.55;
    vector-effect: non-scaling-stroke;
}

.mp-hw-scanner__crop-handle {
    cursor: grab;
    pointer-events: all;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.mp-hw-scanner__crop-handle-hit {
    fill: rgba(255, 255, 255, 0.01);
    stroke: transparent;
}

.mp-hw-scanner__crop-handle-dot {
    fill: #fff;
    pointer-events: none;
    stroke: var(--mp-accent, #2563eb);
    stroke-width: 0.55;
    vector-effect: non-scaling-stroke;
}

.mp-hw-scanner__crop-handle.is-active .mp-hw-scanner__crop-handle-dot {
    fill: #fff;
    stroke: #db2777;
    stroke-width: 0.75;
}

.mp-hw-scanner__crop-frame.is-dragging,
.mp-hw-scanner__crop-frame.is-dragging * {
    transition: none !important;
}

.mp-hw-scanner__crop-frame.is-dragging {
    touch-action: none;
}

.mp-hw-scanner__crop-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.mp-hw-scanner__crop-full-btn {
    font-weight: 600;
}

@media (min-width: 640px) {
    .mp-hw-scanner__crop-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mp-student-group-simple__schedule {
    color: var(--ink-2, #475569);
    display: grid;
    gap: 4px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.mp-student-group-simple__next {
    margin-top: 16px;
}

.mp-student-group-simple__meet {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.mp-schedule-slot {
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 12px;
    display: grid;
    gap: 12px;
    margin: 12px 0;
    padding: 16px;
}

.mp-schedule-slot legend {
    font-weight: 700;
    padding: 0 6px;
}

.mp-feedback-session-link {
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.mp-feedback-session-link:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

/* PDF corrector studio — responsive layout (v1.0.93) */

.mp-pdf-corrector__stage {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.mp-pdf-corrector__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.mp-pdf-corrector--studio [data-pdf-status] {
    display: none !important;
}

.mp-pdf-corrector__toolbar-primary {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 52px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 6px 10px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.mp-pdf-corrector__toolbar--studio .mp-pdf-tool {
    flex-direction: row;
    gap: 0;
    min-width: 0;
}

.mp-pdf-corrector__toolbar--studio .mp-button--touch.mp-pdf-tool,
.mp-pdf-corrector__toolbar--studio .mp-button--touch.mp-pdf-corrector__page-btn {
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
    padding: 8px 10px;
}

.mp-pdf-corrector__toolbar--studio .mp-pdf-tool i {
    font-size: 1.125rem;
    line-height: 1;
}

.mp-pdf-corrector__toolbar-primary .mp-pdf-tool,
.mp-pdf-corrector__toolbar-primary .mp-pdf-corrector__page-btn {
    flex-shrink: 0;
}

.mp-pdf-corrector__active-tool--desktop {
    display: none;
}

.mp-pdf-corrector__chip {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    min-width: 40px;
    padding: 0 10px;
}

.mp-pdf-corrector__chip-dot {
    background: var(--chip-color, #dc2626);
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
    display: block;
    height: 22px;
    width: 22px;
}

.mp-pdf-corrector__chip--size,
.mp-pdf-corrector__chip--input {
    font-size: 0.8125rem;
    font-weight: 700;
}

.mp-pdf-corrector__chip--input span {
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-pdf-corrector__pager--inline {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
}

.mp-pdf-corrector__pager--inline .mp-pdf-corrector__page-label {
    font-size: 0.8125rem;
    font-weight: 700;
    min-width: 2.75rem;
    text-align: center;
}

.mp-pdf-corrector__sheet-backdrop {
    background: rgba(15, 23, 42, 0.38);
    inset: 0;
    position: fixed;
    z-index: 10050;
}

.mp-pdf-corrector__sheet-backdrop[hidden] {
    display: none !important;
}

.mp-pdf-corrector__toolbar-secondary {
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px 16px 0 0;
    bottom: 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    left: 0;
    max-height: min(58dvh, 520px);
    position: fixed;
    right: 0;
    z-index: 10055;
}

.mp-pdf-corrector__toolbar-secondary[hidden] {
    display: none !important;
}

.mp-pdf-corrector__sheet-head {
    align-items: center;
    border-bottom: 1px solid var(--line, #e2e8f0);
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    padding: 12px 16px;
}

.mp-pdf-corrector__sheet-head strong {
    font-size: 1rem;
}

.mp-pdf-corrector__sheet-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}

.mp-pdf-corrector__help-text {
    color: var(--ink-3, #64748b);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.mp-correction-studio__compact-context {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: none;
    padding: 6px 14px 8px;
}

.mp-correction-studio__compact-line {
    color: var(--mp-ink, #0f172a);
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-pdf-corrector__tool-section[data-mp-sheet-section="zoom"],
.mp-pdf-corrector__pager--sheet {
    display: none;
}

@media (min-width: 1025px) {
    .mp-pdf-corrector__stage {
        flex-direction: column;
    }

    .mp-pdf-corrector__toolbar--studio {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .mp-pdf-corrector__toolbar-secondary {
        border-radius: 0;
        border-top: 1px solid var(--line, #e2e8f0);
        bottom: auto;
        box-shadow: none;
        flex-direction: row;
        flex-wrap: wrap;
        left: auto;
        max-height: none;
        position: static;
        right: auto;
    }

    .mp-pdf-corrector__toolbar-secondary .mp-pdf-corrector__sheet-head {
        display: none;
    }

    .mp-pdf-corrector__toolbar-secondary .mp-pdf-corrector__sheet-body {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
        padding: 6px 10px 8px;
    }

    .mp-pdf-corrector__toolbar-secondary .mp-pdf-corrector__tool-section {
        flex: 0 1 auto;
    }

    .mp-pdf-corrector__toolbar-secondary .mp-pdf-corrector__tool-section--help {
        display: none !important;
    }

    .mp-pdf-corrector__active-tool--desktop {
        display: inline-flex;
    }

    .mp-pdf-corrector__toolbar--studio .mp-pdf-tool span {
        display: inline;
    }
}

@media (max-width: 1024px) {
    .mp-correction-studio__header-start .mp-correction-studio__meta {
        display: none;
    }

    .mp-correction-studio__compact-context {
        display: block;
    }

    .mp-pdf-corrector__toolbar--studio .mp-pdf-tool span {
        display: none;
    }

    .mp-pdf-corrector__tool-group--draw {
        background: #e5e5ea;
        border: 0;
        border-radius: 12px;
        display: inline-flex;
        flex-shrink: 0;
        gap: 3px;
        padding: 3px;
    }

    .mp-pdf-corrector__tool-group--draw .mp-pdf-tool {
        border-radius: 10px;
        margin: 0;
        min-height: 40px;
        min-width: 40px;
        padding: 8px;
        width: 40px;
    }

    .mp-pdf-corrector__tool-group--history,
    .mp-pdf-corrector__tool-group--zoom {
        display: inline-flex;
        flex-shrink: 0;
        gap: 2px;
    }

    .mp-pdf-tool--zoom-extra {
        display: none;
    }

    .mp-pdf-tool--zoom-label {
        min-width: 3.25rem;
        padding: 0 6px;
    }

    .mp-pdf-tool--zoom-label span {
        display: inline !important;
        font-size: 0.75rem;
        font-weight: 700;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .mp-correction-studio {
        height: 100dvh;
        max-height: 100dvh;
    }

    .mp-correction-studio__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .mp-pdf-corrector__stage {
        flex-direction: row;
        flex: 1 1 auto;
        min-height: 0;
    }

    .mp-pdf-corrector__toolbar--studio {
        align-items: center;
        border-bottom: 0;
        border-right: 1px solid rgba(0, 0, 0, 0.08);
        flex-direction: column;
        flex-shrink: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 8px 4px;
        width: 60px;
    }

    .mp-pdf-corrector__toolbar-primary {
        align-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 6px;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0;
        width: 100%;
    }

    .mp-pdf-corrector__tool-group--draw {
        flex-direction: column;
        width: 100%;
    }

    .mp-pdf-corrector__tool-group--draw .mp-pdf-tool {
        width: 100%;
    }

    .mp-pdf-corrector__tool-group--chips,
    .mp-pdf-corrector__tool-group--history,
    .mp-pdf-corrector__tool-group--zoom {
        flex-direction: column;
        width: 100%;
    }

    .mp-pdf-corrector__chip {
        min-width: 0;
        padding: 0;
        width: 44px;
    }

    .mp-pdf-corrector__chip--input span {
        display: none;
    }

    .mp-pdf-corrector__pager--inline {
        flex-direction: column;
        gap: 4px;
    }

    .mp-pdf-corrector__main {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mp-pdf-corrector__viewport--studio {
        flex: 1 1 auto;
        min-height: 0;
        padding: 10px 14px;
    }

    .mp-pdf-corrector__toolbar-secondary {
        left: auto;
        max-height: min(70dvh, 560px);
        max-width: min(360px, 92vw);
        right: 12px;
        top: auto;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .mp-correction-studio {
        height: 100dvh;
        max-height: 100dvh;
    }

    .mp-correction-studio__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .mp-pdf-corrector__stage {
        flex: 1 1 auto;
        min-height: 0;
    }

    .mp-pdf-corrector__toolbar--studio {
        flex-shrink: 0;
        padding: 0;
    }

    .mp-pdf-corrector__toolbar-primary {
        min-height: 60px;
        padding: 6px 10px;
    }

    .mp-pdf-corrector__main {
        flex: 1 1 auto;
        min-height: 0;
    }

    .mp-pdf-corrector__viewport--studio {
        flex: 1 1 auto;
        min-height: 0;
        padding: 10px 12px;
    }
}

@media (max-width: 767px) {
    .mp-correction-studio__compact-context {
        padding: 6px 12px 8px;
    }

    .mp-pdf-corrector__stage {
        flex: 1 0 auto;
        min-height: min-content;
    }

    .mp-pdf-corrector__toolbar--studio {
        background: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
        flex-shrink: 0;
        padding: 0;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .mp-pdf-corrector__toolbar-primary {
        min-height: 56px;
        padding: 4px 8px;
    }

    .mp-pdf-corrector__pager--inline {
        display: none;
    }

    .mp-pdf-corrector__tool-group--zoom {
        display: none;
    }

    .mp-pdf-corrector__tool-section[data-mp-sheet-section="zoom"] {
        display: block;
    }

    .mp-pdf-corrector__pager--sheet {
        display: inline-flex;
    }

    .mp-pdf-corrector__workspace {
        flex: 1 0 auto;
        min-height: 42dvh;
    }

    .mp-pdf-corrector__viewport--studio {
        min-height: 38dvh;
        padding: 10px;
        touch-action: auto;
    }

    .mp-pdf-corrector__toolbar-secondary {
        max-height: min(60dvh, 480px);
    }
}

/* Options panel — sheet vs popover (v1.0.94) */

.mp-pdf-corrector__chip.is-active {
    border-color: var(--mp-brand, #007bff);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.22);
}

.mp-pdf-corrector--panel-popover > .mp-pdf-corrector__sheet-backdrop {
    background: rgba(15, 23, 42, 0.18);
}

.mp-pdf-corrector--panel-popover > .mp-pdf-corrector__toolbar-secondary {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    bottom: auto;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.2);
    left: var(--mp-popover-x, 12px);
    max-height: min(420px, 58dvh);
    right: auto;
    top: var(--mp-popover-y, 72px);
    width: var(--mp-popover-width, min(320px, 92vw));
}

.mp-pdf-corrector--panel-popover > .mp-pdf-corrector__toolbar-secondary .mp-pdf-corrector__sheet-head {
    display: none;
}

.mp-pdf-corrector--panel-popover > .mp-pdf-corrector__toolbar-secondary .mp-pdf-corrector__sheet-body {
    gap: 10px;
    padding: 14px 16px;
}

.mp-pdf-corrector--panel-popover > .mp-pdf-corrector__toolbar-secondary .mp-pdf-corrector__tool-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.mp-pdf-corrector--panel-sheet > .mp-pdf-corrector__toolbar-secondary .mp-pdf-corrector__tool-section.is-panel-active {
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .mp-pdf-corrector--layout-tablet.mp-pdf-corrector--panel-sheet > .mp-pdf-corrector__toolbar-secondary {
        border-radius: 16px 16px 0 0;
        left: 0;
        max-width: none;
        right: 0;
    }

    .mp-pdf-corrector--layout-tablet-landscape.mp-pdf-corrector--panel-sheet > .mp-pdf-corrector__toolbar-secondary {
        border-radius: 14px;
        bottom: 12px;
        left: auto;
        max-height: min(65dvh, 520px);
        max-width: min(380px, 92vw);
        right: 12px;
    }
}

@media (max-width: 767px) {
    .mp-pdf-corrector__toolbar--studio {
        flex-direction: column;
    }

    .mp-pdf-corrector__toolbar-primary {
        flex-wrap: nowrap;
    }
}

/* Header pager + compact controls (v1.0.95-m2) */

.mp-correction-studio__pager--header {
    align-items: center;
    background: #eef2f7;
    border-radius: 9px;
    display: inline-flex;
    flex-shrink: 0;
    gap: 0;
    padding: 2px;
}

.mp-correction-studio__page-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--mp-brand, #007bff);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.75rem;
    height: 32px;
    justify-content: center;
    min-width: 32px;
    padding: 0;
    width: 32px;
}

.mp-correction-studio__page-btn:disabled {
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.4;
}

.mp-correction-studio__page-btn:not(:disabled):active {
    background: rgba(0, 123, 255, 0.1);
}

.mp-correction-studio__page-label {
    color: var(--mp-ink, #0f172a);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    min-width: 2.5rem;
    padding: 0 2px;
    text-align: center;
    white-space: nowrap;
}

.mp-pdf-corrector__chip-icon {
    font-size: 0.875rem;
    pointer-events: none;
}

.mp-pdf-corrector__toolbar--studio .mp-pdf-tool i {
    font-size: 1.125rem;
}

@media (min-width: 768px) {
    .mp-pdf-corrector__chip--input .mp-pdf-corrector__chip-icon {
        display: none;
    }
}

@media (max-width: 767px) {
    .mp-correction-studio__compact-context {
        display: none !important;
    }

    .mp-correction-studio__header {
        min-height: 46px;
        padding: 4px 6px;
    }

    .mp-correction-studio__header-center {
        flex: 1 1 auto;
        gap: 4px;
        justify-content: center;
        min-width: 0;
    }

    .mp-correction-studio__header-center .mp-badge {
        display: none;
    }

    .mp-correction-studio__header-end .mp-button {
        min-height: 40px;
        min-width: 40px;
        padding: 8px 10px;
    }

    .mp-pdf-corrector__toolbar-primary {
        gap: 6px;
        min-height: 52px;
        padding: 6px 8px;
    }

    .mp-pdf-corrector__tool-group--draw {
        display: inline-flex;
        flex: 0 0 auto;
        gap: 4px;
        padding: 4px;
        width: auto;
    }

    .mp-pdf-corrector__tool-group--draw .mp-pdf-tool {
        min-height: 44px;
        min-width: 44px;
        width: 44px;
    }

    .mp-pdf-corrector__chip {
        height: 40px;
        min-width: 40px;
        padding: 0 8px;
    }

    .mp-pdf-corrector__chip--input span {
        display: none;
    }

    .mp-pdf-corrector__chip--input .mp-pdf-corrector__chip-icon {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .mp-pdf-corrector__toolbar--studio .mp-button--touch.mp-pdf-tool,
    .mp-pdf-corrector__toolbar--studio .mp-button--touch.mp-pdf-corrector__page-btn,
    .mp-pdf-corrector__chip {
        min-height: 44px;
        min-width: 44px;
    }

    .mp-pdf-corrector__tool-group--draw .mp-pdf-tool {
        min-width: 44px;
        width: 44px;
    }

    .mp-pdf-corrector__toolbar-primary {
        min-height: 56px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .mp-pdf-corrector__toolbar--studio {
        padding: 8px 4px;
    }

    .mp-pdf-corrector__tool-group--draw .mp-pdf-tool,
    .mp-pdf-corrector__chip {
        height: 40px;
        min-width: 40px;
        width: 40px;
    }

    .mp-pdf-corrector__toolbar-primary {
        gap: 6px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .mp-pdf-corrector__toolbar-primary {
        min-height: 52px;
        padding: 6px 10px;
    }
}