:root{
  --cream:#FBF3E1;
  --comb:#F3E0AE;
  --amber:#C97C0C;
  --amber-dark:#8A5308;
  --bark:#3A2411;
  --bark-soft:#6E5237;
  --leaf:#4B7A4E;
  --leaf-bg:#E6EFDE;
  --line: rgba(58,36,17,0.14);
  --danger:#9B3B24;
  --danger-bg:#F6E4DE;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background: var(--cream);
  color: var(--bark);
  font-family:'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height:1.6;
  min-height:100vh;
}
h1,h2,h3{ font-family:'Zain','Cairo',sans-serif; font-weight:800; line-height:1.3; }
.wrap{ max-width: 960px; margin:0 auto; padding: 20px 16px 60px; }
[hidden]{ display:none !important; }

/* ---- Login ---- */
.login{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px;
}
.login-box{
  width:100%; max-width:380px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:28px 24px;
}
.login-box .comb-icon{ width:48px; height:48px; display:block; margin:0 auto 12px; }
.login-box h1{ font-size:24px; text-align:center; }
.login-box .sub{ text-align:center; color:var(--bark-soft); font-size:13.5px; margin-bottom:20px; }

/* ---- Header ---- */
.topbar{
  background:#fff; border-bottom:1px solid var(--line);
}
.topbar .inner{
  max-width:960px; margin:0 auto; padding:14px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.topbar .name{ font-family:'Zain','Cairo',sans-serif; font-weight:800; font-size:20px; }
.topbar .spacer{ flex:1; }
.badge{
  font-size:12px; font-weight:600; border-radius:999px; padding:3px 10px;
  background:var(--leaf-bg); color:var(--leaf);
}
.badge.is-warning{ background:var(--danger-bg); color:var(--danger); }
.badge.is-plan{ background:var(--comb); color:var(--amber-dark); }

/* ---- Tabs ---- */
.tabs{ display:flex; gap:6px; margin: 18px 0; flex-wrap:wrap; }
.tab{
  border:1px solid var(--line); background:#fff; color:var(--bark-soft);
  border-radius:999px; padding:7px 16px; font-family:'Cairo',sans-serif;
  font-size:14px; font-weight:600; cursor:pointer;
}
.tab.on{ background:var(--bark); color:#fff; border-color:var(--bark); }

/* ---- Cards & forms ---- */
.panel{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:20px; margin-bottom:18px;
}
.panel h2{ font-size:19px; margin-bottom:4px; }
.panel .hint{ color:var(--bark-soft); font-size:13px; margin-bottom:16px; }

.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
label{ display:block; font-size:13px; font-weight:600; color:var(--bark-soft); margin-bottom:5px; }
input, textarea, select{
  width:100%; font-family:'Cairo',sans-serif; font-size:14.5px; color:var(--bark);
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
input:focus, textarea:focus, select:focus{ outline:2px solid var(--amber); outline-offset:1px; }
textarea{ min-height:96px; resize:vertical; }
.field{ margin-bottom:12px; }
.field-wide{ grid-column:1 / -1; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:10px; padding:11px 18px; border:1px solid transparent;
  font-family:'Cairo',sans-serif; font-size:14.5px; font-weight:600;
  cursor:pointer; text-decoration:none; color:var(--bark); background:#fff;
}
.btn-primary{ background:var(--leaf); color:#fff; }
.btn-secondary{ background:#fff; border-color:var(--line); }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--bark-soft); padding:8px 10px; }
.btn-danger{ background:var(--danger-bg); color:var(--danger); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.btn-sm{ padding:7px 12px; font-size:13px; }

/* ---- Batch list ---- */
.batch{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; margin-bottom:12px;
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
}
.batch .main{ flex:1; min-width:200px; }
.batch .code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; color:var(--amber-dark); background:var(--comb);
  border-radius:6px; padding:2px 8px; display:inline-block;
}
.batch .title{ font-weight:600; font-size:15.5px; margin:6px 0 2px; }
.batch .meta{ font-size:13px; color:var(--bark-soft); }
.batch .stats{ font-size:12.5px; color:var(--bark-soft); margin-top:6px; }
.batch .ops{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.empty{ text-align:center; color:var(--bark-soft); padding:30px 10px; font-size:14px; }

/* ---- Modal ---- */
.modal{
  position:fixed; inset:0; background:rgba(58,36,17,.45);
  display:flex; align-items:center; justify-content:center; padding:16px; z-index:50;
}
.modal-box{
  background:#fff; border-radius:16px; padding:22px; width:100%; max-width:420px;
  max-height:90vh; overflow:auto; text-align:center;
}
.modal-box h2{ font-size:20px; margin-bottom:4px; }
.modal-box .hint{ color:var(--bark-soft); font-size:13px; margin-bottom:14px; word-break:break-all; }
#qrHolder canvas{ width:220px; height:auto; max-width:100%; }

/* ---- Messages ---- */
.msg{ border-radius:10px; padding:10px 14px; font-size:13.5px; font-weight:600; margin-bottom:14px; }
.msg-error{ background:var(--danger-bg); color:var(--danger); }
.msg-ok{ background:var(--leaf-bg); color:var(--leaf); }

/* ---- شبكة صور القطفة ---- */
.photo-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.photo-item{
  position:relative; width:92px; height:92px;
  border-radius:10px; overflow:hidden; border:1px solid var(--line);
  background: var(--comb);
}
.photo-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-item .badge-main{
  position:absolute; inset-block-start:4px; inset-inline-start:4px;
  background: var(--amber); color:#fff;
  font-size:10px; font-weight:600; border-radius:999px; padding:1px 7px;
}
.photo-item .ops-mini{
  position:absolute; inset-block-end:0; inset-inline:0;
  display:flex; background: rgba(58,36,17,.62);
}
.photo-item .ops-mini button{
  flex:1; border:none; background:none; cursor:pointer;
  color:#fff; font-size:11px; font-family:'Cairo',sans-serif; padding:4px 0;
}
.photo-item .ops-mini button:hover{ background: rgba(0,0,0,.25); }
.photo-empty{ color:var(--bark-soft); font-size:13px; }

/* ---- خيارات نمط الـQR ---- */
.qr-opts{
  display:flex; flex-wrap:wrap; gap:10px 16px;
  justify-content:center; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--line);
}
.qr-opts .chk{
  display:flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:600; color:var(--bark-soft);
  margin:0; cursor:pointer;
}
.qr-opts .chk input{ width:auto; margin:0; cursor:pointer; accent-color: var(--amber); }
.qr-opts #qrCapText{ width:100%; font-size:13px; padding:8px 10px; }

/* صندوق تحميل/طباعة الستيكرات داخل نافذة الـQR */
.modal .lbl-box{
  margin-top:16px; padding-top:14px;
  border-top:1px dashed var(--line, #e6dccb);
  text-align:center;
}
.modal .lbl-box .hint{ margin:0 0 8px; overflow-wrap:normal; }
.modal .lbl-box .btn-row{ margin-bottom:6px; flex-wrap:wrap; }
.modal .lbl-box #lblMsg{ margin:6px 0 0; min-height:18px; }

/* قائمة المستخدمين المربوطين في لوحة المشغّل */
.batch .member{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:2px 4px 2px 10px; margin-inline-end:6px;
}
.batch .member .btn{ padding:2px 8px; font-size:12px; }

/* تبويب مقفول لما النحال يوصل لحد القطفات */
.tab.is-off{ opacity:.55; }
#quotaMsg{ margin:0 0 14px; }

/* ربط حساب موجود بمنحل (لوحة المشغّل) */
.batch .linkbox{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px;
}
.batch .linkbox input{
  flex:1 1 240px; min-width:0; padding:8px 12px; font-size:14px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  font-family:inherit; color:var(--bark);
}
.batch .linkbox input:focus{ outline:2px solid rgba(201,124,12,.35); outline-offset:1px; }