/* Farm Manager — Design system core
 * Loaded AFTER tokens.css. Structured with @layer so precedence is explicit.
 * Zero !important. If something needs to win, promote it into a later layer.
 */

@layer base, chrome, components, motion, utilities;

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
    *, *::before, *::after { box-sizing: border-box; }

    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

    body {
        margin: 0;
        font-family: var(--font-body);
        font-size: var(--text-md);
        line-height: var(--leading-normal);
        color: var(--fg-default);
        background: var(--bg-page);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-display);
        color: var(--fg-strong);
        line-height: var(--leading-tight);
        letter-spacing: -0.01em;
        margin: 0;
    }
    h1 { font-size: var(--text-3xl); font-weight: var(--weight-heavy); }
    h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
    h3 { font-size: var(--text-xl);  font-weight: var(--weight-semi); }
    h4 { font-size: var(--text-lg);  font-weight: var(--weight-semi); }

    p { margin: 0; }

    a { color: var(--fg-brand); text-decoration: none; }
    a:hover { text-decoration: underline; }

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

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

    button { cursor: pointer; background: none; border: 0; padding: 0; }

    input, select, textarea {
        width: 100%;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        color: var(--fg-strong);
        transition: border-color var(--duration-fast) var(--ease-out),
                    box-shadow var(--duration-fast) var(--ease-out);
        min-height: 44px;
    }
    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--accent-primary);
        box-shadow: var(--shadow-focus);
    }
    input::placeholder, textarea::placeholder { color: var(--fg-subtle); }

    label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-default); margin-bottom: var(--space-1); }

    ::selection { background: rgba(5, 150, 105, 0.2); color: var(--fg-strong); }
}

/* ==========================================================================
   APP CHROME (shell, nav, header)
   ========================================================================== */
