/* =============================================================
   components.css  –  NEXUS UI Components (modern refresh)
   All existing class/selector names preserved.
   ============================================================= */

/* ── Base HTML elements ──────────────────────────────────────── */

wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    width: 100%;
    min-height: 100vh;
}

header {
    display: flex;
    width: 100%;
}

.header-wrap {
    display: flex;
    flex: 1 0;
    flex-direction: column;
}

.logo-wrap {
    display: flex;
    width: 100%;
    height: 60px;
    justify-content: center;
    align-items: center;
}

#header-logo {
    display: block;
    transition: opacity var(--transition-fast);
}
#header-logo:hover {
    opacity: 0.75;
    filter: none;
}

@media (min-width: 768px) {
    .header-wrap {
        flex-direction: row;
    }
}

main {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

footer {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.footer-wrap {
    display: flex;
    flex: 1 1;
    width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2.5rem 1.5rem 1.5rem;
    gap: 1.5rem;
}

footer ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 0.5rem;
}

.footer-column {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-column:last-child {
    border-bottom: none;
}

.footer-foot {
    display: flex;
    min-height: 3rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.8rem;
    color: var(--gray-light);
}

sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
}

img {
    max-width: 100%;
    height: auto;
}

/* ── Forms ───────────────────────────────────────────────────── */

form {
    margin: 10px 15px;
}

form h1, form h2, form h3, form h4 {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--text-color-dark);
}

label {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-color);
    margin: 0.5rem 0 0.25rem;
}

input {
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-color);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-family: var(--font-family-sans-serif);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}
input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring-color);
}

select {
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-color);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-family: var(--font-family-sans-serif);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    cursor: pointer;
}
select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring-color);
}

.option-current {
    background-color: var(--success) !important;
    color: white !important;
}

textarea {
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-color);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-family: var(--font-family-sans-serif);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    resize: vertical;
}
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring-color);
}

/* ── Layout containers ───────────────────────────────────────── */

.container {
    display: flex;
    flex: 1 1;
}

.h-container {
    display: flex;
    flex: 0 1;
    flex-direction: row;
}

.v-container {
    display: flex;
    flex-direction: column;
}

.wide {
    display: flex;
    flex-direction: column;
    flex: 0 1;
    width: 100%;
}

.brand:hover, .brand:focus {
    text-decoration: none;
}

/* ── Top navbar ──────────────────────────────────────────────── */

.logo-toggle-wrap {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

.navbar-toggler {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    transition: all var(--transition-base);
    border-radius: var(--radius-sm);
}
.navbar-toggler:hover, .navbar-toggler:focus {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler-bar {
    width: 22px;
    height: 2px;
    margin: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-xs);
    transition: all var(--transition-base);
}
.navbar-toggler.open .navbar-toggler-bar:first-child {
    transform: rotate(45deg) translateY(8px);
}
.navbar-toggler.open .navbar-toggler-bar:last-child {
    transform: rotate(-45deg) translateY(-8px);
}
.navbar-toggler.open .navbar-toggler-bar:nth-child(2) {
    display: none;
}

/* nav elements */

nav {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
nav ul {
    display: flex;
    flex-direction: column;
    list-style: none;
}
nav ul li {
    display: block;
    width: 100%;
}
nav ul li.current {
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 2px solid var(--highlight);
}
nav ul li a {
    padding: 0.6rem 0.875rem;
    color: var(--nav-color);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.9375rem;
    display: block;
    transition: color var(--transition-fast);
}
nav ul li:hover > a {
    color: var(--nav-color-hover);
}

/* public navbar */

.navbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.navbar .nav-item {
    display: inline-block;
}
.navbar .nav-link {
    padding-right: 1.25rem;
    padding-left: 0;
    color: var(--nav-color);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.navbar .nav-link:hover {
    color: var(--nav-color-hover);
}
.navbar ul li {
    display: inline-block;
}
.navbar ul li a {
    white-space: nowrap;
    color: var(--nav-color);
    font-size: 0.9375rem;
}

/* userbar */

.userbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.userbar ul {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-around;
    gap: 0.25rem;
}
.userbar .nav-item {
    display: flex;
    flex-basis: 100px;
}
.userbar .dropdown a:focus + div {
    opacity: 1;
    pointer-events: all;
    display: block;
    transform: translateY(0);
}
.userbar-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 0.5rem;
}
.userbar .dropdown:hover .dropdown-list,
.userbar .dropdown:hover .dropdown-menu {
    display: block;
    background: var(--surface);
}

/* dropdowns */

.dropdown .dropdown-menu .dropdown-header {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray);
    padding: 0.875rem 1rem 0.375rem;
    background: transparent;
}

.dropdown-menu, .dropdown-list {
    display: none;
    position: absolute;
    width: 260px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    top: 44px;
    right: 0;
    transition: all var(--transition-slow);
    z-index: 200;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.dropdown-divider {
    width: 100%;
    height: 1px;
    background: var(--surface-3);
    margin: 0.25rem 0;
}

.dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.dropdown-item:hover {
    background: var(--light);
    color: var(--primary);
}

.dropdown-chain-item {
    font-weight: 600;
    font-size: 0.8rem;
    display: block;
    border-radius: var(--radius-sm);
    margin: 0.25rem 0.5rem;
    padding: 0.5rem 0.75rem;
    color: var(--text-color);
    background: var(--light);
    pointer-events: all;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.dropdown-chain-item:hover {
    background: var(--bg-color-distinct);
    color: var(--primary);
}

.dropdown.no-arrow .dropdown-toggle::after {
    display: none;
}
.dropdown-toggle::after {
    content: "›";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%) rotate(90deg);
    font-size: 1.2em;
    line-height: 1;
}

/* ── Misc ────────────────────────────────────────────────────── */

.list-unstyled {
    list-style-type: none;
}

/* ── Page menubar ────────────────────────────────────────────── */

.menubar {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pagemenu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.pagemenu a,
.pagemenu button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-muted);
    /* Shared control height so text links, icon-only "+" buttons and the
       context-select pill all line up. border-box is required because there is
       no global reset — min-height must include the padding. */
    min-height: var(--pagemenu-control-h, 2rem);
    box-sizing: border-box;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: none;
    background: var(--indigo-50, var(--primary-soft));
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}
.pagemenu a:hover,
.pagemenu button:hover {
    background: var(--indigo-50, var(--primary-soft));
    color: var(--indigo-600, var(--primary-2));
}
.pagemenu a.active,
.pagemenu a[aria-current],
.pagemenu button.active {
    background: var(--indigo-100, var(--primary-soft));
    color: var(--indigo-700, var(--primary-2));
    font-weight: 600;
}
.pagemenu .sep {
    width: 1px;
    height: 1.25rem;
    background: var(--border);
    margin: 0 0.125rem;
    flex-shrink: 0;
}
.pagemenu div:has(select) {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--indigo-50, var(--primary-soft));
    border-radius: var(--radius-sm);
    min-height: var(--pagemenu-control-h, 2rem);
    box-sizing: border-box;
    padding: 0 0.5rem;
}
.pagemenu select {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-color);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    line-height: 1.2;
    box-sizing: border-box;
    padding: 0.2rem 1.75rem 0.2rem 0.65rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.pagemenu select:hover  { border-color: var(--indigo-400, var(--info)); }
.pagemenu select:focus  { outline: none; border-color: var(--indigo-500, var(--indigo)); box-shadow: 0 0 0 2px var(--indigo-100, var(--primary-soft)); }
.pagemenu li.warning a  { color: var(--danger); }
.pagemenu li.warning a:hover { background: var(--danger-bg); color: var(--danger-text); }

/* ── Sidenav ─────────────────────────────────────────────────── */

.sidenav {
    background: var(--bg-gradient);
    color: var(--nav-color);
    transition: all var(--transition-slow);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 100;
}
/* Setup / infra / config chrome (SETUP/include/html_setup_page_header.php) renders
   <wrap> > .sidenav + <header> + <main>. Without positioning, .sidenav sits as a
   full-width block and the header/content stack beneath it. Lay it out as a fixed
   left drawer (mirroring the .users-drawer mechanism + --drawer-width-full token)
   and offset its sibling header/main. Scoped via the sibling combinator so only
   pages that actually render a .sidenav are affected — bare public <header> is not. */
@media (min-width: 768px) {
    .sidenav {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: var(--drawer-width-full, 280px);
        box-sizing: border-box;
    }
    .sidenav ~ header,
    .sidenav ~ main {
        padding-left: var(--drawer-width-full, 280px);
        box-sizing: border-box;
    }
}
.sidenav .sidenav-header {
    padding: 1.5rem 1.25rem 1rem;
}
.sidenav ul {
    padding: 0 0 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all var(--transition-slow);
}
.sidenav ul p {
    color: var(--nav-color);
    padding: 0.75rem 0.875rem 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}
.sidenav ul li a {
    padding: 0.6rem 1rem;
    font-size: 0.9375rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: var(--radius-md);
    margin: 0.125rem 0.5rem;
    color: var(--nav-color);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.sidenav ul li {
    transition: all var(--transition-fast);
}
.sidenav ul li a:hover {
    color: var(--on-primary);
    background: rgba(255, 255, 255, 0.12);
}
.sidenav ul li.active > a,
a[aria-expanded="true"] {
    color: var(--on-primary);
    background: rgba(255, 255, 255, 0.18);
    font-weight: 600;
}
a[data-toggle="collapse"] {
    position: relative;
}

/* ── Social / profile styles ─────────────────────────────────── */

.group-header {
    width: 100%;
    height: 160px;
    background-color: var(--dark);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.group-name {
    position: absolute;
    left: 120px;
    font-size: 1.75rem;
    font-weight: 600;
    vertical-align: middle;
    color: var(--text-color);
}
.group-panel {
    width: 100%;
    min-height: 300px;
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.group-icon-container {
    position: relative;
    height: 60px;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}
.group-icon {
    left: 20px;
    position: absolute;
    bottom: 20px;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background-size: cover;
    background-color: var(--highlight);
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-md);
}
.group-panel-icon-container {
    position: relative;
    text-align: center;
    height: 40px;
}
.group-panel-icon {
    left: 20px;
    position: absolute;
    bottom: 60px;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    background-size: cover;
    background-color: var(--highlight);
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-sm);
}
.group-panel-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color);
}
.group-btn-box {
    position: absolute;
    right: 20px;
    top: 15px;
}
.user-icon {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    background-size: cover;
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-sm);
}
.user-photo {
    display: block;
    position: relative;
    left: 100px;
    top: 100px;
    width: 250px;
    height: 250px;
    border-radius: var(--radius-full);
    background-size: cover;
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-md);
}
.user-name {
    display: block;
    margin-left: 360px;
    width: 200px;
    height: 80px;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--on-primary);
}
.profile-bg {
    width: 100%;
    height: 300px;
    background-color: var(--dark);
    background-size: cover;
    background-position: center;
}
.img-profile {
    margin: 4px;
    height: 32px;
    width: 32px;
    border-radius: var(--radius-full);
}
.rounded-circle {
    border-radius: var(--radius-full);
}
.icon-round-sm {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
}

/* ── Tabs ────────────────────────────────────────────────────── */

.tabs {
    display: flex;
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
}

.tab {
    box-sizing: border-box;
    background-color: transparent;
    flex-shrink: 0;
    outline: none;
    cursor: pointer;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}
.tab:hover {
    background-color: var(--light);
    color: var(--text-color);
    border-bottom-color: var(--secondary);
}
.tab.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    background-color: transparent;
    font-weight: 600;
}

.tab-panel {
    flex-direction: column;
    padding: 1.25rem;
    border-top: none;
}

/* ── Widgets ─────────────────────────────────────────────────── */

.widget {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
}
/* Listing variant — sizes to content, no overflow clip */
.widget-list {
    flex: 0 0 auto;
    overflow: visible;
}

.widget-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    color: var(--text-color-dark);
    font-weight: 600;
    font-size: 0.875rem;
}
.widget-body {
    padding: 1rem;
}
.widget-row {
    display: flex;
    height: 36px;
    border-bottom: 1px solid var(--surface-3);
}
.widget-rowhead {
    text-align: center;
    padding: 0.375rem 0.5rem;
    border-right: 1px solid var(--surface-3);
    background-color: var(--surface-2);
    overflow: hidden;
    color: var(--text-color-dark);
    font-weight: 600;
    font-size: 0.8rem;
}
.widget-rowhead:last { clear: right; border-right: 0; }

.widget-gridhead {
    flex-basis: 100%;
    background-color: var(--surface-2);
    padding: 0.5rem;
    color: var(--text-color-dark);
    font-weight: 600;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border);
}
.widget-colhead {
    flex-basis: 100%;
    text-align: center;
    padding: 0.375rem 0.5rem;
    border-top: 1px solid var(--surface-3);
    border-right: 1px solid var(--surface-3);
    background-color: var(--surface-2);
    overflow: hidden;
    color: var(--text-color-dark);
    font-weight: 600;
    font-size: 0.8rem;
}
.widget-colhead:last { clear: right; border-right: 0; }

.widget-data {
    display: flex;
    flex-basis: 100%;
    border-top: 1px solid var(--surface-3);
    border-right: 1px solid var(--surface-3);
    padding: 0.375rem 0.5rem;
    background-color: var(--surface);
    font-size: 0.875rem;
    color: var(--text-color);
}
.widget-data:last { clear: right; border-right: 0; }

/* ── Cards ───────────────────────────────────────────────────── */

.card {
    display: flex;
    flex: 1;
    flex-direction: column;
    border-radius: var(--radius-lg);
    margin: 0.75rem;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
    box-shadow: var(--shadow-md);
}
/* A card that keeps its content height inside a flex column (a sidebar of cards): .card's own
   flex: 1 beats the utilities.css .flex-none because utilities load first, so it is restated here. */
.card.flex-none { flex: none; }
.card-title {
    color: var(--text-color-dark);
    padding: 0.875rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.9375rem;
}
.card-body {
    padding: 1rem;
    background: var(--surface);
    color: var(--text-color);
    font-size: 0.9375rem;
    flex: 1;
}

/* ── Collapsible card ───────────────────────────────
   A card whose title bar is a clickable <summary>; clicking it drops
   the body down (and folds it back up). Native <details> — no JS.
   Stack several to get an accordion-style compact list.

   Markup:
     <details class="collapse-card">           (add `open` to start expanded)
       <summary class="collapse-card-title">
         <span class="collapse-card-label"><i class="fa fa-key"></i> Title</span>
         <span class="status-badge status-badge--done">Configured</span>  (optional)
       </summary>
       <div class="collapse-card-body"> … </div>
     </details>
   The status-badge (if present) and the chevron sit at the far right. */
.collapse-card {
    border-radius: var(--radius-lg);
    margin: 0.75rem 0;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}
.collapse-card:hover { box-shadow: var(--shadow-md); }
.collapse-card > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    color: var(--text-color-dark);
    font-weight: 600;
    font-size: 0.9375rem;
}
.collapse-card > summary::-webkit-details-marker { display: none; }
.collapse-card > summary:focus,
.collapse-card > summary:focus-visible { outline: none; }
.collapse-card-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
/* Push an optional status-badge — and always the chevron — to the right edge. */
.collapse-card > summary > .status-badge { margin-left: auto; }
.collapse-card > summary::after {
    content: '\25BE';            /* ▾ */
    margin-left: auto;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.55;
    transition: transform var(--transition-base);
}
.collapse-card[open] > summary::after { transform: rotate(180deg); }
.collapse-card[open] > summary { border-bottom: 1px solid var(--border); }
.collapse-card-body {
    padding: 1rem;
    background: var(--surface);
    color: var(--text-color);
    font-size: 0.9375rem;
}

/* ── Glass surface ───────────────────────────────────────────────
   Frosted translucent panel: a semi-transparent surface fill behind a
   backdrop blur, with a hairline border. Theme-aware (no colour
   literals) — light on light themes, dark on dark. Use as a modifier
   on a card / box / button that floats over a gradient or image bg.
   Pair with a radius utility (e.g. .rounded-lg) and padding as needed.

   Markup:  <div class="card glass"> … </div>
            <a class="btn glass"> … </a>                              */
.glass {
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
}

/* ── Modal ───────────────────────────────────────────────────── */

.modal {
    z-index: 1000;
    display: none;
    padding-top: 10vh;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-panel {
    margin: auto;
    background-color: var(--surface);
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

@media (max-width: 768px) {
    .modal { padding-top: 2rem; }
    .modal-panel { width: 95%; }
}

/* ── Media browser ───────────────────────────────────────────── */

.dir-option { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.875rem; color: var(--text-color); border-bottom: 1px solid var(--surface-3); }
.dir-option:last-child { border-bottom: 0; }
.dir-option:hover { background: var(--highlight); }
.dir-option.selected { background: var(--primary); color: var(--on-primary); }

/* Grid columns: icon | name (flex) | date | size | actions */
.media-list { width: 100%; font-size: 0.875rem; }
.media-list-head,
.media-list-row { display: grid; grid-template-columns: 2.5rem 1fr 10rem 5rem 4.5rem; align-items: center; }
.media-list-head { border-bottom: 2px solid var(--border); }
.media-list-head > div { padding: 0.5rem 0.75rem; font-size: 0.75rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.media-list-row > div { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--surface-3); }
.media-list-row:hover > div { background: var(--highlight); }
.media-list .col-icon { text-align: center; padding-right: 0; }
.media-list .col-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-list .col-date { white-space: nowrap; color: var(--gray); }
.media-list .col-size { white-space: nowrap; text-align: right; color: var(--gray); }
.media-list .col-actions { white-space: nowrap; text-align: right; }
.media-list a { color: var(--primary); text-decoration: none; }
.media-list a:hover { text-decoration: underline; }
.media-list .col-actions a { color: var(--gray); }
.media-list .col-actions a:hover { color: var(--primary); text-decoration: none; }

/* ── Wizard ──────────────────────────────────────────────────── */

.wizard {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin: 1rem;
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.box-shadow {
    box-shadow: var(--shadow-md);
}

/* ── User circle (avatar) ────────────────────────────────────── */

.user-circle {
    display: flex;
    height: 40px;
    width: 40px;
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    color: var(--on-primary);
    background: var(--bg-gradient);
    transition: opacity var(--transition-fast);
    cursor: pointer;
    flex-shrink: 0;
}
.user-circle:hover {
    opacity: 0.85;
}

/* ── Badges ──────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.6em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--radius-sm);
}
.badge-pill {
    padding-right: 0.75em;
    padding-left: 0.75em;
    border-radius: var(--radius-full);
}
.badge-counter { color: var(--on-highlight); background-color: var(--highlight); }
.badge-info    { color: var(--on-info); background-color: var(--indigo); }
.badge-warning { color: var(--on-warning); background-color: var(--warning-bg); }
.badge-danger  { color: var(--on-danger); background-color: var(--danger); }

.badge.up {
    position: relative;
    top: -10px;
    margin: 0 -0.8em;
    border-radius: var(--radius-xl);
}
a .badge-pill:focus, a .badge-pill:hover {
    text-decoration: none;
    cursor: pointer;
}
.badge:hover {
    filter: brightness(0.93);
}

.cursor-pointer:hover { cursor: pointer; }

/* ── Alert / message boxes ───────────────────────────────────── */

.errors {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--danger-bg);
    border: 1px solid var(--danger-bg);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-md);
    color: var(--danger-text);
    font-weight: 500;
    max-width: var(--breakpoint-xl);
    margin: 0.75rem auto;
    padding: 1rem 1.25rem;
    text-align: left;
}

.success {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--success-bg);
    border: 1px solid var(--success-bg);
    border-left: 4px solid var(--success);
    border-radius: var(--radius-md);
    color: var(--success-text);
    font-weight: 500;
    margin: 0.5rem 0 0.75rem;
    padding: 1rem 1.25rem;
    text-align: left;
}

