/*
 * Moodshot Generator CSS - Auto-generated
 * DO NOT EDIT THIS FILE DIRECTLY
 * Edit source files in /static/css/src/ and run: ./scripts/build_css.sh
 */

@layer tokens, base, components, utilities, overrides;

/* Design Tokens - OBI Light Mode */
@layer tokens {
  :root {
    /* ========================================
       Background Colors (Light Mode)
       ======================================== */
    --color-bg-primary: #ffffff;      /* Main app background */
    --color-bg-secondary: #f5f5f5;    /* Sidebar, panels */
    --color-bg-elevated: #ffffff;     /* Cards, modals, dropdowns */
    --color-bg-hover: #f0f0f0;        /* Hover states */
    --color-bg-active: #e5e5e5;       /* Active/pressed states */

    /* ========================================
       Text Colors
       ======================================== */
    --color-text-primary: #1a1a1a;    /* Primary text */
    --color-text-secondary: #666666;  /* Muted/secondary text */
    --color-text-tertiary: #999999;   /* Disabled/placeholder */

    /* ========================================
       Border Colors
       ======================================== */
    --color-border: #e0e0e0;          /* Default borders */
    --color-border-hover: #cccccc;    /* Border on hover */
    --color-border-focus: #f56600;    /* Focus ring color */

    /* ========================================
       Accent Color (OBI Orange)
       ======================================== */
    --color-accent: #f56600;          /* Primary accent */
    --color-accent-hover: #e55d00;    /* Accent hover */
    --color-accent-muted: rgba(245, 102, 0, 0.12); /* Accent background */

    /* ========================================
       Semantic Status Colors (Light Mode)
       ======================================== */
    --color-success: #16a34a;         /* Green for light */
    --color-success-muted: rgba(22, 163, 74, 0.12);
    --color-error: #dc2626;           /* Red for light */
    --color-error-muted: rgba(220, 38, 38, 0.12);
    --color-warning: #ca8a04;         /* Yellow for light */
    --color-warning-muted: rgba(202, 138, 4, 0.12);
    --color-info: #2563eb;            /* Blue for info states */
    --color-info-muted: rgba(37, 99, 235, 0.12);

    /* ========================================
       Provider Brand Colors
       ======================================== */
    --color-jira: #2684FF;            /* Jira blue (adjusted for dark) */
    --color-jira-hover: #0065FF;
    --color-linear: #5E6AD2;          /* Linear purple */
    --color-linear-hover: #4D5ABE;

    /* ========================================
       Spacing Scale
       ======================================== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ========================================
       Layout
       ======================================== */
    --layout-max-width: 1100px;
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 56px;

    /* ========================================
       Border Radius
       ======================================== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ========================================
       Typography
       ======================================== */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* ========================================
       Shadows (Light Mode)
       ======================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* ========================================
       Transitions (Linear-style: ease-out)
       ======================================== */
    --transition-fast: 100ms ease-out;
    --transition: 150ms ease-out;
    --transition-slow: 200ms ease-out;
  }
}

/* Base Styles (Light Mode) */
@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    color-scheme: light;
  }

  body {
    font-family: var(--font-sans);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-xl); font-weight: 500; }
  h3 { font-size: var(--font-size-lg); }

  p {
    color: var(--color-text-secondary);
  }

  a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition);
  }

  a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
  }

  /* Focus management */
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Remove default focus for mouse users */
  :focus:not(:focus-visible) {
    outline: none;
  }

  /* Selection color */
  ::selection {
    background: var(--color-accent-muted);
    color: var(--color-text-primary);
  }

  /* Scrollbar styling for dark mode */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--color-bg-primary);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: var(--radius-full);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
  }

  /* Main content area */
  main {
    flex: 1;
    width: 100%;
    padding: var(--space-8);
  }

  /* Code elements */
  code, pre {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
  }

  code {
    background: var(--color-bg-secondary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
  }

  pre {
    background: var(--color-bg-secondary);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
  }

  pre code {
    background: none;
    padding: 0;
  }

  /* HR styling */
  hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
  }
}

/* Button Component (Linear-style Dark Mode) */
@layer components {
  /* ========================================
     Base Button (neutral default)
     ======================================== */
  .c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 50px;
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
  }

  .c-btn:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
    transform: translateY(-1px);
    text-decoration: none;
  }

  .c-btn:active {
    transform: translateY(0);
  }

  .c-btn:disabled,
  .c-btn[aria-disabled="true"] {
    background: var(--color-bg-hover);
    color: var(--color-text-tertiary);
    border-color: var(--color-border);
    cursor: not-allowed;
    transform: none;
  }

  /* ========================================
     Primary Button (accent CTA)
     ======================================== */
  .c-btn--primary {
    background: var(--color-accent);
    color: #ffffff;
    border-color: transparent;
  }

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

  .c-btn--primary:disabled,
  .c-btn--primary[aria-disabled="true"] {
    background: var(--color-bg-hover);
    color: var(--color-text-tertiary);
    border-color: var(--color-border);
  }

  /* ========================================
     Outline Button (white bg, accent on hover)
     ======================================== */
  .c-btn--outline {
    background: var(--color-surface);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
  }

  .c-btn--outline:hover {
    background: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
  }

  /* ========================================
     Secondary Button
     ======================================== */
  .c-btn--secondary {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
  }

  .c-btn--secondary:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
  }

  /* ========================================
     Ghost Button
     ======================================== */
  .c-btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border: none;
  }

  .c-btn--ghost:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    transform: none;
  }

  /* ========================================
     Danger Button
     ======================================== */
  .c-btn--danger {
    background: var(--color-error-muted);
    color: var(--color-error);
    border: 1px solid transparent;
  }

  .c-btn--danger:hover {
    background: var(--color-error);
    color: #ffffff;
  }

  /* ========================================
     Size Variants
     ======================================== */
  .c-btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
  }

  .c-btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
  }

  /* ========================================
     Provider Brand Buttons
     ======================================== */
  .c-btn--jira {
    background: var(--color-jira);
    color: #ffffff;
  }

  .c-btn--jira:hover {
    background: var(--color-jira-hover);
    color: #ffffff;
  }

  .c-btn--linear {
    background: var(--color-linear);
    color: #ffffff;
  }

  .c-btn--linear:hover {
    background: var(--color-linear-hover);
    color: #ffffff;
  }

  /* ========================================
     Logout Button Special Case
     ======================================== */
  form[action="/logout"] button {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    transition: all var(--transition);
  }

  form[action="/logout"] button:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-color: var(--color-border-hover);
  }
}

/* Form Component (Linear-style Dark Mode) */
@layer components {
  /* ========================================
     Form Layout
     ======================================== */
  form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .c-form__field,
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  /* ========================================
     Labels
     ======================================== */
  label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
  }

  /* ========================================
     Inputs
     ======================================== */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    appearance: none;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--color-text-tertiary);
  }

  input:hover,
  select:hover,
  textarea:hover {
    border-color: var(--color-border-hover);
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-muted);
  }

  /* Select dropdown arrow */
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238b8b8b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
  }

  /* ========================================
     Disabled State
     ======================================== */
  input:disabled,
  select:disabled,
  textarea:disabled {
    background-color: var(--color-bg-hover);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
  }

  /* ========================================
     Help Text
     ======================================== */
  .c-form__help,
  .field-help {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
  }

  /* ========================================
     Error State
     ======================================== */
  .c-form__field--error input,
  .field--error input {
    border-color: var(--color-error);
  }

  .c-form__field--error input:focus,
  .field--error input:focus {
    box-shadow: 0 0 0 3px var(--color-error-muted);
  }

  .c-form__error,
  .field-error {
    font-size: var(--font-size-xs);
    color: var(--color-error);
    margin-top: var(--space-1);
  }

  /* ========================================
     Label Row (e.g., Password + Forgot link)
     ======================================== */
  .c-form__label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .c-form__link {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    text-decoration: none;
  }

  .c-form__link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
  }

  /* ========================================
     Checkbox (Stripe-inspired)
     ======================================== */
  .c-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
  }

  .c-checkbox input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
  }

  .c-checkbox input[type="checkbox"]:hover {
    border-color: var(--color-border-hover);
  }

  .c-checkbox input[type="checkbox"]:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.346 3.301a.929.929 0 0 1 1.37 0 1.076 1.076 0 0 1 0 1.456l-4.64 4.94a.929.929 0 0 1-1.37 0L3.284 7.123a1.076 1.076 0 0 1 0-1.456.929.929 0 0 1 1.37 0L6.39 7.513l3.955-4.212z'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .c-checkbox input[type="checkbox"]:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-muted);
    outline: none;
  }

  .c-checkbox__label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
  }

  /* Consent checkbox - multi-line label with links */
  .c-checkbox--consent {
    align-items: flex-start;
  }

  .c-checkbox--consent input[type="checkbox"] {
    margin-top: 3px;
  }

  .c-checkbox--consent .c-checkbox__label {
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.5;
  }

  .c-checkbox--consent .c-checkbox__label a {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .c-checkbox--consent .c-checkbox__label a:hover {
    color: var(--color-text-primary);
  }

  /* ========================================
     Block Button (Full Width)
     ======================================== */
  .c-btn--block {
    width: 100%;
  }
}

/* Navbar & Dashboard Components (Linear-style Dark Mode) */
@layer components {

  /* ==================== Navbar ==================== */
  .navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
  }

  .navbar__inner {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 var(--space-6);
    gap: var(--space-8);
  }

  .navbar__brand {
    flex-shrink: 0;
  }

  .navbar__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
  }

  .navbar__logo:hover {
    text-decoration: none;
  }

  .navbar__logo-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
  }

  .navbar__tabs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
  }

  .navbar__tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--transition);
  }

  .navbar__tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
    text-decoration: none;
  }

  .navbar__tab--active {
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
  }

  .navbar__tab-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
  }

  .navbar__tab--active .navbar__tab-icon {
    opacity: 1;
  }

  .navbar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: var(--color-accent);
    color: white;
    border-radius: var(--radius-full);
    margin-left: var(--space-1);
  }

  .navbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
  }

  .navbar__user {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  /* ==================== Dashboard Main ==================== */
  .dashboard-main {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: var(--space-6);
  }

  /* ==================== Filter Tabs ==================== */
  .filter-tabs {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
    padding: var(--space-1);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    width: fit-content;
  }

  .filter-tab {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
  }

  .filter-tab:hover {
    color: var(--color-text-primary);
    text-decoration: none;
  }

  .filter-tab--active {
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    box-shadow: var(--shadow-sm);
  }

  /* ==================== Batch Control ==================== */
  /* Linear-style batch control with refined slider and clean layout */
  .batch-control {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 14px 20px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    margin-bottom: var(--space-6);
  }

  .batch-control__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  .batch-control__slider {
    flex: 1;
    max-width: 180px;
    appearance: none;
    -webkit-appearance: none;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    cursor: pointer;
  }

  .batch-control__slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--color-accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 150ms ease, box-shadow 150ms ease;
  }

  .batch-control__slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .batch-control__slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--color-accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  }

  .batch-control__slider:focus-visible {
    outline: none;
  }

  .batch-control__slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  }

  .batch-control__value {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    min-width: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .batch-control__btn {
    margin-left: auto;
  }

  /* ==================== Jobs Table ==================== */
  .jobs-table-container {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .jobs-table {
    width: 100%;
    border-collapse: collapse;
  }

  .jobs-table th,
  .jobs-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
  }

  .jobs-table th {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
  }

  .jobs-table td {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
  }

  .jobs-table tr:last-child td {
    border-bottom: none;
  }

  .jobs-table tr:hover td {
    background: var(--color-bg-hover);
  }

  .jobs-table__product {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .jobs-table__product-name {
    font-weight: 500;
    color: var(--color-text-primary);
  }

  .jobs-table__artikelnummer {
    font-size: var(--font-size-xs);
    font-family: var(--font-mono);
    color: var(--color-text-tertiary);
  }

  .jobs-table__time {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }

  .jobs-table__error {
    font-size: var(--font-size-xs);
    color: var(--color-error);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Status badges for jobs table */
  .status-badge--completed {
    background: var(--color-success-muted);
    color: var(--color-success);
  }

  .status-badge--failed {
    background: var(--color-error-muted);
    color: var(--color-error);
  }

  /* ==================== Review Card Actions ==================== */
  .review-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition), opacity 250ms ease, transform 250ms ease;
  }

  .review-card.htmx-swapping {
    opacity: 0;
    transform: scale(0.95);
  }

  .review-card:hover {
    border-color: var(--color-border-hover);
  }

  .review-card__images {
    display: flex;
    align-items: stretch;
  }

  .review-card__before,
  .review-card__after {
    flex: 1;
    position: relative;
    aspect-ratio: 1;
    background: var(--color-bg-secondary);
    overflow: hidden;
  }

  .review-card__before img,
  .review-card__after img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .review-card__label {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    font-size: var(--font-size-xs);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
  }

  .review-card__label--generated {
    background: var(--color-accent);
    color: white;
  }

  .review-card__arrow {
    width: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
    background: var(--color-bg-secondary);
  }

  .review-card__arrow svg {
    width: 20px;
    height: 20px;
  }

  .review-card__footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .review-card__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
  }

  .review-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .review-card__name {
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
  }

  .review-card__artikelnummer {
    font-size: var(--font-size-xs);
    font-family: var(--font-mono);
    color: var(--color-text-tertiary);
  }

  .review-card__time {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
  }

  .review-actions {
    display: flex;
    gap: var(--space-2);
  }

  .review-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
  }

  .review-btn__icon {
    width: 16px;
    height: 16px;
  }

  .review-btn--approve {
    background: var(--color-success-muted);
    color: var(--color-success);
  }

  .review-btn--approve:hover {
    background: var(--color-success);
    color: #000;
  }

  .review-btn--reject {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
  }

  .review-btn--reject:hover {
    background: var(--color-error-muted);
    color: var(--color-error);
  }

  /* ==================== Review Grid ==================== */
  .review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-4);
  }

  /* ==================== Accept All Bar ==================== */
  .accept-all-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-elevated);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
  }

  .accept-all-bar__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  .accept-all-bar__count {
    font-weight: 600;
    color: var(--color-text-primary);
  }

  .accept-all-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .accept-all-bar__actions form {
    margin: 0;
  }

  /* ==================== Pagination ==================== */
  .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
  }

  .pagination__info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  .pagination__controls {
    display: flex;
    gap: var(--space-2);
  }

  .pagination__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition);
  }

  .pagination__btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    text-decoration: none;
  }

  .pagination__btn--disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  /* ==================== Image Expand Button ==================== */
  .expand-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition), background var(--transition);
  }

  .expand-btn:hover {
    background: rgba(0, 0, 0, 0.8);
  }

  .expand-btn svg {
    width: 16px;
    height: 16px;
  }

  .review-card__before:hover .expand-btn,
  .review-card__after:hover .expand-btn {
    opacity: 1;
  }

  /* ==================== Image Modal ==================== */
  [x-cloak] {
    display: none !important;
  }

  .image-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    padding: var(--space-6);
  }

  .image-modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-full);
    color: white;
    cursor: pointer;
    transition: background var(--transition);
  }

  .image-modal__close:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .image-modal__close svg {
    width: 24px;
    height: 24px;
  }

  .image-modal__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
  }

  /* ==================== Product Card Badge ==================== */
  .product-card__badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
  }

  .product-card__badge--missing {
    background: var(--color-warning-muted);
    color: var(--color-warning);
  }

  .product-card__badge--has {
    background: var(--color-success-muted);
    color: var(--color-success);
  }

  .product-card__image-container {
    position: relative;
  }

  /* ==================== Responsive ==================== */
  @media (max-width: 640px) {
    .navbar__inner {
      padding: 0 var(--space-4);
      gap: var(--space-4);
    }

    .navbar__tabs {
      gap: 0;
    }

    .navbar__tab {
      padding: var(--space-2);
    }

    .navbar__tab span:not(.navbar__badge) {
      display: none;
    }

    .navbar__user {
      display: none;
    }

    .dashboard-main {
      padding: var(--space-4);
    }

    .filter-tabs {
      flex-wrap: wrap;
      width: 100%;
    }

    .filter-tab {
      flex: 1;
      text-align: center;
      padding: var(--space-2);
    }

    .batch-control {
      flex-wrap: wrap;
      gap: var(--space-3);
    }

    .batch-control__btn {
      width: 100%;
      margin-left: 0;
    }

    .review-grid {
      grid-template-columns: 1fr;
    }

    .jobs-table th:nth-child(4),
    .jobs-table td:nth-child(4) {
      display: none;
    }
  }
}

/* Toast Notifications (Linear-style Dark Mode) */
@layer components {
  /* ========================================
     Base Toast
     ======================================== */
  .c-toast {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 1000;

    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 360px;
    padding: var(--space-3) var(--space-4);

    background: var(--color-bg-elevated);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);

    font-size: var(--font-size-sm);
    color: var(--color-text-primary);

    animation:
      toast-enter 0.2s ease-out,
      toast-exit 0.2s ease-in 4s forwards;
  }

  /* ========================================
     Variants
     ======================================== */
  .c-toast--success {
    border-left: 3px solid var(--color-success);
  }

  .c-toast--success .c-toast__icon {
    color: var(--color-success);
  }

  .c-toast--error {
    border-left: 3px solid var(--color-error);
  }

  .c-toast--error .c-toast__icon {
    color: var(--color-error);
  }

  .c-toast--warning {
    border-left: 3px solid var(--color-warning);
  }

  .c-toast--warning .c-toast__icon {
    color: var(--color-warning);
  }

  .c-toast--info {
    border-left: 3px solid var(--color-info);
  }

  .c-toast--info .c-toast__icon {
    color: var(--color-info);
  }

  /* ========================================
     Toast Elements
     ======================================== */
  .c-toast__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }

  .c-toast__message {
    flex: 1;
    line-height: 1.4;
  }

  .c-toast__dismiss {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: calc(-1 * var(--space-1));
    margin-left: var(--space-2);

    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;

    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
    transition: color var(--transition-fast);
  }

  .c-toast__dismiss:hover {
    color: var(--color-text-primary);
  }

  /* ========================================
     Animations
     ======================================== */
  @keyframes toast-enter {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes toast-exit {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  /* ========================================
     Reduced Motion
     ======================================== */
  @media (prefers-reduced-motion: reduce) {
    .c-toast {
      animation: toast-fade-exit 0.2s ease-in 4s forwards;
    }

    @keyframes toast-fade-exit {
      to {
        opacity: 0;
      }
    }
  }

  /* ========================================
     Sidebar-aware positioning
     ======================================== */
  .layout-sidebar .c-toast {
    left: calc(var(--sidebar-width) + var(--space-6));
    right: auto;
  }

  @media (max-width: 768px) {
    .layout-sidebar .c-toast {
      left: var(--space-4);
      right: var(--space-4);
      max-width: none;
    }
  }
}

/* Utility Classes */
@layer utilities {
  .text-center { text-align: center; }
  .text-right { text-align: right; }
  
  .mt-1 { margin-top: var(--space-1); }
  .mt-2 { margin-top: var(--space-2); }
  .mt-4 { margin-top: var(--space-4); }
  .mt-6 { margin-top: var(--space-6); }
  .mt-8 { margin-top: var(--space-8); }
  
  .mb-1 { margin-bottom: var(--space-1); }
  .mb-2 { margin-bottom: var(--space-2); }
  .mb-4 { margin-bottom: var(--space-4); }
  .mb-6 { margin-bottom: var(--space-6); }
  
  .w-full { width: 100%; }
  
  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .gap-2 { gap: var(--space-2); }
  .gap-4 { gap: var(--space-4); }

  .hidden { display: none; }
}
/* Auth Pages - Stripe-inspired sizing */
@layer overrides {
  /* Header with logo */
  .auth-header-wrapper {
    margin: 0 auto;
    width: 1080px;
  }

  .auth-header-container {
    display: flex;
    justify-content: space-between;
    padding: 22px 16px;
  }

  .auth-logo-link {
    display: flex;
    align-items: center;
  }

  .auth-logo {
    width: auto;
    height: 25px;
  }

  .auth-logo-text {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--color-text-primary);
  }

  .auth-container {
    display: flex;
    justify-content: center;
    width: 1080px;
    margin: 0 auto;
  }

  .auth-card {
    background: var(--color-bg-elevated);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    width: 560px;
    min-width: 560px;
    padding: 48px;
  }

  .auth-inner {
    padding: 0 20px;
  }

  /* Header */
  .auth-header {
    text-align: left;
    margin-bottom: 0;
    border: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .auth-header h1 {
    font-size: 26px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.2px;
    color: var(--color-text-primary);
    margin-bottom: 20px;
  }

  @media screen and (max-width: 880px) {
    .auth-container {
      padding: 20px;
    }

    .auth-header h1 {
      font-size: 20px;
      line-height: normal;
    }
  }

  /* Form */
  .auth-form {
    gap: 20px;
  }

  /* Error message */
  .auth-message.error {
    background: var(--color-error-muted);
    color: var(--color-error);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
    border: 1px solid rgba(248, 113, 113, 0.25);
  }

  /* Field internal gap - 12px label to input */
  .auth-container .c-form__field {
    gap: 12px;
  }

  /* Labels - 14px/20px medium */
  .auth-container label {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }

  /* Inputs - 8px 16px padding, 16px/28px font */
  .auth-container input[type="text"],
  .auth-container input[type="email"],
  .auth-container input[type="password"] {
    padding: 8px 16px;
    font-size: 16px;
    line-height: 28px;
    border-radius: 6px;
  }

  /* Buttons - same sizing as inputs */
  .auth-container button[type="submit"],
  .auth-container .c-btn {
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    border-radius: 6px;
  }

  /* Links - 14px/20px medium accent color */
  .c-form__link {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }

  /* Checkbox label - 14px/20px medium */
  .c-checkbox__label {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }

  /* Placeholder page text */
  .auth-placeholder {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
  }

  /* Divider - "Or" separator */
  .auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    color: var(--color-text-tertiary);
    font-size: 14px;
    font-weight: 400;
  }

  .auth-divider::before,
  .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
  }

  /* Social/OAuth button - secondary style with icon */
  .c-btn--social {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    border-radius: 6px;
    gap: 8px;
  }

  .c-btn--social:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
    transform: none;
  }

  .c-btn--social:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .c-btn--social svg {
    width: 16px;
    height: 17px;
    flex-shrink: 0;
  }

  /* Bottom link - 14px */
  .auth-alt {
    font-size: 14px;
    margin: 40px -40px -26px;
    text-align: center;
  }
}

/* Category Overview Page - Linear-Quality Design */
@layer components {

  /* ==================== Container ==================== */
  .product-overview {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
  }

  /* ==================== Header ==================== */
  .product-overview .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .product-overview .dashboard-header__title {
    flex: 1;
    min-width: 0;
  }

  .product-overview .dashboard-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1);
  }

  .product-overview .dashboard-header__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
  }

  .product-overview .dashboard-header__actions {
    flex-shrink: 0;
    padding-top: var(--space-1);
  }

  /* ==================== Stats Bar Override ==================== */
  .product-overview .stats-bar {
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: var(--space-10);
  }

  /* ==================== Category Table ==================== */
  .category-table-wrapper {
    background: var(--color-bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .category-table {
    width: 100%;
    border-collapse: collapse;
  }

  .category-table__th {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .category-table__th--numeric {
    text-align: right;
  }

  .category-table__td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    vertical-align: middle;
  }

  .category-table__row:last-child .category-table__td {
    border-bottom: none;
  }

  .category-table__row {
    transition: background-color 150ms ease;
  }

  .category-table__row:hover {
    background: var(--color-bg-hover);
  }

  .category-table__td--name {
    font-weight: 500;
  }

  .category-table__td--numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .category-table__td--success {
    color: var(--color-success);
  }

  .category-table__td--warning {
    color: var(--color-warning);
  }

  /* Coverage Column */
  .category-table__td--coverage {
    min-width: 140px;
  }

  .coverage-bar-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .coverage-bar {
    flex: 1;
    height: 4px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .coverage-bar__fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: var(--radius-full);
    transition: width 300ms ease;
  }

  .coverage-bar__label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
  }

  /* Action Column */
  .category-table__td--action {
    text-align: right;
    white-space: nowrap;
  }

  /* ==================== Small Button Variant ==================== */
  .btn--small {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 150ms ease;
    cursor: pointer;
  }

  .btn--small:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
    border-color: rgba(0, 0, 0, 0.12);
  }

  .btn--small .btn__icon-right {
    width: 12px;
    height: 12px;
    opacity: 0.6;
  }

  .btn--small:hover .btn__icon-right {
    opacity: 1;
  }

  .btn--small .btn__icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    flex-shrink: 0;
  }

  .btn--small:hover .btn__icon {
    opacity: 1;
  }

  /* ==================== Empty State Override ==================== */
  .product-overview .empty-state {
    border: 1px solid rgba(0, 0, 0, 0.06);
  }

  .empty-state__subtext {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-1);
  }

  /* ==================== Responsive ==================== */
  @media (max-width: 768px) {
    .product-overview {
      padding: var(--space-6) var(--space-4);
    }

    .category-table__th,
    .category-table__td {
      padding: var(--space-2) var(--space-3);
    }

    /* Hide some columns on mobile */
    .category-table__th:nth-child(3),
    .category-table__td:nth-child(3),
    .category-table__th:nth-child(4),
    .category-table__td:nth-child(4) {
      display: none;
    }

    .category-table__td--coverage {
      min-width: 100px;
    }
  }
}

/* Classifier Page - Linear-Quality Design */
@layer components {

  /* ==================== Container ==================== */
  .classifier-page {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
  }

  /* ==================== Header ==================== */
  .classifier-page .dashboard-header {
    margin-bottom: var(--space-10);
    text-align: center;
  }

  .classifier-page .dashboard-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-2);
  }

  .classifier-page .dashboard-header__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
  }

  /* ==================== Results Section ==================== */
  .classifier-results {
    margin-bottom: var(--space-10);
  }

  .classifier-results .section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
  }

  .results-card {
    background: var(--color-bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  /* Primary Result */
  .results-card__primary {
    padding: var(--space-6);
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .results-card__label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
  }

  .results-card__value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
  }

  .results-card__confidence {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-success);
    font-weight: 500;
  }

  .results-card__confidence::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--color-success);
    border-radius: var(--radius-full);
  }

  /* Probabilities Section */
  .results-card__probabilities {
    padding: var(--space-5);
  }

  .results-card__probabilities-title {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
  }

  .probability-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .probability-bar {
    display: grid;
    grid-template-columns: 140px 1fr 48px;
    align-items: center;
    gap: var(--space-3);
  }

  .probability-bar__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .probability-bar__track {
    height: 4px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .probability-bar__fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: var(--radius-full);
    transition: width 300ms ease;
  }

  .probability-bar__value {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* ==================== Upload Section ==================== */
  .classifier-upload {
    margin-bottom: var(--space-8);
  }

  .classifier-upload .section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
  }

  .upload-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .upload-form__dropzone {
    position: relative;
  }

  .upload-form__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .upload-form__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-6);
    background: var(--color-bg-primary);
    border: 2px dashed rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
  }

  .upload-form__label:hover {
    border-color: rgba(0, 0, 0, 0.24);
    background: var(--color-bg-hover);
  }

  .upload-form__input:focus + .upload-form__label {
    border-color: var(--color-accent);
    background: var(--color-accent-muted);
  }

  .upload-form__icon {
    width: 32px;
    height: 32px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
  }

  .upload-form__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
  }

  .upload-form__text strong {
    color: var(--color-text-primary);
    font-weight: 500;
  }

  .upload-form__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
  }

  .upload-form__filename {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-accent-muted);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
  }

  /* ==================== Responsive ==================== */
  @media (max-width: 640px) {
    .classifier-page {
      padding: var(--space-6) var(--space-4);
    }

    .probability-bar {
      grid-template-columns: 100px 1fr 44px;
      gap: var(--space-2);
    }

    .probability-bar__label {
      font-size: var(--font-size-xs);
    }
  }
}

/* Moodshot Dashboard - Vercel-Style Card Gallery */
@layer components {

  /* ==================== Layout ==================== */
  .moodshot-dashboard {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: var(--space-6);
  }

  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .dashboard-header__title {
    flex: 1;
    min-width: 0;
  }

  .dashboard-header__title h1 {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1);
  }

  .dashboard-header__subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
  }

  .dashboard-header__actions {
    flex-shrink: 0;
    padding-top: var(--space-1);
  }

  /* Header Select - Linear-style dropdown for header placement */
  .header-select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 180px;
    padding: 7px 32px 7px 12px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text-primary);
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }

  .header-select:hover {
    border-color: rgba(0, 0, 0, 0.15);
  }

  .header-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .dashboard-section {
    margin-bottom: var(--space-10);
  }

  .section-title {
    font-size: var(--font-size-lg);
    font-weight: 500;
    margin-bottom: var(--space-4);
    color: var(--color-text-primary);
  }

  /* ==================== Stats Bar ==================== */
  .stats-bar {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-8);
  }

  .stats-bar__inner {
    display: flex;
    gap: var(--space-8);
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .stat-item__value {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .stat-item__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  .stat-item--pending .stat-item__value { color: var(--color-warning); }
  .stat-item--running .stat-item__value { color: var(--color-info); }
  .stat-item--success .stat-item__value { color: var(--color-success); }

  /* ==================== Filter Section ==================== */
  /* Linear-style filter controls with clean select styling */
  .filter-section {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .filter-section__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  .filter-section__select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 200px;
    max-width: 280px;
    padding: 7px 32px 7px 12px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text-primary);
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  }

  .filter-section__select:hover {
    border-color: rgba(0, 0, 0, 0.15);
    background-color: rgba(0, 0, 0, 0.01);
  }

  .filter-section__select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .filter-section__select:focus-visible {
    outline: none;
  }

  /* ==================== Active Jobs ==================== */
  .active-jobs-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .job-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition);
  }

  .job-card:hover {
    border-color: var(--color-border-hover);
  }

  .job-card__indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .job-card--running .job-card__indicator {
    background: var(--color-info);
    animation: pulse 1.5s ease-in-out infinite;
  }

  .job-card--pending .job-card__indicator {
    background: var(--color-warning);
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .job-card__content {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
  }

  .job-card__name {
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .job-card__artikelnummer {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
    flex-shrink: 0;
  }

  .job-card__status {
    flex-shrink: 0;
  }

  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: 500;
  }

  .status-badge--running {
    background: var(--color-info-muted);
    color: var(--color-info);
  }

  .status-badge--pending {
    background: var(--color-warning-muted);
    color: var(--color-warning);
  }

  .status-badge__spinner {
    width: 14px;
    height: 14px;
    animation: spin 1s linear infinite;
  }

  .status-badge__icon {
    width: 10px;
    height: 10px;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* ==================== Product Grid ==================== */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
  }

  .product-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
  }

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

  .product-card__image-container {
    aspect-ratio: 4 / 3;
    background: var(--color-bg-secondary);
    overflow: hidden;
  }

  .product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }

  .product-card:hover .product-card__image {
    transform: scale(1.03);
  }

  .product-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
  }

  .product-card__placeholder svg {
    width: 48px;
    height: 48px;
  }

  .product-card__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
  }

  .product-card__name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.3;
  }

  .product-card__artikelnummer {
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    color: var(--color-text-tertiary);
  }

  .product-card__category {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .product-card__actions {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  /* ==================== Buttons ==================== */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    width: 100%;
    font-family: inherit;
  }

  .btn__icon {
    width: 10px;
    height: 10px;
  }

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

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

  .btn--secondary {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
  }

  .btn--secondary:hover:not(:disabled) {
    background: var(--color-bg-active);
  }

  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* ==================== Before/After Cards ==================== */
  .completed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: var(--space-4);
  }

  .before-after-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition);
  }

  .before-after-card:hover {
    border-color: var(--color-border-hover);
  }

  .before-after-card__images {
    display: flex;
    align-items: stretch;
  }

  .before-after-card__before,
  .before-after-card__after {
    flex: 1;
    position: relative;
    aspect-ratio: 1;
    background: var(--color-bg-secondary);
  }

  .before-after-card__before img,
  .before-after-card__after img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .before-after-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
  }

  .before-after-card__placeholder svg {
    width: 32px;
    height: 32px;
  }

  .before-after-card__label {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    font-size: var(--font-size-xs);
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-text-primary);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
  }

  .before-after-card__label--after {
    background: var(--color-success);
    color: #000;
  }

  .before-after-card__arrow {
    width: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
    background: var(--color-bg-secondary);
  }

  .before-after-card__arrow svg {
    width: 20px;
    height: 20px;
  }

  .before-after-card__meta {
    padding: var(--space-3) var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
  }

  .before-after-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .before-after-card__name {
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
  }

  .before-after-card__artikelnummer {
    font-size: var(--font-size-xs);
    font-family: var(--font-mono);
    color: var(--color-text-tertiary);
  }

  .before-after-card__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-success);
    background: var(--color-success-muted);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
  }

  .before-after-card__badge svg {
    width: 14px;
    height: 14px;
  }

  /* ==================== Empty State ==================== */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
  }

  .empty-state__icon {
    width: 48px;
    height: 48px;
    color: var(--color-success);
    margin-bottom: var(--space-4);
  }

  .empty-state__text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
  }

  /* ==================== Responsive ==================== */
  @media (max-width: 640px) {
    .moodshot-dashboard {
      padding: var(--space-4);
    }

    .stats-bar__inner {
      gap: var(--space-4);
    }

    .product-grid {
      grid-template-columns: 1fr;
    }

    .completed-grid {
      grid-template-columns: 1fr;
    }

    .job-card__content {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-1);
    }
  }
}

/* Product Detail - Linear-Quality Design */
@layer components {

  /* ==================== Container ==================== */
  .product-detail {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
  }

  /* ==================== Breadcrumb ==================== */
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-8);
  }

  .breadcrumb__link {
    color: var(--color-text-tertiary);
    text-decoration: none;
    transition: color 150ms ease;
  }

  .breadcrumb__link:hover {
    color: var(--color-text-primary);
  }

  .breadcrumb__separator {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
  }

  .breadcrumb__current {
    color: var(--color-text-secondary);
  }

  /* ==================== Product Navigation ==================== */
  .product-nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .product-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 150ms ease;
  }

  .product-nav__btn:hover:not(.product-nav__btn--disabled) {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
    border-color: rgba(0, 0, 0, 0.12);
  }

  .product-nav__btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .product-nav__btn svg {
    width: 14px;
    height: 14px;
  }

  /* ==================== Product Header ==================== */
  .product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
  }

  .product-header__info {
    flex: 1;
    min-width: 0;
  }

  .product-header__name {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  /* Meta: dot-separated inline items */
  .product-header__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
  }

  .product-header__meta > span:not(:last-child)::after {
    content: "·";
    margin-left: var(--space-2);
    color: var(--color-text-tertiary);
  }

  .product-header__artikelnummer {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
  }

  .product-header__category {
    color: var(--color-text-secondary);
  }

  /* Status: dot + label pattern */
  .product-header__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
  }

  .product-header__status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .product-header__status--has .status-dot {
    background-color: var(--color-success);
  }

  .product-header__status--has {
    color: var(--color-text-secondary);
  }

  .product-header__status--missing .status-dot {
    background-color: var(--color-warning);
  }

  .product-header__status--missing {
    color: var(--color-text-secondary);
  }

  .product-header__actions {
    flex-shrink: 0;
  }

  /* ==================== Moodshot Status Card ==================== */
  .moodshot-status-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
  }

  .moodshot-status-card__indicator {
    flex-shrink: 0;
    padding-top: var(--space-1);
  }

  .moodshot-status-card__content {
    flex: 1;
    min-width: 0;
  }

  .moodshot-status-card__title {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
  }

  .moodshot-status-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.5;
  }

  .moodshot-status-card__description:last-child {
    margin-bottom: 0;
  }

  .moodshot-status-card__actions {
    flex-shrink: 0;
  }

  /* Status dot - using existing .status-dot from header */
  .moodshot-status-card .status-dot--pending {
    background: var(--color-warning);
    animation: pulse 1.5s ease-in-out infinite;
  }

  .moodshot-status-card .status-dot--running {
    background: var(--color-info);
    animation: pulse 1.5s ease-in-out infinite;
  }

  .moodshot-status-card .status-dot--failed {
    background: var(--color-error);
  }

  /* Spinner for running state */
  .moodshot-status-card__spinner {
    flex-shrink: 0;
  }

  .moodshot-status-card__spinner .spinner {
    width: 24px;
    height: 24px;
    color: var(--color-info);
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  /* In-review card with preview */
  .moodshot-status-card--review {
    flex-wrap: wrap;
  }

  .moodshot-status-card__preview {
    position: relative;
    width: 120px;
    height: 90px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
  }

  .moodshot-status-card__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .moodshot-status-card__badge {
    position: absolute;
    bottom: var(--space-1);
    left: var(--space-1);
    font-size: 10px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
  }

  /* Failed card styling */
  .moodshot-status-card--failed {
    border-color: color-mix(in srgb, var(--color-error) 30%, var(--color-border));
    background: color-mix(in srgb, var(--color-error) 5%, var(--color-bg-elevated));
  }

  /* Button sizing */
  .btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
  }

  /* ==================== Section ==================== */
  .dashboard-section {
    margin-bottom: var(--space-10);
  }

  .section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
  }

  /* ==================== Image Grid ==================== */
  .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
  }

  .image-card {
    background: var(--color-bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 150ms ease, transform 150ms ease;
  }

  .image-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }

  .image-card__container {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-secondary);
    overflow: hidden;
  }

  .image-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 200ms ease;
  }

  .image-card:hover .image-card__image {
    transform: scale(1.02);
  }

  /* AI Badge - subtle pill */
  .image-card__ai-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.9);
    padding: 3px 8px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(8px);
  }

  .image-card__ai-badge svg {
    width: 10px;
    height: 10px;
    opacity: 0.8;
  }

  /* Expand button - position bottom-left to avoid AI badge overlap */
  .image-card__container .expand-btn {
    top: auto;
    right: auto;
    bottom: var(--space-2);
    left: var(--space-2);
  }

  .image-card__container:hover .expand-btn {
    opacity: 1;
  }

  /* Meta row */
  .image-card__meta {
    padding: var(--space-3) var(--space-3);
  }

  .image-card__classification {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .image-card__type {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
  }

  /* Subtle color hints for types */
  .image-card__type--ambientebild {
    color: var(--color-accent);
  }

  .image-card__type--sachfoto {
    color: var(--color-text-secondary);
  }

  .image-card__type--closeup {
    color: var(--color-info);
  }

  .image-card__confidence {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
  }

  /* ==================== Empty State ==================== */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-6);
    text-align: center;
  }

  .empty-state__icon {
    width: 40px;
    height: 40px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
    opacity: 0.5;
  }

  .empty-state__text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  /* ==================== Responsive ==================== */
  @media (max-width: 640px) {
    .product-detail {
      padding: var(--space-6) var(--space-4);
    }

    .product-header {
      flex-direction: column;
      gap: var(--space-4);
    }

    .product-header__name {
      font-size: var(--font-size-2xl);
    }

    .product-header__meta {
      flex-wrap: wrap;
    }

    .product-header__actions {
      width: 100%;
    }

    .product-header__actions .btn,
    .product-header__actions button {
      width: 100%;
    }

    .image-grid {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: var(--space-3);
    }

    /* Moodshot status card responsive */
    .moodshot-status-card {
      flex-direction: column;
    }

    .moodshot-status-card__preview {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
    }

    .moodshot-status-card__actions {
      width: 100%;
    }

    .moodshot-status-card__actions .btn {
      width: 100%;
    }
  }
}

/* Subcategory Products Page - Linear-Quality Design */
@layer components {

  /* ==================== Container ==================== */
  .subcategory-products {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
  }

  /* ==================== Breadcrumb ==================== */
  .subcategory-products .breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-6);
  }

  .subcategory-products .breadcrumb__link {
    color: var(--color-text-tertiary);
    text-decoration: none;
    transition: color 150ms ease;
  }

  .subcategory-products .breadcrumb__link:hover {
    color: var(--color-text-primary);
  }

  .subcategory-products .breadcrumb__separator {
    color: var(--color-text-tertiary);
  }

  .subcategory-products .breadcrumb__current {
    color: var(--color-text-secondary);
  }

  /* ==================== Header ==================== */
  .subcategory-products .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
  }

  .subcategory-products .dashboard-header__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
  }

  /* ==================== Filter Toggle (Segmented Control) ==================== */
  /* Linear-style segmented control with subtle depth and smooth transitions */
  .filter-toggle {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: 3px;
    gap: 1px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .filter-toggle__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    text-decoration: none;
    border-radius: 6px;
    transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
  }

  .filter-toggle__option:hover:not(.filter-toggle__option--active) {
    color: var(--color-text-secondary);
  }

  .filter-toggle__option--active {
    color: var(--color-text-primary);
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08),
                0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .filter-toggle__option:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
  }

  .subcategory-products .dashboard-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
  }

  .subcategory-products .dashboard-header__stats {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
  }

  /* Coverage bar in header */
  .coverage-bar--large {
    width: 120px;
    height: 6px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .coverage-bar--large .coverage-bar__fill {
    height: 100%;
    background: var(--color-success);
    border-radius: var(--radius-full);
    transition: width 300ms ease;
  }

  .coverage-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  .coverage-label__percent {
    color: var(--color-text-tertiary);
  }

  /* ==================== Product Card Status Borders ==================== */

  /* Has Moodshot - Green glow */
  .product-card--has-moodshot {
    border-color: var(--color-success);
    box-shadow: 0 0 0 1px var(--color-success),
                0 0 12px -2px rgba(22, 163, 74, 0.4);
  }

  .product-card--has-moodshot:hover {
    border-color: var(--color-success);
    box-shadow: 0 0 0 1px var(--color-success),
                0 0 20px -2px rgba(22, 163, 74, 0.5),
                var(--shadow-md);
  }

  /* Missing Moodshot - Red/warning border */
  .product-card--missing-moodshot {
    border-color: var(--color-error);
    box-shadow: 0 0 0 1px var(--color-error),
                0 0 12px -2px rgba(220, 38, 38, 0.3);
  }

  .product-card--missing-moodshot:hover {
    border-color: var(--color-error);
    box-shadow: 0 0 0 1px var(--color-error),
                0 0 20px -2px rgba(220, 38, 38, 0.4),
                var(--shadow-md);
  }

  /* Status badge refinement - scoped to this page */
  .subcategory-products .product-card__image-container {
    position: relative;
  }

  .subcategory-products .product-card__badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .subcategory-products .product-card__badge svg {
    width: 14px;
    height: 14px;
  }

  .subcategory-products .product-card__badge--has {
    background: var(--color-success);
    color: white;
  }

  .subcategory-products .product-card__badge--missing {
    background: var(--color-error);
    color: white;
  }

  /* ==================== Product Grid ==================== */
  .subcategory-products .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
  }

  /* Link style card */
  .product-card--link {
    text-decoration: none;
    cursor: pointer;
  }

  .product-card--link .product-card__name {
    transition: color 150ms ease;
  }

  .product-card--link:hover .product-card__name {
    color: var(--color-accent);
  }

  /* ==================== Pagination ==================== */
  .subcategory-products .pagination {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .pagination__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 150ms ease;
  }

  .pagination__btn:hover:not(.pagination__btn--disabled) {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
    border-color: rgba(0, 0, 0, 0.12);
  }

  .pagination__btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .pagination__btn svg {
    width: 14px;
    height: 14px;
  }

  /* ==================== Responsive ==================== */
  @media (max-width: 640px) {
    .subcategory-products {
      padding: var(--space-6) var(--space-4);
    }

    .subcategory-products .dashboard-header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
    }

    .subcategory-products .product-grid {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: var(--space-3);
    }
  }
}