/* =============================================================
 *  estatigo-ui.css — Shared visual design system  •  MINT EDITION
 *  --------------------------------------------------------------
 *  Single source of truth for Estatigo's aesthetic:
 *  mint-tinted dark canvas + vibrant mint accent + Geist typography.
 *
 *  Used by every page (landing, dashboard, listing edit, settings,
 *  login/register/error, email templates).
 *
 *  All classes are prefixed .es-* to avoid clashing with Tailwind
 *  utilities or legacy `.btn` / `.card` style names.
 *
 *  DO NOT inline copies of these tokens in templates.
 *  Extend the system by adding a new class here, not per page.
 *
 *  Tailwind brand-* and surface-* colors (configured in layout.html
 *  inline tailwind config) point at the same token values, so
 *  bg-brand-500 / text-brand-400 / bg-surface-800 stay aligned.
 * ============================================================= */

/* ── Tokens ────────────────────────────────────────────────── */
:root {
    /* Canvas ladder — mint-tinted dark. canvas is the deepest body bg,
       canvas-5 is the lightest raised surface. */
    --es-canvas:        #03100a;
    --es-canvas-2:      #06140f;
    --es-canvas-3:      #0c1d16;
    --es-canvas-4:      #11261e;
    --es-canvas-5:      #1a3327;

    /* Foreground / fog ladder — neutral with a faint cool tint so
       it sits cleanly on the green canvas without clashing. */
    --es-fog:           #e8f1ec;
    --es-fog-2:         #9aaba2;
    --es-fog-3:         #6b7d75;
    --es-fog-4:         #4a5b53;

    /* Mint accent — primary brand color. */
    --es-mint:          #31f1b0;
    --es-mint-2:        #14d49a;
    --es-mint-3:        #0ea57b;
    --es-mint-4:        #077255;
    --es-mint-soft:     rgba(49,241,176,0.10);
    --es-mint-soft-2:   rgba(49,241,176,0.18);
    --es-mint-glow:     rgba(49,241,176,0.45);

    /* Tailwind brand-500 == --es-mint-2 (slightly deeper mint where
       white text on top still passes WCAG large-text contrast). */
    --es-brand-500:     #14d49a;
    --es-brand-600:     #0ea57b;

    /* Status accents */
    --es-amber:         #f59e0b;
    --es-amber-soft:    rgba(245,158,11,0.16);
    --es-danger:        #f87171;
    --es-danger-soft:   rgba(239,68,68,0.16);

    /* Hairlines (white alpha on dark) */
    --es-hair:          rgba(255,255,255,0.08);
    --es-hair-strong:   rgba(255,255,255,0.14);
    --es-hair-soft:     rgba(255,255,255,0.04);
    --es-hair-mint:     rgba(49,241,176,0.22);
}

/* ── Global page chrome ────────────────────────────────────── */
/* Body bg, scrollbar, autofill — all use mint-tinted tokens.
   Pulled out of layout.html <style> blocks per "shared stylesheet"
   directive — single source of truth. */
body {
    background: var(--es-canvas-2);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--es-canvas); }
::-webkit-scrollbar-thumb {
    background: var(--es-canvas-5);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(49,241,176,0.35); }

/* Browser autofill — prevent white background flash on dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--es-canvas-2) inset !important;
    box-shadow: 0 0 0 1000px var(--es-canvas-2) inset !important;
    -webkit-text-fill-color: var(--es-fog) !important;
    caret-color: var(--es-fog);
    transition: background-color 5000s ease-in-out 0s;
}

/* Native checkbox dark + mint look — global so any Tailwind/legacy
   <input type="checkbox"> picks up the mint check without opt-in. */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1.5px solid var(--es-hair-strong);
    background-color: var(--es-canvas-3);
    transition: all 0.15s ease-in-out;
    position: relative;
}
input[type="checkbox"]:hover {
    border-color: var(--es-mint);
    background-color: var(--es-canvas-4);
}
input[type="checkbox"]:checked {
    background-color: var(--es-mint);
    border-color: var(--es-mint);
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4.5px;
    width: 5px;
    height: 9px;
    border: solid #03100a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(49,241,176,0.30);
}

/* Hide number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Disabled buttons */
button:disabled,
[type="submit"]:disabled {
    opacity: 0.5;
    cursor: wait;
    pointer-events: none;
}

/* ── Skip link (a11y) ──────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    padding: 0.5rem 0.75rem;
    background: var(--es-mint-2);
    color: #03100a;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0 0 0.5rem 0;
    transform: translateY(-120%);
    transition: transform 0.15s ease-out;
}
.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--es-mint);
    outline-offset: 2px;
}

/* ── HTMX swap helpers ─────────────────────────────────────── */
.htmx-indicator {
    opacity: 0;
    transition: opacity 300ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

.fade-in { animation: fadeIn 0.3s ease-in; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Ad highlight glow — fires after navigation to a new/updated ad
   so it pulses mint to draw the eye, then settles. */
@keyframes highlightGlow {
    0%   { border-color: var(--es-mint-2); box-shadow: 0 0 0 rgba(49,241,176,0); transform: scale(1); }
    20%  { border-color: var(--es-mint);   box-shadow: 0 0 25px rgba(49,241,176,0.45); transform: scale(1.02); }
    80%  { border-color: var(--es-mint);   box-shadow: 0 0 25px rgba(49,241,176,0.45); transform: scale(1.02); }
    100% { border-color: rgba(31, 41, 55, 0.6); box-shadow: none; transform: scale(1); }
}
.highlight-glow {
    animation: highlightGlow 2.5s ease-out forwards;
    scroll-margin-top: 100px;
    z-index: 10;
    position: relative;
}

/* Brokerio logo spinner */
.brokerio-spinner {
    display: inline-block;
    animation: brokerioSpin 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.brokerio-spinner svg { width: 100%; height: 100%; }
@keyframes brokerioSpin {
    0%   { transform: rotate(0deg);   opacity: 0.7; }
    50%  { transform: rotate(180deg); opacity: 1;   }
    100% { transform: rotate(360deg); opacity: 0.7; }
}

/* Segmented date input (DD / MM / YYYY) */
.date-seg { display: inline-flex; align-items: center; }
.date-seg input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--es-fog);
    font-size: 0.875rem;
    font-family: inherit;
    text-align: center;
    padding: 0;
    margin: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
.date-seg input::-webkit-outer-spin-button,
.date-seg input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.date-seg input:focus { color: #fff; }
.date-seg input::selection {
    background: var(--es-mint);
    color: #03100a;
}
.date-seg .sep {
    color: var(--es-fog-3);
    font-size: 0.875rem;
    margin: 0 1px;
    user-select: none;
}
.date-seg input.dd,
.date-seg input.mm { width: 1.6em; }
.date-seg input.yyyy { width: 2.8em; }

/* ── Dividers ──────────────────────────────────────────────── */
.es-hair    { border: 1px solid var(--es-hair); }
.es-hair-b  { border-bottom: 1px solid var(--es-hair); }
.es-hair-t  { border-top: 1px solid var(--es-hair); }
.es-hair-r  { border-right: 1px solid var(--es-hair); }
.es-hair-l  { border-left: 1px solid var(--es-hair); }

/* ── Surfaces ──────────────────────────────────────────────── */
.es-glass {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
    border: 1px solid var(--es-hair);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-radius: 14px;
}
.es-glass-strong {
    background: linear-gradient(180deg, rgba(18,32,28,0.78), rgba(8,18,14,0.85));
    border: 1px solid var(--es-hair);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-radius: 16px;
}
/* Primary content card. */
.es-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.008) 100%);
    border: 1px solid var(--es-hair);
    border-radius: 14px;
    padding: 1.25rem;
    transition: border-color 180ms ease, background 180ms ease;
}
.es-card--hover:hover { border-color: var(--es-hair-mint); }
.es-card--flush { padding: 0; overflow: hidden; }

/* ── Typography ────────────────────────────────────────────── */
.es-mono {
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--es-fog-2);
    text-transform: uppercase;
}
.es-mono--tight  { font-size: 0.68rem; letter-spacing: 0.05em; }
.es-mono--plain  { text-transform: none; letter-spacing: 0.02em; }

