/*--------------------------------------------------------------
# DotEcho - app stylesheet
# Brand tokens follow BRAND-GUIDELINES.md (DotTut family theme).
# Theming: dark is the default (brand is dark-first); the light theme
# is activated with html[data-theme="light"]. Every color used by a
# component must come from a token below so both themes stay in sync.
--------------------------------------------------------------*/

:root {
    /* Fonts */
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;
    --heading-font: "Ubuntu", sans-serif;
    --nav-font: "Inter", sans-serif;

    /* Brand constants (same in both themes) */
    --accent-color:     #40b605;
    --btn-green:        #2f8000;   /* white-text buttons (WCAG AA) */
    --btn-green-hover:  #287000;

    /* Status hues */
    --status-good: #22c55e;
    --status-warn: #f59e0b;
    --status-bad:  #ef4444;
    --status-info: #38bdf8;

    /* Layout */
    --sidebar-width: 256px;
    --topbar-height: 64px;

    scroll-behavior: smooth;
}

/* ---------- Dark theme (default) ---------- */
:root,
html[data-theme="dark"] {
    color-scheme: dark;

    --background-color: #040a01;
    --surface-color:    #0f1412;
    --surface-deep:     #0b0f0d;
    --sidebar-bg:       #060c03;
    --input-bg:         #121614;
    --input-border:     #1f2a25;

    --default-color:    #f3f6f4;
    --heading-color:    #e1eff9;
    --text-strong:      #ffffff;
    --text-soft:        rgba(255, 255, 255, .75);
    --text-muted:       rgba(255, 255, 255, .5);
    --text-faint:       rgba(255, 255, 255, .35);
    --hairline:         rgba(255, 255, 255, .06);
    --hairline-strong:  rgba(255, 255, 255, .1);
    --hover-bg:         rgba(255, 255, 255, .04);

    --emerald:          #22c55e;
    --link-color:       #22c55e;
    --link-hover:       #4ade80;

    --status-good-text: #22c55e;
    --status-warn-text: #f59e0b;
    --status-bad-text:  #ef4444;
    --status-info-text: #38bdf8;

    --chart-grid:  rgba(255, 255, 255, .06);
    --chart-label: rgba(255, 255, 255, .45);
    --glow:        0 0 40px rgba(0, 255, 120, .05);
    --overlay:     rgba(0, 0, 0, .6);
    --shadow-lg:   0 18px 50px rgba(0, 0, 0, .5);
    --placeholder: #8c9a93;
    --skeleton-a:  rgba(255, 255, 255, .05);
    --skeleton-b:  rgba(255, 255, 255, .11);
}

/* ---------- Light theme ---------- */
html[data-theme="light"] {
    color-scheme: light;

    --background-color: #f4f7f4;
    --surface-color:    #ffffff;
    --surface-deep:     #fbfdfb;
    --sidebar-bg:       #ffffff;
    --input-bg:         #f3f6f3;
    --input-border:     #d8e2d9;

    --default-color:    #1c2a21;
    --heading-color:    #0e1f14;
    --text-strong:      #0e1f14;
    --text-soft:        rgba(14, 31, 20, .8);
    --text-muted:       rgba(14, 31, 20, .58);
    --text-faint:       rgba(14, 31, 20, .42);
    --hairline:         rgba(14, 31, 20, .08);
    --hairline-strong:  rgba(14, 31, 20, .14);
    --hover-bg:         rgba(14, 31, 20, .045);

    --emerald:          #16a34a;
    --link-color:       #15803d;
    --link-hover:       #166534;

    --status-good-text: #15803d;
    --status-warn-text: #b45309;
    --status-bad-text:  #b91c1c;
    --status-info-text: #0369a1;

    --chart-grid:  rgba(14, 31, 20, .08);
    --chart-label: rgba(14, 31, 20, .45);
    --glow:        0 6px 30px rgba(20, 80, 40, .08);
    --overlay:     rgba(10, 20, 14, .45);
    --shadow-lg:   0 18px 50px rgba(20, 40, 28, .18);
    --placeholder: #7d8b81;
    --skeleton-a:  rgba(14, 31, 20, .06);
    --skeleton-b:  rgba(14, 31, 20, .12);
}

/* ---------- Base ---------- */

html { background-color: var(--background-color); }

body {
    margin: 0;
    background-color: var(--background-color);
    color: var(--default-color);
    font-family: var(--default-font);
}

/* ---------- Space ambiance (dark theme) ----------
   The starfield canvas sits behind everything; the body goes transparent in
   dark mode so stars show through page gaps while cards stay opaque. */

/* Never allow a horizontal scrollbar at the page level: data tables scroll in
   their own wrappers, and the fixed starfield must not be able to inflate the
   layout viewport (a wide element can briefly seed an overflow the fixed canvas
   then sustains). This caps the scroll width to the real viewport. */
html { overflow-x: hidden; }

#dlSpace {
    position: fixed;
    inset: 0;
    /* Constrain the DISPLAY size to the viewport; the canvas buffer is sized
       larger for DPR, and without this it paints at its full pixel size (e.g.
       780px on a 2x 390px phone) and creates a horizontal scroll. */
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* On phones/tablets, wide data tables scroll horizontally inside their card
   instead of pushing the whole page wider. */
@media (max-width: 991px) {
    .de-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

html[data-theme="dark"] {
    background-image:
        radial-gradient(1100px 640px at 82% -12%, rgba(64, 182, 5, .055), transparent 62%),
        radial-gradient(900px 540px at -8% 78%, rgba(34, 197, 94, .035), transparent 58%);
}

html[data-theme="dark"] body { background-color: transparent; }

/* Auth pages let the sky through entirely (the glow comes from html). */
html[data-theme="dark"] .de-auth {
    background: radial-gradient(1100px 500px at 80% -10%, rgba(64, 182, 5, .06), transparent 60%);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color .25s;
}

a:hover { color: var(--link-hover); }

::selection { background: var(--emerald); color: #06140a; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--emerald);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- App shell ---------- */

.de-app { display: flex; min-height: 100vh; }

/* Onboarding gate: keep the shell hidden (but laid out) until the gate confirms
   setup, so a new user is redirected to /onboarding without a dashboard flash. */
html.de-checking .de-app { visibility: hidden; }

.de-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    border-inline-end: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1000;
    padding: 20px 14px;
    overflow: visible; /* nav scrolls internally; keeps the website dropdown from clipping */
    transition: width .25s ease;
}

.de-main {
    flex: 1;
    margin-inline-start: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: margin-inline-start .25s ease;
}

/* The website combo must fit inside the sidebar's width (it inherits a
   min-width meant for wide toolbars). */
.de-sidebar .de-combo { min-width: 0; width: 100%; }
.de-sidebar .de-combo-panel { width: 100%; min-width: 0; }

/* ---------- Collapsed sidebar (icon rail) ---------- */

html[data-sidebar="collapsed"] { --sidebar-width: 76px; }

html[data-sidebar="collapsed"] .de-sidebar { padding: 20px 10px; }

html[data-sidebar="collapsed"] .de-brand { justify-content: center; padding-left: 0; padding-right: 0; }
html[data-sidebar="collapsed"] .de-brand .wordmark,
html[data-sidebar="collapsed"] .de-nav .nav-label,
html[data-sidebar="collapsed"] .de-nav a .txt,
html[data-sidebar="collapsed"] .de-side-site .lbl,
html[data-sidebar="collapsed"] .de-sidebar-foot,
html[data-sidebar="collapsed"] .de-combo-btn .txt,
html[data-sidebar="collapsed"] .de-combo-btn .bi-chevron-down { display: none; }

html[data-sidebar="collapsed"] .de-nav a { justify-content: center; padding: 11px 0; }
html[data-sidebar="collapsed"] .de-combo-btn { justify-content: center; padding: 9px 0; }

.de-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    background: none;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    color: var(--text-faint);
    font-family: var(--nav-font);
    font-size: .8rem;
    font-weight: 600;
    padding: 9px 0;
    margin-top: 10px;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}

.de-collapse-btn:hover { color: var(--emerald); border-color: var(--emerald); }
.de-collapse-btn i { transition: transform .25s ease; }
html[data-sidebar="collapsed"] .de-collapse-btn .txt { display: none; }
html[data-sidebar="collapsed"] .de-collapse-btn i { transform: rotate(180deg); }

.de-topbar {
    height: var(--topbar-height);
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 900;
}

.de-content { padding: 28px 24px; }

.de-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 990;
}

.de-backdrop.show { display: block; }

/* Sidebar brand */
.de-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 18px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 18px;
}

.de-brand .wordmark {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-strong);
    letter-spacing: .2px;
}

.de-brand .wordmark span { color: var(--emerald); }

/* Sidebar nav */
.de-nav {
    list-style: none; margin: 0; padding: 0;
    flex: 1 1 auto; min-height: 0;        /* only the nav scrolls; brand/site/collapse/foot stay pinned */
    overflow-y: auto; overflow-x: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}

.de-nav .nav-label {
    font-family: var(--nav-font);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-faint);
    padding: 14px 12px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.de-nav .nav-label:hover { color: var(--text-muted); }
.nav-label-chev { font-size: .62rem; opacity: .55; transition: transform .2s ease; }
.de-nav .nav-label.collapsed .nav-label-chev { transform: rotate(-90deg); }
/* JS hides the items of a collapsed section by tagging each one. */
.de-nav .de-nav-hidden { display: none !important; }

/* Notification count badge on a nav item (e.g. unreviewed free checks). */
.de-nav-badge {
    margin-left: auto;
    background: var(--status-bad-text, #ef4444);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.de-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    font-family: var(--nav-font);
    font-size: .92rem;
    font-weight: 500;
    color: var(--text-soft);
    transition: all .2s;
}

.de-nav a i { font-size: 1.05rem; color: var(--text-faint); transition: color .2s; }

.de-nav a:hover { background: var(--hover-bg); color: var(--text-strong); }
.de-nav a:hover i { color: var(--emerald); }

.de-nav a.active {
    background: rgba(34, 197, 94, .12);
    color: var(--text-strong);
}

.de-nav a.active i { color: var(--emerald); }

.de-sidebar-foot {
    padding: 14px 12px;
    border-top: 1px solid var(--hairline);
    font-size: .75rem;
    color: var(--text-faint);
}

/* Topbar bits */
.de-page-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.de-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: 8px 14px;
    min-width: 220px;
}

.de-search i { color: var(--text-faint); }

.de-search input {
    background: none;
    border: 0;
    outline: none;
    color: var(--text-strong);
    font-family: var(--nav-font);
    font-size: .88rem;
    width: 100%;
}

.de-search input::placeholder { color: var(--placeholder); }

.de-topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.de-search + .de-topbar-actions { margin-left: 0; }

.de-icon-btn {
    background: none;
    border: 0;
    color: var(--text-soft);
    font-size: 1.15rem;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.de-icon-btn:hover { background: var(--hover-bg); color: var(--emerald); }

/* Destructive row action: reads as ordinary until pointed at, then clearly warns. */
.de-icon-btn.danger:hover { background: rgba(239, 68, 68, .12); color: var(--status-bad-text); }

.de-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--nav-font);
    font-size: .88rem;
    color: var(--text-soft);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 10px;
}

.de-user:hover { background: var(--hover-bg); }

.de-user .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(150deg, #4ad006, var(--btn-green));
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
}

.de-user .name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dropdown (Bootstrap, themed) */
.dropdown-menu {
    background: var(--surface-color);
    border: 1px solid var(--hairline-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    min-width: 200px;
}

.dropdown-menu .dropdown-item {
    color: var(--text-soft);
    font-family: var(--nav-font);
    font-size: .88rem;
    border-radius: 8px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dropdown-menu .dropdown-item i { color: var(--text-faint); }
.dropdown-menu .dropdown-item:hover { background: var(--hover-bg); color: var(--text-strong); }
.dropdown-menu .dropdown-item:hover i { color: var(--emerald); }
.dropdown-menu .dropdown-header { color: var(--text-faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; }
.dropdown-menu .dropdown-divider { border-color: var(--hairline); }

/* The current page, marked the same way the sidebar marks it. Bootstrap's own
   .active is a solid blue fill, which belongs to no part of this design system. */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background: rgba(34, 197, 94, .12);
    color: var(--text-strong);
}

.dropdown-menu .dropdown-item.active i { color: var(--emerald); }

/* ---------- Account menu (avatar, top right) ---------- */
/* Carries the Manage section, so it is wider than a plain menu and lets the signed-in
   address read as an address rather than a shouted section label. */
.de-user-menu { min-width: 232px; }

.de-user-menu > li:first-child .dropdown-header {
    text-transform: none;
    letter-spacing: 0;
    font-size: .8rem;
    color: var(--text-soft);
    word-break: break-all;
}

/* Workspace selector (lives in the topbar) */
/* One control, not two. The shell used to carry its own border, background and radius,
   and the searchable combobox that replaced the native select brought a full .de-input's
   chrome inside it - so the topbar showed a bordered box nested in a bordered pill, at
   two different radii. The shell is now just a positioning context, exactly like
   .de-quicksearch beside it, and the input alone is the visible control. */
.de-ws-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* Inside the field rather than beside it, mirroring the quick-search icon. */
.de-ws-wrap > i {
    position: absolute;
    left: 10px;
    z-index: 1;
    color: var(--emerald);
    font-size: .85rem;
    pointer-events: none;
}

.de-ctx-select {
    background: transparent;
    border: 0;
    color: var(--text-strong);
    font-family: var(--nav-font);
    font-size: .85rem;
    border-radius: 8px;
    padding: 6px 4px;
    max-width: 200px;
    cursor: pointer;
}

.de-ctx-select:focus { outline: none; }
.de-ws-wrap[hidden] { display: none; }

/* The topbar switcher is the searchable combobox, so the visible control is its input.
   These selectors are deliberately specific enough to outrank both `.de-input` (which
   sits later in this file and would otherwise win the tie on source order) and
   `.de-cbx > .de-input`, which sets its own width and right padding. */
.de-ws-wrap > .de-cbx { width: min(220px, 34vw); }

.de-ws-wrap .de-cbx > .de-input {
    width: 100%;
    height: 34px;
    padding: 0 34px 0 30px;      /* chevron on the right, workspace icon on the left */
    font-size: .84rem;
    text-overflow: ellipsis;     /* a long workspace name truncates rather than scrolls */
    /* Radius, border and background come from .de-input, so this field and the
       quick-search next to it stay identical without restating either. */
}

/* The switcher never offers a clear button - there is no "no workspace" - so the chevron
   is the only thing needing room on the right. */
.de-ws-wrap .de-cbx.clearable > .de-input { padding-right: 34px; }

.de-ws-search[hidden] { display: none; }

/* Native dropdown lists follow the theme (otherwise white-on-white in dark mode). */
.de-ctx-select option,
.de-select option {
    background: var(--surface-color);
    color: var(--default-color);
}

/* Website selector (lives in the sidebar, above the nav) */
.de-side-site { margin-bottom: 16px; }

.de-side-site .lbl,
.de-side-ws .lbl {
    display: block;
    font-family: var(--nav-font);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-faint);
    padding: 0 12px 6px;
}

/* Workspace switcher inside the sidebar drawer - phones only (the topbar one is
   hidden at <=575). Kept in sync with the topbar select via .de-ws-select. */
.de-side-ws { display: none; margin-bottom: 16px; }
.de-side-select {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--hairline);
    border-radius: 9px;
    padding: 9px 11px;
    color: var(--text-strong);
    font-family: var(--nav-font);
    font-size: .85rem;
    cursor: pointer;
}
.de-side-select:focus { outline: none; border-color: var(--emerald); }
.de-side-select option { background: var(--surface-color); color: var(--default-color); }
@media (max-width: 575px) { .de-side-ws { display: block; } }
/* Author-level rule so the hidden attribute still wins inside the media query above. */
.de-side-ws[hidden] { display: none; }

/* Back button + breadcrumb + title, grouped. On desktop this is transparent
   (acts like a normal inline cluster); on phones it drops to its own row. */
.de-titlebar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* Breadcrumb path: one line, ancestors muted, current page is the title
   (Vercel-style: "Site Audit / Audit Report"). */
.de-path {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.de-path .seg {
    font-family: var(--nav-font);
    font-size: .92rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: color .2s;
    flex-shrink: 0;
}

.de-path .seg:hover { color: var(--emerald); }

.de-path .sep {
    color: var(--text-faint);
    font-size: .95rem;
    font-weight: 300;
    flex-shrink: 0;
    user-select: none;
}

.de-path .de-page-title { flex-shrink: 1; min-width: 0; }

/* Icon ONLY - the 32px box is fixed, so a text label put inside it overflows the border
   it is drawn in. For a labelled back link use .btn-ghost.btn-sm or .de-co-quicklink. */
.de-back {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-soft);
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .92rem;
    flex-shrink: 0;
    transition: border-color .2s, color .2s, transform .2s;
}

.de-back:hover { border-color: var(--emerald); color: var(--emerald); }
.de-back:hover i { animation: de-nudge-left .5s ease; }

@keyframes de-nudge-left {
    30% { transform: translateX(-3px); }
}

/* Searchable combobox */
.de-combo { position: relative; min-width: 230px; }

.de-combo-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-strong);
    font-family: var(--nav-font);
    font-size: .85rem;
    border-radius: 9px;
    padding: 8px 12px;
    cursor: pointer;
    text-align: left;
}

.de-combo-btn:hover { border-color: var(--emerald); }
.de-combo-btn .bi-globe2 { color: var(--emerald); }
.de-combo-btn .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-combo-btn .bi-chevron-down { font-size: .7rem; color: var(--text-faint); }

.de-combo-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: max(100%, 300px);
    background: var(--surface-color);
    border: 1px solid var(--hairline-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 10px;
    z-index: 1200;
    animation: de-reveal .25s ease;
}

.de-combo-panel .de-input { padding: 9px 12px; border-radius: 9px; font-size: .85rem; }

.de-combo-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.de-combo-list li {
    padding: 9px 11px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--nav-font);
    font-size: .86rem;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.de-combo-list li:hover, .de-combo-list li.hover { background: var(--hover-bg); color: var(--text-strong); }
.de-combo-list li.selected { background: rgba(34, 197, 94, .12); color: var(--text-strong); }
.de-combo-list li .sub { font-size: .73rem; color: var(--text-faint); }
.de-combo-list li.none { cursor: default; color: var(--text-faint); justify-content: center; }

@media (max-width: 575px) {
    .de-ctxbar { padding: 10px 14px; }
    .de-ctxbar .lbl { display: none; }
    .de-ctx-select { max-width: 130px; }
    .de-combo { flex: 1; min-width: 0; }
}

/* ---------- Components ---------- */

/* Buttons */
.btn-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--btn-green);
    border: 2px solid var(--btn-green);
    color: #fff;
    padding: 10px 22px;
    font-family: var(--nav-font);
    font-size: .9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all .25s ease;
}

.btn-brand:hover:not(:disabled) { background: var(--btn-green-hover); border-color: var(--btn-green-hover); color: #fff; transform: translateY(-2px); }
.btn-brand:disabled { opacity: .55; cursor: not-allowed; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--hairline-strong);
    color: var(--text-soft);
    padding: 10px 22px;
    font-family: var(--nav-font);
    font-size: .9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all .25s ease;
}

.btn-ghost:hover:not(:disabled) { border-color: var(--emerald); color: var(--text-strong); }
.btn-ghost:disabled { opacity: .55; cursor: not-allowed; }

.btn-danger-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, .35);
    color: var(--status-bad-text);
    padding: 8px 16px;
    font-family: var(--nav-font);
    font-size: .85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all .25s ease;
}

.btn-danger-ghost:hover { background: rgba(239, 68, 68, .1); border-color: var(--status-bad); }

/* Solid destructive button, shaped like .btn-brand because it sits in the same place:
   the one action a confirmation dialog is asking about. The ghost above is for a
   destructive control offered in passing, where it must not outrank the page. */
.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #b91c1c;
    border: 2px solid #b91c1c;
    color: #fff;
    padding: 10px 22px;
    font-family: var(--nav-font);
    font-size: .9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all .25s ease;
}

.btn-danger:hover:not(:disabled) { background: #991b1b; border-color: #991b1b; color: #fff; }
.btn-danger:disabled { opacity: .55; cursor: not-allowed; }

.btn-sm { padding: 7px 14px; font-size: .82rem; }

/* Cards */
.de-card {
    background: var(--surface-color);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 24px;
    transition: border-color .25s;
}

.de-card:hover { border-color: rgba(34, 197, 94, .25); }

.de-card .card-title {
    font-family: var(--nav-font);
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 4px;
}

.de-card .card-sub { font-size: .8rem; color: var(--text-muted); margin: 0; }

.de-glow { box-shadow: var(--glow); }

/* Stat tiles */
.de-stat .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(34, 197, 94, .12);
    color: var(--emerald);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.de-stat .stat-value {
    font-family: var(--nav-font);
    font-variant-numeric: tabular-nums;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.1;
}

.de-stat .stat-label {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.de-stat .stat-delta {
    font-family: var(--nav-font);
    font-size: .78rem;
    font-weight: 600;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stat-delta.up   { color: var(--status-good-text); }
.stat-delta.down { color: var(--status-bad-text); }

/* Badges */
.de-badge {
    display: inline-block;
    font-family: var(--nav-font);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .4px;
    padding: 3px 11px;
    border-radius: 20px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.de-badge.good    { color: var(--status-good-text); background: rgba(34, 197, 94, .1);  border-color: rgba(34, 197, 94, .3); }
.de-badge.warn    { color: var(--status-warn-text); background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); }
.de-badge.bad     { color: var(--status-bad-text);  background: rgba(239, 68, 68, .1);  border-color: rgba(239, 68, 68, .3); }
.de-badge.info    { color: var(--status-info-text); background: rgba(56, 189, 248, .1); border-color: rgba(56, 189, 248, .3); }
.de-badge.neutral { color: var(--text-muted);       background: var(--hover-bg);        border-color: var(--hairline-strong); }

/* Tables */
.de-table { width: 100%; border-collapse: collapse; }

.de-table th {
    text-align: left;
    font-family: var(--nav-font);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-faint);
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline-strong);
    white-space: nowrap;
}

.de-table td {
    padding: 13px 14px;
    font-size: .88rem;
    color: var(--text-soft);
    border-bottom: 1px solid var(--hairline);
    font-variant-numeric: tabular-nums;
}

.de-table td.strong { color: var(--text-strong); font-weight: 500; }

.de-table tbody tr { transition: background .15s; }
.de-table tbody tr:hover { background: rgba(34, 197, 94, .04); }
.de-table tbody tr:last-child td { border-bottom: 0; }
.de-table tbody tr.clickable { cursor: pointer; }

/* Inputs */
.de-input, .de-select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-strong);
    padding: 12px 14px;
    border-radius: 12px;
    font-family: var(--nav-font);
    font-size: .9rem;
    width: 100%;
    transition: border-color .2s, box-shadow .2s;
}

.de-input:focus, .de-select:focus {
    outline: none;
    border-color: var(--emerald);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .15);
}

.de-input::placeholder { color: var(--placeholder); }

.de-select { appearance: auto; }

.de-field { margin-bottom: 16px; }

.de-field label {
    display: block;
    font-family: var(--nav-font);
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-soft);
    margin-bottom: 6px;
}

.de-field .hint { font-size: .76rem; color: var(--text-faint); margin-top: 5px; }

.de-error {
    display: none;
    font-size: .83rem;
    color: var(--status-bad-text);
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .25);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.de-error.show { display: block; }

/* Progress bars */
.de-bar {
    height: 6px;
    background: var(--hover-bg);
    border-radius: 4px;
    overflow: hidden;
}

.de-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--emerald); transition: width .4s ease; }

.de-progress-label {
    display: flex;
    justify-content: space-between;
    font-family: var(--nav-font);
    font-size: .78rem;
    color: var(--text-muted);
    margin-bottom: 5px;
}

/* Score ring (SVG wrapper) */
.de-ring { position: relative; display: inline-flex; }

.de-ring .ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--nav-font);
}

.de-ring .ring-value strong {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.de-ring .ring-value small { font-size: .72rem; color: var(--text-muted); margin-top: 4px; }

.de-ring .track { stroke: var(--hover-bg); }

/* Score text colors */
.score-good { color: var(--status-good-text) !important; }
.score-warn { color: var(--status-warn-text) !important; }
.score-bad  { color: var(--status-bad-text) !important; }

/* Section label */
.de-label {
    font-family: var(--nav-font);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-faint);
}

/* Severity dot */
.de-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.de-dot.critical { background: var(--status-bad); }
.de-dot.medium   { background: var(--status-warn); }
.de-dot.low      { background: var(--status-info); }

/* Issue accordion (native <details>, CSP-safe and accessible) */
details.de-issue {
    background: var(--surface-color);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
}

details.de-issue summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    font-family: var(--nav-font);
    transition: background .15s;
}

details.de-issue summary::-webkit-details-marker { display: none; }
details.de-issue summary:hover { background: var(--hover-bg); }

details.de-issue summary .title { font-weight: 600; color: var(--text-strong); font-size: .92rem; flex: 1; }
details.de-issue summary .chev { color: var(--text-faint); transition: transform .3s ease; }
details.de-issue[open] summary .chev { transform: rotate(180deg); }

/* Gentle reveal when an issue group opens */
details.de-issue[open] .body { animation: de-reveal .35s ease; }

@keyframes de-reveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

details.de-issue .body {
    padding: 4px 20px 18px;
    border-top: 1px solid var(--hairline);
    font-size: .88rem;
    color: var(--text-soft);
}

details.de-issue .body h4 {
    font-family: var(--nav-font);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-faint);
    margin: 16px 0 5px;
}

details.de-issue .body p { margin: 0; }

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

.de-affected li {
    padding: 7px 0;
    border-bottom: 1px solid var(--hairline);
    font-size: .82rem;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.de-affected li:last-child { border-bottom: 0; }
.de-affected .detail { color: var(--text-faint); }

/* ---------- Fix module ---------- */

details.de-fix-item.done { opacity: .6; }
details.de-fix-item.done summary .title { text-decoration: line-through; }

.de-fix-done {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--nav-font);
    font-size: .76rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.de-fix-done input { accent-color: var(--emerald); cursor: pointer; }

.de-fix-pages { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

.de-fix-page {
    border: 1px solid var(--hairline);
    border-radius: 11px;
    padding: 12px 14px;
    background: var(--surface-deep);
}

.de-fix-page .row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.de-fix-page .row-top > a,
.de-fix-page .row-top > span:first-child {
    font-size: .85rem;
    word-break: break-all;
    min-width: 0;
}

.de-fix-page .cur {
    margin-top: 8px;
    font-size: .84rem;
    color: var(--text-soft);
}

.de-fix-page .cur .lbl {
    font-family: var(--nav-font);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-faint);
    margin-right: 6px;
}

.de-fix-page .cur .val { font-style: italic; }

.ai-out { margin-top: 12px; animation: de-reveal .3s ease; }

.ai-out .ai-head {
    font-family: var(--nav-font);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--emerald);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid rgba(34, 197, 94, .25);
    background: rgba(34, 197, 94, .05);
    border-radius: 9px;
    margin-bottom: 8px;
}

.ai-option .txt { flex: 1; min-width: 0; font-size: .88rem; color: var(--text-strong); }
.ai-option .note { font-size: .74rem; color: var(--text-faint); white-space: nowrap; }
.ai-option button { flex-shrink: 0; }

@media (max-width: 575px) {
    .ai-option { flex-wrap: wrap; }
    .ai-option .txt { flex-basis: 100%; }
}

/* Priority list */
.de-priority {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--hairline);
}

.de-priority:last-child { border-bottom: 0; }

.de-priority .rank {
    font-family: var(--nav-font);
    font-weight: 700;
    font-size: .85rem;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(34, 197, 94, .12);
    color: var(--emerald);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.de-priority .title { font-weight: 600; color: var(--text-strong); font-size: .9rem; font-family: var(--nav-font); }
.de-priority .fix { font-size: .82rem; color: var(--text-muted); margin-top: 2px; }

/* ---------- Rank module ---------- */
.de-spark { display: block; overflow: visible; }

/* ---------- Pulse module ---------- */
.de-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border-radius: 999px;
    font-family: var(--nav-font);
    font-weight: 700;
    font-size: 1.05rem;
    border: 1px solid var(--hairline-strong);
}

.de-status-pill .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-faint);
}

.de-status-pill.up {
    color: var(--status-good-text);
    background: rgba(34, 197, 94, .1);
    border-color: rgba(34, 197, 94, .3);
}
.de-status-pill.up .dot {
    background: var(--status-good-text);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
    animation: de-pulse-dot 1.8s infinite;
}

.de-status-pill.down {
    color: var(--status-bad-text);
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .3);
}
.de-status-pill.down .dot { background: var(--status-bad-text); }

.de-status-pill.unknown { color: var(--text-muted); background: var(--hover-bg); }

@keyframes de-pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .de-status-pill.up .dot { animation: none; }
}

.de-pulse-event {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
}
.de-pulse-event:last-child { border-bottom: 0; }
.de-pulse-event .ico { font-size: 1.05rem; color: var(--text-muted); margin-top: 1px; }
.de-pulse-event .ev-title { font-weight: 600; color: var(--text-strong); font-size: .88rem; }
.de-pulse-event .ev-detail { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
.de-pulse-event .ev-time { font-size: .72rem; color: var(--text-faint); margin-top: 3px; }
.de-pulse-event.resolved { opacity: .55; }
.de-pulse-event.resolved .ico { color: var(--status-good-text); }

/* ---------- Agency: shared ---------- */
.de-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .88rem; color: var(--text-soft); }
.de-switch input { width: 18px; height: 18px; accent-color: var(--emerald); cursor: pointer; }

/* Branding preview */
.br-preview {
    border: 1px solid var(--hairline-strong);
    border-radius: 14px;
    padding: 22px;
    background: var(--surface-deep);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}
.br-brand { display: flex; align-items: center; gap: 10px; }
.br-name { font-family: var(--nav-font); font-weight: 700; font-size: 1.1rem; color: var(--text-strong); }
.br-cta { border: none; color: #fff; font-weight: 600; font-size: .82rem; padding: 8px 16px; border-radius: 9px; background: var(--emerald); }
.br-bar { width: 100%; height: 7px; border-radius: 4px; background: var(--hover-bg); overflow: hidden; }
.br-bar > span { display: block; width: 68%; height: 100%; background: var(--emerald); }
.br-foot { font-size: .76rem; color: var(--text-faint); }

/* Portal share links */
.de-share-link {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 0; border-bottom: 1px solid var(--hairline);
}
.de-share-link:last-child { border-bottom: 0; }

/* ---------- Agency: task board ---------- */
.de-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.de-col {
    background: var(--surface-deep);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 12px;
    min-height: 160px;
}
.de-col-head {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--nav-font); font-weight: 600; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
    padding: 4px 6px 12px;
}
.de-col-body { display: flex; flex-direction: column; gap: 10px; min-height: 60px; border-radius: 10px; transition: background .15s; }
.de-col-body.drop-over { background: rgba(34, 197, 94, .08); outline: 2px dashed rgba(34, 197, 94, .4); outline-offset: 3px; }
.de-col-empty { text-align: center; color: var(--text-faint); font-size: .8rem; padding: 16px 0; margin: 0; }

.de-task {
    background: var(--surface-color);
    border: 1px solid var(--hairline-strong);
    border-radius: 11px;
    padding: 12px;
    cursor: grab;
    transition: box-shadow .15s, transform .1s, border-color .15s;
}
.de-task:hover { border-color: var(--emerald); box-shadow: var(--shadow-lg); }
.de-task.dragging { opacity: .5; }
.de-task-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.de-task-actions { display: flex; gap: 2px; opacity: 1; }
.de-task-status-label { display: block; width: 100%; font-size: .72rem; color: var(--text-faint); margin-top: 8px; }
.de-task-status { font-size: .78rem; padding: 5px 8px; min-height: auto; width: 100%; margin-top: 4px; }
@media (min-width: 801px) {
  .de-task-actions { opacity: 0; transition: opacity .15s; }
  .de-task:hover .de-task-actions { opacity: 1; }
}
.de-task-title { font-weight: 600; color: var(--text-strong); font-size: .88rem; margin: 0 0 4px; }
.de-task-desc { font-size: .78rem; color: var(--text-muted); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.de-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.de-task-due { font-size: .72rem; color: var(--text-faint); display: inline-flex; align-items: center; gap: 4px; }
.de-task-who {
    margin-left: auto; width: 24px; height: 24px; border-radius: 50%;
    background: var(--emerald); color: #fff; font-size: .66rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 800px) { .de-board { grid-template-columns: 1fr; } }

/* ---------- Agency: public share page ---------- */
.de-share-page { max-width: 880px; margin: 0 auto; padding: 40px 20px 80px; }
.de-share-loading, .de-share-error { text-align: center; padding: 80px 20px; color: var(--text-muted); }
.de-share-error i { font-size: 2.6rem; color: var(--text-faint); }
.de-share-error h1 { font-size: 1.4rem; color: var(--text-strong); margin: 12px 0 6px; }

.de-share-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); }
.de-share-brand { display: flex; align-items: center; gap: 12px; }
.de-share-company { font-family: var(--nav-font); font-weight: 700; font-size: 1.15rem; color: var(--text-strong); margin: 0; }
.de-share-sub { font-size: .78rem; color: var(--text-faint); margin: 0; }
.de-share-site { text-align: right; }
.de-share-name { font-weight: 600; color: var(--text-strong); margin: 0; }
.de-share-domain { font-size: .82rem; color: var(--text-muted); margin: 0; }

.de-share-hero { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; padding: 30px 0; }
.de-share-stats { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 18px 28px; flex: 1; }
.de-share-stat { display: flex; flex-direction: column; }
.de-share-stat .v { font-family: var(--nav-font); font-weight: 700; font-size: 1.5rem; color: var(--text-strong); }
.de-share-stat .l { font-size: .76rem; color: var(--text-muted); }

.de-share-block { padding: 18px 0; border-top: 1px solid var(--hairline); }
.de-share-block h2 { font-size: 1.05rem; color: var(--text-strong); margin: 0 0 14px; }
.de-share-empty { color: var(--text-muted); font-size: .9rem; }
.de-share-issue { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.de-share-issue:last-child { border-bottom: 0; }
.de-share-issue .rank { width: 26px; height: 26px; border-radius: 8px; background: rgba(34,197,94,.12); color: var(--emerald); font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.de-share-issue .t { font-weight: 600; color: var(--text-strong); font-size: .9rem; margin: 0; }
.de-share-issue .f { font-size: .82rem; color: var(--text-muted); margin: 2px 0 0; }

.de-share-report { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hairline-strong); border-radius: 10px; margin-bottom: 8px; color: var(--text-strong); text-decoration: none; transition: border-color .15s; }
.de-share-report:hover { border-color: var(--emerald); }
.de-share-report .de-share-report-date { font-size: .76rem; color: var(--text-faint); }
.de-share-foot { text-align: center; padding-top: 28px; color: var(--text-faint); font-size: .8rem; }

/* ---------- DotEcho AI ---------- */
.de-ai-thinking { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px; color: var(--text-muted); }
.de-ai-copy { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 9px; margin-bottom: 8px; }
.de-ai-copy > span { flex: 1; min-width: 0; font-size: .88rem; color: var(--text-strong); }
.de-ai-copy button { flex-shrink: 0; }
.de-ai-old { font-size: .72rem; color: var(--text-faint); margin-top: 4px; }
.de-ai-faq { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.de-ai-faq:last-child { border-bottom: 0; }
.de-ai-faq .q { font-weight: 600; color: var(--text-strong); font-size: .9rem; margin: 0 0 3px; }
.de-ai-faq .a { font-size: .85rem; color: var(--text-muted); margin: 0; }
.de-ai-outline { padding-left: 18px; margin: 0; }
.de-ai-outline > li { margin-bottom: 8px; color: var(--text-strong); font-size: .9rem; }
.de-ai-outline ul { margin: 4px 0 0; padding-left: 18px; }
.de-ai-outline ul li { color: var(--text-muted); font-size: .84rem; font-weight: 400; }
.de-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.de-chip { font-size: .76rem; padding: 4px 10px; border-radius: 999px; background: var(--hover-bg); color: var(--text-soft); border: 1px solid var(--hairline-strong); }
.de-code {
    background: var(--surface-deep); border: 1px solid var(--hairline);
    border-radius: 9px; padding: 12px; font-size: .76rem; line-height: 1.5;
    color: var(--text-soft); overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 0;
}
.de-ai-hist { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-radius: 9px; cursor: pointer; transition: background .15s; }
.de-ai-hist:hover { background: var(--hover-bg); }
.de-ai-hist > i { color: var(--emerald); }
.de-ai-hist .t { font-size: .84rem; font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-ai-hist .d { font-size: .72rem; color: var(--text-faint); }

/* ---------- DotEcho Local ---------- */
.de-heat { display: grid; gap: 6px; max-width: 380px; }
.de-heat-cell {
    aspect-ratio: 1; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-family: var(--nav-font); font-weight: 700; font-size: .82rem; color: #fff;
}
.de-heat-cell.good { background: #22c55e; }
.de-heat-cell.warn { background: #f59e0b; }
.de-heat-cell.bad  { background: #ef4444; }
.de-heat-cell.none { background: var(--hover-bg); color: var(--text-faint); }

.de-check { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.de-check:last-child { border-bottom: 0; }
.de-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--emerald); cursor: pointer; flex-shrink: 0; }
.de-check .t { display: block; font-weight: 600; color: var(--text-strong); font-size: .88rem; }
.de-check .d { display: block; font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
.de-check.done .t { text-decoration: line-through; color: var(--text-muted); }

.de-stars { white-space: nowrap; }
.de-stars .bi { font-size: .82rem; }
.de-review-resp { font-size: .82rem; color: var(--text-muted); background: var(--hover-bg); border-radius: 8px; padding: 7px 10px; }
.de-review-resp .bi { color: var(--emerald); }

/* ---------- DotEcho Ascent ---------- */
.de-ascent-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--hover-bg);
    color: var(--text-strong); font-weight: 700; font-size: .82rem; text-decoration: none;
    transition: border-color .15s, transform .1s;
}
.de-ascent-chip:hover { border-color: var(--emerald); transform: translateY(-1px); }
.de-ascent-chip .bi { color: var(--emerald); }

.de-jy-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.de-zeo svg { display: block; filter: drop-shadow(0 4px 14px rgba(34,197,94,.25)); }
.de-jy-level { flex: 1; min-width: 220px; }
.de-jy-level .lv-name { font-family: var(--nav-font); font-weight: 700; font-size: 1.3rem; color: var(--text-strong); margin: 0 0 8px; }
.de-jy-level .lv-xp { font-size: .8rem; color: var(--text-muted); margin: 6px 0 0; }
.de-jy-xpbar { height: 12px; border-radius: 8px; background: var(--hover-bg); overflow: hidden; }
.de-jy-xpbar > span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--emerald), #38bdf8); transition: width .6s ease; }

.de-jy-path { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; margin-top: 22px; }
.de-jy-node { flex: 1; text-align: center; position: relative; }
.de-jy-node::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--hairline-strong); z-index: 0; }
.de-jy-node:first-child::before { display: none; }
.de-jy-node.done::before, .de-jy-node.current::before { background: var(--emerald); }
.de-jy-node .dot {
    position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem;
    background: var(--surface-color); border: 2px solid var(--hairline-strong); color: var(--text-faint);
}
.de-jy-node.done .dot { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.de-jy-node.current .dot { border-color: var(--emerald); color: var(--emerald); box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.de-jy-node .nm { display: block; font-size: .68rem; color: var(--text-muted); margin-top: 6px; }
.de-jy-node.current .nm { color: var(--text-strong); font-weight: 600; }
@media (max-width: 640px) { .de-jy-node .nm { display: none; } }

.de-streak-flame { font-size: 2rem; color: #f59e0b; }
.de-streak-weeks { font-family: var(--nav-font); font-weight: 700; font-size: 2.4rem; color: var(--text-strong); margin: 2px 0 0; line-height: 1; }

.de-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 12px; }
.de-badge-tile { border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 8px; text-align: center; transition: transform .12s; }
.de-badge-tile:hover { transform: translateY(-2px); }
.de-badge-tile .ic { font-size: 1.7rem; }
.de-badge-tile .nm { font-size: .76rem; font-weight: 600; color: var(--text-strong); margin-top: 6px; }
.de-badge-tile .tr { font-size: .66rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.de-badge-tile.locked { opacity: .45; filter: grayscale(1); }
.de-badge-tile.tier-bronze .ic { color: #cd7f32; }
.de-badge-tile.tier-silver .ic { color: #b8c2cc; }
.de-badge-tile.tier-gold .ic { color: #f5b301; }
.de-badge-tile.tier-gold { border-color: rgba(245,179,1,.4); box-shadow: 0 0 0 1px rgba(245,179,1,.15) inset; }

.de-credit-balance { font-family: var(--nav-font); font-weight: 700; font-size: 1.9rem; color: var(--text-strong); }
.de-credit-balance .bi { color: #f5b301; }

.de-reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.de-reward { display: flex; align-items: center; gap: 12px; border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 12px; }
.de-reward.dim { opacity: .6; }
.de-reward .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--hover-bg); display: flex; align-items: center; justify-content: center; color: var(--emerald); font-size: 1.2rem; flex-shrink: 0; }
.de-reward .bd { flex: 1; min-width: 0; }
.de-reward .nm { font-weight: 600; color: var(--text-strong); font-size: .86rem; margin: 0; }
.de-reward .ds { font-size: .76rem; color: var(--text-muted); margin: 2px 0 0; }

.de-refer-link { display: flex; align-items: center; gap: 10px; background: var(--surface-deep); border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 10px 12px; }
.de-refer-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--emerald); font-size: .84rem; }

/* Celebration */
.de-celebrate { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: var(--overlay, rgba(0,0,0,.5)); opacity: 0; transition: opacity .25s; }
.de-celebrate.in { opacity: 1; }
.de-celebrate.out { opacity: 0; }
.de-celebrate-card { background: var(--surface-color); border: 1px solid var(--hairline-strong); border-radius: 18px; padding: 32px 36px; text-align: center; max-width: 380px; transform: scale(.9); transition: transform .25s cubic-bezier(.2,1.3,.4,1); box-shadow: var(--shadow-lg); }
.de-celebrate.in .de-celebrate-card { transform: scale(1); }
.de-celebrate-icon { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 14px; background: linear-gradient(135deg, var(--emerald), #38bdf8); display: flex; align-items: center; justify-content: center; font-size: 2.1rem; color: #fff; }
.de-celebrate-title { font-family: var(--nav-font); font-weight: 700; font-size: 1.25rem; color: var(--text-strong); margin: 0 0 4px; }
.de-celebrate-sub { color: var(--text-muted); font-size: .9rem; margin: 0 0 8px; }
.de-celebrate-credits { color: #f5b301; font-weight: 700; margin: 0 0 14px; }
.de-celebrate-ok { margin-top: 6px; }
.de-confetti { position: fixed; inset: 0; z-index: 10001; pointer-events: none; }

.de-share-ascent { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid rgba(34,197,94,.3); border-radius: 12px; margin: 8px 0 4px; color: var(--text-strong); font-size: .9rem; }
.de-share-ascent .bi { color: var(--emerald); font-size: 1.2rem; }

/* ---------- Command palette (⌘K) ---------- */
.de-cmd { position: fixed; inset: 0; z-index: 9500; background: var(--overlay, rgba(0,0,0,.45)); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; backdrop-filter: blur(2px); }
.de-cmd-box { width: 100%; max-width: 600px; background: var(--surface-color); border: 1px solid var(--hairline-strong); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.de-cmd-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.de-cmd-search .bi { color: var(--text-faint); font-size: 1.1rem; }
.de-cmd-search input { flex: 1; background: none; border: 0; outline: none; color: var(--text-strong); font-size: 1rem; font-family: inherit; }
.de-cmd-search kbd { font-size: .68rem; color: var(--text-faint); border: 1px solid var(--hairline-strong); border-radius: 6px; padding: 2px 6px; }
.de-cmd-list { list-style: none; margin: 0; padding: 6px; max-height: 56vh; overflow-y: auto; }
.de-cmd-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; cursor: pointer; }
.de-cmd-list li.active { background: var(--hover-bg); }
.de-cmd-list li > .bi { color: var(--emerald); width: 18px; text-align: center; }
.de-cmd-list .lbl { flex: 1; min-width: 0; color: var(--text-strong); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-cmd-list .lbl .sub { color: var(--text-faint); font-size: .8rem; }
.de-cmd-list .grp { font-size: .68rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.de-cmd-empty { padding: 20px; text-align: center; color: var(--text-faint); }

/* ---------- Notification bell ---------- */
.de-notify { position: relative; }
.de-notify-btn { position: relative; }
.de-notify-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--status-bad-text); box-shadow: 0 0 0 2px var(--sidebar-bg); }
.de-notify-panel {
    position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-width: 86vw;
    background: var(--surface-color); border: 1px solid var(--hairline-strong); border-radius: 14px;
    box-shadow: var(--shadow-lg); z-index: 1200; overflow: hidden;
}
.de-notify-head { padding: 12px 16px; font-weight: 600; color: var(--text-strong); border-bottom: 1px solid var(--hairline); font-size: .9rem; }
.de-notify-list { max-height: 60vh; overflow-y: auto; }
.de-notify-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); text-decoration: none; transition: background .15s; }
.de-notify-item:last-child { border-bottom: 0; }
.de-notify-item:hover { background: var(--hover-bg); }
.de-notify-item > .bi { color: var(--emerald); margin-top: 2px; }
.de-notify-item.unread { background: rgba(34,197,94,.05); }
.de-notify-item.unread > .bi { color: var(--status-info-text); }
.de-notify-item .t { font-weight: 500; color: var(--text-strong); font-size: .85rem; margin: 0; }
.de-notify-item .d { font-size: .78rem; color: var(--text-muted); margin: 2px 0 0; }
.de-notify-item .tm { font-size: .72rem; color: var(--text-faint); margin: 3px 0 0; }
.de-notify-empty { padding: 32px 16px; text-align: center; color: var(--text-faint); }
.de-notify-empty .bi { font-size: 1.6rem; color: var(--emerald); }
.de-notify-empty p { margin: 8px 0 0; }

/* ---------- AI assistant panel ---------- */
.de-ask-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 1600;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px 11px 15px; border: 0; border-radius: 999px; cursor: pointer;
    color: #fff; font: inherit; font-weight: 600; font-size: .92rem; letter-spacing: .01em;
    background: linear-gradient(120deg, var(--emerald), #38bdf8);
    box-shadow: 0 10px 26px rgba(16, 185, 129, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
}
.de-ask-fab .bi { font-size: 1.05rem; }
.de-ask-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(16, 185, 129, .5); }
.de-ask-fab.hidden { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; }

.de-ask { position: fixed; inset: 0; z-index: 9600; }
.de-ask[hidden] { display: none; }
.de-ask-overlay {
    position: absolute; inset: 0; background: var(--overlay);
    opacity: 0; transition: opacity .25s ease; backdrop-filter: blur(2px);
}
.de-ask.show .de-ask-overlay { opacity: 1; }

.de-ask-panel {
    position: absolute; top: 0; right: 0; height: 100%;
    width: min(420px, 100%); display: flex; flex-direction: column;
    background: var(--surface-color); border-left: 1px solid var(--hairline-strong);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.de-ask.show .de-ask-panel { transform: none; }

.de-ask-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid var(--hairline);
}
.de-ask-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.de-ask-avatar {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center; color: #fff; font-size: 1.1rem;
    background: linear-gradient(135deg, var(--emerald), #38bdf8);
    box-shadow: 0 4px 14px rgba(16, 185, 129, .4);
}
.de-ask-title { margin: 0; font-weight: 700; color: var(--text-strong); line-height: 1.1; }
.de-ask-scope { margin: 2px 0 0; font-size: .78rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.de-ask-x {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 0; cursor: pointer;
    background: var(--hover-bg); color: var(--text-muted); display: grid; place-items: center;
    transition: background .15s ease, color .15s ease;
}
.de-ask-x:hover { background: var(--hairline-strong); color: var(--text-strong); }

.de-ask-body {
    flex: 1 1 auto; overflow-y: auto; padding: 18px;
    display: flex; flex-direction: column; gap: 14px;
}
.de-ask-msg { display: flex; gap: 9px; align-items: flex-end; max-width: 100%; }
.de-ask-msg.me { justify-content: flex-end; }
.de-ask-mini {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
    color: #fff; font-size: .8rem; background: linear-gradient(135deg, var(--emerald), #38bdf8);
}
.de-ask-bubble {
    max-width: 80%; padding: 10px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.5;
    color: var(--text-soft); background: var(--surface-deep); border: 1px solid var(--hairline);
    word-wrap: break-word; overflow-wrap: anywhere;
}
.de-ask-msg.me .de-ask-bubble {
    color: #06281a; border: 0; background: linear-gradient(135deg, #6ee7b7, #38bdf8);
    border-bottom-right-radius: 5px;
}
.de-ask-msg.zeo .de-ask-bubble { border-bottom-left-radius: 5px; }
.de-ask-bubble p { margin: 0 0 7px; }
.de-ask-bubble p:last-child { margin-bottom: 0; }
.de-ask-bubble ul { margin: 6px 0; padding-left: 18px; }
.de-ask-bubble li { margin: 3px 0; }
.de-ask-bubble strong { color: var(--text-strong); font-weight: 700; }
.de-ask-bubble code {
    font-size: .82em; padding: 1px 5px; border-radius: 5px;
    background: var(--hover-bg); border: 1px solid var(--hairline);
}

.de-ask-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.de-ask-dots i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint);
    animation: de-ask-blink 1.2s infinite ease-in-out;
}
.de-ask-dots i:nth-child(2) { animation-delay: .18s; }
.de-ask-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes de-ask-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.de-ask-suggest { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 4px; }
.de-ask-chip {
    border: 1px solid var(--hairline-strong); background: var(--surface-deep); cursor: pointer;
    color: var(--text-soft); font: inherit; font-size: .8rem; padding: 6px 11px; border-radius: 999px;
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.de-ask-chip:hover { border-color: var(--emerald); color: var(--text-strong); transform: translateY(-1px); }

.de-ask-composer {
    display: flex; align-items: flex-end; gap: 9px; padding: 14px 16px;
    border-top: 1px solid var(--hairline); background: var(--surface-color);
}
.de-ask-composer textarea {
    flex: 1 1 auto; resize: none; max-height: 120px; min-height: 40px;
    padding: 10px 13px; border-radius: 12px; font: inherit; font-size: .9rem; line-height: 1.4;
    color: var(--text-strong); background: var(--input-bg); border: 1px solid var(--input-border);
    outline: none; transition: border-color .15s ease;
}
.de-ask-composer textarea:focus { border-color: var(--emerald); }
.de-ask-composer textarea:disabled { opacity: .6; }
.de-ask-send {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; border: 0; cursor: pointer;
    color: #fff; display: grid; place-items: center; font-size: 1rem;
    background: linear-gradient(135deg, var(--emerald), #38bdf8);
    transition: transform .15s ease, opacity .15s ease;
}
.de-ask-send:hover:not(:disabled) { transform: translateY(-1px); }
.de-ask-send:disabled { opacity: .5; cursor: default; }

@media (max-width: 575.98px) {
    .de-ask-fab span { display: none; }
    .de-ask-fab { padding: 13px; }
}

/* ---------- Competitors (benchmark) ---------- */
.de-spin { display: inline-block; animation: de-spin .8s linear infinite; }

.de-cmp-bars { display: flex; flex-direction: column; gap: 12px; }
.de-cmp-bar { display: grid; grid-template-columns: 160px 1fr 44px; align-items: center; gap: 12px; }
.de-cmp-bar .nm {
    font-size: .88rem; color: var(--text-soft); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.de-cmp-bar.you .nm { color: var(--text-strong); font-weight: 600; }
.de-cmp-bar .track { height: 12px; border-radius: 999px; background: var(--hover-bg); overflow: hidden; }
.de-cmp-bar .fill {
    display: block; height: 100%; border-radius: 999px;
    background: var(--text-faint); transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
.de-cmp-bar .fill.good { background: linear-gradient(90deg, var(--emerald), #38bdf8); }
.de-cmp-bar .fill.warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.de-cmp-bar .fill.bad  { background: linear-gradient(90deg, #ef4444, #f97316); }
.de-cmp-bar .val { text-align: right; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.de-cmp-bar.you .track { box-shadow: 0 0 0 2px rgba(34, 197, 94, .25); }

.de-cmp-table th[scope="row"] { color: var(--text-soft); font-weight: 500; }
.de-cmp-table td { font-variant-numeric: tabular-nums; }
.de-cmp-table th.you, .de-cmp-table td.you {
    background: rgba(34, 197, 94, .06);
    border-left: 1px solid rgba(34, 197, 94, .2);
    border-right: 1px solid rgba(34, 197, 94, .2);
}
.de-cmp-table td.lead { color: var(--status-good-text); font-weight: 700; }
.de-cmp-table td.lead .bi { color: #fbbf24; }
.de-cmp-lead-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--status-good-text); vertical-align: middle; margin-right: 4px;
}

.de-cmp-row {
    display: flex; align-items: center; gap: 14px; padding: 12px 4px;
    border-top: 1px solid var(--hairline);
}
.de-cmp-row:first-child { border-top: 0; }
.de-cmp-row .id { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; }
.de-cmp-row .id > .bi { font-size: 1.1rem; color: var(--text-faint); }
.de-cmp-row .nm { margin: 0; font-weight: 600; color: var(--text-strong); }
.de-cmp-row .dm { margin: 0; font-size: .8rem; color: var(--text-muted); }
.de-cmp-row .st { flex: 0 0 auto; }
.de-cmp-row .ac { flex: 0 0 auto; display: flex; gap: 6px; }

@media (max-width: 575.98px) {
    .de-cmp-bar { grid-template-columns: 110px 1fr 36px; gap: 8px; }
    .de-cmp-row { flex-wrap: wrap; }
}

/* ---------- Web Vitals ---------- */
.de-seg {
    display: inline-flex; padding: 3px; border-radius: 10px;
    background: var(--hover-bg); border: 1px solid var(--hairline);
}
.de-seg button {
    border: 0; background: none; cursor: pointer; font: inherit; font-size: .85rem;
    color: var(--text-muted); padding: 6px 12px; border-radius: 7px;
    display: inline-flex; align-items: center; gap: 6px; transition: background .15s ease, color .15s ease;
}
.de-seg button.active { background: var(--surface-color); color: var(--text-strong); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.2)); }

.vit-metric {
    border: 1px solid var(--hairline-strong); border-radius: 14px; padding: 14px 16px; height: 100%;
    border-left-width: 4px;
}
.vit-metric.is-good { border-left-color: var(--status-good-text); }
.vit-metric.is-avg  { border-left-color: var(--status-warn-text); }
.vit-metric.is-poor { border-left-color: var(--status-bad-text); }
.vit-metric .k { margin: 0; font-size: .8rem; color: var(--text-muted); }
.vit-metric .v { margin: 4px 0 6px; font-size: 1.5rem; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.vit-metric .r { font-size: .76rem; font-weight: 600; }
.vit-metric.is-good .r { color: var(--status-good-text); }
.vit-metric.is-avg  .r { color: var(--status-warn-text); }
.vit-metric.is-poor .r { color: var(--status-bad-text); }

.vit-cat { text-align: center; }
.vit-cat .ring {
    position: relative; width: 92px; height: 92px; border-radius: 50%; margin: 0 auto;
    display: grid; place-items: center;
}
.vit-cat .ring::before {
    content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%; background: var(--surface-color);
}
.vit-cat .ring span { position: relative; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vit-cat .lbl { margin: 10px 0 0; font-size: .85rem; color: var(--text-soft); }

/* ---------- Internal Links ---------- */
.stat-value.good { color: var(--status-good-text); }
.stat-value.warn { color: var(--status-warn-text); }
.stat-value.bad  { color: var(--status-bad-text); }

.de-depth { display: flex; flex-direction: column; gap: 9px; }
.de-depth-row { display: grid; grid-template-columns: 84px 1fr 44px; align-items: center; gap: 12px; }
.de-depth-row .d { font-size: .85rem; color: var(--text-soft); }
.de-depth-row .track { height: 14px; border-radius: 999px; background: var(--hover-bg); overflow: hidden; }
.de-depth-row .fill {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--emerald), #38bdf8); transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
.de-depth-row .fill.deep { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.de-depth-row .c { text-align: right; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }

.de-tips { margin: 0; padding-left: 18px; color: var(--text-soft); }
.de-tips li { margin: 6px 0; line-height: 1.5; }

.de-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-strong); font: inherit; font-weight: 600; text-align: left; }
.de-linkbtn:hover { color: var(--emerald); text-decoration: underline; }

/* keyword difficulty bar */
.de-kd { display: inline-flex; align-items: center; gap: 8px; }
.de-kd .bar { width: 70px; height: 7px; border-radius: 999px; background: var(--hover-bg); overflow: hidden; }
.de-kd .bar > span { display: block; height: 100%; border-radius: 999px; }

/* GEO answer excerpts */
.geo-excerpt { padding: 10px 0; border-top: 1px solid var(--hairline); }
.geo-excerpt:first-child { border-top: 0; }

/* GEO content signals */
.geo-signal { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.geo-signal:first-child { border-top: 0; }
.geo-signal > .bi { font-size: 1.15rem; margin-top: 1px; flex: 0 0 auto; }
.geo-signal.pass > .bi { color: var(--status-good-text); }
.geo-signal.fail > .bi { color: var(--status-bad-text); }
.geo-signal .l { margin: 0; font-weight: 600; color: var(--text-strong); }
.geo-signal .d { margin: 2px 0 0; font-size: .85rem; color: var(--text-muted); }

/* GEO prompt ideas */
.geo-idea { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hairline); }
.geo-idea:first-child { border-top: 0; }
.geo-idea > span { color: var(--text-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* API key reveal box */
.de-newkey { padding: 14px 16px; border-radius: 12px; background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .3); }
.de-newkey code { font-size: .85rem; }

/* Usage / quota meters */
.de-usage-row + .de-usage-row { margin-top: 16px; }
.de-usage-row .de-bar > span.over { background: var(--status-bad-text); }
.de-usage-row .lim.over { color: var(--status-bad-text); font-weight: 600; }

/* Workspace activity feed */
.de-actfeed { list-style: none; margin: 0; padding: 0; }
.de-actfeed li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.de-actfeed li:first-child { border-top: 0; }
.de-actfeed .when { flex: 0 0 auto; font-size: .78rem; color: var(--text-faint); min-width: 120px; }
.de-actfeed .what { flex: 1 1 auto; color: var(--text-soft); }
.de-actfeed .who { flex: 0 0 auto; font-size: .78rem; color: var(--text-faint); }

/* Webhook endpoints */
.de-wh { border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.de-wh:last-child { margin-bottom: 0; }
.de-wh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.de-wh-url { min-width: 0; overflow: hidden; }
.de-wh-url code { word-break: break-all; }
.de-wh-desc { color: var(--text-faint); font-size: .82rem; margin-left: 8px; }
.de-wh-badges { flex: 0 0 auto; white-space: nowrap; }
.de-wh-events { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.de-wh-secret { margin-top: 8px; font-size: .82rem; color: var(--text-muted); }
.de-wh-secret code { font-size: .8rem; }
.de-wh-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.de-wh-deliveries { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 10px; }
.de-wh-del { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: .82rem; color: var(--text-soft); }
.de-wh-del .dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
.de-wh-del .dot.good { background: var(--status-good-text); }
.de-wh-del .dot.bad { background: var(--status-bad-text); }
.de-wh-del .ev { flex: 1 1 auto; font-weight: 600; color: var(--text-strong); }
.de-wh-del .st, .de-wh-del .ms { font-variant-numeric: tabular-nums; }
.de-wh-del .tm { color: var(--text-faint); min-width: 120px; text-align: right; }

/* ---------- Scrollbars (modern, theme-aware) ---------- */
html[data-theme="dark"]  { --scroll-thumb: rgba(255, 255, 255, .16); --scroll-thumb-hover: rgba(255, 255, 255, .32); }
html[data-theme="light"] { --scroll-thumb: rgba(14, 31, 20, .20);    --scroll-thumb-hover: rgba(14, 31, 20, .36); }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }

/* Chromium / Safari - slim, rounded, floating thumb on a transparent track */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--emerald), #38bdf8);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, var(--emerald), #38bdf8);
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* slimmer rails inside compact panels */
.de-combo-list::-webkit-scrollbar,
.de-code::-webkit-scrollbar { width: 8px; height: 8px; }
.de-combo-list::-webkit-scrollbar-thumb,
.de-code::-webkit-scrollbar-thumb { border-width: 2px; }

/* ---------- Sidebar nav scrollbar (de-nav-scroll.js) ---------- */
/* The native scrollbar is taken off entirely and a thumb of our own is drawn over the
   nav's inner edge. Styling the native one only ever got so far: its rail is part of
   the layout box, so it either eats width from the links or sits in a reserved gutter,
   and the parts of it a browser lets you restyle stop well short of matching anything
   else here. An overlay thumb owes nothing to the layout and is drawn like the rest of
   the design system.

   Note this targets .de-nav, not .de-sidebar: the sidebar is overflow:visible so the
   website dropdown can escape it, and the nav is the element that actually scrolls. */
.de-nav {
    scrollbar-width: none;                        /* Firefox */
    overscroll-behavior: contain;                 /* reaching the end must not scroll the page */
}

.de-nav::-webkit-scrollbar { width: 0; height: 0; }   /* Chromium, Safari */

.de-nav-rail {
    position: absolute;
    inset-inline-end: 5px;
    width: 6px;
    z-index: 2;
    pointer-events: none;                          /* the links underneath stay clickable */
    opacity: 0;
    transition: opacity .22s ease;
}

/* Shown while the nav is being used and for a moment afterwards, so it answers "how far
   down am I" exactly when that is being asked and stays out of the way otherwise. */
.de-nav-rail.visible { opacity: 1; }
.de-nav-rail.dragging { opacity: 1; }

.de-nav-thumb {
    position: absolute;
    inset-inline: 0;
    top: 0;
    border-radius: 999px;
    background: var(--scroll-thumb);
    pointer-events: auto;                          /* but the thumb itself is grabbable */
    cursor: grab;
    transition: background .2s ease, width .2s ease;
    will-change: transform;
}

.de-nav-thumb:hover { background: var(--scroll-thumb-hover); }

.de-nav-rail.dragging .de-nav-thumb {
    background: var(--emerald);
    cursor: grabbing;
}

/* The icon rail has no room for a 6px bar beside 38px icons, and nothing to measure
   against once the labels are gone. */
html[data-sidebar="collapsed"] .de-nav-rail { display: none; }

@media (prefers-reduced-motion: reduce) {
    .de-nav-rail { transition: none; }
    .de-nav-thumb { transition: none; }
}

/* ---------- Scroll-reveal (cards rise + fade as they enter view) ---------- */
/* Pure CSS scroll-driven animation: no flash, no JS, router-safe. It animates
   the `translate` property (not `transform`) so card hover-lifts still work, and
   only runs where supported and motion is allowed. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .de-content .de-card {
            animation: de-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
            will-change: opacity, translate;
        }
        @keyframes de-rise {
            from { opacity: 0; translate: 0 26px; }
            to   { opacity: 1; translate: 0 0; }
        }
    }
}

/* Tabs */
.de-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--hairline-strong);
    margin-bottom: 18px;
    overflow-x: auto;
}

.de-tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--nav-font);
    font-size: .9rem;
    font-weight: 600;
    padding: 10px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}

.de-tab:hover { color: var(--text-strong); }
.de-tab.active { color: var(--emerald); border-bottom-color: var(--emerald); }

/* Skeleton loaders */
.de-skeleton {
    display: inline-block;
    border-radius: 8px;
    background: linear-gradient(100deg, var(--skeleton-a) 40%, var(--skeleton-b) 50%, var(--skeleton-a) 60%);
    background-size: 200% 100%;
    animation: de-shimmer 1.4s infinite linear;
    min-height: 1em;
}

@keyframes de-shimmer {
    to { background-position: -200% 0; }
}

/* Spinner */
.de-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--hover-bg);
    border-top-color: var(--emerald);
    border-radius: 50%;
    animation: de-spin .8s linear infinite;
    display: inline-block;
}

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

/* Empty states */
.de-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.de-empty i { font-size: 2.4rem; color: var(--text-faint); display: block; margin-bottom: 12px; }
.de-empty .head { font-family: var(--nav-font); font-weight: 600; color: var(--text-strong); font-size: 1rem; margin-bottom: 4px; }
.de-empty p { font-size: .87rem; margin: 0 0 18px; }

/* Toasts */
.de-toasts {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 36px));
}

.de-toast {
    background: var(--surface-color);
    border: 1px solid var(--hairline-strong);
    border-left: 3px solid var(--emerald);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 13px 16px;
    font-family: var(--nav-font);
    font-size: .87rem;
    color: var(--text-soft);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: de-toast-in .25s ease;
}

.de-toast.error { border-left-color: var(--status-bad); }
.de-toast.success { border-left-color: var(--status-good); }
.de-toast i { color: var(--emerald); }
.de-toast.error i { color: var(--status-bad-text); }

@keyframes de-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* Modals (Bootstrap, themed) */
.modal-content {
    background: var(--surface-color);
    border: 1px solid var(--hairline-strong);
    border-radius: 16px;
    color: var(--default-color);
}

.modal-header { border-bottom: 1px solid var(--hairline); }
.modal-footer { border-top: 1px solid var(--hairline); }
.modal-title { font-family: var(--nav-font); font-size: 1.02rem; font-weight: 600; color: var(--text-strong); }
.modal-backdrop { --bs-backdrop-bg: var(--overlay); }

.modal .btn-close {
    filter: none;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

/* ---------- Auth pages ---------- */

.de-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1100px 500px at 80% -10%, rgba(64, 182, 5, .07), transparent 60%),
        var(--background-color);
}

.de-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface-color);
    border: 1px solid var(--hairline-strong);
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: var(--glow);
}

.de-auth-card .brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 8px;
}

.de-auth-card h1 {
    font-size: 1.3rem;
    text-align: center;
    margin: 14px 0 4px;
}

.de-auth-card .sub { text-align: center; font-size: .87rem; color: var(--text-muted); margin: 0 0 24px; }
.de-auth-card .alt { text-align: center; font-size: .85rem; color: var(--text-muted); margin-top: 20px; }

.de-auth-theme { position: fixed; top: 16px; right: 16px; }

/* Password wrapper */
.de-pass { position: relative; }
.de-pass .de-input { padding-right: 44px; }
.de-pass .toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--text-faint);
    font-size: 1rem;
    padding: 8px;
    cursor: pointer;
}
.de-pass .toggle:hover { color: var(--emerald); }

/* ---------- Coming soon ---------- */

.de-soon {
    max-width: 520px;
    margin: 8vh auto 0;
    text-align: center;
}

.de-soon .tile {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    margin: 0 auto 22px;
    background: rgba(34, 197, 94, .12);
    color: var(--emerald);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.de-soon h2 { font-size: 1.45rem; margin-bottom: 10px; }
.de-soon p { color: var(--text-muted); font-size: .92rem; }

/* ---------- Back to top (rocket + scroll progress ring) ---------- */

.de-totop {
    position: fixed;
    right: 24px;
    bottom: 84px; /* stacked above the AI assistant launcher */
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--surface-color);
    border: 0;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}

.de-totop.show { opacity: 1; transform: none; pointer-events: auto; }

.de-totop svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.de-totop svg circle {
    fill: none;
    stroke-width: 3;
}

.de-totop svg .track { stroke: var(--hover-bg); }

.de-totop svg .bar {
    stroke: var(--emerald);
    stroke-linecap: round;
    stroke-dasharray: 150.8; /* 2 * pi * r(24) */
    stroke-dashoffset: 150.8;
    transition: stroke-dashoffset .15s linear;
}

.de-totop i {
    color: var(--emerald);
    font-size: 1.25rem;
    transition: transform .25s ease;
}

.de-totop:hover i { transform: translateY(-3px); }

/* SEO joke included: rankings only go up from here. */
.de-totop.launch i { animation: de-launch .65s ease-in forwards; }

@keyframes de-launch {
    0%   { transform: none; opacity: 1; }
    55%  { transform: translateY(-30px) scale(.85); opacity: 0; }
    56%  { transform: translateY(26px) scale(.85); opacity: 0; }
    100% { transform: none; opacity: 1; }
}

/* ---------- Micro-interactions ---------- */

/* Content blocks rise in as a page opens (staggered) */
.de-content > * { animation: de-rise .38s ease backwards; }
.de-content > *:nth-child(2) { animation-delay: .05s; }
.de-content > *:nth-child(3) { animation-delay: .1s; }
.de-content > *:nth-child(4) { animation-delay: .15s; }
.de-content > *:nth-child(5) { animation-delay: .2s; }
.de-content > *:nth-child(n+6) { animation-delay: .25s; }

@keyframes de-rise {
    from { opacity: 0; transform: translateY(10px); }
}

/* Score rings sweep to their value instead of snapping */
.de-ring svg circle + circle {
    transition: stroke-dashoffset .9s cubic-bezier(.22, .8, .35, 1), stroke .4s;
}

/* Buttons press down satisfyingly */
.btn-brand:active:not(:disabled),
.btn-ghost:active:not(:disabled),
.btn-danger-ghost:active,
.de-icon-btn:active,
.de-back:active,
.de-totop:active { transform: scale(.94) !important; }

