/* Generated by scripts/build-atokongo-theme.sh — do not edit directly. */

/* ===== tokens.css ===== */
/*
 * Atokongo support theme — design tokens.
 *
 * These source modules are bundled into /css/atokongo-theme.css. Asset URLs
 * therefore resolve from the bundle location, not from this source directory.
 */
@font-face {
    font-family: "Renogare";
    src: url("../assets/font/Renogare-Regular.otf") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

.atokongo-theme {
    --atk-primary: #72409e;
    --atk-primary-strong: #4b1d7f;
    --atk-primary-soft: #f1e9fb;
    --atk-accent: #8c43ea;
    --atk-accent-bright: #a461ff;
    --atk-deep: #120629;
    --atk-deep-2: #1d0b43;
    --atk-ink: #252634;
    --atk-muted: #667085;
    --atk-muted-strong: #475467;
    --atk-line: #e7e1ee;
    --atk-line-strong: #d8cce5;
    --atk-surface: #ffffff;
    --atk-surface-soft: #f8f6fb;
    --atk-surface-purple: #f5f0fb;
    --atk-success: #137a55;
    --atk-success-soft: #e8f7f0;
    --atk-warning: #9a6700;
    --atk-warning-soft: #fff7da;
    --atk-danger: #b42318;
    --atk-danger-soft: #fff0ee;
    --atk-info: #175cd3;
    --atk-info-soft: #eff5ff;
    --atk-radius-sm: 8px;
    --atk-radius-md: 14px;
    --atk-radius-lg: 22px;
    --atk-radius-xl: 30px;
    --atk-shadow-sm: 0 4px 14px rgba(38, 19, 66, 0.08);
    --atk-shadow-md: 0 16px 40px rgba(38, 19, 66, 0.12);
    --atk-shadow-lg: 0 28px 70px rgba(18, 6, 41, 0.22);
    --atk-font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    --atk-font-display: "Renogare", Inter, ui-sans-serif, sans-serif;
    --atk-content-max: 1320px;
    --atk-transition: 180ms cubic-bezier(.2, .7, .2, 1);
    color-scheme: light;
}

/* ===== base.css ===== */
/*
 * Shared primitives. All selectors are scoped to the explicit theme class so
 * osTicket and plugin markup keep their native behavior.
 */
.atokongo-theme {
    box-sizing: border-box;
    color: var(--atk-ink);
    font-family: var(--atk-font-body);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.atokongo-theme *,
.atokongo-theme *::before,
.atokongo-theme *::after {
    box-sizing: inherit;
}

.atokongo-theme h1,
.atokongo-theme h2,
.atokongo-theme h3,
.atokongo-theme h4,
.atokongo-theme h5,
.atokongo-theme h6 {
    color: var(--atk-ink);
    font-family: var(--atk-font-display);
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.atokongo-theme a {
    color: var(--atk-primary);
    text-decoration-color: rgba(114, 64, 158, 0.35);
    text-underline-offset: 0.18em;
    transition:
        color var(--atk-transition),
        background-color var(--atk-transition),
        border-color var(--atk-transition),
        box-shadow var(--atk-transition);
}

.atokongo-theme a:hover {
    color: var(--atk-primary-strong);
}

.atokongo-theme button,
.atokongo-theme input,
.atokongo-theme select,
.atokongo-theme textarea {
    font: inherit;
}

.atokongo-theme input[type="text"],
.atokongo-theme input[type="email"],
.atokongo-theme input[type="password"],
.atokongo-theme input[type="search"],
.atokongo-theme input[type="tel"],
.atokongo-theme input[type="url"],
.atokongo-theme input[type="number"],
.atokongo-theme select,
.atokongo-theme textarea {
    max-width: 100%;
    min-height: 42px;
    border: 1px solid var(--atk-line-strong);
    border-radius: var(--atk-radius-sm);
    background: var(--atk-surface);
    color: var(--atk-ink);
    outline: 0;
    padding: 9px 12px;
    transition:
        border-color var(--atk-transition),
        box-shadow var(--atk-transition),
        background-color var(--atk-transition);
}

.atokongo-theme textarea {
    min-height: 120px;
    resize: vertical;
}

.atokongo-theme input::placeholder,
.atokongo-theme textarea::placeholder {
    color: #98a2b3;
    opacity: 1;
}

.atokongo-theme input[type="text"]:focus,
.atokongo-theme input[type="email"]:focus,
.atokongo-theme input[type="password"]:focus,
.atokongo-theme input[type="search"]:focus,
.atokongo-theme input[type="tel"]:focus,
.atokongo-theme input[type="url"]:focus,
.atokongo-theme input[type="number"]:focus,
.atokongo-theme select:focus,
.atokongo-theme textarea:focus {
    border-color: var(--atk-accent);
    box-shadow: 0 0 0 4px rgba(140, 67, 234, 0.14);
}

.atokongo-theme button,
.atokongo-theme input[type="submit"],
.atokongo-theme input[type="button"],
.atokongo-theme input[type="reset"],
.atokongo-theme .button,
.atokongo-theme .action-button {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--atk-radius-sm);
    background: linear-gradient(135deg, var(--atk-primary), var(--atk-accent));
    box-shadow: 0 7px 18px rgba(114, 64, 158, 0.2);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    text-decoration: none;
    transition:
        transform var(--atk-transition),
        box-shadow var(--atk-transition),
        background-color var(--atk-transition),
        border-color var(--atk-transition);
}

.atokongo-theme button:hover,
.atokongo-theme input[type="submit"]:hover,
.atokongo-theme input[type="button"]:hover,
.atokongo-theme .button:hover,
.atokongo-theme .action-button:hover {
    box-shadow: 0 10px 24px rgba(114, 64, 158, 0.28);
    color: #fff;
    transform: translateY(-1px);
}

.atokongo-theme button:active,
.atokongo-theme input[type="submit"]:active,
.atokongo-theme input[type="button"]:active,
.atokongo-theme .button:active,
.atokongo-theme .action-button:active {
    box-shadow: 0 4px 12px rgba(114, 64, 158, 0.2);
    transform: translateY(0);
}

.atokongo-theme button[disabled],
.atokongo-theme input[disabled],
.atokongo-theme select[disabled],
.atokongo-theme textarea[disabled] {
    cursor: not-allowed;
    opacity: 0.58;
}

.atokongo-theme :where(
    a,
    button,
    input,
    select,
    textarea,
    [tabindex]
):focus-visible {
    outline: 3px solid rgba(140, 67, 234, 0.46);
    outline-offset: 3px;
}

.atokongo-theme .sr-only {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.atokongo-theme #msg_error,
.atokongo-theme .error_bar,
.atokongo-theme #error_bar,
.atokongo-theme .error-banner {
    border: 1px solid #f6c7c2;
    border-radius: var(--atk-radius-sm);
    background: var(--atk-danger-soft);
    color: var(--atk-danger);
}

.atokongo-theme #msg_warning,
.atokongo-theme .warning_bar,
.atokongo-theme #warning_bar,
.atokongo-theme .warning-banner {
    border: 1px solid #f2d887;
    border-radius: var(--atk-radius-sm);
    background: var(--atk-warning-soft);
    color: var(--atk-warning);
}

.atokongo-theme #msg_notice,
.atokongo-theme .notice_bar,
.atokongo-theme #notice_bar,
.atokongo-theme .notice-banner,
.atokongo-theme #msg_info {
    border: 1px solid #bdd3ff;
    border-radius: var(--atk-radius-sm);
    background: var(--atk-info-soft);
    color: #1849a9;
}

.atokongo-theme .g-recaptcha {
    max-width: 100%;
    transform-origin: left top;
}

@media (max-width: 380px) {
    .atokongo-theme .g-recaptcha {
        transform: scale(0.86);
    }
}

@media (prefers-reduced-motion: reduce) {
    .atokongo-theme *,
    .atokongo-theme *::before,
    .atokongo-theme *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }

    .atokongo-theme button:hover,
    .atokongo-theme input[type="submit"]:hover,
    .atokongo-theme input[type="button"]:hover,
    .atokongo-theme .button:hover,
    .atokongo-theme .action-button:hover {
        transform: none;
    }
}

/* ===== client.css ===== */
/*
 * Atokongo client portal.
 *
 * This is a source module for /css/atokongo-theme.css. Keep every selector
 * below the .atokongo-client scope so osTicket's staff UI and plugins retain
 * their native layout.
 */

/* Shell ------------------------------------------------------------------- */

.atokongo-client {
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 8% 2%, rgba(140, 67, 234, 0.12), transparent 28rem),
        linear-gradient(180deg, #f6f2fb 0, #fbfaff 26rem, #f5f3f8 100%);
}

.atokongo-client #container {
    width: min(calc(100% - 32px), var(--atk-content-max));
    min-height: calc(100vh - 150px);
    margin: 20px auto 0;
    overflow: visible;
    border: 1px solid rgba(114, 64, 158, 0.1);
    border-radius: var(--atk-radius-xl) var(--atk-radius-xl) 0 0;
    background: var(--atk-surface);
    box-shadow: var(--atk-shadow-lg);
}

.atokongo-client #header {
    min-height: 94px;
    height: auto;
    margin: 0;
    padding: 18px clamp(20px, 4vw, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 0;
    border-radius: var(--atk-radius-xl) var(--atk-radius-xl) 0 0;
    background:
        radial-gradient(circle at 72% 0, rgba(164, 97, 255, 0.22), transparent 22rem),
        linear-gradient(120deg, var(--atk-deep), var(--atk-deep-2));
}

.atokongo-client #header #logo {
    width: auto;
    min-width: 168px;
    max-width: min(260px, 48vw);
    min-height: 56px;
    height: auto;
    padding: 8px 14px;
    order: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
}

.atokongo-client #header #logo .valign-helper {
    display: none;
}

.atokongo-client #header #logo img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 44px;
    object-fit: contain;
}

.atokongo-client #header > .pull-right {
    width: auto;
    max-width: 62%;
    margin: 0;
    order: 2;
    float: none;
    color: rgba(255, 255, 255, 0.78);
    text-align: right;
}

.atokongo-client #header > .pull-right p {
    margin: 3px 0;
    line-height: 1.45;
}

.atokongo-client #header > .pull-right a {
    color: #fff;
    font-weight: 650;
    text-decoration: none;
}

.atokongo-client #header > .pull-right a:hover {
    color: #d9bfff;
}

.atokongo-client #nav {
    width: 100%;
    min-height: 58px;
    height: auto;
    margin: 0;
    padding: 8px clamp(16px, 4vw, 44px);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    border: 0;
    border-bottom: 1px solid var(--atk-line);
    background: var(--atk-surface);
    list-style: none;
    scrollbar-width: thin;
}

.atokongo-client #nav li {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    border: 0;
}

.atokongo-client #nav li a {
    min-height: 40px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--atk-muted-strong);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.atokongo-client #nav li a:hover {
    border-color: var(--atk-line);
    background: var(--atk-surface-soft);
    color: var(--atk-primary-strong);
}

.atokongo-client #nav li a.active {
    border-color: rgba(114, 64, 158, 0.16);
    background: var(--atk-primary-soft);
    color: var(--atk-primary-strong);
    box-shadow: inset 0 0 0 1px rgba(114, 64, 158, 0.03);
}

.atokongo-client #content {
    width: 100%;
    min-height: 520px;
    margin: 0;
    padding: clamp(28px, 4.2vw, 54px);
    border: 0;
    background: var(--atk-surface);
}

.atokongo-client #content > h1:first-child {
    margin-top: 0;
    font-size: clamp(1.75rem, 3vw, 2.6rem);
}

.atokongo-client #footer {
    width: min(calc(100% - 32px), var(--atk-content-max));
    height: auto;
    min-height: 104px;
    margin: 0 auto 24px;
    padding: 24px clamp(22px, 4vw, 48px);
    border: 0;
    border-radius: 0 0 var(--atk-radius-xl) var(--atk-radius-xl);
    background:
        radial-gradient(circle at 82% 0, rgba(140, 67, 234, 0.2), transparent 20rem),
        var(--atk-deep);
    color: rgba(255, 255, 255, 0.74);
    text-align: left;
    box-shadow: 0 22px 54px rgba(18, 6, 41, 0.18);
}

.atokongo-client #footer p {
    margin: 0 0 7px;
}

.atokongo-client #footer a,
.atokongo-client #footer #poweredBy {
    color: #dcbfff;
    text-decoration: none;
}

.atokongo-client #footer a:hover,
.atokongo-client #footer #poweredBy:hover {
    color: #fff;
}

.atokongo-client #overlay {
    background: rgba(18, 6, 41, 0.64);
    backdrop-filter: blur(3px);
}

