.sup-wrap{
    margin-top:95px;
    padding:22px 30px 40px;
    max-width:1200px;
}

.sup-topbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:14px;
}

.sup-breadcrumb{
    background:rgba(20,20,30,0.72);
    border:1px solid rgba(255,255,255,0.10);
    color:#aab3d0;
    border-radius:12px;
    padding:12px 14px;
    width:100%;
    max-width:780px;
    font-size:13px;
}
.sup-breadcrumb b{color:#fff;font-weight:600;}

.sup-card{
    background:rgba(20,20,30,0.86);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,0.35);
}

.sup-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 18px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.sup-head h1{
    font-size:18px;
    margin:0;
    font-weight:700;
}

.sup-btn{
    border:none;
    cursor:pointer;
    border-radius:10px;
    padding:10px 14px;
    font-weight:700;
    font-size:13px;
    color:#fff;
    background:linear-gradient(180deg,#2f7fff,#1e61d8);
}
.sup-btn:active{transform:translateY(1px);}

.sup-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}
.sup-table th,
.sup-table td{
    padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    text-align:left;
    white-space:nowrap;
}
.sup-table thead th{
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#9aa3c4;
    background:rgba(0,0,0,0.22);
}
.sup-table tbody tr:hover{background:rgba(255,255,255,0.03);}
.sup-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}
.sup-ico{
    width:34px;
    height:28px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(0,0,0,0.25);
    color:#dbe4ff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.sup-ico.danger{
    border-color:rgba(239,68,68,0.35);
    background:rgba(239,68,68,0.10);
    color:#fecaca;
}

.sup-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    padding:5px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.15);
    color:#dbe4ff;
    background:rgba(255,255,255,0.06);
}
.sup-badge.open{border-color:rgba(59,130,246,.35); background:rgba(59,130,246,.12); color:#cfe3ff;}
.sup-badge.answered{border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.12); color:#ccfbf1;}
.sup-badge.closed{border-color:rgba(148,163,184,.35); background:rgba(148,163,184,.10); color:#d1d5db;}

.sup-layout{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:16px;
}
@media(max-width:980px){
    .sup-layout{grid-template-columns:1fr;}
}

.sup-thread{
    padding:16px 18px;
}
.msg{
    display:flex;
    gap:10px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.msg:last-child{border-bottom:none;}
.msg .av{
    width:38px;height:38px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(0,0,0,0.25);
    display:flex;align-items:center;justify-content:center;
    font-weight:800;
}
.msg .meta{flex:1;min-width:0;}
.msg .meta b{display:block;font-size:13px;}
.msg .meta small{display:block;color:#9aa3c4;margin-top:1px;}
.msg .text{margin-top:7px;color:#e9ecff;line-height:1.55;white-space:pre-wrap;}

.sup-side{
    padding:16px 16px;
    border-left:1px solid rgba(255,255,255,0.08);
}
@media(max-width:980px){
    .sup-side{border-left:none;border-top:1px solid rgba(255,255,255,0.08);}
}
.sup-side h2{
    margin:0 0 12px;
    font-size:14px;
    font-weight:800;
}
.kv{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    font-size:13px;
    color:#9aa3c4;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.kv b{color:#fff;font-weight:700;}

.sup-reply{
    padding:16px 18px;
    border-top:1px solid rgba(255,255,255,0.08);
}
.sup-reply textarea{
    width:100%;
    min-height:130px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.28);
    color:#fff;
    padding:12px 12px;
    resize:vertical;
}
.sup-reply .row{
    display:flex;
    justify-content:flex-end;
    margin-top:10px;
}

.sup-modal-mask{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    backdrop-filter:blur(6px);
    z-index:250;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}
.sup-modal{
    width:min(720px,100%);
    background:rgba(20,20,30,0.95);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:18px;
    overflow:hidden;
}
.sup-modal .mhead{
    padding:16px 18px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.sup-modal .mhead h3{margin:0;font-size:16px;}
.sup-close{
    border:none;cursor:pointer;
    width:34px;height:34px;border-radius:10px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.10);
    color:#fff;
}
.sup-modal .mbody{padding:18px;}
.sup-field label{display:block;color:#9aa3c4;font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.sup-field input,.sup-field textarea{
    width:100%;
    padding:12px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.26);
    color:#fff;
}
.sup-field textarea{min-height:120px;resize:vertical;}
.cat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:10px;
    margin-top:10px;
}
.cat-btn{
    text-align:left;
    cursor:pointer;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.04);
    padding:12px 12px;
    color:#e9ecff;
    font-weight:700;
}
.cat-btn small{display:block;margin-top:4px;color:#9aa3c4;font-weight:500;}
.cat-btn.active{
    border-color:rgba(255,106,0,0.45);
    background:rgba(255,106,0,0.12);
}
.sup-modal .mfoot{
    padding:14px 18px;
    border-top:1px solid rgba(255,255,255,0.08);
    display:flex;
    justify-content:flex-end;
    gap:10px;
}
.sup-btn-ghost{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);
}