:root{
    color-scheme:light;
    --bg:#f5f7fb;
    --panel:#fff;
    --soft:#f9fafc;
    --line:#dce3ee;
    --text:#172033;
    --muted:#626f83;
    --brand:#176b87;
    --brand-dark:#0d4f66;
    --bubble:#e8f3f7;
    --note:#fff8e8;
    --shadow:0 8px 28px #17203306
}
*{
    box-sizing:border-box
}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:15px/1.55 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
a{
    color:var(--brand);
    text-underline-offset:3px
}
button,input,select,textarea{
    font:inherit
}
button,a,input,select,textarea{
    touch-action:manipulation
}
button{
    cursor:pointer
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
    outline:3px solid #399cb8;
    outline-offset:3px
}
h1,h2,h3,p{
    margin-top:0
}
h1{
    font-size:clamp(25px,3vw,36px);
    line-height:1.2;
    letter-spacing:-1px;
    margin-bottom:14px
}
h2{
    font-size:19px;
    letter-spacing:-.3px
}
h3{
    font-size:18px;
    margin:14px 0 8px
}
.muted,small{
    color:var(--muted)
}
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
    padding:19px max(24px,calc((100vw - 1440px)/2));
    min-height:80px
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:750;
    text-decoration:none;
    color:var(--text);
    font-size:20px;
    white-space:nowrap
}
.brand .muted{
    font-size:16px;
    font-weight:450
}
.brand-mark{
    display:grid;
    place-items:center;
    background:var(--brand);
    color:white;
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:27px;
    font-weight:750
}
.topbar nav{
    display:flex;
    align-items:center;
    gap:22px
}
.topbar nav>a{
    text-decoration:none;
    font-size:14px
}
.topbar form{
    margin:0
}
.text-button{
    border:0;
    background:transparent;
    color:var(--muted);
    padding:10px 0
}
.shell{
    max-width:1440px;
    margin:auto;
    padding:42px 28px 70px;
    min-height:calc(100vh - 160px)
}
.page-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin-bottom:32px
}
.eyebrow{
    color:var(--brand);
    font-size:11px;
    letter-spacing:1.7px;
    font-weight:800;
    margin-bottom:15px
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--brand);
    color:#fff;
    border:1px solid transparent;
    border-radius:9px;
    padding:12px 18px;
    text-decoration:none;
    font-weight:650;
    min-height:44px;
    white-space:normal;
    text-align:center
}
.button:hover{
    background:var(--brand-dark)
}
.button.secondary{
    background:var(--panel);
    color:var(--brand);
    border-color:var(--line)
}
.button.small{
    padding:9px 13px;
    font-size:13px
}
.button:disabled{
    opacity:.55;
    cursor:wait
}
.workspace{
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    gap:38px
}
.filter-panel form{
    display:grid;
    gap:10px
}
.filter-panel fieldset{
    padding:0;
    border:0;
    margin:0 0 18px
}
.filter-panel legend{
    font-weight:700;
    margin-bottom:12px
}
.check{
    display:flex!important;
    align-items:center;
    gap:10px;
    font-weight:450!important;
    min-height:40px;
    margin:0!important
}
.check input{
    width:17px;
    height:17px;
    accent-color:var(--brand);
    margin:0
}
.app-dot{
    width:7px;
    height:7px;
    background:var(--brand);
    border-radius:50%;
    opacity:.5
}
.filter-panel label{
    font-size:13px
}
.list-heading{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin:0 0 18px
}
.list-heading h2{
    margin:0
}
.ticket-card{
    display:block;
    background:var(--panel);
    border:1px solid var(--line);
    padding:22px 24px;
    border-radius:13px;
    margin-bottom:13px;
    text-decoration:none;
    color:var(--text);
    box-shadow:var(--shadow);
    transition:border-color .15s,transform .15s
}
.ticket-card:hover{
    border-color:var(--brand);
    transform:translateY(-1px)
}
.ticket-top,.ticket-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap
}
.ticket-meta{
    color:var(--muted);
    font-size:12px;
    margin-top:9px
}
.badge{
    background:var(--bubble);
    color:var(--brand-dark);
    padding:4px 9px;
    border-radius:6px;
    font-size:12px;
    font-weight:650
}
.status{
    font-size:12px;
    color:var(--muted)
}
.status:before{
    content:'●';
    font-size:8px;
    margin-right:7px
}
.status-waiting_customer{
    color:#9a5800
}
.status-resolved,.status-closed{
    color:#147047
}
.unread{
    font-weight:650;
    color:var(--brand);
    font-size:12px
}
.empty{
    text-align:center;
    padding:65px 24px;
    background:var(--panel);
    border:1px dashed var(--line);
    border-radius:14px
}
.empty p{
    max-width:400px;
    margin:0 auto 24px
}
.empty-icon{
    font-size:48px;
    color:var(--brand);
    margin-bottom:20px
}
.panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:24px;
    box-shadow:var(--shadow)
}
label{
    display:block;
    font-weight:600;
    font-size:13px;
    margin:18px 0 7px
}
input:not([type=checkbox]):not([type=file]),select,textarea{
    width:100%;
    color:var(--text);
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
    padding:11px 12px;
    min-height:44px
}
textarea{
    resize:vertical
}
input[type=file]{
    max-width:100%;
    font-size:13px
}
input[type=file]::file-selector-button{
    border:1px solid var(--line);
    border-radius:6px;
    padding:8px;
    background:var(--soft);
    color:var(--text);
    margin-right:10px
}
#file-help{
    display:block;
    margin-top:8px
}
#selected-files{
    font-size:13px;
    list-style:none;
    padding:0
}
#selected-files li{
    display:flex;
    align-items:center;
    gap:12px;
    overflow-wrap:anywhere
}
#selected-files button{
    border:0;
    background:none;
    color:var(--brand);
    padding:8px
}
.create-form{
    max-width:850px;
    margin:auto
}
.create-form>label:first-of-type{
    margin-top:0
}
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.form-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:24px
}
.form-actions .muted{
    font-size:12px
}
.back{
    display:inline-block;
    margin-bottom:24px;
    text-decoration:none;
    font-size:14px
}
.conversation-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:24px
}
.agent-layout{
    grid-template-columns:220px minmax(0,1fr) 245px
}
.conversation{
    padding:0;
    overflow:hidden
}
.conversation-heading{
    padding:26px;
    border-bottom:1px solid var(--line)
}
.conversation-heading h1{
    font-size:24px;
    margin:18px 0 10px;
    overflow-wrap:anywhere
}
.conversation-heading p{
    font-size:13px;
    margin:0
}
.messages{
    padding:28px;
    display:flex;
    flex-direction:column;
    gap:25px
}
.message{
    max-width:85%;
    align-self:flex-start;
    min-width:100px
}
.message.own{
    align-self:flex-end
}
.message-author{
    font-size:12px;
    font-weight:700;
    margin:0 0 7px
}
.message-author span{
    display:block;
    font-size:10px;
    font-weight:400;
    color:var(--muted)
}
.own .message-author,.own time{
    text-align:right
}
.bubble{
    padding:15px 18px;
    border-radius:0 12px 12px;
    background:var(--soft);
    border:1px solid var(--line)
}
.own .bubble{
    background:var(--bubble);
    border-color:transparent;
    border-radius:12px 0 12px 12px
}
.message-body{
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:14px
}
.message time{
    font-size:10px;
    color:var(--muted);
    display:block;
    margin-top:7px
}
.attachment{
    display:block;
    font-size:12px;
    margin-top:12px;
    overflow-wrap:anywhere
}
.timeline{
    text-align:center;
    color:var(--muted);
    font-size:12px
}
.timeline small{
    display:block
}
.composer{
    border-top:1px solid var(--line);
    padding:24px;
    background:var(--soft)
}
.composer>label:first-child{
    margin-top:0
}
.details .panel{
    padding:20px;
    margin-bottom:18px
}
.details h2{
    font-size:15px
}
dl{
    font-size:12px;
    margin:0
}
dt{
    color:var(--muted);
    margin-top:16px
}
dd{
    margin:3px 0 0;
    overflow-wrap:anywhere
}
.resolution{
    background:var(--bubble);
    margin:20px;
    padding:18px;
    border-radius:9px;
    font-size:13px
}
.resolution form{
    margin-top:12px
}
.internal{
    background:var(--note)
}
.internal-note{
    font-size:12px;
    border-bottom:1px solid var(--line);
    padding:10px 0;
    overflow-wrap:anywhere
}
.internal-note small{
    display:block
}
.internal-note p{
    white-space:pre-wrap;
    margin:10px 0
}
summary{
    cursor:pointer;
    font-weight:650;
    font-size:14px
}
.details button{
    margin-top:15px
}
.nearby{
    align-self:start;
    padding:14px
}
.nearby-ticket{
    display:block;
    padding:14px 10px;
    border-radius:8px;
    text-decoration:none;
    font-size:12px;
    color:var(--text)
}
.nearby-ticket strong,.nearby-ticket span,.nearby-ticket small{
    display:block
}
.nearby-ticket strong{
    margin:5px 0
}
.nearby-ticket.active{
    background:var(--bubble)
}
.pagination{
    display:flex;
    justify-content:space-between;
    gap:16px;
    font-size:13px;
    margin:22px 0
}
.pagination a{
    padding:8px
}
.notice,.error{
    padding:16px 20px;
    margin-bottom:24px;
    border-radius:10px;
    background:var(--bubble)
}
.error{
    background:#ffebe9;
    color:#922b25
}
.login{
    max-width:480px;
    margin:70px auto
}
.login button{
    width:100%;
    margin-top:24px
}
footer{
    max-width:1384px;
    margin:auto;
    border-top:1px solid var(--line);
    padding:23px 28px;
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:12px
}
.skip{
    position:absolute;
    left:20px;
    top:-80px;
    background:var(--panel);
    padding:12px;
    z-index:10
}
.skip:focus{
    top:10px
}
@media(min-width:1500px){
    .agent-layout{
        grid-template-columns:230px minmax(0,1fr) 260px
    }
}
@media(max-width:1150px){
    .agent-layout{
        grid-template-columns:minmax(0,1fr) 250px
    }
    .nearby{
        display:none
    }
}
@media(max-width:760px){
    .topbar{
        padding:15px 18px;
        flex-wrap:wrap;
        gap:16px
    }
    .topbar nav{
        gap:16px;
        flex-wrap:wrap;
        width:100%
    }
    .topbar .brand{
        font-size:18px
    }
    .shell{
        padding:28px 16px 40px
    }
    .page-heading{
        display:block;
        margin-bottom:25px
    }
    .page-heading .button{
        margin-top:8px
    }
    .workspace{
        display:block
    }
    .filter-panel{
        margin-bottom:26px;
        border-bottom:1px solid var(--line);
        padding-bottom:20px
    }
    .filter-panel fieldset{
        display:flex;
        flex-wrap:wrap;
        gap:3px 16px;
        margin-bottom:2px
    }
    .filter-panel .check{
        font-size:13px
    }
    .filter-panel form{
        grid-template-columns:1fr 1fr;
        gap:10px 14px
    }
    .filter-panel fieldset{
        grid-column:1/-1
    }
    .filter-panel label:not(.check){
        grid-column:1/-1;
        margin:8px 0 0
    }
    .filter-panel select,.filter-panel input[type=search]{
        grid-column:1/-1
    }
    .conversation-layout,.agent-layout{
        display:flex;
        flex-direction:column
    }
    .conversation{
        order:0
    }
    .details{
        order:1
    }
    .conversation-heading{
        padding:20px
    }
    .messages{
        padding:18px;
        gap:22px
    }
    .message{
        max-width:92%
    }
    .composer{
        padding:18px
    }
    .form-actions{
        align-items:stretch;
        flex-direction:column
    }
    .form-actions button{
        width:100%
    }
    .form-grid{
        grid-template-columns:1fr;
        gap:0
    }
    .panel{
        padding:20px
    }
    .conversation.panel{
        padding:0
    }
    .ticket-card{
        padding:18px
    }
    .ticket-meta{
        align-items:start;
        gap:7px
    }
    .ticket-meta>span{
        overflow-wrap:anywhere
    }
    .list-heading .muted{
        font-size:12px
    }
    .login{
        margin:30px auto
    }
    .create-form{
        padding:20px
    }
    footer{
        padding:20px 16px
    }
    .pagination{
        gap:8px
    }
    .nearby{
        display:none
    }
}
@media(prefers-color-scheme:dark){
    :root{
        color-scheme:dark;
        --bg:#111925;
        --panel:#192433;
        --soft:#1d2a3b;
        --line:#324257;
        --text:#e9eef6;
        --muted:#adb8c9;
        --brand:#72bfd5;
        --brand-dark:#a1d9e8;
        --bubble:#243d49;
        --note:#373225
    }
    .button{
        color:#11222d
    }
    .button:hover{
        background:#9bd7e8
    }
    .brand-mark{
        color:#12242e
    }
    .status-waiting_customer{
        color:#edc279
    }
    .status-resolved,.status-closed{
        color:#84c9a6
    }
    .error{
        background:#492c2b;
        color:#ffd2ce
    }
}
.conversation{
    align-self:start
}

