/**
 * CSS Layer Order Explained
 *
 * PostCSS requires @import statements to come FIRST (before @tailwind directives).
 * This is a PostCSS limitation, not a Tailwind one.
 *
 * HOWEVER: Tailwind utilities still get the highest priority because:
 * 1. All imported files wrap styles in @layer components
 * 2. @tailwind utilities (below) expands to the utilities layer
 * 3. CSS layers apply in this priority: base < components < utilities
 *
 * So even though @imports come first in SOURCE, the compiled CSS has correct priority:
 *   base → components (@imports) → utilities (highest priority)
 *
 * Reference: https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
 */

/* Import modular component styles with @apply directives */

/* Alerts & Status - Tailwind @apply */

/**
 * Alignment Statistics Modal Styles
 *
 * Comprehensive styling for the alignment statistics modal including:
 * - Overall metrics cards
 * - Classification type tabs
 * - Confusion matrix (grid and blocks views)
 * - Disagreement examples
 * - Responsive design
 */

/* Article Content - Tailwind @apply */

/**
 * Article Item Component Styles - Compact Color Grid Design
 *
 * Minimalist, space-efficient design with color grid visualization.
 * No margins, no rounding - flat design for maximum space efficiency.
 */

/**
 * Article Metadata Panel - Notes and Tags
 *
 * Styling for article-level metadata (notes and tags) in batch review.
 * Follows existing panel patterns from classification-panel.css
 */

/* Article Review Content - Shared Layout - Tailwind @apply */

/* Article Table Component - Tailwind-Standard Pattern */

/* Article Text Processor - Left-Right Aligned Layout */

/* Badges - Tailwind @apply */

/* Batch List View - Theme-Aware */

/* Batch Summary Card - Compact Sidebar Design */

/* Batch Card Compact Component Styles - Tailwind @apply */

/* Binary Toggle Component - Compact switch-style binary input */

/* Buttons - Tailwind @apply */

/* Cards - Tailwind @apply */

/* Classification Badge Strip - Theme-Aware */

/* Classification Panel Component - Shared by article-review and batch-review */

/* Brand Safety Parent Panel - Tailwind @apply */

/**
 * Definition Tooltip Component Styles
 *
 * Displays classification definitions on hover with markdown rendering.
 */

/* Forms - Tailwind @apply */

/* Form Base Styles - Foundation for all forms */

/* Form Field Component Styles */

/* Form Pattern Styles - Composite form components */

/* Keyboard UI - Tailwind @apply */

/* Keyboard Hotkey Section - Dynamic keyboard shortcuts display */

/* Loading States - Tailwind @apply */

/* Metadata Badge Component - Minimal Tailwind-based styling */

/* Compact Metadata Display - Tailwind @apply */

/* Modals - Tailwind @apply */

/* Progress - Tailwind @apply */

/* Toasts - Tailwind @apply */

/* Tri-Source Badge - Parallelogram Bars - Theme-Aware */

/* User Identity Display - Tailwind @apply */

/* Import layout styles with @apply directives */

/* App Shell Layout - Component Styling Only */

/* Import feature styles with @apply directives */

/* Article Detail Panel - Tailwind @apply */

/* Article Review Feature - Tailwind @apply */

/* NOTE: Article table and classification panel components extracted to:
 * - components/article-table.css (lines 1-462 removed)
 * - components/classification-panel.css (lines 946-1059 removed)
 */

/* Batch Review Feature - Tailwind @apply */

/* Batches Page Layout - Theme-Aware */

/* Debug Panel - Tailwind @apply */

/* Error Analysis Feature - Tailwind @apply */

/* Model Comparison Feature - Tailwind @apply */

/* Pipeline Feature - Tailwind @apply */

/* Review Queues Page - Theme-Aware */

/* Retrain Feature - Tailwind @apply */

/* Tailwind directives - expand after imports are processed */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: var(--color-gray-200); /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: var(--color-gray-400); /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: var(--color-gray-400); /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.alert {
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 1rem;
}

.alert-success {
  border-color: var(--color-success);
  background-color: var(--color-success-light);
    color: var(--color-success-dark);
}

/* Modal Container */

.alignment-modal-dialog {
  position: relative;
  max-height: 85vh;
  width: 80vw;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;
  border-width: 1px;
    background: var(--color-background);
    border-color: var(--color-border);
    box-shadow: 0 0 40px var(--color-background-overlay);
}

/* Overall Statistics */

.overall-stats {
  margin-bottom: 1rem;
}

.overall-stats h3 {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

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

@media (min-width: 1024px) {
    .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  }

.alignment-stat-card {
  border-radius: 0.75rem;
  border-width: 2px;
  padding: 0.75rem;
    background: var(--color-gray-50);
    border-color: var(--color-gray-200);
    text-align: center;
}

.alignment-stat-card.stat-good {
    background: var(--color-success-50);
    border-color: var(--color-success);
  }

.alignment-stat-card.stat-warning {
    background: var(--color-warning-50);
    border-color: var(--color-warning);
  }

.alignment-stat-card.stat-danger {
    background: var(--color-danger-50);
    border-color: var(--color-danger);
  }

.stat-label {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-gray-600);
}

.stat-value {
  margin-bottom: 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gray-900);
}

.stat-sublabel {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

/* All Categories Summary Table */

.all-categories-summary {
  margin-bottom: 1.5rem;
}

.all-categories-summary h3 {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.categories-summary-table {
  overflow-x: auto;
}

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

.categories-summary-table thead {
    background: var(--color-gray-100);
  }

.categories-summary-table th {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-700);
    border-bottom: 2px solid var(--color-gray-300);
}

.categories-summary-table td {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.categories-summary-table tbody tr {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: var(--color-background);
}

.categories-summary-table tbody tr:hover {
    background: var(--color-gray-50);
  }

.categories-summary-table tbody tr.active-row {
    background: var(--color-primary-50);
    border-left: 3px solid var(--color-primary);
  }

.categories-summary-table .category-name {
  font-weight: 500;
  color: var(--color-gray-900);
}

.categories-summary-table .agreement-value {
  font-weight: 600;
}

.categories-summary-table .agreement-value.stat-good {
    color: var(--color-success);
  }

.categories-summary-table .agreement-value.stat-warning {
    color: var(--color-warning);
  }

.categories-summary-table .agreement-value.stat-danger {
    color: var(--color-danger);
  }

/* Comparison Selector */

.comparison-selector {
  margin-bottom: 1rem;
  display: flex;
  gap: 0.5rem;
}

.comparison-btn {
  border-radius: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
    border: 2px solid var(--color-gray-200);
    background: var(--color-background);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    cursor: pointer;
}

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

.comparison-btn.active {
    border-color: var(--color-primary);
    background: var(--color-primary-100);
    font-weight: 600;
  }

/* Classification Tabs */

.classification-tabs-section {
  margin-bottom: 1rem;
}

.classification-tabs-section h3 {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.classification-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.classification-tab {
  border-radius: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: left;
    border: 2px solid var(--color-gray-200);
    background: var(--color-background);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    cursor: pointer;
}

.classification-tab:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-100);
  }

.classification-tab.active {
    border-color: var(--color-primary);
    background: var(--color-primary-100);
  }

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

.classification-tab:disabled:hover {
    border-color: var(--color-gray-200);
    background: var(--color-background);
  }

.tab-name {
  margin-bottom: 0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-gray-900);
}

.tab-stats {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-gray-600);
}

.tab-reviewed {
  color: var(--color-gray-600);
}

.tab-agreement {
  font-weight: 600;
  color: var(--color-primary);
}

/* Classification Content */

.classification-content {
  border-top-width: 1px;
  padding-top: 1rem;
    border-color: var(--color-gray-200);
}

.classification-content h4 {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
}

.classification-content h5 {
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.no-data {
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  color: var(--color-gray-500);
}

/* Alignment Summary */

.alignment-summary {
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  border-radius: 0.75rem;
  padding: 0.75rem;
    background: var(--color-gray-50);
}

.summary-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.summary-label {
  font-size: 0.8125rem;
  color: var(--color-gray-600);
}

.summary-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

/* Matrix Section */

.matrix-section {
  margin-bottom: 1rem;
}

.form-actions.matrix-header {
    justify-content: space-between;
  }

.matrix-header {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Confusion Matrix - Grid View */

.form-actions.matrix-header {
    justify-content: center;
  }

.matrix-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  width: 5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-700);
}

.matrix-cell.tp {
    background: var(--color-success-100);
    border-color: var(--color-success);
  }

.matrix-cell.tn {
    background: var(--color-primary-100);
    border-color: var(--color-primary);
  }

.matrix-cell.fp {
    background: var(--color-warning-100);
    border-color: var(--color-warning);
  }

.matrix-cell.fn {
    background: var(--color-danger-100);
    border-color: var(--color-danger);
  }

/* Confusion Matrix - Compact Blocks View */

.confusion-matrix-blocks {
  margin-bottom: 1.5rem;
}

.block-row-compact {
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.75rem;
}

.matrix-block-compact {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.75rem;
  border-width: 2px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.matrix-block-compact:hover {
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.matrix-block-compact.tp {
    background: var(--color-success-50);
    border-color: var(--color-success);
  }

.matrix-block-compact.tn {
    background: var(--color-primary-50);
    border-color: var(--color-primary);
  }

.matrix-block-compact.fp {
    background: var(--color-warning-50);
    border-color: var(--color-warning);
  }

.matrix-block-compact.fn {
    background: var(--color-danger-50);
    border-color: var(--color-danger);
  }

.block-label-compact {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gray-700);
}

.block-value-compact {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-gray-900);
}

.block-pct-compact {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-700);
}

.block-desc-compact {
  font-size: 0.75rem;
  color: var(--color-gray-600);
}

/* Disagreements Section */

.disagreements-section {
  margin-top: 1rem;
}

.disagreements-list > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.disagreement-item {
  border-radius: 0.75rem;
  padding: 0.75rem;
    background: var(--color-danger-50);
    border: 2px solid var(--color-danger-100);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.disagreement-item:hover {
    background: var(--color-danger-100);
  }

.form-actions.disagreement-header {
    justify-content: space-between;
  }

.disagreement-header {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.alignment-article-id {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

.confidence-badge {
  border-radius: 0.375rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
    background: var(--color-danger-100);
    color: var(--color-danger-700);
}

.disagreement-predictions {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.prediction {
  font-size: 0.8125rem;
  color: var(--color-gray-700);
}

.prediction strong {
  font-weight: 700;
}

.prediction-arrow {
  color: var(--color-gray-400);
}

.alignment-reviewer-name {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.article-title-preview {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-view-article {
  border-radius: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.btn-view-article:hover {
    background: var(--color-primary-dark);
  }

.no-disagreements {
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  color: var(--color-gray-500);
}

/* Batch Stats Button (in batch card) */

/* Responsive adjustments */

@media (max-width: 768px) {
    .stat-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

    .classification-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

    .alignment-summary {
    flex-direction: column;
    gap: 0.75rem;
  }

    .matrix-grid {
    --tw-scale-x: .9;
    --tw-scale-y: .9;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

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

/* ===== ARTICLE LAYER CONTAINER ===== */

/* Distinct container that signals "external content" */

/* ===== PROFANITY HIGHLIGHTING ===== */

/* Profanity word highlighting - subtle red text with gentle highlight */

.profanity-highlight {
  border-radius: 0.375rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
    color: var(--color-danger);
    background-color: var(--color-danger-50);
    font-weight: normal;
    border: none;
    box-shadow: none;
}

/* Alternative subtle highlighting */

.profanity-highlight.subtle {
  border-width: 1px;
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
    border-color: var(--color-warning);
    box-shadow: 0 1px 2px rgba(133, 100, 4, 0.1);
}

/* Profanity indicator badge */

.profanity-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 1rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background-color: var(--color-danger);
}

.profanity-indicator.count {
    background-color: var(--color-text-secondary);
  }

/* Compact profanity indicators */

.profanity-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Profanity indicator badge for compact displays */

/* ===== ARTICLE CONTENT DISPLAY ===== */

/* Article URL Display - Non-clickable, non-selectable for security */

/* Content header with profanity indicators */

.content-header .profanity-indicator {
  margin-left: 0;
}

/* Main article content display container */

/* Content text styling - Article Layer */

/* Subtle texture for article content */

/* Scrollbar styling moved to parent .review-content-column (see article-review-content.css) */

/* No content placeholder */

/* Article preview component */

/* Modal-specific content styling */

.article-review-modal .content-text,
  .article-content-modal .content-text {
  max-height: 18rem;
  font-size: 0.8125rem;
}

.article-content-modal .profanity-indicators {
  margin-bottom: 0.5rem;
}

/* ===== FORMATTED ARTICLE STYLES (News Article) ===== */

/* Enable formatted mode with .article-formatted class on content-text */

/* Article headings */

.article-heading {
  margin-bottom: 1rem;
  margin-top: 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
    font-family: var(--font-family-sans);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.5rem;
}

/* First heading has no top margin */

.article-heading:first-child {
  margin-top: 0;
}

/* Article paragraphs */

.article-paragraph {
  margin-bottom: 1.25rem;
    text-align: left;
    text-indent: 0;
    color: var(--color-article-text);
}

/* First paragraph gets drop cap treatment */

.article-paragraph:first-of-type::first-letter {
  float: left;
  margin-right: 0.5rem;
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1;
    font-family: Georgia, serif;
    color: var(--color-primary);
    margin-top: 0.1em;
}

/* Article lists */

.article-list {
  margin-bottom: 1.25rem;
  padding-left: 0.5rem;
}

.article-list.ordered {
    list-style-type: decimal;
  }

.article-list:not(.ordered) {
    list-style-type: disc;
  }

.article-list-item {
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
    color: var(--color-article-text);
}

/* ===== QUOTE DETECTION (for misinformation review) ===== */

/* Philosophy: Direct quotes are usually from credible sources */

/* The NARRATIVE around quotes is more likely to contain disinformation */

/* Therefore: DE-EMPHASIZE quotes, keep narrative prominent */

/* Block quotes - standalone quoted sections (de-emphasized) */

.article-quote {
  position: relative;
  margin-bottom: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1rem;
  font-style: italic;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-left-width: 2px;
  opacity: 0.6;
    background-color: var(--color-gray-50);
    border-left-color: var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.95em;
    line-height: 1.6;
    transition: opacity 0.2s ease;
}

/* Quote icon indicator (subtle) */

.article-quote::before {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  font-size: 2.25rem;
  line-height: 1;
  opacity: 0.1;
    content: '\201C'; /* Opening quote mark */
    font-family: Georgia, serif;
    color: var(--color-text-muted);
}

/* Show full opacity on hover for readability */

.article-quote:hover {
  opacity: 0.9;
}

/* Inline quotes - quoted text within paragraphs (subtle, de-emphasized) */

.article-quote-inline {
  font-style: italic;
  opacity: 0.7;
    color: var(--color-text-secondary);
    font-size: 0.97em;
    transition: opacity 0.2s ease;
}

/* Hover effect for inline quotes (slight increase in visibility) */

.article-quote-inline:hover {
  opacity: 0.9;
}

/* ===== METADATA / BOILERPLATE DETECTION ===== */

/* Metadata/boilerplate content (ads, headers, footers) */

.article-metadata {
  margin-bottom: 0.75rem;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-style: italic;
  border-left-width: 2px;
  opacity: 0.5;
    background-color: var(--color-gray-50);
    border-left-color: var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.9em;
    transition: opacity 0.2s ease;
}

/* Show full opacity on hover for accessibility */

.article-metadata:hover {
  opacity: 0.8;
}

/* Profanity highlights in formatted mode - subtle and relaxed */

.content-text.article-formatted .profanity-highlight {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
    background-color: var(--color-danger-50);
    color: var(--color-danger);
    border: none;
    border-radius: 2px;
    font-weight: normal;
    box-shadow: none;
}

/* Responsive adjustments */

@media (max-width: 768px) {
    .content-text.article-formatted {
    padding: 1rem;
      font-size: 1rem;
  }

    .article-heading {
    font-size: 1.125rem;
  }

    .article-paragraph:first-of-type::first-letter {
    font-size: 3rem;
    line-height: 1;
  }
  }

/* Article list container - fills available space */

.article-list {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow-y: auto;
}

/* Article item container - compact, flat design */

.article-item {
  position: relative;
  margin: 0.25rem;
  display: flex;
  min-height: 80px;
  cursor: pointer;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.article-item:hover {
    background: var(--color-surface-hover);
  }

.article-item-selected {
  position: relative;
    background: var(--color-primary-100);
}

/* Vertical line indicator with glow for selected item */

.article-item-selected::before {
    content: '';
    position: absolute;
    width: 4px;
    left: -12px; /* Further left for more visibility */
    top: 5%;
    bottom: 5%;
    background: var(--color-primary);
    box-shadow: 
      0 0 24px var(--color-primary),
      0 0 16px var(--color-primary),
      0 0 12px rgba(59, 130, 246, 0.8),
      0 0 8px rgba(59, 130, 246, 0.6),
      0 0 4px rgba(59, 130, 246, 0.4),
      inset 0 0 6px rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    opacity: 1;
    filter: brightness(1.2);
  }

/* Checkmark badge for completed reviews */

.review-complete-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  z-index: 10;
  height: 18px;
  width: 18px;
}

.form-actions.review-complete-badge {
    justify-content: center;
  }

.review-complete-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background: var(--color-success);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.article-item-selected:hover {
    background: var(--color-primary-100);
  }

/* Fully labeled articles - distinct grey background */

.article-item.reviewed {
    background: var(--color-gray-100);
  }

.article-item.reviewed:hover {
    background: var(--color-gray-200);
  }

/* Selected and reviewed */

.article-item-selected.reviewed {
    background: var(--color-gray-200);
  }

/* Highlight animation for recently updated articles */

.article-item-highlighted {
    animation: article-highlight 2s ease-out;
  }

@keyframes article-highlight {
    0% {
      background: rgba(59, 130, 246, 0.3);
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
      background: rgba(59, 130, 246, 0.2);
      box-shadow: 0 0 12px 4px rgba(59, 130, 246, 0.3);
    }
    100% {
      background: var(--color-surface);
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
  }

/* Highlighted and reviewed */

.article-item-highlighted.reviewed {
    animation: article-highlight-reviewed 2s ease-out;
  }

@keyframes article-highlight-reviewed {
    0% {
      background: rgba(34, 197, 94, 0.3);
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
      background: rgba(34, 197, 94, 0.2);
      box-shadow: 0 0 12px 4px rgba(34, 197, 94, 0.3);
    }
    100% {
      background: var(--color-gray-100);
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
  }

/* Highlighted and selected */

.article-item-highlighted.article-item-selected {
    animation: article-highlight-selected 2s ease-out;
  }

@keyframes article-highlight-selected {
    0% {
      background: rgba(59, 130, 246, 0.4);
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    50% {
      background: rgba(59, 130, 246, 0.3);
      box-shadow: 0 0 16px 6px rgba(59, 130, 246, 0.4);
    }
    100% {
      background: rgba(59, 130, 246, 0.1);
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
  }

/* Article content area - compact padding */

.article-content {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
}

/* URL display - compact, word-breaks for long URLs */

.article-url {
  max-width: 100%;
  font-size: 0.75rem;
    color: var(--color-text-secondary);
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* Article ID - compact monospace */

.article-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* Publication date - compact with emoji icon */

.article-pub-date {
  font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* Classification grid - triple row (human, model, ai) */

.article-classification-grid {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.classification-row {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

/* Row label (Human/Model indicators) */

.row-label {
  margin-right: 0.25rem;
  width: 45px;
  flex-shrink: 0;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
    color: var(--color-text-secondary);
}

/* Color coding for row labels - GREEN for Human (verified), GRAY for Model */

.classification-row[data-source="human"] .row-label {
    color: var(--color-source-human);
  }

.classification-row[data-source="model"] .row-label {
    color: var(--color-source-model);
  }

.classification-row[data-source="ai"] .row-label {
      color: var(--color-source-ai);
  }

/* Model row is always visible (original model predictions from batch creation) */

.classification-row[data-source="model"] {
  display: flex;
}

/* AI row is always visible */

.classification-row[data-source="ai"] {
  display: flex;
}

.classification-square {
  height: 14px;
  width: 14px;
  flex-shrink: 0;
}

/* Dynamic color classes for classification squares */

.classification-square[data-classification-color="success"] {
    background-color: var(--color-success);
  }

.classification-square[data-classification-color="danger"] {
    background-color: var(--color-danger);
  }

.classification-square[data-classification-color="warning"] {
    background-color: var(--color-warning);
  }

.classification-square[data-classification-color="gray"] {
    background-color: var(--color-gray-500);
  }

.classification-square[data-classification-color="unlabeled"] {
    background-color: var(--color-gray-300);
  }

/* Responsive adjustments */

@media (max-width: 768px) {
    .article-content {
    gap: 0.125rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    padding-right: 0.375rem;
  }

    .classification-square {
    height: 0.75rem;
    width: 0.75rem;
  }
  }

/* Main container */

.article-metadata-panel {
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  border-width: 1px;
    background: var(--color-surface);
    border-color: var(--color-border);
}

/* Section container (notes or tags) */

.metadata-section {
  border-bottom-width: 1px;
}

.metadata-section:last-child {
  border-bottom-width: 0px;
}

.metadata-section {
    border-color: var(--color-border);
  }

/* Collapsible section header */

.form-actions.metadata-section-header {
    justify-content: space-between;
  }

.metadata-section-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.metadata-section-header:hover {
  background-color: var(--color-surface-hover);
}

.metadata-section-header {
    background: transparent;
    border: none;
    color: var(--color-text-primary);
  }

.metadata-section-header:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.metadata-section-title {
  color: var(--color-text-primary);
}

.metadata-section-toggle {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

/* Section body (expanded content) */

.metadata-section-body > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.metadata-section-body {
  padding: 0.75rem;
  padding-top: 0;
}

/* Notes textarea */

.article-note-textarea {
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 0.5rem;
  font-size: 0.8125rem;
}

.article-note-textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-primary);
}

.article-note-textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    min-height: 120px;
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
    resize: vertical;
}

.article-note-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Tag input */

.tag-input {
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 0.5rem;
  font-size: 0.8125rem;
}

.tag-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: var(--color-primary);
}

.tag-input {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
  }

.tag-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Inline tags display */

.metadata-tags-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
}

/* Tag badge */

.tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-200);
}

/* Tag remove button */

.tag-remove {
  margin-left: 0.25rem;
  cursor: pointer;
  font-weight: 700;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.tag-remove:hover {
  opacity: 0.8;
}

.tag-remove {
    background: transparent;
    border: none;
    color: var(--color-primary-600);
    padding: 0;
    font-size: 16px;
    line-height: 1;
  }

.tag-remove:hover {
    color: var(--color-primary-800);
  }

.tag-remove:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

/**
   * Two-column layout for article review content
   * Used by both ArticleDetailPanel and BatchReview
   */

.review-content-layout {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {

  .review-content-layout {
    flex-direction: row;
  }
}

/* Left column: Article content */

.review-content-column {
  min-height: 0;
  min-width: 0;
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 0;
}

/* Right column: Classification panels - Flush to right edge, no right gutter */

.review-labels-column {
  min-height: 0;
  width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: visible;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 0;
}

/* Responsive adjustments */

@media (max-width: 1024px) {
    .review-labels-column {
    width: 100%;
  }
  }

@media (max-width: 768px) {
    .review-content-layout {
    flex-direction: column;
    gap: 1rem;
  }

    .review-content-column {
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

    .review-labels-column {
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0;
  }
  }

/* ===== ARTICLE TABLE COMPONENT ===== */

/* Container - Standard Tailwind overflow + rounded corners */

/* Table - Auto layout with consistent typography */

/* Header - Standard Tailwind uppercase + background */

/* Table cells - Standard padding, no borders */

/* Theme-aware striped rows */

/* Hover state - theme-aware */

/* Clickable row cursor */

/* Standard hover enhancement for clickable rows */

/* Selected/active row - clean visual distinction */

.article-table-row.selected,
  .article-table-row.active {
  border-left-width: 4px;
    border-left-color: var(--color-primary);
    background-color: var(--color-primary-100);
}

.article-table-row.selected:hover,
  .article-table-row.active:hover {
    background-color: var(--color-primary-200);
  }

/* Keyboard focus state */

/* Highlight variants with standard Tailwind colors */

/* Row coloring based on label agreement */

/* Column width management - using standard Tailwind width utilities */

/* Action buttons - standard Tailwind button pattern */

/* Status badges - standard Tailwind badge pattern */

.table-status-badge.reviewed {
    background-color: var(--color-success-100);
    color: var(--color-success);
  }

.table-status-badge.unreviewed {
    background-color: var(--color-gray-200);
    color: var(--color-text-secondary);
  }

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

/* Agreement indicator - clean Tailwind pattern */

.agreement-indicator.agree {
    background-color: var(--color-success-50);
    color: var(--color-success);
  }

.agreement-indicator.unknown {
    background-color: var(--color-gray-200);
    color: var(--color-text-secondary);
  }

/* Article title and link styling */

.article-url {
  margin-top: 0.25rem;
  word-break: break-all;
  font-size: 0.75rem;
    color: var(--color-text-muted);
}

.article-url a {
  font-weight: 500;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    color: var(--color-primary);
}

.article-url a:hover {
  text-decoration-line: underline;
    color: var(--color-primary-dark);
}

/* General link styling in tables */

/* ===== COMPACT LABEL COMPONENT ===== */

.label-text.safe {
    background-color: var(--color-success-100);
    color: var(--color-success-dark);
  }

.label-text.nsfw {
    background-color: var(--color-danger-100);
    color: var(--color-danger-dark);
  }

.label-conf.high {
    color: var(--color-success-700);
  }

.label-conf.low {
    color: var(--color-danger-700);
  }

/* Reviewer info */

/* Article title */

/* Article preview */

/* Loading and empty states */

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

/* ===== CONTAINER ===== */

.article-text-container {
  display: flex;
  flex-direction: column;
    width: 100%;
    gap: 1.5rem; /* Space between paragraphs */
}

/* ===== TEXT SEGMENTS ===== */

/* Base segment styling */

.text-segment {
  border-radius: 0.375rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
    line-height: 1.55; /* Compressed line spacing */
    max-width: 90%; /* Wider segments */
    min-width: 60%;
    transition: all 0.2s ease;
    white-space: pre-wrap;
}

/* Narrative segments - left aligned container */

.text-segment-narrative {
  align-self: flex-start;
  text-align: left;
    background-color: transparent;
    color: var(--color-article-text);
    font-size: 1.0625rem;
    text-indent: 2.5rem; /* Essay-style paragraph indent */
}

/* Quote segments - right aligned container, left-aligned text inside */

.text-segment-quote {
  align-self: flex-end;
  text-align: left;
  font-style: italic;
    background-color: var(--color-gray-50);
    color: var(--color-text-secondary);
    opacity: 0.7;
    font-size: 1rem;
    border-left: 2px solid var(--color-border);
    padding-left: 1.5rem;
    text-indent: 2.5rem; /* Essay-style indent for quotes too */
}

/* Quote visual indicator */

.text-segment-quote::before {
  margin-right: 0.5rem;
  display: inline-block;
  opacity: 0.3;
    content: '\201C'; /* Opening quote mark */
    font-family: Georgia, serif;
    font-size: 1.5em;
    vertical-align: top;
    line-height: 1;
}

/* Quote hover - increase visibility for accessibility */

.text-segment-quote:hover {
  opacity: 0.9;
    background-color: var(--color-gray-100);
}

/* ===== KEYWORD HIGHLIGHTING ===== */

/* Global keywords (always run) */

.keyword-highlight.keyword-global {
  border-radius: 0.375rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-weight: 500;
    background-color: var(--color-warning-100);
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-warning-300);
}

/* User-provided keywords */

.keyword-highlight.keyword-user {
  border-radius: 0.375rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-weight: 500;
    background-color: var(--color-primary-200);
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-primary-300);
}

/* Keywords inside quotes blend with quote styling */

.text-segment-quote .keyword-highlight {
  opacity: 0.8;
    font-style: italic; /* Inherit quote styling */
}

/* ===== METADATA SEGMENTS ===== */

.article-metadata {
  margin-bottom: 0.75rem;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-style: italic;
  opacity: 0.5;
  border-left-width: 2px;
    background-color: var(--color-gray-50);
    border-left-color: var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.9em;
    transition: opacity 0.2s ease;
}

.article-metadata:hover {
  opacity: 0.8;
}

/* ===== PROFANITY HIGHLIGHTING ===== */

/* Profanity highlight - subtle red text with gentle highlight */

.profanity-highlight {
  border-radius: 0.375rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
    color: var(--color-danger);
    background-color: var(--color-danger-50);
    font-weight: normal;
    border: none;
    box-shadow: none;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
    .text-segment {
      max-width: 85%; /* Wider on mobile */
    }

    .text-segment-narrative,
    .text-segment-quote {
      font-size: 1rem; /* Slightly smaller on mobile */
    }
  }

@media (max-width: 480px) {
    .text-segment {
      max-width: 95%; /* Even wider on small screens */
    }

    .article-text-container {
    gap: 0.75rem; /* Tighter spacing */
  }
  }

/* ===== PRINT STYLES ===== */

@media print {
    .text-segment-quote {
      opacity: 1; /* Full opacity for print */
      background-color: transparent;
    }

    .keyword-highlight {
      background-color: transparent;
      border-bottom-style: dotted;
    }

  .binary-toggle-notes .notes-content.article-metadata {
    display: none;
    margin: 0;
    padding: 0;
  }
  .notes-section .notes-content.article-metadata {
    margin: 0;
    border-width: 0px;
    padding: 0;
  }
  .notes-section:has(.notes-content.article-metadata) {
    margin: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
  }

  .user-identity-form .form-group.article-metadata {
    display: none;
  }

  .debug-fab.article-metadata {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
  }

    .article-metadata {
    display: none; /* Hide metadata in print */
  }
  }

/* Sentence divider styling (V2 lens) */

.sentence-divider {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  display: inline-block;
  font-weight: 700;
    color: var(--color-primary);
    opacity: 0.4;
    cursor: default;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.sentence-divider:hover {
    opacity: 0.8;
  }

.badge {
  display: inline;
  white-space: nowrap;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
    font-size: 0.6rem;
    padding: 0.05rem 0.25rem;
    border-radius: 2px;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

/* Confidence Indicators */

/* Legacy confidence fill */

/* Status Badges */

.batch-status.pending {
  background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.batch-status.reviewing {
  background-color: var(--color-info-light);
    color: var(--color-info-dark);
}

.batch-status.completed {
  background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* Metadata badge type variants (for MetadataBadge component) */

/* Stats badges container - compact inline badges (same size as article detail) */

/* URL badge - special styling for long URLs */

/* Main Container */

.batch-list-view {
  display: flex;
  flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Controls Section (Search + Filters) - Sticky */

/* Debug Button */

.debug-btn {
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: var(--color-surface);
    border-color: var(--color-border);
    font-size: 16px;
}

.debug-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.05);
  }

/* Sort Controls */

/* Filter Chips */

/* My Batches Toggle Button */

.my-batches-toggle.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
  }

.my-batches-toggle.active:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
  }

/* List Container - Direct viewport constraint */

.batch-list-container {
  overflow-y: auto;
  padding-right: 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
    /* Header: 60px, Tabs: 48px, Controls: ~80px, Padding: ~40px */
    max-height: calc(100vh - 230px);
}

/* Custom scrollbar */

.batch-list-container::-webkit-scrollbar {
  width: 0.5rem;
}

.batch-list-container::-webkit-scrollbar-track {
    background: var(--color-surface);
    border-radius: 0.375rem;
  }

.batch-list-container::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 0.375rem;
  }

.batch-list-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
  }

/* Loading State */

@keyframes pulse {

  50% {
    opacity: .5;
  }
}

.batch-list-loading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
    color: var(--color-text-muted);
}

/* Empty State */

/* Error State */

.batch-list-error {
  margin-left: 1rem;
  margin-right: 1rem;
  border-radius: 0.375rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  border-width: 1px;
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Card Container */

.batch-summary-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    margin-bottom: 0.5rem;
    border-radius: 0.375rem;
    padding: 0.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    cursor: pointer;
  }

.batch-summary-card:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-hover);
  }

.batch-summary-card-selected {
    border: 2px solid var(--color-primary);
    background: var(--color-surface-hover);
  }

/* Compact Header - Batch ID + Assign Button + Assigned User */

.form-actions.batch-summary-header-compact {
    justify-content: space-between;
  }

.batch-summary-header-compact {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.batch-summary-id-compact {
  font-size: 0.8125rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

.batch-summary-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Metadata Row - Article count, date, pub dates */

.batch-summary-meta-compact {
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.batch-summary-articles-compact {
  font-weight: 500;
}

.batch-summary-date-compact {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.batch-summary-separator {
    color: var(--color-text-muted);
  }

/* Progress Bar */

.batch-summary-progress {
  margin-bottom: 0.5rem;
}

.batch-summary-progress-text {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
    color: var(--color-text-secondary);
}

.batch-summary-progress-bar {
  height: 0.375rem;
  width: 100%;
  border-radius: 9999px;
    background: var(--color-background-subtle);
}

.batch-summary-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
    background: linear-gradient(90deg, var(--color-success) 0%, var(--color-primary) 100%);
}

/* Compact Badge Strip - Single line */

.batch-summary-badges-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
    min-height: 0;
    width: 100%;
    min-width: 0; /* Allow flex item to shrink below content size */
}

/* Ensure child wrapper takes full width */

.batch-summary-badges-compact > * {
    width: 100%;
    min-width: 0;
  }

.batch-summary-badges-compact:empty {
    display: none;
  }

/* ===== COMPACT HEADER (Single Line) ===== */

.form-actions.batch-card-compact-header {
    justify-content: space-between;
  }

.batch-card-compact-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: 0.375rem;
    border-bottom-width: 1px;
    background: var(--color-background-subtle);
    border-color: var(--color-border-light);
}

.batch-header-metadata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
    gap: 8px;
    font-size: 0.75rem;
}

.batch-meta-item {
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

.batch-meta-item.batch-meta-primary {
  font-weight: 600;
    color: var(--color-text-primary);
}

.batch-meta-sep {
    color: var(--color-text-tertiary);
  }

/* Mini Progress Bar (inline) */

.batch-progress-mini {
  display: inline-block;
  border-radius: 9999px;
    width: 60px;
    height: 8px;
    background: var(--color-background);
    overflow: hidden;
    vertical-align: middle;
}

.batch-progress-mini-fill {
  height: 100%;
  border-radius: 9999px;
    background: linear-gradient(90deg, var(--color-success) 0%, var(--color-primary) 100%);
    transition: width 0.3s ease;
}

/* Badges */

.batch-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
    white-space: nowrap;
}

.batch-badge-current {
    background: var(--color-success-light);
    color: var(--color-success-dark);
  }

.batch-badge-users {
    background: var(--color-info-light);
    color: var(--color-info-dark);
  }

.batch-badge-alignment {
    background: var(--color-background);
    color: var(--color-text-secondary);
    border-width: 1px;
    border-color: var(--color-border);
  }

/* Header Actions */

.batch-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
    gap: 6px;
}

/* ===== COVERAGE GRID CONTAINER ===== */

.coverage-grid-main {
  display: flex;
  flex-direction: column;
    gap: 16px;
}

/* ===== ARTICLE INFO DISPLAY (Selected Article Bar) ===== */

.form-actions.article-info-display-header {
    justify-content: space-between;
  }

.article-info-display-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
    padding: 10px 14px;
    margin-bottom: 4px;
    background-color: var(--color-background-secondary);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.article-info-text-content {
  display: flex;
  align-items: center;
    gap: 8px;
}

.article-info-id-text {
  font-weight: 600;
    color: var(--color-text-primary, #111827);
}

.article-info-separator-text {
    color: var(--color-text-tertiary, #9ca3af);
  }

.article-info-url-text {
    color: var(--color-text-secondary, #6b7280);
    font-style: italic;
  }

.article-review-btn-inline {
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--color-primary, #3b82f6);
    cursor: pointer;
    border-radius: 0.375rem;
    border-style: none;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

.article-review-btn-inline:hover {
    background-color: var(--color-primary-dark);
  }

/* ===== CLASSIFICATION GROUP (Category Container) ===== */

.category-grid-row-container {
  display: flex;
    margin-bottom: 8px;
    border-radius: 0.375rem;
    border-width: 1px;
    padding: 0;
    overflow: hidden;
}

.category-grid-row-container[data-is-child="true"] {
    margin-left: 24px;
  }

/* Vertical Tab - Rotated text on left edge */

.form-actions.classification-vertical-tab {
    justify-content: center;
  }

.classification-vertical-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 12px 8px;
    min-width: 32px;
    max-height: 180px; /* Limit vertical height */
    border-right-width: 3px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-right-color: currentColor;
    overflow: hidden;
}

.classification-vertical-tab-text {
    transform: rotate(180deg);
    text-align: center;
    white-space: pre-line; /* Preserve line breaks from \n */
    line-height: 1.4;
  }

/* Content Area - Takes remaining space */

.classification-content-area {
  flex: 1 1 0%;
    padding: 8px;
}

/* ===== SOURCE ROW (Model/Human/AI Section) ===== */

.source-section-container {
  display: flex;
  flex-direction: column;
    gap: 8px;
    padding: 8px 0;
    width: 100%;
    box-sizing: border-box;
}

/* Source Header - inline label + metadata */

.source-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Source Label (e.g., "Model Results", "Human Review") */

.source-section-label {
  font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Metadata Display - inline with label */

.source-metadata-display {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.source-metadata-display.loading {
  opacity: 0.5;
}

.source-metadata-display.empty {
  font-style: italic;
    color: var(--color-text-muted);
}

.metadata-separator {
    color: var(--color-text-tertiary);
  }

/* Grid Container (holds ArticleGrid component) */

.source-grid-container {
  flex: 1 1 0%;
    min-width: 0;
    overflow: visible;
    display: flex;
    align-items: center;
}

.source-grid-empty {
  display: flex;
  align-items: center;
    padding: 8px 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Spacing between source sections */

.source-section-container + .source-section-container {
    margin-top: 12px;
    padding-top: 12px;
    border-top-width: 1px;
    border-color: var(--color-border-light);
  }

/* ===== METADATA FORMATTING HELPERS ===== */

.metadata-label {
  font-weight: 500;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.metadata-value {
  font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.75rem;
}

.metadata-value-classification {
  font-weight: 700;
}

.metadata-confidence-high {
    color: var(--color-success-700);
    font-weight: 700;
  }

.metadata-confidence-medium {
    color: var(--color-warning-dark);
    font-weight: 700;
  }

.metadata-confidence-low {
    color: var(--color-danger-dark);
    font-weight: 700;
  }

/* ===== LEGACY COMPATIBILITY ===== */

/* Keep old classes temporarily for backwards compatibility during migration */

/* ===== BINARY TOGGLE CONTAINER ===== */

.binary-toggle {
  border-width: 1px;
    background: var(--color-surface);
    border-color: var(--color-border);
    padding: 0.5rem;
}

.binary-toggle-header {
  margin-bottom: 0.5rem;
}

.binary-toggle-label {
  font-size: 0.8125rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

/* ===== PILL TOGGLE SENTENCE STYLE ===== */

.binary-toggle-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
}

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

/* Legacy pill-toggle styles - kept for backwards compatibility */

.pill-toggle.active[data-value="true"] {
    background: var(--color-success-light);
    border-color: var(--color-success);
    color: var(--color-success-dark);
  }

.pill-toggle.active[data-value="false"] {
    background: var(--color-danger-light);
    border-color: var(--color-danger);
    color: var(--color-danger-dark);
  }

/* ===== INLINE TOGGLE (Rolling Shutter / Dipswitch Style) ===== */

.form-actions.inline-toggle {
    justify-content: center;
  }

.inline-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border-width: 1px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    border-color: var(--color-border);
    background: var(--color-background);
    min-width: 4.5rem;
    height: 1.75rem;
    overflow: hidden;
}

.inline-toggle:hover {
    border-color: var(--color-primary);
    background: var(--color-background-secondary);
  }

.inline-toggle:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    ring-color: var(--color-primary-300);
}

.form-actions.inline-toggle-content {
    justify-content: center;
  }

.inline-toggle-content {
  display: flex;
  align-items: center;
  justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.form-actions.inline-toggle-option {
    justify-content: center;
  }

.inline-toggle-option {
  display: flex;
  align-items: center;
  justify-content: center;
    width: 100%;
    height: 100%;
    transition: all 0.2s ease-in-out;
}

/* IS option styling - shown when active */

.inline-toggle.is-active .inline-toggle-option--true {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    font-weight: 600;
    border-color: var(--color-success);
  }

/* IS NOT option styling - shown when active */

.inline-toggle.is-not-active .inline-toggle-option--false {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
    font-weight: 600;
    border-color: var(--color-danger);
  }

/* Update border color based on active state */

.inline-toggle.is-active {
    border-color: var(--color-success);
  }

.inline-toggle.is-not-active {
    border-color: var(--color-danger);
  }

/* ===== COMPACT MODE ===== */

.binary-toggle--compact {
  padding: 0.5rem;
}

.binary-toggle--compact .binary-toggle-label {
  font-size: 0.75rem;
}

.binary-toggle--compact .binary-toggle-option {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
}

/* ===== NOTES SECTION ===== */

.binary-toggle-notes {
    /* Margin/border only when notes are visible */
  }

/* Add spacing only when notes content is visible */

.binary-toggle-notes:has(.notes-content:not(.hidden)) {
  margin-top: 0.75rem;
  border-top-width: 1px;
  padding-top: 0.75rem;
    border-color: var(--color-border);
}

.binary-toggle-notes .notes-toggle-btn {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    padding: 0;
}

.binary-toggle-notes .notes-toggle-btn:hover {
    color: var(--color-primary);
  }

.binary-toggle-notes .notes-toggle-btn kbd {
  margin-left: 0.25rem;
}

.binary-toggle-notes .notes-content {
    /* No margin when hidden */
  }

.binary-toggle-notes .notes-content:not(.hidden) {
  margin-top: 0.5rem;
}

.binary-toggle-notes .notes-content.hidden {
    display: none;
    margin: 0;
    padding: 0;
  }

.binary-toggle-notes .notes-textarea {
  width: 100%;
  border-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  resize: vertical;
    background: var(--color-background);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.binary-toggle-notes .notes-textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    border-color: var(--color-primary);
    ring-color: var(--color-primary-100);
}

/* ===== NON-ARTICLE TAGS (Reused from classification-panel) ===== */

.binary-toggle .non-article-tags {
  margin-top: 0.75rem;
  border-top-width: 1px;
  padding-top: 0.75rem;
    border-color: var(--color-border);
}

.binary-toggle .tags-label {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
    color: var(--color-text-secondary);
}

.binary-toggle .tag-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.binary-toggle .tag-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: var(--color-background);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.binary-toggle .tag-btn:hover {
    background: var(--color-primary-50);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
  }

.binary-toggle .tag-btn:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ===== SPECIAL STYLING FOR ARTICLE QUALITY ===== */

.binary-toggle[data-toggle-id="is_article"] {
    background: var(--color-primary-50);
    border-left: 3px solid var(--color-primary);
    position: relative;
  }

/* Active state for Article Quality - thicker border + arrow */

.binary-toggle[data-toggle-id="is_article"].binary-toggle--active {
    border-left-width: 6px;
  }

.binary-toggle[data-toggle-id="is_article"].binary-toggle--active::before {
    content: '▶';
    position: absolute;
    font-size: 0.8125rem;
    font-weight: 700;
    left: -16px; /* Outside the panel border */
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    z-index: 10;
  }

/* ===== ARTICLE QUALITY CONTAINER ===== */

.article-quality-container {
  margin-bottom: 0.5rem;
}

.form-actions.btn {
    justify-content: center;
  }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration-line: none;
  margin: 0;
  height: 2.25rem;
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
    letter-spacing: 0.02em;
}

.btn:hover:not(:disabled) {
    background: var(--color-surface-hover);
    border-color: var(--color-border-hover);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.03);
  }

.btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--color-primary-200);
}

.btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--color-primary-300);
}

.btn:active {
    transform: scale(0.98);
  }

.btn:disabled,
  .btn[aria-disabled='true'] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
    transform: none;
}

.btn-xs {
  height: 1.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.75rem;
}

.btn-sm {
  height: 1.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
}

.btn-primary {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn-primary:hover:not(:disabled) {
  border-color: var(--color-primary-light);
  background-color: var(--color-primary-light);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

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

.btn-secondary:hover:not(:disabled) {
    background: var(--color-surface);
    border-color: var(--color-border-hover);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.05);
  }

.progress-bar.btn-danger {
    background: var(--color-danger);
  }

.btn-danger {
  border-color: var(--color-danger);
  background-color: var(--color-danger);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn-danger:hover:not(:disabled) {
  border-color: var(--color-danger-dark);
  background-color: var(--color-danger-dark);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.btn-outline {
  background-color: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.btn-outline:hover:not(:disabled) {
    background: var(--color-background-muted);
    border-color: var(--color-gray-400);
  }

.card {
  border-radius: 0.5rem;
  border-width: 1px;
  padding: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--card-shadow);
}

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

/* Batch diversity stats */

.batch-diversity-stats-content {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.8125rem;
}

.diversity-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.diversity-label {
  font-weight: 500;
    color: var(--color-text-secondary);
}

.diversity-value {
    color: var(--color-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
  }

/* Redesigned Batch Card Header */

.batch-compact-header {
  margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.form-actions.batch-header-top {
    justify-content: space-between;
  }

.batch-header-top {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.batch-header-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.batch-article-count {
  font-weight: 600;
    color: var(--color-text-primary);
}

.batch-meta-separator {
    color: var(--color-text-muted);
  }

.batch-header-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.batch-current-badge {
  border-radius: 9999px;
  background-color: var(--color-success-light);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
    color: var(--color-success-dark);
    letter-spacing: 0.05em;
}

.batch-created-by {
  border-radius: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
    color: var(--color-text-secondary);
    background: var(--color-background-subtle);
}

.form-actions.batch-header-help {
    justify-content: center;
  }

.batch-header-help {
  margin-left: 0.25rem;
  display: inline-flex;
  height: 1rem;
  width: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 0.75rem;
    background: var(--color-background-subtle);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-light);
    transition: all 0.2s;
    cursor: help;
}

.batch-header-help:hover {
  background-color: var(--color-info-light);
    color: var(--color-info-dark);
    border-color: var(--color-info);
}

/* Simple Coverage Bar */

.simple-coverage-container {
  margin-bottom: 1rem;
  border-bottom-width: 1px;
  padding-bottom: 0.75rem;
    border-color: var(--color-border-light);
}

.form-actions.coverage-stats-text {
    justify-content: space-between;
  }

.coverage-stats-text {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
}

.coverage-label {
  font-weight: 600;
    color: var(--color-text-secondary);
}

.coverage-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
    color: var(--color-text-primary);
}

.coverage-bar-track {
  height: 0.5rem;
  width: 100%;
  border-radius: 9999px;
    background: var(--color-background-subtle);
}

.coverage-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
    background: linear-gradient(90deg, var(--color-success) 0%, var(--color-primary) 100%);
}

/* Sticky Header */

.badge-strip-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 10;
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-border);
}

.badge-strip-header-spacer {
  min-width: 48px;
  flex-shrink: 0;
}

.badge-strip-header-sources {
  display: flex;
  flex: 1 1 0%;
  gap: 1rem;
}

.badge-strip-header-source {
  flex: 1 1 0%;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
    color: var(--color-text-secondary);
}

/* Compact Mode Header */

.badge-strip-header.compact {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.badge-strip-header.compact .badge-strip-header-spacer {
  min-width: 36px;
}

.badge-strip-header.compact .badge-strip-header-sources {
  gap: 0.5rem;
}

.badge-strip-header.compact .badge-strip-header-source {
  font-size: 10px;
}

/* Badge Strip Wrapper - ensures proper width constraints */

.classification-badge-strip-wrapper {
  width: 100%;
    min-width: 0; /* Allow flex item to shrink below content size */
}

/* Badge Strip Container (Tri-Source Layout - Vertical Stack) */

.classification-badge-strip-tri {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Empty State */

.badge-strip-empty {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-style: italic;
  }

/* ===== CLASSIFICATION PANEL COMPONENT ===== */

.classification-panel {
  position: relative;
  overflow: visible;
  border-width: 1px;
    background: var(--color-surface);
    border-color: var(--color-border);
    transition: all 0.3s ease;
}

.classification-panel-header {
  display: flex;
  align-items: center;
  border-bottom-width: 1px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.625rem;
    background: var(--color-background-tertiary);
    border-color: var(--color-border);
}

/* Inline layout: right-aligned buttons, title fills left space */

.classification-panel-header--inline {
  display: flex;
  min-height: 3rem;
  align-items: stretch;
  padding: 0;
}

.panel-title-truncated {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
    color: var(--color-text-primary);
}

.panel-divider {
  flex-shrink: 0;
  align-self: stretch;
  border-right-width: 1px;
    border-color: var(--color-border);
}

.form-actions.panel-inline-btn {
    justify-content: center;
  }

.panel-inline-btn {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  height: 3rem;
  min-height: 3rem;
  width: 3rem;
  min-width: 3rem;
    color: var(--color-text-primary);
    border: 2px solid transparent;
    background: transparent;
}

.panel-inline-btn:hover {
    background: var(--color-background-secondary);
  }

/* ENHANCED: More dramatic selected state */

.panel-inline-btn.selected {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    border: 2px solid; /* Same width as default */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2);
    /* Removed transform: scale(1.02) to prevent growth */
}

/* Brand Safety: OK=true (green), Warning=false (red) */

.panel-btn-safe.selected {
    background: var(--color-success);
    border-color: var(--color-success-700);
  }

.panel-btn-unsafe.selected {
    background: var(--color-danger);
    border-color: var(--color-danger-dark);
  }

/* Child panels: OK=false (green), Warning=true (red) */

.panel-inline-btn.selected[data-label="false"]:not(.panel-btn-safe):not(.panel-btn-unsafe) {
    background: var(--color-success);
    border-color: var(--color-success-700);
  }

.panel-inline-btn.selected[data-label="true"]:not(.panel-btn-safe):not(.panel-btn-unsafe) {
    background: var(--color-danger);
    border-color: var(--color-danger-dark);
  }

/* ===== CORNER INDICATOR SYSTEM ===== */

/*
   * Corner triangles positioned in corners:
   * - M (Model): top-right corner
   * - A (AI): bottom-right corner
   *
   * Triangles "light up" when the corresponding source exists for that button's value.
   */

/* Base corner indicator */

.corner-indicator {
  pointer-events: none;
  position: absolute;
  height: 1rem;
  width: 1rem;
  opacity: 0;
    transition: opacity 0.15s ease;
    /* Add border for visibility against all button backgrounds */
    border: 1px solid var(--color-triangle-border);
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}

/* Corner positions */

.corner-tr {
  top: 0;
  right: 0;
}

.corner-bl {
  bottom: 0;
  left: 0;
}

.corner-br {
  bottom: 0;
  right: 0;
}

/* Triangle shapes using clip-path */

.corner-tr { clip-path: polygon(0 0, 100% 0, 100% 100%); }

.corner-bl { clip-path: polygon(0 0, 0 100%, 100% 100%); }

.corner-br { clip-path: polygon(100% 0, 0 100%, 100% 100%); }

/* Model indicator: top-right */

.panel-inline-btn[data-has-model="true"] .corner-tr {
  opacity: 1;
    background: var(--color-source-model);
    border-color: var(--color-triangle-border);
}

/* AI indicator: bottom-right */

.panel-inline-btn[data-has-ai="true"] .corner-br {
  opacity: 1;
    background: var(--color-source-ai);
    border-color: var(--color-triangle-border);
}

.inline-icon {
  font-size: 0.875rem;
  font-weight: 600;
}

.classification-panel-indicator {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 1;
    transition: all 200ms ease;
    transform: translateX(0);
}

/* Unlabeled state: Empty gap/placeholder */

.classification-panel-indicator.unlabeled {
  min-width: 4rem;
  opacity: 0;
    transform: translateX(0);
}

/* Labeled state with slide-in animation */

.classification-panel-indicator.labeled {
    background: var(--color-primary-100);
    color: var(--color-primary-dark);
    animation: slideInFade 200ms ease;
  }

/* Indicator badge colors (inverted semantics for children) */

/* positive class = red (bad thing selected) */

.classification-panel-indicator.positive {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
  }

/* negative class = green (good thing selected) - slides from LEFT */

.classification-panel-indicator.negative {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    animation: slideInFromLeft 200ms ease;
  }

/* positive class - slides from RIGHT */

.classification-panel-indicator.positive {
    animation: slideInFromRight 200ms ease;
  }

.classification-panel-indicator.unlabeled {
    background: var(--color-background-tertiary);
    color: var(--color-text-secondary);
  }

/* ===== SLIDE-IN ANIMATIONS ===== */

@keyframes slideInFromLeft {
    from {
      opacity: 0;
      transform: translateX(-12px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

@keyframes slideInFromRight {
    from {
      opacity: 0;
      transform: translateX(12px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

@keyframes slideInFade {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

/* Expand icon hidden - panels always expanded now */

/* Panel body - collapse when no visible content */

.classification-panel-body {
  max-height: none;
  overflow: visible;
}

.classification-panel-body:has(.notes-content) {
  padding: 0.5rem;
}

.classification-panel-body:empty {
  height: 0;
  overflow: hidden;
  padding: 0;
}

.classification-panel--primary .classification-panel-header {
    background: var(--color-background-tertiary);
  }

.classification-panel--primary .classification-panel-body {
  max-height: none;
  padding: 0.5rem;
}

/* ===== INACTIVE PANEL STATES ===== */

.classification-panel:not(.classification-panel--active):not(.classification-panel--primary) {
  opacity: 0.65;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

.classification-panel:not(.classification-panel--active):not(.classification-panel--primary):hover {
  opacity: 0.85;
}

/* Always show indicator badge (no longer hidden when expanded) */

.classification-panel-indicator {
  display: inline-block;
}

/* ===== PANEL SPACING ===== */

.classification-panel-wrapper + .classification-panel-wrapper {
  margin-top: 0;
}

/* Compact vertical spacing for article-quality-container */

.article-quality-container {
  margin-bottom: 0;
}

/* ===== PANEL COLOR CODING ===== */

.classification-panel[data-classification-type="is_nsfw"] {
    border-left: 4px solid var(--color-danger); /* Red for NSFW */
  }

.classification-panel[data-classification-type="is_disinfo"] {
    border-left: 4px solid var(--color-warning); /* Orange for Disinfo */
  }

.classification-panel[data-classification-type="is_article"] {
    border-left: 4px solid var(--color-primary); /* Blue for Article */
  }

/* Active panel gets brighter accent and thicker border */

.classification-panel--active[data-classification-type="is_nsfw"] {
    border-left-width: 6px;
    border-left-color: var(--color-danger-dark);
    box-shadow: 0 0 0 3px var(--color-danger-100);
  }

.classification-panel--active[data-classification-type="is_disinfo"] {
    border-left-width: 6px;
    border-left-color: var(--color-warning-dark);
    box-shadow: 0 0 0 3px var(--color-warning-100);
  }

.classification-panel--active[data-classification-type="is_article"] {
    border-left-width: 6px;
    border-left-color: var(--color-primary-dark);
    box-shadow: 0 0 0 3px var(--color-primary-100);
  }

/* Active panel - larger left border with arrow */

.classification-panel--active {
  position: relative;
  opacity: 1;
    border-left-width: 6px !important;
}

/* Arrow indicator OUTSIDE left of active panel */

.classification-panel--active::before {
    content: '▶';
    position: absolute;
    z-index: 100;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
  }

/* ===== LABELED BADGE VARIANTS ===== */

.classification-panel-indicator.labeled.positive {
    background: var(--color-danger-50);
    color: var(--color-danger);
  }

.classification-panel-indicator.labeled.negative {
    background: var(--color-success-50);
    color: var(--color-success);
  }

/* Smaller buttons in classification panels */

.classification-panel .btn,
  .classification-panel-body .btn {
  height: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
}

/* Button variants for positive/negative */

.btn-negative.selected {
  border-width: 1px;
    background: var(--color-success-50);
    border-color: var(--color-success);
    color: var(--color-success);
}

.btn-positive.selected {
  border-width: 1px;
    background: var(--color-danger-50);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.current-label.positive {
  background-color: var(--color-danger-50);
  color: var(--color-danger);
}

.current-label.negative {
  background-color: var(--color-success-50);
  color: var(--color-success);
}

/* ===== COMPACT MULTI-PANEL LAYOUT ===== */

/* Reduced spacing for showing many classification panels simultaneously */

.classification-panels-compact .classification-panel-wrapper {
  margin-bottom: 0;  /* No spacing between panels */
}

.classification-panels-compact .classification-panel {
  margin-bottom: 0;
}

.classification-panels-compact .classification-panel-header {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.625rem;
}

.classification-panels-compact .classification-panel-title {
  font-size: 0.8125rem;  /* Smaller font */
}

.classification-panels-compact .classification-panel-body {
  padding: 0;
}

.classification-panels-compact .classification-panel-body:has(.notes-content) {
  padding: 0.5rem;
}

.classification-panels-compact .classification-actions {
  margin-bottom: 0.375rem;
  gap: 0.375rem;  /* Reduced spacing */
}

.classification-panels-compact .btn-positive,
  .classification-panels-compact .btn-negative {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.8125rem;  /* Smaller buttons */
}

.classification-panels-compact .confidence-slider-container {
  margin-bottom: 0.375rem;  /* Reduced spacing */
}

.classification-panels-compact .notes-section:has(.notes-content:not(.hidden)) {
  margin-bottom: 0.375rem;
}

.classification-panels-compact .notes-section textarea {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;  /* Smaller text area */
}

/* Compress hidden notes - remove all spacing */

.notes-section .notes-content.hidden {
  margin: 0;
  border-width: 0px;
  padding: 0;
}

/* Collapse notes-section container when hidden */

.notes-section:has(.notes-content.hidden) {
  margin: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
}

/* ===== NOTES DROPDOWN STYLING ===== */

/* Notes section container (for standard panels) */

.panel-notes-section {
  position: relative;
}

/* Notes content - styled as dropdown panel, only visible when 'n' is pressed */

.panel-notes-section .notes-content {
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 0.75rem;
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    background: var(--color-background);
    border-color: var(--color-border);
    animation: slideDown 0.2s ease;
}

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

/* Brand safety notes section - same styling */

.notes-section .notes-content {
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 0.75rem;
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    background: var(--color-background);
    border-color: var(--color-border);
    animation: slideDown 0.2s ease;
}

/* Grid layout for compact panels (optional - can be enabled) */

/* Brand safety parent panel emphasis */

.classification-panel[data-type="is_brand_safe"] {
  border-width: 2px;
    border-color: var(--color-primary);
}

.classification-panel[data-type="is_brand_safe"] .classification-panel-header {
    background: var(--color-primary-50);
  }

/* ===== NON-ARTICLE CLASSIFICATION TAGS ===== */

.non-article-tags {
  margin-top: 0.75rem;
  border-top-width: 1px;
  padding-top: 0.75rem;
    border-color: var(--color-border);
}

.tags-label {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
    color: var(--color-text-secondary);
}

.tag-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.tag-btn:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.tag-btn {
    background: var(--color-background);
    border-color: var(--color-border);
    color: var(--color-text-primary);
  }

.tag-btn:hover {
    background: var(--color-primary-50);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
  }

/* ===== PANEL KEYBOARD SHORTCUTS ===== */

.panel-shortcut {
  margin-left: 0.5rem;
  display: inline-block;
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.6875rem;
  opacity: 0.7;
    background: var(--color-background);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
    box-shadow: 0 1px 0 var(--color-border);
}

.classification-panel--active .panel-shortcut,
  .classification-panel:hover .panel-shortcut {
  opacity: 1;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Brand Safety-specific panel wrapper */

.classification-panel--brand-safety {
  margin-bottom: 1.5rem;
}

/* Indicator colors - Brand Safety specific */

/* Safe (true) = green, Unsafe (false) = red */

.classification-panel--brand-safety .classification-panel-indicator.positive {
    background: var(--color-success-light);
    color: var(--color-success-dark);
  }

.classification-panel--brand-safety .classification-panel-indicator.negative {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
  }

/* Current label display - Brand Safety specific */

.classification-panel--brand-safety .current-label.positive {
  font-weight: 600;
  color: var(--color-success);
}

.classification-panel--brand-safety .current-label.negative {
  font-weight: 600;
  color: var(--color-danger);
}

/* Button colors - Brand Safety specific (OPPOSITE of children) */

/* Safe button (btn-positive) selected = GREEN */

.classification-panel--brand-safety .btn-positive.selected {
  border-width: 1px;
    background: var(--color-success-50);
    border-color: var(--color-success);
    color: var(--color-success);
}

/* Unsafe button (btn-negative) selected = RED */

.classification-panel--brand-safety .btn-negative.selected {
  border-width: 1px;
    background: var(--color-danger-50);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.definition-tooltip {
  position: fixed;
    z-index: var(--z-tooltip);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip {
    background-color: var(--color-gray-800);
  }
}

.definition-tooltip {
  border-width: 1px;
  border-color: var(--color-gray-200);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip {
    border-color: var(--color-gray-700);
  }
}

.definition-tooltip {
  border-radius: 0.5rem;
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  width: 100%;
  max-width: 28rem;
  pointer-events: none;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.definition-tooltip.visible {
  pointer-events: auto;
  opacity: 1;
}

.form-actions.definition-tooltip-header {
    justify-content: space-between;
  }

.definition-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom-width: 1px;
  border-color: var(--color-gray-200);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-header {
    border-color: var(--color-gray-700);
  }
}

.definition-tooltip-header {
  background-color: var(--color-gray-50);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-header {
    background-color: var(--color-gray-900);
  }
}

.definition-tooltip-header strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-header strong {
    color: var(--color-gray-100);
  }
}

.definition-tooltip-version {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-version {
    color: var(--color-gray-400);
  }
}

.definition-tooltip-version {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 0.375rem;
  background-color: var(--color-gray-100);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-version {
    background-color: var(--color-gray-800);
  }
}

.definition-tooltip-content {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-gray-700);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content {
    color: var(--color-gray-300);
  }
}

.definition-tooltip-content {
  max-height: 24rem;
  overflow-y: auto;
  position: relative;
    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #f3f4f6;
}

/* Webkit scrollbar styling */

.definition-tooltip-content::-webkit-scrollbar {
    width: 8px;
  }

.definition-tooltip-content::-webkit-scrollbar-track {
  border-radius: 0.375rem;
  background-color: var(--color-gray-100);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content::-webkit-scrollbar-track {
    background-color: var(--color-gray-800);
  }
}

.definition-tooltip-content::-webkit-scrollbar-thumb {
  border-radius: 0.375rem;
  background-color: var(--color-gray-400);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-600);
  }
}

.definition-tooltip-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-500);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gray-500);
  }
}

/* Fade indicator at bottom when scrollable */

.definition-tooltip-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.9));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }

.definition-tooltip-content.has-scroll::after {
    opacity: 1;
  }

/* Dark mode fade */

.dark .definition-tooltip-content::after {
    background: linear-gradient(to bottom, transparent, rgba(31, 41, 55, 0.9));
  }

/* Markdown content styling */

.definition-tooltip-content h1 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gray-900);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content h1 {
    color: var(--color-gray-100);
  }
}

.definition-tooltip-content h1:first-child {
  margin-top: 0;
}

.definition-tooltip-content h2 {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content h2 {
    color: var(--color-gray-100);
  }
}

.definition-tooltip-content h3 {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content h3 {
    color: var(--color-gray-100);
  }
}

.definition-tooltip-content p {
  margin-bottom: 0.75rem;
}

.definition-tooltip-content p:last-child {
  margin-bottom: 0;
}

.definition-tooltip-content ul,
  .definition-tooltip-content ol {
  margin-left: 1.25rem;
  margin-bottom: 0.75rem;
}

.definition-tooltip-content ul > :not([hidden]) ~ :not([hidden]),
  .definition-tooltip-content ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.definition-tooltip-content ul {
  list-style-type: disc;
}

.definition-tooltip-content ol {
  list-style-type: decimal;
}

.definition-tooltip-content li {
  font-size: 0.8125rem;
}

.definition-tooltip-content code {
  border-radius: 0.375rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  background-color: var(--color-gray-100);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content code {
    background-color: var(--color-gray-800);
  }
}

.definition-tooltip-content code {
  color: var(--color-gray-900);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content code {
    color: var(--color-gray-100);
  }
}

.definition-tooltip-content pre {
  margin-bottom: 0.75rem;
  overflow-x: auto;
  border-radius: 0.375rem;
  padding: 0.75rem;
  background-color: var(--color-gray-100);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content pre {
    background-color: var(--color-gray-800);
  }
}

.definition-tooltip-content pre code {
  background-color: transparent;
  padding: 0;
}

.definition-tooltip-content blockquote {
  margin-bottom: 0.75rem;
  border-left-width: 4px;
  padding-left: 1rem;
  font-style: italic;
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  color: var(--color-gray-500);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content blockquote {
    color: var(--color-gray-400);
  }
}

.definition-tooltip-content strong {
  font-weight: 600;
  color: var(--color-gray-900);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content strong {
    color: var(--color-gray-100);
  }
}

.definition-tooltip-content em {
  font-style: italic;
}

.definition-tooltip-content a {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content a {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
  }
}

.definition-tooltip-content a:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-content a:hover {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
  }
}

.definition-tooltip-footer {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-top-width: 1px;
  border-color: var(--color-gray-200);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-footer {
    border-color: var(--color-gray-700);
  }
}

.definition-tooltip-footer {
  background-color: var(--color-gray-50);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-footer {
    background-color: var(--color-gray-900);
  }
}

.definition-tooltip-meta {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

@media (prefers-color-scheme: dark) {

  .definition-tooltip-meta {
    color: var(--color-gray-400);
  }
}

.form-group {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* .form-label moved to forms/form-base.css */

textarea[name='keywords'] {
  --tw-blur: blur(4px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

textarea[name='keywords']:focus,
  textarea[name='keywords']:active {
  --tw-blur:  ;
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* .form-actions moved to forms/form-base.css */

.form-actions.justify-center {
    justify-content: center;
  }

.form-actions.justify-between {
    justify-content: space-between;
  }

.form-actions-compact .btn {
  flex: 1 1 0%;
}

/* .form-help moved to forms/form-base.css */

/* .form-select moved to forms/form-field.css */

/* Classification Type Selector in Header */

/* Form Container */

/* Form Field Wrapper */

/* Form Labels */

/* Base Input Styles */

/* Helper Text */

.form-help {
  font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Error Text */

/* Form Grid Layouts */

/* Form Sections */

/* Form Actions */

/* Text/Number/Email/URL Inputs - inherit from .form-input base class */

/* Number input - remove spinners on Webkit */

/* Number input - remove spinners on Firefox */

/* Date Input - inherit from .form-input base class */

/* Textarea */

/* Select Dropdown */

/* Checkbox */

/* Radio Button */

/* Range Slider */

/* Confidence Range Input (Min/Max dual input) */

/* Date Range Selector (Preset buttons + custom date) */

.date-range-presets {
  display: flex;
  gap: 0.5rem;
}

.preset-btn {
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: var(--color-background);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.preset-btn:hover {
    border-color: var(--color-primary-light);
    color: var(--color-primary);
    background: var(--color-primary-50);
  }

.preset-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
  }

.preset-btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--color-primary-100);
}

/* Button Group (Radio button alternative) */

.button-group-option.active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
  }

/* Range Input with Value Display */

.range-input-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.range-input-group .form-range {
  flex: 1 1 0%;
}

.range-input-group .range-value {
  font-size: 0.8125rem;
  font-weight: 600;
    color: var(--color-text-primary);
    min-width: 3rem;
    text-align: right;
}

/* Form Info Note */

/* Form Warning Note */

/* Searchable Select */

/* ==================== Keyboard Indicators ==================== */

/* Base kbd element styling */

kbd {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
  display: inline-block;
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  vertical-align: baseline;
  line-height: 1;
  border-color: var(--color-gray-400);
  background-color: var(--color-gray-200);
  color: var(--color-gray-900);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.1),
      inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    letter-spacing: 0.025em;
}

/* Hotkey indicator wrapper */

.hotkey-indicator {
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.75rem;
}

/* Position variants */

/* Display modes */

/* Button with hotkey indicator */

.form-actions.btn.has-hotkey-indicator,
  button.form-actions.has-hotkey-indicator {
    justify-content: space-between;
  }

.btn.has-hotkey-indicator,
  button.has-hotkey-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.btn.has-hotkey-indicator .hotkey-indicator,
  button.has-hotkey-indicator .hotkey-indicator {
  margin-left: auto;
  opacity: 0.8;
}

.btn:hover .hotkey-indicator,
  button:hover .hotkey-indicator {
  opacity: 1;
}

/* Standalone hotkey indicator */

/* ==================== Focus Management ==================== */

/* Focus visible styles */

:focus-visible {
  border-radius: 0.25rem;
  outline-width: 2px;
  outline-offset: 2px;
    outline-color: var(--color-primary);
}

/* Remove default focus for mouse users */

:focus:not(:focus-visible) {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Custom focus for interactive elements */

a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex="0"]:focus-visible {
  outline-width: 2px;
  outline-offset: 2px;
    outline-color: var(--color-primary);
}

/* Focus trap container */

/* Skip link for accessibility */

.skip-link {
  position: absolute;
  top: -2.5rem;
  left: 0;
  z-index: 10000;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  border-bottom-right-radius: 0.375rem;
    background: var(--color-primary);
}

.skip-link:focus {
  top: 0;
}

/* ==================== Keyboard Navigation Highlights ==================== */

/* Highlight current row in table during keyboard nav */

/* Highlight current article in list */

/* ==================== Keyboard Help Overlay ==================== */

.keyboard-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.form-actions.keyboard-help-overlay {
    justify-content: center;
  }

.keyboard-help-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

.keyboard-help-content {
  max-height: 80vh;
  width: 100%;
  overflow-y: auto;
  border-radius: 0.75rem;
  padding: 2rem;
    background: var(--color-surface);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

.form-actions.keyboard-help-header {
    justify-content: space-between;
  }

.keyboard-help-header {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 2px;
  padding-bottom: 1rem;
    border-color: var(--color-border);
}

.keyboard-help-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

.keyboard-help-close {
  cursor: pointer;
  border-style: none;
  background-color: transparent;
  padding: 0.25rem;
  font-size: 1.25rem;
  line-height: 1;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    color: var(--color-text-secondary);
}

.keyboard-help-close:hover {
    color: var(--color-text-primary);
  }

/* ==================== Navigation Mode Indicator ==================== */

.keyboard-nav-indicator.active {
  opacity: 1;
}

/* ==================== Roving Tabindex ==================== */

[role="menu"] [tabindex="-1"],
  [role="listbox"] [tabindex="-1"],
  [role="tablist"] [tabindex="-1"] {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

[role="menu"] [tabindex="0"]:focus,
  [role="listbox"] [tabindex="0"]:focus,
  [role="tablist"] [tabindex="0"]:focus {
  outline-width: 2px;
    outline-offset: -2px;
    outline-color: var(--color-primary);
}

/* ==================== Keyboard-only Visible Elements ==================== */

/* ===== HOTKEY SECTION CONTAINER ===== */

.keyboard-hotkey-section {
  margin-bottom: 0;
  border-width: 1px;
  border-top-width: 2px;
  padding: 0.5rem;
    background: var(--color-background-secondary);
    border-color: var(--color-border);
    border-top-color: var(--color-primary);
}

/* ===== SECTION HEADER ===== */

.hotkey-section-header {
  margin-bottom: 0.5rem;
}

.hotkey-section-title {
  font-size: 0.75rem;
  font-weight: 500;
    color: var(--color-text-secondary);
}

.hotkey-section-title strong {
  font-weight: 600;
    color: var(--color-primary);
}

/* ===== SHORTCUTS LIST ===== */

.hotkey-section-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hotkey-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.hotkey-item kbd {
  flex-shrink: 0;
}

.hotkey-item span {
    color: var(--color-text-primary);
  }

.hotkey-item span strong {
  font-weight: 600;
    color: var(--color-primary-dark);
}

/* ===== ADD NOTE BUTTON ===== */

.hotkey-add-note-btn {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  border-width: 1px;
  background-color: transparent;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.hotkey-add-note-btn:hover {
    background: var(--color-primary-50);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
  }

.hotkey-add-note-btn kbd {
  pointer-events: none;
}

/* ===== COMPACT MODE FOR DIFFERENT PANELS ===== */

.keyboard-hotkey-section[data-active-panel="is_article"] {
    border-top-color: var(--color-primary);
  }

.keyboard-hotkey-section[data-active-panel="is_brand_safe"] {
    border-top-color: var(--color-primary);
  }

.keyboard-hotkey-section[data-active-panel="is_nsfw"] {
    border-top-color: var(--color-danger);
  }

.keyboard-hotkey-section[data-active-panel="is_disinfo"] {
    border-top-color: var(--color-warning);
  }

.lens-selector-container {
  margin-bottom: 0.75rem;
}

.lens-selector-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 0.25rem;
    border-color: var(--color-border);
    background: var(--color-surface);
}

.lens-selector-btn {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-secondary);
}

.lens-selector-btn:hover {
    background: var(--color-background-alt);
    color: var(--color-text-primary);
  }

.lens-selector-btn.active {
    background: var(--color-primary-50);
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

.lens-icon {
  flex-shrink: 0;
  font-size: 0.875rem;
}

.lens-label {
  font-size: 0.8125rem;
}

@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

.loading {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
  font-style: italic;
    color: var(--color-text-muted);
}

/* Container for multiple badges */

.article-metadata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Base badge styling */

/* Badge with label (bold prefix) */

/* Link badge variant */

/* Semantic color variants */

/* Extra small badge variant (for model version, etc.) */

/* Badge type refinements for better visual hierarchy */

/* Main container */

.article-metadata-compact {
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
}

/* Metadata groups (horizontal rows with light backgrounds) */

.metadata-group {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
    background: var(--color-primary-50);
}

/* Metadata row (single line with ID + URL) */

/* Article ID - compact and muted */

/* URL - takes all remaining space */

/* Legacy styles - keeping for compatibility */

.metadata-label {
  font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.metadata-value {
  font-size: 0.75rem;
    color: var(--color-text-primary);
}

/* Group-specific colors (deterministic, related content grouped) */

.metadata-group-article {
    background: var(--color-primary-100);
    border-left: 2px solid var(--color-primary-300);
  }

/* Source badge styles - centralized for M:/H:/A: badges */

.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: all 0.2s;
}

.source-badge:hover {
    background: var(--color-surface-hover);
  }

.source-badge-compact {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.source-initial {
  font-weight: 600;
    color: var(--source-color, var(--color-text-primary));
}

.source-label {
  font-weight: 400;
    color: var(--color-text-primary);
}

.source-confidence {
  font-weight: 400;
    color: var(--color-text-secondary);
}

/* Source-specific colors */

.source-badge[data-source="model"] .source-initial {
    color: var(--color-primary);
  }

.source-badge[data-source="human"] .source-initial {
    color: var(--color-success);
  }

.source-badge[data-source="ai"] .source-initial {
    color: var(--color-info);
  }

/* Individual field (key-value pair) */

/* Key (label) */

/* Value */

.metadata-value {
  font-weight: 400;
    color: var(--color-text-primary);
    font-size: 0.75rem;
}

/* Extra info (like model version) */

/* Link styling */

/* URL field - special handling for long URLs */

.metadata-field-url .metadata-value {
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Field-specific styling */

.metadata-field-model .metadata-value {
  color: var(--color-info);
}

.metadata-field-ai .metadata-value {
  color: var(--color-warning);
}

.metadata-field-human .metadata-value {
  font-weight: 500;
  color: var(--color-success);
}

.metadata-field-training .metadata-value {
  font-weight: 500;
}

/* Separator between fields (optional, can be removed if too busy) */

/* Dark mode support removed - using theme variables instead */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.form-actions.modal {
    justify-content: center;
  }

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
    background: var(--color-background-overlay);
    backdrop-filter: blur(4px);
    z-index: var(--z-index-modal);
    transition: var(--theme-transition);
}

.modal-content {
  max-height: 85vh;
  width: 91.666667%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;
  border-width: 1px;
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    max-width: var(--modal-width-base);
    transition: var(--theme-transition);
}

.form-actions.modal-header {
    justify-content: space-between;
  }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
    background: var(--color-background-tertiary);
    border-color: var(--color-border);
    transition: var(--theme-transition);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: 0.01em;
}

.modal-close {
  cursor: pointer;
  border-width: 1px;
  border-color: transparent;
  background-color: transparent;
}

.form-actions.modal-close {
    justify-content: center;
  }

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  padding: 0.5rem;
  height: 2rem;
  width: 2rem;
  font-size: 1.125rem;
  line-height: 1;
    color: var(--color-text-muted);
    transition: var(--theme-transition);
}

.modal-close:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border);
    color: var(--color-text-primary);
  }

.modal-body {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 1.5rem;
    background: var(--color-surface);
}

/* Custom scrollbar for modal body */

.modal-body::-webkit-scrollbar {
  width: 0.625rem;
}

.modal-body::-webkit-scrollbar-track {
  border-radius: 0.375rem;
    background: var(--color-background-secondary);
}

.modal-body::-webkit-scrollbar-thumb {
  border-radius: 0.375rem;
    background: var(--color-gray-600);
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500);
  }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  border-top-width: 1px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
    background: var(--color-background-tertiary);
    border-color: var(--color-border);
    transition: var(--theme-transition);
}

/* Modal Size Variants */

.modal-large {
    max-width: 900px;
  }

.modal-dialog {
  max-height: 85vh;
  width: 91.666667%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;
  border-width: 1px;
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    max-width: var(--modal-width-base);
}

.modal-dialog.modal-large {
    max-width: 900px;
  }

/* Config Modal Specific Styles */

.config-display {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.config-section-display {
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 1rem;
    background: var(--color-background-secondary);
    border-color: var(--color-border);
}

.config-section-display h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  border-bottom-width: 2px;
  padding-bottom: 0.5rem;
  font-size: 1rem;
    color: var(--color-text-primary);
    border-color: var(--color-primary);
}

.config-grid {
  display: grid;
  gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.config-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.config-label {
  font-size: 0.75rem;
  font-weight: 500;
    color: var(--color-text-secondary);
}

.config-value {
  font-weight: 600;
    color: var(--color-text-primary);
    font-family: 'Courier New', monospace;
}

.config-json {
  margin: 0;
  overflow-x: auto;
  border-radius: 0.375rem;
  padding: 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
}

/* User Identity Modal Specific Styles */

.user-identity-modal .modal-dialog {
  max-width: 28rem;
}

.user-identity-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.user-identity-form .form-group.hidden {
    display: none;
  }

.user-identity-form .form-help {
  font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Modal backdrop for click-outside */

/* Batch Assignment Modal Specific Styles */

.batch-assignment-modal .modal-dialog {
  max-width: 32rem;
}

.progress {
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background-color: var(--color-gray-200);
    height: var(--progress-height);
}

.progress-bar.bg-info {
    background: var(--color-info);
  }

.toast {
  position: fixed;
  border-radius: 0.375rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    top: 1.25rem;
    right: 1.25rem;
    z-index: var(--z-index-toast);
    max-width: 400px;
    width: auto;
    height: auto;
    opacity: 0;
    transform: translateX(400px);
}

.toast.toast-show {
    opacity: 1;
    --tw-translate-x: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

.progress-bar.toast.toast-success {
    background: var(--color-success);
  }

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

.progress-bar.toast.toast-error {
    background: var(--color-danger);
  }

.toast.toast-error {
  background-color: var(--color-danger);
}

.progress-bar.toast.toast-warning {
    background: var(--color-warning);
  }

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

.progress-bar.toast.toast-info {
    background: var(--color-info);
  }

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

@media (max-width: 768px) {
    .toast {
    right: 0.75rem;
    left: 0.75rem;
      max-width: none;
      transform: translateY(-100px);
  }

    .toast.show {
    --tw-translate-y: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  }

/* Badge Container (Full-Width Row - No Pills, No Gaps) */

.tri-source-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    border-bottom: 1px solid var(--color-border);
}

.tri-source-badge:first-child {
    border-top: 1px solid var(--color-border);
  }

.tri-source-badge:hover {
    background: var(--color-surface-hover);
  }

/* Type Label (ART, BS, SE, etc.) */

.tri-badge-type-label {
  font-size: 0.8125rem;
  font-weight: 700;
  min-width: 48px;
  flex-shrink: 0;
    color: var(--color-text-primary);
}

/* Segments Container (M | H | A) */

.tri-badge-segments {
  display: flex;
  flex: 1 1 0%;
  gap: 1rem;
}

/* Individual Segment (Takes 1/3 of space) */

.tri-badge-segment {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.25rem;
}

/* Parallelogram Container (Skewed) */

.tri-badge-bar-parallelogram {
  position: relative;
  height: 2rem;
  width: 100%;
    transform: skewX(-40deg);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Stacked Bar (Unskewed content inside parallelogram) */

.tri-badge-bar-stacked {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 0.25rem;
    transform: skewX(40deg);
    transform-origin: center;
}

/* Bar Segments (Positive, Negative, Unlabeled) */

.tri-badge-bar-pos,
  .tri-badge-bar-neg,
  .tri-badge-bar-unl {
  height: 100%;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Empty bar when no labels */

.tri-badge-bar-stacked:has(.tri-badge-bar-pos[style*="width: 0%"]):has(.tri-badge-bar-neg[style*="width: 0%"]) {
    background: var(--color-surface-hover);
  }

/* Source Color Border (Bottom of parallelogram) */

.tri-badge-source-border {
  height: 0.125rem;
  width: 100%;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Compact Mode (Smaller) */

.tri-source-badge.tri-badge-compact {
  gap: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.tri-source-badge.tri-badge-compact .tri-badge-type-label {
  min-width: 36px;
  font-size: 0.75rem;
}

.tri-source-badge.tri-badge-compact .tri-badge-segments {
  gap: 0.5rem;
}

.tri-source-badge.tri-badge-compact .tri-badge-bar-parallelogram {
  height: 0.75rem;
}

.tri-source-badge.tri-badge-compact .tri-badge-source-border {
    display: none; /* Hide bottom border to save space */
  }

.user-identity-btn .user-icon {
  font-size: 1rem;
}

.user-identity-btn .user-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty state (not identified) */

.user-identity-empty .user-name {
  font-style: italic;
    color: var(--color-text-muted);
}

/* Active state (identified) */

.user-identity-active {
    border-color: var(--color-success);
  }

.user-identity-active:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
  }

/* Inline dropdown version */

.user-identity-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Warning state (no user selected) */

.user-identity-warning .user-identity-select {
    border-color: var(--color-warning);
    background: var(--color-warning-bg);
  }

.user-identity-warning .user-identity-select:hover {
    border-color: var(--color-warning);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
  }

/* Active state with dropdown */

.user-identity-active .user-identity-select {
    border-color: var(--color-success);
  }

.user-identity-active .user-identity-select:hover {
    border-color: var(--color-primary);
  }

/* User Selector with Autocomplete */

.user-selector-container {
    position: relative;
}

.user-selector-input-wrapper {
  position: relative;
}

.user-selector-input {
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  min-width: 180px;
    background: var(--color-bg-primary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.user-selector-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.user-selector-button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: var(--color-surface);
    border-color: var(--color-success);
    color: var(--color-text-primary);
}

.user-selector-button:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
  }

.user-selector-button .user-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-selector-chevron {
  font-size: 0.75rem;
  opacity: 0.6;
}

.user-selector-dropdown-wrapper {
    min-width: 200px;
  }

.user-selector-dropdown {
  max-height: 300px;
  overflow-y: auto;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  margin: 0;
  list-style-type: none;
  padding: 0.25rem;
  min-width: 200px;
    background: var(--color-bg-primary);
    border-color: var(--color-border);
    margin-top: 0.25rem;
}

.user-selector-option {
  cursor: pointer;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.form-actions.user-selector-option {
    justify-content: space-between;
  }

.user-selector-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
    color: var(--color-text-primary);
}

.user-selector-option:hover,
  .user-selector-option.highlighted {
    background: var(--color-surface-hover);
  }

.user-selector-option.selected {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
  }

.user-selector-option.selected:hover,
  .user-selector-option.selected.highlighted {
    background: var(--color-primary-hover);
  }

.user-selector-add-new {
  margin-top: 0.25rem;
  border-top-width: 1px;
  padding-top: 0.5rem;
    border-top-color: var(--color-border);
}

.user-selector-add-icon {
  margin-right: 0.5rem;
  font-weight: 700;
}

.user-selector-check {
  margin-left: 0.5rem;
  font-size: 0.75rem;
}

.user-selector-empty {
  cursor: default;
    color: var(--color-text-muted);
}

.user-selector-empty:hover {
    background: transparent;
  }

/* ========================================
     GLOBAL THEME TRANSITIONS
     ======================================== */

/* Apply smooth transitions to ALL elements for theme changes */

* {
    transition-property: background-color, color, border-color, box-shadow, fill, stroke;
    transition-duration: var(--theme-transition, 500ms);
    transition-timing-function: ease-in-out;
  }

/* ========================================
     APP SHELL STRUCTURE
     ======================================== */

/* Full-height body layout */

body {
  display: flex;
  height: 100vh;
  flex-direction: column;
  overflow: hidden;
    margin: 0;
}

/* Header: Fixed height */

header {
  flex-shrink: 0;
}

/* Main: Fills remaining space */

main {
  flex: 1 1 0%;
  overflow-y: auto;
}

/* Tab content */

.tab-content {
    /* No height constraint - let content flow naturally */
  }

/* ========================================
     UNIFIED HEADER WIDGET BASE CLASS
     ======================================== */

/* Base class for all header status widgets (DB, Model, etc.) */

/* ========================================
     HEADER WIDGET STATUS VARIANTS
     ======================================== */

.header-widget-status.connecting {
    color: var(--color-info);
    animation: pulse 1.5s ease-in-out infinite;
  }

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

.header-widget-status.connected {
    color: var(--color-success);
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  }

.header-widget-status.disconnected,
  .header-widget-status.error {
    color: var(--color-danger);
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  }

.header-widget-status.fallback {
    color: var(--color-warning);
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  }

/* ========================================
     HEADER WIDGET INTERACTIVE ELEMENTS
     ======================================== */

/* Clickable indicator (for DB connections) */

/* Action button (for model switch, refresh, etc.) */

/* ========================================
     LEGACY DB STATUS STYLES (used in debug panel)
     ======================================== */

.db-status.connecting {
    color: var(--color-info);
    animation: pulse 1.5s ease-in-out infinite;
  }

.db-status.connected {
    color: var(--color-success);
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  }

.db-status.disconnected,
  .db-status.error {
    color: var(--color-danger);
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  }

.db-status.fallback {
    color: var(--color-warning);
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  }

.refresh-btn {
  cursor: pointer;
  border-radius: 0.375rem;
  border-style: none;
  background-color: transparent;
  padding: 0.25rem;
  font-size: 0.875rem;
  line-height: 1;
    color: var(--color-text-secondary);
    transition: var(--theme-transition);
}

.refresh-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
  }

/* Debug Floating Action Button (Bottom Right) */

.debug-fab {
  position: fixed;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 2px;
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.form-actions.debug-fab {
    justify-content: center;
  }

.debug-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  width: 3.5rem;
  font-size: 1.25rem;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--color-primary);
    border-color: var(--color-primary-dark);
    color: var(--color-text-inverse);
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    z-index: var(--z-index-toast);
}

.debug-fab.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
  }

.debug-fab:not(.hidden):hover {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
  }

.debug-fab:not(.hidden):active {
    transform: scale(0.95);
  }

/* ========================================
     LAYOUT CONTAINERS
     ======================================== */

.\!container {
  width: 100%;
  padding: 0.75rem;
}

.container {
  width: 100%;
  padding: 0.75rem;
}

/* Removed .container-sm, .container-md, .container-lg, .container-xl - use w-full instead */

/* ========================================
     UNIFIED HEADER & TAB NAVIGATION
     ======================================== */

/* Main header bar (contains title + widgets + tabs) */

header.form-actions {
    justify-content: space-between;
  }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
    background: var(--color-surface);
    border-color: var(--color-border);
    min-height: 60px;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, margin 0.3s ease-in-out;
    transform: translateY(0);
    opacity: 1;
    max-height: 100px;
    margin: 0;
    overflow: hidden;
}

/* Hidden header state for batch review */

header.app-header-hidden {
    transform: translateY(-100%);
    opacity: 0;
    max-height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    overflow: hidden;
  }

header h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
    color: var(--color-text-primary);
}

/* Tab Navigation Buttons */

.tab-nav-btn {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  border-bottom-width: 2px;
  border-style: none;
  border-color: transparent;
  background-color: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
    color: var(--color-text-secondary);
    transition: var(--theme-transition);
    letter-spacing: 0.01em;
}

.tab-nav-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-hover);
  }

.tab-nav-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
  }

.tab-icon {
  font-size: 0.8125rem;
}

.tab-label {
  white-space: nowrap;
}

/* Tab Content Areas */

.binary-toggle-notes .notes-content.tab-content {
    display: none;
    margin: 0;
    padding: 0;
  }

.notes-section .notes-content.tab-content {
  margin: 0;
  border-width: 0px;
  padding: 0;
}

.notes-section:has(.notes-content.tab-content) {
  margin: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
}

.user-identity-form .form-group.tab-content {
    display: none;
  }

.debug-fab.tab-content {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
  }

.tab-content {
  display: none;
    /* Padding removed - each tab's root container manages its own spacing */
    animation: fadeIn 0.2s ease-in-out;
}

.tab-content.active {
  display: block;
  height: 100%;
    padding: 0;
    margin: 0;
}

@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

/* ========================================
     RESPONSIVE DESIGN
     ======================================== */

@media (max-width: 768px) {
    .container {
    padding: 0.5rem;
  }

    header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
      min-height: auto;
  }

    header h1 {
    font-size: 0.875rem;
  }

    .tab-nav-btn {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.7rem;
  }

    .tab-icon {
    font-size: 0.75rem;
  }

    .tab-content {
      /* Padding managed by each tab's root container */
    }

    .header-widget {
    gap: 0.375rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

    .header-widget-label {
    font-size: 0.65rem;
  }

    .header-widget-status {
    font-size: 0.6rem;
  }
    .\!container {
    padding: 0.5rem;
  }
  }

/* Panel Container - Responsive width */

.article-detail-panel.open {
    transform: translateX(0);
  }

/* Compact Single-Row Header */

/* Panel Body - Responsive columns */

/* Panel Footer */

/* Card layout (mobile/alternative display) */

/* Utility classes */

.text-muted {
  font-style: italic;
    color: var(--color-text-muted);
}

/* ===== ARTICLE REVIEW MODAL ===== */

.article-review-modal-overlay.show {
  opacity: 1;
}

.article-review-modal {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  border-width: 1px;
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    max-width: 85vw;
    max-height: 85vh;
    width: 85vw;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.article-review-modal-overlay.show .article-review-modal {
    transform: scale(1);
  }

/* Modal-specific overrides for article-review */

.article-review-modal .modal-title {
  overflow-wrap: break-word;
    max-width: 80%;
}

/* Two-column layout for modal body */

.article-review-modal .modal-body {
  display: flex;
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 2rem;
    flex-direction: row;
    gap: 2rem;
}

.article-review-modal .modal-body h3 {
  margin: 0;
  border-bottom-width: 1px;
  font-size: 1rem;
  font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-color: var(--color-border);
}

/* Article Metadata - SCOPED to .article-metadata container only */

.article-metadata {
  border-radius: 0.75rem;
    background: var(--color-background-tertiary);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.article-metadata .metadata-row {
  display: flex;
  align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.article-metadata .metadata-row:last-child {
  margin: 0;
}

.article-metadata .metadata-label {
  font-weight: 500;
    color: var(--color-text-secondary);
    min-width: 20px;
}

.article-metadata .metadata-value {
  font-size: 0.8125rem;
    /* color removed - inherits from metadata-compact.css with dark mode support */
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', monospace;
}

.article-metadata .metadata-link {
  font-size: 0.8125rem;
  text-decoration-line: none;
    color: var(--color-primary);
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', monospace;
}

.article-metadata .metadata-link:hover {
  text-decoration-line: underline;
}

/* Model Prediction Section */

.prediction-label.nsfw {
  border-width: 1px;
    background: var(--color-danger-50);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* Article Content */

.article-content-section {
    margin-bottom: 1.5rem;
  }

/* Human Review Section */

.current-label {
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
    padding: 0.25rem 0.5rem;
}

.current-label.nsfw {
    background: var(--color-danger-50);
    color: var(--color-danger);
  }

.current-label.not-nsfw {
    background: var(--color-success-50);
    color: var(--color-success);
  }

/* Review Buttons - Vertical Stack */

.review-buttons {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.review-btn.selected {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

.btn-icon {
  font-size: 1rem;
}

/* kbd styling inherited from keyboard.css - no override needed */

/* Button Variants */

.btn-not-nsfw.selected {
  border-width: 1px;
    background: var(--color-success-50);
    border-color: var(--color-success);
    color: var(--color-success);
}

.btn-nsfw.selected {
  border-width: 1px;
    background: var(--color-danger-50);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Review Form */

.form-group {
    margin-bottom: 1.5rem;
  }

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

.form-group label {
  display: block;
  font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.review-notes {
  width: 100%;
  resize: vertical;
  border-radius: 0.375rem;
  border-width: 1px;
  font-size: 0.8125rem;
    padding: 0.75rem;
    border-color: var(--color-border);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.5;
    min-height: 80px;
    font-family: inherit;
}

.review-notes:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.review-notes::-moz-placeholder {
    color: var(--color-text-secondary);
  }

.review-notes::placeholder {
    color: var(--color-text-secondary);
  }

.checkbox-label {
  display: flex;
  cursor: pointer;
  align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem !important;
}

.checkbox-label input[type='checkbox'] {
  cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.binary-toggle-notes .notes-content.checkmark {
    display: none;
    margin: 0;
    padding: 0;
  }

.notes-section .notes-content.checkmark {
  margin: 0;
  border-width: 0px;
  padding: 0;
}

.notes-section:has(.notes-content.checkmark) {
  margin: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
}

.user-identity-form .form-group.checkmark {
    display: none;
  }

.debug-fab.checkmark {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
  }

.checkmark {
  display: none;
}

/* Modal Footer */

.modal-footer {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  border-top-width: 1px;
    padding: 1.5rem 2rem;
    background: var(--color-background-tertiary);
    border-color: var(--color-border);
}

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

/* ===== RESPONSIVE DESIGN ===== */

/* Responsive: Switch to cards on small screens */

@media (max-width: 768px) {
    .article-review-modal {
      width: 95vw;
      max-height: 95vh;
      margin: 1rem;
    }

    .modal-header,
    .modal-footer {
      padding: 1rem;
    }

    /* Stack columns vertically on mobile */
    .article-review-modal .modal-body {
    flex-direction: column;
    padding: 1rem;
  }

    .modal-content-column,
    .modal-labels-column {
    flex: 1 1 0%;
    padding: 0;
  }

    .modal-labels-column {
    border-left-width: 0px;
    border-top-width: 1px;
      padding-top: 1rem;
      border-color: var(--color-border);
  }

    .review-buttons {
    flex-direction: column;
      gap: 0.75rem;
  }

    .review-btn {
    width: 100%;
      min-width: auto;
  }

    .modal-actions {
    flex-direction: column-reverse;
  }

  .form-actions.review-btn {
    justify-content: center;
  }

    .review-btn {
    width: 100%;
    justify-content: center;
  }
  }

/* Animation for smooth transitions */

@keyframes modalSlideIn {
    from {
      transform: translateY(-20px) scale(0.95);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }

.article-review-modal-overlay.show .article-review-modal {
    animation: modalSlideIn 0.3s ease-out;
  }

/* ===== REVIEW SUBTABS ===== */

.review-subtab-btn.active {
    border-color: var(--color-border);
    border-bottom-color: var(--color-background);
    background: var(--color-background);
    color: var(--color-primary);
  }

.review-subtab-content.active {
  display: block;
}

.select-prompt {
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ===== TRANSITIONS & ANIMATIONS ===== */

/* Review panel transitions */

.review-panel.showing {
    opacity: 1;
    transform: translateY(0);
  }

/* Batch selector transitions */

.batch-selector-container.showing {
    opacity: 1;
    transform: translateY(0);
  }

/* ===== ARTICLE REVIEW CONTENT ===== */

/* Add left padding when inside batch review panel */

/* Profanity highlights - subtle red text with gentle highlight */

.content-text .profanity-highlight,
  .preview-text .profanity-highlight,
  .article-content-text .profanity-highlight {
  border-radius: 0.375rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
    color: var(--color-danger);
    background-color: var(--color-danger-50);
    font-weight: normal;
    border: none;
    box-shadow: none;
}

/* ===== BATCH REVIEW INTERFACE ===== */

/* Batch review tab needs specific height constraint */

#batch-review-tab {
  margin: 0;
  height: 100%;
  overflow: hidden;
  padding: 0;
    /* Calculate height: 100vh - header (60px) */
    height: calc(100vh - 60px);
}

/* Review panel must fill parent and constrain children */

#review-articles-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

/* Fullscreen body layout */

/* Review container - Panel-style layout with viewport constraints */

/* ===== PANEL HEADER ===== */

.form-actions.batch-panel-header {
    justify-content: space-between;
  }

.batch-panel-header {
  display: flex;
  height: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  padding-right: 0.5rem;
    background: var(--color-background-secondary);
    border-color: var(--color-border);
}

.form-actions.batch-nav-btn {
    justify-content: center;
  }

.batch-nav-btn {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: var(--color-gray-300);
  background-color: transparent;
  padding: 0.375rem;
  font-size: 0.875rem;
  line-height: 1;
    color: var(--color-text-primary);
    transition: var(--transition-all);
}

/* Arrow buttons (prev/next) - fixed square size */

.batch-nav-btn.article-nav-prev,
  .batch-nav-btn.article-nav-next {
  height: 2rem;
  width: 2rem;
}

/* Text buttons (first-unreviewed/next-unreviewed) - auto width with padding */

.batch-nav-btn.article-nav-first-unreviewed,
  .batch-nav-btn.article-nav-next-unreviewed {
  white-space: nowrap;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.8125rem;
    min-width: -moz-fit-content;
    min-width: fit-content;
}

.batch-nav-btn:hover:not(:disabled) {
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
  }

.batch-nav-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Article progress text - larger and prominent */

.article-progress-text {
  font-size: 1rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

/* Keyboard shortcuts display in header */

.help-shortcut-btn {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.25rem;
  border-width: 0px;
  background-color: transparent;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    color: var(--color-text-secondary);
}

.help-shortcut-btn:hover {
    color: var(--color-primary);
  }

.help-shortcut-btn kbd {
    transition: all 0.2s;
  }

.help-shortcut-btn:hover kbd {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

/* ===== PANEL BODY ===== */

.batch-panel-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
  }

/* Left column: Article content */

/* Article review area - container for content */

/* Article content container - THIS is the ONLY scrollable area */

/* Right column: Article list + classification panel */

/* ===== SAVE ACTIONS (Below Classification Panels) ===== */

.batch-save-actions {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 0.5rem;
  border-top-width: 1px;
  padding: 0.75rem;
    background: var(--color-background-secondary);
    border-color: var(--color-border);
}

.form-actions.batch-save-actions .btn-block {
    justify-content: center;
  }

.batch-save-actions .btn-block {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.batch-save-actions .btn kbd {
  margin-left: auto;
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

/* ===== ARTICLE LIST (Right Sidebar) ===== */

/* Classification panel section in sidebar */

.confidence {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
}

.prediction.nsfw {
    color: var(--color-danger);
  }

.prediction.safe {
    color: var(--color-success);
  }

/* Statistics toggle button (moved to footer) */

/* Empty state for no article selected */

/* Add left margin when inside batch content column */

.form-actions.loading-review {
    justify-content: center;
  }

.loading-review {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
    color: var(--color-text-secondary);
}

/* Add left margin when inside batch content column */

.batch-content-column .loading-review {
  margin-left: 0;
}

/* Review state indicators */

.review-status-badge.reviewed {
  border-width: 1px;
    background: var(--color-success-50);
    color: var(--color-success);
    border-color: var(--color-success);
}

.review-status-badge.pending {
  border-width: 1px;
    background: var(--color-warning-50);
    color: var(--color-warning-700);
    border-color: var(--color-warning);
}

/* Current review state display */

.current-label {
  border-radius: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.current-label.nsfw {
    background: var(--color-danger-50);
    color: var(--color-danger);
  }

.current-label.safe {
    background: var(--color-success-50);
    color: var(--color-success);
  }

/* Model Statistics Styling - Collapsible */

.sidebar-stats {
  border-top-width: 1px;
    background: var(--color-background);
    border-color: var(--color-border);
}

.form-actions.stats-toggle {
    justify-content: space-between;
  }

.stats-toggle {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  border-width: 0px;
  padding: 0.75rem;
  text-align: left;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: none;
    color: var(--color-text-primary);
}

.stats-toggle:hover {
    background: var(--color-neutral-50);
  }

.stats-toggle-icon {
    transition: transform 0.2s;
  }

.stats-toggle.collapsed .stats-toggle-icon {
    transform: rotate(-90deg);
  }

.model-statistics {
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
  border-radius: 0;
  border-width: 0px;
  padding: 0.75rem;
    background: var(--color-surface);
    box-shadow: none;
}

.model-statistics h3 {
  margin: 0;
  margin-bottom: 1rem;
  border-bottom-width: 2px;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.stat-section {
  margin-bottom: 0.75rem;
}

.stat-section:last-child {
  margin: 0;
}

.stat-section h4 {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
    color: var(--color-text-secondary);
}

.form-actions.stat-row {
    justify-content: space-between;
  }

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
    border-color: var(--color-border-light);
}

.stat-row:last-child {
  border-width: 0px;
}

.review-stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
    color: var(--color-text-secondary);
}

.review-stat-value {
  text-align: right;
  font-size: 0.8125rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

/* Classification Metadata Styling - SCOPED to .classification-metadata only */

.classification-metadata {
  margin-top: 0.75rem;
  border-top-width: 1px;
  padding-top: 0.75rem;
    border-color: var(--color-border-light);
}

.form-actions.classification-metadata .metadata-item {
    justify-content: space-between;
  }

.classification-metadata .metadata-item {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.classification-metadata .metadata-item:last-child {
  margin: 0;
}

.classification-metadata .metadata-label {
  font-size: 0.8125rem;
  font-weight: 500;
    color: var(--color-text-secondary);
}

.classification-metadata .metadata-value {
  font-size: 0.8125rem;
  font-weight: 600;
    /* color removed - inherits from metadata-compact.css with dark mode support */
    font-family: 'Courier New', monospace;
}

/* Article Content Scrollable Area - override base styles for batch review */

.article-content .content-text::-webkit-scrollbar {
  width: 0.375rem;
}

.article-content .content-text::-webkit-scrollbar-track {
  border-radius: 0.375rem;
    background: var(--color-border-light);
}

.article-content .content-text::-webkit-scrollbar-thumb {
  border-radius: 0.375rem;
    background: var(--color-border);
}

.article-content .content-text::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
  }

/* ========================================
     NEW COLOR SCHEME - THREE SYSTEMS
     ======================================== */

/* 1. CLASSIFICATION STATUS COLORS (What the content is) */

.nsfw {
    color: var(--color-warning) !important; /* Warning/attention state */
  }

.prediction.nsfw {
    color: var(--color-warning);
  }

.prediction.not-nsfw {
    color: var(--color-primary);
  }

.prediction-label.nsfw {
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
    background: var(--color-warning-50);
    color: var(--color-warning-700);
    border-color: var(--color-warning);
}

/* 2. AGREEMENT STATUS COLORS (Model vs Human) */

.agreement.agree {
    color: var(--color-success) !important; /* Agreement/harmony state */
  }

.agreement.disagree {
    color: var(--color-danger) !important; /* Conflict/disagreement state */
  }

/* 3. REVIEW PROGRESS COLORS (Workflow state) */

.article-indicator.reviewed {
    background: var(--color-primary); /* Completed/reviewed state */
  }

.article-indicator.nsfw {
    background: var(--color-warning); /* NSFW classification indicator */
  }

.article-indicator.unknown {
    background: var(--color-text-secondary); /* Pending/unknown state */
  }

/* Review status in article items */

.article-item.reviewed.nsfw {
  border-left-width: 4px;
    background: var(--color-warning-50); /* Warning state background */
    border-color: var(--color-warning);
}

.article-item.reviewed.not-nsfw {
  border-left-width: 4px;
    background: var(--color-primary-100); /* Safe state background */
    border-color: var(--color-primary);
}

.article-item.reviewed {
    background: var(--color-background-tertiary); /* Neutral completed */
  }

/* Current review labels */

.label.nsfw {
  border-radius: 0.25rem;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
    background: var(--color-warning-50);
    color: var(--color-warning-700);
    border-color: var(--color-warning);
}

.label.not-nsfw {
  border-radius: 0.25rem;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
    background: var(--color-primary-100);
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

/* Review Buttons Container - Vertical Stack */

.review-buttons {
  margin-bottom: 1rem;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.75rem;
}

/* Review Button with Keyboard Shortcuts */

.btn-icon {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
}

/* kbd styling inherited from keyboard.css - no override needed */

/* Article Actions Section */

/* Toggle Switch for Training Status */

/* Toast notifications - Removed duplicate styles, using toasts.css instead */

/* ===== CLASSIFICATION TYPE SELECTOR ===== */

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 1400px) {
    .article-sidebar {
      width: min(30vw, 400px);
    }
  }

@media (max-width: 1024px) {
    .article-sidebar {
      width: min(35vw, 350px);
      min-width: 280px;
    }

    .review-header .progress-bar {
    width: 200px;
  }

    .review-header .header-center {
    padding-left: 1rem;
    padding-right: 1rem;
  }

    .status-line {
    gap: 0.25rem;
  }

    .model-prediction,
    .human-status {
    flex-wrap: wrap;
  }
  }

@media (max-width: 768px) {
    .review-header {
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
      padding-left: 60px; /* Mobile spacing for hamburger menu */
  }

  .form-actions.review-header .header-left,.form-actions
    .review-header .header-center,.form-actions
    .review-header .header-right {
    justify-content: center;
  }

    .review-header .header-left,
    .review-header .header-center,
    .review-header .header-right {
    width: 100%;
    justify-content: center;
  }

    .review-header .header-left {
    justify-content: flex-start;
  }

    .article-sidebar {
      width: 280px;
      min-width: 250px;
    }

    .article-review-area {
    padding: 1rem;
  }

    .model-statistics {
    max-height: 200px;
  }

    .prediction-info {
    flex-wrap: wrap;
  }

    .label-source {
      min-width: 30px;
    }

    .model-statistics {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
  }

    .stat-row {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

    .review-stat-label,
    .review-stat-value {
    font-size: 0.75rem;
  }

    .classification-metadata {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }

    .classification-metadata .metadata-item {
    margin-bottom: 0.25rem;
  }

    .classification-metadata .metadata-label,
    .classification-metadata .metadata-value {
    font-size: 0.75rem;
  }

    .review-btn-with-shortcut {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  }

/* ===== LOADING SKELETON ===== */

/* Smooth loading state while data pre-loads before slide animation */

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

/* Loading overlay covers the entire review container */

/* Error state */

/* ===== KEYBOARD NAVIGATION HINTS ===== */

/* Panel jump indicators (Ctrl+1-9) */

.classification-panel.active .panel-jump-indicator {
  opacity: 1;
}

/* Hide classification button indicators when panel is not active */

.classification-panel:not(.active) .hotkey-indicator {
  opacity: 0.3;
}

.classification-panel.active .hotkey-indicator {
  opacity: 1;
}

/* ===== KEYBOARD NAVIGATION HELPER ===== */

.shortcut-group.help {
    opacity: 1 !important; /* Always visible */
  }

/* Split View Layout */

.batches-container.batches-split-view {
  display: flex;
  height: 100%;
}

/* Left Sidebar (Batch List) */

.batches-list-sidebar {
  padding: 1rem;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    width: 384px; /* w-96 equivalent */
    min-width: 384px;
    max-width: 384px;
    opacity: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: max-width 300ms ease-in-out, min-width 300ms ease-in-out, opacity 300ms ease-in-out, padding 300ms ease-in-out;
}

/* Hide batch list when review panel is active (user wants max space for article content) */

.batches-container:has(.batch-review-slide-panel.active) .batches-list-sidebar {
    max-width: 0;
    min-width: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    border-right-width: 0;
  }

/* Right Container: Holds both grids view and slide panel */

.batches-right-container {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
    overflow: hidden; /* Prevent horizontal scrollbar during slide */
    transition: margin-left 300ms ease-in-out;
    height: 100%;
}

/* Right Main Panel (Batch Grids) - kept for backward compatibility with slide panel */

/* Grids view fading out */

.batches-grids-main.fade-out {
    opacity: 0;
    pointer-events: none;
  }

/* Batch Grids Header */

.batches-grids-header {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.batches-grids-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

/* Select Prompt (Empty State) */

.form-actions.select-prompt {
    justify-content: center;
  }

.select-prompt {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1rem;
    color: var(--color-text-muted);
}

/* Loading and Error States */

.form-actions.batches-right-container .batch-list-loading,.form-actions
  .batches-right-container .error {
    justify-content: center;
  }

.batches-right-container .batch-list-loading,
  .batches-right-container .error {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
    color: var(--color-text-secondary);
}

.batches-right-container .error {
    color: var(--color-danger);
  }

/* Batch Review Panel - Fade transition */

/* Review panel visible */

.batch-review-slide-panel.active {
    opacity: 1;
    pointer-events: auto;
  }

/* Review panel takes full height */

/* Responsive: Stack on smaller screens */

@media (max-width: 1024px) {
    .batches-split-view {
    flex-direction: column;
  }

    .batches-list-sidebar {
    max-height: 24rem;
    width: 100%;
      border-right: none;
      border-bottom: 1px solid var(--color-border);
  }
  }

/* Batch Info Modal (Hover) */

/* Add cursor hint on batch header */

.batch-compact-header {
    cursor: help;
  }

/* ========================================
     DEBUG PANEL STYLES
     ======================================== */

/* Debug Toggle Button in Header */

.form-actions.debug-toggle-btn {
    justify-content: center;
  }

.debug-toggle-btn {
  margin-left: 0.75rem;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0.5rem;
  border-width: 1px;
    background: var(--color-surface);
    border-color: var(--color-border);
    border-width: var(--border-width);
    font-size: 1.25rem;
    transition: var(--transition-all);
}

.debug-toggle-btn:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    transform: scale(1.05);
  }

.debug-toggle-btn:active {
    transform: scale(0.95);
  }

/* Debug Panel Container */

.debug-panel {
  position: fixed;
  top: 0;
  display: flex;
  height: 100vh;
  width: 600px;
  flex-direction: column;
  border-left-width: 1px;
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    right: -650px;
    background: var(--color-surface);
    border-color: var(--color-border);
    border-width: var(--border-width);
    z-index: var(--z-index-modal);
    transition: right 0.3s ease;
}

.debug-panel.open {
  right: 0;
}

/* Debug Panel Header */

.form-actions.debug-panel-header {
    justify-content: space-between;
  }

.debug-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  padding: 1rem;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary-dark);
    border-width: var(--border-width);
}

.debug-panel-header h3 {
  margin: 0;
  font-weight: 600;
    font-size: var(--font-size-lg);
}

.debug-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-actions.debug-action-btn {
    justify-content: center;
  }

.debug-action-btn {
  display: flex;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.3);
    border-width: var(--border-width);
    font-size: var(--font-size-sm);
    transition: var(--transition-all);
}

.debug-action-btn:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
  }

.debug-auto-refresh {
  display: flex;
  cursor: pointer;
  align-items: center;
  font-size: 0.8125rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  gap: 0.25rem;
}

.debug-auto-refresh input[type='checkbox'] {
  cursor: pointer;
}

/* Debug Panel Tabs */

.debug-panel-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom-width: 1px;
    background: var(--color-background-alt);
    border-color: var(--color-border);
    border-width: var(--border-width);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.debug-tab-btn {
  cursor: pointer;
  border-bottom-width: 2px;
  border-style: none;
  border-color: transparent;
  background-color: transparent;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
    color: var(--color-text-secondary);
    transition: var(--transition-colors);
}

.debug-tab-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-hover);
  }

.debug-tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: var(--color-surface);
  }

/* Debug Panel Content */

.debug-panel-content {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 1rem;
}

.debug-tab-content.active {
  display: block;
}

.debug-section {
  margin-bottom: 1.5rem;
}

.debug-section h4 {
  margin: 0;
  border-bottom-width: 1px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
    color: var(--color-text-primary);
    border-color: var(--color-border);
    border-width: var(--border-width);
    padding-bottom: 0.5rem;
}

.debug-section h5 {
  font-size: 0.8125rem;
  font-weight: 500;
    margin: 0.75rem 0 0.5rem 0;
    color: var(--color-text-secondary);
}

.debug-content-area {
  border-radius: 0.5rem;
  border-width: 1px;
  padding: 0.75rem;
  font-size: 0.8125rem;
    background: var(--color-background-alt);
    border-color: var(--color-border);
    border-width: var(--border-width);
}

/* Key-Value Pairs */

.form-actions.debug-kv {
    justify-content: space-between;
  }

.debug-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 1px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
    border-color: var(--color-border-light);
    border-width: var(--border-width);
}

.debug-kv:last-child {
  border-style: none;
}

.debug-key {
  font-weight: 500;
    color: var(--color-text-secondary);
}

.debug-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: var(--color-text-primary);
}

.debug-badge {
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.debug-badge.healthy {
    background: var(--color-success-light);
    color: var(--color-success-dark);
  }

.debug-badge.degraded {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
  }

.debug-badge.unhealthy {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
  }

/* Model and Session Lists */

.debug-model-list,
  .debug-session-list {
  margin-top: 0.75rem;
}

.debug-model-item,
  .debug-session-item {
  border-radius: 0.25rem;
  border-width: 1px;
  padding: 0.5rem;
  font-size: 0.75rem;
    background: var(--color-surface);
    border-color: var(--color-border-light);
    border-width: var(--border-width);
    margin-bottom: 0.5rem;
}

/* Endpoint Styles */

.debug-endpoint-group {
  margin-bottom: 1rem;
}

.debug-endpoint-group h5 {
  font-weight: 600;
  margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.debug-endpoint-list {
  margin: 0;
  list-style-type: none;
  padding: 0;
}

.debug-endpoint-list li {
  display: flex;
  align-items: center;
  border-radius: 0.25rem;
  border-width: 1px;
  padding: 0.5rem;
  font-size: 0.75rem;
  gap: 0.5rem;
    background: var(--color-surface);
    border-color: var(--color-border-light);
    border-width: var(--border-width);
    margin-bottom: 0.25rem;
}

.debug-method {
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.debug-method.GET {
    background: var(--color-info-light);
    color: var(--color-info-dark);
  }

.debug-method.POST {
    background: var(--color-success-light);
    color: var(--color-success-dark);
  }

.debug-method.PUT {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
  }

.debug-method.DELETE {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
  }

/* Endpoint Tester */

.debug-endpoint-tester {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.debug-input,
  .debug-select {
  border-radius: 0.25rem;
  border-width: 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
    height: var(--form-element-height);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background: var(--color-surface);
    border-color: var(--color-border);
    border-width: var(--border-width);
    transition: var(--transition-colors);
}

.debug-input {
  flex: 1 1 0%;
}

.debug-input:focus,
  .debug-select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.debug-select {
  min-width: 100px;
}

.debug-btn {
  cursor: pointer;
  border-radius: 0.25rem;
  border-style: none;
  font-size: 0.8125rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    height: var(--form-element-height);
    padding-left: 1rem;
    padding-right: 1rem;
    background: var(--color-primary);
    transition: var(--transition-all);
}

.debug-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

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

.debug-test-result {
    animation: fadeIn 0.3s ease;
  }

/* Activity Lists */

.debug-activity-list {
  margin: 0;
  list-style-type: none;
  padding: 0;
}

.debug-activity-list li {
  border-radius: 0.25rem;
  border-width: 1px;
  padding: 0.75rem;
    background: var(--color-surface);
    border-color: var(--color-border-light);
    border-width: var(--border-width);
    margin-bottom: 0.5rem;
}

.debug-activity-list li strong {
    color: var(--color-text-primary);
  }

.debug-activity-list li small {
  font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* JSON Viewer */

.debug-json-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.debug-json-viewer {
  overflow-x: auto;
  border-radius: 0.5rem;
  border-width: 1px;
  padding: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  max-height: 70vh;
    background: var(--color-gray-900);
    color: var(--color-gray-100);
    border-color: var(--color-border);
    border-width: var(--border-width);
    line-height: var(--line-height-relaxed);
}

/* Debug Panel Footer */

.form-actions.debug-panel-footer {
    justify-content: space-between;
  }

.debug-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-width: 1px;
  font-size: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
    background: var(--color-background-alt);
    border-color: var(--color-border);
    border-width: var(--border-width);
    color: var(--color-text-secondary);
}

.debug-timestamp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.debug-hint {
    color: var(--color-text-muted);
  }

/* Loading and Error States */

.debug-loading {
  padding: 1rem;
  text-align: center;
  font-style: italic;
    color: var(--color-text-muted);
}

.debug-error {
  border-radius: 0.25rem;
  padding: 0.5rem;
    color: var(--color-danger);
    background: var(--color-danger-light);
}

/* Toast Notifications */

.debug-toast {
  position: fixed;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0;
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 10px 10px -5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  bottom: 1rem;
  right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
    background: var(--color-gray-900);
    color: var(--color-text-inverse);
    z-index: var(--z-index-toast);
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.debug-toast.show {
  opacity: 1;
    transform: translateY(0);
}

/* Animations */

@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

/* Responsive */

@media (max-width: 768px) {
    .debug-panel {
    width: 100%;
      right: -100%;
  }

    .debug-panel-tabs {
    overflow-x: auto;
  }

    .debug-tab-btn {
    font-size: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

    .debug-json-viewer {
    max-height: 50vh;
  }
  }

.form-actions.error-analysis-modal {
    justify-content: center;
  }

.error-analysis-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 2rem;
    background-color: rgba(0, 0, 0, 0.7);
}

.error-analysis-modal .modal-content {
  width: 100%;
}

.error-analysis-modal .close-modal-btn {
  font-size: 2.25rem;
}

/* Analysis Summary */

.analysis-summary {
  margin-bottom: 2rem;
}

.analysis-summary h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

.summary-stats {
  margin-bottom: 1.5rem;
  display: grid;
  gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.stat-item {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border-width: 1px;
  padding: 1rem;
  gap: 0.5rem;
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

.error-stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
    color: var(--color-text-secondary);
}

.error-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
    color: var(--color-text-primary);
}

/* Improvement Suggestions */

.improvement-suggestions {
  margin-bottom: 2rem;
}

.improvement-suggestions h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

.suggestions-list {
  margin: 0;
  list-style-type: none;
  padding: 0;
}

.suggestion-item {
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  border-width: 1px;
  border-left-width: 4px;
  padding: 1rem;
    background-color: var(--color-surface);
    border-color: var(--color-border-light);
    border-left-color: var(--color-primary);
}

.suggestion-item.priority-high {
    border-left-color: var(--color-danger);
    background-color: var(--color-danger-50);
  }

.suggestion-item.priority-medium {
    border-left-color: var(--color-warning);
    background-color: var(--color-warning-50);
  }

.suggestion-item.priority-low {
    border-left-color: var(--color-success);
    background-color: var(--color-success-50);
  }

.suggestion-header {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.priority-badge {
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
    background-color: var(--color-gray-200);
    color: var(--color-text-primary);
}

.suggestion-description {
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
    color: var(--color-text-secondary);
}

.suggestion-category {
  font-size: 0.8125rem;
  font-style: italic;
    color: var(--color-text-muted);
}

/* Error Patterns */

.error-patterns {
  margin-bottom: 2rem;
}

.error-patterns h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

/* ===== MODEL COMPONENTS ===== */

/* Enhanced Model Card Component */

.model-card {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.75rem;
  border-width: 1px;
  padding: 0.75rem;
    background: var(--color-background);
    border-color: var(--color-border);
    transition: all var(--transition-base);
}

.model-card:hover {
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-color: var(--color-primary-light);
    transform: translateY(-1px);
}

.model-card.clickable:hover {
  cursor: pointer;
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-color: var(--color-primary);
}

.model-card.current-model {
    background: var(--color-background-secondary);
    border-color: var(--color-primary);
  }

.model-card.current-model::before {
  position: absolute;
  top: 0;
  left: 0;
    content: '';
    width: 4px;
    height: 100%;
    background: var(--color-primary);
}

.model-card.selected {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-color: var(--color-primary);
    background: var(--color-primary-50);
}

.form-actions.model-card.selected::after {
    justify-content: center;
  }

.model-card.selected::after {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    content: '✓';
    top: 0.5rem;
    right: 0.5rem;
    background: var(--color-primary);
    width: 20px;
    height: 20px;
}

/* Model Metrics */

.metric {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
    min-width: 80px;
}

.metric-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
}

.metric-value {
  font-size: 1rem;
  font-weight: 700;
    color: var(--color-text-primary);
}

/* Training Data Display */

.data-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
}

/* Training Config Summary Display */

.training-config-summary .config-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
    letter-spacing: 0.5px;
}

/* Model Comparison Controls */

.model-comparison-controls {
  border-radius: 0.375rem;
  border-width: 1px;
    background: var(--color-background-secondary);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-color: var(--color-border);
}

.selection-info {
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

.model-comparison-controls .btn {
  margin-right: 0.5rem;
}

/* Retrain Page Layout */

.models-summary {
  border-radius: 0.375rem;
  font-size: 0.8125rem;
    background: var(--color-background-secondary);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    color: var(--color-text-secondary);
}

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

.models-list > * {
  width: 100%;
}

.card.compact {
  padding: 0.75rem;
}

.card.compact h2,
  .card.compact h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

/* Dataset Statistics */

.dataset-stats-summary {
  text-align: center;
  padding: 0.75rem;
}

.stats-info {
  margin: 0;
  font-weight: 500;
  margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

.stats-error {
  margin: 0;
  text-align: center;
  font-style: italic;
    color: var(--color-error);
    padding: 0.75rem;
}

/* Models Summary */

.current-indicator {
  font-weight: 500;
    color: var(--color-success);
}

/* Model Comparison Modal */

/* Metrics Comparison Table */

.metric-comparison-row .metric-label {
  font-weight: 500;
    flex: 2;
}

/* Performance Indicators */

.performance-indicator.good {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
  }

/* Model Technical Details */

/* Alert Components - Model Comparison Specific */

.comparison-alert {
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.comparison-alert-success {
    background: var(--color-success-light);
    border-color: var(--color-success);
    color: var(--color-success-dark);
  }

.comparison-alert-error {
    background: var(--color-error-light);
    border-color: var(--color-error);
    color: var(--color-error-dark);
  }

.alert h3 {
  margin: 0;
  margin-bottom: 0.5rem;
}

/* Training Progress */

.training-progress {
  text-align: center;
  font-size: 1rem;
    color: var(--color-text-primary);
    padding: 1.5rem;
}

/* Post-training Actions */

.form-actions.post-training-actions {
    justify-content: center;
  }

.post-training-actions {
  display: flex;
  justify-content: center;
  border-top-width: 1px;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
    border-color: var(--color-border);
}

/* Temporary Message */

.temp-message {
    animation: slideInRight 0.3s ease-out;
  }

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

/* ===== CONFIG CELL STYLING ===== */

.config-cell {
  text-align: center;
  vertical-align: middle;
}

.form-actions.config-badges {
    justify-content: center;
  }

.config-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.config-badge {
  display: inline-block;
  white-space: nowrap;
  border-radius: 0.25rem;
  border-width: 1px;
  font-weight: 500;
    padding: 0.15rem 0.4rem;
    background: var(--color-primary-50);
    border-color: var(--color-primary-200);
    font-size: 0.7rem;
    font-family: 'Courier New', monospace;
}

.ngram-badge {
    background: var(--color-primary-50);
    border-color: var(--color-primary-light);
    color: var(--color-primary-dark);
  }

.features-badge {
    background: var(--color-info-light);
    border-color: var(--color-info);
    color: var(--color-info-dark);
  }

.c-badge {
    background: var(--color-warning-50);
    border-color: var(--color-warning);
    color: var(--color-warning-dark);
  }

.btn-icon {
  cursor: pointer;
  border-width: 0px;
    background: none;
    font-size: 1.2rem;
    padding: 0.25rem;
    transition: transform 0.2s;
}

.btn-icon:hover {
    transform: scale(1.2);
  }

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 480px) {
    .model-card {
    padding: 0.75rem;
  }

    .model-card-header {
    flex-direction: column;
    gap: 0.5rem;
  }

    .model-badges {
    flex-direction: row;
    align-items: flex-start;
  }
  }

/* Container Layout */

/* Redesigned Layout - Two Column with Left Sidebar (DEPRECATED - kept for backwards compatibility) */

/* Single Column Layout - Simplified (DEPRECATED) */

/* Two Column Layout - Presets Left, Form Right */

/* Create Batch Sidebar - Compact Card Style (DEPRECATED) */

.create-batch-sidebar {
  border-radius: 0.75rem;
  border-width: 1px;
    background: var(--color-surface);
    padding: 1rem;
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
    height: -moz-fit-content;
    height: fit-content;
}

/* Create Batch Main - Full Width Form */

/* Pipeline Main Content */

/* Pipeline Statistics - Compact Cards */

/* Batch History Section */

.batch-header-actions {
  display: flex;
  gap: 0.5rem;
}

/* Selection Bar */

.selection-count {
  font-size: 0.8125rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

/* Batch List */

.form-actions.batch-list-main .empty-state,.form-actions
  .batch-list-main .error-state,.form-actions
  .batch-list-main .loading {
    justify-content: center;
  }

.batch-list-main .empty-state,
  .batch-list-main .error-state,
  .batch-list-main .loading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
    min-height: 250px;
    color: var(--color-text-secondary);
}

/* Batch Form Styles - Ultra Compact */

/* Form Two-Column Grid */

/* Form Field */

.batch-form-field label .required {
    color: var(--color-danger);
  }

/* Form Inputs - More contrast */

/* Section Divider */

/* Form Actions */

/* Compact Form - Two Column Layout */

/* Dynamic params grid (auto-flow two columns) */

.form-params-grid {
  display: grid;
  gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

/* Full-width form groups (textareas, sliders, checkboxes) */

.form-group-full {
    grid-column: 1 / -1;
  }

/* Full-width form sections (headers, info notes) */

/* Section titles for params */

.params-section-title {
  margin-bottom: 0.75rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
    color: var(--color-text-primary);
    grid-column: 1 / -1;
}

.params-section-title:first-child {
  margin-top: 0;
}

/* Checkbox styling - left-aligned */

.batch-form .form-group-checkbox {
  display: flex;
  align-items: center;
    justify-content: flex-start; /* Left-align, not center */
}

.batch-form .checkbox-label {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.batch-form .checkbox-label input[type="checkbox"] {
  cursor: pointer;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.batch-form .checkbox-label span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
    color: var(--color-text-secondary);
    letter-spacing: 0.025em;
}

.batch-form input[type="number"],
  .batch-form input[type="text"],
  .batch-form input[type="date"],
  .batch-form select,
  .batch-form textarea {
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  font-size: 0.8125rem;
    height: var(--form-element-height);
    padding: 0 var(--form-element-padding-x);
    border-color: var(--color-border);
    background: var(--color-background);
    color: var(--color-text-primary);
    transition: var(--transition-colors);
}

.batch-form textarea {
  resize: vertical;
    height: auto;
    min-height: 4rem;
    padding: 0.5rem;
}

.batch-form input:focus,
  .batch-form select:focus,
  .batch-form textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Strategy Parameters Section */

.strategy-params-compact .form-group:first-of-type {
  margin-top: 0.5rem;
}

/* Form Actions Compact */

.form-actions-compact .btn {
  flex: 1 1 0%;
}

/* ===== BATCH CARDS ===== */

.batch-card {
  display: grid;
  border-radius: 0.75rem;
  border-width: 1px;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    background: var(--color-surface);
    border-color: var(--color-border);
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-all);
}

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

/* Batch Content */

/* Batch Info Grid */

/* Progress Bar */

/* Batch Status */

/* Batch Actions Column */

/* Specific Button Variants */

/* ===== COMPACT BATCH CARDS ===== */

.batch-card-compact {
  display: flex;
  flex-direction: column;
  border-radius: 0.375rem;
  border-width: 1px;
  gap: 0.75rem;
  min-height: 0;
  flex: 1 1 0%;
  overflow-y: auto;
    background: var(--color-surface);
    border-color: var(--color-border);
    padding: 1rem;
    transition: var(--transition-all);
}

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

.batch-compact-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* User assignment badge - prominent display with icon */

/* Strategy Details Section */

/* Stats Row */

.batch-stat .stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
    color: var(--color-text-secondary);
    letter-spacing: 0.025em;
}

.batch-stat .stat-value {
  font-size: 0.8125rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

.batch-compact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Coverage Grid - Maximized space for visualizations */

/* Classification Group - Contains header + source rows */

/* Classification Header with dynamic color-coding via CSS variables */

/* Classification Group uses CSS variables injected from TypeScript */

/* Source Row - Horizontal layout: metadata | article boxes */

/* Source Metadata Cell - Fixed width for grid alignment */

.source-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
    color: var(--color-text-secondary);
    letter-spacing: 0.025em;
    flex-shrink: 0;
}

/* Source Metadata - Simple sequence of elements with linebreaks between them */

/* Individual metadata column widths */

.coverage-metadata-inline.loading {
    opacity: 0.5;
  }

/* Simplified Metadata Layout - Stacked Flexbox Rows */

/* Source Label (M:/H:/A:) */

/* Classification label (SAFE/NSFW/etc) */

/* Confidence percentage */

/* Author/Model version */

/* Timestamp */

/* Empty placeholder states - simplified */

/* Use data attributes for confidence styling */

/* Article Info Display (persistent section) */

/* Coverage Grid Container - Maximized horizontal space for article grid */

/* Mini Pie Chart - Hidden in new layout (redundant with metadata) */

/* Compact button variants use same colors as full buttons */

/* ===== PRESET WORKFLOWS SECTION ===== */

/* Compact Preset Workflows (Redesigned Layout) */

/* Overview Card */

.preset-workflows-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.preset-loading {
  text-align: center;
  font-size: 0.8125rem;
  padding: 1.5rem;
    color: var(--color-text-secondary);
}

/* Preset Workflow Card - Badge-like horizontal layout */

.preset-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 0.375rem;
  border-width: 1px;
    background: var(--color-background);
    border-color: var(--color-border);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.8125rem;
    min-height: 42px;
    transition: all 0.2s ease;
}

.preset-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
    content: '';
    width: 3px;
    transition: all 0.2s ease;
}

.preset-card:hover {
    background: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateX(2px);
  }

.preset-card:active {
    transform: translateX(0);
  }

/* Card elements */

.preset-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
  }

.preset-name {
  flex-shrink: 0;
  font-weight: 600;
    color: var(--color-text-primary);
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preset-strategy {
  border-radius: 0.375rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
    font-family: var(--font-family-mono);
    color: var(--color-text-inverse);
    flex-shrink: 0;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preset-batch-size {
  font-size: 0.75rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}

.preset-arrow {
  margin-left: auto;
  font-size: 0.875rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.preset-card:hover .preset-arrow {
    transform: translateX(4px);
    color: var(--color-primary);
  }

/* Preset Groups */

.preset-group {
  margin-bottom: 1.25rem;
}

.preset-group:last-child {
  margin: 0;
}

.preset-group-header {
  border-bottom-width: 1px;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
    border-color: var(--color-border);
}

.preset-group-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

/* QA Workflows - Blue theme */

.preset-card.qa-workflow::before {
    background: var(--color-primary);
  }

.preset-card.qa-workflow:hover::before {
    width: 4px;
  }

.preset-card.qa-workflow .preset-strategy {
    background: var(--color-primary);
  }

.preset-card.qa-workflow:hover .preset-strategy {
    background: var(--color-primary-dark);
  }

/* Training Workflows - Green theme */

.preset-card.training-workflow::before {
    background: var(--color-success);
  }

.preset-card.training-workflow:hover::before {
    width: 4px;
  }

.preset-card.training-workflow .preset-strategy {
    background: var(--color-success);
  }

.preset-card.training-workflow:hover .preset-strategy {
    background: var(--color-success-dark);
  }

/* ===== ENHANCED QUERY FORM ===== */

/* Date Range Presets */

.pipeline-preset-btn.active {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Confidence Range */

/* Disabled Preset Styles */

.preset-card.preset-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-gray-50);
    pointer-events: auto;
  }

.preset-card.preset-disabled:hover {
    background: var(--color-gray-50);
    border-color: var(--color-border);
    box-shadow: none;
    transform: none;
  }

.preset-card.preset-disabled .preset-name {
    color: var(--color-text-secondary);
  }

.preset-card.preset-disabled .preset-arrow {
    display: none;
  }

.preset-card.preset-disabled::before {
    background: var(--color-gray-400) !important;
  }

.preset-status {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0.375rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
    color: var(--color-text-secondary);
    background: var(--color-gray-200);
    letter-spacing: 0.05em;
}

/* Batch Creation Progress Section (Placeholder) */

/* Main Container - Split View Layout */

.queues-container {
  display: flex;
  height: 100%;
}

/* Left Sidebar - Queue List */

.queues-sidebar {
  display: flex;
  flex-direction: column;
  padding: 1rem;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    width: 384px;
    min-width: 384px;
    max-width: 384px;
    height: 100%;
    overflow: hidden;
}

.form-actions.queues-sidebar-header {
    justify-content: space-between;
  }

.queues-sidebar-header {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.queues-sidebar-header h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

.queues-list {
  flex: 1 1 0%;
  overflow-y: auto;
}

.form-actions.queues-loading,.form-actions
  .queues-error,.form-actions
  .queues-empty {
    justify-content: center;
  }

.queues-loading,
  .queues-error,
  .queues-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
    color: var(--color-text-secondary);
}

.queues-error {
    color: var(--color-danger);
  }

/* Queue Card */

.queue-card {
  margin-bottom: 0.5rem;
  cursor: pointer;
  border-radius: 0.75rem;
  padding: 0.75rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    transition: border-color 0.15s, box-shadow 0.15s;
}

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

.queue-card.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
  }

.form-actions.queue-card-header {
    justify-content: space-between;
  }

.queue-card-header {
  margin-bottom: 0.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.queue-name {
  font-size: 0.8125rem;
  font-weight: 500;
    color: var(--color-text-primary);
}

.queue-card-meta {
  margin-bottom: 0.5rem;
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
    color: var(--color-text-muted);
}

.queue-strategy {
  border-radius: 0.375rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
    background: var(--color-surface);
}

.queue-cycle {
  border-radius: 0.375rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
    background: var(--color-surface);
}

/* Queue Progress Bar */

.queue-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.queue-progress-bar {
  height: 0.375rem;
  flex: 1 1 0%;
  overflow: hidden;
  border-radius: 9999px;
    background: var(--color-border);
}

.queue-progress-fill {
  height: 100%;
  border-radius: 9999px;
    background: var(--color-success);
    transition: width 0.3s ease;
}

.queue-progress-text {
  font-size: 0.75rem;
    color: var(--color-text-muted);
    min-width: 80px;
    text-align: right;
}

/* Status Badges */

.queue-status-badge {
  border-radius: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
    text-transform: capitalize;
}

.queue-status-active {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
  }

.queue-status-completed {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-info);
  }

.queue-status-paused {
    background: rgba(234, 179, 8, 0.1);
    color: var(--color-warning);
  }

.queue-status-archived {
    background: rgba(107, 114, 128, 0.1);
    color: var(--color-text-muted);
  }

/* Right Panel - Queue Details */

.queues-main {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  overflow: hidden;
    background: var(--color-background);
}

.form-actions.queues-select-prompt {
    justify-content: center;
  }

.queues-select-prompt {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
    color: var(--color-text-muted);
}

.queues-select-prompt p {
  margin: 0.25rem;
}

/* Queue Detail Header */

.form-actions.queue-detail-header {
    justify-content: space-between;
  }

.queue-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.queue-detail-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.queue-detail-title h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

.queue-detail-actions {
  display: flex;
  gap: 0.5rem;
}

/* Queue Detail Info */

.queue-detail-info {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.queue-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.queue-info-item {
  display: flex;
  flex-direction: column;
}

.queue-info-label {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
    color: var(--color-text-muted);
}

.queue-info-value {
  font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.queue-description {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  font-size: 0.8125rem;
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
}

/* Queue Items List */

.queue-items-container {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  overflow: hidden;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.queue-items-container h3 {
  margin: 0;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

.queue-items-loading,
  .queue-items-empty {
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
    color: var(--color-text-muted);
}

.queue-items-list {
  flex: 1 1 0%;
  overflow-y: auto;
}

/* Queue Item */

.queue-item {
  margin-bottom: 0.5rem;
  cursor: pointer;
  border-radius: 0.75rem;
  padding: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: border-color 0.15s, transform 0.1s;
}

.queue-item:hover {
    border-color: var(--color-primary);
    transform: translateX(2px);
  }

.queue-item-reviewed {
    opacity: 0.7;
    background: rgba(34, 197, 94, 0.05);
  }

.queue-item-skipped {
    opacity: 0.6;
    background: rgba(107, 114, 128, 0.05);
  }

.queue-item-in-progress {
    border-left: 3px solid var(--color-warning);
  }

.form-actions.queue-item-header {
    justify-content: space-between;
  }

.queue-item-header {
  margin-bottom: 0.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.queue-item-title {
  font-size: 0.8125rem;
  font-weight: 500;
    color: var(--color-text-primary);
}

.queue-item-status {
  border-radius: 0.375rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
    background: var(--color-background);
    color: var(--color-text-muted);
    text-transform: capitalize;
}

.queue-item-meta {
  margin-bottom: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
    color: var(--color-text-muted);
}

.queue-item-domain {
    color: var(--color-primary);
  }

.queue-item-reason {
  border-radius: 0.375rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
    background: var(--color-background);
}

.queue-item-confidence {
  border-radius: 0.375rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-weight: 500;
}

.queue-confidence-high {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
  }

.queue-confidence-medium {
    background: rgba(234, 179, 8, 0.1);
    color: var(--color-warning);
  }

.queue-confidence-low {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
  }

.queue-confidence-unknown {
    background: var(--color-surface);
    color: var(--color-text-muted);
  }

.queue-item-prediction {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
}

.prediction-positive,
  .label-positive {
    color: var(--color-danger);
  }

.prediction-negative,
  .label-negative {
    color: var(--color-success);
  }

/* Generate Queue Modal */

.form-actions.queue-modal-overlay {
    justify-content: center;
  }

.queue-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}

.queue-modal {
  width: 100%;
  max-width: 32rem;
  border-radius: 0.75rem;
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 10px 10px -5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.form-actions.queue-modal-header {
    justify-content: space-between;
  }

.queue-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.queue-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

.queue-modal-close {
  border-radius: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 1.25rem;
  line-height: 1;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s;
}

.queue-modal-close:hover {
    background: var(--color-background);
    color: var(--color-text-primary);
  }

.queue-modal-body {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.queue-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
    border-top: 1px solid var(--color-border);
}

/* Candidate Counts */

.queue-candidates-info {
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  padding: 1rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
}

.queue-candidates-info h4 {
  margin: 0;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
    color: var(--color-text-secondary);
}

.queue-candidates-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.queue-candidate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.candidate-count {
  font-size: 1.25rem;
  font-weight: 700;
    color: var(--color-primary);
}

.candidate-label {
  font-size: 0.75rem;
    color: var(--color-text-muted);
}

.queue-candidates-loading,
  .queue-candidates-error {
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Form Fields */

.queue-form-field {
  margin-bottom: 1rem;
}

.queue-form-field label {
  margin-bottom: 0.25rem;
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
    color: var(--color-text-secondary);
}

.queue-form-field input,
  .queue-form-field select {
  width: 100%;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.queue-form-field input:focus,
  .queue-form-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
  }

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

/* Responsive */

@media (max-width: 1024px) {
    .queues-container {
    flex-direction: column;
  }

    .queues-sidebar {
    max-height: 16rem;
    width: 100%;
      min-width: 100%;
      max-width: 100%;
      border-right: none;
      border-bottom: 1px solid var(--color-border);
  }

    .queue-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  }

/* ===== MODELS TABLE ===== */

.models-table {
  width: 100%;
  font-size: 0.8125rem;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-surface);
    overflow: hidden;
    border-radius: 0.75rem;
    border-width: 1px;
    border-color: var(--color-border);
}

.models-table th,
  .models-table td {
  border-bottom-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
    border-color: var(--color-border);
}

.models-table thead th {
  position: sticky;
  top: 0;
  font-weight: 600;
    background: var(--color-background-tertiary);
    color: var(--color-text-primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.models-table tbody tr {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: var(--color-surface);
}

.models-table tbody tr:hover {
    background: var(--color-surface-hover);
  }

.models-table tbody tr:last-child td {
  border-width: 0px;
}

/* Metric column grouping - Test Set (cyan) */

.models-table th.test-metric {
    background: var(--color-info-light);
    color: var(--color-info-dark);
  }

/* Metric column grouping - Train Set (green) */

.models-table th.train-metric {
    background: var(--color-success-light);
    color: var(--color-success-dark);
  }

/* Subtle cell backgrounds for metric columns */

.models-table td.test-metric {
    background: rgba(6, 182, 212, 0.03); /* Very subtle cyan */
  }

.models-table td.train-metric {
    background: rgba(16, 185, 129, 0.03); /* Very subtle green */
  }

/* Hover state enhances the subtle backgrounds */

.models-table tbody tr:hover td.test-metric {
    background: rgba(6, 182, 212, 0.08);
  }

.models-table tbody tr:hover td.train-metric {
    background: rgba(16, 185, 129, 0.08);
  }

/* Group headers for test/train metrics */

.models-table th.group-header {
  text-align: center;
  font-weight: 700;
  border-left-width: 1px;
  border-right-width: 1px;
    border-color: var(--color-border-hover);
}

.models-table th.group-header.data-group {
    background: var(--color-background-tertiary);
    color: var(--color-text-primary);
  }

.models-table th.group-header.train-group {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
  }

.models-table th.group-header.validation-group {
    background: var(--color-info-light);
    color: var(--color-info-dark);
  }

.models-table th.group-header.holdout-group {
    background: var(--color-success-light);
    color: var(--color-success-dark);
  }

/* Sub-headers */

.models-table th.sub-header {
  font-size: 0.75rem;
  font-weight: 500;
    background: var(--color-background-secondary);
    color: var(--color-text-secondary);
}

.models-table th.data-header {
    background: var(--color-background-tertiary);
  }

.models-table th.perf-header {
    background: var(--color-background-secondary);
  }

/* NSFW metric columns */

.models-table th.nsfw-metric {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
  }

.models-table td.nsfw-metric {
    background: rgba(251, 146, 60, 0.03); /* Very subtle orange */
  }

.models-table tbody tr:hover td.nsfw-metric {
    background: rgba(251, 146, 60, 0.08);
  }

/* Safe metric columns */

.models-table th.safe-metric {
    background: var(--color-success-light);
    color: var(--color-success-dark);
  }

.models-table td.safe-metric {
    background: rgba(16, 185, 129, 0.03); /* Very subtle green */
  }

.models-table tbody tr:hover td.safe-metric {
    background: rgba(16, 185, 129, 0.08);
  }

/* Data metric columns */

.models-table th.data-metric {
    background: var(--color-background-tertiary);
    color: var(--color-text-primary);
  }

.models-table td.data-metric {
    background: rgba(0, 0, 0, 0.02); /* Very subtle gray */
  }

.models-table tbody tr:hover td.data-metric {
    background: rgba(0, 0, 0, 0.04);
  }

/* Stacked data cells */

.models-table td.data-cell {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
    line-height: 1.3;
}

.data-total {
  font-size: 0.8125rem;
  font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.data-dist {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.data-dist .pos-count {
    color: var(--color-warning-dark);
    font-weight: 500;
  }

.data-dist .neg-count {
    color: var(--color-success-dark);
  }

/* Performance cells */

.models-table td.perf-cell {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
    line-height: 1.3;
}

.perf-primary {
  font-size: 0.875rem;
  font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.perf-detail {
  font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-family: monospace;
}

.perf-cell.no-data {
    opacity: 0.5;
    font-style: italic;
  }

.perf-cell.good {
    background: rgba(16, 185, 129, 0.08);
  }

.perf-cell.warning {
    background: rgba(251, 146, 60, 0.08);
  }

/* Sortable column headers */

.models-table th.sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.models-table th.sortable:hover {
    background: var(--color-background-secondary);
  }

/* Numeric columns */

.models-table td.numeric {
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Current model row highlighting */

.models-table tbody tr.current-model {
    background: var(--color-primary-50);
    border-left: 3px solid var(--color-primary);
  }

.models-table tbody tr.current-model:hover {
    background: var(--color-primary-100);
  }

/* Model version cell */

.model-version-cell {
  font-weight: 600;
    color: var(--color-text-primary);
}

/* Badge for current/loaded model */

.badge-current {
  display: inline-block;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
    background: var(--color-success);
    color: var(--color-white);
}

/* Performance indicators */

.models-table td.good {
  font-weight: 600;
    color: var(--color-success);
}

.models-table td.warning {
  font-weight: 600;
    color: var(--color-warning);
}

/* Actions cell */

.actions-cell {
  white-space: nowrap;
  text-align: right;
}

/* Table buttons */

.form-actions.btn-table {
    justify-content: center;
  }

.btn-table {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  height: 1.75rem;
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.btn-table:hover:not(:disabled) {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-white);
  }

.btn-table + .btn-table {
  margin-left: 0.5rem;
}

.btn-table.btn-load {
    border-color: var(--color-success);
    color: var(--color-success-dark);
  }

.btn-table.btn-load:hover:not(:disabled) {
    background: var(--color-success);
    color: var(--color-white);
  }

/* Advanced Configuration Styling */

.preset-buttons .btn {
  flex: 1 1 0%;
    min-width: 120px;
}

/* Training Metrics Summary */

.training-metrics-summary {
  margin-top: 1rem;
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 1rem;
    background: var(--color-surface);
    border-color: var(--color-border);
}

.training-metrics-summary h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

.metrics-grid {
  margin-bottom: 1rem;
  display: grid;
  gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.form-actions.metric-item {
    justify-content: space-between;
  }

.metric-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.375rem;
  padding: 0.5rem;
    background: var(--color-background-secondary);
}

.metric-label {
  font-size: 0.8125rem;
  font-weight: 500;
    color: var(--color-text-secondary);
}

.metric-value {
  font-size: 0.875rem;
  font-weight: 600;
    color: var(--color-text-primary);
}

/* Delete button styling */

.btn-table.btn-delete {
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: var(--color-surface);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn-table.btn-delete:hover:not(:disabled) {
    background: var(--color-danger);
    color: var(--color-white);
  }

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

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0;
}

.-right-1 {
  right: -0.25rem;
}

.-top-1 {
  top: -0.25rem;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.top-0 {
  top: 0;
}

.z-50 {
  z-index: 50;
}

.z-\[9999\] {
  z-index: 9999;
}

.m-0 {
  margin: 0;
}

.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-12 {
  height: 3rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-6 {
  height: 1.5rem;
}

.h-\[3px\] {
  height: 3px;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.min-h-0 {
  min-height: 0;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-6 {
  width: 1.5rem;
}

.w-\[300px\] {
  width: 300px;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0;
}

.flex-1 {
  flex: 1 1 0%;
}

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

.origin-left {
  transform-origin: left;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.animate-\[loading-shimmer_1\.5s_ease-in-out_infinite\] {
  animation: loading-shimmer 1.5s ease-in-out infinite;
}

.cursor-help {
  cursor: help;
}

.cursor-pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize {
  resize: both;
}

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

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.375rem;
}

.rounded-full {
  border-radius: 9999px;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-border {
  border-color: var(--color-border);
}

.border-gray-300 {
  border-color: var(--color-gray-300);
}

.border-gray-400 {
  border-color: var(--color-gray-400);
}

.border-gray-800 {
  border-color: var(--color-gray-800);
}

.border-transparent {
  border-color: transparent;
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-background-tertiary {
  background-color: var(--color-background-tertiary);
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
  background-color: var(--color-gray-200);
}

.bg-gray-700 {
  background-color: var(--color-gray-700);
}

.bg-info {
  background-color: var(--color-info);
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-primary {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--color-primary) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.p-4 {
  padding: 1rem;
}

.p-8 {
  padding: 2rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-baseline {
  vertical-align: baseline;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl {
  font-size: 1.25rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 0.875rem;
}

.text-lg {
  font-size: 1rem;
}

.text-sm {
  font-size: 0.8125rem;
}

.text-xl {
  font-size: 1.125rem;
}

.text-xs {
  font-size: 0.75rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.text-danger {
  color: var(--color-danger);
}

.text-gray-500 {
  color: var(--color-gray-500);
}

.text-gray-600 {
  color: var(--color-gray-600);
}

.text-gray-900 {
  color: var(--color-gray-900);
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-text-inverse {
  color: var(--color-text-inverse);
}

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

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

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.shadow-\[0_1px_3px_rgba\(0\2c 0\2c 0\2c 0\.3\)\] {
  --tw-shadow: 0 1px 3px rgba(0,0,0,0.3);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.hover\:border-primary:hover {
  border-color: var(--color-primary);
}

.hover\:bg-gray-300:hover {
  background-color: var(--color-gray-300);
}

.hover\:bg-info-dark:hover {
  background-color: var(--color-info-dark);
}

.hover\:bg-surface-hover:hover {
  background-color: var(--color-surface-hover);
}

.hover\:shadow-\[0_0_12px_var\(--color-primary-100\)\]:hover {
  --tw-shadow: 0 0 12px var(--color-primary-100);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-primary:focus-visible {
  --tw-ring-color: var(--color-primary);
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:rotate-\[15deg\] {
  --tw-rotate: 15deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}