/* Section title — mono eyebrow with mint cursor accent. */
.es-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--es-hair);
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--es-fog-2);
}
.es-section-title::before {
    content: '▸';
    color: var(--es-mint);
    font-size: 0.8rem;
    line-height: 1;
    margin-right: 0.1rem;
}
.es-section-title .es-section-title__icon {
    font-size: 0.95rem;
    filter: saturate(0.85);
}
.es-section-title .es-section-title__text {
    color: var(--es-fog);
    font-weight: 500;
}

/* Pill / eyebrow — mono uppercase status chip. */
.es-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--es-fog-2);
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--es-hair);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
}
.es-eyebrow .es-eyebrow__dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--es-mint);
    box-shadow: 0 0 0 3px rgba(49,241,176,0.18), 0 0 12px rgba(49,241,176,0.7);
    animation: es-breathe 2.6s ease-in-out infinite;
}
@keyframes es-breathe {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* Compact tag pill */
.es-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--es-fog-2);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--es-hair);
}
.es-pill--mint    { color: var(--es-mint);    background: rgba(49,241,176,0.10); border-color: rgba(49,241,176,0.28); }
.es-pill--amber   { color: #fbbf24;           background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.30); }
.es-pill--danger  { color: var(--es-danger);  background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.28); }

/* ── Forms ─────────────────────────────────────────────────── */
.es-input,
.es-select,
.es-textarea {
    background: var(--es-canvas);
    border: 1px solid var(--es-hair);
    border-radius: 10px;
    padding: 0.45rem 0.7rem;
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.88rem;
    color: var(--es-fog);
    line-height: 1.4;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.es-input:hover,
.es-select:hover,
.es-textarea:hover { border-color: var(--es-hair-strong); }
.es-input:focus,
.es-select:focus,
.es-textarea:focus {
    border-color: rgba(49,241,176,0.55);
    box-shadow: 0 0 0 3px rgba(49,241,176,0.14);
    background: var(--es-canvas-2);
}
.es-input:disabled,
.es-select:disabled,
.es-textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.es-input--compact { padding: 0.35rem 0.55rem; font-size: 0.82rem; }
.es-input--right   { text-align: right; }
.es-input--center  { text-align: center; }
.es-textarea {
    min-height: 4rem;
    resize: vertical;
    line-height: 1.5;
}

.es-select,
select.es-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aaba2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 10px 6px;
}

.es-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 4px;
    border: 1.5px solid var(--es-hair-strong);
    background: var(--es-canvas);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
    position: relative;
    flex-shrink: 0;
}
.es-checkbox:hover { border-color: var(--es-mint); }
.es-checkbox:checked {
    background: var(--es-mint);
    border-color: var(--es-mint);
}
.es-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 1px; left: 4px;
    width: 4px; height: 8px;
    border: solid #03100a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.es-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(49,241,176,0.25);
}

.es-label {
    display: block;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--es-fog-2);
    margin-bottom: 0.35rem;
}

.es-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--es-hair-soft);
}
.es-field-row:last-child { border-bottom: 0; }
.es-field-row__k {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--es-fog-2);
    flex-shrink: 0;
}
.es-field-row__v {
    font-size: 0.9rem;
    color: var(--es-fog);
    font-weight: 500;
    text-align: right;
    min-width: 0;
}

/* ── Buttons ──────────────────────────────────────────────── */
.es-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        transform 140ms cubic-bezier(.2,.7,.3,1),
        background 140ms, color 140ms,
        box-shadow 140ms, border-color 140ms;
    white-space: nowrap;
    text-decoration: none;
}
.es-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(49,241,176,0.35);
}
.es-btn:disabled,
.es-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}
.es-btn--sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; border-radius: 8px; }
.es-btn--xs { padding: 0.3rem 0.6rem;  font-size: 0.72rem; border-radius: 7px; gap: 0.3rem; }
.es-btn--block { width: 100%; }

.es-btn-primary {
    background: var(--es-mint);
    color: #03100a;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.22) inset,
        0 1px 0 0 rgba(255,255,255,0.35) inset,
        0 8px 28px -6px rgba(49,241,176,0.50),
        0 2px 6px rgba(0,0,0,0.25);
}
.es-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.30) inset,
        0 1px 0 0 rgba(255,255,255,0.45) inset,
        0 12px 36px -6px rgba(49,241,176,0.60),
        0 4px 10px rgba(0,0,0,0.30);
}

