:root {
    --weltew: #023b59;
    --weltew-soft: #e8f1f6;
    --newjoy: #e15715;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #dbe3ec;
    --panel: #ffffff;
    --page: #eef2f6;
    --green: #0f766e;
    --shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--ink);
    background: var(--page);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 72px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 14px clamp(18px, 4vw, 56px);
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.site-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.site-brand span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-brand strong {
    font-size: 16px;
    line-height: 1.1;
}

.site-brand small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.site-nav {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.site-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 8px;
    color: #475569;
    font-size: 14px;
    font-weight: 800;
}

.site-nav a:hover,
.site-nav a.is-active {
    color: var(--weltew);
    background: var(--weltew-soft);
}

.header-login,
.nav-toggle,
.btn-primary,
.btn-ghost,
.login-submit {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    font-weight: 900;
}

.header-login {
    padding: 0 14px;
    color: #fff;
    background: var(--weltew);
}

.nav-toggle {
    display: none;
    width: 42px;
    color: var(--ink);
    background: #f1f5f9;
    font-size: 22px;
}

main {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
    padding: 28px 0 38px;
}

.public-home {
    background: #071824;
}

.public-home .site-header,
.public-home .site-footer {
    display: none;
}

.public-home main {
    width: 100%;
    min-height: 100vh;
    padding: 0;
}

.public-login main {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 4vw, 56px);
}

.welcome-screen {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: clamp(22px, 4vw, 64px);
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(2, 59, 89, 0.98), rgba(7, 24, 36, 0.9) 52%, rgba(225, 87, 21, 0.92)),
        url("../../admin/uploads/thumbnail/traverta.jpg");
    background-size: cover;
    background-position: center;
}

.welcome-screen__inner {
    width: min(980px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    text-align: center;
}

.welcome-copy {
    max-width: 870px;
}

.welcome-copy h1 {
    margin: 0;
    font-size: clamp(42px, 6vw, 82px);
    line-height: 1;
    letter-spacing: 0;
}

.welcome-copy p {
    max-width: 680px;
    margin: 20px auto 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.55;
}

.welcome-brand-strip {
    width: min(820px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: clamp(30px, 5vw, 48px);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.welcome-logo {
    width: 156px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.welcome-logo svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 42px;
    object-fit: contain;
    object-position: left center;
}

.welcome-logo--newjoy {
    width: 134px;
}

.welcome-brand-strip article {
    padding: 18px 26px;
}

.welcome-brand-strip article + article {
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.welcome-brand-strip p {
    max-width: 330px;
    margin: 13px auto 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.45;
}

.welcome-login {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(28px, 4vw, 42px);
    padding: 0 22px;
    border-radius: 8px;
    color: var(--weltew);
    background: #fff;
    font-weight: 900;
}

.portal-hero {
    min-height: 470px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 24px;
    align-items: stretch;
}

.portal-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(28px, 5vw, 54px);
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(2, 59, 89, 0.94), rgba(15, 118, 110, 0.86)),
        var(--hero-image);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow);
}

.eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.portal-hero h1,
.login-copy h1 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1;
    letter-spacing: 0;
}

.portal-hero p,
.login-copy p,
.dashboard-copy p {
    max-width: 660px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.55;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.btn-primary,
.btn-ghost {
    padding: 0 18px;
}

.btn-primary {
    color: var(--weltew);
    background: #fff;
}

.btn-ghost {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

.portal-hero__panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.portal-status {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--newjoy), #f59e0b);
}

.portal-status span,
.portal-metrics span,
.document-card span,
.timeline-list span {
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.portal-status strong {
    margin-top: 8px;
    font-size: 31px;
    line-height: 1.05;
}

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

.portal-metrics div {
    min-height: 116px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
    border-radius: 8px;
    background: #f8fafc;
}

.portal-metrics i {
    color: var(--weltew);
    font-size: 22px;
}

.portal-metrics strong {
    font-size: 28px;
}

.portal-metrics span {
    color: var(--muted);
}

.brand-band,
.document-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.brand-card {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    border-radius: 8px;
    color: #fff;
    box-shadow: var(--shadow);
}

.brand-card--weltew {
    background: var(--weltew);
}

.brand-card--newjoy {
    background: var(--newjoy);
}

.brand-card img {
    max-width: 190px;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
}

.brand-card p {
    max-width: 460px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
}

.brand-card a {
    width: fit-content;
    padding: 10px 13px;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    font-weight: 900;
}

.content-section,
.portal-dashboard {
    margin-top: 20px;
    padding: 24px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.section-head .eyebrow,
.dashboard-copy .eyebrow,
.login-copy .eyebrow {
    color: var(--newjoy);
}

.section-head h2,
.dashboard-copy h2 {
    margin: 0;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.08;
}

.section-head a {
    flex: 0 0 auto;
    padding: 10px 13px;
    border-radius: 8px;
    color: var(--weltew);
    background: var(--weltew-soft);
    font-weight: 900;
}

.document-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.document-card {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.document-card i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 8px;
    color: #fff;
    background: var(--weltew);
    font-size: 21px;
}

.document-card span {
    color: var(--muted);
}

.document-card h3 {
    margin: 8px 0 10px;
    font-size: 19px;
}

.document-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.portal-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 420px);
    gap: 24px;
    align-items: center;
}

.dashboard-copy p {
    color: var(--muted);
}

.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.timeline-list div {
    min-height: 76px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.timeline-list i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: var(--green);
    font-size: 19px;
}

.timeline-list span {
    color: var(--muted);
}

.timeline-list strong {
    text-align: right;
}

.login-layout {
    width: min(470px, 100%);
}

.login-sidebar {
    position: sticky;
    top: 92px;
    align-self: start;
    min-height: calc(100vh - 210px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
    border-radius: 8px;
    color: #fff;
    background: #092335;
    box-shadow: var(--shadow);
}

.login-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
}

.login-sidebar__brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.login-sidebar__brand span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.login-sidebar__brand small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.login-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-sidebar__nav a,
.login-sidebar__back {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 900;
}

.login-sidebar__nav a:hover,
.login-sidebar__nav a.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.login-sidebar__nav i,
.login-sidebar__back i {
    width: 22px;
    text-align: center;
    font-size: 17px;
}

.login-sidebar__back {
    justify-content: center;
    margin-top: auto;
    color: #092335;
    background: #fff;
}

.login-shell {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-copy {
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 5vw, 54px);
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--weltew), var(--green));
    box-shadow: var(--shadow);
}

