@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,600&display=swap');

:root { --ink:#0a090b; --panel:#131116; --panel-raised:#19161b; --armed:#8c2f42; --armed-bright:#c9657c; --paper:#eee9e6; --muted:#8f858a; --muted-dim:#625a5e; --line:rgba(238,233,230,.12); --line-strong:rgba(238,233,230,.22); --soft:rgba(238,233,230,.04); --max:1240px; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; color:var(--paper); background:var(--ink); font-family:Manrope,Arial,sans-serif; }
a { color:inherit; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }

.support-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:34px; max-width:var(--max); min-height:112px; margin:auto; padding:0 30px; background:color-mix(in srgb, var(--ink) 92%, transparent); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.wordmark { color:var(--paper); font-size:18px; font-weight:800; letter-spacing:-.06em; text-decoration:none; }
.wordmark-logo { display:block; height:92px; width:auto; }
.support-header nav { display:flex; gap:25px; }
.support-header nav a,.back-link { color:var(--muted); font:11px "DM Mono",monospace; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; transition:color .2s ease; }
.support-header nav a:hover,.support-header nav a.active,.back-link:hover { color:var(--paper); }
.back-link { margin-left:auto; padding:9px 0; }
.back-link span { color:var(--armed-bright); }

.panel-name { margin:0; color:var(--armed-bright); font:11px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.status-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 7px; border:1px solid var(--line-strong); border-radius:999px; font:11px "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.status-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-armed { color:var(--armed-bright); border-color:rgba(201,101,124,.4); background:rgba(140,47,66,.12); }
.status-armed .status-dot { box-shadow:0 0 4px 1px var(--armed); }

main { max-width:var(--max); margin:auto; padding:0 30px 90px; }
.support-intro { padding:92px 0 44px; }
.support-intro h1,.support-gate h2,.sidebar-top h2,.dialog-head h2 { margin:0; font-family:"Playfair Display",Georgia,serif; font-weight:600; letter-spacing:-.045em; }
.support-intro h1 { max-width:680px; font-size:clamp(52px,7vw,88px); line-height:.94; }
.support-intro h1 .accent { color:var(--armed-bright); }
.support-intro > div > p { max-width:510px; margin:27px 0 0; color:#c4bbbe; font-size:14px; line-height:1.8; }

.support-gate { position:relative; display:grid; justify-items:center; max-width:690px; min-height:480px; margin:26px auto 0; padding:74px 50px 45px; overflow:hidden; text-align:center; border:1px solid var(--line-strong); border-radius:4px; background:var(--panel); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 28px 70px rgba(0,0,0,.18); }
.support-gate[hidden] { display:none; }
.support-gate h2 { margin-top:15px; font-size:clamp(35px,5vw,54px); line-height:.94; }
.support-gate > p:not(.panel-name) { max-width:425px; margin:23px 0 29px; color:var(--muted); font-size:13px; line-height:1.8; }
.support-gate small { max-width:350px; margin-top:19px; color:var(--muted); font:11px "DM Mono",monospace; line-height:1.6; }

.primary-action { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:45px; padding:0 16px; border:1px solid var(--armed); border-radius:2px; color:#fff; background:var(--armed); font:11px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; transition:background .22s ease,box-shadow .22s ease,transform .22s ease; }
.primary-action:hover { background:#77283a; box-shadow:0 14px 28px rgba(140,47,66,.32); transform:translateY(-2px); }
.primary-action span { font-size:15px; }
.primary-action.compact { min-height:38px; padding:0 12px; font-size:11px; }

.support-workspace { display:grid; grid-template-columns:318px minmax(0,1fr); min-height:650px; overflow:hidden; border:1px solid var(--line-strong); border-radius:4px; background:var(--panel); box-shadow:0 30px 70px rgba(0,0,0,.2); }
.support-workspace[hidden] { display:none; }
.ticket-sidebar { display:flex; flex-direction:column; min-height:650px; border-right:1px solid var(--line); background:rgba(0,0,0,.16); }
.sidebar-top { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:27px 24px 20px; }
.sidebar-top h2 { font-size:28px; }
.ticket-search { position:relative; margin:0 20px 14px; }
.ticket-search input { padding:10px 40px 10px 12px; border:1px solid var(--line); border-radius:2px; color:var(--paper); background:#100e10; font:12px Manrope,Arial,sans-serif; }
.ticket-search input:focus { outline:none; border-color:var(--armed-bright); box-shadow:0 0 0 3px rgba(140,47,66,.12); }
.ticket-search kbd { position:absolute; top:50%; right:8px; transform:translateY(-50%); padding:2px 6px; border:1px solid var(--line-strong); border-radius:2px; color:var(--muted); background:var(--panel); font:10px "DM Mono",monospace; font-style:normal; pointer-events:none; }
.ticket-filters { display:flex; flex-wrap:wrap; gap:6px; padding:0 20px 16px; }
.ticket-filters button { flex:0 0 auto; padding:7px 9px; border:1px solid transparent; border-radius:2px; color:var(--muted); background:transparent; font:11px "DM Mono",monospace; letter-spacing:.03em; text-transform:uppercase; }
.ticket-filters button[aria-selected="true"] { border-color:rgba(201,101,124,.27); color:var(--paper); background:rgba(140,47,66,.12); }
.ticket-filters span { color:var(--armed-bright); }
.ticket-list { display:grid; align-content:start; gap:5px; padding:0 12px; }
.ticket-row { display:grid; gap:9px; width:100%; padding:16px 12px; border:1px solid transparent; border-radius:2px; color:inherit; background:transparent; text-align:left; transition:background .2s ease,border-color .2s ease; }
.ticket-row:hover { background:var(--soft); }
.ticket-row.selected { border-color:rgba(201,101,124,.3); background:rgba(140,47,66,.09); }
.ticket-row-top { display:flex; gap:9px; align-items:center; }
.ticket-row strong { overflow:hidden; font-size:12px; font-weight:600; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.ticket-row time { margin-left:auto; color:var(--muted-dim); font:11px "DM Mono",monospace; white-space:nowrap; }
.ticket-row small { overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }

.status { display:inline-flex; width:max-content; align-items:center; gap:5px; min-height:19px; padding:0 8px; border:1px solid; border-radius:999px; font:11px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
.status::before { width:6px; height:6px; border-radius:50%; content:''; background:currentColor; }
.status.open { border-color:rgba(201,101,124,.4); color:var(--armed-bright); background:rgba(140,47,66,.1); }
.status.open::before { box-shadow:0 0 4px 1px currentColor; }
.status.closed { border-color:var(--line-strong); color:var(--muted); background:rgba(255,255,255,.03); }

.sidebar-footer { display:flex; gap:10px; align-items:center; margin:auto 20px 19px; padding-top:17px; border-top:1px solid var(--line); }
.avatar { display:grid; width:29px; height:29px; place-items:center; border-radius:2px; color:#fff; background:var(--armed); font:11px "DM Mono",monospace; }
.sidebar-footer div { display:grid; gap:1px; }
.sidebar-footer strong { font-size:12px; }
.sidebar-footer small { color:var(--muted); font:11px "DM Mono",monospace; }
.sidebar-footer button { margin-left:auto; border:0; color:var(--muted); background:none; }

.ticket-detail { min-width:0; padding:34px 38px; }
.detail-empty { display:grid; min-height:530px; align-content:center; justify-items:center; text-align:center; }
.detail-empty-icon { width:44px; height:44px; margin-bottom:6px; color:var(--muted-dim); }
.detail-empty h2 { margin:18px 0 9px; font:38px "Playfair Display",Georgia,serif; letter-spacing:-.045em; }
.detail-empty p { max-width:330px; margin:0; color:var(--muted); font-size:12px; line-height:1.8; }
.detail-head { display:flex; gap:22px; align-items:start; padding-bottom:28px; border-bottom:1px solid var(--line); }
.detail-head > div { min-width:0; }
.detail-head h2 { margin:0; font:38px "Playfair Display",Georgia,serif; letter-spacing:-.045em; }
.detail-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin:13px 0 0; color:var(--muted); font:11px "DM Mono",monospace; }
.detail-meta .panel-name { letter-spacing:.1em; }
.detail-head .status { margin-left:auto; }

.thread { display:grid; gap:20px; padding:30px 0; }
.message { max-width:620px; padding:18px 20px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.025); }
.message.support { margin-right:auto; }
.message.you { margin-left:auto; border-color:rgba(201,101,124,.26); background:rgba(140,47,66,.09); }
.message-meta { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.message-meta strong { font-size:12px; }
.message-meta span,.message-meta time { color:var(--muted); font:11px "DM Mono",monospace; }
.message-meta time { margin-left:auto; }
.message p { margin:0; color:#c7bec1; font-size:12px; line-height:1.75; }

.reply-prompt { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; padding:17px 19px; border:1px dashed var(--line-strong); border-radius:4px; color:var(--muted); font-size:12px; }
.quiet-button { min-height:42px; padding:0 13px; border:1px solid var(--line); border-radius:2px; color:var(--paper); background:transparent; font:11px "DM Mono",monospace; letter-spacing:.05em; text-transform:uppercase; }
.quiet-button:hover { border-color:var(--armed-bright); color:var(--armed-bright); }
.support-notice { margin:20px 0 0; color:#9fd3ac; font:11px "DM Mono",monospace; text-align:center; }

dialog { width:min(560px,calc(100% - 32px)); padding:0; border:1px solid var(--line-strong); border-radius:4px; color:var(--paper); background:var(--panel-raised); box-shadow:0 30px 90px rgba(0,0,0,.6); }
dialog::backdrop { background:rgba(4,3,4,.7); backdrop-filter:blur(8px); }
dialog form { display:grid; gap:18px; padding:28px; }
.dialog-head { display:flex; justify-content:space-between; align-items:start; margin-bottom:3px; }
.dialog-head h2 { font-size:30px; }
.icon-button { display:grid; width:31px; height:31px; place-items:center; border:1px solid var(--line); border-radius:2px; color:var(--muted); background:transparent; font-size:19px; }
.dialog-head + label { margin-top:0; }
label { display:grid; gap:8px; color:#c9bfc3; font:11px "DM Mono",monospace; letter-spacing:.05em; text-transform:uppercase; }
input,textarea,select { width:100%; padding:12px; border:1px solid var(--line); border-radius:2px; outline:none; color:var(--paper); background:#100e10; font:12px Manrope,Arial,sans-serif; letter-spacing:0; text-transform:none; }
textarea { min-height:126px; resize:vertical; }
input:focus,textarea:focus,select:focus { border-color:var(--armed-bright); box-shadow:0 0 0 3px rgba(140,47,66,.12); }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:5px; }

@media (max-width:820px) {
  .support-header,main { padding-right:20px; padding-left:20px; }
  .support-header { gap:18px; }
  .support-header nav { display:none; }
  .support-intro { padding-top:64px; }
  .support-workspace { grid-template-columns:1fr; }
  .ticket-sidebar { min-height:unset; border-right:0; border-bottom:1px solid var(--line); }
  .ticket-list { max-height:310px; overflow:auto; }
  .sidebar-footer { display:none; }
  .ticket-detail { min-height:500px; padding:27px 20px; }
  .detail-head h2 { font-size:31px; }
  .support-gate { padding-right:24px; padding-left:24px; }
}
@media (max-width:500px) {
  .support-intro h1 { font-size:51px; }
  .sidebar-top { align-items:start; }
  .primary-action.compact { font-size:0; width:38px; padding:0; }
  .primary-action.compact span { font-size:17px; }
  .detail-head { display:block; }
  .detail-head .status { margin-top:17px; }
  .message { max-width:100%; }
  .reply-prompt { display:grid; }
  .dialog-actions { display:grid; }
  .dialog-actions button { width:100%; }
}
:focus-visible { outline: 2px solid var(--armed-bright); outline-offset: 4px; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; }
}