.info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--info-bg);
    border: 1px solid var(--info-bg);
    border-left: 4px solid var(--info-accent);
    border-radius: var(--radius-md);
    color: var(--info-text);
    font-weight: 500;
    max-width: var(--breakpoint-xl);
    margin: 0.75rem auto;
    padding: 1rem 1.25rem;
    text-align: left;
}

.notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-bg);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-md);
    color: var(--warning-text);
    font-weight: 500;
    margin: 0.5rem 0 0.75rem;
    padding: 1rem 1.25rem;
    text-align: left;
}

.warning {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-bg);
    border-left: 4px solid var(--orange);
    border-radius: var(--radius-md);
    color: var(--warning-text);
    font-weight: 500;
    margin: 0.5rem 0 0.75rem;
    padding: 1rem 1.25rem;
    text-align: left;
}

.fail {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--danger-bg);
    border: 2px solid var(--danger);
    border-radius: var(--radius-md);
    color: var(--danger-text);
    font-weight: 600;
    margin: 0.5rem 0 0.75rem;
    padding: 1rem 1.25rem;
    text-align: left;
}

/* ── Content / thread ────────────────────────────────────────── */

.thread-panel {
    width: 100%;
    border-radius: var(--radius-md);
    min-height: 200px;
    background-color: var(--surface);
    border: 1px solid var(--border);
}
.thread-header {
    width: 100%;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    min-height: 200px;
    background-color: var(--surface);
}
.thread-header:not(:first-of-type) {
    margin-top: 1rem;
}
.thread-dropper {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: 100%;
    margin-left: 0.625rem;
    vertical-align: bottom;
    width: 20px;
}
.thread-line {
    box-sizing: border-box;
    border-right: 2px solid var(--border);
    display: block;
    height: 100%;
    width: 50%;
}
.comments {
    background: var(--surface);
    border-bottom: 1px solid var(--surface-3);
    border-top: 1px solid var(--surface-3);
    color: var(--text-color);
    margin-top: 1.25rem;
    padding: 0.5rem 0;
    text-align: right;
}
.quotebox {
    background-color: var(--warning-bg);
    border: 1px solid var(--warning-bg);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    clear: both;
    color: var(--text-color);
}

/* ── Misc component helpers ──────────────────────────────────── */

.legal_line { font-size: 0.75rem; color: var(--gray); }

.timer {
    background-color: var(--text-color);
    text-align: center;
    color: var(--on-dark);
    border-radius: var(--radius-sm);
    padding: 0.375rem 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
}
.notifier { color: var(--primary); font-weight: 600; font-size: 0.8rem; }
.info     { line-height: 1.5; font-size: 0.8rem; color: var(--gray); }
.look     { color: var(--primary); font-weight: 600; font-size: 0.875rem; }

.hidden {
    display: none;
}
.frame {
    display: inline-block;
    vertical-align: top;
    width: 160px;
    height: 250px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 5px;
    margin-left: 15px;
}
.list-element { width: 160px; font-size: 0.8rem; color: var(--text-color); }
.member  { display: inline-block; vertical-align: top; width: 160px; }
.country { display: inline-block; vertical-align: top; width: 160px; }

.action-bar {
    border-radius: var(--radius-md);
    background: var(--bg-gradient);
    padding: 0.5rem 1rem;
}

/* ── Buttons ─────────────────────────────────────────────────── */

.btn + .btn { margin-left: 0.75rem; }

/* Semantic button base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.125rem;
    border-radius: var(--radius-md);
    border: 1.5px solid transparent;
    font-family: var(--font-family-sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
}
.btn:hover { filter: brightness(1.08); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary   { background: var(--primary);   color: var(--on-primary); border-color: var(--primary); }
.btn-secondary { background: var(--light);      color: var(--text-color-dark); border-color: var(--border-strong); }
.btn-success   { background: var(--success);    color: var(--on-success); border-color: var(--success); }
.btn-danger    { background: var(--danger);     color: var(--on-danger); border-color: var(--danger); }
.btn-warning   { background: var(--warning);    color: var(--on-warning);      border-color: var(--warning); }

.btn-secondary:hover { background: var(--border); }

.btn-sm { padding: 0.3125rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.75rem 1.5rem;    font-size: 1.0625rem; }

/* Badge additions */
.badge-success { color: var(--on-success); background-color: var(--success); }
.badge-primary { color: var(--on-primary); background-color: var(--primary); }

.btn-connect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--on-primary);
    background: var(--bg-gradient);
    height: 44px;
    border-radius: var(--radius-full);
    outline: none;
    padding: 0 1.5rem;
    border: none;
    font-weight: 600;
    font-size: 0.9375rem;
    font-family: var(--font-family-sans-serif);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}
.btn-connect:hover {
    opacity: 0.9;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.6rem 1.25rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--success);
    border: none;
    border-radius: var(--radius-md);
    color: var(--on-success);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-family-sans-serif);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-xs);
}
.btn-action:hover {
    filter: brightness(1.05);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.btn-action.bg-red    { background: var(--red); }
.btn-action.bg-orange { background: var(--orange); }
.btn-action.bg-green  { background: var(--green); }
.btn-action.bg-gray   { background: var(--gray); }
.btn-action.bg-yellow { background: var(--yellow); }

.btn-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--success);
    padding: 0.875rem 2rem;
    margin: 0.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--font-family-sans-serif);
    color: var(--on-success);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}
.btn-next:hover {
    filter: brightness(1.05);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-family: var(--font-family-sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-status:hover { background: var(--light); border-color: var(--text-muted); }

/* ── Cloudflare record inline buttons ───────────────────────────────────── */
.cf-record-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-family-sans-serif);
    cursor: pointer;
    white-space: nowrap;
    transition: filter var(--transition-fast);
}
.cf-record-btn:hover { filter: brightness(1.08); }

/* ── Cloudflare status button states ────────────────────────────────────── */
.cf-btn-unset   { background: var(--info-text); color: var(--on-dark); border: none; }   /* deep blue  — not in CF yet, clear CTA */
.cf-btn-unset:hover   { background: var(--info-text); }
.cf-btn-pending { background: var(--warning-text); color: var(--on-primary); border: none; }   /* amber      — waiting on nameservers */
.cf-btn-pending:hover { background: var(--warning-text); }
.cf-btn-moved   { background: var(--danger-text); color: var(--on-dark); border: none; }   /* red        — domain moved/broken */
.cf-btn-moved:hover   { background: var(--danger-text); }
.cf-btn-active  { background: var(--success-text); color: var(--on-dark); border: none; }   /* green      — live and healthy */
.cf-btn-active:hover  { background: var(--success-text); }
.cf-btn-check     { background: var(--text-color-light); color: var(--on-dark); border: none; }   /* gray       — local record exists, CF status unknown */
.cf-btn-check:hover     { background: var(--text-color); }

.cf-info {
    display: none;
    margin-top: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.cf-info.cf-info-visible  { display: block; }
.cf-info code             { font-family: monospace; font-size: 0.85em; letter-spacing: 0.02em; }
.cf-info-warning  { background: var(--warning-bg); border: 1px solid var(--warning-bg); color: var(--warning-text); }
.cf-info-success  { background: var(--success-bg); border: 1px solid var(--success-bg); color: var(--success-text); }
.cf-info-error    { background: var(--danger-bg); border: 1px solid var(--danger-bg); color: var(--danger-text); }

.btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-link:hover { background: var(--primary); color: var(--on-primary); }

.btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--success);
    border: none;
    border-radius: var(--radius-md);
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-family: var(--font-family-sans-serif);
    color: var(--on-success);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-xs);
}
.btn-save:hover { filter: brightness(1.05); box-shadow: var(--shadow-sm); }

.btn-sq-rnd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    text-align: center;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-family: var(--font-family-sans-serif);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid transparent;
}
.btn-sq-rnd:hover {
    background-color: var(--bg-color-distinct);
    color: var(--primary);
    border-color: var(--secondary);
    transform: translateY(-1px);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--primary);
    color: var(--primary);
    background: transparent;
    font-weight: 600;
    font-size: 0.9375rem;
    font-family: var(--font-family-sans-serif);
    cursor: pointer;
    transition: all var(--transition-base);
}
.btn-outline:hover {
    background-color: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.btn-filled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full);
    background: var(--bg-gradient);
    color: var(--on-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    font-family: var(--font-family-sans-serif);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    border: none;
}
.btn-filled-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full);
    background-color: var(--surface);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9375rem;
    font-family: var(--font-family-sans-serif);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    border: 1.5px solid var(--secondary);
}
.btn-filled:hover {
    opacity: 0.9;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.btn-filled-white:hover {
    background: var(--bg-color-distinct);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.btn-filled a            { color: var(--on-primary); text-decoration: none; }
.btn-filled:hover a      { color: var(--on-primary); }

.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin: 1rem auto 0.75rem;
    background: var(--bg-gradient);
    border: none;
    border-radius: var(--radius-md);
    padding: 0.875rem 1.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    font-family: var(--font-family-sans-serif);
    color: var(--on-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}
.btn-login:hover {
    opacity: 0.92;
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

/* ── Login / form inputs ─────────────────────────────────────── */

.input-login {
    height: 44px;
    background: var(--surface);
    border-radius: var(--radius-md);
    font-weight: 400;
    font-size: 1rem;
    width: 100%;
    max-width: 360px;
    border: 1.5px solid var(--border-strong);
    color: var(--text-color);
    padding: 0.5rem 0.875rem;
    font-family: var(--font-family-sans-serif);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}
.input-login:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring-color);
}

/* ── Terms ───────────────────────────────────────────────────── */

.terms {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
}
.terms-box {
    padding: 0.5rem 0.75rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-bg);
    border-radius: var(--radius-md);
    color: var(--warning-text);
}

/* ── Form helpers ────────────────────────────────────────────── */

.reqd {
    font-weight: 700;
    color: var(--danger);
    margin: auto;
}
.subheading {
    font-weight: 600;
    font-size: 0.9375rem;
    margin: 0.75rem auto 0.625rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-color-dark);
}

/* ── Text panels ─────────────────────────────────────────────── */

.text-panel {
    color: var(--on-primary);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
    border-radius: var(--radius-lg);
    margin: 0.625rem 0;
    padding: 0.75rem 1rem;
}
.text-panel-dark {
    color: var(--on-primary);
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.55) 100%);
    box-shadow: var(--shadow-xs);
    margin: 0.625rem 0;
    border-radius: var(--radius-lg);
}

/* ── Tooltips ────────────────────────────────────────────────── */

.tooltips {
    position: relative;
    display: inline-block;
}
.tooltips .tooltipstext {
    visibility: hidden;
    min-width: 140px;
    background-color: var(--text-color);
    color: var(--on-dark);
    text-align: center;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    position: absolute;
    z-index: 200;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.tooltips:hover .tooltipstext {
    visibility: visible;
    opacity: 1;
}

/* ── Divider ─────────────────────────────────────────────────── */

.line {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: 2.5rem 0;
}

/* ── Full-screen overlay ─────────────────────────────────────── */

.w-overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 500;
}

/* ── Input error state ───────────────────────────────────────── */

.input-error,
input.input-error,
select.input-error,
textarea.input-error {
    border-color: var(--danger) !important;
    background-color: var(--ring-color-danger) !important;
    box-shadow: 0 0 0 3px var(--ring-color-danger);
}

/* ── Product cards ───────────────────────────────────────────── */

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.product-card-image-wrap {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--surface-2);
}
.product-card-image {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.product-card:hover .product-card-image { transform: scale(1.05); }

.product-card-body {
    flex: 1;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.product-card-heading {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-color);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-line { font-size: 0.8125rem; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-card-price { margin-top: 0.5rem; font-size: 1.0625rem; font-weight: 700; color: var(--primary); }
.product-price-was { font-size: 0.8rem; color: var(--gray); text-decoration: line-through; font-weight: 400; margin-left: 0.375rem; }
.product-card-points { font-size: 0.75rem; color: var(--gray); }
.product-card-actions {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--surface-3);
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.product-card-actions .btn-action { margin: 0; flex: 1; font-size: 0.8125rem; padding: 0.5rem 0.75rem; }

/* Grid */
.product-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
    .product-grid           { grid-template-columns: repeat(3, 1fr); }
    .product-grid-2         { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .product-grid-4         { grid-template-columns: repeat(4, 1fr); }
}

/* Horizontal scroll row */
.product-row {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.product-row > .product-card { flex: 0 0 220px; scroll-snap-align: start; }
@media (min-width: 640px) { .product-row > .product-card { flex-basis: 260px; } }

/* Hero */
.product-hero { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .product-hero { grid-template-columns: 1fr 1fr; } }
.product-hero-image img { width: 100%; border-radius: var(--radius-md); object-fit: cover; max-height: 480px; }
.product-hero-body { display: flex; flex-direction: column; gap: 1rem; }
.product-hero-heading { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 0; }
.product-hero-desc    { color: var(--gray); line-height: 1.65; margin: 0; }
.product-hero-price   { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.product-hero-points  { font-size: 0.875rem; color: var(--gray); }
.product-hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.product-hero-actions .btn-action { margin: 0; }

/* Category pills */
.category-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.category-pill {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    color: var(--text-color);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.category-pill:hover,
.category-pill.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ── Cart drawer ─────────────────────────────────────────────── */

.cart-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.375rem;
    color: inherit;
    line-height: 1;
}
.cart-icon-btn:hover { opacity: 0.75; }

.cart-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    background: var(--primary, var(--blue));
    color: var(--on-primary);
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
}

/* Overlay */
.cart-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.cart-drawer-overlay-visible {
    display: block;
    opacity: 1;
}

/* Drawer panel */
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(400px, 92vw);
    height: 100dvh;
    height: 100vh;
    background: var(--surface);
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.cart-drawer[aria-hidden="false"],
.cart-drawer.cart-drawer-open {
    transform: translateX(0);
}
body.cart-drawer-lock { overflow: hidden; }

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.cart-drawer-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-color, var(--text-color-dark));
}
.cart-drawer-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--gray, var(--text-color-light));
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    transition: background var(--transition-fast, 0.15s);
}
.cart-drawer-close:hover { background: var(--surface-3); color: var(--text-color, var(--text-color-dark)); }

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.25rem;
}
.cart-drawer-loading,
.cart-drawer-empty,
.cart-drawer-error { text-align: center; padding: 2rem 0; color: var(--gray, var(--text-color-light)); }
.cart-drawer-empty .btn { margin-top: 1rem; }

.cart-drawer-items { display: flex; flex-direction: column; gap: 0.875rem; }

.cart-drawer-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--surface-3);
}
.cart-drawer-item:last-child { border-bottom: none; }
.cart-drawer-item-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm, 4px);
    background: var(--surface-3);
}
.cart-drawer-item-info { display: flex; flex-direction: column; gap: 0.25rem; }
.cart-drawer-item-name  { font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
.cart-drawer-item-price { font-size: 0.8125rem; color: var(--gray, var(--text-color-light)); }

.cart-drawer-item-controls {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    width: fit-content;
    margin-top: 0.25rem;
}
.cart-qty-btn {
    background: var(--surface-2);
    border: none;
    width: 28px;
    height: 28px;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast, 0.15s);
}
.cart-qty-btn:hover { background: var(--border); }
.cart-qty-val { padding: 0 0.5rem; font-size: 0.875rem; min-width: 28px; text-align: center; }

.cart-drawer-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; }
.cart-remove-btn {
    background: none;
    border: none;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    color: var(--gray, var(--text-color-light));
    padding: 0.125rem;
    border-radius: var(--radius-xs);
    transition: color var(--transition-fast, 0.15s);
}
.cart-remove-btn:hover { color: var(--danger, var(--danger)); }
.cart-drawer-item-total { font-size: 0.875rem; font-weight: 600; }

.cart-drawer-footer {
    padding: 0.875rem 1.25rem 1.25rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cart-drawer-total {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
}
.cart-drawer-footer .btn { text-align: center; display: block; }
.cart-drawer-footer .mt-1 { margin-top: 0.25rem; }

/* Toast */
.cart-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--text-color);
    color: var(--on-dark);
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-md, 6px);
    font-size: 0.9375rem;
    z-index: 1200;
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    max-width: 90vw;
}
.cart-toast-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.cart-toast-error   { background: var(--danger, var(--danger)); }

/* ── Product detail page ─────────────────────────────────────── */

.product-detail {
    display: grid;
    gap: 2rem;
    padding: 2rem 0;
}
@media (min-width: 768px) {
    .product-detail { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Gallery */
.product-gallery { display: flex; flex-direction: column; gap: 0.75rem; }
.product-gallery-main img {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: block;
}
.product-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.product-gallery-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm, 4px);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition-fast, 0.15s);
    background: var(--surface-3);
}
.product-gallery-thumb:hover,
.product-gallery-thumb.active { border-color: var(--primary, var(--blue)); }

/* Product info panel */
.product-info { display: flex; flex-direction: column; gap: 1rem; }
.product-info-heading { font-size: 1.625rem; font-weight: 700; line-height: 1.2; margin: 0; }
.product-info-line    { color: var(--gray, var(--text-color-light)); line-height: 1.6; margin: 0; }
.product-info-price   { font-size: 1.5rem; font-weight: 700; color: var(--primary, var(--blue)); }
.product-price-was    { font-size: 1rem; font-weight: 400; color: var(--gray, var(--text-color-light)); text-decoration: line-through; margin-left: 0.5rem; }
.product-info-points  { font-size: 0.875rem; color: var(--gray, var(--text-color-light)); }

/* Variant selectors */
.product-variants       { display: flex; flex-direction: column; gap: 0.75rem; }
.product-variant-group  { display: flex; flex-direction: column; gap: 0.375rem; }
.variant-label          { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-color, var(--text-color-dark)); }
.variant-options        { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.variant-option         { display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; }
.variant-option input   { display: none; }
.variant-option span,
.variant-option { /* label text */
    padding: 0.3125rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.875rem;
    transition: border-color var(--transition-fast, 0.15s), background var(--transition-fast, 0.15s);
}
.variant-option:has(input:checked) {
    border-color: var(--primary, var(--blue));
    background: var(--ring-color);
    color: var(--primary, var(--blue));
    font-weight: 600;
}
.variant-option:hover { border-color: var(--primary, var(--blue)); }

/* Qty selector */
.product-qty-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    width: fit-content;
}
.product-qty-selector .qty-btn {
    background: var(--surface-2);
    border: none;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast, 0.15s);
}
.product-qty-selector .qty-btn:hover { background: var(--border); }
.qty-input {
    width: 48px;
    height: 40px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font-size: 1rem;
    outline: none;
    -moz-appearance: textfield;
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Add to cart action row */
.product-info-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.product-info-actions .btn { flex: 1 1 auto; text-align: center; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }

/* Product tabs */
.product-tabs    { margin-top: 2rem; }
.product-tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--border); }
.product-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    cursor: pointer;
    color: var(--gray, var(--text-color-light));
    transition: color var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s);
    font-weight: 500;
}
.product-tab-btn:hover,
.product-tab-btn.active {
    color: var(--primary, var(--blue));
    border-bottom-color: var(--primary, var(--blue));
}
.product-tab-panel {
    padding: 1.25rem 0;
    line-height: 1.7;
    color: var(--text-color, var(--text-color-dark));
}

