/**
 * Legacy Log — ll-ui.css  (v3.8.0)
 * Components: app shell, cards, buttons, forms, tables, badges, alerts,
 * tabs, stats, inline panels, toasts, text-size control, utilities.
 * Requires ll-core.css. Specificity kept low (:where) so page styles
 * can refine without !important. Utilities are the only !important.
 * Digitalis Creative
 */

/* ════════════════════════════════════════════════════════════════
   1 · APP SHELL (user dashboard)
   ════════════════════════════════════════════════════════════════ */
.dashboard-layout { min-height: 100vh; padding-top: var(--nav-h); display: flex; flex-direction: column; }
body.has-imp-banner .dashboard-layout { padding-top: calc(var(--nav-h) + 38px); }
body.ll-nav-open .dashboard-layout { padding-top: calc(var(--nav-h) + 52px); }
body.has-imp-banner.ll-nav-open .dashboard-layout { padding-top: calc(var(--nav-h) + 90px); }
.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content-area {
    flex: 1; width: 100%; max-width: var(--page-max);
    margin: 0 auto; padding: 2rem 2rem 3.5rem;
    animation: llFadeUp 320ms var(--ease) backwards;   /* v3.8.5: not "both" — a kept transform made .content-area the containing block for every position:fixed child */
}
@keyframes llFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* top nav */
.ll-nav {
    position: fixed; inset: 0 0 auto 0; z-index: 1000;
    background: color-mix(in srgb, var(--surface) 86%, transparent);   /* v3.8.13: follows light/dark */
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.ll-nav.ll-below-banner { top: 38px; }
.ll-nav-bar { height: var(--nav-h); display: flex; align-items: center; gap: .5rem; padding: 0 1.25rem; max-width: 1600px; margin: 0 auto; }
.ll-nav-toggle {
    width: 38px; height: 38px; flex-shrink: 0;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: transparent; border: 1px solid var(--line); border-radius: var(--rad-sm); cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ll-nav-toggle:hover { background: var(--surface-3); border-color: var(--line-2); }
.ll-nav-toggle span { width: 16px; height: 1.5px; background: var(--ink-1); border-radius: 1px; transition: transform .22s var(--ease), opacity .15s; }
.ll-nav.ll-open .ll-nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.ll-nav.ll-open .ll-nav-toggle span:nth-child(2) { opacity: 0; }
.ll-nav.ll-open .ll-nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.ll-nav-logo { display: flex; align-items: center; gap: .6rem; margin: 0 1rem 0 .35rem; color: var(--ink-1); flex-shrink: 0; }
.ll-nav-logo:hover { color: var(--ink-1); }
.ll-nav-logo i {
    width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
    background: var(--accent-tint); color: var(--accent-strong); font-size: .85rem;
    box-shadow: inset 0 0 0 1px rgba(185,138,62,0.22);
}
.ll-nav-logo-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 450; letter-spacing: -0.01em; }
.ll-nav-logo-ver { font-size: .68rem; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: .1rem; }

.ll-nav-primary { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
.ll-nav-pill, .ll-nav-sub {
    display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    height: 36px; padding: 0 .75rem; border-radius: var(--rad-sm);
    color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500;
    border: 1px solid transparent; background: none; cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}
.ll-nav-pill i, .ll-nav-sub i { font-size: .85rem; opacity: .8; }
.ll-nav-pill:hover, .ll-nav-sub:hover { color: var(--ink-1); background: var(--surface-3); }
.ll-nav-pill.ll-active, .ll-nav-sub.ll-active { color: var(--accent-ink); background: var(--accent-tint); border-color: rgba(185,138,62,0.22); }
.ll-nav-pill.ll-active i, .ll-nav-sub.ll-active i { opacity: 1; }
.ll-nav-label { display: none; }
.ll-nav.ll-open .ll-nav-label { display: inline; }
@media (min-width: 1240px) { .ll-nav-label { display: inline; } }

.ll-nav-badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--rad-pill);
    background: var(--danger); color: #fff; font-size: .68rem; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.ll-nav-right { display: flex; align-items: center; gap: .75rem; margin-left: auto; flex-shrink: 0; }
.ll-nav-user-badges { display: none; flex-direction: column; align-items: flex-end; gap: 3px; }
.ll-nav.ll-open .ll-nav-user-badges { display: flex; }
.ll-nav-uname { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-1); }
.ll-nav-avatar {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #E9D3AC, #C99A55); color: #3A2A12;
    font-size: .72rem; font-weight: 650; letter-spacing: .02em;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-2);
}
.ll-nav-avatar img, .ll-mobile-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ll-nav-expanded {
    display: none; align-items: flex-end; gap: 2rem;
    padding: .55rem 1.25rem .65rem; max-width: 1600px; margin: 0 auto;
    border-top: 1px solid var(--line);
}
.ll-nav.ll-open .ll-nav-expanded { display: flex; }
.ll-nav.ll-open { background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-sm); }
.ll-nav-group-label { font-size: .66rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .3rem .5rem; }
.ll-nav-group-items { display: flex; gap: 2px; flex-wrap: wrap; }
.ll-nav-sub { height: 32px; padding: 0 .65rem; font-size: .82rem; }
.ll-nav-sub-preview { color: var(--accent-ink); }
.ll-nav-sub-logout { color: var(--danger); }
.ll-nav-sub-logout:hover { color: var(--danger); background: var(--danger-soft); }

.ll-status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .66rem; font-weight: 600; letter-spacing: .02em;
    padding: 2px 7px; border-radius: var(--rad-pill); border: 1px solid transparent;
}
.ll-status-on  { background: var(--success-soft); color: var(--success); border-color: rgba(62,122,87,0.2); }
.ll-status-off { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(181,72,58,0.2); }

