:root{
  --bg:#0e1116;
  --surface:#151a21;
  --surface-2:#1d242d;
  --surface-3:#242d36;
  --text:#eef2f6;
  --muted:#a9b4c0;
  --line:#303a45;
  --primary:#18a7a7;
  --primary-2:#2f7dd3;
  --accent:#f2a83b;
  --ok:#3ecf8e;
  --bad:#f05d5e;
  --warn:#f2a83b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg) url("/static/training/sberauto-night-city-bg-b.png") center/cover fixed no-repeat;color:var(--text);font-family:Inter,Segoe UI,system-ui,Arial,sans-serif;line-height:1.5;min-height:100vh;isolation:isolate}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(3,7,12,.66),rgba(3,12,15,.84)),radial-gradient(circle at 18% 20%,rgba(24,167,167,.16),transparent 34%),radial-gradient(circle at 82% 8%,rgba(47,125,211,.12),transparent 30%);pointer-events:none}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(115deg,transparent 0 45%,rgba(64,230,220,.11) 49%,transparent 53% 100%),radial-gradient(circle,rgba(100,255,235,.22) 0 1px,transparent 2px);background-size:640px 640px,160px 160px;opacity:.13;animation:cityNeonDrift 18s linear infinite}
body.home-page,body.auth-page{background-image:url("/static/training/sberauto-night-city-bg-a.png")}
body.home-page:before,body.auth-page:before{background:linear-gradient(180deg,rgba(2,7,13,.52),rgba(2,9,13,.78)),radial-gradient(circle at 20% 18%,rgba(24,167,167,.18),transparent 32%),radial-gradient(circle at 82% 12%,rgba(47,125,211,.14),transparent 30%)}
body>*{position:relative;z-index:1}
@keyframes cityNeonDrift{from{background-position:0 0,0 0}to{background-position:640px -640px,160px -160px}}
@media (prefers-reduced-motion: reduce){body:after{animation:none}}
a{color:inherit;text-decoration:none}
.topbar{min-height:68px;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:0 28px;border-bottom:1px solid rgba(98,132,150,.32);background:rgba(8,13,18,.78);position:sticky;top:0;backdrop-filter:blur(14px);z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand-logo{width:38px;height:38px;border-radius:8px;object-fit:cover;border:1px solid #29485a;box-shadow:0 0 18px rgba(24,167,167,.28)}
.login-logo{width:54px;height:54px;margin-bottom:12px}
.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--primary-2));font-size:13px;font-weight:900;color:white}
.version{font-size:12px;color:var(--accent);margin-left:2px}
.topbar nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:#d7dee7}
.topbar nav a:hover,.inline-form button:hover{color:white}
.inline-form{display:inline}.inline-form button{background:transparent;color:#d7dee7;border:0;cursor:pointer;font:inherit}
.container{max-width:1240px;margin:0 auto;padding:34px 22px 56px}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:28px;align-items:center;padding:34px 0 26px}
.hero h1,.page-head h1{font-size:clamp(38px,5vw,68px);line-height:1.02;margin:8px 0 14px;letter-spacing:0}
.hero p,.page-head p,.lead{color:var(--muted);font-size:18px;max-width:760px}
.eyebrow{text-transform:uppercase;color:var(--accent);font-weight:800;font-size:12px;letter-spacing:.12em}
.hero-actions,.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero-console{background:#0a0d12;border:1px solid #2c3642;border-radius:8px;box-shadow:0 18px 42px rgba(0,0,0,.34);overflow:hidden}
.console-bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#171d25;border-bottom:1px solid #2b3540}
.console-bar span{width:10px;height:10px;border-radius:50%;background:#f05d5e}.console-bar span:nth-child(2){background:#f2a83b}.console-bar span:nth-child(3){background:#3ecf8e}
pre{margin:0;background:#0a0d12;border:1px solid #2c3642;border-radius:8px;padding:16px;white-space:pre-wrap;color:#dce7ef}
.hero-console pre{border:0;border-radius:0;min-height:190px;color:#9ee7d8}
.metric-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 34px}
.metric-strip>div,.panel,.filters{background:rgba(17,24,32,.84);border:1px solid rgba(98,132,150,.32);border-radius:8px;box-shadow:0 14px 30px rgba(0,0,0,.28);backdrop-filter:blur(8px)}
.metric-strip>div{padding:18px}.metric-value{display:block;font-size:32px;font-weight:900}.metric-label{color:var(--muted);font-size:13px}
.section-head,.page-head,.panel-title,.compact-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin:30px 0 16px}
.section-head h2,.panel h2,.page-head h1{margin-top:0}.section-head p{margin:0;color:var(--muted)}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.role-card{background:linear-gradient(180deg,rgba(21,26,33,.9),rgba(16,22,29,.86));color:var(--text);border:1px solid rgba(98,132,150,.34);border-radius:8px;padding:24px;min-height:224px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 14px 28px rgba(0,0,0,.24);position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.role-card:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:34px 34px;opacity:.38}
.role-card>*{position:relative;z-index:1}
.role-card:hover,.lab-card:hover{transform:translateY(-2px);transition:.16s;border-color:var(--primary)}
.role-card h3{font-size:25px;margin:14px 0 6px}.role-card p{color:var(--muted);margin:0;max-width:310px}
.role-portrait{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;color:white;font-size:36px;font-weight:900;background:#111b25;position:relative;overflow:hidden;border:2px solid rgba(67,225,226,.42);box-shadow:0 0 0 6px rgba(67,225,226,.07),0 14px 30px rgba(0,0,0,.32)}
.role-portrait img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.role-portrait span{position:relative;z-index:1}
.role-portrait:after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 28px rgba(67,225,226,.22);pointer-events:none}
.role-portrait.qa{background:#8f6a42}.role-portrait.devops-cloud{background:#178a8a}.role-portrait.developers{background:#2f7dd3}
.dashboard-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px;margin-top:28px}
.panel{padding:22px;margin:0 0 18px}.panel-title{margin:0 0 12px}.panel-title h2{margin:0}.panel-title a{color:#8fdad7}
.big-number{font-size:58px;font-weight:900;line-height:1}
.progressbar{height:12px;background:#2a3440;border-radius:999px;overflow:hidden;margin:12px 0}.progressbar span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent))}
.list{padding-left:18px}.list.compact{list-style:none;padding:0;margin:0}.list.compact li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}.list.compact li:last-child{border-bottom:0}.list b{color:#cdeee9}
.lab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.lab-card{background:rgba(21,26,33,.88);border:1px solid rgba(98,132,150,.32);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;min-height:330px;backdrop-filter:blur(7px)}
.lab-art{height:126px;background:#202843;display:grid;place-items:center;position:relative;overflow:hidden}
.lab-art:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px}
.lab-art.browser_exploit_simulator{background:#1b2840}.lab-art.code_fix{background:#20312d}.lab-art.qa_case{background:#30283c}.lab-art.iac_validation{background:#332c1f}.lab-art.triage_case{background:#26303a}.lab-art.docker_lab{background:#1d3440}.lab-art.exploit_fix_verify{background:#202f45}.lab-art.real_finding_trainer{background:#342737}.lab-art.jira_comment_builder{background:#24303b}.lab-art.abuse_case_builder{background:#2d3140}.lab-art.secure_code_review{background:#23332e}.lab-art.threat_modeling{background:#2f2d45}.lab-art.release_readiness{background:#3a3022}.lab-art.ai_security_lab{background:#21333c}.lab-art.ctf_challenge{background:#342932}.lab-art.quiz{background:#26313a}.lab-art.awareness_quiz{background:#1f3330}.lab-art.risk_decision_case{background:#3b2f23}.lab-art.incident_scenario{background:#3a2528}.lab-art.manager_planning{background:#2f3324}.lab-art.post_incident_case{background:#312d3c}.lab-art.qa_strategy{background:#24313a}.lab-art.authorization_matrix_lab{background:#2a3044}.lab-art.api_test_design{background:#20343b}.lab-art.config_review{background:#343322}.lab-art.secure_design_choice{background:#293b32}.lab-art.vulnerability_triage{background:#26303a}
.lab-art.wide{height:190px;margin:22px 0;border-radius:8px;border:1px solid var(--line)}
.lab-code{position:relative;z-index:1;color:#eaf2ff;background:rgba(5,8,12,.45);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:10px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800}
.lab-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}.lab-body h3{margin:0;font-size:21px}.lab-body p{margin:0;color:var(--muted)}
.badge,.status{display:inline-flex;align-items:center;width:max-content;font-size:12px;padding:4px 9px;border-radius:999px;background:#2b3540;color:#dce8f2}
.status.ok{background:rgba(62,207,142,.16);color:#a7f3d0}
.status.done{background:rgba(62,207,142,.16);color:#a7f3d0}
.status.partial{background:rgba(242,168,59,.18);color:#ffe3ad}
.status.missing{background:rgba(240,93,94,.16);color:#ffc9c9}
.muted,.meta{color:var(--muted)}.meta-row{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);margin:14px 0}.meta-row span{border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--surface-2)}
.filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto auto;align-items:end;gap:14px;padding:16px;margin-bottom:22px}
label{display:block;color:#d6dee7;font-weight:700}select,textarea,input{width:100%;background:#0a0d12;border:1px solid #36424f;border-radius:8px;color:var(--text);padding:11px;margin-top:6px;font:inherit}
input[type="checkbox"],input[type="radio"]{width:20px;height:20px;min-width:20px;margin:0;accent-color:var(--primary);padding:0}
input[type="hidden"]{display:none}
textarea,.code-area{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;line-height:1.45;tab-size:4;min-height:260px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;background:var(--surface-3);border:1px solid #465462;color:var(--text);border-radius:8px;padding:10px 14px;cursor:pointer;font-weight:800}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#061112}.btn.danger{background:#7f1d1d;color:white}
.layout,.lab-detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px}.main-workspace{min-width:0}.side{position:sticky;top:88px;height:max-content}
.simulator{border:1px solid #394653;border-radius:8px;padding:14px;margin:18px 0;background:#10161d}.simulator-head{display:flex;justify-content:space-between;align-items:center}.simulator-head h3{margin:0}.simulator-head span{color:var(--muted);font-size:12px;text-transform:uppercase}
.sim-frame{width:100%;height:260px;border:1px solid #334155;border-radius:8px;background:#0f172a;margin-top:12px}.lab-frame{width:100%;height:520px;border:1px solid #334155;border-radius:8px;background:#0f172a}
.code-shell{position:relative}.code-shell:before{content:"local editor";position:absolute;right:10px;top:6px;color:#748394;font-size:11px;text-transform:uppercase}.submit-panel label{margin-top:16px}
.editor-wrap{border:1px solid #36424f;border-radius:8px;overflow:hidden;background:#0a0d12}
.editor-toolbar{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;background:#121922;border-bottom:1px solid #2d3946;color:#9fb0c1;font-size:12px}
.editor-wrap textarea{border:0;border-radius:0;margin:0;min-height:310px}
.monaco-mount{height:360px;width:100%}
.diff-details{margin:16px 0}.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.code-preview{min-height:160px}
.monaco-diff textarea{display:none}.monaco-diff-mount{height:320px;border:1px solid #36424f;border-radius:8px;overflow:hidden;background:#0a0d12;margin:12px 0}
.sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}.sim-input{margin:8px 0 10px}.sim-output{margin-top:14px;border-color:#3d7f7c;color:#bff4ec}
.sim-impact{margin-top:14px;border:1px solid var(--line);border-left-width:4px;border-radius:8px;padding:12px;background:#10161d}.sim-impact.critical,.sim-impact.high{border-left-color:var(--bad)}.sim-impact.gap{border-left-color:var(--warn)}.sim-impact.normal{border-left-color:var(--ok)}
.sim-table{margin-top:12px}.sim-table th,.sim-table td{padding:8px}
.sim-render{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.sim-browser{min-height:74px;border:1px solid var(--line);border-radius:8px;background:#080b10;padding:12px;margin-top:6px}
.ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.pill-row{display:flex;gap:8px;flex-wrap:wrap}.pill{border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--surface-2);color:var(--muted)}
details{border:1px solid var(--line);border-radius:8px;padding:10px;margin:8px 0;background:var(--surface-2)}summary{cursor:pointer;font-weight:800}
.checks{list-style:none;padding:0}.checks li{border:1px solid var(--line);border-left-width:4px;border-radius:8px;margin:8px 0;padding:10px}.checks .passed{border-left-color:var(--ok)}.checks .failed.error{border-left-color:var(--bad)}.checks .failed.warning,.checks li.warning{border-left-color:var(--warn)}
.message{padding:12px;border-radius:8px;margin:10px 0;border:1px solid var(--line)}.message.error{background:rgba(240,93,94,.12);border-color:rgba(240,93,94,.45)}.message.success{background:rgba(62,207,142,.12);border-color:rgba(62,207,142,.42)}
table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid var(--line);padding:11px;text-align:left;vertical-align:top}th{color:#cdeee9;background:#111820}
.progress-hero{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:20px}.steps{padding-left:20px}.warning-box{border:1px solid rgba(242,168,59,.55);background:rgba(242,168,59,.12);color:#ffe3ad;border-radius:8px;padding:12px;margin:16px 0}
.auth-page{display:grid;place-items:center;min-height:100vh}.login-card{width:430px;max-width:92vw;background:rgba(17,24,32,.82);border:1px solid rgba(132,210,220,.28);border-radius:8px;padding:30px;box-shadow:0 24px 70px rgba(0,0,0,.5);backdrop-filter:blur(14px)}.login-card h1{margin-bottom:4px}.login-card p{color:var(--muted)}
@media(max-width:960px){.hero,.role-grid,.dashboard-grid,.layout,.lab-detail,.progress-hero{grid-template-columns:1fr}.side{position:static}.filters{grid-template-columns:1fr}.metric-strip{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column;padding:16px 20px}.container{padding:24px 16px}.section-head,.page-head,.compact-head{align-items:flex-start;flex-direction:column}.hero-console{display:none}}

/* v0.8 Content & UX fixes */
.lab-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:18px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035)}
.learning-block{margin:18px 0;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(10,16,28,.45)}
.learning-block summary{cursor:pointer;list-style:none}.learning-block summary h2{display:inline}.learning-block h2{margin-top:0}.muted{color:#9aa7bd}.choice-panel{display:grid;gap:10px;margin:12px 0 22px;max-width:820px}.choice-panel ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.choice-panel li{padding:0;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04);overflow:hidden}.choice-panel label{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;cursor:pointer;width:100%;padding:14px 16px;min-height:54px}.choice-panel label:hover{background:rgba(24,167,167,.08)}.choice-panel label input{grid-column:1}.choice-panel label span,.choice-panel label{font-size:17px;line-height:1.35}.criteria-list{padding-left:18px}.guide-list li{margin:10px 0}.editor-wrap.local-only textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;min-height:360px;background:#08111f;color:#d8e2f0;border:0;outline:0;width:100%;padding:14px;resize:vertical}.editor-toolbar{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;background:#111b2e;border-bottom:1px solid rgba(255,255,255,.08);color:#9fb0ca;font-size:12px}.editor-wrap{border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;background:#08111f}.warning-box{padding:12px;border:1px solid rgba(250,204,21,.3);border-radius:12px;background:rgba(250,204,21,.08);color:#fde68a}


.simulator-frame { width: 100%; min-height: 460px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: #0b1020; display:block; }
.simulator-standalone { margin: 0; padding: 16px; background: #0b1020; color: #e8eefc; font-family: Inter, system-ui, sans-serif; }
.manager-alert { background: rgba(255, 178, 102, .12); border: 1px solid rgba(255,178,102,.35); border-radius: 12px; padding: 12px; }
.kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin: 16px 0; }
.kpi-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px; }
.kpi-card b { font-size: 28px; display:block; }
.role-progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:18px 0}
.role-progress-card{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:16px}
.role-progress-card h3{margin:0 0 8px;font-size:18px}
.developer-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.developer-column{border:1px solid var(--line);border-radius:8px;background:rgba(16,22,29,.82);padding:16px}
.developer-lab-list{display:grid;gap:12px;margin-top:14px}
.compact-lab-card{min-height:auto}
.compact-lab-card .lab-body{padding:16px}
.compact-lab-card h3{font-size:18px}
.compact-lab-card p{font-size:14px}
@media(max-width:900px){.developer-columns{grid-template-columns:1fr}}
.answer-card{display:grid;gap:16px}
.answer-block{border:1px solid var(--line);border-radius:8px;background:#10161d;padding:14px}
.answer-block h3{margin:0 0 10px;color:#cdeee9}
.answer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.answer-list{margin:0;padding-left:20px}
@media(max-width:760px){.answer-grid,.diff-grid{grid-template-columns:1fr}.choice-panel{max-width:none}}

/* Choice tasks: keep checkbox and answer text on the same visual baseline. */
.submit-panel .choice-panel,
.submit-panel .choice-panel #id_selected_cases{
  width:100%;
  max-width:920px;
}
.submit-panel .choice-panel #id_selected_cases{
  display:grid;
  gap:12px;
}
.submit-panel .choice-panel #id_selected_cases > div{
  margin:0 !important;
  padding:0 !important;
}
.submit-panel .choice-panel #id_selected_cases > div > label{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  width:100% !important;
  min-height:56px !important;
  margin:0 !important;
  padding:14px 16px !important;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-size:18px;
  line-height:1.3;
}
.submit-panel .choice-panel #id_selected_cases input[type="checkbox"]{
  order:-1;
  flex:0 0 24px !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  accent-color:var(--primary);
}
.status.success{background:rgba(62,207,142,.16);color:#a7f3d0}
.status.error{background:rgba(240,93,94,.16);color:#ffc9c9}
.result-panel{display:grid;gap:18px}
.result-summary{border:1px solid var(--line);border-left-width:5px;border-radius:8px;padding:18px;background:#10161d}
.result-summary h2{margin:0 0 6px}
.result-summary.success{border-left-color:var(--ok)}
.result-summary.error{border-left-color:var(--bad)}
.result-summary.partial{border-left-color:var(--warn)}
.format-guide{border:1px solid var(--line);border-left:5px solid var(--primary);border-radius:8px;background:#10161d;padding:16px;margin:18px 0}
.format-guide h2{margin:0 0 8px}
.format-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:10px}
.format-grid span{border:1px solid var(--line);border-radius:999px;background:var(--surface-2);padding:8px 10px;color:#cdeee9;font-weight:800;text-align:center}
.ctf-guide{border-left-color:var(--accent)}

.actions-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.triage-finding-card{border-left:4px solid var(--accent)}
.triage-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:14px 0 18px}
.triage-meta-grid div{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:8px;padding:12px}
.triage-meta-grid span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.evidence-box{white-space:pre-wrap;border:1px solid var(--line);border-radius:8px;background:#070b10;padding:14px;color:#dfefff;overflow:auto}
.triage-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:16px 0}
.triage-form-grid label{display:flex;flex-direction:column;gap:8px;font-weight:700}
.triage-form-grid select,.submit-panel textarea,.quiz-flow input[type="text"]{width:100%}
.triage-card-link{border-left:3px solid var(--accent)}
.quiz-flow{display:grid;gap:18px}
.quiz-question{border:1px solid var(--line);border-radius:8px;padding:18px;background:rgba(255,255,255,.025)}
.quiz-question legend{font-size:20px;font-weight:800;padding:0 8px}
.quiz-question label{display:flex;align-items:center;gap:12px;margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.025);cursor:pointer}
.quiz-question input[type="radio"]{width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent)}
.report-table{overflow:auto}
.report-table table{width:100%;border-collapse:collapse;min-width:760px}
.report-table th,.report-table td{border-bottom:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}
.report-table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}

.triage-stage{min-height:calc(100vh - 88px);margin:-28px calc(50% - 50vw) 0;background:#050910 url("/static/training/triage-cyber-bg.png") center/cover no-repeat}
.triage-stage__overlay{min-height:calc(100vh - 88px);display:flex;align-items:center;justify-content:center;padding:44px 18px;background:linear-gradient(90deg,rgba(5,9,16,.9),rgba(5,9,16,.48),rgba(5,9,16,.88))}
.triage-hero-card{width:min(980px,100%);border:1px solid rgba(130,220,255,.28);border-radius:10px;background:rgba(11,18,28,.78);box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset;backdrop-filter:blur(14px);padding:30px}
.triage-kicker{color:#78d8ff;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.1em;margin-bottom:8px}
.triage-hero-card h1{font-size:clamp(30px,4vw,54px);line-height:1.05;margin:0 0 16px;letter-spacing:0}
.triage-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.triage-badges span{border:1px solid rgba(120,216,255,.24);border-radius:999px;background:rgba(9,20,32,.74);padding:8px 12px;color:#cdeeff;font-weight:800;font-size:13px}
.triage-simple-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 24px}
.triage-simple-grid article{border:1px solid rgba(142,190,220,.22);border-radius:8px;background:rgba(4,9,14,.58);padding:16px;min-height:132px}
.triage-simple-grid span{display:block;color:#f3a63b;font-weight:900;margin-bottom:8px}
.triage-simple-grid p{margin:0;color:#e9f4ff;line-height:1.55}
.triage-button-form{border-top:1px solid rgba(142,190,220,.22);padding-top:18px}
.triage-button-form h2{margin:0 0 14px;font-size:24px}
.triage-decision-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.triage-decision-buttons button{border:1px solid rgba(120,216,255,.34);border-radius:8px;background:linear-gradient(180deg,rgba(22,156,185,.95),rgba(8,83,119,.95));color:#f7fbff;font-size:17px;font-weight:900;padding:16px 14px;cursor:pointer;box-shadow:0 12px 26px rgba(0,0,0,.28)}
.triage-decision-buttons button:hover{transform:translateY(-1px);border-color:#8af3ff;box-shadow:0 16px 32px rgba(0,0,0,.36),0 0 22px rgba(45,205,230,.22)}
.triage-result-strip{display:grid;gap:10px;margin-top:18px}
.triage-result-strip div{border-radius:8px;padding:12px 14px;background:rgba(255,255,255,.06);border-left:4px solid #ef5d5d}
.triage-result-strip div.passed{border-left-color:#35d491}
.triage-result-strip span{display:block;color:var(--muted);margin-top:4px}
@media (max-width:760px){.triage-simple-grid,.triage-decision-buttons{grid-template-columns:1fr}.triage-hero-card{padding:22px}.triage-stage__overlay{align-items:flex-start}}
.finding-guide{border-left-color:var(--primary-2)}
.hygiene-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:28px}
.hygiene-card{display:flex;flex-direction:column;gap:10px;min-height:190px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#151a21,#10161d);padding:18px;box-shadow:0 14px 28px rgba(0,0,0,.18)}
.hygiene-card:hover{border-color:var(--primary);transform:translateY(-2px);transition:.16s}
.hygiene-card h3{margin:0;font-size:20px}
.hygiene-card p{margin:0;color:var(--muted);flex:1}

/* Question page template refresh */
.attempt-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:flex-start;
  padding:24px;
  border:1px solid rgba(67,255,210,.18);
  border-radius:26px;
  background:linear-gradient(135deg,rgba(0,255,190,.11),transparent 28%),linear-gradient(180deg,rgba(14,28,40,.96),rgba(8,17,27,.96));
  box-shadow:0 22px 70px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.025);
  margin:0 0 18px;
}
.attempt-hero:after{
  content:"";
  position:absolute;
  right:-90px;
  top:-90px;
  width:280px;
  height:280px;
  background:radial-gradient(circle,rgba(0,255,190,.16),transparent 68%);
  pointer-events:none;
}
.attempt-hero .hero-content,.attempt-hero .status-card{position:relative;z-index:1}
.attempt-hero h1{margin:8px 0 14px;font-size:clamp(28px,3vw,38px);line-height:1.08;color:#f2fffb}
.attempt-hero .meta-pills{display:flex;flex-wrap:wrap;gap:8px}
.attempt-hero .meta-pills span{
  padding:7px 11px;
  border-radius:999px;
  background:rgba(0,255,190,.055);
  border:1px solid rgba(0,255,190,.15);
  color:#c9fff2;
  font-size:13px;
}
.attempt-hero .status-card{display:grid;gap:10px;justify-items:end;min-width:180px}
.attempt-hero .status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#ffcd7a;
  background:rgba(255,184,77,.1);
  border:1px solid rgba(255,184,77,.28);
  box-shadow:0 0 18px rgba(255,184,77,.08);
}
.attempt-hero .status:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ffbf5e;
  box-shadow:0 0 12px #ffbf5e;
}
.attempt-box{
  padding:10px 12px;
  border-radius:14px;
  color:#92aeb0;
  font-size:13px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  text-align:right;
}
.progress-mini{margin-top:10px;height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08)}
.progress-mini span{display:block;height:100%;width:42%;background:linear-gradient(90deg,#42f5b6,#18bfff);box-shadow:0 0 18px rgba(0,255,190,.25)}
.attempt-layout{grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.attempt-main{display:grid;gap:16px}
.attempt-card,.side-card{
  border:1px solid rgba(118,255,225,.14);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(13,27,39,.94),rgba(8,17,28,.96));
  box-shadow:0 22px 60px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.018);
}
.attempt-card{padding:20px;margin:0}
.card-title{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.step{
  width:32px;
  height:32px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:rgba(51,214,166,.12);
  color:#73e6c0;
  font-weight:900;
  font-size:13px;
  border:1px solid rgba(51,214,166,.2);
  box-shadow:0 0 16px rgba(0,255,190,.08);
}
.card-title h2{margin:0;font-size:20px;color:#f1fffb}
.section-grid{display:grid;gap:10px}
.compact-section{
  padding:13px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.045);
}
.compact-section h3,.compact-section summary{margin:0 0 7px;color:#f4fbfb;font-weight:900;cursor:pointer;font-size:15px}
.compact-section p{margin:0;color:#a9c4c4;line-height:1.55}
.attempt-card .control-grid{display:grid;gap:10px;margin:16px 0 18px;max-width:none}
.attempt-card .answer-list{display:grid;gap:10px;margin:16px 0 18px;max-width:none}
.attempt-card .answer-option{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:14px;
  align-items:center;
  width:100%;
  padding:15px 16px;
  border-radius:17px;
  border:1px solid rgba(143,255,226,.14);
  background:rgba(255,255,255,.035);
  color:#e8fbf7;
  cursor:pointer;
  transition:.16s ease;
  font-size:16px;
  line-height:1.35;
}
.attempt-card .answer-option:hover{
  transform:translateY(-1px);
  border-color:rgba(0,255,190,.38);
  background:rgba(0,255,190,.065);
  box-shadow:0 12px 28px rgba(0,255,190,.055);
}
.attempt-card .answer-control{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
}
.attempt-card .answer-option input[type="checkbox"],
.attempt-card .answer-option input[type="radio"]{
  appearance:none;
  width:22px;
  height:22px;
  min-width:22px;
  margin:0;
  border:1px solid rgba(143,255,226,.48);
  background:rgba(2,8,14,.85);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);
}
.attempt-card .answer-option input[type="checkbox"]{border-radius:7px}
.attempt-card .answer-option input[type="radio"]{border-radius:999px}
.attempt-card .answer-option input[type="checkbox"]:checked,
.attempt-card .answer-option input[type="radio"]:checked{
  background:radial-gradient(circle at center,#54ffd1 0 38%,transparent 40%),rgba(0,255,190,.13);
  border-color:#54ffd1;
  box-shadow:0 0 16px rgba(84,255,209,.35);
}
.attempt-card .answer-text{min-width:0;font-weight:800;color:#eefefa}
.attempt-card .choice-panel ul,
.attempt-card .choice-panel #id_selected_cases{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.attempt-card .choice-panel li,
.attempt-card .choice-panel #id_selected_cases>div{padding:0;margin:0;border:0;background:transparent}
.attempt-card .choice-panel label,
.attempt-card .choice-panel #id_selected_cases>div>label{
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) !important;
  gap:12px !important;
  align-items:start !important;
  width:100% !important;
  min-height:0 !important;
  padding:14px !important;
  border-radius:17px !important;
  border:1px solid rgba(143,255,226,.14) !important;
  background:rgba(255,255,255,.035) !important;
  color:#e8fbf7 !important;
  cursor:pointer;
  transition:.16s ease;
  font-size:16px !important;
  line-height:1.35 !important;
}
.attempt-card .choice-panel label:hover,
.attempt-card .choice-panel #id_selected_cases>div>label:hover{
  transform:translateY(-1px);
  border-color:rgba(0,255,190,.38) !important;
  background:rgba(0,255,190,.065) !important;
  box-shadow:0 12px 28px rgba(0,255,190,.055);
}
.attempt-card .choice-panel input[type="checkbox"]{
  appearance:none;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  margin-top:2px !important;
  border-radius:7px;
  border:1px solid rgba(143,255,226,.42);
  background:rgba(2,8,14,.8);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);
}
.attempt-card .choice-panel input[type="checkbox"]:checked{
  background:radial-gradient(circle at center,#54ffd1 0 38%,transparent 40%),rgba(0,255,190,.13);
  border-color:#54ffd1;
  box-shadow:0 0 16px rgba(84,255,209,.35);
}
.comment-label{display:block;margin:14px 0 8px;color:#dffdf7;font-weight:900}
.comment-label span{color:#8ea3aa;font-weight:500}
.attempt-card #id_submission_comment{
  min-height:130px;
  height:130px;
}
.submit-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.attempt-side{position:sticky;top:88px}
.side-card{padding:16px;margin-bottom:14px}
.side-card h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:16px;color:#f1fffb}
.side-card h3:before{content:"◇";color:#57f0c6;text-shadow:0 0 10px rgba(87,240,198,.8)}
.side-card details{padding:11px 0;border:0;border-top:1px solid rgba(143,255,226,.1);border-radius:0;background:transparent;margin:0}
.side-card details:first-of-type{border-top:0}
.side-card summary{color:#e8fbf7;font-weight:800;cursor:pointer}
.side-card p{color:#9fb8b8;line-height:1.5}
.attempt-side .warning-box{
  padding:14px;
  border-radius:17px;
  border:1px solid rgba(255,190,90,.24);
  background:linear-gradient(135deg,rgba(255,190,90,.12),rgba(255,90,90,.04));
  color:#ffd89e;
  line-height:1.45;
}
.solution-open{display:grid;gap:12px}
.solution-open p{margin:0}
.solution-inline{
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.16);
  color:#fff6dc;
}
.solution-inline p{margin:0 0 8px}
.solution-inline p:last-child{margin-bottom:0}
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}
.insight-row{display:grid;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}
.insight-row:last-child{border-bottom:0}
.insight-row b{color:#eafffb}
.insight-row span{color:var(--muted)}
.learning-filters{grid-template-columns:1.3fr repeat(4,minmax(130px,1fr)) auto auto}
.compact-learning-filters{grid-template-columns:repeat(2,minmax(190px,240px)) minmax(220px,auto) auto;justify-content:start}
.check-filter{display:flex;align-items:center;gap:10px;margin-top:28px;white-space:nowrap}
.check-filter input{width:20px}
.learning-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:18px 0}
.learning-grid.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
.learning-card,.compact-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  justify-content:space-between;
  min-height:230px;
  padding:18px;
  border:1px solid rgba(98,132,150,.32);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(21,26,33,.9),rgba(12,18,25,.9));
  box-shadow:0 14px 28px rgba(0,0,0,.2);
}
.learning-card{
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.learning-card:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:28px 28px;
  opacity:.45;
  pointer-events:none;
}
.learning-card:after{
  content:"";
  position:absolute;
  inset:-30%;
  background:radial-gradient(circle at 18% 18%,rgba(24,167,167,.13),transparent 34%),radial-gradient(circle at 82% 12%,rgba(47,125,211,.12),transparent 30%);
  pointer-events:none;
}
.learning-card:hover{
  transform:translateY(-2px);
  transition:.16s;
  border-color:var(--primary);
}
.featured-learning-card{
  min-height:260px;
  border-color:rgba(51,226,204,.62);
  background:
    linear-gradient(180deg,rgba(16,35,43,.94),rgba(9,17,24,.95)),
    linear-gradient(135deg,rgba(51,226,204,.18),rgba(47,125,211,.14));
  box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 0 1px rgba(51,226,204,.08) inset;
}
.featured-learning-card:before{
  opacity:.62;
  background-image:
    linear-gradient(rgba(51,226,204,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(51,226,204,.08) 1px,transparent 1px);
}
.featured-learning-card:hover{
  border-color:#65fff0;
  box-shadow:0 22px 48px rgba(0,0,0,.34),0 0 28px rgba(51,226,204,.12);
}
.featured-badge{
  margin-left:8px;
  border-color:rgba(255,210,107,.45);
  background:rgba(255,183,45,.12);
  color:#ffe2a1;
}
.learning-card-hitbox{
  position:absolute;
  inset:0;
  z-index:3;
}
.learning-card-main,.learning-card-footer{
  position:relative;
  z-index:2;
}
.learning-card-footer .btn{
  position:relative;
  z-index:4;
}
.learning-card h2{margin:10px 0 8px;font-size:22px}
.learning-card p{margin:0;color:var(--muted)}
.learning-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted)}
.learning-article{max-width:940px}
.learning-article .markdown{font-size:18px;color:#dbe7ed}
.learning-article .markdown h1{
  font-size:clamp(30px,3.1vw,46px);
  line-height:1.08;
  margin:4px 0 20px;
}
.learning-article .markdown h2{
  font-size:clamp(24px,2vw,32px);
  margin:34px 0 14px;
  color:#f5fbff;
}
.learning-article .markdown h3{
  font-size:22px;
  margin:26px 0 10px;
  color:#e9fff9;
}
.learning-article .markdown h4{
  font-size:19px;
  margin:22px 0 8px;
  color:#d9f6ff;
}
.learning-article .markdown p{
  line-height:1.74;
  margin:0 0 16px;
}
.learning-article .markdown ul,
.learning-article .markdown ol{
  padding-left:26px;
  margin:0 0 18px;
}
.learning-article .markdown li{
  margin:8px 0;
  line-height:1.65;
}
.learning-article .markdown code{
  padding:2px 6px;
  border-radius:6px;
  background:rgba(0,0,0,.34);
  color:#9ff5e7;
}
.learning-article .markdown pre{
  overflow:auto;
  padding:16px;
  border:1px solid rgba(98,132,150,.35);
  border-radius:8px;
  background:#070d12;
}
.learning-article .markdown pre code{
  padding:0;
  background:transparent;
  color:#e9fbff;
}
.learning-article .markdown blockquote{
  margin:18px 0;
  padding:14px 16px;
  border-left:4px solid var(--primary);
  border-radius:8px;
  background:rgba(41,194,184,.08);
  color:#e7fbff;
}
.learning-article .markdown hr{
  border:0;
  border-top:1px solid var(--line);
  margin:30px 0;
}
.markdown-table-wrap{
  overflow:auto;
  margin:18px 0 22px;
  border:1px solid rgba(98,132,150,.35);
  border-radius:8px;
}
.learning-article .markdown table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
  background:rgba(4,10,15,.44);
}
.learning-article .markdown th,
.learning-article .markdown td{
  padding:11px 12px;
  border-bottom:1px solid rgba(98,132,150,.24);
  text-align:left;
  vertical-align:top;
}
.learning-article .markdown th{
  color:#effffc;
  background:rgba(41,194,184,.12);
}
.learning-article .markdown tr:last-child td{
  border-bottom:0;
}
.learning-head{
  align-items:flex-start;
  margin:18px 0 14px;
}
.learning-head h1{
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.16;
  max-width:980px;
  margin:6px 0 10px;
}
.learning-head p{
  font-size:15px;
  line-height:1.5;
  max-width:900px;
}
.learning-head .eyebrow{
  font-size:11px;
}
.learning-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.compact-card{min-height:110px}
.compact-card span{color:var(--muted)}
.growth-card h2{margin-bottom:8px}
@media(max-width:980px){
  .attempt-layout{grid-template-columns:1fr}
  .attempt-side{position:static}
  .attempt-hero{flex-direction:column}
  .attempt-hero .status-card{justify-items:start}
  .profile-grid,.learning-grid.two-col{grid-template-columns:1fr}
  .learning-filters{grid-template-columns:1fr}
}

.learning-admin-form .form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.learning-admin-form .form-grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  margin-top:18px;
}
.learning-admin-form .full-field{margin-top:14px}
.learning-admin-form textarea{min-height:120px}
.learning-admin-form input[type="file"]{
  min-height:46px;
  padding:10px;
}
.check-list ul{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:grid;
  gap:8px;
}
.check-list li label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(143,255,226,.12);
  border-radius:8px;
  background:rgba(255,255,255,.03);
}
.check-list input[type="checkbox"]{
  width:20px;
  height:20px;
  min-width:20px;
}
@media(max-width:820px){
  .learning-admin-form .form-grid,
  .learning-admin-form .form-grid.two{grid-template-columns:1fr}
}


/* ai-token inline code fix START */
.ai-token,
.learning-detail code.ai-token,
.learning-content code.ai-token,
.markdown-body code.ai-token,
.lesson-content code.ai-token,
main code.ai-token {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: baseline !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  padding: 2px 7px !important;
  margin: 0 2px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(80, 210, 210, 0.22) !important;
  background: rgba(5, 14, 20, 0.82) !important;
  color: #eaf7f7 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 0.92em !important;
  line-height: 1.35 !important;
}
/* ai-token inline code fix END */


/* ai-token inline display START */
.markdown code.ai-token,
.ai-token {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  padding: 2px 7px !important;
  margin: 0 2px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(80, 210, 210, 0.24) !important;
  background: rgba(5, 14, 20, 0.82) !important;
  color: #eaf7f7 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 0.92em !important;
  line-height: 1.35 !important;
}
/* ai-token inline display END */


/* ai-token final display */
.ai-token,
.markdown code.ai-token {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  padding: 2px 7px !important;
  margin: 0 2px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(80, 210, 210, 0.24) !important;
  background: rgba(5, 14, 20, 0.82) !important;
  color: #eaf7f7 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 0.92em !important;
  line-height: 1.35 !important;
}

/* polished learning course view START */

/* Основной контейнер курса */
.learning-detail,
.learning-material-detail,
.lesson-detail,
.course-detail {
  max-width: 1120px !important;
  margin: 0 auto !important;
}

/* Тело курса / markdown */
.learning-detail .markdown,
.learning-detail .markdown-body,
.learning-detail .learning-content,
.learning-detail .lesson-content,
.learning-material-detail .markdown,
.learning-material-detail .markdown-body,
.learning-material-detail .learning-content,
.learning-material-detail .lesson-content,
.course-detail .markdown,
.course-detail .markdown-body,
.course-detail .learning-content,
.course-detail .lesson-content,
.markdown {
  max-width: 980px !important;
  margin: 24px auto 48px auto !important;
  padding: 34px 38px !important;
  border: 1px solid rgba(90, 130, 155, 0.26) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(14, 26, 36, 0.96), rgba(9, 18, 26, 0.96)) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: #dbe7ef !important;
  font-size: 18px !important;
  line-height: 1.78 !important;
}

/* Абзацы */
.markdown p {
  margin: 0 0 18px 0 !important;
  color: #d7e2ea !important;
}

/* Главные заголовки внутри курса */
.markdown h1,
.markdown h2 {
  margin: 34px 0 18px 0 !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 1px solid rgba(90, 210, 210, 0.22) !important;
  color: #f2f7fb !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.02em !important;
}

.markdown h1 {
  font-size: 34px !important;
}

.markdown h2 {
  font-size: 28px !important;
}

/* Разделы курса: Ситуация / Типовая ошибка / и т.д. */
.markdown h3 {
  position: relative !important;
  margin: 34px 0 16px 0 !important;
  padding: 15px 18px 15px 48px !important;
  border: 1px solid rgba(65, 190, 195, 0.26) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(90deg, rgba(28, 126, 135, 0.24), rgba(15, 31, 42, 0.74)) !important;
  color: #f1fbff !important;
  font-size: 21px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
}

.markdown h3::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #22c7c9 !important;
  box-shadow: 0 0 22px rgba(34, 199, 201, 0.65) !important;
}

/* Мелкие заголовки */
.markdown h4 {
  margin: 26px 0 12px 0 !important;
  color: #bfefff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* Списки */
.markdown ul,
.markdown ol {
  margin: 12px 0 22px 0 !important;
  padding-left: 28px !important;
}

.markdown li {
  margin: 8px 0 !important;
  padding-left: 4px !important;
  color: #dce8ef !important;
}

.markdown li::marker {
  color: #2fd3d4 !important;
}

/* Жирный текст */
.markdown strong {
  color: #ffffff !important;
  font-weight: 850 !important;
}

/* Inline code */
.markdown code {
  padding: 2px 7px !important;
  border: 1px solid rgba(90, 210, 210, 0.22) !important;
  border-radius: 7px !important;
  background: rgba(4, 13, 20, 0.72) !important;
  color: #eafcff !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 0.92em !important;
  white-space: nowrap !important;
}

/* AI markers */
.markdown code.ai-token,
.ai-token {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  padding: 2px 8px !important;
  margin: 0 2px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(80, 210, 210, 0.30) !important;
  background: rgba(5, 14, 20, 0.88) !important;
  color: #eaffff !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Блоки кода */
.markdown pre {
  margin: 18px 0 26px 0 !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(95, 130, 150, 0.30) !important;
  border-radius: 16px !important;
  background: #061018 !important;
  overflow-x: auto !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.markdown pre code {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #dff8ff !important;
  white-space: pre !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Цитаты / важные примечания */
.markdown blockquote {
  margin: 22px 0 !important;
  padding: 16px 20px !important;
  border-left: 4px solid #22c7c9 !important;
  border-radius: 14px !important;
  background: rgba(34, 199, 201, 0.08) !important;
  color: #e4f8fb !important;
}

/* Таблицы */
.markdown-table-wrap {
  margin: 22px 0 28px 0 !important;
  overflow-x: auto !important;
  border: 1px solid rgba(95, 130, 150, 0.28) !important;
  border-radius: 16px !important;
  background: rgba(6, 16, 24, 0.74) !important;
}

.markdown table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 15px !important;
}

.markdown th,
.markdown td {
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(95, 130, 150, 0.20) !important;
  vertical-align: top !important;
}

.markdown th {
  background: rgba(34, 199, 201, 0.10) !important;
  color: #f0fbff !important;
  font-weight: 850 !important;
}

.markdown td {
  color: #d7e5ec !important;
}

/* Горизонтальная линия */
.markdown hr {
  margin: 34px 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(95, 130, 150, 0.24) !important;
}

/* Улучшение верхней части страницы курса */
.learning-detail header,
.learning-material-detail header,
.course-detail header {
  max-width: 980px !important;
  margin: 0 auto 22px auto !important;
}

/* Мобильная адаптация */
@media (max-width: 760px) {
  .learning-detail .markdown,
  .learning-detail .markdown-body,
  .learning-detail .learning-content,
  .learning-detail .lesson-content,
  .learning-material-detail .markdown,
  .learning-material-detail .markdown-body,
  .learning-material-detail .learning-content,
  .learning-material-detail .lesson-content,
  .course-detail .markdown,
  .course-detail .markdown-body,
  .course-detail .learning-content,
  .course-detail .lesson-content,
  .markdown {
    padding: 22px 18px !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    border-radius: 18px !important;
  }

  .markdown h1 {
    font-size: 28px !important;
  }

  .markdown h2 {
    font-size: 24px !important;
  }

  .markdown h3 {
    font-size: 18px !important;
    padding: 13px 14px 13px 42px !important;
  }
}

/* polished learning course view END */

/* compact attempt page START */

/* Верхний hero-блок задания */
.attempt-hero {
  padding: 24px 28px !important;
  margin: 0 auto 18px auto !important;
  border-radius: 22px !important;
  min-height: unset !important;
}

.attempt-hero .hero-content {
  gap: 10px !important;
}

.attempt-hero .eyebrow {
  margin-bottom: 8px !important;
  font-size: 13px !important;
  letter-spacing: 0.09em !important;
}

.attempt-hero h1 {
  margin: 0 0 14px 0 !important;
  font-size: 34px !important;
  line-height: 1.15 !important;
}

.attempt-hero .meta-pills {
  gap: 8px !important;
  margin-top: 6px !important;
}

.attempt-hero .meta-pills span {
  padding: 8px 12px !important;
  font-size: 13px !important;
  border-radius: 999px !important;
}

.attempt-hero .status-card {
  gap: 12px !important;
  padding: 0 !important;
}

.attempt-hero .status {
  padding: 9px 16px !important;
  font-size: 13px !important;
}

.attempt-hero .attempt-box {
  padding: 12px 14px !important;
  min-width: 140px !important;
  font-size: 13px !important;
}

/* Общая сетка попытки */
.attempt-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 22px !important;
  align-items: start !important;
  margin-top: 18px !important;
}

.attempt-main {
  gap: 16px !important;
}

/* Карточки внутри задания */
.attempt-main .attempt-card,
.attempt-main .card.attempt-card {
  padding: 20px 22px !important;
  margin-bottom: 16px !important;
  border-radius: 20px !important;
}

.attempt-main .card-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.attempt-main .card-title .step {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

.attempt-main .card-title h2 {
  margin: 0 !important;
  font-size: 23px !important;
  line-height: 1.2 !important;
}

/* Блоки Контекст / Справка / Задание */
.attempt-main .section-grid {
  display: grid !important;
  gap: 14px !important;
}

.attempt-main .compact-section {
  padding: 16px 18px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  background: rgba(13, 27, 39, 0.78) !important;
  border: 1px solid rgba(88, 126, 148, 0.18) !important;
  box-shadow: none !important;
}

.attempt-main .compact-section h3,
.attempt-main .compact-section summary {
  margin: 0 0 10px 0 !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  color: #f2f8fb !important;
  cursor: pointer !important;
}

/* ВАЖНО: перебиваем слишком жирный стиль .markdown, который мы делали для курсов */
.attempt-main .markdown,
.attempt-main .compact-section .markdown,
.attempt-main .attempt-card .markdown {
  max-width: none !important;
  margin: 8px 0 0 0 !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(78, 118, 140, 0.22) !important;
  background: rgba(5, 15, 23, 0.52) !important;
  box-shadow: none !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: #dbe6ed !important;
}

.attempt-main .markdown p,
.attempt-main .compact-section .markdown p,
.attempt-main .attempt-card .markdown p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

/* Блок ответа */
.attempt-main .submit-panel {
  padding: 22px 24px !important;
}

.attempt-main .submit-panel .muted {
  margin: 0 0 14px 0 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.attempt-main .choice-panel,
.attempt-main .answer-list,
.attempt-main .control-grid {
  display: grid !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.attempt-main .answer-option {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 54px !important;
  padding: 13px 16px !important;
  border-radius: 16px !important;
}

.attempt-main .answer-control {
  flex: 0 0 auto !important;
}

.attempt-main .answer-text {
  font-size: 16px !important;
  line-height: 1.35 !important;
}

.attempt-main .comment-label {
  display: block !important;
  margin: 18px 0 8px 0 !important;
  font-size: 16px !important;
}

.attempt-main textarea,
.attempt-main .submit-panel textarea {
  min-height: 90px !important;
  max-height: 180px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  border-radius: 14px !important;
}

.attempt-main .submit-actions {
  margin-top: 14px !important;
}

.attempt-main .submit-actions .btn {
  min-height: 48px !important;
  padding: 0 22px !important;
}

/* Правая колонка */
.attempt-side {
  position: sticky !important;
  top: 18px !important;
}

.attempt-side .side-card {
  padding: 20px !important;
  border-radius: 20px !important;
  margin-bottom: 16px !important;
}

.attempt-side .side-card h3 {
  margin: 0 0 14px 0 !important;
  font-size: 19px !important;
}

.attempt-side details {
  padding: 10px 0 !important;
}

.attempt-side summary {
  font-size: 16px !important;
}

/* Мобильная адаптация */
@media (max-width: 1100px) {
  .attempt-layout {
    grid-template-columns: 1fr !important;
  }

  .attempt-side {
    position: static !important;
  }
}

@media (max-width: 760px) {
  .attempt-hero {
    padding: 20px !important;
  }

  .attempt-hero h1 {
    font-size: 28px !important;
  }

  .attempt-main .attempt-card,
  .attempt-main .card.attempt-card {
    padding: 18px !important;
  }

  .attempt-main .markdown,
  .attempt-main .compact-section .markdown,
  .attempt-main .attempt-card .markdown {
    padding: 12px 14px !important;
    font-size: 15px !important;
  }
}

/* compact attempt page END */