.merchant-commerce,
.commerce-dialog {
  --commerce-ink: #17231f;
  --commerce-muted: #66736e;
  --commerce-line: #dce6e1;
  --commerce-soft: #f4f8f6;
  --commerce-brand: #176b4d;
  --commerce-brand-dark: #0d4734;
  --commerce-accent: #c77638;
  --commerce-warning: #9a6719;
  --commerce-danger: #a4403c;
  --commerce-shadow: 0 16px 42px rgba(22, 53, 42, .08);
  color: var(--commerce-ink);
}
.merchant-commerce { display: grid; gap: 18px; min-width: 0; padding: 2px 0 28px; }
.merchant-commerce *, .merchant-commerce *::before, .merchant-commerce *::after,
.commerce-dialog *, .commerce-dialog *::before, .commerce-dialog *::after { box-sizing: border-box; }
.merchant-commerce button, .merchant-commerce input, .merchant-commerce select, .merchant-commerce textarea,
.commerce-dialog button, .commerce-dialog input, .commerce-dialog select, .commerce-dialog textarea { font: inherit; }
.merchant-commerce button:focus-visible, .merchant-commerce input:focus-visible, .merchant-commerce select:focus-visible, .merchant-commerce textarea:focus-visible,
.commerce-dialog button:focus-visible, .commerce-dialog input:focus-visible, .commerce-dialog select:focus-visible, .commerce-dialog textarea:focus-visible { outline: 3px solid rgba(23,107,77,.28); outline-offset: 2px; }

