@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

/* ─── Design tokens ─────────────────────────────────────────────── */
:root {
    /* Brand hues */
    --ind-blue: #0C8BEE;
    --ind-blue-mid: #3da5f0;
    --ind-blue-light: #e0f0fd;
    --ind-blue-pale: #f0f7ff;
    --ind-blue-dark: #052767;
    --ind-purple: #3a0647;
    --ind-accent: #0251cc;
    --ind-accent-soft: #dbeafe;

    /* Semantic colors */
    --bg-page: #f0f6ff;
    --bg-surface: #ffffff;
    --bg-raised: #f8faff;
    --bg-sunken: #eef2f9;
    --bg-overlay: rgba(5,39,103,0.32);
    --bg-toast: rgba(255,255,255,0.92);
    --bg-header: rgba(255,255,255,0.78);
    --bg-favicon: #ffffff;
    --bg-brand-glass: rgba(255,255,255,0.12);
    --bg-brand-glass-strong: rgba(255,255,255,0.25);

    --fg-primary: #1a2340;
    --fg-secondary: #3a4660;
    --fg-muted: #4a5a7a;
    --fg-disabled: #8fa0bc;
    --fg-inverse: #ffffff;
    --fg-on-accent: #ffffff;
    --fg-on-brand-muted: rgba(255,255,255,0.78);

    --border-subtle: #eef2f9;
    --border-default: #dce8f8;
    --border-strong: #b8cfee;
    --border-on-brand: rgba(255,255,255,0.5);

    --accent: var(--ind-accent);
    --accent-hover: var(--ind-blue-dark);
    --accent-soft: var(--ind-accent-soft);
    --accent-fg: #ffffff;

    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --success-soft: #dcfce7;
    --warning-soft: #fef3c7;
    --danger-soft: #fef2f2;

    --shadow-sm: 0 1px 2px rgba(5,39,103,0.06);
    --shadow-md: 0 2px 8px rgba(5,39,103,0.08);
    --shadow-lg: 0 8px 24px rgba(5,39,103,0.10);
    --shadow-xl: 0 16px 40px rgba(5,39,103,0.14);
    --shadow-pressed: inset 0 1px 2px rgba(5,39,103,0.12);
    --shadow-focus-ring: 0 0 0 3px rgba(12,139,238,0.32);
    --shadow-appbar: var(--shadow-md);

    /* Legacy aliases */
    --surface: var(--bg-surface);
    --surface-raised: var(--bg-raised);
    --surface-page: var(--bg-page);
    --border-light: var(--border-default);
    --text-primary: var(--fg-primary);
    --text-muted: var(--fg-muted);
    --text-light: var(--fg-disabled);

    color-scheme: light;

    /* Type scale */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --fw-regular: 450;
    --fw-medium: 550;
    --fw-semibold: 650;
    --fw-bold: 750;
    --fs-display: clamp(2rem, 4vw, 2.75rem);
    --fs-h1: clamp(1.5rem, 2.5vw, 1.875rem);
    --fs-h2: clamp(1.25rem, 2vw, 1.5rem);
    --fs-h3: 1.125rem;
    --fs-body: 0.9375rem;
    --fs-small: 0.8125rem;
    --fs-caption: 0.75rem;
    --lh-tight: 1.2;
    --lh-base: 1.5;
    --lh-relaxed: 1.65;
    --ls-tight: 0;
    --ls-wide: 0.05em;

    /* Radii / motion */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    --radius-card:     var(--radius-lg);
    --radius-btn:      8px;
    --radius-input:    8px;
    --shadow-card:     var(--shadow-md);
    --shadow-card-hover: var(--shadow-lg);
    --shadow-card-active: var(--shadow-sm);
    --lift-hover-y: -2px;
    --lift-active-y: 0;
    --transition:      180ms ease;
    --ease-standard: cubic-bezier(.2,0,0,1);
    --ease-emphasized: cubic-bezier(.2,.8,.2,1);
    --ease-decelerate: cubic-bezier(0,0,.2,1);
    --dur-fast: 120ms;
    --dur-base: 220ms;
    --dur-slow: 360ms;
    --stagger-1: 40ms;
    --stagger-2: 90ms;
    --stagger-3: 140ms;
    --stagger-4: 190ms;

    /* Mobile chrome sizing for popup safe bounds */
    --mobile-header-height: 56px;
    --mobile-footer-height: 64px;
}

[data-theme="dark"] {
    --bg-page: #0a1020;
    --bg-surface: #131a2e;
    --bg-raised: #1b2340;
    --bg-sunken: #0d1426;
    --bg-overlay: rgba(0,0,0,0.6);
    --bg-toast: rgba(19,26,46,0.92);
    --bg-header: rgba(19,26,46,0.78);
    --bg-favicon: #ffffff;

    --fg-primary: #e6ecfa;
    --fg-secondary: #b8c2dc;
    --fg-muted: #9aa6c4;
    --fg-disabled: #5a6680;
    --fg-inverse: #0a1020;
    --fg-on-accent: #ffffff;

    --border-subtle: #1f284a;
    --border-default: #2a345a;
    --border-strong: #3a4670;

    --accent: #4ea3f5;
    --accent-hover: #76b8f7;
    --accent-soft: rgba(78,163,245,0.15);
    --accent-fg: #0a1020;

    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
    --success-soft: rgba(74,222,128,0.12);
    --warning-soft: rgba(251,191,36,0.12);
    --danger-soft: rgba(248,113,113,0.12);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 2px 12px rgba(0,0,0,0.45);
    --shadow-lg: 0 8px 28px rgba(0,0,0,0.5);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.55);
    --shadow-pressed: inset 0 1px 2px rgba(0,0,0,0.5);
    --shadow-focus-ring: 0 0 0 3px rgba(78,163,245,0.45);

    color-scheme: dark;
}

