:root {
        --ink: #070d2b;
        --muted: #5d668d;
        --line: #e0e4f1;
        --line-strong: #cfd5e8;
        --page: #f6f7fb;
        --surface: #ffffff;
        --purple: #6040ff;
        --purple-dark: #4528dc;
        --purple-soft: #f0ebff;
        --purple-soft-strong: #e8e1ff;
        --green: #28b887;
        --shadow: 0 28px 86px rgba(45, 49, 88, 0.12);
        --soft-shadow: 0 16px 42px rgba(39, 44, 82, 0.08);
        --radius: 8px;
      }

      * {
        box-sizing: border-box;
      }

      body {
        min-height: 100vh;
        margin: 0;
        color: var(--ink);
        background:
          radial-gradient(circle at 86% 17%, rgba(96, 64, 255, 0.16), transparent 25%),
          radial-gradient(circle at 9% 8%, rgba(36, 184, 135, 0.08), transparent 26%),
          linear-gradient(180deg, #fbfcff 0%, #f5f6fb 100%);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        letter-spacing: 0;
      }

      body.modal-open {
        overflow: hidden;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      button {
        font: inherit;
      }

      img {
        display: block;
        max-width: 100%;
      }

      .watch-shell {
        width: min(1740px, calc(100% - 20px));
        min-height: calc(100vh - 20px);
        margin: 10px auto;
        padding: 14px 22px 22px;
        border: 1px solid rgba(223, 226, 242, 0.9);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: var(--shadow);
      }

      .watch-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        min-height: 58px;
        padding-bottom: 8px;
      }

      .watch-brand {
        display: inline-flex;
        align-items: center;
        margin-left: -8px;
      }

      .watch-brand img {
        width: 192px;
        height: auto;
      }

      .watch-logo-dark {
        display: none;
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .header-icon,
      .header-avatar {
        width: 42px;
        height: 42px;
        display: inline-grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: #fff;
        color: #111836;
        box-shadow: 0 10px 24px rgba(29, 35, 77, 0.05);
      }

      .header-avatar {
        overflow: hidden;
      }

      .header-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .header-icon {
        position: relative;
        cursor: pointer;
      }

      .header-icon.has-notifications {
        color: var(--purple);
        border-color: #c9c0ff;
      }

      .notification-count {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 19px;
        height: 19px;
        display: inline-grid;
        place-items: center;
        padding: 0 5px;
        border: 2px solid #fff;
        border-radius: 999px;
        color: #fff;
        background: #ef3d68;
        font-size: 10px;
        line-height: 1;
        font-weight: 900;
        transition: opacity 160ms ease, transform 160ms ease;
      }

      .notification-count[hidden] {
        display: none;
      }

      .notification-list {
        position: fixed;
        top: 84px;
        right: max(18px, calc((100vw - 1740px) / 2 + 26px));
        z-index: 40;
        width: min(370px, calc(100vw - 32px));
        display: grid;
        gap: 10px;
        pointer-events: none;
      }

      .notification-list[hidden] {
        display: none;
      }

      .notification-toast {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 46px rgba(34, 39, 78, 0.14);
        pointer-events: auto;
      }

      .notification-toast i {
        width: 40px;
        height: 40px;
        display: inline-grid;
        place-items: center;
        border-radius: 8px;
        color: var(--purple);
        background: var(--purple-soft);
        font-size: 18px;
      }

      .notification-toast strong {
        display: block;
        color: var(--ink);
        font-size: 14px;
        line-height: 1.25;
        font-weight: 900;
      }

      .notification-toast p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
        font-weight: 700;
      }

      .notification-toast time {
        display: block;
        margin-top: 8px;
        color: #8791b1;
        font-size: 11px;
        font-weight: 800;
      }

      .header-icon:hover,
      .header-icon:focus-visible {
        color: var(--purple);
        border-color: #c9c0ff;
      }

      .header-avatar {
        color: #fff;
        border-color: transparent;
        background: linear-gradient(145deg, var(--purple), var(--purple-dark));
        font-size: 14px;
        font-weight: 900;
      }

      .course-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
        margin-top: 2px;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 255, 0.9)),
          #fff;
      }

      .course-identity {
        display: flex;
        align-items: center;
        gap: 18px;
        min-width: 0;
      }

      .back-button {
        width: 48px;
        height: 48px;
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        border: 1px solid #e3e6f1;
        border-radius: 12px;
        color: #121739;
        background: #fff;
        font-size: 22px;
        box-shadow: 0 10px 24px rgba(52, 58, 103, 0.05);
        cursor: pointer;
      }

      .back-button:hover,
      .back-button:focus-visible {
        color: var(--purple);
        border-color: #c8c0ff;
      }

      .course-icon {
        width: 64px;
        height: 64px;
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 16px;
        color: #fff;
        background: linear-gradient(145deg, #855cff 0%, #622cff 52%, #6f26ea 100%);
        box-shadow: 0 17px 36px rgba(96, 64, 255, 0.22);
        font-size: 32px;
      }

      .course-heading {
        min-width: 0;
      }

      .course-heading h1 {
        margin: 0;
        color: #081034;
        font-size: clamp(1.55rem, 2vw, 2.1rem);
        line-height: 1.12;
        font-weight: 900;
      }

      .teacher-link {
        display: inline-flex;
        margin-top: 8px;
        color: var(--purple);
        font-size: 15px;
        font-weight: 800;
      }

      .watch-teacher-profile-link {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        margin-top: 14px;
        padding: 0 13px;
        border: 1px solid rgba(99, 60, 255, 0.22);
        border-radius: var(--radius);
        color: var(--purple);
        background: #f5f2ff;
        font-size: 13px;
        font-weight: 850;
      }

      .lesson-meta {
        display: flex;
        align-items: center;
        gap: 28px;
        margin-top: 15px;
        color: #606994;
        font-size: 15px;
        font-weight: 700;
      }

      .lesson-meta span {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        white-space: nowrap;
      }

      .lesson-meta i {
        color: var(--purple);
        font-size: 20px;
      }

      .course-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
      }

      .course-actions form {
        display: inline-flex;
        margin: 0;
      }

      .course-action {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 15px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        color: #101637;
        background: #fff;
        font-size: 13px;
        font-weight: 850;
        white-space: nowrap;
        cursor: pointer;
      }

      .course-action.primary {
        color: #fff;
        border-color: var(--purple);
        background: var(--purple);
        box-shadow: 0 12px 26px rgba(96, 64, 255, 0.22);
      }

      .course-action:hover,
      .course-action:focus-visible {
        color: var(--purple);
        border-color: #c9c0ff;
      }

      .course-action.primary:hover,
      .course-action.primary:focus-visible {
        color: #fff;
        border-color: var(--purple-dark);
        background: var(--purple-dark);
      }

      .watch-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(350px, 25vw, 410px);
        gap: 24px;
        align-items: start;
        margin-top: 18px;
      }

      .video-frame {
        overflow: hidden;
        border: 1px solid rgba(7, 13, 43, 0.12);
        border-radius: 16px;
        background: #101318;
        box-shadow: 0 22px 54px rgba(24, 29, 67, 0.18);
      }

      .video-frame video {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
      }

      .lesson-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px;
        align-items: center;
        margin-top: 14px;
        padding: 14px 16px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 12px 32px rgba(38, 44, 82, 0.06);
      }

      .lesson-summary h2 {
        margin: 0;
        color: #080f2d;
        font-size: 16px;
        line-height: 1.25;
        font-weight: 900;
      }

      .lesson-summary p {
        margin: 5px 0 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
        font-weight: 650;
      }

      .summary-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .summary-actions button {
        width: 39px;
        height: 39px;
        display: inline-grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        color: #111836;
        background: #fff;
        cursor: pointer;
      }

      .summary-actions button:hover,
      .summary-actions button:focus-visible {
        color: var(--purple);
        border-color: #c9c0ff;
      }

      .lesson-tabs {
        overflow: hidden;
        margin-top: 14px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        box-shadow: var(--soft-shadow);
      }

      .tab-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        border-bottom: 1px solid var(--line);
      }

      .tab-button {
        position: relative;
        min-height: 50px;
        padding: 0 14px;
        border: 0;
        color: #676f9b;
        background: #fbfcff;
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
        cursor: pointer;
      }

      .tab-button.is-active {
        color: var(--purple);
      }

      .tab-button.is-active::after {
        content: "";
        position: absolute;
        left: 21px;
        right: 21px;
        bottom: 0;
        height: 3px;
        border-radius: 99px 99px 0 0;
        background: var(--purple);
      }

      .tab-panel[hidden] {
        display: none;
      }

      .suggested-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        align-items: stretch;
        gap: 14px;
        padding: 16px;
      }

      .suggested-card,
      .suggested-ad-card,
      .suggested-empty,
      .book-card {
        min-width: 0;
      }

      .suggested-ad-card,
      .suggested-empty {
        overflow: hidden;
        min-height: 100%;
        padding: 12px;
        border: 1px solid #eaecf5;
        border-radius: var(--radius);
        background: #fff;
      }

      .suggested-ad-card iframe {
        width: 100%;
        max-width: 100%;
        min-height: 250px;
        display: block;
        margin: 0 auto;
        border: 0;
      }

      .suggested-empty {
        display: grid;
        align-content: center;
        gap: 8px;
      }

      .suggested-empty h2 {
        margin: 0;
        color: var(--ink);
        font-size: 15px;
        line-height: 1.35;
        font-weight: 900;
      }

      .suggested-empty p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55;
        font-weight: 650;
      }

      .suggested-downloads {
        min-width: 0;
        display: flex;
        align-items: center;
      }

      .suggested-downloads .book-button {
        margin-top: 0;
      }

      .suggested-card {
        display: flex;
        min-height: 100%;
        flex-direction: column;
        padding: 10px;
        border: 1px solid #eaecf5;
        border-radius: var(--radius);
        background: #fff;
        transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
      }

      .suggested-card:hover,
      .suggested-card:focus-visible {
        transform: translateY(-2px);
        border-color: #cfc8ff;
        box-shadow: 0 16px 34px rgba(61, 48, 138, 0.1);
      }

      .suggested-card h2 {
        margin: 10px 2px 0;
        color: #111837;
        font-size: 13px;
        line-height: 1.3;
        font-weight: 850;
        order: 2;
      }

      .suggested-card img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        border-radius: 6px;
      }

      .book-card {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 12px;
        align-items: start;
        padding: 12px;
        border: 1px solid #eaecf5;
        border-radius: var(--radius);
        background:
          linear-gradient(135deg, #ffffff 0%, #fbfcff 100%);
      }

      .book-card img {
        width: 118px;
        border-radius: 4px;
        box-shadow: 0 12px 28px rgba(14, 19, 56, 0.16);
      }

      .book-copy {
        min-width: 0;
        padding-top: 4px;
      }

      .book-copy h2 {
        margin: 0 0 6px;
        color: #0b1232;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 900;
      }

      .book-copy p {
        margin: 0;
        color: #636b91;
        font-size: 11px;
        line-height: 1.55;
        font-weight: 650;
      }

      .book-button {
        grid-column: 1 / -1;
        justify-self: center;
        min-width: 232px;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border: 1px solid var(--purple);
        border-radius: var(--radius);
        color: var(--purple);
        background: #fff;
        font-size: 13px;
        font-weight: 850;
      }

      .tab-content-panel {
        padding: 16px;
      }

      .tab-card {
        border: 1px solid #eaecf5;
        border-radius: var(--radius);
        background: #fff;
      }

      .tab-card h2,
      .tab-card h3 {
        margin: 0;
        color: #0b1232;
        line-height: 1.25;
        font-weight: 900;
      }

      .tab-card h2 {
        font-size: 18px;
      }

      .tab-card h3 {
        font-size: 14px;
      }

      .tab-card p {
        margin: 8px 0 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.65;
        font-weight: 650;
      }

      .description-grid,
      .overview-grid,
      .instructor-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
        gap: 14px;
      }

      .description-main,
      .overview-main,
      .instructor-main {
        padding: 18px;
      }

      .description-side,
      .overview-side,
      .instructor-side {
        padding: 18px;
        background: #fbfcff;
        border-left: 1px solid #eaecf5;
      }

      .outcome-list,
      .module-list,
      .credential-list {
        display: grid;
        gap: 10px;
        margin: 14px 0 0;
        padding: 0;
        list-style: none;
      }

      .outcome-list li,
      .module-list li,
      .credential-list li {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        color: #20294c;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 760;
      }

      .outcome-list i,
      .module-list i,
      .credential-list i {
        color: var(--purple);
        font-size: 18px;
        line-height: 1;
      }

      .resource-list {
        display: grid;
        gap: 10px;
        margin-top: 14px;
      }

      .resource-item {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 8px 10px;
        border: 1px solid #eaecf5;
        border-radius: var(--radius);
        background: #fff;
        color: #1b2447;
        font-size: 13px;
        font-weight: 820;
      }

      .resource-item i {
        color: var(--green);
        font-size: 18px;
      }

      .resource-item span:last-child {
        color: var(--purple);
        font-size: 12px;
      }

      .questions-panel {
        display: grid;
        gap: 12px;
      }

      .question-card {
        padding: 16px;
      }

      .question-topline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
      }

      .question-author {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: #172143;
        font-size: 13px;
        font-weight: 900;
      }

      .question-avatar,
      .instructor-avatar {
        display: inline-grid;
        place-items: center;
        color: #fff;
        border-radius: 50%;
        background: linear-gradient(145deg, var(--purple), var(--purple-dark));
        font-weight: 900;
      }

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

      .question-card h3 {
        margin-top: 0;
      }

      .question-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
      }

      .question-replies {
        display: grid;
        gap: 10px;
        margin-top: 14px;
        padding-left: 18px;
        border-left: 2px solid var(--purple-soft-strong);
      }

      .reply-card {
        padding: 12px;
        border: 1px solid #eaecf5;
        border-radius: var(--radius);
        background: #fbfcff;
      }

      .reply-card p {
        margin-top: 6px;
      }

      .question-actions button,
      .question-actions a,
      .ask-button {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        color: #172143;
        background: #fff;
        font-size: 12px;
        font-weight: 850;
        cursor: pointer;
      }

      .question-actions a {
        text-decoration: none;
      }

      .ask-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        padding: 16px;
      }

      .ask-button {
        color: #fff;
        border-color: var(--purple);
        background: var(--purple);
      }

      .stat-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 16px;
      }

      .overview-stat {
        padding: 14px;
        border: 1px solid #eaecf5;
        border-radius: var(--radius);
        background: #fbfcff;
      }

      .overview-stat strong {
        display: block;
        color: var(--purple);
        font-size: 20px;
        line-height: 1.1;
        font-weight: 900;
      }

      .overview-stat span {
        display: block;
        margin-top: 6px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 760;
      }

      .instructor-head {
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .instructor-avatar {
        width: 58px;
        height: 58px;
        flex: 0 0 auto;
        overflow: hidden;
        font-size: 18px;
      }

      .instructor-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .instructor-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
      }

      .instructor-meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        padding: 0 10px;
        border: 1px solid #eaecf5;
        border-radius: 999px;
        color: #1b2447;
        background: #fff;
        font-size: 12px;
        font-weight: 820;
      }

      .instructor-meta i {
        color: var(--purple);
      }

      .modal-layer {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: grid;
        place-items: center;
        padding: 22px;
        background: rgba(8, 12, 30, 0.48);
        backdrop-filter: blur(8px);
      }

      .modal-layer[hidden] {
        display: none;
      }

      .modal-card {
        width: min(100%, 520px);
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 28px 86px rgba(8, 12, 30, 0.25);
      }

      .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 18px 14px;
        border-bottom: 1px solid var(--line);
      }

      .modal-header h2 {
        margin: 0;
        color: var(--ink);
        font-size: 18px;
        line-height: 1.25;
        font-weight: 900;
      }

      .modal-close {
        width: 38px;
        height: 38px;
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        border: 1px solid var(--line);
        border-radius: 50%;
        color: #111836;
        background: #fff;
        cursor: pointer;
      }

      .modal-body {
        padding: 18px;
      }

      .modal-body p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.65;
        font-weight: 650;
      }

      .modal-form {
        display: grid;
        gap: 14px;
      }

      .field-group {
        display: grid;
        gap: 7px;
      }

      .field-group label {
        color: #111836;
        font-size: 13px;
        font-weight: 850;
      }

      .field-group input,
      .field-group textarea {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        color: var(--ink);
        background: #fff;
        font: inherit;
        font-size: 14px;
        font-weight: 650;
      }

      .field-group input {
        min-height: 44px;
        padding: 0 12px;
      }

      .field-group textarea {
        min-height: 126px;
        resize: vertical;
        padding: 12px;
        line-height: 1.5;
      }

      .modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 18px;
      }

      .modal-button {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        color: #111836;
        background: #fff;
        font-size: 13px;
        font-weight: 850;
        cursor: pointer;
      }

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

      .desktop-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        color: #fff;
        background: var(--purple);
        border-radius: var(--radius);
        min-height: 42px;
        padding: 0 14px;
        font-size: 13px;
        font-weight: 850;
      }

      .interstitial-card {
        width: min(100%, 620px);
      }

      .interstitial-body {
        display: grid;
        gap: 18px;
      }

      .interstitial-preview {
        display: block;
        overflow: hidden;
        border-radius: 14px;
        background: #f3f4fb;
        aspect-ratio: 16 / 9;
      }

      .interstitial-preview img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .interstitial-copy {
        display: grid;
        gap: 7px;
      }

      .interstitial-copy span {
        color: var(--purple);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .interstitial-copy h3 {
        margin: 0;
        color: var(--ink);
        font-size: 23px;
        line-height: 1.2;
        font-weight: 900;
      }

      .interstitial-actions {
        margin-top: 2px;
      }

      .course-panel {
        overflow: hidden;
        position: sticky;
        top: 14px;
        margin-top: 0;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: var(--soft-shadow);
      }

      .panel-header {
        padding: 18px 16px 0;
        background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
      }

      .panel-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

      .panel-title-copy {
        min-width: 0;
      }

      .panel-title-row h2 {
        margin: 0;
        color: #0e1534;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 900;
      }

      .panel-title-row span {
        display: block;
        margin-top: 6px;
        color: #666b98;
        font-size: 13px;
        font-weight: 750;
        white-space: nowrap;
      }

      .panel-size-toggle {
        width: 36px;
        height: 36px;
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        border: 1px solid var(--line);
        border-radius: 50%;
        color: #111836;
        background: #fff;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(29, 35, 77, 0.05);
      }

      .panel-size-toggle:hover,
      .panel-size-toggle:focus-visible {
        color: var(--purple);
        border-color: #c9c0ff;
      }

      .progress-track {
        position: relative;
        height: 5px;
        margin-top: 15px;
        overflow: hidden;
        border-radius: 99px;
        background: #e7e9f3;
      }

      .progress-track::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: var(--watch-progress, 0%);
        height: 5px;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--purple), #22b78c);
      }

      .lesson-section {
        padding: 16px 14px 0;
      }

      .lesson-stack {
        overflow: visible;
      }

      .course-panel.is-compact .lesson-stack {
        max-height: 286px;
        overflow-y: auto;
        border-bottom: 1px solid var(--line);
        scrollbar-gutter: stable;
      }

      .course-panel.is-compact .lesson-stack::-webkit-scrollbar {
        width: 8px;
      }

      .course-panel.is-compact .lesson-stack::-webkit-scrollbar-track {
        background: transparent;
      }

      .course-panel.is-compact .lesson-stack::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #c8cde1;
      }

      .lesson-section h3 {
        margin: 0 0 12px;
        color: #151b3d;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 900;
      }

      .lesson-row {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr) auto 18px;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 10px;
        border-bottom: 1px solid #e5e7f0;
        color: #636b98;
        font-size: 12px;
        font-weight: 720;
      }

      .lesson-row.is-active {
        min-height: 48px;
        border: 0;
        border-radius: var(--radius);
        color: var(--purple);
        background: linear-gradient(90deg, var(--purple-soft-strong) 0%, #f5f1ff 100%);
      }

      .lesson-row:hover,
      .lesson-row:focus-visible {
        color: var(--purple);
        background: #faf9ff;
      }

      .lesson-row.is-active:hover,
      .lesson-row.is-active:focus-visible {
        background: linear-gradient(90deg, var(--purple-soft-strong) 0%, #f5f1ff 100%);
      }

      .lesson-row.is-locked {
        cursor: default;
        color: #8a91b1;
        background: #fbfcff;
      }

      .lesson-row.is-locked .play-ring {
        color: #98a0bd;
        border-color: #cfd3e3;
      }

      .lesson-row.resource {
        grid-template-columns: 26px minmax(0, 1fr) auto;
      }

      .play-ring {
        width: 19px;
        height: 19px;
        display: inline-grid;
        place-items: center;
        color: var(--purple);
        border: 2px solid var(--purple);
        border-radius: 50%;
        font-size: 9px;
      }

      .file-icon {
        color: var(--green);
        font-size: 19px;
      }

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

      .lesson-time {
        color: #626b98;
        white-space: nowrap;
      }

      .lesson-row a {
        color: var(--purple);
        font-weight: 850;
      }

      .check-box {
        width: 15px;
        height: 15px;
        display: inline-grid;
        place-items: center;
        border: 1px solid #cfd3e3;
        border-radius: 2px;
        color: transparent;
        font-size: 11px;
      }

      .check-box.is-done {
        color: var(--purple);
        border-color: var(--purple);
      }

      .view-all {
        width: calc(100% - 24px);
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 10px 12px 12px;
        border: 0;
        border-radius: 7px;
        color: var(--purple);
        background: #f7f5fe;
        font-size: 13px;
        font-weight: 820;
        cursor: pointer;
      }

      .view-all:hover,
      .view-all:focus-visible {
        background: #eee9ff;
      }

      .view-all i {
        transition: transform 160ms ease;
      }

      body.theme-dark {
        --ink: #f4f7ff;
        --muted: #aeb8d8;
        --line: rgba(144, 154, 194, 0.26);
        --line-strong: rgba(166, 176, 216, 0.34);
        --surface: #12182b;
        --purple: #8b72ff;
        --purple-dark: #7357ff;
        --purple-soft: rgba(139, 114, 255, 0.14);
        --purple-soft-strong: rgba(139, 114, 255, 0.24);
        --green: #42d2a0;
        --shadow: 0 28px 86px rgba(0, 0, 0, 0.34);
        --soft-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
        background:
          radial-gradient(circle at 86% 17%, rgba(139, 114, 255, 0.2), transparent 25%),
          radial-gradient(circle at 9% 8%, rgba(66, 210, 160, 0.1), transparent 26%),
          linear-gradient(180deg, #070b16 0%, #0b1020 100%);
      }

      body.theme-dark .watch-shell,
      body.theme-dark .course-topbar,
      body.theme-dark .lesson-summary,
      body.theme-dark .lesson-tabs,
      body.theme-dark .suggested-card,
      body.theme-dark .suggested-ad-card,
      body.theme-dark .suggested-empty,
      body.theme-dark .book-card,
      body.theme-dark .tab-card,
      body.theme-dark .notification-toast,
      body.theme-dark .reply-card,
      body.theme-dark .modal-card,
      body.theme-dark .resource-item,
      body.theme-dark .overview-stat,
      body.theme-dark .course-panel {
        background: rgba(17, 23, 41, 0.92);
        border-color: var(--line);
      }

      body.theme-dark .watch-brand img {
        opacity: 0.94;
      }

      body.theme-dark .watch-logo-light {
        display: none;
      }

      body.theme-dark .watch-logo-dark {
        display: block;
      }

      body.theme-dark .header-icon,
      body.theme-dark .back-button,
      body.theme-dark .course-action,
      body.theme-dark .summary-actions button,
      body.theme-dark .panel-size-toggle,
      body.theme-dark .book-button,
      body.theme-dark .view-all {
        color: var(--ink);
        background: rgba(22, 29, 52, 0.88);
        border-color: var(--line);
      }

      body.theme-dark .notification-count {
        border-color: #12182b;
      }

      body.theme-dark .header-icon:hover,
      body.theme-dark .header-icon:focus-visible,
      body.theme-dark .header-icon.has-notifications,
      body.theme-dark .back-button:hover,
      body.theme-dark .back-button:focus-visible,
      body.theme-dark .summary-actions button:hover,
      body.theme-dark .summary-actions button:focus-visible,
      body.theme-dark .panel-size-toggle:hover,
      body.theme-dark .panel-size-toggle:focus-visible {
        color: var(--purple);
        border-color: rgba(139, 114, 255, 0.58);
      }

      body.theme-dark .course-heading h1,
      body.theme-dark .lesson-summary h2,
      body.theme-dark .panel-title-row h2,
      body.theme-dark .lesson-section h3,
      body.theme-dark .tab-card h2,
      body.theme-dark .tab-card h3,
      body.theme-dark .notification-toast strong,
      body.theme-dark .modal-header h2,
      body.theme-dark .field-group label,
      body.theme-dark .question-author,
      body.theme-dark .outcome-list li,
      body.theme-dark .module-list li,
      body.theme-dark .credential-list li,
      body.theme-dark .resource-item,
      body.theme-dark .instructor-meta span,
      body.theme-dark .book-copy h2,
      body.theme-dark .suggested-empty h2,
      body.theme-dark .suggested-card h2 {
        color: var(--ink);
      }

      body.theme-dark .lesson-meta,
      body.theme-dark .lesson-summary p,
      body.theme-dark .panel-title-row span,
      body.theme-dark .tab-card p,
      body.theme-dark .notification-toast p,
      body.theme-dark .modal-body p,
      body.theme-dark .book-copy p,
      body.theme-dark .suggested-empty p,
      body.theme-dark .lesson-time,
      body.theme-dark .lesson-row {
        color: var(--muted);
      }

      body.theme-dark .notification-toast time {
        color: #8794bd;
      }

      body.theme-dark .description-side,
      body.theme-dark .overview-side,
      body.theme-dark .instructor-side,
      body.theme-dark .tab-list,
      body.theme-dark .overview-stat {
        background: rgba(14, 20, 36, 0.78);
        border-color: var(--line);
      }

      body.theme-dark .question-actions button,
      body.theme-dark .question-actions a,
      body.theme-dark .modal-close,
      body.theme-dark .modal-button,
      body.theme-dark .instructor-meta span {
        color: var(--ink);
        background: rgba(22, 29, 52, 0.88);
        border-color: var(--line);
      }

      body.theme-dark .field-group input,
      body.theme-dark .field-group textarea {
        color: var(--ink);
        background: rgba(22, 29, 52, 0.88);
        border-color: var(--line);
      }

      body.theme-dark .modal-button.primary,
      body.theme-dark .desktop-link {
        color: #fff;
        border-color: var(--purple-dark);
        background: var(--purple-dark);
      }

      body.theme-dark .course-icon,
      body.theme-dark .header-avatar,
      body.theme-dark .course-action.primary {
        box-shadow: 0 14px 32px rgba(139, 114, 255, 0.24);
      }

      body.theme-dark .course-action.primary {
        color: #fff;
        border-color: var(--purple-dark);
        background: var(--purple-dark);
      }

      body.theme-dark .tab-button {
        color: var(--muted);
        background: rgba(14, 20, 36, 0.96);
      }

      body.theme-dark .tab-button.is-active,
      body.theme-dark .teacher-link,
      body.theme-dark .watch-teacher-profile-link,
      body.theme-dark .book-button,
      body.theme-dark .lesson-row.is-active,
      body.theme-dark .lesson-row:hover,
      body.theme-dark .lesson-row:focus-visible,
      body.theme-dark .view-all {
        color: var(--purple);
      }

      body.theme-dark .lesson-row {
        border-bottom-color: var(--line);
      }

      body.theme-dark .lesson-row:hover,
      body.theme-dark .lesson-row:focus-visible {
        background: rgba(139, 114, 255, 0.08);
      }

      body.theme-dark .lesson-row.is-active,
      body.theme-dark .lesson-row.is-active:hover,
      body.theme-dark .lesson-row.is-active:focus-visible {
        background: linear-gradient(90deg, rgba(139, 114, 255, 0.24), rgba(139, 114, 255, 0.1));
      }

      body.theme-dark .panel-header {
        background: linear-gradient(180deg, rgba(19, 26, 47, 0.98), rgba(17, 23, 41, 0.92));
      }

      body.theme-dark .progress-track {
        background: rgba(151, 160, 198, 0.22);
      }

      body.theme-dark .check-box {
        border-color: rgba(172, 181, 220, 0.42);
      }

      body.theme-dark .video-frame {
        border-color: rgba(216, 221, 244, 0.16);
        box-shadow: 0 22px 56px rgba(0, 0, 0, 0.32);
      }

      @media (max-width: 1180px) {
        .watch-grid {
          grid-template-columns: minmax(0, 1fr);
        }

        .course-panel {
          max-width: none;
          position: static;
          margin-top: 0;
        }

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

        .book-card {
          grid-column: 1 / -1;
        }

        .description-grid,
        .overview-grid,
        .instructor-grid {
          grid-template-columns: minmax(0, 1fr);
        }

        .description-side,
        .overview-side,
        .instructor-side {
          border-left: 0;
          border-top: 1px solid #eaecf5;
        }
      }

      @media (max-width: 760px) {
        .watch-shell {
          width: min(100% - 24px, 680px);
          min-height: calc(100vh - 24px);
          margin: 12px auto;
          padding: 18px 14px;
          border-radius: 16px;
        }

        .watch-brand img {
          width: 166px;
        }

        .watch-header {
          min-height: 48px;
          padding-bottom: 0;
        }

        .header-actions {
          gap: 6px;
        }

        .header-icon {
          width: 38px;
          height: 38px;
        }

        .notification-list {
          top: 76px;
          right: 16px;
        }

        .header-avatar {
          display: none;
        }

        .course-topbar {
          display: grid;
          grid-template-columns: 1fr;
          gap: 14px;
          margin-top: 18px;
          padding: 14px;
        }

        .course-identity {
          display: grid;
          grid-template-columns: 48px 62px minmax(0, 1fr);
          gap: 12px;
        }

        .course-icon {
          width: 62px;
          height: 62px;
          border-radius: 15px;
          font-size: 31px;
        }

        .course-heading h1 {
          font-size: 1.32rem;
        }

        .course-actions {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
        }

        .course-actions form {
          width: 100%;
        }

        .course-action {
          width: 100%;
        }

        .lesson-meta {
          flex-wrap: wrap;
          gap: 10px 16px;
          font-size: 13px;
        }

        .watch-grid {
          gap: 22px;
          margin-top: 20px;
        }

        .lesson-summary {
          grid-template-columns: 1fr;
          gap: 12px;
        }

        .summary-actions {
          justify-content: flex-start;
        }

        .tab-list {
          display: flex;
          overflow-x: auto;
        }

        .tab-button {
          min-width: max-content;
          padding: 0 16px;
        }

        .suggested-grid {
          grid-template-columns: minmax(0, 1fr);
          padding: 16px;
        }

        .book-card {
          grid-template-columns: 100px minmax(0, 1fr);
        }

        .book-card img {
          width: 100px;
        }

        .book-button {
          width: 100%;
          min-width: 0;
        }

        .tab-content-panel {
          padding: 14px;
        }

        .ask-card {
          grid-template-columns: 1fr;
        }

        .ask-button {
          width: 100%;
        }

        .stat-grid {
          grid-template-columns: 1fr;
        }

        .instructor-head {
          align-items: flex-start;
        }

        .lesson-row {
          grid-template-columns: 24px minmax(0, 1fr) auto;
        }

        .lesson-row:not(.resource) {
          grid-template-columns: 24px minmax(0, 1fr) auto;
        }

        .lesson-row .check-box {
          display: none;
        }
      }

      @media (max-width: 480px) {
        .back-button {
          width: 48px;
          height: 48px;
        }

        .course-identity {
          grid-template-columns: 48px minmax(0, 1fr);
        }

        .course-icon {
          display: none;
        }

        .video-frame video {
          aspect-ratio: 16 / 10;
        }

        .book-copy p {
          line-height: 1.55;
        }
      }