/* Related products */
.related-products         { margin-top: 3rem; }
.related-products-heading { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }

/* ── Cart page ────────────────────────────────────────────────── */

.cart-layout {
    display: grid;
    gap: 2rem;
    align-items: start;
    padding: 1.5rem 0;
}
@media (min-width: 900px) {
    .cart-layout { grid-template-columns: 1fr 340px; }
}

.cart-items-list { display: flex; flex-direction: column; gap: 0; }

.cart-line-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--surface-3);
}
.cart-line-item:first-child { border-top: 1px solid var(--surface-3); }
.cart-line-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm, 4px);
    background: var(--surface-3);
}
.cart-line-info { display: flex; flex-direction: column; gap: 0.25rem; }
.cart-line-name  { font-size: 0.9375rem; font-weight: 500; }
.cart-line-price { font-size: 0.875rem; color: var(--gray, var(--text-color-light)); }
.cart-line-controls {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    width: fit-content;
    margin-top: 0.375rem;
}
.cart-line-controls .cart-qty-btn { width: 32px; height: 32px; }
.cart-line-controls .cart-qty-val { font-size: 0.875rem; min-width: 32px; }

.cart-line-right  { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; }
.cart-line-total  { font-size: 0.9375rem; font-weight: 600; }
.cart-line-remove {
    background: none;
    border: none;
    font-size: 1.125rem;
    cursor: pointer;
    color: var(--gray, var(--text-color-light));
    padding: 0.125rem;
    transition: color var(--transition-fast, 0.15s);
}
.cart-line-remove:hover { color: var(--danger, var(--danger)); }

.cart-line-item:empty { display: none; }

/* Order summary card */
.cart-summary-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 6px);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cart-summary-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
    color: var(--gray, var(--text-color-light));
}
.cart-summary-row.total {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-color, var(--text-color-dark));
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}
.cart-summary-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; }
.cart-summary-actions .btn { text-align: center; display: block; }

/* ── Checkout page ───────────────────────────────────────────── */

.checkout-layout {
    display: grid;
    gap: 2rem;
    align-items: start;
    padding: 1.5rem 0;
}
@media (min-width: 900px) {
    .checkout-layout { grid-template-columns: 1fr 360px; }
}

/* Step indicator */
.checkout-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 1.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.checkout-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}
.checkout-step-num {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--border);
    color: var(--gray, var(--text-color-light));
    font-size: 0.8125rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.checkout-step-label { font-size: 0.875rem; color: var(--gray, var(--text-color-light)); }
.checkout-step.active .checkout-step-num  { background: var(--primary, var(--blue)); color: var(--on-primary); }
.checkout-step.active .checkout-step-label { color: var(--text-color, var(--text-color-dark)); font-weight: 600; }
.checkout-step.done .checkout-step-num    { background: var(--success, var(--green)); color: var(--on-success); }
.checkout-step-sep { width: 2rem; height: 2px; background: var(--border); flex-shrink: 0; margin: 0 0.25rem; }

.checkout-form-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 6px);
    padding: 1.5rem;
}
.checkout-form-title { font-size: 1.0625rem; font-weight: 700; margin-bottom: 1rem; }
.checkout-form-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--surface-3);
}
.checkout-form-actions .btn { flex: 1 1 auto; text-align: center; }

/* Checkout summary card (sidebar) */
.checkout-summary-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 6px);
    padding: 1.25rem;
    position: sticky;
    top: 1.5rem;
}
.checkout-summary-title  { font-size: 1rem; font-weight: 700; margin-bottom: 0.875rem; }
.checkout-summary-items  { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.checkout-summary-item   { display: flex; justify-content: space-between; font-size: 0.875rem; gap: 0.5rem; }
.checkout-summary-item-name  { color: var(--text-color, var(--text-color-dark)); line-height: 1.3; }
.checkout-summary-item-price { font-weight: 500; white-space: nowrap; }
.checkout-summary-divider    { border: none; border-top: 1px solid var(--border); margin: 0.5rem 0; }
.checkout-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.0625rem;
    font-weight: 700;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (min-width: 768px) {
    .footer-wrap     { flex-direction: row; }
    .footer-column   { border-bottom: none; border-right: 1px solid rgba(255,255,255,0.08); padding-right: 2rem; }
    .footer-column:last-child { border-right: none; }
    nav ul           { flex-direction: row; }
    nav ul li        { width: auto; }
    .navbar          { flex-direction: row; }
}

/* ── Product management card grid (store_builder) ───────────── */
.product-mgr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding-bottom: 2rem;
}
.product-mgr-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}
.product-mgr-card:hover { box-shadow: var(--shadow-sm); }
.product-mgr-card-img {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--surface-3);
    overflow: hidden;
}
.product-mgr-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-mgr-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--on-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.product-mgr-card-body {
    padding: 0.75rem;
    flex: 1;
}
.product-mgr-card-title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
    line-height: 1.35;
}
.product-mgr-card-meta {
    font-size: 0.8125rem;
    color: var(--text-color-light);
    margin-bottom: 0.375rem;
}
.product-mgr-card-price {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--primary, var(--blue));
}
.product-mgr-card-actions {
    display: flex;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    border-top: 1px solid var(--surface-3);
    background: var(--surface-2);
}
.btn-xs {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-xs);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    background: var(--primary, var(--blue));
    color: var(--on-primary);
    transition: opacity 0.15s;
}
.btn-xs:hover { opacity: 0.85; color: var(--on-primary); }
.btn-xs.btn-outline {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-color);
}
.btn-xs.btn-outline:hover { background: var(--surface-3); color: var(--text-color); }
.btn-xs.btn-danger {
    background: var(--danger);
    color: var(--on-dark);
}
.btn-2xs {
    font-size: 0.68rem;
    font-weight: 500;
    padding: 0.05rem 0.3rem;
    border-radius: var(--radius-xs);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    background: var(--primary, var(--blue));
    color: var(--on-primary);
    transition: opacity 0.15s;
    line-height: 1.5;
}
.btn-2xs:hover { opacity: 0.85; }
.btn-2xs.btn-outline {
    background: transparent;
    border-color: var(--border);
    color: var(--text-color-light);
}
.btn-2xs.btn-outline:hover { background: var(--surface-2); color: var(--text-color); border-color: var(--border-strong); }
.btn-2xs.btn-muted {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-color);
}
.btn-2xs.btn-muted:hover { background: var(--surface-3); color: var(--text-color); }

/* ── Store dashboard stat cards ──────────────────────────────── */
.store-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
    .store-stats { grid-template-columns: repeat(2, 1fr); }
}
.store-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
}
.store-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-color-light);
}
.store-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color-dark);
    line-height: 1.15;
    margin: 0.25rem 0 0.2rem;
}
.store-stat-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Product manager list view ───────────────────────────────── */
.product-mgr-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
}
.product-mgr-list-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.6rem 0.875rem;
    border-bottom: 1px solid var(--surface-3);
}
.product-mgr-list-row:last-child { border-bottom: none; }
.product-mgr-list-row:hover { background: var(--surface-2); }
.product-mgr-list-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.product-mgr-list-name {
    flex: 1;
    min-width: 0;
}
.product-mgr-list-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-mgr-list-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}
.product-mgr-list-price {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color);
    min-width: 60px;
    text-align: right;
    flex-shrink: 0;
}
.product-mgr-list-stock {
    font-size: 0.8rem;
    min-width: 60px;
    text-align: right;
    flex-shrink: 0;
}
.product-mgr-list-actions {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}
.product-mgr-card-stock {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* ── Blog listing ────────────────────────────────────────────── */
.blog-listing-page { padding: 2rem 0; }

.blog-category-heading { margin-bottom: 1.5rem; }
.blog-category-heading h2 { margin: 0.25rem 0 0; font-size: 1.75rem; }
.blog-back-link { font-size: 0.85rem; color: var(--text-color-light); text-decoration: none; }
.blog-back-link:hover { color: var(--text-color-dark); }

.blog-empty { color: var(--text-color-light); font-style: italic; padding: 2rem 0; }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.blog-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.blog-card-image-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; }
.blog-card-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.blog-card:hover .blog-card-image { transform: scale(1.03); }
.blog-card-no-image {
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-card-placeholder { font-size: 2.5rem; opacity: 0.35; }

.blog-card-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; gap: 0.5rem; }

.blog-card-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.blog-cat-badge {
    display: inline-block;
    background: var(--info-bg);
    color: var(--info-accent);
    border-radius: var(--radius-full);
    padding: 0.15rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}
.blog-cat-badge:hover { background: var(--info-bg); }
.blog-reading-time { font-size: 0.78rem; color: var(--text-muted); }

.blog-card-title { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.blog-card-title a { color: var(--text-color-dark); text-decoration: none; }
.blog-card-title a:hover { color: var(--info-accent); }

.blog-card-excerpt { margin: 0; font-size: 0.875rem; color: var(--text-color); line-height: 1.55; flex: 1; }

.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--surface-3);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.blog-author { font-weight: 500; color: var(--text-color-light); }
.blog-date {}

.blog-read-more {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--info-accent);
    text-decoration: none;
    margin-top: 0.25rem;
}
.blog-read-more:hover { text-decoration: underline; }

/* Pagination */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem 0;
}
.blog-page-btn {
    display: inline-block;
    padding: 0.45rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}
.blog-page-btn:hover { background: var(--surface-3); border-color: var(--text-muted); }
.blog-page-info { font-size: 0.875rem; color: var(--text-muted); }

/* ── Blog layout container ───────────────────────────────────── */
.blog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Blog page two-column body (content + sidebar) ──────────── */
.blog-page-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2.5rem;
    padding: 2.5rem 0 3rem;
    align-items: start;
}
@media (max-width: 900px) {
    .blog-page-body { grid-template-columns: 1fr; }
}

/* ── Blog listing page ───────────────────────────────────────── */
.blog-page-content { min-width: 0; }

/* ── Blog hero (main listing page) ──────────────────────────── */
.blog-hero-section {
    background: linear-gradient(135deg, var(--info-text) 0%, var(--info-accent) 100%);
    color: var(--on-primary);
    padding: 4rem 0 3.5rem;
}
.blog-hero { text-align: center; }
.blog-hero-title {
    font-size: 2.75rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}
.blog-hero-sub {
    font-size: 1.15rem;
    opacity: 0.82;
    margin: 0;
}
@media (max-width: 640px) {
    .blog-hero-title { font-size: 2rem; }
}

/* ── Article page header ─────────────────────────────────────── */
.blog-article-header { margin-bottom: 0; }

.blog-article-hero-image {
    width: 100%;
    max-height: 440px;
    overflow: hidden;
    background: var(--border);
}
.blog-article-hero-img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;
}
@media (max-width: 768px) {
    .blog-article-hero-img { height: 240px; }
}

.blog-article-header-body {
    padding: 2rem 0 0;
}

.blog-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.875rem;
}
.blog-breadcrumb a { color: var(--text-color-light); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--info-accent); }
.blog-crumb-sep { color: var(--border-strong); }

.blog-article-title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-color-dark);
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}
@media (max-width: 640px) { .blog-article-title { font-size: 1.65rem; } }

.blog-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.875rem 0 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-color-light);
}
.blog-meta-author { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--text-color); }
.blog-meta-reading { color: var(--text-muted); }

/* ── Article body typography ─────────────────────────────────── */
.blog-article-content { min-width: 0; }
.blog-article-content p         { line-height: 1.8; margin-bottom: 1.25rem; color: var(--text-color); }
.blog-article-content h2        { font-size: 1.5rem; font-weight: 700; margin: 2.25rem 0 0.75rem; color: var(--text-color-dark); }
.blog-article-content h3        { font-size: 1.2rem; font-weight: 600; margin: 1.75rem 0 0.5rem; color: var(--text-color); }
.blog-article-content img       { max-width: 100%; border-radius: var(--radius-md); margin: 1rem 0; display: block; }
.blog-article-content a         { color: var(--info-accent); text-decoration: underline; }
.blog-article-content blockquote {
    border-left: 4px solid var(--info-accent);
    padding: 0.75rem 1.25rem;
    margin: 1.5rem 0;
    background: var(--info-bg);
    color: var(--info-text);
    border-radius: 0 8px 8px 0;
}
.blog-article-content code {
    background: var(--surface-3);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
    font-size: 0.875em;
    font-family: monospace;
}
.blog-article-content pre {
    background: var(--text-color);
    color: var(--border);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 1.5rem 0;
}
.blog-article-content pre code { background: none; color: inherit; padding: 0; }

/* ── Author card ─────────────────────────────────────────────── */
.blog-author-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin: 2.5rem 0 1.5rem;
}
.blog-author-avatar {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--info-accent), var(--info-text));
    color: var(--on-primary);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.blog-author-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.blog-author-name  { font-size: 1rem; font-weight: 700; color: var(--text-color-dark); margin-top: 0.15rem; }

/* ── Article prev/next navigation ────────────────────────────── */
.blog-article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
@media (max-width: 520px) { .blog-article-nav { grid-template-columns: 1fr; } }

.blog-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    background: var(--surface);
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.blog-nav-link:hover { border-color: var(--info-accent); background: var(--info-bg); box-shadow: 0 2px 8px var(--ring-color); }
.blog-nav-next { text-align: right; }
.blog-nav-dir   { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.blog-nav-title { font-size: 0.875rem; font-weight: 500; color: var(--text-color); line-height: 1.35; }

/* ── Related articles section ────────────────────────────────── */
.blog-related-section {
    padding: 3rem 0 3.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.blog-related-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin: 0 0 1.5rem;
}
.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 768px) { .blog-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .blog-related-grid { grid-template-columns: 1fr; } }

.blog-related-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}
.blog-related-card:hover { box-shadow: var(--shadow-sm); }
.blog-related-img-wrap {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--surface-3);
}
.blog-related-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.blog-related-card:hover .blog-related-img-wrap img { transform: scale(1.04); }
.blog-related-no-img { display: flex; align-items: center; justify-content: center; font-size: 2rem; opacity: 0.25; }
.blog-related-body  { padding: 0.875rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.blog-related-item-title { margin: 0; font-size: 0.9rem; line-height: 1.35; }
.blog-related-item-title a { color: var(--text-color-dark); text-decoration: none; font-weight: 600; }
.blog-related-item-title a:hover { color: var(--info-accent); }
.blog-related-date { font-size: 0.72rem; color: var(--text-muted); }

/* ── Sidebar widgets ─────────────────────────────────────────── */
.blog-page-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

.blog-sidebar-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem 1.25rem;
}
.blog-sidebar-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-color);
    margin: 0 0 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid var(--border);
}
.blog-sidebar-empty { font-size: 0.85rem; color: var(--text-muted); font-style: italic; margin: 0; }

/* Category list */
.blog-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.blog-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--surface-3);
}
.blog-cat-item:last-child { border-bottom: none; }
.blog-cat-item a { font-size: 0.875rem; color: var(--text-color); text-decoration: none; }
.blog-cat-item a:hover { color: var(--info-accent); }
.blog-cat-count {
    font-size: 0.7rem;
    background: var(--surface-3);
    color: var(--text-color-light);
    border-radius: var(--radius-full);
    padding: 0.1rem 0.5rem;
    min-width: 1.4rem;
    text-align: center;
    font-weight: 600;
}

/* Recent posts */
.blog-recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.blog-recent-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.blog-recent-thumb {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
    overflow: hidden;
    display: block;
    background: var(--surface-3);
}
.blog-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-recent-text  { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.blog-recent-title {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-recent-title:hover { color: var(--info-accent); }
.blog-recent-date { font-size: 0.72rem; color: var(--text-muted); }

/* ── Stat Grid ───────────────────────────────────────────────────────────────
   Wrapper for a row of stat cards.
   Usage: <div class="stat-grid"> ... <div class="stat-card">...</div> ... </div>
   ─────────────────────────────────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Stat Card ───────────────────────────────────────────────────────────────
   A summary card for counts/metrics.
   Default: neutral white card with dark text — suits dashboards and detail pages.
   Add a colour modifier for bold coloured cards (e.g. a top-level summary row).

   Usage:
     Neutral:  <div class="stat-card">
     Coloured: <div class="stat-card stat-card--blue">
                 <div class="stat-card-num">42</div>
                 <div class="stat-card-label">SITES</div>
               </div>

   Colour modifiers: --blue --dark --green --orange --red --purple
     (each sets a light bg tint with matching text colour)
   Solid modifiers:  --blue-solid --dark-solid --green-solid --orange-solid
     (white text on solid background — for top-level hero stats)

   Theming: override --stat-card-bg / --stat-card-color / --stat-card-num-color per theme.
   ─────────────────────────────────────────────────────────────────────────── */
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    min-width: 130px;
    background: var(--stat-card-bg, var(--surface));
    color: var(--stat-card-color, var(--text-color, var(--text-color)));
    border: 1px solid var(--stat-card-border, var(--border));
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.stat-card-num {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--stat-card-num-color, inherit);
}
.stat-card-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .75;
    color: inherit;
    margin-top: .25rem;
}
.stat-card-sub {
    font-size: .7rem;
    opacity: .6;
    margin-top: .15rem;
}

/* Tinted colour modifiers — light background with coloured number */
.stat-card--blue   { --stat-card-bg: var(--info-bg); --stat-card-num-color: var(--blue);   --stat-card-border: var(--info-bg); }
.stat-card--dark   { --stat-card-bg: var(--surface-3); --stat-card-num-color: var(--dark);   --stat-card-border: var(--border-strong); }
.stat-card--green  { --stat-card-bg: var(--success-bg); --stat-card-num-color: var(--green);  --stat-card-border: var(--success-bg); }
.stat-card--orange { --stat-card-bg: var(--warning-bg); --stat-card-num-color: var(--orange); --stat-card-border: var(--warning-bg); }
.stat-card--red    { --stat-card-bg: var(--danger-bg); --stat-card-num-color: var(--red);    --stat-card-border: var(--danger-bg); }
.stat-card--purple { --stat-card-bg: var(--primary-soft); --stat-card-num-color: var(--primary);       --stat-card-border: var(--primary-soft); }
.stat-card--teal   { --stat-card-bg: var(--success-bg); --stat-card-num-color: var(--teal);       --stat-card-border: var(--info-bg); }

/* Solid colour modifiers — white text on solid background (hero stats) */
.stat-card--blue-solid   { --stat-card-bg: var(--blue);   --stat-card-color: var(--white); --stat-card-border: transparent; }
.stat-card--dark-solid   { --stat-card-bg: var(--dark);   --stat-card-color: var(--white); --stat-card-border: transparent; }
.stat-card--green-solid  { --stat-card-bg: var(--green);  --stat-card-color: var(--white); --stat-card-border: transparent; }
.stat-card--orange-solid { --stat-card-bg: var(--orange); --stat-card-color: var(--white); --stat-card-border: transparent; }
.stat-card--red-solid    { --stat-card-bg: var(--red);    --stat-card-color: var(--white); --stat-card-border: transparent; }
.stat-card--purple-solid { --stat-card-bg: var(--primary);       --stat-card-color: var(--white); --stat-card-border: transparent; }

