/*
 * Neo-brutalist: thick ink borders, hard offset shadows (no blur), square
 * corners, sticker colors (pink/green/yellow/blue) on a cream page.
 * Mockup reference: design_mockups/04-neobrutalist.html.
 */
[data-theme="neobrutalist"] {
    --font-weight-heading: 900;

    /* Surfaces — cream page, white cards */
    --color-bg: #fdf3e3;
    --color-surface: #ffffff;
    --color-surface-hover: #fff7dd;
    --color-surface-sunken: #f6e7c6;

    /* Text — ink, with warm muted steps */
    --color-text: #121212;
    --color-text-secondary: #121212;
    --color-text-muted: #5f5848;
    --color-text-faint: #968d77;

    --color-surface-inverse: #121212;
    --color-text-inverse: #ffffff;

    /* Borders — every edge is ink, and thicker */
    --color-border-subtle: #e9dcbf;
    --color-border: #121212;
    --color-border-strong: #121212;
    --color-border-hover: #121212;
    --border-width: 2px;

    /* Accent — pink interactive, ink text on color fills */
    --color-accent: #ff70a6;
    --color-accent-hover: #ff4f93;
    --color-accent-soft: #ffd9e7;
    --color-accent-soft-text: #121212;
    --color-accent-soft-border: #121212;
    --color-on-accent: #121212;

    /* Status — the sticker palette */
    --color-success: #8ac926;
    --color-success-hover: #79b51e;
    --color-success-soft: #e8f6c8;
    --color-success-soft-text: #2f4d00;
    --color-success-soft-border: #121212;
    --color-danger: #ff4f4f;
    --color-danger-hover: #ef3030;
    --color-danger-soft: #ffd9d9;
    --color-danger-soft-text: #7a0f0f;
    --color-danger-soft-border: #121212;
    --color-warning: #ffd23f;
    --color-warning-soft: #fff1bf;
    --color-warning-soft-text: #6b5400;
    --color-warning-soft-border: #121212;
    --color-info: #43bccd;

    /* Neutral action — white card buttons that go yellow on hover */
    --color-neutral: #ffffff;
    --color-neutral-hover: #ffd23f;

    --color-disabled-bg: #efe6cf;
    --color-disabled-text: #968d77;

    /* Shape — no rounding anywhere */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-pill: 0;

    /* Elevation — hard ink offsets instead of blurred shadows */
    --color-backdrop: rgba(18, 18, 18, 0.55);
    --shadow-navbar: 0 3px 0 #121212;
    --shadow-sm: 2px 2px 0 #121212;
    --shadow-md: 4px 4px 0 #121212;
    --shadow-lg: 7px 7px 0 #121212;
    --shadow-xl: 10px 10px 0 #121212;
    --shadow-accent: 6px 6px 0 #121212;
    --shadow-inset: inset 0 -2px 0 #121212;
    --focus-ring: 0 0 0 3px #ff70a6;

    /* Component hooks */
    --btn-border: 2px solid #121212;
    --shadow-btn: 3px 3px 0 #121212;
    --color-navbar-bg: #ffd23f;
}


/*
 * Neo-brutalist theme skin: structural rules that tokens alone can't express
 * (sticker headings, tile nav, uppercase buttons, press-down interactions).
 * Every rule is scoped to [data-theme="neobrutalist"], so this file is inert
 * for other themes; palette values still come from tokens.css.
 * Mockup reference: design_mockups/04-neobrutalist.html.
 */

/* ---- navbar: yellow bar, sticker brand, tile links ---- */
[data-theme="neobrutalist"] .navbar {
    border-bottom-width: 3px;
}

[data-theme="neobrutalist"] .navbar-container {
    padding: 10px 20px;
}