.login-copy p {
    color: rgba(255, 255, 255, 0.82);
}

.login-back {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 42px;
    padding: 10px 13px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    font-weight: 900;
}

.login-brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.login-brand-list div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    font-weight: 900;
}

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.brand-dot--weltew {
    background: #47b8c0;
}

.brand-dot--newjoy {
    background: var(--newjoy);
}

.login-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.login-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.login-card__head img {
    width: min(190px, 62%);
    max-height: 44px;
    object-fit: contain;
    object-position: left center;
}

.login-card__head strong {
    color: var(--muted);
}

.login-card label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}

.login-card input[type="text"],
.login-card input[type="password"] {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    outline: none;
}

.login-card input:focus {
    border-color: var(--weltew);
    box-shadow: 0 0 0 3px rgba(2, 59, 89, 0.13);
}

.password-field {
    display: grid;
    grid-template-columns: 1fr 46px;
}

.password-field input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.password-field button {
    border: 1px solid #cbd5e1;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    color: var(--muted);
    background: #f8fafc;
    cursor: pointer;
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.remember {
    flex-direction: row !important;
    align-items: center;
}

.remember input {
    width: 16px;
    height: 16px;
}

.login-options a {
    color: var(--weltew);
    font-size: 13px;
    font-weight: 900;
}

.login-submit {
    width: 100%;
    color: #fff;
    background: var(--weltew);
}

.login-note {
    margin: 0;
    padding: 13px;
    border-radius: 8px;
    color: var(--muted);
    background: #f8fafc;
    line-height: 1.45;
}

.dealer-hero {
    min-height: 360px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(28px, 5vw, 54px);
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(2, 59, 89, 0.95), rgba(15, 118, 110, 0.75)),
        url("../../admin/uploads/thumbnail/traverta.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow);
}

.dealer-hero h1 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
}

.dealer-hero p {
    max-width: 650px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.55;
}

.dealer-hero__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 10px;
}

.dealer-summary,
.dealer-doc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.dealer-summary article,
.dealer-doc-card,
.dealer-section,
.dealer-brand-card {
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.dealer-summary article {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
}

.dealer-summary i,
.dealer-doc-card i,
.dealer-list i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: var(--weltew);
    font-size: 20px;
}

.dealer-summary span,
.dealer-doc-card span,
.dealer-list span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.dealer-summary strong {
    color: var(--ink);
    font-size: 28px;
}

.dealer-section {
    margin-top: 18px;
    padding: 24px;
}

.dealer-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.dealer-section__head .eyebrow,
.dealer-brand-card .eyebrow {
    color: var(--newjoy);
}

.dealer-section__head h2,
.dealer-brand-card h2 {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.08;
}

.dealer-section__head a {
    flex: 0 0 auto;
    padding: 10px 13px;
    border-radius: 8px;
    color: var(--weltew);
    background: var(--weltew-soft);
    font-weight: 900;
}

.dealer-doc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dealer-doc-card {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid var(--line);
    box-shadow: none;
}

.dealer-doc-card h3 {
    margin: 18px 0 10px;
    font-size: 19px;
}

.dealer-doc-card p,
.dealer-brand-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.dealer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    gap: 18px;
    align-items: stretch;
}

.dealer-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.dealer-list article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.dealer-list strong {
    display: block;
    margin-bottom: 4px;
}

.dealer-brand-card {
    margin-top: 18px;
    padding: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--weltew), var(--newjoy));
}

.dealer-brand-card .eyebrow,
.dealer-brand-card p {
    color: rgba(255, 255, 255, 0.78);
}

.dealer-brand-card div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.dealer-brand-card div span {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    font-weight: 900;
}

.public-dashboard,
.public-collections {
    background: #eef2f6;
}

.public-dashboard .site-header,
.public-collections .site-header {
    display: none;
}

.public-dashboard main,
.public-collections main {
    width: 100%;
    padding: 0;
}

.public-dashboard .site-footer,
.public-collections .site-footer {
    width: calc(100% - 330px);
    margin-left: 310px;
}