.atokongo-client #loading {
    width: min(360px, calc(100vw - 32px));
    min-height: 112px;
    height: auto;
    padding: 20px 24px 20px 76px;
    border: 1px solid var(--atk-line-strong);
    border-radius: var(--atk-radius-md);
    background-color: #fff;
    box-shadow: var(--atk-shadow-lg);
}

.atokongo-client #loading h4 {
    margin: 0 0 5px;
    color: var(--atk-primary-strong);
}

.atokongo-client #loading p {
    margin: 0;
    color: var(--atk-muted);
}

/* Messages ---------------------------------------------------------------- */

.atokongo-client #content > #msg_error,
.atokongo-client #content > #msg_notice,
.atokongo-client #content > #msg_warning,
.atokongo-client #content > #msg_info,
.atokongo-client #container > .error_bar,
.atokongo-client #container > .warning_bar,
.atokongo-client #container > .notice_bar {
    margin: 0 0 22px;
    padding: 13px 16px;
    box-shadow: none;
    font-weight: 600;
}

.atokongo-client #container > .error_bar,
.atokongo-client #container > .warning_bar,
.atokongo-client #container > .notice_bar {
    width: min(calc(100% - 32px), var(--atk-content-max));
    margin: 16px auto;
}

/* Landing page ------------------------------------------------------------ */

.atokongo-client #landing_page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    grid-template-areas:
        "main side"
        "featured featured";
    gap: 24px;
}

.atokongo-client #landing_page > .main-content {
    min-width: 0;
    grid-area: main;
    float: none;
}

.atokongo-client #landing_page > .sidebar {
    width: auto;
    min-width: 0;
    margin: 0;
    grid-area: side;
    float: none;
}

.atokongo-client #landing_page > .clear {
    display: none;
}

.atokongo-client #landing_page > div:last-child:not(.clear) {
    min-width: 0;
    grid-area: featured;
}

.atokongo-client #landing_page .main-content .thread-body {
    min-height: 330px;
    margin: 0;
    padding: clamp(30px, 5vw, 58px);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(164, 97, 255, 0.2);
    border-radius: var(--atk-radius-lg);
    background:
        radial-gradient(circle at 88% 20%, rgba(164, 97, 255, 0.36), transparent 11rem),
        radial-gradient(circle at 75% 110%, rgba(114, 64, 158, 0.42), transparent 20rem),
        linear-gradient(135deg, #0e0523, #1e0b49 68%, #35136e);
    box-shadow: var(--atk-shadow-md);
    color: rgba(255, 255, 255, 0.82);
}

.atokongo-client #landing_page .main-content .thread-body::after {
    width: 250px;
    height: 250px;
    content: "";
    position: absolute;
    right: -86px;
    bottom: -112px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    box-shadow:
        0 0 0 36px rgba(255, 255, 255, 0.025),
        0 0 0 78px rgba(255, 255, 255, 0.018);
    pointer-events: none;
}

.atokongo-client #landing_page .main-content .thread-body h1,
.atokongo-client #landing_page .main-content .thread-body h2,
.atokongo-client #landing_page .main-content .thread-body h3 {
    max-width: 16ch;
    margin: 0 0 18px;
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: clamp(2rem, 4.2vw, 3.65rem);
}

.atokongo-client #landing_page .main-content .thread-body p {
    max-width: 62ch;
    margin: 0 0 16px;
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.atokongo-client #landing_page .main-content .thread-body a {
    color: #e7d4ff;
}

.atokongo-client #landing_page .search-form {
    margin: 0 0 18px;
    padding: 10px;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

.atokongo-client #landing_page .search-form form {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.atokongo-client #landing_page .search-form .search {
    width: 100%;
    min-width: 0;
    margin: 0;
    flex: 1 1 auto;
    border-color: transparent;
    background: var(--atk-surface-soft);
}

.atokongo-client #landing_page .search-form .button {
    min-width: 118px;
    margin: 0;
}

.atokongo-client #landing_page .front-page-button {
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-lg);
    background: linear-gradient(145deg, #fff, var(--atk-surface-purple));
    box-shadow: var(--atk-shadow-sm);
    text-align: left;
}

.atokongo-client #landing_page .front-page-button p {
    margin: 0 0 12px;
}

.atokongo-client #landing_page .front-page-button p:last-child {
    margin-bottom: 0;
}

.atokongo-client #landing_page .front-page-button .button {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    justify-content: flex-start;
    font-weight: 750;
}

.atokongo-client #landing_page .front-page-button .green.button {
    border-color: var(--atk-line-strong);
    background: #fff;
    box-shadow: none;
    color: var(--atk-primary-strong);
}

.atokongo-client #landing_page .front-page-button .green.button:hover {
    border-color: rgba(114, 64, 158, 0.38);
    background: var(--atk-primary-soft);
    color: var(--atk-primary-strong);
}

.atokongo-client #landing_page .sidebar > .content,
.atokongo-client .row .sidebar > .content {
    padding: 18px;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-lg);
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

.atokongo-client #landing_page .sidebar > .content:empty,
.atokongo-client .row .sidebar > .content:empty {
    display: none;
}

.atokongo-client #landing_page .sidebar .content section,
.atokongo-client .row .sidebar .content section {
    margin: 0 0 20px;
}

.atokongo-client #landing_page .sidebar .content section:last-child,
.atokongo-client .row .sidebar .content section:last-child {
    margin-bottom: 0;
}

.atokongo-client #landing_page .sidebar .content .header,
.atokongo-client .row .sidebar .content .header {
    margin: 0 0 9px;
    padding: 0 0 9px;
    border-bottom: 1px solid var(--atk-line);
    color: var(--atk-ink);
    font-family: var(--atk-font-display);
    font-size: 1rem;
}

.atokongo-client #landing_page .sidebar .content section > div:not(.header),
.atokongo-client .row .sidebar .content section > div:not(.header) {
    margin: 7px 0;
}

.atokongo-client #landing_page .featured-category {
    width: calc(50% - 12px);
    min-height: 160px;
    margin: 12px 20px 12px 0;
    padding: 22px;
    display: inline-block;
    vertical-align: top;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: var(--atk-surface-soft);
}

.atokongo-client #landing_page .featured-category:nth-of-type(2n) {
    margin-right: 0;
}

.atokongo-client #landing_page .featured-category > i {
    color: var(--atk-primary);
}

.atokongo-client #landing_page .featured-category .category-name {
    margin: 10px 0;
    color: var(--atk-primary-strong);
    font-family: var(--atk-font-display);
    font-size: 1.12rem;
}

.atokongo-client #landing_page .article-headline {
    margin: 10px 0 0;
}

.atokongo-client #landing_page .article-title a {
    font-weight: 700;
    text-decoration: none;
}

.atokongo-client #landing_page .article-teaser {
    margin-top: 3px;
    color: var(--atk-muted);
    font-size: 0.9rem;
}

/* Authentication and account forms --------------------------------------- */

.atokongo-client #clientLogin {
    max-width: 900px;
    margin: 28px auto;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-lg);
    background:
        radial-gradient(circle at 100% 0, var(--atk-primary-soft), transparent 18rem),
        #fff;
    box-shadow: var(--atk-shadow-md);
}

.atokongo-client #clientLogin .atk-login-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
    gap: clamp(22px, 5vw, 50px);
    align-items: stretch;
}

.atokongo-client #clientLogin .login-box {
    width: auto;
    margin: 0;
    padding: 0;
    display: block;
    border: 0;
    background: transparent;
}

.atokongo-client #clientLogin .login-box > div {
    margin: 0 0 14px;
}

.atokongo-client #clientLogin .login-box label {
    display: grid;
    gap: 7px;
    color: var(--atk-muted-strong);
    font-weight: 700;
}

.atokongo-client #clientLogin .login-box input[type="text"],
.atokongo-client #clientLogin .login-box input[type="email"],
.atokongo-client #clientLogin .login-box input[type="password"] {
    width: 100%;
    min-height: 48px;
}

.atokongo-client #clientLogin .login-box > strong:not(:empty) {
    margin: 0 0 14px;
    padding: 11px 13px;
    display: block;
    border: 1px solid #f6c7c2;
    border-radius: var(--atk-radius-sm);
    background: var(--atk-danger-soft);
    color: var(--atk-danger);
}

.atokongo-client #clientLogin .login-box p {
    margin: 18px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.atokongo-client #clientLogin .login-box .btn {
    min-width: 145px;
}

.atokongo-client #clientLogin .atk-login-submit {
    width: 100%;
    min-height: 48px;
    margin: 0;
    border: 0;
    border-radius: var(--atk-radius-sm);
    background: linear-gradient(135deg, var(--atk-primary), var(--atk-accent));
    box-shadow: 0 10px 24px rgba(114, 64, 158, 0.24);
    color: #fff !important;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.atokongo-client #clientLogin .atk-login-submit:hover,
.atokongo-client #clientLogin .atk-login-submit:focus {
    background: linear-gradient(135deg, var(--atk-primary-strong), var(--atk-accent));
    color: #fff !important;
}

.atokongo-client #clientLogin .atk-login-help,
.atokongo-client #clientLogin .instructions {
    width: auto;
    padding: 22px;
    display: block;
    border: 1px solid rgba(114, 64, 158, 0.18);
    border-radius: var(--atk-radius-md);
    background: rgba(245, 240, 251, 0.82);
    color: var(--atk-muted-strong);
}

.atokongo-client #clientLogin .atk-login-help {
    align-self: stretch;
    line-height: 1.65;
}

.atokongo-client #clientLogin .atk-login-help b {
    color: var(--atk-ink);
}

.atokongo-client #clientLogin .instructions a {
    font-weight: 700;
}

.atokongo-client #clientLogin .recaptcha-field {
    max-width: 100%;
    margin: 4px 0 16px;
    overflow: hidden;
}

.atokongo-client #clientLogin .external-auth {
    margin: 0 0 12px;
}

.atokongo-client #clientLogin .external-auth a,
.atokongo-client #clientLogin .external-auth button,
.atokongo-client #clientLogin .external-auth-box {
    width: 100%;
    min-height: 48px;
    border: 1px solid #cfd8e6;
    border-radius: var(--atk-radius-sm);
    background: #fff;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06);
    color: #253858;
    font-weight: 700;
    text-decoration: none;
}

.atokongo-client #clientLogin .external-auth a:hover,
.atokongo-client #clientLogin .external-auth button:hover,
.atokongo-client #clientLogin .external-auth-box:hover {
    border-color: var(--atk-primary);
    background: var(--atk-primary-soft);
    color: var(--atk-primary-strong);
}

.atokongo-client #content > form:not(#clientLogin):not(#ticketForm):not(#reply) {
    max-width: 900px;
    margin: 24px auto;
    padding: clamp(20px, 4vw, 36px);
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-lg);
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

.atokongo-client #content > form:not(#clientLogin):not(#ticketForm):not(#reply) table {
    width: 100%;
    max-width: 100%;
}

.atokongo-client .atk-register-form table.padded {
    width: 100% !important;
    table-layout: auto;
}

.atokongo-client .atk-register-form table.padded td {
    padding: 9px 10px;
    vertical-align: middle;
}

.atokongo-client .atk-register-form input[type="text"],
.atokongo-client .atk-register-form input[type="email"],
.atokongo-client .atk-register-form input[type="password"],
.atokongo-client .atk-register-form input[type="tel"],
.atokongo-client .atk-register-form select {
    min-height: 44px;
}

.atokongo-client .atk-register-form .action-button,
.atokongo-client .atk-register-form .atk-register-submit,
.atokongo-client .atk-register-form .atk-register-cancel {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--atk-radius-sm);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.atokongo-client .atk-register-form .action-button,
.atokongo-client .atk-register-form .atk-register-submit {
    border: 0;
    background: linear-gradient(135deg, var(--atk-primary), var(--atk-accent));
    box-shadow: 0 8px 18px rgba(114, 64, 158, 0.2);
    color: #fff !important;
}

.atokongo-client .atk-register-form .atk-register-cancel {
    border: 1px solid var(--atk-primary);
    background: #fff;
    box-shadow: none;
    color: var(--atk-primary-strong) !important;
}

/* New-ticket and dynamic forms -------------------------------------------- */

.atokongo-client #ticketForm {
    width: 100%;
    max-width: 920px;
    margin: 28px auto 0;
    padding: clamp(20px, 4vw, 40px);
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-lg);
    background: #fff;
    box-shadow: var(--atk-shadow-md);
}

.atokongo-client #ticketForm > table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.atokongo-client #ticketForm td {
    padding: 8px 10px;
    vertical-align: top;
}

