@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{--ink:#14302e;--muted:#637774;--accent:#137766;--line:#dce5df;--paper:#f6f7f2}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px 'DM Sans',system-ui,sans-serif}h1,h2,h3,.brand{font-family:Manrope,system-ui,sans-serif}h1{font-size:clamp(30px,4vw,46px);line-height:1.2;letter-spacing:-1.8px;margin:10px 0 18px}h2{font-size:24px;letter-spacing:-.6px}h3{font-size:17px}p{line-height:1.7}.muted{color:var(--muted)}aside{position:fixed;width:240px;inset:0 auto 0 0;padding:38px 24px;background:#123e35;color:#fff;display:flex;flex-direction:column}.brand{font-size:25px;font-weight:800;color:white;text-decoration:none}.brand span{color:#a9d5a7}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#829e91;margin-top:34px}nav{display:grid;gap:8px}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;border-radius:10px;padding:13px 19px;font-weight:700;background:#e7eee8;color:var(--ink)}button:hover{filter:brightness(.96)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #d6a744;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.45}nav button{text-align:left;background:transparent;color:#b8cfc5;padding:15px}nav button.active{background:#31574b;color:#fff}.aside-foot{margin-top:auto;color:#a8c1b4;font-size:12px;line-height:1.9}.shell{margin-left:240px}header{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 46px;font-size:10px;letter-spacing:1.3px;font-weight:700}.tag{background:#e8eddd;color:#536143;padding:8px 11px;border-radius:6px;font-size:11px;letter-spacing:0}main{max-width:1180px;margin:auto;padding:40px 46px 20px}.kicker{color:var(--accent);font-size:11px;letter-spacing:2px;font-weight:800}.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;align-items:center;margin-bottom:30px}.hero p{max-width:550px;margin-bottom:0}.hero-art{background:#e3eadb;border-radius:20px;min-height:190px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.hero-art:before{content:'';width:145px;height:145px;border:1px solid #b6c8af;border-radius:50%;position:absolute}.hero-art:after{content:'';width:230px;height:230px;border:1px solid #bdcfb6;border-radius:50%;position:absolute}.hero-art strong{position:relative;z-index:1;font-size:58px;background:#fffef8;border-radius:17px;padding:15px 30px;box-shadow:10px 12px 0 #b9cdb1;transform:rotate(-7deg)}.grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}.card{background:white;border:1px solid var(--line);border-radius:16px;padding:26px;margin-bottom:20px}.card h2,.card h3{margin-top:0}.primary{background:var(--accent);color:white}.outline{background:transparent;border:1px solid var(--line)}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:block;font-size:13px;font-weight:700}input,select,textarea{width:100%;padding:12px;border:1px solid #cedbd2;border-radius:8px;background:#fbfcf9;color:var(--ink);margin-top:7px}textarea{min-height:100px;resize:vertical}.wide{grid-column:1/-1}.note{padding:15px 17px;border-left:3px solid #d6ae55;background:#fbf5e6;font-size:13px;line-height:1.7;margin:16px 0}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:24px 0}.steps button{font-size:12px;text-align:left;border:1px solid var(--line);background:white}.steps .selected{border-color:var(--accent);background:#eaf4ed}.num{display:block;font-size:11px;color:var(--accent);margin-bottom:6px}.list{list-style:none;padding:0;margin:0}.list li{padding:14px 0 14px 30px;border-bottom:1px solid #edf0eb;position:relative;line-height:1.7}.list li:before{content:'✓';position:absolute;left:2px;color:var(--accent);font-weight:700}.badge{font-size:11px;background:#edf3e9;padding:7px 10px;border-radius:7px;display:inline-block}.progress{height:7px;background:#e6ede5;border-radius:6px;margin:15px 0;overflow:hidden}.progress span{display:block;height:100%;background:var(--accent)}.question{margin:22px 0 30px}.question legend{font-weight:700;line-height:1.7;margin-bottom:12px}fieldset{border:0;padding:0;min-width:0}.option{display:flex;gap:12px;align-items:center;border:1px solid var(--line);padding:13px;margin:8px 0;border-radius:9px;font-weight:400;line-height:1.5}.option input{width:17px;height:17px;margin:0;accent-color:var(--accent);flex-shrink:0}.feedback{background:#eef5eb;padding:14px;border-radius:8px;font-size:13px;line-height:1.7}.wrong{background:#fff1e9}.score{font-size:72px;font-weight:800;letter-spacing:-5px;margin:12px 0}.score small{font-size:23px;letter-spacing:0;color:var(--muted)}.row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}.timeline{counter-reset:step}.timeline article{position:relative;padding:0 0 25px 48px;border-left:1px solid var(--line);margin-left:16px}.timeline article:before{counter-increment:step;content:counter(step);position:absolute;left:-17px;top:0;background:#e5eee0;border:4px solid white;border-radius:50%;width:34px;height:34px;text-align:center;line-height:26px;font-weight:bold}.timeline h3{margin:0 0 6px}.timeline p{margin:0;color:var(--muted);font-size:14px}footer{padding:25px 46px 35px;font-size:11px;color:var(--muted);line-height:1.9}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#173c32;color:white;padding:15px 22px;border-radius:12px;z-index:20;display:none;max-width:90vw}.print-only{display:none}a{color:var(--accent)}@media(max-width:850px){aside{position:static;width:auto;padding:20px}.aside-foot,aside .eyebrow{display:none}nav{display:flex;overflow:auto;margin-top:15px}nav button{white-space:nowrap;padding:10px;font-size:12px}.shell{margin:0}header{padding:0 20px;height:60px}main{padding:26px 20px}.hero{grid-template-columns:1fr}.hero-art{display:none}.grid{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}footer{padding:20px}.card{padding:21px}}@media print{aside,header,footer,.actions,.steps,#toast,.no-print{display:none!important}.shell{margin:0}main{padding:0;max-width:none}body{background:white;font-size:11pt}.card{border:0;padding:10px;break-inside:avoid}.grid{display:block}.print-only{display:block}.score{font-size:44px}h1{font-size:28px}.note{background:white}.hero-art{display:none}}
/* OneTech website theme — prepared for later integration, v2.2 */
:root{--ink:#143c4c;--muted:#607a89;--accent:#0085e8;--line:#dce9f1;--paper:#f4f9fc}
body{background:var(--paper)}
.site-header{height:96px;padding:0 40px;background:#fff;letter-spacing:0;position:relative;z-index:10;border-bottom:1px solid #e8f0f5}
.header-inner{width:100%;max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo-group{display:flex;align-items:center;gap:20px;min-width:0}.logo-group img{display:block;max-width:100%;object-fit:contain;height:auto}.logo-onetech{width:205px;flex-shrink:0}.logo-partner{border-left:1px solid #8a9ba5;padding-left:18px;display:flex;align-items:center;height:38px}.logo-ekon{width:145px}.logo-bsce{width:118px}.logo-bsce img{width:100px;height:65px;object-fit:contain}.header-label{display:flex;align-items:center;gap:16px;font-size:10px;letter-spacing:1.4px;color:#52788d;white-space:nowrap}.tag{background:#e9f5ff;color:#126caa;border:1px solid #d5eaff}
aside{position:static;inset:auto;width:auto;padding:0 40px;background:#fff;color:var(--ink);border-bottom:1px solid var(--line);display:block}.eyebrow{display:none}nav{max-width:1240px;margin:auto;display:flex;gap:8px;overflow:auto;padding:9px 0}nav button{background:transparent;color:#547487;white-space:nowrap;padding:13px 19px;font-size:13px;border-radius:7px}nav button.active{background:#e8f4fe;color:#0075cb}.shell{margin:0}main{max-width:1240px;padding:34px 40px 20px}.hero{background:linear-gradient(110deg,#113949 0%,#19556e 62%,#368ba8 100%);padding:45px 42px;border-radius:16px;grid-template-columns:1.7fr 1fr;min-height:300px;color:white;position:relative;overflow:hidden;margin-bottom:30px}.hero .kicker{color:#a5d8ed}.hero h1{font-size:clamp(30px,3.4vw,47px);letter-spacing:-1.8px}.hero .muted{color:#d6eaf5}.hero-art{background:transparent;min-height:215px;border-radius:0}.hero-art:before{border-color:#8ad9ee55;width:160px;height:160px}.hero-art:after{border-color:#9fe4f633;width:245px;height:245px}.hero-art strong{background:#edfaff;color:#0085e8;box-shadow:10px 12px 0 #60b6d34d;border:1px solid #c2e8f6}.hero-art strong:before{content:'❄';font-size:72px}.hero-art strong{font-size:0}.primary{background:#0085e8;box-shadow:0 4px 12px #0085e820}.card{border-radius:12px;box-shadow:0 5px 24px #1c527005}button{border-radius:7px;background:#e9f3fa;color:#204e66}.outline{background:white}.badge{background:#e9f5fe;color:#087ac0}.steps .selected{background:#eaf6ff}.progress{background:#e8f2f8}.feedback{background:#eaf6ff}.feedback.wrong{background:#fff1e9}.timeline article:before{background:#e3f3ff;color:#007bcf}.note{background:#fff8e9;border-color:#eab553}input,select,textarea{background:#fbfdff;border-color:#cedee8}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#0095ef}footer{max-width:1240px;margin:auto;padding:28px 40px 38px;border-top:1px solid var(--line)}footer strong{font-size:16px;color:#255469}#toast{background:#16465e}.list li{border-color:#eaf1f6}.aside-foot{display:none}
@media(max-width:850px){.site-header{height:auto;min-height:88px;padding:17px 20px}.header-inner{gap:14px;flex-wrap:wrap}.logo-group{gap:13px}.logo-onetech{width:170px}.logo-partner{padding-left:13px;height:30px}.logo-ekon{width:118px}.logo-bsce{width:90px}.logo-bsce img{height:52px;width:77px}.header-label{margin-left:auto;font-size:9px;gap:10px}aside{padding:0 20px}nav{margin:0;padding:7px 0}nav button{padding:12px 14px}main{padding:24px 20px 20px}.hero{padding:30px 25px;grid-template-columns:1fr;min-height:0}.hero-art{display:none}footer{padding:24px 20px}}
@media(max-width:480px){.site-header{padding:14px 16px}.header-inner{gap:16px}.logo-group{gap:10px;width:100%;justify-content:flex-start}.logo-onetech{width:42%;max-width:160px}.logo-ekon{width:30%;max-width:113px}.logo-bsce{width:23%;max-width:85px}.logo-partner{padding-left:10px;height:27px}.logo-bsce img{height:49px}.header-label{width:100%;justify-content:space-between}.hero h1{font-size:32px}.hero{padding:27px 23px;border-radius:10px}.row{gap:12px;font-size:13px}}
@media print{.site-header{display:block!important;height:auto;padding:0 0 15px;border-bottom:1px solid #ccc}.header-inner{justify-content:flex-start}.header-label{display:none}.logo-onetech{width:170px}.logo-ekon{width:125px}.logo-bsce{width:100px}aside{display:none!important}.shell{margin:0}.hero{background:white;color:#143c4c;padding:0;min-height:0}.hero .muted{color:#607a89}main{padding:12px 0}.card{box-shadow:none}}
/* Review adjustments v2.2: simple navigation, no logo dividers, numbered SOP. */
.logo-partner{border-left:0}
nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;gap:6px;width:100%}
nav button{min-width:0;white-space:normal;text-align:center;padding:12px 8px;line-height:1.5;overflow-wrap:anywhere}
.list{list-style:decimal;padding-left:28px}
.list li{padding:14px 0 14px 8px}
.list li:before{content:none}
.list li::marker{color:var(--accent);font-weight:700}
@media(max-width:650px){nav{gap:4px}nav button{font-size:12px;padding:10px 4px}aside{padding-left:16px;padding-right:16px}}
@media(max-width:430px){nav{grid-template-columns:repeat(3,minmax(0,1fr))}nav button{font-size:12px}.header-label{white-space:normal}.row{flex-wrap:wrap}}
/* Compact reference application layout v2.3 */
.site-header{height:auto;padding:18px 20px;background:linear-gradient(110deg,#155b70,#252059);color:white}.header-inner{max-width:660px;display:block}.logo-group{background:white;border-radius:11px;padding:9px 14px;justify-content:space-between;gap:16px}.logo-onetech{width:43%;max-width:205px}.logo-ekon{width:28%;max-width:145px}.logo-bsce{width:21%;max-width:105px}.logo-partner{padding:0}.header-label{justify-content:center;color:#c3e8f6;flex-wrap:wrap;margin:15px 0 0;font-size:13px;letter-spacing:1.6px}.header-label .tag{background:#ffffff12;color:#c3e8f6;border:0;font-size:10px}aside{padding:0 18px}nav{max-width:660px;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}nav button{padding:10px 3px;font-size:12px}main{max-width:700px;padding:24px 18px}.grid{display:block}.hero{padding:25px;min-height:0}.hero h1{font-size:32px}.hero-art{display:none}h1{font-size:29px;letter-spacing:-1px}.card{padding:22px}.steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.steps button{padding:11px 5px;font-size:10px;overflow-wrap:anywhere}.steps .num{font-size:10px}.kicker{font-size:10px}footer{max-width:700px;font-size:11px;padding:24px 18px}.list li{font-size:14px}.fields{grid-template-columns:1fr}.note{font-size:12px}#pdf-fallback{font-size:13px;margin-bottom:20px;line-height:1.7}@media(max-width:430px){nav{grid-template-columns:repeat(5,minmax(0,1fr))}nav button{font-size:11px;padding:10px 2px}.card{padding:18px}.steps button{font-size:9px}.steps .num{font-size:9px}.header-label{font-size:11px}.logo-group{gap:10px}.logo-bsce img{height:45px}}@media print{.site-header{background:white;color:#143c4c}.header-label{display:none}main{max-width:none}}
/* Reference structure: department picker, four tabs, five parts. */
aside{display:none}#app>nav{grid-template-columns:repeat(4,minmax(0,1fr));background:#e2e8f0;border-radius:12px;padding:5px;margin:20px 0;max-width:none}#app>nav button.active{background:white;box-shadow:0 1px 4px #16344916;color:#1d4ed8}#app>nav button{font-weight:700;font-size:13px}.department-picker{margin-bottom:16px}.department-picker label{color:#65778d;font-size:12px;letter-spacing:.4px}.department-picker select{font-weight:700;padding:14px}.department-badge{background:#edf5ff;border-left:4px solid #2861e9;padding:14px 17px;border-radius:0 9px 9px 0}.department-badge span{font-size:10px;font-weight:700;color:#2563eb}.department-badge h2{font-size:18px;margin:5px 0 0}.sop-title{padding:22px;background:linear-gradient(110deg,#203044,#101829);color:white;border-radius:12px;margin-bottom:20px}.sop-title span{font-size:11px;font-weight:700;color:#55d6e7}.sop-title h2{font-size:19px;margin:7px 0 0;line-height:1.5}.steps{background:white;border:1px solid var(--line);border-radius:13px;padding:8px}.steps button{border:0;background:#f0f4f9;text-align:center}.steps button.selected{background:#2563eb;color:white}.steps button.selected .num{color:white}.num{font-size:12px;font-weight:800}.sop-actions{justify-content:space-between}.sop-actions button{font-size:12px;padding:12px}main{padding-top:22px}#app>h1{font-size:25px}#app>h1+#app{margin:0}@media(max-width:430px){.sop-actions{gap:5px}.sop-actions button{padding:10px 7px;font-size:11px}#app>nav button{font-size:12px}.sop-title h2{font-size:16px}}@media print{#app>nav,.department-picker,.department-badge{display:none}}