/* impersonation */
.ll-imp-banner {
    position: fixed; inset: 0 0 auto 0; height: 38px; z-index: 1100;
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    background: #7A4A1E; color: #FFF6EA; font-size: var(--fs-sm);
}
.ll-imp-return { color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: var(--rad-pill); padding: 2px 12px; font-size: .8rem; }
.ll-imp-return:hover { color: #fff; background: rgba(255,255,255,0.12); }

/* mobile drawer */
.ll-mobile-overlay { display: none; position: fixed; inset: 0; z-index: 1190; background: rgba(43,38,34,0.32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ll-mobile-overlay.open { display: block; }
.ll-mobile-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; width: 290px; z-index: 1200;
    background: var(--surface); border-right: 1px solid var(--line);
    transform: translateX(-102%); visibility: hidden; transition: transform .26s var(--ease), visibility .26s;
    overflow-y: auto; display: flex; flex-direction: column; padding-bottom: 1rem;
}
.ll-mobile-drawer.open { transform: none; visibility: visible; box-shadow: var(--shadow-lg); }
.ll-mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.ll-mobile-drawer-brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: 1.1rem; }
.ll-mobile-drawer-brand i { color: var(--accent); font-size: .9rem; }
.ll-mobile-close { background: none; border: 0; font-size: 1.1rem; color: var(--ink-2); cursor: pointer; padding: .35rem; border-radius: var(--rad-sm); }
.ll-mobile-close:hover { background: var(--surface-3); color: var(--ink-1); }
.ll-mobile-user-block { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.ll-mobile-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #E9D3AC, #C99A55); color: #3A2A12; font-size: .75rem; font-weight: 650; flex-shrink: 0; }
.ll-mobile-uname { font-weight: 550; font-size: .92rem; }
.ll-mobile-section-label { font-size: .66rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); padding: 1rem 1.1rem .35rem; }
.ll-mobile-link { display: flex; align-items: center; gap: .75rem; margin: 1px .6rem; padding: .6rem .6rem; border-radius: var(--rad-sm); color: var(--ink-2); font-size: .92rem; font-weight: 500; }
.ll-mobile-link i { width: 18px; text-align: center; font-size: .9rem; opacity: .8; }
.ll-mobile-link:hover { background: var(--surface-3); color: var(--ink-1); }
.ll-mobile-link.ll-active { background: var(--accent-tint); color: var(--accent-ink); }
.ll-mobile-link-logout { color: var(--danger); }
.ll-mobile-divider { height: 1px; background: var(--line); margin: .6rem 1.1rem; }

/* footer */
.app-footer { border-top: 1px solid var(--line); padding: 1.5rem 1rem 1.75rem; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); background: transparent; }
.footer-links { display: flex; justify-content: center; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: .4rem; }
.footer-link { color: var(--ink-2); display: inline-flex; align-items: center; gap: .4rem; }
.footer-link i { font-size: .8rem; opacity: .6; }
.footer-link:hover { color: var(--ink-1); }
.footer-separator { display: none; }
.footer-copyright { color: var(--ink-3); font-size: .8rem; }

/* ════════════════════════════════════════════════════════════════
   2 · PAGE HEADER
   ════════════════════════════════════════════════════════════════ */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.page-header h1, .page-title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 400; letter-spacing: -0.02em; margin: 0; color: var(--ink-1); }
