.support-page, .ticket-details-page {
    margin: 0 auto;
    max-width: 94rem;
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 4vw, 3.5rem) 6rem;
}

.support-hero, .ticket-header { align-items: start; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 2rem; }
.support-hero h1, .ticket-header h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: .96; max-width: 17ch; overflow-wrap: anywhere; }
.support-hero p, .ticket-header p { max-width: 65ch; }
.support-assurance { background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 12%, var(--surface)), color-mix(in srgb, var(--violet) 8%, var(--surface))); border: 1px solid var(--line-strong); border-radius: 1rem; display: grid; gap: .35rem; max-width: 24rem; padding: 1rem 1.15rem; }
.support-assurance span { color: var(--muted); font-size: .88rem; }
.support-workspace { align-items: start; display: grid; gap: 1.5rem; grid-template-columns: minmax(19rem, .78fr) minmax(0, 1.35fr); }
.support-create, .support-queue, .support-reply, .support-thread, .ticket-facts, .support-empty { background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; box-shadow: var(--shadow); }
.support-create, .support-queue, .support-reply { padding: clamp(1.25rem, 3vw, 2rem); }
.support-create { position: sticky; top: 1.25rem; }
.support-create h2, .support-queue h2, .support-reply h2 { margin: .45rem 0 .65rem; }
.support-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.support-form-row { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.support-form label { display: grid; gap: .4rem; }
.support-form label > span { font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.support-form small { color: var(--muted); line-height: 1.45; }
.support-form input, .support-form select, .support-form textarea { background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: .7rem; color: var(--text); font: inherit; max-width: 100%; padding: .72rem .8rem; resize: vertical; }
.support-form button { background: linear-gradient(100deg, var(--cyan), var(--violet)); border: 0; border-radius: .75rem; color: #071018; cursor: pointer; font: inherit; font-weight: 850; padding: .8rem 1rem; }
.support-notice { background: color-mix(in srgb, var(--cyan) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--line)); border-radius: .8rem; display: grid; gap: .25rem; margin-bottom: 1.25rem; padding: .9rem 1rem; }
.support-notice small { color: var(--muted); overflow-wrap: anywhere; }
.support-section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 1rem; }
.support-ticket-list { border: 1px solid var(--line); border-radius: .9rem; overflow: hidden; }
.support-ticket-list > a { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; padding: 1rem; text-decoration: none; }
.support-ticket-list > a:last-child { border-bottom: 0; }
.support-ticket-list > a:hover { background: color-mix(in srgb, var(--surface-raised) 72%, transparent); }
.support-ticket-main { display: grid; gap: .3rem; min-width: 0; }
.support-ticket-main strong { overflow-wrap: anywhere; }
.support-ticket-main small { color: var(--muted); }
.support-number { color: var(--cyan); font-family: Consolas, monospace; font-size: .78rem; font-weight: 850; letter-spacing: .06em; }
.support-ticket-tags { align-items: end; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: end; }
.support-pill { border: 1px solid var(--line-strong); border-radius: 999px; font-size: .77rem; font-weight: 800; padding: .35rem .62rem; text-align: center; }
.support-pill.priority-high { border-color: color-mix(in srgb, #f59e0b 60%, var(--line)); color: #d97706; }
.support-pill.priority-urgent, .support-pill.priority-critical { border-color: color-mix(in srgb, #ef4444 60%, var(--line)); color: #dc2626; }
.support-empty { padding: clamp(1.75rem, 5vw, 3.5rem); text-align: center; }
.support-pagination { display: flex; justify-content: end; margin-top: 1rem; }
.support-pagination a, .support-back { border: 1px solid var(--line-strong); border-radius: 999px; display: inline-flex; padding: .62rem .9rem; text-decoration: none; }
.support-back { margin-bottom: 1.25rem; }
.ticket-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.25rem; overflow: hidden; }
.ticket-facts > div { background: color-mix(in srgb, var(--surface-raised) 70%, transparent); display: grid; gap: .35rem; padding: 1rem; }
.ticket-facts span { color: var(--muted); font-size: .75rem; text-transform: uppercase; }
.ticket-facts strong { overflow-wrap: anywhere; }
.support-thread { display: grid; gap: 1rem; padding: clamp(1rem, 3vw, 1.75rem); }
.support-message { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 1rem; max-width: min(75ch, 92%); padding: 1rem 1.1rem; }
.support-message.author-producer { border-color: color-mix(in srgb, var(--cyan) 40%, var(--line)); justify-self: end; }
.support-message header { align-items: baseline; display: flex; gap: 1rem; justify-content: space-between; }
.support-message time, .support-message footer { color: var(--muted); font-size: .75rem; }
.support-message-body { line-height: 1.65; margin: .8rem 0; overflow-wrap: anywhere; white-space: normal; }
.support-reply { margin-top: 1.25rem; }
.support-form input:focus-visible, .support-form select:focus-visible, .support-form textarea:focus-visible, .support-form button:focus-visible, .support-ticket-list a:focus-visible, .support-pagination a:focus-visible, .support-back:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (max-width: 72rem) { .support-workspace { grid-template-columns: 1fr; } .support-create { position: static; } .ticket-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 46rem) { .support-hero, .ticket-header { display: grid; } .support-form-row, .ticket-facts { grid-template-columns: 1fr; } .support-ticket-list > a { grid-template-columns: 1fr; } .support-ticket-tags { justify-content: start; } .support-message { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .support-ticket-list > a, .support-form button { scroll-behavior: auto; transition: none; } }