.es-btn-ghost {
    color: var(--es-fog);
    border-color: var(--es-hair-strong);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
}
.es-btn-ghost:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border-color: rgba(255,255,255,0.24);
}

.es-btn-danger {
    color: var(--es-danger);
    border-color: rgba(239,68,68,0.35);
    background: rgba(239,68,68,0.08);
}
.es-btn-danger:hover {
    background: rgba(239,68,68,0.14);
    border-color: rgba(239,68,68,0.55);
}

.es-btn-link {
    color: var(--es-fog-2);
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
}
.es-btn-link:hover { color: var(--es-fog); }

.es-btn-icon {
    width: 2rem; height: 2rem;
    padding: 0;
    border-radius: 999px;
    color: var(--es-fog-2);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--es-hair);
}
.es-btn-icon:hover {
    color: var(--es-fog);
    background: rgba(255,255,255,0.08);
}

/* ── Chat / Telegram bubbles (shared w/ landing mockup) ───── */
.es-chat-msg {
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    font-size: 0.86rem;
    line-height: 1.45;
    max-width: 90%;
}
.es-chat-in  {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--es-hair);
    color: var(--es-fog);
}
.es-chat-out {
    background: linear-gradient(180deg, rgba(49,241,176,0.18), rgba(49,241,176,0.08));
    border: 1px solid rgba(49,241,176,0.30);
    color: #eafff5;
    margin-left: auto;
}

/* ── Status dot ─────────────────────────────────────────── */
.es-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--es-fog-3);
    flex-shrink: 0;
}
.es-dot--mint   { background: var(--es-mint);   box-shadow: 0 0 0 3px rgba(49,241,176,0.18); }
.es-dot--amber  { background: var(--es-amber);  box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.es-dot--danger { background: var(--es-danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }

/* ── k/v extract grid ─────────────────────────────────────── */
.es-extract {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) 1fr;
    gap: 0.35rem 0.85rem;
    font-size: 0.88rem;
}
.es-extract .es-extract__k {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--es-fog-2);
    padding-top: 2px;
}
.es-extract .es-extract__v { color: var(--es-fog); font-weight: 500; }
.es-extract .es-extract__v--mint { color: var(--es-mint); }

/* ── Scoped page wrapper ──────────────────────────────────── */
.es-surface {
    color: var(--es-fog);
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
    font-feature-settings: 'ss01','cv11';
}

