/* ==========================================================================
   Landing page - KasaFlow
   Self-contained design system, scoped under .lp-page.
   Deliberately does not touch the shared :root tokens in style.css so the
   dashboard, signup, and auth screens are unaffected.
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* Vendor workspace preferences */
.vendor-preferences-page {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.vendor-preferences-head {
    align-items: flex-end;
}

.vendor-settings-saved-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid #cde8d9;
    border-radius: 999px;
    color: #16714f;
    background: #f0faf5;
    font-size: .7rem;
    font-weight: 750;
}

.vendor-preferences-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    margin-top: 22px;
}

.vendor-preferences-nav {
    position: sticky;
    top: 98px;
    display: grid;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--app-line);
    border-radius: 18px;
    background: var(--app-surface);
}

.vendor-preferences-nav-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 5px 5px 13px;
    border-bottom: 1px solid var(--app-line);
}

.vendor-settings-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: #0e8a5f;
    font: 700 1rem "Space Grotesk", sans-serif;
    text-transform: uppercase;
}

.vendor-preferences-nav-card strong,
.vendor-preferences-nav-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-preferences-nav-card strong {
    color: var(--app-ink);
    font-size: .78rem;
}

.vendor-preferences-nav-card small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: .65rem;
}

.vendor-preferences-nav nav {
    display: grid;
    gap: 4px;
}

.vendor-preferences-nav nav a {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 8px 10px;
    border-radius: 11px;
    color: var(--app-muted);
    text-decoration: none;
    transition: color .18s ease, background .18s ease;
}

.vendor-preferences-nav nav a:hover {
    color: var(--app-ink);
    background: var(--app-bg);
}

.vendor-preferences-nav nav a.is-active {
    color: #fff;
    background: #0e8a5f;
}

.vendor-preferences-nav nav a span,
.vendor-preferences-nav nav a strong,
.vendor-preferences-nav nav a small {
    display: block;
}

.vendor-preferences-nav nav a strong {
    font-size: .72rem;
}

.vendor-preferences-nav nav a small {
    margin-top: 2px;
    color: inherit;
    font-size: .61rem;
    opacity: .7;
}

.vendor-settings-help {
    padding: 13px;
    border-radius: 12px;
    background: #f3f7f5;
}

.vendor-settings-help span {
    color: var(--app-ink);
    font-size: .69rem;
    font-weight: 800;
}

.vendor-settings-help p {
    margin: 5px 0 9px;
    color: var(--app-muted);
    font-size: .64rem;
    line-height: 1.45;
}

.vendor-settings-help a {
    color: #0e8a5f;
    font-size: .66rem;
    font-weight: 800;
    text-decoration: none;
}

.vendor-preferences-content,
.vendor-settings-form {
    display: grid;
    gap: 18px;
}

[data-settings-section][hidden],
[data-settings-form][hidden] {
    display: none !important;
}

.vendor-preference-card {
    padding: 24px;
    border: 1px solid var(--app-line);
    border-radius: 18px;
    background: var(--app-surface);
    scroll-margin-top: 100px;
}

.vendor-preference-card-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--app-line);
}

.vendor-preference-card-head h2,
.vendor-preference-card-head p {
    margin: 0;
}

.vendor-preference-card-head h2 {
    margin-top: 3px;
    color: var(--app-ink);
    font: 700 1rem "Space Grotesk", sans-serif;
}

.vendor-preference-card-head p {
    margin-top: 5px;
    color: var(--app-muted);
    font-size: .71rem;
    line-height: 1.5;
}

.vendor-preference-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.vendor-preference-icon.is-green { color: #08744f; background: #dff3e9; }
.vendor-preference-icon.is-blue { color: #3562a9; background: #e3ecfb; }
.vendor-preference-icon.is-amber { color: #976814; background: #f8edcd; }
.vendor-preference-icon.is-violet { color: #6750a4; background: #ece6f8; }

.vendor-settings-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    padding-top: 22px;
}

.vendor-settings-fields label {
    display: grid;
    align-content: start;
    gap: 7px;
}

.vendor-settings-fields label.is-wide {
    grid-column: 1 / -1;
}

.vendor-settings-fields label > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--app-ink);
    font-size: .7rem;
    font-weight: 750;
}

.vendor-settings-fields label > span b {
    color: var(--app-muted);
    font-size: .57rem;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.vendor-settings-fields label > small {
    color: var(--app-muted);
    font-size: .62rem;
    line-height: 1.45;
}

.vendor-settings-fields input,
.vendor-settings-fields select,
.vendor-settings-fields textarea {
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    color: var(--app-ink);
    background: #fff;
    box-shadow: 0 1px 2px rgba(14, 21, 18, .025);
    font: inherit;
    font-size: .75rem;
    resize: vertical;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.vendor-settings-fields input:focus,
.vendor-settings-fields select:focus,
.vendor-settings-fields textarea:focus {
    border-color: #0e8a5f;
    box-shadow: 0 0 0 3px rgba(14, 138, 95, .1);
    outline: none;
}

.vendor-settings-input-prefix {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background: #fff;
}

.vendor-settings-input-prefix:focus-within {
    border-color: #0e8a5f;
    box-shadow: 0 0 0 3px rgba(14, 138, 95, .1);
}

.vendor-settings-input-prefix i {
    align-self: stretch;
    display: grid;
    place-items: center;
    padding: 0 11px;
    border-right: 1px solid var(--app-line);
    color: var(--app-muted);
    background: #f5f7f6;
    font-size: .7rem;
    font-style: normal;
}

.vendor-settings-input-prefix input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.vendor-settings-input-prefix input:focus {
    box-shadow: none;
}

.vendor-settings-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 16px;
    border: 1px solid var(--app-line);
    border-radius: 14px;
    background: #f8faf9;
}

.vendor-settings-savebar > span {
    position: relative;
    display: grid;
    gap: 2px;
    padding-left: 17px;
}

.vendor-settings-savebar > span > i {
    position: absolute;
    top: 7px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #72ad93;
}

.vendor-settings-form.is-dirty .vendor-settings-savebar > span > i {
    background: #e29a24;
    box-shadow: 0 0 0 4px rgba(226, 154, 36, .12);
}

.vendor-settings-savebar strong,
.vendor-settings-savebar small {
    display: block;
}

.vendor-settings-savebar strong { color: var(--app-ink); font-size: .68rem; }
.vendor-settings-savebar small { color: var(--app-muted); font-size: .61rem; }

.vendor-settings-savebar .dash-button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.vendor-payment-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 999px;
    color: #7f6751;
    background: #f2eeea;
    font-size: .63rem;
}

.vendor-payment-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.vendor-payment-status.is-on {
    color: #08744f;
    background: #e4f4ec;
}

.vendor-settings-switch-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 15px 16px;
    border: 1px solid var(--app-line);
    border-radius: 13px;
    cursor: pointer;
}

.vendor-settings-switch-row > span,
.vendor-settings-switch-row strong,
.vendor-settings-switch-row small {
    display: block;
}

.vendor-settings-switch-row strong { color: var(--app-ink); font-size: .74rem; }
.vendor-settings-switch-row small { margin-top: 4px; color: var(--app-muted); font-size: .64rem; line-height: 1.45; }

.vendor-settings-switch-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vendor-settings-switch-row > i {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #c6ceca;
    transition: background .2s ease;
}

.vendor-settings-switch-row > i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
    transition: transform .2s ease;
}

.vendor-settings-switch-row input:checked + i { background: #0e8a5f; }
.vendor-settings-switch-row input:checked + i::after { transform: translateX(18px); }
.vendor-settings-switch-row input:focus-visible + i { outline: 3px solid rgba(14, 138, 95, .2); outline-offset: 2px; }

.vendor-payment-fields {
    transition: opacity .2s ease;
}

.vendor-payment-fields.is-inactive {
    opacity: .48;
}

.vendor-payment-safety {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    margin: 18px 0;
    padding: 14px;
    border: 1px solid #ead9b7;
    border-radius: 13px;
    background: #fff9ed;
}

.vendor-payment-safety > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #8c641c;
    background: #f7e9c9;
}

.vendor-payment-safety strong { color: #5f481d; font-size: .7rem; }
.vendor-payment-safety p { margin: 4px 0 0; color: #806b43; font-size: .64rem; line-height: 1.5; }

.vendor-security-modern-row,
.vendor-security-action {
    display: grid;
    align-items: center;
    gap: 13px;
    padding: 18px 0;
}

.vendor-security-modern-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    border-bottom: 1px solid var(--app-line);
}

.vendor-security-action {
    grid-template-columns: minmax(0, 1fr) auto;
}

.vendor-password-action {
    margin: 0;
    border-bottom: 1px solid var(--app-line);
}

.vendor-password-action .dash-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.vendor-password-modal[hidden] {
    display: none;
}

.vendor-password-modal {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: grid;
    place-items: center;
    padding: 22px;
}

.vendor-password-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(5, 14, 10, .62);
    cursor: default;
}

.vendor-password-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    padding: 27px;
    border: 1px solid var(--app-line);
    border-radius: 20px;
    background: var(--app-surface);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.vendor-password-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    color: var(--app-muted);
    background: var(--app-bg);
    cursor: pointer;
}

.vendor-password-modal-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #08744f;
    background: #dff3e9;
}

.vendor-password-modal-head {
    padding: 15px 46px 19px 0;
    border-bottom: 1px solid var(--app-line);
}

.vendor-password-modal-head h2,
.vendor-password-modal-head p {
    margin: 0;
}

.vendor-password-modal-head h2 {
    margin-top: 4px;
    color: var(--app-ink);
    font: 700 1.25rem "Space Grotesk", sans-serif;
}

.vendor-password-modal-head p {
    margin-top: 7px;
    color: var(--app-muted);
    font-size: .7rem;
    line-height: 1.55;
}

.vendor-password-form {
    display: grid;
    gap: 15px;
    padding-top: 20px;
}

.vendor-password-form > label {
    display: grid;
    gap: 7px;
}

.vendor-password-form > label > span {
    color: var(--app-ink);
    font-size: .7rem;
    font-weight: 750;
}

.vendor-password-wrap {
    position: relative;
}

.vendor-password-wrap input {
    width: 100%;
    min-height: 44px;
    padding: 10px 60px 10px 12px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    color: var(--app-ink);
    background: #fff;
    font: inherit;
    font-size: .75rem;
}

.vendor-password-wrap input:focus {
    border-color: #0e8a5f;
    box-shadow: 0 0 0 3px rgba(14, 138, 95, .1);
    outline: none;
}

.vendor-password-wrap button {
    position: absolute;
    top: 50%;
    right: 11px;
    padding: 4px;
    border: 0;
    color: #08744f;
    background: transparent;
    font: 750 .65rem "Instrument Sans", sans-serif;
    cursor: pointer;
    transform: translateY(-50%);
}

.vendor-password-strength .auth-password-strength-head,
.vendor-password-rules li,
.vendor-password-match {
    color: var(--app-muted);
}

.vendor-password-strength .auth-password-strength-head strong,
.vendor-password-rules li.is-valid,
.vendor-password-match.is-valid {
    color: #08744f;
}

.vendor-password-strength[data-strength="4"] .auth-password-strength-track i,
.vendor-password-strength[data-strength="5"] .auth-password-strength-track i {
    background: #0e8a5f !important;
}

.vendor-password-rules li.is-valid::before {
    border-color: #0e8a5f !important;
    background: #0e8a5f !important;
}

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

.vendor-password-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 4px;
}

.vendor-password-actions .dash-button:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.vendor-signout-panel {
    width: min(100%, 460px);
}

.vendor-signout-modal-icon {
    color: #a23e37;
    background: #f8e7e5;
}

.vendor-signout-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 19px 0;
    padding: 12px 13px;
    border: 1px solid #ead9b7;
    border-radius: 11px;
    color: #806530;
    background: #fff9ed;
    font-size: .66rem;
    line-height: 1.45;
}

.vendor-signout-note svg {
    flex: none;
}

.vendor-signout-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #a84038;
    color: #fff;
    background: #a84038;
    text-decoration: none;
}

.vendor-signout-confirm:hover {
    border-color: #91352f;
    color: #fff;
    background: #91352f;
}

html[data-theme="dark"] .vendor-password-panel,
html[data-theme="dark"] .vendor-password-wrap input {
    color: var(--app-ink);
    /* background: #101d17; */
}

html[data-theme="dark"] .vendor-password-rules li.is-valid::before {
    box-shadow: inset 0 0 0 3px #101d17;
}

html[data-theme="dark"] .vendor-signout-modal-icon {
    color: #f0a49d;
    background: #3a201f;
}

html[data-theme="dark"] .vendor-signout-note {
    border-color: #594c2d;
    color: #d6c28a;
    background: #282516;
}

@media (max-width: 560px) {
    .vendor-password-modal { padding: 12px; }
    .vendor-password-panel { max-height: calc(100vh - 24px); padding: 21px 18px; border-radius: 17px; }
    .vendor-password-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vendor-password-actions { flex-direction: column-reverse; }
    .vendor-password-actions .dash-button { width: 100%; justify-content: center; }
}

.vendor-security-check {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #08744f;
    background: #e2f3eb;
}

.vendor-security-modern-row strong,
.vendor-security-modern-row p,
.vendor-security-action strong,
.vendor-security-action p {
    margin: 0;
}

.vendor-security-modern-row strong,
.vendor-security-action strong { color: var(--app-ink); font-size: .74rem; }
.vendor-security-modern-row p,
.vendor-security-action p { margin-top: 4px; color: var(--app-muted); font-size: .65rem; line-height: 1.5; }

.vendor-security-badge {
    padding: 6px 8px;
    border-radius: 999px;
    color: #08744f;
    background: #e4f4ec;
    font-size: .61rem;
    font-weight: 800;
}

@media (max-width: 960px) {
    .vendor-preferences-layout { grid-template-columns: 1fr; }
    .vendor-preferences-nav { position: static; overflow: hidden; }
    .vendor-preferences-nav-card,
    .vendor-settings-help { display: none; }
    .vendor-preferences-nav nav { display: flex; overflow-x: auto; padding-bottom: 2px; }
    .vendor-preferences-nav nav a { flex: none; min-height: 42px; }
    .vendor-preferences-nav nav a small { display: none; }
}

@media (max-width: 650px) {
    .vendor-preferences-head { align-items: flex-start; }
    .vendor-settings-saved-state { align-self: flex-start; }
    .vendor-preference-card { padding: 18px; }
    .vendor-preference-card-head { grid-template-columns: 40px minmax(0, 1fr); }
    .vendor-preference-icon { width: 40px; height: 40px; }
    .vendor-payment-status { grid-column: 2; justify-self: start; }
    .vendor-settings-fields { grid-template-columns: 1fr; }
    .vendor-settings-fields label.is-wide { grid-column: auto; }
    .vendor-settings-savebar,
    .vendor-security-action { align-items: stretch; grid-template-columns: 1fr; }
    .vendor-settings-savebar { flex-direction: column; }
    .vendor-settings-savebar .dash-button,
    .vendor-security-action .dash-button { justify-content: center; width: 100%; }
    .vendor-security-modern-row { grid-template-columns: auto minmax(0, 1fr); }
    .vendor-security-badge { grid-column: 2; justify-self: start; }
}

.vendor-security-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:28px 0 10px}.vendor-security-section-head strong,.vendor-security-section-head p{display:block;margin:0}.vendor-security-section-head strong{font-size:.86rem}.vendor-security-section-head p{margin-top:4px;color:var(--app-muted);font-size:.7rem}.vendor-security-section-head>span{padding:5px 9px;border-radius:999px;color:#08744f;background:#e2f2e9;font-size:.65rem;font-weight:750}.vendor-security-list{display:grid;gap:8px}.vendor-security-list article{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--app-line);border-radius:13px;background:var(--app-bg)}.vendor-device-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;color:#1765ad;background:#e8f2fb}.vendor-device-icon.is-recognized{color:#08744f;background:#e2f2e9}.vendor-security-list strong,.vendor-security-list p,.vendor-security-list small{display:block;margin:0}.vendor-security-list strong{font-size:.75rem}.vendor-security-list strong i{margin-left:5px;color:#08744f;font-size:.58rem;font-style:normal;text-transform:uppercase}.vendor-security-list p,.vendor-security-list small{margin-top:3px;color:var(--app-muted);font-size:.64rem}.vendor-security-list button{padding:7px 10px;border:1px solid var(--app-line);border-radius:8px;color:var(--app-ink);background:var(--app-surface);font-size:.65rem;font-weight:700;cursor:pointer}.vendor-security-list button:hover{border-color:#b64040;color:#a32929}.vendor-security-empty{padding:16px;border:1px dashed var(--app-line);border-radius:12px;color:var(--app-muted);font-size:.7rem;text-align:center}@media(max-width:640px){.vendor-security-list article{grid-template-columns:40px minmax(0,1fr)}.vendor-security-list form{grid-column:2}.vendor-security-section-head{align-items:flex-start}}

/* html[data-theme="dark"] .vendor-preferences-nav,
html[data-theme="dark"] .vendor-preference-card {
    background: #15231c;
} */

html[data-theme="dark"] .vendor-preferences-nav {
    /* border-color: #293d33;
    background: #111d17; */
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .vendor-preferences-nav-card {
    margin: -3px -3px 2px;
    padding: 10px;
    border: 1px solid #2a4035;
    border-radius: 14px;
    background: var(--app-bg);
}

html[data-theme="dark"] .vendor-settings-avatar {
    color: #d9fff0;
    background: #0b6f4c;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .vendor-preferences-nav nav {
    gap: 5px;
}

html[data-theme="dark"] .vendor-preferences-nav nav a {
    border: 1px solid transparent;
    color: #91a89c;
}

html[data-theme="dark"] .vendor-preferences-nav nav a:hover {
    /* border-color: #294036; */
    color: #e9f6ef;
    background: var(--app-bg);
}

html[data-theme="dark"] .vendor-preferences-nav nav a.is-active {
    border-color: #258765;
    color: #f4fff9;
    background: #146a4d;
    box-shadow: 0 8px 20px rgba(5, 46, 31, .28);
}

html[data-theme="dark"] .vendor-preferences-nav nav a.is-active small {
    color: #c4e7d8;
    opacity: 1;
}

html[data-theme="dark"] .vendor-settings-help,
html[data-theme="dark"] .vendor-settings-savebar {
    background: var(--app-bg);
}

html[data-theme="dark"] .vendor-settings-help {
    border: 1px solid #294036;
}

html[data-theme="dark"] .vendor-settings-help a {
    color: #56d4a4;
}

html[data-theme="dark"] .vendor-settings-fields input,
html[data-theme="dark"] .vendor-settings-fields select,
html[data-theme="dark"] .vendor-settings-fields textarea,
html[data-theme="dark"] .vendor-settings-input-prefix {
    color: var(--app-ink);
    background: var(--app-bg);
}

html[data-theme="dark"] .vendor-settings-input-prefix i {
    background: #1b2c23;
}

html[data-theme="dark"] .vendor-payment-safety {
    border-color: #594c2d;
    background: #282516;
}

html[data-theme="dark"] .vendor-payment-safety strong { color: #ead79f; }
html[data-theme="dark"] .vendor-payment-safety p { color: #c8b882; }

/* Administrator personal account workspace */
.admin-account-page{display:grid;gap:18px}.admin-account-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.admin-account-head h1{margin:4px 0 5px;font:700 clamp(1.55rem,3vw,2.15rem) "Space Grotesk",sans-serif}.admin-account-head p{margin:0;color:var(--app-muted);font-size:.78rem}.admin-account-state{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #bfe1d1;border-radius:999px;color:#08744f;background:#edf8f2;font-size:.68rem;font-weight:750}.admin-account-state i{width:7px;height:7px;border-radius:50%;background:#0e9b68;box-shadow:0 0 0 4px rgba(14,155,104,.12)}.admin-account-layout{display:grid;grid-template-columns:250px minmax(0,1fr);align-items:start;gap:20px}.admin-account-nav{position:sticky;top:92px;display:grid;gap:11px}.admin-account-identity,.admin-account-nav>nav,.admin-account-role,.admin-account-card{border:1px solid var(--app-line);background:var(--app-surface)}.admin-account-identity{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;padding:13px;border-radius:15px}.admin-account-identity>span{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:#fff;background:#08744f;font:700 1rem "Space Grotesk",sans-serif;text-transform:uppercase}.admin-account-identity strong,.admin-account-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-account-identity strong{font-size:.76rem}.admin-account-identity small{margin-top:3px;color:var(--app-muted);font-size:.61rem}.admin-account-nav>nav{display:grid;gap:4px;padding:7px;border-radius:15px}.admin-account-nav>nav a{display:grid;grid-template-columns:31px minmax(0,1fr);align-items:center;gap:9px;padding:9px;border:1px solid transparent;border-radius:10px;color:var(--app-muted);text-decoration:none}.admin-account-nav>nav a:hover{color:var(--app-ink);background:var(--app-bg)}.admin-account-nav>nav a.is-active{color:#fff;border-color:#08744f;background:#08744f}.admin-account-nav>nav b{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,currentColor 10%,transparent);font-size:.58rem}.admin-account-nav>nav a.is-active b{color:#08744f;background:#fff}.admin-account-nav>nav strong,.admin-account-nav>nav small{display:block}.admin-account-nav>nav strong{font-size:.7rem}.admin-account-nav>nav small{margin-top:2px;color:inherit;font-size:.59rem;opacity:.7}.admin-account-role{padding:14px;border-radius:15px}.admin-account-role span{display:inline-block;padding:4px 7px;border-radius:999px;color:#7255bd;background:#eee9fa;font-size:.55rem;font-weight:800;letter-spacing:.08em}.admin-account-role p{margin:8px 0 0;color:var(--app-muted);font-size:.62rem;line-height:1.5}.admin-account-card{padding:22px;border-radius:18px}.admin-account-card-head{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding-bottom:17px;border-bottom:1px solid var(--app-line)}.admin-account-card-head>span{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:#08744f;background:#e4f3eb;font-size:.7rem;font-weight:800}.admin-account-card-head h2,.admin-account-card-head p{margin:0}.admin-account-card-head h2{font:700 1.08rem "Space Grotesk",sans-serif}.admin-account-card-head p{margin-top:4px;color:var(--app-muted);font-size:.67rem}.admin-account-card-head>b{padding:5px 8px;border-radius:999px;color:#08744f;background:#e4f3eb;font-size:.6rem}.admin-account-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:20px}.admin-account-fields label,.admin-password-grid label{display:grid;gap:6px}.admin-account-fields label.is-wide{grid-column:1/-1}.admin-account-fields label>span,.admin-password-grid label>span{font-size:.66rem;font-weight:750}.admin-account-fields input,.admin-account-fields select,.admin-password-grid input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--app-line);border-radius:10px;color:var(--app-ink);background:var(--app-bg);font:500 .73rem "Instrument Sans",sans-serif;outline:none}.admin-account-fields input:focus,.admin-account-fields select:focus,.admin-password-grid input:focus{border-color:#0e8a5f;box-shadow:0 0 0 3px rgba(14,138,95,.1)}.admin-account-fields input:disabled{opacity:.66;cursor:not-allowed}.admin-account-fields small{color:var(--app-muted);font-size:.58rem}.admin-account-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:18px}.admin-account-facts article{padding:12px;border:1px solid var(--app-line);border-radius:11px;background:var(--app-bg)}.admin-account-facts small,.admin-account-facts strong{display:block}.admin-account-facts small{color:var(--app-muted);font-size:.57rem}.admin-account-facts strong{margin-top:4px;font-size:.7rem;text-transform:capitalize}.admin-account-card>footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:15px;border-top:1px solid var(--app-line)}.admin-account-card>footer>span{color:var(--app-muted);font-size:.62rem}.admin-account-card button,.admin-password-grid>button{padding:9px 13px;border:0;border-radius:9px;color:#fff;background:#08744f;font-size:.68rem;font-weight:750;cursor:pointer}.admin-account-switches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}.admin-account-switches label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px;border:1px solid var(--app-line);border-radius:12px;background:var(--app-bg)}.admin-account-switches strong,.admin-account-switches small{display:block}.admin-account-switches strong{font-size:.69rem}.admin-account-switches small{margin-top:3px;color:var(--app-muted);font-size:.58rem}.admin-account-switches input{width:17px;height:17px;accent-color:#08744f}.admin-account-switches i{display:none}.admin-account-security-stack{display:grid;gap:14px}.admin-password-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:10px;margin-top:18px}.admin-password-grid>button{height:38px}.admin-account-session-list{display:grid;gap:8px;margin-top:16px}.admin-account-session-list article{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px;border:1px solid var(--app-line);border-radius:11px;background:var(--app-bg)}.admin-account-session-list article>span{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:#1765ad;background:#e7f1fb}.admin-account-session-list strong,.admin-account-session-list p,.admin-account-session-list small{display:block;margin:0}.admin-account-session-list strong{font-size:.7rem}.admin-account-session-list strong i{margin-left:4px;color:#08744f;font-size:.54rem;font-style:normal;text-transform:uppercase}.admin-account-session-list p,.admin-account-session-list small{margin-top:3px;color:var(--app-muted);font-size:.59rem}.admin-account-session-list button{color:#9e3030;background:transparent;border:1px solid #e2bcbc}.admin-account-session-list em{color:#08744f;font-size:.6rem;font-style:normal;font-weight:750}.admin-account-empty{padding:15px;border:1px dashed var(--app-line);border-radius:11px;color:var(--app-muted);font-size:.65rem;text-align:center}
html[data-theme="dark"] .admin-account-state{border-color:#2d604c;color:#79d9b3;background:#173126}html[data-theme="dark"] .admin-account-role span{color:#c7b4f5;background:rgba(114,85,189,.22)}html[data-theme="dark"] .admin-account-card-head>span,html[data-theme="dark"] .admin-account-card-head>b{color:#83ddb9;background:rgba(14,138,95,.2)}html[data-theme="dark"] .admin-account-session-list article>span{color:#8bc3ff;background:rgba(40,117,199,.2)}html[data-theme="dark"] .admin-account-session-list button{color:#ef9b9b;border-color:#704040}
@media(max-width:980px){.admin-account-layout{grid-template-columns:1fr}.admin-account-nav{position:static}.admin-account-nav>nav{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-account-role{display:none}}@media(max-width:720px){.admin-account-head{align-items:flex-start;flex-direction:column}.admin-account-fields,.admin-account-switches,.admin-account-facts{grid-template-columns:1fr}.admin-password-grid{grid-template-columns:1fr}.admin-account-nav>nav{grid-template-columns:1fr}.admin-account-card>footer{align-items:stretch;flex-direction:column}.admin-account-session-list article{grid-template-columns:38px minmax(0,1fr)}.admin-account-session-list article>form,.admin-account-session-list article>em{grid-column:2;justify-self:start}}

/* Comfortable reading scale for administrator account pages. */
.admin-account-head h1{font-size:clamp(1.8rem,3vw,2.45rem)}
.admin-account-head p{font-size:.92rem;line-height:1.55}
.admin-account-state{font-size:.78rem}
.admin-account-identity strong{font-size:.9rem}
.admin-account-identity small{font-size:.73rem}
.admin-account-nav>nav strong{font-size:.82rem}
.admin-account-nav>nav small{font-size:.7rem}
.admin-account-nav>nav b{font-size:.67rem}
.admin-account-role span{font-size:.64rem}
.admin-account-role p{font-size:.74rem;line-height:1.6}
.admin-account-card-head h2{font-size:1.3rem}
.admin-account-card-head p{font-size:.8rem;line-height:1.5}
.admin-account-card-head>span{font-size:.8rem}
.admin-account-card-head>b{font-size:.7rem}
.admin-account-fields label>span,.admin-password-grid label>span{font-size:.78rem}
.admin-account-fields input,.admin-account-fields select,.admin-password-grid input{font-size:.86rem}
.admin-account-fields small{font-size:.69rem;line-height:1.45}
.admin-account-facts small{font-size:.68rem}
.admin-account-facts strong{font-size:.82rem}
.admin-account-card>footer>span{font-size:.73rem}
.admin-account-card button,.admin-password-grid>button{font-size:.78rem}
.admin-account-switches strong{font-size:.81rem}
.admin-account-switches small{font-size:.7rem;line-height:1.45}
.admin-account-session-list strong{font-size:.82rem}
.admin-account-session-list strong i{font-size:.63rem}
.admin-account-session-list p,.admin-account-session-list small{font-size:.7rem;line-height:1.45}
.admin-account-session-list em{font-size:.7rem}
.admin-account-empty{font-size:.76rem}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    color: #0e1512;
    background: #fbfdfc;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg {
    display: block;
    max-width: 100%;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

.auth-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(170, 224, 44, 0.18), transparent 32%),
        radial-gradient(circle at right center, rgba(255, 205, 63, 0.14), transparent 28%),
        linear-gradient(180deg, #f7fbee 0%, #eef5df 100%);
}

html.auth-root,
body.auth-shell {
    background:
        radial-gradient(circle at top left, rgba(170, 224, 44, 0.18), transparent 32%),
        radial-gradient(circle at right center, rgba(255, 205, 63, 0.14), transparent 28%),
        linear-gradient(180deg, #f7fbee 0%, #eef5df 100%);
}

.auth-stage {
    width: 100%;
}

.auth-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 24px;
}

.auth-login-grid {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    gap: 28px;
    align-items: stretch;
}

.auth-showcase,
.auth-card,
.glass-form {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(16, 30, 19, 0.08);
    border-radius: 32px;
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(33, 53, 19, 0.12);
}

.auth-showcase {
    padding: 40px;
    background:
        radial-gradient(circle at top right, rgba(255, 214, 74, 0.22), transparent 30%),
        linear-gradient(145deg, #102018 0%, #173528 52%, #214227 100%);
    color: #f4fae9;
    display: grid;
    gap: 24px;
}

.auth-showcase::after,
.auth-card::after,
.glass-form::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-eyebrow,
.eyebrow {
    margin: 0;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: #d3f15f;
}

.auth-showcase h1,
.signup-copy h1 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.auth-showcase-text,
.signup-copy p {
    margin: 0;
    max-width: 54ch;
    color: rgba(244, 250, 233, 0.76);
    line-height: 1.72;
    font-size: 0.98rem;
}

.auth-showcase-pills,
.mini-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.auth-showcase-pills span,
.mini-checklist span {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(213, 241, 96, 0.18);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.8rem;
    font-weight: 600;
}

.auth-insight-card {
    display: grid;
    gap: 18px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(234, 247, 190, 0.12);
}

.auth-insight-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(244, 250, 233, 0.92);
}

.auth-signal-dot,
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #c7f24d;
    box-shadow: 0 0 18px rgba(199, 242, 77, 0.55);
}

.auth-chat-stack,
.chat-preview {
    display: grid;
    gap: 12px;
}

.auth-chat-bubble,
.chat-bubble {
    width: fit-content;
    max-width: 30ch;
    padding: 12px 14px;
    border-radius: 18px;
    font-size: 0.85rem;
    line-height: 1.55;
}

.auth-chat-bubble.incoming,
.chat-bubble.incoming {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(244, 250, 233, 0.9);
}

.auth-chat-bubble.outgoing,
.chat-bubble.outgoing {
    margin-left: auto;
    background: linear-gradient(135deg, #c8f24f 0%, #f4d45e 100%);
    color: #112116;
    box-shadow: 0 18px 32px rgba(201, 227, 83, 0.2);
}

.auth-metric-row,
.signal-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.auth-metric-row div,
.signal-row div {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.auth-metric-row strong,
.signal-row strong {
    display: block;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1.15rem;
    color: #fffde6;
}

.auth-metric-row span,
.signal-row span {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    color: rgba(244, 250, 233, 0.68);
}

.auth-card,
.glass-form {
    padding: 34px 32px;
    background: rgba(255, 255, 255, 0.78);
}

.auth-card {
    display: grid;
    align-content: center;
    gap: 20px;
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: #4f5d54;
    font-weight: 600;
}

.auth-kicker {
    margin: 16px 0 8px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6f8611;
    font-weight: 700;
}

.auth-card h2 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #101914;
}

.auth-card-copy {
    margin: 10px 0 0;
    color: #5f6c64;
    line-height: 1.65;
    font-size: 0.92rem;
}

.auth-alert {
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 0.84rem;
    line-height: 1.5;
    font-weight: 600;
}

.auth-alert-success {
    border: 1px solid rgba(74, 165, 75, 0.18);
    background: rgba(95, 185, 104, 0.1);
    color: #1d6a2f;
}

.auth-alert-error {
    border: 1px solid rgba(196, 86, 86, 0.16);
    background: rgba(226, 98, 98, 0.09);
    color: #9a2a2a;
}

.auth-form {
    display: grid;
    gap: 16px;
}

.auth-field,
.form-grid label {
    display: grid;
    gap: 8px;
}

.auth-field span,
.form-grid label span {
    font-size: 0.83rem;
    font-weight: 700;
    color: #243228;
}

.auth-field input,
.form-grid input {
    width: 100%;
    min-height: 54px;
    border: 1px solid rgba(16, 30, 19, 0.11);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    padding: 0 16px;
    color: #102018;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.auth-field input:focus,
.form-grid input:focus {
    border-color: rgba(14, 138, 95, 0.66) !important;
    box-shadow: 0 0 0 4px rgba(14, 138, 95, 0.1);
    transform: translateY(-1px);
}

.auth-password-wrap {
    position: relative;
}

.auth-password-wrap input {
    padding-right: 80px;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #6a7c24;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.auth-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: #47544d;
}

.auth-check input {
    width: 18px;
    height: 18px;
}

.auth-help-text {
    font-size: 0.8rem;
    color: #70806d;
}

.primary-button,
.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.primary-button {
    border: 0;
    background: linear-gradient(135deg, #bde63f 0%, #f2d453 100%);
    color: #132116;
    box-shadow: 0 18px 32px rgba(177, 204, 48, 0.22);
    cursor: pointer;
}

.primary-button:hover,
.ghost-button:hover {
    transform: translateY(-1px);
}

.ghost-button {
    border: 1px solid rgba(18, 31, 20, 0.12);
    background: rgba(255, 255, 255, 0.7);
    color: #16211b;
}

.wide-button {
    width: 100%;
}

.auth-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: #57645d;
}

.auth-card-footer p {
    margin: 0;
}

.auth-card-footer a {
    color: #567f12;
    font-weight: 700;
}

.signup-stage {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 40px 0;
}

.signup-copy {
    display: grid;
    gap: 20px;
    padding-right: 12px;
}

.glass-form {
    display: grid;
    gap: 22px;
}

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

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

.plan-card {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(16, 30, 19, 0.09);
    background: rgba(248, 251, 239, 0.88);
    cursor: pointer;
}

.plan-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan-card strong {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1rem;
}

.plan-card span {
    font-size: 0.83rem;
    color: #5c685f;
}

.plan-card b {
    font-size: 1.15rem;
    color: #17221d;
}

.plan-card.featured,
.plan-card:has(input:checked) {
    border-color: rgba(155, 189, 30, 0.36);
    box-shadow: 0 18px 34px rgba(178, 203, 63, 0.16);
}

/* ---------- Login ---------- */

.auth-login-simple,
.auth-signup-simple {
    --auth-accent: #0e8a5f;
    --auth-accent-dark: #0a6a48;
    --auth-ink: #0e1512;
    --auth-muted: #5d6962;
    --auth-line: rgba(14, 21, 18, 0.11);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--auth-ink);
    background:
        radial-gradient(circle at 8% 10%, rgba(14, 138, 95, 0.13), transparent 34%),
        radial-gradient(circle at 96% 88%, rgba(255, 107, 74, 0.07), transparent 30%),
        #fbfdfc;
}

.auth-login-header,
.auth-login-main,
.auth-login-footer {
    width: min(1080px, calc(100% - 48px));
    margin-inline: auto;
}

.auth-login-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--auth-line);
}

.auth-brand,
.auth-home-link {
    display: inline-flex;
    align-items: center;
}

.auth-brand {
    gap: 10px;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
}

.auth-brand-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--auth-accent), #1ad08a);
    box-shadow: 0 10px 24px rgba(14, 138, 95, 0.2);
}

.auth-home-link {
    gap: 5px;
    color: var(--auth-muted);
    font-size: 0.82rem;
    font-weight: 600;
    transition: color 160ms ease, transform 160ms ease;
}

.auth-home-link:hover {
    color: var(--auth-accent-dark);
    transform: translateX(-2px);
}

.auth-login-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
    align-items: center;
    gap: clamp(56px, 9vw, 130px);
    padding-block: 64px;
}

.auth-login-intro {
    max-width: 520px;
}

.auth-login-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--auth-accent-dark);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-login-eyebrow span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--auth-accent);
}

.auth-login-intro h1 {
    max-width: 12ch;
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.auth-login-intro > p:not(.auth-login-eyebrow) {
    max-width: 49ch;
    margin: 22px 0 0;
    color: var(--auth-muted);
    font-size: 0.94rem;
    line-height: 1.75;
}

.auth-login-note {
    display: flex;
    align-items: center;
    gap: 13px;
    width: fit-content;
    margin-top: 34px;
    padding: 12px 16px;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
}

.auth-login-note-icon {
    width: 36px;
    height: 36px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    color: var(--auth-accent-dark);
    background: rgba(14, 138, 95, 0.1);
}

.auth-login-note > span:last-child {
    display: grid;
    gap: 2px;
    color: var(--auth-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.auth-login-note strong {
    color: var(--auth-ink);
    font-size: 0.79rem;
}

.auth-login-card {
    display: grid;
    gap: 22px;
    padding: 34px;
    border: 1px solid var(--auth-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 60px rgba(14, 21, 18, 0.1);
}

.auth-login-card-head > p {
    margin: 0 0 8px;
    color: var(--auth-accent-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-login-card-head h2 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1.55rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.auth-login-card-head > span {
    display: block;
    margin-top: 9px;
    color: var(--auth-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.auth-login-card .auth-form {
    gap: 15px;
}

.auth-login-card .auth-field {
    gap: 7px;
}

.auth-login-card .auth-field > span {
    color: #26332c;
    font-size: 0.78rem;
    font-weight: 600;
}

.auth-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #26332c;
    font-size: .78rem;
    font-weight: 600;
}

.auth-field-head a {
    color: var(--auth-accent-dark);
    font-size: .72rem;
    font-weight: 700;
}

.auth-login-card .auth-field input {
    min-height: 50px;
    padding-inline: 14px;
    border-color: var(--auth-line);
    border-radius: 12px;
    background: #fbfcfb;
    font-size: 0.86rem;
}

.auth-login-card .auth-password-wrap input {
    padding-right: 66px;
}

.auth-login-card .auth-password-toggle {
    right: 14px;
    color: var(--auth-accent-dark);
    font-size: 0.74rem;
}

.auth-reset-card {
    max-width: 480px;
}

.auth-reset-card .auth-verify-icon {
    margin-inline: auto;
}

.auth-reset-form {
    text-align: left;
}

.auth-reset-form .auth-field {
    display: grid;
    gap: 7px;
}

.auth-reset-form .auth-field > span {
    color: #26332c;
    font-size: .78rem;
    font-weight: 600;
}

.auth-password-strength {
    display: grid;
    gap: 8px;
}

.auth-password-strength-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--auth-muted);
    font-size: .7rem;
    font-weight: 600;
}

.auth-password-strength-head strong {
    color: #9a2a2a;
    font-size: .68rem;
}

.auth-password-strength[data-strength="0"] .auth-password-strength-head strong {
    color: var(--auth-muted);
}

.auth-password-strength-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(38, 51, 44, .1);
}

.auth-password-strength-track i {
    width: 0;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #d85e5e;
    transition: width 180ms ease, background 180ms ease;
}

.auth-password-strength[data-strength="2"] .auth-password-strength-track i,
.auth-password-strength[data-strength="3"] .auth-password-strength-track i {
    background: #e5aa35;
}

.auth-password-strength[data-strength="4"] .auth-password-strength-track i,
.auth-password-strength[data-strength="5"] .auth-password-strength-track i {
    background: var(--auth-accent);
}

.auth-password-strength[data-strength="2"] .auth-password-strength-head strong,
.auth-password-strength[data-strength="3"] .auth-password-strength-head strong {
    color: #a66c00;
}

.auth-password-strength[data-strength="4"] .auth-password-strength-head strong,
.auth-password-strength[data-strength="5"] .auth-password-strength-head strong {
    color: var(--auth-accent-dark);
}

.auth-password-rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin: -2px 0 2px;
    padding: 0;
    list-style: none;
}

.auth-password-rules li {
    position: relative;
    padding-left: 18px;
    color: var(--auth-muted);
    font-size: .68rem;
    line-height: 1.4;
    transition: color 160ms ease;
}

.auth-password-rules li::before {
    content: "";
    position: absolute;
    top: .18em;
    left: 0;
    width: 11px;
    height: 11px;
    border: 1px solid var(--auth-line);
    border-radius: 50%;
    background: transparent;
}

.auth-password-rules li.is-valid {
    color: var(--auth-accent-dark);
}

.auth-password-rules li.is-valid::before {
    border-color: var(--auth-accent);
    background: var(--auth-accent);
    box-shadow: inset 0 0 0 3px #fff;
}

.auth-password-match {
    min-height: 18px;
    margin: -7px 0 0;
    color: var(--auth-muted);
    font-size: .7rem;
    line-height: 1.4;
}

.auth-password-match.is-valid {
    color: var(--auth-accent-dark);
}

.auth-password-match.is-invalid {
    color: #9a2a2a;
}

html[data-theme="dark"] .auth-password-strength-track {
    background: rgba(226, 241, 233, .12);
}

html[data-theme="dark"] .auth-password-rules li.is-valid::before {
    box-shadow: inset 0 0 0 3px #101d17;
}

@media (max-width: 420px) {
    .auth-password-rules {
        grid-template-columns: 1fr;
    }
}

.auth-login-card .auth-check {
    width: fit-content;
    gap: 8px;
    color: var(--auth-muted);
    font-size: 0.76rem;
}

.auth-login-card .auth-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--auth-accent);
}

.auth-login-submit {
    width: 100%;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--auth-accent), #19b67c);
    box-shadow: 0 16px 30px rgba(14, 138, 95, 0.22);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-login-submit:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--auth-accent-dark), var(--auth-accent));
    box-shadow: 0 18px 34px rgba(14, 138, 95, 0.28);
}

.auth-login-submit:disabled,
.auth-login-submit[aria-busy="true"] {
    cursor: not-allowed;
    opacity: 0.78;
    transform: none;
    box-shadow: 0 12px 22px rgba(14, 138, 95, 0.18);
}

.auth-login-submit[aria-busy="true"] [data-signin-submit-icon] {
    display: none;
}

.auth-login-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--auth-line);
    color: var(--auth-muted);
    font-size: 0.78rem;
}

.auth-login-card-footer a {
    color: var(--auth-accent-dark);
    font-weight: 700;
}

.auth-login-footer {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--auth-line);
    color: #748079;
    font-size: 0.72rem;
}

.auth-login-simple a:focus-visible,
.auth-login-simple button:focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: 2px;
}

html[data-theme="dark"] .auth-login-simple,
html[data-theme="dark"] .auth-signup-simple {
    --auth-accent: #9fda38;
    --auth-accent-dark: #b8ec58;
    --auth-ink: #f3f8f5;
    --auth-muted: #9eaca5;
    --auth-line: rgba(226, 241, 233, 0.12);
    background:
        radial-gradient(circle at 8% 10%, rgba(159, 218, 56, 0.12), transparent 34%),
        radial-gradient(circle at 96% 88%, rgba(255, 204, 39, 0.06), transparent 30%),
        #09110d;
}

html[data-theme="dark"] .auth-login-card,
html[data-theme="dark"] .auth-signup-card,
html[data-theme="dark"] .auth-login-note {
    border-color: var(--auth-line);
    background: rgba(16, 29, 23, 0.94);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .auth-brand,
html[data-theme="dark"] .auth-login-card-head h2,
html[data-theme="dark"] .auth-signup-card-head h2,
html[data-theme="dark"] .auth-login-note strong,
html[data-theme="dark"] .auth-plan-copy strong,
html[data-theme="dark"] .auth-plan-option > b {
    color: var(--auth-ink);
}

html[data-theme="dark"] .auth-login-card .auth-field > span,
html[data-theme="dark"] .auth-login-card .auth-field-head,
html[data-theme="dark"] .auth-signup-field > span,
html[data-theme="dark"] .auth-plan-selector legend,
html[data-theme="dark"] .auth-signup-benefits > div {
    color: #dbe7e0;
}

html[data-theme="dark"] .auth-login-card .auth-field input,
html[data-theme="dark"] .auth-signup-field input,
html[data-theme="dark"] .auth-signup-field select,
html[data-theme="dark"] .auth-plan-option {
    border-color: var(--auth-line);
    color: var(--auth-ink);
    background: #0c1812;
}

html[data-theme="dark"] .auth-login-card .auth-field input::placeholder,
html[data-theme="dark"] .auth-signup-field input::placeholder {
    color: #697870;
}

html[data-theme="dark"] .auth-signup-field select:invalid {
    color: #697870;
}

html[data-theme="dark"] .auth-phone-field {
    border-color: var(--auth-line);
    background: #0c1812;
}

html[data-theme="dark"] .auth-phone-country {
    border-color: var(--auth-line);
}

html[data-theme="dark"] .auth-plan-option:hover,
html[data-theme="dark"] .auth-plan-option:has(input:checked) {
    border-color: rgba(159, 218, 56, 0.42);
    background: rgba(159, 218, 56, 0.08);
}

html[data-theme="dark"] .auth-login-note-icon,
html[data-theme="dark"] .auth-signup-benefits > div > span,
html[data-theme="dark"] .auth-signup-step {
    background: rgba(159, 218, 56, 0.11);
}

html[data-theme="dark"] .auth-login-footer,
html[data-theme="dark"] .auth-signup-footer {
    color: #7f8e86;
}

html[data-theme="dark"] .auth-alert-success {
    border-color: rgba(110, 218, 120, 0.2);
    color: #99e3a3;
    background: rgba(74, 165, 75, 0.12);
}

html[data-theme="dark"] .auth-alert-error {
    border-color: rgba(245, 128, 128, 0.2);
    color: #f0a0a0;
    background: rgba(196, 70, 70, 0.13);
}

.company-chat {
    --chat-green: #86c92f;
    --chat-ink: #142119;
    --chat-muted: #68756e;
    --chat-line: rgba(20, 33, 25, 0.11);
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 100;
    font-family: "Inter", sans-serif;
}

.company-chat-panel {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: min(370px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--chat-line);
    border-radius: 22px;
    color: var(--chat-ink);
    background: #fff;
    box-shadow: 0 28px 70px rgba(8, 22, 14, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 180ms ease, visibility 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.company-chat.is-open .company-chat-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.company-chat-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 17px;
    color: #f5fbf7;
    background: linear-gradient(135deg, #102c20, #174f36);
}

.company-chat-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    color: #17210d;
    background: linear-gradient(135deg, #b9ed55, #ffdc3f);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
}

.company-chat-heading {
    display: grid;
    flex: 1;
    gap: 3px;
}

.company-chat-heading strong {
    font-size: 0.82rem;
}

.company-chat-heading small {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(245, 251, 247, 0.7);
    font-size: 0.65rem;
}

.company-chat-heading i,
.company-chat-launcher-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b9ed55;
    box-shadow: 0 0 0 3px rgba(185, 237, 85, 0.14);
}

.company-chat-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.25rem;
    cursor: pointer;
}

.company-chat-messages {
    height: 292px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 17px;
    background:
        radial-gradient(circle at 100% 0, rgba(134, 201, 47, 0.08), transparent 34%),
        #f7faf8;
    scroll-behavior: smooth;
}

.company-chat-message {
    max-width: 84%;
    display: grid;
    gap: 5px;
    font-size: 0.76rem;
    line-height: 1.55;
}

.company-chat-message span {
    padding: 10px 12px;
    border-radius: 14px 14px 14px 4px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(12, 31, 19, 0.07);
}

.company-chat-message-bot span a {
    color: #28720d;
    font-weight: 750;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.company-chat-message-bot span a:hover {
    color: #174b08;
}

.company-chat-message-bot span a:focus-visible {
    border-radius: 3px;
    outline: 2px solid #86c92f;
    outline-offset: 2px;
}

.company-chat-message .company-chat-message-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.company-chat-message-links a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(40, 114, 13, 0.22);
    border-radius: 999px;
    color: #28720d;
    background: rgba(134, 201, 47, 0.1);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.company-chat-message-links a::after {
    margin-left: 5px;
    content: "\2192";
}

.company-chat-message-links a:hover {
    border-color: rgba(40, 114, 13, 0.42);
    color: #174b08;
    background: rgba(134, 201, 47, 0.18);
}

.company-chat-message-links a:focus-visible {
    outline: 2px solid #86c92f;
    outline-offset: 2px;
}

.company-chat-message small {
    color: var(--chat-muted);
    font-size: 0.58rem;
}

.company-chat-message-user {
    align-self: flex-end;
    text-align: right;
}

.company-chat-message-user span {
    color: #12200e;
    background: #c3ee6c;
    border-radius: 14px 14px 4px;
}

.company-chat-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.company-chat-prompts button {
    padding: 7px 10px;
    border: 1px solid rgba(81, 132, 31, 0.2);
    border-radius: 999px;
    color: #41661f;
    background: rgba(185, 237, 85, 0.12);
    font-size: 0.64rem;
    font-weight: 700;
    cursor: pointer;
}

.company-chat-typing span {
    display: inline-flex;
    gap: 4px;
    width: fit-content;
}

.company-chat-typing i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8b9991;
    animation: company-chat-typing 900ms ease-in-out infinite alternate;
}

.company-chat-typing i:nth-child(2) { animation-delay: 140ms; }
.company-chat-typing i:nth-child(3) { animation-delay: 280ms; }

@keyframes company-chat-typing {
    to { transform: translateY(-3px); opacity: 0.45; }
}

.company-chat-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 13px 8px;
    border-top: 1px solid var(--chat-line);
    background: #fff;
}

.company-chat-form label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.company-chat-form input {
    min-width: 0;
    min-height: 42px;
    flex: 1;
    padding: 0 13px;
    border: 1px solid var(--chat-line);
    border-radius: 12px;
    outline: none;
    color: var(--chat-ink);
    background: #f7faf8;
    font-size: 0.75rem;
}

.company-chat-form input:focus {
    border-color: rgba(94, 151, 39, 0.55);
    box-shadow: 0 0 0 3px rgba(134, 201, 47, 0.1);
}

.company-chat-form button {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: #17210d;
    background: linear-gradient(135deg, #b9ed55, #ffdc3f);
    cursor: pointer;
}

.company-chat-form input:disabled,
.company-chat-form button:disabled {
    cursor: wait;
    opacity: .62;
}

.company-chat-handoff {
    margin: 0;
    padding: 0 15px 12px;
    color: var(--chat-muted);
    background: #fff;
    font-size: 0.6rem;
    text-align: center;
}

.company-chat-handoff a {
    color: #47751d;
    font-weight: 700;
}

.company-chat-launcher {
    position: relative;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 18px;
    color: #17210d;
    background: linear-gradient(135deg, #b9ed55, #ffdc3f);
    box-shadow: 0 16px 34px rgba(78, 119, 27, 0.3);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.company-chat-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(78, 119, 27, 0.36);
}

.company-chat-launcher-open,
.company-chat-launcher-close {
    grid-area: 1 / 1;
    transition: opacity 160ms ease, transform 180ms ease;
}

.company-chat-launcher-close,
.company-chat.is-open .company-chat-launcher-open {
    opacity: 0;
    transform: scale(0.6) rotate(-30deg);
}

.company-chat.is-open .company-chat-launcher-close {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.company-chat-launcher-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    border: 2px solid #fff;
}

.company-chat.is-open .company-chat-launcher-dot {
    display: none;
}

html[data-theme="dark"] .company-chat {
    --chat-ink: #eef7f1;
    --chat-muted: #91a198;
    --chat-line: rgba(226, 241, 233, 0.12);
}

html[data-theme="dark"] .company-chat-panel,
html[data-theme="dark"] .company-chat-form,
html[data-theme="dark"] .company-chat-handoff {
    background: #101d17;
}

html[data-theme="dark"] .company-chat-messages {
    background:
        radial-gradient(circle at 100% 0, rgba(159, 218, 56, 0.08), transparent 34%),
        #0b1510;
}

html[data-theme="dark"] .company-chat-message span,
html[data-theme="dark"] .company-chat-form input {
    color: var(--chat-ink);
    background: #16261e;
}

html[data-theme="dark"] .company-chat-message-user span {
    color: #12200e;
    background: #b9e85c;
}

html[data-theme="dark"] .company-chat-message-bot span a {
    color: #b9e85c;
}

html[data-theme="dark"] .company-chat-message-bot span a:hover {
    color: #d7f69a;
}

html[data-theme="dark"] .company-chat-message-links a {
    border-color: rgba(185, 232, 92, 0.28);
    color: #d7f69a;
    background: rgba(185, 232, 92, 0.1);
}

html[data-theme="dark"] .company-chat-message-links a:hover {
    border-color: rgba(185, 232, 92, 0.48);
    color: #efffcf;
    background: rgba(185, 232, 92, 0.17);
}

html[data-theme="dark"] .company-chat-form input::placeholder {
    color: #718078;
}

@media (max-width: 600px) {
    .company-chat {
        right: 14px;
        bottom: 14px;
    }

    .company-chat-panel {
        position: fixed;
        right: 12px;
        bottom: 80px;
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 96px);
    }

    .company-chat-messages {
        height: min(300px, calc(100dvh - 270px));
        min-height: 210px;
    }

    .company-chat-launcher {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }
}

@media (max-width: 820px) {
    .auth-login-main {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 540px;
        padding-block: 48px;
    }

    .auth-login-intro {
        text-align: center;
    }

    .auth-login-eyebrow,
    .auth-login-note {
        margin-inline: auto;
    }

    .auth-login-intro h1,
    .auth-login-intro > p:not(.auth-login-eyebrow) {
        margin-inline: auto;
    }
}

.payment-proof-cell {
    display: grid;
    min-width: 210px;
    gap: 9px;
}

.payment-state {
    width: max-content;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff3d6;
    color: #805611;
    font: 800 .65rem "Instrument Sans", sans-serif;
    text-transform: capitalize;
}

.payment-state-paid {
    background: #dff7e8;
    color: #17623a;
}

.payment-proof-thumb {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 9px;
    color: inherit;
    font-weight: 750;
    text-decoration: none;
}

.payment-proof-thumb img {
    width: 52px;
    height: 52px;
    border: 1px solid var(--app-line, #dce5df);
    border-radius: 10px;
    object-fit: cover;
}

.payment-risk,
.payment-safety-note {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid #efc270;
    border-radius: 12px;
    color: #6c4913;
    background: #fff8e8;
    font-size: .72rem;
}

.payment-review-form {
    display: grid;
    gap: 7px;
}

.payment-review-form input {
    width: 100%;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--app-line, #dce5df);
    border-radius: 9px;
    background: var(--app-surface, #fff);
    color: var(--app-ink, #0e1512);
}

.payment-review-form div {
    display: flex;
    gap: 6px;
}

.payment-review-form button {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 9px;
    font: 800 .66rem "Instrument Sans", sans-serif;
    cursor: pointer;
}

.payment-approve {
    border: 1px solid #207849;
    color: #fff;
    background: #207849;
}

.payment-reject {
    border: 1px solid #d99b9b;
    color: #8f2626;
    background: #fff3f3;
}

html[data-theme="dark"] .payment-risk,
html[data-theme="dark"] .payment-safety-note {
    border-color: rgba(239, 194, 112, .38);
    color: #f2d59f;
    background: rgba(128, 86, 17, .18);
}

@media (max-width: 520px) {
    .auth-login-header,
    .auth-login-main,
    .auth-login-footer {
        width: min(100% - 32px, 1080px);
    }

    .auth-login-header {
        min-height: 70px;
    }

    .auth-brand > span:last-child {
        display: none;
    }

    .auth-login-main {
        padding-block: 36px;
    }

    .auth-login-intro h1 {
        font-size: 2.15rem;
    }

    .auth-login-intro > p:not(.auth-login-eyebrow) {
        margin-top: 16px;
    }

    .auth-login-note {
        margin-top: 24px;
        text-align: left;
    }

    .auth-login-card {
        padding: 26px 22px;
        border-radius: 18px;
    }

    .auth-login-card-footer,
    .auth-login-footer {
        flex-direction: column;
        text-align: center;
    }

    .auth-login-footer {
        justify-content: center;
        padding-block: 16px;
    }
}

/* ---------- Signup ---------- */

.auth-signup-header,
.auth-signup-main,
.auth-signup-footer {
    width: min(1160px, calc(100% - 48px));
    margin-inline: auto;
}

.auth-signup-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--auth-line);
}

.auth-signup-header-action {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--auth-muted);
    font-size: 0.8rem;
}

.auth-signup-header-action a {
    color: var(--auth-accent-dark);
    font-weight: 700;
}

.auth-signup-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(560px, 1.28fr);
    align-items: center;
    gap: clamp(48px, 7vw, 100px);
    padding-block: 52px;
}

.auth-signup-intro {
    max-width: 450px;
}

.auth-signup-intro h1 {
    max-width: 11ch;
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(2.1rem, 4vw, 3.45rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.auth-signup-intro > p:not(.auth-login-eyebrow) {
    margin: 20px 0 0;
    color: var(--auth-muted);
    font-size: 0.9rem;
    line-height: 1.72;
}

.auth-signup-benefits {
    display: grid;
    gap: 13px;
    margin-top: 30px;
}

.auth-signup-benefits > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #37443d;
    font-size: 0.8rem;
    font-weight: 600;
}

.auth-signup-benefits > div > span {
    width: 28px;
    height: 28px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--auth-accent-dark);
    background: rgba(14, 138, 95, 0.1);
}

.auth-signup-card {
    display: grid;
    gap: 22px;
    padding: 32px;
    border: 1px solid var(--auth-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 28px 60px rgba(14, 21, 18, 0.1);
}

.auth-signup-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}

.auth-signup-card-head p {
    margin: 0 0 7px;
    color: var(--auth-accent-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-signup-card-head h2 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1.45rem;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.auth-signup-card-head div > span {
    display: block;
    max-width: 55ch;
    margin-top: 8px;
    color: var(--auth-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.auth-signup-step {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--auth-accent-dark);
    background: rgba(14, 138, 95, 0.09);
    font-size: 0.68rem;
    font-weight: 700;
}

.auth-signup-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.auth-recaptcha-block {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    background: rgba(14, 138, 95, 0.035);
}

.auth-recaptcha-block > p {
    margin: 0;
    color: var(--auth-muted);
    font-size: 0.64rem;
}

.auth-recaptcha-block .auth-alert {
    width: 100%;
    margin: 0;
}

.auth-signup-field {
    display: grid;
    gap: 7px;
}

.auth-signup-field > span {
    color: #26332c;
    font-size: 0.76rem;
    font-weight: 600;
}

.auth-signup-field small {
    margin-left: 4px;
    color: #89928d;
    font-size: 0.65rem;
    font-weight: 500;
}

.auth-signup-field input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    outline: none;
    color: var(--auth-ink);
    background: #fbfcfb;
    font-size: 0.82rem;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.auth-phone-field {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 48px;
    overflow: hidden;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: #fbfcfb;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.auth-phone-field:focus-within {
    border-color: rgba(14, 138, 95, .66);
    box-shadow: 0 0 0 4px rgba(14, 138, 95, .1);
    transform: translateY(-1px);
}

.auth-phone-country {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 30px 0 12px;
    border-right: 1px solid var(--auth-line);
    cursor: pointer;
}

.auth-phone-country select {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    box-shadow: none;
    transform: none;
}

.auth-phone-flag {
    width: 22px;
    height: 22px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(38, 51, 44, .08);
    border-radius: 50%;
    background: #fff;
    font-size: .86rem;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(14, 21, 18, .08);
}

.auth-phone-code {
    color: var(--auth-ink);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.auth-phone-country > svg {
    position: absolute;
    top: 50%;
    right: 9px;
    color: var(--auth-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.auth-signup-field .auth-phone-field > input[type="tel"] {
    min-width: 0;
    min-height: 46px;
    padding-inline: 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.auth-signup-field .auth-phone-field > input[type="tel"]:focus,
.auth-phone-country select:focus {
    border: 0;
    box-shadow: none;
    transform: none;
}

.auth-phone-country:focus-within {
    background: rgba(14, 138, 95, .045);
}

.auth-signup-select {
    position: relative;
    display: block;
}

.auth-signup-field select {
    width: 100%;
    min-height: 48px;
    padding: 0 42px 0 14px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    outline: none;
    color: var(--auth-ink);
    background: #fbfcfb;
    font-size: .82rem;
    cursor: pointer;
    appearance: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.auth-signup-field select:invalid {
    color: #9aa39e;
}

.auth-signup-select > svg {
    position: absolute;
    top: 50%;
    right: 14px;
    color: var(--auth-muted);
    pointer-events: none;
    transform: translateY(-50%);
    transition: color 160ms ease, transform 160ms ease;
}

.auth-signup-select:focus-within > svg {
    color: var(--auth-accent-dark);
    transform: translateY(-50%) rotate(180deg);
}

.auth-signup-field input::placeholder {
    color: #9aa39e;
}

.auth-signup-field input:focus,
.auth-signup-field select:focus {
    border-color: rgba(14, 138, 95, 0.66);
    box-shadow: 0 0 0 4px rgba(14, 138, 95, 0.1);
    transform: translateY(-1px);
}

.auth-plan-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
}

.auth-plan-selector legend {
    grid-column: 1 / -1;
    margin-bottom: -2px;
    padding: 0;
    color: #26332c;
    font-size: 0.76rem;
    font-weight: 600;
}

.auth-plan-selector legend small {
    margin-left: 6px;
    color: var(--auth-muted);
    font-size: .65rem;
    font-weight: 500;
}

.auth-plan-option {
    margin-top: 12px;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    padding: 13px;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    background: #fbfcfb;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.auth-plan-option:hover,
.auth-plan-option:has(input:checked) {
    border-color: rgba(14, 138, 95, 0.42);
    background: rgba(14, 138, 95, 0.045);
}

.auth-plan-option:has(input:checked) {
    box-shadow: 0 0 0 3px rgba(14, 138, 95, 0.08);
}

.auth-plan-option:has(input:focus-visible) {
    outline: 2px solid var(--auth-accent);
    outline-offset: 2px;
}

.auth-plan-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.auth-plan-radio {
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border: 1.5px solid #aab3ae;
    border-radius: 50%;
}

.auth-plan-radio::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--auth-accent);
    transform: scale(0);
    transition: transform 160ms ease;
}

.auth-plan-option input:checked ~ .auth-plan-radio {
    border-color: var(--auth-accent);
}

.auth-plan-option input:checked ~ .auth-plan-radio::after {
    transform: scale(1);
}

.auth-plan-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.auth-plan-copy strong {
    color: var(--auth-ink);
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 0.82rem;
}

.auth-plan-copy small {
    overflow: hidden;
    color: var(--auth-muted);
    font-size: 0.67rem;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.auth-plan-option > b {
    color: var(--auth-ink);
    font-size: 0.9rem;
}

.auth-plan-option > b small {
    color: var(--auth-muted);
    font-size: 0.62rem;
    font-weight: 500;
}

.auth-signup-terms {
    margin: -8px 0 0;
    color: #7a8580;
    font-size: 0.67rem;
    line-height: 1.5;
    text-align: center;
}

.auth-signup-footer {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--auth-line);
    color: #748079;
    font-size: 0.72rem;
}

.auth-signup-footer a {
    color: var(--auth-accent-dark);
    font-weight: 600;
}

.auth-signup-simple a:focus-visible,
.auth-signup-simple button:focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: 2px;
}

@media (max-width: 980px) {
    .auth-signup-main {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 680px;
        padding-block: 48px;
    }

    .auth-signup-intro {
        max-width: 620px;
        text-align: center;
    }

    .auth-signup-intro h1,
    .auth-signup-intro > p:not(.auth-login-eyebrow) {
        margin-inline: auto;
    }

    .auth-signup-intro .auth-login-eyebrow {
        justify-content: center;
    }

    .auth-login-intro .auth-login-eyebrow {
        justify-content: center;
    }

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

    .auth-signup-benefits > div {
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .auth-signup-header,
    .auth-signup-main,
    .auth-signup-footer {
        width: min(100% - 32px, 1160px);
    }

    .auth-signup-header {
        min-height: 70px;
    }

    .auth-signup-header-action > span {
        display: none;
    }

    .auth-signup-main {
        padding-block: 36px;
    }

    .auth-signup-intro h1 {
        font-size: 2.15rem;
    }

    .auth-signup-benefits {
        grid-template-columns: 1fr;
        width: fit-content;
        margin-inline: auto;
    }

    .auth-signup-card {
        gap: 20px;
        padding: 26px 22px;
        border-radius: 18px;
    }

    .auth-signup-card-head,
    .auth-signup-footer {
        flex-direction: column;
    }

    .auth-signup-card-head {
        gap: 12px;
    }

    .auth-signup-form-grid,
    .auth-plan-selector {
        grid-template-columns: 1fr;
    }

    .auth-recaptcha-block {
        justify-items: start;
    }

    .auth-plan-selector legend {
        grid-column: auto;
    }

    .auth-signup-footer {
        justify-content: center;
        gap: 7px;
        padding-block: 16px;
        text-align: center;
    }
}

@media (max-width: 390px) {
    .auth-recaptcha-block .g-recaptcha {
        width: 304px;
        height: 67px;
        transform: scale(0.86);
        transform-origin: top left;
    }
}

.lp-page {
    --lp-bg: #fbfdfc;
    --lp-bg-soft: #f2f7f4;
    --lp-ink: #0e1512;
    --lp-muted: #566259;
    --lp-line: rgba(14, 21, 18, 0.12);
    --lp-accent: #0e8a5f;
    --lp-accent-dark: #0a6a48;
    --lp-accent-soft: rgba(14, 138, 95, 0.14);
    --lp-coral: #ff6b4a;
    --lp-radius-lg: 28px;
    --lp-radius-md: 18px;
    --lp-radius-sm: 12px;
    --lp-shadow: 0 28px 60px rgba(14, 21, 18, 0.12);
    --lp-shadow-soft: 0 16px 34px rgba(14, 21, 18, 0.10);
    --lp-space-1: 8px;
    --lp-space-2: 16px;
    --lp-space-3: 24px;
    --lp-space-4: 32px;
    --lp-space-5: 48px;
    --lp-space-6: 64px;
    --lp-space-7: 96px;

    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--lp-ink);
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 138, 95, 0.14), transparent 48%),
        radial-gradient(circle at 100% 12%, rgba(255, 107, 74, 0.08), transparent 46%),
        var(--lp-bg);
    -webkit-font-smoothing: antialiased;
}

html:has(.lp-page),
body:has(.lp-page) {
    background-color: #fbfdfc;
}

html:has(.lp-page[data-theme="light"]),
body:has(.lp-page[data-theme="light"]) {
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 138, 95, 0.14), transparent 48%),
        radial-gradient(circle at 100% 12%, rgba(255, 107, 74, 0.08), transparent 46%),
        #fbfdfc;
}

html:has(.lp-page[data-theme="dark"]),
body:has(.lp-page[data-theme="dark"]) {
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 138, 95, 0.18), transparent 44%),
        radial-gradient(circle at 100% 12%, rgba(255, 107, 74, 0.10), transparent 40%),
        #091218;
}

.lp-page[data-theme="light"] {
    --lp-bg: #fbfdfc;
    --lp-bg-soft: #f2f7f4;
    --lp-ink: #0e1512;
    --lp-muted: #566259;
    --lp-line: rgba(14, 21, 18, 0.12);
    --lp-accent-soft: rgba(14, 138, 95, 0.14);
    --lp-shadow: 0 28px 60px rgba(14, 21, 18, 0.12);
    --lp-shadow-soft: 0 16px 34px rgba(14, 21, 18, 0.10);
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 138, 95, 0.14), transparent 48%),
        radial-gradient(circle at 100% 12%, rgba(255, 107, 74, 0.08), transparent 46%),
        var(--lp-bg);
}

.lp-page[data-theme="dark"] {
    --lp-bg: #091218;
    --lp-bg-soft: #0f1c24;
    --lp-ink: #edf6f3;
    --lp-muted: #9bb0ad;
    --lp-line: rgba(237, 246, 243, 0.12);
    --lp-accent-soft: rgba(14, 138, 95, 0.24);
    --lp-shadow: 0 28px 60px rgba(0, 0, 0, 0.34);
    --lp-shadow-soft: 0 16px 34px rgba(0, 0, 0, 0.24);
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 138, 95, 0.18), transparent 44%),
        radial-gradient(circle at 100% 12%, rgba(255, 107, 74, 0.10), transparent 40%),
        var(--lp-bg);
}

.lp-page h1,
.lp-page h2,
.lp-page h3,
.lp-page .lp-display {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    letter-spacing: -0.02em;
    color: var(--lp-ink);
    margin: 0;
}

.lp-container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-accent-dark);
    margin: 0 0 var(--lp-space-2);
}

.lp-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--lp-accent);
}

/* ---------- Buttons ---------- */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.88rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
    white-space: nowrap;
}

.lp-btn-primary {
    background: linear-gradient(135deg, var(--lp-accent) 0%, #19b67c 100%);
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(14, 138, 95, 0.24);
}

.lp-btn-primary:hover {
    background: linear-gradient(135deg, var(--lp-accent-dark) 0%, #0e8a5f 100%);
    transform: translateY(-1px);
}

.lp-btn-ghost {
    background: transparent;
    color: var(--lp-ink);
    border-color: var(--lp-line);
}

.lp-btn-ghost:hover {
    border-color: var(--lp-accent);
    color: var(--lp-accent-dark);
}

.lp-btn-lg {
    padding: 16px 30px;
    font-size: 0.92rem;
}

.lp-btn.is-checking,
.lp-plan-compare-link.is-checking {
    pointer-events: none;
    opacity: 0.82;
}

.lp-btn.is-checking::after,
.lp-plan-compare-link.is-checking::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lp-auth-spin 700ms linear infinite;
}

.lp-btn-block {
    width: 100%;
}

.lp-theme-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex-shrink: 0;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--lp-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.language-switcher {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

.language-switcher > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.language-switcher-control {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    border: 1px solid var(--lp-line, var(--app-line, rgba(14, 21, 18, .12)));
    border-radius: 999px;
    color: var(--lp-ink, var(--app-ink, #0e1512));
    background: color-mix(in srgb, var(--lp-bg, var(--app-surface, #fff)) 90%, transparent);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.language-switcher-control:focus-within,
.language-switcher-control:hover {
    border-color: color-mix(in srgb, var(--lp-accent, var(--app-accent, #0e8a5f)) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-accent-soft, rgba(14, 138, 95, .12)) 70%, transparent);
}

.language-switcher-control > svg:first-child {
    width: 17px;
    height: 17px;
    margin-left: 11px;
    pointer-events: none;
}

.language-switcher select {
    min-height: 38px;
    max-width: 108px;
    padding: 0 27px 0 7px;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: 700 .68rem "Instrument Sans", "Inter", sans-serif;
    cursor: pointer;
    appearance: none;
}

.language-switcher-chevron {
    position: absolute;
    right: 9px;
    width: 13px;
    height: 13px;
    pointer-events: none;
}

html[data-theme="dark"] .language-switcher-control,
.lp-page[data-theme="dark"] .language-switcher-control {
    color: #eaf5ef;
    border-color: rgba(234, 245, 239, .15);
    background: rgba(15, 31, 23, .88);
}

.lp-theme-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--lp-accent);
    background: rgba(14, 138, 95, 0.12);
}

.lp-theme-toggle-icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 160ms ease, transform 160ms ease;
}

.lp-theme-toggle {
    position: relative;
}

.lp-page[data-theme="light"] .lp-theme-toggle-sun,
.lp-page[data-theme="dark"] .lp-theme-toggle-moon {
    opacity: 0;
    transform: scale(0.7);
}

.lp-page[data-theme="light"] .lp-theme-toggle-moon,
.lp-page[data-theme="dark"] .lp-theme-toggle-sun {
    opacity: 1;
    transform: scale(1);
}

.lp-page[data-theme="light"] .lp-theme-toggle {
    background: rgba(14, 21, 18, 0.04);
}

/* ---------- Top navigation ---------- */

.lp-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--lp-line);
    box-shadow: 0 12px 28px rgba(14, 21, 18, 0.06);
}

.lp-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-3);
    padding: 16px 0;
}

.lp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 0.96rem;
}

.lp-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--lp-accent) 0%, #1ad08a 100%);
    display: grid;
    place-items: center;
    color: #fff;
}

.lp-nav-links {
    display: flex;
    align-items: center;
    gap: var(--lp-space-4);
}

.lp-nav-links a {
    position: relative;
    font-size: 0.86rem;
    font-weight: 500;
    /* color: var(--lp-muted); */
}

/* .lp-nav-links a:hover {
    color: var(--lp-ink);
} */

.lp-nav-links > a.is-active {
    color: var(--lp-ink);
    font-weight: 700;
}

.lp-nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(14, 138, 95, 0), rgba(14, 138, 95, 0.9), rgba(14, 138, 95, 0));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease;
}

.lp-nav-links a:hover::after,
.lp-nav-links > a.is-active::after {
    transform: scaleX(1);
}

.lp-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--lp-space-2);
}

.lp-nav-actions-mobile {
    display: none;
}

.lp-page[data-theme="light"] .lp-nav {
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 28px rgba(14, 21, 18, 0.06);
}

.lp-page[data-theme="light"] .lp-logo-strip {
    background: rgba(255, 255, 255, 0.55);
}

.lp-page[data-theme="light"] .lp-logo-row span {
    border: 1px solid rgba(14, 21, 18, 0.08);
    background: rgba(255, 255, 255, 0.86);
    color: rgba(14, 21, 18, 0.72);
}

.lp-page[data-theme="light"] .lp-feature-card {
    border: 1px solid rgba(14, 21, 18, 0.08);
    background: rgba(255, 255, 255, 0.78);
}

.lp-page[data-theme="light"] .lp-feature-icon {
    color: rgba(14, 21, 18, 0.92);
}

.lp-page[data-theme="light"] .lp-step {
    background: var(--lp-bg);
}

.lp-page[data-theme="light"] .lp-step-number {
    background: var(--lp-ink);
    color: #fff;
}

.lp-page[data-theme="light"] .lp-price-card {
    background: var(--lp-bg);
}

.lp-page[data-theme="light"] .lp-price-card-featured {
    background: var(--lp-ink);
    border-color: var(--lp-ink);
}

.lp-page[data-theme="light"] .lp-price-card-featured li svg {
    color: #6bd8ac;
}

.lp-page[data-theme="light"] .lp-testimonial {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(14, 21, 18, 0.08);
    box-shadow: 0 14px 30px rgba(14, 21, 18, 0.06);
}

.lp-page[data-theme="light"] .lp-avatar {
    background: var(--lp-accent-soft);
    color: var(--lp-accent-dark);
}

.lp-page[data-theme="light"] .lp-faq details {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(14, 21, 18, 0.10);
}

.lp-page[data-theme="light"] .lp-cta-band {
    background: linear-gradient(135deg, #0b1c16 0%, #12342a 60%, #0e8a5f 100%);
}

.lp-page[data-theme="light"] .lp-footer {
    background: rgba(255, 255, 255, 0.55);
}

.lp-page[data-theme="light"] .lp-nav-links {
    background: transparent;
}

.lp-page[data-theme="dark"] .lp-nav {
    background: rgba(9, 18, 24, 0.86);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.lp-page[data-theme="dark"] .lp-logo-strip {
    background: rgba(255, 255, 255, 0.02);
}

.lp-page[data-theme="dark"] .lp-logo-row span {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(237, 246, 243, 0.76);
}

.lp-page[data-theme="dark"] .lp-btn-ghost {
    background: rgba(255, 255, 255, 0.03);
}

.lp-page[data-theme="dark"] .lp-theme-toggle {
    background: rgba(255, 255, 255, 0.04);
}

.lp-page[data-theme="dark"] .lp-feature-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.lp-page[data-theme="dark"] .lp-stat {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.lp-page[data-theme="dark"] .lp-stat strong {
    color: #f4fbf8;
}

.lp-page[data-theme="dark"] .lp-stat span {
    color: rgba(237, 246, 243, 0.68);
}

.lp-page[data-theme="dark"] .lp-feature-icon {
    color: #eaf8f3;
}

.lp-page[data-theme="dark"] .lp-step {
    background: rgba(255, 255, 255, 0.04);
}

.lp-page[data-theme="dark"] .lp-step-number {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.lp-page[data-theme="dark"] .lp-price-card {
    background: rgba(255, 255, 255, 0.04);
}

.lp-page[data-theme="dark"] .lp-price-card-featured {
    background: linear-gradient(180deg, #123728 0%, #0e1512 100%);
    border-color: rgba(25, 182, 124, 0.26);
}

.lp-page[data-theme="dark"] .lp-testimonial {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.lp-page[data-theme="dark"] .lp-avatar {
    background: rgba(14, 138, 95, 0.22);
    color: #dff7ee;
}

.lp-page[data-theme="dark"] .lp-faq details {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-page[data-theme="dark"] .lp-phone-screen {
    background: #122028;
}

.lp-page[data-theme="dark"] .lp-phone-body {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%),
        #122028;
}

.lp-page[data-theme="dark"] .lp-bubble-in {
    background: rgba(255, 255, 255, 0.08);
    color: #edf6f3;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-page[data-theme="dark"] .lp-bubble-out {
    background: linear-gradient(135deg, rgba(14, 138, 95, 0.3), rgba(14, 138, 95, 0.18));
    color: #eefaf5;
}

.lp-page[data-theme="dark"] .lp-bubble-order {
    background: linear-gradient(135deg, rgba(255, 107, 74, 0.18), rgba(255, 107, 74, 0.08));
    color: #fff1ec;
    border: 1px solid rgba(255, 107, 74, 0.18);
}

.lp-page[data-theme="dark"] .lp-bubble-order .lp-dot {
    background: #ff8b70;
}

.lp-page[data-theme="dark"] .lp-typing {
    background: rgba(255, 255, 255, 0.08);
}

.lp-page[data-theme="dark"] .lp-typing span {
    background: rgba(237, 246, 243, 0.7);
}

.lp-page[data-theme="dark"] .lp-phone-composer {
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(237, 246, 243, 0.52);
    background: rgba(255, 255, 255, 0.06);
}

.lp-page[data-theme="dark"] .lp-phone-home {
    background: rgba(237, 246, 243, 0.72);
}

.lp-page[data-theme="dark"] .lp-chat-time {
    color: rgba(237, 246, 243, 0.48);
}

.lp-page[data-theme="dark"] .lp-cta-band {
    background: linear-gradient(135deg, #0b1c16 0%, #12342a 60%, #0e8a5f 100%);
}

.lp-page[data-theme="dark"] .lp-footer {
    background: rgba(255, 255, 255, 0.03);
}

.lp-nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lp-nav-burger {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--lp-line);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lp-nav-burger span,
.lp-nav-burger span::before,
.lp-nav-burger span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--lp-ink);
    position: relative;
    transition: transform 160ms ease;
}

.lp-nav-burger span::before,
.lp-nav-burger span::after {
    content: "";
    position: absolute;
}

.lp-nav-burger span::before {
    top: -6px;
}

.lp-nav-burger span::after {
    top: 6px;
}

/* ---------- Hero ---------- */

.lp-hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 74px);
    display: grid;
    align-items: center;
    padding: 84px 0 76px;
    background:
        linear-gradient(var(--lp-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-line) 1px, transparent 1px),
        radial-gradient(circle at 82% 30%, rgba(14, 138, 95, 0.16), transparent 36%),
        var(--lp-bg);
    background-size: 64px 64px, 64px 64px, auto, auto;
}

.lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--lp-bg) 0%, transparent 34%, transparent 72%, var(--lp-bg) 100%);
    z-index: 0;
    pointer-events: none;
}

.lp-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lp-accent), transparent);
    opacity: 0.36;
    z-index: 0;
    pointer-events: none;
}

.lp-hero-ambient {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(4px);
    animation: lp-ambient-drift 9s ease-in-out infinite;
}

.lp-hero-ambient-one {
    width: 360px;
    height: 360px;
    top: -180px;
    right: 16%;
    background: radial-gradient(circle, rgba(25, 182, 124, 0.16), transparent 68%);
}

.lp-hero-ambient-two {
    width: 280px;
    height: 280px;
    left: -130px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(255, 107, 74, 0.1), transparent 68%);
    animation-delay: -4s;
}

@keyframes lp-ambient-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(24px, -18px, 0) scale(1.08); }
}

.lp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(400px, 0.98fr);
    gap: clamp(54px, 7vw, 104px);
    align-items: center;
    position: relative;
    z-index: 1;
}

.lp-hero h1 {
    font-size: clamp(2.7rem, 5.2vw, 4.65rem);
    line-height: 0.99;
    max-width: 13ch;
    letter-spacing: -0.055em;
}

.lp-hero-content {
    position: relative;
    z-index: 2;
    animation: lp-hero-content-in 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    padding: 8px 12px;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    color: var(--lp-muted);
    background: color-mix(in srgb, var(--lp-bg) 82%, transparent);
    backdrop-filter: blur(12px);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lp-hero-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #19b67c;
    box-shadow: 0 0 0 5px rgba(25, 182, 124, 0.12), 0 0 16px rgba(25, 182, 124, 0.65);
    animation: lp-status-pulse 1.8s ease-out infinite;
}

@keyframes lp-status-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(25, 182, 124, 0.1), 0 0 12px rgba(25, 182, 124, 0.45); }
    50% { box-shadow: 0 0 0 7px rgba(25, 182, 124, 0), 0 0 20px rgba(25, 182, 124, 0.7); }
}

@keyframes lp-hero-content-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.lp-hero-copy {
    position: relative;
    display: grid;
    gap: 0;
    min-height: 330px;
}

.lp-hero-copy-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
    color: var(--lp-muted);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lp-hero-copy-meta span:first-child {
    color: var(--lp-accent);
}

.lp-hero-copy-meta span:last-child::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 1px;
    margin: 0 10px 3px 0;
    background: var(--lp-line);
}

.lp-hero-title,
.lp-hero-sub {
    transition:
        opacity 420ms ease,
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 420ms ease,
        clip-path 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter, clip-path;
}

.lp-hero-title {
    position: relative;
    display: block;
    color: var(--lp-ink);
    background: none;
    text-shadow: none;
}

.lp-hero-title::after {
    content: "";
    position: absolute;
    left: 0;
    top: -8px;
    width: 38px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--lp-accent), #19b67c);
    box-shadow: 0 0 16px rgba(25, 182, 124, 0.42);
}

.lp-page[data-theme="light"] .lp-hero-title {
    color: #0e1512;
    background: none;
    text-shadow: none;
}

.lp-page[data-theme="light"] .lp-hero-title::after {
    background: linear-gradient(90deg, var(--lp-accent), #19b67c);
    box-shadow: 0 0 16px rgba(25, 182, 124, 0.32);
}

.lp-hero-copy.is-switching .lp-hero-title,
.lp-hero-copy.is-switching .lp-hero-sub {
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(6px);
    clip-path: inset(0 0 100% 0);
}

.lp-hero-copy.is-entering .lp-hero-title,
.lp-hero-copy.is-entering .lp-hero-sub {
    animation: lp-copy-scan-in 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp-hero-copy.is-entering .lp-hero-sub {
    animation-delay: 70ms;
}

@keyframes lp-copy-scan-in {
    from { opacity: 0; transform: translateY(14px); filter: blur(7px); clip-path: inset(100% 0 0 0); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-hero-title,
    .lp-hero-sub {
        transition: none;
    }
}

.lp-hero-sub {
    margin: 22px 0 20px;
    max-width: 54ch;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--lp-muted);
}

.lp-hero-progress {
    width: min(100%, 360px);
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--lp-line);
}

.lp-hero-progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transform-origin: left;
    background: linear-gradient(90deg, var(--lp-accent), #19b67c);
    animation: lp-hero-progress 4.8s linear infinite;
}

.lp-hero-progress span.is-restarting {
    animation: none;
}

@keyframes lp-hero-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.lp-hero-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: var(--lp-space-2);
    flex-wrap: wrap;
}

.lp-hero-play {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--lp-accent);
}

.lp-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid var(--lp-line);
}

.lp-stat {
    position: relative;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}

.lp-stat:first-child {
    padding-left: 0;
}

.lp-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 0;
    width: 1px;
    height: 36px;
    background: var(--lp-line);
}

.lp-stat strong {
    display: block;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.22rem;
    color: var(--lp-ink);
    letter-spacing: -0.03em;
}

.lp-stat span {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--lp-muted);
    line-height: 1.4;
}

.lp-logo-strip {
    padding: var(--lp-space-4) 0;
    border-bottom: 1px solid var(--lp-line);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
}

.lp-logo-strip-title {
    margin: 0 0 14px;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lp-muted);
    font-weight: 600;
    text-align: center;
}

.lp-logo-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.lp-logo-row span {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(14, 21, 18, 0.08);
    background: rgba(255, 255, 255, 0.86);
    font-weight: 600;
    font-size: 0.82rem;
    color: rgba(14, 21, 18, 0.72);
}

/* ---------- Hero phone mockup ---------- */

.lp-hero-visual {
    position: relative;
    min-height: 600px;
    display: grid;
    place-items: center;
    isolation: isolate;
    animation: lp-hero-visual-in 900ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lp-hero-visual-in {
    from { opacity: 0; transform: translateY(28px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lp-hero-radar {
    position: absolute;
    width: min(100%, 500px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-accent-soft), transparent 64%);
    z-index: -1;
}

.lp-hero-radar::before,
.lp-hero-radar::after,
.lp-hero-radar > span {
    content: "";
    position: absolute;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
}

.lp-hero-radar::before { inset: 15%; }
.lp-hero-radar::after { inset: 31%; }
.lp-hero-radar > span:nth-child(1) { inset: 44%; border-color: var(--lp-accent); box-shadow: 0 0 26px var(--lp-accent-soft); }
.lp-hero-radar > span:nth-child(2) { width: 7px; height: 7px; top: 21%; right: 18%; border: 0; background: var(--lp-accent); box-shadow: 0 0 14px var(--lp-accent); }
.lp-hero-radar > span:nth-child(3) { width: 5px; height: 5px; left: 12%; bottom: 27%; border: 0; background: var(--lp-coral); box-shadow: 0 0 12px var(--lp-coral); }

.lp-float-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    color: var(--lp-ink);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
    backdrop-filter: blur(16px);
    box-shadow: var(--lp-shadow-soft);
    animation: lp-float-card 4.4s ease-in-out infinite;
}

.lp-float-card-status {
    top: 14%;
    left: -1%;
}

.lp-float-card-order {
    right: -2%;
    bottom: 16%;
    animation-delay: -2.2s;
}

.lp-float-card > span:last-child {
    display: grid;
    gap: 2px;
}

.lp-float-card strong {
    color: var(--lp-ink);
    font-size: 0.72rem;
}

.lp-float-card small {
    color: var(--lp-muted);
    font-size: 0.62rem;
}

.lp-float-icon,
.lp-float-check {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
}

.lp-float-check {
    border-radius: 50%;
    color: #fff;
    background: var(--lp-accent);
}

@keyframes lp-float-card {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

.lp-phone {
    position: relative;
    justify-self: center;
    width: min(100%, 318px);
    border: 2px solid #34383a;
    border-radius: 46px;
    padding: 9px;
    background: linear-gradient(145deg, #25292b, #070808 48%, #262a2c);
    box-shadow: 0 42px 80px rgba(7, 18, 13, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    transform: rotate(2.5deg);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-hero-visual:hover .lp-phone {
    transform: rotate(0deg) translateY(-5px);
}

.lp-phone::before {
    content: "";
    position: absolute;
    inset: -24px;
    border-radius: 58px;
    background: linear-gradient(180deg, rgba(25, 182, 124, 0.2), rgba(14, 138, 95, 0.02));
    filter: blur(26px);
    opacity: 0.72;
    z-index: -1;
    pointer-events: none;
}

.lp-phone-screen {
    background: #edf2ef;
    border-radius: 37px;
    overflow: hidden;
    min-height: 538px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.lp-phone-notch {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 50%;
    width: 148px;
    height: 25px;
    transform: translateX(-50%);
    border-radius: 0 0 17px 17px;
    background: #080909;
}

.lp-phone-notch::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 30px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #15272a;
    box-shadow: inset 0 0 2px #48717a;
}

.lp-phone-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 34px 15px 13px;
    background: linear-gradient(135deg, #08724e, var(--lp-accent));
    color: #fff;
}

.lp-phone-back {
    margin-right: -4px;
    font-size: 1.45rem;
    line-height: 1;
    opacity: 0.9;
}

.lp-phone-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.lp-phone-bar strong {
    display: block;
    font-size: 0.82rem;
}

.lp-phone-bar small {
    display: block;
    font-size: 0.68rem;
    opacity: 0.82;
}

.lp-phone-bar small i {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 3px;
    border-radius: 50%;
    background: #8bf0bd;
    box-shadow: 0 0 8px rgba(139, 240, 189, 0.7);
}

.lp-phone-body {
    flex: 1;
    padding: 13px 13px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background:
        radial-gradient(circle at 20% 20%, rgba(14, 138, 95, 0.05), transparent 28%),
        #edf2ef;
}

.lp-chat-time {
    align-self: center;
    margin-bottom: 2px;
    color: #7f8b85;
    font-size: 0.57rem;
    font-weight: 600;
}

.lp-bubble {
    max-width: 84%;
    padding: 9px 11px;
    border-radius: 14px;
    font-size: 0.7rem;
    line-height: 1.45;
    background: #ffffff;
    box-shadow: 0 7px 18px rgba(14, 21, 18, 0.07);
    animation: lp-chat-message-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp-bubble:nth-of-type(2) { animation-delay: 280ms; }
.lp-bubble:nth-of-type(3) { animation-delay: 560ms; }
.lp-bubble:nth-of-type(4) { animation-delay: 840ms; }
.lp-bubble:nth-of-type(5) { animation-delay: 1120ms; }
.lp-bubble:nth-of-type(6) { animation-delay: 1400ms; }

@keyframes lp-chat-message-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lp-bubble-in {
    border-bottom-left-radius: 4px;
}

.lp-bubble-out {
    align-self: flex-end;
    color: #0d3b2c;
    background: #d8f3e6;
    border-bottom-right-radius: 4px;
}

.lp-bubble-order {
    align-self: flex-end;
    background: linear-gradient(135deg, #0e1512, #123728);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom-right-radius: 4px;
}

.lp-bubble-order .lp-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--lp-coral);
    flex-shrink: 0;
}

.lp-typing {
    display: inline-flex;
    gap: 4px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    box-shadow: var(--lp-shadow-soft);
    width: fit-content;
    animation: lp-chat-message-in 520ms 1680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp-phone-composer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 12px 8px;
    padding: 7px 7px 7px 12px;
    border: 1px solid rgba(14, 21, 18, 0.1);
    border-radius: 999px;
    color: #839089;
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.64rem;
}

.lp-phone-composer b {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--lp-accent);
}

.lp-phone-home {
    width: 104px;
    height: 4px;
    align-self: center;
    margin-bottom: 7px;
    border-radius: 999px;
    background: rgba(14, 21, 18, 0.72);
}

.lp-typing span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--lp-muted);
    opacity: 0.5;
    animation: lp-typing-bounce 1.2s infinite ease-in-out;
}

.lp-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.lp-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes lp-typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ---------- Section shells ---------- */

.lp-section {
    padding: var(--lp-space-6) 0;
}

.lp-section-soft {
    background:
        radial-gradient(circle at 18% 18%, rgba(14, 138, 95, 0.10), transparent 48%),
        radial-gradient(circle at 80% 0%, rgba(255, 107, 74, 0.08), transparent 42%),
        var(--lp-bg-soft);
}

.lp-section-head {
    max-width: 640px;
    margin: 0 0 var(--lp-space-5);
}

.lp-section-head h2 {
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    line-height: 1.15;
}

.lp-section-head p {
    margin: var(--lp-space-2) 0 0;
    color: var(--lp-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.lp-section-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--lp-space-3);
    flex-wrap: wrap;
}

/* ---------- Feature grid ---------- */

.lp-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-space-3);
}

.lp-feature-card {
    padding: var(--lp-space-3);
    border-radius: var(--lp-radius-md);
    border: 1px solid rgba(14, 21, 18, 0.08);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px);
    transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.lp-feature-card:hover {
    box-shadow: var(--lp-shadow-soft);
    border-color: transparent;
    transform: translateY(-2px);
}

.lp-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--lp-radius-sm);
    background: linear-gradient(135deg, rgba(14, 138, 95, 0.18), rgba(255, 107, 74, 0.12));
    color: rgba(14, 21, 18, 0.92);
    display: grid;
    place-items: center;
    margin-bottom: var(--lp-space-2);
}

.lp-feature-card h3 {
    font-size: 0.92rem;
    margin-bottom: 8px;
}

.lp-feature-card p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--lp-muted);
}

.lp-feature-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-3);
    margin-top: var(--lp-space-4);
    padding: 16px 18px 16px 22px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-md);
    background: var(--lp-bg-soft);
}

.lp-feature-more > span {
    color: var(--lp-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ---------- How it works ---------- */

.lp-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--lp-space-3);
    counter-reset: lp-step;
}

.lp-step {
    position: relative;
    padding: var(--lp-space-3) var(--lp-space-3) var(--lp-space-4);
    border-radius: var(--lp-radius-md);
    background: var(--lp-bg);
    border: 1px solid var(--lp-line);
}

.lp-step-number {
    counter-increment: lp-step;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--lp-ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 0.84rem;
    margin-bottom: var(--lp-space-2);
}

.lp-step-number::before {
    content: counter(lp-step, decimal-leading-zero);
}

.lp-step h3 {
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.lp-step p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--lp-muted);
    line-height: 1.55;
}

.lp-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 36px;
    left: calc(100% + 12px);
    width: calc(var(--lp-space-3) - 12px);
    height: 1px;
    background: var(--lp-line);
    display: none;
}

@media (min-width: 901px) {
    .lp-step:not(:last-child)::after {
        display: block;
    }
}

/* ---------- Pricing ---------- */

.lp-billing-switch {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto 32px;
    padding: 4px;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--lp-bg-soft) 90%, transparent);
}

.lp-billing-switch button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    color: var(--lp-muted);
    background: transparent;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.lp-billing-switch button.is-active {
    color: #fff;
    background: var(--lp-ink);
    box-shadow: 0 8px 18px rgba(14, 21, 18, 0.14);
}

.lp-billing-switch button span {
    padding: 3px 6px;
    border-radius: 999px;
    color: #31510f;
    background: #c5ed72;
    font-size: 0.56rem;
    white-space: nowrap;
}

.lp-page[data-theme="dark"] .lp-billing-switch {
    background: rgba(255, 255, 255, 0.04);
}

.lp-page[data-theme="dark"] .lp-billing-switch button.is-active {
    color: #12200e;
    background: #c5ed72;
}

.lp-page[data-theme="dark"] .lp-billing-switch button.is-active span {
    color: #dff4b6;
    background: rgba(18, 32, 14, 0.42);
}

.lp-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-space-3);
    align-items: stretch;
}

.lp-pricing-auth-hint {
    margin: 14px auto 0;
    max-width: 760px;
    padding: 12px 16px;
    border: 1px solid rgba(14, 138, 95, 0.12);
    border-radius: 16px;
    background: rgba(14, 138, 95, 0.06);
    color: var(--lp-muted);
    font-size: 0.78rem;
    line-height: 1.6;
    text-align: center;
}

.lp-price-card {
    display: flex;
    flex-direction: column;
    padding: var(--lp-space-4);
    border-radius: var(--lp-radius-lg);
    border: 1px solid var(--lp-line);
    background: var(--lp-bg);
}

.lp-price-card-featured {
    background: var(--lp-ink);
    color: #fff;
    border-color: var(--lp-ink);
    box-shadow: var(--lp-shadow);
}

.lp-price-card-featured .lp-price-tier,
.lp-price-card-featured .lp-price-amount small,
.lp-price-card-featured .lp-price-audience,
.lp-price-card-featured .lp-price-desc,
.lp-price-card-featured ul li {
    color: rgba(255, 255, 255, 0.72);
}

.lp-price-tag {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--lp-coral);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--lp-space-2);
}

.lp-price-tier {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--lp-muted);
    margin-bottom: 6px;
}

.lp-price-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin: 0 0 2px;
    transition: opacity 120ms ease, transform 120ms ease;
}

.lp-price-amount del {
    color: var(--lp-muted);
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration-color: var(--lp-coral);
    text-decoration-thickness: 1.5px;
}

.lp-price-card-featured .lp-price-amount del {
    color: rgba(255, 255, 255, 0.48);
}

.lp-price-amount.is-updating {
    opacity: 0.45;
    transform: translateY(3px);
}

.lp-price-amount small {
    color: var(--lp-muted);
    font-family: "Inter", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0;
}

.lp-price-audience {
    margin: 0 0 12px;
    color: var(--lp-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.lp-price-desc {
    font-size: 0.82rem;
    color: var(--lp-muted);
    margin: 0 0 var(--lp-space-3);
    line-height: 1.5;
}

.lp-price-card ul {
    list-style: none;
    margin: 0 0 var(--lp-space-4);
    padding: 0;
    display: grid;
    gap: 10px;
    flex: 1;
}

.lp-price-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--lp-ink);
}

.lp-price-card-featured li {
    color: rgba(255, 255, 255, 0.9);
}

.lp-price-card li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--lp-accent);
}

.lp-price-card-featured li svg {
    color: #6bd8ac;
}

/* ---------- Testimonials ---------- */

.lp-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-space-3);
}

.lp-testimonial {
    padding: var(--lp-space-4);
    border-radius: var(--lp-radius-md);
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(14, 21, 18, 0.08);
    box-shadow: 0 14px 30px rgba(14, 21, 18, 0.06);
}

.lp-testimonial p {
    margin: 0 0 var(--lp-space-3);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--lp-ink);
}

.lp-testimonial-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 999px;
    background: var(--lp-accent-soft);
    color: var(--lp-accent-dark);
    display: grid;
    place-items: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 0.76rem;
    line-height: 1;
}

.lp-testimonial-person strong {
    display: block;
    font-size: 0.82rem;
}

.lp-testimonial-person > span:not(.lp-avatar),
.lp-testimonial-person > span:not(.lp-avatar) > span {
    display: block;
    font-size: 0.76rem;
    color: var(--lp-muted);
}

/* ---------- FAQ ---------- */

.lp-faq {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: var(--lp-space-2);
}

.lp-faq details {
    border: 1px solid rgba(14, 21, 18, 0.10);
    border-radius: var(--lp-radius-md);
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.84);
}

.lp-faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

.lp-faq summary::-webkit-details-marker {
    display: none;
}

.lp-faq summary::after {
    content: "+";
    font-size: 1.3rem;
    color: var(--lp-muted);
    transition: transform 160ms ease;
}

.lp-faq details[open] summary::after {
    transform: rotate(45deg);
}

.lp-faq p {
    margin: 12px 0 0;
    color: var(--lp-muted);
    font-size: 0.84rem;
    line-height: 1.6;
}

/* ---------- Final CTA ---------- */

.lp-cta-band {
    border-radius: var(--lp-radius-lg);
    background: linear-gradient(135deg, #0b1c16 0%, #134233 60%, #0e8a5f 100%);
    color: #fff;
    padding: var(--lp-space-6) var(--lp-space-5);
    text-align: center;
}

.lp-cta-band h2 {
    color: #fff;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    max-width: 26ch;
    margin: 0 auto;
}

.lp-cta-band p {
    color: rgba(255, 255, 255, 0.72);
    margin: var(--lp-space-2) auto var(--lp-space-4);
    max-width: 48ch;
}

.lp-cta-band .lp-hero-actions {
    justify-content: center;
}

/* ---------- Footer ---------- */

.lp-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--lp-space-6) 0 var(--lp-space-4);
    border-top: 1px solid var(--lp-line);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
}

.lp-footer > .lp-container {
    position: relative;
    z-index: 1;
}

.lp-footer-pattern {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -42px;
    width: clamp(150px, 17vw, 240px);
    height: calc(100% - 34px);
    color: #0e8a5f;
    opacity: 0.3;
    pointer-events: none;
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(to left, #000 28%, rgba(0, 0, 0, .76) 68%, transparent 100%);
    mask-image: linear-gradient(to left, #000 28%, rgba(0, 0, 0, .76) 68%, transparent 100%);
}

.lp-footer-pattern svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lp-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--lp-space-4);
    margin-bottom: var(--lp-space-5);
}

.lp-footer-brand p {
    margin: var(--lp-space-2) 0 var(--lp-space-3);
    color: var(--lp-muted);
    font-size: 0.84rem;
    font-weight: 100;
    line-height: 1.6;
    max-width: 34ch;
}

.lp-social-row {
    display: flex;
    gap: 10px;
}

.lp-social-row a {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--lp-line);
    display: grid;
    place-items: center;
    color: var(--lp-muted);
}

.lp-social-row a:hover {
    color: var(--lp-accent-dark);
    border-color: var(--lp-accent);
}

.lp-footer-col h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.8rem;
    margin-bottom: var(--lp-space-2);
}

.lp-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.lp-footer-col a,
.lp-footer-col address {
    font-size: 0.82rem;
    color: var(--lp-muted);
    font-style: normal;
}

.lp-footer-col a:hover {
    color: var(--lp-ink);
}

.lp-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-2);
    padding-top: var(--lp-space-3);
    border-top: 1px solid var(--lp-line);
    font-size: 0.78rem;
    color: var(--lp-muted);
    flex-wrap: wrap;
}

.lp-footer-meta,
.lp-footer-powered {
    display: flex;
    align-items: center;
}

.lp-footer-meta {
    justify-content: flex-end;
    gap: 18px;
}

.lp-footer-powered {
    gap: 8px;
    white-space: nowrap;
}

.lp-footer-powered img {
    width: 88px;
    height: 36px;
    object-fit: contain;
    padding: 3px 6px;
    border: 1px solid rgba(14, 21, 18, .08);
    border-radius: 8px;
    background: #fff;
}

.lp-page[data-theme="dark"] .lp-footer-pattern {
    color: #6bd8ac;
    opacity: 0.28;
}

/* ---------- Marketing inner pages ---------- */

.lp-inner-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 82px;
    border-bottom: 1px solid var(--lp-line);
}

.lp-inner-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--lp-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-line) 1px, transparent 1px);
    background-size: 52px 52px;
    opacity: 0.22;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 90%);
}

.lp-inner-hero .lp-container {
    position: relative;
    z-index: 1;
}

.lp-inner-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: var(--lp-space-6);
}

.lp-inner-hero h1 {
    max-width: 13ch;
    font-size: clamp(2.55rem, 5.6vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.lp-inner-hero p:not(.lp-eyebrow) {
    max-width: 60ch;
    margin: var(--lp-space-3) 0 0;
    color: var(--lp-muted);
    font-size: 0.98rem;
    line-height: 1.7;
}

.lp-inner-hero .lp-hero-actions {
    margin-top: var(--lp-space-4);
}

.lp-inner-hero-centered {
    text-align: center;
}

.lp-inner-hero-centered .lp-eyebrow {
    justify-content: center;
}

.lp-inner-hero-centered h1,
.lp-inner-hero-centered p:not(.lp-eyebrow) {
    margin-inline: auto;
}

.lp-faq-hero {
    text-align: left;
}

.lp-faq-hero-copy .lp-eyebrow {
    justify-content: flex-start;
}

.lp-faq-hero-copy h1,
.lp-faq-hero-copy p:not(.lp-eyebrow) {
    margin-inline: 0;
}

.lp-faq-illustration {
    display: flex;
    justify-content: center;
}

.lp-faq-illustration svg {
    width: min(100%, 420px);
    height: auto;
    filter: drop-shadow(0 20px 24px rgba(24, 89, 59, 0.12));
    animation: lp-inner-illustration-float 5.8s ease-in-out infinite;
}

.lp-inner-section-first {
    padding-top: var(--lp-space-6);
}

.lp-inner-orbit {
    position: relative;
    width: min(100%, 380px);
    aspect-ratio: 1;
    margin-inline: auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-accent-soft), transparent 64%);
}

.lp-inner-orbit::before,
.lp-inner-orbit::after {
    content: "";
    position: absolute;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
}

.lp-inner-orbit::before {
    inset: 15%;
}

.lp-inner-orbit::after {
    inset: 32%;
}

.lp-orbit-core {
    position: relative;
    z-index: 2;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(135deg, var(--lp-accent), #19b67c);
    box-shadow: 0 24px 44px rgba(14, 138, 95, 0.3);
}

.lp-orbit-chip {
    position: absolute;
    z-index: 3;
    padding: 9px 13px;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    color: var(--lp-ink);
    background: var(--lp-bg);
    box-shadow: var(--lp-shadow-soft);
    font-size: 0.72rem;
    font-weight: 700;
    animation: lp-orbit-float 4s ease-in-out infinite;
}

.lp-orbit-chip-one {
    top: 14%;
    right: 5%;
}

.lp-orbit-chip-two {
    bottom: 18%;
    right: -3%;
    animation-delay: -1.3s;
}

.lp-orbit-chip-three {
    bottom: 10%;
    left: 2%;
    animation-delay: -2.6s;
}

@keyframes lp-orbit-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.lp-btn-on-dark {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.lp-btn-on-dark:hover {
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
}

.lp-pricing-note {
    max-width: 74ch;
    margin: var(--lp-space-4) auto 0;
    color: var(--lp-muted);
    font-size: 0.78rem;
    line-height: 1.6;
    text-align: center;
}

.lp-plan-comparison {
    margin-top: clamp(58px, 8vw, 92px);
}

.lp-plan-comparison-head {
    max-width: 650px;
    margin: 0 auto 28px;
    text-align: center;
}

.lp-plan-comparison-head .lp-eyebrow {
    margin-bottom: 9px;
}

.lp-plan-comparison-head h2 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
}

.lp-plan-comparison-head > p:last-child {
    margin: 11px 0 0;
    color: var(--lp-muted);
    font-size: .78rem;
    line-height: 1.6;
}

.lp-plan-comparison-scroll {
    overflow-x: auto;
    border: 1px solid var(--lp-line);
    border-radius: 22px;
    background: var(--lp-bg);
    box-shadow: var(--lp-shadow-soft);
    scrollbar-color: var(--lp-line) transparent;
}

.lp-plan-comparison-scroll:focus-visible {
    outline: 2px solid var(--lp-accent);
    outline-offset: 3px;
}

.lp-plan-comparison-table {
    width: 100%;
    min-width: 760px;
    border-spacing: 0;
    color: var(--lp-ink);
    font-size: .72rem;
    text-align: center;
}

.lp-plan-comparison-table th,
.lp-plan-comparison-table td {
    min-width: 155px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--lp-line);
}

.lp-plan-comparison-table tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 210px;
    min-width: 210px;
    color: var(--lp-muted);
    background: var(--lp-bg);
    text-align: left;
}

.lp-plan-comparison-table thead th {
    padding-block: 20px;
    color: var(--lp-ink);
    background: var(--lp-bg-soft);
}

.lp-plan-comparison-table thead th:first-child {
    z-index: 3;
    background: var(--lp-bg-soft);
}

.lp-plan-comparison-table thead strong,
.lp-plan-comparison-table thead small,
.lp-plan-comparison-table td small {
    display: block;
}

.lp-plan-comparison-table thead strong {
    font-size: .84rem;
}

.lp-plan-comparison-table thead small {
    width: fit-content;
    margin: 5px auto 0;
    padding: 3px 7px;
    border-radius: 999px;
    color: #31510f;
    background: #f5dc62;
    font-size: .52rem;
    font-weight: 750;
}

.lp-plan-comparison-table td strong {
    font-size: .76rem;
}

.lp-plan-comparison-table td small {
    margin-top: 2px;
    color: var(--lp-muted);
    font-size: .54rem;
}

.lp-plan-comparison-table .is-featured {
    background: color-mix(in srgb, var(--lp-accent-soft) 48%, var(--lp-bg));
}

.lp-plan-comparison-table thead .is-featured {
    background: color-mix(in srgb, var(--lp-accent-soft) 60%, var(--lp-bg-soft));
}

.lp-plan-comparison-table tbody tr:hover td,
.lp-plan-comparison-table tbody tr:hover th {
    background-color: color-mix(in srgb, var(--lp-accent-soft) 35%, var(--lp-bg));
}

.lp-plan-check {
    width: 21px;
    height: 21px;
    display: inline-grid;
    place-items: center;
    margin-right: 3px;
    border-radius: 50%;
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
    vertical-align: middle;
}

.lp-plan-comparison-table tfoot th,
.lp-plan-comparison-table tfoot td {
    border-bottom: 0;
    padding-block: 17px;
}

.lp-plan-compare-link {
    display: inline-flex;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--lp-line);
    border-radius: 9px;
    color: var(--lp-ink);
    font-size: .62rem;
    font-weight: 750;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.lp-plan-compare-link:hover,
.lp-plan-compare-link:focus-visible {
    border-color: var(--lp-accent);
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
    outline: none;
}

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

.lp-page[data-theme="dark"] .lp-plan-comparison-scroll,
.lp-page[data-theme="dark"] .lp-plan-comparison-table tr > :first-child {
    background: #111d18;
}

.lp-page[data-theme="dark"] .lp-plan-comparison-table thead th,
.lp-page[data-theme="dark"] .lp-plan-comparison-table thead th:first-child {
    background: #15241d;
}

.lp-page[data-theme="dark"] .lp-plan-comparison-table .is-featured {
    background: rgba(190, 232, 79, .055);
}

@media (max-width: 640px) {
    .lp-plan-comparison-scroll {
        margin-inline: -8px;
        border-radius: 16px;
    }

    .lp-plan-comparison-table tr > :first-child {
        width: 160px;
        min-width: 160px;
    }

    .lp-plan-comparison-table th,
    .lp-plan-comparison-table td {
        min-width: 140px;
        padding: 13px 14px;
    }
}

.lp-payment-options {
    margin-top: clamp(54px, 8vw, 90px);
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid var(--lp-line);
    border-radius: 30px;
    background:
        radial-gradient(circle at 92% 0, rgba(190, 232, 79, 0.14), transparent 35%),
        color-mix(in srgb, var(--lp-bg-soft) 88%, transparent);
    box-shadow: var(--lp-shadow-soft);
}

.lp-payment-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 28px;
}

.lp-payment-heading > div {
    max-width: 650px;
}

.lp-payment-heading .lp-eyebrow {
    margin-bottom: 10px;
}

.lp-payment-heading h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    line-height: 1.18;
}

.lp-payment-heading > div > p:last-child {
    max-width: 60ch;
    margin: 11px 0 0;
    color: var(--lp-muted);
    font-size: 0.82rem;
    line-height: 1.65;
}

.lp-payment-secure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 12px;
    border: 1px solid rgba(14, 138, 95, 0.16);
    border-radius: 999px;
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
    font-size: 0.68rem;
    font-weight: 700;
}

.lp-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.lp-payment-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 17px;
    padding: 24px;
    border: 1px solid var(--lp-line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--lp-bg) 92%, transparent);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.lp-payment-card:hover {
    transform: translateY(-3px);
    border-color: rgba(14, 138, 95, 0.24);
    box-shadow: 0 18px 36px rgba(14, 21, 18, 0.08);
}

.lp-payment-card-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
}

.lp-payment-card-icon-momo {
    color: #4d3c00;
    background: linear-gradient(135deg, #ffe35a, #ffcb32);
}

.lp-payment-label {
    color: var(--lp-accent-dark);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-payment-card h3 {
    margin: 5px 0 0;
    font-size: 1rem;
}

.lp-payment-card p {
    margin: 8px 0 0;
    color: var(--lp-muted);
    font-size: 0.74rem;
    line-height: 1.58;
}

.lp-payment-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 17px;
}

.lp-payment-brand {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    color: var(--lp-ink);
    background: var(--lp-bg);
    font-size: 0.6rem;
    font-weight: 800;
}

.lp-payment-brand-mtn { color: #312700; background: #ffdc32; border-color: #ffdc32; }
.lp-payment-brand-telecel { color: #fff; background: #d71920; border-color: #d71920; }
.lp-payment-brand-at { color: #fff; background: #157347; border-color: #157347; }
.lp-payment-brand-visa { color: #163a8c; font-size: 0.7rem; font-style: italic; }

.lp-payment-brand-mastercard i {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #eb001b;
}

.lp-payment-brand-mastercard i + i {
    margin-left: -8px;
    background: rgba(247, 158, 27, 0.86);
}

.lp-payment-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 18px 0 0;
    color: var(--lp-muted);
    font-size: 0.68rem;
    line-height: 1.5;
    text-align: center;
}

.lp-payment-footnote svg {
    flex: 0 0 auto;
}

.lp-page[data-theme="dark"] .lp-payment-options {
    background:
        radial-gradient(circle at 92% 0, rgba(190, 232, 79, 0.1), transparent 35%),
        rgba(255, 255, 255, 0.025);
}

.lp-page[data-theme="dark"] .lp-payment-card {
    background: rgba(255, 255, 255, 0.04);
}

.lp-page[data-theme="dark"] .lp-payment-brand:not(.lp-payment-brand-mtn):not(.lp-payment-brand-telecel):not(.lp-payment-brand-at) {
    background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 760px) {
    .lp-payment-heading {
        flex-direction: column;
        gap: 18px;
    }

    .lp-payment-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .lp-payment-options {
        margin-top: 48px;
        padding: 22px 18px;
        border-radius: 22px;
    }

    .lp-payment-secure {
        align-self: flex-start;
    }

    .lp-payment-card {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 13px;
        padding: 19px 16px;
        border-radius: 17px;
    }

    .lp-payment-card-icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .lp-payment-card-icon svg {
        width: 23px;
        height: 23px;
    }

    .lp-payment-brands {
        grid-column: 1 / -1;
    }

    .lp-payment-footnote {
        align-items: flex-start;
        text-align: left;
    }
}

.lp-payment-simple {
    margin-top: clamp(42px, 6vw, 66px);
    text-align: center;
}

.lp-payment-simple h2 {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1.35;
}

.lp-payment-simple-methods {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.lp-payment-channel {
    min-width: 96px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    color: var(--lp-ink);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
    font-size: 0.68rem;
    box-shadow: none;
}

.lp-payment-channel b,
.lp-payment-channel small {
    line-height: 1;
}

.lp-payment-channel small {
    font-size: 0.55rem;
    font-weight: 700;
}

.lp-payment-channel-mtn {
    color: var(--lp-muted);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
    border-color: var(--lp-line);
}

.lp-payment-channel-mtn b {
    padding: 3px 4px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.58rem;
}

.lp-payment-channel-telecel {
    color: var(--lp-muted);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
    border-color: var(--lp-line);
    font-family: "Century Gothic", CenturyGothic, AppleGothic, "Instrument Sans", sans-serif;
}

.lp-payment-channel-telecel b {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    border: 1.5px solid #4f5753;
    border-radius: 50%;
    color: #fff;
    background: #4f5753;
    font-family: inherit;
    font-size: 0.88rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

.lp-payment-channel-telecel small {
    font-family: inherit;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.lp-payment-channel-at {
    color: var(--lp-muted);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
    border-color: var(--lp-line);
    font-family: Axiforma, "Avenir Next", "Century Gothic", "Instrument Sans", sans-serif;
}

.lp-payment-channel-at b {
    font-family: "Arial Rounded MT Bold", "Avenir Next Rounded", Axiforma, "Century Gothic", sans-serif;
    font-size: 1.12rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: -0.11em;
    transform: scaleX(1.04);
}

.lp-payment-channel-at small {
    font-family: inherit;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.lp-payment-channel-visa {
    color: var(--lp-muted);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
}

.lp-payment-channel-visa b {
    display: inline-flex;
    align-items: baseline;
    font-family: "Arial Black", "Helvetica Neue", "Instrument Sans", sans-serif;
    font-size: 0.84rem;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.075em;
    transform: skewX(-3deg);
}

.lp-payment-channel-mastercard {
    color: var(--lp-muted);
    background: color-mix(in srgb, var(--lp-bg) 90%, transparent);
}

.lp-mastercard-mark {
    display: flex;
}

.lp-mastercard-mark i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #727b76;
}

.lp-mastercard-mark i + i {
    margin-left: -6px;
    background: rgba(114, 123, 118, 0.55);
}

.lp-page[data-theme="dark"] .lp-payment-channel {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(237, 246, 243, 0.68);
}

@media (max-width: 480px) {
    .lp-payment-simple-methods {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-payment-channel {
        min-width: 0;
        width: 100%;
    }

    .lp-payment-channel:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 340px) {
    .lp-billing-switch {
        width: 100%;
    }

    .lp-billing-switch button {
        flex: 1;
        justify-content: center;
        padding-inline: 10px;
    }

    .lp-payment-simple-methods {
        grid-template-columns: 1fr;
    }

    .lp-payment-channel:last-child {
        grid-column: auto;
    }
}

.lp-process-list {
    display: grid;
    gap: var(--lp-space-3);
    counter-reset: process;
}

.lp-process-list article {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 64px;
    align-items: center;
    gap: var(--lp-space-4);
    padding: var(--lp-space-4);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-bg);
    box-shadow: var(--lp-shadow-soft);
}

.lp-process-list article > span {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--lp-accent);
    font-size: 1.5rem;
    font-weight: 800;
}

.lp-process-list .lp-eyebrow {
    margin-bottom: 8px;
}

.lp-process-list h2 {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.lp-process-list article > div > p:last-child {
    max-width: 70ch;
    margin: 9px 0 0;
    color: var(--lp-muted);
    font-size: 0.84rem;
    line-height: 1.6;
}

.lp-process-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
}

.lp-faq-page-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.35fr);
    align-items: start;
    gap: var(--lp-space-6);
}

.lp-faq-aside {
    position: sticky;
    top: 112px;
    padding: var(--lp-space-4);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-bg-soft);
}

.lp-faq-aside h2 {
    font-size: 1.5rem;
    line-height: 1.2;
}

.lp-faq-aside > p:not(.lp-eyebrow) {
    margin: 12px 0 var(--lp-space-3);
    color: var(--lp-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

.lp-faq-page-grid .lp-faq-list {
    display: grid;
    gap: 12px;
}

.lp-faq-page-grid details {
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-md);
    background: var(--lp-bg);
}

.lp-faq-page-grid summary {
    padding: 20px 22px;
    color: var(--lp-ink);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.lp-faq-page-grid details p {
    margin: 0;
    padding: 0 22px 20px;
    color: var(--lp-muted);
    font-size: 0.82rem;
    line-height: 1.65;
}

.lp-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-space-3);
}

.lp-contact-card {
    display: block;
    padding: var(--lp-space-4);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-bg);
    box-shadow: var(--lp-shadow-soft);
    transition: transform 160ms ease, border-color 160ms ease;
}

a.lp-contact-card:hover {
    transform: translateY(-3px);
    border-color: var(--lp-accent);
}

.lp-contact-card > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--lp-accent-dark);
    background: var(--lp-accent-soft);
}

.lp-contact-card > p {
    margin: 24px 0 7px;
    color: var(--lp-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lp-contact-card h2 {
    overflow-wrap: anywhere;
    font-size: 1rem;
    line-height: 1.35;
}

.lp-contact-card small {
    display: block;
    margin-top: 7px;
    color: var(--lp-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

.lp-contact-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-5);
    margin-top: var(--lp-space-5);
    padding: var(--lp-space-5);
    border-radius: var(--lp-radius-lg);
    color: #fff;
    background: linear-gradient(135deg, #0e1512, #123728);
}

.lp-contact-banner .lp-eyebrow {
    color: #66dcaa;
}

.lp-contact-banner h2 {
    max-width: 22ch;
    color: #fff;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
}

.lp-contact-banner div > p:last-child {
    max-width: 62ch;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
    line-height: 1.6;
}

.lp-contact-hero {
    text-align: left;
}

.lp-contact-hero-copy .lp-eyebrow {
    justify-content: flex-start;
}

.lp-contact-hero-copy h1,
.lp-contact-hero-copy p:not(.lp-eyebrow) {
    margin-inline: 0;
}

.lp-contact-illustration {
    display: flex;
    justify-content: center;
}

.lp-contact-illustration svg {
    width: min(100%, 420px);
    height: auto;
    filter: drop-shadow(0 22px 28px rgba(15, 23, 32, 0.12));
    animation: lp-inner-illustration-float 5.8s ease-in-out -2.4s infinite;
}

@keyframes lp-inner-illustration-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(-0.8deg); }
}

.lp-legal-hero {
    padding-bottom: 64px;
}

.lp-legal-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4.4rem);
}

.lp-legal-hero small {
    display: block;
    margin-top: var(--lp-space-3);
    color: var(--lp-muted);
    font-size: 0.72rem;
}

.lp-legal-content {
    width: min(900px, calc(100% - 48px));
}

.lp-legal-content h2 {
    margin-top: var(--lp-space-5);
    font-size: 1.25rem;
}

.lp-legal-content h2:first-child {
    margin-top: 0;
}

.lp-legal-content p {
    margin: 12px 0 0;
    color: var(--lp-muted);
    font-size: 0.86rem;
    line-height: 1.8;
}

.lp-legal-content section {
    margin-top: 24px;
    scroll-margin-top: 104px;
}

.lp-legal-content h3 {
    margin: 24px 0 0;
    color: var(--lp-ink);
    font-size: .95rem;
    line-height: 1.4;
}

.lp-legal-content ul {
    display: grid;
    gap: 10px;
    margin: 15px 0 0;
    padding-left: 21px;
    color: var(--lp-muted);
    font-size: .84rem;
    line-height: 1.75;
}

.lp-legal-content li::marker {
    color: var(--lp-accent);
}

.lp-legal-content li strong {
    color: var(--lp-ink);
}

.lp-legal-content a {
    color: var(--lp-accent-dark);
    font-weight: 600;
}

.lp-legal-summary {
    padding: 28px 30px;
    border: 1px solid color-mix(in srgb, var(--lp-accent) 30%, var(--lp-line));
    border-radius: var(--lp-radius-lg);
    background: linear-gradient(135deg, var(--lp-accent-soft), var(--lp-bg));
    box-shadow: var(--lp-shadow-soft);
}

.lp-legal-summary .lp-eyebrow {
    margin: 0 0 9px;
}

.lp-legal-summary h2,
.lp-legal-summary p {
    margin-top: 0;
}

.lp-legal-summary h2 {
    font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.lp-legal-summary p:last-child {
    margin-top: 10px;
}

.lp-legal-toc {
    margin-top: 24px;
    padding: 22px 24px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-md);
    background: var(--lp-bg-soft);
}

.lp-legal-toc > strong {
    color: var(--lp-ink);
    font-size: .76rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.lp-legal-toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 28px;
    margin: 14px 0 0;
    padding-left: 20px;
    color: var(--lp-accent-dark);
    font-size: .78rem;
    line-height: 1.55;
}

.lp-legal-toc a {
    text-decoration: none;
}

.lp-legal-toc a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lp-legal-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.lp-legal-data-grid > div {
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 18px;
    border: 1px solid var(--lp-line);
    border-radius: 15px;
    background: var(--lp-bg-soft);
}

.lp-legal-data-grid strong {
    color: var(--lp-ink);
    font-size: .8rem;
}

.lp-legal-data-grid span {
    color: var(--lp-muted);
    font-size: .76rem;
    line-height: 1.65;
}

.lp-legal-contact {
    margin-top: var(--lp-space-5);
    padding: 27px 30px 30px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-bg-soft);
}

.lp-legal-contact h2 {
    margin-top: 7px;
}

.lp-inner-cta-section {
    padding-top: 0;
}

/* ---------- Motion & accessibility ---------- */

.lp-page a:focus-visible,
.lp-page button:focus-visible,
.lp-page summary:focus-visible {
    outline: 2px solid var(--lp-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .lp-page * {
        animation: none !important;
        transition: none !important;
    }
}

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

@media (max-width: 1080px) {
    .lp-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .lp-inner-hero-grid,
    .lp-faq-page-grid {
        grid-template-columns: 1fr;
    }

    .lp-inner-orbit {
        width: min(100%, 320px);
    }

    .lp-faq-aside {
        position: static;
    }

    .lp-contact-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lp-contact-card:last-child {
        grid-column: 1 / -1;
    }

    .lp-hero-grid {
        grid-template-columns: 1fr;
    }

    .lp-hero-visual {
        min-height: 560px;
        margin-top: var(--lp-space-3);
    }

    .lp-phone {
        width: min(100%, 280px);
    }

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

    .lp-nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--lp-space-2);
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid var(--lp-line);
        padding: var(--lp-space-3) 24px;
        display: none;
    }

    .lp-nav-actions {
        display: none;
    }

    .lp-nav-burger {
        display: flex;
    }

    .lp-nav-toggle:checked ~ .lp-nav-row .lp-nav-links,
    .lp-nav-toggle:checked ~ .lp-nav-row .lp-nav-actions-mobile {
        display: flex;
    }

    .lp-nav-actions-mobile {
        display: none;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 0 24px var(--lp-space-3);
    }

    .lp-nav-toggle:checked ~ .lp-nav-row .lp-nav-links {
        position: absolute;
        margin-top: 1px;
    }

    .lp-steps,
    .lp-pricing-grid,
    .lp-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .lp-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .lp-inner-hero {
        padding: 64px 0 52px;
    }

    .lp-inner-hero h1 {
        font-size: 2.55rem;
    }

    .lp-inner-hero-grid {
        gap: var(--lp-space-5);
    }

    .lp-process-list article {
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: start;
        gap: 18px;
        padding: 24px 20px;
    }

    .lp-process-icon {
        display: none;
    }

    .lp-contact-grid {
        grid-template-columns: 1fr;
    }

    .lp-contact-card:last-child {
        grid-column: auto;
    }

    .lp-contact-banner {
        align-items: flex-start;
        flex-direction: column;
        padding: var(--lp-space-4) var(--lp-space-3);
    }

    .lp-contact-illustration svg {
        width: min(100%, 340px);
    }

    .lp-faq-illustration svg {
        width: min(100%, 340px);
    }

    .lp-legal-content {
        width: min(100% - 32px, 760px);
    }

    .lp-container {
        width: min(100% - 32px, 1180px);
    }

    .lp-feature-grid {
        grid-template-columns: 1fr;
    }

    .lp-feature-more {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .lp-hero {
        min-height: auto;
        padding: 58px 0 48px;
        background-size: 42px 42px, 42px 42px, auto, auto;
    }

    .lp-hero h1 {
        font-size: clamp(2.35rem, 11vw, 3.15rem);
    }

    .lp-hero-copy {
        min-height: 330px;
    }

    .lp-hero-status {
        font-size: 0.62rem;
    }

    .lp-stat {
        padding: 0 10px;
    }

    .lp-stat strong {
        font-size: 1rem;
    }

    .lp-stat span {
        font-size: 0.62rem;
    }

    .lp-hero-visual {
        min-height: 520px;
        margin-top: 10px;
    }

    .lp-hero-radar {
        width: 390px;
        max-width: 112vw;
    }

    .lp-float-card-status {
        top: 10%;
        left: -2%;
    }

    .lp-float-card-order {
        right: -2%;
        bottom: 12%;
    }

    .lp-phone {
        width: min(100%, 270px);
        border-radius: 41px;
    }

    .lp-phone-screen {
        min-height: 500px;
        border-radius: 33px;
    }

    .lp-cta-band {
        padding: var(--lp-space-4) var(--lp-space-3);
    }

    .lp-footer-grid {
        grid-template-columns: 1fr;
    }

    .lp-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Mobile refinement ---------- */

@media (max-width: 600px) {
    .lp-page {
        overflow-x: clip;
    }

    .lp-nav-row {
        min-height: 64px;
        padding: 10px 0;
    }

    .lp-brand {
        gap: 8px;
        font-size: 0.82rem;
    }

    .lp-brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .lp-nav-burger {
        width: 42px;
        height: 42px;
    }

    .lp-nav-links {
        max-height: calc(100vh - 64px);
        gap: 0;
        overflow-y: auto;
        padding: 12px 16px 18px;
        background: color-mix(in srgb, var(--lp-bg) 96%, transparent);
        backdrop-filter: blur(20px);
        box-shadow: 0 20px 38px rgba(14, 21, 18, 0.12);
    }

    .lp-page[data-theme="light"] .lp-nav-links {
        background: rgba(251, 253, 252, 0.97);
    }

    .lp-page[data-theme="dark"] .lp-nav-links {
        background: rgba(9, 18, 24, 0.97);
        box-shadow: 0 20px 38px rgba(0, 0, 0, 0.3);
    }

    .lp-nav-links > a {
        width: 100%;
        padding: 13px 2px;
        border-bottom: 1px solid var(--lp-line);
        font-size: 0.84rem;
    }

    .lp-nav-links > a::after {
        display: none;
    }

    .lp-nav-links > a.is-active {
        margin-inline: -8px;
        padding-inline: 10px;
        border-bottom-color: transparent;
        border-radius: 10px;
        color: var(--lp-accent-dark);
        background: color-mix(in srgb, var(--lp-accent) 11%, transparent);
    }

    .lp-nav-actions-mobile {
        gap: 9px;
        padding: 15px 0 0;
    }

    .lp-nav-actions-mobile .lp-theme-toggle {
        margin-bottom: 4px;
    }

    .lp-nav-toggle:focus-visible ~ .lp-nav-row .lp-nav-burger {
        outline: 2px solid var(--lp-accent);
        outline-offset: 2px;
    }

    .lp-nav-toggle:checked ~ .lp-nav-row .lp-nav-burger span {
        background: transparent;
    }

    .lp-nav-toggle:checked ~ .lp-nav-row .lp-nav-burger span::before {
        top: 0;
        transform: rotate(45deg);
    }

    .lp-nav-toggle:checked ~ .lp-nav-row .lp-nav-burger span::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .lp-hero {
        padding: 46px 0 38px;
    }

    .lp-hero-grid {
        gap: 34px;
    }

    .lp-hero-status {
        max-width: 100%;
        margin-bottom: 18px;
        padding: 7px 10px;
        letter-spacing: 0.025em;
        white-space: nowrap;
    }

    .lp-hero-copy {
        min-height: 318px;
    }

    .lp-hero-copy-meta {
        margin-bottom: 12px;
        font-size: 0.61rem;
    }

    .lp-hero-copy-meta span:last-child::before {
        width: 18px;
        margin-right: 7px;
    }

    .lp-hero h1 {
        max-width: 12ch;
        font-size: clamp(2.25rem, 10.7vw, 2.8rem);
        line-height: 1.01;
    }

    .lp-hero-sub {
        margin: 18px 0;
        font-size: 0.82rem;
        line-height: 1.65;
    }

    .lp-hero-progress {
        width: 100%;
    }

    .lp-hero-actions {
        width: 100%;
        gap: 10px;
    }

    .lp-hero-actions .lp-btn {
        width: 100%;
        min-height: 50px;
        padding: 13px 18px;
    }

    .lp-stat-grid {
        margin-top: 28px;
        padding-top: 18px;
    }

    .lp-stat {
        padding: 0 8px;
    }

    .lp-stat:first-child {
        padding-left: 0;
    }

    .lp-stat strong {
        font-size: 0.96rem;
    }

    .lp-stat span {
        font-size: 0.58rem;
        line-height: 1.35;
    }

    .lp-stat:not(:last-child)::after {
        height: 32px;
    }

    .lp-hero-visual {
        min-height: 484px;
        margin-top: 0;
    }

    .lp-hero-radar {
        width: 340px;
        max-width: 106vw;
    }

    .lp-phone {
        width: min(100%, 250px);
        border-radius: 39px;
        transform: none;
    }

    .lp-hero-visual:hover .lp-phone {
        transform: translateY(-3px);
    }

    .lp-phone-screen {
        min-height: 462px;
        border-radius: 31px;
    }

    .lp-phone-notch {
        width: 126px;
        height: 22px;
    }

    .lp-phone-bar {
        padding: 30px 13px 11px;
    }

    .lp-phone-avatar {
        width: 30px;
        height: 30px;
    }

    .lp-phone-body {
        gap: 6px;
        padding: 10px 11px 8px;
    }

    .lp-bubble {
        padding: 7px 9px;
        font-size: 0.62rem;
    }

    .lp-typing {
        padding: 8px 10px;
    }

    .lp-phone-composer {
        margin-inline: 10px;
        padding-block: 5px;
    }

    .lp-float-card {
        padding: 9px 10px;
        border-radius: 12px;
    }

    .lp-float-card-status {
        top: 5%;
        left: 0;
    }

    .lp-float-card-order {
        right: 0;
        bottom: 7%;
    }

    .lp-float-icon,
    .lp-float-check {
        width: 28px;
        height: 28px;
    }

    .lp-logo-strip {
        padding: 24px 0;
    }

    .lp-logo-strip-title {
        text-align: left;
    }

    .lp-logo-row {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .lp-logo-row::-webkit-scrollbar,
    .lp-testimonial-grid::-webkit-scrollbar {
        display: none;
    }

    .lp-logo-row span {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .lp-section {
        padding: 48px 0;
    }

    .lp-section-head {
        margin-bottom: 30px;
    }

    .lp-section-head h2 {
        font-size: 1.5rem;
        line-height: 1.18;
    }

    .lp-section-head p {
        font-size: 0.82rem;
    }

    .lp-feature-grid {
        gap: 14px;
    }

    .lp-feature-card {
        padding: 20px;
    }

    .lp-feature-more {
        gap: 16px;
        margin-top: 18px;
    }

    .lp-feature-more .lp-btn {
        width: 100%;
    }

    .lp-steps {
        gap: 12px;
    }

    .lp-step {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 14px;
        padding: 18px;
    }

    .lp-step-number {
        grid-row: 1 / 3;
        width: 40px;
        height: 40px;
        margin: 0;
    }

    .lp-step h3,
    .lp-step p {
        grid-column: 2;
    }

    .lp-step h3 {
        margin: 1px 0 5px;
    }

    .lp-pricing-grid {
        gap: 16px;
    }

    .lp-price-card {
        padding: 24px 22px;
        border-radius: 22px;
    }

    .lp-testimonial-grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(86%, 1fr);
        gap: 14px;
        overflow-x: auto;
        margin-right: -16px;
        padding-right: 16px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .lp-testimonial {
        min-height: 230px;
        padding: 22px;
        scroll-snap-align: start;
    }

    .lp-faq {
        gap: 10px;
    }

    .lp-faq details {
        padding: 16px 17px;
    }

    .lp-faq summary {
        gap: 14px;
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .lp-faq p {
        font-size: 0.78rem;
    }

    .lp-cta-band {
        padding: 30px 22px;
        border-radius: 22px;
        text-align: left;
    }

    .lp-cta-band h2,
    .lp-cta-band p {
        margin-left: 0;
        margin-right: 0;
    }

    .lp-cta-band .lp-hero-actions {
        justify-content: flex-start;
    }

    .lp-footer {
        padding: 46px 0 26px;
    }

    .lp-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
        margin-bottom: 34px;
    }

    .lp-footer-brand {
        grid-column: 1 / -1;
    }

    .lp-footer-col:last-child {
        grid-column: 1 / -1;
    }

    .lp-footer-bottom {
        gap: 8px;
        font-size: 0.68rem;
        line-height: 1.45;
    }

    .lp-footer-meta {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    .lp-inner-hero {
        padding: 54px 0 46px;
        text-align: left;
    }

    .lp-inner-hero-centered .lp-eyebrow {
        justify-content: flex-start;
    }

    .lp-inner-hero h1 {
        margin-left: 0;
        font-size: 2.25rem;
        line-height: 1.02;
    }

    .lp-inner-hero-centered p:not(.lp-eyebrow) {
        margin-left: 0;
    }

    .lp-inner-orbit {
        width: min(100%, 280px);
    }

    .lp-process-list article {
        border-radius: 20px;
    }

    .lp-faq-page-grid {
        gap: 24px;
    }

    .lp-faq-aside,
    .lp-contact-card {
        padding: 22px;
        border-radius: 20px;
    }

    .lp-faq-page-grid summary {
        padding: 17px;
    }

    .lp-faq-page-grid details p {
        padding: 0 17px 17px;
    }

    .lp-contact-banner .lp-btn {
        width: 100%;
    }

    .lp-legal-content h2 {
        margin-top: 34px;
    }

    .lp-legal-summary,
    .lp-legal-contact {
        padding: 22px 20px;
        border-radius: 20px;
    }

    .lp-legal-toc {
        padding: 19px;
    }

    .lp-legal-toc ol,
    .lp-legal-data-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .lp-container {
        width: min(100% - 26px, 1180px);
    }

    .lp-brand {
        font-size: 0.75rem;
    }

    .lp-hero-status {
        font-size: 0.56rem;
    }

    .lp-hero-copy {
        min-height: 330px;
    }

    .lp-hero-visual {
        min-height: 468px;
    }

    .lp-phone {
        width: 238px;
    }

    .lp-phone-screen {
        min-height: 448px;
    }

    .lp-float-card strong {
        font-size: 0.65rem;
    }

    .lp-float-card small {
        font-size: 0.56rem;
    }

    .lp-footer-grid {
        grid-template-columns: 1fr;
    }

    .lp-footer-brand,
    .lp-footer-col:last-child {
        grid-column: auto;
    }
}

/* ---------- Verification pages ---------- */

.auth-verify-page {
    --verify-accent: #0e8a5f;
    --verify-ink: #0e1512;
    --verify-muted: #66716b;
    --verify-line: rgba(14, 21, 18, 0.11);
    --auth-accent: #0e8a5f;
    --auth-accent-dark: #08724e;
    --auth-ink: #0e1512;
    --auth-muted: #66716b;
    --auth-line: rgba(14, 21, 18, 0.11);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--verify-ink);
    background:
        radial-gradient(circle at 12% 8%, rgba(14, 138, 95, 0.13), transparent 32%),
        radial-gradient(circle at 92% 90%, rgba(255, 107, 74, 0.07), transparent 28%),
        #fbfdfc;
}

.auth-verify-header,
.auth-verify-footer {
    width: min(1080px, calc(100% - 48px));
    margin-inline: auto;
}

.auth-verify-header {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--verify-line);
}

.auth-verify-page .auth-brand {
    color: var(--verify-ink);
}

.auth-verify-page .auth-home-link {
    color: var(--verify-muted);
}

.auth-verify-page .auth-home-link:hover {
    color: var(--verify-accent);
}

.auth-verify-page .auth-signup-step {
    color: var(--verify-accent);
    background: rgba(14, 138, 95, 0.09);
}

.auth-verify-main {
    width: min(100% - 32px, 1120px);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    padding: 48px 0;
}

.auth-verify-card {
    width: 100%;
    max-width: 440px;
    padding: 38px;
    border: 1px solid var(--verify-line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 28px 60px rgba(14, 21, 18, 0.1);
    text-align: center;
}

.auth-verify-card-vendor {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.auth-verify-card-vendor::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #0e8a5f 0%, #35c18c 58%, #ffc65a 100%);
}

.auth-verify-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-verify-progress-label {
    color: var(--verify-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html[data-theme="dark"] .auth-verify-page {
    --verify-accent: #9fda38;
    --verify-ink: #f3f8f5;
    --verify-muted: #9eaca5;
    --verify-line: rgba(226, 241, 233, 0.12);
    --auth-accent: #9fda38;
    --auth-accent-dark: #b8ec58;
    --auth-ink: #f3f8f5;
    --auth-muted: #9eaca5;
    --auth-line: rgba(226, 241, 233, 0.12);
    background:
        radial-gradient(circle at 12% 8%, rgba(159, 218, 56, 0.12), transparent 32%),
        radial-gradient(circle at 92% 90%, rgba(255, 204, 39, 0.06), transparent 28%),
        #09110d;
}

html[data-theme="dark"] .auth-verify-page .auth-brand {
    color: var(--verify-ink);
}

html[data-theme="dark"] .auth-verify-page .auth-signup-step {
    color: var(--verify-accent);
    background: rgba(159, 218, 56, 0.11);
}

html[data-theme="dark"] .auth-verify-card {
    border-color: var(--verify-line);
    background: rgba(16, 29, 23, 0.94);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .auth-verify-icon {
    color: #b8ec58;
    background: rgba(159, 218, 56, 0.11);
}

html[data-theme="dark"] .auth-otp-group input {
    border-color: var(--verify-line);
    color: var(--verify-ink);
    background: #0c1812;
}

html[data-theme="dark"] .auth-verify-copy strong {
    color: var(--verify-ink);
}

html[data-theme="dark"] .auth-verify-alternate a {
    color: #b8ec58;
}

.auth-verify-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    margin: 0 auto;
    color: #08724e;
    background: rgba(14, 138, 95, 0.1);
    flex-shrink: 0;
    margin-bottom: 24px;
}

.auth-verify-card .auth-login-eyebrow {
    justify-content: center;
}

.auth-verify-card h1 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1.65rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.auth-verify-copy {
    margin: 12px auto 0;
    color: var(--verify-muted);
    font-size: 0.82rem;
    line-height: 1.65;
    max-width: 33ch;
}

.auth-verify-copy strong {
    color: var(--verify-ink);
}

.auth-verify-card .auth-alert {
    margin-top: 20px;
}

.auth-verify-form {
    display: grid;
    gap: 22px;
    margin-top: 26px;
}

.auth-otp-group {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
    padding: 0;
    border: 0;
}

.auth-otp-group legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.auth-otp-group input {
    width: 100%;
    min-width: 0;
    aspect-ratio: 0.84;
    border: 1px solid var(--verify-line);
    border-radius: 12px;
    outline: none;
    color: var(--verify-ink);
    background: #fbfcfb;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 1.22rem;
    font-weight: 700;
    text-align: center;
    caret-color: var(--verify-accent);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.auth-otp-group input:focus {
    border-color: rgba(14, 138, 95, 0.66);
    box-shadow: 0 0 0 4px rgba(14, 138, 95, 0.1);
    transform: translateY(-1px);
}

.auth-dev-code {
    margin: 16px 0;
    padding: 12px 15px;
    border: 1px dashed rgba(14, 138, 95, 0.4);
    border-radius: 12px;
    color: var(--auth-accent-dark);
    background: rgba(14, 138, 95, 0.07);
    font-size: 0.82rem;
    text-align: center;
}

.auth-dev-code strong {
    margin-left: 5px;
    letter-spacing: 0.18em;
}

.auth-resend-form {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
    color: var(--auth-muted);
    font-size: 0.78rem;
}

.auth-resend-form button {
    padding: 0;
    border: 0;
    color: var(--auth-accent-dark);
    background: transparent;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.auth-subscription-main .auth-signup-card {
    max-width: 620px;
}

.auth-verify-alternate {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    color: var(--verify-muted);
    font-size: 0.74rem;
}

.auth-verify-alternate a {
    color: #08724e;
    font-weight: 700;
}

.auth-verify-support-row {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 14px;
    color: var(--verify-muted);
    background: rgba(14, 138, 95, 0.06);
    font-size: 0.77rem;
    line-height: 1.55;
    text-align: left;
}

.auth-verify-footer {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--verify-line);
    color: #748079;
    font-size: 0.72rem;
}

@media (max-width: 600px) {
    .auth-login-header,
    .auth-signup-header,
    .auth-login-main,
    .auth-signup-main,
    .auth-login-footer,
    .auth-verify-header,
    .auth-verify-footer {
        width: min(100% - 28px, 1160px);
    }

    .auth-login-header .auth-brand > span:last-child,
    .auth-signup-header .auth-brand > span:last-child {
        display: inline;
    }

    .auth-login-main,
    .auth-signup-main {
        gap: 26px;
        padding-block: 32px;
    }

    .auth-login-intro h1,
    .auth-signup-intro h1 {
        font-size: 2rem;
    }

    .auth-login-intro > p:not(.auth-login-eyebrow),
    .auth-signup-intro > p:not(.auth-login-eyebrow) {
        font-size: 0.82rem;
        line-height: 1.62;
    }

    .auth-login-note {
        width: 100%;
    }

    .auth-login-card,
    .auth-signup-card {
        padding: 24px 20px;
        border-radius: 18px;
        box-shadow: 0 18px 42px rgba(14, 21, 18, 0.09);
    }

    .auth-login-card-head h2,
    .auth-signup-card-head h2 {
        font-size: 1.35rem;
    }

    .auth-signup-benefits {
        gap: 10px;
        margin-top: 22px;
    }

    .auth-signup-benefits > div {
        font-size: 0.75rem;
    }

    .auth-signup-field input,
    .auth-signup-field select,
    .auth-login-card .auth-field input {
        min-height: 50px;
        font-size: 0.84rem;
    }

    .auth-plan-option {
        min-height: 72px;
    }

    .auth-login-footer {
        min-height: 58px;
        padding-block: 14px;
    }

    .auth-verify-header {
        min-height: 68px;
    }

    .auth-verify-header .auth-brand > span:last-child {
        display: none;
    }

    .auth-password-flow-page .auth-verify-header .auth-brand > span:last-child {
        display: inline;
    }

    .auth-verify-main {
        width: min(100% - 24px, 1120px);
        padding: 32px 0;
    }

    .auth-verify-card {
        padding: 28px 18px;
        border-radius: 19px;
    }

    .auth-verify-card-vendor {
        padding: 26px 18px 22px;
    }

    .auth-otp-group {
        gap: 6px;
    }

    .auth-otp-group input {
        border-radius: 10px;
        font-size: 1.05rem;
    }

    .auth-verify-alternate {
        align-items: center;
        flex-direction: column;
    }

    .auth-verify-header-meta {
        gap: 8px;
    }

    .auth-verify-progress-label {
        display: none;
    }
}

/* ---------- Vendor dashboard ---------- */

.app-shell {
    --app-bg: #f4f7f5;
    --app-surface: #ffffff;
    --app-ink: #102019;
    --app-muted: #68766f;
    --app-line: rgba(16, 32, 25, 0.1);
    --app-green: #0e8a5f;
    margin: 0;
    min-height: 100vh;
    color: var(--app-ink);
    background: var(--app-bg);
    font-family: "Instrument Sans", "Inter", sans-serif;
}

.loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #f7f9f8;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.loader-overlay.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.loader-panel {
    display: grid;
    justify-items: center;
    gap: 28px;
}

.loader-brand {
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 10px;
}

.loader-brand-mark {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    color: #0e8a5f;
    animation: app-loader-brand-pulse 1.8s ease-in-out infinite;
}

.loader-brand-name {
    color: #173b2d;
    font: 700 1.45rem "Space Grotesk", sans-serif;
    letter-spacing: -.045em;
}

.loader-spinner {
    width: 23px;
    height: 23px;
    border: 2px solid rgba(14, 138, 95, .16);
    border-top-color: #0e8a5f;
    border-radius: 50%;
    animation: app-loader-spin .8s linear infinite;
}

.loader-signature {
    position: absolute;
    bottom: max(30px, env(safe-area-inset-bottom));
    left: 50%;
    display: grid;
    justify-items: center;
    gap: 3px;
    color: #728078;
    transform: translateX(-50%);
    white-space: nowrap;
}

.loader-signature small {
    font-size: .62rem;
    letter-spacing: .04em;
}

.loader-signature strong {
    color: #0e8a5f;
    font-size: .68rem;
    letter-spacing: .14em;
}

@keyframes app-loader-brand-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .72; transform: scale(.96); }
}

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

@media (prefers-reduced-motion: reduce) {
    .loader-brand-mark,
    .loader-spinner {
        animation: none;
    }
}

.dashboard-frame {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    color: #edf7f2;
    background: linear-gradient(180deg, #0d2119, #102f24);
    z-index: 70;
}

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

.brand-mark {
    display: flex;
    align-items: center;
    gap: 11px;
}

.brand-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--app-green), #20c98b);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
}

.brand-mark strong,
.brand-mark span {
    display: block;
}

.brand-mark strong {
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.92rem;
}

.brand-mark span {
    margin-top: 2px;
    color: rgba(237, 247, 242, 0.58);
    font-size: 0.65rem;
}

.sidebar-close,
.dashboard-menu-button,
.dashboard-scrim {
    border: 0;
    cursor: pointer;
}

.sidebar-close {
    display: none;
    color: #fff;
    background: transparent;
    font-size: 1.7rem;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
    margin-top: 44px;
}

.nav-link {
    padding: 12px 14px;
    border-radius: 12px;
    color: rgba(237, 247, 242, 0.68);
    font-size: 0.8rem;
    font-weight: 600;
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
}

.sidebar-card {
    margin-top: auto;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-card .eyebrow {
    color: #70ddb0;
}

.sidebar-card h3 {
    margin: 7px 0;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.95rem;
}

.sidebar-card p:last-child {
    margin: 0;
    color: rgba(237, 247, 242, 0.58);
    font-size: 0.72rem;
    line-height: 1.55;
}

.dashboard-scrim {
    display: none;
}

.dashboard-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 32px;
    border-bottom: 1px solid var(--app-line);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px);
}

.topbar .eyebrow,
.dashboard-grid .eyebrow {
    margin: 0 0 5px;
    color: var(--app-green);
    font-size: 0.65rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.topbar h1 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.25rem;
    letter-spacing: -0.025em;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border-radius: 999px;
    color: #176c4a;
    background: rgba(14, 138, 95, 0.09);
    font-size: 0.72rem;
    font-weight: 700;
}

.status-pill .status-dot {
    width: 7px;
    height: 7px;
    box-shadow: none;
}

.topbar .ghost-button {
    min-height: 40px;
    padding: 0 15px;
    font-size: 0.74rem;
}

.dashboard-menu-button {
    display: none;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--app-surface);
}

.dashboard-menu-button span {
    display: block;
    width: 17px;
    height: 2px;
    margin: 3px auto;
    border-radius: 2px;
    background: var(--app-ink);
}

.dashboard-content {
    flex: 1;
    padding: 28px 32px 40px;
}

.dashboard-grid {
    display: grid;
    gap: 22px;
}

.hero-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
    align-items: end;
    gap: 30px;
    padding: 30px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, #0d2119, #124431 70%, #0e8a5f);
}

.hero-summary h2 {
    margin: 0;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.8rem;
}

.hero-text {
    max-width: 65ch;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.8rem;
    line-height: 1.6;
}

.hero-summary .signal-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-summary .signal-row div {
    padding: 0 12px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-summary .signal-row strong {
    color: #fff;
    font-size: 1.05rem;
}

.hero-summary .signal-row span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.64rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.stat-card,
.content-panel {
    border: 1px solid var(--app-line);
    background: var(--app-surface);
    box-shadow: 0 14px 30px rgba(16, 32, 25, 0.055);
}

.stat-card {
    min-width: 0;
    padding: 20px;
    border-radius: 18px;
}

.stat-card > span,
.stat-card > small {
    display: block;
    color: var(--app-muted);
    font-size: 0.68rem;
}

.stat-card strong {
    display: block;
    overflow-wrap: anywhere;
    margin: 10px 0 5px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.35rem;
}

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

.content-panel {
    padding: 24px;
    border-radius: 20px;
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.panel-heading h3 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
}

.panel-chip {
    padding: 6px 9px;
    border-radius: 999px;
    color: #176c4a;
    background: rgba(14, 138, 95, 0.09);
    font-size: 0.65rem;
    font-weight: 700;
}

.panel-chip-warm {
    color: #8a5b00;
    background: rgba(255, 193, 59, 0.13);
}

.activity-list {
    display: grid;
    gap: 0;
    margin-top: 18px;
}

.activity-list article {
    padding: 14px 0;
    border-top: 1px solid var(--app-line);
}

.activity-list strong {
    font-size: 0.78rem;
}

.activity-list p {
    margin: 5px 0 0;
    color: var(--app-muted);
    font-size: 0.74rem;
    line-height: 1.5;
}

.progress-block {
    margin-top: 26px;
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--app-muted);
    font-size: 0.7rem;
}

.progress-track {
    height: 8px;
    overflow: hidden;
    margin-top: 9px;
    border-radius: 999px;
    background: #e8efeb;
}

.progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--app-green), #20c98b);
}

.detail-list {
    display: grid;
    gap: 10px;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--app-line);
    list-style: none;
    color: var(--app-muted);
    font-size: 0.74rem;
}

.detail-list strong {
    color: var(--app-ink);
}

.dashboard-footer {
    padding: 20px 32px;
    border-top: 1px solid var(--app-line);
    color: var(--app-muted);
    background: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
}

.dashboard-footer p {
    margin: 0;
}

@media (max-width: 1100px) {
    .hero-summary {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 900px) {
    .dashboard-frame {
        display: block;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(84vw, 310px);
        transform: translateX(-105%);
        box-shadow: 24px 0 60px rgba(0, 0, 0, 0.25);
        transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .sidebar-close,
    .dashboard-menu-button {
        display: block;
    }

    .dashboard-scrim {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(4, 12, 8, 0.54);
        transition: opacity 180ms ease, visibility 180ms ease;
    }

    .dashboard-menu-open {
        overflow: hidden;
    }

    .dashboard-menu-open .sidebar {
        transform: translateX(0);
    }

    .dashboard-menu-open .dashboard-scrim {
        visibility: visible;
        opacity: 1;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .dashboard-panels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .topbar {
        min-height: 74px;
        gap: 12px;
        padding: 12px 14px;
    }

    .topbar-copy {
        min-width: 0;
        flex: 1;
    }

    .topbar .eyebrow {
        display: none;
    }

    .topbar h1 {
        overflow: hidden;
        font-size: 0.95rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .topbar-actions .status-pill {
        width: 38px;
        height: 38px;
        justify-content: center;
        padding: 0;
        font-size: 0;
    }

    .topbar .ghost-button {
        display: none;
    }

    .dashboard-content {
        padding: 16px 14px 28px;
    }

    .dashboard-grid {
        gap: 14px;
    }

    .hero-summary {
        gap: 22px;
        padding: 22px 18px;
        border-radius: 20px;
    }

    .hero-summary h2 {
        font-size: 1.4rem;
    }

    .hero-summary .signal-row div {
        padding: 0 8px;
    }

    .hero-summary .signal-row div:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .hero-summary .signal-row strong {
        font-size: 0.9rem;
    }

    .stat-grid {
        gap: 10px;
    }

    .stat-card {
        padding: 16px;
        border-radius: 16px;
    }

    .stat-card strong {
        font-size: 1.08rem;
    }

    .content-panel {
        padding: 19px 17px;
        border-radius: 18px;
    }

    .panel-heading h3 {
        font-size: 0.9rem;
    }

    .progress-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .dashboard-footer {
        padding: 18px 14px;
        line-height: 1.5;
    }
}

@media (max-width: 420px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- KasaFlow role dashboards ---------- */

.app-shell {
    --dash-green: #6fba3b;
    --dash-green-dark: #173f2d;
    --dash-lime: #c8ed70;
    --dash-yellow: #f4d857;
    --dash-blue: #78a9e8;
    --dash-coral: #ef9077;
}

.app-shell .dashboard-frame {
    grid-template-columns: 248px minmax(0, 1fr);
}

.app-shell .sidebar {
    padding: 22px 16px 18px;
    background:
        radial-gradient(circle at 10% 95%, rgba(151, 215, 91, 0.12), transparent 30%),
        #10251c;
}

.app-shell .sidebar-head {
    position: relative;
    min-height: 48px;
}

.app-shell .sidebar .auth-brand {
    min-width: 0;
    gap: 11px;
    color: #f6fbf7;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
    letter-spacing: -0.025em;
}

.app-shell .sidebar .auth-brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    color: #18301f;
    background: linear-gradient(135deg, #d8f88e, #f5da58);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.24),
        0 0 0 4px rgba(200, 237, 112, 0.08);
}

.app-shell .sidebar .auth-brand-mark svg {
    width: 21px;
    height: 21px;
    stroke-width: 2.2;
}

.app-shell .sidebar .auth-brand > span:last-child {
    display: block;
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-shell .brand-mark {
    padding-inline: 5px;
}

.app-shell .brand-icon {
    width: 39px;
    height: 39px;
    color: #17240d;
    background: linear-gradient(135deg, var(--dash-lime), var(--dash-yellow));
    font-size: 1rem;
}

.app-shell .brand-mark > span {
    margin: 0;
}

.app-shell .brand-mark small {
    display: block;
    margin-top: 2px;
    color: rgba(237, 247, 242, 0.48);
    font-size: 0.6rem;
}

.app-shell .sidebar-nav {
    gap: 4px;
    margin-top: 34px;
}

.sidebar-label {
    margin: 22px 11px 7px;
    color: rgba(237, 247, 242, 0.34);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sidebar-label:first-child {
    margin-top: 0;
}

.app-shell .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 10px;
    font-size: 0.82rem;
}

.app-shell .nav-link.active {
    color: #f4faed;
    background: rgba(200, 237, 112, 0.11);
    box-shadow: inset 3px 0 0 var(--dash-lime);
}

.nav-icon {
    width: 25px;
    height: 25px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(237, 247, 242, 0.5);
    font-size: 0.52rem;
}

.nav-link.active .nav-icon {
    border-color: rgba(200, 237, 112, 0.18);
    color: var(--dash-lime);
    background: rgba(200, 237, 112, 0.07);
}

.nav-link > b {
    min-width: 21px;
    margin-left: auto;
    padding: 3px 6px;
    border-radius: 999px;
    color: #17301f;
    background: var(--dash-lime);
    font-size: 0.55rem;
    text-align: center;
}

.sidebar-spacer {
    flex: 1;
    min-height: 24px;
}

.sidebar-profile {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 8px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-profile-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #17301f;
    background: #d5edaa;
    font-size: 0.65rem;
    font-weight: 800;
}

.sidebar-profile > span:nth-child(2) {
    min-width: 0;
}

.sidebar-profile strong,
.sidebar-profile small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-profile strong {
    color: #f2f8f4;
    font-size: 0.75rem;
}

.sidebar-profile small {
    margin-top: 3px;
    color: rgba(237, 247, 242, 0.42);
    font-size: 0.62rem;
}

.sidebar-profile button {
    padding: 5px;
    border: 0;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    cursor: pointer;
}

.app-shell .topbar {
    min-height: 82px;
    padding: 15px clamp(18px, 3vw, 34px);
}

.app-shell .topbar h1 {
    font-size: 1.15rem;
}

.dashboard-icon-button {
    position: relative;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--app-line);
    border-radius: 11px;
    color: var(--app-muted);
    background: var(--app-surface);
    cursor: pointer;
}

.dashboard-icon-button i {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 5px;
    height: 5px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #e7674c;
}

.dashboard-search {
    position: relative;
    width: 39px;
    height: 39px;
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    transition: width 320ms cubic-bezier(.22, 1, .36, 1);
}

.dashboard-search.is-open {
    width: min(390px, 38vw);
}

.dashboard-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.dashboard-search input {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0 46px 0 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--app-ink);
    background: transparent;
    font: inherit;
    font-size: .72rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: scaleX(.25);
    transform-origin: right center;
    transition: opacity 160ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.dashboard-search input::-webkit-search-cancel-button {
    display: none;
}

.dashboard-search input::placeholder {
    color: var(--app-muted);
}

.dashboard-search.is-open input {
    border-color: rgba(111, 186, 59, .35);
    background: var(--app-surface);
    box-shadow: 0 10px 28px rgba(19, 54, 38, .1);
    opacity: 1;
    pointer-events: auto;
    transform: scaleX(1);
}

.dashboard-search.is-open input:focus {
    border-color: var(--dash-green);
    box-shadow: 0 0 0 3px rgba(111, 186, 59, .16), 0 12px 30px rgba(19, 54, 38, .12);
    outline: none;
}

.dashboard-search .dashboard-search-button {
    z-index: 1;
    flex: 0 0 39px;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.dashboard-search.is-open .dashboard-search-button {
    border-color: transparent;
    color: #173f2d;
    background: var(--dash-lime);
    transform: scale(.8);
}

.dashboard-search-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(470px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid rgba(31, 74, 54, .13);
    border-radius: 18px;
    color: var(--app-ink);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 70px rgba(19, 54, 38, .18), 0 4px 14px rgba(19, 54, 38, .08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.dashboard-search.is-open .dashboard-search-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.dashboard-search-panel-head,
.dashboard-search-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-search-panel-head {
    padding: 15px 16px 12px;
    border-bottom: 1px solid rgba(31, 74, 54, .09);
}

.dashboard-search-panel-head > span {
    display: grid;
    gap: 2px;
}

.dashboard-search-panel-head strong {
    color: var(--app-ink);
    font-size: .72rem;
    letter-spacing: -.01em;
}

.dashboard-search-panel-head small {
    color: var(--app-muted);
    font-size: .59rem;
}

.dashboard-search-panel kbd {
    min-width: 23px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 1px solid rgba(31, 74, 54, .13);
    border-radius: 6px;
    color: var(--app-muted);
    background: rgba(31, 74, 54, .045);
    box-shadow: 0 1px 0 rgba(31, 74, 54, .08);
    font: 700 .52rem "IBM Plex Mono", monospace;
}

.dashboard-search-results {
    max-height: min(400px, calc(100vh - 190px));
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(8, 116, 79, .22) transparent;
}

.dashboard-search-result {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.dashboard-search-result.is-active,
.dashboard-search-result:hover,
.dashboard-search-result:focus-visible {
    border-color: rgba(8, 116, 79, .13);
    background: linear-gradient(90deg, rgba(8, 116, 79, .085), rgba(174, 221, 68, .055));
    outline: none;
    transform: translateX(2px);
}

.dashboard-search-result-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #08744f;
    background: rgba(8, 116, 79, .09);
}

.dashboard-search-result-icon.is-records {
    color: #7a6410;
    background: rgba(222, 183, 47, .14);
}

.dashboard-search-result > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.dashboard-search-result strong,
.dashboard-search-result small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-search-result strong {
    color: var(--app-ink);
    font-size: .68rem;
}

.dashboard-search-result small {
    color: var(--app-muted);
    font-size: .57rem;
}

.dashboard-search-result-action {
    padding: 5px 7px;
    border-radius: 7px;
    color: #08744f;
    background: rgba(8, 116, 79, .07);
    font: 750 .52rem "Instrument Sans", sans-serif;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.dashboard-search-result.is-active .dashboard-search-result-action,
.dashboard-search-result:hover .dashboard-search-result-action,
.dashboard-search-result:focus-visible .dashboard-search-result-action {
    opacity: 1;
    transform: translateX(0);
}

.dashboard-search-empty {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 24px;
    text-align: center;
}

.dashboard-search-empty > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    border-radius: 12px;
    color: #08744f;
    background: rgba(8, 116, 79, .09);
    font-weight: 800;
}

.dashboard-search-empty strong { font-size: .7rem; }
.dashboard-search-empty small { color: var(--app-muted); font-size: .59rem; }

.dashboard-search-panel-foot {
    justify-content: flex-start;
    gap: 15px;
    padding: 10px 14px;
    border-top: 1px solid rgba(31, 74, 54, .09);
    color: var(--app-muted);
    background: rgba(31, 74, 54, .025);
    font-size: .52rem;
}

.dashboard-search-panel-foot span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dashboard-search-panel-foot kbd { height: 19px; min-width: 19px; padding: 0 4px; }

.dashboard-notifications {
    position: relative;
}

.dashboard-notification-menu {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;
    z-index: 180;
    width: min(350px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid var(--app-line);
    border-radius: 17px;
    background: var(--app-surface);
    box-shadow: 0 22px 50px rgba(15, 35, 25, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(.98);
    transform-origin: top right;
    transition: opacity 150ms ease, visibility 150ms ease, transform 180ms ease;
}

.dashboard-notifications.is-open .dashboard-notification-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.dashboard-notifications.is-open .dashboard-notification-button {
    border-color: rgba(111, 186, 59, .38);
    color: #173f2d;
    background: var(--dash-lime);
}

.dashboard-notification-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 10px 13px;
    border-bottom: 1px solid var(--app-line);
}

.dashboard-notification-head strong,
.dashboard-notification-head small {
    display: block;
}

.dashboard-notification-head strong {
    font-size: .78rem;
}

.dashboard-notification-head small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: .58rem;
}

.dashboard-notification-head small b {
    color: var(--dash-green);
}

.dashboard-notification-head button {
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    color: var(--dash-green-dark);
    background: rgba(111, 186, 59, .1);
    font: inherit;
    font-size: .57rem;
    font-weight: 750;
    cursor: pointer;
}

.dashboard-notification-head button:disabled {
    color: var(--app-muted);
    background: transparent;
    cursor: default;
}

.dashboard-notification-list {
    display: grid;
    padding: 5px 0;
}

.dashboard-notification-list a {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 10px;
    border-radius: 11px;
    color: var(--app-ink);
    transition: background 150ms ease;
}

.dashboard-notification-list a:hover,
.dashboard-notification-list a:focus-visible {
    background: rgba(111, 186, 59, .08);
    outline: none;
}

.dashboard-notification-list a.is-unread::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dash-green);
}

.dashboard-notification-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
}

.dashboard-notification-icon.is-green { color: #4f942b; background: rgba(111, 186, 59, .12); }
.dashboard-notification-icon.is-yellow { color: #a88713; background: rgba(244, 216, 87, .16); }
.dashboard-notification-icon.is-blue { color: #477fbf; background: rgba(120, 169, 232, .14); }

.dashboard-notification-list strong,
.dashboard-notification-list small {
    display: block;
}

.dashboard-notification-list strong {
    font-size: .66rem;
    line-height: 1.35;
}

.dashboard-notification-list small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: .56rem;
    line-height: 1.45;
}

.dashboard-notification-list time {
    color: var(--app-muted);
    font-size: .52rem;
    white-space: nowrap;
}

.dashboard-notification-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    border-top: 1px solid var(--app-line);
    color: var(--dash-green-dark);
    font-size: .62rem;
    font-weight: 750;
}

.dashboard-primary-action {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 11px;
    color: #fff;
    background: #173f2d;
    font-size: 0.7rem;
    font-weight: 700;
}

.dashboard-account {
    position: relative;
}

.dashboard-account-trigger {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px 4px 5px;
    border: 1px solid var(--app-line);
    border-radius: 13px;
    color: var(--app-ink);
    background: var(--app-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dashboard-account-trigger:hover,
.dashboard-account-trigger:focus-visible,
.dashboard-account.is-open .dashboard-account-trigger {
    border-color: rgba(111, 186, 59, .38);
    box-shadow: 0 8px 22px rgba(19, 54, 38, .09);
    outline: none;
}

.dashboard-account-icon {
    width: 33px;
    height: 33px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    color: #173f2d;
    background: linear-gradient(135deg, var(--dash-lime), var(--dash-yellow));
}

.dashboard-account-copy {
    min-width: 0;
}

.dashboard-account-copy strong,
.dashboard-account-copy small {
    display: block;
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-account-copy strong {
    font-size: .68rem;
    font-weight: 750;
}

.dashboard-account-copy small {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: .56rem;
}

.dashboard-account-chevron {
    color: var(--app-muted);
    transition: transform 180ms ease;
}

.dashboard-account.is-open .dashboard-account-chevron {
    transform: rotate(180deg);
}

.dashboard-account-menu {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;
    z-index: 180;
    width: min(290px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid var(--app-line);
    border-radius: 17px;
    background: var(--app-surface);
    box-shadow: 0 22px 50px rgba(15, 35, 25, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(.98);
    transform-origin: top right;
    transition: opacity 150ms ease, visibility 150ms ease, transform 180ms ease;
}

.dashboard-account.is-open .dashboard-account-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.dashboard-account-summary {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 9px 10px 13px;
    border-bottom: 1px solid var(--app-line);
}

.dashboard-account-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #173f2d;
    background: linear-gradient(135deg, #d8f88e, #f5da58);
    font-size: .66rem;
    font-weight: 800;
}

.dashboard-account-summary strong,
.dashboard-account-summary small {
    display: block;
}

.dashboard-account-summary strong {
    font-size: .75rem;
}

.dashboard-account-summary small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: .61rem;
}

.dashboard-account-links {
    display: grid;
    gap: 2px;
    padding: 7px 0;
}

.dashboard-account-links a,
.dashboard-account-logout {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--app-ink);
    transition: color 150ms ease, background 150ms ease;
}

.dashboard-account-links a:hover,
.dashboard-account-links a:focus-visible {
    color: #173f2d;
    background: rgba(111, 186, 59, .09);
    outline: none;
}

.dashboard-account-links svg,
.dashboard-account-logout svg {
    flex: 0 0 auto;
    color: var(--app-muted);
}

.dashboard-account-links span {
    min-width: 0;
}

.dashboard-account-links strong,
.dashboard-account-links small {
    display: block;
}

.dashboard-account-links strong {
    font-size: .68rem;
}

.dashboard-account-links small {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: .56rem;
}

.dashboard-account-logout {
    border-top: 1px solid var(--app-line);
    border-radius: 0 0 10px 10px;
    color: #c54f43;
    font-size: .68rem;
    font-weight: 700;
}

.dashboard-account-logout:hover,
.dashboard-account-logout:focus-visible {
    background: rgba(197, 79, 67, .08);
    outline: none;
}

.dashboard-account-logout svg {
    color: currentColor;
}

.app-shell .dashboard-content {
    width: 100%;
    max-width: 1540px;
    margin-inline: auto;
    padding: 26px clamp(18px, 3vw, 34px) 44px;
}

.dash-page {
    display: grid;
    gap: 18px;
}

.dash-welcome-card,
.dash-admin-intro {
    border-radius: 24px;
}

.dash-welcome-card {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
    align-items: center;
    gap: 30px;
    padding: 34px clamp(28px, 4vw, 48px);
    color: #fff;
    background:
        radial-gradient(circle at 84% 20%, rgba(200, 237, 112, 0.2), transparent 25%),
        linear-gradient(135deg, #11281e, #174f38);
}

.dash-welcome-card::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.15;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, transparent 35%, #000);
}

.dash-welcome-copy {
    position: relative;
    z-index: 1;
}

.dash-live-label {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    color: rgba(255,255,255,.74);
    background: rgba(255,255,255,.06);
    font-size: 0.62rem;
    font-weight: 700;
}

.dash-live-label i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dash-lime);
    box-shadow: 0 0 0 4px rgba(200,237,112,.1);
}

.dash-welcome-card h2,
.dash-admin-intro h2 {
    margin: 16px 0 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.55rem, 3vw, 2.3rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.dash-welcome-card h2 {
    max-width: 18ch;
    color: #fff;
}

.dash-welcome-card p,
.dash-admin-intro p {
    max-width: 58ch;
    margin: 12px 0 0;
    font-size: 0.78rem;
    line-height: 1.65;
}

.dash-welcome-copy .dash-page-greeting,
.dash-admin-intro .dash-page-greeting {
    margin: 18px 0 -8px;
    color: var(--dash-lime);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.dash-admin-intro .dash-page-greeting {
    color: #5b9637;
}

.dash-welcome-card p {
    color: rgba(255,255,255,.64);
}

.dash-welcome-actions,
.dash-admin-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

.dash-button {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.dash-button-light { color: #163221; background: var(--dash-lime); }
.dash-button-quiet { color: #fff; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.dash-button-outline { color: var(--app-ink); border-color: var(--app-line); background: var(--app-surface); }
.dash-button-dark { color: #fff; background: var(--dash-green-dark); }

.dash-assistant-orbit {
    position: relative;
    z-index: 1;
    min-height: 190px;
    display: grid;
    place-items: center;
}

.dash-orbit-ring {
    width: 154px;
    height: 154px;
    display: grid;
    place-content: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    text-align: center;
    box-shadow: inset 0 0 0 18px rgba(255,255,255,.025), 0 0 0 24px rgba(200,237,112,.035);
}

.dash-orbit-ring strong,
.dash-orbit-ring small { display: block; }
.dash-orbit-ring strong { font: 700 2rem "Space Grotesk", sans-serif; }
.dash-orbit-ring small { margin-top: 3px; color: rgba(255,255,255,.56); font-size: .58rem; }

.dash-orbit-chip {
    position: absolute;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    color: rgba(255,255,255,.76);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
    font-size: .57rem;
    font-weight: 700;
}

.dash-orbit-chip-one { top: 18px; right: 0; }
.dash-orbit-chip-two { bottom: 17px; left: 0; }

.dash-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dash-metric-card,
.dash-panel {
    border: 1px solid var(--app-line);
    background: var(--app-surface);
    box-shadow: 0 8px 24px rgba(16, 32, 25, 0.035);
}

.dash-metric-card {
    position: relative;
    padding: 19px;
    border-radius: 17px;
}

.dash-metric-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: .68rem;
    font-weight: 800;
}

.dash-icon-green { color: #38721d; background: #e2f2ce; }
.dash-icon-yellow { color: #765e00; background: #f8eab0; }
.dash-icon-blue { color: #315c91; background: #dceafa; }
.dash-icon-coral { color: #934d3b; background: #f7dfd9; }

.dash-metric-trend {
    position: absolute;
    top: 20px;
    right: 18px;
    color: var(--app-muted);
    font-size: .6rem;
    font-weight: 700;
}

.dash-metric-trend.is-positive { color: #4f942b; }
.dash-metric-card p { margin: 17px 0 4px; color: var(--app-muted); font-size: .76rem; }
.dash-metric-card > strong { display: block; font: 700 1.28rem "Space Grotesk", sans-serif; letter-spacing: -.03em; }
.dash-metric-card > small { display: block; margin-top: 5px; color: #8a9690; font-size: .64rem; }

.dash-layout-main {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(290px, .65fr);
    gap: 18px;
}

.dash-panel {
    min-width: 0;
    padding: 22px;
    border-radius: 19px;
}

.dash-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.dash-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--dash-green);
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.dash-panel h3 { margin: 0; font: 700 .94rem "Space Grotesk", sans-serif; letter-spacing: -.02em; }

.dash-filter-button {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--app-line);
    border-radius: 9px;
    color: var(--app-muted);
    background: var(--app-surface);
    font: inherit;
    font-size: .62rem;
}

.dash-status-badge,
.dash-count-badge {
    padding: 6px 9px;
    border-radius: 999px;
    color: #4b812d;
    background: #e9f5da;
    font-size: .57rem;
    font-weight: 800;
}

.dash-chart-summary { display: flex; align-items: baseline; gap: 12px; margin-top: 23px; }
.dash-chart-summary strong { font: 700 1.4rem "Space Grotesk", sans-serif; }
.dash-chart-summary span { color: #59933a; font-size: .6rem; }
.dash-chart-summary i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--dash-green); }

.dash-bar-chart {
    height: 190px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: clamp(8px, 2vw, 18px);
    margin-top: 19px;
    padding-top: 10px;
    border-bottom: 1px solid var(--app-line);
    background: repeating-linear-gradient(to bottom, var(--app-line) 0 1px, transparent 1px 48px);
}

.dash-bar-chart > div { height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; gap: 8px; }
.dash-bar-chart span { width: min(28px, 68%); height: var(--bar-height); border-radius: 7px 7px 2px 2px; background: #dceacc; }
.dash-bar-chart .is-current span { background: linear-gradient(180deg, var(--dash-lime), var(--dash-green)); }
.dash-bar-chart small { margin-bottom: -22px; color: var(--app-muted); font-size: .56rem; }

.dash-token-panel { display: flex; flex-direction: column; }
.dash-token-ring { width: 138px; height: 138px; display: grid; place-items: center; margin: 26px auto 20px; border-radius: 50%; background: conic-gradient(var(--dash-green) var(--token-progress), #e9efeb 0); }
.dash-token-ring::before { content: ""; grid-area: 1/1; width: 106px; height: 106px; border-radius: 50%; background: var(--app-surface); }
.dash-token-ring > span { position: relative; grid-area: 1/1; text-align: center; }
.dash-token-ring strong,.dash-token-ring small { display: block; }
.dash-token-ring strong { font: 700 1.3rem "Space Grotesk",sans-serif; }
.dash-token-ring small { color: var(--app-muted); font-size: .56rem; }
.dash-token-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.dash-token-meta span { padding: 10px; border-radius: 10px; background: var(--app-bg); }
.dash-token-meta small,.dash-token-meta strong { display: block; }
.dash-token-meta small { color: var(--app-muted); font-size: .55rem; }
.dash-token-meta strong { margin-top: 3px; font-size: .7rem; }

.dash-layout-orders { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); }
.dash-text-link { color: #4f8b31; font-size: .64rem; font-weight: 700; }
.dash-table-wrap { overflow-x: auto; margin: 18px -4px -4px; }
.dash-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.dash-table th { padding: 10px 10px 10px 10px; color: #8b9791; font-size: .55rem; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.dash-table td { padding: 12px 10px; border-top: 1px solid var(--app-line); color: var(--app-muted); font-size: .66rem; }
.dash-table td strong,.dash-table td small { display: block; }
.dash-table td strong { color: var(--app-ink); font-size: .68rem; }
.dash-table td small { margin-top: 3px; color: #98a39d; font-size: .53rem; }
.dash-order-status { display: inline-flex; padding: 5px 7px; border-radius: 999px; font-size: .53rem; font-weight: 800; }
.dash-order-status.is-new { color: #37648e; background: #e1edf8; }
.dash-order-status.is-processing { color: #806400; background: #f8edbd; }
.dash-order-status.is-ready,.dash-order-status.is-complete { color: #4b812d; background: #e5f2d7; }

.dash-inbox-list { display: grid; gap: 2px; margin: 14px 0 18px; }
.dash-inbox-list article { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--app-line); }
.dash-contact-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #34651d; background: #e1f0d1; font-size: .56rem; font-weight: 800; }
.dash-contact-avatar.is-yellow { color: #735c02; background: #f5e9af; }
.dash-contact-avatar.is-blue { color: #315d8c; background: #dce9f7; }
.dash-inbox-list strong { display: block; font-size: .66rem; }
.dash-inbox-list p { overflow: hidden; margin: 3px 0 0; color: var(--app-muted); font-size: .58rem; white-space: nowrap; text-overflow: ellipsis; }
.dash-inbox-list article > small { color: #98a39d; font-size: .52rem; }

.dash-admin-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 28px 30px; border: 1px solid var(--app-line); background: linear-gradient(120deg, #f8fbf5, #edf6e5); }
.dash-admin-intro .dash-live-label { color: #4f812f; border-color: rgba(80,130,50,.14); background: rgba(112,186,59,.07); }
.dash-admin-intro h2 { color: var(--app-ink); }
.dash-admin-intro p { color: var(--app-muted); }
.dash-admin-intro-actions { flex: 0 0 auto; margin: 0; }

.dash-line-chart { position: relative; height: 220px; margin-top: 18px; padding-bottom: 25px; }
.dash-line-chart svg { position: absolute; inset: 0 0 25px; width: 100%; height: calc(100% - 25px); overflow: visible; }
.dash-line-chart .dash-area { fill: url(#adminChartFill); }
.dash-line-chart .dash-line { fill: none; stroke: var(--dash-green); stroke-width: 4; stroke-linecap: round; }
.dash-chart-grid { position: absolute; inset: 0 0 25px; display: flex; flex-direction: column; justify-content: space-between; }
.dash-chart-grid i { width: 100%; border-top: 1px dashed var(--app-line); }
.dash-chart-labels { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: var(--app-muted); font-size: .55rem; }

.dash-health-score { padding: 25px 0 20px; text-align: center; }
.dash-health-score strong { display: block; color: #4f942b; font: 700 2rem "Space Grotesk",sans-serif; }
.dash-health-score span { color: var(--app-muted); font-size: .59rem; }
.dash-health-list { display: grid; gap: 2px; }
.dash-health-list div,.dash-channel-list div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--app-line); font-size: .61rem; }
.dash-health-list span,.dash-channel-list span { display: flex; align-items: center; gap: 8px; color: var(--app-muted); }
.dash-health-list i { width: 6px; height: 6px; border-radius: 50%; background: #72b84b; box-shadow: 0 0 0 3px #e8f3df; }
.dash-health-list strong { color: #55843b; font-size: .55rem; }

.dash-admin-bottom { grid-template-columns: minmax(0,1.55fr) minmax(280px,.55fr); }
.dash-business-cell { display: flex; align-items: center; gap: 9px; }
.dash-business-cell > i { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #315b23; background: #e4efd9; font-style: normal; font-size: .53rem; font-weight: 800; }
.dash-payment-total { padding: 22px 0 14px; }
.dash-payment-total strong,.dash-payment-total small { display: block; }
.dash-payment-total strong { font: 700 1.55rem "Space Grotesk",sans-serif; }
.dash-payment-total small { margin-top: 4px; color: var(--app-muted); font-size: .58rem; }
.dash-channel-list i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #43504a; background: #edf1ef; font-style: normal; font-size: .53rem; font-weight: 800; }
.dash-channel-list strong { font-size: .61rem; }

@media (max-width: 1180px) {
    .dash-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-layout-main,.dash-layout-orders,.dash-admin-bottom { grid-template-columns: 1fr; }
    .dash-token-panel { min-height: auto; }
    .dash-token-panel .dash-button { align-self: center; }
}

@media (max-width: 900px) {
    .app-shell .dashboard-frame { display: block; }
    .dash-welcome-card { grid-template-columns: minmax(0,1fr) 260px; }

    .app-shell .sidebar-head {
        padding-right: 48px;
    }

    .app-shell .sidebar-close {
        position: absolute;
        top: 4px;
        right: 0;
        z-index: 2;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        color: #fff;
        background: rgba(255, 255, 255, 0.09);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    }

    .app-shell .sidebar-close:hover,
    .app-shell .sidebar-close:focus-visible {
        border-color: rgba(216, 248, 142, 0.5);
        color: #d8f88e;
        background: rgba(216, 248, 142, 0.11);
        outline: none;
    }
}

@media (max-width: 720px) {
    .dash-welcome-card { grid-template-columns: 1fr; padding: 28px 24px; }
    .dash-assistant-orbit { min-height: 170px; }
    .dash-admin-intro { align-items: flex-start; flex-direction: column; padding: 24px; }
    .dash-admin-intro-actions { width: 100%; }
}

@media (max-width: 600px) {
    .dashboard-primary-action { display: none; }
    .app-shell .dashboard-content { padding: 14px 12px 30px; }
    .dash-page { gap: 12px; }
    .dash-welcome-card,.dash-admin-intro { border-radius: 19px; }
    .dash-welcome-card h2,.dash-admin-intro h2 { font-size: 1.55rem; }
    .dash-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
    .dash-metric-card { padding: 15px; border-radius: 14px; }
    .dash-metric-card p { margin-top: 14px; }
    .dash-metric-card > strong { font-size: 1.05rem; }
    .dash-metric-trend { top: 16px; right: 13px; }
    .dash-panel { padding: 18px 15px; border-radius: 16px; }
    .dash-panel-head { gap: 10px; }
    .dash-chart-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
    .dash-bar-chart { gap: 7px; }
    .dash-line-chart { height: 180px; }
    .dash-table-wrap { margin-inline: -15px; padding-inline: 7px; }
    .dash-admin-intro-actions .dash-button { flex: 1; }
}

@media (max-width: 390px) {
    .dash-metric-grid { grid-template-columns: 1fr; }
    .dash-welcome-actions { flex-direction: column; }
    .dash-welcome-actions .dash-button { width: 100%; }
    .dash-assistant-orbit { transform: scale(.9); margin-block: -12px; }
}

/* ---------- Dashboard themes ---------- */

.app-shell,
.app-shell .topbar,
.dash-metric-card,
.dash-panel,
.dash-admin-intro,
.dashboard-icon-button,
.dash-filter-button,
.dash-button-outline,
.dashboard-footer {
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.dashboard-theme-button {
    display: grid;
}

.dashboard-theme-icon {
    grid-area: 1 / 1;
    transition: opacity 170ms ease, transform 200ms ease;
}

html[data-theme="light"] .dashboard-theme-sun,
html[data-theme="dark"] .dashboard-theme-moon {
    opacity: 0;
    transform: scale(.55) rotate(-35deg);
}

html[data-theme="light"] .dashboard-theme-moon,
html[data-theme="dark"] .dashboard-theme-sun {
    opacity: 1;
    transform: scale(1) rotate(0);
}

html[data-theme="dark"] .app-shell {
    --app-bg: #09110d;
    --app-surface: #111d17;
    --app-ink: #eff7f2;
    --app-muted: #8e9e95;
    --app-line: rgba(226, 241, 233, 0.1);
    --dash-green: #91d653;
    --dash-green-dark: #8dce51;
    color-scheme: dark;
    background:
        radial-gradient(circle at 88% 5%, rgba(145, 214, 83, .055), transparent 28%),
        var(--app-bg);
}

html[data-theme="dark"] .loader-overlay {
    color: var(--app-muted);
    background: #09110d;
}

html[data-theme="dark"] .loader-brand-mark,
html[data-theme="dark"] .loader-signature strong {
    color: #83d4a9;
}

html[data-theme="dark"] .loader-brand-name {
    color: #eff7f2;
}

html[data-theme="dark"] .loader-signature {
    color: #829087;
}

html[data-theme="dark"] .loader-spinner {
    border-color: rgba(131, 212, 169, .16);
    border-top-color: #83d4a9;
}

html[data-theme="dark"] .app-shell .topbar {
    border-color: var(--app-line);
    background: rgba(12, 23, 17, .88);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

html[data-theme="dark"] .dashboard-icon-button,
html[data-theme="dark"] .dash-filter-button,
html[data-theme="dark"] .dash-button-outline {
    color: var(--app-muted);
    border-color: var(--app-line);
    background: #14221b;
}

html[data-theme="dark"] .dashboard-primary-action,
html[data-theme="dark"] .dash-button-dark {
    color: #15230f;
    background: var(--dash-lime);
}

html[data-theme="dark"] .dashboard-account-trigger,
html[data-theme="dark"] .dashboard-account-menu {
    border-color: var(--app-line);
    background: #14221b;
}

html[data-theme="dark"] .dashboard-account-trigger:hover,
html[data-theme="dark"] .dashboard-account-trigger:focus-visible,
html[data-theme="dark"] .dashboard-account.is-open .dashboard-account-trigger {
    border-color: rgba(200, 237, 112, .28);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .dashboard-account-menu {
    box-shadow: 0 24px 54px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .dashboard-account-links a:hover,
html[data-theme="dark"] .dashboard-account-links a:focus-visible {
    color: #d8f2a2;
    background: rgba(200, 237, 112, .08);
}

html[data-theme="dark"] .dashboard-notification-menu {
    border-color: var(--app-line);
    background: #14221b;
    box-shadow: 0 24px 54px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .dashboard-notifications.is-open .dashboard-notification-button {
    border-color: transparent;
    color: #173f2d;
    background: var(--dash-lime);
}

html[data-theme="dark"] .dashboard-notification-head button {
    color: #cdeb90;
    background: rgba(200, 237, 112, .08);
}

html[data-theme="dark"] .app-shell .dashboard-menu-button {
    border: 1px solid var(--app-line);
    background: #14221b;
}

html[data-theme="dark"] .app-shell .dashboard-menu-button span {
    background: var(--app-ink);
}

html[data-theme="dark"] .dash-metric-card,
html[data-theme="dark"] .dash-panel {
    border-color: var(--app-line);
    background: rgba(17, 29, 23, .96);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] .dash-admin-intro {
    border-color: var(--app-line);
    background:
        radial-gradient(circle at 88% 0, rgba(145, 214, 83, .09), transparent 32%),
        linear-gradient(120deg, #111f18, #14271d);
}

html[data-theme="dark"] .dash-admin-intro .dash-live-label {
    color: #bde990;
    border-color: rgba(145, 214, 83, .15);
    background: rgba(145, 214, 83, .07);
}

html[data-theme="dark"] .dash-icon-green {
    color: #b9e899;
    background: rgba(103, 177, 64, .15);
}

html[data-theme="dark"] .dash-icon-yellow {
    color: #f0d96f;
    background: rgba(244, 216, 87, .13);
}

html[data-theme="dark"] .dash-icon-blue {
    color: #9cc3f2;
    background: rgba(120, 169, 232, .14);
}

html[data-theme="dark"] .dash-icon-coral {
    color: #f2ae9b;
    background: rgba(239, 144, 119, .13);
}

html[data-theme="dark"] .dash-metric-card > small,
html[data-theme="dark"] .dash-table th,
html[data-theme="dark"] .dash-table td small,
html[data-theme="dark"] .dash-inbox-list article > small {
    color: #718078;
}

html[data-theme="dark"] .dash-status-badge,
html[data-theme="dark"] .dash-count-badge {
    color: #bce594;
    background: rgba(112, 184, 75, .13);
}

html[data-theme="dark"] .dash-bar-chart span {
    background: #26392f;
}

html[data-theme="dark"] .dash-bar-chart .is-current span {
    background: linear-gradient(180deg, var(--dash-lime), #5fa63b);
}

html[data-theme="dark"] .dash-token-ring {
    background: conic-gradient(var(--dash-green) var(--token-progress), #28372f 0);
}

html[data-theme="dark"] .dash-token-ring::before {
    background: var(--app-surface);
}

html[data-theme="dark"] .dash-token-meta span {
    background: #0d1812;
}

html[data-theme="dark"] .dash-contact-avatar,
html[data-theme="dark"] .dash-business-cell > i {
    color: #bce698;
    background: rgba(112, 184, 75, .14);
}

html[data-theme="dark"] .dash-contact-avatar.is-yellow {
    color: #f0da76;
    background: rgba(244, 216, 87, .13);
}

html[data-theme="dark"] .dash-contact-avatar.is-blue {
    color: #a5c7ed;
    background: rgba(120, 169, 232, .14);
}

html[data-theme="dark"] .dash-order-status.is-new {
    color: #a8cbef;
    background: rgba(120, 169, 232, .13);
}

html[data-theme="dark"] .dash-order-status.is-processing {
    color: #ead469;
    background: rgba(244, 216, 87, .12);
}

html[data-theme="dark"] .dash-order-status.is-ready,
html[data-theme="dark"] .dash-order-status.is-complete {
    color: #b9e491;
    background: rgba(112, 184, 75, .13);
}

html[data-theme="dark"] .dash-health-list i {
    box-shadow: 0 0 0 3px rgba(114, 184, 75, .12);
}

html[data-theme="dark"] .dash-health-list strong,
html[data-theme="dark"] .dash-chart-summary span,
html[data-theme="dark"] .dash-text-link,
html[data-theme="dark"] .dash-kicker {
    color: #9ed66d;
}

html[data-theme="dark"] .dash-channel-list i {
    color: #aebbb4;
    background: #26342d;
}

html[data-theme="dark"] .dashboard-footer {
    border-color: var(--app-line);
    color: #718078;
    /* background: rgba(14, 25, 19, .7); */
}

html[data-theme="dark"] .dash-line-chart .dash-line {
    stroke: #91d653;
}

html[data-theme="dark"] .dash-line-chart .dash-area {
    opacity: .72;
}

@media (max-width: 760px) {
    .dashboard-search.is-open {
        width: min(285px, calc(100vw - 88px));
    }

    .dashboard-search-panel {
        position: fixed;
        top: 68px;
        right: 12px;
        left: 12px;
        width: auto;
        transform-origin: top center;
    }

    .dashboard-search-results { max-height: calc(100vh - 190px); }

    .dashboard-search-panel-foot span:last-child { display: none; }

    .topbar-actions.is-searching > .dashboard-theme-button,
    .topbar-actions.is-searching > .dashboard-notifications,
    .topbar-actions.is-searching > .dashboard-account {
        display: none;
    }

    .dashboard-notification-menu {
        right: -49px;
    }

    .dashboard-account-trigger {
        width: 39px;
        height: 39px;
        min-height: 39px;
        justify-content: center;
        padding: 3px;
    }

    .dashboard-account-icon {
        width: 31px;
        height: 31px;
    }

    .dashboard-account-copy,
    .dashboard-account-chevron {
        display: none;
    }
}

/* ---------- Advanced dashboard navigation ---------- */

.app-shell .dashboard-frame {
    transition: grid-template-columns 220ms cubic-bezier(.22, 1, .36, 1);
}

.dashboard-collapse-button {
    width: 39px;
    height: 39px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid var(--app-line);
    border-radius: 11px;
    color: var(--app-muted);
    background: var(--app-surface);
    cursor: pointer;
}

/* Vendor WhatsApp onboarding */
.dash-whatsapp-connect {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    margin-bottom: 22px;
    padding: 28px 30px;
    overflow: hidden;
    border: 1px solid rgba(16, 73, 49, 0.12);
    border-radius: 24px;
    background:
        radial-gradient(circle at 7% 8%, rgba(66, 210, 139, 0.22), transparent 26%),
        linear-gradient(118deg, #f7fcf8 0%, #fffdf5 62%, #f4f9f5 100%);
    box-shadow: 0 18px 54px rgba(24, 65, 45, 0.09);
}

.dash-whatsapp-connect > .auth-alert,
.dash-whatsapp-warning {
    grid-column: 1 / -1;
    margin: 0;
}

.dash-whatsapp-warning {
    padding: 11px 14px;
    border-radius: 11px;
    color: #7b5a13;
    background: rgba(244, 201, 68, 0.16);
    font-size: 0.76rem;
}

.dash-whatsapp-visual {
    position: relative;
    width: 136px;
    height: 112px;
    display: grid;
    place-items: center;
}

.dash-whatsapp-glow {
    position: absolute;
    inset: 4px 15px;
    border-radius: 40% 60% 58% 42%;
    background: linear-gradient(135deg, rgba(31, 187, 112, 0.22), rgba(252, 214, 74, 0.22));
    filter: blur(3px);
    transform: rotate(-8deg);
}

.dash-whatsapp-phone,
.dash-whatsapp-meta {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 28px rgba(17, 77, 49, 0.17);
}

.dash-whatsapp-phone {
    left: 13px;
    width: 66px;
    height: 66px;
    overflow: hidden;
    border-radius: 18px;
    background: #25d366;
}

.dash-whatsapp-phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-whatsapp-meta {
    right: 16px;
    width: 52px;
    height: 52px;
    border: 5px solid rgba(255, 255, 255, 0.86);
    overflow: hidden;
    border-radius: 18px;
    background: #1877f2;
}

.dash-whatsapp-meta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-whatsapp-link {
    position: absolute;
    z-index: 1;
    width: 52px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #38b97d 0 7px, transparent 7px 12px);
    animation: whatsapp-link-flow 1.4s linear infinite;
}

@keyframes whatsapp-link-flow {
    to { background-position: 24px 0; }
}

.dash-whatsapp-copy {
    min-width: 0;
}

.dash-whatsapp-copy h3 {
    max-width: 670px;
    margin: 5px 0 8px;
    color: #12271d;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.72rem);
    letter-spacing: -0.035em;
}

.dash-whatsapp-copy > p {
    max-width: 680px;
    margin: 0;
    color: #68776f;
    font-size: 0.82rem;
    line-height: 1.65;
}

.dash-whatsapp-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
}

.dash-connection-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #16724c;
    background: rgba(37, 190, 121, 0.12);
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dash-connection-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #20b875;
    box-shadow: 0 0 0 4px rgba(32, 184, 117, 0.13);
}

.dash-whatsapp-steps,
.dash-whatsapp-details {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    margin-top: 15px;
}

.dash-whatsapp-steps span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #44554c;
    font-size: 0.7rem;
    font-weight: 700;
}

.dash-whatsapp-steps b {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #0c7149;
    background: rgba(31, 183, 115, 0.12);
    font-size: 0.62rem;
}

.dash-whatsapp-details span {
    display: grid;
    gap: 3px;
    padding-right: 18px;
    border-right: 1px solid rgba(20, 68, 45, 0.1);
}

.dash-whatsapp-details span:last-child { border-right: 0; }
.dash-whatsapp-details small { color: #7a8981; font-size: 0.61rem; }
.dash-whatsapp-details strong { color: #243b30; font-size: 0.75rem; }

.dash-whatsapp-action {
    width: min(230px, 100%);
    display: grid;
    gap: 9px;
    justify-items: stretch;
}

.dash-meta-button {
    min-width: 210px;
    justify-content: center;
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #1877f2, #0756c4);
    box-shadow: 0 12px 24px rgba(24, 119, 242, 0.22);
}

.dash-meta-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    box-shadow: none;
}

.dash-meta-mark {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 800;
}

.dash-whatsapp-action > small {
    color: #7b8881;
    font-size: 0.68rem;
    line-height: 1.45;
    text-align: center;
}

.dash-meta-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #345b47;
    font-size: 0.7rem;
    font-weight: 700;
}

.dash-meta-progress[hidden] { display: none; }
.dash-meta-progress i {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(30, 156, 98, 0.18);
    border-top-color: #1e9c62;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

.dash-button-danger {
    color: #a53b36;
    border: 1px solid rgba(180, 64, 57, 0.2);
    background: rgba(198, 70, 62, 0.07);
}

html[data-theme="dark"] .dash-whatsapp-connect {
    border-color: rgba(122, 207, 160, 0.13);
    background:
        radial-gradient(circle at 7% 8%, rgba(36, 177, 108, 0.14), transparent 27%),
        linear-gradient(118deg, #10231a, #17241e 64%, #11251b);
}

html[data-theme="dark"] .dash-whatsapp-copy h3 { color: #edf7f1; }
html[data-theme="dark"] .dash-whatsapp-copy > p,
html[data-theme="dark"] .dash-whatsapp-action > small { color: #91a098; }
html[data-theme="dark"] .dash-whatsapp-steps span,
html[data-theme="dark"] .dash-whatsapp-details strong { color: #cbd9d1; }
html[data-theme="dark"] .dash-whatsapp-details span { border-color: rgba(219, 239, 227, 0.1); }

@media (max-width: 980px) {
    .dash-whatsapp-connect { grid-template-columns: 120px minmax(0, 1fr); }
    .dash-whatsapp-visual { width: 118px; }
    .dash-whatsapp-action,
    .dash-whatsapp-connect > form:last-child { grid-column: 2; width: 100%; justify-items: start; }
}

@media (max-width: 640px) {
    .dash-whatsapp-connect {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px 18px;
        border-radius: 20px;
    }
    .dash-whatsapp-visual { width: 124px; height: 90px; margin: 0 auto; }
    .dash-whatsapp-action,
    .dash-whatsapp-connect > form:last-child { grid-column: 1; justify-items: stretch; }
    .dash-meta-button { width: 100%; min-width: 0; }
    .dash-whatsapp-details { display: grid; grid-template-columns: 1fr 1fr; }
    .dash-whatsapp-details span { border-right: 0; }
}

.dashboard-collapse-button svg {
    transition: transform 220ms ease;
}

.sidebar-nav-advanced {
    flex: 1;
    min-height: 0;
    align-content: start;
    grid-auto-rows: max-content;
    margin-right: -7px;
    padding-right: 7px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(255, 255, 255, .13) transparent;
    scrollbar-width: thin;
}

.sidebar-nav-advanced::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav-advanced::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
}

.nav-group {
    position: relative;
    display: grid;
}

.nav-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 0;
    border-radius: 10px;
    color: rgba(237, 247, 242, .68);
    background: transparent;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}

.nav-group-toggle:hover,
.nav-group.is-open > .nav-group-toggle,
.nav-group.is-active > .nav-group-toggle {
    color: #fff;
    background: rgba(255, 255, 255, .065);
}

.nav-group-toggle > b,
.nav-children a > b {
    min-width: 20px;
    margin-left: auto;
    padding: 3px 5px;
    border-radius: 999px;
    color: #18301f;
    background: var(--dash-lime);
    font-size: .5rem;
    text-align: center;
}

.nav-chevron {
    margin-left: auto;
    color: rgba(237, 247, 242, .38);
    font-size: 1.05rem;
    line-height: 1;
    transform: rotate(0);
    transition: transform 180ms ease;
}

.nav-group-toggle > b + .nav-chevron {
    margin-left: 0;
}

.nav-group.is-open .nav-chevron {
    transform: rotate(90deg);
}

.nav-group.is-active .nav-chevron {
    color: var(--dash-lime);
}

.nav-children {
    position: relative;
    max-height: 0;
    display: grid;
    gap: 2px;
    overflow: hidden;
    margin: 0 0 0 24px;
    padding: 0 0 0 22px;
    opacity: 0;
    transition: max-height 240ms ease, opacity 180ms ease, padding 220ms ease;
}

.nav-children::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 8px;
    width: 1px;
    background: rgba(255, 255, 255, .09);
}

.nav-group.is-open .nav-children {
    max-height: 240px;
    padding-top: 5px;
    padding-bottom: 7px;
    opacity: 1;
}

.nav-children a {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 8px;
    color: rgba(237, 247, 242, .48);
    font-size: .7rem;
    font-weight: 600;
    transition: color 150ms ease, background 150ms ease;
}

.nav-children a:hover {
    color: #eff8f2;
    background: rgba(255, 255, 255, .055);
}

.nav-children a.active,
.nav-children a[aria-current="page"] {
    color: #f4faed;
    background: rgba(200, 237, 112, .11);
    box-shadow: inset 2px 0 0 var(--dash-lime);
}

.nav-children a > b {
    color: #ddebce;
    background: rgba(255, 255, 255, .09);
}

.sidebar-nav-advanced .nav-icon {
    color: rgba(237, 247, 242, .55);
}

.sidebar-nav-advanced .nav-icon svg {
    display: block;
}

.sidebar-spacer {
    flex: 0 0 14px;
    min-height: 14px;
}

html[data-theme="dark"] .dashboard-collapse-button {
    color: var(--app-muted);
    border-color: var(--app-line);
    background: #14221b;
}

@media (min-width: 901px) {
    .dashboard-sidebar-collapsed .dashboard-frame {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .dashboard-sidebar-collapsed .sidebar {
        padding-inline: 10px;
    }

    .dashboard-sidebar-collapsed .sidebar-head {
        justify-content: center;
    }

    .dashboard-sidebar-collapsed .sidebar .auth-brand {
        justify-content: center;
    }

    .app-shell.dashboard-sidebar-collapsed .sidebar .auth-brand > .sidebar-brand-name,
    .dashboard-sidebar-collapsed .sidebar-label,
    .dashboard-sidebar-collapsed .nav-text,
    .dashboard-sidebar-collapsed .nav-link > b,
    .dashboard-sidebar-collapsed .nav-group-toggle > b,
    .dashboard-sidebar-collapsed .nav-chevron,
    .dashboard-sidebar-collapsed .sidebar-profile-copy,
    .dashboard-sidebar-collapsed .sidebar-profile-menu {
        display: none;
    }

    .dashboard-sidebar-collapsed .sidebar .auth-brand-mark {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .dashboard-sidebar-collapsed .sidebar-nav-advanced {
        margin-right: 0;
        padding-right: 0;
        overflow: visible;
    }

    .dashboard-sidebar-collapsed .nav-link,
    .dashboard-sidebar-collapsed .nav-group-toggle {
        justify-content: center;
        padding-inline: 7px;
    }

    .dashboard-sidebar-collapsed .nav-link.active {
        box-shadow: none;
    }

    .dashboard-sidebar-collapsed .nav-icon {
        width: 35px;
        height: 35px;
        border-color: transparent;
    }

    .dashboard-sidebar-collapsed .sidebar-profile {
        display: flex;
        justify-content: center;
        padding-inline: 0;
    }

    .dashboard-sidebar-collapsed .dashboard-collapse-button svg {
        transform: rotate(180deg);
    }

    .dashboard-sidebar-collapsed .nav-group .nav-children {
        position: absolute;
        top: 0;
        left: calc(100% + 9px);
        z-index: 120;
        width: 220px;
        max-height: none;
        display: grid;
        gap: 3px;
        overflow: visible;
        margin: 0;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 13px;
        background: #142a20;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .3);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-5px) scale(.98);
        transform-origin: top left;
        transition: opacity 150ms ease, visibility 150ms ease, transform 180ms ease;
    }

    .dashboard-sidebar-collapsed #admin-access-menu,
    .dashboard-sidebar-collapsed #admin-system-menu {
        top: auto;
        bottom: 0;
    }

    .dashboard-sidebar-collapsed .nav-group .nav-children::before {
        content: attr(data-menu-title);
        position: static;
        width: auto;
        height: auto;
        margin: 2px 8px 7px;
        color: rgba(237, 247, 242, .42);
        background: transparent;
        font-size: .58rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .dashboard-sidebar-collapsed .nav-group .nav-children::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -12px;
        width: 12px;
    }

    .dashboard-sidebar-collapsed .nav-group:hover .nav-children,
    .dashboard-sidebar-collapsed .nav-group:focus-within .nav-children {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0) scale(1);
    }

    .dashboard-sidebar-collapsed .nav-group .nav-children a {
        min-height: 34px;
        padding-inline: 10px;
        color: rgba(237, 247, 242, .68);
        font-size: .68rem;
    }

    .dashboard-sidebar-collapsed .nav-group .nav-children a:hover,
    .dashboard-sidebar-collapsed .nav-group .nav-children a:focus-visible,
    .dashboard-sidebar-collapsed .nav-group .nav-children a.active,
    .dashboard-sidebar-collapsed .nav-group .nav-children a[aria-current="page"] {
        color: #fff;
        background: rgba(200, 237, 112, .09);
        outline: none;
    }
}

@media (max-width: 900px) {
    .dashboard-collapse-button {
        display: none;
    }

    .sidebar-nav-advanced {
        flex: 1;
    }
}
/* Admin-managed subscription pricing */
.dash-plan-admin {
    margin-top: 24px;
}

.dash-plan-admin-intro {
    margin: -4px 0 22px;
    color: var(--dash-muted, #687268);
}

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

.dash-plan-editor {
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--dash-border, #dce4dc) 82%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--dash-card, #fff) 94%, #eef8ea);
}

.dash-plan-editor-head,
.dash-plan-editor-row,
.dash-plan-editor-checks {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-plan-editor-head {
    justify-content: space-between;
}

.dash-plan-editor-head > span {
    padding: 5px 9px;
    border-radius: 999px;
    background: #e8f6e1;
    color: #326d25;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dash-plan-editor > label,
.dash-plan-editor-row > label {
    display: grid;
    flex: 1;
    gap: 6px;
    min-width: 0;
}

.dash-plan-editor label > span {
    color: var(--dash-muted, #687268);
    font-size: 12px;
    font-weight: 700;
}

.dash-plan-editor input[type="text"],
.dash-plan-editor input[type="number"],
.dash-plan-editor textarea {
    width: 100%;
    border: 1px solid var(--dash-border, #dce4dc);
    border-radius: 11px;
    padding: 10px 11px;
    background: var(--dash-card, #fff);
    color: var(--dash-text, #162016);
    font: inherit;
    outline: none;
}

.dash-plan-editor input:focus,
.dash-plan-editor textarea:focus {
    border-color: #68bf45;
    box-shadow: 0 0 0 3px rgb(104 191 69 / 14%);
}

.dash-plan-editor-checks {
    flex-wrap: wrap;
    color: var(--dash-muted, #687268);
    font-size: 12px;
}

@media (max-width: 1100px) {
    .dash-plan-admin-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .dash-plan-editor-row {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Keep compact dashboard copy readable without changing heading hierarchy. */
.app-shell .brand-mark small,
.app-shell .sidebar-label,
.app-shell .sidebar-profile small,
.app-shell .topbar .eyebrow,
.app-shell .dashboard-grid .eyebrow,
.app-shell .dash-live-label,
.app-shell .dash-kicker,
.app-shell .dash-orbit-ring small,
.app-shell .dash-orbit-chip,
.app-shell .dash-metric-trend,
.app-shell .dash-metric-card > small,
.app-shell .dash-chart-summary span,
.app-shell .dash-bar-chart small,
.app-shell .dash-token-ring small,
.app-shell .dash-token-meta small,
.app-shell .dash-table th,
.app-shell .dash-table td small,
.app-shell .dash-order-status,
.app-shell .dash-inbox-list article > small,
.app-shell .dash-chart-labels,
.app-shell .dash-health-score span,
.app-shell .dash-health-list strong,
.app-shell .dash-payment-total small,
.app-shell .dashboard-notification-head small,
.app-shell .dashboard-notification-head button,
.app-shell .dashboard-notification-list small,
.app-shell .dashboard-notification-list time,
.app-shell .dashboard-notification-footer,
.app-shell .dashboard-account-copy small,
.app-shell .dashboard-account-summary small,
.app-shell .dashboard-account-links small,
.app-shell .dash-whatsapp-details small,
.app-shell .nav-group-toggle > b,
.app-shell .nav-children a > b {
    font-size: 0.68rem;
}

.app-shell .sidebar-profile strong,
.app-shell .dashboard-search input,
.app-shell .dashboard-notification-head strong,
.app-shell .dashboard-notification-list strong,
.app-shell .dashboard-account-copy strong,
.app-shell .dashboard-account-summary strong,
.app-shell .dashboard-account-links strong,
.app-shell .dash-button,
.app-shell .dash-filter-button,
.app-shell .dash-status-badge,
.app-shell .dash-count-badge,
.app-shell .dash-text-link,
.app-shell .dash-table td,
.app-shell .dash-table td strong,
.app-shell .dash-inbox-list strong,
.app-shell .dash-inbox-list p,
.app-shell .dash-health-list div,
.app-shell .dash-channel-list div,
.app-shell .dash-channel-list strong,
.app-shell .dash-whatsapp-steps span,
.app-shell .dash-whatsapp-action > small,
.app-shell .dash-meta-progress,
.app-shell .nav-children a {
    font-size: 0.76rem;
}

.app-shell .nav-group.is-active > .nav-group-toggle {
    color: #f4faed;
    background: rgba(200, 237, 112, 0.11);
    box-shadow: inset 3px 0 0 var(--dash-lime);
}

.app-shell .nav-group.is-active > .nav-group-toggle .nav-icon,
.app-shell .nav-group.is-open > .nav-group-toggle .nav-icon {
    border-color: rgba(200, 237, 112, 0.18);
    color: var(--dash-lime);
    background: rgba(200, 237, 112, 0.07);
}

.app-shell .nav-children a.active,
.app-shell .nav-children a[aria-current="page"] {
    color: #f4faed;
    background: rgba(200, 237, 112, 0.09);
}

.app-shell .dash-welcome-card p,
.app-shell .dash-admin-intro p,
.app-shell .dash-metric-card p {
    font-size: 0.84rem;
}

/* ---------- Vendor workspace pages ---------- */
.vendor-workspace-page {
    gap: 20px;
}

.vendor-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 2px 4px;
}

.vendor-page-head h1 {
    margin: 4px 0 0;
    font: 700 clamp(1.65rem, 3vw, 2.25rem) "Space Grotesk", sans-serif;
    letter-spacing: -0.045em;
}

.vendor-page-head p,
.vendor-section-copy {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--app-muted);
    font-size: 0.84rem;
    line-height: 1.6;
}

.vendor-record-count {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid rgba(111, 186, 59, .2);
    border-radius: 999px;
    color: #487d2b;
    background: rgba(111, 186, 59, .08);
    font-size: .74rem;
    font-weight: 750;
    text-transform: capitalize;
}

.vendor-conversation-layout {
    min-height: 620px;
    display: grid;
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
    gap: 18px;
}

.vendor-conversation-list,
.vendor-thread-panel {
    padding: 12px;
}

.vendor-conversation-list {
    align-content: start;
}

.vendor-conversation-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border-radius: 13px;
    color: var(--app-ink);
    transition: background 160ms ease, box-shadow 160ms ease;
}

.vendor-conversation-item:hover,
.vendor-conversation-item.is-active {
    background: rgba(111, 186, 59, .09);
    box-shadow: inset 3px 0 0 var(--dash-green);
}

.vendor-conversation-item strong,
.vendor-conversation-item small {
    display: block;
}

.vendor-conversation-item strong {
    font-size: .8rem;
}

.vendor-conversation-item small {
    max-width: 260px;
    overflow: hidden;
    margin-top: 4px;
    color: var(--app-muted);
    font-size: .7rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vendor-conversation-meta {
    max-width: 115px;
    text-align: right;
}

.vendor-conversation-meta b {
    display: inline-block;
    margin-top: 5px;
    padding: 4px 6px;
    border-radius: 999px;
    color: #8a5b00;
    background: rgba(244, 216, 87, .18);
    font-size: .62rem;
}

.vendor-thread-panel {
    display: flex;
    flex-direction: column;
}

.vendor-thread-panel > .dash-panel-head {
    padding: 10px 10px 16px;
    border-bottom: 1px solid var(--app-line);
}

.vendor-thread {
    display: grid;
    align-content: start;
    gap: 11px;
    padding: 20px 10px 10px;
}

.vendor-message {
    width: min(78%, 560px);
    padding: 11px 13px;
    border-radius: 15px;
}

.vendor-message p {
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
}

.vendor-message span,
.vendor-message small {
    display: block;
    font-size: .65rem;
}

.vendor-message span {
    margin-bottom: 5px;
    color: #4e842f;
    font-weight: 800;
}

.vendor-message small {
    margin-top: 6px;
    color: var(--app-muted);
}

.vendor-message.is-customer {
    justify-self: end;
    color: #fff;
    background: #173f2d;
    border-bottom-right-radius: 5px;
}

.vendor-message.is-customer small {
    color: rgba(255, 255, 255, .58);
}

.vendor-message.is-assistant {
    justify-self: start;
    background: #eff6e9;
    border-bottom-left-radius: 5px;
}

.vendor-empty-state {
    display: grid;
    place-content: center;
    min-height: 150px;
    padding: 24px;
    color: var(--app-muted);
    text-align: center;
}

.vendor-empty-state h3,
.vendor-empty-state p {
    margin: 0;
}

.vendor-empty-state h3 {
    color: var(--app-ink);
    font: 700 .95rem "Space Grotesk", sans-serif;
}

.vendor-empty-state p {
    margin-top: 6px;
    font-size: .76rem;
    line-height: 1.5;
}

.vendor-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.vendor-filter-bar input,
.vendor-filter-bar select,
.vendor-inline-form select {
    min-height: 39px;
    padding: 0 12px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    color: var(--app-ink);
    background: var(--app-surface);
    font: inherit;
    font-size: .76rem;
}

.vendor-filter-bar input {
    width: min(360px, 100%);
}

.vendor-filter-bar input:focus,
.vendor-filter-bar select:focus,
.vendor-form input:focus,
.vendor-form select:focus,
.vendor-form textarea:focus,
.vendor-knowledge-input:focus {
    border-color: var(--dash-green);
    box-shadow: 0 0 0 3px rgba(111, 186, 59, .13);
    outline: none;
}

.vendor-data-table {
    min-width: 780px;
}

.vendor-inline-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vendor-inline-form select {
    min-height: 32px;
    padding-inline: 8px;
}

.vendor-inline-form button,
.vendor-archive-form button {
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    color: #315b23;
    background: #e8f3dd;
    font: inherit;
    font-size: .68rem;
    font-weight: 750;
    cursor: pointer;
}

.vendor-meta-catalog {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(220px, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(8, 116, 79, .16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 0, rgba(174, 221, 68, .18), transparent 34%),
        linear-gradient(135deg, rgba(8, 116, 79, .075), rgba(255, 255, 255, .92) 52%);
}

.vendor-meta-catalog.is-connected { grid-template-columns: 48px minmax(210px, 1fr) auto; }
.vendor-meta-catalog-brand { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: #08744f; box-shadow: 0 10px 24px rgba(8, 116, 79, .2); }
.vendor-meta-catalog-copy h2 { margin: 3px 0 0; font: 700 1.05rem "Space Grotesk", sans-serif; letter-spacing: -.025em; }
.vendor-meta-catalog-copy p { max-width: 580px; margin: 5px 0 0; color: var(--app-muted); font-size: .7rem; line-height: 1.55; }
.vendor-meta-catalog-status { display: grid; justify-items: end; gap: 6px; }
.vendor-meta-catalog-status small { color: var(--app-muted); font-size: .57rem; }
.vendor-meta-catalog-status code { color: var(--app-ink); font: 700 .57rem "IBM Plex Mono", monospace; }
.vendor-meta-catalog-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; color: #08744f; background: rgba(8, 116, 79, .09); font-size: .58rem; font-weight: 800; text-transform: capitalize; }
.vendor-meta-catalog-pill i { width: 7px; height: 7px; border-radius: 50%; background: #39a773; box-shadow: 0 0 0 4px rgba(57, 167, 115, .12); }
.vendor-meta-catalog-pill.is-attention { color: #8a5b00; background: rgba(244, 216, 87, .18); }
.vendor-meta-catalog-pill.is-attention i { background: #d89b19; box-shadow: 0 0 0 4px rgba(216, 155, 25, .12); }
.vendor-meta-catalog-metrics { grid-column: 2 / 3; display: flex; gap: 8px; }
.vendor-meta-catalog-metrics > span { min-width: 82px; display: grid; gap: 1px; padding: 8px 10px; border: 1px solid rgba(8, 116, 79, .1); border-radius: 10px; background: rgba(255, 255, 255, .58); }
.vendor-meta-catalog-metrics strong { font: 750 .78rem "Space Grotesk", sans-serif; }
.vendor-meta-catalog-metrics small { color: var(--app-muted); font-size: .53rem; }
.vendor-meta-catalog-metrics .has-error strong { color: #b5473d; }
.vendor-meta-catalog-actions { grid-column: 3; display: flex; align-items: center; gap: 7px; }
.vendor-meta-catalog-connect { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(190px, .7fr) minmax(300px, 1.3fr); align-items: end; gap: 14px; }
.vendor-meta-catalog-field-copy { display: grid; justify-items: start; gap: 4px; color: var(--app-ink); font-size: .66rem; font-weight: 750; }
.vendor-meta-catalog-field-head { display: flex; align-items: baseline; gap: 9px; }
.vendor-meta-catalog-field-copy small { color: var(--app-muted); font-size: .65rem; font-weight: 500; }
.vendor-meta-catalog-field-copy button { padding: 0; border: 0; color: #08744f; background: transparent; font: inherit; font-size: .58rem; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(8, 116, 79, .32); text-underline-offset: 3px; }
.vendor-meta-catalog-field-copy button:hover,
.vendor-meta-catalog-field-copy button:focus-visible { color: #045d3f; text-decoration-color: currentColor; outline: none; }
.vendor-meta-catalog-connect-actions { display: flex; gap: 8px; }
.vendor-meta-catalog-connect input { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 10px; color: var(--app-ink); background: var(--app-surface); font: 600 .7rem "IBM Plex Mono", monospace; }
.vendor-meta-catalog-connect input:focus { border-color: var(--dash-green); box-shadow: 0 0 0 3px rgba(111, 186, 59, .13); outline: none; }
.vendor-meta-catalog-error,
.vendor-product-sync-error { display: flex; gap: 8px; padding: 10px 12px; border: 1px solid rgba(197, 79, 67, .16); border-radius: 10px; color: #8e3d36; background: rgba(197, 79, 67, .07); font-size: .62rem; line-height: 1.45; }
.vendor-meta-catalog-error { margin: -8px 0 18px; }
.vendor-product-sync-error { margin: 0 18px 12px; }
.vendor-product-sync-error strong { flex: 0 0 auto; }

.vendor-catalog-help-modal .vendor-password-panel { width: min(620px, calc(100vw - 28px)); }
.vendor-catalog-help-steps { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.vendor-catalog-help-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; align-items: start; padding: 11px; border: 1px solid var(--app-line); border-radius: 12px; background: rgba(8, 116, 79, .035); }
.vendor-catalog-help-steps li > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #08744f; background: rgba(8, 116, 79, .1); font: 750 .6rem "IBM Plex Mono", monospace; }
.vendor-catalog-help-steps strong { display: block; color: var(--app-ink); font-size: .7rem; }
.vendor-catalog-help-steps p { margin: 3px 0 0; color: var(--app-muted); font-size: .62rem; line-height: 1.5; }
.vendor-catalog-help-note { display: grid; gap: 3px; padding: 10px 12px; margin: 20px 0; border-left: 3px solid #d9a51d; border-radius: 5px 10px 10px 5px; color: #735510; background: rgba(229, 181, 52, .1); }
.vendor-catalog-help-note strong { font-size: .65rem; }
.vendor-catalog-help-note span { font-size: .59rem; line-height: 1.45; }
.vendor-catalog-help-actions { flex-wrap: wrap; }
.vendor-catalog-help-actions a { text-decoration: none; }

.vendor-catalog-layout {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 18px;
}

.vendor-form-panel {
    position: sticky;
    top: 104px;
}

.vendor-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.vendor-form label {
    display: grid;
    align-content: start;
    gap: 7px;
}

.vendor-form label > span {
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 700;
}

.vendor-form label > small { color: var(--app-muted); font-size: .58rem; line-height: 1.45; }

.vendor-form .is-wide {
    grid-column: 1 / -1;
}

.vendor-form input,
.vendor-form select,
.vendor-form textarea,
.vendor-knowledge-input {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    color: var(--app-ink);
    background: var(--app-surface);
    font: inherit;
    font-size: .78rem;
    resize: vertical;
}

.vendor-check {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.vendor-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--dash-green);
}

.vendor-product-list {
    display: grid;
    gap: 8px;
}

.vendor-product-row {
    border: 1px solid var(--app-line);
    border-radius: 13px;
    background: var(--app-surface);
}

.vendor-product-row summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    list-style: none;
}

.vendor-product-row summary::-webkit-details-marker {
    display: none;
}

.vendor-product-row summary strong,
.vendor-product-row summary small {
    display: block;
}

.vendor-product-row summary strong {
    font-size: .77rem;
}

.vendor-product-row summary small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: .68rem;
}

.vendor-product-thumb {
    width: 42px;
    height: 42px;
    display: grid;
    overflow: hidden;
    place-items: center;
    border-radius: 11px;
    color: #315b23;
    background: #e4efd9;
    font-weight: 800;
}

.vendor-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vendor-product-state { display: grid; justify-items: end; gap: 4px; }
.vendor-product-state > b,
.vendor-product-state > em {
    padding: 5px 7px;
    border-radius: 999px;
    font-size: .65rem;
}

.vendor-product-state > b.is-live { color: #397221; background: #e8f5dd; }
.vendor-product-state > b.is-offline { color: #7a6251; background: #f2ece8; }
.vendor-product-state > em { padding-block: 3px; color: #6b786f; background: rgba(100, 118, 107, .08); font-size: .51rem; font-style: normal; white-space: nowrap; }
.vendor-product-state > em.is-submitted { color: #08744f; background: rgba(8, 116, 79, .08); }
.vendor-product-state > em.is-failed { color: #a33e36; background: rgba(197, 79, 67, .09); }

.vendor-edit-form {
    margin: 0;
    padding: 18px;
    border-top: 1px solid var(--app-line);
    background: rgba(244, 247, 245, .55);
}

.vendor-archive-form {
    padding: 0 18px 18px;
    background: rgba(244, 247, 245, .55);
}

.vendor-archive-form button {
    color: #a33e36;
    background: rgba(197, 79, 67, .09);
}

.vendor-settings-stack,
.vendor-settings-section {
    display: grid;
    gap: 18px;
}

.vendor-settings-section {
    scroll-margin-top: 110px;
}

.vendor-knowledge-input {
    min-height: 230px;
}

.vendor-form-actions {
    position: sticky;
    bottom: 16px;
    display: flex;
    justify-content: flex-end;
    padding: 12px;
    border: 1px solid var(--app-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 14px 30px rgba(16, 32, 25, .09);
    backdrop-filter: blur(12px);
}

.vendor-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.vendor-plan-card {
    padding: 20px;
    border: 1px solid var(--app-line);
    border-radius: 16px;
    background: var(--app-bg);
}

.vendor-plan-card.is-current {
    border-color: rgba(111, 186, 59, .45);
    background: linear-gradient(145deg, #f2f9e9, #fffdf4);
    box-shadow: inset 0 0 0 1px rgba(111, 186, 59, .14);
}

.vendor-plan-card > span,
.vendor-plan-card > small {
    color: var(--app-muted);
    font-size: .7rem;
    font-weight: 700;
}

.vendor-plan-card h3 {
    margin: 12px 0 6px;
    font: 700 1.25rem "Space Grotesk", sans-serif;
}

.vendor-plan-card p {
    margin: 0 0 14px;
    color: var(--app-muted);
    font-size: .76rem;
}

.vendor-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.vendor-security-row strong,
.vendor-security-row small {
    display: block;
}

.vendor-security-row strong { font-size: .82rem; }
.vendor-security-row small { margin-top: 5px; color: var(--app-muted); font-size: .72rem; }

.dashboard-notification-empty {
    padding: 28px 16px;
    color: var(--app-muted);
    font-size: .72rem;
    text-align: center;
}

html[data-theme="dark"] .vendor-message.is-assistant,
html[data-theme="dark"] .vendor-edit-form,
html[data-theme="dark"] .vendor-archive-form,
html[data-theme="dark"] .vendor-plan-card {
    background: #17261e;
}

html[data-theme="dark"] .vendor-form-actions {
    background: rgba(20, 34, 27, .9);
}

@media (max-width: 1080px) {
    .vendor-catalog-layout,
    .vendor-conversation-layout {
        grid-template-columns: 1fr;
    }

    .vendor-form-panel {
        position: static;
    }

    .vendor-meta-catalog.is-connected { grid-template-columns: 48px minmax(0, 1fr) auto; }
    .vendor-meta-catalog-metrics { grid-column: 2 / 4; }
    .vendor-meta-catalog-actions { grid-column: 2 / 4; }

    .vendor-conversation-layout {
        min-height: 0;
    }

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

@media (max-width: 650px) {
    .vendor-page-head,
    .vendor-security-row,
    .vendor-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .vendor-record-count {
        width: fit-content;
    }

    .vendor-form,
    .vendor-plan-grid {
        grid-template-columns: 1fr;
    }

    .vendor-form .is-wide {
        grid-column: auto;
    }

    .vendor-product-row summary {
        grid-template-columns: 42px minmax(0, 1fr) auto;
    }

    .vendor-product-row summary > span:nth-child(3) {
        display: none;
    }

    .vendor-meta-catalog,
    .vendor-meta-catalog.is-connected { grid-template-columns: 42px minmax(0, 1fr); padding: 15px; }
    .vendor-meta-catalog-brand { width: 42px; height: 42px; }
    .vendor-meta-catalog-status { grid-column: 1 / 3; justify-items: start; }
    .vendor-meta-catalog-metrics,
    .vendor-meta-catalog-actions,
    .vendor-meta-catalog-connect { grid-column: 1 / 3; }
    .vendor-meta-catalog-metrics { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
    .vendor-meta-catalog-metrics > span { min-width: 0; }
    .vendor-meta-catalog-actions { flex-wrap: wrap; }
    .vendor-meta-catalog-connect { grid-template-columns: 1fr; }
    .vendor-meta-catalog-connect-actions { align-items: stretch; flex-direction: column; }

    .vendor-message {
        width: 90%;
    }
}

/* WhatsApp disconnect confirmation */
.dashboard-modal-open {
    overflow: hidden;
}

.dash-confirm-modal[hidden] {
    display: none;
}

.dash-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 180ms ease;
}

.dash-confirm-modal.is-open {
    opacity: 1;
}

.dash-confirm-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(5, 16, 11, .78);
    cursor: default;
}

.dash-confirm-panel {
    position: relative;
    width: min(460px, 100%);
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .64);
    border-radius: 24px;
    color: var(--app-ink);
    background:
        radial-gradient(circle at 100% 0, rgba(239, 144, 119, .18), transparent 34%),
        var(--app-surface);
    box-shadow: 0 32px 90px rgba(4, 18, 11, .32);
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.dash-confirm-modal.is-open .dash-confirm-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dash-confirm-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    color: var(--app-muted);
    background: rgba(255, 255, 255, .68);
    font-size: 1.25rem;
    cursor: pointer;
}

.dash-confirm-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 17px;
    color: #b3463b;
    background: linear-gradient(145deg, #ffe5df, #fff2d8);
    box-shadow: 0 12px 26px rgba(179, 70, 59, .15);
}

.dash-confirm-panel h3 {
    margin: 7px 0 0;
    font: 700 1.35rem "Space Grotesk", sans-serif;
    letter-spacing: -.035em;
}

.dash-confirm-panel > p {
    margin: 10px 0 0;
    color: var(--app-muted);
    font-size: .8rem;
    line-height: 1.6;
}

.dash-confirm-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
    padding: 13px 14px;
    border: 1px solid var(--app-line);
    border-radius: 13px;
    background: var(--app-bg);
}

.dash-confirm-number span,
.dash-confirm-number strong {
    font-size: .76rem;
}

.dash-confirm-number span {
    color: var(--app-muted);
}

.dash-confirm-number strong {
    overflow-wrap: anywhere;
    text-align: right;
}

.dash-confirm-panel .dash-confirm-note {
    padding-left: 12px;
    border-left: 3px solid var(--dash-yellow);
    font-size: .72rem;
}

.dash-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
}

.dash-confirm-danger {
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #c95447, #a93931);
    box-shadow: 0 10px 22px rgba(169, 57, 49, .2);
}

.dash-confirm-danger:hover {
    background: linear-gradient(135deg, #b9473c, #942f29);
}

.dash-confirm-danger:disabled {
    cursor: not-allowed;
    opacity: .72;
}

html[data-theme="dark"] .dash-confirm-panel {
    border-color: rgba(255, 255, 255, .09);
    background:
        radial-gradient(circle at 100% 0, rgba(239, 144, 119, .13), transparent 34%),
        #14221b;
}

html[data-theme="dark"] .dash-confirm-close {
    background: #1d2d25;
}

.dash-subscription-modal .dash-confirm-panel {
    background:
        radial-gradient(circle at 100% 0, rgba(85, 211, 150, .2), transparent 36%),
        var(--app-surface);
}

.dash-subscription-icon {
    color: #087a50;
    background: linear-gradient(145deg, #dff8e8, #b9ebce);
    box-shadow: 0 12px 26px rgba(8, 122, 80, .16);
}

.dash-subscription-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 14px;
    border: 1px solid rgba(14, 138, 95, .2);
    border-radius: 14px;
    background: rgba(14, 138, 95, .07);
}

.dash-subscription-summary-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #0e8a5f, #17ad76);
}

.dash-subscription-summary > span:last-child {
    display: grid;
    gap: 3px;
}

.dash-subscription-summary strong {
    font-size: .78rem;
}

.dash-subscription-summary small {
    color: var(--app-muted);
    font-size: .7rem;
}

.dash-subscription-action {
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0e8a5f, #13a66f);
    box-shadow: 0 10px 22px rgba(14, 138, 95, .2);
}

.dash-subscription-action:hover {
    color: #fff;
    background: linear-gradient(135deg, #0b7953, #0e8a5f);
}

html[data-theme="dark"] .dash-subscription-modal .dash-confirm-panel {
    border-color: rgba(255, 255, 255, .09);
    background:
        radial-gradient(circle at 100% 0, rgba(85, 211, 150, .14), transparent 36%),
        #14221b;
}

/* ---------- Cookie preferences ---------- */

.cookie-notice {
    position: fixed;
    inset: auto auto 24px 24px;
    z-index: 500;
    width: min(100% - 48px, 580px);
    opacity: 0;
    transform: translateY(22px) scale(.98);
    transition: opacity 220ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.cookie-notice.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cookie-notice-card {
    position: relative;
    overflow: hidden;
    padding: 24px 26px 20px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 24px;
    color: #eaf5ef;
    background:
        radial-gradient(circle at 90% 5%, rgba(112, 225, 170, .2), transparent 30%),
        linear-gradient(135deg, #10261d, #0a1712);
    box-shadow: 0 26px 70px rgba(3, 16, 10, .36);
}

.cookie-notice-card::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -65px;
    bottom: -90px;
    border: 1px solid rgba(112, 225, 170, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(112, 225, 170, .04), 0 0 0 53px rgba(112, 225, 170, .025);
}

.cookie-notice-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 13px;
    color: #083424;
    background: linear-gradient(135deg, #b9f0c9, #69dca7);
    box-shadow: 0 10px 24px rgba(77, 216, 155, .2);
}

.cookie-notice-icon svg {
    width: 22px;
    height: 22px;
}

.cookie-notice-copy,
.cookie-notice-actions,
.cookie-notice-footnote,
.cookie-notice-preferences {
    position: relative;
    z-index: 1;
}

.cookie-notice-label {
    margin: 0 0 6px;
    color: #83dfae;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cookie-notice h2 {
    margin: 0;
    color: #ffffff;
    font: 700 clamp(1.22rem, 2.8vw, 1.5rem) "Space Grotesk", sans-serif;
    letter-spacing: -.04em;
}

.cookie-notice-copy > p:not(.cookie-notice-label) {
    max-width: 54ch;
    margin: 9px 0 0;
    color: rgba(234, 245, 239, .74);
    font-size: .78rem;
    line-height: 1.62;
}

.cookie-notice-link {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    color: #9ae9bb;
    background: transparent;
    font: 700 .72rem "Instrument Sans", sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.cookie-notice-preferences {
    display: grid;
    gap: 9px;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid rgba(207, 245, 220, .13);
    border-radius: 15px;
    background: rgba(255, 255, 255, .06);
}

.cookie-preference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cookie-preference-row strong,
.cookie-preference-row span {
    display: block;
}

.cookie-preference-row strong {
    font-size: .73rem;
}

.cookie-preference-row span {
    margin-top: 3px;
    color: rgba(234, 245, 239, .64);
    font-size: .67rem;
    line-height: 1.45;
}

.cookie-preference-required {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 5px 7px;
    border-radius: 999px;
    color: #9ae9bb !important;
    background: rgba(92, 220, 160, .13);
    font-size: .61rem !important;
    font-weight: 800;
    text-transform: uppercase;
}

.cookie-preference-choice {
    position: relative;
    padding-top: 10px;
    border-top: 1px solid rgba(207, 245, 220, .1);
    cursor: pointer;
}

.cookie-preference-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cookie-preference-choice i {
    width: 36px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(234, 245, 239, .22);
    transition: background 180ms ease;
}

.cookie-preference-choice i::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    margin: 3px;
    border-radius: 50%;
    background: #f7fcf9;
    transition: transform 180ms ease;
}

.cookie-preference-choice input:checked + i {
    background: #54cc92;
}

.cookie-preference-choice input:checked + i::after {
    transform: translateX(16px);
}

.cookie-preference-choice input:focus-visible + i,
.cookie-notice button:focus-visible,
.cookie-notice a:focus-visible,
.cookie-settings-button:focus-visible {
    outline: 2px solid #c6f7d7;
    outline-offset: 3px;
}

.cookie-notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.cookie-action {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 10px;
    font: 800 .7rem "Instrument Sans", sans-serif;
    cursor: pointer;
}

.cookie-action-secondary {
    border: 1px solid rgba(234, 245, 239, .2);
    color: #eaf5ef;
    background: rgba(255, 255, 255, .04);
}

.cookie-action-quiet {
    border: 1px solid rgba(154, 233, 187, .38);
    color: #a9edc4;
    background: transparent;
}

.cookie-action-primary {
    border: 1px solid #75e0af;
    color: #082518;
    background: linear-gradient(135deg, #b9f0c9, #69dca7);
    box-shadow: 0 8px 20px rgba(77, 216, 155, .17);
}

.cookie-notice-footnote {
    margin: 13px 0 0;
    color: rgba(234, 245, 239, .52);
    font-size: .64rem;
}

.cookie-notice-footnote a {
    color: #a9edc4;
}

.cookie-settings-button {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 490;
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--app-line, rgba(14, 21, 18, .14));
    border-radius: 50%;
    color: var(--app-ink, #0e1512);
    background: color-mix(in srgb, var(--app-surface, #fff) 88%, transparent);
    box-shadow: 0 8px 24px rgba(4, 18, 11, .12);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.cookie-settings-button[hidden] {
    display: none;
}

.cookie-settings-button svg {
    width: 21px;
    height: 21px;
}

.cookie-settings-button:hover {
    color: var(--app-accent, #0e8a5f);
    border-color: color-mix(in srgb, var(--app-accent, #0e8a5f) 42%, transparent);
    box-shadow: 0 10px 28px rgba(4, 18, 11, .16);
    transform: translateY(-2px);
}

html[data-theme="dark"] .cookie-settings-button,
.lp-page[data-theme="dark"] ~ .cookie-settings-button {
    color: #eaf5ef;
    background: rgba(15, 31, 23, .88);
    border-color: rgba(234, 245, 239, .15);
}

@media (max-width: 520px) {
    .dash-confirm-panel {
        padding: 25px 20px 20px;
        border-radius: 20px;
    }

    .dash-confirm-actions {
        grid-template-columns: 1fr;
    }

    .dash-confirm-actions .dash-button {
        width: 100%;
    }

    .cookie-notice {
        inset: auto 12px 12px;
        width: auto;
    }

    .cookie-notice-card {
        padding: 20px 18px 17px;
        border-radius: 20px;
    }

    .cookie-notice-actions .cookie-action {
        flex: 1 1 auto;
    }

    .cookie-settings-button {
        left: 12px;
        bottom: 12px;
    }
}


/* ---------- Clean landing-inspired dashboard theme ---------- */

.app-shell {
    --app-bg: #fbfdfc;
    --app-surface: #ffffff;
    --app-ink: #0e1512;
    --app-muted: #566259;
    --app-line: rgba(14, 21, 18, .11);
    --app-green: #0e8a5f;
    --dash-green: #0e8a5f;
    --dash-green-dark: #0a6a48;
    --dash-lime: #bdeccc;
    --dash-yellow: #f5d76e;
    background:
        radial-gradient(circle at 8% 0, rgba(14, 138, 95, .08), transparent 34%),
        var(--app-bg);
}

.app-shell .dashboard-frame {
    grid-template-columns: 248px minmax(0, 1fr);
}

.app-shell .sidebar {
    padding: 22px 16px;
    color: var(--app-ink);
    border-right: 1px solid var(--app-line);
    background: rgba(251, 253, 252, .97);
    box-shadow: none;
}

.app-shell .sidebar .auth-brand-mark {
    color: #fff;
    background: var(--app-green);
    box-shadow: none;
}

.app-shell .sidebar .auth-brand > span:last-child,
.app-shell .sidebar-brand-name,
.app-shell .sidebar-profile strong {
    color: var(--app-ink);
}

.app-shell .sidebar-label {
    margin-left: 10px;
    color: #87918b;
    font-size: .61rem;
    letter-spacing: .1em;
}

.app-shell .sidebar-nav {
    gap: 3px;
    margin-top: 30px;
}

.app-shell .nav-link,
.app-shell .nav-group-toggle {
    min-height: 42px;
    padding: 8px 10px;
    color: #647068;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .78rem;
    font-weight: 600;
}

.app-shell .nav-link:hover,
.app-shell .nav-group-toggle:hover,
.app-shell .nav-group.is-open > .nav-group-toggle {
    color: var(--app-ink);
    background: #f1f6f3;
}

.app-shell .nav-link.active,
.app-shell .nav-group.is-active > .nav-group-toggle {
    color: #fff;
    border-color: #0e8a5f;
    background: #0e8a5f;
    box-shadow: none;
}

.app-shell .nav-icon,
.app-shell .sidebar-nav-advanced .nav-icon {
    width: 27px;
    height: 27px;
    color: #7d8981;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

.app-shell .nav-link.active .nav-icon,
.app-shell .nav-group.is-active > .nav-group-toggle .nav-icon {
    color: #fff;
    border: 0;
    background: rgba(255, 255, 255, .12);
}

.app-shell .nav-group.is-open:not(.is-active) > .nav-group-toggle .nav-icon {
    color: #0e8a5f;
    border: 0;
    background: rgba(14, 138, 95, .09);
}

.app-shell .nav-chevron,
.app-shell .nav-group.is-active .nav-chevron {
    color: #9aa39d;
}

.app-shell .nav-children {
    margin-left: 22px;
    padding-left: 19px;
}

.app-shell .nav-children::before {
    background: rgba(14, 21, 18, .1);
}

.app-shell .nav-children a,
.app-shell .nav-children a:hover {
    color: #78837c;
    background: transparent;
}

.app-shell .nav-children a.active,
.app-shell .nav-children a[aria-current="page"] {
    color: #fff !important;
    background: #0e8a5f;
    box-shadow: none;
}

.app-shell .nav-group.is-active > .nav-group-toggle .nav-chevron {
    color: #fff;
}

.app-shell .sidebar-profile {
    padding: 14px 5px 0;
    border-color: var(--app-line);
}

.app-shell .sidebar-profile-avatar {
    color: #0a6a48;
    background: #e5f4eb;
}

.app-shell .sidebar-profile small,
.app-shell .sidebar-profile button {
    color: #7f8a83;
}

.app-shell .sidebar-close {
    color: var(--app-ink);
}

.app-shell .topbar {
    min-height: 74px;
    padding: 12px clamp(20px, 3vw, 38px);
    border-bottom: 1px solid var(--app-line);
    background: rgba(251, 253, 252, .94);
    backdrop-filter: none;
    box-shadow: none;
}

.app-shell .dashboard-icon-button,
.app-shell .dashboard-collapse-button,
.app-shell .dashboard-menu-button,
.app-shell .dashboard-account-trigger,
.app-shell .dashboard-search input,
.app-shell .dash-filter-button {
    border-color: var(--app-line);
    color: var(--app-muted);
    background: #fff;
    box-shadow: none;
}

.app-shell .dashboard-icon-button:hover,
.app-shell .dashboard-collapse-button:hover,
.app-shell .dashboard-account-trigger:hover,
.app-shell .dashboard-account-trigger:focus-visible,
.app-shell .dashboard-account.is-open .dashboard-account-trigger {
    color: #0a6a48;
    border-color: rgba(14, 138, 95, .24);
    background: #f5faf7;
}

.app-shell .dashboard-account-icon {
    color: #0a6a48;
    background: #e8f5ed;
}

.app-shell .dashboard-account-menu,
.app-shell .dashboard-notification-menu {
    border-color: var(--app-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(14, 21, 18, .11);
}

.app-shell .dashboard-content {
    max-width: 1440px;
    padding: 34px clamp(22px, 3.5vw, 48px) 54px;
}

.app-shell .dash-page,
.app-shell .vendor-workspace-page {
    gap: 20px;
}

.app-shell .vendor-page-head {
    padding: 3px 2px 10px;
}

.app-shell .vendor-page-head h1 {
    font-family: "Instrument Sans", sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.035em;
}

.app-shell .dash-welcome-card,
.app-shell .dash-admin-intro {
    min-height: auto;
    padding: clamp(25px, 3.5vw, 38px);
    color: var(--app-ink);
    border: 1px solid var(--app-line);
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 5%, rgba(14, 138, 95, .1), transparent 33%),
        #fff;
    box-shadow: none;
}

.app-shell .dash-welcome-card::after {
    display: none;
}

.app-shell .dash-live-label,
.app-shell .dash-admin-intro .dash-live-label {
    color: #0a6a48;
    border-color: rgba(14, 138, 95, .14);
    background: rgba(14, 138, 95, .07);
}

.app-shell .dash-live-label i {
    background: #0e8a5f;
    box-shadow: 0 0 0 4px rgba(14, 138, 95, .09);
}

.app-shell .dash-welcome-copy .dash-page-greeting,
.app-shell .dash-admin-intro .dash-page-greeting {
    color: #0e8a5f;
}

.app-shell .dash-welcome-card h2,
.app-shell .dash-admin-intro h2 {
    max-width: 21ch;
    color: var(--app-ink);
    font-family: "Instrument Sans", sans-serif;
    font-size: clamp(1.55rem, 2.7vw, 2.15rem);
    font-weight: 700;
}

.app-shell .dash-welcome-card p,
.app-shell .dash-admin-intro p {
    color: var(--app-muted);
}

.app-shell .dash-button-light,
.app-shell .dash-button-dark,
.app-shell .dashboard-primary-action {
    color: #fff;
    background: #0e8a5f;
    box-shadow: none;
}

.app-shell .dash-button-quiet {
    color: #0a6a48;
    border-color: rgba(14, 138, 95, .18);
    background: rgba(14, 138, 95, .06);
}

.app-shell .dash-button-outline {
    color: var(--app-ink);
    border-color: var(--app-line);
    background: #fff;
}

.app-shell .dash-assistant-orbit {
    min-height: 170px;
}

.app-shell .dash-orbit-ring {
    color: #0a6a48;
    border-color: rgba(14, 138, 95, .16);
    box-shadow: inset 0 0 0 16px rgba(14, 138, 95, .035), 0 0 0 22px rgba(14, 138, 95, .025);
}

.app-shell .dash-orbit-ring small {
    color: var(--app-muted);
}

.app-shell .dash-orbit-chip {
    color: #496057;
    border-color: var(--app-line);
    background: #fff;
    backdrop-filter: none;
}

.app-shell .dash-metric-card,
.app-shell .dash-panel,
.app-shell .dash-plan-editor,
.app-shell .vendor-product-row,
.app-shell .vendor-plan-card {
    border-color: var(--app-line);
    background: #fff;
    box-shadow: none;
}

.app-shell .dash-metric-card,
.app-shell .dash-panel {
    border-radius: 17px;
}

.app-shell .dash-metric-card {
    padding: 20px;
}

.app-shell .dash-metric-icon {
    color: #0a6a48;
    background: #e8f5ed;
}

.app-shell .dash-metric-trend,
.app-shell .dash-metric-trend.is-positive,
.app-shell .dash-kicker,
.app-shell .dash-text-link,
.app-shell .dash-chart-summary span {
    color: #0e8a5f;
}

.app-shell .dash-panel h3,
.app-shell .dash-metric-card > strong,
.app-shell .dash-chart-summary strong,
.app-shell .vendor-empty-state h3,
.app-shell .vendor-plan-card h3 {
    font-family: "Instrument Sans", sans-serif;
}

.app-shell .dash-status-badge,
.app-shell .dash-count-badge,
.app-shell .vendor-record-count {
    color: #0a6a48;
    border-color: rgba(14, 138, 95, .14);
    background: #eaf6ef;
}

.app-shell .dash-token-meta span,
.app-shell .vendor-plan-card,
.app-shell .vendor-edit-form,
.app-shell .vendor-archive-form {
    background: #f5f8f6;
}

.app-shell .vendor-plan-card.is-current {
    border-color: rgba(14, 138, 95, .35);
    background: #f2faf5;
    box-shadow: none;
}

.app-shell .vendor-conversation-item:hover,
.app-shell .vendor-conversation-item.is-active {
    background: rgba(14, 138, 95, .07);
    box-shadow: none;
}

.app-shell .vendor-message.is-customer {
    background: #0e8a5f;
}

.app-shell .vendor-message.is-assistant {
    color: var(--app-ink);
    background: #f0f6f2;
}

.app-shell .vendor-form input,
.app-shell .vendor-form select,
.app-shell .vendor-form textarea,
.app-shell .vendor-knowledge-input,
.app-shell .vendor-filter-bar input,
.app-shell .vendor-filter-bar select,
.app-shell .vendor-inline-form select,
.app-shell .dash-plan-editor input[type="text"],
.app-shell .dash-plan-editor input[type="number"],
.app-shell .dash-plan-editor textarea {
    border-color: var(--app-line);
    background: #fff;
    box-shadow: none;
}

.app-shell .vendor-form-actions {
    border-color: var(--app-line);
    background: #fff;
    box-shadow: 0 10px 28px rgba(14, 21, 18, .07);
    backdrop-filter: none;
}

.app-shell .dash-whatsapp-connect {
    margin-bottom: 2px;
    border-color: var(--app-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: none;
}

.app-shell .dash-whatsapp-glow {
    opacity: .55;
    background: rgba(14, 138, 95, .12);
    filter: none;
}

.app-shell .dash-meta-button {
    background: #1877f2;
    box-shadow: none;
}

.app-shell .dashboard-footer {
    border-color: var(--app-line);
    background: transparent;
}

.app-shell .dash-confirm-panel {
    border-color: var(--app-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(14, 21, 18, .18);
}

html[data-theme="dark"] .app-shell {
    --app-bg: #091218;
    --app-surface: #0f1c24;
    --app-ink: #edf6f3;
    --app-muted: #9bb0ad;
    --app-line: rgba(237, 246, 243, .12);
    background:
        radial-gradient(circle at 8% 0, rgba(14, 138, 95, .12), transparent 34%),
        var(--app-bg);
}

html[data-theme="dark"] .app-shell .sidebar,
html[data-theme="dark"] .app-shell .topbar {
    color: var(--app-ink);
    border-color: var(--app-line);
    background: rgba(9, 18, 24, .97);
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .sidebar .auth-brand > span:last-child,
html[data-theme="dark"] .app-shell .sidebar-brand-name,
html[data-theme="dark"] .app-shell .sidebar-profile strong {
    color: var(--app-ink);
}

html[data-theme="dark"] .app-shell .nav-link,
html[data-theme="dark"] .app-shell .nav-group-toggle,
html[data-theme="dark"] .app-shell .nav-children a {
    color: var(--app-muted);
}

html[data-theme="dark"] .app-shell .nav-link:hover,
html[data-theme="dark"] .app-shell .nav-group-toggle:hover,
html[data-theme="dark"] .app-shell .nav-group.is-open > .nav-group-toggle {
    color: var(--app-ink);
    background: rgba(255, 255, 255, .045);
}

html[data-theme="dark"] .app-shell .nav-link.active,
html[data-theme="dark"] .app-shell .nav-group.is-active > .nav-group-toggle {
    color: #fff;
    border-color: #0e8a5f;
    background: #0e8a5f;
}

html[data-theme="dark"] .app-shell .dashboard-icon-button,
html[data-theme="dark"] .app-shell .dashboard-collapse-button,
html[data-theme="dark"] .app-shell .dashboard-menu-button,
html[data-theme="dark"] .app-shell .dashboard-account-trigger,
html[data-theme="dark"] .app-shell .dashboard-search input,
html[data-theme="dark"] .app-shell .dashboard-search-panel,
html[data-theme="dark"] .app-shell .dash-filter-button,
html[data-theme="dark"] .app-shell .dashboard-account-menu,
html[data-theme="dark"] .app-shell .dashboard-notification-menu,
html[data-theme="dark"] .app-shell .dash-metric-card,
html[data-theme="dark"] .app-shell .dash-panel,
html[data-theme="dark"] .app-shell .dash-plan-editor,
html[data-theme="dark"] .app-shell .vendor-product-row,
html[data-theme="dark"] .app-shell .vendor-form input,
html[data-theme="dark"] .app-shell .vendor-form select,
html[data-theme="dark"] .app-shell .vendor-form textarea,
html[data-theme="dark"] .app-shell .vendor-knowledge-input,
html[data-theme="dark"] .app-shell .vendor-filter-bar input,
html[data-theme="dark"] .app-shell .vendor-filter-bar select,
html[data-theme="dark"] .app-shell .dash-confirm-panel {
    color: var(--app-ink);
    border-color: var(--app-line);
    background: var(--app-surface);
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .vendor-meta-catalog {
    border-color: rgba(145, 214, 83, .14);
    background: radial-gradient(circle at 92% 0, rgba(145, 214, 83, .1), transparent 34%), #14221a;
}

html[data-theme="dark"] .app-shell .vendor-meta-catalog-metrics > span { background: rgba(255, 255, 255, .035); }
html[data-theme="dark"] .app-shell .vendor-meta-catalog-connect input { color: var(--app-ink); border-color: var(--app-line); background: var(--app-surface); }
html[data-theme="dark"] .app-shell .vendor-meta-catalog-field-copy button { color: #a7dc72; }
html[data-theme="dark"] .app-shell .vendor-catalog-help-steps li { background: rgba(145, 214, 83, .035); }
html[data-theme="dark"] .app-shell .vendor-catalog-help-note { color: #eed58e; background: rgba(229, 181, 52, .08); }

html[data-theme="dark"] .app-shell .dashboard-search-panel {
    background: rgba(20, 31, 25, .98);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] .app-shell .dashboard-search-panel-head,
html[data-theme="dark"] .app-shell .dashboard-search-panel-foot {
    border-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .app-shell .dashboard-search-result.is-active,
html[data-theme="dark"] .app-shell .dashboard-search-result:hover,
html[data-theme="dark"] .app-shell .dashboard-search-result:focus-visible {
    border-color: rgba(145, 214, 83, .18);
    background: linear-gradient(90deg, rgba(14, 138, 95, .2), rgba(145, 214, 83, .07));
}

html[data-theme="dark"] .app-shell .dash-welcome-card,
html[data-theme="dark"] .app-shell .dash-admin-intro,
html[data-theme="dark"] .app-shell .dash-whatsapp-connect {
    color: var(--app-ink);
    border-color: var(--app-line);
    background:
        radial-gradient(circle at 92% 5%, rgba(14, 138, 95, .12), transparent 33%),
        var(--app-surface);
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .dash-welcome-card h2,
html[data-theme="dark"] .app-shell .dash-admin-intro h2,
html[data-theme="dark"] .app-shell .dash-whatsapp-copy h3 {
    color: var(--app-ink);
}

html[data-theme="dark"] .app-shell .dash-welcome-card p,
html[data-theme="dark"] .app-shell .dash-admin-intro p,
html[data-theme="dark"] .app-shell .dash-whatsapp-copy > p {
    color: var(--app-muted);
}

html[data-theme="dark"] .app-shell .vendor-message.is-assistant,
html[data-theme="dark"] .app-shell .vendor-plan-card,
html[data-theme="dark"] .app-shell .vendor-edit-form,
html[data-theme="dark"] .app-shell .vendor-archive-form,
html[data-theme="dark"] .app-shell .dash-token-meta span {
    background: #132129;
}

@media (min-width: 901px) {
    .dashboard-sidebar-collapsed .dashboard-frame {
        grid-template-columns: 76px minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .app-shell .dashboard-frame {
        display: block;
    }

    .app-shell .sidebar {
        inset: 0 auto 0 0;
        z-index: 160;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: max(14px, env(safe-area-inset-bottom));
        overflow: hidden;
        background: #fbfdfc;
        box-shadow: 18px 0 50px rgba(14, 21, 18, .14);
        overscroll-behavior: contain;
    }

    html[data-theme="dark"] .app-shell .sidebar {
        background: #091218;
    }

    .app-shell .sidebar-head,
    .app-shell .sidebar-profile {
        flex: 0 0 auto;
    }

    .app-shell .sidebar-nav-advanced {
        flex: 1 1 auto;
        min-height: 0;
        padding-bottom: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .app-shell .sidebar-spacer {
        flex: 0 0 8px;
        min-height: 8px;
    }

    .app-shell .dashboard-scrim {
        z-index: 150;
        touch-action: none;
    }
}

@media (max-width: 640px) {
    .app-shell .dashboard-content {
        padding: 20px 14px 36px;
    }

    .app-shell .dash-welcome-card,
    .app-shell .dash-admin-intro,
    .app-shell .dash-whatsapp-connect {
        border-radius: 18px;
    }
}

/* Admin control center */
.admin-console {
    --admin-accent: #78c850;
    --admin-warm: #f4c84a;
    display: grid;
    gap: 22px;
}

.admin-page-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    padding: 29px 31px;
    border: 1px solid var(--app-line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 93% 16%, rgba(244, 200, 74, .22), transparent 23%),
        radial-gradient(circle at 72% 115%, rgba(120, 200, 80, .2), transparent 34%),
        var(--app-surface);
}

.admin-page-head::after {
    content: "";
    position: absolute;
    right: 7%;
    bottom: -58px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(120, 200, 80, .3);
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(120, 200, 80, .05), 0 0 0 42px rgba(244, 200, 74, .04);
    pointer-events: none;
}

.admin-page-head > * { position: relative; z-index: 1; }
.admin-page-head h2 { margin: 5px 0 7px; font: 700 clamp(1.65rem, 3vw, 2.35rem) "Space Grotesk", sans-serif; letter-spacing: -.055em; }
.admin-page-head p:last-child { max-width: 680px; margin: 0; color: var(--app-muted); font-size: .82rem; line-height: 1.65; }
.admin-metric-grid .dash-metric-card { position: relative; min-width: 0; overflow: hidden; }
.admin-metric-dot { position: absolute; top: 20px; right: 20px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 7px rgba(120, 200, 80, .1); }
.admin-metric-dot.is-green { background: var(--admin-accent); }
.admin-metric-dot.is-gold { background: var(--admin-warm); box-shadow: 0 0 0 7px rgba(244, 200, 74, .12); }
.admin-metric-dot.is-blue { background: #5ba8d8; box-shadow: 0 0 0 7px rgba(91, 168, 216, .11); }
.admin-metric-dot.is-coral { background: #e98770; box-shadow: 0 0 0 7px rgba(233, 135, 112, .11); }

.admin-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 20px; }
.admin-trend-list, .admin-pulse-list, .admin-ranked-list { display: grid; gap: 4px; margin-top: 15px; }
.admin-trend-list > div { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 13px; padding: 9px 0; font-size: .76rem; }
.admin-trend-list i { height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--admin-accent), var(--admin-warm)); opacity: .62; }
.admin-trend-list strong { min-width: 92px; text-align: right; }
.admin-pulse-list > div, .admin-ranked-list > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--app-line); font-size: .77rem; }
.admin-pulse-list > div:last-child, .admin-ranked-list > div:last-child { border-bottom: 0; }
.admin-pulse-list span, .admin-ranked-list small { color: var(--app-muted); }
.admin-ranked-list span { display: grid; gap: 4px; }
.admin-ranked-list > div > span:last-child { text-align: right; }

.admin-count-pill, .admin-status { display: inline-flex; align-items: center; width: max-content; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.admin-count-pill { padding: 8px 12px; border: 1px solid var(--app-line); background: var(--app-bg); color: var(--app-muted); font-size: .72rem; }
.admin-status { margin: 2px 0; padding: 5px 9px; font-size: .64rem; text-transform: capitalize; }
.admin-status.is-active { color: #347d2b; background: rgba(120, 200, 80, .15); }
.admin-status.is-warn { color: #8b6710; background: rgba(244, 200, 74, .19); }
.admin-status.is-danger { color: #a64237; background: rgba(233, 135, 112, .17); }
.admin-status.is-muted { color: var(--app-muted); background: var(--app-bg); }

.admin-filter-bar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px) auto auto; align-items: end; gap: 12px; padding: 16px; border: 1px solid var(--app-line); border-radius: 18px; background: var(--app-surface); }
.admin-filter-bar label { display: grid; gap: 7px; color: var(--app-muted); font-size: .68rem; font-weight: 700; }
.admin-filter-bar input, .admin-filter-bar select, .admin-inline-action select { min-height: 41px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 11px; outline: 0; color: var(--app-ink); background: var(--app-bg); font: 600 .74rem "Instrument Sans", sans-serif; }
.admin-filter-bar input:focus, .admin-filter-bar select:focus, .admin-inline-action select:focus { border-color: var(--admin-accent); box-shadow: 0 0 0 3px rgba(120, 200, 80, .11); }
.admin-table-panel { padding: 0; overflow: hidden; }
.admin-wide-table { min-width: 950px; }
.admin-table-primary, .admin-table-secondary { display: block; }
.admin-table-primary { color: var(--app-ink); font-size: .73rem; }
.admin-table-secondary { max-width: 210px; margin-top: 4px; overflow: hidden; color: var(--app-muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-error-copy { max-width: 240px; color: #a64237; }
.admin-inline-action { display: flex; align-items: center; gap: 7px; }
.admin-inline-action select { min-height: 34px; padding: 0 7px; font-size: .67rem; }
.admin-inline-action button, .admin-pagination a { min-height: 34px; padding: 0 11px; border: 0; border-radius: 9px; color: #fff; background: #17251d; font: 700 .67rem "Instrument Sans", sans-serif; cursor: pointer; }
.admin-empty { padding: 32px !important; color: var(--app-muted); text-align: center; }
.admin-pagination { display: flex; align-items: center; justify-content: space-between; color: var(--app-muted); font-size: .72rem; }
.admin-pagination div { display: flex; gap: 8px; }
.admin-pagination a { display: inline-flex; align-items: center; text-decoration: none; }

html[data-theme="dark"] .admin-page-head { background: radial-gradient(circle at 93% 16%, rgba(244, 200, 74, .1), transparent 23%), radial-gradient(circle at 72% 115%, rgba(120, 200, 80, .12), transparent 34%), var(--app-surface); }
html[data-theme="dark"] .admin-status.is-active { color: #a9e68a; }
html[data-theme="dark"] .admin-status.is-warn { color: #f3d16f; }
html[data-theme="dark"] .admin-status.is-danger { color: #f1a493; }

@media (max-width: 1080px) {
    .admin-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-split { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .admin-console { gap: 16px; }
    .admin-page-head { align-items: flex-start; flex-direction: column; padding: 23px 21px; border-radius: 20px; }
    .admin-filter-bar { grid-template-columns: 1fr 1fr; }
    .admin-search { grid-column: 1 / -1; }
    .admin-filter-bar .dash-button { width: 100%; }
}

@media (max-width: 520px) {
    .admin-metric-grid, .admin-filter-bar { grid-template-columns: 1fr; }
    .admin-search { grid-column: auto; }
    .admin-page-head .dash-button, .admin-page-head .admin-count-pill { width: 100%; justify-content: center; }
    .admin-pagination { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* Keep admin pages within the shared clean dashboard language. */
.app-shell .admin-console {
    --admin-accent: #0e8a5f;
    --admin-warm: #e6bd42;
    gap: 20px;
}

.app-shell .admin-page-head {
    padding: clamp(24px, 3.5vw, 36px);
    border-color: var(--app-line);
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 6%, rgba(14, 138, 95, .1), transparent 32%),
        var(--app-surface);
    box-shadow: none;
}

.app-shell .admin-page-head::after {
    display: none;
}

.app-shell .admin-page-head h2 {
    font-family: "Instrument Sans", sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.04em;
}

.app-shell .admin-filter-bar,
.app-shell .admin-table-panel {
    border-color: var(--app-line);
    background: var(--app-surface);
    box-shadow: none;
}

.app-shell .admin-filter-bar input,
.app-shell .admin-filter-bar select,
.app-shell .admin-inline-action select {
    color: var(--app-ink);
    border-color: var(--app-line);
    background: var(--app-surface);
}

.app-shell .admin-inline-action button,
.app-shell .admin-pagination a {
    background: #0e8a5f;
}

.app-shell .admin-metric-dot {
    background: #0e8a5f;
    box-shadow: 0 0 0 6px rgba(14, 138, 95, .08);
}

html[data-theme="dark"] .app-shell .admin-page-head {
    border-color: var(--app-line);
    background:
        radial-gradient(circle at 92% 6%, rgba(14, 138, 95, .12), transparent 32%),
        var(--app-surface);
}

/* Distinct vendor overview metric cards. */
.app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(1) {
    border-color: #b9ddc8;
    background: linear-gradient(145deg, #e4f4ea, #cfe9da);
}

.app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(2) {
    border-color: #dfcf9f;
    background: linear-gradient(145deg, #f8edcf, #efdfb5);
}

.app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(3) {
    border-color: #b8d2e2;
    background: linear-gradient(145deg, #e2eef6, #cfe2ee);
}

.app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(4) {
    border-color: #d3bedc;
    background: linear-gradient(145deg, #f0e3f4, #e1cee8);
}

.app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(1) .dash-metric-icon {
    color: #08724d;
    background: #d4eedf;
}

.app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(2) .dash-metric-icon {
    color: #8a6413;
    background: #f2e3b6;
}

.app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(3) .dash-metric-icon {
    color: #32698b;
    background: #d5e7f2;
}

.app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(4) .dash-metric-icon {
    color: #79518b;
    background: #e5d6eb;
}

.app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(2) .dash-metric-trend {
    color: #8a6413;
}

.app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(3) .dash-metric-trend {
    color: #32698b;
}

.app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(4) .dash-metric-trend {
    color: #79518b;
}

html[data-theme="dark"] .app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(1) {
    border-color: rgba(78, 183, 128, .22);
    background: #12261e;
}

html[data-theme="dark"] .app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(2) {
    border-color: rgba(218, 180, 84, .22);
    background: #282317;
}

html[data-theme="dark"] .app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(3) {
    border-color: rgba(92, 157, 198, .22);
    background: #14232c;
}

html[data-theme="dark"] .app-shell .dash-vendor-page > .dash-metric-grid .dash-metric-card:nth-child(4) {
    border-color: rgba(171, 116, 193, .22);
    background: #241c29;
}

/* Keep WhatsApp setup actions anchored when an inline error appears. */
@media (min-width: 981px) {
    .app-shell .dash-whatsapp-connect {
        grid-template-columns: 150px minmax(0, 1fr) 230px;
    }

    .app-shell .dash-whatsapp-action {
        grid-column: 3;
        width: 230px;
        min-width: 0;
        max-width: 230px;
        align-self: center;
        justify-self: end;
    }
}

.app-shell .dash-whatsapp-action > .auth-alert {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    overflow-wrap: anywhere;
    text-align: left;
}

@media (max-width: 640px) {
    .app-shell .dash-whatsapp-action {
        width: 100%;
        max-width: none;
    }
}

/* Theme-aware child flyout for the collapsed sidebar. */
@media (min-width: 901px) {
    .app-shell.dashboard-sidebar-collapsed .sidebar-nav-advanced > .nav-link {
        position: relative;
    }

    .app-shell.dashboard-sidebar-collapsed .sidebar-nav-advanced > .nav-link::after {
        content: attr(data-menu-label);
        position: absolute;
        top: 50%;
        left: calc(100% + 12px);
        z-index: 130;
        width: max-content;
        max-width: 220px;
        padding: 9px 12px;
        border: 1px solid rgba(14, 21, 18, .11);
        border-radius: 10px;
        color: #26332c;
        background: #fff;
        box-shadow: 0 12px 30px rgba(14, 21, 18, .14);
        font-size: .72rem;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-5px, -50%);
        transition: opacity 140ms ease, visibility 140ms ease, transform 160ms ease;
    }

    .app-shell.dashboard-sidebar-collapsed .sidebar-nav-advanced > .nav-link:hover::after,
    .app-shell.dashboard-sidebar-collapsed .sidebar-nav-advanced > .nav-link:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%);
    }

    html[data-theme="dark"] .app-shell.dashboard-sidebar-collapsed .sidebar-nav-advanced > .nav-link::after {
        color: #edf6f3;
        border-color: rgba(237, 246, 243, .12);
        background: #0f1c24;
        box-shadow: 0 14px 32px rgba(0, 0, 0, .34);
    }

    .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children {
        border-color: rgba(14, 21, 18, .11);
        background: #fff;
        box-shadow: 0 18px 42px rgba(14, 21, 18, .13);
    }

    .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children::before {
        color: #87918b;
    }

    .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children a {
        color: #566259;
    }

    .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children a:hover,
    .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children a:focus-visible {
        color: #0a6a48;
        background: #f1f6f3;
    }

    .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children a.active,
    .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children a[aria-current="page"] {
        color: #fff;
        background: #0e8a5f;
    }

    html[data-theme="dark"] .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children {
        border-color: rgba(237, 246, 243, .12);
        background: #0f1c24;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
    }

    html[data-theme="dark"] .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children::before {
        color: #839790;
    }

    html[data-theme="dark"] .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children a {
        color: #a5b7b1;
    }

    html[data-theme="dark"] .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children a:hover,
    html[data-theme="dark"] .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children a:focus-visible {
        color: #edf6f3;
        background: rgba(255, 255, 255, .055);
    }

    html[data-theme="dark"] .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children a.active,
    html[data-theme="dark"] .app-shell.dashboard-sidebar-collapsed .nav-group .nav-children a[aria-current="page"] {
        color: #fff;
        background: #0e8a5f;
    }
}

/* Professional vendor subscription workspace. */
.vendor-subscription-page { gap: 28px; }
.vendor-subscription-head { align-items: center; padding-bottom: 4px; }
.vendor-subscription-head h1 { max-width: 760px; }

.vendor-subscription-summary {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: clamp(24px, 4vw, 54px);
    padding: clamp(24px, 3.5vw, 36px);
    border: 1px solid var(--app-line);
    border-radius: 22px;
    background: radial-gradient(circle at 0 0, rgba(14, 138, 95, .11), transparent 34%), var(--app-surface);
}

.vendor-subscription-current { display: flex; align-items: center; gap: 16px; }
.vendor-subscription-icon { width: 52px; height: 52px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 16px; color: #fff; background: #0e8a5f; }
.vendor-subscription-current h2 { margin: 4px 0 5px; font: 700 1.35rem "Instrument Sans", sans-serif; letter-spacing: -.035em; }
.vendor-subscription-current p { margin: 0; color: var(--app-muted); font-size: .75rem; text-transform: capitalize; }

.vendor-subscription-usage { min-width: 0; padding: 20px; border: 1px solid var(--app-line); border-radius: 16px; background: color-mix(in srgb, var(--app-bg) 72%, var(--app-surface)); }
.vendor-subscription-usage-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.vendor-subscription-usage-head span, .vendor-subscription-usage-head strong, .vendor-subscription-usage-head small,
.vendor-subscription-usage-meta span, .vendor-subscription-usage-meta strong, .vendor-subscription-usage-meta small { display: block; }
.vendor-subscription-usage-head > strong { font-size: .78rem; white-space: nowrap; }
.vendor-subscription-usage-head span > strong { font-size: .78rem; }
.vendor-subscription-usage-head small, .vendor-subscription-usage-meta small { margin-top: 3px; color: var(--app-muted); font-size: .64rem; }
.vendor-subscription-progress { height: 8px; overflow: hidden; margin-top: 14px; border-radius: 999px; background: rgba(14, 138, 95, .1); }
.vendor-subscription-progress span { display: block; max-width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0e8a5f, #55c58e); }
.vendor-subscription-usage-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.vendor-subscription-usage-meta span { min-width: 0; padding-right: 12px; border-right: 1px solid var(--app-line); }
.vendor-subscription-usage-meta span:last-child { padding-right: 0; border-right: 0; }
.vendor-subscription-usage-meta strong { overflow-wrap: anywhere; margin-top: 4px; font-size: .72rem; }

.vendor-pricing-section, .vendor-comparison-section { display: grid; gap: 22px; }
.vendor-pricing-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; }
.vendor-pricing-heading h2, .vendor-comparison-heading h2 { margin: 4px 0 0; font: 700 clamp(1.35rem, 2.6vw, 1.8rem) "Instrument Sans", sans-serif; letter-spacing: -.04em; }
.vendor-pricing-heading p, .vendor-comparison-heading p { max-width: 650px; margin: 8px 0 0; color: var(--app-muted); font-size: .78rem; line-height: 1.6; }

.vendor-billing-switch { flex: 0 0 auto; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--app-line); border-radius: 999px; background: var(--app-surface); }
.vendor-billing-switch button { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 15px; border: 0; border-radius: 999px; color: var(--app-muted); background: transparent; font: 700 .7rem "Instrument Sans", sans-serif; cursor: pointer; }
.vendor-billing-switch button.is-active { color: #fff; background: #0e8a5f; }
.vendor-billing-switch button span { padding: 3px 6px; border-radius: 999px; color: #31510f; background: #d7efa0; font-size: .54rem; }

.vendor-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.vendor-pricing-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: clamp(22px, 2.8vw, 30px); border: 1px solid var(--app-line); border-radius: 22px; background: var(--app-surface); }
.vendor-pricing-card.is-featured { border-color: #173e2c; color: #fff; background: #123524; box-shadow: 0 20px 45px rgba(14, 53, 35, .16); }
.vendor-pricing-card.is-current { border-color: rgba(14, 138, 95, .48); box-shadow: inset 0 0 0 1px rgba(14, 138, 95, .12); }
.vendor-pricing-card.is-selected:not(.is-featured) { border-color: rgba(14, 138, 95, .35); background: #f4faf6; }
.vendor-pricing-card-top { min-height: 50px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vendor-pricing-plan-icon { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #0a6a48; background: #e5f4eb; }
.vendor-pricing-card.is-featured .vendor-pricing-plan-icon { color: #173e2c; background: #bdeccc; }

.vendor-plan-badge { width: fit-content; display: inline-flex; margin-bottom: 9px; padding: 4px 8px; border-radius: 999px; font-size: .56rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.vendor-plan-badge.is-current, .vendor-plan-badge.is-selected { color: #0a6a48; background: #dff2e6; }
.vendor-plan-badge.is-popular { color: #642e20; background: #ffb49f; }
.vendor-pricing-tier { margin: 0; color: var(--app-muted); font-size: .8rem; font-weight: 700; }
.vendor-pricing-card.is-featured .vendor-pricing-tier { color: rgba(255, 255, 255, .7); }

.vendor-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin: 18px 0 0; }
.vendor-plan-price > span { font: 700 clamp(1.8rem, 3vw, 2.25rem) "Instrument Sans", sans-serif; letter-spacing: -.055em; }
.vendor-plan-price del { color: var(--app-muted); font-size: .7rem; text-decoration-color: #e16f53; }
.vendor-plan-price small { color: var(--app-muted); font-size: .68rem; }
.vendor-pricing-card.is-featured .vendor-plan-price del, .vendor-pricing-card.is-featured .vendor-plan-price small { color: rgba(255, 255, 255, .55); }
.vendor-plan-token { margin: 4px 0 0; color: #0a6a48; font-size: .72rem; font-weight: 750; }
.vendor-pricing-card.is-featured .vendor-plan-token { color: #92dfb4; }
.vendor-plan-description { min-height: 58px; margin: 18px 0 0; color: var(--app-muted); font-size: .75rem; line-height: 1.55; }
.vendor-pricing-card.is-featured .vendor-plan-description { color: rgba(255, 255, 255, .65); }

.vendor-plan-features { flex: 1; display: grid; align-content: start; gap: 11px; margin: 21px 0 25px; padding: 20px 0 0; border-top: 1px solid var(--app-line); list-style: none; }
.vendor-pricing-card.is-featured .vendor-plan-features { border-color: rgba(255, 255, 255, .12); }
.vendor-plan-features li { display: flex; align-items: center; gap: 8px; color: var(--app-muted); font-size: .72rem; }
.vendor-pricing-card.is-featured .vendor-plan-features li { color: rgba(255, 255, 255, .75); }
.vendor-plan-features li > span { width: 20px; height: 20px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #0a6a48; background: #e5f4eb; font-size: .6rem; font-weight: 900; }
.vendor-pricing-card.is-featured .vendor-plan-features li > span { color: #173e2c; background: #92dfb4; }

.vendor-plan-action { min-height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--app-line); border-radius: 11px; color: var(--app-ink); background: var(--app-surface); font-size: .72rem; font-weight: 800; }
.vendor-plan-checkout-form { margin: 0; }
.vendor-plan-checkout-form .vendor-plan-action { width: 100%; font: inherit; font-size: .72rem; cursor: pointer; }
.vendor-plan-action:hover { color: #0a6a48; border-color: rgba(14, 138, 95, .3); background: #f3f9f5; }
.vendor-plan-action.is-primary { color: #173e2c; border-color: #bdeccc; background: #bdeccc; }
.vendor-plan-action.is-current { color: #0a6a48; border-color: rgba(14, 138, 95, .16); background: #e8f5ed; cursor: default; }
.vendor-pricing-note, .vendor-plan-empty { color: var(--app-muted); font-size: .7rem; line-height: 1.55; text-align: center; }
.vendor-pricing-note { margin: -4px 0 0; }
.vendor-plan-empty { grid-column: 1 / -1; padding: 30px; border: 1px dashed var(--app-line); border-radius: 18px; }

.vendor-comparison-heading { max-width: 650px; text-align: left; }
.vendor-comparison-scroll { overflow-x: auto; border: 1px solid var(--app-line); border-radius: 20px; background: var(--app-surface); scrollbar-color: var(--app-line) transparent; }
.vendor-comparison-scroll:focus-visible { outline: 2px solid #0e8a5f; outline-offset: 3px; }
.vendor-comparison-table { width: 100%; min-width: 760px; border-spacing: 0; color: var(--app-ink); font-size: .7rem; text-align: center; }
.vendor-comparison-table th, .vendor-comparison-table td { min-width: 150px; padding: 15px 18px; border-bottom: 1px solid var(--app-line); }
.vendor-comparison-table tr:last-child th, .vendor-comparison-table tr:last-child td { border-bottom: 0; }
.vendor-comparison-table tr > :first-child { position: sticky; left: 0; z-index: 2; width: 210px; min-width: 210px; color: var(--app-muted); background: var(--app-surface); text-align: left; }
.vendor-comparison-table thead th { padding-block: 20px; background: color-mix(in srgb, var(--app-bg) 78%, var(--app-surface)); }
.vendor-comparison-table thead th:first-child { z-index: 3; }
.vendor-comparison-table thead strong, .vendor-comparison-table thead small, .vendor-comparison-table td strong, .vendor-comparison-table td small { display: block; }
.vendor-comparison-table thead strong { font-size: .8rem; }
.vendor-comparison-table thead small { width: fit-content; margin: 5px auto 0; padding: 3px 7px; border-radius: 999px; color: #0a6a48; background: #dff2e6; font-size: .52rem; }
.vendor-comparison-table td small { margin-top: 3px; color: var(--app-muted); font-size: .56rem; }
.vendor-comparison-table .is-current { background: rgba(14, 138, 95, .055); }

.vendor-billing-help { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--app-line); border-radius: 18px; background: var(--app-surface); }
.vendor-billing-help-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #0a6a48; background: #e5f4eb; }
.vendor-billing-help > span:nth-child(2), .vendor-billing-help strong, .vendor-billing-help small { display: block; }
.vendor-billing-help strong { font-size: .78rem; }
.vendor-billing-help small { margin-top: 4px; color: var(--app-muted); font-size: .69rem; }

html[data-theme="dark"] .vendor-pricing-card, html[data-theme="dark"] .vendor-comparison-scroll, html[data-theme="dark"] .vendor-billing-help { background: var(--app-surface); }
html[data-theme="dark"] .vendor-pricing-card.is-featured { border-color: rgba(131, 212, 169, .25); background: #102d20; }
html[data-theme="dark"] .vendor-pricing-card.is-selected:not(.is-featured), html[data-theme="dark"] .vendor-plan-action.is-current { background: rgba(14, 138, 95, .13); }
html[data-theme="dark"] .vendor-comparison-table tr > :first-child { background: var(--app-surface); }
html[data-theme="dark"] .vendor-comparison-table thead th { background: #132129; }
html[data-theme="dark"] .vendor-comparison-table .is-current { background: rgba(14, 138, 95, .12); }

@media (max-width: 1080px) {
    .vendor-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vendor-pricing-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
    .vendor-subscription-summary { grid-template-columns: 1fr; }
    .vendor-pricing-heading { align-items: flex-start; flex-direction: column; }
    .vendor-billing-help { grid-template-columns: auto minmax(0, 1fr); }
    .vendor-billing-help .dash-button { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .vendor-subscription-page { gap: 22px; }
    .vendor-subscription-summary { padding: 20px; border-radius: 18px; }
    .vendor-subscription-current { align-items: flex-start; }
    .vendor-subscription-usage { padding: 16px; }
    .vendor-subscription-usage-head { align-items: flex-start; flex-direction: column; gap: 8px; }
    .vendor-subscription-usage-meta { grid-template-columns: 1fr; }
    .vendor-subscription-usage-meta span { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--app-line); }
    .vendor-subscription-usage-meta span:last-child { padding-bottom: 0; border-bottom: 0; }
    .vendor-pricing-grid { grid-template-columns: 1fr; }
    .vendor-pricing-card:last-child:nth-child(odd) { grid-column: auto; }
    .vendor-billing-switch { width: 100%; }
    .vendor-billing-switch button { flex: 1; justify-content: center; }
}

/* AI assistant studio */
.vendor-assistant-studio {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.vendor-assistant-head {
    align-items: flex-end;
}

.vendor-assistant-live-status,
.vendor-handover-status,
.vendor-knowledge-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 8px 10px;
    border-radius: 999px;
    color: #786a5e;
    background: #f1ede9;
    font-size: .64rem;
}

.vendor-assistant-live-status i,
.vendor-handover-status i,
.vendor-knowledge-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.vendor-assistant-live-status.is-live,
.vendor-handover-status.is-on,
.vendor-knowledge-status.is-ready {
    color: #08744f;
    background: #e4f4ec;
}

.vendor-assistant-form {
    display: block;
}

.vendor-assistant-layout {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    margin-top: 22px;
}

.vendor-assistant-nav {
    position: sticky;
    top: 98px;
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--app-line);
    border-radius: 18px;
    background: var(--app-surface);
}

.vendor-assistant-nav-intro {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 4px 4px 13px;
    border-bottom: 1px solid var(--app-line);
}

.vendor-assistant-orb {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: #0e8a5f;
}

.vendor-assistant-nav-intro strong,
.vendor-assistant-nav-intro small {
    display: block;
}

.vendor-assistant-nav-intro strong { color: var(--app-ink); font-size: .76rem; }
.vendor-assistant-nav-intro small { margin-top: 3px; color: var(--app-muted); font-size: .61rem; }

.vendor-assistant-nav nav {
    display: grid;
    gap: 4px;
}

.vendor-assistant-nav nav a {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 6px;
    align-items: center;
    gap: 9px;
    min-height: 56px;
    padding: 8px 10px;
    border-radius: 11px;
    color: var(--app-muted);
    text-decoration: none;
    transition: color .18s ease, background .18s ease;
}

.vendor-assistant-nav nav a:hover {
    color: var(--app-ink);
    background: var(--app-bg);
}

.vendor-assistant-nav nav a.is-active {
    color: #fff;
    background: #0e8a5f;
}

.vendor-assistant-tab-icon {
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: inherit;
    background: rgba(14, 138, 95, .08);
}

.vendor-assistant-tab-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
    margin: 0;
}

.vendor-assistant-nav nav a.is-active .vendor-assistant-tab-icon {
    background: rgba(255, 255, 255, .13);
}

.vendor-assistant-nav nav a span,
.vendor-assistant-nav nav a strong,
.vendor-assistant-nav nav a small {
    display: block;
}

.vendor-assistant-nav nav a strong { font-size: .7rem; }
.vendor-assistant-nav nav a small { margin-top: 2px; color: inherit; font-size: .59rem; opacity: .72; }
.vendor-assistant-nav nav a > i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.vendor-assistant-nav nav a.is-active > i { background: #fff; }

.vendor-assistant-health {
    display: grid;
    gap: 10px;
    padding: 13px;
    border-radius: 12px;
    background: #f4f7f5;
}

.vendor-assistant-health > span {
    color: var(--app-muted);
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vendor-assistant-health > div {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.vendor-assistant-health > div > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c5ccc8;
}

.vendor-assistant-health > div > i.is-ready { background: #0e8a5f; box-shadow: 0 0 0 3px rgba(14, 138, 95, .1); }
.vendor-assistant-health p,
.vendor-assistant-health strong,
.vendor-assistant-health small { display: block; margin: 0; }
.vendor-assistant-health strong { color: var(--app-ink); font-size: .62rem; }
.vendor-assistant-health small { margin-top: 2px; color: var(--app-muted); font-size: .57rem; }

.vendor-assistant-content {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.vendor-assistant-panel[hidden] {
    display: none;
}

.vendor-assistant-panel {
    padding: 25px;
    border: 1px solid var(--app-line);
    border-radius: 18px;
    background: var(--app-surface);
    outline: none;
}

.vendor-assistant-panel-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--app-line);
}

.vendor-assistant-panel-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.vendor-assistant-panel-icon.is-green { color: #08744f; background: #dff3e9; }
.vendor-assistant-panel-icon.is-blue { color: #3562a9; background: #e3ecfb; }
.vendor-assistant-panel-icon.is-violet { color: #6750a4; background: #ece6f8; }
.vendor-assistant-panel-icon.is-amber { color: #936515; background: #f8edcd; }

.vendor-assistant-panel-head h2,
.vendor-assistant-panel-head p {
    margin: 0;
}

.vendor-assistant-panel-head h2 {
    margin-top: 3px;
    color: var(--app-ink);
    font: 700 1.02rem "Space Grotesk", sans-serif;
}

.vendor-assistant-panel-head p {
    margin-top: 5px;
    color: var(--app-muted);
    font-size: .7rem;
    line-height: 1.5;
}

.vendor-assistant-switch-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 15px 16px;
    border: 1px solid var(--app-line);
    border-radius: 13px;
    background: #f8faf9;
    cursor: pointer;
}

.vendor-assistant-switch-row > span,
.vendor-assistant-switch-row strong,
.vendor-assistant-switch-row small { display: block; }
.vendor-assistant-switch-row strong { color: var(--app-ink); font-size: .72rem; }
.vendor-assistant-switch-row small { margin-top: 4px; color: var(--app-muted); font-size: .62rem; line-height: 1.45; }
.vendor-assistant-switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.vendor-assistant-switch-row > i { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #c6ceca; transition: background .2s ease; }
.vendor-assistant-switch-row > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .16); transition: transform .2s ease; }
.vendor-assistant-switch-row input:checked + i { background: #0e8a5f; }
.vendor-assistant-switch-row input:checked + i::after { transform: translateX(18px); }
.vendor-assistant-switch-row input:focus-visible + i { outline: 3px solid rgba(14, 138, 95, .2); outline-offset: 2px; }

.vendor-assistant-personality-grid,
.vendor-knowledge-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
    align-items: start;
    gap: 22px;
    padding-top: 22px;
}

.vendor-assistant-fields,
.vendor-handover-fields {
    display: grid;
    gap: 16px;
}

.vendor-assistant-fields label,
.vendor-handover-fields label {
    display: grid;
    gap: 7px;
}

.vendor-assistant-fields label > span,
.vendor-handover-fields label > span,
.vendor-knowledge-label > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--app-ink);
    font-size: .69rem;
    font-weight: 750;
}

.vendor-assistant-fields label > span b {
    color: var(--app-muted);
    font-size: .55rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.vendor-assistant-fields label > small,
.vendor-handover-fields label > small {
    color: var(--app-muted);
    font-size: .61rem;
    line-height: 1.4;
}

.vendor-assistant-fields input,
.vendor-assistant-fields select,
.vendor-assistant-fields textarea,
.vendor-handover-fields input,
.vendor-handover-fields textarea,
.vendor-assistant-knowledge-input {
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    color: var(--app-ink);
    background: #fff;
    box-shadow: 0 1px 2px rgba(14, 21, 18, .025);
    font: inherit;
    font-size: .74rem;
    line-height: 1.55;
    resize: vertical;
}

.vendor-assistant-fields input:focus,
.vendor-assistant-fields select:focus,
.vendor-assistant-fields textarea:focus,
.vendor-handover-fields input:focus,
.vendor-handover-fields textarea:focus,
.vendor-assistant-knowledge-input:focus {
    border-color: #0e8a5f;
    box-shadow: 0 0 0 3px rgba(14, 138, 95, .1);
    outline: none;
}

.vendor-assistant-preview {
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: 16px;
    background: #f4f7f5;
}

.vendor-assistant-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--app-line);
    color: var(--app-ink);
    background: #fff;
    font-size: .64rem;
    font-weight: 750;
}

.vendor-assistant-preview-head span { display: inline-flex; align-items: center; gap: 6px; }
.vendor-assistant-preview-head span i { width: 6px; height: 6px; border-radius: 50%; background: #0e8a5f; }
.vendor-assistant-preview-head small { color: var(--app-muted); font-size: .58rem; }
.vendor-assistant-preview-phone { margin: 14px; overflow: hidden; border: 1px solid rgba(14, 138, 95, .12); border-radius: 13px; background: #e9f1ec; }
.vendor-assistant-preview-contact { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; padding: 11px; color: #fff; background: #0d7452; }
.vendor-assistant-preview-contact > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #0d7452; background: #fff; font: 700 .75rem "Space Grotesk", sans-serif; }
.vendor-assistant-preview-contact strong,
.vendor-assistant-preview-contact small { display: block; }
.vendor-assistant-preview-contact strong { font-size: .67rem; }
.vendor-assistant-preview-contact small { margin-top: 2px; color: rgba(255, 255, 255, .7); font-size: .54rem; }
.vendor-assistant-preview-chat { min-height: 190px; display: grid; align-content: start; justify-items: start; gap: 10px; padding: 18px 13px; background: radial-gradient(circle at 10% 20%, rgba(14, 138, 95, .05) 0 1px, transparent 1px 100%), #eef4f0; background-size: 13px 13px; }
.vendor-assistant-preview-chat > small { justify-self: center; padding: 4px 7px; border-radius: 999px; color: #61706a; background: rgba(255, 255, 255, .7); font-size: .53rem; }
.vendor-assistant-preview-chat p { max-width: 88%; margin: 0; padding: 10px 11px; border-radius: 5px 12px 12px 12px; color: #26332c; background: #fff; box-shadow: 0 2px 8px rgba(14, 21, 18, .06); font-size: .66rem; line-height: 1.5; white-space: pre-wrap; }
.vendor-assistant-preview-chat > span { color: #68766f; font-size: .55rem; }
.vendor-assistant-preview-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 0 14px 14px; color: var(--app-muted); font-size: .59rem; line-height: 1.45; }
.vendor-assistant-preview-note svg { flex: none; margin-top: 1px; color: #0e8a5f; }

.vendor-knowledge-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.vendor-knowledge-label small { color: var(--app-muted); font-size: .6rem; }
.vendor-assistant-knowledge-input { min-height: 330px; }
.vendor-knowledge-starters { display: grid; gap: 8px; margin-top: 13px; }
.vendor-knowledge-starters > span { color: var(--app-muted); font-size: .6rem; font-weight: 750; }
.vendor-knowledge-starters > div { display: flex; flex-wrap: wrap; gap: 7px; }
.vendor-knowledge-starters button { padding: 7px 9px; border: 1px solid var(--app-line); border-radius: 999px; color: #08744f; background: var(--app-surface); font: 700 .61rem "Instrument Sans", sans-serif; cursor: pointer; }
.vendor-knowledge-starters button:hover { border-color: rgba(14, 138, 95, .3); background: #eff8f3; }

.vendor-knowledge-guide {
    padding: 18px;
    border: 1px solid var(--app-line);
    border-radius: 15px;
    background: #f7f9f8;
}

.vendor-knowledge-guide h3 { margin: 13px 0 0; color: var(--app-ink); font: 700 .85rem "Space Grotesk", sans-serif; }
.vendor-knowledge-guide ul { display: grid; gap: 14px; margin: 17px 0; padding: 0; list-style: none; }
.vendor-knowledge-guide li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; }
.vendor-knowledge-guide li > i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: #08744f; background: #e0f1e8; font-size: .6rem; font-style: normal; font-weight: 800; }
.vendor-knowledge-guide li strong,
.vendor-knowledge-guide li small { display: block; }
.vendor-knowledge-guide li strong { color: var(--app-ink); font-size: .65rem; }
.vendor-knowledge-guide li small { margin-top: 3px; color: var(--app-muted); font-size: .59rem; line-height: 1.45; }
.vendor-knowledge-guide > p { margin: 0; padding-top: 13px; border-top: 1px solid var(--app-line); color: var(--app-muted); font-size: .6rem; line-height: 1.5; }

.vendor-handover-fields {
    padding-top: 21px;
    transition: opacity .2s ease;
}

.vendor-handover-fields.is-inactive { opacity: .48; }
.vendor-handover-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 21px; padding: 15px; border: 1px solid var(--app-line); border-radius: 13px; background: #f7f9f8; }
.vendor-handover-flow > span { display: flex; align-items: center; gap: 8px; color: var(--app-ink); font-size: .62rem; }
.vendor-handover-flow > span i { width: 25px; height: 25px; display: grid; place-items: center; flex: none; border-radius: 8px; color: #08744f; background: #e1f2e9; font-style: normal; font-weight: 800; }
.vendor-handover-flow > svg { color: var(--app-muted); }

.vendor-assistant-savebar {
    position: sticky;
    bottom: 14px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 15px;
    border: 1px solid var(--app-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 30px rgba(14, 21, 18, .09);
}

.vendor-assistant-savebar > span { position: relative; display: grid; gap: 2px; padding-left: 17px; }
.vendor-assistant-savebar > span > i { position: absolute; top: 7px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #72ad93; }
.vendor-assistant-form.is-dirty .vendor-assistant-savebar > span > i { background: #e29a24; box-shadow: 0 0 0 4px rgba(226, 154, 36, .12); }
.vendor-assistant-savebar strong,
.vendor-assistant-savebar small { display: block; }
.vendor-assistant-savebar strong { color: var(--app-ink); font-size: .67rem; }
.vendor-assistant-savebar small { color: var(--app-muted); font-size: .59rem; }
.vendor-assistant-savebar .dash-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; }

/* html[data-theme="dark"] .vendor-assistant-nav,
html[data-theme="dark"] .vendor-assistant-panel { background: #15231c; } */
html[data-theme="dark"] .vendor-assistant-health,
html[data-theme="dark"] .vendor-assistant-switch-row,
html[data-theme="dark"] .vendor-knowledge-guide,
html[data-theme="dark"] .vendor-handover-flow { background: var(--app-bg); }
html[data-theme="dark"] .vendor-assistant-fields input,
html[data-theme="dark"] .vendor-assistant-fields select,
html[data-theme="dark"] .vendor-assistant-fields textarea,
html[data-theme="dark"] .vendor-handover-fields input,
html[data-theme="dark"] .vendor-handover-fields textarea,
html[data-theme="dark"] .vendor-assistant-knowledge-input,
html[data-theme="dark"] .vendor-assistant-preview-head { color: var(--app-ink); background: var(--app-bg); }
html[data-theme="dark"] .vendor-assistant-preview { background: var(--app-bg); }
html[data-theme="dark"] .vendor-assistant-savebar { background: var(--app-bg); }
html[data-theme="dark"] .vendor-knowledge-starters button { background: var(--app-bg); }

@media (max-width: 1050px) {
    .vendor-assistant-layout { grid-template-columns: 1fr; }
    .vendor-assistant-nav { position: static; overflow: hidden; }
    .vendor-assistant-nav-intro,
    .vendor-assistant-health { display: none; }
    .vendor-assistant-nav nav { display: flex; overflow-x: auto; padding-bottom: 2px; }
    .vendor-assistant-nav nav a { flex: none; min-height: 44px; }
    .vendor-assistant-nav nav a small,
    .vendor-assistant-nav nav a > i { display: none; }
}

@media (max-width: 760px) {
    .vendor-assistant-personality-grid,
    .vendor-knowledge-layout { grid-template-columns: 1fr; }
    .vendor-handover-flow { grid-template-columns: 1fr; }
    .vendor-handover-flow > svg { display: none; }
}

@media (max-width: 600px) {
    .vendor-assistant-head { align-items: flex-start; }
    .vendor-assistant-live-status { align-self: flex-start; }
    .vendor-assistant-panel { padding: 18px; }
    .vendor-assistant-panel-head { grid-template-columns: 40px minmax(0, 1fr); }
    .vendor-assistant-panel-icon { width: 40px; height: 40px; }
    .vendor-knowledge-status,
    .vendor-handover-status { grid-column: 2; justify-self: start; }
    .vendor-assistant-savebar { align-items: stretch; flex-direction: column; }
    .vendor-assistant-savebar .dash-button { width: 100%; }
}

/* Match Settings and AI Assistant typography to Plan & Tokens */
.vendor-preferences-page .vendor-page-head p,
.vendor-assistant-studio .vendor-page-head p {
    font-size: .86rem;
}

.vendor-settings-saved-state,
.vendor-assistant-live-status,
.vendor-handover-status,
.vendor-knowledge-status,
.vendor-payment-status {
    font-size: .72rem;
}

.vendor-preferences-nav-card strong,
.vendor-assistant-nav-intro strong {
    font-size: .86rem;
}

.vendor-preferences-nav-card small,
.vendor-assistant-nav-intro small {
    font-size: .7rem;
}

.vendor-preferences-nav nav a strong,
.vendor-assistant-nav nav a strong {
    font-size: .8rem;
}

.vendor-preferences-nav nav a small,
.vendor-assistant-nav nav a small {
    font-size: .68rem;
}

.vendor-settings-help span,
.vendor-assistant-health strong {
    font-size: .76rem;
}

.vendor-settings-help p,
.vendor-settings-help a,
.vendor-assistant-health small {
    font-size: .69rem;
}

.vendor-assistant-health > span {
    font-size: .64rem;
}

.vendor-preference-card-head h2,
.vendor-assistant-panel-head h2 {
    font-size: 1.22rem;
}

.vendor-preference-card-head p,
.vendor-assistant-panel-head p {
    font-size: .79rem;
}

.vendor-settings-fields label > span,
.vendor-assistant-fields label > span,
.vendor-handover-fields label > span,
.vendor-knowledge-label > span {
    font-size: .78rem;
}

.vendor-settings-fields label > span b,
.vendor-assistant-fields label > span b {
    font-size: .62rem;
}

.vendor-settings-fields label > small,
.vendor-assistant-fields label > small,
.vendor-handover-fields label > small {
    font-size: .7rem;
}

.vendor-settings-fields input,
.vendor-settings-fields select,
.vendor-settings-fields textarea,
.vendor-assistant-fields input,
.vendor-assistant-fields select,
.vendor-assistant-fields textarea,
.vendor-handover-fields input,
.vendor-handover-fields textarea,
.vendor-assistant-knowledge-input {
    font-size: .82rem;
}

.vendor-settings-savebar strong,
.vendor-assistant-savebar strong {
    font-size: .76rem;
}

.vendor-settings-savebar small,
.vendor-assistant-savebar small {
    font-size: .69rem;
}

.vendor-settings-switch-row strong,
.vendor-assistant-switch-row strong {
    font-size: .82rem;
}

.vendor-settings-switch-row small,
.vendor-assistant-switch-row small {
    font-size: .72rem;
}

.vendor-payment-safety strong,
.vendor-knowledge-guide h3 {
    font-size: .8rem;
}

.vendor-payment-safety p,
.vendor-knowledge-guide li small,
.vendor-knowledge-guide > p,
.vendor-assistant-preview-note {
    font-size: .69rem;
}

.vendor-security-modern-row strong,
.vendor-security-action strong,
.vendor-knowledge-guide li strong {
    font-size: .8rem;
}

.vendor-security-modern-row p,
.vendor-security-action p {
    font-size: .72rem;
}

.vendor-security-badge,
.vendor-knowledge-label small,
.vendor-knowledge-starters > span,
.vendor-knowledge-starters button,
.vendor-handover-flow > span {
    font-size: .69rem;
}

.vendor-assistant-preview-head {
    font-size: .72rem;
}

.vendor-assistant-preview-head small,
.vendor-assistant-preview-contact small,
.vendor-assistant-preview-chat > small,
.vendor-assistant-preview-chat > span {
    font-size: .62rem;
}

.vendor-assistant-preview-contact strong {
    font-size: .76rem;
}

.vendor-assistant-preview-chat p {
    font-size: .74rem;
}

.vendor-preferences-page .dash-button,
.vendor-assistant-studio .dash-button {
    font-size: .76rem;
}

/* Vendor subscription access state */
.vendor-subscription-banner {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 17px 18px;
    border: 1px solid #ead5a8;
    border-radius: 16px;
    color: #4f3c18;
    background: linear-gradient(110deg, #fff9e9, #fffdf7);
}

.vendor-subscription-banner-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #8b6110;
    background: #f6e5b9;
}

.vendor-subscription-banner div > span,
.vendor-subscription-banner strong,
.vendor-subscription-banner p {
    display: block;
}

.vendor-subscription-banner div > span {
    margin-bottom: 3px;
    color: #966d1c;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.vendor-subscription-banner strong {
    font-size: .84rem;
}

.vendor-subscription-banner p {
    margin: 4px 0 0;
    color: #7d6940;
    font-size: .72rem;
    line-height: 1.5;
}

.vendor-subscription-banner .dash-button {
    color: #fff;
    border-color: #0e8a5f;
    background: #0e8a5f;
    text-decoration: none;
    white-space: nowrap;
}

.vendor-subscription-locked .vendor-assistant-live-status {
    color: #9a5a24;
    background: #f8e8d8;
}

.vendor-assistant-form.is-subscription-locked .vendor-assistant-switch-row,
.vendor-assistant-form.is-subscription-locked .vendor-assistant-fields,
.vendor-assistant-form.is-subscription-locked .vendor-knowledge-layout > div,
.vendor-assistant-form.is-subscription-locked .vendor-handover-fields,
.vendor-assistant-form.is-subscription-locked .vendor-handover-flow {
    opacity: .58;
}

.vendor-assistant-form.is-subscription-locked input,
.vendor-assistant-form.is-subscription-locked select,
.vendor-assistant-form.is-subscription-locked textarea,
.vendor-assistant-form.is-subscription-locked [data-knowledge-template] {
    pointer-events: none;
}

.vendor-subscription-locked .vendor-catalog-layout form[action$="/vendor/products/save"],
.vendor-subscription-locked .vendor-archive-form,
.vendor-subscription-locked .vendor-inline-form,
.vendor-subscription-locked .payment-review-form,
.vendor-subscription-locked .vendor-settings-form[action$="/vendor/settings"],
.vendor-subscription-locked [data-meta-connect],
.vendor-subscription-locked [data-meta-disconnect-open] {
    opacity: .5;
    pointer-events: none;
}

html[data-theme="dark"] .vendor-subscription-banner {
    color: #f2dfad;
    border-color: #5b4a28;
    background: #282315;
}

html[data-theme="dark"] .vendor-subscription-banner p {
    color: #cbb982;
}

@media (max-width: 760px) {
    .vendor-subscription-banner { grid-template-columns: 44px minmax(0, 1fr); }
    .vendor-subscription-banner .dash-button { grid-column: 1 / -1; justify-content: center; }
}

/* Modern system operations and general settings. */
.admin-system-modern,.admin-general-settings{gap:22px}.admin-system-page-head,.admin-general-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:2px 0 4px}.admin-system-page-head h1,.admin-general-head h1{margin:5px 0 7px;font-size:clamp(1.9rem,3.2vw,2.45rem);letter-spacing:-.05em}.admin-system-page-head p,.admin-general-head p{max-width:730px;margin:0;color:var(--app-muted);font-size:.86rem;line-height:1.65}.admin-system-state,.admin-general-save-state{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(14,138,95,.16);border-radius:999px;color:#08744f;background:rgba(14,138,95,.07);font-size:.69rem;font-weight:750;white-space:nowrap}.admin-system-state i{width:7px;height:7px;border-radius:50%;background:#0e8a5f;box-shadow:0 0 0 4px rgba(14,138,95,.1)}.admin-system-state.is-warn{color:#9b6812;border-color:rgba(183,123,22,.2);background:rgba(183,123,22,.08)}.admin-system-state.is-warn i{background:#b77b16;box-shadow:0 0 0 4px rgba(183,123,22,.1)}
.admin-system-layout,.admin-general-layout{display:grid;grid-template-columns:minmax(220px,265px) minmax(0,1fr);align-items:start;gap:20px}.admin-system-nav,.admin-general-nav{position:sticky;top:90px;display:grid;gap:12px}.admin-system-summary-card,.admin-general-profile{display:flex;align-items:center;gap:11px;min-width:0;padding:15px;border:1px solid var(--app-line);border-radius:15px;background:var(--app-surface)}.admin-system-summary-card>span,.admin-general-profile>span{flex:0 0 39px;width:39px;height:39px;display:grid;place-items:center;border-radius:12px;color:#08744f;background:#e2f2e9;font-weight:800}.admin-system-summary-card>div,.admin-general-profile>div{min-width:0}.admin-system-summary-card small,.admin-system-summary-card strong,.admin-system-summary-card i,.admin-general-profile strong,.admin-general-profile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-system-summary-card small,.admin-system-summary-card i,.admin-general-profile small{color:var(--app-muted);font-size:.61rem;font-style:normal}.admin-system-summary-card strong,.admin-general-profile strong{margin:3px 0;font-size:.79rem}.admin-system-nav>nav,.admin-general-nav>nav{display:grid;gap:4px;padding:7px;border:1px solid var(--app-line);border-radius:16px;background:var(--app-surface)}.admin-system-nav>nav button,.admin-general-nav>nav button{min-width:0;display:grid;grid-template-columns:35px minmax(0,1fr);align-items:center;gap:9px;padding:10px;border:1px solid transparent;border-radius:11px;color:var(--app-muted);background:transparent;text-align:left;cursor:pointer}.admin-system-nav>nav button:hover,.admin-general-nav>nav button:hover{color:var(--app-ink);background:var(--app-bg)}.admin-system-nav>nav button.is-active,.admin-general-nav>nav button.is-active{color:#fff;border-color:#08744f;background:#08744f}.admin-system-nav>nav button>span,.admin-general-nav>nav button>span{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,currentColor 10%,transparent);font-style:normal}.admin-system-nav>nav button.is-active>span,.admin-general-nav>nav button.is-active>span{color:#08744f;background:#fff}.admin-system-nav>nav button>i,.admin-system-nav>nav strong,.admin-system-nav>nav small,.admin-general-nav>nav button>i,.admin-general-nav>nav strong,.admin-general-nav>nav small{display:block;min-width:0;font-style:normal}.admin-system-nav>nav strong,.admin-general-nav>nav strong{font-size:.75rem}.admin-system-nav>nav small,.admin-general-nav>nav small{margin-top:2px;overflow:hidden;color:var(--app-muted);font-size:.64rem;text-overflow:ellipsis;white-space:nowrap}.admin-system-nav>nav button.is-active small,.admin-general-nav>nav button.is-active small{color:rgba(255,255,255,.7)}.admin-system-settings-link{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:12px;border:1px solid var(--app-line);border-radius:14px;color:var(--app-ink);background:var(--app-surface);text-decoration:none}.admin-system-settings-link>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#7255bd;background:#eee9fa}.admin-system-settings-link strong,.admin-system-settings-link small{display:block}.admin-system-settings-link strong{font-size:.7rem}.admin-system-settings-link small{margin-top:2px;color:var(--app-muted);font-size:.6rem}.admin-system-settings-link>b{color:#08744f}.admin-general-note{padding:15px;border:1px solid var(--app-line);border-radius:15px;background:var(--app-surface)}.admin-general-note strong{font-size:.7rem}.admin-general-note p{margin:6px 0 0;color:var(--app-muted);font-size:.64rem;line-height:1.55}
.admin-system-content,.admin-general-form{min-width:0}.admin-system-panel[hidden],.admin-general-form>section[hidden]{display:none}.admin-system-panel,.admin-general-form>section{min-width:0;padding:clamp(20px,2.8vw,29px);border:1px solid var(--app-line);border-radius:18px;background:var(--app-surface)}.admin-system-panel-head,.admin-general-card-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:13px;padding-bottom:18px;border-bottom:1px solid var(--app-line)}.admin-system-panel-head>span:first-child,.admin-general-card-head>span{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;font-style:normal;font-weight:800}.admin-system-panel-head>span.is-green,.admin-general-card-head>span.is-green{color:#08744f;background:#e2f2e9}.admin-system-panel-head>span.is-blue,.admin-general-card-head>span.is-blue{color:#2875c7;background:#e5effa}.admin-system-panel-head>span.is-violet,.admin-general-card-head>span.is-violet{color:#7255bd;background:#eee9fa}.admin-general-card-head>span.is-gold{color:#b77b16;background:#f8edd4}.admin-system-panel-head h2,.admin-general-card-head h2{margin:4px 0;font-size:1.25rem}.admin-system-panel-head p,.admin-general-card-head p{margin:0;color:var(--app-muted);font-size:.76rem}.admin-system-health-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:18px}.admin-system-health-grid article{padding:16px;border:1px solid var(--app-line);border-radius:14px;background:var(--app-bg)}.admin-system-health-grid header{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--app-muted);font-size:.66rem}.admin-system-health-grid header i{width:8px;height:8px;border-radius:50%}.admin-system-health-grid header i.is-ready{background:#0e8a5f;box-shadow:0 0 0 4px rgba(14,138,95,.1)}.admin-system-health-grid header i.is-down{background:#d46655;box-shadow:0 0 0 4px rgba(212,102,85,.1)}.admin-system-health-grid strong{display:block;margin:12px 0 5px;font-size:.8rem}.admin-system-health-grid small{display:block;color:var(--app-muted);font-size:.63rem;line-height:1.5}.admin-system-performance{margin-top:17px;padding:18px;border:1px solid var(--app-line);border-radius:15px}.admin-system-performance h3{margin:4px 0 0;font-size:.9rem}.admin-system-performance>div:last-child{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:15px}.admin-system-performance article{padding:13px;border-radius:11px;background:var(--app-bg)}.admin-system-performance small,.admin-system-performance strong{display:block}.admin-system-performance small{color:var(--app-muted);font-size:.61rem}.admin-system-performance strong{margin-top:5px;font-size:.83rem}.admin-system-performance strong i{font-size:.58rem;font-style:normal}
.admin-integration-list{margin-top:18px}.admin-integration-list article{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--app-line)}.admin-integration-list article:last-child{border:0}.admin-integration-list article>span:first-child{width:42px;height:42px;display:grid;place-items:center;border-radius:12px}.admin-integration-list span.is-green{color:#08744f;background:#e2f2e9}.admin-integration-list span.is-blue{color:#2875c7;background:#e5effa}.admin-integration-list span.is-gold{color:#b77b16;background:#f8edd4}.admin-integration-list strong{display:block;font-size:.76rem}.admin-integration-list p{margin:4px 0 0;color:var(--app-muted);font-size:.67rem}.admin-system-safety{display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:14px;border:1px solid rgba(14,138,95,.16);border-radius:13px;color:#08744f;background:rgba(14,138,95,.06)}.admin-system-safety strong{display:block;font-size:.72rem}.admin-system-safety p{margin:4px 0 0;color:var(--app-muted);font-size:.66rem}.admin-system-notification-list{margin-top:18px}.admin-system-notification-list article{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--app-line)}.admin-system-notification-list article:last-child{border:0}.admin-system-notification-list article>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:.66rem;font-weight:800}.admin-system-notification-list article.is-ready>span{color:#08744f;background:#e2f2e9}.admin-system-notification-list article.is-warn>span{color:#9b6812;background:#f8edd4}.admin-system-notification-list strong{display:block;font-size:.74rem}.admin-system-notification-list p{margin:4px 0 0;color:var(--app-muted);font-size:.66rem}.admin-system-notification-list a{color:#08744f;font-size:.68rem;font-weight:750}
.admin-general-form{display:grid;gap:14px}.admin-general-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:20px}.admin-general-fields label{display:grid;gap:7px;color:var(--app-muted);font-size:.68rem;font-weight:700}.admin-general-fields input,.admin-general-fields select{width:100%;min-height:43px;padding:0 12px;border:1px solid var(--app-line);border-radius:11px;outline:0;color:var(--app-ink);background:var(--app-bg);font:650 .75rem "Instrument Sans",sans-serif}.admin-general-fields input:focus,.admin-general-fields select:focus{border-color:#0e8a5f;box-shadow:0 0 0 3px rgba(14,138,95,.1)}.admin-general-fields label>small{color:var(--app-muted);font-size:.61rem;font-weight:500}.admin-general-switches{display:grid;gap:10px;margin-top:20px}.admin-general-switches label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--app-line);border-radius:13px;background:var(--app-bg);cursor:pointer}.admin-general-switches label>span strong,.admin-general-switches label>span small{display:block}.admin-general-switches label>span strong{font-size:.73rem}.admin-general-switches label>span small{margin-top:3px;color:var(--app-muted);font-size:.64rem}.admin-general-switches input{position:absolute;opacity:0}.admin-general-switches label>i{width:38px;height:22px;padding:3px;border-radius:999px;background:var(--app-line)}.admin-general-switches label>i::after{content:"";width:16px;height:16px;display:block;border-radius:50%;background:var(--app-surface);transition:transform .2s ease}.admin-general-switches input:checked+i{background:#0e8a5f}.admin-general-switches input:checked+i::after{transform:translateX(16px)}.admin-general-security-note{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:14px;border:1px solid rgba(183,123,22,.18);border-radius:13px;background:rgba(183,123,22,.06)}.admin-general-security-note>span{flex:0 0 28px;margin-top:20px;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:#9b6812;background:#f8edd4;font-weight:800}.admin-general-security-note strong,.admin-general-security-note small{display:block}.admin-general-security-note strong{font-size:.7rem}.admin-general-security-note small{margin-top:4px;color:var(--app-muted);font-size:.64rem;line-height:1.5}.admin-general-savebar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid var(--app-line);border-radius:15px;background:var(--app-surface)}.admin-general-savebar>span{display:flex;align-items:center;gap:9px}.admin-general-savebar>span>i{width:8px;height:8px;border-radius:50%;background:#0e8a5f}.admin-general-form.is-dirty .admin-general-savebar>span>i{background:#b77b16}.admin-general-savebar strong,.admin-general-savebar small{display:block}.admin-general-savebar strong{font-size:.7rem}.admin-general-savebar small{margin-top:3px;color:var(--app-muted);font-size:.62rem}.admin-general-savebar button{min-height:40px;padding:0 15px;border:0;border-radius:10px;color:#fff;background:#08744f;font:750 .7rem "Instrument Sans",sans-serif;cursor:pointer}
html[data-theme="dark"] .admin-system-summary-card>span,html[data-theme="dark"] .admin-general-profile>span,html[data-theme="dark"] .admin-system-panel-head>span.is-green,html[data-theme="dark"] .admin-general-card-head>span.is-green,html[data-theme="dark"] .admin-integration-list span.is-green,html[data-theme="dark"] .admin-system-notification-list article.is-ready>span{color:#8addae;background:rgba(14,138,95,.2)}html[data-theme="dark"] .admin-system-panel-head>span.is-blue,html[data-theme="dark"] .admin-general-card-head>span.is-blue,html[data-theme="dark"] .admin-integration-list span.is-blue{color:#8bc3ff;background:rgba(40,117,199,.2)}html[data-theme="dark"] .admin-system-panel-head>span.is-violet,html[data-theme="dark"] .admin-general-card-head>span.is-violet,html[data-theme="dark"] .admin-system-settings-link>span{color:#c4aff6;background:rgba(114,85,189,.2)}html[data-theme="dark"] .admin-general-card-head>span.is-gold,html[data-theme="dark"] .admin-integration-list span.is-gold,html[data-theme="dark"] .admin-system-notification-list article.is-warn>span,html[data-theme="dark"] .admin-general-security-note>span{color:#edc56e;background:rgba(183,123,22,.2)}
@media(max-width:1000px){.admin-system-layout,.admin-general-layout{grid-template-columns:1fr}.admin-system-nav,.admin-general-nav{position:static}.admin-system-nav>nav{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-general-nav>nav{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-general-note{display:none}}@media(max-width:760px){.admin-system-page-head,.admin-general-head{align-items:flex-start;flex-direction:column}.admin-system-nav>nav,.admin-general-nav>nav{grid-template-columns:1fr}.admin-system-health-grid,.admin-system-performance>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-system-panel-head,.admin-general-card-head{grid-template-columns:44px minmax(0,1fr)}.admin-system-panel-head>.admin-count-pill{grid-column:2}.admin-general-fields{grid-template-columns:1fr}}@media(max-width:520px){.admin-system-panel,.admin-general-form>section{padding:18px}.admin-system-summary-card,.admin-general-profile{display:none}.admin-system-health-grid,.admin-system-performance>div:last-child{grid-template-columns:1fr}.admin-system-panel-head,.admin-general-card-head{grid-template-columns:1fr}.admin-system-panel-head>.admin-count-pill{grid-column:auto}.admin-integration-list article,.admin-system-notification-list article{grid-template-columns:42px minmax(0,1fr)}.admin-integration-list article>.admin-status,.admin-system-notification-list article>a{grid-column:2}.admin-general-savebar{align-items:stretch;flex-direction:column}.admin-general-savebar button{width:100%}}

/* Modern access control workspace */
.admin-access-modern{gap:22px}.admin-access-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:2px 0 4px}.admin-access-page-head h1{margin:5px 0 7px;font-size:clamp(1.9rem,3.2vw,2.45rem);letter-spacing:-.05em}.admin-access-page-head p{max-width:720px;margin:0;color:var(--app-muted);font-size:.86rem;line-height:1.65}.admin-access-secure-state{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(14,138,95,.16);border-radius:999px;color:#08744f;background:rgba(14,138,95,.07);font-size:.69rem;font-weight:750;white-space:nowrap}
.admin-access-layout{display:grid;grid-template-columns:minmax(220px,265px) minmax(0,1fr);align-items:start;gap:20px}.admin-access-nav{position:sticky;top:90px;display:grid;gap:12px}.admin-access-summary-card{display:flex;align-items:center;gap:11px;min-width:0;padding:15px;border:1px solid var(--app-line);border-radius:15px;background:var(--app-surface)}.admin-access-summary-card>span{flex:0 0 39px;width:39px;height:39px;display:grid;place-items:center;border-radius:12px;color:#08744f;background:#e2f2e9}.admin-access-summary-card>div{min-width:0}.admin-access-summary-card small,.admin-access-summary-card strong,.admin-access-summary-card i{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-access-summary-card small,.admin-access-summary-card i{color:var(--app-muted);font-size:.61rem;font-style:normal}.admin-access-summary-card strong{margin:3px 0;font-size:.9rem}.admin-access-nav>nav{display:grid;gap:4px;padding:7px;border:1px solid var(--app-line);border-radius:16px;background:var(--app-surface)}.admin-access-nav>nav button{min-width:0;display:grid;grid-template-columns:35px minmax(0,1fr);align-items:center;gap:9px;padding:10px;border:1px solid transparent;border-radius:11px;color:var(--app-muted);background:transparent;text-align:left;cursor:pointer}.admin-access-nav>nav button:hover{color:var(--app-ink);background:var(--app-bg)}.admin-access-nav>nav button.is-active{color:#fff;border-color:#08744f;background:#08744f}.admin-access-nav>nav button>span{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,currentColor 10%,transparent)}.admin-access-nav>nav button.is-active>span{color:#08744f;background:#fff}.admin-access-nav>nav button>i,.admin-access-nav>nav strong,.admin-access-nav>nav small{display:block;min-width:0;font-style:normal}.admin-access-nav>nav strong{font-size:.75rem}.admin-access-nav>nav small{margin-top:2px;overflow:hidden;color:var(--app-muted);font-size:.64rem;text-overflow:ellipsis;white-space:nowrap}.admin-access-nav>nav button.is-active small{color:rgba(255,255,255,.7)}.admin-access-nav-help{padding:15px;border:1px solid var(--app-line);border-radius:15px;background:var(--app-surface)}.admin-access-nav-help>span{font-size:.7rem;font-weight:750}.admin-access-nav-help p{margin:6px 0 0;color:var(--app-muted);font-size:.65rem;line-height:1.55}.admin-access-nav-help strong{color:var(--app-ink)}
.admin-access-content{min-width:0}.admin-access-panel[hidden]{display:none}.admin-access-panel{min-width:0;padding:clamp(20px,2.8vw,29px);border:1px solid var(--app-line);border-radius:18px;background:var(--app-surface)}.admin-access-panel-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:13px;padding-bottom:18px;border-bottom:1px solid var(--app-line)}.admin-access-panel-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px}.admin-access-panel-icon.is-green{color:#08744f;background:#e2f2e9}.admin-access-panel-icon.is-blue{color:#2875c7;background:#e5effa}.admin-access-panel-icon.is-violet{color:#7255bd;background:#eee9fa}.admin-access-panel-head h2{margin:4px 0;font-size:1.25rem;letter-spacing:-.025em}.admin-access-panel-head p{margin:0;color:var(--app-muted);font-size:.76rem}.admin-access-health-grid,.admin-audit-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:18px 0}.admin-access-health-grid article{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px;padding:15px;border:1px solid var(--app-line);border-radius:14px;background:var(--app-bg)}.admin-access-health-grid article>small{color:var(--app-muted);font-size:.66rem}.admin-access-health-grid article>strong{grid-row:2;font-size:1.1rem}.admin-access-health-grid article>.admin-status{grid-column:2;grid-row:1/3}
.admin-access-table{min-width:870px}.admin-access-table.is-sessions,.admin-access-table.is-audit{min-width:1020px}.admin-access-table th{background:var(--app-bg);font-size:.67rem}.admin-access-table .admin-table-primary{font-size:.76rem}.admin-access-table .admin-table-secondary{font-size:.67rem}.admin-access-person{min-width:190px;display:flex;align-items:center;gap:10px}.admin-access-person>i{flex:0 0 37px;width:37px;height:37px;display:grid;place-items:center;border-radius:11px;color:#08744f;background:#e2f2e9;font-size:.76rem;font-style:normal;font-weight:800;text-transform:uppercase}.admin-access-person>span{min-width:0}.admin-access-person strong,.admin-access-person small{display:block;overflow:hidden;max-width:175px;text-overflow:ellipsis;white-space:nowrap}.admin-access-person strong{font-size:.75rem}.admin-access-person small{margin-top:3px;color:var(--app-muted);font-size:.65rem}.admin-access-copy,.admin-access-date,.admin-access-platform,.admin-access-operation{font-size:.68rem}.admin-access-date{display:block;max-width:145px;color:var(--app-muted)}.admin-access-platform,.admin-access-operation{display:inline-flex;padding:5px 8px;border-radius:8px;color:var(--app-ink);background:var(--app-bg);font-weight:700;text-transform:capitalize}.admin-access-ip{padding:5px 7px;border-radius:7px;color:#7255bd;background:rgba(114,85,189,.08);font-size:.65rem}.admin-access-check{display:inline-flex;align-items:center;gap:6px;color:var(--app-muted);font-size:.68rem;font-weight:700;white-space:nowrap}.admin-access-check i{width:19px;height:19px;display:grid;place-items:center;border-radius:6px;background:var(--app-bg);font-size:.59rem;font-style:normal}.admin-access-check.is-ready{color:#08744f}.admin-access-check.is-ready i{background:#e2f2e9}.admin-access-event{font-size:.7rem;text-transform:capitalize}.admin-access-rows{font-size:.72rem}
.admin-session-summary{display:flex;align-items:flex-start;gap:11px;margin:18px 0;padding:13px 14px;border:1px solid rgba(40,117,199,.16);border-radius:12px;color:#2875c7;background:rgba(40,117,199,.06)}.admin-session-summary>span{flex:0 0 auto; padding-top: 20px}.admin-session-summary strong,.admin-session-summary small{display:block}.admin-session-summary strong{font-size:.72rem}.admin-session-summary small{margin-top:3px;color:var(--app-muted);font-size:.67rem;line-height:1.5}.admin-audit-summary article{padding:15px;border:1px solid var(--app-line);border-radius:14px;background:var(--app-bg)}.admin-audit-summary small,.admin-audit-summary strong,.admin-audit-summary span{display:block}.admin-audit-summary small{color:var(--app-muted);font-size:.66rem}.admin-audit-summary strong{margin:5px 0;font-size:1.1rem}.admin-audit-summary span{color:var(--app-muted);font-size:.63rem}
html[data-theme="dark"] .admin-access-summary-card>span,html[data-theme="dark"] .admin-access-panel-icon.is-green,html[data-theme="dark"] .admin-access-person>i,html[data-theme="dark"] .admin-access-check.is-ready i{color:#8addae;background:rgba(14,138,95,.2)}html[data-theme="dark"] .admin-access-panel-icon.is-blue{color:#8bc3ff;background:rgba(40,117,199,.2)}html[data-theme="dark"] .admin-access-panel-icon.is-violet{color:#c4aff6;background:rgba(114,85,189,.2)}
@media(max-width:1000px){.admin-access-layout{grid-template-columns:1fr}.admin-access-nav{position:static}.admin-access-nav>nav{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-access-nav-help{display:none}}@media(max-width:720px){.admin-access-page-head{align-items:flex-start;flex-direction:column}.admin-access-nav>nav{grid-template-columns:1fr}.admin-access-panel-head{grid-template-columns:44px minmax(0,1fr)}.admin-access-panel-head>.admin-count-pill{grid-column:2}.admin-access-health-grid,.admin-audit-summary{grid-template-columns:1fr}}@media(max-width:520px){.admin-access-panel{padding:18px}.admin-access-summary-card{display:none}.admin-access-panel-head{grid-template-columns:1fr}.admin-access-panel-head>.admin-count-pill{grid-column:auto}}
.admin-access-view{min-height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px solid rgba(8,116,79,.2);border-radius:9px;color:#08744f;background:rgba(8,116,79,.06);font:750 .68rem "Instrument Sans",sans-serif;cursor:pointer}.admin-access-view:hover{background:rgba(8,116,79,.11)}
.admin-access-head-actions,.admin-access-row-actions{display:flex;align-items:center;gap:8px}.admin-access-add{min-height:37px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border:0;border-radius:10px;color:#fff;background:#08744f;font:750 .68rem "Instrument Sans",sans-serif;white-space:nowrap;cursor:pointer}.admin-access-add:hover{background:#066342}.admin-access-deactivate,.admin-access-reactivate{min-height:34px;display:inline-flex;align-items:center;gap:5px;padding:0 9px;border-radius:9px;font:750 .65rem "Instrument Sans",sans-serif;cursor:pointer}.admin-access-deactivate{border:1px solid rgba(190,75,60,.2);color:#b34c3e;background:rgba(190,75,60,.06)}.admin-access-deactivate:hover{background:rgba(190,75,60,.11)}.admin-access-reactivate{border:1px solid rgba(8,116,79,.2);color:#08744f;background:rgba(8,116,79,.06)}.admin-access-reactivate:hover{background:rgba(8,116,79,.12)}
body.admin-access-action-open{overflow:hidden}.admin-access-action-modal[hidden],.admin-access-confirm-modal[hidden]{display:none}.admin-access-action-modal,.admin-access-confirm-modal{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:20px}.admin-access-action-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(4,20,14,.48);backdrop-filter:blur(3px);cursor:default}.admin-access-action-modal>section,.admin-access-confirm-modal>section{position:relative;width:min(570px,100%);max-height:calc(100vh - 40px);overflow:auto;border:1px solid var(--app-line);border-radius:20px;background:var(--app-surface);box-shadow:0 28px 75px rgba(3,24,15,.24);animation:adminFadeIn .2s ease}.admin-access-action-modal>section>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:21px 22px;border-bottom:1px solid var(--app-line)}.admin-access-action-modal h2{margin:4px 0;font-size:1.2rem}.admin-access-action-modal header p{margin:0;color:var(--app-muted);font-size:.7rem;line-height:1.5}.admin-access-action-modal header>button{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--app-line);border-radius:10px;color:var(--app-muted);background:var(--app-bg);cursor:pointer}.admin-access-action-modal form{padding:20px 22px}.admin-access-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.admin-access-form-grid label{display:grid;gap:7px;color:var(--app-muted);font-size:.67rem;font-weight:750}.admin-access-form-grid label.is-wide{grid-column:1/-1}.admin-access-form-grid label span i{font-size:.58rem;font-style:normal;font-weight:500}.admin-access-form-grid input{width:100%;min-height:43px;padding:0 12px;border:1px solid var(--app-line);border-radius:11px;outline:0;color:var(--app-ink);background:var(--app-bg);font:650 .73rem "Instrument Sans",sans-serif}.admin-access-form-grid input:focus{border-color:#0e8a5f;box-shadow:0 0 0 3px rgba(14,138,95,.1)}.admin-access-password-note{display:flex;align-items:flex-start;gap:10px;margin-top:15px;padding:13px;border:1px solid rgba(14,138,95,.15);border-radius:12px;color:#08744f;background:rgba(14,138,95,.06)}.admin-access-password-note p{margin:0}.admin-access-password-note strong,.admin-access-password-note span{display:block}.admin-access-password-note strong{font-size:.68rem}.admin-access-password-note span{margin-top:3px;color:var(--app-muted);font-size:.62rem;line-height:1.5}.admin-access-action-modal footer{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--app-line)}.admin-access-action-modal footer button,.admin-access-confirm-modal form button{min-height:39px;padding:0 14px;border-radius:10px;font:750 .68rem "Instrument Sans",sans-serif;cursor:pointer}.admin-access-action-modal .is-secondary,.admin-access-confirm-modal .is-secondary{border:1px solid var(--app-line);color:var(--app-ink);background:var(--app-bg)}.admin-access-action-modal .is-primary{border:0;color:#fff;background:#08744f}.admin-access-action-modal button:disabled,.admin-access-confirm-modal button:disabled{opacity:.65;cursor:wait}.admin-access-confirm-modal>section{width:min(430px,100%);padding:25px;text-align:center}.admin-access-confirm-modal>section>span{width:52px;height:52px;display:grid;place-items:center;margin:0 auto;border-radius:15px;color:#b34c3e;background:rgba(190,75,60,.09)}.admin-access-confirm-modal.is-reactivate>section>span{color:#08744f;background:rgba(8,116,79,.09)}.admin-access-confirm-modal h2{margin:15px 0 7px;font-size:1.08rem}.admin-access-confirm-modal p{margin:0;color:var(--app-muted);font-size:.7rem;line-height:1.6}.admin-access-confirm-modal p strong{color:var(--app-ink)}.admin-access-confirm-modal form{display:flex;justify-content:center;gap:9px;margin-top:20px}.admin-access-confirm-modal .is-danger,.admin-access-confirm-modal .is-success{border:0;color:#fff}.admin-access-confirm-modal .is-danger{background:#b34c3e}.admin-access-confirm-modal .is-success{background:#08744f}
body.admin-detail-modal-open{overflow:hidden}.admin-detail-modal[hidden]{display:none}.admin-detail-modal{position:fixed;inset:0;z-index:1000;display:grid;justify-items:end}.admin-detail-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(5,20,14,.32);cursor:default;animation:adminFadeIn .2s ease}.admin-detail-panel{position:relative;width:min(620px,calc(100vw - 24px));height:100%;overflow:auto;border-left:1px solid var(--app-line);background:var(--app-bg);box-shadow:-24px 0 55px rgba(5,25,16,.15);animation:adminSlideIn .24s ease}.admin-detail-panel>header{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid var(--app-line);background:color-mix(in srgb,var(--app-bg) 94%,transparent);backdrop-filter:blur(14px)}.admin-detail-identity{display:flex;align-items:center;gap:12px;min-width:0}.admin-detail-identity>span{flex:0 0 45px;width:45px;height:45px;display:grid;place-items:center;border-radius:14px;color:#08744f;background:#e2f2e9;font-weight:800;text-transform:uppercase}.admin-detail-identity>div{min-width:0}.admin-detail-identity small{color:#08744f;font-size:.66rem;font-weight:750}.admin-detail-identity h2{margin:2px 0;overflow:hidden;font-size:1.15rem;text-overflow:ellipsis;white-space:nowrap}.admin-detail-identity p{margin:0;overflow:hidden;color:var(--app-muted);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.admin-detail-panel>header>button{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--app-line);border-radius:11px;color:var(--app-muted);background:var(--app-surface);cursor:pointer}.admin-detail-body{display:grid;gap:14px;padding:18px}.admin-detail-security-banner{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px;border:1px solid rgba(14,138,95,.16);border-radius:15px;background:rgba(14,138,95,.06)}.admin-detail-security-banner>span:first-child{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:#08744f;background:#e2f2e9}.admin-detail-security-banner strong{display:block;font-size:.76rem}.admin-detail-security-banner p{margin:4px 0 0;color:var(--app-muted);font-size:.67rem;line-height:1.5}.admin-detail-card{padding:18px;border:1px solid var(--app-line);border-radius:16px;background:var(--app-surface)}.admin-detail-card-head{padding-bottom:12px;border-bottom:1px solid var(--app-line)}.admin-detail-card-head h3{margin:4px 0 0;font-size:.91rem}.admin-detail-card dl{margin:8px 0 0}.admin-detail-card dl>div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--app-line);font-size:.7rem}.admin-detail-card dl>div:last-child{border:0}.admin-detail-card dt{color:var(--app-muted)}.admin-detail-card dd{max-width:65%;margin:0;overflow:hidden;font-weight:700;text-align:right;text-overflow:ellipsis;white-space:nowrap}.admin-detail-protection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.admin-detail-protection-grid article{display:flex;align-items:flex-start;gap:10px;padding:15px;border:1px solid var(--app-line);border-radius:14px;background:var(--app-surface)}.admin-detail-protection-grid article>span{flex:0 0 29px;width:29px;height:29px;display:grid;place-items:center;border-radius:9px;color:var(--app-muted);background:var(--app-bg);font-size:.68rem;font-weight:800}.admin-detail-protection-grid article.is-ready>span{color:#08744f;background:#e2f2e9}.admin-detail-protection-grid strong{display:block;font-size:.71rem}.admin-detail-protection-grid p{margin:4px 0 0;color:var(--app-muted);font-size:.63rem;line-height:1.45}.admin-detail-timeline{margin-top:10px}.admin-detail-timeline article{position:relative;display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;padding:8px 0}.admin-detail-timeline article:not(:last-child)::after{content:"";position:absolute;top:21px;bottom:-4px;left:5px;width:1px;background:var(--app-line)}.admin-detail-timeline i{width:11px;height:11px;margin-top:3px;border:3px solid #d4eee0;border-radius:50%;background:#08744f}.admin-detail-timeline strong{display:block;font-size:.7rem}.admin-detail-timeline p{margin:3px 0 0;color:var(--app-muted);font-size:.65rem}.admin-detail-timeline span{min-width:0}
html[data-theme="dark"] .admin-detail-identity>span,html[data-theme="dark"] .admin-detail-security-banner>span:first-child,html[data-theme="dark"] .admin-detail-protection-grid article.is-ready>span{color:#8addae;background:rgba(14,138,95,.2)}
@media(max-width:720px){.admin-access-head-actions{grid-column:2;justify-content:flex-end}.admin-access-form-grid{grid-template-columns:1fr}.admin-access-form-grid label.is-wide{grid-column:auto}}@media(max-width:620px){.admin-detail-panel{width:100%}.admin-detail-panel>header{padding:16px}.admin-detail-body{padding:13px}.admin-detail-security-banner{grid-template-columns:40px minmax(0,1fr)}.admin-detail-security-banner>.admin-status{grid-column:2}.admin-detail-protection-grid{grid-template-columns:1fr}.admin-access-action-modal{padding:10px}.admin-access-action-modal>section{max-height:calc(100vh - 20px)}.admin-access-action-modal>section>header,.admin-access-action-modal form{padding:17px}.admin-access-row-actions{align-items:stretch;flex-direction:column}}@media(max-width:520px){.admin-access-head-actions{grid-column:auto;align-items:stretch;flex-direction:column}.admin-access-confirm-modal form,.admin-access-action-modal footer{flex-direction:column}.admin-access-confirm-modal form button,.admin-access-action-modal footer button{width:100%}}

/* Modern AI operations workspace */
.admin-operations-modern{gap:22px}.admin-operations-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:2px 0 4px}.admin-operations-page-head h1{margin:5px 0 7px;font-size:clamp(1.9rem,3.2vw,2.45rem);letter-spacing:-.05em}.admin-operations-page-head p{max-width:710px;margin:0;color:var(--app-muted);font-size:.86rem;line-height:1.65}.admin-operations-live-state{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(14,138,95,.16);border-radius:999px;color:#08744f;background:rgba(14,138,95,.07);font-size:.69rem;font-weight:750;white-space:nowrap}.admin-operations-live-state i{width:7px;height:7px;border-radius:50%;background:#0e8a5f;box-shadow:0 0 0 4px rgba(14,138,95,.1)}
.admin-operations-layout{display:grid;grid-template-columns:minmax(220px,265px) minmax(0,1fr);align-items:start;gap:20px}.admin-operations-nav{position:sticky;top:90px;display:grid;gap:12px}.admin-operations-summary-card{display:flex;align-items:center;gap:11px;min-width:0;padding:15px;border:1px solid var(--app-line);border-radius:15px;background:var(--app-surface)}.admin-operations-summary-card>span{flex:0 0 39px;width:39px;height:39px;display:grid;place-items:center;border-radius:12px;color:#7255bd;background:#eee9fa}.admin-operations-summary-card>div{min-width:0}.admin-operations-summary-card small,.admin-operations-summary-card strong,.admin-operations-summary-card i{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-operations-summary-card small,.admin-operations-summary-card i{color:var(--app-muted);font-size:.61rem;font-style:normal}.admin-operations-summary-card strong{margin:3px 0;font-size:.9rem}.admin-operations-nav>nav{display:grid;gap:4px;padding:7px;border:1px solid var(--app-line);border-radius:16px;background:var(--app-surface)}.admin-operations-nav>nav button{min-width:0;display:grid;grid-template-columns:35px minmax(0,1fr);align-items:center;gap:9px;padding:10px;border:1px solid transparent;border-radius:11px;color:var(--app-muted);background:transparent;text-align:left;cursor:pointer}.admin-operations-nav>nav button:hover{color:var(--app-ink);background:var(--app-bg)}.admin-operations-nav>nav button.is-active{color:#fff;border-color:#08744f;background:#08744f}.admin-operations-nav>nav button>span{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,currentColor 10%,transparent)}.admin-operations-nav>nav button.is-active>span{color:#08744f;background:#fff}.admin-operations-nav>nav button>i,.admin-operations-nav>nav strong,.admin-operations-nav>nav small{display:block;min-width:0;font-style:normal}.admin-operations-nav>nav strong{font-size:.75rem}.admin-operations-nav>nav small{margin-top:2px;overflow:hidden;color:var(--app-muted);font-size:.64rem;text-overflow:ellipsis;white-space:nowrap}.admin-operations-nav>nav button.is-active small{color:rgba(255,255,255,.7)}.admin-operations-nav-help{padding:15px;border:1px solid var(--app-line);border-radius:15px;background:var(--app-surface)}.admin-operations-nav-help>span{font-size:.7rem;font-weight:750}.admin-operations-nav-help p{margin:6px 0 0;color:var(--app-muted);font-size:.65rem;line-height:1.55}.admin-operations-nav-help strong{color:var(--app-ink)}
.admin-operations-content{min-width:0}.admin-operation-panel[hidden]{display:none}.admin-operation-panel{min-width:0;padding:clamp(20px,2.8vw,29px);border:1px solid var(--app-line);border-radius:18px;background:var(--app-surface)}.admin-operation-panel-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:13px;padding-bottom:18px;border-bottom:1px solid var(--app-line)}.admin-operation-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px}.admin-operation-icon.is-green{color:#08744f;background:#e2f2e9}.admin-operation-icon.is-violet{color:#7255bd;background:#eee9fa}.admin-operation-icon.is-blue{color:#2875c7;background:#e5effa}.admin-operation-panel-head h2{margin:4px 0;font-size:1.25rem;letter-spacing:-.025em}.admin-operation-panel-head p{margin:0;color:var(--app-muted);font-size:.76rem}.admin-operation-highlight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}.admin-operation-highlight-grid.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-operation-highlight-grid article{padding:17px;border:1px solid var(--app-line);border-radius:14px;background:var(--app-bg)}.admin-operation-highlight-grid small,.admin-operation-highlight-grid strong,.admin-operation-highlight-grid span{display:block}.admin-operation-highlight-grid small{color:var(--app-muted);font-size:.67rem}.admin-operation-highlight-grid strong{margin:5px 0;font-size:1.15rem}.admin-operation-highlight-grid strong i{font-size:.65rem;font-style:normal}.admin-operation-highlight-grid span{color:var(--app-muted);font-size:.63rem}
.admin-intent-section{margin-top:18px;padding:18px;border:1px solid var(--app-line);border-radius:16px}.admin-operation-subhead{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:8px}.admin-operation-subhead h3{margin:4px 0 0;font-size:.9rem}.admin-operation-subhead>span{color:var(--app-muted);font-size:.64rem}.admin-intent-list article{display:grid;grid-template-columns:28px minmax(130px,.7fr) minmax(220px,1fr);align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--app-line)}.admin-intent-list article:last-child{border:0}.admin-intent-list article>b{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;color:#08744f;background:#e2f2e9;font-size:.61rem}.admin-intent-list article>span strong,.admin-intent-list article>span small{display:block}.admin-intent-list article>span strong{font-size:.72rem;text-transform:capitalize}.admin-intent-list article>span small{margin-top:3px;color:var(--app-muted);font-size:.61rem}.admin-intent-list article>div{display:grid;grid-template-columns:minmax(100px,1fr) 45px;align-items:center;gap:10px}.admin-intent-list article>div>span{height:6px;display:block;overflow:hidden;border-radius:999px;background:var(--app-line)}.admin-intent-list article>div>span i{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#08744f,#55c58e)}.admin-intent-list article>div>strong{font-size:.68rem;text-align:right}
.admin-model-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}.admin-model-list article{padding:17px;border:1px solid var(--app-line);border-radius:15px;background:var(--app-bg)}.admin-model-list header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.admin-model-list header span strong,.admin-model-list header span small{display:block}.admin-model-list header span strong{font-size:.75rem}.admin-model-list header span small{margin-top:3px;color:var(--app-muted);font-size:.62rem}.admin-model-list header>b{color:#7255bd;font-size:.68rem}.admin-model-list article>div{display:grid;grid-template-columns:minmax(100px,1fr) auto;align-items:center;gap:12px;margin-top:15px}.admin-model-list article>div>span{height:7px;display:block;overflow:hidden;border-radius:999px;background:var(--app-line)}.admin-model-list article>div>span i{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#7255bd,#a58ae0)}.admin-model-list article>div>strong{font-size:.64rem}.admin-operation-empty{grid-column:1/-1;display:grid;place-items:center;min-height:260px;text-align:center}.admin-operation-empty>span{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;color:#7255bd;background:#eee9fa;font-size:.72rem;font-weight:800}.admin-operation-empty h3{margin:13px 0 4px;font-size:.9rem}.admin-operation-empty p{margin:0;color:var(--app-muted);font-size:.7rem}
.admin-whatsapp-health{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:18px 0}.admin-whatsapp-health article{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px;padding:15px;border:1px solid var(--app-line);border-radius:14px;background:var(--app-bg)}.admin-whatsapp-health article>small{color:var(--app-muted);font-size:.66rem}.admin-whatsapp-health article>strong{grid-row:2;font-size:1.1rem}.admin-whatsapp-health article>.admin-status{grid-column:2;grid-row:1/3}.admin-operations-table{min-width:850px}.admin-operations-table th{background:var(--app-bg);font-size:.67rem}.admin-operations-table .admin-table-primary{font-size:.76rem}.admin-operations-table .admin-table-secondary{font-size:.67rem}.admin-operation-webhook{display:inline-flex;align-items:center;gap:6px;color:var(--app-muted);font-size:.68rem;font-weight:700;white-space:nowrap}.admin-operation-webhook i{width:6px;height:6px;border-radius:50%;background:currentColor}.admin-operation-webhook.is-ready{color:#08744f}.admin-operation-date{display:block;max-width:135px;color:var(--app-muted);font-size:.68rem}
html[data-theme="dark"] .admin-operations-summary-card>span{color:#c4aff6;background:rgba(114,85,189,.2)}html[data-theme="dark"] .admin-operation-icon.is-green,html[data-theme="dark"] .admin-intent-list article>b{color:#8addae;background:rgba(14,138,95,.2)}html[data-theme="dark"] .admin-operation-icon.is-violet,html[data-theme="dark"] .admin-operation-empty>span{color:#c4aff6;background:rgba(114,85,189,.2)}html[data-theme="dark"] .admin-operation-icon.is-blue{color:#8bc3ff;background:rgba(40,117,199,.2)}
@media(max-width:1000px){.admin-operations-layout{grid-template-columns:1fr}.admin-operations-nav{position:static}.admin-operations-nav>nav{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-operations-nav-help{display:none}}@media(max-width:720px){.admin-operations-page-head{align-items:flex-start;flex-direction:column}.admin-operations-nav>nav{grid-template-columns:1fr}.admin-operation-panel-head{grid-template-columns:44px minmax(0,1fr)}.admin-operation-panel-head>.admin-count-pill{grid-column:2}.admin-operation-highlight-grid,.admin-operation-highlight-grid.is-three,.admin-model-list,.admin-whatsapp-health{grid-template-columns:1fr}.admin-intent-list article{grid-template-columns:28px minmax(0,1fr)}.admin-intent-list article>div{grid-column:2}.admin-operation-subhead{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.admin-operation-panel{padding:18px}.admin-operations-summary-card{display:none}.admin-operation-panel-head{grid-template-columns:1fr}.admin-operation-panel-head>.admin-count-pill{grid-column:auto}.admin-intent-list article>div{grid-column:1/-1}.admin-operation-subhead>span{display:none}}

/* Modern admin finance workspace */
.admin-finance-modern { --finance-green:#08744f; --finance-blue:#2875c7; --finance-violet:#7255bd; --finance-gold:#b77b16; gap:20px; }
.admin-finance-hero { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; overflow:hidden; padding:clamp(26px,4vw,40px); border-radius:24px; color:#fff; background:radial-gradient(circle at 84% 12%,rgba(99,192,139,.27),transparent 25%),linear-gradient(125deg,#073e2d,#0a5940 62%,#08744f); }.admin-finance-hero::after { content:""; position:absolute; right:9%; bottom:-80px; width:190px; height:190px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 31px rgba(255,255,255,.035),0 0 0 64px rgba(255,255,255,.02); }.admin-finance-hero>*{position:relative;z-index:1}.admin-finance-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:rgba(255,255,255,.78);background:rgba(255,255,255,.07);font-size:.72rem;font-weight:750;letter-spacing:.04em;text-transform:uppercase}.admin-finance-eyebrow i{width:7px;height:7px;border-radius:50%;background:#83e5aa;box-shadow:0 0 0 4px rgba(131,229,170,.13)}.admin-finance-hero .dash-page-greeting{color:#8ee4b2}.admin-finance-hero h1{max-width:720px;margin:6px 0 10px;font-size:clamp(1.8rem,3.5vw,2.65rem);letter-spacing:-.055em}.admin-finance-hero>div>p:last-child{max-width:700px;margin:0;color:rgba(255,255,255,.7);font-size:.92rem;line-height:1.7}.admin-finance-hero-stat{min-width:205px;display:grid;gap:4px;padding:18px 20px;border:1px solid rgba(255,255,255,.13);border-radius:17px;background:rgba(5,48,34,.35);backdrop-filter:blur(8px)}.admin-finance-hero-stat small,.admin-finance-hero-stat i{color:rgba(255,255,255,.65);font-size:.72rem;font-style:normal}.admin-finance-hero-stat strong{font-size:1.35rem;letter-spacing:-.035em}.admin-finance-hero-stat strong span{margin-right:3px;font-size:.7rem}
.admin-finance-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.admin-finance-metrics article{display:flex;align-items:center;gap:13px;min-width:0;padding:17px;border:1px solid var(--app-line);border-radius:17px;background:var(--app-surface)}.admin-finance-metrics article>span{flex:0 0 39px;width:39px;height:39px;display:grid;place-items:center;border-radius:12px}.admin-finance-metrics .is-green>span{color:var(--finance-green);background:#e2f2e9}.admin-finance-metrics .is-blue>span{color:var(--finance-blue);background:#e5effa}.admin-finance-metrics .is-violet>span{color:var(--finance-violet);background:#eee9fa}.admin-finance-metrics .is-gold>span{color:var(--finance-gold);background:#f8edd4}.admin-finance-metrics p,.admin-finance-metrics small,.admin-finance-metrics strong,.admin-finance-metrics i{display:block;min-width:0;margin:0}.admin-finance-metrics small{color:var(--app-muted);font-size:.69rem}.admin-finance-metrics strong{margin:2px 0;font-size:1.08rem}.admin-finance-metrics i{overflow:hidden;color:var(--app-muted);font-size:.67rem;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
.admin-finance-workspace{overflow:hidden;border:1px solid var(--app-line);border-radius:21px;background:var(--app-surface)}.admin-finance-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:9px;border-bottom:1px solid var(--app-line);background:var(--app-bg)}.admin-finance-tabs button{min-width:0;display:grid;grid-template-columns:35px minmax(0,1fr);align-items:center;gap:9px;padding:10px;border:1px solid transparent;border-radius:12px;color:var(--app-muted);background:transparent;text-align:left;cursor:pointer}.admin-finance-tabs button:hover{color:var(--app-ink);background:var(--app-surface)}.admin-finance-tabs button.is-active{color:#08744f;border-color:rgba(8,116,79,.18);background:var(--app-surface);box-shadow:0 5px 15px rgba(12,50,32,.05)}.admin-finance-tabs button>span{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,currentColor 10%,transparent)}.admin-finance-tabs button>i,.admin-finance-tabs strong,.admin-finance-tabs small{display:block;min-width:0;font-style:normal}.admin-finance-tabs strong{overflow:hidden;font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.admin-finance-tabs small{margin-top:2px;overflow:hidden;color:var(--app-muted);font-size:.64rem;text-overflow:ellipsis;white-space:nowrap}.admin-finance-panels>section{padding:clamp(18px,2.5vw,25px)}.admin-finance-panels>section[hidden]{display:none}.admin-finance-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.admin-finance-panel-head h2{margin:4px 0;font-size:1.3rem;letter-spacing:-.025em}.admin-finance-panel-head p{margin:0;color:var(--app-muted);font-size:.79rem}.admin-finance-panel-tools{display:flex;align-items:flex-end;justify-content:flex-end;gap:9px;flex-wrap:wrap}.admin-finance-panel-tools label{align-self:center;color:var(--app-muted);font-size:.67rem;font-weight:700}.admin-finance-panel-tools select{min-width:145px;padding:8px 30px 8px 10px;border:1px solid var(--app-line);border-radius:9px;color:var(--app-ink);background:var(--app-surface);font:inherit;font-size:.7rem;cursor:pointer}.admin-finance-panel-tools select:focus{outline:2px solid rgba(8,116,79,.2);outline-offset:2px}.admin-finance-table tr[hidden]{display:none}
.admin-finance-notice{display:flex;align-items:flex-start;gap:11px;margin-bottom:15px;padding:13px 14px;border:1px solid rgba(40,117,199,.16);border-radius:12px;color:#2c659e;background:rgba(40,117,199,.06)}.admin-finance-notice>span{flex:0 0 auto; padding-top: 20px;}.admin-finance-notice strong,.admin-finance-notice small{display:block}.admin-finance-notice strong{font-size:.72rem}.admin-finance-notice small{margin-top:3px;color:var(--app-muted);font-size:.67rem;line-height:1.5}.admin-finance-table{min-width:900px}.admin-finance-table th{background:var(--app-bg);font-size:.67rem}.admin-finance-table .admin-table-primary{font-size:.78rem}.admin-finance-table .admin-table-secondary{font-size:.68rem}.admin-finance-amount{color:#08744f;font-size:.78rem}.admin-finance-cycle{font-size:.72rem;text-transform:capitalize}
.admin-finance-empty-state{display:grid;place-items:center;min-height:340px;padding:30px;text-align:center}.admin-finance-empty-state>span{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;color:#2875c7;background:#e5effa}.admin-finance-empty-state.is-alert>span{color:#a66e10;background:#f8edd4}.admin-finance-empty-state h3{margin:15px 0 6px;font-size:1rem}.admin-finance-empty-state p{max-width:590px;margin:0;color:var(--app-muted);font-size:.78rem;line-height:1.65}.admin-finance-empty-state a{margin-top:15px;color:#08744f;font-size:.74rem;font-weight:750}
.admin-finance-revenue-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}.admin-finance-revenue-summary>span{padding:15px;border:1px solid var(--app-line);border-radius:13px;background:var(--app-bg)}.admin-finance-revenue-summary small,.admin-finance-revenue-summary strong{display:block}.admin-finance-revenue-summary small{color:var(--app-muted);font-size:.67rem}.admin-finance-revenue-summary strong{margin-top:5px;font-size:.93rem}.admin-finance-chart{position:relative;height:300px;padding:10px 10px 34px}.admin-finance-chart svg{position:relative;z-index:1;width:100%;height:100%;overflow:visible}.admin-finance-chart polygon{fill:url(#adminFinanceFill)}.admin-finance-chart polyline{fill:none;stroke:#0e8a5f;stroke-width:1.5;vector-effect:non-scaling-stroke}.admin-finance-chart circle{fill:var(--app-surface);stroke:#0e8a5f;stroke-width:1.2;vector-effect:non-scaling-stroke}.admin-finance-chart>.admin-chart-grid{inset:10px 10px 34px}.admin-finance-chart>div{display:flex;justify-content:space-between;margin-top:6px;color:var(--app-muted);font-size:.65rem}
html[data-theme="dark"] .admin-finance-metrics .is-green>span{color:#8addae;background:rgba(14,138,95,.2)}html[data-theme="dark"] .admin-finance-metrics .is-blue>span{color:#8bc3ff;background:rgba(40,117,199,.2)}html[data-theme="dark"] .admin-finance-metrics .is-violet>span{color:#c4aff6;background:rgba(114,85,189,.2)}html[data-theme="dark"] .admin-finance-metrics .is-gold>span{color:#edc56e;background:rgba(183,123,22,.2)}html[data-theme="dark"] .admin-finance-empty-state>span{color:#8bc3ff;background:rgba(40,117,199,.2)}html[data-theme="dark"] .admin-finance-empty-state.is-alert>span{color:#edc56e;background:rgba(183,123,22,.2)}
@media(max-width:1100px){.admin-finance-metrics,.admin-finance-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.admin-finance-hero{align-items:flex-start;flex-direction:column}.admin-finance-hero-stat{width:100%}.admin-finance-panel-head{align-items:flex-start;flex-direction:column}.admin-finance-revenue-summary{grid-template-columns:1fr}.admin-finance-chart{height:245px}}@media(max-width:560px){.admin-finance-metrics,.admin-finance-tabs{grid-template-columns:1fr}.admin-finance-empty-state{min-height:290px;padding:20px}}

/* Finance follows the clean vendor settings layout. */
.admin-finance-modern { gap: 22px; }
.admin-finance-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 2px 0 4px; }
.admin-finance-page-head h1 { margin: 5px 0 7px; font-size: clamp(1.9rem,3.2vw,2.45rem); letter-spacing: -.05em; }
.admin-finance-page-head p { max-width: 710px; margin: 0; color: var(--app-muted); font-size: .86rem; line-height: 1.65; }
.admin-finance-sync-state { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(14,138,95,.16); border-radius: 999px; color: #08744f; background: rgba(14,138,95,.07); font-size: .69rem; font-weight: 750; white-space: nowrap; }
.admin-finance-workspace { display: grid; grid-template-columns: minmax(220px,265px) minmax(0,1fr); align-items: start; gap: 20px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.admin-finance-nav { position: sticky; top: 90px; display: grid; gap: 12px; }
.admin-finance-summary-card { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 15px; border: 1px solid var(--app-line); border-radius: 15px; background: var(--app-surface); }
.admin-finance-summary-card > span { flex: 0 0 39px; width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: #08744f; background: #e2f2e9; }
.admin-finance-summary-card > div { min-width: 0; }.admin-finance-summary-card small,.admin-finance-summary-card strong,.admin-finance-summary-card i { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-finance-summary-card small,.admin-finance-summary-card i { color: var(--app-muted); font-size: .61rem; font-style: normal; }.admin-finance-summary-card strong { margin: 3px 0; font-size: .82rem; }
.admin-finance-tabs { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 7px; border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-surface); }
.admin-finance-tabs button { grid-template-columns: 35px minmax(0,1fr); padding: 10px; border-radius: 11px; }
.admin-finance-tabs button:hover { background: var(--app-bg); }.admin-finance-tabs button.is-active { color: #fff; border-color: #08744f; background: #08744f; box-shadow: none; }
.admin-finance-tabs button.is-active > span { color: #08744f; background: #fff; }.admin-finance-tabs button.is-active small { color: rgba(255,255,255,.7); }
.admin-finance-nav-help { padding: 15px; border: 1px solid var(--app-line); border-radius: 15px; background: var(--app-surface); }.admin-finance-nav-help > span { color: var(--app-ink); font-size: .7rem; font-weight: 750; }.admin-finance-nav-help p { margin: 6px 0 10px; color: var(--app-muted); font-size: .65rem; line-height: 1.55; }.admin-finance-nav-help p strong { color: var(--app-ink); }.admin-finance-nav-help a { color: #08744f; font-size: .66rem; font-weight: 750; }
.admin-finance-panels { min-width: 0; }.admin-finance-panels > section { padding: clamp(20px,2.8vw,29px); border: 1px solid var(--app-line); border-radius: 18px; background: var(--app-surface); }.admin-finance-panel-head { padding-bottom: 18px; border-bottom: 1px solid var(--app-line); }.admin-finance-notice { margin-top: 18px; }.admin-finance-empty-state { min-height: 390px; }.admin-finance-revenue-summary { margin-top: 18px; }
html[data-theme="dark"] .admin-finance-summary-card > span { color: #8addae; background: rgba(14,138,95,.2); }
@media(max-width:900px){.admin-finance-workspace{grid-template-columns:1fr}.admin-finance-nav{position:static}.admin-finance-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-finance-nav-help{display:none}}
@media(max-width:620px){.admin-finance-page-head{align-items:flex-start;flex-direction:column}.admin-finance-tabs{grid-template-columns:1fr}.admin-finance-panels>section{padding:18px}.admin-finance-summary-card{display:none}}

/* Modern admin subscription workspace */
.admin-subscriptions-modern { --subscription-green: #08744f; --subscription-gold: #b77b16; --subscription-blue: #2875c7; --subscription-violet: #7255bd; gap: 20px; }
.admin-subscriptions-hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; overflow: hidden; padding: clamp(26px,4vw,40px); border-radius: 24px; color: #fff; background: radial-gradient(circle at 84% 12%,rgba(99,192,139,.27),transparent 25%),linear-gradient(125deg,#073e2d,#0a5940 62%,#08744f); }
.admin-subscriptions-hero::after { content: ""; position: absolute; right: 9%; bottom: -80px; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 31px rgba(255,255,255,.035),0 0 0 64px rgba(255,255,255,.02); }.admin-subscriptions-hero > * { position: relative; z-index: 1; }
.admin-subscriptions-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.07); font-size: .63rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }.admin-subscriptions-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #83e5aa; box-shadow: 0 0 0 4px rgba(131,229,170,.13); }
.admin-subscriptions-hero .dash-page-greeting { color: #8ee4b2; }.admin-subscriptions-hero h1 { max-width: 720px; margin: 6px 0 10px; font-size: clamp(1.8rem,3.5vw,2.65rem); letter-spacing: -.055em; }.admin-subscriptions-hero > div > p:last-child { max-width: 690px; margin: 0; color: rgba(255,255,255,.7); font-size: .82rem; line-height: 1.7; }
.admin-subscriptions-hero-stat { min-width: 205px; display: grid; gap: 4px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(5,48,34,.35); backdrop-filter: blur(8px); }.admin-subscriptions-hero-stat small,.admin-subscriptions-hero-stat i { color: rgba(255,255,255,.65); font-size: .62rem; font-style: normal; }.admin-subscriptions-hero-stat strong { font-size: 1.35rem; letter-spacing: -.035em; }.admin-subscriptions-hero-stat strong span { margin-right: 3px; font-size: .7rem; }
.admin-subscription-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }.admin-subscription-metrics article { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 17px; border: 1px solid var(--app-line); border-radius: 17px; background: var(--app-surface); }.admin-subscription-metrics article > span { flex: 0 0 39px; width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; }.admin-subscription-metrics article.is-green > span { color: var(--subscription-green); background: #e2f2e9; }.admin-subscription-metrics article.is-gold > span { color: var(--subscription-gold); background: #f8edd4; }.admin-subscription-metrics article.is-blue > span { color: var(--subscription-blue); background: #e5effa; }.admin-subscription-metrics article.is-violet > span { color: var(--subscription-violet); background: #eee9fa; }.admin-subscription-metrics p,.admin-subscription-metrics small,.admin-subscription-metrics strong,.admin-subscription-metrics i { display: block; min-width: 0; margin: 0; }.admin-subscription-metrics small { color: var(--app-muted); font-size: .59rem; }.admin-subscription-metrics strong { margin: 2px 0; font-size: 1.05rem; }.admin-subscription-metrics i { overflow: hidden; color: var(--app-muted); font-size: .58rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.admin-subscription-workspace { overflow: hidden; border: 1px solid var(--app-line); border-radius: 21px; background: var(--app-surface); }.admin-subscription-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; padding: 9px; border-bottom: 1px solid var(--app-line); background: var(--app-bg); }.admin-subscription-tabs button { min-width: 0; display: grid; grid-template-columns: 35px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid transparent; border-radius: 12px; color: var(--app-muted); background: transparent; text-align: left; cursor: pointer; }.admin-subscription-tabs button:hover { color: var(--app-ink); background: var(--app-surface); }.admin-subscription-tabs button.is-active { color: #08744f; border-color: rgba(8,116,79,.18); background: var(--app-surface); box-shadow: 0 5px 15px rgba(12,50,32,.05); }.admin-subscription-tabs button > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb,currentColor 10%,transparent); }.admin-subscription-tabs button > i,.admin-subscription-tabs strong,.admin-subscription-tabs small { display: block; min-width: 0; font-style: normal; }.admin-subscription-tabs strong { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }.admin-subscription-tabs small { margin-top: 2px; overflow: hidden; color: var(--app-muted); font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }.admin-subscription-tabs button > b { min-width: 26px; padding: 4px 6px; border-radius: 999px; background: var(--app-line); font-size: .53rem; text-align: center; }.admin-subscription-tabs button.is-active > b { color: #08744f; background: rgba(8,116,79,.1); }
.admin-subscription-panels > section { padding: clamp(18px,2.5vw,25px); }.admin-subscription-panels > section[hidden] { display: none; }.admin-subscription-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.admin-subscription-panel-head h2 { margin: 4px 0; font-size: 1.12rem; letter-spacing: -.025em; }.admin-subscription-panel-head h3 { margin: 4px 0; font-size: .86rem; }.admin-subscription-panel-head p { margin: 0; color: var(--app-muted); font-size: .68rem; }.admin-subscription-table { min-width: 930px; }.admin-subscription-table th { background: var(--app-bg); }
.admin-live-pricing { display: inline-flex; align-items: center; gap: 7px; color: #08744f; font-size: .62rem; font-weight: 750; }.admin-live-pricing i { width: 7px; height: 7px; border-radius: 50%; background: #0e8a5f; box-shadow: 0 0 0 4px rgba(14,138,95,.1); }
.admin-plan-editor-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; align-items: start; }.admin-plan-editor { display: grid; gap: 13px; min-width: 0; padding: 18px; border: 1px solid var(--app-line); border-radius: 17px; background: var(--app-bg); }.admin-plan-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--app-line); }.admin-plan-editor-head > div > span { color: #08744f; font-size: .53rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.admin-plan-editor-head h3 { margin: 3px 0 0; font-size: .84rem; }.admin-plan-editor > label,.admin-plan-editor-row label { display: grid; gap: 6px; color: var(--app-muted); font-size: .58rem; font-weight: 700; }.admin-plan-editor input[type="text"],.admin-plan-editor input[type="number"],.admin-plan-editor textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--app-line); border-radius: 10px; outline: 0; color: var(--app-ink); background: var(--app-surface); font: 600 .65rem "Instrument Sans",sans-serif; }.admin-plan-editor input:focus,.admin-plan-editor textarea:focus { border-color: #0e8a5f; box-shadow: 0 0 0 3px rgba(14,138,95,.1); }.admin-plan-editor-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.admin-plan-toggle { display: flex !important; align-items: center; gap: 6px; cursor: pointer; }.admin-plan-toggle input { position: absolute; opacity: 0; }.admin-plan-toggle > span { width: 30px; height: 18px; padding: 2px; border-radius: 999px; background: var(--app-line); }.admin-plan-toggle > span::after { content: ""; width: 14px; height: 14px; display: block; border-radius: 50%; background: var(--app-surface); transition: transform .2s ease; }.admin-plan-toggle input:checked + span { background: #0e8a5f; }.admin-plan-toggle input:checked + span::after { transform: translateX(12px); }.admin-plan-toggle i { color: var(--app-muted); font-size: .55rem; font-style: normal; }.admin-plan-editor details { border-top: 1px solid var(--app-line); border-bottom: 1px solid var(--app-line); }.admin-plan-editor summary { display: flex; justify-content: space-between; padding: 12px 0; color: var(--app-ink); font-size: .61rem; font-weight: 750; cursor: pointer; list-style: none; }.admin-plan-editor details[open] summary span { transform: rotate(45deg); }.admin-plan-editor details > .admin-plan-editor-row { margin-bottom: 11px; }.admin-plan-editor-checks { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }.admin-plan-editor-checks label { display: flex; align-items: center; gap: 5px; color: var(--app-muted); font-size: .57rem; }.admin-plan-editor-checks input { width: 16px; height: 16px; accent-color: #0e8a5f;}.admin-plan-editor > button { min-height: 39px; border: 0; border-radius: 10px; color: #fff; background: #08744f; font: 750 .64rem "Instrument Sans",sans-serif; cursor: pointer; }
.admin-token-overview { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: center; gap: 28px; padding: 23px; border: 1px solid var(--app-line); border-radius: 17px; background: var(--app-bg); }.admin-token-ring { --usage: 0; width: 138px; height: 138px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#0e8a5f calc(var(--usage)*1%),var(--app-line) 0); }.admin-token-ring::before { content: ""; grid-area: 1/1; width: 101px; height: 101px; border-radius: 50%; background: var(--app-bg); }.admin-token-ring > span { z-index: 1; grid-area: 1/1; text-align: center; }.admin-token-ring strong,.admin-token-ring small { display: block; }.admin-token-ring strong { font-size: 1.05rem; }.admin-token-ring small { color: var(--app-muted); font-size: .55rem; }.admin-token-overview h3 { margin: 5px 0; font-size: 1.1rem; }.admin-token-overview p { margin: 0; color: var(--app-muted); font-size: .65rem; }.admin-token-overview-bar { height: 7px; display: block; overflow: hidden; margin: 15px 0 8px; border-radius: 999px; background: var(--app-line); }.admin-token-overview-bar i { max-width: 100%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#08744f,#55c58e); }.admin-token-overview > div:last-child > small { color: var(--app-muted); font-size: .6rem; }.admin-token-ranking { margin-top: 18px; padding: 18px; border: 1px solid var(--app-line); border-radius: 17px; }.admin-token-ranking-list article { display: grid; grid-template-columns: minmax(150px,.75fr) minmax(210px,1fr) 42px; align-items: center; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--app-line); }.admin-token-ranking-list article:last-child { border: 0; }.admin-token-ranking-list article > span strong,.admin-token-ranking-list article > span small { display: block; }.admin-token-ranking-list article > span strong { overflow: hidden; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }.admin-token-ranking-list article > span small { margin-top: 3px; color: var(--app-muted); font-size: .56rem; }.admin-token-ranking-list article > div > span { height: 6px; display: block; overflow: hidden; border-radius: 999px; background: var(--app-line); }.admin-token-ranking-list article > div > span i { max-width: 100%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#2875c7,#68a6e8); }.admin-token-ranking-list article > div > small { display: block; margin-top: 5px; color: var(--app-muted); font-size: .55rem; }.admin-token-ranking-list article > b { font-size: .62rem; text-align: right; }
.admin-renewal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }.admin-renewal-grid article { min-width: 0; padding: 17px; border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-bg); }.admin-renewal-grid article > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.admin-renewal-grid article > div > small { color: var(--app-muted); font-size: .57rem; text-transform: capitalize; }.admin-renewal-grid h3 { margin: 16px 0 4px; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }.admin-renewal-grid p { margin: 0; color: var(--app-muted); font-size: .62rem; }.admin-renewal-grid footer { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--app-line); }.admin-renewal-grid footer span { min-width: 0; }.admin-renewal-grid footer small,.admin-renewal-grid footer strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-renewal-grid footer small { color: var(--app-muted); font-size: .53rem; }.admin-renewal-grid footer strong { margin-top: 3px; font-size: .58rem; text-transform: capitalize; }
html[data-theme="dark"] .admin-subscription-metrics article.is-green > span { color: #8addae; background: rgba(14,138,95,.2); } html[data-theme="dark"] .admin-subscription-metrics article.is-gold > span { color: #edc56e; background: rgba(183,123,22,.2); } html[data-theme="dark"] .admin-subscription-metrics article.is-blue > span { color: #8bc3ff; background: rgba(40,117,199,.2); } html[data-theme="dark"] .admin-subscription-metrics article.is-violet > span { color: #c4aff6; background: rgba(114,85,189,.2); }
@media(max-width:1100px){.admin-subscription-metrics,.admin-subscription-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-plan-editor-grid,.admin-renewal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.admin-subscriptions-hero{align-items:flex-start;flex-direction:column}.admin-subscriptions-hero-stat{width:100%}.admin-subscription-panel-head{align-items:flex-start;flex-direction:column}.admin-plan-editor-grid,.admin-renewal-grid{grid-template-columns:1fr}.admin-token-overview{grid-template-columns:1fr}.admin-token-ranking-list article{grid-template-columns:minmax(0,1fr) 45px}.admin-token-ranking-list article>div{grid-column:1/-1;grid-row:2}}
@media(max-width:560px){.admin-subscription-metrics,.admin-subscription-tabs{grid-template-columns:1fr}.admin-subscription-tabs button{grid-template-columns:35px minmax(0,1fr) auto}.admin-plan-editor-row{grid-template-columns:1fr}.admin-token-overview{padding:17px}.admin-renewal-grid footer{grid-template-columns:1fr}}

/* Modern admin vendor directory */
.admin-vendors-modern { --vendor-green: #08744f; --vendor-blue: #2875c7; --vendor-violet: #7255bd; --vendor-gold: #bc8017; gap: 20px; }

.admin-vendors-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; overflow: hidden; position: relative; padding: clamp(25px, 4vw, 40px); border-radius: 24px; color: #fff; background: radial-gradient(circle at 82% 18%, rgba(118, 208, 155, .25), transparent 24%), linear-gradient(125deg, #073e2d, #0b5e43 60%, #08744f); }
.admin-vendors-hero::after { content: ""; position: absolute; right: 12%; bottom: -72px; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.035), 0 0 0 58px rgba(255,255,255,.025); }
.admin-vendors-hero > * { position: relative; z-index: 1; }
.admin-vendors-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 19px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.07); font-size: .64rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.admin-vendors-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #83e5aa; box-shadow: 0 0 0 4px rgba(131,229,170,.13); }
.admin-vendors-hero .dash-page-greeting { color: #8ee4b2; }
.admin-vendors-hero h1 { max-width: 700px; margin: 6px 0 10px; font-size: clamp(1.8rem, 3.5vw, 2.65rem); letter-spacing: -.055em; }
.admin-vendors-hero > div > p:last-child { max-width: 690px; margin: 0; color: rgba(255,255,255,.7); font-size: .82rem; line-height: 1.7; }
.admin-vendors-total { min-width: 160px; display: grid; gap: 3px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(5,48,34,.35); backdrop-filter: blur(8px); }
.admin-vendors-total small,.admin-vendors-total i { color: rgba(255,255,255,.65); font-size: .62rem; font-style: normal; }
.admin-vendors-total strong { font-size: 1.8rem; letter-spacing: -.04em; }

.admin-vendor-insights { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.admin-vendor-insights article { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 17px; border: 1px solid var(--app-line); border-radius: 17px; background: var(--app-surface); }
.admin-vendor-insights article > span { flex: 0 0 39px; width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; }
.admin-vendor-insights article.is-green > span { color: var(--vendor-green); background: #e2f2e9; }
.admin-vendor-insights article.is-blue > span { color: var(--vendor-blue); background: #e5effa; }
.admin-vendor-insights article.is-violet > span { color: var(--vendor-violet); background: #eee9fa; }
.admin-vendor-insights article.is-gold > span { color: var(--vendor-gold); background: #f8edd4; }
.admin-vendor-insights p,.admin-vendor-insights small,.admin-vendor-insights strong,.admin-vendor-insights i { display: block; min-width: 0; margin: 0; }
.admin-vendor-insights small { color: var(--app-muted); font-size: .6rem; }
.admin-vendor-insights strong { margin: 2px 0; color: var(--app-ink); font-size: 1.05rem; }
.admin-vendor-insights i { overflow: hidden; color: var(--app-muted); font-size: .59rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.admin-vendor-filter { grid-template-columns: minmax(260px,1fr) minmax(170px,220px) auto auto; }
.admin-search-field { position: relative; display: block; }
.admin-search-field svg { position: absolute; top: 50%; left: 13px; color: var(--app-muted); transform: translateY(-50%); pointer-events: none; }
.admin-search-field input { width: 100%; padding-left: 39px !important; }
.admin-vendor-directory { overflow: hidden; border: 1px solid var(--app-line); border-radius: 21px; background: var(--app-surface); }
.admin-vendor-directory-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 23px; border-bottom: 1px solid var(--app-line); }
.admin-vendor-directory-head h2 { margin: 4px 0; font-size: 1.12rem; letter-spacing: -.025em; }
.admin-vendor-directory-head p { margin: 0; color: var(--app-muted); font-size: .7rem; }
.admin-vendor-directory-head > span { color: var(--app-muted); font-size: .65rem; font-weight: 700; }
.admin-vendor-table-wrap { overflow-x: auto; }
.admin-vendor-table { min-width: 1020px; }
.admin-vendor-table th { padding: 12px 15px; color: var(--app-muted); background: var(--app-bg); font-size: .58rem; letter-spacing: .045em; text-transform: uppercase; }
.admin-vendor-table td { padding: 13px 15px; vertical-align: middle; }
.admin-vendor-table tbody tr { transition: background .18s ease; }
.admin-vendor-table tbody tr:hover { background: color-mix(in srgb, #0e8a5f 3%, var(--app-surface)); }
.admin-vendor-table-identity { min-width: 210px; display: flex; align-items: center; gap: 10px; }
.admin-vendor-table-identity > i { flex: 0 0 37px; width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; color: #08744f; background: #dff1e7; font-size: .76rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.admin-vendor-table-identity > span { min-width: 0; }
.admin-vendor-table-identity strong,.admin-vendor-table-identity small { display: block; overflow: hidden; max-width: 190px; text-overflow: ellipsis; white-space: nowrap; }
.admin-vendor-table-identity strong { color: var(--app-ink); font-size: .7rem; }
.admin-vendor-table-identity small,.admin-vendor-table-subtext { margin-top: 3px; color: var(--app-muted); font-size: .58rem; }
.admin-vendor-table-plan { display: block; margin-bottom: 3px; color: var(--app-ink); font-size: .66rem; }
.admin-vendor-table-connection { display: inline-flex; align-items: center; gap: 6px; color: var(--app-muted); font-size: .63rem; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.admin-vendor-table-connection i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.admin-vendor-table-connection.is-connected { color: #08744f; }
.admin-vendor-table-subtext { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-vendor-table-usage { min-width: 130px; }
.admin-vendor-table-usage strong { display: block; color: var(--app-ink); font-size: .64rem; }
.admin-vendor-table-usage strong small { color: var(--app-muted); font-weight: 600; }
.admin-vendor-table-usage > span { width: 100%; height: 5px; display: block; overflow: hidden; margin-top: 7px; border-radius: 999px; background: var(--app-line); }
.admin-vendor-table-usage > span i { max-width: 100%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#08744f,#42ae7d); }
.admin-vendor-table-activity strong { font-size: .67rem; }.admin-vendor-table-activity small { margin-left: 3px; color: var(--app-muted); font-size: .57rem; }
.admin-vendor-table-date { display: block; max-width: 125px; color: var(--app-muted); font-size: .61rem; white-space: normal; }
.admin-vendor-table-view { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(8,116,79,.2); border-radius: 9px; color: #08744f; background: rgba(8,116,79,.06); font: 750 .61rem "Instrument Sans",sans-serif; cursor: pointer; }.admin-vendor-table-view:hover { background: rgba(8,116,79,.11); }
.admin-vendor-empty { display: grid; place-items: center; min-height: 290px; text-align: center; }.admin-vendor-empty > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: #08744f; background: #e1f2e8; }.admin-vendor-empty h3 { margin: 13px 0 4px; font-size: .9rem; }.admin-vendor-empty p { margin: 0; color: var(--app-muted); font-size: .7rem; }.admin-vendor-empty a { margin-top: 13px; color: #08744f; font-size: .66rem; font-weight: 750; }

body.admin-vendor-modal-open { overflow: hidden; }
.admin-vendor-modal[hidden] { display: none; }
.admin-vendor-modal { position: fixed; inset: 0; z-index: 1000; display: grid; justify-items: end; }
.admin-vendor-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(5,20,14,.32); cursor: default; animation: adminFadeIn .2s ease; }
.admin-vendor-modal-panel { position: relative; width: min(780px,calc(100vw - 24px)); height: 100%; overflow: auto; border-left: 1px solid var(--app-line); background: var(--app-bg); box-shadow: -24px 0 55px rgba(5,25,16,.15); animation: adminSlideIn .24s ease; }
@keyframes adminFadeIn { from { opacity: 0; } } @keyframes adminSlideIn { from { transform: translateX(28px); opacity: .75; } }
.admin-vendor-modal-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 23px; border-bottom: 1px solid var(--app-line); background: color-mix(in srgb,var(--app-bg) 94%,transparent); backdrop-filter: blur(14px); }
.admin-vendor-modal-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }.admin-vendor-modal-identity > span { flex: 0 0 45px; width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; color: #08744f; background: #dff1e7; font-weight: 800; text-transform: uppercase; }.admin-vendor-modal-identity > div { min-width: 0; }.admin-vendor-modal-identity small { color: #08744f; font-size: .57rem; font-weight: 750; }.admin-vendor-modal-identity h2 { margin: 2px 0; overflow: hidden; font-size: 1.03rem; text-overflow: ellipsis; white-space: nowrap; }.admin-vendor-modal-identity p { margin: 0; color: var(--app-muted); font-size: .64rem; }
.admin-vendor-modal-head > button { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--app-line); border-radius: 11px; color: var(--app-muted); background: var(--app-surface); cursor: pointer; }
.admin-vendor-modal-body { display: grid; gap: 15px; padding: 19px; }
.admin-vendor-detail-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--app-line); border-radius: 15px; background: var(--app-surface); }.admin-vendor-detail-strip > span { min-width: 0; padding: 15px; border-right: 1px solid var(--app-line); }.admin-vendor-detail-strip > span:last-child { border: 0; }.admin-vendor-detail-strip small,.admin-vendor-detail-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-vendor-detail-strip small { color: var(--app-muted); font-size: .56rem; }.admin-vendor-detail-strip strong { margin-top: 5px; font-size: .65rem; text-transform: capitalize; }
.admin-vendor-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.admin-vendor-detail-card { min-width: 0; padding: 18px; border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-surface); }.admin-vendor-detail-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.admin-vendor-detail-card-head h3 { margin: 4px 0 0; font-size: .82rem; }.admin-vendor-detail-card-head p { margin: 4px 0 0; color: var(--app-muted); font-size: .62rem; }.admin-vendor-detail-card-head > span { color: var(--app-muted); font-size: .59rem; font-weight: 700; }
.admin-vendor-token-chart { display: flex; align-items: center; gap: 22px; padding-top: 17px; }.admin-vendor-token-chart > div { --usage: 0; flex: 0 0 122px; width: 122px; height: 122px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#0e8a5f calc(var(--usage)*1%),var(--app-line) 0); }.admin-vendor-token-chart > div::before { content: ""; grid-area: 1/1; width: 89px; height: 89px; border-radius: 50%; background: var(--app-surface); }.admin-vendor-token-chart > div span { z-index: 1; grid-area: 1/1; text-align: center; }.admin-vendor-token-chart strong,.admin-vendor-token-chart small { display: block; }.admin-vendor-token-chart strong { font-size: .77rem; }.admin-vendor-token-chart small { margin-top: 2px; color: var(--app-muted); font-size: .51rem; }.admin-vendor-token-chart p { display: grid; gap: 8px; margin: 0; color: var(--app-muted); font-size: .58rem; }.admin-vendor-token-chart p span { display: flex; align-items: center; gap: 6px; }.admin-vendor-token-chart p i { width: 7px; height: 7px; border-radius: 50%; background: #0e8a5f; }.admin-vendor-token-chart p span:nth-child(2) i { background: var(--app-line); }
.admin-vendor-bar-chart { height: 158px; display: flex; align-items: flex-end; justify-content: space-around; gap: 16px; padding-top: 20px; }.admin-vendor-bar-chart > div { height: 100%; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 4px; }.admin-vendor-bar-chart > div > span { width: 38px; height: 100%; display: flex; align-items: flex-end; overflow: hidden; border-radius: 8px 8px 4px 4px; background: var(--app-bg); }.admin-vendor-bar-chart i { width: 100%; min-height: 8px; display: block; border-radius: inherit; background: linear-gradient(180deg,#42ae7d,#08744f); }.admin-vendor-bar-chart > div:nth-child(2) i { background: linear-gradient(180deg,#65a5e8,#2875c7); }.admin-vendor-bar-chart > div:nth-child(3) i { background: linear-gradient(180deg,#987dd9,#7255bd); }.admin-vendor-bar-chart strong { font-size: .64rem; }.admin-vendor-bar-chart small { color: var(--app-muted); font-size: .53rem; }
.admin-vendor-profile-list { display: grid; gap: 0; margin: 12px 0 0; }.admin-vendor-profile-list > div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--app-line); font-size: .63rem; }.admin-vendor-profile-list > div:last-child { border: 0; }.admin-vendor-profile-list dt { color: var(--app-muted); }.admin-vendor-profile-list dd { max-width: 65%; margin: 0; overflow: hidden; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.admin-vendor-access-copy { margin: 12px 0 14px; color: var(--app-muted); font-size: .63rem; line-height: 1.55; }.admin-vendor-status-form { display: flex; align-items: flex-end; gap: 9px; }.admin-vendor-status-form label { flex: 1; display: grid; gap: 6px; color: var(--app-muted); font-size: .58rem; font-weight: 700; }.admin-vendor-status-form select { width: 100%; min-height: 39px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 10px; color: var(--app-ink); background: var(--app-bg); font: 650 .66rem "Instrument Sans",sans-serif; }.admin-vendor-status-form button { min-height: 39px; padding: 0 13px; border: 0; border-radius: 10px; color: #fff; background: #08744f; font: 750 .63rem "Instrument Sans",sans-serif; cursor: pointer; }
.admin-vendor-log-card { padding-bottom: 8px; }.admin-vendor-log { margin-top: 12px; }.admin-vendor-log article { position: relative; display: grid; grid-template-columns: 35px minmax(0,1fr) auto; gap: 12px; padding: 10px 0; }.admin-vendor-log article:not(:last-child)::after { content: ""; position: absolute; top: 44px; bottom: -10px; left: 17px; width: 1px; background: var(--app-line); }.admin-vendor-log article > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; }.admin-vendor-log span.is-green { color: var(--vendor-green); background: #e2f2e9; }.admin-vendor-log span.is-blue { color: var(--vendor-blue); background: #e5effa; }.admin-vendor-log span.is-violet { color: var(--vendor-violet); background: #eee9fa; }.admin-vendor-log span.is-gold { color: var(--vendor-gold); background: #f8edd4; }.admin-vendor-log strong { display: block; font-size: .66rem; }.admin-vendor-log p { margin: 3px 0 0; color: var(--app-muted); font-size: .59rem; }.admin-vendor-log time { color: var(--app-muted); font-size: .55rem; white-space: nowrap; }
.admin-vendor-payment-empty{display:flex;align-items:center;justify-content:center;gap:12px;min-height:120px;color:var(--app-muted);text-align:left}.admin-vendor-payment-empty>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--vendor-green);background:#e2f2e9}.admin-vendor-payment-empty strong{color:var(--app-ink)}.admin-vendor-payment-empty p{margin:4px 0 0}

.vendor-notification-center{gap:20px}.vendor-notification-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:30px;border-radius:23px;color:#fff;background:radial-gradient(circle at 88% 5%,rgba(109,210,154,.25),transparent 27%),linear-gradient(125deg,#063c2b,#08744f)}.vendor-notification-hero h1{margin:5px 0 8px;font-size:clamp(1.85rem,3.2vw,2.5rem);letter-spacing:-.05em}.vendor-notification-hero p{max-width:720px;margin:0;color:rgba(255,255,255,.7);font-size:.8rem;line-height:1.65}.vendor-notification-hero .dash-kicker{color:#9be6ba}.vendor-notification-total{min-width:165px;padding:15px 18px;border:1px solid rgba(255,255,255,.15);border-radius:15px;background:rgba(3,46,31,.3)}.vendor-notification-total small,.vendor-notification-total strong,.vendor-notification-total i{display:block}.vendor-notification-total small,.vendor-notification-total i{color:rgba(255,255,255,.65);font-size:.64rem;font-style:normal}.vendor-notification-total strong{margin:3px 0;font-size:1.5rem}.vendor-notification-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.vendor-notification-summary article{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--app-line);border-radius:16px;background:var(--app-surface)}.vendor-notification-summary article>span{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;font-weight:800}.vendor-notification-summary .is-green>span{color:#08744f;background:#e2f2e9}.vendor-notification-summary .is-gold>span{color:#a66e10;background:#f8edd4}.vendor-notification-summary .is-blue>span{color:#2875c7;background:#e5effa}.vendor-notification-summary .is-violet>span{color:#7255bd;background:#eee9fa}.vendor-notification-summary small,.vendor-notification-summary strong,.vendor-notification-summary p{display:block;margin:0}.vendor-notification-summary small{color:var(--app-muted);font-size:.63rem}.vendor-notification-summary strong{margin:2px 0;font-size:1.05rem}.vendor-notification-summary p{color:var(--app-muted);font-size:.61rem}.vendor-notification-workspace{overflow:hidden;border:1px solid var(--app-line);border-radius:19px;background:var(--app-surface)}.vendor-notification-workspace>header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:21px 22px;border-bottom:1px solid var(--app-line)}.vendor-notification-workspace h2{margin:4px 0;font-size:1.22rem}.vendor-notification-workspace header p{margin:0;color:var(--app-muted);font-size:.7rem}.vendor-notification-workspace>header>span{color:var(--app-muted);font-size:.66rem;font-weight:750}.vendor-notification-filters{display:flex;gap:7px;padding:12px 22px;overflow-x:auto;border-bottom:1px solid var(--app-line);background:var(--app-bg)}.vendor-notification-filters button{flex:0 0 auto;padding:8px 11px;border:1px solid transparent;border-radius:9px;color:var(--app-muted);background:transparent;font:700 .65rem "Instrument Sans",sans-serif;cursor:pointer}.vendor-notification-filters button:hover{color:var(--app-ink);background:var(--app-surface)}.vendor-notification-filters button.is-active{color:#fff;background:#08744f}.vendor-notification-feed{padding:5px 22px}.vendor-notification-feed article{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid var(--app-line)}.vendor-notification-feed article[hidden]{display:none}.vendor-notification-feed article:last-of-type{border:0}.vendor-notification-feed-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px}.vendor-notification-feed-icon.is-green{color:#08744f;background:#e2f2e9}.vendor-notification-feed-icon.is-blue{color:#2875c7;background:#e5effa}.vendor-notification-feed-icon.is-warn{color:#a66e10;background:#f8edd4}.vendor-notification-feed article>div>span{display:flex;align-items:center;gap:8px}.vendor-notification-feed strong{font-size:.75rem}.vendor-notification-feed article>div i{padding:3px 6px;border-radius:999px;font-size:.52rem;font-style:normal;font-weight:800;text-transform:capitalize}.vendor-notification-feed article>div i.is-ready{color:#08744f;background:#e2f2e9}.vendor-notification-feed article>div i.is-warn{color:#986510;background:#f8edd4}.vendor-notification-feed p{margin:4px 0;color:var(--app-muted);font-size:.67rem;line-height:1.5}.vendor-notification-feed time{color:var(--app-muted);font-size:.58rem}.vendor-notification-feed article>a{color:#08744f;font-size:.65rem;font-weight:750;white-space:nowrap}.vendor-notification-empty{display:grid;place-items:center;min-height:260px;text-align:center}.vendor-notification-empty[hidden]{display:none}.vendor-notification-empty>span{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;color:#08744f;background:#e2f2e9}.vendor-notification-empty h3{margin:13px 0 4px;font-size:.88rem}.vendor-notification-empty p{margin:0;color:var(--app-muted);font-size:.67rem}html[data-theme="dark"] .vendor-notification-summary .is-green>span,html[data-theme="dark"] .vendor-notification-feed-icon.is-green,html[data-theme="dark"] .vendor-notification-feed article>div i.is-ready{color:#8addae;background:rgba(14,138,95,.2)}html[data-theme="dark"] .vendor-notification-summary .is-gold>span,html[data-theme="dark"] .vendor-notification-feed-icon.is-warn,html[data-theme="dark"] .vendor-notification-feed article>div i.is-warn{color:#edc56e;background:rgba(183,123,22,.2)}html[data-theme="dark"] .vendor-notification-summary .is-blue>span,html[data-theme="dark"] .vendor-notification-feed-icon.is-blue{color:#8bc3ff;background:rgba(40,117,199,.2)}html[data-theme="dark"] .vendor-notification-summary .is-violet>span{color:#c4aff6;background:rgba(114,85,189,.2)}@media(max-width:950px){.vendor-notification-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.vendor-notification-hero,.vendor-notification-workspace>header{align-items:flex-start;flex-direction:column}.vendor-notification-total{width:100%}.vendor-notification-feed{padding:5px 16px}.vendor-notification-feed article{grid-template-columns:40px minmax(0,1fr)}.vendor-notification-feed article>a{grid-column:2}}@media(max-width:480px){.vendor-notification-summary{grid-template-columns:1fr}.vendor-notification-hero{padding:23px}.vendor-notification-filters{padding:11px 16px}}

/* Keep every dashboard dialog visually consistent with the admin access modal. */
.vendor-password-backdrop,
.dash-confirm-backdrop,
.admin-access-action-backdrop,
.admin-detail-backdrop,
.admin-vendor-modal-backdrop {
    background: rgba(4, 20, 14, .48);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: adminFadeIn .2s ease;
}

html[data-theme="dark"] .admin-vendor-table-identity > i,html[data-theme="dark"] .admin-vendor-modal-identity > span { color: #8addae; background: rgba(14,138,95,.2); }
html[data-theme="dark"] .admin-vendor-insights article.is-green > span,html[data-theme="dark"] .admin-vendor-log span.is-green { color: #8addae; background: rgba(14,138,95,.2); }
html[data-theme="dark"] .admin-vendor-insights article.is-blue > span,html[data-theme="dark"] .admin-vendor-log span.is-blue { color: #8bc3ff; background: rgba(40,117,199,.2); }
html[data-theme="dark"] .admin-vendor-insights article.is-violet > span,html[data-theme="dark"] .admin-vendor-log span.is-violet { color: #c4aff6; background: rgba(114,85,189,.2); }
html[data-theme="dark"] .admin-vendor-insights article.is-gold > span,html[data-theme="dark"] .admin-vendor-log span.is-gold { color: #edc56e; background: rgba(188,128,23,.2); }

@media (max-width: 1100px) { .admin-vendor-insights { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) { .admin-vendors-hero { align-items: flex-start; flex-direction: column; }.admin-vendors-total { width: 100%; }.admin-vendor-filter { grid-template-columns: 1fr 1fr; }.admin-vendor-filter .admin-search { grid-column: 1/-1; }.admin-vendor-filter .dash-button { width: 100%; }.admin-vendor-detail-grid { grid-template-columns: 1fr; }.admin-vendor-detail-strip { grid-template-columns: repeat(2,1fr); }.admin-vendor-detail-strip > span:nth-child(2) { border-right: 0; }.admin-vendor-detail-strip > span:nth-child(-n+2) { border-bottom: 1px solid var(--app-line); } }
@media (max-width: 580px) { .admin-vendor-insights,.admin-vendor-filter { grid-template-columns: 1fr; }.admin-vendor-filter .admin-search { grid-column: auto; }.admin-vendor-directory-head { align-items: flex-start; flex-direction: column; }.admin-vendor-table-view span { display: none; }.admin-vendor-modal-panel { width: 100%; }.admin-vendor-modal-body { padding: 13px; }.admin-vendor-modal-head { padding: 16px; }.admin-vendor-modal-identity p { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-vendor-token-chart { align-items: flex-start; flex-direction: column; }.admin-vendor-log article { grid-template-columns: 35px minmax(0,1fr); }.admin-vendor-log time { grid-column: 2; }.admin-vendor-status-form { align-items: stretch; flex-direction: column; }.admin-vendor-status-form button { width: 100%; } }

/* Modern admin overview */
.admin-overview-modern {
    width: 100%;
    max-width: none;
    gap: 22px;
}

.admin-overview-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(370px, .75fr);
    align-items: stretch;
    gap: 30px;
    overflow: hidden;
    padding: clamp(28px, 4vw, 42px);
    border: 1px solid #143b2b;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 8% 100%, rgba(64, 190, 132, .2), transparent 35%),
        radial-gradient(circle at 90% 5%, rgba(221, 190, 79, .12), transparent 30%),
        #102f23;
}

.admin-overview-hero::after {
    content: "";
    position: absolute;
    right: 34%;
    bottom: -100px;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255, 255, 255, .018), 0 0 0 60px rgba(255, 255, 255, .012);
    pointer-events: none;
}

.admin-overview-copy,
.admin-overview-health {
    position: relative;
    z-index: 1;
}

.admin-live-pill {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .06);
    font-size: .66rem;
    font-weight: 750;
}

.admin-live-pill i,
.admin-overview-health-head span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #66d49c;
    box-shadow: 0 0 0 4px rgba(102, 212, 156, .12);
}

.admin-overview-copy .dash-page-greeting {
    margin: 22px 0 0;
    color: #84d2ab;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-overview-copy h1 {
    max-width: 620px;
    margin: 5px 0 0;
    color: #fff;
    font: 700 clamp(2rem, 4vw, 3rem) "Instrument Sans", sans-serif;
    letter-spacing: -.055em;
    line-height: 1.04;
}

.admin-overview-copy > p:last-of-type {
    max-width: 620px;
    margin: 13px 0 0;
    color: rgba(255, 255, 255, .64);
    font-size: .84rem;
    line-height: 1.65;
}

.admin-overview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 23px;
}

.admin-overview-actions .dash-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    text-decoration: none;
}

.admin-overview-actions .admin-primary-action {
    color: #143326;
    border-color: #8fe0b5;
    background: #8fe0b5;
}

.admin-overview-actions .dash-button-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .04);
}

.admin-overview-health {
    align-self: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .065);
}

.admin-overview-health-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.admin-overview-health-head span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .67rem;
    font-weight: 750;
}

.admin-overview-health-head small {
    color: rgba(255, 255, 255, .46);
    font-size: .59rem;
}

.admin-overview-health-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-overview-health-grid > span {
    min-width: 0;
    padding: 15px;
    border-right: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.admin-overview-health-grid > span:nth-child(even) { border-right: 0; }
.admin-overview-health-grid > span:nth-last-child(-n+2) { border-bottom: 0; }
.admin-overview-health-grid small,
.admin-overview-health-grid strong,
.admin-overview-health-grid i { display: block; }
.admin-overview-health-grid small { color: rgba(255, 255, 255, .48); font-size: .59rem; }
.admin-overview-health-grid strong { overflow-wrap: anywhere; margin-top: 5px; color: #fff; font: 700 1.08rem "Space Grotesk", sans-serif; }
.admin-overview-health-grid strong b { font-size: .58em; font-weight: 650; }
.admin-overview-health-grid i { margin-top: 4px; color: #75cfa1; font-size: .55rem; font-style: normal; }

.admin-overview-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.admin-overview-metric {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--app-line);
    border-radius: 17px;
    background: var(--app-surface);
}

.admin-overview-metric::after {
    content: "";
    position: absolute;
    right: -26px;
    bottom: -30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: currentColor;
    opacity: .035;
}

.admin-overview-metric.is-green { color: #08744f; border-color: #bcdcca; background: #e6f3eb; }
.admin-overview-metric.is-gold { color: #85600f; border-color: #ded09e; background: #f7edcf; }
.admin-overview-metric.is-blue { color: #335f9b; border-color: #b9d0df; background: #e2edf4; }
.admin-overview-metric.is-violet { color: #684b88; border-color: #d2bfdb; background: #eee3f2; }

.admin-overview-metric-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: currentColor;
    background: rgba(255, 255, 255, .54);
}

.admin-overview-metric-tag {
    position: absolute;
    top: 22px;
    right: 18px;
    max-width: 115px;
    color: currentColor;
    font-size: .6rem;
    font-weight: 750;
    text-align: right;
}

.admin-overview-metric p {
    margin: 18px 0 4px;
    color: rgba(21, 38, 30, .68);
    font-size: .76rem;
    font-weight: 650;
}

.admin-overview-metric > strong {
    display: block;
    overflow-wrap: anywhere;
    color: #16251e;
    font: 700 clamp(1.55rem, 2.6vw, 2rem) "Instrument Sans", sans-serif;
    letter-spacing: -.045em;
}

.admin-overview-metric > strong small {
    margin-right: 2px;
    font-size: .55em;
}

.admin-overview-metric > small,
.admin-overview-metric-foot {
    display: block;
    margin-top: 8px;
    color: rgba(21, 38, 30, .58);
    font-size: .66rem;
}

.admin-overview-metric > small b { color: currentColor; }

.admin-overview-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .65fr);
    align-items: stretch;
    gap: 18px;
}

.admin-overview-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--app-line);
    border-radius: 18px;
    background: var(--app-surface);
}

.admin-overview-payments code { color: var(--app-ink); font: 700 .68rem "IBM Plex Mono", monospace; }

.admin-overview-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.admin-overview-card-head h2,
.admin-overview-card-head p {
    margin: 0;
}

.admin-overview-card-head h2 {
    margin-top: 4px;
    color: var(--app-ink);
    font: 700 1.05rem "Instrument Sans", sans-serif;
    letter-spacing: -.025em;
}

.admin-overview-card-head p {
    margin-top: 5px;
    color: var(--app-muted);
    font-size: .7rem;
    line-height: 1.5;
}

.admin-overview-card-head > a {
    flex: none;
    color: #08744f;
    font-size: .68rem;
    font-weight: 750;
    text-decoration: none;
}

.admin-overview-card-head > a span { margin-left: 4px; }

.admin-revenue-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 22px;
}

.admin-revenue-summary span,
.admin-revenue-summary small,
.admin-revenue-summary strong { display: block; }
.admin-revenue-summary small { color: var(--app-muted); font-size: .61rem; }
.admin-revenue-summary strong { margin-top: 4px; color: var(--app-ink); font: 700 1rem "Space Grotesk", sans-serif; }

.admin-revenue-chart {
    position: relative;
    height: 260px;
    margin-top: 15px;
    padding-bottom: 30px;
}

.admin-chart-grid {
    position: absolute;
    inset: 5px 0 30px;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
}

.admin-chart-grid i {
    border-top: 1px dashed var(--app-line);
}

.admin-revenue-chart svg {
    position: absolute;
    inset: 0 0 30px;
    z-index: 1;
    width: 100%;
    height: calc(100% - 30px);
    overflow: visible;
}

.admin-revenue-area { fill: url(#adminOverviewFill); }
.admin-revenue-line { fill: none; stroke: #0e8a5f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.admin-revenue-chart circle { fill: #fff; stroke: #0e8a5f; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.admin-revenue-labels { position: absolute; right: 4%; bottom: 0; left: 4%; display: flex; justify-content: space-between; gap: 8px; color: var(--app-muted); font-size: .61rem; }

.admin-overview-side-stack {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 18px;
}

.admin-platform-pulse-list {
    display: grid;
    gap: 1px;
    margin-top: 14px;
}

.admin-platform-pulse-list > div {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--app-line);
}

.admin-platform-pulse-list > div:last-child { border-bottom: 0; }
.admin-platform-pulse-list > div > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; }
.admin-platform-pulse-list > div > span.is-green { color: #08744f; background: #e0f2e8; }
.admin-platform-pulse-list > div > span.is-blue { color: #335f9b; background: #e3edf5; }
.admin-platform-pulse-list > div > span.is-gold { color: #85600f; background: #f8edce; }
.admin-platform-pulse-list > div > span.is-violet { color: #684b88; background: #eee4f2; }
.admin-platform-pulse-list p,
.admin-platform-pulse-list small,
.admin-platform-pulse-list strong { display: block; margin: 0; }
.admin-platform-pulse-list small { color: var(--app-muted); font-size: .62rem; }
.admin-platform-pulse-list strong { margin-top: 3px; color: var(--app-ink); font-size: .75rem; }

.admin-quick-actions > div:last-child {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.admin-quick-actions > div:last-child a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--app-ink);
    text-decoration: none;
}

.admin-quick-actions > div:last-child a:hover {
    border-color: var(--app-line);
    background: var(--app-bg);
}

.admin-quick-actions a > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #08744f; background: #e3f2e9; }
.admin-quick-actions p,
.admin-quick-actions strong,
.admin-quick-actions small { display: block; margin: 0; }
.admin-quick-actions strong { font-size: .7rem; }
.admin-quick-actions small { margin-top: 2px; color: var(--app-muted); font-size: .6rem; }
.admin-quick-actions a > i { color: var(--app-muted); font-size: .75rem; font-style: normal; }

.admin-modern-empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 24px;
    text-align: center;
}

.admin-modern-empty > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 12px;
    color: #08744f;
    background: #e4f3ea;
    font-size: 1rem;
}

.admin-modern-empty strong { color: var(--app-ink); font-size: .78rem; }
.admin-modern-empty p { margin: 5px 0 0; color: var(--app-muted); font-size: .68rem; }

html[data-theme="dark"] .admin-overview-metric.is-green,
html[data-theme="dark"] .admin-overview-metric.is-gold,
html[data-theme="dark"] .admin-overview-metric.is-blue,
html[data-theme="dark"] .admin-overview-metric.is-violet {
    color: var(--app-ink);
    border-color: var(--app-line);
    background: var(--app-surface);
}

html[data-theme="dark"] .admin-overview-metric p,
html[data-theme="dark"] .admin-overview-metric > small,
html[data-theme="dark"] .admin-overview-metric-foot { color: var(--app-muted); }
html[data-theme="dark"] .admin-overview-metric > strong { color: var(--app-ink); }
html[data-theme="dark"] .admin-revenue-chart circle { fill: var(--app-surface); }

@media (max-width: 1120px) {
    .admin-overview-hero { grid-template-columns: 1fr; }
    .admin-overview-health { width: 100%; max-width: 620px; }
    .admin-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-overview-main-grid { grid-template-columns: 1fr; }
    .admin-overview-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
}

@media (max-width: 700px) {
    .admin-overview-hero { padding: 24px 20px; border-radius: 19px; }
    .admin-overview-actions { flex-direction: column; }
    .admin-overview-actions .dash-button { width: 100%; }
    .admin-overview-side-stack { grid-template-columns: 1fr; }
    .admin-overview-card-head { flex-direction: column; }
    .admin-revenue-chart { height: 215px; }
}

@media (max-width: 520px) {
    .admin-overview-health-grid,
    .admin-overview-metrics { grid-template-columns: 1fr; }
    .admin-overview-health-grid > span { border-right: 0; }
    .admin-overview-health-grid > span:nth-last-child(2) { border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .admin-overview-metric { padding: 18px; }
    .admin-overview-card { padding: 18px; }
}

/* Larger, more readable typography for admin vendor and subscription workspaces. */
.app-shell .admin-vendors-modern,
.app-shell .admin-subscriptions-modern {
    font-size: 1rem;
}

.app-shell .admin-vendors-modern .dash-page-greeting,
.app-shell .admin-subscriptions-modern .dash-page-greeting,
.app-shell .admin-vendors-modern .dash-kicker,
.app-shell .admin-subscriptions-modern .dash-kicker {
    font-size: .72rem;
}

.app-shell .admin-vendors-eyebrow,
.app-shell .admin-subscriptions-eyebrow { font-size: .72rem; }
.app-shell .admin-vendors-hero > div > p:last-child,
.app-shell .admin-subscriptions-hero > div > p:last-child { font-size: .92rem; }
.app-shell .admin-vendors-total small,
.app-shell .admin-vendors-total i,
.app-shell .admin-subscriptions-hero-stat small,
.app-shell .admin-subscriptions-hero-stat i { font-size: .72rem; }

.app-shell .admin-vendor-insights small,
.app-shell .admin-subscription-metrics small { font-size: .69rem; }
.app-shell .admin-vendor-insights strong,
.app-shell .admin-subscription-metrics strong { font-size: 1.18rem; }
.app-shell .admin-vendor-insights i,
.app-shell .admin-subscription-metrics i { font-size: .67rem; }

.app-shell .admin-vendor-filter label,
.app-shell .admin-vendor-filter input,
.app-shell .admin-vendor-filter select,
.app-shell .admin-vendor-filter .dash-button { font-size: .78rem; }
.app-shell .admin-vendor-directory-head h2,
.app-shell .admin-subscription-panel-head h2 { font-size: 1.3rem; }
.app-shell .admin-vendor-directory-head p,
.app-shell .admin-subscription-panel-head p { font-size: .79rem; }
.app-shell .admin-vendor-directory-head > span { font-size: .74rem; }

.app-shell .admin-vendor-table th,
.app-shell .admin-subscription-table th { font-size: .67rem; }
.app-shell .admin-vendor-table-identity strong,
.app-shell .admin-vendor-table-plan,
.app-shell .admin-vendor-table-activity strong,
.app-shell .admin-vendor-table-usage strong,
.app-shell .admin-subscription-table .admin-table-primary { font-size: .78rem; }
.app-shell .admin-vendor-table-identity small,
.app-shell .admin-vendor-table-subtext,
.app-shell .admin-vendor-table-activity small,
.app-shell .admin-vendor-table-date,
.app-shell .admin-subscription-table .admin-table-secondary { font-size: .68rem; }
.app-shell .admin-vendor-table-connection,
.app-shell .admin-vendor-table-view { font-size: .71rem; }
.app-shell .admin-vendors-modern .admin-status,
.app-shell .admin-subscriptions-modern .admin-status,
.app-shell .admin-vendors-modern .admin-count-pill,
.app-shell .admin-subscriptions-modern .admin-count-pill { font-size: .72rem; }

.app-shell .admin-subscription-tabs strong { font-size: .75rem; }
.app-shell .admin-subscription-tabs small { font-size: .64rem; }
.app-shell .admin-subscription-tabs button > b { font-size: .62rem; }
.app-shell .admin-live-pricing { font-size: .72rem; }
.app-shell .admin-plan-editor-head > div > span { font-size: .62rem; }
.app-shell .admin-plan-editor-head h3 { font-size: .96rem; }
.app-shell .admin-plan-editor > label,
.app-shell .admin-plan-editor-row label,
.app-shell .admin-plan-toggle i,
.app-shell .admin-plan-editor-checks label { font-size: .68rem; }
.app-shell .admin-plan-editor input[type="text"],
.app-shell .admin-plan-editor input[type="number"],
.app-shell .admin-plan-editor textarea,
.app-shell .admin-plan-editor summary,
.app-shell .admin-plan-editor > button { font-size: .75rem; }
.app-shell .admin-token-overview p,
.app-shell .admin-token-overview > div:last-child > small { font-size: .72rem; }
.app-shell .admin-token-ring strong { font-size: 1.2rem; }
.app-shell .admin-token-ring small { font-size: .64rem; }
.app-shell .admin-token-ranking-list article > span strong { font-size: .76rem; }
.app-shell .admin-token-ranking-list article > span small,
.app-shell .admin-token-ranking-list article > div > small { font-size: .65rem; }
.app-shell .admin-token-ranking-list article > b { font-size: .72rem; }
.app-shell .admin-renewal-grid h3 { font-size: .88rem; }
.app-shell .admin-renewal-grid p { font-size: .72rem; }
.app-shell .admin-renewal-grid article > div > small,
.app-shell .admin-renewal-grid footer strong { font-size: .67rem; }
.app-shell .admin-renewal-grid footer small { font-size: .62rem; }

.app-shell .admin-vendor-modal-identity small { font-size: .66rem; }
.app-shell .admin-vendor-modal-identity h2 { font-size: 1.18rem; }
.app-shell .admin-vendor-modal-identity p { font-size: .74rem; }
.app-shell .admin-vendor-detail-strip small { font-size: .65rem; }
.app-shell .admin-vendor-detail-strip strong { font-size: .75rem; }
.app-shell .admin-vendor-detail-card-head h3 { font-size: .94rem; }
.app-shell .admin-vendor-detail-card-head p,
.app-shell .admin-vendor-detail-card-head > span,
.app-shell .admin-vendor-profile-list,
.app-shell .admin-vendor-access-copy,
.app-shell .admin-vendor-status-form,
.app-shell .admin-vendor-log strong { font-size: .72rem; }
.app-shell .admin-vendor-log p { font-size: .68rem; }
.app-shell .admin-vendor-log time { font-size: .64rem; }
.app-shell .admin-vendor-status-form select,
.app-shell .admin-vendor-status-form button { font-size: .73rem; }

/* Branded, standalone HTTP error experience. */
.kasaflow-error-page {
    min-height: 100vh;
    margin: 0;
    color: #17382a;
    background:
        radial-gradient(circle at 14% 16%, rgba(225, 241, 112, .42), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(57, 157, 112, .18), transparent 31%),
        #f4f6ee;
    font-family: "Instrument Sans", sans-serif;
}

.kasaflow-error-page::before {
    position: fixed;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .25;
    background-image: linear-gradient(rgba(24, 67, 46, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 67, 46, .12) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.kasaflow-error-shell {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100% - 40px));
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin: 0 auto;
    padding: 30px 0 24px;
}

.kasaflow-error-brand {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.kasaflow-error-brand > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: #123e2d;
    box-shadow: 0 10px 24px rgba(18, 62, 45, .2);
}

.kasaflow-error-brand strong { font: 700 1.16rem "Space Grotesk", sans-serif; }

.kasaflow-error-card {
    align-self: center;
    display: grid;
    grid-template-columns: minmax(300px, .84fr) minmax(340px, 1.16fr);
    overflow: hidden;
    border: 1px solid rgba(23, 56, 42, .13);
    border-radius: 30px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 32px 90px rgba(27, 59, 44, .13);
    backdrop-filter: blur(18px);
}

.kasaflow-error-visual {
    position: relative;
    min-height: 460px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #ecf5d9;
    background: linear-gradient(145deg, #123e2d 0%, #1b6649 58%, #8da83c 130%);
}

.kasaflow-error-visual::before,
.kasaflow-error-visual::after {
    position: absolute;
    border: 1px solid rgba(236, 245, 217, .18);
    border-radius: 50%;
    content: "";
}

.kasaflow-error-visual::before { width: 330px; height: 330px; }
.kasaflow-error-visual::after { width: 220px; height: 220px; }
.kasaflow-error-visual strong { position: relative; z-index: 2; font: 700 clamp(5.5rem, 11vw, 8rem) "Space Grotesk", sans-serif; letter-spacing: -.08em; }
.kasaflow-error-orbit { position: absolute; width: 440px; height: 150px; border: 1px solid rgba(236, 245, 217, .24); border-radius: 50%; transform: rotate(-24deg); }
.kasaflow-error-visual i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #e1f170; box-shadow: 0 0 18px rgba(225, 241, 112, .8); }
.kasaflow-error-visual i:nth-of-type(1) { top: 22%; left: 24%; }
.kasaflow-error-visual i:nth-of-type(2) { right: 20%; bottom: 27%; width: 13px; height: 13px; }
.kasaflow-error-visual i:nth-of-type(3) { right: 26%; top: 17%; width: 5px; height: 5px; }

.kasaflow-error-copy { align-self: center; padding: clamp(38px, 7vw, 76px); }
.kasaflow-error-kicker { color: #277656; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.kasaflow-error-copy h1 { max-width: 560px; margin: 13px 0 15px; color: #17382a; font: 700 clamp(2rem, 4.2vw, 3.5rem)/1.02 "Space Grotesk", sans-serif; letter-spacing: -.045em; }
.kasaflow-error-copy > p { margin: 0; color: #4d695c; font-size: 1rem; line-height: 1.65; }
.kasaflow-error-copy > small { display: block; margin-top: 8px; color: #71877c; font-size: .8rem; line-height: 1.55; }
.kasaflow-error-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.kasaflow-error-actions a,
.kasaflow-error-actions button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 18px; border-radius: 12px; font: 750 .78rem "Instrument Sans", sans-serif; cursor: pointer; }
.kasaflow-error-primary { border: 1px solid #173e2d; color: #fff; background: #173e2d; text-decoration: none; }
.kasaflow-error-actions button { border: 1px solid rgba(23, 56, 42, .16); color: #17382a; background: transparent; }
.kasaflow-error-actions a:hover,
.kasaflow-error-actions button:hover { transform: translateY(-1px); }
.kasaflow-error-reference { display: flex; align-items: center; gap: 9px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(23, 56, 42, .1); color: #71877c; font-size: .69rem; }
.kasaflow-error-reference code { padding: 5px 8px; border-radius: 7px; color: #315f49; background: rgba(39, 118, 86, .08); font: 700 .68rem "Space Grotesk", sans-serif; letter-spacing: .08em; }
.kasaflow-error-shell > footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; color: #71877c; font-size: .7rem; }
.kasaflow-error-shell > footer a { color: #315f49; font-weight: 750; }

html[data-theme="dark"] .kasaflow-error-page { color: #e9f3ec; background: radial-gradient(circle at 12% 16%, rgba(155, 180, 60, .17), transparent 29%), radial-gradient(circle at 88% 82%, rgba(41, 133, 91, .16), transparent 31%), #09130f; }
html[data-theme="dark"] .kasaflow-error-card { border-color: rgba(218, 235, 225, .11); background: rgba(14, 29, 22, .88); box-shadow: 0 32px 90px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .kasaflow-error-copy h1 { color: #eef6f0; }
html[data-theme="dark"] .kasaflow-error-copy > p { color: #b5c8bc; }
html[data-theme="dark"] .kasaflow-error-copy > small,
html[data-theme="dark"] .kasaflow-error-shell > footer { color: #80998b; }
html[data-theme="dark"] .kasaflow-error-actions button { border-color: rgba(225, 239, 230, .15); color: #e9f3ec; }
html[data-theme="dark"] .kasaflow-error-primary { border-color: #d9ed74; color: #17382a; background: #d9ed74; }
html[data-theme="dark"] .kasaflow-error-reference { border-color: rgba(225, 239, 230, .1); }
html[data-theme="dark"] .kasaflow-error-reference code { color: #acd5bc; background: rgba(89, 168, 119, .12); }
html[data-theme="dark"] .kasaflow-error-shell > footer a { color: #acd5bc; }

@media (max-width: 760px) {
    .kasaflow-error-shell { width: min(100% - 24px, 560px); padding-top: 18px; }
    .kasaflow-error-card { grid-template-columns: 1fr; margin: 26px 0; border-radius: 23px; }
    .kasaflow-error-visual { min-height: 210px; }
    .kasaflow-error-visual::before { width: 240px; height: 240px; }
    .kasaflow-error-visual::after { width: 150px; height: 150px; }
    .kasaflow-error-copy { padding: 30px 24px 32px; }
    .kasaflow-error-actions { align-items: stretch; flex-direction: column; }
    .kasaflow-error-actions a,
    .kasaflow-error-actions button { width: 100%; }
}

/* Sidebar account and session card. */
.app-shell .sidebar-profile {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
    margin-top: 12px;
    padding: 13px;
    border: 1px solid var(--app-line);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(14, 138, 95, .065), rgba(255, 255, 255, .72));
}

.app-shell .sidebar-profile-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.app-shell .sidebar-profile-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(14, 138, 95, .12);
    border-radius: 13px;
    color: #086c49;
    background: linear-gradient(135deg, #dff3e7, #edf4c8);
    font-size: .69rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.app-shell .sidebar-profile-avatar i {
    position: absolute;
    right: -2px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--app-surface);
    border-radius: 50%;
    background: #27a269;
    box-shadow: 0 0 0 1px rgba(39, 162, 105, .12);
}

.app-shell .sidebar-profile-copy {
    min-width: 0;
    display: block;
}

.app-shell .sidebar-profile-copy small,
.app-shell .sidebar-profile-copy strong,
.app-shell .sidebar-profile-copy > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .sidebar-profile-copy small {
    margin: 0 0 2px;
    color: #849088;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.app-shell .sidebar-profile-copy strong {
    color: var(--app-ink);
    font-size: .75rem;
    line-height: 1.35;
}

.app-shell .sidebar-profile-copy > span {
    margin-top: 2px;
    color: var(--app-muted);
    font-size: .62rem;
}

.app-shell .sidebar-profile .sidebar-profile-logout {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid rgba(184, 69, 58, .13);
    border-radius: 10px;
    color: #a9463d;
    background: rgba(184, 69, 58, .055);
    font: 750 .66rem "Instrument Sans", sans-serif;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.app-shell .sidebar-profile .sidebar-profile-logout:hover,
.app-shell .sidebar-profile .sidebar-profile-logout:focus-visible {
    border-color: rgba(184, 69, 58, .25);
    color: #963a32;
    background: rgba(184, 69, 58, .1);
    outline: none;
    transform: translateY(-1px);
}

html[data-theme="dark"] .app-shell .sidebar-profile {
    border-color: var(--app-line);
    background: linear-gradient(145deg, rgba(41, 145, 98, .11), rgba(14, 28, 22, .82));
}

html[data-theme="dark"] .app-shell .sidebar-profile-avatar {
    border-color: rgba(122, 211, 159, .16);
    color: #b5e2c5;
    background: linear-gradient(135deg, rgba(42, 132, 84, .35), rgba(144, 163, 55, .2));
    box-shadow: none;
}

html[data-theme="dark"] .app-shell .sidebar-profile-avatar i { border-color: #101d17; }
html[data-theme="dark"] .app-shell .sidebar-profile-copy small { color: #748c7f; }
html[data-theme="dark"] .app-shell .sidebar-profile .sidebar-profile-logout { border-color: rgba(239, 136, 124, .14); color: #ef9a90; background: rgba(187, 71, 59, .08); }
html[data-theme="dark"] .app-shell .sidebar-profile .sidebar-profile-logout:hover,
html[data-theme="dark"] .app-shell .sidebar-profile .sidebar-profile-logout:focus-visible { border-color: rgba(239, 136, 124, .26); color: #ffb1a8; background: rgba(187, 71, 59, .14); }

@media (min-width: 901px) {
    .app-shell.dashboard-sidebar-collapsed .sidebar-profile {
        gap: 9px;
        margin-inline: -2px;
        padding: 9px 7px;
    }

    .app-shell.dashboard-sidebar-collapsed .sidebar-profile-main {
        display: flex;
        justify-content: center;
    }

    .app-shell.dashboard-sidebar-collapsed .sidebar-profile-copy { display: none; }

    .app-shell.dashboard-sidebar-collapsed .sidebar-profile .sidebar-profile-logout {
        width: 40px;
        min-height: 36px;
        margin-inline: auto;
        padding: 0;
    }

    .app-shell.dashboard-sidebar-collapsed .sidebar-profile-logout span { display: none; }
}

/* Admin live database and backend telemetry. */
.admin-live-monitor { --live-good: #0d8b5f; --live-warn: #c18017; --live-critical: #c45145; }
.admin-live-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding-bottom: 19px; border-bottom: 1px solid var(--app-line); }
.admin-live-head h2 { margin: 4px 0; font-size: 1.25rem; }
.admin-live-head p { margin: 0; color: var(--app-muted); font-size: .75rem; }
.admin-live-controls { display: flex; align-items: center; gap: 9px; }
.admin-live-state { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--app-line); border-radius: 999px; color: var(--app-muted); background: var(--app-bg); font-size: .64rem; white-space: nowrap; }
.admin-live-state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.admin-live-state.is-loading i { animation: adminLivePulse 1s ease-in-out infinite; }
.admin-live-state.is-healthy { border-color: rgba(13,139,95,.16); color: var(--live-good); background: rgba(13,139,95,.07); }
.admin-live-state.is-warning { border-color: rgba(193,128,23,.2); color: var(--live-warn); background: rgba(193,128,23,.08); }
.admin-live-state.is-critical,.admin-live-state.is-disconnected { border-color: rgba(196,81,69,.2); color: var(--live-critical); background: rgba(196,81,69,.08); }
.admin-live-state.is-paused { color: var(--app-muted); }
.admin-live-controls button { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--app-line); border-radius: 9px; color: var(--app-ink); background: var(--app-surface); font: 750 .63rem "Instrument Sans",sans-serif; cursor: pointer; }
.admin-live-alert[hidden] { display: none; }
.admin-live-alert { display: grid; grid-template-columns: 35px minmax(0,1fr); align-items: center; gap: 11px; margin-top: 16px; padding: 13px 14px; border: 1px solid; border-radius: 13px; }
.admin-live-alert>span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; font-weight: 850; }
.admin-live-alert strong,.admin-live-alert p { display: block; margin: 0; }
.admin-live-alert strong { font-size: .7rem; }.admin-live-alert p { margin-top: 3px; color: var(--app-muted); font-size: .64rem; }
.admin-live-alert.is-warning { border-color: rgba(193,128,23,.2); background: rgba(193,128,23,.06); }.admin-live-alert.is-warning>span { color: var(--live-warn); background: rgba(193,128,23,.12); }
.admin-live-alert.is-critical { border-color: rgba(196,81,69,.2); background: rgba(196,81,69,.06); }.admin-live-alert.is-critical>span { color: var(--live-critical); background: rgba(196,81,69,.12); }
.admin-live-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-top: 17px; }
.admin-live-metrics>article { min-width: 0; padding: 15px; border: 1px solid var(--app-line); border-radius: 14px; background: var(--app-bg) !important; }
.admin-live-metrics header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--app-muted); font-size: .62rem; }
.admin-live-metrics header i { width: 7px; height: 7px; border-radius: 50%; background: #9aa49e; }
.admin-live-metrics article.is-healthy header i { background: var(--live-good); }.admin-live-metrics article.is-warning header i { background: var(--live-warn); }.admin-live-metrics article.is-critical header i { background: var(--live-critical); }
.admin-live-metrics>article>strong { display: block; margin-top: 11px; font: 750 1.35rem "Space Grotesk",sans-serif; }.admin-live-metrics>article>strong small { margin-left: 2px; color: var(--app-muted); font: 650 .58rem "Instrument Sans",sans-serif; }
.admin-live-metrics>article>p { margin: 8px 0 0; color: var(--app-muted); font-size: .58rem; }.admin-live-metrics>article>p b { color: var(--app-ink); }
.admin-live-meter { height: 4px; margin-top: 11px; overflow: hidden; border-radius: 99px; background: var(--app-line); }.admin-live-meter i { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--live-good); transition: width .35s ease; }.admin-live-metrics article.is-warning .admin-live-meter i { background: var(--live-warn); }.admin-live-metrics article.is-critical .admin-live-meter i { background: var(--live-critical); }
.admin-live-spark { height: 24px; display: flex; align-items: flex-end; gap: 2px; margin-top: 8px; }.admin-live-spark i { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: rgba(13,139,95,.5); transition: height .25s ease; }
.admin-live-signal-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin-top: 11px; }.admin-live-signal-grid article { padding: 12px; border: 1px solid var(--app-line); border-radius: 11px; }.admin-live-signal-grid span,.admin-live-signal-grid strong,.admin-live-signal-grid small { display: block; }.admin-live-signal-grid span { color: var(--app-muted); font-size: .57rem; }.admin-live-signal-grid strong { margin-top: 5px; font-size: .83rem; }.admin-live-signal-grid small { margin-top: 3px; color: var(--app-muted); font-size: .53rem; line-height: 1.35; }
.admin-live-sessions { margin-top: 17px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 14px; }.admin-live-sessions>header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 16px; border-bottom: 1px solid var(--app-line); }.admin-live-sessions h3 { margin: 3px 0 0; font-size: .84rem; }.admin-live-sessions>header>span { color: var(--app-muted); font-size: .59rem; }
.admin-live-session-list article { display: grid; grid-template-columns: 8px minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--app-line); }.admin-live-session-list article:last-child { border: 0; }.admin-live-session-list article>i { width: 8px; height: 8px; border-radius: 50%; background: var(--live-good); }.admin-live-session-list article.is-warning>i { background: var(--live-warn); }.admin-live-session-list article.is-critical>i { background: var(--live-critical); }.admin-live-session-list strong,.admin-live-session-list small { display: block; }.admin-live-session-list strong { font-size: .66rem; }.admin-live-session-list small { margin-top: 2px; color: var(--app-muted); font-size: .57rem; }.admin-live-session-list article>span { color: var(--app-muted); font-size: .58rem; }.admin-live-session-list article>b { min-width: 62px; font-size: .62rem; text-align: right; }
.admin-live-empty { display: grid; justify-items: center; gap: 4px; padding: 26px; text-align: center; }.admin-live-empty>span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--live-good); background: rgba(13,139,95,.09); font-weight: 800; }.admin-live-empty strong { margin-top: 4px; font-size: .67rem; }.admin-live-empty small { color: var(--app-muted); font-size: .58rem; }
.admin-live-foot { display: flex; justify-content: space-between; gap: 15px; margin-top: 12px; color: var(--app-muted); font-size: .55rem; }.admin-live-foot>span:first-child { display: flex; align-items: center; gap: 6px; }.admin-live-foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--live-good); }
@keyframes adminLivePulse { 50% { opacity: .3; transform: scale(.75); } }
html[data-theme="dark"] .admin-live-metrics>article,html[data-theme="dark"] .admin-live-controls button { background: rgba(14,28,22,.62); }
@media(max-width:1100px){.admin-live-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-live-signal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.admin-live-head{flex-direction:column}.admin-live-controls{width:100%;justify-content:space-between}.admin-live-metrics,.admin-live-signal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-live-session-list article{grid-template-columns:8px minmax(0,1fr) auto}.admin-live-session-list article>span{grid-column:2}.admin-live-foot{flex-direction:column}}
@media(max-width:430px){.admin-live-metrics,.admin-live-signal-grid{grid-template-columns:1fr}}

.admin-live-signal-grid strong > span[data-live-value="rollback_pct"],
.admin-live-signal-grid strong > span[data-live-value="heap_usage_pct"] {
    display: inline;
}

.admin-live-signal-grid .admin-live-percent {
    display: flex;
    align-items: baseline;
    gap: 1px;
    font: inherit;
}

.admin-live-signal-grid [data-live-value] {
    color: var(--app-ink);
    font-size: .83rem;
    font-weight: 700;
    line-height: 1.2;
}

.admin-live-signal-grid .admin-live-percent > span {
    display: inline;
}

.admin-live-signal-grid .admin-live-percent > small {
    display: inline;
    margin: 0;
    color: var(--app-muted);
    font: 700 .64rem "Instrument Sans", sans-serif;
}

.vendor-subscription-renewal-notice {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
    border: 1px solid rgba(190, 126, 25, .2);
    border-radius: 15px;
    color: #815710;
    background: linear-gradient(135deg, rgba(248, 237, 212, .92), rgba(255, 249, 234, .72));
}

.vendor-subscription-renewal-notice > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(190, 126, 25, .12);
}

.vendor-subscription-renewal-notice strong,
.vendor-subscription-renewal-notice p { display: block; margin: 0; }
.vendor-subscription-renewal-notice strong { font-size: .8rem; }
.vendor-subscription-renewal-notice p { margin-top: 4px; color: var(--app-muted); font-size: .7rem; line-height: 1.5; }
.vendor-plan-badge.is-renew { color: #8b5e14; background: #f8edd4; }

html[data-theme="dark"] .vendor-subscription-renewal-notice {
    border-color: rgba(229, 181, 91, .2);
    color: #e8c275;
    background: linear-gradient(135deg, rgba(75, 55, 21, .72), rgba(34, 31, 20, .72));
}

html[data-theme="dark"] .vendor-plan-badge.is-renew { color: #edc56e; background: rgba(183, 123, 22, .2); }

.vendor-payment-history { padding: clamp(20px, 2.7vw, 28px); border: 1px solid var(--app-line); border-radius: 20px; background: var(--app-surface); }
.vendor-payment-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.vendor-payment-history-head h2 { margin: 5px 0 0; color: var(--app-ink); font-size: 1rem; }
.vendor-payment-history-head p { margin: 6px 0 0; color: var(--app-muted); font-size: .7rem; }
.vendor-payment-history-table-wrap { margin-top: 18px; }
.vendor-payment-history-table { min-width: 900px; }
.vendor-payment-history-table code { color: var(--app-ink); font: 700 .64rem "IBM Plex Mono", monospace; }
.vendor-payment-history-table time { color: var(--app-muted); white-space: nowrap; }
.vendor-payment-resume { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px; border: 1px solid rgba(8, 116, 79, .2); border-radius: 9px; color: #08744f; background: rgba(8, 116, 79, .06); font: 750 .62rem "Instrument Sans", sans-serif; white-space: nowrap; cursor: pointer; }
.vendor-payment-resume:hover { background: rgba(8, 116, 79, .12); }
.vendor-payment-resume:disabled { opacity: .65; cursor: wait; }
.vendor-payment-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #8a6418; background: #f8edd4; font-size: .58rem; font-weight: 800; text-transform: capitalize; }
.vendor-payment-status.is-success { color: #08744f; background: #dff1e7; }
.vendor-payment-status.is-failed { color: #a83c32; background: #f9e3df; }
.vendor-payment-history-empty { margin-top: 18px; padding: 24px; border: 1px dashed var(--app-line); border-radius: 14px; color: var(--app-muted); font-size: .7rem; text-align: center; }
html[data-theme="dark"] .vendor-payment-status { color: #e8c275; background: rgba(183, 123, 22, .2); }
html[data-theme="dark"] .vendor-payment-status.is-success { color: #8addae; background: rgba(14, 138, 95, .2); }
html[data-theme="dark"] .vendor-payment-status.is-failed { color: #f0a49d; background: rgba(168, 60, 50, .2); }
@media (max-width: 640px) { .vendor-payment-history-head { flex-direction: column; }.vendor-payment-history-head .vendor-record-count { align-self: flex-start; } }

/* Vendor orders and conversation operations */
.vendor-order-signal-grid,
.vendor-conversation-signal-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.vendor-order-signal-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vendor-conversation-signal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vendor-order-signal-grid article,
.vendor-conversation-signal-grid article {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--app-line);
    border-radius: 15px;
    background: var(--app-surface);
}
.vendor-order-signal-grid article > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #08744f; background: rgba(8, 116, 79, .09); }
.vendor-order-signal-grid article > span.is-pending { color: #a66a08; background: rgba(229, 181, 52, .14); }
.vendor-order-signal-grid article > span.is-active { color: #2e6a9a; background: rgba(72, 139, 194, .12); }
.vendor-order-signal-grid article > span.is-payment { color: #9b5d3c; background: rgba(197, 112, 67, .11); }
.vendor-order-signal-grid small,
.vendor-conversation-signal-grid small { display: block; color: var(--app-muted); font-size: .64rem; font-weight: 650; }
.vendor-order-signal-grid strong,
.vendor-conversation-signal-grid strong { display: block; overflow: hidden; margin-top: 3px; color: var(--app-ink); font: 730 .91rem "Space Grotesk", sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.vendor-conversation-signal-grid article { position: relative; display: grid; gap: 4px; overflow: hidden; }
.vendor-conversation-signal-grid article::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: #8bbd67; }
.vendor-conversation-signal-grid article.is-attention::after { background: #dda72b; }
.vendor-conversation-signal-grid article.is-human::after { background: #3d87bd; }
.vendor-conversation-signal-grid article.is-resolved::after { background: #8b9790; }

.vendor-conversation-overview {
    position: relative;
    display: grid;
    grid-template-columns: minmax(230px, .85fr) minmax(520px, 1.55fr);
    align-items: stretch;
    gap: 18px;
    margin-bottom: 18px;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(8, 116, 79, .17);
    border-radius: 18px;
    background:
        radial-gradient(circle at 2% 0, rgba(8, 116, 79, .11), transparent 31%),
        radial-gradient(circle at 98% 100%, rgba(174, 221, 68, .13), transparent 28%),
        var(--app-surface);
}
.vendor-conversation-overview::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(#08744f, #a6d943); }
.vendor-conversation-overview-copy { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 3px 6px 3px 4px; }
.vendor-conversation-overview-copy > span { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; color: #fff; background: #08744f; box-shadow: 0 10px 24px rgba(8, 116, 79, .18); }
.vendor-conversation-overview-copy small { color: #08744f; font-size: .54rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vendor-conversation-overview-copy h2 { margin: 3px 0 0; color: var(--app-ink); font: 740 .93rem "Space Grotesk", sans-serif; letter-spacing: -.025em; }
.vendor-conversation-overview-copy p { max-width: 280px; margin: 4px 0 0; color: var(--app-muted); font-size: .65rem; line-height: 1.45; }
.vendor-conversation-overview-metrics { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgba(8, 116, 79, .1); border-radius: 13px; background: rgba(255, 255, 255, .56); }
.vendor-conversation-overview-metrics a { position: relative; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 11px 12px; color: var(--app-ink); text-decoration: none; transition: background 150ms ease, box-shadow 150ms ease; }
.vendor-conversation-overview-metrics a + a { border-left: 1px solid rgba(8, 116, 79, .1); }
.vendor-conversation-overview-metrics a:hover,
.vendor-conversation-overview-metrics a:focus-visible { z-index: 1; background: rgba(8, 116, 79, .055); outline: none; }
.vendor-conversation-overview-metrics a.is-active { z-index: 1; background: rgba(8, 116, 79, .075); box-shadow: inset 0 -3px 0 #08744f; }
.vendor-conversation-overview-metrics a > span { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #08744f; background: rgba(8, 116, 79, .09); }
.vendor-conversation-overview-metrics a.is-attention > span { color: #a66a08; background: rgba(229, 181, 52, .14); }
.vendor-conversation-overview-metrics a.is-human > span { color: #2e6a9a; background: rgba(61, 135, 189, .12); }
.vendor-conversation-overview-metrics a.is-resolved > span { color: #65736b; background: rgba(113, 128, 120, .1); }
.vendor-conversation-overview-metrics small,
.vendor-conversation-overview-metrics strong { display: block; }
.vendor-conversation-overview-metrics small { overflow: hidden; color: var(--app-muted); font-size: .55rem; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.vendor-conversation-overview-metrics strong { margin-top: 2px; color: var(--app-ink); font: 750 .88rem "Space Grotesk", sans-serif; }

.vendor-order-workspace { padding: 18px; }
.vendor-order-filter { margin: 0 0 15px; padding-bottom: 15px; border-bottom: 1px solid var(--app-line); }
.vendor-order-search-field { width: min(440px, 100%); min-width: 260px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 49px; padding: 5px 11px 5px 6px; border: 1px solid var(--app-line); border-radius: 13px; color: var(--app-ink); background: var(--app-surface); box-shadow: 0 5px 16px rgba(26, 55, 42, .035); cursor: text; transition: border-color 150ms ease, box-shadow 150ms ease; }
.vendor-order-search-field:focus-within { border-color: rgba(8, 116, 79, .5); box-shadow: 0 0 0 3px rgba(8, 116, 79, .09), 0 8px 22px rgba(26, 55, 42, .055); }
.vendor-order-search-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #08744f; background: rgba(8, 116, 79, .085); }
.vendor-order-search-copy { min-width: 0; display: grid; gap: 1px; }
.vendor-order-search-copy small { color: #08744f; font-size: .5rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.vendor-filter-bar .vendor-order-search-copy input { width: 100%; min-height: 23px; padding: 0; border: 0; border-radius: 0; color: var(--app-ink); background: transparent; box-shadow: none; font: 600 .66rem "Instrument Sans", sans-serif; outline: none; }
.vendor-order-search-copy input::placeholder { color: color-mix(in srgb, var(--app-muted) 82%, transparent); font-weight: 500; }
.vendor-order-search-copy input::-webkit-search-cancel-button { display: none; }
.vendor-filter-clear { color: #08744f; font-size: .68rem; font-weight: 750; text-decoration: none; }
.vendor-filter-clear:hover { text-decoration: underline; text-underline-offset: 3px; }
.vendor-order-list { display: grid; gap: 10px; }
.vendor-order-card { overflow: hidden; border: 1px solid var(--app-line); border-radius: 14px; background: var(--app-surface); transition: border-color 160ms ease, box-shadow 160ms ease; }
.vendor-order-card[open] { border-color: rgba(8, 116, 79, .23); box-shadow: 0 14px 32px rgba(24, 57, 42, .07); }
.vendor-order-card > summary { position: relative; display: grid; grid-template-columns: 1.05fr 1.15fr .62fr .92fr auto 20px; align-items: center; gap: 16px; min-height: 76px; padding: 13px 15px; cursor: pointer; list-style: none; }
.vendor-order-card > summary::-webkit-details-marker { display: none; }
.vendor-order-card > summary:hover { background: rgba(8, 116, 79, .025); }
.vendor-order-card > summary > span:not(.vendor-order-status) { min-width: 0; }
.vendor-order-card > summary small,
.vendor-order-card > summary strong,
.vendor-order-card > summary em,
.vendor-order-card > summary time { display: block; }
.vendor-order-card > summary small { color: var(--app-muted); font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.vendor-order-card > summary strong { overflow: hidden; margin-top: 4px; color: var(--app-ink); font-size: .72rem; white-space: nowrap; text-overflow: ellipsis; }
.vendor-order-card > summary em,
.vendor-order-card > summary time { overflow: hidden; margin-top: 3px; color: var(--app-muted); font-size: .59rem; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.vendor-order-number strong { color: #08744f !important; font: 750 .72rem "IBM Plex Mono", monospace; }
.vendor-order-payment { display: inline-flex !important; width: fit-content; padding: 3px 6px; border-radius: 999px; color: #85631a !important; background: rgba(229, 181, 52, .14); font-size: .54rem !important; font-weight: 750; text-transform: capitalize; }
.vendor-order-payment.is-paid,
.vendor-order-payment.is-approved,
.vendor-order-payment.is-completed { color: #08744f !important; background: rgba(8, 116, 79, .09); }
.vendor-order-payment.is-rejected,
.vendor-order-payment.is-failed { color: #a63e34 !important; background: rgba(197, 79, 67, .1); }
.vendor-order-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; color: #6d5b27; background: rgba(229, 181, 52, .13); font-size: .57rem; font-weight: 800; text-transform: capitalize; }
.vendor-order-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vendor-order-status.is-delivered,
.vendor-order-status.is-confirmed { color: #08744f; background: rgba(8, 116, 79, .09); }
.vendor-order-status.is-processing,
.vendor-order-status.is-ready,
.vendor-order-status.is-shipped { color: #2c6996; background: rgba(61, 135, 189, .1); }
.vendor-order-status.is-cancelled,
.vendor-order-status.is-refunded { color: #a63e34; background: rgba(197, 79, 67, .1); }
.vendor-order-chevron { color: var(--app-muted); transition: transform 180ms ease; }
.vendor-order-card[open] .vendor-order-chevron { transform: rotate(180deg); }
.vendor-order-detail-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; padding: 15px; border-top: 1px solid var(--app-line); background: rgba(8, 116, 79, .018); }
.vendor-order-detail-section { min-width: 0; padding: 14px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface); }
.vendor-order-detail-section.is-items { grid-row: span 2; }
.vendor-order-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.vendor-order-detail-head > span:first-child { color: var(--app-ink); font-size: .7rem; font-weight: 800; }
.vendor-order-detail-head small { color: var(--app-muted); font-size: .57rem; }
.vendor-order-lines { display: grid; }
.vendor-order-lines > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--app-line); color: var(--app-muted); font-size: .62rem; }
.vendor-order-lines > div > span:first-child strong,
.vendor-order-lines > div > span:first-child small { display: block; }
.vendor-order-lines > div > span:first-child strong { overflow: hidden; color: var(--app-ink); font-size: .66rem; white-space: nowrap; text-overflow: ellipsis; }
.vendor-order-lines > div > span:first-child small { margin-top: 2px; color: var(--app-muted); font-size: .55rem; }
.vendor-order-lines > div > strong { color: var(--app-ink); font-size: .64rem; }
.vendor-order-totals,
.vendor-order-facts { display: grid; gap: 7px; margin: 12px 0 0; }
.vendor-order-totals > div,
.vendor-order-facts > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vendor-order-totals dt,
.vendor-order-totals dd,
.vendor-order-facts dt,
.vendor-order-facts dd { margin: 0; font-size: .61rem; line-height: 1.45; }
.vendor-order-totals dt,
.vendor-order-facts dt { flex: 0 0 auto; color: var(--app-muted); }
.vendor-order-totals dd,
.vendor-order-facts dd { color: var(--app-ink); font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.vendor-order-totals .is-total { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--app-line); }
.vendor-order-totals .is-total dt,
.vendor-order-totals .is-total dd { color: var(--app-ink); font-size: .68rem; font-weight: 800; }
.vendor-order-facts a { color: #08744f; }
.vendor-order-proof { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--app-line); border-radius: 10px; color: var(--app-ink); background: rgba(8, 116, 79, .025); text-decoration: none; }
.vendor-order-proof img { width: 58px; height: 46px; border-radius: 7px; object-fit: cover; }
.vendor-order-proof strong,
.vendor-order-proof small { display: block; }
.vendor-order-proof strong { font-size: .64rem; }
.vendor-order-proof small { margin-top: 3px; color: var(--app-muted); font-size: .55rem; }
.vendor-order-no-proof { min-height: 76px; display: flex; align-items: center; gap: 10px; color: var(--app-muted); }
.vendor-order-no-proof strong,
.vendor-order-no-proof small { display: block; }
.vendor-order-no-proof strong { color: var(--app-ink); font-size: .66rem; }
.vendor-order-no-proof small { margin-top: 3px; font-size: .58rem; }
.vendor-order-muted { margin: 10px 0 0; color: var(--app-muted); font-size: .58rem; line-height: 1.5; }
.vendor-order-status-form { display: grid; gap: 6px; }
.vendor-order-status-form label { color: var(--app-muted); font-size: .58rem; }
.vendor-order-status-form > div { display: flex; gap: 8px; }
.vendor-order-status-form select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 9px; color: var(--app-ink); background: var(--app-surface); font: 650 .65rem "Instrument Sans", sans-serif; }
.vendor-order-empty > span,
.vendor-thread-empty > span { width: 58px; height: 58px; display: grid; place-items: center; justify-self: center; margin-bottom: 12px; border-radius: 17px; color: #08744f; background: rgba(8, 116, 79, .08); }
.vendor-order-empty a,
.vendor-empty-state a { margin-top: 10px; color: #08744f; font-size: .66rem; font-weight: 750; }
.vendor-workspace-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--app-line); color: var(--app-muted); font-size: .63rem; }
.vendor-workspace-pagination > div { display: flex; gap: 7px; }
.vendor-workspace-pagination a { display: inline-flex; min-height: 32px; align-items: center; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 8px; color: var(--app-ink); background: var(--app-surface); font-weight: 750; text-decoration: none; }

.vendor-conversation-layout { min-height: 680px; grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr); }
.vendor-conversation-list-panel { min-width: 0; display: flex; flex-direction: column; padding: 12px; }
.vendor-conversation-search { display: grid; gap: 7px; padding: 3px 2px 12px; }
.vendor-conversation-search > label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-inline: 2px; }
.vendor-conversation-search > label span { color: var(--app-ink); font-size: .69rem; font-weight: 800; }
.vendor-conversation-search > label small { overflow: hidden; color: var(--app-muted); font-size: .61rem; font-weight: 550; white-space: nowrap; text-overflow: ellipsis; }
.vendor-conversation-search-control { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 5px; min-height: 44px; padding: 4px 4px 4px 11px; border: 1px solid var(--app-line); border-radius: 13px; background: var(--app-surface); box-shadow: 0 5px 16px rgba(26, 55, 42, .04); transition: border-color 150ms ease, box-shadow 150ms ease; }
.vendor-conversation-search-control:focus-within { border-color: rgba(8, 116, 79, .5); box-shadow: 0 0 0 3px rgba(8, 116, 79, .09), 0 8px 22px rgba(26, 55, 42, .06); }
.vendor-conversation-search-icon { display: grid; place-items: center; color: #6f8178; }
.vendor-conversation-search-control input { width: 100%; min-width: 0; height: 34px; padding: 0 5px; border: 0; color: var(--app-ink); background: transparent; font: 550 .67rem "Instrument Sans", sans-serif; outline: none; }
.vendor-conversation-search-control input::placeholder { color: color-mix(in srgb, var(--app-muted) 82%, transparent); }
.vendor-conversation-search-control input::-webkit-search-cancel-button { display: none; }
.vendor-conversation-search-control > a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--app-muted); text-decoration: none; }
.vendor-conversation-search-control > a:hover,
.vendor-conversation-search-control > a:focus-visible { color: var(--app-ink); background: rgba(113, 128, 120, .08); outline: none; }
.vendor-conversation-search-control > button { width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; color: #fff; background: #08744f; box-shadow: 0 7px 16px rgba(8, 116, 79, .2); cursor: pointer; transition: transform 150ms ease, background 150ms ease; }
.vendor-conversation-search-control > button:hover { background: #066442; transform: translateX(1px); }
.vendor-conversation-search-control > button:focus-visible { outline: 3px solid rgba(8, 116, 79, .18); outline-offset: 2px; }
.vendor-conversation-filters { display: flex; gap: 5px; padding: 0 0 10px; overflow-x: auto; border-bottom: 1px solid var(--app-line); }
.vendor-conversation-filters a { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: var(--app-muted); font-size: .58rem; font-weight: 750; text-decoration: none; }
.vendor-conversation-filters a:hover,
.vendor-conversation-filters a.is-active { color: #08744f; background: rgba(8, 116, 79, .09); }
.vendor-conversation-list-panel .vendor-conversation-list { min-height: 0; flex: 1; padding: 7px 0 0; overflow-y: auto; }
.vendor-conversation-list-panel .vendor-conversation-item { gap: 9px; padding: 10px 9px; }
.vendor-conversation-preview { min-width: 0; }
.vendor-conversation-preview em { display: block; margin-top: 4px; color: var(--app-muted); font-size: .53rem; font-style: normal; }
.vendor-conversation-meta b.is-human { color: #2c6996; background: rgba(61, 135, 189, .11); }
.vendor-conversation-meta b.is-resolved { color: #617068; background: rgba(113, 128, 120, .1); }
.vendor-conversation-list-panel .vendor-workspace-pagination { margin-top: 8px; padding-top: 10px; }
.vendor-thread-panel { min-height: 680px; max-height: 780px; padding: 0; overflow: hidden; }
.vendor-thread-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 14px 16px; border-bottom: 1px solid var(--app-line); }
.vendor-thread-customer { min-width: 0; display: flex; align-items: center; gap: 10px; }
.vendor-thread-customer h2,
.vendor-thread-customer p { margin: 0; }
.vendor-thread-customer h2 { overflow: hidden; color: var(--app-ink); font: 730 .86rem "Space Grotesk", sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.vendor-thread-customer p { overflow: hidden; margin-top: 3px; color: var(--app-muted); font-size: .58rem; white-space: nowrap; text-overflow: ellipsis; }
.vendor-thread-state { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.vendor-thread-state > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 999px; color: #08744f; background: rgba(8, 116, 79, .08); font-size: .54rem; font-weight: 800; text-transform: capitalize; }
.vendor-thread-state > span i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(8, 116, 79, .09); }
.vendor-thread-state > span.is-human { color: #2c6996; background: rgba(61, 135, 189, .1); }
.vendor-thread-state > span.is-resolved { color: #647069; background: rgba(113, 128, 120, .1); }
.vendor-thread-actions { grid-column: 1 / 3; display: flex; justify-content: flex-end; gap: 7px; }
.vendor-thread-actions form { margin: 0; }
.vendor-thread-actions .dash-button { min-height: 32px; padding: 0 10px; font-size: .59rem; }
.vendor-thread-resolve { min-height: 32px; padding: 0 9px; border: 0; border-radius: 8px; color: var(--app-muted); background: transparent; font: 750 .59rem "Instrument Sans", sans-serif; cursor: pointer; }
.vendor-thread-resolve:hover { color: var(--app-ink); background: rgba(113, 128, 120, .08); }
.vendor-thread-attention { display: flex; align-items: center; gap: 10px; margin: 10px 14px 0; padding: 9px 11px; border: 1px solid rgba(221, 167, 43, .2); border-radius: 10px; color: #8a6418; background: rgba(229, 181, 52, .09); }
.vendor-thread-attention svg { flex: 0 0 auto; }
.vendor-thread-attention strong,
.vendor-thread-attention span { display: block; }
.vendor-thread-attention strong { font-size: .63rem; }
.vendor-thread-attention span { margin-top: 2px; color: var(--app-muted); font-size: .55rem; }
.vendor-thread-panel .vendor-thread { min-height: 0; flex: 1; gap: 8px; padding: 16px; overflow-y: auto; background: radial-gradient(circle at 18% 4%, rgba(111, 186, 59, .05), transparent 34%); }
.vendor-thread-panel .vendor-message { width: min(78%, 590px); padding: 9px 11px; }
.vendor-thread-panel .vendor-message p { font-size: .7rem; }
.vendor-thread-panel .vendor-message span,
.vendor-thread-panel .vendor-message small { font-size: .56rem; }
.vendor-message.is-vendor { justify-self: end; color: #fff; background: #08744f; border-bottom-right-radius: 5px; }
.vendor-message.is-vendor span,
.vendor-message.is-vendor small { color: rgba(255, 255, 255, .68); }
.vendor-thread-compose { padding: 12px 14px; border-top: 1px solid var(--app-line); background: var(--app-surface); }
.vendor-thread-compose > label { display: block; margin-bottom: 6px; color: var(--app-ink); font-size: .59rem; font-weight: 750; }
.vendor-thread-compose > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.vendor-thread-compose textarea { min-height: 48px; max-height: 130px; resize: vertical; padding: 10px 11px; border: 1px solid var(--app-line); border-radius: 11px; color: var(--app-ink); background: var(--app-surface); font: 500 .68rem/1.45 "Instrument Sans", sans-serif; }
.vendor-thread-compose textarea:focus { border-color: var(--dash-green); box-shadow: 0 0 0 3px rgba(111, 186, 59, .13); outline: none; }
.vendor-thread-compose button { min-width: 74px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; color: #fff; background: #08744f; font: 750 .62rem "Instrument Sans", sans-serif; cursor: pointer; }
.vendor-thread-compose > small { display: block; margin-top: 6px; color: var(--app-muted); font-size: .54rem; }
.vendor-thread-compose.is-closed { display: grid; gap: 3px; color: var(--app-muted); text-align: center; }
.vendor-thread-compose.is-closed strong { color: var(--app-ink); font-size: .65rem; }
.vendor-thread-compose.is-closed span { font-size: .57rem; }
.vendor-thread-empty { flex: 1; }

html[data-theme="dark"] .app-shell .vendor-order-card[open] { box-shadow: 0 14px 32px rgba(0, 0, 0, .18); }
html[data-theme="dark"] .app-shell .vendor-order-detail-grid { background: rgba(145, 214, 83, .018); }
html[data-theme="dark"] .app-shell .vendor-order-card > summary:hover,
html[data-theme="dark"] .app-shell .vendor-order-proof { background: rgba(145, 214, 83, .035); }
html[data-theme="dark"] .app-shell .vendor-order-status-form select,
html[data-theme="dark"] .app-shell .vendor-conversation-search input,
html[data-theme="dark"] .app-shell .vendor-thread-compose textarea { color: var(--app-ink); border-color: var(--app-line); background: var(--app-surface); }
html[data-theme="dark"] .app-shell .vendor-thread-panel .vendor-thread { background: radial-gradient(circle at 18% 4%, rgba(145, 214, 83, .04), transparent 34%); }
html[data-theme="dark"] .app-shell .vendor-message.is-assistant { color: var(--app-ink); background: #1b2c21; }
html[data-theme="dark"] .app-shell .vendor-thread-attention { color: #e5c56e; background: rgba(229, 181, 52, .07); }
html[data-theme="dark"] .app-shell .vendor-order-search-field { border-color: var(--app-line); background: rgba(255, 255, 255, .025); box-shadow: none; }
html[data-theme="dark"] .app-shell .vendor-order-search-field:focus-within { border-color: rgba(145, 214, 83, .42); box-shadow: 0 0 0 3px rgba(145, 214, 83, .07); }
html[data-theme="dark"] .app-shell .vendor-order-search-copy small { color: #a7dc72; }
html[data-theme="dark"] .app-shell .vendor-order-search-copy input { border: 0; background: transparent; }
html[data-theme="dark"] .app-shell .vendor-conversation-search-control { border-color: var(--app-line); background: rgba(255, 255, 255, .025); box-shadow: none; }
html[data-theme="dark"] .app-shell .vendor-conversation-search-control input { border: 0; background: transparent; }
html[data-theme="dark"] .app-shell .vendor-conversation-search-control:focus-within { border-color: rgba(145, 214, 83, .42); box-shadow: 0 0 0 3px rgba(145, 214, 83, .07); }
html[data-theme="dark"] .app-shell .vendor-conversation-search-icon { color: #83948b; }
html[data-theme="dark"] .app-shell .vendor-conversation-overview { border-color: rgba(145, 214, 83, .14); background: radial-gradient(circle at 2% 0, rgba(145, 214, 83, .08), transparent 31%), radial-gradient(circle at 98% 100%, rgba(145, 214, 83, .055), transparent 28%), var(--app-surface); }
html[data-theme="dark"] .app-shell .vendor-conversation-overview-copy small { color: #a7dc72; }
html[data-theme="dark"] .app-shell .vendor-conversation-overview-metrics { border-color: rgba(145, 214, 83, .1); background: rgba(255, 255, 255, .025); }
html[data-theme="dark"] .app-shell .vendor-conversation-overview-metrics a + a { border-color: rgba(145, 214, 83, .09); }
html[data-theme="dark"] .app-shell .vendor-conversation-overview-metrics a:hover,
html[data-theme="dark"] .app-shell .vendor-conversation-overview-metrics a:focus-visible,
html[data-theme="dark"] .app-shell .vendor-conversation-overview-metrics a.is-active { background: rgba(145, 214, 83, .055); }

@media (max-width: 1180px) {
    .vendor-order-signal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vendor-order-card > summary { grid-template-columns: 1fr 1fr .7fr auto 20px; }
    .vendor-order-card > summary > span:nth-child(3) { display: none; }
    .vendor-conversation-overview { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
    .vendor-conversation-layout { min-height: 0; grid-template-columns: 1fr; }
    .vendor-conversation-list-panel { max-height: 520px; }
    .vendor-thread-panel { min-height: 650px; }
    .vendor-order-detail-grid { grid-template-columns: 1fr; }
    .vendor-order-detail-section.is-items { grid-row: auto; }
}

@media (max-width: 720px) {
    .vendor-order-signal-grid,
    .vendor-conversation-signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vendor-order-filter { align-items: stretch; }
    .vendor-order-filter > *,
    .vendor-order-search-field { width: 100%; }
    .vendor-order-card > summary { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 9px; }
    .vendor-order-card > summary > span:nth-child(2),
    .vendor-order-card > summary > span:nth-child(3),
    .vendor-order-card > summary > span:nth-child(4) { display: none; }
    .vendor-order-detail-grid { padding: 10px; }
    .vendor-order-lines > div { grid-template-columns: minmax(0, 1fr) auto; }
    .vendor-order-lines > div > span:nth-child(2) { display: none; }
    .vendor-thread-head { grid-template-columns: 1fr; }
    .vendor-thread-state { justify-content: flex-start; }
    .vendor-thread-actions { grid-column: 1; justify-content: flex-start; flex-wrap: wrap; }
    .vendor-conversation-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vendor-conversation-overview-metrics a:nth-child(3) { border-left: 0; border-top: 1px solid rgba(8, 116, 79, .1); }
    .vendor-conversation-overview-metrics a:nth-child(4) { border-top: 1px solid rgba(8, 116, 79, .1); }
}

@media (max-width: 480px) {
    .vendor-order-signal-grid article { padding: 11px; }
    .vendor-order-signal-grid article > span { display: none; }
    .vendor-order-signal-grid strong,
    .vendor-conversation-signal-grid strong { font-size: .82rem; }
    .vendor-order-workspace { padding: 12px; }
    .vendor-order-status-form > div { align-items: stretch; flex-direction: column; }
    .vendor-conversation-signal-grid article { padding: 11px; }
    .vendor-thread-panel { min-height: 600px; }
    .vendor-thread-panel .vendor-message { width: 90%; }
    .vendor-thread-compose > div { grid-template-columns: 1fr; }
    .vendor-thread-compose button { min-height: 40px; }
    .vendor-conversation-overview { padding: 13px; }
    .vendor-conversation-overview-copy > span { width: 40px; height: 40px; }
    .vendor-conversation-overview-metrics a { padding: 10px; }
    .vendor-conversation-overview-metrics a > span { display: none; }
}