:root{
  --bg:#f1f5f9;
  --panel:#ffffff;
  --panel2:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --border:#dbeafe;
  --border2:#e5e7eb;
  --shadow:0 14px 34px rgba(2,6,23,.12);

  --primary:#2563eb;
  --primary2:#1d4ed8;
  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;

  --radius:20px;
}

[data-theme="dark"]{
  --bg:#0b1220;
  --panel:#0f172a;
  --panel2:#0b1220;
  --text:#e5e7eb;
  --muted:#93a4b8;
  --border:#1e3a8a;
  --border2:#23314f;
  --shadow:0 14px 34px rgba(0,0,0,.5);

  --primary:#60a5fa;
  --primary2:#3b82f6;
  --good:#34d399;
  --warn:#fbbf24;
  --bad:#fb7185;
}

*{ box-sizing:border-box; }

/* ===== Base layout (prevents left-empty / sideways scroll) ===== */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  padding:20px;
  font-family:Tahoma, sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(34,197,94,.16), transparent 55%),
    var(--bg);
  color:var(--text);
  font-size:18px;
  overflow-x: hidden !important;

  /* center the main card in RTL/LTR */
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.card{
  width:min(1040px, 100%);
  margin-inline:auto;
  min-width:0;
  overflow-x:hidden;

  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.55)),
    var(--panel);
  border:1px solid var(--border2);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:18px;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    var(--panel);
}

/* ===== Topbar ===== */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

h2{ margin:0; font-size:22px; letter-spacing:.2px; }

.topbarRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.themeToggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border2);
  background:var(--panel2);
  cursor:pointer;
  user-select:none;
  font-weight:900;
  color:var(--text);
}

.pill{
  font-size:13px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--panel2);
  color:var(--muted);
  font-weight:900;
}

/* ===== Form ===== */
label{
  display:block;
  margin:14px 0 10px;
  font-weight:900;
  font-size:19px;
  color:var(--text);
}

.input,.textarea{
  width:100%;
  padding:18px;
  border:1px solid var(--border2);
  border-radius:18px;
  font-size:19px;
  background:var(--panel2);
  color:var(--text);
  outline:none;
  transition:border-color .15s ease, transform .1s ease;
}
.input:focus,.textarea:focus{
  border-color:var(--primary);
  transform:translateY(-1px);
}
.textarea{ min-height:170px; resize:vertical; }

/* Hidden file input (no horizontal scroll) */
.hiddenInput{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  opacity:0;
}

/* ===== DropZone ===== */
.dropZone{
  margin-top:12px;
  border:3px dashed var(--primary);
  border-radius:26px;
  padding:46px 18px;
  text-align:center;
  background:
    radial-gradient(800px 240px at 50% -40%, rgba(37,99,235,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.10)),
    var(--panel2);
  box-shadow:0 12px 30px rgba(37,99,235,.18);
  cursor:pointer;
  user-select:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
[data-theme="dark"] .dropZone{ box-shadow:0 12px 30px rgba(96,165,250,.18); }

.dropZone strong{ display:block; font-size:26px; font-weight:900; margin-bottom:10px; }
.dropZone .sub{ font-size:18px; color:var(--muted); }
.dropZone .hint2{ margin-top:10px; font-size:15px; color:var(--muted); }

.dropZone.dragover{
  transform:scale(1.02);
  box-shadow:0 18px 44px rgba(37,99,235,.28);
  background:
    radial-gradient(800px 260px at 50% -40%, rgba(34,197,94,.24), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.12)),
    var(--panel2);
}

/* Click handling */
.dropZone *{ pointer-events:none; }
.dropZone{ pointer-events:auto; }
.dropZone::after{ pointer-events:none; }

/* ===== Hint / Mixed RTL-LTR text ===== */
.hint{
  color:var(--muted);
  font-size:14px;
  margin-top:10px;
  line-height:1.7;
  white-space:pre-line;
  unicode-bidi: plaintext;
  text-align:start;
}
html[dir="rtl"] .hint{ direction:rtl; }
html[dir="ltr"] .hint{ direction:ltr; }

/* ===== Overall ===== */
.overall{
  margin-top:16px;
  padding:14px;
  border-radius:20px;
  border:1px solid var(--border2);
  background:var(--panel2);
}
.overallTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.overallTitle{ font-weight:900; font-size:17px; }
.overallMeta{ color:var(--muted); font-size:14px; }
.overallBarWrap{
  margin-top:12px;
  height:12px;
  background:rgba(148,163,184,.35);
  border-radius:999px;
  overflow:hidden;
}
.overallBar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--primary), var(--primary2));
  transition:width .12s linear;
}
.statsRow{
  margin-top:10px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:14px;
  color:var(--muted);
}

/* ===== File list ===== */
.fileList{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.fileItem{
  border:1px solid var(--border2);
  border-radius:22px;
  padding:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10)),
    var(--panel);
  box-shadow:0 8px 22px rgba(2,6,23,.06);
  transition:transform .15s ease, box-shadow .15s ease;
  max-width:100%;
}
[data-theme="dark"] .fileItem{ box-shadow:0 8px 22px rgba(0,0,0,.35); }
.fileItem:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(2,6,23,.10); }
.fileItem.dragging{ opacity:.72; border-color:var(--primary); }

.fileTop{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}
.fileLeft{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
  flex:1;
}
.fileName{ font-weight:900; font-size:18px; word-break:break-word; }
.fileMeta{ color:var(--muted); font-size:14px; margin-top:4px; }
.fileRight{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  min-width:0;
}

.ftIcon{
  width:48px;
  height:48px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:16px;
  border:1px solid var(--border2);
  background:var(--panel2);
  flex:0 0 auto;
}
.ft-pdf{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.35); }
.ft-xls{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.35); }
.ft-img{ background:rgba(99,102,241,.14); border-color:rgba(99,102,241,.35); }
.ft-oth{ background:rgba(100,116,139,.14); border-color:rgba(100,116,139,.35); }

.badge{
  font-size:13px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--panel2);
  color:var(--text);
  font-weight:900;
}
.badge.warn{ border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.12); }
.badge.err{ border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.12); }
.badge.ok{ border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.12); }

.btnIcon{
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.10);
  border-radius:16px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:1000;
  font-size:15px;
  color:var(--text);
  transition:transform .12s ease;
}
.btnIcon:hover{ transform:translateY(-1px); }

/* ===== Circular progress ===== */
.cprog{
  width:64px;
  height:64px;
  position:relative;
  flex:0 0 auto;
}
.cprog svg{ width:64px; height:64px; transform:rotate(-90deg); }
.cprog .track{ stroke:rgba(148,163,184,.35); stroke-width:8; fill:none; }
.cprog .bar{
  stroke:var(--good);
  stroke-width:8;
  fill:none;
  stroke-linecap:round;
  transition:stroke-dashoffset .15s linear, stroke .15s ease;
}
.cprog .pct{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:15px;
  color:var(--text);
}

/* ===== Shimmer ===== */
.uploadingGlow{ position:relative; overflow:hidden; }
.uploadingGlow::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-40%;
  width:60%;
  height:180%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform:rotate(18deg);
  animation:shimmer 1.4s infinite;
}
[data-theme="dark"] .uploadingGlow::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}
@keyframes shimmer{
  0%{ transform:translateX(-30%) rotate(18deg); opacity:0; }
  25%{ opacity:.9; }
  100%{ transform:translateX(220%) rotate(18deg); opacity:0; }
}

/* ===== Footer / Buttons ===== */
.footer{
  margin-top:16px;
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.footerActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff;
  border:none;
  border-radius:20px;
  padding:18px 24px;
  font-size:20px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(37,99,235,.26);
}
[data-theme="dark"] .btn{ box-shadow:0 14px 30px rgba(96,165,250,.20); }
.btn.secondary{
  background:linear-gradient(135deg, #0f172a, #020617);
  box-shadow:0 14px 30px rgba(2,6,23,.20);
}
[data-theme="dark"] .btn.secondary{
  background:linear-gradient(135deg, #111827, #0b1220);
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.status{
  margin-top:12px;
  padding:12px 14px;
  border-radius:18px;
  display:none;
  font-size:16px;
  line-height:1.7;
  white-space:pre-line;
  opacity:1;
  transition:opacity .6s ease;
}
.status.is-show{ display:block; }
.status.is-fade{ opacity:0; }
.ok{ background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35); }
.err{ background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); }

.smallMuted{ color:var(--muted); font-size:14px; font-weight:900; }

/* ===== Ticket UI (Glass) ===== */
.ticketBox[hidden]{ display:none !important; }

.ticketBox{
  margin-top:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(34,197,94,.35);
  background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(34,197,94,.06));
  box-shadow:0 14px 34px rgba(2,6,23,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  backdrop-filter:blur(10px);
}

[data-theme="dark"] .ticketBox{
  border-color:rgba(52,211,153,.30);
  background:linear-gradient(135deg, rgba(52,211,153,.14), rgba(15,23,42,.20));
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}

.ticketLeft{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
}

.ticketIcon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.12);
  flex:0 0 auto;
}

[data-theme="dark"] .ticketIcon{
  border-color:rgba(52,211,153,.30);
  background:rgba(52,211,153,.10);
}

.ticketTexts{ min-width:0; }

.ticketTitle{
  font-size:13px;
  font-weight:900;
  color:var(--muted);
  margin-bottom:6px;
}

.ticketNo{
  font-size:18px;
  font-weight:1000;
  letter-spacing:.7px;
  direction:ltr;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:520px;
}

.ticketRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.ticketBtn{
  border:1px solid rgba(37,99,235,.28);
  background:linear-gradient(135deg, rgba(37,99,235,.14), rgba(37,99,235,.08));
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:1000;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:8px;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow:0 10px 22px rgba(37,99,235,.14);
}

.logo{
  width:min(140px, 45vw);
  height:auto;
}

.ticketBtn:hover{ transform:translateY(-1px); }
.ticketBtn:active{ transform:translateY(0) scale(.98); }
.ticketBtn:disabled{ opacity:.55; cursor:not-allowed; }

.ticketToast{
  font-size:12px;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.65);
}
[data-theme="dark"] .ticketToast{
  border-color:rgba(255,255,255,.10);
  background:rgba(15,23,42,.55);
}

.ticketBox.is-show{ animation:ticketPop .22s ease-out; }
@keyframes ticketPop{
  from{ transform:translateY(8px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

/* ===== Language switch ===== */
.langSwitch{
  display:flex;
  gap:8px;
  padding:6px;
  border:1px solid var(--border2);
  background:var(--panel2);
  border-radius:16px;
}
.langBtn{
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  font-size:14px;
}
.langBtn.active{
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff;
  border-color:transparent;
}

/* ===== Mobile ===== */
@media (max-width:700px){
  body{ padding:12px; }

  .card{
    width:100%;
    padding:14px;
    border-radius:22px;
  }

  .dropZone{
    padding:36px 14px;
    border-radius:24px;
  }
  .dropZone strong{ font-size:22px; }
  .dropZone .sub{ font-size:16px; }

  .btn,
  .btn.secondary{ width:100%; }

  .footer{
    flex-direction:column;
    align-items:stretch;
  }
  .footer > div{ width:100%; }

  .fileRight{
    justify-content:flex-start;
    width:100%;
  }

  /* prevent ticket number overflow on small screens */
  .ticketNo{ max-width:70vw; }
}