.sp-op{padding:48px 0 80px;background:linear-gradient(180deg,#f5f8ff 0,#fff 44%);color:#172b4d}.sp-op__hero{text-align:center;max-width:830px;margin:0 auto 28px}.sp-op__hero h1{font-size:clamp(34px,5vw,56px);line-height:1.04;margin:10px 0 14px}.sp-op__hero p{font-size:18px;color:#60708c;line-height:1.65}.sp-op__workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}.sp-op__card{background:#fff;border:1px solid #e2e9f5;border-radius:22px;box-shadow:0 18px 55px rgba(31,71,138,.08);padding:22px;margin-bottom:18px}.sp-op__head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}.sp-op__head h2,.sp-op__head h3{margin:0}.sp-op__head p{margin:5px 0 0;color:#71809a}.sp-op__drop{border:2px dashed #b9c9e8;border-radius:18px;padding:28px;text-align:center;background:#f8fbff;cursor:pointer}.sp-op__drop.is-dragover{border-color:#2e67d1;background:#eff5ff}.sp-op__drop strong{display:block;font-size:18px}.sp-op__drop small{display:block;color:#71809a;margin:7px 0 14px}.sp-op__files{display:grid;gap:10px;margin-top:15px}.sp-op__file{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 14px;border:1px solid #e3eaf6;border-radius:14px;background:#fff}.sp-op__file strong{display:block}.sp-op__file small{color:#71809a}.sp-op__file button{border:0;background:#fff1f1;color:#b72c2c;border-radius:9px;padding:7px 9px;cursor:pointer}.sp-op__controls{display:grid;gap:13px}.sp-op label{display:grid;gap:6px;font-size:12px;font-weight:800;color:#50617c}.sp-op select,.sp-op input{width:100%;padding:11px 12px;border:1px solid #cfdaec;border-radius:11px;background:#fff;color:#172b4d}.sp-op__check{display:flex!important;grid-template-columns:none!important;align-items:center;gap:8px!important;font-weight:600!important}.sp-op__check input{width:auto}.sp-op__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.sp-op__stat{padding:13px;border-radius:14px;background:#f7f9fd;border:1px solid #e6edf7}.sp-op__stat b{display:block;font-size:22px}.sp-op__stat span{font-size:11px;color:#71809a}.sp-op__table-wrap{overflow:auto;border:1px solid #e4eaf4;border-radius:15px}.sp-op table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}.sp-op th,.sp-op td{padding:10px 12px;border-bottom:1px solid #edf1f7;text-align:left}.sp-op th{background:#f6f8fc;color:#43536d;position:sticky;top:0}.sp-op tr.is-added td{background:#f1fff6}.sp-op tr.is-removed td{background:#fff4f4}.sp-op tr.is-changed td{background:#fffaf0}.sp-op__actions{display:flex;flex-wrap:wrap;gap:9px}.sp-op__empty{padding:35px;text-align:center;color:#71809a}.sp-op__notice{padding:11px 13px;border-radius:12px;background:#eef5ff;color:#244b87;font-size:12px;line-height:1.5}.sp-op__sidebar{position:sticky;top:92px}.sp-op__status{margin-top:10px;font-size:12px;color:#60708c}.sp-op__status.is-error{color:#b72c2c}.sp-op__mapping{display:grid;gap:8px;max-height:320px;overflow:auto}.sp-op__map-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;padding:9px;border:1px solid #e5ebf5;border-radius:12px}.sp-op__map-row span{font-size:12px;font-weight:700}.sp-op__badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eaf1ff;color:#2457c5;font-size:11px;font-weight:800}@media(max-width:900px){.sp-op__workspace{grid-template-columns:1fr}.sp-op__sidebar{position:static}.sp-op__stats{grid-template-columns:repeat(2,1fr)}}

/* Compare Files readable difference report */
.sp-op [data-compare-table]{white-space:normal;table-layout:fixed}
.sp-op [data-compare-table] th:nth-child(1){width:105px}
.sp-op [data-compare-table] th:nth-child(2){width:130px}
.sp-op [data-compare-table] td{vertical-align:top}
.sp-compare__status{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em}
.sp-compare__status--added{background:#dcfce7;color:#166534}
.sp-compare__status--removed{background:#fee2e2;color:#991b1b}
.sp-compare__status--changed{background:#fef3c7;color:#92400e}
.sp-compare__status--same{background:#e2e8f0;color:#475569}
.sp-compare__record-key{display:block;padding-top:5px;color:#172b4d;overflow-wrap:anywhere}
.sp-compare__changes{display:grid;gap:8px;min-width:0}
.sp-compare__change-row{display:grid;grid-template-columns:minmax(110px,.75fr) minmax(130px,1fr) 24px minmax(130px,1fr);gap:9px;align-items:center;padding:9px 10px;border:1px solid #e6ebf4;border-radius:12px;background:#fff}
.sp-compare__field{font-weight:800;color:#40516c;overflow-wrap:anywhere}
.sp-compare__value{min-width:0;padding:8px 9px;border-radius:9px;overflow-wrap:anywhere}
.sp-compare__value span{display:block;margin-bottom:3px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#7b879b}
.sp-compare__value strong{font-size:12px;color:#21324d;font-weight:700}
.sp-compare__value--before{background:#fff1f2;border:1px solid #ffe4e6}
.sp-compare__value--after{background:#f0fdf4;border:1px solid #dcfce7}
.sp-compare__arrow{text-align:center;color:#667892;font-weight:900}
.sp-compare__empty-value{color:#94a3b8;font-style:italic;font-weight:600}
.sp-compare__no-details{color:#71809a;padding:8px 0}
@media(max-width:720px){
  .sp-op [data-compare-table],.sp-op [data-compare-table] tbody,.sp-op [data-compare-table] tr,.sp-op [data-compare-table] td{display:block;width:100%}
  .sp-op [data-compare-table] thead{display:none}
  .sp-op [data-compare-table] tr{padding:12px;border-bottom:1px solid #e7edf6}
  .sp-op [data-compare-table] td{border:0;padding:6px 0}
  .sp-op [data-compare-table] td:before{content:attr(data-label);display:block;margin-bottom:4px;font-size:10px;font-weight:800;text-transform:uppercase;color:#7b879b}
  .sp-compare__change-row{grid-template-columns:1fr;gap:6px}
  .sp-compare__arrow{transform:rotate(90deg)}
}