:root {
  --bg: #050505;
  --panel: #101010;
  --panel-2: #171717;
  --text: #fff;
  --muted: rgba(255,255,255,.58);
  --line: rgba(255,255,255,.12);
  --ok: #83e9ad;
  --warn: #ffd273;
  --bad: #ff7d88;
  --radius: 24px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.10), transparent 34rem),
    var(--bg);
  color: var(--text);
  font-family: Arial, "Noto Sans Arabic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
.customer-topbar {
  min-height: 72px;
  padding: 14px clamp(18px,4vw,54px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5,5,5,.9);
  backdrop-filter: blur(18px);
}
.customer-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 800; }
.customer-brand img { width: 42px; height: 42px; object-fit: contain; }
.customer-brand span { font-size: 13px; letter-spacing: .03em; }
.back-site { color: var(--muted); text-decoration: none; font-size: 13px; }
.back-site:hover { color: #fff; }
.customer-shell { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: clamp(44px,8vw,92px) 0 70px; }
.customer-intro { margin-bottom: 30px; max-width: 700px; }
.eyebrow { margin: 0 0 10px; font-size: 11px; letter-spacing: .18em; color: var(--muted); direction: ltr; text-align: right; }
.customer-intro h1 { margin: 0; font-size: clamp(52px,10vw,104px); line-height: .95; letter-spacing: -.05em; }
.customer-intro > p:last-child { max-width: 650px; line-height: 1.9; color: var(--muted); font-size: 15px; }
.login-card, .account-view {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border-radius: var(--radius);
  padding: clamp(20px,4vw,38px);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.card-heading h2, .account-head h2 { margin: 0; font-size: clamp(26px,4vw,42px); }
form { display: grid; gap: 18px; }
label { display: grid; gap: 9px; }
label span { color: var(--muted); font-size: 13px; }
input {
  width: 100%;
  min-height: 58px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #080808;
  color: #fff;
  padding: 0 16px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus { border-color: rgba(255,255,255,.42); box-shadow: 0 0 0 4px rgba(255,255,255,.05); }
.login-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.form-error { margin: 0; border: 1px solid rgba(255,125,136,.35); background: rgba(255,125,136,.08); color: #ffb3ba; padding: 12px 14px; border-radius: 14px; font-size: 13px; }
.primary-button, .ghost-button, .ticket-action {
  border-radius: 999px;
  min-height: 52px;
  border: 1px solid transparent;
  font-weight: 800;
}
.primary-button { background: #fff; color: #000; padding: 0 24px; }
.primary-button:disabled { opacity: .55; cursor: wait; }
.ghost-button { background: transparent; color: #fff; border-color: var(--line); padding: 0 18px; }
.account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 24px; }
.account-email { margin: 8px 0 0; color: var(--muted); direction: ltr; text-align: right; }
.account-status { margin-bottom: 20px; color: var(--muted); }
.ticket-list { display: grid; gap: 14px; }
.ticket-card { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); padding: 20px; display: grid; gap: 18px; }
.ticket-card.used { border-color: rgba(255,210,115,.28); }
.ticket-card.cancelled, .ticket-card.expired { border-color: rgba(255,125,136,.25); opacity: .82; }
.ticket-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.ticket-event { margin: 0; font-size: clamp(20px,3vw,30px); }
.ticket-meta { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.status-pill { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; font-size: 11px; font-weight: 900; }
.status-pill.valid { color: var(--ok); border-color: rgba(131,233,173,.28); background: rgba(131,233,173,.06); }
.status-pill.used, .status-pill.awaiting { color: var(--warn); border-color: rgba(255,210,115,.28); background: rgba(255,210,115,.06); }
.status-pill.cancelled, .status-pill.expired { color: var(--bad); border-color: rgba(255,125,136,.28); background: rgba(255,125,136,.06); }
.ticket-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.ticket-data { background: var(--panel-2); border-radius: 14px; padding: 12px; min-width: 0; }
.ticket-data span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 5px; }
.ticket-data strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.ticket-action { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: #fff; color: #000; padding: 0 20px; width: fit-content; }
.empty-state { border: 1px dashed var(--line); border-radius: 20px; padding: 30px; text-align: center; color: var(--muted); }
.empty-state strong, .empty-state span { display: block; }
.empty-state strong { color: #fff; margin-bottom: 8px; }
.customer-footer { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 42px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 12px; }
.customer-footer a { text-decoration: none; }
@media (max-width: 680px) {
  .customer-brand span { display: none; }
  .customer-shell { width: min(100% - 22px, 980px); padding-top: 32px; }
  .login-card, .account-view { border-radius: 20px; padding: 18px; }
  .account-head { align-items: center; }
  .ticket-top { display: grid; }
  .status-pill { width: fit-content; }
  .ticket-grid { grid-template-columns: 1fr 1fr; }
  .customer-footer { width: min(100% - 22px, 980px); flex-direction: column; }
}


/* v34: private buyer QR stays visible for every issued ticket, including used tickets. */
.customer-qr {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #080808;
}
.customer-qr-heading { display: grid; gap: 7px; min-width: 0; }
.customer-qr-heading strong { font-size: 16px; }
.customer-qr-heading span { color: var(--muted); font-size: 12px; line-height: 1.8; }
.customer-qr.used { border-color: rgba(255,210,115,.32); }
.customer-qr.cancelled { border-color: rgba(255,125,136,.32); }
.customer-qr-frame {
  position: relative;
  width: min(230px, 42vw);
  aspect-ratio: 1;
  flex: 0 0 auto;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.customer-qr-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.customer-qr-used,
.customer-qr-cancelled {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 5px 18px rgba(0,0,0,.25);
}
.customer-qr-used { background: #111; color: #ffd273; border: 1px solid rgba(255,210,115,.65); }
.customer-qr-cancelled { background: #251015; color: #ffb3ba; border: 1px solid rgba(255,125,136,.65); }
@media (max-width: 680px) {
  .customer-qr { grid-template-columns: 1fr; }
  .customer-qr-frame { width: min(100%, 320px); margin-inline: auto; }
}

/* v35: persistent buyer account — recovery, security and dynamic event discovery. */
.text-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  padding: 0;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 12px;
  font-weight: 700;
}
.text-button:hover { color: #fff; }
.full-button { width: 100%; }
.form-message {
  margin: 0;
  border: 1px solid rgba(131,233,173,.32);
  background: rgba(131,233,173,.07);
  color: #baf5cf;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.8;
}
.account-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 20px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.account-tabs::-webkit-scrollbar { display: none; }
.account-tab {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 18px;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
  font-weight: 800;
}
.account-tab.active {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.account-pane[hidden] { display: none !important; }
.pane-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.pane-title h3 { margin: 0; font-size: clamp(24px,4vw,38px); }
.pane-title > p { margin: 0; color: var(--muted); max-width: 430px; line-height: 1.8; font-size: 12px; }
.security-form { max-width: 620px; }
.suggested-events {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.suggested-event-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--panel);
}
.suggested-event-poster {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0a0a0a;
}
.suggested-event-body { padding: 18px; display: grid; gap: 12px; }
.suggested-event-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.suggested-event-top h4 { margin: 0; font-size: 21px; line-height: 1.25; }
.owned-event-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(131,233,173,.28);
  background: rgba(131,233,173,.07);
  color: var(--ok);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 900;
}
.suggested-event-meta { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; }
.suggested-event-summary {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 680px) {
  .pane-title { display: grid; gap: 8px; }
  .suggested-events { grid-template-columns: 1fr; }
  .account-tabs { margin-inline: -4px; }
}

/* v40: secure customer-to-customer ticket transfer */
.transfer-form { display: grid; gap: 18px; }
.transfer-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.transfer-filter-row { display: grid; grid-template-columns: minmax(220px,1fr) auto; gap: 12px; align-items: end; }
.transfer-filter-row select {
  width: 100%; min-height: 54px; border-radius: 15px; border: 1px solid var(--line);
  background: #080808; color: #fff; padding: 0 14px; outline: none;
}
.transfer-selected-count {
  min-width: 150px; min-height: 54px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px;
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 10px; padding: 8px 14px; background: rgba(255,255,255,.035);
}
.transfer-selected-count span,.transfer-selected-count small { color: var(--muted); font-size: 10px; }
.transfer-selected-count strong { font-size: 24px; line-height: 1; }
.transfer-selected-count small { grid-column: 1 / -1; }
.transfer-ticket-picker { display: grid; gap: 9px; max-height: 430px; overflow: auto; padding-inline-end: 2px; }
.transfer-pick-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; background: var(--panel-2);
}
.transfer-pick-row input { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: #fff; }
.transfer-pick-copy { min-width: 0; display: grid; gap: 3px; }
.transfer-pick-copy strong { font-size: 13px; }
.transfer-pick-copy span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.transfer-pick-class { border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; font-size: 10px; font-weight: 900; }
.transfer-requests { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.transfer-requests h4 { margin: 0 0 12px; font-size: 17px; }
.transfer-request-list { display: grid; gap: 10px; }
.transfer-request-card { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--panel-2); display: grid; gap: 10px; }
.transfer-request-card.pending { border-color: rgba(255,210,115,.25); }
.transfer-request-card.accepted { border-color: rgba(131,233,173,.25); }
.transfer-request-card.declined,.transfer-request-card.cancelled { opacity: .68; }
.transfer-request-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.transfer-request-head strong { font-size: 13px; }
.transfer-request-head span { color: var(--muted); font-size: 10px; }
.transfer-request-meta { color: var(--muted); font-size: 11px; line-height: 1.75; }
.transfer-request-actions { display:flex; gap:8px; flex-wrap:wrap; }
.transfer-request-actions button { min-height: 38px; border-radius: 999px; padding: 0 13px; border: 1px solid var(--line); background: transparent; color:#fff; font-weight:800; }
.transfer-request-actions .accept { background:#fff; color:#000; border-color:#fff; }
.transfer-empty { color: var(--muted); font-size: 12px; padding: 10px 0; }
.ticket-transfer-select { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }
.ticket-transfer-select input { width:18px; height:18px; min-height:0; padding:0; accent-color:#fff; }
@media (max-width:680px) {
  .transfer-fields,.transfer-requests { grid-template-columns:1fr; }
  .transfer-filter-row { grid-template-columns:1fr; }
  .transfer-selected-count { min-width:0; }
  .transfer-pick-row { grid-template-columns:auto 1fr; }
  .transfer-pick-class { grid-column:2; width:fit-content; }
}

.customer-data-card{display:grid;gap:6px;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.035);margin-bottom:10px}.customer-data-card.unread{border-color:rgba(205,185,120,.55);box-shadow:0 0 0 1px rgba(205,185,120,.12)}.customer-data-card strong{font-size:15px}.customer-data-card span,.customer-data-card small,.customer-data-card p{color:#bdbdbd}.account-tabs{overflow-x:auto;white-space:nowrap;scrollbar-width:thin}.account-tab{flex:0 0 auto}

/* v51.4 — mobile viewport containment */
@media(max-width:760px){html,body{width:100%;max-width:100%;min-width:0;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}main,section,form,div{min-width:0}img,svg,video,canvas{max-width:100%;height:auto}input,select,textarea,button{max-width:100%}}


/* =====================================================================
   v51.6 — customer account mobile-first containment
   ===================================================================== */
@media screen and (max-width:899px), screen and (hover:none) and (pointer:coarse) and (max-width:1200px){
  html{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:clip!important}
  body{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:clip!important;margin:0!important;position:relative!important}
  body>*{max-width:100dvw!important;min-width:0!important}
  main,header,footer,section,article,form,div{min-width:0!important;max-width:100%!important}
  .customer-topbar{width:100dvw!important;max-width:100dvw!important;min-width:0!important;padding:10px 12px!important;gap:8px!important;overflow:hidden!important}
  .customer-brand{min-width:0!important;overflow:hidden!important}.customer-brand img{width:38px!important;height:38px!important}.customer-brand span{display:none!important}.back-site{white-space:nowrap!important;font-size:12px!important}
  .customer-shell,.customer-footer{width:calc(100% - 20px)!important;max-width:calc(100dvw - 20px)!important;margin-inline:auto!important}
  .customer-shell{padding-top:28px!important}.customer-intro{max-width:100%!important;margin-bottom:20px!important}.customer-intro h1{font-size:clamp(36px,12vw,54px)!important;line-height:1.02!important;overflow-wrap:anywhere!important}.customer-intro>p:last-child{font-size:13px!important}
  .login-card,.account-view{padding:16px!important;border-radius:18px!important;max-width:100%!important;overflow:hidden!important}
  .card-heading,.account-head,.pane-title,.ticket-top,.suggested-event-top,.transfer-request-head{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
  .account-tabs{width:100%!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain!important;-webkit-overflow-scrolling:touch!important;padding-bottom:12px!important;margin-bottom:18px!important}.account-tab{flex:0 0 auto!important;min-width:auto!important;padding-inline:14px!important}
  .ticket-grid,.suggested-events,.transfer-fields,.transfer-requests,.transfer-filter-row{grid-template-columns:minmax(0,1fr)!important}
  .ticket-card,.customer-qr,.transfer-pick-row,.transfer-request-card{min-width:0!important;max-width:100%!important}
  .customer-qr{grid-template-columns:minmax(0,1fr)!important}.customer-qr-frame{width:min(100%,300px)!important;margin-inline:auto!important}
  .transfer-selected-count{min-width:0!important;width:100%!important}.transfer-pick-row{grid-template-columns:auto minmax(0,1fr)!important}.transfer-pick-class{grid-column:2!important;max-width:100%!important;overflow-wrap:anywhere!important}
  input,select,textarea,button{min-width:0!important;max-width:100%!important}
}
@media screen and (max-width:430px){
  .ticket-grid{grid-template-columns:minmax(0,1fr)!important}
  .customer-footer{flex-direction:column!important}
}