/* ── Module install card grid ────────────────────────────────────────────────
   Shown when installing a module onto a site (e.g. /stores?edit=new).
   Usage:
     <div class="install-grid">
       <div class="install-card">
         <div class="install-card-name">Site Name</div>
         <div class="fc-muted fs-sm">site_prefix</div>
         <a href="/sites?section=KEY&install=HAS_X" class="btn btn-primary btn-sm">Install X</a>
       </div>
     </div>
   ─────────────────────────────────────────────────────────────────────────── */
.install-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.install-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.install-card-name { font-weight: 600; font-size: 0.95rem; }

/* ── List utils: sortable columns + live search ──────────────────────────── */

/* Inline form for widget-titlebar controls (search + clear button + status pills, etc.).
   Resets browser <form> margin and lays children out as a centred flex row. */
.widget-titlebar-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    flex-wrap: nowrap;
}

/* Right-side action slot inside .widget-titlebar. Use for view-toggles, "+ New"
   buttons, or other compact controls. The titlebar's `justify-content:space-between`
   pushes this to the right edge automatically. */
.widget-titlebar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Middle slot for a centred search input. Flex-grows to fill the space between
   title and actions. */
.widget-titlebar-search {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
    margin: 0 1rem;
}

/* Segmented view-mode toggle (grid/list, etc). Place inside .widget-titlebar-actions. */
.view-toggle {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    height: 2.4rem;
}
.view-toggle button {
    padding: 0 1rem;
    border: none;
    background: var(--surface);
    color: var(--text-muted, var(--text-color-light));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-width: 2.75rem;
    transition: background 0.12s, color 0.12s;
}
.view-toggle button + button { border-left: 1px solid var(--border-strong); }
.view-toggle button:hover    { background: var(--surface-3); color: var(--text-color, var(--text-color)); }
.view-toggle button.active   {
    background: var(--primary, var(--primary));
    color: var(--on-primary);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}
.view-toggle button svg      { display: block; }

/* Small-variant of `.form-control` — drops the hardcoded 44px height and matches
   `.list-search` sizing so selects/inputs can sit inline in a `.widget-titlebar-form`
   or any compact toolbar row.
   Specificity guard: `.form-control.form-control-sm` (0,2,0) beats `.form-control`
   (0,1,0) regardless of source order — users.css loads after components.css and
   would otherwise re-win at equal specificity. */
.form-control.form-control-sm,
.form-control-sm {
    height: auto;
    padding: 0.3rem 0.55rem;
    font-size: 0.82rem;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--border-strong);
    line-height: 1.4;
}
/* Native <select> chevron needs ~1.75rem on the right or it overlaps text. */
select.form-control-sm,
select.form-control.form-control-sm {
    padding-right: 1.75rem;
}

/* Search input — lives inside .widget-titlebar via .widget-titlebar-form.
   Class specificity (0,1,0) wins over the bare `input` rule (0,0,1) so the
   padding/font-size do override the framework defaults without !important. */
.list-search {
    flex-shrink: 0;
    width: 200px;
    height: 2.4rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.88rem;
    font-family: inherit;
    background: var(--surface-2);
    color: var(--text-color, var(--text-color-dark));
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.list-search:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--primary, var(--primary));
    box-shadow: 0 0 0 2px var(--ring-color);
}

/* Sortable column headers */
.sortable-col {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.sortable-col:hover { background: rgba(0,0,0,0.06) !important; }
.sortable-col::after          { content: ' ⇅'; opacity: 0.3;  font-size: 0.7em; font-weight: 400; }
.sortable-col.sort-asc::after  { content: ' ↑'; opacity: 0.9; }
.sortable-col.sort-desc::after { content: ' ↓'; opacity: 0.9; }

/* ── Widget d-table standardisation ─────────────────────────────────────── */
.widget .d-table         { width: 100%; }
.widget .d-table-cell    { vertical-align: middle; padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--surface-3); font-size: 0.84rem; }
.widget .d-table-row.bg-gray .d-table-cell {
    background: var(--surface-2);
    color: var(--text-color-dark, var(--text-color-dark));
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 2px solid var(--border);
}
.widget .d-table-row:not(.bg-gray):hover .d-table-cell { background: var(--surface-2); }
.widget .d-table-row.current .d-table-cell,
.widget .d-table-row.bg-highlight .d-table-cell { background: var(--ring-color); }
/* Active/current list row: highlight comes ONLY from the cell ring-tint above.
   Stop the generic .bg-highlight utility (background:var(--highlight)) from
   painting the whole row — --highlight is a solid accent (white in Mono Dark)
   → unreadable row. Widget-scoped so the utility still works elsewhere. */
.widget .d-table-row.current,
.widget .d-table-row.bg-highlight { background-color: transparent; }

/* ── List pagination footer ──────────────────────────────────────────────── */
/* Lives below the .widget for any server-paginated list. Pairs with the
   `q/sort/dir/page` query-string contract documented in
   reference_list_search_sort_paginate.md. */
.list-pagination          { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.75rem 0.25rem; flex-wrap:wrap; }
.list-pagination-range    { color: var(--text-muted, var(--text-color-light)); font-size: 0.83rem; }
.list-pagination-pages    { display:flex; gap:0.25rem; align-items:center; flex-wrap:wrap; }
.list-page                { padding:0.3rem 0.6rem; border:1px solid var(--border-color, var(--border)); border-radius:0.35rem; color: var(--text-color, var(--text-color)); text-decoration:none; font-size:0.82rem; background:var(--surface); }
.list-page:hover          { border-color: var(--primary, var(--primary)); color: var(--primary, var(--primary)); }
.list-page--current       { background: var(--primary, var(--primary)); border-color: var(--primary, var(--primary)); color:var(--on-primary) !important; }
.list-page--disabled      { opacity: 0.4; pointer-events: none; }
.list-page-gap            { color: var(--text-muted, var(--text-color-light)); padding: 0 0.25rem; font-size: 0.82rem; }
.list-result-count        { color: var(--text-muted, var(--text-color-light)); font-size: 0.82rem; margin-left:auto; }

/* ── Page header companions ──────────────────────────────────────────────── */
/* `.page-header` (already defined above) is the flex container. These are the
   slots inside it. Pattern: <div class="page-header">
       <div><h2 class="page-header-title">…</h2><p class="page-header-subtitle">…</p></div>
       <div class="page-header-actions">…buttons…</div>
   </div> */
.page-header-title    { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.2rem; color: var(--text-color, var(--text-color-dark)); }
.page-header-title .fa { color: var(--primary, var(--primary)); margin-right: 0.35rem; }
.page-header-subtitle { color: var(--text-muted, var(--text-color-light)); font-size: 0.88rem; margin: 0; }
.page-header-actions  { display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: center; }

/* ── Filter pill bar ─────────────────────────────────────────────────────── */
/* Horizontal chip row for type/category filters. Each pill is an anchor.
   Pattern: <div class="filter-bar">
       <a class="filter-pill active" href="…">All</a>
       <a class="filter-pill" href="…">Type A</a>
   </div> */
.filter-bar  { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0; }
.filter-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.8rem; border-radius: var(--radius-full); background: var(--surface, var(--surface-3)); color: var(--text-muted, var(--text-color-light)); border: 1px solid var(--border-color, var(--border)); text-decoration: none; font-size: 0.84rem; font-weight: 500; transition: all 0.15s; }
.filter-pill:hover  { background: var(--border-color, var(--border)); color: var(--text-color, var(--text-color-dark)); }
.filter-pill.active { background: var(--primary, var(--primary)); color: var(--on-primary); border-color: transparent; }

/* ── Status badge (pill) ─────────────────────────────────────────────────── */
/* Coloured chip for status enums (Pending / Running / Done / Failed / Info).
   Use a state-modifier alongside `.status-badge`. */
.status-badge          { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.status-badge--pending { background: var(--surface, var(--surface-3)); color: var(--text-muted, var(--text-color-light)); }
.status-badge--claimed { background: var(--info-bg); color: var(--info-accent); }
.status-badge--running { background: var(--warning-bg); color: var(--warning-text); }
.status-badge--done    { background: var(--success-bg); color: var(--success-text); }
.status-badge--failed  { background: var(--danger-bg); color: var(--danger-text); }
.status-badge--info    { background: var(--info-bg); color: var(--info-accent); }
.status-badge--warning { background: var(--warning-bg); color: var(--warning-text); }

/* ── List empty state ────────────────────────────────────────────────────── */
/* Centred icon + message panel for "no rows for this filter". Drop in place
   of the `.d-table` when `$rows` is empty. */
.list-empty          { text-align: center; padding: 4rem 1rem; color: var(--text-muted, var(--text-color-light)); }
.list-empty .fa      { color: var(--green); }
.list-empty p        { margin-top: 0.75rem; font-size: 1rem; }

/* ── d-table row + cell modifiers ────────────────────────────────────────── */
/* Pulse highlight for in-progress rows (queue runners, etc.). */
.widget .d-table-row--running .d-table-cell { background: var(--warning-bg); animation: row-running-pulse 2s ease-in-out infinite; }
@keyframes row-running-pulse { 0%,100% { background: var(--warning-bg); } 50% { background: var(--ring-color); } }
/* Cell that should grow to fill the remaining row width while truncating its
   content with an ellipsis. Pair with siblings that are `nowrap`. */
.d-table-cell--fill { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Mailservice page layout ─────────────────────────────────── */
.mailservice-grid {
    align-items: flex-start;
    gap: 1rem;
    max-width: 100%;
    overflow: hidden;
}
.mailservice-col {
    flex: 1 1 340px;
    min-width: 0;
    max-width: calc(50% - 0.5rem);
    gap: 0.75rem;
    overflow: hidden;
}
.mailservice-col .card {
    width: 100%;
    margin: 0;          /* .card defaults to 0.75rem margin which adds 24px past the col width — use the col's gap instead */
    box-sizing: border-box;
    overflow: hidden;
}

/* Definition-list grid — <dl> styled as a two-column label/value grid for
   stacked-row data in cards. Reusable anywhere label/value pairs need to
   stack without a wide table. */
.dl-grid {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 0.75rem;
    align-items: baseline;
}
.dl-grid dt {
    margin: 0;
    color: var(--color-muted, var(--text-color-light));
    font-size: 0.8125rem;
    font-weight: 600;
}
.dl-grid dd {
    margin: 0;
    min-width: 0;
}
.truncate-cell {
    max-width: 0;
    width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.label-cell {
    color: var(--color-muted, var(--text-color-light));
    font-size: 0.8125rem;
    white-space: nowrap;
    padding-right: 1rem;
    vertical-align: top;
    padding-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   GENERALISED COMPONENT LIBRARY
   Named by UI pattern, not by originating module.
   ═══════════════════════════════════════════════════════════════ */

/* ── Card extensions ─────────────────────────────────────────── */
/* .card and .card-body already exist above */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-color-dark);
    flex-shrink: 0;
}
.card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
    flex-shrink: 0;
}
/* No-margin variant for when cards are stacked without gaps */
.card.card-flush { margin: 0; }
/* Compact variant */
.card-body.card-body-sm { padding: 0.65rem 0.875rem; }

/* ── Page header ─────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color-dark);
    line-height: 1.25;
}
.page-subtitle {
    font-size: 0.875rem;
    color: var(--text-color-light);
    margin-top: 0.2rem;
}

/* ── Layout systems ───────────────────────────────────────────── */
/* Sidebar with fixed left column */
.sidebar-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start;
}
/* Narrow sidebar (200px) */
.sidebar-layout-narrow {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    align-items: start;
}
/* Main column capped at 700px, cards fill its width.
   Side column fills the rest of the row; inside it, cards lay out as CSS multi-column
   with 300px sub-columns — so when the side has lots of horizontal space, the cards
   reflow into multiple sub-columns and the side container stays short. */
.compose-layout {
    display: flex;
    gap: 1.5rem;
    align-items: start;
    flex-wrap: wrap;
}
.dashboard-main {
    flex: 0 1 700px;
    max-width: 700px;
    min-width: 0;
    display: block;       /* not flex — CSS multi-column can't apply to flex containers */
    column-gap: 1rem;
}
.dashboard-side {
    flex: 1 1 300px;
    min-width: 0;
    display: block;
    columns: 300px auto;
    column-gap: 1rem;
}
.dashboard-main > .card {
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem;
    break-inside: avoid;
    display: block;       /* same flex-can't-fragment reason as side */
}
.dashboard-side > .card {
    break-inside: avoid;
    width: 300px;
    max-width: 100%;
    margin: 0 0 1rem;
    display: block;
}
/* Two equal columns */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
/* Four-column cards */
.four-column-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
/* Auto-fill card grid (replaces ad-hoc auto-fill grids). Card siblings inside
   it get the margin stripped — the grid `gap` handles spacing. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.card-grid-sm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
.card-grid > .card,
.card-grid-sm > .card { margin: 0; }

/* ── Card tile extensions (for grids of visual cards) ─────────── */
/* Top image area for a tile card. Wrap an <img> inside; the image gets
   cover-fit so the tile maintains a uniform aspect ratio. */
.card-image {
    position: relative;
    width: 100%;
    height: 140px;
    background: var(--surface-3);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-image-empty {
    color: var(--text-muted, var(--text-muted));
    font-style: italic;
    font-size: 0.85rem;
}
/* Overlay badge on the top-right of a .card-image — use with .status-badge. */
.card-image-badge {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
}
/* Small meta line under .card-title for subtitle/secondary info. */
.card-meta {
    color: var(--text-muted, var(--text-color-light));
    font-size: 0.8rem;
    padding: 0 1rem 0.5rem;
}
/* Stat grid (horizontal scroll on mobile) */
.stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.stats-row .stat-card { flex: 1 1 140px; }
/* Sidebar sticky helper */
.sidebar-sticky {
    position: sticky;
    top: 1rem;
}
@media (max-width: 768px) {
    .sidebar-layout,
    .sidebar-layout-narrow,
    .compose-layout,
    .two-column-layout,
    .four-column-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Vertical navigation ──────────────────────────────────────── */
.nav-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.nav-vertical .nav-item-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}
.nav-vertical .nav-item-link:hover {
    background: var(--light);
    color: var(--text-color-dark);
}
.nav-vertical .nav-item-link.active {
    background: var(--info-bg);
    color: var(--info-text);
    font-weight: 600;
}

/* ── Table controls bar ───────────────────────────────────────── */
/* Replaces .nx-controls across all modules */
.table-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
/* Extends .list-search — wider variant for standalone table search */
.search-input-table {
    flex-grow: 1;
    min-width: 180px;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-family: inherit;
    background: var(--surface-2);
    color: var(--text-color);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input-table:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--ring-color);
}
/* Compact select for table filtering */
.select-table {
    padding: 0.3rem 2rem 0.3rem 0.65rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-family: inherit;
    background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z'/%3E%3C/svg%3E") no-repeat right 0.4rem center / 12px;
    color: var(--text-color);
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.select-table:hover,
.select-table:focus { border-color: var(--primary); outline: none; }

/* ── Status & priority badges ─────────────────────────────────── */
/* Generic dot-style status indicator */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.status-dot.dot-success { background: var(--success); }
.status-dot.dot-warning { background: var(--warning); }
.status-dot.dot-danger  { background: var(--danger); }
.status-dot.dot-info    { background: var(--info); }
.status-dot.dot-gray    { background: var(--text-muted); }

/* Priority badges (support tickets, tasks) */
.badge-priority-low      { background: var(--surface-3); color: var(--text-color-light); }
.badge-priority-medium   { background: var(--info-bg); color: var(--info-text); }
.badge-priority-high     { background: var(--warning-bg); color: var(--warning-text); }
.badge-priority-critical { background: var(--danger-bg); color: var(--danger-text); }

/* Ticket / item status badges */
.badge-status-open     { background: var(--danger-bg); color: var(--danger-text); }
.badge-status-pending  { background: var(--warning-bg); color: var(--warning-text); }
.badge-status-active   { background: var(--info-bg); color: var(--info-text); }
.badge-status-resolved { background: var(--success-bg); color: var(--success-text); }
.badge-status-closed   { background: var(--surface-3); color: var(--text-color-light); }
.badge-status-info     { background: var(--primary-soft); color: var(--primary-strong); }

/* Post / content status badges */
.badge-post-draft     { background: var(--surface-3); color: var(--text-color-light); }
.badge-post-scheduled { background: var(--warning-bg); color: var(--warning-text); }
.badge-post-published { background: var(--success-bg); color: var(--success-text); }
.badge-post-failed    { background: var(--danger-bg); color: var(--danger-text); }

/* Payment / payout status */
.badge-pay-pending   { background: var(--warning-bg); color: var(--warning-text); }
.badge-pay-approved  { background: var(--info-bg); color: var(--info-text); }
.badge-pay-paid      { background: var(--success-bg); color: var(--success-text); }
.badge-pay-rejected  { background: var(--danger-bg); color: var(--danger-text); }
.badge-pay-cancelled { background: var(--surface-3); color: var(--text-color-light); }

/* ── Type badges (workspace, listing, content types) ─────────── */
.type-badge {
    display: inline-block;
    padding: 0.1em 0.5em;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.type-web      { background: var(--info-bg); color: var(--info-text); }
.type-course   { background: var(--warning-bg); color: var(--warning-text); }
.type-smm      { background: var(--danger-bg); color: var(--danger-text); }
.type-product  { background: var(--success-bg); color: var(--success-text); }
.type-blog     { background: var(--primary-soft); color: var(--primary-strong); }
.type-media    { background: var(--warning-bg); color: var(--warning-text); }
.type-webinar  { background: var(--info-bg); color: var(--info-text); }
.type-service  { background: var(--primary-soft); color: var(--primary-strong); }
.type-wanted   { background: var(--warning-bg); color: var(--warning-text); }
.type-selling  { background: var(--info-bg); color: var(--info-text); }

/* ── Platform badges (social platforms) ──────────────────────── */
.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1em 0.45em;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    background: var(--surface-3);
    color: var(--text-color);
}

/* ── Chips and filter pills ───────────────────────────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-color);
    background: var(--surface);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}
.chip:hover {
    background: var(--surface-3);
    border-color: var(--text-muted);
}
.chip.active {
    background: var(--info-bg);
    border-color: var(--info-bg);
    color: var(--info-text);
}
/* Filter pill group */
.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-color-light);
    gap: 0.5rem;
}
.empty-state-icon {
    font-size: 2.5rem;
    opacity: 0.4;
    margin-bottom: 0.5rem;
}
.empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}
.empty-state-text {
    font-size: 0.875rem;
    max-width: 24rem;
}