[data-theme="neobrutalist"] .navbar-brand {
    background: var(--color-surface);
    border: 3px solid var(--color-border);
    box-shadow: var(--shadow-md);
    font-size: var(--font-size-xl);
    font-weight: 900;
    letter-spacing: -0.02em;
    padding: 4px 14px;
    margin-right: 24px;
    transform: rotate(-2deg);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

[data-theme="neobrutalist"] .navbar-brand::before {
    content: "";
    width: 28px;
    height: 28px;
    flex: none;
    background: url("/static/themes/neobrutalist/favicon.svg") center / contain no-repeat;
}

[data-theme="neobrutalist"] .navbar-nav {
    gap: 10px;
    align-items: center;
}

[data-theme="neobrutalist"] .nav-link {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    box-shadow: 3px 3px 0 var(--color-border);
    padding: 7px 14px;
    font-weight: 700;
    color: var(--color-text);
    transition: transform 0.08s, box-shadow 0.08s;
}

[data-theme="neobrutalist"] .nav-link:hover {
    background: var(--color-surface);
    color: var(--color-text);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--color-border);
}

[data-theme="neobrutalist"] .nav-link.active {
    background: var(--color-accent);
    color: var(--color-text);
}

/* Bleed room inside the scroll clip so tile shadows and the hover lift
   aren't cut off at the strip's edges. */
[data-theme="neobrutalist"] .navbar-pages {
    gap: 10px;
    padding: 5px;
    margin: -5px 0 -5px -5px;
}

[data-theme="neobrutalist"] .navbar-pages-bar {
    border-top-color: var(--color-border);
}

/* ---- page-tab edit pencil: hide the ✎ glyph, render as a small tile
   with the themed edit icon so it matches the rest of the navbar ---- */
[data-theme="neobrutalist"] .nav-page-li .nav-page-tab.active {
    padding-right: 14px;
}

[data-theme="neobrutalist"] .nav-page-edit .nav-page-edit-glyph {
    display: none;
}

[data-theme="neobrutalist"] .nav-page-edit {
    align-self: stretch;
    display: flex;
    align-items: center;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    box-shadow: 3px 3px 0 var(--color-border);
    padding: 0 9px;
    margin-left: 4px;
    transition: transform 0.08s, box-shadow 0.08s;
}

[data-theme="neobrutalist"] .nav-page-edit::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

[data-theme="neobrutalist"] .nav-page-edit:hover {
    background: var(--color-surface);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--color-border);
}

/* ---- icons: any .nav-link or .btn with data-icon gets its themed SVG.
   The art is inlined as data: URIs below (not separate files), so the whole
   icon set rides in this one scoped stylesheet — the same way a runtime
   (AI-generated) custom theme overrides icons, since it can't ship files. ---- */

/* The app-wide default (components/icons.css) draws masked line icons in
   currentColor; unset the mask and fill so this theme's own colored SVGs
   (background-image) show instead of being clipped to the line-icon shapes. */
[data-theme="neobrutalist"] [data-icon]::before,
[data-theme="neobrutalist"] .nav-page-edit::before {
    background-color: transparent;
    -webkit-mask-image: none;
    mask-image: none;
}

[data-theme="neobrutalist"] .nav-link[data-icon],
[data-theme="neobrutalist"] .btn[data-icon],
[data-theme="neobrutalist"] button[data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

[data-theme="neobrutalist"] .nav-link[data-icon]::before,
[data-theme="neobrutalist"] .btn[data-icon]::before,
[data-theme="neobrutalist"] button[data-icon]::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: none;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

[data-theme="neobrutalist"] .btn[data-icon]::before,
[data-theme="neobrutalist"] button[data-icon]::before {
    width: 15px;
    height: 15px;
}

[data-theme="neobrutalist"] [data-icon="library"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <rect x='3' y='3' width='18' height='18' fill='%23fff' stroke='%23121212' stroke-width='2'/> <circle cx='9' cy='9' r='2.2' fill='%23ffd23f' stroke='%23121212' stroke-width='1.5'/> <path d='M3 17l5-5 4 4 3-3 6 6v2H3z' fill='%238ac926' stroke='%23121212' stroke-width='2' stroke-linejoin='round'/> </svg>"); }
/* Albums: a stacked pair of photo cards — the back one peeking out, the front one
   carrying the same picture motif as the library icon so the two read as siblings. */
[data-theme="neobrutalist"] [data-icon="albums"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linejoin='round'> <path d='M3 7v12a2 2 0 0 0 2 2h12' fill='%235bc0eb'/> <rect x='7' y='3' width='14' height='14' fill='%23fff'/> <circle cx='11.5' cy='7.5' r='1.6' fill='%23ffd23f' stroke-width='1.5'/> <path d='M7 14l4-3.5 3.5 3 2.5-2 4 3.5v2H7z' fill='%238ac926'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="faces"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='square'> <path d='M3 7V3h4'/> <path d='M17 3h4v4'/> <path d='M21 17v4h-4'/> <path d='M7 21H3v-4'/> <circle cx='12' cy='12' r='6' fill='%23ff70a6'/> <circle cx='10' cy='10.5' r='0.6' fill='%23121212' stroke='none'/> <circle cx='14' cy='10.5' r='0.6' fill='%23121212' stroke='none'/> <path d='M9.5 13.5a3.4 2.6 0 0 0 5 0' stroke-linecap='round'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="people"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linejoin='round'> <circle cx='16.5' cy='8' r='3' fill='%23fff'/> <path d='M15.5 13c3.1 0 5.5 2.4 5.5 5.4V20h-4.5' fill='%23fff'/> <circle cx='9' cy='8.5' r='3.5' fill='%2343bccd'/> <path d='M3 20v-0.8c0-3.1 2.7-5.6 6-5.6s6 2.5 6 5.6V20z' fill='%2343bccd'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="locations"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linejoin='round'> <path d='M12 21.5S5 15 5 10a7 7 0 0 1 14 0c0 5-7 11.5-7 11.5z' fill='%238ac926'/> <circle cx='12' cy='10' r='2.5' fill='%23fff'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="utilities"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linejoin='round'> <path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z' fill='%23ffd23f'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="settings"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-linecap='square'> <g stroke-width='2.5'> <path d='M12 3v3.5'/><path d='M12 17.5V21'/> <path d='M3 12h3.5'/><path d='M17.5 12H21'/> <path d='M5.6 5.6l2.5 2.5'/><path d='M15.9 15.9l2.5 2.5'/> <path d='M18.4 5.6l-2.5 2.5'/><path d='M8.1 15.9l-2.5 2.5'/> </g> <circle cx='12' cy='12' r='5.5' fill='%23ff70a6' stroke-width='2'/> <circle cx='12' cy='12' r='2.5' fill='%23fff' stroke-width='2'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="themes"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linejoin='round'> <path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z' fill='%235bc0eb'/> <circle cx='13.5' cy='6.5' r='1.4' fill='%23ffd23f' stroke-width='1.5'/> <circle cx='17.5' cy='10.5' r='1.4' fill='%23ff70a6' stroke-width='1.5'/> <circle cx='8.5' cy='7.5' r='1.4' fill='%23fff' stroke-width='1.5'/> <circle cx='6.5' cy='12.5' r='1.4' fill='%238ac926' stroke-width='1.5'/> </svg>"); }
/* Filter "Configure" gear — its own chunky cog (solid body, bold teeth) so it
   reads as filter settings, distinct from the app-settings gear above. */
[data-theme="neobrutalist"] [data-icon="filter-config"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-linecap='square'> <g stroke-width='3'> <path d='M12 1.5v3'/><path d='M12 19.5v3'/> <path d='M1.5 12h3'/><path d='M19.5 12h3'/> <path d='M4.6 4.6l2.1 2.1'/><path d='M17.3 17.3l2.1 2.1'/> <path d='M19.4 4.6l-2.1 2.1'/><path d='M6.7 17.3l-2.1 2.1'/> </g> <circle cx='12' cy='12' r='6' fill='%23ffd23f' stroke-width='2.5'/> <circle cx='12' cy='12' r='2.4' fill='%23121212' stroke='none'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="add"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='3' stroke-linecap='square'> <path d='M12 5v14'/> <path d='M5 12h14'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="edit"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linejoin='round'> <path d='M4 20l1.2-4.5L16.5 4.2a2.05 2.05 0 0 1 2.9 2.9L8.1 18.4 4 20z' fill='%23ffd23f'/> <path d='M14.6 6.1l2.9 2.9'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="delete"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'> <path d='M9 6V4h6v2'/> <path d='M4 6h16'/> <path d='M6.5 6l1 14.5h9l1-14.5' fill='%23ff70a6'/> <path d='M10 10.5v6'/> <path d='M14 10.5v6'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="search"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-linecap='square'> <circle cx='10.5' cy='10.5' r='5.5' fill='%23fff' stroke-width='2.5'/> <path d='M15 15l5.5 5.5' stroke-width='3'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="folder"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linejoin='round'> <path d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8.5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' fill='%23ffd23f'/> <path d='M3 10h18'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="file"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linejoin='round'> <path d='M6 3h9l4 4v14H6z' fill='%23fff'/> <path d='M15 3v5h4'/> <path d='M8.5 12h7'/> <path d='M8.5 16h5'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="arrow-up"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2.5' stroke-linecap='square' stroke-linejoin='round'> <path d='M12 20V5'/> <path d='M5 12l7-7 7 7'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="sync"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2.5' stroke-linecap='square' stroke-linejoin='round'> <path d='M4 12a8 8 0 0 1 14-5.3L21 9'/> <path d='M21 4v5h-5'/> <path d='M20 12a8 8 0 0 1-14 5.3L3 15'/> <path d='M3 20v-5h5'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="refresh"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2.5' stroke-linecap='square' stroke-linejoin='round'> <path d='M4 12a8 8 0 0 1 14-5.3L21 9'/> <path d='M21 4v5h-5'/> <path d='M20 12a8 8 0 0 1-14 5.3L3 15'/> <path d='M3 20v-5h5'/> </svg>"); }
/* Sharing: share-nodes drawn links-first so the filled dots sit cleanly on top. */
[data-theme="neobrutalist"] [data-icon="sharing"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-linejoin='round'> <path d='M6 12 18 5' stroke-width='2.5'/> <path d='M6 12l12 7' stroke-width='2.5'/> <circle cx='18' cy='5' r='3.4' fill='%23ff70a6' stroke-width='2'/> <circle cx='18' cy='19' r='3.4' fill='%235bc0eb' stroke-width='2'/> <circle cx='6' cy='12' r='3.6' fill='%23ffd23f' stroke-width='2'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="shuffle"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2.5' stroke-linecap='square' stroke-linejoin='round'> <path d='M16 3h5v5'/> <path d='M4 20 21 3'/> <path d='M21 16v5h-5'/> <path d='M15 15 21 21'/> <path d='M4 4 9 9'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="skip"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linejoin='round'> <path d='M5 4l10 8-10 8z' fill='%235bc0eb'/> <path d='M19 5v14' stroke-width='2.5'/> </svg>"); }
/* Punchy heart: hollow outline by default, hot-pink fill when set. */
[data-theme="neobrutalist"] [data-icon="favorite"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff' stroke='%23121212' stroke-width='2' stroke-linejoin='round'> <path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="info"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'> <circle cx='12' cy='12' r='9' fill='%235bc0eb'/> <path d='M12 11v5'/> <circle cx='12' cy='8' r='0.7' fill='%23121212' stroke='none'/> </svg>"); }
[data-theme="neobrutalist"] [data-icon="warning"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'> <path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z' fill='%23ffd23f'/> <path d='M12 9v4'/> <path d='M12 17h.01'/> </svg>"); }
[data-theme="neobrutalist"] .favorite-toggle.is-favorite[data-icon="favorite"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff70a6' stroke='%23121212' stroke-width='2' stroke-linejoin='round'> <path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/> </svg>"); }

/* Icon buttons (heart chip, filters "Configure", tag delete) all wear the same
   square sticker: surface fill, hard border + offset shadow, press-in on hover. */
[data-theme="neobrutalist"] .favorite-toggle,
[data-theme="neobrutalist"] .filter-config-trigger,
[data-theme="neobrutalist"] .btn-icon-delete {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 3px 3px 0 var(--color-border);
    color: var(--color-text);
}
[data-theme="neobrutalist"] .favorite-toggle:hover,
[data-theme="neobrutalist"] .filter-config-trigger:hover,
[data-theme="neobrutalist"] .btn-icon-delete:hover {
    background: var(--color-surface);
    color: var(--color-text);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--color-border);
}
[data-theme="neobrutalist"] .favorite-toggle::before { width: 20px; height: 20px; }
[data-theme="neobrutalist"] .btn-icon-delete::before { width: 18px; height: 18px; }

/* Search glyph inside the searchable-select filter box */
[data-theme="neobrutalist"] .searchable-select-search {
    padding-left: 32px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-linecap='square'> <circle cx='10.5' cy='10.5' r='5.5' fill='%23fff' stroke-width='2.5'/> <path d='M15 15l5.5 5.5' stroke-width='3'/> </svg>");
    background-position: 10px center;
    background-size: 14px;
    background-repeat: no-repeat;
}

/* ---- page header: sticker title directly on the page, no card ---- */
[data-theme="neobrutalist"] .page-header {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

[data-theme="neobrutalist"] .page-header h1 {
    display: inline-block;
    background: var(--color-surface);
    border: 3px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: 6px 18px;
    letter-spacing: -0.02em;
    transform: rotate(-1deg);
}

[data-theme="neobrutalist"] .page-header .subtitle {
    font-weight: 700;
    color: var(--color-text);
    margin-top: 12px;
}

/* ---- buttons: uppercase, chunky border, press-down mechanics ---- */
[data-theme="neobrutalist"] .btn,
[data-theme="neobrutalist"] .btn-primary,
[data-theme="neobrutalist"] .btn-secondary,
[data-theme="neobrutalist"] .btn-danger,
[data-theme="neobrutalist"] .btn-success,
[data-theme="neobrutalist"] .action-button {
    border-width: 3px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: transform 0.08s, box-shadow 0.08s;
}

[data-theme="neobrutalist"] .btn:hover:not(:disabled),
[data-theme="neobrutalist"] .btn-primary:hover:not(:disabled),
[data-theme="neobrutalist"] .btn-secondary:hover:not(:disabled),
[data-theme="neobrutalist"] .btn-danger:hover:not(:disabled),
[data-theme="neobrutalist"] .btn-success:hover:not(:disabled),
[data-theme="neobrutalist"] .action-button:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--color-border);
}

[data-theme="neobrutalist"] .btn:active:not(:disabled),
[data-theme="neobrutalist"] .btn-primary:active:not(:disabled),
[data-theme="neobrutalist"] .btn-secondary:active:not(:disabled),
[data-theme="neobrutalist"] .btn-danger:active:not(:disabled),
[data-theme="neobrutalist"] .btn-success:active:not(:disabled),
[data-theme="neobrutalist"] .action-button:active:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--color-border);
}

[data-theme="neobrutalist"] .btn-sm {
    border-width: 2px;
}

/* ---- forms: hard-shadowed inputs, shouty labels ---- */
/* Claim every text-like input by element type so one-off wrappers
   (.distance-input-wrapper, .location-search-input, …) can't fall through. */
[data-theme="neobrutalist"] input[type="text"],
[data-theme="neobrutalist"] input[type="number"],
[data-theme="neobrutalist"] input[type="search"],
[data-theme="neobrutalist"] input[type="password"],
[data-theme="neobrutalist"] input[type="date"],
[data-theme="neobrutalist"] textarea,
[data-theme="neobrutalist"] .form-control {
    box-shadow: 3px 3px 0 var(--color-border);
    font-weight: 600;
}

/* …except search boxes embedded inside an already-framed dropdown float */
[data-theme="neobrutalist"] .searchable-select-dropdown input[type="text"] {
    box-shadow: none;
}

/* Native spinner steppers are OS chrome; off-theme */
[data-theme="neobrutalist"] input[type="number"] {
    appearance: textfield;
}

[data-theme="neobrutalist"] input[type="number"]::-webkit-inner-spin-button,
[data-theme="neobrutalist"] input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

/* Native select chrome can't be styled; opt out of it entirely and draw the
   chevron as two currentColor gradient triangles (no raw colors needed). */
[data-theme="neobrutalist"] select {
    appearance: none;
    background-color: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 3px 3px 0 var(--color-border);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    padding: 9px 36px 9px 10px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

[data-theme="neobrutalist"] select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring), 3px 3px 0 var(--color-border);
}

[data-theme="neobrutalist"] .form-group label,
[data-theme="neobrutalist"] .filter-group label {
    text-transform: uppercase;
    font-weight: 800;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* ---- searchable select: match the themed native selects ---- */
[data-theme="neobrutalist"] .searchable-select-display {
    box-shadow: 3px 3px 0 var(--color-border);
    font-weight: 600;
    padding: 9px 10px;
}

[data-theme="neobrutalist"] .searchable-select-wrapper.open .searchable-select-display {
    box-shadow: var(--focus-ring), 3px 3px 0 var(--color-border);
}

[data-theme="neobrutalist"] .searchable-select-arrow {
    color: var(--color-text);
}

[data-theme="neobrutalist"] .searchable-select-dropdown {
    margin-top: 6px;
}

[data-theme="neobrutalist"] .searchable-select-search {
    font-weight: 600;
}

[data-theme="neobrutalist"] .searchable-select-option {
    font-weight: 600;
}

[data-theme="neobrutalist"] .searchable-select-option.selected {
    background: var(--color-accent);
    color: var(--color-text);
    font-weight: 800;
}

/* ---- multi select: with detached dropdown ---- */
[data-theme="neobrutalist"] .multi-select-header {
    box-shadow: 3px 3px 0 var(--color-border);
    font-weight: 600;
    padding: 9px 10px;
}

[data-theme="neobrutalist"] .multi-select-wrapper.open .multi-select-header {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring), 3px 3px 0 var(--color-border);
}

[data-theme="neobrutalist"] .multi-select-header .arrow {
    color: var(--color-text);
}

/* Base styles glue the list to the header (no top border, no gap); float it
   like the searchable-select dropdown instead. */
[data-theme="neobrutalist"] .multi-select-options {
    border-top: var(--border-width) solid var(--color-border);
    margin-top: 6px;
}

[data-theme="neobrutalist"] .multi-select-option span {
    font-weight: 600;
}

/* Native check/radio/slider glyphs follow the theme via accent-color */
[data-theme="neobrutalist"] input[type="checkbox"],
[data-theme="neobrutalist"] input[type="radio"],
[data-theme="neobrutalist"] input[type="range"] {
    accent-color: var(--color-text);
}

/* ---- job progress: striped green fill that chugs while running ---- */
[data-theme="neobrutalist"] .progress-bar-container {
    height: 26px;
    border: 3px solid var(--color-border);
    background: var(--color-surface);
}

[data-theme="neobrutalist"] .progress-bar {
    background: repeating-linear-gradient(
        45deg,
        var(--color-success) 0 14px,
        var(--color-success-hover) 14px 28px
    );
    background-size: 40px 40px;
    border-right: 3px solid var(--color-border);
    animation: progress-chug 1s linear infinite;
}

@keyframes progress-chug {
    from { background-position: 0 0; }
    to { background-position: 40px 0; }
}

/* ---- panels: ink frames + sticker headings ---- */
[data-theme="neobrutalist"] .sidebar,
[data-theme="neobrutalist"] .settings-section,
[data-theme="neobrutalist"] #map,
[data-theme="neobrutalist"] .selection-panel.active,
[data-theme="neobrutalist"] .editor-card {
    border: 3px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

/* Widget cards sit close together in the grid, so they take a thinner frame
   and a smaller offset than full panels. */
[data-theme="neobrutalist"] .widget-card {
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

[data-theme="neobrutalist"] .sidebar h2,
[data-theme="neobrutalist"] .settings-section h2 {
    display: inline-block;
    font-size: var(--font-size-md);
    font-weight: 900;
    text-transform: uppercase;
    background: var(--color-warning);
    border: 2px solid var(--color-border);
    box-shadow: 3px 3px 0 var(--color-border);
    padding: 2px 10px;
    margin-bottom: 16px;
    transform: rotate(-1deg);
}

/* ---- tables: ink header band, bold rows ---- */
[data-theme="neobrutalist"] table {
    border: 3px solid var(--color-border);
}

[data-theme="neobrutalist"] thead {
    background: var(--color-surface-inverse);
}

[data-theme="neobrutalist"] th {
    color: var(--color-text-inverse);
    font-weight: 900;
    letter-spacing: 0.06em;
}

[data-theme="neobrutalist"] td {
    font-weight: 600;
    border-bottom: 2px solid var(--color-border);
}

/* ---- modals & alerts ---- */
[data-theme="neobrutalist"] .modal-content {
    border: 3px solid var(--color-border);
}

[data-theme="neobrutalist"] .modal-header h2 {
    font-weight: 900;
    text-transform: uppercase;
}

[data-theme="neobrutalist"] .alert {
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-md);
    font-weight: 600;
}