/* ==========================================================================
   AMPED ELECTRICAL | ADMIN & AUTH (public/css/admin.css)
   Loaded only by layouts/admin.blade.php.
   Everything is namespaced .aa- so it cannot collide with the front end.
   ========================================================================== */

:root {
    --aa-navy: #0f172a;
    --aa-navy-deep: #020617;
    --aa-ink: #1e293b;
    --aa-slate: #64748b;
    --aa-sand: #f1f5f9;
    --aa-sand-deep: #e2e8f0;
    --aa-line: #e2e8f0;
    --aa-white: #ffffff;
    --aa-accent: #2563eb;
    --aa-accent-deep: #1d4ed8;

    --aa-good: #15803d;
    --aa-good-bg: #f0fdf4;
    --aa-good-line: #bbf7d0;
    --aa-bad: #b91c1c;
    --aa-bad-bg: #fef2f2;
    --aa-bad-line: #fecaca;

    --aa-font:
        ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --aa-font-head: var(--aa-font);
    --aa-font-logo: "Gugi", var(--aa-font);

    --aa-r: 10px;
    --aa-r-sm: 6px;
    --aa-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 30px rgba(15, 23, 42, 0.06);
    --aa-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.16);
    --aa-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   0. Base reset (admin.css is standalone, the site style.css is not loaded)
   -------------------------------------------------------------------------- */

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

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

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

ul,
ol {
    list-style: none;
}

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

body.aa-body {
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   1. Admin shell  (standalone: no site header or footer)
   Navy sidebar on the left, light slate canvas on the right.
   -------------------------------------------------------------------------- */

.aa-body {
    --aa-canvas: #f1f5f9;
    --aa-card-head: #f8fafc;
    --aa-side-w: 272px;
    --aa-top-h: 72px;
    margin: 0;
    min-height: 100vh;
    background: var(--aa-canvas);
    color: var(--aa-ink);
    font-family: var(--aa-font);
    line-height: 1.55;
    /* clip (not hidden) so the body doesn't become a scroll container,
       which is what stopped the sidebar and top bar from sticking */
    overflow-x: clip;
}

html:has(.aa-body) {
    overflow-x: clip;
}

.aa-shell {
    min-height: 100vh;
    padding-left: var(--aa-side-w);
}

/* Sidebar: fixed to the viewport, always full height */
.aa-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--aa-side-w);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(
            120% 45% at 0% 100%,
            rgba(37, 99, 235, 0.16),
            transparent 70%
        ),
        linear-gradient(180deg, var(--aa-navy) 0%, var(--aa-navy-deep) 100%);
    color: #fff;
    overflow-y: auto;
    z-index: 40;
}

.aa-side__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 30px 26px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.aa-side__brand {
    display: block;
    width: 128px;
}

.aa-side__brand img {
    width: 100%;
    height: auto;
}

.aa-side__tag {
    padding: 4px 9px;
    border: 1px solid rgba(37, 99, 235, 0.55);
    border-radius: 20px;
    font-size: 0.56rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-accent);
}

.aa-side__close {
    display: none;
    margin-left: auto;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--aa-r-sm);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.aa-side__nav {
    flex: 1 1 auto;
    padding: 18px 16px;
}

.aa-side__nav ul {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.aa-side__label {
    padding: 14px 12px 8px;
    margin: 0;
    font-size: 0.58rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.38);
}

.aa-side__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 11px 12px;
    margin-bottom: 2px;
    border-radius: var(--aa-r-sm);
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.7);
    transition:
        background 0.25s var(--aa-ease),
        color 0.25s var(--aa-ease);
}

.aa-side__link i {
    font-size: 1.15rem;
    opacity: 0.85;
}

.aa-side__link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.aa-side__link.is-active {
    color: #fff;
    background: rgba(37, 99, 235, 0.16);
}

.aa-side__link.is-active::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--aa-accent);
}

.aa-side__link.is-active i {
    color: var(--aa-accent);
    opacity: 1;
}

.aa-side__ext {
    margin-left: auto;
    font-size: 0.9rem !important;
    opacity: 0.45 !important;
}

.aa-side__foot {
    padding: 18px 20px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.aa-side__user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 14px;
    min-width: 0;
}

.aa-side__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--aa-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

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

.aa-side__who strong {
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aa-side__who small {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aa-side__signout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--aa-r-sm);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-family: inherit;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.25s var(--aa-ease),
        color 0.25s var(--aa-ease),
        border-color 0.25s var(--aa-ease);
}

.aa-side__signout:hover {
    background: #fff;
    border-color: #fff;
    color: var(--aa-navy);
}

/* Main column */
.aa-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

.aa-top {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--aa-top-h);
    padding: 0 clamp(20px, 3.4vw, 44px);
    background: rgba(241, 245, 249, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid var(--aa-line);
}

.aa-top__menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r-sm);
    background: #fff;
    color: var(--aa-navy);
    font-size: 1.2rem;
    cursor: pointer;
}

.aa-top__crumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-slate);
    white-space: nowrap;
    overflow: hidden;
}

.aa-top__crumb i {
    font-size: 0.8rem;
    opacity: 0.6;
}

.aa-top__crumb strong {
    font-weight: 600;
    color: var(--aa-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}

.aa-top__actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-left: auto;
}

.aa-top__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-slate);
    transition: color 0.25s var(--aa-ease);
}

.aa-top__link i {
    font-size: 1rem;
}

.aa-top__link:hover {
    color: var(--aa-accent);
}

.aa-page {
    flex: 1 1 auto;
    padding: 40px clamp(20px, 3.4vw, 44px) 64px;
}

.aa-page--narrow .aa-inner {
    max-width: 620px;
}

.aa-inner {
    max-width: 1240px;
    margin: 0 auto;
}

.aa-foot {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 22px clamp(20px, 3.4vw, 44px);
    border-top: 1px solid var(--aa-line);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--aa-slate);
}

.aa-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(2, 6, 23, 0.5);
    backdrop-filter: blur(2px);
}

/* Drawer on tablet and mobile */
@media (max-width: 1080px) {
    .aa-shell {
        padding-left: 0;
    }

    .aa-side {
        width: min(300px, 86vw);
        transform: translateX(-100%);
        transition: transform 0.4s var(--aa-ease);
        box-shadow: var(--aa-shadow-lg);
    }

    .aa-side-open .aa-side {
        transform: none;
    }

    .aa-side__close,
    .aa-top__menu {
        display: inline-flex;
    }

    .aa-side__link.is-active::before {
        display: none;
    }
}

