@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");
          :root {
            color-scheme: light;
            --bg: #f8fafc;
            --surface: #ffffff;
            --surface-soft: #f2f5fa;
            --line: #e3e8ef;
            --text: #111827;
            --muted: #667085;
            --accent: #0da5a8;
            --accent-dark: #156f74;
            --accent-soft: #e9f8f8;
            --accent-2: #0c1323;
            --blue: #2563eb;
            --blue-soft: #eff6ff;
            --gold: #f4b93f;
            --gold-soft: #fff8e6;
            --ink: #111827;
            --guide-gold: #b8943e;
            --guide-highlight: #f4fcd9;
            --guide-panel: #f2f5fa;
            --danger: #b91c1c;
            --warn: #b45309;
            --ok: #15803d;
            --shadow: 0 8px 22px rgba(15, 45, 52, 0.055);
            --shadow-strong: 0 16px 36px rgba(15, 45, 52, 0.11);
            --focus-ring: rgba(13, 165, 168, 0.34);
          }
          * { box-sizing: border-box; }
          html, body {
            max-width: 100%;
            overflow-x: hidden;
          }
          body {
            margin: 0;
            min-height: 100vh;
            background: #f7fbfb;
            color: var(--text);
            font: 14px/1.5 Arial, Helvetica, sans-serif;
          }
          header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            min-width: 0;
            padding: 14px 22px;
            border-bottom: 1px solid var(--line);
            background: var(--surface);
            box-shadow: 0 1px 0 rgba(31, 37, 40, 0.02);
          }
          .brand {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
          }
          .brand-logo {
            width: 268px;
            height: 72px;
            object-fit: contain;
            object-position: left center;
          }
          .brand-copy {
            display: grid;
            gap: 2px;
            min-width: 0;
          }
          .brand-kicker {
            color: var(--accent-dark);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
          }
          h1 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0;
          }
          main {
            display: grid;
            grid-template-columns: 300px minmax(0, 1fr);
            min-width: 0;
            min-height: calc(100vh - 57px);
          }
          aside {
            border-right: 1px solid var(--line);
            background: #ffffff;
            padding: 16px;
          }
          section {
            min-width: 0;
            padding: 18px 22px 28px;
          }
          .toolbar {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            min-width: 0;
          }
          .auth-box {
            display: grid;
            gap: 8px;
            margin-bottom: 14px;
            padding: 12px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--surface);
          }
          .auth-box.compact {
            padding: 8px;
            border-color: rgba(21, 111, 116, 0.12);
            background: rgba(255, 255, 255, 0.78);
            box-shadow: none;
          }
          .auth-box.compact .auth-title {
            display: none;
          }
          .auth-box.compact #authMessage {
            color: #6b7a80;
            font-size: 12px;
            line-height: 1.35;
          }
          .auth-box.compact button {
            min-height: 32px;
            padding: 0 10px;
          }
          .auth-title {
            margin: 0;
            font-size: 14px;
            font-weight: 700;
          }
          .auth-login-fields {
            display: grid;
            gap: 8px;
          }
          .auth-session-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
          }
          .session-badge {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 0 10px;
            border: 1px solid var(--line);
            border-radius: 999px;
            color: var(--muted);
            background: var(--surface-soft);
          }
          button, select, input, textarea {
            min-height: 34px;
            border: 1px solid var(--line);
            border-radius: 6px;
            background: var(--surface);
            color: var(--text);
            font: inherit;
            transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
          }
          button {
            padding: 0 12px;
            cursor: pointer;
          }
          .button-like {
            min-height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 12px;
            border: 1px solid var(--line);
            border-radius: 6px;
            background: var(--surface);
            color: var(--text);
            text-decoration: none;
            font: inherit;
          }
          button.primary {
            border-color: var(--accent);
            background: var(--accent);
            color: #ffffff;
            box-shadow: 0 8px 18px rgba(0, 167, 173, 0.18);
          }
          button.primary:hover { background: var(--accent-dark); }
          button.ghost {
            background: transparent;
          }
          select, input, textarea {
            padding: 0 10px;
          }
          button:focus-visible,
          a:focus-visible,
          select:focus-visible,
          input:focus-visible,
          textarea:focus-visible,
          summary:focus-visible {
            outline: 3px solid var(--focus-ring);
            outline-offset: 3px;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 5px rgba(13, 165, 168, 0.08);
          }
          button:active,
          .external-link-button:active,
          .day-material-link:active {
            transform: translateY(1px);
          }
          textarea {
            min-height: 92px;
            width: 100%;
            padding: 10px;
            resize: vertical;
          }
          .tabs {
            display: grid;
            gap: 8px;
          }
          .tab,
          .assistant-nav-button {
            width: 100%;
            min-height: 40px;
            text-align: left;
            background: transparent;
          }
          .single-course-compact {
            position: relative;
            display: grid;
            gap: 6px;
            overflow: hidden;
            padding: 14px 16px 14px 18px;
            border: 1px solid rgba(21, 111, 116, 0.16);
            border-radius: 8px;
            background:
              linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(242, 251, 250, 0.96) 100%);
            box-shadow: 0 12px 26px rgba(12, 19, 35, 0.055);
          }
          .single-course-compact::before {
            content: "";
            position: absolute;
            inset: 10px auto 10px 0;
            width: 3px;
            border-radius: 0 4px 4px 0;
            background: var(--accent);
          }
          .single-course-compact span {
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
          }
          .single-course-compact strong {
            color: var(--ink);
            font-family: "Oswald", "Open Sans", Arial, Helvetica, sans-serif;
            font-size: 24px;
            font-weight: 500;
            line-height: 1.08;
          }
          .single-course-compact p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.4;
          }
          .course-list.single-assigned {
            grid-template-columns: 1fr;
          }
          .tab.active {
            border-color: var(--accent);
            background: var(--accent-soft);
            color: #075c61;
            font-weight: 700;
          }
          .panel {
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--surface);
            overflow: hidden;
            box-shadow: var(--shadow);
          }
          .panel + .panel { margin-top: 14px; }
          .panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-width: 0;
            padding: 12px 14px;
            border-bottom: 1px solid var(--line);
            background: var(--surface-soft);
          }
          .panel-title {
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0;
          }
          .panel-body { padding: 12px; }
          .metric-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(120px, 1fr));
            gap: 10px;
            margin-bottom: 14px;
          }
          .metric {
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 10px;
            background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%);
            transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
          }
          .metric:hover {
            border-color: rgba(13, 165, 168, 0.24);
            box-shadow: 0 10px 22px rgba(12, 19, 35, 0.045);
          }
          .metric span {
            display: block;
            color: var(--muted);
            font-size: 12px;
          }
          .metric strong {
            display: block;
            margin-top: 4px;
            font-size: 18px;
          }
          .admin-insight-panel {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 10px;
            margin-top: 2px;
            padding: 10px;
            border: 1px solid rgba(21, 111, 116, 0.12);
            border-radius: 8px;
            background: linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
            box-shadow: 0 10px 24px rgba(12, 19, 35, 0.035);
          }
          .admin-insight-panel > div {
            min-width: 0;
            display: grid;
            gap: 8px;
          }
          .admin-insight-panel.admin-wide > div {
            grid-column: 1 / -1;
          }
          .admin-insight-list,
          .admin-daily-list,
          .admin-course-breakdown {
            display: grid;
            gap: 7px;
            margin: 0;
            padding: 0;
            list-style: none;
          }
          .admin-insight-list li,
          .admin-daily-item,
          .admin-course-chip {
            display: grid;
            gap: 3px;
            min-width: 0;
            padding: 8px 9px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.92);
          }
          .admin-insight-list strong,
          .admin-daily-item strong,
          .admin-course-chip strong {
            color: var(--ink);
            font-size: 13px;
            line-height: 1.25;
          }
          .admin-daily-item {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: start;
            gap: 8px;
            border-color: rgba(13, 165, 168, 0.16);
            border-left: 3px solid var(--accent);
            background: #ffffff;
            transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
          }
          .admin-daily-item:hover {
            border-color: rgba(13, 165, 168, 0.32);
            box-shadow: 0 10px 22px rgba(12, 19, 35, 0.055);
          }
          .admin-daily-item > div {
            display: grid;
            gap: 3px;
            min-width: 0;
          }
          .admin-daily-item span,
          .admin-daily-item small {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
          }
          .admin-daily-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            padding: 0 11px;
            border-radius: 999px;
            background: rgba(13, 165, 168, 0.1);
            color: var(--accent-dark);
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
          }
          .admin-daily-item small {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          button.admin-daily-action {
            border: 0;
            cursor: pointer;
            font-family: inherit;
          }
          button.admin-daily-action:hover {
            background: rgba(13, 165, 168, 0.18);
          }
          .admin-daily-item.critical {
            border-color: rgba(180, 74, 54, 0.24);
            background: #fff8f6;
          }
          .admin-daily-item.critical .admin-daily-action {
            background: rgba(180, 74, 54, 0.1);
            color: #9b3925;
          }
          .material-audit-panel {
            display: grid;
            gap: 10px;
            margin-bottom: 14px;
            padding: 12px;
            border: 1px solid rgba(21, 111, 116, 0.14);
            border-radius: 8px;
            background: linear-gradient(180deg, #ffffff 0%, #f5fbfb 100%);
          }
          .material-audit-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            min-width: 0;
          }
          .material-audit-title {
            display: grid;
            gap: 3px;
            min-width: 0;
          }
          .material-audit-title strong {
            color: var(--ink);
            font-size: 15px;
          }
          .material-audit-title span {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
          }
          .material-audit-score {
            flex: 0 0 auto;
            min-width: 124px;
            padding: 9px 10px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #ffffff;
            text-align: right;
          }
          .material-audit-score span {
            display: block;
            color: var(--muted);
            font-size: 11px;
          }
          .material-audit-score strong {
            color: var(--accent-dark);
            font-size: 18px;
          }
          .material-audit-list {
            display: grid;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
          }
          .material-audit-list.scroll {
            max-height: 420px;
            overflow: auto;
            padding-right: 4px;
          }
          .material-audit-issue {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: start;
            min-width: 0;
            padding: 9px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #ffffff;
          }
          .material-audit-issue strong,
          .material-audit-issue span,
          .material-audit-issue a {
            min-width: 0;
            overflow-wrap: anywhere;
          }
          .material-audit-issue strong {
            color: var(--ink);
            font-size: 13px;
            line-height: 1.35;
          }
          .material-audit-issue span {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.45;
          }
          .material-audit-issue a {
            color: var(--accent-dark);
            font-size: 12px;
            font-weight: 700;
            text-decoration: none;
          }
          .material-audit-issue a:hover { text-decoration: underline; }
          .material-audit-status {
            justify-self: end;
            padding: 3px 7px;
            border-radius: 999px;
            background: #fff7ed;
            color: #9a3412;
            font-size: 11px;
            font-weight: 700;
          }
          .admin-insight-list span,
          .admin-course-chip span {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
          }
          table {
            width: 100%;
            border-collapse: collapse;
          }
          th, td {
            padding: 9px 10px;
            border-bottom: 1px solid var(--line);
            text-align: left;
            vertical-align: top;
          }
          th {
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
            background: #fbfcfd;
          }
          tr:last-child td { border-bottom: 0; }
          .status {
            display: inline-block;
            max-width: 100%;
            padding: 2px 8px;
            border: 1px solid var(--line);
            border-radius: 999px;
            font-size: 12px;
            white-space: nowrap;
          }
          .status.ok { border-color: #bbf7d0; background: #f0fdf4; color: var(--ok); }
          .status.warn { border-color: #fed7aa; background: #fff7ed; color: var(--warn); }
          .status.danger { border-color: #fecaca; background: #fef2f2; color: var(--danger); }
          .muted { color: var(--muted); }
          .hidden { display: none !important; }
          .course-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 8px;
          }
          .course-button {
            width: 100%;
            min-height: 44px;
            padding: 12px;
            text-align: left;
            background: var(--surface);
            border-radius: 8px;
          }
          .course-button strong {
            display: block;
            margin-bottom: 3px;
            font-size: 15px;
          }
          .course-button.active {
            border-color: var(--accent);
            background: var(--accent-soft);
          }
          .course-button .badge-row .muted {
            display: none;
          }
          .course-description {
            display: none;
            margin-top: 5px;
            color: var(--text);
            font-size: 13px;
            line-height: 1.35;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          .course-meta, .badge-row, .lesson-meta {
            display: flex;
            gap: 6px;
            align-items: center;
            flex-wrap: wrap;
          }
          .course-meta { margin-top: 6px; font-size: 12px; }
          .pill {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 2px 8px;
            border: 1px solid var(--line);
            border-radius: 999px;
            color: var(--muted);
            background: var(--surface-soft);
            font-size: 12px;
            line-height: 1.3;
            white-space: normal;
            overflow-wrap: anywhere;
          }
          .course-summary {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin: 0 0 12px;
          }
          .course-hero {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            align-items: stretch;
            margin-bottom: 10px;
            padding: 12px;
            border: 1px solid #cce5e8;
            border-radius: 8px;
            background: linear-gradient(135deg, #ffffff 0%, #f4fbfb 66%, #eefafa 100%);
            overflow: hidden;
            box-shadow: none;
          }
          .course-hero.broker-hero {
            border-color: #bfe9ec;
            background: linear-gradient(135deg, #ffffff 0%, #eefafa 52%, #f8fbff 100%);
          }
          .course-hero-main {
            display: grid;
            gap: 7px;
            min-width: 0;
          }
          .course-eyebrow {
            color: var(--accent-dark);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
          }
          .course-hero h2 {
            margin: 0;
            color: var(--ink);
            font-size: 22px;
            line-height: 1.15;
          }
          .course-hero-copy {
            max-width: 820px;
            margin: 0;
            color: #44545a;
            font-size: 13px;
            line-height: 1.4;
          }
          .course-hero-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(136px, 1fr));
            gap: 10px;
          }
          .hero-stat {
            min-width: 0;
            padding: 8px 10px;
            border: 1px solid rgba(0, 167, 173, 0.18);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.82);
          }
          .hero-stat span {
            display: block;
            color: var(--muted);
            font-size: 12px;
          }
          .hero-stat strong {
            display: block;
            margin-top: 1px;
            color: var(--ink);
            font-size: 17px;
            line-height: 1.25;
            overflow-wrap: anywhere;
          }
          .course-visual {
            position: relative;
            display: grid;
            align-content: end;
            min-height: 184px;
            padding: 12px;
            border: 1px solid rgba(16, 24, 32, 0.08);
            border-radius: 8px;
            overflow: hidden;
            background:
              linear-gradient(135deg, rgba(16, 24, 32, 0.88), rgba(0, 132, 138, 0.74)),
              linear-gradient(135deg, #101820, #00a7ad);
            color: #ffffff;
          }
          .course-visual.business {
            background:
              linear-gradient(135deg, rgba(16, 24, 32, 0.86), rgba(0, 132, 138, 0.58)),
              url("https://optim.tildacdn.com/tild3930-3536-4764-a363-366131303237/-/format/webp/Group_1948755087_4.png.webp");
            background-size: cover;
            background-position: center;
          }
          .course-visual-title {
            position: relative;
            z-index: 1;
            display: grid;
            gap: 6px;
          }
          .course-visual-title strong {
            font-size: 19px;
            line-height: 1.2;
          }
          .course-visual-title span {
            color: rgba(255, 255, 255, 0.82);
          }
          .course-visual-flow {
            position: relative;
            z-index: 1;
            display: grid;
            gap: 6px;
            margin-top: 12px;
          }
          .course-media-card {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            margin: 14px 0 0;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, 0.24);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.14);
            backdrop-filter: blur(10px);
          }
          .media-play {
            position: relative;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #ffffff;
          }
          .media-play::before {
            content: "";
            position: absolute;
            left: 17px;
            top: 13px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 12px solid var(--accent-dark);
          }
          .media-copy {
            display: grid;
            gap: 2px;
            min-width: 0;
          }
          .media-copy strong {
            color: #ffffff;
            font-size: 14px;
          }
          .media-copy span {
            color: rgba(255, 255, 255, 0.78);
            font-size: 12px;
          }
          .student-start-card {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(270px, 0.72fr);
            gap: 10px;
            align-items: stretch;
            margin: 0 0 12px;
            padding: 12px;
            border: 1px solid rgba(21, 111, 116, 0.16);
            border-radius: 8px;
            background: linear-gradient(135deg, #ffffff 0%, #f3fbfb 100%);
          }
          .student-start-main {
            display: grid;
            gap: 10px;
            min-width: 0;
          }
          .student-start-main > span {
            color: var(--accent-dark);
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0;
          }
          .student-start-main h2 {
            margin: 0;
            color: var(--ink);
            font-size: 22px;
            line-height: 1.15;
            overflow-wrap: anywhere;
          }
          .student-start-main p {
            max-width: 680px;
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.45;
          }
          .student-start-side {
            display: grid;
            align-content: start;
            gap: 8px;
            min-width: 0;
            padding: 10px;
            border: 1px solid rgba(21, 111, 116, 0.12);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.84);
          }
          .student-start-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
          }
          .student-start-stat {
            min-width: 0;
            padding: 8px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #ffffff;
          }
          .student-start-stat span {
            display: block;
            color: var(--muted);
            font-size: 11px;
            font-weight: 700;
          }
          .student-start-stat strong {
            display: block;
            margin-top: 2px;
            color: var(--ink);
            font-size: 16px;
            line-height: 1.2;
            overflow-wrap: anywhere;
          }
          .student-start-route {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
          }
          .student-route-chip {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 2px 8px;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: #ffffff;
            color: var(--muted);
            font-size: 11px;
            font-weight: 700;
          }
          .student-route-chip.current {
            border-color: var(--accent);
            background: var(--accent-soft);
            color: var(--accent-dark);
          }
          .student-route-chip.passed {
            border-color: #bbf7d0;
            color: #166534;
            background: #f0fdf4;
          }
          .student-route-chip.locked {
            background: #f8fafc;
          }
          .flow-line {
            display: grid;
            grid-template-columns: 30px minmax(0, 1fr);
            gap: 8px;
            align-items: center;
            min-height: 30px;
            padding: 5px 6px;
            border: 1px solid rgba(255, 255, 255, 0.24);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(8px);
          }
          .flow-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #ffffff;
            color: var(--accent-dark);
            font-weight: 700;
          }
          .course-path,
          .reward-strip {
            display: grid;
            gap: 8px;
            margin: 0 0 12px;
          }
          .section-label {
            color: var(--ink);
            font-size: 13px;
            font-weight: 700;
          }
          .learning-path {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 10px;
          }
          .path-step {
            position: relative;
            display: grid;
            gap: 6px;
            min-height: 72px;
            padding: 10px 12px 10px 16px;
            border: 1px solid rgba(21, 111, 116, 0.12);
            border-radius: 8px;
            background: #ffffff;
            box-shadow: none;
          }
          .path-step::before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            bottom: 10px;
            width: 3px;
            border-radius: 999px;
            background: #d7e8ec;
          }
          .path-step.current {
            border-color: var(--accent);
            background: var(--accent-soft);
            box-shadow: none;
          }
          .path-step.current::before {
            background: var(--accent);
          }
          .path-step.passed {
            border-color: #bbf7d0;
            background: #f0fdf4;
          }
          .path-step.passed::before {
            background: var(--ok);
          }
          .path-step.locked {
            color: var(--muted);
            background: #f8fafc;
          }
          .path-step.final {
            border-color: #c7d2fe;
            background: #f5f7ff;
          }
          .path-step strong {
            color: var(--ink);
            line-height: 1.25;
            font-size: 13px;
          }
          .path-step span {
            color: var(--muted);
            font-size: 12px;
          }
          .achievement-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
            gap: 8px;
          }
          .achievement-card {
            position: relative;
            display: grid;
            grid-template-columns: 32px minmax(0, 1fr);
            gap: 8px;
            align-items: center;
            min-height: 58px;
            padding: 8px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #ffffff;
            overflow: hidden;
          }
          .achievement-card.earned {
            border-color: rgba(21, 111, 116, 0.32);
            background: linear-gradient(135deg, #ffffff 0%, #eefafa 100%);
          }
          .achievement-card.current {
            border-color: rgba(244, 185, 63, 0.72);
            background: linear-gradient(135deg, #fffdfa 0%, #fff4cc 100%);
            box-shadow: 0 12px 28px rgba(244, 185, 63, 0.16);
          }
          .achievement-card.locked {
            color: var(--muted);
            background: #f8fafc;
          }
          .achievement-card.current::after {
            content: "";
            position: absolute;
            right: 8px;
            top: 8px;
            width: 30px;
            height: 30px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.72);
          }
          .achievement-badge {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--ink);
            color: #ffffff;
            font-weight: 700;
          }
          .achievement-card.earned .achievement-badge { background: var(--ok); }
          .achievement-card.current .achievement-badge { background: var(--gold); color: #3b2a00; }
          .achievement-card.locked .achievement-badge { background: #cbd5e1; color: #475569; }
          .achievement-copy {
            position: relative;
            z-index: 1;
            display: grid;
            gap: 2px;
            min-width: 0;
          }
          .achievement-copy strong {
            overflow-wrap: anywhere;
            font-size: 13px;
          }
          .achievement-copy span {
            color: var(--muted);
            font-size: 12px;
          }
          .course-focus-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 12px;
            margin: 0 0 12px;
          }
          .focus-card {
            position: relative;
            display: grid;
            gap: 6px;
            min-height: 78px;
            padding: 11px 12px;
            border: 1px solid rgba(21, 111, 116, 0.14);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.96);
            overflow: hidden;
            box-shadow: 0 8px 18px rgba(12, 19, 35, 0.035);
          }
          .focus-card::after {
            content: "";
            position: absolute;
            inset: auto 10px 10px auto;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(13, 165, 168, 0.11);
          }
          .focus-card span {
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
          }
          .focus-card strong {
            position: relative;
            z-index: 1;
            color: var(--ink);
            font-size: 14px;
            line-height: 1.35;
            overflow-wrap: anywhere;
          }
          .focus-card.accent {
            background: linear-gradient(135deg, #0c1323 0%, #156f74 100%);
          }
          .focus-card.accent span,
          .focus-card.accent strong {
            color: #ffffff;
          }
          .course-action-strip {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
            gap: 12px;
            align-items: stretch;
            margin: 0 0 12px;
          }
          .action-main {
            display: grid;
            gap: 10px;
            padding: 14px;
            border: 1px solid rgba(21, 111, 116, 0.16);
            border-radius: 8px;
            background: #ffffff;
          }
          .action-main span {
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
          }
          .action-main strong {
            color: var(--ink);
            font-size: 22px;
            line-height: 1.15;
          }
          .action-main p {
            margin: 0;
            color: var(--muted);
            line-height: 1.45;
          }
          .action-side {
            display: grid;
            gap: 8px;
            padding: 14px;
            border: 1px solid rgba(21, 111, 116, 0.12);
            border-radius: 8px;
            background: #f7fbfb;
          }
          .mini-stepper {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
          }
          .mini-step {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 58px;
            height: 30px;
            padding: 0 10px;
            border: 1px solid var(--line);
            border-radius: 999px;
            color: var(--muted);
            background: #ffffff;
            font-size: 12px;
            font-weight: 700;
          }
          .mini-step.current {
            border-color: var(--accent);
            color: var(--accent-dark);
            background: var(--accent-soft);
          }
          .mini-step.passed {
            border-color: #bbf7d0;
            color: #166534;
            background: #f0fdf4;
          }
          .mini-step.locked {
            color: #94a3b8;
            background: #f8fafc;
          }
          .mini-step.final {
            min-width: 76px;
          }
          #courseList.student-course-selected {
            display: none;
          }
          .mobile-continue-bar {
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 9px;
            border: 1px solid rgba(21, 111, 116, 0.16);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.96);
            box-shadow: 0 14px 34px rgba(12, 19, 35, 0.14);
            backdrop-filter: blur(12px);
          }
          .mobile-continue-bar span {
            display: grid;
            min-width: 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.2;
          }
          .mobile-continue-bar strong {
            color: var(--ink);
            font-size: 13px;
            line-height: 1.2;
            overflow-wrap: anywhere;
          }
          .mobile-continue-bar .student-main-action {
            flex: 0 0 auto;
            min-width: 112px;
          }
          .lesson-button {
            width: 100%;
            min-height: 38px;
            padding: 6px 8px;
            text-align: left;
            background: transparent;
          }
          .lesson-button.active {
            border-color: var(--accent);
            background: #e8f5f3;
          }
          .module-block {
            margin-top: 12px;
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow: hidden;
            background: #ffffff;
          }
          details.module-block summary {
            list-style: none;
            cursor: pointer;
          }
          details.module-block summary::-webkit-details-marker { display: none; }
          details.module-block:not([open]) {
            box-shadow: none;
          }
          .module-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 14px;
            border-bottom: 1px solid var(--line);
            background: var(--surface-soft);
          }
          details.module-block:not([open]) .module-head { border-bottom: 0; }
          .module-head-main {
            display: grid;
            gap: 4px;
            min-width: 0;
          }
          .module-title {
            margin: 0;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.35;
            overflow-wrap: anywhere;
          }
          .module-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--accent-dark);
            font-weight: 700;
            white-space: nowrap;
          }
          .module-toggle::after {
            content: "⌄";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 999px;
            background: #ffffff;
            border: 1px solid var(--line);
            color: var(--accent-dark);
          }
          details[open] .module-toggle::after {
            content: "⌃";
          }
          .module-block.locked {
            opacity: 0.78;
          }
          .module-block.passed {
            border-color: #bbf7d0;
          }
          .module-block.failed {
            border-color: #fed7aa;
          }
          .day-status-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
          }
          .day-body {
            display: grid;
            gap: 12px;
            padding: 12px;
          }
          .day-quick-hint {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            width: fit-content;
            max-width: 100%;
            padding: 8px 10px;
            border: 1px solid #d6eef0;
            border-radius: 8px;
            background: #f4fbfb;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
          }
          .day-start-card {
            display: grid;
            gap: 12px;
            padding: 14px;
            border: 1px solid #d6eef0;
            border-radius: 8px;
            background: linear-gradient(135deg, #ffffff 0%, #f4fbfb 100%);
          }
          .day-start-head {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: flex-start;
            flex-wrap: wrap;
          }
          .day-start-head strong {
            color: var(--ink);
            font-size: 17px;
            line-height: 1.25;
          }
          .day-start-head span {
            color: var(--muted);
            font-size: 13px;
          }
          .day-simple-steps {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
          }
          .simple-step {
            display: grid;
            gap: 4px;
            min-width: 0;
            padding: 10px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #ffffff;
          }
          .simple-step span {
            color: var(--muted);
            font-size: 11px;
            font-weight: 700;
          }
          .simple-step strong {
            color: var(--ink);
            font-size: 13px;
            line-height: 1.35;
            overflow-wrap: anywhere;
          }
          .day-outcome-card {
            display: grid;
            gap: 12px;
            padding: 14px;
            border: 1px solid #d6eef0;
            border-radius: 8px;
            background: linear-gradient(135deg, #ffffff 0%, #f4fbfb 100%);
          }
          .day-outcome-head {
            display: grid;
            gap: 6px;
          }
          .method-pill {
            width: fit-content;
            padding: 4px 8px;
            border-radius: 999px;
            background: #e7f8f8;
            color: var(--accent-dark);
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
          }
          .day-outcome-grid,
          .day-test-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px;
          }
          .day-outcome-metric,
          .day-test-metric {
            display: grid;
            gap: 5px;
            padding: 11px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #ffffff;
            min-width: 0;
          }
          .day-outcome-metric span,
          .day-test-metric span {
            color: var(--muted);
            font-size: 11px;
            font-weight: 700;
          }
          .day-outcome-metric strong,
          .day-test-metric strong {
            color: var(--ink);
            font-size: 12px;
            line-height: 1.45;
            overflow-wrap: anywhere;
          }
          .day-outcome-list {
            display: grid;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
          }
          .day-outcome-list li {
            position: relative;
            padding-left: 18px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.55;
          }
          .day-outcome-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 7px;
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: var(--accent);
          }
          .day-material-section {
            display: grid;
            gap: 10px;
          }
          .day-material-helper {
            margin: -2px 0 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.45;
            max-width: 760px;
          }
          .day-material-list {
            display: grid;
            gap: 10px;
          }
          .day-material-item {
            display: grid;
            grid-template-columns: 40px 34px minmax(0, 1fr) auto;
            gap: 12px;
            align-items: center;
            min-height: 48px;
            padding: 10px 12px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #ffffff;
          }
          .day-material-item.opened {
            border-color: #bbf7d0;
            background: #f8fff9;
          }
          .day-material-item.in-progress {
            border-color: #bae6fd;
            background: #f5fbff;
          }
          .day-material-item.active {
            border-color: var(--accent);
            background: var(--accent-soft);
            box-shadow: 0 8px 18px rgba(0, 167, 173, 0.1);
          }
          .day-material-number {
            color: var(--muted);
            font-weight: 700;
          }
          .material-type-dot {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--accent-soft);
            color: var(--accent-dark);
          }
          .material-type-dot::before {
            content: "";
            width: 12px;
            height: 12px;
            border: 2px solid currentColor;
            border-radius: 3px;
          }
          .material-type-dot.video::before {
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-left: 11px solid currentColor;
            border-right: 0;
            border-radius: 0;
            transform: translateX(1px);
          }
          .material-type-dot.ai::before {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            box-shadow: 0 0 0 4px rgba(13, 165, 168, 0.14);
          }
          .material-type-dot.web::before {
            width: 15px;
            height: 15px;
            border-radius: 50%;
          }
          .material-type-dot.case::before {
            width: 16px;
            height: 12px;
            border-radius: 4px;
            background:
              linear-gradient(currentColor, currentColor) 3px 3px / 10px 2px no-repeat,
              linear-gradient(currentColor, currentColor) 3px 7px / 7px 2px no-repeat;
          }
          .material-type-dot.script::before,
          .material-type-dot.presentation::before,
          .material-type-dot.sheet::before {
            width: 12px;
            height: 16px;
            border-radius: 2px;
            background: linear-gradient(currentColor, currentColor) 50% 6px / 8px 2px no-repeat;
          }
          .day-material-link {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            max-width: 100%;
            min-height: 32px;
            padding: 3px 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: var(--accent-dark);
            font-weight: 700;
            overflow-wrap: anywhere;
            line-height: 1.4;
            text-decoration: none;
            text-align: left;
            cursor: pointer;
          }
          .day-material-link:hover { text-decoration: underline; }
          .material-viewer {
            display: grid;
            gap: 10px;
            padding: 10px;
            border: 1px solid #cce5e8;
            border-radius: 8px;
            background: #ffffff;
            box-shadow: 0 8px 18px rgba(15, 45, 52, 0.06);
          }
          .material-viewer-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
          }
          .material-viewer-title {
            display: grid;
            gap: 3px;
            min-width: 0;
          }
          .material-viewer-title strong {
            color: var(--ink);
            overflow-wrap: anywhere;
          }
          .material-viewer.fallback-viewer .material-viewer-title {
            display: none;
          }
          .material-viewer-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
          }
          .material-watch-progress {
            display: grid;
            gap: 6px;
          }
          .material-watch-progress-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: var(--muted);
            font-size: 12px;
          }
          .material-watch-progress-row strong {
            color: var(--accent-dark);
            font-size: 12px;
          }
          .material-watch-progress-bar {
            height: 8px;
            overflow: hidden;
            border-radius: 999px;
            background: #e8f1f2;
          }
          .material-watch-progress-bar span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
          }
          .material-viewer-shell {
            position: relative;
            width: 100%;
            min-height: 320px;
            aspect-ratio: 16 / 9;
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow: hidden;
            background: #0f172a;
          }
          .material-viewer-shell.fallback {
            display: grid;
            place-items: center;
            min-height: 190px;
            aspect-ratio: auto;
            background: linear-gradient(135deg, #101820 0%, #00858a 100%);
          }
          .bitrix-fallback {
            display: grid;
            gap: 12px;
            width: min(620px, 100%);
            padding: 18px;
            color: #ffffff;
            text-align: center;
          }
          .bitrix-fallback strong {
            font-size: 20px;
            line-height: 1.2;
          }
          .bitrix-fallback span {
            color: rgba(255, 255, 255, 0.82);
          }
          .bitrix-fallback .external-link-button {
            justify-self: center;
            border-color: rgba(255, 255, 255, 0.5);
            background: #ffffff;
          }
          .material-viewer-frame,
          .material-viewer-video {
            width: 100%;
            height: 100%;
            min-height: 320px;
            border: 0;
            background: #0f172a;
          }
          .material-viewer-video {
            display: block;
            object-fit: contain;
          }
          .material-viewer-note {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            color: var(--muted);
            font-size: 12px;
          }
          .case-study-shell {
            min-height: 0;
            aspect-ratio: auto;
            padding: 0;
            background: #ffffff;
          }
          .case-study-card {
            display: grid;
            gap: 14px;
            width: 100%;
            padding: 16px;
            background: #ffffff;
            color: var(--text);
          }
          .case-study-media {
            position: relative;
            min-height: 220px;
            border: 1px solid rgba(21, 111, 116, 0.14);
            border-radius: 8px;
            overflow: hidden;
            background:
              linear-gradient(135deg, rgba(16, 24, 32, 0.82), rgba(0, 132, 138, 0.48)),
              linear-gradient(135deg, #0c1323, #65c3cf);
          }
          .case-study-media img {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 220px;
            object-fit: cover;
          }
          .case-photo-badge {
            position: absolute;
            left: 10px;
            bottom: 10px;
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            padding: 3px 9px;
            border: 1px solid rgba(255, 255, 255, 0.34);
            border-radius: 999px;
            background: rgba(12, 19, 35, 0.58);
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            backdrop-filter: blur(8px);
          }
          .case-study-media.placeholder {
            display: grid;
            align-content: end;
            padding: 16px;
            color: #ffffff;
          }
          .case-study-media.placeholder strong {
            font-size: 22px;
            line-height: 1.15;
          }
          .case-study-media.placeholder span {
            max-width: 460px;
            margin-top: 6px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 13px;
            line-height: 1.4;
          }
          .case-mini-media {
            margin: 0 12px 10px;
            min-height: 150px;
          }
          .case-mini-media img {
            min-height: 150px;
          }
          .case-mini-media.placeholder {
            min-height: 118px;
            padding: 12px;
          }
          .case-mini-media.placeholder strong {
            font-size: 16px;
          }
          .case-study-hero {
            display: grid;
            gap: 8px;
            padding: 16px;
            border: 1px solid rgba(21, 111, 116, 0.14);
            border-radius: 8px;
            background: linear-gradient(135deg, #f7fbfb 0%, #ffffff 100%);
          }
          .case-study-kicker {
            color: var(--accent-dark);
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0;
          }
          .case-study-hero h3 {
            margin: 0;
            color: var(--ink);
            font-size: 22px;
            line-height: 1.18;
          }
          .case-study-hero p {
            margin: 0;
            color: var(--muted);
          }
          .case-signal-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
          }
          .case-signal {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            padding: 3px 8px;
            border: 1px solid rgba(21, 111, 116, 0.16);
            border-radius: 999px;
            background: #ffffff;
            color: var(--accent-dark);
            font-size: 12px;
            font-weight: 700;
          }
          .case-metrics {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
          }
          .case-metrics div,
          .case-study-grid section {
            min-width: 0;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fbfcfd;
          }
          .case-metrics div {
            display: grid;
            gap: 4px;
            padding: 10px;
          }
          .case-metrics span,
          .case-study-grid span {
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
          }
          .case-metrics strong {
            color: var(--ink);
            font-size: 16px;
            line-height: 1.2;
          }
          .case-study-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
          }
          .case-study-grid section {
            padding: 12px;
          }
          .case-study-grid p {
            margin: 6px 0 0;
            line-height: 1.45;
          }
          .case-takeaway {
            background: #f3fbfb;
            border-color: rgba(21, 111, 116, 0.2);
          }
          .case-study-inline-label {
            color: var(--accent-dark);
            font-weight: 700;
          }
          .case-gallery-section {
            display: grid;
            gap: 12px;
            padding: 14px;
            border: 1px solid rgba(21, 111, 116, 0.14);
            border-radius: 8px;
            background: linear-gradient(135deg, #f6fbfb 0%, #ffffff 100%);
          }
          .case-gallery-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            min-width: 0;
          }
          .case-gallery-head > div {
            display: grid;
            gap: 5px;
            min-width: 0;
          }
          .case-gallery-head p {
            max-width: 760px;
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.45;
          }
          .case-gallery-count {
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            padding: 4px 10px;
            border: 1px solid rgba(21, 111, 116, 0.18);
            border-radius: 999px;
            background: #ffffff;
            color: var(--accent-dark);
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
          }
          .case-gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
          }
          .case-gallery-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
          }
          .case-gallery-categories span {
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            padding: 4px 9px;
            border: 1px solid var(--line);
            border-radius: 6px;
            background: #ffffff;
            color: var(--accent-dark);
            font-size: 12px;
            font-weight: 700;
          }
          .case-gallery-feature {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            background: #0c1323;
          }
          .case-gallery-feature .case-study-media {
            min-height: 250px;
            border: 0;
            border-radius: 0;
          }
          .case-gallery-feature .case-study-media img {
            min-height: 250px;
            max-height: 330px;
          }
          .case-gallery-feature > span {
            display: block;
            padding: 10px 12px;
            background: #0c1323;
            color: #ffffff;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
          }
          .case-gallery-more {
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #ffffff;
          }
          .case-gallery-more > summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 48px;
            padding: 10px 12px;
            cursor: pointer;
            list-style: none;
          }
          .case-gallery-more > summary::-webkit-details-marker {
            display: none;
          }
          .case-gallery-more > summary span {
            color: var(--ink);
            font-weight: 700;
          }
          .case-gallery-more > summary strong {
            color: var(--accent-dark);
            font-size: 13px;
          }
          .case-gallery-more[open] > summary strong {
            font-size: 0;
          }
          .case-gallery-more[open] > summary strong::after {
            content: "Свернуть";
            font-size: 13px;
          }
          .case-gallery-more-grid {
            padding: 0 10px 10px;
          }
          .case-mini-card {
            min-width: 0;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #ffffff;
            overflow: hidden;
            box-shadow: 0 8px 18px rgba(15, 45, 52, 0.05);
          }
          .case-mini-card[open] {
            grid-column: 1 / -1;
            border-color: rgba(0, 167, 173, 0.36);
            box-shadow: 0 14px 26px rgba(15, 45, 52, 0.08);
          }
          .case-mini-summary {
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            min-height: 74px;
            padding: 12px;
            cursor: pointer;
            list-style: none;
          }
          .case-mini-summary::-webkit-details-marker {
            display: none;
          }
          .case-mini-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 8px;
            background: var(--accent-soft);
            color: var(--accent-dark);
            font-size: 12px;
            font-weight: 900;
          }
          .case-mini-title {
            display: grid;
            gap: 4px;
            min-width: 0;
          }
          .case-mini-title strong {
            color: var(--ink);
            font-size: 13px;
            line-height: 1.25;
            overflow-wrap: anywhere;
          }
          .case-mini-title span {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
            overflow-wrap: anywhere;
          }
          .case-mini-arrow {
            color: var(--accent-dark);
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
          }
          .case-mini-card[open] .case-mini-arrow {
            color: var(--muted);
          }
          .case-mini-card[open] .case-mini-arrow::before {
            content: "Закрыть";
          }
          .case-mini-card[open] .case-mini-arrow {
            font-size: 0;
          }
          .case-mini-card[open] .case-mini-arrow::before {
            font-size: 12px;
          }
          .case-mini-metrics {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;
            padding: 0 12px 10px;
          }
          .case-mini-metrics div {
            display: grid;
            gap: 3px;
            min-width: 0;
            padding: 8px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fbfcfd;
          }
          .case-mini-metrics span,
          .case-mini-body span {
            color: var(--muted);
            font-size: 11px;
            font-weight: 800;
          }
          .case-mini-metrics strong {
            color: var(--ink);
            font-size: 12px;
            line-height: 1.25;
            overflow-wrap: anywhere;
          }
          .case-signal-row.compact {
            padding: 0 12px 10px;
          }
          .case-mini-body {
            display: grid;
            gap: 8px;
            padding: 0 12px 12px;
          }
          .case-mini-body section {
            min-width: 0;
            padding: 9px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fbfcfd;
          }
          .case-mini-body p {
            margin: 4px 0 0;
            color: var(--text);
            font-size: 12px;
            line-height: 1.45;
          }
          .case-source-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 44px;
            margin: 0 12px 12px;
            padding: 9px 12px;
            border: 1px solid rgba(21, 111, 116, 0.2);
            border-radius: 8px;
            background: #f6fbfb;
            color: var(--accent-dark);
            text-decoration: none;
          }
          .case-study-card > .case-source-link {
            margin: 0;
          }
          .case-source-link span {
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
          }
          .case-source-link strong {
            font-size: 12px;
            text-align: right;
          }
          .case-source-link:hover {
            border-color: var(--accent);
            background: var(--accent-soft);
          }
          .external-link-button {
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 0 12px;
            border: 1px solid var(--line);
            border-radius: 6px;
            background: #ffffff;
            color: var(--accent-dark);
            font-weight: 700;
            text-decoration: none;
          }
          .external-link-button:hover {
            border-color: var(--accent);
            background: var(--accent-soft);
          }
          .day-test-card {
            display: grid;
            gap: 8px;
            padding: 10px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--surface-soft);
          }
          .day-test-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
          }
          .day-test-title {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
          }
          .missing-materials {
            /* 2026-06-29: clear blockers for day-test unlock. */
            display: grid;
            gap: 8px;
            padding: 10px;
            border: 1px solid #c8eef0;
            border-radius: 8px;
            background: #f5fcfc;
          }
          .missing-materials ul {
            display: grid;
            gap: 6px;
            margin: 0;
            padding: 0;
            list-style: none;
          }
          .missing-materials li {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 8px;
          }
          .missing-materials button {
            justify-content: flex-start;
            min-height: 36px;
            padding: 7px 9px;
            border-color: #d9ecee;
            background: #ffffff;
            color: var(--accent-dark);
            text-align: left;
          }
          .missing-materials span {
            color: var(--muted);
            font-size: 12px;
            white-space: nowrap;
          }
          .day-test-number {
            color: var(--muted);
            font-weight: 700;
          }
          button:disabled {
            cursor: not-allowed;
            opacity: 0.55;
          }
          button.primary:disabled {
            border-color: #d7e4e6;
            background: #edf4f5;
            color: #6f858a;
            box-shadow: none;
            opacity: 1;
          }
          button.primary:disabled:hover {
            background: #edf4f5;
          }
          .lesson-list {
            display: grid;
            gap: 8px;
            padding: 10px;
          }
          .lesson-card {
            display: grid;
            width: 100%;
            gap: 0;
            border: 1px solid var(--line);
            background: #ffffff;
            border-radius: 8px;
            overflow: hidden;
          }
          .lesson-card.active {
            border-color: var(--accent);
            background: var(--accent-soft);
          }
          .lesson-card-button {
            display: grid;
            grid-template-columns: 32px minmax(0, 1fr);
            gap: 10px;
            width: 100%;
            min-height: 58px;
            padding: 10px;
            text-align: left;
            border: 0;
            border-radius: 0;
            background: transparent;
          }
          .lesson-card-button:hover,
          .lesson-card.active .lesson-card-button {
            background: var(--accent-soft);
          }
          .lesson-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: var(--accent-soft);
            color: var(--muted);
            font-weight: 700;
          }
          .lesson-main {
            display: grid;
            gap: 6px;
            min-width: 0;
          }
          .lesson-title-row {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: space-between;
            min-width: 0;
          }
          .lesson-title-row strong {
            min-width: 0;
            overflow-wrap: anywhere;
          }
          .lesson-materials-inline {
            display: grid;
            gap: 6px;
            padding: 0 10px 10px 52px;
          }
          .lesson-materials-title {
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
          }
          .lesson-material-chips {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
          }
          .lesson-material-chip {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            min-height: 28px;
            padding: 4px 8px;
            border: 1px solid var(--line);
            border-radius: 6px;
            background: var(--surface-soft);
            color: var(--accent-dark);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.25;
            overflow-wrap: anywhere;
            text-decoration: none;
          }
          .lesson-material-chip:hover {
            border-color: var(--accent);
            background: #ffffff;
          }
          .next-step {
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 12px;
            background: #fbfcfd;
          }
          .next-step strong {
            display: block;
            margin: 4px 0 10px;
            font-size: 16px;
          }
          .material-list, .check-list {
            margin: 0;
            padding-left: 18px;
          }
          .material-list li, .check-list li {
            margin: 6px 0;
            overflow-wrap: anywhere;
          }
          .lesson-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 12px;
          }
          .message {
            margin-top: 8px;
            padding: 8px 10px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fbfcfd;
          }
          .message.ok { border-color: #bbf7d0; background: #f0fdf4; color: var(--ok); }
          .message.warn { border-color: #fed7aa; background: #fff7ed; color: var(--warn); }
          .message.danger { border-color: #fecaca; background: #fef2f2; color: var(--danger); }
          .exam-panel {
            margin-top: 14px;
            border: 1px solid var(--accent);
            border-radius: 8px;
            background: #ffffff;
            overflow: hidden;
          }
          .exam-panel .panel-head {
            background: var(--accent-soft);
          }
          .exam-intro {
            display: grid;
            gap: 10px;
          }
          .exam-topics {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 4px;
          }
          .exam-topic {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            padding: 3px 8px;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: var(--surface-soft);
            color: var(--text);
            font-size: 12px;
          }
          .exam-result {
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 12px;
            background: var(--surface-soft);
          }
          .quiz-form {
            display: grid;
            gap: 12px;
            margin-top: 14px;
          }
          .quiz-question {
            display: grid;
            gap: 10px;
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 14px;
            background: #ffffff;
          }
          .quiz-question > strong {
            color: var(--ink);
            font-size: 15px;
            line-height: 1.35;
          }
          .answer-list {
            display: grid;
            gap: 8px;
            margin-top: 2px;
          }
          .answer-list label {
            display: flex;
            gap: 10px;
            align-items: center;
            min-height: 44px;
            padding: 10px 12px;
            border: 1px solid rgba(21, 111, 116, 0.14);
            border-radius: 8px;
            background: #fbfdfd;
            cursor: pointer;
            transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
          }
          .answer-list label:hover {
            border-color: rgba(13, 165, 168, 0.34);
            background: #f3fbfb;
          }
          .answer-list label:has(input:checked) {
            border-color: rgba(13, 165, 168, 0.5);
            background: var(--accent-soft);
            box-shadow: inset 3px 0 0 var(--accent);
          }
          .answer-list input {
            min-height: 18px;
            margin-top: 2px;
            accent-color: var(--accent);
          }
          .answer-list textarea {
            min-height: 118px;
            border-color: rgba(21, 111, 116, 0.16);
            background: #fbfdfd;
          }
          .stack { display: grid; gap: 12px; }
          .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
          .row input, .row select { min-width: 180px; max-width: 100%; }
          .attempt-list {
            display: grid;
            gap: 8px;
          }
          .attempt-item {
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 10px;
            background: #ffffff;
          }
          .attempt-meta {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 6px;
          }
          .admin-student-grid {
            display: grid;
            gap: 10px;
          }
          .admin-student-card {
            display: grid;
            gap: 10px;
            padding: 12px;
            border: 1px solid rgba(21, 111, 116, 0.12);
            border-radius: 8px;
            background: #ffffff;
            box-shadow: 0 10px 24px rgba(12, 19, 35, 0.035);
            transition: border-color 160ms ease, box-shadow 160ms ease;
          }
          .admin-student-card:hover {
            border-color: rgba(13, 165, 168, 0.22);
            box-shadow: 0 14px 30px rgba(12, 19, 35, 0.055);
          }
          .admin-student-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
          }
          .admin-student-name {
            display: grid;
            gap: 4px;
            min-width: 0;
          }
          .admin-student-name strong {
            color: var(--ink);
            font-size: 16px;
          }
          .admin-assignment-row {
            display: grid;
            grid-template-columns: minmax(220px, 1fr) auto;
            gap: 8px;
            align-items: center;
            padding: 8px;
            border: 1px solid rgba(21, 111, 116, 0.12);
            border-radius: 8px;
            background: #f7fbfb;
          }
          .admin-assignment-row select {
            width: 100%;
            min-width: 0;
          }
          .admin-course-list {
            display: grid;
            gap: 8px;
          }
          .admin-course-line {
            display: grid;
            gap: 8px;
            padding: 10px;
            border: 1px solid rgba(21, 111, 116, 0.1);
            border-radius: 8px;
            background: #fbfdfd;
            transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
          }
          .admin-course-line:hover {
            border-color: rgba(13, 165, 168, 0.24);
            background: #ffffff;
            box-shadow: 0 10px 22px rgba(12, 19, 35, 0.045);
          }
          .admin-course-line:first-child {
            padding-top: 10px;
            border-top: 1px solid rgba(21, 111, 116, 0.1);
          }
          .admin-course-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
          }
          .admin-course-title strong {
            color: var(--ink);
          }
          .admin-course-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
            gap: 6px;
          }
          .admin-mini-metric {
            display: grid;
            gap: 2px;
            padding: 7px 8px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #ffffff;
          }
          .admin-mini-metric span {
            color: var(--muted);
            font-size: 12px;
          }
          .admin-mini-metric strong {
            color: var(--ink);
            font-size: 13px;
            line-height: 1.35;
            overflow-wrap: anywhere;
          }
          .admin-day-row {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
          }
          .admin-day-row .status {
            border-radius: 6px;
            font-size: 11px;
            line-height: 1.25;
            white-space: normal;
          }
          .admin-support-flags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
          }
          .admin-support-flag {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 4px 8px;
            border: 1px solid rgba(21, 111, 116, 0.16);
            border-radius: 999px;
            background: #f5fbfb;
            color: var(--ink);
            font-size: 12px;
            line-height: 1.25;
          }
          button.admin-support-flag {
            cursor: pointer;
            font-family: inherit;
          }
          button.admin-support-flag:hover {
            border-color: rgba(13, 165, 168, 0.32);
            background: rgba(13, 165, 168, 0.08);
            color: var(--accent-dark);
          }
          .admin-support-flag.warn {
            border-color: rgba(201, 140, 28, 0.26);
            background: #fff8e6;
          }
          .admin-support-flag.danger {
            border-color: rgba(192, 57, 43, 0.22);
            background: #fff1ef;
          }
          .progress-bar {
            width: 100%;
            height: 8px;
            border-radius: 999px;
            background: #e5e7eb;
            overflow: hidden;
          }
          .progress-bar span {
            display: block;
            height: 100%;
            background: var(--accent);
          }
          .progress-celebration {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 12px;
            align-items: center;
            margin-bottom: 14px;
            padding: 12px;
            border: 1px solid rgba(21, 111, 116, 0.16);
            border-radius: 8px;
            background: linear-gradient(135deg, #ffffff 0%, #f3fbfb 70%, #fff8e6 100%);
            box-shadow: 0 10px 26px rgba(12, 19, 35, 0.045);
          }
          .progress-celebration strong {
            display: block;
            color: var(--ink);
            font-size: 17px;
          }
          .progress-celebration span {
            color: var(--muted);
          }
          .progress-ring {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 68px;
            height: 68px;
            border-radius: 50%;
            background: conic-gradient(var(--accent) var(--progress-deg, 0deg), #e5eff0 0deg);
            color: var(--ink);
            font-weight: 700;
            box-shadow: inset 0 0 0 1px rgba(21, 111, 116, 0.06);
          }
          .progress-ring-inner {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: #ffffff;
          }
          .progress-context {
            display: grid;
            gap: 4px;
            padding: 12px;
            border: 1px solid #cce5e8;
            border-radius: 8px;
            background: #f7fcfc;
          }
          .progress-context span {
            color: var(--muted);
            font-size: 12px;
          }
          .progress-context strong {
            color: var(--ink);
            font-size: 16px;
          }
          .progress-context.hidden { display: none; }

          /* OP Leasing site skin */
          body {
            background:
              linear-gradient(180deg, #ffffff 0%, #f7fbfb 34%, #eef8f9 100%);
            font: 14px/1.55 "Open Sans", Arial, Helvetica, sans-serif;
          }
          header {
            position: sticky;
            top: 0;
            z-index: 5;
            border-bottom: 1px solid rgba(21, 111, 116, 0.12);
            background: rgba(255, 255, 255, 0.96);
            box-shadow: 0 10px 28px rgba(12, 19, 35, 0.06);
            backdrop-filter: blur(10px);
          }
          .brand-kicker {
            color: var(--accent-dark);
            letter-spacing: 0;
          }
          h1, .panel-title, .module-title, .course-hero h2 {
            font-family: "Oswald", "Open Sans", Arial, Helvetica, sans-serif;
            font-weight: 500;
          }
          main {
            background:
              linear-gradient(90deg, rgba(21, 111, 116, 0.035), rgba(255, 255, 255, 0) 34%),
              transparent;
          }
          aside {
            background:
              linear-gradient(180deg, #ffffff 0%, #f3fbfb 100%);
          }
          button,
          select,
          input,
          textarea {
            border-color: rgba(21, 111, 116, 0.18);
            border-radius: 8px;
          }
          button {
            font-weight: 600;
          }
          button:hover {
            border-color: var(--accent);
          }
          button.primary {
            border-color: var(--accent);
            border-radius: 30px;
            background: var(--accent);
            box-shadow: none;
          }
          button.primary:hover {
            border-color: var(--accent-dark);
            background: var(--accent-dark);
          }
          .tab,
          .assistant-nav-button {
            border-color: transparent;
            color: var(--ink);
            font-weight: 600;
          }
          .tab.active {
            border-color: rgba(21, 111, 116, 0.16);
            background: #ffffff;
            color: var(--accent-dark);
            box-shadow: 0 8px 20px rgba(12, 19, 35, 0.07);
          }
          .auth-box,
          .panel,
          .admin-student-card,
          .attempt-item,
          .quiz-question {
            border-color: rgba(21, 111, 116, 0.14);
            box-shadow: 0 12px 30px rgba(12, 19, 35, 0.055);
          }
          .panel {
            background: rgba(255, 255, 255, 0.96);
          }
          .panel-head {
            background: #ffffff;
          }
          .panel-title {
            color: var(--ink);
            font-size: 17px;
          }
          .course-button {
            position: relative;
            min-height: 104px;
            border-color: rgba(21, 111, 116, 0.14);
            background: linear-gradient(145deg, #ffffff 0%, #f7fcfc 100%);
            box-shadow: 0 10px 22px rgba(12, 19, 35, 0.04);
            transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
            padding: 15px 54px 14px 16px;
          }
          .course-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 28px rgba(12, 19, 35, 0.075);
          }
          .course-button::before {
            content: "";
            position: absolute;
            inset: 10px auto 10px 0;
            width: 3px;
            border-radius: 0 4px 4px 0;
            background: var(--accent);
            opacity: 0.28;
          }
          .course-button strong {
            color: var(--ink);
            font-family: "Oswald", "Open Sans", Arial, Helvetica, sans-serif;
            font-size: 24px;
            font-weight: 500;
            line-height: 1.08;
          }
          .course-button.active {
            border-color: rgba(13, 165, 168, 0.46);
            background: linear-gradient(135deg, #ffffff 0%, #edfafa 100%);
            box-shadow: 0 14px 28px rgba(21, 111, 116, 0.12);
          }
          .course-button.active::before {
            opacity: 1;
          }
          .course-button::after {
            content: "";
            position: absolute;
            right: 12px;
            top: 12px;
            width: 34px;
            height: 34px;
            border: 1px solid rgba(21, 111, 116, 0.16);
            border-radius: 8px;
            background:
              linear-gradient(135deg, rgba(13, 165, 168, 0.22), rgba(255, 255, 255, 0.6));
          }
          .course-card-mode {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            min-height: 24px;
            padding: 2px 9px;
            border: 1px solid rgba(13, 165, 168, 0.16);
            border-radius: 999px;
            background: #ffffff;
            color: var(--accent-dark);
            font-size: 12px;
            font-weight: 700;
          }
          .course-card-meta {
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
          }
          .pill,
          .status {
            border-color: rgba(21, 111, 116, 0.16);
            background: #ffffff;
          }
          .course-hero {
            grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
            align-items: stretch;
            padding: 18px;
            border: 0;
            background:
              linear-gradient(135deg, rgba(12, 19, 35, 0.96) 0%, rgba(21, 111, 116, 0.96) 58%, rgba(101, 195, 207, 0.9) 100%);
            box-shadow: 0 18px 42px rgba(12, 19, 35, 0.18);
          }
          .course-hero.broker-hero {
            background:
              linear-gradient(135deg, rgba(12, 19, 35, 0.96) 0%, rgba(21, 111, 116, 0.88) 54%, rgba(101, 195, 207, 0.78) 100%);
          }
          .course-hero.theme-starter {
            background:
              linear-gradient(135deg, rgba(12, 19, 35, 0.97) 0%, rgba(21, 111, 116, 0.92) 56%, rgba(13, 165, 168, 0.84) 100%);
          }
          .course-hero.theme-experienced {
            background:
              linear-gradient(135deg, rgba(12, 19, 35, 0.98) 0%, rgba(35, 73, 86, 0.94) 52%, rgba(21, 111, 116, 0.88) 100%);
          }
          .course-eyebrow,
          .course-hero h2,
          .course-hero-copy,
          .course-hero .muted {
            color: #ffffff;
          }
          .course-eyebrow {
            opacity: 0.76;
          }
          .course-hero h2 {
            font-size: 28px;
            font-weight: 800;
          }
          .course-hero-copy,
          .course-hero .muted {
            opacity: 0.84;
          }
          .course-hero .progress-bar {
            background: rgba(255, 255, 255, 0.22);
          }
          .course-hero .progress-bar span {
            background: #ffffff;
          }
          .hero-stat {
            border-color: rgba(255, 255, 255, 0.22);
            background: rgba(255, 255, 255, 0.13);
            color: #ffffff;
            backdrop-filter: blur(10px);
          }
          .hero-stat span,
          .hero-stat strong {
            color: #ffffff;
          }
          .hero-stat strong {
            font-weight: 800;
          }
          .course-visual {
            min-height: 100%;
            border-color: rgba(255, 255, 255, 0.2);
            background:
              linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)),
              linear-gradient(135deg, rgba(12, 19, 35, 0.62), rgba(21, 111, 116, 0.2));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
          }
          .course-visual::after {
            content: "ОП";
            position: absolute;
            right: 12px;
            top: 12px;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border: 1px solid rgba(255, 255, 255, 0.34);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.92);
            color: var(--accent-dark);
            font-weight: 800;
            letter-spacing: 0;
          }
          .course-visual.business {
            background:
              linear-gradient(135deg, rgba(12, 19, 35, 0.82), rgba(21, 111, 116, 0.42)),
              url("https://optim.tildacdn.com/tild3930-3536-4764-a363-366131303237/-/format/webp/Group_1948755087_4.png.webp");
            background-size: cover;
            background-position: center;
          }
          .course-visual.starter {
            background:
              linear-gradient(135deg, rgba(12, 19, 35, 0.72), rgba(21, 111, 116, 0.28)),
              url("https://market.oplizing.ru/wp-content/uploads/2026/02/jaecoo-600x454.webp");
            background-size: cover;
            background-position: center;
          }
          .course-visual.experienced {
            background:
              linear-gradient(135deg, rgba(12, 19, 35, 0.78), rgba(21, 111, 116, 0.36)),
              url("https://market.oplizing.ru/wp-content/uploads/2026/02/hongqi-600x451.webp");
            background-size: cover;
            background-position: center;
          }
          .flow-line {
            min-height: 42px;
            padding: 8px 10px;
            border-color: rgba(255, 255, 255, 0.24);
            background: rgba(255, 255, 255, 0.14);
          }
          .flow-mark {
            color: var(--ink);
          }
          .course-summary .pill {
            min-height: 28px;
            border-color: rgba(21, 111, 116, 0.16);
            color: var(--accent-dark);
            background: #ffffff;
          }
          .student-start-card {
            grid-template-columns: minmax(0, 1fr) minmax(210px, 270px);
            gap: 14px;
            align-items: stretch;
            padding: 14px;
            border-color: rgba(13, 165, 168, 0.22);
            background:
              linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(241,250,250,0.98) 100%);
            box-shadow: 0 18px 38px rgba(12, 19, 35, 0.07);
          }
          .student-start-main {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 12px;
            align-items: center;
          }
          .student-start-copy {
            display: grid;
            gap: 8px;
            min-width: 0;
          }
          .student-now-label {
            width: fit-content;
            min-height: 24px;
            padding: 2px 9px;
            border-radius: 999px;
            background: var(--accent-soft);
            color: var(--accent-dark);
            font-size: 11px;
            font-weight: 800;
          }
          .student-start-main h2 {
            max-width: 34ch;
            font-family: "Oswald", "Open Sans", Arial, Helvetica, sans-serif;
            font-size: 26px;
            font-weight: 500;
            line-height: 1.1;
          }
          .student-main-action {
            min-width: 132px;
            min-height: 42px;
            box-shadow: 0 10px 20px rgba(13, 165, 168, 0.18);
          }
          .student-step-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
          }
          .student-step-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 30px;
            padding: 0 10px;
            border: 1px solid rgba(21, 111, 116, 0.14);
            border-radius: 999px;
            background: #ffffff;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
          }
          .student-step-pill.current {
            border-color: rgba(13, 165, 168, 0.34);
            background: var(--accent-soft);
            color: var(--accent-dark);
          }
          .student-step-pill::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: currentColor;
            opacity: 0.75;
          }
          .student-start-side {
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-color: rgba(13, 165, 168, 0.16);
            background: rgba(244, 251, 251, 0.9);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
          }
          .student-progress-ring {
            display: grid;
            place-items: center;
            width: 78px;
            height: 78px;
            border-radius: 50%;
            background:
              conic-gradient(var(--accent) var(--progress-angle), #dcebed 0);
            box-shadow: inset 0 0 0 1px rgba(21, 111, 116, 0.12);
          }
          .student-progress-ring strong {
            display: grid;
            place-items: center;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #ffffff;
            color: var(--ink);
            font-size: 18px;
          }
          .student-start-route-box {
            display: grid;
            gap: 7px;
            min-width: 0;
          }
          .student-start-progress-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
          }
          .student-start-progress-head span {
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
          }
          .student-start-progress-head strong {
            color: var(--ink);
            font-size: 20px;
            line-height: 1;
          }
          .student-quest-map {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
            align-items: center;
            gap: 6px;
            min-width: 0;
            padding: 5px 0 2px;
          }
          .quest-node {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            height: 38px;
            padding: 0 8px;
            border: 1px solid #dcebed;
            border-radius: 8px;
            background: #ffffff;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
          }
          .quest-node b {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #edf7f8;
            color: var(--accent-dark);
            font-size: 11px;
            line-height: 1;
          }
          .quest-node span {
            display: none;
          }
          .quest-arrow {
            display: none;
          }
          .quest-node.current {
            border-color: var(--accent);
            background: var(--accent);
            color: #ffffff;
            box-shadow: 0 10px 20px rgba(13, 165, 168, 0.28);
            transform: translateY(-1px);
          }
          .quest-node.current b {
            background: rgba(255, 255, 255, 0.95);
            color: var(--accent-dark);
          }
          .quest-node.done {
            border-color: rgba(21, 111, 116, 0.22);
            background: var(--accent-dark);
            color: #ffffff;
          }
          .quest-node.done b {
            background: rgba(255, 255, 255, 0.94);
            color: var(--accent-dark);
          }
          .quest-node.locked {
            background: #f4f7f8;
            color: #9aabad;
          }
          .quest-node.final {
            min-width: 0;
          }
          .student-start-compact-meta {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
          }
          .course-focus-grid {
            margin-top: -2px;
          }
          .focus-card {
            transition: transform 160ms ease, box-shadow 160ms ease;
          }
          .focus-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 32px rgba(12, 19, 35, 0.075);
          }
          .section-label {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            color: var(--ink);
            font-size: 14px;
          }
          .section-label::before {
            content: "";
            width: 26px;
            height: 2px;
            border-radius: 999px;
            background: var(--accent);
          }
          .path-step,
          .achievement-card,
          .module-block,
          .day-test-card,
          .exam-panel,
          .material-viewer {
            border-color: rgba(21, 111, 116, 0.14);
            box-shadow: 0 10px 24px rgba(12, 19, 35, 0.045);
          }
          .path-step {
            background: #ffffff;
          }
          .path-step.current {
            border-color: rgba(13, 165, 168, 0.55);
            background: linear-gradient(135deg, #ffffff 0%, #e9f8f8 100%);
            box-shadow: 0 12px 24px rgba(21, 111, 116, 0.12);
          }
          .path-step.passed {
            border-color: rgba(21, 111, 116, 0.28);
            background: #f3fbfb;
          }
          .admin-student-card,
          .attempt-item {
            box-shadow: none;
          }
          .achievement-card.current {
            border-color: rgba(244, 185, 63, 0.48);
            background: linear-gradient(135deg, #ffffff 0%, #fff8e6 100%);
          }
          .achievement-badge {
            border-radius: 8px;
            background: var(--ink);
          }
          .achievement-card.earned .achievement-badge {
            background: var(--accent-dark);
          }
          .module-block {
            overflow: hidden;
            background: #ffffff;
          }
          .module-head {
            background: #ffffff;
          }
          details.module-block[open] .module-head {
            background: linear-gradient(135deg, #ffffff 0%, #f3fbfb 100%);
          }
          .module-title {
            color: var(--ink);
            font-size: 15px;
          }
          .module-toggle {
            color: var(--accent-dark);
          }
          .module-toggle::after {
            border-color: rgba(21, 111, 116, 0.16);
            background: var(--accent-soft);
          }
          .day-quick-hint {
            border-color: rgba(21, 111, 116, 0.18);
            background: #ffffff;
            color: var(--accent-dark);
            font-weight: 600;
          }
          .day-material-item {
            border-color: rgba(21, 111, 116, 0.12);
            box-shadow: 0 6px 16px rgba(12, 19, 35, 0.035);
            transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
          }
          .day-material-item:hover {
            transform: translateY(-1px);
            border-color: rgba(13, 165, 168, 0.34);
            box-shadow: 0 12px 24px rgba(12, 19, 35, 0.07);
          }
          .day-material-number,
          .day-test-number,
          .lesson-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 30px;
            height: 30px;
            border-radius: 8px;
            background: var(--accent-soft);
            color: var(--accent-dark);
            font-weight: 800;
          }
          .day-material-link,
          .lesson-material-chip {
            color: var(--accent-dark);
          }
          .day-material-link {
            font-weight: 700;
          }
          .day-material-item.active {
            border-color: rgba(13, 165, 168, 0.55);
            background: linear-gradient(135deg, #ffffff 0%, #e9f8f8 100%);
          }
          .material-viewer {
            background: #ffffff;
          }
          .material-viewer-shell,
          .material-viewer-frame,
          .material-viewer-video {
            background:
              linear-gradient(135deg, #0c1323 0%, #156f74 100%);
          }
          .material-viewer-shell {
            isolation: isolate;
          }
          .material-viewer-shell::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            background:
              radial-gradient(circle at 24% 22%, rgba(101, 195, 207, 0.22), transparent 28%),
              linear-gradient(135deg, rgba(12, 19, 35, 0.18), rgba(21, 111, 116, 0.16));
            pointer-events: none;
          }
          .material-viewer-frame,
          .material-viewer-video,
          .bitrix-fallback,
          .case-study-card {
            position: relative;
            z-index: 1;
          }
          .material-viewer-frame,
          .material-viewer-video {
            display: block;
            aspect-ratio: 16 / 9;
          }
          .embedded-video-tools {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            max-width: calc(100% - 20px);
            padding: 6px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            background: rgba(12, 19, 35, 0.62);
            color: rgba(255, 255, 255, 0.82);
            font-size: 12px;
            backdrop-filter: blur(8px);
          }
          .embedded-video-tools .external-link-button {
            min-height: 30px;
            padding: 0 10px;
            border-color: rgba(255, 255, 255, 0.34);
            background: rgba(255, 255, 255, 0.95);
            white-space: nowrap;
          }
          .video-download-button {
            border-color: rgba(13, 165, 168, 0.32);
            background: var(--accent);
            color: #ffffff;
          }
          .video-download-button:hover {
            background: var(--accent-dark);
            color: #ffffff;
          }
          .material-viewer-shell.fallback {
            background:
              linear-gradient(135deg, #0c1323 0%, #156f74 58%, #65c3cf 100%);
          }
          .external-link-button {
            min-height: 36px;
            border-color: rgba(21, 111, 116, 0.18);
            border-radius: 999px;
            color: var(--accent-dark);
          }
          .external-link-button:hover {
            background: var(--accent-soft);
          }
          .day-test-card,
          .exam-panel .panel-head {
            background: linear-gradient(135deg, #ffffff 0%, #f3fbfb 100%);
          }
          .exam-panel {
            border-color: rgba(13, 165, 168, 0.42);
            position: relative;
          }
          .exam-panel::after {
            content: "";
            position: absolute;
            right: 18px;
            top: 18px;
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background:
              radial-gradient(circle at center, rgba(255, 255, 255, 0.92) 0 37%, transparent 38%),
              conic-gradient(from 0deg, #65c3cf, #156f74, #0c1323, #65c3cf);
            opacity: 0.18;
            pointer-events: none;
          }
          .exam-intro > p {
            max-width: 760px;
            margin: 0;
            color: var(--muted);
          }
          .exam-topic {
            border-color: rgba(21, 111, 116, 0.14);
            background: #ffffff;
            color: var(--accent-dark);
            font-weight: 600;
          }
          .metric,
          .admin-mini-metric,
          .progress-context {
            border-color: rgba(21, 111, 116, 0.14);
            background: #ffffff;
          }
          .message {
            border-color: rgba(21, 111, 116, 0.14);
            background: #ffffff;
          }
          .assistant-widget {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 40;
            width: min(420px, calc(100vw - 28px));
            color: var(--text);
          }
          .assistant-toggle {
            width: 100%;
            min-height: 48px;
            border: 0;
            border-radius: 999px;
            background: linear-gradient(135deg, #0ca6a6, #156f74);
            color: white;
            box-shadow: 0 18px 45px rgba(21, 111, 116, 0.26);
            font-weight: 900;
            cursor: pointer;
          }
          .assistant-widget.assistant-collapsed {
            display: none;
          }
          .assistant-panel {
            margin-top: 10px;
            border: 1px solid rgba(21, 111, 116, 0.16);
            border-radius: 18px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 26px 70px rgba(19, 36, 43, 0.22);
          }
          .assistant-collapsed .assistant-panel { display: none; }
          .assistant-head {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            padding: 14px;
            background: linear-gradient(135deg, rgba(12, 166, 166, 0.12), rgba(21, 111, 116, 0.08));
            border-bottom: 1px solid rgba(21, 111, 116, 0.12);
          }
          .assistant-head strong { display: block; font-size: 16px; }
          .assistant-head span {
            display: block;
            color: var(--muted);
            font-size: 12px;
            margin-top: 2px;
          }
          .assistant-body { padding: 12px; }
          .assistant-controls {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            margin-bottom: 10px;
          }
          .assistant-controls select,
          .assistant-controls button,
          .assistant-input-row textarea {
            border: 1px solid rgba(21, 111, 116, 0.16);
            border-radius: 12px;
            background: white;
          }
          .assistant-controls select,
          .assistant-controls button {
            min-height: 40px;
            padding: 0 12px;
          }
          .assistant-messages {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 300px;
            overflow: auto;
            padding: 2px 2px 10px;
          }
          .assistant-message {
            padding: 10px 12px;
            border-radius: 14px;
            line-height: 1.45;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
          }
          .assistant-message-user {
            align-self: flex-end;
            max-width: 86%;
            background: #e6fffb;
            border: 1px solid rgba(12, 166, 166, 0.2);
          }
          .assistant-message-ai {
            align-self: flex-start;
            max-width: 92%;
            background: #f8fafc;
            border: 1px solid rgba(21, 111, 116, 0.1);
          }
          .assistant-sources {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            margin-top: 8px;
            color: #5b6f75;
            font-size: 12px;
            line-height: 1.45;
          }
          .assistant-sources-label {
            flex: 1 0 100%;
            color: var(--muted);
            font-weight: 800;
          }
          .assistant-source-link {
            min-height: 34px;
            border: 1px solid rgba(21, 111, 116, 0.18);
            border-radius: 8px;
            padding: 6px 9px;
            background: #ffffff;
            color: var(--accent-dark);
            font: inherit;
            font-weight: 800;
            text-align: left;
            cursor: pointer;
          }
          .assistant-source-link:hover,
          .assistant-source-link:focus-visible {
            border-color: var(--accent);
            background: #effcfa;
            outline: none;
          }
          .assistant-actions,
          .assistant-feedback {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            margin-top: 10px;
          }
          .assistant-actions button,
          .assistant-feedback button {
            min-height: 30px;
            border: 1px solid rgba(21, 111, 116, 0.16);
            border-radius: 999px;
            background: #ffffff;
            color: var(--accent-dark);
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
          }
          .assistant-feedback span {
            color: var(--muted);
            font-size: 12px;
          }
          .assistant-quick {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 4px 0 10px;
          }
          .assistant-quick button,
          .assistant-inline-action {
            border: 1px solid rgba(21, 111, 116, 0.16);
            border-radius: 999px;
            background: white;
            min-height: 34px;
            padding: 0 10px;
            color: var(--accent-dark);
            font-weight: 800;
            cursor: pointer;
          }
          .assistant-input-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
          }
          .assistant-input-row textarea {
            resize: vertical;
            min-height: 64px;
            padding: 10px;
            font: inherit;
          }
          .assistant-input-row button:disabled {
            cursor: not-allowed;
            opacity: 0.52;
          }
          .assistant-status {
            min-height: 18px;
            margin-top: 8px;
            color: var(--muted);
            font-size: 12px;
          }
          .assistant-admin-panel {
            border: 1px solid rgba(21, 111, 116, 0.12);
            border-radius: 16px;
            padding: 12px;
            background: linear-gradient(135deg, rgba(12, 166, 166, 0.08), rgba(255, 255, 255, 0.96));
          }
          .assistant-admin-panel h3 { margin: 0 0 8px; font-size: 16px; }
          .assistant-admin-metrics {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin: 10px 0;
          }
          .assistant-admin-metrics div {
            border: 1px solid rgba(21, 111, 116, 0.12);
            border-radius: 12px;
            padding: 9px;
            background: white;
          }
          .assistant-admin-metrics span {
            display: block;
            color: var(--muted);
            font-size: 11px;
          }
          .assistant-admin-metrics strong {
            display: block;
            margin-top: 3px;
            font-size: 18px;
          }
          .assistant-admin-list {
            margin: 0;
            padding-left: 18px;
            color: var(--muted);
          }
          @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
              animation-duration: 0.01ms !important;
              animation-iteration-count: 1 !important;
              scroll-behavior: auto !important;
              transition-duration: 0.01ms !important;
            }
            button:active,
            .external-link-button:active,
            .day-material-link:active,
            .course-button:hover,
            .focus-card:hover,
            .day-material-item:hover,
            .quest-node.current {
              transform: none !important;
            }
          }
          @media (max-width: 860px) {
            main {
              grid-template-columns: 1fr;
              min-height: auto;
            }
            aside {
              align-self: start;
              border-right: 0;
              border-bottom: 1px solid var(--line);
            }
            .metric-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
            header { align-items: center; flex-direction: row; flex-wrap: wrap; }
            .brand-logo { width: 206px; height: 54px; }
            .toolbar { width: 100%; }
            .course-hero { grid-template-columns: 1fr; }
            .course-hero-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
            .course-visual { min-height: 136px; }
            .course-visual-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .flow-line { min-height: 28px; }
            .course-focus-grid { grid-template-columns: 1fr; }
            .day-outcome-grid,
            .day-test-metrics { grid-template-columns: 1fr; }
            .admin-insight-panel { grid-template-columns: 1fr; }
          }
          @media (max-width: 520px) {
            html, body {
              overflow-x: hidden;
            }
            header, main, aside, section, .panel, .panel-body, .course-hero, .course-visual {
              max-width: 100%;
              min-width: 0;
            }
            header, aside, section { padding: 12px; }
            header {
              overflow: hidden;
            }
            button,
            select,
            input,
            .external-link-button,
            .lesson-material-chip,
            .admin-support-flag {
              min-height: 44px;
            }
            .toolbar {
              display: block;
              align-items: start;
              max-width: 100%;
              min-width: 0;
            }
            #refreshButton {
              display: none;
            }
            .toolbar button {
              min-width: 0;
              padding-left: 10px;
              padding-right: 10px;
            }
            .session-badge {
              min-width: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            aside {
              display: grid;
              grid-template-columns: minmax(0, 1fr);
              gap: 10px;
            }
            .auth-box,
            .tabs,
            .tab,
            .assistant-nav-button {
              width: 100%;
              max-width: 100%;
              min-width: 0;
            }
            .auth-box {
              margin-bottom: 0;
              padding: 10px;
            }
            .auth-box #authMessage {
              display: none;
            }
            .auth-box.compact {
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 8px;
              min-height: 0;
              padding: 7px;
            }
            .auth-box.compact .auth-session-actions {
              flex: 0 0 auto;
            }
            .auth-box.compact #authMessage {
              display: none;
              flex: 1 1 auto;
              min-width: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .auth-box.compact button {
              min-height: 44px;
              padding: 0 10px;
            }
            .tabs {
              display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: 6px;
            }
            .tab,
            .assistant-nav-button {
              min-height: 44px;
              padding: 0 8px;
              text-align: left;
              font-size: 12px;
              font-weight: 700;
              overflow: visible;
              text-overflow: clip;
              white-space: normal;
            }
            .brand {
              align-items: flex-start;
              flex-direction: column;
              flex-wrap: wrap;
              gap: 8px 10px;
              width: 100%;
            }
            .brand-logo { width: 166px; height: 44px; }
            .brand-copy {
              flex: 1 1 auto;
              width: 100%;
            }
            .brand-kicker { display: none; }
            h1 {
              font-size: 14px;
              line-height: 1.25;
              overflow-wrap: anywhere;
              white-space: normal;
            }
            .toolbar { width: 100%; }
            .session-badge { max-width: 100%; }
            .panel-head {
              align-items: flex-start;
              flex-direction: column;
            }
            #courseList {
              display: grid;
              grid-template-columns: 1fr;
              gap: 10px;
              overflow-x: visible;
              padding: 0;
              scroll-snap-type: none;
            }
            #courseList .course-button {
              flex: initial;
              min-height: 82px;
              padding-right: 12px;
              scroll-snap-align: none;
            }
            #courseList .course-button::after {
              display: none;
            }
            #courseList .course-meta {
              display: none;
            }
            .metric-grid { grid-template-columns: 1fr; }
            .admin-course-metrics { grid-template-columns: 1fr; }
            .admin-insight-panel {
              gap: 8px;
              padding: 9px;
            }
            .admin-daily-item {
              grid-template-columns: 1fr;
            }
            .admin-daily-action {
              justify-self: start;
              white-space: normal;
            }
            .material-audit-head {
              display: grid;
              grid-template-columns: 1fr;
            }
            .material-audit-score {
              width: 100%;
              min-width: 0;
              text-align: left;
            }
            .material-audit-issue {
              grid-template-columns: 1fr;
            }
            .material-audit-status {
              justify-self: start;
            }
            .student-start-card {
              grid-template-columns: 1fr;
              gap: 8px;
              padding: 10px;
            }
            .mobile-continue-bar {
              position: sticky;
              bottom: 10px;
              z-index: 4;
              display: flex;
              margin: 8px 0 10px;
            }
            .mobile-continue-bar .student-main-action {
              min-height: 44px;
            }
            .student-start-main {
              grid-template-columns: 1fr;
              gap: 8px;
            }
            .student-start-main h2 {
              font-size: 20px;
              line-height: 1.18;
            }
            .student-start-main p {
              font-size: 12px;
            }
            .student-start-progress-head strong {
              font-size: 20px;
            }
            .student-start-side {
              grid-template-columns: auto minmax(0, 1fr);
              padding: 9px;
            }
            .student-quest-map {
              gap: 5px;
            }
            .quest-node {
              min-width: 0;
              height: 32px;
              padding: 0 7px;
              gap: 5px;
              font-size: 11px;
            }
            .quest-node b {
              width: 20px;
              height: 20px;
              font-size: 10px;
            }
            .quest-node.final {
              min-width: 0;
            }
            .quest-arrow {
              font-size: 12px;
            }
            .student-start-stats {
              grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 6px;
            }
            .student-start-stat {
              padding: 7px;
            }
            .student-start-stat strong {
              font-size: 14px;
            }
            .course-hero {
              gap: 8px;
              padding: 10px;
              overflow: hidden;
            }
            .course-hero-main {
              max-width: 100%;
              gap: 6px;
            }
            .course-eyebrow {
              font-size: 10px;
            }
            .course-hero h2 {
              max-width: 23ch;
              font-size: 17px;
              line-height: 1.25;
              overflow-wrap: anywhere;
              white-space: normal;
            }
            .course-hero-copy { display: none; }
            .course-hero-stats {
              grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 6px;
            }
            .course-hero-stats .hero-stat:last-child {
              grid-column: auto;
            }
            .hero-stat {
              min-width: 0;
              padding: 7px;
            }
            .hero-stat span { font-size: 10px; }
            .hero-stat strong { font-size: 14px; }
            .course-hero-main > .muted {
              display: none;
            }
            .course-visual {
              min-height: 104px;
              padding: 9px;
              overflow: hidden;
            }
            .course-visual::after { display: none; }
            .course-visual-title strong { font-size: 16px; }
            .course-visual-title span { display: none; }
            .course-visual-flow { display: none; }
            .course-media-card { margin-top: 6px; grid-template-columns: 34px minmax(0, 1fr); padding: 7px; }
            .media-play { width: 32px; height: 32px; }
            .media-play::before { left: 13px; top: 9px; }
            .media-copy span { display: none; }
            .course-focus-grid {
              grid-template-columns: 1fr;
              gap: 7px;
            }
            .focus-card {
              min-height: auto;
              padding: 9px 10px;
            }
            .focus-card span {
              font-size: 11px;
            }
            .focus-card strong {
              font-size: 13px;
              line-height: 1.35;
            }
            .course-action-strip {
              grid-template-columns: 1fr;
              gap: 8px;
            }
            .action-main,
            .action-side {
              padding: 10px;
            }
            .action-main strong {
              font-size: 18px;
            }
            .day-simple-steps {
              grid-template-columns: 1fr;
            }
            .case-metrics,
            .case-study-grid {
              grid-template-columns: 1fr;
            }
            .case-study-card {
              padding: 10px;
            }
            .case-study-media {
              min-height: 170px;
            }
            .case-study-media img {
              min-height: 170px;
            }
            .case-mini-media {
              min-height: 120px;
            }
            .case-mini-media img {
              min-height: 120px;
            }
            .case-study-hero {
              padding: 12px;
            }
            .case-study-hero h3 {
              font-size: 18px;
            }
            .case-gallery-head {
              display: grid;
            }
            .case-gallery-grid {
              grid-template-columns: 1fr;
            }
            .case-mini-summary {
              grid-template-columns: 30px minmax(0, 1fr);
            }
            .case-mini-arrow {
              grid-column: 2;
              justify-self: start;
            }
            .case-mini-metrics {
              grid-template-columns: 1fr;
            }
            .material-viewer-shell.fallback { min-height: 160px; }
            .bitrix-fallback { padding: 14px; }
            .bitrix-fallback strong { font-size: 17px; }
            .learning-path, .achievement-grid { grid-template-columns: 1fr; }
            .path-step {
              min-height: 0;
              padding: 9px 10px 9px 14px;
              gap: 4px;
            }
            .path-step strong {
              font-size: 12px;
              line-height: 1.3;
            }
            .path-step span {
              font-size: 11px;
            }
            .day-outcome-card { padding: 12px; }
            .day-outcome-grid,
            .day-test-metrics { grid-template-columns: 1fr; }
            .day-material-item {
              grid-template-columns: 34px 30px minmax(0, 1fr);
              gap: 10px;
            }
            .day-material-item > .status {
              grid-column: 3;
              justify-self: start;
            }
            .day-material-number,
            .material-type-dot {
              width: 30px;
              min-width: 30px;
              height: 30px;
            }
            .material-viewer-shell,
            .material-viewer-frame,
            .material-viewer-video {
              min-height: 0;
            }
            .embedded-video-tools {
              display: flex;
              top: 8px;
              left: 8px;
              right: 8px;
              justify-content: space-between;
              max-width: none;
              background: rgba(255, 255, 255, 0.95);
              color: var(--muted);
            }
            .embedded-video-tools .external-link-button {
              min-height: 44px;
              border-color: rgba(21, 111, 116, 0.18);
            }
            .progress-celebration {
              grid-template-columns: 1fr;
              padding: 11px;
            }
            .progress-ring {
              width: 60px;
              height: 60px;
            }
            .progress-ring-inner {
              width: 46px;
              height: 46px;
            }
            .module-head {
              align-items: flex-start;
              flex-direction: column;
              gap: 10px;
              padding: 12px;
            }
            .day-status-row {
              width: 100%;
              justify-content: space-between;
            }
            .module-toggle { white-space: normal; }
            .lesson-card-button {
              grid-template-columns: 28px minmax(0, 1fr);
              padding: 10px 8px;
            }
            .day-material-item {
              grid-template-columns: 30px 30px minmax(0, 1fr);
              padding: 10px;
            }
            .day-material-item .status {
              grid-column: 3;
              justify-self: start;
            }
            .lesson-materials-inline { padding: 0 8px 10px 46px; }
            .assistant-widget {
              left: 10px;
              right: 10px;
              bottom: 82px;
              width: auto;
            }
            .assistant-widget:not(.assistant-collapsed) {
              top: 8px;
              bottom: auto;
            }
            .assistant-widget:not(.assistant-collapsed) .assistant-panel {
              max-height: calc(100dvh - 16px);
              margin-top: 0;
              overflow-y: auto;
              overscroll-behavior: contain;
            }
            .assistant-widget.assistant-collapsed {
              left: auto;
              width: 44px;
              max-width: 44px;
            }
            .assistant-widget.assistant-collapsed .assistant-toggle {
              width: 44px;
              min-width: 44px;
              min-height: 44px;
              padding: 0;
              border-radius: 50%;
              font-size: 0;
            }
            .assistant-widget.assistant-collapsed .assistant-toggle::after {
              content: "AI";
              font-size: 14px;
            }
            .assistant-controls,
            .assistant-input-row,
            .assistant-admin-metrics {
              grid-template-columns: 1fr;
            }
            .assistant-messages {
              max-height: 48vh;
            }
            .assistant-source-link {
              min-height: 44px;
            }
            .row input, .row select {
              flex: 1 1 160px;
              min-width: 0;
            }
          }

          .theme-franchise {
            background:
              linear-gradient(122deg, rgba(10, 39, 51, 0.98), rgba(17, 111, 116, 0.9)),
              #123a45;
          }
          .compact-course-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            min-width: 0;
            padding: 14px 16px;
            border-bottom: 1px solid var(--line);
            background: #ffffff;
          }
          .compact-course-header div {
            min-width: 0;
          }
          .compact-course-header span:first-child {
            display: block;
            margin-bottom: 3px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
          }
          .compact-course-header h2 {
            margin: 0;
            font-size: 20px;
            line-height: 1.25;
            overflow-wrap: anywhere;
          }
          .compact-course-header > .pill {
            flex: 0 0 auto;
            white-space: nowrap;
          }
          .course-visual.franchise {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.24);
          }
          .franchise-learning-path {
            grid-template-columns: repeat(5, minmax(0, 1fr));
          }
          .franchise-module .day-start-card {
            border-left: 4px solid var(--accent);
          }
          .franchise-video-controls {
            display: grid;
            gap: 12px;
            padding: 14px;
            background: #f4f9f9;
            border-top: 1px solid var(--line);
          }
          .franchise-video-shell {
            display: grid;
            gap: 0;
            min-height: 0;
            aspect-ratio: auto;
            overflow: hidden;
            background: #ffffff;
          }
          .franchise-video-shell::before {
            display: none;
          }
          .franchise-video-shell .material-viewer-video {
            width: 100%;
            height: auto;
            min-height: 0;
            aspect-ratio: 16 / 9;
          }
          .franchise-video-shell .embedded-video-tools {
            position: static;
            inset: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 8px;
            max-width: none;
            padding: 10px;
            border: 0;
            border-top: 1px solid var(--line);
            border-radius: 0;
            background: #ffffff;
            color: var(--muted);
            backdrop-filter: none;
          }
          .franchise-video-shell .embedded-video-tools .external-link-button {
            min-height: 44px;
          }
          .franchise-video-shell .embedded-video-tools .video-download-button,
          .franchise-video-shell .embedded-video-tools .video-download-button:hover {
            border-color: var(--accent);
            background: var(--accent);
            color: #ffffff;
          }
          .franchise-video-controls label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
          }
          .franchise-video-controls select {
            min-height: 44px;
          }
          .video-chapters {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
          }
          .video-chapters .section-label {
            grid-column: 1 / -1;
          }
          .video-chapter {
            min-height: 48px;
            display: grid;
            grid-template-columns: 48px minmax(0, 1fr);
            gap: 8px;
            align-items: center;
            text-align: left;
            background: #fff;
          }
          .video-chapter span {
            color: var(--accent-strong);
            font-variant-numeric: tabular-nums;
          }
          .video-chapter strong {
            overflow-wrap: anywhere;
          }
          .franchise-units {
            margin: 20px 0;
            padding: 18px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #f7fbfb;
          }
          .franchise-unit-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
          }
          .franchise-unit-card {
            display: grid;
            align-content: start;
            gap: 12px;
            padding: 16px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
          }
          .franchise-unit-card h3,
          .franchise-unit-card p { margin: 8px 0 0; }
          .franchise-unit-chapters {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
          }

          /* Editorial course system: hierarchy and calm surfaces inspired by the supplied guide. */
          body {
            background: var(--bg);
            color: var(--ink);
            font: 14px/1.6 "Montserrat", Arial, Helvetica, sans-serif;
          }
          header {
            border-bottom-color: var(--line);
            background: #ffffff;
            box-shadow: none;
            backdrop-filter: none;
          }
          .brand-kicker {
            color: var(--guide-gold);
            font-size: 11px;
            letter-spacing: 0;
          }
          h1,
          .panel-title,
          .module-title,
          .course-hero h2,
          .course-button strong,
          .student-start-main h2 {
            font-family: "Montserrat", Arial, Helvetica, sans-serif;
            font-weight: 700;
            letter-spacing: 0;
          }
          main,
          aside {
            background: transparent;
          }
          aside {
            background: #ffffff;
          }
          button,
          select,
          input,
          textarea,
          .button-like,
          button.primary,
          .external-link-button {
            border-radius: 6px;
          }
          button.primary {
            box-shadow: none;
          }
          .auth-box.compact #authMessage {
            display: none;
          }
          .tab.active {
            background: var(--guide-panel);
            box-shadow: none;
          }
          .panel,
          .auth-box,
          .admin-student-card,
          .attempt-item,
          .quiz-question,
          .path-step,
          .achievement-card,
          .module-block,
          .day-test-card,
          .exam-panel,
          .material-viewer {
            border-color: var(--line);
            box-shadow: none;
          }
          .panel,
          .panel-head {
            background: #ffffff;
          }
          .course-button {
            min-height: 96px;
            padding: 16px;
            border-color: var(--line);
            background: #ffffff;
            box-shadow: none;
          }
          .course-button:hover {
            transform: none;
            border-color: rgba(13, 165, 168, 0.45);
            box-shadow: none;
          }
          .course-button.active {
            border-color: var(--accent);
            background: #f2fbfb;
            box-shadow: none;
          }
          .course-button::before {
            inset: 0 auto 0 0;
            width: 4px;
            border-radius: 6px 0 0 6px;
          }
          .course-button::after {
            display: none;
          }
          .course-button strong {
            font-size: 18px;
            line-height: 1.25;
          }
          .course-card-mode {
            border-radius: 4px;
            background: var(--guide-panel);
          }
          .compact-course-header {
            padding: 18px 20px;
            border-bottom-color: var(--line);
            background: #ffffff;
          }
          .compact-course-header span:first-child {
            color: var(--guide-gold);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0;
          }
          .compact-course-header h2 {
            margin-top: 4px;
            font-family: "Montserrat", Arial, Helvetica, sans-serif;
            font-size: 22px;
            font-weight: 700;
          }
          .compact-course-header > .pill {
            border-radius: 4px;
            background: var(--guide-panel);
          }
          .student-start-card {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
            margin-bottom: 18px;
            padding: 0;
            overflow: hidden;
            border-color: var(--line);
            background: #ffffff;
            box-shadow: none;
          }
          .student-start-main {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 24px;
            align-items: center;
            padding: 24px;
          }
          .student-start-copy {
            gap: 7px;
          }
          .student-now-label {
            min-height: 0;
            padding: 0;
            border-radius: 0;
            background: transparent;
            color: var(--guide-gold);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0;
          }
          .student-start-main h2 {
            max-width: 38ch;
            font-size: 28px;
            line-height: 1.18;
          }
          .student-start-main p {
            max-width: 66ch;
            color: var(--muted);
            font-size: 13px;
          }
          .student-main-action {
            min-width: 148px;
            min-height: 46px;
            box-shadow: none;
          }
          .student-start-side {
            display: block;
            padding: 20px 24px 22px;
            border: 0;
            border-top: 1px solid var(--line);
            border-radius: 0;
            background: var(--guide-panel);
            box-shadow: none;
          }
          .student-start-route-box {
            gap: 9px;
          }
          .student-start-progress-head {
            align-items: baseline;
          }
          .student-start-progress-head strong {
            font-size: 19px;
            line-height: 1.25;
          }
          .student-start-progress-head span {
            color: var(--accent-dark);
            font-size: 13px;
            font-weight: 700;
          }
          .student-route-hint {
            max-width: 74ch;
            margin: 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.5;
          }
          .progress-bar {
            height: 6px;
            border-radius: 3px;
            background: #dfe5ec;
          }
          .student-quest-map {
            display: flex;
            align-items: stretch;
            gap: 7px;
            padding: 5px 0 1px;
          }
          .quest-node {
            flex: 1 1 0;
            min-width: 64px;
            height: 46px;
            gap: 7px;
            padding: 0 9px;
            border-radius: 6px;
            background: #ffffff;
            font-size: 11px;
          }
          .quest-node b {
            width: 24px;
            height: 24px;
          }
          .quest-node span {
            display: inline;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .quest-node.final {
            flex-grow: 1.3;
          }
          .quest-arrow {
            display: inline-flex;
            align-items: center;
            color: #98a2b3;
            font-weight: 700;
          }
          .quest-node.current {
            box-shadow: none;
            transform: none;
          }
          .student-start-compact-meta {
            font-size: 11px;
          }
          .module-block {
            margin-top: 10px;
            border-radius: 6px;
            background: #ffffff;
          }
          .module-head,
          details.module-block[open] .module-head {
            padding: 16px 18px;
            background: #ffffff;
          }
          details.module-block[open] .module-head {
            border-bottom-color: var(--line);
          }
          .module-title {
            font-size: 15px;
            font-weight: 700;
          }
          .module-toggle::after {
            border-radius: 4px;
            background: var(--guide-panel);
          }
          details.module-block[open] .module-toggle-label {
            font-size: 0;
          }
          details.module-block[open] .module-toggle-label::after {
            content: "Свернуть";
            font-size: 14px;
          }
          .day-body {
            gap: 10px;
            padding: 14px 16px 18px;
            background: #fbfcfe;
          }
          .day-start-card {
            padding: 11px 13px;
            border-color: #dfe6d0;
            border-radius: 6px;
            background: var(--guide-highlight);
          }
          .day-start-head {
            align-items: center;
          }
          .day-start-head > div {
            display: flex;
            align-items: baseline;
            gap: 10px;
            flex-wrap: wrap;
          }
          .day-start-head strong {
            font-size: 14px;
          }
          .day-start-head span {
            font-size: 12px;
          }
          .day-test-readiness {
            flex: 0 0 auto;
            color: #4f5f2f !important;
            font-weight: 700;
          }
          .day-material-item {
            border-radius: 6px;
            box-shadow: none;
          }
          .day-material-item:hover {
            transform: none;
            box-shadow: none;
          }
          .day-material-item.active {
            background: #f2fbfb;
          }
          .day-test-card,
          .exam-panel .panel-head {
            background: var(--guide-panel);
          }
          .exam-panel {
            border-color: var(--line);
          }
          .exam-panel::after {
            display: none;
          }
          .quiz-question {
            border-radius: 6px;
          }

          @media (max-width: 760px) {
            body {
              font-size: 16px;
            }
            body.user-authenticated header {
              min-height: 62px;
              padding: 8px 12px;
            }
            body.user-authenticated .brand {
              width: auto;
              align-items: center;
              flex-direction: row;
            }
            body.user-authenticated .brand-logo {
              width: 148px;
              height: 42px;
            }
            body.user-authenticated .brand-copy,
            body.user-authenticated .toolbar {
              display: none;
            }
            body.user-authenticated aside {
              display: grid;
              grid-template-columns: minmax(0, 1fr) auto;
              gap: 6px;
              align-items: center;
              padding: 8px 12px;
            }
            body.user-authenticated .tabs {
              order: 1;
              display: grid;
              grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 4px;
            }
            body.user-authenticated.admin-session .tabs {
              grid-template-columns: repeat(4, minmax(0, 1fr));
            }
            body.user-authenticated .tab,
            body.user-authenticated .assistant-nav-button {
              min-height: 44px;
              padding: 4px 6px;
              font-size: 12px;
              line-height: 1.2;
              text-align: center;
            }
            body.user-authenticated .auth-box.compact {
              order: 2;
              margin: 0;
              padding: 0;
              border: 0;
              background: transparent;
            }
            body.user-authenticated .auth-box.compact button {
              min-height: 44px;
              padding: 0 9px;
            }
            .compact-course-header {
              align-items: flex-start;
              flex-direction: column;
              padding: 12px;
            }
            .compact-course-header h2 {
              font-size: 18px;
            }
            .student-main-action {
              min-height: 44px;
            }
            .student-start-main {
              grid-template-columns: 1fr;
              gap: 14px;
              padding: 18px 16px;
            }
            .student-start-main h2 {
              font-size: 22px;
            }
            .student-start-main .lesson-actions,
            .student-start-main .student-main-action {
              width: 100%;
            }
            .student-start-side {
              padding: 16px;
            }
            .student-quest-map {
              display: grid;
              grid-template-columns: repeat(4, minmax(0, 1fr));
              gap: 6px;
            }
            .student-quest-map.compact {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .quest-arrow {
              display: none;
            }
            .quest-node {
              min-width: 0;
              height: 44px;
              padding: 0 6px;
              font-size: 12px;
            }
            .quest-node b {
              font-size: 12px;
            }
            .quest-node span {
              display: inline;
            }
            .student-now-label,
            .student-route-hint,
            .student-start-compact-meta,
            .course-card-mode,
            .case-mini-metrics span,
            .case-mini-body span,
            .case-photo-badge {
              font-size: 12px;
            }
            .case-gallery-feature .case-study-media,
            .case-gallery-feature .case-study-media img {
              min-height: 190px;
            }
            .case-gallery-feature .case-study-media img {
              max-height: 230px;
            }
            .case-gallery-categories {
              flex-wrap: nowrap;
              overflow-x: auto;
              padding-bottom: 2px;
              scrollbar-width: none;
              scroll-snap-type: x proximity;
            }
            .case-gallery-categories::-webkit-scrollbar {
              display: none;
            }
            .case-gallery-categories span {
              flex: 0 0 auto;
              min-height: 44px;
              scroll-snap-align: start;
            }
            .day-start-head {
              display: grid;
            }
            .day-test-readiness {
              justify-self: start;
            }
            .day-material-link {
              min-height: 44px;
              padding-block: 8px;
            }
            .franchise-video-shell .embedded-video-tools .external-link-button {
              flex: 1 1 120px;
            }
            .franchise-learning-path,
            .video-chapters,
            .franchise-unit-grid {
              grid-template-columns: 1fr;
            }
          }