/* --------------------------------------------------------------------------
   Login expositor 4.events — padrão visual: “aurora card”
   Fundo em camadas + cartão flutuante + acento linear laranja
   -------------------------------------------------------------------------- */

   :root {
    --sl-bg: #f4f6f9;
    --sl-surface: #ffffff;
    --sl-ink: #0f172a;
    --sl-ink-muted: #64748b;
    --sl-border: #e2e8f0;
    --sl-focus: rgba(255, 84, 16, 0.35);
    --sl-orange: #ff5410;
    --sl-orange-dark: #e8490c;
    --sl-orange-soft: #fff4ef;
    --sl-radius: 20px;
    --sl-radius-sm: 12px;
    --sl-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 20px 40px -12px rgba(15, 23, 42, 0.12);
    --sl-font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  }
  
  /* Reset escopo da página */
  .people-login {
    margin: 0;
    min-height: 100vh;
    font-family: var(--sl-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--sl-ink);
    background: var(--sl-bg);
    -webkit-font-smoothing: antialiased;
  }
  
  .people-login * {
    box-sizing: border-box;
  }
  
  /* Ambiente: orbes + grade sutil */
  .sl-ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
  }
  
  .sl-ambient__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
  }
  
  .sl-ambient__orb--1 {
    width: min(72vw, 520px);
    height: min(72vw, 520px);
    background: radial-gradient(circle, rgba(255, 84, 16, 0.22) 0%, transparent 70%);
    top: -12%;
    right: -8%;
  }
  
  .sl-ambient__orb--2 {
    width: min(60vw, 420px);
    height: min(60vw, 420px);
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
    bottom: -15%;
    left: -10%;
  }
  
  .sl-ambient__grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 100%);
  }
  
  .sl-main {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px 48px;
  }
  
  /* Cartão */
  .sl-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--sl-surface);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    border: 1px solid rgba(226, 232, 240, 0.9);
    padding: 36px 32px 28px;
  }
  
  .sl-card__accent {
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--sl-orange) 0%, #ff8a5c 50%, var(--sl-orange-dark) 100%);
  }
  
  .sl-brand {
    text-align: center;
    margin-bottom: 28px;
  }
  
  .sl-brand__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }
  
  .sl-brand__tagline {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sl-ink-muted);
  }
  
  /* Logo 4.events (SVG inline) */
  .icon-4events {
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  .icon-4events.logo-orange {
    background-image: url("data:image/svg+xml,%3Csvg width='91' height='16' viewBox='0 0 91 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.47 12.437c-.302 0-.598.09-.85.255a1.516 1.516 0 0 0-.562.68 1.497 1.497 0 0 0 .332 1.647 1.536 1.536 0 0 0 1.667.327c.28-.114.518-.308.686-.557.168-.249.257-.541.257-.84a1.483 1.483 0 0 0-.443-1.074 1.515 1.515 0 0 0-1.087-.438zM36.6 13.148h-.047l-3.707-9.304h-2.409l4.773 11.32h2.665l4.773-11.32h-2.34L36.6 13.148zM49.39 3.547c-3.614 0-6.163 2.52-6.163 5.957 0 3.436 2.549 5.957 6.163 5.957 2.665 0 4.75-1.351 5.631-3.46h-2.433c-.672.985-1.714 1.444-3.198 1.444-2.086 0-3.521-1.214-3.846-3.094v-.045h9.964v-.802c0-3.438-2.502-5.957-6.118-5.957zm3.8 4.811h-7.576v-.046c.44-1.673 1.83-2.749 3.776-2.749 1.947 0 3.36 1.076 3.8 2.75v.045z' fill='%23ff4700'/%3E%3Cpath d='M20.365 10.308v-.002h9.491v-.802c0-3.437-2.502-5.957-6.118-5.957-2.688 0-4.786 1.394-5.686 3.523h2.487c.677-.944 1.793-1.507 3.2-1.507 1.945 0 3.36 1.076 3.8 2.75v.046h-9.865v.003l-7.877.002h-.192V.178H7.403L.273 8.455v1.856h7.113l.017 4.853h2.202v-4.853h1.585l6.435-.002c.367 3.018 2.788 5.152 6.113 5.152 2.665 0 4.75-1.35 5.631-3.46h-2.433c-.672.986-1.714 1.444-3.198 1.444-2.086 0-3.521-1.213-3.846-3.095v-.041h.473zM2.468 8.553v-.046L7.356 3.25l.022 5.304h-4.91zM62.97 3.547c-3.384 0-5.655 1.946-5.655 5.728v5.889h2.2v-5.89c0-2.451 1.37-3.711 3.455-3.711 2.084 0 3.451 1.26 3.451 3.712v5.889h2.202v-5.89c0-3.803-2.27-5.727-5.653-5.727zM77.891 10.878c0 1.81-.973 2.567-2.409 2.567-1.437 0-2.387-.779-2.387-2.567v-5.04h6.302V3.844h-6.302V.178h-2.202v10.7c0 3.07 1.855 4.583 4.589 4.583 2.734 0 4.588-1.513 4.588-4.583v-.252H77.89v.252zM83.94 7.166c0-.984.834-1.649 2.316-1.649 1.367 0 2.178.641 2.249 1.512h2.177c-.047-1.947-1.737-3.482-4.472-3.482-2.734 0-4.495 1.535-4.495 3.62 0 4.72 7.044 2.267 7.044 4.651 0 .985-.858 1.673-2.55 1.673-1.574 0-2.455-.665-2.501-1.605h-2.225c.07 2.062 1.877 3.575 4.75 3.575 2.874 0 4.751-1.535 4.751-3.643 0-4.743-7.044-2.292-7.044-4.652z' fill='%23ff4700'/%3E%3C/svg%3E%0A");
    width: 148px;
    height: 28px;
  }
  
  /* Painéis */
  .sl-panel__intro {
    margin-bottom: 24px;
  }
  
  .sl-heading {
    margin: 0 0 8px;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sl-ink);
    line-height: 1.25;
  }
  
  .sl-lead {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--sl-ink-muted);
    line-height: 1.55;
  }
  
  .sl-form {
    margin: 0;
  }
  
  .sl-alert {
    padding: 12px 14px;
    border-radius: var(--sl-radius-sm);
    font-size: 0.875rem;
    line-height: 1.45;
    margin-bottom: 18px;
  }
  
  .sl-alert--error {
    color: #7f1d1d;
    background: #fef2f2;
    border: 1px solid #fecaca;
  }
  
  .sl-alert--warning {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
  }
  
  .sl-form .sl-alert--error {
    margin-top: 4px;
  }
  
  .sl-field {
    margin-bottom: 18px;
  }
  
  .sl-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-ink);
  }
  
  .sl-input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-family: var(--sl-font);
    font-size: 15px;
    color: var(--sl-ink);
    background: #f8fafc;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  
  .sl-input::placeholder {
    color: #94a3b8;
  }
  
  .sl-input:hover {
    border-color: #cbd5e1;
  }
  
  .sl-input:focus {
    outline: none;
    border-color: var(--sl-orange);
    background: #fff;
    box-shadow: 0 0 0 3px var(--sl-focus);
  }
  
  select.sl-input.sl-select,
  select.sl-select {
    appearance: auto;
    cursor: pointer;
  }
  
  /* Botões */
  .sl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
  }
  
  .sl-actions--stack {
    flex-direction: column;
  }
  
  .sl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-family: var(--sl-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    border: none;
    border-radius: var(--sl-radius-sm);
    cursor: pointer;
    text-decoration: none !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
  }
  
  .sl-btn:active {
    transform: scale(0.98);
  }
  
  .sl-btn--primary {
    color: #fff !important;
    background: linear-gradient(165deg, var(--sl-orange) 0%, var(--sl-orange-dark) 100%);
    box-shadow: 0 2px 8px rgba(255, 84, 16, 0.35);
  }
  
  .sl-btn--primary:hover {
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(255, 84, 16, 0.4);
    filter: brightness(1.03);
  }
  
  .sl-btn--ghost {
    color: var(--sl-ink) !important;
    background: #fff;
    border: 1px solid var(--sl-border);
  }
  
  .sl-btn--ghost:hover {
    background: var(--sl-orange-soft);
    border-color: rgba(255, 84, 16, 0.25);
    color: var(--sl-orange-dark) !important;
  }
  
  .sl-btn--text {
    background: transparent !important;
    color: var(--sl-ink-muted) !important;
    border: none !important;
    font-weight: 500;
    font-size: 14px;
    padding: 8px;
    box-shadow: none !important;
  }
  
  .sl-btn--text:hover {
    color: var(--sl-orange) !important;
  }
  
  .sl-btn--linkedin {
    width: 100%;
    color: #fff !important;
    background: #0a66c2 !important;
    border: 1px solid #0a66c2;
    box-shadow: none;
  }
  
  .sl-btn--linkedin:hover {
    background: #004182 !important;
    color: #fff !important;
  }
  
  .sl-btn--block {
    width: 100%;
  }
  
  /* Divisor OAuth */
  .sl-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 26px 0 20px;
    color: var(--sl-ink-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  
  .sl-divider::before,
  .sl-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sl-border), transparent);
  }
  
  .oauth-login-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
  
  .google-signin-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  
  .google-signin-wrap > div,
  .google-signin-wrap iframe {
    width: 100% !important;
    max-width: 320px;
  }
  
  /* Rodapé do cartão */
  .sl-card__meta {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--sl-border);
    font-size: 12px;
    color: var(--sl-ink-muted);
    text-align: center;
    line-height: 1.45;
  }
  
  .sl-footer-note {
    margin: 24px 0 0;
    font-size: 12px;
    color: var(--sl-ink-muted);
    text-align: center;
  }
  
  /* Modal */
  .sl-modal .modal-dialog {
    max-width: 400px;
  }
  
  .sl-modal__content {
    border: none;
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    overflow: hidden;
  }
  
  .sl-modal__header {
    border: none;
    padding: 24px 24px 0;
  }
  
  .sl-modal__title {
    margin: 0;
    font-family: var(--sl-font);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sl-ink);
  }
  
  .sl-modal__close {
    opacity: 0.5;
    font-size: 1.5rem;
    font-weight: 300;
  }
  
  .sl-modal__body {
    padding: 16px 24px 24px;
  }
  
  .sl-modal__submit {
    margin-top: 20px;
    width: 100%;
  }
  
  /* Compatibilidade: esconder estilos legados do Bootstrap que conflitem */
  .people-login .form-control {
    border-radius: var(--sl-radius-sm);
  }
  
  @media (max-width: 380px) {
    .sl-card {
      padding: 28px 20px 22px;
    }
  
    .sl-heading {
      font-size: 1.25rem;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .sl-btn,
    .sl-input {
      transition: none;
    }
  
    .sl-ambient__orb {
      filter: blur(40px);
      opacity: 0.25;
    }
  }

  /* Abas login People (API) */
  .sl-people-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
  }

  .sl-people-tab {
    flex: 1;
    padding: 10px 8px;
    font-family: var(--sl-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--sl-ink-muted);
    background: #f8fafc;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-sm);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }

  .sl-people-tab:hover {
    color: var(--sl-ink);
    border-color: #cbd5e1;
  }

  .sl-people-tab--active {
    color: var(--sl-orange-dark) !important;
    background: var(--sl-orange-soft);
    border-color: rgba(255, 84, 16, 0.35);
  }

  .sl-hint {
    margin: -8px 0 16px;
    font-size: 12px;
    color: var(--sl-ink-muted);
    line-height: 1.4;
  }

  /* Home People (pós-login) — layout novo */
  .people-home.people-login {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .ph-layout {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 28px 20px 56px;
    flex: 1;
  }

  .ph-layout--narrow {
    max-width: 520px;
  }

  .ph-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px 24px;
    padding: 24px 26px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    margin-bottom: 28px;
  }

  .ph-hero__kicker {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sl-ink-muted);
  }

  .ph-hero__name {
    margin: 0;
    font-size: clamp(1.35rem, 2.5vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--sl-ink);
    line-height: 1.25;
    max-width: 28rem;
  }

  .ph-hero__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    text-align: right;
    min-width: 200px;
  }

  .ph-hero__tickets {
    margin: 0;
    font-size: 15px;
    color: var(--sl-ink);
    line-height: 1.4;
  }

  .ph-hero__tickets strong {
    color: var(--sl-orange-dark);
    font-weight: 700;
  }

  .ph-hero__logout {
    padding: 8px 16px;
    font-family: var(--sl-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-ink-muted) !important;
    background: transparent;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-sm);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }

  .ph-hero__logout:hover {
    color: var(--sl-orange) !important;
    border-color: rgba(255, 84, 16, 0.35);
    background: var(--sl-orange-soft);
  }

  .ph-main {
    width: 100%;
  }

  .ph-home-tabs {
    margin-bottom: 18px;
  }

  .ph-home-panel {
    width: 100%;
  }

  .ph-profile-card {
    padding-bottom: 26px;
  }

  .ph-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    font-size: 15px;
    color: var(--sl-ink-muted);
    border-radius: var(--sl-radius);
    background: rgba(255, 255, 255, 0.75);
    border: 1px dashed var(--sl-border);
  }

  .ph-state--error {
    color: #7f1d1d;
    background: #fef2f2;
    border-style: solid;
    border-color: #fecaca;
  }

  .ph-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--sl-orange);
    border-radius: 50%;
    animation: ph-spin 0.75s linear infinite;
  }

  @keyframes ph-spin {
    to { transform: rotate(360deg); }
  }

  .ph-tickets-root {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .ph-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ph-event {
    position: relative;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    overflow: hidden;
    transition: box-shadow 0.28s ease, border-color 0.28s ease;
    margin-bottom: 22px;
  }

  .ph-event:hover {
    border-color: rgba(203, 213, 225, 0.95);
    box-shadow: 0 8px 28px -8px rgba(15, 23, 42, 0.1), 0 20px 48px -16px rgba(15, 23, 42, 0.08);
  }

  .ph-event__top {
    position: relative;
  }

  .ph-event__toggle.ph-event__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--sl-radius-sm);
    background: #f1f5f9;
    border: 1px solid var(--sl-border);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
  }

  .ph-event__toggle.ph-event__chevron:focus-visible {
    outline: 2px solid var(--sl-focus);
    outline-offset: 2px;
  }

  .ph-event__banner {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 8;
    max-height: 200px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #0f172a 100%);
    overflow: hidden;
  }

  .ph-event__banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.45) 100%);
    pointer-events: none;
  }

  .ph-event__banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .ph-event__head {
    position: relative;
    padding: 20px 22px 22px;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
    border-bottom: 1px solid var(--sl-border);
  }

  .ph-event__head-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
  }

  .ph-event__title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--sl-ink);
    letter-spacing: -0.025em;
    line-height: 1.35;
  }

  .ph-event__head-aside {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .ph-event__pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sl-orange-dark);
    background: var(--sl-orange-soft);
    border: 1px solid rgba(255, 84, 16, 0.2);
    border-radius: 999px;
    white-space: nowrap;
  }

  .ph-event__chevron::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    margin-top: -3px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
  }

  .ph-event--open .ph-event__chevron {
    transform: rotate(180deg);
    background: #fff;
  }

  .ph-event__meta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--sl-ink-muted);
    line-height: 1.45;
  }

  .ph-event__meta:first-of-type {
    margin-top: 14px;
  }

  .ph-event__meta-ic {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    opacity: 0.88;
    background-color: #94a3b8;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  .ph-event__meta-ic--cal {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 2a1 1 0 0 0-1 1v1H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3h-1V3a1 1 0 1 0-2 0v1H8V3a1 1 0 0 0-1-1zm0 5h10a1 1 0 0 1 1 1v1H6V8a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 2a1 1 0 0 0-1 1v1H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3h-1V3a1 1 0 1 0-2 0v1H8V3a1 1 0 0 0-1-1zm0 5h10a1 1 0 0 1 1 1v1H6V8a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  }

  .ph-event__meta-ic--pin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");
  }

  .ph-event__meta--confirmed {
    color: #166534;
    font-weight: 600;
  }

  .ph-event__meta--confirmed .ph-event__meta-ic {
    background-color: #22c55e;
    opacity: 1;
  }

  .ph-event__meta--confirmed.ph-event__meta--confirmed-zero {
    color: var(--sl-ink-muted);
    font-weight: 500;
  }

  .ph-event__meta--confirmed-zero .ph-event__meta-ic {
    background-color: #94a3b8;
    opacity: 0.88;
  }

  .ph-event__meta-ic--check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  }

  .ph-event__meta--pending {
    color: #92400e;
    font-weight: 600;
  }

  .ph-event__meta--pending .ph-event__meta-ic {
    background-color: #d97706;
    opacity: 1;
  }

  .ph-event__meta--pending.ph-event__meta--pending-zero {
    color: var(--sl-ink-muted);
    font-weight: 500;
  }

  .ph-event__meta--pending-zero .ph-event__meta-ic {
    background-color: #94a3b8;
    opacity: 0.88;
  }

  .ph-event__meta-ic--clock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/%3E%3C/svg%3E");
  }

  .ph-event__ingressos-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
  }

  .ph-event__ingressos-row__status {
    flex: 1 1 auto;
    min-width: min(100%, 220px);
  }

  .ph-event__ingressos-row__status .ph-event__meta {
    margin-top: 0;
  }

  .ph-event__ingressos-row__status .ph-event__meta + .ph-event__meta {
    margin-top: 8px;
  }

  .ph-event__ingressos-row__action {
    flex: 0 0 auto;
  }

  .ph-event__ingressos-row__note {
    flex: 1 1 100%;
  }

  .ph-event__review-note {
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
  }

  .ph-event__checkout-inline {
    text-decoration: none !important;
    white-space: nowrap;
  }

  .ph-event__panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .ph-event:not(.ph-event--open) .ph-event__panel {
    grid-template-rows: 0fr;
  }

  .ph-event:not(.ph-event--open) .ph-event__head {
    border-bottom: none;
  }

  .ph-event__panel-inner {
    min-height: 0;
    overflow: hidden;
  }

  .ph-event__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ph-ticket {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "info aside"
      "actions actions";
    gap: 20px;
    row-gap: 18px;
    padding: 22px;
    border-bottom: 1px solid #f1f5f9;
    align-items: start;
  }

  .ph-ticket__actions-row {
    grid-area: actions;
    width: 100%;
    min-width: 0;
    padding-top: 16px;
    margin-top: 2px;
    border-top: 1px solid #f1f5f9;
  }

  .ph-ticket:last-child {
    border-bottom: none;
  }

  .ph-ticket__info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  .ph-ticket__row {
    display: grid;
    grid-template-columns: minmax(100px, 140px) 1fr;
    gap: 10px 16px;
    align-items: baseline;
    font-size: 14px;
  }

  .ph-ticket__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
  }

  .ph-ticket__value {
    color: var(--sl-ink);
    word-break: break-word;
  }

  .ph-ticket__value--strong {
    font-weight: 600;
    color: var(--sl-ink);
  }

  .ph-ticket__status {
    margin-top: 4px;
  }

  .ph-ticket__review-note {
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
  }

  .ph-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.02em;
  }

  .ph-badge--ok {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
  }

  .ph-badge--pending {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
  }

  .ph-badge--cancel {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
  }

  .ph-badge--muted {
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
  }

  .ph-ticket__aside {
    grid-area: aside;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
  }

  .ph-qr-wrap {
    text-align: center;
  }

  .ph-qr-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 8px;
  }

  .ph-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-sm);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  }

  .ph-qr-canvas {
    display: block;
    border-radius: 4px;
  }

  .ph-qr table {
    border-collapse: collapse;
  }

  .ph-qr table td {
    border: none;
    padding: 0;
  }

  .ph-qr img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
  }

  .ph-ticket__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 10px;
    width: 100%;
    min-width: 0;
  }

  .ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: var(--sl-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    border-radius: var(--sl-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-align: center;
  }

  .ph-btn__ic {
    flex-shrink: 0;
    display: block;
  }

  .ph-btn__ic--card {
    width: 18px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect x='1' y='2' width='22' height='12' rx='2.5' fill='%23000'/%3E%3Crect x='1' y='5.5' width='22' height='2.5' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect x='1' y='2' width='22' height='12' rx='2.5' fill='%23000'/%3E%3Crect x='1' y='5.5' width='22' height='2.5' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  .ph-btn:active:not(:disabled) {
    transform: scale(0.98);
  }

  .ph-btn--checkout {
    color: #065f46 !important;
    background: #d1fae5 !important;
    border-color: #34d399 !important;
    box-shadow: none;
  }

  .ph-btn--checkout:hover:not(:disabled) {
    color: #064e3b !important;
    background: #a7f3d0 !important;
    border-color: #10b981 !important;
    filter: none;
  }

  .ph-btn--checkout:disabled {
    color: #6b7280 !important;
    background: #f0fdf4 !important;
    border-color: #d1fae5 !important;
    opacity: 1;
    cursor: not-allowed;
  }

  .ph-btn--primary {
    color: #fff !important;
    background: linear-gradient(165deg, var(--sl-orange) 0%, var(--sl-orange-dark) 100%);
    box-shadow: 0 2px 8px rgba(255, 84, 16, 0.3);
  }

  .ph-btn--primary:hover {
    filter: brightness(1.05);
  }

  .ph-btn--ghost {
    color: var(--sl-ink-muted) !important;
    background: #f8fafc;
    border-color: var(--sl-border);
  }

  .ph-btn--ghost:hover:not(:disabled) {
    color: var(--sl-ink) !important;
    border-color: #cbd5e1;
    background: #fff;
  }

  .ph-btn--ghost:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .ph-btn--panel-link {
    color: #2563eb !important;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 20px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    transition: all .15s ease;
  }

  .ph-btn--panel-link:hover:not(.disabled) {
    color: #1d4ed8 !important;
    border-color: #93c5fd;
    background: #dbeafe;
    text-decoration: none;
  }

  .ph-btn--panel-link.disabled,
  .ph-btn--panel-link:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
  }

  .ph-btn--panel-link svg {
    margin-right: 8px;
    flex-shrink: 0;
  } 

  .ph-btn--danger {
    color: #991b1b !important;
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
  }

  .ph-btn--danger:hover:not(:disabled) {
    color: #7f1d1d !important;
    background: #fecaca !important;
    border-color: #f87171 !important;
  }

  .ph-btn--danger:disabled {
    color: #9ca3af !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    cursor: not-allowed;
  }

  .ph-placeholder-card {
    padding: 32px 28px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    text-align: center;
  }

  .ph-placeholder-card__title {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sl-ink);
  }

  .ph-placeholder-card__text {
    margin: 0 0 16px;
    font-size: 15px;
    color: var(--sl-ink-muted);
    line-height: 1.55;
  }

  .ph-placeholder-card__meta {
    margin: 0 0 24px;
    font-size: 13px;
    color: #94a3b8;
  }

  .ph-placeholder-card__meta code {
    font-size: 12px;
    word-break: break-all;
  }

  /* People — editar dados (attendee/fill) */
  .ph-fill-page {
    padding-top: 24px;
  }

  .ph-fill-header {
    margin-bottom: 24px;
  }

  .ph-fill-back {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-ink-muted);
    text-decoration: none !important;
  }

  .ph-fill-back:hover {
    color: var(--sl-orange);
  }

  .ph-fill-title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sl-ink);
    letter-spacing: -0.02em;
  }

  .ph-fill-sub {
    margin: 0;
    font-size: 15px;
    color: var(--sl-ink-muted);
    line-height: 1.5;
  }

  .ph-fill-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    padding: 28px 24px 32px;
  }

  .ph-fill-form {
    margin: 0;
  }

  .ph-fill-field {
    margin-bottom: 20px;
  }

  .ph-fill-field--inline {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .ph-fill-field--inline .ph-fill-label {
    margin-bottom: 0;
  }

  .ph-fill-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-ink);
  }

  .ph-fill-required-star {
    color: #dc2626;
    font-weight: 700;
  }

  .ph-fill-input {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--sl-font);
    font-size: 15px;
    color: var(--sl-ink);
    background: #f8fafc;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .ph-fill-input:focus {
    outline: none;
    border-color: var(--sl-orange);
    background: #fff;
    box-shadow: 0 0 0 3px var(--sl-focus);
  }

  .ph-fill-input--readonly,
  .ph-fill-input:read-only {
    background: #f1f5f9 !important;
    color: var(--sl-ink-muted);
    cursor: default;
  }

  textarea.ph-fill-input {
    min-height: 100px;
    resize: vertical;
  }

  select.ph-fill-input {
    appearance: auto;
    cursor: pointer;
  }

  .ph-fill-input--check {
    width: auto;
  }

  .ph-fill-actions {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--sl-border);
  }

  .ph-fill-save {
    min-width: 160px;
  }

  .ph-fill-empty-fields {
    margin: 0;
    font-size: 14px;
    color: var(--sl-ink-muted);
  }

  /* Campo tipo arquivo — destaque da sessão */
  .ph-fill-field--file {
    border: 1px solid #ddd;
    padding: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
  }

  .ph-fill-field--file .ph-fill-label {
    margin-bottom: 10px;
  }

  .ph-fill-file-download-wrap {
    margin: 0 0 14px;
  }

  .ph-fill-file-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 8px;
  }

  .ph-fill-file-download__ic {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0.9;
  }

  .ph-fill-file-download__ic svg {
    display: block;
    vertical-align: middle;
  }

  .ph-fill-file-download__txt {
    line-height: 1.2;
  }

  .ph-fill-field--file .ph-fill-file-input {
    margin-top: 2px;
  }

  .d-none {
    display: none;
  }

  @media (max-width: 720px) {
    .ph-event__ingressos-row {
      flex-direction: column;
      align-items: stretch;
    }

    .ph-event__ingressos-row__action {
      width: 100%;
    }

    .ph-event__checkout-inline {
      white-space: normal;
      width: 100%;
      justify-content: center;
    }

    .ph-ticket {
      grid-template-columns: 1fr;
      grid-template-areas:
        "info"
        "aside"
        "actions";
    }

    .ph-ticket__aside {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      padding-top: 8px;
      border-top: 1px solid #f1f5f9;
    }

    .ph-ticket__actions-row {
      padding-top: 12px;
      margin-top: 0;
    }

    .ph-ticket__actions {
      justify-content: flex-start;
    }

    .ph-qr-wrap {
      margin: 0 auto;
    }

    .ph-hero__right {
      align-items: flex-start;
      text-align: left;
      width: 100%;
    }
  }
  
  .ph-btn:disabled,
  .ph-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .ph-qr-wrap--disabled {
    opacity: 0.9;
  }

  .ph-qr--pending {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 112px;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
  }

  .ph-qr-pending-msg {
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
    color: #64748b;
    text-align: center;
  }

  .ph-ticket--pending {
    /* background: linear-gradient(180deg, #fffbeb 0%, #ffffff 42%); */
  }

  .ph-orders-root {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .ph-orders-group {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06);
    overflow: hidden;
  }

  .ph-orders-group__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
  }

  .ph-orders-group__title {
    margin: 0;
    font-size: 18px;
    color: #111827;
  }

  .ph-orders-group__sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
  }

  .ph-orders-group__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ph-orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
  }

  .ph-order {
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    margin: 0;
  }

  .ph-order:last-child {
    margin-bottom: 0;
  }

  .ph-order--pending {
    background: #fff;
    border-color: #e5e7eb;
  }

  .ph-order__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
  }

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

  .ph-order__id {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
  }

  .ph-order__amounts {
    text-align: right;
  }

  .ph-order__amount-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 2px;
  }

  .ph-order__amount {
    font-size: 20px;
    color: #166534;
  }

  .ph-order__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 10px;
    font-size: 13px;
    color: #64748b;
  }

  .ph-order__body {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
  }

  .ph-order__items-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
  }

  .ph-order__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ph-order__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafbff;
  }

  .ph-order__item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .ph-order__item-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
  }

  .ph-order__item-meta {
    font-size: 12px;
    color: #64748b;
  }

  .ph-order__item-price {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
  }

  .ph-order__item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
  }

  .ph-btn--sm {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
  }

  .ph-ticket__cancel-blocked {
    margin: 0;
    max-width: 280px;
  }

  .ph-ticket__cancel-blocked-text {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #b45309;
  }

  .ph-order__empty-items {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
  }

  .ph-order__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 14px;
    align-items: flex-start;
  }

  .ph-order__alert {
    flex: 1 1 100%;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fff7ed;
  }

  .ph-order__alert-title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: #9a3412;
  }

  .ph-order__alert-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #7c2d12;
  }

  @media (max-width: 760px) {
    .ph-orders-group__head {
      align-items: flex-start;
    }

    .ph-order__amounts {
      text-align: left;
    }

    .ph-order__item {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .ph-event__tickets-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 2px;
  }

  .ph-ticket-order {
    border: 1px solid #e8ecf1;
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    margin: 20px 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .ph-ticket-orphan {
    margin: 20px 24px;
  }

  .ph-ticket-order--pending {
    border-color: #f0d5b8;
  }

  .ph-ticket-order__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px 28px;
    padding: 18px 20px;
    border-bottom: 1px solid #eef2f7;
    background:
      linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
  }

  .ph-ticket-order--pending .ph-ticket-order__head {
    background:
      linear-gradient(180deg, #fffaf5 0%, #fff7f0 100%);
    border-bottom-color: #f3e4d4;
  }

  .ph-ticket-order__head-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .ph-ticket-order__head-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    text-align: right;
  }

  .ph-ticket-order__title {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    max-width: 100%;
  }

  .ph-ticket-order__title-label {
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .ph-ticket-order__hash {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 3px 8px;
    word-break: break-all;
  }

  .ph-ticket-order__count {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
  }

  .ph-ticket-order__amount {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    line-height: 1.15;
  }

  .ph-ticket-order--pending .ph-ticket-order__amount {
    color: #9a3412;
  }

  .ph-ticket-order__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 210px;
  }

  .ph-ticket-order__actions .ph-btn {
    justify-content: center;
    width: 100%;
  }

  .ph-ticket-order__actions .ph-btn--ghost {
    background: #fff;
    border-color: #dbe3ee;
    color: #334155;
  }

  .ph-ticket-order__actions .ph-btn--ghost:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
  }

  .ph-ticket-order__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ph-ticket-order__list .ph-ticket:last-child {
    border-bottom: none;
  }

  .ph-ticket__order-fake {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    padding: 3px 8px;
    word-break: break-all;
  }

  @media (max-width: 720px) {
    .ph-ticket-order,
    .ph-ticket-orphan {
      margin: 14px 12px;
    }

    .ph-ticket-order__head {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      padding: 16px;
    }

    .ph-ticket-order__head-right {
      align-items: stretch;
      text-align: left;
      padding-top: 14px;
      border-top: 1px solid rgba(148, 163, 184, 0.25);
    }

    .ph-ticket-order__amount {
      font-size: 20px;
    }

    .ph-ticket-order__actions {
      min-width: 0;
      width: 100%;
    }
  }

  .ph-ticket-orphan__head {
    padding: 4px 2px 8px;
  }

  .ph-ticket-orphan__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
  }

  .ph-ticket-orphan__sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: #94a3b8;
  }

  .ph-ticket-orphan .ph-event__list {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }