.os{--os-blue:#075ff0;--os-ink:#0a1b57;--os-muted:#657eb2;--os-line:#e7edf8;display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,34%);max-width:1800px;min-height:calc(100vh - 64px);margin:auto;color:var(--os-ink);font-size:11px}.os:has(.os-detail[hidden]){display:block}.os *{box-sizing:border-box}.os button,.os input,.os select,.os textarea{font:inherit}.os button{cursor:pointer}.os a{color:var(--os-blue)}.os-main{min-width:0;padding:14px 11px 28px}.os-crumb{display:flex;gap:9px;margin-bottom:11px;color:#627daf}.os-crumb a{text-decoration:none}.os-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.os-heading h1{font-size:25px;margin:0 0 4px}.os-heading p{font-size:12px;color:var(--os-muted);margin:0}.os-heading>div:last-child{display:flex;gap:7px;white-space:nowrap}.os-btn{border:1px solid #dbe6f8;border-radius:5px;background:#fff;color:#115ed7;padding:7px 9px;white-space:nowrap}.os-btn:hover{background:#f3f7ff}.os-primary{background:var(--os-blue);border-color:var(--os-blue);color:#fff}.os-primary:hover{background:#0056df}.os-danger{color:#e83b4c;background:#fff6f7}.os-card{background:#fff;border:1px solid #e7edf8;border-radius:6px;box-shadow:0 1px 5px #132d6108;margin-bottom:9px;min-width:0}.os-filters{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:10px}.os-search{height:33px;display:flex;align-items:center;gap:6px;flex:1;min-width:190px;border:1px solid #dce7f8;border-radius:4px;background:#f7faff;color:#6d83ae;padding:0 8px;font-size:17px}.os-search input{border:0;background:none;outline:0;width:100%;min-width:0;color:#153c85;font-size:10px}.os-filters select,.os-date input{height:33px;border:1px solid #dce7f8;border-radius:4px;background:#fff;color:#2254a4;padding:0 5px;min-width:0;max-width:120px}.os-date{display:flex;align-items:center;gap:3px;color:#6480b4}.os-date input{max-width:110px}.os-link{border:0;background:none;color:var(--os-blue)}.os-toolbar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--os-line);min-height:47px}.os-toolbar>label{display:flex;align-items:center;gap:6px;margin-right:5px;white-space:nowrap;color:#4969a4}.os input[type=checkbox]{accent-color:var(--os-blue);width:14px;height:14px;margin:0}.os-toolbar .os-btn{padding:6px 8px}.os-columns{position:relative}.os-columns summary{list-style:none;cursor:pointer}.os-columns summary::-webkit-details-marker{display:none}.os-columns>div{position:absolute;z-index:5;right:0;top:31px;width:170px;max-height:260px;overflow:auto;padding:7px;background:#fff;border:1px solid #dce6f8;border-radius:5px;box-shadow:0 6px 20px #12336830}.os-columns label{display:flex;gap:7px;padding:5px;color:#4868a0}.os-table-wrap{overflow:auto;min-height:365px}.os-table{border-collapse:collapse;width:100%;white-space:nowrap;font-size:10px}.os-table th{text-align:left;font-weight:500;color:#6b82b1;background:#f7faff;padding:8px 5px}.os-table td{color:#294986;padding:8px 5px;border-top:1px solid #ebf0f8}.os-table tbody tr{cursor:pointer}.os-table tbody tr:hover,.os-table tbody tr.selected{background:#ebf3ff}.os-table .os-empty{text-align:center;height:318px;color:#7085b1;white-space:normal}.os-badge{display:inline-block;border-radius:4px;padding:4px 6px;background:#e7f1ff;color:#0569e8;font-size:9px}.os-badge.green{background:#dff8ec;color:#049e62}.os-badge.orange{background:#fff2db;color:#d58700}.os-badge.red{background:#ffe8ed;color:#e93449}.os-badge.gray{background:#edf1f7;color:#617598}.os-pager{height:43px;border-top:1px solid var(--os-line);display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:#607bb0;font-size:10px}.os-pager>div{display:flex;align-items:center;gap:4px}.os-pager select,.os-pager button{height:26px;min-width:26px;border:1px solid #dce6f9;border-radius:4px;color:#235cad;background:#fff}.os-pager button.active{background:var(--os-blue);border-color:var(--os-blue);color:#fff}.os-bottom{display:grid;grid-template-columns:1fr 1fr;gap:8px}.os-bottom .os-card{min-height:163px}.os-card-head{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid var(--os-line)}.os-card-head h2{font-size:11px;margin:0}.os-bottom .os-card:first-child h2{color:#ec3449}.os-card-head a{font-size:9px;text-decoration:none}.os-empty-small{display:grid;place-items:center;text-align:center;min-height:125px;color:#7287b6;padding:10px}.os-mini-row{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-top:1px solid #edf1f7;color:#44639b;font-size:10px}.os-mini-row:first-child{border-top:0}.os-mini-row strong{color:#173b84}.os-detail{position:sticky;top:64px;align-self:start;max-height:calc(100vh - 64px);overflow:auto;background:#fff;border-left:1px solid #e6edf8;min-height:calc(100vh - 64px);padding:14px 12px}.os-detail-head{display:flex;justify-content:space-between;align-items:start;gap:8px}.os-detail-head h2{font-size:15px;margin:0 0 6px}.os-detail-head button{border:0;background:none;color:#768cba;font-size:22px}.os-detail-source{color:#6680b1;margin:8px 0 15px}.os-steps{display:flex;gap:3px;justify-content:space-between;border-top:1px solid var(--os-line);padding-top:15px;margin-bottom:15px}.os-steps span{display:grid;gap:6px;text-align:center;font-size:9px;color:#7187b4;flex:1}.os-steps i{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#a4b2cf;color:#fff;margin:auto;font-style:normal;font-size:9px}.os-steps .active i{background:var(--os-blue)}.os-detail-actions{display:flex;gap:5px;margin-bottom:13px}.os-detail-actions .os-btn{flex:1;min-width:0;padding:7px 5px}.os-detail-tabs{display:flex;overflow:auto;border-bottom:1px solid var(--os-line);margin:0 -12px 10px;padding:0 6px}.os-detail-tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:9px 8px;color:#607bb0;white-space:nowrap;font-size:9px}.os-detail-tabs button.active{color:var(--os-blue);border-color:var(--os-blue)}.os-detail-section{border-bottom:1px solid var(--os-line);padding:8px 0 14px}.os-detail-section h3{font-size:11px;margin:0 0 11px}.os-dl{display:grid;grid-template-columns:43% 57%;gap:8px 5px;margin:0;font-size:10px}.os-dl dt{color:#647db1}.os-dl dd{margin:0;color:#173b85;overflow-wrap:anywhere}.os-detail-notice{color:#6982b3;line-height:1.5}.os-item-table{width:100%;border-collapse:collapse;font-size:10px}.os-item-table th,.os-item-table td{text-align:left;border-bottom:1px solid #edf1f7;padding:7px 4px}.os-item-table th{font-weight:500;color:#7185b1}.os-modal-backdrop{position:fixed;inset:0;background:#0d204780;z-index:50;display:grid;place-items:center;padding:15px}.os-modal-backdrop[hidden]{display:none}.os-modal{width:min(540px,100%);background:#fff;border-radius:8px;box-shadow:0 15px 50px #061b4a40;padding:16px;color:var(--os-ink)}.os-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.os-modal-head h2{font-size:17px;margin:0}.os-modal-head button{border:0;background:none;font-size:23px;color:#7289b4}.os-modal form{display:grid;gap:10px}.os-modal label{display:grid;gap:4px;color:#5f79aa}.os-modal input,.os-modal select,.os-modal textarea{width:100%;border:1px solid #dce6f7;border-radius:4px;padding:8px;color:#163d85}.os-modal textarea{min-height:110px}.os-modal-actions{display:flex;justify-content:flex-end;gap:6px}.os-error{color:#df354a;font-size:10px}.os-toast{padding:7px 9px;margin-bottom:8px;background:#eef7ff;color:#1a5dbb;border-radius:4px}
@media(max-width:1200px){.os{display:block}.os-detail{position:fixed;right:0;z-index:30;box-shadow:-10px 0 26px #12345b27;width:min(450px,100vw)}}@media(max-width:760px){.os-heading{display:block}.os-heading>div:last-child{display:grid;grid-template-columns:1fr;gap:7px;width:100%;margin-top:10px;white-space:normal}.os-heading>div:last-child .os-btn{width:100%;min-width:0;white-space:normal;text-align:center;overflow-wrap:anywhere}.os-filters select{flex:1;max-width:none}.os-bottom{grid-template-columns:1fr}.os-toolbar{overflow:auto}.os-pager{height:auto;padding:8px;flex-wrap:wrap}}

/* The shared shell applies grid placement to every main element. Pin the
   orders screen children explicitly so the detail card stays on the right. */
.os-main{grid-column:1;grid-row:1;min-width:0;}
.os-detail{grid-column:2;grid-row:1;min-width:0;width:auto;}
@media(min-width:1201px){.os{grid-template-columns:minmax(0,1fr) 380px}}
@media(min-width:761px) and (max-width:1200px){.os-detail{width:min(380px,100vw)}}

.os-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:9px}.os-kpi{min-height:78px;background:#fff;border:1px solid #e7edf8;border-radius:6px;box-shadow:0 1px 5px #132d6108;padding:10px 11px}.os-kpi small{display:block;color:#6780b0;font-size:9px;line-height:1.3}.os-kpi strong{display:block;color:#123879;font-size:17px;margin:7px 0 3px}.os-kpi span{display:block;color:#7186b2;font-size:9px;line-height:1.35}.os-kpi.warning strong{color:#c17a00}.os-kpi.success strong{color:#008e5c}
@media(max-width:900px){.os-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.os-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

.os-btn,.os-pager button,.os-detail-tabs button,.os-modal-head button{min-height:44px}
.os-modal-backdrop{overflow:auto;align-items:start}
.os-modal{max-height:calc(100vh - 30px);overflow:auto;margin:auto}
body.os-modal-open{overflow:hidden}
.os-modal-actions{position:sticky;bottom:-16px;background:#fff;padding-top:8px}
@media(max-width:760px){.os-modal-backdrop{padding:8px}.os-modal{max-height:calc(100vh - 16px)}.os-filters{align-items:stretch}.os-date{width:100%}.os-date input{flex:1;max-width:none}.os-toolbar{flex-wrap:wrap}.os-toolbar .os-btn{min-height:44px}}

.os-export-scope{display:flex;align-items:center;gap:5px;color:#4969a4;white-space:nowrap}.os-export-scope select{height:32px;border:1px solid #dce6f8;border-radius:4px;color:#235cad;background:#fff;padding:0 5px}
@media(max-width:760px){.os-filters select,.os-export-scope,.os-date{min-height:44px;width:100%;max-width:none}.os-filters select,.os-date input,.os-export-scope select{height:44px;max-width:none;flex:1}.os-toolbar>label,.os-export-scope{min-height:44px}}

.os-payment-refunds{border-top:1px solid var(--os-line);margin-top:12px;padding-top:12px}.os-refund-row{border-top:1px solid var(--os-line);padding:10px 0}.os-refund-row p{margin:6px 0;color:var(--os-muted)}.os-refund-row small{display:block;margin-bottom:6px;color:var(--os-muted)}.os-refund-report-form{display:grid;gap:8px;margin-top:12px;padding:12px;background:#f7faff;border:1px solid var(--os-line);border-radius:5px}.os-refund-report-form h4{margin:0}.os-refund-report-form label{display:grid;gap:4px;color:var(--os-muted)}.os-refund-report-form input,.os-refund-report-form textarea{width:100%;border:1px solid #dce6f8;border-radius:4px;padding:8px;color:var(--os-ink);background:#fff}.os-refund-report-form textarea{min-height:70px}