@layer chrome {
    body.fm-logged-in { background: var(--bg-page); }
    body.fm-logged-out #app-container { display: none; }
    body.fm-logged-in #login-view { display: none; }
    /* During initialization, only hide content the user shouldn't yet see.
       Never hide #login-view — it's the fallback surface if auth is not resolved. */
    body.fm-initializing.fm-logged-in #app-container { visibility: hidden; }

    #app-container {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* Sidebar (desktop) */
    .fm-sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: var(--sidebar-w);
        background: var(--bg-surface);
        border-right: 1px solid var(--border-subtle);
        padding: var(--space-6) var(--space-4);
        display: none;
        flex-direction: column;
        gap: var(--space-2);
        z-index: var(--z-nav);
        overflow-y: auto;
    }

    .fm-sidebar-brand {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-family: var(--font-display);
        font-weight: var(--weight-heavy);
        font-size: var(--text-lg);
        color: var(--fg-strong);
        padding: var(--space-2) var(--space-3);
        margin-bottom: var(--space-4);
    }
    .fm-sidebar-brand i { color: var(--accent-primary); font-size: var(--text-xl); }

    .fm-sidebar-section-title {
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.06em;
        color: var(--fg-subtle);
        padding: var(--space-4) var(--space-3) var(--space-1);
        font-weight: var(--weight-semi);
    }

    .fm-nav-link {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-3);
        border-radius: var(--radius-md);
        color: var(--fg-default);
        font-weight: var(--weight-medium);
        transition: background var(--duration-fast) var(--ease-out),
                    color var(--duration-fast) var(--ease-out);
    }
    .fm-nav-link i { width: 20px; text-align: center; color: var(--fg-muted); }
    .fm-nav-link:hover { background: var(--bg-inset); color: var(--fg-strong); text-decoration: none; }
    .fm-nav-link.is-active,
    .fm-nav-link[aria-current="page"] {
        background: var(--accent-primary-soft);
        color: var(--accent-primary-ink);
    }
    .fm-nav-link.is-active i,
    .fm-nav-link[aria-current="page"] i { color: var(--accent-primary); }

    /* Header (mobile top bar) */
    .fm-header {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        border-bottom: 1px solid var(--border-subtle);
        padding: var(--space-3) var(--space-4);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-height: var(--header-h);
    }

    .fm-header-title {
        font-family: var(--font-display);
        font-weight: var(--weight-bold);
        font-size: var(--text-lg);
        color: var(--fg-strong);
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fm-header-subtitle {
        font-size: var(--text-xs);
        color: var(--fg-muted);
        font-weight: var(--weight-medium);
        margin-top: 2px;
    }

    /* Main content */
    .fm-main {
        flex: 1;
        padding: var(--space-4);
        padding-bottom: calc(var(--bottom-nav-h) + var(--space-8));
        max-width: var(--shell-max);
        margin: 0 auto;
        width: 100%;
    }

    /* Bottom nav (mobile) */
    .fm-bottom-nav {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: var(--z-nav);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--border-subtle);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom));
        gap: var(--space-1);
    }

    .fm-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: var(--space-2) 0;
        color: var(--fg-muted);
        font-size: 11px;
        font-weight: var(--weight-medium);
        border-radius: var(--radius-md);
        transition: color var(--duration-fast) var(--ease-out),
                    background var(--duration-fast) var(--ease-out);
        min-height: 44px;
    }
    .fm-bottom-nav-item i { font-size: 20px; }
    .fm-bottom-nav-item.is-active {
        color: var(--accent-primary);
    }
    .fm-bottom-nav-item.is-active i { transform: translateY(-1px); }
    .fm-bottom-nav-item:hover { color: var(--fg-strong); text-decoration: none; }

    /* FAB */
    .fm-fab {
        position: fixed;
        right: var(--space-4);
        bottom: calc(var(--bottom-nav-h) + var(--space-4) + env(safe-area-inset-bottom));
        z-index: var(--z-fab);
        width: 56px; height: 56px;
        border-radius: 50%;
        background: var(--accent-primary);
        color: var(--fg-inverse);
        display: flex; align-items: center; justify-content: center;
        box-shadow: var(--shadow-lg);
        font-size: var(--text-xl);
        transition: transform var(--duration-fast) var(--ease-spring);
    }
    .fm-fab:hover { transform: translateY(-2px) scale(1.02); }
    .fm-fab:active { transform: translateY(0) scale(0.98); }

    /* View switcher */
    .view { display: none; }
    .view.active { display: block; animation: fm-view-in var(--duration-base) var(--ease-out) both; }
    .view.legacy-orphan { display: none; }

    @keyframes fm-view-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Responsive */
    @media (min-width: 900px) {
        .fm-sidebar { display: flex; }
        .fm-main { padding-left: calc(var(--sidebar-w) + var(--space-6)); padding-right: var(--space-6); max-width: calc(var(--shell-max) + var(--sidebar-w)); }
        .fm-bottom-nav { display: none; }
        .fm-fab { right: var(--space-6); bottom: var(--space-6); width: 60px; height: 60px; }
    }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {
    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-5);
        border-radius: var(--radius-md);
        font-weight: var(--weight-semi);
        font-size: var(--text-sm);
        min-height: 44px;
        transition: transform var(--duration-fast) var(--ease-out),
                    background var(--duration-fast) var(--ease-out),
                    box-shadow var(--duration-fast) var(--ease-out),
                    color var(--duration-fast) var(--ease-out);
        text-decoration: none;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }
    .btn:disabled { opacity: 0.55; cursor: not-allowed; }
    .btn:active:not(:disabled) { transform: translateY(1px); }
    .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

    .btn-primary {
        background: var(--accent-primary);
        color: var(--fg-inverse);
        box-shadow: var(--shadow-sm);
    }
    .btn-primary:hover:not(:disabled) { background: var(--accent-primary-ink); box-shadow: var(--shadow-md); text-decoration: none; color: var(--fg-inverse); }

    .btn-secondary {
        background: var(--bg-surface);
        color: var(--fg-strong);
        border: 1px solid var(--border-strong);
    }
    .btn-secondary:hover:not(:disabled) { background: var(--bg-inset); text-decoration: none; }

    .btn-ghost {
        background: transparent;
        color: var(--fg-default);
    }
    .btn-ghost:hover:not(:disabled) { background: var(--bg-inset); color: var(--fg-strong); text-decoration: none; }

    .btn-danger {
        background: var(--accent-danger);
        color: var(--fg-inverse);
    }
    .btn-danger:hover:not(:disabled) { background: var(--accent-danger-ink); text-decoration: none; color: var(--fg-inverse); }

    .btn-icon {
        width: 40px; height: 40px; padding: 0;
        border-radius: var(--radius-md);
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--fg-muted);
        min-height: 40px;
    }
    .btn-icon:hover { background: var(--bg-inset); color: var(--fg-strong); }

    .btn-lg { min-height: 52px; font-size: var(--text-md); padding: var(--space-4) var(--space-6); }
    .btn-sm { min-height: 36px; font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }
    .btn-block { display: flex; width: 100%; }

    /* Cards */
    .fm-card {
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        padding: var(--space-5);
        box-shadow: var(--shadow-xs);
        transition: box-shadow var(--duration-fast) var(--ease-out),
                    transform var(--duration-fast) var(--ease-out);
    }
    .fm-card--interactive { cursor: pointer; }
    .fm-card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

    .fm-card--accent {
        position: relative;
        overflow: hidden;
    }
    .fm-card--accent::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        background: var(--fm-accent, var(--accent-primary));
    }

    .fm-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
    .fm-card__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--fg-strong); }
    .fm-card__subtitle { font-size: var(--text-xs); color: var(--fg-muted); font-weight: var(--weight-medium); }
    .fm-card__value { font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: var(--text-2xl); color: var(--fg-strong); letter-spacing: -0.02em; }
    .fm-card__delta-up   { color: var(--accent-income); font-size: var(--text-xs); font-weight: var(--weight-semi); }
    .fm-card__delta-down { color: var(--accent-danger); font-size: var(--text-xs); font-weight: var(--weight-semi); }

    /* Purpose-tinted variants */
    .fm-card--spray   { --fm-accent: var(--accent-primary); }
    .fm-card--expense { --fm-accent: var(--accent-warn); }
    .fm-card--income  { --fm-accent: var(--accent-income); }
    .fm-card--labour  { --fm-accent: var(--accent-labour); }
    .fm-card--loan    { --fm-accent: var(--accent-loan); }
    .fm-card--plan    { --fm-accent: var(--accent-info); }

    /* Chips / pills */
    .chip {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: 4px var(--space-3);
        border-radius: var(--radius-full);
        font-size: var(--text-xs);
        font-weight: var(--weight-semi);
        background: var(--bg-inset);
        color: var(--fg-default);
    }
    .chip--brand    { background: var(--accent-primary-soft); color: var(--accent-primary-ink); }
    .chip--warn     { background: var(--accent-warn-soft); color: var(--accent-warn-ink); }
    .chip--danger   { background: var(--accent-danger-soft); color: var(--accent-danger-ink); }
    .chip--info     { background: var(--accent-info-soft); color: var(--accent-info-ink); }
    .chip--income   { background: var(--accent-income-soft); color: #065f46; }
    .chip--labour   { background: var(--accent-labour-soft); color: #5b21b6; }

    /* Section title */
    .fm-section-title {
        font-family: var(--font-display);
        font-weight: var(--weight-bold);
        font-size: var(--text-md);
        color: var(--fg-strong);
        margin: var(--space-6) 0 var(--space-3);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }
    .fm-section-title__count { color: var(--fg-muted); font-weight: var(--weight-medium); font-size: var(--text-sm); }

    /* Empty state */
    .fm-empty {
        text-align: center;
        padding: var(--space-8) var(--space-4);
        color: var(--fg-muted);
    }
    .fm-empty__icon {
        font-size: 40px;
        color: var(--fg-subtle);
        margin-bottom: var(--space-3);
    }
    .fm-empty__title { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--fg-strong); font-size: var(--text-md); }
    .fm-empty__desc  { font-size: var(--text-sm); margin-top: var(--space-2); }
    .fm-empty__action { margin-top: var(--space-4); }

    /* Skeleton loader */
    .fm-skeleton {
        background: linear-gradient(90deg, var(--neutral-100) 0%, var(--neutral-200) 40%, var(--neutral-100) 80%);
        background-size: 200% 100%;
        animation: fm-skeleton-shimmer 1.4s ease-in-out infinite;
        border-radius: var(--radius-sm);
    }
    @keyframes fm-skeleton-shimmer {
        from { background-position: 200% 0; }
        to   { background-position: -200% 0; }
    }

    /* Segmented control (tabs) */
    .fm-segmented {
        display: inline-flex;
        padding: 4px;
        background: var(--bg-inset);
        border-radius: var(--radius-full);
        gap: 2px;
    }
    .fm-segmented__item {
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-full);
        font-size: var(--text-sm);
        font-weight: var(--weight-semi);
        color: var(--fg-muted);
        transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
    }
    .fm-segmented__item[aria-selected="true"],
    .fm-segmented__item.is-active {
        background: var(--bg-surface);
        color: var(--fg-strong);
        box-shadow: var(--shadow-xs);
    }

    /* Toast */
    .fm-toast {
        pointer-events: auto;
        background: var(--fg-strong);
        color: var(--fg-inverse);
        padding: var(--space-3) var(--space-5);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        font-weight: var(--weight-medium);
        font-size: var(--text-sm);
        max-width: 480px;
        display: flex; align-items: center; gap: var(--space-2);
        animation: fm-toast-in var(--duration-base) var(--ease-spring);
    }
    .fm-toast--success { background: var(--accent-primary); }
    .fm-toast--error   { background: var(--accent-danger); }
    .fm-toast--warn    { background: var(--accent-warn); color: var(--neutral-900); }
    .fm-toast--info    { background: var(--accent-info); }

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

    /* Sheet (bottom sheet / drawer) — the ONE modal primitive */
    .fm-scrim {
        position: fixed;
        inset: 0;
        background: var(--bg-scrim);
        z-index: var(--z-scrim);
        opacity: 0;
        transition: opacity var(--duration-base) var(--ease-out);
        touch-action: none;
    }
    .fm-scrim.is-open { opacity: 1; }

    .fm-sheet {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: var(--z-sheet);
        background: var(--bg-surface);
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        box-shadow: var(--shadow-lg);
        transform: translateY(100%);
        transition: transform var(--duration-base) var(--ease-out);
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .fm-sheet.is-open { transform: translateY(0); }

    .fm-sheet__handle {
        width: 40px;
        height: 4px;
        background: var(--neutral-300);
        border-radius: var(--radius-full);
        margin: var(--space-2) auto var(--space-3);
    }

    .fm-sheet__header {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-5) var(--space-4);
        border-bottom: 1px solid var(--border-subtle);
    }
    .fm-sheet__title {
        font-family: var(--font-display);
        font-weight: var(--weight-bold);
        font-size: var(--text-lg);
        color: var(--fg-strong);
        flex: 1;
        min-width: 0;
    }
    .fm-sheet__close {
        width: 40px; height: 40px;
        border-radius: var(--radius-full);
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--fg-muted);
        background: var(--bg-inset);
        font-size: 18px;
    }
    .fm-sheet__close:hover { color: var(--fg-strong); background: var(--neutral-200); }

    .fm-sheet__body {
        flex: 1;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--space-5);
        -webkit-overflow-scrolling: touch;
    }

    .fm-sheet__footer {
        border-top: 1px solid var(--border-subtle);
        padding: var(--space-4) var(--space-5);
        display: flex;
        gap: var(--space-3);
        background: var(--bg-surface);
    }
    .fm-sheet__footer .btn { flex: 1; }

    /* Desktop: transform bottom sheet into right-side drawer */
    @media (min-width: 900px) {
        .fm-sheet {
            left: auto;
            top: 0; bottom: 0; right: 0;
            width: min(var(--sheet-max-w), 92vw);
            max-height: none;
            border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
            transform: translateX(100%);
        }
        .fm-sheet.is-open { transform: translateX(0); }
        .fm-sheet__handle { display: none; }
    }

    /* Legacy modal-overlay bridge — old modals coexist with new sheet system */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: var(--bg-scrim);
        z-index: var(--z-scrim);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        opacity: 1;
        transition: opacity var(--duration-base) var(--ease-out);
    }
    .modal-overlay.hidden {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
    .modal-overlay .modal-content {
        background: var(--bg-surface);
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        padding: var(--space-5);
        max-width: 100%;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
        transform: translateY(0);
        transition: transform var(--duration-base) var(--ease-out);
        padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    }
    .modal-overlay.hidden .modal-content { transform: translateY(100%); }
    @media (min-width: 900px) {
        .modal-overlay { align-items: center; justify-content: center; padding: var(--space-4); }
        .modal-overlay .modal-content {
            border-radius: var(--radius-2xl);
            max-width: var(--sheet-max-w);
            width: 100%;
            padding-bottom: var(--space-5);
        }
    }

    /* Spinner */
    #spinner-overlay {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(4px);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: var(--z-spinner);
    }
    #spinner-overlay.active { display: flex; }
    .spinner {
        width: 44px; height: 44px;
        border: 3px solid var(--neutral-200);
        border-top-color: var(--accent-primary);
        border-radius: 50%;
        animation: fm-spin 800ms linear infinite;
    }
    @keyframes fm-spin { to { transform: rotate(360deg); } }

    #toast-container {
        position: fixed;
        top: max(var(--space-4), env(safe-area-inset-top));
        right: var(--space-4);
        left: var(--space-4);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        align-items: flex-end;
        z-index: var(--z-toast);
        pointer-events: none;
    }
    @media (min-width: 640px) {
        #toast-container { left: auto; }
    }

    /* Global search */
    #global-search-overlay {
        position: fixed;
        inset: 0;
        background: var(--bg-scrim);
        z-index: var(--z-scrim);
        display: none;
        padding: var(--space-4);
        align-items: flex-start;
        justify-content: center;
    }
    #global-search-overlay.open { display: flex; }
    #global-search-overlay .search-panel {
        background: var(--bg-surface);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
        width: 100%;
        max-width: 640px;
        max-height: 80vh;
        margin-top: 8vh;
        box-shadow: var(--shadow-lg);
    }
    #global-search-overlay .search-input-wrap {
        display: flex; align-items: center; gap: var(--space-3);
        padding: var(--space-2);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
    }
    #global-search-overlay .search-input-wrap input {
        border: 0; padding: var(--space-2); min-height: 40px;
    }
    #global-search-overlay .search-input-wrap input:focus {
        box-shadow: none;
    }
    #global-search-overlay .search-results {
        margin-top: var(--space-3);
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Offline badge */
    #offline-badge {
        position: fixed;
        top: env(safe-area-inset-top);
        left: 0; right: 0;
        background: var(--accent-warn);
        color: var(--accent-warn-ink);
        text-align: center;
        padding: var(--space-2);
        font-size: var(--text-xs);
        font-weight: var(--weight-semi);
        z-index: var(--z-toast);
        display: none;
    }
    body.is-offline #offline-badge { display: block; }

    /* Data table */
    .fm-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--text-sm);
    }
    .fm-table th {
        text-align: left;
        padding: var(--space-3);
        color: var(--fg-muted);
        font-weight: var(--weight-semi);
        border-bottom: 1px solid var(--border-subtle);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .fm-table td {
        padding: var(--space-3);
        border-bottom: 1px solid var(--border-subtle);
        color: var(--fg-strong);
    }
    .fm-table tr:last-child td { border-bottom: 0; }
    .fm-table tr:hover td { background: var(--bg-inset); }

    /* Divider */
    .fm-divider {
        height: 1px;
        background: var(--border-subtle);
        margin: var(--space-4) 0;
    }
}

