.sop-wrap{max-width:820px;margin:0 auto;font-family:inherit;color:#222}

.sop-hero{background:#f0f5fb;border-left:4px solid #0a2e5c;border-radius:0 8px 8px 0;padding:1.25rem 1.5rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem}
.sop-hero-icon{width:52px;height:52px;background:#0a2e5c;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:26px;color:#fff}
.sop-hero h2{font-size:18px;font-weight:700;color:#0a2e5c;line-height:1.3;margin:0 0 4px}
.sop-hero p{font-size:13px;color:#555;margin:0}

.sop-note{background:#f8f9fb;border:1px solid #e0e5ee;border-radius:8px;padding:1rem 1.25rem;font-size:13px;line-height:1.7;color:#444;margin-bottom:1.5rem}
.sop-note strong{color:#0a2e5c}

.sop-search-bar{margin-bottom:0.75rem}
.sop-search-bar input{width:100%;border:1px solid #d0d7e2;border-radius:8px;padding:10px 14px;font-size:14px;box-sizing:border-box}
.sop-search-bar input:focus{outline:none;border-color:#1a6bbf;box-shadow:0 0 0 3px rgba(26,107,191,.15)}

.sop-counter{font-size:12px;color:#888;margin-bottom:1rem}

.sop-list{display:flex;flex-direction:column;gap:10px}

.sop-row{display:flex;align-items:center;gap:14px;border:1px solid #e0e5ee;border-radius:10px;padding:14px 16px;background:#fff;transition:box-shadow .15s}
.sop-row:hover{box-shadow:0 4px 14px rgba(10,46,92,.06)}
.sop-row.sop-hide{display:none}

.sop-row-num{width:26px;height:26px;border-radius:50%;background:#0a2e5c;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.sop-row-icon{width:38px;height:38px;border-radius:8px;background:#eff6ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#1a6bbf}

.sop-row-info{flex:1;min-width:0}
.sop-row-title{font-size:14px;font-weight:600;color:#222;margin:0 0 2px}
.sop-row-desc{font-size:12px;color:#666;margin:0 0 3px}
.sop-row-meta{font-size:11px;color:#999;margin:0}

.sop-row-actions{display:flex;gap:8px;flex-shrink:0}

.sop-btn-view, .sop-btn-download{
    display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
    padding:9px 14px;border-radius:7px;text-decoration:none;white-space:nowrap;
    border:none;cursor:pointer;font-family:inherit;
}
.sop-btn-view{background:#0a2e5c;color:#fff}
.sop-btn-view:hover{background:#1a6bbf}
.sop-btn-download{background:#eff6ff;color:#0a2e5c;border:1px solid #d6e4f5}
.sop-btn-download:hover{background:#dbeafe}

.sop-row-empty{font-size:12px;color:#9ca3af;font-style:italic;flex-shrink:0}

.sop-empty{text-align:center;padding:48px 24px;background:#f8f9fb;border:1px dashed #d0d7e2;border-radius:10px}
.sop-empty-icon{font-size:36px;margin-bottom:10px}
.sop-empty p{font-size:13px;color:#888;margin:0}

.sop-empty-search{text-align:center;color:#9ca3af;font-size:13px;padding:24px 0}

/* Modal Viewer */
.sop-modal-overlay{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(10,20,35,.7);z-index:999999;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
}
.sop-hidden{display:none !important}

.sop-modal-box{
    background:#fff;border-radius:12px;overflow:hidden;
    width:100%;max-width:900px;height:90vh;max-height:850px;
    display:flex;flex-direction:column;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
}

.sop-modal-header{
    background:#0a2e5c;color:#fff;padding:14px 18px;
    display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.sop-modal-header p{font-size:14px;font-weight:700;margin:0;padding-right:12px}
#sop-modal-close{
    background:none;border:none;color:#fff;font-size:24px;cursor:pointer;
    width:32px;height:32px;border-radius:50%;line-height:1;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
}
#sop-modal-close:hover{background:rgba(255,255,255,.15)}

.sop-modal-body{flex:1;background:#525659}
#sop-modal-iframe{width:100%;height:100%;border:none;display:block}

@media(max-width:700px){
  .sop-hero{flex-direction:column;text-align:center}
  .sop-row{flex-wrap:wrap}
  .sop-row-actions{margin-left:auto}
  .sop-modal-box{height:85vh}
}