.atokongo-client #ticketForm hr,
.atokongo-client #content > form hr {
    height: 1px;
    margin: 18px 0;
    border: 0;
    background: var(--atk-line);
}

.atokongo-client #ticketForm .form-header {
    margin: 0 0 12px;
    padding: 16px 18px;
    border-left: 4px solid var(--atk-accent);
    border-radius: 0 var(--atk-radius-sm) var(--atk-radius-sm) 0;
    background: var(--atk-surface-purple);
}

.atokongo-client #ticketForm .form-header h3,
.atokongo-client #ticketForm .form-header b {
    margin: 0 0 5px;
    color: var(--atk-primary-strong);
}

.atokongo-client #ticketForm label {
    color: var(--atk-muted-strong);
    font-weight: 700;
}

.atokongo-client #ticketForm input[type="text"],
.atokongo-client #ticketForm input[type="email"],
.atokongo-client #ticketForm input[type="password"],
.atokongo-client #ticketForm input[type="tel"],
.atokongo-client #ticketForm select,
.atokongo-client #ticketForm textarea,
.atokongo-client #ticketForm .redactor-box {
    width: 100%;
}

.atokongo-client #ticketForm #topicId {
    min-height: 50px;
    background-color: var(--atk-surface-soft);
    font-weight: 650;
}

.atokongo-client #ticketForm .error,
.atokongo-client #reply .error {
    color: var(--atk-danger);
    font-size: 0.9rem;
}

.atokongo-client #ticketForm .captchaRow .captcha {
    margin: 0 10px 8px 0;
    display: inline-block;
    overflow: hidden;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-sm);
    background: #fff;
}

.atokongo-client #ticketForm .captchaRow #captcha {
    width: 150px;
}

.atokongo-client #ticketForm .buttons {
    margin: 24px 0 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.atokongo-client #ticketForm input[type="reset"],
.atokongo-client #ticketForm input[type="button"],
.atokongo-client #reply input[type="reset"],
.atokongo-client #reply input[type="button"] {
    border-color: var(--atk-line-strong);
    background: #fff;
    box-shadow: none;
    color: var(--atk-primary-strong);
}

.atokongo-client #ticketForm input[type="reset"]:hover,
.atokongo-client #ticketForm input[type="button"]:hover,
.atokongo-client #reply input[type="reset"]:hover,
.atokongo-client #reply input[type="button"]:hover {
    border-color: var(--atk-primary);
    background: var(--atk-primary-soft);
    color: var(--atk-primary-strong);
}

.atokongo-client .filedrop {
    max-width: 100%;
    border-color: var(--atk-line-strong);
    border-radius: var(--atk-radius-sm);
    background: var(--atk-surface-soft);
}

/* Client ticket list ------------------------------------------------------ */

.atokongo-client .client-tickets-page {
    display: grid;
    gap: 22px;
}

.atokongo-client .client-tickets-card {
    overflow: hidden;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-lg);
    background: #fff;
    box-shadow: var(--atk-shadow-md);
}

.atokongo-client .client-tickets-toolbar {
    padding: clamp(20px, 3.5vw, 34px);
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) minmax(420px, 1.25fr);
    align-items: end;
    gap: 24px;
    border-bottom: 1px solid var(--atk-line);
    background:
        radial-gradient(circle at 100% 0, rgba(140, 67, 234, 0.12), transparent 22rem),
        var(--atk-surface-soft);
}

.atokongo-client .client-tickets-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.atokongo-client .client-tickets-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--atk-primary), var(--atk-accent));
    box-shadow: 0 10px 22px rgba(114, 64, 158, 0.23);
    color: #fff;
    font-size: 1.25rem;
}

.atokongo-client .client-tickets-title h1 {
    margin: 0 0 4px;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.atokongo-client .client-tickets-title h1 a {
    color: var(--atk-ink);
    text-decoration: none;
}

.atokongo-client .client-tickets-title h1 .refresh {
    margin-left: 6px;
    color: var(--atk-primary);
    font-size: 0.78em;
}

.atokongo-client .client-tickets-title p {
    margin: 0;
    color: var(--atk-muted);
}

.atokongo-client .client-tickets-filters {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(190px, 0.85fr) auto;
    align-items: end;
    gap: 10px;
}

.atokongo-client .client-ticket-search {
    min-width: 0;
    position: relative;
    display: flex;
}

.atokongo-client .client-ticket-search input {
    width: 100%;
    min-width: 0;
    padding-right: 46px;
}

.atokongo-client .client-ticket-search button {
    width: 38px;
    min-width: 38px;
    min-height: 36px;
    height: 36px;
    padding: 0;
    position: absolute;
    top: 3px;
    right: 3px;
    border-radius: 7px;
    box-shadow: none;
}

.atokongo-client .client-topic-filter {
    min-width: 0;
    display: grid;
    gap: 5px;
    color: var(--atk-muted-strong);
    font-size: 0.78rem;
    font-weight: 700;
}

.atokongo-client .client-topic-filter select {
    width: 100%;
}

.atokongo-client .client-ticket-new {
    min-height: 42px;
    white-space: nowrap;
}

.atokongo-client .client-ticket-clear {
    padding: 12px clamp(20px, 3.5vw, 34px);
    border-bottom: 1px solid var(--atk-line);
    background: var(--atk-warning-soft);
}

.atokongo-client .client-ticket-clear a {
    color: var(--atk-warning);
    text-decoration: none;
}

.atokongo-client .client-ticket-states {
    min-height: 56px;
    padding: 8px clamp(20px, 3.5vw, 34px) 0;
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--atk-line);
    background: #fff;
}

.atokongo-client .client-ticket-states .state {
    min-height: 47px;
    padding: 12px 15px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    color: var(--atk-muted-strong);
    font-weight: 700;
    text-decoration: none;
}

.atokongo-client .client-ticket-states .state:hover {
    color: var(--atk-primary-strong);
}

.atokongo-client .client-ticket-states .state.active {
    border-bottom-color: var(--atk-accent);
    color: var(--atk-primary-strong);
}

.atokongo-client .client-ticket-table-wrap {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.atokongo-client #ticketTable {
    width: 100%;
    min-width: 840px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    table-layout: auto;
}

.atokongo-client #ticketTable caption {
    padding: 14px clamp(20px, 3.5vw, 34px);
    caption-side: top;
    background: var(--atk-surface-soft);
    color: var(--atk-muted);
    font-weight: 650;
    text-align: left;
}

.atokongo-client #ticketTable th {
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid var(--atk-line);
    background: #fff;
    color: var(--atk-muted-strong);
    font-size: 0.78rem;
    letter-spacing: 0.035em;
    text-align: left;
    text-transform: uppercase;
}

.atokongo-client #ticketTable th a {
    color: inherit;
    text-decoration: none;
}

.atokongo-client #ticketTable td {
    padding: 15px 14px;
    border: 0;
    border-bottom: 1px solid var(--atk-line);
    background: #fff;
    color: var(--atk-muted-strong);
    vertical-align: middle;
}

.atokongo-client #ticketTable tbody tr {
    transition: background-color var(--atk-transition);
}

.atokongo-client #ticketTable tbody tr:hover td {
    background: var(--atk-surface-soft);
}

.atokongo-client #ticketTable tbody tr:last-child td {
    border-bottom: 0;
}

.atokongo-client .client-ticket-number {
    color: var(--atk-primary-strong);
    font-weight: 800;
    text-decoration: none;
}

.atokongo-client .client-ticket-status {
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: var(--atk-info-soft);
    color: var(--atk-info);
    font-size: 0.82rem;
    font-weight: 750;
    white-space: nowrap;
}

.atokongo-client .client-ticket-status.open {
    background: var(--atk-success-soft);
    color: var(--atk-success);
}

.atokongo-client .client-ticket-status.closed {
    background: #f0f1f3;
    color: #475467;
}

.atokongo-client .client-ticket-status i {
    font-size: 0.55em;
}

.atokongo-client .client-ticket-detail {
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--atk-line-strong);
    border-radius: 8px;
    color: var(--atk-primary-strong);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.atokongo-client .client-ticket-detail:hover {
    border-color: var(--atk-primary);
    background: var(--atk-primary-soft);
}

.atokongo-client .client-ticket-pagination {
    padding: 16px clamp(20px, 3.5vw, 34px);
    border-top: 1px solid var(--atk-line);
    background: var(--atk-surface-soft);
    color: var(--atk-muted);
    text-align: right;
}

.atokongo-client .client-ticket-pagination a,
.atokongo-client .client-ticket-pagination span {
    min-width: 32px;
    min-height: 32px;
    margin-left: 4px;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--atk-line);
    border-radius: 7px;
    background: #fff;
    text-decoration: none;
}

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

.atokongo-client .client-ticket-benefits section {
    min-width: 0;
    padding: 19px;
    display: flex;
    gap: 13px;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

.atokongo-client .client-ticket-benefits section > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--atk-primary-soft);
    color: var(--atk-primary);
    font-size: 1.15rem;
}

.atokongo-client .client-ticket-benefits h2 {
    margin: 0 0 5px;
    font-size: 1rem;
}

.atokongo-client .client-ticket-benefits p {
    margin: 0;
    color: var(--atk-muted);
    font-size: 0.88rem;
}

/* Ticket detail and conversation ----------------------------------------- */

.atokongo-client #ticketInfo {
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
    overflow: hidden;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

.atokongo-client #ticketInfo > tbody > tr:first-child > td {
    padding: 22px clamp(20px, 3vw, 32px);
    border-bottom: 1px solid var(--atk-line);
    background:
        radial-gradient(circle at 100% 0, rgba(140, 67, 234, 0.13), transparent 18rem),
        var(--atk-surface-soft);
}

.atokongo-client #ticketInfo > tbody > tr:first-child h1 {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-size: clamp(1.4rem, 2.7vw, 2.1rem);
}

.atokongo-client #ticketInfo > tbody > tr:first-child h1 small {
    color: var(--atk-primary);
    font-family: var(--atk-font-body);
    font-size: 0.62em;
}

.atokongo-client #ticketInfo > tbody > tr:first-child h1 > .pull-right {
    margin-left: auto;
    display: flex;
    gap: 7px;
    float: none;
}

.atokongo-client #ticketInfo .action-button {
    min-height: 36px;
    padding: 7px 11px;
    font-family: var(--atk-font-body);
    font-size: 0.78rem;
}

.atokongo-client #ticketInfo > tbody > tr:nth-child(2) > td {
    padding: 18px;
    border-bottom: 1px solid var(--atk-line);
    vertical-align: top;
}

.atokongo-client #ticketInfo > tbody > tr:nth-child(2) > td + td {
    border-left: 1px solid var(--atk-line);
}

.atokongo-client #ticketInfo .infoTable,
.atokongo-client #ticketInfo .custom-data {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

.atokongo-client #ticketInfo .headline {
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--atk-primary-soft);
    color: var(--atk-primary-strong);
    font-family: var(--atk-font-display);
}

.atokongo-client #ticketInfo .infoTable th,
.atokongo-client #ticketInfo .infoTable td,
.atokongo-client #ticketInfo .custom-data th,
.atokongo-client #ticketInfo .custom-data td {
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--atk-line);
    background: transparent;
    text-align: left;
}

.atokongo-client #ticketInfo .infoTable th,
.atokongo-client #ticketInfo .custom-data th {
    color: var(--atk-muted);
    font-weight: 650;
}

.atokongo-client .client-ticket-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(245px, 300px);
    align-items: start;
    gap: 22px;
}

.atokongo-client .client-ticket-conversation {
    min-width: 0;
}

.atokongo-client #ticketThread {
    min-width: 0;
}

.atokongo-client #ticketThread .thread-entry {
    margin: 0 0 16px;
    overflow: hidden;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

.atokongo-client #ticketThread .thread-entry .header {
    min-height: 46px;
    padding: 11px 15px;
    border: 0;
    border-bottom: 1px solid var(--atk-line);
    background: var(--atk-surface-soft);
    color: var(--atk-muted-strong);
}

.atokongo-client #ticketThread .thread-entry.message .header {
    border-left: 4px solid var(--atk-primary);
}

.atokongo-client #ticketThread .thread-entry.response .header {
    border-left: 4px solid var(--atk-success);
}

.atokongo-client #ticketThread .thread-entry .thread-body {
    min-width: 0;
    padding: 18px;
    overflow-wrap: anywhere;
    color: var(--atk-ink);
}

.atokongo-client #ticketThread .thread-entry .thread-body img {
    max-width: 100%;
    height: auto;
}

.atokongo-client #ticketThread .attachments {
    padding: 0 18px 16px;
}

.atokongo-client #ticketThread .attachment-info {
    margin: 5px 6px 0 0;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--atk-line);
    border-radius: 8px;
    background: var(--atk-surface-soft);
}