/* ── Motion primitives ─────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .es-rise {
        opacity: 0;
        transform: translateY(14px);
        animation: es-rise .7s cubic-bezier(.2,.7,.3,1) forwards;
    }
    .es-rise-1 { animation-delay:  40ms; }
    .es-rise-2 { animation-delay: 120ms; }
    .es-rise-3 { animation-delay: 200ms; }
    .es-rise-4 { animation-delay: 280ms; }
    .es-rise-5 { animation-delay: 360ms; }
    .es-rise-6 { animation-delay: 440ms; }
}
@keyframes es-rise { to { opacity: 1; transform: none; } }

/* Floating decorative blob (auth pages, login/register) */
.es-float { animation: es-float 6s ease-in-out infinite; }
@keyframes es-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* ── Ambient page atmosphere ───────────────────────────────── */
.es-page-atmosphere {
    position: relative;
    isolation: isolate;
}
.es-page-atmosphere::before,
.es-page-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.es-page-atmosphere::before {
    background:
        radial-gradient(55% 45% at 82% 8%,  rgba(49,241,176,0.14) 0%, transparent 60%),
        radial-gradient(40% 32% at 12% 78%, rgba(49,241,176,0.08) 0%, transparent 60%),
        radial-gradient(34% 28% at 50% 0%,  rgba(20,212,154,0.06) 0%, transparent 70%);
}
.es-page-atmosphere::after {
    background-image:
        linear-gradient(rgba(49,241,176,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49,241,176,0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 35%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 35%, transparent 85%);
}
.es-page-atmosphere > * { position: relative; z-index: 1; }

/* ── Auth pages (login / register / registration-success) ─── */
/* Single shared layout shell — replaces per-template radial body bg
   + .glass + .animate-float duplicates that used to live inline. */
.es-auth-bg {
    background: radial-gradient(circle at top right, #0a261c, var(--es-canvas-2));
    color: var(--es-fog);
    font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
    min-height: 100vh;
}
.es-auth-bg--center-error {
    background: radial-gradient(circle at 50% 50%, #0e6b50 0%, var(--es-canvas) 70%);
    overflow: hidden;
}
.es-auth-bg--top-left {
    background: radial-gradient(circle at top left, #0a261c, var(--es-canvas-2));
}
.es-auth-card {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 24px;
    box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5);
}
.es-auth-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    color: var(--es-fog);
    font-size: 0.95rem;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
    outline: none;
}
.es-auth-input::placeholder { color: var(--es-fog-4); }
.es-auth-input:hover { border-color: rgba(255,255,255,0.18); }
.es-auth-input:focus {
    border-color: rgba(49,241,176,0.55);
    box-shadow: 0 0 0 3px rgba(49,241,176,0.20);
    background: rgba(49,241,176,0.04);
}
.es-auth-blob-mint {
    background: rgba(49,241,176,0.12);
    border-radius: 999px;
    filter: blur(48px);
    pointer-events: none;
}
.es-auth-blob-deep {
    background: rgba(20,212,154,0.10);
    border-radius: 999px;
    filter: blur(48px);
    pointer-events: none;
}

/* ── Display title ─────────────────────────────────────────── */
.es-display-title {
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.85rem, 3.6vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: -0.032em;
    color: #f7fafc;
    background: linear-gradient(180deg, #ffffff 0%, #c3cbd6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.es-display-title--editable {
    background: transparent;
    -webkit-text-fill-color: currentColor;
    color: #f7fafc;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0 0 2px 0;
    resize: none;
    overflow: hidden;
    width: 100%;
    outline: none;
    transition: border-color 160ms ease;
}
.es-display-title--editable:hover  { border-bottom-color: rgba(255,255,255,0.14); }
.es-display-title--editable:focus  { border-bottom-color: var(--es-mint); }

/* ── Status chip ──────────────────────────────────────────── */
.es-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--es-hair);
    background: rgba(255,255,255,0.035);
    color: var(--es-fog-2);
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.es-status-chip--active  { color: var(--es-mint);  background: rgba(49,241,176,0.10); border-color: rgba(49,241,176,0.30); }
.es-status-chip--draft   { color: #fbbf24;         background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.30); }
.es-status-chip--paused  { color: #fde047;         background: rgba(250,204,21,0.10); border-color: rgba(250,204,21,0.30); }
.es-status-chip--archived{ color: var(--es-fog-3); background: rgba(255,255,255,0.03); border-color: var(--es-hair-strong); }
button.es-status-chip:hover { transform: translateY(-1px); }

/* Soft card hover lift */
.es-card--lift {
    transition: transform 220ms cubic-bezier(.2,.7,.3,1), border-color 220ms, box-shadow 220ms;
}
.es-card--lift:hover {
    transform: translateY(-2px);
    border-color: var(--es-hair-mint);
    box-shadow: 0 14px 40px -18px rgba(0,0,0,0.55), 0 0 0 1px rgba(49,241,176,0.10) inset;
}

/* ── Broker cards (primary/collaborator) ──────────────────── */
.broker-card {
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.broker-card:hover {
    border-color: var(--es-hair-strong) !important;
    transform: translateY(-1px);
}
.broker-card--primary {
    border-color: rgba(251,191,36,0.28) !important;
    background: linear-gradient(180deg, rgba(251,191,36,0.06) 0%, rgba(251,191,36,0.02) 100%) !important;
    box-shadow: 0 0 0 1px rgba(251,191,36,0.12) inset, 0 10px 30px -20px rgba(251,191,36,0.25);
}
.broker-card--collab {
    border-color: rgba(49,241,176,0.22) !important;
    background: rgba(49,241,176,0.04) !important;
}

/* ── Sidebar nav (layout.html) ─────────────────────────────── */
/* Replaces the duplicated "bg-brand-500/15 text-brand-400 / hover bg-surface-700"
   cluster across each <a> in layout.html — single source of truth for
   nav styling. Page templates can opt into hover/active states without
   reinventing color tokens. */
.es-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--es-fog-2);
    transition: background 140ms ease, color 140ms ease;
    text-decoration: none;
}
.es-nav-item:hover {
    background: var(--es-canvas-4);
    color: var(--es-fog);
}
.es-nav-item--active {
    background: rgba(49,241,176,0.12);
    color: var(--es-mint);
}
.es-nav-item--active:hover {
    background: rgba(49,241,176,0.18);
    color: var(--es-mint);
}

/* Language switcher chip */
.es-lang-chip {
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--es-fog);
    transition: background 140ms ease, box-shadow 140ms ease;
    text-decoration: none;
}
.es-lang-chip:hover { background: var(--es-canvas-4); }
.es-lang-chip--active {
    background: var(--es-canvas-5);
    box-shadow: 0 0 0 2px var(--es-mint-2);
}

/* Sidebar brand wordmark */
.es-brand-text {
    background: linear-gradient(135deg, #f1f8f4 0%, var(--es-mint) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

/* ── Prose (rendered markdown in help slide-over) ─────────── */
.prose-guide h1 { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.10); }
.prose-guide h2 { font-size: 1.2rem; font-weight: 700; color: var(--es-fog); margin: 2rem 0 0.75rem; }
.prose-guide h3 { font-size: 1.05rem; font-weight: 600; color: #d6e4dd; margin: 1.5rem 0 0.5rem; }
.prose-guide p  { color: var(--es-fog-2); line-height: 1.7; margin: 0.5rem 0; font-size: 0.875rem; }
.prose-guide ul, .prose-guide ol { color: var(--es-fog-2); padding-left: 1.25rem; margin: 0.5rem 0; font-size: 0.875rem; }
.prose-guide li { margin: 0.25rem 0; line-height: 1.6; }
.prose-guide ul { list-style-type: disc; }
.prose-guide ol { list-style-type: decimal; }
.prose-guide strong { color: var(--es-fog); font-weight: 600; }
.prose-guide em { color: var(--es-mint); font-style: italic; }
.prose-guide blockquote {
    border-left: 3px solid var(--es-mint);
    padding: 0.5rem 1rem;
    margin: 0.75rem 0;
    background: rgba(49,241,176,0.05);
    border-radius: 0 0.5rem 0.5rem 0;
}
.prose-guide blockquote p { color: #b6f0d6; }
.prose-guide hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 1.5rem 0; }
.prose-guide table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.8125rem; }
.prose-guide th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid rgba(255,255,255,0.10); color: var(--es-fog); font-weight: 600; }
.prose-guide td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--es-fog-2); }
.prose-guide tr:hover td { background: rgba(255,255,255,0.02); }
.prose-guide a { color: var(--es-mint); text-decoration: underline; text-underline-offset: 2px; }
.prose-guide a:hover { color: #5cf3c0; }
.prose-guide code {
    background: rgba(49,241,176,0.10);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    color: #b6f0d6;
}

/* ── Telegram onboarding overlay slide animations ─────────── */
@keyframes tgSlideIn {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes tgSlideOut {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Subtle pulse used on registration-success email-pending CTA. */
@keyframes pulse-subtle {
    0%, 100% { transform: scale(1);    box-shadow: 0 10px 15px -3px rgba(49,241,176,0.30); }
    50%      { transform: scale(1.02); box-shadow: 0 20px 25px -5px rgba(49,241,176,0.40); }
}
.animate-pulse-subtle { animation: pulse-subtle 3s infinite ease-in-out; }

/* Code box (registration fallback) */
.code-box {
    background: rgba(49,241,176,0.10);
    border: 2px dashed rgba(49,241,176,0.30);
}

/* ── Banners (top-of-page warning/danger strips) ───────────── */
.es-banner { /* base — colors come from --danger / --amber modifiers */
    background: linear-gradient(135deg, rgba(20,32,28,0.95), rgba(8,18,14,0.95));
}
.es-banner--danger {
    background: linear-gradient(135deg, rgba(239,68,68,0.95), rgba(220,38,38,0.95));
}
.es-banner--amber {
    background: linear-gradient(135deg, rgba(217,119,6,0.97), rgba(180,83,9,0.97));
}

/* Modal/overlay scrim used for the telegram onboarding card and other
   blocking dialogs. Mint-tinted dark to match the canvas. */
.es-overlay-scrim {
    background: rgba(6,20,15,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Selection colour for the whole app ───────────────────── */
::selection { background: var(--es-mint); color: #03100a; }