@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Tajawal/Tajawal-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/Tajawal/Tajawal-Bold.ttf') format('truetype');
}

:root {
    --portal-ink: #14213d;
    --portal-muted: #63718a;
    --portal-blue: #315ee8;
    --portal-blue-dark: #244bc4;
    --portal-on-blue: #fff;
    --portal-line: #e6eaf2;
    --portal-border: #e6eaf2;
    --portal-control-border: #d9e0eb;
    --portal-surface: #fff;
    --portal-surface-muted: #f8f9fc;
    --portal-page: #f5f7fb;
    --portal-font: 'Inter', 'Segoe UI', sans-serif;
    --portal-font-size-body: 1.0625rem;
    --portal-line-height-body: 1.6;
    --portal-space-1: .25rem;
    --portal-space-2: .5rem;
    --portal-space-3: .75rem;
    --portal-space-4: 1rem;
    --portal-space-5: 1.5rem;
    --portal-space-6: 2rem;
    --portal-radius-control: 9px;
    --portal-radius-button: 11px;
    --portal-radius-card: 16px;
    --portal-radius-pill: 999px;
    --portal-focus: #1649c7;
    --portal-focus-ring: 0 0 0 3px rgb(66 104 232 / 12%);
    --portal-shadow-card: 0 8px 26px rgb(30 49 86 / 4%);
    --portal-shadow-primary: 0 9px 20px rgb(49 94 232 / 17%);
    --portal-success-border: #b7e5d4;
    --portal-success-surface: #effaf5;
    --portal-success-ink: #216b4a;
    --portal-danger-border: #f0c6cd;
    --portal-danger-surface: #fff4f5;
    --portal-danger-ink: #9c2c3d;
}

body.support-portal,
body.portal-dashboard,
body.support-auth-page {
    font-size: var(--portal-font-size-body);
    line-height: var(--portal-line-height-body);
}

.support-portal {
    min-width: 320px;
    background: var(--portal-page);
    color: var(--portal-ink);
    font-family: var(--portal-font);
    -webkit-font-smoothing: antialiased;
}

html[lang='ar'] .support-portal,
html[lang='ar'] .portal-dashboard,
html[lang='ar'] .support-auth-page {
    --portal-font: 'Tajawal', 'Cairo', 'Segoe UI', sans-serif;
}

html[lang='ar'] .portal-hero h1 {
    letter-spacing: 0;
    line-height: 1.35;
}

html[lang='ar'] .portal-section-heading h2,
html[lang='ar'] .portal-cta-panel h2 {
    letter-spacing: 0;
    line-height: 1.45;
}

.portal-container {
    width: min(1160px, calc(100% - 48px));
    margin-inline: auto;
}

body.support-portal .portal-container {
    width: min(1200px, calc(100% - 48px));
}

.portal-skip-link {
    position: fixed;
    z-index: 20;
    top: 10px;
    inset-inline-start: 10px;
    transform: translateY(-160%);
    padding: 10px 15px;
    border-radius: 8px;
    background: var(--portal-ink);
    color: #fff;
    font-weight: 650;
    text-decoration: none;
}

.portal-skip-link:focus {
    transform: translateY(0);
    color: #fff;
}

:where(a,
button,
input,
select,
textarea,
[tabindex]):focus-visible {
    outline: 3px solid var(--portal-focus);
    outline-offset: 3px;
}

.portal-header {
    position: relative;
    z-index: 2;
    background: rgb(255 255 255 / 90%);
    border-bottom: 1px solid rgb(230 234 242 / 80%);
    backdrop-filter: blur(14px);
}

.portal-header-inner,
.portal-nav,
.portal-brand,
.portal-hero-actions,
.portal-promise,
.portal-service-row,
.portal-art-footer,
.portal-footer-inner {
    display: flex;
    align-items: center;
}

.portal-header-inner {
    min-height: 82px;
    justify-content: space-between;
    gap: 24px;
}

.portal-brand {
    gap: 12px;
    color: var(--portal-ink);
    text-decoration: none;
}

.portal-brand:hover,
.portal-footer-brand:hover {
    color: var(--portal-ink);
    text-decoration: none;
}

.portal-brand-mark {
    display: block;
    width: auto;
    height: 54px;
    max-width: 220px;
    object-fit: contain;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.portal-brand-copy {
    display: grid;
    line-height: 1.15;
}

.portal-brand-copy strong {
    font-size: 17px;
    letter-spacing: -.02em;
}

.portal-brand-copy small {
    margin-top: 4px;
    color: var(--portal-muted);
    font-size: 12px;
}

.portal-nav {
    gap: 20px;
}

.portal-mobile-nav-toggle {
    display: none;
}

.portal-nav form {
    margin: 0;
}

.portal-nav-link {
    border: 0;
    background: transparent;
    color: #53617a;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.portal-nav-link:hover {
    color: var(--portal-blue);
    text-decoration: none;
}

.chat-sound-toggle {
    display: inline-flex;
    min-height: 37px;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-control);
    background: var(--portal-surface);
    color: var(--portal-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.chat-sound-toggle[aria-pressed='true'] {
    border-color: color-mix(in srgb, var(--portal-blue) 52%, var(--portal-line));
    background: color-mix(in srgb, var(--portal-blue) 12%, var(--portal-surface));
    color: var(--portal-blue);
}

html[data-theme='dark'] .chat-sound-toggle[aria-pressed='false'] {
    background: var(--portal-surface);
    color: var(--portal-muted);
}

.chat-sound-toggle:hover {
    border-color: color-mix(in srgb, var(--portal-blue) 55%, var(--portal-line));
    color: var(--portal-blue);
}

.chat-sound-toggle[aria-pressed='true']:hover {
    background: color-mix(in srgb, var(--portal-blue) 9%, var(--portal-surface));
}

html[data-theme='dark'] .chat-sound-toggle[aria-pressed='true']:hover {
    background: color-mix(in srgb, var(--portal-blue) 18%, var(--portal-surface));
}

html[data-theme='dark'] .chat-sound-toggle[aria-pressed='false']:hover {
    border-color: color-mix(in srgb, var(--portal-blue) 45%, var(--portal-line));
    background: var(--portal-surface);
}

.chat-sound-toggle:focus-visible {
    outline: 3px solid rgb(49 94 232 / 18%);
    outline-offset: 2px;
}

.chat-sender-role {
    color: var(--portal-muted);
    font-size: .9em;
    font-weight: 500;
}

.portal-user-menu {
    position: relative;
}

.portal-user-menu-trigger {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
    border: 0;
    border-radius: 24px;
    background: transparent;
    color: var(--portal-ink);
    cursor: pointer;
    list-style: none;
}

.portal-user-menu-trigger::-webkit-details-marker {
    display: none;
}

.portal-user-menu-trigger:hover,
.portal-user-menu[open] .portal-user-menu-trigger {
    background: rgb(66 104 232 / 7%);
}

.portal-user-avatar {
    display: grid;
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #dce5ff;
    border-radius: 50%;
    background: linear-gradient(145deg, #eef2ff, #dce6ff);
    color: #3558c7;
    font-size: 15px;
    font-weight: 700;
}

.portal-user-menu-name {
    max-width: 130px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-user-menu-chevron {
    color: var(--portal-muted);
    font-size: 11px;
    transition: transform .15s ease;
}

.portal-user-menu[open] .portal-user-menu-chevron {
    transform: rotate(180deg);
}

.portal-user-menu-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    width: min(290px, calc(100vw - 32px));
    padding: 8px;
    border: 1px solid #e4e9f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 40px rgb(23 39 71 / 16%);
}

.portal-user-menu-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 9px 13px;
    border-bottom: 1px solid #edf0f5;
}

.portal-user-avatar-large {
    width: 41px;
    height: 41px;
}

.portal-user-menu-identity>span:last-child {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.portal-user-menu-identity strong,
.portal-user-menu-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-user-menu-identity strong {
    color: var(--portal-ink);
    font-size: 13px;
}

.portal-user-menu-identity small {
    color: var(--portal-muted);
    font-size: 12px;
}

.portal-user-menu-panel form {
    margin: 0;
}

.portal-user-menu-item {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #46546d;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.portal-user-menu-item:hover {
    background: #f3f6fc;
    color: #244bc4;
    text-decoration: none;
}

.portal-user-menu-item i {
    width: 17px;
    color: #718097;
    font-size: 15px;
    text-align: center;
}

.portal-user-menu-signout {
    border-top: 1px solid #edf0f5;
    border-radius: 0 0 8px 8px;
    color: #a23848;
}

.portal-user-menu-signout i {
    color: #a23848;
}

.portal-button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: var(--portal-space-3);
    padding: 0 var(--portal-space-5);
    border: 1px solid var(--portal-blue);
    border-radius: var(--portal-radius-button);
    background: var(--portal-blue);
    box-shadow: var(--portal-shadow-primary);
    color: var(--portal-on-blue);
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.portal-button:hover {
    transform: translateY(-1px);
    background: var(--portal-blue-dark);
    box-shadow: 0 12px 24px rgb(49 94 232 / 22%);
    color: var(--portal-on-blue);
    text-decoration: none;
}

.portal-button-small {
    min-height: 42px;
    padding-inline: 16px;
    border-radius: var(--portal-radius-control);
    font-size: 14px;
}

.portal-button-secondary {
    border-color: var(--portal-border);
    background: var(--portal-surface);
    box-shadow: none;
    color: var(--portal-ink);
}

.portal-button-secondary:hover {
    border-color: #c5d0e3;
    background: #f9faff;
    box-shadow: 0 6px 15px rgb(20 33 61 / 7%);
    color: var(--portal-ink);
}

.portal-hero {
    overflow: hidden;
    position: relative;
    padding: clamp(72px, 7vw, 96px) 0 clamp(72px, 7vw, 92px);
    background: radial-gradient(ellipse at 87% 14%, rgb(219 229 255 / 72%), transparent 32%), linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
}

.portal-hero::before {
    position: absolute;
    top: -220px;
    inset-inline-end: -170px;
    width: 570px;
    height: 570px;
    border: 1px solid rgb(81 123 255 / 9%);
    border-radius: 50%;
    content: '';
}

.portal-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
    align-items: center;
    gap: clamp(36px, 5vw, 72px);
}

.portal-hero-copy {
    max-width: 570px;
    padding-block: 10px;
}

.portal-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 19px;
    color: var(--portal-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portal-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #47bf99;
    box-shadow: 0 0 0 4px rgb(71 191 153 / 12%);
}

.portal-hero h1 {
    max-width: 650px;
    margin: 0;
    color: var(--portal-ink);
    font-size: clamp(46px, 5.2vw, 68px);
    font-weight: 650;
    letter-spacing: -.055em;
    line-height: 1.04;
}

.portal-hero-description {
    max-width: 510px;
    margin: 23px 0 0;
    color: var(--portal-muted);
    font-size: 18px;
    line-height: 1.65;
}

.portal-hero-actions {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.portal-welcome {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 25px;
    padding: 15px 16px;
    border: 1px solid #dfe8ff;
    border-radius: 12px;
    background: #f4f7ff;
    color: #4a5872;
    line-height: 1.5;
}

.portal-welcome-icon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    background: #e2eaff;
    color: var(--portal-blue);
}

.portal-welcome a {
    color: var(--portal-blue);
    font-weight: 650;
}

.portal-promise {
    gap: 9px;
    margin-top: 25px;
    color: #77839a;
    font-size: 14px;
}

.portal-promise i {
    color: #7181a1;
    font-size: 16px;
}

.portal-hero-art {
    position: relative;
    display: grid;
    min-height: 460px;
    place-items: center;
}

.portal-art-orbit {
    position: absolute;
    border: 1px solid rgb(86 122 222 / 13%);
    border-radius: 50%;
}

.portal-art-orbit-one {
    width: 440px;
    height: 440px;
}

.portal-art-orbit-two {
    width: 360px;
    height: 360px;
    border-style: dashed;
    border-color: rgb(86 122 222 / 17%);
}

.portal-art-card {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    padding: 26px;
    border: 1px solid rgb(255 255 255 / 75%);
    border-radius: 20px;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 26px 70px rgb(27 49 102 / 14%), 0 4px 12px rgb(27 49 102 / 5%);
}

.portal-art-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.portal-art-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    background: #edf2ff;
    color: var(--portal-blue);
    font-size: 20px;
}

.portal-art-card-header>span:nth-child(2) {
    display: grid;
    gap: 3px;
}

.portal-art-card-header small {
    color: #596780;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}

.portal-art-card-header strong {
    color: var(--portal-ink);
    font-size: 16px;
    font-weight: 650;
}

.portal-art-menu {
    margin-inline-start: auto;
    color: #97a1b3;
    font-size: 20px;
}

.portal-art-divider {
    height: 1px;
    margin: 20px 0 16px;
    background: var(--portal-line);
}

.portal-art-caption {
    margin: 0 0 14px;
    color: var(--portal-muted);
    font-size: 14px;
}

.portal-service-row {
    min-height: 59px;
    gap: 11px;
    border-bottom: 1px solid #f0f2f6;
    color: #33415c;
    font-size: 14px;
    font-weight: 600;
}

.portal-service-icon,
.portal-capability-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
}

.portal-service-icon {
    width: 33px;
    height: 33px;
    font-size: 15px;
}

.portal-icon-blue {
    background: #edf2ff;
    color: #4268e8;
}

.portal-icon-violet {
    background: #f2edff;
    color: #7956cf;
}

.portal-icon-mint {
    background: #e8f8f2;
    color: #27a77e;
}

.portal-service-arrow {
    margin-inline-start: auto;
    color: #a0a9b8;
    font-size: 12px;
}

.portal-art-footer {
    gap: 10px;
    margin-top: 18px;
    color: #596780;
    font-size: 12px;
}

.portal-footer-avatars {
    display: flex;
    direction: ltr;
    padding-inline-start: 4px;
}

.portal-footer-avatars i {
    display: grid;
    width: 23px;
    height: 23px;
    margin-inline-start: -4px;
    place-items: center;
    border: 2px solid white;
    border-radius: 50%;
    background: #e8edfb;
    color: #536fba;
    font-size: 10px;
}

.portal-float-note {
    position: absolute;
    z-index: 2;
    inset-inline-end: -7px;
    bottom: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    border: 1px solid #e6ebf4;
    border-radius: 12px;
    background: white;
    box-shadow: 0 10px 24px rgb(27 49 102 / 10%);
    color: #3f4d65;
    font-size: 12px;
    font-weight: 650;
}

.portal-float-note i {
    color: #27a77e;
    font-size: 16px;
}

.portal-capabilities {
    padding: 76px 0 84px;
    background: #fff;
}

.portal-section-heading {
    max-width: 610px;
    margin: 0 auto 34px;
    text-align: center;
}

.portal-section-heading .portal-eyebrow {
    justify-content: center;
    margin-bottom: 10px;
    font-size: 11px;
}

.portal-section-heading h2 {
    margin: 0;
    color: var(--portal-ink);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 650;
    letter-spacing: -.04em;
}

.portal-section-heading>p:last-child {
    margin: 12px 0 0;
    color: var(--portal-muted);
    font-size: 16px;
    line-height: 1.55;
}

.portal-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.portal-capability-card {
    position: relative;
    min-height: 230px;
    padding: 28px;
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    background: linear-gradient(150deg, #fff, #fcfdff);
    box-shadow: var(--portal-shadow-card);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.portal-capability-card:hover {
    transform: translateY(-3px);
    border-color: #d4def2;
    box-shadow: 0 16px 36px rgb(30 50 90 / 9%);
}

.portal-capability-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 21px;
    font-size: 20px;
}

.portal-capability-card h3 {
    margin: 0 0 8px;
    color: var(--portal-ink);
    font-size: 17px;
    font-weight: 650;
}

.portal-capability-card p {
    max-width: 290px;
    margin: 0;
    color: var(--portal-muted);
    font-size: 14px;
    line-height: 1.55;
}

.portal-card-index {
    position: absolute;
    top: 26px;
    inset-inline-end: 25px;
    color: #bac3d2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.portal-bottom-cta {
    padding: 0 0 74px;
    background: #fff;
}

.portal-cta-panel {
    display: flex;
    min-height: 200px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 38px 48px;
    border-radius: 19px;
    background: radial-gradient(ellipse at 85% 0%, rgb(108 143 255 / 24%), transparent 36%), linear-gradient(115deg, #172b52, #203e79);
    box-shadow: 0 20px 45px rgb(21 42 82 / 17%);
    color: white;
}

.portal-cta-panel .portal-eyebrow {
    margin-bottom: 8px;
    color: #a9bdff;
    font-size: 10px;
}

.portal-cta-panel h2 {
    margin: 0;
    color: white;
    font-size: clamp(23px, 3vw, 31px);
    font-weight: 650;
    letter-spacing: -.035em;
}

.portal-cta-panel p:last-child {
    margin: 6px 0 0;
    color: #c0cbe0;
    font-size: 14px;
}

.portal-button-light {
    flex: 0 0 auto;
    border-color: white;
    background: white;
    box-shadow: none;
    color: #203d78;
}

.portal-button-light:hover {
    border-color: #e8edff;
    background: #e8edff;
    box-shadow: none;
    color: #203d78;
}

.portal-footer {
    padding: 23px 0;
    border-top: 1px solid var(--portal-line);
    background: #fff;
}

.portal-footer-inner {
    justify-content: space-between;
    gap: 18px;
    color: #5d6a80;
    font-size: 12px;
}

.portal-footer-brand {
    color: var(--portal-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.portal-footer-brand span {
    color: #5d6a80;
    font-weight: 400;
}

.portal-footer-inner p {
    margin: 0;
}

.language-switcher {
    margin: 0;
}

.language-switcher button {
    min-height: 37px;
    padding-inline: 12px;
    border-color: #e0e5ef;
    border-radius: 9px;
    background: #fff;
    color: #495873;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
}

.language-switcher button:hover {
    border-color: #cbd6eb;
    background: #f6f8fc;
    color: var(--portal-blue);
}

.support-auth-page {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 42px 24px;
    background: radial-gradient(ellipse at 15% 12%, rgb(222 231 255 / 78%), transparent 34%), radial-gradient(ellipse at 92% 87%, rgb(224 242 239 / 60%), transparent 28%), #f5f7fb !important;
    color: var(--portal-ink);
    font-family: var(--portal-font);
}

.support-auth-box {
    width: min(100%, 1080px);
    margin: auto;
}

.support-auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.support-auth-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    color: var(--portal-ink);
    text-decoration: none;
}

.support-auth-brand:hover {
    color: var(--portal-ink);
    text-decoration: none;
}

.support-auth-brand-mark {
    display: block;
    width: auto;
    max-width: 180px;
    height: 42px;
    flex: 0 0 auto;
    object-fit: contain;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    box-sizing: border-box;
}

.support-auth-brand-copy {
    display: grid;
    line-height: 1.15;
}

.support-auth-brand-copy strong {
    font-size: 17px;
    letter-spacing: -.02em;
}

.support-auth-brand-copy small {
    margin-top: 4px;
    color: var(--portal-muted);
    font-size: 12px;
}

.support-auth-header .language-switcher {
    flex: 0 0 auto;
}

.support-auth-header .language-switcher button {
    background: rgb(255 255 255 / 82%);
}

.support-auth-title {
    margin: 0 0 7px;
    color: var(--portal-ink);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.025em;
    text-align: start;
}

.support-auth-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: stretch;
    gap: 20px;
}

.support-auth-promo {
    overflow: hidden;
    position: relative;
    display: flex;
    min-height: 540px;
    align-items: flex-start;
    padding: 42px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 20px;
    background: radial-gradient(ellipse at 85% 12%, rgb(104 137 238 / 30%), transparent 38%), linear-gradient(145deg, #172b52 0%, #203e79 56%, #28528a 100%);
    box-shadow: 0 22px 65px rgb(30 49 86 / 15%);
    color: #fff;
    isolation: isolate;
}

.support-auth-promo-glow {
    position: absolute;
    z-index: -1;
    top: -105px;
    inset-inline-end: -95px;
    width: 330px;
    height: 330px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgb(255 255 255 / 3%), 0 0 0 72px rgb(255 255 255 / 2%);
}

.support-auth-promo-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

.support-auth-promo-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: #c4d2ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.support-auth-promo-label i {
    font-size: 15px;
}

.support-auth-promo h2 {
    max-width: 390px;
    margin: 0;
    color: #fff;
    font-size: clamp(29px, 3.2vw, 39px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.13;
}

.support-auth-promo-description {
    max-width: 370px;
    margin: 15px 0 27px;
    color: #d0d9eb;
    font-size: 15px;
    line-height: 1.6;
}

.support-auth-benefits {
    display: grid;
    gap: 17px;
    margin: 0;
    padding: 0;
    color: #f0f3fa;
    font-size: 14px;
    list-style: none;
}

.support-auth-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.support-auth-benefits li>span {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 15%);
    border-radius: 10px;
    background: rgb(255 255 255 / 9%);
    color: #c7d5ff;
    font-size: 15px;
}

.support-auth-promo-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 37px;
    padding-top: 22px;
    border-top: 1px solid rgb(255 255 255 / 16%);
}

.support-auth-promo-note-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 17%);
    border-radius: 13px;
    background: rgb(255 255 255 / 10%);
    color: #d8e2ff;
    font-size: 18px;
}

.support-auth-promo-note>span:last-child {
    display: grid;
    gap: 3px;
}

.support-auth-promo-note strong {
    color: #fff;
    font-size: 13px;
}

.support-auth-promo-note small {
    color: #c4cfe4;
    font-size: 12px;
}

.support-auth-promo-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid rgb(177 197 255 / 13%);
    border-radius: 50%;
    pointer-events: none;
}

.support-auth-promo-orbit-one {
    top: 54px;
    inset-inline-end: 46px;
    width: 128px;
    height: 128px;
}

.support-auth-promo-orbit-two {
    top: 79px;
    inset-inline-end: 71px;
    width: 78px;
    height: 78px;
    background: radial-gradient(circle, rgb(142 167 255 / 18%), transparent 70%);
}

.support-auth-card {
    overflow: hidden;
    display: flex;
    align-self: stretch;
    margin: 0;
    border: 1px solid rgb(226 232 242 / 90%);
    border-radius: 20px;
    background: white;
    box-shadow: 0 22px 65px rgb(30 49 86 / 9%);
}

.support-auth-box .login-card-body,
.support-auth-box .register-card-body {
    width: 100%;
    padding: clamp(30px, 4vw, 48px);
}

.support-auth-box .form-label {
    color: #3f4d65;
}

.support-auth-box .login-box-msg,
.support-auth-box .register-box-msg {
    margin: 0 0 27px;
    padding: 0;
    color: #56647d;
    font-size: 15px;
    line-height: 1.55;
    text-align: start;
}

.support-auth-box .form-control {
    min-height: 46px;
    border-color: #dce2ec;
    border-radius: 8px 0 0 8px;
    font-family: inherit;
}

.support-auth-box .input-group-text {
    min-width: 43px;
    justify-content: center;
    border-color: #dce2ec;
    background: #f9faff;
    color: #7e8ba2;
}

.support-auth-box .form-control:focus {
    border-color: #7f9af4;
    box-shadow: 0 0 0 .2rem rgb(49 94 232 / 12%);
}

.support-auth-box .btn-primary {
    min-height: 48px;
    border-color: var(--portal-blue);
    border-radius: 8px;
    background: var(--portal-blue);
    font-family: inherit;
    font-weight: 650;
}

.support-auth-box .btn-primary:hover {
    border-color: var(--portal-blue-dark);
    background: var(--portal-blue-dark);
}

.support-auth-box a:not(.login-logo a):not(.register-logo a) {
    color: var(--portal-blue);
    font-weight: 600;
}

.support-auth-box .alert {
    border: 0;
    border-radius: 9px;
    font-size: 13px;
}

.support-auth-box .text-secondary.small {
    color: #5d6a80 !important;
    line-height: 1.5;
}

[dir='rtl'] .support-auth-title {
    letter-spacing: 0;
    line-height: 1.45;
}

html[lang='ar'] .support-auth-promo h2 {
    letter-spacing: 0;
    line-height: 1.45;
}

[dir='rtl'] .support-auth-box .form-control {
    border-radius: 0 8px 8px 0;
}

[dir='rtl'] .support-auth-box .input-group-text {
    border-radius: 8px 0 0 8px;
}

@media (max-width: 900px) {
    .portal-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(310px, .9fr);
        gap: 28px;
    }
    .portal-art-card {
        padding: 20px;
    }
    .portal-art-orbit-one {
        width: 350px;
        height: 350px;
    }
    .portal-art-orbit-two {
        width: 290px;
        height: 290px;
    }
}