@media (max-width: 560px) {
    .aa-top__link span,
    .aa-top .aa-btn span,
    .aa-top__crumb span,
    .aa-top__crumb i {
        display: none;
    }

    .aa-top .aa-btn {
        padding: 0 0.8rem;
    }

    .aa-page {
        padding-top: 28px;
    }
}

/* Page heading */
.aa-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 34px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--aa-line);
}

.aa-head__eyebrow {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-accent);
    margin: 0 0 0.55rem;
}

.aa-head h1 {
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    line-height: 1.15;
    color: var(--aa-ink);
    margin: 0;
    text-wrap: pretty;
}

.aa-head__sub {
    font-size: 0.88rem;
    color: var(--aa-slate);
    margin: 0.6rem 0 0;
    max-width: 52ch;
    text-wrap: pretty;
}

.aa-head__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.aa-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-slate);
    margin-bottom: 0.9rem;
    transition: color 0.25s var(--aa-ease);
}

.aa-back:hover {
    color: var(--aa-accent);
}

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */

.aa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0 1.6rem;
    border: 1px solid var(--aa-navy);
    border-radius: var(--aa-r-sm);
    background: var(--aa-navy);
    color: #fff;
    font-family: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition:
        background 0.3s var(--aa-ease),
        border-color 0.3s var(--aa-ease),
        color 0.3s var(--aa-ease),
        transform 0.3s var(--aa-ease);
}

.aa-btn:hover {
    background: var(--aa-accent);
    border-color: var(--aa-accent);
    color: #fff;
    transform: translateY(-1px);
}

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

.aa-btn--ghost:hover {
    background: var(--aa-navy);
    border-color: var(--aa-navy);
    color: #fff;
}

.aa-btn--danger {
    background: transparent;
    border-color: var(--aa-bad-line);
    color: var(--aa-bad);
}

.aa-btn--danger:hover {
    background: var(--aa-bad);
    border-color: var(--aa-bad);
    color: #fff;
}

.aa-btn--sm {
    min-height: 38px;
    padding: 0 1rem;
    font-size: 0.66rem;
}

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

.aa-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-accent);
    cursor: pointer;
    transition: color 0.25s var(--aa-ease);
}

.aa-linkbtn:hover {
    color: var(--aa-accent-deep);
}

/* --------------------------------------------------------------------------
   3. Alerts
   -------------------------------------------------------------------------- */

.aa-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 14px 18px;
    border: 1px solid var(--aa-line);
    border-left-width: 3px;
    border-radius: var(--aa-r-sm);
    background: var(--aa-white);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--aa-ink);
    margin-bottom: 24px;
    text-wrap: pretty;
}

.aa-alert i {
    font-size: 1.05rem;
    line-height: 1.4;
    flex: 0 0 auto;
}

.aa-alert--success {
    background: var(--aa-good-bg);
    border-color: var(--aa-good-line);
    border-left-color: var(--aa-good);
    color: var(--aa-good);
}

.aa-alert--error {
    background: var(--aa-bad-bg);
    border-color: var(--aa-bad-line);
    border-left-color: var(--aa-bad);
    color: var(--aa-bad);
}

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

.aa-alert__list li + li {
    margin-top: 0.35rem;
}

/* --------------------------------------------------------------------------
   4. Stat cards
   -------------------------------------------------------------------------- */

.aa-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.aa-stat {
    position: relative;
    display: block;
    background: var(--aa-white);
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r);
    padding: 24px 24px 22px;
    overflow: hidden;
    transition:
        transform 0.3s var(--aa-ease),
        box-shadow 0.3s var(--aa-ease),
        border-color 0.3s var(--aa-ease);
}

.aa-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--aa-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s var(--aa-ease);
}

a.aa-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--aa-shadow);
    border-color: var(--aa-accent);
}

a.aa-stat:hover::before {
    transform: scaleY(1);
}

.aa-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--aa-sand);
    color: var(--aa-accent);
    font-size: 1.05rem;
    margin-bottom: 14px;
}

.aa-stat__num {
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(2rem, 3.4vw, 2.7rem);
    line-height: 1;
    color: var(--aa-ink);
    margin: 0 0 0.45rem;
}

.aa-stat__label {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-slate);
    margin: 0;
}

/* --------------------------------------------------------------------------
   5. Cards & panels
   -------------------------------------------------------------------------- */

.aa-card {
    background: var(--aa-white);
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.aa-card:last-child {
    margin-bottom: 0;
}

.aa-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 16px 26px;
    background: var(--aa-card-head, #f8fafc);
    border-bottom: 1px solid var(--aa-line);
}

.aa-card__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-ink);
    margin: 0;
}

.aa-card__title i {
    font-size: 1.05rem;
    color: var(--aa-accent);
}

.aa-card__body {
    padding: 26px;
}

.aa-card__body > .aa-hint:first-child {
    margin-top: -0.4rem;
    margin-bottom: 1.1rem;
}

/* Recent list rows */
.aa-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 15px 26px;
    border-bottom: 1px solid var(--aa-sand-deep);
    transition: background 0.25s var(--aa-ease);
}

.aa-row:last-child {
    border-bottom: 0;
}

.aa-row:hover {
    background: var(--aa-sand);
}

.aa-row__title {
    font-size: 0.95rem;
    color: var(--aa-ink);
    margin: 0 0 0.2rem;
    text-wrap: pretty;
}

.aa-row__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: var(--aa-slate);
}

.aa-row__right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   6. Badges
   -------------------------------------------------------------------------- */

.aa-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
}

.aa-badge--published {
    background: var(--aa-good-bg);
    color: var(--aa-good);
}

.aa-badge--draft {
    background: var(--aa-sand-deep);
    color: var(--aa-slate);
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */

.aa-field {
    margin-bottom: 22px;
}

.aa-field:last-child {
    margin-bottom: 0;
}

.aa-field > label:not(.aa-toggle):not(.aa-check),
.aa-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-slate);
    margin-bottom: 0.55rem;
}

.aa-field .req {
    color: var(--aa-accent);
}

.aa-input,
.aa-select,
.aa-textarea {
    width: 100%;
    padding: 13px 15px;
    font-family: var(--aa-font);
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--aa-ink);
    background: var(--aa-white);
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r-sm);
    transition:
        border-color 0.25s var(--aa-ease),
        box-shadow 0.25s var(--aa-ease);
}

.aa-input::placeholder,
.aa-textarea::placeholder {
    color: color-mix(in srgb, var(--aa-slate) 60%, transparent);
}

.aa-input:focus,
.aa-select:focus,
.aa-textarea:focus {
    outline: none;
    border-color: var(--aa-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aa-accent) 18%, transparent);
}

.aa-textarea {
    resize: vertical;
    min-height: 84px;
}

.aa-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

.aa-field[data-invalid] .aa-input,
.aa-field[data-invalid] .aa-select,
.aa-field[data-invalid] .aa-textarea,
.aa-field[data-invalid] .aa-prefix {
    border-color: var(--aa-bad);
}

.aa-hint {
    display: block;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--aa-slate);
    margin-top: 0.45rem;
    text-wrap: pretty;
}

.aa-error {
    display: block;
    font-size: 0.76rem;
    color: var(--aa-bad);
    margin-top: 0.45rem;
}

.aa-counter {
    display: block;
    text-align: right;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--aa-slate);
    margin-top: 0.35rem;
}

.aa-counter.is-over {
    color: var(--aa-bad);
}

.aa-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

/* Prefixed input (slug) */
.aa-prefix {
    display: flex;
    align-items: center;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r-sm);
    background: var(--aa-white);
    overflow: hidden;
    transition:
        border-color 0.25s var(--aa-ease),
        box-shadow 0.25s var(--aa-ease);
}

.aa-prefix:focus-within {
    border-color: var(--aa-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aa-accent) 18%, transparent);
}

.aa-prefix__label {
    padding: 13px 2px 13px 15px;
    font-size: 0.9rem;
    color: var(--aa-slate);
    white-space: nowrap;
}

.aa-prefix .aa-input {
    border: 0;
    padding-left: 2px;
    background: transparent;
}

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

/* Toggle switch */
.aa-toggle,
.aa-field > label.aa-toggle {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0;
    padding: 12px 14px;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r-sm);
    background: var(--aa-sand);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--aa-ink);
    cursor: pointer;
    user-select: none;
    transition:
        border-color 0.25s var(--aa-ease),
        background 0.25s var(--aa-ease);
}

.aa-toggle:hover {
    border-color: color-mix(in srgb, var(--aa-accent) 45%, var(--aa-line));
}

.aa-toggle:has(input:checked) {
    background: var(--aa-good-bg);
    border-color: var(--aa-good-line);
}

.aa-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.aa-toggle__track {
    position: relative;
    display: block;
    width: 44px;
    height: 25px;
    flex: 0 0 44px;
    background: var(--aa-line);
    border-radius: 20px;
    transition: background 0.3s var(--aa-ease);
}

.aa-toggle__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
    transition: transform 0.3s var(--aa-ease);
}

.aa-toggle input:checked + .aa-toggle__track {
    background: var(--aa-good);
}

.aa-toggle input:checked + .aa-toggle__track::after {
    transform: translateX(19px);
}

.aa-toggle input:focus-visible + .aa-toggle__track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aa-accent) 30%, transparent);
}

.aa-toggle__text {
    display: block;
    min-width: 0;
}

.aa-toggle__text strong {
    display: block;
    font-family: var(--aa-font);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--aa-ink);
}

.aa-toggle__text span {
    display: block;
    font-size: 0.74rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--aa-slate);
    margin-top: 0.1rem;
}

/* Checkbox row */
.aa-check,
.aa-field > label.aa-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0;
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--aa-slate);
    cursor: pointer;
}

.aa-check input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    accent-color: var(--aa-accent);
}

/* Upload dropzone */
.aa-upload {
    position: relative;
    display: block;
    border: 1.5px dashed var(--aa-line);
    border-radius: var(--aa-r);
    background: var(--aa-sand);
    text-align: center;
    padding: 30px 18px;
    cursor: pointer;
    transition:
        border-color 0.25s var(--aa-ease),
        background 0.25s var(--aa-ease);
}

.aa-upload:hover,
.aa-upload.is-dragging {
    border-color: var(--aa-accent);
    background: color-mix(in srgb, var(--aa-accent) 7%, var(--aa-white));
}

.aa-upload input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.aa-upload i {
    display: block;
    font-size: 1.7rem;
    color: var(--aa-accent);
    margin-bottom: 0.5rem;
}

.aa-upload p {
    font-size: 0.86rem;
    color: var(--aa-ink);
    margin: 0 0 0.2rem;
}

.aa-upload span {
    font-size: 0.72rem;
    color: var(--aa-slate);
}

.aa-preview {
    position: relative;
    border-radius: var(--aa-r);
    overflow: hidden;
}

.aa-preview img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.aa-preview--round {
    width: 128px;
    margin: 0 auto;
    border-radius: 50%;
}

.aa-preview--round img {
    width: 128px;
    height: 128px;
    border-radius: 50%;
}

.aa-preview__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.82);
    color: #fff;
    cursor: pointer;
    transition: background 0.25s var(--aa-ease);
}

.aa-preview__remove:hover {
    background: var(--aa-bad);
}

.aa-preview--round .aa-preview__remove {
    top: 2px;
    right: 2px;
}

/* Sticky sidebar actions */
.aa-actions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.aa-actions--row {
    flex-direction: row;
}

.aa-actions--row > * {
    flex: 1;
}

/* --------------------------------------------------------------------------
   8. Rich text editor
   -------------------------------------------------------------------------- */

.aa-editor {
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r);
    background: var(--aa-white);
    overflow: hidden;
    transition:
        border-color 0.25s var(--aa-ease),
        box-shadow 0.25s var(--aa-ease);
}

.aa-editor:focus-within {
    border-color: var(--aa-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aa-accent) 15%, transparent);
}

.aa-editor__toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 7px 8px;
    background: var(--aa-sand);
    border-bottom: 1px solid var(--aa-line);
}

.aa-editor__sep {
    width: 1px;
    height: 20px;
    background: var(--aa-line);
    margin: 0 5px;
}

.aa-editor__spacer {
    flex: 1 1 auto;
}

.aa-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 32px;
    height: 32px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: var(--aa-r-sm);
    background: transparent;
    color: var(--aa-ink);
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    transition:
        background 0.18s var(--aa-ease),
        color 0.18s var(--aa-ease),
        border-color 0.18s var(--aa-ease);
}

.aa-tool:hover {
    background: var(--aa-white);
    border-color: var(--aa-line);
}

.aa-tool.is-active {
    background: var(--aa-navy);
    border-color: var(--aa-navy);
    color: #fff;
}

.aa-tool[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.aa-tool--text {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}

.aa-toolselect {
    height: 32px;
    padding: 0 26px 0 9px;
    border: 1px solid transparent;
    border-radius: var(--aa-r-sm);
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 14px;
    appearance: none;
    color: var(--aa-ink);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition:
        background-color 0.18s var(--aa-ease),
        border-color 0.18s var(--aa-ease);
}

.aa-toolselect:hover {
    background-color: var(--aa-white);
    border-color: var(--aa-line);
}

.aa-toolselect:focus {
    outline: none;
    background-color: var(--aa-white);
    border-color: var(--aa-accent);
}

/* Colour swatch buttons */
.aa-swatch {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--aa-r-sm);
    background: transparent;
    cursor: pointer;
}

.aa-swatch:hover {
    background: var(--aa-white);
    border-color: var(--aa-line);
}

.aa-swatch input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}

.aa-swatch i {
    font-size: 0.95rem;
    color: var(--aa-ink);
}

.aa-swatch::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 5px;
    height: 3px;
    border-radius: 2px;
    background: var(--aa-swatch-color, var(--aa-accent));
}

/* Editable surface */
.aa-editor__content {
    min-height: 420px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 26px 30px 34px;
    font-family: var(--aa-font);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--aa-ink);
    text-wrap: pretty;
}

.aa-editor__content:focus {
    outline: none;
}

.aa-editor__content:empty::before,
.aa-editor__content[data-empty="true"]::before {
    content: attr(data-placeholder);
    color: color-mix(in srgb, var(--aa-slate) 65%, transparent);
    pointer-events: none;
}

.aa-editor__content > *:first-child {
    margin-top: 0;
}

.aa-editor__content h2 {
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.7rem;
    line-height: 1.25;
    color: var(--aa-ink);
    margin: 1.9rem 0 0.7rem;
}

.aa-editor__content h3 {
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--aa-ink);
    margin: 1.6rem 0 0.6rem;
}

.aa-editor__content h4 {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-accent);
    margin: 1.6rem 0 0.6rem;
}

.aa-editor__content p {
    margin: 0 0 1.05rem;
}

.aa-editor__content ul,
.aa-editor__content ol {
    margin: 0 0 1.05rem;
    padding-left: 1.4rem;
}

.aa-editor__content li {
    margin-bottom: 0.35rem;
}

.aa-editor__content a {
    color: var(--aa-accent-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aa-editor__content blockquote {
    margin: 1.4rem 0;
    padding: 0.2rem 0 0.2rem 1.3rem;
    border-left: 2px solid var(--aa-accent);
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--aa-navy);
}

.aa-editor__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--aa-r-sm);
    margin: 0.6rem 0;
}

.aa-editor__content img.is-uploading {
    opacity: 0.45;
    filter: grayscale(1);
}

.aa-editor.is-dropping {
    border-color: var(--aa-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aa-accent) 22%, transparent);
}

.aa-editor__content hr {
    border: 0;
    border-top: 1px solid var(--aa-line);
    margin: 2rem 0;
}

.aa-editor__content pre {
    background: var(--aa-navy);
    color: #e9eef7;
    padding: 16px 18px;
    border-radius: var(--aa-r-sm);
    overflow-x: auto;
    font-size: 0.84rem;
    line-height: 1.6;
    margin: 0 0 1.05rem;
}

.aa-editor__content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    background: var(--aa-sand);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}

.aa-editor__content pre code {
    background: none;
    padding: 0;
}

.aa-editor__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.05rem;
    font-size: 0.92rem;
}

.aa-editor__content th,
.aa-editor__content td {
    border: 1px solid var(--aa-line);
    padding: 9px 12px;
    text-align: left;
}

.aa-editor__content th {
    background: var(--aa-sand);
    font-weight: 600;
}

/* Raw HTML view */
.aa-editor__source {
    display: none;
    width: 100%;
    min-height: 420px;
    max-height: 70vh;
    padding: 22px 26px;
    border: 0;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.84rem;
    line-height: 1.7;
    color: var(--aa-ink);
    background: #f8fafc;
}

.aa-editor__source:focus {
    outline: none;
}

.aa-editor.is-source .aa-editor__content {
    display: none;
}

.aa-editor.is-source .aa-editor__source {
    display: block;
}

.aa-editor.is-source .aa-tool--formatting {
    opacity: 0.35;
    pointer-events: none;
}

/* Status bar */
.aa-editor__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 9px 16px;
    background: var(--aa-sand);
    border-top: 1px solid var(--aa-line);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--aa-slate);
    font-variant-numeric: tabular-nums;
}

/* Fullscreen writing mode */
.aa-editor.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 400;
    border-radius: 0;
    border: 0;
    display: flex;
    flex-direction: column;
}

.aa-editor.is-fullscreen .aa-editor__content,
.aa-editor.is-fullscreen .aa-editor__source {
    flex: 1;
    max-height: none;
}

.aa-editor.is-fullscreen .aa-editor__content {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
}

body.aa-noscroll {
    overflow: hidden;
}

/* Link prompt popover */
.aa-linkbar {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 12px;
    background: var(--aa-white);
    border-bottom: 1px solid var(--aa-line);
}

.aa-linkbar.is-open {
    display: flex;
}

.aa-linkbar input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r-sm);
    font-family: inherit;
    font-size: 0.86rem;
    color: var(--aa-ink);
}

.aa-linkbar input:focus {
    outline: none;
    border-color: var(--aa-accent);
}

/* --------------------------------------------------------------------------
   9. Repeatable rows (FAQs)
   -------------------------------------------------------------------------- */

.aa-repeat {
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r);
    padding: 16px 18px;
    margin-bottom: 14px;
    background: var(--aa-white);
    transition: border-color 0.25s var(--aa-ease);
}

.aa-repeat:hover {
    border-color: color-mix(in srgb, var(--aa-accent) 45%, var(--aa-line));
}

.aa-repeat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.aa-repeat__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--aa-sand);
    color: var(--aa-ink);
    font-size: 0.72rem;
    font-weight: 600;
}

.aa-repeat__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--aa-slate);
    cursor: pointer;
    transition:
        color 0.25s var(--aa-ease),
        background 0.25s var(--aa-ease);
}

.aa-repeat__remove:hover {
    color: var(--aa-bad);
    background: var(--aa-bad-bg);
}

.aa-repeat .aa-input {
    margin-bottom: 8px;
}

.aa-add {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 6px;
    padding: 10px 18px;
    border: 1px dashed var(--aa-line);
    border-radius: var(--aa-r-sm);
    background: transparent;
    color: var(--aa-accent);
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition:
        border-color 0.25s var(--aa-ease),
        background 0.25s var(--aa-ease);
}

.aa-add:hover {
    border-color: var(--aa-accent);
    background: var(--aa-sand);
}