/* Sidebar icons lean into a hover */
.de-nav a i { transition: color .2s, transform .2s; }
.de-nav a:hover i { transform: translateX(2px) scale(1.06); }

/* Stat tiles lift slightly */
.de-stat { transition: transform .25s ease, border-color .25s; }
.de-stat:hover { transform: translateY(-3px); }

/* ---------- Responsive ---------- */

.de-menu-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--text-strong);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px;
}

@media (max-width: 991px) {
    /* The sidebar is an overlay drawer on mobile; collapsing does not apply. */
    html[data-sidebar="collapsed"] { --sidebar-width: 256px; }
    html[data-sidebar="collapsed"] .de-brand .wordmark,
    html[data-sidebar="collapsed"] .de-nav .nav-label,
    html[data-sidebar="collapsed"] .de-nav a .txt,
    html[data-sidebar="collapsed"] .de-side-site .lbl,
    html[data-sidebar="collapsed"] .de-sidebar-foot,
    html[data-sidebar="collapsed"] .de-combo-btn .txt,
    html[data-sidebar="collapsed"] .de-combo-btn .bi-chevron-down { display: revert; }
    html[data-sidebar="collapsed"] .de-nav a { justify-content: flex-start; padding: 10px 12px; }
    html[data-sidebar="collapsed"] .de-combo-btn { justify-content: flex-start; padding: 8px 12px; }
    html[data-sidebar="collapsed"] .de-brand { justify-content: flex-start; padding: 4px 10px 18px; }
    .de-collapse-btn { display: none; }

    .de-sidebar { transform: translateX(-100%); transition: transform .3s ease; }
    .de-sidebar.open { transform: translateX(0); }
    /* Drawer slides in from the inline-start edge (right in Arabic). */
    html[dir="rtl"] .de-sidebar { transform: translateX(100%); }
    html[dir="rtl"] .de-sidebar.open { transform: translateX(0); }
    .de-main { margin-inline-start: 0; }
    .de-menu-toggle { display: block; }
    .de-search { display: none; }
    .de-content { padding: 20px 14px; }
    .de-topbar { padding: 0 14px; gap: 10px; }
    .de-user .name { display: none; }
    .de-ctx-select { max-width: 110px; }
}

@media (max-width: 575px) {
    /* Phones: a two-row topbar. Row 1 = menu toggle + the action icons; row 2 =
       back button + page title on their own line, so the title has full width
       and is never squeezed. No breadcrumb trail (it needs more room than we
       have). */
    .de-topbar {
        flex-wrap: wrap;
        height: auto;
        row-gap: 8px;
        padding: 10px 14px;
        align-items: center;
    }
    .de-menu-toggle { order: 1; }
    .de-topbar-actions { order: 2; }      /* margin-left:auto keeps it right */
    .de-titlebar {
        order: 3;
        flex: 1 1 100%;                   /* full width -> drops to its own row */
        gap: 12px;
    }

    .de-path .seg, .de-path .sep { display: none; }   /* no breadcrumb trail */
    .de-path { flex: 1 1 auto; min-width: 0; }
    .de-page-title { overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 575px) {
    .de-card { padding: 18px; }
    .de-page-title { font-size: 1rem; }
    .btn-brand, .btn-ghost { padding: 9px 16px; font-size: .85rem; }
    .de-auth-card { padding: 28px 20px; }
    /* The workspace switcher pill is too wide for a phone topbar; it stays on
       tablet/desktop and is surfaced instead inside the sidebar drawer
       (.de-side-ws), which shows on phones. */
    .de-topbar-actions .de-ws-wrap { display: none; }
    .de-topbar-actions { gap: 4px; }

    /* The notification panel anchors to the bell with right:0, which pushes it
       off the left edge on a narrow phone. Pin it to the viewport instead. We
       size with 100vw (the real viewport width) rather than left+right, because
       any residual horizontal overflow inflates the fixed-position containing
       block (window.innerWidth) and would otherwise stretch the panel wider
       than the screen. */
    .de-notify-panel {
        position: fixed;
        top: 108px;   /* clears the two-row mobile topbar (~103px) */
        left: 10px;
        right: auto;
        width: calc(100vw - 20px);
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ============================ First-run onboarding ============================ */
.de-ob {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--background-color);
}
.de-ob-card {
    width: 100%;
    max-width: 600px;
    background: var(--surface-color);
    border: 1px solid var(--hairline-strong);
    border-radius: 20px;
    padding: 30px 34px;
    box-shadow: var(--shadow-lg);
}
.de-ob-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.de-ob-brand { font-weight: 700; font-size: 20px; color: var(--text-strong); letter-spacing: -.3px; }
.de-ob-brand span { color: var(--emerald); }
.de-ob-help { font-size: .82rem; color: var(--text-faint); }
.de-ob-headright { display: flex; align-items: center; gap: 10px; }
.de-ob-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--input-border); background: transparent; color: var(--text-soft);
    border-radius: 9px; cursor: pointer; font-size: .95rem; transition: all .15s ease;
}
.de-ob-icon:hover { color: var(--text-strong); border-color: var(--emerald); }
@media (max-width: 575px) { .de-ob-headright .de-ob-help { display: none; } }
.de-ob-progress { height: 5px; background: var(--hairline); border-radius: 3px; overflow: hidden; margin-bottom: 26px; }
.de-ob-progress span { display: block; height: 100%; background: var(--emerald); border-radius: 3px; transition: width .3s ease; }
.de-ob-body { min-height: 290px; }
.de-ob-step h1 { font-size: 1.5rem; margin: 0 0 8px; color: var(--text-strong); }
.de-ob-sub { color: var(--text-muted); margin: 0 0 22px; font-size: .95rem; line-height: 1.55; }
.de-ob-hint { font-size: .8rem; color: var(--status-bad-text); margin: 6px 0 0; }
.de-ob-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .95rem; color: var(--default-color); }
.de-ob-done { width: 64px; height: 64px; border-radius: 50%; background: rgba(34,197,94,.14); color: var(--emerald); display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 16px; }
.de-ob-step[data-step="4"] { text-align: center; }
.de-ob-foot { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.de-ob-stepno { font-size: .82rem; color: var(--text-faint); }
.de-ob-foot .btn-brand { margin-left: auto; }

.de-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; padding: 8px 10px; min-height: 46px; }
.de-tags input { flex: 1; min-width: 150px; background: transparent; border: 0; outline: none; color: var(--default-color); font-size: .9rem; padding: 4px; }
.de-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(34,197,94,.12); color: var(--emerald); border-radius: 7px; padding: 4px 4px 4px 9px; font-size: .82rem; }
.de-tag button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 4px; }

/* Segmented domain input: https:// | www | host */
.de-domain {
    display: flex; align-items: stretch;
    background: var(--input-bg); border: 1px solid var(--input-border);
    border-radius: 12px; overflow: hidden;
}
.de-domain:focus-within { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(34, 197, 94, .15); }
.de-domain-scheme {
    display: flex; align-items: center; padding: 0 12px;
    font-family: var(--nav-font); font-size: .88rem; color: var(--text-faint);
    background: var(--input-border); white-space: nowrap; user-select: none;
}
.de-domain input { border: 0; outline: none; background: transparent; color: var(--text-strong); font-family: var(--nav-font); padding: 12px 0; }
.de-domain .de-domain-www { width: 60px; text-align: center; padding: 12px 6px; color: var(--text-soft); }
.de-domain .de-domain-sep { display: flex; align-items: center; color: var(--text-faint); padding: 0 1px; }
.de-domain .de-domain-host { flex: 1; min-width: 0; padding-left: 6px; padding-right: 12px; }
.de-domain input::placeholder { color: var(--placeholder); }
/* "No subdomain" hides the editable www segment and uses the apex domain. */
.de-domain.no-sub .de-domain-www, .de-domain.no-sub .de-domain-sep { display: none; }
.de-domain.no-sub .de-domain-host { padding-left: 12px; }
.de-domain-opt { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .82rem; color: var(--text-soft); cursor: pointer; }
.de-domain-opt input { accent-color: var(--emerald); }

/* AI suggestion chips (competitors / keywords) */
.de-suggest { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .82rem; color: var(--text-faint); }
.de-suggest-lbl { color: var(--text-faint); margin-right: 2px; }
.de-suggest-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .8rem; font-family: var(--nav-font);
    border: 1px dashed var(--input-border); background: transparent; color: var(--text-soft);
    border-radius: 999px; padding: 3px 11px; cursor: pointer; transition: all .15s ease;
}
.de-suggest-chip:hover { border-color: var(--emerald); color: var(--emerald); border-style: solid; }
.de-suggest-chip.added { opacity: .45; cursor: default; }
.de-suggest-chip i { font-size: .72rem; }
.de-suggest-note { color: var(--emerald); }

@media (max-width: 575px) {
    .de-ob-card { padding: 22px 18px; }
    .de-ob-step h1 { font-size: 1.25rem; }
}

/* ============================ Verify-email banner ============================ */
.de-verify-banner {
    position: relative;
    z-index: 940;
    background: #f59e0b;            /* solid amber - pops on both light and dark backgrounds */
    color: #3a2600;                /* dark brown - high contrast on amber, readable in both themes */
    border-bottom: 1px solid rgba(0, 0, 0, .18);
    padding: 9px 16px;
    font-size: .85rem;
    font-weight: 500;
    text-align: center;
}
.de-verify-banner a { color: #1f1400; font-weight: 700; text-decoration: underline; cursor: pointer; }
.de-verify-banner .x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }

/* ============================ Product tour (coachmarks) ============================ */
.de-tour-backdrop { position: fixed; inset: 0; background: transparent; z-index: 4000; }
.de-tour-spot { position: fixed; z-index: 4001; border-radius: 12px; box-shadow: 0 0 0 4px rgba(34,197,94,.6), 0 0 0 9999px rgba(2,6,12,.62); transition: all .25s ease; pointer-events: none; }
.de-tour-pop { position: fixed; z-index: 4002; width: 300px; max-width: calc(100vw - 32px); background: var(--surface-color); border: 1px solid var(--hairline-strong); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-lg); }
.de-tour-pop h4 { margin: 0 0 6px; font-size: 1rem; color: var(--text-strong); }
.de-tour-pop p { margin: 0 0 14px; font-size: .87rem; line-height: 1.5; color: var(--text-muted); }
.de-tour-pop .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.de-tour-step { font-size: .78rem; color: var(--text-faint); }
.de-tour-actions { display: flex; gap: 8px; }
.de-tour-skip { background: none; border: 0; color: var(--text-faint); font-size: .82rem; cursor: pointer; }
.de-tour-skip:hover { color: var(--text-muted); text-decoration: underline; }