/* ─── Global page background ─────────────────────────────────────── */
html, body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--bg-page);
    color: var(--fg-primary);
    overscroll-behavior: contain;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

small, .text-small {
    font-size: var(--fs-small);
}

.text-caption {
    font-size: var(--fs-caption);
    color: var(--fg-muted);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-weight: var(--fw-medium);
}

:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
    border-radius: inherit;
}

.e-btn:focus-visible,
.e-input:focus-visible,
.e-list-item:focus-visible,
.tab-item:focus-visible,
.seg-tab:focus-visible,
.theme-opt:focus-visible {
    outline: none !important;
    box-shadow: var(--shadow-focus-ring) !important;
}

button, .e-btn {
    transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

button:active, .e-btn:active {
    transform: scale(0.97);
}

/* ─── Shared page section ────────────────────────────────────────── */
.page-section {
    padding: 1.5rem;
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    box-sizing: border-box;
}

/* ─── Page title row ─────────────────────────────────────────────── */
.page-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.page-title-row h3, .page-title-row h4 {
    margin: 0;
    font-weight: 700;
    color: var(--accent-hover);
}

/* ─── Modern card ────────────────────────────────────────────────── */
.ind-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-card);
    transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.ind-card:hover {
    transform: translateY(var(--lift-hover-y));
    box-shadow: var(--shadow-card-hover);
}

.ind-card:active {
    transform: translateY(var(--lift-active-y));
    box-shadow: var(--shadow-card-active);
}

.elevated {
    box-shadow: var(--shadow-card);
}

.elevated-interactive {
    transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.elevated-interactive:hover {
    transform: translateY(var(--lift-hover-y));
    box-shadow: var(--shadow-card-hover);
}

.elevated-interactive:active {
    transform: translateY(var(--lift-active-y));
    box-shadow: var(--shadow-card-active);
}

/* ─── Action icon button ─────────────────────────────────────────── */
.ind-icon-btn .e-icons {
    color: var(--accent);
    font-size: 20px;
}

/* ─── Loading spinner ────────────────────────────────────────────── */
.ind-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
    color: var(--fg-muted);
    font-size: 0.9375rem;
}

.ind-spinner .spinner-ring {
    width: 36px;
    height: 36px;
    border: 3px solid var(--ind-blue-light);
    border-top-color: var(--ind-blue);
    border-radius: 50%;
    animation: ind-spin 0.7s linear infinite;
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-raised) 0%, var(--border-default) 50%, var(--bg-raised) 100%);
    background-size: 1000px 100%;
    animation: shimmer 1.6s linear infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 0.875rem;
    margin-bottom: 0.5rem;
}

.skeleton-text.lg {
    height: 1.25rem;
}

.skeleton-text.short {
    width: 40%;
}

.skeleton-text.med {
    width: 70%;
}

.skeleton-circle {
    border-radius: var(--radius-pill);
}

.skeleton-card {
    border-radius: var(--radius-lg);
    padding: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
}

.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

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

/* ─── Empty state ────────────────────────────────────────────────── */
.ind-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
    color: var(--fg-muted);
    text-align: center;
}

.ind-empty .e-icons,
.ind-empty .material-icons {
    font-size: 2.5rem;
    color: var(--ind-blue-light);
}

/* ─── Inline alert banners ───────────────────────────────────────── */
.ind-alert {
    border-radius: var(--radius-card);
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.ind-alert-warn {
    background: var(--warning-soft);
    border-color: var(--warning);
    color: var(--warning);
}

.ind-alert-success {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
}

/* ─── Not-authorized placeholder ────────────────────────────────── */
.ind-unauth {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    padding: 2rem;
    text-align: center;
    color: var(--fg-muted);
    margin-top: 2rem;
}

a, .btn-link {
    color: var(--accent);
}

.btn-primary {
    color: var(--fg-on-accent);
    background-color: var(--accent);
    border-color: var(--accent-hover);
    border-radius: var(--radius-btn);
    transition: background-color var(--transition), box-shadow var(--transition);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 4px 12px var(--shadow-md);
}

app {
    position: relative;
    display: flex;
    /*flex-direction: column;*/ /*This is removed to enable column width to be set correctly in Chrome Extension*/
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

h1, h2, h3, h4, h5 {
    color: var(--fg-primary);
}

.main {
    flex: 1;
}

    .main .top-row {
        background-color: var(--bg-raised);
        border-bottom: 1px solid var(--border-default);
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

.main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar {
    background-image: linear-gradient(180deg, var(--accent-hover) 0%, var(--ind-purple) 100%); /* Indevices branding */
}

    .sidebar .top-row {
        background-color: var(--bg-overlay);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: var(--fg-on-brand-muted);
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: var(--bg-brand-glass-strong);
                color: var(--fg-on-accent);
            }

            .sidebar .nav-item a:hover {
                background-color: var(--bg-brand-glass);
                color: var(--fg-on-accent);
            }

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: var(--bg-brand-glass);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

#blazor-error-ui {
    background: var(--warning-soft);
    bottom: 0;
    box-shadow: 0 -1px 2px var(--shadow-sm);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar {
        width: 250px;
        height: 100dvh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.fade-up {
    animation: fade-up var(--dur-base) var(--ease-emphasized) both;
}

.fade-delay-1 { animation-delay: var(--stagger-1); }
.fade-delay-2 { animation-delay: var(--stagger-2); }
.fade-delay-3 { animation-delay: var(--stagger-3); }
.fade-delay-4 { animation-delay: var(--stagger-4); }

.fade-in {
    animation: fade-in var(--dur-base) var(--ease-standard) both;
}

.scale-in {
    animation: scale-in var(--dur-base) var(--ease-emphasized) both;
}

/* Toasts */
.toast-stack {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 1rem);
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2000;
    max-width: 380px;
    pointer-events: none;
}

.toast-stack > * { pointer-events: auto; }

.toast-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: var(--bg-toast);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    font-size: var(--fs-small);
    color: var(--fg-primary);
}

.toast-success { border-left-color: var(--success); }
.toast-success .toast-icon { color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info .toast-icon { color: var(--accent); }

.toast-icon { font-size: 1.125rem; flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; }
.toast-body strong { font-weight: var(--fw-semibold); font-size: var(--fs-body); }

.toast-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--fg-muted);
    padding: 2px;
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast);
}