/* --------------------------------------------------------------------------
   10. Post & author grids
   -------------------------------------------------------------------------- */

.aa-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.aa-search {
    position: relative;
    flex: 1 1 260px;
}

.aa-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--aa-slate);
    pointer-events: none;
}

.aa-search input {
    width: 100%;
    padding: 13px 16px 13px 44px;
    border: 1px solid var(--aa-line);
    border-radius: 30px;
    background: var(--aa-white);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--aa-ink);
    transition:
        border-color 0.25s var(--aa-ease),
        box-shadow 0.25s var(--aa-ease);
}

.aa-search input:focus {
    outline: none;
    border-color: var(--aa-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aa-accent) 15%, transparent);
}

.aa-segment {
    display: flex;
    gap: 0.2rem;
    background: var(--aa-white);
    border: 1px solid var(--aa-line);
    border-radius: 30px;
    padding: 4px;
}

.aa-segment button {
    padding: 9px 17px;
    border: 0;
    border-radius: 24px;
    background: transparent;
    color: var(--aa-slate);
    font-family: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.25s var(--aa-ease),
        color 0.25s var(--aa-ease);
}

.aa-segment button:hover {
    color: var(--aa-ink);
}

.aa-segment button.is-active {
    background: var(--aa-navy);
    color: #fff;
}

.aa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.aa-grid--tight {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.aa-tile {
    display: flex;
    flex-direction: column;
    background: var(--aa-white);
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r);
    overflow: hidden;
    transition:
        transform 0.3s var(--aa-ease),
        box-shadow 0.3s var(--aa-ease),
        border-color 0.3s var(--aa-ease);
}

.aa-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--aa-shadow);
    border-color: color-mix(in srgb, var(--aa-accent) 40%, var(--aa-line));
}

.aa-tile.is-hidden {
    display: none;
}

.aa-tile__media {
    position: relative;
    height: 168px;
    background: var(--aa-sand-deep);
    overflow: hidden;
}

.aa-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--aa-ease);
}

.aa-tile:hover .aa-tile__media img {
    transform: scale(1.04);
}

.aa-tile__media-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--aa-slate);
    font-size: 0.74rem;
}

.aa-tile__media-empty i {
    font-size: 1.7rem;
}

.aa-tile__status {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.aa-tile__status--published {
    background: rgba(30, 107, 58, 0.92);
    color: #fff;
}

.aa-tile__status--draft {
    background: rgba(15, 23, 42, 0.82);
    color: #fff;
}

.aa-tile__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
}

.aa-tile__title {
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.18rem;
    line-height: 1.3;
    color: var(--aa-ink);
    margin: 0 0 14px;
    text-wrap: pretty;
}

.aa-tile__meta {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 20px;
}

.aa-tile__meta div {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    color: var(--aa-slate);
    min-width: 0;
}

.aa-tile__meta i {
    color: var(--aa-accent);
    font-size: 0.95rem;
    flex: 0 0 auto;
}

.aa-tile__meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aa-tile__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

.aa-tile__actions > * {
    flex: 1;
}

/* Author tile */
.aa-tile--author {
    align-items: center;
    text-align: center;
    padding: 28px 24px 24px;
}

.aa-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin: 0 auto 16px;
    overflow: hidden;
    background: var(--aa-sand-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--aa-line);
}

.aa-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aa-avatar i {
    font-size: 1.8rem;
    color: var(--aa-slate);
}

.aa-tile--author .aa-tile__title {
    margin-bottom: 0.35rem;
}

.aa-tile--author .aa-tile__count {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aa-slate);
    margin: 0 0 20px;
}

.aa-tile--author .aa-tile__actions {
    width: 100%;
}

/* --------------------------------------------------------------------------
   11. Empty states
   -------------------------------------------------------------------------- */

.aa-empty {
    text-align: center;
    padding: 86px 24px;
    background: var(--aa-white);
    border: 1px dashed var(--aa-line);
    border-radius: var(--aa-r);
}

.aa-empty i {
    display: block;
    font-size: 2.1rem;
    color: var(--aa-accent);
    margin-bottom: 1rem;
}

.aa-empty h2 {
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.5rem;
    color: var(--aa-ink);
    margin: 0 0 0.5rem;
}

.aa-empty p {
    font-size: 0.92rem;
    color: var(--aa-slate);
    margin: 0 auto 1.7rem;
    max-width: 40ch;
    text-wrap: pretty;
}

.aa-empty--sm {
    padding: 46px 24px;
    border-style: solid;
}

/* --------------------------------------------------------------------------
   12. Modal
   -------------------------------------------------------------------------- */

.aa-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 6, 23, 0.62);
    backdrop-filter: blur(3px);
}

.aa-modal.is-open {
    display: flex;
    animation: aa-fade 0.2s var(--aa-ease);
}

.aa-modal__box {
    width: 100%;
    max-width: 400px;
    background: var(--aa-white);
    border-radius: var(--aa-r);
    padding: 36px 32px 30px;
    text-align: center;
    box-shadow: var(--aa-shadow-lg);
    animation: aa-rise 0.25s var(--aa-ease);
}

.aa-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--aa-bad-bg);
    color: var(--aa-bad);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.aa-modal__box h3 {
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.35rem;
    color: var(--aa-ink);
    margin: 0 0 0.6rem;
}

.aa-modal__box p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--aa-slate);
    margin: 0 0 1.7rem;
    text-wrap: pretty;
}

.aa-modal__actions {
    display: flex;
    gap: 0.7rem;
}

.aa-modal__actions > * {
    flex: 1;
}

.aa-modal__actions form {
    flex: 1;
}

@keyframes aa-fade {
    from {
        opacity: 0;
    }
}

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

/* --------------------------------------------------------------------------
   13. Auth (login)
   -------------------------------------------------------------------------- */

.aa-auth {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 100vh;
}

.aa-auth__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 60px;
    background: var(--aa-navy);
    background-image:
        linear-gradient(to top, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.55)),
        var(--aa-auth-image, none);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}

.aa-auth__aside p.aa-auth__eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--aa-accent);
    margin: 0 0 1rem;
}

.aa-auth__aside h2 {
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.15;
    margin: 0 0 1rem;
    text-wrap: pretty;
}

.aa-auth__aside p.aa-auth__lede {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    max-width: 40ch;
    margin: 0;
    text-wrap: pretty;
}

.aa-auth__main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    background: var(--aa-sand);
}

.aa-auth__card {
    width: 100%;
    max-width: 400px;
}

.aa-auth__head {
    margin-bottom: 34px;
}

.aa-auth__head h1 {
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    color: var(--aa-ink);
    margin: 0 0 0.5rem;
}

