@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:#0c0b0d; --surface:#121013; --raised:#191519; --rose:#bd455e; --rose-light:#e07a8c; --paper:#eee9e6; --muted:#a69da1; --line:rgba(238,233,230,.13); --soft:rgba(238,233,230,.055); --max:1240px; }
* { box-sizing:border-box; } body { min-width:320px; margin:0; color:var(--paper); background:radial-gradient(circle at 78% -5%, rgba(101,31,52,.25), transparent 31rem), var(--ink); font-family:Manrope,Arial,sans-serif; } a { color:inherit; } button,input,textarea,select { font:inherit; } button { cursor:pointer; }
.support-header { display:flex; align-items:center; gap:34px; max-width:var(--max); min-height:76px; margin:auto; padding:0 30px; border-bottom:1px solid var(--line); } .wordmark { color:var(--paper); font-size:18px; font-weight:800; letter-spacing:-.1em; text-decoration:none; }.support-header nav { display:flex; gap:25px; }.support-header nav a,.back-link { color:var(--muted); font:10px "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(--rose-light); }
main { max-width:var(--max); margin:auto; padding:0 30px 90px; }.support-intro { display:grid; grid-template-columns:1fr auto; gap:34px 80px; align-items:end; padding:92px 0 44px; }.eyebrow { margin:0; color:var(--rose-light); font:10px "DM Mono",monospace; letter-spacing:.15em; text-transform:uppercase; }.support-intro .eyebrow { grid-column:1/-1; margin-bottom:-17px; }.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:-.06em; }.support-intro h1 { max-width:680px; font-size:clamp(52px,7vw,88px); line-height:.9; }.support-intro > div > p { max-width:510px; margin:27px 0 0; color:#c4bbbe; font-size:14px; line-height:1.8; }.support-intro aside { display:flex; align-items:center; gap:12px; min-width:235px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:rgba(21,17,20,.62); box-shadow:0 18px 40px rgba(0,0,0,.12); }.availability-dot { width:8px; height:8px; border-radius:50%; background:#92c8a0; box-shadow:0 0 0 5px rgba(146,200,160,.1); }.support-intro aside div { display:grid; gap:2px; }.support-intro aside small,.support-intro aside em { color:var(--muted); font:9px "DM Mono",monospace; letter-spacing:.04em; }.support-intro aside strong { font-size:11px; }.support-intro aside em { margin-left:auto; font-style:normal; white-space:nowrap; }
.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); border-radius:16px; background:linear-gradient(145deg, rgba(54,22,33,.48), rgba(18,15,18,.84) 58%); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 28px 70px rgba(0,0,0,.18); }.support-gate::before { position:absolute; inset:-25%; z-index:0; content:""; background:radial-gradient(circle, rgba(189,69,94,.14), transparent 52%); filter:blur(20px); pointer-events:none; }.support-gate > * { position:relative; z-index:1; }.gate-mark { display:grid; width:54px; height:54px; margin-bottom:26px; place-items:center; border:1px solid rgba(224,122,140,.4); border-radius:16px; color:var(--rose-light); background:rgba(189,69,94,.1); font:24px "Playfair Display",Georgia,serif; }.support-gate h2 { margin-top:15px; font-size:clamp(35px,5vw,54px); line-height:.94; }.support-gate > p:not(.eyebrow) { 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:#82777b; font:9px "DM Mono",monospace; line-height:1.6; }
.primary-action { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:46px; padding:0 16px; border:1px solid var(--rose); border-radius:8px; color:#fff; background:var(--rose); font:10px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 10px 25px rgba(189,69,94,.2); transition:transform .22s ease,background .22s ease,box-shadow .22s ease; }.primary-action:hover { background:#d05970; box-shadow:0 14px 30px rgba(189,69,94,.32); transform:translateY(-2px); }.primary-action span { color:#ffd9df; font-size:15px; }.primary-action.compact { min-height:38px; padding:0 12px; font-size:9px; }
.support-workspace { display:grid; grid-template-columns:318px minmax(0,1fr); min-height:650px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:rgba(18,16,19,.72); box-shadow:0 30px 70px rgba(0,0,0,.2); animation:desk-arrival .56s cubic-bezier(.22,.8,.24,1) both; }.ticket-sidebar { display:flex; flex-direction:column; min-height:650px; border-right:1px solid var(--line); background:rgba(12,11,13,.46); }.sidebar-top { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:27px 24px 20px; }.sidebar-top .eyebrow { margin-bottom:9px; font-size:8px; }.sidebar-top h2 { font-size:31px; }.ticket-filters { display:flex; gap:6px; padding:0 20px 16px; overflow:auto; }.ticket-filters button { flex:0 0 auto; padding:7px 9px; border:1px solid transparent; border-radius:7px; color:var(--muted); background:transparent; font:9px "DM Mono",monospace; letter-spacing:.03em; text-transform:uppercase; }.ticket-filters button[aria-selected="true"] { border-color:rgba(224,122,140,.27); color:var(--paper); background:rgba(189,69,94,.12); }.ticket-filters span { color:var(--rose-light); }.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:10px; color:inherit; background:transparent; text-align:left; transition:background .2s ease,border-color .2s ease,transform .2s ease; }.ticket-row:hover { background:var(--soft); }.ticket-row.selected { border-color:rgba(224,122,140,.3); background:rgba(189,69,94,.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:#80757a; font:8px "DM Mono",monospace; white-space:nowrap; }.ticket-row small { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.status { display:inline-flex; width:max-content; align-items:center; min-height:19px; padding:0 7px; border:1px solid; border-radius:999px; font:8px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }.status.open { border-color:rgba(224,122,140,.4); color:var(--rose-light); background:rgba(189,69,94,.1); }.status.in-progress { border-color:rgba(215,172,104,.36); color:#e2bc7d; background:rgba(173,120,45,.1); }.status.resolved { border-color:rgba(122,190,142,.36); color:#9fd3ac; background:rgba(67,133,84,.1); }.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:9px; color:#ffd9df; background:var(--rose); font:10px "DM Mono",monospace; }.sidebar-footer div { display:grid; gap:1px; }.sidebar-footer strong { font-size:10px; }.sidebar-footer small { color:var(--muted); font:8px "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 h2 { margin:18px 0 9px; font:38px "Playfair Display",Georgia,serif; letter-spacing:-.06em; }.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 .eyebrow { margin-bottom:14px; }.detail-head h2 { margin:0; font:38px "Playfair Display",Georgia,serif; letter-spacing:-.06em; }.detail-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin:13px 0 0; color:var(--muted); font:9px "DM Mono",monospace; }.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:12px; background:rgba(255,255,255,.025); }.message.support { margin-right:auto; }.message.you { margin-left:auto; border-color:rgba(224,122,140,.26); background:rgba(189,69,94,.09); }.message-meta { display:flex; align-items:center; gap:8px; margin-bottom:9px; }.message-meta strong { font-size:11px; }.message-meta span,.message-meta time { color:var(--muted); font:8px "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 rgba(238,233,230,.2); border-radius:11px; color:var(--muted); font-size:11px; }.quiet-button { min-height:42px; padding:0 13px; border:1px solid var(--line); border-radius:8px; color:var(--paper); background:transparent; font:9px "DM Mono",monospace; letter-spacing:.05em; text-transform:uppercase; }.support-notice { margin:20px 0 0; color:#9fd3ac; font:10px "DM Mono",monospace; text-align:center; }
dialog { width:min(560px,calc(100% - 32px)); padding:0; border:1px solid var(--line); border-radius:16px; color:var(--paper); background:#181418; 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 .eyebrow { margin-bottom:9px; }.dialog-head h2 { font-size:33px; }.icon-button { display:grid; width:31px; height:31px; place-items:center; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:transparent; font-size:19px; }.dialog-head + label { margin-top:0; }label { display:grid; gap:8px; color:#c9bfc3; font:9px "DM Mono",monospace; letter-spacing:.05em; text-transform:uppercase; } input,textarea,select { width:100%; padding:12px; border:1px solid var(--line); border-radius:8px; 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(--rose-light); box-shadow:0 0 0 3px rgba(189,69,94,.12); }.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:5px; }
@keyframes desk-arrival { from { opacity:0; filter:blur(10px); transform:translateY(20px); } to { opacity:1; filter:blur(0); transform:translateY(0); } }@media (max-width:820px) { .support-header,main { padding-right:20px; padding-left:20px; }.support-header { gap:18px; }.support-header nav { display:none; }.support-intro { grid-template-columns:1fr; padding-top:64px; }.support-intro aside { width:100%; }.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; }.support-intro aside em { display:none; }.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%; } }@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }