.customer-portal-page {
    background:
        radial-gradient(ellipse at 95% 0%, rgba(245, 158, 11, .07), transparent 28rem),
        #080d17;
    font-family: 'Vazirmatn', sans-serif;
}

.customer-portal-page [hidden] {
    display: none !important;
}

.customer-portal-header,
.customer-portal-brand,
.customer-portal-identity,
.customer-logout-button,
.customer-welcome-card,
.customer-project-card-top,
.customer-panel-heading,
.customer-project-progress-row,
.customer-project-meta,
.customer-project-actions,
.customer-ticket-header,
.customer-form-actions {
    display: flex;
    align-items: center;
}

.customer-portal-header {
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 1.25rem;
    background: rgba(12, 19, 31, .9);
}

.customer-portal-brand {
    gap: .7rem;
    color: #f8fafc;
    text-decoration: none;
}

.customer-portal-brand-mark,
.customer-welcome-mark,
.customer-portal-message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
}

.customer-portal-brand-mark {
    width: 2.75rem;
    height: 2.75rem;
    overflow: hidden;
    border: 1px solid rgba(251, 191, 36, .2);
    border-radius: .9rem;
    background: rgba(251, 191, 36, .08);
    font-size: 1.2rem;
}

.customer-portal-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.customer-portal-brand strong,
.customer-portal-brand small {
    display: block;
}

.customer-portal-brand strong {
    font-size: .95rem;
    font-weight: 900;
}

.customer-portal-brand small {
    margin-top: .15rem;
    color: #94a3b8;
    font-size: .62rem;
}

.customer-portal-identity {
    gap: .8rem;
    color: #cbd5e1;
    font-size: .72rem;
}

.customer-logout-button,
.customer-outline-button,
.customer-danger-button {
    justify-content: center;
    gap: .5rem;
    min-height: 2.55rem;
    padding: .55rem .85rem;
    border: 1px solid rgba(148, 163, 184, .17);
    border-radius: .8rem;
    background: #111a29;
    color: #cbd5e1;
    font-size: .68rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.customer-logout-button:hover,
.customer-outline-button:hover {
    border-color: rgba(251, 191, 36, .35);
    color: #fbbf24;
}

.customer-logout-button:active,
.customer-outline-button:active,
.customer-danger-button:active {
    transform: scale(.97);
}

.customer-welcome-card {
    min-height: 11rem;
    justify-content: space-between;
    gap: 1.5rem;
    overflow: hidden;
    padding: 1.5rem;
    border: 1px solid rgba(251, 191, 36, .16);
    border-radius: 1.5rem;
    background: linear-gradient(120deg, #111a29, #0d1523 70%);
}

.customer-eyebrow {
    color: #fbbf24;
    font-size: .66rem;
    font-weight: 800;
}

.customer-welcome-card h1 {
    margin: .5rem 0 0;
    font-size: clamp(1.25rem, 4vw, 1.8rem);
    font-weight: 900;
}

.customer-welcome-wave {
    display: inline-block;
    margin-inline-start: .15rem;
    animation: customer-wave 1.8s ease-in-out 1;
    transform-origin: 70% 75%;
}

@keyframes customer-wave {
    0%, 100% { transform: rotate(0); }
    20%, 60% { transform: rotate(14deg); }
    40%, 80% { transform: rotate(-8deg); }
}

.customer-welcome-card p,
.customer-panel-heading p {
    max-width: 39rem;
    margin: .45rem 0 0;
    color: #94a3b8;
    font-size: .72rem;
    line-height: 1.9;
}

.customer-welcome-mark {
    width: 5.5rem;
    height: 5.5rem;
    flex: 0 0 auto;
    border: 1px solid rgba(251, 191, 36, .18);
    border-radius: 1.5rem;
    background: rgba(251, 191, 36, .07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 32px rgba(0,0,0,.16);
    font-size: 2rem;
}

.customer-welcome-mark i {
    color: #fcd34d;
    filter: drop-shadow(0 4px 10px rgba(251,191,36,.28));
}

.customer-dashboard-nav {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
    margin: 1.5rem 0 .65rem;
    padding: .4rem;
    border: 1px solid var(--ui-border);
    border-radius: 1rem;
    background: #0b1220;
}

.customer-dashboard-nav::before {
    position: absolute;
    inset: .4rem auto .4rem .4rem;
    width: calc((100% - 2rem) / 4);
    border: 1px solid rgba(251, 191, 36, .12);
    border-radius: .7rem;
    background: linear-gradient(145deg, #1b2a40, #142034);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .04);
    content: "";
    transform: translateX(300%);
    transition: transform .42s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

.customer-dashboard-nav[data-active-view="newProject"]::before {
    transform: translateX(200%);
}

.customer-dashboard-nav[data-active-view="tickets"]::before {
    transform: translateX(100%);
}

.customer-dashboard-nav[data-active-view="profile"]::before {
    transform: translateX(0);
}

.customer-dashboard-nav button {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .55rem .45rem;
    border: 0;
    border-radius: .7rem;
    background: transparent;
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
    transition: color .24s ease, transform .2s ease;
}

.customer-dashboard-nav button.is-active {
    color: #fbbf24;
}

.customer-dashboard-nav button:active {
    transform: scale(.97);
}

.customer-profile-panel {
    display: grid;
    gap: 1.1rem;
}

.customer-profile-panel > .customer-panel-heading {
    margin-bottom: 0;
}

.customer-profile-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 7.5rem;
    overflow: hidden;
    isolation: isolate;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(251, 191, 36, .22);
    border-radius: 1.35rem;
    background:
        radial-gradient(ellipse at 8% 115%, rgba(251, 191, 36, .16), transparent 17rem),
        linear-gradient(118deg, rgba(21, 32, 49, .98), rgba(10, 17, 29, .96) 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 16px 38px rgba(0, 0, 0, .12);
}

.customer-profile-hero::after {
    position: absolute;
    z-index: -1;
    top: -4.5rem;
    left: 12%;
    width: 12rem;
    height: 12rem;
    border: 1px solid rgba(251, 191, 36, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 1.2rem rgba(251, 191, 36, .025), 0 0 0 2.4rem rgba(251, 191, 36, .018);
    content: "";
}

.customer-profile-avatar {
    display: grid;
    width: 4.35rem;
    height: 4.35rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(251, 191, 36, .36);
    border-radius: 1.4rem;
    background: linear-gradient(145deg, rgba(251, 191, 36, .26), rgba(245, 158, 11, .08));
    color: #fcd34d;
    font-size: 1.45rem;
    font-weight: 900;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.customer-profile-member-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-inline-start: auto;
    padding: .45rem .7rem;
    border: 1px solid rgba(251, 191, 36, .14);
    border-radius: 99px;
    background: rgba(251, 191, 36, .055);
    color: #fcd34d;
    font-size: .59rem;
    font-weight: 800;
    white-space: nowrap;
}

.customer-profile-member-label i {
    font-size: .58rem;
}

.customer-profile-identity {
    display: grid;
    min-width: 0;
    gap: .2rem;
}

.customer-profile-identity h3 {
    overflow: hidden;
    margin: 0;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 900;
    text-overflow: ellipsis;
}

.customer-profile-identity > p {
    overflow: hidden;
    margin: 0;
    color: #94a3b8;
    font-size: .7rem;
    text-align: right;
    text-overflow: ellipsis;
}

.customer-profile-verification {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: .35rem;
    margin-top: .2rem;
    padding: .22rem .55rem;
    border-radius: 99px;
    background: rgba(148, 163, 184, .1);
    color: #cbd5e1;
    font-size: .59rem;
    font-weight: 800;
}

.customer-profile-verification.is-verified {
    background: rgba(74, 222, 128, .1);
    color: #86efac;
}

.customer-profile-verification.is-unverified {
    background: rgba(251, 191, 36, .1);
    color: #fcd34d;
}

.customer-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.customer-profile-stats article {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .65rem;
    padding: .85rem;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(15, 23, 37, .8), rgba(8, 13, 23, .62));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    transition: transform .24s ease, border-color .24s ease, background-color .24s ease;
}

.customer-profile-stats article:hover {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, .23);
}

.customer-profile-stat-icon,
.customer-profile-card-icon {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(251, 191, 36, .16);
    border-radius: .8rem;
    background: rgba(251, 191, 36, .08);
    color: #fbbf24;
}

.customer-profile-stats article > div {
    display: grid;
    min-width: 0;
    gap: .08rem;
}

.customer-profile-stats strong {
    color: #f8fafc;
    font-size: .9rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.customer-profile-stats article > div > span {
    overflow: hidden;
    color: #94a3b8;
    font-size: .58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-profile-stats .customer-profile-joined-date {
    color: #e2e8f0;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: -.015em;
    white-space: nowrap;
}

.customer-profile-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(15rem, .85fr);
    align-items: stretch;
    gap: .8rem;
}

.customer-profile-card {
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 1.15rem;
    background: linear-gradient(150deg, rgba(15, 23, 37, .78), rgba(8, 13, 23, .62));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.customer-profile-card-heading {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
}

.customer-profile-card-heading h3 {
    margin: 0;
    color: #f8fafc;
    font-size: .78rem;
    font-weight: 900;
}

.customer-profile-card-heading p {
    margin: .15rem 0 0;
    color: #94a3b8;
    font-size: .62rem;
    line-height: 1.7;
}

.customer-profile-card .customer-field {
    margin: .65rem 0;
}

.customer-profile-card input[readonly] {
    color: #94a3b8;
    cursor: not-allowed;
}

.customer-profile-note {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .3rem 0 .8rem;
    color: #94a3b8;
    font-size: .6rem;
}

.customer-profile-note i {
    color: #fbbf24;
}

.customer-profile-security .customer-outline-button {
    width: 100%;
}

.customer-profile-security {
    display: flex;
    flex-direction: column;
}

.customer-profile-security-content {
    display: flex;
    flex: 1;
    align-items: center;
    gap: .75rem;
    margin: .1rem 0 1rem;
    padding: .85rem;
    border: 1px solid rgba(148, 163, 184, .08);
    border-radius: .9rem;
    background: rgba(3, 8, 17, .28);
}

.customer-profile-security-content p {
    margin: 0;
    color: #a8b4c5;
    font-size: .65rem;
    line-height: 1.8;
}

.customer-profile-security-mark {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(74, 222, 128, .14);
    border-radius: .8rem;
    background: rgba(74, 222, 128, .07);
    color: #86efac;
}

.customer-profile-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.customer-profile-shortcuts button {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .5rem;
    padding: .8rem;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: .9rem;
    background: rgba(8, 13, 23, .55);
    color: #cbd5e1;
    font: inherit;
    font-size: .62rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}

.customer-profile-shortcuts button > i:first-child {
    flex: 0 0 auto;
    color: #fbbf24;
}

.customer-profile-shortcuts button > span {
    flex: 1;
    text-align: right;
}

.customer-profile-shortcuts button > i:last-child {
    color: #64748b;
    font-size: .58rem;
}

.customer-profile-shortcuts button:hover {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, .32);
    background: rgba(251, 191, 36, .05);
    color: #f8fafc;
}

.customer-profile-shortcuts button:active {
    transform: scale(.98);
}

.customer-profile-logout {
    justify-self: start;
}

.customer-portal-notice,
.customer-form-message {
    margin: .8rem 0;
    color: #86efac;
    font-size: .72rem;
    line-height: 1.8;
}

.customer-portal-notice.is-error,
.customer-form-message.is-error {
    color: #fda4af;
}

.customer-portal-panel {
    min-height: 16rem;
    padding: 1.25rem;
    border: 1px solid var(--ui-border);
    border-radius: 1.35rem;
    background: rgba(15, 23, 42, .56);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .08);
    transition: border-color .28s ease, background-color .28s ease, box-shadow .28s ease;
}

.customer-portal-panel.customer-view-enter {
    animation: customer-view-enter .42s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes customer-view-enter {
    from { opacity: 0; transform: translateY(12px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

[data-customer-view="projects"].customer-portal-panel {
    margin-top: 1.25rem;
}

[data-customer-view="newProject"].customer-portal-panel,
[data-customer-view="tickets"].customer-portal-panel {
    margin-top: 1.25rem;
}

.customer-panel-heading {
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.customer-panel-heading h2 {
    margin: .3rem 0 0;
    font-size: 1.15rem;
    font-weight: 900;
}

.customer-project-list,
.customer-ticket-list {
    display: grid;
    gap: .85rem;
}

.customer-project-group {
    display: grid;
    gap: .65rem;
}

.customer-project-group-heading {
    margin: 0;
    color: #fcd34d;
    font-size: .78rem;
    font-weight: 900;
}

.customer-project-group-list {
    display: grid;
    gap: .75rem;
}

.customer-empty-state,
.customer-portal-message {
    padding: 2rem 1.25rem;
    border: 1px dashed rgba(148, 163, 184, .2);
    border-radius: 1rem;
    color: #94a3b8;
    font-size: .75rem;
    line-height: 1.9;
    text-align: center;
}

.customer-project-card,
.customer-ticket-card,
.customer-ticket-new {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 1.1rem;
    background: rgba(8, 13, 23, .56);
}

.customer-project-card {
    overflow: hidden;
    padding: 0;
    transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}

.customer-project-card:hover,
.customer-project-card[open] {
    border-color: rgba(251, 191, 36, .28);
    background: rgba(12, 19, 31, .92);
}

.customer-project-card:not([open]):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

.customer-project-card,
.customer-ticket-card {
    animation: customer-card-enter .38s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes customer-card-enter {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .customer-project-card {
        interpolate-size: allow-keywords;
    }

    .customer-project-card::details-content {
        block-size: 0;
        overflow: clip;
        transition:
            block-size .42s cubic-bezier(.22, 1, .36, 1),
            content-visibility .42s allow-discrete;
    }

    .customer-project-card[open]::details-content {
        block-size: auto;
    }
}

.customer-project-card-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 5.7rem;
    align-items: center;
    gap: .8rem;
    padding: .95rem 1rem;
    cursor: pointer;
    list-style: none;
    transition: background-color .24s ease;
}

.customer-project-card-summary:hover {
    background: rgba(255, 255, 255, .018);
}

.customer-project-card-summary::-webkit-details-marker {
    display: none;
}

.customer-project-card-summary::marker {
    content: "";
}

.customer-project-summary-copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: .18rem;
}

.customer-project-summary-copy > .customer-project-type {
    width: max-content;
    max-width: 100%;
    justify-self: start;
}

.customer-project-summary-title {
    overflow: hidden;
    color: #f8fafc;
    font-size: .85rem;
    font-weight: 900;
    line-height: 1.65;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-project-summary-date {
    color: #94a3b8;
    font-size: .65rem;
}

.customer-project-summary-progress {
    display: flex;
    min-width: 0;
    grid-column: 1 / -1;
    align-items: center;
    gap: .55rem;
}

.customer-project-summary-track {
    height: .3rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    border-radius: 99px;
    background: #263346;
}

.customer-project-summary-bar {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b, #fcd34d);
    box-shadow: 0 0 10px rgba(251, 191, 36, .3);
    transition: width .6s ease;
}

.customer-project-summary-percent {
    min-width: 2rem;
    color: #fcd34d;
    font-size: .6rem;
    font-weight: 900;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.customer-project-summary-chevron {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: .7rem;
    transition: transform .2s ease, color .2s ease;
}

.customer-project-card[open] .customer-project-summary-chevron {
    transform: rotate(180deg);
    color: #fbbf24;
}

.customer-project-card-content {
    display: grid;
    gap: .8rem;
    border-top: 1px solid rgba(148, 163, 184, .1);
    padding: 1rem;
}

.customer-project-card-content > .customer-project-card-top,
.customer-project-card-content > .customer-project-progress-row {
    margin: 0;
}

.customer-project-card-top,
.customer-ticket-header {
    justify-content: space-between;
    gap: .75rem;
}

.customer-project-title-group h3,
.customer-ticket-header h3 {
    margin: .35rem 0 0;
    font-size: .9rem;
    font-weight: 900;
    line-height: 1.7;
}

.customer-project-type,
.customer-project-status,
.customer-ticket-status {
    display: inline-flex;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: 99px;
    background: rgba(148, 163, 184, .09);
    color: #cbd5e1;
    font-size: .58rem;
    font-weight: 800;
}

.customer-project-status.is-pending {
    background: rgba(251, 191, 36, .1);
    color: #fcd34d;
}

.customer-project-status.is-approved,
.customer-project-status.is-in_progress,
.customer-ticket-status.is-replied {
    background: rgba(56, 189, 248, .1);
    color: #7dd3fc;
}

.customer-project-status.is-completed {
    background: rgba(74, 222, 128, .1);
    color: #86efac;
}

.customer-project-status.is-rejected,
.customer-ticket-status.is-closed {
    background: rgba(251, 113, 133, .1);
    color: #fda4af;
}

.customer-project-progress-row {
    margin: 1rem 0;
    padding: .8rem;
    border-radius: .9rem;
    background: #0b1220;
}

.customer-project-progress-copy {
    display: grid;
    width: 100%;
    gap: .45rem;
}

.customer-project-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.customer-project-progress-heading strong {
    color: #f8fafc;
    font-size: .74rem;
}

.customer-project-progress-heading > span {
    color: #fcd34d;
    font-size: .7rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.customer-project-progress-track {
    height: .45rem;
    overflow: hidden;
    border-radius: 99px;
    background: #263346;
}

.customer-project-progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b, #fcd34d);
    transition: width .6s ease;
}

.customer-project-progress-duration,
.customer-project-progress-deadline {
    color: #94a3b8;
    font-size: .64rem;
    line-height: 1.8;
}

.customer-project-progress-duration {
    color: #fcd34d;
}

.customer-project-meta {
    flex-wrap: wrap;
    gap: .45rem;
}

.customer-project-meta span {
    padding: .25rem .5rem;
    border-radius: .5rem;
    background: rgba(148, 163, 184, .07);
    color: #94a3b8;
    font-size: .58rem;
}

.customer-project-details {
    margin: .7rem 0 0;
    color: #cbd5e1;
    font-size: .68rem;
    line-height: 1.8;
    white-space: pre-wrap;
}

.customer-private-gallery {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    margin-top: .8rem;
}

.customer-private-image-gallery {
    display: grid;
    gap: .6rem;
    overflow: visible;
}

.customer-project-gallery-heading {
    color: #fcd34d;
    font-size: .72rem;
    font-weight: 900;
}

.customer-private-image-grid {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.customer-private-image-grid .customer-upload-preview {
    display: contents;
}

.customer-private-image-grid .customer-photo-item {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    min-width: 0;
    margin: 0;
}

.customer-private-gallery a,
.customer-private-gallery .customer-private-image-preview,
.customer-photo-item {
    display: block;
    width: 5rem;
    height: 4rem;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .15);
    border-radius: .7rem;
    background: #111a29;
}

.customer-photo-item { position: relative; }
.customer-photo-upload-progress {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(2, 6, 23, .58);
    color: #fff;
    pointer-events: none;
}
.customer-photo-upload-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(251, 191, 36, .58), rgba(251, 191, 36, .12));
    clip-path: inset(calc(100% - var(--upload-progress, 0%)) 0 0);
    transition: clip-path .18s ease-out;
}
.customer-photo-upload-progress strong {
    position: relative;
    z-index: 1;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 4px #020617;
}

.customer-private-image-item { position: relative; flex: 0 0 auto; }
.customer-private-image-item > .customer-private-image-preview {
    width: 7.5rem;
    height: 6rem;
    padding: 0;
    border: 0;
    overflow: hidden;
    border-radius: .7rem;
    background: transparent;
    cursor: zoom-in;
    transition: transform .2s ease, box-shadow .2s ease;
}
.customer-private-image-item > button:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}

.customer-private-gallery img,
.customer-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.customer-project-actions {
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.customer-add-photo {
    position: relative;
    cursor: pointer;
}

.customer-photo-action {
    display: flex;
    min-width: min(100%, 17rem);
    min-height: 4rem;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: .65rem 1rem;
    border: 1px solid rgba(251, 191, 36, .42);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 15% 50%, rgba(251, 191, 36, .18), transparent 3.2rem),
        linear-gradient(135deg, rgba(251, 191, 36, .12), rgba(15, 23, 42, .92) 72%);
    color: #f8fafc;
    text-align: center;
    box-shadow: 0 10px 28px rgba(245, 158, 11, .09), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.customer-photo-action-tile {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: 5 / 4;
    flex: 0 1 auto;
    flex-direction: column;
    gap: .35rem;
    padding: .5rem;
    border-color: rgba(251, 191, 36, .38);
    border-style: dashed;
    border-radius: .8rem;
    background: #171b20;
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.customer-photo-action-tile .customer-photo-action-icon {
    box-shadow: none;
}

.customer-photo-action-tile:hover {
    transform: none;
    border-color: rgba(251, 191, 36, .65);
    background: #20252b;
    box-shadow: none;
}

.customer-photo-action-tile .customer-photo-action-icon {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: .6rem;
    font-size: .78rem;
}

.customer-photo-action-tile .customer-photo-action-copy {
    width: 100%;
    gap: .08rem;
}

.customer-photo-action-tile .customer-photo-action-copy strong {
    font-size: .66rem;
}

.customer-photo-action-tile .customer-photo-action-copy small {
    font-size: .54rem;
}

.customer-photo-action:hover {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, .72);
    background:
        radial-gradient(circle at 15% 50%, rgba(251, 191, 36, .24), transparent 3.2rem),
        linear-gradient(135deg, rgba(251, 191, 36, .18), rgba(15, 23, 42, .92) 72%);
    color: #fff;
    box-shadow: 0 14px 32px rgba(245, 158, 11, .15), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.customer-photo-action-icon {
    display: inline-grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(251, 191, 36, .18);
    border-radius: .75rem;
    background: rgba(251, 191, 36, .1);
    color: #fbbf24;
    font-size: .95rem;
    box-shadow: 0 0 18px rgba(251, 191, 36, .12);
}

.customer-photo-action-copy {
    display: grid;
    gap: .12rem;
}

.customer-photo-action-copy strong {
    color: #f8fafc;
    font-size: .72rem;
    font-weight: 800;
}

.customer-photo-action-copy small {
    color: #94a3b8;
    font-size: .58rem;
    font-weight: 500;
}

.customer-photo-action:focus-within {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
}

.customer-add-photo input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.customer-small-status {
    flex-basis: 100%;
    color: #94a3b8;
    font-size: .66rem;
    line-height: 1.8;
}

.customer-project-image-error {
    align-self: center;
    color: #fda4af;
    font-size: .65rem;
}

.customer-danger-button {
    border-color: rgba(251, 113, 133, .2);
    background: rgba(251, 113, 133, .06);
    color: #fda4af;
}

.customer-project-form {
    position: relative;
    overflow: hidden;
    padding: 1.35rem;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 1.35rem;
    background:
        radial-gradient(ellipse at 100% 0, rgba(251, 191, 36, .045), transparent 22rem),
        linear-gradient(145deg, rgba(15, 23, 37, .96), rgba(8, 13, 23, .96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 20px 48px rgba(0, 0, 0, .16);
}

.customer-project-form::before {
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .75), transparent);
    content: "";
}

.customer-project-form-heading {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.15rem;
}

.customer-project-form-mark {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(251, 191, 36, .18);
    border-radius: .95rem;
    background: linear-gradient(145deg, rgba(251, 191, 36, .14), rgba(245, 158, 11, .045));
    color: #fbbf24;
    font-size: 1rem;
}

.customer-project-form-heading > div {
    display: grid;
    gap: .18rem;
}

.customer-project-form-heading strong {
    color: #f8fafc;
    font-size: .82rem;
    font-weight: 900;
}

.customer-project-form-heading p {
    margin: 0;
    color: #94a3b8;
    font-size: .64rem;
}

.customer-project-step-count {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-inline-start: auto;
    padding: .45rem .65rem;
    border: 1px solid rgba(148, 163, 184, .1);
    border-radius: 99px;
    background: rgba(3, 8, 17, .3);
    color: #94a3b8;
    font-size: .58rem;
    font-weight: 700;
    white-space: nowrap;
}

.customer-project-step-count i {
    color: #fbbf24;
}

.customer-form-progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
    margin-bottom: 1.35rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
}

.customer-form-progress span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .5rem;
    padding: .55rem .65rem;
    border: 1px solid rgba(148, 163, 184, .09);
    border-radius: .8rem;
    background: rgba(3, 8, 17, .26);
    color: #64748b;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}

.customer-form-progress span.is-active {
    border-color: rgba(251, 191, 36, .22);
    background: linear-gradient(110deg, rgba(251, 191, 36, .09), rgba(251, 191, 36, .025));
    color: #fcd34d;
}

.customer-form-progress span[aria-current="step"] {
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .055), 0 5px 16px rgba(0, 0, 0, .1);
    transform: translateY(-1px);
}

.customer-form-progress span > i {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .15);
    border-radius: 50%;
    background: rgba(148, 163, 184, .055);
    font-size: .62rem;
    font-style: normal;
    font-weight: 900;
}

.customer-form-progress span.is-active > i {
    border-color: rgba(251, 191, 36, .24);
    background: rgba(251, 191, 36, .1);
    color: #fbbf24;
}

.customer-form-progress span > b {
    overflow: hidden;
    font-size: .62rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-form-step {
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid rgba(148, 163, 184, .09);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(10, 17, 29, .66), rgba(8, 13, 23, .42));
}

.customer-form-step.customer-step-enter {
    animation: customer-step-enter .34s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes customer-step-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.customer-form-step[hidden] {
    display: none;
}

.customer-form-step legend {
    max-width: 100%;
    padding: 0 .35rem;
    color: #f8fafc;
    font-size: .94rem;
    font-weight: 900;
    line-height: 1.8;
}

.customer-step-hint,
.customer-style-heading span {
    margin: .25rem 0 .85rem;
    color: #94a3b8;
    font-size: .68rem;
    line-height: 1.8;
}

.customer-choice-grid,
.customer-style-grid,
.customer-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.customer-type-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-choice-card input,
.customer-style-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.customer-choice-card > span {
    position: relative;
    display: grid;
    min-height: 7.1rem;
    align-content: start;
    justify-items: start;
    gap: .32rem;
    padding: .85rem;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(18, 29, 46, .86), rgba(11, 18, 32, .82));
    cursor: pointer;
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), border-color .24s ease, background-color .24s ease, box-shadow .24s ease;
}

.customer-choice-card:hover > span,
.customer-style-choice:hover > span {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, .38);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}

.customer-choice-card i {
    display: grid;
    width: 2rem;
    height: 2rem;
    margin-bottom: .2rem;
    place-items: center;
    border: 1px solid rgba(251, 191, 36, .12);
    border-radius: .7rem;
    background: rgba(251, 191, 36, .065);
    color: #fbbf24;
    font-size: .8rem;
}

.customer-choice-card strong {
    color: #f8fafc;
    font-size: .73rem;
}

.customer-choice-card small {
    color: #94a3b8;
    font-size: .6rem;
}

.customer-choice-card input:checked + span,
.customer-style-choice input:checked + span {
    border-color: rgba(251, 191, 36, .58);
    background: linear-gradient(145deg, rgba(251, 191, 36, .1), rgba(245, 158, 11, .035));
    box-shadow: 0 0 0 2px rgba(251, 191, 36, .055), 0 10px 26px rgba(245, 158, 11, .07);
}

.customer-choice-card input:checked + span::after {
    position: absolute;
    top: .65rem;
    left: .65rem;
    display: grid;
    width: 1.2rem;
    height: 1.2rem;
    place-items: center;
    border-radius: 50%;
    background: #fbbf24;
    color: #111827;
    content: "✓";
    font-size: .65rem;
    font-weight: 900;
}

.customer-choice-card input:focus-visible + span,
.customer-style-choice input:focus-visible + span {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

.customer-field-error {
    min-height: .8rem;
    color: #fda4af;
    font-size: .62rem;
}

.customer-style-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
    margin-top: 1.25rem;
}

.customer-style-heading h3 {
    margin: 0;
    color: #f8fafc;
    font-size: .77rem;
    font-weight: 800;
}

.customer-style-heading span {
    margin: 0;
    font-size: .6rem;
}

.customer-style-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .65rem;
}

.customer-style-choice > span {
    position: relative;
    display: block;
    height: 6.1rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .15);
    border-radius: .9rem;
    background: #111a29;
    cursor: pointer;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .22s ease, box-shadow .22s ease;
}

.customer-style-choice img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}

.customer-style-choice:hover img,
.customer-style-choice input:checked + span img {
    transform: scale(1.045);
}

.customer-style-choice strong {
    position: absolute;
    inset: auto 0 0;
    padding: .45rem .3rem .35rem;
    background: linear-gradient(transparent, rgba(2, 6, 15, .9));
    color: #fff;
    font-size: .61rem;
    text-align: center;
}

.customer-style-choice .customer-expert-choice {
    display: grid;
    height: 100%;
    align-content: center;
    justify-items: center;
    gap: .5rem;
    background: #111a29;
    color: #fbbf24;
}

.customer-style-choice .customer-expert-choice i {
    font-size: 1.3rem;
}

.customer-style-choice .customer-expert-choice strong {
    position: static;
    padding: 0;
    background: transparent;
}

.customer-field-grid {
    gap: .2rem .9rem;
    margin: .55rem 0;
}

.customer-field {
    display: grid;
    gap: .4rem;
    margin: .7rem 0;
    color: #cbd5e1;
    font-size: .68rem;
    font-weight: 700;
}

.customer-field input,
.customer-field textarea,
.customer-field select,
.customer-ticket-reply textarea {
    width: 100%;
    min-width: 0;
    min-height: 2.8rem;
    padding: .65rem .8rem;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: .75rem;
    outline: 0;
    background: #080d17;
    color: #f8fafc;
    font: inherit;
    font-size: .72rem;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.customer-field input:focus,
.customer-field textarea:focus,
.customer-field select:focus,
.customer-ticket-reply textarea:focus {
    border-color: rgba(251, 191, 36, .7);
}

.customer-field input::placeholder,
.customer-field textarea::placeholder,
.customer-ticket-reply textarea::placeholder {
    color: #64748b;
}

.customer-field select:has(> option:first-child:checked) {
    color: #64748b;
}

.customer-field select option {
    color: #f8fafc;
}

.customer-field textarea {
    resize: vertical;
    line-height: 1.8;
}

.customer-upload-zone {
    display: grid;
    min-height: 11rem;
    align-content: center;
    justify-items: center;
    gap: .55rem;
    margin-top: .5rem;
    border: 1px dashed rgba(251, 191, 36, .3);
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 50% 20%, rgba(251, 191, 36, .08), transparent 8rem),
        rgba(251, 191, 36, .02);
    color: #fbbf24;
    text-align: center;
    cursor: pointer;
    transition: border-color .24s ease, background-color .24s ease, transform .24s ease;
}

.customer-upload-zone:hover {
    transform: translateY(-1px);
    border-color: rgba(251, 191, 36, .55);
    background-color: rgba(251, 191, 36, .045);
}

.customer-upload-zone input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.customer-upload-zone i {
    display: grid;
    width: 3.1rem;
    height: 3.1rem;
    place-items: center;
    border: 1px solid rgba(251, 191, 36, .14);
    border-radius: 1rem;
    background: rgba(251, 191, 36, .07);
    font-size: 1.1rem;
}

.customer-upload-zone strong {
    font-size: .75rem;
}

.customer-upload-zone span,
.customer-privacy-note,
.customer-upload-status {
    color: #94a3b8;
    font-size: .62rem;
}

.customer-photo-preview {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .75rem;
}

.customer-photo-item {
    position: relative;
    margin-bottom: .8rem;
}

.customer-upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    grid-column: 1 / -1;
    width: 100%;
}

.customer-photo-remove {
    position: absolute;
    z-index: 2;
    top: .25rem;
    right: .25rem;
    display: inline-grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(127, 29, 29, .92);
    color: #fff;
    font-size: .65rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.customer-photo-remove:hover { background: #dc2626; }
.customer-photo-remove:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }
.customer-photo-remove:disabled { opacity: .6; cursor: wait; }

.customer-image-preview-dialog {
    position: fixed;
    width: min(92vw, 780px);
    max-width: 780px;
    max-height: 90vh;
    overflow: visible;
    padding: 14px;
    border: 1px solid rgba(251, 191, 36, .25);
    border-radius: 22px;
    background: linear-gradient(145deg, #111a29, #080e1b);
    color: #f8fafc;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
}
.customer-image-preview-dialog[open] { animation: customer-image-dialog-in .24s cubic-bezier(.2, .8, .2, 1) both; }
.customer-image-preview-dialog::backdrop {
    background: rgba(2, 6, 23, .78);
    backdrop-filter: blur(5px);
    animation: customer-image-backdrop-in .2s ease both;
}
.customer-image-preview-dialog > img {
    display: block;
    width: 100%;
    max-height: calc(90vh - 28px);
    border-radius: 12px;
    object-fit: contain;
}
.customer-image-preview-close {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 8px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    cursor: pointer;
}
.customer-image-preview-close:hover { background: #334155; }
.customer-image-preview-delete {
    top: auto;
    right: auto;
    bottom: 22px;
    left: 22px;
    width: 40px;
    height: 40px;
    font-size: .9rem;
}
.customer-image-preview-delete[hidden] { display: none !important; }
@keyframes customer-image-dialog-in {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes customer-image-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.customer-photo-item span {
    position: absolute;
    inset: auto 0 -1rem;
    color: #94a3b8;
    font-size: .55rem;
    text-align: center;
}

.customer-upload-status.is-error {
    color: #fda4af;
}

.customer-privacy-note {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .8rem;
    padding: .65rem .75rem;
    border: 1px solid rgba(74, 222, 128, .1);
    border-radius: .75rem;
    background: rgba(74, 222, 128, .035);
}

.customer-privacy-note i {
    color: #86efac;
}

.customer-form-actions {
    justify-content: flex-end;
    gap: .7rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, .1);
}

.customer-form-actions [hidden] {
    display: none !important;
}

.customer-form-actions .customer-primary-button {
    min-width: 10.5rem;
}

.customer-form-actions .customer-outline-button {
    margin-inline-end: auto;
}

.customer-primary-button {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .65rem 1rem;
    border: 0;
    border-radius: .85rem;
    background: #fbbf24;
    color: #111827;
    font-size: .7rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(245, 158, 11, .12), inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.customer-primary-button:hover {
    transform: translateY(-1px);
    background: #fcd34d;
    box-shadow: 0 9px 22px rgba(245, 158, 11, .18), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.customer-primary-button:active {
    transform: scale(.98);
}

.customer-primary-button i {
    transition: transform .22s ease;
}

.customer-primary-button:not(:disabled):hover i {
    transform: translateX(-2px);
}

.customer-primary-button:disabled,
.customer-outline-button:disabled,
.customer-logout-button:disabled {
    cursor: wait;
    opacity: .55;
}

.customer-ticket-new h3 {
    margin: 0 0 .7rem;
    color: #f8fafc;
    font-size: .8rem;
}

.customer-ticket-new > button {
    width: 100%;
}

.customer-ticket-list {
    margin-top: 1rem;
}

.customer-ticket-card {
    display: grid;
    gap: .6rem;
    overflow: hidden;
    padding: 0;
    transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.customer-ticket-card:hover,
.customer-ticket-card[open] {
    border-color: rgba(251, 191, 36, .24);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

.customer-ticket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    cursor: pointer;
    list-style: none;
    transition: background-color .22s ease;
}

.customer-ticket-header:hover { background: rgba(255, 255, 255, .018); }
.customer-ticket-header::-webkit-details-marker { display: none; }
.customer-ticket-chevron { color: #94a3b8; font-size: .65rem; transition: transform .2s ease; }
.customer-ticket-card[open] .customer-ticket-chevron { transform: rotate(180deg); }
.customer-ticket-card[open] .customer-ticket-header { border-bottom: 1px solid rgba(148, 163, 184, .1); }
.customer-ticket-conversation { display: grid; gap: .6rem; padding: .8rem 1rem 1rem; }
.customer-ticket-unread { color: #fda4af; font-size: .65rem; font-weight: 900; }

@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .customer-ticket-card {
        interpolate-size: allow-keywords;
    }

    .customer-ticket-card::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size .38s cubic-bezier(.22, 1, .36, 1), content-visibility .38s allow-discrete;
    }

    .customer-ticket-card[open]::details-content {
        block-size: auto;
    }
}

.customer-notification-badge {
    display: inline-grid;
    min-width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 99px;
    background: #fbbf24;
    padding: 0 .35rem;
    color: #111827;
    font-size: .7rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, .14);
}

.customer-notification-badge[hidden] { display: none; }

.customer-bottom-nav button { position: relative; }
.customer-mobile-notification-badge { position: absolute; top: 1px; right: calc(50% - 1.45rem); min-width: 1.15rem; height: 1.15rem; font-size: .58rem; }

.customer-ticket-message {
    max-width: min(100%, 42rem);
    padding: .7rem .8rem;
    border-radius: .8rem;
    background: #121d2e;
}

.customer-ticket-message.is-customer {
    margin-right: auto;
    border: 1px solid rgba(251, 191, 36, .14);
}

.customer-ticket-message.is-admin {
    margin-left: auto;
    border: 1px solid rgba(56, 189, 248, .14);
}

.customer-ticket-message small,
.customer-ticket-message time {
    color: #94a3b8;
    font-size: .58rem;
}

.customer-ticket-message p {
    margin: .35rem 0;
    color: #e2e8f0;
    font-size: .7rem;
    line-height: 1.8;
    white-space: pre-wrap;
}

.customer-support-intro {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 0 0 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(56, 189, 248, .13);
    border-radius: 1rem;
    background:
        radial-gradient(ellipse at 0 50%, rgba(56, 189, 248, .09), transparent 17rem),
        linear-gradient(115deg, rgba(13, 25, 40, .96), rgba(9, 16, 28, .88));
}

.customer-support-intro-icon,
.customer-support-form-icon {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(56, 189, 248, .16);
    border-radius: .9rem;
    background: rgba(56, 189, 248, .08);
    color: #7dd3fc;
    font-size: 1rem;
}

.customer-support-intro > div {
    min-width: 0;
}

.customer-support-intro strong {
    color: #f1f5f9;
    font-size: .77rem;
    font-weight: 900;
}

.customer-support-intro p,
.customer-support-form-heading p,
.customer-support-list-heading p {
    margin: .2rem 0 0;
    color: #94a3b8;
    font-size: .64rem;
    line-height: 1.8;
}

.customer-support-private {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-inline-start: auto;
    padding: .4rem .6rem;
    border: 1px solid rgba(74, 222, 128, .12);
    border-radius: 99px;
    background: rgba(74, 222, 128, .055);
    color: #86efac;
    font-size: .58rem;
    font-weight: 800;
    white-space: nowrap;
}

.customer-ticket-new {
    padding: 1.25rem;
    border-color: rgba(148, 163, 184, .12);
    border-radius: 1.15rem;
    background: linear-gradient(145deg, rgba(15, 23, 37, .84), rgba(8, 13, 23, .72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 14px 34px rgba(0, 0, 0, .1);
}

.customer-support-form-heading {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .85rem;
}

.customer-support-form-icon {
    width: 2.45rem;
    height: 2.45rem;
    border-color: rgba(251, 191, 36, .15);
    background: rgba(251, 191, 36, .07);
    color: #fbbf24;
}

.customer-support-form-heading h3,
.customer-support-list-heading h3 {
    margin: 0;
    color: #f8fafc;
    font-size: .82rem;
    font-weight: 900;
}

.customer-support-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 .85rem;
}

.customer-support-fields .customer-field {
    margin: .5rem 0;
}

.customer-support-fields .customer-field > span {
    color: #64748b;
    font-size: .6rem;
    font-weight: 500;
}

.customer-support-message-field {
    grid-column: 1 / -1;
}

.customer-support-message-field textarea {
    min-height: 6.5rem;
}

.customer-support-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .35rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(148, 163, 184, .09);
}

.customer-support-form-footer > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #8492a6;
    font-size: .6rem;
}

.customer-support-form-footer > span i {
    color: #86efac;
}

.customer-support-form-footer .customer-primary-button {
    width: auto;
    min-width: 9rem;
    margin: 0;
}

.customer-support-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.6rem 0 .75rem;
}

.customer-support-list-heading > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #94a3b8;
    font-size: .62rem;
}

.customer-support-list-heading > span i {
    color: #fbbf24;
}

.customer-ticket-list {
    margin-top: 0;
}

.customer-ticket-list > .customer-empty-state {
    margin: 0;
    padding: 1.8rem 1rem;
    border-style: solid;
    border-color: rgba(148, 163, 184, .1);
    background: rgba(8, 13, 23, .4);
}

.customer-ticket-reply {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin-top: .4rem;
}

.customer-ticket-reply textarea {
    min-height: 2.6rem;
    resize: vertical;
}

.customer-ticket-header {
    min-height: 4.2rem;
    padding: .9rem 1.1rem;
}

.customer-ticket-heading {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

.customer-ticket-heading h3 {
    overflow: hidden;
    margin: 0;
    color: #e2e8f0;
    font-size: .75rem;
    text-overflow: ellipsis;
}

.customer-ticket-heading time {
    color: #718096;
    font-size: .57rem;
}

.customer-ticket-status.is-open {
    background: rgba(251, 191, 36, .09);
    color: #fcd34d;
}

.customer-ticket-status {
    flex: 0 0 auto;
}

.customer-ticket-conversation {
    gap: .75rem;
    padding: 1rem 1.1rem 1.1rem;
    background: rgba(3, 8, 17, .2);
}

.customer-ticket-message {
    padding: .8rem .9rem;
    border-radius: .95rem;
}

.customer-ticket-message.is-customer {
    border-bottom-right-radius: .3rem;
    background: linear-gradient(145deg, rgba(72, 52, 15, .35), rgba(18, 29, 46, .9));
}

.customer-ticket-message.is-admin {
    border-bottom-left-radius: .3rem;
    background: linear-gradient(145deg, rgba(11, 45, 64, .35), rgba(18, 29, 46, .9));
}

.customer-ticket-reply {
    padding-top: .75rem;
    border-top: 1px solid rgba(148, 163, 184, .1);
}

.customer-ticket-reply .customer-outline-button {
    min-height: 2.6rem;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .customer-support-intro {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: .85rem;
    }

    .customer-support-intro-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .customer-support-private {
        margin-inline-start: 3.25rem;
    }

    .customer-ticket-new {
        padding: .9rem;
    }

    .customer-support-fields {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .customer-support-message-field {
        grid-column: auto;
    }

    .customer-support-form-footer {
        align-items: stretch;
        flex-direction: column;
        gap: .7rem;
    }

    .customer-support-form-footer .customer-primary-button {
        width: 100%;
    }

    .customer-ticket-header {
        flex-wrap: wrap;
        gap: .55rem;
        padding: .8rem;
    }

    .customer-ticket-heading {
        flex: 1 1 65%;
    }

    .customer-ticket-conversation {
        padding: .8rem;
    }

    .customer-ticket-reply {
        align-items: stretch;
        flex-direction: column;
    }
}


.customer-portal-page {
    background:
        radial-gradient(ellipse at 88% -6%, rgba(212, 163, 88, .13), transparent 31rem),
        radial-gradient(ellipse at 0 55%, rgba(35, 68, 100, .1), transparent 29rem),
        repeating-linear-gradient(0deg, transparent 0 79px, rgba(188, 204, 223, .012) 80px),
        #080d17;
}

.customer-portal-header {
    position: relative;
    border-color: rgba(197, 211, 230, .15);
    background:
        linear-gradient(105deg, rgba(25, 37, 55, .92), rgba(12, 20, 33, .9)),
        #101827;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .19), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.customer-portal-header::after {
    position: absolute;
    inset: auto 1.2rem -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(227, 183, 111, .45), transparent);
    content: "";
    pointer-events: none;
}

.customer-welcome-card {
    min-height: 10.5rem;
    padding: 1.6rem 1.75rem;
    border-color: rgba(219, 181, 121, .27);
    background:
        radial-gradient(ellipse at 3% 110%, rgba(195, 144, 68, .22), transparent 23rem),
        radial-gradient(ellipse at 91% 4%, rgba(91, 119, 153, .16), transparent 19rem),
        linear-gradient(115deg, #1a293e, #111d2e 62%, #0e1827);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.customer-welcome-card::before {
    top: -9rem;
    left: 7%;
    width: 22rem;
    height: 22rem;
    border-color: rgba(236, 197, 132, .13);
    box-shadow: 0 0 0 2rem rgba(236, 197, 132, .027), 0 0 0 4rem rgba(236, 197, 132, .018);
}

.customer-welcome-mark {
    width: 5.3rem;
    height: 5.3rem;
    border-color: rgba(235, 195, 126, .24);
    border-radius: 1.65rem;
    background: linear-gradient(145deg, rgba(230, 184, 108, .2), rgba(230, 184, 108, .045));
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .09);
    font-size: 2.05rem;
}

.customer-dashboard-nav {
    border-color: rgba(171, 190, 215, .15);
    background: linear-gradient(110deg, rgba(15, 25, 40, .96), rgba(9, 16, 28, .94));
    box-shadow: 0 9px 26px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.customer-dashboard-nav::before {
    border-color: rgba(232, 191, 122, .22);
    background:
        radial-gradient(ellipse at 15% 0, rgba(240, 195, 122, .12), transparent 8rem),
        linear-gradient(145deg, #26364c, #1a293e);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.customer-dashboard-nav button i {
    color: #8999ad;
    transition: color .24s ease, transform .24s ease;
}

.customer-dashboard-nav button.is-active i {
    color: #e9bd75;
    transform: translateY(-1px);
}

.customer-portal-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(164, 183, 207, .15);
    background:
        radial-gradient(ellipse at 100% 0, rgba(218, 169, 87, .055), transparent 25rem),
        linear-gradient(145deg, rgba(18, 28, 43, .94), rgba(10, 16, 27, .92));
    box-shadow: 0 20px 52px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.customer-portal-panel::before {
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(221, 177, 105, .42), transparent);
    content: "";
    pointer-events: none;
}

.customer-panel-heading {
    padding-bottom: 1rem;
    border-bottom-color: rgba(159, 179, 205, .12);
}

.customer-panel-heading h2 {
    position: relative;
    width: fit-content;
    padding-inline-start: .8rem;
}

.customer-panel-heading h2::before {
    position: absolute;
    inset-block: .18rem;
    right: 0;
    width: 2px;
    border-radius: 99px;
    background: linear-gradient(#f0ca88, rgba(217, 165, 74, .12));
    content: "";
}

.customer-panel-heading p {
    color: #a5b2c3;
}

.customer-project-form {
    padding: 1.3rem 1.4rem;
    border-color: rgba(177, 194, 217, .17);
    background:
        repeating-linear-gradient(135deg, transparent 0 17px, rgba(210, 225, 244, .012) 18px 19px, transparent 20px 36px),
        radial-gradient(ellipse at 100% 0, rgba(215, 165, 82, .1), transparent 23rem),
        linear-gradient(145deg, rgba(21, 33, 50, .98), rgba(11, 19, 31, .97));
    box-shadow: 0 19px 46px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.customer-project-form-heading {
    position: relative;
    padding-bottom: 1.1rem;
}

.customer-project-form-heading::after {
    position: absolute;
    inset: auto 0 -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(162, 181, 205, .15), transparent);
    content: "";
}

.customer-project-form-mark {
    width: 3rem;
    height: 3rem;
    border-color: rgba(229, 188, 119, .25);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 30% 20%, rgba(250, 213, 153, .14), transparent 65%),
        linear-gradient(145deg, rgba(204, 151, 72, .17), rgba(204, 151, 72, .045));
    box-shadow: 0 8px 21px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 1.08rem;
}

.customer-project-form-heading strong {
    color: #fff9ed;
    font-size: .9rem;
}

.customer-project-form-heading p {
    color: #aeb9c8;
    font-size: .66rem;
}

.customer-project-step-count {
    padding: .46rem .72rem;
    border-color: rgba(183, 199, 220, .14);
    background: linear-gradient(145deg, rgba(7, 13, 22, .53), rgba(14, 22, 35, .45));
    color: #bec7d3;
}

.customer-form-progress {
    position: relative;
    gap: .5rem;
    padding-block: 1rem;
}

.customer-form-progress span {
    min-height: 2.75rem;
    padding-inline: .72rem;
    border-color: rgba(174, 192, 215, .12);
    border-radius: .88rem;
    background: linear-gradient(145deg, rgba(8, 14, 23, .54), rgba(12, 20, 32, .44));
}

.customer-form-progress span > i {
    width: 1.8rem;
    height: 1.8rem;
    border-color: rgba(173, 190, 212, .17);
    background: linear-gradient(145deg, rgba(38, 52, 71, .7), rgba(19, 30, 45, .7));
    color: #aebacc;
}

.customer-form-progress span > b {
    color: #9eacbf;
    font-size: .65rem;
}

.customer-form-progress span.is-active > b {
    color: #efd09b;
}

.customer-form-progress span[aria-current="step"] {
    border-color: rgba(228, 184, 111, .3);
    background:
        radial-gradient(ellipse at 0 0, rgba(222, 168, 82, .12), transparent 8rem),
        linear-gradient(145deg, rgba(38, 45, 54, .83), rgba(23, 31, 43, .88));
    box-shadow: 0 7px 18px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.customer-form-progress span[aria-current="step"] > i {
    border-color: rgba(232, 192, 128, .3);
    background: linear-gradient(145deg, rgba(222, 168, 82, .2), rgba(222, 168, 82, .09));
    color: #f2cc8e;
}

.customer-form-step legend {
    font-size: 1.04rem;
    letter-spacing: -.018em;
}

.customer-step-hint {
    margin-top: .45rem;
    margin-bottom: 1rem;
    color: #a9b6c7;
}

.customer-type-grid {
    gap: .72rem;
}

.customer-choice-card > span {
    min-height: 7.5rem;
    gap: .42rem;
    padding: 1rem;
    border-color: rgba(163, 183, 208, .16);
    border-radius: 1.05rem;
    background:
        radial-gradient(ellipse at 0 0, rgba(88, 118, 153, .1), transparent 11rem),
        linear-gradient(145deg, rgba(25, 39, 58, .92), rgba(13, 22, 36, .96));
    box-shadow: 0 8px 20px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.customer-choice-card i {
    width: 2.45rem;
    height: 2.45rem;
    border-color: rgba(232, 190, 119, .2);
    border-radius: .88rem;
    background: linear-gradient(145deg, rgba(220, 169, 87, .18), rgba(220, 169, 87, .06));
    color: #edc47e;
    font-size: .88rem;
}

.customer-choice-card strong {
    color: #fffaf0;
    font-size: .8rem;
}

.customer-choice-card small {
    color: #aab7c8;
}

.customer-choice-card input:checked + span {
    border-color: rgba(234, 191, 120, .68);
    background:
        radial-gradient(ellipse at 0 0, rgba(214, 161, 78, .18), transparent 12rem),
        linear-gradient(145deg, rgba(39, 43, 48, .96), rgba(20, 28, 39, .98));
    box-shadow: 0 0 0 2px rgba(224, 174, 94, .09), 0 13px 28px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.customer-choice-card input:checked + span i {
    border-color: rgba(241, 202, 138, .35);
    background: linear-gradient(145deg, rgba(222, 168, 82, .27), rgba(222, 168, 82, .12));
}

.customer-style-heading {
    margin-top: 1.45rem;
    padding-top: 1.1rem;
}

.customer-style-heading h3 {
    font-size: .86rem;
    color: #f7f4ed;
}

.customer-style-grid {
    gap: .72rem;
}

.customer-style-choice > span {
    height: 7.2rem;
    border-color: rgba(170, 188, 211, .19);
    border-radius: .92rem;
    box-shadow: 0 9px 22px rgba(0, 0, 0, .18);
}

.customer-style-choice img {
    filter: saturate(.88) brightness(.78);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}

.customer-style-choice strong {
    padding: .7rem .35rem .5rem;
    font-size: .68rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .75);
}

.customer-style-choice:hover > span {
    transform: translateY(-3px);
    border-color: rgba(235, 193, 126, .48);
    box-shadow: 0 14px 27px rgba(0, 0, 0, .26);
}

.customer-style-choice:hover img,
.customer-style-choice input:checked + span img {
    filter: saturate(1.08) brightness(.99);
}

.customer-style-choice input:checked + span {
    border-color: rgba(241, 199, 129, .82);
    box-shadow: 0 0 0 2px rgba(225, 174, 93, .18), 0 14px 28px rgba(0, 0, 0, .28);
}

.customer-style-choice .customer-expert-choice {
    background:
        radial-gradient(circle at 50% 20%, rgba(234, 188, 109, .16), transparent 5rem),
        linear-gradient(145deg, #1c2a3d, #101a29);
}

.customer-style-choice .customer-expert-choice i {
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    border: 1px solid rgba(232, 190, 119, .2);
    border-radius: .8rem;
    background: rgba(220, 169, 87, .1);
}

.customer-field input,
.customer-field textarea,
.customer-field select {
    min-height: 3rem;
    border-color: rgba(165, 184, 207, .17);
    border-radius: .82rem;
    background:
        linear-gradient(145deg, rgba(5, 11, 20, .84), rgba(12, 20, 32, .82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

.customer-field input:focus,
.customer-field textarea:focus,
.customer-field select:focus {
    border-color: rgba(230, 186, 111, .68);
    box-shadow: 0 0 0 3px rgba(220, 169, 87, .09), inset 0 1px 0 rgba(255, 255, 255, .02);
}

.customer-form-actions {
    padding-top: 1.1rem;
    border-top-color: rgba(166, 184, 206, .14);
}

.customer-form-actions .customer-primary-button {
    min-height: 3rem;
    border-radius: .88rem;
    letter-spacing: .005em;
}

.customer-upload-zone {
    min-height: 12rem;
    border-color: rgba(227, 184, 111, .43);
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 50% 15%, rgba(223, 171, 88, .14), transparent 9rem),
        repeating-linear-gradient(135deg, transparent 0 16px, rgba(204, 219, 238, .018) 17px 18px, transparent 19px 34px),
        linear-gradient(145deg, rgba(22, 34, 51, .78), rgba(9, 16, 27, .74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.customer-upload-zone i {
    width: 3.8rem;
    height: 3.8rem;
    border-color: rgba(234, 192, 127, .28);
    border-radius: 1.15rem;
    background: linear-gradient(145deg, rgba(222, 168, 82, .2), rgba(222, 168, 82, .07));
    color: #f0c985;
    font-size: 1.2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .17), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.customer-portal-panel[data-customer-view="projects"] .customer-project-group-heading {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #edc57f;
}

.customer-portal-panel[data-customer-view="projects"] .customer-project-group-heading::before {
    width: .35rem;
    height: .95rem;
    border-radius: 99px;
    background: linear-gradient(#f1cd91, rgba(213, 160, 78, .3));
    box-shadow: 0 0 12px rgba(217, 165, 74, .16);
    content: "";
}

.customer-project-card {
    border-color: rgba(166, 185, 209, .16);
    border-radius: 1rem;
    background:
        radial-gradient(ellipse at 100% 0, rgba(214, 164, 83, .045), transparent 15rem),
        linear-gradient(145deg, rgba(20, 31, 47, .92), rgba(10, 17, 28, .92));
    box-shadow: 0 10px 25px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.customer-project-card:hover,
.customer-project-card[open] {
    border-color: rgba(228, 184, 109, .32);
    background:
        radial-gradient(ellipse at 100% 0, rgba(214, 164, 83, .075), transparent 17rem),
        linear-gradient(145deg, rgba(24, 36, 53, .96), rgba(11, 18, 30, .96));
}

.customer-empty-state {
    border-style: solid;
    border-color: rgba(165, 183, 205, .13);
    background:
        radial-gradient(ellipse at 50% 0, rgba(217, 165, 74, .06), transparent 15rem),
        rgba(9, 16, 27, .52);
}

.customer-profile-hero {
    padding: 1.2rem 1.35rem;
    border-color: rgba(220, 182, 121, .24);
    border-radius: 1.25rem;
    background:
        radial-gradient(ellipse at 5% 130%, rgba(203, 150, 69, .18), transparent 18rem),
        radial-gradient(ellipse at 90% 0, rgba(76, 101, 132, .11), transparent 17rem),
        linear-gradient(115deg, rgba(25, 38, 56, .95), rgba(11, 19, 31, .93));
    box-shadow: 0 15px 35px rgba(0, 0, 0, .17), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.customer-profile-avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 28% 20%, rgba(255, 228, 173, .2), transparent 65%),
        linear-gradient(145deg, rgba(223, 171, 88, .26), rgba(177, 124, 50, .09));
    color: #f1ce93;
}

.customer-profile-stats {
    gap: .6rem;
    padding: .3rem 0;
    border: 0;
}

.customer-profile-stats article {
    min-height: 4.75rem;
    padding: .72rem .8rem;
    border-color: rgba(163, 181, 204, .13);
    border-radius: .92rem;
    background:
        radial-gradient(ellipse at 0 0, rgba(217, 165, 74, .06), transparent 8rem),
        linear-gradient(145deg, rgba(19, 30, 46, .84), rgba(10, 17, 28, .78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .028);
}

.customer-profile-stats article + article {
    border-inline-start: 1px solid rgba(163, 181, 204, .13);
}

.customer-profile-stat-icon,
.customer-profile-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(228, 184, 109, .18);
    border-radius: .82rem;
    background: linear-gradient(145deg, rgba(217, 165, 74, .14), rgba(217, 165, 74, .045));
    color: #e9bd75;
}

.customer-profile-card {
    padding: 1.15rem;
    border-color: rgba(163, 181, 204, .14);
    border-radius: 1rem;
    background:
        radial-gradient(ellipse at 100% 0, rgba(217, 165, 74, .04), transparent 15rem),
        linear-gradient(145deg, rgba(18, 29, 44, .86), rgba(9, 15, 26, .8));
    box-shadow: 0 10px 25px rgba(0, 0, 0, .11), inset 0 1px 0 rgba(255, 255, 255, .028);
}

.customer-profile-shortcuts button {
    border-color: rgba(161, 179, 201, .14);
    border-radius: .82rem;
    background: linear-gradient(145deg, rgba(20, 31, 47, .82), rgba(10, 17, 28, .8));
}

.customer-profile-shortcuts button > i:first-child {
    display: grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border: 1px solid rgba(228, 184, 109, .14);
    border-radius: .62rem;
    background: rgba(217, 165, 74, .08);
    color: #e8bb72;
}

.customer-support-intro {
    border-color: rgba(106, 185, 211, .19);
    border-radius: 1rem;
    background:
        radial-gradient(ellipse at 3% 50%, rgba(56, 189, 248, .1), transparent 15rem),
        linear-gradient(115deg, rgba(15, 31, 47, .9), rgba(10, 17, 29, .82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.customer-ticket-new {
    border-color: rgba(165, 183, 205, .16);
    border-radius: 1.1rem;
    background:
        radial-gradient(ellipse at 100% 0, rgba(217, 165, 74, .065), transparent 19rem),
        linear-gradient(145deg, rgba(20, 31, 47, .91), rgba(10, 17, 28, .88));
    box-shadow: 0 15px 34px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.customer-ticket-card {
    border-color: rgba(163, 181, 204, .14);
    border-radius: .92rem;
    background: linear-gradient(145deg, rgba(18, 29, 44, .88), rgba(9, 15, 26, .82));
}

@media (max-width: 600px) {
    .customer-welcome-card {
        min-height: 8.7rem;
        padding: 1rem;
        border-radius: 1.15rem;
    }

    .customer-welcome-mark {
        width: 3.65rem;
        height: 3.65rem;
        border-radius: 1.1rem;
    }

    .customer-portal-panel {
        padding: 1rem .82rem 1.3rem;
        border-radius: 1.08rem;
    }

    .customer-project-form {
        padding: .82rem;
        border-radius: .95rem;
    }

    .customer-project-form-mark {
        width: 2.45rem;
        height: 2.45rem;
        border-radius: .8rem;
    }

    .customer-form-progress {
        gap: .25rem;
        padding-block: .75rem;
    }

    .customer-form-progress span {
        min-height: 2.4rem;
        gap: .28rem;
        padding-inline: .14rem;
        border-radius: .65rem;
    }

    .customer-form-progress span > i {
        width: 1.35rem;
        height: 1.35rem;
        font-size: .55rem;
    }

    .customer-form-progress span > b {
        font-size: .47rem;
    }

    .customer-choice-card > span {
        min-height: 6.1rem;
        padding: .68rem;
        border-radius: .82rem;
    }

    .customer-style-choice > span {
        height: 5rem;
        border-radius: .75rem;
    }

    .customer-profile-hero {
        padding: .86rem;
        border-radius: .95rem;
    }

    .customer-profile-avatar {
        width: 3.6rem;
        height: 3.6rem;
        border-radius: 1rem;
    }

    .customer-profile-stats article {
        min-height: 4.4rem;
        padding: .58rem .25rem;
        border-radius: .72rem;
    }

    .customer-profile-stat-icon {
        width: 2.2rem;
        height: 2.2rem;
    }

    .customer-profile-card {
        padding: .88rem;
        border-radius: .85rem;
    }

    .customer-ticket-new {
        padding: .86rem;
        border-radius: .88rem;
    }
}



.customer-portal-message {
    max-width: 34rem;
    margin: 10vh auto 0;
    border-style: solid;
    background: rgba(15, 23, 42, .6);
}

.customer-portal-message h1 {
    margin: .8rem 0 .3rem;
    color: #f8fafc;
    font-size: 1.2rem;
    font-weight: 900;
}

.customer-portal-message p {
    margin: .5rem 0 1rem;
}

.customer-access-back {
    display: block;
    margin-top: .9rem;
    color: #94a3b8;
    font-size: .68rem;
    text-decoration: none;
}

.customer-portal-message-icon {
    font-size: 1.7rem;
}

.customer-portal-spinner {
    display: inline-block;
    width: 1.7rem;
    height: 1.7rem;
    border: 2px solid rgba(251, 191, 36, .2);
    border-top-color: #fbbf24;
    border-radius: 50%;
    animation: customer-spin .8s linear infinite;
}

@keyframes customer-spin {
    to { transform: rotate(360deg); }
}

@media (min-width: 768px) {
    .customer-project-group-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .customer-project-group,
    .customer-project-group-list > .customer-empty-state {
        grid-column: 1 / -1;
    }
    .customer-project-form,
    .customer-ticket-new {
        padding: 1.5rem;
    }
}

@media (max-width: 520px) {
    .customer-welcome-card + .customer-dashboard-nav + .dashboard-updated-row {
        margin-top: .75rem;
    }
    .customer-welcome-card {
        min-height: 9rem;
        padding: 1rem;
    }
    .customer-welcome-mark {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 1rem;
        font-size: 1.4rem;
    }
    .customer-welcome-card p {
        font-size: .64rem;
    }
    .customer-portal-panel {
        padding: .85rem;
    }
    .customer-project-form {
        padding: .85rem;
        border-radius: 1.05rem;
    }
    .customer-project-form-heading {
        gap: .6rem;
        margin-bottom: .9rem;
    }
    .customer-project-form-mark {
        width: 2.45rem;
        height: 2.45rem;
    }
    .customer-project-form-heading strong {
        font-size: .72rem;
    }
    .customer-project-form-heading p {
        font-size: .58rem;
        line-height: 1.6;
    }
    .customer-project-step-count {
        padding: .35rem .45rem;
        font-size: .5rem;
    }
    .customer-form-progress {
        gap: .3rem;
        margin-bottom: 1rem;
        padding-bottom: .85rem;
    }
    .customer-form-progress span {
        justify-content: center;
        gap: .3rem;
        padding: .4rem .25rem;
        border-radius: .65rem;
    }
    .customer-form-progress span > i {
        width: 1.3rem;
        height: 1.3rem;
        font-size: .56rem;
    }
    .customer-form-progress span > b {
        font-size: .52rem;
    }
    .customer-form-step {
        padding: .8rem;
        border-radius: .85rem;
    }
    .customer-form-step legend {
        font-size: .82rem;
    }
    .customer-step-hint {
        font-size: .62rem;
    }
    .customer-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .customer-choice-card > span {
        min-height: 6.2rem;
        padding: .7rem;
    }
    .customer-style-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .45rem;
    }
    .customer-style-choice > span {
        height: 4.6rem;
    }
    .customer-form-actions {
        margin-top: .8rem;
        padding-top: .8rem;
    }
    .customer-form-actions .customer-primary-button,
    .customer-form-actions .customer-outline-button {
        min-width: 0;
        flex: 1;
        padding-inline: .65rem;
        font-size: .64rem;
    }
    .customer-dashboard-nav button {
        flex-direction: column;
        gap: .25rem;
        font-size: .58rem;
    }
    .customer-profile-hero { gap: .75rem; min-height: 0; padding: .9rem; }
    .customer-profile-avatar { width: 3.5rem; height: 3.5rem; border-radius: 1.05rem; }
    .customer-profile-member-label { position: absolute; top: .65rem; left: .65rem; gap: .3rem; padding: .32rem .5rem; font-size: .52rem; }
    .customer-profile-identity { padding-top: .5rem; }
    .customer-profile-stats { gap: .4rem; }
    .customer-profile-stats article { flex-direction: column; justify-content: center; gap: .35rem; padding: .65rem .35rem; text-align: center; }
    .customer-profile-stats article > div { justify-items: center; }
    .customer-profile-stats article > div > span { font-size: .54rem; }
    .customer-profile-stats .customer-profile-joined-date { font-size: .62rem; }
    .customer-profile-settings-grid { grid-template-columns: 1fr; }
    .customer-profile-shortcuts { grid-template-columns: 1fr; }
    .customer-profile-shortcuts button { min-height: 2.8rem; }
    .customer-project-card {
        padding: 0;
    }
    .customer-project-card[open] {
        position: relative;
        left: 14px;
        width: calc(100% + 30px);
        margin-inline: 0;
        border-radius: 1rem;
    }
    .customer-project-card-summary { min-height: 5.25rem; gap: .55rem; padding: .8rem; }
    .customer-project-summary-title { font-size: .78rem; }
    .customer-project-summary-date { font-size: .61rem; }
    .customer-project-card-content { gap: .75rem; padding: .9rem; }
    .customer-project-card-content .customer-project-title-group h3 { font-size: .84rem; }
    .customer-photo-action { min-height: 3.35rem; }
    .customer-photo-action-copy strong { font-size: .68rem; }
    .customer-style-choice > span {
        height: 4.8rem;
    }
    .customer-project-progress-copy span {
        font-size: .59rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-portal-spinner,
    .customer-project-card::details-content,
    .customer-ticket-card::details-content,
    .customer-portal-panel.customer-view-enter {
        animation: none;
        transition: none;
    }

    .customer-dashboard-nav::before,
    .customer-dashboard-nav button,
    .customer-project-card,
    .customer-project-card-summary,
    .customer-project-summary-bar,
    .customer-project-progress-bar,
    .customer-ticket-card,
    .customer-ticket-header,
    .customer-ticket-chevron,
    .customer-choice-card > span,
    .customer-style-choice > span,
    .customer-style-choice img,
    .customer-field input,
    .customer-field textarea,
    .customer-field select,
    .customer-ticket-reply textarea,
    .customer-primary-button,
    .customer-primary-button i,
    .customer-outline-button,
    .customer-logout-button,
    .customer-danger-button,
    .customer-profile-shortcuts button,
    .customer-profile-card,
    .customer-profile-stats article,
    .customer-project-form,
    .customer-upload-zone,
    .customer-form-progress span,
    .customer-form-step.customer-step-enter {
        animation: none;
        transition: none;
    }
}

.customer-portal-header {
    padding-inline: 0;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    border-radius: 0;
    background: transparent;
}

.customer-welcome-card {
    min-height: 8.5rem;
    padding: 1.2rem 0;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    border-radius: 0;
    background: transparent;
}

.customer-welcome-mark {
    width: 4rem;
    height: 4rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 1.8rem;
}

.customer-dashboard-nav {
    gap: 0;
    margin-top: 1rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .13);
    border-radius: 0;
    background: transparent;
}

.customer-dashboard-nav::before {
    inset: auto auto 0 0;
    width: calc(100% / 4);
    height: 2px;
    border: 0;
    border-radius: 99px;
    background: #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, .2);
}

.customer-dashboard-nav button {
    min-height: 3.2rem;
    border-radius: 0;
}

.customer-dashboard-nav button.is-active {
    color: #fcd34d;
}

.customer-portal-panel {
    min-height: 16rem;
    padding: 1.25rem 0 2rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.customer-project-form {
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.customer-project-form::before {
    display: none;
}

.customer-project-form-heading {
    margin: 0;
    padding: .25rem 0 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
}

.customer-project-form-mark {
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: .7rem;
    background: rgba(251, 191, 36, .08);
}

.customer-project-step-count {
    padding: 0;
    border: 0;
    background: transparent;
}

.customer-form-progress {
    gap: 0;
    margin: 0 0 1.4rem;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
}

.customer-form-progress span {
    position: relative;
    justify-content: center;
    gap: .45rem;
    padding: .35rem .5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.customer-form-progress span.is-active,
.customer-form-progress span[aria-current="step"] {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.customer-form-progress span > i {
    width: 1.4rem;
    height: 1.4rem;
    border: 0;
    background: rgba(148, 163, 184, .08);
}

.customer-form-progress span.is-active > i {
    background: rgba(251, 191, 36, .12);
}

.customer-form-step {
    padding: .35rem 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.customer-choice-card > span {
    min-height: 6.6rem;
    border-color: rgba(148, 163, 184, .09);
    border-radius: .75rem;
    background: rgba(148, 163, 184, .035);
    box-shadow: none;
}

.customer-choice-card:hover > span,
.customer-style-choice:hover > span {
    box-shadow: none;
}

.customer-choice-card input:checked + span,
.customer-style-choice input:checked + span {
    border-color: rgba(251, 191, 36, .5);
    background: rgba(251, 191, 36, .055);
    box-shadow: inset 0 -2px #fbbf24;
}

.customer-style-choice > span {
    border-color: rgba(148, 163, 184, .1);
    border-radius: .7rem;
}

.customer-support-intro {
    gap: .7rem;
    margin-bottom: 1.2rem;
    padding: .8rem 0;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    border-radius: 0;
    background: transparent;
}

.customer-support-intro-icon,
.customer-support-form-icon {
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: .65rem;
    background: rgba(56, 189, 248, .08);
}

.customer-support-private {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.customer-ticket-new {
    padding: .25rem 0 1.2rem;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.customer-support-form-icon {
    background: rgba(251, 191, 36, .08);
}

.customer-support-fields .customer-field {
    margin-block: .35rem;
}

.customer-support-fields input,
.customer-support-fields textarea,
.customer-support-fields select {
    border-radius: .6rem;
    background: rgba(3, 8, 17, .38);
}

.customer-support-form-footer {
    padding-top: .7rem;
    border-top: 0;
}

.customer-support-list-heading {
    margin-top: 1.4rem;
}

.customer-ticket-card {
    gap: 0;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.customer-ticket-card:hover,
.customer-ticket-card[open] {
    border-color: rgba(148, 163, 184, .2);
    box-shadow: none;
}

.customer-ticket-header {
    padding-inline: 0;
}

.customer-ticket-conversation {
    padding-inline: 0;
    background: transparent;
}

.customer-profile-hero {
    min-height: 6.5rem;
    padding: 1rem 0;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.customer-profile-hero::after {
    display: none;
}

.customer-profile-avatar {
    border-radius: 50%;
    box-shadow: none;
}

.customer-profile-member-label {
    padding: 0;
    border: 0;
    background: transparent;
}

.customer-profile-stats {
    gap: 0;
    padding-block: .35rem;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.customer-profile-stats article {
    gap: .55rem;
    padding: .75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.customer-profile-stats article + article {
    border-inline-start: 1px solid rgba(148, 163, 184, .1);
}

.customer-profile-stats article:hover {
    transform: none;
    border-color: rgba(148, 163, 184, .1);
}

.customer-profile-stat-icon,
.customer-profile-card-icon {
    border: 0;
    border-radius: .65rem;
    background: rgba(251, 191, 36, .07);
}

.customer-profile-settings-grid {
    gap: 1.5rem;
}

.customer-profile-card {
    padding: 1rem 0;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.customer-profile-security-content {
    margin: .1rem 0 .75rem;
    padding: .6rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.customer-profile-security-mark {
    border: 0;
    border-radius: .65rem;
    background: rgba(74, 222, 128, .07);
}

.customer-profile-shortcuts {
    gap: 0;
}

.customer-profile-shortcuts button {
    padding-inline: .45rem;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
    border-radius: 0;
    background: transparent;
}

.customer-profile-shortcuts button:hover {
    transform: none;
    border-color: rgba(148, 163, 184, .18);
    background: rgba(148, 163, 184, .035);
}

.customer-project-card,
.customer-empty-state,
.customer-ticket-list > .customer-empty-state {
    border-radius: .75rem;
    box-shadow: none;
}

@media (max-width: 600px) {
    .customer-welcome-card {
        min-height: 7.5rem;
        padding: .8rem 0;
    }

    .customer-welcome-mark {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.4rem;
    }

    .customer-dashboard-nav button {
        min-height: 3rem;
    }

    .customer-portal-panel {
        padding: .95rem 0 1.5rem;
    }

    .customer-project-form {
        padding: 0;
    }

    .customer-project-form-heading {
        gap: .5rem;
    }

    .customer-project-step-count {
        font-size: .48rem;
    }

    .customer-form-progress span {
        padding-inline: .15rem;
    }

    .customer-form-progress span > b {
        font-size: .48rem;
    }

    .customer-form-step {
        padding-inline: 0;
    }

    .customer-choice-card > span {
        min-height: 5.9rem;
        padding: .65rem;
    }

    .customer-style-grid {
        gap: .4rem;
    }

    .customer-support-intro {
        padding-block: .65rem;
    }

    .customer-ticket-new {
        padding: .1rem 0 1rem;
    }

    .customer-profile-hero {
        padding-block: .75rem;
    }

    .customer-profile-stats article {
        padding: .65rem .25rem;
    }

    .customer-profile-settings-grid {
        gap: .5rem;
    }

    .customer-profile-card {
        padding-block: .85rem;
    }
}

.customer-welcome-card {
    min-height: 9rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(251, 191, 36, .14);
    border-radius: 1.35rem;
    background:
        radial-gradient(ellipse at 0 100%, rgba(251, 191, 36, .1), transparent 18rem),
        linear-gradient(115deg, rgba(17, 26, 41, .96), rgba(11, 18, 32, .9));
}

.customer-welcome-mark {
    width: 4.2rem;
    height: 4.2rem;
    border: 1px solid rgba(251, 191, 36, .14);
    border-radius: 1.2rem;
    background: rgba(251, 191, 36, .055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.customer-dashboard-nav {
    gap: .4rem;
    padding: .35rem;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 1rem;
    background: rgba(11, 18, 32, .76);
}

.customer-dashboard-nav::before {
    inset: .35rem auto .35rem .35rem;
    width: calc((100% - 1.75rem) / 4);
    height: auto;
    border: 1px solid rgba(251, 191, 36, .13);
    border-radius: .72rem;
    background: linear-gradient(145deg, rgba(27, 42, 64, .96), rgba(20, 32, 52, .94));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.customer-dashboard-nav button {
    min-height: 2.9rem;
    border-radius: .72rem;
}

.customer-dashboard-nav button.is-active {
    color: #fbbf24;
}

.customer-project-form {
    overflow: hidden;
    padding: 1.15rem;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 1.15rem;
    background:
        radial-gradient(ellipse at 100% 0, rgba(251, 191, 36, .04), transparent 20rem),
        linear-gradient(145deg, rgba(15, 23, 37, .82), rgba(8, 13, 23, .78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .028), 0 14px 32px rgba(0, 0, 0, .1);
}

.customer-project-form::before {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .52), transparent);
}

.customer-project-form-heading {
    padding: .15rem 0 .9rem;
}

.customer-project-form-mark {
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(251, 191, 36, .14);
    border-radius: .85rem;
    background: rgba(251, 191, 36, .08);
}

.customer-form-progress {
    gap: .35rem;
    margin-bottom: 1rem;
    padding-block: .7rem;
}

.customer-form-progress span {
    justify-content: flex-start;
    padding: .45rem .55rem;
    border: 1px solid rgba(148, 163, 184, .08);
    border-radius: .7rem;
    background: rgba(3, 8, 17, .18);
}

.customer-form-progress span.is-active,
.customer-form-progress span[aria-current="step"] {
    border-color: rgba(251, 191, 36, .19);
    background: linear-gradient(110deg, rgba(251, 191, 36, .075), rgba(251, 191, 36, .018));
}

.customer-form-progress span[aria-current="step"] {
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .045);
}

.customer-form-step {
    padding-top: .25rem;
}

.customer-choice-card > span {
    border-color: rgba(148, 163, 184, .1);
    border-radius: .85rem;
    background: linear-gradient(145deg, rgba(18, 29, 46, .62), rgba(11, 18, 32, .48));
}

.customer-choice-card:hover > span,
.customer-style-choice:hover > span {
    border-color: rgba(251, 191, 36, .28);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .1);
}

.customer-choice-card input:checked + span,
.customer-style-choice input:checked + span {
    border-color: rgba(251, 191, 36, .5);
    background: linear-gradient(145deg, rgba(251, 191, 36, .085), rgba(245, 158, 11, .025));
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .035);
}

.customer-support-intro {
    padding: .8rem .9rem;
    border: 1px solid rgba(56, 189, 248, .1);
    border-radius: .9rem;
    background: linear-gradient(115deg, rgba(13, 25, 40, .72), rgba(9, 16, 28, .46));
}

.customer-ticket-new {
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, .11);
    border-bottom-color: rgba(148, 163, 184, .11);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(15, 23, 37, .72), rgba(8, 13, 23, .62));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .022);
}

.customer-ticket-card {
    border: 1px solid rgba(148, 163, 184, .105);
    border-bottom-color: rgba(148, 163, 184, .105);
    border-radius: .8rem;
    background: rgba(11, 18, 32, .38);
}

.customer-ticket-header {
    padding-inline: .8rem;
}

.customer-ticket-conversation {
    padding-inline: .8rem;
}

.customer-profile-hero {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(251, 191, 36, .14);
    border-radius: 1.1rem;
    background:
        radial-gradient(ellipse at 0 100%, rgba(251, 191, 36, .075), transparent 16rem),
        linear-gradient(115deg, rgba(17, 26, 41, .72), rgba(11, 18, 32, .58));
}

.customer-profile-avatar {
    border: 1px solid rgba(251, 191, 36, .32);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(251, 191, 36, .2), rgba(245, 158, 11, .055));
    color: #fcd34d;
}

.customer-profile-stats article {
    border-radius: .7rem;
}

.customer-profile-stats article + article {
    border-inline-start-color: rgba(148, 163, 184, .08);
}

.customer-profile-card {
    padding-inline: .9rem;
}

.customer-project-card {
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: .95rem;
    background: rgba(8, 13, 23, .42);
}

@media (max-width: 600px) {
    .customer-welcome-card {
        min-height: 8rem;
        padding: .9rem;
        border-radius: 1rem;
    }

    .customer-welcome-mark {
        width: 3rem;
        height: 3rem;
        border-radius: .9rem;
    }

    .customer-dashboard-nav {
        gap: .15rem;
        padding: .25rem;
        border-radius: .85rem;
    }

    .customer-dashboard-nav::before {
        inset: .25rem auto .25rem .25rem;
        width: calc((100% - 1.15rem) / 4);
        border-radius: .65rem;
    }

    .customer-dashboard-nav button {
        min-height: 2.75rem;
        border-radius: .65rem;
    }

    .customer-project-form {
        padding: .8rem;
        border-radius: .95rem;
    }

    .customer-form-progress span {
        justify-content: center;
        padding-inline: .2rem;
    }

    .customer-form-step {
        padding-top: .2rem;
    }

    .customer-ticket-new {
        padding: .8rem;
        border-radius: .85rem;
    }

    .customer-support-intro {
        padding: .7rem;
        border-radius: .75rem;
    }

    .customer-profile-hero {
        padding: .8rem;
        border-radius: .9rem;
    }

    .customer-profile-avatar {
        border-radius: .85rem;
    }
}

.customer-portal-page {
    background:
        radial-gradient(ellipse at 90% -8%, rgba(217, 165, 74, .11), transparent 32rem),
        radial-gradient(ellipse at 4% 48%, rgba(38, 75, 105, .09), transparent 28rem),
        linear-gradient(180deg, #0a101b 0%, #080d17 42rem);
}

.customer-portal-header {
    position: relative;
    margin-bottom: 1.4rem;
    padding: .7rem .85rem;
    border: 1px solid rgba(190, 204, 224, .12);
    border-radius: 1.1rem;
    background: linear-gradient(110deg, rgba(20, 31, 48, .82), rgba(11, 18, 30, .78));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .035);
    backdrop-filter: blur(16px);
}

.customer-portal-brand-mark {
    border-color: rgba(217, 165, 74, .3);
    border-radius: .8rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
}

.customer-portal-brand strong {
    letter-spacing: -.025em;
}

.customer-welcome-card {
    position: relative;
    isolation: isolate;
    min-height: 10rem;
    overflow: hidden;
    padding: 1.55rem 1.7rem;
    border: 1px solid rgba(211, 174, 109, .23);
    border-radius: 1.55rem;
    background:
        radial-gradient(ellipse at 10% 130%, rgba(201, 151, 75, .2), transparent 23rem),
        linear-gradient(112deg, #18263a 0%, #111c2c 56%, #0d1624 100%);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.customer-welcome-card::before,
.customer-welcome-card::after {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(237, 196, 122, .11);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.customer-welcome-card::before {
    top: -8.4rem;
    left: 10%;
    width: 19rem;
    height: 19rem;
    box-shadow: 0 0 0 1.7rem rgba(237, 196, 122, .025), 0 0 0 3.4rem rgba(237, 196, 122, .018);
}

.customer-welcome-card::after {
    inset: auto 0 0;
    height: 1px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, rgba(237, 196, 122, .45), transparent);
}

.customer-welcome-card > div {
    position: relative;
    z-index: 1;
}

.customer-welcome-card .customer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .34rem .62rem;
    border: 1px solid rgba(245, 199, 124, .16);
    border-radius: 99px;
    background: rgba(5, 11, 20, .24);
    color: #e7bd79;
    font-size: .62rem;
}

.customer-welcome-card h1 {
    margin-top: .6rem;
    letter-spacing: -.035em;
}

.customer-welcome-card p {
    color: #a9b5c6;
}

.customer-welcome-mark {
    position: relative;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(237, 196, 122, .2);
    border-radius: 1.45rem;
    background: linear-gradient(145deg, rgba(237, 196, 122, .16), rgba(237, 196, 122, .035));
    box-shadow: 0 12px 34px rgba(0, 0, 0, .23), inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 1.9rem;
}

.customer-welcome-mark::before {
    position: absolute;
    inset: .38rem;
    border: 1px solid rgba(237, 196, 122, .11);
    border-radius: 1.12rem;
    content: "";
}

.customer-dashboard-nav {
    margin-block: 1.2rem .6rem;
    padding: .36rem;
    border-color: rgba(176, 190, 210, .12);
    border-radius: 1.05rem;
    background: linear-gradient(110deg, rgba(14, 23, 37, .92), rgba(10, 17, 29, .86));
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.customer-dashboard-nav::before {
    border-color: rgba(236, 191, 117, .18);
    border-radius: .78rem;
    background: linear-gradient(145deg, rgba(39, 52, 71, .98), rgba(26, 38, 56, .98));
    box-shadow: 0 5px 16px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.customer-dashboard-nav button {
    min-height: 3.05rem;
    color: #a5b1c2;
}

.customer-dashboard-nav button.is-active {
    color: #f0c77f;
}

.dashboard-updated-row {
    justify-content: flex-end;
    margin-block: .45rem .2rem;
}

.dashboard-updated-pill {
    padding: .42rem .72rem;
    border: 1px solid rgba(148, 163, 184, .1);
    border-radius: 99px;
    background: rgba(12, 20, 33, .55);
    color: #8795a9;
    font-size: .59rem;
}

.dashboard-updated-pill i {
    color: #d8ad69;
}

.customer-portal-panel {
    position: relative;
    padding: 1.4rem 1.45rem 1.65rem;
    border: 1px solid rgba(154, 172, 197, .13);
    border-radius: 1.35rem;
    background:
        radial-gradient(ellipse at 100% 0, rgba(217, 165, 74, .035), transparent 24rem),
        linear-gradient(145deg, rgba(16, 25, 39, .82), rgba(10, 16, 27, .78));
    box-shadow: 0 17px 45px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .028);
}

.customer-panel-heading {
    position: relative;
    margin-bottom: 1.2rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
}

.customer-panel-heading > div {
    position: relative;
}

.customer-panel-heading h2 {
    font-size: 1.22rem;
    letter-spacing: -.025em;
}

.customer-panel-heading .customer-eyebrow {
    color: #dfb66f;
    letter-spacing: .01em;
}

.customer-project-form {
    padding: 1.2rem 1.3rem;
    border-color: rgba(177, 190, 210, .14);
    border-radius: 1.15rem;
    background:
        radial-gradient(ellipse at 100% 0, rgba(217, 165, 74, .075), transparent 21rem),
        linear-gradient(145deg, rgba(19, 30, 46, .94), rgba(11, 18, 30, .91));
    box-shadow: 0 17px 40px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.customer-project-form::before {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(231, 187, 112, .76), transparent);
}

.customer-project-form-heading {
    padding-bottom: 1rem;
    border-bottom-color: rgba(165, 179, 200, .12);
}

.customer-project-form-mark {
    width: 2.8rem;
    height: 2.8rem;
    border-color: rgba(236, 191, 117, .2);
    border-radius: .95rem;
    background: linear-gradient(145deg, rgba(217, 165, 74, .18), rgba(217, 165, 74, .045));
    box-shadow: 0 7px 20px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.customer-project-form-heading strong {
    font-size: .86rem;
}

.customer-project-form-heading p {
    color: #a0aec0;
}

.customer-project-step-count {
    padding: .42rem .66rem;
    border: 1px solid rgba(178, 192, 211, .1);
    border-radius: 99px;
    background: rgba(5, 11, 19, .34);
    color: #abb6c6;
}

.customer-project-step-count i {
    color: #e3b96f;
}

.customer-form-progress {
    gap: .45rem;
    margin-bottom: 1.2rem;
    padding-block: .9rem;
    border-bottom-color: rgba(165, 179, 200, .12);
}

.customer-form-progress span {
    min-height: 2.55rem;
    gap: .55rem;
    padding-inline: .72rem;
    border-color: rgba(167, 183, 205, .1);
    border-radius: .82rem;
    background: linear-gradient(145deg, rgba(7, 13, 22, .42), rgba(12, 20, 32, .38));
}

.customer-form-progress span > i {
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid rgba(154, 172, 197, .13);
    background: rgba(148, 163, 184, .06);
}

.customer-form-progress span.is-active,
.customer-form-progress span[aria-current="step"] {
    border-color: rgba(229, 184, 108, .25);
    background: linear-gradient(110deg, rgba(217, 165, 74, .12), rgba(217, 165, 74, .035));
}

.customer-form-progress span[aria-current="step"] {
    box-shadow: inset 0 0 0 1px rgba(229, 184, 108, .08), 0 5px 15px rgba(0, 0, 0, .12);
}

.customer-form-progress span.is-active > i {
    border-color: rgba(229, 184, 108, .24);
    background: rgba(217, 165, 74, .13);
    color: #efc77f;
}

.customer-form-step {
    padding: .25rem .25rem .1rem;
}

.customer-form-step legend {
    font-size: 1rem;
}

.customer-step-hint {
    color: #9aa8ba;
}

.customer-choice-grid {
    gap: .7rem;
}

.customer-choice-card > span {
    min-height: 7.25rem;
    gap: .38rem;
    padding: .95rem;
    border-color: rgba(160, 177, 200, .13);
    border-radius: 1rem;
    background:
        linear-gradient(145deg, rgba(25, 38, 57, .72), rgba(12, 20, 33, .82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.customer-choice-card:hover > span {
    transform: translateY(-3px);
    border-color: rgba(229, 184, 108, .34);
    box-shadow: 0 12px 25px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.customer-choice-card i {
    width: 2.25rem;
    height: 2.25rem;
    border-color: rgba(229, 184, 108, .16);
    border-radius: .8rem;
    background: linear-gradient(145deg, rgba(217, 165, 74, .13), rgba(217, 165, 74, .04));
    color: #e9bd72;
}

.customer-choice-card strong {
    font-size: .78rem;
}

.customer-choice-card small {
    color: #a1aec0;
}

.customer-choice-card input:checked + span {
    border-color: rgba(229, 184, 108, .6);
    background:
        radial-gradient(circle at 12% 0, rgba(217, 165, 74, .12), transparent 9rem),
        linear-gradient(145deg, rgba(35, 40, 48, .9), rgba(18, 25, 36, .96));
    box-shadow: inset 0 0 0 1px rgba(229, 184, 108, .11), 0 9px 22px rgba(0, 0, 0, .14);
}

.customer-style-heading {
    margin-top: 1.55rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, .09);
}

.customer-style-heading h3 {
    font-size: .85rem;
}

.customer-style-grid {
    gap: .7rem;
}

.customer-style-choice > span {
    height: 6.7rem;
    border-color: rgba(160, 177, 200, .17);
    border-radius: .9rem;
    box-shadow: 0 6px 15px rgba(0, 0, 0, .12);
}

.customer-style-choice img {
    filter: saturate(.82) brightness(.86);
}

.customer-style-choice:hover img,
.customer-style-choice input:checked + span img {
    filter: saturate(1.03) brightness(.96);
}

.customer-style-choice strong {
    padding-block: .62rem .48rem;
    font-size: .66rem;
}

.customer-style-choice input:checked + span {
    border-color: rgba(229, 184, 108, .75);
    box-shadow: 0 0 0 2px rgba(229, 184, 108, .14), 0 12px 24px rgba(0, 0, 0, .22);
}

.customer-field {
    color: #d2dbe6;
}

.customer-field input,
.customer-field textarea,
.customer-field select {
    border-color: rgba(161, 178, 201, .15);
    border-radius: .8rem;
    background: linear-gradient(145deg, rgba(5, 11, 20, .72), rgba(9, 16, 27, .88));
}

.customer-field input:focus,
.customer-field textarea:focus,
.customer-field select:focus {
    border-color: rgba(229, 184, 108, .6);
    background: #0a111d;
    box-shadow: 0 0 0 3px rgba(229, 184, 108, .075);
}

.customer-upload-zone {
    border-color: rgba(229, 184, 108, .38);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 50% 10%, rgba(217, 165, 74, .1), transparent 9rem),
        linear-gradient(145deg, rgba(20, 31, 47, .48), rgba(8, 14, 24, .4));
}

.customer-upload-zone:hover {
    border-color: rgba(229, 184, 108, .7);
    background-color: rgba(217, 165, 74, .06);
}

.customer-upload-zone i {
    width: 3.5rem;
    height: 3.5rem;
    border-color: rgba(229, 184, 108, .22);
    border-radius: 1.1rem;
    background: linear-gradient(145deg, rgba(217, 165, 74, .16), rgba(217, 165, 74, .045));
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

.customer-form-actions {
    border-top-color: rgba(165, 179, 200, .13);
}

.customer-primary-button {
    background: linear-gradient(135deg, #f1cb83, #d7a957 62%, #c79343);
    box-shadow: 0 8px 20px rgba(183, 129, 50, .2), inset 0 1px 0 rgba(255, 255, 255, .38);
}

.customer-primary-button:hover {
    background: linear-gradient(135deg, #ffdda0, #e6b969 62%, #d4a14f);
    box-shadow: 0 11px 25px rgba(183, 129, 50, .27), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.customer-outline-button,
.customer-logout-button {
    border-color: rgba(168, 184, 205, .16);
    background: linear-gradient(145deg, rgba(27, 40, 59, .72), rgba(15, 24, 38, .82));
}

.customer-profile-hero {
    border-color: rgba(211, 174, 109, .2);
    background:
        radial-gradient(ellipse at 8% 120%, rgba(201, 151, 75, .15), transparent 17rem),
        linear-gradient(115deg, rgba(23, 34, 51, .94), rgba(12, 20, 33, .88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 13px 30px rgba(0, 0, 0, .13);
}

.customer-profile-hero::after {
    display: block;
    opacity: .65;
}

.customer-profile-avatar {
    width: 4.15rem;
    height: 4.15rem;
    border-radius: 1.2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.customer-profile-member-label {
    padding: .42rem .65rem;
    border: 1px solid rgba(229, 184, 108, .15);
    border-radius: 99px;
    background: rgba(6, 12, 21, .24);
    color: #e6bc77;
}

.customer-profile-stats article {
    border: 1px solid rgba(155, 173, 197, .1);
    border-radius: .85rem;
    background: linear-gradient(145deg, rgba(18, 28, 43, .58), rgba(9, 15, 26, .56));
    transition: transform .24s ease, border-color .24s ease, background .24s ease;
}

.customer-profile-stats article + article {
    border-inline-start: 1px solid rgba(155, 173, 197, .1);
}

.customer-profile-stats article:hover {
    transform: translateY(-2px);
    border-color: rgba(229, 184, 108, .22);
    background: linear-gradient(145deg, rgba(26, 37, 53, .72), rgba(12, 19, 31, .64));
}

.customer-profile-card {
    padding: 1rem;
    border: 1px solid rgba(155, 173, 197, .11);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(17, 27, 42, .74), rgba(9, 15, 26, .68));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.customer-profile-card-heading {
    margin-bottom: .9rem;
}

.customer-profile-card-icon {
    border: 1px solid rgba(229, 184, 108, .14);
    border-radius: .8rem;
    background: linear-gradient(145deg, rgba(217, 165, 74, .13), rgba(217, 165, 74, .04));
    color: #e7bd79;
}

.customer-profile-security-content {
    padding: .7rem;
    border: 1px solid rgba(155, 173, 197, .08);
    border-radius: .75rem;
    background: rgba(4, 10, 18, .22);
}

.customer-profile-shortcuts {
    gap: .55rem;
}

.customer-profile-shortcuts button {
    padding: .75rem .85rem;
    border: 1px solid rgba(155, 173, 197, .12);
    border-radius: .8rem;
    background: linear-gradient(145deg, rgba(18, 28, 43, .66), rgba(9, 15, 26, .58));
}

.customer-profile-shortcuts button:hover {
    transform: translateY(-2px);
    border-color: rgba(229, 184, 108, .25);
    background: linear-gradient(145deg, rgba(28, 39, 55, .78), rgba(12, 19, 31, .68));
}

.customer-support-intro {
    border-color: rgba(100, 181, 209, .17);
    background:
        radial-gradient(ellipse at 4% 50%, rgba(56, 189, 248, .08), transparent 14rem),
        linear-gradient(115deg, rgba(14, 28, 43, .86), rgba(10, 17, 29, .72));
}

.customer-ticket-new {
    padding: 1.1rem 1.2rem;
    border-color: rgba(155, 173, 197, .13);
    border-radius: 1.05rem;
    background:
        radial-gradient(ellipse at 100% 0, rgba(217, 165, 74, .045), transparent 17rem),
        linear-gradient(145deg, rgba(17, 27, 42, .8), rgba(9, 15, 26, .72));
    box-shadow: 0 12px 28px rgba(0, 0, 0, .11), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.customer-ticket-card {
    border-color: rgba(155, 173, 197, .12);
    border-radius: .9rem;
    background: linear-gradient(145deg, rgba(16, 25, 39, .72), rgba(9, 15, 25, .6));
}

.customer-ticket-card:hover,
.customer-ticket-card[open] {
    border-color: rgba(229, 184, 108, .22);
    background: linear-gradient(145deg, rgba(21, 31, 46, .82), rgba(10, 17, 28, .72));
}

.customer-ticket-header {
    padding: .9rem 1rem;
}

.customer-ticket-conversation {
    padding: .9rem 1rem 1rem;
    background: rgba(2, 7, 14, .2);
}

@media (max-width: 600px) {
    .customer-portal-header {
        margin-bottom: 1rem;
        padding: .55rem .65rem;
        border-radius: .9rem;
    }

    .customer-welcome-card {
        min-height: 8.5rem;
        padding: 1rem;
        border-radius: 1.1rem;
    }

    .customer-welcome-mark {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 1.05rem;
        font-size: 1.5rem;
    }

    .customer-dashboard-nav {
        margin-top: .9rem;
        padding: .28rem;
        border-radius: .9rem;
    }

    .customer-dashboard-nav::before {
        inset: .28rem auto .28rem .28rem;
        border-radius: .68rem;
    }

    .customer-dashboard-nav button {
        min-height: 2.85rem;
    }

    .customer-portal-panel {
        padding: 1rem .85rem 1.3rem;
        border-radius: 1.05rem;
    }

    .customer-project-form {
        padding: .85rem;
        border-radius: .9rem;
    }

    .customer-project-form-heading {
        gap: .55rem;
    }

    .customer-project-step-count {
        padding: .3rem .4rem;
        font-size: .47rem;
    }

    .customer-form-progress {
        gap: .23rem;
    }

    .customer-form-progress span {
        min-height: 2.35rem;
        gap: .28rem;
        padding-inline: .18rem;
        border-radius: .62rem;
    }

    .customer-form-progress span > i {
        width: 1.32rem;
        height: 1.32rem;
        font-size: .55rem;
    }

    .customer-form-progress span > b {
        font-size: .47rem;
    }

    .customer-choice-grid {
        gap: .5rem;
    }

    .customer-choice-card > span {
        min-height: 6rem;
        padding: .7rem;
        border-radius: .8rem;
    }

    .customer-style-grid {
        gap: .45rem;
    }

    .customer-style-choice > span {
        height: 4.9rem;
        border-radius: .72rem;
    }

    .customer-profile-hero {
        padding: .85rem;
        border-radius: .95rem;
    }

    .customer-profile-avatar {
        width: 3.55rem;
        height: 3.55rem;
        border-radius: 1rem;
    }

    .customer-profile-member-label {
        padding: .3rem .45rem;
    }

    .customer-profile-stats {
        gap: .35rem;
        border: 0;
    }

    .customer-profile-stats article {
        border: 1px solid rgba(155, 173, 197, .1);
        border-radius: .72rem;
        background: linear-gradient(145deg, rgba(18, 28, 43, .58), rgba(9, 15, 26, .52));
    }

    .customer-profile-stats article + article {
        border-inline-start: 1px solid rgba(155, 173, 197, .1);
    }

    .customer-profile-card {
        padding: .85rem;
        border-radius: .85rem;
    }

    .customer-profile-shortcuts {
        gap: .4rem;
    }

    .customer-profile-shortcuts button {
        min-height: 2.75rem;
        padding: .62rem .7rem;
        border-radius: .7rem;
    }

    .customer-ticket-new {
        padding: .85rem;
        border-radius: .85rem;
    }
}

body.customer-portal-page {
    --ui-bg: #0b0c0d;
    --ui-surface: #151617;
    --ui-surface-raised: #1d1f20;
    --ui-border: #2b2d2e;
    --ui-border-strong: rgba(200, 255, 40, .4);
    --ui-text-muted: #9b9e9d;
}

.customer-portal-page {
    color: #f4f4f1;
    background: #0b0c0d;
}

.customer-portal-header {
    border-color: #2b2d2e;
    border-radius: 1.1rem;
    background: #151617;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.customer-portal-brand-mark {
    border-color: #373a3a;
    border-radius: .8rem;
    background: #202222;
}

.customer-logout-button,
.customer-outline-button,
.customer-danger-button {
    border-color: #373a3a;
    border-radius: .75rem;
    background: #202222;
    transition-duration: .18s;
}

.customer-logout-button:hover,
.customer-outline-button:hover {
    border-color: #666b5c;
    color: #c8ff28;
}

.customer-welcome-card {
    position: relative;
    isolation: isolate;
    min-height: 9.5rem;
    border-color: #373b3b;
    border-radius: 1.2rem;
    background: #17191a;
    box-shadow: none;
}

.customer-welcome-card::before {
    position: absolute;
    z-index: -1;
    top: -4rem;
    left: -1rem;
    width: 9rem;
    height: 9rem;
    border: 1px solid rgba(200, 255, 40, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 1rem rgba(200, 255, 40, .025);
    content: "";
    pointer-events: none;
}

.customer-eyebrow {
    color: #c8ff28;
}

.customer-welcome-card .customer-eyebrow,
.customer-panel-heading .customer-eyebrow {
    border-color: #383d2b;
    background: #22271b;
    color: #c8ff28;
}

.customer-welcome-card p,
.customer-panel-heading p {
    color: #a4a7a5;
}

.customer-welcome-mark {
    border-color: #383d2b;
    border-radius: 1.2rem;
    background: #22271b;
    box-shadow: none;
}

.customer-welcome-mark i {
    color: #c8ff28;
    filter: none;
}

.customer-welcome-wave {
    animation-duration: 1.25s;
}

.customer-dashboard-nav {
    border-color: #2b2d2e;
    border-radius: .95rem;
    background: #111314;
    box-shadow: none;
}

.customer-dashboard-nav::before {
    border-color: rgba(200, 255, 40, .12);
    border-radius: .7rem;
    background: #252829;
    box-shadow: none;
    transition-duration: .28s;
}

.customer-dashboard-nav button {
    transition-duration: .18s;
}

.customer-dashboard-nav button.is-active,
.customer-dashboard-nav button.is-active i {
    color: #c8ff28;
}

.dashboard-updated-pill {
    border-color: #292b2c;
    background: #141617;
    color: #a4a7a5;
    box-shadow: none;
}

.dashboard-updated-pill i {
    color: #c8ff28;
}

.customer-portal-notice,
.customer-form-message {
    color: #c8ff28;
}

.customer-portal-panel {
    border-color: #2b2d2e;
    border-radius: 1.15rem;
    background: #151617;
    box-shadow: none;
    transition: border-color .2s ease, background-color .2s ease;
}

.customer-portal-panel::before {
    content: none;
}

.customer-portal-panel.customer-view-enter {
    animation-duration: .28s;
}

.customer-panel-heading {
    border-color: #2b2d2e;
}

.customer-panel-heading h2::before {
    background: #c8ff28;
}

.customer-project-group-heading {
    color: #d5eca1;
}

.customer-portal-panel[data-customer-view="projects"] .customer-project-group-heading {
    color: #c8ff28;
}

.customer-portal-panel[data-customer-view="projects"] .customer-project-group-heading::before {
    background: #c8ff28;
    box-shadow: none;
}

.customer-project-card,
.customer-ticket-card {
    border-color: #303334;
    border-radius: .95rem;
    background: #1b1d1e;
    box-shadow: none;
    animation-duration: .24s;
}

.customer-project-card:hover,
.customer-project-card[open],
.customer-ticket-card:hover,
.customer-ticket-card[open] {
    border-color: #464a43;
    background: #1b1d1e;
    box-shadow: none;
}

.customer-project-card:not([open]):hover {
    transform: translateY(-1px);
}

.customer-project-card-summary {
    transition: background-color .18s ease;
}

.customer-project-group-list > .customer-project-card:nth-child(4n + 1) .customer-project-card-summary {
    background: #efc6f5;
}

.customer-project-group-list > .customer-project-card:nth-child(4n + 2) .customer-project-card-summary {
    background: #c8b8ff;
}

.customer-project-group-list > .customer-project-card:nth-child(4n + 3) .customer-project-card-summary {
    background: #d9f39c;
}

.customer-project-group-list > .customer-project-card:nth-child(4n) .customer-project-card-summary {
    background: #a9def1;
}

.customer-project-summary-title,
.customer-project-summary-date,
.customer-project-summary-percent,
.customer-project-summary-chevron,
.customer-project-card[open] .customer-project-summary-chevron {
    color: #29262e;
}

.customer-project-summary-track {
    background: rgba(41, 38, 46, .16);
}

.customer-project-summary-bar,
.customer-project-progress-bar {
    background: #343c24;
    box-shadow: none;
    transition-duration: .35s;
}

.customer-project-status,
.customer-project-type,
.customer-ticket-status {
    border: 0;
    background: rgba(41, 38, 46, .1);
    color: #39343f;
}

.customer-project-status.is-pending {
    background: rgba(125, 85, 10, .12);
    color: #664a17;
}

.customer-project-status.is-approved,
.customer-project-status.is-in_progress,
.customer-ticket-status.is-replied {
    background: rgba(26, 91, 114, .12);
    color: #24546a;
}

.customer-project-status.is-completed {
    background: rgba(45, 91, 31, .12);
    color: #365327;
}

.customer-project-status.is-rejected,
.customer-ticket-status.is-closed {
    background: rgba(140, 40, 55, .1);
    color: #783745;
}

html:not([data-customer-theme="light"]) .customer-project-card-content .customer-project-type {
    border: 1px solid rgba(203, 213, 225, .18);
    background: #292d2e;
    color: #e2e8f0;
}

html:not([data-customer-theme="light"]) .customer-project-card-content .customer-project-status.is-pending {
    border: 1px solid rgba(251, 191, 36, .28);
    background: rgba(251, 191, 36, .12);
    color: #fcd34d;
}

html:not([data-customer-theme="light"]) .customer-project-card-content .customer-project-status.is-approved,
html:not([data-customer-theme="light"]) .customer-project-card-content .customer-project-status.is-in_progress {
    border: 1px solid rgba(56, 189, 248, .28);
    background: rgba(56, 189, 248, .12);
    color: #7dd3fc;
}

html:not([data-customer-theme="light"]) .customer-project-card-content .customer-project-status.is-completed {
    border: 1px solid rgba(134, 239, 172, .3);
    background: rgba(74, 222, 128, .12);
    color: #86efac;
}

html:not([data-customer-theme="light"]) .customer-project-card-content .customer-project-status.is-rejected {
    border: 1px solid rgba(251, 113, 133, .3);
    background: rgba(251, 113, 133, .12);
    color: #fda4af;
}

.customer-project-card-content {
    border-color: #303334;
}

.customer-project-progress-row {
    background: #121415;
}

.customer-project-progress-track {
    background: #292d2e;
}

.customer-project-progress-heading > span {
    color: #c8ff28;
}

.customer-empty-state,
.customer-portal-message {
    border-color: #303334;
    background: #121415;
    color: #a4a7a5;
}

.customer-project-form,
.customer-ticket-new,
.customer-profile-card {
    border-color: #303334;
    border-radius: 1rem;
    background: #191b1c;
    box-shadow: none;
}

.customer-project-form::before,
.customer-project-form-heading::after {
    content: none;
}

.customer-project-form-mark,
.customer-support-form-icon,
.customer-profile-stat-icon,
.customer-profile-card-icon {
    border-color: #383d2b;
    border-radius: .8rem;
    background: #25291d;
    color: #c8ff28;
    box-shadow: none;
}

.customer-project-form-heading strong,
.customer-profile-card-heading h3,
.customer-support-form-heading h3,
.customer-support-list-heading h3 {
    color: #f4f4f1;
}

.customer-project-form-heading p,
.customer-support-intro p,
.customer-support-form-heading p,
.customer-support-list-heading p {
    color: #a4a7a5;
}

.customer-project-step-count,
.customer-form-progress span,
.customer-form-step,
.customer-style-choice > span {
    border-color: #303334;
    border-radius: .8rem;
    background: #121415;
}

.customer-form-progress span.is-active,
.customer-form-progress span[aria-current="step"] {
    border-color: rgba(200, 255, 40, .22);
    background: #22271b;
    box-shadow: none;
}

.customer-form-progress span.is-active > i,
.customer-form-progress span[aria-current="step"] > i {
    border-color: rgba(200, 255, 40, .25);
    background: #303a20;
    color: #c8ff28;
}

.customer-form-progress span.is-active > b,
.customer-form-progress span[aria-current="step"] > b,
.customer-project-step-count i,
.customer-upload-zone,
.customer-upload-zone i {
    color: #c8ff28;
}

.customer-choice-card > span {
    border-color: #303334;
    border-radius: .85rem;
    background: #202223;
    box-shadow: none;
}

.customer-choice-card i {
    border-color: #383d2b;
    background: #292e21;
    color: #c8ff28;
}

.customer-choice-card strong {
    color: #f4f4f1;
}

.customer-choice-card input:checked + span {
    border-color: rgba(200, 255, 40, .48);
    background: #252a1e;
    box-shadow: inset 0 0 0 1px rgba(200, 255, 40, .08);
}

.customer-field {
    color: #d2d4d1;
}

.customer-field input,
.customer-field textarea,
.customer-field select,
.customer-ticket-reply textarea {
    border-color: #343738;
    border-radius: .7rem;
    background: #101213;
    color: #f4f4f1;
}

.customer-field input:focus,
.customer-field textarea:focus,
.customer-field select:focus,
.customer-ticket-reply textarea:focus {
    border-color: rgba(200, 255, 40, .65);
    box-shadow: 0 0 0 2px rgba(200, 255, 40, .08);
}

.customer-upload-zone {
    border-color: rgba(200, 255, 40, .25);
    border-radius: .95rem;
    background: #171a14;
}

.customer-upload-zone i {
    border-color: #383d2b;
    border-radius: .8rem;
    background: #25291d;
}

.customer-privacy-note {
    border-color: #303334;
    background: #121415;
}

.customer-privacy-note i,
.customer-support-form-footer > span i {
    color: #c8ff28;
}

.customer-primary-button {
    border-radius: .75rem;
    background: #c8ff28;
    color: #1a1d14;
    box-shadow: none;
    transition-duration: .18s;
}

.customer-primary-button:hover {
    background: #d6ff5e;
    box-shadow: none;
}

.customer-support-intro,
.customer-support-form-heading,
.customer-profile-security-content {
    border-color: #303334;
    border-radius: .9rem;
    background: #191b1c;
    box-shadow: none;
}

.customer-support-intro-icon {
    border-color: #343738;
    border-radius: .8rem;
    background: #202728;
    color: #9ed8eb;
}

.customer-support-private {
    border-color: #343b2b;
    background: #20251a;
    color: #d5eca1;
}

.customer-support-form-heading {
    border: 0;
}

.customer-ticket-header,
.customer-project-card-summary,
.customer-ticket-chevron {
    transition-duration: .18s;
}

.customer-ticket-header:hover {
    background: rgba(255, 255, 255, .025);
}

.customer-ticket-card[open] .customer-ticket-header {
    border-color: #303334;
}

.customer-ticket-conversation {
    border-color: #303334;
}

.customer-profile-hero {
    border-color: #373b3b;
    border-radius: 1.1rem;
    background: #17191a;
    box-shadow: none;
}

.customer-profile-hero::after {
    border-color: rgba(200, 255, 40, .1);
    box-shadow: 0 0 0 1rem rgba(200, 255, 40, .025);
}

.customer-profile-avatar {
    border-color: #383d2b;
    border-radius: 1.15rem;
    background: #25291d;
    color: #c8ff28;
    box-shadow: none;
}

.customer-profile-member-label {
    border-color: #383d2b;
    background: #22271b;
    color: #c8ff28;
}

.customer-profile-stats article {
    border: 0;
    border-radius: .9rem;
    box-shadow: none;
}

.customer-profile-stats article:nth-child(1) {
    background: #efc6f5;
    color: #34203a;
}

.customer-profile-stats article:nth-child(2) {
    background: #c8b8ff;
    color: #302547;
}

.customer-profile-stats article:nth-child(3) {
    background: #d9f39c;
    color: #303923;
}

.customer-profile-stats article > div > span,
.customer-profile-stats strong,
.customer-profile-stats .customer-profile-joined-date {
    color: inherit;
}

.customer-profile-stats .customer-profile-stat-icon {
    border: 0;
    background: rgba(41, 38, 46, .1);
    color: inherit;
}

.customer-profile-security-content {
    border-style: solid;
}

.customer-profile-security-mark {
    border-color: #383d2b;
    border-radius: .75rem;
    background: #25291d;
    color: #c8ff28;
}

.customer-profile-shortcuts button {
    border-color: #303334;
    border-radius: .8rem;
    background: #191b1c;
    transition-duration: .18s;
}

.customer-profile-shortcuts button > i:first-child {
    border-color: #383d2b;
    background: #25291d;
    color: #c8ff28;
}

.customer-profile-shortcuts button:hover {
    transform: translateY(-1px);
    border-color: #464a43;
    background: #1e2021;
}

.customer-notification-badge,
.customer-mobile-notification-badge {
    background: #c8ff28;
    color: #1a1d14;
    box-shadow: none;
}

.customer-bottom-nav {
    border-color: #303334;
    border-radius: 1.15rem;
    background: #111314;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.customer-bottom-nav button {
    border-radius: .85rem;
    color: #9b9e9d;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.customer-bottom-nav button.is-active {
    background: #252829;
    color: #c8ff28;
}

.customer-bottom-nav:not(:has(button.is-active)) button:first-child {
    background: #252829;
    color: #c8ff28;
}

.customer-bottom-nav button > i {
    transition-duration: .18s;
}

.customer-bottom-nav button:focus-visible,
.customer-dashboard-nav button:focus-visible,
.customer-primary-button:focus-visible,
.customer-outline-button:focus-visible {
    outline: 2px solid #c8ff28;
    outline-offset: 2px;
}

.customer-portal-spinner {
    border-color: rgba(200, 255, 40, .2);
    border-top-color: #c8ff28;
}

.customer-image-preview-dialog {
    border-color: #464a43;
    border-radius: 1rem;
    background: #151718;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .4);
}

.customer-image-preview-dialog::backdrop {
    background: rgba(0, 0, 0, .72);
    backdrop-filter: none;
}

@media (max-width: 600px) {
    .customer-welcome-card {
        min-height: 8.5rem;
        padding: 1rem;
        border-radius: 1rem;
    }

    .customer-portal-panel {
        border-radius: 1rem;
    }

    .customer-project-card[open] {
        left: auto;
        width: 100%;
        margin-inline: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-portal-page *,
    .customer-bottom-nav *,
    .customer-image-preview-dialog[open] {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

.customer-project-card {
    transition-duration: .24s;
}

.customer-private-image-gallery {
    min-width: 0;
    gap: .5rem;
    margin-top: .45rem;
}

.customer-project-card-content > .customer-project-gallery-heading,
.customer-project-gallery-heading {
    color: #c8ff28;
}

.customer-private-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
    gap: .5rem;
    min-width: 0;
    overflow: visible;
}

.customer-private-image-item {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #343738;
    border-radius: .8rem;
    background: #101213;
}

.customer-private-image-item.is-featured {
    grid-column: 1 / -1;
}

.customer-private-image-item > .customer-private-image-preview {
    display: block;
    width: 100%;
    height: 4.8rem;
    border-radius: inherit;
    background: #101213;
    transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.customer-private-image-item.is-featured > .customer-private-image-preview {
    height: auto;
    aspect-ratio: 16 / 9;
}

.customer-private-image-item > .customer-private-image-preview:hover {
    transform: scale(1.015);
    box-shadow: none;
}

.customer-private-image-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.customer-private-image-item .customer-photo-remove {
    top: .4rem;
    right: .4rem;
}

@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .customer-project-card {
        interpolate-size: allow-keywords;
    }

    .customer-project-card::details-content {
        block-size: 0;
        overflow: clip;
        opacity: 0;
        transition:
            block-size .46s cubic-bezier(.22, 1, .36, 1),
            opacity .2s ease,
            content-visibility .46s allow-discrete;
    }

    .customer-project-card[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

@media (max-width: 600px) {
    .customer-private-image-item > .customer-private-image-preview {
        height: 4.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-project-card::details-content {
        transition-duration: .01ms !important;
    }
}

.customer-project-card-summary {
    grid-template-columns: 5.25rem minmax(0, 1fr) auto auto;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 6.8rem;
    gap: .45rem .7rem;
}

.customer-project-preview {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-column: 1;
    grid-row: 1 / 3;
    overflow: hidden;
    place-items: center;
    align-self: stretch;
    border: 1px solid rgba(41, 38, 46, .14);
    border-radius: .75rem;
    background: rgba(41, 38, 46, .08);
    color: rgba(41, 38, 46, .48);
}

.customer-project-preview > i {
    grid-area: 1 / 1;
    font-size: 1.1rem;
}

.customer-project-preview img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: cover;
    transition: opacity .22s ease;
}

img.image-fade-in {
    transition-property: opacity, transform;
    transition-duration: .38s, .5s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1), ease;
}

img[data-image-loading="true"] {
    opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    img.image-fade-in {
        transition-duration: .01ms, .01ms;
    }
}

.customer-theme-settings {
    margin-top: .8rem;
}

.customer-theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.customer-theme-option {
    display: flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid #373a3a;
    border-radius: .75rem;
    background: #202222;
    color: #b5b9b3;
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.customer-theme-option[aria-pressed="true"] {
    border-color: rgba(200, 255, 40, .48);
    background: rgba(200, 255, 40, .1);
    color: #c8ff28;
}

.customer-theme-option:focus-visible {
    outline: 2px solid #c8ff28;
    outline-offset: 2px;
}

.customer-project-preview.has-image img {
    opacity: 1;
}

.customer-project-preview.has-error {
    color: #574451;
}

.customer-project-summary-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
}

.customer-project-card-summary > .customer-project-status {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
}

.customer-project-summary-chevron {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
}

.customer-project-summary-progress {
    grid-column: 2 / -1;
    grid-row: 2;
}

@media (max-width: 520px) {
    .customer-project-card-summary {
        grid-template-columns: 4.4rem minmax(0, 1fr) auto auto;
        min-height: 6.4rem;
        gap: .4rem .5rem;
        padding: .7rem;
    }

    .customer-project-preview {
        border-radius: .65rem;
    }

    .customer-project-summary-title {
        font-size: .76rem;
    }

    .customer-project-card-summary > .customer-project-status {
        max-width: 5.5rem;
        overflow: hidden;
        font-size: .52rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

html[data-customer-theme="light"] .customer-portal-page {
    color: #242922;
    background: #f2f4ef;
    color-scheme: light;
}

html[data-customer-theme="light"] .customer-portal-header,
html[data-customer-theme="light"] .customer-portal-panel,
html[data-customer-theme="light"] .customer-profile-card,
html[data-customer-theme="light"] .customer-profile-stats article,
html[data-customer-theme="light"] .customer-project-card,
html[data-customer-theme="light"] .customer-ticket-card,
html[data-customer-theme="light"] .customer-ticket-new,
html[data-customer-theme="light"] .customer-support-intro,
html[data-customer-theme="light"] .customer-project-form,
html[data-customer-theme="light"] .customer-welcome-card {
    border-color: #d9ded4;
    background: #fff;
    box-shadow: 0 4px 14px rgba(38, 48, 32, .045);
}

html[data-customer-theme="light"] .customer-portal-panel {
    background: #f8faf6;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-portal-panel::before {
    background: #e3e8de;
}

html[data-customer-theme="light"] .customer-portal-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-customer-theme="light"] .customer-portal-brand,
html[data-customer-theme="light"] .customer-portal-identity,
html[data-customer-theme="light"] .customer-profile-card-heading h3,
html[data-customer-theme="light"] .customer-profile-identity h3,
html[data-customer-theme="light"] .customer-profile-stats strong,
html[data-customer-theme="light"] .customer-panel-heading h2,
html[data-customer-theme="light"] .customer-welcome-card h1,
html[data-customer-theme="light"] .customer-project-card,
html[data-customer-theme="light"] .customer-ticket-card,
html[data-customer-theme="light"] .customer-theme-settings,
html[data-customer-theme="light"] .customer-support-form-heading h3,
html[data-customer-theme="light"] .customer-support-list-heading h3,
html[data-customer-theme="light"] .customer-project-form-heading strong,
html[data-customer-theme="light"] .customer-project-title-group h3,
html[data-customer-theme="light"] .customer-ticket-header h3 {
    color: #242922;
}

html[data-customer-theme="light"] .customer-portal-brand small,
html[data-customer-theme="light"] .customer-welcome-card p,
html[data-customer-theme="light"] .customer-panel-heading p,
html[data-customer-theme="light"] .customer-profile-card-heading p,
html[data-customer-theme="light"] .customer-profile-identity > p,
html[data-customer-theme="light"] .customer-profile-stats article > div > span,
html[data-customer-theme="light"] .customer-profile-note,
html[data-customer-theme="light"] .customer-profile-security-content p {
    color: #687064;
}

html[data-customer-theme="light"] .customer-field {
    color: #465040;
}

html[data-customer-theme="light"] .customer-project-group-heading,
html[data-customer-theme="light"] .customer-portal-panel[data-customer-view="projects"] .customer-project-group-heading {
    color: #34452a;
}

html[data-customer-theme="light"] .customer-portal-panel[data-customer-view="projects"] .customer-project-group-heading::before {
    background: #78934b;
}

html[data-customer-theme="light"] .customer-empty-state,
html[data-customer-theme="light"] .customer-portal-message {
    border-color: #d9ded4;
    background: #fff;
    color: #596254;
}

html[data-customer-theme="light"] .customer-project-progress-row {
    border: 1px solid #e1e5dc;
    background: #f7f8f5;
}

html[data-customer-theme="light"] .customer-project-progress-heading strong {
    color: #30362d;
}

html[data-customer-theme="light"] .customer-project-progress-heading > span {
    color: #4d681f;
}

html[data-customer-theme="light"] .customer-project-progress-track,
html[data-customer-theme="light"] .customer-project-summary-track {
    background: #e1e6dc;
}

html[data-customer-theme="light"] .customer-project-progress-bar,
html[data-customer-theme="light"] .customer-project-summary-bar {
    background: #789a42;
}

html[data-customer-theme="light"] .customer-project-progress-duration {
    color: #526b2f;
}

html[data-customer-theme="light"] .customer-project-gallery-heading {
    color: #435c2d;
}

html[data-customer-theme="light"] .customer-project-progress-deadline,
html[data-customer-theme="light"] .customer-project-meta span,
html[data-customer-theme="light"] .customer-project-details {
    color: #687064;
}

html[data-customer-theme="light"] .customer-project-status,
html[data-customer-theme="light"] .customer-ticket-status,
html[data-customer-theme="light"] .customer-project-type {
    background: #eef1eb;
    color: #41483b;
}

html[data-customer-theme="light"] .customer-project-status.is-pending,
html[data-customer-theme="light"] .customer-ticket-status.is-open {
    background: #fff2d6;
    color: #704d08;
}

html[data-customer-theme="light"] .customer-project-status.is-approved,
html[data-customer-theme="light"] .customer-project-status.is-in_progress,
html[data-customer-theme="light"] .customer-ticket-status.is-replied {
    background: #e4f1f7;
    color: #24546a;
}

html[data-customer-theme="light"] .customer-project-status.is-completed {
    background: #e8f2df;
    color: #385b22;
}

html[data-customer-theme="light"] .customer-project-status.is-rejected,
html[data-customer-theme="light"] .customer-ticket-status.is-closed {
    background: #f8e8e8;
    color: #783745;
}

html[data-customer-theme="light"] .customer-profile-verification.is-verified {
    border-color: #c8dfb5;
    background: #e8f2df;
    color: #385b22;
}

html[data-customer-theme="light"] .customer-profile-verification.is-unverified {
    border-color: #e8d5a8;
    background: #fff2d6;
    color: #704d08;
}

html[data-customer-theme="light"] .customer-panel-heading {
    border-color: #d9ded4;
}

html[data-customer-theme="light"] .customer-welcome-card .customer-eyebrow,
html[data-customer-theme="light"] .customer-panel-heading .customer-eyebrow {
    border-color: #dce5d2;
    background: #edf3e7;
    color: #4c7400;
}

html[data-customer-theme="light"] .customer-profile-hero,
html[data-customer-theme="light"] .customer-profile-security-content,
html[data-customer-theme="light"] .customer-profile-shortcuts button,
html[data-customer-theme="light"] .customer-project-card-content,
html[data-customer-theme="light"] .customer-ticket-conversation,
html[data-customer-theme="light"] .customer-support-form-heading,
html[data-customer-theme="light"] .customer-dashboard-nav {
    border-color: #dfe3da;
    background: #f7f8f5;
    color: #242922;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-profile-stats article:hover,
html[data-customer-theme="light"] .customer-profile-shortcuts button:hover,
html[data-customer-theme="light"] .customer-ticket-card:hover,
html[data-customer-theme="light"] .customer-ticket-card[open],
html[data-customer-theme="light"] .customer-project-card:hover,
html[data-customer-theme="light"] .customer-project-card[open] {
    border-color: #c9d1c1;
    background: #f7f8f5;
}

html[data-customer-theme="light"] .customer-dashboard-nav::before {
    border-color: #dce5d2;
    background: #e9f1df;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-dashboard-nav button,
html[data-customer-theme="light"] .customer-profile-shortcuts button,
html[data-customer-theme="light"] .customer-project-summary-title,
html[data-customer-theme="light"] .customer-project-summary-copy,
html[data-customer-theme="light"] .customer-ticket-header {
    color: #30362d;
}

html[data-customer-theme="light"] .customer-bottom-nav {
    border-color: #d9ded4;
    background: #fff;
    box-shadow: 0 4px 16px rgba(38, 48, 32, .09);
}

html[data-customer-theme="light"] .customer-bottom-nav button {
    color: #666e62;
}

html[data-customer-theme="light"] .customer-bottom-nav button.is-active,
html[data-customer-theme="light"] .customer-bottom-nav:not(:has(button.is-active)) button:first-child {
    background: #edf3e7;
    color: #4c7400;
}

html[data-customer-theme="light"] .customer-logout-button,
html[data-customer-theme="light"] .customer-outline-button,
html[data-customer-theme="light"] .customer-theme-option {
    border-color: #d5dbd0;
    background: #f7f8f5;
    color: #40483c;
}

html[data-customer-theme="light"] .customer-theme-option[aria-pressed="true"] {
    border-color: #9bb876;
    background: #edf3e7;
    color: #426600;
}

html[data-customer-theme="light"] .customer-logout-button:hover,
html[data-customer-theme="light"] .customer-outline-button:hover {
    border-color: #9bb876;
    color: #426600;
}

html[data-customer-theme="light"] .customer-field input,
html[data-customer-theme="light"] .customer-field textarea,
html[data-customer-theme="light"] .customer-field select,
html[data-customer-theme="light"] .customer-ticket-reply textarea {
    border-color: #d5dbd0;
    background: #fff;
    color: #242922;
}

html[data-customer-theme="light"] .customer-field input::placeholder,
html[data-customer-theme="light"] .customer-field textarea::placeholder {
    color: #899084;
}

html[data-customer-theme="light"] .customer-profile-card input[readonly] {
    background: #f1f3ee;
    color: #687064;
}

html[data-customer-theme="light"] .customer-project-preview {
    border-color: #d9ded4;
    background: #e8ebe4;
}

html[data-customer-theme="light"] .customer-project-meta span {
    background: #edf0e9;
}

html[data-customer-theme="light"] .customer-privacy-note,
html[data-customer-theme="light"] .customer-project-step-count,
html[data-customer-theme="light"] .customer-form-progress span,
html[data-customer-theme="light"] .customer-form-step,
html[data-customer-theme="light"] .customer-style-choice > span {
    border-color: #d9ded4;
    background: #f7f8f5;
    color: #485043;
}

html[data-customer-theme="light"] .customer-project-group-list > .customer-project-card:nth-child(4n + 1) .customer-project-card-summary,
html[data-customer-theme="light"] .customer-project-group-list > .customer-project-card:nth-child(4n + 2) .customer-project-card-summary,
html[data-customer-theme="light"] .customer-project-group-list > .customer-project-card:nth-child(4n + 3) .customer-project-card-summary,
html[data-customer-theme="light"] .customer-project-group-list > .customer-project-card:nth-child(4n) .customer-project-card-summary {
    color: #29262e;
}

html[data-customer-theme="light"] .customer-project-group-list > .customer-project-card {
    border-color: #d8d5df;
    background: #fff;
}

html[data-customer-theme="light"] .customer-project-group-list > .customer-project-card:nth-child(4n + 1) .customer-project-card-summary {
    background: #f3def6;
}

html[data-customer-theme="light"] .customer-project-group-list > .customer-project-card:nth-child(4n + 2) .customer-project-card-summary {
    background: #e5ddfb;
}

html[data-customer-theme="light"] .customer-project-group-list > .customer-project-card:nth-child(4n + 3) .customer-project-card-summary {
    background: #eaf3d8;
}

html[data-customer-theme="light"] .customer-project-group-list > .customer-project-card:nth-child(4n) .customer-project-card-summary {
    background: #dceff5;
}

html[data-customer-theme="light"] .customer-project-group-list > .customer-project-card:hover,
html[data-customer-theme="light"] .customer-project-group-list > .customer-project-card[open] {
    border-color: #c9c5d1;
}

html[data-customer-theme="light"] .customer-project-group-list > .customer-project-card[open] > .customer-project-card-content {
    border-color: #e1e2dc;
    background: #fff;
}

html[data-customer-theme="light"] .customer-image-preview-dialog {
    border-color: #d9ded4;
    background: #fff;
}

html[data-customer-theme="light"] .customer-welcome-mark,
html[data-customer-theme="light"] .customer-project-form-mark,
html[data-customer-theme="light"] .customer-profile-card-icon,
html[data-customer-theme="light"] .customer-profile-security-mark,
html[data-customer-theme="light"] .customer-support-form-icon,
html[data-customer-theme="light"] .customer-profile-avatar {
    border-color: #dce5d2;
    background: #edf3e7;
    color: #4c7400;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-welcome-mark i {
    color: #4c7400;
    filter: none;
}

html[data-customer-theme="light"] .dashboard-updated-pill {
    border-color: #d9ded4;
    background: #fff;
    color: #596254;
}

html[data-customer-theme="light"] .dashboard-updated-pill i,
html[data-customer-theme="light"] .customer-profile-note i,
html[data-customer-theme="light"] .customer-project-step-count i,
html[data-customer-theme="light"] .customer-support-list-heading > span i {
    color: #587b28;
}

html[data-customer-theme="light"] .customer-dashboard-nav {
    border-color: #d9ded4;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-dashboard-nav button.is-active,
html[data-customer-theme="light"] .customer-dashboard-nav button.is-active i {
    color: #426600;
}

html[data-customer-theme="light"] .customer-dashboard-nav button {
    color: #596254;
}

html[data-customer-theme="light"] .customer-dashboard-nav button:focus-visible,
html[data-customer-theme="light"] .customer-primary-button:focus-visible,
html[data-customer-theme="light"] .customer-outline-button:focus-visible,
html[data-customer-theme="light"] .customer-theme-option:focus-visible {
    outline-color: #587b28;
}

html[data-customer-theme="light"] .customer-profile-member-label {
    border-color: #dce5d2;
    background: #edf3e7;
    color: #426600;
}

html[data-customer-theme="light"] .customer-profile-stats .customer-profile-stat-icon {
    background: rgba(41, 38, 46, .08);
}

html[data-customer-theme="light"] .customer-project-form-heading strong,
html[data-customer-theme="light"] .customer-project-form-heading p,
html[data-customer-theme="light"] .customer-support-intro strong,
html[data-customer-theme="light"] .customer-support-intro p,
html[data-customer-theme="light"] .customer-support-form-heading h3,
html[data-customer-theme="light"] .customer-support-form-heading p,
html[data-customer-theme="light"] .customer-support-list-heading h3,
html[data-customer-theme="light"] .customer-support-list-heading p,
html[data-customer-theme="light"] .customer-support-list-heading > span,
html[data-customer-theme="light"] .customer-ticket-new h3,
html[data-customer-theme="light"] .customer-ticket-heading h3,
html[data-customer-theme="light"] .customer-ticket-heading time,
html[data-customer-theme="light"] .customer-ticket-chevron,
html[data-customer-theme="light"] .customer-ticket-message small,
html[data-customer-theme="light"] .customer-ticket-message time,
html[data-customer-theme="light"] .customer-support-form-footer > span,
html[data-customer-theme="light"] .customer-support-fields .customer-field > span {
    color: #596254;
}

html[data-customer-theme="light"] .customer-project-form-heading p,
html[data-customer-theme="light"] .customer-support-intro p,
html[data-customer-theme="light"] .customer-support-form-heading p,
html[data-customer-theme="light"] .customer-support-list-heading p {
    color: #687064;
}

html[data-customer-theme="light"] .customer-project-step-count,
html[data-customer-theme="light"] .customer-support-private {
    border-color: #dce5d2;
    background: #edf3e7;
    color: #426600;
}

html[data-customer-theme="light"] .customer-support-intro-icon {
    border-color: #d5e5e9;
    background: #edf6f7;
    color: #276071;
}

html[data-customer-theme="light"] .customer-support-form-footer {
    border-color: #d9ded4;
}

html[data-customer-theme="light"] .customer-form-progress span {
    color: #596254;
}

html[data-customer-theme="light"] .customer-form-progress span.is-active,
html[data-customer-theme="light"] .customer-form-progress span[aria-current="step"] {
    border-color: #c8d9b5;
    background: #edf3e7;
    color: #426600;
}

html[data-customer-theme="light"] .customer-form-progress span.is-active > i,
html[data-customer-theme="light"] .customer-form-progress span[aria-current="step"] > i {
    border-color: #c8d9b5;
    background: #dce9cc;
    color: #426600;
}

html[data-customer-theme="light"] .customer-form-progress span.is-active > b,
html[data-customer-theme="light"] .customer-form-progress span[aria-current="step"] > b,
html[data-customer-theme="light"] .customer-upload-zone,
html[data-customer-theme="light"] .customer-upload-zone i,
html[data-customer-theme="light"] .customer-choice-card i {
    color: #4c7400;
}

html[data-customer-theme="light"] .customer-form-step legend,
html[data-customer-theme="light"] .customer-style-heading h3,
html[data-customer-theme="light"] .customer-choice-card strong {
    color: #30362d;
}

html[data-customer-theme="light"] .customer-step-hint,
html[data-customer-theme="light"] .customer-style-heading span,
html[data-customer-theme="light"] .customer-choice-card small,
html[data-customer-theme="light"] .customer-upload-status,
html[data-customer-theme="light"] .customer-small-status,
html[data-customer-theme="light"] .customer-privacy-note {
    color: #687064;
}

html[data-customer-theme="light"] .customer-choice-card > span,
html[data-customer-theme="light"] .customer-style-choice > span,
html[data-customer-theme="light"] .customer-style-choice .customer-expert-choice {
    border-color: #d9ded4;
    background: #fff;
    color: #30362d;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-choice-card input:checked + span,
html[data-customer-theme="light"] .customer-style-choice input:checked + span {
    border-color: #9bb876;
    background: #f2f7ed;
    box-shadow: inset 0 0 0 1px rgba(88, 123, 40, .12);
}

html[data-customer-theme="light"] .customer-choice-card input:checked + span::after {
    background: #587b28;
    color: #fff;
}

html[data-customer-theme="light"] .customer-choice-card i,
html[data-customer-theme="light"] .customer-upload-zone i {
    border-color: #dce5d2;
    background: #edf3e7;
}

html[data-customer-theme="light"] .customer-upload-zone {
    border-color: #b5c99b;
    background: #f7faf3;
}

html[data-customer-theme="light"] .customer-project-form-mark {
    flex: 0 0 auto;
}

html[data-customer-theme="light"] .customer-field-error {
    color: #a3363d;
}

html[data-customer-theme="light"] .customer-privacy-note {
    border-color: #d9ded4;
    background: #f7f8f5;
}

html[data-customer-theme="light"] .customer-project-form .customer-form-actions {
    border-color: #d9ded4;
}

html[data-customer-theme="light"] .customer-project-form .customer-primary-button {
    background: #587b28;
    color: #fff;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-project-form .customer-primary-button:hover {
    background: #496b1e;
}

html[data-customer-theme="light"] .customer-ticket-message {
    border-color: #d9ded4;
    background: #fff;
    color: #30362d;
}

html[data-customer-theme="light"] .customer-ticket-message.is-customer {
    border-color: #d9ded4;
}

html[data-customer-theme="light"] .customer-ticket-message.is-admin {
    border-color: #cfe0e7;
    background: #f3f8fa;
}

html[data-customer-theme="light"] .customer-ticket-unread {
    color: #a3363d;
}

html[data-customer-theme="light"] .customer-ticket-status.is-open {
    background: #fff2d6;
    color: #704d08;
}

html[data-customer-theme="light"] .customer-ticket-card[open] .customer-ticket-header,
html[data-customer-theme="light"] .customer-ticket-card[open] .customer-ticket-conversation {
    border-color: #d9ded4;
}

html[data-customer-theme="light"] .customer-photo-action,
html[data-customer-theme="light"] .customer-photo-action:hover {
    border-color: #c8d9b5;
    background: #f7faf3;
    color: #30362d;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-photo-action-icon {
    border-color: #dce5d2;
    background: #edf3e7;
    color: #4c7400;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-photo-action-copy strong {
    color: #30362d;
}

html[data-customer-theme="light"] .customer-photo-action-copy small {
    color: #687064;
}

html[data-customer-theme="light"] .customer-photo-action-tile {
    border-color: #b8caa5;
    border-style: dashed;
    background: #f7faf3;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-photo-action-tile:hover {
    transform: none;
    border-color: #78934b;
    background: #edf3e7;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-profile-logout {
    border-color: #e3c7c7;
    background: #fbf2f2;
    color: #963d43;
}

html[data-customer-theme="light"] .customer-profile-logout:hover {
    border-color: #d9a9a9;
    background: #f8e8e8;
    color: #842f36;
}

html[data-customer-theme="light"] .customer-notification-badge,
html[data-customer-theme="light"] .customer-mobile-notification-badge {
    background: #587b28;
    color: #fff;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-project-summary-chevron,
html[data-customer-theme="light"] .customer-project-card[open] .customer-project-summary-chevron {
    color: #40562a;
}

html[data-customer-theme="light"] .customer-portal-notice,
html[data-customer-theme="light"] .customer-form-message:not(.is-error) {
    color: #426600;
}

html[data-customer-theme="light"] .customer-form-message.is-error,
html[data-customer-theme="light"] .customer-portal-notice.is-error {
    color: #a3363d;
}

html[data-customer-theme="light"] .customer-image-preview-dialog {
    color: #30362d;
}

html[data-customer-theme="light"] .customer-profile-shortcuts button > i:first-child {
    border-color: #dce5d2;
    background: #edf3e7;
    color: #4c7400;
}

html[data-customer-theme="light"] .customer-private-image-item,
html[data-customer-theme="light"] .customer-private-image-item > .customer-private-image-preview {
    border-color: #d9ded4;
    background: #e8ebe4;
    color: #596254;
}

html[data-customer-theme="light"] .customer-style-choice .customer-expert-choice strong {
    color: #30362d;
}

html[data-customer-theme="light"] .customer-field select option {
    background: #fff;
    color: #30362d;
}

html[data-customer-theme="light"] .customer-auth-sheet {
    border-color: #d9ded4;
    background: #fff;
    color: #30362d;
}

html[data-customer-theme="light"] .customer-auth-sheet-handle {
    background: #d9ded4;
}

html[data-customer-theme="light"] .customer-auth-sheet-header h2 {
    color: #30362d;
}

html[data-customer-theme="light"] .customer-auth-sheet-header p,
html[data-customer-theme="light"] .customer-auth-form label,
html[data-customer-theme="light"] .customer-auth-status {
    color: #596254;
}

html[data-customer-theme="light"] .customer-auth-eyebrow,
html[data-customer-theme="light"] .customer-auth-tabs button[aria-selected="true"],
html[data-customer-theme="light"] .customer-auth-method-link {
    color: #4c7400;
}

html[data-customer-theme="light"] .customer-auth-close {
    border-color: #d9ded4;
    background: #f7f8f5;
    color: #596254;
}

html[data-customer-theme="light"] .customer-auth-tabs {
    border-color: #d9ded4;
    background: #f1f3ee;
}

html[data-customer-theme="light"] .customer-auth-tabs::before {
    border-color: #dce5d2;
    background: #e6efdc;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-auth-tabs button {
    color: #687064;
}

html[data-customer-theme="light"] .customer-auth-form input {
    border-color: #d5dbd0;
    background: #fff;
    color: #30362d;
}

html[data-customer-theme="light"] .customer-auth-form input::placeholder {
    color: #899084;
}

html[data-customer-theme="light"] .customer-auth-form input:focus {
    border-color: #9bb876;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(88, 123, 40, .12);
}

html[data-customer-theme="light"] .customer-auth-status.is-error {
    color: #a3363d;
}

html[data-customer-theme="light"] .customer-auth-status.is-success {
    color: #426600;
}

html[data-customer-theme="light"] .customer-auth-status.is-pending {
    color: #704d08;
}

html[data-customer-theme="light"] .customer-auth-submit {
    background: #587b28;
    color: #fff;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-auth-submit:not(:disabled):hover {
    background: #496b1e;
    box-shadow: none;
}

html[data-customer-theme="light"] .calculator-sheet,
html[data-customer-theme="light"] .calculator-sheet-header {
    border-color: #d9ded4;
    background: #fff;
    color: #30362d;
    box-shadow: none;
}

html[data-customer-theme="light"] .calculator-sheet-header h2 {
    color: #30362d;
}

html[data-customer-theme="light"] .calculator-sheet-close {
    color: #596254;
}

html[data-customer-theme="light"] .calculator-sheet-close:hover,
html[data-customer-theme="light"] .calculator-sheet-close:focus-visible {
    background: #edf3e7;
    color: #426600;
}

html[data-customer-theme="light"] .calculator-sheet-loading {
    color: #596254;
}

html[data-customer-theme="light"] .calculator-sheet-loading.is-error {
    color: #a3363d;
}

html[data-customer-theme="light"] .calculator-sheet-retry {
    border-color: #c8d9b5;
    background: #edf3e7;
    color: #426600;
}

.customer-support-workspace {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding-bottom: clamp(2rem, 6vh, 4rem);
}

.customer-support-workspace > .customer-panel-heading {
    display: block;
    margin-bottom: 1.2rem;
}

.customer-support-workspace > .customer-panel-heading h2 {
    margin-top: .3rem;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    line-height: 1.5;
}

.customer-support-workspace > .customer-panel-heading h2::before {
    display: none;
}

.customer-support-workspace > .customer-panel-heading p {
    max-width: 42rem;
    margin-top: .4rem;
    line-height: 1.8;
}

.customer-support-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1rem;
    min-height: 6rem;
    margin-bottom: 1.6rem;
    padding: 1rem clamp(1rem, 2.5vw, 1.5rem);
    border-color: #303334;
    border-radius: 1rem;
    background: #121415;
    box-shadow: none;
}

.customer-support-intro-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .8rem;
    box-shadow: none;
}

.customer-support-intro > div {
    min-width: 0;
}

.customer-support-intro strong {
    display: block;
    line-height: 1.6;
    font-size: .9rem;
}

.customer-support-intro p {
    margin: .2rem 0 0;
    font-size: .7rem;
    line-height: 1.8;
}

.customer-support-list-heading {
    min-width: 0;
    align-items: flex-start;
    margin: 0 0 .85rem;
    padding-inline: .5rem;
}

.customer-support-list-heading > div {
    min-width: 0;
}

.customer-support-list-heading > span {
    flex: 0 0 auto;
}

.customer-support-list-heading h3 {
    font-size: 1rem;
}

.customer-support-list-heading p {
    font-size: .7rem;
}

.customer-ticket-list {
    display: grid;
    gap: .7rem;
    margin: 0 0 1.5rem;
    padding-inline: .2rem;
}

.customer-ticket-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 0;
    border-color: rgba(148, 163, 184, .15);
    border-radius: 1.15rem;
    background: #111820;
    box-shadow: none;
}

.customer-ticket-card:hover,
.customer-ticket-card[open] {
    border-color: rgba(56, 189, 248, .32);
    box-shadow: none;
    transform: none;
}

.customer-ticket-header {
    min-height: 5rem;
    padding: 1rem 1.25rem;
}

.customer-ticket-heading {
    gap: .28rem;
}

.customer-ticket-heading h3 {
    color: #f1f5f9;
    font-size: .85rem;
}

.customer-ticket-heading time {
    font-size: .65rem;
}

.customer-ticket-status {
    padding: .38rem .65rem;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 99px;
    background: rgba(148, 163, 184, .07);
    font-size: .62rem;
}

.customer-ticket-chevron {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: .7rem;
    background: rgba(148, 163, 184, .05);
}

.customer-ticket-card[open] .customer-ticket-chevron {
    border-color: rgba(56, 189, 248, .2);
    background: rgba(56, 189, 248, .08);
    color: #7dd3fc;
}

.customer-ticket-conversation {
    gap: .85rem;
    padding: 1.15rem clamp(.85rem, 3vw, 1.5rem) 1.3rem;
    background: #0d1218;
}

.customer-ticket-message {
    max-width: min(88%, 48rem);
    padding: .9rem 1rem;
    border-radius: 1rem;
    box-shadow: none;
}

.customer-ticket-message small {
    display: block;
    margin-bottom: .25rem;
    font-size: .64rem;
    font-weight: 900;
}

.customer-ticket-message p {
    margin: .25rem 0 .45rem;
    font-size: .78rem;
    line-height: 1.95;
}

.customer-ticket-message time {
    display: block;
    text-align: left;
}

.customer-ticket-reply {
    align-items: stretch;
    margin-top: .3rem;
    padding: .75rem;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 1rem;
    background: rgba(8, 13, 23, .58);
}

.customer-ticket-reply textarea {
    min-height: 3rem;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.customer-ticket-reply textarea:focus {
    border-color: rgba(56, 189, 248, .3);
    background: rgba(3, 8, 17, .35);
}

.customer-ticket-reply .customer-outline-button {
    min-width: 7.25rem;
    align-self: flex-end;
    border-radius: .8rem;
}

.customer-ticket-new {
    margin-top: 1.5rem;
    padding: clamp(1rem, 3vw, 1.75rem);
    border-color: #303334;
    border-radius: 1rem;
    background: #121415;
    box-shadow: none;
}

.customer-support-form-heading {
    margin-bottom: 1.1rem;
}

.customer-support-form-heading h3 {
    font-size: .95rem;
}

.customer-support-form-heading p {
    font-size: .7rem;
}

@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .customer-ticket-card::details-content {
        transition-duration: .48s;
        transition-timing-function: cubic-bezier(.22, 1, .36, 1);
    }
}

@media (max-width: 600px) {
    .customer-support-intro {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: .75rem;
        row-gap: .65rem;
    }

    .customer-ticket-header {
        gap: .5rem;
        padding: .85rem;
    }

    .customer-ticket-heading {
        flex: 1;
    }

    .customer-ticket-status {
        max-width: 6.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .customer-ticket-message {
        max-width: 94%;
    }

    .customer-ticket-reply {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-ticket-reply .customer-outline-button {
        width: 100%;
    }

    .customer-support-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-support-form-footer .customer-primary-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-support-workspace *,
    .customer-support-workspace *::before,
    .customer-support-workspace *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

html[data-customer-theme="light"] .customer-ticket-card {
    border-color: #d9ded4;
    background: #fff;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-ticket-card:hover,
html[data-customer-theme="light"] .customer-ticket-card[open] {
    border-color: #b9caa6;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-ticket-heading h3,
html[data-customer-theme="light"] .customer-support-form-heading h3 {
    color: #30362d;
}

html[data-customer-theme="light"] .customer-ticket-conversation {
    background: #f7f8f5;
}

html[data-customer-theme="light"] .customer-ticket-message p {
    color: #30362d;
}

html[data-customer-theme="light"] .customer-ticket-reply {
    border-color: #d9ded4;
    background: #fff;
}

html[data-customer-theme="light"] .customer-ticket-new {
    border-color: #d9ded4;
    background: #fff;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-support-intro {
    border-color: #d9ded4;
    background: #fff;
    box-shadow: none;
}

.customer-support-hero {
    min-height: 8rem;
    padding-block: 1.25rem;
    border-color: #303334;
    border-radius: 1rem;
    background: #121415;
    box-shadow: none;
}

.customer-support-hero::before,
.customer-support-hero::after,
.customer-support-hero .customer-welcome-mark::before {
    display: none;
}

.customer-support-hero .customer-eyebrow {
    border: 0;
    background: transparent;
    padding: 0;
    color: #c8ff28;
}

.customer-support-hero h1 {
    margin-top: .35rem;
    font-size: clamp(1.25rem, 3vw, 1.65rem);
    line-height: 1.5;
}

.customer-support-hero p {
    max-width: 42rem;
    margin-top: .35rem;
    line-height: 1.8;
}

.customer-support-hero .customer-welcome-mark {
    width: 3.5rem;
    height: 3.5rem;
    border-color: #343738;
    border-radius: .9rem;
    background: #202728;
    color: #c8ff28;
    box-shadow: none;
    font-size: 1.35rem;
}

html[data-customer-theme="light"] .customer-support-hero {
    border-color: #d9ded4;
    background: #fff;
    box-shadow: none;
}

html[data-customer-theme="light"] .customer-support-hero h1 {
    color: #242922;
}

html[data-customer-theme="light"] .customer-support-hero p {
    color: #687064;
}

html[data-customer-theme="light"] .customer-support-hero .customer-welcome-mark {
    border-color: #dce5d2;
    background: #edf3e7;
    color: #4c7400;
}