:root {
    --ink: #0e141b;
    --ink-soft: #1a2430;
    --panel: rgba(255, 248, 240, 0.04);
    --panel-strong: #151e28;
    --line: rgba(255, 248, 240, 0.1);
    --text: #f4ebe1;
    --muted: #9aa7b5;
    --accent: #e8ff4d;
    --accent-ink: #12180a;
    --ok: #6ee7b7;
    --warn: #f0b429;
    --info: #7dd3fc;
    --danger: #fb7185;
    --radius: 18px;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    --font-sans: "Manrope", system-ui, sans-serif;
    --font-display: "Space Grotesk", "Manrope", sans-serif;
    --sidebar-w: 268px;
}

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

html {
    color-scheme: dark;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    color: var(--text);
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(232, 255, 77, 0.12), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, rgba(125, 211, 252, 0.1), transparent 50%),
        linear-gradient(165deg, #0b1016 0%, #121a23 45%, #0e141b 100%);
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}

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

button,
input {
    font: inherit;
}

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

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
    position: relative;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 1.4rem 1rem 1.2rem;
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(14, 20, 27, 0.92), rgba(14, 20, 27, 0.78));
    backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.35rem 0.5rem;
}

.brand-mark {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.85rem;
    background:
        linear-gradient(135deg, var(--accent), #b8d12a 55%, #7dd3fc);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 30px rgba(232, 255, 77, 0.2);
    position: relative;
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: 35% 18% 35% 18%;
    border-radius: 999px;
    background: var(--accent-ink);
    transform: skewX(-18deg);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.brand-copy strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.brand-copy span {
    color: var(--muted);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.85rem;
    border-radius: 0.9rem;
    color: var(--muted);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-item:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
    transform: translateX(2px);
}

.nav-item.is-active {
    color: var(--accent-ink);
    background: var(--accent);
    font-weight: 700;
}

.nav-item__icon {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 0.3rem;
    background: currentColor;
    opacity: 0.85;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.nav-item__icon[data-icon="home"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 3 10h2v10h6v-6h2v6h6V10h2L12 3z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 3 10h2v10h6v-6h2v6h6V10h2L12 3z'/%3E%3C/svg%3E");
}

.nav-item__icon[data-icon="car"],
.nav-item__icon[data-icon="stock"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 11 6.5 6h11L19 11h1a2 2 0 0 1 2 2v4h-2a2 2 0 1 1-4 0H8a2 2 0 1 1-4 0H2v-4a2 2 0 0 1 2-2h1zm2.2-3 -.7 2h11l-.7-2H7.2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 11 6.5 6h11L19 11h1a2 2 0 0 1 2 2v4h-2a2 2 0 1 1-4 0H8a2 2 0 1 1-4 0H2v-4a2 2 0 0 1 2-2h1zm2.2-3 -.7 2h11l-.7-2H7.2z'/%3E%3C/svg%3E");
}

.nav-item__icon[data-icon="leads"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 12c4.4 0 8 2 8 4.5V22H4v-2.5C4 17 7.6 15 12 15z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 12c4.4 0 8 2 8 4.5V22H4v-2.5C4 17 7.6 15 12 15z'/%3E%3C/svg%3E");
}

.nav-item__icon[data-icon="users"],
.nav-item__icon[data-icon="team"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 10a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm8 1a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM2.5 19.5C2.5 16.5 5.4 15 8 15s5.5 1.5 5.5 4.5V21H2.5v-1.5zM14 21v-1.2c0-1.7 1-3 2.6-3.7.7.3 1.5.4 2.4.4 2.2 0 4 .9 4 3V21H14z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 10a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm8 1a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM2.5 19.5C2.5 16.5 5.4 15 8 15s5.5 1.5 5.5 4.5V21H2.5v-1.5zM14 21v-1.2c0-1.7 1-3 2.6-3.7.7.3 1.5.4 2.4.4 2.2 0 4 .9 4 3V21H14z'/%3E%3C/svg%3E");
}

.nav-item__icon[data-icon="sales"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19V5h2v12h14v2H4zm4-3V9h2v7H8zm4 0V6h2v10h-2zm4 0v-4h2v4h-2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19V5h2v12h14v2H4zm4-3V9h2v7H8zm4 0V6h2v10h-2zm4 0v-4h2v4h-2z'/%3E%3C/svg%3E");
}

.nav-item__icon[data-icon="settings"] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8.5A3.5 3.5 0 1 1 12 15.5 3.5 3.5 0 0 1 12 8.5zm8.1 2.1-1.4-.3a6.9 6.9 0 0 0-.6-1.4l.8-1.2-1.4-1.4-1.2.8c-.45-.27-.92-.48-1.4-.62l-.3-1.4h-2l-.3 1.4c-.48.14-.95.35-1.4.62l-1.2-.8-1.4 1.4.8 1.2c-.27.45-.48.92-.62 1.4l-1.4.3v2l1.4.3c.14.48.35.95.62 1.4l-.8 1.2 1.4 1.4 1.2-.8c.45.27.92.48 1.4.62l.3 1.4h2l.3-1.4c.48-.14.95-.35 1.4-.62l1.2.8 1.4-1.4-.8-1.2c.27-.45.48-.92.62-1.4l1.4-.3v-2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8.5A3.5 3.5 0 1 1 12 15.5 3.5 3.5 0 0 1 12 8.5zm8.1 2.1-1.4-.3a6.9 6.9 0 0 0-.6-1.4l.8-1.2-1.4-1.4-1.2.8c-.45-.27-.92-.48-1.4-.62l-.3-1.4h-2l-.3 1.4c-.48.14-.95.35-1.4.62l-1.2-.8-1.4 1.4.8 1.2c-.27.45-.48.92-.62 1.4l-1.4.3v2l1.4.3c.14.48.35.95.62 1.4l-.8 1.2 1.4 1.4 1.2-.8c.45.27.92.48 1.4.62l.3 1.4h2l.3-1.4c.48-.14.95-.35 1.4-.62l1.2.8 1.4-1.4-.8-1.2c.27-.45.48-.92.62-1.4l1.4-.3v-2z'/%3E%3C/svg%3E");
}

.sidebar__foot {
    margin-top: auto;
}

.plan-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
}

.plan-chip span {
    color: var(--muted);
    font-size: 0.8rem;
}

.plan-chip strong {
    font-size: 0.9rem;
}

.workspace {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--line);
    background: rgba(11, 16, 22, 0.72);
    backdrop-filter: blur(14px);
}

.menu-toggle {
    display: none;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: transparent;
    color: var(--text);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    line-height: 1;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 1rem;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ghost-btn {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    border-radius: 999px;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ghost-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0.7rem 0.35rem 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
}

.user-pill__avatar {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-ink);
    background: var(--accent);
}

.user-pill__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    max-width: 7.5rem;
}

.user-pill__meta strong {
    font-size: 0.86rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-pill__meta span {
    font-size: 0.72rem;
    color: var(--muted);
}

.main {
    padding: 1.75rem 1.75rem 2.5rem;
    min-width: 0;
    overflow-x: clip;
}

.home {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1200px;
}

.home__hero {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1.5rem;
    padding: 1.75rem;
    border-radius: calc(var(--radius) + 6px);
    border: 1px solid var(--line);
    background:
        linear-gradient(120deg, rgba(232, 255, 77, 0.1), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.home__hero::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 240px;
    height: 240px;
    border-radius: 40% 60% 55% 45%;
    background: radial-gradient(circle at 30% 30%, rgba(232, 255, 77, 0.35), transparent 65%);
    filter: blur(8px);
    pointer-events: none;
}

.eyebrow {
    margin: 0 0 0.55rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 700;
}

.home__intro h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.85rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.lede {
    margin: 0.85rem 0 0;
    max-width: 40rem;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.55;
}

.lede strong {
    color: var(--text);
    font-weight: 700;
}

.home__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    position: relative;
    z-index: 1;
}

.home__cta .btn {
    min-width: 11.75rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.7rem 1.15rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.btn--ghost.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
}

.btn--primary:hover {
    background: #f2ff7a;
    box-shadow: 0 8px 22px rgba(232, 255, 77, 0.28);
    filter: brightness(1.05);
}

.btn--primary:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.btn--ghost {
    border-color: var(--line);
    background: rgba(0, 0, 0, 0.15);
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 248, 240, 0.22);
}

.btn--danger {
    border-color: rgba(251, 113, 133, 0.4);
    background: rgba(251, 113, 133, 0.12);
    color: #fda4af;
}

.btn--danger:hover {
    background: rgba(251, 113, 133, 0.22);
    border-color: rgba(251, 113, 133, 0.55);
    color: #fecdd3;
    box-shadow: 0 8px 22px rgba(251, 113, 133, 0.18);
}

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    contain: layout paint;
}

.confirm-modal[hidden] {
    display: none !important;
}

.confirm-modal__backdrop {
    position: absolute;
    inset: 0;
    /* Solid overlay — no backdrop-filter (blur tanks FPS over large UI) */
    background: rgba(6, 10, 14, 0.78);
}

.confirm-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    padding: 1.6rem 1.5rem 1.35rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(251, 113, 133, 0.28);
    background: #151e28;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    text-align: center;
    animation: confirm-pop 0.18s ease-out;
}

.confirm-modal__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    color: #fecdd3;
    background: rgba(251, 113, 133, 0.16);
    border: 1px solid rgba(251, 113, 133, 0.4);
}

.confirm-modal__dialog h2 {
    margin: 0 0 0.55rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.confirm-modal__dialog p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.45;
}

.confirm-modal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-top: 1.35rem;
}

.confirm-modal__actions .btn {
    width: 100%;
}

@keyframes confirm-pop {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .confirm-modal__actions {
        grid-template-columns: 1fr;
    }
}

.stat-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.stat-rail__item {
    padding: 1.1rem 1.15rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--panel);
    position: relative;
    overflow: hidden;
}

.stat-rail__item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent);
}

.stat-rail__item.tone-leads::before { background: var(--info); }
.stat-rail__item.tone-sales::before { background: var(--ok); }
.stat-rail__item.tone-clients::before { background: #c4b5fd; }

.stat-rail__label {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.stat-rail__value {
    margin: 0.45rem 0 0.25rem;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: -0.04em;
    line-height: 1;
}

.stat-rail__hint {
    margin: 0;
    color: #7f8b98;
    font-size: 0.78rem;
}

.home__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 1rem;
}

.panel {
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 2px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
    padding: 1.15rem 1.2rem 0.4rem;
}

.panel__head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.panel__head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

.panel__head p {
    margin: 0.3rem 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.text-link {
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.entity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.entity-list__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.entity-list__main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.entity-list__main strong {
    font-size: 0.95rem;
}

.entity-list__main span,
.entity-list__side .time,
.entity-list__side .channel {
    color: var(--muted);
    font-size: 0.8rem;
}

.entity-list__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.price-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    line-height: 1.2;
}

.price--was {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: line-through;
}

.price--promo {
    color: var(--accent);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.badge--ok {
    color: #083b2a;
    background: var(--ok);
}

.badge--warn {
    color: #3b2a05;
    background: var(--warn);
}

.badge--info {
    color: #082f49;
    background: var(--info);
}

.badge--danger {
    color: #4c0519;
    background: var(--danger);
}

.reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.home__hero.reveal { animation-delay: 0.05s; }
.stat-rail.reveal { animation-delay: 0.16s; }
.home__grid .panel.reveal:nth-child(1) { animation-delay: 0.28s; }
.home__grid .panel.reveal:nth-child(2) { animation-delay: 0.38s; }

@keyframes rise-in {
    to {
        opacity: 1;
        transform: none;
    }
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 40;
}

.sidebar-backdrop[hidden] {
    display: none !important;
}

body.sidebar-open {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .stat-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 860px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 300px);
        z-index: 50;
        transform: translateX(-105%);
        transition: transform 0.28s ease;
        pointer-events: none;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
        pointer-events: auto;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .user-pill__meta {
        display: none;
    }

    .user-menu {
        display: flex;
        align-items: center;
    }

    .user-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.2rem;
        color: inherit;
        font: inherit;
        line-height: 1;
        cursor: pointer;
    }

    .user-pill__avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        flex-shrink: 0;
    }

    .ghost-btn {
        display: none;
    }

    .topbar {
        justify-content: space-between;
        padding: 0.85rem 1rem;
        gap: 0.75rem;
    }

    .home__hero {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
    }

    .home__cta .btn {
        min-width: 0;
        flex: 1 1 auto;
    }

    .main {
        padding: 1rem 0.9rem 2rem;
    }

    .home,
    .home__grid,
    .panel {
        max-width: 100%;
        min-width: 0;
    }

    .panel {
        padding: 1rem 0.95rem 0.35rem;
    }

    .panel__head {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
    }

    .panel__head > div {
        min-width: 0;
        flex: 1 1 12rem;
    }

    .entity-list__row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }

    .entity-list__main {
        flex: 1;
    }

    .entity-list__main strong a,
    .entity-list__main > span {
        display: block;
        overflow-wrap: anywhere;
    }

    .entity-list__side {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.45rem 0.7rem;
    }
}

@media (max-width: 560px) {
    .stat-rail {
        grid-template-columns: 1fr;
    }
}

/* ===== Página de Veículos ===== */

.vehicles {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1200px;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1.5rem;
    min-width: 0;
}

.page-head > div {
    min-width: 0;
    flex: 1;
}

.page-head h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: -0.04em;
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.page-head .lede {
    margin-top: 0.6rem;
}

.btn--sm {
    min-height: 2.4rem;
    padding: 0.45rem 1rem;
    font-size: 0.88rem;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    /* Garante que o menu do dropdown fique acima do painel da tabela. */
    position: relative;
    z-index: 40;
}

.filters__field--grow {
    flex: 1;
    min-width: 220px;
}

.filters input[type="search"] {
    width: 100%;
    padding: 0.68rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filters input[type="search"]::placeholder {
    color: #7f8b98;
}

.filters input[type="search"]:focus {
    border-color: rgba(232, 255, 77, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 255, 77, 0.12);
}

.filters__search {
    position: relative;
}

.filters__search .filters__icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.filters__icon {
    display: inline-flex;
    color: var(--muted);
}

.filters__icon svg {
    width: 1rem;
    height: 1rem;
}

.filters__search input[type="search"] {
    padding-left: 2.45rem;
}

/* ===== Dropdown customizado ===== */

.dropdown {
    position: relative;
    min-width: 185px;
}

.dropdown.is-open {
    z-index: 60;
}

/* Eleva o contêiner do dropdown aberto acima dos painéis vizinhos. */
.panel:has(.dropdown.is-open),
.filters:has(.dropdown.is-open) {
    position: relative;
    z-index: 45;
}

.dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    width: 100%;
    padding: 0.68rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.dropdown__trigger:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.2);
}

.dropdown__trigger:focus-visible,
.dropdown.is-open .dropdown__trigger {
    outline: none;
    border-color: rgba(232, 255, 77, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 255, 77, 0.12);
}

.dropdown__trigger.has-value {
    color: var(--text);
    border-color: rgba(232, 255, 77, 0.35);
    background: rgba(232, 255, 77, 0.06);
}

.dropdown__value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown__chevron {
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s ease;
    opacity: 0.7;
}

.dropdown.is-open .dropdown__chevron {
    transform: rotate(-135deg) translateY(-2px);
}

.dropdown__menu {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #1a2430;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    animation: dropdown-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 290px;
    overflow-x: hidden;
    overflow-y: auto;
}

@keyframes dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.dropdown__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0.62rem 0.75rem;
    border-radius: 0.65rem;
    color: var(--muted);
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dropdown__option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown__option:hover,
.dropdown__option:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.dropdown__option[aria-selected="true"] {
    color: var(--accent);
    font-weight: 700;
    background: rgba(232, 255, 77, 0.08);
}

.dropdown__check {
    flex-shrink: 0;
    width: 0.85rem;
    height: 0.85rem;
    position: relative;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.dropdown__option[aria-selected="true"] .dropdown__check {
    opacity: 1;
    transform: scale(1);
}

.dropdown__check::after {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.05rem;
    width: 0.4rem;
    height: 0.62rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.combo {
    position: relative;
}

.panel:has(.combo.is-open) {
    position: relative;
    z-index: 45;
}

.combo.is-open {
    z-index: 60;
}

.combo.is-invalid .dropdown__trigger {
    border-color: rgba(248, 113, 113, 0.75);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14);
}

.field input.is-invalid,
.money-input:has(input.is-invalid) {
    border-color: rgba(248, 113, 113, 0.75);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14);
}

.combo__panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    z-index: 60;
    padding: 0.55rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #1a2430;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    animation: dropdown-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.combo__search {
    width: 100%;
    margin-bottom: 0.45rem;
    padding: 0.62rem 0.75rem;
    border-radius: 0.7rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font: inherit;
}

.combo__search:focus {
    outline: none;
    border-color: rgba(232, 255, 77, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 255, 77, 0.12);
}

.combo__list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
}

.combo__list .dropdown__option.is-filtered-out,
.combo__list .dropdown__option[hidden] {
    display: none !important;
}

.combo__empty {
    margin: 0.35rem 0.4rem 0.2rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.panel--flush {
    padding: 0.2rem 0.1rem 0.2rem;
}

.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.data-table th {
    text-align: left;
    padding: 0.9rem 0.75rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.data-table td {
    padding: 0.95rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

.data-table .col--center {
    text-align: center;
}

.data-table tbody tr {
    transition: background 0.15s ease;
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.cell-vehicle {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    max-width: 280px;
}

.cell-vehicle strong,
.cell-vehicle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-vehicle span {
    color: var(--muted);
    font-size: 0.8rem;
}

.plate {
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.4rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    white-space: nowrap;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--muted);
    border: 1px solid var(--line);
    white-space: nowrap;
}

.pill--on {
    color: var(--accent);
    border-color: rgba(232, 255, 77, 0.4);
    background: rgba(232, 255, 77, 0.08);
}

.pill--on::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--accent);
}

.badge--muted {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line);
}

.table-foot {
    margin: 0.85rem 1rem 0.35rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--muted);
}

.empty-state strong {
    color: var(--text);
    font-size: 1.05rem;
}

.empty-state p {
    margin: 0;
}

.empty-state .btn {
    margin-top: 0.75rem;
}

.empty-state--page {
    min-height: 60vh;
    justify-content: center;
    max-width: 1200px;
}

.empty-state--page h1 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: -0.04em;
}

@media (max-width: 860px) {
    .page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .filters__field {
        width: 100%;
        min-width: 0;
    }

    .filters > .btn {
        width: 100%;
        flex: 1 1 100%;
        justify-content: center;
        min-height: 2.75rem;
        padding: 0.68rem 0.9rem;
        font-size: 0.95rem;
    }

    .data-table thead {
        display: none;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tr {
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--line);
    }

    .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.3rem 0;
        border-bottom: none;
    }

    .data-table td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.74rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        flex-shrink: 0;
    }

    .cell-vehicle {
        min-width: 0;
        text-align: right;
    }

    .data-table td:has(.cell-vehicle--media) {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }

    .cell-vehicle--media {
        text-align: left;
        max-width: none;
        width: 100%;
    }

    .cell-interest {
        max-width: min(60vw, 240px);
        text-align: right;
    }
}

/* ===== Catálogo de veículos ===== */

.vehicles .page-head {
    align-items: center;
}

.dropdown__lead {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

@media (min-width: 861px) and (max-width: 1400px) {
    .vehicles-table .col-compact {
        display: none;
    }
}

@media (min-width: 861px) and (max-width: 1180px) {
    .vehicles-table .col-compact-md {
        display: none;
    }
}

.vehicles .data-table td {
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
}

.vehicles-table td:first-child {
    max-width: 18rem;
    min-width: 0;
}

.vehicles .cell-vehicle,
.cell-vehicle--media {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    max-width: 18rem;
    min-width: 0;
}

.cell-vehicle__copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.cell-vehicle__copy strong,
.cell-vehicle__copy span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-thumb {
    width: 4.7rem;
    height: 3.3rem;
    border-radius: 0.65rem;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
}

.cell-thumb--empty {
    display: grid;
    place-items: center;
    color: var(--muted);
    border: 1px solid var(--line);
}

.cell-thumb--empty svg {
    width: 1.35rem;
    height: 1.35rem;
}

.cell-stack {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cell-stack strong {
    font-weight: 700;
}

.cell-stack span {
    color: var(--muted);
    font-size: 0.8rem;
}

.vehicles .badge {
    gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    border-radius: 9px;
    font-weight: 600;
}

.vehicles .badge__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
}

.vehicles .badge--ok {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(74, 222, 128, 0.55);
}

.vehicles .badge--warn {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(251, 191, 36, 0.55);
}

.vehicles .badge--danger {
    color: #fb7185;
    background: rgba(244, 63, 94, 0.16);
    border-color: rgba(251, 113, 133, 0.55);
}

.vehicles .badge--info,
.vehicles .badge--muted {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(229, 231, 235, 0.35);
}

.site-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.86rem;
    white-space: nowrap;
}

.site-cell svg {
    width: 0.95rem;
    height: 0.95rem;
}

.site-cell--on {
    color: var(--text);
}

.icon-action {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
}

.icon-action svg {
    width: 1rem;
    height: 1rem;
}

.icon-action:hover {
    background: #f2ff7a;
}

.vehicles-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.85rem 1.2rem 1rem;
}

.vehicles-foot p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.pagination {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pagination__btn {
    display: inline-grid;
    place-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.45rem;
    border-radius: 0.7rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.pagination__btn svg {
    width: 0.95rem;
    height: 0.95rem;
}

.pagination__btn:hover {
    border-color: rgba(232, 255, 77, 0.4);
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

.pagination__btn.is-active {
    border-color: transparent;
    color: var(--accent-ink);
    background: var(--accent);
}

.pagination__btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.vehicle-cards,
.user-cards,
.customer-cards {
    display: none;
}

@media (max-width: 860px) {
    .filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .filters__search,
    .filters > .btn,
    .filters .segmented {
        grid-column: 1 / -1;
    }

    .filters .segmented {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .filters:not(:has(.dropdown ~ .dropdown)) .dropdown {
        grid-column: 1 / -1;
    }

    .vehicles .table-wrap,
    .sales .table-wrap,
    .users-page .table-wrap,
    .customers .table-wrap {
        display: none;
    }

    .vehicle-cards {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        padding: 0.85rem;
    }

    .vehicle-card {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        padding: 0.85rem;
        border: 1px solid var(--line);
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.03);
        min-width: 0;
        overflow: hidden;
    }

    .vehicle-card__main {
        display: flex;
        align-items: stretch;
        gap: 0.85rem;
        min-width: 0;
        height: 9rem;
        overflow: hidden;
    }

    .vehicle-card__media {
        width: 48%;
        height: 100%;
        flex-shrink: 0;
        border-radius: 0.85rem;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.04);
    }

    .vehicle-card__photo {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .vehicle-card__photo--empty {
        display: grid;
        place-items: center;
        color: var(--muted);
        border: 1px solid var(--line);
    }

    .vehicle-card__photo--empty svg {
        width: 1.8rem;
        height: 1.8rem;
    }

    .vehicle-card__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.28rem;
        min-width: 0;
        flex: 1 1 0;
        height: 100%;
        overflow: hidden;
    }

    .vehicle-card__body strong,
    .vehicle-card__meta {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vehicle-card__body strong {
        font-size: 1.05rem;
        letter-spacing: -0.02em;
        line-height: 1.25;
    }

    .vehicle-card__meta,
    .vehicle-card__tags span:not(.plate) {
        color: var(--muted);
        font-size: 0.8rem;
    }

    .vehicle-card__body .price,
    .vehicle-card__body .price-stack {
        margin-top: 0.15rem;
        font-size: 1rem;
    }

    .vehicle-card__body .price--was {
        font-size: 0.78rem;
    }

    .vehicle-card__tags {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.45rem;
        margin-top: 0.15rem;
        max-width: 100%;
        overflow: hidden;
    }

    .vehicle-card__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--line);
    }

    .vehicle-card__foot > span {
        color: var(--muted);
        font-size: 0.82rem;
    }

    .vehicle-card__foot .btn {
        gap: 0.45rem;
    }

    .vehicle-card__foot .btn svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

    .vehicles-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ===== Módulo de Leads ===== */

.leads {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1200px;
}

.segmented {
    display: inline-flex;
    padding: 0.25rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.2);
    margin-left: auto;
}

.segmented__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--muted);
    transition: background 0.2s ease, color 0.2s ease;
}

.segmented__item svg {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

.segmented__item:hover {
    color: var(--text);
}

.segmented__item.is-active {
    background: var(--accent);
    color: var(--accent-ink);
}

.board {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.board::-webkit-scrollbar {
    height: 8px;
}

.board::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
}

.board__col {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-height: clamp(340px, calc(100vh - 15rem), 680px);
    padding: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.28);
}

.board__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.7rem;
    flex-shrink: 0;
}

.board__head h2 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board__count {
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.board__add {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.55rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.7rem;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}

.board__add svg {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

.board__add:hover {
    background: rgba(232, 255, 77, 0.08);
    color: var(--accent);
}

.stage-dot {
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
}

.stage-dot--info { background: var(--info); }
.stage-dot--accent { background: var(--accent); }
.stage-dot--warn { background: var(--warn); }
.stage-dot--ok { background: var(--ok); }
.stage-dot--muted { background: var(--muted); }

.board__cards {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    overflow-y: auto;
    min-height: 2.5rem;
    padding: 0.1rem 0.15rem 0.1rem 0.1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.board__cards::-webkit-scrollbar {
    width: 6px;
}

.board__cards::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.board__empty {
    margin: 0;
    padding: 1rem 0.5rem;
    text-align: center;
    color: #7f8b98;
    font-size: 0.8rem;
}

.lead-card {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.lead-card:hover {
    border-color: rgba(232, 255, 77, 0.4);
    background: rgba(232, 255, 77, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.lead-card__label {
    display: block;
    width: 2.4rem;
    height: 0.32rem;
    border-radius: 999px;
    margin-bottom: 0.15rem;
}

.chan-site { background: var(--info); }
.chan-whatsapp { background: var(--ok); }
.chan-indicacao { background: #c4b5fd; }
.chan-telefone { background: var(--warn); }
.chan-showroom { background: #f9a8d4; }

.lead-card[draggable="true"] {
    cursor: grab;
}

.lead-card.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
    border-style: dashed;
}

.board__col.is-drop-target {
    border-color: rgba(232, 255, 77, 0.55);
    background: rgba(232, 255, 77, 0.06);
    box-shadow: inset 0 0 0 1px rgba(232, 255, 77, 0.25);
}

.lead-card strong,
.lead-card__interest {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-card strong {
    font-size: 0.92rem;
}

.lead-card__interest {
    color: var(--muted);
    font-size: 0.8rem;
}

.lead-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.15rem;
    min-width: 0;
}

.lead-card__foot .pill {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-interest {
    display: block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-card__time {
    color: #7f8b98;
    font-size: 0.74rem;
    white-space: nowrap;
}

.badge--accent {
    color: var(--accent-ink);
    background: var(--accent);
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.timeline__item {
    position: relative;
    display: flex;
    gap: 0.85rem;
    padding: 0 0 1.1rem 0;
}

.timeline__item:last-child {
    padding-bottom: 0.25rem;
}

.timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.32rem;
    top: 1rem;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.timeline__dot {
    flex-shrink: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: var(--accent);
    margin-top: 0.25rem;
    box-shadow: 0 0 0 3px rgba(232, 255, 77, 0.15);
}

.timeline__item div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.timeline__item strong {
    font-size: 0.9rem;
}

.timeline__item span {
    color: var(--muted);
    font-size: 0.78rem;
}

@media (max-width: 860px) {
    .segmented {
        margin-left: 0;
        width: 100%;
        justify-content: stretch;
    }

    .segmented__item {
        flex: 1;
        text-align: center;
    }
}

/* ===== Módulo de Usuários ===== */

/* ===== Configurações ===== */

.settings {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1200px;
}

.settings-banner {
    padding: 0.85rem 1.1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(232, 255, 77, 0.4);
    background: rgba(232, 255, 77, 0.1);
    color: var(--accent);
    font-weight: 700;
    font-size: 0.9rem;
}

.settings-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    position: sticky;
    top: 5.5rem;
}

.settings-nav__item {
    padding: 0.7rem 0.85rem;
    border-radius: 0.75rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}

.settings-nav__item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

.settings-nav__item.is-active {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
}

.settings-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
}

.settings-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.settings-section__hint {
    margin: -0.35rem 0 1rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.input-addon {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.input-addon:focus-within {
    border-color: rgba(232, 255, 77, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 255, 77, 0.12);
}

.input-addon input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    flex: 1;
    min-width: 0;
}

.input-addon span {
    flex-shrink: 0;
    padding: 0 0.9rem 0 0;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
}

.color-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.color-field input[type="color"] {
    width: 3rem;
    height: 2.6rem;
    padding: 0.2rem;
    border-radius: 0.7rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.color-field span {
    font-family: var(--font-display);
    font-size: 0.88rem;
    color: var(--muted);
}

.settings-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1.15rem;
}

.settings-checks {
    margin: 1.15rem 0 0;
    padding: 0;
    border: none;
}

.settings-checks legend {
    margin-bottom: 0.65rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
}

.settings-checks__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.check-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.check-pill:has(input:checked) {
    border-color: rgba(232, 255, 77, 0.45);
    background: rgba(232, 255, 77, 0.08);
    color: var(--text);
}

.check-pill input {
    accent-color: var(--accent);
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.plan-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.95rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
}

.plan-card span {
    color: var(--muted);
    font-size: 0.78rem;
}

.plan-card strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

@media (max-width: 960px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

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

@media (max-width: 560px) {
    .plan-grid {
        grid-template-columns: 1fr;
    }
}

.users-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1200px;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.user-cell__avatar {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent-ink);
    background: #6975a7;
}

.user-cell strong {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

@media (max-width: 860px) {
    .user-cards,
    .customer-cards {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        padding: 0.85rem;
    }

    .user-card,
    .customer-card {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        padding: 0.85rem;
        border: 1px solid var(--line);
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.03);
        min-width: 0;
        overflow: hidden;
    }

    .user-card__main,
    .customer-card__main {
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        min-width: 0;
    }

    .user-card__avatar {
        width: 3rem;
        height: 3rem;
        font-size: 0.85rem;
    }

    .user-card__body,
    .customer-card__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.28rem;
        min-width: 0;
        flex: 1;
    }

    .user-card__body strong,
    .customer-card__body strong {
        font-size: 1.05rem;
        letter-spacing: -0.02em;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .user-card__meta,
    .customer-card__meta {
        color: var(--muted);
        font-size: 0.82rem;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-card__tags,
    .customer-card__tags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.2rem;
    }

    .user-card__foot,
    .customer-card__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--line);
    }

    .user-card__dates,
    .customer-card__foot > span {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        color: var(--muted);
        font-size: 0.8rem;
        min-width: 0;
    }

    .user-card__foot .btn,
    .customer-card__foot .btn {
        flex-shrink: 0;
        gap: 0.45rem;
    }

    .user-card__foot .btn svg,
    .customer-card__foot .btn svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }
}

.dropdown__trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ===== Módulo de Vendas ===== */

.sales {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1200px;
}

.field input[type="date"] {
    color-scheme: dark;
}

/* ===== Módulo de Clientes ===== */

.customers {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1200px;
}

.summary-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.summary-list div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.summary-list dt {
    color: var(--muted);
    font-size: 0.84rem;
}

.summary-list dd {
    margin: 0;
    font-weight: 700;
    font-size: 0.92rem;
    text-align: right;
}

/* ===== Ficha do veículo ===== */

.vehicle-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1200px;
    min-width: 0;
    width: 100%;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.breadcrumb a {
    color: var(--accent);
    font-weight: 700;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    align-items: start;
    min-width: 0;
}

.form-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.form-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 5.5rem;
}

.form-section {
    padding: 1.15rem 1.2rem 1.3rem;
}

.form-section h2 {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}

.form-section__hint {
    margin: -0.55rem 0 1rem;
}

.site-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.site-info__toggle {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 1.05rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 2px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.site-info__toggle:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
    border-color: rgba(255, 255, 255, 0.2);
}

.site-info__toggle:focus-visible,
.site-info.is-open .site-info__toggle {
    outline: none;
    border-color: rgba(232, 255, 77, 0.45);
    box-shadow: 0 0 0 3px rgba(232, 255, 77, 0.1);
}

.site-info__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.85rem;
    background: rgba(232, 255, 77, 0.12);
    color: var(--accent);
    flex-shrink: 0;
}

.site-info__icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.site-info__copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    flex: 1;
}

.site-info__copy strong {
    font-family: var(--font-display);
    font-size: 1.08rem;
    letter-spacing: -0.02em;
}

.site-info__copy span {
    font-size: 0.8rem;
    color: var(--muted);
}

.site-info__toggle .dropdown__chevron {
    margin-right: 0.15rem;
}

.site-info.is-open .site-info__toggle .dropdown__chevron {
    transform: rotate(-135deg) translateY(-2px);
}

.site-info__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.site-info__body[hidden] {
    display: none;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.feature-list__rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-row {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr) 2.25rem;
    align-items: center;
    gap: 0.55rem;
}

.feature-row__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.feature-row__mark svg {
    width: 1.05rem;
    height: 1.05rem;
}

.feature-row input {
    width: 100%;
    padding: 0.62rem 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feature-row input:focus {
    border-color: rgba(232, 255, 77, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 255, 77, 0.12);
}

.feature-row__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.feature-row__remove svg {
    width: 0.95rem;
    height: 0.95rem;
}

.feature-row__remove:hover {
    background: rgba(248, 113, 113, 0.9);
    color: #111;
}

.feature-list__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.feature-list__count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}

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

.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.field--wide {
    grid-column: span 2;
}

.field label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
}

.field input,
.field textarea {
    width: 100%;
    padding: 0.68rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field textarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.5;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #7f8b98;
}

.field input:focus,
.field textarea:focus {
    border-color: rgba(232, 255, 77, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 255, 77, 0.12);
}

.field__hint {
    margin: 0;
    margin-top: 1rem;
    font-size: 0.76rem;
    color: #7f8b98;
}

.money-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.money-input:focus-within {
    border-color: rgba(232, 255, 77, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 255, 77, 0.12);
}

.money-input span {
    padding: 0 0 0 0.9rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.money-input input {
    border: none;
    background: transparent;
    box-shadow: none !important;
    padding-left: 0.5rem;
}

.money-input--suffix input {
    padding-left: 0.9rem;
    padding-right: 0.5rem;
}

.money-input--suffix span {
    padding: 0 0.9rem 0 0;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.photo-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 0.9rem;
    border: 1px solid var(--line);
    background:
        linear-gradient(135deg, rgba(125, 211, 252, 0.15), rgba(232, 255, 77, 0.08)),
        rgba(255, 255, 255, 0.04);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    cursor: grab;
}

.photo-tile.is-cover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.photo-tile.is-dragging {
    opacity: 0.45;
    cursor: grabbing;
}

.photo-tile.is-drop-target {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.photo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

.photo-tile__index,
.photo-tile__btn,
.photo-tile__cover-ui {
    position: absolute;
    z-index: 2;
}

.photo-tile__index {
    top: 0.45rem;
    left: 0.45rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    pointer-events: none;
}

.photo-tile.is-cover .photo-tile__index {
    background: var(--accent);
    color: var(--accent-ink);
}

.photo-tile__btn {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
}

.photo-tile__btn svg {
    width: 0.85rem;
    height: 0.85rem;
    fill: currentColor;
}

.photo-tile__remove {
    right: 0.45rem;
    bottom: 0.45rem;
}

.photo-tile__remove svg {
    fill: none;
    stroke: currentColor;
}

.photo-tile__remove:hover {
    background: rgba(248, 113, 113, 0.9);
    color: #111;
}

.photo-tile__cover {
    position: absolute;
    left: 0.45rem;
    bottom: 0.45rem;
    z-index: 2;
    cursor: pointer;
}

.photo-tile__cover-ui {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.photo-tile__cover-ui svg {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
}

.photo-tile__cover-text {
    display: none;
}

.photo-tile.is-cover .photo-tile__cover-ui {
    padding: 0 0.6rem 0 0.4rem;
    background: var(--accent);
    color: var(--accent-ink);
}

.photo-tile.is-cover .photo-tile__cover-text {
    display: inline;
}

.photo-tile.is-cover .photo-tile__cover-ui svg {
    fill: currentColor;
}

.photo-tile--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background: transparent;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: auto;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.photo-tile--add span {
    font-size: 1.5rem;
    line-height: 1;
}

.photo-tile--add:hover {
    border-color: rgba(232, 255, 77, 0.5);
    color: var(--accent);
    background: rgba(232, 255, 77, 0.05);
}

.switch {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
    cursor: pointer;
}

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

.switch__track {
    flex-shrink: 0;
    width: 2.6rem;
    height: 1.45rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.08);
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
    margin-top: 0.1rem;
}

.switch__track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.18rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    background: var(--muted);
    transform: translateY(-50%);
    transition: left 0.2s ease, background 0.2s ease;
}

.switch input:checked + .switch__track {
    background: rgba(232, 255, 77, 0.25);
    border-color: rgba(232, 255, 77, 0.5);
}

.switch input:checked + .switch__track::after {
    left: calc(100% - 1.25rem);
    background: var(--accent);
}

.switch input:focus-visible + .switch__track {
    box-shadow: 0 0 0 3px rgba(232, 255, 77, 0.12);
}

.switch__copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.switch__copy strong {
    font-size: 0.9rem;
}

.switch__copy span {
    font-size: 0.78rem;
    color: var(--muted);
}

.form-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.form-actions .btn {
    width: 100%;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translate(-50%, 120%);
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.25rem;
    border-radius: 999px;
    border: 1px solid rgba(232, 255, 77, 0.4);
    background: #1a2430;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    pointer-events: none;
    max-width: min(92vw, 480px);
    text-align: left;
}

.toast.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

.toast--success {
    border-color: rgba(74, 222, 128, 0.45);
    background: linear-gradient(135deg, #163024, #1a2430 55%);
}

.toast__icon {
    position: relative;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(74, 222, 128, 0.18);
    border: 1.5px solid rgba(74, 222, 128, 0.7);
    animation: toast-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast__icon::after {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.22rem;
    width: 0.35rem;
    height: 0.62rem;
    border-right: 2px solid #4ade80;
    border-bottom: 2px solid #4ade80;
    transform: rotate(45deg) scale(0);
    animation: toast-check 0.35s 0.12s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes toast-pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes toast-check {
    to {
        transform: rotate(45deg) scale(1);
    }
}

@media (max-width: 1100px) {
    .form-layout {
        grid-template-columns: 1fr;
    }

    .form-aside {
        position: static;
    }
}

@media (max-width: 560px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .field--wide {
        grid-column: auto;
    }
}

/* ===== Menu do usuário / logout ===== */

.user-menu {
    position: relative;
}

.user-pill {
    appearance: none;
    font: inherit;
    cursor: pointer;
    color: inherit;
}

.user-menu__dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 50;
    min-width: 10rem;
    padding: 0.35rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #1a2430;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.user-menu__dropdown form {
    margin: 0;
}

.user-menu__item {
    display: block;
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: none;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.user-menu__item:hover {
    background: rgba(251, 113, 133, 0.12);
    color: var(--danger);
}

/* ===== Tela de login ===== */

.auth-body {
    min-height: 100vh;
}

.auth-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.auth-card {
    width: min(100%, 420px);
    padding: 1.75rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
    box-shadow: var(--shadow);
}

.auth-card__brand {
    margin-bottom: 1.5rem;
}

.auth-card h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    letter-spacing: -0.03em;
}

.auth-card__lede {
    margin: 0.45rem 0 1.35rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.auth-alert {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(251, 113, 133, 0.4);
    background: rgba(251, 113, 133, 0.1);
    color: #fecdd3;
    font-size: 0.9rem;
    font-weight: 600;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--muted);
    font-size: 0.88rem;
    cursor: pointer;
}

.auth-remember input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

.auth-submit {
    width: 100%;
    margin-top: 0.25rem;
    cursor: pointer;
}

.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(232, 255, 77, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .nav-item,
    .btn {
        animation: none !important;
        transition: none !important;
        opacity: 1;
        transform: none;
    }
}