.xf-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.xf-mode-tabs {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--sp-4);
  padding: 3px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: #f1f5f9;
}
.xf-mode-tabs button {
  min-width: 104px;
  padding: 7px 14px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #475569;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.xf-mode-tabs button.is-active { background: #fff; color: #0f766e; font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }

.xf-workbench {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(470px, 1fr) minmax(210px, 280px);
  gap: var(--sp-4);
  align-items: stretch;
}

.xf-panel,
.xf-seat-panel {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}

.xf-panel { padding: var(--sp-4); }

.xf-panel-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text-2);
  margin-bottom: var(--sp-4);
}

.xf-selection-panel .form-row { margin-bottom: var(--sp-3); }
.xf-selection-panel select { width: 100%; }

.xf-cinema-combobox { position: relative; }
.xf-cinema-combobox > input[type="text"] { width: 100%; }

.xf-cinema-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  width: max(100%, 340px);
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
}

.xf-cinema-option {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
}

.xf-cinema-option:last-child { border-bottom: 0; }
.xf-cinema-option:hover,
.xf-cinema-option.is-active { background: #f0fdfa; }
.xf-cinema-option strong,
.xf-cinema-option small { display: block; line-height: 1.4; }
.xf-cinema-option strong { font-size: var(--fs-sm); font-weight: 600; }
.xf-cinema-option small { margin-top: 2px; color: var(--c-text-3); font-size: var(--fs-xs); }
.xf-cinema-empty { padding: 14px 11px; color: var(--c-text-3); font-size: var(--fs-sm); text-align: center; }

.xf-cinema-address {
  min-height: 38px;
  padding: 7px 10px;
  margin: calc(var(--sp-2) * -1) 0 var(--sp-4);
  border-left: 2px solid #0f766e;
  background: #f0fdfa;
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.xf-cinema-address:empty { display: none; }

.xf-seat-panel {
  min-width: 0;
  padding: var(--sp-4) var(--sp-3);
  overflow: hidden;
}

.xf-hall-name {
  min-height: 24px;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--sp-3);
}

.xf-screen {
  width: min(72%, 460px);
  height: 28px;
  margin: 0 auto var(--sp-5);
  border-top: 3px solid #94a3b8;
  border-radius: 50% 50% 0 0;
  text-align: center;
  color: var(--c-text-3);
  font-size: 11px;
  padding-top: 5px;
}

.xf-seat-scroll {
  max-height: 500px;
  overflow: auto;
  padding: 0 var(--sp-2) var(--sp-2);
}

.xf-seat-map {
  width: max-content;
  display: grid;
  grid-template-columns: repeat(var(--xf-seat-columns, 1), 26px);
  grid-auto-rows: 26px;
  gap: 5px;
  margin: 0 auto;
}

.xf-row-label {
  position: sticky;
  z-index: 3;
  pointer-events: none;
  align-self: center;
  width: 26px;
  padding: 4px 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-text-3);
  font-size: 10px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.xf-row-label.is-left { left: 0; }
.xf-row-label.is-right { right: 0; }

.xf-seat {
  position: relative;
  width: 26px;
  height: 26px;
  border: 1px solid #b9c1ca;
  border-radius: 4px 4px 6px 6px;
  background: #fff;
  color: var(--c-text-2);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.xf-aisle { width: 10px; height: 26px; }
.xf-seat.is-available:hover:not(:disabled) { border-color: #0f766e; color: #0f766e; background: #f0fdfa; }
.xf-seat.is-selected { border-color: #0f766e; color: #fff; background: #0f766e; }
.xf-seat.is-sold { border-color: #d1d5db; color: #9ca3af; background: #e5e7eb; }
.xf-seat.is-couple:not(.is-selected) { border-color: #d8a6b8; background: #fff1f5; color: #9d4765; }
.xf-seat.is-couple { --xf-couple-link: #fff1f5; }
.xf-seat.is-couple.is-selected { --xf-couple-link: #0f766e; }
.xf-seat.is-couple-left::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 8px;
  right: -6px;
  width: 6px;
  height: 10px;
  background: var(--xf-couple-link);
}

.xf-seat-legend {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}
.xf-seat-legend[hidden],
.xf-screen[hidden] { display: none; }

.xf-seat-legend span { display: flex; align-items: center; gap: 5px; }
.xf-seat-legend i { width: 12px; height: 12px; border: 1px solid #b9c1ca; border-radius: 3px; background: #fff; }
.xf-seat-legend i.is-selected { border-color: #0f766e; background: #0f766e; }
.xf-seat-legend i.is-sold { border-color: #d1d5db; background: #e5e7eb; }
.xf-seat-legend i.is-couple { border-color: #d8a6b8; background: #fff1f5; }

.xf-summary-panel { min-height: 378px; }
.xf-summary-empty {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}
.xf-summary-mark { font-size: 26px; color: #94a3b8; }

.xf-summary-list { display: grid; gap: var(--sp-3); }
.xf-summary-list > div { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.xf-summary-list span { display: block; margin-bottom: 3px; color: var(--c-text-3); font-size: var(--fs-xs); }
.xf-summary-list strong { display: block; color: var(--c-text); font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; }

.xf-checkout-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) minmax(220px, 300px);
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.xf-option-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
}
.xf-option-row:last-child { border-bottom: none; }
.xf-option-row input { margin-top: 3px; accent-color: #0f766e; }
.xf-option-row.is-disabled { cursor: not-allowed; opacity: 0.55; }
.xf-option-row span { min-width: 0; flex: 1; }
.xf-option-row b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.xf-option-row small { display: block; margin-top: 2px; color: var(--c-text-3); font-size: var(--fs-xs); }

.xf-action-panel { display: flex; flex-direction: column; }
.xf-selection-count { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); color: var(--c-text-2); font-size: var(--fs-sm); }
.xf-selection-count span,
.xf-selection-count small { display: block; }
.xf-selection-count small { min-height: 17px; margin-top: 3px; color: var(--c-text-3); font-size: var(--fs-xs); }
.xf-selection-count strong { font-size: 22px; color: #b42318; font-variant-numeric: tabular-nums; }
.xf-action-button { width: 100%; min-height: 38px; margin-top: var(--sp-2); }
.xf-order-button { margin-top: var(--sp-4); background: #0f766e; }
.xf-order-button:hover:not(:disabled) { background: #115e59; }

.xf-history-view[hidden] { display: none; }
.xf-history-view {
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-4);
}
.xf-history-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(260px, 420px) auto;
  align-items: end;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.xf-history-toolbar .form-row { margin: 0; }
.xf-history-toolbar select,
.xf-history-toolbar input { width: 100%; }
.xf-history-toolbar .btn { min-height: 36px; }
.xf-history-summary { min-height: 20px; margin-bottom: var(--sp-3); color: var(--c-text-3); font-size: var(--fs-xs); }
.xf-history-table-wrap { overflow-x: auto; border: 1px solid var(--c-border); }
.xf-history-table { min-width: 980px; }
.xf-history-table td { vertical-align: middle; }
.xf-history-table td > strong,
.xf-history-table td > small { display: block; }
.xf-history-table td > small { margin-top: 4px; color: var(--c-text-3); font-size: var(--fs-xs); }
.xf-history-order-no { font-family: Consolas, monospace; font-size: 12px; }
.xf-history-empty { padding: 42px 16px !important; color: var(--c-text-3); text-align: center; }
.xf-history-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}
.xf-history-pager span { min-width: 90px; text-align: center; font-variant-numeric: tabular-nums; }

.xf-ticket-card {
  overflow: hidden;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #fff;
  color: #111827;
}

.xf-ticket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  background: #0f766e;
  color: #fff;
}

.xf-ticket-head span,
.xf-ticket-head strong { display: block; }
.xf-ticket-head span { margin-bottom: 5px; font-size: 12px; opacity: 0.82; }
.xf-ticket-head strong { font-size: 23px; line-height: 1.35; }
.xf-ticket-head b {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 4px;
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
}
.xf-ticket-head b.is-refunded { background: #fef3c7; color: #92400e; }

.xf-ticket-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  padding: 22px 24px;
  border-bottom: 1px solid #e5e7eb;
}
.xf-ticket-meta .is-wide { grid-column: 1 / -1; }
.xf-ticket-meta span,
.xf-ticket-pickup-info > span,
.xf-ticket-seat-row > span { display: block; margin-bottom: 4px; color: #64748b; font-size: 12px; }
.xf-ticket-meta strong { display: block; font-size: 14px; line-height: 1.5; }

.xf-ticket-pickup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 20px 24px;
  padding: 16px 18px;
  background: #f1f5f9;
}
.xf-ticket-pickup-info > span { margin-bottom: 5px; }
.xf-ticket-pickup-info > strong { font-family: Consolas, monospace; font-size: 28px; letter-spacing: 0; }
.xf-ticket-pickup > img { width: 132px; height: 132px; object-fit: contain; image-rendering: pixelated; }

.xf-ticket-seats { padding: 0 24px; }
.xf-ticket-seat-row {
  padding: 12px 0;
  border-top: 1px dashed #cbd5e1;
}
.xf-ticket-seat-row strong { display: block; font-size: 15px; }
.xf-ticket-seat-row small { display: block; margin-top: 5px; color: #475569; font-size: 13px; }

.xf-ticket-foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  color: #64748b;
  font-size: 12px;
}

@media (max-width: 1199px) {
  .xf-workbench { grid-template-columns: minmax(230px, 280px) minmax(500px, 1fr); }
  .xf-summary-panel { grid-column: 1 / -1; min-height: 0; }
  .xf-summary-empty { min-height: 100px; }
  .xf-summary-list { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
  .xf-summary-list > div { border-bottom: none; padding-bottom: 0; }
}

@media (max-width: 860px) {
  .xf-workbench,
  .xf-checkout-grid { grid-template-columns: 1fr; }
  .xf-summary-panel { grid-column: auto; }
  .xf-summary-list { grid-template-columns: 1fr 1fr; }
  .xf-seat-panel { min-height: 390px; }
  .xf-history-toolbar { grid-template-columns: 1fr 1fr; }
  .xf-history-toolbar .btn { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .xf-page-head { align-items: flex-start; }
  .xf-cinema-options { width: 100%; }
  .xf-summary-list { grid-template-columns: 1fr; }
  .xf-seat-legend { gap: var(--sp-3); }
  .xf-mode-tabs { display: flex; }
  .xf-mode-tabs button { flex: 1; min-width: 0; }
  .xf-history-toolbar { grid-template-columns: 1fr; }
  .xf-history-toolbar .btn { grid-column: auto; }
  .xf-ticket-meta { grid-template-columns: 1fr; }
  .xf-ticket-meta .is-wide { grid-column: auto; }
  .xf-ticket-head { align-items: flex-start; }
  .xf-ticket-pickup > img { width: 104px; height: 104px; }
  .xf-ticket-foot { flex-direction: column; gap: 5px; }
}
.xf-quick-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  color: #1e3a8a;
}

.xf-quick-banner.is-success {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.xf-quick-banner.is-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

@media (max-width: 720px) {
  .xf-quick-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}