.tickets-page { padding-top: 108px; }
.tickets-main { width: 100%; max-width: 1180px; min-width: 0; margin: 0 auto; padding: 0 24px 100px; }
.tickets-main > *, .tickets-panel, .tickets-panel-header > *, .tickets-list, .ticket-detail-panel { min-width: 0; }

/* Compact action buttons - for in-context toolbar actions (reply, close,
   ban, delete, save) as opposed to .button, which is sized for a single
   standalone marketing CTA. Multiple .button elements side by side is what
   was making these rows look clunky - same uppercase-pill treatment
   everywhere reads cheap once there's more than one of them in a row. */
.action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 45px; padding: 0 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.03); color: #c8ccd2; font-size: 12.5px; font-weight: 600; letter-spacing: 0; cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .15s, box-shadow .15s; }
.action-btn:hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.065); color: #fff; transform: translateY(-1px); }
.action-btn-primary { color: #070809; background: #f4f5f6; border-color: #f4f5f6; font-weight: 700; }
.action-btn-primary:hover { background: #fff; color: #070809; box-shadow: 0 10px 24px rgba(255,255,255,.1); }
.action-btn-danger { color: #ff9c9c; border-color: rgba(239,106,106,.3); }
.action-btn-danger:hover { border-color: rgba(239,106,106,.6); background: rgba(239,106,106,.1); color: #ffb4b4; }
.action-btn-danger-solid { color: #fff; background: #c23b3b; border-color: #c23b3b; font-weight: 700; }
.action-btn-danger-solid:hover { background: #d94545; border-color: #d94545; color: #fff; box-shadow: 0 10px 24px rgba(194,59,59,.25); }

.identity-gate { display: flex; justify-content: center; padding-top: 60px; }
.identity-gate[hidden] { display: none; }
.identity-card { position: relative; width: min(420px, 100%); padding: 34px; border: 2px solid transparent; border-radius: 14px; background-image: linear-gradient(#0a0b0d, #0a0b0d), linear-gradient(90deg, #cfd2d8, #fff, #cfd2d8); background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 300% 100%; box-shadow: 0 40px 120px #000; }
.identity-card-discord:has(.discord-login-btn:hover), .identity-card-discord:has(.discord-login-btn:focus-visible) { background-image: linear-gradient(#0a0b0d, #0a0b0d), linear-gradient(90deg, #5865f2, #8791ff, #5865f2); animation: checkout-accent-flow 2.4s linear infinite; box-shadow: 0 40px 120px #000, 0 0 140px -50px rgba(88,101,242,.4); }
.identity-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; color: #565b63; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.identity-divider::before, .identity-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.identity-card h2 { margin: 10px 0 8px; font-size: 30px; letter-spacing: -.03em; }
.identity-copy { margin: 0 0 6px; color: #9298a1; font-size: 13px; line-height: 1.6; }
.identity-note { margin: 14px 0 0; color: var(--green); font-size: 13px; }
.identity-card label { display: block; margin: 16px 0 8px; color: #7f858e; font: 8px Consolas, monospace; text-transform: uppercase; letter-spacing: .1em; }

.tickets-hub { position: relative; isolation: isolate; display: flex; min-height: calc(100vh - 190px); flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 46px 0 58px; }
.tickets-hub[hidden] { display: none; }
.tickets-hub::before { content: ""; position: absolute; z-index: -2; top: -170px; left: 50%; width: min(1000px, 112vw); height: 660px; transform: translateX(-50%); background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.055), transparent 44%), radial-gradient(circle at 68% 48%, rgba(88,101,242,.08), transparent 34%); pointer-events: none; }
.tickets-hub::after { content: ""; position: absolute; z-index: -1; inset: 16% 8% auto; height: 340px; opacity: .12; background: linear-gradient(90deg, transparent 0 9%, rgba(255,255,255,.13) 9.1% 9.2%, transparent 9.3% 90%, rgba(255,255,255,.13) 90.1% 90.2%, transparent 90.3%), linear-gradient(0deg, transparent 0 49.8%, rgba(255,255,255,.1) 50%, transparent 50.2%); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); pointer-events: none; }
.tickets-hub-brand { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.015)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.65); }
.tickets-hub-brand img { width: 31px; height: 31px; object-fit: contain; }
.tickets-hub-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: #858b95; font: 700 9px/1 Consolas, monospace; letter-spacing: .22em; }
.tickets-hub-kicker span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px rgba(69,239,139,.72); }
.tickets-hub h1 { margin: 0 0 13px; font-size: clamp(42px, 5.1vw, 66px); line-height: .98; letter-spacing: -.055em; }
.tickets-hub-sub { max-width: 570px; margin: 0 0 40px; color: #8c929c; font-size: 15px; line-height: 1.65; }
.tickets-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; width: min(880px, 100%); }
.tickets-hub-action { position: relative; display: flex; min-height: 300px; flex-direction: column; align-items: flex-start; padding: 25px 26px 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.105); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.048), rgba(255,255,255,.012) 58%); color: #f4f5f6; cursor: pointer; text-align: left; box-shadow: inset 0 1px rgba(255,255,255,.035), 0 22px 60px rgba(0,0,0,.28); transition: border-color .28s ease, background .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; }
.tickets-hub-action::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 82% 18%, rgba(255,255,255,.1), transparent 31%); transition: opacity .28s ease; }
.tickets-hub-action::after { content: none; }
.tickets-hub-action:hover { z-index: 2; border-color: rgba(255,255,255,.3); background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.02) 58%); transform: translateY(-5px); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 34px 90px rgba(0,0,0,.5); }
.tickets-hub-action:hover::before { opacity: 1; }
.tickets-hub-action:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tickets-hub-action-history:hover { border-color: rgba(113,124,255,.55); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 34px 90px rgba(0,0,0,.5), 0 0 80px -50px rgba(88,101,242,.75); }
.tickets-hub-action-top { position: relative; z-index: 1; display: flex; width: 100%; align-items: center; justify-content: space-between; }
.tickets-hub-action-index { color: #6f747d; font: 700 9px/1 Consolas, monospace; letter-spacing: .16em; }
.tickets-hub-action-arrow { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; color: #7d828b; font-size: 0; line-height: 1; transition: color .25s, border-color .25s, transform .25s; }
.tickets-hub-action-arrow::before { content: ""; display: block; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 9 9 3M4.5 3H9v4.5' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 9 9 3M4.5 3H9v4.5' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat; }
.tickets-hub-action:hover .tickets-hub-action-arrow { border-color: rgba(255,255,255,.26); color: #fff; transform: rotate(45deg); }
.tickets-hub-action-icon { position: relative; z-index: 1; display: grid; width: 50px; height: 50px; place-items: center; margin: 40px 0 25px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.055); color: #fff; font: 300 27px/1 Inter, sans-serif; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.tickets-hub-action-history .tickets-hub-action-icon { border-color: rgba(115,126,255,.22); background: rgba(88,101,242,.09); }
.tickets-hub-action-icon-lines { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.tickets-hub-action-icon-lines i { display: block; width: 18px; height: 1px; border-radius: 2px; background: #aab1ff; }
.tickets-hub-action-icon-lines i:nth-child(2) { width: 13px; margin-right: 5px; }
.tickets-hub-action-title { position: relative; z-index: 1; margin-bottom: 9px; font-size: 24px; font-weight: 700; letter-spacing: -.035em; }
.tickets-hub-action-sub { position: relative; z-index: 1; max-width: 330px; color: #858b94; font-size: 12.5px; line-height: 1.65; }
.tickets-hub-action-cta { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 24px; color: #c5c9cf; font: 700 9px/1 Consolas, monospace; letter-spacing: .14em; }
.tickets-hub-action-cta span { color: #fff; font: 400 14px/1 Inter, sans-serif; transition: transform .22s; }
.tickets-hub-action:hover .tickets-hub-action-cta span { transform: translateX(4px); }
.ticket-card-orbit { position: absolute; z-index: 0; right: -2px; bottom: -19px; width: 190px; height: 190px; opacity: .34; transform: translate(19%, 17%) rotate(-7deg); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.ticket-card-orbit::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.055) 0 1px, transparent 2px), linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.05) 50%, transparent 50.3%), linear-gradient(0deg, transparent 49.7%, rgba(255,255,255,.05) 50%, transparent 50.3%); background-size: 17px 17px, 100% 100%, 100% 100%; mask-image: radial-gradient(circle, #000 0 61%, transparent 76%); }
.ticket-orbit-track { position: absolute; display: block; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; animation: ticket-orbit-spin 16s linear infinite; }
.ticket-orbit-track::after { content: ""; position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: #bfc4cb; box-shadow: 0 0 10px rgba(255,255,255,.55); }
.ticket-orbit-track-outer { inset: 5%; }
.ticket-orbit-track-inner { inset: 27%; border-color: rgba(255,255,255,.085); animation-duration: 10s; animation-direction: reverse; }
.ticket-orbit-track-inner::after { width: 5px; height: 5px; border: 1px solid rgba(255,255,255,.82); background: #050607; box-shadow: 0 0 0 2px rgba(0,0,0,.72), 0 0 10px rgba(255,255,255,.42); }
.ticket-orbit-axis { position: absolute; top: 50%; left: 4%; width: 92%; height: 1px; transform: rotate(-28deg); transform-origin: center; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }
.ticket-orbit-core { position: absolute; top: 50%; left: 50%; display: grid; width: 42px; height: 42px; place-items: center; transform: translate3d(-50%, -50%, 0) rotate(7deg); border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.025)); color: #fff; font: 300 20px/1 Inter, sans-serif; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 28px rgba(255,255,255,.035); animation: ticket-orbit-float 4.2s cubic-bezier(.45,0,.55,1) infinite; will-change: transform; backface-visibility: hidden; }
.ticket-card-orbit-history .ticket-orbit-track { border-color: rgba(123,134,255,.19); }
.ticket-card-orbit-history .ticket-orbit-track::after { background: #f5f6f7; box-shadow: 0 0 11px rgba(255,255,255,.62); }
.ticket-card-orbit-history .ticket-orbit-track-inner::after { border: 1px solid rgba(255,255,255,.82); background: #050607; box-shadow: 0 0 0 2px rgba(0,0,0,.72), 0 0 10px rgba(255,255,255,.42); }
.ticket-card-orbit-history .ticket-orbit-axis { background: linear-gradient(90deg, transparent, rgba(123,134,255,.18), transparent); }
.ticket-card-orbit-history .ticket-orbit-core { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-color: rgba(123,134,255,.26); background: linear-gradient(145deg, rgba(88,101,242,.2), rgba(88,101,242,.055)); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 0 32px rgba(88,101,242,.11); }
.ticket-card-orbit-history .ticket-orbit-core b { display: block; width: 14px; height: 1px; border-radius: 2px; background: #aeb6ff; }
.ticket-card-orbit-history .ticket-orbit-core b:nth-child(2) { width: 10px; margin-right: 4px; }
.tickets-hub-action:hover .ticket-card-orbit { opacity: .7; transform: translate(12%, 10%) rotate(0); }
.tickets-hub-action:hover .ticket-orbit-track { animation-duration: 10s; }
@keyframes ticket-orbit-spin { to { transform: rotate(360deg); } }
@keyframes ticket-orbit-float {
  0%, 100% { transform: translate3d(-50%, calc(-50% - 2px), 0) rotate(7deg); }
  50% { transform: translate3d(-50%, calc(-50% + 3px), 0) rotate(7deg); }
}
.tickets-hub-status { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 27px 0 0; color: #666c75; font: 700 8px/1.4 Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.tickets-hub-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(69,239,139,.7); }
.tickets-hub-status i { width: 1px; height: 10px; margin: 0 3px; background: rgba(255,255,255,.13); }
.tickets-hub-back { display: block; margin: 18px 0 0; padding: 0; border: 0; background: none; color: #7f858e; font-size: 12.5px; cursor: pointer; text-align: left; }
.tickets-hub-back:hover { color: #fff; }

.ticket-auth-modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 24px; }
.ticket-auth-modal[hidden] { display: none; }
.ticket-auth-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0,0,0,.79); backdrop-filter: blur(15px); cursor: default; }
.ticket-auth-panel { position: relative; width: min(520px, 100%); max-height: calc(100vh - 48px); overflow-x: hidden; overflow-y: auto; padding: 42px 42px 34px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: radial-gradient(circle at 82% 0, rgba(88,101,242,.11), transparent 28%), linear-gradient(150deg, #0d0e11, #08090b 62%); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 48px 160px rgba(0,0,0,.85); text-align: left; animation: ticket-auth-enter .32s cubic-bezier(.2,.8,.2,1); }
.ticket-auth-panel::after { content: ""; position: absolute; right: -90px; top: 110px; width: 230px; height: 230px; border: 1px solid rgba(109,120,255,.07); border-radius: 50%; box-shadow: 0 0 0 38px rgba(109,120,255,.025), 0 0 0 78px rgba(109,120,255,.015); pointer-events: none; }
@keyframes ticket-auth-enter { from { opacity: 0; transform: translateY(16px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ticket-auth-close { position: absolute; z-index: 2; top: 16px; right: 17px; display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #6f747c; font: 300 23px/1 Inter, sans-serif; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.ticket-auth-close:hover { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; }
.ticket-auth-brand { position: relative; z-index: 1; display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.015)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 18px 45px rgba(0,0,0,.45); }
.ticket-auth-brand img { width: 29px; height: 29px; object-fit: contain; }
.ticket-auth-kicker { position: relative; z-index: 1; margin: 0 0 11px; color: #747a84; font: 700 8px/1 Consolas, monospace; letter-spacing: .2em; text-align: center; }
.ticket-auth-panel h2 { position: relative; z-index: 1; margin: 0 0 10px; font-size: 31px; letter-spacing: -.045em; text-align: center; }
.ticket-auth-copy { position: relative; z-index: 1; max-width: 390px; margin: 0 auto 27px; color: #898f99; font-size: 13.5px; line-height: 1.55; text-align: center; }
.ticket-auth-discord { position: relative; z-index: 1; display: flex; width: 100%; height: 52px; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(124,135,255,.28); border-radius: 10px; background: linear-gradient(180deg, rgba(88,101,242,.13), rgba(88,101,242,.07)); color: #f2f3ff; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.045); transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.ticket-auth-discord:hover { border-color: rgba(134,144,255,.6); background: linear-gradient(180deg, rgba(88,101,242,.23), rgba(88,101,242,.12)); transform: translateY(-1px); box-shadow: 0 14px 34px rgba(28,34,95,.25); }
.ticket-auth-discord .discord-login-icon { width: 20px; height: 20px; }
.ticket-auth-discord.is-loading { cursor: wait; opacity: .72; transform: none; }
.ticket-auth-discord.is-loading::after { content: ""; width: 14px; height: 14px; margin-left: 2px; border: 2px solid rgba(255,255,255,.22); border-top-color: #fff; border-radius: 50%; animation: ticket-auth-spin .7s linear infinite; }
@keyframes ticket-auth-spin { to { transform: rotate(360deg); } }
.ticket-auth-divider { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; margin: 25px 0 20px; color: #5d626b; font-size: 10.5px; }
.ticket-auth-divider::before, .ticket-auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.085); }
.ticket-auth-divider span { white-space: nowrap; }
.ticket-auth-label { position: relative; z-index: 1; display: block; margin: 0 0 9px; color: #a7acb4; font-size: 11.5px; font-weight: 600; }
.ticket-auth-email-row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
#hub-verify-request-row[hidden], #hub-verify-code-row[hidden] { display: none; }
.ticket-auth-input { width: 100%; min-width: 0; height: 52px; padding: 0 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; outline: none; background: rgba(255,255,255,.035); color: #f2f3f5; font: 13px Inter, sans-serif; box-shadow: inset 0 1px rgba(255,255,255,.025); transition: border-color .2s, background .2s, box-shadow .2s; }
.ticket-auth-input::placeholder { color: #555b64; }
.ticket-auth-input:focus { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.055); box-shadow: 0 0 0 3px rgba(255,255,255,.035); }
.ticket-auth-code { letter-spacing: .12em; }
.ticket-auth-submit { height: 52px; padding: 0 19px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.055); color: #d9dce1; font-size: 12px; font-weight: 700; cursor: pointer; transition: color .2s, border-color .2s, background .2s, transform .2s; }
.ticket-auth-submit:hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.095); color: #fff; transform: translateY(-1px); }
.ticket-auth-submit-light { border-color: #f1f2f4; background: #f1f2f4; color: #090a0c; }
.ticket-auth-submit-light:hover { border-color: #fff; background: #fff; color: #090a0c; }
.ticket-auth-email-note { position: relative; z-index: 1; margin: 10px 0 0; color: #5f656e; font-size: 10.5px; line-height: 1.5; }
.ticket-auth-panel .checkout-error { position: relative; z-index: 1; margin: 12px 0 0; }
.ticket-auth-privacy { position: relative; z-index: 1; margin: 26px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.075); color: #585e67; font-size: 10.5px; line-height: 1.55; text-align: center; }
body.ticket-auth-open { overflow: hidden; }
#hub-verify-request-row[hidden], #hub-verify-code-row[hidden] { display: none; }
#hub-verify-request-row .fake-input, #hub-verify-code-row .fake-input { flex: 1; min-width: 0; }
#hub-verify-request-row .action-btn, #hub-verify-code-row .action-btn { flex-shrink: 0; }

/* .fake-input and .checkout-panel label both set an explicit display,
   which (same origin, same specificity as the browser's [hidden] rule)
   wins the cascade tiebreak - so toggling just the hidden attribute on
   the new-ticket name/email fields (openNewTicketModal in tickets.js)
   silently does nothing without this override. */
#new-ticket-name[hidden], #new-ticket-email[hidden],
#new-ticket-name-label[hidden], #new-ticket-email-label[hidden] { display: none; }

.tickets-app { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.tickets-app[hidden] { display: none; }
.tickets-app[hidden] { display: none; }
.tickets-sidebar { display: flex; flex-direction: column; gap: 2px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #08090b; position: sticky; top: 108px; }
.tickets-sidebar-title { margin: 0 0 8px; color: #7f858e; font: 8px Consolas, monospace; text-transform: uppercase; letter-spacing: .1em; }
.tickets-sidebar > a, .tickets-sidebar > .faq-item { border-top: 1px solid var(--soft-line); }
.tickets-sidebar > a:first-child, .tickets-sidebar > .faq-item:first-child { border-top: 0; }
.tickets-sidebar > a { display: block; padding: 9px 0; color: #b6bbc3; font-size: 13px; transition: color .2s; }
.tickets-sidebar > a:hover { color: #fff; }

.faq-question { display: block; width: 100%; padding: 9px 0; border: 0; background: none; color: #b6bbc3; font-size: 13px; text-align: left; cursor: pointer; transition: color .2s; }
.faq-question::before { content: "+ "; color: #5a5f66; }
.faq-question.is-open::before { content: "- "; color: var(--green); }
.faq-question:hover { color: #fff; }
.faq-answer { padding: 0 0 12px 14px; color: #9298a1; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.faq-answer[hidden] { display: none; }
.faq-answer a { color: var(--green); }
.faq-answer ol { margin: 0; padding-left: 16px; }
.faq-answer li { margin-bottom: 6px; }
.faq-answer code { padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.06); font-size: 11px; overflow-wrap: anywhere; }

.tickets-panel { border: 1px solid var(--line); border-radius: 12px; background: #08090b; padding: 30px; }
.tickets-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.tickets-panel-header h1 { margin: 0 0 6px; font-size: 32px; letter-spacing: -.03em; }
.tickets-welcome { margin: 0; color: #8f959e; font-size: 13px; }

.tickets-tabs { display: flex; gap: 8px; margin: 26px 0 20px; border-bottom: 1px solid var(--soft-line); padding-bottom: 14px; }
.tickets-tabs-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 26px 0 20px; border-bottom: 1px solid var(--soft-line); padding-bottom: 14px; }
.tickets-tabs-row .tickets-tabs { margin: 0; border-bottom: 0; padding-bottom: 0; flex-wrap: wrap; }
.tickets-tab { padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); color: #9298a1; font-size: 12px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.tickets-tab.is-active { color: #08090a; background: #f1f2f3; border-color: #f1f2f3; }

.tickets-list { display: flex; flex-direction: column; gap: 10px; }
.tickets-empty { padding: 40px 0; text-align: center; color: #7f858e; font-size: 13px; }
.ticket-row-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.015); cursor: pointer; transition: border-color .2s, background .2s; }
.ticket-row-item:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.03); }
.ticket-row-unread { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; border: 2px solid #0a0b0d; background: var(--green); color: #0c2318; font: 700 11px Consolas, monospace; display: flex; align-items: center; justify-content: center; }
.ticket-row-item-new { animation: ticket-row-flash 2.2s ease-out; }
@keyframes ticket-row-flash {
  0% { border-color: rgba(88,101,242,.7); background: rgba(88,101,242,.16); box-shadow: 0 0 0 1px rgba(88,101,242,.4), 0 0 24px rgba(88,101,242,.25); }
  100% { border-color: var(--line); background: rgba(255,255,255,.015); box-shadow: 0 0 0 1px rgba(88,101,242,0), 0 0 24px rgba(88,101,242,0); }
}
.ticket-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ticket-row-subject { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row-meta { display: flex; gap: 10px; align-items: center; color: #7f858e; font-size: 11px; }
.ticket-status-badge { padding: 3px 9px; border-radius: 999px; font: 700 9px Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }
.ticket-status-badge.active { color: #0c2318; background: var(--green); }
.ticket-status-badge.closed { color: #d7d9dc; background: rgba(255,255,255,.12); }
.ticket-row-arrow { color: #5a5f66; font-size: 18px; flex-shrink: 0; }

.ticket-detail-modal, .checkout-modal { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ticket-detail-modal[hidden] { display: none; }
.ticket-detail-panel { position: relative; width: min(860px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 34px; border: 1px solid var(--line); border-radius: 14px; background: #0a0b0d; box-shadow: 0 40px 120px #000; }
.ticket-detail-panel h3 { margin: 8px 0 20px; font-size: 24px; letter-spacing: -.03em; }
.ticket-thread { display: flex; flex-direction: column; gap: 18px; max-height: 520px; overflow-y: auto; margin-bottom: 20px; padding: 4px 4px 4px 0; }

.chat-row { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; }
.chat-row-new { animation: chat-row-in .45s cubic-bezier(.2,.8,.2,1), chat-row-flash 1.8s ease-out; }
@keyframes chat-row-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chat-row-flash {
  0% { background: rgba(88,101,242,.28); box-shadow: 0 0 0 1px rgba(88,101,242,.35); }
  100% { background: rgba(88,101,242,0); box-shadow: 0 0 0 1px rgba(88,101,242,0); }
}
.chat-row.from-customer { flex-direction: row-reverse; }
.chat-avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 13px/1 Inter, sans-serif; color: #0a0b0d; object-fit: cover; background: #1a1c20; }
.chat-col { display: flex; flex-direction: column; max-width: 78%; }
.chat-row.from-customer .chat-col { align-items: flex-end; }
.chat-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chat-name { font-size: 12px; font-weight: 700; color: #d7d9dc; }
.chat-row.from-customer .chat-name { color: var(--green); }
.chat-badge { padding: 2px 7px; border-radius: 999px; background: rgba(69,239,139,.15); color: var(--green); font: 700 8px Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }
.chat-bubble { padding: 11px 14px; border-radius: 12px; font-size: 13px; line-height: 1.55; word-break: break-word; transition: transform .15s; }
.chat-row.from-staff .chat-bubble { border: 1px solid var(--line); background: rgba(255,255,255,.03); border-top-left-radius: 3px; }
.chat-row.from-customer .chat-bubble { background: #f1f2f3; color: #14161a; border-top-right-radius: 3px; }
.chat-footer { margin-top: 5px; color: #5a5f66; font-size: 10px; }
.chat-system { position: relative; align-self: center; max-width: 92%; margin: 6px 0; padding: 11px 16px 11px 36px; border-radius: 10px; border: 1px solid rgba(255,187,64,.2); border-left: 2px solid rgba(255,187,64,.6); background: linear-gradient(135deg, rgba(255,187,64,.1), rgba(255,187,64,.03)); color: #d9b183; font-size: 11.5px; line-height: 1.6; text-align: left; }
.chat-system::before { content: "⏳"; position: absolute; left: 13px; top: 11px; font-size: 12px; line-height: 1; }

/* Starts around 3 lines instead of the ~130px every other .fake-area
   uses, then grows with the content (see the 'input' listener in
   tickets.js/admin.js) - a reply box doesn't need to loom that large
   before anyone's typed a word into it. */
#ticket-reply-body, #admin-reply-body { height: 72px; min-height: 72px; max-height: 280px; overflow-y: auto; transition: height .12s ease-out; }

.ticket-reply-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.ticket-closed-row { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.015); text-align: center; }
.ticket-closed-row[hidden] { display: none; }
.ticket-closed-note { margin: 0; color: #9298a1; font-size: 13px; }
.ticket-rating-prompt { margin: 0; color: #d7d9dc; font-size: 13px; font-weight: 600; }
.ticket-stars { display: flex; gap: 8px; }
.ticket-stars button { padding: 0; border: 0; background: none; color: #3a3d42; font-size: 26px; line-height: 1; cursor: pointer; transition: color .15s; }
.ticket-stars button:hover, .ticket-stars button.is-hovered { color: #6a6f77; }
.ticket-stars button.is-filled { color: var(--green); }
.ticket-rating-skip { border: 0; background: none; color: #5a5f66; font-size: 11px; cursor: pointer; text-decoration: underline; }
.text-link-btn { border: 0; background: none; padding: 0; color: #9298a1; font-size: 11px; cursor: pointer; text-decoration: underline; }
.text-link-btn:hover { color: #d7d9dc; }
.ticket-rating-done { margin: 0; color: var(--green); font-size: 13px; font-weight: 600; }


@media (max-width: 860px) {
  .tickets-app { grid-template-columns: 1fr; }
  .tickets-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .tickets-panel-header { flex-direction: column; }
}

@media (max-width: 640px) {
  .tickets-page { padding-top: 88px; }
  .tickets-main { padding: 0 10px 78px; overflow: hidden; }
  .tickets-hub { min-height: auto; padding: 34px 8px 34px; }
  .tickets-hub-brand { width: 52px; height: 52px; margin-bottom: 18px; border-radius: 15px; }
  .tickets-hub h1 { max-width: 100%; font-size: clamp(39px, 12vw, 52px); overflow-wrap: anywhere; }
  .tickets-hub-sub, .identity-copy, .tickets-welcome { max-width: 100%; overflow-wrap: anywhere; }
  .tickets-hub-sub { margin-bottom: 28px; padding: 0 8px; font-size: 13px; }
  .tickets-hub-grid { grid-template-columns: 1fr; }
  .tickets-hub-action { width: 100%; min-width: 0; min-height: 250px; padding: 21px 21px 20px; border-radius: 15px; }
  .tickets-hub-action-icon { width: 46px; height: 46px; margin: 27px 0 19px; }
  .tickets-hub-action-title { font-size: 22px; }
  .tickets-hub-action-sub { font-size: 12px; }
  .ticket-card-orbit { right: -4px; bottom: -12px; width: 160px; height: 160px; opacity: .29; }
  .tickets-hub-status { padding: 0 12px; line-height: 1.6; }
  .tickets-hub-status i { display: none; }
  .ticket-auth-modal { align-items: end; padding: 0; }
  .ticket-auth-panel { width: 100%; max-height: 94vh; max-height: 94dvh; padding: 35px 18px max(24px, env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 20px 20px 0 0; }
  .ticket-auth-panel h2 { font-size: 28px; }
  .ticket-auth-copy { padding: 0 10px; }
  .ticket-auth-email-row { grid-template-columns: 1fr; }
  .ticket-auth-submit { width: 100%; }
  .identity-card { width: 100%; min-width: 0; padding: 25px 18px; }
  .identity-card h2 { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 26px; overflow-wrap: anywhere; }
  .tickets-app { gap: 14px; }
  .tickets-sidebar { padding: 16px; border-radius: 10px; }
  .tickets-sidebar > *, .faq-answer, .faq-answer code { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
  .tickets-panel { width: 100%; padding: 20px 14px; border-radius: 10px; overflow: hidden; }
  .tickets-panel-header h1 { max-width: 100%; font-size: 27px; overflow-wrap: anywhere; }
  .tickets-panel-header .button { width: 100%; }
  .tickets-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tickets-tabs::-webkit-scrollbar { display: none; }
  .tickets-tab { flex: 0 0 auto; }
  .ticket-row-item { align-items: flex-start; gap: 10px; padding: 15px 13px; }
  .ticket-row-main { flex: 1 1 auto; max-width: calc(100% - 24px); }
  .ticket-row-subject { white-space: normal; overflow-wrap: anywhere; }
  .ticket-row-meta { flex-wrap: wrap; gap: 6px 9px; overflow-wrap: anywhere; }
  .ticket-detail-modal, .checkout-modal { align-items: flex-end; padding: 0; }
  .ticket-detail-panel { width: 100%; max-height: 92vh; max-height: 92dvh; padding: 28px 16px max(22px, env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .ticket-detail-panel h3 { padding-right: 28px; font-size: 21px; overflow-wrap: anywhere; }
  .ticket-thread { max-height: 54vh; max-height: 54dvh; }
  .chat-row { gap: 8px; min-width: 0; }
  .chat-avatar { width: 31px; height: 31px; }
  .chat-col { min-width: 0; max-width: calc(100% - 39px); }
  .chat-header { flex-wrap: wrap; }
  .chat-name, .chat-bubble, .chat-system { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
  .ticket-reply-actions { justify-content: stretch; }
  .ticket-reply-actions .action-btn { flex: 1 1 130px; }
  .ticket-closed-row { padding: 20px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticket-orbit-track, .ticket-orbit-core { animation: none; }
}