@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#111a23;--navy2:#18232e;--canvas:#f3f5f7;--white:#fff;--ink:#17232d;--muted:#788590;--line:#dfe5e9;--line2:#e9edf0;--accent:#087e8b;--accent2:#0b6873;--accent-soft:#e5f3f4;--green:#16774b;--green-bg:#eaf6ef;--red:#b93c43;--red-bg:#fff0f0;--amber:#8d6816;--amber-bg:#fff7e4;--mono:'IBM Plex Mono',monospace;--sans:Manrope,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:13px;line-height:1.6}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #56aab2;outline-offset:2px}.sidebar{width:248px;background:var(--navy);color:#d5dfe5;position:fixed;inset:0 auto 0 0;padding:25px 16px 18px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;padding:0 7px 28px;border-bottom:1px solid #2b3640}.brand-symbol{width:37px;height:37px;border:1px solid #3e6971;display:grid;place-items:center;color:#b7e5e6;font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-2px}.brand-symbol span{color:#4ac2c8}.brand-text{font-size:11px;letter-spacing:1.2px;font-weight:800;line-height:1.35}.brand-text small{display:block;font-size:8px;letter-spacing:1px;color:#7e919d;font-weight:500;margin-top:4px}.workspace-label{font-size:9px;letter-spacing:1.5px;color:#71818d;font-weight:700;padding:26px 10px 10px}.side-nav{display:grid;gap:5px}.nav-item{display:flex;align-items:center;gap:11px;border:1px solid transparent;background:transparent;color:#aab7c0;padding:12px 11px;text-align:left;border-radius:5px;font-size:11px;font-weight:600;transition:.15s}.nav-item:hover{background:#1b2a35;color:#fff}.nav-item.active{background:#20343e;color:#fff;border-color:#2c5159;box-shadow:inset 2px 0 #45b8bf}.nav-icon{width:17px;text-align:center;color:#81a7ac;font-size:15px}.nav-index{margin-left:auto;font-family:var(--mono);font-size:9px;color:#657984}.nav-item.active .nav-index{color:#74c5ca}.sidebar-bottom{margin-top:auto}.system-state{display:flex;align-items:center;gap:10px;padding:13px 10px;border:1px solid #2a3a44;border-radius:5px}.status-dot{width:7px;height:7px;background:#4ac18c;border-radius:50%;box-shadow:0 0 0 4px #234138}.system-state strong,.system-state small{display:block}.system-state strong{font-size:10px;color:#e1e8eb}.system-state small{font-size:9px;color:#7f929c;margin-top:2px}.sidebar-note{font-family:var(--mono);font-size:8px;letter-spacing:.8px;line-height:2;color:#526672;padding:18px 10px 0}.main{margin-left:248px;min-height:100vh}.topbar{height:59px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 35px}.breadcrumbs{font-size:10px;color:#87939c}.breadcrumbs span{margin:0 9px;color:#c1c9cf}.breadcrumbs strong{color:#35434d;font-weight:700}.top-right{display:flex;align-items:center;gap:14px}.env-label{font-family:var(--mono);font-size:9px;letter-spacing:1px;border:1px solid #b9dfe1;color:var(--accent2);background:#f2fbfb;padding:5px 8px}.user-chip{width:27px;height:27px;background:#e8edef;color:#51616b;display:grid;place-items:center;border-radius:3px;font-size:9px;font-weight:800}.content{max-width:1380px;padding:31px 35px 20px;margin:0 auto}.view{display:none}.view.active{display:block;animation:fadein .18s ease}@keyframes fadein{from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}.page-intro{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:3px 0 24px}.page-intro.compact{margin-bottom:24px}.overline{font-family:var(--mono);font-size:9px;letter-spacing:1.2px;color:var(--accent);font-weight:600;margin-bottom:8px}.page-intro h1{font-size:27px;line-height:1.25;letter-spacing:-.9px;margin:0 0 10px;font-weight:800}.lead{font-size:12px;line-height:1.8;color:#74818b;max-width:740px;margin:0}.intro-mark{width:100px;height:100px;border:1px solid #d5e0e3;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a1b6ba;position:relative;flex-shrink:0}.intro-mark:before,.intro-mark:after{content:"";position:absolute;background:#b8d2d4}.intro-mark:before{height:1px;width:15px;top:-1px;left:13px}.intro-mark:after{width:1px;height:15px;right:-1px;bottom:13px}.intro-mark span{font-family:var(--mono);font-size:27px;letter-spacing:-4px}.intro-mark i{font-family:var(--mono);font-size:8px;font-style:normal;letter-spacing:1px}.page-code{font-family:var(--mono);font-size:10px;letter-spacing:2px;line-height:1.8;text-align:right;color:#91a4aa;border-right:2px solid #8fc7cb;padding-right:12px;flex-shrink:0}.notice{background:#edf6f6;border:1px solid #d6e9e9;display:flex;align-items:center;gap:12px;padding:12px 15px;margin-bottom:18px}.notice-mark{width:22px;height:22px;display:grid;place-items:center;background:#d7ebec;color:var(--accent);font-family:var(--mono);font-weight:600;border-radius:50%;flex-shrink:0}.notice strong{font-size:10px}.notice p{font-size:10px;color:#6d7e83;margin:2px 0 0}.notice-code{font-family:var(--mono);font-size:8px;color:#4e9297;letter-spacing:.8px;margin-left:auto;white-space:nowrap}.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:31px}.metric{background:#fff;border:1px solid var(--line);padding:17px 18px 14px;min-height:126px}.metric-label{font-family:var(--mono);font-size:8px;letter-spacing:.8px;color:#7e8b94;display:flex;justify-content:space-between}.metric-label span{color:#b6c1c7}.metric-value{font-family:var(--mono);font-size:31px;font-weight:500;letter-spacing:-1px;margin:10px 0 4px}.metric-value small{font-size:15px;color:#a3afb6}.metric-foot{display:flex;align-items:center;gap:8px;color:#87939b;font-size:9px}.metric-bar{height:3px;width:58px;background:#e7edef;display:block}.metric-bar i{display:block;width:0;height:100%;background:var(--accent);transition:width .2s}.status-inline{display:flex;align-items:center;gap:6px}.status-inline i{width:5px;height:5px;background:#37a87b;border-radius:50%}.section-title{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:0 0 13px}.section-title h2{font-size:17px;letter-spacing:-.4px;margin:0}.section-title>.muted{font-size:10px}.module-list{border:1px solid var(--line);background:#fff}.module-row{width:100%;display:flex;align-items:center;gap:16px;text-align:left;border:0;border-bottom:1px solid var(--line2);background:#fff;padding:16px 18px;color:var(--ink);transition:background .15s}.module-row:last-child{border-bottom:0}.module-row:hover{background:#f8fbfb}.module-number{font-family:var(--mono);font-size:11px;color:#8c9ba3;border:1px solid #dce4e7;width:31px;height:31px;display:grid;place-items:center;flex-shrink:0}.module-main{display:flex;flex-direction:column;gap:3px;min-width:0}.module-main strong{font-size:11px}.module-main small{font-size:10px;color:#839099}.module-status{margin-left:auto;font-family:var(--mono);font-size:8px;letter-spacing:.5px;color:#99a4aa;white-space:nowrap}.module-status.done{color:var(--green)}.module-arrow{color:#9caab0;font-size:16px;margin-left:8px}.bottom-note{display:flex;gap:20px;border-top:1px solid #dce3e6;margin-top:23px;padding:16px 2px}.bottom-note>span{font-family:var(--mono);font-size:8px;letter-spacing:1px;color:var(--accent);padding-top:3px}.bottom-note p{margin:0;color:#74818b;font-size:10px;line-height:1.8;max-width:850px}.workspace{background:#fff;border:1px solid var(--line);padding:22px 24px}.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line2);padding-bottom:16px;margin-bottom:21px}.step-label{font-family:var(--mono);font-size:8px;letter-spacing:1px;color:var(--accent)}.workspace-head h2{font-size:15px;margin:5px 0 0;letter-spacing:-.3px}.required-note{font-size:9px;color:#7d8a92;white-space:nowrap}.required-note i{display:inline-block;width:6px;height:6px;background:#cf6268;border-radius:50%;margin-right:5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}.field{min-width:0}.field label,.standalone-label{font-size:10px;font-weight:700;display:block;margin-bottom:7px}.field label b{color:#c24e54}.field input,.lab-input-row input{width:100%;border:1px solid #dce3e7;border-radius:3px;padding:11px 12px;color:#24333d;background:#fff;font-size:11px;transition:border .15s,box-shadow .15s}.field input::placeholder,.lab-input-row input::placeholder{color:#aab4ba}.field input:focus,.lab-input-row input:focus{outline:none;border-color:#6caeb2;box-shadow:0 0 0 2px #dff0f1}.field input.invalid{border-color:#d8787d;background:#fffafa}.field input.valid{border-color:#64b48a;background:#fbfefc}.field-meta{display:flex;flex-direction:column;gap:3px;margin-top:5px;min-height:24px}.field-meta small{font-size:9px;color:#8a969e}.field-meta .field-error{color:var(--red);font-weight:600}.action-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;padding-top:17px;border-top:1px solid var(--line2)}.btn{border-radius:3px;padding:10px 13px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:11px;border:1px solid transparent;transition:background .15s,border .15s;color:var(--ink)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent2)}.btn.secondary{background:#eef6f6;border-color:#d8e9e9;color:#276d73}.btn.secondary:hover{background:#e0f0f0}.btn.ghost{background:#fff;border-color:#dce3e7;color:#66757e}.btn.ghost:hover{background:#f5f8f9}.btn:disabled{opacity:.4;cursor:not-allowed}.result-panel{margin-top:15px;padding:13px 15px;font-size:10px;border-left:3px solid}.result-panel.success{background:var(--green-bg);border-color:#39946a;color:#236746}.result-panel.failure{background:var(--red-bg);border-color:#c84c54;color:#8e3038}.technical-note{display:flex;gap:12px;padding:14px 15px;background:#fbf8f0;border:1px solid #efe6cd;margin-top:15px}.note-symbol{font-family:var(--mono);font-weight:600;color:var(--amber);width:22px;height:22px;display:grid;place-items:center;background:#f5ebcf;flex-shrink:0}.technical-note strong{font-size:10px;color:#6d5a2d}.technical-note p{font-size:10px;color:#867a5c;margin:3px 0 0;line-height:1.7}.case-layout{display:grid;grid-template-columns:240px minmax(0,1fr);border:1px solid var(--line);background:#fff;min-height:450px}.case-index{background:#f8fafb;border-right:1px solid var(--line);padding:16px 12px}.case-index-title{font-family:var(--mono);font-size:8px;letter-spacing:.6px;color:#819098;display:flex;justify-content:space-between;margin-bottom:13px}.case-index-title span{color:var(--accent)}.case-nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 9px;text-align:left;background:transparent;border:1px solid transparent;color:#718089;font-size:10px;margin-bottom:4px}.case-nav-item:hover{background:#eef4f5}.case-nav-item.active{background:#e8f3f4;border-color:#d3e8e9;color:#1d6068}.case-nav-item .case-n{font-family:var(--mono);font-size:9px;color:#9aabb1}.case-nav-item .case-state{margin-left:auto;font-size:10px}.case-score{border-top:1px solid var(--line);margin-top:19px;padding:17px 5px 0;display:flex;flex-direction:column}.case-score span{font-family:var(--mono);font-size:8px;letter-spacing:1px;color:#829098}.case-score strong{font-family:var(--mono);font-size:24px;margin:5px 0}.case-score small{font-size:9px;color:#8c989f}.case-detail{padding:26px 29px}.case-kicker{display:flex;justify-content:space-between;gap:12px;align-items:center;font-family:var(--mono);font-size:9px;color:var(--accent)}.severity{font-size:8px;letter-spacing:.5px;color:#8b969c;background:#f0f3f4;padding:5px 7px}.case-detail h2{font-size:19px;line-height:1.5;letter-spacing:-.4px;margin:22px 0 10px;max-width:690px}.case-context{font-size:11px;line-height:1.8;color:#78858d;padding:12px 14px;background:#f7f9fa;border-left:2px solid #b5d7d9;margin:0 0 23px}.answer-label{margin-bottom:10px}.case-options{display:grid;gap:7px}.case-option{border:1px solid #dfe5e8;background:#fff;text-align:left;display:flex;align-items:center;gap:11px;padding:11px 12px;font-size:10px;color:#384852}.case-option:hover:not(:disabled){border-color:#80babe;background:#f8fcfc}.case-option .letter{font-family:var(--mono);font-size:9px;color:#8b999f;width:23px;height:23px;display:grid;place-items:center;background:#f0f3f4}.case-option.correct{border-color:#8dc8a9;background:#f1faf4}.case-option.wrong{border-color:#d98c90;background:#fff6f6}.case-option:disabled{cursor:default}.case-feedback{margin-top:13px;background:#f4f7f8;border:1px solid #e2e9eb;padding:12px 14px;color:#66767e;font-size:10px;line-height:1.7}.case-feedback strong{display:block;color:#2d434c;margin-bottom:3px}.case-actions{display:flex;gap:8px;margin-top:19px}.lab-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.8fr);gap:15px}.rule-chip{font-family:var(--mono);font-size:9px;color:#367a7f;background:#edf7f7;padding:6px 8px;white-space:nowrap}.lab-input-row{display:flex;gap:8px}.lab-input-row input{flex:1;min-width:0}.muted.small{font-size:9px;color:#8a969e;margin:8px 0 0}.preset-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line2)}.preset-row>span{font-size:9px;color:#87949b;margin-right:3px}.preset-row button{background:#fff;border:1px solid #dce4e7;border-radius:2px;padding:5px 9px;font-family:var(--mono);font-size:9px;color:#52636c}.preset-row button:hover{border-color:#80b9bd;color:var(--accent)}.lab-result{display:flex;gap:12px;align-items:flex-start;border:1px solid #e0e6e8;padding:13px 14px;margin-top:17px;min-height:66px;background:#fafbfc}.result-icon{font-family:var(--mono);font-size:15px;width:23px;height:23px;display:grid;place-items:center;background:#e9edef;color:#65747b;flex-shrink:0}.lab-result strong{font-size:10px}.lab-result p{font-size:9px;color:#7d8991;margin:3px 0 0}.lab-result.pass{background:#f1faf4;border-color:#d2eadb}.lab-result.pass .result-icon{background:#dcefe3;color:var(--green)}.lab-result.fail{background:#fff7f7;border-color:#f0d8d9}.lab-result.fail .result-icon{background:#f8e1e2;color:var(--red)}.spec-card{background:#17242d;color:#dce5e8;padding:22px 21px}.spec-card .overline{color:#7ac4c7}.spec-card h3{font-family:var(--mono);font-size:21px;font-weight:500;margin:5px 0 7px;color:#fff}.spec-card>p{font-size:10px;line-height:1.8;color:#aab9bf;margin:0}.spec-divider{height:1px;background:#34434b;margin:17px 0}.spec-line{display:flex;justify-content:space-between;gap:10px;margin:11px 0;font-size:9px;color:#9eafb5}.spec-line strong{font-family:var(--mono);font-size:9px;color:#e2ecee;text-align:right}.spec-hint strong{font-size:10px;color:#d7e7e9}.spec-hint p{font-size:9px;line-height:1.8;color:#98abb1;margin:5px 0 0}.table-title{margin-top:28px}.table-title .btn{font-size:9px}.table-wrap{overflow:auto;border:1px solid var(--line);background:#fff}table{border-collapse:collapse;width:100%;min-width:640px;text-align:left}th{background:#f7f9fa;color:#7f8c94;font-family:var(--mono);font-size:8px;letter-spacing:.6px;font-weight:500}td,th{padding:12px 13px;border-bottom:1px solid #e9edef;font-size:9px}td{color:#53636c}tbody tr:last-child td{border-bottom:0}td:first-child{font-family:var(--mono)}.empty{text-align:center;color:#9aa5ab;padding:25px}.pass-text{color:var(--green);font-weight:700}.fail-text{color:var(--red);font-weight:700}.assessment-intro{max-width:760px;margin:15px auto 0;background:#fff;border:1px solid var(--line);padding:32px 35px}.assessment-badge{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--accent);border-bottom:1px solid var(--line2);padding-bottom:13px}.assessment-intro h2{font-size:23px;margin:22px 0 8px}.assessment-intro>p{font-size:11px;color:#78858d;line-height:1.8;max-width:600px}.assessment-details{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0;padding:17px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}.assessment-details div{display:flex;flex-direction:column;gap:5px}.assessment-details span{font-family:var(--mono);font-size:8px;color:#87949b;letter-spacing:.5px}.assessment-details strong{font-size:11px}.assessment-progress{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:#6d7c84;margin-bottom:9px}.progress-line{height:3px;background:#e2e9eb}.progress-line i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}.question-card{max-width:800px;margin:22px auto;background:#fff;border:1px solid var(--line);padding:27px 29px}.question-code{font-family:var(--mono);font-size:9px;color:var(--accent);letter-spacing:1px}.question-card h2{font-size:18px;line-height:1.55;margin:12px 0 22px}.assessment-options{display:grid;gap:8px}.assessment-option{display:flex;align-items:center;gap:11px;text-align:left;background:#fff;border:1px solid #dfe5e8;padding:11px 12px;font-size:10px;color:#3b4b54}.assessment-option:hover:not(:disabled){border-color:#80b9bd;background:#f8fcfc}.assessment-option .letter{font-family:var(--mono);font-size:9px;color:#89969d;width:23px;height:23px;background:#f0f3f4;display:grid;place-items:center;flex-shrink:0}.assessment-option.correct{border-color:#8bc5a5;background:#f2faf5}.assessment-option.wrong{border-color:#d78b90;background:#fff6f6}.assessment-option:disabled{cursor:default}.assessment-feedback{background:#f5f8f8;border:1px solid #e1e9ea;margin-top:14px;padding:12px 14px;font-size:10px;color:#6a7981;line-height:1.7}.assessment-feedback strong{display:block;color:#2d444d;margin-bottom:3px}.question-card>.btn{margin-top:20px}.assessment-result{max-width:760px;margin:20px auto;text-align:center;background:#fff;border:1px solid var(--line);padding:40px 20px}.assessment-result .result-score{font-family:var(--mono);font-size:46px;color:var(--accent)}.assessment-result h2{font-size:20px;margin:8px 0}.assessment-result p{font-size:11px;color:#78858d;margin:0 auto 20px;max-width:500px}.footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #dfe5e8;margin-top:30px;padding:15px 0 4px;color:#8c989f;font-family:var(--mono);font-size:8px;letter-spacing:.5px}.footer i{font-style:normal;color:#b3bdc2}.footer b{color:#36a477;font-size:8px;margin-left:4px}.toast{position:fixed;right:22px;bottom:20px;background:#17242d;color:#fff;padding:12px 16px;font-size:10px;box-shadow:0 8px 25px #10182022;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none;z-index:30;max-width:320px}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1000px){.sidebar{width:215px}.main{margin-left:215px}.content{padding:25px 22px}.topbar{padding:0 22px}.case-layout{grid-template-columns:195px minmax(0,1fr)}.case-detail{padding:22px}.lab-grid{grid-template-columns:1fr}.spec-card{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}.spec-card .overline,.spec-card h3,.spec-card>p,.spec-divider,.spec-hint{grid-column:1/-1}.spec-line{margin:6px 0}}
@media(max-width:720px){.sidebar{position:relative;width:auto;inset:auto;padding:13px 14px}.brand{padding:0 4px 12px;border-bottom:0}.workspace-label,.sidebar-bottom{display:none}.side-nav{display:flex;overflow-x:auto;padding-top:10px;border-top:1px solid #2b3640}.nav-item{white-space:nowrap;padding:9px 10px;font-size:10px}.nav-index{display:none}.main{margin-left:0}.topbar{height:46px;padding:0 16px}.content{padding:22px 14px}.page-intro h1{font-size:23px}.intro-mark{display:none}.page-code{font-size:8px}.metric-grid{grid-template-columns:1fr;gap:8px}.metric{min-height:auto;padding:13px 15px}.metric-value{font-size:26px;margin:5px 0}.metric-foot{margin-top:4px}.notice-code{display:none}.module-row{gap:10px;padding:13px 11px}.module-main small{line-height:1.5}.module-status{font-size:7px}.module-arrow{display:none}.form-grid{grid-template-columns:1fr;gap:15px}.workspace{padding:17px 14px}.workspace-head{align-items:flex-start;flex-direction:column}.action-row{flex-direction:column;align-items:stretch}.action-row .btn{width:100%}.case-layout{grid-template-columns:1fr}.case-index{border-right:0;border-bottom:1px solid var(--line)}.case-index-title{margin-bottom:8px}.case-index #case-nav{display:flex;overflow:auto;gap:5px}.case-nav-item{width:auto;min-width:40px;justify-content:center;padding:8px}.case-nav-item .case-title,.case-nav-item .case-state{display:none}.case-score{display:none}.case-detail{padding:18px 14px}.lab-input-row{flex-direction:column}.lab-input-row .btn{width:100%}.spec-card{display:block}.assessment-intro{padding:23px 18px}.assessment-details{gap:8px}.assessment-details strong{font-size:10px}.question-card{padding:20px 15px}.footer{flex-direction:column}.bottom-note{gap:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* ===== Readability & visual refinement ===== */
:root {
  --canvas: #f4f7fb;
  --white: #ffffff;
  --ink: #172536;
  --muted: #627386;
  --line: #dce5ee;
  --line2: #e9eef4;
  --accent: #087f8c;
  --accent2: #066874;
  --accent-soft: #e5f5f6;
  --sans: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}
html { scroll-padding-top: 24px; }
body { font-size: 15px; line-height: 1.7; background: var(--canvas); color: var(--ink); }
.sidebar { width: 264px; padding: 28px 18px 20px; background: linear-gradient(180deg,#152434 0%,#101c2a 100%); }
.brand { padding-bottom: 30px; }
.brand-symbol { width: 42px; height: 42px; border-radius: 10px; font-size: 17px; }
.brand-text { font-size: 12px; letter-spacing: 1.1px; }
.brand-text small { font-size: 9px; letter-spacing: 1.15px; }
.workspace-label { font-size: 10px; padding-top: 28px; }
.side-nav { gap: 7px; }
.nav-item { padding: 13px 12px; border-radius: 9px; font-size: 13px; gap: 12px; }
.nav-item.active { background: #203b4b; border-color: #315768; box-shadow: inset 3px 0 #4ac2c8; }
.nav-icon { font-size: 17px; }
.nav-index { font-size: 10px; }
.system-state { border-radius: 10px; padding: 14px 11px; }
.system-state strong { font-size: 12px; }
.system-state small { font-size: 10px; }
.sidebar-note { font-size: 9px; }
.main { margin-left: 264px; }
.topbar { height: 66px; padding: 0 40px; }
.breadcrumbs { font-size: 12px; }
.env-label { border-radius: 6px; font-size: 10px; padding: 6px 9px; }
.user-chip { width: 32px; height: 32px; border-radius: 8px; font-size: 11px; }
.content { max-width: 1480px; padding: 38px 40px 28px; }
.page-intro { gap: 30px; margin-bottom: 28px; }
.overline { font-size: 10px; letter-spacing: 1.3px; margin-bottom: 9px; }
.page-intro h1 { font-size: clamp(27px, 2.2vw, 35px); line-height: 1.24; letter-spacing: -.7px; margin-bottom: 12px; }
.lead { font-size: 15px; line-height: 1.75; color: #5f7080; max-width: 800px; }
.intro-mark { width: 112px; height: 112px; border-radius: 14px; background: #fff; }
.intro-mark span { font-size: 30px; }
.notice { border-radius: 12px; gap: 14px; padding: 15px 18px; margin-bottom: 22px; }
.notice-mark { width: 28px; height: 28px; font-size: 14px; }
.notice strong { font-size: 13px; }
.notice p { font-size: 12px; line-height: 1.65; color: #526b75; }
.notice-code { font-size: 9px; }
.metric-grid { gap: 16px; margin-bottom: 36px; }
.metric { border-radius: 14px; padding: 21px 22px 18px; min-height: 145px; box-shadow: 0 4px 16px rgba(26,47,68,.035); }
.metric-label { font-size: 10px; letter-spacing: .6px; }
.metric-value { font-size: 36px; margin: 12px 0 6px; }
.metric-foot { font-size: 11px; line-height: 1.5; }
.metric-bar { height: 4px; width: 68px; border-radius: 99px; overflow: hidden; }
.metric-bar i { border-radius: 99px; }
.section-title { margin-bottom: 16px; }
.section-title h2 { font-size: 22px; letter-spacing: -.35px; }
.section-title > .muted { font-size: 12px; color: #667789; }
.module-list { border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(26,47,68,.035); }
.module-row { gap: 17px; padding: 19px 21px; min-height: 78px; }
.module-row:hover { background: #f4fbfc; }
.module-number { width: 38px; height: 38px; border-radius: 10px; font-size: 12px; background: #f7fafc; }
.module-main { gap: 4px; }
.module-main strong { font-size: 14px; }
.module-main small { font-size: 12px; line-height: 1.55; color: #627386; }
.module-status { font-size: 10px; letter-spacing: .35px; }
.module-arrow { font-size: 20px; }
.bottom-note { gap: 22px; margin-top: 28px; padding: 20px 4px; }
.bottom-note > span { font-size: 10px; }
.bottom-note p { font-size: 13px; line-height: 1.8; color: #5e7081; }
.workspace, .case-detail, .spec-card, .assessment-intro, .question-card, .assessment-result { border-radius: 14px; box-shadow: 0 5px 22px rgba(26,47,68,.045); }
.workspace { padding: 28px 30px; }
.workspace-head { padding-bottom: 19px; margin-bottom: 24px; }
.step-label { font-size: 10px; }
.workspace-head h2 { font-size: 19px; line-height: 1.4; }
.required-note { font-size: 11px; }
.form-grid { gap: 25px 28px; }
.field label, .standalone-label { font-size: 13px; margin-bottom: 8px; }
.field input, .lab-input-row input { border-radius: 8px; padding: 13px 14px; font-size: 14px; min-height: 46px; }
.field-meta { margin-top: 7px; min-height: 27px; }
.field-meta small { font-size: 11px; line-height: 1.5; }
.action-row { gap: 10px; margin-top: 27px; padding-top: 21px; }
.btn { border-radius: 8px; padding: 12px 16px; font-size: 12px; min-height: 42px; }
.btn.primary { box-shadow: 0 3px 8px rgba(8,127,140,.12); }
.result-panel { border-radius: 8px; padding: 15px 17px; font-size: 13px; line-height: 1.7; }
.technical-note { border-radius: 12px; padding: 17px 19px; margin-top: 20px; }
.technical-note strong { font-size: 13px; }
.technical-note p { font-size: 12px; line-height: 1.75; }
.case-layout { gap: 20px; }
.case-index { border-radius: 12px; padding: 17px; }
.case-index-title { font-size: 10px; }
.case-detail { padding: 28px; }
.case-detail h2 { font-size: 23px; line-height: 1.45; }
.case-context { font-size: 14px; line-height: 1.8; color: #5e7081; }
.case-option, .assessment-option { border-radius: 9px; padding: 14px 16px; font-size: 14px; line-height: 1.6; }
.case-feedback, .assessment-feedback { border-radius: 9px; padding: 15px 17px; font-size: 13px; line-height: 1.75; }
.lab-grid { gap: 20px; }
.lab-input-row input { flex: 1; min-width: 0; }
.muted.small { font-size: 12px; line-height: 1.7; }
.preset-row { gap: 8px; flex-wrap: wrap; }
.preset-row button { border-radius: 7px; padding: 8px 12px; font-size: 12px; }
.lab-result { border-radius: 10px; padding: 16px; gap: 12px; }
.lab-result strong { font-size: 14px; }
.lab-result p { font-size: 13px; line-height: 1.7; }
.spec-card { padding: 23px; }
.spec-card h3 { font-size: 24px; }
.spec-card p, .spec-hint p { font-size: 13px; line-height: 1.75; color: #5e7081; }
.spec-line { padding: 11px 0; gap: 12px; }
.spec-line span, .spec-line strong { font-size: 12px; }
.table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; background: #fff; }
table { min-width: 650px; }
th { font-size: 11px; padding: 14px 15px; }
td { font-size: 12px; line-height: 1.6; padding: 14px 15px; }
.assessment-intro { padding: 32px; }
.assessment-intro h2 { font-size: 25px; }
.assessment-intro p { font-size: 14px; line-height: 1.8; max-width: 760px; }
.assessment-details { gap: 14px; margin: 24px 0; }
.assessment-details > div { border-radius: 10px; padding: 16px; }
.assessment-details span { font-size: 10px; }
.assessment-details strong { font-size: 17px; }
.assessment-progress { font-size: 12px; }
.question-card { padding: 30px; }
.question-card h2 { font-size: 23px; line-height: 1.5; margin: 18px 0 24px; }
.question-code { font-size: 11px; }
.footer { padding: 24px 0 8px; font-size: 10px; }
button, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid #65b9c0; outline-offset: 3px; }

@media (max-width: 1100px) {
  .sidebar { width: 228px; }
  .main { margin-left: 228px; }
  .content { padding: 30px 26px 24px; }
  .topbar { padding: 0 26px; }
  .page-intro h1 { font-size: 28px; }
  .lead { font-size: 14px; }
  .metric-grid { gap: 12px; }
  .metric { padding: 18px; }
}
@media (max-width: 800px) {
  .sidebar { position: relative; width: 100%; inset: auto; padding: 16px; }
  .brand { padding: 0 4px 15px; }
  .workspace-label, .sidebar-bottom { display: none; }
  .side-nav { display: flex; gap: 7px; overflow-x: auto; padding-top: 13px; }
  .nav-item { flex: 0 0 auto; padding: 10px 12px; font-size: 12px; }
  .nav-index { display: none; }
  .main { margin-left: 0; }
  .topbar { height: 54px; padding: 0 18px; }
  .content { padding: 24px 18px; }
  .page-intro { align-items: flex-start; }
  .intro-mark, .page-code { display: none; }
  .page-intro h1 { font-size: 27px; }
  .lead { font-size: 14px; }
  .metric-grid { grid-template-columns: 1fr; margin-bottom: 28px; }
  .metric { min-height: auto; }
  .metric-value { font-size: 32px; }
  .section-title { align-items: flex-start; flex-direction: column; gap: 5px; }
  .module-row { padding: 15px; gap: 12px; }
  .module-main small { font-size: 11px; }
  .module-status { display: none; }
  .workspace { padding: 20px 17px; }
  .form-grid { grid-template-columns: 1fr; gap: 18px; }
  .action-row { flex-direction: column; align-items: stretch; }
  .action-row .btn { width: 100%; }
  .case-layout, .lab-grid { grid-template-columns: 1fr; }
  .case-detail, .assessment-intro, .question-card { padding: 22px 18px; }
  .assessment-details { grid-template-columns: 1fr; }
  .notice-code { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Итоговая настройка читаемости: увеличенный текст и комфортные интервалы */
:root { --font-scale: 1; }
body { font-size: 15px; line-height: 1.7; }
.sidebar { width: 260px; }
.main { margin-left: 260px; }
.brand-text { font-size: 13px; line-height: 1.4; }
.brand-text small { font-size: 10px; }
.workspace-label { font-size: 11px; }
.nav-item { font-size: 13px; line-height: 1.5; padding: 14px 12px; }
.nav-index { font-size: 10px; }
.sidebar-note { font-size: 10px; }
.breadcrumbs { font-size: 12px; }
.overline { font-size: 11px; }
.page-intro h1 { font-size: clamp(29px, 2.3vw, 37px); line-height: 1.25; letter-spacing: -.5px; }
.lead { font-size: 16px; line-height: 1.75; color: #526477; }
.notice strong { font-size: 14px; }
.notice p { font-size: 13px; line-height: 1.65; }
.metric-label { font-size: 11px; }
.metric-foot { font-size: 12px; }
.section-title h2 { font-size: 22px; }
.module-main strong { font-size: 15px; }
.module-main small { font-size: 13px; line-height: 1.6; }
.bottom-note p { font-size: 13px; line-height: 1.8; }
.workspace-head h2 { font-size: 20px; line-height: 1.45; }
.step-label, .case-index-title, .question-code { font-size: 11px; }
.field label, .standalone-label { font-size: 14px; }
.field input, .lab-input-row input { font-size: 15px; min-height: 48px; }
.field-meta small, .muted.small { font-size: 12px; line-height: 1.7; }
.btn { font-size: 13px; min-height: 44px; }
.result-panel { font-size: 14px; line-height: 1.75; }
.technical-note p { font-size: 13px; line-height: 1.8; }
.case-index-title { font-size: 12px; }
.case-detail h2 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.5; }
.case-context { font-size: 16px; line-height: 1.85; color: #42566a; }
.case-option, .assessment-option { font-size: 15px; line-height: 1.7; padding: 15px 17px; }
.case-feedback, .assessment-feedback { font-size: 14px; line-height: 1.8; }
.lab-result strong { font-size: 15px; }
.lab-result p { font-size: 14px; line-height: 1.8; }
.spec-card p, .spec-hint p { font-size: 14px; line-height: 1.8; }
.spec-line span, .spec-line strong { font-size: 13px; }
th, td { font-size: 13px; line-height: 1.7; }
.assessment-intro h2 { font-size: 27px; }
.assessment-intro p { font-size: 15px; line-height: 1.8; }
.assessment-details span { font-size: 12px; }
.assessment-details strong { font-size: 19px; }
.assessment-progress { font-size: 13px; }
.question-card h2 { font-size: 24px; line-height: 1.55; }
.footer { font-size: 11px; }
button, input, select, textarea { font-size: inherit; }
@media (max-width: 1100px) { .sidebar { width: 240px; } .main { margin-left: 240px; } }
@media (max-width: 800px) { .sidebar { width: 100%; } .main { margin-left: 0; } .nav-item { font-size: 13px; } .case-context { font-size: 15px; } }

/* Примеры реализации, доступные после завершения всех ситуаций */
.code-solutions{margin-top:30px;padding-top:24px;border-top:2px solid #dce8ea}
.code-solutions>h2{font-size:24px;line-height:1.4;margin:8px 0 10px;color:#172b3b}
.code-intro{font-size:15px;line-height:1.8;color:#5f707b;max-width:850px;margin:0 0 22px}
.code-solution-card{border:1px solid #d8e2e6;border-radius:8px;background:#fff;padding:20px;margin:16px 0}
.code-solution-card h3{font-size:17px;line-height:1.5;margin:0 0 8px;color:#1b3345}
.code-language{display:inline-block;font-size:12px;color:#176b75;background:#eaf5f5;padding:4px 8px;border-radius:4px;margin-bottom:12px}
.code-solution-card pre{overflow:auto;white-space:pre;padding:18px;background:#14232e;color:#e4eff3;border-radius:6px;font:13px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4}
.code-copy{font-size:13px;padding:9px 13px}
@media(max-width:700px){.code-solution-card{padding:13px}.code-solution-card h3{font-size:15px}.code-solution-card pre{font-size:12px;padding:12px}.code-solutions>h2{font-size:21px}}

/* Пример кода показывается сразу после ответа на каждую ситуацию */
.stage-code-example{margin-top:16px;padding-top:15px;border-top:1px solid #dbe5e8}
.stage-code-example h3{font-size:17px;line-height:1.5;color:#183348;margin:0 0 8px}
.stage-code-example pre{overflow:auto;white-space:pre;padding:17px;background:#14232e;color:#e4eff3;border-radius:7px;font:13px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4;margin:12px 0}
.stage-code-note{font-size:13px;line-height:1.7;color:#536873;margin:12px 0 0}
.case-explanation{margin:4px 0 0}
@media(max-width:700px){.stage-code-example h3{font-size:16px}.stage-code-example pre{font-size:12px;padding:12px}}

/* Модуль «Публикация файлов» */
.file-topic-list{display:grid;gap:0;margin-bottom:18px}
.file-topic{display:flex;gap:17px;padding:20px;border-bottom:1px solid var(--line2);background:#fff}
.file-topic:last-child{border-bottom:0}
.file-topic h2{font-size:16px;margin:0 0 8px;color:var(--ink)}
.file-topic p,.file-topic li{font-size:13px;line-height:1.8;color:#596a73}
.file-topic p{margin:0}
.file-topic ul{margin:5px 0 0;padding-left:20px}
.file-topic code,.file-quiz code,.file-code-workspace code{font-family:var(--mono);background:#f0f5f6;padding:2px 4px;border-radius:3px}
.file-code-workspace,.file-quiz{margin-top:18px}
.file-code-workspace pre{overflow:auto;background:#14232d;color:#e4eff1;padding:20px;border-radius:6px;font:12px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;tab-size:4}
.file-code-workspace pre code{background:transparent;padding:0;color:inherit}
.file-code-workspace .code-intro,.file-quiz>p{font-size:13px;line-height:1.8;color:#63727a}
#file-quiz-options{margin-top:14px}
#file-quiz-options .assessment-option{font-size:13px;line-height:1.7;padding:14px}
#file-quiz-options .assessment-option.correct{border-color:#8bc5a5;background:#f2faf5}
#file-quiz-options .assessment-option.wrong{border-color:#d78b90;background:#fff6f6}
@media(max-width:720px){.file-topic{padding:15px;gap:12px}.file-code-workspace pre{font-size:11px;padding:14px}}