/* ── Message / chat components ────────────────────────────────── */
.message-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}
.message-bubble {
    max-width: 78%;
    padding: 0.6rem 0.875rem;
    border-radius: var(--radius-lg);
    font-size: 0.9rem;
    line-height: 1.5;
    word-break: break-word;
}
.message-bubble.incoming {
    background: var(--surface-3);
    color: var(--text-color);
    align-self: flex-start;
    border-bottom-left-radius: var(--radius-sm);
}
.message-bubble.outgoing {
    background: var(--info-bg);
    color: var(--info-text);
    align-self: flex-end;
    border-bottom-right-radius: var(--radius-sm);
}
.message-meta {
    font-size: 0.72rem;
    color: var(--text-color-light);
    margin-top: 0.2rem;
}
/* Typing indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.5rem 0.875rem;
    align-self: flex-start;
}
.typing-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--text-muted);
    animation: typing-bounce 0.9s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes typing-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}

/* A card as a disclosure: <details class="card"><summary class="card-header">… */
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: '\25BE'; margin-left: auto; color: var(--text-muted); transition: transform var(--transition-fast); }
details.card[open] > summary::after { transform: rotate(180deg); }

/* ── Help pages (zone-neutral: the help centre is public AND members') ── */
/* Moved from users.css 2026-09-15 — /help renders in the PUBLIC chrome for visitors. */
.help-cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; margin:1rem 0; }
.help-cat-card { border:1px solid var(--border); border-radius:var(--radius-md); padding:1.25rem 1rem; text-align:center; text-decoration:none; color:inherit; display:block; transition:box-shadow .15s,border-color .15s; }
.help-cat-card:hover { box-shadow: var(--shadow-xs); border-color:var(--primary); color:inherit; }
.help-cat-icon { font-size:1.75rem; margin-bottom:.5rem; }
.help-cat-count { font-size:.75rem; color:var(--text-color-light); margin-top:.25rem; }
.help-article-list { display:flex; flex-direction:column; gap:0; }
.help-article-item { padding:.75rem 0; border-bottom:1px solid var(--surface-3); }
.help-article-item:last-child { border-bottom:none; }
.help-article-body { line-height:1.7; }
.help-search-wrap { position:relative; margin-bottom:1.5rem; }
.help-search-results { position:absolute; top:100%; left:0; right:0; background:var(--surface); border:1px solid var(--border); border-top:none; border-radius:0 0 6px 6px; z-index:50; max-height:280px; overflow-y:auto; }
.help-search-result-item { display:block; color:inherit; text-decoration:none; padding:.6rem 1rem; border-bottom:1px solid var(--surface-3); cursor:pointer; font-size:.9rem; }
.help-search-result-item:hover { background:var(--surface-2); }
.helpful-vote { display:flex; align-items:center; gap:.75rem; margin-top:1.5rem; padding:1rem 1.25rem; background:var(--surface-2); border-radius:var(--radius-md); border:1px solid var(--border); }
.vote-btn { padding:.35rem .9rem; border-radius:var(--radius-xl); border:1px solid var(--border-strong); cursor:pointer; font-size:.85rem; background:var(--surface); transition:all .15s; }
.vote-btn.yes:hover,.vote-btn.yes.voted { background:var(--success-bg); border-color:var(--success-text); color:var(--success-text); }
.vote-btn.no:hover,.vote-btn.no.voted { background:var(--danger-bg); border-color:var(--danger-text); color:var(--danger-text); }

/* A page body with the platform gutter and a reading width, whatever the zone:
   <content class="content-inset">. users.css already pads <content>; public.css does not. */
.content-inset { display: block; box-sizing: border-box; width: 100%; max-width: 1180px; margin: 0 auto; padding: 1rem; }

/* ── Slide panel (side drawer) ────────────────────────────────── */
/* Generic right-side panel. Open with .slide-panel-open class. */
.slide-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,0.4);
    z-index: 1049;
    display: none;
}
.slide-panel-overlay.visible { display: block; }
.slide-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(520px, 96vw);
    height: 100dvh;
    height: 100vh;
    background: var(--surface);
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.slide-panel.open { transform: translateX(0); }
.slide-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.slide-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}
.slide-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* ── Floating action button ───────────────────────────────────── */
.fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--bg-gradient);
    color: var(--on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    z-index: 9000;
    border: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.fab:hover { transform: scale(1.08); box-shadow: var(--shadow-xl); }
.fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--danger);
    color: var(--on-danger);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Drag and drop ────────────────────────────────────────────── */
.drag-handle {
    cursor: grab;
    color: var(--text-muted);
    flex-shrink: 0;
    line-height: 1;
}
.drag-handle:active { cursor: grabbing; }
.drag-target { transition: background var(--transition-fast), border-color var(--transition-fast); }
.drag-target.drag-over {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--ring-color);
}
.dragging { opacity: 0.45; }

/* ── Inline editable field ────────────────────────────────────── */
.editable-title {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.35rem;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: inherit;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    min-width: 6rem;
}
.editable-title:focus {
    outline: none;
    background: var(--info-bg);
    border-color: var(--primary);
}

/* ── List items (generic row / tree) ──────────────────────────── */
.list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid var(--surface-3);
    transition: background var(--transition-fast);
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--surface-2); }
.list-item.active { background: var(--info-bg); }
.item-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1;
}
.item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-color-light);
}
/* Compact mini list */
.mini-list { display: flex; flex-direction: column; }
.mini-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--surface-3);
    font-size: 0.875rem;
}
.mini-list-item:last-child { border-bottom: none; }

/* ── Action bar (inline controls above/below a table) ─────────── */
.action-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem 0.875rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

/* ── AI feature highlight bar ─────────────────────────────────── */
.ai-feature-bar {
    background: var(--info-bg);
    border: 1px solid var(--info-bg);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.875rem;
    font-size: 0.875rem;
    color: var(--info-text);
}

/* ── Input with attached button ───────────────────────────────── */
.input-button-group {
    display: flex;
    align-items: center;
}
.input-button-group input {
    flex: 1;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-button-group button,
.input-button-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex-shrink: 0;
}

/* ── Referral link display box ────────────────────────────────── */
.reflink-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-color-distinct);
    border: 1px solid var(--border-color, var(--border));
    border-radius: var(--radius-md);
    padding: 0.625rem 0.75rem;
}
.reflink-url {
    flex: 1;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-color);
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reflink-copy {
    flex-shrink: 0;
}

/* ── Character / text counter ─────────────────────────────────── */
.text-counter {
    font-size: 0.75rem;
    color: var(--text-color-light);
    text-align: right;
}
.text-counter.text-counter-warn { color: var(--warning); }
.text-counter.text-counter-over { color: var(--danger); font-weight: 600; }

/* ── Info strip (summary bar above content) ────────────────────── */
.info-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}
.info-strip-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.info-strip-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color-light);
}
.info-strip-value {
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--text-color-dark);
}

/* ── Calendar component ────────────────────────────────────────── */
.calendar-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.calendar-title {
    font-size: 0.95rem;
    font-weight: 600;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.calendar-dow {
    background: var(--surface-2);
    padding: 0.35rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color-light);
    border-bottom: 1px solid var(--border);
}
.calendar-cell {
    min-height: 90px;
    padding: 0.25rem;
    border-right: 1px solid var(--surface-3);
    border-bottom: 1px solid var(--surface-3);
    vertical-align: top;
    overflow: hidden;
}
.calendar-cell.empty    { background: var(--surface-2); }
.calendar-cell.today    { background: var(--info-bg); }
.calendar-day-number    { font-size: 0.75rem; font-weight: 600; color: var(--text-color-dark); padding: 0.1rem 0.2rem; }
.calendar-event {
    font-size: 0.7rem;
    padding: 0.05rem 0.3rem;
    border-radius: var(--radius-xs);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--info-bg);
    color: var(--info-text);
}
.calendar-event.event-published { background: var(--success-bg); color: var(--success-text); }
.calendar-event.event-scheduled { background: var(--warning-bg); color: var(--warning-text); }
.calendar-event.event-draft     { background: var(--surface-3); color: var(--text-color-light); }
.calendar-event.event-failed    { background: var(--danger-bg); color: var(--danger-text); }
.calendar-overflow              { font-size: 0.68rem; color: var(--text-color-light); padding: 0.05rem 0.2rem; }

/* ── Avatar ───────────────────────────────────────────────────── */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; }
.avatar-lg { width: 56px; height: 56px; }
.avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 1.1rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* ── Horizontal stat card (icon on left, value+label right) ────── */
/* Extends .stat-card; add .stat-card-h for horizontal layout */
.stat-card-h {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    text-align: left;
}
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Quick action button-card ─────────────────────────────────── */
.button-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    text-align: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color);
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration: none;
}
.button-card:hover {
    background: var(--info-bg);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    color: var(--primary);
}

/* Show dropdown when .show class is toggled (paired with app.js dropdown-toggle) */
.dropdown-menu.show, .dropdown-list.show {
    display: block;
}

/* ── Compact Quick Actions in the narrow side column (2-up) ───── */
.dashboard-side .card-grid-sm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
.dashboard-side .button-card {
    padding: 0.5rem 0.4rem;
    font-size: 0.75rem;
    gap: 0.2rem;
}
.dashboard-side .button-card .fa {
    font-size: 1rem;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Popout — sideways drawer for a button row, anchored beside a trigger.
 * Markup: <details class="popout"><summary>label</summary>
 *           <div class="popout-pane">…buttons…</div>
 *         </details>
 * ────────────────────────────────────────────────────────────────────────── */
.popout { position: relative; }
.popout > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.popout > summary::-webkit-details-marker { display: none; }
.popout > summary:focus,
.popout > summary:focus-visible { outline: none; }
.popout > summary::before {
    content: '◀ ';
}
.popout[open] > summary::before {
    content: '▶ ';
}
.popout-pane {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: 4px;
    z-index: 100;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
}
/* Below-summary variant — drop the pane under its trigger instead of to the
   left. Used by inline form widgets where the default right-side position
   would clip off the viewport. */
.popout-pane-below {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: auto;
    transform: none;
    z-index: 100;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-sm);
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
}

/* Sandboxed email body iframe (used by /email to isolate inbound HTML styles). */
iframe.email-body-frame {
    width: 100%;
    min-height: 300px;
    border: 0;
    background: var(--surface);
}

/* ── Card edit form ───────────────────────────────────────────────
   Standard layout for builder edit forms (e.g. /sites?edit, /settings?edit):
   .page-header (title left / .page-header-actions right, wraps) for the action
   box, then .form-grid of .card columns, each holding a .form-fields stack of
   .form-field (label + .form-control) blocks. See reference_pattern_card_edit_form. */
.form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: stretch;
}
.form-grid > .card { flex: 1 1 380px; }

.form-fields { display: flex; flex-direction: column; gap: 0.75rem; }

.form-field { display: flex; flex-direction: column; }
.form-field > label,
.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-color, var(--text-color));
}
.form-field > label .req { color: var(--danger, var(--danger)); }
.form-field-help { font-size: 0.8125rem; color: var(--text-color-light, var(--text-color-light)); margin-top: 0.25rem; }

/* ── Tips / hint box (legacy showhint() engine in tips.js — folded from tips.css) ── */
#hintbox {
    position: absolute;
    top: 0;
    width: 200px;
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    color: var(--text-color);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-family-sans-serif);
    font-size: 0.8125rem;
    line-height: 1.5;
    z-index: 100;
    visibility: hidden;
}
.hintanchor { font-weight: 600; color: var(--link); cursor: help; }
.reqd, .reqd_ta { font-weight: 700; color: var(--danger); }

/* ---------------------------------------------------
    IMAGE SELECTOR + PICKER MODAL (framework component)
----------------------------------------------------- */

.image-selector-preview {
    width: 80px;
    height: 80px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.image-selector-preview:hover {
    border-color: var(--primary);
    transform: scale(1.03);
}
.image-selector-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-selector-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: var(--on-primary);
    text-align: center;
    padding: 4px;
    font-size: 11px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.image-selector-preview:hover .image-selector-overlay {
    opacity: 1;
}
.image-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.image-modal-content {
    background: var(--surface);
    margin: 5% auto;
    width: 90%;
    max-width: 700px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.image-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--bg-gradient);
    color: var(--on-primary);
}
.image-modal-header h3 { margin: 0; color: var(--on-primary); }
.image-modal-close {
    font-size: 28px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}
.image-modal-close:hover { opacity: 1; }
.image-modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}
.image-grid-item {
    aspect-ratio: 1;
    border: 3px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.image-grid-item:hover {
    border-color: var(--primary);
    transform: scale(1.05);
}
.image-grid-item.selected {
    border-color: var(--success);
}
.image-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-loading,
.image-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-color);
}

.image-modal-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 16px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.image-modal-upload.dragover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.image-upload-status {
    font-size: 0.875rem;
    color: var(--text-color);
    opacity: 0.75;
}

/* ---------------------------------------------------
    FILE UPLOAD WIDGET (framework component)
    Embedded uploader: dropzone + preview + progress +
    result list. Theme-tokenised; reuses framework .btn.
    (relocated from builder/section_image_upload.php)
----------------------------------------------------- */
.upload-widget {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 40px;
    max-width: 500px;
    width: 100%;
    margin: 20px auto;
}
.upload-widget h1 {
    color: var(--text-color-dark);
    margin-bottom: 10px;
    font-size: 28px;
}
.upload-widget .subtitle {
    color: var(--text-color-light);
    margin-bottom: 30px;
    font-size: 14px;
}

.upload-area {
    border: 2px dashed var(--primary);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.upload-area:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.upload-area.dragover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    transform: scale(1.02);
}
.upload-icon { font-size: 48px; margin-bottom: 15px; }
.upload-text { color: var(--primary); font-weight: 600; margin-bottom: 5px; }
.upload-hint { color: var(--text-muted); font-size: 13px; }

.file-info {
    margin-top: 20px;
    padding: 15px;
    background: color-mix(in srgb, var(--primary) 4%, transparent);
    border-radius: var(--radius-md);
    display: none;
}
.file-info.show { display: block; }
.preview-container { margin-bottom: 15px; text-align: center; }
.preview-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.preview-icon { font-size: 64px; margin: 20px 0; }
.preview-document {
    background: var(--surface);
    padding: 30px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.preview-text {
    font-size: 12px;
    color: var(--text-color-light);
    margin-top: 10px;
    text-align: left;
    font-family: monospace;
    white-space: pre-wrap;
}
.file-name { color: var(--text-color-dark); font-weight: 600; margin-bottom: 5px; }
.file-size { color: var(--text-color-light); font-size: 13px; }

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-top: 15px;
    display: none;
}
.progress-bar.show { display: block; }
.progress-fill {
    height: 100%;
    background: var(--bg-gradient);
    width: 0%;
    transition: width var(--transition-fast);
}

.upload-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: var(--radius-md);
    display: none;
    animation: slideIn 0.3s ease;
}
.upload-message.show { display: block; }
.upload-message.success {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-bg);
}
.upload-message.error {
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid var(--danger-bg);
}
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.uploaded-files {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
}
.uploaded-files h3 {
    color: var(--text-color-dark);
    margin-bottom: 15px;
    font-size: 18px;
}
.uploaded-file {
    padding: 12px;
    background: color-mix(in srgb, var(--primary) 4%, transparent);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}
