/* FiSi product tokens. Legacy names are compatibility aliases, not a second palette. */
:root{
 --brand-950:#0b1220;--brand-900:#111c33;--brand-800:#163a70;--brand-700:#2f63b4;--brand-600:#3973c5;--brand-500:#648fce;--brand-300:#93c5fd;--brand-100:#dbeafe;--brand-50:#eff6ff;
 --bg:#f6f8fc;--surface:#fff;--ink:#16243b;--muted:#59677d;--line:#dce3ee;--surface-raised:#fff;--surface-soft:#f0f5fb;--focus:#2563eb;
 --green:var(--brand-700);--green-2:var(--brand-900);--mint:var(--brand-50);--orange:var(--brand-600);--orange-soft:var(--brand-50);--red:#b42338;
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;
 --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius:var(--radius-lg);--learning-radius:var(--radius-lg);
 --shadow:0 8px 32px #152d5310;--shadow-raised:0 16px 48px #142b5320;--motion-fast:140ms;--motion-normal:220ms;--z-nav:30;--z-modal:80;
}
.dark{--bg:#0b1220;--surface:#111e32;--surface-raised:#172741;--surface-soft:#172741;--ink:#e8effb;--muted:#afbed3;--line:#2c3c55;--green:#93c5fd;--green-2:#132744;--mint:#172e50;--orange:#60a5fa;--orange-soft:#182e4c;--focus:#93c5fd;--shadow:0 8px 32px #0002}
body{line-height:1.5}a,.dark a{color:var(--green)}button,a,input,select,textarea{transition:background-color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}:focus-visible{outline:3px solid var(--focus)!important;outline-offset:3px!important}button{min-height:40px}.btn{border-radius:var(--radius-md);font-weight:650;box-shadow:none!important;min-height:42px}.btn.primary{background:var(--brand-700);color:white}.btn.primary:hover{background:var(--brand-800)}.btn.subtle:hover{background:var(--surface-soft)}.kicker,.date,.concept small,.example small{color:var(--green)}.kicker.light{color:var(--brand-300)}.chip.warm{color:var(--green)}.user-badge{color:var(--green)}
.app{grid-template-columns:260px minmax(0,1fr)}.sidebar{background:var(--brand-950);padding:24px 16px;z-index:var(--z-nav)}.brand{padding:0 10px 24px}.brand small,.auth-brand small,.profile small,.search input::placeholder,.sidebar-progress>div{color:#a9bad4}.logo{background:var(--brand-600);box-shadow:none;border-radius:10px}.sidebar .profile{border-radius:10px}.sidebar .search,.recent-days{display:none}.sidebar .academy-nav-group,.sidebar #play-button,.sidebar #admin-button{display:none!important}#learning-nav{gap:2px;margin-top:22px}#learning-nav .nav-label{color:#8da2c1;letter-spacing:1.4px;margin-top:20px;font-size:9px}#learning-nav a{color:#c6d4e9;display:flex;gap:12px;align-items:center;padding:9px 12px;font-size:13px;border-radius:7px}#learning-nav a[aria-current=page]{background:#1a3156;color:#fff;box-shadow:inset 3px 0 var(--brand-500)}#learning-nav a:hover{background:#17263e}#learning-nav .nav-icon{width:20px;text-align:center;font-size:17px;color:#87a9df}#nav-collapse{background:none;border:1px solid #344259;color:#b8c9e1;border-radius:7px;margin-top:20px;font-size:12px}.nav-collapsed .app{grid-template-columns:84px minmax(0,1fr)}.nav-collapsed .sidebar{padding:20px 12px}.nav-collapsed .brand{padding:0 8px 12px}.nav-collapsed .brand>div,.nav-collapsed .profile,.nav-collapsed .nav-label,.nav-collapsed .nav-text,.nav-collapsed .sidebar-progress{display:none!important}.nav-collapsed #learning-nav a{justify-content:center;padding:12px}.nav-collapsed #nav-collapse{font-size:0}.nav-collapsed #nav-collapse:after{content:'→';font-size:18px}
.topbar,.dark .topbar{height:70px;background:var(--bg);backdrop-filter:none;padding:0 32px}.crumb{color:var(--muted)}.crumb b{color:var(--ink)}.saved{color:var(--muted)}.content{max-width:1560px;padding:34px clamp(20px,3vw,48px) 80px}.language-control{display:flex;align-items:center;gap:6px}.language-control select{max-width:130px;min-height:38px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:6px 9px;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.learning-hero h1{font-weight:650;font-size:clamp(30px,3vw,44px);letter-spacing:-1.5px}.learning-hero{max-width:none;padding-top:4px}.learning-hero p{max-width:68ch}.cockpit-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:24px}.cockpit-hero .learning-hero{padding-bottom:0}.cockpit-hero h1{margin:12px 0}.cockpit-hero .hero-date{font-size:12px;color:var(--muted)}.learning-stats{background:var(--brand-900);border-radius:12px;padding:22px 12px;margin-bottom:30px}.learning-stats span,.learning-stats strong small{color:#bacde9}.learning-stats strong{font-size:26px}.learning-grid{gap:16px}.learning-card{box-shadow:none;padding:22px;border-radius:12px}.learning-card h2{font-size:20px;margin:14px 0 10px}.learning-card:hover{border-color:#b7c8e3}.learning-card p{font-size:13px}.learning-meter progress::-webkit-progress-value{background:var(--brand-600)}.learning-meter progress::-moz-progress-bar{background:var(--brand-600)}.learning-section-head{margin-top:30px}.learning-section-head h2{font-size:21px}.learning-badge.complete,.dark .learning-badge.complete{background:var(--mint);color:var(--green);border-color:var(--line)}.cockpit-lower{display:grid;grid-template-columns:1.4fr 1fr;gap:28px}.activity-list{list-style:none;padding:0;margin:0}.activity-list li{display:flex;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}.activity-list time{font-size:11px;color:var(--muted);white-space:nowrap}.activity-list strong{display:block;font-size:13px}.activity-list p{font-size:12px;color:var(--muted);margin:4px 0}.compact-empty{padding:20px 0;color:var(--muted);font-size:13px}.strength-list{display:flex;flex-wrap:wrap;gap:8px}.dimension-bars{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:2px 16px}.dimension-bars .learning-meter>span{font-size:10px}
.learning-tabs{position:sticky;top:70px;z-index:10;box-shadow:0 4px 12px #142b5307;border-radius:10px;padding:6px}.learning-tabs a:focus,.learning-tabs a:hover{background:var(--mint)}.competencies>div{border:0;border-bottom:2px solid var(--line);border-radius:0;background:transparent;padding:12px}.competencies strong{font-size:13px}.lesson-hero h1{font-size:clamp(30px,3.2vw,46px);letter-spacing:-1.5px}.lesson-section{max-width:1000px;padding-top:40px}.explain{color:var(--ink);max-width:78ch;line-height:1.85}.dark .explain{color:var(--ink)}.story{box-shadow:none;border-left:3px solid var(--brand-500);border-radius:6px;padding:24px 28px}.story p{font-size:16px}.remember{background:var(--brand-900);border-radius:12px}.remember li{color:#ccdbef}.concept,.example{border-radius:10px}.exam-gate,.question-card{background:var(--surface);border-radius:12px;box-shadow:none}.answer:hover,.dark .answer:hover{background:var(--mint)}.toast{background:var(--brand-900)}.auth-screen{background:var(--brand-950)}.auth-copy>p{color:#b6c8e1}.auth-points span{color:#8ba7ce}.auth-points b{color:#d8e5f8}.auth-card{border-radius:16px}.auth-form input{background:var(--surface-soft)}
.practice-hero h1{font-size:clamp(26px,2.7vw,38px)}.practice-layout{grid-template-columns:minmax(180px,.8fr) minmax(0,2.8fr) minmax(180px,.8fr);gap:14px}.practice-workspace{min-height:480px;padding:22px;border-radius:12px;box-shadow:0 8px 24px #162c5306}.practice-panel{padding:18px;border-radius:12px}.practice-panel h3{font-size:11px;letter-spacing:.35px}.practice-panel p,.practice-panel li{font-size:12px}.practice-guidance{border-color:var(--brand-500);background:var(--mint)}.practice-stages{padding:6px;border-radius:10px}.practice-stages button[aria-current=step]{background:var(--brand-700);color:white}.practice-stages button{min-height:48px}.practice-actions{border-radius:12px;background:var(--surface);box-shadow:var(--shadow);padding:12px 16px;bottom:12px}.practice-actions button{min-height:44px}.practice-mobile-tabs button[aria-pressed=true]{background:var(--brand-700);color:white}.task-brief{padding:18px 20px;margin-bottom:20px;border:1px solid var(--line);border-left:3px solid var(--brand-500);border-radius:8px;background:var(--mint)}.task-brief h2{margin:4px 0 10px;font-size:17px}.task-brief p,.task-brief li{font-size:13px;line-height:1.7}.task-brief ol{padding-left:20px;margin-bottom:0}.task-brief .task-position{font-size:11px;color:var(--green);font-weight:650}.task-brief footer{display:flex;justify-content:space-between;gap:10px;align-items:center;padding-top:12px}.task-brief footer button{font-size:12px;padding:7px 12px}.task-help{padding:14px 0;border-top:1px solid var(--line)}.task-help summary{font-size:12px;font-weight:650;cursor:pointer}.task-help p{margin-bottom:0}.practice-focus .practice-layout{grid-template-columns:1fr}.practice-focus .practice-panel{display:none}.practice-focus .practice-workspace{min-height:65vh}.practice-focus .practice-hero{padding:8px 0}.practice-focus .practice-hero h1{font-size:24px}.practice-focus .practice-hero p{display:none}.practice-focus .practice-stages{margin-bottom:12px}.practice-focus .practice-mobile-tabs{display:none}.practice-result-success{border-left:3px solid var(--brand-500);padding-left:12px}.practice-check.is-correct{background:var(--mint);color:var(--green)}.topology{background-color:var(--surface-soft);background-image:radial-gradient(#7f9bbc55 1px,transparent 1px);background-size:20px 20px;border-radius:10px;border-color:var(--line)}.device-art{background:linear-gradient(145deg,#edf4ff,#a6bbd7)!important;border-color:#819bbd!important;box-shadow:4px 7px 0 #6683aa,8px 15px 18px #19345420!important;color:#163a70!important}.device-art i{background:#3b82f6!important}.network-device.selected .device-art{outline:3px solid var(--brand-500);outline-offset:5px}.topology-lines line{stroke:#8398b4}.topology-lines .packet-flow{stroke:var(--brand-500)}.network-output{background:var(--mint);color:var(--ink);border-color:var(--line)}.subnet-blocks .selected{background:var(--brand-700);color:#fff}.network-bit{background:var(--brand-600)!important}.host-bit{background:#bfdbfe!important}.subnet-reference{border-left:3px solid var(--brand-500)}.project-board li{border-radius:9px;box-shadow:none}.project-board li:before{color:var(--brand-600)}.project-board li.dragging{border-color:var(--brand-500);background:var(--mint)}.engine-header h2{font-size:22px}.engine-header p{max-width:65ch}
/* Existing portals share the same surfaces without changing their functionality. */
.portal-hero,.academy-hero,.rp-hero{background:var(--brand-900)!important;color:#f4f7ff}.portal-hero p,.academy-hero p,.rp-hero p{color:#b9cce8!important}.portal-card,.academy-card,.rp-card{border-radius:12px;box-shadow:none}.portal-hero .kicker{color:var(--brand-300)}#admin-dialog{border-radius:16px!important;background:var(--surface)!important;color:var(--ink)!important}#admin-dialog .admin-dialog{background:var(--surface)!important;color:var(--ink)!important}#admin-dialog textarea{background:var(--surface-soft)!important;color:var(--ink)!important;border-color:var(--line)!important}#admin-dialog .btn.primary{background:var(--brand-700)!important}.translation-status{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.translation-status span{padding:5px 8px;background:var(--mint);border-radius:6px;font-size:11px}.content-language-note{font-size:11px;color:var(--muted);margin:0 0 16px}.mobile-menu{min-width:42px}
@media(min-width:851px) and (max-width:1200px){.app{grid-template-columns:224px minmax(0,1fr)}.content{padding-left:24px;padding-right:24px}.practice-layout{grid-template-columns:minmax(0,1fr) 220px}.practice-panel[data-area=scenario]{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.practice-panel[data-area=scenario]>h2,.practice-panel[data-area=scenario]>.kicker{grid-column:1/-1}.cockpit-hero{gap:16px}.cockpit-hero .btn{max-width:200px}.topbar{padding:0 24px}}
@media(max-width:850px){.app,.nav-collapsed .app{display:block}.sidebar,.nav-collapsed .sidebar{padding:24px 18px;width:min(88vw,320px)}.nav-collapsed .brand>div,.nav-collapsed .profile,.nav-collapsed .nav-label,.nav-collapsed .nav-text,.nav-collapsed .sidebar-progress{display:revert!important}.nav-collapsed #learning-nav a{justify-content:flex-start;padding:9px 12px}#nav-collapse{display:none}.topbar,.dark .topbar{height:64px;padding:0 16px}.content{padding:26px 18px 100px}.learning-tabs{top:64px}.cockpit-hero{grid-template-columns:1fr;gap:12px}.cockpit-hero .learning-actions{margin-bottom:4px}.cockpit-lower{grid-template-columns:1fr;gap:0}.learning-stats{padding:18px 5px}.learning-stats>div{padding:0 12px}.learning-stats strong{font-size:22px}.learning-stats span{font-size:10px}.practice-layout{display:block}.practice-panel,.practice-workspace{min-height:0}.practice-actions{bottom:0;border-radius:10px 10px 0 0;gap:8px;position:sticky}.practice-actions button{flex:1 1 auto;font-size:11px;padding:10px}.practice-actions>span{width:100%}.practice-focus .practice-workspace{display:block!important}.practice-stages button{padding:8px 5px}.task-brief{padding:14px}.competencies{gap:6px}.competencies>div{padding:10px 6px}.competencies strong{font-size:11px}.practice-workspace{padding:16px}.language-control select{max-width:112px}.saved{display:none}.learning-card{padding:20px}.learning-hero h1{letter-spacing:-1px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.portal-page{color:var(--ink);padding-top:4px}.portal-hero{padding:28px;border-radius:14px;border-bottom:0}.portal-hero h1,.academy-hero h1,.rp-hero h1{color:#f0f5ff!important;font-size:clamp(30px,3.5vw,46px)}.portal-stat{background:var(--surface)!important;border-color:var(--line)!important}.portal-stat strong{color:var(--green)!important}.portal-stat span{color:var(--muted)!important}.portal-tab.active,.portal-tabs button.active,.subject-filter button.active{background:var(--brand-700)!important;color:white!important}.portal-section-head h2,.native-card h2,.native-card h3,.exam-box h2,.next-mission h2,.academy-module h3,.checkpoint h2{color:var(--ink)}.native-card,.exam-box,.exam-result,.academy-module,.academy-step,.checkpoint{background:var(--surface);border-color:var(--line)}.portal-section-head .kicker{color:var(--green)}.task-instructions{margin:8px 0}.task-instructions>summary{cursor:pointer;color:var(--green);font-size:12px;font-weight:650}.task-brief .muted{font-size:10px;margin-bottom:0}.task-brief h3{font-size:13px}.task-brief footer button{min-height:36px}.task-brief h2{font-size:16px}.task-brief{padding:14px 18px}.practice-focus .task-brief{max-width:900px}.sidebar-progress{margin-top:18px}.offline-indicator{z-index:15}
.explain[data-content-source]{white-space:pre-line}.explain[data-content-source] p{white-space:normal}.fisi-v5-status{bottom:10px}@media(max-width:850px){body:has(.practice-actions) .fisi-v5-status{bottom:auto;top:70px;font-size:9px;padding:5px 8px}.task-brief footer{flex-wrap:wrap}.practice-heading .btn{font-size:11px;min-height:38px}.practice-hero{padding-top:0}.practice-hero h1{margin-top:9px}.practice-hero p{font-size:12px}.practice-heading{gap:8px}}
.dark .learning-stats{background:var(--brand-900);border:1px solid var(--line)}.dark .kicker,.dark .date{color:var(--brand-300)}.dark .device-art b,.device-art b{color:var(--brand-800)}.subnet-blocks .selected span{color:#dbeafe}.admin-import-grid{align-items:start}.admin-import-grid .learning-card{min-height:0}.practice-hero h1{margin:12px 0}.practice-hero p{margin:8px 0}.practice-heading{margin-bottom:12px}.practice-stages{margin-bottom:18px}.practice-hero{padding-bottom:14px}#learning-sync{border-bottom:1px solid var(--line)}.dark .portal-tab,.dark .portal-tabs button,.dark .subject-filter button{background:var(--surface);color:var(--ink);border-color:var(--line)}.dark .portal-tabs button.active{background:var(--brand-700);color:#fff}.dark .portal-hero{background:#132744!important}.dark .native-card{background:var(--surface);color:var(--ink)}.dark .native-card p,.dark .native-card li{color:var(--muted)}
.dark .practice-stages button[aria-current=step]{background:var(--brand-700);color:white}.learning-card .btn.primary:hover,.practice-actions .btn.primary:hover{background:var(--brand-800)}.dark .unit-id-list code{color:var(--brand-300)}.practice-stages button:disabled{color:var(--muted)}.dark .practice-stages button:disabled{color:var(--muted)}
.current-task-field{outline:2px solid var(--brand-500);outline-offset:5px;border-radius:6px}.address-range{display:flex;gap:3px;overflow-x:auto;padding:8px 0 12px}.address-range>span{flex:1;min-width:58px;border:1px solid var(--brand-300);border-left:3px solid var(--brand-600);border-right:3px solid #8ba2c4;border-radius:5px;background:var(--mint);padding:8px 6px;color:var(--ink)}.address-range b,.address-range small{display:block;font-size:11px}.task-brief footer{flex-wrap:wrap}.task-brief footer #task-jump{margin-right:auto;color:var(--green)}

/* Phase 2 refinement: calm surfaces and resilient component geometry. */
:root{--text:var(--ink);--text-muted:var(--muted);--primary:var(--brand-700);--primary-hover:#285798;--border:var(--line);--success:#28704f;--warning:#92601e;--danger:#b42338;--shadow:0 2px 10px #18345106;--shadow-raised:0 8px 28px #18345112;--radius-lg:12px}
*,*::before,*::after{box-sizing:border-box}
.content :is(section,article,aside,header,footer,nav,div,label),.top-actions{min-width:0}
.content :is(h1,h2,h3,p,a,button,span,li,label,strong,summary,code){overflow-wrap:anywhere}
.content :is(input,select,textarea,progress,img,svg){max-width:100%}
.btn{font-weight:600;white-space:normal;line-height:1.45;min-height:44px}
.btn.primary:hover{background:var(--primary-hover)}
h1,h2,h3{font-weight:600}.learning-hero h1,#lesson-top>.lesson-hero h1{font-weight:600;font-size:clamp(27px,2.5vw,38px);letter-spacing:-1px;line-height:1.2}
.kicker,.date,.card-meta,.learning-badge{font-weight:600;letter-spacing:.35px;text-transform:none;font-size:12px}
.learning-hero p,.learning-card p{font-size:14px;line-height:1.75}
.learning-card h2{font-size:19px;font-weight:600}.learning-section-head h2{font-size:21px;font-weight:600}
.sidebar{background:var(--surface);color:var(--ink);border-right:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.brand,.profile{color:var(--ink)}.brand small,.profile small,.sidebar-progress>div{color:var(--muted)}
.sidebar .profile{background:var(--surface-soft);border-color:var(--line)}.profile>span{background:var(--brand-100);color:var(--primary)}
#learning-nav .nav-label{color:var(--muted);font-size:11px;letter-spacing:.5px;margin-top:18px}
#learning-nav a{color:var(--muted);min-height:44px;font-weight:500}
#learning-nav a:hover{background:var(--surface-soft);color:var(--ink)}
#learning-nav a[aria-current=page]{background:var(--brand-50);color:var(--primary);box-shadow:inset 2px 0 var(--brand-500);font-weight:600}
#learning-nav .nav-icon{color:var(--primary);flex:0 0 20px}#nav-collapse{color:var(--muted);border-color:var(--line)}
.sidebar-progress{color:var(--muted)}.sidebar-progress progress{max-width:100%}
.topbar,.dark .topbar{background:var(--surface);border-bottom:1px solid var(--line)}
.language-control select{appearance:none;background:var(--surface-soft);border-color:transparent;font:600 12px/1.4 inherit;padding:10px 12px;cursor:pointer;min-height:44px}
.learning-stats{background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:20px 8px;box-shadow:none}
.learning-stats>div{border-color:var(--line)}.learning-stats span,.learning-stats strong small{color:var(--muted);font-size:13px}.learning-stats strong{font-size:25px;font-weight:550}
.learning-meter>span,.dimension-bars .learning-meter>span,.competencies span{font-size:12px;line-height:1.6}.learning-meter progress{display:block;margin-top:7px}
.cockpit-hero{gap:24px}.cockpit-hero .learning-hero{padding-bottom:0}.cockpit-hero .learning-actions{flex-shrink:0}
.learning-card{padding:22px}.learning-card>.learning-actions{padding-top:18px}.learning-card .learning-topics{line-height:1.75}
.learning-tabs{border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;gap:4px}
.lesson-section{max-width:960px}.explain{max-width:72ch;font-size:16px;line-height:1.85}.explain p+p{margin-top:16px}
.story{background:var(--surface-soft);border:0;border-left:3px solid var(--brand-300);padding:20px 24px}.story:after{display:none}
.remember{background:var(--surface-soft);color:var(--ink);border-left:3px solid var(--brand-300);padding:24px;border-radius:6px}.remember li{color:var(--ink)}
.concept,.example{border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 0;background:transparent}.concept small,.example small{font-size:12px;letter-spacing:.3px}.concept p,.example p{font-size:14px;line-height:1.8}
.portal-hero,.academy-hero,.rp-hero{background:var(--surface-soft)!important;color:var(--ink);border:1px solid var(--line);box-shadow:none!important}
.portal-hero h1,.academy-hero h1,.rp-hero h1{color:var(--ink)!important;font-size:clamp(28px,3vw,38px);font-weight:600;line-height:1.2}
.portal-hero p,.academy-hero p,.rp-hero p{color:var(--muted)!important}.portal-hero .kicker{color:var(--primary)}
.practice-layout{grid-template-columns:minmax(170px,.8fr) minmax(0,3fr) minmax(170px,.8fr)}
.practice-panel{background:transparent;border:0;padding:14px 10px}.practice-panel h2{font-size:16px}.practice-panel h3{font-size:13px}.practice-panel p,.practice-panel li{font-size:13px;line-height:1.75}
.practice-workspace{box-shadow:var(--shadow);padding:24px}.practice-stages{background:transparent;border:0;padding:0;flex-wrap:wrap}.practice-stages button{min-width:0;flex:1 1 110px;font-size:12px;border:1px solid var(--line);background:var(--surface)}
.practice-stages button[aria-current=step]{background:var(--brand-50);color:var(--primary);border-color:var(--brand-300)}
.task-brief{background:var(--surface-soft);border:0;border-left:2px solid var(--brand-300);padding:16px 18px}.task-brief h2{font-size:17px;line-height:1.55}.task-brief .task-why{color:var(--muted);margin:8px 0 12px}.task-brief .muted{font-size:12px;line-height:1.6}
.task-help summary,.task-instructions>summary{font-size:13px;line-height:1.6;min-height:40px;padding:9px 0}.task-help{padding:4px 0}.task-brief footer{justify-content:flex-start}.task-brief footer button{min-height:44px}
.practice-actions{position:static;box-shadow:none;border:1px solid var(--line);margin-top:18px;border-radius:10px;padding:14px}.practice-actions>span{font-size:12px}
.subnet-blocks .selected{background:var(--brand-50);color:var(--ink);border-color:var(--brand-300)}.subnet-blocks .selected span{color:var(--muted)}
.budget-card,.directory-root,.diagnostic-evidence{background:var(--surface-soft);color:var(--ink);border:1px solid var(--line)}
.project-board li{flex-wrap:wrap;gap:10px}.project-board li strong{min-width:100px}.project-board button{min-height:44px;min-width:44px}
.network-device strong{line-height:1.4}.network-toolbar,.network-fields,.business-calculator{grid-template-columns:repeat(2,minmax(0,1fr))}
.subnet-blocks{grid-template-columns:repeat(4,minmax(0,1fr))}.subnet-blocks>div{min-width:0}.subnet-blocks strong{font-size:14px}
.toast{max-width:calc(100vw - 32px);overflow-wrap:anywhere}.unit-id-list{max-width:100%}.content pre{max-width:100%;overflow:auto}.content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}.content th,.content td{overflow-wrap:normal}

.dark .sidebar{background:var(--surface)}.dark .learning-stats{background:var(--surface)}.dark .remember{background:var(--surface-soft)}
@media(min-width:851px) and (max-width:1200px){.practice-layout{grid-template-columns:minmax(0,1fr)}.practice-panel[data-area=scenario]{display:block}.practice-mobile-tabs{display:flex;gap:8px}.practice-mobile-tabs button{flex:1;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}.practice-layout [data-area]{display:none}.practice-layout[data-active-panel=workspace] [data-area=workspace],.practice-layout[data-active-panel=scenario] [data-area=scenario],.practice-layout[data-active-panel=status] [data-area=status]{display:block}}
@media(max-width:850px){.practice-mobile-tabs{display:flex;gap:8px}.practice-mobile-tabs button{flex:1;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}.practice-layout [data-area]{display:none}.practice-layout[data-active-panel=workspace] [data-area=workspace],.practice-layout[data-active-panel=scenario] [data-area=scenario],.practice-layout[data-active-panel=status] [data-area=status]{display:block}.practice-workspace{padding:16px}.learning-tabs{position:static}.learning-stats span{font-size:12px}.top-actions{gap:8px;flex-wrap:wrap}.language-control select{max-width:120px}.practice-actions{position:static;border-radius:10px}.content{padding-bottom:70px}.practice-stages button{flex-basis:100px}.learning-hero{padding-bottom:18px}}
@media(max-width:620px){.learning-stats{padding:20px}.learning-stats>div{padding:0}.learning-stats span{text-align:right}.content{padding-left:16px;padding-right:16px}.task-brief{padding:14px}.learning-grid{grid-template-columns:minmax(0,1fr)}.competencies{grid-template-columns:repeat(2,minmax(0,1fr))}.dimension-bars{grid-template-columns:repeat(2,minmax(0,1fr))}.business-calculator,.network-fields{grid-template-columns:minmax(0,1fr)}.practice-heading .learning-badge{width:100%}.practice-actions .btn{flex:1 1 140px}.task-brief footer button{flex:1 1 115px}.subnet-blocks>div{padding:12px 4px}.subnet-blocks strong{font-size:12px}}

/* Programmatic route focus must not draw a frame around the entire page. */
#content:focus-visible{outline:none!important}
.task-reference>summary{cursor:pointer;font-size:13px;color:var(--primary);padding:8px 0;min-height:40px}
.task-instructions ol{margin:0;padding-left:20px}.task-instructions li{margin:0 0 4px;line-height:1.6}
.practice-heading{margin-bottom:8px}.practice-hero{padding-bottom:8px}.practice-hero h1{font-size:clamp(25px,2.3vw,34px)}
#lesson-top .section-title{font-size:clamp(21px,2vw,27px);font-weight:600;line-height:1.45;max-width:65ch}
.portal-tab,.portal-tabs button,.subject-filter button,.portal-stat{border-radius:var(--radius-md)!important;box-shadow:none!important}
.portal-section-head h2{font-size:clamp(21px,2.2vw,28px);font-weight:600;line-height:1.4}
.language-control select{font-family:inherit;font-size:12px;font-weight:600;line-height:1.4}

#sidebar #fisi-v5-status{display:flex;position:static;inset:auto;z-index:auto;box-shadow:none;margin:16px 0 0;min-height:44px;border-radius:8px;justify-content:center;font-size:12px;width:100%}
.v5-hero{background:var(--surface-soft);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg)}.v5-card,.v5-kpi div,.v5-empty{background:var(--surface);border-color:var(--line);border-radius:var(--radius-md);box-shadow:none}.v5-btn,.v5-tabs button.active,.v5-filter button.active{background:var(--primary);color:white;border-radius:var(--radius-md)}.v5-btn.secondary{background:var(--surface);color:var(--primary);border-color:var(--line)}.v5-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}.v5-tabs{flex-wrap:wrap}.v5-hero h1{font-size:clamp(26px,3vw,38px)}

.language-control{gap:2px;padding:3px;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius-md)}
.language-control button{min-width:40px;min-height:40px;padding:6px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:600 12px/1.4 var(--font);cursor:pointer}
.language-control button[aria-pressed=true]{background:var(--surface);color:var(--primary);box-shadow:0 1px 3px #1834510d}
.language-control button:hover{color:var(--primary);background:var(--surface)}
@media(max-width:430px){.top-actions{gap:6px}.language-control button{min-width:36px;min-height:40px}}

.cockpit-practices{margin-bottom:28px}.cockpit-practice-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(120px,1fr) auto;gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}.cockpit-practice-row h3{font-size:16px;line-height:1.5;margin:6px 0 0}.cockpit-practice-row h3 a{color:var(--ink);text-decoration:none}.cockpit-practice-row h3 a:hover{text-decoration:underline}.cockpit-practice-row .learning-meter{margin-top:0}
#practice-engine,.lesson-section,.exam-shell{scroll-margin-top:90px}
@media(max-width:620px){.cockpit-practice-row{grid-template-columns:minmax(0,1fr) auto;gap:16px}.cockpit-practice-row>div:first-child{grid-column:1/-1}.cockpit-practice-row .btn{font-size:12px}}
.sidebar>*{flex-shrink:0}.sidebar .profile{min-height:58px}.sidebar .profile:hover{background:var(--brand-50)}.sidebar .profile small{font-size:10px;letter-spacing:.4px}.sidebar-progress{border-color:var(--line)}.sidebar-progress i{background:var(--line)}
.round,.mobile-menu,.user-badge{width:44px;height:44px;min-height:44px;flex-shrink:0}
.language-control button{min-width:44px;min-height:44px}
.auth-screen{background:var(--bg);color:var(--ink)}.auth-brand{flex-wrap:wrap}.auth-brand small,.auth-copy>p,.auth-points span{color:var(--muted)}.auth-copy h1{font-size:clamp(36px,4.5vw,62px);font-weight:600;letter-spacing:-1.8px;line-height:1.12;overflow-wrap:anywhere}.auth-points b{color:var(--ink)}.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.auth-form input{border-radius:var(--radius-md)}
.auth-copy .kicker.light{color:var(--primary)}
#admin-dialog .kicker,#admin-dialog h2,#admin-dialog .json-upload-zone strong{font-weight:600!important}
#admin-dialog .json-upload-zone{min-height:210px!important;border-radius:var(--radius-md)!important;border-width:1px!important}
#admin-dialog .upload-icon{width:44px!important;height:44px!important;border-radius:var(--radius-md)!important;box-shadow:none!important}
#admin-dialog .manual-json summary{min-height:44px}
#admin-dialog .dialog-footer button{white-space:normal!important;line-height:1.5!important;padding:10px 16px!important}
.learning-orientation{margin:22px 0 34px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.learning-orientation-head{display:grid;gap:5px;color:var(--ink)}.learning-orientation-head strong{font-size:14px;font-weight:600}.learning-orientation ol{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}.learning-orientation a,.learning-step-nav a{color:var(--primary);font-size:12px;text-decoration:none;padding:8px 10px;border-radius:6px;background:var(--surface-soft)}.learning-orientation a:hover,.learning-step-nav a:hover{background:var(--brand-100)}
.learning-step-stream{max-width:960px;margin:24px 0 44px}.learning-step-nav{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.learning-step{padding:20px 0;border-top:1px solid var(--line);scroll-margin-top:90px}.learning-step h2{font-size:22px;line-height:1.4;margin:8px 0}.learning-step-instruction{font-size:16px;line-height:1.75;max-width:70ch}.learning-step-why{max-width:70ch;padding:12px 14px;border-left:2px solid var(--brand-300);background:var(--surface-soft);font-size:14px;line-height:1.7}.learning-step details,.learning-explain-disclosure{margin-top:12px}.learning-step summary,.learning-explain-disclosure>summary,.story summary,.learning-concept>summary{cursor:pointer;color:var(--primary);font-weight:600;font-size:13px;line-height:1.6;padding:8px 0;min-height:40px}.learning-step details p,.learning-step details li{max-width:70ch;font-size:14px;line-height:1.75}.learning-action-callout{margin-top:28px;padding:18px 20px;background:var(--brand-50);border-left:3px solid var(--brand-500);border-radius:var(--radius-md);display:grid;gap:8px}.learning-action-callout strong{font-size:16px}.learning-action-callout p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}.learning-action-callout .btn{justify-self:start}.learning-concept{padding:14px 0;border-top:1px solid var(--line)}.learning-concept p{margin:0 0 8px;font-size:14px;line-height:1.75;color:var(--muted)}.learning-explain-disclosure{border-top:1px solid var(--line);padding-top:4px}.learning-explain-disclosure .explain{padding:4px 0 10px}.learning-flow{display:block}
@media(max-width:620px){.learning-orientation{display:block}.learning-orientation ol{margin-top:12px}.learning-step-stream{margin-bottom:28px}.learning-step{padding:16px 0}.learning-step h2{font-size:20px}.learning-step-instruction{font-size:15px}.learning-action-callout .btn{width:100%;text-align:center}.learning-step-nav a{font-size:11px;padding:8px 9px}}

/* =========================================================
   FiSi Lernwelt · German Lesson Reader
   ========================================================= */

.fisi-lesson-reader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  width: 100%;
  max-width: 100%;
  margin: 18px 0 24px;
  padding: 10px 12px;

  background: #f8fbff;
  border: 1px solid #dbe7f5;
  border-radius: 12px;

  box-sizing: border-box;
}

.fisi-reader-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.fisi-reader-primary,
.fisi-reader-secondary {
  min-height: 38px;
  padding: 8px 13px;

  border-radius: 9px;
  border: 1px solid transparent;

  font: inherit;
  font-size: 14px;
  font-weight: 650;

  cursor: pointer;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.fisi-reader-primary {
  background: #2563eb;
  color: #fff;
}

.fisi-reader-primary:hover {
  background: #1d4ed8;
}

.fisi-reader-secondary {
  background: #fff;
  color: #334155;
  border-color: #d9e3ef;
}

.fisi-reader-secondary:hover:not(:disabled) {
  background: #f1f6fc;
}

.fisi-reader-secondary:disabled {
  opacity: .45;
  cursor: default;
}

.fisi-reader-primary:focus-visible,
.fisi-reader-secondary:focus-visible,
.fisi-reader-rate select:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .22);
  outline-offset: 2px;
}

.fisi-reader-rate {
  display: flex;
  align-items: center;
  gap: 7px;

  color: #64748b;
  font-size: 13px;
  white-space: nowrap;
}

.fisi-reader-rate select {
  min-height: 36px;
  padding: 5px 28px 5px 9px;

  background: #fff;
  color: #334155;

  border: 1px solid #d9e3ef;
  border-radius: 8px;
}

.fisi-reader-status {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  text-align: right;
}

@media (max-width: 700px) {
  .fisi-lesson-reader {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .fisi-reader-main {
    width: 100%;
  }

  .fisi-reader-status {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fisi-reader-primary,
  .fisi-reader-secondary {
    transition: none;
  }
}