/* ================= Veyora Admin — design system ================= */
:root{
  --bg:#f8f8f7;
  --panel:#ffffff;
  --card:#ffffff;
  --ink:#1c1a17;
  --ink-2:#4a463f;
  --muted:#8a857c;
  --line:#ebeae7;
  --line-2:#f2f1ee;
  --head:#f6e9d8;          /* table header peach */
  --accent:#3273b8;        /* blue accent */
  --accent-soft:#e3eefb;
  --dark:#1a1815;          /* dark buttons */
  --green:#2e8b4f;
  --green-soft:#dcf3e1;
  --yellow-soft:#fdeeca;
  --yellow-ink:#96690a;
  --red:#c8402e;
  --red-soft:#fbe2dd;
  --blue:#2f6fb4;
  --blue-soft:#e3eefb;
  --gray-badge:#e8e6e1;
  --radius:12px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(28,24,16,.05),0 4px 18px rgba(28,24,16,.05);
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);font-size:14px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:13px;color:var(--ink)}
::placeholder{color:#b4aea3}

/* ================= Brand ================= */
.brand-logo{font-family:'Marcellus',Georgia,serif;font-size:26px;letter-spacing:4px;font-weight:400;color:var(--ink);white-space:nowrap;user-select:none}
.brand-reg{font-size:9px;vertical-align:top;letter-spacing:0}

/* ================= Login ================= */
.login-screen{display:flex;min-height:100vh;background:#efeae0}
.login-photos{flex:1.6;display:flex;min-width:0}
.login-photo{flex:1;position:relative;overflow:hidden}
.photo-a{background:linear-gradient(180deg,#cfc8bf 0%,#b7ada1 55%,#9c9083 100%)}
.photo-a .photo-drape{position:absolute;inset:0;background:
  radial-gradient(120px 340px at 20% 30%,rgba(255,255,255,.55),transparent 70%),
  radial-gradient(160px 420px at 55% 20%,rgba(255,255,255,.35),transparent 70%),
  radial-gradient(200px 500px at 85% 45%,rgba(255,255,255,.3),transparent 75%)}
.photo-b{background:#141210}
.photo-b .photo-light{position:absolute;inset:0;background:radial-gradient(60% 45% at 62% 38%,rgba(233,196,150,.18),transparent 70%)}
.photo-figures{position:absolute;inset:0}
.photo-figures svg{width:100%;height:100%}
.login-panel{flex:1;background:#f7f4ec;display:flex;align-items:center;justify-content:center;padding:48px}
.login-panel-inner{width:100%;max-width:330px}
.login-logo{font-size:24px;margin-bottom:34px}
.login-welcome{font-size:10px;letter-spacing:3px;color:var(--muted);margin-bottom:10px}
.login-title{font-size:30px;font-weight:600;letter-spacing:.2px;margin-bottom:6px}
.login-sub{font-size:12.5px;color:var(--muted);margin-bottom:30px}
.login-label{display:block;font-size:10px;letter-spacing:2px;color:#6d675d;margin-bottom:6px;font-weight:500}
.login-input{width:100%;border:none;border-bottom:1px solid #c9c2b4;background:transparent;padding:8px 2px 10px;font-size:14px;outline:none;transition:border-color .15s}
.login-input:focus{border-bottom-color:var(--ink)}
#login-email{margin-bottom:26px}
.login-pass-row{display:flex;align-items:center;justify-content:space-between}
.login-forgot{font-size:11.5px;color:#5b4a9e;text-decoration:none}
.login-forgot:hover{text-decoration:underline}
.login-pass-wrap{position:relative}
.login-pass-wrap .login-input{padding-right:34px}
.login-eye{position:absolute;right:2px;top:50%;transform:translateY(-50%);background:none;border:none;color:#9a9488;padding:4px}
.login-eye:hover{color:var(--ink)}
.login-submit{width:100%;margin-top:34px;background:var(--dark);color:#f5efe4;border:none;border-radius:6px;padding:13px;font-size:11.5px;letter-spacing:3px;font-weight:500;transition:opacity .15s}
.login-submit:hover{opacity:.88}
.login-footer{margin-top:56px;font-size:8.5px;letter-spacing:2.5px;color:#c6c1b3;text-align:center}
@media(max-width:900px){.login-photos{display:none}}

/* ================= App shell ================= */
.app{display:flex;min-height:100vh}
.sidebar{width:250px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar-logo{padding:28px 24px 22px;font-size:24px}
.side-nav{flex:1;padding:6px 14px 18px;display:flex;flex-direction:column}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:var(--ink-2);font-size:13.5px;text-decoration:none;position:relative;border:none;background:none;width:100%;text-align:left}
.nav-item:hover{background:#f6f2ea}
.nav-item.active{color:var(--ink);font-weight:600}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;background:var(--ink);border-radius:2px}
.nav-item .nav-ico{display:flex;color:#6f6a60}
.nav-item.active .nav-ico{color:var(--ink)}
.nav-item .nav-caret{margin-left:auto;color:#9d978b;transition:transform .15s}
.nav-item.open .nav-caret{transform:rotate(90deg)}
.nav-sub{overflow:hidden;display:none;flex-direction:column;padding-left:14px}
.nav-sub.open{display:flex}
.nav-sub .nav-item{font-size:13px;padding:9px 12px}
.nav-logout{margin-top:auto;border-top:1px solid var(--line-2);padding-top:12px}
.sidebar-gif{display:block;width:100%;margin:16px 0 0;border-radius:12px;object-fit:cover;aspect-ratio:16/10}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:64px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 26px;position:sticky;top:0;z-index:40}
.topbar-spacer{flex:1}
.bell-btn{position:relative;background:none;border:none;color:var(--ink-2);display:flex;padding:6px;border-radius:8px}
.bell-btn:hover{background:#f4f0e8}
.bell-badge{position:absolute;top:0;right:0;background:var(--accent);color:#fff;font-size:9px;font-weight:600;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.topbar-user{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:#e9b944;color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;overflow:hidden;flex-shrink:0}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.topbar-user-name{font-size:12.5px;font-weight:600}
.topbar-user-role{font-size:10.5px;color:var(--muted)}
.content{flex:1;padding:28px 32px 70px;background:var(--bg)}

/* ================= Generic page bits ================= */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-title{font-size:21px;font-weight:600}
.page-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.page-head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.card-pad{padding:22px}
.card + .card{margin-top:16px}
.card-title{font-size:14px;font-weight:600;margin-bottom:14px}
.section-label{font-size:10.5px;letter-spacing:1.5px;color:var(--muted);font-weight:600;margin:22px 0 10px}
.section-label:first-child{margin-top:0}
.muted{color:var(--muted)}
.small{font-size:11.5px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
@media(max-width:1200px){.g6{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.g6,.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2{grid-template-columns:1fr}}

/* ================= Buttons ================= */
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:13px;font-weight:500;padding:9px 16px;transition:all .12s;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:#d5cfc2;background:#faf8f3}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-dark{background:var(--dark);border-color:var(--dark);color:#f7f2e7}
.btn-dark:hover{background:#332f28;border-color:#332f28}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{background:#28619e}
.btn-danger{color:var(--red);border-color:#eccfc9}
.btn-danger:hover{background:var(--red-soft)}
.btn-sm{padding:5px 10px;font-size:11.5px;border-radius:7px}
.btn-lg{padding:11px 20px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;border:none;background:none;color:#77726a;transition:all .1s}
.icon-btn:hover{background:#f1ede4;color:var(--ink)}
.icon-btn.danger{color:#c8695c}
.icon-btn.danger:hover{background:var(--red-soft);color:var(--red)}
.icon-btn.warn{color:#d0913a}

/* ================= Chips / filters ================= */
.chip-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 16px;font-size:12.5px;color:var(--ink-2);transition:all .12s;white-space:nowrap}
.chip:hover{border-color:#cfc9bb}
.chip.active{background:var(--dark);border-color:var(--dark);color:#fff}
.chip.accent.active{background:var(--accent);border-color:var(--accent)}
.chip.accent-outline{border-color:#b9d2ee;color:var(--accent)}
.chip.accent-outline.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ================= Inputs ================= */
.input,.select{border:1px solid var(--line);border-radius:9px;background:#fff;padding:9px 13px;outline:none;min-width:0}
.input:focus,.select:focus{border-color:#c9c1af}
.select{appearance:auto}
.search-wrap{position:relative}
.search-wrap .input{padding-left:34px;background:#f6efe4;border-color:#f0e7d7;width:280px}
.search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#a89f8f}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>label{font-size:11px;font-weight:500;color:var(--ink-2)}
.field .hint{font-size:10.5px;color:var(--muted)}
.fieldset-outline{border:1px solid var(--line);border-radius:10px;padding:6px 10px 8px;position:relative;background:#fff}
.fieldset-outline>label{position:absolute;top:-7px;left:10px;background:#fff;padding:0 5px;font-size:10px;color:var(--muted);border-radius:4px;white-space:nowrap}
.fieldset-outline input,.fieldset-outline select{border:none;padding:4px 2px;width:100%;min-width:0;background:transparent;outline:none;font-size:13px}
textarea.input{resize:vertical;min-height:80px}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.checkbox-row input{width:15px;height:15px;accent-color:var(--dark)}

/* ================= Tables ================= */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line-2)}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff}
.tbl thead th{background:var(--head);text-align:left;font-weight:500;color:#6b5f4b;font-size:12px;padding:12px 16px;white-space:nowrap}
.tbl thead th.sortable{cursor:pointer;user-select:none}
.tbl tbody td{padding:14px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr.clickable{cursor:pointer}
.tbl tbody tr.clickable:hover{background:#fbf8f2}
.tbl .empty-cell{text-align:center;color:var(--muted);padding:56px 10px;font-size:13px}
.tbl .num{text-align:right}
.cell-main{font-weight:500}
.cell-sub{font-size:11px;color:var(--muted);margin-top:2px}
.row-actions{display:flex;gap:2px;align-items:center}

/* ================= Badges ================= */
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 11px;font-size:11px;font-weight:500;white-space:nowrap}
.badge.gray{background:var(--gray-badge);color:#5c584f}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.yellow{background:var(--yellow-soft);color:var(--yellow-ink)}
.badge.red{background:var(--red-soft);color:var(--red)}
.badge.blue{background:var(--blue-soft);color:var(--blue)}
.badge.orange{background:#fde4d3;color:#c05315}
.badge.dark{background:var(--dark);color:#fff}
.badge.outline{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}

/* ================= Pagination ================= */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.pager-pages{display:flex;gap:4px;align-items:center}
.pg-btn{min-width:28px;height:28px;border-radius:8px;border:none;background:none;font-size:12px;color:var(--ink-2);display:flex;align-items:center;justify-content:center;padding:0 6px}
.pg-btn:hover{background:#f1ede4}
.pg-btn.current{background:#eee9df;font-weight:600;color:var(--ink)}
.pg-btn:disabled{opacity:.35}

/* ================= Modal ================= */
.modal-overlay{position:fixed;inset:0;background:rgba(24,20,14,.45);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;z-index:100;overflow-y:auto}
.modal{background:#fff;border-radius:16px;box-shadow:0 22px 60px rgba(20,16,10,.25);width:100%;max-width:560px;animation:mpop .16s ease}
.modal.wide{max-width:760px}
.modal.xwide{max-width:960px}
@keyframes mpop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 0}
.modal-title{font-size:15.5px;font-weight:600}
.modal-x{background:none;border:none;color:var(--muted);font-size:20px;line-height:1;padding:4px}
.modal-x:hover{color:var(--ink)}
.modal-body{padding:16px 22px 22px;display:flex;flex-direction:column;gap:14px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:0 22px 20px}

/* ================= Drawer ================= */
.drawer-overlay{position:fixed;inset:0;background:rgba(24,20,14,.35);z-index:100}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,92vw);background:#fff;box-shadow:-14px 0 40px rgba(0,0,0,.18);z-index:101;display:flex;flex-direction:column;animation:dslide .18s ease}
@keyframes dslide{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px}
pre.payload{background:#faf7f0;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:11px;overflow-x:auto;font-family:ui-monospace,Consolas,monospace}

/* ================= Toast ================= */
#toast-root{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--dark);color:#f6f1e6;padding:11px 18px;border-radius:10px;font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:mpop .18s ease}
.toast.err{background:#8e2f1f}

/* ================= Tabs ================= */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tab{background:none;border:none;padding:9px 15px;font-size:12.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}

/* ================= Dashboard ================= */
.range-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:18px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px 18px;min-width:0}
.stat-label{font-size:10px;letter-spacing:1px;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:6px;text-transform:uppercase}
.stat-value{font-size:24px;font-weight:600;margin-top:9px}
.stat-note{font-size:10.5px;color:var(--muted);margin-top:5px}
.mini-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.mini-tbl th{background:var(--head);color:#6b5f4b;font-weight:500;text-align:left;padding:7px 10px}
.mini-tbl th:last-child{text-align:right}
.mini-tbl td{padding:7px 10px;border-bottom:1px solid var(--line-2)}
.mini-tbl td:last-child{text-align:right}
.status-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px}
.status-bar-track{flex:1;height:7px;border-radius:5px;background:#f0ebe0;overflow:hidden}
.status-bar-fill{height:100%;border-radius:5px}
.date-note{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}

/* ================= Dashboard compact mode ================= */
.dash .page-head{margin-bottom:12px}
.dash .range-bar{margin-bottom:12px;padding:8px 10px}
.dash .range-bar .chip{padding:6px 13px;font-size:12px}
.dash .grid{gap:10px}
.dash .stat-card{padding:12px 14px}
.dash .stat-label{font-size:9px}
.dash .stat-value{font-size:19px;margin-top:5px}
.dash .stat-note{font-size:9.5px;margin-top:3px}
.dash .section-label{margin:14px 0 8px}
.dash .card-pad{padding:14px 16px}
.dash .card-title{margin-bottom:8px;font-size:13px}
.dash .mini-tbl th,.dash .mini-tbl td{padding:5px 10px}
.dash .status-bar-row{margin-bottom:6px;font-size:11.5px}

/* ================= Tasks ================= */
.tasks-layout{display:grid;grid-template-columns:290px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.tasks-layout{grid-template-columns:1fr}}
.task-item{padding:12px 14px;border-bottom:1px solid var(--line-2);cursor:pointer;border-left:3px solid transparent}
.task-item:hover{background:#fbf8f2}
.task-item.sel{border-left-color:var(--ink);background:#faf6ee}
.task-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);padding:110px 20px;text-align:center;font-size:13px}
.tasks-layout>.card{min-height:420px}
.thread{display:flex;flex-direction:column;gap:10px;padding:6px 2px;max-height:420px;overflow-y:auto}
.msg{max-width:82%;border-radius:12px;padding:9px 13px;font-size:12.5px;background:#f4efe6}
.msg.mine{align-self:flex-end;background:var(--dark);color:#f4efe6}
.msg .msg-meta{font-size:10px;opacity:.65;margin-top:4px}

/* ================= Order collection ================= */
.order-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1000px){.order-cards{grid-template-columns:repeat(2,1fr)}}
.scan-hero{display:flex;flex-direction:column;align-items:center;gap:12px;padding:56px 20px;text-align:center}
.scan-hero .scan-title{font-weight:600;font-size:15px}
.scan-hero .scan-warn{color:var(--red);font-size:11.5px}
.progress{height:7px;background:#efe9dd;border-radius:5px;overflow:hidden;min-width:90px}
.progress>span{display:block;height:100%;background:var(--green);border-radius:5px;transition:width .2s}
.progress.full>span{background:var(--green)}
.scan-input-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.scan-input-row .input{flex:1;min-width:200px;font-size:15px;padding:11px 14px}
.count-circle{width:26px;height:26px;border-radius:50%;border:2px solid #cfc8b8;background:#fff;color:var(--ink-2);font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.count-circle:hover{border-color:var(--ink)}
.info-banner{display:flex;gap:10px;background:var(--blue-soft);border:1px solid #cfe0f4;border-radius:10px;padding:11px 14px;font-size:12px;color:#2b4d74;align-items:flex-start}
.note-banner{background:#eef4fb;border:1px solid #d7e5f5;border-left:3px solid var(--accent);border-radius:10px;padding:12px 16px;font-size:12.5px;color:#3c5673}
.dashed-banner{background:#fbf7ee;border:1.5px dashed #e3d9c4;border-radius:12px;padding:13px 16px;font-size:12.5px;color:#6a604d}

/* ================= Leads ================= */
.stars{display:inline-flex;gap:2px;color:#e0a72e;font-size:14px}
.timeline{display:flex;flex-direction:column;gap:0;margin-top:6px}
.tl-item{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--line);margin-left:6px}
.tl-item:last-child{border-left-color:transparent}
.tl-item::before{content:"";position:absolute;left:-6px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--accent)}

/* ================= Suitcases ================= */
.agent-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.agent-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px;cursor:pointer;transition:all .12s}
.agent-card:hover{border-color:#c2c0ba;box-shadow:var(--shadow)}
.agent-card>.flex{flex-wrap:nowrap}
.agent-card>.flex>div:last-child{min-width:0}
.agent-card .cell-main{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.tray-grid{display:grid;gap:8px;margin-top:10px}
.tray-grid.s6{grid-template-columns:repeat(6,1fr)}
.tray-grid.s12{grid-template-columns:repeat(6,1fr)}
.tray-grid.s15{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.tray-grid.s6,.tray-grid.s12{grid-template-columns:repeat(3,1fr)}.tray-grid.s15{grid-template-columns:repeat(3,1fr)}}
.slot{border:1.5px dashed #ddd5c4;border-radius:9px;min-height:74px;padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#fdfbf6;text-align:center}
.slot.filled{border-style:solid;border-color:var(--line)}
.slot input{border:none;background:transparent;width:100%;text-align:center;font-size:10.5px;outline:none}
.slot .slot-color{font-size:9.5px;color:var(--muted)}

/* ================= Product ================= */
.prod-thumb{width:44px;height:30px;object-fit:contain;display:block}
.thumb-box{width:52px;height:36px;border:1px solid var(--line-2);border-radius:7px;background:#fbfaf6;display:flex;align-items:center;justify-content:center;overflow:hidden}
.img-drop{width:84px;height:84px;border-radius:10px;background:#efece4;display:flex;align-items:center;justify-content:center;color:#9a9384;cursor:pointer;border:1px solid var(--line)}
.img-drop:hover{background:#e9e4d8}
.variation-row{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fdfcf9}
.price-cards{display:flex;gap:12px;flex-wrap:wrap}
.price-card{border:1px solid var(--line);border-radius:12px;padding:14px 22px;text-align:center;min-width:150px;background:linear-gradient(180deg,#fdfcf9,#f6f3ec)}
.price-card .cur{font-size:10px;letter-spacing:1.5px;color:var(--muted)}
.price-card .val{font-size:19px;font-weight:600;margin-top:5px}
.price-card .sale{font-size:11px;color:var(--green);margin-top:4px}

/* ================= Misc ================= */
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:12.5px}
.kv dt{color:var(--muted)}
.kv dd{font-weight:500}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}
.divider{height:1px;background:var(--line-2);margin:16px 0}
.right{margin-left:auto}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.flex-col{display:flex;flex-direction:column;gap:10px}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.link{color:var(--blue);text-decoration:none;cursor:pointer}
.link:hover{text-decoration:underline}
.back-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink-2)}
.back-btn:hover{background:#f6f2ea}
.money-green{color:var(--green);font-weight:600}
.tag-pill{display:inline-block;background:#f1ede3;border-radius:6px;padding:2px 8px;font-size:10.5px;color:#6e675a;margin:1px}
.upload-zone{border:1.5px dashed #d8d0bd;border-radius:12px;padding:22px;text-align:center;color:var(--muted);cursor:pointer;background:#fdfbf6;font-size:12.5px}
.upload-zone:hover{border-color:var(--ink);color:var(--ink)}
.step-dot{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

/* ================= Mobile ================= */
.menu-btn{display:none;background:none;border:none;color:var(--ink);padding:6px;border-radius:8px;align-items:center}
.topbar-logo{display:none;font-size:19px;letter-spacing:3px}
.sidebar-overlay{position:fixed;inset:0;background:rgba(22,18,12,.45);z-index:88}

@media(max-width:900px){
  /* --- drawer sidebar --- */
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;z-index:90;
    transform:translateX(-105%);transition:transform .22s ease;box-shadow:14px 0 40px rgba(0,0,0,.16)}
  .sidebar.open{transform:none}
  .menu-btn{display:inline-flex}
  .topbar-logo{display:block}
  .topbar{padding:0 14px;gap:10px;height:58px}
  .topbar-user-meta{display:none}

  /* --- layout / spacing --- */
  .content{padding:16px 14px 90px}
  .page-head{margin-bottom:14px;gap:10px}
  .page-title{font-size:18px}
  .card-pad{padding:15px}
  .search-wrap,.search-wrap .input{width:100%}
  .flex>.input,.flex>.select{flex:1 1 140px}
  .fieldset-outline{flex:1 1 45%}
  .scan-input-row .input{min-width:0;flex:1 1 100%}
  .order-cards{grid-template-columns:repeat(2,1fr);gap:9px}
  .two-col{gap:10px}
  .tasks-layout{gap:10px}
  .tasks-layout>.card{min-height:0}
  .task-empty{padding:48px 16px}
  .agent-cards{grid-template-columns:1fr 1fr}
  .price-cards{gap:8px}
  .price-card{flex:1;min-width:0;padding:12px}
  .kv{grid-template-columns:120px 1fr}

  /* --- touch targets & iOS zoom guard --- */
  input,select,textarea{font-size:16px}
  .icon-btn{width:36px;height:36px}
  .btn{padding:10px 16px}
  .chip{padding:8px 15px}
  .pg-btn{min-width:32px;height:32px}

  /* --- modals & drawers --- */
  .modal-overlay{padding:10px;align-items:flex-end}
  .modal{max-width:100%;border-radius:16px 16px 12px 12px}
  .modal-body{max-height:70vh;overflow-y:auto}
  .drawer{width:100vw}

  /* --- dashboard --- */
  .dash .grid{gap:8px}
  .range-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .range-bar .chip{flex-shrink:0}
  .dash .grid[style*="2fr 1fr"]{grid-template-columns:1fr!important}
}

/* --- card-style tables on small screens --- */
@media(max-width:820px){
  .table-wrap{border:none;overflow:visible}
  .tbl thead{display:none}
  .tbl,.tbl tbody{display:block;width:100%}
  .tbl tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
    margin-bottom:10px;padding:6px 0;box-shadow:0 1px 2px rgba(28,24,16,.04)}
  .tbl tbody tr:last-child{margin-bottom:0}
  .tbl tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:8px 14px;border-bottom:1px solid var(--line-2);text-align:right}
  .tbl tbody tr td:last-child{border-bottom:none}
  .tbl tbody td[data-label]::before{content:attr(data-label);font-size:10px;font-weight:600;
    letter-spacing:.8px;text-transform:uppercase;color:var(--muted);text-align:left;flex-shrink:0}
  .tbl tbody td:not([data-label]){justify-content:flex-end}
  .tbl td.empty-cell{display:block;text-align:center;border:none}
  .tbl td[colspan]{display:block;text-align:left}
  .tbl .row-actions{justify-content:flex-end}
  .cell-main{text-align:right}
  .tbl td .cell-sub{text-align:right}
  /* keep the tiny dashboard country tables as real tables */
  .mini-tbl thead{display:table-header-group}
}

/* --- iOS focus-zoom guard: every focusable text control >= 16px on mobile --- */
@media(max-width:900px){
  .login-input,.input,.select,textarea.input,
  .fieldset-outline input,.fieldset-outline select,
  .search-wrap .input,.scan-input-row .input,.slot input{font-size:16px}
}