/* =====================================================================
   LearnWith components — lesson blocks, runner, quizzes, editor, forms,
   dashboard, playground, challenges. Uses tokens from the theme; the
   fallbacks below keep the plugin usable on any theme.
   ===================================================================== */

:root {
	--lw-ink: var(--ink, #1f2544);
	--lw-ink-soft: var(--ink-soft, #5a6080);
	--lw-paper: var(--paper, #fffdf7);
	--lw-card: var(--card, #ffffff);
	--lw-line: var(--line, #e9e3d3);
	--lw-code-bg: #1d2140;
	--lw-code-fg: #eef0ff;
	--lw-radius: 22px;
	--lw-shadow: 0 6px 0 rgba(31, 37, 68, .12), 0 16px 32px -12px rgba(31, 37, 68, .25);
	--lw-sun: #ffb400; --lw-tomato: #ff5a5f; --lw-sky: #00a6ed; --lw-grass: #37b24d; --lw-grape: #8b5cf6; --lw-pink: #ff7ab6; --lw-orange: #ff8a00; --lw-teal: #13b5a6;
	--lw-font-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--lw-font-head: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
}

.lw-bg-sun { background: var(--lw-sun); } .lw-bg-tomato { background: var(--lw-tomato); } .lw-bg-sky { background: var(--lw-sky); }
.lw-bg-grass { background: var(--lw-grass); } .lw-bg-grape { background: var(--lw-grape); } .lw-bg-pink { background: var(--lw-pink); }
.lw-bg-orange { background: var(--lw-orange); } .lw-bg-teal { background: var(--lw-teal); }

.lw-muted { color: var(--lw-ink-soft); }
.lw-mono { font-family: var(--lw-font-code); }
.lw-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.lw-error, .lw-bad { color: #d62839; }
.lw-good { color: var(--lw-grass); }
.lw-empty { color: var(--lw-ink-soft); font-size: .9rem; margin: 0; }
.lw-panel-title { font-family: var(--lw-font-head); font-weight: 600; margin: 0 0 8px; font-size: 1rem; }
.lw-panel-title small { font-weight: 400; color: var(--lw-ink-soft); }

/* ---------- Code blocks ---------- */
.lw-code-block { margin: 2rem 0; border-radius: var(--lw-radius); background: var(--lw-code-bg); box-shadow: 0 8px 0 #0f1230, 0 22px 40px -16px rgba(15, 18, 48, .6); overflow: hidden; color: var(--lw-code-fg); position: relative; }
.lw-cb-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #272c55; flex-wrap: wrap; }
.lw-cb-dots { display: inline-flex; gap: 6px; }
.lw-cb-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--lw-tomato); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.lw-cb-dots i:nth-child(2) { background: var(--lw-sun); } .lw-cb-dots i:nth-child(3) { background: var(--lw-grass); }
.lw-cb-title { font-family: var(--lw-font-head); font-weight: 600; letter-spacing: .02em; }
.lw-cb-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lw-chip { font-size: .75rem; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.1); color: #cfd3ff; }
.lw-btn-mini { font: 600 .82rem/1 var(--lw-font-head); border: 0; border-radius: 12px; padding: 8px 12px; cursor: pointer; background: rgba(255,255,255,.12); color: #fff; transition: transform .15s, background .15s; }
.lw-btn-mini:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.lw-btn-mini.is-run { background: var(--lw-grass); box-shadow: 0 3px 0 #237a33; }
.lw-btn-mini.is-run:active { transform: translateY(2px); box-shadow: 0 1px 0 #237a33; }

.lw-cb-code { margin: 0; padding: 14px 0; overflow-x: auto; font: 500 15px/1.75 var(--lw-font-code); background: var(--lw-code-bg); color: var(--lw-code-fg); border-radius: 0; }
.lw-cb-code code { display: block; min-width: max-content; font: inherit; background: none; color: inherit; padding: 0; }
.lw-cb-code--small { border-radius: 16px; font-size: 14px; margin: 12px 0; box-shadow: 0 5px 0 #0f1230; }
.lw-line { display: flex; padding: 0 18px 0 0; border-left: 4px solid transparent; transition: background .2s, border-color .2s; }
.lw-ln { width: 3.2em; flex: none; text-align: right; padding-right: 1.1em; color: #6c72a8; user-select: none; }
.lw-lc { white-space: pre; }
.lw-line.is-clickable { cursor: pointer; }
.lw-line.is-clickable:hover, .lw-line:focus-visible { background: rgba(255,255,255,.07); outline: none; }
.lw-line.is-picked { background: rgba(255, 180, 0, .16); border-left-color: var(--lw-sun); }
.lw-line.is-active { background: rgba(55, 178, 77, .25); border-left-color: #6dde80; }
.lw-line.is-active .lw-ln::before { content: '➜'; color: #6dde80; margin-right: 4px; }
.lw-line.is-error { background: rgba(255, 90, 95, .28); border-left-color: var(--lw-tomato); }
.tk-kw { color: #ff9ecf; font-weight: 700; } .tk-str { color: #b8f28a; } .tk-num { color: #ffd166; }
.tk-com { color: #7e86c2; font-style: italic; } .tk-op { color: #7fdcff; font-weight: 700; } .tk-var { color: #eef0ff; } .tk-fn { color: #82cfff; }

.lw-cb-explain { margin: 0 14px 14px; padding: 14px 16px; border-radius: 16px; background: #fff8e1; color: var(--lw-ink); font-size: 1rem; line-height: 1.55; box-shadow: 0 4px 0 #f1d27a; }
.lw-cb-explain.is-pop { animation: lw-pop .35s cubic-bezier(.3,1.6,.5,1); }
.lw-explain-line { display: inline-block; font: 700 .75rem/1 var(--lw-font-head); background: var(--lw-sun); color: #3a2a00; padding: 5px 9px; border-radius: 99px; margin-right: 6px; }

/* ---------- Visual runner ---------- */
.lw-runner { background: #f6f3ff; color: var(--lw-ink); padding: 14px; border-top: 3px dashed #d9d2ff; }
.lw-practice-runner .lw-runner, .lw-pg-runner .lw-runner { border-radius: var(--lw-radius); border: 0; box-shadow: var(--lw-shadow); margin-top: 14px; background: #f6f3ff; }
.lw-runner-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.lw-runner-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.lw-rbtn { display: inline-flex; align-items: center; gap: 6px; font: 700 .9rem/1 var(--lw-font-head); border: 0; border-radius: 14px; padding: 10px 14px; background: #fff; color: var(--lw-ink); cursor: pointer; box-shadow: 0 4px 0 #d9d2ff; transition: transform .12s, box-shadow .12s; }
.lw-rbtn span { font-size: .85rem; }
.lw-rbtn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #d9d2ff; }
.lw-rbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9d2ff; }
.lw-rbtn--play { background: var(--lw-grass); color: #fff; box-shadow: 0 4px 0 #237a33; }
.lw-rbtn--play:hover { box-shadow: 0 6px 0 #237a33; }
.lw-rbtn--play.is-playing { background: var(--lw-orange); box-shadow: 0 4px 0 #b86200; }
.lw-speed { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.lw-speed input { width: 90px; accent-color: var(--lw-grape); }
.lw-stepcount { font: 600 .85rem var(--lw-font-head); background: #fff; padding: 7px 12px; border-radius: 99px; }
.lw-progressbar { height: 8px; border-radius: 99px; background: #e3ddff; margin: 12px 0; overflow: hidden; }
.lw-progressbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lw-grape), var(--lw-pink)); border-radius: inherit; transition: width .3s ease; }
.lw-inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font: 600 .9rem var(--lw-font-head); }
.lw-inputs input { flex: 1; min-width: 160px; font: 500 .95rem var(--lw-font-code); padding: 9px 12px; border-radius: 12px; border: 2px solid #d9d2ff; background: #fff; }
.lw-inputs input:focus { outline: none; border-color: var(--lw-grape); box-shadow: 0 0 0 4px rgba(139, 92, 246, .18); }
.lw-runner-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.lw-runner-grid:has(.lw-runner-code) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.lw-runner-code { border-radius: 16px; max-height: 420px; overflow: auto; }
.lw-runner-side { display: grid; gap: 12px; align-content: start; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lw-runner-grid:has(.lw-runner-code) .lw-runner-side { grid-template-columns: 1fr; }
.lw-note { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 4px 0 #e3ddff; }
.lw-note p { margin: 0; line-height: 1.5; }
.lw-note-mascot { font-size: 1.6rem; line-height: 1; animation: lw-bob 2.4s ease-in-out infinite; }
.lw-runner.has-error .lw-note { background: #ffe9ea; box-shadow: 0 4px 0 #ffc2c5; }
.lw-mem, .lw-console { background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 4px 0 #e3ddff; }
.lw-vars { display: flex; flex-wrap: wrap; gap: 14px 12px; perspective: 600px; }
.lw-var { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lw-var-box { min-width: 64px; max-width: 220px; padding: 12px 12px 10px; text-align: center; font: 700 1.05rem var(--lw-font-code); color: #3a2a00; background: linear-gradient(160deg, #ffe08a, #ffc233); border-radius: 12px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.12), 0 6px 0 #c98f00, 0 10px 18px -6px rgba(201,143,0,.6); overflow-wrap: anywhere; transform-style: preserve-3d; }
.lw-var.is-local .lw-var-box { background: linear-gradient(160deg, #b8ecff, #5cc8f5); color: #00324a; box-shadow: inset 0 -5px 0 rgba(0,0,0,.12), 0 6px 0 #0a86bd; }
.lw-var.is-changed .lw-var-box { animation: lw-flip .55s cubic-bezier(.3,1.4,.5,1); background: linear-gradient(160deg, #b9f5c4, #4fd06a); color: #0b3a15; box-shadow: inset 0 -5px 0 rgba(0,0,0,.12), 0 6px 0 #259038; }
.lw-var-name { font: 700 .8rem var(--lw-font-head); letter-spacing: .04em; text-align: center; }
.lw-var-name small { display: block; font-weight: 500; color: var(--lw-ink-soft); }
.lw-console { background: #151935; color: #b8f28a; box-shadow: 0 4px 0 #0b0e24; }
.lw-console .lw-panel-title { color: #fff; }
.lw-console-body { font: 500 .95rem/1.6 var(--lw-font-code); min-height: 3.2em; max-height: 180px; overflow: auto; }
.lw-console-body .is-new { animation: lw-type .4s steps(12); background: rgba(184, 242, 138, .12); }
.lw-cursor { animation: lw-blink 1s steps(1) infinite; color: #b8f28a; }
.lw-tracebox { margin-top: 12px; background: #fff; border-radius: 18px; padding: 10px 14px; box-shadow: 0 4px 0 #e3ddff; }
.lw-tracebox summary { cursor: pointer; font: 600 1rem var(--lw-font-head); }
.lw-tracebox summary small { font-weight: 400; color: var(--lw-ink-soft); }

/* ---------- Tables ---------- */
.lw-table-wrap { overflow-x: auto; margin: 10px 0; border-radius: 16px; }
.lw-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; background: #fff; border-radius: 16px; overflow: hidden; border: 2px solid var(--lw-line); }
.lw-table th { background: #f2efff; font: 700 .85rem var(--lw-font-head); text-align: center; padding: 9px 10px; color: var(--lw-ink); white-space: nowrap; }
.lw-table td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--lw-line); }
.lw-table th { text-align: left; }
.lw-trace-table th, .lw-trace-table td { text-align: center; font-family: var(--lw-font-code); }
.lw-table caption { caption-side: top; text-align: left; font: 600 .95rem var(--lw-font-head); padding: 0 0 8px; }
.lw-trace-table td.is-changed { background: #e9fbe9; font-weight: 700; color: #1b6d2a; }
.lw-trace-table td.is-same { color: #8b90b0; }
.lw-trace-table td.is-na { color: #c9c6d9; }
.lw-trace-table tr.is-current td { background: #fff4cc; }
.lw-trace-table td.is-given { font-weight: 700; }
.lw-trace-in { width: 4.5em; font: 600 .9rem var(--lw-font-code); text-align: center; padding: 6px; border-radius: 10px; border: 2px dashed #c9bfff; background: #faf8ff; }
.lw-trace-in:focus { outline: none; border-style: solid; border-color: var(--lw-grape); }
.lw-trace-in.is-right { border: 2px solid var(--lw-grass); background: #e9fbe9; }
.lw-trace-in.is-wrong { border: 2px solid var(--lw-tomato); background: #ffecec; animation: lw-shake .35s; }
.lw-trace-in.is-shown { border-style: solid; border-color: var(--lw-sky); }
.lw-trace-score { font-family: var(--lw-font-head); }

/* ---------- Quiz ---------- */
.lw-quiz, .lw-trace-ex, .lw-practice, .lw-realworld, .lw-compare, .lw-term { margin: 2rem 0; padding: 22px; border-radius: var(--lw-radius); background: var(--lw-card); border: 3px solid var(--lw-ink); box-shadow: 6px 6px 0 var(--lw-ink); position: relative; }
.lw-quiz-tag { display: inline-flex; align-items: center; gap: 6px; font: 700 .85rem/1 var(--lw-font-head); text-transform: uppercase; letter-spacing: .06em; padding: 8px 12px; border-radius: 99px; background: #f2efff; color: #5b3cc4; margin-bottom: 12px; }
.lw-quiz--predict .lw-quiz-tag { background: #e5f6ff; color: #0077aa; }
.lw-quiz--error .lw-quiz-tag { background: #ffecec; color: #c42a33; }
.lw-quiz--construct .lw-quiz-tag { background: #e9fbe9; color: #1f7a33; }
.lw-quiz--explain .lw-quiz-tag { background: #fff4d6; color: #8a5a00; }
.lw-quiz-q { font: 600 1.15rem/1.45 var(--lw-font-head); margin-bottom: 12px; }
.lw-quiz-q p { margin: 0 0 .5em; }
.lw-quiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.lw-quiz-opt { display: flex; align-items: center; gap: 12px; text-align: left; font: 600 1rem/1.3 var(--lw-font-head); padding: 14px 16px; border-radius: 18px; border: 2px solid var(--lw-line); background: #fff; color: var(--lw-ink); cursor: pointer; box-shadow: 0 5px 0 var(--lw-line); transition: transform .15s, box-shadow .15s, border-color .15s; }
.lw-quiz-opt:hover:not(:disabled) { transform: translateY(-3px) rotate(-.4deg); border-color: var(--lw-grape); box-shadow: 0 8px 0 #d9d2ff; }
.lw-quiz-opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--lw-line); }
.lw-opt-letter { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #f2efff; color: #5b3cc4; font-weight: 700; }
.lw-quiz-opt.is-right { border-color: var(--lw-grass); background: #e9fbe9; box-shadow: 0 5px 0 #9fe3aa; animation: lw-pop .4s cubic-bezier(.3,1.6,.5,1); }
.lw-quiz-opt.is-right .lw-opt-letter { background: var(--lw-grass); color: #fff; }
.lw-quiz-opt.is-wrong { border-color: var(--lw-tomato); background: #fff0f0; box-shadow: 0 5px 0 #ffc2c5; opacity: .7; }
.lw-quiz-opt.is-wrong .lw-opt-letter { background: var(--lw-tomato); color: #fff; }
.lw-quiz-opt:disabled { cursor: default; }
.lw-quiz.is-shake, .is-shake { animation: lw-shake .4s; }
.lw-quiz-feedback { margin-top: 14px; padding: 14px 16px; border-radius: 16px; line-height: 1.55; animation: lw-rise .35s ease-out; }
.lw-quiz-feedback.is-right { background: #e9fbe9; color: #174d22; }
.lw-quiz-feedback.is-wrong { background: #fff0f0; color: #7a1b21; }
.lw-quiz-feedback.is-model { background: #f6f3ff; }
.lw-quiz-answer { width: 100%; font: 500 1rem/1.5 inherit; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--lw-line); background: #fffdf7; margin-bottom: 10px; resize: vertical; }
.lw-quiz-answer.lw-mono { font-family: var(--lw-font-code); }
.lw-quiz-answer:focus { outline: none; border-color: var(--lw-grape); box-shadow: 0 0 0 4px rgba(139,92,246,.15); }
.lw-model-title { font: 700 1rem var(--lw-font-head); margin: 0 0 6px; }
.lw-selfcheck { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-family: var(--lw-font-head); }
.lw-quiz.is-solved::after { content: '⭐'; position: absolute; top: -18px; right: -12px; font-size: 2.2rem; animation: lw-spin-in .6s cubic-bezier(.3,1.6,.5,1); }

/* ---------- Callouts, steps, terms ---------- */
.lw-callout { display: flex; gap: 14px; margin: 1.8rem 0; padding: 18px 20px; border-radius: var(--lw-radius); background: #fff8e1; box-shadow: 0 6px 0 #f1d27a; position: relative; }
.lw-callout-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; font-size: 1.5rem; background: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.08); transform: rotate(-6deg); }
.lw-callout-title { font: 700 1.05rem var(--lw-font-head); margin: 0 0 4px; }
.lw-callout-text p { margin: 0 0 .5em; } .lw-callout-text p:last-child { margin: 0; }
.lw-callout--analogy { background: #ffeef5; box-shadow: 0 6px 0 #ffc1da; }
.lw-callout--term { background: #eaf6ff; box-shadow: 0 6px 0 #a9dcfb; }
.lw-callout--warning { background: #fff0f0; box-shadow: 0 6px 0 #ffc2c5; }
.lw-callout--remember { background: #f2efff; box-shadow: 0 6px 0 #d4c8ff; }
.lw-callout--fun { background: #e9fbe9; box-shadow: 0 6px 0 #aee8b8; }
.lw-callout--think { background: #fff3e6; box-shadow: 0 6px 0 #ffd3a1; }

.lw-steps { margin: 2rem 0; }
.lw-steps-title { font: 700 1.1rem var(--lw-font-head); text-align: center; margin-bottom: 14px; }
.lw-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 26px; counter-reset: s; }
.lw-steps--across ol { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.lw-steps li { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; min-width: min(320px, 100%); background: #fff; border: 3px solid var(--lw-ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--lw-ink); font-family: var(--lw-font-head); }
.lw-steps--down li:not(:last-child)::after { content: '⬇'; position: absolute; left: 50%; bottom: -27px; transform: translateX(-50%); font-size: 1.1rem; color: var(--lw-grape); }
.lw-steps--across li:not(:last-child)::after { content: '➜'; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); color: var(--lw-grape); }
.lw-step-num { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; font-weight: 700; background: hsl(calc(var(--i) * 47 + 200), 80%, 58%); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.lw-step-text strong { display: block; font-size: 1.05rem; }
.lw-step-text small { display: block; color: var(--lw-ink-soft); font-family: var(--font-body, inherit); font-size: .9rem; }

.lw-term { background: #eaf6ff; border-color: #0a86bd; box-shadow: 6px 6px 0 #0a86bd; }
.lw-term-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lw-term-badge { font: 700 .75rem var(--lw-font-head); text-transform: uppercase; letter-spacing: .06em; background: #0a86bd; color: #fff; border-radius: 99px; padding: 6px 10px; }
.lw-term-word { font: 700 1.6rem var(--lw-font-head); }
.lw-term-simple { font-size: 1.1rem; margin: 8px 0; }
.lw-term-analogy { background: #fff; border-radius: 14px; padding: 10px 14px; margin: 8px 0 0; }

.lw-illustration { margin: 2rem auto; text-align: center; }
.lw-illustration img { max-width: 100%; height: auto; border-radius: var(--lw-radius); }
.lw-illustration figcaption { margin-top: 8px; font: 500 .95rem var(--font-hand, var(--lw-font-head)); color: var(--lw-ink-soft); }

/* Real world */
.lw-realworld { background: #fffdf2; }
.lw-rw-scenario { margin: 0 0 14px; padding: 14px 18px; border-left: 6px solid var(--lw-sun); background: #fff; border-radius: 0 16px 16px 0; font-size: 1.08rem; }
.lw-rw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.lw-rw-card { background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 5px 0 var(--lw-line); }
.lw-rw-card p { margin: 6px 0 0; font-size: .95rem; }
.lw-rw-icon { font-size: 1.4rem; margin-right: 6px; }
.lw-rw-card--input { box-shadow: 0 5px 0 #a9dcfb; } .lw-rw-card--process { box-shadow: 0 5px 0 #d4c8ff; }
.lw-rw-card--decision { box-shadow: 0 5px 0 #ffd3a1; } .lw-rw-card--output { box-shadow: 0 5px 0 #aee8b8; }

/* Tabs / compare */
.lw-compare-title { font: 700 1.1rem var(--lw-font-head); margin: 0 0 10px; }
.lw-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lw-tab { font: 700 .95rem var(--lw-font-head); border: 2px solid var(--lw-ink); border-radius: 14px; padding: 8px 14px; background: #fff; cursor: pointer; box-shadow: 0 4px 0 var(--lw-ink); transition: transform .12s; }
.lw-tab[aria-selected="true"] { background: var(--lw-ink); color: #fff; transform: translateY(2px); box-shadow: 0 2px 0 var(--lw-ink); }
.lw-tab--php[aria-selected="true"] { background: #777bb3; border-color: #4f5391; box-shadow: 0 2px 0 #4f5391; }
.lw-tab--javascript[aria-selected="true"] { background: #f7df1e; color: #222; border-color: #b9a400; box-shadow: 0 2px 0 #b9a400; }
.lw-tabpanel .lw-cb-code { border-radius: 16px; }
.lw-compare-note { margin: 10px 0 0; font: 600 .95rem var(--lw-font-head); color: #5b3cc4; }

/* ---------- Editor ---------- */
.lw-editor { --rows: 10; display: flex; border-radius: 18px; overflow: hidden; background: var(--lw-code-bg); box-shadow: 0 6px 0 #0f1230; font: 500 15px/1.7 var(--lw-font-code); }
.lw-editor-gutter { flex: none; width: 3em; padding: 12px 0; overflow: hidden; background: #181b36; color: #6c72a8; text-align: right; user-select: none; height: calc(var(--rows) * 1.7em + 24px); }
.lw-editor-gutter span { display: block; padding-right: .8em; }
.lw-editor-gutter span.is-error { background: rgba(255,90,95,.35); color: #fff; }
.lw-editor-area { position: relative; flex: 1; min-width: 0; height: calc(var(--rows) * 1.7em + 24px); }
.lw-editor-hl, .lw-editor-input { position: absolute; inset: 0; margin: 0; padding: 12px 14px; font: inherit; white-space: pre; overflow: auto; tab-size: 4; border: 0; }
.lw-editor-hl { color: var(--lw-code-fg); pointer-events: none; background: transparent; }
.lw-editor-hl .is-error { background: rgba(255,90,95,.28); display: inline-block; min-width: 100%; }
.lw-editor-input { color: transparent; background: transparent; caret-color: #ffd166; resize: none; outline: none; }
.lw-editor-input::selection { background: rgba(127, 220, 255, .3); }
.lw-editor:focus-within { box-shadow: 0 6px 0 #0f1230, 0 0 0 4px rgba(139,92,246,.45); }

/* ---------- Practice & tests ---------- */
.lw-practice { background: #f7fff8; border-color: #237a33; box-shadow: 6px 6px 0 #237a33; }
.lw-hints { display: grid; gap: 10px; margin-top: 12px; }
.lw-hint { padding: 12px 14px; border-radius: 16px; background: #fff8e1; box-shadow: 0 4px 0 #f1d27a; animation: lw-rise .35s ease-out; }
.lw-hint span { font: 700 .75rem var(--lw-font-head); text-transform: uppercase; background: var(--lw-sun); color: #3a2a00; padding: 4px 8px; border-radius: 99px; margin-right: 6px; }
.lw-solution { padding: 14px; border-radius: 18px; background: #f6f3ff; animation: lw-rise .35s ease-out; }
.lw-tests { margin-top: 12px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 5px 0 #ffc2c5; animation: lw-rise .3s ease-out; }
.lw-tests.is-pass { box-shadow: 0 5px 0 #9fe3aa; background: #f3fff5; }
.lw-tests-head { font: 700 1.05rem var(--lw-font-head); margin: 0 0 8px; }
.lw-test { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 0; border-top: 1px dashed var(--lw-line); font-size: .9rem; }
.lw-test > span:nth-child(n+3) { grid-column: 2; color: var(--lw-ink-soft); }
.lw-test-icon { grid-row: span 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; color: #fff; font-weight: 700; }
.lw-test.is-pass .lw-test-icon { background: var(--lw-grass); } .lw-test.is-fail .lw-test-icon { background: var(--lw-tomato); }
.lw-test code { font-family: var(--lw-font-code); background: #f2efff; padding: 1px 6px; border-radius: 6px; }
.lw-examples { list-style: none; padding: 0; display: grid; gap: 6px; }
.lw-examples code { display: inline-block; font-family: var(--lw-font-code); background: #f2efff; padding: 6px 10px; border-radius: 10px; }

/* ---------- Toasts & confetti ---------- */
.lw-toasts { position: fixed; z-index: 9999; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; gap: 8px; pointer-events: none; width: min(92vw, 420px); }
.lw-toast { font: 600 1rem var(--lw-font-head); padding: 14px 18px; border-radius: 18px; background: var(--lw-ink); color: #fff; box-shadow: 0 6px 0 #0b0e24; animation: lw-rise .35s cubic-bezier(.3,1.6,.5,1); text-align: center; }
.lw-toast--ok { background: var(--lw-grass); box-shadow: 0 6px 0 #237a33; }
.lw-toast--warn { background: var(--lw-orange); box-shadow: 0 6px 0 #b86200; }
.lw-toast.is-out { opacity: 0; transform: translateY(12px); transition: .4s; }
.lw-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9998; overflow: hidden; }
.lw-confetti i { position: absolute; width: 10px; height: 14px; border-radius: 3px; animation: lw-confetti 1.5s cubic-bezier(.15,.6,.4,1) forwards; }

/* ---------- Forms ---------- */
.lw-form { display: grid; gap: 14px; }
.lw-field { display: grid; gap: 6px; }
.lw-field > span { font: 600 .95rem var(--lw-font-head); }
.lw-field input, .lw-field select, .lw-field textarea { width: 100%; font: 500 1.02rem inherit; padding: 13px 16px; border-radius: 16px; border: 2px solid var(--lw-line); background: #fff; color: var(--lw-ink); box-shadow: inset 0 3px 0 rgba(0,0,0,.03); transition: border-color .15s, box-shadow .15s; }
.lw-field input:focus, .lw-field select:focus, .lw-field textarea:focus { outline: none; border-color: var(--lw-grape); box-shadow: 0 0 0 4px rgba(139,92,246,.18); }
.lw-pass { position: relative; }
.lw-pass button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 1.15rem; cursor: pointer; padding: 6px; }
.lw-strength { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--lw-ink-soft); }
.lw-strength::before { content: ''; flex: 1; height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--c, #e9e3d3) var(--w, 0%), #eee var(--w, 0%)); }
.lw-strength[data-score="1"] { --w: 25%; --c: var(--lw-tomato); } .lw-strength[data-score="2"] { --w: 50%; --c: var(--lw-orange); }
.lw-strength[data-score="3"] { --w: 75%; --c: var(--lw-sun); } .lw-strength[data-score="4"] { --w: 100%; --c: var(--lw-grass); }
.lw-check { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.lw-check input { width: 20px; height: 20px; accent-color: var(--lw-grape); }
.lw-form-msg { padding: 12px 14px; border-radius: 14px; font-weight: 600; animation: lw-rise .3s ease-out; }
.lw-form-msg.is-error { background: #fff0f0; color: #a3202a; }
.lw-form-msg.is-ok { background: #e9fbe9; color: #1b6d2a; }
.lw-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.lw-avatar-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.lw-avatar-pick label { cursor: pointer; }
.lw-avatar-pick input { position: absolute; opacity: 0; }
.lw-avatar-pick span { display: grid; place-items: center; width: 50px; height: 50px; font-size: 1.6rem; border-radius: 16px; background: #fff; border: 2px solid var(--lw-line); box-shadow: 0 4px 0 var(--lw-line); transition: transform .15s; }
.lw-avatar-pick input:checked + span { border-color: var(--lw-grape); box-shadow: 0 4px 0 var(--lw-grape); transform: translateY(-3px) rotate(-6deg); background: #f2efff; }
.lw-avatar-pick input:focus-visible + span { outline: 3px solid var(--lw-grape); }
[type="submit"].is-loading { pointer-events: none; opacity: .8; }
[type="submit"].is-loading::after { content: ''; width: 16px; height: 16px; margin-left: 8px; border: 3px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; display: inline-block; vertical-align: -3px; animation: lw-spin .7s linear infinite; }

/* ---------- Dashboard ---------- */
#lw-dashboard.is-loading { min-height: 300px; background: radial-gradient(circle, #f2efff 0 30%, transparent 31%) center/60px 60px; animation: lw-pulse 1.2s ease-in-out infinite; border-radius: 24px; }
.lw-guest-banner { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px; background: #fff4d6; box-shadow: 0 5px 0 #f1d27a; margin-bottom: 24px; }
.lw-guest-banner > span { font-size: 2rem; }
.lw-dash-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-bottom: 26px; }
.lw-dash-hero h2 { margin: 0 0 12px; }
.lw-ring { position: relative; width: 150px; height: 150px; flex: none; }
.lw-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lw-ring circle { fill: none; stroke-width: 14; stroke-linecap: round; }
.lw-ring-bg { stroke: #ece8ff; }
.lw-ring-fg { stroke: url(#lw-grad), var(--lw-grape); stroke: var(--lw-grape); stroke-dasharray: calc(var(--pct) * 1) 100; animation: lw-ring 1.4s cubic-bezier(.2,.8,.2,1); }
.lw-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.lw-ring strong { font: 700 2.2rem/1 var(--lw-font-head); }
.lw-ring small { color: var(--lw-ink-soft); }
.lw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 26px; }
.lw-stat { padding: 18px; border-radius: 22px; color: #fff; box-shadow: inset 0 -6px 0 rgba(0,0,0,.15), 0 10px 20px -10px rgba(0,0,0,.35); display: grid; gap: 2px; text-shadow: 0 2px 0 rgba(0,0,0,.12); }
.lw-stat-icon { font-size: 1.7rem; }
.lw-stat strong { font: 700 2rem/1.1 var(--lw-font-head); }
.lw-stat small { font-weight: 600; opacity: .95; }
.lw-dash-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; }
.lw-dash-side { display: grid; gap: 22px; align-content: start; }
.lw-card { background: var(--lw-card); border-radius: 24px; padding: 20px 22px; border: 3px solid var(--lw-ink); box-shadow: 6px 6px 0 var(--lw-ink); }
.lw-card h3 { margin: 0 0 14px; }
.lw-phase-bar { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; text-decoration: none; color: inherit; transition: background .15s, transform .15s; }
.lw-phase-bar:hover { background: #f7f5ff; transform: translateX(4px); }
.lw-phase-bar-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; font-size: 1.2rem; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.lw-phase-bar-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.lw-phase-bar-title { font: 600 .95rem var(--lw-font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-meter { display: block; height: 10px; border-radius: 99px; background: #eee9dc; overflow: hidden; box-shadow: inset 0 2px 0 rgba(0,0,0,.06); }
.lw-meter i { display: block; height: 100%; width: var(--pct, 0%); border-radius: inherit; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.lw-phase-bar-pct { font: 700 .9rem var(--lw-font-head); min-width: 3em; text-align: right; }
.lw-coach { padding: 12px 14px; border-radius: 16px; margin-bottom: 10px; }
.lw-coach p { margin: 0 0 6px; } .lw-coach ul { margin: 0; padding-left: 1.2em; }
.lw-coach--weak { background: #fff3e6; } .lw-coach--strong { background: #e9fbe9; }
.lw-topic { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 10px; align-items: center; margin-bottom: 10px; font-size: .92rem; text-transform: capitalize; }

/* ---------- Playground ---------- */
.lw-pg-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lw-select { display: inline-flex; align-items: center; gap: 8px; font: 600 .95rem var(--lw-font-head); }
.lw-select select { font: 500 .95rem inherit; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--lw-ink); background: #fff; box-shadow: 0 4px 0 var(--lw-ink); }
.lw-pg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.lw-pg-right { position: sticky; top: 90px; }
.lw-pg-placeholder { display: grid; place-items: center; text-align: center; gap: 10px; min-height: 380px; padding: 30px; border-radius: 24px; border: 3px dashed #cfc6ff; background: #faf8ff; }
.lw-pg-placeholder span { font-size: 4rem; animation: lw-bob 2.5s ease-in-out infinite; }
.lw-pg-tests { margin-top: 16px; padding: 16px; border-radius: 20px; background: #fff; border: 2px solid var(--lw-line); }
.lw-pg-testcases { width: 100%; padding: 10px; border-radius: 12px; border: 2px solid var(--lw-line); margin-bottom: 10px; }
.lw-pg-history { margin-top: 20px; }
.lw-pg-history summary { cursor: pointer; font: 600 1rem var(--lw-font-head); }
.lw-pg-history li { margin: 6px 0; font-size: .9rem; }
.lw-pg-history time { color: var(--lw-ink-soft); margin-right: 6px; }
kbd { font: 600 .7rem var(--lw-font-code); background: rgba(0,0,0,.18); padding: 2px 6px; border-radius: 6px; margin-left: 4px; }

/* ---------- Challenge ---------- */
.lw-ch-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; font-family: var(--lw-font-head); }
.lw-ch-mode { color: #fff; font-weight: 700; padding: 8px 14px; border-radius: 99px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.lw-ch-timer { margin-left: auto; font-size: 1.2rem; background: #fff; padding: 6px 14px; border-radius: 14px; border: 2px solid var(--lw-ink); box-shadow: 0 4px 0 var(--lw-ink); }
.lw-ch-timer.is-hurry { color: var(--lw-tomato); animation: lw-pulse .8s ease-in-out infinite; }
.lw-ch-start { text-align: center; padding: 40px 20px; border-radius: 28px; background: #fff; border: 3px dashed #cfc6ff; }
.lw-ch-start-icon { font-size: 4rem; animation: lw-bob 2.5s ease-in-out infinite; }
.lw-ch-problem { padding: 22px; border-radius: 24px; background: #fff; border: 3px solid var(--lw-ink); box-shadow: 6px 6px 0 var(--lw-ink); animation: lw-rise .4s ease-out; }
.lw-ch-score { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; padding: 26px; border-radius: 28px; background: #fff; border: 3px solid var(--lw-ink); box-shadow: 6px 6px 0 var(--lw-ink); }
.lw-ch-stats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 6px 22px; }
.lw-diff { font: 700 .7rem var(--lw-font-head); text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; border-radius: 99px; vertical-align: middle; background: #eee; }
.lw-diff--easy, .lw-diff--beginner { background: #e9fbe9; color: #1f7a33; } .lw-diff--medium { background: #fff4d6; color: #8a5a00; }
.lw-diff--hard { background: #ffecec; color: #c42a33; } .lw-diff--expert { background: #f2efff; color: #5b3cc4; }

/* ---------- Keyframes ---------- */
@keyframes lw-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes lw-flip { 0% { transform: rotateX(-90deg) translateY(-10px); } 100% { transform: rotateX(0) translateY(0); } }
@keyframes lw-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px) rotate(-1deg); } 40% { transform: translateX(8px) rotate(1deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes lw-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lw-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes lw-blink { 50% { opacity: 0; } }
@keyframes lw-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lw-spin { to { transform: rotate(360deg); } }
@keyframes lw-spin-in { from { transform: scale(0) rotate(-180deg); } to { transform: scale(1) rotate(0); } }
@keyframes lw-pulse { 50% { opacity: .55; } }
@keyframes lw-ring { from { stroke-dasharray: 0 100; } }
@keyframes lw-confetti { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 420px)) rotate(var(--r)); opacity: 0; } }

@media (max-width: 860px) {
	.lw-runner-grid:has(.lw-runner-code), .lw-pg-grid, .lw-dash-grid { grid-template-columns: 1fr; }
	.lw-pg-right { position: static; }
	.lw-quiz, .lw-trace-ex, .lw-practice, .lw-realworld, .lw-compare, .lw-term { padding: 16px; box-shadow: 4px 4px 0 var(--lw-ink); }
	.lw-cb-code { font-size: 13.5px; }
	.lw-rbtn span { display: none; }
	.lw-steps--across ol { flex-direction: column; } .lw-steps--across li:not(:last-child)::after { content: '⬇'; right: auto; left: 50%; top: auto; bottom: -27px; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}