.support-hero{max-width:800px;margin:30px auto 48px;text-align:center}
.support-hero h1{font-size:clamp(32px,4vw,52px)}
.help-search{max-width:640px;margin:32px auto 0;text-align:left}
.help-search>div{display:flex;gap:10px}
.help-search input{min-width:0}
.support-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.support-cards .panel{display:flex;flex-direction:column;align-items:flex-start}
.support-cards .panel>p.muted{flex:1}
.support-reassurance{text-align:center;margin:32px auto;max-width:700px}
.knowledge-filters{display:flex;gap:20px;align-items:end;margin:28px 0}
.knowledge-filters>div{flex:1;min-width:0}
.knowledge-filters label{margin-top:0}
.knowledge-results .empty{grid-column:1/-1}
.guide-reading{max-width:850px;margin:auto;overflow-wrap:anywhere}
.guide-section{margin-top:28px}
.guide-text{white-space:pre-wrap}
.guide-reading pre{max-width:100%;overflow:auto;background:var(--soft);padding:18px;border-radius:8px}
@media(max-width:760px){.support-cards{grid-template-columns:1fr}.support-hero{margin:15px auto 30px}.help-search>div,.knowledge-filters{flex-direction:column}.knowledge-filters{align-items:stretch}.support-hero h1{letter-spacing:-.7px}}

.closed-ticket>summary{font-weight:inherit;font-size:inherit;list-style:none}
.closed-ticket>summary::-webkit-details-marker{display:none}
.closed-ticket-hint{display:inline-block;color:var(--brand);font-size:12px}
.closed-ticket-hint:before{content:'▸';display:inline-block;margin-right:7px}
.closed-ticket[open] .closed-ticket-hint:before{transform:rotate(90deg)}
.closed-ticket>.button{margin-top:16px}

.support-logo{display:block;flex:none;width:44px;height:44px}
.support-wordmark{display:flex;flex-direction:column;line-height:1.05;letter-spacing:-.7px}
.support-wordmark-label{font-size:12px;letter-spacing:2.4px;font-weight:600;color:var(--brand);margin-top:6px}