@media (max-width: 720px) {
    .portal-container {
        width: min(100% - 36px, 560px);
    }
    .portal-header-inner {
        min-height: 70px;
        gap: 12px;
    }
    .portal-nav {
        gap: 12px;
    }
    .language-switcher button {
        min-height: 36px;
        padding-inline: 9px;
        font-size: 12px;
    }
    .portal-nav .portal-button-small {
        min-height: 38px;
        padding-inline: 12px;
        font-size: 12px;
    }
    .portal-hero {
        padding: 56px 0 52px;
    }
    .portal-hero-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .portal-hero h1 {
        max-width: 540px;
        font-size: clamp(41px, 10vw, 58px);
    }
    .portal-hero-art {
        min-height: 380px;
    }
    .portal-capabilities {
        padding: 58px 0;
    }
    .portal-capability-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .portal-capability-card {
        min-height: 0;
        padding: 21px;
    }
    .portal-capability-icon {
        margin-bottom: 15px;
    }
    .portal-bottom-cta {
        padding-bottom: 54px;
    }
    .portal-cta-panel {
        align-items: flex-start;
        flex-direction: column;
        padding: 30px 25px;
    }
    .portal-footer-inner {
        flex-wrap: wrap;
    }
    .portal-footer-inner p {
        order: 1;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .support-portal .portal-header-inner {
        flex-wrap: wrap;
    }
    .support-portal .portal-mobile-nav-toggle {
        display: inline-flex;
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--portal-border);
        border-radius: var(--portal-radius-control);
        background: var(--portal-surface);
        color: var(--portal-ink);
        font-size: 22px;
        cursor: pointer;
    }
    .support-portal .portal-nav {
        display: none;
        width: 100%;
        flex: 1 1 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 14px;
        border: 1px solid var(--portal-border);
        border-radius: var(--portal-radius-card);
        background: var(--portal-surface);
        box-shadow: var(--portal-shadow-card);
    }
    .has-mobile-nav .support-portal .portal-nav[data-open='true'] {
        display: flex;
    }
    .support-portal .portal-nav>* {
        width: 100%;
    }
    .support-portal .portal-nav-link,
    .support-portal .portal-nav .portal-button {
        min-height: 42px;
        justify-content: center;
    }
    .support-portal .portal-nav .language-switcher {
        justify-content: stretch;
    }
    .support-portal .portal-nav .language-switcher button {
        width: 100%;
        min-height: 42px;
    }
    .has-mobile-nav .support-portal .portal-sign-in {
        display: inline-flex;
    }
}

@media (max-width: 420px) {
    .portal-brand-copy small {
        display: none;
    }
    .portal-nav {
        gap: 9px;
    }
    .portal-nav .portal-sign-in {
        display: none;
    }
    .portal-nav-link {
        font-size: 13px;
    }
    .portal-user-menu-name,
    .portal-user-menu-chevron {
        display: none;
    }
    .portal-user-menu-trigger {
        min-height: 38px;
    }
    .portal-user-menu-panel {
        inset-inline-end: -4px;
    }
    .portal-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .portal-hero-actions .portal-button {
        width: 100%;
    }
    .portal-hero-art {
        min-height: 355px;
    }
    .portal-art-card {
        padding: 18px;
    }
    .portal-service-row {
        font-size: 12px;
    }
    .portal-float-note {
        inset-inline-end: -3px;
        bottom: 8px;
    }
}

.portal-dashboard {
    min-height: 100vh;
    background: radial-gradient(ellipse at 92% 6%, rgb(222 231 255 / 54%), transparent 27%), var(--portal-page);
    color: var(--portal-ink);
    font-family: var(--portal-font);
    -webkit-font-smoothing: antialiased;
}

.portal-dashboard.bg-body-tertiary {
    background-color: var(--portal-page) !important;
}

.portal-dashboard .app-header.portal-header {
    z-index: 1034;
    border-bottom: 1px solid var(--portal-border) !important;
    background-color: var(--portal-surface) !important;
    color: var(--portal-ink);
    box-shadow: 0 2px 12px rgb(22 37 74 / 4%);
}

.portal-dashboard .app-header .nav-link {
    border-radius: var(--portal-radius-control);
    color: var(--portal-muted);
    transition: background-color .15s ease, color .15s ease;
}

.portal-dashboard .app-header .nav-link:hover,
.portal-dashboard .app-header .nav-link:focus-visible {
    background-color: rgb(49 94 232 / 8%);
    color: var(--portal-blue);
}

.portal-dashboard .app-header.portal-header>.container-fluid {
    display: flex;
    min-height: 68px;
    align-items: center;
    gap: clamp(8px, 1.5vw, 22px);
}

.portal-dashboard .app-header .portal-brand {
    min-width: 0;
    flex: 0 1 auto;
}

.portal-dashboard .app-header .portal-brand-copy {
    min-width: 0;
}

.portal-dashboard .app-header .portal-brand-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-dashboard .app-header .portal-brand-copy small {
    color: var(--portal-muted);
}

.portal-dashboard .app-header .portal-nav {
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: clamp(5px, 1vw, 14px);
}

.portal-dashboard .app-header .portal-nav>.nav-item {
    display: flex;
    align-items: center;
}

.portal-dashboard .app-header .portal-nav .language-switcher {
    display: flex;
}

.portal-dashboard .app-header .portal-nav .language-switcher button {
    min-height: 37px;
}

.portal-dashboard-active {
    color: var(--portal-blue);
}

.portal-dashboard-main {
    padding-block: 46px 64px;
}

.portal-dashboard-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.portal-dashboard-welcome .portal-eyebrow {
    margin-bottom: 10px;
}

.portal-dashboard-welcome h1 {
    margin: 0;
    color: var(--portal-ink);
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 650;
    letter-spacing: -.04em;
}

.portal-dashboard-welcome>div>p:last-child {
    margin: 8px 0 0;
    color: var(--portal-muted);
    font-size: 16px;
}

.portal-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.portal-stat-card {
    display: flex;
    min-height: 90px;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border: 1px solid #e6eaf2;
    border-radius: 13px;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 4px 12px rgb(30 49 86 / 3%);
}

.portal-stat-card-link {
    position: relative;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.portal-stat-card-link:hover {
    transform: translateY(-3px);
    border-color: #cbd6f7;
    box-shadow: 0 10px 22px rgb(30 49 86 / 9%);
    color: inherit;
    text-decoration: none;
}

.portal-stat-card-link:focus-visible {
    outline: 3px solid #315ee8;
    outline-offset: 3px;
}

.portal-stat-link-hint {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #f3f5f9;
    color: #78859b;
    font-size: 11px;
    transition: background-color .18s ease, color .18s ease;
}

.portal-stat-card-link:hover .portal-stat-link-hint {
    background: #e9efff;
    color: #315ee8;
}

.portal-dashboard-action-alert {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px 22px;
    border: 1px solid #f0dfb6;
    border-radius: 15px;
    background: #fffaf0;
}

.portal-dashboard-action-alert>div {
    min-width: 0;
    flex: 1;
}

.portal-dashboard-action-alert h2 {
    margin: 0;
    color: #634914;
    font-size: 16px;
    font-weight: 700;
}

.portal-dashboard-action-alert p {
    margin: 4px 0 0;
    color: #745d31;
    font-size: 13px;
}

.portal-dashboard-action-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: #fff0c9;
    color: #8a641c;
    font-size: 18px;
}

.portal-stat-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    font-size: 17px;
}

.portal-stat-copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 5px;
}

.portal-icon-amber {
    background: #fff5df;
    color: #966100;
}

.portal-icon-slate {
    background: #edf0f5;
    color: #53617a;
}

.portal-stat-label {
    color: #526079;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.portal-stat-copy>strong {
    color: var(--portal-ink);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.05;
}

.portal-dashboard-panel {
    padding: 26px 28px;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-card);
    background: var(--portal-surface);
    box-shadow: var(--portal-shadow-card);
}

.portal-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 19px;
    border-bottom: 1px solid #edf0f5;
}

.portal-panel-heading .portal-eyebrow {
    margin-bottom: 5px;
    font-size: 10px;
}

.portal-panel-heading h2 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 23px;
    font-weight: 650;
    letter-spacing: -.025em;
}

.portal-panel-subtitle {
    margin: 4px 0 0;
    color: #5d6a80;
    font-size: 13px;
}

.portal-description-counter {
    margin-top: 8px;
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.portal-description-counter.is-warning {
    color: #b35b00;
}

.portal-description-counter.is-success {
    color: #1d7c52;
}

.portal-text-link,
.portal-dashboard-help>a,
.portal-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #244bc4;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.portal-text-link:hover,
.portal-dashboard-help>a:hover,
.portal-back-link:hover {
    color: #173a9d;
    text-decoration: underline;
}

.portal-ticket-row {
    display: grid;
    min-height: 83px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #f0f2f6;
}

.portal-ticket-row:last-child {
    border-bottom: 0;
}

.portal-ticket-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #e5eaff;
    border-radius: 12px;
    background: #f3f5ff;
    color: #4565d2;
    font-size: 16px;
}

.portal-ticket-copy {
    min-width: 0;
}

.portal-ticket-number {
    display: block;
    margin-bottom: 2px;
    color: #5c6b85;
    font-size: 11px;
    font-weight: 650;
}

.portal-ticket-copy h3 {
    overflow: hidden;
    margin: 0;
    color: #263550;
    font-size: 14px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-pill);
    background: var(--portal-surface-muted);
    color: #46546b;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.portal-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #64748b;
}

.portal-status-open {
    border-color: #d7e3ff;
    background: #f0f5ff;
    color: #24458d;
}

.portal-status-open .portal-status-dot {
    background: #315ee8;
}

.portal-status-in_progress {
    border-color: #e2d9ff;
    background: #f6f2ff;
    color: #58399a;
}

.portal-status-in_progress .portal-status-dot {
    background: #7956cf;
}

.portal-status-waiting_for_customer,
.portal-status-waiting_for_third_party {
    border-color: #f3dfb2;
    background: #fff8e9;
    color: #74500a;
}

.portal-status-waiting_for_customer .portal-status-dot,
.portal-status-waiting_for_third_party .portal-status-dot {
    background: #b27808;
}

.portal-status-resolved {
    border-color: #cceadd;
    background: #eef9f4;
    color: #176444;
}

.portal-status-resolved .portal-status-dot {
    background: #23885f;
}

.portal-status-closed {
    border-color: #dce1e8;
    background: #f4f5f7;
    color: #48566b;
}

.portal-status-closed .portal-status-dot {
    background: #64748b;
}

.portal-ticket-date {
    min-width: 88px;
    color: #5d6a80;
    font-size: 12px;
    text-align: end;
}

.portal-ticket-date span,
.portal-ticket-date strong {
    display: block;
}

.portal-ticket-date span {
    margin-bottom: 3px;
    color: #7a879b;
    font-size: 10px;
}

.portal-ticket-date strong {
    color: #46546b;
    font-size: 12px;
    font-weight: 650;
}

.portal-ticket-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: #69768c;
    font-size: 11px;
}

.portal-ticket-row-meta .portal-ticket-priority {
    padding: 2px 7px;
    font-size: 10px;
}

.portal-dashboard-empty {
    display: grid;
    justify-items: center;
    padding: 43px 18px 34px;
    text-align: center;
}

.portal-empty-icon,
.portal-upcoming-icon {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid #dfe7fc;
    border-radius: 20px;
    background: linear-gradient(145deg, #f3f6ff, #eaf0ff);
    color: #4262d0;
    font-size: 25px;
}

.portal-dashboard-empty h3 {
    margin: 18px 0 5px;
    color: var(--portal-ink);
    font-size: 19px;
    font-weight: 650;
}

.portal-dashboard-empty p {
    max-width: 410px;
    margin: 0 0 20px;
    color: var(--portal-muted);
    font-size: 14px;
    line-height: 1.55;
}

.portal-dashboard-empty .portal-button {
    min-height: 45px;
}

.portal-dashboard-help {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 18px;
    padding: 17px 20px;
    border: 1px solid #e4e9f2;
    border-radius: 13px;
    background: #fff;
}

.portal-help-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    background: #e9f6f2;
    color: #237b60;
    font-size: 17px;
}

.portal-dashboard-help>span:nth-child(2) {
    display: grid;
    gap: 2px;
}

.portal-dashboard-help strong {
    color: #33415c;
    font-size: 13px;
}

.portal-dashboard-help small {
    color: #5d6a80;
    font-size: 12px;
}

.portal-dashboard-help>a {
    margin-inline-start: auto;
    white-space: nowrap;
}

.portal-upcoming-main {
    min-height: calc(100vh - 150px);
}

.portal-back-link {
    margin-bottom: 18px;
}

.portal-upcoming-card {
    display: grid;
    max-width: 700px;
    justify-items: start;
    gap: 14px;
    padding: clamp(28px, 6vw, 48px);
}

.portal-upcoming-card .portal-eyebrow {
    margin: 5px 0 0;
}

.portal-upcoming-card h1 {
    margin: 0;
    color: var(--portal-ink);
    font-size: clamp(27px, 4vw, 38px);
    font-weight: 650;
    letter-spacing: -.035em;
}

.portal-upcoming-description,
.portal-upcoming-note {
    max-width: 540px;
    margin: 0;
    color: var(--portal-muted);
    font-size: 16px;
    line-height: 1.65;
}