.aa-auth__head p {
    font-size: 0.9rem;
    color: var(--aa-slate);
    margin: 0;
    text-wrap: pretty;
}

.aa-auth__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--aa-line);
    font-size: 0.78rem;
    color: var(--aa-slate);
}

.aa-auth__foot a {
    color: var(--aa-accent);
    font-weight: 600;
}

/* Password reveal */
.aa-passwrap {
    position: relative;
}

.aa-passwrap .aa-input {
    padding-right: 46px;
}

.aa-passtoggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--aa-r-sm);
    background: transparent;
    color: var(--aa-slate);
    cursor: pointer;
    transition:
        color 0.25s var(--aa-ease),
        background 0.25s var(--aa-ease);
}

.aa-passtoggle:hover {
    color: var(--aa-ink);
    background: var(--aa-sand);
}

@media (max-width: 900px) {
    .aa-auth {
        grid-template-columns: 1fr;
    }

    .aa-auth__aside {
        display: none;
    }

    .aa-auth__main {
        padding: 64px 24px;
    }
}

/* --------------------------------------------------------------------------
   14. Blog form layout
   -------------------------------------------------------------------------- */

.aa-formgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}

.aa-formgrid__side {
    position: sticky;
    top: calc(var(--aa-top-h, 72px) + 24px);
}

@media (max-width: 1000px) {
    .aa-formgrid {
        grid-template-columns: 1fr;
    }

    .aa-formgrid__side {
        position: static;
    }
}

/* Search listing preview */
.aa-serp {
    background: var(--aa-sand);
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r-sm);
    padding: 16px 18px;
    margin-bottom: 24px;
    overflow: hidden;
}

.aa-serp__url {
    display: block;
    font-size: 0.76rem;
    color: var(--aa-slate);
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aa-serp__title {
    display: block;
    font-size: 1.1rem;
    line-height: 1.35;
    color: #1a3d8f;
    margin-bottom: 0.25rem;
    text-wrap: pretty;
}

.aa-serp__desc {
    display: block;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--aa-slate);
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   15. Responsive & accessibility
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
    .aa-card__head,
    .aa-row {
        padding-left: 18px;
        padding-right: 18px;
    }

    .aa-card__body {
        padding: 20px 18px;
    }

    .aa-grid-2 {
        grid-template-columns: 1fr;
    }

    .aa-editor__content {
        padding: 20px 18px 28px;
        min-height: 320px;
    }

    .aa-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
}

.aa-side a:focus-visible,
.aa-side button:focus-visible,
.aa-top a:focus-visible,
.aa-top button:focus-visible,
.aa-page a:focus-visible,
.aa-page button:focus-visible,
.aa-page input:focus-visible,
.aa-page select:focus-visible,
.aa-page textarea:focus-visible,
.aa-auth a:focus-visible,
.aa-auth button:focus-visible,
.aa-auth input:focus-visible {
    outline: 2px solid var(--aa-accent);
    outline-offset: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
    .aa-body *,
    .aa-auth * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   16. Dashboard
   -------------------------------------------------------------------------- */

/* Welcome banner */
.aa-hello {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: clamp(28px, 4vw, 48px);
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(
            100deg,
            rgba(15, 23, 42, 0.97) 0%,
            rgba(15, 23, 42, 0.88) 45%,
            rgba(15, 23, 42, 0.55) 100%
        ),
        var(--aa-hello-image, none) center 40% / cover no-repeat,
        var(--aa-navy);
    box-shadow: var(--aa-shadow);
}

/* Thin inset frame, same motif as the 404 page */
.aa-hello::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    pointer-events: none;
}

.aa-hello__copy {
    position: relative;
    z-index: 1;
}

.aa-hello__date {
    margin: 0 0 0.8rem;
    font-size: 0.64rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-accent);
}

.aa-hello__title {
    margin: 0;
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    line-height: 1.1;
    text-wrap: pretty;
}

.aa-hello__sub {
    margin: 0.8rem 0 0;
    max-width: 48ch;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.72);
    text-wrap: pretty;
}

.aa-hello__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.6rem;
}

.aa-btn--light {
    background: #fff;
    border-color: #fff;
    color: var(--aa-navy);
}

.aa-btn--outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.aa-btn--light:hover,
.aa-btn--outline-light:hover {
    background: var(--aa-accent);
    border-color: var(--aa-accent);
    color: #fff;
}

/* Published ring */
.aa-hello__ring {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    margin-right: clamp(0px, 2vw, 24px);
}

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

.aa-ring__track,
.aa-ring__value {
    fill: none;
    stroke-width: 7;
}

.aa-ring__track {
    stroke: rgba(255, 255, 255, 0.12);
}

.aa-ring__value {
    stroke: var(--aa-accent);
    stroke-linecap: round;
    transition: stroke-dasharray 1s var(--aa-ease);
}

.aa-hello__ring-num {
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 2.3rem;
    line-height: 1;
    margin-top: -10px;
}

.aa-hello__ring-num small {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 2px;
}

.aa-hello__ring-cap {
    position: absolute;
    bottom: 42px;
    font-size: 0.56rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

/* Stat cards: four across, with a footer line */
.aa-body .aa-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 24px;
}

.aa-body .aa-stat {
    border-color: rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.aa-stat__icon--good {
    background: var(--aa-good-bg);
    color: var(--aa-good);
}

.aa-stat__foot {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 1rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--aa-sand-deep);
    font-size: 0.74rem;
    color: var(--aa-slate);
}

.aa-stat__up {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-weight: 600;
    color: var(--aa-good);
}

/* Two column body */
.aa-dash {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.aa-dash__main,
.aa-dash__side {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.aa-dash .aa-card {
    margin-bottom: 0;
}

.aa-card__note {
    margin: 0;
    padding: 14px 26px 18px;
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--aa-slate);
    text-wrap: pretty;
}

/* Recent post rows */
.aa-post {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 14px 26px;
    border-bottom: 1px solid var(--aa-sand-deep);
    transition: background 0.25s var(--aa-ease);
}

.aa-post:last-child {
    border-bottom: 0;
}

.aa-post:hover {
    background: var(--aa-card-head, #f8fafc);
}

.aa-post__thumb {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--aa-sand);
    color: var(--aa-accent);
    font-size: 1.2rem;
}

.aa-post__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.aa-post__title {
    font-size: 0.95rem;
    color: var(--aa-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.25s var(--aa-ease);
}

.aa-post:hover .aa-post__title {
    color: var(--aa-accent-deep);
}

.aa-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: var(--aa-slate);
}

.aa-post__go {
    color: var(--aa-line);
    font-size: 1.1rem;
    transition:
        color 0.25s var(--aa-ease),
        transform 0.25s var(--aa-ease);
}

.aa-post:hover .aa-post__go {
    color: var(--aa-accent);
    transform: translateX(3px);
}

/* Monthly bars */
.aa-bars {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.6rem, 2vw, 1.4rem);
    height: 220px;
    margin: 0;
    padding: 0;
}

