.support-page{
padding:120px 0 90px;
min-height:100vh;
background:
radial-gradient(circle at top left, rgba(95,201,223,.14), transparent 28%),
radial-gradient(circle at bottom right, rgba(17,143,166,.16), transparent 30%),
linear-gradient(180deg, #071723 0%, #081a29 48%, #06131f 100%);
}

.support-hero{
position:relative;
margin-bottom:32px;
}

.support-hero__inner{
display:grid;
grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);
gap:24px;
align-items:stretch;
}

.support-hero__copy,
.support-hero__stats,
.support-panel{
padding:28px 30px;
border-radius:30px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(16px);
box-shadow:0 24px 60px rgba(0,0,0,.18);
}

.support-hero__eyebrow,
.support-panel__eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
min-height:30px;
padding:0 12px;
border-radius:999px;
background:rgba(255,255,255,.05);
border:1px solid rgba(95,201,223,.18);
color:#dffaff;
font-size:12px;
font-weight:800;
margin-bottom:14px;
}

.support-hero__copy h1,
.support-panel__head h2{
margin:0 0 12px;
color:#ffffff;
font-size:clamp(30px, 4.8vw, 48px);
line-height:1.08;
}

.support-hero__copy p,
.support-panel__head p{
margin:0;
color:rgba(232,244,247,.76);
font-size:16px;
line-height:1.9;
}

.support-hero__stats{
display:grid;
gap:14px;
}

.support-hero__stat{
padding:18px 20px;
border-radius:22px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
}

.support-hero__stat strong{
display:block;
margin-bottom:6px;
color:#ffffff;
font-size:20px;
}

.support-hero__stat span{
color:rgba(232,244,247,.7);
font-size:14px;
line-height:1.7;
}

.support-shell__layout{
display:grid;
grid-template-columns:1fr;
gap:24px;
align-items:start;
}

.support-panel__head{
margin-bottom:22px;
}

.support-panel__head--workspace{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
}

.support-panel__head--workspace > div:first-child{
max-width:720px;
}

.support-panel--gate{
grid-column:1 / -1;
}

.support-panel__toolbar{
display:grid;
justify-items:end;
gap:12px;
flex-shrink:0;
}

.support-identity{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
padding:18px 20px;
border-radius:22px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
}

.support-identity__icon{
display:grid;
place-items:center;
width:52px;
height:52px;
border-radius:18px;
background:linear-gradient(135deg, rgba(17,143,166,.32), rgba(95,201,223,.24));
border:1px solid rgba(95,201,223,.22);
color:#ddfbff;
font-size:14px;
font-weight:900;
flex-shrink:0;
}

.support-identity__content{
display:grid;
gap:6px;
}

.support-identity__content strong{
color:#ffffff;
font-size:17px;
}

.support-identity__content span{
color:#9befff;
font-size:14px;
font-weight:700;
}

.support-identity__content p{
margin:0;
color:rgba(232,244,247,.7);
font-size:13px;
line-height:1.8;
}

.support-identity__cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 18px;
border-radius:16px;
background:linear-gradient(135deg, #118fa6, #5fc9df);
color:#ffffff;
font-size:14px;
font-weight:800;
text-decoration:none;
white-space:nowrap;
}

.support-identity--compact{
margin-bottom:0;
padding:14px 16px;
min-width:260px;
}

.support-identity--compact .support-identity__icon{
width:44px;
height:44px;
border-radius:15px;
}

.support-identity--compact .support-identity__content p{
display:none;
}