.uploaded-file-thumb {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    box-shadow: var(--shadow-xs);
    flex-shrink: 0;
}
.uploaded-file-info { flex: 1; min-width: 0; }
.uploaded-file-name { color: var(--primary); font-weight: 500; font-size: 13px; word-break: break-all; }
.uploaded-file-size { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

/* ---------------------------------------------------
    STEPPER (framework component) — numbered step indicator for
    multi-step flows (wizards/builders). State via .is-active /
    .is-done / .is-locked on .stepper-step. Pairs with stepper.js.
----------------------------------------------------- */
.stepper { display: flex; align-items: center; gap: 0; margin-bottom: 2rem; }
.stepper-step { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 80px; cursor: pointer; user-select: none; }
.stepper-step.is-locked { cursor: default; opacity: 0.45; pointer-events: none; }
.stepper-num { width: 36px; height: 36px; border-radius: 50%; background: var(--border); color: var(--text-color-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; transition: var(--transition-fast); }
.stepper-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.stepper-step:not(.is-locked):hover .stepper-num { filter: brightness(0.92); }
.stepper-step.is-active .stepper-num { background: var(--primary); color: var(--on-primary); }
.stepper-step.is-active .stepper-label { color: var(--primary); font-weight: 600; }
.stepper-step.is-done .stepper-num { background: var(--success); color: var(--on-success); }
.stepper-step.is-done .stepper-label { color: var(--success); }
.stepper-connector { flex: 1; height: 2px; background: var(--border); margin: 0 0.25rem 1.4rem; transition: var(--transition-fast); }
.stepper-connector.is-done { background: var(--success); }

/* Multi-step panel: only the .is-active one shows. */
.wizard-panel { display: none; }
.wizard-panel.is-active { display: block; }
.wizard-panel-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }

/* Inline spinner (theme ring). Add .spinner-sm for a 12px variant. */
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-strong); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; vertical-align: middle; }
.spinner-sm { width: 12px; height: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Small muted help text under a form field. */
.field-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Repeatable field list — add/remove rows (goals, rules, examples, knowledge…).
   Pairs with the repeatList() helper (data-repeat) in the shared JS. */
.repeat-list { display: flex; flex-direction: column; gap: 0.5rem; }
.repeat-item { display: flex; align-items: flex-start; gap: 0.5rem; }
.repeat-item .form-control { flex: 1; }
.repeat-remove { flex-shrink: 0; }
.repeat-add { align-self: flex-start; margin-top: 0.25rem; }

/* Key/value info box (e.g. an API-key / connection summary). */
.kv-box { background: color-mix(in srgb, var(--primary) 4%, transparent); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.75rem 1rem; }
.kv-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.kv-label { color: var(--text-color-light); min-width: 90px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kv-val { color: var(--text-color); font-weight: 500; }
.kv-val.mono { font-family: monospace; letter-spacing: 0.05em; }

/* Chat sandbox — scrollable transcript of bubbles for testing a draft agent. */
.chat-sandbox { display: flex; flex-direction: column; gap: 0.6rem; max-height: 360px; overflow-y: auto; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.chat-msg { max-width: 85%; padding: 0.55rem 0.8rem; border-radius: var(--radius-md); font-size: 0.9rem; white-space: pre-wrap; word-wrap: break-word; }
.chat-msg.from-user { align-self: flex-end; background: var(--primary); color: var(--on-primary); }
.chat-msg.from-agent { align-self: flex-start; background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--text-color); }
.chat-msg.from-system { align-self: center; max-width: 100%; background: transparent; color: var(--text-color-light); font-size: 0.8rem; font-style: italic; text-align: center; }
.chat-msg a { color: inherit; text-decoration: underline; }
.chat-msg.from-agent a { color: var(--primary); }
/* A transcript that fills its container (a .slide-panel-body, a page column) instead of the
   sandbox's fixed height: .chat-sandbox.chat-fill */
.chat-sandbox.chat-fill { max-height: none; flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0; }
/* The input row under a transcript: the field grows, the send button stays at the end.
   Combine with .slide-panel-footer in a panel. */
.chat-input-bar { display: flex; align-items: flex-end; justify-content: stretch; gap: 0.5rem; }
.chat-input-bar textarea, .chat-input-bar input { flex: 1 1 auto; min-width: 0; resize: none; }
/* A block that takes the viewport below the chrome (a chat page, a designer canvas): flex
   children with .chat-fill scroll inside it. Stacks to natural height on phones. */
.viewport-fill { height: calc(100dvh - 10rem); min-height: 400px; }
/* Its children may not grow past it (a wrapping flex row sizes its line to the tallest child's
   CONTENT otherwise), so a .chat-fill inside them scrolls instead of the page overflowing. */
.viewport-fill > * { max-height: 100%; min-height: 0; }
@media (max-width: 768px) { .viewport-fill { height: auto; } .viewport-fill > .chat-fill, .viewport-fill .card.v-container { min-height: 60vh; } }
/* Live activity under a "working" bubble: what a background agent turn is doing right now
   (model turns, tool calls, provisioning checkpoints), then collapsed into a log. */
.chat-activity { list-style: none; margin: 0.35rem 0 0; padding: 0; font-size: 0.8rem; color: var(--text-color-light); text-align: left; font-style: normal; }
.chat-activity li { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.1rem 0; }
.chat-activity li::before { content: '✓'; color: var(--success, var(--primary)); flex: none; width: 1em; }
.chat-activity li.is-active::before { content: '…'; color: var(--primary); }
.chat-activity li.is-failed::before { content: '✕'; color: var(--danger); }
.chat-activity .detail { color: var(--text-muted); }
.chat-activity-log { margin-top: 0.4rem; }
.chat-activity-log > summary { cursor: pointer; font-size: 0.78rem; color: var(--text-color-light); }
/* An agent's inline form (ask_form) inside its bubble: full width, normal wrapping; answered
   forms render as a .kv-box. */
.chat-msg.has-form { max-width: 100%; width: 100%; white-space: normal; }
.chat-form { margin-top: 0.5rem; }
.chat-form .form-fields { gap: 0.6rem; }
.chat-form .form-field > label { font-size: 0.85rem; }
.chat-form .check-list { margin-top: 0.15rem; }
.chat-form .field-error { font-size: 0.8rem; color: var(--danger); margin-top: 0.2rem; }
.chat-form-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.chat-form-title { font-weight: 600; margin-bottom: 0.25rem; }
.chat-form-answered { margin-top: 0.5rem; }
.chat-form-answered .kv-row { display: flex; gap: 0.75rem; padding: 0.15rem 0; }
.chat-form-skipped { font-size: 0.8rem; color: var(--text-color-light); font-style: italic; margin-top: 0.35rem; }



/* Vertical checkbox/radio list (e.g. tool/feature toggles). */
.check-list { display: flex; flex-direction: column; gap: 0.4rem; }
.check-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; cursor: pointer; }

/* Wide modal variant — for editor-style modals (rich content, multi-field forms) */
.modal-panel-lg { width: 860px; max-width: 94vw; }

/* ============================================================
   Content player — step-through lessons/modules with a nav rail.
   Generic component (course player, any sequential content).
   ============================================================ */
.player { display:flex; gap:0; align-items:stretch; min-height:70vh; }
.player-side { flex:0 0 300px; max-width:300px; border-right:1px solid var(--border); background:var(--surface-2); overflow-y:auto; }
.player-side-head { padding:1rem 1.1rem; border-bottom:1px solid var(--border); }
.player-side-head h1 { font-size:1rem; margin:0 0 .5rem; line-height:1.3; }
.player-progress { height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; }
.player-progress > span { display:block; height:100%; background:var(--primary); }
.player-mod { padding:.6rem 1.1rem .2rem; font-size:.72rem; font-weight:700; text-transform:uppercase; color:var(--text-muted); }
.player-lesson { display:flex; align-items:center; gap:.55rem; padding:.5rem 1.1rem; font-size:.86rem; color:var(--text-color); text-decoration:none; border-left:3px solid transparent; }
.player-lesson:hover { background:var(--surface-3); }
.player-lesson.current { background:var(--primary-soft); border-left-color:var(--primary); font-weight:600; }
.player-lesson .tick { flex:0 0 16px; color:var(--success); }
.player-lesson .tick.todo { color:var(--border); }
.player-main { flex:1 1 auto; min-width:0; padding:1.4rem 1.8rem; }
.player-main .lesson-content { max-width:760px; line-height:1.7; }
.player-main .lesson-content h1, .player-main .lesson-content h2 { margin-top:1.4rem; }
.player-main .lesson-content pre { background:var(--surface-3); color:var(--text-color); padding:.8rem; border-radius:var(--radius-xs); overflow-x:auto; }
.player-video { position:relative; padding-bottom:56.25%; height:0; margin-bottom:1.2rem; }
.player-video iframe, .player-video video { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:var(--radius-sm); }
.player-nav { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--border); max-width:760px; }
.player-limit { max-width:760px; }
.player-quiz { display:flex; flex-direction:column; gap:1.1rem; max-width:760px; }
.player-q-opts { display:flex; flex-direction:column; gap:.4rem; padding:.5rem 0 0; }
.player-q-opt { display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.player-discussion { max-width:760px; margin-top:2.6rem; }
.player-comment { margin-bottom:.6rem; }
.player-comment-form { display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; }
@media (max-width:800px){ .player{flex-direction:column} .player-side{flex-basis:auto;max-width:none;border-right:0;border-bottom:1px solid var(--border)} }

/* ============================================================
   Detail page — hero (media + body), meta row, media object,
   inline progress, item row. For any detail/landing page.
   ============================================================ */
.detail-page { max-width:1100px; margin:0 auto; }
.detail-hero { display:flex; flex-wrap:wrap; gap:1.6rem; align-items:flex-start; margin-bottom:1.6rem; }
.detail-hero-media { flex:0 0 340px; max-width:340px; }
.detail-hero-media img { width:100%; border-radius:var(--radius-md); display:block; }
.detail-hero-body { flex:1 1 340px; min-width:280px; }
.meta-row { display:flex; flex-wrap:wrap; gap:1.2rem; color:var(--text-muted); font-size:.9rem; margin:.7rem 0; }
.media-object { display:flex; gap:1rem; align-items:center; }
.media-object img { width:56px; height:56px; border-radius:50%; object-fit:cover; }
.progress-inline { display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.item-row { display:flex; align-items:center; gap:.6rem; padding:.55rem .2rem; border-bottom:1px solid var(--border); font-size:.9rem; }
.item-row:last-child { border-bottom:0; }
.item-row.current { font-weight:600; }

/* ============================================================
   Certificate — printable award / completion certificate
   ============================================================ */
.certificate-wrap { max-width:840px; margin:1.5rem auto; }
.certificate { position:relative; background:var(--surface); border:10px solid var(--primary); padding:3rem 2.5rem; text-align:center; box-shadow:var(--shadow-xl); }
.certificate::after { content:''; position:absolute; inset:14px; border:1px solid var(--primary); pointer-events:none; }
.certificate-kicker { text-transform:uppercase; letter-spacing:.25em; font-size:.8rem; color:var(--text-muted); }
.certificate-title { font-size:2rem; font-weight:800; margin:.4rem 0 1.6rem; }
.certificate-name { font-size:2.2rem; font-weight:700; border-bottom:2px solid var(--border); display:inline-block; padding:.2rem 1.4rem .4rem; margin:.4rem 0 1.4rem; }
.certificate-subject { font-size:1.25rem; font-weight:600; margin:.3rem 0 1.8rem; }
.certificate-foot { display:flex; justify-content:space-between; gap:2rem; margin-top:2rem; font-size:.9rem; color:var(--text-muted); }
.certificate-foot .val { color:var(--text-color); font-weight:600; }
@media print { .no-print { display:none !important; } body * { visibility:hidden; } .certificate-wrap, .certificate-wrap * { visibility:visible; } .certificate-wrap { margin:0; } }

/* ── Course lesson page — polished prose for site-presented (Type-3) lessons ── */
.lesson-page { max-width: 760px; margin: 0 auto; line-height: 1.75; font-size: 1.03rem; color: var(--text-color); }
.lesson-page > *:first-child { margin-top: 0; }
.lesson-page h2 { font-size: 1.65rem; font-weight: 700; line-height: 1.25; margin: 2.2rem 0 .8rem; }
.lesson-page h3 { font-size: 1.25rem; font-weight: 600; margin: 1.7rem 0 .55rem; }
.lesson-page p { margin: 0 0 1.15rem; }
.lesson-page a { color: var(--primary); }
.lesson-page strong { font-weight: 700; }
.lesson-page ul { margin: 0 0 1.3rem; padding: 0; list-style: none; }
.lesson-page ul > li { position: relative; padding: .6rem .9rem .6rem 2.3rem; margin-bottom: .55rem;
    background: var(--surface-3); border-radius: var(--radius-sm); }
.lesson-page ul > li::before { content: ""; position: absolute; left: 1rem; top: 1.15rem;
    width: .5rem; height: .5rem; border-radius: var(--radius-full); background: var(--primary); }
.lesson-page ol { counter-reset: step; margin: 0 0 1.3rem; padding: 0; list-style: none; }
.lesson-page ol > li { counter-increment: step; position: relative; padding: .6rem .9rem .6rem 2.8rem; margin-bottom: .55rem; }
.lesson-page ol > li::before { content: counter(step); position: absolute; left: .6rem; top: .5rem;
    width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full); background: var(--primary); color: #fff; font-size: .8rem; font-weight: 700; }
.lesson-page blockquote { margin: 0 0 1.2rem; padding: .8rem 1.1rem; border-left: 3px solid var(--primary);
    background: var(--surface-3); border-radius: var(--radius-xs); }
.lesson-page .lesson-video { margin-bottom: 1.6rem; }

/* ── Prose: readable long-form text (project docs, findings, articles) ── */
.prose { max-width: 72ch; line-height: 1.6; color: var(--text-color); }
.prose h1, .prose h2, .prose h3 { line-height: 1.25; margin: 1.2em 0 .4em; }
.prose p { margin: 0 0 .8em; }
.prose ul, .prose ol { margin: 0 0 .8em 1.2em; }
.prose code { font-family: var(--font-mono, monospace); font-size: .9em; }
.prose pre { margin: 0 0 .8em; padding: .75rem 1rem; overflow-x: auto; background: var(--surface-2); border-radius: var(--radius-md); font-family: var(--font-mono, monospace); font-size: .85em; line-height: 1.5; }
.prose pre code { font-size: inherit; }
.prose blockquote { margin: 0 0 .8em; padding: .5rem 1rem; border-left: 3px solid var(--border-strong); color: var(--text-color-light); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose h1 { font-size: 1.5rem; margin-top: 0; }
.prose h2 { font-size: 1.2rem; }
.prose h3 { font-size: 1.05rem; }
.prose img { max-width: 100%; }
.prose li { margin-bottom: .25em; }

/* Utility: push an element to the far end of a flex row */
.ml-auto { margin-left: auto; }

/* ── Carousel ──────────────────────────────────────────────────────────────
   Generic horizontal scroll-snap slider. Slides are direct children of
   .carousel-track. Prev/next nav is element-scoped inline (scrolls one page);
   no JS globals required, mobile falls back to native touch-scroll. Add
   .carousel--peek to reveal a sliver of the next slide.                       */
.carousel { position: relative; }
.carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.carousel--peek .carousel-slide { flex-basis: 88%; }
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-color);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.carousel-nav:hover { background: var(--surface-2); }
.carousel-nav--prev { left: 0.5rem; }
.carousel-nav--next { right: 0.5rem; }
@media (max-width: 640px) { .carousel-nav { display: none; } }

/* ── Brand Kit token contract ───────────────────────────────────────────────
   The design-system "brand vocabulary" that section blocks read so a page gets a
   distinct identity from tokens alone. Framework defaults fall back to the theme
   tokens (and hard fallbacks) so blocks always render; a per-site Brand Kit
   overrides these — palette, type pairing, motif — to make each site its own.
   See reference_brand_kit_system.                                             */
:root{
  /* type pairing + scale (per-brand: override --font-display / --font-body) */
  --font-display: var(--font-family-sans-serif, system-ui, "Segoe UI", sans-serif);
  --font-body: var(--font-family-sans-serif, system-ui, "Segoe UI", sans-serif);
  --display-weight: 800;
  --display-tracking: -0.01em;
  --text-hero: clamp(2.25rem, 5vw, 3.75rem);
  --text-h2:   clamp(1.75rem, 3.4vw, 2.5rem);
  --text-h3:   clamp(1.25rem, 2vw, 1.6rem);
  --text-lead: 1.15rem;

  /* brand palette roles — beyond the single --primary (per-brand: override) */
  --brand:           var(--primary, #2b6cb0);
  --brand-strong:    var(--primary-strong, var(--brand));
  --brand-accent:    var(--brand);            /* a distinct secondary accent */
  --brand-highlight: var(--primary-soft, var(--brand)); /* warm highlight */
  --brand-ink:       var(--text-color-dark, #1c1917);
  --brand-cream:     var(--surface, #ffffff); /* page background */
  --brand-soft:      var(--surface-2, #f4f2ef);/* soft section background */
  --brand-on:        var(--on-primary, #ffffff); /* text on --brand */

  /* section rhythm + signature motif (per-brand: override the mark) */
  --section-y: 4.5rem;
  --brand-eyebrow-mark: "\2022";              /* bullet; brands use a paw/star/etc */
}

/* ── partial swap loading state ────────────────────────────────────────────────
   The partialSwap interceptor (app.js) sets .partial-loading on <html> while a
   partial navigation fetch is in flight and removes it when the swap lands. */
html.partial-loading { cursor: progress; }

/* ── .brand-lockup ─────────────────────────────────────────────────────────────
   A brand MARK sitting beside a LIVE-TEXT wordmark, for nav and footer.
   Live text rather than a baked mark+wordmark image, because then the wordmark
   follows the theme tokens and only the mark stays palette-coloured — one asset
   to reissue on a palette change instead of one lockup per surface. It also
   stops the wordmark being resized by whatever height the surface pins the
   image to (a 320x80 lockup squeezed to height:32px leaves the mark ~28px).
   Lives in components.css, NOT public.css: the chrome it dresses appears in the
   USERS / ADMIN / WEBSTORE zones too, and those CSS chains never load public.css.
   Layout only: text colour/size comes from the surface's own brand class
   (.site-nav-brand, .site-footer-brand), or from .brand-lockup-text where the
   surface has none.                                                          */
/* Spacing lives on the MARK, not as `gap`. A wordmark like Krea<span>Plex</span>
   becomes two anonymous flex items, and `gap` would push them apart — "Krea Plex". */
.brand-lockup        { display: inline-flex; align-items: center; }
.brand-lockup-mark   { height: 1.15em; width: auto; flex: 0 0 auto; display: block;
                       margin-right: .55rem; }
.brand-lockup-text   { font-family: var(--font-family-heading); font-weight: 700;
                       font-size: 1.5rem; letter-spacing: -.01em; color: var(--text-color-dark); }
/* --primary-strong, not --primary: it is the LEGIBLE-against-this-canvas step of
   the brand (lighter on dark themes, darker on light ones). --primary is a FILL
   colour and fails as text — signal_violet #6d4aff is ~3.8:1 on carbon. */
.brand-lockup-text span { color: var(--primary-strong); }

/* ── .theme-toggle ─────────────────────────────────────────────────────────────
   Dark/light switch for the chrome header. Lives in components.css, NOT
   public.css: the chrome it sits in also renders in the USERS / ADMIN /
   WEBSTORE zones, and those CSS chains never load public.css.

   Purely token-driven, so it inverts with the rest of the theme and needs no
   per-mode rules of its own. Hidden by default — libs.js reveals it only when
   the active theme actually ships a counterpart (--theme-alt), so a theme
   without one never shows a switch that half-works.

   The two glyphs are swapped by CSS on the root's data-theme, not by JS
   rewriting innerHTML: that keeps the button correct even when a partial swap
   re-renders the chrome around it. */
.theme-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    flex: 0 0 auto;
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-full);
    background: var(--chrome-overlay);
    color: inherit;
    cursor: pointer;
    line-height: 1;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle[data-ready] { display: inline-flex; }
.theme-toggle:hover  { background: var(--chrome-overlay); border-color: var(--border-strong); }
.theme-toggle:focus-visible {
    outline: 2px solid var(--primary-strong);
    outline-offset: 2px;
}
.theme-toggle svg { width: 1.05rem; height: 1.05rem; display: block; fill: currentColor; }

/* Sun while dark is active (click = go light), moon while light is active.
   Both glyphs are hidden until the root carries an explicit data-theme, which
   libs.js always sets — including to the theme's OWN mode — before revealing
   the button. Keying off an explicit value rather than "absent means dark" is
   what makes this correct on a natively LIGHT theme too. */
.theme-toggle .theme-toggle-sun,
.theme-toggle .theme-toggle-moon { display: none; }
:root[data-theme="dark"]  .theme-toggle .theme-toggle-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .theme-toggle-moon { display: block; }


/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
/* <nav class="breadcrumbs"><ol><li><a>Home</a></li><li><span aria-current="page">Here</span></li></ol></nav>
   Trail back through parent contexts; the last item is plain text. Added 2026-09-14 (directory). */
.breadcrumbs ol        { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.84rem; color: var(--text-muted, var(--text-color-light)); }
.breadcrumbs li + li::before { content: "›"; margin-right: 0.35rem; color: var(--text-muted, var(--text-color-light)); }
.breadcrumbs a         { color: inherit; text-decoration: none; }
.breadcrumbs a:hover   { color: var(--primary, var(--primary)); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text-color, var(--text-color-dark)); font-weight: 600; }

/* ── Rating stars ────────────────────────────────────────────────────────── */
/* <span class="rating-stars">★★★★☆</span> <span class="rating-count">4.2 (17)</span>
   Zone-neutral star rating (public.css's .review-stars is brand-token bound). */
.rating-stars          { color: var(--warning, #e0a800); letter-spacing: 0.08em; white-space: nowrap; }
.rating-stars--empty   { color: var(--text-muted, var(--text-color-light)); }
.rating-count          { font-size: 0.82rem; color: var(--text-muted, var(--text-color-light)); }

/* ── Search form (what + where) ──────────────────────────────────────────── */
/* .cta-form.search-form — widens the public cta-form for two inputs and a button. */
.search-form           { max-width: 760px; }
.search-form input     { min-width: 0; }
.search-form input[type="search"] { flex: 2 1 240px; }
.search-form input[type="text"]   { flex: 1 1 160px; }

/* ── Sidebar layout, right-hand aside ────────────────────────────────────── */
/* .sidebar-layout--right puts the (280px) aside AFTER the main column — detail pages. */
.sidebar-layout--right { grid-template-columns: minmax(0, 1fr) 280px; }
@media (max-width: 820px) { .sidebar-layout, .sidebar-layout-narrow, .sidebar-layout--right { grid-template-columns: 1fr; } }

/* ── Prompt box ──────────────────────────────────────────────────────────── */
/* <form class="prompt-box" method="post" action="/start">
     <textarea name="prompt" data-enter-submit placeholder="…"></textarea>
     <div class="prompt-box-bar"><span class="prompt-box-hint">…</span><button class="btn-brand">…</button></div>
   </form>
   <div class="pill-group prompt-box-suggestions"><button class="chip" data-fill="#id">…</button></div>
   One prompt, front and centre: a textarea in a card with an action bar under it, and
   suggestion chips that fill it (public.js / app.js wire data-enter-submit + data-fill).
   Zone-neutral — theme tokens only — so it serves a public landing and an in-app agent
   page alike. Added 2026-09-14 (front page, roadmap track 3). */
.prompt-box             { display: flex; flex-direction: column; width: 100%; max-width: 760px; margin: 1.75rem auto 0; padding: .95rem 1.1rem .8rem; text-align: left;
                          background: var(--surface); border: 1px solid var(--border-strong, var(--border)); border-radius: var(--radius-xl, var(--radius-lg));
                          box-shadow: var(--shadow-lg); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.prompt-box:focus-within { border-color: var(--primary); box-shadow: var(--shadow-lg), 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent); }
.prompt-box textarea    { width: 100%; min-height: 4.6rem; resize: none; border: 0; outline: 0; padding: .15rem 0; background: transparent;
                          color: var(--text-color); font-family: var(--font-body, inherit); font-size: 1.05rem; line-height: 1.5; }
.prompt-box textarea::placeholder { color: var(--text-muted, var(--text-color-light)); }
.prompt-box-bar         { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .55rem; }
.prompt-box-hint        { font-size: .78rem; color: var(--text-muted, var(--text-color-light)); }
.prompt-box-suggestions { justify-content: center; gap: .5rem; margin-top: 1rem; }
.prompt-box-suggestions .chip { font-size: .8rem; white-space: normal; text-align: left; }
@media (max-width: 600px) { .prompt-box-bar { justify-content: flex-end; } .prompt-box-hint { display: none; } }

/* ── Project run-state reason — the 'why it stopped/paused' line beside the pill on the
      project dashboard (section_project_dash). An .errors box, inline-sized. ── */
.project-run-reason { margin-top: 0.75rem; max-width: 60rem; font-size: 0.9rem; line-height: 1.45; }
.project-run-reason strong { margin-right: 0.35rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   BRAND SECTION VOCABULARY — ZONE-NEUTRAL (2026-09-17)
   The token-driven page sections (hero, section-wrap, eyebrow, feature grid,
   stat strip, spotlight, bento, timeline, faq, plan, site-nav, site-footer …)
   used to live only in public.css, so a page written in this vocabulary inside
   the members' zone (users.css) rendered as bare text: no header bar, no cards,
   no stat tiles (the 9for9 dashboard). A page must render styled in ANY zone
   whichever vocabulary it is written in, so the rules live here, in the file
   every zone loads. public.css still carries the same rules (identical, so the
   public cascade is unchanged); the zone/theme files load after this one and
   still win any conflict. Source of truth for edits: keep both in step.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------
    HERO
----------------------------------------------------- */

.hero {
    padding: 8rem 0 6rem;
    text-align: center;
    background: var(--bg-gradient);
    color: var(--on-primary);
}

.hero-content {
    max-width: 820px;
    margin: 0 auto;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    color: var(--on-primary);
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.hero p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2.5rem;
    line-height: 1.65;
}

.hero-buttons {
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* ---------------------------------------------------
    FEATURES
----------------------------------------------------- */

.features {
    padding: 6rem 0;
    background: var(--surface);
}

.features .section-title { color: var(--text-color-dark); }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
}

.feature-card {
    background: var(--bg-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.feature-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 0.75rem;
}

.feature-card p {
    color: var(--text-color-light);
    font-size: 0.9375rem;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION BLOCKS — token-driven, art-directed page sections. A page is a stack
   of these; each reads the Brand Kit tokens (--brand-*, --font-display,
   --text-*, --section-y, --brand-eyebrow-mark) so one kit restyles the whole
   page in a site's own voice. Generic + reusable; see reference_brand_kit_system.
   ═══════════════════════════════════════════════════════════════════════════ */

/* rhythm + width */
.section        { padding: var(--section-y) 0; }
.section-tight  { padding-top: 0; }
.section-wrap   { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }

/* display type + section heading row */
.display        { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.08; }
.section-head   { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.section-head h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-h2); margin: .6rem 0 0; }
.section-head a  { font-family: var(--font-display); font-weight: 600; color: var(--brand-strong); white-space: nowrap; }
.section-lead   { font-size: var(--text-lead); color: var(--text-color-light, #6b5d52); max-width: 54ch; }

/* eyebrow — the motif marker (signature) */
.eyebrow        { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600;
                  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-strong);
                  background: var(--brand-soft); padding: .4rem .85rem; border-radius: var(--radius-full); }
.eyebrow::before { content: var(--brand-eyebrow-mark); font-size: .95rem; }

/* brand CTAs (pill) */
.btn-brand      { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600;
                  font-size: 1rem; padding: .85rem 1.6rem; border-radius: var(--radius-full); border: 2px solid transparent;
                  background: var(--brand); color: var(--brand-on); cursor: pointer;
                  transition: transform .15s ease, background .2s ease; }
.btn-brand:hover { background: var(--brand-strong); transform: translateY(-2px); }
.btn-brand-ink  { background: var(--brand-ink); color: var(--brand-cream); }
.btn-ghost-light{ display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600;
                  padding: .85rem 1.6rem; border-radius: var(--radius-full); background: transparent; color: #fff;
                  border: 2px solid rgba(255,255,255,.75); transition: transform .15s ease, background .2s ease; }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }

/* HERO — image variant (the base .hero centered-gradient stays for existing sites) */
.hero--image    { position: relative; min-height: 80vh; display: flex; align-items: center; overflow: hidden;
                  padding: 0; text-align: left; background: none; }
.hero-bg        { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero--image .hero-bg::after { content: ""; position: absolute; inset: 0;
                  background: linear-gradient(100deg,
                    color-mix(in srgb, var(--brand-ink) 82%, transparent) 0%,
                    color-mix(in srgb, var(--brand-ink) 48%, transparent) 44%,
                    color-mix(in srgb, var(--brand-ink) 6%, transparent) 80%); }
.hero--image .hero-content { position: relative; z-index: 1; max-width: 600px; margin: 0; padding: 3rem 0; }
.hero--image h1 { font-family: var(--font-display); font-size: var(--text-hero); color: #fff; margin: 1.1rem 0 1rem; }
.hero--image p  { font-size: 1.2rem; color: rgba(255,255,255,.92); max-width: 34ch; margin-bottom: 0; }
.hero--image .eyebrow { background: rgba(255,255,255,.16); color: #fff; }
.hero-btns      { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; }

/* TRUST STRIP */
.trust-strip    { background: var(--brand-ink); color: var(--brand-cream); }
.trust-strip .section-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem 2.5rem; padding-top: 1.15rem; padding-bottom: 1.15rem; }
.trust-strip span { font-family: var(--font-display); font-weight: 500; font-size: .98rem; display: inline-flex; align-items: center; gap: .55rem; }

/* CATEGORY GRID */
.category-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.category-tile  { display: block; background: var(--brand-soft); border-radius: var(--radius-xl); padding: 1.6rem 1rem; text-align: center;
                  border: 1px solid color-mix(in srgb, var(--brand-ink) 8%, transparent); color: inherit;
                  transition: transform .15s ease, box-shadow .2s ease; }
.category-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.category-tile-emoji { font-size: 2rem; line-height: 1; }
.category-tile-name  { font-family: var(--font-display); font-weight: 600; margin-top: .5rem; }

/* PREMIUM PRODUCT SHOWCASE — restyle the product widget only inside a .showcase */
.showcase .product-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
.showcase .product-card  { background: var(--brand-cream); border: 1px solid color-mix(in srgb, var(--brand-ink) 8%, transparent);
                  border-radius: var(--radius-xl); overflow: hidden; transition: transform .15s ease, box-shadow .2s ease; }
.showcase .product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.showcase .product-card .btn-action { background: var(--brand); color: var(--brand-on); border-radius: var(--radius-full); }
.showcase .product-card .btn-action:hover { background: var(--brand-strong); }

/* SPOTLIGHT — image + copy */
.spotlight      { background: linear-gradient(160deg, color-mix(in srgb, var(--brand-accent) 12%, var(--brand-cream)), var(--brand-soft)); }
.spotlight .section-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.spotlight-img  { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 4 / 3; }
.spotlight-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spotlight h2   { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-h2); margin: 1rem 0; }
.spotlight ul   { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; display: grid; gap: .6rem; }
.spotlight li   { display: flex; align-items: center; gap: .65rem; font-weight: 600; }
.spotlight li::before { content: var(--brand-eyebrow-mark); }

/* REVIEWS */
.review-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; text-align: left; }
.review-card    { background: var(--brand-cream); border: 1px solid color-mix(in srgb, var(--brand-ink) 8%, transparent); border-radius: var(--radius-xl); padding: 1.75rem; }
.review-stars   { color: var(--brand-highlight); font-size: 1.05rem; letter-spacing: .1em; }
.review-card p  { margin: .75rem 0 1.25rem; font-size: 1.05rem; }
.review-who     { font-family: var(--font-display); font-weight: 600; }
.review-who small { display: block; color: var(--text-color-light, #8a7c70); font-family: var(--font-body); font-weight: 600; }

/* CTA / NEWSLETTER BAND */
.cta-band       { background: var(--brand); color: var(--brand-on); text-align: center; }
.cta-band h2    { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-h2); color: var(--brand-on); margin: .9rem 0 .6rem; }
.cta-band p     { color: color-mix(in srgb, var(--brand-on) 92%, transparent); max-width: 44ch; margin: 0 auto 1.75rem; }
.cta-band .eyebrow { background: rgba(255,255,255,.18); color: #fff; }
.cta-form       { display: flex; gap: .6rem; max-width: 460px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.cta-form input { flex: 1 1 240px; border: none; border-radius: var(--radius-full); padding: .9rem 1.3rem; font-family: var(--font-body); font-size: 1rem; }

/* responsive */
@media (max-width: 820px) {
  .spotlight .section-wrap { grid-template-columns: 1fr; }
  .hero--image { min-height: 66vh; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-brand, .btn-ghost-light, .category-tile, .showcase .product-card { transition: none; }
}
.section a:focus-visible, .cta-form input:focus-visible, .category-tile:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }

.section-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-h2); line-height: 1.1; margin: .6rem 0 2.25rem; }

/* robustness (from live agent run): hero content sits above the image/overlay
   regardless of the inner wrapper class the author used; ghost brand button. */
.hero--image > *:not(.hero-bg){ position:relative; z-index:1; }
.btn-brand--ghost{ background:transparent; color:var(--brand); border:2px solid var(--brand); border-radius:var(--radius-full); font-family:var(--font-display); font-weight:600; padding:.85rem 1.6rem; display:inline-flex; align-items:center; gap:.5rem; transition:transform .15s ease, background .2s ease; }
.btn-brand--ghost:hover{ transform:translateY(-2px); }
.hero--image .btn-brand--ghost{ color:#fff; border-color:rgba(255,255,255,.75); }
.hero--image .btn-brand--ghost:hover{ background:rgba(255,255,255,.14); }

/* hero cover fallback: the bg image may sit on .hero-bg OR directly on .hero--image */
.hero--image{ background-size:cover; background-position:center; background-repeat:no-repeat; }
/* section background variants for rhythm & contrast (token-driven) */
.section--soft{ background:var(--brand-soft); }
.section--mist{ background:color-mix(in srgb, var(--brand-accent) 12%, var(--brand-cream)); }
.section--ink { background:var(--brand-ink); color:var(--brand-cream); }
/* stat strip */
.stat-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:2.25rem 3.5rem; }
.stat{ text-align:center; }
.stat-num{ font-family:var(--font-display); font-weight:var(--display-weight); font-size:clamp(2.2rem,4vw,3rem); color:var(--brand); line-height:1; }
.stat-label{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-color-light,#8a7c70); margin-top:.4rem; }
/* feature card: brand the heading so grids read on-brand, not generic */
.feature-card .feature-title, .feature-card h3{ font-family:var(--font-display); }

/* ── SITE CHROME BLOCKS (token-driven nav + footer) ───────────────────────── */
.site-nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.35rem 2rem; background:var(--brand-cream); border-bottom:1px solid color-mix(in srgb,var(--brand-ink) 8%,transparent); position:sticky; top:0; z-index:50; }
.site-nav-brand{ font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.5rem; color:var(--brand-ink); letter-spacing:.01em; }
.site-nav-brand span{ color:var(--brand); }
.site-nav-links{ display:flex; align-items:center; gap:1.75rem; }
.site-nav-links a{ font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-ink); transition:color .2s; }
.site-nav-links a:hover{ color:var(--brand); }
.site-nav-cta{ background:var(--brand); color:var(--brand-on); padding:.55rem 1.25rem; border-radius:var(--radius-full); }
.site-nav-cta:hover{ background:var(--brand-strong); color:var(--brand-on); }

.site-footer{ background:var(--brand-ink); color:color-mix(in srgb,var(--brand-cream) 68%,transparent); padding:3.75rem 0 2rem; }
.site-footer .section-wrap{ max-width:1140px; }
.site-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; padding-bottom:2.25rem; border-bottom:1px solid rgba(255,255,255,.13); }
.site-footer-brand{ font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.6rem; color:var(--brand-cream); }
.site-footer-brand span{ color:var(--brand-highlight); }
.site-footer-lead{ margin-top:.9rem; max-width:26rem; font-size:.95rem; line-height:1.6; }
.site-footer h4{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-cream); margin:0 0 .9rem; }
.site-footer a{ display:block; color:color-mix(in srgb,var(--brand-cream) 62%,transparent); font-size:.9rem; padding:.22rem 0; transition:color .2s; }
.site-footer a:hover{ color:var(--brand-highlight); }
.site-footer-bottom{ padding-top:1.5rem; font-size:.8rem; text-align:center; color:color-mix(in srgb,var(--brand-cream) 50%,transparent); }
@media (max-width:820px){ .site-nav-links a:not(.site-nav-cta){ display:none; } .site-footer-grid{ grid-template-columns:1fr; } }

/* testimonial quotes read as elegant, handwriting-like display italic */
.review-card p{ font-family:var(--font-display); font-style:italic; font-size:1.2rem; line-height:1.45; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION BLOCKS — GEN 2.1. Extends the Gen-2 vocabulary above with the pieces
   a marketing page kept having to invent: an asymmetric feature grid, an ordered
   process, a real FAQ accordion, a pricing family, and a photo tile.

   Same contract as Gen 2 — every rule reads the Brand Kit tokens (--brand-*,
   --font-display, --text-*, --section-y, --brand-eyebrow-mark) so one kit
   restyles them, and each falls back to a theme token so a site with no kit
   still renders. Hairlines go through --brand-hairline (kits on a dark canvas
   override it; the color-mix fallback is the light-canvas default used by the
   Gen-2 blocks above).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── BENTO — asymmetric feature grid ───────────────────────────────────────────
   Where .feature-grid gives N equal boxes, a bento gives a capability list some
   hierarchy: promote the ones that matter with --hero / --wide / --tall and let
   the rest fill in around them.

   <div class="bento">
     <div class="bento-item bento-item--hero">
       <h3>Title</h3><p>Copy</p><span class="bento-meta">supporting line</span>
     </div>
     <div class="bento-item bento-item--wide">…</div>
     <div class="bento-item bento-item--tall">…</div>
     <div class="bento-item">…</div>
   </div>                                                                      */
.bento              { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.15rem; }
.bento-item         { grid-column: span 2; display: flex; flex-direction: column; gap: .55rem;
                      background: var(--brand-cream, var(--surface, #fff)); border-radius: var(--radius-2xl);
                      border: 1px solid var(--brand-hairline, color-mix(in srgb, var(--brand-ink, #1c1917) 8%, transparent));
                      padding: 1.75rem; transition: transform .15s ease, box-shadow .2s ease; }
.bento-item:hover   { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.bento-item--wide   { grid-column: span 3; }
.bento-item--hero   { grid-column: span 4; }
.bento-item--full   { grid-column: 1 / -1; }
.bento-item--tall   { grid-row: span 2; }
.bento-item h3      { font-family: var(--font-display); font-weight: var(--display-weight);
                      font-size: var(--text-h3); letter-spacing: var(--display-tracking); margin: 0; }
.bento-item p       { margin: 0; color: var(--text-color-light, #6b5d52); }
.bento-meta         { margin-top: auto; padding-top: .9rem; font-size: .78rem; letter-spacing: .04em;
                      color: var(--text-color-light, #8a7c70); }

/* ── TIMELINE — an ordered process ─────────────────────────────────────────────
   Vertical by default (a story or changelog); --horizontal turns it into the
   "how it works" row. The connecting rule is drawn on the item, not the list, so
   a single step renders without a stray line.

   <ol class="timeline timeline--horizontal">
     <li class="timeline-item">
       <span class="timeline-marker">1</span>
       <h3 class="timeline-title">Step</h3><p>Copy</p>
     </li>
   </ol>                                                                       */
.timeline           { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.timeline-item      { position: relative; padding-left: 3.25rem; }
.timeline-item::before { content: ""; position: absolute; left: 1.09rem; top: 2.4rem; bottom: -2rem; width: 2px;
                      background: var(--brand-hairline, color-mix(in srgb, var(--brand-ink, #1c1917) 12%, transparent)); }
.timeline-item:last-child::before { display: none; }
.timeline-marker    { position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full);
                      display: inline-flex; align-items: center; justify-content: center;
                      font-family: var(--font-display); font-weight: var(--display-weight); font-size: .95rem;
                      background: var(--brand, var(--primary, #2b6cb0)); color: var(--brand-on, #fff); }
.timeline-title     { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-h3);
                      letter-spacing: var(--display-tracking); margin: .25rem 0 .4rem; }
.timeline-item p    { margin: 0; color: var(--text-color-light, #6b5d52); }

.timeline--horizontal { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.75rem; }
.timeline--horizontal .timeline-item { padding-left: 0; padding-top: 3.25rem; }
.timeline--horizontal .timeline-item::before { left: 2.6rem; right: -1.75rem; top: 1.09rem; bottom: auto; width: auto; height: 2px; }

/* ── FAQ ACCORDION — brand-token <details> ─────────────────────────────────────
   The dashboard has .collapse-card (components.css) but it is surface/border
   styled and reads no brand tokens; Gen-1 .faq-item above is a static card, not
   a disclosure. This is the marketing one. No JS — <details> does the work.

   <div class="faq-accordion">
     <details class="faq-accordion-item">
       <summary class="faq-accordion-q">Question</summary>
       <div class="faq-accordion-a"><p>Answer</p></div>
     </details>
   </div>                                                                      */
.faq-accordion      { display: grid; gap: .75rem; max-width: 46rem; }
.faq-accordion-item { background: var(--brand-cream, var(--surface, #fff)); border-radius: var(--radius-xl);
                      border: 1px solid var(--brand-hairline, color-mix(in srgb, var(--brand-ink, #1c1917) 8%, transparent));
                      overflow: hidden; }
.faq-accordion-q    { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
                      gap: 1rem; padding: 1.15rem 1.4rem; font-family: var(--font-display); font-weight: 600;
                      font-size: 1.05rem; }
.faq-accordion-q::-webkit-details-marker { display: none; }
.faq-accordion-q::after { content: "+"; flex: none; font-family: var(--font-display); font-size: 1.35rem; line-height: 1;
                      color: var(--brand-strong, var(--brand, #2b6cb0)); transition: transform .2s ease; }
.faq-accordion-item[open] .faq-accordion-q::after { transform: rotate(45deg); }
.faq-accordion-a    { padding: 0 1.4rem 1.3rem; color: var(--text-color-light, #6b5d52); }
.faq-accordion-a p  { margin: 0; }

/* ── PLAN — pricing cards + a plan comparison matrix ───────────────────────────
   Gen 1 has .pricing-card, but it reads theme tokens (--bg-gradient, --primary)
   so it lands off-brand on a Gen-2 page. This family reads the kit instead.
   .plan-matrix is for comparing YOUR OWN tiers — the honest use of a table.

   <div class="plan-grid">
     <div class="plan-card plan-card--featured">
       <span class="plan-badge">Most popular</span>
       <h3 class="plan-name">Pro</h3><p class="plan-desc">One line.</p>
       <div class="plan-price"><span class="plan-price-unit">$</span>99<span class="plan-price-period">/mo</span></div>
       <ul class="plan-features"><li>Feature</li></ul>
       <a class="btn-brand" href="/register">Start free</a>
     </div>
   </div>                                                                      */
.plan-grid          { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; align-items: start; }
.plan-card          { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 2rem 1.75rem;
                      background: var(--brand-cream, var(--surface, #fff)); border-radius: var(--radius-2xl);
                      border: 1px solid var(--brand-hairline, color-mix(in srgb, var(--brand-ink, #1c1917) 8%, transparent)); }
.plan-card--featured { border-color: var(--brand, var(--primary, #2b6cb0)); border-width: 2px; }
.plan-badge         { position: absolute; top: -.75rem; left: 1.75rem; padding: .3rem .8rem; border-radius: var(--radius-full);
                      background: var(--brand, var(--primary, #2b6cb0)); color: var(--brand-on, #fff);
                      font-family: var(--font-display); font-weight: 600; font-size: .72rem;
                      letter-spacing: .1em; text-transform: uppercase; }
.plan-name          { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-h3);
                      letter-spacing: var(--display-tracking); margin: 0; }
.plan-desc          { margin: 0; color: var(--text-color-light, #6b5d52); font-size: .95rem; }
.plan-price         { font-family: var(--font-display); font-weight: var(--display-weight);
                      font-size: clamp(2.4rem, 4vw, 3.1rem); line-height: 1; letter-spacing: var(--display-tracking);
                      display: flex; align-items: baseline; gap: .1rem; margin: .4rem 0 .2rem; }
.plan-price-unit    { font-size: .5em; align-self: flex-start; padding-top: .35em; }
.plan-price-period  { font-size: .32em; font-weight: 600; color: var(--text-color-light, #8a7c70); margin-left: .25rem; }
.plan-features      { list-style: none; margin: .5rem 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.plan-features li   { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.plan-features li::before { content: var(--brand-eyebrow-mark, "\2022"); flex: none;
                      color: var(--brand-strong, var(--brand, #2b6cb0)); }
.plan-card .btn-brand, .plan-card .btn-brand-ink { margin-top: auto; justify-content: center; }

.plan-matrix        { width: 100%; border-collapse: collapse; font-size: .95rem; }
.plan-matrix th, .plan-matrix td { padding: .85rem 1rem; text-align: left;
                      border-bottom: 1px solid var(--brand-hairline, color-mix(in srgb, var(--brand-ink, #1c1917) 8%, transparent)); }
.plan-matrix thead th { font-family: var(--font-display); font-weight: var(--display-weight);
                      font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.plan-matrix td + td, .plan-matrix th + th { text-align: center; width: 8.5rem; }
.plan-matrix tbody th { font-weight: 600; }

/* ── CATEGORY TILE, PHOTO VARIANT ──────────────────────────────────────────────
   .category-tile already carries the hover, radius and border chrome; it just
   could not hold a picture. aspect-ratio + object-fit also normalises mixed
   source ratios (1:1 and 16:9 crop to the same shape).

   <a class="category-tile" href="…">
     <div class="category-tile-img"><img src="…" alt=""></div>
     <div class="category-tile-name">Name</div>
     <div class="category-tile-meta">One line</div>
   </a>                                                                        */
.category-tile-img  { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; margin: -.6rem -.2rem .9rem; }
.category-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.category-tile-meta { font-size: .82rem; color: var(--text-color-light, #8a7c70); margin-top: .2rem; }

/* ── SECTION TEXTURE ───────────────────────────────────────────────────────────
   Opt-in dot field for an ink band, so a dark section is not a flat slab. Sits
   under the content; no effect unless the class is present.                   */
.section--mesh      { position: relative; isolation: isolate; }
.section--mesh::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
                      background-image: radial-gradient(currentColor 1px, transparent 1px);
                      background-size: 22px 22px; color: var(--brand-accent, var(--brand, #2b6cb0));
                      -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
                      mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%); }

/* ── .hero--canvas ─────────────────────────────────────────────────────────────
   A full-height opening section with NO photograph — the type and the canvas do
   the work. Sibling of .hero--image, not a variant of it: .hero--image hardcodes
   #fff type because it always sits on a picture, whereas this one deliberately
   sets no colours at all so the theme or brand kit drives them and it works on a
   light canvas as well as a dark one. Pair with .section--mesh for texture.   */
.hero--canvas          { position: relative; min-height: 72vh; display: flex; align-items: center; overflow: hidden;
                         /* Gen-1 .hero (:552) paints --bg-gradient and centres its text; .hero--image
                            happened to mask both with the photograph, so a canvas hero has to undo
                            them explicitly or it renders as a full-bleed wall of --primary. */
                         background: none; color: inherit; text-align: left; padding: 0; }
.hero--canvas h1, .hero--canvas p { color: inherit; }
.hero--canvas > .section-wrap { width: 100%; }   /* flex child would otherwise shrink-to-fit and centre */
.hero--canvas .hero-content { position: relative; z-index: 1; max-width: 640px; margin: 0; padding: 4rem 0; }
.hero--canvas h1       { font-family: var(--font-display); font-size: var(--text-hero); margin: 1.1rem 0 1rem; }
.hero--canvas p        { font-size: 1.2rem; max-width: 46ch; margin-bottom: 0; }
@media (max-width: 820px) { .hero--canvas { min-height: 0; padding: 3.5rem 0; } }

/* ── .hero--prompt ─────────────────────────────────────────────────────────────
   The prompt-first opening: one .prompt-box (components.css) front and centre and
   everything around it centred, the way the AI builders open. A modifier on
   .hero--canvas — add both classes. Added 2026-09-14 (roadmap track 3).           */
.hero--prompt                 { text-align: center; }
.hero--prompt .hero-content   { max-width: 840px; margin: 0 auto; padding: 5rem 0 4rem; }
.hero--prompt h1              { font-size: clamp(2.4rem, 5.2vw, 4.2rem); }   /* the box is the hero; the headline steps back */
.hero--prompt p               { margin-left: auto; margin-right: auto; max-width: 56ch; }
.hero--prompt .hero-btns      { justify-content: center; }
@media (max-width: 820px) { .hero--prompt .hero-content { padding: 3rem 0 2.5rem; } }

/* ── GEN 2.1 RESPONSIVE COLLAPSE ───────────────────────────────────────────────
   Bento loses its asymmetry before it loses readability; the timeline rule flips
   back to vertical so steps never sit in a cramped row.                       */
@media (max-width: 820px) {
  .bento            { grid-template-columns: 1fr; }
  .bento-item, .bento-item--wide, .bento-item--hero { grid-column: 1 / -1; }
  .bento-item--tall { grid-row: auto; }
  .timeline--horizontal { grid-template-columns: 1fr; }
  .timeline--horizontal .timeline-item { padding-left: 3.25rem; padding-top: 0; }
  .timeline--horizontal .timeline-item::before { left: 1.09rem; right: auto; top: 2.4rem; bottom: -2rem;
                      width: 2px; height: auto; }
  .timeline--horizontal .timeline-item:last-child::before { display: none; }
  .plan-matrix      { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bento-item, .faq-accordion-q::after { transition: none; }
  .bento-item:hover { transform: none; }
}

/* ── .btn-brand-ink standalone ─────────────────────────────────────────────────
   .btn-brand-ink (:1960) only sets background + colour; every bit of the pill
   geometry lives in .btn-brand (:1955), so it was written as a MODIFIER. But the
   $web_designer blueprint (projects_lib.php) tells agents to emit
   class='btn-brand-ink' on its own, and six agent-built pages across four sites
   already do — where it renders as a bare inline link with a dark background.
   Giving it the geometry fixes those retroactively and keeps the modifier form
   working, since this sets no colour of its own.                               */
.btn-brand-ink  { display: inline-flex; align-items: center; gap: .5rem;
                  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
                  padding: .85rem 1.6rem; border-radius: var(--radius-full);
                  border: 2px solid transparent; cursor: pointer;
                  transition: transform .15s ease, background .2s ease; }
.btn-brand-ink:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .btn-brand-ink { transition: none; }
  .btn-brand-ink:hover { transform: none; }
}

/* ── Log list — an editable, touch-first row list (training sets, reps, any
   "tap to complete" record). Generic: a .log-group per heading, .log-row per
   record; each row is a grid of a leading label, a target/hint, inputs and a
   trailing action. Rows mark themselves done with .log-row--done.
   Added 2026-09-18 for the fitness tracker (/train); zone-neutral.          */
.log-list        { display: flex; flex-direction: column; gap: 1rem; }
.log-group       { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.log-group-head  { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.75rem;
                   background: var(--surface-2); border-bottom: 1px solid var(--border); }
.log-group-title { font-weight: 700; font-size: 1rem; margin: 0; }
.log-group-meta  { color: var(--text-muted, var(--text-color-light)); font-size: 0.8rem; }
.log-row         { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; grid-template-rows: repeat(3, auto); align-items: center; gap: 0 0.5rem;
                   padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--surface-3); }
/* three optional rows in the middle column: target (above), inputs, result (below) — an
   absent target or an empty result collapses, so a bare row is ONE line: number · inputs · ✓ */
.log-row:last-child { border-bottom: none; }
.log-row--done   { background: color-mix(in srgb, var(--success) 8%, transparent); }
.log-row--done .log-row-inputs .form-control { border-color: transparent; background: transparent; }
.log-row-no      { grid-row: 1 / -1; font-weight: 600; font-size: 0.85rem; color: var(--text-muted, var(--text-color-light)); text-align: center; font-variant-numeric: tabular-nums; }
.log-row-target  { grid-column: 2; font-size: 0.8rem; color: var(--text-muted, var(--text-color-light)); margin-bottom: 0.35rem; }
.log-row-target:empty { display: none; }
.log-row-target strong { color: var(--text-color); }
.log-row-inputs  { grid-column: 2; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
/* a logged set is three inputs (weight · reps · RPE) — they stay on one line at any width;
   only editor rows (many controls) wrap */
.log-row[data-set] .log-row-inputs { flex-wrap: nowrap; }
.log-row[data-set] .log-row-inputs .form-control { flex: 0 0 auto; }
.log-row-inputs .form-control { width: 4.6rem; height: 44px; text-align: center; font-size: 1.05rem; font-variant-numeric: tabular-nums; padding: 0.25rem 0.3rem; }
.log-row-inputs .check-item { height: 44px; }
/* Sized form controls — a .form-control is 100% wide by default; these fix a width so
   several can sit in one .h-container row (editor rows, toolbars). */
/* (compound selectors: the zone sheet's .form-control { width: 100% } loads later and would win) */
.form-control.form-control--narrow { width: 3.75rem; text-align: center; }
.log-row-inputs .form-control.form-control--narrow { width: 3.3rem; text-align: center; }
.form-control.form-control--wide,   .log-row-inputs .form-control.form-control--wide   { width: 11rem; text-align: left; }
.form-control.form-control--label,  .log-row-inputs .form-control.form-control--label  { width: auto; min-width: 8rem; text-align: left; }
.form-control.form-control--grow,   .log-row-inputs .form-control.form-control--grow   { width: auto; flex: 1 1 8rem; text-align: left; }
.log-row-action  { grid-column: 3; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 0; }
.log-row-action .btn-xs { padding: 0 0.25rem; line-height: 1.2; background: none; box-shadow: none; color: var(--text-muted); font-size: 0.75rem; }
.log-row-result  { grid-column: 2; font-size: 0.8rem; color: var(--text-muted, var(--text-color-light)); margin-top: 0.35rem; }
.log-row-result:empty { display: none; }
.log-row-result .badge { margin-left: 0.35rem; }
.log-check       { width: 42px; height: 42px; border-radius: var(--radius-full); border: 2px solid var(--border-strong, var(--border));
                   background: var(--surface); color: var(--text-muted, var(--text-color-light)); font-size: 1.25rem; cursor: pointer;
                   display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast); }
.log-check:hover { border-color: var(--primary); color: var(--primary); }
.log-row--done .log-check { background: var(--success); border-color: var(--success); color: var(--on-dark, #fff); }
.log-add         { display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0.5rem; border-top: 1px dashed var(--border); flex-wrap: wrap; }

/* ── Countdown — a rest/interval timer that sits above the page bottom. Big
   tabular digits, a progress rail, +/skip controls. Toggle .countdown--running
   and .countdown--over; the rail width is set inline by the script (a dynamic
   value, the one allowed inline style).                                       */
.countdown       { position: sticky; bottom: 0.75rem; z-index: 5; display: flex; align-items: center; gap: 0.75rem;
                   padding: 0.6rem 0.9rem; background: var(--text-color); color: var(--on-dark, #fff);
                   border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); margin-top: 1rem; }
.countdown[hidden] { display: none; }
.countdown-time  { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4.5rem; }
.countdown-label { font-size: 0.75rem; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.06em; }
.countdown-rail  { flex: 1 1 auto; height: 6px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--on-dark, #fff) 20%, transparent); overflow: hidden; }
.countdown-rail > span { display: block; height: 100%; background: var(--primary); transition: width 1s linear; }
.countdown--over { background: var(--success); }
.countdown .btn  { color: inherit; border-color: color-mix(in srgb, var(--on-dark, #fff) 40%, transparent); }

/* ── Plate stack — a barbell load drawn as plates per side. Each .plate is a
   labelled block; heavier plates are taller (data-kg sets the size class).    */
.plate-stack     { display: inline-flex; align-items: center; gap: 2px; padding: 0.25rem 0.5rem; }
.plate-stack-bar { width: 1.5rem; height: 6px; background: var(--text-muted, var(--text-color-light)); border-radius: 2px; }
.plate           { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; padding: 0 0.2rem; height: 2.6rem;
                   border-radius: 3px; background: var(--primary); color: var(--on-dark, #fff); font-size: 0.7rem; font-weight: 700; }
.plate[data-size="s"] { height: 1.6rem; opacity: 0.85; }
.plate[data-size="m"] { height: 2.1rem; }
.plate-stack-note { font-size: 0.8rem; color: var(--text-muted, var(--text-color-light)); margin-left: 0.5rem; }

/* ── Choice row — big tappable radio/segment (readiness 1–5, units, sex). A
   fieldset of labels wrapping hidden radios; :checked lights the label.       */
.choice-row      { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.choice-row input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-row label { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 44px; padding: 0 0.9rem;
                    border: 1.5px solid var(--border-strong, var(--border)); border-radius: var(--radius-md); background: var(--surface);
                    cursor: pointer; font-weight: 600; transition: background var(--transition-fast); }
.choice-row input[type=radio]:checked + label { background: var(--primary); color: var(--on-dark, #fff); border-color: var(--primary); }
.choice-row label:hover { border-color: var(--primary); }

/* ── Day strip — a horizontal scroll of day tiles (a training week). .day-tile
   with .day-tile--today / --done / --planned states.                          */
.day-strip       { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
.day-tile        { flex: 0 0 auto; min-width: 3.25rem; padding: 0.5rem 0.4rem; text-align: center; border: 1px solid var(--border);
                   border-radius: var(--radius-md); background: var(--surface); text-decoration: none; color: inherit; }
.day-tile-dow    { display: block; font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted, var(--text-color-light)); }
.day-tile-num    { display: block; font-weight: 700; font-size: 1.05rem; }
.day-tile-dot    { display: block; width: 6px; height: 6px; border-radius: var(--radius-full); margin: 0.25rem auto 0; background: transparent; }
.day-tile--done .day-tile-dot    { background: var(--success); }
.day-tile--planned .day-tile-dot { background: var(--primary); }
.day-tile--skipped .day-tile-dot { background: var(--warning); }
.day-tile--today { border-color: var(--primary); box-shadow: 0 0 0 2px var(--ring-color); }

/* ── Chart (framework component, rendered by CORE/libs/chart_lib.php as inline SVG) ──
   Colour is tokens only: series 1 --primary, series 2 --highlight (validated pair),
   grid --border, text --text-muted, rings/gaps --surface. Hover layer in app.js.
   Marks: 2px lines, 8px dots with a 2px surface ring, 10% area wash, bars ≤ 24px
   with a rounded data end. Added 2026-09-18.                                       */
.chart            { display: block; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.75rem 0.75rem 0.5rem; min-width: 0; }
.chart-head       { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.chart-title      { font-weight: 700; }
.chart-subtitle   { color: var(--text-muted); font-size: 0.8rem; }
.chart-plot       { position: relative; }
.chart-plot svg   { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.chart-grid       { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.chart-empty      { color: var(--text-muted); text-align: center; padding: 2rem 1rem; }
.chart svg .chart-gridline  { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.chart svg .chart-axis      { stroke: var(--border-strong, var(--border)); stroke-width: 1; shape-rendering: crispEdges; }
.chart svg .chart-tick      { fill: var(--text-muted); font-size: 11px; }
.chart svg .chart-label     { fill: var(--text-color); font-size: 11px; font-weight: 600; }
.chart svg .chart-line      { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart svg .chart-area      { opacity: 0.1; }
.chart svg .chart-dot       { stroke: var(--surface); stroke-width: 2; }
.chart svg .chart-bar       { stroke: none; }
.chart svg .chart-bar:hover, .chart svg .chart-bar.is-hover { opacity: 0.8; }
.chart svg .chart-crosshair { stroke: var(--text-muted); stroke-width: 1; shape-rendering: crispEdges; }
.chart svg .chart-crosshair[hidden] { display: none; }
.chart svg .series-1 { stroke: var(--primary); }
.chart svg .series-2 { stroke: var(--highlight); }
.chart svg .chart-dot.series-1, .chart svg .chart-area.series-1, .chart svg .chart-bar.series-1 { fill: var(--primary); }
.chart svg .chart-dot.series-2, .chart svg .chart-area.series-2, .chart svg .chart-bar.series-2 { fill: var(--highlight); }
.chart-legend     { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-color); padding: 0.25rem 0; }
.chart-key::before { content: ""; display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 0.35rem; background: var(--primary); }
.chart-key.series-2::before { background: var(--highlight); }
.chart-tip        { position: absolute; pointer-events: none; background: var(--text-color); color: var(--on-dark, #fff); border-radius: var(--radius-sm); padding: 0.35rem 0.6rem; font-size: 0.8rem; box-shadow: var(--shadow-md); white-space: nowrap; z-index: 3; }
.chart-tip[hidden] { display: none; }
.chart-tip-x      { display: block; opacity: 0.75; font-size: 0.72rem; }
.chart-tip-row    { display: flex; align-items: center; gap: 0.4rem; }
.chart-tip-row strong { font-variant-numeric: tabular-nums; }
.chart-tip-key    { display: inline-block; width: 10px; height: 2px; background: var(--primary); }
.chart-tip-key.series-2 { background: var(--highlight); }
.chart-table      { margin-top: 0.25rem; font-size: 0.8rem; }
.chart-table > summary { cursor: pointer; color: var(--text-muted); }
.chart-table .d-table-cell { padding: 0.15rem 0.5rem; }
.chart-table .tabular { font-variant-numeric: tabular-nums; text-align: right; }