@font-face {
    font-family: SFProText;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../home/fonts/SFProText-Regular.woff2') format('woff2');
}

      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400 700;
        font-display: swap;
        src: url("../../home/fonts/Montserrat-cyrillic-ext.woff2") format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
      }
      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400 700;
        font-display: swap;
        src: url("../../home/fonts/Montserrat-cyrillic.woff2") format('woff2');
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
      }
      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400 700;
        font-display: swap;
        src: url("../../home/fonts/Montserrat-vietnamese.woff2") format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
      }
      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400 700;
        font-display: swap;
        src: url("../../home/fonts/Montserrat-latin-ext.woff2") format('woff2');
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
      }
      @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400 700;
        font-display: swap;
        src: url("../../home/fonts/Montserrat-latin.woff2") format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }

.support-customer-page {
    margin: 0;
    min-height: 100vh;
    background: var(--ds-bg);
    color: var(--ds-ink);
    font: var(--ds-font-size-body)/var(--ds-line-height-body) var(--ds-font-sans);
    overflow-wrap: anywhere;
}

.support-customer-page *,
.support-customer-page *::before,
.support-customer-page *::after { box-sizing: border-box; }
.support-customer-page a { color: var(--ds-link); }
.support-customer-page a:hover { color: var(--ds-link-hover); }
.support-customer-page :focus-visible { outline: 2px solid var(--ds-focus); outline-offset: var(--ds-space-1); }

.support-site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    min-height: 57px;
    gap: var(--ds-space-2) var(--ds-space-6);
    padding: var(--ds-space-1) var(--ds-space-6);
    background: var(--ds-card);
    border-bottom: 1px solid var(--ds-line);
}
.support-site-header .support-brand {
    font-family: var(--ds-font-display);
    font-weight: 700;
    color: var(--ds-ink);
    text-decoration: none;
    font-size: var(--ds-font-size-h3);
}
.support-site-header nav { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-4); }
.support-site-header nav a { display: inline-flex; align-items: center; min-height: var(--ds-space-12); text-decoration: none; }
.support-skip { position: absolute; left: var(--ds-space-4); top: var(--ds-space-2); transform: translateY(-200%); }
.support-skip:focus { transform: none; z-index: 1; background: var(--ds-card); padding: var(--ds-space-3); }

.support-customer-page .page-container { width: 100%; max-width: 960px; margin: 0 auto; padding: var(--ds-space-8) var(--ds-space-6); }
.support-customer-page .support-submit-page { max-width: 720px; }
.page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ds-space-3); margin-bottom: var(--ds-space-6); }
.page-header h1 { margin: 0; font: 700 var(--ds-font-size-h1)/var(--ds-line-height-h1) var(--ds-font-display); }
.support-customer-page h2, .support-customer-page h3 { font-family: var(--ds-font-display); }
.page-header a { min-height: var(--ds-space-12); display: inline-flex; align-items: center; }
.card { min-width: 0; background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-card); }
.support-submit-page .card { padding: var(--ds-space-6); }

.support-customer-page .btn-new,
.support-customer-page .btn-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
    min-height: var(--ds-space-12); max-width: 100%; padding: var(--ds-space-3) var(--ds-space-5);
    background: var(--ds-brand); color: var(--ds-on-cta); border: 1px solid var(--ds-brand);
    border-radius: var(--ds-radius-md); font: inherit; font-weight: 600; text-decoration: none;
    text-align: center; cursor: pointer;
}
.support-customer-page .btn-new:hover, .support-customer-page .btn-submit:hover { background: var(--ds-brand-hover); color: var(--ds-on-cta); }
.filter-tabs { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-bottom: var(--ds-space-5); }
.filter-tab { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ds-space-12); padding: var(--ds-space-2) var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); color: var(--ds-ink-soft); background: var(--ds-card); text-decoration: none; }
.filter-tab.active { color: var(--ds-link); border-color: var(--ds-focus); background: var(--ds-surface); font-weight: 600; }
.filter-tab:hover { border-color: var(--ds-focus); }

.support-ticket-list { overflow: hidden; }
.support-customer-page table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.support-customer-page th, .support-customer-page td { padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-line); text-align: left; vertical-align: top; }
.support-customer-page th { color: var(--ds-ink-soft); background: var(--ds-surface); font-size: var(--ds-font-size-caption); line-height: var(--ds-line-height-caption); font-weight: 600; }
.support-customer-page th:nth-child(2) { width: 30%; }
.support-customer-page tr:last-child td { border-bottom: 0; }
.ticket-num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; }
.badge { display: inline-block; max-width: 100%; padding: var(--ds-space-1) var(--ds-space-2); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-ink-soft); font-size: var(--ds-font-size-caption); line-height: var(--ds-line-height-caption); }
.badge-open, .badge-in_progress { color: var(--ds-link); }
.badge-resolved, .badge-low { color: var(--ds-success-text); }
.badge-waiting_user, .badge-escalated, .badge-high, .badge-urgent { color: var(--ds-error-text); }

.empty-state { padding: var(--ds-space-16) var(--ds-space-6); text-align: center; }
.empty-state h3 { font-size: var(--ds-font-size-h4); line-height: var(--ds-line-height-h4); margin: var(--ds-space-4) 0 var(--ds-space-2); }
.empty-state p { color: var(--ds-ink-soft); margin-bottom: var(--ds-space-5); }
.empty-state a { display: inline-flex; align-items: center; min-height: var(--ds-space-12); }
.form-group { margin-bottom: var(--ds-space-5); }
.form-group label { display: block; font-weight: 600; margin-bottom: var(--ds-space-2); }
.form-group .help-text, .category-help { color: var(--ds-ink-soft); font-size: var(--ds-font-size-bodySm); line-height: var(--ds-line-height-bodySm); }
.form-group .help-text { margin-bottom: var(--ds-space-2); }
.form-input { width: 100%; min-width: 0; min-height: var(--ds-space-12); padding: var(--ds-space-3); border: 1px solid var(--ds-input-border); border-radius: var(--ds-radius-sm); background: var(--ds-card); color: var(--ds-ink); font: inherit; }
textarea.form-input { resize: vertical; }
.form-errors { color: var(--ds-error-text); background: var(--ds-card); border: 1px solid var(--ds-error-text); border-radius: var(--ds-radius-sm); padding: var(--ds-space-4); margin-bottom: var(--ds-space-5); }
.form-errors ul { margin: 0; padding: 0; list-style: none; }
.form-errors li + li { margin-top: var(--ds-space-1); }
.advanced-toggle { display: inline-flex; align-items: center; gap: var(--ds-space-1); min-height: var(--ds-space-12); padding: 0; margin-bottom: var(--ds-space-4); border: 0; background: transparent; color: var(--ds-link); font: inherit; text-align: left; cursor: pointer; }
.advanced-toggle:hover { text-decoration: underline; }
.advanced-fields { display: none; }
.advanced-fields.open { display: block; }
.success-card { text-align: center; }
.success-card h2 { font-size: var(--ds-font-size-h2); line-height: var(--ds-line-height-h2); }
.success-card .ticket-num { display: inline-block; padding: var(--ds-space-2) var(--ds-space-4); margin: var(--ds-space-3) 0; border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-link); }
.success-card a { display: inline-flex; align-items: center; min-height: var(--ds-space-12); margin-top: var(--ds-space-5); }
.category-help { display: none; margin-top: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-surface); border-radius: var(--ds-radius-sm); }
.category-help.visible { display: block; }
.contact-fallback { margin: var(--ds-space-4) 0 var(--ds-space-6); }
.guest-support p { margin: var(--ds-space-4) 0; }

@media (max-width: 812px) {
    .support-site-header { padding-inline: var(--ds-space-4); }
    .support-customer-page .page-container { padding: var(--ds-space-6) var(--ds-space-4); }
    .support-submit-page .card { padding: var(--ds-space-4); }
    .hide-mobile { display: none; }
    .support-customer-page th, .support-customer-page td { padding: var(--ds-space-3) var(--ds-space-2); }
    .support-customer-page th:first-child { width: 29%; }
    .support-customer-page th:nth-child(2) { width: 42%; }
}