.aa-bars__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-height: 0;
}

.aa-bars__num {
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--aa-ink);
}

.aa-bars__track {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    max-width: 56px;
    border-radius: 4px;
    background: repeating-linear-gradient(
        0deg,
        var(--aa-sand-deep) 0 1px,
        transparent 1px 22px
    );
    overflow: hidden;
}

.aa-bars__fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--aa-bar, 0%);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--aa-ink), var(--aa-navy));
    transition: height 0.8s var(--aa-ease);
}

.aa-bars__fill.is-current {
    background: linear-gradient(180deg, #93c5fd, var(--aa-accent));
}

.aa-bars__label {
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-slate);
}

/* Latest live post */
.aa-live {
    background: var(--aa-white);
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r);
    overflow: hidden;
}

.aa-live__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--aa-navy);
}

.aa-live__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aa-live__tag {
    position: absolute;
    left: 14px;
    top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 6px 11px;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(6px);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
}

.aa-live__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5fd08a;
    box-shadow: 0 0 0 3px rgba(95, 208, 138, 0.25);
}

.aa-live__body {
    padding: 20px 24px 22px;
}

.aa-live__date {
    margin: 0 0 0.4rem;
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-accent);
}

.aa-live__title {
    margin: 0;
    font-family: var(--aa-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--aa-ink);
    text-wrap: pretty;
}

.aa-live__links {
    display: flex;
    gap: 1.2rem;
    margin-top: 1rem;
}

.aa-linkbtn--muted {
    color: var(--aa-slate);
}

.aa-linkbtn--muted:hover {
    color: var(--aa-ink);
}

/* Content health list */
.aa-checks {
    list-style: none;
    margin: 0;
    padding: 8px 26px 0;
}

.aa-checks li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 12px 0;
    border-bottom: 1px solid var(--aa-sand-deep);
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--aa-ink);
    text-wrap: pretty;
}

.aa-checks li:last-child {
    border-bottom: 0;
}

.aa-checks i {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: var(--aa-accent-deep);
}

.aa-checks li.is-ok {
    color: var(--aa-slate);
}

.aa-checks li.is-ok i {
    color: var(--aa-good);
}

/* Author rows */
.aa-person {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 12px 26px;
    border-bottom: 1px solid var(--aa-sand-deep);
    transition: background 0.25s var(--aa-ease);
}

.aa-person:last-child {
    border-bottom: 0;
}

.aa-person:hover {
    background: var(--aa-card-head, #f8fafc);
}

.aa-person__avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--aa-navy);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.aa-person__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aa-person__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--aa-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aa-person__count {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--aa-slate);
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .aa-body .aa-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .aa-dash {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .aa-hello {
        grid-template-columns: minmax(0, 1fr);
    }

    .aa-hello__ring {
        display: none;
    }

    .aa-post {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        padding: 12px 18px;
    }

    .aa-post__thumb {
        width: 48px;
        height: 48px;
    }

    .aa-post__go {
        display: none;
    }

    .aa-person,
    .aa-checks {
        padding-left: 18px;
        padding-right: 18px;
    }

    .aa-card__note {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 480px) {
    .aa-body .aa-stats {
        gap: 0.75rem;
    }

    .aa-body .aa-stat {
        padding: 18px 16px 16px;
    }

    .aa-body .aa-stat__foot {
        display: none;
    }

    .aa-post .aa-badge {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   17. Admin helpers (replace one-off inline styles)
   -------------------------------------------------------------------------- */

.aa-hide {
    display: none;
}

.aa-field--flush {
    margin-bottom: 0;
}

.aa-linkbtn--mt {
    margin-top: 0.6rem;
}

.aa-empty--mt {
    margin-top: 1.5rem;
}

.aa-empty--bare {
    border: 0;
}

.aa-form--narrow {
    max-width: 560px;
}

.aa-check--gap {
    margin-bottom: 26px;
}

.aa-swatch--navy {
    --aa-swatch-color: #0f172a;
}

.aa-swatch--cream {
    --aa-swatch-color: #fef3c7;
}

/* Login: logo in the image panel */
.aa-auth__logo {
    position: absolute;
    top: 48px;
    left: 60px;
    width: 150px;
}

.aa-auth__logo img {
    width: 100%;
    height: auto;
}

/* ==========================================================================

/* ==========================================================================
   18. Amped overrides
   ========================================================================== */

.aa-body p,
.aa-body li,
.aa-body label,
.aa-body small,
.aa-body figcaption {
    text-wrap: pretty;
}

/* Brand: logo icon on a white tile + Gugi wordmark (sidebar and sign in) */
.aa-side__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: auto;
    color: #fff;
}
.aa-side__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--aa-r-sm);
    background: #fff;
}
.aa-side__mark img,
.aa-side__brand .aa-side__mark img {
    width: 30px;
    height: 30px;
}
.aa-side__word {
    display: flex;
    flex-direction: column;
    font-family: var(--aa-font-logo);
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
}
.aa-side__tag {
    margin-left: auto;
}

.aa-auth__logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: auto;
    color: #fff;
}
.aa-auth__logo .aa-side__mark {
    width: 52px;
    height: 52px;
}
.aa-auth__logo .aa-side__mark img {
    width: 36px;
    height: 36px;
}
.aa-auth__logo .aa-side__word {
    font-size: 16px;
}

/* Author tiles */
.aa-tile__role {
    margin: -2px 0 4px;
    font-size: 0.8rem;
    color: var(--aa-slate);
}

/* Editor: Tidy button, hint, busy state */
.aa-tool--tidy {
    width: auto;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--aa-accent) 35%, var(--aa-line));
    color: var(--aa-accent-deep);
    font-size: 0.8rem;
    font-weight: 600;
}
.aa-tool--tidy:hover {
    background: color-mix(in srgb, var(--aa-accent) 10%, #fff);
}
.aa-tool--tidy[disabled] {
    opacity: 0.55;
    pointer-events: none;
}
.aa-editor__hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
}
.aa-editor__hint i {
    margin-top: 2px;
    color: var(--aa-accent);
}
.aa-editor.is-busy .aa-editor__content {
    opacity: 0.6;
    cursor: progress;
    transition: opacity 0.2s;
}