.atokongo-client #reply {
    margin-top: 22px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-lg);
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

.atokongo-client #reply h2 {
    margin: 0 0 12px;
}

.atokongo-client #reply textarea,
.atokongo-client #reply .redactor-box,
.atokongo-client #reply .redactor-editor {
    width: 100%;
    max-width: 100%;
}

.atokongo-client #reply > p:last-child {
    margin: 20px 0 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
}

.atokongo-client .client-ticket-sidebar {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.atokongo-client .client-ticket-card {
    padding: 19px;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

.atokongo-client .client-ticket-card h2 {
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--atk-primary-strong);
    font-size: 1rem;
}

.atokongo-client .client-ticket-card dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(70px, 0.7fr) minmax(0, 1.3fr);
    gap: 8px 12px;
}

.atokongo-client .client-ticket-card dt {
    color: var(--atk-muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.atokongo-client .client-ticket-card dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--atk-ink);
    font-size: 0.88rem;
}

.atokongo-client .client-ticket-help {
    border-color: rgba(114, 64, 158, 0.28);
    background:
        radial-gradient(circle at 100% 0, rgba(140, 67, 234, 0.14), transparent 10rem),
        var(--atk-surface-purple);
}

.atokongo-client .client-ticket-help p {
    color: var(--atk-muted-strong);
}

.atokongo-client .client-ticket-help .action-button {
    width: 100%;
    margin-top: 8px;
}

/* Knowledge base ---------------------------------------------------------- */

.atokongo-client #content > .row {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 24px;
}

.atokongo-client #content > .row > .span8,
.atokongo-client #content > .row > .span4 {
    width: auto;
    min-width: 0;
    margin: 0;
    float: none;
}

.atokongo-client #content > .row .sidebar {
    width: auto;
    margin: 0;
    float: none;
}

.atokongo-client #content > .row .searchbar {
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: var(--atk-surface-soft);
}

.atokongo-client #content > .row .searchbar input,
.atokongo-client #content > .row .searchbar select {
    width: 100%;
}

.atokongo-client #kb {
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
    list-style: none;
}

.atokongo-client #kb > li {
    min-height: 110px;
    margin: 0;
    padding: 20px;
    position: relative;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

.atokongo-client #kb > li > i {
    width: 38px;
    height: 38px;
    position: absolute;
    top: 20px;
    left: 20px;
    border-radius: 11px;
    background: var(--atk-primary-soft);
}

.atokongo-client #kb > li > div {
    margin-left: 52px;
}

.atokongo-client #kb h4 {
    margin: 0 0 7px;
    font-size: 1.05rem;
}

.atokongo-client #kb h4 a {
    text-decoration: none;
}

.atokongo-client #kb .popular-faq {
    margin: 7px 0;
}

.atokongo-client #kb .popular-faq i {
    margin-right: 5px;
    color: var(--atk-primary);
}

.atokongo-client #faq {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

.atokongo-client #faq ol {
    margin: 14px 0 0;
    padding-left: 24px;
}

.atokongo-client #faq li {
    margin: 9px 0;
    padding-left: 4px;
}

.atokongo-client .faq-content {
    margin-top: 18px;
    padding: clamp(20px, 4vw, 36px);
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-lg);
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

.atokongo-client .faq-content .article-title {
    margin: 0 0 7px;
    color: var(--atk-ink);
    font-family: var(--atk-font-display);
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.2;
}

.atokongo-client .faq-content .thread-body {
    color: var(--atk-ink);
    overflow-wrap: anywhere;
}

.atokongo-client .faq-content .thread-body img,
.atokongo-client #kb img,
.atokongo-client #landing_page .thread-body img {
    max-width: 100%;
    height: auto;
}

.atokongo-client #breadcrumbs {
    color: var(--atk-muted);
    font-size: 0.9rem;
}

.atokongo-client #breadcrumbs a {
    text-decoration: none;
}

/* Generic tables and select2 inside client forms -------------------------- */

.atokongo-client #content table.padded {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.atokongo-client #content table.padded td {
    padding: 8px 10px;
}

.atokongo-client .select2-container {
    max-width: 100%;
}

.atokongo-client .select2-container .select2-choice,
.atokongo-client .select2-container .select2-selection {
    min-height: 42px;
    border-color: var(--atk-line-strong);
    border-radius: var(--atk-radius-sm);
    background: #fff;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 980px) {
    .atokongo-client #landing_page {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 290px);
    }

    .atokongo-client .client-tickets-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .atokongo-client .client-ticket-benefits {
        grid-template-columns: 1fr;
    }

    .atokongo-client .client-ticket-grid {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .atokongo-client .client-ticket-help {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .atokongo-client #container {
        width: 100%;
        margin-top: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .atokongo-client #header {
        min-height: 0;
        padding: 15px 18px;
        align-items: flex-start;
        border-radius: 0;
    }

    .atokongo-client #header #logo {
        min-width: 132px;
        max-width: 190px;
        min-height: 48px;
        padding: 6px 10px;
    }

    .atokongo-client #header > .pull-right {
        max-width: 52%;
        font-size: 0.82rem;
    }

    .atokongo-client #header > .pull-right p:last-child {
        display: none;
    }

    .atokongo-client #nav {
        padding: 7px 12px;
    }

    .atokongo-client #content {
        min-height: 0;
        padding: 24px 18px 34px;
    }

    .atokongo-client #footer {
        width: 100%;
        margin-bottom: 0;
        border-radius: 0;
    }

    .atokongo-client #landing_page {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "main"
            "side"
            "featured";
    }

    .atokongo-client #landing_page .main-content .thread-body {
        min-height: 280px;
    }

    .atokongo-client #landing_page .front-page-button {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .atokongo-client #landing_page .front-page-button p {
        margin: 0;
    }

    .atokongo-client #landing_page .featured-category {
        width: 100%;
        margin-right: 0;
    }

    .atokongo-client #clientLogin .atk-login-layout {
        grid-template-columns: 1fr;
    }

    .atokongo-client .client-tickets-filters {
        grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
    }

    .atokongo-client .client-ticket-new {
        grid-column: 1 / -1;
    }

    .atokongo-client #ticketInfo > tbody > tr:nth-child(2) > td {
        width: 100%;
        display: block;
    }

    .atokongo-client #ticketInfo > tbody > tr:nth-child(2) > td + td {
        border-top: 1px solid var(--atk-line);
        border-left: 0;
    }

    .atokongo-client #content > .row {
        grid-template-columns: 1fr;
    }

    .atokongo-client #content > .row > .span4 {
        order: 2;
    }
}

@media (max-width: 560px) {
    .atokongo-client #header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .atokongo-client #header #logo {
        align-self: flex-start;
    }

    .atokongo-client #header > .pull-right {
        width: 100%;
        max-width: none;
        text-align: left;
    }

    .atokongo-client #header > .pull-right p {
        margin: 0;
    }

    .atokongo-client #nav li a {
        padding-inline: 12px;
        font-size: 0.88rem;
    }

    .atokongo-client #landing_page .search-form form {
        flex-direction: column;
    }

    .atokongo-client #landing_page .search-form .button {
        width: 100%;
    }

    .atokongo-client #landing_page .front-page-button {
        grid-template-columns: 1fr;
    }

    .atokongo-client #clientLogin,
    .atokongo-client #ticketForm {
        margin-inline: -4px;
        padding: 19px;
        border-radius: var(--atk-radius-md);
    }

    .atokongo-client #clientLogin .login-box p {
        align-items: stretch;
        flex-direction: column;
    }

    .atokongo-client #clientLogin .login-box .btn {
        width: 100%;
    }

    .atokongo-client #ticketForm table,
    .atokongo-client #ticketForm tbody,
    .atokongo-client #ticketForm tr,
    .atokongo-client #ticketForm td,
    .atokongo-client #content table.padded,
    .atokongo-client #content table.padded tbody,
    .atokongo-client #content table.padded tr,
    .atokongo-client #content table.padded td {
        width: 100%;
        display: block;
    }

    .atokongo-client #ticketForm td,
    .atokongo-client #content table.padded td {
        padding: 6px 0;
    }

    .atokongo-client #ticketForm .captchaRow #captcha {
        width: 100%;
    }

    .atokongo-client .client-tickets-filters {
        grid-template-columns: 1fr;
    }

    .atokongo-client .client-ticket-new {
        grid-column: auto;
        width: 100%;
    }

    .atokongo-client .client-ticket-states {
        overflow-x: auto;
    }

    .atokongo-client .client-ticket-sidebar {
        grid-template-columns: 1fr;
    }

    .atokongo-client .client-ticket-help {
        grid-column: auto;
    }

    .atokongo-client #ticketInfo > tbody > tr:first-child h1 {
        align-items: flex-start;
        flex-direction: column;
    }

    .atokongo-client #ticketInfo > tbody > tr:first-child h1 > .pull-right {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .atokongo-client #ticketInfo > tbody > tr:first-child h1 > .pull-right .action-button {
        flex: 1 1 auto;
    }

    .atokongo-client #reply > p:last-child {
        align-items: stretch;
        flex-direction: column;
    }

    .atokongo-client #reply > p:last-child input {
        width: 100%;
    }

    .atokongo-client #kb > li {
        padding: 17px;
    }

    .atokongo-client #kb > li > i {
        top: 17px;
        left: 17px;
    }

    .atokongo-client #kb > li > div {
        margin-left: 48px;
    }
}

@media (max-width: 380px) {
    .atokongo-client #content {
        padding-inline: 14px;
    }

    .atokongo-client #landing_page .main-content .thread-body {
        padding: 25px 21px;
    }

    .atokongo-client #clientLogin .atk-login-help,
    .atokongo-client #clientLogin .instructions {
        padding: 17px;
    }
}

@media (forced-colors: active) {
    .atokongo-client #header,
    .atokongo-client #footer,
    .atokongo-client #landing_page .main-content .thread-body {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .atokongo-client #header a,
    .atokongo-client #footer a,
    .atokongo-client #landing_page .main-content .thread-body h1,
    .atokongo-client #landing_page .main-content .thread-body h2,
    .atokongo-client #landing_page .main-content .thread-body h3,
    .atokongo-client #landing_page .main-content .thread-body p {
        color: CanvasText;
    }
}

/* Public portal v2 -------------------------------------------------------- */

.atokongo-client #container {
    width: min(calc(100% - 40px), var(--atk-content-max));
    min-height: auto;
    margin-top: 20px;
    overflow: visible;
    border-radius: 28px 28px 0 0;
}

.atokongo-client #header.atk-public-header {
    min-height: 88px;
    padding: 15px clamp(22px, 3vw, 42px);
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: clamp(26px, 4vw, 54px);
    border-radius: 28px 28px 0 0;
    background:
        radial-gradient(circle at 88% -80%, rgba(164, 97, 255, 0.58), transparent 22rem),
        linear-gradient(118deg, #0d0323 0%, #160636 54%, #2b0d5a 100%);
}

.atokongo-client #header.atk-public-header::after {
    height: 1px;
    content: "";
    position: absolute;
    right: 34px;
    bottom: 0;
    left: 34px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(198, 156, 255, 0.36),
        transparent
    );
}

.atokongo-client #header.atk-public-header #logo.atk-brand {
    width: clamp(176px, 16vw, 220px);
    min-width: 176px;
    max-width: 220px;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    order: initial;
    display: inline-flex;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.atokongo-client #header.atk-public-header #logo.atk-brand img {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    display: block;
    object-fit: contain;
}

.atokongo-client .atk-header-panel {
    min-width: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 2vw, 26px);
}

.atokongo-client .atk-primary-nav {
    min-width: 0;
}

.atokongo-client .atk-primary-nav #nav {
    width: auto;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: visible;
    border: 0;
    background: none;
    list-style: none;
}

.atokongo-client .atk-primary-nav #nav li {
    margin: 0;
    padding: 0;
    border: 0;
}

.atokongo-client .atk-primary-nav #nav li a {
    width: auto;
    min-height: 42px;
    height: auto;
    padding: 9px 12px;
    position: relative;
    float: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 10px;
    background: none !important;
    background-image: none !important;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.atokongo-client .atk-primary-nav #nav li a i {
    color: #cba4ff;
    font-size: 0.86rem;
}

.atokongo-client .atk-primary-nav #nav li a:hover {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff;
}

.atokongo-client .atk-primary-nav #nav li a.active {
    border-color: transparent;
    background: rgba(153, 83, 244, 0.2) !important;
    box-shadow: inset 0 0 0 1px rgba(202, 162, 255, 0.22);
    color: #fff;
}

.atokongo-client .atk-primary-nav #nav li a.active::after {
    height: 2px;
    content: "";
    position: absolute;
    right: 12px;
    bottom: 4px;
    left: 12px;
    border-radius: 2px;
    background: #a95aff;
}

.atokongo-client .atk-account-nav {
    min-width: max-content;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.88rem;
}

.atokongo-client .atk-account-nav a {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 700;
    text-decoration: none;
}

.atokongo-client .atk-account-nav a:hover {
    color: #fff;
}

.atokongo-client .atk-account-name {
    max-width: 180px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atokongo-client .atk-account-action {
    min-height: 42px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(207, 173, 255, 0.32);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(114, 64, 158, 0.9), rgba(140, 67, 234, 0.96));
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.16);
    color: #fff !important;
}

.atokongo-client .atk-account-action:hover {
    border-color: rgba(255, 255, 255, 0.48);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

.atokongo-client .atk-nav-toggle {
    width: 46px;
    min-width: 46px;
    height: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 10px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
}

.atokongo-client .atk-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.13);
    box-shadow: none;
    transform: none;
}

.atokongo-client .atk-nav-toggle > span:not(.sr-only) {
    width: 20px;
    height: 2px;
    display: block;
    border-radius: 2px;
    background: #fff;
    transition: transform var(--atk-transition), opacity var(--atk-transition);
}

.atokongo-client .atk-nav-toggle[aria-expanded="true"] > span:nth-of-type(2) {
    transform: translateY(7px) rotate(45deg);
}

.atokongo-client .atk-nav-toggle[aria-expanded="true"] > span:nth-of-type(3) {
    opacity: 0;
}

.atokongo-client .atk-nav-toggle[aria-expanded="true"] > span:nth-of-type(4) {
    transform: translateY(-7px) rotate(-45deg);
}

.atokongo-client #content {
    min-height: 0;
    padding: clamp(18px, 2.4vw, 32px);
    border: 0;
    background: #fff;
}

/* Home */

.atokongo-client #landing_page.atk-support-home {
    display: block;
}

.atokongo-client .atk-support-hero {
    min-height: 500px;
    padding: clamp(34px, 5vw, 68px);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(330px, 0.86fr);
    align-items: center;
    gap: clamp(30px, 6vw, 82px);
    border: 1px solid rgba(164, 97, 255, 0.22);
    border-radius: 24px;
    background:
        radial-gradient(circle at 82% 12%, rgba(144, 69, 234, 0.44), transparent 23rem),
        radial-gradient(circle at 25% 115%, rgba(95, 40, 178, 0.44), transparent 28rem),
        linear-gradient(122deg, #0a021e 0%, #160635 58%, #2a0c58 100%);
    box-shadow: 0 26px 64px rgba(18, 6, 41, 0.22);
}

.atokongo-client .atk-support-hero::before {
    width: 520px;
    height: 520px;
    content: "";
    position: absolute;
    top: -290px;
    right: -100px;
    border: 1px solid rgba(207, 171, 255, 0.14);
    border-radius: 50%;
    box-shadow:
        0 0 0 72px rgba(255, 255, 255, 0.018),
        0 0 0 145px rgba(255, 255, 255, 0.012);
    pointer-events: none;
}

.atokongo-client .atk-support-hero::after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.24;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: linear-gradient(90deg, transparent, #000 65%);
    pointer-events: none;
}

.atokongo-client .atk-support-hero-copy,
.atokongo-client .atk-support-hero-card {
    position: relative;
    z-index: 2;
}

.atokongo-client .atk-eyebrow {
    margin: 0 0 14px;
    color: #a85ef5;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.atokongo-client .atk-support-hero .atk-eyebrow {
    color: #e5c8ff !important;
}

.atokongo-client .atk-support-hero h1 {
    max-width: 12ch;
    margin: 0 0 20px;
    color: #fff !important;
    font-size: clamp(2.7rem, 5.5vw, 5.15rem);
    letter-spacing: -0.055em;
    line-height: 0.98;
    overflow-wrap: break-word;
}

.atokongo-client .atk-support-hero h1 > span {
    display: block;
}

.atokongo-client .atk-support-hero .atk-support-title-muted {
    color: #c9c3d0 !important;
}

.atokongo-client .atk-support-hero .atk-support-title-strong {
    color: #fff !important;
}

.atokongo-client .atk-support-lead {
    max-width: 60ch;
    margin: 0 0 28px;
    color: #f0ebf6 !important;
    font-size: clamp(1.02rem, 1.45vw, 1.22rem);
    line-height: 1.7;
}

.atokongo-client .atk-support-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.atokongo-client .atk-support-actions .button,
.atokongo-client .atk-support-contact .button {
    min-height: 52px;
    padding: 12px 20px;
    border-radius: 11px;
    font-weight: 800;
}

.atokongo-client .atk-primary-cta {
    background: linear-gradient(135deg, #7a39d5, #9d4cff);
    box-shadow: 0 12px 26px rgba(111, 46, 203, 0.34);
}

.atokongo-client .atk-secondary-cta {
    border-color: rgba(224, 201, 255, 0.46);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: none;
    color: #fff;
}

.atokongo-client .atk-secondary-cta:hover {
    border-color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.11);
    box-shadow: none;
}

.atokongo-client .atk-support-trust {
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    list-style: none;
}

.atokongo-client .atk-support-trust li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #e8e0f0 !important;
    font-size: 0.86rem;
    font-weight: 650;
}

.atokongo-client .atk-support-trust i {
    color: #bc7cff;
}

.atokongo-client .atk-support-hero-card {
    min-height: 360px;
    padding: clamp(27px, 3.2vw, 40px);
    overflow: hidden;
    border: 1px solid rgba(216, 185, 255, 0.25);
    border-radius: 22px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 22px 54px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(14px);
}

.atokongo-client .atk-support-emblem {
    width: 88px;
    height: 88px;
    margin: 0 0 28px;
    padding: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
}

.atokongo-client .atk-support-emblem img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.atokongo-client .atk-card-kicker {
    margin: 0 0 8px;
    color: #e7cfff !important;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.atokongo-client .atk-support-hero-card h2 {
    margin: 0 0 11px;
    color: #fff !important;
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
    overflow-wrap: break-word;
}

.atokongo-client .atk-support-hero-card > p:not(.atk-card-kicker) {
    margin: 0;
    color: #f0ebf6 !important;
    line-height: 1.65;
}

.atokongo-client .atk-support-card-list {
    margin-top: 24px;
    display: grid;
    gap: 9px;
}

.atokongo-client .atk-support-card-list span {
    min-height: 43px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    background: rgba(10, 2, 30, 0.26);
    color: #f8f5fb !important;
    font-size: 0.88rem;
    font-weight: 700;
}

.atokongo-client .atk-support-card-list i {
    color: #c489ff;
}

.atokongo-client .atk-support-path,
.atokongo-client .atk-support-knowledge {
    padding: clamp(54px, 7vw, 88px) clamp(4px, 2vw, 22px);
}

.atokongo-client .atk-section-heading {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.atokongo-client .atk-section-heading h2 {
    margin: 0 0 10px;
    font-size: clamp(2rem, 3.5vw, 3rem);
    overflow-wrap: break-word;
}

.atokongo-client .atk-section-heading > p:last-child {
    margin: 0;
    color: var(--atk-muted);
    font-size: 1rem;
}

.atokongo-client .atk-support-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.atokongo-client .atk-support-steps article {
    min-height: 255px;
    padding: clamp(24px, 3vw, 34px);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--atk-line);
    border-radius: 18px;
    background:
        radial-gradient(circle at 110% -10%, rgba(140, 67, 234, 0.12), transparent 12rem),
        #fff;
    box-shadow: var(--atk-shadow-sm);
    transition: transform var(--atk-transition), box-shadow var(--atk-transition);
}

.atokongo-client .atk-support-steps article:hover {
    box-shadow: var(--atk-shadow-md);
    transform: translateY(-3px);
}

.atokongo-client .atk-support-steps article > i {
    width: 52px;
    height: 52px;
    margin: 24px 0 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--atk-primary), var(--atk-accent));
    box-shadow: 0 10px 22px rgba(114, 64, 158, 0.24);
    color: #fff;
    font-size: 1.25rem;
}

.atokongo-client .atk-step-number {
    position: absolute;
    top: 24px;
    right: 26px;
    color: rgba(114, 64, 158, 0.36);
    font-family: var(--atk-font-display);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
}

.atokongo-client .atk-support-steps h3 {
    margin: 0 0 9px;
    color: var(--atk-ink);
    font-size: 1.2rem;
}

.atokongo-client .atk-support-steps p {
    margin: 0;
    color: var(--atk-muted);
    line-height: 1.65;
}

.atokongo-client .atk-support-knowledge {
    border-top: 1px solid var(--atk-line);
    background: var(--atk-surface-soft);
}

.atokongo-client .atk-support-knowledge .search-form {
    max-width: 780px;
    margin: 0 auto 34px;
    padding: 8px;
    display: flex;
    gap: 8px;
    border: 1px solid var(--atk-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

.atokongo-client .atk-support-knowledge .search-form .search {
    width: 100%;
    margin: 0;
    flex: 1 1 auto;
    border-color: transparent;
    background: var(--atk-surface-soft);
}

.atokongo-client .atk-featured-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.atokongo-client .atk-support-knowledge .featured-category {
    width: auto;
    min-height: 160px;
    margin: 0;
    padding: 24px;
    display: block;
    border: 1px solid var(--atk-line);
    border-radius: 16px;
    background: #fff;
}

.atokongo-client .atk-support-contact {
    min-height: 200px;
    padding: clamp(34px, 5vw, 58px);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 0, rgba(154, 79, 246, 0.4), transparent 20rem),
        linear-gradient(120deg, #12052c, #270b57);
    color: rgba(255, 255, 255, 0.72);
}

.atokongo-client .atk-support-contact h2 {
    margin: 0 0 9px;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.atokongo-client .atk-support-contact p:last-child {
    max-width: 680px;
    margin: 0;
}

.atokongo-client .atk-support-contact .button {
    min-width: 170px;
    flex: 0 0 auto;
}

/* Footer */

.atokongo-client #footer.atk-public-footer {
    width: min(calc(100% - 40px), var(--atk-content-max));
    min-height: 0;
    margin: 0 auto 24px;
    padding: clamp(34px, 4vw, 52px) clamp(24px, 4vw, 54px) 22px;
    border-radius: 0 0 28px 28px;
    background:
        radial-gradient(circle at 86% -25%, rgba(140, 67, 234, 0.34), transparent 24rem),
        linear-gradient(118deg, #0d0323, #170637 70%, #230a4c);
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
}

.atokongo-client .atk-footer-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(170px, 0.75fr) minmax(250px, 1fr);
    gap: clamp(30px, 6vw, 78px);
}

.atokongo-client .atk-footer-brand img {
    width: 210px;
    height: auto;
    margin: 0 0 15px;
    display: block;
}

.atokongo-client .atk-footer-brand p {
    max-width: 48ch;
    margin: 0;
    line-height: 1.65;
}

.atokongo-client .atk-footer-nav,
.atokongo-client .atk-footer-contact {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 9px;
}

.atokongo-client .atk-footer-nav strong,
.atokongo-client .atk-footer-contact strong {
    margin-bottom: 5px;
    color: #fff;
    font-family: var(--atk-font-display);
    font-size: 0.95rem;
}

.atokongo-client #footer.atk-public-footer a,
.atokongo-client .atk-footer-contact span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.atokongo-client #footer.atk-public-footer a:hover {
    color: #fff;
}

.atokongo-client .atk-footer-legal {
    margin-top: 32px;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.8rem;
}

.atokongo-client .atk-footer-legal p {
    margin: 0;
}

.atokongo-client #footer.atk-public-footer #poweredBy {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    display: inline-flex;
    float: none;
    background: none;
    font-size: inherit;
    text-indent: 0;
}

@media (max-width: 1080px) {
    .atokongo-client #header.atk-public-header {
        gap: 20px;
    }

    .atokongo-client .atk-primary-nav #nav li a {
        padding-inline: 9px;
    }

    .atokongo-client .atk-primary-nav #nav li a i {
        display: none;
    }

    .atokongo-client .atk-support-hero {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr);
        gap: 32px;
    }
}

@media (max-width: 900px) {
    .atokongo-client #header.atk-public-header {
        min-height: 80px;
        padding-block: 13px;
    }

    .atokongo-client .atk-nav-toggle {
        display: flex;
    }

    .atokongo-client .atk-header-panel {
        margin: 0;
        padding: 15px;
        position: absolute;
        top: calc(100% - 1px);
        right: 16px;
        left: 16px;
        z-index: 30;
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        border: 1px solid rgba(202, 162, 255, 0.24);
        border-radius: 0 0 16px 16px;
        background: rgba(18, 6, 41, 0.985);
        box-shadow: 0 22px 42px rgba(18, 6, 41, 0.32);
    }

    .atokongo-client.atk-nav-enabled .atk-header-panel {
        display: none;
    }

    .atokongo-client.atk-nav-enabled .atk-header-panel.is-open {
        display: flex;
    }

    .atokongo-client .atk-primary-nav #nav {
        align-items: stretch;
        flex-direction: column;
    }

    .atokongo-client .atk-primary-nav #nav li a {
        width: 100%;
        justify-content: flex-start;
    }

    .atokongo-client .atk-primary-nav #nav li a i {
        width: 18px;
        display: inline-block;
        text-align: center;
    }

    .atokongo-client .atk-account-nav {
        min-width: 0;
        padding-top: 12px;
        flex-wrap: wrap;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .atokongo-client .atk-support-hero {
        grid-template-columns: 1fr;
    }

    .atokongo-client .atk-support-hero h1 {
        max-width: 14ch;
    }

    .atokongo-client .atk-support-hero-card {
        min-height: 0;
    }
}

@media (max-width: 700px) {
    .atokongo-client #container {
        width: 100%;
        margin-top: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .atokongo-client #header.atk-public-header {
        border-radius: 0;
    }

    .atokongo-client #header.atk-public-header #logo.atk-brand {
        width: 176px;
        min-width: 0;
    }

    .atokongo-client #content {
        padding: 14px;
    }

    .atokongo-client .atk-support-hero {
        min-height: 0;
        padding: 36px 24px 24px;
        border-radius: 19px;
    }

    .atokongo-client .atk-support-hero h1 {
        font-size: clamp(2.55rem, 13vw, 4rem);
    }

    .atokongo-client .atk-support-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .atokongo-client .atk-support-actions .button {
        width: 100%;
    }

    .atokongo-client .atk-support-trust {
        align-items: flex-start;
        flex-direction: column;
    }

    .atokongo-client .atk-support-steps,
    .atokongo-client .atk-featured-categories {
        grid-template-columns: 1fr;
    }

    .atokongo-client .atk-support-contact {
        align-items: flex-start;
        flex-direction: column;
        border-radius: 18px;
    }

    .atokongo-client .atk-support-contact .button {
        width: 100%;
    }

    .atokongo-client .atk-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .atokongo-client #footer.atk-public-footer {
        width: 100%;
        margin-bottom: 0;
        border-radius: 0;
    }

    .atokongo-client .atk-footer-legal {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .atokongo-client #header.atk-public-header {
        padding-inline: 17px;
    }

    .atokongo-client #header.atk-public-header #logo.atk-brand {
        width: 158px;
    }

    .atokongo-client .atk-support-hero {
        padding-inline: 20px;
    }

    .atokongo-client .atk-support-hero-card {
        padding: 24px 20px;
    }

    .atokongo-client .atk-support-emblem {
        width: 72px;
        height: 72px;
        margin-bottom: 22px;
    }

    .atokongo-client .atk-support-knowledge .search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .atokongo-client .atk-support-knowledge .search-form .button {
        width: 100%;
    }
}

@media (forced-colors: active) {
    .atokongo-client #header.atk-public-header,
    .atokongo-client .atk-support-hero,
    .atokongo-client .atk-support-contact,
    .atokongo-client #footer.atk-public-footer {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .atokongo-client #header.atk-public-header a,
    .atokongo-client .atk-support-hero h1,
    .atokongo-client .atk-support-hero h2,
    .atokongo-client .atk-support-hero p,
    .atokongo-client .atk-support-contact h2,
    .atokongo-client .atk-support-contact p,
    .atokongo-client #footer.atk-public-footer a,
    .atokongo-client #footer.atk-public-footer p {
        color: CanvasText;
    }
}

/* ===== staff.css ===== */
/*
 * Atokongo staff console.
 *
 * The ID scope is intentional: osTicket and plugin behavior stays untouched
 * while the native agent/admin markup receives the new visual system.
 */
#staffBody {
    min-width: 0;
    margin: 0;
    background:
        radial-gradient(circle at 8% -5%, rgba(140, 67, 234, 0.13), transparent 30rem),
        linear-gradient(180deg, #f6f3fa 0, #f8f7fa 28rem, #f3f1f6 100%);
    color: var(--atk-ink);
}

#staffBody #container {
    width: min(var(--atk-content-max), calc(100% - 32px));
    min-height: calc(100vh - 32px);
    margin: 16px auto;
    overflow: visible;
    border: 1px solid rgba(114, 64, 158, 0.12);
    border-radius: var(--atk-radius-lg);
    background: var(--atk-surface);
    box-shadow: var(--atk-shadow-md);
}

#staffBody #header {
    min-height: 78px;
    height: auto;
    padding: 10px 22px;
    display: flex;
    align-items: center;
    gap: 22px;
    border: 0;
    border-radius: var(--atk-radius-lg) var(--atk-radius-lg) 0 0;
    background:
        radial-gradient(circle at 80% 0, rgba(164, 97, 255, 0.24), transparent 19rem),
        linear-gradient(115deg, var(--atk-deep), var(--atk-deep-2));
    box-shadow: none;
}

#staffBody #header #logo {
    order: -1;
    flex: 0 0 230px;
    max-width: 230px;
    height: 56px;
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    float: none;
}

#staffBody #header #logo img {
    width: 220px;
    max-width: 100%;
    height: auto;
    max-height: 54px;
    object-fit: contain;
    object-position: left center;
    filter: none;
}

#staffBody #header #info {
    width: auto;
    max-width: none;
    margin: 0 0 0 auto;
    padding: 9px 13px;
    float: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    text-align: right;
}

#staffBody #header #info strong,
#staffBody #header #info a {
    color: #fff;
}

#staffBody #header #info a:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.75);
}

#staffBody #pjax-container {
    min-width: 0;
    width: 100%;
}

#staffBody #nav {
    width: 100%;
    box-sizing: border-box;
    min-height: 54px;
    height: auto;
    margin: 0;
    padding: 7px 16px;
    display: flex;
    align-items: stretch;
    gap: 4px;
    border: 0;
    border-bottom: 1px solid var(--atk-line);
    background: var(--atk-surface);
    line-height: normal;
    white-space: nowrap;
}

#staffBody #nav > li.active,
#staffBody #nav > li.inactive {
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    display: block;
    float: none;
    position: relative;
    border: 0;
    border-radius: var(--atk-radius-sm);
    text-align: left;
}

#staffBody #nav > li > a {
    min-height: 40px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--atk-radius-sm);
    color: var(--atk-muted-strong);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

#staffBody #nav > li > a .staff-nav-icon {
    width: 18px;
    color: #6b2dad;
    font-size: 17px;
    text-align: center;
}

#staffBody #nav > li.active > a,
#staffBody #nav > li > a:hover {
    background: var(--atk-primary-soft);
    color: var(--atk-primary-strong);
}

#staffBody #nav > li.active > a {
    box-shadow: inset 0 -2px var(--atk-accent);
}

#staffBody #nav > li.active > a .staff-nav-icon,
#staffBody #nav > li > a:hover .staff-nav-icon {
    color: #4b1d7f;
}

#staffBody #nav > li > ul {
    min-width: 220px;
    padding: 7px;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: var(--atk-surface);
    box-shadow: var(--atk-shadow-md);
}

#staffBody #nav > li > ul li,
#staffBody #nav > li > ul a {
    width: auto;
    min-width: 0;
}

#staffBody #nav > li > ul a {
    min-height: 38px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 7px;
    color: var(--atk-muted-strong);
    text-decoration: none;
}

#staffBody #nav > li > ul a:hover {
    background: var(--atk-primary-soft);
    color: var(--atk-primary-strong);
}

#staffBody nav.staff-subnav {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 0 16px;
    border-bottom: 1px solid var(--atk-line);
    background: var(--atk-surface-soft);
}

#staffBody nav.staff-subnav #sub_nav {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 46px;
    margin: 0;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: visible;
    border: 0;
    background: transparent;
    line-height: normal;
    white-space: nowrap;
}

#staffBody nav.staff-subnav #sub_nav > li {
    height: auto;
    padding: 0;
    display: block;
    float: none;
}

#staffBody nav.staff-subnav #sub_nav > li > a {
    min-height: 34px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--atk-muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

#staffBody nav.staff-subnav #sub_nav > li > a:hover,
#staffBody nav.staff-subnav #sub_nav > li > a.active {
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
    color: var(--atk-primary-strong);
}

#staffBody nav.staff-subnav #sub_nav .staff-nav-icon {
    width: 16px;
    color: #70409e;
    font-size: 14px;
    text-align: center;
}

#staffBody nav.staff-subnav #sub_nav > li > a:hover .staff-nav-icon,
#staffBody nav.staff-subnav #sub_nav > li > a.active .staff-nav-icon {
    color: #4b1d7f;
}

#staffBody #customQ_nav {
    min-width: 0;
    overflow: visible;
}

#staffBody #customQ_nav .queue-count {
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--atk-primary-soft);
    color: var(--atk-primary-strong);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

#staffBody #customQ_nav .customQ-dropdown {
    overflow: hidden;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: var(--atk-surface);
    box-shadow: var(--atk-shadow-md);
}

#staffBody #customQ_nav .customQ-dropdown a {
    color: var(--atk-muted-strong);
}

#staffBody #customQ_nav .customQ-dropdown a:hover,
#staffBody #customQ_nav .customQ-dropdown a.active {
    background: var(--atk-primary-soft);
    color: var(--atk-primary-strong);
}

#staffBody #content {
    min-height: 480px;
    padding: clamp(18px, 2.5vw, 30px);
    overflow-x: auto;
    border: 0;
    background: var(--atk-surface);
}

#staffBody #content > h1,
#staffBody #content > h2,
#staffBody #content > h3,
#staffBody #content .headline {
    margin-top: 0;
}

#staffBody #content h1 {
    font-size: clamp(24px, 3vw, 34px);
}

#staffBody #content h2 {
    font-size: clamp(20px, 2.4vw, 28px);
}

#staffBody #content h3 {
    font-size: 17px;
}

#staffBody #breadcrumbs {
    margin-bottom: 18px;
    padding: 9px 12px;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-sm);
    background: var(--atk-surface-soft);
    color: var(--atk-muted);
}

#staffBody #breadcrumbs a {
    color: var(--atk-primary);
}

#staffBody #content table.table,
#staffBody #content table.form_table,
#staffBody #content table.ticket_info,
#staffBody #content table.dashboard-stats {
    width: 100%;
    max-width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: var(--atk-surface);
}

#staffBody #content table.table > thead > tr > th,
#staffBody #content table.form_table > thead > tr > th,
#staffBody #content table.ticket_info > thead > tr > th,
#staffBody #content table.dashboard-stats > thead > tr > th {
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid var(--atk-line);
    background: var(--atk-surface-purple);
    color: var(--atk-muted-strong);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-align: left;
    text-transform: uppercase;
}

#staffBody #content table.table > tbody > tr > td,
#staffBody #content table.form_table > tbody > tr > td,
#staffBody #content table.ticket_info > tbody > tr > td,
#staffBody #content table.dashboard-stats > tbody > tr > td {
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid #f0ecf4;
    background: var(--atk-surface);
    color: var(--atk-ink);
    font-size: 13px;
    vertical-align: middle;
}

#staffBody #content table.table > tbody > tr:last-child > td,
#staffBody #content table.form_table > tbody > tr:last-child > td,
#staffBody #content table.ticket_info > tbody > tr:last-child > td,
#staffBody #content table.dashboard-stats > tbody > tr:last-child > td {
    border-bottom: 0;
}

#staffBody #content table.table > tbody > tr:hover > td {
    background: #fcfaff;
}

#staffBody #content table.form_table > tbody > tr > th,
#staffBody #content table.ticket_info > tbody > tr > th {
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid #ece6f2;
    background: var(--atk-surface-soft);
    color: var(--atk-muted-strong);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    vertical-align: top;
}

#staffBody #content table.table a,
#staffBody #content table.ticket_info a {
    font-weight: 650;
}

#staffBody #content .ticket_info {
    margin-bottom: 20px;
    box-shadow: var(--atk-shadow-sm);
}

#staffBody #content .ticket_info th[colspan],
#staffBody #content .form_table th[colspan] {
    background: var(--atk-primary-soft);
    color: var(--atk-primary-strong);
    font-family: var(--atk-font-display);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

#staffBody #content input[type="text"],
#staffBody #content input[type="email"],
#staffBody #content input[type="password"],
#staffBody #content input[type="search"],
#staffBody #content input[type="url"],
#staffBody #content select,
#staffBody #content textarea {
    border-color: var(--atk-line-strong);
    background: #fff;
}

#staffBody #content input[type="search"],
#staffBody #content input.basic-search,
#staffBody #basic_search input {
    min-width: min(320px, 100%);
    padding-left: 13px;
}

#staffBody #content .attached.input,
#staffBody #content .input.attached {
    min-height: 40px;
}

#staffBody #content .button,
#staffBody #content .action-button,
#staffBody #content button,
#staffBody #content input[type="submit"],
#staffBody #content input[type="button"],
#staffBody #content input[type="reset"] {
    box-sizing: border-box;
    min-height: 38px;
    height: auto;
    margin: 2px;
    line-height: 1.2;
    font-size: 13px;
    font-weight: 700;
}

#staffBody #content .action-button:not(.muted):not(.danger):not(.link) > i,
#staffBody #content .action-button:not(.muted):not(.danger):not(.link) > a > i,
#staffBody #content .button:not(.muted):not(.danger):not(.link) > i {
    color: #fff !important;
    font-size: 15px;
}

#staffBody #content .action-button.muted i,
#staffBody #content .action-button.danger i,
#staffBody #content .action-button.link i,
#staffBody #content .button.muted i,
#staffBody #content .button.danger i,
#staffBody #content .button.link i {
    color: currentColor !important;
}

#staffBody #content .button.link,
#staffBody #content .link.button,
#staffBody #content .action-button.muted {
    border-color: var(--atk-line-strong);
    background: #fff;
    box-shadow: none;
    color: var(--atk-primary-strong);
}

#staffBody #content .button.link:hover,
#staffBody #content .link.button:hover,
#staffBody #content .action-button.muted:hover {
    border-color: var(--atk-primary);
    background: var(--atk-primary-soft);
    color: var(--atk-primary-strong);
}

#staffBody #content .button.danger,
#staffBody #content .action-button.danger {
    border-color: #f3b7b0;
    background: var(--atk-danger-soft);
    box-shadow: none;
    color: var(--atk-danger);
    opacity: 1;
}

#staffBody #content .button.green,
#staffBody #content .action-button.green {
    background: linear-gradient(135deg, #137a55, #1fa775);
    color: #fff;
}

#staffBody #content .tabs,
#staffBody #content ul.tabs {
    width: 100%;
    min-height: 48px;
    height: auto;
    margin: 0 0 18px;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    gap: 5px;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: var(--atk-surface-soft);
}

#staffBody #content .tabs li,
#staffBody #content ul.tabs li {
    min-width: max-content;
    min-height: 36px;
    height: auto;
    margin: 0;
    padding: 0;
    position: static;
    bottom: auto;
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    list-style: none;
}

#staffBody #content .tabs a,
#staffBody #content ul.tabs a {
    box-sizing: border-box;
    min-height: 36px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.25;
    white-space: nowrap;
    border: 0;
    border-radius: var(--atk-radius-sm);
    color: var(--atk-muted-strong);
    font-weight: 700;
    text-decoration: none;
}

#staffBody #content .tabs .active a,
#staffBody #content ul.tabs .active a,
#staffBody #content .tabs a.active {
    border: 1px solid rgba(114, 64, 158, 0.16);
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
    color: var(--atk-primary-strong);
}

#staffBody #basic_search,
#staffBody #content .search-form,
#staffBody #content .sticky.bar {
    padding: 10px 12px;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: rgba(255, 255, 255, 0.96);
}

#staffBody #basic_search {
    width: 100%;
    min-height: 62px;
    margin: 0 0 18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px 16px;
    flex-wrap: wrap;
    clear: both;
}

#staffBody #basic_search form {
    min-width: min(520px, 100%);
    flex: 1 1 520px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

#staffBody #basic_search > .pull-right {
    height: auto !important;
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    float: none;
    order: 2;
}

#staffBody #basic_search form .attached.input {
    min-width: 260px;
    flex: 1 1 320px;
    display: flex;
    align-items: stretch;
}

#staffBody #basic_search form .attached.input input {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
}

#staffBody #basic_search form .attached.input button {
    min-width: 44px;
    margin: 0;
    border-radius: 0 var(--atk-radius-sm) var(--atk-radius-sm) 0;
}

#staffBody #content .sticky.bar {
    width: 100%;
    min-height: 62px;
    margin-bottom: 16px;
    box-sizing: border-box;
    clear: both;
}

#staffBody #content .sticky.bar.fixed {
    width: min(var(--atk-content-max), calc(100% - 32px));
    padding: 10px clamp(18px, 2.5vw, 30px);
    border-radius: 0 0 var(--atk-radius-md) var(--atk-radius-md);
    box-shadow: var(--atk-shadow-md);
}

#staffBody #content .sticky.bar .content {
    width: 100%;
    max-width: var(--atk-content-max);
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    box-sizing: border-box;
}

#staffBody #content .sticky.bar .content > .pull-left,
#staffBody #content .sticky.bar .content > .pull-right {
    margin: 0;
    float: none;
}

#staffBody #content .sticky.bar .content > .pull-right {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#staffBody #content .sticky.bar h2 {
    margin: 0;
    line-height: 1.2;
}

#staffBody #content .sticky.bar + .clear,
#staffBody #content .clear + table.list,
#staffBody #content .sticky.bar ~ table.list {
    clear: both;
}

#staffBody #content table.list {
    width: 100% !important;
    table-layout: auto;
}

#staffBody #content .pagination,
#staffBody #content .page-links {
    margin: 18px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

#staffBody #content .pagination a,
#staffBody #content .pagination span,
#staffBody #content .page-links a,
#staffBody #content .page-links span {
    min-width: 34px;
    min-height: 34px;
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--atk-line);
    border-radius: 7px;
    background: #fff;
    color: var(--atk-muted-strong);
}

#staffBody #content .pagination .current,
#staffBody #content .page-links .current {
    border-color: var(--atk-primary);
    background: var(--atk-primary);
    color: #fff;
}

#staffBody #content .thread-entry,
#staffBody #content .thread-event,
#staffBody #content .thread-body {
    border-color: var(--atk-line);
}

#staffBody #content .thread-entry {
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: var(--atk-radius-md);
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
}

#staffBody #content .thread-entry .header,
#staffBody #content .thread-entry .thread-entry-header {
    border-color: var(--atk-line);
    background: var(--atk-surface-soft);
}

#staffBody #footer {
    min-height: 70px;
    padding: 20px;
    border: 0;
    border-top: 1px solid var(--atk-line);
    border-radius: 0 0 var(--atk-radius-lg) var(--atk-radius-lg);
    background: var(--atk-surface-soft);
    color: var(--atk-muted);
    text-align: center;
}

/*
 * Dialogs keep their coordinates and dimensions under jQuery UI control.
 * Only visual properties and their internal layout are changed here.
 */
#staffBody .ui-dialog,
#staffBody .dialog {
    border: 1px solid var(--atk-line-strong);
    border-radius: var(--atk-radius-md);
    background: #fff;
    box-shadow: var(--atk-shadow-lg);
    color: var(--atk-ink);
}

#staffBody .ui-dialog .ui-dialog-titlebar {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md) var(--atk-radius-md) 0 0;
    background: var(--atk-surface-purple);
    color: var(--atk-ink);
}

#staffBody .ui-dialog .ui-dialog-content,
#staffBody .dialog .body {
    padding: 16px;
    color: var(--atk-ink);
}

#staffBody .ui-dialog .ui-dialog-buttonpane {
    padding: 10px 14px;
    border: 0;
    border-top: 1px solid var(--atk-line);
    background: var(--atk-surface-soft);
}

#staffBody .ui-widget-overlay,
#staffBody #overlay {
    background: rgba(18, 6, 41, 0.58);
    opacity: 1;
}

#staffBody .dialog h1,
#staffBody .dialog h2,
#staffBody .dialog h3 {
    color: var(--atk-ink);
}

#staffBody .dialog table.form_table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-sm);
}

#staffBody .dialog table.form_table th,
#staffBody .dialog table.form_table td {
    padding: 9px 11px;
    border: 0;
    border-bottom: 1px solid var(--atk-line);
    color: var(--atk-ink);
    vertical-align: top;
}

#staffBody .dialog table.form_table th {
    background: var(--atk-surface-soft);
    color: var(--atk-muted-strong);
    text-align: left;
}

#staffBody .dialog table.form_table tr:last-child th,
#staffBody .dialog table.form_table tr:last-child td {
    border-bottom: 0;
}

/* OAuth / Office 365 plugin configuration popup. */
#staffBody #oauth-tabs {
    margin: 0 0 14px;
    padding: 5px;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-sm);
    background: var(--atk-surface-soft);
}

#staffBody #oauth-tabs li {
    margin: 0;
    list-style: none;
}

#staffBody #oauth-tabs li a {
    min-height: 36px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    border-radius: 7px;
    color: var(--atk-muted-strong);
    font-weight: 750;
    text-decoration: none;
}

#staffBody #oauth-tabs li.active a,
#staffBody #oauth-tabs li a:hover {
    background: #fff;
    box-shadow: var(--atk-shadow-sm);
    color: var(--atk-primary-strong);
}

#staffBody #oauth-tabs_container {
    min-width: 0;
    color: var(--atk-ink);
}

#staffBody #oauth-tabs_container .form_table {
    width: 100%;
    table-layout: auto;
}

#staffBody #oauth-tabs_container .form_table input[type="text"],
#staffBody #oauth-tabs_container .form_table input[type="password"],
#staffBody #oauth-tabs_container .form_table input[type="url"],
#staffBody #oauth-tabs_container .form_table select,
#staffBody #oauth-tabs_container .form_table textarea {
    width: min(100%, 560px);
}

#staffBody #oauth-tabs_container .form_table textarea {
    min-height: 110px;
}

#staffBody #oauth-tabs_container .form_table em,
#staffBody #oauth-tabs_container .form_table .hint,
#staffBody #oauth-tabs_container .form_table .faded {
    color: var(--atk-muted);
    font-size: 12px;
}

#staffBody #oauth-tabs_container .form_table input[readonly],
#staffBody #oauth-tabs_container .form_table input[disabled] {
    background: var(--atk-surface-soft);
    color: var(--atk-muted-strong);
}

#staffBody #oauth-tabs_container .error {
    color: var(--atk-danger);
}

@media (max-width: 980px) {
    #staffBody #container {
        width: calc(100% - 20px);
        margin: 10px auto;
        border-radius: var(--atk-radius-md);
    }

    #staffBody #header {
        padding: 10px 14px;
        border-radius: var(--atk-radius-md) var(--atk-radius-md) 0 0;
    }

    #staffBody #header #info {
        max-width: 58%;
        border-radius: var(--atk-radius-sm);
        line-height: 1.65;
    }

    #staffBody #nav,
    #staffBody nav.staff-subnav #sub_nav {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    #staffBody nav.staff-subnav {
        padding: 0 12px;
    }

    #staffBody #content {
        padding: 18px;
    }

    #staffBody #content .sticky.bar.fixed {
        width: calc(100% - 20px);
        padding-inline: 18px;
    }
}

@media (max-width: 680px) {
    #staffBody #container {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    #staffBody #header {
        min-height: 0;
        padding: 12px;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        border-radius: 0;
    }

    #staffBody #header #logo {
        flex-basis: auto;
        width: 200px;
        height: 48px;
    }

    #staffBody #header #logo img {
        width: 195px;
        max-width: 195px;
        max-height: 46px;
    }

    #staffBody #header #info {
        width: 100%;
        max-width: none;
        margin: 0;
        text-align: left;
    }

    #staffBody #nav {
        padding-inline: 10px;
    }

    #staffBody #nav > li > a {
        padding-inline: 10px;
    }

    #staffBody #content {
        min-height: 0;
        padding: 14px 12px 22px;
    }

    #staffBody #content table.table,
    #staffBody #content table.form_table,
    #staffBody #content table.ticket_info,
    #staffBody #content table.dashboard-stats {
        min-width: 620px;
    }

    #staffBody #content .sticky.bar {
        min-width: 0;
    }

    #staffBody #content .sticky.bar.fixed {
        width: 100%;
        padding-inline: 12px;
    }

    #staffBody #basic_search form {
        align-items: stretch;
        flex-direction: column;
    }

    #staffBody #basic_search input,
    #staffBody #basic_search select,
    #staffBody #basic_search .button,
    #staffBody #basic_search .action-button {
        width: 100%;
        margin-inline: 0;
    }

    #staffBody .dialog table.form_table {
        display: block;
        overflow-x: auto;
    }

    #staffBody #oauth-tabs_container {
        overflow-x: auto;
    }

    #staffBody #oauth-tabs_container .form_table {
        min-width: 540px;
    }

    #staffBody #footer {
        border-radius: 0;
    }
}

/* ===== login.css ===== */
/*
 * Atokongo staff login.
 *
 * The split-screen treatment is CSS-only. Authentication, 2FA, reCAPTCHA and
 * external provider markup continue to be rendered and handled by osTicket.
 */
#loginBody {
    min-width: 0;
    min-height: 100vh;
    height: auto;
    margin: 0;
    padding: clamp(24px, 5vw, 64px);
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(390px, 560px);
    align-items: center;
    gap: clamp(30px, 6vw, 90px);
    overflow-x: hidden;
    background:
        linear-gradient(rgba(164, 97, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(164, 97, 255, 0.045) 1px, transparent 1px),
        radial-gradient(circle at 15% 18%, rgba(140, 67, 234, 0.42), transparent 22rem),
        radial-gradient(circle at 80% 100%, rgba(75, 29, 127, 0.48), transparent 30rem),
        linear-gradient(135deg, #09021d, var(--atk-deep) 45%, #210b4b);
    background-size: 46px 46px, 46px 46px, auto, auto, auto;
    color: #fff;
    text-align: left;
}

#loginBody #brickwall {
    width: min(620px, 46vw);
    min-height: min(680px, calc(100vh - 96px));
    display: flex;
    align-items: stretch;
    position: relative;
    inset: auto;
    grid-column: 1;
    justify-self: end;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--atk-radius-xl);
    background:
        radial-gradient(circle at 70% 24%, rgba(164, 97, 255, 0.38), transparent 18rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

#loginBody #brickwall::before {
    content: "";
    width: min(270px, 60%);
    aspect-ratio: 1;
    position: absolute;
    top: 12%;
    left: 10%;
    border: 1px solid rgba(164, 97, 255, 0.35);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(164, 97, 255, 0.035),
        0 0 0 90px rgba(164, 97, 255, 0.02);
}

#loginBody #brickwall::after {
    content: "";
    position: absolute;
    inset: auto 8% 9% 11%;
    height: 42%;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--atk-radius-lg);
    background:
        linear-gradient(90deg, transparent 49.7%, rgba(164, 97, 255, 0.16) 50%, transparent 50.3%),
        linear-gradient(rgba(164, 97, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(164, 97, 255, 0.1) 1px, transparent 1px),
        linear-gradient(145deg, rgba(140, 67, 234, 0.25), rgba(255, 255, 255, 0.025));
    background-size: auto, 28px 28px, 28px 28px, auto;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24);
}

#loginBody #brickwall .atk-agent-visual {
    width: 100%;
    min-height: inherit;
    padding: clamp(34px, 5vw, 64px);
    display: flex;
    position: relative;
    z-index: 1;
    flex-direction: column;
    justify-content: flex-end;
}

#loginBody #brickwall .atk-agent-brand {
    width: min(260px, 72%);
    height: auto;
    margin: 0 0 44px;
    object-fit: contain;
}

#loginBody #brickwall .atk-agent-emblem {
    width: 88px;
    height: 88px;
    margin-bottom: 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
}

#loginBody #brickwall .atk-agent-emblem img {
    width: 58px;
    height: 58px;
}

#loginBody #brickwall .atk-agent-eyebrow {
    margin: 0 0 11px;
    color: #cfa9ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#loginBody #brickwall h1 {
    max-width: 520px;
    margin: 0 0 18px;
    color: #fff;
    font-family: var(--atk-font-display);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.02;
}

#loginBody #brickwall .atk-agent-copy {
    max-width: 500px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1.65;
}

#loginBody #brickwall .atk-agent-benefits {
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    gap: 10px 18px;
    flex-wrap: wrap;
    list-style: none;
}

#loginBody #brickwall .atk-agent-benefits li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 700;
}

#loginBody #brickwall .atk-agent-benefits i {
    margin-right: 5px;
    color: #cfa9ff;
}

#loginBody #loginBox {
    width: min(100%, 510px);
    max-height: none;
    margin: 0;
    padding: clamp(26px, 4vw, 42px);
    position: relative;
    top: auto;
    left: auto;
    grid-column: 2;
    justify-self: start;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--atk-radius-lg);
    background: rgba(255, 255, 255, 0.975);
    box-shadow: var(--atk-shadow-lg);
    color: var(--atk-ink);
    mix-blend-mode: normal;
    text-align: left;
}

#loginBody #loginBox::after {
    content: none;
}

#loginBody #loginBox #blur,
#loginBody #loginBox #background {
    display: none;
}

#loginBody #loginBox #logo {
    margin: 0 0 22px;
    text-align: left;
}

#loginBody #loginBox #logo a {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#loginBody #loginBox #logo a img {
    width: auto;
    max-width: min(280px, 80%);
    max-height: 62px;
    filter: none;
}

#loginBody #login-message {
    min-height: 0;
    margin: 0 0 14px;
    color: var(--atk-danger);
    font-family: var(--atk-font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
}

#loginBody #login-message:empty {
    display: none;
}

#loginBody #login-message.is-neutral {
    color: var(--atk-primary-strong);
}

#loginBody #loginBox .banner {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--atk-muted);
    font-size: 13px;
    line-height: 1.55;
}

#loginBody #loginBox .banner:empty {
    display: none;
}

#loginBody #loginBox form#login {
    width: 100%;
    margin: 0;
}

#loginBody #loginBox form#login fieldset {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border: 0;
}

#loginBody #loginBox form#login input[type="text"],
#loginBody #loginBox form#login input[type="email"],
#loginBody #loginBox form#login input[type="password"],
#loginBody #loginBox form#login select,
#loginBody #loginBox form#login textarea {
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--atk-line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--atk-ink);
    font-size: 15px;
}

#loginBody #loginBox form#login input[type="text"]:focus,
#loginBody #loginBox form#login input[type="email"]:focus,
#loginBody #loginBox form#login input[type="password"]:focus,
#loginBody #loginBox form#login select:focus,
#loginBody #loginBox form#login textarea:focus {
    border-color: var(--atk-accent);
    box-shadow: 0 0 0 4px rgba(140, 67, 234, 0.14);
}

#loginBody #loginBox form#login .field,
#loginBody #loginBox form#login .form-field,
#loginBody #loginBox form#login .form-group {
    width: 100%;
}

#loginBody #loginBox form#login label {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--atk-muted-strong);
    font-size: 12px;
    font-weight: 800;
}

#loginBody #loginBox form#login h3 {
    margin: 0;
    flex: 1 1 170px;
    font-family: var(--atk-font-body);
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}

#loginBody #loginBox form#login #reset-link {
    color: var(--atk-primary);
    font-weight: 750;
}

#loginBody #loginBox form#login button[type="submit"] {
    min-width: 145px;
    min-height: 46px;
    margin: 0 0 0 auto;
    padding: 11px 18px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--atk-primary), var(--atk-accent));
    box-shadow: 0 10px 24px rgba(114, 64, 158, 0.28);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

#loginBody #loginBox form#login button[type="submit"]:hover {
    box-shadow: 0 13px 30px rgba(114, 64, 158, 0.34);
}

#loginBody #loginBox .recaptcha-field,
#loginBody #loginBox .staff-recaptcha-field {
    width: 100%;
    margin: 2px 0 0;
    padding: 10px;
    overflow: hidden;
    border: 1px solid var(--atk-line);
    border-radius: 10px;
    background: var(--atk-surface-soft);
}

#loginBody #loginBox .g-recaptcha {
    min-height: 78px;
}

#loginBody #loginBox .or {
    width: 100%;
    margin: 22px 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--atk-muted);
}

#loginBody #loginBox .or::after {
    content: "o continúa con";
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#loginBody #loginBox .or hr {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--atk-line);
}

#loginBody #loginBox > br {
    display: none;
}

#loginBody #loginBox .external-auth {
    width: 100%;
    margin: 0 0 9px;
    display: block;
}

#loginBody #loginBox .external-auth + .external-auth {
    margin-top: 0;
}

#loginBody #loginBox .external-auth a.external-sign-in,
#loginBody #loginBox .external-auth > a {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfc2df;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(114, 64, 158, 0.08), rgba(140, 67, 234, 0.035)),
        #fff;
    box-shadow: 0 7px 18px rgba(75, 29, 127, 0.08);
    color: var(--atk-primary-strong);
    font-weight: 800;
    text-decoration: none;
}

#loginBody #loginBox .external-auth a.external-sign-in:hover,
#loginBody #loginBox .external-auth > a:hover {
    border-color: var(--atk-primary);
    background: var(--atk-primary-soft);
    box-shadow: 0 10px 24px rgba(75, 29, 127, 0.14);
}

#loginBody #loginBox .external-auth-box {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
}

#loginBody #loginBox .external-auth-icon {
    width: 44px;
    min-height: 34px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-right: 1px solid rgba(114, 64, 158, 0.2);
    color: var(--atk-primary);
}

#loginBody #loginBox .external-auth-name {
    width: auto;
    padding: 7px 13px;
    color: var(--atk-primary-strong);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

#loginBody #loginBox .external-auth img.sign-in-image {
    width: auto;
    max-width: min(250px, 86%);
    max-height: 42px;
    border: 0;
}

#loginBody #loginBox #loading {
    width: calc(100% - 40px);
    min-height: 96px;
    padding: 20px;
    border: 1px solid var(--atk-line);
    border-radius: var(--atk-radius-md);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--atk-shadow-md);
    color: var(--atk-primary-strong);
    text-align: center;
}

#loginBody #loginBox #loading h1 {
    margin: 0;
    color: var(--atk-primary-strong);
    font-size: 17px;
}

#loginBody #loginBox #company {
    width: 100%;
    margin: 22px 0 0;
    position: static;
    color: var(--atk-muted);
    font-size: 11px;
    text-align: center;
}

#loginBody #loginBox #company .content {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--atk-muted);
    text-shadow: none;
}

#loginBody #poweredBy {
    margin: 0;
    padding: 7px 10px;
    position: fixed;
    right: 12px;
    bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(18, 6, 41, 0.46);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.66);
    font-size: 10px;
    text-shadow: none;
}

#loginBody #poweredBy .osticket-logo {
    width: 50px;
    filter: grayscale(1) brightness(2);
}

@media (max-width: 960px) {
    #loginBody {
        padding: 28px;
        grid-template-columns: minmax(0, 1fr);
        place-items: center;
    }

    #loginBody #brickwall {
        width: min(680px, 100%);
        min-height: 180px;
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
    }

    #loginBody #brickwall .atk-agent-visual {
        min-height: 180px;
        padding: 24px 28px;
        justify-content: center;
    }

    #loginBody #brickwall .atk-agent-brand,
    #loginBody #brickwall .atk-agent-emblem,
    #loginBody #brickwall .atk-agent-copy,
    #loginBody #brickwall .atk-agent-benefits {
        display: none;
    }

    #loginBody #brickwall h1 {
        max-width: 580px;
        margin-bottom: 0;
        font-size: clamp(28px, 5vw, 42px);
    }

    #loginBody #brickwall::before {
        width: 130px;
        top: 22px;
        left: 8%;
    }

    #loginBody #brickwall::after {
        inset: 24px 7% 24px auto;
        width: 48%;
        height: auto;
    }

    #loginBody #loginBox {
        width: min(560px, 100%);
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
    }
}

@media (max-width: 560px) {
    #loginBody {
        padding: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #loginBody #brickwall {
        display: none;
    }

    #loginBody #loginBox {
        width: 100%;
        padding: 24px 18px;
        border-radius: var(--atk-radius-md);
    }

    #loginBody #loginBox #logo {
        margin-bottom: 16px;
    }

    #loginBody #loginBox #logo a {
        height: 54px;
    }

    #loginBody #loginBox form#login fieldset {
        align-items: stretch;
        flex-direction: column;
    }

    #loginBody #loginBox form#login h3 {
        flex-basis: auto;
    }

    #loginBody #loginBox form#login button[type="submit"] {
        width: 100%;
        margin: 0;
    }

    #loginBody #loginBox .recaptcha-field,
    #loginBody #loginBox .staff-recaptcha-field {
        padding: 7px;
    }

    #loginBody #poweredBy {
        display: none;
    }
}

@media (max-width: 370px) {
    #loginBody #loginBox {
        padding-inline: 14px;
    }

    #loginBody #loginBox .g-recaptcha {
        transform: scale(0.82);
    }
}

@media (prefers-reduced-motion: reduce) {
    #loginBody #loginBox * {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}