.portal-upcoming-note {
    padding: 13px 15px;
    border-inline-start: 3px solid #315ee8;
    border-radius: 0 9px 9px 0;
    background: #f3f6ff;
    font-size: 13px;
}

[dir='rtl'] .portal-upcoming-note {
    border-radius: 9px 0 0 9px;
}

@media (max-width: 720px) {
    .portal-dashboard-main {
        padding-block: 33px 46px;
    }
    .portal-dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 22px;
    }
    .portal-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .portal-stat-card {
        min-height: 82px;
        gap: 10px;
        padding: 12px;
    }
    .portal-dashboard-panel {
        padding: 21px 18px;
    }
    .portal-ticket-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 11px;
        padding-block: 13px;
    }
    .portal-ticket-date {
        grid-column: 2 / -1;
        grid-row: 2;
        min-width: 0;
        text-align: start;
    }
    .portal-ticket-status {
        grid-column: 3;
        grid-row: 1;
        padding: 5px 8px;
        font-size: 10px;
    }
    .portal-dashboard-help {
        flex-wrap: wrap;
    }
    .portal-dashboard-action-alert {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 16px;
    }
    .portal-dashboard-action-alert .portal-button {
        width: 100%;
        justify-content: center;
    }
    .portal-dashboard-help>a {
        width: 100%;
        margin-inline-start: 51px;
    }
}

@media (max-width: 820px) {
    .support-auth-page {
        align-items: flex-start;
        padding-block: 28px;
    }
    .support-auth-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .support-auth-promo {
        min-height: 0;
        padding: 30px;
    }
    .support-auth-promo h2 {
        max-width: 560px;
        font-size: 30px;
    }
    .support-auth-promo-description {
        max-width: 540px;
        margin-block: 10px 18px;
    }
    .support-auth-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    .support-auth-benefits li {
        align-items: flex-start;
        font-size: 12px;
    }
    .support-auth-promo-note {
        margin-top: 20px;
        padding-top: 16px;
    }
}

@media (max-width: 440px) {
    .portal-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .portal-dashboard-stats {
        gap: 8px;
    }
    .portal-stat-card {
        min-height: 78px;
        gap: 8px;
        padding: 10px;
    }
    .portal-stat-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 15px;
    }
    .portal-stat-link-hint {
        width: 23px;
        height: 23px;
        font-size: 10px;
    }
    .portal-stat-label {
        font-size: 11px;
    }
    .portal-stat-copy>strong {
        font-size: 22px;
    }
    .portal-ticket-status {
        max-width: 122px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.portal-theme-toggle {
    display: inline-flex;
    min-height: 37px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #e0e5ef;
    border-radius: 9px;
    background: #fff;
    color: #495873;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.portal-theme-toggle:hover {
    border-color: #cbd6eb;
    background: #f6f8fc;
    color: var(--portal-blue);
}

.portal-theme-toggle i {
    font-size: 14px;
}

.support-auth-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.support-auth-header-actions .language-switcher {
    display: flex;
}

html[data-theme='dark'] {
    color-scheme: dark;
    --portal-ink: #e7edf8;
    --portal-muted: #aab6cb;
    --portal-blue: #91aaff;
    --portal-blue-dark: #abc0ff;
    --portal-on-blue: #111827;
    --portal-line: #313d52;
    --portal-border: #303d53;
    --portal-control-border: #3a4961;
    --portal-surface: #1b2638;
    --portal-surface-muted: #141e2e;
    --portal-page: #111827;
    --portal-focus: #afc1ff;
    --portal-focus-ring: 0 0 0 3px rgb(145 170 255 / 18%);
    --portal-shadow-card: 0 10px 32px rgb(0 0 0 / 16%);
    --portal-success-border: #326b58;
    --portal-success-surface: #203e35;
    --portal-success-ink: #a1e2c3;
    --portal-danger-border: #74404a;
    --portal-danger-surface: #482d37;
    --portal-danger-ink: #f2b8c2;
}

.portal-error-page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.portal-error-header {
    border-bottom: 1px solid var(--portal-border);
    background: var(--portal-surface);
}

.portal-error-header-inner,
.portal-error-header-actions,
.portal-error-actions,
.portal-error-footer-inner {
    display: flex;
    align-items: center;
}

.portal-error-header-inner,
.portal-error-footer-inner {
    min-height: 76px;
    justify-content: space-between;
    gap: 20px;
}

.portal-error-header-actions {
    gap: 12px;
}

.portal-error-main {
    display: grid;
    width: 100%;
    flex: 1;
    place-items: center;
    padding-block: 64px;
}

.portal-error-card {
    width: min(100% - 40px, 620px);
    padding: clamp(30px, 6vw, 58px);
    border: 1px solid var(--portal-border);
    border-radius: 24px;
    background: var(--portal-surface);
    box-shadow: var(--portal-shadow-card);
    text-align: center;
}

.portal-error-icon {
    display: grid;
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    place-items: center;
    border: 1px solid var(--portal-danger-border);
    border-radius: 22px;
    background: var(--portal-danger-surface);
    color: var(--portal-danger-ink);
    font-size: 30px;
}

.portal-error-code {
    margin: 0 0 10px;
    color: var(--portal-muted);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .04em;
}

.portal-error-code span {
    color: var(--portal-blue);
    font-variant-numeric: tabular-nums;
}

.portal-error-card h1 {
    margin: 0;
    color: var(--portal-ink);
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.2;
}

.portal-error-description {
    max-width: 470px;
    margin: 16px auto 0;
    color: var(--portal-muted);
    font-size: 16px;
}

.portal-error-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.portal-error-actions .portal-button {
    justify-content: center;
}

.portal-error-footer {
    border-top: 1px solid var(--portal-border);
    color: var(--portal-muted);
    font-size: 13px;
}

html[lang='ar'] .portal-error-card h1 {
    letter-spacing: 0;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .portal-error-header-inner {
        min-height: 68px;
    }

    .portal-error-header .portal-brand-mark {
        height: 42px;
        max-width: 110px;
    }

    .portal-error-header .portal-brand-copy,
    .portal-error-header .portal-theme-toggle [data-theme-label] {
        display: none;
    }

    .portal-error-header-actions {
        gap: 8px;
    }

    .portal-error-main {
        padding-block: 36px;
    }

    .portal-error-card {
        width: min(100% - 28px, 620px);
        padding: 32px 22px;
    }

    .portal-error-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .portal-error-footer-inner {
        min-height: 64px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding-block: 12px;
    }
}

html[data-theme='dark'] body.support-portal,
html[data-theme='dark'] body.portal-dashboard {
    background: radial-gradient(ellipse at 92% 6%, rgb(49 73 128 / 22%), transparent 29%), var(--portal-page);
    color: var(--portal-ink);
}

html[data-theme='dark'] body.support-auth-page {
    background: radial-gradient(ellipse at 15% 12%, rgb(49 73 128 / 28%), transparent 34%), radial-gradient(ellipse at 92% 87%, rgb(35 91 80 / 18%), transparent 28%), #111827 !important;
    color: var(--portal-ink);
}

html[data-theme='dark'] .portal-header {
    border-color: rgb(49 61 82 / 85%);
    background: rgb(20 30 47 / 92%);
}

html[data-theme='dark'] .portal-dashboard .app-header.portal-header {
    box-shadow: 0 2px 14px rgb(0 0 0 / 18%);
}

html[data-theme='dark'] .portal-dashboard .app-sidebar {
    --lte-sidebar-hover-bg: rgb(169 189 255 / 10%);
    --lte-sidebar-menu-active-bg: rgb(169 189 255 / 15%);
    box-shadow: 4px 0 22px rgb(0 0 0 / 22%);
}

html[data-theme='dark'] .portal-dashboard .app-sidebar .sidebar-brand .brand-text {
    color: var(--portal-ink);
}

html[data-theme='dark'] .portal-nav-link,
html[data-theme='dark'] .portal-promise,
html[data-theme='dark'] .portal-promise i,
html[data-theme='dark'] .portal-footer-inner,
html[data-theme='dark'] .portal-footer-brand span {
    color: #aab6cb;
}

html[data-theme='dark'] .portal-user-menu-trigger {
    color: #e7edf8;
}

html[data-theme='dark'] .portal-user-menu-trigger:hover,
html[data-theme='dark'] .portal-user-menu[open] .portal-user-menu-trigger {
    background: rgb(169 189 255 / 10%);
}

html[data-theme='dark'] .portal-user-avatar {
    border-color: #3a4c70;
    background: linear-gradient(145deg, #293a5a, #22324d);
    color: #b6c7ff;
}

html[data-theme='dark'] .portal-user-menu-panel {
    border-color: #3a4961;
    background: #1b273a;
    box-shadow: 0 16px 40px rgb(0 0 0 / 35%);
}

html[data-theme='dark'] .portal-user-menu-identity,
html[data-theme='dark'] .portal-user-menu-signout {
    border-color: #30394b;
}

html[data-theme='dark'] .portal-user-menu-identity strong {
    color: #e7edf8;
}

html[data-theme='dark'] .portal-user-menu-identity small,
html[data-theme='dark'] .portal-user-menu-item i {
    color: #aab6cb;
}

html[data-theme='dark'] .portal-user-menu-item {
    color: #d3dced;
}

html[data-theme='dark'] .portal-user-menu-item:hover {
    background: #263752;
    color: #b6c7ff;
}

html[data-theme='dark'] .portal-user-menu-signout,
html[data-theme='dark'] .portal-user-menu-signout i {
    color: #f2aab5;
}

html[data-theme='dark'] .portal-hero {
    background: radial-gradient(ellipse at 87% 14%, rgb(49 73 128 / 28%), transparent 32%), linear-gradient(180deg, #151f31 0%, #111827 100%);
}

html[data-theme='dark'] .portal-art-card,
html[data-theme='dark'] .portal-float-note,
html[data-theme='dark'] .portal-capabilities,
html[data-theme='dark'] .portal-bottom-cta,
html[data-theme='dark'] .portal-footer,
html[data-theme='dark'] .portal-button-secondary {
    border-color: #303d53;
    background: #1b2638;
    color: var(--portal-ink);
}

html[data-theme='dark'] .portal-art-card {
    box-shadow: 0 26px 70px rgb(0 0 0 / 28%), 0 4px 12px rgb(0 0 0 / 15%);
}

html[data-theme='dark'] .portal-art-card-header small,
html[data-theme='dark'] .portal-art-footer,
html[data-theme='dark'] .portal-float-note {
    color: #aab6cb;
}

html[data-theme='dark'] .portal-service-row {
    border-color: #30394b;
    color: #d3dced;
}

html[data-theme='dark'] .portal-footer-avatars i {
    border-color: #1b2638;
    background: #2b3b56;
    color: #bdcbef;
}

html[data-theme='dark'] .portal-capability-card {
    border-color: #303d53;
    background: linear-gradient(150deg, #1b2638, #182233);
    box-shadow: 0 10px 32px rgb(0 0 0 / 16%);
}

html[data-theme='dark'] .portal-capability-card:hover {
    border-color: #465776;
}

html[data-theme='dark'] .portal-card-index {
    color: #8492aa;
}

html[data-theme='dark'] .portal-button-secondary:hover {
    border-color: #465776;
    background: #25334a;
    color: var(--portal-ink);
}

html[data-theme='dark'] .portal-welcome {
    border-color: #34476a;
    background: #1d2b43;
    color: #d1dced;
}

html[data-theme='dark'] .portal-welcome-icon,
html[data-theme='dark'] .portal-art-icon,
html[data-theme='dark'] .portal-icon-blue,
html[data-theme='dark'] .portal-ticket-icon {
    border-color: #34476a;
    background: #263752;
    color: #a9bdff;
}

html[data-theme='dark'] .portal-icon-violet {
    background: #332c4b;
    color: #c2adff;
}

html[data-theme='dark'] .portal-icon-mint {
    background: #203c38;
    color: #7ed4b4;
}

html[data-theme='dark'] .portal-theme-toggle,
html[data-theme='dark'] .language-switcher button,
html[data-theme='dark'] .support-auth-header .language-switcher button {
    border-color: #3a4961;
    background: #1b2638;
    color: #d3dced;
}

html[data-theme='dark'] .portal-theme-toggle:hover,
html[data-theme='dark'] .language-switcher button:hover {
    border-color: #596a86;
    background: #26344a;
    color: #c2d0ff;
}

html[data-theme='dark'] .portal-stat-card,
html[data-theme='dark'] .portal-dashboard-panel,
html[data-theme='dark'] .portal-dashboard-help,
html[data-theme='dark'] .support-auth-card {
    border-color: var(--portal-border);
    background: var(--portal-surface);
    color: var(--portal-ink);
    box-shadow: var(--portal-shadow-card);
}

html[data-theme='dark'] .portal-dashboard-action-alert {
    border-color: #705b31;
    background: #342d20;
}

html[data-theme='dark'] .portal-dashboard-action-alert h2 {
    color: #f0d99e;
}

html[data-theme='dark'] .portal-dashboard-action-alert p {
    color: #ddc995;
}

html[data-theme='dark'] .portal-dashboard-action-icon {
    background: #493b22;
    color: #f0d99e;
}

html[data-theme='dark'] .portal-stat-card-link:hover {
    border-color: #566a91;
}

html[data-theme='dark'] .portal-stat-link-hint {
    background: #29364a;
    color: #aab6cb;
}

html[data-theme='dark'] .portal-stat-card-link:hover .portal-stat-link-hint {
    background: #34476a;
    color: #c2d0ff;
}

html[data-theme='dark'] .portal-stat-label,
html[data-theme='dark'] .portal-panel-subtitle,
html[data-theme='dark'] .portal-ticket-date,
html[data-theme='dark'] .portal-ticket-date strong,
html[data-theme='dark'] .portal-ticket-row-meta,
html[data-theme='dark'] .portal-ticket-number,
html[data-theme='dark'] .portal-dashboard-help small {
    color: #aab6cb;
}

html[data-theme='dark'] .portal-panel-heading,
html[data-theme='dark'] .portal-ticket-row {
    border-color: #30394b;
}

html[data-theme='dark'] .portal-ticket-copy h3,
html[data-theme='dark'] .portal-dashboard-help strong {
    color: #e1e8f4;
}

html[data-theme='dark'] .portal-ticket-status {
    border-color: #46536a;
    background: #29364a;
    color: #d7dfec;
}

html[data-theme='dark'] .portal-status-open {
    border-color: #3b568e;
    background: #22375e;
    color: #c0d0ff;
}

html[data-theme='dark'] .portal-status-in_progress {
    border-color: #55457e;
    background: #362d50;
    color: #d4c7ff;
}

html[data-theme='dark'] .portal-status-waiting_for_customer,
html[data-theme='dark'] .portal-status-waiting_for_third_party {
    border-color: #725a2d;
    background: #40351f;
    color: #f0d99e;
}

html[data-theme='dark'] .portal-status-resolved {
    border-color: #326b58;
    background: #203e35;
    color: #a1e2c3;
}

html[data-theme='dark'] .portal-status-closed {
    border-color: #46536a;
    background: #29364a;
    color: #c5cede;
}

html[data-theme='dark'] .portal-icon-amber {
    background: #40351f;
    color: #f0d99e;
}

html[data-theme='dark'] .portal-icon-slate {
    background: #29364a;
    color: #c5cede;
}

html[data-theme='dark'] .portal-help-icon {
    background: #203e35;
    color: #a1e2c3;
}

html[data-theme='dark'] .portal-upcoming-note {
    border-color: #91aaff;
    background: #22375e;
    color: #d7e0f2;
}

html[data-theme='dark'] .portal-upcoming-icon,
html[data-theme='dark'] .portal-empty-icon {
    border-color: #34476a;
    background: linear-gradient(145deg, #263752, #22314a);
    color: #a9bdff;
}

html[data-theme='dark'] .support-auth-box .form-label,
html[data-theme='dark'] .support-auth-title {
    color: #f0f4fb;
}

html[data-theme='dark'] .support-auth-box .login-card-body,
html[data-theme='dark'] .support-auth-box .register-card-body {
    background: transparent;
    color: #e7edf8;
}

html[data-theme='dark'] .support-auth-box .form-label {
    color: #e1e8f4;
}

html[data-theme='dark'] .support-auth-box .login-box-msg,
html[data-theme='dark'] .support-auth-box .register-box-msg {
    color: #c1ccdf;
}

html[data-theme='dark'] .support-auth-box .form-control {
    border-color: #3a4961;
    background: #141e2e;
    color: #e7edf8;
}

html[data-theme='dark'] .support-auth-box .form-control::placeholder {
    color: #a4b0c5;
}

html[data-theme='dark'] .support-auth-box .input-group-text {
    border-color: #3a4961;
    background: #202c40;
    color: #aab6cb;
}

html[data-theme='dark'] .support-auth-box .text-secondary.small {
    color: #bdc9dc !important;
}

html[data-theme='dark'] .support-auth-box a:not(.login-logo a):not(.register-logo a) {
    color: #a9bdff;
}

html[data-theme='dark'] .support-auth-box .btn-primary {
    border-color: #4268e8;
    background: #4268e8;
    color: #fff;
}

html[data-theme='dark'] .support-auth-box .btn-primary:hover {
    border-color: #5577ef;
    background: #5577ef;
}

html[data-theme='dark'] .support-auth-box .alert-success {
    background: #203e35;
    color: #a1e2c3;
}

html[data-theme='dark'] .support-auth-box .alert-danger {
    background: #482d37;
    color: #f2b8c2;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 440px) {
    .support-auth-page {
        align-items: flex-start;
        padding: 25px 14px;
    }
    .support-auth-header {
        gap: 8px;
        margin-bottom: 15px;
    }
    .support-auth-brand {
        gap: 8px;
    }
    .support-auth-brand-mark {
        width: 39px;
        height: 39px;
        border-radius: 12px;
        font-size: 21px;
    }
    .support-auth-brand-copy strong {
        font-size: 15px;
    }
    .support-auth-header .language-switcher button {
        min-height: 35px;
        padding-inline: 9px;
        font-size: 12px;
    }
    .support-auth-title {
        font-size: 22px;
    }
    .support-auth-promo {
        padding: 24px;
        border-radius: 16px;
    }
    .support-auth-promo h2 {
        font-size: 26px;
    }
    .support-auth-benefits {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .support-auth-benefits li {
        align-items: center;
        font-size: 13px;
    }
    .support-auth-promo-note {
        margin-top: 16px;
    }
}

.portal-ticket-create-main {
    max-width: 930px;
}

.portal-ticket-create-panel {
    padding: 30px;
}

.portal-ticket-create-panel .portal-panel-heading h1 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.portal-ticket-create-icon {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid var(--portal-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--portal-blue) 8%, var(--portal-surface));
    color: var(--portal-blue-dark);
    font-size: 21px;
}

.portal-ticket-form {
    padding-top: 24px;
}

.portal-ticket-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.portal-ticket-field {
    min-width: 0;
}

.portal-ticket-field-wide {
    grid-column: 1 / -1;
}

.portal-ticket-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--portal-ink);
    font-size: 13px;
    font-weight: 650;
}

.portal-ticket-control {
    min-height: 45px;
    border: 1px solid var(--portal-control-border);
    border-radius: var(--portal-radius-control);
    background-color: var(--portal-surface);
    color: var(--portal-ink);
    font-size: 14px;
    box-shadow: none;
}

.portal-ticket-control:focus {
    border-color: var(--portal-blue);
    box-shadow: var(--portal-focus-ring);
}

.portal-ticket-description {
    min-height: 170px;
    resize: vertical;
}

.portal-ticket-file {
    height: auto;
    padding-block: 9px;
}

.portal-ticket-field small {
    display: block;
    margin-top: 7px;
    color: var(--portal-muted);
    font-size: 12px;
}

.portal-ticket-field-error {
    margin: 6px 0 0;
    color: #c64052;
    font-size: 12px;
}

.portal-ticket-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--portal-space-2);
    margin-top: 20px;
    padding: var(--portal-space-3) var(--portal-space-4);
    border: 1px solid;
    border-radius: var(--portal-radius-control);
    font-size: 14px;
}

.portal-ticket-alert-success {
    border-color: var(--portal-success-border);
    background: var(--portal-success-surface);
    color: var(--portal-success-ink);
}

.portal-ticket-alert-error {
    border-color: var(--portal-danger-border);
    background: var(--portal-danger-surface);
    color: var(--portal-danger-ink);
}

.portal-ticket-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 25px;
    padding-top: 19px;
    border-top: 1px solid var(--portal-border);
}

.portal-ticket-form-actions .portal-button {
    gap: 9px;
    border: 0;
}

.portal-ticket-cancel {
    color: var(--portal-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.portal-ticket-cancel:hover {
    color: var(--portal-ink);
}

html[data-theme='dark'] .portal-ticket-create-icon {
    border-color: #34476a;
    background: #263752;
    color: #a9bdff;
}

html[data-theme='dark'] .portal-ticket-field label {
    color: #e1e8f4;
}

html[data-theme='dark'] .portal-ticket-control {
    border-color: var(--portal-control-border);
    background-color: var(--portal-surface-muted);
    color: var(--portal-ink);
}

html[data-theme='dark'] .portal-ticket-control option {
    background: #141e2e;
    color: #e7edf8;
}

html[data-theme='dark'] .portal-ticket-field small,
html[data-theme='dark'] .portal-ticket-cancel {
    color: #aab6cb;
}

html[data-theme='dark'] .portal-ticket-form-actions {
    border-color: #30394b;
}

html[data-theme='dark'] .portal-ticket-alert-success {
    border-color: var(--portal-success-border);
    background: var(--portal-success-surface);
    color: var(--portal-success-ink);
}

html[data-theme='dark'] .portal-ticket-alert-error {
    border-color: var(--portal-danger-border);
    background: var(--portal-danger-surface);
    color: var(--portal-danger-ink);
}

.portal-profile-main {
    max-width: 1000px;
}

.portal-admin-dashboard {
    min-width: 0;
    width: min(1440px, 100%);
    margin-inline: auto;
}

.portal-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.portal-sidebar-brand:hover {
    color: inherit;
    text-decoration: none;
}

.portal-sidebar-brand .portal-brand-mark {
    width: auto;
    max-width: 130px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 0;
    font-size: 18px;
}

.portal-dashboard .app-sidebar .sidebar-brand {
    min-height: 68px;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--portal-border);
}

.portal-dashboard .app-sidebar .sidebar-wrapper {
    padding: .5rem;
}

.portal-dashboard .app-sidebar .sidebar-menu .nav-link {
    min-height: 44px;
    margin-block: 2px;
    border-radius: var(--portal-radius-control);
    transition: background-color .15s ease, color .15s ease;
}

.portal-dashboard .app-sidebar {
    --lte-sidebar-color: var(--portal-muted);
    --lte-sidebar-hover-color: var(--portal-blue-dark);
    --lte-sidebar-hover-bg: rgb(49 94 232 / 8%);
    --lte-sidebar-active-color: var(--portal-blue-dark);
    --lte-sidebar-menu-active-color: var(--portal-blue-dark);
    --lte-sidebar-menu-active-bg: rgb(49 94 232 / 12%);
    --lte-sidebar-header-color: var(--portal-muted);
    border-inline-end: 1px solid var(--portal-border);
    background-color: var(--portal-surface) !important;
    box-shadow: 4px 0 20px rgb(22 37 74 / 5%);
}

.portal-dashboard .app-sidebar .sidebar-menu .nav-link.active {
    font-weight: 650;
}

.portal-dashboard .app-sidebar .sidebar-menu .nav-link .nav-icon {
    width: 1.5rem;
    text-align: center;
}

.portal-dashboard .app-sidebar .sidebar-brand .brand-text {
    color: var(--portal-ink);
}

.portal-dashboard .app-sidebar .sidebar-menu .nav-link p {
    margin: 0;
    line-height: 1.4;
}

.portal-dashboard .app-sidebar .sidebar-menu .nav-header {
    margin-block: .5rem .25rem;
    padding-inline: .75rem;
    color: var(--portal-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html[lang='ar'] .portal-dashboard .app-sidebar .sidebar-menu .nav-header {
    letter-spacing: 0;
    text-transform: none;
}

.portal-dashboard textarea.form-control {
    border-color: var(--portal-line);
    background-color: var(--portal-surface);
    color: var(--portal-ink);
}

html[data-theme='dark'] .portal-dashboard .app-header .nav-link:hover,
html[data-theme='dark'] .portal-dashboard .app-header .nav-link:focus-visible {
    background-color: rgb(169 189 255 / 10%);
    color: var(--portal-blue-dark);
}

.portal-dashboard textarea.form-control::placeholder {
    color: var(--portal-muted);
    opacity: 1;
}

.portal-dashboard textarea.form-control:focus {
    border-color: #6684f0;
    background-color: var(--portal-surface);
    color: var(--portal-ink);
    box-shadow: 0 0 0 3px rgb(66 104 232 / 12%);
}

.portal-dashboard textarea.form-control:disabled,
.portal-dashboard textarea.form-control[readonly] {
    background-color: color-mix(in srgb, var(--portal-surface) 86%, var(--portal-page));
}

.portal-dashboard .app-content {
    padding-inline: clamp(.5rem, 1.5vw, 1.25rem);
}

.portal-dashboard .app-footer.portal-footer {
    padding: 16px clamp(16px, 2vw, 32px);
}

.portal-dashboard .app-footer .portal-footer-inner {
    width: min(1440px, 100%);
    min-height: 32px;
    margin-inline: auto;
}

.portal-dashboard .portal-dashboard-main {
    padding-block: clamp(1.75rem, 4vw, 3rem) 4rem;
}

.portal-admin-ticket-main {
    max-width: 1440px;
}

.portal-admin-ticket-heading {
    align-items: center;
}

.portal-admin-ticket-panel {
    padding: 22px;
}

.portal-admin-settings-section + .portal-admin-settings-section {
    margin-top: 24px;
}

.portal-admin-settings-form > .form-group {
    margin-bottom: 16px;
}

.portal-admin-settings-form > h2:not(:first-of-type) {
    margin-top: 24px;
}

.portal-admin-ticket-filters {
    display: grid;
    grid-template-columns: minmax(210px, 2fr) repeat(4, minmax(135px, 1fr)) minmax(150px, 1fr) auto auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--portal-border);
}

.portal-admin-filter-field {
    min-width: 0;
}

.portal-admin-filter-label {
    display: block;
    margin-bottom: 5px;
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
}

.portal-admin-ticket-filters>div:not(.portal-admin-ticket-search) {
    min-width: 0;
}

.portal-admin-ticket-filters .portal-ticket-control {
    min-height: 42px;
    font-size: 13px;
}

.portal-admin-ticket-filters .portal-ticket-filter-submit {
    min-height: 42px;
    padding-inline: 14px;
    white-space: nowrap;
}

.portal-admin-ticket-filters .portal-ticket-filter-reset {
    padding-bottom: 11px;
    white-space: nowrap;
}

.portal-admin-bulk-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.portal-admin-bulk-actions select {
    width: min(230px, 45%);
}

.portal-admin-bulk-actions .portal-button {
    min-height: 42px;
    gap: 8px;
}

.portal-admin-bulk-actions>span {
    margin-inline-start: auto;
    color: var(--portal-muted);
    font-size: 12px;
}

.portal-admin-ticket-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-card);
    background: var(--portal-surface);
}

.portal-admin-ticket-table-wrap:focus-visible {
    outline: 3px solid var(--portal-focus);
    outline-offset: 3px;
}

.portal-admin-ticket-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--portal-ink);
    font-size: 13px;
}

.portal-admin-ticket-table th {
    padding: 13px 12px;
    border-bottom: 1px solid var(--portal-border);
    background: var(--portal-surface-muted);
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 700;
    text-align: start;
    white-space: nowrap;
}

.portal-admin-ticket-table td {
    min-width: 90px;
    padding: 13px 12px;
    border-bottom: 1px solid var(--portal-border);
    vertical-align: middle;
}

.portal-admin-ticket-table tbody tr:last-child td {
    border-bottom: 0;
}

.portal-admin-ticket-table tbody tr:hover {
    background: color-mix(in srgb, var(--portal-blue) 3%, var(--portal-surface));
}

.portal-admin-ticket-table td:first-child {
    min-width: 38px;
    width: 38px;
    text-align: center;
}

.portal-admin-ticket-table td.portal-ticket-table-number {
    min-width: 125px;
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.portal-admin-ticket-table td:nth-child(3) {
    min-width: 220px;
    max-width: 320px;
    white-space: normal;
}

.portal-admin-ticket-table td.portal-ticket-table-subject a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--portal-ink);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.portal-admin-ticket-table td.portal-ticket-table-subject a:hover {
    color: var(--portal-blue-dark);
}

.portal-admin-ticket-table td:nth-child(4)>strong {
    display: block;
    color: var(--portal-ink);
    font-weight: 650;
}

.portal-admin-ticket-table td:nth-child(10) {
    color: var(--portal-muted);
    white-space: nowrap;
}

.portal-admin-customer-email {
    display: block;
    max-width: 180px;
    overflow: hidden;
    margin-top: 3px;
    color: var(--portal-muted);
    font-size: 10px;
    text-overflow: ellipsis;
}

.portal-admin-assignee {
    min-width: 125px;
    min-height: 36px;
    font-size: 12px;
}

.portal-admin-ticket-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--portal-blue);
    vertical-align: middle;
}

.portal-admin-task-summary {
    display: inline-block;
    min-width: 35px;
    color: var(--portal-ink);
    font-weight: 650;
    text-align: center;
}

.portal-admin-overdue-badge {
    display: inline-block;
    margin-inline-start: 4px;
    padding: 4px 6px;
    border-radius: 6px;
    background: #fff0f1;
    color: #a23848;
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
}

html[data-theme='dark'] .portal-admin-ticket-table-wrap {
    border-color: #30394b;
}

html[data-theme='dark'] .portal-admin-ticket-table th {
    border-color: #30394b;
    background: #1c283b;
    color: #aab6cb;
}

html[data-theme='dark'] .portal-admin-ticket-table td {
    border-color: #30394b;
}

html[data-theme='dark'] .portal-admin-ticket-table tbody tr:hover {
    background: #1b273a;
}

html[data-theme='dark'] .portal-admin-overdue-badge {
    background: #482d37;
    color: #f2aab5;
}

.portal-admin-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 10px;
}

.portal-icon-rose {
    background: #fff0f1;
    color: #b6384b;
}

.portal-admin-target-note {
    margin: 0 0 24px;
    color: var(--portal-muted);
    font-size: 12px;
    text-align: end;
}

.portal-admin-scope {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid #dce5ff;
    border-radius: 9px;
    background: #f3f6ff;
    color: #3558c7;
    font-size: 13px;
    font-weight: 600;
}

.portal-admin-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.portal-admin-panel {
    min-width: 0;
}

.portal-admin-panel .portal-panel-heading {
    padding-bottom: 17px;
}

.portal-admin-panel .portal-eyebrow {
    margin-bottom: 5px;
}

.portal-admin-panel .portal-panel-heading h2 {
    font-size: 20px;
}

.portal-admin-panel-icon,
.portal-admin-task-check,
.portal-admin-resolved-icon,
.portal-admin-activity-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
}

.portal-admin-panel-icon {
    width: 39px;
    height: 39px;
    background: #f0f3ff;
    color: #4967cf;
    font-size: 18px;
}

.portal-admin-task-list,
.portal-admin-resolved-list,
.portal-admin-activity-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-admin-task-list li,
.portal-admin-resolved-list li,
.portal-admin-activity-list li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 13px 0;
    border-bottom: 1px solid #edf0f5;
}

.portal-admin-task-list li:last-child,
.portal-admin-resolved-list li:last-child,
.portal-admin-activity-list li:last-child {
    border-bottom: 0;
}

.portal-admin-task-check,
.portal-admin-resolved-icon,
.portal-admin-activity-icon {
    width: 34px;
    height: 34px;
    background: #f3f5fa;
    color: #65738b;
}

.portal-admin-resolved-icon {
    background: #eaf8f1;
    color: #24835c;
}

.portal-admin-task-copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 4px;
}

.portal-admin-task-copy strong,
.portal-admin-task-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-admin-task-copy strong {
    color: var(--portal-ink);
    font-size: 13px;
    font-weight: 650;
}

.portal-admin-task-copy small,
.portal-admin-resolved-list time,
.portal-admin-activity-list time {
    color: var(--portal-muted);
    font-size: 11px;
}

.portal-admin-task-due {
    flex: 0 0 auto;
    color: var(--portal-muted);
    font-size: 11px;
}

.portal-admin-task-due.is-overdue {
    color: #bd4051;
    font-weight: 650;
}

.portal-admin-empty {
    margin: 0;
    padding: 22px 4px 6px;
    color: var(--portal-muted);
    font-size: 13px;
}

.portal-admin-activity-panel {
    margin-top: 20px;
}

.portal-admin-activity-panel .portal-panel-heading {
    margin-bottom: 3px;
}

.portal-admin-activity-icon {
    background: #eef3ff;
    color: #4565d2;
}

.portal-activity-internal {
    background: #fff4e3;
    color: #986412;
}

.portal-activity-status {
    background: #eff8f4;
    color: #27815c;
}

html[data-theme='dark'] .portal-icon-rose {
    background: #482d37;
    color: #f2aab5;
}

html[data-theme='dark'] .portal-admin-scope {
    border-color: #3a4c70;
    background: #263752;
    color: #b6c7ff;
}

html[data-theme='dark'] .portal-admin-panel .portal-panel-heading,
html[data-theme='dark'] .portal-admin-task-list li,
html[data-theme='dark'] .portal-admin-resolved-list li,
html[data-theme='dark'] .portal-admin-activity-list li {
    border-color: #30394b;
}

html[data-theme='dark'] .portal-admin-panel-icon,
html[data-theme='dark'] .portal-admin-task-check,
html[data-theme='dark'] .portal-admin-activity-icon {
    background: #263752;
    color: #a9bdff;
}

html[data-theme='dark'] .portal-admin-resolved-icon,
html[data-theme='dark'] .portal-activity-status {
    background: #203e35;
    color: #83d4af;
}

html[data-theme='dark'] .portal-activity-internal {
    background: #473b2a;
    color: #f0c477;
}

html[data-theme='dark'] .portal-admin-task-due.is-overdue {
    color: #f2aab5;
}

.portal-profile-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 24px 0;
}

.portal-profile-intro .portal-eyebrow {
    margin: 0 0 8px;
}

.portal-profile-intro h1 {
    margin: 0;
    color: var(--portal-ink);
    font-size: clamp(29px, 4vw, 38px);
    font-weight: 700;
    letter-spacing: -.035em;
}

.portal-profile-intro p:last-child {
    margin: 8px 0 0;
    color: var(--portal-muted);
}

.portal-profile-avatar,
.portal-profile-section-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    background: #eff3ff;
    color: #4268e8;
}

.portal-profile-avatar {
    width: 58px;
    height: 58px;
    font-size: 25px;
}

.portal-profile-panel {
    margin-top: 20px;
}

.portal-profile-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf0f5;
}

.portal-profile-section-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
}

.portal-profile-section-heading h2 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 19px;
    font-weight: 650;
}

.portal-profile-section-heading p {
    margin: 4px 0 0;
    color: var(--portal-muted);
    font-size: 13px;
}

.portal-profile-form {
    padding-top: 22px;
}

.portal-profile-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 19px 22px;
}

.portal-profile-field-wide {
    grid-column: 1 / -1;
}

.portal-profile-verified,
.portal-profile-unverified {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
}

.portal-profile-verified {
    color: #27815c !important;
}

.portal-profile-unverified {
    color: #a56a11 !important;
}

.portal-profile-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #edf0f5;
}

.portal-profile-account-card {
    margin-top: 20px;
}

.portal-profile-account-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 20px 0 0;
}

.portal-profile-account-details dt {
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 600;
}

.portal-profile-account-details dd {
    margin: 5px 0 0;
    color: var(--portal-ink);
    font-size: 14px;
    font-weight: 650;
}

html[data-theme='dark'] .portal-profile-avatar,
html[data-theme='dark'] .portal-profile-section-icon {
    background: #263752;
    color: #a9bdff;
}

html[data-theme='dark'] .portal-profile-section-heading {
    border-color: #30394b;
}

html[data-theme='dark'] .portal-profile-verified {
    color: #83d4af !important;
}

html[data-theme='dark'] .portal-profile-unverified {
    color: #f0c477 !important;
}

html[data-theme='dark'] .portal-profile-form-actions {
    border-color: #30394b;
}

@media (max-width: 640px) {
    .portal-dashboard .app-header.portal-header>.container-fluid {
        min-height: 60px;
        gap: 5px;
        padding-inline: 8px;
    }
    .portal-dashboard .app-header .portal-brand {
        gap: 7px;
    }
    .portal-dashboard .app-header .portal-brand-copy small {
        display: none;
    }
    .portal-dashboard .app-header .portal-brand-mark {
        width: auto;
        max-width: 120px;
        height: 35px;
        border-radius: 0;
    }
    .portal-dashboard .app-header .portal-nav {
        gap: 4px;
    }
    .portal-dashboard .app-header .portal-nav .portal-theme-toggle {
        width: 38px;
        min-height: 36px;
        gap: 0;
        padding-inline: 0;
        font-size: 0;
    }
    .portal-dashboard .app-header .portal-nav .portal-theme-toggle i {
        font-size: 15px;
    }
    .portal-dashboard .app-header .portal-nav .language-switcher button {
        min-width: 38px;
        min-height: 36px;
        padding-inline: 7px;
        font-size: 11px;
    }
    .portal-dashboard .app-header .portal-user-menu-trigger {
        padding-inline: 2px;
    }
    .portal-dashboard .portal-dashboard-main {
        padding-block: 1.5rem 2.5rem;
    }
    .portal-ticket-create-panel {
        padding: 21px 18px;
    }
    .portal-ticket-form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .portal-ticket-field-wide {
        grid-column: auto;
    }
    .portal-ticket-create-panel .portal-panel-heading h1 {
        font-size: 25px;
    }
    .portal-profile-intro {
        align-items: flex-start;
    }
    .portal-admin-stats,
    .portal-admin-panels {
        grid-template-columns: minmax(0, 1fr);
    }
    .portal-admin-ticket-panel {
        padding: 17px 14px;
    }
    .portal-admin-ticket-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .portal-admin-ticket-filters .portal-ticket-filter-submit {
        width: 100%;
    }
    .portal-admin-ticket-search {
        grid-column: 1 / -1;
    }
    .portal-admin-bulk-actions select {
        width: min(230px, 100%);
    }
    .portal-admin-ticket-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .portal-admin-bulk-actions {
        flex-wrap: wrap;
    }
    .portal-admin-bulk-actions>span {
        width: 100%;
        margin: 0;
    }
    .portal-admin-scope {
        font-size: 11px;
    }
    .portal-profile-panel,
    .portal-profile-account-card {
        padding: 21px 18px;
    }
    .portal-profile-field-grid,
    .portal-profile-account-details {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .portal-profile-field-wide {
        grid-column: auto;
    }
}

@media (max-width: 1180px) {
    .portal-admin-ticket-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .portal-admin-ticket-search {
        grid-column: span 2;
    }
}

@media (max-width: 780px) {
    .portal-admin-ticket-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .portal-admin-ticket-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 460px) {
    .portal-admin-ticket-filters {
        grid-template-columns: minmax(0, 1fr);
    }
    .portal-admin-ticket-filters .portal-ticket-filter-submit {
        width: 100%;
    }
    .portal-admin-ticket-search {
        grid-column: auto;
    }
    .portal-admin-bulk-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .portal-admin-bulk-actions select,
    .portal-admin-bulk-actions .portal-button {
        width: 100%;
    }
}

.portal-ticket-list-main {
    max-width: 1240px;
}

.portal-ticket-list-heading h1 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 29px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.portal-ticket-list-heading>.portal-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.portal-ticket-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px) minmax(150px, 190px) auto auto;
    align-items: end;
    gap: 10px;
    padding: 20px 0;
    border-bottom: 1px solid var(--portal-border);
}

.portal-ticket-filter-field {
    min-width: 0;
}

.portal-ticket-filter-label {
    display: block;
    margin-bottom: 5px;
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
}

.portal-ticket-filter-search {
    position: relative;
}

.portal-ticket-filter-search>i {
    position: absolute;
    z-index: 1;
    top: 50%;
    inset-inline-start: 14px;
    color: #78869c;
    transform: translateY(-50%);
}

.portal-ticket-filter-search .portal-ticket-control {
    padding-inline-start: 40px;
}

.portal-ticket-filter-submit {
    min-height: 45px;
    padding: 0 16px;
    border: 1px solid var(--portal-blue);
    border-radius: var(--portal-radius-control);
    background: var(--portal-blue);
    color: var(--portal-on-blue);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.portal-ticket-filter-submit:hover {
    border-color: var(--portal-blue-dark);
    background: var(--portal-blue-dark);
    color: var(--portal-on-blue);
}

.portal-ticket-filter-reset {
    color: var(--portal-muted);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.portal-ticket-filter-reset:hover {
    color: var(--portal-blue-dark);
    text-decoration: underline;
}

.portal-ticket-table-wrap {
    overflow-x: auto;
    margin-inline: -28px;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-control);
    background: var(--portal-surface);
}

.portal-ticket-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    color: var(--portal-ink);
    font-size: 13px;
    white-space: nowrap;
}

.portal-ticket-table th,
.portal-ticket-table td {
    padding: 14px 14px;
    border-bottom: 1px solid var(--portal-border);
    text-align: start;
    vertical-align: middle;
}

.portal-ticket-table th:first-child,
.portal-ticket-table td:first-child {
    padding-inline-start: 28px;
}

.portal-ticket-table th:last-child,
.portal-ticket-table td:last-child {
    padding-inline-end: 28px;
}

.portal-ticket-table th {
    background: var(--portal-surface-muted);
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.portal-ticket-table tbody tr:last-child td {
    border-bottom: 0;
}

.portal-ticket-table-number a,
.portal-ticket-table-subject a {
    color: var(--portal-blue-dark);
    font-weight: 650;
    text-decoration: none;
}

.portal-ticket-table-number a:hover,
.portal-ticket-table-subject a:hover {
    color: var(--portal-blue);
    text-decoration: underline;
}

.portal-ticket-table-subject {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-ticket-priority {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-pill);
    background: var(--portal-surface-muted);
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 650;
}

.portal-priority-high {
    border-color: #f0dfb6;
    background: #fff9e9;
    color: #86601a;
}

.portal-priority-urgent {
    border-color: #f0c6cd;
    background: #fff2f3;
    color: #a52c3d;
}

.portal-ticket-pagination {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
}

.portal-ticket-pagination .pagination {
    margin: 0;
}

.portal-ticket-pagination .page-link {
    color: #4268e8;
}

.portal-ticket-pagination .active .page-link {
    border-color: #4268e8;
    background: #4268e8;
    color: #fff;
}

.portal-ticket-list-empty {
    display: flex;
    min-height: 280px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 20px;
    text-align: center;
}

.portal-ticket-list-empty .portal-empty-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid #e2e8fb;
    border-radius: 17px;
    background: #f2f5ff;
    color: #5874d3;
    font-size: 22px;
}

.portal-ticket-list-empty h2 {
    margin: 16px 0 5px;
    color: var(--portal-ink);
    font-size: 19px;
    font-weight: 700;
}

.portal-ticket-list-empty p {
    max-width: 440px;
    margin: 0 0 17px;
    color: #6a7890;
    font-size: 14px;
}

.portal-ticket-list-empty .portal-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.portal-ticket-detail-main {
    max-width: 1080px;
}

.portal-admin-ticket-detail-main {
    max-width: 1440px;
}

.portal-ticket-detail-panel {
    padding: 30px;
}

.portal-ticket-detail-heading {
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--portal-border);
}

.portal-ticket-detail-panel .portal-panel-heading h1 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
}

.portal-ticket-detail-heading .portal-eyebrow {
    margin-bottom: 8px;
    color: #5470c8;
    font-size: 11px;
    letter-spacing: .06em;
}

.portal-ticket-detail-heading .portal-panel-subtitle {
    margin-top: 9px;
    font-size: 13px;
}

.portal-ticket-detail-heading .portal-ticket-status {
    flex: 0 0 auto;
    margin-top: 4px;
}

.portal-ticket-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 28px;
}

.portal-ticket-detail-grid>div {
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-control);
    background: var(--portal-surface-muted);
}

.portal-ticket-detail-grid dt {
    margin-bottom: 7px;
    color: var(--portal-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

html[lang='ar'] .portal-ticket-detail-grid dt {
    letter-spacing: 0;
    text-transform: none;
}

.portal-ticket-detail-grid dd {
    margin: 0;
    color: var(--portal-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.portal-admin-ticket-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr);
    gap: 28px;
    align-items: start;
}

.portal-admin-ticket-context,
.portal-admin-ticket-conversation-column {
    min-width: 0;
}

.portal-admin-ticket-context {
    grid-column: 2;
    position: sticky;
    top: 84px;
    padding: 20px;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-card);
    background: var(--portal-surface-muted);
}

.portal-admin-ticket-conversation-column {
    grid-column: 1;
}

.portal-admin-ticket-context .portal-ticket-detail-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.portal-admin-ticket-context .portal-ticket-detail-grid>div {
    padding: 10px 12px;
    border-color: var(--portal-border);
    border-radius: var(--portal-radius-control);
    background: var(--portal-surface);
}

.portal-admin-ticket-context form.row.g-3.mt-2>[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

.portal-admin-ticket-context form.row.g-3.mt-2 .portal-button {
    width: 100%;
}

.portal-ticket-detail-description {
    padding-top: 20px;
    border-top: 1px solid var(--portal-border);
}

.portal-ticket-detail-description h2 {
    margin: 0 0 10px;
    color: var(--portal-ink);
    font-size: 16px;
    font-weight: 700;
}

.portal-ticket-detail-description p {
    margin: 0;
    color: var(--portal-muted);
    font-size: 14px;
    line-height: 1.75;
    white-space: pre-wrap;
}

.portal-ticket-detail-note {
    align-items: center;
    border-color: #dce5ff;
    background: #f3f6ff;
    color: #415a9c;
}

.portal-ticket-copy,
.portal-ticket-copy:hover {
    color: inherit;
    text-decoration: none;
}

.portal-ticket-copy h3 {
    color: #3156c9;
}

.portal-ticket-copy:hover h3 {
    color: #2444a8;
    text-decoration: underline;
}

html[data-theme='dark'] .portal-ticket-filters,
html[data-theme='dark'] .portal-ticket-detail-description {
    border-color: #30394b;
}

html[data-theme='dark'] .portal-ticket-filter-search>i {
    color: #aab6cb;
}

html[data-theme='dark'] .portal-ticket-filter-reset {
    color: #bac6da;
}

html[data-theme='dark'] .portal-ticket-table {
    color: #c1ccdf;
}

html[data-theme='dark'] .portal-ticket-table-wrap {
    border-color: #30394b;
}

html[data-theme='dark'] .portal-ticket-table th,
html[data-theme='dark'] .portal-ticket-table td {
    border-color: #30394b;
}

html[data-theme='dark'] .portal-ticket-table th {
    background: #202c40;
    color: #aab6cb;
}

html[data-theme='dark'] .portal-ticket-table-number a,
html[data-theme='dark'] .portal-ticket-table-subject a,
html[data-theme='dark'] .portal-ticket-copy h3 {
    color: #a9bdff;
}

html[data-theme='dark'] .portal-ticket-priority {
    border-color: #46536a;
    background: #29364a;
    color: #c5cede;
}

html[data-theme='dark'] .portal-priority-high {
    border-color: #725a2d;
    background: #40351f;
    color: #f0d99e;
}

html[data-theme='dark'] .portal-priority-urgent {
    border-color: #74404a;
    background: #482d37;
    color: #f2b8c2;
}

html[data-theme='dark'] .portal-ticket-list-empty p,
html[data-theme='dark'] .portal-ticket-detail-grid dt,
html[data-theme='dark'] .portal-ticket-detail-description p {
    color: #aab6cb;
}

html[data-theme='dark'] .portal-ticket-list-empty .portal-empty-icon {
    border-color: #34476a;
    background: linear-gradient(145deg, #263752, #22314a);
    color: #a9bdff;
}

html[data-theme='dark'] .portal-ticket-detail-note {
    border-color: #34476a;
    background: #22375e;
    color: #d7e0f2;
}

@media (max-width: 900px) {
    .portal-ticket-filters {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .portal-ticket-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .portal-customer-tickets,
    .portal-ticket-detail-panel {
        padding: 21px 18px;
    }
    .portal-ticket-list-heading {
        align-items: flex-start;
    }
    .portal-ticket-list-heading h1 {
        font-size: 25px;
    }
    .portal-ticket-list-heading>.portal-button {
        padding: 10px 12px;
        font-size: 12px;
    }
    .portal-ticket-filters {
        grid-template-columns: minmax(0, 1fr);
    }
    .portal-ticket-search-field {
        grid-column: auto;
    }
    .portal-ticket-filters .portal-ticket-filter-submit {
        width: 100%;
    }
    .portal-ticket-filter-reset {
        padding: 7px;
    }
    .portal-ticket-table-wrap {
        margin-inline: -18px;
    }
    .portal-ticket-table th:first-child,
    .portal-ticket-table td:first-child {
        padding-inline-start: 18px;
    }
    .portal-ticket-table th:last-child,
    .portal-ticket-table td:last-child {
        padding-inline-end: 18px;
    }
    .portal-ticket-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.portal-ticket-conversation,
.portal-ticket-history,
.portal-ticket-reply {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid #edf0f5;
}

.portal-ticket-conversation {
    margin-top: 0;
}

.portal-ticket-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 19px;
}

.portal-ticket-section-heading .portal-eyebrow {
    margin: 0 0 4px;
    font-size: 10px;
}

.portal-ticket-section-heading h2 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 19px;
    font-weight: 700;
}

.portal-ticket-messages,
.portal-ticket-history-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-ticket-message {
    width: min(88%, 760px);
    margin: 0 0 12px;
    padding: 16px 18px;
    border: 1px solid #e6eaf1;
    border-radius: 4px 15px 15px;
    background: #f8f9fc;
    box-shadow: 0 3px 10px rgb(30 49 86 / 3%);
}

.portal-ticket-message-customer {
    margin-inline-start: auto;
    border-color: #dce5ff;
    border-radius: 15px 4px 15px 15px;
    background: #f2f5ff;
}

.portal-ticket-message:last-child {
    margin-bottom: 0;
}

.portal-ticket-message-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.portal-ticket-message-heading strong {
    color: #2b3a54;
    font-size: 13px;
    font-weight: 700;
}

.portal-ticket-message-visibility {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--portal-radius-pill);
    background: var(--portal-surface-muted);
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 650;
}

.portal-ticket-message-internal {
    border-color: #f0dfb6;
    background: #fff9e9;
}

.portal-ticket-message-internal .portal-ticket-message-visibility {
    background: #f3dfb2;
    color: #74500a;
}

.portal-ticket-internal-notice {
    margin: 0 0 10px;
    color: #74500a !important;
    font-size: 12px;
    font-weight: 600;
}

.portal-ticket-message-heading time,
.portal-ticket-history-list time {
    color: #7a879b;
    font-size: 11px;
    white-space: nowrap;
}

.portal-ticket-message>p {
    margin: 0;
    color: #46556e;
    font-size: 14px;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.portal-ticket-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #e9edf3;
    list-style: none;
}

.portal-ticket-attachments li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: #64728a;
    font-size: 12px;
}

.portal-ticket-attachments a {
    overflow: hidden;
    color: #3156c9;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-ticket-attachments small {
    color: #8490a2;
    white-space: nowrap;
}

.portal-ticket-history-list {
    display: grid;
    gap: 0;
    padding-inline-start: 4px;
}

.portal-ticket-history-list li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 48px;
    padding-bottom: 13px;
}