.commerce-notice { display: flex; gap: 11px; padding: 13px 15px; border: 1px solid #e8cd98; border-radius: 14px; background: #fff8e9; color: #6f531f; }
.commerce-notice svg { flex: 0 0 18px; width: 18px; }
.commerce-notice span, .commerce-notice strong, .commerce-notice small { display: block; }
.commerce-notice small { margin-top: 3px; line-height: 1.6; }
.commerce-notice--success { border-color: #acd9c3; background: #effaf4; color: #235d45; }

.commerce-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.6fr); gap: 30px; min-height: 250px; padding: 34px 36px; border-radius: 24px; color: #fff; background: radial-gradient(circle at 88% 10%,rgba(231,166,90,.24),transparent 28%),linear-gradient(130deg,#0d3d32,#176b4d 55%,#428b68); box-shadow: var(--commerce-shadow); }
.commerce-hero::after { position: absolute; right: -70px; bottom: -120px; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; content: ""; }
.commerce-hero > * { position: relative; z-index: 1; }
.commerce-hero > div > span { color: #eac18f; font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.commerce-hero h1 { margin: 12px 0 10px; color: #fff; font-size: clamp(30px,3vw,44px); line-height: 1.12; letter-spacing: -.035em; }
.commerce-hero p { max-width: 800px; margin: 0; color: rgba(255,255,255,.82); line-height: 1.8; }
.commerce-hero > div > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.commerce-hero aside { display: grid; align-content: start; gap: 10px; padding: 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(4,37,28,.3); backdrop-filter: blur(8px); }
.commerce-hero aside > small { color: #eac18f; font-weight: 900; }
.commerce-hero aside > strong { font-size: 18px; }
.commerce-hero aside ul { display: grid; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.commerce-hero aside li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.86); font-size: 12px; }
.commerce-hero aside li svg { width: 14px; }
.commerce-hero aside em { margin-top: 3px; color: rgba(255,255,255,.6); font-size: 10px; font-style: normal; }

.commerce-toolbar { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--commerce-line); border-radius: 17px; background: #fff; box-shadow: 0 8px 26px rgba(20,55,42,.04); }
.commerce-toolbar > div { display: flex; flex: 1; flex-wrap: wrap; gap: 8px; }
.commerce-toolbar > small { max-width: 440px; color: var(--commerce-muted); font-size: 10px; line-height: 1.55; text-align: right; }
.commerce-command { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 12px; border: 1px solid #cbd9d3; border-radius: 10px; background: #fff; color: #315149; cursor: pointer; }
.commerce-command span { display: inline-flex; }
.commerce-command svg { width: 14px; height: 14px; }
.commerce-command:hover { border-color: #7dae9a; background: #f4faf7; }
.commerce-command--primary, .commerce-command.is-primary { border-color: var(--commerce-brand); background: var(--commerce-brand); color: #fff; }
.commerce-command--danger { border-color: #e2b7b5; color: var(--commerce-danger); background: #fff7f6; }

.commerce-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.commerce-metric { position: relative; overflow: hidden; min-height: 145px; padding: 20px; border: 1px solid var(--commerce-line); border-radius: 18px; background: linear-gradient(150deg,#fff,#f8fbf9); box-shadow: 0 9px 28px rgba(20,55,42,.05); }
.commerce-metric::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--commerce-brand); content: ""; }
.commerce-metric--warning::before { background: #d09539; }.commerce-metric--danger::before { background: var(--commerce-danger); }.commerce-metric--info::before { background: #4c7fa4; }
.commerce-metric > span { color: var(--commerce-muted); font-size: 11px; }
.commerce-metric > strong { display: block; margin: 8px 0 6px; font-size: 28px; line-height: 1.15; }
.commerce-metric p { min-height: 34px; margin: 0 0 8px; color: var(--commerce-muted); font-size: 11px; line-height: 1.55; }

.commerce-filters { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)) auto; gap: 12px; align-items: end; padding: 17px; border: 1px solid var(--commerce-line); border-radius: 18px; background: var(--commerce-soft); }
.commerce-filters label { display: grid; gap: 6px; min-width: 0; }
.commerce-filters label span { color: var(--commerce-muted); font-size: 11px; font-weight: 800; }
.commerce-filters input, .commerce-filters select { width: 100%; min-width: 0; height: 40px; padding: 0 11px; border: 1px solid #c8d6d0; border-radius: 10px; background: #fff; color: var(--commerce-ink); }
.commerce-filters > div { display: flex; gap: 7px; }
.commerce-filters output { grid-column: 1/-1; color: var(--commerce-muted); font-size: 10px; }

.commerce-panel-title { margin-bottom: 16px; }
.commerce-panel-title > span { color: var(--commerce-accent); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.commerce-panel-title h2 { margin: 5px 0 0; font-size: 19px; }
.commerce-panel-title p { margin: 6px 0 0; color: var(--commerce-muted); font-size: 11px; line-height: 1.55; }
.commerce-feature { min-width: 0; padding: 20px; border: 1px solid var(--commerce-line); border-radius: 19px; background: #fff; box-shadow: 0 8px 28px rgba(20,55,42,.05); }

.commerce-feature--spot { display: grid; grid-template-columns: repeat(6,minmax(110px,1fr)); gap: 10px; }
.commerce-feature--spot .commerce-panel-title { grid-column: 1/-1; }
.commerce-feature--spot article { display: flex; gap: 9px; min-height: 80px; padding: 12px; border: 1px solid #cee3d9; border-radius: 13px; background: #f3faf7; }
.commerce-feature--spot article.is-waiting { border-color: #ead39f; background: #fff9eb; }
.commerce-feature--spot i { display: grid; flex: 0 0 25px; height: 25px; place-items: center; border-radius: 50%; background: var(--commerce-brand); color: #fff; font-style: normal; font-weight: 900; }
.commerce-feature--spot .is-waiting i { background: #c78b2f; }
.commerce-feature--spot strong, .commerce-feature--spot small { display: block; }.commerce-feature--spot small { margin-top: 4px; color: var(--commerce-muted); font-size: 9px; }

.commerce-feature--presale > div { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: 14px; align-items: center; }
.commerce-feature--presale article { padding: 17px; border-radius: 14px; background: var(--commerce-soft); text-align: center; }
.commerce-feature--presale article.is-result { background: #e9f6ef; color: var(--commerce-brand-dark); }
.commerce-feature--presale article small, .commerce-feature--presale article strong { display: block; }.commerce-feature--presale article strong { margin-top: 7px; font-size: 24px; }
.commerce-feature--presale > div > i { color: var(--commerce-accent); font-size: 20px; font-style: normal; }
.commerce-feature--presale footer { position: relative; display: flex; justify-content: space-between; margin-top: 15px; padding: 12px 14px; overflow: hidden; border-radius: 11px; background: #edf2ef; }
.commerce-feature--presale footer::before { position: absolute; inset: 0 auto 0 0; width: 64%; background: rgba(23,107,77,.13); content: ""; }.commerce-feature--presale footer > * { position: relative; }

.commerce-feature--fulfillment ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.commerce-feature--fulfillment li { position: relative; display: grid; gap: 6px; padding: 16px; border-top: 4px solid #7ab79e; background: var(--commerce-soft); }
.commerce-feature--fulfillment li:not(:last-child)::after { position: absolute; top: -9px; right: -6px; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--commerce-brand); content: ""; }
.commerce-feature--fulfillment li.is-risk { border-color: #d18b52; background: #fff6ef; }.commerce-feature--fulfillment li strong { font-size: 22px; }.commerce-feature--fulfillment li span { color: var(--commerce-muted); font-size: 10px; }

.commerce-feature--consignment { display: grid; grid-template-columns: repeat(6,minmax(110px,1fr)); gap: 10px; }.commerce-feature--consignment .commerce-panel-title { grid-column: 1/-1; }
.commerce-feature--consignment article { display: grid; gap: 6px; min-height: 95px; padding: 13px; border: 1px solid #cae2d6; border-radius: 13px; background: #f4faf7; }
.commerce-feature--consignment article.is-waiting { border-color: #ecd59f; background: #fff9ec; }.commerce-feature--consignment article.is-review { border-color: #c9d7e3; background: #f4f8fc; }
.commerce-feature--consignment i svg { width: 17px; }.commerce-feature--consignment small { color: var(--commerce-muted); font-size: 9px; }

.commerce-feature--category { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(260px,.5fr); gap: 18px; }.commerce-feature--category .commerce-panel-title { grid-column: 1/-1; }
.commerce-tree { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px; border-radius: 14px; background: linear-gradient(rgba(23,107,77,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(23,107,77,.05) 1px,transparent 1px),#fbfdfc; background-size: 24px 24px; }
.commerce-tree > * { padding: 8px 10px; border: 1px solid var(--commerce-line); border-radius: 9px; background: #fff; font-style: normal; font-size: 11px; }.commerce-tree strong { background: var(--commerce-brand); color: #fff; }.commerce-tree em { border-color: #d8bd91; color: #7a5227; }
.commerce-feature--category aside { padding: 16px; border-radius: 14px; background: var(--commerce-soft); }.commerce-feature--category aside small { color: var(--commerce-muted); }.commerce-feature--category ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 18px; }

.commerce-feature--review { display: grid; grid-template-columns: minmax(200px,.4fr) minmax(0,1fr); gap: 18px; }.commerce-feature--review .commerce-panel-title { grid-column: 1/-1; }
.commerce-stars { display: grid; place-items: center; padding: 18px; border-radius: 15px; background: linear-gradient(145deg,#fff5e8,#fff); }.commerce-stars strong { font-size: 42px; }.commerce-stars span { color: #d4872e; letter-spacing: .15em; }.commerce-stars small { margin-top: 6px; color: var(--commerce-muted); }
.commerce-feature--review ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }.commerce-feature--review li { display: flex; justify-content: space-between; padding: 11px 13px; border-radius: 11px; background: var(--commerce-soft); }.commerce-feature--review li strong { color: var(--commerce-brand); }

.commerce-feature--coupon { display: grid; grid-template-columns: minmax(240px,.7fr) minmax(170px,.3fr) minmax(260px,.7fr); gap: 18px; align-items: stretch; }.commerce-feature--coupon .commerce-panel-title { grid-column: 1/-1; }
.commerce-coupon-card { position: relative; overflow: hidden; display: grid; align-content: center; min-height: 150px; padding: 22px; border-radius: 17px; color: #fff; background: linear-gradient(135deg,#a24a2d,#d17b37); }.commerce-coupon-card::after { position: absolute; right: -35px; top: -45px; width: 150px; height: 150px; border: 1px dashed rgba(255,255,255,.38); border-radius: 50%; content: ""; }.commerce-coupon-card span { color: #ffdcb7; font-size: 9px; font-weight: 900; letter-spacing: .16em; }.commerce-coupon-card strong { margin: 9px 0 5px; font-size: 26px; }.commerce-coupon-card small { color: rgba(255,255,255,.8); }.commerce-coupon-card code { margin-top: 15px; font-size: 9px; opacity: .65; }
.commerce-budget-ring { display: grid; place-items: center; align-content: center; min-height: 150px; border: 12px solid #e6f1ec; border-top-color: var(--commerce-brand); border-right-color: var(--commerce-brand); border-radius: 50%; background: #fff; text-align: center; }.commerce-budget-ring strong { font-size: 28px; }.commerce-budget-ring span,.commerce-budget-ring small { color: var(--commerce-muted); font-size: 9px; }
.commerce-feature--coupon ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }.commerce-feature--coupon li { display: grid; align-content: center; gap: 5px; padding: 14px; border-radius: 12px; background: var(--commerce-soft); }.commerce-feature--coupon li span { color: var(--commerce-muted); font-size: 9px; }.commerce-feature--coupon li strong { font-size: 20px; }

.commerce-feature--threshold > div { display: grid; grid-template-columns: repeat(7,auto); gap: 10px; align-items: center; }.commerce-feature--threshold article { min-width: 130px; padding: 16px; border-radius: 13px; background: var(--commerce-soft); text-align: center; }.commerce-feature--threshold article.is-result { background: #e9f6ef; color: var(--commerce-brand-dark); }.commerce-feature--threshold article small,.commerce-feature--threshold article strong { display: block; }.commerce-feature--threshold article strong { margin-top: 6px; font-size: 20px; }.commerce-feature--threshold > div > i { color: var(--commerce-accent); font-style: normal; }.commerce-feature--threshold footer { margin-top: 13px; padding: 11px 13px; border-radius: 10px; background: #fff8ed; color: #755422; }

.commerce-feature--flash { display: grid; grid-template-columns: minmax(180px,.4fr) minmax(180px,.35fr) minmax(300px,.8fr); gap: 14px; }.commerce-feature--flash .commerce-panel-title { grid-column: 1/-1; }.commerce-flash-clock,.commerce-flash-price,.commerce-flash-stock { min-height: 130px; padding: 18px; border-radius: 14px; background: var(--commerce-soft); }.commerce-flash-clock { display: grid; align-content: center; justify-items: center; color: #fff; background: linear-gradient(135deg,#173e35,#28795c); }.commerce-flash-clock strong { margin: 7px 0; font: 800 25px Consolas,monospace; letter-spacing: .05em; }.commerce-flash-clock small,.commerce-flash-clock span { color: rgba(255,255,255,.72); font-size: 9px; }.commerce-flash-price { display: grid; align-content: center; justify-items: center; }.commerce-flash-price del { margin-top: 7px; color: var(--commerce-muted); }.commerce-flash-price strong { color: var(--commerce-danger); font-size: 31px; }.commerce-flash-stock { display: grid; align-content: center; gap: 10px; }.commerce-flash-stock header { display: flex; justify-content: space-between; }.commerce-flash-stock i { overflow: hidden; height: 10px; border-radius: 999px; background: #dce7e2; }.commerce-flash-stock i b { display: block; width: 64%; height: 100%; background: linear-gradient(90deg,var(--commerce-brand),#7ab89e); }.commerce-flash-stock small { color: var(--commerce-muted); }

.commerce-feature--groupbuy { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.35fr); gap: 18px; }.commerce-feature--groupbuy .commerce-panel-title { grid-column: 1/-1; }.commerce-group-line { display: grid; grid-template-columns: minmax(100px,1fr) minmax(30px,.25fr) minmax(100px,1fr) minmax(30px,.25fr) minmax(100px,1fr); align-items: center; }.commerce-group-line article { display: grid; justify-items: center; gap: 4px; padding: 14px; border: 1px solid var(--commerce-line); border-radius: 13px; background: #fff; }.commerce-group-line article i { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: #e4f3eb; color: var(--commerce-brand); font-style: normal; font-weight: 900; }.commerce-group-line article.is-waiting { border-style: dashed; background: #fff9ed; }.commerce-group-line article.is-waiting i { background: #fff0cf; color: var(--commerce-warning); }.commerce-group-line article small { color: var(--commerce-muted); font-size: 9px; }.commerce-group-line > span { height: 2px; background: #a7c6b9; }.commerce-feature--groupbuy > aside { display: grid; place-items: center; align-content: center; padding: 18px; border-radius: 14px; background: var(--commerce-soft); text-align: center; }.commerce-feature--groupbuy > aside strong { font-size: 30px; }.commerce-feature--groupbuy > aside span { color: var(--commerce-warning); font-weight: 800; }.commerce-feature--groupbuy > aside small { margin-top: 7px; color: var(--commerce-muted); line-height: 1.5; }

.commerce-feature--points { display: grid; grid-template-columns: minmax(180px,.35fr) minmax(0,1fr) minmax(200px,.4fr); gap: 16px; }.commerce-feature--points .commerce-panel-title { grid-column: 1/-1; }.commerce-points-balance { display: grid; place-items: center; align-content: center; min-height: 150px; border-radius: 15px; color: #fff; background: radial-gradient(circle at 80% 15%,rgba(255,255,255,.15),transparent 26%),linear-gradient(140deg,#143f35,#1f7657); }.commerce-points-balance strong { margin: 5px 0; font-size: 35px; }.commerce-points-balance small,.commerce-points-balance span { color: rgba(255,255,255,.72); }.commerce-feature--points ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }.commerce-feature--points li { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 12px; border-radius: 11px; background: var(--commerce-soft); }.commerce-feature--points li strong { grid-row: 1/3; grid-column: 2; align-self: center; color: var(--commerce-brand); font-size: 18px; }.commerce-feature--points li span { color: var(--commerce-muted); font-size: 9px; }.commerce-feature--points > aside { display: grid; align-content: center; gap: 8px; }.commerce-feature--points > aside span { padding: 10px 12px; border-radius: 10px; background: #eef5f1; font-weight: 700; }

.commerce-feature--camera { display: grid; grid-template-columns: minmax(340px,1fr) minmax(260px,.55fr); gap: 16px; }.commerce-feature--camera .commerce-panel-title { grid-column: 1/-1; }.commerce-camera-frame { position: relative; display: grid; align-content: end; min-height: 210px; padding: 22px; overflow: hidden; border-radius: 16px; color: #fff; background: linear-gradient(0deg,rgba(6,20,15,.8),rgba(9,50,36,.08)),linear-gradient(135deg,#507b66,#abc6b7); }.commerce-camera-frame::before { position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.25); content: ""; }.commerce-camera-frame > * { position: relative; }.commerce-camera-frame span { color: #ffce91; font-size: 9px; font-weight: 900; letter-spacing: .12em; }.commerce-camera-frame strong { margin: 7px 0; font-size: 21px; }.commerce-camera-frame small { color: rgba(255,255,255,.75); }.commerce-camera-frame i { margin-top: 12px; font-size: 9px; font-style: normal; opacity: .58; }.commerce-feature--camera ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.commerce-feature--camera li { display: flex; justify-content: space-between; padding: 11px 13px; border-radius: 10px; background: var(--commerce-soft); }.commerce-feature--camera li.is-ok strong { color: var(--commerce-brand); }.commerce-feature--camera li.is-warning { background: #fff7e9; }.commerce-feature--camera li.is-warning strong { color: var(--commerce-warning); }
.commerce-feature--sensor { display: grid; grid-template-columns: minmax(180px,.35fr) minmax(300px,1fr) minmax(220px,.45fr); gap: 15px; }.commerce-feature--sensor .commerce-panel-title { grid-column: 1/-1; }.commerce-sensor-value { display: grid; align-content: center; justify-items: center; min-height: 165px; border-radius: 15px; color: #fff; background: linear-gradient(140deg,#164c3b,#258362); }.commerce-sensor-value strong { margin: 5px 0; font-size: 39px; }.commerce-sensor-value strong em { font-size: 16px; font-style: normal; }.commerce-sensor-value small,.commerce-sensor-value span { color: rgba(255,255,255,.72); }.commerce-sensor-chart { position: relative; display: flex; align-items: end; gap: 8px; min-height: 165px; padding: 25px 18px 28px; border-radius: 15px; background: linear-gradient(rgba(23,107,77,.06) 1px,transparent 1px),var(--commerce-soft); background-size: 100% 25%; }.commerce-sensor-chart i { flex: 1; height: var(--h); min-width: 8px; border-radius: 5px 5px 0 0; background: linear-gradient(#77b99e,var(--commerce-brand)); }.commerce-sensor-chart span { position: absolute; left: 18px; bottom: 8px; color: var(--commerce-muted); font-size: 9px; }.commerce-feature--sensor aside { display: grid; align-content: center; }.commerce-feature--sensor aside dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }.commerce-feature--sensor aside dl div { padding: 11px; border-radius: 10px; background: var(--commerce-soft); }.commerce-feature--sensor dt { color: var(--commerce-muted); font-size: 9px; }.commerce-feature--sensor dd { margin: 4px 0 0; font-weight: 800; }
.commerce-feature--printer { display: grid; grid-template-columns: minmax(200px,.4fr) minmax(240px,.55fr) minmax(260px,.6fr); gap: 15px; }.commerce-feature--printer .commerce-panel-title { grid-column: 1/-1; }.commerce-printer-device { display: grid; place-items: center; align-content: center; gap: 7px; min-height: 165px; border-radius: 15px; background: #eaf3ef; }.commerce-printer-device svg { width: 38px; height: 38px; color: var(--commerce-brand); }.commerce-printer-device small { color: var(--commerce-muted); }.commerce-printer-label { display: grid; align-content: center; min-height: 165px; padding: 20px; border: 1px dashed #819b90; border-radius: 7px; background: #fff; }.commerce-printer-label span { font-size: 8px; letter-spacing: .14em; }.commerce-printer-label strong { margin: 7px 0; }.commerce-printer-label i { width: 75%; height: 35px; background: repeating-linear-gradient(90deg,#17231f 0 2px,transparent 2px 4px); }.commerce-printer-label small { margin-top: 7px; color: var(--commerce-muted); }.commerce-feature--printer ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }.commerce-feature--printer li { display: grid; align-content: center; gap: 4px; padding: 12px; border-radius: 11px; background: var(--commerce-soft); }.commerce-feature--printer li span { color: var(--commerce-muted); font-size: 9px; }.commerce-feature--printer li strong { font-size: 20px; }
.commerce-feature--live { display: grid; grid-template-columns: minmax(360px,1fr) minmax(260px,.45fr); gap: 16px; }.commerce-feature--live .commerce-panel-title { grid-column: 1/-1; }.commerce-live-screen { position: relative; display: grid; align-content: end; min-height: 210px; padding: 22px; overflow: hidden; border-radius: 16px; color: #fff; background: radial-gradient(circle at 70% 20%,rgba(112,202,158,.25),transparent 25%),linear-gradient(140deg,#0b1f19,#174e3d); }.commerce-live-screen::after { position: absolute; inset: 20px; border: 1px solid rgba(255,255,255,.15); content: ""; }.commerce-live-screen > * { position: relative; z-index: 1; }.commerce-live-screen span { color: #ff9c85; font-size: 9px; font-weight: 900; letter-spacing: .13em; }.commerce-live-screen strong { margin: 8px 0; font-size: 22px; }.commerce-live-screen small { color: rgba(255,255,255,.7); }.commerce-live-screen i { position: absolute; top: 36px; right: 36px; padding: 5px 8px; border-radius: 8px; background: rgba(0,0,0,.35); font: 700 11px Consolas,monospace; }.commerce-feature--live aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.commerce-feature--live aside article { display: grid; align-content: center; gap: 5px; padding: 14px; border-radius: 12px; background: var(--commerce-soft); }.commerce-feature--live aside small { color: var(--commerce-muted); }.commerce-feature--live aside strong { font-size: 21px; }
.commerce-feature--device-alert { display: grid; gap: 16px; }.commerce-alert-signal { display: grid; grid-template-columns: minmax(150px,1fr) auto minmax(150px,1fr) auto minmax(220px,1.4fr); gap: 10px; align-items: center; }.commerce-alert-signal article { padding: 15px; border-radius: 12px; background: var(--commerce-soft); text-align: center; }.commerce-alert-signal article span,.commerce-alert-signal article strong { display: block; }.commerce-alert-signal article strong { margin-top: 6px; }.commerce-alert-signal article.is-ok strong { color: var(--commerce-brand); }.commerce-alert-signal article.is-danger { background: #fff0ef; }.commerce-alert-signal article.is-danger strong { color: var(--commerce-danger); }.commerce-alert-signal article.is-result { color: #fff; background: linear-gradient(135deg,#7c332f,#ac4b43); }.commerce-alert-signal > i { color: var(--commerce-accent); font-size: 20px; font-style: normal; }.commerce-feature--device-alert ol { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }.commerce-feature--device-alert li { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; background: var(--commerce-soft); }.commerce-feature--device-alert li i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--commerce-brand); color: #fff; font-style: normal; font-size: 10px; }

.commerce-feature--mobile-home,.commerce-feature--mobile-farm,.commerce-feature--mobile-scan,.commerce-feature--mobile-ship,.commerce-feature--mobile-approval,.commerce-feature--mobile-alert { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: 18px; align-items: stretch; }.commerce-feature--mobile-home .commerce-panel-title,.commerce-feature--mobile-farm .commerce-panel-title,.commerce-feature--mobile-scan .commerce-panel-title,.commerce-feature--mobile-ship .commerce-panel-title,.commerce-feature--mobile-approval .commerce-panel-title,.commerce-feature--mobile-alert .commerce-panel-title { grid-column: 1/-1; }
.commerce-phone { overflow: hidden; width: min(100%,360px); min-height: 500px; justify-self: center; border: 8px solid #173d33; border-radius: 31px; background: #f5f8f6; box-shadow: 0 18px 46px rgba(18,54,42,.2); }.commerce-phone > header { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 15px 16px 12px; color: #fff; background: linear-gradient(135deg,#103d33,#1c6c50); }.commerce-phone > header span,.commerce-phone > header i { font-size: 9px; font-style: normal; }.commerce-phone > header strong { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.commerce-phone > header i { padding: 4px 6px; border-radius: 7px; background: rgba(255,255,255,.12); }.commerce-phone > main { display: grid; gap: 13px; padding: 16px; }.commerce-phone > footer { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; margin-top: auto; padding: 12px 9px; border-top: 1px solid #d8e4df; background: #fff; color: var(--commerce-muted); text-align: center; font-size: 9px; }
.commerce-feature--mobile-home .commerce-phone main > article { display: grid; gap: 6px; padding: 17px; border-radius: 16px; color: #fff; background: linear-gradient(135deg,#df873b,#b95c2d); }.commerce-feature--mobile-home .commerce-phone main > article strong { font-size: 23px; }.commerce-feature--mobile-home .commerce-phone main > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.commerce-feature--mobile-home .commerce-phone main button { display: grid; gap: 6px; min-height: 108px; padding: 13px; border: 1px solid var(--commerce-line); border-radius: 14px; background: #fff; color: var(--commerce-ink); text-align: left; cursor: pointer; }.commerce-feature--mobile-home .commerce-phone main button i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: #e5f3ec; color: var(--commerce-brand); font-style: normal; font-weight: 900; }.commerce-feature--mobile-home .commerce-phone main button small { color: var(--commerce-muted); line-height: 1.4; }
.commerce-mobile-sync,.commerce-evidence-queue,.commerce-code-custody,.commerce-handoff,.commerce-approval-material,.commerce-alert-response { min-width: 0; padding: 20px; border: 1px solid var(--commerce-line); border-radius: 17px; background: linear-gradient(150deg,#fff,#f5f9f7); }.commerce-mobile-sync > header,.commerce-evidence-queue > header,.commerce-code-custody > header,.commerce-handoff > header,.commerce-approval-material > header,.commerce-alert-response > header { display: grid; gap: 5px; margin-bottom: 15px; }.commerce-mobile-sync > header span,.commerce-evidence-queue > header span,.commerce-code-custody > header span,.commerce-handoff > header span,.commerce-approval-material > header span,.commerce-alert-response > header span { color: var(--commerce-accent); font-size: 9px; font-weight: 900; letter-spacing: .13em; }.commerce-mobile-sync > header small,.commerce-evidence-queue > header small { color: var(--commerce-muted); }.commerce-mobile-sync ol,.commerce-evidence-queue > div,.commerce-handoff ol,.commerce-approval-material ol,.commerce-alert-response ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }.commerce-mobile-sync li,.commerce-evidence-queue article,.commerce-handoff li,.commerce-approval-material li,.commerce-alert-response li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: start; padding: 13px; border-radius: 12px; background: var(--commerce-soft); }.commerce-mobile-sync li i,.commerce-evidence-queue article > i,.commerce-approval-material li > i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: #e4efe9; color: var(--commerce-brand); font-style: normal; font-weight: 900; }.commerce-mobile-sync li small,.commerce-evidence-queue article small,.commerce-handoff li small,.commerce-approval-material li small,.commerce-alert-response li small { display: block; margin-top: 4px; color: var(--commerce-muted); line-height: 1.45; }.commerce-mobile-sync li.is-warning i,.commerce-evidence-queue article.is-warning > i,.commerce-approval-material li.is-warning > i { background: #fff0d9; color: var(--commerce-warning); }.commerce-mobile-sync > div { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-top: 13px; padding: 14px; border-radius: 12px; background: #173d33; color: #fff; }.commerce-mobile-sync > div strong { grid-row: 1/3; align-self: center; color: #f3b36e; font-size: 30px; }.commerce-mobile-sync > div small { color: rgba(255,255,255,.68); }
.commerce-phone--farm main > ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }.commerce-phone--farm main > ol li { display: grid; gap: 5px; justify-items: center; color: var(--commerce-muted); font-size: 9px; text-align: center; }.commerce-phone--farm main > ol i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #dfe8e4; font-style: normal; }.commerce-phone--farm main > ol li.is-active { color: var(--commerce-brand); font-weight: 900; }.commerce-phone--farm main > ol li.is-active i { background: var(--commerce-brand); color: #fff; }.commerce-phone--farm main > article { display: grid; gap: 8px; }.commerce-phone--farm main label { display: grid; gap: 4px; padding: 11px; border-radius: 10px; background: #fff; }.commerce-phone--farm main label span { color: var(--commerce-muted); font-size: 9px; }.commerce-phone--farm main > button,.commerce-phone--scan main > button,.commerce-phone--ship main > button,.commerce-phone--alert main > button { padding: 12px; border: 0; border-radius: 11px; background: var(--commerce-brand); color: #fff; cursor: pointer; font-weight: 900; }.commerce-evidence-queue article { grid-template-columns: auto minmax(0,1fr) auto; }.commerce-evidence-queue article em { align-self: center; color: var(--commerce-brand); font-size: 9px; font-style: normal; font-weight: 900; }.commerce-evidence-queue article.is-warning em { color: var(--commerce-warning); }.commerce-evidence-queue footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 13px; padding: 12px; border-radius: 10px; background: #173d33; color: #fff; }.commerce-evidence-queue footer span { color: rgba(255,255,255,.7); font-size: 9px; }
.commerce-scan-frame { position: relative; display: grid; min-height: 205px; place-content: center; border-radius: 17px; background: radial-gradient(circle,#365e52,#102d26); color: #fff; text-align: center; }.commerce-scan-frame::before,.commerce-scan-frame::after,.commerce-scan-frame i::before,.commerce-scan-frame i::after { position: absolute; width: 35px; height: 35px; border-color: #f2b56d; border-style: solid; content: ""; }.commerce-scan-frame::before { top: 24px; left: 24px; border-width: 3px 0 0 3px; }.commerce-scan-frame::after { top: 24px; right: 24px; border-width: 3px 3px 0 0; }.commerce-scan-frame i::before { bottom: 24px; left: 24px; border-width: 0 0 3px 3px; }.commerce-scan-frame i::after { right: 24px; bottom: 24px; border-width: 0 3px 3px 0; }.commerce-scan-frame strong,.commerce-scan-frame small { display: block; }.commerce-scan-frame small { margin-top: 7px; color: rgba(255,255,255,.68); }.commerce-phone--scan main > article { display: grid; gap: 4px; padding: 12px; border-radius: 11px; background: #fff; }.commerce-phone--scan main > article small { color: var(--commerce-muted); }.commerce-phone--scan main > article span { color: var(--commerce-brand); font-size: 9px; }.commerce-code-tree { display: grid; grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr); align-items: center; }.commerce-code-tree article { display: flex; gap: 9px; align-items: center; padding: 13px; border-radius: 12px; background: var(--commerce-soft); }.commerce-code-tree article i { display: grid; flex: 0 0 29px; height: 29px; place-items: center; border-radius: 9px; background: var(--commerce-brand); color: #fff; font-style: normal; }.commerce-code-tree article small { display: block; margin-top: 3px; color: var(--commerce-muted); }.commerce-code-tree b { height: 1px; background: #9fb9ae; }.commerce-code-custody > ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }.commerce-code-custody > ol li { display: grid; gap: 5px; padding: 12px; border-radius: 10px; background: #edf5f1; }.commerce-code-custody > ol strong { font-size: 20px; }.commerce-code-custody > ol li.is-risk { color: var(--commerce-danger); background: #fff0ef; }
.commerce-package { display: flex; gap: 10px; align-items: center; padding: 13px; border-radius: 12px; background: #fff; }.commerce-package > i { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border-radius: 12px; background: #fff0dd; color: var(--commerce-accent); font-style: normal; font-weight: 900; }.commerce-package small { display: block; margin-top: 4px; color: var(--commerce-muted); }.commerce-phone--ship main > ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.commerce-phone--ship main > ul li { display: flex; gap: 9px; align-items: center; padding: 10px; border-radius: 10px; background: #e8eeeb; color: var(--commerce-muted); }.commerce-phone--ship main > ul i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #d3dfda; font-style: normal; }.commerce-phone--ship main > ul li.is-done { color: var(--commerce-brand); }.commerce-phone--ship main > ul li.is-done i { background: var(--commerce-brand); color: #fff; }.commerce-phone--ship main > ul li.is-active { color: #704c1e; background: #fff0dc; }.commerce-phone--ship main > ul li.is-active i { background: var(--commerce-accent); color: #fff; }.commerce-handoff li,.commerce-alert-response li { grid-template-columns: 52px minmax(0,1fr); }.commerce-handoff time,.commerce-alert-response time { padding-top: 3px; color: var(--commerce-muted); font: 800 10px Consolas,monospace; }.commerce-handoff li.is-current,.commerce-alert-response li.is-current { background: #fff1dd; }.commerce-handoff li.is-current time,.commerce-alert-response li.is-current time { color: var(--commerce-accent); }.commerce-handoff footer { display: grid; gap: 4px; margin-top: 13px; padding: 13px; border-radius: 11px; color: #fff; background: #173d33; }.commerce-handoff footer span { color: rgba(255,255,255,.7); }
.commerce-phone--approval main > article { display: grid; gap: 5px; padding: 14px; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#743935,#b3554b); }.commerce-phone--approval main > article span { color: rgba(255,255,255,.75); }.commerce-phone--approval dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }.commerce-phone--approval dl div { padding: 10px; border-radius: 10px; background: #fff; }.commerce-phone--approval dt { color: var(--commerce-muted); font-size: 9px; }.commerce-phone--approval dd { margin: 4px 0 0; font-weight: 900; }.commerce-phone--approval main > aside { padding: 11px; border: 1px solid #b9d6c9; border-radius: 10px; background: #edf8f2; color: var(--commerce-brand); }.commerce-phone--approval main > aside small { display: block; margin-top: 4px; color: var(--commerce-muted); }.commerce-phone--approval main > footer { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }.commerce-phone--approval main > footer button { padding: 11px; border: 1px solid var(--commerce-brand); border-radius: 10px; background: #fff; color: var(--commerce-brand); cursor: pointer; font-weight: 900; }.commerce-phone--approval main > footer button:last-child { background: var(--commerce-brand); color: #fff; }.commerce-approval-material > div { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 8px; align-items: center; margin-top: 15px; padding: 12px; border-radius: 11px; background: #173d33; color: #fff; font-size: 9px; }.commerce-approval-material > div i { height: 1px; background: rgba(255,255,255,.35); }
.commerce-mobile-alert-signal { display: grid; gap: 4px; padding: 18px; border-radius: 14px; color: #fff; background: linear-gradient(135deg,#7c332f,#bc554b); }.commerce-mobile-alert-signal strong { font-size: 31px; }.commerce-mobile-alert-signal small { color: rgba(255,255,255,.7); }.commerce-phone--alert dl { display: grid; gap: 8px; margin: 0; }.commerce-phone--alert dl div { padding: 10px; border-radius: 10px; background: #fff; }.commerce-phone--alert dt { color: var(--commerce-muted); font-size: 9px; }.commerce-phone--alert dd { margin: 4px 0 0; font-weight: 800; }.commerce-alert-response footer { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 13px; }.commerce-alert-response footer article { display: grid; gap: 5px; padding: 12px; border-radius: 10px; background: #edf5f1; }.commerce-alert-response footer article.is-risk { color: var(--commerce-danger); background: #fff0ef; }.commerce-alert-response footer strong { font-size: 18px; }

.commerce-ledger { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(320px,.45fr); gap: 16px; min-width: 0; }
.commerce-table-card, .commerce-detail { min-width: 0; padding: 20px; border: 1px solid var(--commerce-line); border-radius: 19px; background: #fff; box-shadow: 0 8px 28px rgba(20,55,42,.05); }
.commerce-table-scroll { overflow-x: auto; border: 1px solid var(--commerce-line); border-radius: 13px; }
.commerce-table-scroll table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 11px; }
.commerce-table-scroll th { padding: 11px 10px; background: #f0f5f2; color: #52635c; text-align: left; white-space: nowrap; }
.commerce-table-scroll td { max-width: 210px; padding: 12px 10px; border-top: 1px solid var(--commerce-line); vertical-align: top; line-height: 1.55; }
.commerce-table-scroll tr.is-selected td { background: #f1f9f5; }.commerce-table-scroll tr:hover td { background: #f7fbf9; }
.commerce-table-scroll td span { overflow-wrap: anywhere; }.commerce-table-scroll td button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 0; border-radius: 8px; background: #edf7f2; color: var(--commerce-brand); cursor: pointer; white-space: nowrap; }.commerce-table-scroll td button svg { width: 12px; }
.commerce-ledger-empty { display: grid; gap: 5px; margin-top: 12px; padding: 30px; border: 1px dashed #afc6bc; border-radius: 13px; background: var(--commerce-soft); color: var(--commerce-muted); text-align: center; }
.commerce-detail { align-self: start; position: sticky; top: 12px; }.commerce-detail header > span { color: var(--commerce-accent); font-size: 9px; font-weight: 900; letter-spacing: .12em; }.commerce-detail header code { float: right; color: var(--commerce-muted); font-size: 9px; }.commerce-detail h2 { margin: 8px 0 10px; font-size: 18px; }
.commerce-detail dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 16px 0; }.commerce-detail dl div { min-width: 0; padding: 10px; border-radius: 10px; background: var(--commerce-soft); }.commerce-detail dt { color: var(--commerce-muted); font-size: 9px; }.commerce-detail dd { overflow-wrap: anywhere; margin: 4px 0 0; font-size: 11px; font-weight: 800; }
.commerce-detail section { padding-top: 14px; border-top: 1px solid var(--commerce-line); }.commerce-detail section > small { color: var(--commerce-muted); }.commerce-detail section > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }.commerce-detail .commerce-command { flex: 1 1 95px; padding: 7px 8px; font-size: 10px; }
.commerce-detail footer { display: flex; gap: 8px; margin-top: 14px; color: var(--commerce-muted); line-height: 1.5; }.commerce-detail footer svg { flex: 0 0 15px; width: 15px; }

.commerce-flow { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr); gap: 16px; }.commerce-flow > div, .commerce-flow > aside, .commerce-gates { padding: 20px; border: 1px solid var(--commerce-line); border-radius: 19px; background: #fff; }
.commerce-flow ol { display: grid; grid-template-columns: repeat(6,minmax(100px,1fr)); gap: 0; overflow-x: auto; margin: 0; padding: 0; list-style: none; }.commerce-flow ol li { position: relative; min-width: 100px; padding-right: 14px; }.commerce-flow ol li:not(:last-child)::after { position: absolute; top: 15px; right: 4px; width: 8px; height: 1px; background: #9bb8ad; content: ""; }.commerce-flow ol i { display: grid; width: 31px; height: 31px; margin-bottom: 9px; place-items: center; border-radius: 10px; background: #e5f3ec; color: var(--commerce-brand); font-style: normal; font-weight: 900; }.commerce-flow ol strong, .commerce-flow ol small { display: block; line-height: 1.45; }.commerce-flow ol strong { font-size: 11px; }.commerce-flow ol small { margin-top: 4px; color: var(--commerce-muted); font-size: 9px; }
.commerce-flow aside dl { display: grid; gap: 9px; margin: 0; }.commerce-flow aside dl div { padding: 11px; border-radius: 11px; background: var(--commerce-soft); }.commerce-flow aside dt { color: var(--commerce-muted); font-size: 9px; }.commerce-flow aside dd { margin: 5px 0 0; line-height: 1.55; }
.commerce-gates > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.commerce-gates article { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: start; padding: 14px; border: 1px solid var(--commerce-line); border-radius: 13px; background: var(--commerce-soft); }.commerce-gates article i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: var(--commerce-brand); color: #fff; font-style: normal; font-weight: 900; }.commerce-gates article .badge { grid-column: 2; justify-self: start; }
.commerce-boundary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 18px; border: 1px solid #dfc29f; border-radius: 18px; background: linear-gradient(135deg,#fff8f0,#fff); }.commerce-boundary > div { display: flex; gap: 10px; }.commerce-boundary svg { flex: 0 0 18px; width: 18px; color: var(--commerce-accent); }.commerce-boundary strong, .commerce-boundary small { display: block; }.commerce-boundary small { margin-top: 4px; color: var(--commerce-muted); line-height: 1.55; }

.commerce-state { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px; max-width: 920px; margin: 70px auto; padding: 30px; border: 1px solid var(--commerce-line); border-radius: 22px; background: #fff; box-shadow: var(--commerce-shadow); }.commerce-state > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: #fff1dc; color: var(--commerce-warning); }.commerce-state > span svg { width: 24px; }.commerce-state > div > small { color: var(--commerce-accent); font-weight: 900; letter-spacing: .12em; }.commerce-state h1 { margin: 8px 0; }.commerce-state p { color: var(--commerce-muted); line-height: 1.7; }.commerce-state dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 18px 0; }.commerce-state dl div { padding: 12px; border-radius: 11px; background: var(--commerce-soft); }.commerce-state dt { color: var(--commerce-muted); font-size: 9px; }.commerce-state dd { margin: 5px 0 0; }.commerce-state aside { display: flex; gap: 10px; padding: 14px; border-radius: 12px; background: #f5f8f6; }.commerce-state aside svg { flex: 0 0 18px; width: 18px; }.commerce-state aside strong, .commerce-state aside small { display: block; }.commerce-state aside small { margin-top: 4px; color: var(--commerce-muted); }

.commerce-dialog { width: min(940px,calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: hidden; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 30px 90px rgba(7,30,22,.32); }.commerce-dialog::backdrop { background: rgba(8,24,18,.58); backdrop-filter: blur(3px); }.commerce-dialog-shell { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto auto; max-height: calc(100vh - 32px); }
.commerce-dialog-shell > header { display: flex; justify-content: space-between; gap: 18px; padding: 23px 25px; color: #fff; background: linear-gradient(130deg,#103d33,#176b4d); }.commerce-dialog-shell > header span { color: #efc28a; font-size: 9px; font-weight: 900; letter-spacing: .12em; }.commerce-dialog-shell > header h2 { margin: 6px 0; color: #fff; font-size: 24px; }.commerce-dialog-shell > header p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.55; }.commerce-dialog-shell > header button { align-self: start; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 24px; }
.commerce-dialog-context { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 14px 25px; border-bottom: 1px solid var(--commerce-line); background: #f5f8f6; }.commerce-dialog-context div { min-width: 0; }.commerce-dialog-context small, .commerce-dialog-context strong, .commerce-dialog-context span { display: block; }.commerce-dialog-context small { color: var(--commerce-muted); font-size: 9px; }.commerce-dialog-context strong { overflow: hidden; margin-top: 4px; text-overflow: ellipsis; white-space: nowrap; }.commerce-dialog-context span { overflow: hidden; margin-top: 2px; color: var(--commerce-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.commerce-dialog-body { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); gap: 18px; min-height: 0; padding: 21px 25px; overflow-y: auto; }.commerce-dialog-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-content: start; }.commerce-dialog-fields label { display: grid; gap: 6px; min-width: 0; }.commerce-dialog-fields label > span, .commerce-result-mode > span { font-size: 11px; font-weight: 800; }.commerce-dialog-fields input, .commerce-dialog-fields select, .commerce-dialog-fields textarea, .commerce-result-mode select { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #c7d6d0; border-radius: 10px; background: #fff; color: var(--commerce-ink); }.commerce-dialog-fields textarea { resize: vertical; }.commerce-dialog-fields small, .commerce-result-mode small { color: var(--commerce-muted); font-size: 9px; line-height: 1.4; }.commerce-dialog-fields em { min-height: 14px; color: var(--commerce-danger); font-size: 9px; font-style: normal; }.commerce-dialog-body > aside { display: grid; align-content: start; gap: 11px; }.commerce-dialog-body > aside > section, .commerce-result-mode, .commerce-risk-confirm { padding: 13px; border-radius: 12px; background: var(--commerce-soft); }.commerce-dialog-body > aside section > small { color: var(--commerce-accent); font-weight: 900; }.commerce-dialog-body > aside p { margin: 7px 0 0; line-height: 1.6; }.commerce-dialog-body ol { margin: 9px 0 0; padding-left: 18px; color: var(--commerce-muted); line-height: 1.6; }.commerce-result-mode { display: grid; gap: 7px; }.commerce-risk-confirm { display: grid; grid-template-columns: auto 1fr; gap: 9px; border: 1px solid #e6c292; background: #fff7e9; color: #6c4d1e; line-height: 1.55; }.commerce-risk-confirm input { margin-top: 3px; }
.commerce-dialog-feedback { min-height: 42px; margin: 0; padding: 11px 25px; border-top: 1px solid var(--commerce-line); color: var(--commerce-muted); }.commerce-dialog-feedback.is-pending { background: #f5f8f6; }.commerce-dialog-feedback.is-success { background: #edf9f2; color: #246044; }.commerce-dialog-feedback.is-error { background: #fff2f1; color: var(--commerce-danger); }
.commerce-dialog-shell > footer { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 25px; border-top: 1px solid var(--commerce-line); background: #fff; }.commerce-dialog-shell > footer button[aria-busy="true"] { cursor: wait; opacity: .65; }

@media (max-width: 1180px) {
  .commerce-hero { grid-template-columns: minmax(0,1fr) 290px; }
  .commerce-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .commerce-filters { grid-template-columns: repeat(2,minmax(180px,1fr)) auto; }.commerce-filters output { grid-column: 1/-1; }
  .commerce-feature--spot, .commerce-feature--consignment { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .commerce-feature--coupon,.commerce-feature--flash,.commerce-feature--points { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .commerce-feature--coupon .commerce-panel-title,.commerce-feature--flash .commerce-panel-title,.commerce-feature--points .commerce-panel-title,.commerce-feature--coupon ol,.commerce-flash-stock,.commerce-feature--points > aside { grid-column: 1/-1; }
  .commerce-feature--groupbuy { grid-template-columns: 1fr; }.commerce-feature--groupbuy .commerce-panel-title { grid-column: 1; }
  .commerce-feature--camera,.commerce-feature--sensor,.commerce-feature--printer,.commerce-feature--live { grid-template-columns: repeat(2,minmax(0,1fr)); }.commerce-feature--camera .commerce-panel-title,.commerce-feature--sensor .commerce-panel-title,.commerce-feature--printer .commerce-panel-title,.commerce-feature--live .commerce-panel-title { grid-column: 1/-1; }.commerce-feature--sensor aside,.commerce-feature--printer ol { grid-column: 1/-1; }
  .commerce-feature--mobile-home,.commerce-feature--mobile-farm,.commerce-feature--mobile-scan,.commerce-feature--mobile-ship,.commerce-feature--mobile-approval,.commerce-feature--mobile-alert { grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); }
  .commerce-code-tree { grid-template-columns: 1fr; gap: 7px; }.commerce-code-tree b { width: 1px; height: 18px; justify-self: center; }
  .commerce-feature--threshold > div { overflow-x: auto; padding-bottom: 5px; }
  .commerce-ledger, .commerce-flow { grid-template-columns: 1fr; }.commerce-detail { position: static; }.commerce-flow > aside { min-width: 0; }
}
@media (max-width: 800px) {
  .commerce-hero { grid-template-columns: 1fr; padding: 27px 24px; }.commerce-hero aside { grid-template-columns: repeat(2,minmax(0,1fr)); }.commerce-hero aside > small, .commerce-hero aside > strong, .commerce-hero aside > em { grid-column: 1/-1; }
  .commerce-toolbar { align-items: stretch; flex-direction: column; }.commerce-toolbar > small { max-width: none; text-align: left; }
  .commerce-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }.commerce-filters > div { grid-column: 1/-1; }
  .commerce-feature--fulfillment ol { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.commerce-feature--fulfillment li:not(:last-child)::after { display: none; }
  .commerce-feature--category, .commerce-feature--review { grid-template-columns: 1fr; }.commerce-feature--category .commerce-panel-title, .commerce-feature--review .commerce-panel-title { grid-column: 1; }
  .commerce-feature--coupon,.commerce-feature--flash,.commerce-feature--groupbuy,.commerce-feature--points { grid-template-columns: 1fr 1fr; }.commerce-feature--coupon .commerce-panel-title,.commerce-feature--flash .commerce-panel-title,.commerce-feature--groupbuy .commerce-panel-title,.commerce-feature--points .commerce-panel-title { grid-column: 1/-1; }.commerce-feature--coupon ol,.commerce-flash-stock,.commerce-feature--groupbuy > aside,.commerce-feature--points > aside { grid-column: 1/-1; }
  .commerce-feature--camera,.commerce-feature--sensor,.commerce-feature--printer,.commerce-feature--live { grid-template-columns: 1fr; }.commerce-feature--camera .commerce-panel-title,.commerce-feature--sensor .commerce-panel-title,.commerce-feature--printer .commerce-panel-title,.commerce-feature--live .commerce-panel-title,.commerce-feature--sensor aside,.commerce-feature--printer ol { grid-column: 1; }.commerce-alert-signal { grid-template-columns: 1fr; }.commerce-alert-signal > i { transform: rotate(90deg); text-align: center; }.commerce-feature--device-alert ol { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .commerce-feature--mobile-home,.commerce-feature--mobile-farm,.commerce-feature--mobile-scan,.commerce-feature--mobile-ship,.commerce-feature--mobile-approval,.commerce-feature--mobile-alert { grid-template-columns: 1fr; }.commerce-feature--mobile-home .commerce-panel-title,.commerce-feature--mobile-farm .commerce-panel-title,.commerce-feature--mobile-scan .commerce-panel-title,.commerce-feature--mobile-ship .commerce-panel-title,.commerce-feature--mobile-approval .commerce-panel-title,.commerce-feature--mobile-alert .commerce-panel-title { grid-column: 1; }
  .commerce-feature--threshold > div { overflow-x: auto; padding-bottom: 5px; }
  .commerce-gates > div, .commerce-boundary { grid-template-columns: 1fr; }.commerce-state dl { grid-template-columns: 1fr; }
  .commerce-dialog-body { grid-template-columns: 1fr; }.commerce-dialog-context { grid-template-columns: 1fr 1fr; }.commerce-dialog-context div:last-child { grid-column: 1/-1; }
}
@media (max-width: 520px) {
  .merchant-commerce { gap: 13px; }.commerce-hero { min-height: 0; padding: 23px 18px; border-radius: 18px; }.commerce-hero h1 { font-size: 28px; }.commerce-hero aside { grid-template-columns: 1fr; }.commerce-hero aside > * { grid-column: 1 !important; }
  .commerce-metrics, .commerce-filters { grid-template-columns: 1fr; }.commerce-filters > div, .commerce-filters output { grid-column: 1; }.commerce-filters > div .btn { flex: 1; }
  .commerce-toolbar > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.commerce-command { width: 100%; }
  .commerce-feature--spot, .commerce-feature--consignment, .commerce-feature--presale > div, .commerce-feature--fulfillment ol { grid-template-columns: 1fr; }.commerce-feature--spot .commerce-panel-title, .commerce-feature--consignment .commerce-panel-title { grid-column: 1; }.commerce-feature--presale > div > i { transform: rotate(90deg); text-align: center; }
  .commerce-feature--coupon,.commerce-feature--flash,.commerce-feature--groupbuy,.commerce-feature--points { grid-template-columns: 1fr; }.commerce-feature--coupon .commerce-panel-title,.commerce-feature--flash .commerce-panel-title,.commerce-feature--groupbuy .commerce-panel-title,.commerce-feature--points .commerce-panel-title,.commerce-feature--coupon ol,.commerce-flash-stock,.commerce-feature--groupbuy > aside,.commerce-feature--points > aside { grid-column: 1; }.commerce-group-line { grid-template-columns: 1fr; gap: 7px; }.commerce-group-line > span { width: 2px; height: 18px; justify-self: center; }
  .commerce-feature--device-alert ol,.commerce-feature--sensor aside dl,.commerce-feature--live aside,.commerce-feature--printer ol { grid-template-columns: 1fr; }
  .commerce-phone { width: 100%; min-height: 0; border-width: 5px; border-radius: 24px; }.commerce-code-custody > ol,.commerce-alert-response footer { grid-template-columns: repeat(2,minmax(0,1fr)); }.commerce-evidence-queue article { grid-template-columns: auto minmax(0,1fr); }.commerce-evidence-queue article em { grid-column: 2; }.commerce-evidence-queue footer { align-items: flex-start; flex-direction: column; }.commerce-approval-material > div { grid-template-columns: 1fr; text-align: center; }.commerce-approval-material > div i { width: 1px; height: 12px; justify-self: center; }
  .commerce-detail dl { grid-template-columns: 1fr; }.commerce-flow ol { grid-template-columns: repeat(6,112px); }.commerce-flow ol li { min-width: 112px; }
  .commerce-state { grid-template-columns: 1fr; margin: 28px auto; padding: 22px; }
  .commerce-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 16px; }.commerce-dialog-shell { max-height: calc(100vh - 16px); }.commerce-dialog-shell > header { padding: 19px 17px; }.commerce-dialog-shell > header h2 { font-size: 21px; }.commerce-dialog-context { grid-template-columns: 1fr; padding: 12px 17px; }.commerce-dialog-context div:last-child { grid-column: 1; }.commerce-dialog-body { padding: 16px 17px; }.commerce-dialog-fields { grid-template-columns: 1fr; }.commerce-dialog-feedback { padding: 10px 17px; }.commerce-dialog-shell > footer { padding: 12px 17px; }.commerce-dialog-shell > footer .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .merchant-commerce *, .commerce-dialog * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }