:root {
            --background: #fcf9f8;
            --surface: #fcf9f8;
            --surface-dim: #dcd9d9;
            --surface-container-lowest: #ffffff;
            --surface-container-low: #f6f3f2;
            --surface-container: #f0edec;
            --surface-container-high: #ebe7e7;
            --surface-container-highest: #e5e2e1;
            --surface-bright: #ffffff;
            --surface-variant: #e5e2e1;
            --on-surface: #1c1b1b;
            --on-surface-variant: #4d4634;
            --outline: #121212;
            --outline-variant: #d0c6ad;
            --surface-tint: #725c00;
            --primary: #725c00;
            --primary-container: #ffd640;
            --primary-fixed: #ffe07e;
            --primary-fixed-dim: #eac32c;
            --secondary: #b51c00;
            --secondary-container: #dc3214;
            --secondary-fixed: #ffdad3;
            --secondary-fixed-dim: #ffb4a5;
            --tertiary: #0061a6;
            --tertiary-container: #c3dcff;
            --tertiary-fixed: #d2e4ff;
            --tertiary-fixed-dim: #a0caff;
            --success: #95a78d;
            --error: #ba1a1a;
            --error-container: #ffdad6;
            --card-bg: #e5e8db;
            --accent-card: #d69f95;
            --ink: #121212;
            --sprite-shadow: 4px 4px 0 0 var(--ink);
            --sprite-shadow-sm: 2px 2px 0 0 var(--ink);
        }

        :root[data-theme="dark"] {
            --background: #171309;
            --surface: #171309;
            --surface-dim: #171309;
            --surface-container-lowest: #120e05;
            --surface-container-low: #201b10;
            --surface-container: #241f14;
            --surface-container-high: #2f291e;
            --surface-container-highest: #3a3428;
            --surface-bright: #3e392c;
            --surface-variant: #3a3428;
            --on-surface: #ece1d0;
            --on-surface-variant: #d2c5ab;
            --outline: #9b9078;
            --outline-variant: #4f4632;
            --surface-tint: #f5bf00;
            --primary: #ffe9b9;
            --primary-container: #ffc700;
            --primary-fixed: #ffdf94;
            --primary-fixed-dim: #f5bf00;
            --secondary: #ffb59a;
            --secondary-container: #ff5e07;
            --secondary-fixed: #ffdbce;
            --secondary-fixed-dim: #ffb59a;
            --tertiary: #bdf4ff;
            --tertiary-container: #00e3fd;
            --tertiary-fixed: #9cefff;
            --tertiary-fixed-dim: #00daf3;
            --error: #ffb4ab;
            --error-container: #93000a;
            --card-bg: #2f291e;
            --accent-card: #ff5e07;
            --ink: #121212;
            --sprite-shadow: 4px 4px 0 0 var(--ink);
            --sprite-shadow-sm: 2px 2px 0 0 var(--ink);
        }

        .theme-primary-text {
            color: var(--primary) !important;
        }

        .theme-app-root {
            background: var(--background) !important;
            color: var(--on-surface) !important;
        }

        .theme-text {
            color: var(--on-surface) !important;
        }

        .theme-muted-text {
            color: var(--on-surface-variant) !important;
        }

        .theme-secondary-text {
            color: var(--secondary) !important;
        }

        .theme-success-text {
            color: var(--success) !important;
        }

        .theme-error-text {
            color: var(--error) !important;
        }

        .theme-icon-button {
            color: var(--on-surface-variant) !important;
        }

        .theme-icon-button:hover {
            background: color-mix(in srgb, var(--surface-container) 92%, transparent) !important;
        }

        .theme-surface-hover:hover {
            background: var(--surface-container) !important;
        }

        .theme-outline-border {
            border-color: var(--ink) !important;
        }

        .theme-menu-surface {
            background: var(--surface-container-low) !important;
            color: var(--on-surface) !important;
        }

        .theme-primary-action {
            background: var(--primary-container) !important;
            color: var(--ink) !important;
        }

        .theme-link-action {
            color: var(--secondary) !important;
        }

        .theme-divider-line {
            background: var(--outline-variant) !important;
        }

        .applim-auth-panel {
            background: var(--surface-container) !important;
            color: var(--on-surface) !important;
        }

        .applim-google-auth-button {
            background: var(--surface-bright) !important;
            color: var(--on-surface) !important;
        }

        .applim-google-auth-label {
            color: var(--on-surface) !important;
        }

        .applim-top-bar {
            background: var(--surface) !important;
            color: var(--on-surface) !important;
        }

        .applim-top-nav-link {
            color: var(--on-surface-variant) !important;
        }

        .applim-top-nav-link-active {
            color: var(--secondary) !important;
            box-shadow: inset 0 -2px 0 var(--secondary);
        }

        .applim-search-shell {
            background: var(--surface) !important;
            color: var(--on-surface) !important;
        }

        .applim-dialog-card {
            background: var(--card-bg) !important;
            color: var(--on-surface) !important;
        }

        .theme-secondary-action {
            background: var(--secondary-container) !important;
            color: var(--surface) !important;
        }

        :root[data-theme="dark"] .text-\[\#1c1b1b\],
        :root[data-theme="dark"] .\!text-\[\#1c1b1b\] {
            color: var(--on-surface) !important;
        }

        :root[data-theme="dark"] .text-\[\#4d4634\],
        :root[data-theme="dark"] .\!text-\[\#4d4634\] {
            color: var(--on-surface-variant) !important;
        }

        :root[data-theme="dark"] .text-\[\#b51c00\],
        :root[data-theme="dark"] .text-\[\#dc3214\],
        :root[data-theme="dark"] .\!text-\[\#b51c00\],
        :root[data-theme="dark"] .\!text-\[\#dc3214\] {
            color: var(--secondary) !important;
        }

        :root[data-theme="dark"] .bg-\[\#fcf9f8\],
        :root[data-theme="dark"] .bg-\[\#e5e8db\],
        :root[data-theme="dark"] .\!bg-\[\#fcf9f8\],
        :root[data-theme="dark"] .\!bg-\[\#e5e8db\] {
            background: var(--surface) !important;
            color: var(--on-surface) !important;
        }

        :root[data-theme="dark"] .border-\[\#1c1b1b\] {
            border-color: var(--ink) !important;
        }

        :root[data-theme="dark"] .hover\:bg-\[\#f0edec\]:hover {
            background: var(--surface-container) !important;
        }

        :root[data-theme="dark"] .job-root .text-primary {
            color: var(--primary-container) !important;
        }

        :root[data-theme="dark"] .job-root .bg-primary {
            background: var(--primary-container) !important;
            color: var(--ink) !important;
        }

        :root[data-theme="dark"] .job-root .text-secondary {
            color: var(--secondary) !important;
        }

        :root[data-theme="dark"] .job-root .bg-secondary {
            background: var(--secondary-container) !important;
            color: var(--ink) !important;
        }

        :root[data-theme="dark"] .job-root .text-positive {
            color: var(--success) !important;
        }

        :root[data-theme="dark"] .job-root .bg-positive {
            background: color-mix(in srgb, var(--success) 84%, var(--surface)) !important;
            color: var(--ink) !important;
        }

        :root[data-theme="dark"] .job-root .text-warning {
            color: var(--surface-tint) !important;
        }

        :root[data-theme="dark"] .job-root .bg-warning {
            background: var(--surface-tint) !important;
            color: var(--ink) !important;
        }

        :root[data-theme="dark"] .job-root .text-negative {
            color: var(--error) !important;
        }

        :root[data-theme="dark"] .job-root .bg-negative {
            background: var(--error-container) !important;
            color: var(--on-surface) !important;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--background);
            color: var(--on-surface);
            overflow-x: hidden;
            font-weight: 500;
        }

        .nicegui-content {
            padding: 0 !important;
        }

        .nicegui-sub-pages {
            width: 100%;
            min-height: 100vh;
        }

        .job-root {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            width: 100%;
            background: var(--background);
            color: var(--on-surface);
        }

        .job-root > main {
            flex: 1 0 auto;
        }

        .auth-root {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 28px;
            min-height: 100vh;
            width: 100%;
            box-sizing: border-box;
            padding: 24px;
            background: var(--background);
            color: var(--on-surface);
        }

        .auth-panel {
            display: flex;
            flex-direction: column;
            gap: 22px;
            width: min(420px, 100%);
            padding: 28px;
            border: 2px solid var(--ink);
            border-radius: 16px;
            background: var(--surface-container);
            box-shadow: var(--sprite-shadow);
        }

        .sprite-border {
            border: 2px solid var(--ink);
        }

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

        .sprite-shadow-sm {
            box-shadow: var(--sprite-shadow-sm);
        }

        .sprite-interactive {
            transition: transform 100ms ease, box-shadow 100ms ease,
                background 120ms ease;
        }

        .sprite-interactive:hover {
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 0 var(--ink);
        }

        .sprite-interactive:active {
            transform: translate(2px, 2px);
            box-shadow: 0 0 0 0 var(--ink);
        }

        .auth-form .q-field__control {
            background: var(--surface);
            border-radius: 10px;
        }

        .auth-form .q-field__control::before {
            border: 2px solid var(--ink);
        }

        .auth-form .q-field__control::after {
            border: 2px solid var(--tertiary);
        }

        .google-auth-button .q-btn__content {
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr) 28px;
            align-items: center;
            width: 100%;
        }

        .main-canvas {
            padding: 112px 40px 32px;
            min-height: 0;
            overflow-y: auto;
        }

        .public-footer {
            position: relative;
            z-index: 2;
            width: 100%;
            border-top: 2px solid var(--ink);
            background: var(--surface-container);
            color: var(--on-surface);
            padding: 28px 40px;
        }

        .public-footer-inner {
            display: grid;
            grid-template-columns: minmax(220px, 360px) minmax(0, 700px);
            gap: 28px;
            align-items: start;
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
        }

        .public-footer-logo {
            font-size: 28px;
            line-height: 1;
            font-weight: 900;
            font-style: italic;
            color: var(--secondary);
        }

        .public-footer-copy {
            max-width: 320px;
            color: var(--on-surface-variant);
            font-size: 13px;
            line-height: 1.45;
        }

        .public-footer-nav {
            display: grid;
            grid-template-columns: repeat(3, minmax(120px, max-content));
            gap: 18px;
            justify-content: start;
            width: 100%;
        }

        .public-footer-heading {
            color: var(--on-surface);
            font-size: 12px;
            font-weight: 900;
            text-transform: uppercase;
        }

        .public-footer-link {
            justify-content: flex-start;
            width: max-content;
            min-height: 28px;
            padding: 0;
            color: var(--secondary) !important;
            font-weight: 800;
        }

        .public-footer-link .q-btn__content {
            padding: 0;
        }

        .public-footer-meta {
            color: var(--on-surface-variant);
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
        }

        .public-footer-compact {
            width: min(520px, 100%);
            padding: 0;
            border-top: 0;
            background: transparent;
        }

        .public-footer-compact .public-footer-inner {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            text-align: center;
        }

        .public-footer-compact .public-footer-brand,
        .public-footer-compact .public-footer-meta {
            display: none;
        }

        .public-footer-compact .public-footer-nav {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 14px;
        }

        .public-footer-compact .public-footer-group {
            align-items: center;
        }

        .public-footer-compact .public-footer-heading {
            display: none;
        }

        .app-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            flex-wrap: wrap;
            min-height: 48px;
            border-top: 2px solid var(--ink);
            background: var(--surface);
            color: var(--on-surface);
            padding: 10px 20px;
        }

        .app-footer-meta {
            color: var(--on-surface-variant);
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .app-footer-links {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
        }

        .app-footer-link {
            min-height: 28px;
            color: var(--secondary) !important;
            font-size: 12px;
            font-weight: 800;
        }

        .app-footer-link .q-btn__content {
            padding: 0 4px;
        }

        .cookie-consent {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 60;
            display: block;
            width: min(520px, calc(100vw - 32px));
            border: 2px solid var(--ink);
            border-radius: 12px;
            background: var(--surface);
            box-shadow: var(--sprite-shadow);
            padding: 14px;
        }

        .cookie-consent.is-hidden {
            display: none;
        }

        .cookie-consent.is-visible {
            display: block;
            animation: cookie-consent-enter 180ms ease-out both;
        }

        .cookie-consent-row {
            width: 100%;
            align-items: stretch;
            justify-content: flex-start;
            gap: 12px;
            flex-direction: column;
        }

        .cookie-consent-copy {
            min-width: 0;
            width: 100%;
            flex: none;
            gap: 3px;
        }

        .cookie-consent-eyebrow {
            color: var(--secondary);
            font-size: 11px;
            font-weight: 900;
        }

        .cookie-consent-text {
            color: var(--on-surface-variant);
            font-size: 13px;
            line-height: 1.45;
        }

        .cookie-consent-actions {
            width: 100%;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .cookie-consent-link {
            color: var(--secondary) !important;
            font-weight: 800;
        }

        .cookie-consent-accept {
            min-height: 38px;
            border: 2px solid var(--ink);
            border-radius: 8px;
            background: var(--primary-container) !important;
            color: var(--on-surface) !important;
            box-shadow: var(--sprite-shadow-sm);
            font-weight: 900;
        }

        .legal-page {
            display: flex;
            justify-content: center;
            background-image: linear-gradient(
                    color-mix(in srgb, var(--outline-variant) 26%, transparent) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    color-mix(in srgb, var(--outline-variant) 26%, transparent) 1px,
                    transparent 1px
                );
            background-size: 44px 44px;
        }

        .legal-panel {
            width: min(820px, 100%);
            display: flex;
            flex-direction: column;
            gap: 22px;
            border: 2px solid var(--ink);
            border-radius: 14px;
            background: var(--surface);
            box-shadow: var(--sprite-shadow);
            padding: 32px;
        }

        .label-tech {
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .display-tight {
            letter-spacing: 0;
        }

        .search-input .q-field__control {
            min-height: 40px;
            height: 40px;
            color: var(--on-surface);
        }

        .search-input input {
            color: var(--on-surface);
        }

        .job-root .q-btn--unelevated:not(.q-btn--round) {
            border: 2px solid var(--ink);
            border-radius: 8px;
            box-shadow: var(--sprite-shadow);
            color: var(--on-surface);
            font-weight: 800;
            transition: transform 100ms ease, box-shadow 100ms ease,
                background 120ms ease;
        }

        .job-root .q-btn--unelevated.bg-primary:not(.q-btn--round) {
            background: var(--primary-container) !important;
            color: var(--on-surface) !important;
        }

        .job-root .q-btn--flat.text-primary:not(.q-btn--round) {
            color: var(--secondary) !important;
        }

        .job-root .q-btn--unelevated:not(.q-btn--round):hover {
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 0 var(--ink);
        }

        .job-root .q-btn--unelevated:not(.q-btn--round):active {
            transform: translate(2px, 2px);
            box-shadow: 0 0 0 0 var(--ink);
        }

        .job-root .q-btn--flat:not(.q-btn--round) {
            font-weight: 800;
        }

        .job-root .q-badge {
            border: 2px solid var(--ink);
            border-radius: 4px;
            box-shadow: var(--sprite-shadow-sm);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .kanban-board {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 28px;
            height: calc(100vh - 232px);
            overflow: hidden;
            padding-bottom: 16px;
        }

        .kanban-board.has-detail {
            grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
        }

        .kanban-columns {
            display: flex;
            gap: 28px;
            min-width: 0;
            height: 100%;
            overflow-x: auto;
            padding-bottom: 16px;
        }

        .profile-builder {
            display: flex;
            flex-direction: column;
            gap: 24px;
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
        }

        .profile-builder-header {
            width: 100%;
        }

        .jobs-hero {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin-bottom: 32px;
            max-width: 980px;
        }

        .landing-canvas {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 8fr) minmax(340px, 4fr);
            gap: 40px;
            width: 100%;
            max-width: none;
            min-height: min(760px, calc(100vh - 72px));
            margin: 0;
            box-sizing: border-box;
            padding: calc(72px + clamp(40px, 5vh, 58px)) 40px 18px;
            overflow: visible;
        }

        .landing-left {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            min-height: 0;
        }

        .landing-grid-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            opacity: 0.58;
            background-size: 40px 40px;
            background-image:
                linear-gradient(to right, rgba(18, 18, 18, 0.045) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(18, 18, 18, 0.045) 1px, transparent 1px);
        }

        .landing-title {
            font-size: clamp(38px, 4vw, 54px);
            line-height: 1.05;
            font-weight: 900;
            max-width: none;
            white-space: nowrap;
        }

        .landing-subtitle {
            max-width: 660px;
            font-size: 17px;
            line-height: 1.45;
        }

        .landing-canvas .jobs-hero {
            gap: 14px;
            margin-bottom: 18px;
            max-width: 100%;
        }

        .landing-hero-primary,
        .landing-hero-secondary {
            border: 2px solid var(--ink);
            border-radius: 10px;
            box-shadow: var(--sprite-shadow);
            font-weight: 900;
            color: var(--on-surface);
            transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
        }

        .landing-hero-primary {
            background: var(--tertiary) !important;
            color: #ffffff !important;
        }

        .landing-hero-secondary {
            background: var(--surface) !important;
        }

        .landing-hero-primary:hover,
        .landing-hero-secondary:hover {
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 0 var(--ink);
        }

        .landing-empty-card {
            width: min(100%, 680px);
            margin-top: 12px;
            padding: 20px 24px;
            border-radius: 14px;
            background: var(--surface-container);
            border: 2px solid var(--ink);
            box-shadow: var(--sprite-shadow-sm);
        }

        .landing-sticker {
            position: absolute;
            z-index: 0;
            pointer-events: none;
            border: 2px solid var(--ink);
            box-shadow: var(--sprite-shadow);
            opacity: 0.86;
        }

        .landing-sticker-primary {
            top: 138px;
            right: 30px;
            width: 104px;
            height: 104px;
            border-radius: 28px;
            background: var(--primary-container);
            transform: rotate(10deg);
        }

        .landing-sticker-blue {
            right: 218px;
            bottom: 118px;
            width: 68px;
            height: 68px;
            border-radius: 16px;
            background: var(--tertiary-container);
            transform: rotate(13deg);
        }

        .landing-arc {
            position: absolute;
            right: 210px;
            bottom: -34px;
            width: 250px;
            height: 250px;
            border-right: 6px solid color-mix(in srgb, var(--primary) 22%, transparent);
            border-bottom: 6px solid color-mix(in srgb, var(--primary) 22%, transparent);
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }

        .landing-journey {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
        }

        .journey-card {
            width: min(100%, 390px);
            border-radius: 18px;
            background: var(--surface);
            border: 2px solid var(--ink);
            box-shadow: var(--sprite-shadow);
            padding: 26px;
            transform: rotate(3deg);
            transition: transform 180ms ease;
        }

        .journey-card:hover {
            transform: rotate(0deg) translate(-2px, -2px);
        }

        .journey-card-header {
            padding-bottom: 10px;
            border-bottom: 2px solid var(--ink);
        }

        .journey-dot {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            border: 2px solid var(--ink);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .journey-row {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
        }

        .journey-dot-primary {
            background: var(--primary-container);
        }

        .journey-dot-secondary {
            background: var(--secondary-container);
            color: #ffffff;
        }

        .journey-dot-muted {
            background: var(--surface);
            border-style: dashed;
            color: var(--on-surface-variant);
        }

        .journey-track {
            height: 10px;
            flex: 1;
            min-width: 0;
            overflow: hidden;
            border-radius: 999px;
            background: var(--surface-variant);
            border: 2px solid var(--ink);
        }

        .journey-track-muted {
            border-style: dashed;
        }

        .journey-fill {
            height: 100%;
            border-right: 2px solid var(--ink);
        }

        .journey-fill-primary {
            background: var(--primary-container);
        }

        .journey-fill-secondary {
            background: var(--secondary-container);
        }

        .jobs-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            width: 100%;
        }

        .job-feed-card {
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 6px;
            height: 174px;
            min-height: 174px;
            padding: 15px 14px 11px;
            border-radius: 16px;
            background: var(--surface-container);
            border: 2px solid var(--ink);
            box-shadow: var(--sprite-shadow);
            cursor: pointer;
            transition: transform 160ms ease, background 160ms ease,
                box-shadow 160ms ease;
        }

        .job-feed-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: var(--primary-container);
            border-bottom: 2px solid var(--ink);
        }

        .job-feed-card:nth-child(4n + 2)::before {
            background: var(--secondary-container);
        }

        .job-feed-card:nth-child(4n + 3)::before {
            background: var(--tertiary-container);
        }

        .job-feed-card:nth-child(4n + 4)::before {
            background: var(--error-container);
        }

        .job-feed-card:hover {
            background: var(--surface-container-high);
            transform: translate(-4px, -4px);
            box-shadow: 8px 8px 0 0 var(--ink);
        }

        .template-kit-card {
            position: relative;
            overflow: visible;
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 22px 16px 18px;
            border-radius: 16px;
            background: var(--surface-container);
            border: 2px solid var(--ink);
            box-shadow: var(--sprite-shadow);
        }

        .template-kit-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: var(--primary-container);
            border-bottom: 2px solid var(--ink);
            border-radius: 14px 14px 0 0;
        }

        .template-kit-card:nth-child(2)::before {
            background: var(--secondary-container);
        }

        .template-kit-card:nth-child(3)::before {
            background: var(--tertiary-container);
        }

        .template-preview-shell {
            width: 100%;
            min-height: 520px;
            border: 2px solid var(--ink);
            border-radius: 12px;
            background: var(--surface);
            overflow: hidden;
        }

        .template-preview-frame {
            display: block;
            width: 100%;
            min-height: 520px;
            border: 0;
            background: var(--surface);
        }

        .job-feed-card .profile-chip {
            padding: 3px 7px;
            font-size: 10px;
            line-height: 1.1;
        }

        .job-feed-card .profile-chip:nth-child(n + 4) {
            display: none;
        }

        .job-card-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .job-card-location {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .feed-page-scrollbar {
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: min(100%, 720px);
            margin-top: 8px;
        }

        .feed-page-scrollbar-row {
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr) 34px;
            align-items: center;
            gap: 10px;
            width: 100%;
        }

        .feed-page-arrow {
            width: 34px;
            height: 34px;
            border: 2px solid var(--ink);
            background: var(--surface) !important;
            color: var(--on-surface) !important;
            box-shadow: var(--sprite-shadow-sm);
        }

        .feed-page-arrow.q-btn--disabled {
            opacity: 0.42 !important;
            box-shadow: none;
        }

        .feed-page-range-host,
        .feed-page-range-host > div {
            width: 100%;
        }

        .feed-page-slider {
            width: 100%;
            min-height: 28px;
            color: var(--primary-container) !important;
        }

        .feed-page-slider.q-slider--disabled {
            opacity: 0.82;
        }

        .feed-page-slider .q-slider__track-container {
            height: 28px;
            padding: 0;
            display: flex;
            align-items: center;
        }

        .feed-page-slider .q-slider__track {
            height: 16px !important;
            overflow: visible;
            border-radius: 999px;
            background: var(--surface) !important;
            border: 2px solid var(--ink);
            box-shadow: var(--sprite-shadow-sm);
        }

        .feed-page-slider .q-slider__selection {
            height: 100% !important;
            border-radius: 999px;
            background: transparent !important;
        }

        .feed-page-slider .q-slider__inner,
        .feed-page-slider .q-slider__selection {
            display: none !important;
        }

        .feed-page-slider .q-slider__thumb {
            width: 72px !important;
            height: 26px !important;
            border-radius: 999px;
            border: 2px solid var(--ink);
            background: var(--primary-container) !important;
            box-shadow: var(--sprite-shadow-sm);
            top: 50% !important;
            color: transparent !important;
            transform: translate(-50%, -50%) !important;
        }

        .feed-page-slider-start .q-slider__thumb,
        .feed-page-slider-middle .q-slider__thumb {
            background: var(--tertiary-container);
        }

        .feed-page-slider-end .q-slider__thumb {
            background: var(--secondary-container);
        }

        .feed-page-slider .q-slider__thumb-shape,
        .feed-page-slider .q-slider__focus-ring,
        .feed-page-slider .q-slider__thumb::before,
        .feed-page-slider .q-slider__thumb::after {
            display: none !important;
        }

        @media (prefers-reduced-motion: no-preference) {
            @keyframes landing-enter-up {
                from {
                    translate: 0 18px;
                }
                to {
                    translate: 0 0;
                }
            }

            @keyframes landing-float-primary {
                0%, 100% {
                    transform: translateY(0) rotate(10deg);
                }
                50% {
                    transform: translateY(-18px) rotate(15deg);
                }
            }

            @keyframes landing-float-blue {
                0%, 100% {
                    transform: translateY(0) rotate(13deg);
                }
                50% {
                    transform: translateY(-14px) rotate(8deg);
                }
            }

            @keyframes landing-marker-pulse {
                0%, 100% {
                    transform: scale(1);
                    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 18%, transparent);
                }
                50% {
                    transform: scale(1.08);
                    box-shadow: 0 0 0 8px color-mix(in srgb, var(--ink) 0%, transparent);
                }
            }

            @keyframes landing-arc-drift {
                0%, 100% {
                    transform: translate3d(0, 0, 0) rotate(0deg);
                    opacity: 0.78;
                }
                50% {
                    transform: translate3d(-18px, -8px, 0) rotate(-8deg);
                    opacity: 0.46;
                }
            }

            @keyframes cookie-consent-enter {
                from {
                    transform: translateY(12px);
                    opacity: 0;
                }
                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            .jobs-hero {
                animation: landing-enter-up 620ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
            }

            .landing-empty-card {
                animation: landing-enter-up 560ms cubic-bezier(0.16, 1, 0.3, 1) 180ms;
            }

            .job-feed-card {
                animation: landing-enter-up 560ms cubic-bezier(0.16, 1, 0.3, 1)
                    calc(160ms + var(--stagger-delay, 0ms));
            }

            .landing-sticker-primary {
                animation: landing-float-primary 6s ease-in-out infinite;
            }

            .landing-sticker-blue {
                animation: landing-float-blue 7s ease-in-out 900ms infinite;
            }

            .landing-arc {
                transform-origin: center;
                animation: landing-arc-drift 8s ease-in-out infinite;
            }

            .journey-dot-primary,
            .journey-dot-secondary {
                animation: landing-marker-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }

            .journey-dot-secondary {
                animation-delay: 420ms;
            }

            .journey-dot-muted {
                animation: landing-marker-pulse 3.2s cubic-bezier(0.4, 0, 0.6, 1) 900ms infinite;
            }
            }
        }

        .job-detail {
            display: flex;
            flex-direction: column;
            gap: 28px;
            width: 100%;
            max-width: 1180px;
            margin: 0 auto;
        }

        .admin-section-nav .q-btn {
            border-radius: 8px;
            font-weight: 800;
        }

        .article-body {
            font-size: 16px;
            line-height: 1.75;
        }

        .article-ad-slot {
            width: 100%;
            min-height: 118px;
            margin: 12px 0 24px;
            padding: 12px;
            border: 2px dashed color-mix(in srgb, var(--ink) 48%, transparent);
            border-radius: 14px;
            background: color-mix(in srgb, var(--surface-container) 82%, transparent);
        }

        .article-ad-slot-article-list {
            grid-column: 1 / -1;
        }

        .article-ad-heading {
            margin-bottom: 8px;
        }

        .article-ad-label,
        .article-ad-placement {
            color: var(--on-surface-variant);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .article-ad-ins {
            min-height: 90px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--surface) 72%, transparent);
        }

        .article-body p,
        .article-body ul,
        .article-body ol {
            margin-bottom: 1rem;
        }

        .article-body h1,
        .article-body h2,
        .article-body h3 {
            font-family: var(--display-font);
            font-weight: 900;
            margin: 1.5rem 0 0.75rem;
        }

        .admin-table-shell {
            width: 100%;
            overflow: hidden;
            border-radius: 16px;
            background: var(--surface);
            border: 2px solid var(--ink);
            box-shadow: var(--sprite-shadow);
        }

        .admin-table-header {
            background: var(--surface-container-high);
            border-bottom: 2px solid var(--ink);
            color: var(--on-surface-variant);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .admin-table-row {
            background: var(--surface);
            border-top: 2px solid color-mix(in srgb, var(--ink) 12%, transparent);
        }

        .admin-table-row:hover {
            background: var(--surface-container-low);
        }

        .service-code {
            display: inline-block;
            width: max-content;
            border-radius: 6px;
            background: var(--surface-container-low);
            border: 2px solid color-mix(in srgb, var(--ink) 38%, transparent);
            color: var(--on-surface-variant);
            padding: 2px 8px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                "Liberation Mono", "Courier New", monospace;
            font-size: 12px;
        }

        .job-detail-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
            gap: 24px;
            align-items: start;
            width: 100%;
        }

        /* Force both grid tracks to honour the template width even when the
           inner nicegui-column wrappers report intrinsic min-content sizes.
           Without this, long markdown tokens in the description push the
           1fr column wider than the track and the sidebar overlaps it. */
        .job-detail-grid > * {
            min-width: 0;
            max-width: 100%;
        }

        .job-detail-grid > :nth-child(2) {
            position: sticky;
            top: 96px;
            align-self: start;
        }

        .job-description {
            overflow-wrap: anywhere;
            word-break: break-word;
            max-width: 100%;
        }

        .job-description p {
            margin: 0 0 12px;
        }

        .job-description ul,
        .job-description ol {
            margin: 0 0 12px;
            padding-left: 20px;
        }

        .job-description li {
            margin-bottom: 4px;
        }

        .job-description li > p {
            margin: 0;
        }

        .job-description strong {
            color: var(--on-surface);
        }

        @media (max-width: 1024px) {
            .job-detail-grid {
                grid-template-columns: minmax(0, 1fr);
            }

            .job-detail-grid > :nth-child(2) {
                position: static;
            }
        }

        .telemetry-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .telemetry-locked {
            border-top: 2px solid var(--ink);
            padding-top: 12px;
            margin-top: 4px;
        }

        .profile-builder-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
            gap: 24px;
            width: 100%;
            align-items: start;
        }

        @media (max-width: 1100px) {
            .profile-builder-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        .profile-form-main,
        .profile-side {
            display: flex;
            flex-direction: column;
            gap: 20px;
            min-width: 0;
        }

        .profile-side {
            position: sticky;
            top: 96px;
        }

        .profile-panel {
            width: 100%;
            box-sizing: border-box;
            border-radius: 16px;
            background: var(--surface-container);
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            border: 2px solid var(--ink);
        }

        .profile-field {
            width: 100%;
        }

        .profile-field .q-field__control {
            background: var(--surface);
            color: var(--on-surface);
            border-radius: 10px;
        }

        .profile-field .q-field__control::before {
            border: 2px solid var(--ink);
        }

        .profile-field .q-field__control::after {
            border: 2px solid var(--tertiary);
        }

        .profile-field .q-field__label,
        .profile-field .q-field__native,
        .profile-field textarea {
            color: var(--on-surface);
        }

        .profile-field .q-field__label {
            color: var(--outline);
        }

        .profile-field textarea {
            resize: vertical;
        }

        .profile-form-main .q-textarea .q-field__control {
            min-height: 132px;
        }

        .profile-form-main .q-textarea textarea {
            line-height: 1.5;
        }

        .document-generator-grid {
            display: grid;
            grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
            gap: 18px;
            width: 100%;
        }

        .document-preview-shell {
            min-height: 520px;
            border: 2px solid var(--ink);
            border-radius: 12px;
            background: var(--surface);
            overflow: hidden;
        }

        .document-preview-frame {
            display: block;
            width: 100%;
            min-height: 520px;
            border: 0;
            background: var(--surface);
        }

        @media (max-width: 900px) {
            .document-generator-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        .profile-save-button {
            min-height: 42px;
            border-radius: 8px;
            padding: 0 20px;
            background: var(--primary-container);
        }

        .profile-identity-card {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .avatar-swatch {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            cursor: pointer;
            border: 2px solid var(--ink);
        }

        .avatar-swatch.selected {
            box-shadow: 0 0 0 3px var(--primary-container), var(--sprite-shadow-sm);
        }

        .emotion-choice {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: var(--surface);
            border: 2px solid transparent;
        }

        .emotion-choice:hover {
            background: var(--surface-bright);
            border-color: var(--ink);
        }

        .emotion-choice.selected {
            background: var(--primary-container);
            border-color: var(--ink);
            box-shadow: var(--sprite-shadow-sm);
        }

        .profile-identity-avatar {
            width: 64px;
            height: 64px;
            border-radius: 999px;
            background: var(--primary-container);
            color: var(--on-surface);
            border: 2px solid var(--ink);
            box-shadow: var(--sprite-shadow-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: 900;
            flex-shrink: 0;
        }

        .profile-stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .metric-tile {
            border-radius: 12px;
            background: var(--surface);
            padding: 16px;
            min-height: 96px;
            border: 2px solid var(--ink);
        }

        .profile-chip {
            border-radius: 999px;
            background: var(--surface);
            color: var(--on-surface);
            padding: 7px 12px;
            font-size: 12px;
            font-weight: 800;
            border: 2px solid var(--ink);
        }

        .profile-chip-removable {
            border-radius: 999px;
            background: var(--surface);
            color: var(--on-surface);
            padding: 5px 10px 5px 12px;
            border: 2px solid var(--ink);
        }

        .profile-chip-removable:hover {
            background: var(--primary-container);
        }

        .chip-editor-chips {
            min-height: 28px;
            flex-wrap: wrap;
        }

        .application-row {
            border-radius: 12px;
            background: var(--surface);
            padding: 16px;
            border: 2px solid var(--ink);
        }

        .application-row-link {
            cursor: pointer;
            transition: background 160ms ease, transform 160ms ease;
        }

        .application-row-link:hover {
            background: var(--primary-container);
            transform: translate(-2px, -2px);
            box-shadow: var(--sprite-shadow-sm);
        }

        .kanban-columns::-webkit-scrollbar,
        .kanban-column-body::-webkit-scrollbar {
            display: none;
        }

        .kanban-columns,
        .kanban-column-body {
            scrollbar-width: none;
        }

        .kanban-column {
            flex: 1 0 240px;
            min-width: 240px;
            max-width: 360px;
            height: 100%;
            align-items: stretch;
            border-radius: 16px;
            background: var(--surface-container);
            overflow: hidden;
            border: 2px solid var(--ink);
        }

        .kanban-column.interview {
            background: color-mix(in srgb, var(--accent-card) 42%, var(--surface-container));
        }

        .kanban-column.muted {
            opacity: 0.72;
        }

        .kanban-column-body {
            width: 100%;
            min-width: 0;
            align-items: stretch;
            overflow-y: auto;
            padding: 0 14px 16px;
            gap: 14px;
        }

        .kanban-drop-zone {
            border: 2px solid transparent;
            transition: background 160ms ease, border-color 160ms ease;
        }

        .kanban-drop-zone.drag-over {
            background: color-mix(in srgb, var(--primary-container) 36%, transparent);
            border-color: var(--ink);
        }

        .job-card {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            background: var(--surface);
            padding: 20px;
            transition: transform 180ms ease, background 180ms ease,
                box-shadow 180ms ease;
            cursor: pointer;
            min-height: 148px;
            border: 2px solid var(--ink);
        }

        .job-card.dragging {
            opacity: 0.62;
            transform: rotate(1deg) scale(0.98);
        }

        .detail-panel {
            min-width: 0;
            width: 100%;
            height: 100%;
            border-radius: 16px;
            background: var(--surface-container);
            padding: 24px;
            overflow-y: auto;
            scrollbar-width: none;
            border: 2px solid var(--ink);
            box-shadow: var(--sprite-shadow-sm);
        }

        .detail-panel::-webkit-scrollbar {
            display: none;
        }

        .application-detail-drawer {
            position: fixed;
            top: 0;
            right: 0;
            z-index: 70;
            width: min(460px, calc(100vw - 28px));
            height: 100vh;
            background: var(--surface-container);
            border-left: 2px solid var(--ink);
            box-shadow: -6px 0 0 color-mix(in srgb, var(--ink) 20%, transparent);
            padding: 16px;
            transform: translateX(calc(100% + 12px));
            transition: transform 180ms ease;
            overflow: hidden;
            pointer-events: none;
        }

        .application-detail-drawer.is-open {
            transform: translateX(0);
            pointer-events: auto;
        }

        .application-detail-drawer-backdrop {
            position: fixed;
            inset: 0;
            z-index: 60;
            background: rgba(31, 29, 27, 0.18);
            opacity: 0;
            pointer-events: none;
            transition: opacity 180ms ease;
        }

        .application-detail-drawer-backdrop.is-open {
            opacity: 1;
            pointer-events: auto;
        }

        .application-detail-drawer .detail-panel {
            height: calc(100vh - 32px);
            border-radius: 12px;
        }

        .detail-metric {
            min-height: 96px;
            border-radius: 12px;
            background: var(--surface);
            padding: 14px;
            border: 2px solid var(--ink);
        }

        .detail-description {
            display: -webkit-box;
            -webkit-line-clamp: 6;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.55;
        }

        .job-card:hover {
            background: var(--primary-container);
            transform: translate(-2px, -2px);
            box-shadow: var(--sprite-shadow-sm);
        }

        .job-card[data-focused="true"] {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }

        .job-card[data-selected="true"] {
            background: color-mix(in srgb, var(--primary-container) 42%, var(--surface));
        }

        .job-card.prominent {
            background: var(--accent-card);
            box-shadow: var(--sprite-shadow-sm);
        }

        .job-card-glow {
            position: absolute;
            top: -40px;
            right: -36px;
            width: 112px;
            height: 112px;
            border-radius: 999px;
            filter: blur(24px);
            opacity: 0.18;
        }

        .card-menu {
            opacity: 0;
            transition: opacity 150ms ease;
        }

        .job-card:hover .card-menu {
            opacity: 1;
        }

        @media (min-width: 901px) and (max-width: 1180px) {
            .landing-canvas {
                grid-template-columns: minmax(0, 1fr);
                min-height: auto;
                padding: 24px 32px 32px;
            }

            .jobs-hero {
                gap: 12px;
                margin-bottom: 18px;
                max-width: 100%;
            }

            .landing-title {
                font-size: clamp(32px, 4vw, 44px);
                line-height: 1.02;
                max-width: none;
                white-space: nowrap;
            }

            .landing-subtitle {
                max-width: 720px;
            }

            .landing-journey,
            .landing-sticker,
            .landing-arc {
                display: none;
            }

            .jobs-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 14px;
            }

            .job-feed-card {
                gap: 8px;
                min-height: 136px;
                padding: 16px 14px 14px;
            }

            .job-feed-card .profile-chip:nth-child(n + 4) {
                display: none;
            }

            .feed-page-scrollbar {
                margin-top: 10px;
                width: min(100%, 620px);
            }
        }

        @media (min-width: 1024px) and (max-width: 1180px) {
            .landing-canvas {
                padding-top: calc(74px + 24px);
            }
        }

        @media (max-width: 900px) {
            body {
                overflow: auto;
            }

            .landing-canvas {
                display: block;
                min-height: auto;
                padding: 40px 20px 48px;
            }

            .landing-grid-bg {
                inset: 0;
            }

            .landing-title {
                font-size: 36px;
                line-height: 1.12;
                white-space: normal;
            }

            .landing-subtitle {
                font-size: 16px;
            }

            .landing-journey,
            .landing-sticker,
            .landing-arc {
                display: none;
            }

            .jobs-grid {
                grid-template-columns: minmax(0, 1fr);
            }

            .feed-page-scrollbar {
                width: 100%;
            }

            .cookie-consent {
                bottom: 12px;
                right: 12px;
                width: calc(100vw - 24px);
                padding: 12px;
            }

            .cookie-consent-row {
                align-items: flex-start;
            }

            .cookie-consent-actions {
                width: 100%;
                justify-content: flex-start;
            }

            .legal-panel {
                padding: 22px;
            }

            .main-canvas {
                padding: 28px 20px;
                height: auto;
                overflow: visible;
            }

            .public-footer {
                padding: 24px 20px 220px;
            }

            .public-footer-inner {
                grid-template-columns: minmax(0, 1fr);
                gap: 20px;
            }

            .public-footer-nav {
                grid-template-columns: minmax(0, 1fr);
                gap: 16px;
            }

            .public-footer-meta {
                white-space: normal;
            }

            .public-footer-compact {
                padding: 0;
            }

            .public-footer-compact .public-footer-nav {
                grid-template-columns: none;
            }

            .kanban-board {
                grid-template-columns: minmax(0, 1fr);
                height: auto;
                min-height: 560px;
                overflow: visible;
            }

            .kanban-board.has-detail {
                grid-template-columns: minmax(0, 1fr);
            }

            .kanban-columns {
                min-height: 560px;
            }

            .detail-panel {
                height: auto;
            }

            .onboarding-grid,
            .analytics-metric-grid {
                grid-template-columns: minmax(0, 1fr) !important;
            }

            .bulk-actions-bar {
                position: sticky;
                bottom: 0;
                z-index: 20;
            }

            .profile-builder {
                height: auto;
                overflow: visible;
            }

            .profile-builder-grid {
                grid-template-columns: 1fr;
                overflow: visible;
            }

            .profile-form-main,
            .profile-side {
                overflow: visible;
                max-width: none;
            }

        }

        @media (max-width: 700px) {
            .kanban-columns {
                flex-direction: column;
                overflow-x: visible;
                min-height: 0;
            }

            .kanban-column {
                width: 100%;
                max-width: none;
                min-height: 340px;
            }

            .detail-panel {
                position: fixed;
                inset: 0;
                z-index: 40;
                border-radius: 0;
                height: 100vh;
                padding: 20px;
            }

            .application-detail-drawer {
                width: min(100vw, 460px) !important;
                padding: 0;
            }

            .application-detail-drawer .detail-panel {
                position: static;
                inset: auto;
                height: 100vh;
                border-radius: 0;
                border-left: 0;
                border-right: 0;
            }

            .top-nav {
                width: 100%;
                overflow-x: auto;
            }

            .search-input {
                min-width: 0;
            }
        }