*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#F7F7F5;--surface:#FFFFFF;--surface2:#F0EFEC;
  --border:#E4E3DF;--border-strong:#C9C8C3;
  --text:#1C1B18;--text2:#6B6A65;--text3:#AEADA7;
  --accent:#3D7EF5;--green:#1A9468;--green-bg:#E8F5F0;
  --red:#C0392B;--red-bg:#FDECEA;--amber:#9A5E0A;--amber-bg:#FDF3E3;
  --r:12px;--r-sm:8px;
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#141413;--surface:#1E1E1C;--surface2:#272725;
    --border:#323230;--border-strong:#484742;
    --text:#EDECEA;--text2:#918F89;--text3:#57564F;
    --accent:#5B93F7;--green:#4DB88A;--green-bg:#0D3328;
    --red:#E57373;--red-bg:#3B1212;--amber:#F0B96B;--amber-bg:#3A2206;
  }
}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;padding:1.5rem 1rem 5rem;
  font-size:14px;line-height:1.5;
}
.wrap{max-width:700px;margin:0 auto}

/* ── INPUTS ── */
.field-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;display:block}
input,select{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 12px;font-size:14px;color:var(--text);font-family:inherit;outline:none;transition:border-color .15s}
input:focus,select:focus{border-color:var(--accent)}
input::placeholder{color:var(--text3)}
select{cursor:pointer}
.err{font-size:12px;color:var(--red);margin-top:5px}

/* ── MAIN APP ── */
#mainApp{display:none}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:8px}
.app-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;letter-spacing:-.2px}
.app-title svg{color:var(--accent)}
.top-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sync-badge{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:4px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.badge{font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;cursor:default;border:1px solid transparent}
.badge-locked{background:var(--amber-bg);color:var(--amber)}
.badge-admin{background:var(--green-bg);color:var(--green);cursor:pointer}

/* ── TRASH BUTTON ── */
.btn-trash{position:relative;background:var(--surface2);border:1px solid var(--border);color:var(--text2);padding:6px 10px;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;font-family:inherit;transition:all .15s}
.btn-trash:hover{background:var(--red-bg);color:var(--red);border-color:transparent}
.trash-badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 5px;min-width:16px;text-align:center;line-height:14px}

/* ── METRICS ── */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1rem}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.25rem}
.metric-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:6px}
.metric-value{font-size:26px;font-weight:700;letter-spacing:-.5px;color:var(--text)}
.metric-value.green{color:var(--green)}

/* ── CARD ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.2rem;margin-bottom:1rem}
.card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:1rem}

/* ── FORM ── */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media(max-width:460px){.row2{grid-template-columns:1fr}}
.btn-save{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:var(--r-sm);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;border:none;background:var(--accent);color:#fff;transition:opacity .15s,transform .1s;margin-top:2px}
.btn-save:hover{opacity:.88}
.btn-save:active{transform:scale(.98)}
.btn-cancel{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--r-sm);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid var(--border);background:var(--surface2);color:var(--text2);transition:all .15s;margin-top:2px}
.btn-cancel:hover{background:var(--red-bg);color:var(--red);border-color:transparent}
.ok-msg{font-size:12px;color:var(--green);margin-top:6px;min-height:18px}

/* ── LOCK ── */
.lock-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:1.5rem .5rem}
.lock-icon{font-size:30px}
.lock-h{font-size:16px;font-weight:700}
.lock-sub{font-size:13px;color:var(--text2)}
.lock-form{width:100%;max-width:240px;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.lock-form input{text-align:center;letter-spacing:2px}
.btn-login{padding:9px;border-radius:var(--r-sm);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;border:none;background:var(--accent);color:#fff}

/* ── SEARCH ── */
.search-wrap{position:relative}
.search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}
.search-wrap input{padding-left:34px}

/* ── ORDER TABLE — DESKTOP ── */
.tbl-head{display:grid;grid-template-columns:1.4fr 1.4fr 0.8fr 0.8fr 80px;gap:6px;padding:0 0 8px;border-bottom:1px solid var(--border);margin-bottom:2px}
.tbl-hcell{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3)}
.order-row{display:grid;grid-template-columns:1.4fr 1.4fr 0.8fr 0.8fr 80px;gap:6px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}
.order-row:last-child{border-bottom:none}