.toast-close:hover { background: var(--bg-raised); color: var(--fg-primary); }

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.4;
    animation: toast-progress linear forwards;
    width: 100%;
}

.toast-success .toast-progress { color: var(--success); }
.toast-error .toast-progress { color: var(--danger); }
.toast-warning .toast-progress { color: var(--warning); }
.toast-info .toast-progress { color: var(--accent); }

@keyframes toast-progress { from { transform: scaleX(1); transform-origin: left; } to { transform: scaleX(0); transform-origin: left; } }

/* Responsive dialog */
.rdialog {
    border: none;
    padding: 0;
    background: var(--bg-surface);
    color: var(--fg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 480px;
    width: calc(100% - 2rem);
    max-height: 85dvh;
    overflow: hidden;
    flex-direction: column;
}

.rdialog[open] { display: flex; animation: scale-in var(--dur-base) var(--ease-emphasized); }

.rdialog::backdrop {
    background: var(--bg-overlay);
    backdrop-filter: blur(4px);
    animation: fade-in var(--dur-base) var(--ease-standard);
}

.rdialog-grabber { display: none; }

.rdialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border-default);
}

.rdialog-header h2 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

.rdialog-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-pill);
    color: var(--fg-muted);
    transition: background var(--dur-fast);
}

.rdialog-close:hover { background: var(--bg-raised); color: var(--fg-primary); }

.rdialog-body { padding: 1.25rem; overflow-y: auto; flex: 1; min-height: 0; }

.rdialog-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border-default);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    background: var(--bg-raised);
}

.rdialog-footer:empty { display: none; }

.rdialog.modal-new-goal {
    /* Desktop: inherit centered <dialog> defaults from .rdialog. */
    max-height: min(320px, 85dvh);
}

.rdialog.modal-new-goal .rdialog-body {
    flex: 0 0 auto;
    overflow: visible;
}

.rdialog.modal-new-goal[open] {
    animation: none !important;
}

.modal-new-goal-field {
    margin: 0;
    position: relative;
    z-index: 2;
}

.modal-new-goal-field > label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--fg-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.rdialog.modal-new-goal .modal-new-goal-input {
    width: 100%;
    min-height: 44px;
    height: 44px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--fg-primary) !important;
    -webkit-text-fill-color: var(--fg-primary);
    box-sizing: border-box;
    padding: 0 0.875rem;
    line-height: 1.25;
    position: relative;
    z-index: 3;
}

.rdialog.modal-new-goal .modal-new-goal-input:focus,
.rdialog.modal-new-goal .modal-new-goal-input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-focus-ring);
}

@supports (-webkit-touch-callout: none) {
    .rdialog.modal-new-goal {
        width: min(480px, calc(100% - max(1rem, env(safe-area-inset-left) + env(safe-area-inset-right))));
        max-height: min(320px, 80dvh);
    }

    .rdialog.modal-new-goal .rdialog-body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Inputs */
.e-input-group, .e-control-wrapper, .e-textbox-wrap {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-default) !important;
    background: var(--bg-surface) !important;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    min-height: 44px;
    box-sizing: border-box;
    box-shadow: none !important;
    outline: none !important;
}

.e-input-group::before,
.e-input-group::after,
.e-control-wrapper::before,
.e-control-wrapper::after,
.e-textbox-wrap::before,
.e-textbox-wrap::after {
    display: none !important;
}

.e-control-wrapper .e-input-group,
.e-control-wrapper .e-textbox-wrap,
.e-input-group .e-input-group {
    border: 0 !important;
    box-shadow: none !important;
    min-height: auto;
}

.e-input-group:hover, .e-control-wrapper:hover, .e-textbox-wrap:hover { border-color: var(--border-strong) !important; }

.e-input-group.e-input-focus, .e-control-wrapper.e-input-focus,
.e-input-group:focus-within,
.e-control-wrapper:focus-within,
.e-textbox-wrap:focus-within {
    border-color: var(--accent) !important;
    box-shadow: var(--shadow-focus-ring) !important;
}

.e-input { font-family: var(--font-sans) !important; font-size: var(--fs-body) !important; color: var(--fg-primary) !important; }
.e-input-group input.e-input,
.e-control-wrapper input.e-input {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    min-height: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 0.875rem !important;
}
.e-input-group textarea.e-input,
.e-control-wrapper textarea.e-input {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: var(--lh-base) !important;
    padding: 0.75rem 0.875rem !important;
}
.e-ddl.e-control-wrapper,
.e-dropdownlist.e-control-wrapper,
.e-control-wrapper.e-ddl {
    display: flex !important;
    align-items: center !important;
}
.e-ddl.e-control-wrapper .e-input,
.e-dropdownlist.e-control-wrapper .e-input,
.e-control-wrapper.e-ddl .e-input {
    display: flex !important;
    align-items: center !important;
}
.e-float-text, .e-input-group .e-float-text { color: var(--fg-muted) !important; font-weight: var(--fw-medium); }
.e-input::placeholder { color: var(--fg-muted); opacity: 1; }
.e-input-group.e-input-focus .e-float-text,
.e-input-group.e-valid-input .e-float-text { color: var(--accent) !important; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    padding: 0.625rem 1.125rem;
    min-height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
    text-decoration: none;
    line-height: 1;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary, .e-btn.btn-primary {
    background: var(--accent);
    color: var(--fg-on-accent);
    border-color: var(--accent);
}

.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-secondary, .e-btn.btn-secondary {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

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

.btn-ghost, .e-btn.btn-ghost {
    background: transparent;
    color: var(--fg-primary);
    border-color: transparent;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: var(--bg-raised);
    color: var(--fg-primary);
}

[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn-ghost:focus-visible {
    color: var(--fg-primary);
}

.btn-danger, .e-btn.btn-danger { background: var(--danger); color: var(--fg-on-accent); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); }
.btn-icon { width: 44px; padding: 0; }
.btn-sm { min-height: 44px; padding: 0.375rem 0.75rem; font-size: var(--fs-small); }
.btn-lg { min-height: 52px; padding: 0.875rem 1.5rem; font-size: 1rem; }

.btn-fab {
    position: fixed;
    right: 1.25rem;
    bottom: calc(72px + env(safe-area-inset-bottom) + 1rem);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--ind-blue), var(--ind-purple));
    color: var(--fg-on-accent);
    border: none;
    box-shadow: var(--shadow-lg);
    z-index: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-emphasized), box-shadow var(--dur-base);
}

.btn-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); }
.btn-fab:active { transform: scale(0.94); }

@media (max-width: 640px) {
    .toast-stack {
        top: calc(env(safe-area-inset-top) + 0.5rem);
        left: 0.75rem;
        right: 0.75rem;
        max-width: none;
        align-items: stretch;
    }

    .rdialog {
        position: fixed;
        top: calc(env(safe-area-inset-top) + var(--mobile-header-height) + 0.5rem);
        right: max(0.5rem, env(safe-area-inset-right));
        bottom: calc(env(safe-area-inset-bottom) + var(--mobile-footer-height) + 0.5rem);
        left: max(0.5rem, env(safe-area-inset-left));
        /* Explicit height so Safari/WebKit computes the flex layout correctly.
           <dialog> in the top layer does not derive height from top+bottom alone. */
        height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--mobile-header-height) - var(--mobile-footer-height) - 1rem);
        max-width: none;
        width: auto;
        max-height: none;
        margin: 0;
        border-radius: var(--radius-lg);
        padding-bottom: 0;
    }

    .rdialog.modal-new-goal {
        /* Inherit mobile bottom-sheet positioning from .rdialog above. */
        max-height: none;
    }

    .rdialog[open] { animation: slide-up var(--dur-base) var(--ease-emphasized) !important; }

    .rdialog.modal-new-goal[open] { animation: none !important; }

    .rdialog-grabber {
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border-default);
        border-radius: var(--radius-pill);
        margin: 0.625rem auto 0;
    }

    .rdialog.modal-new-goal .rdialog-grabber {
        display: none;
    }

    /* Keep Syncfusion popups aligned with inputs and clear of sticky header/footer */
    .e-popup,
    .e-popup.e-control,
    .e-dropdown-popup,
    .e-ddl.e-popup,
    .e-ddl.e-popup.e-popup-open {
        z-index: 2200 !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--mobile-header-height) - var(--mobile-footer-height) - 1rem) !important;
    }

    .e-dropdown-popup .e-content,
    .e-ddl.e-popup .e-content {
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--mobile-header-height) - var(--mobile-footer-height) - 4.5rem) !important;
    }
}

@media (min-width: 769px) {
    .btn-fab { bottom: 1.5rem; right: 1.5rem; }
}

@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* PR 4 Focus dashboard */
.focus-page {
    width: min(100%, 1120px);
    max-width: 1120px;
}

/* ── Search page ── */
.search-page { max-width: 640px; }
.search-input-wrap { position: relative; display: flex; align-items: center; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 0 0.75rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-fast), border-color var(--dur-fast); }
.search-input-wrap:focus-within { box-shadow: var(--shadow-focus-ring); border-color: var(--accent); }
.search-icon { color: var(--fg-muted); font-size: 1rem; flex-shrink: 0; }
.search-input { flex: 1; border: none; outline: none; background: transparent; font-size: var(--fs-body); color: var(--fg-primary); padding: 0.625rem 0.5rem; }
.search-input:focus, .search-input:focus-visible { outline: none; box-shadow: none; }
.search-input::placeholder { color: var(--fg-muted); }
.search-clear { flex-shrink: 0; }
.search-prompt { padding: 2rem 0; text-align: center; }
.search-prompt-text { color: var(--fg-muted); margin: 0; }
.search-group { margin-bottom: 1.5rem; }
.search-group-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.search-group-head h3 { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); }
.search-result-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--bg-raised); flex-shrink: 0; color: var(--fg-secondary); }
.search-goal-badge { display: inline-block; margin-left: 0.4em; font-size: 0.7rem; color: var(--fg-muted); }

.hero-card {
    background: linear-gradient(135deg, var(--ind-blue) 0%, var(--ind-purple) 100%);
    color: var(--fg-on-accent);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.hero-card::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--bg-brand-glass), transparent 70%);
    border-radius: 50%;
}