/* ============================ i18n / RTL ============================ */
/* Sidebar docking uses logical inset-inline-start (see .de-sidebar).
   Mobile drawer slide transforms live inside the max-width:991px block. */
html[dir="rtl"] .bi-chevron-double-left,
html[dir="rtl"] .bi-arrow-left { transform: scaleX(-1); }
.de-lang-select { max-width: 4.5rem; font-size: .8rem; }
.lang-select { background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 4px 8px; font-size: .8rem; }

/* ==================== topbar notifications + quick search ==================== */
/* Drives the bell dropdown and quick-search markup in Views/Shared/_Layout.cshtml.
   Kept here (not injected from JS) so both themes and the design tokens apply. */
[data-notif-toggle] { position: relative; }
.de-notif-dot { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--status-bad-text); color: #fff; font-size: .62rem; font-weight: 700;
  line-height: 17px; text-align: center; pointer-events: none; }
.de-notif-menu { width: min(360px, calc(100vw - 28px)); padding: 0; overflow: hidden; }
.de-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; font-weight: 600; font-size: .9rem; color: var(--text-strong);
  border-bottom: 1px solid var(--hairline); }
.de-notif-list { max-height: 60vh; overflow-y: auto; }
.de-notif-item { display: flex; gap: 12px; padding: 12px 16px; text-decoration: none;
  border-bottom: 1px solid var(--hairline); transition: background .15s; }
.de-notif-item:last-child { border-bottom: 0; }
.de-notif-item:hover { background: var(--hover-bg); }
.de-notif-item > .bi { color: var(--emerald); margin-top: 2px; }
.de-notif-item.unread { background: rgba(34, 197, 94, .06); }
.de-notif-item.unread > .bi { color: var(--status-info-text); }
.de-notif-item .body { display: block; min-width: 0; }
.de-notif-item .t { display: block; font-weight: 500; color: var(--text-strong); font-size: .85rem; }
.de-notif-item .d { display: block; font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.de-notif-item .tm { display: block; font-size: .72rem; color: var(--text-faint); margin-top: 3px; }
.de-notif-empty, .de-notif-loading { padding: 28px 16px; text-align: center; color: var(--text-faint);
  font-size: .85rem; }
.de-notif-empty .bi { display: block; font-size: 1.5rem; color: var(--emerald); margin-bottom: 8px; }
.de-notif-empty p { margin: 0; }
.de-link-btn { background: none; border: 0; padding: 0; color: var(--link-color); font-size: .8rem;
  font-weight: 600; cursor: pointer; }
.de-link-btn:hover { color: var(--link-hover); text-decoration: underline; }

.de-quicksearch { position: relative; display: flex; align-items: center; }
.de-quicksearch > .bi-search { position: absolute; left: 10px; font-size: .85rem; color: var(--text-faint);
  pointer-events: none; }
.de-quicksearch .de-input { padding-left: 30px; width: min(260px, 34vw); height: 34px; font-size: .84rem; }

/* The results panel shares the combobox visual language (see the section below):
   same surface, radius, shadow, row treatment and open transition. quick-search.js
   only fills it with .de-qs-group / .de-qs-item / .de-qs-note markup. */
.de-quicksearch-results { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1050;
  width: min(380px, calc(100vw - 28px)); max-height: 60vh; overflow-y: auto; padding: 6px;
  background: var(--surface-color); border: 1px solid var(--hairline-strong); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25); animation: de-cbx-in .12s ease; }
.de-quicksearch-results[hidden] { display: none; }
.de-qs-group { padding: 8px 10px 4px; font-family: var(--nav-font); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.de-qs-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  color: var(--text-soft); text-decoration: none; }
.de-qs-item:hover { background: var(--hover-bg); color: var(--text-strong); }
.de-qs-item.active { background: var(--hover-bg); color: var(--text-strong);
  box-shadow: inset 2px 0 0 var(--emerald); }
.de-qs-item > i { color: var(--emerald); font-size: .95rem; flex-shrink: 0; }
.de-qs-item .bd { display: flex; flex-direction: column; min-width: 0; }
.de-qs-item .nm { font-size: .87rem; font-weight: 600; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-qs-item .sb { font-size: .78rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-qs-note { padding: 14px 12px; font-size: .84rem; color: var(--text-muted); }
@media (max-width: 767px) { .de-quicksearch { display: none; } }

/* ============================ Searchable combobox (DE.combobox) ============================ */
/* wwwroot/js/de-combobox.js wraps a .de-input in .de-cbx and renders the panel below.
   Tokens only, so both themes work; the topbar quick-search panel above reuses the same
   language (and the de-cbx-in keyframes defined here). */

.de-cbx { position: relative; display: block; }
.de-cbx > .de-input { width: 100%; padding-right: 40px; }
/* Only when the clear button is actually offered; a box with allowClear:false would
   otherwise hold 28px open for a control that never shows. */
.de-cbx.clearable > .de-input { padding-right: 68px; }

/* Chevron affordance + inline clear button, both inside the input's right edge. */
.de-cbx-toggle, .de-cbx-clear {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
  background: none; color: var(--text-faint); cursor: pointer; font-size: .72rem;
  transition: color .15s, background .15s;
}
.de-cbx-toggle { right: 8px; }
.de-cbx-clear { right: 36px; }
.de-cbx-toggle:hover, .de-cbx-clear:hover { color: var(--text-strong); background: var(--hover-bg); }
.de-cbx-toggle .bi { transition: transform .15s ease; }
.de-cbx[aria-expanded="true"] .de-cbx-toggle .bi { transform: rotate(180deg); }
.de-cbx > .de-input:disabled ~ .de-cbx-toggle,
.de-cbx > .de-input:disabled ~ .de-cbx-clear { opacity: .4; pointer-events: none; }

/* While an async lookup runs, a small spinner replaces the chevron. */
.de-cbx-spin { display: none; position: absolute; right: 13px; top: 50%; margin-top: -8px;
  width: 16px; height: 16px; border-width: 2px; }
.de-cbx.loading .de-cbx-spin { display: block; }
.de-cbx.loading .de-cbx-toggle { visibility: hidden; }

.de-cbx-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1200;
  min-width: 100%; max-height: 320px; overflow-y: auto; padding: 6px;
  background: var(--surface-color);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
  animation: de-cbx-in .12s ease;
}
.de-cbx-panel[hidden] { display: none; }
.de-cbx-panel.up { top: auto; bottom: calc(100% + 6px); animation-name: de-cbx-in-up; }

@keyframes de-cbx-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes de-cbx-in-up { from { opacity: 0; transform: translateY(-4px); } }

.de-cbx-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 8px; background: none;
  text-align: left; cursor: pointer; color: var(--text-soft);
  font-family: var(--nav-font); font-size: .87rem;
}
.de-cbx-item:hover { background: var(--hover-bg); }
.de-cbx-item.active { background: var(--hover-bg); box-shadow: inset 2px 0 0 var(--emerald); }
.de-cbx-item > .bi { color: var(--emerald); font-size: .95rem; flex-shrink: 0; }
.de-cbx-item .bd { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.de-cbx-item .lb { font-weight: 600; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-cbx-item .sb { font-size: .78rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-cbx-check { color: var(--emerald); font-size: .9rem; flex-shrink: 0; }

.de-cbx-note, .de-cbx-error { padding: 14px 12px; font-size: .84rem;
  color: var(--text-muted); text-align: center; }
.de-cbx-error { color: var(--status-bad-text); }
.de-cbx-error .bi { margin-right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .de-cbx-panel, .de-quicksearch-results { animation: none; }
  .de-cbx-toggle .bi { transition: none; }
}

/* ==================== authentication gate ==================== */
/* de-auth-gate.js (synchronous, in <head>) adds .de-gated to <html> when it cannot
   yet prove there is a session. Hiding the shell here rather than in JS means the
   rule is in force from the first paint, so a signed-out visitor never sees the
   sidebar and menus of an app they are about to be redirected out of.
   visibility rather than display: the layout is still computed, so revealing costs
   no reflow and nothing jumps. */
html.de-gated .de-app,
html.de-gated .de-toasts { visibility: hidden; }

/* Without scripting the gate cannot run at all, so never leave the page blank. */
html.de-gated noscript { visibility: visible; }

/* ---------- Router (de-router.js) ---------- */
/* A navigation that swaps the content in place still has to say that something is
   happening, and it has to keep saying it until the new page has its data - the swap
   itself only puts empty markup on screen. The bar waits a moment before appearing, so
   a prefetched page with warm data beats the timer and never flashes one. */
.de-route-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(34, 197, 94, .35) 22%,
        var(--emerald) 48%,
        #38bdf8 62%,
        rgba(56, 189, 248, .35) 78%,
        transparent 100%);
    background-size: 45% 100%;
    background-repeat: no-repeat;
    background-position: -45% 0;
}

.de-route-progress.active {
    opacity: 1;
    animation: de-route-sweep 1.15s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes de-route-sweep {
    0%   { background-position: -45% 0; }
    100% { background-position: 145% 0; }
}

/* The new page rises the last few pixels into place rather than appearing hard. Short,
   and opacity plus transform only, so it composites on the GPU and never delays the
   page it is introducing. The rise is small on purpose: anything larger reads as the
   page moving, which makes a navigation feel slower than the reload it replaced. */
/* backwards, not both: the end state is the element's ordinary style, so an animation
   that is cancelled or never gets to run - a tab hidden mid-navigation, a browser that
   stalls the timeline - leaves the page visible rather than stuck at opacity 0. */
.de-content.de-enter { animation: de-enter .24s cubic-bezier(.22, .61, .36, 1) backwards; }

@keyframes de-enter {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: none; }
}

/* The router focuses the content region after a swap so reading order starts at the
   new page; that focus is programmatic and should not draw a ring. */
.de-content:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    .de-route-progress { transition: none; }
    .de-route-progress.active { animation: none; background-position: 0 0; background-size: 100% 100%; }
    .de-content.de-enter { animation: none; }
}

/* ---------- Confirmation dialog (de-confirm.js) ---------- */
/* A native <dialog>, not a Bootstrap modal: it asks one question and offers two answers,
   so it carries no modal header or close row, and it must never be able to strand its
   caller waiting on an animation. */
dialog.de-confirm {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: min(420px, calc(100vw - 32px));
    color: var(--default-color);
}

dialog.de-confirm::backdrop {
    background: var(--overlay, rgba(0, 0, 0, .55));
    backdrop-filter: blur(2px);
}

.de-confirm-card {
    padding: 22px;
    background: var(--surface-color);
    border: 1px solid var(--hairline-strong);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: no-preference) {
    dialog.de-confirm[open] { animation: de-confirm-in .16s ease-out; }
}

@keyframes de-confirm-in {
    from { opacity: 0; transform: translate3d(0, 6px, 0) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.de-confirm-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.de-confirm-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: rgba(34, 197, 94, .12);
    color: var(--emerald);
}

.de-confirm-card.danger .de-confirm-icon { background: rgba(239, 68, 68, .12); color: var(--status-bad-text); }

.de-confirm-title {
    margin: 0;
    font-family: var(--nav-font);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-strong);
}

.de-confirm-body {
    color: var(--text-soft);
    font-size: .9rem;
    line-height: 1.55;
    margin-bottom: 20px;
}

.de-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* The confirm button keeps .btn-brand's lift off, so the pair sits still while being read. */
.de-confirm-actions .btn-brand:hover:not(:disabled) { transform: none; }