.dealer-layout {
    display: block;
    padding-left: 280px;
}

.dealer-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 18;
    width: 280px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 22px;
    color: #fff;
    background: #092335;
}

.dealer-sidebar__brand {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dealer-sidebar__brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.dealer-sidebar__brand span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dealer-sidebar__brand strong {
    font-size: 17px;
}

.dealer-sidebar__brand small,
.dealer-sidebar__support span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.dealer-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dealer-sidebar__nav a,
.dealer-sidebar__logout {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 900;
}

.dealer-sidebar__nav a:hover,
.dealer-sidebar__nav a.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.dealer-sidebar__nav i,
.dealer-sidebar__logout i {
    width: 24px;
    text-align: center;
    font-size: 18px;
}

.dealer-sidebar__support {
    margin-top: auto;
    padding: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
}

.dealer-sidebar__support strong {
    display: block;
    margin-top: 8px;
    line-height: 1.35;
}

.dealer-sidebar__logout {
    justify-content: center;
    color: #092335;
    background: #fff;
}

.dealer-content {
    min-width: 0;
    padding: 24px;
}

.campaign-slider {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.campaign-slider__track {
    display: flex;
    width: 200%;
    animation: campaignSlide 12s infinite;
}

.campaign-slide {
    min-height: 440px;
    width: 50%;
    display: flex;
    align-items: flex-end;
    padding: clamp(28px, 5vw, 58px);
    color: #fff;
    background:
        linear-gradient(135deg, rgba(2, 59, 89, 0.96), rgba(2, 59, 89, 0.58) 55%, rgba(225, 87, 21, 0.42)),
        var(--slide-image, linear-gradient(135deg, #023b59, #0f766e));
    background-size: cover;
    background-position: center;
}

.campaign-slide--newjoy {
    background:
        linear-gradient(135deg, rgba(225, 87, 21, 0.96), rgba(15, 118, 110, 0.86)),
        var(--slide-image, linear-gradient(135deg, #e15715, #0f766e));
}

.campaign-slide div {
    max-width: 760px;
}

.campaign-slide h1 {
    margin: 0;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1;
}

.campaign-slide p {
    max-width: 650px;
    margin: 16px 0 24px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 17px;
    line-height: 1.55;
}

.campaign-slider__dots {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: flex;
    gap: 8px;
}

.campaign-slider__dots span {
    width: 28px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
}

.campaign-slider__dots span:nth-child(1) {
    animation: campaignDotOne 12s infinite;
}

.campaign-slider__dots span:nth-child(2) {
    animation: campaignDotTwo 12s infinite;
}

.campaign-slider__dots span:nth-child(3) {
    animation: campaignDotThree 25s infinite;
}

.campaign-slider__dots span:nth-child(4) {
    animation: campaignDotFour 25s infinite;
}

.campaign-slider__dots span:nth-child(5) {
    animation: campaignDotFive 25s infinite;
}

.announcement-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.9fr);
    gap: 14px;
    margin-top: 18px;
}

.announcement-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.announcement-card--wide {
    grid-row: span 2;
    align-content: start;
    background: #fff7ed;
}

.announcement-card i {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: var(--newjoy);
    font-size: 21px;
}

.announcement-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.announcement-card h3 {
    margin: 7px 0 9px;
    font-size: 20px;
}

.announcement-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.collection-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.collection-list article {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.collection-list img {
    width: 108px;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    object-fit: cover;
}

.collection-list strong {
    display: block;
    margin-bottom: 6px;
}

.collection-list span {
    color: var(--muted);
    line-height: 1.45;
}

.new-products-panel {
    margin-top: 18px;
    padding: 24px;
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(2, 59, 89, 0.84)),
        url("../../admin/uploads/thumbnail/alacati.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow);
}

.new-products-panel .eyebrow,
.new-products-panel p {
    color: rgba(255, 255, 255, 0.78);
}

.new-products-panel h2 {
    margin: 0;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.08;
}

.new-products-panel p {
    margin: 16px 0 0;
    line-height: 1.55;
}

.new-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.new-product-tags span {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    font-weight: 900;
}

.collections-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.collections-hero {
    min-height: 330px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(28px, 5vw, 54px);
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(2, 59, 89, 0.96), rgba(15, 118, 110, 0.72)),
        url("../../admin/uploads/thumbnail/aqua.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow);
}

.collections-hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
}

.collections-hero p {
    max-width: 680px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.55;
}

.brand-switcher {
    padding: 24px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.brand-switcher > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.brand-choice-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.brand-choice {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.brand-choice:hover {
    transform: translateY(-2px);
}

.brand-choice img {
    max-width: 190px;
    max-height: 52px;
    object-fit: contain;
    object-position: left center;
}

.brand-choice span {
    color: var(--muted);
    line-height: 1.5;
}

#brand-weltew:checked ~ .brand-choice-row .brand-choice--weltew,
#brand-newjoy:checked ~ .brand-choice-row .brand-choice--newjoy {
    border-color: var(--weltew);
    box-shadow: 0 0 0 3px rgba(2, 59, 89, 0.12);
}

.collection-panels {
    margin-top: 18px;
}

.collection-panel {
    display: none;
}

#brand-weltew:checked ~ .collection-panels .collection-panel--weltew,
#brand-newjoy:checked ~ .collection-panels .collection-panel--newjoy {
    display: block;
}

.collection-panel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-top: 8px;
}

.collection-panel__head .eyebrow {
    color: var(--newjoy);
}

.collection-panel__head h2 {
    margin: 0;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.08;
}

.collection-count {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--weltew);
    background: var(--weltew-soft);
    font-weight: 900;
}

.collection-card-grid {
    --collection-columns: 1;
    display: grid;
    grid-template-columns: repeat(var(--collection-columns), minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.collection-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.collection-card:hover {
    transform: translateY(-3px);
    border-color: rgba(2, 59, 89, 0.28);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.collection-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: block;
    object-fit: cover;
    background: #e2e8f0;
}

.collection-card div {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px;
}

.collection-card span {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--weltew);
    background: var(--weltew-soft);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.collection-card h3 {
    margin: 12px 0 10px;
    font-size: 20px;
    line-height: 1.15;
}

.collection-card p {
    flex: 1;
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

@keyframes campaignSlide {
    0%,
    45% {
        transform: translateX(0);
    }

    50%,
    95% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes campaignDotOne {
    0%,
    45%,
    100% {
        background: #fff;
    }

    50%,
    95% {
        background: rgba(255, 255, 255, 0.42);
    }
}

@keyframes campaignDotTwo {
    0%,
    45%,
    100% {
        background: rgba(255, 255, 255, 0.42);
    }

    50%,
    95% {
        background: #fff;
    }
}

@keyframes campaignDotThree {
    0%,
    36%,
    60%,
    100% {
        background: rgba(255, 255, 255, 0.42);
    }

    40%,
    56% {
        background: #fff;
    }
}

@keyframes campaignDotFour {
    0%,
    56%,
    80%,
    100% {
        background: rgba(255, 255, 255, 0.42);
    }

    60%,
    76% {
        background: #fff;
    }
}

@keyframes campaignDotFive {
    0%,
    76%,
    100% {
        background: rgba(255, 255, 255, 0.42);
    }

    80%,
    96% {
        background: #fff;
    }
}

.site-footer {
    width: min(1180px, calc(100% - 36px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 auto 24px;
    padding: 18px 0 0;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

.site-footer div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-footer strong {
    color: var(--ink);
}

@media (max-width: 980px) {
    .public-dashboard .site-footer,
    .public-collections .site-footer {
        width: min(100% - 36px, 1180px);
        margin-left: auto;
    }

    .dealer-layout {
        display: grid;
        grid-template-columns: 1fr;
        padding-left: 0;
    }

    .dealer-sidebar {
        position: sticky;
        left: auto;
        top: 0;
        z-index: 15;
        width: auto;
        height: auto;
        gap: 14px;
        padding: 14px;
    }

    .dealer-sidebar__brand,
    .dealer-sidebar__support,
    .dealer-sidebar__logout {
        display: none;
    }

    .dealer-sidebar__nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .dealer-sidebar__nav a {
        flex: 0 0 auto;
        min-height: 42px;
        white-space: nowrap;
    }

    .dealer-content {
        padding: 18px;
    }

    .campaign-slide {
        min-height: 390px;
    }

    .collections-hero {
        display: grid;
        min-height: 320px;
    }

    .brand-choice-row,
    .collection-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .announcement-grid {
        grid-template-columns: 1fr;
    }

    .announcement-card--wide {
        grid-row: auto;
    }

    .site-header {
        grid-template-columns: auto auto auto;
    }

    .nav-toggle {
        display: inline-flex;
        justify-self: end;
    }

    .site-nav {
        position: absolute;
        top: calc(100% + 1px);
        left: 18px;
        right: 18px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        box-shadow: var(--shadow);
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav a {
        justify-content: flex-start;
    }

    .portal-hero,
    .portal-dashboard,
    .login-layout,
    .login-shell,
    .dealer-hero,
    .dealer-grid {
        grid-template-columns: 1fr;
    }

    .login-sidebar {
        position: static;
        min-height: 0;
    }

    .login-sidebar__nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .login-sidebar__nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .login-sidebar__back {
        display: none;
    }

    .dealer-hero {
        display: grid;
        align-items: end;
    }

    .dealer-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-hero__content,
    .login-copy {
        min-height: 430px;
    }

    .document-grid,
    .dealer-doc-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .dealer-content {
        padding: 12px;
    }

    .campaign-slide {
        min-height: 430px;
        padding: 22px;
    }

    .campaign-slide h1 {
        font-size: 34px;
    }

    .campaign-slide p {
        font-size: 15px;
    }

    .collections-hero,
    .brand-switcher {
        padding: 18px;
    }

    .collections-hero {
        min-height: 360px;
    }

    .collections-hero h1 {
        font-size: 34px;
    }

    .collections-hero p {
        font-size: 15px;
    }

    .brand-choice-row,
    .collection-card-grid {
        grid-template-columns: 1fr;
    }

    .brand-choice {
        min-height: 132px;
    }

    .collection-panel__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .campaign-slider__dots {
        right: 18px;
        bottom: 18px;
    }

    .dealer-sidebar__nav a span {
        font-size: 13px;
    }

    .announcement-card,
    .collection-list article {
        grid-template-columns: 1fr;
    }

    .collection-list img {
        width: 100%;
    }

    .site-header {
        min-height: 64px;
        gap: 10px;
        padding: 11px 14px;
    }

    .site-brand small,
    .header-login span {
        display: none;
    }

    .header-login,
    .nav-toggle {
        width: 40px;
        padding: 0;
    }

    main,
    .site-footer {
        width: min(100% - 24px, 1180px);
    }

    .portal-hero__content,
    .portal-hero__panel,
    .content-section,
    .portal-dashboard,
    .dealer-hero,
    .dealer-section,
    .dealer-brand-card,
    .login-sidebar,
    .login-copy,
    .login-card {
        padding: 18px;
    }

    .portal-hero__content,
    .login-copy {
        min-height: auto;
    }

    .portal-hero h1,
    .login-copy h1 {
        font-size: 36px;
    }

    .portal-metrics,
    .brand-band,
    .dealer-summary {
        grid-template-columns: 1fr;
    }

    .section-head,
    .site-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .login-shell {
        gap: 16px;
    }

    .dealer-hero {
        min-height: 340px;
    }

    .dealer-hero h1 {
        font-size: 34px;
    }

    .dealer-hero p {
        font-size: 15px;
    }

    .dealer-hero__actions,
    .dealer-section__head {
        align-items: stretch;
        flex-direction: column;
    }

    .dealer-hero__actions a,
    .dealer-section__head a {
        width: 100%;
    }

    .dealer-summary article {
        min-height: 112px;
    }

    .dealer-doc-card {
        min-height: 190px;
    }

    .login-copy {
        min-height: 0;
    }

    .welcome-screen {
        align-items: center;
        padding: 18px;
    }

    .welcome-copy h1 {
        font-size: 32px;
        line-height: 1.05;
    }

    .welcome-copy p {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.38;
    }

    .welcome-logo {
        width: 126px;
        min-height: 28px;
    }

    .welcome-logo--newjoy {
        width: 106px;
    }

    .welcome-logo svg {
        max-height: 28px;
    }

    .welcome-brand-strip {
        grid-template-columns: 1fr;
        margin-top: 22px;
    }

    .welcome-brand-strip article {
        padding: 13px 8px;
    }

    .welcome-brand-strip article + article {
        border-top: 1px solid rgba(255, 255, 255, 0.22);
        border-left: 0;
    }

    .welcome-brand-strip p {
        margin-top: 10px;
        font-size: 13.5px;
        line-height: 1.35;
    }

    .welcome-login {
        width: 100%;
        min-height: 48px;
        margin-top: 22px;
        padding: 0 14px;
    }

    .login-back {
        margin-bottom: 28px;
    }

    .timeline-list div {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .timeline-list strong {
        grid-column: 2;
        text-align: left;
    }
}

@media (max-width: 720px) and (max-height: 740px) {
    .welcome-screen {
        align-items: flex-start;
        padding: 14px 18px;
    }

    .welcome-copy h1 {
        font-size: 28px;
    }

    .welcome-copy p {
        font-size: 13px;
    }

    .welcome-brand-strip {
        margin-top: 16px;
    }

    .welcome-brand-strip article {
        padding: 10px 8px;
    }

    .welcome-brand-strip p {
        font-size: 12.5px;
    }

    .welcome-login {
        min-height: 44px;
        margin-top: 16px;
    }
}

@media (max-width: 799px) {
    .collection-card-grid {
        --collection-columns: 1;
        grid-template-columns: repeat(var(--collection-columns), minmax(0, 1fr));
    }
}

@media (min-width: 800px) {
    .collection-card-grid {
        --collection-columns: 2;
        grid-template-columns: repeat(var(--collection-columns), minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .collection-card-grid {
        --collection-columns: 3;
        grid-template-columns: repeat(var(--collection-columns), minmax(0, 1fr));
    }
}

@media (min-width: 1600px) {
    .collection-card-grid {
        --collection-columns: 4;
        grid-template-columns: repeat(var(--collection-columns), minmax(0, 1fr));
    }
}

@media (min-width: 2000px) {
    .collection-card-grid {
        --collection-columns: 5;
        grid-template-columns: repeat(var(--collection-columns), minmax(0, 1fr));
    }
}

/* 2026 portal login and quick access refresh */
.public-login main { padding: 0; }
.portal-login { width: 100%; min-height: 100svh; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(480px, .95fr); background: #fff; }
.portal-login__visual { position: relative; display: flex; min-height: 100svh; padding: clamp(28px, 5vw, 72px); color: #fff; background: linear-gradient(140deg, rgba(1,38,58,.94), rgba(2,59,89,.82)), url("../../admin/uploads/thumbnail/traverta.jpg") center/cover; }
.portal-login__visual:after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.16), transparent 30%); pointer-events:none; }
.portal-login__back { position: relative; z-index:1; align-self:flex-start; display:inline-flex; gap:8px; align-items:center; font-weight:800; }
.portal-login__intro { position:relative; z-index:1; max-width:650px; margin:auto 0; }
.portal-login__intro h1 { margin:12px 0 20px; font-size:clamp(42px,5vw,72px); line-height:1.02; letter-spacing:-2px; }
.portal-login__intro p { max-width:570px; margin:0; color:rgba(255,255,255,.76); font-size:18px; line-height:1.65; }
.portal-login__features { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.portal-login__features span { display:flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.09); font-size:13px; font-weight:800; }
.portal-login__panel { display:flex; align-items:center; justify-content:center; padding:clamp(26px,5vw,70px); }
.login-card--modern { width:min(510px,100%); padding:0; box-shadow:none; }
.login-card--modern .login-card__head { align-items:center; margin-bottom:30px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.login-card--modern .login-card__head img { width:118px; }
.login-card--modern .login-card__head div { display:flex; flex-direction:column; gap:5px; }
.login-card--modern .login-card__head strong { font-size:22px; }
.login-card--modern .login-card__head span { color:var(--muted); font-size:13px; }
.brand-login-choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 20px; padding:0; border:0; }
.brand-login-choice legend { grid-column:1/-1; margin-bottom:9px; font-size:13px; font-weight:900; }
.brand-login-choice label { margin:0; cursor:pointer; }
.brand-login-choice input { position:absolute; opacity:0; }
.brand-login-choice label > span { min-height:82px; display:grid; grid-template-columns:32px 1fr; align-content:center; column-gap:8px; padding:13px; border:1px solid var(--line); border-radius:10px; background:#f8fafc; transition:.2s; }
.brand-login-choice label > span i { grid-row:1/3; align-self:center; color:var(--weltew); font-size:23px; }
.brand-login-choice label > span strong { font-size:15px; }
.brand-login-choice label > span small { color:var(--muted); font-size:11px; }
.brand-login-choice input:checked + span { border-color:var(--weltew); background:var(--weltew-soft); box-shadow:0 0 0 3px rgba(2,59,89,.1); }
.security-check { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; padding:13px; border:1px dashed #a8bac8; border-radius:10px; background:#f6fafc; }
.security-check > div { display:flex; align-items:center; gap:10px; }
.security-check > div > i { color:var(--green); font-size:24px; }
.security-check > div span { display:flex; flex-direction:column; gap:3px; }
.security-check small { color:var(--muted); font-size:11px; }
.security-check label { width:108px; margin:0; }
.security-check label > span { text-align:center; font-size:12px; }
.security-check input { width:100%; min-height:38px!important; padding:6px!important; text-align:center; }
.login-honeypot { position:absolute!important; left:-10000px!important; }
.login-error { min-height:18px; margin:8px 0 0; color:#b91c1c; font-size:12px; font-weight:700; }
.login-card--modern .login-submit { width:100%; color:#fff; background:var(--weltew); }
.login-card--modern .login-note { display:flex; justify-content:center; align-items:center; gap:7px; }
.dashboard-welcome { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.dashboard-welcome h1 { margin:9px 0 4px; font-size:clamp(28px,3vw,42px); letter-spacing:-1px; }
.dashboard-welcome p { margin:0; color:var(--muted); }
.dashboard-brand { display:inline-flex; padding:7px 10px; border-radius:999px; color:var(--weltew); background:var(--weltew-soft); font-size:12px; font-weight:900; text-transform:uppercase; }
.dashboard-brand--newjoy { color:#9a3412; background:#ffedd5; }
.dashboard-date { display:flex; align-items:center; gap:11px; padding:13px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--muted); font-size:12px; }
.dashboard-date i { color:var(--weltew); font-size:22px; }
.dashboard-date strong { color:var(--green); }
.quick-access { margin-bottom:24px; padding:22px; border-radius:12px; background:#fff; box-shadow:0 10px 30px rgba(15,23,42,.07); }
.quick-access__head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:17px; }
.quick-access__head h2 { margin:4px 0 0; font-size:25px; }
.quick-access__head > span { color:var(--muted); font-size:13px; }
.quick-access__grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:11px; }
.quick-card { position:relative; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; gap:15px; padding:17px; border:1px solid var(--line); border-radius:10px; background:#fbfdff; transition:.2s; }
.quick-card:hover { transform:translateY(-3px); box-shadow:0 12px 25px rgba(15,23,42,.1); }
.quick-card > i:first-child { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; color:#fff; background:var(--card-color,#2563eb); font-size:20px; }
.quick-card > i:last-child { position:absolute; top:18px; right:18px; color:#94a3b8; }
.quick-card span { display:flex; flex-direction:column; gap:6px; }
.quick-card strong { font-size:14px; }
.quick-card small { color:var(--muted); line-height:1.35; }
.quick-card--orange { --card-color:#ea580c; }.quick-card--green { --card-color:#0f766e; }.quick-card--purple { --card-color:#7c3aed; }.quick-card--red { --card-color:#dc2626; }
.resource-strip { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.resource-strip > div,.resource-strip > a { display:flex; align-items:center; gap:13px; }
.resource-strip > div > i { width:46px;height:46px;display:grid;place-items:center;border-radius:10px;color:#fff;background:var(--newjoy);font-size:21px; }
.resource-strip span { display:flex; flex-direction:column; gap:5px; }.resource-strip small { color:var(--muted); }
.resource-strip > a { padding:11px 14px;border-radius:8px;color:#fff;background:var(--weltew);font-weight:800; }
@media(max-width:1100px){.quick-access__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.portal-login{grid-template-columns:1fr}.portal-login__visual{min-height:380px}.portal-login__panel{padding:34px 20px}.quick-access__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.portal-login__visual{min-height:300px;padding:24px}.portal-login__intro h1{font-size:34px}.portal-login__intro p{font-size:14px}.portal-login__features{display:none}.brand-login-choice{grid-template-columns:1fr}.security-check,.resource-strip,.dashboard-welcome{align-items:stretch;flex-direction:column}.quick-access__grid{grid-template-columns:1fr}.quick-card{min-height:125px}.quick-access__head>span,.dashboard-date{display:none}}

/* Simple dealer media library */
.public-dashboard { background:#f7f8fa; }
.public-dashboard main { width:100%; padding:0; }
.library-app { min-height:100svh; display:grid; grid-template-columns:230px minmax(0,1fr); color:#202124; background:#f7f8fa; }
.library-sidebar { position:fixed; inset:0 auto 0 0; z-index:30; width:230px; display:flex; flex-direction:column; padding:24px 16px; border-right:1px solid #e5e7eb; background:#fff; }
.library-logo { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:0 12px 28px; }
.library-logo img { width:112px; height:36px; object-fit:contain; object-position:left center; }
.library-logo span { color:#6b7280; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.library-sidebar nav { display:flex; flex-direction:column; gap:4px; }
.library-sidebar nav a,.library-sidebar__bottom a { min-height:44px; display:flex; align-items:center; gap:12px; padding:0 12px; border-radius:8px; color:#5f6368; font-size:14px; font-weight:700; }
.library-sidebar nav a:hover,.library-sidebar nav a.is-active { color:#023b59; background:#eaf2f6; }
.library-sidebar nav i,.library-sidebar__bottom i { width:20px; font-size:18px; text-align:center; }
.library-sidebar nav b { min-width:20px; margin-left:auto; padding:3px 6px; border-radius:999px; color:#fff; background:#e15715; font-size:10px; text-align:center; }
.library-sidebar__bottom { margin-top:auto; padding-top:18px; border-top:1px solid #eef0f2; }
.library-main { grid-column:2; min-width:0; }
.library-topbar { position:sticky; top:0; z-index:20; height:72px; display:flex; align-items:center; gap:16px; padding:0 clamp(20px,3vw,42px); border-bottom:1px solid #e5e7eb; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.library-menu { display:none; width:40px;height:40px;border:0;border-radius:8px;background:#f1f3f4;font-size:21px; }
.library-search { width:min(620px,55vw); height:44px; display:flex; align-items:center; gap:11px; padding:0 13px; border:1px solid transparent; border-radius:10px; background:#f1f3f4; }
.library-search:focus-within { border-color:#8ab4c8; background:#fff; box-shadow:0 0 0 3px rgba(2,59,89,.08); }
.library-search i { color:#5f6368; }
.library-search input { width:100%; border:0; outline:0; background:transparent; color:#202124; }
.library-search kbd { padding:3px 7px; border:1px solid #d7dadd; border-radius:5px; color:#777; background:#fff; font:11px Arial; white-space:nowrap; }
.library-brand-switch { display:flex; gap:3px; margin-left:auto; padding:3px; border:1px solid #e1e4e8; border-radius:9px; background:#f7f8fa; }
.library-brand-switch a { min-height:32px; display:flex; align-items:center; padding:0 12px; border-radius:6px; color:#6b7280; font-size:12px; font-weight:800; }
.library-brand-switch a.is-active { color:#fff; background:#023b59; }
.library-profile { width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;color:#fff;background:#e15715;font-size:12px;font-weight:900; }
.library-content { width:min(1280px,100%); margin:0 auto; padding:38px clamp(20px,4vw,56px) 70px; }
.library-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px; }
.library-heading p { display:flex; align-items:center; gap:7px; margin:0 0 8px; color:#858a90; font-size:12px; }
.library-heading p span { color:#023b59; font-weight:800; }
.library-heading h1 { margin:0 0 7px; font-size:30px; letter-spacing:-.6px; }
.library-heading > div > span { color:#73777c; font-size:14px; }
.library-status { display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #dce9e4;border-radius:999px;color:#36705a;background:#f3faf7;font-size:11px;font-weight:800; }
.library-status i { width:7px;height:7px;border-radius:50%;background:#22a06b; }
.library-notices,.media-library { margin-bottom:34px; }
.library-section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:14px; }
.library-section-title > div:first-child { display:flex; align-items:baseline; gap:10px; }
.library-section-title h2 { margin:0; font-size:18px; }
.library-section-title span { color:#8a8f95; font-size:12px; }
.library-section-title > a { color:#023b59;font-size:12px;font-weight:800; }
.notice-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.notice-list a { min-height:116px; display:grid;grid-template-columns:40px 1fr;align-content:start;gap:11px;padding:16px;border:1px solid #e3e6e8;border-radius:10px;background:#fff;transition:.18s; }
.notice-list a:hover { border-color:#a9bdc8; box-shadow:0 6px 18px rgba(15,23,42,.06); }
.notice-list a > i { width:40px;height:40px;display:grid;place-items:center;border-radius:8px;color:#023b59;background:#eaf2f6;font-size:18px; }
.notice-list a.is-featured > i { color:#a43c0b;background:#fff0e8; }
.notice-list a span { display:flex;flex-direction:column;gap:6px; }
.notice-list small { color:#8a8f95;font-size:10px;font-weight:800;text-transform:uppercase; }
.notice-list strong { font-size:13px;line-height:1.4; }
.notice-list time { grid-column:2;color:#a1a5aa;font-size:10px; }
.library-view { display:flex!important; }
.library-view button { width:34px;height:30px;border:1px solid #dfe2e5;border-radius:6px;color:#023b59;background:#fff; }
.folder-table { overflow:hidden; border:1px solid #e1e4e7; border-radius:10px; background:#fff; }
.folder-table__head,.folder-row { display:grid;grid-template-columns:minmax(240px,.9fr) minmax(280px,1.3fr) 24px;align-items:center;gap:20px;padding:0 18px; }
.folder-table__head { min-height:40px;color:#8b9095;background:#f8f9fa;font-size:11px;font-weight:700; }
.folder-row { min-height:62px;border-top:1px solid #edf0f2;color:#777;font-size:12px;transition:.15s; }
.folder-row:hover { background:#f7fafb; }
.folder-row[hidden] { display:none; }
.folder-name { display:flex;align-items:center;gap:12px;color:#303338; }
.folder-name > i { width:34px;height:34px;display:grid;place-items:center;border-radius:7px;color:#e15715;background:#fff0e8;font-size:16px; }
.folder-name strong { font-size:12px; }
.folder-name em { margin-left:3px;padding:3px 6px;border-radius:999px;color:#176b4b;background:#e8f6ef;font-size:9px;font-style:normal;font-weight:900; }
.folder-row > i { color:#a4a8ac; }
.folder-empty { display:none;margin:0;padding:30px;color:#777;text-align:center;font-size:13px; }
.simple-login { width:100%;min-height:100svh;display:grid;place-items:center;padding:24px;background:#f4f6f8; }
.simple-login form { width:min(420px,100%);padding:34px;border:1px solid #e1e5e8;border-radius:12px;background:#fff;box-shadow:0 12px 35px rgba(15,23,42,.07); }
.simple-login__brand { display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid #edf0f2; }
.simple-login__brand img { width:112px;height:34px;object-fit:contain; }
.simple-login__brand span { color:#888;font-size:11px;font-weight:800;text-transform:uppercase; }
.simple-login h1 { margin:0 0 7px;font-size:26px; }.simple-login > form > p { margin:0 0 24px;color:#777;font-size:13px; }
.simple-brand-choice { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px; }
.simple-brand-choice input { position:absolute;opacity:0; }.simple-brand-choice span { min-height:42px;display:grid;place-items:center;border:1px solid #dfe3e6;border-radius:7px;color:#666;font-size:13px;font-weight:800;cursor:pointer; }
.simple-brand-choice input:checked + span { border-color:#023b59;color:#023b59;background:#eaf2f6; }
.simple-field { display:block;margin-bottom:15px; }.simple-field > span { display:block;margin-bottom:7px;font-size:12px;font-weight:800; }
.simple-field input { width:100%;height:44px;padding:0 12px;border:1px solid #d9dde1;border-radius:7px;outline:0; }.simple-field input:focus { border-color:#57839a;box-shadow:0 0 0 3px rgba(2,59,89,.08); }
.simple-security { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px;padding:11px;border:1px dashed #c7cdd1;border-radius:8px;background:#fafbfc;font-size:11px;font-weight:800; }
.simple-security > span { display:flex;align-items:center;gap:7px; }.simple-security > span i { color:#20835e;font-size:18px; }
.simple-security label { display:flex;align-items:center;gap:7px; }.simple-security input { width:52px;height:34px;border:1px solid #d8dde0;border-radius:6px;text-align:center; }
.simple-login__submit { width:100%;height:45px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px;border:0;border-radius:7px;color:#fff;background:#023b59;font-weight:900;cursor:pointer; }
.simple-login form > small { display:block;margin-top:15px;color:#92979b;text-align:center; }
@media(max-width:900px){.library-app{grid-template-columns:1fr}.library-main{grid-column:1}.library-sidebar{transform:translateX(-100%);transition:.2s;box-shadow:10px 0 30px rgba(0,0,0,.1)}.library-sidebar.is-open{transform:translateX(0)}.library-menu{display:block}.notice-list{grid-template-columns:1fr}.library-search{width:auto;flex:1}.library-search kbd{display:none}}
@media(max-width:620px){.library-topbar{gap:8px;padding:0 12px}.library-brand-switch a{padding:0 8px}.library-profile{display:none}.library-content{padding:26px 14px 50px}.library-heading{align-items:flex-start;flex-direction:column}.library-status{display:none}.folder-table__head{display:none}.folder-row{grid-template-columns:1fr 20px;gap:10px;min-height:72px;padding:10px 13px}.folder-row>span:nth-child(2){grid-column:1;padding-left:46px;margin-top:-14px;font-size:10px}.folder-row>i{grid-column:2;grid-row:1/3}.folder-name strong{font-size:11px}.simple-login form{padding:24px}.simple-login__brand{align-items:flex-start;flex-direction:column;gap:7px}}