.variant-editor {
  padding:20px;
  border-color:rgba(99,102,241,.13);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(249,248,255,.92));
  box-shadow:0 14px 34px rgba(45,49,92,.055);
}
.variant-editor-head { align-items:flex-start; margin-bottom:17px; }
.variant-editor-head p { margin-top:4px; color:#8a8fa1; font-size:11px; }
.variant-identity-grid { display:grid; grid-template-columns:1.15fr .9fr repeat(3,1fr); gap:12px; margin-bottom:15px; }
.variant-identity-grid label,.unit-flow-grid label,.stock-entry-grid label,.stock-conversion-card>label {
  display:block; color:#4e5367; font-size:11px; font-weight:650;
}
.variant-identity-grid input,.unit-flow-grid input,.unit-flow-grid select,.stock-entry-grid input,.stock-conversion-card>label input { margin-top:7px; font-weight:500; }
.barcode-entry-tips { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px 12px; margin:-3px 0 15px; padding:12px 14px; border:1px solid rgba(88,101,232,.14); border-radius:13px; background:linear-gradient(135deg,rgba(244,246,255,.92),rgba(250,248,255,.9)); color:#74778a; font-size:9px; line-height:1.55; }
.barcode-entry-tips > strong { grid-column:1/-1; display:flex; align-items:center; gap:7px; color:#555dc4; font-size:10px; }
.barcode-entry-tips > strong .icon { width:14px; height:14px; }
.barcode-entry-tips span b { color:#484b5e; }
.unit-flow { display:grid; grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr); align-items:stretch; gap:10px; }
.unit-flow-card { min-width:0; padding:16px; border:1px solid rgba(99,102,241,.13); border-radius:16px; background:rgba(255,255,255,.82); }
.purchase-card { background:linear-gradient(145deg,rgba(245,243,255,.9),rgba(255,255,255,.94)); }
.sale-card { background:linear-gradient(145deg,rgba(237,253,247,.72),rgba(255,255,255,.94)); }
.unit-flow-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.unit-flow-head strong { color:#24283a; font-size:13px; }
.unit-flow-head p { margin-top:3px; color:#858b9d; font-size:10px; line-height:1.45; }
.unit-flow-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:11px; color:#6f5ce8; background:#eeeafd; font-size:9px; font-weight:800; letter-spacing:.4px; }
.sale-card .unit-flow-icon { color:#07866a; background:#e5f8f1; }
.unit-preset-panel { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-2px 0 13px; padding:10px 11px; border:1px solid rgba(99,102,241,.12); border-radius:12px; background:rgba(255,255,255,.72); }
.unit-preset-panel>div:first-child { display:flex; min-width:120px; flex-direction:column; gap:2px; }
.unit-preset-panel strong { color:#4f5570; font-size:10px; }
.unit-preset-panel span { color:#8a8fa1; font-size:8px; line-height:1.4; }
.unit-preset-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.unit-preset { min-height:31px; padding:6px 10px; border:1px solid rgba(99,102,241,.15); border-radius:9px; color:#61677e; background:#fff; font:inherit; font-size:9px; font-weight:700; cursor:pointer; transition:border-color .18s ease,color .18s ease,background .18s ease,box-shadow .18s ease; }
.unit-preset:hover { border-color:rgba(99,102,241,.4); color:#554dcc; }
.unit-preset.active { border-color:rgba(99,102,241,.25); color:#5449ce; background:#eeefff; box-shadow:0 5px 13px rgba(83,72,190,.1); }
.unit-flow-card [hidden],.stock-entry-grid [hidden] { display:none!important; }
.unit-flow-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.unit-flow-primary { margin-bottom:11px; }
.middle-toggle { display:flex!important; align-items:flex-start; gap:10px; margin:2px 0 11px; padding:11px 12px; border:1px solid rgba(99,102,241,.15); border-radius:12px; background:rgba(255,255,255,.76); cursor:pointer; }
.middle-toggle input { width:17px; height:17px; flex:0 0 17px; margin:1px 0 0!important; accent-color:#6257dc; }
.middle-toggle span { display:flex; min-width:0; flex-direction:column; gap:3px; }
.middle-toggle strong { color:#424860; font-size:10px; }
.middle-toggle small { color:#888ea0; font-size:9px; line-height:1.45; }
.direct-conversion { margin-top:2px; }
.direct-conversion>label { display:block; color:#4e5367; font-size:11px; font-weight:650; }
.direct-conversion input { margin-top:7px; }
.middle-conversion { margin-top:2px; padding:12px; border:1px solid rgba(99,102,241,.16); border-radius:13px; background:linear-gradient(135deg,rgba(239,240,255,.78),rgba(250,253,255,.92)); }
.middle-conversion-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.middle-conversion-head span { color:#7167d1; font-size:8px; font-weight:800; letter-spacing:.7px; }
.middle-conversion-head strong { color:#4c5268; font-size:10px; }
.unit-level-warning { margin:10px 0 0; padding:10px 12px; border:1px solid rgba(225,74,91,.2); border-radius:11px; color:#a33b49; background:#fff2f4; font-size:9px; font-weight:650; line-height:1.55; }
.unit-level-warning[hidden] { display:none!important; }
.three-level-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.three-level-grid label:first-child { grid-column:1/-1; }
.unit-flow-grid label:last-child:nth-child(odd) { grid-column:1/-1; }
.rupiah-input { display:flex; align-items:center; min-height:43px; margin-top:7px; overflow:hidden; border:1px solid rgba(99,102,241,.14); border-radius:11px; background:#fff; transition:border-color .18s ease,box-shadow .18s ease; }
.rupiah-input:focus-within { border-color:rgba(99,102,241,.52); box-shadow:0 0 0 3px rgba(99,102,241,.08); }
.rupiah-input b { flex:none; padding-left:13px; color:#5e53c5; font-size:13px; font-weight:700; }
.rupiah-input input { min-width:0; margin:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; padding-left:4px!important; }
.unit-flow-summary { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:13px; padding:10px 11px; border-radius:11px; color:#656176; background:rgba(120,92,230,.075); font-size:10px; }
.unit-flow-summary strong { color:#5d4bd0; font-size:11px; text-align:right; }
.sale-summary { background:rgba(16,185,129,.075); }
.sale-summary strong { color:#087f65; }
.sale-summary strong.negative { color:#c54d5c; }
.package-sale-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:9px; }
.package-sale-summary>div { min-width:0; padding:10px; border:1px solid rgba(99,102,241,.12); border-radius:11px; background:rgba(255,255,255,.78); }
.package-sale-summary small { display:block; color:#7b8295; font-size:9px; line-height:1.35; }
.package-sale-summary strong { display:block; margin-top:4px; color:#3f4660; font-size:11px; overflow-wrap:anywhere; }
.package-sale-summary strong.negative { color:#c54d5c; }
.sale-simulation { display:grid; grid-template-columns:minmax(125px,.48fr) minmax(0,1fr); align-items:end; gap:8px 10px; margin-top:10px; padding:11px; border-radius:12px; background:linear-gradient(135deg,rgba(111,92,232,.09),rgba(16,185,129,.07)); }
.sale-simulation label { color:#60667b; font-size:9px; font-weight:700; }
.sale-simulation input { margin-top:5px; }
.sale-simulation p { display:flex; min-width:0; align-self:center; flex-direction:column; align-items:flex-end; gap:4px; color:#596078; font-size:10px; line-height:1.4; text-align:right; }
.sale-simulation p strong { color:#5d4bd0; font-size:13px; white-space:nowrap; }
.unit-flow-arrow { display:grid; place-items:center; align-self:center; width:34px; height:34px; border:1px solid rgba(99,102,241,.13); border-radius:50%; color:#7062d7; background:#fff; box-shadow:0 7px 18px rgba(76,63,162,.10); font-size:17px; }
.stock-conversion-card { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(0,1.5fr); align-items:center; gap:15px; margin-top:12px; padding:14px 15px; border:1px solid rgba(16,185,129,.15); border-radius:15px; background:rgba(245,253,250,.78); }
.stock-conversion-copy strong { color:#263d38; font-size:12px; }
.stock-conversion-copy p { margin-top:4px; color:#7c918c; font-size:10px; line-height:1.5; }
.stock-entry-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:end; gap:10px; }
.stock-total { display:flex; min-height:57px; flex-direction:column; justify-content:center; padding:9px 12px; border:1px solid rgba(16,185,129,.17); border-radius:11px; background:#fff; }
.stock-total small { color:#7c918c; font-size:9px; text-transform:uppercase; letter-spacing:.35px; }
.stock-total strong { margin-top:4px; color:#087f65; font-size:13px; }
.stock-conversion-card>label { min-width:0; }
.stock-conversion-card>label+label { margin-left:0; }
.stock-conversion-card:has(>label) { grid-template-columns:minmax(180px,.7fr) minmax(150px,.5fr) minmax(150px,.5fr); }
.stock-current-modern { padding:13px 15px; border-color:rgba(99,102,241,.14); background:linear-gradient(135deg,rgba(244,242,255,.9),rgba(247,253,251,.9)); }
.stock-current-modern b { color:#5045b8; }
.stock-current-modern small { color:#81879a; font-weight:500; }
.stock-adjust-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; gap:11px; padding:14px; border:1px solid rgba(99,102,241,.13); border-radius:15px; background:linear-gradient(145deg,rgba(248,247,255,.95),rgba(245,253,250,.86)); }
.stock-adjust-grid label { color:#4e5367; font-size:11px; font-weight:650; }
.stock-adjust-grid [hidden] { display:none !important; }
.stock-adjust-grid [hidden] + label + .stock-adjust-result { grid-column:1 / -1; }
.stock-adjust-grid input,.stock-adjust-grid select { margin-top:7px; }
.stock-adjust-result { display:flex; min-height:58px; flex-direction:column; justify-content:center; padding:9px 12px; border:1px solid rgba(99,102,241,.14); border-radius:11px; background:#fff; }
.stock-adjust-result small { color:#7d8397; font-size:9px; text-transform:uppercase; letter-spacing:.35px; }
.stock-adjust-result strong { margin-top:3px; color:#5d4bd0; font-size:14px; }
.stock-adjust-result span { margin-top:3px; color:#718078; font-size:9px; line-height:1.35; }

@media(max-width:1050px){
 .unit-flow { grid-template-columns:1fr; }
 .unit-flow-arrow { transform:rotate(90deg); justify-self:center; margin:-2px 0; }
 .stock-entry-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px){
 .variant-editor { padding:15px; }
 .variant-identity-grid,.unit-flow-grid,.three-level-grid { grid-template-columns:1fr; }
 .three-level-grid label:first-child { grid-column:auto; }
 .barcode-entry-tips { grid-template-columns:1fr; }
 .unit-flow-grid label:last-child:nth-child(odd) { grid-column:auto; }
 .stock-conversion-card,.stock-conversion-card:has(>label) { grid-template-columns:1fr; }
 .package-sale-summary,.sale-simulation { grid-template-columns:1fr; align-items:start; }
 .stock-adjust-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .unit-preset-panel { align-items:stretch; flex-direction:column; }
 .unit-preset-actions { display:grid; grid-template-columns:1fr; }
}
@media(max-width:430px){ .stock-entry-grid,.stock-adjust-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce){ .unit-flow-arrow { transition:none; } }