.hero-card > * { position: relative; z-index: 1; }
.hero-greeting .text-caption { color: var(--fg-on-brand-muted); }
.hero-greeting h2 { color: var(--fg-on-accent); margin: 0.25rem 0 1.25rem; font-size: var(--fs-h1); font-weight: var(--fw-semibold); }
.hero-focus-label { font-size: var(--fs-caption); letter-spacing: var(--ls-wide); opacity: 0.8; }
.hero-focus h3 { color: var(--fg-on-accent); font-size: 1.25rem; margin: 0.375rem 0 1rem; line-height: var(--lh-tight); }
.hero-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hero-actions .btn-primary { background: var(--fg-on-accent); color: var(--accent); border-color: var(--fg-on-accent); }
.hero-actions .btn-primary:hover { background: var(--accent-soft); }
.hero-actions .btn-secondary { background: transparent; color: var(--fg-on-accent); border-color: var(--border-on-brand); }
.hero-actions .btn-secondary:hover { background: var(--bg-brand-glass); }
.hero-empty p { margin: 0 0 0.875rem; opacity: 0.9; }

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.stat-pill {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.75rem;
    font-size: var(--fs-small);
    color: var(--fg-muted);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-align: center;
}

.stat-pill span { font-size: 1.25rem; font-weight: var(--fw-semibold); color: var(--fg-primary); }
.stat-open span { color: var(--accent); }
.stat-focus span { color: var(--ind-purple); }
.stat-done span { color: var(--success); }

.section-head { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 0.75rem; gap: 1rem; }
.section-head h3 { margin: 0; }
.goals-desktop { display: none; }
.goals-mobile { display: block; }
.focus-assets-section { margin-top: 1.25rem; }

@media (min-width: 769px) {
    .goals-desktop { display: block; }
    .goals-mobile { display: none; }
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    text-align: center;
    background: var(--bg-surface);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg);
    gap: 0.5rem;
}

.empty-state h3 { margin: 0.5rem 0 0; font-size: var(--fs-h3); }
.empty-state p { margin: 0 0 0.875rem; color: var(--fg-muted); max-width: 32ch; }
.empty-illustration { line-height: 0; opacity: 0.95; }

/* Mobile goal list */
.goal-list { display: flex; flex-direction: column; gap: 1.25rem; }
.goal-group-head { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.25rem 0.5rem; font-size: var(--fs-small); color: var(--fg-muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.status-open { background: var(--accent); }
.status-infocus { background: var(--ind-purple); }
.status-completed { background: var(--success); }
.goal-group-name { font-weight: var(--fw-semibold); color: var(--fg-primary); text-transform: capitalize; }
.goal-group-count { background: var(--bg-raised); color: var(--accent); padding: 0 0.5rem; border-radius: var(--radius-pill); font-weight: var(--fw-semibold); }

.goal-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
}

.goal-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.goal-row:active { transform: scale(0.99); }
.goal-row-body { flex: 1; min-width: 0; }
.goal-row-body h4 { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.goal-row-body p { margin: 0.25rem 0 0; font-size: var(--fs-small); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-row-chev { color: var(--fg-muted); }

/* Desktop Kanban polish */
.goal-kanban { display: block; }
.goal-kanban .e-kanban-content { min-height: 260px; }
.goal-kanban .e-card { border: none !important; background: transparent !important; box-shadow: none !important; }
.goal-kanban .e-card-content { padding: 0 !important; }
.kanban-header-chip { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--fg-primary); }
.kanban-goal-card { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 0.875rem 1rem; }
.kanban-card-grip { color: var(--fg-muted); cursor: grab; padding-top: 0.125rem; }
.kanban-card-body { flex: 1; min-width: 0; }
.kanban-card-body h4 { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; }
.kanban-card-actions { display: flex; align-items: center; gap: 0.125rem; flex-wrap: wrap; margin-top: 0.625rem; }

@media (max-width: 768px) {
    .goal-kanban { display: none; }
}

/* Assets cards */
.asset-section { position: relative; }
.segmented-tabs { position: relative; display: inline-flex; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 4px; margin: 0 0 1rem; }
.segmented-tabs-2,
.segmented-tabs-3 { display: flex; width: 100%; max-width: 360px; }
.segmented-tabs-2 .seg-tab,
.segmented-tabs-3 .seg-tab { flex: 1 1 0; justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }
.seg-tab { position: relative; z-index: 1; background: transparent; border: none; padding: 0.5rem 1.125rem; min-height: 44px; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--fg-muted); border-radius: var(--radius-pill); cursor: pointer; transition: color var(--dur-base); display: inline-flex; align-items: center; gap: 0.375rem; }
.seg-tab.active { color: var(--accent); }
.seg-count { background: var(--accent-soft); color: var(--accent); padding: 0 0.5rem; border-radius: var(--radius-pill); font-size: var(--fs-caption); }
.seg-indicator { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--bg-surface); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-emphasized); }
[data-theme="dark"] .seg-indicator { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); border: none; }
.seg-discard { transform: translateX(100%); }
.segmented-tabs-3 .seg-read { transform: translateX(100%); }
.segmented-tabs-3 .seg-discard { transform: translateX(200%); }