.support-create-ticket-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border:none;
border-radius:18px;
background:linear-gradient(135deg, #118fa6, #5fc9df);
color:#ffffff;
font-family:inherit;
font-size:15px;
font-weight:800;
cursor:pointer;
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.support-create-ticket-button:hover{
transform:translateY(-1px);
box-shadow:0 18px 32px rgba(17,143,166,.22);
filter:brightness(1.04);
}

.support-ticket-form{
display:grid;
gap:16px;
}

.support-ticket-form__row{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:14px;
}

.support-ticket-form label,
.support-ticket-edit label,
.support-ticket-reply label{
display:grid;
gap:8px;
}

.support-ticket-form span,
.support-ticket-edit span,
.support-ticket-reply span{
color:#ffffff;
font-size:14px;
font-weight:700;
}

.support-ticket-form input,
.support-ticket-form textarea,
.support-ticket-form select,
.support-ticket-edit input,
.support-ticket-edit textarea,
.support-ticket-edit select,
.support-ticket-reply textarea{
width:100%;
border:none;
outline:none;
padding:15px 16px;
border-radius:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:#ffffff;
font-family:inherit;
font-size:14px;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.support-ticket-form select,
.support-ticket-edit select{
color-scheme:dark;
background-color:#203342;
}

.support-ticket-form select option,
.support-ticket-edit select option{
background-color:#132735;
color:#ffffff;
}

.support-ticket-form input:focus,
.support-ticket-form textarea:focus,
.support-ticket-form select:focus,
.support-ticket-edit input:focus,
.support-ticket-edit textarea:focus,
.support-ticket-edit select:focus,
.support-ticket-reply textarea:focus{
border-color:rgba(95,201,223,.36);
box-shadow:0 0 0 4px rgba(95,201,223,.08);
background:rgba(255,255,255,.06);
}

.support-ticket-form input::placeholder,
.support-ticket-form textarea::placeholder,
.support-ticket-reply textarea::placeholder{
color:rgba(232,244,247,.48);
}

.support-ticket-form__actions{
display:grid;
gap:12px;
}

.support-ticket-form__submit,
.support-ticket-edit__submit,
.support-ticket-reply__submit{
min-height:52px;
border:none;
border-radius:18px;
background:linear-gradient(135deg, #118fa6, #5fc9df);
color:#fff;
font-family:inherit;
font-size:15px;
font-weight:800;
cursor:pointer;
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.support-ticket-form__submit:hover,
.support-ticket-edit__submit:hover,
.support-ticket-reply__submit:hover{
transform:translateY(-1px);
box-shadow:0 18px 32px rgba(17,143,166,.22);
filter:brightness(1.04);
}

.support-ticket-form__submit:disabled,
.support-ticket-edit__submit:disabled,
.support-ticket-reply__submit:disabled{
opacity:.7;
cursor:wait;
transform:none;
box-shadow:none;
}

.support-ticket-form__hint{
margin:0;
color:rgba(232,244,247,.62);
font-size:13px;
line-height:1.8;
}

.support-ticket-form__notice{
padding:14px 16px;
border-radius:18px;
font-size:14px;
line-height:1.8;
}

.support-ticket-form__notice.is-success{
background:rgba(47,211,140,.12);
border:1px solid rgba(47,211,140,.24);
color:#c9ffe5;
}

.support-ticket-form__notice.is-error{
background:rgba(255,99,99,.12);
border:1px solid rgba(255,99,99,.24);
color:#ffd7d7;
}

.support-ticket-form__notice.is-info{
background:rgba(95,201,223,.12);
border:1px solid rgba(95,201,223,.24);
color:#ddfbff;
}

.support-modal{
position:fixed;
inset:0;
z-index:9998;
display:grid;
place-items:center;
padding:24px;
}

.support-modal[hidden]{
display:none !important;
}

.support-modal__backdrop{
position:absolute;
inset:0;
background:rgba(4,13,22,.72);
backdrop-filter:blur(8px);
}

.support-modal__dialog{
position:relative;
z-index:1;
width:min(100%, 680px);
padding:28px;
border-radius:30px;
background:linear-gradient(180deg, rgba(9,28,41,.96), rgba(8,24,36,.98));
border:1px solid rgba(255,255,255,.1);
box-shadow:0 36px 90px rgba(0,0,0,.35);
opacity:0;
transform:translateY(18px) scale(.98);
transition:opacity .2s ease, transform .2s ease;
}

.support-modal.is-visible .support-modal__dialog{
opacity:1;
transform:translateY(0) scale(1);
}

.support-modal__close{
position:absolute;
top:16px;
left:16px;
display:grid;
place-items:center;
width:44px;
height:44px;
border:none;
border-radius:16px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
color:#ffffff;
font-size:28px;
line-height:1;
cursor:pointer;
}

.support-modal__head{
display:grid;
gap:10px;
margin-bottom:20px;
padding-left:52px;
}

.support-modal__head h2{
margin:0;
color:#ffffff;
font-size:32px;
line-height:1.2;
}

.support-modal__head p{
margin:0;
color:rgba(232,244,247,.72);
line-height:1.9;
}

.support-ticket-form--modal{
gap:18px;
}

body.support-modal-open{
overflow:hidden;
}

.support-workspace{
display:grid;
grid-template-columns:minmax(260px, 300px) minmax(0, 1fr);
grid-template-areas:"list detail";
gap:18px;
min-height:auto;
align-items:start;
}

.support-ticket-list-pane,
.support-ticket-detail-pane{
border-radius:26px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
min-height:100%;
}

.support-ticket-list-pane{
grid-area:list;
padding:18px;
display:grid;
grid-template-rows:auto 1fr;
gap:16px;
}

.support-ticket-detail-pane{
grid-area:detail;
padding:18px;
}

.support-ticket-list-pane__head{
display:grid;
gap:6px;
padding:4px 6px 0;
}

.support-ticket-list-pane__head strong{
color:#ffffff;
font-size:18px;
}

.support-ticket-list-pane__head span{
color:rgba(232,244,247,.62);
font-size:13px;
line-height:1.8;
}

.support-ticket-list{
display:grid;
gap:14px;
align-content:start;
max-height:980px;
overflow:auto;
padding-left:4px;
}

.support-ticket-list__empty,
.support-ticket-detail__empty,
.support-ticket-list__loading{
padding:28px 24px;
border-radius:24px;
background:rgba(255,255,255,.03);
border:1px dashed rgba(255,255,255,.12);
text-align:center;
}

.support-ticket-list__empty strong,
.support-ticket-detail__empty strong,
.support-ticket-list__loading strong{
display:block;
margin-bottom:8px;
color:#ffffff;
font-size:18px;
}

.support-ticket-list__empty p,
.support-ticket-detail__empty p,
.support-ticket-list__loading p{
margin:0;
color:rgba(232,244,247,.68);
line-height:1.8;
}

.support-ticket-list__empty--error{
border-style:solid;
border-color:rgba(255,99,99,.2);
background:rgba(255,99,99,.08);
}

.support-ticket-list__loading{
display:grid;
justify-items:center;
gap:10px;
}

.support-ticket-list__loading-dot{
width:12px;
height:12px;
border-radius:50%;
background:#5fc9df;
box-shadow:0 0 0 8px rgba(95,201,223,.12);
animation:supportPulse 1.4s ease-in-out infinite;
}

.support-ticket-card{
width:100%;
padding:14px 15px;
border:none;
border-radius:20px;
background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.028));
border:1px solid rgba(255,255,255,.08);
box-shadow:0 18px 44px rgba(0,0,0,.14);
text-align:right;
cursor:pointer;
transition:border-color .24s ease, transform .24s ease, box-shadow .24s ease, background .24s ease;
position:relative;
}

.support-ticket-card:hover{
transform:translateY(-2px);
border-color:rgba(95,201,223,.42);
box-shadow:0 26px 54px rgba(0,0,0,.18), inset 0 0 0 1px rgba(95,201,223,.28);
background:linear-gradient(180deg, rgba(95,201,223,.12), rgba(255,255,255,.04));
}

.support-ticket-card.is-selected{
transform:none;
border-color:rgba(95,201,223,.42);
box-shadow:0 22px 48px rgba(0,0,0,.18), inset 0 0 0 1px rgba(95,201,223,.28);
background:linear-gradient(180deg, rgba(95,201,223,.12), rgba(255,255,255,.04));
}

.support-ticket-card.is-selected::before{
content:"";
position:absolute;
top:18px;
bottom:18px;
right:0;
width:4px;
border-radius:999px;
background:linear-gradient(180deg, #5fc9df, #118fa6);
}

.support-ticket-card__top{
display:grid;
gap:8px;
margin-bottom:10px;
}

.support-ticket-card__ticket-id{
display:inline-flex;
align-items:center;
gap:8px;
min-height:32px;
padding:0 14px;
border-radius:999px;
background:rgba(95,201,223,.1);
border:1px solid rgba(95,201,223,.18);
color:#d7fbff;
font-size:12px;
font-weight:800;
width:max-content;
max-width:100%;
}

.support-ticket-card__badges,
.support-ticket-detail__badges{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}

.support-ticket-card__title{
margin:0 0 10px;
color:#ffffff;
font-size:17px;
line-height:1.5;
}

.support-ticket-card__meta{
display:flex;
flex-wrap:wrap;
gap:8px;
color:rgba(232,244,247,.6);
font-size:11px;
}

.support-ticket-card__badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:31px;
padding:0 12px;
border-radius:999px;
font-size:12px;
font-weight:800;
white-space:nowrap;
}

.support-ticket-card__badge--status-open{background:rgba(116,155,255,.14);color:#dbe6ff}
.support-ticket-card__badge--status-in_progress{background:rgba(255,189,74,.14);color:#ffe1a8}
.support-ticket-card__badge--status-answered{background:rgba(47,211,140,.12);color:#b8f7d5}
.support-ticket-card__badge--status-waiting{background:rgba(95,201,223,.14);color:#d7fbff}
.support-ticket-card__badge--status-resolved{background:rgba(77,221,154,.14);color:#d5ffe8}
.support-ticket-card__badge--status-closed{background:rgba(255,255,255,.1);color:rgba(232,244,247,.76)}

.support-ticket-card__badge--priority-low{background:rgba(47,211,140,.1);color:#c8ffe0}
.support-ticket-card__badge--priority-medium{background:rgba(255,189,74,.14);color:#ffe1a8}
.support-ticket-card__badge--priority-high{background:rgba(255,99,99,.14);color:#ffd0d0}

.support-ticket-detail{
min-height:100%;
}

.support-ticket-detail__card{
display:grid;
gap:18px;
}

.support-ticket-detail__hero{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
padding:22px;
border-radius:26px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
}

.support-ticket-detail__hero-main{
display:grid;
gap:12px;
min-width:0;
}

.support-ticket-detail__ticket-number{
display:inline-flex;
align-items:center;
gap:8px;
min-height:34px;
padding:0 14px;
border-radius:999px;
background:rgba(95,201,223,.1);
border:1px solid rgba(95,201,223,.18);
color:#d7fbff;
font-size:12px;
font-weight:800;
width:max-content;
max-width:100%;
}

.support-ticket-detail__hero h3{
margin:0;
color:#ffffff;
font-size:30px;
line-height:1.35;
}

.support-ticket-detail__actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
flex-wrap:wrap;
}

.support-ticket-detail__action,
.support-ticket-edit__cancel{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 16px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.09);
color:#ffffff;
font-family:inherit;
font-size:13px;
font-weight:800;
cursor:pointer;
transition:background .2s ease, border-color .2s ease, transform .2s ease;
}

.support-ticket-detail__action:hover,
.support-ticket-edit__cancel:hover{
background:rgba(95,201,223,.1);
border-color:rgba(95,201,223,.22);
transform:translateY(-1px);
}

.support-ticket-detail__action--warn{
background:rgba(255,189,74,.1);
border-color:rgba(255,189,74,.2);
color:#ffe8b4;
}

.support-ticket-detail__action--danger{
background:rgba(255,99,99,.08);
border-color:rgba(255,99,99,.18);
color:#ffd7d7;
}

.support-ticket-detail__meta-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:14px;
}

.support-ticket-detail__meta-card,
.support-ticket-detail__description,
.support-ticket-edit,
.support-ticket-detail__section{
padding:20px;
border-radius:24px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
}

.support-ticket-detail__meta-card span{
display:block;
margin-bottom:8px;
color:rgba(232,244,247,.58);
font-size:12px;
font-weight:700;
}

.support-ticket-detail__meta-card strong{
display:block;
color:#ffffff;
font-size:15px;
line-height:1.7;
}

.support-ticket-detail__section{
display:grid;
gap:16px;
}

.support-ticket-detail__section-head{
display:grid;
gap:6px;
}

.support-ticket-detail__section-head strong{
color:#ffffff;
font-size:19px;
}

.support-ticket-detail__section-head span{
color:rgba(232,244,247,.62);
font-size:13px;
line-height:1.8;
}

.support-ticket-detail__description p{
margin:0;
color:#edf8fb;
line-height:2;
white-space:pre-line;
}

.support-ticket-edit{
display:none;
gap:14px;
}

.support-ticket-edit.is-visible{
display:grid;
}

.support-ticket-edit__row{
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(180px, .46fr);
gap:14px;
}

.support-ticket-edit__actions,
.support-ticket-reply__actions{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}

.support-ticket-thread{
display:grid;
gap:14px;
}

.support-ticket-thread__item{
padding:16px 18px;
border-radius:22px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
}

.support-ticket-thread__item--admin{
background:rgba(95,201,223,.08);
border-color:rgba(95,201,223,.16);
}

.support-ticket-thread__item--root{
box-shadow:inset 0 0 0 1px rgba(95,201,223,.1);
}

.support-ticket-thread__item-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}

.support-ticket-thread__item-header strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:14px;
}

.support-ticket-thread__item-header span{
color:rgba(232,244,247,.54);
font-size:12px;
}

.support-ticket-thread__parent{
display:inline-flex;
align-items:center;
min-height:28px;
padding:0 10px;
border-radius:999px;
background:rgba(255,255,255,.05);
color:#dffaff;
font-size:11px;
font-weight:700;
}

.support-ticket-thread__item p{
margin:0;
color:#edf7fa;
line-height:1.9;
white-space:pre-line;
}

.support-ticket-thread__reply{
margin-top:12px;
display:inline-flex;
align-items:center;
gap:6px;
border:none;
padding:0;
background:none;
color:#8feaf5;
font-family:inherit;
font-size:13px;
font-weight:700;
cursor:pointer;
}

.support-ticket-reply{
display:grid;
gap:12px;
}

.support-ticket-reply__target{
display:none;
padding:12px 14px;
border-radius:16px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:#dffaff;
font-size:13px;
}

.support-ticket-reply__target.is-visible{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.support-ticket-reply__target button{
border:none;
background:none;
padding:0;
color:#8feaf5;
font-family:inherit;
font-weight:700;
cursor:pointer;
}

.support-ticket-reply__note{
color:rgba(232,244,247,.58);
font-size:12px;
line-height:1.7;
}

.support-ticket-reply--locked{
padding:0;
}

.support-ticket-locked{
padding:18px 20px;
border-radius:20px;
background:rgba(255,189,74,.08);
border:1px solid rgba(255,189,74,.16);
}

.support-ticket-locked strong{
display:block;
margin-bottom:8px;
color:#fff2c7;
font-size:16px;
}

.support-ticket-locked p{
margin:0;
color:rgba(255,244,205,.8);
line-height:1.8;
}

@keyframes supportPulse{
0%,100%{transform:scale(1);opacity:1}
50%{transform:scale(.78);opacity:.55}
}

@media (max-width: 1199px){
.support-ticket-detail__meta-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 991px){
.support-page{
padding-top:104px;
}

.support-hero__inner,
.support-workspace{
grid-template-columns:1fr;
grid-template-areas:
"list"
"detail";
}

.support-panel__head--workspace{
display:grid;
}

.support-panel__toolbar{
justify-items:stretch;
}

.support-identity--compact{
min-width:0;
}

.support-ticket-list{
max-height:none;
}

.support-ticket-detail__hero,
.support-identity{
grid-template-columns:1fr;
display:grid;
}

.support-ticket-detail__actions{
justify-content:flex-start;
}

.support-ticket-edit__row,
.support-ticket-form__row,
.support-ticket-detail__meta-grid{
grid-template-columns:1fr;
}
}

@media (max-width: 767px){
.support-page{
padding-top:92px;
padding-bottom:72px;
}

.support-hero__copy,
.support-hero__stats,
.support-panel,
.support-ticket-list-pane,
.support-ticket-detail-pane,
.support-modal__dialog{
padding:22px 18px;
border-radius:24px;
}

.support-ticket-card,
.support-ticket-detail__hero,
.support-ticket-detail__meta-card,
.support-ticket-detail__description,
.support-ticket-edit,
.support-ticket-detail__section{
padding:18px;
border-radius:20px;
}

.support-ticket-detail__hero h3{
font-size:24px;
}

.support-ticket-detail__actions,
.support-ticket-edit__actions,
.support-ticket-reply__actions{
display:grid;
grid-template-columns:1fr;
}

.support-ticket-detail__action,
.support-ticket-edit__cancel,
.support-ticket-reply__submit,
.support-create-ticket-button{
width:100%;
}

.support-modal{
padding:14px;
align-items:end;
}

.support-modal__head{
padding-left:46px;
}

.support-modal__head h2{
font-size:26px;
}
}