/* ==========================================================================
   MOTION
   ========================================================================== */
@layer motion {
    .fm-fade-in    { animation: fm-fade-in var(--duration-base) var(--ease-out); }
    .fm-slide-up   { animation: fm-slide-up var(--duration-base) var(--ease-out); }
    .fm-pop-in     { animation: fm-pop-in var(--duration-base) var(--ease-spring); }

    @keyframes fm-fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fm-slide-up { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    @keyframes fm-pop-in { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

/* ==========================================================================
   UTILITIES (last so they can override components)
   ========================================================================== */
@layer utilities {
    .fm-stack       { display: flex; flex-direction: column; }
    .fm-stack-2     { gap: var(--space-2); }
    .fm-stack-3     { gap: var(--space-3); }
    .fm-stack-4     { gap: var(--space-4); }
    .fm-stack-5     { gap: var(--space-5); }
    .fm-stack-6     { gap: var(--space-6); }

    .fm-row         { display: flex; align-items: center; }
    .fm-row-2       { gap: var(--space-2); }
    .fm-row-3       { gap: var(--space-3); }
    .fm-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
    .fm-row-wrap    { flex-wrap: wrap; }

    .fm-grid-2      { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .fm-grid-3      { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
    .fm-grid-auto   { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }

    .fm-text-strong { color: var(--fg-strong); }
    .fm-text-muted  { color: var(--fg-muted); }
    .fm-text-subtle { color: var(--fg-subtle); }
    .fm-text-brand  { color: var(--fg-brand); }
    .fm-text-warn   { color: var(--accent-warn-ink); }
    .fm-text-danger { color: var(--accent-danger-ink); }
    .fm-text-income { color: var(--accent-income); }

    .fm-text-xs  { font-size: var(--text-xs); }
    .fm-text-sm  { font-size: var(--text-sm); }
    .fm-text-md  { font-size: var(--text-md); }
    .fm-text-lg  { font-size: var(--text-lg); }
    .fm-text-xl  { font-size: var(--text-xl); }

    .fm-font-medium { font-weight: var(--weight-medium); }
    .fm-font-semi   { font-weight: var(--weight-semi); }
    .fm-font-bold   { font-weight: var(--weight-bold); }

    .fm-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .fm-mt-1 { margin-top: var(--space-1); }
    .fm-mt-2 { margin-top: var(--space-2); }
    .fm-mt-3 { margin-top: var(--space-3); }
    .fm-mt-4 { margin-top: var(--space-4); }
    .fm-mt-6 { margin-top: var(--space-6); }
    .fm-mt-8 { margin-top: var(--space-8); }

    .fm-mb-1 { margin-bottom: var(--space-1); }
    .fm-mb-2 { margin-bottom: var(--space-2); }
    .fm-mb-3 { margin-bottom: var(--space-3); }
    .fm-mb-4 { margin-bottom: var(--space-4); }
    .fm-mb-6 { margin-bottom: var(--space-6); }

    .fm-p-3 { padding: var(--space-3); }
    .fm-p-4 { padding: var(--space-4); }
    .fm-p-5 { padding: var(--space-5); }
    .fm-p-6 { padding: var(--space-6); }

    .fm-hidden { display: none; }
    .fm-invisible { visibility: hidden; }
    .fm-sr-only {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }

    .fm-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .fm-scroll-x::-webkit-scrollbar { display: none; }
    .fm-scroll-x { scrollbar-width: none; }

    .fm-min-touch { min-height: 44px; min-width: 44px; }
}