.asset-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.asset-card { display: flex; align-items: center; gap: 0.25rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: box-shadow var(--dur-fast), border-color var(--dur-fast); overflow: hidden; }
.asset-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.asset-card-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 0.5rem 0.875rem 1rem; background: transparent; border: none; color: inherit; text-align: left; cursor: pointer; }
.asset-card-main:hover { background: transparent; }
.asset-card-actions { display: flex; align-items: center; gap: 0; padding-right: 0.375rem; flex-shrink: 0; }
.ui-icon { width: 1rem; height: 1rem; display: block; flex-shrink: 0; }
.asset-action-btn { color: var(--fg-muted); text-decoration: none; }
.asset-action-btn:hover { color: var(--accent); }
.asset-action-delete:hover { color: var(--danger) !important; }
.asset-action-read:hover { color: var(--success) !important; }
.asset-favicon { width: 36px; height: 36px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--bg-favicon); padding: 4px; }
.asset-body { flex: 1; min-width: 0; }
.asset-body h4 { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-host { font-size: var(--fs-small); color: var(--fg-muted); }
.asset-chev { color: var(--fg-muted); }

/* Pull to refresh */
.ptr-indicator { height: 0; overflow: hidden; transition: height var(--dur-base); display: flex; align-items: center; justify-content: center; }
.ptr-spinner { width: 24px; height: 24px; border: 3px solid var(--border-default); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
.ptr-indicator.refreshing .ptr-spinner { animation-duration: 0.6s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* PR 5 Forms and page polish */
.field {
    position: relative;
    display: block;
    padding-top: 0.875rem;
    margin-bottom: 1rem;
}

.field-label {
    position: absolute;
    top: 1.5rem;
    left: 0.875rem;
    color: var(--fg-muted);
    font-size: var(--fs-body);
    pointer-events: none;
    transform-origin: left top;
    transition: transform var(--dur-base) var(--ease-emphasized), color var(--dur-base);
    background: var(--bg-surface);
    padding: 0 0.25rem;
    z-index: 2;
}

.field.is-focused .field-label,
.field.has-value .field-label {
    transform: translateY(-1.4rem) scale(0.78);
    color: var(--accent);
}

.field.has-error .field-label { color: var(--danger); }
.field.has-error .e-input-group,
.field.has-error .e-control-wrapper { border-color: var(--danger) !important; }

.field-helper,
.field-error {
    display: block;
    font-size: var(--fs-caption);
    margin-top: 0.375rem;
    padding-left: 0.875rem;
    color: var(--fg-muted);
}

.field-error { color: var(--danger); display: inline-flex; align-items: center; gap: 0.25rem; }
.field .e-input-group,
.field .e-control-wrapper { width: 100%; }

.autosave { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--fs-caption); color: var(--fg-muted); }
.autosave-saved { color: var(--success); }
.autosave-error { color: var(--danger); }
.autosave .ptr-spinner { width: 12px; height: 12px; border-width: 2px; }

.form-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.form-context { display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 0.75rem; }
.form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.form-actions-inline { justify-content: flex-start; border-top: none; padding-top: 0; margin: -0.25rem 0 1rem; }
.form-subsection { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.875rem 1rem; margin-bottom: 1rem; }
.form-subsection header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.form-subsection h3 { margin: 0; font-size: var(--fs-body); }
.inline-actions { display: flex; align-items: center; gap: 0.25rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0.75rem 0 0; }
.chip-item { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 0.375rem 0.75rem; font-size: var(--fs-small); cursor: pointer; }
.chip-item.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.chip-item .chip-name { line-height: 1; }
.chip-item .chip-social { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-pill); color: var(--fg-default); text-decoration: none; opacity: 0.85; }
.chip-item .chip-social svg { display: block; }
.chip-item .chip-social:hover { color: var(--accent); background: var(--accent-soft); opacity: 1; }
.chip-item.selected .chip-social { color: var(--accent); }

.url-preview { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 0.375rem 0.75rem; font-size: var(--fs-small); color: var(--fg-muted); margin: -0.5rem 0 1rem; }
.url-preview img { width: 18px; height: 18px; border-radius: var(--radius-xs); }

@media (max-width: 640px) {
    .form-card { padding: 1.25rem; }
    .form-actions { position: sticky; bottom: 0; background: var(--bg-surface); padding-bottom: env(safe-area-inset-bottom); margin: 1rem -1.25rem -1.25rem; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); }
    .form-actions-inline { position: static; margin: -0.25rem 0 1rem; padding: 0; }
}