/* ── ORDER TABLE — MOBILE ── */
@media(max-width:520px){
  .tbl-head{display:none}
  .order-row{
    display:flex;flex-direction:column;align-items:stretch;
    gap:4px;padding:12px 0;border-bottom:1px solid var(--border);
    position:relative;
  }
  .order-row:last-child{border-bottom:none}
  .order-row > div:nth-child(4){display:none} /* hide date on mobile */
  .row-actions{
    position:absolute;top:12px;right:0;
    display:flex;gap:6px;
  }
  .order-mobile-top{display:flex;justify-content:space-between;align-items:flex-start;padding-right:80px}
  .order-mobile-ids{display:flex;flex-direction:column;gap:2px}
}

.cell{font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-dim{font-size:13px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-profit{font-size:14px;font-weight:700;color:var(--green);white-space:nowrap}
.cell-date{font-size:12px;color:var(--text3);white-space:nowrap}
.sub-note{font-size:11px;color:var(--text3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-actions{display:flex;gap:5px;align-items:center}
.btn-edit{background:transparent;border:1px solid var(--border);color:var(--text3);padding:7px 9px;font-size:13px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.btn-edit:hover{background:var(--green-bg);color:var(--green);border-color:transparent}
.btn-del{background:transparent;border:1px solid var(--border);color:var(--text3);padding:7px 9px;font-size:13px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.btn-del:hover{background:var(--red-bg);color:var(--red);border-color:transparent}
.empty{text-align:center;padding:2rem 1rem;color:var(--text3);font-size:14px}
.order-count{font-size:12px;color:var(--text3)}

/* ── PROFIT SUMMARY ── */
.summary-controls{display:flex;align-items:center;gap:8px;margin-bottom:1rem;flex-wrap:wrap}
.summary-controls select{width:auto;flex:1;min-width:90px}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.summary-item{background:var(--surface2);border-radius:var(--r-sm);padding:.9rem 1rem}
.summary-item-label{font-size:11px;color:var(--text3);font-weight:600;margin-bottom:4px}
.summary-item-val{font-size:18px;font-weight:700;color:var(--green)}
.summary-item-sub{font-size:11px;color:var(--text3);margin-top:2px}
.summary-total{background:var(--green-bg);border:1px solid var(--green);border-radius:var(--r-sm);padding:.9rem 1rem;margin-bottom:10px}
.summary-total-label{font-size:11px;color:var(--green);font-weight:600;margin-bottom:3px}
.summary-total-val{font-size:22px;font-weight:700;color:var(--green)}

/* ── EXPORT ── */
.btn-export{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid var(--border);background:var(--surface2);color:var(--text2);transition:all .15s}
.btn-export:hover{background:var(--green-bg);color:var(--green);border-color:var(--green)}

/* ── TRASH MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;width:100%;max-width:520px;max-height:85vh;display:flex;flex-direction:column;gap:1rem;overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between}
.modal-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.modal-close{background:transparent;border:1px solid var(--border);color:var(--text2);padding:4px 10px;border-radius:6px;cursor:pointer;font-size:14px;font-family:inherit;transition:all .15s}
.modal-close:hover{background:var(--red-bg);color:var(--red);border-color:transparent}
.modal-sub{font-size:12px;color:var(--text3);margin-top:-6px}
#trashList{overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.trash-row{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:.85rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.trash-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.trash-expiry{font-size:11px;color:var(--text3);margin-top:2px}
.trash-actions{display:flex;gap:6px;flex-shrink:0}
.btn-restore{padding:6px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid var(--green);background:var(--green-bg);color:var(--green);transition:all .15s}
.btn-restore:hover{opacity:.8}
.btn-perm-del{padding:6px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid var(--border);background:transparent;color:var(--red);transition:all .15s}
.btn-perm-del:hover{background:var(--red-bg);border-color:transparent}