.portal-ticket-history-list li:not(:last-child)::after {
    position: absolute;
    inset-block: 14px 0;
    inset-inline-start: 4px;
    width: 1px;
    background: #dce3f0;
    content: "";
}

.portal-ticket-history-dot {
    position: relative;
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border: 2px solid #6684f0;
    border-radius: 50%;
    background: #fff;
}

.portal-ticket-history-list p {
    margin: 0 0 3px;
    color: #4a5870;
    font-size: 13px;
}

.portal-ticket-empty-conversation {
    margin: 0;
    color: #748198;
    font-size: 13px;
}

.portal-ticket-reply {
    padding: 24px;
    border: 1px solid #e6eaf1;
    border-radius: 15px;
    background: #fafbfe;
}

.portal-admin-ticket-conversation-column .portal-ticket-reply-form {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-card);
    background: var(--portal-surface-muted);
}

.portal-admin-ticket-conversation-column .portal-ticket-reply-form>div,
.portal-admin-ticket-conversation-column .portal-ticket-reply-form>.form-group {
    margin-bottom: 16px;
}

.portal-admin-ticket-conversation-column .portal-ticket-reply-form>.portal-button {
    margin-top: 4px;
}

.portal-ticket-reply .portal-ticket-section-heading {
    margin-bottom: 20px;
}

.portal-ticket-reply-attachments {
    margin-top: 17px;
}

.portal-ticket-reopen-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 26px;
    padding: 18px;
    border: 1px solid #dce5ff;
    border-radius: 12px;
    background: #f5f7ff;
}

.portal-ticket-reopen-section h2 {
    margin: 0 0 4px;
    color: var(--portal-ink);
    font-size: 15px;
    font-weight: 700;
}

.portal-ticket-reopen-section p {
    margin: 0;
    color: #68768e;
    font-size: 13px;
}

.portal-ticket-reopen-section .portal-button,
.portal-ticket-reply .portal-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
}

html[data-theme='dark'] .portal-ticket-conversation,
html[data-theme='dark'] .portal-ticket-history,
html[data-theme='dark'] .portal-ticket-detail-heading {
    border-color: #30394b;
}

html[data-theme='dark'] .portal-ticket-detail-grid>div {
    border-color: #303d53;
    background: #202c40;
}

html[data-theme='dark'] .portal-admin-ticket-context {
    border-color: var(--portal-border);
    background: var(--portal-surface-muted);
}

html[data-theme='dark'] .portal-admin-ticket-context .portal-ticket-detail-grid>div {
    border-color: var(--portal-border);
    background: #202c40;
}

html[data-theme='dark'] .portal-ticket-detail-heading .portal-eyebrow {
    color: #a9bdff;
}

html[data-theme='dark'] .portal-ticket-message {
    border-color: #344156;
    background: #172235;
}

html[data-theme='dark'] .portal-ticket-message-customer {
    border-color: #3c507a;
    background: #22314a;
}

html[data-theme='dark'] .portal-ticket-message-visibility {
    background: #29364a;
    color: #c1ccdf;
}

html[data-theme='dark'] .portal-ticket-message.portal-ticket-message-internal {
    border-color: #725a2d;
    background: #40351f;
}

html[data-theme='dark'] .portal-ticket-message-internal .portal-ticket-message-visibility {
    background: #594722;
    color: #f0d99e;
}

html[data-theme='dark'] .portal-ticket-internal-notice {
    color: #f0d99e !important;
}

html[data-theme='dark'] .portal-ticket-message-heading strong,
html[data-theme='dark'] .portal-ticket-reopen-section h2 {
    color: #e1e8f4;
}

html[data-theme='dark'] .portal-ticket-message>p,
html[data-theme='dark'] .portal-ticket-history-list p,
html[data-theme='dark'] .portal-ticket-reopen-section p {
    color: #c1ccdf;
}

html[data-theme='dark'] .portal-ticket-message-heading time,
html[data-theme='dark'] .portal-ticket-history-list time,
html[data-theme='dark'] .portal-ticket-attachments li,
html[data-theme='dark'] .portal-ticket-attachments small,
html[data-theme='dark'] .portal-ticket-empty-conversation {
    color: #aab6cb;
}

html[data-theme='dark'] .portal-ticket-attachments {
    border-color: #344156;
}

html[data-theme='dark'] .portal-ticket-attachments a {
    color: #a9bdff;
}

html[data-theme='dark'] .portal-ticket-history-dot {
    border-color: #8ea5ff;
    background: #1b2638;
}

html[data-theme='dark'] .portal-ticket-history-list li:not(:last-child)::after {
    background: #46536a;
}

html[data-theme='dark'] .portal-ticket-reopen-section {
    border-color: #34476a;
    background: #22314a;
}

html[data-theme='dark'] .portal-ticket-reply {
    border-color: #303d53;
    background: #172235;
}

html[data-theme='dark'] .portal-admin-ticket-conversation-column .portal-ticket-reply-form {
    border-color: var(--portal-border);
    background: #172235;
}

@media (max-width: 1100px) {
    .portal-admin-ticket-workspace {
        grid-template-columns: minmax(0, 1fr);
    }
    .portal-admin-ticket-conversation-column {
        grid-column: 1;
        grid-row: 1;
    }
    .portal-admin-ticket-context {
        grid-column: 1;
        grid-row: 2;
    }
    .portal-admin-ticket-context {
        position: static;
    }
}

@media (max-width: 600px) {
    .portal-ticket-detail-panel {
        padding: 21px 18px;
    }
    .portal-admin-ticket-context,
    .portal-admin-ticket-conversation-column .portal-ticket-reply-form {
        padding: 16px;
    }
    .portal-ticket-detail-heading {
        flex-direction: column;
        gap: 14px;
        padding-bottom: 18px;
    }
    .portal-ticket-detail-panel .portal-panel-heading h1 {
        font-size: 24px;
    }
    .portal-ticket-detail-grid {
        gap: 8px;
    }
    .portal-ticket-detail-grid>div {
        padding: 11px;
    }
    .portal-ticket-message {
        width: 100%;
        padding: 14px;
    }
    .portal-ticket-reply {
        padding: 16px;
    }
    .portal-ticket-reopen-section {
        align-items: flex-start;
        flex-direction: column;
    }
    .portal-ticket-message-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

.portal-rich-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 7px;
    border: 1px solid #d9e0eb;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: #f7f8fb;
}

.portal-rich-text-toolbar button {
    display: grid;
    width: 34px;
    height: 32px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #3e4d66;
    font-size: 13px;
}

.portal-rich-text-toolbar button:hover,
.portal-rich-text-toolbar button:focus-visible {
    border-color: #d5deef;
    background: #fff;
    outline: none;
}

.portal-rich-text-editor {
    min-height: 150px;
    padding: 12px 14px;
    overflow-wrap: anywhere;
    border: 1px solid #d9e0eb;
    border-radius: 0 0 9px 9px;
    background: #fff;
    color: #26334b;
    font-size: 14px;
    line-height: 1.7;
}

.portal-rich-text-editor:focus {
    border-color: #6684f0;
    box-shadow: 0 0 0 3px rgb(66 104 232 / 12%);
    outline: none;
}

.portal-rich-text-editor> :first-child {
    margin-top: 0;
}

.portal-rich-text-editor> :last-child {
    margin-bottom: 0;
}

.portal-rich-text-source {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.portal-rich-text-help {
    display: block;
    margin-top: 7px;
    color: #718097;
    font-size: 12px;
}

.portal-ticket-message-rich {
    color: #46556e;
    font-size: 14px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.portal-ticket-message-rich> :first-child {
    margin-top: 0;
}

.portal-ticket-message-rich> :last-child {
    margin-bottom: 0;
}

.portal-ticket-message-rich a {
    color: #3156c9;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.portal-rich-text-audience {
    margin: 0;
    padding: 0;
    border: 0;
}

.portal-rich-text-audience legend {
    margin-bottom: 5px;
    color: var(--portal-ink);
    font-size: 16px;
    font-weight: 700;
}

.portal-rich-text-audience>p {
    margin: 0 0 17px;
    color: #6a7890;
    font-size: 13px;
}

.portal-rich-text-audience-option {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 10px;
    padding: 14px;
    border: 1px solid #e2e7ef;
    border-radius: 10px;
    cursor: pointer;
}

.portal-rich-text-audience-option:has(input:checked) {
    border-color: #8ca3f4;
    background: #f5f7ff;
}

.portal-rich-text-audience-option input {
    margin-top: 4px;
    accent-color: #4268e8;
}

.portal-rich-text-audience-option strong,
.portal-rich-text-audience-option small {
    display: block;
}

.portal-rich-text-audience-option strong {
    color: #2b3a54;
    font-size: 13px;
}

.portal-rich-text-audience-option small {
    margin-top: 3px;
    color: #6a7890;
    font-size: 12px;
}

html[data-theme='dark'] .portal-rich-text-toolbar {
    border-color: #3a4961;
    background: #202c40;
}

html[data-theme='dark'] .portal-rich-text-toolbar button {
    color: #d3dced;
}

html[data-theme='dark'] .portal-rich-text-toolbar button:hover,
html[data-theme='dark'] .portal-rich-text-toolbar button:focus-visible {
    border-color: #46536a;
    background: #29364a;
}

html[data-theme='dark'] .portal-rich-text-editor {
    border-color: #3a4961;
    background: #141e2e;
    color: #e7edf8;
}

html[data-theme='dark'] .portal-rich-text-help,
html[data-theme='dark'] .portal-rich-text-audience>p,
html[data-theme='dark'] .portal-rich-text-audience-option small,
html[data-theme='dark'] .portal-ticket-message-rich {
    color: #aab6cb;
}

html[data-theme='dark'] .portal-ticket-message-rich a {
    color: #a9bdff;
}

html[data-theme='dark'] .portal-rich-text-audience-option {
    border-color: #39475d;
    background: #172235;
}

html[data-theme='dark'] .portal-rich-text-audience-option:has(input:checked) {
    border-color: #596eaa;
    background: #22314a;
}

html[data-theme='dark'] .portal-rich-text-audience-option strong {
    color: #e1e8f4;
}
.portal-notification-count {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    margin-inline-start: auto;
    place-items: center;
    padding-inline: 5px;
    border-radius: 999px;
    background: #d94343;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.portal-notification-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 18px 0 0;
    list-style: none;
}

.portal-notification-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e6eaf2;
    border-radius: 12px;
    background: #fff;
}

.portal-notification-item.is-unread {
    border-inline-start: 4px solid #4967cf;
    background: #f7f9ff;
}

.portal-notification-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    background: #f0f3ff;
    color: #4967cf;
}

.portal-notification-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    color: inherit;
    text-decoration: none;
}

.portal-notification-copy:hover { color: inherit; }
.portal-notification-copy strong { color: var(--portal-ink); }
.portal-notification-copy span,
.portal-notification-copy time { color: var(--portal-muted); font-size: 13px; }

.portal-notification-mark {
    border: 0;
    background: transparent;
    color: #4967cf;
    font-size: 13px;
    font-weight: 650;
}

html[data-theme='dark'] .portal-notification-item {
    border-color: #343c4b;
    background: #202633;
}

html[data-theme='dark'] .portal-notification-item.is-unread { background: #252e40; }

@media (max-width: 600px) {
    .portal-notification-item { align-items: flex-start; padding: 12px; }
    .portal-notification-mark { padding: 0; }
}