.profile-hero { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 1rem; }
.avatar { width: 64px; height: 64px; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--ind-blue), var(--ind-purple)); color: var(--fg-on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: var(--fw-semibold); flex-shrink: 0; }
.profile-meta { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.profile-meta h2 { margin: 0; font-size: 1.25rem; }
.tier-badge { align-self: flex-start; font-size: var(--fs-caption); font-weight: var(--fw-semibold); padding: 0.125rem 0.5rem; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-pill); margin-top: 0.25rem; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1.25rem; }
.profile-stat { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.75rem; text-align: center; display: flex; flex-direction: column; gap: 0.25rem; }
.stat-num { font-size: 1.5rem; font-weight: var(--fw-semibold); color: var(--accent); }
.stat-label { font-size: var(--fs-caption); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.profile-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.profile-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 1rem; }
.profile-card-head h3 { margin: 0; font-size: 1rem; }
.focus-list { list-style: none; padding: 0; margin: 0; }
.focus-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0; border-bottom: 1px solid var(--border-default); }
.focus-item:last-child { border-bottom: none; }
.focus-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.focus-name { flex: 1; font-weight: var(--fw-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-default); }
.pref-row:last-child { border-bottom: none; }
.pref-row strong { display: block; font-size: var(--fs-body); }
.pref-row p { margin: 0; font-size: var(--fs-small); color: var(--fg-muted); }
.profile-advanced { margin-top: 1.5rem; }
.profile-advanced summary { cursor: pointer; padding: 0.5rem 0; color: var(--fg-muted); font-weight: var(--fw-medium); }
.danger-zone { background: var(--danger-soft); border: 1px solid var(--danger); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-top: 0.75rem; }
.danger-zone h4 { margin: 0 0 0.25rem; color: var(--danger); }
.danger-zone p { margin: 0 0 0.75rem; font-size: var(--fs-small); color: var(--fg-muted); }
.theme-toggle {
    display: inline-flex;
    background: var(--bg-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 3px;
    gap: 2px;
}

.theme-opt {
    background: transparent;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
    min-height: 44px;
}

.theme-opt:hover { color: var(--fg-primary); }
.theme-opt.active { background: var(--bg-surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.theme-opt-label { display: inline; }

@media (max-width: 420px) {
    .theme-opt-label { display: none; }
}

.asset-hero { display: flex; gap: 1rem; align-items: center; background: linear-gradient(135deg, var(--bg-raised), var(--bg-surface)); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.25rem; }
.asset-hero-favicon { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--bg-favicon); padding: 8px; box-shadow: var(--shadow-sm); }
.asset-hero-body { flex: 1; min-width: 0; }
.asset-hero-body h1 { margin: 0; font-size: 1.375rem; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.asset-hero-host { font-size: var(--fs-small); color: var(--accent); display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: none; }
.asset-hero-host:hover { text-decoration: underline; }
.asset-goal-badge { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.375rem; font-size: var(--fs-caption); color: var(--fg-muted); }
.segmented-tabs-2 .seg-takeaways { transform: translateX(100%); }
.segmented-tabs-3 .seg-indicator { width: calc(33.333% - 4px); }
.segmented-tabs-3 .seg-takeaways { transform: translateX(100%); }
.segmented-tabs-3 .seg-notes { transform: translateX(200%); }
.takeaway-row { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-default); }
.takeaway-row:last-child { border-bottom: none; }
.takeaway-text { flex: 1; cursor: text; min-width: 0; overflow-wrap: anywhere; }
.takeaway-text.editing { padding: 0; }
.takeaway-actions { display: flex; gap: 0.25rem; opacity: 0; transition: opacity var(--dur-fast); }
.takeaway-actions.always-visible,
.takeaway-row:hover .takeaway-actions { opacity: 1; }

.privacy-hero,
.extension-hero { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.privacy-hero h2,
.extension-hero h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.privacy-hero p,
.extension-hero p { margin: 0 0 1rem; color: var(--fg-muted); }
.legal-hero p { margin-bottom: 0.75rem; }
.legal-meta { display: flex; align-items: center; gap: 0.5rem; }

.about-hero p {
    margin-bottom: 0;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
}

.about-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.about-card h3 {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.about-card p {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

@media (max-width: 720px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

.privacy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
}

.privacy-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.privacy-card-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.privacy-card-head h3 {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.privacy-index {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    flex-shrink: 0;
}

.privacy-card p {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

@media (max-width: 720px) {
    .privacy-grid {
        grid-template-columns: 1fr;
    }
}

.more-grid {
    display: grid;
    gap: 0.75rem;
}

.more-tile {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.9375rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--fg-primary);
    cursor: pointer;
    text-align: left;
    transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}

.more-tile:hover {
    transform: translateY(var(--lift-hover-y));
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    background: var(--bg-raised);
}

.more-tile:active {
    transform: translateY(var(--lift-active-y));
}

.more-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.more-tile-content {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.more-tile-content strong {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}

.more-tile-content small {
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: 1.35;
}

.more-tile > .material-icons:last-child {
    color: var(--fg-muted);
    font-size: 1.25rem;
}

.contact-hero p {
    margin-bottom: 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
}

.contact-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 220px;
}

.contact-card-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.contact-card-head h3 {
    margin: 0;
    font-size: var(--fs-h3);
}

.contact-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
}

.contact-card p {
    margin: 0;
    color: var(--fg-muted);
}

.contact-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

@media (max-width: 720px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-card {
        min-height: 0;
    }
}

.extension-focus-card { display: flex; align-items: center; gap: 0.75rem; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.875rem 1rem; }
.extension-focus-card div { flex: 1; min-width: 0; }
.extension-focus-card p { margin: 0.125rem 0 0; font-size: var(--fs-small); color: var(--fg-muted); }
.extension-features { display: grid; gap: 0.5rem; }
.extension-features div { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.75rem 1rem; color: var(--fg-muted); }
.extension-features .e-icons { color: var(--success); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .roadmap li.active > span,
    .skeleton,
    .toast-progress,
    .ptr-spinner,
    .ind-spinner .spinner-ring {
        animation: none !important;
    }

    .skeleton { background: var(--bg-raised); }
    .seg-indicator,
    .side-rail,
    .ptr-indicator { transition: none !important; }
}

/* ── Focus redesign (context bar + quick-add) ── */
.focus-context-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1rem 1.125rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.focus-context-goal { flex: 1; min-width: 0; }

.focus-context-label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--ind-purple);
    display: block;
    margin-bottom: 0.25rem;
}

[data-theme="dark"] .focus-context-label { color: var(--accent); }

.focus-context-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: var(--fw-semibold);
    color: var(--fg-primary);
    line-height: var(--lh-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-context-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.focus-no-goal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.focus-quick-add { margin-bottom: 1rem; }

.quick-add-form {
    background: var(--bg-surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
    box-shadow: var(--shadow-focus-ring);
}

.quick-add-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--fs-body);
    color: var(--fg-primary);
    padding: 0.375rem 0.625rem 0.625rem;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 0.625rem;
}

.quick-add-input::placeholder { color: var(--fg-muted); }

.quick-add-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-add-asset {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    border: 1.5px dashed var(--border-default);
    border-radius: var(--radius-md);
    color: var(--fg-muted);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}

.btn-add-asset:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* ── Goals page ── */
.goals-page {
    width: min(100%, 720px);
}

.goals-filter-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.goals-filter-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), color var(--dur-fast);
    color: var(--fg-muted);
}

.goals-filter-tab:hover { border-color: var(--border-strong); color: var(--fg-primary); }

.goals-filter-tab.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    color: var(--fg-primary);
}

.goals-filter-num {
    font-size: 1.25rem;
    font-weight: var(--fw-semibold);
    color: var(--fg-primary);
    line-height: 1;
}

.goals-filter-label {
    font-size: var(--fs-caption);
    white-space: nowrap;
}

