:root {
        --bg: #f3f4f8;
        --bg-elev: #eceff5;
        --card: #ffffff;
        --text: #111827;
        --muted: #5f6b82;
        --primary: #111827;
        --primary-contrast: #ffffff;
        --border: #d9deea;
        --success: #15995c;
        --danger: #d43b5c;
        --radius: 14px;
        --shadow: 0 14px 36px rgba(17, 24, 39, .08);
        --shadow-soft: 0 8px 22px rgba(17, 24, 39, .06);
        --shadow-strong: 0 18px 44px rgba(17, 24, 39, .14);
        --ring: rgba(17, 24, 39, .2);
        --surface-tint: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.3));
        --accent-1: #5f6fff;
        --accent-2: #8a5cf6;
        --accent-gradient: linear-gradient(135deg, var(--accent-1), var(--accent-2));
        --accent-glow: 0 12px 28px rgba(95, 111, 255, .34);
        --display: 'Manrope', 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        --ui: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        --reading: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      }

      html, body { height: 100%; }
      html, body {
        margin: 0;
        background: var(--bg) !important;
        color: var(--text);
        font-family: var(--reading);
        line-height: 1.65;
        letter-spacing: -0.01em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overscroll-behavior-y: none;
      }
      body.content-flat-bg {
        background: #f3f4f8 !important;
      }
      body:has(#panel-content.active) {
        background: #f3f4f8 !important;
      }

      .container { padding: 20px; max-width: 980px; margin: 0 auto; }
      /* глобальный отступ сверху на всякий случай для будущих изменений safe-area */
      body { padding-top: env(safe-area-inset-top); }

      .header {
        position: sticky; top: 0; z-index: 10;
        padding: calc(2px + env(safe-area-inset-top)) 0 1px;
        background: linear-gradient(180deg, rgba(243, 244, 248, .94) 0%, rgba(243, 244, 248, .82) 100%);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(95, 107, 130, .14);
        transition: padding .2s ease, background-color .2s ease;
      }
      .header > .container {
        position: relative;
        z-index: 1;
      }
      .header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        background: linear-gradient(90deg, rgba(95,111,255,.05), rgba(95,111,255,.55), rgba(138,92,246,.55), rgba(138,92,246,.05));
        pointer-events: none;
        z-index: 0;
      }
      .brand { display: flex; align-items: center; gap: 6px; transition: gap .2s ease; }
      .logo {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        object-fit: cover;
        border: 1px solid var(--border);
        box-shadow: 0 10px 24px rgba(17, 24, 39, .14);
        transition: width .2s ease, height .2s ease, border-radius .2s ease;
      }
      .title {
        font-family: var(--display);
        font-size: 18px;
        line-height: 1.1;
        letter-spacing: -0.03em;
        font-weight: 800;
        transition: font-size .2s ease;
      }
      .subtitle {
        color: var(--muted);
        font-size: 11px;
        margin-top: 1px;
        max-height: 16px;
        opacity: 1;
        overflow: hidden;
        transition: max-height .2s ease, opacity .18s ease, margin-top .2s ease;
      }

      .tabs-shell {
        margin-top: 3px;
        overflow: visible;
        transition: margin-top .2s ease;
      }
      .tabs {
        display: flex; gap: 6px;
        /* Horizontal scroll only inside inner row */
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        padding: 2px 2px 23px;
        margin-left: -2px;
        margin-right: -2px;
        margin-bottom: -10px;
        scrollbar-width: none;
      }
      .tabs::-webkit-scrollbar { display: none; }
      .tab {
        flex: 0 0 auto; padding: 7px 10px; cursor: pointer; user-select: none; white-space: nowrap;
        color: var(--muted);
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--bg-elev);
        position: relative;
        font-family: var(--ui);
        font-weight: 600;
        font-size: 12px;
        transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .16s ease, padding .2s ease, font-size .2s ease;
      }
      .tab:hover { border-color: #b8c1d5; background: #f0f3fa; transform: translateY(0); box-shadow: 0 6px 14px rgba(17, 24, 39, .08); }
      .tab.active {
        color: var(--primary-contrast);
        background: var(--accent-gradient);
        border-color: transparent;
        box-shadow: 0 8px 22px rgba(95,111,255,.25);
      }
      .tab .tab-label { color: inherit; }

      body.header-compact .header {
        padding: calc(1px + env(safe-area-inset-top)) 0 1px;
      }
      body.header-compact .brand { gap: 6px; }
      body.header-compact .logo {
        width: 28px;
        height: 28px;
        border-radius: 8px;
      }
      body.header-compact .title { font-size: 16px; }
      body.header-compact .subtitle {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
      }
      body.header-compact .tabs-shell {
        margin-top: 3px;
      }
      body.header-compact .tabs {
        padding: 1px 2px 18px;
        margin-bottom: -10px;
      }
      body.header-compact .tab {
        padding: 6px 9px;
        font-size: 12px;
      }

      .content { padding: 18px 20px 24px; background: transparent; }
      /* avoid content under sticky header */
      .container.content { padding-top: 12px; }

      /* Added: panels visibility */
      .panel { display: none; }
      .panel.active {
        display: block;
        animation: panel-enter .24s ease both;
      }
      #panel-content { background: transparent; }

      @keyframes panel-enter {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
      .split-toolbar { justify-content: space-between; align-items: flex-end; gap: 14px; }
      .split-toolbar-left { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; }
      .split-toolbar-right { display:flex; gap:14px; align-items:flex-end; }
      .vacancy-plan-card {
        margin-top: 12px;
        display: grid;
        gap: 10px;
      }
      .vacancy-plan-textarea {
        width: 100%;
        min-height: 124px;
        resize: vertical;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px;
        outline: none;
        font: inherit;
        line-height: 1.5;
        box-sizing: border-box;
      }
      .vacancy-plan-textarea:focus {
        border-color: rgba(95,111,255,.55);
        box-shadow: 0 0 0 3px rgba(95,111,255,.14);
      }
      .vacancy-plan-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .vacancy-plan-result {
        display: grid;
        gap: 10px;
      }
      .vacancy-plan-summary {
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #f8faff;
      }
      .vacancy-priority-list {
        display: grid;
        gap: 8px;
      }
      .vacancy-priority-item {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #fff;
        padding: 8px 10px;
      }
      .vacancy-priority-head {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
      }
      .vacancy-priority-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid rgba(95,111,255,.4);
        background: rgba(95,111,255,.12);
        color: #2d3ea8;
        font-size: 11px;
        font-weight: 700;
      }
      .vacancy-question-list {
        margin: 0;
        padding-left: 18px;
        display: grid;
        gap: 4px;
      }
      .vacancy-plan-keywords {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .vacancy-plan-keyword {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: #f3f6fc;
        font-size: 11px;
      }
      .section-kicker {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #52607a;
        margin-bottom: 8px;
      }
      .section-title {
        font-family: var(--display);
        font-size: 30px;
        line-height: 1.08;
        letter-spacing: -0.035em;
        margin: 0 0 8px;
      }
      .section-subtitle {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
        max-width: 640px;
        margin: 0;
      }
      .editorial-intro {
        margin: 4px 0 18px;
        padding: 4px 0 14px;
        border-bottom: 1px solid rgba(95, 107, 130, .2);
        position: relative;
      }
      .editorial-intro::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: clamp(120px, 36vw, 260px);
        height: 2px;
        border-radius: 999px;
        background: var(--accent-gradient);
        box-shadow: 0 0 16px rgba(95,111,255,.4);
        opacity: .95;
      }
      .status-hero {
        margin: 0 0 10px;
      }
      .status-hero .section-subtitle {
        max-width: 720px;
      }
      .status-kpis {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }
      .status-kpi-item {
        min-width: 0;
      }
      .section-heading {
        font-weight: 700;
        font-size: 15px;
        margin-bottom: 8px;
        letter-spacing: -0.01em;
      }
      .recruiters-list {
        display: grid;
        gap: 10px;
        margin-top: 10px;
      }
      .recruiters-row {
        display: grid;
        grid-template-columns: minmax(180px, 280px) 1fr;
        gap: 12px;
        align-items: start;
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
      }
      .recruiters-company {
        font-weight: 700;
        font-size: 13px;
        line-height: 1.35;
      }
      .recruiters-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .recruiter-link {
        display: inline-block;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
        color: var(--muted);
      }
      .recruiter-link:hover {
        text-decoration: underline;
        color: var(--text);
      }
      .recruiters-group {
        margin-top: 14px;
      }
      .recruiters-group-title {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -0.01em;
        margin-bottom: 6px;
      }

      select, .btn {
        appearance: none;
        padding: 10px 13px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--card);
        color: var(--text);
        font-family: var(--ui);
      }
      .btn { cursor: pointer; transition: transform .12s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease; font-weight: 600; }
      .btn:hover { border-color: #b5bdd0; box-shadow: var(--shadow-soft); transform: translateY(-1px); }
      .btn:active { transform: translateY(1px); }
      .btn-primary {
        background: var(--accent-gradient) !important;
        color: var(--primary-contrast) !important;
        border-color: transparent !important;
        box-shadow: var(--accent-glow), var(--shadow-strong) !important;
      }
      .btn-primary:hover { box-shadow: 0 14px 34px rgba(95,111,255,.42), var(--shadow-strong) !important; }
      .btn-ghost { background: #f7f8fc; }
      .btn:focus-visible,
      .tab:focus-visible,
      select:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--ring);
      }

      /* Chips (for multi-select) */
      .chips { display: flex; gap: 6px; flex-wrap: wrap; }
      .chip {
        position: relative;
        padding: 6px 10px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: #f5f7fc;
        color: var(--muted);
        cursor: pointer;
        user-select: none;
        font-family: var(--ui);
        font-size: 12px;
        line-height: 1.2;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
      }
      .chip:hover { transform: translateY(-1px); border-color: #c6cee0; }
      /* spacing handled by .chips gap */
      .chip .chip-label { position: relative; z-index: 1; }
      .chip.active {
        color: var(--primary-contrast);
        background: var(--accent-gradient);
        border-color: transparent;
      }

      .card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 18px;
        box-shadow: var(--shadow);
        background-image: var(--surface-tint);
        transition: box-shadow .22s ease, transform .16s ease, border-color .22s ease;
      }
      .card:hover { box-shadow: var(--shadow-strong); border-color: #ced5e6; }
      #panel-content .card {
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        transition: none;
        background-image: none;
        background-color: transparent;
      }
      /* Learning tab: render content without card frame */
      .content-plain-shell {
        background: transparent;
        border: none;
        box-shadow: none;
        background-image: none;
        padding: 0;
      }
      .content-plain-shell:hover {
        box-shadow: none;
        border-color: transparent;
      }

      .muted { color: var(--muted); font-size: 12px; }
      .spacer { height: 8px; }

      .question { font-weight: 700; font-size: 19px; margin: 8px 0 6px; letter-spacing: -0.02em; }
      .swipe-card {
        position: relative;
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px;
        background: rgba(255,255,255,.82);
        transform: translateX(0) rotate(0deg);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
        touch-action: none;
        overscroll-behavior: contain;
        -webkit-user-select: none;
        user-select: none;
        will-change: transform;
      }
      .swipe-card.dragging {
        transition: none;
        box-shadow: 0 12px 28px rgba(17,24,39,.12);
      }
      .swipe-card-top {
        z-index: 2;
      }
      .swipe-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 10px;
      }
      .swipe-hint {
        margin-top: 8px;
        font-size: 11px;
        color: var(--muted);
      }

      /* Soft reading adjustments */
      .card, .muted, .flash, .option { font-weight: 400; }
      .card p { margin: 0 0 12px; }
      .flash > div { margin: 4px 0; }
      .flash > div:last-child { margin-bottom: 0; }
      .option { line-height: 1.6; }

      .badge { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 999px; background: #f5f7fc; border: 1px solid var(--border); font-size: 12px; font-family: var(--ui); }
      .kpi {
        font-size: clamp(26px, 4vw, 34px);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.05;
      }
      .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

      /* Safe wrapping for long content to prevent layout breakages */
      .question,
      .flash,
      .options,
      .option,
      #content-list,
      #content-list div,
      .muted {
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
      }
      /* Ensure grid/flex children can shrink within container */
      #content-list > div,
      #content-list > div > div,
      .card,
      .row {
        min-width: 0;
      }

      .options { display: grid; gap: 10px; margin-top: 10px; }
      .option {
        padding: 12px;
        border-radius: 12px;
        background: #f8f9fc;
        border: 1px solid var(--border);
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .2s ease;
      }
      .option:hover { background: #f1f4fa; box-shadow: 0 8px 18px rgba(17, 24, 39, .08); transform: translateY(-1px); }
      .option:active { transform: translateY(1px); }
      .option.correct { border-color: rgba(21,153,92,.6); box-shadow: 0 0 0 3px rgba(21,153,92,.14) inset; }
      .option.wrong { border-color: rgba(212,59,92,.6); box-shadow: 0 0 0 3px rgba(212,59,92,.12) inset; }

      .flash { display: grid; gap: 6px; }

      /* progress bars */
      .progress { height: 8px; border: 1px solid var(--border); border-radius: 999px; background: #eef2f9; overflow: hidden; }
      .progress-fill { height: 100%; background: var(--primary); transition: width .35s ease; }

      /* Weekly rating stars */
      .wanted-stars { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
      .wanted-star { font-size: 18px; line-height: 1; color: #111827; }
      .wanted-star.off { opacity: .18; }

      .footer-safe { height: calc(8px + env(safe-area-inset-bottom)); }

      /* Build footer */
      .build-footer {
        position: fixed;
        right: 8px;
        bottom: calc(4px + env(safe-area-inset-bottom));
        font-size: 10px;
        color: #8b95aa;
        background: transparent;
        pointer-events: none;
        z-index: 50;
      }
      .scroll-top-btn {
        position: fixed;
        right: 14px;
        bottom: calc(20px + env(safe-area-inset-bottom));
        width: 38px;
        height: 38px;
        border-radius: 999px;
        border: 1px solid rgba(95, 111, 255, .35);
        background: var(--accent-gradient);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 10px 22px rgba(95,111,255,.3);
        opacity: 0;
        transform: translateY(8px) scale(.96);
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
        z-index: 55;
      }
      .scroll-top-btn.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }
      .scroll-top-btn:hover {
        box-shadow: 0 14px 26px rgba(95,111,255,.36);
      }
      .answer-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, .28);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease;
        z-index: 70;
      }
      .answer-sheet-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
      }
      .answer-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 72vh;
        background: #fff;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border: 1px solid var(--border);
        box-shadow: 0 -18px 38px rgba(17,24,39,.18);
        transform: translateY(100%);
        transition: transform .2s ease;
        z-index: 71;
        display: grid;
        grid-template-rows: auto 1fr auto;
      }
      .answer-sheet.visible { transform: translateY(0); }
      .answer-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
      }
      .answer-sheet-title {
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      .answer-sheet-close {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: #f5f7fc;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
      }
      .answer-sheet-content {
        padding: 12px 14px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      .answer-sheet-footer {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        display: flex;
        gap: 8px;
      }
      body.sheet-open { overflow: hidden; }
      .ai-coach-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, .34);
        backdrop-filter: blur(4px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease;
        z-index: 72;
      }
      .ai-coach-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
      }
      .ai-coach-modal {
        position: fixed;
        left: 50%;
        top: 50%;
        width: min(680px, calc(100% - 24px));
        max-height: min(86vh, 760px);
        transform: translate(-50%, -46%);
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 22px 42px rgba(17,24,39,.24);
        opacity: 0;
        pointer-events: none;
        transition: transform .2s ease, opacity .2s ease;
        z-index: 73;
        display: grid;
        grid-template-rows: auto 1fr;
      }
      .ai-coach-modal.visible {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%);
      }
      .ai-coach-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
      }
      .ai-coach-title {
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .ai-coach-close {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: #f5f7fc;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
      }
      .ai-coach-body {
        padding: 14px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        display: grid;
        gap: 10px;
      }
      .ai-coach-question {
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #f8faff;
        font-size: 14px;
        line-height: 1.5;
      }
      .ai-coach-textarea {
        width: 100%;
        min-height: 140px;
        resize: vertical;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px;
        outline: none;
        font: inherit;
        line-height: 1.5;
        box-sizing: border-box;
      }
      .ai-coach-textarea:focus {
        border-color: rgba(95,111,255,.55);
        box-shadow: 0 0 0 3px rgba(95,111,255,.14);
      }
      .ai-coach-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .ai-mic-btn {
        min-width: 44px;
      }
      .ai-mic-btn.recording {
        border-color: rgba(212,59,92,.56);
        box-shadow: 0 0 0 3px rgba(212,59,92,.16);
        animation: ai-mic-pulse 1.2s ease-in-out infinite;
      }
      @keyframes ai-mic-pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.06); }
        100% { transform: scale(1); }
      }
      .ai-grade {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 14px;
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: #fff;
      }
      .ai-grade.grade-a { background: #15995c; }
      .ai-grade.grade-b { background: #5f6fff; }
      .ai-grade.grade-c { background: #f0ad16; }
      .ai-grade.grade-d { background: #d43b5c; }
      .ai-score-row {
        display: grid;
        gap: 8px;
      }
      .ai-score-item {
        display: grid;
        grid-template-columns: 120px 1fr 48px;
        gap: 8px;
        align-items: center;
        font-size: 12px;
      }
      .ai-score-track {
        height: 8px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: #eef2f9;
        overflow: hidden;
      }
      .ai-score-fill {
        height: 100%;
        background: linear-gradient(90deg, #5f6fff, #8a5cf6);
      }
      .ai-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .ai-chip {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 999px;
        font-size: 11px;
        border: 1px solid var(--border);
      }
      .ai-chip.hit {
        background: rgba(21,153,92,.1);
        border-color: rgba(21,153,92,.26);
      }
      .ai-chip.miss {
        background: rgba(212,59,92,.1);
        border-color: rgba(212,59,92,.26);
      }
      .ai-chip.pitfall {
        background: rgba(240,173,22,.14);
        border-color: rgba(240,173,22,.34);
      }
      .ai-loader {
        display: inline-flex;
        gap: 8px;
        align-items: center;
      }
      .ai-loader-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #5f6fff;
        animation: ai-loader 1s ease-in-out infinite;
      }
      .ai-loader-dot:nth-child(2) { animation-delay: .15s; }
      .ai-loader-dot:nth-child(3) { animation-delay: .3s; }
      @keyframes ai-loader {
        0%, 80%, 100% { opacity: .3; transform: translateY(0); }
        40% { opacity: 1; transform: translateY(-3px); }
      }

      /* Code styling */
      pre[class*="language-"] {
        margin: 12px 0 0;
        border-radius: 12px;
        background: #0f172a;
        border: 1px solid #1e293b;
      }
      code[class*="language-"] {
        font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        font-size: 14px;
        line-height: 1.5;
      }

      /* Code section styles */
      .btn-group {
        display: flex;
        gap: 8px;
      }
      .btn-group .btn {
        border-radius: 12px;
      }

      .code-toc {
        margin-top: 12px;
      }
      .toc-section {
        padding: 10px 12px;
        cursor: pointer;
        transition: background-color 0.2s ease, color .2s ease;
        border-radius: 10px;
      }
      .toc-section:hover {
        background: #f2f5fb;
      }
      .toc-section.active {
        background: #111827;
        color: #fff;
        font-weight: 700;
      }
      .task-executor { margin-top: 12px; }
      .task-run-panel { margin-top: 8px; }
      .code-editor {
        width: 100%;
        min-height: 160px;
        font-family: 'JetBrains Mono', 'Courier New', monospace;
        font-size: 13px;
        padding: 12px;
        border-radius: 8px;
        border: 1px solid var(--border, #d9deea);
        background: var(--card, #fff);
        color: var(--text, #0f172a);
        resize: vertical;
        box-sizing: border-box;
        white-space: pre;
        overflow-x: auto;
        tab-size: 4;
      }
      .run-controls {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
      }
      .run-status { font-size: 13px; color: var(--muted, #64748b); }
      .run-output {
        margin-top: 10px;
        border-radius: 8px;
        overflow: hidden;
      }
      .output-stdout {
        background: #1a1a2e;
        color: #e0e0e0;
        padding: 10px 14px;
        font-size: 13px;
        margin: 0;
        white-space: pre-wrap;
        word-break: break-all;
        max-height: 300px;
        overflow-y: auto;
      }
      .output-stderr {
        background: #2d1a1a;
        color: #ff6b6b;
        padding: 10px 14px;
        font-size: 12px;
        margin: 0;
        white-space: pre-wrap;
        word-break: break-all;
        max-height: 200px;
        overflow-y: auto;
      }
      .check-result {
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 600;
      }
      .check-result.passed { background: #1a2d1a; color: #4caf50; }
      .check-result.failed { background: #2d1a1a; color: #ff6b6b; }
      .autotest-layout {
        display: grid;
        grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
        gap: 12px;
      }
      .autotest-list {
        border: 1px solid var(--border, #d9deea);
        border-radius: 12px;
        background: var(--card, #fff);
        padding: 8px;
        max-height: 68vh;
        overflow-y: auto;
      }
      .autotest-list-item {
        border: 0;
        width: 100%;
        text-align: left;
        padding: 10px 10px;
        border-radius: 10px;
        background: transparent;
        cursor: pointer;
      }
      .autotest-list-item:hover { background: #f2f5fb; }
      .autotest-list-item.active {
        background: rgba(95, 111, 255, .12);
        color: var(--primary);
      }
      .autotest-item-title { font-size: 13px; font-weight: 700; }
      .autotest-item-meta { font-size: 11px; color: var(--muted, #64748b); margin-top: 2px; }
      .autotest-workspace {
        border: 1px solid var(--border, #d9deea);
        border-radius: 12px;
        background: var(--card, #fff);
        padding: 14px;
      }
      .autotest-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 8px;
      }
      .autotest-chip {
        border: 1px solid var(--border, #d9deea);
        background: #f8fbff;
        color: var(--muted, #64748b);
        border-radius: 999px;
        padding: 3px 9px;
        font-size: 11px;
        font-weight: 600;
      }
      .autotest-checks {
        margin: 10px 0;
        padding: 10px;
        border-radius: 10px;
        background: #f7f9fc;
      }
      .autotest-checks ul {
        margin: 8px 0 0;
        padding-left: 18px;
      }
      .autotest-json-block {
        margin: 6px 0 0;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid var(--border, #d9deea);
        background: #0f172a;
        color: #dbe7ff;
        overflow-x: auto;
        white-space: pre;
        font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        font-size: 12px;
        line-height: 1.45;
      }
      .autotest-json-block code {
        white-space: inherit;
      }
      .autotest-editor {
        width: 100%;
        min-height: 170px;
        font-family: 'JetBrains Mono', 'Courier New', monospace;
        font-size: 13px;
        border: 1px solid var(--border, #d9deea);
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px;
        background: #101827;
        color: #e2e8f0;
        resize: vertical;
        tab-size: 4;
      }
      .cm-host {
        width: 100%;
      }
      .cm-host .cm-editor {
        border: 1px solid var(--border, #d9deea);
        border-radius: 10px;
        overflow: hidden;
      }
      .cm-host .cm-scroller {
        font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        font-size: 13px;
        line-height: 1.5;
      }
      .cm-host .cm-content {
        padding: 8px 0;
      }
      .cm-host .cm-lineNumbers .cm-gutterElement {
        color: rgba(100, 116, 139, .78);
      }
      .cm-host-light .cm-editor {
        background: var(--card, #fff);
        color: var(--text, #111827);
      }
      .cm-host-light .cm-gutters {
        background: rgba(15, 23, 42, .03);
      }
      .cm-host-dark .cm-editor {
        background: #101827;
      }
      .cm-host-dark .cm-gutters {
        background: #0b1220;
      }
      .autotest-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
      }
      .autotest-result {
        margin-top: 12px;
        border: 1px solid var(--border, #d9deea);
        border-radius: 10px;
        padding: 10px;
      }
      .autotest-result.passed {
        border-color: rgba(21, 153, 92, .35);
        background: rgba(21, 153, 92, .08);
      }
      .autotest-result.failed {
        border-color: rgba(212, 59, 92, .35);
        background: rgba(212, 59, 92, .08);
      }
      .autotest-result.error {
        border-color: rgba(245, 158, 11, .42);
        background: rgba(245, 158, 11, .1);
      }
      .autotest-logs {
        margin-top: 10px;
        border-radius: 8px;
        overflow: hidden;
      }
      .autotest-logs summary {
        cursor: pointer;
        padding: 8px 10px;
        background: #0f172a;
        color: #dbe7ff;
        font-size: 12px;
        font-weight: 600;
      }
      .autotest-logs pre {
        margin: 0;
        padding: 10px;
        background: #111827;
        color: #dbe7ff;
        max-height: 220px;
        overflow-y: auto;
        white-space: pre-wrap;
        word-break: break-all;
      }

      .sql-toc { display: grid; gap: 10px; }
      .sql-module-block {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card);
        overflow: hidden;
      }
      .sql-module-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px;
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        transition: background-color .2s ease;
      }
      .sql-module-header:hover { background: #f2f5fb; }
      .sql-module-title {
        min-width: 0;
      }
      .sql-module-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        color: #64748b;
        font-size: 13px;
        line-height: 1;
      }
      .sql-module-lessons {
        padding: 4px 0 8px;
        border-top: 1px solid var(--border);
      }
      .sql-lesson-row {
        border-top: 1px solid rgba(15, 23, 42, 0.05);
      }
      .sql-lesson-row:first-child { border-top: 0; }
      .sql-lesson-item {
        padding: 8px 14px 8px 20px;
        cursor: pointer;
        font-size: 13px;
        color: var(--text);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        border: 0;
        background: transparent;
        text-align: left;
        transition: background-color .2s ease, color .2s ease;
      }
      .sql-lesson-label { min-width: 0; }
      .sql-lesson-status {
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        border: 1px solid transparent;
      }
      .sql-lesson-status.status-not-started {
        background: #f1f5f9;
        color: #475569;
      }
      .sql-lesson-status.status-in-progress {
        background: rgba(95, 111, 255, 0.12);
        color: #4452d8;
      }
      .sql-lesson-status.status-completed {
        background: rgba(21, 153, 92, 0.12);
        color: #15995c;
      }
      .sql-lesson-item:hover { background: #f2f5fb; }
      .sql-lesson-item.active {
        background: rgba(95, 111, 255, .12);
        font-weight: 600;
        color: var(--primary);
      }
      .sql-heading-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
      }
      .sql-progress-summary {
        font-size: 12px;
        margin-bottom: 8px;
      }
      .sql-focus-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
      }
      .sql-focus-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 14px;
      }
      .sql-lesson-body {
        font-size: 14px;
        line-height: 1.65;
        margin-top: 8px;
      }
      .sql-lesson-body p { margin: 0 0 10px; }
      .sql-lesson-body p:last-child { margin-bottom: 0; }
      .sql-lesson-body pre {
        margin: 8px 0;
        padding: 10px;
        border-radius: 8px;
        background: #101827;
        overflow: auto;
      }
      .sql-lesson-body pre code {
        background: transparent;
        color: #e2e8f0;
        padding: 0;
      }
      .sql-lesson-body code {
        background: var(--bg-elev);
        padding: 2px 6px;
        border-radius: 6px;
        font-size: 13px;
      }
      .sql-task-body {
        font-size: 14px;
        line-height: 1.55;
      }
      .sql-task-inline {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px dashed var(--border);
      }
      .sql-task-inline-title {
        font-weight: 700;
        margin-bottom: 8px;
      }
      .sql-task-prompt {
        margin-bottom: 10px;
      }
      .sql-task-editor {
        width: 100%;
        min-height: 160px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #101827;
        color: #e2e8f0;
        padding: 12px;
        box-sizing: border-box;
        font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        font-size: 13px;
        line-height: 1.5;
        resize: vertical;
      }
      .sql-task-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 10px;
      }
      .sql-task-limit {
        margin-top: 8px;
        font-size: 12px;
      }
      .sql-task-result {
        margin-top: 10px;
      }
      .sql-task-result-box {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #fff;
        padding: 10px 12px;
        font-size: 13px;
      }
      .sql-task-result-box.ok {
        border-color: rgba(21, 153, 92, .35);
        background: rgba(21, 153, 92, .08);
      }
      .sql-task-result-box.warn {
        border-color: rgba(212, 59, 92, .35);
        background: rgba(212, 59, 92, .08);
      }
      .sql-task-result-box.error {
        border-color: rgba(245, 158, 11, .42);
        background: rgba(245, 158, 11, .10);
      }
      .sql-preview-grid {
        margin-top: 8px;
        display: grid;
        gap: 8px;
      }
      .sql-preview-row {
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
        padding: 8px 10px;
        font-size: 12px;
        overflow-x: auto;
      }
      .sql-ai-help-box {
        margin-top: 10px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #f8faff;
        padding: 10px 12px;
      }
      .sql-ai-help-box ul {
        margin: 6px 0 0;
        padding-left: 18px;
      }
      .sql-practice-hub-card {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #fff;
        padding: 12px;
      }
      .sql-practice-hub-header {
        display: grid;
        gap: 4px;
      }
      .sql-practice-hub-title {
        font-size: 16px;
        font-weight: 800;
      }
      .sql-practice-filters {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .sql-practice-select,
      .sql-practice-query {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #fff;
        color: var(--text);
        padding: 8px 10px;
        font: inherit;
        font-size: 13px;
      }
      .sql-practice-select {
        min-width: 170px;
      }
      .sql-practice-query {
        flex: 1 1 240px;
        min-width: 180px;
      }
      .sql-practice-query:focus,
      .sql-practice-select:focus {
        border-color: rgba(95, 111, 255, .55);
        box-shadow: 0 0 0 3px rgba(95, 111, 255, .14);
        outline: none;
      }
      .sql-practice-summary {
        margin-top: 10px;
        font-size: 12px;
      }
      .sql-practice-list {
        margin-top: 10px;
        display: grid;
        gap: 8px;
      }
      .sql-practice-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #f8faff;
        padding: 10px;
      }
      .sql-practice-item-main {
        min-width: 0;
      }
      .sql-practice-item-title {
        font-weight: 700;
        font-size: 13px;
        line-height: 1.35;
      }
      .sql-practice-item-meta {
        margin-top: 6px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
      }
      .sql-practice-chip {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: #fff;
        color: #475569;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
      }
      .sql-practice-chip.difficulty-easy {
        color: #1d4ed8;
      }
      .sql-practice-chip.difficulty-medium {
        color: #7c3aed;
      }
      .sql-practice-chip.difficulty-hard {
        color: #be123c;
      }
      .sql-practice-chip.solved {
        background: #166534;
        border-color: #14532d;
        color: #f0fdf4;
      }
      @media (max-width: 640px) {
        .sql-practice-item {
          flex-direction: column;
          align-items: stretch;
        }
        .sql-practice-item .btn {
          width: 100%;
        }
      }
      .sql-explorer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 65;
        background: rgba(15, 23, 42, 0.44);
        backdrop-filter: blur(2px);
      }
      .sql-explorer-sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
        border-radius: 14px 14px 0 0;
        border: 1px solid var(--border);
        background: #fff;
        box-shadow: var(--shadow-strong);
        overflow: hidden;
      }
      .sql-explorer-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }
      .sql-explorer-title {
        font-size: 15px;
        font-weight: 800;
      }
      .sql-explorer-subtitle {
        font-size: 12px;
      }
      .sql-explorer-tabs {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
      }
      .sql-explorer-tab {
        border: 1px solid var(--border);
        border-radius: 999px;
        background: #fff;
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        padding: 6px 10px;
        cursor: pointer;
        white-space: nowrap;
      }
      .sql-explorer-tab.active {
        color: #fff;
        border-color: transparent;
        background: var(--accent-gradient);
      }
      .sql-explorer-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .sql-explorer-search {
        flex: 1 1 220px;
        min-width: 0;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 8px 10px;
        font: inherit;
        font-size: 13px;
      }
      .sql-explorer-search:focus {
        border-color: rgba(95, 111, 255, .55);
        box-shadow: 0 0 0 3px rgba(95, 111, 255, .14);
        outline: none;
      }
      .sql-explorer-status {
        font-size: 12px;
        margin-top: -2px;
      }
      .sql-explorer-grid {
        flex: 1;
        min-height: 140px;
        overflow: auto;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #fff;
        padding: 8px;
      }
      .sql-explorer-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
      }
      .sql-explorer-table th,
      .sql-explorer-table td {
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        padding: 7px 8px;
      }
      .sql-explorer-table th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f8faff;
        font-weight: 700;
      }
      .sql-explorer-table td code {
        font-size: 11px;
        white-space: pre-wrap;
        word-break: break-word;
      }
      .sql-explorer-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      @media (min-width: 960px) {
        .sql-explorer-sheet {
          top: 0;
          bottom: 0;
          left: auto;
          right: 0;
          width: min(520px, 44vw);
          max-height: none;
          border-radius: 14px 0 0 14px;
        }
      }

      #code-content {
        margin-top: 16px;
      }
      #code-content pre {
        margin: 12px 0 0;
      }
      #code-content .task {
        padding: 0 0 14px;
      }
      #code-content .task + .task {
        margin-top: 14px;
        border-top: 1px solid var(--border);
        padding-top: 14px;
      }
      .task-brief {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #fff;
        padding: 14px;
      }
      .task-title {
        margin: 0 0 10px;
        font-size: 18px;
        font-weight: 800;
        line-height: 1.25;
      }
      .task-description {
        margin-bottom: 14px;
      }
      .task-description p {
        margin: 0;
      }
      .task-description p + p {
        margin-top: 8px;
      }
      .task-practice {
        margin-bottom: 14px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #f8faff;
        padding: 12px;
      }
      .task-practice-title {
        font-weight: 800;
        font-size: 14px;
        margin-bottom: 8px;
      }
      .task-practice-steps {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 10px;
      }
      .practice-step-chip {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        font-size: 11px;
        color: var(--muted);
        background: #ffffff;
      }
      .practice-step-chip.active {
        color: #ffffff;
        border-color: transparent;
        background: var(--accent-gradient);
      }
      .task-practice-pane {
        display: none;
      }
      .task-practice-pane.active {
        display: block;
      }
      .task-practice-editor {
        width: 100%;
        min-height: 170px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #101827;
        color: #e2e8f0;
        padding: 12px;
        box-sizing: border-box;
        font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        font-size: 13px;
        line-height: 1.5;
        resize: vertical;
      }
      .task-practice-controls {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 10px;
      }
      .task-practice-results,
      .task-practice-review {
        margin-top: 10px;
      }
      .practice-check-summary {
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 12px;
        font-weight: 700;
      }
      .practice-check-summary.ok {
        background: rgba(21, 153, 92, .12);
        color: #0f7b4a;
      }
      .practice-check-summary.warn {
        background: rgba(212, 59, 92, .12);
        color: #9f2c46;
      }
      .practice-check-list {
        margin-top: 8px;
        display: grid;
        gap: 6px;
      }
      .practice-check-row {
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
        padding: 6px 10px;
        font-size: 12px;
      }
      .practice-check-row.ok {
        border-color: rgba(21, 153, 92, .35);
      }
      .practice-check-row.warn {
        border-color: rgba(212, 59, 92, .35);
      }
      .practice-hints {
        margin: 6px 0 0;
        padding-left: 18px;
      }
      .practice-hints li {
        margin-top: 4px;
      }
      .task-practice-history {
        margin-top: 10px;
        border-top: 1px solid rgba(95, 107, 130, .2);
        padding-top: 10px;
      }
      .practice-history-row {
        padding: 6px 0;
      }
      .practice-history-row + .practice-history-row {
        border-top: 1px dashed rgba(95, 107, 130, .18);
      }
      .task-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .task-solution {
        margin-top: 12px;
      }
      .task-toggle {
        margin-top: 2px;
      }
      .task-explanation {
        margin-top: 10px;
        border: 1px dashed var(--border);
        border-radius: 12px;
        background: #fcfdff;
        padding: 12px;
      }
      .task-explanation-text p {
        margin: 8px 0 0;
      }
      .task-explanation-list {
        margin: 8px 0 0;
        padding-left: 20px;
      }
      .task-explanation-list li + li {
        margin-top: 4px;
      }
      .task-explanation code {
        padding: 1px 6px;
        border-radius: 6px;
        border: 1px solid #dbe4f0;
        background: #f5f9ff;
        font-size: 12px;
      }
      .task-req-list {
        margin-top: 8px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .task-req-chip {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        background: #f3f6fc;
        border: 1px solid var(--border);
        font-size: 12px;
        color: #334155;
      }
      .card + .card { margin-top: 2px; }
      .spacer { height: 10px; }

      .cheatlists-layout {
        display: grid;
        gap: 14px;
      }
      .cheatlist-cards {
        display: grid;
        gap: 10px;
      }
      .cheatlist-card {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #ffffff;
        padding: 12px;
        cursor: pointer;
        transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
      }
      .cheatlist-card:hover {
        border-color: #bfc9de;
        box-shadow: 0 8px 20px rgba(17, 24, 39, .08);
        transform: translateY(-1px);
      }
      .cheatlist-card.active {
        border-color: transparent;
        background: var(--accent-gradient);
        color: #ffffff;
        box-shadow: var(--accent-glow);
      }
      .cheatlist-card-title {
        font-weight: 700;
        font-size: 14px;
        letter-spacing: -0.01em;
      }
      .cheatlist-card-meta {
        font-size: 12px;
        margin-top: 3px;
        color: var(--muted);
      }
      .cheatlist-card.active .cheatlist-card-meta {
        color: rgba(255, 255, 255, .86);
      }
      .cheatlist-view {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #ffffff;
        padding: 12px;
      }
      .cheatlist-view-empty {
        color: var(--muted);
        font-size: 13px;
      }
      .cheatlist-items {
        display: grid;
        gap: 8px;
        margin-top: 10px;
      }
      .cheatlist-item {
        display: grid;
        grid-template-columns: 18px 1fr;
        gap: 10px;
        align-items: start;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 8px 10px;
        background: #fcfdff;
      }
      .cheatlist-item input[type="checkbox"] {
        margin-top: 1px;
      }
      .cheatlist-item.done {
        border-color: rgba(21, 153, 92, .4);
        background: rgba(21, 153, 92, .08);
      }
      .cheatlist-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
      }

      @media (prefers-reduced-motion: reduce) {
        .panel.active,
        .card,
        .tab,
        .btn,
        .option,
        .progress-fill,
        .chip {
          animation: none !important;
          transition: none !important;
          transform: none !important;
        }
      }

      @media (max-width: 760px) {
        .container { padding: 16px; }
        .content { padding: 14px 16px 20px; }
        .section-title { font-size: 25px; }
        .autotest-layout {
          grid-template-columns: 1fr;
        }
        .autotest-list {
          max-height: 200px;
        }
        .split-toolbar-right { width: 100%; justify-content: space-between; }
        .card { padding: 15px; }
        .card.content-plain-shell { padding: 0; }
        .status-kpis {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px 12px;
        }
        .task-practice-controls .btn {
          flex: 1 1 calc(50% - 4px);
          text-align: center;
        }
        .task-practice-controls .btn.btn-primary {
          flex-basis: 100%;
        }
        .vacancy-plan-actions .btn {
          flex: 1 1 calc(50% - 4px);
          text-align: center;
        }
        .vacancy-plan-actions .btn.btn-primary {
          flex-basis: 100%;
        }
      }
      /* Livecoding Algorithm Styles */
      .lc-tier-bar { margin-bottom:8px; }
      .lc-tier-bar-label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:3px; }
      .lc-tier-bar-track { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
      .lc-tier-bar-fill { height:100%; border-radius:4px; transition:width 0.4s; }
      .lc-tier-bar-fill.t1 { background:var(--accent-gradient, #5f6fff); }
      .lc-tier-bar-fill.t2 { background:var(--accent-gradient, #5f6fff); }
      .lc-tier-bar-fill.t3 { background:var(--accent-gradient, #5f6fff); }
      .lc-tier-bar-fill.t4 { background:var(--accent-gradient, #5f6fff); }
      .lc-task-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:13px; border:1px solid var(--border); margin-bottom:6px; transition: background 0.15s; }
      .lc-task-item:hover { background:var(--surface); }
      .lc-task-item.mastered { border-color:#4caf50; background:rgba(76,175,80,0.06); }
      .lc-task-item.review { border-color:#4caf50; background:rgba(76,175,80,0.06); }
      .lc-task-item.overdue { border-color:#ff9800; background:rgba(255,152,0,0.06); }
      .lc-task-item.current { border-color:var(--accent); background:rgba(33,150,243,0.08); }
      .lc-task-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
      .lc-task-dot.new { background:var(--border); }
      .lc-task-dot.review { background:#4caf50; }
      .lc-task-dot.overdue { background:#ff9800; }
      .lc-task-dot.mastered { background:#4caf50; }
      .lc-lang-toggle-btn { background:var(--bg-elev); color:var(--muted); }
      .lc-lang-toggle-btn.active { background:var(--accent-gradient); color:#fff; }
      .lc-pattern-badge { font-size:10px; padding:3px 8px; border-radius:6px; background:rgba(95,111,255,.1); color:var(--accent); font-weight:600; white-space:nowrap; letter-spacing:.02em; }
      .lc-demo-step { padding:16px 18px; border-left:3px solid var(--border); margin-bottom:12px; background:var(--bg-elev); border-radius:0 12px 12px 0; font-size:14px; line-height:1.65; box-shadow:0 2px 8px rgba(17,24,39,.04); transition:border-color .2s,box-shadow .2s; }
      .lc-demo-step.active { border-left-color:var(--accent); box-shadow:0 4px 16px rgba(95,111,255,.1); }
      .lc-demo-step b { display:inline-block; margin-bottom:4px; }
      .lc-demo-step pre { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px 14px; font-size:13px; line-height:1.55; }
      .lc-tracing-opt { padding:10px 14px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-family:monospace; font-size:13px; transition: all 0.15s; }
      .lc-tracing-opt:hover { background:var(--surface); }
      .lc-tracing-opt.correct { border-color:#4caf50; background:rgba(76,175,80,0.1); }
      .lc-tracing-opt.wrong { border-color:var(--danger); background:rgba(244,67,54,0.08); }
      .lc-hint-box { padding:10px; background:var(--surface); border-radius:8px; margin-top:6px; font-size:13px; border-left:3px solid var(--accent); }
      .lc-ai-box { padding:12px; background:var(--surface); border-radius:8px; font-size:13px; border-left:3px solid #9c27b0; }
      .lc-result-ok { padding:10px; background:rgba(76,175,80,0.1); border-radius:8px; color:#2e7d32; font-weight:500; }
      .lc-result-fail { padding:10px; background:rgba(244,67,54,0.08); border-radius:8px; color:var(--danger); }
      .lc-tab { padding:6px 14px; border-radius:6px; font-size:13px; font-weight:500; cursor:pointer; border:1px solid var(--border); background:var(--surface, #f5f5f5); color:var(--text, #333); transition:all 0.15s; }
      .lc-tab:hover { background:var(--border); }
      .lc-tab.active { background:var(--accent-gradient, #111827); color:#fff; border-color:transparent; box-shadow:var(--accent-glow, none); }
      .lc-tab:disabled { opacity:0.45; cursor:not-allowed; background:var(--surface, #f5f5f5); color:var(--muted, #999); }
      .lc-plan-btn { font-size:13px; padding:8px 16px; border-radius:8px; text-align:left; white-space:nowrap; }
      .lc-plan-btn-review { background:rgba(255,152,0,0.08); border-color:rgba(255,152,0,0.3); color:var(--text, #333); }
      .lc-plan-btn-review:hover { background:rgba(255,152,0,0.15); }
      .lc-mock-stat { display:inline-flex; align-items:center; gap:4px; font-size:12px; padding:3px 8px; border-radius:4px; background:var(--surface); margin:2px; }