.support-main{min-height:calc(100vh - 160px);padding-top:32px;padding-bottom:64px}
.support-hero{min-height:196px;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:22px;padding:30px 34px;border:1px solid rgba(67,179,255,.25);border-radius:17px;background:linear-gradient(96deg,rgba(5,12,22,.97),rgba(6,18,31,.87) 58%,rgba(8,20,34,.55)),url('./public/assets/arenaxpvp-hero.png') center 43%/cover,#0a1421;box-shadow:0 20px 55px rgba(0,0,0,.2)}
.support-hero:after{content:"";position:absolute;z-index:-1;width:390px;height:180px;right:-60px;top:-110px;border-radius:50%;background:rgba(18,158,255,.19);filter:blur(70px)}
.support-hero-mark{width:64px;height:64px;position:relative;flex:none;display:grid;place-items:center;border:1px solid rgba(70,198,255,.42);border-radius:18px;background:linear-gradient(145deg,rgba(0,154,255,.25),rgba(8,25,48,.88));box-shadow:0 0 35px rgba(0,145,255,.13);color:#d9f5ff;font-size:20px;font-weight:950;letter-spacing:-.08em}
.support-hero-mark:before,.support-hero-mark:after{content:"";position:absolute;inset:6px;border:1px solid rgba(55,181,255,.23);border-radius:13px;transform:rotate(45deg)}.support-hero-mark:after{inset:11px;border-color:rgba(110,211,255,.15);transform:rotate(-45deg)}.support-hero-mark span{position:relative;z-index:1;text-shadow:0 0 15px #168ee9}.support-hero-mark i{position:absolute;width:6px;height:6px;right:5px;top:5px;border-radius:50%;background:#3ce5bd;box-shadow:0 0 12px #3ce5bd}
.support-hero-copy{position:relative;z-index:1}.support-hero-copy h1{margin:8px 0 6px;font-family:"Barlow Condensed",Impact,sans-serif;font-size:clamp(42px,5vw,61px);line-height:1;color:#f3f8ff}.support-hero-copy p{max-width:580px;margin:0;color:#aebed0;font-size:12px;line-height:1.7}.support-hero>.button{position:relative;z-index:1;margin-left:auto;min-height:46px;white-space:nowrap}
.support-content{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.8fr);gap:17px;margin-top:18px;align-items:start}.support-ticket-area,.support-info-card,.support-security-note,.support-guest{border:1px solid rgba(109,159,209,.19);border-radius:14px;background:linear-gradient(145deg,#101b2a,#0b131f)}.support-ticket-area{min-width:0;padding:20px}.support-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.support-section-head h2{margin:5px 0 0;color:#f2f7fc;font-size:18px}.support-refresh{width:34px;height:34px;border:1px solid rgba(82,176,239,.2);border-radius:9px;background:#101d2c;color:#83d9ff;font-size:20px;cursor:pointer}.support-refresh:hover{border-color:rgba(82,193,255,.55);transform:rotate(18deg)}.support-ticket-list{display:grid;gap:9px}.support-ticket-card{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 13px;padding:14px 15px;border:1px solid rgba(124,165,205,.16);border-radius:11px;background:rgba(8,16,27,.72);color:#e5eef8;text-align:left;cursor:pointer;transition:border-color .18s,transform .18s,background .18s}.support-ticket-card:hover,.support-ticket-card.is-selected{transform:translateY(-1px);border-color:rgba(60,182,255,.43);background:rgba(13,35,56,.85)}.support-ticket-card h3{overflow:hidden;margin:0;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.support-ticket-card p{overflow:hidden;grid-column:1/-1;margin:3px 0;color:#8fa2b7;font-size:9px;line-height:1.55;text-overflow:ellipsis;white-space:nowrap}.support-ticket-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.support-category-pill,.support-status-pill{display:inline-flex;align-items:center;padding:4px 7px;border:1px solid rgba(69,177,241,.2);border-radius:20px;background:rgba(26,123,188,.12);color:#8bd9ff;font-size:7px;font-weight:850}.support-status-pill[data-status="answered"]{border-color:rgba(52,212,160,.25);background:rgba(38,160,116,.1);color:#71e0b4}.support-status-pill[data-status="closed"]{border-color:rgba(124,144,167,.22);background:rgba(124,144,167,.09);color:#a4b2c2}.support-ticket-date{align-self:center;color:#74889e;font-size:8px}.support-loading,.support-empty{min-height:220px;display:grid;align-content:center;justify-items:center;padding:23px;text-align:center}.support-loading b,.support-empty b{margin-top:11px;color:#dce9f5;font-size:12px}.support-loading small,.support-empty p{max-width:360px;margin:6px 0 0;color:#8295aa;font-size:9px;line-height:1.65}.support-spinner{width:27px;height:27px;border:2px solid rgba(91,184,245,.18);border-top-color:#4bc4ff;border-radius:50%;animation:support-spin .8s linear infinite}@keyframes support-spin{to{transform:rotate(360deg)}}.support-empty-mark{width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(81,188,255,.26);border-radius:15px;background:rgba(17,112,185,.14);color:#79d5ff;font-size:15px;font-weight:900;letter-spacing:-.07em}.support-empty .button{margin-top:17px;min-height:39px;font-size:9px}.support-thread{margin-top:14px;padding:16px;border:1px solid rgba(66,170,230,.2);border-radius:12px;background:rgba(6,14,24,.64)}.support-thread-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(132,170,220,.12)}.support-thread-head h3{margin:0;color:#eef6ff;font-size:13px}.support-thread-head small{display:block;margin-top:5px;color:#8296ab;font-size:8px}.support-thread-close{width:29px;height:29px;flex:none;border:1px solid rgba(113,161,204,.2);border-radius:7px;background:transparent;color:#b5c7d9;font-size:16px;cursor:pointer}.support-message-list{display:grid;gap:9px;max-height:420px;overflow:auto;padding:14px 1px}.support-message{padding:10px 12px;border:1px solid rgba(116,155,198,.14);border-radius:10px;background:#0d1826}.support-message.is-staff{border-color:rgba(52,190,255,.24);background:linear-gradient(120deg,rgba(15,63,99,.32),rgba(11,25,41,.8))}.support-message-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.support-message-head b{color:#e3f3ff;font-size:9px}.support-message-head time{flex:none;color:#70859a;font-size:7px}.support-message>p{margin:0;color:#b5c4d4;font-size:9px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.support-reply-form{display:grid;gap:8px;padding-top:11px;border-top:1px solid rgba(132,170,220,.12)}.support-reply-form textarea{width:100%;min-height:76px;resize:vertical;padding:10px 11px;border:1px solid rgba(114,163,208,.2);border-radius:8px;outline:0;background:#08121e;color:#e7f1fa;font:500 9px Manrope,system-ui,sans-serif}.support-reply-form textarea:focus{border-color:#278fd1}.support-reply-form>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.support-reply-form small{color:#70869d;font-size:7px}.support-reply-form .button{min-height:34px;font-size:8px}.support-thread-closed{padding:10px;border:1px solid rgba(125,148,174,.15);border-radius:8px;color:#9aabbd;font-size:8px;text-align:center}
.support-info{display:grid;gap:11px}.support-info-card{position:relative;overflow:hidden;padding:17px}.support-info-card:after{content:"";position:absolute;width:110px;height:110px;right:-70px;top:-70px;border-radius:50%;background:rgba(25,157,245,.14);filter:blur(15px)}.support-info-card--blue{background:linear-gradient(145deg,#0d2031,#0b1725)}.support-info-icon{width:32px;height:32px;display:grid;place-items:center;margin-bottom:12px;border:1px solid rgba(69,180,245,.2);border-radius:9px;background:rgba(15,125,197,.15);color:#81dcff;font-size:16px}.support-info-card h3{margin:0;color:#e8f2fb;font-size:11px}.support-info-card p{margin:7px 0 0;color:#94a7bc;font-size:9px;line-height:1.65}.support-info-card p b{color:#8de0ff}.support-hours-track{height:4px;overflow:hidden;margin:15px 0 8px;border-radius:9px;background:rgba(125,159,190,.13)}.support-hours-track span{width:72%;height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#218cdf,#41d6d7);box-shadow:0 0 11px rgba(48,189,255,.42)}.support-info-card>small{color:#758aa0;font-size:7px}.support-security-note{display:flex;gap:9px;padding:12px 13px;background:rgba(11,24,37,.7)}.support-security-note>span{width:19px;height:19px;flex:none;display:grid;place-items:center;border-radius:50%;background:rgba(52,167,232,.14);color:#77d7ff;font-size:9px;font-weight:900}.support-security-note p{margin:0;color:#8699ad;font-size:8px;line-height:1.65}.support-guest{max-width:620px;min-height:280px;display:grid;justify-items:center;align-content:center;margin:18px auto 0;padding:25px;text-align:center}.support-guest h2{margin:15px 0 5px;color:#eef6ff;font-size:18px}.support-guest p{max-width:420px;margin:0;color:#92a4b8;font-size:10px;line-height:1.7}.support-guest .button{margin-top:15px;min-height:41px;font-size:9px}
.support-modal{position:fixed;z-index:120;inset:0;display:grid;place-items:center;padding:18px}.support-modal[hidden]{display:none}.support-modal-scrim{position:absolute;inset:0;border:0;background:rgba(2,7,14,.78);backdrop-filter:blur(8px);cursor:default}.support-modal-card{position:relative;width:min(620px,100%);max-height:min(90vh,800px);overflow:auto;padding:22px;border:1px solid rgba(75,180,244,.28);border-radius:16px;background:linear-gradient(145deg,#111d2b,#09121e 72%);box-shadow:0 28px 90px rgba(0,0,0,.65)}.support-modal-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:17px}.support-modal-card>header h2{margin:7px 0 4px;color:#f2f7fc;font-size:20px}.support-modal-card>header p{margin:0;color:#91a5ba;font-size:9px;line-height:1.6}.support-modal-close{width:32px;height:32px;flex:none;border:1px solid rgba(121,162,202,.18);border-radius:8px;background:rgba(9,20,32,.7);color:#bdcad7;font-size:21px;cursor:pointer}.support-create-form{display:grid;grid-template-columns:1fr 1fr;gap:13px}.support-create-form>label{display:grid;align-content:start;gap:6px;color:#bfd0df;font-size:9px;font-weight:800}.support-create-form input,.support-create-form select,.support-create-form textarea{width:100%;min-height:40px;padding:10px 11px;border:1px solid rgba(120,163,203,.2);border-radius:8px;outline:0;background:#08121e;color:#e4effa;font:500 10px Manrope,system-ui,sans-serif}.support-create-form select option{background:#0c1724}.support-create-form input:focus,.support-create-form select:focus,.support-create-form textarea:focus{border-color:#32a9ee;box-shadow:0 0 0 3px rgba(37,154,223,.1)}.support-create-form input::placeholder,.support-create-form textarea::placeholder{color:#657a90}.support-create-form .support-message-field{grid-column:1/-1}.support-create-form textarea{min-height:155px;resize:vertical;line-height:1.6}.support-message-field small{color:#6f849a;font-size:7px;font-weight:500}.support-form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding-top:2px}.support-form-actions .button{min-height:39px;font-size:9px}.support-page .toast{z-index:140}
@media(max-width:760px){.support-main{padding-top:18px}.support-hero{min-height:180px;gap:13px;padding:22px;flex-wrap:wrap}.support-hero-mark{width:50px;height:50px;border-radius:14px}.support-hero-copy{flex:1}.support-hero-copy p{font-size:10px}.support-hero>.button{margin:0 0 0 63px}.support-content{grid-template-columns:1fr}.support-info{grid-template-columns:1fr 1fr}.support-security-note{grid-column:1/-1}.support-ticket-area{padding:15px}}
@media(max-width:520px){.support-hero{align-items:flex-start}.support-hero-copy h1{font-size:41px}.support-hero>.button{margin-left:0}.support-info{grid-template-columns:1fr}.support-security-note{grid-column:auto}.support-create-form{grid-template-columns:1fr}.support-create-form .support-message-field,.support-form-actions{grid-column:auto}.support-modal-card{padding:17px}.support-ticket-area{padding:13px}.support-ticket-card{padding:12px}.support-thread{padding:12px}}

/* Roomier ticket conversation layout */
.support-content{grid-template-columns:minmax(0,1fr)}
.support-info{grid-template-columns:repeat(2,minmax(0,1fr))}
.support-security-note{grid-column:1/-1}
.support-ticket-area{padding:clamp(16px,2.2vw,28px);border-color:rgba(76,168,229,.23);box-shadow:0 18px 48px rgba(0,0,0,.14)}
.support-section-head{margin-bottom:18px}
.support-section-head h2{font-size:clamp(19px,2vw,24px)}
.support-ticket-list{gap:10px}
.support-ticket-card{padding:16px 18px;border-radius:13px}
.support-ticket-card h3{font-size:14px}
.support-ticket-card p{font-size:10px}
.support-category-pill,.support-status-pill{padding:5px 9px;font-size:8px}
.support-thread{margin-top:16px;padding:0;overflow:hidden;border-color:rgba(76,168,229,.24);border-radius:16px;background:linear-gradient(155deg,rgba(13,27,43,.98),rgba(7,14,24,.98));box-shadow:0 16px 42px rgba(0,0,0,.16)}
.support-thread-head{align-items:center;padding:18px 21px;border-bottom-color:rgba(122,165,207,.16);background:linear-gradient(100deg,rgba(19,53,80,.55),rgba(10,22,36,.42))}
.support-thread-title{display:flex;align-items:center;gap:13px;min-width:0}
.support-thread-icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border:1px solid rgba(66,189,255,.3);border-radius:13px;background:linear-gradient(145deg,rgba(28,148,218,.22),rgba(11,29,47,.9));color:#8de0ff;font-size:18px;box-shadow:0 8px 22px rgba(0,0,0,.17)}
.support-thread-title>div{min-width:0;display:grid;gap:4px}
.support-thread-eyebrow{color:#6bcfff;font-size:8px;font-weight:900;letter-spacing:.12em}
.support-thread-head h3{font-size:16px;overflow-wrap:anywhere}
.support-thread-head small{margin-top:0}
.support-thread-status{display:flex;align-items:center;gap:6px;color:#f0cd7a;font-size:8px;font-weight:800}
.support-thread-status i{width:6px;height:6px;border-radius:50%;background:#f2bf55;box-shadow:0 0 9px rgba(242,191,85,.5)}
.support-thread-status.is-resolved{color:#70ddb1}
.support-thread-status.is-resolved i{background:#42d59c;box-shadow:0 0 9px rgba(66,213,156,.45)}
.support-thread-close{width:34px;height:34px;border-radius:10px;background:rgba(5,14,24,.55);font-size:19px}
.support-message-list{max-height:540px;min-height:180px;gap:13px;padding:22px clamp(16px,3vw,32px);scroll-behavior:smooth}
.support-message{width:min(82%,720px);display:flex;align-items:flex-end;gap:10px;padding:0;border:0;background:transparent}
.support-message.is-own{justify-self:end;flex-direction:row-reverse}
.support-message-avatar{width:31px;height:31px;flex:none;display:grid;place-items:center;border:1px solid rgba(78,173,230,.25);border-radius:50%;background:#122b42;color:#a1e1ff;font-size:8px;font-weight:950;letter-spacing:-.04em}
.support-message.is-own .support-message-avatar{border-color:rgba(60,198,255,.25);background:linear-gradient(145deg,#147dc0,#0b4779);color:#e7f7ff}
.support-message-body{min-width:0;max-width:calc(100% - 42px);padding:11px 14px;border:1px solid rgba(109,154,198,.19);border-radius:15px 15px 15px 5px;background:linear-gradient(145deg,#111f30,#0c1725)}
.support-message.is-own .support-message-body{border-color:rgba(48,159,226,.3);border-radius:15px 15px 5px 15px;background:linear-gradient(145deg,#103c60,#0e2d49)}
.support-message-head{margin-bottom:7px}
.support-message-head b{font-size:9px;color:#c5d7e8}
.support-message.is-own .support-message-head b{color:#91dcff}
.support-message-head time{font-size:7px}
.support-message>div p{font-size:10px;line-height:1.75;color:#d0dbe6}
.support-message-system{width:max-content;max-width:90%;justify-self:center;display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid rgba(78,173,230,.16);border-radius:99px;background:rgba(15,36,55,.56);color:#9fb5c8;font-size:8px}
.support-message-system>span{color:#62d9aa}
.support-message-system time{color:#71889e;font-size:7px}
.support-reply-form{gap:10px;padding:17px 21px 20px;border-top:1px solid rgba(122,165,207,.14);background:rgba(7,15,25,.72)}
.support-reply-form>label{color:#8bdcff;font-size:8px;font-weight:900;letter-spacing:.1em}
.support-reply-form textarea{min-height:92px;padding:13px 14px;border-radius:11px;font-size:10px;line-height:1.65}
.support-reply-form>div{align-items:center}
.support-reply-form small{font-size:8px}
.support-reply-form .button{min-height:40px;padding:0 16px;font-size:9px}
.support-thread-closed{display:flex;align-items:center;gap:11px;margin:0;padding:16px 21px;border:0;border-top:1px solid rgba(66,198,151,.16);border-radius:0;background:rgba(17,68,54,.19);text-align:left}
.support-thread-closed>span{width:34px;height:34px;flex:none;display:grid;place-items:center;border:1px solid rgba(67,216,160,.28);border-radius:50%;background:rgba(45,190,138,.13);color:#70e0b5;font-size:15px;font-weight:900}
.support-thread-closed>div{display:grid;gap:4px;flex:1}
.support-thread-closed b{color:#b5f1d7;font-size:10px}
.support-thread-closed small{color:#88b7a3;font-size:8px}
.support-thread-closed .button{min-height:34px;font-size:8px}
.support-status-pill[data-status="closed"]{border-color:rgba(52,212,160,.25);background:rgba(38,160,116,.1);color:#71e0b4}
.support-info-card{padding:20px}
@media(max-width:760px){.support-info{grid-template-columns:1fr 1fr}.support-message{width:min(92%,720px)}.support-thread-head{padding:15px}.support-message-list{padding:17px 13px}.support-reply-form{padding:14px}}
@media(max-width:520px){.support-info{grid-template-columns:1fr}.support-security-note{grid-column:auto}.support-message{width:100%;gap:7px}.support-message-avatar{width:27px;height:27px}.support-message-body{max-width:calc(100% - 34px);padding:10px}.support-message-list{max-height:430px;min-height:140px}.support-reply-form>div{align-items:flex-start;flex-direction:column}.support-reply-form .button{align-self:flex-end}.support-thread-closed{flex-wrap:wrap}.support-thread-closed .button{margin-left:45px}}