.goals-mgmt-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.goals-mgmt-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 0.875rem 0.75rem 0.875rem 1.125rem;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.goals-mgmt-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.goals-mgmt-card--focus {
    border-color: var(--ind-purple);
    background: linear-gradient(135deg, var(--bg-surface) 80%, rgba(124, 58, 237, 0.04));
}

.goals-mgmt-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.goals-mgmt-title {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--fg-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goals-mgmt-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.goals-mgmt-actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.goals-action-btn { color: var(--fg-muted); }
.goals-action-btn:hover { color: var(--accent); }
.goals-action-delete:hover { color: var(--danger); }

.goals-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    width: fit-content;
}

.goals-status-infocus {
    background: rgba(124, 58, 237, 0.12);
    color: var(--ind-purple);
}

.goals-status-open {
    background: var(--bg-raised);
    color: var(--fg-muted);
}

.goals-status-completed {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}

[data-theme="dark"] .goals-status-infocus {
    background: rgba(167, 139, 250, 0.22);
    border-color: rgba(196, 181, 253, 0.45);
    color: #f1eaff;
}

[data-theme="dark"] .goals-status-open {
    background: rgba(78, 163, 245, 0.2);
    border-color: rgba(125, 193, 249, 0.45);
    color: #dbeeff;
}

[data-theme="dark"] .goals-status-completed {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(134, 239, 172, 0.45);
    color: #e8ffef;
}

/* ── Goal switcher modal ── */
.goal-switcher-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--fg-muted);
    text-align: center;
}

.goal-switcher-empty .ui-icon { width: 2rem; height: 2rem; color: var(--border-strong); }
.goal-switcher-empty p { margin: 0; font-size: var(--fs-small); }

.goal-switcher-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.goal-switcher-group { display: flex; flex-direction: column; gap: 0.25rem; }
.goal-switcher-group > ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.goal-switcher-group-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
    padding: 0 0.25rem 0.25rem;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 0.125rem;
}

.goal-switcher-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 0.75rem 0.875rem;
    text-align: left;
    cursor: pointer;
    color: var(--fg-primary);
    font-size: var(--fs-body);
    transition: background var(--dur-fast), border-color var(--dur-fast);
    min-height: 44px;
}

.goal-switcher-item:hover:not(:disabled) {
    background: var(--bg-raised);
    border-color: var(--border-default);
}

.goal-switcher-item--current {
    background: rgba(124, 58, 237, 0.06);
    border-color: var(--ind-purple);
    cursor: default;
    color: var(--ind-purple);
    font-weight: var(--fw-semibold);
}

[data-theme="dark"] .goal-switcher-item--current {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.goal-switcher-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.goal-switcher-current-badge {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    background: rgba(124, 58, 237, 0.12);
    color: var(--ind-purple);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

[data-theme="dark"] .goal-switcher-current-badge {
    background: var(--accent-soft);
    color: var(--accent);
}

.goal-switcher-action-icon { color: var(--fg-muted); flex-shrink: 0; }
.goal-switcher-item:hover .goal-switcher-action-icon { color: var(--accent); }

/* ── Pagination ── */
.pagination-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0 0.5rem;
}

/* When pagination lives in a dialog footer, fill the footer and remove its own padding. */
.rdialog-footer .pagination-row--dialog {
    flex: 1 1 auto;
    padding: 0;
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .goals-filter-bar { gap: 0.375rem; }
    .goals-filter-num { font-size: 1.125rem; }
    .goals-filter-label { font-size: 10px; }
    .goals-mgmt-actions { gap: 0; }
    .focus-context-bar { flex-direction: column; gap: 0.5rem; }
    .focus-context-actions { align-self: flex-end; }
}

/* ── Add Person / Add Organization modals ── */
.rdialog .modal-tab-bar {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.rdialog .modal-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--fg-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
    min-height: 36px;
}

.rdialog .modal-tab:hover { color: var(--fg-primary); }

.rdialog .modal-tab.active {
    background: var(--bg-surface);
    color: var(--fg-primary);
    box-shadow: var(--shadow-sm);
}

.rdialog .person-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 320px;
    overflow-y: auto;
}

.rdialog .person-picker-list > li { margin: 0; }

.rdialog .person-picker-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
    text-align: left;
    cursor: pointer;
    color: var(--fg-primary);
    font-size: var(--fs-body);
    transition: background var(--dur-fast), border-color var(--dur-fast);
    min-height: 44px;
}

.rdialog .person-picker-item:hover {
    background: var(--bg-raised);
    border-color: var(--border-default);
}

.rdialog .person-picker-item.selected {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.rdialog .person-picker-name {
    font-weight: var(--fw-semibold);
    line-height: 1.25;
}

.rdialog .person-picker-sub {
    font-size: var(--fs-small);
    color: var(--fg-muted);
    line-height: 1.2;
}

.rdialog .person-picker-item.selected .person-picker-sub { color: var(--accent); opacity: 0.85; }

.rdialog .picker-search { margin: 0 0 0.5rem; }
.rdialog .picker-empty { padding: 0.75rem 0.25rem; color: var(--fg-muted); font-size: var(--fs-small); }
.rdialog .picker-empty .btn { margin-left: 0.5rem; }

.rdialog .form-group {
    margin: 0 0 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.rdialog .form-group:last-child { margin-bottom: 0; }

.rdialog .form-group > label {
    color: var(--fg-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.rdialog .ind-loading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0;
}

.rdialog .validation-message {
    color: var(--danger);
    font-size: var(--fs-small);
}

.rdialog .validation-summary-errors {
    color: var(--danger);
    font-size: var(--fs-small);
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    list-style: none;
}

.rdialog .validation-summary-errors ul { margin: 0; padding-left: 1rem; }