/* Editor content mirrors the public article styles (public/css/blog.css .ae-prose-1) */
.aa-editor__content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #374151;
}
.aa-editor__content h2::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-bottom: 14px;
    border-radius: 3px;
    background: var(--aa-navy);
}
.aa-editor__content h2,
.aa-editor__content h3,
.aa-editor__content h4 {
    color: #111827;
}
.aa-editor__content h4 {
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700;
}
.aa-editor__content strong {
    font-weight: 600;
    color: #111827;
}
.aa-editor__content a {
    color: var(--aa-navy);
    text-underline-offset: 4px;
}
.aa-editor__content blockquote {
    padding: 18px 22px 18px 24px;
    border-left: 4px solid var(--aa-navy);
    border-radius: 0 var(--aa-r) var(--aa-r) 0;
    background: #f9fafb;
    font-family: var(--aa-font);
    font-size: 1.15rem;
    font-weight: 500;
    color: #111827;
}
.aa-editor__content blockquote p:last-child {
    margin-bottom: 0;
}
.aa-editor__content img {
    display: block;
    width: 100%;
    border-radius: var(--aa-r);
}
.aa-editor__content figure {
    margin: 1.6rem 0;
}
.aa-editor__content figcaption {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--aa-slate);
    text-align: center;
}
.aa-editor__content .ae-prose-1__table {
    overflow-x: auto;
    margin: 0 0 1.05rem;
}
.aa-editor__content th {
    background: var(--aa-navy);
    color: #fff;
}

/* Lists inside the editor show their markers (the reset above removes them) */
.aa-editor__content ul {
    list-style: disc;
}
.aa-editor__content ol {
    list-style: decimal;
}
.aa-editor__content li::marker {
    color: var(--aa-navy);
}

/* --------------------------------------------------------------------------
   Editor: in-article call to action ([cta] blocks)
   -------------------------------------------------------------------------- */

.aa-tool--text.is-active {
    background: var(--aa-navy);
    border-color: var(--aa-navy);
    color: #fff;
}

/* Insert / edit panel, sits under the toolbar like the link bar */
.aa-ctabar {
    display: none;
    padding: 16px 16px 14px;
    background: var(--aa-white);
    border-bottom: 1px solid var(--aa-line);
}
.aa-ctabar.is-open {
    display: block;
}
.aa-ctabar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 12px;
}
.aa-ctabar__title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-ink);
}
.aa-ctabar__title i {
    font-size: 1rem;
    color: var(--aa-accent);
}
.aa-ctabar__hint {
    font-size: 0.74rem;
    color: var(--aa-slate);
    text-wrap: pretty;
}
.aa-ctabar__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}
.aa-ctabar__grid label {
    display: block;
    min-width: 0;
}
.aa-ctabar__grid label > span {
    display: block;
    margin-bottom: 5px;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--aa-slate);
}
.aa-ctabar__grid .aa-input {
    padding: 10px 12px;
    font-size: 0.88rem;
}
.aa-ctabar__wide {
    grid-column: 1 / -1;
}
.aa-ctabar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.aa-ctabar__actions [hidden] {
    display: none;
}

/* The [cta] line shows as a locked navy chip inside the editor */
.aa-editor__content p.aa-cta-mark {
    position: relative;
    display: grid;
    gap: 3px;
    margin: 1.5rem 0;
    padding: 18px 20px 18px 74px;
    border-radius: 12px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 10v8M10 14h8' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"),
        linear-gradient(120deg, var(--aa-navy) 0%, #1e293b 100%);
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    user-select: none;
    transition:
        box-shadow 0.2s var(--aa-ease),
        transform 0.2s var(--aa-ease);
}
.aa-editor__content p.aa-cta-mark::before {
    content: "CTA  \00B7  " attr(data-cta-title);
    font-size: 0.98rem;
    line-height: 1.35;
    font-weight: 600;
    color: #fff;
    text-wrap: pretty;
}
.aa-editor__content p.aa-cta-mark::after {
    content: attr(data-cta-sub);
    font-size: 0.76rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Bolt badge on the left */
.aa-editor__content p.aa-cta-mark {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E"),
        radial-gradient(circle at 40px 50%, rgba(255, 255, 255, 0.1) 0 21px, transparent 22px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 10v8M10 14h8' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"),
        linear-gradient(120deg, var(--aa-navy) 0%, #1e293b 100%);
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    background-size: 20px 20px, auto, auto, auto;
    background-position: 30px 50%, 0 0, 0 0, 0 0;
}
.aa-editor__content p.aa-cta-mark:hover {
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.55);
    transform: translateY(-1px);
}
.aa-editor__content p.aa-cta-mark.is-selected {
    box-shadow:
        0 0 0 2px var(--aa-white),
        0 0 0 4px var(--aa-accent);
}

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

/* --------------------------------------------------------------------------
   Editor: link hover card
   -------------------------------------------------------------------------- */

.aa-linkcard {
    position: fixed;
    z-index: 500;
    display: none;
    width: max-content;
    min-width: 260px;
    max-width: min(420px, calc(100vw - 16px));
    padding: 12px;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-r);
    background: var(--aa-white);
    box-shadow: var(--aa-shadow-lg);
    font-family: var(--aa-font);
    color: var(--aa-ink);
}
.aa-linkcard.is-open {
    display: block;
}
.aa-linkcard__row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 2px 4px 10px;
    border-bottom: 1px solid var(--aa-line);
}
.aa-linkcard__row i {
    flex: none;
    color: var(--aa-accent);
}
.aa-linkcard__url {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
    color: var(--aa-accent-deep);
}
.aa-linkcard__url:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.aa-linkcard__edit {
    display: flex;
    gap: 8px;
    padding-top: 10px;
}
.aa-linkcard__edit[hidden] {
    display: none;
}
.aa-linkcard__edit .aa-input {
    padding: 8px 10px;
    font-size: 0.86rem;
}
.aa-linkcard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 8px;
}
.aa-linkcard__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--aa-r-sm);
    background: transparent;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--aa-ink);
    cursor: pointer;
    transition: background 0.2s var(--aa-ease), color 0.2s var(--aa-ease);
}
.aa-linkcard__btn[hidden] {
    display: none;
}
.aa-linkcard__btn:hover {
    background: var(--aa-sand);
}
.aa-linkcard__btn--bad {
    margin-left: auto;
    color: var(--aa-bad);
}
.aa-linkcard__btn--bad:hover {
    background: var(--aa-bad-bg);
}