.page-subtitle, .page-header p { color: var(--ink-2); margin: .3rem 0 0; font-size: .95rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════
   3 · CARDS
   ════════════════════════════════════════════════════════════════ */
.card, .ud-card, .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--rad-lg);
    box-shadow: var(--shadow-sm);
}
.card, .ud-card { padding: 1.5rem; }
.card-header {
    display: flex; align-items: center; gap: .6rem;
    padding-bottom: .9rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.card-title { font-family: var(--font-ui); font-size: .95rem; font-weight: 600; color: var(--ink-1); margin: 0; display: flex; align-items: center; gap: .55rem; }
.card-title i { color: var(--accent); font-size: .9rem; }
.card-link { margin-left: auto; font-size: .82rem; font-weight: 500; }
.card-hover { transition: box-shadow .2s var(--ease), border-color .2s, transform .2s var(--ease); }
.card-hover:hover { box-shadow: var(--shadow-md); border-color: var(--line-2); transform: translateY(-1px); }

/* legacy section labels */
.section-title, .widget-title, .panel-title { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════
   4 · BUTTONS
   ════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    height: 38px; padding: 0 1rem; border-radius: var(--rad-sm);
    font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 550; line-height: 1;
    white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
    background: var(--surface); color: var(--ink-1);
    border: 1px solid var(--line-2); box-shadow: var(--shadow-xs);
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { background: var(--surface-2); border-color: #CFC4B3; color: var(--ink-1); }
.btn:focus-visible { outline: none; box-shadow: var(--accent-glow); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn i { font-size: .85em; }
.btn:active:not(:disabled) { transform: translateY(.5px); }   /* v3.8.3: tactile press */

.btn-primary, .btn-confirm { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; box-shadow: 0 1px 2px rgba(120,76,20,0.18), inset 0 1px 0 rgba(255,255,255,0.12); }
.btn-primary:hover, .btn-confirm:hover { background: #8F5D1C; border-color: #8F5D1C; color: #fff; box-shadow: 0 4px 14px rgba(162,107,35,0.26), inset 0 1px 0 rgba(255,255,255,0.12); }
.btn-secondary, .btn-outline, .btn-cancel { background: var(--surface); color: var(--ink-1); border-color: var(--line-2); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { background: #33664A; border-color: #33664A; color: #fff; }
.btn-danger, .btn-delete { background: var(--surface); border-color: rgba(181,72,58,0.35); color: var(--danger); }
.btn-danger:hover, .btn-delete:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-warning { background: var(--warning-soft); border-color: rgba(183,121,31,0.35); color: var(--warning-ink); }
.btn-warning:hover { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-info { background: var(--info-soft); border-color: rgba(74,108,148,0.3); color: var(--info); }
.btn-info:hover { background: var(--info); border-color: var(--info); color: #fff; }
.btn-sm { height: 32px; padding: 0 .75rem; font-size: .8rem; border-radius: var(--rad-sm); }
.btn-xs { height: 26px; padding: 0 .55rem; font-size: .74rem; }
.btn-lg { height: 46px; padding: 0 1.4rem; font-size: .95rem; }
.btn-block { width: 100%; }
.btn-icon { width: 36px; padding: 0; }

/* ════════════════════════════════════════════════════════════════
   5 · FORMS
   ════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 1.15rem; }
.form-label, :where(.form-group) > label, :where(.content-area) label:not([class]) {
    display: block; margin-bottom: .4rem;
    font-size: .84rem; font-weight: 550; color: var(--ink-1);
}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]), select, textarea),
.form-control {
    width: 100%; max-width: 100%;
    padding: .6rem .8rem; min-height: 40px;
    font-family: var(--font-ui); font-size: .95rem; color: var(--ink-1);
    background-color: var(--surface); border: 1px solid var(--line-2); border-radius: var(--rad-sm);   /* v3.8.6: not the shorthand — it wiped the select chevron on every select.form-control */
    box-shadow: var(--shadow-xs);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
:where(textarea) { min-height: 110px; line-height: 1.6; resize: vertical; }
:where(select) {
    appearance: none; -webkit-appearance: none; padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E655B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .8rem center;
}
:where(input, select, textarea)::placeholder { color: #ADA395; }
:where(input, select, textarea):hover { border-color: #CFC4B3; }
:where(input, select, textarea):focus, .form-control:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-glow); }
:where(input, select, textarea):disabled { background: var(--surface-3); color: var(--ink-3); cursor: not-allowed; }
.form-hint, .form-text, .help-text { font-size: .8rem; color: var(--ink-3); margin-top: .35rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.form-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; padding-top: 1rem; margin-top: .5rem; border-top: 1px solid var(--line); }

/* ── v3.8.6 · form controls, one system ──────────────────────────────────────
   Zero-specificity (:where) so a page can still refine; opt out with .ll-native */
:where(button, input, select, textarea, optgroup) { font-family: inherit; letter-spacing: inherit; }
:where(select[multiple]) { background-image: none; padding-right: .8rem; min-height: 110px; }
:where(input[type=number]) { font-variant-numeric: tabular-nums; }

:where(input[type=checkbox], input[type=radio]):not(.ll-native) {
    appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 0; vertical-align: -3px; cursor: pointer;
    width: 18px; height: 18px; border: 1px solid var(--ink-3); border-radius: 5px; background: var(--surface) no-repeat center / 12px 12px;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
:where(input[type=radio]):not(.ll-native) { border-radius: 50%; }
:where(input[type=checkbox], input[type=radio]):not(.ll-native):hover { border-color: var(--accent); }
:where(input[type=checkbox], input[type=radio]):not(.ll-native):focus-visible { outline: none; box-shadow: var(--accent-glow); }
:where(input[type=checkbox]):not(.ll-native):checked, :where(input[type=checkbox]):not(.ll-native):indeterminate {
    background-color: var(--accent-strong); border-color: var(--accent-strong);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
:where(input[type=checkbox]):not(.ll-native):indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
:where(input[type=radio]):not(.ll-native):checked { border-color: var(--accent-strong); background: var(--surface); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 9px var(--accent-strong); }
:where(input[type=radio]):not(.ll-native):checked:focus-visible { box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 9px var(--accent-strong), var(--accent-glow); }
:where(input[type=checkbox], input[type=radio]):disabled { opacity: .5; cursor: not-allowed; }
/* label rows: "☐ text" */
:where(label):has(> input[type=checkbox], > input[type=radio]) { cursor: pointer; }
.check-row, .radio-row { display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--ink-1); cursor: pointer; }

/* switch — markup: <label class="toggle-switch"><input type="checkbox"><span class="slider"></span></label> */
.toggle-switch { position: relative; display: inline-block; flex-shrink: 0; width: 40px; height: 22px; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch .slider { position: absolute; inset: 0; cursor: pointer; border-radius: var(--rad-pill); background: var(--line-2);
    box-shadow: inset 0 0 0 1px rgba(43,38,34,0.06); transition: background .2s var(--ease); }
.toggle-switch .slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
    background: #FFFFFF; box-shadow: 0 1px 2px rgba(43,38,34,0.25); transition: transform .2s var(--ease); }
.toggle-switch input:checked + .slider { background: var(--accent-strong); }
.toggle-switch input:checked + .slider::before { transform: translateX(18px); }
.toggle-switch input:focus-visible + .slider { box-shadow: var(--accent-glow); }
.toggle-switch input:disabled + .slider { opacity: .5; cursor: not-allowed; }

/* range */
:where(input[type=range]) { width: 100%; height: 20px; background: transparent; accent-color: var(--accent-strong); cursor: pointer; }

/* fieldset / legend */
:where(fieldset) { margin: 0 0 1.15rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--rad); }
:where(legend) { padding: 0 .4rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* validation */
.is-invalid, :where(input, select, textarea):user-invalid { border-color: var(--danger) !important; }
.is-invalid:focus, :where(input, select, textarea):user-invalid:focus { box-shadow: 0 0 0 4px var(--danger-soft) !important; }
.is-valid { border-color: var(--success) !important; }
.invalid-feedback, .field-error { margin-top: .35rem; font-size: .8rem; color: var(--danger); }

/* ════════════════════════════════════════════════════════════════
   6 · TABLES
   ════════════════════════════════════════════════════════════════ */
:where(.content-area) table { width: 100%; border-collapse: collapse; font-size: .92rem; }
:where(.content-area) th {
    text-align: left; padding: .7rem .9rem; background: var(--surface-2);
    font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
    border-bottom: 1px solid var(--line);
}
:where(.content-area) td { padding: .8rem .9rem; border-bottom: 1px solid var(--line); color: var(--ink-1); vertical-align: middle; }
:where(.content-area) tbody tr { transition: background .12s; }
:where(.content-area) tbody tr:hover td { background: var(--surface-2); }
:where(.content-area) tbody tr:last-child td { border-bottom: 0; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--rad-lg); overflow: auto; background: var(--surface); box-shadow: var(--shadow-sm); }
.table-wrap th { position: sticky; top: 0; z-index: 1; }   /* v3.8.3: header stays visible in long tables */

/* ════════════════════════════════════════════════════════════════
   7 · BADGES / PILLS / PROGRESS
   ════════════════════════════════════════════════════════════════ */
.badge, .pill, .chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .55rem; border-radius: var(--rad-pill);
    font-size: .72rem; font-weight: 600; line-height: 1.5; letter-spacing: .01em;
    background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line);
}
.badge-accent, .badge-gold  { background: var(--accent-tint); color: var(--accent-ink); border-color: rgba(185,138,62,0.25); }
.badge-success, .badge-on   { background: var(--success-soft); color: var(--success); border-color: rgba(62,122,87,0.2); }
.badge-danger, .badge-off   { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(181,72,58,0.2); }
.badge-warning              { background: var(--warning-soft); color: #7A4F12;        border-color: rgba(183,121,31,0.25); }
.badge-info                 { background: var(--info-soft);    color: var(--info);    border-color: rgba(74,108,148,0.2); }
.badge-neutral              { background: var(--surface-3);    color: var(--ink-2); }

.progress { height: 6px; background: var(--surface-3); border-radius: var(--rad-pill); overflow: hidden; }
.progress > span, .progress-bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #D2A862); transition: width .5s var(--ease); }

/* ════════════════════════════════════════════════════════════════
   8 · ALERTS / HINTS
   ════════════════════════════════════════════════════════════════ */
.alert {
    display: flex; gap: .7rem; align-items: flex-start;
    padding: .85rem 1rem; margin-bottom: 1.25rem;
    border-radius: var(--rad); border: 1px solid var(--line); background: var(--surface-2);
    font-size: .92rem; color: var(--ink-1);
}
.alert i:first-child { margin-top: .2rem; }
.alert-success { background: #F1F7F3; border-color: rgba(62,122,87,0.22); color: #2C5B40; }
.alert-danger, .alert-error { background: #FBF1EF; border-color: rgba(181,72,58,0.22); color: #8A3327; }
.alert-warning { background: #FCF5E8; border-color: rgba(183,121,31,0.25); color: #72490F; }
.alert-info { background: #F1F4F8; border-color: rgba(74,108,148,0.2); color: #3A5676; }
[class^="hint-"], [class*=" hint-"] { font-size: .82rem; margin-top: .35rem; }
.hint-success { color: var(--success); } .hint-danger { color: var(--danger); }
.hint-warning { color: #8A5A12; }       .hint-info { color: var(--info); }

/* ════════════════════════════════════════════════════════════════
   9 · TABS / SEGMENTED / PAGINATION
   ════════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.tab, .ll-tab-btn {
    position: relative; display: inline-flex; align-items: center; gap: .45rem;
    padding: .7rem .9rem; margin-bottom: -1px; background: none; border: 0; cursor: pointer;
    font-family: var(--font-ui); font-size: .9rem; font-weight: 500; color: var(--ink-2);
    border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.tab i, .ll-tab-btn i { font-size: .82rem; opacity: .75; }
.tab:hover, .ll-tab-btn:hover { color: var(--ink-1); }
.tab.active, .ll-tab-btn.active { color: var(--ink-1); border-bottom-color: var(--accent); }

.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--rad-sm); }
.segmented button {
    border: 0; background: none; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 550;
    color: var(--ink-2); padding: .3rem .7rem; border-radius: 5px; transition: background .15s, color .15s, box-shadow .15s;
}
.segmented button:hover { color: var(--ink-1); }
.segmented button.active { background: var(--surface); color: var(--ink-1); box-shadow: var(--shadow-xs), 0 0 0 1px var(--line); }

.pagination { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: 1.5rem; }
.pagination a, .pagination span {
    min-width: 36px; height: 36px; padding: 0 .6rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--rad-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: .85rem;
}
.pagination a:hover { border-color: var(--line-2); color: var(--ink-1); }
.pagination .active, .pagination .current { background: var(--accent-tint); border-color: rgba(185,138,62,0.3); color: var(--accent-ink); font-weight: 600; }
.pagination-ellipsis { border: 0 !important; background: none !important; }

/* ════════════════════════════════════════════════════════════════
   10 · STAT TILES / EMPTY STATES / AVATARS / LISTS
   ════════════════════════════════════════════════════════════════ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.stat {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg);
    padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm);
    transition: box-shadow .2s var(--ease), border-color .2s;
}
a.stat:hover { box-shadow: var(--shadow-md); border-color: var(--line-2); }
.stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.stat-label { font-size: .8rem; font-weight: 500; color: var(--ink-2); }
.stat-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .8rem; background: var(--accent-tint); color: var(--accent-strong); }
.stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.stat-sub { font-size: .78rem; color: var(--ink-3); margin-top: .45rem; }

.empty-state, .ud-empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--ink-2); }
.empty-state i, .ud-empty-icon { display: block; font-size: 1.6rem; color: var(--accent); opacity: .55; margin: 0 auto .8rem; }
.empty-state h3, .empty-state h4 { margin-bottom: .35rem; }
.empty-state p { color: var(--ink-3); font-size: .92rem; }

.avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-ink); font-size: .75rem; font-weight: 650; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.list-row { display: flex; align-items: center; gap: .8rem; padding: .7rem .15rem; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row-main { flex: 1; min-width: 0; }
.list-row-title { font-weight: 500; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row-meta { font-size: .8rem; color: var(--ink-3); }
.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

/* ════════════════════════════════════════════════════════════════
   11 · INLINE PANELS, CONFIRMS, SLIDE PANEL, TOASTS, EXPANDABLES
   (driven by inline-confirmations.js — inline cards over modals)
   ════════════════════════════════════════════════════════════════ */
.inline-confirmation { display: none; background: #FBF1EF; border: 1px solid rgba(181,72,58,0.25); border-radius: var(--rad); padding: 1.1rem 1.25rem; margin: 1rem 0; animation: llFadeUp .25s var(--ease); }
.inline-confirmation.active { display: block; }
.inline-confirmation-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.inline-confirmation-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--danger); color: #fff; font-size: .8rem; flex-shrink: 0; }
.inline-confirmation-title { font-size: 1rem; font-weight: 600; color: #8A3327; margin: 0; font-family: var(--font-ui); }
.inline-confirmation-message { font-size: .92rem; color: var(--ink-2); margin-bottom: 1rem; }
.inline-confirmation-actions, .inline-form-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }

.inline-form-container { display: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg); box-shadow: var(--shadow-md); margin: 1rem 0; overflow: hidden; }
.inline-form-container.active { display: block; animation: llFadeUp .25s var(--ease); }
.inline-form-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.inline-form-title { margin: 0; font-family: var(--font-ui); font-size: 1rem; font-weight: 600; }
.inline-form-close, .slide-panel-close, .toast-close { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 1rem; padding: .25rem; border-radius: var(--rad-sm); }
.inline-form-close:hover, .slide-panel-close:hover, .toast-close:hover { color: var(--ink-1); background: var(--surface-3); }
.inline-form-body { padding: 1.25rem; }

/* inline panels & rows (functional — carried over from mobile-fixes-v2.8.21) */
.inline-confirm-panel:not(.active), .inline-view-panel:not(.active), .inline-form-panel:not(.active),
tr.inline-confirm-row:not(.active), tr.inline-view-row:not(.active) { display: none !important; }
.inline-confirm-panel.active, .inline-view-panel.active, .inline-form-panel.active { display: block !important; animation: llFadeUp .22s var(--ease); }
tr.inline-confirm-row.active, tr.inline-view-row.active { display: table-row !important; }

.item-card { position: relative; }
.item-card .item-delete-confirm { display: none; }
.item-card.confirming-delete .item-actions { display: none; }
.item-card.confirming-delete .item-delete-confirm { display: flex; gap: .5rem; align-items: center; }

.slide-panel-overlay { display: none; position: fixed; inset: 0; background: rgba(43,38,34,0.3); z-index: 1300; }
.slide-panel-overlay.active { display: block; }
.slide-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); z-index: 1301; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(102%); visibility: hidden; transition: transform .28s var(--ease), visibility .28s; display: flex; flex-direction: column; }
.slide-panel.active { transform: none; visibility: visible; }
.slide-panel-header, .slide-panel-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.slide-panel-footer { border-top: 1px solid var(--line); border-bottom: 0; justify-content: flex-end; gap: .5rem; }
.slide-panel-title { margin: 0; font-family: var(--font-ui); font-size: 1rem; font-weight: 600; }
.slide-panel-body { padding: 1.25rem; overflow-y: auto; flex: 1; }

.toast-container { position: fixed; top: calc(var(--nav-h) + 12px); right: 16px; z-index: 1400; display: flex; flex-direction: column; gap: .5rem; }
.toast { display: flex; align-items: center; gap: .65rem; min-width: 260px; max-width: 380px; padding: .75rem .9rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--info); border-radius: var(--rad); box-shadow: var(--shadow-md); font-size: .9rem; animation: llFadeUp .25s var(--ease); }
.toast.success { border-left-color: var(--success); } .toast.error { border-left-color: var(--danger); } .toast.warning { border-left-color: var(--warning); }
.toast-icon { font-size: .95rem; } .toast.success .toast-icon { color: var(--success); } .toast.error .toast-icon { color: var(--danger); } .toast.warning .toast-icon { color: var(--warning); } .toast.info .toast-icon { color: var(--info); }
.toast-message { flex: 1; }

.expandable-section { border: 1px solid var(--line); border-radius: var(--rad); background: var(--surface); margin-bottom: .75rem; }
.expandable-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .85rem 1rem; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 550; color: var(--ink-1); }
.expandable-trigger:hover { background: var(--surface-2); }
.expandable-trigger-icon { transition: transform .2s var(--ease); color: var(--ink-3); }
.expandable-section.expanded .expandable-trigger-icon { transform: rotate(180deg); }
.expandable-content { display: none; }
.expandable-section.expanded .expandable-content { display: block; }
.expandable-content-inner { padding: 0 1rem 1rem; }
.hidden { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   12 · TEXT-SIZE CONTROL (built by ll-a11y.js)
   ════════════════════════════════════════════════════════════════ */
.ll-a11y-btn {
    position: fixed; right: 18px; bottom: 18px; z-index: 1050;
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--surface); color: var(--accent-ink);
    border: 1px solid var(--line-2); box-shadow: var(--shadow-md);
    font-family: var(--font-display); font-size: 17px; line-height: 1;
    transition: transform .16s var(--ease), box-shadow .16s;
}
.ll-a11y-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg), var(--accent-glow); }
.ll-a11y-panel {
    display: none; position: fixed; right: 18px; bottom: 72px; z-index: 1050; min-width: 220px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg);
    padding: 14px 16px; box-shadow: var(--shadow-lg); font-family: var(--font-ui);
}
.ll-a11y-panel.ll-open { display: block; animation: llFadeUp .2s var(--ease); }
.ll-a11y-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); margin-bottom: 10px; }
.ll-a11y-row { display: flex; align-items: center; gap: 8px; }
.ll-a11y-step { width: 40px; height: 40px; border-radius: var(--rad-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-1); cursor: pointer; font-family: var(--font-display); display: grid; place-items: center; }
.ll-a11y-step:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-tint); }
.ll-a11y-step:disabled { opacity: .35; cursor: not-allowed; }
.ll-a11y-minus { font-size: 13px; } .ll-a11y-plus { font-size: 20px; }
.ll-a11y-value { flex: 1; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.ll-a11y-reset { margin-top: 10px; width: 100%; padding: 7px 0; border: 1px solid var(--line); border-radius: var(--rad-sm); background: none; color: var(--ink-2); font-size: 12.5px; cursor: pointer; }
.ll-a11y-reset:hover { color: var(--ink-1); border-color: var(--line-2); }
@media print { .ll-a11y-btn, .ll-a11y-panel, .ll-nav, .app-footer { display: none !important; } }

/* ════════════════════════════════════════════════════════════════
   13 · UTILITIES (ud-* kept for backwards compatibility)
   ════════════════════════════════════════════════════════════════ */
.ud-flex{display:flex!important}.ud-inline-flex{display:inline-flex!important;align-items:center!important}
.ud-flex-center{display:flex!important;align-items:center!important}
.ud-flex-between{display:flex!important;justify-content:space-between!important;align-items:center!important}
.ud-flex-end{display:flex!important;justify-content:flex-end!important}
.ud-flex-col{display:flex!important;flex-direction:column!important}.ud-flex-wrap{flex-wrap:wrap!important}
.ud-flex-1{flex:1!important;min-width:0!important}.ud-flex-shrink-0{flex-shrink:0!important}
.ud-grid-1{display:grid!important;grid-template-columns:1fr!important}
.ud-grid-2{display:grid!important;grid-template-columns:1fr 1fr!important}
.ud-grid-3{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
.ud-grid-auto{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}
.ud-gap-sm{gap:.5rem!important}.ud-gap-md{gap:1rem!important}.ud-gap-lg{gap:1.5rem!important}.ud-gap-xl{gap:2rem!important}
.ud-m0{margin:0!important}.ud-mt-0{margin-top:0!important}.ud-mt-1{margin-top:.25rem!important}.ud-mt-2{margin-top:.5rem!important}.ud-mt-3{margin-top:1rem!important}.ud-mt-4{margin-top:1.5rem!important}.ud-mt-5{margin-top:2rem!important}
.ud-mb-0{margin-bottom:0!important}.ud-mb-1{margin-bottom:.25rem!important}.ud-mb-2{margin-bottom:.5rem!important}.ud-mb-3{margin-bottom:1rem!important}.ud-mb-4{margin-bottom:1.5rem!important}.ud-mb-5{margin-bottom:2rem!important}
.ud-my-1{margin-block:.25rem!important}.ud-my-3{margin-block:1rem!important}.ud-my-5{margin-block:2rem!important}.ud-mx-auto{margin-inline:auto!important}
.ud-p-2{padding:.5rem!important}.ud-p-3{padding:1rem!important}.ud-p-4{padding:1.5rem!important}.ud-p-5{padding:2rem!important}
.ud-px-2{padding-inline:.5rem!important}.ud-px-3{padding-inline:1rem!important}.ud-py-2{padding-block:.5rem!important}.ud-py-3{padding-block:1rem!important}.ud-pt-3{padding-top:1rem!important}
.ud-text-xs{font-size:.78rem!important}.ud-text-sm{font-size:.875rem!important}.ud-text-md{font-size:.95rem!important}.ud-text-lg{font-size:1.1rem!important}.ud-text-xl{font-size:1.4rem!important}
.ud-fw-400{font-weight:400!important}.ud-fw-500{font-weight:500!important}.ud-fw-600{font-weight:600!important}.ud-fw-700{font-weight:650!important}
.ud-text-center{text-align:center!important}.ud-text-right{text-align:right!important}.ud-nowrap{white-space:nowrap!important}
.ud-italic{font-style:italic!important}.ud-prewrap{white-space:pre-wrap!important}
.ud-font-display,.ud-display-title{font-family:var(--font-display)!important;font-weight:420}
.ud-text1{color:var(--ink-1)!important}.ud-text2{color:var(--ink-2)!important}.ud-text3{color:var(--ink-3)!important}
.ud-accent{color:var(--accent-ink)!important}.ud-white{color:#fff!important}.ud-muted{opacity:.6!important}
.ud-success{color:var(--success)!important}.ud-danger{color:var(--danger)!important}.ud-warning{color:var(--warning)!important}
.ud-success-text{color:var(--success-ink)!important}.ud-danger-text{color:var(--danger-ink)!important}.ud-warning-text{color:var(--warning-ink)!important}
.ud-surface{background:var(--surface)!important}.ud-surface2{background:var(--surface-2)!important}.ud-surface3{background:var(--surface-3)!important}
.ud-accent-bg{background:var(--accent-strong)!important;color:#fff!important}
.ud-rounded{border-radius:var(--rad-sm)!important}.ud-rounded-lg{border-radius:var(--rad)!important}
.ud-border{border:1px solid var(--line)!important}.ud-border-top{border-top:1px solid var(--line)!important}.ud-border-bottom{border-bottom:1px solid var(--line)!important}
.ud-border-left{border-left:3px solid var(--line-2)!important}.ud-border-left-accent{border-left:3px solid var(--accent)!important}
.ud-w-full{width:100%!important}.ud-relative{position:relative!important}.ud-overflow-hidden{overflow:hidden!important}
.ud-hidden{display:none}
.ud-hidden:not([style*="display"]){display:none!important} /* hidden until JS sets style.display (fixes import/PayPal/analytics panels that never showed) */
.ud-pointer{cursor:pointer!important}
.ud-cover-img{width:100%!important;object-fit:cover!important;border-radius:var(--rad-sm)!important}
.ud-avatar,.ud-avatar-lg,.ud-avatar-xl{border-radius:50%!important;object-fit:cover!important;flex-shrink:0!important}
.ud-avatar{width:60px!important;height:60px!important}.ud-avatar-lg{width:80px!important;height:80px!important}.ud-avatar-xl{width:100px!important;height:100px!important}
.ud-code-inline{font-family:var(--font-mono);font-size:.85em;background:var(--surface-3);border:1px solid var(--line);border-radius:4px;padding:.05rem .35rem}
.ud-color-swatch{width:50px;height:40px;border:1px solid var(--line-2);border-radius:var(--rad-sm);cursor:pointer;transition:transform .15s,border-color .15s}
.ud-color-swatch:hover{transform:scale(1.06);border-color:var(--accent)}
.ud-icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--rad-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer}
.ud-icon-btn:hover{color:var(--ink-1);border-color:var(--line-2)}
.ud-pdf-btn{background:var(--surface)!important;color:var(--danger)!important;border-color:rgba(181,72,58,0.35)!important}
.ud-pdf-btn:hover{background:var(--danger)!important;color:#fff!important}
/* soft tinted fills replace the old saturated gradients */
.ud-gradient-gold{background:var(--accent-tint)!important;color:var(--accent-ink)!important}
.ud-gradient-blue{background:var(--info-soft)!important;color:var(--info)!important}
.ud-gradient-red{background:var(--danger-soft)!important;color:var(--danger)!important}
.ud-gradient-green{background:var(--success-soft)!important;color:var(--success)!important}
.ud-gradient-pink{background:rgba(142,108,138,0.12)!important;color:#6E4F6A!important}

/* ════════════════════════════════════════════════════════════════
   14 · RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .ll-nav-primary, .ll-nav-expanded, .ll-nav.ll-open .ll-nav-expanded, .ll-nav-user-badges { display: none !important; }
    .ll-nav-logo-ver { display: none; }
    body.ll-nav-open .dashboard-layout { padding-top: var(--nav-h); }
    body.has-imp-banner.ll-nav-open .dashboard-layout { padding-top: calc(var(--nav-h) + 38px); }
    .content-area { padding: 1.35rem 1rem 3rem; }
    .ud-grid-2, .ud-grid-3 { grid-template-columns: 1fr !important; }
}
/* mobile safety net for legacy page grids (replaces mobile-responsive.css + mobile-fixes-v3.7.71.css) */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }
    .content-area > * { max-width: 100%; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .stories-grid, .family-grid, .gallery-grid, .profile-grid, .password-grid, .coordinate-inputs, .social-link-row { grid-template-columns: 1fr !important; }
    .table-container, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .page-header, .section-header { flex-wrap: wrap; }
    .modal-content { max-width: calc(100vw - 20px) !important; }
    .settings-section-header { flex-direction: column !important; align-items: flex-start !important; gap: .5rem !important; }
    .settings-section-header-right, .settings-section-title { width: 100% !important; }
    .profile-layout, .profile-form-grid, .medical-layout, .settings-layout { grid-template-columns: 1fr !important; }
    .profile-sidebar { position: static !important; width: 100% !important; }
    .secrets-list-table, .media-list-table { display: block; overflow-x: auto; }
}
@media (max-width: 600px) {
    .page-header h1, .page-title { font-size: 1.5rem; }
    h1, .h1 { font-size: 1.85rem; }
    .ll-a11y-btn { right: 12px; bottom: 12px; }
    .ll-a11y-panel { right: 12px; bottom: 66px; }
    .toast-container { left: 12px; right: 12px; }
    .toast { max-width: none; }
}

/* ════════════════════════════════════════════════════════════════
   SELECT2 THEME (v3.8.3) — searchable multi-selects match .form-control
   ════════════════════════════════════════════════════════════════ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 42px; border: 1px solid var(--line-2); border-radius: var(--rad-sm); background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; color: var(--ink-1); padding-left: .85rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--accent); box-shadow: var(--accent-glow); }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex; align-items: center; gap: .25rem; margin: 6px 0 0 6px; padding: .1rem .55rem .1rem .35rem;
    border: 1px solid rgba(185,138,62,0.25); border-radius: var(--rad-pill); background: var(--accent-tint); color: var(--accent-ink); font-size: .82rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { position: static; border: 0; padding: 0 .2rem; color: var(--accent-ink); background: none; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { background: none; color: var(--danger); }
.select2-container--default .select2-search--inline .select2-search__field { margin-top: 9px; margin-left: .6rem; font-family: var(--font-ui); color: var(--ink-1); }
.select2-dropdown { border: 1px solid var(--line-2); border-radius: var(--rad-sm); background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--line-2); border-radius: var(--rad-sm); padding: .4rem .6rem; }
.select2-results__option { padding: .5rem .85rem; font-size: .9rem; color: var(--ink-1); }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--accent-tint); color: var(--accent-ink); }
.select2-container--default .select2-results__option--selected { background: var(--surface-2); }

/* ════════════════════════════════════════════════════════════════
   ICON GUARD (v3.8.3) — a text utility on an icon (e.g. class="fas fa-heartbeat
   j-stat-value") must not swap the icon font, or the glyph renders as a box
   ════════════════════════════════════════════════════════════════ */
i.fas, i.fa-solid       { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
i.far, i.fa-regular     { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; }
i.fab, i.fa-brands      { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* v3.8.3: native file pickers match .btn */
input[type=file] { font-family: var(--font-ui); font-size: .88rem; color: var(--ink-2); }
input[type=file]::file-selector-button {
    height: 32px; margin-right: .75rem; padding: 0 .85rem; border-radius: var(--rad-sm); cursor: pointer;
    font: inherit; font-weight: 550; color: var(--ink-1); background: var(--surface-2); border: 1px solid var(--line-2);
    transition: background .15s, border-color .15s;
}
input[type=file]::file-selector-button:hover { background: var(--surface-3); border-color: #CFC4B3; }

/* v3.8.4: chart box — give Chart.js a real height (maintainAspectRatio:false needs one) */
.ll-chart { position: relative; height: 260px; }
.ll-chart-sm { height: 200px; } .ll-chart-lg { height: 320px; }
@media (max-width: 640px) { .ll-chart { height: 220px; } }

/* v3.8.4: chart empty state (added by ll-charts.js when a dataset has no values) */
.ll-chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
    color: var(--ink-3); font-size: .85rem; pointer-events: none; }
.ll-chart-empty i { font-size: 1.3rem; color: var(--accent); opacity: .45; }

/* ── v3.8.13: LLDialog — toasts + anchored confirm (replaces browser alert/confirm) ─────── */
.ll-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 10050; display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, calc(100vw - 2rem)); }
.ll-toast { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .85rem; background: var(--surface); color: var(--ink-1); border: 1px solid var(--line); border-left: 3px solid var(--info);
    border-radius: var(--rad); box-shadow: var(--shadow-md); font-size: .88rem; line-height: 1.45; animation: llToastIn .22s var(--ease, ease) backwards; white-space: pre-line; }
.ll-toast > i { margin-top: .15rem; color: var(--info); }
.ll-toast span { flex: 1; min-width: 0; word-break: break-word; }
.ll-toast button { border: 0; background: none; color: var(--ink-3); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .1rem; }
.ll-toast.is-success { border-left-color: var(--success); } .ll-toast.is-success > i { color: var(--success); }
.ll-toast.is-error   { border-left-color: var(--danger); }  .ll-toast.is-error > i   { color: var(--danger); }
.ll-toast.is-warning { border-left-color: var(--warning); } .ll-toast.is-warning > i { color: var(--warning); }
.ll-toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
@keyframes llToastIn { from { opacity: 0; transform: translateY(8px); } }
.ll-pop { position: fixed; z-index: 10060; width: max-content; max-width: min(360px, calc(100vw - 24px)); padding: .9rem 1rem .8rem; background: var(--surface); color: var(--ink-1);
    border: 1px solid var(--line-2); border-radius: var(--rad-lg); box-shadow: var(--shadow-lg); animation: llToastIn .16s ease backwards; }
.ll-pop.is-danger { border-top: 3px solid var(--danger); }
.ll-pop p { margin: 0 0 .8rem; font-size: .9rem; line-height: 1.5; white-space: pre-line; }
.ll-pop-actions { display: flex; justify-content: flex-end; gap: .45rem; }
@media (max-width: 560px) { .ll-toasts { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; } }

/* v3.8.13: member theme toggle (moon / sun) */
.ll-theme-toggle { width: 34px; height: 34px; display: inline-grid; place-items: center; flex-shrink: 0; margin-right: .5rem; border: 1px solid var(--line); border-radius: 50%;
    background: var(--surface); color: var(--ink-2); cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); }
.ll-theme-toggle:hover { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ll-theme-toggle:focus-visible { outline: none; box-shadow: var(--accent-glow); }

/* v3.8.13: select2.min.css loads after this file and forces white — win on specificity so dark mode applies */
html .select2-container--default .select2-selection--single,
html .select2-container--default .select2-selection--multiple,
html .select2-dropdown { background-color: var(--surface); }
html .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--surface-2); color: var(--ink-1); border-color: var(--line-2); }
html .select2-container--default .select2-search--inline .select2-search__field { color: var(--ink-1); }