:root{
    --bg:#090d14;
    --surface:#111722;
    --surface-2:#171f2c;
    --surface-3:#202a38;
    --border:#2c3646;
    --border-strong:#445166;
    --blue:#2f7df6;
    --green:#1fa463;
    --cyan:#19b8c7;
    --text:#f6f8fb;
    --muted:#a0aab8;
    --shadow:0 18px 44px rgba(0,0,0,.28);
}

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
}

body{
    min-height:100vh;
    margin:0;
    color:var(--text);
    background:linear-gradient(180deg,#0b111b 0%,#090d14 46%,#0b0f16 100%);
    font-family:"Segoe UI",Arial,sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}

.app-header{
    position:sticky;
    top:0;
    z-index:20;
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:12px 18px;
    background:rgba(17,23,34,.96);
    border-bottom:1px solid var(--border);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    backdrop-filter:blur(12px);
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.brand-mark{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border:1px solid #315d95;
    border-radius:8px;
    background:#10223a;
    color:#cfe6ff;
    font-weight:900;
}

.brand-mark img{
    width:28px;
    height:28px;
    display:block;
    object-fit:contain;
}


.brand-copy h1{
    margin:0;
    color:#d8ebff;
    font-size:20px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:0;
}

.brand-copy span{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.main-nav{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.nav-link{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    padding:9px 12px;
    border:1px solid transparent;
    border-radius:8px;
    color:var(--muted);
    font-size:13px;
    font-weight:800;
}

.nav-link:hover,
.nav-link.is-active{
    border-color:var(--border);
    background:var(--surface-2);
    color:#d8ebff;
}

.nav-toggle{
    display:none;
    width:42px;
    min-width:42px;
    min-height:42px;
    border:none;
    border-radius:8px;
    padding:9px;
    background:#3c4655;
    cursor:pointer;
}

.nav-toggle span{
    display:block;
    width:18px;
    height:2px;
    margin:4px auto;
    border-radius:2px;
    background:#f6f8fb;
}

.ticket-main{
    width:min(1180px,100%);
    margin:0 auto;
    padding:14px;
}

.panel{
    background:rgba(17,23,34,.98);
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:var(--shadow);
}

.ticket-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    align-items:center;
    gap:18px;
    padding:22px;
}

.eyebrow{
    margin:0 0 8px;
    color:var(--cyan);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.ticket-hero h2{
    margin:0;
    color:#eef5ff;
    font-size:30px;
    line-height:1.15;
    letter-spacing:0;
}

.hero-text{
    max-width:680px;
    margin:10px 0 0;
    color:var(--muted);
    font-size:15px;
    line-height:1.55;
}

.support-card{
    padding:18px;
    border:1px solid var(--border);
    border-radius:8px;
    background:linear-gradient(180deg,var(--surface-2),#10223a);
}

.support-card strong{
    display:block;
    margin-bottom:14px;
    color:#eef5ff;
    font-size:34px;
    line-height:.95;
    font-weight:900;
}

.support-card span{
    display:block;
    padding:10px 0;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:13px;
    font-weight:800;
}

.ticket-form{
    margin-top:14px;
    padding:18px;
}

.ticket-sent-panel{
    margin-top:14px;
    padding:34px 22px;
    text-align:center;
}

.ticket-sent-panel h3{
    margin:10px 0 0;
    color:#eef5ff;
    font-size:28px;
    line-height:1.15;
}

.ticket-sent-panel p:not(.eyebrow){
    max-width:620px;
    margin:12px auto 0;
    color:var(--muted);
    line-height:1.55;
}

.sent-check{
    width:86px;
    height:86px;
    display:grid;
    place-items:center;
    margin:0 auto 18px;
    border:1px solid rgba(31,164,99,.75);
    border-radius:50%;
    background:rgba(31,164,99,.14);
    animation:sent-pop .48s ease-out both;
}

.sent-check span{
    width:34px;
    height:18px;
    border-left:5px solid #c6f6dc;
    border-bottom:5px solid #c6f6dc;
    transform:rotate(-45deg) scale(.65);
    animation:sent-check .42s ease-out .22s both;
}

.sent-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:22px;
}

@keyframes sent-pop{
    0%{
        opacity:0;
        transform:scale(.72);
    }
    72%{
        transform:scale(1.08);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes sent-check{
    0%{
        opacity:0;
        transform:rotate(-45deg) scale(.2);
    }
    100%{
        opacity:1;
        transform:rotate(-45deg) scale(1);
    }
}

.field-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.form-section-title{
    margin:28px 0 14px;
    color:var(--cyan);
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
}

.ticket-form .form-section-title:first-of-type{
    margin-top:0;
}

.success-message + .form-section-title{
    margin-top:18px;
}

.field{
    display:grid;
    gap:6px;
}

.field.full{
    grid-column:1 / -1;
}

.field span{
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}

.field span b{
    color:var(--cyan);
    font-weight:900;
}

input,
select,
textarea{
    width:100%;
    min-height:42px;
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 11px;
    background:#0f1621;
    color:var(--text);
    font:inherit;
    font-size:14px;
    outline:none;
}

textarea{
    resize:vertical;
    min-height:170px;
}

input:focus,
select:focus,
textarea:focus{
    border-color:#5b9dff;
    box-shadow:0 0 0 3px rgba(47,125,246,.18);
}

input[type="file"]{
    padding:9px 11px;
}

input[readonly]{
    color:var(--muted);
    background:#101824;
}

.field-error{
    color:#ffd0d0;
    font-size:12px;
    font-weight:700;
}

.success-message{
    padding:12px;
    border:1px solid rgba(31,164,99,.65);
    border-radius:8px;
    background:#101824;
    color:#c6f6dc;
    font-size:14px;
    font-weight:800;
}

.error-message{
    padding:12px;
    border:1px solid rgba(217,74,74,.75);
    border-radius:8px;
    background:#101824;
    color:#ffd0d0;
    font-size:14px;
    font-weight:800;
}

.page-message{
    margin-top:14px;
}

.form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

button,
.link-btn{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:8px;
    padding:10px 12px;
    color:white;
    cursor:pointer;
    font:inherit;
    font-size:14px;
    font-weight:800;
}

.btn-blue{
    background:var(--blue);
}

.btn-gray{
    background:#3c4655;
}

.btn-red{
    background:#d94a4a;
}

.ticket-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    padding:12px 18px 34px;
    color:var(--muted);
    text-align:center;
    font-size:14px;
}

.ticket-footer .footer-version{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:4px 9px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#111722;
    color:#dce9f8;
    font-size:12px;
    font-weight:800;
}

.tech-ticket-layout{
    display:grid;
    grid-template-columns:360px minmax(0,1fr);
    gap:14px;
    margin-top:14px;
}

.software-panel{
    display:grid;
    grid-template-columns:minmax(0,420px) minmax(0,1fr);
    gap:14px;
    margin-top:14px;
    padding:18px;
}

.software-form{
    display:grid;
    grid-template-columns:1fr 150px auto;
    align-items:end;
    gap:10px;
}

.software-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.software-list-row{
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#101824;
    text-align:left;
}

.software-list-row:hover{
    border-color:var(--border-strong);
    background:var(--surface-2);
}

.software-list-row strong,
.software-list-row small{
    display:block;
}

.software-list-row strong{
    color:#eef5ff;
    font-size:14px;
}

.software-list-row small{
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
}

.software-list-row b{
    min-height:28px;
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    border:1px solid var(--border);
    border-radius:8px;
    color:#dce9f8;
    background:#0f1621;
    font-size:11px;
    white-space:nowrap;
}

.software-badges{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:wrap;
}

.modal-backdrop{
    position:fixed;
    inset:0;
    z-index:80;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(5,8,13,.76);
    backdrop-filter:blur(6px);
}

.modal-backdrop.is-open{
    display:flex;
}

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

.software-modal{
    width:min(560px,100%);
    padding:18px;
}

.modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
}

.modal-head h3{
    margin:0;
    color:#eef5ff;
    font-size:22px;
}

.modal-close-btn{
    width:42px;
    min-width:42px;
    padding:0;
}

.modal-form{
    display:grid;
    gap:12px;
    margin-top:14px;
}

.modal-actions-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--border);
}

.ticket-list-panel,
.ticket-detail-panel{
    padding:18px;
}

.ticket-list{
    display:grid;
    gap:8px;
}

.ticket-filters{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:12px;
}

.ticket-filters label{
    display:grid;
    gap:5px;
    color:var(--muted);
    font-size:11px;
    font-weight:900;
}

.ticket-filters select,
.ticket-filters input{
    min-height:38px;
    padding:8px 9px;
    font-size:13px;
}

.filter-full{
    grid-column:1 / -1;
}

.filter-actions{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.filter-actions button,
.filter-actions a{
    min-height:38px;
    padding:8px 10px;
    font-size:13px;
}

.ticket-list-item{
    display:grid;
    gap:8px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#101824;
}

.ticket-list-item:hover,
.ticket-list-item.is-active{
    border-color:var(--border-strong);
    background:var(--surface-2);
}

.ticket-list-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.ticket-list-top strong{
    color:#eef5ff;
    font-size:14px;
    line-height:1.35;
}

.ticket-list-top em,
.ticket-list-item > span{
    color:var(--muted);
    font-size:12px;
    font-style:normal;
    line-height:1.35;
}

.ticket-pill-row{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.ticket-pill-row b{
    min-height:28px;
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    border:1px solid var(--border);
    border-radius:8px;
    color:#dce9f8;
    background:#0f1621;
    font-size:11px;
}

.ticket-pill-row .status-answered{
    border-color:rgba(31,164,99,.65);
    background:rgba(31,164,99,.16);
    color:#c6f6dc;
}

.ticket-pill-row .status-in_progress{
    border-color:rgba(47,125,246,.65);
    background:rgba(47,125,246,.16);
    color:#cfe6ff;
}

.ticket-pill-row .status-open{
    border-color:var(--border);
    background:#0f1621;
    color:#dce9f8;
}

.detail-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(260px,340px);
    align-items:start;
    gap:14px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
}

.detail-head h3{
    margin:0;
    color:#eef5ff;
    font-size:24px;
    line-height:1.2;
}

.detail-head span{
    display:block;
    margin-top:8px;
    color:var(--muted);
    font-size:13px;
}

.assign-form{
    display:grid;
    gap:8px;
}

.assign-form label{
    display:grid;
    gap:6px;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}

.ticket-meta-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}

.ticket-meta-grid div{
    min-height:72px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#101824;
}

.ticket-meta-grid b{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-bottom:6px;
}

.ticket-meta-grid span{
    color:#eef5ff;
    font-size:13px;
    line-height:1.35;
    overflow-wrap:anywhere;
}

.message-block,
.replies-block,
.reply-form{
    margin-top:14px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#101824;
}

.message-block h4{
    margin:0 0 8px;
    color:#eef5ff;
    font-size:14px;
}

.message-block p,
.reply-card p{
    margin:0;
    color:#dce9f8;
    line-height:1.55;
    white-space:pre-wrap;
}

.attachment-list{
    margin:0;
    padding-left:18px;
    color:#dce9f8;
}

.attachment-list li + li{
    margin-top:8px;
}

.attachment-list a{
    color:#cfe6ff;
    font-weight:900;
    text-decoration:underline;
    text-underline-offset:3px;
}

.attachment-list span{
    margin-left:8px;
    color:var(--muted);
    font-size:12px;
}

.reply-card{
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#0f1621;
}

.reply-card + .reply-card{
    margin-top:10px;
}

.reply-card div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.reply-card strong{
    color:#eef5ff;
}

.reply-card span,
.reply-card small,
.empty-state{
    color:var(--muted);
    font-size:12px;
}

.reply-card small{
    display:block;
    margin-top:8px;
    color:#c6f6dc;
    font-weight:800;
}

.reply-card .reply-error{
    color:#ffd0d0;
}

.empty-state{
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#101824;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(143,197,255,.42);
    outline-offset:2px;
}

@media(max-width:920px){
    .app-header{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .nav-toggle{
        display:block;
        margin-left:auto;
    }

    .main-nav{
        order:4;
        width:100%;
        display:none;
        justify-content:flex-start;
    }

    .main-nav.is-open{
        display:flex;
    }

    .ticket-hero,
    .software-panel,
    .tech-ticket-layout,
    .detail-head{
        grid-template-columns:1fr;
    }

    .support-card{
        max-width:360px;
    }

    .ticket-meta-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .software-form,
    .software-list{
        grid-template-columns:1fr;
    }

    .modal-actions-row form,
    .modal-actions-row button{
        width:100%;
    }
}

@media(max-width:640px){
    .app-header{
        position:relative;
        padding:12px;
    }

    .ticket-main{
        padding:10px;
    }

    .ticket-hero,
    .ticket-form{
        padding:16px;
    }

    .ticket-hero h2{
        font-size:24px;
    }

    .field-grid{
        grid-template-columns:1fr;
    }

    .ticket-meta-grid{
        grid-template-columns:1fr;
    }

    .nav-link,
    .form-actions a,
    .form-actions button,
    .sent-actions a{
        width:100%;
    }
}