.sop-page{color:#17324d;background:#f5f7fa;min-height:100vh}.sop-brand{letter-spacing:.12em;color:#023167;font-weight:950}.sop-brand.light{color:#fff}.sop-eyebrow{text-transform:uppercase;letter-spacing:.14em;color:#748698;font-size:10px;font-weight:900}.peach{color:#faa578}.sop-header{color:#fff;background:linear-gradient(135deg,#011f43,#023167 58%,#0a4279);border-bottom:3px solid #faa578;justify-content:space-between;align-items:end;gap:20px;padding:30px 32px;display:flex}.sop-header h1,.sop-login h1{margin:7px 0;font:500 clamp(38px,5vw,58px)/1 Georgia,serif}.sop-header p{color:#dbe7ef;margin:0}.sop-actions{gap:8px;display:flex}.primary,.ghost{cursor:pointer;border:0;border-radius:10px;padding:11px 14px;font-weight:900}.primary{color:#17324d;background:#faa578}.ghost{color:#fff;background:#ffffff14;border:1px solid #ffffff2a}.sop-login{background:#fff;border:1px solid #dce5ec;border-radius:22px;width:min(610px,100% - 32px);margin:8vh auto;padding:32px;box-shadow:0 20px 60px #02316715}.sop-login h1{color:#023167}.sop-login p{color:#667c8e;line-height:1.55}.sop-login form,.sop-form label{gap:8px;display:grid}.sop-login input,.sop-form input,.sop-form select,.sop-form textarea,.sop-tools input,.sop-edit-fields input,.sop-edit-fields textarea{font:inherit;background:#fff;border:1px solid #ccd8e2;border-radius:10px;padding:11px}.sop-login button{color:#fff;background:#023167;border:0;border-radius:10px;padding:12px;font-weight:900}.sop-alert{background:#fff8e8;border-left:4px solid #e5a450;border-radius:9px;margin:14px 32px;padding:11px}.sop-alert.error{color:#8c3e33;background:#fff0ee;border-color:#b74e41}.sop-alert.wide{justify-content:space-between;display:flex}.sop-tools{gap:10px;padding:18px 32px 12px;display:grid}.sop-tools input{width:min(500px,100%)}.sop-tabs{flex-wrap:wrap;gap:7px;display:flex}.sop-tabs button{color:#5b6f80;background:#fff;border:1px solid #d6e0e8;border-radius:999px;padding:8px 11px;font-size:10px;font-weight:900}.sop-tabs button.active{color:#fff;background:#023167;border-color:#023167}.sop-layout{grid-template-columns:390px minmax(0,1fr);gap:16px;padding:0 32px 40px;display:grid}.sop-list{align-content:start;gap:9px;display:grid}.sop-list-head{color:#708394;justify-content:space-between;font-size:11px;display:flex}.sop-list-head span{color:#023167;font-weight:950}.sop-card{cursor:pointer;background:#fff;border:1px solid #dce5ec;border-radius:15px;padding:15px}.sop-card.selected{border-color:#023167;box-shadow:0 0 0 2px #02316710}.sop-card-top,.sop-card-bottom{color:#76899a;justify-content:space-between;gap:10px;font-size:9px;display:flex}.sop-card-top span{color:#b46632;text-transform:uppercase;letter-spacing:.07em;font-weight:900}.sop-card h2{color:#023167;margin:7px 0;font-size:17px}.sop-card p{color:#64798b;font-size:12px;line-height:1.5}.sop-card-bottom span{color:#023167;font-weight:900}.sop-reader{background:#fff;border:1px solid #dce5ec;border-radius:18px;min-height:540px;padding:22px}.sop-reader-head{justify-content:space-between;gap:20px;display:flex}.sop-reader-head h2{color:#023167;margin:5px 0;font:500 34px/1.08 Georgia,serif}.sop-reader-head p{color:#63788a;line-height:1.55}.sop-reader-actions{align-self:start;gap:6px;display:flex}.sop-reader-actions button{background:#fff;border:1px solid #d7e1e8;border-radius:8px;padding:7px 9px;font-weight:850}.sop-info-grid{grid-template-columns:1fr 1fr;gap:10px;margin:15px 0;display:grid}.sop-info-grid div{background:#f6f8fa;border-radius:11px;padding:12px}.sop-info-grid small{color:#7b8d9b;font-size:9px;font-weight:900}.sop-info-grid p{margin:5px 0 0;font-size:12px;line-height:1.5}.sop-steps{gap:11px;display:grid}.sop-steps article{border-top:1px solid #edf1f4;grid-template-columns:38px 1fr;gap:12px;padding-top:12px;display:grid}.sop-step-num{color:#fff;background:#023167;border-radius:50%;place-items:center;width:34px;height:34px;font-weight:950;display:grid}.sop-steps h3{color:#173f63;margin:1px 0 5px}.sop-steps p{color:#607588;margin:0;line-height:1.55}.sop-warning{color:#785435;background:#fff6ed;border-left:3px solid #faa578;margin-top:8px;padding:8px 10px;font-size:11px}.sop-empty{text-align:center;color:#748698;padding:100px 20px}.sop-empty-icon{color:#fff;background:#023167;border-radius:18px;place-items:center;width:60px;height:60px;margin:0 auto 14px;font-weight:950;display:grid}.sop-modal-bg{z-index:100;background:#102131aa;justify-content:center;align-items:center;padding:18px;display:flex;position:fixed;inset:0}.sop-modal{background:#fff;border-radius:20px;width:min(880px,100%);max-height:94vh;padding:22px;overflow:auto}.sop-modal-head{justify-content:space-between;display:flex}.sop-modal-head h2{color:#023167;margin:4px 0;font:500 30px/1.1 Georgia,serif}.sop-modal-head>button{background:#edf2f5;border:0;border-radius:50%;width:36px;height:36px;font-size:22px}.sop-form{grid-template-columns:1fr 1fr;gap:12px;margin-top:15px;display:grid}.sop-form label{font-size:11px;font-weight:900}.sop-form .full{grid-column:1/-1}.sop-form textarea{min-height:70px}.sop-step-editor-head{justify-content:space-between;align-items:end;margin:22px 0 10px;display:flex}.sop-step-editor-head h3{color:#023167;margin:3px 0}.sop-step-editor-head button{color:#fff;background:#023167;border:0;border-radius:8px;padding:8px 10px;font-weight:900}.sop-step-editor{gap:9px;display:grid}.sop-edit-step{background:#f7f9fb;border:1px solid #e1e7ec;border-radius:11px;grid-template-columns:32px 1fr auto;gap:9px;padding:10px;display:grid}.sop-edit-num{color:#fff;background:#023167;border-radius:50%;place-items:center;width:28px;height:28px;font-weight:900;display:grid}.sop-edit-fields{gap:7px;display:grid}.sop-edit-fields textarea{min-height:65px}.sop-edit-controls{gap:4px;display:grid}.sop-edit-controls button{background:#fff;border:1px solid #d7e0e7;border-radius:7px;width:30px;height:30px}.sop-editor-empty{text-align:center;color:#82909c;padding:18px}.sop-modal-actions{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.sop-modal-actions .cancel{color:#36536d;background:#edf2f5;border:0;border-radius:9px;padding:10px 13px;font-weight:900}@media (max-width:900px){.sop-layout{grid-template-columns:1fr}.sop-reader{min-height:0}.sop-info-grid{grid-template-columns:1fr}}@media (max-width:620px){.sop-header{flex-direction:column;align-items:flex-start;padding:24px 16px}.sop-tools{padding:14px 12px}.sop-layout{padding:0 12px 30px}.sop-form{grid-template-columns:1fr}.sop-form .full{grid-column:auto}.sop-reader-head{display:grid}.sop-edit-step{grid-template-columns:28px 1fr}.sop-edit-controls{grid-column:1/-1;grid-auto-flow:column;justify-content:start}}
