:root {
        --bg-main: #ffffff;
        --bg-soft: #f8fafc;
        --card-bg: #ffffff;
        --card-border: rgba(16, 24, 40, 0.08);
        --text-main: #101828;
        --text-muted: #6a7282;
        --nav-bg: #1d293d;
        --chip-border: #e2e8f0;
        --chip-text: #45556c;
        --page-gutter: 24px;
        --app-max-width: 399px;
        --card-radius-xl: 32px;
        --accent-pink: #101828;
        --accent-cyan: #101828;
        --accent-yellow: #101828;
        --danger: #c93e57;
        --radius-lg: 16px;
        --radius-md: 12px;
        --font-body: "Arimo", sans-serif;
        --font-display: "Arimo", sans-serif;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        min-height: 100vh;
        padding: 0;
        color: var(--text-main);
        font-family: var(--font-body);
        background: var(--bg-main);
      }
      body.overlay-lock {
        overflow: hidden;
        touch-action: none;
      }
      .app-shell {
        width: 100%;
        max-width: 399px;
        margin: 0 auto;
        padding: 0 0 86px;
      }
      .card {
        margin-bottom: 12px;
        padding: 16px;
        border: 1px solid var(--card-border);
        border-radius: var(--radius-lg);
        background: var(--card-bg);
        box-shadow: none;
        animation: cardIn 170ms ease;
      }
      .card > b:first-child {
        display: block;
        margin-bottom: 10px;
        font-size: 26px;
        line-height: 1;
        letter-spacing: 0.01em;
        font-family: var(--font-display);
        font-weight: 400;
      }
      .hidden { display: none; }
      .muted { color: var(--text-muted); }
      .error { color: var(--danger); }
      .loading-center {
        min-height: 42vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      .loading-spinner {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 3px solid rgba(16, 24, 40, 0.14);
        border-top-color: #1d293d;
        animation: spin 700ms linear infinite;
      }
      .loading-label {
        font-size: 13px;
        color: var(--text-muted);
      }
      button, input, select, textarea {
        width: 100%;
        margin-bottom: 8px;
        padding: 12px 13px;
        border-radius: var(--radius-md);
        font-family: var(--font-body);
        font-size: 15px;
      }
      button {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(65, 31, 42, 0.12);
        color: #fff;
        background: #e86593;
        cursor: pointer;
        font-weight: 700;
        text-align: left;
        box-shadow: 0 2px 7px rgba(232, 101, 147, 0.2);
        transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
      }
      button:hover { transform: translateY(-1px); filter: brightness(1.02); }
      button:active { transform: translateY(0); }
      button.secondary {
        color: #2d251e;
        border-color: rgba(45, 31, 20, 0.16);
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 1px 5px rgba(76, 53, 32, 0.08);
      }
      input, select, textarea {
        border: 1px solid rgba(50, 35, 22, 0.2);
        color: var(--text-main);
        background: rgba(255, 255, 255, 0.82);
        outline: none;
      }
      input:focus, select:focus, textarea:focus {
        border-color: rgba(0, 168, 199, 0.72);
        box-shadow: 0 0 0 3px rgba(0, 168, 199, 0.18);
      }
      .teacher-btn { display: flex; align-items: center; gap: 12px; text-align: left; }
      .teacher-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 46px; border: 1px solid rgba(54, 34, 20, 0.2); }
      .teacher-avatar-fallback {
        width: 46px; height: 46px; border-radius: 50%; flex: 0 0 46px; display: flex;
        align-items: center; justify-content: center; font-size: 14px; font-weight: 800;
        color: #2a2118;
        background: linear-gradient(145deg, #ffd7e8, #cceef7);
        border: 1px solid rgba(54, 34, 20, 0.17);
      }
      .teacher-content { min-width: 0; }
      .teacher-content small { display: inline-block; margin-top: 2px; }
      .profile-top {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: flex-start;
        cursor: pointer;
      }
      .profile-greeting {
        font-weight: 700;
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0;
      }
      #user {
        background: #ffffff;
        border: 0;
        border-bottom: 0;
        box-shadow: none;
        padding: 16px 24px 12px;
        margin-bottom: 0;
        border-radius: 0;
      }
      .profile-avatar,
      .profile-avatar-fallback {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 50%;
      }
      .profile-avatar {
        object-fit: cover;
        border: 1px solid rgba(54, 34, 20, 0.2);
      }
      .profile-avatar-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 700;
        color: #2a2118;
        background: linear-gradient(145deg, #ffd7e8, #cceef7);
        border: 1px solid rgba(54, 34, 20, 0.17);
      }
      .profile-menu {
        margin-top: 10px;
        display: grid;
        gap: 6px;
      }
      .profile-menu button {
        margin: 0;
      }
      .profile-overlay-root {
        position: fixed;
        inset: 0;
        z-index: 60;
        background: rgba(15, 23, 42, 0.28);
        display: flex;
        align-items: flex-start;
        justify-content: center;
      }
      .profile-overlay-panel {
        width: min(
          calc(var(--app-max-width) - (var(--page-gutter) * 2)),
          calc(100vw - (var(--page-gutter) * 2))
        );
        margin-top: 0;
        border-radius: 0 0 28px 28px;
        background: #ffffff;
        padding: 14px 16px 16px;
        box-shadow: 0 8px 28px rgba(16, 24, 40, 0.2);
        animation: overlaySheetTopIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      #profileScreen.profile-flat {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 var(--page-gutter);
        margin: 0;
      }
      .profile-page-wrap {
        width: 100%;
        padding: 0;
      }
      .profile-page-panel {
        margin: 0 auto;
        border-radius: 0;
        box-shadow: none;
        padding: 12px 0 6px;
        animation: none;
      }
      .profile-overlay-top {
        display: flex;
        justify-content: flex-start;
      }
      .profile-overlay-back {
        color: #374151;
        background: #f9fafb;
        border-color: #e5e7eb;
        box-shadow: none;
      }
      .profile-overlay-avatar-wrap {
        margin-top: 10px;
        display: flex;
        justify-content: center;
      }
      .profile-overlay-avatar,
      .profile-overlay-avatar-fallback {
        width: 112px;
        height: 112px;
        border-radius: 50%;
      }
      .profile-overlay-avatar {
        object-fit: cover;
        border: 4px solid #ffffff;
        box-shadow: 0 4px 18px rgba(16, 24, 40, 0.14);
      }
      .profile-overlay-avatar-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(145deg, #f3f4f6, #e5e7eb);
        color: #111827;
      }
      .profile-overlay-name {
        margin: 14px 0 0;
        text-align: center;
        font-size: 38px;
        line-height: 0.95;
        letter-spacing: -0.01em;
        font-family: var(--font-display);
        color: #111827;
      }
      .profile-overlay-rank {
        margin-top: 6px;
        text-align: center;
        font-size: 15px;
        line-height: 1.25;
        font-weight: 700;
        color: #374151;
      }
      .profile-overlay-stats-title {
        margin-top: 12px;
        text-align: center;
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 800;
        color: #9ca3af;
      }
      .profile-overlay-stats {
        margin-top: 8px;
        border-top: 1px solid #e5e7eb;
        border-bottom: 1px solid #e5e7eb;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
      }
      .profile-stat-item {
        min-height: 84px;
        padding: 8px 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
      }
      .profile-stat-item + .profile-stat-item {
        border-left: 1px solid #e5e7eb;
      }
      .profile-stat-value {
        font-size: 34px;
        line-height: 1;
        font-family: var(--font-display);
        color: #111827;
      }
      .profile-stat-label {
        font-size: 11px;
        line-height: 1;
        letter-spacing: 0.08em;
        font-weight: 800;
        color: #9ca3af;
      }
      .profile-stat-item.with-ring {
        gap: 2px;
      }
      .profile-stat-ring {
        width: 56px;
        height: 56px;
        position: relative;
      }
      .profile-stat-ring svg {
        width: 56px;
        height: 56px;
        transform: rotate(-90deg);
      }
      .profile-stat-ring-bg {
        fill: none;
        stroke: #e5e7eb;
        stroke-width: 4;
      }
      .profile-stat-ring-val {
        fill: none;
        stroke: #111b34;
        stroke-width: 4;
        stroke-linecap: round;
      }
      .profile-stat-ring span {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        line-height: 1;
        font-weight: 700;
        color: #111827;
      }
      .profile-overlay-menu {
        margin-top: 14px;
        display: grid;
        gap: 10px;
      }
      .profile-menu-grid {
        margin-top: 16px;
        gap: 10px;
      }
      .profile-menu-link {
        margin: 0;
        min-height: 54px;
        border-radius: 14px;
        border: 1px solid rgba(15, 23, 42, 0.1);
        background: #f8fafc;
        color: #111827;
        box-shadow: none;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
      }
      .profile-menu-link::after {
        content: "›";
        color: #98a2b3;
        font-size: 20px;
        line-height: 1;
      }
      .profile-menu-link:hover,
      .profile-menu-link:active {
        transform: none;
        filter: none;
      }
      .profile-menu-link-title {
        font-size: 15px;
        font-weight: 700;
        color: #111827;
      }
      .profile-menu-text {
        margin: 0;
        padding: 0;
        width: auto;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: #111827;
        text-align: center;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 700;
      }
      .profile-menu-text-accent {
        color: #111b34;
        letter-spacing: 0.01em;
      }
      .profile-menu-text:hover {
        transform: none;
        filter: none;
        text-decoration: underline;
      }
      .studio-screen {
        background: #ffffff;
        border-radius: 0;
        overflow: visible;
      }
      .studio-header-card {
        background: #dde4eb;
        border: 0;
        margin: 0 var(--page-gutter);
        border-radius: 0 0 42px 42px;
        padding: 16px 20px 16px;
        box-shadow: none;
        text-align: center;
      }
      .studio-top-row {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
      }
      .studio-top-row h2 {
        margin: 0;
        font-size: 30px;
        line-height: 1;
        font-family: var(--font-body);
        font-weight: 700;
        color: #111827;
      }
      .studio-profile-row {
        margin-top: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        flex-direction: row;
      }
      .studio-avatar,
      .studio-avatar-fallback {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        flex: 0 0 66px;
      }
      .studio-avatar {
        object-fit: cover;
        border: 1px solid rgba(17, 24, 39, 0.12);
      }
      .studio-avatar-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
        color: #111827;
        background: #eef2f7;
      }
      .studio-profile-name {
        font-size: 20px;
        line-height: 1.1;
        font-weight: 700;
        color: #111827;
      }
      .studio-profile-copy {
        display: grid;
        justify-items: start;
        text-align: left;
      }
      .studio-profile-copy .studio-profile-sub-wrap {
        justify-content: flex-start;
      }
      .studio-profile-sub {
        margin-top: 0;
        color: #5f6b7a;
        font-size: 14px;
        line-height: 1.35;
      }
      .studio-tabs {
        margin-top: 14px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.15);
      }
      .studio-tabs button {
        width: auto;
        flex: 0 0 auto;
        margin: 0;
        min-height: 38px;
        padding: 8px 16px;
        border-radius: 999px;
        border: 0;
        background: transparent;
        color: #4b5565;
        font-size: 14px;
        line-height: 20px;
        font-family: var(--font-display);
        font-weight: 700;
        box-shadow: none;
      }
      .studio-tabs button.active {
        color: #ffffff;
        background: var(--nav-bg);
        box-shadow: none;
      }
      .app-bottom-nav-wrap {
        position: fixed;
        left: 50%;
        bottom: 12px;
        transform: translateX(-50%);
        width: min(calc(var(--app-max-width) - 24px), calc(100vw - 24px));
        z-index: 55;
        text-align: center;
      }
      .app-bottom-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 5px 6px;
        width: 100%;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(15, 23, 42, 0.1);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
        backdrop-filter: blur(6px);
      }
      .app-bottom-nav button {
        flex: 1 1 0;
        margin: 0;
        height: 36px;
        border-radius: 22px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        color: #667085;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0;
        white-space: nowrap;
        text-align: center;
        box-shadow: none;
      }
      .app-bottom-nav button.active {
        background: var(--nav-bg);
        color: #ffffff;
      }
      .lessons-onboarding-hint {
        margin: 4px 0 12px;
        padding: 12px 14px;
        border-radius: 16px;
        border: 1px solid rgba(15, 23, 42, 0.08);
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      }
      .lessons-onboarding-kicker {
        font-size: 11px;
        font-weight: 700;
        color: #475467;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .lessons-onboarding-text {
        margin-top: 6px;
        font-size: 14px;
        line-height: 1.45;
        color: #101828;
        font-weight: 600;
      }
      .teacher-access-overlay-root {
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(16, 24, 40, 0.4);
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }
      .teacher-access-overlay-panel {
        width: min(calc(var(--app-max-width) - 24px), calc(100vw - 24px));
        background: #ffffff;
        border-radius: 24px 24px 0 0;
        padding: 18px 16px 22px;
        box-shadow: 0 -14px 36px rgba(15, 23, 42, 0.22);
      }
      .teacher-access-overlay-panel h3 {
        margin: 0;
        font-size: 24px;
        line-height: 1.1;
      }
      .teacher-access-copy {
        margin: 8px 0 0;
        font-size: 14px;
        line-height: 1.45;
        color: #475467;
      }
      .teacher-access-overlay-panel textarea {
        margin-top: 12px;
        width: 100%;
        min-height: 110px;
        border-radius: 14px;
        border: 1px solid #d0d5dd;
        background: #f8fafc;
        padding: 10px 12px;
        font: inherit;
        resize: vertical;
      }
      .teacher-access-submit {
        margin-top: 10px;
        width: 100%;
        min-height: 44px;
        border-radius: 12px;
        background: #111827;
        color: #ffffff;
      }
      .inline-edit-row,
      .studio-profile-sub-wrap {
        margin-top: 2px;
        display: inline-flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 2px;
        min-height: 28px;
        flex-direction: column;
      }
      .studio-about-view-row {
        display: inline-flex;
        align-items: center;
        gap: 2px;
      }
      .studio-about-view-row.hidden {
        display: none;
      }
      .inline-edit-field {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
      }
      .studio-about-edit-btn {
        width: 22px;
        min-width: 22px;
        height: 22px;
        margin: 0;
        padding: 0;
        border-radius: 999px;
        border: 0;
        background: transparent;
        color: #344054;
        font-size: 13px;
        line-height: 1;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .studio-edit-icon {
        width: 14px;
        height: 14px;
        display: block;
      }
      .inline-edit-input,
      .studio-about-input {
        margin: 0;
        width: auto;
        min-width: 0;
        min-height: 28px;
        padding: 0;
        border-radius: 999px;
        border: 0;
        background: transparent;
        color: #5f6b7a;
        font-size: 14px;
        line-height: 1.35;
        text-align: left;
        box-sizing: border-box;
      }
      .inline-edit-input::placeholder,
      .studio-about-input::placeholder {
        color: #5f6b7a;
        opacity: 0.9;
      }
      .inline-edit-input:read-only,
      .studio-about-input:read-only {
        cursor: text;
      }
      .inline-edit-field.is-editing .inline-edit-input {
        min-width: 0;
        padding-right: 64px;
      }
      .inline-edit-field.is-editing .studio-about-input {
        min-width: 0;
        width: 27ch;
      }
      .studio-profile-sub-wrap.is-editing .studio-about-edit-btn {
        display: none;
      }
      .studio-profile-sub-wrap.is-editing .studio-about-input,
      .studio-about-input.is-editing {
        min-height: 34px;
        padding: 7px 56px 7px 12px;
        border: 1px solid var(--chip-border);
        background: #ffffff;
        color: #111827;
        text-align: left;
      }
      .studio-about-input.hidden,
      .inline-edit-field.hidden {
        display: none;
      }
      .inline-edit-counter,
      .studio-about-counter {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 11px;
        color: #6b7280;
        pointer-events: none;
      }
      .studio-overview,
      .studio-body {
        padding: 14px var(--page-gutter);
        display: grid;
        gap: 12px;
      }
      .studio-course-editor-page {
        gap: 14px;
      }
      .studio-editor-directions {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px;
        margin-bottom: 14px;
        border-radius: 999px;
        background: rgba(17, 24, 39, 0.06);
        border: 1px solid rgba(17, 24, 39, 0.1);
      }
      .studio-editor-directions button {
        width: auto;
        flex: 0 0 auto;
        margin: 0;
        min-height: 34px;
        padding: 7px 14px;
        border-radius: 999px;
        border: 0;
        background: transparent;
        color: #4b5565;
        font-size: 13px;
        line-height: 1;
        font-weight: 700;
        box-shadow: none;
        transition: background-color 120ms ease, color 120ms ease;
      }
      .studio-editor-directions button:hover,
      .studio-editor-directions button:active {
        transform: none;
        filter: none;
      }
      .studio-editor-directions button.active {
        background: #111827;
        color: #ffffff;
      }
      .studio-editor-preview-card {
        min-height: 190px;
        cursor: default;
        overflow: hidden;
      }
      .studio-editor-preview-card:hover,
      .studio-editor-preview-card:active {
        transform: none;
        filter: none;
      }
      .studio-inline-edit-wrap {
        display: inline-flex;
        align-items: center;
        gap: 0;
      }
      .studio-inline-edit-title-wrap {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
      }
      .studio-inline-edit-price-wrap {
        flex: 0 0 auto;
      }
      .studio-editor-inline-title {
        margin: 0;
        width: 100%;
        min-height: 54px;
        padding: 8px 10px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.2);
        color: var(--title-color, #101828);
        font-size: 22px;
        line-height: 1.1;
        font-weight: 800;
        letter-spacing: -0.4px;
        box-shadow: none;
        resize: none;
        overflow-y: hidden;
        text-wrap: balance;
      }
      #studioDraftDescription,
      #studioLessonDescription,
      #studioLessonTipText {
        resize: none;
        overflow-y: hidden;
      }
      .studio-editor-inline-title:focus,
      .studio-editor-inline-price:focus {
        border-color: rgba(255, 255, 255, 0.55);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
      }
      .studio-level-picker {
        position: relative;
      }
      .studio-level-badge-btn {
        width: auto;
        margin: 0;
        border: 0;
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #45556c;
        background: rgba(255, 255, 255, 0.72);
      }
      .studio-level-caret {
        font-size: 11px;
        line-height: 1;
      }
      .studio-level-menu {
        position: absolute;
        top: auto;
        bottom: calc(100% + 8px);
        left: 0;
        right: auto;
        z-index: 30;
        min-width: 190px;
        padding: 8px;
        border-radius: 12px;
        border: 1px solid rgba(148, 163, 184, 0.35);
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      .studio-level-menu button {
        margin: 0;
        width: 100%;
        min-height: 24px;
        padding: 4px 11px;
        border-radius: 999px;
        border: 0;
        text-align: left;
        color: #45556c;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: none;
      }
      .studio-level-menu button.active {
        color: #ffffff;
        background: #111827;
      }
      .studio-editor-price-line {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
      }
      .studio-editor-price-line span {
        font-size: 12px;
        line-height: 1.2;
        color: rgba(16, 24, 40, 0.72);
        font-weight: 700;
      }
      .studio-editor-course-head {
        margin-top: 10px;
        justify-content: flex-start;
      }
      .studio-editor-meta-line {
        margin-top: 10px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
      }
      .studio-editor-level-line {
        display: flex;
        justify-content: flex-start;
        flex: 0 0 auto;
        position: relative;
        z-index: 20;
      }
      .studio-editor-price-line {
        margin-top: 0;
        justify-content: flex-end;
      }
      .studio-editor-inline-price {
        margin: 0;
        width: 130px;
        min-height: 30px;
        padding: 6px 10px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.2);
        color: var(--title-color, #101828);
        font-size: 24px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: -0.02em;
        box-shadow: none;
      }
      .studio-editor-meta-panel {
        border-radius: 14px;
      }
      .studio-overview-inline {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .studio-overview-item {
        min-height: 66px;
        border-radius: 14px;
        background: #f3f4f6;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px;
      }
      .studio-overview-value {
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
        color: #111827;
      }
      .studio-overview-label {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6b7280;
      }
      .studio-revenue-card {
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        padding: 14px 14px 10px;
      }
      .studio-revenue-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
      }
      .studio-revenue-head h3 {
        margin: 0;
        font-size: 18px;
        line-height: 1.1;
        font-weight: 700;
        color: #111827;
      }
      .studio-revenue-badge {
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
      }
      .studio-revenue-badge.positive {
        color: #0f8a4a;
        background: #dff5e8;
      }
      .studio-revenue-badge.negative {
        color: #b42318;
        background: #fee4e2;
      }
      .studio-revenue-canvas-wrap {
        height: 190px;
      }
      .studio-revenue-axis {
        margin-top: 8px;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 4px;
      }
      .studio-revenue-axis span {
        font-size: 11px;
        line-height: 1;
        color: #94a3b8;
        text-align: center;
      }
      .studio-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .studio-stat-card {
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        padding: 12px;
      }
      .studio-stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
      }
      .studio-stat-icon.earnings {
        background: #d6f6e6;
        color: #16a34a;
      }
      .studio-stat-icon.students {
        background: #dbeafe;
        color: #2563eb;
      }
      .studio-stat-label {
        margin-top: 10px;
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0.08em;
        font-weight: 800;
        color: #94a3b8;
        text-transform: uppercase;
      }
      .studio-stat-value {
        margin-top: 8px;
        font-size: 32px;
        line-height: 1;
        font-family: var(--font-display);
        color: #111827;
      }
      .studio-create-course-btn {
        margin: 0;
        border-radius: 20px;
        min-height: 56px;
        text-align: center;
        color: #64748b;
        background: #ffffff;
        border: 1.5px solid #d6e0ee;
        box-shadow: none;
      }
      .studio-courses-list {
        display: grid;
        gap: 12px;
      }
      .studio-course-card {
        border-radius: 28px;
        padding: 16px;
        min-height: 168px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 4px 12px rgba(16, 24, 40, 0.06);
      }
      .studio-course-card.dir-salsa { background: #c7d2ff; }
      .studio-course-card.dir-bachata { background: #f8d5ac; }
      .studio-course-card.dir-kizomba { background: #dec5f6; }
      .studio-course-title {
        font-size: 44px;
        line-height: 0.95;
        font-family: var(--font-display);
        color: #111827;
      }
      .studio-course-meta-row {
        margin-top: 10px;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .studio-course-mini {
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 11px;
        line-height: 1.2;
        font-weight: 700;
        color: #475467;
        background: rgba(255, 255, 255, 0.58);
      }
      .studio-course-foot {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .studio-course-price {
        font-size: 36px;
        line-height: 0.95;
        font-family: var(--font-display);
        color: #111827;
      }
      .studio-edit-btn {
        width: 54px;
        min-width: 54px;
        height: 54px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        text-align: center;
      }
      .studio-panel {
        border-radius: 20px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        padding: 14px;
      }
      .studio-panel h3 {
        margin: 0 0 10px;
        font-size: 31px;
        line-height: 0.95;
        font-family: var(--font-display);
      }
      .studio-courses-compact-list {
        display: grid;
        gap: 8px;
      }
      .studio-courses-home {
        display: grid;
        gap: 14px;
      }
      .studio-create-course-full {
        width: 100%;
        margin: 0;
        min-height: 52px;
        border-radius: 14px;
        text-align: center;
        font-weight: 700;
        color: #111827;
        background: #ffffff;
        border: 1px solid #d5dde6;
        box-shadow: none;
      }
      .studio-my-courses-grid {
        display: grid;
        gap: 16px;
      }
      .studio-my-course-card {
        position: relative;
        min-height: 190px;
        padding-bottom: 18px;
      }
      .studio-my-course-edit {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 58px;
        min-width: 58px;
        height: 58px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        border: 0;
        background: rgba(255, 255, 255, 0.3);
        color: #111827;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(16, 24, 40, 0.16);
      }
      .studio-my-course-edit:hover,
      .studio-my-course-edit:active {
        transform: translate(-50%, -50%);
      }
      .studio-my-course-edit .studio-edit-icon {
        width: 20px;
        height: 20px;
      }
      .studio-my-course-bottom {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 16px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
      }
      .studio-my-course-metrics {
        display: inline-flex;
        align-items: flex-end;
        gap: 16px;
      }
      .studio-my-course-metric {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
      }
      .studio-my-course-metric span {
        font-size: 12px;
        line-height: 1.2;
        color: rgba(16, 24, 40, 0.72);
        font-weight: 600;
      }
      .studio-my-course-metric strong,
      .studio-my-course-price strong {
        font-size: 22px;
        line-height: 1;
        color: var(--title-color, #111827);
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .studio-my-course-price {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
      }
      .studio-my-course-price span {
        font-size: 12px;
        line-height: 1.2;
        color: rgba(16, 24, 40, 0.72);
        font-weight: 600;
      }
      .studio-course-row {
        margin: 0;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #f8fafc;
        color: #111827;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .studio-course-row-main {
        min-width: 0;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        flex: 1;
      }
      .studio-course-row-title {
        font-size: 15px;
        line-height: 1.2;
        font-weight: 700;
      }
      .studio-course-row-sub {
        font-size: 12px;
      }
      .studio-course-row-price {
        font-size: 13px;
        font-weight: 700;
      }
      .studio-empty {
        padding: 8px;
      }
      .studio-edit-course {
        display: grid;
        gap: 12px;
      }
      .studio-edit-head {
        display: grid;
        gap: 8px;
        padding: 0 var(--page-gutter);
      }
      .studio-edit-head-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .studio-edit-head-sub {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .studio-edit-head-sub span {
        font-size: 14px;
        color: #111827;
        font-weight: 600;
      }
      .studio-back-icon-btn {
        width: auto;
        min-width: 108px;
        margin: 0;
        padding: 0 14px;
        min-height: 38px;
        border-radius: 999px;
        background: #e5e7eb;
        border: 1px solid #d1d5db;
        color: #111827;
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 700;
      }
      .studio-back-icon-btn:hover,
      .studio-back-icon-btn:active {
        transform: none;
        filter: none;
      }
      .studio-back-icon-btn .course-hero-icon {
        width: 15px;
        height: 15px;
        margin: 0;
        opacity: 1;
      }
      .studio-edit-save-btn {
        width: auto;
        min-width: 108px;
        margin: 0;
        text-align: center;
        border-radius: 999px;
        min-height: 38px;
        padding: 8px 14px;
        background: #111827;
        border-color: #111827;
        color: #ffffff;
        box-shadow: none;
      }
      .studio-course-editor-page {
        padding: 10px 0 16px;
        gap: 12px;
      }
      .studio-editor-wrap {
        margin: 0 var(--page-gutter);
        background: #ffffff;
        padding: 16px 20px 22px;
        display: grid;
        gap: 14px;
      }
      .studio-editor-preview-card {
        margin: 0 var(--page-gutter);
        width: calc(100% - (var(--page-gutter) * 2));
        max-width: 100%;
        justify-self: stretch;
        box-sizing: border-box;
        overflow: visible;
      }
      .studio-editor-preview-card.catalog-course-card {
        width: calc(100% - (var(--page-gutter) * 2)) !important;
        max-width: calc(100% - (var(--page-gutter) * 2)) !important;
        margin-left: var(--page-gutter) !important;
        margin-right: var(--page-gutter) !important;
        overflow: visible;
      }
      .studio-editor-meta,
      .studio-editor-curriculum {
        display: grid;
        gap: 14px;
      }
      .studio-publish-under-card {
        padding: 0;
      }
      .studio-editor-meta {
        padding: 0;
      }
      .studio-switch {
        position: relative;
        display: inline-flex;
        width: 48px;
        height: 28px;
      }
      .studio-switch input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        width: 0;
        height: 0;
        margin: 0;
      }
      .studio-switch-track {
        width: 100%;
        height: 100%;
        border-radius: 999px;
        border: 1px solid #d0d5dd;
        background: #e5e7eb;
        transition: background-color 140ms ease, border-color 140ms ease;
        position: relative;
      }
      .studio-switch-track::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
        transition: transform 140ms ease;
      }
      .studio-switch input:checked + .studio-switch-track {
        background: #111827;
        border-color: #111827;
      }
      .studio-switch input:checked + .studio-switch-track::after {
        transform: translateX(20px);
      }
      .studio-switch input:disabled + .studio-switch-track {
        opacity: 0.55;
      }
      .studio-curriculum-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
      }
      .studio-section-kicker {
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 800;
        color: #94a3b8;
      }
      .studio-add-lesson-btn {
        width: auto;
        margin: 0;
      }
      .studio-lessons-list {
        display: grid;
        gap: 8px;
      }
      .studio-lesson-row {
        margin: 0;
        width: 100%;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        background: #ffffff;
        color: #111827;
        box-shadow: 0 1px 0 rgba(16, 24, 40, 0.06), 0 2px 6px rgba(16, 24, 40, 0.06);
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) 24px;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        cursor: pointer;
      }
      .studio-lesson-row.is-drag-over {
        border-color: #94a3b8;
        background: #f8fafc;
      }
      .studio-lesson-row.is-dragging {
        opacity: 0.7;
      }
      .studio-lesson-row-handle {
        width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0.7;
      }
      .studio-lesson-row-handle img {
        width: 16px;
        height: 16px;
        display: block;
      }
      .studio-lesson-delete-btn {
        width: 24px;
        min-width: 24px;
        height: 24px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .studio-lesson-delete-btn img {
        width: 16px;
        height: 16px;
        display: block;
      }
      .studio-lesson-delete-btn:hover,
      .studio-lesson-delete-btn:active {
        transform: none;
        filter: none;
        background: rgba(239, 68, 68, 0.08);
      }
      .studio-lesson-row-main {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
      }
      .studio-lesson-row-title {
        font-size: 15px;
        line-height: 1.2;
        font-weight: 700;
      }
      .studio-lesson-row-sub {
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }
      .studio-lesson-row-sub .course-lesson-free {
        margin-left: 2px;
      }
      .studio-delete-course-btn {
        margin-top: 14px;
        width: 100%;
        min-height: 48px;
        border-radius: 16px;
        border: 0;
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        text-align: center;
        box-shadow: none;
      }
      .studio-delete-course-btn:hover,
      .studio-delete-course-btn:active {
        transform: none;
        filter: none;
      }
      .studio-lesson-form {
        margin-top: 10px;
        display: grid;
        gap: 8px;
      }
      .studio-lesson-editor-page {
        gap: 14px;
      }
      .studio-lesson-overlay-root {
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(16, 24, 40, 0.34);
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }
      .studio-lesson-overlay-panel {
        width: min(
          calc(var(--app-max-width) - (var(--page-gutter) * 2)),
          calc(100vw - (var(--page-gutter) * 2))
        );
        max-height: 88vh;
        overflow: auto;
        background: #ffffff;
        border-radius: 28px 28px 0 0;
        padding: 14px 0 18px;
        box-shadow: 0 -14px 38px rgba(16, 24, 40, 0.24);
        animation: overlaySheetIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .studio-lesson-head-gap {
        margin-bottom: 10px;
      }
      .studio-lesson-form-page {
        margin-top: 0;
        padding: 0 var(--page-gutter);
      }
      .studio-file-field {
        position: relative;
        overflow: hidden;
        margin: 0;
        width: 100%;
        padding: 10px 12px;
        border-radius: 16px;
        border: 1px solid #d7dde6;
        background: #eef2f7;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .studio-file-field.is-locked {
        cursor: default;
      }
      .studio-video-error {
        margin-top: 8px;
        margin-bottom: 4px;
        font-size: 12px;
        line-height: 1.35;
        color: #b42318;
        white-space: pre-wrap;
        word-break: break-word;
      }
      .studio-video-info {
        margin-top: 8px;
        margin-bottom: 4px;
        font-size: 12px;
        line-height: 1.35;
        color: #175cd3;
        white-space: pre-wrap;
        word-break: break-word;
      }
      .studio-file-field-video {
        min-height: 160px;
      }
      .studio-file-field-audio {
        min-height: 78px;
      }
      .studio-file-field-audio-duration {
        position: absolute;
        right: 12px;
        bottom: 10px;
        z-index: 1;
        font-size: 12px;
        line-height: 1;
        font-weight: 700;
        color: #6b7280;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 999px;
        padding: 4px 8px;
      }
      .studio-file-field-value {
        font-size: 13px;
        line-height: 1.2;
        color: #6b7280;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .studio-file-field-value-main {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: #6b7280;
        letter-spacing: 0;
      }
      .studio-file-field-value-main[data-filename]:not([data-filename=""]) {
        text-align: left;
        font-size: 14px;
        color: #111827;
      }
      .studio-file-field-preview-img,
      .studio-file-field-preview-fallback {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .studio-file-field-preview-img {
        object-fit: cover;
      }
      .studio-file-field-preview-fallback {
        background: linear-gradient(180deg, #dbe3f2 0%, #c8d2e9 100%);
      }
      .studio-file-field.is-locked .studio-file-field-value-main {
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
      }
      .studio-upload-progress-ring {
        position: absolute;
        right: 12px;
        top: 12px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: none;
        align-items: center;
        justify-content: center;
        background: conic-gradient(#111827 calc(var(--progress, 0) * 1%), rgba(255, 255, 255, 0.35) 0);
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.22);
        z-index: 2;
      }
      .studio-upload-progress-ring-audio {
        right: 12px;
        top: 12px;
      }
      .studio-upload-progress-ring > span {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(17, 24, 39, 0.85);
        color: #ffffff;
        font-size: 11px;
        line-height: 1;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .studio-file-field.is-uploading .studio-file-field-value-main {
        color: #ffffff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      }
      .studio-publish-hint {
        font-size: 12px;
        line-height: 1.35;
        margin-top: -6px;
      }
      .studio-lesson-actions {
        display: flex;
        gap: 8px;
      }
      .style-chips {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .style-chips::-webkit-scrollbar {
        display: none;
      }
      .style-chip {
        width: auto;
        flex: 0 0 auto;
        margin: 0;
        min-height: 38px;
        padding: 8px 16px;
        border-radius: 999px;
        border: 1.15738px solid var(--chip-border);
        background: #ffffff;
        color: var(--chip-text);
        font-size: 14px;
        line-height: 20px;
        font-family: var(--font-display);
        font-weight: 700;
        box-shadow: none;
      }
      .style-chip.active {
        color: #fff;
        border-color: var(--nav-bg);
        background: var(--nav-bg);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
      }
      .teacher-card {
        border: 1px solid rgba(38, 30, 20, 0.22);
        border-radius: 14px;
        padding: 10px;
        background: #ffffff;
        box-shadow: 0 6px 16px rgba(55, 38, 23, 0.12);
        cursor: pointer;
        transition: transform 120ms ease, filter 120ms ease;
      }
      .catalog-bar {
        display: grid;
        gap: 11.99px;
        margin-bottom: 24px;
      }
      .catalog-row {
        display: flex;
        gap: 8px;
      }
      .catalog-row > * { flex: 1; }
      .teacher-filter-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0;
      }
      .teacher-filter-btn {
        width: auto;
        margin: 0;
        min-height: 38px;
        padding: 8px 16px;
        border-radius: 999px;
        border: 1.15738px solid var(--chip-border);
        background: #ffffff;
        color: var(--chip-text);
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        line-height: 20px;
        font-family: var(--font-display);
        font-weight: 400;
      }
      .teacher-filter-btn.active {
        color: var(--chip-text);
        border-color: var(--chip-border);
        background: #ffffff;
      }
      .teacher-filter-avatar,
      .teacher-filter-fallback {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        flex: 0 0 20px;
      }
      .teacher-filter-avatar { object-fit: cover; }
      .teacher-filter-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 700;
        color: #2d251e;
        background: #ece7df;
      }
      .teacher-filter-clear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid rgba(45, 31, 20, 0.2);
        font-size: 12px;
        line-height: 1;
      }
      .catalog-surface {
        background: #f8fafc;
        padding: 8px 0 16px;
      }
      .catalog-head,
      .catalog-inner {
        padding: 0 var(--page-gutter);
        box-sizing: border-box;
      }
      .catalog-head {
        margin-bottom: 12px;
      }
      .catalog-inner {
        width: 100%;
        overflow-x: hidden;
      }
      .teacher-picker {
        border: 1px solid rgba(38, 30, 20, 0.1);
        border-radius: 26px 26px 0 0;
        background: rgba(255, 255, 255, 0.98);
        padding: 16px 14px 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: min(
          calc(var(--app-max-width) - (var(--page-gutter) * 2)),
          calc(100vw - (var(--page-gutter) * 2))
        );
        height: min(70vh, 404px);
        overflow: hidden;
        animation: overlaySheetIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .teacher-picker-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 6px;
      }
      .teacher-picker-head {
        position: sticky;
        top: 0;
        z-index: 1;
        background: rgba(255, 255, 255, 0.98);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin: 0;
        padding-bottom: 2px;
      }
      .teacher-picker-search {
        width: 100%;
        flex: 1 1 auto;
        margin: 0;
        min-height: 40px;
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid var(--chip-border);
        background: #ffffff;
        color: var(--text-main);
        font-size: 14px;
        line-height: 20px;
        outline: none;
      }
      .teacher-picker-search:focus {
        border-color: #90a1b9;
        box-shadow: 0 0 0 3px rgba(144, 161, 185, 0.15);
      }
      .teacher-picker-empty {
        padding: 8px 6px 10px;
        font-size: 13px;
      }
      .teacher-picker-close {
        width: 34px;
        min-width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        font-size: 20px;
        line-height: 1;
        text-align: center;
      }
      .teacher-picker-item {
        margin: 0;
        width: 100%;
        border: 1px solid rgba(38, 30, 20, 0.08);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.95);
        color: #2d251e;
        box-shadow: none;
        display: flex;
        align-items: center;
        min-height: 56px;
        padding: 10px 12px;
        gap: 8px;
        justify-content: flex-start;
        flex: 0 0 auto;
      }
      .teacher-picker-main {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
        flex: 1;
      }
      .teacher-picker-name {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
      }
      .teacher-picker-sub {
        font-size: 12px;
        color: var(--text-muted);
      }
      .teacher-picker-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff3ef;
      }
      .teacher-picker .teacher-filter-avatar,
      .teacher-picker .teacher-filter-fallback {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
      }
      .teacher-picker-overlay {
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(19, 14, 12, 0.36);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 0;
      }
      .course-progress {
        margin-top: 10px;
      }
      .course-progress-track {
        height: 7.99px;
        border-radius: 999px;
        background: rgba(30, 41, 57, 0.2);
        overflow: hidden;
      }
      .course-progress-fill {
        height: 100%;
        border-radius: 999px;
        background: #101828;
      }
      .course-progress-label {
        margin-top: 4px;
        font-size: 10px;
        line-height: 15px;
        font-weight: 700;
        opacity: 0.6;
        color: #6a7282;
      }
      .course-author {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }
      .course-top-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        justify-content: space-between;
        gap: 8px;
        margin-top: 22px;
        padding-top: 0;
        border-top: 0;
      }
      .course-progress-inline {
        width: 90.98px;
        min-width: 90.98px;
      }
      .course-price-inline {
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: right;
        font-size: 22px;
        line-height: 1.1;
        font-weight: 800;
        letter-spacing: -0.4px;
        color: var(--title-color, #101828);
      }
      .course-progress-inline .course-progress-track { margin-top: 2px; }
      .course-progress-inline .course-progress-label {
        margin-top: 4px;
        text-align: right;
      }
      .course-author-avatar,
      .course-author-fallback {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 50%;
      }
      .course-author-avatar {
        object-fit: cover;
        border: 1px solid rgba(38, 30, 20, 0.2);
      }
      .course-author-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        color: #2d251e;
        background: #ece7df;
      }
      .course-author-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        max-width: 175px;
      }
      .course-author-name {
        font-size: 14px;
        line-height: 1.2;
        font-weight: 700;
        color: #101828;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .course-author-about {
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.2;
        color: #45556c;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .teacher-card:hover { transform: translateY(-1px); filter: brightness(1.01); }
      .teacher-card:active { transform: translateY(0); }
      #studentScreen.flat-list,
      #teacherScreen.studio-flat {
        background: #fff;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        border-radius: 0;
        overflow-x: hidden;
        animation: none;
      }
      .teacher-card-head {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .teacher-name {
        margin: 0;
        font-size: 16px;
        line-height: 1.2;
      }
      .teacher-courses-count {
        margin-top: 2px;
        font-size: 12px;
        color: var(--text-muted);
      }
      .teacher-style-row {
        margin: 10px 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .teacher-style-chip {
        border-radius: 999px;
        padding: 3px 8px;
        font-size: 12px;
        line-height: 1.25;
        color: #2d251e;
        background: var(--teacher-chip-bg, #f6efe4);
      }
      .teacher-proof {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 10px 0 8px;
      }
      .teacher-proof-label {
        font-size: 12px;
        color: var(--text-muted);
      }
      .mini-avatars {
        display: flex;
        align-items: center;
      }
      .mini-avatars img,
      .mini-avatars span {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1.5px solid #fff;
        margin-left: -6px;
        background: #fff;
      }
      .mini-avatars > :first-child { margin-left: 0; }
      .mini-avatars span {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        color: #4f463d;
        font-weight: 700;
      }
      .stack { display: grid; gap: 8px; }
      .student-header {
        margin-bottom: 10px;
      }
      .student-header-top {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .student-header-title {
        margin: 0;
        font-size: 24px;
        line-height: 1;
        letter-spacing: 0.01em;
        font-family: var(--font-display);
        font-weight: 400;
      }
      .back-btn {
        width: auto;
        min-width: 90px;
        margin: 0;
        text-align: center;
      }
      .back-spacer {
        display: inline-block;
        width: 90px;
        flex: 0 0 90px;
      }
      .section-subtitle {
        margin: 6px 0 10px;
        color: var(--text-muted);
        font-size: 13px;
      }
      .course-card {
        border: 1px solid rgba(38, 30, 20, 0.12);
        border-radius: 12px;
        padding: 14px;
        background: rgba(255, 255, 255, 0.72);
      }
      .catalog-courses-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        width: 100%;
        min-width: 0;
      }
      .catalog-course-card {
        cursor: pointer;
        border: 0;
        border-radius: var(--card-radius-xl);
        min-height: 190px;
        padding: 22px 20px 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 4px 12px rgba(16, 24, 40, 0.06);
        transition: transform 120ms ease, filter 120ms ease;
        background: var(--course-bg, #ffffff);
      }
      .catalog-course-card.dir-salsa {
        --course-bg: #c6d2ff;
        --title-color: #1e1a4d;
      }
      .catalog-course-card.dir-bachata {
        --course-bg: #ffd6a8;
        --title-color: #441306;
      }
      .catalog-course-card.dir-kizomba {
        --course-bg: #e9d4ff;
        --title-color: #3c0366;
      }
      .catalog-course-card:hover { transform: translateY(-1px); }
      .catalog-course-card:active { transform: translateY(0); }
      .course-card-title { font-weight: 700; margin-bottom: 3px; }
      .course-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-top: 0;
        width: 100%;
        min-width: 0;
      }
      .course-card-title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 22px;
        line-height: 1.1;
        font-weight: 800;
        letter-spacing: -0.4px;
        color: var(--title-color, #101828);
        overflow-wrap: break-word;
      }
      .course-level-badge {
        border-radius: 999px;
        min-height: 24px;
        padding: 4px 11px;
        font-size: 10px;
        line-height: 14px;
        font-weight: 800;
        border: 0;
        background: rgba(255, 255, 255, 0.62);
        color: #45556c;
        white-space: nowrap;
        text-transform: uppercase;
      }
      .course-level-badge.beginner { color: #1e1a4d; }
      .course-level-badge.advanced { color: #441306; }
      .course-level-badge.professional { color: #3c0366; }
      .course-card-meta {
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .course-head-side {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
        flex: 0 0 auto;
      }
      .course-view {
        background: #ffffff;
        min-height: calc(100vh - 10px);
        width: 100%;
      }
      .course-hero {
        padding: 16px 20px 24px;
        margin: 0 var(--page-gutter);
        border-radius: 0 0 42px 42px;
        color: #101828;
      }
      .course-hero.dir-salsa {
        background: #c7d2ff;
      }
      .course-hero.dir-bachata {
        background: #f8d5ac;
      }
      .course-hero.dir-kizomba {
        background: #dec5f6;
      }
      .course-hero-icon-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
        text-align: center;
        color: rgba(16, 24, 40, 0.62);
        background: rgba(239, 244, 255, 0.3);
        opacity: 0.3;
      }
      .course-hero-icon-btn:hover {
        opacity: 0.45;
        filter: none;
      }
      .course-hero-icon {
        width: 24px;
        height: 24px;
        display: block;
        margin: 0 auto;
        opacity: 0.9;
      }
      .course-hero-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 16px;
      }
      .course-hero-top .course-hero-icon-btn {
        margin: 0;
      }
      .course-hero-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .course-hero-meta-card {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 64px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: 0;
        min-width: 0;
      }
      .course-hero-meta-progress {
        width: 44px;
        height: 44px;
        position: relative;
        flex: 0 0 44px;
        margin-left: auto;
        align-self: center;
      }
      .course-hero-meta-progress svg {
        width: 44px;
        height: 44px;
        transform: rotate(-90deg);
      }
      .course-hero-meta-progress span {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        line-height: 1;
        font-weight: 700;
        color: #4e5668;
      }
      .course-hero-meta-card .course-author-avatar,
      .course-hero-meta-card .course-author-fallback {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
      }
      .course-hero-meta-copy {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }
      .course-hero-meta-copy.right {
        align-items: flex-end;
      }
      .course-hero-meta-value {
        font-size: 16px;
        line-height: 1.1;
        font-weight: 700;
        color: #101828;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .course-hero-author-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .course-hero-price-value {
        white-space: nowrap;
        font-size: clamp(28px, 7vw, 40px);
        line-height: 0.95;
        letter-spacing: -0.02em;
        font-family: var(--font-display);
        font-weight: 700;
      }
      .course-purchased-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: clamp(27px, 6.6vw, 38px);
        border-radius: 12px;
        padding: 0 10px;
        font-size: clamp(12px, 2.7vw, 16px);
        line-height: 1;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #1f7a36;
        background: rgba(223, 244, 229, 0.95);
        white-space: nowrap;
      }
      .course-hero-meta-label {
        margin-top: 0;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 700;
        color: rgba(16, 24, 40, 0.6);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .course-hero-title {
        margin: 14px 0 14px;
        font-size: clamp(34px, 8vw, 44px);
        line-height: 0.98;
        letter-spacing: -0.01em;
        font-family: var(--font-display);
        font-weight: 700;
        color: #101828;
        max-width: 100%;
        overflow-wrap: anywhere;
      }
      .course-hero-stats {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
        width: 100%;
      }
      .course-hero-bottom {
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .course-buyers-preview {
        min-height: 24px;
        display: inline-flex;
        align-items: center;
      }
      .course-mini-avatars {
        display: inline-flex;
        align-items: center;
      }
      .course-mini-avatars img,
      .course-mini-avatars span {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.86);
        margin-left: -8px;
        background: rgba(255, 255, 255, 0.85);
      }
      .course-mini-avatars > :first-child {
        margin-left: 0;
      }
      .course-mini-avatars img {
        object-fit: cover;
      }
      .course-mini-avatars span {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: #4e5668;
      }
      .course-hero-price-row {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-left: auto;
      }
      .course-stat-pill {
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 700;
        color: #4e5668;
        background: rgba(255, 255, 255, 0.6);
      }
      .course-progress-ring-bg {
        fill: none;
        stroke: rgba(78, 86, 104, 0.2);
        stroke-width: 4;
      }
      .course-progress-ring-val {
        fill: none;
        stroke: #4e5668;
        stroke-linecap: round;
        stroke-width: 4;
      }
      .course-lessons {
        position: relative;
        padding: 16px 20px 12px;
        background: #ffffff;
      }
      .course-lesson-row {
        position: relative;
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
      }
      .course-lesson-row + .course-lesson-row {
        margin-top: 10px;
      }
      .course-lesson-row::before {
        content: "";
        position: absolute;
        left: 24px;
        top: -10px;
        bottom: -10px;
        width: 2px;
        background: #e5e7eb;
      }
      .course-lessons > .course-lesson-row:first-child::before {
        top: 24px;
      }
      .course-lessons > .course-lesson-row:last-child::before {
        bottom: 24px;
      }
      .course-lesson-node {
        position: relative;
        z-index: 1;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        line-height: 1;
        font-weight: 700;
        border: 2px solid #cfd5dd;
        background: #f3f5f8;
        color: #8a94a3;
      }
      .course-lesson-node.completed {
        border-color: #bfc7d3;
        color: #7a8596;
      }
      .course-lesson-node.future {
        background: #f7f8fa;
        color: #a0a8b5;
      }
      .course-lesson-node.current {
        border-color: #c5ccd8;
        color: #727d8f;
        font-size: 21px;
      }
      .course-lesson-node-dot {
        font-size: 21px;
        line-height: 1;
      }
      .course-lesson-node-check {
        font-size: 13px;
        line-height: 1;
      }
      .course-lesson-node-lock {
        width: 12px;
        height: 12px;
        fill: #97a1af;
      }
      .course-lesson-card {
        border-radius: 14px;
        border: 0;
        background: #fff;
        padding: 13px 14px 11px;
        min-height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
      }
      .course-lesson-card.is-locked {
        background: #fbfcfd;
      }
      .course-lesson-card[onclick] {
        cursor: pointer;
      }
      .course-lesson-title {
        font-size: 17px;
        line-height: 1.25;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: #1f2937;
      }
      .course-lesson-row.completed .course-lesson-title {
        font-weight: 500;
        color: #8d96a5;
      }
      .course-lesson-title-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
      }
      .course-lesson-free {
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 10px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #1f7a36;
        background: #dff4e5;
        flex: 0 0 auto;
      }
      .course-lesson-time {
        width: fit-content;
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 11px;
        line-height: 1.3;
        font-weight: 700;
        color: #8d96a5;
        background: #f0f3f7;
      }
      .course-cta-wrap {
        position: sticky;
        bottom: 0;
        padding: 10px 20px 22px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 38%);
      }
      .course-cta {
        margin: 0;
        width: 100%;
        height: 50px;
        border: 0;
        border-radius: var(--radius-md);
        text-align: center;
        font-size: 18px;
        line-height: 1.1;
        font-family: var(--font-body);
        font-weight: 700;
        background: #111b34;
        color: #f3f5ff;
        box-shadow: 0 4px 12px rgba(17, 27, 52, 0.2);
      }
      .course-buy-overlay {
        border-radius: 24px 24px 0 0;
      }
      .course-buy-title {
        font-size: 18px;
        font-weight: 700;
        color: #101828;
      }
      .course-buy-text {
        margin: 4px 2px 10px;
        font-size: 14px;
        line-height: 1.35;
        color: #4e5668;
      }
      .course-buy-btn {
        margin: 0;
        border-radius: 14px;
        text-align: center;
      }
      .lesson-btn[disabled] {
        cursor: not-allowed;
        filter: grayscale(0.3);
        opacity: 0.66;
      }
      .lesson-hero {
        border: 0;
        border-radius: 0 0 24px 24px;
        padding: 12px 16px 18px;
        color: #fff;
        background: linear-gradient(180deg, #ff7469 0%, #ff7f73 100%);
      }
      .lesson-hero.level-beginner {
        background: linear-gradient(180deg, #ff7469 0%, #ff7f73 100%);
      }
      .lesson-hero.level-advanced {
        background: linear-gradient(180deg, #ff7469 0%, #ff7f73 100%);
      }
      .lesson-hero.level-professional {
        background: linear-gradient(180deg, #ff7469 0%, #ff7f73 100%);
      }
      .lesson-hero-nav {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 10px;
      }
      .hero-icon-btn {
        width: 34px;
        min-width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        text-align: center;
      }
      .lesson-hero-tags {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
      }
      .lesson-hero-tag {
        display: inline-flex;
        align-items: center;
        padding: 4px 9px;
        border-radius: 9px;
        font-size: 12px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.95);
        background: rgba(255, 255, 255, 0.2);
      }
      .lesson-hero-author {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
      }
      .lesson-hero-name {
        font-size: 24px;
        line-height: 1.05;
        font-family: var(--font-display);
        font-weight: 400;
        color: #fff;
      }
      .lesson-hero-role {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.88);
      }
      .lesson-hero-title {
        margin: 0;
        font-size: 42px;
        line-height: 0.96;
        letter-spacing: 0.01em;
        font-family: var(--font-display);
        font-weight: 400;
      }
      .catalog-header-space {
        height: 4px;
      }
      .lesson-list-wrap {
        margin-top: -8px;
        padding: 14px 12px 12px;
        border-radius: 18px 18px 0 0;
        border: 1px solid rgba(38, 30, 20, 0.08);
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 -2px 10px rgba(28, 20, 15, 0.04);
      }
      .lesson-program-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 2px 2px 10px;
      }
      .lesson-program-header h3 {
        margin: 0;
        font-size: 34px;
        line-height: 0.95;
        font-family: var(--font-display);
        font-weight: 400;
      }
      .lesson-program-header span {
        font-weight: 700;
        color: #ff6f67;
      }
      .lesson-card {
        border: 1px solid rgba(38, 30, 20, 0.12);
        border-radius: 12px;
        padding: 10px;
        background: #fff;
        cursor: pointer;
        transition: transform 100ms ease, box-shadow 100ms ease, opacity 100ms ease;
      }
      .lesson-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 12px rgba(28, 20, 15, 0.07);
      }
      .lesson-card.locked {
        opacity: 0.72;
        cursor: not-allowed;
      }
      .lesson-card + .lesson-card {
        margin-top: 8px;
      }
      .lesson-roadmap {
        position: relative;
      }
      .lesson-roadmap::before {
        content: "";
        position: absolute;
        left: 10px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: rgba(38, 30, 20, 0.12);
      }
      .lesson-node {
        position: relative;
        margin-left: 24px;
      }
      .lesson-node::before {
        content: "";
        position: absolute;
        left: -20px;
        top: 18px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #ece6e1;
        border: 2px solid #fff9f6;
      }
      .lesson-node.unlocked::before {
        background: #b4efe1;
      }
      .lesson-card-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
      }
      .lesson-card-title {
        margin: 0;
        font-size: 31px;
        line-height: 0.94;
        letter-spacing: 0.01em;
        font-family: var(--font-display);
        font-weight: 400;
      }
      .lesson-card-meta {
        margin-top: 6px;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
      }
      .lesson-type-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(38, 30, 20, 0.08);
        font-size: 12px;
      }
      .lesson-state-icon {
        font-size: 16px;
        color: #7c788f;
      }
      .lesson-page {
        background: #ffffff;
        min-height: 100vh;
      }
      .lesson-media-hero {
        position: relative;
        height: 300px;
        margin: 0 var(--page-gutter);
        border-radius: 0 0 42px 42px;
        background:
          linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.56) 100%),
          linear-gradient(130deg, #101418 0%, #242a31 46%, #151a20 100%);
        overflow: hidden;
      }
      .lesson-media-hero::before {
        content: "";
        position: absolute;
        inset: -30% -20%;
        background:
          radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08) 0 12%, transparent 30%),
          radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05) 0 10%, transparent 28%);
        transform: rotate(-12deg);
        pointer-events: none;
      }
      .lesson-hero-preview-img,
      .lesson-hero-preview-fallback {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }
      .lesson-hero-preview-img {
        object-fit: cover;
      }
      .lesson-hero-preview-fallback {
        background:
          linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.48) 100%),
          linear-gradient(130deg, #101418 0%, #242a31 46%, #151a20 100%);
      }
      .lesson-page-nav {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: flex-start;
        padding: 16px;
      }
      .lesson-back-btn {
        color: #ffffff;
        background: rgba(17, 24, 39, 0.55);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
      }
      .lesson-back-btn:hover {
        opacity: 0.95;
      }
      .lesson-media-play {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        width: 86px;
        height: 86px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.56);
        background: rgba(17, 24, 39, 0.32);
        backdrop-filter: blur(4px);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
      }
      .lesson-media-play:hover {
        transform: translate(-50%, -50%) scale(1.02);
      }
      .lesson-media-play:active {
        transform: translate(-50%, -50%) scale(0.98);
      }
      .lesson-media-play-icon {
        display: block;
        width: 0;
        height: 0;
        margin-left: 4px;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 18px solid #ffffff;
      }
      .lesson-video-fullscreen {
        position: fixed;
        inset: 0;
        z-index: 120;
        background: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .lesson-video-fullscreen-frame {
        width: 100vw;
        height: 100vh;
        border: 0;
        background: #000;
      }
      .lesson-video-fullscreen-close {
        position: fixed;
        top: max(12px, env(safe-area-inset-top, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        z-index: 121;
        width: 40px;
        height: 40px;
        min-height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background: rgba(17, 24, 39, 0.65);
        color: #ffffff;
        font-size: 18px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
      }
      .lesson-page-wrap {
        margin: 0 var(--page-gutter);
        background: #ffffff;
        padding: 16px 20px 22px;
      }
      .lesson-page-card h3 {
        margin: 0;
        font-size: 31px;
        line-height: 0.98;
        letter-spacing: -0.02em;
        font-family: var(--font-display);
        color: #111827;
      }
      .lesson-page-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
      }
      .lesson-kicker-badge {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 6px 11px;
        border-radius: 999px;
        font-size: 11px;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 800;
        background: #e5e7eb;
        color: #111827;
      }
      .lesson-kicker-badge.is-free {
        background: #dff4e5;
        color: #1f7a36;
      }
      .lesson-page.dir-salsa .lesson-kicker-badge,
      .lesson-page.dir-salsa .lesson-tip-card,
      .lesson-page.dir-salsa .lesson-audio-card {
        background: #c7d2ff;
        color: #1e1a4d;
      }
      .lesson-page.dir-bachata .lesson-kicker-badge,
      .lesson-page.dir-bachata .lesson-tip-card,
      .lesson-page.dir-bachata .lesson-audio-card {
        background: #f8d5ac;
        color: #441306;
      }
      .lesson-page.dir-kizomba .lesson-kicker-badge,
      .lesson-page.dir-kizomba .lesson-tip-card,
      .lesson-page.dir-kizomba .lesson-audio-card {
        background: #dec5f6;
        color: #3c0366;
      }
      .lesson-description-block {
        margin-top: 12px;
      }
      .lesson-page-description {
        margin: 8px 0 0;
        color: #374151;
        line-height: 1.55;
        font-size: 15px;
      }
      .lesson-tip-card {
        margin-top: 20px;
        border: 0;
        border-radius: 14px;
        background: #c7d2ff;
        padding: 13px 14px 11px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 4px 12px rgba(16, 24, 40, 0.06);
      }
      .lesson-tip-main {
        min-width: 0;
      }
      .lesson-tip-title {
        font-size: 17px;
        line-height: 1.25;
        font-weight: 700;
        color: #1f2937;
      }
      .lesson-tip-text {
        margin-top: 4px;
        font-size: 14px;
        line-height: 1.45;
        color: #334155;
      }
      .lesson-audio-card {
        margin-top: 12px;
        border: 0;
        border-radius: 14px;
        background: #c7d2ff;
        padding: 13px 14px 11px;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 4px 12px rgba(16, 24, 40, 0.06);
        text-decoration: none;
        color: inherit;
      }
      .lesson-audio-card.is-clickable {
        cursor: pointer;
      }
      .lesson-audio-main {
        min-width: 0;
        flex: 1;
      }
      .lesson-audio-name {
        font-size: 16px;
        line-height: 1.25;
        color: #1f2937;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .lesson-audio-badges {
        margin-top: 6px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        width: 100%;
      }
      .lesson-audio-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 11px;
        line-height: 1.3;
        font-weight: 700;
        color: #45556c;
        background: rgba(255, 255, 255, 0.6);
        border: 0;
        text-decoration: none;
      }
      .lesson-next-btn {
        margin-top: 18px;
        width: 100%;
        height: 50px;
        border: 0;
        text-align: center;
        border-radius: var(--radius-md);
        font-size: 18px;
        line-height: 1.1;
        font-family: var(--font-body);
        font-weight: 700;
        color: #f3f5ff;
        background: #111b34;
        box-shadow: 0 4px 12px rgba(17, 27, 52, 0.2);
      }
      .row { display: flex; gap: 8px; align-items: center; }
      .row > * { flex: 1; }
      .lesson-row, .user-row {
        margin-bottom: 8px;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid rgba(38, 30, 20, 0.12);
        background: rgba(255, 255, 255, 0.7);
      }
      .pill {
        display: inline-block;
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 700;
        color: #fff;
        background: #6a6171;
      }
      .pill.free { background: linear-gradient(135deg, #2d9050, #2f7f95); }
      .pill.paid { background: linear-gradient(135deg, #8e3a55, #a35333); }
      .role-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
      .mode-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
      .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 46px; }
      .switch input { opacity: 0; width: 0; height: 0; }
      .slider {
        position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #d7d0c7;
        transition: 0.2s; border-radius: 999px;
      }
      .slider:before {
        position: absolute; content: ""; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff;
        transition: 0.2s; border-radius: 50%;
        box-shadow: 0 1px 3px rgba(42, 31, 20, 0.22);
      }
      .switch input:checked + .slider { background-color: #f24f88; }
      .switch input:checked + .slider:before { transform: translateX(20px); }
      hr {
        border: 0;
        height: 1px;
        margin: 14px 0;
        background: rgba(43, 30, 17, 0.12);
      }
      a { color: #007ea1; }
      @keyframes cardIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
      }
      @keyframes overlaySheetIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }
      @keyframes overlaySheetTopIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
      }
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
      @media (min-width: 860px) {
        .catalog-courses-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 430px) {
        :root { --page-gutter: 16px; }
      }
      @media (max-width: 700px) {
        body { padding: 0; }
        .card { padding: 14px; border-radius: 14px; }
        button, input, select, textarea { font-size: 16px; }
        .lesson-hero-title { font-size: 36px; }
        .lesson-card-title { font-size: 26px; }
        .course-hero-title { font-size: clamp(34px, 8vw, 44px); }
        .course-cta { font-size: 18px; }
      }