.op-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:36px;align-items:start}
.op-tabs{display:grid;gap:8px;padding-top:9px}
.op-tabs button{display:flex;align-items:center;gap:15px;width:100%;padding:20px 18px;background:transparent;border:1px solid transparent;border-radius:8px;text-align:left;color:#718389;cursor:pointer;font-family:Inter,Arial,sans-serif}
.op-tabs button>span{font-size:11px;color:#9aa7ab}.op-tabs button>div{flex:1}.op-tabs strong{display:block;font-size:15px;font-weight:600;color:#354e58}.op-tabs small{display:block;margin-top:7px;font-size:11px;font-weight:400;line-height:1.5}.op-tabs b{font-size:16px;font-weight:400;color:#8da4a8}
.op-tabs button[aria-selected=true]{border-color:#d6e5e1;background:#f4f9f7}.op-tabs button[aria-selected=true]>span,.op-tabs button[aria-selected=true] b{color:#27867a}
.op-preview{border:1px solid #dfe7e8;border-radius:9px;background:#fff;overflow:hidden;font-family:Inter,Arial,sans-serif}
.op-preview>header{height:39px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #e9eeee;padding:0 17px;background:#fafcfc}.op-preview>header strong{font-size:12px;color:#4a606b;font-weight:600}.op-preview>header small{font-size:9px;margin-left:auto;color:#8d9c9f}
.op-panel{padding:22px;min-height:320px}.op-panel[hidden]{display:none}.op-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.op-panel-heading small{font-size:8px;letter-spacing:.5px;color:#859497}.op-panel-heading h3{font-size:19px;font-weight:600;line-height:1.3;margin:7px 0 0;color:#344e58;letter-spacing:-.3px}.op-panel .hw-status{white-space:nowrap}
.op-form{display:grid;grid-template-columns:100px 1fr;gap:20px;align-items:center}.op-product-symbol{display:grid;place-items:center;width:100px;height:118px;background:#f2f7f6;border:1px solid #e3eeeb;border-radius:7px;color:#5d8c83}.op-product-symbol svg{width:65px;height:65px}.op-form dl{display:grid;grid-template-columns:1fr 1fr;gap:15px 20px;margin:0;min-width:0}.op-form dt{font-size:9px;color:#8a999e;margin-bottom:6px}.op-form dd{font-size:11px;color:#405c66;margin:0;border-bottom:1px solid #e5eded;padding-bottom:8px}
.op-panel footer{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #e9eeee;margin-top:25px;padding-top:13px;color:#4f8d7c;font-size:9px}.op-panel footer small{font-size:8px;color:#95a4a6;white-space:nowrap}
.op-table{overflow-x:auto}.op-table table{width:100%;border-collapse:collapse;font-size:11px;color:#4c636d}.op-table th{font-size:9px;font-weight:500;color:#89999f;background:#f7f9fa;text-align:left;padding:9px}.op-table td{padding:11px 9px;border-bottom:1px solid #edf1f1;white-space:nowrap}.op-table td small{display:block;font-size:8px;color:#91a0a5;margin-top:3px}
.op-order-summary{display:flex;justify-content:space-between;padding:11px 14px;border-radius:5px;background:#f6f9f8;margin-bottom:14px}.op-order-summary small{display:block;font-size:8px;color:#8a9a9c;margin-bottom:4px}.op-order-summary strong{font-size:11px;font-weight:500;color:#445d65}
.op-timeline{list-style:none;padding:0;margin:0}.op-timeline li{position:relative;display:flex;align-items:center;gap:12px;padding:7px 0}.op-timeline i{position:relative;z-index:1;display:grid;place-items:center;background:#e9f5ef;color:#358c73;border-radius:50%;width:23px;height:23px;font-size:10px;font-style:normal}.op-timeline li:not(:last-child):before{content:'';position:absolute;left:11px;top:25px;bottom:-15px;width:1px;background:#e0e9e7}.op-timeline strong{display:block;font-size:10px;color:#4a626d;font-weight:500}.op-timeline small{display:block;font-size:8px;color:#93a1a6;margin-top:3px}.op-timeline time{margin-left:auto;font-size:9px;color:#98a7ac}
@media(max-width:1000px){.op-layout{grid-template-columns:1fr 1.6fr;gap:20px}.op-tabs button{padding:17px 10px;gap:10px}.op-tabs strong{font-size:13px}.op-form{grid-template-columns:70px 1fr;gap:14px}.op-product-symbol{width:70px;height:100px}.op-product-symbol svg{width:50px;height:50px}}
@media(max-width:760px){.op-layout{grid-template-columns:1fr;gap:15px}.op-tabs{grid-template-columns:repeat(3,minmax(0,1fr));padding:0;gap:5px}.op-tabs button{display:block;padding:12px 8px;border-color:#e6ecec;text-align:center;height:100%}.op-tabs button>span{font-size:8px;display:block;margin-bottom:5px}.op-tabs strong{font-size:11px}.op-tabs small,.op-tabs b{display:none}.op-panel{padding:15px;min-height:285px}.op-panel-heading{margin-bottom:17px}.op-panel-heading h3{font-size:17px}.op-form{grid-template-columns:65px 1fr;gap:12px}.op-product-symbol{width:65px;height:100px}.op-form dl{gap:12px}.op-form dd{font-size:10px}.op-panel footer{font-size:8px;margin-top:20px}.op-panel footer small{font-size:7px}.op-table table{font-size:10px}.op-table td{padding-inline:6px}.op-table th{padding-inline:6px}}